@salutejs/plasma-new-hope 0.257.0-canary.1736.13142936948.0 → 0.257.0-canary.1739.13145324228.0

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

@@ -9,7 +9,6 @@ var classes = exports.classes = {
   fixedStretching: 'accordion-stretching-fixed',
   accordionRoot: 'accordion-root',
   accordionItem: 'accordion-item',
-  accordionItemOpened: 'accordion-item-opened',
   clearAccordionItem: 'clear-accordion-item',
   accordionItemShowBody: 'accordion-item-show-body',
   accordionPlusAnimationElement: 'accordion-plus-animation-element',
@@ -21,13 +20,11 @@ var tokens = exports.tokens = {
   accordionWidth: '--plasma-accordion-width',
   accordionBackground: '--plasma-accordion-background',
   accordionItemBackground: '--plasma-accordion-item-background',
-  accordionItemShadow: '--plasma-accordion-item-shadow',
   accordionItemBorderRadius: '--plasma-accordion-item-border-radius',
   accordionItemPadding: '--plasma-accordion-item-padding',
   accordionItemPaddingVertical: '--plasma-accordion-item-padding-vertical',
   accordionItemPaddingHorizontal: '--plasma-accordion-item-padding-horizontal',
   accordionItemPaddingHorizontalLeft: '--plasma-accordion-item-padding-horizontal-left',
-  accordionItemBodyPaddingBottom: '--plasma-accordion-item-body-padding-bottom',
   accordionItemGap: '--plasma-accordion-item-gap',
   accordionItemFocus: '--plasma-accordion-item-focus',
   accordionItemBorder: '--plasma-accordion-item-border',
@@ -38,7 +35,6 @@ var tokens = exports.tokens = {
   accordionItemHeaderLeftGapDefault: '--plasma-accordion-item-header-left-gap-default',
   accordionItemHeaderLeftGapClear: '--plasma-accordion-item-header-left-gap-clear',
   accordionItemTitleColor: '--plasma-accordion-item-title-color',
-  accordionItemOpenedTitleColor: '--plasma-accordion-item-title-opened-color',
   accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
   accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',
   accordionItemTitleFontStyle: '--plasma-accordion-item-title-font-style',

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

@@ -82,7 +82,6 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
     }));
   };
   var accordionBorderRadius = (0, _roundness.convertRoundnessMatrix)(pin, "var(".concat(_Accordion.tokens.accordionItemBorderRadius, ")"), '1.5rem');
-  var openedClass = (opened !== null && opened !== void 0 ? opened : value) ? _Accordion.classes.accordionItemOpened : '';
   var disabledClass = disabled ? _Accordion.classes.accordionDisabled : '';
   var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledArrow, {
     size: "xs",
@@ -93,7 +92,7 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
   var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/_react["default"].createElement(StyledAnimationPlus, null) : undefined;
   var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? _Accordion.classes.accordionItemShowBody : undefined;
   return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionItem, {
-    className: (0, _utils.cx)(_Accordion.classes.accordionItem, className, openedClass, disabledClass),
+    className: (0, _utils.cx)(_Accordion.classes.accordionItem, className, disabledClass),
     key: key,
     ref: outerRef,
     style: _objectSpread({

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

@@ -9,8 +9,11 @@ var _Icon = /*#__PURE__*/require("../../../_Icon");
 var _Accordion = /*#__PURE__*/require("../../Accordion.tokens");
 var _mixins = /*#__PURE__*/require("../../../../mixins");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var StyledAccordionHeader = exports.StyledAccordionHeader = /*#__PURE__*/_styledComponents["default"].button.withConfig({
+var StyledAccordionItem = exports.StyledAccordionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-0"
+})(["background:var(", ");border:var(", ");border-bottom:var(", ");&:last-child{border-bottom:var(", ");}&.", "{opacity:0.4;cursor:not-allowed;}"], _Accordion.tokens.accordionItemBackground, _Accordion.tokens.accordionItemBorder, _Accordion.tokens.accordionItemBorderBottom, _Accordion.tokens.accordionItemBorder, _Accordion.classes.accordionDisabled);
+var StyledAccordionHeader = exports.StyledAccordionHeader = /*#__PURE__*/_styledComponents["default"].button.withConfig({
+  componentId: "plasma-new-hope__sc-20ij9z-1"
 })(["width:100%;border:none;padding:var(", ");display:flex;gap:var(", ");justify-content:space-between;align-items:center;background:none;box-sizing:border-box;cursor:pointer;&:focus{outline:none;}", ""], _Accordion.tokens.accordionItemPadding, _Accordion.tokens.accordionItemGap, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineOffset: '0.125rem',
   outlineSize: '0.125rem',
@@ -18,32 +21,29 @@ var StyledAccordionHeader = exports.StyledAccordionHeader = /*#__PURE__*/_styled
   outlineColor: /*#__PURE__*/"var(".concat(_Accordion.tokens.accordionItemFocus, ")")
 }));
 var StyledAccordionHeaderLeft = exports.StyledAccordionHeaderLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-1"
+  componentId: "plasma-new-hope__sc-20ij9z-2"
 })(["display:flex;gap:var(", ",var(", "));justify-content:space-between;align-items:center;"], _Accordion.tokens.accordionItemHeaderLeftGap, _Accordion.tokens.accordionItemGap);
 var StyledAccordionContentRight = exports.StyledAccordionContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-2"
