npm - @salutejs/plasma-new-hope - Versions diffs - 0.336.0-canary.2238.17818313113.0 → 0.336.0-canary.2239.17794430722.0 - Mend

@salutejs/plasma-new-hope 0.336.0-canary.2238.17818313113.0 → 0.336.0-canary.2239.17794430722.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (209) hide show

package/cjs/components/Drawer/Drawer.js CHANGED Viewed

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var cls = require('classnames');
 var plasmaCore = require('@salutejs/plasma-core');
-var index = require('../Popup/utils/index.js');
+var index = require('../../utils/index.js');
+var index$1 = require('../Popup/utils/index.js');
 var Drawer_tokens = require('./Drawer.tokens.js');
 var base = require('./variations/_view/base.js');
 var base$1 = require('./variations/_size/base.js');
@@ -23,9 +23,8 @@ var getSizeValueFromProp = require('../../utils/getSizeValueFromProp.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var cls__default = /*#__PURE__*/_interopDefault(cls);
-var _excluded = ["id", "zIndex", "popupInfo", "withBlur", "children", "view", "size", "width", "height", "isOpen", "opened", "initialFocusRef", "focusAfterRef", "animationInfo", "className", "customBackgroundColor", "customContentBackgroundColor", "onClose", "onOverlayClick", "onEscKeyDown", "offset", "frame", "borderRadius", "placement", "closeOnEsc", "closeOnOverlayClick", "asModal", "draggable"];
+var _excluded = ["id", "zIndex", "popupInfo", "withBlur", "children", "view", "size", "width", "height", "isOpen", "opened", "initialFocusRef", "focusAfterRef", "className", "customBackgroundColor", "customContentBackgroundColor", "onClose", "onOverlayClick", "onEscKeyDown", "offset", "frame", "borderRadius", "placement", "closeOnEsc", "closeOnOverlayClick", "asModal", "draggable"];
 // issue #823
@@ -44,7 +43,6 @@ var drawerRoot = function drawerRoot(Root) {
       opened = _ref.opened,
       initialFocusRef = _ref.initialFocusRef,
       focusAfterRef = _ref.focusAfterRef,
-      animationInfo = _ref.animationInfo,
       className = _ref.className,
       customBackgroundColor = _ref.customBackgroundColor,
       customContentBackgroundColor = _ref.customContentBackgroundColor,
@@ -99,7 +97,7 @@ var drawerRoot = function drawerRoot(Root) {
     return /*#__PURE__*/React__default.default.createElement(Drawer_styles.StyledPopup, _rollupPluginBabelHelpers.extends({
       id: innerId,
       ref: asModal ? innerRef : outerRef,
-      className: cls__default.default(placementClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Drawer_tokens.classes.enterCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.enter), Drawer_tokens.classes.exitCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.exit)),
+      className: index.cx(placementClass),
       opened: innerIsOpen,
       zIndex: zIndex,
       placement: placement,
@@ -109,12 +107,11 @@ var drawerRoot = function drawerRoot(Root) {
       height: innerHeight,
       offset: offset,
       withAnimation: true,
-      drawerAnimationInfo: animationInfo,
       overlay: asModal && /*#__PURE__*/React__default.default.createElement(Root, {
         view: view
       }, /*#__PURE__*/React__default.default.createElement(Overlay.Overlay, {
         className: Drawer_tokens.classes.overlay,
-        zIndex: zIndex || index.DEFAULT_Z_INDEX,
+        zIndex: zIndex || index$1.DEFAULT_Z_INDEX,
         backgroundColorProperty: overlayBackgroundToken,
         withBlur: withBlur,
         transparent: transparent,
@@ -122,7 +119,6 @@ var drawerRoot = function drawerRoot(Root) {
         onOverlayClick: onDrawerOverlayKeyDown
       }))
     }, rest), /*#__PURE__*/React__default.default.createElement(Root, {
-      className: Drawer_tokens.classes.panel,
       view: view,
       size: size,
       style: {
@@ -134,7 +130,8 @@ var drawerRoot = function drawerRoot(Root) {
       width: innerWidth,
       height: innerHeight,
       customBackgroundColor: customBackgroundColor,
-      customContentBackgroundColor: customContentBackgroundColor
+      customContentBackgroundColor: customContentBackgroundColor,
+      className: className
     }, children)));
   });
 };

package/cjs/components/Drawer/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport cls from 'classnames';\nimport { useForkRef } from '@salutejs/plasma-core';\nimport { getSizeValueFromProp, safeUseId } from 'src/utils';\nimport type { RootProps } from 'src/engines';\n\nimport { usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { useFocusTrap } from '../../hooks';\n\nimport { classes, tokens } from './Drawer.tokens';\nimport type { DrawerProps } from './Drawer.types';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as borderRadiusCSS } from './variations/_borderRadius/base';\nimport { StyledPopup, StyledPanel } from './Drawer.styles';\nimport { getIdLastDrawer } from './DrawerContext';\nimport { useDrawer } from './hooks';\n\n// issue #823\n\nexport const drawerRoot = (Root: RootProps<HTMLDivElement, DrawerProps>) =>\n forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n id,\n zIndex,\n popupInfo,\n withBlur,\n children,\n view,\n size,\n width,\n height,\n isOpen,\n opened,\n initialFocusRef,\n focusAfterRef,\n animationInfo,\n className,\n customBackgroundColor,\n customContentBackgroundColor,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n offset,\n frame,\n borderRadius = 'none',\n placement = 'right',\n closeOnEsc = true,\n closeOnOverlayClick = true,\n asModal = true,\n draggable,\n ...rest\n },\n outerRef,\n ) => {\n const innerIsOpen = Boolean(isOpen \|\| opened);\n\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRef);\n\n const uniqId = safeUseId();\n const innerId = id \|\| uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.drawerOverlayWithBlurColor})`\n : `var(${tokens.drawerOverlayColor})`;\n const innerWidth = width ? getSizeValueFromProp(width) : '100%';\n const innerHeight = height ? getSizeValueFromProp(height) : '100%';\n\n const placementClass = placement ? classes[`${placement}Placement` as keyof typeof classes] : undefined;\n\n const { drawerInfo } = useDrawer({\n id: innerId,\n isOpen: innerIsOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n disableScroll: asModal,\n });\n const transparent = useMemo(() => getIdLastDrawer(Array.from(popupController.items.values())) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onDrawerOverlayKeyDown = (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n };\n\n return (\n <StyledPopup\n id={innerId}\n ref={asModal ? innerRef : outerRef}\n className={cls(placementClass, className, {\n [classes.enterCustomAnimation]: animationInfo?.enter,\n [classes.exitCustomAnimation]: animationInfo?.exit,\n })}\n opened={innerIsOpen}\n zIndex={zIndex}\n placement={placement}\n popupInfo={drawerInfo}\n frame={frame}\n width={innerWidth}\n height={innerHeight}\n offset={offset}\n withAnimation\n drawerAnimationInfo={animationInfo}\n overlay={\n asModal && (\n <Root view={view}>\n <Overlay\n className={classes.overlay}\n zIndex={zIndex \|\| DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onDrawerOverlayKeyDown}\n />\n </Root>\n )\n }\n {...rest}\n >\n <Root\n className={classes.panel}\n view={view}\n size={size}\n style={{ width: innerWidth, height: innerHeight }}\n borderRadius={borderRadius}\n >\n <StyledPanel\n width={innerWidth}\n height={innerHeight}\n customBackgroundColor={customBackgroundColor}\n customContentBackgroundColor={customContentBackgroundColor}\n >\n {children}\n </StyledPanel>\n </Root>\n </StyledPopup>\n );\n },\n );\n\nexport const drawerConfig = {\n name: 'Drawer',\n tag: 'div',\n layout: drawerRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n borderRadius: {\n css: borderRadiusCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n borderRadius: 'none',\n },\n};\n"],"names":["drawerRoot","Root","forwardRef","_ref","outerRef","id","zIndex","popupInfo","withBlur","children","view","size","width","height","isOpen","opened","initialFocusRef","focusAfterRef","animationInfo","className","customBackgroundColor","customContentBackgroundColor","onClose","onOverlayClick","onEscKeyDown","offset","frame","_ref$borderRadius","borderRadius","_ref$placement","placement","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","_ref$asModal","asModal","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","drawerOverlayWithBlurColor","drawerOverlayColor","innerWidth","getSizeValueFromProp","innerHeight","placementClass","classes","undefined","_useDrawer","useDrawer","disableScroll","drawerInfo","transparent","useMemo","getIdLastDrawer","Array","from","items","values","onDrawerOverlayKeyDown","event","React","createElement","StyledPopup","_extends","ref","cls","_defineProperty","enterCustomAnimation","enter","exitCustomAnimation","exit","withAnimation","drawerAnimationInfo","overlay","Overlay","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","panel","style","StyledPanel","drawerConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","borderRadiusCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;;IAEaA,UAAU,GAAG,SAAbA,UAAUA,CAAIC,IAA4C,EAAA;AAAA,EAAA,oBACnEC,gBAAU,CACN,UAAAC,IAAA,EAgCIC,QAAQ,EACP;AAAA,IAAA,IA/BGC,EAAE,GAAAF,IAAA,CAAFE,EAAE,CAAA;MACFC,MAAM,GAAAH,IAAA,CAANG,MAAM,CAAA;MACNC,SAAS,GAAAJ,IAAA,CAATI,SAAS,CAAA;MACTC,QAAQ,GAAAL,IAAA,CAARK,QAAQ,CAAA;MACRC,QAAQ,GAAAN,IAAA,CAARM,QAAQ,CAAA;MACRC,IAAI,GAAAP,IAAA,CAAJO,IAAI,CAAA;MACJC,IAAI,GAAAR,IAAA,CAAJQ,IAAI,CAAA;MACJC,KAAK,GAAAT,IAAA,CAALS,KAAK,CAAA;MACLC,MAAM,GAAAV,IAAA,CAANU,MAAM,CAAA;MACNC,MAAM,GAAAX,IAAA,CAANW,MAAM,CAAA;MACNC,MAAM,GAAAZ,IAAA,CAANY,MAAM,CAAA;MACNC,eAAe,GAAAb,IAAA,CAAfa,eAAe,CAAA;MACfC,aAAa,GAAAd,IAAA,CAAbc,aAAa,CAAA;MACbC,aAAa,GAAAf,IAAA,CAAbe,aAAa,CAAA;MACbC,SAAS,GAAAhB,IAAA,CAATgB,SAAS,CAAA;MACTC,qBAAqB,GAAAjB,IAAA,CAArBiB,qBAAqB,CAAA;MACrBC,4BAA4B,GAAAlB,IAAA,CAA5BkB,4BAA4B,CAAA;MAC5BC,OAAO,GAAAnB,IAAA,CAAPmB,OAAO,CAAA;MACPC,cAAc,GAAApB,IAAA,CAAdoB,cAAc,CAAA;MACdC,YAAY,GAAArB,IAAA,CAAZqB,YAAY,CAAA;MACZC,MAAM,GAAAtB,IAAA,CAANsB,MAAM,CAAA;MACNC,KAAK,GAAAvB,IAAA,CAALuB,KAAK,CAAA;MAAAC,iBAAA,GAAAxB,IAAA,CACLyB,YAAY,CAAA;AAAZA,MAAAA,YAAY,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,iBAAA,CAAA;MAAAE,cAAA,GAAA1B,IAAA,CACrB2B,SAAS,CAAA;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,cAAA,CAAA;MAAAE,eAAA,GAAA5B,IAAA,CACnB6B,UAAU,CAAA;AAAVA,MAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,eAAA,CAAA;MAAAE,qBAAA,GAAA9B,IAAA,CACjB+B,mBAAmB,CAAA;AAAnBA,MAAAA,mBAAmB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,qBAAA,CAAA;MAAAE,YAAA,GAAAhC,IAAA,CAC1BiC,OAAO,CAAA;AAAPA,MAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,YAAA,CAAA;MAEXE,IAAI,GAAAC,iDAAA,CAAAnC,IAAA,EAAAoC,SAAA,EAAA;AAIX,IAAA,IAAMC,WAAW,GAAGC,OAAO,CAAC3B,MAAM,IAAIC,MAAM,CAAC,CAAA;IAE7C,IAAM2B,OAAO,GAAGC,yBAAY,CAAC,IAAI,EAAE3B,eAAe,EAAEC,aAAa,CAAC,CAAA;AAClE,IAAA,IAAM2B,eAAe,GAAGC,4BAAe,EAAE,CAAA;AAEzC,IAAA,IAAMC,QAAQ,GAAGC,qBAAU,CAAiBL,OAAO,EAAEtC,QAAQ,CAAC,CAAA;AAE9D,IAAA,IAAM4C,MAAM,GAAGC,eAAS,EAAE,CAAA;AAC1B,IAAA,IAAMC,OAAO,GAAG7C,EAAE,IAAI2C,MAAM,CAAA;AAC5B,IAAA,IAAMG,sBAAsB,GAAG3C,QAAQ,GAAA,MAAA,CAAA4C,MAAA,CAC1BC,oBAAM,CAACC,0BAA0B,gBAAAF,MAAA,CACjCC,oBAAM,CAACE,kBAAkB,EAAG,GAAA,CAAA,CAAA;IACzC,IAAMC,UAAU,GAAG5C,KAAK,GAAG6C,yCAAoB,CAAC7C,KAAK,CAAC,GAAG,MAAM,CAAA;IAC/D,IAAM8C,WAAW,GAAG7C,MAAM,GAAG4C,yCAAoB,CAAC5C,MAAM,CAAC,GAAG,MAAM,CAAA;IAElE,IAAM8C,cAAc,GAAG7B,SAAS,GAAG8B,qBAAO,CAAAR,EAAAA,CAAAA,MAAA,CAAItB,SAAS,EAAoC,WAAA,CAAA,CAAA,GAAG+B,SAAS,CAAA;IAEvG,IAAAC,UAAA,GAAuBC,mBAAS,CAAC;AAC7B1D,QAAAA,EAAE,EAAE6C,OAAO;AACXpC,QAAAA,MAAM,EAAE0B,WAAW;AACnBR,QAAAA,UAAU,EAAVA,UAAU;AACVR,QAAAA,YAAY,EAAZA,YAAY;AACZF,QAAAA,OAAO,EAAPA,OAAO;AACPf,QAAAA,SAAS,EAATA,SAAS;AACTyD,QAAAA,aAAa,EAAE5B,OAAAA;AACnB,OAAC,CAAC;MARM6B,UAAU,GAAAH,UAAA,CAAVG,UAAU,CAAA;IASlB,IAAMC,WAAW,GAAGC,aAAO,CAAC,YAAA;AAAA,MAAA,OAAMC,6BAAe,CAACC,KAAK,CAACC,IAAI,CAAC1B,eAAe,CAAC2B,KAAK,CAACC,MAAM,EAAE,CAAC,CAAC,KAAKtB,OAAO,CAAA;AAAA,KAAA,EAAE,CACvGA,OAAO,EACPN,eAAe,CAAC2B,KAAK,CACxB,CAAC,CAAA;AAEF,IAAA,IAAME,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIC,KAAuC,EAAK;AACxE,MAAA,IAAInD,cAAc,EAAE;QAChBA,cAAc,CAACmD,KAAK,CAAC,CAAA;AACrB,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAIpD,OAAO,EAAE;AACTA,QAAAA,OAAO,EAAE,CAAA;AACb,OAAA;KACH,CAAA;AAED,IAAA,oBACIqD,sBAAA,CAAAC,aAAA,CAACC,yBAAW,EAAAC,iCAAA,CAAA;AACRzE,MAAAA,EAAE,EAAE6C,OAAQ;AACZ6B,MAAAA,GAAG,EAAE3C,OAAO,GAAGU,QAAQ,GAAG1C,QAAS;AACnCe,MAAAA,SAAS,EAAE6D,oBAAG,CAACrB,cAAc,EAAExC,SAAS,EAAA8D,wCAAA,CAAAA,wCAAA,CACnCrB,EAAAA,EAAAA,qBAAO,CAACsB,oBAAoB,EAAGhE,aAAa,KAAA,IAAA,IAAbA,aAAa,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAbA,aAAa,CAAEiE,KAAK,CACnDvB,EAAAA,qBAAO,CAACwB,mBAAmB,EAAGlE,aAAa,KAAA,IAAA,IAAbA,aAAa,KAAbA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,aAAa,CAAEmE,IAAI,CACrD,CAAE;AACHtE,MAAAA,MAAM,EAAEyB,WAAY;AACpBlC,MAAAA,MAAM,EAAEA,MAAO;AACfwB,MAAAA,SAAS,EAAEA,SAAU;AACrBvB,MAAAA,SAAS,EAAE0D,UAAW;AACtBvC,MAAAA,KAAK,EAAEA,KAAM;AACbd,MAAAA,KAAK,EAAE4C,UAAW;AAClB3C,MAAAA,MAAM,EAAE6C,WAAY;AACpBjC,MAAAA,MAAM,EAAEA,MAAO;MACf6D,aAAa,EAAA,IAAA;AACbC,MAAAA,mBAAmB,EAAErE,aAAc;AACnCsE,MAAAA,OAAO,EACHpD,OAAO,iBACHuC,sBAAA,CAAAC,aAAA,CAAC3E,IAAI,EAAA;AAACS,QAAAA,IAAI,EAAEA,IAAAA;AAAK,OAAA,eACbiE,sBAAA,CAAAC,aAAA,CAACa,eAAO,EAAA;QACJtE,SAAS,EAAEyC,qBAAO,CAAC4B,OAAQ;QAC3BlF,MAAM,EAAEA,MAAM,IAAIoF,qBAAgB;AAClCC,QAAAA,uBAAuB,EAAExC,sBAAuB;AAChD3C,QAAAA,QAAQ,EAAEA,QAAS;AACnB0D,QAAAA,WAAW,EAAEA,WAAY;AACzB0B,QAAAA,WAAW,EAAE1D,mBAAoB;AACjCX,QAAAA,cAAc,EAAEkD,sBAAAA;AAAuB,OAC1C,CACC,CAAA;AAEb,KAAA,EACGpC,IAAI,CAERsC,eAAAA,sBAAA,CAAAC,aAAA,CAAC3E,IAAI,EAAA;MACDkB,SAAS,EAAEyC,qBAAO,CAACiC,KAAM;AACzBnF,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,IAAI,EAAEA,IAAK;AACXmF,MAAAA,KAAK,EAAE;AAAElF,QAAAA,KAAK,EAAE4C,UAAU;AAAE3C,QAAAA,MAAM,EAAE6C,WAAAA;OAAc;AAClD9B,MAAAA,YAAY,EAAEA,YAAAA;AAAa,KAAA,eAE3B+C,sBAAA,CAAAC,aAAA,CAACmB,yBAAW,EAAA;AACRnF,MAAAA,KAAK,EAAE4C,UAAW;AAClB3C,MAAAA,MAAM,EAAE6C,WAAY;AACpBtC,MAAAA,qBAAqB,EAAEA,qBAAsB;AAC7CC,MAAAA,4BAA4B,EAAEA,4BAAAA;KAE7BZ,EAAAA,QACQ,CACX,CACG,CAAC,CAAA;AAEtB,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMuF,YAAY,GAAG;AACxBC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEnG,UAAU;AAClBoG,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,UAAU,EAAE;AACR3F,IAAAA,IAAI,EAAE;AACF4F,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACD5F,IAAAA,IAAI,EAAE;AACF2F,MAAAA,GAAG,EAAEE,WAAAA;KACR;AACD5E,IAAAA,YAAY,EAAE;AACV0E,MAAAA,GAAG,EAAEG,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNhG,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAG;AACTiB,IAAAA,YAAY,EAAE,MAAA;AAClB,GAAA;AACJ;;;;;"}
1	+ {"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\nimport { cx, getSizeValueFromProp, safeUseId } from 'src/utils';\nimport type { RootProps } from 'src/engines';\n\nimport { usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { useFocusTrap } from '../../hooks';\n\nimport { classes, tokens } from './Drawer.tokens';\nimport type { DrawerProps } from './Drawer.types';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as borderRadiusCSS } from './variations/_borderRadius/base';\nimport { StyledPopup, StyledPanel } from './Drawer.styles';\nimport { getIdLastDrawer } from './DrawerContext';\nimport { useDrawer } from './hooks';\n\n// issue #823\n\nexport const drawerRoot = (Root: RootProps<HTMLDivElement, DrawerProps>) =>\n forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n id,\n zIndex,\n popupInfo,\n withBlur,\n children,\n view,\n size,\n width,\n height,\n isOpen,\n opened,\n initialFocusRef,\n focusAfterRef,\n className,\n customBackgroundColor,\n customContentBackgroundColor,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n offset,\n frame,\n borderRadius = 'none',\n placement = 'right',\n closeOnEsc = true,\n closeOnOverlayClick = true,\n asModal = true,\n draggable,\n ...rest\n },\n outerRef,\n ) => {\n const innerIsOpen = Boolean(isOpen \|\| opened);\n\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRef);\n\n const uniqId = safeUseId();\n const innerId = id \|\| uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.drawerOverlayWithBlurColor})`\n : `var(${tokens.drawerOverlayColor})`;\n const innerWidth = width ? getSizeValueFromProp(width) : '100%';\n const innerHeight = height ? getSizeValueFromProp(height) : '100%';\n\n const placementClass = placement ? classes[`${placement}Placement` as keyof typeof classes] : undefined;\n\n const { drawerInfo } = useDrawer({\n id: innerId,\n isOpen: innerIsOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n disableScroll: asModal,\n });\n const transparent = useMemo(() => getIdLastDrawer(Array.from(popupController.items.values())) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onDrawerOverlayKeyDown = (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n };\n\n return (\n <StyledPopup\n id={innerId}\n ref={asModal ? innerRef : outerRef}\n className={cx(placementClass)}\n opened={innerIsOpen}\n zIndex={zIndex}\n placement={placement}\n popupInfo={drawerInfo}\n frame={frame}\n width={innerWidth}\n height={innerHeight}\n offset={offset}\n withAnimation\n overlay={\n asModal && (\n <Root view={view}>\n <Overlay\n className={classes.overlay}\n zIndex={zIndex \|\| DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onDrawerOverlayKeyDown}\n />\n </Root>\n )\n }\n {...rest}\n >\n <Root\n view={view}\n size={size}\n style={{ width: innerWidth, height: innerHeight }}\n borderRadius={borderRadius}\n >\n <StyledPanel\n width={innerWidth}\n height={innerHeight}\n customBackgroundColor={customBackgroundColor}\n customContentBackgroundColor={customContentBackgroundColor}\n className={className}\n >\n {children}\n </StyledPanel>\n </Root>\n </StyledPopup>\n );\n },\n );\n\nexport const drawerConfig = {\n name: 'Drawer',\n tag: 'div',\n layout: drawerRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n borderRadius: {\n css: borderRadiusCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n borderRadius: 'none',\n },\n};\n"],"names":["drawerRoot","Root","forwardRef","_ref","outerRef","id","zIndex","popupInfo","withBlur","children","view","size","width","height","isOpen","opened","initialFocusRef","focusAfterRef","className","customBackgroundColor","customContentBackgroundColor","onClose","onOverlayClick","onEscKeyDown","offset","frame","_ref$borderRadius","borderRadius","_ref$placement","placement","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","_ref$asModal","asModal","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","drawerOverlayWithBlurColor","drawerOverlayColor","innerWidth","getSizeValueFromProp","innerHeight","placementClass","classes","undefined","_useDrawer","useDrawer","disableScroll","drawerInfo","transparent","useMemo","getIdLastDrawer","Array","from","items","values","onDrawerOverlayKeyDown","event","React","createElement","StyledPopup","_extends","ref","cx","withAnimation","overlay","Overlay","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","style","StyledPanel","drawerConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","borderRadiusCSS","defaults"],"mappings":"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"}

