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

package/cjs/components/Drawer/Drawer.css

@@ -11,13 +11,13 @@
 
 .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;}
 
@@ -51,9 +51,9 @@
 .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/cjs/components/Drawer/Drawer.js

@@ -23,7 +23,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-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"];
 
 // issue #823
 
@@ -43,6 +43,8 @@ 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,
@@ -126,6 +128,8 @@ var drawerRoot = function drawerRoot(Root) {
     }, /*#__PURE__*/React__default.default.createElement(Drawer_styles.StyledPanel, {
       width: innerWidth,
       height: innerHeight,
+      customBackgroundColor: customBackgroundColor,
+      customContentBackgroundColor: customContentBackgroundColor,
       className: className
     }, children)));
   });

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines';\nimport { usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { cx, getSizeValueFromProp } from '../../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                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                ...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(popupController.items) !== 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 width={innerWidth} height={innerHeight} className={className}>\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","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","items","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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"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines';\nimport { usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { cx, getSizeValueFromProp } from '../../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                ...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(popupController.items) !== 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","items","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/ui/DrawerContent/DrawerContent.css

@@ -1,10 +1,10 @@
-.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;}
 
@@ -38,8 +38,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/cjs/components/Panel/Panel.css

@@ -1,7 +1,7 @@
-.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;}

package/cjs/components/Panel/Panel.js

