@salutejs/plasma-new-hope 0.256.0-canary.1739.13123692822.0 → 0.256.0-canary.1744.13111488863.0

package/styled-components/cjs/components/Popover/Popover.js

@@ -13,7 +13,7 @@ var _Portal = /*#__PURE__*/require("../Portal");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _Popover = /*#__PURE__*/require("./Popover.styles");
 var _Popover2 = /*#__PURE__*/require("./Popover.tokens");
-var _excluded = ["target", "children", "animated", "isOpen", "opened", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle", "closeOnOverlayClick"];
+var _excluded = ["target", "children", "isOpen", "opened", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle", "closeOnOverlayClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -43,7 +43,6 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
     var _placement$;
     var target = _ref.target,
       children = _ref.children,
-      animated = _ref.animated,
       isOpen = _ref.isOpen,
       opened = _ref.opened,
       _ref$trigger = _ref.trigger,
@@ -83,15 +82,13 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
     var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
       forceRender = _useState4[1];
-    var _useState5 = (0, _react.useState)(innerIsOpen),
-      _useState6 = _slicedToArray(_useState5, 2),
-      shouldRender = _useState6[0],
-      setShouldRender = _useState6[1];
     var portalContainer = _typeof(target) === 'object' && target !== null && 'current' in target && target.current || undefined;
     var isAutoArray = Array.isArray(placement);
     var isAuto = isAutoArray || placement.startsWith('auto');
-    var openClass = innerIsOpen && shouldRender ? _Popover2.classes.open : undefined;
-    var animatedClass = animated ? _Popover2.classes.animate : undefined;
+    var initialStyles = {
+      visibility: innerIsOpen ? 'visible' : 'hidden',
+      opacity: innerIsOpen ? 1 : 0
+    };
     var _usePopper = (0, _reactPopper.usePopper)(rootRef.current, popoverRef.current, {
         // TODO: #1121
         // eslint-disable-next-line no-nested-ternary
@@ -219,16 +216,6 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
        */
       Promise.resolve().then(forceUpdate);
     }, [innerIsOpen, children, forceUpdate]);
-    var handleTransitionEnd = function handleTransitionEnd() {
-      if (!innerIsOpen) {
-        setShouldRender(false);
-      }
-    };
-    (0, _react.useEffect)(function () {
-      if (innerIsOpen) {
-        setShouldRender(true);
-      }
-    }, [innerIsOpen]);
     return /*#__PURE__*/_react["default"].createElement(_Portal.Portal, {
       container: portalContainer,
       disabled: /*#__PURE__*/(0, _react.isValidElement)(target)
@@ -248,12 +235,11 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       view: view,
       className: className
     }, rest), /*#__PURE__*/_react["default"].createElement(_Popover.StyledPopover, _extends({}, attributes.popper, {
-      onTransitionEnd: handleTransitionEnd,
-      className: (0, _utils.cx)(_Popover2.classes.root, openClass, animatedClass),
+      className: _Popover2.classes.root,
       ref: popoverForkRef,
-      style: _objectSpread(_objectSpread({}, styles.popper), {}, {
-        display: shouldRender || innerIsOpen ? 'block' : 'none'
-      }),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), {
+        display: innerIsOpen ? 'block' : 'none'
+      }), initialStyles),
       zIndex: zIndex
     }), hasArrow && /*#__PURE__*/_react["default"].createElement(_Popover.StyledArrow, _extends({
       className: _Popover2.classes.arrow,

package/styled-components/cjs/components/Popover/Popover.styles.js

@@ -19,7 +19,7 @@ var StyledArrow = exports.StyledArrow = /*#__PURE__*/_styledComponents["default"
 })(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"], /*#__PURE__*/String(_Popover.tokens.arrowMaskWidth), /*#__PURE__*/String(_Popover.tokens.arrowMaskHeight), /*#__PURE__*/String(_Popover.tokens.arrowMaskWidth), /*#__PURE__*/String(_Popover.tokens.arrowMaskHeight), /*#__PURE__*/String(_Popover.tokens.arrowMaskImage), /*#__PURE__*/String(_Popover.tokens.arrowBackground));
 var StyledPopover = exports.StyledPopover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-tnpyex-3"
-})(["position:absolute;z-index:", ";opacity:0;visibility:hidden;&.", "{transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}&.", "{opacity:1;visibility:visible;}&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
+})(["position:absolute;z-index:", ";&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
   var zIndex = _ref.zIndex;
   return zIndex || _utils.DEFAULT_Z_INDEX;
-}, _Popover.classes.animate, _Popover.classes.open, _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight));
+}, _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), _Popover.classes.arrow, _Popover.classes.arrow, /*#__PURE__*/String(_Popover.tokens.arrowEdgeMargin), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight), /*#__PURE__*/String(_Popover.tokens.arrowHeight));

