@salutejs/plasma-new-hope 0.110.0-canary.1307.10059399396.0 → 0.110.1-canary.1233.10062283292.0

package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { isEmpty } from '../../../../../../utils';
+import { applyEllipsis, addFocus } from '../../../../../../mixins';
+import { IconDisclosureDownCentered } from '../../../../../_Icon';
+import { component, mergeConfig } from '../../../../../../engines';
+import { buttonConfig, buttonTokens } from '../../../../../Button';
+import { tokens, classes, constants } from '../../../../Select.tokens';
+var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
+var Button = /*#__PURE__*/component(mergedButtonConfig);
+export var TextfieldWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-0"
+})(["display:inline;.", "{background:", ";padding:", ";}.", "::before{box-shadow:none !important;}"], classes.textfieldTarget, function (_ref) {
+  var opened = _ref.opened;
+  return opened ? "var(".concat(tokens.targetTextfieldBackgroundColorOpened, ")") : "var(".concat(tokens.targetTextfieldBackgroundColor, ")");
+}, function (_ref2) {
+  var value = _ref2.value;
+  return Array.isArray(value) && !isEmpty(value) ? "0 var(".concat(tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(tokens.targetTextfieldPadding, ")");
+}, classes.selectWithoutBoxShadow);
+export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-1"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");box-shadow:inset 0 0 0 ", " var(", ");", ""], buttonTokens.buttonColor, constants.textfieldTargetColor, buttonTokens.buttonColorHover, constants.textfieldTargetColor, buttonTokens.buttonColorActive, constants.textfieldTargetColor, buttonTokens.buttonHeight, tokens.targetHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetTextfieldPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, tokens.fontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, constants.opacity, buttonTokens.buttonFocusColor, constants.focusColor, constants.textfieldBorderSize, tokens.targetTextfieldBorderColor, /*#__PURE__*/addFocus({
+  outlineOffset: constants.textfieldBorderSize,
+  outlineSize: constants.focusSize,
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.borderRadius, ") - ").concat(constants.textfieldBorderSize, ")"),
+  outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")")
+}));
+export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-2"
+})([""]);
+export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-3"
+})(["line-height:0;margin:var(", ");color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.targetTextfieldArrowMargin, tokens.targetTextfieldArrowColor, tokens.targetTextfieldArrowColorHover, tokens.targetTextfieldArrowColorActive);
+export var Wrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-4"
+})(["width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;.", "{transform:rotate(-180deg);}"], classes.arrowInverse);
+export var ChipWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-5"
+})(["width:100%;display:flex;min-width:0;padding:calc(", " + var(", "));gap:0.25rem;overflow-x:scroll;border-top-right-radius:var(", ");border-bottom-right-radius:var(", ");-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}"], constants.focusSize, tokens.focusOffset, tokens.chipBorderRadius, tokens.chipBorderRadius);
+export var Label = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-6"
+})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], constants.textfieldInnerLabelColor, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
+export var Placeholder = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-7"
+})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], constants.textfieldPlaceholderColor, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
+export var InnerLabelWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-8"
+})(["display:flex;flex-direction:column;align-items:start;row-gap:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.innerLabelGap, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
+export var InnerLabel = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-9"
+})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], constants.textfieldInnerLabelColor, constants.fontFamily, constants.fontSize, constants.fontStyle, constants.fontWeight, constants.fontLetterSpacing, constants.fontLineHeight);
+export var ContentLeftWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-10"
+})(["flex:none;margin-left:-0.125rem;margin-right:0.375rem;line-height:0;"]);
+export var Value = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-1akl2tk-11"
+})(["", ""], /*#__PURE__*/applyEllipsis());

package/styled-components/es/components/Select/ui/Target/ui/Textfield/ui/Chip/Chip.js

@@ -0,0 +1,28 @@
+var _div;
+import React, { useEffect, useRef } from 'react';
+import { classes } from '../../../../../../Select.tokens';
+import { StyledChip } from './Chip.styles';
+export var Chip = function Chip(_ref) {
+  var text = _ref.text,
+    onClick = _ref.onClick,
+    focused = _ref.focused,
+    isTargetAmount = _ref.isTargetAmount;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (focused && ref.current) {
+      ref.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      });
+    }
+  }, [focused]);
+  return /*#__PURE__*/React.createElement(StyledChip, {
+    contentClearButton: isTargetAmount && (_div || (_div = /*#__PURE__*/React.createElement("div", null))),
+    tabIndex: -1,
+    onClick: onClick,
+    text: "".concat(text),
+    className: focused ? classes.selectChipIsFocused : undefined,
+    ref: ref
+  });
+};

