@salutejs/plasma-new-hope 0.329.1-canary.2082.16264269696.0 → 0.329.1-canary.2088.16342669110.0

package/styled-components/es/components/Popup/Popup.js

@@ -101,12 +101,15 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import React, { forwardRef, useRef } from "react";
 import { useForkRef } from "@salutejs/plasma-core";
+import Draggable from "react-draggable";
+import { Resizable } from "re-resizable";
 import { canUseDOM, cx, safeUseId } from "../../utils";
 import { Portal } from "../Portal";
+import { getRatioBasedOnPlacement, getResizeDirections, getHandleStyles } from "./utils";
 import { PopupRoot } from "./PopupRoot";
 import { usePopup } from "./hooks";
 import { classes } from "./Popup.tokens";
-import { StyledPortalContainer } from "./Popup.styles";
+import { StyledPortalContainer, base, IconResizeDiagonalStyled } from "./Popup.styles";
 export var handlePosition = function(placement, offset) {
     var x = '0rem';
     var y = '0rem';
@@ -170,7 +173,7 @@ export var handlePosition = function(placement, offset) {
             0,
             0
         ] : _param_offset, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, children = _param.children, overlay = _param.overlay, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        role = _param.role, zIndex = _param.zIndex, popupInfo = _param.popupInfo, _param_withAnimation = _param.withAnimation, withAnimation = _param_withAnimation === void 0 ? false : _param_withAnimation, className = _param.className, rest = _object_without_properties(_param, [
+        role = _param.role, zIndex = _param.zIndex, popupInfo = _param.popupInfo, _param_withAnimation = _param.withAnimation, withAnimation = _param_withAnimation === void 0 ? false : _param_withAnimation, className = _param.className, draggable = _param.draggable, outerResizable = _param.resizable, rest = _object_without_properties(_param, [
             "id",
             "isOpen",
             "opened",
@@ -183,9 +186,15 @@ export var handlePosition = function(placement, offset) {
             "zIndex",
             "popupInfo",
             "withAnimation",
-            "className"
+            "className",
+            "draggable",
+            "resizable"
         ]);
+        var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
         var innerIsOpen = isOpen || opened;
+        var resizable = typeof outerResizable === 'boolean' ? {
+            disabled: !outerResizable
+        } : outerResizable;
         var uniqId = safeUseId();
         var innerId = id || uniqId;
         var _usePopup = usePopup({
@@ -196,11 +205,22 @@ export var handlePosition = function(placement, offset) {
         }), isVisible = _usePopup.isVisible, animationInfo = _usePopup.animationInfo, setVisible = _usePopup.setVisible, rootId = _usePopup.rootId;
         var portalRef = useRef(null);
         var contentRef = useRef(null);
+        var resizableContainer = useRef(null);
         var innerRef = useForkRef(contentRef, outerRootRef);
         if (!isVisible && !innerIsOpen) {
             return null;
         }
         var cls = cx(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? classes.endTransition : '');
+        var handleResizeStart = function() {
+            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+                resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+            }
+        };
+        var handleResizeStop = function() {
+            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+                resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+            }
+        };
         var rootNode = /*#__PURE__*/ React.createElement(Root, {
             className: cls
         }, overlay, /*#__PURE__*/ React.createElement(PopupRoot, _object_spread({
@@ -211,7 +231,48 @@ export var handlePosition = function(placement, offset) {
             frame: frame,
             animationInfo: animationInfo,
             setVisible: setVisible
-        }, rest), children));
+        }, rest), /*#__PURE__*/ React.createElement(Draggable, {
+            defaultClassName: draggable ? classes.draggablePopupWrapper : undefined,
+            defaultClassNameDragging: draggable ? classes.draggingPopupWrapper : undefined,
+            disabled: !draggable,
+            cancel: ".".concat(classes.resizableHandleWrapper)
+        }, /*#__PURE__*/ React.createElement(Resizable, {
+            ref: resizableContainer,
+            enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
+            resizeRatio: getRatioBasedOnPlacement(placement),
+            defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
+            minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
+            minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
+            maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
+            maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
+            onResizeStart: handleResizeStart,
+            onResizeStop: handleResizeStop,
+            handleComponent: {
+                topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                    className: classes.resizableTopRightIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                })),
+                bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                    className: classes.resizableBottomRightIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                })),
+                bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                    className: classes.resizableBottomLeftIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                })),
+                topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                    className: classes.resizableTopLeftIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                }))
+            },
+            className: classes.resizableContainer,
+            handleStyles: getHandleStyles(),
+            handleWrapperClass: classes.resizableHandleWrapper
+        }, children))));
         if (typeof frame !== 'string' && frame && frame.current && canUseDOM) {
             return /*#__PURE__*/ React.createElement(Portal, {
                 container: frame.current
@@ -238,7 +299,7 @@ export var popupConfig = {
     name: 'Popup',
     tag: 'div',
     layout: popupRoot,
-    base: '',
+    base: base,
     variations: {},
     defaults: {}
 };

package/styled-components/es/components/Popup/Popup.styles.js

@@ -1,26 +1,35 @@
 import styled from "styled-components";
+import { css } from "styled-components";
+import { IconResizeDiagonal } from "../_Icon";
+import { classes } from "./Popup.tokens";
 import { DEFAULT_Z_INDEX } from "./utils";
+export var base = css([
+    ".",
+    "{cursor:grab;}.",
+    "{cursor:grabbing;}.",
+    "{user-select:none;-webkit-user-select:none;}"
+], classes.draggablePopupWrapper, classes.draggingPopupWrapper, classes.resizableContainerNoSelect);
 export var StyledPortal = styled.div.withConfig({
     displayName: "Popup.styles__StyledPortal",
-    componentId: "sc-9d33eb36-0"
+    componentId: "sc-e8036c4-0"
 })([
     ""
 ]);
 export var StyledPortalContainer = styled.div.withConfig({
     displayName: "Popup.styles__StyledPortalContainer",
-    componentId: "sc-9d33eb36-1"
+    componentId: "sc-e8036c4-1"
 })([
     "width:0;"
 ]);
 export var PopupView = styled.div.withConfig({
     displayName: "Popup.styles__PopupView",
-    componentId: "sc-9d33eb36-2"
+    componentId: "sc-e8036c4-2"
 })([
     "position:relative;max-width:100%;pointer-events:all;"
 ]);
 export var PopupRootContainer = styled.div.withConfig({
     displayName: "Popup.styles__PopupRootContainer",
-    componentId: "sc-9d33eb36-3"
+    componentId: "sc-e8036c4-3"
 })([
     "position:",
     ";z-index:",
@@ -52,3 +61,13 @@ export var PopupRootContainer = styled.div.withConfig({
     var position = param.position;
     return position.transform || '';
 });
+export var IconResizeDiagonalStyled = styled(IconResizeDiagonal).withConfig({
+    displayName: "Popup.styles__IconResizeDiagonalStyled",
+    componentId: "sc-e8036c4-4"
+})([
+    "color:var(--text-secondary);&:hover{color:var(--text-secondary-hover);}&:active{color:var(--text-secondary-active);}&.",
+    "{transform:rotate(-90deg);}&.",
+    "{transform:rotate(0);}&.",
+    "{transform:rotate(90deg);}&.",
+    "{transform:rotate(180deg);}"
+], classes.resizableTopRightIcon, classes.resizableBottomRightIcon, classes.resizableBottomLeftIcon, classes.resizableTopLeftIcon);

package/styled-components/es/components/Popup/Popup.tokens.js

@@ -3,5 +3,14 @@ export var classes = {
      * Класс корневого компонента PopupRoot: `popup-base-root`
      */ root: 'popup-base-root',
     endAnimation: 'popup-end-animation',
-    endTransition: 'popup-end-transition'
+    endTransition: 'popup-end-transition',
+    resizableContainer: 'resizable-container',
+    resizableTopRightIcon: 'resizable-top-right-icon',
+    resizableBottomRightIcon: 'resizable-bottom-right-icon',
+    resizableBottomLeftIcon: 'resizable-bottom-left-icon',
+    resizableTopLeftIcon: 'resizable-top-left-icon',
+    resizableHandleWrapper: 'resizable-handle-wrapper',
+    resizableContainerNoSelect: 'resizable-container-no-select',
+    draggablePopupWrapper: 'draggable-popup-wrapper',
+    draggingPopupWrapper: 'dragging-popup-wrapper'
 };

package/styled-components/es/components/Popup/utils/getHandleStyles.js

@@ -0,0 +1,58 @@
+// Объект стилей для handler'а, в котором находится иконка ресайза.
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+var base = {
+    width: 'auto',
+    height: 'auto',
+    lineHeight: '0'
+};
+export var getHandleStyles = function() {
+    return {
+        topRight: _object_spread({
+            top: '0',
+            right: '0',
+            transform: 'translate(50%, -50%)'
+        }, base),
+        bottomRight: _object_spread({
+            right: '0',
+            bottom: '0',
+            transform: 'translate(50%, 50%)'
+        }, base),
+        bottomLeft: _object_spread({
+            bottom: '0',
+            left: '0',
+            transform: 'translate(-50%, 50%)'
+        }, base),
+        topLeft: _object_spread({
+            top: '0',
+            left: '0',
+            transform: 'translate(-50%, -50%)'
+        }, base)
+    };
+};

package/styled-components/es/components/Popup/utils/getRatioBasedOnPlacement.js

@@ -0,0 +1,44 @@
+export var getRatioBasedOnPlacement = function(placement) {
+    switch(placement){
+        case 'center':
+            {
+                return [
+                    2,
+                    2
+                ];
+            }
+        case 'top':
+        case 'bottom':
+            {
+                return [
+                    2,
+                    1
+                ];
+            }
+        case 'left':
+        case 'right':
+            {
+                return [
+                    1,
+                    2
+                ];
+            }
+        case 'top-left':
+        case 'top-right':
+        case 'bottom-left':
+        case 'bottom-right':
+            {
+                return [
+                    1,
+                    1
+                ];
+            }
+        default:
+            {
+                return [
+                    2,
+                    2
+                ];
+            }
+    }
+};

package/styled-components/es/components/Popup/utils/getResizeDirections.js

@@ -0,0 +1,72 @@
+export var getResizeDirections = function(directions) {
+    if (!directions) {
+        return {
+            top: true,
+            right: true,
+            bottom: true,
+            left: true,
+            topRight: true,
+            bottomRight: true,
+            bottomLeft: true,
+            topLeft: true
+        };
+    }
+    var result = {
+        top: false,
+        right: false,
+        bottom: false,
+        left: false,
+        topRight: false,
+        bottomRight: false,
+        bottomLeft: false,
+        topLeft: false
+    };
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = directions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var dir = _step.value;
+            switch(dir){
+                case 'top':
+                    result.top = true;
+                    break;
+                case 'right':
+                    result.right = true;
+                    break;
+                case 'bottom':
+                    result.bottom = true;
+                    break;
+                case 'left':
+                    result.left = true;
+                    break;
+                case 'top-right':
+                    result.topRight = true;
+                    break;
+                case 'top-left':
+                    result.topLeft = true;
+                    break;
+                case 'bottom-right':
+                    result.bottomRight = true;
+                    break;
+                case 'bottom-left':
+                    result.bottomLeft = true;
+                    break;
+                default:
+                    break;
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return result;
+};

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

@@ -1 +1,4 @@
+export * from "./getRatioBasedOnPlacement";
+export * from "./getResizeDirections";
+export * from "./getHandleStyles";
 export var DEFAULT_Z_INDEX = '9000';

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

@@ -0,0 +1,68 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import React from "react";
+export var ResizeDiagonal = function(props) {
+    return /*#__PURE__*/ React.createElement("svg", _object_spread_props(_object_spread({
+        width: "100%",
+        viewBox: "0 0 24 24",
+        fill: "none"
+    }, props), {
+        xmlns: "http://www.w3.org/2000/svg"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M21.5 13.25C21.5985 13.25 21.6961 13.269 21.7871 13.3066C21.8781 13.3443 21.9606 13.4001 22.0303 13.4697C22.1 13.5394 22.1556 13.6218 22.1934 13.7129C22.2311 13.8039 22.25 13.9015 22.25 14C22.25 14.0985 22.2311 14.1961 22.1934 14.2871C22.1556 14.3782 22.1 14.4606 22.0303 14.5303L14.5303 22.0303C14.4606 22.0999 14.3781 22.1557 14.2871 22.1934C14.1961 22.231 14.0985 22.25 14 22.25C13.9015 22.25 13.8039 22.2311 13.7129 22.1934C13.6218 22.1556 13.5394 22.1 13.4697 22.0303C13.4001 21.9606 13.3443 21.8781 13.3066 21.7871C13.269 21.6961 13.25 21.5985 13.25 21.5C13.25 21.4015 13.269 21.3039 13.3066 21.2129C13.3443 21.1219 13.4001 21.0394 13.4697 20.9697L20.9697 13.4697C21.0394 13.4 21.1218 13.3444 21.2129 13.3066C21.3039 13.2689 21.4015 13.25 21.5 13.25Z",
+        fill: "currentColor"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M20 4.99902C20.0985 4.99902 20.1961 5.01892 20.2871 5.05664C20.3782 5.09438 20.4606 5.15 20.5303 5.21973C20.6 5.28938 20.6556 5.37184 20.6934 5.46289C20.7311 5.55392 20.751 5.65146 20.751 5.75C20.751 5.84855 20.7311 5.94607 20.6934 6.03711C20.6556 6.12816 20.6 6.21062 20.5303 6.28027L6.28027 20.5303C6.13955 20.671 5.94901 20.75 5.75 20.75C5.551 20.75 5.36045 20.671 5.21973 20.5303C5.07901 20.3895 5.00001 20.199 5 20C5 19.801 5.07902 19.6105 5.21973 19.4697L19.4697 5.21973C19.5394 5.14999 19.6218 5.09438 19.7129 5.05664C19.8039 5.01891 19.9015 4.99903 20 4.99902Z",
+        fill: "currentColor"
+    }));
+};

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

@@ -0,0 +1,71 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import React from "react";
+import { ResizeDiagonal } from "../Icon.assets/ResizeDiagonal";
+import { IconRoot } from "../IconRoot";
+export var IconResizeDiagonal = function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? 's' : _param_size, color = _param.color, className = _param.className, rest = _object_without_properties(_param, [
+        "size",
+        "color",
+        "className"
+    ]);
+    return /*#__PURE__*/ React.createElement(IconRoot, _object_spread({
+        className: className,
+        size: size,
+        color: color,
+        icon: ResizeDiagonal
+    }, rest));
+};

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

@@ -48,3 +48,4 @@ export { IconEditOutline } from "./Icons/IconEditOutline";
 export { IconResetOutline } from "./Icons/IconResetOutline";
 export { IconDoneCircleOutline } from "./Icons/IconDoneCircleOutline";
 export { IconTrash } from "./Icons/IconTrash";
+export { IconResizeDiagonal } from "./Icons/IconResizeDiagonal";

package/styled-components/es/examples/components/Button/Button.config.js

@@ -128,22 +128,6 @@ export var config = {
                 ":0 -0.125rem 0 0.625rem;",
                 ":0 0 0 0.25rem;"
             ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-            xlr: css([
-                "",
-                ":4rem;",
-                ":12.5rem;",
-                ":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);",
-                ":1.5rem;",
-                ":inherit;",
-                ":0 0.625rem 0 0;",
-                ":0 0 0 0.625rem;",
-                ":0 0 0 0.25rem;"
-            ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
             l: css([
                 "",
                 ":3.5rem;",
@@ -162,22 +146,6 @@ export var config = {
                 ":0 -0.125rem 0 0.5rem;",
                 ":0 0 0 0.25rem;"
             ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-            lr: css([
-                "",
-                ":3.5rem;",
-                ":12.5rem;",
-                ":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);",
-                ":1.375rem;",
-                ":inherit;",
-                ":0 0.5rem 0 0;",
-                ":0 0 0 0.5rem;",
-                ":0 0 0 0.25rem;"
-            ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
             m: css([
                 "",
                 ":3rem;",
@@ -196,22 +164,6 @@ export var config = {
                 ":0 -0.125rem 0 0.375rem;",
                 ":0 0 0 0.25rem;"
             ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-            mr: css([
-                "",
-                ":3rem;",
-                ":11.25rem;",
-                ":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);",
-                ":1.375rem;",
-                ":inherit;",
-                ":0 0.375rem 0 0;",
-                ":0 0 0 0.375rem;",
-                ":0 0 0 0.25rem;"
-            ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
             s: css([
                 "",
                 ":2.5rem;",
@@ -230,22 +182,6 @@ export var config = {
                 ":0 -0.125rem 0 0.25rem;",
                 ":0 0 0 0.25rem;"
             ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-            sr: css([
-                "",
-                ":2.5rem;",
-                ":11.25rem;",
-                ":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);",
-                ":1.375rem;",
-                ":inherit;",
-                ":0 0.25rem 0 0;",
-                ":0 0 0 0.25rem;",
-                ":0 0 0 0.25rem;"
-            ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
             xs: css([
                 "",
                 ":2rem;",
@@ -264,22 +200,6 @@ export var config = {
                 ":0 -0.125rem 0 0.25rem;",
                 ":0 0 0 0.25rem;"
             ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-            xsr: css([
-                "",
-                ":2rem;",
-                ":10rem;",
-                ":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);",
-                ":1rem;",
-                ":inherit;",
-                ":0 0.25rem 0 0;",
-                ":0 0 0 0.25rem;",
-                ":0 0 0 0.25rem;"
-            ], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
             xxs: css([
                 "",
                 ":1.5rem;",