package/cjs/components/Drawer/Drawer.styles.js CHANGED Viewed

@@ -1,10 +1,9 @@
-require('./Drawer.styles_1gcp61n.css');
+require('./Drawer.styles_h5od79.css');
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('@linaria/react');
-var Drawer_tokens = require('./Drawer.tokens.js');
 var common = require('../../engines/common.js');
 var Popup$1 = require('../Popup/Popup.js');
 var Panel$1 = require('../Panel/Panel.js');
@@ -35,27 +34,13 @@ var _exp11 = function _exp11() {
     return height || 'auto';
   };
 };
-var _exp15 = function _exp15() {
-  return function (_ref3) {
-    var drawerAnimationInfo = _ref3.drawerAnimationInfo;
-    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.enter) || "var(".concat(Drawer_tokens.privateTokens.enterAnimation, ")");
-  };
-};
-var _exp19 = function _exp19() {
-  return function (_ref4) {
-    var drawerAnimationInfo = _ref4.drawerAnimationInfo;
-    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.exit) || "var(".concat(Drawer_tokens.privateTokens.exitAnimation, ")");
-  };
-};
 var StyledPopup = /*#__PURE__*/react.styled(_exp4())({
   name: "StyledPopup",
   "class": "sv7q57r",
   propsAsIs: true,
   vars: {
     "sv7q57r-0": [/*#__PURE__*/_exp10()],
-    "sv7q57r-1": [/*#__PURE__*/_exp11()],
-    "sv7q57r-2": [/*#__PURE__*/_exp15()],
-    "sv7q57r-3": [/*#__PURE__*/_exp19()]
+    "sv7q57r-1": [/*#__PURE__*/_exp11()]
   }
 });