+  componentId: "plasma-new-hope__sc-20ij9z-3"
 })(["transition:0.2s;transform:rotate(90deg);&.", "{transition:0.2s;transform:rotate(0deg);}"], _Accordion.classes.accordionItemShowBody);
 var StyledAccordionContentLeft = exports.StyledAccordionContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-3"
+  componentId: "plasma-new-hope__sc-20ij9z-4"
 })(["transition:0.2s;display:flex;align-items:center;&.", "{transition:0.2s;transform:rotate(180deg);}"], _Accordion.classes.accordionItemShowBody);
 var StyledAccordionTitle = exports.StyledAccordionTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-4"
+  componentId: "plasma-new-hope__sc-20ij9z-5"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], _Accordion.tokens.accordionItemTitleColor, _Accordion.tokens.accordionItemTitleFontFamily, _Accordion.tokens.accordionItemTitleFontSize, _Accordion.tokens.accordionItemTitleFontWeight, _Accordion.tokens.accordionItemTitleFontStyle, _Accordion.tokens.accordionItemTitleLetterSpacing, _Accordion.tokens.accordionItemTitleLineHeight);
 var StyledAccordionBodyAnimate = exports.StyledAccordionBodyAnimate = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-5"
-})(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", "{grid-template-rows:1fr;padding-bottom:var(", ",var(", "));&.", "{transition:0.2s;transform:rotate(0deg);}}"], _Accordion.classes.accordionItemShowBody, _Accordion.tokens.accordionItemBodyPaddingBottom, _Accordion.tokens.accordionItemPaddingVertical, _Accordion.classes.accordionPlusAnimationElement);
-var StyledAccordionBody = exports.StyledAccordionBody = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-6"
+})(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", "{grid-template-rows:1fr;padding-bottom:var(", ");&.", "{transition:0.2s;transform:rotate(0deg);}}"], _Accordion.classes.accordionItemShowBody, _Accordion.tokens.accordionItemPaddingVertical, _Accordion.classes.accordionPlusAnimationElement);
+var StyledAccordionBody = exports.StyledAccordionBody = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-20ij9z-7"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], _Accordion.tokens.accordionItemTextColor, _Accordion.tokens.accordionItemTextFontFamily, _Accordion.tokens.accordionItemTextFontSize, _Accordion.tokens.accordionItemTextFontWeight, _Accordion.tokens.accordionItemTextFontStyle, _Accordion.tokens.accordionItemTextLetterSpacing, _Accordion.tokens.accordionItemTextLineHeight, _Accordion.tokens.accordionItemPaddingHorizontal, _Accordion.tokens.accordionItemPaddingHorizontalLeft);
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconChevronDownFill).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-7"
+  componentId: "plasma-new-hope__sc-20ij9z-8"
 })(["pointer-events:none;user-select:none;color:var(", ");"], _Accordion.tokens.accordionItemIconColor);
 var StyledMinus = exports.StyledMinus = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconMinus).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-8"