package/styled-components/cjs/components/Popover/Popover.tokens.js

@@ -9,9 +9,7 @@ var classes = exports.classes = {
   root: 'popover-root',
   target: 'popover-target',
   arrow: 'popover-arrow',
-  targetAsRef: 'popover-target-as-ref',
-  open: 'popover-open',
-  animate: 'popover-animate'
+  targetAsRef: 'popover-target-as-ref'
 };
 var tokens = exports.tokens = {
   arrowMaskWidth: '--plasma-popover-arrow-mask-width',

package/styled-components/cjs/components/Tooltip/Tooltip.js

@@ -34,7 +34,7 @@ var getStringValue = function getStringValue(value) {
 var Popover = /*#__PURE__*/(0, _engines.component)(_Popover.popoverConfig);
 var StyledPopover = /*#__PURE__*/(0, _styledComponents["default"])(Popover).withConfig({
   componentId: "plasma-new-hope__sc-dj06kz-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Popover.popoverTokens.arrowMaskWidth, _Tooltip2.tokens.arrowMaskWidth, _Popover.popoverTokens.arrowMaskHeight, _Tooltip2.tokens.arrowMaskHeight, _Popover.popoverTokens.arrowMaskImage, _Tooltip2.tokens.arrowMaskImage, _Popover.popoverTokens.arrowBackground, _Tooltip2.tokens.arrowBackground, _Popover.popoverTokens.arrowHeight, _Tooltip2.tokens.arrowHeight, _Popover.popoverTokens.arrowEdgeMargin, _Tooltip2.tokens.arrowEdgeMargin);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", " .", "{transition:opacity 200ms ease-in-out,visibility 200ms ease-in-out;}"], _Popover.popoverTokens.arrowMaskWidth, _Tooltip2.tokens.arrowMaskWidth, _Popover.popoverTokens.arrowMaskHeight, _Tooltip2.tokens.arrowMaskHeight, _Popover.popoverTokens.arrowMaskImage, _Tooltip2.tokens.arrowMaskImage, _Popover.popoverTokens.arrowBackground, _Tooltip2.tokens.arrowBackground, _Popover.popoverTokens.arrowHeight, _Tooltip2.tokens.arrowHeight, _Popover.popoverTokens.arrowEdgeMargin, _Tooltip2.tokens.arrowEdgeMargin, _Tooltip2.classes.animated, _Popover.popoverClasses.root);
 
 /**
  * Компонент для текстовых подсказок. Основное предназначение — подписи к блокам.
@@ -91,6 +91,7 @@ var tooltipRoot = exports.tooltipRoot = function tooltipRoot(Root) {
     var innerIsOpen = Boolean(isVisible || isOpen || opened);
     var innerHasArrow = arrow || hasArrow;
     var showTooltip = innerIsOpen && Boolean(text);
+    var animatedClass = animated ? _Tooltip2.classes.animated : undefined;
     (0, _react.useEffect)(function () {
       var onKeyDown = function onKeyDown(event) {
         if (event.keyCode === ESCAPE_KEYCODE) {
@@ -141,8 +142,7 @@ var tooltipRoot = exports.tooltipRoot = function tooltipRoot(Root) {
       "aria-hidden": !innerIsOpen,
       "aria-live": "polite",
       role: "tooltip",
-      animated: animated,
-      className: (0, _utils.cx)(ref === null || ref === void 0 ? void 0 : ref.classList.toString())
+      className: (0, _utils.cx)(ref === null || ref === void 0 ? void 0 : ref.classList.toString(), animatedClass)
     }, (trigger === 'hover' || trigger === 'click') && {
       trigger: trigger,
       onToggle: onToggle

package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx

@@ -67,7 +67,6 @@ const meta: Meta<typeof Popover> = {
         skidding: 0,
         distance: 6,
         hasArrow: true,
-        animated: true,
     },
 };
 

package/styled-components/cjs/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx

@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
 
     return (
         <>
-            {Object.entries(groupedTokens).map(([category, value]) => (
+            {Object.entries(groupedTokens).map(([category, subcategoties]) => (
                 <CategoryContainer key={category}>
                     <Category>{category}</Category>
                     <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
-                        {Object.entries(value).map(([subcategory, value2], index) => (
+                        {Object.entries(subcategoties).map(([subcategory, subcategoryTokens], index) => (
                             <StyledAccordionItem
                                 key={subcategory}
                                 eventKey={index}
@@ -85,31 +85,37 @@ const StoryDemo = ({ context }) => {
                                             <ColorCircle disableShadow />
                                             Color
                                         </ColumnTitle>
+                                        <ColumnTitle>Tone</ColumnTitle>
                                         <ColumnTitle>Opacity</ColumnTitle>
                                     </AccordionInfo>
                                 }
                             >
                                 <TokenInfoWrapper>
-                                    {Object.entries(value2).map(([token, { value: value3, opacity }]) => (
-                                        <AccordionInfo key={token}>
-                                            <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
-                                                {token}
-                                            </TokenInfo>
-                                            <TokenInfo
-                                                className="color copy"
-                                                onClick={() => copyToClipboard(value3, opacity?.alpha)}
-                                            >
-                                                <ColorCircle background={value3} />
-                                                <div>
-                                                    {value3.includes('gradient') ? 'Градиент' : value3}
-                                                    {opacity && <OpacityPart>{opacity.alpha}</OpacityPart>}
-                                                </div>
-                                            </TokenInfo>
-                                            {opacity && (
-                                                <TokenInfo className="opacity">{opacity.parsedAlpha}</TokenInfo>
-                                            )}
-                                        </AccordionInfo>
-                                    ))}
+                                    {Object.entries(subcategoryTokens).map(
+                                        ([token, { value, opacity, tone, colorName }]) => (
+                                            <AccordionInfo key={token}>
+                                                <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
+                                                    {token}
+                                                </TokenInfo>
+                                                <TokenInfo
+                                                    className="color copy"
+                                                    onClick={() => copyToClipboard(value, opacity?.alpha)}
+                                                >
+                                                    <ColorCircle background={value} />
+                                                    <div>
+                                                        {value.includes('gradient') ? 'Градиент' : colorName || value}
+                                                        {!colorName && opacity && (
+                                                            <OpacityPart>{opacity.alpha}</OpacityPart>
+                                                        )}
+                                                    </div>
+                                                </TokenInfo>
+                                                <TokenInfo className="no-interaction">
+                                                    {tone !== 'none' && tone}
+                                                </TokenInfo>
+                                                <TokenInfo className="no-interaction">{opacity?.parsedAlpha}</TokenInfo>
+                                            </AccordionInfo>
+                                        ),
+                                    )}
                                 </TokenInfoWrapper>
                             </StyledAccordionItem>
                         ))}

package/styled-components/cjs/examples/plasma_b2c/components/Tokens/Tokens.styles.js

@@ -16,7 +16,7 @@ var Category = exports.Category = /*#__PURE__*/_styledComponents["default"].h2.w
 })(["margin:0 0 1.125rem 1.5rem;", ";"], _mixins.h2);
 var AccordionInfo = exports.AccordionInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-2"
