@alfalab/core-components 45.5.0 → 45.6.0-beta.1

package/side-panel/modern/components/header/Component.js

@@ -7,13 +7,13 @@ import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
 import '../../../../base-modal/modern';
 
-const desktopStyles = {"content":"side-panel__content_1ils9","size-500":"side-panel__size-500_1ils9","sticky":"side-panel__sticky_1ils9"};
+const desktopStyles = {"content":"side-panel__content_9ryyr","size-500":"side-panel__size-500_9ryyr","sticky":"side-panel__sticky_9ryyr"};
 require('./desktop.css');
 
-const styles = {"header":"side-panel__header_g5f07","hasContent":"side-panel__hasContent_g5f07","highlighted":"side-panel__highlighted_g5f07","sticky":"side-panel__sticky_g5f07","backgroundImage":"side-panel__backgroundImage_g5f07","content":"side-panel__content_g5f07","title":"side-panel__title_g5f07","addon":"side-panel__addon_g5f07","closer":"side-panel__closer_g5f07","right":"side-panel__right_g5f07","trim":"side-panel__trim_g5f07"};
+const styles = {"header":"side-panel__header_16cpr","hasContent":"side-panel__hasContent_16cpr","highlighted":"side-panel__highlighted_16cpr","sticky":"side-panel__sticky_16cpr","backgroundImage":"side-panel__backgroundImage_16cpr","content":"side-panel__content_16cpr","title":"side-panel__title_16cpr","addon":"side-panel__addon_16cpr","closer":"side-panel__closer_16cpr","right":"side-panel__right_16cpr","trim":"side-panel__trim_16cpr"};
 require('./index.css');
 