-})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);color:var(", ",var(", "));}"], _Accordion.tokens.accordionItemIconColor, _Accordion.classes.accordionPlusAnimationElement, _Accordion.classes.accordionItemShowBody, _Accordion.tokens.accordionItemOpenedTitleColor, _Accordion.tokens.accordionItemIconColor);
-var StyledPlus = exports.StyledPlus = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-9"
-})(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], _Accordion.tokens.accordionItemIconSize, _Accordion.tokens.accordionItemIconSize);
-var StyledAccordionItem = exports.StyledAccordionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], _Accordion.tokens.accordionItemIconColor, _Accordion.classes.accordionPlusAnimationElement, _Accordion.classes.accordionItemShowBody);
+var StyledPlus = exports.StyledPlus = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-10"
-})(["background:var(", ");border:var(", ");border-bottom:var(", ");box-shadow:var(", ");&:last-child{border-bottom:var(", ");}&.", "{opacity:0.4;cursor:not-allowed;}&.", "{", "{color:var(", ",var(", "));}", "{color:var(", ",var(", "));}}"], _Accordion.tokens.accordionItemBackground, _Accordion.tokens.accordionItemBorder, _Accordion.tokens.accordionItemBorderBottom, _Accordion.tokens.accordionItemShadow, _Accordion.tokens.accordionItemBorder, _Accordion.classes.accordionDisabled, _Accordion.classes.accordionItemOpened, StyledArrow, _Accordion.tokens.accordionItemOpenedTitleColor, _Accordion.tokens.accordionItemIconColor, StyledAccordionTitle, _Accordion.tokens.accordionItemOpenedTitleColor, _Accordion.tokens.accordionItemTitleColor);
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], _Accordion.tokens.accordionItemIconSize, _Accordion.tokens.accordionItemIconSize);

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", "isOpen", "opened", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle", "closeOnOverlayClick"];
+var _excluded = ["target", "children", "animated", "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,6 +43,7 @@ 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,
@@ -82,13 +83,15 @@ 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 initialStyles = {
-      visibility: innerIsOpen ? 'visible' : 'hidden',
-      opacity: innerIsOpen ? 1 : 0
-    };
+    var openClass = innerIsOpen && shouldRender ? _Popover2.classes.open : undefined;
+    var animatedClass = animated ? _Popover2.classes.animate : undefined;
     var _usePopper = (0, _reactPopper.usePopper)(rootRef.current, popoverRef.current, {
         // TODO: #1121
         // eslint-disable-next-line no-nested-ternary
@@ -216,6 +219,16 @@ 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)
@@ -235,11 +248,12 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       view: view,
       className: className
     }, rest), /*#__PURE__*/_react["default"].createElement(_Popover.StyledPopover, _extends({}, attributes.popper, {
-      className: _Popover2.classes.root,
+      onTransitionEnd: handleTransitionEnd,
+      className: (0, _utils.cx)(_Popover2.classes.root, openClass, animatedClass),
       ref: popoverForkRef,
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), {
-        display: innerIsOpen ? 'block' : 'none'
-      }), initialStyles),
+      style: _objectSpread(_objectSpread({}, styles.popper), {}, {
+        display: shouldRender || innerIsOpen ? 'block' : 'none'
+      }),
       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:", ";&: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:", ";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) {
   var zIndex = _ref.zIndex;
   return zIndex || _utils.DEFAULT_Z_INDEX;
-}, _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.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));

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

@@ -9,7 +9,9 @@ var classes = exports.classes = {
   root: 'popover-root',
   target: 'popover-target',
   arrow: 'popover-arrow',
-  targetAsRef: 'popover-target-as-ref'
+  targetAsRef: 'popover-target-as-ref',
+  open: 'popover-open',
+  animate: 'popover-animate'
 };
 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(", ");&.", " .", "{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);