-})(["display:grid;grid-template-columns:18rem 7.938rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
+})(["display:grid;grid-template-columns:18rem 7.938rem 2.375rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
 var Subcategory = exports.Subcategory = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-3"
 })(["color:var(--text-secondary);"]);
@@ -34,7 +34,7 @@ var OpacityPart = exports.OpacityPart = /*#__PURE__*/_styledComponents["default"
 })(["color:var(--text-secondary);padding-left:0.125rem;"]);
 var TokenInfo = exports.TokenInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-8"
-})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.opacity{text-align:right;}&:not(.opacity):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.opacity):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
+})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.no-interaction{text-align:right;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
 var ColorCircle = exports.ColorCircle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-9"
 })(["width:1.25rem;height:1.25rem;border-radius:50%;background:", ";box-shadow:", ";"], function (props) {

package/styled-components/cjs/examples/plasma_web/components/Popover/Popover.stories.tsx

@@ -66,7 +66,6 @@ const meta: Meta<typeof Popover> = {
         isFocusTrapped: true,
         skidding: 0,
         distance: 6,
-        animated: true,
     },
 };
 

package/styled-components/cjs/examples/plasma_web/components/Tokens/Tokens.stories.tsx

@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
 
     return (
         <>
-            {Object.entries(groupedTokens).map(([category, value]) => (
+            {Object.entries(groupedTokens).map(([category, subcategoties]) => (
                 <CategoryContainer key={category}>
                     <Category>{category}</Category>
                     <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
-                        {Object.entries(value).map(([subcategory, value2], index) => (
+                        {Object.entries(subcategoties).map(([subcategory, subcategoryTokens], index) => (
                             <StyledAccordionItem
                                 key={subcategory}
                                 eventKey={index}
@@ -85,31 +85,37 @@ const StoryDemo = ({ context }) => {
                                             <ColorCircle disableShadow />
                                             Color
                                         </ColumnTitle>
+                                        <ColumnTitle>Tone</ColumnTitle>
                                         <ColumnTitle>Opacity</ColumnTitle>
                                     </AccordionInfo>
                                 }
                             >
                                 <TokenInfoWrapper>
-                                    {Object.entries(value2).map(([token, { value: value3, opacity }]) => (
-                                        <AccordionInfo key={token}>
-                                            <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
-                                                {token}
-                                            </TokenInfo>
-                                            <TokenInfo
-                                                className="color copy"
-                                                onClick={() => copyToClipboard(value3, opacity?.alpha)}
-                                            >
-                                                <ColorCircle background={value3} />
-                                                <div>
-                                                    {value3.includes('gradient') ? 'Градиент' : value3}
-                                                    {opacity && <OpacityPart>{opacity.alpha}</OpacityPart>}
-                                                </div>
-                                            </TokenInfo>
-                                            {opacity && (
-                                                <TokenInfo className="opacity">{opacity.parsedAlpha}</TokenInfo>
-                                            )}
-                                        </AccordionInfo>
-                                    ))}
+                                    {Object.entries(subcategoryTokens).map(
+                                        ([token, { value, opacity, tone, colorName }]) => (
+                                            <AccordionInfo key={token}>
+                                                <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
+                                                    {token}
+                                                </TokenInfo>
+                                                <TokenInfo
+                                                    className="color copy"
+                                                    onClick={() => copyToClipboard(value, opacity?.alpha)}
+                                                >
+                                                    <ColorCircle background={value} />
+                                                    <div>
+                                                        {value.includes('gradient') ? 'Градиент' : colorName || value}
+                                                        {!colorName && opacity && (
+                                                            <OpacityPart>{opacity.alpha}</OpacityPart>
+                                                        )}
+                                                    </div>
+                                                </TokenInfo>
+                                                <TokenInfo className="no-interaction">
+                                                    {tone !== 'none' && tone}
+                                                </TokenInfo>
+                                                <TokenInfo className="no-interaction">{opacity?.parsedAlpha}</TokenInfo>
+                                            </AccordionInfo>
+                                        ),
+                                    )}
                                 </TokenInfoWrapper>
                             </StyledAccordionItem>
                         ))}

package/styled-components/cjs/examples/plasma_web/components/Tokens/Tokens.styles.js

@@ -16,7 +16,7 @@ var Category = exports.Category = /*#__PURE__*/_styledComponents["default"].h2.w
 })(["margin:0 0 1.125rem 1.5rem;", ";"], _mixins.h2);
 var AccordionInfo = exports.AccordionInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-2"
-})(["display:grid;grid-template-columns:18rem 7.938rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
+})(["display:grid;grid-template-columns:18rem 7.938rem 2.375rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
 var Subcategory = exports.Subcategory = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-3"
 })(["color:var(--text-secondary);"]);
@@ -34,7 +34,7 @@ var OpacityPart = exports.OpacityPart = /*#__PURE__*/_styledComponents["default"
 })(["color:var(--text-secondary);padding-left:0.125rem;"]);
 var TokenInfo = exports.TokenInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-8"
-})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.opacity{text-align:right;}&:not(.opacity):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.opacity):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
+})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.no-interaction{text-align:right;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
 var ColorCircle = exports.ColorCircle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-9"
 })(["width:1.25rem;height:1.25rem;border-radius:50%;background:", ";box-shadow:", ";"], function (props) {

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

@@ -24,10 +24,7 @@ export var tokens = {
   accordionItemBorder: '--plasma-accordion-item-border',
   accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
   accordionItemIconColor: '--plasma-accordion-item-color-icon',
-  accordionItemIconSize: '--plasma-accordion-item-icon-size',
-  accordionItemHeaderLeftGap: '--plasma-accordion-item-header-left-gap',
-  accordionItemHeaderLeftGapDefault: '--plasma-accordion-item-header-left-gap-default',
-  accordionItemHeaderLeftGapClear: '--plasma-accordion-item-header-left-gap-clear',
+  accordionItemIconSize: '--plasma-accordion-item-icon-szie',
   accordionItemTitleColor: '--plasma-accordion-item-title-color',
   accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
   accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js

@@ -68,7 +68,7 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
       sizeCustomProperty: tokens.accordionItemIconSize
     }), /*#__PURE__*/React.createElement(StyledMinus, {
       size: "xs",
-      color: "inherit",
+      color: "inhert",
       className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : classes.accordionPlusAnimationElement,
       sizeCustomProperty: tokens.accordionItemIconSize
     }));
