@salutejs/plasma-new-hope 0.123.0-canary.1361.10450330303.0 → 0.123.0-dev.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", "isOpen", "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,6 +43,7 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
     var target = _ref.target,
       children = _ref.children,
       isOpen = _ref.isOpen,
+      opened = _ref.opened,
       _ref$trigger = _ref.trigger,
       trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
       hasArrow = _ref.hasArrow,
@@ -66,11 +67,12 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       onToggle = _ref.onToggle,
       closeOnOverlayClick = _ref.closeOnOverlayClick,
       rest = _objectWithoutProperties(_ref, _excluded);
+    var innerIsOpen = Boolean(isOpen || opened);
     var rootRef = (0, _react.useRef)(null);
     var popoverRef = (0, _react.useRef)(null);
     var handleRef = (0, _plasmaCore.useForkRef)(rootRef, outerRootRef);
     var portalRef = (0, _react.useRef)(null);
-    var trapRef = (0, _plasmaCore.useFocusTrap)(isOpen && isFocusTrapped);
+    var trapRef = (0, _plasmaCore.useFocusTrap)(innerIsOpen && isFocusTrapped);
     var popoverForkRef = (0, _plasmaCore.useForkRef)(popoverRef, trapRef);
     var _useState = (0, _react.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -82,8 +84,8 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
     var isAutoArray = Array.isArray(placement);
     var isAuto = isAutoArray || placement.startsWith('auto');
     var initialStyles = {
-      visibility: isOpen ? 'visible' : 'hidden',
-      opacity: isOpen ? 1 : 0
+      visibility: innerIsOpen ? 'visible' : 'hidden',
+      opacity: innerIsOpen ? 1 : 0
     };
     var _usePopper = (0, _reactPopper.usePopper)(rootRef.current, popoverRef.current, {
         // TODO: #1121
@@ -116,12 +118,12 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       attributes = _usePopper.attributes,
       forceUpdate = _usePopper.forceUpdate;
     var onEscape = (0, _react.useCallback)(function (event) {
-      if (isOpen && closeOnEsc && event.keyCode === ESCAPE_KEYCODE) {
+      if (innerIsOpen && closeOnEsc && event.keyCode === ESCAPE_KEYCODE) {
         onToggle === null || onToggle === void 0 || onToggle(false, event);
       }
-    }, [closeOnEsc, isOpen, onToggle]);
+    }, [closeOnEsc, innerIsOpen, onToggle]);
     var onDocumentClick = (0, _react.useCallback)(function (event) {
-      if (isOpen && closeOnOverlayClick && onToggle) {
+      if (innerIsOpen && closeOnOverlayClick && onToggle) {
         var _rootRef$current, _popoverRef$current;
         var targetIsRoot = event.target === rootRef.current;
         var rootHasTarget = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.contains(event.target);
@@ -130,17 +132,17 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
           onToggle(false, event);
         }
       }
-    }, [closeOnOverlayClick, isOpen, onToggle]);
+    }, [closeOnOverlayClick, innerIsOpen, onToggle]);
     var onClick = (0, _react.useCallback)(function (event) {
       if (trigger === 'click') {
         var _popoverRef$current2;
         var targetIsPopover = event.target === popoverRef.current;
         var rootHasTarget = (_popoverRef$current2 = popoverRef.current) === null || _popoverRef$current2 === void 0 ? void 0 : _popoverRef$current2.contains(event.target);
         if (!targetIsPopover && !rootHasTarget) {
-          onToggle === null || onToggle === void 0 || onToggle(!isOpen, event);
+          onToggle === null || onToggle === void 0 || onToggle(!innerIsOpen, event);
         }
       }
-    }, [trigger, isOpen, onToggle]);
+    }, [trigger, innerIsOpen, onToggle]);
     var onMouseEnter = (0, _react.useCallback)(function (event) {
       if (trigger === 'hover') {
         onToggle === null || onToggle === void 0 || onToggle(true, event);
@@ -166,13 +168,13 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       return function () {
         return document.removeEventListener('click', onDocumentClick);
       };
-    }, [isOpen, onToggle]);
+    }, [innerIsOpen, onToggle]);
     (0, _react.useEffect)(function () {
       window.addEventListener('keydown', onEscape);
       return function () {
         return window.removeEventListener('keydown', onEscape);
       };
-    }, [closeOnEsc, isOpen, onToggle]);
+    }, [closeOnEsc, innerIsOpen, onToggle]);
     (0, _react.useEffect)(function () {
       var portal = document.getElementById(POPOVER_PORTAL_ID);
       if (typeof frame !== 'string' && frame && frame.current) {
@@ -200,7 +202,7 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       forceRender(true);
     }, []);
     (0, _react.useEffect)(function () {
-      if (!isOpen || !forceUpdate) {
+      if (!innerIsOpen || !forceUpdate) {
         return;
       }
 
@@ -211,7 +213,7 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
        * вызов метода в очередь микрозадач.
        */
       Promise.resolve().then(forceUpdate);
-    }, [isOpen, children, forceUpdate]);
+    }, [innerIsOpen, children, forceUpdate]);
     return /*#__PURE__*/_react["default"].createElement(_Popover.StyledWrapper, {
       className: _Popover2.classes.wrapper,
       onMouseEnter: onMouseEnter,
@@ -231,7 +233,7 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       className: _Popover2.classes.root,
       ref: popoverForkRef,
       style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), {
-        display: isOpen ? 'block' : 'none'
+        display: innerIsOpen ? 'block' : 'none'
       }), initialStyles),
       zIndex: zIndex
     }), hasArrow && /*#__PURE__*/_react["default"].createElement(_Popover.StyledArrow, _extends({

package/styled-components/cjs/components/Popover/Popover.template-doc.mdx

@@ -30,7 +30,7 @@ export function App() {
     return (
         <section style=\{{width: '20rem', height: '15rem'}}>
             <Popover
-                isOpen={isOpen}
+                opened={isOpen}
                 onToggle={(is) => setIsOpen(is)}
                 role="presentation"
                 id="popover"

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

@@ -13,7 +13,7 @@ var _PopupContext = /*#__PURE__*/require("./PopupContext");
 var _PopupRoot = /*#__PURE__*/require("./PopupRoot");
 var _hooks = /*#__PURE__*/require("./hooks");
 var _Popup = /*#__PURE__*/require("./Popup.tokens");
-var _excluded = ["id", "isOpen", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "withAnimation", "className"];
+var _excluded = ["id", "isOpen", "opened", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "withAnimation", "className"];
 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); }
@@ -91,6 +91,8 @@ var popupRoot = exports.popupRoot = function popupRoot(Root) {
     var id = _ref.id,
       _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      _ref$opened = _ref.opened,
+      opened = _ref$opened === void 0 ? false : _ref$opened,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'center' : _ref$placement,
       _ref$offset = _ref.offset,
@@ -106,10 +108,11 @@ var popupRoot = exports.popupRoot = function popupRoot(Root) {
       withAnimation = _ref$withAnimation === void 0 ? false : _ref$withAnimation,
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
+    var innerIsOpen = isOpen || opened;
     var uniqId = (0, _plasmaCore.safeUseId)();
     var innerId = id || uniqId;
     var _usePopup = (0, _hooks.usePopup)({
-        isOpen: isOpen,
+        isOpen: innerIsOpen,
         id: innerId,
         popupInfo: popupInfo,
         withAnimation: withAnimation
@@ -151,7 +154,7 @@ var popupRoot = exports.popupRoot = function popupRoot(Root) {
        */
       forceRender(true);
     }, []);
-    if (!isVisible && !isOpen) {
+    if (!isVisible && !innerIsOpen) {
       return null;
     }
     var cls = (0, _utils.cx)(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? _Popup.classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? _Popup.classes.endTransition : '');

package/styled-components/cjs/components/Popup/Popup.template-doc.mdx

@@ -90,7 +90,7 @@ export function App() {
                     <Popup
                         id="popupA"
                         frame={ref}
-                        isOpen={isOpenA}
+                        opened={isOpenA}
                         placement="center"
                         offset={[0, 0]}
                     >
@@ -105,7 +105,7 @@ export function App() {
                     <Popup
                         id="popupB"
                         frame="document"
-                        isOpen={isOpenB}
+                        opened={isOpenB}
                         placement="center"
                         offset={[0, 0]}
                     >
@@ -191,7 +191,7 @@ const StyledPopupAnimation = styled(Popup)`
                 id="popup-id"
                 withAnimation
                 frame="document"
-                isOpen={isOpen}
+                opened={isOpen}
                 placement="center"
                 offset={[0, 0]}
             >

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

@@ -243,7 +243,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       }
     }, /*#__PURE__*/_react["default"].createElement(_Select.StyledPopover, {
       ref: targetRef,
-      isOpen: isCurrentListOpen,
+      opened: isCurrentListOpen,
       placement: (0, _utils.getPlacements)(placement),
       usePortal: Boolean(portal),
       frame: portal,

package/styled-components/cjs/components/Select/ui/Inner/Inner.js

@@ -36,7 +36,7 @@ var Inner = exports.Inner = function Inner(_ref) {
   if (!(0, _utils.isEmpty)(item === null || item === void 0 ? void 0 : item.items)) {
     var _item$items;
     return /*#__PURE__*/_react["default"].createElement(_Select.StyledPopover, {
-      isOpen: isCurrentListOpen,
+      opened: isCurrentListOpen,
       usePortal: false,
       placement: "right-start",
       trigger: "click",

package/styled-components/cjs/components/Sheet/Sheet.template-doc.mdx

@@ -50,7 +50,7 @@ export function App() {
 
 ### Закрепление заголовка и футера
 
-С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер. 
+С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер.
 В этом случае при появлении прокрутки контент будет скроллиться под них.
 
 ```tsx live
@@ -140,4 +140,4 @@ export function App() {
         </>
     );
 }
-```
+```

package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx

@@ -5,15 +5,6 @@ title: Tabs
 
 import { PropsTable, Description } from '@site/src/components';
 
-# Tabs
-Набор компонентов для создания вкладок.
-Структура для вкладок похожа на структуру маркированных списков.
-
-## TabsController
-
-<Description name="TabsController" />
-<PropsTable name="TabsController" />
-
 ## Tabs
 
 <Description name="Tabs" />
@@ -24,6 +15,11 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="TabItem" />
 <PropsTable name="TabItem" />
 
+## TabsController (deprecated)
+Вместо этого используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange.
+
+<Description name="TabsController" />
+<PropsTable name="TabsController" />
 
 ## Использование
 

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

@@ -14,7 +14,7 @@ var _Tooltip = /*#__PURE__*/require("./Tooltip.styles");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _Tooltip2 = /*#__PURE__*/require("./Tooltip.tokens");
-var _excluded = ["id", "text", "isOpen", "isVisible", "hasArrow", "arrow", "animated", "offset", "minWidth", "maxWidth", "placement", "usePortal", "target", "children", "onDismiss", "view", "size", "contentLeft", "zIndex", "className", "style"];
+var _excluded = ["id", "text", "opened", "isVisible", "isOpen", "hasArrow", "arrow", "animated", "offset", "minWidth", "maxWidth", "placement", "usePortal", "target", "children", "onDismiss", "view", "size", "contentLeft", "zIndex", "className", "style"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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; }
@@ -44,8 +44,9 @@ var tooltipRoot = exports.tooltipRoot = function tooltipRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRef) {
     var id = _ref.id,
       text = _ref.text,
-      isOpen = _ref.isOpen,
+      opened = _ref.opened,
       isVisible = _ref.isVisible,
+      isOpen = _ref.isOpen,
       _ref$hasArrow = _ref.hasArrow,
       hasArrow = _ref$hasArrow === void 0 ? true : _ref$hasArrow,
       arrow = _ref.arrow,
@@ -75,7 +76,7 @@ var tooltipRoot = exports.tooltipRoot = function tooltipRoot(Root) {
       setRef = _useState2[1];
 
     // TODO убрать после отказа от старого API
-    var innerIsOpen = isVisible || isOpen;
+    var innerIsOpen = Boolean(isVisible || isOpen || opened);
     var innerHasArrow = arrow || hasArrow;
     var showTooltip = innerIsOpen && Boolean(text === null || text === void 0 ? void 0 : text.length);
     var animatedClass = animated ? _Tooltip2.classes.animated : undefined;
@@ -92,7 +93,7 @@ var tooltipRoot = exports.tooltipRoot = function tooltipRoot(Root) {
     }, []);
     var withContentLeft = contentLeft ? _Tooltip2.classes.hasContentLeft : undefined;
     return /*#__PURE__*/_react["default"].createElement(StyledPopover, _extends({
-      isOpen: showTooltip,
+      opened: showTooltip,
       placement: placement,
       offset: offset,
       zIndex: zIndex,

package/styled-components/cjs/components/Tooltip/Tooltip.template-doc.mdx

@@ -23,7 +23,7 @@ import { IconApps } from '@salutejs/plasma-icons';
 export function App() {
     return (
         <div style=\{{marginLeft: '100px',marginBottom: '35px'}}>
-            <Tooltip target={( <IconApps />)} text="Высокое качество воспроизведения" placement="bottom" hasArrow isOpen />
+            <Tooltip target={( <IconApps />)} text="Высокое качество воспроизведения" placement="bottom" hasArrow opened />
         </div>
     );
 }

package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js

@@ -19,7 +19,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":auto;", ":0.875rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":1rem;", ":0;", ":1rem;", ":auto;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.75rem;", ":1.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1rem;", ":3.5rem;", ":100%;", ":0.875rem;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Combobox.comboboxTokens.width, _Combobox.comboboxTokens.height, _Combobox.comboboxTokens.borderRadius, _Combobox.comboboxTokens.paddingTop, _Combobox.comboboxTokens.paddingRight, _Combobox.comboboxTokens.paddingBottom, _Combobox.comboboxTokens.paddingLeft, _Combobox.comboboxTokens.dividerColor, _Combobox.comboboxTokens.dividerHeight, _Combobox.comboboxTokens.dividerMarginTop, _Combobox.comboboxTokens.dividerMarginRight, _Combobox.comboboxTokens.dividerMarginBottom, _Combobox.comboboxTokens.dividerMarginLeft, _Combobox.comboboxTokens.itemWidth, _Combobox.comboboxTokens.itemHeight, _Combobox.comboboxTokens.itemPaddingTop, _Combobox.comboboxTokens.itemPaddingRight, _Combobox.comboboxTokens.itemPaddingBottom, _Combobox.comboboxTokens.itemPaddingLeft, _Combobox.comboboxTokens.itemBorderRadius, _Combobox.comboboxTokens.itemContentLeftWidth, _Combobox.comboboxTokens.itemFontFamily, _Combobox.comboboxTokens.itemFontSize, _Combobox.comboboxTokens.itemFontStyle, _Combobox.comboboxTokens.itemFontWeightBold, _Combobox.comboboxTokens.itemFontLetterSpacing, _Combobox.comboboxTokens.itemFontLineHeight, _Combobox.comboboxTokens.chipGap, _Combobox.comboboxTokens.chipBorderRadius, _Combobox.comboboxTokens.chipWidth, _Combobox.comboboxTokens.chipHeight, _Combobox.comboboxTokens.chipPaddingRight, _Combobox.comboboxTokens.chipPaddingLeft, _Combobox.comboboxTokens.chipClearContentMarginLeft, _Combobox.comboboxTokens.chipClearContentMarginRight, _Combobox.comboboxTokens.chipCloseIconSize, _Combobox.comboboxTokens.chipFontFamily, _Combobox.comboboxTokens.chipFontSize, _Combobox.comboboxTokens.chipFontStyle, _Combobox.comboboxTokens.chipFontWeight, _Combobox.comboboxTokens.chipLetterSpacing, _Combobox.comboboxTokens.chipLineHeight, _Combobox.comboboxTokens.targetArrowRight, _Combobox.comboboxTokens.targetHeight, _Combobox.comboboxTokens.targetWidth, _Combobox.comboboxTokens.targetRadius, _Combobox.comboboxTokens.targetPadding, _Combobox.comboboxTokens.targetPaddingHasChips, _Combobox.comboboxTokens.targetPaddingWithInput, _Combobox.comboboxTokens.targetInnerTop, _Combobox.comboboxTokens.targetLabelInnerTop, _Combobox.comboboxTokens.targetFontFamily, _Combobox.comboboxTokens.targetFontSize, _Combobox.comboboxTokens.targetFontStyle, _Combobox.comboboxTokens.targetFontWeight, _Combobox.comboboxTokens.targetLetterSpacing, _Combobox.comboboxTokens.targetLineHeight, _Combobox.comboboxTokens.targetLabelInnerFontFamily, _Combobox.comboboxTokens.targetLabelInnerFontSize, _Combobox.comboboxTokens.targetLabelInnerFontStyle, _Combobox.comboboxTokens.targetLabelInnerFontWeight, _Combobox.comboboxTokens.targetLabelInnerLetterSpacing, _Combobox.comboboxTokens.targetLabelInnerLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], _Combobox.comboboxTokens.targetColor, _Combobox.comboboxTokens.targetLabelColor, _Combobox.comboboxTokens.targetArrowColor, _Combobox.comboboxTokens.targetBackgroundColor, _Combobox.comboboxTokens.targetBackgroundColorHover, _Combobox.comboboxTokens.targetBackgroundColorActive, _Combobox.comboboxTokens.targetBackgroundColorOpen, _Combobox.comboboxTokens.background, _Combobox.comboboxTokens.boxShadow, _Combobox.comboboxTokens.itemBackground, _Combobox.comboboxTokens.itemBackgroundHover, _Combobox.comboboxTokens.itemBackgroundSelectedHover, _Combobox.comboboxTokens.itemColor, _Combobox.comboboxTokens.itemContentLeftColor, _Combobox.comboboxTokens.chipCloseIconColor, _Combobox.comboboxTokens.chipColor, _Combobox.comboboxTokens.chipBackground, _Combobox.comboboxTokens.chipColorHover, _Combobox.comboboxTokens.chipBackgroundHover, _Combobox.comboboxTokens.chipColorActive, _Combobox.comboboxTokens.chipBackgroundActive, _Combobox.comboboxTokens.chipBackgroundReadOnly, _Combobox.comboboxTokens.chipColorReadOnly, _Combobox.comboboxTokens.chipBackgroundReadOnlyHover, _Combobox.comboboxTokens.chipColorReadOnlyHover, _Combobox.comboboxTokens.chipOpacityReadonly, _Combobox.comboboxTokens.disabledOpacity, _Combobox.comboboxTokens.focusColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], _Combobox.comboboxTokens.targetColor, _Combobox.comboboxTokens.targetLabelColor, _Combobox.comboboxTokens.targetArrowColor, _Combobox.comboboxTokens.targetBackgroundColor, _Combobox.comboboxTokens.targetBackgroundColorHover, _Combobox.comboboxTokens.targetBackgroundColorActive, _Combobox.comboboxTokens.targetBackgroundColorOpen, _Combobox.comboboxTokens.background, _Combobox.comboboxTokens.boxShadow, _Combobox.comboboxTokens.itemBackground, _Combobox.comboboxTokens.itemBackgroundHover, _Combobox.comboboxTokens.itemBackgroundSelectedHover, _Combobox.comboboxTokens.itemColor, _Combobox.comboboxTokens.itemContentLeftColor, _Combobox.comboboxTokens.chipCloseIconColor, _Combobox.comboboxTokens.chipColor, _Combobox.comboboxTokens.chipBackground, _Combobox.comboboxTokens.chipColorHover, _Combobox.comboboxTokens.chipBackgroundHover, _Combobox.comboboxTokens.chipColorActive, _Combobox.comboboxTokens.chipBackgroundActive, _Combobox.comboboxTokens.chipBackgroundReadOnly, _Combobox.comboboxTokens.chipColorReadOnly, _Combobox.comboboxTokens.chipBackgroundReadOnlyHover, _Combobox.comboboxTokens.chipColorReadOnlyHover, _Combobox.comboboxTokens.chipOpacityReadonly, _Combobox.comboboxTokens.disabledOpacity, _Combobox.comboboxTokens.focusColor)
     }
   }
 };

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

@@ -71,7 +71,7 @@ const StoryDefault = ({
 
     return (
         <DatePicker
-            isOpen={isOpen}
+            opened={isOpen}
             size={size}
             valueError={valueError}
             valueSuccess={valueSuccess}
@@ -178,7 +178,7 @@ const StoryRange = ({
         <DatePickerRange
             size={size}
             ref={rangeRef}
-            isOpen={isOpen}
+            opened={isOpen}
             firstValueError={firstValueError}
             firstValueSuccess={firstValueSuccess}
             secondValueError={secondValueError}
@@ -289,7 +289,7 @@ const StoryDeferred = ({
             <h3>Асинхронная установка даты по умолчанию</h3>
             <DatePicker
                 defaultDate={defVal}
-                isOpen={isOpen}
+                opened={isOpen}
                 size={size}
                 valueError={valueError}
                 valueSuccess={valueSuccess}

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

@@ -153,7 +153,7 @@ const StoryDrawerDemo = ({
                     <StyledContentWrapper>
                         <Drawer
                             frame="theme-root"
-                            isOpen={isOpen}
+                            opened={isOpen}
                             offset={[offsetX, offsetY]}
                             onClose={() => setIsOpen(false)}
                             {...rest}

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js

@@ -19,7 +19,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.disclosureIconColor, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.disclosureIconColor, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

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

@@ -144,7 +144,7 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
                         frame="theme-root"
                         withAnimation
                         onClose={() => setIsOpenA(false)}
-                        isOpen={isOpenA}
+                        opened={isOpenA}
                         placement={placement}
                         offset={[offsetX, offsetY]}
                         {...rest}
@@ -158,7 +158,7 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
                                 id="modalB"
                                 frame="theme-root"
                                 onClose={() => setIsOpenB(false)}
-                                isOpen={isOpenB}
+                                opened={isOpenB}
                                 placement="left"
                                 offset={[offsetX, offsetY]}
                                 {...rest}
@@ -174,7 +174,7 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
                                         id="modalC"
                                         frame="theme-root"
                                         onClose={() => setIsOpenC(false)}
-                                        isOpen={isOpenC}
+                                        opened={isOpenC}
                                         placement="top"
                                         offset={[offsetX, offsetY]}
                                         {...rest}
@@ -289,7 +289,7 @@ const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: Story
                     frame="theme-root"
                     withAnimation
                     onClose={() => setIsOpen(false)}
-                    isOpen={isOpen}
+                    opened={isOpen}
                     placement={placement}
                     offset={[offsetX, offsetY]}
                     initialFocusRef={ref}

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

@@ -160,7 +160,7 @@ const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
         <NotificationsProvider>
             <PopupProvider>
                 <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
-                <Modal frame="theme-root" isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+                <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
                     <div>Hello!</div>
                     <Button view="primary" text="Add notification" onClick={handleClick} />
                 </Modal>

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

@@ -94,7 +94,7 @@ const StoryDefault = (args: StoryPopoverProps) => {
 
     return (
         <Popover
-            isOpen={isOpen}
+            opened={isOpen}
             onToggle={(is) => setIsOpen(is)}
             frame="theme-root"
             usePortal={false}

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

@@ -138,7 +138,7 @@ const StoryPopupDemo = ({ placement, offsetX, offsetY }: StoryPopupProps) => {
                         id="popupA"
                         frame={ref}
                         withAnimation
-                        isOpen={isOpenA}
+                        opened={isOpenA}
                         placement={placement}
                         offset={[offsetX, offsetY]}
                     >
@@ -154,7 +154,7 @@ const StoryPopupDemo = ({ placement, offsetX, offsetY }: StoryPopupProps) => {
                         id="popupB"
                         frame="theme-root"
                         withAnimation
-                        isOpen={isOpenB}
+                        opened={isOpenB}
                         placement={placement}
                         offset={[offsetX, offsetY]}
                     >

package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.config.js

@@ -13,9 +13,9 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
-      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
-      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
     },
     size: {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)

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

@@ -194,7 +194,7 @@ const StoryComplex = ({
         <NotificationsProvider>
             <PopupProvider>
                 <Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
-                <Modal frame="theme-root" isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+                <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
                     <div>Hello!</div>
                     <Button view="default" text="Add notification" onClick={handleShowNotification} />
                 </Modal>

package/styled-components/cjs/examples/plasma_b2c/components/Toolbar/Toolbar.config.js

@@ -13,7 +13,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--shadow-down-soft-s);", ":var(--surface-solid-card-brightness);", ":var(--surface-transparent-tertiary);"], _Toolbar.toolbarTokens.boxShadow, _Toolbar.toolbarTokens.background, _Toolbar.toolbarTokens.dividerColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--shadow-down-soft-s);", ":var(--surface-solid-card);", ":var(--surface-transparent-tertiary);"], _Toolbar.toolbarTokens.boxShadow, _Toolbar.toolbarTokens.background, _Toolbar.toolbarTokens.dividerColor)
     },
     size: {
       xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.25rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":0.0625rem;"], _Toolbar.toolbarTokens.size, _Toolbar.toolbarTokens.padding, _Toolbar.toolbarTokens.borderRadius, _Toolbar.toolbarTokens.dividerSize, _Toolbar.toolbarTokens.dividerOffset, _Toolbar.toolbarTokens.dividerBorderRadius),

package/styled-components/cjs/examples/plasma_b2c/components/Tooltip/Tooltip.config.js

@@ -17,7 +17,7 @@ var config = exports.config = {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.6875rem;", ":0.875rem;", ":0.6875rem;", ":0.875rem;", ":2.5rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":1.25rem;", ":1.25rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==\");", ":0.5rem;", ":0.625rem;", ":var(--surface-solid-card);"], _Tooltip.tooltipTokens.paddingTop, _Tooltip.tooltipTokens.paddingRight, _Tooltip.tooltipTokens.paddingBottom, _Tooltip.tooltipTokens.paddingLeft, _Tooltip.tooltipTokens.minHeight, _Tooltip.tooltipTokens.borderRadius, _Tooltip.tooltipTokens.textFontFamily, _Tooltip.tooltipTokens.textFontSize, _Tooltip.tooltipTokens.textFontStyle, _Tooltip.tooltipTokens.textFontWeight, _Tooltip.tooltipTokens.textFontLetterSpacing, _Tooltip.tooltipTokens.textFontLineHeight, _Tooltip.tooltipTokens.contentLeftMargin, _Tooltip.tooltipTokens.arrowMaskWidth, _Tooltip.tooltipTokens.arrowMaskHeight, _Tooltip.tooltipTokens.arrowMaskImage, _Tooltip.tooltipTokens.arrowHeight, _Tooltip.tooltipTokens.arrowEdgeMargin, _Tooltip.tooltipTokens.arrowBackground)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-hard-s);", ":var(--text-primary);"], _Tooltip.tooltipTokens.backgroundColor, _Tooltip.tooltipTokens.boxShadow, _Tooltip.tooltipTokens.color)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card);", ":var(--shadow-down-hard-s);", ":var(--text-primary);"], _Tooltip.tooltipTokens.backgroundColor, _Tooltip.tooltipTokens.boxShadow, _Tooltip.tooltipTokens.color)
     }
   }
 };

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

@@ -57,7 +57,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                         target={<Button>Btn</Button>}
                         placement="left"
                         size={size}
-                        isOpen
+                        opened
                         hasArrow
                         text="left"
                         frame="theme-root"
@@ -65,7 +65,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 }
                 placement="top-start"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="top-start"
                 frame="theme-root"
@@ -74,7 +74,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 target={<Button>Btn</Button>}
                 placement="top"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="top"
                 frame="theme-root"
@@ -85,7 +85,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                         target={<Button>Btn</Button>}
                         placement="right"
                         size={size}
-                        isOpen
+                        opened
                         hasArrow
                         text="right"
                         frame="theme-root"
@@ -93,7 +93,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 }
                 placement="top-end"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="top-end"
                 frame="theme-root"
@@ -102,7 +102,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 target={<Button>Btn</Button>}
                 placement="bottom-start"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="bottom-start"
                 frame="theme-root"
@@ -111,7 +111,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 target={<Button>Btn</Button>}
                 placement="bottom"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="bottom"
                 frame="theme-root"
@@ -120,7 +120,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 target={<Button>Btn</Button>}
                 placement="bottom-end"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="bottom-end"
                 frame="theme-root"
@@ -170,7 +170,7 @@ const StoryLive = (args: TooltipProps) => {
                     {...args}
                     id="example-tooltip-firstname"
                     text={text}
-                    isOpen
+                    opened
                     frame="theme-root"
                 />
             </StyledRow>