-const mobileStyles = {"header":"side-panel__header_193tn","sticky":"side-panel__sticky_193tn","content":"side-panel__content_193tn"};
+const mobileStyles = {"header":"side-panel__header_363pm","sticky":"side-panel__sticky_363pm","content":"side-panel__content_363pm"};
 require('./mobile.css');
 
 const Header = ({ className, children, contentClassName, title, sticky, hasCloser = true, ...restProps }) => {

package/side-panel/modern/components/header/desktop.css

@@ -37,15 +37,15 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__content_1ils9 {
+} .side-panel__content_9ryyr {
     font-weight: var(--side-panel-header-desktop-font-weight);
     font-family: var(--side-panel-header-desktop-font-family);
-} .side-panel__size-500_1ils9 .side-panel__content_1ils9 {
+} .side-panel__size-500_9ryyr .side-panel__content_9ryyr {
     padding: var(--side-panel-s-header-desktop-content-paddings);
     font-size: var(--side-panel-s-header-desktop-font-size);
     line-height: var(--side-panel-s-header-desktop-line-height);
-} .side-panel__size-500_1ils9 {
+} .side-panel__size-500_9ryyr {
     padding: var(--side-panel-s-header-paddings);
-} .side-panel__sticky_1ils9 {
+} .side-panel__sticky_9ryyr {
     top: 0;
 }

package/side-panel/modern/components/header/index.css

@@ -32,42 +32,42 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__header_g5f07 {
+} .side-panel__header_16cpr {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease
-} .side-panel__header_g5f07:not(.side-panel__hasContent_g5f07) {
+} .side-panel__header_16cpr:not(.side-panel__hasContent_16cpr) {
         pointer-events: none;
-    } .side-panel__highlighted_g5f07 {
+    } .side-panel__highlighted_16cpr {
     background: var(--side-panel-header-highlight-background);
     box-shadow: var(--side-panel-header-highlight-box-shadow);
-} .side-panel__sticky_g5f07 {
+} .side-panel__sticky_16cpr {
     position: sticky;
     z-index: 1
-} .side-panel__sticky_g5f07.side-panel__hasContent_g5f07 {
+} .side-panel__sticky_16cpr.side-panel__hasContent_16cpr {
         background: var(--side-panel-header-background);
-    } .side-panel__header_g5f07.side-panel__backgroundImage_g5f07 {
+    } .side-panel__header_16cpr.side-panel__backgroundImage_16cpr {
     background: center no-repeat;
     background-size: cover;
-} .side-panel__content_g5f07 {
+} .side-panel__content_16cpr {
     flex-grow: 1;
-} .side-panel__title_g5f07 {
+} .side-panel__title_16cpr {
     word-break: break-word;
-} .side-panel__addon_g5f07 {
+} .side-panel__addon_16cpr {
     min-width: 48px;
     height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
     pointer-events: all;
-} .side-panel__closer_g5f07 {
+} .side-panel__closer_16cpr {
     margin-left: auto;
-} .side-panel__right_g5f07 {
+} .side-panel__right_16cpr {
     justify-content: flex-end;
     text-align: right;
-} .side-panel__trim_g5f07 {
+} .side-panel__trim_16cpr {
     overflow: hidden
-} .side-panel__trim_g5f07 .side-panel__title_g5f07 {
+} .side-panel__trim_16cpr .side-panel__title_16cpr {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

package/side-panel/modern/components/header/mobile.css

@@ -38,11 +38,11 @@
 
     /* paddings */
     --side-panel-header-mobile-paddings: var(--gap-2xs) var(--gap-xs);
-} .side-panel__header_193tn {
+} .side-panel__header_363pm {
     padding: var(--side-panel-header-mobile-paddings);
-} .side-panel__sticky_193tn {
+} .side-panel__sticky_363pm {
     top: 0;
-} .side-panel__content_193tn {
+} .side-panel__content_363pm {
     font-size: var(--side-panel-header-mobile-font-size);
     line-height: var(--side-panel-header-mobile-line-height);
     font-family: var(--side-panel-header-mobile-font-family);

package/side-panel/modern/desktop/Component.desktop.js

@@ -12,14 +12,14 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../../../base-modal/modern';
-import '../layout.module-ce6004f9.js';
+import '../layout.module-6d7e6df8.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/modern';
 
-const styles = {"size-500":"side-panel__size-500_obl4d","hidden":"side-panel__hidden_obl4d"};
+const styles = {"size-500":"side-panel__size-500_dm21f","hidden":"side-panel__hidden_dm21f"};
 require('./desktop.css');
 
-const transitions = {"enterRight":"side-panel__enterRight_1p4t5","enterLeft":"side-panel__enterLeft_1p4t5","enterActive":"side-panel__enterActive_1p4t5","exit":"side-panel__exit_1p4t5","exitActiveRight":"side-panel__exitActiveRight_1p4t5","exitActiveLeft":"side-panel__exitActiveLeft_1p4t5"};
+const transitions = {"enterRight":"side-panel__enterRight_w1f15","enterLeft":"side-panel__enterLeft_w1f15","enterActive":"side-panel__enterActive_w1f15","exit":"side-panel__exit_w1f15","exitActiveRight":"side-panel__exitActiveRight_w1f15","exitActiveLeft":"side-panel__exitActiveLeft_w1f15"};
 require('./transitions.desktop.css');
 
 const SidePanelDesktopComponent = forwardRef(({ size = 500, children, className, wrapperClassName, contentTransitionProps = {}, backdropProps, placement = 'right', dataTestId, ...restProps }, ref) => {

package/side-panel/modern/desktop/desktop.css

@@ -28,8 +28,8 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__size-500_obl4d.side-panel__size-500_obl4d {
+} .side-panel__size-500_dm21f.side-panel__size-500_dm21f {
     width: var(--side-panel-s-width);
-} .side-panel__hidden_obl4d {
+} .side-panel__hidden_dm21f {
     overflow-x: hidden;
 }

package/side-panel/modern/desktop/index.js

@@ -11,7 +11,7 @@ import '../Context.js';
 import '../../../base-modal/modern';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-ce6004f9.js';
+import '../layout.module-6d7e6df8.js';
 import '../components/footer/Component.desktop.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/desktop/transitions.desktop.css

@@ -1,32 +1,32 @@
 /* hash: 1x1sw */
-.side-panel__enterRight_1p4t5 {
+.side-panel__enterRight_w1f15 {
     opacity: 0;
     transform: translateX(15px);
 }
 
-.side-panel__enterLeft_1p4t5 {
+.side-panel__enterLeft_w1f15 {
     opacity: 0;
     transform: translateX(-15px);
 }
 
-.side-panel__enterActive_1p4t5 {
+.side-panel__enterActive_w1f15 {
     opacity: 1;
     transform: translateX(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_1p4t5 {
+.side-panel__exit_w1f15 {
     opacity: 1;
     transform: translateX(0);
 }
 
-.side-panel__exitActiveRight_1p4t5 {
+.side-panel__exitActiveRight_w1f15 {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(15px);
 }
 
-.side-panel__exitActiveLeft_1p4t5 {
+.side-panel__exitActiveLeft_w1f15 {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(-15px);

package/side-panel/modern/index.js

@@ -5,7 +5,7 @@ import '../../shared/modern';
 import './components/controls/Component.js';
 import 'classnames';
 import './ResponsiveContext.js';
-import './layout.module-ce6004f9.js';
+import './layout.module-6d7e6df8.js';
 import './components/header/Component.js';
 import '../../navigation-bar/modern';
 import './consts.js';

package/side-panel/modern/layout.module-6d7e6df8.js

@@ -0,0 +1,4 @@
+const layoutStyles = {"column":"side-panel__column_zk4s4","gap-16":"side-panel__gap-16_zk4s4","gap-24":"side-panel__gap-24_zk4s4","gap-32":"side-panel__gap-32_zk4s4","start":"side-panel__start_zk4s4","center":"side-panel__center_zk4s4","space-between":"side-panel__space-between_zk4s4"};
+require('./components/footer/layout.css');
+
+export { layoutStyles as l };

package/side-panel/modern/mobile/Component.mobile.js

@@ -9,15 +9,15 @@ import { ResponsiveContext } from '../ResponsiveContext.js';
 import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-ce6004f9.js';
+import '../layout.module-6d7e6df8.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/modern';
 import '../consts.js';
 
-const styles = {"component":"side-panel__component_hqkot","mobileContent":"side-panel__mobileContent_hqkot"};
+const styles = {"component":"side-panel__component_1qkdz","mobileContent":"side-panel__mobileContent_1qkdz"};
 require('./mobile.css');
 
-const transitions = {"appear":"side-panel__appear_1lzn8","enter":"side-panel__enter_1lzn8","appearActive":"side-panel__appearActive_1lzn8","enterActive":"side-panel__enterActive_1lzn8","exit":"side-panel__exit_1lzn8","exitActive":"side-panel__exitActive_1lzn8","exitDone":"side-panel__exitDone_1lzn8"};
+const transitions = {"appear":"side-panel__appear_d5tyf","enter":"side-panel__enter_d5tyf","appearActive":"side-panel__appearActive_d5tyf","enterActive":"side-panel__enterActive_d5tyf","exit":"side-panel__exit_d5tyf","exitActive":"side-panel__exitActive_d5tyf","exitDone":"side-panel__exitDone_d5tyf"};
 require('./transitions.mobile.css');
 
 const SidePanelMobileComponent = forwardRef(({ children, className, transitionProps, dataTestId, ...restProps }, ref) => {

package/side-panel/modern/mobile/index.js

@@ -8,7 +8,7 @@ import '../../../shared/modern';
 import '../Context.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-ce6004f9.js';
+import '../layout.module-6d7e6df8.js';
 import '../components/footer/Component.mobile.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/mobile/mobile.css

@@ -27,17 +27,17 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__component_hqkot {
+} .side-panel__component_1qkdz {
     top: 0;
     height: 100%;
     width: 100%;
     overflow-x: hidden;
     overflow-y: auto;
     max-width: 600px;
-} .side-panel__component_hqkot.side-panel__component_hqkot {
+} .side-panel__component_1qkdz.side-panel__component_1qkdz {
     position: fixed;
     flex: 1;
-} .side-panel__mobileContent_hqkot {
+} .side-panel__mobileContent_1qkdz {
     display: flex;
     flex-direction: column;
     width: 100%;

package/side-panel/modern/mobile/transitions.mobile.css

@@ -1,24 +1,24 @@
 /* hash: yu1th */
-.side-panel__appear_1lzn8,
-.side-panel__enter_1lzn8 {
+.side-panel__appear_d5tyf,
+.side-panel__enter_d5tyf {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.side-panel__appearActive_1lzn8,
-.side-panel__enterActive_1lzn8 {
+.side-panel__appearActive_d5tyf,
+.side-panel__enterActive_d5tyf {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_1lzn8 {
+.side-panel__exit_d5tyf {
     opacity: 1;
     transform: translateY(0);
 }
 
-.side-panel__exitActive_1lzn8,
-.side-panel__exitDone_1lzn8 {
+.side-panel__exitActive_d5tyf,
+.side-panel__exitDone_d5tyf {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/side-panel/modern-pcss-raw/Component.responsive.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseModalProps } from "../../base-modal";
+import { DrawerProps } from "../../drawer";
+type SidePanelResponsiveProps = BaseModalProps & Pick<DrawerProps, 'contentTransitionProps' | 'placement' | 'nativeScrollbar'> & {
+    /**
+     * Ширина модального окна
+     * @default "s"
+     */
+    size?: 's' | 500;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const SidePanelResponsive: React.ForwardRefExoticComponent<BaseModalProps & Pick<DrawerProps, "contentTransitionProps" | "nativeScrollbar" | "placement"> & {
+    /**
+     * Ширина модального окна
+     * @default "s"
+     */
+    size?: "s" | 500 | undefined;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean | undefined;
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Controls: React.FC<import("./components/controls/index").ControlsProps>;
+    Content: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps> | React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
+};
+export { SidePanelResponsiveProps, SidePanelResponsive };

package/side-panel/modern-pcss-raw/Component.responsive.js

@@ -0,0 +1,50 @@
+import React, { forwardRef, useMemo, useContext } from 'react';
+import { useMatchMedia } from '../../mq/modern-pcss-raw';
+import { isClient } from '../../shared/modern-pcss-raw';
+import { Controls } from './components/controls/Component.js';
+import { Header } from './components/header/Component.js';
+import { SidePanelDesktop } from './desktop/Component.desktop.js';
+import { SidePanelMobile } from './mobile/Component.mobile.js';
+import { ResponsiveContext } from './ResponsiveContext.js';
+import 'classnames';
+import './layout.module-cf81db0c.js';
+import '../../navigation-bar/modern-pcss-raw';
+import './consts.js';
+import './Context.js';
+import '../../base-modal/modern-pcss-raw';
+import 'react-merge-refs';
+import '../../drawer/modern-pcss-raw';
+import './components/content/Component.desktop.js';
+import './components/content/Component.js';
+import './components/footer/Component.desktop.js';
+import './components/footer/Component.js';
+import './components/content/Component.mobile.js';
+import './components/footer/Component.mobile.js';
+
+function createResponsive(desktop, mobile) {
+    // eslint-disable-next-line
+    function ResponsiveChild(props) {
+        const { view = 'desktop' } = useContext(ResponsiveContext) || {};
+        const Child = view === 'desktop' ? desktop : mobile;
+        return React.createElement(Child, { ...props });
+    }
+    return ResponsiveChild;
+}
+const SidePanelResponsiveComponent = forwardRef(({ children, breakpoint = 1024, size = 500, defaultMatchMediaValue, dataTestId, ...restProps }, ref) => {
+    const query = `(min-width: ${breakpoint}px)`;
+    const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false);
+    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue);
+    const view = isDesktop ? 'desktop' : 'mobile';
+    const contextValue = useMemo(() => ({ view, size, dataTestId }), [view, size, dataTestId]);
+    const Component = isDesktop ? SidePanelDesktop : SidePanelMobile;
+    return (React.createElement(ResponsiveContext.Provider, { value: contextValue },
+        React.createElement(Component, { ref: ref, size: size, dataTestId: dataTestId, ...restProps }, children)));
+});
+const SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
+    Header,
+    Controls,
+    Content: createResponsive(SidePanelDesktop.Content, SidePanelMobile.Content),
+    Footer: createResponsive(SidePanelDesktop.Footer, SidePanelMobile.Footer),
+});
+
+export { SidePanelResponsive };

package/side-panel/modern-pcss-raw/Context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "../../base-modal";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

package/side-panel/modern-pcss-raw/Context.js

@@ -0,0 +1,5 @@
+import { BaseModalContext } from '../../base-modal/modern-pcss-raw';
+
+const ModalContext = BaseModalContext;
+
+export { ModalContext };

package/side-panel/modern-pcss-raw/ResponsiveContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TResponsiveModalContext } from "./typings";
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+export { ResponsiveContext };

package/side-panel/modern-pcss-raw/ResponsiveContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ResponsiveContext = React.createContext(null);
+
+export { ResponsiveContext };

package/side-panel/modern-pcss-raw/components/content/Component.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Content: FC<ContentProps>;
+export { ContentProps, Content };

package/side-panel/modern-pcss-raw/components/content/Component.desktop.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ContentProps } from "./Component";
+type ContentDesktopProps = ContentProps & {
+    /**
+     * Размер (только для desktop версии компонента)
+     */
+    size?: 's' | 500;
+};
+declare const ContentDesktop: FC<ContentDesktopProps>;
+export { ContentDesktopProps, ContentDesktop };

package/side-panel/modern-pcss-raw/components/content/Component.desktop.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import cn from 'classnames';
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
+import { Content } from './Component.js';
+import '../../../../shared/modern-pcss-raw';
+import '../../Context.js';
+import '../../../../base-modal/modern-pcss-raw';
+import '../../ResponsiveContext.js';
+
+const styles = {"size-500":"size-500"};
+require('./desktop.css');
+
+const ContentDesktop = ({ size = 500, className, ...restProps }) => (React.createElement(Content, { className: cn(className, size && styles[SIZE_TO_CLASSNAME_MAP[size]]), ...restProps }));
+
+export { ContentDesktop };

package/side-panel/modern-pcss-raw/components/content/Component.js

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '../../../../shared/modern-pcss-raw';
+import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import '../../../../base-modal/modern-pcss-raw';
+
+const styles = {"content":"content","withHeader":"withHeader","flex":"flex"};
+require('./index.css');
+
+const Content = ({ children, className, dataTestId }) => {
+    const { contentRef, hasHeader } = useContext(ModalContext);
+    const responsiveContext = useContext(ResponsiveContext);
+    return (React.createElement("div", { className: cn(styles.content, className, styles.flex, {
+            [styles.withHeader]: hasHeader,
+        }), ref: contentRef, "data-test-id": dataTestId || getDataTestId(responsiveContext?.dataTestId, 'content') }, children));
+};
+
+export { Content };

package/side-panel/modern-pcss-raw/components/content/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ContentProps } from "./Component";
+type ContentMobileProps = ContentProps;
+declare const ContentMobile: FC<ContentMobileProps>;
+export { ContentMobileProps, ContentMobile };

package/side-panel/modern-pcss-raw/components/content/Component.mobile.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import cn from 'classnames';
+import { Content } from './Component.js';
+import '../../../../shared/modern-pcss-raw';
+import '../../Context.js';
+import '../../../../base-modal/modern-pcss-raw';
+import '../../ResponsiveContext.js';
+
+const styles = {"content":"content"};
+require('./mobile.css');
+
+const ContentMobile = ({ className, ...restProps }) => (React.createElement(Content, { className: cn(className, styles.content), ...restProps }));
+
+export { ContentMobile };

package/side-panel/modern-pcss-raw/components/content/desktop.css

@@ -0,0 +1,37 @@
+/* hash: 1v3r8 */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xl: 32px;
+    --gap-3xl: 40px;
+} :root {
+} :root {
+} :root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-content-paddings: var(--gap-3xl) var(--gap-3xl) 0;
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+} .size-500 {
+    padding: var(--side-panel-s-content-paddings)
+} .size-500:last-child {
+        padding-bottom: var(--gap-2xl);
+    }

package/side-panel/modern-pcss-raw/components/content/index.css

@@ -0,0 +1,39 @@
+/* hash: hwiib */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+} .content {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    z-index: 0
+} .content.withHeader {
+        padding-top: 0;
+    } .flex {
+    flex: 1 1 auto;
+}