@salutejs/plasma-new-hope 0.263.1-canary.1764.13286897844.0 → 0.264.0-canary.1760.13286965233.0

package/es/components/Panel/Panel.js

@@ -1,14 +1,14 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef } from 'react';
 import { cx } from '../../utils/index.js';
 import { base } from './variations/_view/base.js';
 import { base as base$1 } from './variations/_size/base.js';
 import { base as base$2 } from './variations/_borderRadius/base.js';
-import { classes } from './Panel.tokens.js';
+import { classes, privateTokens } from './Panel.tokens.js';
 import { StyledWrapper } from './Panel.styles.js';
 import { getSizeValueFromProp } from '../../utils/getSizeValueFromProp.js';
 
-var _excluded = ["children", "view", "size", "width", "height", "className", "style"];
+var _excluded = ["children", "view", "size", "width", "height", "customBackgroundColor", "customContentBackgroundColor", "className", "style"];
 var panelRoot = function panelRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
     var children = _ref.children,
@@ -16,6 +16,8 @@ var panelRoot = function panelRoot(Root) {
       size = _ref.size,
       width = _ref.width,
       height = _ref.height,
+      customBackgroundColor = _ref.customBackgroundColor,
+      customContentBackgroundColor = _ref.customContentBackgroundColor,
       className = _ref.className,
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -26,11 +28,10 @@ var panelRoot = function panelRoot(Root) {
       view: view,
       size: size,
       className: cx(classes.root, className),
-      style: _objectSpread2(_objectSpread2({}, style), {}, {
-        '--plasma_private-panel-width': innerWidth,
-        '--plasma_private-panel-height': innerHeight
-      })
-    }, rest), /*#__PURE__*/React.createElement(StyledWrapper, null, children));
+      style: _objectSpread2(_objectSpread2({}, style), {}, _defineProperty(_defineProperty(_defineProperty({}, privateTokens.width, innerWidth), privateTokens.height, innerHeight), privateTokens.backgroundColor, customBackgroundColor))
+    }, rest), /*#__PURE__*/React.createElement(StyledWrapper, {
+      customContentBackgroundColor: customContentBackgroundColor
+    }, children));
   });
 };
 var panelConfig = {

package/es/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { CSSProperties } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { cx, getSizeValueFromProp } from '../../utils';\n\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 type { PanelProps } from './Panel.types';\nimport { classes } from './Panel.tokens';\nimport { StyledWrapper } from './Panel.styles';\n\nexport const panelRoot = (Root: RootProps<HTMLDivElement, PanelProps>) =>\n    forwardRef<HTMLDivElement, PanelProps>(\n        ({ children, view, size, width, height, className, style, ...rest }, outerRef) => {\n            const innerWidth = width ? getSizeValueFromProp(width) : '100%';\n            const innerHeight = height ? getSizeValueFromProp(height) : '100%';\n\n            return (\n                <Root\n                    ref={outerRef}\n                    view={view}\n                    size={size}\n                    className={cx(classes.root, className)}\n                    style={\n                        {\n                            ...style,\n                            '--plasma_private-panel-width': innerWidth,\n                            '--plasma_private-panel-height': innerHeight,\n                        } as CSSProperties\n                    }\n                    {...rest}\n                >\n                    <StyledWrapper>{children}</StyledWrapper>\n                </Root>\n            );\n        },\n    );\n\nexport const panelConfig = {\n    name: 'Panel',\n    tag: 'div',\n    layout: panelRoot,\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":["panelRoot","Root","forwardRef","_ref","outerRef","children","view","size","width","height","className","style","rest","_objectWithoutProperties","_excluded","innerWidth","getSizeValueFromProp","innerHeight","React","createElement","_extends","ref","cx","classes","root","_objectSpread","StyledWrapper","panelConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","borderRadius","borderRadiusCSS","defaults"],"mappings":";;;;;;;;;;;IAaaA,SAAS,GAAG,SAAZA,SAASA,CAAIC,IAA2C,EAAA;AAAA,EAAA,oBACjEC,UAAU,CACN,UAAAC,IAAA,EAAqEC,QAAQ,EAAK;AAAA,IAAA,IAA/EC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;MAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;MAAEC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;MAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;MAAEC,MAAM,GAAAN,IAAA,CAANM,MAAM;MAAEC,SAAS,GAAAP,IAAA,CAATO,SAAS;MAAEC,KAAK,GAAAR,IAAA,CAALQ,KAAK;AAAKC,MAAAA,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA,CAAA,CAAA;IAC7D,IAAMC,UAAU,GAAGP,KAAK,GAAGQ,oBAAoB,CAACR,KAAK,CAAC,GAAG,MAAM,CAAA;IAC/D,IAAMS,WAAW,GAAGR,MAAM,GAAGO,oBAAoB,CAACP,MAAM,CAAC,GAAG,MAAM,CAAA;AAElE,IAAA,oBACIS,KAAA,CAAAC,aAAA,CAAClB,IAAI,EAAAmB,QAAA,CAAA;AACDC,MAAAA,GAAG,EAAEjB,QAAS;AACdE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,IAAI,EAAEA,IAAK;MACXG,SAAS,EAAEY,EAAE,CAACC,OAAO,CAACC,IAAI,EAAEd,SAAS,CAAE;AACvCC,MAAAA,KAAK,EAAAc,cAAA,CAAAA,cAAA,KAEMd,KAAK,CAAA,EAAA,EAAA,EAAA;AACR,QAAA,8BAA8B,EAAEI,UAAU;AAC1C,QAAA,+BAA+B,EAAEE,WAAAA;AAAW,OAAA,CAAA;KAGhDL,EAAAA,IAAI,CAERM,eAAAA,KAAA,CAAAC,aAAA,CAACO,aAAa,EAAA,IAAA,EAAErB,QAAwB,CACtC,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMsB,WAAW,GAAG;AACvBC,EAAAA,IAAI,EAAE,OAAO;AACbC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE9B,SAAS;AACjB+B,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,UAAU,EAAE;AACR1B,IAAAA,IAAI,EAAE;AACF2B,MAAAA,GAAG,EAAEC,IAAAA;KACR;AACD3B,IAAAA,IAAI,EAAE;AACF0B,MAAAA,GAAG,EAAEE,MAAAA;KACR;AACDC,IAAAA,YAAY,EAAE;AACVH,MAAAA,GAAG,EAAEI,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNhC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAG;AACT6B,IAAAA,YAAY,EAAE,MAAA;AAClB,GAAA;AACJ;;;;"}
+{"version":3,"file":"Panel.js","sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { CSSProperties } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { cx, getSizeValueFromProp } from '../../utils';\n\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 type { PanelProps } from './Panel.types';\nimport { classes, privateTokens } from './Panel.tokens';\nimport { StyledWrapper } from './Panel.styles';\n\nexport const panelRoot = (Root: RootProps<HTMLDivElement, PanelProps>) =>\n    forwardRef<HTMLDivElement, PanelProps>(\n        (\n            {\n                children,\n                view,\n                size,\n                width,\n                height,\n                customBackgroundColor,\n                customContentBackgroundColor,\n                className,\n                style,\n                ...rest\n            },\n            outerRef,\n        ) => {\n            const innerWidth = width ? getSizeValueFromProp(width) : '100%';\n            const innerHeight = height ? getSizeValueFromProp(height) : '100%';\n\n            return (\n                <Root\n                    ref={outerRef}\n                    view={view}\n                    size={size}\n                    className={cx(classes.root, className)}\n                    style={\n                        {\n                            ...style,\n                            [privateTokens.width]: innerWidth,\n                            [privateTokens.height]: innerHeight,\n                            [privateTokens.backgroundColor]: customBackgroundColor,\n                        } as CSSProperties\n                    }\n                    {...rest}\n                >\n                    <StyledWrapper customContentBackgroundColor={customContentBackgroundColor}>\n                        {children}\n                    </StyledWrapper>\n                </Root>\n            );\n        },\n    );\n\nexport const panelConfig = {\n    name: 'Panel',\n    tag: 'div',\n    layout: panelRoot,\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":["panelRoot","Root","forwardRef","_ref","outerRef","children","view","size","width","height","customBackgroundColor","customContentBackgroundColor","className","style","rest","_objectWithoutProperties","_excluded","innerWidth","getSizeValueFromProp","innerHeight","React","createElement","_extends","ref","cx","classes","root","_objectSpread","_defineProperty","privateTokens","backgroundColor","StyledWrapper","panelConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","borderRadius","borderRadiusCSS","defaults"],"mappings":";;;;;;;;;;;IAaaA,SAAS,GAAG,SAAZA,SAASA,CAAIC,IAA2C,EAAA;AAAA,EAAA,oBACjEC,UAAU,CACN,UAAAC,IAAA,EAaIC,QAAQ,EACP;AAAA,IAAA,IAZGC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;MACRC,IAAI,GAAAH,IAAA,CAAJG,IAAI;MACJC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;MACJC,KAAK,GAAAL,IAAA,CAALK,KAAK;MACLC,MAAM,GAAAN,IAAA,CAANM,MAAM;MACNC,qBAAqB,GAAAP,IAAA,CAArBO,qBAAqB;MACrBC,4BAA4B,GAAAR,IAAA,CAA5BQ,4BAA4B;MAC5BC,SAAS,GAAAT,IAAA,CAATS,SAAS;MACTC,KAAK,GAAAV,IAAA,CAALU,KAAK;AACFC,MAAAA,IAAI,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA,CAAA,CAAA;IAIX,IAAMC,UAAU,GAAGT,KAAK,GAAGU,oBAAoB,CAACV,KAAK,CAAC,GAAG,MAAM,CAAA;IAC/D,IAAMW,WAAW,GAAGV,MAAM,GAAGS,oBAAoB,CAACT,MAAM,CAAC,GAAG,MAAM,CAAA;AAElE,IAAA,oBACIW,KAAA,CAAAC,aAAA,CAACpB,IAAI,EAAAqB,QAAA,CAAA;AACDC,MAAAA,GAAG,EAAEnB,QAAS;AACdE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAEY,EAAE,CAACC,OAAO,CAACC,IAAI,EAAEd,SAAS,CAAE;AACvCC,MAAAA,KAAK,EAAAc,cAAA,CAAAA,cAAA,CAEMd,EAAAA,EAAAA,KAAK,CAAAe,EAAAA,EAAAA,EAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CACPC,EAAAA,EAAAA,aAAa,CAACrB,KAAK,EAAGS,UAAU,CAChCY,EAAAA,aAAa,CAACpB,MAAM,EAAGU,WAAW,CAClCU,EAAAA,aAAa,CAACC,eAAe,EAAGpB,qBAAqB,CAAA,CAAA;AAE7D,KAAA,EACGI,IAAI,CAERM,eAAAA,KAAA,CAAAC,aAAA,CAACU,aAAa,EAAA;AAACpB,MAAAA,4BAA4B,EAAEA,4BAAAA;KACxCN,EAAAA,QACU,CACb,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAM2B,WAAW,GAAG;AACvBC,EAAAA,IAAI,EAAE,OAAO;AACbC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEnC,SAAS;AACjBoC,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,UAAU,EAAE;AACR/B,IAAAA,IAAI,EAAE;AACFgC,MAAAA,GAAG,EAAEC,IAAAA;KACR;AACDhC,IAAAA,IAAI,EAAE;AACF+B,MAAAA,GAAG,EAAEE,MAAAA;KACR;AACDC,IAAAA,YAAY,EAAE;AACVH,MAAAA,GAAG,EAAEI,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNrC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAG;AACTkC,IAAAA,YAAY,EAAE,MAAA;AAClB,GAAA;AACJ;;;;"}

package/es/components/Panel/Panel.styles.js

@@ -1,10 +1,20 @@
-import './Panel.styles_2oh0yk.css';
+import './Panel.styles_1g0gq8z.css';
 import { styled } from '@linaria/react';
+import { tokens } from './Panel.tokens.js';
 
+var _exp = function _exp() {
+  return function (_ref) {
+    var customContentBackgroundColor = _ref.customContentBackgroundColor;
+    return customContentBackgroundColor || "var(".concat(tokens.contentBackgroundColor, ")");
+  };
+};
 var StyledWrapper = /*#__PURE__*/styled('div')({
   name: "StyledWrapper",
   "class": "siaxu13",
-  propsAsIs: false
+  propsAsIs: false,
+  vars: {
+    "siaxu13-0": [/*#__PURE__*/_exp()]
+  }
 });
 
 export { StyledWrapper };

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.styles.js","sources":["../../../src/components/Panel/Panel.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { tokens } from './Panel.tokens';\n\nexport const StyledWrapper = styled.div`\n    background: var(${tokens.contentBackgroundColor});\n    height: 100%;\n    width: 100%;\n    display: inline-flex;\n    flex-direction: column;\n    position: relative;\n`;\n"],"names":["StyledWrapper","styled","name","class","propsAsIs"],"mappings":";;AAIO,IAAMA,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAOlC;;;;"}
+{"version":3,"file":"Panel.styles.js","sources":["../../../src/components/Panel/Panel.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { tokens } from './Panel.tokens';\n\nexport const StyledWrapper = styled.div<{ customContentBackgroundColor?: string }>`\n    background: ${({ customContentBackgroundColor }) =>\n        customContentBackgroundColor || `var(${tokens.contentBackgroundColor})`};\n    height: 100%;\n    width: 100%;\n    display: inline-flex;\n    flex-direction: column;\n    position: relative;\n`;\n"],"names":["_exp","_ref","customContentBackgroundColor","concat","tokens","contentBackgroundColor","StyledWrapper","styled","name","class","propsAsIs","vars"],"mappings":";;;AAEwC,IAAAA,IAAA,GADtBA,SACsBA,IAAAA,GAAA;AAAA,EAAA,OAGtB,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,4BAAAA,GAAAA,IAAAA,CAAAA,4BAAAA,CAAAA;AAAAA,IAAAA,OACbA,4BAA4B,IAAAC,MAAAA,CAAAA,MAAA,CAAWC,MAAM,CAACC,sBAAuB,EAAE,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAFxE,IAAMC,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cACjBX,IAC6D,EAAA,CAAA;AAAA,GAAA;AAAA,CAM9E;;;;"}

package/es/components/Panel/Panel.styles_1g0gq8z.css

@@ -0,0 +1 @@
+.siaxu13{background:var(--siaxu13-0);height:100%;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;}

package/es/components/Panel/Panel.tokens.js

@@ -6,6 +6,19 @@ var classes = {
   hasHeader: 'panel-has-header',
   isRightClose: 'panel-right-close-button'
 };
+var privateTokens = {
+  width: '--plasma_private-panel-width',
+  height: '--plasma_private-panel-height',
+  backgroundColor: '--plasma_private-panel-custom-background-color'
+};
+var tokens = {
+  background: '--plasma-panel-background',
+  shadow: '--plasma-panel-shadow',
+  contentBackgroundColor: '--plasma-panel-content-background-color',
+  padding: '--plasma-panel-padding',
+  borderRadius: '--plasma-panel-border-radius',
+  closeColor: '--plasma-panel-close-color'
+};
 
-export { classes };
+export { classes, privateTokens, tokens };
 //# sourceMappingURL=Panel.tokens.js.map

package/es/components/Panel/Panel.tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.tokens.js","sources":["../../../src/components/Panel/Panel.tokens.ts"],"sourcesContent":["export const classes = {\n    root: 'panel-root',\n    content: 'panel-content',\n    header: 'panel-header',\n    footer: 'panel-footer',\n    hasHeader: 'panel-has-header',\n    isRightClose: 'panel-right-close-button',\n};\n\nexport const tokens = {\n    background: '--plasma-panel-background',\n    shadow: '--plasma-panel-shadow',\n    contentBackgroundColor: '--plasma-panel-content-background-color',\n    padding: '--plasma-panel-padding',\n    borderRadius: '--plasma-panel-border-radius',\n    closeColor: '--plasma-panel-close-color',\n};\n"],"names":["classes","root","content","header","footer","hasHeader","isRightClose"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,IAAI,EAAE,YAAY;AAClBC,EAAAA,OAAO,EAAE,eAAe;AACxBC,EAAAA,MAAM,EAAE,cAAc;AACtBC,EAAAA,MAAM,EAAE,cAAc;AACtBC,EAAAA,SAAS,EAAE,kBAAkB;AAC7BC,EAAAA,YAAY,EAAE,0BAAA;AAClB;;;;"}
+{"version":3,"file":"Panel.tokens.js","sources":["../../../src/components/Panel/Panel.tokens.ts"],"sourcesContent":["export const classes = {\n    root: 'panel-root',\n    content: 'panel-content',\n    header: 'panel-header',\n    footer: 'panel-footer',\n    hasHeader: 'panel-has-header',\n    isRightClose: 'panel-right-close-button',\n};\n\nexport const privateTokens = {\n    width: '--plasma_private-panel-width',\n    height: '--plasma_private-panel-height',\n    backgroundColor: '--plasma_private-panel-custom-background-color',\n};\n\nexport const tokens = {\n    background: '--plasma-panel-background',\n    shadow: '--plasma-panel-shadow',\n    contentBackgroundColor: '--plasma-panel-content-background-color',\n    padding: '--plasma-panel-padding',\n    borderRadius: '--plasma-panel-border-radius',\n    closeColor: '--plasma-panel-close-color',\n};\n"],"names":["classes","root","content","header","footer","hasHeader","isRightClose","privateTokens","width","height","backgroundColor","tokens","background","shadow","contentBackgroundColor","padding","borderRadius","closeColor"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,IAAI,EAAE,YAAY;AAClBC,EAAAA,OAAO,EAAE,eAAe;AACxBC,EAAAA,MAAM,EAAE,cAAc;AACtBC,EAAAA,MAAM,EAAE,cAAc;AACtBC,EAAAA,SAAS,EAAE,kBAAkB;AAC7BC,EAAAA,YAAY,EAAE,0BAAA;AAClB,EAAC;AAEM,IAAMC,aAAa,GAAG;AACzBC,EAAAA,KAAK,EAAE,8BAA8B;AACrCC,EAAAA,MAAM,EAAE,+BAA+B;AACvCC,EAAAA,eAAe,EAAE,gDAAA;AACrB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,MAAM,EAAE,uBAAuB;AAC/BC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,OAAO,EAAE,wBAAwB;AACjCC,EAAAA,YAAY,EAAE,8BAA8B;AAC5CC,EAAAA,UAAU,EAAE,4BAAA;AAChB;;;;"}

package/es/components/Panel/ui/PanelHeader/PanelHeader.css

@@ -26,8 +26,8 @@
 .Button_styles_8cvmld_s1rjh7ra__4694a0fa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:var(--plasma-button-right-content-align-self);-ms-flex-item-align:var(--plasma-button-right-content-align);align-self:var(--plasma-button-right-content-align-self);margin:var(--s1rjh7ra-0);}
 .Button_styles_8cvmld_b9ga1dj__4694a0fa{position:relative;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;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_8cvmld_b9ga1dj__4694a0fa{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_buttonSquare__4694a0fa{width:var(--plasma-button-height);padding:0;}
 
-.PanelHeader_styles_8c7krd_b5xb1jq__8864a0a4{background:var(--plasma-panel-background);-webkit-order:var(--b5xb1jq-0);-ms-flex-order:var(--b5xb1jq-0);order:var(--b5xb1jq-0);padding-left:var(--b5xb1jq-1);padding-right:var(--b5xb1jq-2);}
-.PanelHeader_styles_8c7krd_s1hqmxl1__8864a0a4{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
-.PanelHeader_styles_8c7krd_c7hx8go__8864a0a4{position:relative;width:1.5rem;min-height:1.5rem;--plasma-button-color:var(--plasma-panel-close-color);--plasma-button-color-hover:var(--plasma-panel-close-color);--plasma-button-color-active:var(--plasma-panel-close-color);}
+.PanelHeader_styles_16qje7n_b5xb1jq__a3864628{background:var(--plasma_private-panel-custom-background-color,var(--plasma-panel-background));-webkit-order:var(--b5xb1jq-0);-ms-flex-order:var(--b5xb1jq-0);order:var(--b5xb1jq-0);padding-left:var(--b5xb1jq-1);padding-right:var(--b5xb1jq-2);}
+.PanelHeader_styles_16qje7n_s1hqmxl1__a3864628{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
+.PanelHeader_styles_16qje7n_c7hx8go__a3864628{position:relative;width:1.5rem;min-height:1.5rem;--plasma-button-color:var(--plasma-panel-close-color);--plasma-button-color-hover:var(--plasma-panel-close-color);--plasma-button-color-active:var(--plasma-panel-close-color);}
 
 .base_fbxbaa_b37w9ja__9aed17a1{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.base_fbxbaa_b37w9ja__9aed17a1.base_fbxbaa_panelHasHeader__9aed17a1{position:absolute;width:100%;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.base_fbxbaa_b37w9ja__9aed17a1.base_fbxbaa_panelHasHeader__9aed17a1 .base_fbxbaa_b5xb1jq__9aed17a1{background:transparent;}.base_fbxbaa_b37w9ja__9aed17a1.base_fbxbaa_panelHasHeader__9aed17a1.base_fbxbaa_panelRightCloseButton__9aed17a1{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}

package/es/components/Panel/ui/PanelHeader/PanelHeader.styles.js

@@ -1,4 +1,4 @@
-import './PanelHeader.styles_8c7krd.css';
+import './PanelHeader.styles_16qje7n.css';
 import { styled } from '@linaria/react';
 import { placements } from './PanelHeader.types.js';
 import { component, mergeConfig } from '../../../../engines/common.js';
@@ -6,19 +6,19 @@ import { buttonConfig } from '../../../Button/Button.js';
 
 var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
 var Button = /*#__PURE__*/component(mergedButtonConfig);
-var _exp2 = function _exp2() {
+var _exp3 = function _exp3() {
   return function (_ref) {
     var placement = _ref.placement;
     return placement === placements.left ? -1 : 0;
   };
 };
-var _exp3 = function _exp3() {
+var _exp4 = function _exp4() {
   return function (_ref2) {
     var placement = _ref2.placement;
     return !placement || placement === placements.right ? '0.5rem' : '';
   };
 };
-var _exp4 = function _exp4() {
+var _exp5 = function _exp5() {
   return function (_ref3) {
     var placement = _ref3.placement;
     return placement === placements.left ? '0.5rem' : '';
@@ -29,9 +29,9 @@ var ButtonWrapper = /*#__PURE__*/styled('div')({
   "class": "b5xb1jq",
   propsAsIs: false,
   vars: {
-    "b5xb1jq-0": [/*#__PURE__*/_exp2()],
-    "b5xb1jq-1": [/*#__PURE__*/_exp3()],
-    "b5xb1jq-2": [/*#__PURE__*/_exp4()]
+    "b5xb1jq-0": [/*#__PURE__*/_exp3()],
+    "b5xb1jq-1": [/*#__PURE__*/_exp4()],
+    "b5xb1jq-2": [/*#__PURE__*/_exp5()]
   }
 });
 var StyledHeader = /*#__PURE__*/styled('div')({
@@ -39,10 +39,10 @@ var StyledHeader = /*#__PURE__*/styled('div')({
   "class": "s1hqmxl1",
   propsAsIs: false
 });
-var _exp5 = function _exp5() {
+var _exp6 = function _exp6() {
   return Button;
 };
-var CloseIconWrapper = /*#__PURE__*/styled(_exp5())({
+var CloseIconWrapper = /*#__PURE__*/styled(_exp6())({
   name: "CloseIconWrapper",
   "class": "c7hx8go",
   propsAsIs: true

package/es/components/Panel/ui/PanelHeader/PanelHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.styles.js","sources":["../../../../../src/components/Panel/ui/PanelHeader/PanelHeader.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { mergeConfig, component } from '../../../../engines';\nimport { buttonConfig } from '../../../Button';\nimport { tokens as buttonTokens } from '../../../Button/Button.tokens';\nimport { tokens } from '../../Panel.tokens';\n\nimport { ClosePlacementType, placements } from './PanelHeader.types';\n\nconst mergedButtonConfig = mergeConfig(buttonConfig);\nconst Button = component(mergedButtonConfig);\n\nexport const ButtonWrapper = styled.div<{ placement?: ClosePlacementType }>`\n    background: var(${tokens.background});\n\n    order: ${({ placement }) => (placement === placements.left ? -1 : 0)};\n    padding-left: ${({ placement }) => (!placement || placement === placements.right ? '0.5rem' : '')};\n    padding-right: ${({ placement }) => (placement === placements.left ? '0.5rem' : '')};\n`;\n\nexport const StyledHeader = styled.div`\n    height: fit-content;\n    flex-grow: 1;\n`;\n\nexport const CloseIconWrapper = styled(Button)`\n    position: relative;\n    width: 1.5rem;\n    min-height: 1.5rem;\n    ${buttonTokens.buttonColor}: var(${tokens.closeColor});\n    ${buttonTokens.buttonColorHover}: var(${tokens.closeColor});\n    ${buttonTokens.buttonColorActive}: var(${tokens.closeColor});\n`;\n"],"names":["mergedButtonConfig","mergeConfig","buttonConfig","Button","component","_exp2","_ref","placement","placements","left","_exp3","_ref2","right","_exp4","_ref3","ButtonWrapper","styled","name","class","propsAsIs","vars","StyledHeader","_exp5","CloseIconWrapper"],"mappings":";;;;;AASA,IAAMA,kBAAkB,gBAAGC,WAAW,CAACC,YAAY,CAAC,CAAA;AACpD,IAAMC,MAAM,gBAAGC,SAAS,CAACJ,kBAAkB,CAAC,CAAA;AAAC,IAAAK,KAAA,GAT3BA,SAS2BA,KAAAA,GAAA;AAAA,EAAA,OAKhC,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,IAAAA,CAAAA,SAAAA,CAAAA;IAAAA,OAAiBA,SAAS,KAAKC,UAAU,CAACC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAE,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAdtDA,SAcsDA,KAAAA,GAAA;AAAA,EAAA,OACpD,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGJ,SAAAA,GAAAA,KAAAA,CAAAA,SAAAA,CAAAA;IAAAA,OAAiB,CAACA,SAAS,IAAIA,SAAS,KAAKC,UAAU,CAACI,KAAK,GAAG,QAAQ,GAAG,EAAG,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAfnFA,SAemFA,KAAAA,GAAA;AAAA,EAAA,OAChF,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGP,SAAAA,GAAAA,KAAAA,CAAAA,SAAAA,CAAAA;IAAAA,OAAiBA,SAAS,KAAKC,UAAU,CAACC,IAAI,GAAG,QAAQ,GAAG,EAAG,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AALhF,IAAMM,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAGtBf,KAA2D,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cACpDK,KAAiF,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAChFG,KAAkE,EAAA,CAAA;AAAA,GAAA;AAAA,CACtF,EAAA;AAEM,IAAMQ,YAAY,gBAAGL,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGjC,EAAA;AAAC,IAAAG,KAAA,GAtBgBA,SAsBhBA,KAAAA,GAAA;AAAA,EAAA,OAEqCnB,MAAM,CAAA;AAAA,CAAA,CAAA;AAAtC,IAAMoB,gBAAgB,gBAAGP,MAAM,CAAAM,KAAA,EAAA,CAAA,CAAA;AAAAL,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAOrC;;;;"}
+{"version":3,"file":"PanelHeader.styles.js","sources":["../../../../../src/components/Panel/ui/PanelHeader/PanelHeader.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { mergeConfig, component } from '../../../../engines';\nimport { buttonConfig } from '../../../Button';\nimport { tokens as buttonTokens } from '../../../Button/Button.tokens';\nimport { privateTokens, tokens } from '../../Panel.tokens';\n\nimport { ClosePlacementType, placements } from './PanelHeader.types';\n\nconst mergedButtonConfig = mergeConfig(buttonConfig);\nconst Button = component(mergedButtonConfig);\n\nexport const ButtonWrapper = styled.div<{ placement?: ClosePlacementType }>`\n    background: var(${privateTokens.backgroundColor}, var(${tokens.background}));\n\n    order: ${({ placement }) => (placement === placements.left ? -1 : 0)};\n    padding-left: ${({ placement }) => (!placement || placement === placements.right ? '0.5rem' : '')};\n    padding-right: ${({ placement }) => (placement === placements.left ? '0.5rem' : '')};\n`;\n\nexport const StyledHeader = styled.div`\n    height: fit-content;\n    flex-grow: 1;\n`;\n\nexport const CloseIconWrapper = styled(Button)`\n    position: relative;\n    width: 1.5rem;\n    min-height: 1.5rem;\n    ${buttonTokens.buttonColor}: var(${tokens.closeColor});\n    ${buttonTokens.buttonColorHover}: var(${tokens.closeColor});\n    ${buttonTokens.buttonColorActive}: var(${tokens.closeColor});\n`;\n"],"names":["mergedButtonConfig","mergeConfig","buttonConfig","Button","component","_exp3","_ref","placement","placements","left","_exp4","_ref2","right","_exp5","_ref3","ButtonWrapper","styled","name","class","propsAsIs","vars","StyledHeader","_exp6","CloseIconWrapper"],"mappings":";;;;;AASA,IAAMA,kBAAkB,gBAAGC,WAAW,CAACC,YAAY,CAAC,CAAA;AACpD,IAAMC,MAAM,gBAAGC,SAAS,CAACJ,kBAAkB,CAAC,CAAA;AAAC,IAAAK,KAAA,GAT3BA,SAS2BA,KAAAA,GAAA;AAAA,EAAA,OAKhC,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,IAAAA,CAAAA,SAAAA,CAAAA;IAAAA,OAAiBA,SAAS,KAAKC,UAAU,CAACC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAE,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAdtDA,SAcsDA,KAAAA,GAAA;AAAA,EAAA,OACpD,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGJ,SAAAA,GAAAA,KAAAA,CAAAA,SAAAA,CAAAA;IAAAA,OAAiB,CAACA,SAAS,IAAIA,SAAS,KAAKC,UAAU,CAACI,KAAK,GAAG,QAAQ,GAAG,EAAG,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAfnFA,SAemFA,KAAAA,GAAA;AAAA,EAAA,OAChF,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGP,SAAAA,GAAAA,KAAAA,CAAAA,SAAAA,CAAAA;IAAAA,OAAiBA,SAAS,KAAKC,UAAU,CAACC,IAAI,GAAG,QAAQ,GAAG,EAAG,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AALhF,IAAMM,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAGtBf,KAA2D,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cACpDK,KAAiF,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAChFG,KAAkE,EAAA,CAAA;AAAA,GAAA;AAAA,CACtF,EAAA;AAEM,IAAMQ,YAAY,gBAAGL,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGjC,EAAA;AAAC,IAAAG,KAAA,GAtBgBA,SAsBhBA,KAAAA,GAAA;AAAA,EAAA,OAEqCnB,MAAM,CAAA;AAAA,CAAA,CAAA;AAAtC,IAAMoB,gBAAgB,gBAAGP,MAAM,CAAAM,KAAA,EAAA,CAAA,CAAA;AAAAL,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAOrC;;;;"}

package/{cjs/components/Panel/ui/PanelHeader/PanelHeader.styles_8c7krd.css → es/components/Panel/ui/PanelHeader/PanelHeader.styles_16qje7n.css}

@@ -1,3 +1,3 @@
-.b5xb1jq{background:var(--plasma-panel-background);-webkit-order:var(--b5xb1jq-0);-ms-flex-order:var(--b5xb1jq-0);order:var(--b5xb1jq-0);padding-left:var(--b5xb1jq-1);padding-right:var(--b5xb1jq-2);}
+.b5xb1jq{background:var(--plasma_private-panel-custom-background-color,var(--plasma-panel-background));-webkit-order:var(--b5xb1jq-0);-ms-flex-order:var(--b5xb1jq-0);order:var(--b5xb1jq-0);padding-left:var(--b5xb1jq-1);padding-right:var(--b5xb1jq-2);}
 .s1hqmxl1{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
 .c7hx8go{position:relative;width:1.5rem;min-height:1.5rem;--plasma-button-color:var(--plasma-panel-close-color);--plasma-button-color-hover:var(--plasma-panel-close-color);--plasma-button-color-active:var(--plasma-panel-close-color);}

package/es/components/Panel/variations/_view/base.js

@@ -1,4 +1,4 @@
-import './base_10gjs6e.css';
+import './base_lwq4bq.css';
 var base = "b11yryf5";
 
 export { base };

package/es/components/Panel/variations/_view/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../src/components/Panel/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../Panel.tokens';\n\nexport const base = css`\n    background: var(${tokens.background});\n    box-shadow: var(${tokens.shadow});\n    box-sizing: border-box;\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAIhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../src/components/Panel/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { privateTokens, tokens } from '../../Panel.tokens';\n\nexport const base = css`\n    background: var(${privateTokens.backgroundColor}, var(${tokens.background}));\n    box-shadow: var(${tokens.shadow});\n    box-sizing: border-box;\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAIhB;;;;"}

package/es/components/Panel/variations/_view/base_lwq4bq.css

@@ -0,0 +1 @@
+.b11yryf5{background:var(--plasma_private-panel-custom-background-color,var(--plasma-panel-background));box-shadow:var(--plasma-panel-shadow);box-sizing:border-box;}

package/es/index.css

@@ -371,21 +371,21 @@
 
 .base_ydejlv_b175yas1__99ab42b5{--plasma-panel-border-radius:var(--plasma-drawer-border-radius);}
 
-.base_10gjs6e_b11yryf5__c70de98c{background:var(--plasma-panel-background);box-shadow:var(--plasma-panel-shadow);box-sizing:border-box;}
+.base_lwq4bq_b11yryf5__4e4b1db2{background:var(--plasma_private-panel-custom-background-color,var(--plasma-panel-background));box-shadow:var(--plasma-panel-shadow);box-sizing:border-box;}
 
 .base_t42kp6_b68f6vo__04aa8af1{padding:var(--plasma-panel-padding);height:var(--plasma_private-panel-height);width:var(--plasma_private-panel-width);}
 
 .base_2yf5jv_b1xkcksz__e72487ad{border-radius:var(--plasma-panel-border-radius);}
 
-.Panel_styles_2oh0yk_siaxu13__4b38fa73{background:var(--plasma-panel-content-background-color);height:100%;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;}
+.Panel_styles_1g0gq8z_siaxu13__180beaa7{background:var(--siaxu13-0);height:100%;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;}
 
 .base_1wckm5d_b1mvcfe5__595610ae{overflow-y:scroll;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-right:20px;box-sizing:border-box;}.base_1wckm5d_b1mvcfe5__595610ae::-webkit-scrollbar{display:none;}
 
 .base_hmbg05_b1orvu2x__ac0d2781{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}
 
-.PanelHeader_styles_8c7krd_b5xb1jq__8864a0a4{background:var(--plasma-panel-background);-webkit-order:var(--b5xb1jq-0);-ms-flex-order:var(--b5xb1jq-0);order:var(--b5xb1jq-0);padding-left:var(--b5xb1jq-1);padding-right:var(--b5xb1jq-2);}
-.PanelHeader_styles_8c7krd_s1hqmxl1__8864a0a4{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
-.PanelHeader_styles_8c7krd_c7hx8go__8864a0a4{position:relative;width:1.5rem;min-height:1.5rem;--plasma-button-color:var(--plasma-panel-close-color);--plasma-button-color-hover:var(--plasma-panel-close-color);--plasma-button-color-active:var(--plasma-panel-close-color);}
+.PanelHeader_styles_16qje7n_b5xb1jq__a3864628{background:var(--plasma_private-panel-custom-background-color,var(--plasma-panel-background));-webkit-order:var(--b5xb1jq-0);-ms-flex-order:var(--b5xb1jq-0);order:var(--b5xb1jq-0);padding-left:var(--b5xb1jq-1);padding-right:var(--b5xb1jq-2);}
+.PanelHeader_styles_16qje7n_s1hqmxl1__a3864628{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
+.PanelHeader_styles_16qje7n_c7hx8go__a3864628{position:relative;width:1.5rem;min-height:1.5rem;--plasma-button-color:var(--plasma-panel-close-color);--plasma-button-color-hover:var(--plasma-panel-close-color);--plasma-button-color-active:var(--plasma-panel-close-color);}
 
 .base_fbxbaa_b37w9ja__9aed17a1{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.base_fbxbaa_b37w9ja__9aed17a1.base_fbxbaa_panelHasHeader__9aed17a1{position:absolute;width:100%;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.base_fbxbaa_b37w9ja__9aed17a1.base_fbxbaa_panelHasHeader__9aed17a1 .base_fbxbaa_b5xb1jq__9aed17a1{background:transparent;}.base_fbxbaa_b37w9ja__9aed17a1.base_fbxbaa_panelHasHeader__9aed17a1.base_fbxbaa_panelRightCloseButton__9aed17a1{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.263.1-canary.1764.13286897844.0",
+  "version": "0.264.0-canary.1760.13286965233.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -80,8 +80,8 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.191.1-canary.1764.13286897844.0",
-    "@salutejs/plasma-themes": "0.28.1-canary.1764.13286897844.0",
+    "@salutejs/plasma-sb-utils": "0.191.0",
+    "@salutejs/plasma-themes": "0.28.0",
     "@storybook/addon-docs": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addons": "^7.6.17",
@@ -116,7 +116,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.191.1-canary.1764.13286897844.0",
+    "@salutejs/plasma-core": "1.191.0",
     "@salutejs/react-maskinput": "3.2.6",
     "classnames": "2.5.1",
     "dayjs": "1.11.11",
@@ -132,5 +132,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "05ca309731d45a7bba1d141900fe2633793ad8ca"
+  "gitHead": "8497e0237e9c2252af00f22e6c30f88e4156d4df"
 }

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

@@ -19,7 +19,7 @@ var _base3 = /*#__PURE__*/require("./variations/_borderRadius/base");
 var _Drawer2 = /*#__PURE__*/require("./Drawer.styles");
 var _DrawerContext = /*#__PURE__*/require("./DrawerContext");
 var _hooks2 = /*#__PURE__*/require("./hooks");
-var _excluded = ["id", "zIndex", "popupInfo", "withBlur", "children", "view", "size", "width", "height", "isOpen", "opened", "initialFocusRef", "focusAfterRef", "className", "onClose", "onOverlayClick", "onEscKeyDown", "offset", "frame", "borderRadius", "placement", "closeOnEsc", "closeOnOverlayClick", "asModal"];
+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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -43,6 +43,8 @@ var drawerRoot = exports.drawerRoot = function drawerRoot(Root) {
       initialFocusRef = _ref.initialFocusRef,
       focusAfterRef = _ref.focusAfterRef,
       className = _ref.className,
+      customBackgroundColor = _ref.customBackgroundColor,
+      customContentBackgroundColor = _ref.customContentBackgroundColor,
       onClose = _ref.onClose,
       onOverlayClick = _ref.onOverlayClick,
       onEscKeyDown = _ref.onEscKeyDown,
@@ -126,6 +128,8 @@ var drawerRoot = exports.drawerRoot = function drawerRoot(Root) {
     }, /*#__PURE__*/_react["default"].createElement(_Drawer2.StyledPanel, {
       width: innerWidth,
       height: innerHeight,
+      customBackgroundColor: customBackgroundColor,
+      customContentBackgroundColor: customContentBackgroundColor,
       className: className
     }, children)));
   });

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

@@ -12,7 +12,7 @@ var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_borderRadius/base");
 var _Panel = /*#__PURE__*/require("./Panel.tokens");
 var _Panel2 = /*#__PURE__*/require("./Panel.styles");
-var _excluded = ["children", "view", "size", "width", "height", "className", "style"];
+var _excluded = ["children", "view", "size", "width", "height", "customBackgroundColor", "customContentBackgroundColor", "className", "style"];
 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); }
@@ -30,6 +30,8 @@ var panelRoot = exports.panelRoot = function panelRoot(Root) {
       size = _ref.size,
       width = _ref.width,
       height = _ref.height,
+      customBackgroundColor = _ref.customBackgroundColor,
+      customContentBackgroundColor = _ref.customContentBackgroundColor,
       className = _ref.className,
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -40,11 +42,10 @@ var panelRoot = exports.panelRoot = function panelRoot(Root) {
       view: view,
       size: size,
       className: (0, _utils.cx)(_Panel.classes.root, className),
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        '--plasma_private-panel-width': innerWidth,
-        '--plasma_private-panel-height': innerHeight
-      })
-    }, rest), /*#__PURE__*/_react["default"].createElement(_Panel2.StyledWrapper, null, children));
+      style: _objectSpread(_objectSpread({}, style), {}, _defineProperty(_defineProperty(_defineProperty({}, _Panel.privateTokens.width, innerWidth), _Panel.privateTokens.height, innerHeight), _Panel.privateTokens.backgroundColor, customBackgroundColor))
+    }, rest), /*#__PURE__*/_react["default"].createElement(_Panel2.StyledWrapper, {
+      customContentBackgroundColor: customContentBackgroundColor
+    }, children));
   });
 };
 var panelConfig = exports.panelConfig = {

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

@@ -9,4 +9,7 @@ var _Panel = /*#__PURE__*/require("./Panel.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var StyledWrapper = exports.StyledWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-ryn15p-0"
-})(["background:var(", ");height:100%;width:100%;display:inline-flex;flex-direction:column;position:relative;"], _Panel.tokens.contentBackgroundColor);
+})(["background:", ";height:100%;width:100%;display:inline-flex;flex-direction:column;position:relative;"], function (_ref) {
+  var customContentBackgroundColor = _ref.customContentBackgroundColor;
+  return customContentBackgroundColor || "var(".concat(_Panel.tokens.contentBackgroundColor, ")");
+});

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tokens = exports.classes = void 0;
+exports.tokens = exports.privateTokens = exports.classes = void 0;
 var classes = exports.classes = {
   root: 'panel-root',
   content: 'panel-content',
@@ -12,6 +12,11 @@ var classes = exports.classes = {
   hasHeader: 'panel-has-header',
   isRightClose: 'panel-right-close-button'
 };
+var privateTokens = exports.privateTokens = {
+  width: '--plasma_private-panel-width',
+  height: '--plasma_private-panel-height',
+  backgroundColor: '--plasma_private-panel-custom-background-color'
+};
 var tokens = exports.tokens = {
   background: '--plasma-panel-background',
   shadow: '--plasma-panel-shadow',

package/styled-components/cjs/components/Panel/ui/PanelHeader/PanelHeader.styles.js

@@ -15,7 +15,7 @@ var mergedButtonConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Button.buttonCo
 var Button = /*#__PURE__*/(0, _engines.component)(mergedButtonConfig);
 var ButtonWrapper = exports.ButtonWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-yiy73v-0"
-})(["background:var(", ");order:", ";padding-left:", ";padding-right:", ";"], _Panel.tokens.background, function (_ref) {
+})(["background:var(", ",var(", "));order:", ";padding-left:", ";padding-right:", ";"], _Panel.privateTokens.backgroundColor, _Panel.tokens.background, function (_ref) {
   var placement = _ref.placement;
   return placement === _PanelHeader.placements.left ? -1 : 0;
 }, function (_ref2) {

package/styled-components/cjs/components/Panel/variations/_view/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Panel = /*#__PURE__*/require("../../Panel.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background:var(", ");box-shadow:var(", ");box-sizing:border-box;"], _Panel.tokens.background, _Panel.tokens.shadow);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background:var(", ",var(", "));box-shadow:var(", ");box-sizing:border-box;"], _Panel.privateTokens.backgroundColor, _Panel.tokens.background, _Panel.tokens.shadow);

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

@@ -14,7 +14,7 @@ import type { ClosePlacementType } from '../../../../components/Drawer';
 import { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from './Drawer';
 
 export default {
-    title: 'b2c/Overlay/Divider',
+    title: 'b2c/Overlay/Drawer',
     decorators: [WithTheme],
     argTypes: {
         placement: {
@@ -85,6 +85,16 @@ export default {
                 type: 'select',
             },
         },
+        customBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
+        customContentBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
     },
 } as Meta;
 

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

@@ -47,6 +47,16 @@ export default {
             },
             table: { defaultValue: { summary: 'right' } },
         },
+        customBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
+        customContentBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
     },
 } as Meta;
 

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

@@ -14,7 +14,7 @@ import type { ClosePlacementType } from '../../../../components/Drawer';
 import { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from './Drawer';
 
 export default {
-    title: 'web/Overlay/Divider',
+    title: 'web/Overlay/Drawer',
     decorators: [WithTheme],
     argTypes: {
         placement: {
@@ -85,6 +85,16 @@ export default {
                 type: 'select',
             },
         },
+        customBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
+        customContentBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
     },
 } as Meta;
 

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

@@ -16,7 +16,7 @@ const onChoseFiles = action('onChoseFiles');
 const iconPlacements = ['top', 'left'];
 
 const meta: Meta<typeof Dropzone> = {
-    title: 'plasma_web/Dropzone',
+    title: 'web/Data Entry/Dropzone',
     component: Dropzone,
     decorators: [WithTheme],
     argTypes: {

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

@@ -47,6 +47,16 @@ export default {
             },
             table: { defaultValue: { summary: 'right' } },
         },
+        customBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
+        customContentBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
     },
 } as Meta;
 

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

@@ -1,4 +1,4 @@
-var _excluded = ["id", "zIndex", "popupInfo", "withBlur", "children", "view", "size", "width", "height", "isOpen", "opened", "initialFocusRef", "focusAfterRef", "className", "onClose", "onOverlayClick", "onEscKeyDown", "offset", "frame", "borderRadius", "placement", "closeOnEsc", "closeOnOverlayClick", "asModal"];
+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"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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; }
@@ -35,6 +35,8 @@ export var drawerRoot = function drawerRoot(Root) {
       initialFocusRef = _ref.initialFocusRef,
       focusAfterRef = _ref.focusAfterRef,
       className = _ref.className,
+      customBackgroundColor = _ref.customBackgroundColor,
+      customContentBackgroundColor = _ref.customContentBackgroundColor,
       onClose = _ref.onClose,
       onOverlayClick = _ref.onOverlayClick,
       onEscKeyDown = _ref.onEscKeyDown,
@@ -118,6 +120,8 @@ export var drawerRoot = function drawerRoot(Root) {
     }, /*#__PURE__*/React.createElement(StyledPanel, {
       width: innerWidth,
       height: innerHeight,
+      customBackgroundColor: customBackgroundColor,
+      customContentBackgroundColor: customContentBackgroundColor,
       className: className
     }, children)));
   });

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

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["children", "view", "size", "width", "height", "className", "style"];
+var _excluded = ["children", "view", "size", "width", "height", "customBackgroundColor", "customContentBackgroundColor", "className", "style"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -13,7 +13,7 @@ import { cx, getSizeValueFromProp } from '../../utils';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as borderRadiusCSS } from './variations/_borderRadius/base';
-import { classes } from './Panel.tokens';
+import { classes, privateTokens } from './Panel.tokens';
 import { StyledWrapper } from './Panel.styles';
 export var panelRoot = function panelRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
@@ -22,6 +22,8 @@ export var panelRoot = function panelRoot(Root) {
       size = _ref.size,
       width = _ref.width,
       height = _ref.height,
+      customBackgroundColor = _ref.customBackgroundColor,
+      customContentBackgroundColor = _ref.customContentBackgroundColor,
       className = _ref.className,
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -32,11 +34,10 @@ export var panelRoot = function panelRoot(Root) {
       view: view,
       size: size,
       className: cx(classes.root, className),
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        '--plasma_private-panel-width': innerWidth,
-        '--plasma_private-panel-height': innerHeight
-      })
-    }, rest), /*#__PURE__*/React.createElement(StyledWrapper, null, children));
+      style: _objectSpread(_objectSpread({}, style), {}, _defineProperty(_defineProperty(_defineProperty({}, privateTokens.width, innerWidth), privateTokens.height, innerHeight), privateTokens.backgroundColor, customBackgroundColor))
+    }, rest), /*#__PURE__*/React.createElement(StyledWrapper, {
+      customContentBackgroundColor: customContentBackgroundColor
+    }, children));
   });
 };
 export var panelConfig = {