+})(["", ":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);
 
 /**
  * Компонент для текстовых подсказок. Основное предназначение — подписи к блокам.
@@ -91,7 +91,6 @@ 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) {
@@ -142,7 +141,8 @@ var tooltipRoot = exports.tooltipRoot = function tooltipRoot(Root) {
       "aria-hidden": !innerIsOpen,
       "aria-live": "polite",
       role: "tooltip",
-      className: (0, _utils.cx)(ref === null || ref === void 0 ? void 0 : ref.classList.toString(), animatedClass)
+      animated: animated,
+      className: (0, _utils.cx)(ref === null || ref === void 0 ? void 0 : ref.classList.toString())
     }, (trigger === 'hover' || trigger === 'click') && {
       trigger: trigger,
       onToggle: onToggle

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

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

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

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

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

@@ -3,7 +3,6 @@ export var classes = {
   fixedStretching: 'accordion-stretching-fixed',
   accordionRoot: 'accordion-root',
   accordionItem: 'accordion-item',
-  accordionItemOpened: 'accordion-item-opened',
   clearAccordionItem: 'clear-accordion-item',
   accordionItemShowBody: 'accordion-item-show-body',
   accordionPlusAnimationElement: 'accordion-plus-animation-element',
@@ -15,13 +14,11 @@ export var tokens = {
   accordionWidth: '--plasma-accordion-width',
   accordionBackground: '--plasma-accordion-background',
   accordionItemBackground: '--plasma-accordion-item-background',
-  accordionItemShadow: '--plasma-accordion-item-shadow',
   accordionItemBorderRadius: '--plasma-accordion-item-border-radius',
   accordionItemPadding: '--plasma-accordion-item-padding',
   accordionItemPaddingVertical: '--plasma-accordion-item-padding-vertical',
   accordionItemPaddingHorizontal: '--plasma-accordion-item-padding-horizontal',
   accordionItemPaddingHorizontalLeft: '--plasma-accordion-item-padding-horizontal-left',
-  accordionItemBodyPaddingBottom: '--plasma-accordion-item-body-padding-bottom',
   accordionItemGap: '--plasma-accordion-item-gap',
   accordionItemFocus: '--plasma-accordion-item-focus',
   accordionItemBorder: '--plasma-accordion-item-border',
@@ -32,7 +29,6 @@ export var tokens = {
   accordionItemHeaderLeftGapDefault: '--plasma-accordion-item-header-left-gap-default',
   accordionItemHeaderLeftGapClear: '--plasma-accordion-item-header-left-gap-clear',
   accordionItemTitleColor: '--plasma-accordion-item-title-color',
-  accordionItemOpenedTitleColor: '--plasma-accordion-item-title-opened-color',
   accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
   accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',
   accordionItemTitleFontStyle: '--plasma-accordion-item-title-font-style',

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

@@ -74,7 +74,6 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
     }));
   };
   var accordionBorderRadius = convertRoundnessMatrix(pin, "var(".concat(tokens.accordionItemBorderRadius, ")"), '1.5rem');
-  var openedClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemOpened : '';
   var disabledClass = disabled ? classes.accordionDisabled : '';
   var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? /*#__PURE__*/React.createElement(StyledArrow, {
     size: "xs",
@@ -85,7 +84,7 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
   var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
   return /*#__PURE__*/React.createElement(StyledAccordionItem, {
-    className: cx(classes.accordionItem, className, openedClass, disabledClass),
+    className: cx(classes.accordionItem, className, disabledClass),
     key: key,
     ref: outerRef,
     style: _objectSpread({

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

@@ -2,8 +2,11 @@ import styled from 'styled-components';
 import { IconChevronDownFill, IconMinus } from '../../../_Icon';
 import { classes, tokens } from '../../Accordion.tokens';
 import { addFocus } from '../../../../mixins';
-export var StyledAccordionHeader = /*#__PURE__*/styled.button.withConfig({
+export var StyledAccordionItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-0"
+})(["background:var(", ");border:var(", ");border-bottom:var(", ");&:last-child{border-bottom:var(", ");}&.", "{opacity:0.4;cursor:not-allowed;}"], tokens.accordionItemBackground, tokens.accordionItemBorder, tokens.accordionItemBorderBottom, tokens.accordionItemBorder, classes.accordionDisabled);
+export var StyledAccordionHeader = /*#__PURE__*/styled.button.withConfig({
+  componentId: "plasma-new-hope__sc-20ij9z-1"
 })(["width:100%;border:none;padding:var(", ");display:flex;gap:var(", ");justify-content:space-between;align-items:center;background:none;box-sizing:border-box;cursor:pointer;&:focus{outline:none;}", ""], tokens.accordionItemPadding, tokens.accordionItemGap, /*#__PURE__*/addFocus({
   outlineOffset: '0.125rem',
   outlineSize: '0.125rem',
@@ -11,32 +14,29 @@ export var StyledAccordionHeader = /*#__PURE__*/styled.button.withConfig({
   outlineColor: /*#__PURE__*/"var(".concat(tokens.accordionItemFocus, ")")
 }));
 export var StyledAccordionHeaderLeft = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-1"
+  componentId: "plasma-new-hope__sc-20ij9z-2"
 })(["display:flex;gap:var(", ",var(", "));justify-content:space-between;align-items:center;"], tokens.accordionItemHeaderLeftGap, tokens.accordionItemGap);
 export var StyledAccordionContentRight = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-2"
+  componentId: "plasma-new-hope__sc-20ij9z-3"
 })(["transition:0.2s;transform:rotate(90deg);&.", "{transition:0.2s;transform:rotate(0deg);}"], classes.accordionItemShowBody);
 export var StyledAccordionContentLeft = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-3"
+  componentId: "plasma-new-hope__sc-20ij9z-4"
 })(["transition:0.2s;display:flex;align-items:center;&.", "{transition:0.2s;transform:rotate(180deg);}"], classes.accordionItemShowBody);
 export var StyledAccordionTitle = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-4"
+  componentId: "plasma-new-hope__sc-20ij9z-5"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], tokens.accordionItemTitleColor, tokens.accordionItemTitleFontFamily, tokens.accordionItemTitleFontSize, tokens.accordionItemTitleFontWeight, tokens.accordionItemTitleFontStyle, tokens.accordionItemTitleLetterSpacing, tokens.accordionItemTitleLineHeight);
 export var StyledAccordionBodyAnimate = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-5"
-})(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", "{grid-template-rows:1fr;padding-bottom:var(", ",var(", "));&.", "{transition:0.2s;transform:rotate(0deg);}}"], classes.accordionItemShowBody, tokens.accordionItemBodyPaddingBottom, tokens.accordionItemPaddingVertical, classes.accordionPlusAnimationElement);
-export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-6"
+})(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", "{grid-template-rows:1fr;padding-bottom:var(", ");&.", "{transition:0.2s;transform:rotate(0deg);}}"], classes.accordionItemShowBody, tokens.accordionItemPaddingVertical, classes.accordionPlusAnimationElement);
+export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-20ij9z-7"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-7"
+  componentId: "plasma-new-hope__sc-20ij9z-8"
 })(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
 export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-8"
-})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);color:var(", ",var(", "));}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor);
-export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-9"
-})(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], tokens.accordionItemIconSize, tokens.accordionItemIconSize);
-export var StyledAccordionItem = /*#__PURE__*/styled.div.withConfig({
+})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
+export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-10"
-})(["background:var(", ");border:var(", ");border-bottom:var(", ");box-shadow:var(", ");&:last-child{border-bottom:var(", ");}&.", "{opacity:0.4;cursor:not-allowed;}&.", "{", "{color:var(", ",var(", "));}", "{color:var(", ",var(", "));}}"], tokens.accordionItemBackground, tokens.accordionItemBorder, tokens.accordionItemBorderBottom, tokens.accordionItemShadow, tokens.accordionItemBorder, classes.accordionDisabled, classes.accordionItemOpened, StyledArrow, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor, StyledAccordionTitle, tokens.accordionItemOpenedTitleColor, tokens.accordionItemTitleColor);
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], tokens.accordionItemIconSize, tokens.accordionItemIconSize);

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