@@ -100,7 +100,7 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   }, /*#__PURE__*/React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(StyledAccordionContentLeft, {
     ref: leftContentRef,
     className: leftContentRotate
-  }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), contentRight || rightContent && /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
+  }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), contentRight || /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
     className: rightContentRotate
   }, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
     "aria-labelledby": "accordion-item-".concat(key),

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -15,7 +15,7 @@ export var StyledAccordionHeader = /*#__PURE__*/styled.button.withConfig({
 }));
 export var StyledAccordionHeaderLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-2"
-})(["display:flex;gap:var(", ",var(", "));justify-content:space-between;align-items:center;"], tokens.accordionItemHeaderLeftGap, tokens.accordionItemGap);
+})(["display:flex;gap:var(", ");justify-content:space-between;align-items:center;"], tokens.accordionItemGap);
 export var StyledAccordionContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-3"
 })(["transition:0.2s;transform:rotate(90deg);&.", "{transition:0.2s;transform:rotate(0deg);}"], classes.accordionItemShowBody);

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

@@ -73,6 +73,7 @@ export var numberInputRoot = function numberInputRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isAnimationRun = _useState6[0],
       setIsAnimationRun = _useState6[1];
+    console.log('innerValue', innerValue);
     var innerWidth = width ? getSizeValueFromProp(width) : '100%';
     var actionIconSize = size === 'xs' ? 'xs' : 's';
     var solidViewClass = segmentation === 'solid' ? classes.solidView : undefined;

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