package/cjs/components/Drawer/Drawer.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.styles.js","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { component, mergeConfig } from '../../engines';\nimport { popupClasses, popupConfig } from '../Popup';\nimport { panelTokens, panelConfig } from '../Panel';\n\nimport type { ~~DrawerAnimationInfo,~~ DrawerPlacement } from './Drawer.types';\nimport { classes, ~~privateTokens,~~ tokens } from './Drawer.tokens';\n\nconst mergedPanelConfig = mergeConfig(panelConfig);\nconst Panel = component(mergedPanelConfig);\n\nconst Popup = component(popupConfig);\n\nconst animationVariants = {\n right: {\n show: {\n start: 'translate(100%, -50%)',\n end: 'translate(0, -50%)',\n },\n hide: {\n start: 'translate(0, -50%)',\n end: 'translate(100%, -50%)',\n },\n },\n bottom: {\n show: {\n start: 'translate(-50%, 100%)',\n end: 'translate(-50%, 0)',\n },\n hide: {\n start: 'translate(-50%, 0)',\n end: 'translate(-50%, 100%)',\n },\n },\n left: {\n show: {\n start: 'translate(-100%, -50%)',\n end: 'translate(0, -50%)',\n },\n hide: {\n start: 'translate(0, -50%)',\n end: 'translate(-100%, -50%)',\n },\n },\n top: {\n show: {\n start: 'translate(-50%, -100%)',\n end: 'translate(-50%, 0)',\n },\n hide: {\n start: 'translate(-50%, 0)',\n end: 'translate(-50%, -100%)',\n },\n },\n};\n\nconst templateAnimationStyle = (placement: DrawerPlacement) => `\n &.${classes[`${placement}Placement` as keyof typeof classes]} {\n && .${popupClasses.root} {\n animation: ${placement}ShowAnimation 0.2s forwards;\n }\n\n &&.${popupClasses.endAnimation} .${popupClasses.root} {\n animation: ${placement}HideAnimation 0.2s forwards;\n }\n\n @keyframes ${placement}ShowAnimation {\n 0% {\n transform: ${animationVariants[placement].show.start};\n opacity: 0;\n }\n\n 100% {\n transform: ${animationVariants[placement].show.end};\n opacity: 1;\n }\n }\n\n @keyframes ${placement}HideAnimation {\n 0% {\n transform: ${animationVariants[placement].hide.start};\n opacity: 1;\n }\n\n 100% {\n transform: ${animationVariants[placement].hide.end};\n opacity: 0;\n }\n }\n }\n `;\n\nconst getAnimationStyles = () => {\n return Object.keys(animationVariants).reduce((acc, placement) => {\n acc += templateAnimationStyle(placement as DrawerPlacement);\n return acc;\n }, '');\n};\n\nexport const StyledPanel = styled(Panel)`\n ${panelTokens.closeColor}: var(${tokens.closeIconColor});\n`;\n\nexport const StyledPopup = styled(Popup)<{\n placement: DrawerPlacement;\n width?: number \| string;\n height?: number \| string;\n ~~drawerAnimationInfo?: DrawerAnimationInfo;\n~~}>`\n &&.${classes.overlay} {\n animation: fadeIn 0.2s forwards;\n scrollbar-gutter: stable;\n }\n\n &&.${popupClasses.endAnimation} .${classes.overlay} {\n animation: fadeOut 0.2s forwards;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n @keyframes fadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n }\n\n && .${popupClasses.root}, && .${popupClasses.root} > div {\n width: ${({ width }) => width \|\| 'auto'};\n height: ${({ height }) => height \|\| 'auto'};\n }\n\n ${getAnimationStyles()}\n\n &.${classes.enterCustomAnimation} {\n && .${popupClasses.root} {\n animation: ${({ drawerAnimationInfo }) =>\n drawerAnimationInfo?.enter \|\| `var(${privateTokens.enterAnimation})`};\n }\n }\n\n &.${classes.exitCustomAnimation} {\n &&.${popupClasses.endAnimation} .${popupClasses.root} {\n animation:${({ drawerAnimationInfo }) =>\n drawerAnimationInfo?.exit \|\| `var(${privateTokens.exitAnimation})`};\n }\n }\n`;\n"],"names":["mergedPanelConfig","mergeConfig","panelConfig","Panel","component","Popup","popupConfig","_exp","StyledPanel","styled","name","class","propsAsIs","_exp4","_exp10","_ref","width","_exp11","_ref2","height","~~_exp15","_ref3","drawerAnimationInfo","enter","concat","privateTokens","enterAnimation","_exp19","_ref4","exit","exitAnimation","~~StyledPopup","vars"],"mappings":"~~;;;;;;;;;;~~AASA,IAAMA,iBAAiB,gBAAGC,kBAAW,CAACC,mBAAW,CAAC,CAAA;AAClD,IAAMC,KAAK,gBAAGC,gBAAS,CAACJ,iBAAiB,CAAC,CAAA;AAE1C,IAAMK,KAAK,gBAAGD,gBAAS,CAACE,mBAAW,CAAC,CAAA;AAAC,IAAAC,IAAA,GAXnBA,SAWmBA,IAAAA,GAAA;AAAA,EAAA,OAwFHJ,KAAK,CAAA;AAAA,CAAA,CAAA;AAAhC,IAAMK,WAAW,gBAAGC,YAAM,CAAAF,IAAA,EAAA,CAAA,CAAA;AAAAG,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAEhC,EAAA;AAAC,IAAAC,KAAA,GArGgBA,SAqGhBA,KAAAA,GAAA;AAAA,EAAA,OAEgCR,KAAK,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAS,MAAA,GAvGrBA,SAuGqBA,MAAAA,GAAA;AAAA,EAAA,~~OAoCtB~~,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,KAAAA,GAAAA,IAAAA,CAAAA,KAAAA,CAAAA;IAAAA,OAAYA,KAAK,IAAI,MAAM,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,MAAA,~~GA3I7BA~~,~~SA2I6BA~~,MAAAA,GAAA;AAAA,EAAA,OAC7B,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,MAAAA,GAAAA,KAAAA,CAAAA,MAAAA,CAAAA;IAAAA,OAAaA,MAAM,IAAI,MAAM,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;~~AAAA~~,IAAAC,MAAA,GA5IhCA,SA4IgCA,MAAAA,GAAA;AAAA,EAAA,OAOzB,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,mBAAAA,GAAAA,KAAAA,CAAAA,mBAAAA,CAAAA;AAAAA,IAAAA,OACZA,CAAAA,mBAAmB,KAAnBA,IAAAA,IAAAA,mBAAmB,uBAAnBA,mBAAmB,CAAEC,KAAK,KAAA,MAAA,CAAAC,MAAA,CAAWC,2BAAa,CAACC,cAAc,EAAG,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,MAAA,GApJlEA,SAoJkEA,MAAAA,GAAA;AAAA,EAAA,OAM5D,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGN,mBAAAA,GAAAA,KAAAA,CAAAA,mBAAAA,CAAAA;AAAAA,IAAAA,OACXA,CAAAA,mBAAmB,KAAnBA,IAAAA,IAAAA,mBAAmB,uBAAnBA,mBAAmB,CAAEO,IAAI,KAAA,MAAA,CAAAL,MAAA,CAAWC,2BAAa,CAACK,aAAa,EAAG,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AApD3E,IAAMC,WAAW,~~gBAAGtB~~,YAAM,CAAAI,KAAA,EAAA,CAAA,CAAA;AAAAH,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;~~AAAAoB~~,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,~~cAoChBlB~~,MAA8B,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAC7BG,MAAgC,EAAA,CAAA;AAAA,~~IAAA,WAAA,EAAA,cAOzBG,MAC2D,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAM5DO,MAC0D,EAAA,CAAA;AAAA,~~GAAA;AAAA,~~CAGjF~~;;;;;"}
1	+ {"version":3,"file":"Drawer.styles.js","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { component, mergeConfig } from '../../engines';\nimport { popupClasses, popupConfig } from '../Popup';\nimport { panelTokens, panelConfig } from '../Panel';\n\nimport type { DrawerPlacement } from './Drawer.types';\nimport { classes, tokens } from './Drawer.tokens';\n\nconst mergedPanelConfig = mergeConfig(panelConfig);\nconst Panel = component(mergedPanelConfig);\n\nconst Popup = component(popupConfig);\n\nconst animationVariants = {\n right: {\n show: {\n start: 'translate(100%, -50%)',\n end: 'translate(0, -50%)',\n },\n hide: {\n start: 'translate(0, -50%)',\n end: 'translate(100%, -50%)',\n },\n },\n bottom: {\n show: {\n start: 'translate(-50%, 100%)',\n end: 'translate(-50%, 0)',\n },\n hide: {\n start: 'translate(-50%, 0)',\n end: 'translate(-50%, 100%)',\n },\n },\n left: {\n show: {\n start: 'translate(-100%, -50%)',\n end: 'translate(0, -50%)',\n },\n hide: {\n start: 'translate(0, -50%)',\n end: 'translate(-100%, -50%)',\n },\n },\n top: {\n show: {\n start: 'translate(-50%, -100%)',\n end: 'translate(-50%, 0)',\n },\n hide: {\n start: 'translate(-50%, 0)',\n end: 'translate(-50%, -100%)',\n },\n },\n};\n\nconst templateAnimationStyle = (placement: DrawerPlacement) => `\n &.${classes[`${placement}Placement` as keyof typeof classes]} {\n && .${popupClasses.root} {\n animation: ${placement}ShowAnimation 0.2s forwards;\n }\n\n &&.${popupClasses.endAnimation} .${popupClasses.root} {\n animation: ${placement}HideAnimation 0.2s forwards;\n }\n\n @keyframes ${placement}ShowAnimation {\n 0% {\n transform: ${animationVariants[placement].show.start};\n opacity: 0;\n }\n\n 100% {\n transform: ${animationVariants[placement].show.end};\n opacity: 1;\n }\n }\n\n @keyframes ${placement}HideAnimation {\n 0% {\n transform: ${animationVariants[placement].hide.start};\n opacity: 1;\n }\n\n 100% {\n transform: ${animationVariants[placement].hide.end};\n opacity: 0;\n }\n }\n }\n `;\n\nconst getAnimationStyles = () => {\n return Object.keys(animationVariants).reduce((acc, placement) => {\n acc += templateAnimationStyle(placement as DrawerPlacement);\n return acc;\n }, '');\n};\n\nexport const StyledPanel = styled(Panel)`\n ${panelTokens.closeColor}: var(${tokens.closeIconColor});\n`;\n\nexport const StyledPopup = styled(Popup)<{\n placement: DrawerPlacement;\n width?: number \| string;\n height?: number \| string;\n}>`\n &&.${classes.overlay} {\n animation: fadeIn 0.2s forwards;\n scrollbar-gutter: stable;\n }\n\n &&.${popupClasses.endAnimation} .${classes.overlay} {\n animation: fadeOut 0.2s forwards;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n @keyframes fadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n }\n\n && .${popupClasses.root}, && .${popupClasses.root} > div {\n width: ${({ width }) => width \|\| 'auto'};\n height: ${({ height }) => height \|\| 'auto'};\n }\n\n ${getAnimationStyles()}\n`;\n"],"names":["mergedPanelConfig","mergeConfig","panelConfig","Panel","component","Popup","popupConfig","_exp","StyledPanel","styled","name","class","propsAsIs","_exp4","_exp10","_ref","width","_exp11","_ref2","height","StyledPopup","vars"],"mappings":";;;;;;;;;AASA,IAAMA,iBAAiB,gBAAGC,kBAAW,CAACC,mBAAW,CAAC,CAAA;AAClD,IAAMC,KAAK,gBAAGC,gBAAS,CAACJ,iBAAiB,CAAC,CAAA;AAE1C,IAAMK,KAAK,gBAAGD,gBAAS,CAACE,mBAAW,CAAC,CAAA;AAAC,IAAAC,IAAA,GAXnBA,SAWmBA,IAAAA,GAAA;AAAA,EAAA,OAwFHJ,KAAK,CAAA;AAAA,CAAA,CAAA;AAAhC,IAAMK,WAAW,gBAAGC,YAAM,CAAAF,IAAA,EAAA,CAAA,CAAA;AAAAG,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAEhC,EAAA;AAAC,IAAAC,KAAA,GArGgBA,SAqGhBA,KAAAA,GAAA;AAAA,EAAA,OAEgCR,KAAK,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAS,MAAA,GAvGrBA,SAuGqBA,MAAAA,GAAA;AAAA,EAAA,OAmCtB,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,KAAAA,GAAAA,IAAAA,CAAAA,KAAAA,CAAAA;IAAAA,OAAYA,KAAK,IAAI,MAAM,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,MAAA,GA1I7BA,SA0I6BA,MAAAA,GAAA;AAAA,EAAA,OAC7B,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,MAAAA,GAAAA,KAAAA,CAAAA,MAAAA,CAAAA;IAAAA,OAAaA,MAAM,IAAI,MAAM,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AApC3C,IAAMC,WAAW,gBAAGX,YAAM,CAAAI,KAAA,EAAA,CAAA,CAAA;AAAAH,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAAS,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAmChBP,MAA8B,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAC7BG,MAAgC,EAAA,CAAA;AAAA,GAAA;AAAA,CAIjD;;;;;"}