package/styled-components/es/components/Select/ui/Target/ui/Textfield/ui/Chip/Chip.styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { chipConfig, chipTokens } from '../../../../../../../Chip';
+import { component, mergeConfig } from '../../../../../../../../engines';
+import { tokens, classes, constants } from '../../../../../../Select.tokens';
+import { addFocus } from '../../../../../../../../mixins';
+var mergedConfig = /*#__PURE__*/mergeConfig(chipConfig);
+var Chip = /*#__PURE__*/component(mergedConfig);
+export var StyledChip = /*#__PURE__*/styled(Chip).withConfig({
+  componentId: "plasma-new-hope__sc-1mtedco-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ";"], chipTokens.color, tokens.chipColor, chipTokens.colorHover, tokens.chipColor, chipTokens.colorActive, tokens.chipColor, chipTokens.background, tokens.chipBackground, chipTokens.backgroundHover, tokens.chipBackgroundHover, chipTokens.backgroundActive, tokens.chipBackgroundActive, chipTokens.borderRadius, tokens.chipBorderRadius, chipTokens.height, tokens.chipHeight, chipTokens.paddingRight, tokens.chipPaddingRight, chipTokens.paddingLeft, tokens.chipPaddingLeft, chipTokens.fontFamily, tokens.fontFamily, chipTokens.fontSize, tokens.fontSize, chipTokens.fontStyle, tokens.fontStyle, chipTokens.fontWeight, tokens.fontWeight, chipTokens.letterSpacing, tokens.fontLetterSpacing, chipTokens.lineHeight, tokens.fontLineHeight, chipTokens.clearContentMarginLeft, tokens.chipClearContentMarginLeft, chipTokens.clearContentMarginRight, tokens.chipClearContentMarginRight, chipTokens.closeIconSize, tokens.chipCloseIconSize, chipTokens.closeIconColor, tokens.chipColor, chipTokens.focusColor, constants.focusColor, /*#__PURE__*/addFocus({
+  outlineOffset: /*#__PURE__*/"calc(var(".concat(tokens.focusOffset, ") * -1)"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.chipBorderRadius, ") + var(").concat(tokens.focusOffset, "))"),
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.selectChipIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 ").concat(constants.focusSize, " var(").concat(constants.focusColor, ");\n            }\n        ")
+}));

package/styled-components/es/components/Select/ui/Target/ui/Textfield/ui/index.js

@@ -0,0 +1 @@
+export * from './Chip/Chip';

package/styled-components/es/components/Select/ui/Target/ui/index.js

@@ -0,0 +1,2 @@
+export * from './Button/Button';
+export * from './Textfield/Textfield';

package/styled-components/es/components/Select/ui/index.js

@@ -1,6 +1,3 @@
-export { selectDividerRoot, selectDividerConfig } from './SelectDivider/SelectDivider';
-export { selectFooterRoot, selectFooterConfig } from './SelectFooter/SelectFooter';
-export { selectGroupRoot, selectGroupConfig } from './SelectGroup/SelectGroup';
-export { selectHeaderRoot, selectHeaderConfig } from './SelectHeader/SelectHeader';
-export { selectItemRoot, selectItemConfig } from './SelectItem/SelectItem';
-export { SelectTarget } from './SelectTarget/SelectTarget';
+export * from './InfiniteLoader/InfiniteLoader';
+export * from './Inner/Inner';
+export * from './Target/Target';

package/styled-components/es/components/Select/utils/getButtonLabel.js

@@ -0,0 +1,37 @@
+import { isEmpty } from '../../../utils';
+var getLabel = function getLabel(_ref) {
+  var renderValue = _ref.renderValue,
+    value = _ref.value,
+    valueToItemMap = _ref.valueToItemMap;
+  var _ref2 = valueToItemMap.get(value === null || value === void 0 ? void 0 : value.toString()),
+    label = _ref2.label;
+  return renderValue ? renderValue(value, label) : label;
+};
+export var getButtonLabel = function getButtonLabel(_ref3) {
+  var value = _ref3.value,
+    label = _ref3.label,
+    isTargetAmount = _ref3.isTargetAmount,
+    multiselect = _ref3.multiselect,
+    valueToItemMap = _ref3.valueToItemMap,
+    renderValue = _ref3.renderValue;
+  if (isEmpty(value)) {
+    return label;
+  }
+  if (multiselect && isTargetAmount) {
+    return "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length);
+  }
+  if (multiselect && Array.isArray(value)) {
+    return value.map(function (itemValue) {
+      return getLabel({
+        renderValue: renderValue,
+        value: itemValue,
+        valueToItemMap: valueToItemMap
+      });
+    }).join(', ');
+  }
+  return getLabel({
+    renderValue: renderValue,
+    value: value,
+    valueToItemMap: valueToItemMap
+  });
+};

