@salutejs/plasma-new-hope 0.343.0-canary.2376.19955117110.0 → 0.343.0-canary.2378.20006319987.0

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

@@ -10,23 +10,22 @@ var mergedButtonGroupConfig = mergeConfig(buttonGroupConfig);
 var ButtonGroup = component(mergedButtonGroupConfig);
 export var PaginationRoot = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationRoot",
-    componentId: "sc-210e0d2-0"
+    componentId: "sc-1be87a14-0"
 })([
     "display:flex;color:var(",
     ");&.",
-    "{flex-direction:column;gap:var(",
-    ");justify-content:flex-start;}&.",
+    "{flex-direction:column;gap:0.5rem;justify-content:flex-start;}&.",
     "{width:100%;justify-content:space-between;flex:0 0 100%;gap:1rem;flex-wrap:nowrap;}"
-], tokens.paginationColor, classes.compactType, tokens.paginationCompactTypeGap, classes.defaultType);
+], tokens.paginationColor, classes.compactType, classes.defaultType);
 export var PaginationPages = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationPages",
-    componentId: "sc-210e0d2-1"
+    componentId: "sc-1be87a14-1"
 })([
     "display:flex;align-items:center;gap:0.25rem;flex-shrink:0;"
 ]);
 export var PaginationActions = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationActions",
