@salutejs/plasma-new-hope 0.94.0-canary.1253.9693605980.0 → 0.94.0-canary.1272.9712079341.0

package/es/components/Popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","sources":["../../../src/components/Popup/Popup.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines/types';\nimport { cx } from '../../utils';\n\nimport type { PopupPlacementBasic, PopupPlacement, PopupPositionType, PopupProps } from './Popup.types';\nimport { POPUP_PORTAL_ID } from './PopupContext';\nimport { PopupRoot } from './PopupRoot';\nimport { usePopup } from './hooks';\nimport { classes } from './Popup.tokens';\n\nexport const handlePosition = (\n    placement: PopupPlacement,\n    offset: [number, number] | [string, string],\n): PopupPositionType => {\n    let x = '0rem';\n    let y = '0rem';\n\n    if (offset) {\n        const [_x, _y] = offset;\n        x = typeof _x === 'number' ? `${_x}rem` : _x;\n        y = typeof _y === 'number' ? `${_y}rem` : _y;\n    }\n\n    if (!placement || placement === 'center') {\n        return {\n            left: `calc(50% + ${x})`,\n            top: `calc(50% - ${y})`,\n            transform: 'translate(-50%, -50%)',\n        };\n    }\n\n    let left;\n    let right;\n    let top;\n    let bottom;\n    let transform;\n    const placements = placement.split('-') as PopupPlacementBasic[];\n\n    placements.forEach((placement: PopupPlacementBasic) => {\n        switch (placement) {\n            case 'left':\n                left = x;\n                break;\n            case 'right':\n                right = x;\n                break;\n            case 'top':\n                top = y;\n                break;\n            case 'bottom':\n                bottom = y;\n                break;\n            default:\n                break;\n        }\n    });\n\n    const isCenteredX = left === undefined && right === undefined;\n    const isCenteredY = top === undefined && bottom === undefined;\n\n    if (isCenteredX) {\n        transform = 'translateX(-50%)';\n    }\n\n    if (isCenteredY) {\n        transform = 'translateY(-50%)';\n    }\n\n    return {\n        left: isCenteredX ? `calc(50% + ${x})` : left,\n        right,\n        top: isCenteredY ? `calc(50% - ${y})` : top,\n        bottom,\n        transform,\n    };\n};\n\n/**\n * Базовый копмонент Popup.\n */\nexport const popupRoot = (Root: RootProps<HTMLDivElement, PopupProps>) =>\n    forwardRef<HTMLDivElement, PopupProps>(\n        (\n            {\n                id,\n                isOpen = false,\n                placement = 'center',\n                offset = [0, 0],\n                frame = 'document',\n                children,\n                overlay,\n                role,\n                zIndex,\n                popupInfo,\n                withAnimation = false,\n                className,\n                ...rest\n            },\n            outerRootRef,\n        ) => {\n            const uniqId = safeUseId();\n            const innerId = id || uniqId;\n\n            const { isVisible, animationInfo, setVisible } = usePopup({\n                isOpen,\n                id: innerId,\n                popupInfo,\n                withAnimation,\n            });\n\n            const portalRef = useRef<HTMLElement | null>(null);\n            const contentRef = useRef<HTMLDivElement | null>(null);\n\n            const innerRef = useForkRef<HTMLDivElement>(contentRef, outerRootRef);\n\n            const [, forceRender] = useState(false);\n\n            useEffect(() => {\n                let portal = document.getElementById(POPUP_PORTAL_ID);\n\n                if (typeof frame !== 'string' && frame && frame.current) {\n                    portal = frame.current;\n                }\n\n                if (!portal) {\n                    portal = document.createElement('div');\n                    portal.setAttribute('id', POPUP_PORTAL_ID);\n                    /**\n                     * Нужно для того, чтобы во фрейме не происходило скачков контента\n                     * при анимации через transform, если есть элемент с шириной/высотой в 100% (Overlay)\n                     */\n                    portal.style.width = '0';\n\n                    if (typeof frame === 'string' && frame !== 'document') {\n                        document.getElementById(frame)?.appendChild(portal);\n                    } else {\n                        document.body.appendChild(portal);\n                    }\n                }\n\n                portalRef.current = portal;\n\n                /**\n                 * Изменение стейта нужно для того, чтобы Popup\n                 * отобразился после записи DOM элемента в portalRef.current\n                 */\n                forceRender(true);\n            }, []);\n\n            if (!isVisible && !isOpen) {\n                return null;\n            }\n\n            const cls = cx(\n                className,\n                animationInfo?.endAnimation ? classes.endAnimation : '',\n                animationInfo?.endTransition ? classes.endTransition : '',\n            );\n\n            return (\n                <>\n                    {portalRef.current &&\n                        ReactDOM.createPortal(\n                            <Root className={cls} {...rest}>\n                                {overlay}\n                                <PopupRoot\n                                    id={innerId}\n                                    ref={innerRef}\n                                    position={handlePosition(placement, offset)}\n                                    frame={frame}\n                                    zIndex={zIndex}\n                                    animationInfo={animationInfo}\n                                    setVisible={setVisible}\n                                >\n                                    {children}\n                                </PopupRoot>\n                            </Root>,\n                            portalRef.current,\n                        )}\n                </>\n            );\n        },\n    );\n\nexport const popupConfig = {\n    name: 'Popup',\n    tag: 'div',\n    layout: popupRoot,\n    base: '',\n    variations: {},\n    defaults: {},\n};\n"],"names":["handlePosition","placement","offset","x","y","_offset","_slicedToArray","_x","_y","concat","left","top","transform","right","bottom","placements","split","forEach","isCenteredX","undefined","isCenteredY","popupRoot","Root","forwardRef","_ref","outerRootRef","id","_ref$isOpen","isOpen","_ref$placement","_ref$offset","_ref$frame","frame","children","overlay","zIndex","popupInfo","_ref$withAnimation","withAnimation","className","rest","_objectWithoutProperties","_excluded","uniqId","safeUseId","innerId","_usePopup","usePopup","isVisible","animationInfo","setVisible","portalRef","useRef","contentRef","innerRef","useForkRef","_useState","useState","_useState2","forceRender","useEffect","portal","document","getElementById","POPUP_PORTAL_ID","current","createElement","setAttribute","style","width","_document$getElementB","appendChild","body","cls","cx","endAnimation","classes","endTransition","React","Fragment","ReactDOM","createPortal","_extends","PopupRoot","ref","position","popupConfig","name","tag","layout","base","variations","defaults"],"mappings":"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"}
+{"version":3,"file":"Popup.js","sources":["../../../src/components/Popup/Popup.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines/types';\nimport { cx } from '../../utils';\nimport { portalConfig } from '../Portal';\nimport { component, mergeConfig } from '../../engines';\n\nimport type { PopupPlacementBasic, PopupPlacement, PopupPositionType, PopupProps } from './Popup.types';\nimport { POPUP_PORTAL_ID } from './PopupContext';\nimport { PopupRoot } from './PopupRoot';\nimport { usePopup } from './hooks';\nimport { classes } from './Popup.tokens';\n\nexport const handlePosition = (\n    placement: PopupPlacement,\n    offset: [number, number] | [string, string],\n): PopupPositionType => {\n    let x = '0rem';\n    let y = '0rem';\n\n    if (offset) {\n        const [_x, _y] = offset;\n        x = typeof _x === 'number' ? `${_x}rem` : _x;\n        y = typeof _y === 'number' ? `${_y}rem` : _y;\n    }\n\n    if (!placement || placement === 'center') {\n        return {\n            left: `calc(50% + ${x})`,\n            top: `calc(50% - ${y})`,\n            transform: 'translate(-50%, -50%)',\n        };\n    }\n\n    let left;\n    let right;\n    let top;\n    let bottom;\n    let transform;\n    const placements = placement.split('-') as PopupPlacementBasic[];\n\n    placements.forEach((placement: PopupPlacementBasic) => {\n        switch (placement) {\n            case 'left':\n                left = x;\n                break;\n            case 'right':\n                right = x;\n                break;\n            case 'top':\n                top = y;\n                break;\n            case 'bottom':\n                bottom = y;\n                break;\n            default:\n                break;\n        }\n    });\n\n    const isCenteredX = left === undefined && right === undefined;\n    const isCenteredY = top === undefined && bottom === undefined;\n\n    if (isCenteredX) {\n        transform = 'translateX(-50%)';\n    }\n\n    if (isCenteredY) {\n        transform = 'translateY(-50%)';\n    }\n\n    return {\n        left: isCenteredX ? `calc(50% + ${x})` : left,\n        right,\n        top: isCenteredY ? `calc(50% - ${y})` : top,\n        bottom,\n        transform,\n    };\n};\n\nconst mergedPortalConfig = mergeConfig(portalConfig);\nconst Portal = component(mergedPortalConfig);\n\n/**\n * Базовый копмонент Popup.\n */\nexport const popupRoot = (Root: RootProps<HTMLDivElement, PopupProps>) =>\n    forwardRef<HTMLDivElement, PopupProps>(\n        (\n            {\n                id,\n                isOpen = false,\n                placement = 'center',\n                offset = [0, 0],\n                frame = 'document',\n                children,\n                overlay,\n                role,\n                zIndex,\n                popupInfo,\n                withAnimation = false,\n                className,\n                ...rest\n            },\n            outerRootRef,\n        ) => {\n            const uniqId = safeUseId();\n            const innerId = id || uniqId;\n\n            const { isVisible, animationInfo, setVisible } = usePopup({\n                isOpen,\n                id: innerId,\n                popupInfo,\n                withAnimation,\n            });\n\n            const portalRef = useRef<HTMLElement | null>(null);\n            const contentRef = useRef<HTMLDivElement | null>(null);\n\n            const innerRef = useForkRef<HTMLDivElement>(contentRef, outerRootRef);\n\n            const [, forceRender] = useState(false);\n\n            useEffect(() => {\n                let portal = document.getElementById(POPUP_PORTAL_ID);\n\n                if (typeof frame !== 'string' && frame && frame.current) {\n                    portal = frame.current;\n                }\n\n                if (!portal) {\n                    portal = document.createElement('div');\n                    portal.setAttribute('id', POPUP_PORTAL_ID);\n                    /**\n                     * Нужно для того, чтобы во фрейме не происходило скачков контента\n                     * при анимации через transform, если есть элемент с шириной/высотой в 100% (Overlay)\n                     */\n                    portal.style.width = '0';\n\n                    if (typeof frame === 'string' && frame !== 'document') {\n                        document.getElementById(frame)?.appendChild(portal);\n                    } else {\n                        document.body.appendChild(portal);\n                    }\n                }\n\n                portalRef.current = portal;\n\n                /**\n                 * Изменение стейта нужно для того, чтобы Popup\n                 * отобразился после записи DOM элемента в portalRef.current\n                 */\n                forceRender(true);\n            }, []);\n\n            if (!isVisible && !isOpen) {\n                return null;\n            }\n\n            const cls = cx(\n                className,\n                animationInfo?.endAnimation ? classes.endAnimation : '',\n                animationInfo?.endTransition ? classes.endTransition : '',\n            );\n\n            return (\n                <>\n                    {portalRef.current && (\n                        <Portal container={portalRef.current}>\n                            <Root className={cls} {...rest}>\n                                {overlay}\n                                <PopupRoot\n                                    id={innerId}\n                                    ref={innerRef}\n                                    position={handlePosition(placement, offset)}\n                                    frame={frame}\n                                    zIndex={zIndex}\n                                    animationInfo={animationInfo}\n                                    setVisible={setVisible}\n                                >\n                                    {children}\n                                </PopupRoot>\n                            </Root>\n                        </Portal>\n                    )}\n                </>\n            );\n        },\n    );\n\nexport const popupConfig = {\n    name: 'Popup',\n    tag: 'div',\n    layout: popupRoot,\n    base: '',\n    variations: {},\n    defaults: {},\n};\n"],"names":["handlePosition","placement","offset","x","y","_offset","_slicedToArray","_x","_y","concat","left","top","transform","right","bottom","placements","split","forEach","isCenteredX","undefined","isCenteredY","mergedPortalConfig","mergeConfig","portalConfig","Portal","component","popupRoot","Root","forwardRef","_ref","outerRootRef","id","_ref$isOpen","isOpen","_ref$placement","_ref$offset","_ref$frame","frame","children","overlay","zIndex","popupInfo","_ref$withAnimation","withAnimation","className","rest","_objectWithoutProperties","_excluded","uniqId","safeUseId","innerId","_usePopup","usePopup","isVisible","animationInfo","setVisible","portalRef","useRef","contentRef","innerRef","useForkRef","_useState","useState","_useState2","forceRender","useEffect","portal","document","getElementById","POPUP_PORTAL_ID","current","createElement","setAttribute","style","width","_document$getElementB","appendChild","body","cls","cx","endAnimation","classes","endTransition","React","Fragment","container","_extends","PopupRoot","ref","position","popupConfig","name","tag","layout","base","variations","defaults"],"mappings":"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"}