package/styled-components/es/components/Select/utils/getCorrectHeight.js

@@ -0,0 +1,6 @@
+export var getCorrectHeight = function getCorrectHeight(listHeight) {
+  if (Number.isNaN(Number(listHeight))) {
+    return listHeight.toString();
+  }
+  return "".concat(listHeight, "rem");
+};

package/styled-components/es/components/Select/utils/index.js

@@ -1,106 +1,7 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { Children, cloneElement, isValidElement } from 'react';
-export var getNewSelected = function getNewSelected(selected, newValue, type) {
-  if (newValue === undefined || newValue === null) {
-    return newValue;
-  }
-  if ((type === 'single' || type === 'native') && (typeof newValue === 'string' || typeof newValue === 'number' || typeof newValue === 'boolean')) {
-    return newValue;
-  }
-  var newSelected = selected || [];
-  var set = new Set(newSelected);
-  if (set.has(newValue)) {
-    set["delete"](newValue);
-  } else {
-    set.add(newValue);
-  }
-  return Array.from(set);
-};
-var getChildrenInnerText = function getChildrenInnerText(children) {
-  if (!children || typeof children === 'string') {
-    return children;
-  }
-  return getChildrenInnerText(children.props.children);
-};
-export var getValues = function getValues(items, value) {
-  var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  items.forEach(function (item) {
-    if (item.props === undefined) {
-      return result;
-    }
-    var newValue = item.props.value;
-    if (item.props.children && Array.isArray(item.props.children)) {
-      return getValues(item.props.children, value, result);
-    }
-    if (!Array.isArray(value) && newValue === value || Array.isArray(value) && value !== null && value !== void 0 && value.find(function (v) {
-      return newValue === v;
-    })) {
-      var index = Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.findIndex(function (v) {
-        return newValue === v;
-      })) || 0;
-      if (item.props.text) {
-        var _newText = item.props.text;
-        result[index] = [newValue, _newText];
-        return;
-      }
-      var newText = getChildrenInnerText(item.props.children);
-      result[index] = [newValue, newText];
-    }
-    return result;
-  });
-  return result;
-};
-var getChildrenItemChecked = function getChildrenItemChecked(value, child) {
-  return !Array.isArray(value) && (child === null || child === void 0 ? void 0 : child.props.value) === value || Array.isArray(value) && Boolean(value === null || value === void 0 ? void 0 : value.find(function (v) {
-    return (child === null || child === void 0 ? void 0 : child.props.value) === v;
-  }));
-};
-
-// INFO: Функция для рекурсивного обновления пропсов
-export var updatePropsRecursively = function updatePropsRecursively(children, externalProps, value, search, filterFunction) {
-  return Children.map(children || [], function (child) {
-    if (! /*#__PURE__*/isValidElement(child)) {
-      return child;
-    }
-    var hasValue = ('value' in (child === null || child === void 0 ? void 0 : child.props));
-    var props = _objectSpread({
-      key: "".concat(value, "$"),
-      checked: getChildrenItemChecked(value, child)
-    }, hasValue && {
-      ref: function ref(element) {
-        var _externalProps$childr;
-        if (externalProps !== null && externalProps !== void 0 && (_externalProps$childr = externalProps.childrenRefs) !== null && _externalProps$childr !== void 0 && _externalProps$childr.current && element) {
-          externalProps.childrenRefs.current.push(element);
-        }
-      },
-      onClick: function onClick(event) {
-        var _child$props$onClick, _child$props, _externalProps$onClic;
-        (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 || _child$props$onClick.call(_child$props, event);
-        externalProps === null || externalProps === void 0 || (_externalProps$onClic = externalProps.onClick) === null || _externalProps$onClic === void 0 || _externalProps$onClic.call(externalProps, event);
-      }
-    });
-    var updatedChild = updatePropsRecursively(child.props.children, externalProps, value, search, filterFunction);
-    if (filterFunction) {
-      var _child$props2;
-      var text = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.text) || '';
-      return filterFunction(text, search) ? /*#__PURE__*/cloneElement(child, props, updatedChild) : null;
-    }
-    return /*#__PURE__*/cloneElement(child, props, updatedChild);
-  });
-};
-var defaultFilterFunction = function defaultFilterFunction(text) {
-  var filterValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return text.includes(filterValue);
-};
-export var getChildren = function getChildren(children, externalProps, value, search) {
-  var filterFunction = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : defaultFilterFunction;
-  if (externalProps.childrenRefs) {
-    externalProps.childrenRefs.current = [];
-  }
-  return updatePropsRecursively(children, externalProps, value, search, filterFunction);
-};
+export { initialItemsTransform } from './initialItemsTransform';
+export { updateDescendants } from './updateDescendants';
+export { updateAncestors } from './updateAncestors';
+export { updateSingleAncestors } from './updateSingleAncestors';
+export { sizeToIconSize } from './sizeToIconSize';
+export { getCorrectHeight } from './getCorrectHeight';
+export { getButtonLabel } from './getButtonLabel';