@@ -16,7 +16,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-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__*/React.forwardRef(function (_ref, outerRef) {
     var children = _ref.children,
@@ -24,6 +24,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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -34,11 +36,10 @@ var panelRoot = function panelRoot(Root) {
       view: view,
       size: size,
       className: index.cx(Panel_tokens.classes.root, className),
-      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, style), {}, {
-        '--plasma_private-panel-width': innerWidth,
-        '--plasma_private-panel-height': innerHeight
-      })
-    }, rest), /*#__PURE__*/React__default.default.createElement(Panel_styles.StyledWrapper, null, children));
+      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, style), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Panel_tokens.privateTokens.width, innerWidth), Panel_tokens.privateTokens.height, innerHeight), Panel_tokens.privateTokens.backgroundColor, customBackgroundColor))
+    }, rest), /*#__PURE__*/React__default.default.createElement(Panel_styles.StyledWrapper, {
+      customContentBackgroundColor: customContentBackgroundColor
+    }, children));
   });
 };
 var panelConfig = {

package/cjs/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,gBAAU,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,iDAAA,CAAAV,IAAA,EAAAW,SAAA,CAAA,CAAA;IAC7D,IAAMC,UAAU,GAAGP,KAAK,GAAGQ,yCAAoB,CAACR,KAAK,CAAC,GAAG,MAAM,CAAA;IAC/D,IAAMS,WAAW,GAAGR,MAAM,GAAGO,yCAAoB,CAACP,MAAM,CAAC,GAAG,MAAM,CAAA;AAElE,IAAA,oBACIS,sBAAA,CAAAC,aAAA,CAAClB,IAAI,EAAAmB,iCAAA,CAAA;AACDC,MAAAA,GAAG,EAAEjB,QAAS;AACdE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,IAAI,EAAEA,IAAK;MACXG,SAAS,EAAEY,QAAE,CAACC,oBAAO,CAACC,IAAI,EAAEd,SAAS,CAAE;AACvCC,MAAAA,KAAK,EAAAc,uCAAA,CAAAA,uCAAA,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,sBAAA,CAAAC,aAAA,CAACO,0BAAa,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,SAAAA;KACR;AACD3B,IAAAA,IAAI,EAAE;AACF0B,MAAAA,GAAG,EAAEE,WAAAA;KACR;AACDC,IAAAA,YAAY,EAAE;AACVH,MAAAA,GAAG,EAAEI,WAAAA;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,gBAAU,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,iDAAA,CAAAZ,IAAA,EAAAa,SAAA,CAAA,CAAA;IAIX,IAAMC,UAAU,GAAGT,KAAK,GAAGU,yCAAoB,CAACV,KAAK,CAAC,GAAG,MAAM,CAAA;IAC/D,IAAMW,WAAW,GAAGV,MAAM,GAAGS,yCAAoB,CAACT,MAAM,CAAC,GAAG,MAAM,CAAA;AAElE,IAAA,oBACIW,sBAAA,CAAAC,aAAA,CAACpB,IAAI,EAAAqB,iCAAA,CAAA;AACDC,MAAAA,GAAG,EAAEnB,QAAS;AACdE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAEY,QAAE,CAACC,oBAAO,CAACC,IAAI,EAAEd,SAAS,CAAE;AACvCC,MAAAA,KAAK,EAAAc,uCAAA,CAAAA,uCAAA,CAEMd,EAAAA,EAAAA,KAAK,CAAAe,EAAAA,EAAAA,EAAAA,wCAAA,CAAAA,wCAAA,CAAAA,wCAAA,CACPC,EAAAA,EAAAA,0BAAa,CAACrB,KAAK,EAAGS,UAAU,CAChCY,EAAAA,0BAAa,CAACpB,MAAM,EAAGU,WAAW,CAClCU,EAAAA,0BAAa,CAACC,eAAe,EAAGpB,qBAAqB,CAAA,CAAA;AAE7D,KAAA,EACGI,IAAI,CAERM,eAAAA,sBAAA,CAAAC,aAAA,CAACU,0BAAa,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,SAAAA;KACR;AACDhC,IAAAA,IAAI,EAAE;AACF+B,MAAAA,GAAG,EAAEE,WAAAA;KACR;AACDC,IAAAA,YAAY,EAAE;AACVH,MAAAA,GAAG,EAAEI,WAAAA;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/cjs/components/Panel/Panel.styles.js

@@ -1,14 +1,24 @@
-require('./Panel.styles_2oh0yk.css');
+require('./Panel.styles_1g0gq8z.css');
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('@linaria/react');
+var Panel_tokens = require('./Panel.tokens.js');
 
+var _exp = function _exp() {
+  return function (_ref) {
+    var customContentBackgroundColor = _ref.customContentBackgroundColor;
+    return customContentBackgroundColor || "var(".concat(Panel_tokens.tokens.contentBackgroundColor, ")");
+  };
+};
 var StyledWrapper = /*#__PURE__*/react.styled('div')({
   name: "StyledWrapper",
   "class": "siaxu13",
-  propsAsIs: false
+  propsAsIs: false,
+  vars: {
+    "siaxu13-0": [/*#__PURE__*/_exp()]
+  }
 });
 
 exports.StyledWrapper = StyledWrapper;

package/cjs/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,YAAM,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,mBAAM,CAACC,sBAAuB,EAAE,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAFxE,IAAMC,aAAa,gBAAGC,YAAM,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/cjs/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/cjs/components/Panel/Panel.tokens.js

@@ -10,6 +10,21 @@ 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'
+};
 
 exports.classes = classes;
+exports.privateTokens = privateTokens;
+exports.tokens = tokens;
 //# sourceMappingURL=Panel.tokens.js.map

package/cjs/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/cjs/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/cjs/components/Panel/ui/PanelHeader/PanelHeader.styles.js

@@ -1,4 +1,4 @@
-require('./PanelHeader.styles_8c7krd.css');
+require('./PanelHeader.styles_16qje7n.css');
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -10,19 +10,19 @@ var Button$1 = require('../../../Button/Button.js');
 
 var mergedButtonConfig = /*#__PURE__*/common.mergeConfig(Button$1.buttonConfig);
 var Button = /*#__PURE__*/common.component(mergedButtonConfig);