@@ -1,4 +1,4 @@
-var _excluded = ["target", "children", "animated", "isOpen", "opened", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle", "closeOnOverlayClick"];
+var _excluded = ["target", "children", "isOpen", "opened", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle", "closeOnOverlayClick"];
 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); }
 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; }
@@ -35,7 +35,6 @@ export var popoverRoot = function popoverRoot(Root) {
     var _placement$;
     var target = _ref.target,
       children = _ref.children,
-      animated = _ref.animated,
       isOpen = _ref.isOpen,
       opened = _ref.opened,
       _ref$trigger = _ref.trigger,
@@ -75,15 +74,13 @@ export var popoverRoot = function popoverRoot(Root) {
     var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       forceRender = _useState4[1];
-    var _useState5 = useState(innerIsOpen),
-      _useState6 = _slicedToArray(_useState5, 2),
-      shouldRender = _useState6[0],
-      setShouldRender = _useState6[1];
     var portalContainer = _typeof(target) === 'object' && target !== null && 'current' in target && target.current || undefined;
     var isAutoArray = Array.isArray(placement);
     var isAuto = isAutoArray || placement.startsWith('auto');
-    var openClass = innerIsOpen && shouldRender ? classes.open : undefined;
-    var animatedClass = animated ? classes.animate : undefined;
+    var initialStyles = {
+      visibility: innerIsOpen ? 'visible' : 'hidden',
+      opacity: innerIsOpen ? 1 : 0
+    };
     var _usePopper = usePopper(rootRef.current, popoverRef.current, {
         // TODO: #1121
         // eslint-disable-next-line no-nested-ternary
@@ -211,16 +208,6 @@ export var popoverRoot = function popoverRoot(Root) {
        */
       Promise.resolve().then(forceUpdate);
     }, [innerIsOpen, children, forceUpdate]);
-    var handleTransitionEnd = function handleTransitionEnd() {
-      if (!innerIsOpen) {
-        setShouldRender(false);
-      }
-    };
-    useEffect(function () {
-      if (innerIsOpen) {
-        setShouldRender(true);
-      }
-    }, [innerIsOpen]);
     return /*#__PURE__*/React.createElement(Portal, {
       container: portalContainer,
       disabled: /*#__PURE__*/isValidElement(target)
@@ -240,12 +227,11 @@ export var popoverRoot = function popoverRoot(Root) {
       view: view,
       className: className
     }, rest), /*#__PURE__*/React.createElement(StyledPopover, _extends({}, attributes.popper, {
-      onTransitionEnd: handleTransitionEnd,
-      className: cx(classes.root, openClass, animatedClass),
+      className: classes.root,
       ref: popoverForkRef,
-      style: _objectSpread(_objectSpread({}, styles.popper), {}, {
-        display: shouldRender || innerIsOpen ? 'block' : 'none'
-      }),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), {
+        display: innerIsOpen ? 'block' : 'none'
+      }), initialStyles),
       zIndex: zIndex
     }), hasArrow && /*#__PURE__*/React.createElement(StyledArrow, _extends({
       className: classes.arrow,

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

@@ -12,7 +12,7 @@ export var StyledArrow = /*#__PURE__*/styled.div.withConfig({
 })(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"], /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskImage), /*#__PURE__*/String(tokens.arrowBackground));
 export var StyledPopover = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-tnpyex-3"
-})(["position:absolute;z-index:", ";opacity:0;visibility:hidden;&.", "{transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}&.", "{opacity:1;visibility:visible;}&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
+})(["position:absolute;z-index:", ";&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
   var zIndex = _ref.zIndex;
   return zIndex || DEFAULT_Z_INDEX;
-}, classes.animate, classes.open, classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight));
+}, classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight));

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