package/styled-components/es/components/Select/utils/initialItemsTransform.js

@@ -0,0 +1,12 @@
+// Проходимся по массиву items и добавляем в каждый item ключ parent, который ссылается на item родителя.
+// Дает возможность прохода к корневому элементу (снизу вверх).
+
+export var initialItemsTransform = function initialItemsTransform(items, parent) {
+  items.forEach(function (item) {
+    item.parent = parent;
+    if (item.items) {
+      item.items = initialItemsTransform(item.items, item);
+    }
+  });
+  return items;
+};

package/styled-components/es/components/Select/utils/sizeToIconSize.js

@@ -0,0 +1,4 @@
+export var sizeToIconSize = function sizeToIconSize(size, variant) {
+  if (size === 'xs' || size === 's' && variant === 'tight') return 'xs';
+  return 's';
+};

package/styled-components/es/components/Select/utils/updateAncestors.js

@@ -0,0 +1,27 @@
+export var updateAncestors = function updateAncestors(node, checkedMap) {
+  if (!(node !== null && node !== void 0 && node.parent)) {
+    return;
+  }
+  var parent = node.parent;
+  var siblings = parent.items;
+  var siblingsLength = siblings.length;
+  var checkedFromAllSiblings = 0;
+  var isParentIndeterminate = false;
+  siblings.forEach(function (sib) {
+    if (checkedMap.get(sib.value) === 'indeterminate') {
+      isParentIndeterminate = true;
+      return;
+    }
+    if (checkedMap.get(sib.value)) {
+      checkedFromAllSiblings += 1;
+    }
+  });
+  if (isParentIndeterminate || checkedFromAllSiblings > 0 && checkedFromAllSiblings < siblingsLength) {
+    checkedMap.set(parent.value, 'indeterminate');
+  } else if (checkedFromAllSiblings === 0) {
+    checkedMap.set(parent.value, false);
+  } else {
+    checkedMap.set(parent.value, true);
+  }
+  updateAncestors(parent, checkedMap);
+};

package/styled-components/es/components/Select/utils/updateDescendants.js

@@ -0,0 +1,11 @@
+export var updateDescendants = function updateDescendants(node, checkedMap, isChecked) {
+  if (!(node !== null && node !== void 0 && node.items)) {
+    return;
+  }
+  node.items.forEach(function (item) {
+    checkedMap.set(item.value, isChecked);
+    if (item.items) {
+      updateDescendants(item, checkedMap, isChecked);
+    }
+  });
+};

package/styled-components/es/components/Select/utils/updateSingleAncestors.js

@@ -0,0 +1,8 @@
+export var updateSingleAncestors = function updateSingleAncestors(node, checkedMap, type) {
+  if (!node.parent) {
+    return;
+  }
+  var parent = node.parent;
+  checkedMap.set(parent.value, type);
+  updateSingleAncestors(parent, checkedMap, type);
+};

package/styled-components/es/components/_Icon/Icon.assets/DisclosureDownCentered.js