-var _exp2 = function _exp2() {
+var _exp3 = function _exp3() {
   return function (_ref) {
     var placement = _ref.placement;
     return placement === PanelHeader_types.placements.left ? -1 : 0;
   };
 };
-var _exp3 = function _exp3() {
+var _exp4 = function _exp4() {
   return function (_ref2) {
     var placement = _ref2.placement;
     return !placement || placement === PanelHeader_types.placements.right ? '0.5rem' : '';
   };
 };
-var _exp4 = function _exp4() {
+var _exp5 = function _exp5() {
   return function (_ref3) {
     var placement = _ref3.placement;
     return placement === PanelHeader_types.placements.left ? '0.5rem' : '';
@@ -33,9 +33,9 @@ var ButtonWrapper = /*#__PURE__*/react.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__*/react.styled('div')({
@@ -43,10 +43,10 @@ var StyledHeader = /*#__PURE__*/react.styled('div')({
   "class": "s1hqmxl1",
   propsAsIs: false
 });
-var _exp5 = function _exp5() {
+var _exp6 = function _exp6() {
   return Button;
 };
-var CloseIconWrapper = /*#__PURE__*/react.styled(_exp5())({
+var CloseIconWrapper = /*#__PURE__*/react.styled(_exp6())({
   name: "CloseIconWrapper",
   "class": "c7hx8go",
   propsAsIs: true

package/cjs/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,kBAAW,CAACC,qBAAY,CAAC,CAAA;AACpD,IAAMC,MAAM,gBAAGC,gBAAS,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,4BAAU,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,4BAAU,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,4BAAU,CAACC,IAAI,GAAG,QAAQ,GAAG,EAAG,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AALhF,IAAMM,aAAa,gBAAGC,YAAM,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,YAAM,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,YAAM,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,kBAAW,CAACC,qBAAY,CAAC,CAAA;AACpD,IAAMC,MAAM,gBAAGC,gBAAS,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,4BAAU,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,4BAAU,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,4BAAU,CAACC,IAAI,GAAG,QAAQ,GAAG,EAAG,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AALhF,IAAMM,aAAa,gBAAGC,YAAM,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,YAAM,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,YAAM,CAAAM,KAAA,EAAA,CAAA,CAAA;AAAAL,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAOrC;;;;;;"}

package/{es/components/Panel/ui/PanelHeader/PanelHeader.styles_8c7krd.css → cjs/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/cjs/components/Panel/variations/_view/base.js

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

package/cjs/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/cjs/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/cjs/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/emotion/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/emotion/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/emotion/cjs/components/Panel/Panel.styles.js

@@ -10,4 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var StyledWrapper = exports.StyledWrapper = /*#__PURE__*/(0, _base["default"])("div", {
   target: "e1uvnvko0",
   label: "plasma-new-hope__StyledWrapper"
-})("background:var(", _Panel.tokens.contentBackgroundColor, ");height:100%;width:100%;display:inline-flex;flex-direction:column;position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvUGFuZWwvUGFuZWwuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl1QyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1BhbmVsL1BhbmVsLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnLi9QYW5lbC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogdmFyKCR7dG9rZW5zLmNvbnRlbnRCYWNrZ3JvdW5kQ29sb3J9KTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuIl19 */"));
+})("background:", function (_ref) {
+  var customContentBackgroundColor = _ref.customContentBackgroundColor;
+  return customContentBackgroundColor || "var(".concat(_Panel.tokens.contentBackgroundColor, ")");
+}, ";height:100%;width:100%;display:inline-flex;flex-direction:column;position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvUGFuZWwvUGFuZWwuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlrRiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1BhbmVsL1BhbmVsLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnLi9QYW5lbC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjdXN0b21Db250ZW50QmFja2dyb3VuZENvbG9yPzogc3RyaW5nIH0+YFxuICAgIGJhY2tncm91bmQ6ICR7KHsgY3VzdG9tQ29udGVudEJhY2tncm91bmRDb2xvciB9KSA9PlxuICAgICAgICBjdXN0b21Db250ZW50QmFja2dyb3VuZENvbG9yIHx8IGB2YXIoJHt0b2tlbnMuY29udGVudEJhY2tncm91bmRDb2xvcn0pYH07XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcbiJdfQ== */"));

package/emotion/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',