@@ -1,4 +1,4 @@
-var _excluded = ["target", "children", "isOpen", "opened", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle", "closeOnOverlayClick"];
+var _excluded = ["target", "children", "animated", "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,6 +35,7 @@ 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,
@@ -74,13 +75,15 @@ 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 initialStyles = {
-      visibility: innerIsOpen ? 'visible' : 'hidden',
-      opacity: innerIsOpen ? 1 : 0
-    };
+    var openClass = innerIsOpen && shouldRender ? classes.open : undefined;
+    var animatedClass = animated ? classes.animate : undefined;
     var _usePopper = usePopper(rootRef.current, popoverRef.current, {
         // TODO: #1121
         // eslint-disable-next-line no-nested-ternary
@@ -208,6 +211,16 @@ 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)
@@ -227,11 +240,12 @@ export var popoverRoot = function popoverRoot(Root) {
       view: view,
       className: className
     }, rest), /*#__PURE__*/React.createElement(StyledPopover, _extends({}, attributes.popper, {
-      className: classes.root,
+      onTransitionEnd: handleTransitionEnd,
+      className: cx(classes.root, openClass, animatedClass),
       ref: popoverForkRef,
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), {
-        display: innerIsOpen ? 'block' : 'none'
-      }), initialStyles),
+      style: _objectSpread(_objectSpread({}, styles.popper), {}, {
+        display: shouldRender || innerIsOpen ? 'block' : 'none'
+      }),
       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:", ";&: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:", ";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) {
   var zIndex = _ref.zIndex;
   return zIndex || DEFAULT_Z_INDEX;
-}, 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.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));

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