@@ -0,0 +1,25 @@
+var _path, _path2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+export var DisclosureDownCentered = function DisclosureDownCentered(props) {
+  if (props.size === 'xs') {
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      width: "100%",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+      id: "path",
+      d: "M4.64 6.14C4.84 5.95 5.15 5.95 5.35 6.14L8 8.79L10.64 6.14C10.84 5.95 11.15 5.95 11.35 6.14C11.54 6.34 11.54 6.65 11.35 6.85L8 10.2L4.64 6.85C4.45 6.65 4.45 6.34 4.64 6.14Z",
+      fill: "currentColor"
+    })));
+  }
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    id: "path",
+    d: "M6.96 9.21C7.26 8.92 7.73 8.92 8.03 9.21L12 13.18L15.96 9.21C16.26 8.92 16.73 8.92 17.03 9.21C17.32 9.51 17.32 9.98 17.03 10.28L12 15.31L6.96 10.28C6.67 9.98 6.67 9.51 6.96 9.21Z",
+    fill: "currentColor"
+  })));
+};

package/styled-components/es/components/_Icon/Icon.assets/DisclosureRightCentered.js

@@ -0,0 +1,23 @@
+var _path, _path2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+export var DisclosureRightCentered = function DisclosureRightCentered(props) {
+  if (props.size === 'xs') {
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      width: "100%",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+      d: "M6.04 4.64C5.84 4.84 5.84 5.15 6.04 5.35L8.68 8L6.04 10.64C5.84 10.84 5.84 11.15 6.04 11.35C6.23 11.54 6.55 11.54 6.75 11.35L10.1 8L6.75 4.64C6.55 4.45 6.23 4.45 6.04 4.64Z",
+      fill: "currentColor"
+    })));
+  }
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M9.06 6.96C8.77 7.26 8.77 7.73 9.06 8.03L13.03 12L9.06 15.96C8.77 16.26 8.77 16.73 9.06 17.03C9.35 17.32 9.83 17.32 10.12 17.03L15.15 12L10.12 6.96C9.83 6.67 9.35 6.67 9.06 6.96Z",
+    fill: "currentColor"
+  })));
+};

package/styled-components/es/components/_Icon/Icons/IconDisclosureDownCentered.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DisclosureDownCentered } from '../Icon.assets/DisclosureDownCentered';
+import { IconRoot } from '../IconRoot';
+export var IconDisclosureDownCentered = function IconDisclosureDownCentered(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xs' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: DisclosureDownCentered
+  });
+};

package/styled-components/es/components/_Icon/Icons/IconDisclosureRightCentered.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DisclosureRightCentered } from '../Icon.assets/DisclosureRightCentered';
+import { IconRoot } from '../IconRoot';
+export var IconDisclosureRightCentered = function IconDisclosureRightCentered(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: DisclosureRightCentered
+  });
+};

package/styled-components/es/components/_Icon/index.js

@@ -9,4 +9,6 @@ export { IconChevronDownFill } from './Icons/IconChevronDownFill';
 export { IconClose } from './Icons/IconClose';
 export { IconCross } from './Icons/IconCross';
 export { IconDone } from './Icons/IconDone';
+export { IconDisclosureRightCentered } from './Icons/IconDisclosureRightCentered';
+export { IconDisclosureDownCentered } from './Icons/IconDisclosureDownCentered';
 export { IconMinus } from './Icons/IconMinus';

package/styled-components/es/examples/_helpers.js

@@ -16,7 +16,7 @@ export var WithTheme = function WithTheme(Story, context) {
     className: themes === null || themes === void 0 || (_themes$themeName = themes[themeName]) === null || _themes$themeName === void 0 ? void 0 : _themes$themeName[themeType],
     style: {
       padding: '1rem',
-      height: '100vh',
+      minHeight: '100vh',
       boxSizing: 'border-box'
     }
   }, /*#__PURE__*/React.createElement(Story, null));

package/styled-components/es/examples/plasma_b2c/components/Pagination/Pagination.config.js

@@ -8,9 +8,9 @@ export var config = {
   },
   variations: {
     view: {
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":0.4;", ":var(--surface-transparent-secondary);", ":var(--surface-solid-secondary);", ":transparent;", ":var(--text-primary);", ":var(--surface-accent);"], paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
-      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 95%);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 90%);", ":0.4;", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":transparent;", ":var(--text-primary);", ":var(--surface-accent);"], paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":0.4;", ":var(--surface-transparent-secondary);", ":transparent;", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--text-primary);", ":var(--surface-accent);"], paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.selectBackgroundColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor)
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--inverse-text-primary-active);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-active);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary-hover);", ":var(--inverse-text-secondary-hover);", ":0.4;", ":var(--surface-transparent-secondary);", ":transparent;", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--text-primary);", ":var(--surface-accent);"], paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.selectBackgroundColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":0.4;", ":var(--surface-transparent-secondary);", ":var(--surface-solid-secondary);", ":transparent;", ":var(--text-primary);", ":var(--surface-accent);"], paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
+      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":0.4;", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":transparent;", ":var(--text-primary);", ":var(--surface-accent);"], paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor)
     },
     viewCurrentPage: {
       "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );"], paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor),