package/es/components/Portal/Portal.js

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import ReactDOM from 'react-dom';
+
+/*
+ * Вспомогательный компонент. Используется в Popup, Popover.
+ * Представляет собой ReactDOM.createPortal() в форме компонента.
+ */
+var portalRoot = function portalRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
+    var children = _ref.children,
+      container = _ref.container,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    var portalContainer = typeof container === 'function' ? container() : container;
+    return /*#__PURE__*/React.createElement(Root, {
+      container: container,
+      disabled: disabled,
+      ref: outerRootRef
+    }, disabled && children, !disabled && /*#__PURE__*/ReactDOM.createPortal(children, portalContainer));
+  });
+};
+var portalConfig = {
+  name: 'Portal',
+  tag: 'div',
+  layout: portalRoot,
+  base: '',
+  variations: {},
+  defaults: {}
+};
+
+export { portalConfig, portalRoot };
+//# sourceMappingURL=Portal.js.map

package/es/components/Portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport type { RootProps } from '../../engines/types';\n\nimport { PortalProps } from './Portal.types';\n\n/*\n * Вспомогательный компонент. Используется в Popup, Popover.\n * Представляет собой ReactDOM.createPortal() в форме компонента.\n */\nexport const portalRoot = (Root: RootProps<HTMLDivElement, PortalProps>) =>\n    forwardRef<HTMLDivElement, PortalProps>(({ children, container, disabled = false }, outerRootRef) => {\n        const portalContainer = typeof container === 'function' ? container() : container;\n\n        return (\n            <Root container={container} disabled={disabled} ref={outerRootRef}>\n                {disabled && children}\n                {!disabled && ReactDOM.createPortal(children, portalContainer)}\n            </Root>\n        );\n    });\n\nexport const portalConfig = {\n    name: 'Portal',\n    tag: 'div',\n    layout: portalRoot,\n    base: '',\n    variations: {},\n    defaults: {},\n};\n"],"names":["portalRoot","Root","forwardRef","_ref","outerRootRef","children","container","_ref$disabled","disabled","portalContainer","React","createElement","ref","ReactDOM","createPortal","portalConfig","name","tag","layout","base","variations","defaults"],"mappings":";;;AAOA;AACA;AACA;AACA;IACaA,UAAU,GAAG,SAAbA,UAAUA,CAAIC,IAA4C,EAAA;AAAA,EAAA,oBACnEC,UAAU,CAA8B,UAAAC,IAAA,EAA4CC,YAAY,EAAK;AAAA,IAAA,IAA1DC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;MAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;MAAAC,aAAA,GAAAJ,IAAA,CAAEK,QAAQ;AAARA,MAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,aAAA,CAAA;IAC5E,IAAME,eAAe,GAAG,OAAOH,SAAS,KAAK,UAAU,GAAGA,SAAS,EAAE,GAAGA,SAAS,CAAA;AAEjF,IAAA,oBACII,KAAA,CAAAC,aAAA,CAACV,IAAI,EAAA;AAACK,MAAAA,SAAS,EAAEA,SAAU;AAACE,MAAAA,QAAQ,EAAEA,QAAS;AAACI,MAAAA,GAAG,EAAER,YAAAA;AAAa,KAAA,EAC7DI,QAAQ,IAAIH,QAAQ,EACpB,CAACG,QAAQ,iBAAIK,QAAQ,CAACC,YAAY,CAACT,QAAQ,EAAEI,eAAe,CAC3D,CAAC,CAAA;AAEf,GAAC,CAAC,CAAA;AAAA,EAAA;AAEC,IAAMM,YAAY,GAAG;AACxBC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAElB,UAAU;AAClBmB,EAAAA,IAAI,EAAE,EAAE;EACRC,UAAU,EAAE,EAAE;AACdC,EAAAA,QAAQ,EAAE,EAAC;AACf;;;;"}