@@ -3,7 +3,9 @@ export var classes = {
   root: 'popover-root',
   target: 'popover-target',
   arrow: 'popover-arrow',
-  targetAsRef: 'popover-target-as-ref'
+  targetAsRef: 'popover-target-as-ref',
+  open: 'popover-open',
+  animate: 'popover-animate'
 };
 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 { popoverClasses, popoverConfig, popoverTokens } from '../Popover';
+import { 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 { classes, tokens } from './Tooltip.tokens';
+import { 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(", ");&.", " .", "{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);
+})(["", ":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);
 
 /**
  * Компонент для текстовых подсказок. Основное предназначение — подписи к блокам.
@@ -81,7 +81,6 @@ 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) {
@@ -132,7 +131,8 @@ export var tooltipRoot = function tooltipRoot(Root) {
       "aria-hidden": !innerIsOpen,
       "aria-live": "polite",
       role: "tooltip",
-      className: cx(ref === null || ref === void 0 ? void 0 : ref.classList.toString(), animatedClass)
+      animated: animated,
+      className: cx(ref === null || ref === void 0 ? void 0 : ref.classList.toString())
     }, (trigger === 'hover' || trigger === 'click') && {
       trigger: trigger,
       onToggle: onToggle

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

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

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

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

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

@@ -3,7 +3,6 @@ export declare const classes: {
     fixedStretching: string;
     accordionRoot: string;
     accordionItem: string;
-    accordionItemOpened: string;
     clearAccordionItem: string;
     accordionItemShowBody: string;
     accordionPlusAnimationElement: string;
@@ -15,13 +14,11 @@ export declare const tokens: {
     accordionWidth: string;
     accordionBackground: string;
     accordionItemBackground: string;
-    accordionItemShadow: string;
     accordionItemBorderRadius: string;
     accordionItemPadding: string;
     accordionItemPaddingVertical: string;
     accordionItemPaddingHorizontal: string;
     accordionItemPaddingHorizontalLeft: string;
-    accordionItemBodyPaddingBottom: string;
     accordionItemGap: string;
     accordionItemFocus: string;
     accordionItemBorder: string;
@@ -32,7 +29,6 @@ export declare const tokens: {
     accordionItemHeaderLeftGapDefault: string;
     accordionItemHeaderLeftGapClear: string;
     accordionItemTitleColor: string;
-    accordionItemOpenedTitleColor: string;
     accordionItemTitleFontFamily: string;
     accordionItemTitleFontSize: string;
     accordionItemTitleFontStyle: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;CAWnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwClB,CAAC"}
+{"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqClB,CAAC"}

package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAqBvE,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;wCAyHzB,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAqBvE,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;wCAwHzB,CAAC"}