@@ -3,9 +3,7 @@ export var classes = {
   root: 'popover-root',
   target: 'popover-target',
   arrow: 'popover-arrow',
-  targetAsRef: 'popover-target-as-ref',
-  open: 'popover-open',
-  animate: 'popover-animate'
+  targetAsRef: 'popover-target-as-ref'
 };
 export var tokens = {
   arrowMaskWidth: '--plasma-popover-arrow-mask-width',

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

@@ -11,12 +11,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useEffect, forwardRef, useState, useRef } from 'react';
 import styled from 'styled-components';
 import { component } from '../../engines';
-import { popoverConfig, popoverTokens } from '../Popover';
+import { popoverClasses, popoverConfig, popoverTokens } from '../Popover';
 import { cx } from '../../utils';
 import { StyledContentLeft, TooltipRoot } from './Tooltip.styles';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
-import { tokens } from './Tooltip.tokens';
+import { classes, tokens } from './Tooltip.tokens';
 var ESCAPE_KEYCODE = 27;
 var getStringValue = function getStringValue(value) {
   return typeof value === 'number' ? "".concat(value, "rem") : value;
@@ -24,7 +24,7 @@ var getStringValue = function getStringValue(value) {
 var Popover = /*#__PURE__*/component(popoverConfig);
 var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
   componentId: "plasma-new-hope__sc-dj06kz-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], popoverTokens.arrowMaskWidth, tokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, tokens.arrowMaskHeight, popoverTokens.arrowMaskImage, tokens.arrowMaskImage, popoverTokens.arrowBackground, tokens.arrowBackground, popoverTokens.arrowHeight, tokens.arrowHeight, popoverTokens.arrowEdgeMargin, tokens.arrowEdgeMargin);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", " .", "{transition:opacity 200ms ease-in-out,visibility 200ms ease-in-out;}"], popoverTokens.arrowMaskWidth, tokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, tokens.arrowMaskHeight, popoverTokens.arrowMaskImage, tokens.arrowMaskImage, popoverTokens.arrowBackground, tokens.arrowBackground, popoverTokens.arrowHeight, tokens.arrowHeight, popoverTokens.arrowEdgeMargin, tokens.arrowEdgeMargin, classes.animated, popoverClasses.root);
 
 /**
  * Компонент для текстовых подсказок. Основное предназначение — подписи к блокам.
@@ -81,6 +81,7 @@ export var tooltipRoot = function tooltipRoot(Root) {
     var innerIsOpen = Boolean(isVisible || isOpen || opened);
     var innerHasArrow = arrow || hasArrow;
     var showTooltip = innerIsOpen && Boolean(text);
+    var animatedClass = animated ? classes.animated : undefined;
     useEffect(function () {
       var onKeyDown = function onKeyDown(event) {
         if (event.keyCode === ESCAPE_KEYCODE) {
@@ -131,8 +132,7 @@ export var tooltipRoot = function tooltipRoot(Root) {
       "aria-hidden": !innerIsOpen,
       "aria-live": "polite",
       role: "tooltip",
-      animated: animated,
-      className: cx(ref === null || ref === void 0 ? void 0 : ref.classList.toString())
+      className: cx(ref === null || ref === void 0 ? void 0 : ref.classList.toString(), animatedClass)
     }, (trigger === 'hover' || trigger === 'click') && {
       trigger: trigger,
       onToggle: onToggle

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

@@ -67,7 +67,6 @@ const meta: Meta<typeof Popover> = {
         skidding: 0,
         distance: 6,
         hasArrow: true,
-        animated: true,
     },
 };