package/es/components/Range/Range.css

@@ -18,13 +18,13 @@
 
 .base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_iq39zt5__3851a304{color:var(--plasma-textfield-color-readonly);background-color:var(--plasma-textfield-bg-color-readonly);box-shadow:inset 0 0 0 var(--plasmas-textfield-border-width) var(--plasma-textfield-border-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_iq39zt5__3851a304:hover{background-color:var(--plasma-textfield-bg-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::-webkit-input-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::-moz-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304:-ms-input-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304{color:var(--plasma-textfield-color-readonly);cursor:default;min-width:unset;}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_llv9av6__3851a304{color:var(--plasma-textfield__left-helper-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_l13qvwoy__3851a304{color:var(--plasma-textfield__label-color-readonly);}
 
-.TextField_styles_9fkr1l_iq39zt5__db7f1e30{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
-.TextField_styles_9fkr1l_i1j28rg8__db7f1e30{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_9fkr1l_i1j28rg8__db7f1e30::-webkit-scrollbar{display:none;}.TextField_styles_9fkr1l_i1j28rg8__db7f1e30.TextField_styles_9fkr1l_hasChips__db7f1e30{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
-.TextField_styles_9fkr1l_s13zudoe__db7f1e30{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
-.TextField_styles_9fkr1l_io4bpie__db7f1e30{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
+.TextField_styles_aqmut_iq39zt5__4a8fddcd{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
+.TextField_styles_aqmut_i1j28rg8__4a8fddcd{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_aqmut_i1j28rg8__4a8fddcd::-webkit-scrollbar{display:none;}.TextField_styles_aqmut_i1j28rg8__4a8fddcd.TextField_styles_aqmut_hasChips__4a8fddcd{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
+.TextField_styles_aqmut_s13zudoe__4a8fddcd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+.TextField_styles_aqmut_io4bpie__4a8fddcd{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
 
-.TextField_styles_9fkr1l_s19ry60d__db7f1e30{margin:var(--plasma-textfield__left-content-margin);line-height:0;}
-.TextField_styles_9fkr1l_sbt1ohz__db7f1e30{margin:var(--plasma-textfield__right-content-margin);line-height:0;}
+.TextField_styles_aqmut_s19ry60d__4a8fddcd{margin:var(--plasma-textfield__left-content-margin);}
+.TextField_styles_aqmut_sbt1ohz__4a8fddcd{margin:var(--plasma-textfield__right-content-margin);}
 
 
 

package/es/components/Select/Select.js

@@ -11,8 +11,8 @@ import { base as base$2 } from './variations/_size/base.js';
 import '@linaria/react';
 import '@linaria/core';
 import 'focus-visible';
-import 'react-dom';
 import 'react-popper';
+import 'react-dom';
 import 'styled-components';
 import { classes } from './Select.tokens.js';
 import { SelectTarget } from './ui/SelectTarget/SelectTarget.js';

package/es/components/Select/ui/SelectDivider/SelectDivider.js

@@ -5,8 +5,8 @@ import '@salutejs/plasma-core';
 import '@linaria/react';
 import '@linaria/core';
 import 'focus-visible';
-import 'react-dom';
 import 'react-popper';
+import 'react-dom';
 import 'styled-components';
 import { base as base$1 } from './variations/_view/base.js';
 import { base as base$2 } from './variations/_size/base.js';

package/es/components/Select/ui/SelectFooter/SelectFooter.js

@@ -5,8 +5,8 @@ import '@linaria/react';
 import { dropdownFooterRoot } from '../../../Dropdown/ui/DropdownFooter/DropdownFooter.js';
 import '@linaria/core';
 import 'focus-visible';
-import 'react-dom';
 import 'react-popper';
+import 'react-dom';
 import 'styled-components';
 import { base as base$1 } from './variations/_view/base.js';
 import { base as base$2 } from './variations/_size/base.js';

package/es/components/Select/ui/SelectGroup/SelectGroup.js

@@ -5,8 +5,8 @@ import '@linaria/react';
 import { dropdownGroupRoot } from '../../../Dropdown/ui/DropdownGroup/DropdownGroup.js';
 import '@linaria/core';
 import 'focus-visible';
-import 'react-dom';
 import 'react-popper';
+import 'react-dom';
 import 'styled-components';
 import { base as base$1 } from './variations/_view/base.js';
 import { base as base$2 } from './variations/_size/base.js';

package/es/components/Select/ui/SelectHeader/SelectHeader.js

@@ -5,8 +5,8 @@ import '@linaria/react';
 import { dropdownHeaderRoot } from '../../../Dropdown/ui/DropdownHeader/DropdownHeader.js';
 import '@linaria/core';
 import 'focus-visible';
-import 'react-dom';
 import 'react-popper';
+import 'react-dom';
 import 'styled-components';
 import { base as base$1 } from './variations/_view/base.js';
 import { base as base$2 } from './variations/_size/base.js';

package/es/components/Select/ui/SelectItem/SelectItem.js

@@ -4,8 +4,8 @@ import '@salutejs/plasma-core';
 import '@linaria/react';
 import '@linaria/core';
 import 'focus-visible';
-import 'react-dom';
 import 'react-popper';
+import 'react-dom';
 import { dropdownItemOldRoot } from '../../../Dropdown/ui/DropdownItemOld/DropdownItemOld.js';
 import { base as base$1 } from './variations/_view/base.js';
 import { base as base$2 } from './variations/_size/base.js';

package/es/components/Select/ui/SelectItem/SelectItem.styles.js

@@ -5,8 +5,8 @@ import '@salutejs/plasma-core';
 import '@linaria/react';
 import '@linaria/core';
 import 'focus-visible';
-import 'react-dom';
 import 'react-popper';
+import 'react-dom';
 import 'styled-components';
 
 var base = "bhy25de";

package/es/components/Slider/Slider.css

@@ -27,13 +27,13 @@
 
 .base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_iq39zt5__3851a304{color:var(--plasma-textfield-color-readonly);background-color:var(--plasma-textfield-bg-color-readonly);box-shadow:inset 0 0 0 var(--plasmas-textfield-border-width) var(--plasma-textfield-border-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_iq39zt5__3851a304:hover{background-color:var(--plasma-textfield-bg-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::-webkit-input-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::-moz-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304:-ms-input-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304{color:var(--plasma-textfield-color-readonly);cursor:default;min-width:unset;}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_llv9av6__3851a304{color:var(--plasma-textfield__left-helper-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_l13qvwoy__3851a304{color:var(--plasma-textfield__label-color-readonly);}
 
-.TextField_styles_9fkr1l_iq39zt5__db7f1e30{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
-.TextField_styles_9fkr1l_i1j28rg8__db7f1e30{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_9fkr1l_i1j28rg8__db7f1e30::-webkit-scrollbar{display:none;}.TextField_styles_9fkr1l_i1j28rg8__db7f1e30.TextField_styles_9fkr1l_hasChips__db7f1e30{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
-.TextField_styles_9fkr1l_s13zudoe__db7f1e30{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
-.TextField_styles_9fkr1l_io4bpie__db7f1e30{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
+.TextField_styles_aqmut_iq39zt5__4a8fddcd{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
+.TextField_styles_aqmut_i1j28rg8__4a8fddcd{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_aqmut_i1j28rg8__4a8fddcd::-webkit-scrollbar{display:none;}.TextField_styles_aqmut_i1j28rg8__4a8fddcd.TextField_styles_aqmut_hasChips__4a8fddcd{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
+.TextField_styles_aqmut_s13zudoe__4a8fddcd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+.TextField_styles_aqmut_io4bpie__4a8fddcd{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
 
-.TextField_styles_9fkr1l_s19ry60d__db7f1e30{margin:var(--plasma-textfield__left-content-margin);line-height:0;}
-.TextField_styles_9fkr1l_sbt1ohz__db7f1e30{margin:var(--plasma-textfield__right-content-margin);line-height:0;}
+.TextField_styles_aqmut_s19ry60d__4a8fddcd{margin:var(--plasma-textfield__left-content-margin);}
+.TextField_styles_aqmut_sbt1ohz__4a8fddcd{margin:var(--plasma-textfield__right-content-margin);}
 
 
 

package/es/components/Slider/components/Double/Double.css

@@ -20,13 +20,13 @@
 
 .base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_iq39zt5__3851a304{color:var(--plasma-textfield-color-readonly);background-color:var(--plasma-textfield-bg-color-readonly);box-shadow:inset 0 0 0 var(--plasmas-textfield-border-width) var(--plasma-textfield-border-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_iq39zt5__3851a304:hover{background-color:var(--plasma-textfield-bg-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::-webkit-input-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::-moz-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304:-ms-input-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304{color:var(--plasma-textfield-color-readonly);cursor:default;min-width:unset;}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_llv9av6__3851a304{color:var(--plasma-textfield__left-helper-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_l13qvwoy__3851a304{color:var(--plasma-textfield__label-color-readonly);}
 
-.TextField_styles_9fkr1l_iq39zt5__db7f1e30{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
-.TextField_styles_9fkr1l_i1j28rg8__db7f1e30{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_9fkr1l_i1j28rg8__db7f1e30::-webkit-scrollbar{display:none;}.TextField_styles_9fkr1l_i1j28rg8__db7f1e30.TextField_styles_9fkr1l_hasChips__db7f1e30{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
-.TextField_styles_9fkr1l_s13zudoe__db7f1e30{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
-.TextField_styles_9fkr1l_io4bpie__db7f1e30{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
+.TextField_styles_aqmut_iq39zt5__4a8fddcd{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
+.TextField_styles_aqmut_i1j28rg8__4a8fddcd{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_aqmut_i1j28rg8__4a8fddcd::-webkit-scrollbar{display:none;}.TextField_styles_aqmut_i1j28rg8__4a8fddcd.TextField_styles_aqmut_hasChips__4a8fddcd{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
+.TextField_styles_aqmut_s13zudoe__4a8fddcd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+.TextField_styles_aqmut_io4bpie__4a8fddcd{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
 
-.TextField_styles_9fkr1l_s19ry60d__db7f1e30{margin:var(--plasma-textfield__left-content-margin);line-height:0;}
-.TextField_styles_9fkr1l_sbt1ohz__db7f1e30{margin:var(--plasma-textfield__right-content-margin);line-height:0;}
+.TextField_styles_aqmut_s19ry60d__4a8fddcd{margin:var(--plasma-textfield__left-content-margin);}
+.TextField_styles_aqmut_sbt1ohz__4a8fddcd{margin:var(--plasma-textfield__right-content-margin);}
 
 
 

package/es/components/TextField/TextField.styles.js

@@ -1,4 +1,4 @@
-import './TextField.styles_9fkr1l.css';
+import './TextField.styles_aqmut.css';
 import { styled } from '@linaria/react';
 
 var InputWrapper = /*#__PURE__*/styled('div')({

package/es/components/TextField/TextField.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.styles.js","sources":["../../../src/components/TextField/TextField.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { classes, tokens } from './TextField.tokens';\n\nexport const InputWrapper = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n`;\n\nexport const InputLabelWrapper = styled.div`\n    flex: 1;\n    overflow: scroll;\n    position: relative;\n    width: 100%;\n    display: inline-flex;\n    align-items: center;\n\n    ::-webkit-scrollbar {\n        display: none;\n    }\n\n    scrollbar-width: none;\n\n    overscroll-behavior: contain;\n\n    &.${String(classes.hasChips)} {\n        height: var(${tokens.chipHeight});\n        border-radius: var(${tokens.chipBorderRadius});\n    }\n`;\n\nexport const StyledChips = styled.div`\n    display: flex;\n    gap: var(${tokens.chipGap});\n    margin-right: var(${tokens.chipGap});\n    user-select: none;\n`;\n\nexport const Input = styled.input`\n    box-sizing: border-box;\n    appearance: none;\n    border: 0;\n    padding: 0;\n    background-color: transparent;\n    outline: none;\n    flex: 1;\n    min-width: 60%;\n`;\n\nexport const Label = styled.label``;\n\nexport const StyledContentLeft = styled.div`\n    margin: var(${tokens.leftContentMargin});\n    line-height: 0;\n`;\n\nexport const StyledContentRight = styled.div`\n    margin: var(${tokens.rightContentMargin});\n    line-height: 0;\n`;\n\nexport const LeftHelper = styled.div``;\n\nexport const StyledTextBefore = styled.div``;\n\nexport const StyledTextAfter = styled.div``;\n"],"names":["InputWrapper","styled","name","class","propsAsIs","InputLabelWrapper","StyledChips","Input","Label","StyledContentLeft","StyledContentRight","LeftHelper","StyledTextBefore","StyledTextAfter"],"mappings":";;AAIO,IAAMA,YAAY,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKjC,EAAA;AAEM,IAAMC,iBAAiB,gBAAGJ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAoBtC,EAAA;AAEM,IAAME,WAAW,gBAAGL,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKhC,EAAA;AAEM,IAAMG,KAAK,gBAAGN,MAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAS1B,EAAA;AAEM,IAAMI,KAAK,gBAAGP,MAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAQ,EAAA;AAE5B,IAAMK,iBAAiB,gBAAGR,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGtC,EAAA;AAEM,IAAMM,kBAAkB,gBAAGT,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,oBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGvC,EAAA;AAEM,IAAMO,UAAU,gBAAGV,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM,EAAA;AAE/B,IAAMQ,gBAAgB,gBAAGX,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM,EAAA;AAErC,IAAMS,eAAe,gBAAGZ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM;;;;"}
+{"version":3,"file":"TextField.styles.js","sources":["../../../src/components/TextField/TextField.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { classes, tokens } from './TextField.tokens';\n\nexport const InputWrapper = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n`;\n\nexport const InputLabelWrapper = styled.div`\n    flex: 1;\n    overflow: scroll;\n    position: relative;\n    width: 100%;\n    display: inline-flex;\n    align-items: center;\n\n    ::-webkit-scrollbar {\n        display: none;\n    }\n\n    scrollbar-width: none;\n\n    overscroll-behavior: contain;\n\n    &.${String(classes.hasChips)} {\n        height: var(${tokens.chipHeight});\n        border-radius: var(${tokens.chipBorderRadius});\n    }\n`;\n\nexport const StyledChips = styled.div`\n    display: flex;\n    gap: var(${tokens.chipGap});\n    margin-right: var(${tokens.chipGap});\n    user-select: none;\n`;\n\nexport const Input = styled.input`\n    box-sizing: border-box;\n    appearance: none;\n    border: 0;\n    padding: 0;\n    background-color: transparent;\n    outline: none;\n    flex: 1;\n    min-width: 60%;\n`;\n\nexport const Label = styled.label``;\n\nexport const StyledContentLeft = styled.div`\n    margin: var(${tokens.leftContentMargin});\n`;\n\nexport const StyledContentRight = styled.div`\n    margin: var(${tokens.rightContentMargin});\n`;\n\nexport const LeftHelper = styled.div``;\n\nexport const StyledTextBefore = styled.div``;\n\nexport const StyledTextAfter = styled.div``;\n"],"names":["InputWrapper","styled","name","class","propsAsIs","InputLabelWrapper","StyledChips","Input","Label","StyledContentLeft","StyledContentRight","LeftHelper","StyledTextBefore","StyledTextAfter"],"mappings":";;AAIO,IAAMA,YAAY,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKjC,EAAA;AAEM,IAAMC,iBAAiB,gBAAGJ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAoBtC,EAAA;AAEM,IAAME,WAAW,gBAAGL,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKhC,EAAA;AAEM,IAAMG,KAAK,gBAAGN,MAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAS1B,EAAA;AAEM,IAAMI,KAAK,gBAAGP,MAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAQ,EAAA;AAE5B,IAAMK,iBAAiB,gBAAGR,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEtC,EAAA;AAEM,IAAMM,kBAAkB,gBAAGT,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,oBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEvC,EAAA;AAEM,IAAMO,UAAU,gBAAGV,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM,EAAA;AAE/B,IAAMQ,gBAAgB,gBAAGX,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM,EAAA;AAErC,IAAMS,eAAe,gBAAGZ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM;;;;"}

package/es/components/TextField/{TextField.styles_9fkr1l.css → TextField.styles_aqmut.css}

@@ -3,8 +3,8 @@
 .s13zudoe{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
 .io4bpie{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
 
-.s19ry60d{margin:var(--plasma-textfield__left-content-margin);line-height:0;}
-.sbt1ohz{margin:var(--plasma-textfield__right-content-margin);line-height:0;}
+.s19ry60d{margin:var(--plasma-textfield__left-content-margin);}
+.sbt1ohz{margin:var(--plasma-textfield__right-content-margin);}
 
 
 

package/es/index.css

@@ -128,13 +128,13 @@
 
 .base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_iq39zt5__3851a304{color:var(--plasma-textfield-color-readonly);background-color:var(--plasma-textfield-bg-color-readonly);box-shadow:inset 0 0 0 var(--plasmas-textfield-border-width) var(--plasma-textfield-border-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_iq39zt5__3851a304:hover{background-color:var(--plasma-textfield-bg-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::-webkit-input-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::-moz-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304:-ms-input-placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304::placeholder{color:var(--plasma-textfield__placeholder-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_io4bpie__3851a304{color:var(--plasma-textfield-color-readonly);cursor:default;min-width:unset;}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_llv9av6__3851a304{color:var(--plasma-textfield__left-helper-color-readonly);}.base_134hshp_b1w985rt__3851a304[readonly] .base_134hshp_l13qvwoy__3851a304{color:var(--plasma-textfield__label-color-readonly);}
 
-.TextField_styles_9fkr1l_iq39zt5__db7f1e30{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
-.TextField_styles_9fkr1l_i1j28rg8__db7f1e30{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_9fkr1l_i1j28rg8__db7f1e30::-webkit-scrollbar{display:none;}.TextField_styles_9fkr1l_i1j28rg8__db7f1e30.TextField_styles_9fkr1l_hasChips__db7f1e30{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
-.TextField_styles_9fkr1l_s13zudoe__db7f1e30{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
-.TextField_styles_9fkr1l_io4bpie__db7f1e30{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
+.TextField_styles_aqmut_iq39zt5__4a8fddcd{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
+.TextField_styles_aqmut_i1j28rg8__4a8fddcd{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_aqmut_i1j28rg8__4a8fddcd::-webkit-scrollbar{display:none;}.TextField_styles_aqmut_i1j28rg8__4a8fddcd.TextField_styles_aqmut_hasChips__4a8fddcd{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
+.TextField_styles_aqmut_s13zudoe__4a8fddcd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-gap);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+.TextField_styles_aqmut_io4bpie__4a8fddcd{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;-webkit-flex:1;-ms-flex:1;flex:1;min-width:60%;}
 
-.TextField_styles_9fkr1l_s19ry60d__db7f1e30{margin:var(--plasma-textfield__left-content-margin);line-height:0;}
-.TextField_styles_9fkr1l_sbt1ohz__db7f1e30{margin:var(--plasma-textfield__right-content-margin);line-height:0;}
+.TextField_styles_aqmut_s19ry60d__4a8fddcd{margin:var(--plasma-textfield__left-content-margin);}
+.TextField_styles_aqmut_sbt1ohz__4a8fddcd{margin:var(--plasma-textfield__right-content-margin);}
 
 
 

package/es/index.js

@@ -180,6 +180,7 @@ export { tokens as rangeTokens } from './components/Range/Range.tokens.js';
 export { accordionConfig, accordionRoot } from './components/Accordion/Accordion.js';
 export { AccordionItem } from './components/Accordion/ui/AccordionItem/AccordionItem.js';
 export { classes as accordionClasses, tokens as accordionTokens } from './components/Accordion/Accordion.tokens.js';
+export { portalConfig, portalRoot } from './components/Portal/Portal.js';
 export { component, mergeConfig } from './engines/common.js';
 export { canUseDOM } from './utils/canUseDOM.js';
 export { extractTextFrom } from './utils/extractTextFrom.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.94.0-canary.1253.9693605980.0",
+  "version": "0.94.0-canary.1272.9712079341.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -105,5 +105,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "1ed65742dd92c33095d739ff2ba81d332df38d2b"
+  "gitHead": "63012186c6d60b76d4124c79587e7f5872f1e60c"
 }

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

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.popoverRoot = exports.popoverConfig = exports.POPOVER_PORTAL_ID = exports.ESCAPE_KEYCODE = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
-var _reactDom = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react-dom"));
 var _reactPopper = /*#__PURE__*/require("react-popper");
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
+var _engines = /*#__PURE__*/require("../../engines");
 var _utils = /*#__PURE__*/require("../../utils");
+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"];
-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; }
 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); }
@@ -33,6 +33,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var ESCAPE_KEYCODE = exports.ESCAPE_KEYCODE = 27;
 var POPOVER_PORTAL_ID = exports.POPOVER_PORTAL_ID = 'plasma-popover-root';
+var mergedPortalConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Portal.portalConfig);
+var Portal = /*#__PURE__*/(0, _engines.component)(mergedPortalConfig);
 
 /**
  * Всплывающее окно с возможностью позиционирования
@@ -222,7 +224,9 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       onFocus: onFocus,
       onBlur: onBlur,
       className: (0, _utils.cx)(className, _Popover2.classes.target)
-    }, target), children && portalRef.current && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(Root, _extends({
+    }, target), children && portalRef.current && /*#__PURE__*/_react["default"].createElement(Portal, {
+      container: portalRef.current
+    }, /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       className: className
     }, rest), /*#__PURE__*/_react["default"].createElement(_Popover.StyledPopover, _extends({}, attributes.popper, {
@@ -236,7 +240,7 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       className: _Popover2.classes.arrow,
       ref: setArrowElement,
       style: styles.arrow
-    }, attributes.arrow)), children)), portalRef.current));
+    }, attributes.arrow)), children))));
   });
 };
 var popoverConfig = exports.popoverConfig = {

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

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.popupRoot = exports.popupConfig = exports.handlePosition = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
-var _reactDom = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react-dom"));
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _utils = /*#__PURE__*/require("../../utils");
+var _Portal = /*#__PURE__*/require("../Portal");
+var _engines = /*#__PURE__*/require("../../engines");
 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"];
-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; }
 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); }
@@ -83,6 +83,8 @@ var handlePosition = exports.handlePosition = function handlePosition(placement,
     transform: transform
   };
 };
+var mergedPortalConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Portal.portalConfig);
+var Portal = /*#__PURE__*/(0, _engines.component)(mergedPortalConfig);
 
 /**
  * Базовый копмонент Popup.
@@ -156,7 +158,9 @@ var popupRoot = exports.popupRoot = function popupRoot(Root) {
       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 : '');
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, portalRef.current && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(Root, _extends({
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, portalRef.current && /*#__PURE__*/_react["default"].createElement(Portal, {
+      container: portalRef.current
+    }, /*#__PURE__*/_react["default"].createElement(Root, _extends({
       className: cls
     }, rest), overlay, /*#__PURE__*/_react["default"].createElement(_PopupRoot.PopupRoot, {
       id: innerId,
@@ -166,7 +170,7 @@ var popupRoot = exports.popupRoot = function popupRoot(Root) {
       zIndex: zIndex,
       animationInfo: animationInfo,
       setVisible: setVisible
-    }, children)), portalRef.current));
+    }, children))));
   });
 };
 var popupConfig = exports.popupConfig = {

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

@@ -0,0 +1,38 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.portalRoot = exports.portalConfig = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _reactDom = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react-dom"));
+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; }
+/*
+ * Вспомогательный компонент. Используется в Popup, Popover.
+ * Представляет собой ReactDOM.createPortal() в форме компонента.
+ */
+var portalRoot = exports.portalRoot = function portalRoot(Root) {
+  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
+    var children = _ref.children,
+      container = _ref.container,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    var portalContainer = typeof container === 'function' ? container() : container;
+    return /*#__PURE__*/_react["default"].createElement(Root, {
+      container: container,
+      disabled: disabled,
+      ref: outerRootRef
+    }, disabled && children, !disabled && /*#__PURE__*/_reactDom["default"].createPortal(children, portalContainer));
+  });
+};
+var portalConfig = exports.portalConfig = {
+  name: 'Portal',
+  tag: 'div',
+  layout: portalRoot,
+  base: '',
+  variations: {},
+  defaults: {}
+};

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

@@ -0,0 +1,66 @@
+---
+id: portal
+title: Portal
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Portal
+<Description name="Portal" />
+<PropsTable name="Portal" />
+
+## Использование
+
+```tsx live
+import React, { useState, useRef } from 'react';
+import { Portal, Button, BodyM } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [show, setShow] = useState(false);
+    const containerRef = useRef(null);
+
+    return (
+        <>
+            <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
+            <div style=\{{padding: '20px', marginBottom: '10px', marginTop: '10px', border: '1px solid'}}>
+                <BodyM style=\{{ marginBottom: '20px' }}>Содержимое портала появится в нижнем блоке.</BodyM>
+                {show && containerRef.current && (
+                    <Portal container={containerRef.current}>
+                        <BodyM bold>Содержимое портала</BodyM>
+                    </Portal>
+                )}
+            </div>
+            <div style=\{{padding: '20px', marginBottom: '10px', marginTop: '10px', border: '1px solid'}} ref={containerRef} />
+        </>
+    );
+}
+```
+
+### Disabled
+Отключить портал можно с помощью свойства `disabled`.
+В этом случае содержимое портала добавится внутрь родительского элемента.
+
+```tsx live
+import React, { useState, useRef } from 'react';
+import { Portal, Button, BodyM } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [show, setShow] = useState(false);
+    const containerRef = useRef(null);
+
+    return (
+        <>
+            <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
+            <div style=\{{padding: '20px', marginBottom: '10px', marginTop: '10px', border: '1px solid'}}>
+                <BodyM style=\{{ marginBottom: '20px' }}>Содержимое портала появится в данном блоке.</BodyM>
+                {show && containerRef.current && (
+                    <Portal disabled container={containerRef.current}>
+                        <BodyM bold>Содержимое портала</BodyM>
+                    </Portal>
+                )}
+            </div>
+            <div style=\{{padding: '20px', marginBottom: '10px', marginTop: '10px', border: '1px solid'}} ref={containerRef} />
+        </>
+    );
+}
+```

package/styled-components/cjs/components/Portal/Portal.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styled-components/cjs/components/Portal/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "portalConfig", {
+  enumerable: true,
+  get: function get() {
+    return _Portal.portalConfig;
+  }
+});
+Object.defineProperty(exports, "portalRoot", {
+  enumerable: true,
+  get: function get() {
+    return _Portal.portalRoot;
+  }
+});
+var _Portal = /*#__PURE__*/require("./Portal");