package/{es/components/Drawer/Drawer.styles_1gcp61n.css → cjs/components/Drawer/Drawer.styles_h5od79.css} RENAMED Viewed

@@ -1,2 +1,2 @@
 .s1ewnow2{--plasma-panel-close-color:var(--plasma-drawer-close-icon-color);}
-.sv7q57r.sv7q57r.drawer-overlay{-webkit-animation:fadeIn-sv7q57r 0.2s forwards;animation:fadeIn-sv7q57r 0.2s forwards;-webkit-scrollbar-gutter:stable;-moz-scrollbar-gutter:stable;-ms-scrollbar-gutter:stable;scrollbar-gutter:stable;}.sv7q57r.sv7q57r.popup-end-animation .drawer-overlay{-webkit-animation:fadeOut-sv7q57r 0.2s forwards;animation:fadeOut-sv7q57r 0.2s forwards;}@-webkit-keyframes fadeIn-sv7q57r{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn-sv7q57r{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes fadeOut-sv7q57r{from{opacity:1;}to{opacity:0;}}@keyframes fadeOut-sv7q57r{from{opacity:1;}to{opacity:0;}}.sv7q57r.sv7q57r .popup-base-root,.sv7q57r.sv7q57r .popup-base-root > div{width:var(--sv7q57r-0);height:var(--sv7q57r-1);}.sv7q57r.drawer-right-placement.sv7q57r.drawer-right-placement .popup-base-root{-webkit-animation:rightShowAnimation-sv7q57r 0.2s forwards;animation:rightShowAnimation-sv7q57r 0.2s forwards;}.sv7q57r.drawer-right-placement.sv7q57r.drawer-right-placement.popup-end-animation .popup-base-root{-webkit-animation:rightHideAnimation-sv7q57r 0.2s forwards;animation:rightHideAnimation-sv7q57r 0.2s forwards;}@-webkit-keyframes rightShowAnimation-sv7q57r{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes rightShowAnimation-sv7q57r{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes rightHideAnimation-sv7q57r{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}@keyframes rightHideAnimation-sv7q57r{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}.sv7q57r.drawer-bottom-placement.sv7q57r.drawer-bottom-placement .popup-base-root{-webkit-animation:bottomShowAnimation-sv7q57r 0.2s forwards;animation:bottomShowAnimation-sv7q57r 0.2s forwards;}.sv7q57r.drawer-bottom-placement.sv7q57r.drawer-bottom-placement.popup-end-animation .popup-base-root{-webkit-animation:bottomHideAnimation-sv7q57r 0.2s forwards;animation:bottomHideAnimation-sv7q57r 0.2s forwards;}@-webkit-keyframes bottomShowAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes bottomShowAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes bottomHideAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}@keyframes bottomHideAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}.sv7q57r.drawer-left-placement.sv7q57r.drawer-left-placement .popup-base-root{-webkit-animation:leftShowAnimation-sv7q57r 0.2s forwards;animation:leftShowAnimation-sv7q57r 0.2s forwards;}.sv7q57r.drawer-left-placement.sv7q57r.drawer-left-placement.popup-end-animation .popup-base-root{-webkit-animation:leftHideAnimation-sv7q57r 0.2s forwards;animation:leftHideAnimation-sv7q57r 0.2s forwards;}@-webkit-keyframes leftShowAnimation-sv7q57r{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes leftShowAnimation-sv7q57r{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes leftHideAnimation-sv7q57r{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}@keyframes leftHideAnimation-sv7q57r{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}.sv7q57r.drawer-top-placement.sv7q57r.drawer-top-placement .popup-base-root{-webkit-animation:topShowAnimation-sv7q57r 0.2s forwards;animation:topShowAnimation-sv7q57r 0.2s forwards;}.sv7q57r.drawer-top-placement.sv7q57r.drawer-top-placement.popup-end-animation .popup-base-root{-webkit-animation:topHideAnimation-sv7q57r 0.2s forwards;animation:topHideAnimation-sv7q57r 0.2s forwards;}@-webkit-keyframes topShowAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes topShowAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes topHideAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}@keyframes topHideAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}.sv7q57r.drawer-enter-custom-animation.sv7q57r.drawer-enter-custom-animation .popup-base-root{-webkit-animation:var(--sv7q57r-2);animation:var(--sv7q57r-2);}.sv7q57r.drawer-exit-custom-animation.sv7q57r.drawer-exit-custom-animation.popup-end-animation .popup-base-root{-webkit-animation:var(--sv7q57r-3);animation:var(--sv7q57r-3);}
+.sv7q57r.sv7q57r.drawer-overlay{-webkit-animation:fadeIn-sv7q57r 0.2s forwards;animation:fadeIn-sv7q57r 0.2s forwards;-webkit-scrollbar-gutter:stable;-moz-scrollbar-gutter:stable;-ms-scrollbar-gutter:stable;scrollbar-gutter:stable;}.sv7q57r.sv7q57r.popup-end-animation .drawer-overlay{-webkit-animation:fadeOut-sv7q57r 0.2s forwards;animation:fadeOut-sv7q57r 0.2s forwards;}@-webkit-keyframes fadeIn-sv7q57r{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn-sv7q57r{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes fadeOut-sv7q57r{from{opacity:1;}to{opacity:0;}}@keyframes fadeOut-sv7q57r{from{opacity:1;}to{opacity:0;}}.sv7q57r.sv7q57r .popup-base-root,.sv7q57r.sv7q57r .popup-base-root > div{width:var(--sv7q57r-0);height:var(--sv7q57r-1);}.sv7q57r.drawer-right-placement.sv7q57r.drawer-right-placement .popup-base-root{-webkit-animation:rightShowAnimation-sv7q57r 0.2s forwards;animation:rightShowAnimation-sv7q57r 0.2s forwards;}.sv7q57r.drawer-right-placement.sv7q57r.drawer-right-placement.popup-end-animation .popup-base-root{-webkit-animation:rightHideAnimation-sv7q57r 0.2s forwards;animation:rightHideAnimation-sv7q57r 0.2s forwards;}@-webkit-keyframes rightShowAnimation-sv7q57r{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes rightShowAnimation-sv7q57r{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes rightHideAnimation-sv7q57r{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}@keyframes rightHideAnimation-sv7q57r{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}.sv7q57r.drawer-bottom-placement.sv7q57r.drawer-bottom-placement .popup-base-root{-webkit-animation:bottomShowAnimation-sv7q57r 0.2s forwards;animation:bottomShowAnimation-sv7q57r 0.2s forwards;}.sv7q57r.drawer-bottom-placement.sv7q57r.drawer-bottom-placement.popup-end-animation .popup-base-root{-webkit-animation:bottomHideAnimation-sv7q57r 0.2s forwards;animation:bottomHideAnimation-sv7q57r 0.2s forwards;}@-webkit-keyframes bottomShowAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes bottomShowAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes bottomHideAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}@keyframes bottomHideAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}.sv7q57r.drawer-left-placement.sv7q57r.drawer-left-placement .popup-base-root{-webkit-animation:leftShowAnimation-sv7q57r 0.2s forwards;animation:leftShowAnimation-sv7q57r 0.2s forwards;}.sv7q57r.drawer-left-placement.sv7q57r.drawer-left-placement.popup-end-animation .popup-base-root{-webkit-animation:leftHideAnimation-sv7q57r 0.2s forwards;animation:leftHideAnimation-sv7q57r 0.2s forwards;}@-webkit-keyframes leftShowAnimation-sv7q57r{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes leftShowAnimation-sv7q57r{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes leftHideAnimation-sv7q57r{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}@keyframes leftHideAnimation-sv7q57r{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}.sv7q57r.drawer-top-placement.sv7q57r.drawer-top-placement .popup-base-root{-webkit-animation:topShowAnimation-sv7q57r 0.2s forwards;animation:topShowAnimation-sv7q57r 0.2s forwards;}.sv7q57r.drawer-top-placement.sv7q57r.drawer-top-placement.popup-end-animation .popup-base-root{-webkit-animation:topHideAnimation-sv7q57r 0.2s forwards;animation:topHideAnimation-sv7q57r 0.2s forwards;}@-webkit-keyframes topShowAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes topShowAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes topHideAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}@keyframes topHideAnimation-sv7q57r{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}

package/cjs/components/Drawer/Drawer.tokens.js CHANGED Viewed

@@ -7,9 +7,6 @@ var classes = {
   header: 'drawer-header',
   footer: 'drawer-footer',
   overlay: 'drawer-overlay',
-  panel: 'drawer-panel',
-  enterCustomAnimation: 'drawer-enter-custom-animation',
-  exitCustomAnimation: 'drawer-exit-custom-animation',
   horizontal: 'drawer-horizontal',
   hasHeader: 'drawer-has-header',
   isRightClose: 'drawer-right-close-button',
@@ -18,12 +15,6 @@ var classes = {
   rightPlacement: 'drawer-right-placement',
   leftPlacement: 'drawer-left-placement'
 };
-var privateTokens = {
-  enterAnimation: '--plasma__private-drawer-enter-animation',
-  exitAnimation: '--plasma__private-drawer-exit-animation',
-  customEnterAnimation: '--plasma__private-drawer-custom-enter-animation',
-  customExitAnimation: '--plasma__private-drawer-custom-exit-animation'
-};
 var tokens = {
   drawerOverlayWithBlurColor: '--plasma-drawer-overlay-with-blur-color',
   drawerOverlayColor: '--plasma-drawer-overlay-color',
@@ -36,6 +27,5 @@ var tokens = {
 };
 exports.classes = classes;
-exports.privateTokens = privateTokens;
 exports.tokens = tokens;
 //# sourceMappingURL=Drawer.tokens.js.map

package/cjs/components/Drawer/Drawer.tokens.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.tokens.js","sources":["../../../src/components/Drawer/Drawer.tokens.ts"],"sourcesContent":["export const classes = {\n content: 'drawer-content',\n header: 'drawer-header',\n footer: 'drawer-footer',\n overlay: 'drawer-overlay',\n ~~panel: 'drawer-panel',\n enterCustomAnimation: 'drawer-enter-custom-animation',\n exitCustomAnimation: 'drawer-exit-custom-animation',\n~~ horizontal: 'drawer-horizontal',\n hasHeader: 'drawer-has-header',\n isRightClose: 'drawer-right-close-button',\n topPlacement: 'drawer-top-placement',\n bottomPlacement: 'drawer-bottom-placement',\n rightPlacement: 'drawer-right-placement',\n leftPlacement: 'drawer-left-placement',\n};\n\nexport const privateTokens = {\n enterAnimation: '--plasma__private-drawer-enter-animation',\n exitAnimation: '--plasma__private-drawer-exit-animation',\n customEnterAnimation: '--plasma__private-drawer-custom-enter-animation',\n customExitAnimation: '--plasma__private-drawer-custom-exit-animation',\n};\n\nexport const tokens = {\n drawerOverlayWithBlurColor: '--plasma-drawer-overlay-with-blur-color',\n drawerOverlayColor: '--plasma-drawer-overlay-color',\n background: '--plasma-drawer-background',\n shadow: '--plasma-drawer-shadow',\n contentBackgroundColor: '--plasma-drawer-content-background-color',\n padding: '--plasma-drawer-padding',\n borderRadius: '--plasma-drawer-border-radius',\n closeIconColor: '--plasma-drawer-close-icon-color',\n};\n"],"names":["classes","content","header","footer","overlay","~~panel","enterCustomAnimation","exitCustomAnimation","~~horizontal","hasHeader","isRightClose","topPlacement","bottomPlacement","rightPlacement","leftPlacement","~~privateTokens","enterAnimation","exitAnimation","customEnterAnimation","customExitAnimation","~~tokens","drawerOverlayWithBlurColor","drawerOverlayColor","background","shadow","contentBackgroundColor","padding","borderRadius","closeIconColor"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,OAAO,EAAE,gBAAgB;AACzBC,EAAAA,MAAM,EAAE,eAAe;AACvBC,EAAAA,MAAM,EAAE,eAAe;AACvBC,EAAAA,OAAO,EAAE,gBAAgB;AACzBC,EAAAA,~~KAAK,EAAE,cAAc;AACrBC,EAAAA,oBAAoB,EAAE,+BAA+B;AACrDC,EAAAA,mBAAmB,EAAE,8BAA8B;AACnDC,EAAAA,~~UAAU,EAAE,mBAAmB;AAC/BC,EAAAA,SAAS,EAAE,mBAAmB;AAC9BC,EAAAA,YAAY,EAAE,2BAA2B;AACzCC,EAAAA,YAAY,EAAE,sBAAsB;AACpCC,EAAAA,eAAe,EAAE,yBAAyB;AAC1CC,EAAAA,cAAc,EAAE,wBAAwB;AACxCC,EAAAA,aAAa,EAAE,uBAAA;AACnB,EAAC;AAEM,IAAMC,~~aAAa,GAAG;AACzBC,EAAAA,cAAc,EAAE,0CAA0C;AAC1DC,EAAAA,aAAa,EAAE,yCAAyC;AACxDC,EAAAA,oBAAoB,EAAE,iDAAiD;AACvEC,EAAAA,mBAAmB,EAAE,gDAAA;AACzB,EAAC;AAEM,IAAMC,~~MAAM,GAAG;AAClBC,EAAAA,0BAA0B,EAAE,yCAAyC;AACrEC,EAAAA,kBAAkB,EAAE,+BAA+B;AACnDC,EAAAA,UAAU,EAAE,4BAA4B;AACxCC,EAAAA,MAAM,EAAE,wBAAwB;AAChCC,EAAAA,sBAAsB,EAAE,0CAA0C;AAClEC,EAAAA,OAAO,EAAE,yBAAyB;AAClCC,EAAAA,YAAY,EAAE,+BAA+B;AAC7CC,EAAAA,cAAc,EAAE,kCAAA;AACpB~~;;;;;;~~"}
1	+ {"version":3,"file":"Drawer.tokens.js","sources":["../../../src/components/Drawer/Drawer.tokens.ts"],"sourcesContent":["export const classes = {\n content: 'drawer-content',\n header: 'drawer-header',\n footer: 'drawer-footer',\n overlay: 'drawer-overlay',\n horizontal: 'drawer-horizontal',\n hasHeader: 'drawer-has-header',\n isRightClose: 'drawer-right-close-button',\n topPlacement: 'drawer-top-placement',\n bottomPlacement: 'drawer-bottom-placement',\n rightPlacement: 'drawer-right-placement',\n leftPlacement: 'drawer-left-placement',\n};\n\nexport const tokens = {\n drawerOverlayWithBlurColor: '--plasma-drawer-overlay-with-blur-color',\n drawerOverlayColor: '--plasma-drawer-overlay-color',\n background: '--plasma-drawer-background',\n shadow: '--plasma-drawer-shadow',\n contentBackgroundColor: '--plasma-drawer-content-background-color',\n padding: '--plasma-drawer-padding',\n borderRadius: '--plasma-drawer-border-radius',\n closeIconColor: '--plasma-drawer-close-icon-color',\n};\n"],"names":["classes","content","header","footer","overlay","horizontal","hasHeader","isRightClose","topPlacement","bottomPlacement","rightPlacement","leftPlacement","tokens","drawerOverlayWithBlurColor","drawerOverlayColor","background","shadow","contentBackgroundColor","padding","borderRadius","closeIconColor"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,OAAO,EAAE,gBAAgB;AACzBC,EAAAA,MAAM,EAAE,eAAe;AACvBC,EAAAA,MAAM,EAAE,eAAe;AACvBC,EAAAA,OAAO,EAAE,gBAAgB;AACzBC,EAAAA,UAAU,EAAE,mBAAmB;AAC/BC,EAAAA,SAAS,EAAE,mBAAmB;AAC9BC,EAAAA,YAAY,EAAE,2BAA2B;AACzCC,EAAAA,YAAY,EAAE,sBAAsB;AACpCC,EAAAA,eAAe,EAAE,yBAAyB;AAC1CC,EAAAA,cAAc,EAAE,wBAAwB;AACxCC,EAAAA,aAAa,EAAE,uBAAA;AACnB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,0BAA0B,EAAE,yCAAyC;AACrEC,EAAAA,kBAAkB,EAAE,+BAA+B;AACnDC,EAAAA,UAAU,EAAE,4BAA4B;AACxCC,EAAAA,MAAM,EAAE,wBAAwB;AAChCC,EAAAA,sBAAsB,EAAE,0CAA0C;AAClEC,EAAAA,OAAO,EAAE,yBAAyB;AAClCC,EAAAA,YAAY,EAAE,+BAA+B;AAC7CC,EAAAA,cAAc,EAAE,kCAAA;AACpB;;;;;"}

package/cjs/components/Skeleton/LineSkeleton/LineSkeleton.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.base_1it9pjr_b160f301__9d69d9df{height:var(--plasma-skeleton-line-height);}.base_1it9pjr_b160f301__9d69d9df .base_1it9pjr_sn3du7u__9d69d9df{height:var(--plasma-skeleton-visible-line-height);}
+.base_1wf7n5i_b1x66a6y__80fc5ddb{height:var(--plasma-skeleton-line-height);}.base_1wf7n5i_b1x66a6y__80fc5ddb .base_1wf7n5i_sn3du7u__80fc5ddb{height:var(--plasma-skeleton-visible-line-height);}
 .LineSkeleton_styles_7yl72k_blop34g__2466eef2{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;width:100%;}
 .LineSkeleton_styles_7yl72k_sn3du7u__2466eef2{position:relative;overflow:hidden;width:100%;--plasma_private-line-skeleton-roundness:var(--sn3du7u-0);border-radius:var(--plasma_private-line-skeleton-roundness);--plasma_private-line-skeleton-gradient:var(--sn3du7u-1);position:relative;overflow:hidden;z-index:1;}.LineSkeleton_styles_7yl72k_sn3du7u__2466eef2::before{content:'';position:absolute;top:0;left:-100vw;width:200vw;height:100%;-webkit-animation:LineSkeleton_styles_7yl72k_loadingSn3du7u__2466eef2 4s linear infinite;animation:LineSkeleton_styles_7yl72k_loadingSn3du7u__2466eef2 4s linear infinite;background-image:var(--plasma_private-line-skeleton-gradient);}@-webkit-keyframes LineSkeleton_styles_7yl72k_loadingSn3du7u__2466eef2{from{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}to{-webkit-transform:translateX(100vw);-ms-transform:translateX(100vw);transform:translateX(100vw);}}@keyframes LineSkeleton_styles_7yl72k_loadingSn3du7u__2466eef2{from{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}to{-webkit-transform:translateX(100vw);-ms-transform:translateX(100vw);transform:translateX(100vw);}}

package/cjs/components/Skeleton/LineSkeleton/LineSkeleton.js CHANGED Viewed

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var base = require('./variations/_size/base.js');
-var base$1 = require('./variations/_view/base.js');
 var LineSkeleton_styles = require('./LineSkeleton.styles.js');
 var applySkeletonGradient = require('../../../mixins/applySkeletonGradient.js');
 var applyRoundness = require('../../../mixins/applyRoundness.js');
@@ -14,7 +13,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var _excluded = ["size", "lighter", "customGradientColor", "roundness", "view"];
+var _excluded = ["size", "lighter", "customGradientColor", "roundness"];
 /**
  * Копонент-составляющая Скелетона
  */
@@ -25,19 +24,17 @@ var lineSkeletonRoot = function lineSkeletonRoot(Root) {
       customGradientColor = _ref.customGradientColor,
       _ref$roundness = _ref.roundness,
       roundness = _ref$roundness === void 0 ? '16' : _ref$roundness,
-      view = _ref.view,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
     var roundnessValue = applyRoundness.getRoundness({
       roundness: roundness
     });
-    var skeletonGradientColor = lighter ? applySkeletonGradient.getSkeletonColor({
+    var skeletonGradientColor = applySkeletonGradient.getSkeletonColor({
       lighter: lighter,
       customGradientColor: customGradientColor
-    }) : undefined;
+    });
     return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
       ref: outerRootRef,
-      size: size,
-      view: view
+      size: size
     }, rest), /*#__PURE__*/React__default.default.createElement(LineSkeleton_styles.StyledVisibleLine, {
       roundness: roundnessValue,
       gradientColor: skeletonGradientColor
@@ -52,9 +49,6 @@ var lineSkeletonConfig = {
   variations: {
     size: {
       css: base.base
-    },
-    view: {
-      css: base$1.base
     }
   },
   defaults: {}

package/cjs/components/Skeleton/LineSkeleton/LineSkeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LineSkeleton.js","sources":["../../../../src/components/Skeleton/LineSkeleton/LineSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport type { RootProps } from '../../../engines';\nimport { getRoundness, getSkeletonColor } from '../../../mixins';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { ~~base as viewCSS } from './variations/_view/base';\nimport {~~ StyledVisibleLine, base } from './LineSkeleton.styles';\nimport type { LineSkeletonProps } from './LineSkeleton.types';\n\n/*\n Копонент-составляющая Скелетона\n */\nexport const lineSkeletonRoot = (Root: RootProps<HTMLDivElement, LineSkeletonProps>) =>\n forwardRef<HTMLDivElement, LineSkeletonProps>(\n ({ size, lighter, customGradientColor, roundness = '16', ~~view,~~ ...rest }, outerRootRef) => {\n const roundnessValue = getRoundness({ roundness });\n const skeletonGradientColor = ~~lighter ?~~ getSkeletonColor({ lighter, customGradientColor }) ~~: undefined~~;\n\n return (\n <Root ref={outerRootRef} size={size} ~~view=~~{~~view} {~~...rest}>\n <StyledVisibleLine roundness={roundnessValue} gradientColor={skeletonGradientColor} />\n </Root>\n );\n },\n );\n\nexport const lineSkeletonConfig = {\n name: 'LineSkeleton',\n tag: 'div',\n layout: lineSkeletonRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n ~~view: {\n css: viewCSS,\n },\n~~ },\n defaults: {},\n};\n"],"names":["lineSkeletonRoot","Root","forwardRef","_ref","outerRootRef","size","lighter","customGradientColor","_ref$roundness","roundness","~~view","~~rest","_objectWithoutProperties","_excluded","roundnessValue","getRoundness","skeletonGradientColor","getSkeletonColor","~~undefined","~~React","createElement","_extends","ref","StyledVisibleLine","gradientColor","lineSkeletonConfig","name","tag","layout","base","variations","css","sizeCSS","~~viewCSS","~~defaults"],"mappings":"~~;;;;;;;;;;;;;;;;;AAUA~~;AACA;AACA;IACaA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,IAAkD,EAAA;AAAA,EAAA,oBAC/EC,gBAAU,CACN,UAAAC,IAAA,~~EAA0EC~~,YAAY,EAAK;AAAA,IAAA,~~IAAxFC~~,IAAI,GAAAF,IAAA,CAAJE,IAAI;MAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;MAAEC,mBAAmB,GAAAJ,IAAA,CAAnBI,mBAAmB;MAAAC,cAAA,GAAAL,IAAA,CAAEM,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,cAAA;~~MAAEE~~,~~IAAI,GAAAP,IAAA,CAAJO,IAAI;AAAKC,~~MAAAA,IAAI,GAAAC,iDAAA,~~CAAAT~~,IAAA,~~EAAAU~~,SAAA,CAAA,CAAA;~~IAClE~~,IAAMC,cAAc,GAAGC,2BAAY,CAAC;~~AAAEN~~,MAAAA,SAAS,EAATA,SAAAA;AAAU,KAAC,CAAC,CAAA;~~AAClD~~,~~IAAA~~,~~IAAMO,~~qBAAqB,~~GAAGV~~,~~OAAO,GAAGW,~~sCAAgB,CAAC;~~AAAEX~~,MAAAA,OAAO,EAAPA,OAAO;AAAEC,MAAAA,mBAAmB,EAAnBA,mBAAAA;~~KAAqB~~,CAAC,~~GAAGW,SAAS,~~CAAA;~~AAEtG~~,IAAA,~~oBACIC~~,sBAAA,CAAAC,aAAA,~~CAACnB~~,IAAI,~~EAAAoB~~,iCAAA,CAAA;AAACC,MAAAA,GAAG,~~EAAElB~~,YAAa;AAACC,MAAAA,IAAI,EAAEA,~~IAAK;AAACK,MAAAA,IAAI,EAAEA,~~IAAAA;AAAK,KAAA,~~EAAKC~~,IAAI,~~CACrDQ~~,eAAAA,sBAAA,CAAAC,aAAA,CAACG,qCAAiB,EAAA;~~AAACd~~,MAAAA,SAAS,~~EAAEK~~,cAAe;~~AAACU~~,MAAAA,aAAa,~~EAAER~~,qBAAAA;AAAsB,KAAE,CACnF,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,~~IAAMS~~,kBAAkB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,cAAc;AACpBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,~~EAAE5B~~,gBAAgB;~~AACxB6B~~,EAAAA,IAAI,EAAJA,wBAAI;AACJC,EAAAA,UAAU,EAAE;~~AACRzB~~,IAAAA,IAAI,EAAE;~~AACF0B~~,MAAAA,GAAG,EAAEC,SAAAA;~~KACR;AACDtB,IAAAA,IAAI,EAAE;AACFqB,MAAAA,GAAG,EAAEE,WAAAA;~~AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE,EAAC;AACf;;;;;"}
1	+ {"version":3,"file":"LineSkeleton.js","sources":["../../../../src/components/Skeleton/LineSkeleton/LineSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport type { RootProps } from '../../../engines';\nimport { getRoundness, getSkeletonColor } from '../../../mixins';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { StyledVisibleLine, base } from './LineSkeleton.styles';\nimport type { LineSkeletonProps } from './LineSkeleton.types';\n\n/*\n Копонент-составляющая Скелетона\n */\nexport const lineSkeletonRoot = (Root: RootProps<HTMLDivElement, LineSkeletonProps>) =>\n forwardRef<HTMLDivElement, LineSkeletonProps>(\n ({ size, lighter, customGradientColor, roundness = '16', ...rest }, outerRootRef) => {\n const roundnessValue = getRoundness({ roundness });\n const skeletonGradientColor = getSkeletonColor({ lighter, customGradientColor });\n\n return (\n <Root ref={outerRootRef} size={size} {...rest}>\n <StyledVisibleLine roundness={roundnessValue} gradientColor={skeletonGradientColor} />\n </Root>\n );\n },\n );\n\nexport const lineSkeletonConfig = {\n name: 'LineSkeleton',\n tag: 'div',\n layout: lineSkeletonRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n },\n defaults: {},\n};\n"],"names":["lineSkeletonRoot","Root","forwardRef","_ref","outerRootRef","size","lighter","customGradientColor","_ref$roundness","roundness","rest","_objectWithoutProperties","_excluded","roundnessValue","getRoundness","skeletonGradientColor","getSkeletonColor","React","createElement","_extends","ref","StyledVisibleLine","gradientColor","lineSkeletonConfig","name","tag","layout","base","variations","css","sizeCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;AASA;AACA;AACA;IACaA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,IAAkD,EAAA;AAAA,EAAA,oBAC/EC,gBAAU,CACN,UAAAC,IAAA,EAAoEC,YAAY,EAAK;AAAA,IAAA,IAAlFC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;MAAEC,mBAAmB,GAAAJ,IAAA,CAAnBI,mBAAmB;MAAAC,cAAA,GAAAL,IAAA,CAAEM,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,cAAA;AAAKE,MAAAA,IAAI,GAAAC,iDAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA,CAAA;IAC5D,IAAMC,cAAc,GAAGC,2BAAY,CAAC;AAAEL,MAAAA,SAAS,EAATA,SAAAA;AAAU,KAAC,CAAC,CAAA;IAClD,IAAMM,qBAAqB,GAAGC,sCAAgB,CAAC;AAAEV,MAAAA,OAAO,EAAPA,OAAO;AAAEC,MAAAA,mBAAmB,EAAnBA,mBAAAA;AAAoB,KAAC,CAAC,CAAA;AAEhF,IAAA,oBACIU,sBAAA,CAAAC,aAAA,CAACjB,IAAI,EAAAkB,iCAAA,CAAA;AAACC,MAAAA,GAAG,EAAEhB,YAAa;AAACC,MAAAA,IAAI,EAAEA,IAAAA;AAAK,KAAA,EAAKK,IAAI,CACzCO,eAAAA,sBAAA,CAAAC,aAAA,CAACG,qCAAiB,EAAA;AAACZ,MAAAA,SAAS,EAAEI,cAAe;AAACS,MAAAA,aAAa,EAAEP,qBAAAA;AAAsB,KAAE,CACnF,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMQ,kBAAkB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,cAAc;AACpBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE1B,gBAAgB;AACxB2B,EAAAA,IAAI,EAAJA,wBAAI;AACJC,EAAAA,UAAU,EAAE;AACRvB,IAAAA,IAAI,EAAE;AACFwB,MAAAA,GAAG,EAAEC,SAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE,EAAC;AACf;;;;;"}

package/cjs/components/Skeleton/LineSkeleton/LineSkeleton.styles.js CHANGED Viewed

@@ -4,7 +4,6 @@ require('./LineSkeleton.styles_7yl72k.css');
 Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('@linaria/react');
-var tokens = require('../tokens.js');
 var base = "blop34g";
 var _exp = function _exp() {
@@ -16,7 +15,7 @@ var _exp = function _exp() {
 var _exp3 = function _exp3() {
   return function (_ref2) {
     var gradientColor = _ref2.gradientColor;
-    return gradientColor || "var(".concat(tokens.tokens.gradientColor, ")");
+    return gradientColor;
   };
 };
 var StyledVisibleLine = /*#__PURE__*/react.styled('div')({

package/cjs/components/Skeleton/LineSkeleton/LineSkeleton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LineSkeleton.styles.js","sources":["../../../../src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyRoundness, applySkeletonGradient } from '../../../mixins';\~~nimport { tokens } from '../tokens';\~~n\nimport type { StyledVisibleLineProps } from './LineSkeleton.types';\n\nexport const base = css`\n display: flex;\n align-items: center;\n\n width: 100%;\n`;\n\nexport const StyledVisibleLine = styled.div<StyledVisibleLineProps>`\n position: relative;\n overflow: hidden;\n\n width: 100%;\n\n --plasma_private-line-skeleton-roundness: ${({ roundness }) => roundness};\n ${applyRoundness('var(--plasma_private-line-skeleton-roundness)')};\n\n --plasma_private-line-skeleton-gradient: ${({ gradientColor }) => gradientColor ~~\|\| `var(${tokens.gradientColor~~}~~)`}~~;\n ${applySkeletonGradient('var(--plasma_private-line-skeleton-gradient)')};\n`;\n"],"names":["base","_exp","_ref","roundness","_exp3","_ref2","gradientColor","~~concat","tokens","~~StyledVisibleLine","styled","name","class","propsAsIs","vars"],"mappings":"~~;;;;;;;AAQO~~,IAAMA,IAAI,GAKhB,UAAA;AAAC,IAAAC,IAAA,~~GAZgBA~~,~~SAYhBA~~,IAAAA,GAAA;AAAA,EAAA,OAQ8C,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,IAAAA,CAAAA,SAAAA,CAAAA;AAAAA,IAAAA,OAAgBA,SAAS,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,~~GApB1DA~~,~~SAoB0DA~~,KAAAA,GAAA;AAAA,EAAA,OAG7B,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,aAAAA,GAAAA,KAAAA,CAAAA,aAAAA,CAAAA;AAAAA,IAAAA,OAAoBA,aAAa,~~IAAAC,MAAAA,CAAAA,MAAA,CAAWC,aAAM,CAACF,aAAa,EAAG,GAAA,~~CAAA~~,CAAA~~;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;~~AAT9G~~,~~IAAMG~~,iBAAiB,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,~~cAMSb~~,IAA4B,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAG7BG,~~KAAsE~~,EAAA,CAAA;AAAA,GAAA;AAAA,~~CAEpH~~;;;;;"}
1	+ {"version":3,"file":"LineSkeleton.styles.js","sources":["../../../../src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyRoundness, applySkeletonGradient } from '../../../mixins';\n\nimport type { StyledVisibleLineProps } from './LineSkeleton.types';\n\nexport const base = css`\n display: flex;\n align-items: center;\n\n width: 100%;\n`;\n\nexport const StyledVisibleLine = styled.div<StyledVisibleLineProps>`\n position: relative;\n overflow: hidden;\n\n width: 100%;\n\n --plasma_private-line-skeleton-roundness: ${({ roundness }) => roundness};\n ${applyRoundness('var(--plasma_private-line-skeleton-roundness)')};\n\n --plasma_private-line-skeleton-gradient: ${({ gradientColor }) => gradientColor};\n ${applySkeletonGradient('var(--plasma_private-line-skeleton-gradient)')};\n`;\n"],"names":["base","_exp","_ref","roundness","_exp3","_ref2","gradientColor","StyledVisibleLine","styled","name","class","propsAsIs","vars"],"mappings":";;;;;;AAOO,IAAMA,IAAI,GAKhB,UAAA;AAAC,IAAAC,IAAA,GAXgBA,SAWhBA,IAAAA,GAAA;AAAA,EAAA,OAQ8C,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,IAAAA,CAAAA,SAAAA,CAAAA;AAAAA,IAAAA,OAAgBA,SAAS,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAnB1DA,SAmB0DA,KAAAA,GAAA;AAAA,EAAA,OAG7B,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,aAAAA,GAAAA,KAAAA,CAAAA,aAAAA,CAAAA;AAAAA,IAAAA,OAAoBA,aAAa,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAT5E,IAAMC,iBAAiB,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAMSX,IAA4B,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAG7BG,KAAoC,EAAA,CAAA;AAAA,GAAA;AAAA,CAElF;;;;;"}

package/cjs/components/Skeleton/LineSkeleton/variations/_size/base.js CHANGED Viewed

@@ -1,4 +1,4 @@
-require('./base_x642ct.css');
+require('./base_1wf7n5i.css');
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/components/Skeleton/LineSkeleton/variations/_size/base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base.js","sources":["../../../../../../src/components/Skeleton/LineSkeleton/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css~~``;\~~n"],"names":["base"],"mappings":";;;;~~AAEO~~,IAAMA,IAAI,~~GAAQ~~;;;;"}
1	+ {"version":3,"file":"base.js","sources":["../../../../../../src/components/Skeleton/LineSkeleton/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { StyledVisibleLine } from '../../LineSkeleton.styles';\nimport { tokens } from '../../../tokens';\n\nexport const base = css`\n height: var(${tokens.lineHeight});\n\n & ${StyledVisibleLine} {\n height: var(${tokens.visibleLineHeight});\n }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAMhB;;;;"}

package/cjs/components/Skeleton/LineSkeleton/variations/_size/base_1wf7n5i.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .b1x66a6y{height:var(--plasma-skeleton-line-height);}.b1x66a6y .sn3du7u{height:var(--plasma-skeleton-visible-line-height);}

package/cjs/components/Skeleton/TextSkeleton/TextSkeleton.js CHANGED Viewed

@@ -10,7 +10,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var _excluded = ["lines", "width", "roundness", "customGradientColor", "lighter", "size", "view"];
+var _excluded = ["lines", "width", "roundness", "customGradientColor", "lighter", "size"];
 var variousWidth = [7.58, 5.27, 13.54, 6.63, 0.28, 14.8, 0.33, 11.26, 14.1, 10.59, 3.38, 13.5, 7.71, 3.34, 7.96];
 /**
@@ -26,8 +26,6 @@ var textSkeleton = function textSkeleton(Component) {
       lighter = _ref.lighter,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'bodyM' : _ref$size,
-      _ref$view = _ref.view,
-      view = _ref$view === void 0 ? 'default' : _ref$view,
       props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
     var _useState = React.useState(null),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -69,7 +67,6 @@ var textSkeleton = function textSkeleton(Component) {
       return /*#__PURE__*/React__default.default.createElement(ComponentSkeleton, {
         key: "line:".concat(i),
         size: size,
-        view: view,
         roundness: roundness,
         customGradientColor: customGradientColor,
         lighter: lighter,

package/cjs/components/Skeleton/TextSkeleton/TextSkeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextSkeleton.js","sources":["../../../../src/components/Skeleton/TextSkeleton/TextSkeleton.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport type { FC, HTMLAttributes } from 'react';\n\nimport type { LineSkeletonProps } from '../LineSkeleton';\n\nimport type { TextSkeletonBaseProps } from './TextSkeleton.types';\nimport { StyledTextSkeleton } from './TextSkeleton.styles';\n\nconst variousWidth = [7.58, 5.27, 13.54, 6.63, 0.28, 14.8, 0.33, 11.26, 14.1, 10.59, 3.38, 13.5, 7.71, 3.34, 7.96];\n\n/*\n Хок для создания компонента плейсхолдера нескольких строк текста.\n * Размеры компонента задаются с помощью констант и соответствуют размерам [типографических элементов](/?path=/docs/).\n */\nexport const textSkeleton = <T extends LineSkeletonProps>(\n Component: FC<T>,\n): FC<T & TextSkeletonBaseProps & HTMLAttributes<HTMLDivElement>> => ({\n lines,\n width,\n roundness,\n customGradientColor,\n lighter,\n size = 'bodyM',\n ~~view = 'default',\n~~ ...props\n}: T & TextSkeletonBaseProps & HTMLAttributes<HTMLDivElement>) => {\n const [fixedWidth, setFixedWidth] = useState<string \| number \| null>(null);\n const [linesWidth, setLinesWidth] = useState([]);\n\n useEffect(() => {\n if (!width) {\n setFixedWidth(null);\n const computedLengths = Array(lines)\n .fill(0)\n .reduce((acc, _, i) => {\n let w;\n // Последняя строка\n if (i === lines - 1 && lines !== 1) {\n w = 45 - variousWidth[i % variousWidth.length];\n } else if (lines === 1 \|\| lines === 2) {\n // Единственная или первая из двух\n w = 100;\n } else {\n w = 100 - variousWidth[i % variousWidth.length];\n }\n\n return { ...acc, [i]: w };\n }, {});\n\n setLinesWidth(Object.values(computedLengths));\n return;\n }\n\n if (!Number.isNaN(Number(width))) {\n setFixedWidth(`${width}%`);\n } else {\n setFixedWidth(String(width));\n }\n }, [width, lines]);\n\n // TODO: Подумать как можно обойти явное приведение типов\n const ComponentSkeleton = Component as FC<LineSkeletonProps>;\n\n return (\n <StyledTextSkeleton {...props}>\n {Array.from(Array<number>(lines), (_, i) => {\n return (\n <ComponentSkeleton\n key={`line:${i}`}\n size={size}\n ~~view={view}\n~~ roundness={roundness}\n customGradientColor={customGradientColor}\n lighter={lighter}\n style={{ width: fixedWidth \|\| `${linesWidth[i]}%` }}\n />\n );\n })}\n </StyledTextSkeleton>\n );\n};\n"],"names":["variousWidth","textSkeleton","Component","_ref","lines","width","roundness","customGradientColor","lighter","_ref$size","size","~~_ref$view","view","~~props","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","fixedWidth","setFixedWidth","_useState3","_useState4","linesWidth","setLinesWidth","useEffect","computedLengths","Array","fill","reduce","acc","_","i","w","length","_objectSpread","_defineProperty","Object","values","Number","isNaN","concat","String","ComponentSkeleton","React","createElement","StyledTextSkeleton","from","key","style"],"mappings":";;;;;;;;;;;;;AAQA,IAAMA,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;;AAElH;AACA;AACA;AACA;IACaC,YAAY,GAAG,SAAfA,YAAYA,CACrBC,SAAgB,EAAA;EAAA,OACiD,UAAAC,IAAA,~~EASH~~;AAAA,IAAA,~~IAR9DC~~,KAAK,GAAAD,IAAA,CAALC,KAAK;MACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;MACLC,SAAS,GAAAH,IAAA,CAATG,SAAS;MACTC,mBAAmB,GAAAJ,IAAA,CAAnBI,mBAAmB;MACnBC,OAAO,GAAAL,IAAA,CAAPK,OAAO;MAAAC,SAAA,GAAAN,IAAA,CACPO,IAAI;AAAJA,MAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;~~MAAAE~~,~~SAAA,GAAAR,IAAA,CACdS,IAAI;AAAJA,~~MAAAA,~~IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,SAAA;AACbE,MAAAA,~~KAAK,GAAAC,iDAAA,~~CAAAX~~,IAAA,~~EAAAY~~,SAAA,CAAA,CAAA;AAER,IAAA,IAAAC,SAAA,GAAoCC,cAAQ,CAAyB,IAAI,CAAC;MAAAC,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAnEI,MAAAA,UAAU,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,MAAAA,aAAa,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAChC,IAAA,IAAAI,UAAA,GAAoCL,cAAQ,CAAC,EAAE,CAAC;MAAAM,UAAA,GAAAJ,uCAAA,CAAAG,UAAA,EAAA,CAAA,CAAA;AAAzCE,MAAAA,UAAU,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,MAAAA,aAAa,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAEhCG,IAAAA,eAAS,CAAC,YAAM;MACZ,IAAI,~~CAACrB~~,KAAK,EAAE;~~QACRgB~~,aAAa,CAAC,IAAI,CAAC,CAAA;QACnB,IAAMM,eAAe,GAAGC,KAAK,~~CAACxB~~,KAAK,CAAC,CAC/~~ByB~~,IAAI,CAAC,CAAC,CAAC,CACPC,MAAM,CAAC,UAACC,GAAG,EAAEC,CAAC,EAAEC,CAAC,EAAK;AACnB,UAAA,IAAIC,CAAC,CAAA;AACL;UACA,IAAID,CAAC,~~KAAK7B~~,KAAK,GAAG,CAAC,IAAIA,KAAK,KAAK,CAAC,EAAE;~~YAChC8B~~,CAAC,GAAG,EAAE,~~GAAGlC~~,YAAY,~~CAACiC~~,CAAC,~~GAAGjC~~,YAAY,~~CAACmC~~,MAAM,CAAC,CAAA;WACjD,MAAM,~~IAAI/B~~,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,CAAC,EAAE;AACnC;~~AACA8B~~,YAAAA,CAAC,GAAG,GAAG,CAAA;AACX,WAAC,MAAM;YACHA,CAAC,GAAG,GAAG,~~GAAGlC~~,YAAY,~~CAACiC~~,CAAC,~~GAAGjC~~,YAAY,~~CAACmC~~,MAAM,CAAC,CAAA;AACnD,WAAA;UAEA,OAAAC,uCAAA,CAAAA,uCAAA,CAAYL,EAAAA,EAAAA,GAAG,OAAAM,wCAAA,CAAA,EAAA,EAAGJ,CAAC,EAAGC,CAAC,CAAA,CAAA,CAAA;SAC1B,EAAE,EAAE,CAAC,CAAA;AAEVT,QAAAA,aAAa,CAACa,MAAM,CAACC,MAAM,CAACZ,eAAe,CAAC,CAAC,CAAA;AAC7C,QAAA,OAAA;AACJ,OAAA;MAEA,IAAI,CAACa,MAAM,CAACC,KAAK,CAACD,MAAM,~~CAACnC~~,KAAK,CAAC,CAAC,EAAE;~~AAC9BgB~~,QAAAA,aAAa,CAAAqB,EAAAA,CAAAA,MAAA,~~CAAIrC~~,KAAK,MAAG,CAAC,CAAA;AAC9B,OAAC,MAAM;~~AACHgB~~,QAAAA,aAAa,CAACsB,MAAM,~~CAACtC~~,KAAK,CAAC,CAAC,CAAA;AAChC,OAAA;AACJ,KAAC,EAAE,CAACA,KAAK,EAAED,KAAK,CAAC,CAAC,CAAA;;AAElB;IACA,~~IAAMwC~~,iBAAiB,~~GAAG1C~~,SAAkC,CAAA;IAE5D,~~oBACI2C~~,sBAAA,CAAAC,aAAA,CAACC,sCAAkB,EAAKlC,KAAK,EACxBe,KAAK,CAACoB,IAAI,CAACpB,KAAK,~~CAASxB~~,KAAK,CAAC,EAAE,~~UAAC4B~~,CAAC,EAAEC,CAAC,EAAK;AACxC,MAAA,oBACIY,sBAAA,CAAAC,aAAA,CAACF,iBAAiB,EAAA;AACdK,QAAAA,GAAG,EAAAP,OAAAA,CAAAA,MAAA,CAAUT,CAAC,CAAG;~~AACjBvB~~,QAAAA,IAAI,EAAEA,IAAK;~~AACXE~~,QAAAA,~~IAAI,EAAEA,IAAK;AACXN,QAAAA,~~SAAS,EAAEA,SAAU;AACrBC,QAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,QAAAA,OAAO,EAAEA,OAAQ;~~AACjB0C~~,QAAAA,KAAK,EAAE;~~UAAE7C~~,KAAK,~~EAAEe~~,UAAU,IAAAsB,EAAAA,CAAAA,MAAA,CAAOlB,UAAU,CAACS,CAAC,CAAC,EAAA,GAAA,CAAA;AAAI,SAAA;AAAE,OACvD,CAAC,CAAA;AAEV,KAAC,CACe,CAAC,CAAA;GAE5B,CAAA;AAAA;;;;"}
1	+ {"version":3,"file":"TextSkeleton.js","sources":["../../../../src/components/Skeleton/TextSkeleton/TextSkeleton.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport type { FC, HTMLAttributes } from 'react';\n\nimport type { LineSkeletonProps } from '../LineSkeleton';\n\nimport type { TextSkeletonBaseProps } from './TextSkeleton.types';\nimport { StyledTextSkeleton } from './TextSkeleton.styles';\n\nconst variousWidth = [7.58, 5.27, 13.54, 6.63, 0.28, 14.8, 0.33, 11.26, 14.1, 10.59, 3.38, 13.5, 7.71, 3.34, 7.96];\n\n/*\n Хок для создания компонента плейсхолдера нескольких строк текста.\n * Размеры компонента задаются с помощью констант и соответствуют размерам [типографических элементов](/?path=/docs/).\n */\nexport const textSkeleton = <T extends LineSkeletonProps>(\n Component: FC<T>,\n): FC<T & TextSkeletonBaseProps & HTMLAttributes<HTMLDivElement>> => ({\n lines,\n width,\n roundness,\n customGradientColor,\n lighter,\n size = 'bodyM',\n ...props\n}: T & TextSkeletonBaseProps & HTMLAttributes<HTMLDivElement>) => {\n const [fixedWidth, setFixedWidth] = useState<string \| number \| null>(null);\n const [linesWidth, setLinesWidth] = useState([]);\n\n useEffect(() => {\n if (!width) {\n setFixedWidth(null);\n const computedLengths = Array(lines)\n .fill(0)\n .reduce((acc, _, i) => {\n let w;\n // Последняя строка\n if (i === lines - 1 && lines !== 1) {\n w = 45 - variousWidth[i % variousWidth.length];\n } else if (lines === 1 \|\| lines === 2) {\n // Единственная или первая из двух\n w = 100;\n } else {\n w = 100 - variousWidth[i % variousWidth.length];\n }\n\n return { ...acc, [i]: w };\n }, {});\n\n setLinesWidth(Object.values(computedLengths));\n return;\n }\n\n if (!Number.isNaN(Number(width))) {\n setFixedWidth(`${width}%`);\n } else {\n setFixedWidth(String(width));\n }\n }, [width, lines]);\n\n // TODO: Подумать как можно обойти явное приведение типов\n const ComponentSkeleton = Component as FC<LineSkeletonProps>;\n\n return (\n <StyledTextSkeleton {...props}>\n {Array.from(Array<number>(lines), (_, i) => {\n return (\n <ComponentSkeleton\n key={`line:${i}`}\n size={size}\n roundness={roundness}\n customGradientColor={customGradientColor}\n lighter={lighter}\n style={{ width: fixedWidth \|\| `${linesWidth[i]}%` }}\n />\n );\n })}\n </StyledTextSkeleton>\n );\n};\n"],"names":["variousWidth","textSkeleton","Component","_ref","lines","width","roundness","customGradientColor","lighter","_ref$size","size","props","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","fixedWidth","setFixedWidth","_useState3","_useState4","linesWidth","setLinesWidth","useEffect","computedLengths","Array","fill","reduce","acc","_","i","w","length","_objectSpread","_defineProperty","Object","values","Number","isNaN","concat","String","ComponentSkeleton","React","createElement","StyledTextSkeleton","from","key","style"],"mappings":"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"}

package/cjs/components/Skeleton/tokens.js CHANGED Viewed

@@ -4,8 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tokens = {
   lineHeight: '--plasma-skeleton-line-height',
-  visibleLineHeight: '--plasma-skeleton-visible-line-height',
-  gradientColor: '--plasma-skeleton-gradient-color'
+  visibleLineHeight: '--plasma-skeleton-visible-line-height'
 };
 exports.tokens = tokens;

package/cjs/components/Skeleton/tokens.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tokens.js","sources":["../../../src/components/Skeleton/tokens.ts"],"sourcesContent":["export const tokens = {\n lineHeight: '--plasma-skeleton-line-height',\n visibleLineHeight: '--plasma-skeleton-visible-line-height',\n ~~gradientColor: '--plasma-skeleton-gradient-color',\n~~};\n"],"names":["tokens","lineHeight","visibleLineHeight"~~,"gradientColor"~~],"mappings":";;;;AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,+BAA+B;AAC3CC,EAAAA,iBAAiB,EAAE,~~uCAAuC~~;~~AAC1DC,EAAAA,aAAa,EAAE,kCAAA;AACnB~~;;;;"}
1	+ {"version":3,"file":"tokens.js","sources":["../../../src/components/Skeleton/tokens.ts"],"sourcesContent":["export const tokens = {\n lineHeight: '--plasma-skeleton-line-height',\n visibleLineHeight: '--plasma-skeleton-visible-line-height',\n};\n"],"names":["tokens","lineHeight","visibleLineHeight"],"mappings":";;;;AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,+BAA+B;AAC3CC,EAAAA,iBAAiB,EAAE,uCAAA;AACvB;;;;"}