-    componentId: "sc-210e0d2-2"
+    componentId: "sc-1be87a14-2"
 })([
     "display:flex;justify-content:space-between;flex-grow:1;align-items:center;gap:var(",
     ");flex-shrink:1;flex-direction:row;&.",
@@ -36,13 +35,13 @@ export var PaginationActions = styled.div.withConfig({
 ], tokens.paginationHelperTextGap, classes.compactType, classes.withHasPerPageSelect, classes.withHasQuickJump);
 export var PaginationSection = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationSection",
-    componentId: "sc-210e0d2-3"
+    componentId: "sc-1be87a14-3"
 })([
     "display:flex;gap:0.125rem;"
 ]);
 export var PaginationButtonGroup = styled(ButtonGroup).withConfig({
     displayName: "Pagination.styles__PaginationButtonGroup",
-    componentId: "sc-210e0d2-4"
+    componentId: "sc-1be87a14-4"
 })([
     "",
     ":var(",
@@ -84,7 +83,7 @@ export var PaginationButtonGroup = styled(ButtonGroup).withConfig({
 ], buttonGroupTokens.buttonColor, tokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, tokens.buttonHoverColor, buttonGroupTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, tokens.buttonActiveColor, buttonGroupTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonGroupTokens.buttonFontFamily, tokens.paginationFontFamily, buttonGroupTokens.buttonFontSize, tokens.paginationFontSize, buttonGroupTokens.buttonFontStyle, tokens.paginationFontStyle, buttonGroupTokens.buttonFontWeight, tokens.paginationFontWeight, buttonGroupTokens.buttonLetterSpacing, tokens.paginationLetterSpacing, buttonGroupTokens.buttonLineHeight, tokens.paginationLineHeight, buttonGroupTokens.buttonWidth, tokens.buttonWidth, buttonGroupTokens.buttonHeight, tokens.buttonHeight, buttonGroupTokens.buttonDefaultRadius, tokens.buttonRadius, buttonGroupTokens.buttonSideRadius, tokens.buttonRadius, buttonGroupTokens.buttonSegmentedRadius, tokens.buttonRadius, buttonGroupTokens.buttonRadiusCircle, tokens.buttonRadius);
 export var PaginationButton = styled(Button).withConfig({
     displayName: "Pagination.styles__PaginationButton",
-    componentId: "sc-210e0d2-5"
+    componentId: "sc-1be87a14-5"
 })([
     "",
     ":var(",
@@ -150,7 +149,7 @@ export var PaginationButton = styled(Button).withConfig({
 }));
 export var PaginationShorter = styled(PaginationButton).withConfig({
     displayName: "Pagination.styles__PaginationShorter",
-    componentId: "sc-210e0d2-6"
+    componentId: "sc-1be87a14-6"
 })([
     "",
     ":var(",
@@ -159,7 +158,7 @@ export var PaginationShorter = styled(PaginationButton).withConfig({
 ], buttonTokens.buttonWidth, tokens.buttonWidthShorter, buttonTokens.buttonPadding);
 export var PaginationActionsLeft = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationActionsLeft",
-    componentId: "sc-210e0d2-7"
+    componentId: "sc-1be87a14-7"
 })([
     "display:flex;align-items:center;flex-wrap:wrap;gap:var(",
     ");.",
@@ -167,7 +166,7 @@ export var PaginationActionsLeft = styled.div.withConfig({
 ], tokens.paginationHelperTextGap, classes.defaultType);
 export var PaginationHelperText = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationHelperText",
-    componentId: "sc-210e0d2-8"
+    componentId: "sc-1be87a14-8"
 })([
     "color:var(",
     ");&.",

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

@@ -41,7 +41,6 @@ export var tokens = {
     paginationCurrentButtonActiveColor: '--plasma-pagination--button-current-color-active',
     paginationDisabledButtonColor: '--plasma-pagination--button-color-disabled',
     paginationDisabledButtonBackgroundColor: '--plasma-pagination--button-bg-color-disabled',
-    paginationCompactTypeGap: '--plasma-pagination-compact-type-gap',
     buttonDisabledOpacity: '--plasma-pagination-button-disabled-opacity',
     buttonHeight: '--plasma-pagination-button-height',
     buttonWidthShorter: '--plasma-pagination-button-width-shorter',

package/styled-components/es/components/_experimental/Popover/Popover.js

@@ -0,0 +1,228 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+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;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import React, { forwardRef, useState, useRef } from "react";
+import { useFloating, useInteractions, useClick, useDismiss, useRole, FloatingFocusManager, FloatingArrow, arrow, offset, useHover, safePolygon, shift, flip, FloatingPortal, autoUpdate } from "@floating-ui/react";
+import { mergeRefs } from "../../../utils";
+import { css } from "styled-components";
+import { tokens } from "./Popover.tokens";
+import { base, Target } from "./Popover.styles";
+export var viewCSS = css([
+    ""
+]);
+export var sizeCSS = css([
+    ""
+]);
+var ARROW_WIDTH = 20;
+var ARROW_HEIGHT = 8;
+var ARROW_POLYGON = 'M20 20L0 20C8.88889 20.0001 10 12.5714 10 12C10 12.5714 11.3273 20.006 20 20Z';
+export var popoverRoot = function(Root) {
+    return /*#__PURE__*/ forwardRef(function(_param, outerRootRef) {
+        var children = _param.children, target = _param.target, outerOpened = _param.opened, _param_defaultOpened = _param.defaultOpened, defaultOpened = _param_defaultOpened === void 0 ? false : _param_defaultOpened, _param_trigger = _param.trigger, trigger = _param_trigger === void 0 ? 'click' : _param_trigger, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement, tmp = _param.arrow, outerArrow = tmp === void 0 ? true : tmp, tmp1 = _param.flip, outsideFlip = tmp1 === void 0 ? true : tmp1, tmp2 = _param.shift, outsideShift = tmp2 === void 0 ? true : tmp2, tmp3 = _param.offset, outerOffset = tmp3 === void 0 ? 0 : tmp3, _param_outsideClick = _param.outsideClick, outsideClick = _param_outsideClick === void 0 ? true : _param_outsideClick, resizable = _param.resizable, onResizeStart = _param.onResizeStart, onResizeEnd = _param.onResizeEnd, onToggle = _param.onToggle, _param_delayOpen = _param.delayOpen, delayOpen = _param_delayOpen === void 0 ? 0 : _param_delayOpen, _param_delayClose = _param.delayClose, delayClose = _param_delayClose === void 0 ? 0 : _param_delayClose, _param_zIndex = _param.zIndex, zIndex = _param_zIndex === void 0 ? 1000 : _param_zIndex, className = _param.className, style = _param.style, rest = _object_without_properties(_param, [
+            "children",
+            "target",
+            "opened",
+            "defaultOpened",
+            "trigger",
+            "placement",
+            "arrow",
+            "flip",
+            "shift",
+            "offset",
+            "outsideClick",
+            "resizable",
+            "onResizeStart",
+            "onResizeEnd",
+            "onToggle",
+            "delayOpen",
+            "delayClose",
+            "zIndex",
+            "className",
+            "style"
+        ]);
+        var _useState = _sliced_to_array(useState(defaultOpened), 2), innerOpened = _useState[0], setInnerOpened = _useState[1];
+        var opened = outerOpened !== null && outerOpened !== void 0 ? outerOpened : innerOpened;
+        var arrowRef = useRef(null);
+        var handleToggle = function(opened) {
+            setInnerOpened(opened);
+            if (onToggle) {
+                onToggle(opened);
+            }
+        };
+        var _useFloating = useFloating({
+            whileElementsMounted: autoUpdate,
+            placement: placement,
+            open: opened,
+            onOpenChange: handleToggle,
+            middleware: [
+                outsideShift && shift(),
+                outsideFlip && flip(),
+                outerArrow && arrow({
+                    element: arrowRef
+                }),
+                offset((outerArrow ? ARROW_HEIGHT : 0) + outerOffset)
+            ]
+        }), refs = _useFloating.refs, floatingStyles = _useFloating.floatingStyles, context = _useFloating.context;
+        var click = useClick(context, {
+            enabled: trigger === 'click'
+        });
+        var dismiss = useDismiss(context, {
+            enabled: true,
+            outsidePress: outsideClick
+        });
+        var role = useRole(context);
+        var hover = useHover(context, {
+            enabled: trigger === 'hover',
+            handleClose: safePolygon({
+                requireIntent: false
+            }),
+            delay: {
+                open: delayOpen,
+                close: delayClose
+            }
+        });
+        var _useInteractions = useInteractions([
+            dismiss,
+            role,
+            click,
+            hover
+        ]), getReferenceProps = _useInteractions.getReferenceProps, getFloatingProps = _useInteractions.getFloatingProps;
+        var commonRef = mergeRefs(outerRootRef, refs.setFloating);
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Target, _object_spread({
+            ref: refs.setReference
+        }, getReferenceProps()), target), opened && /*#__PURE__*/ React.createElement(FloatingPortal, null, /*#__PURE__*/ React.createElement(FloatingFocusManager, {
+            context: context,
+            modal: false
+        }, /*#__PURE__*/ React.createElement(Root, _object_spread({
+            ref: commonRef,
+            target: target,
+            className: className,
+            style: _object_spread({
+                zIndex: zIndex
+            }, style, floatingStyles)
+        }, getFloatingProps(), rest), outerArrow && /*#__PURE__*/ React.createElement(FloatingArrow, {
+            ref: arrowRef,
+            context: context,
+            width: ARROW_WIDTH,
+            height: ARROW_HEIGHT,
+            fill: "var(".concat(tokens.backgroundColor, ")"),
+            d: ARROW_POLYGON
+        }), children))));
+    });
+};
+export var popoverConfig = {
+    name: 'Popover',
+    tag: 'div',
+    layout: popoverRoot,
+    base: base,
+    variations: {
+        view: {
+            css: viewCSS
+        },
+        size: {
+            css: sizeCSS
+        }
+    },
+    defaults: {
+        view: 'default',
+        size: 'm'
+    }
+};

package/styled-components/es/components/_experimental/Popover/Popover.styles.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { css } from "styled-components";
+import { tokens } from "./Popover.tokens";
+export var base = css([
+    "background:var(",
+    ");padding:var(",
+    ");border-radius:var(",
+    ");box-shadow:var(",
+    ");"
+], tokens.backgroundColor, tokens.padding, tokens.borderRadius, tokens.boxShadow);
+export var Target = styled.div.withConfig({
+    displayName: "Popover.styles__Target",
+    componentId: "sc-a51b8356-0"
+})([
+    "display:inline-block;max-width:100%;"
+]);

package/styled-components/es/components/_experimental/Popover/Popover.tokens.js

@@ -0,0 +1,7 @@
+export var classes = {};
+export var tokens = {
+    backgroundColor: '--plasma-popover-background-color',
+    borderRadius: '--plasma-popover-border-radius',
+    padding: '--plasma-popover-padding',
+    boxShadow: '--plasma-popover-box-shadow'
+};

package/styled-components/es/components/_experimental/Popover/Popover.types.js

@@ -0,0 +1 @@
+export { };

package/styled-components/es/components/_experimental/Popover/index.js

@@ -0,0 +1,2 @@
+export { popoverRoot, popoverConfig } from "./Popover";
+export { classes as popoverClasses, tokens as popoverTokens } from "./Popover.tokens";

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

@@ -0,0 +1 @@
+export * from "./Popover";

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

@@ -1,7 +0,0 @@
-import { component, mergeConfig } from "../../../engines";
-import { comboboxNewConfig } from "../../..";
-import { config } from "./Combobox.config";
-var mergedConfig = mergeConfig(comboboxNewConfig, config);
-var ComboboxComponent = component(mergedConfig);
-var Combobox = ComboboxComponent;
-export { Combobox };

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

@@ -104,7 +104,6 @@ export var config = {
         size: {
             l: css([
                 "",
-                ":0.5rem;",
                 ":var(--plasma-typo-body-l-font-family);",
                 ":var(--plasma-typo-body-l-font-size);",
                 ":var(--plasma-typo-body-l-font-style);",
@@ -138,10 +137,9 @@ export var config = {
                 ":0 0.625rem;",
                 ":0.0625rem;",
                 ":0.5rem 2.5rem;"
-            ], paginationTokens.paginationCompactTypeGap, 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, paginationTokens.paginationHelperTextGap),
+            ], 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, paginationTokens.paginationHelperTextGap),
             m: css([
                 "",
-                ":0.5rem;",
                 ":var(--plasma-typo-body-m-font-family);",
                 ":var(--plasma-typo-body-m-font-size);",
                 ":var(--plasma-typo-body-m-font-style);",
@@ -175,10 +173,9 @@ export var config = {
                 ":0 0.625rem;",
                 ":0.0625rem;",
                 ":0.5rem 2.5rem;"
-            ], paginationTokens.paginationCompactTypeGap, 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, paginationTokens.paginationHelperTextGap),
+            ], 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, paginationTokens.paginationHelperTextGap),
             s: css([
                 "",
-                ":0.5rem;",
                 ":var(--plasma-typo-body-s-font-family);",
                 ":var(--plasma-typo-body-s-font-size);",
                 ":var(--plasma-typo-body-s-font-style);",
@@ -212,10 +209,9 @@ export var config = {
                 ":0 0.625rem;",
                 ":0.0625rem;",
                 ":0.5rem 2.5rem;"
-            ], paginationTokens.paginationCompactTypeGap, 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, paginationTokens.paginationHelperTextGap),
+            ], 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, paginationTokens.paginationHelperTextGap),
             xs: css([
                 "",
-                ":0.5rem;",
                 ":var(--plasma-typo-body-xs-font-family);",
                 ":var(--plasma-typo-body-xs-font-size);",
                 ":var(--plasma-typo-body-xs-font-style);",
@@ -249,7 +245,7 @@ export var config = {
                 ":0 0.625rem;",
                 ":0.0625rem;",
                 ":0.5rem 2.5rem;"
-            ], paginationTokens.paginationCompactTypeGap, 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, paginationTokens.paginationHelperTextGap)
+            ], 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, paginationTokens.paginationHelperTextGap)
         },
         type: {
             compact: css([

package/styled-components/es/examples/components/_experimental/Popover/Popover.config.js

@@ -0,0 +1,38 @@
+import { css } from "styled-components";
+import { popoverTokens } from "../../../../components/_experimental/Popover";
+export var config = {
+    defaults: {
+        view: 'default'
+    },
+    variations: {
+        view: {
+            default: css([
+                "",
+                ":var(--surface-solid-card);",
+                ":var(--shadow-down-soft-m);"
+            ], popoverTokens.backgroundColor, popoverTokens.boxShadow),
+            accent: css([
+                "",
+                ":var(--surface-accent);",
+                ":var(--shadow-down-soft-m);"
+            ], popoverTokens.backgroundColor, popoverTokens.boxShadow)
+        },
+        size: {
+            l: css([
+                "",
+                ":1rem;",
+                ":0.75rem;"
+            ], popoverTokens.borderRadius, popoverTokens.padding),
+            m: css([
+                "",
+                ":0.875rem;",
+                ":0.625rem;"
+            ], popoverTokens.borderRadius, popoverTokens.padding),
+            s: css([
+                "",
+                ":0.75rem;",
+                ":0.5rem;"
+            ], popoverTokens.borderRadius, popoverTokens.padding)
+        }
+    }
+};

package/styled-components/es/examples/components/_experimental/Popover/Popover.js

@@ -0,0 +1,5 @@
+import { popoverConfig } from "../../../../components/_experimental/Popover";
+import { component, mergeConfig } from "../../../../engines";
+import { config } from "./Popover.config";
+var mergedConfig = mergeConfig(popoverConfig, config);
+export var Popover = component(mergedConfig);

package/types/components/Pagination/Pagination.tokens.d.ts

@@ -41,7 +41,6 @@ export declare const tokens: {
     paginationCurrentButtonActiveColor: string;
     paginationDisabledButtonColor: string;
     paginationDisabledButtonBackgroundColor: string;
-    paginationCompactTypeGap: string;
     buttonDisabledOpacity: string;
     buttonHeight: string;
     buttonWidthShorter: string;

package/types/components/Pagination/Pagination.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAqBnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwElB,CAAC"}
+{"version":3,"file":"Pagination.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAqBnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuElB,CAAC"}

package/types/components/_experimental/Popover/Popover.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { RootProps } from '../../../engines/types';
+import type { PopoverProps } from './Popover.types';
+export declare const viewCSS: import("@linaria/core").LinariaClassName;
+export declare const sizeCSS: import("@linaria/core").LinariaClassName;
+export declare const popoverRoot: (Root: RootProps<HTMLDivElement, PopoverProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & import("./Popover.types").BasicPopoverProps & React.RefAttributes<HTMLDivElement>>;
+export declare const popoverConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, PopoverProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & import("./Popover.types").BasicPopoverProps & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+    };
+};
+//# sourceMappingURL=Popover.d.ts.map

package/types/components/_experimental/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/_experimental/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAuBnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,OAAO,0CAAQ,CAAC;AAC7B,eAAO,MAAM,OAAO,0CAAQ,CAAC;AAM7B,eAAO,MAAM,WAAW,SAAU,SAAS,CAAC,cAAc,EAAE,YAAY,CAAC,8JAkHpE,CAAC;AAEN,eAAO,MAAM,aAAa;;;mBApHQ,SAAS,CAAC,cAAc,EAAE,YAAY,CAAC;;;;;;;;;;;;;;CAqIxE,CAAC"}

package/types/components/_experimental/Popover/Popover.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const Target: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+//# sourceMappingURL=Popover.styles.d.ts.map

package/types/components/_experimental/Popover/Popover.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/_experimental/Popover/Popover.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAKhB,CAAC;AAEF,eAAO,MAAM,MAAM,qKAGlB,CAAC"}

package/types/components/_experimental/Popover/Popover.tokens.d.ts

@@ -0,0 +1,8 @@
+export declare const classes: {};
+export declare const tokens: {
+    backgroundColor: string;
+    borderRadius: string;
+    padding: string;
+    boxShadow: string;
+};
+//# sourceMappingURL=Popover.tokens.d.ts.map

package/types/components/_experimental/Popover/Popover.tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.tokens.d.ts","sourceRoot":"","sources":["../../../../src/components/_experimental/Popover/Popover.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC"}

package/types/components/_experimental/Popover/Popover.types.d.ts

@@ -0,0 +1,99 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { ResizableProps } from '../../_Resizable';
+type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export type BasicPopoverProps = {
+    /**
+     * Контент всплывающего окна.
+     */
+    children: ReactNode;
+    /**
+     * Целевой элемент взаимодействия с всплывающим окном.
+     */
+    target: ReactNode;
+    /**
+     * Управление скрытием/раскрытием всплывающего окна.
+     */
+    opened?: boolean;
+    /**
+     * Раскрыто ли всплывающее окно по умолчанию.
+     * @default false
+     */
+    defaultOpened?: boolean;
+    /**
+     * Способ скрытия/раскрытия всплывающего окна.
+     * @default click
+     */
+    trigger?: 'click' | 'hover';
+    /**
+     * Сторона раскрытия окна относительно target-элемента.
+     * @default bottom
+     */
+    placement?: Placement;
+    /**
+     * Включение хвостика у всплывающего окна.
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * Коррекция placement, если всплывающее окно находится за пределами экрана.
+     * @default true
+     */
+    flip?: boolean;
+    /**
+     * Смещение всплывающего окна при соприкосновении с границами экрана.
+     * @default true
+     */
+    shift?: boolean;
+    /**
+     * Отступ всплывающего окна относительно target.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * Задержка перед раскрытием, мс. (При trigger === 'hover')
+     * @default 0
+     */
+    delayOpen?: number;
+    /**
+     * Задержка перед скрытием, мс. (При trigger === 'hover')
+     * @default true
+     */
+    delayClose?: number;
+    /**
+     * Закрывать окно при нажатии вне области окна. (При trigger === 'click')
+     * @default true
+     */
+    outsideClick?: boolean;
+    /**
+     * Настройка resizable-режима.
+     */
+    resizable?: ResizableProps['resizable'];
+    /**
+     * Обработчик начала ресайза.
+     */
+    onResizeStart?: ResizableProps['onResizeStart'];
+    /**
+     * Обработчик остановки ресайза.
+     */
+    onResizeEnd?: ResizableProps['onResizeEnd'];
+    /**
+     * Событие сворачивания/разворачивания всплывающего окна.
+     */
+    onToggle?: (isOpen: boolean) => void;
+    /**
+     * CSS-свойство z-index всплывающего окна.
+     * @default 1000
+     */
+    zIndex?: number;
+    /**
+     * Вид компонента.
+     */
+    view?: string;
+    /**
+     * Размер компонента.
+     */
+    size?: string;
+};
+export type PopoverProps = HTMLAttributes<HTMLDivElement> & BasicPopoverProps;
+export {};
+//# sourceMappingURL=Popover.types.d.ts.map

package/types/components/_experimental/Popover/Popover.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.types.d.ts","sourceRoot":"","sources":["../../../../src/components/_experimental/Popover/Popover.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,KAAK,SAAS,GACR,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,MAAM,iBAAiB,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAChD;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,iBAAiB,CAAC"}