@@ -18,10 +18,10 @@ export var config = {
       clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 95%);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 90%);"], paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor)
     },
     size: {
-      l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":3rem;", ":2.25rem;", ":4rem;", ":0.875rem;", ":1.2rem;", ":1.45rem;", ":100%;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":auto;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":1.875rem;", ":transparent;", ":1rem;", ":100%;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.875rem;", ":4rem;", ":3.5rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
-      m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":3rem;", ":2rem;", ":3.5rem;", ":0.75rem;", ":1.05rem;", ":1.3rem;", ":100%;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":auto;", ":1.5rem;", ":0.75rem;", ":0.75rem;", ":0.75rem;", ":0.75rem;", ":1.75rem;", ":transparent;", ":0.875rem;", ":100%;", ":0 3.25rem 0 1.25rem;", ":0 3.375rem 0 0.375rem;", ":0 3.375rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
-      s: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":2.5rem;", ":1.75rem;", ":3rem;", ":0.625rem;", ":0.9rem;", ":1.15rem;", ":100%;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":auto;", ":1.5rem;", ":0.5rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":1.75rem;", ":transparent;", ":0.75rem;", ":100%;", ":0 3rem 0 1rem;", ":0 3.125rem 0 0.375rem;", ":0 3.125rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.625rem;", ":3rem;", ":2.5rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
-      xs: /*#__PURE__*/css(["", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":2rem;", ":2.5rem;", ":0.5rem;", ":2rem;", ":1.5rem;", ":0.75rem;", ":1rem;", ":100%;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":auto;", ":1rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":1.25rem;", ":transparent;", ":0.5rem;", ":100%;", ":0 2.5rem 0 0.75rem;", ":0 2.625rem 0 0.375rem;", ":0 2.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":2.5rem;", ":2rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth)
+      l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":3rem;", ":2.25rem;", ":4rem;", ":0.875rem;", ":1.2rem;", ":1.45rem;", ":0 -0.125rem 0 0.5rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":1.5rem;", ":1rem 1rem 1rem 1rem;", ":1.875rem;", ":transparent;", ":1rem;", ":1.5rem 0 1.5rem;", ":0.5rem;", ":0.375rem;", ":0.875rem;", ":4rem;", ":3.5rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+      m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":3rem;", ":2rem;", ":3.5rem;", ":0.75rem;", ":1.05rem;", ":1.3rem;", ":0 -0.125rem 0 0.375rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":1.5rem;", ":0.75rem 0.75rem 0.75rem 0.75rem;", ":1.75rem;", ":transparent;", ":0.875rem;", ":1.25rem 0 1.25rem;", ":0.5rem;", ":0.375rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+      s: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":2.5rem;", ":1.75rem;", ":3rem;", ":0.625rem;", ":0.9rem;", ":1.15rem;", ":0 -0.125rem 0 0.25rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":1.5rem;", ":0.5rem 0.75rem 0.5rem 0.75rem;", ":1.75rem;", ":transparent;", ":0.75rem;", ":1rem 0 1rem;", ":0.5rem;", ":0.375rem;", ":0.625rem;", ":3rem;", ":2.5rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+      xs: /*#__PURE__*/css(["", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":2rem;", ":2.5rem;", ":0.5rem;", ":2rem;", ":1.5rem;", ":0.75rem;", ":1rem;", ":0 -0.125rem 0 0.25rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":1rem;", ":0.5rem 0.5rem 0.5rem 0.5rem;", ":1.25rem;", ":transparent;", ":0.5rem;", ":0.75rem 0 0.75rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":2.5rem;", ":2rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth)
     },
     type: {
       compact: /*#__PURE__*/css([""]),

package/styled-components/es/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx

@@ -64,6 +64,7 @@ export const Default: Story = {
         hasPerPage: true,
         pilled: false,
         square: true,
+        listWidth: '5rem',
     },
 };