@gravity-ui/page-constructor 5.14.4-alpha.2 → 5.14.4-alpha.3

package/build/esm/blocks/HeaderSlider/index.d.ts

@@ -2,6 +2,7 @@ declare const HeaderSliderBlockConfig: {
     component: ({ items, arrows, ...props }: import("../..").HeaderSliderBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             type: string;

package/build/esm/blocks/HeaderSlider/index.js

@@ -5,6 +5,7 @@ const HeaderSliderBlockConfig = {
     component: HeaderSliderBlock,
     schema: {
         name: 'Header Slider Block',
+        group: 'card-containers',
         inputs: generateFromAJV(HeaderSliderBlockSchema['header-slider-block']),
         default: {
             type: 'header-slider-block',

package/build/esm/blocks/Icons/Icons.js

@@ -15,8 +15,8 @@ const Icons = ({ title, description, size = 's', colSizes = { all: 12 }, items }
     const onClick = useCallback(({ analyticsEvents, url }) => {
         handleAnalytics(analyticsEvents, { url });
     }, [handleAnalytics]);
-    return (React.createElement("div", { className: b({ size }) },
-        React.createElement(Grid, null,
+    return (React.createElement(Grid, null,
+        React.createElement("div", { className: b({ size }) },
             (title || description) && (React.createElement(Title, { className: b('header'), title: title, subtitle: description, colSizes: colSizes })),
             items &&
                 items.map((item) => {

package/build/esm/blocks/Icons/index.d.ts

@@ -2,11 +2,18 @@ declare const IconsBlockConfig: {
     component: ({ title, description, size, colSizes, items }: import("../..").IconsBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             type: string;
             title: string;
             description: string;
+            size: string;
+            items: {
+                url: string;
+                text: string;
+                src: string;
+            }[];
         };
     };
 };

package/build/esm/blocks/Icons/index.js

@@ -5,11 +5,55 @@ const IconsBlockConfig = {
     component: IconsBlock,
     schema: {
         name: 'Icons Block',
+        group: 'block',
         inputs: generateFromAJV(IconsProps),
         default: {
             type: 'icons-block',
             title: 'Icons Block',
             description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            size: 'm',
+            items: [
+                {
+                    url: '/security/standards/software-registry',
+                    text: 'Государственные реестры РФ',
+                    src: 'https://storage.yandexcloud.net/cloud-www-assets/security-new/main-shield/security-software-registry.svg',
+                },
+                {
+                    url: '/security/standards/gdpr',
+                    text: 'Общий регламент защиты данных (GDPR)',
+                    src: 'https://storage.yandexcloud.net/cloud-www-assets/security-new/main-shield/security-gdpr.svg',
+                },
+                {
+                    url: '/security/standards/cloud-security-alliance',
+                    text: 'Cloud Security Alliance',
+                    src: 'https://storage.yandexcloud.net/cloud-www-assets/security-new/main-shield/security-csa.svg',
+                },
+                {
+                    url: '/security/standards/iso-standards',
+                    text: 'Международная организация по стандартизации (ISO)',
+                    src: 'https://storage.yandexcloud.net/cloud-www-assets/security-new/main-shield/security-iso.svg',
+                },
+                {
+                    url: '/security/standards/152-fz',
+                    text: '№152-ФЗ «О персональных данных»',
+                    src: 'https://storage.yandexcloud.net/cloud-www-assets/security-new/main-shield/security-152-fz.svg',
+                },
+                {
+                    url: '/security/standards/gost-p-57580',
+                    text: 'ГОСТ Р 57580',
+                    src: 'https://storage.yandexcloud.net/cloud-www-assets/security-new/main-shield/security-gost.svg',
+                },
+                {
+                    url: '/security/standards/pci',
+                    text: 'Payment Card Industry Data Security Standard',
+                    src: 'https://storage.yandexcloud.net/cloud-www-assets/security-new/main-shield/security-pci.svg',
+                },
+                {
+                    url: '/docs/security/standard/all',
+                    text: 'Стандарт по защите облачной инфраструктуры',
+                    src: 'https://storage.yandexcloud.net/cloud-www-assets/security-new/icons/security_yc.svg',
+                },
+            ],
         },
     },
 };

package/build/esm/blocks/Info/index.d.ts

@@ -2,6 +2,7 @@ declare const InfoBlockConfig: {
     component: (props: import("../..").InfoBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             type: string;

package/build/esm/blocks/Info/index.js

@@ -5,6 +5,7 @@ const InfoBlockConfig = {
     component: InfoBlock,
     schema: {
         name: 'Info Block',
+        group: 'block',
         inputs: generateFromAJV(InfoBlockSchema['info-block']),
         default: {
             type: 'info-block',

package/build/esm/blocks/Map/index.d.ts

@@ -2,6 +2,7 @@ declare const MapBlockConfig: {
     component: ({ map, border, disableShadow, ...props }: import("../..").MapBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             title: string;

package/build/esm/blocks/Map/index.js

@@ -5,6 +5,7 @@ const MapBlockConfig = {
     component: MapBlock,
     schema: {
         name: 'Map Block',
+        group: 'block',
         inputs: generateFromAJV(MapBlockSchema['map-block']),
         default: {
             title: 'Map Block',

package/build/esm/blocks/Media/index.d.ts

@@ -2,12 +2,36 @@ declare const MediaBlockConfig: {
     component: (props: import("../..").MediaBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
-            type: string;
             title: string;
-            additionalInfo: string;
             description: string;
+            additionalInfo: string;
+            links: {
+                url: string;
+                text: string;
+                theme: string;
+                arrow: boolean;
+            }[];
+            buttons: {
+                text: string;
+                theme: string;
+                url: string;
+            }[];
+            list: ({
+                title: string;
+                text: string;
+            } | {
+                text: string;
+                title?: undefined;
+            } | {
+                title: string;
+                text?: undefined;
+            })[];
+            media: {
+                image: string;
+            };
         };
     };
 };

package/build/esm/blocks/Media/index.js

@@ -5,12 +5,47 @@ const MediaBlockConfig = {
     component: MediaBlock,
     schema: {
         name: 'Media Block',
+        group: 'block',
         inputs: generateFromAJV(MediaBlockSchema['media-block']),
         default: {
-            type: 'media-block',
-            title: 'Media Block',
-            additionalInfo: 'Additional info',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            title: 'Lorem ipsum dolor sit',
+            description: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+            additionalInfo: 'Duis aute irure dolor in reprehenderit n voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+            links: [
+                {
+                    url: '#',
+                    text: 'Learn more',
+                    theme: 'normal',
+                    arrow: true,
+                },
+            ],
+            buttons: [
+                {
+                    text: 'Button',
+                    theme: 'action',
+                    url: 'https://example.com',
+                },
+                {
+                    text: 'Button',
+                    theme: 'outlined',
+                    url: '#',
+                },
+            ],
+            list: [
+                {
+                    title: 'Lorem ipsum',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    title: 'Lorem ipsum ipsum',
+                },
+            ],
+            media: {
+                image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/main/new/media-01-01.jpg',
+            },
         },
     },
 };

package/build/esm/blocks/PromoFeaturesBlock/index.d.ts

@@ -2,10 +2,20 @@ declare const PromoFeaturesBlockConfig: {
     component: (props: import("../..").PromoFeaturesProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             title: string;
-            items: {}[];
+            theme: string;
+            items: ({
+                title: string;
+                text: string;
+                theme?: undefined;
+            } | {
+                title: string;
+                text: string;
+                theme: string;
+            })[];
         };
     };
 };

package/build/esm/blocks/PromoFeaturesBlock/index.js

@@ -5,10 +5,40 @@ const PromoFeaturesBlockConfig = {
     component: PromoFeaturesBlock,
     schema: {
         name: 'Promo Features Block',
+        group: 'block',
         inputs: generateFromAJV(PromoFeaturesBlockSchema['promo-features-block']),
         default: {
             title: 'Promo Features Block',
-            items: [{}],
+            theme: 'default',
+            items: [
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    theme: 'accent',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    theme: 'accent-light',
+                },
+                {
+                    title: 'Lorem ipsum dolor sit amet',
+                    text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    theme: 'primary',
+                },
+            ],
         },
     },
 };

package/build/esm/blocks/Questions/index.d.ts

@@ -2,6 +2,7 @@ declare const QuestionsBlockConfig: {
     component: (props: import("../..").QuestionsProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             type: string;

package/build/esm/blocks/Questions/index.js

@@ -5,6 +5,7 @@ const QuestionsBlockConfig = {
     component: QuestionsBlock,
     schema: {
         name: 'Questions Block',
+        group: 'block',
         inputs: generateFromAJV(QuestionsBlockSchema['questions-block']),
         default: {
             type: 'questions-block',

package/build/esm/blocks/Share/index.d.ts

@@ -2,6 +2,7 @@ declare const ShareBlockConfig: {
     component: ({ items, title }: import("../..").ShareBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             items: string[];

package/build/esm/blocks/Share/index.js

@@ -5,6 +5,7 @@ const ShareBlockConfig = {
     component: ShareBlock,
     schema: {
         name: 'Share Block',
+        group: 'block',
         inputs: generateFromAJV(ShareBlockSchema['share-block']),
         default: {
             items: ['vk', 'telegram', 'facebook'],

package/build/esm/blocks/Slider/index.d.ts

@@ -2,7 +2,26 @@ declare const SliderBlockConfig: {
     component: (props: import("../..").WithChildren<import("./Slider").SliderProps>) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
+        default: {
+            dots: boolean;
+            type: string;
+            title: string;
+            description: string;
+            slidesToShow: number;
+            arrows: boolean;
+            children: {
+                type: string;
+                text: string;
+                url: string;
+                author: {
+                    firstName: string;
+                    secondName: string;
+                    description: string;
+                };
+            }[];
+        };
     };
 };
 export default SliderBlockConfig;

package/build/esm/blocks/Slider/index.js

@@ -5,7 +5,38 @@ const SliderBlockConfig = {
     component: SliderBlock,
     schema: {
         name: 'Slider Block',
+        group: 'card-containers',
         inputs: generateFromAJV(SliderBlockSchema['slider-block']),
+        default: {
+            dots: true,
+            type: 'slider-block',
+            title: 'Slider Block with Quote Cards',
+            description: 'You can insert any card inside block',
+            slidesToShow: 1,
+            arrows: true,
+            children: [
+                {
+                    type: 'quote',
+                    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+                    url: 'https://example.com',
+                    author: {
+                        firstName: 'Lorem',
+                        secondName: 'ipsum',
+                        description: 'Lorem ipsum',
+                    },
+                },
+                {
+                    type: 'quote',
+                    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+                    url: 'https://example.com',
+                    author: {
+                        firstName: 'Lorem',
+                        secondName: 'ipsum',
+                        description: 'Lorem ipsum',
+                    },
+                },
+            ],
+        },
     },
 };
 export default SliderBlockConfig;

package/build/esm/blocks/Table/index.d.ts

@@ -2,7 +2,17 @@ declare const TableBlockConfig: {
     component: (props: import("../..").TableBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
+        default: {
+            type: string;
+            title: string;
+            table: {
+                content: string[][];
+                legend: string[];
+                justify: string[];
+            };
+        };
     };
 };
 export default TableBlockConfig;

package/build/esm/blocks/Table/index.js

@@ -5,7 +5,24 @@ const TableBlockConfig = {
     component: TableBlock,
     schema: {
         name: 'Table Block',
+        group: 'block',
         inputs: generateFromAJV(TableBlockSchema['table-block']),
+        default: {
+            type: 'table-block',
+            title: 'Lorem ipsum dolor sit amet',
+            table: {
+                content: [
+                    ['Lorem', 'ipsum 1', 'dolor 2', 'sit 3'],
+                    ['Lorem 1', '0', '0', '0'],
+                    ['Lorem 2', '0', '0', '1'],
+                    ['Lorem 3', '0', '0', '1'],
+                    ['Lorem 4', '0', '1', '1'],
+                    ['Lorem 5', '1', '1', '1'],
+                ],
+                legend: ['ipsum 1', 'ipsum 2'],
+                justify: ['start', 'center', 'center', 'center'],
+            },
+        },
     },
 };
 export default TableBlockConfig;

package/build/esm/blocks/Tabs/index.d.ts

@@ -2,6 +2,7 @@ declare const TabsBlockConfig: {
     component: ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: import("../..").TabsBlockProps) => JSX.Element;
     schema: {
         name: string;
+        group: string;
         inputs: import("../../editor-v2").ConfigInput[];
         default: {
             title: string;

package/build/esm/blocks/Tabs/index.js

@@ -5,6 +5,7 @@ const TabsBlockConfig = {
     component: TabsBlock,
     schema: {
         name: 'Tabs Block',
+        group: 'block',
         inputs: generateFromAJV(TabsBlockSchema['tabs-block']),
         default: {
             title: 'Tabs Block',

package/build/esm/common/types/forms.d.ts

@@ -1,6 +1,7 @@
 export interface BlockConfig {
     name: string;
     inputs: Array<ConfigInput>;
+    group?: string;
     default?: object;
 }
 export interface TextInput {

package/build/esm/constructor-items.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConfigInput } from './common/types';
+import { BlockConfig } from './common/types';
 /**
  * @deprecated use blockDataMap
  **/
@@ -50,10 +50,6 @@ export declare const navItemMap: {
 };
 export interface BlockData {
     component: React.ComponentType<any>;
-    schema: {
-        name: string;
-        inputs: ConfigInput[];
-        default?: object;
-    };
+    schema: BlockConfig;
 }
 export declare const blockDataMap: Record<string, BlockData>;

package/build/esm/constructor-items.js

@@ -30,7 +30,7 @@ import BasicCardConfig from './sub-blocks/BasicCard';
 import ContentConfig from './sub-blocks/Content';
 import DividerConfig from './sub-blocks/Divider';
 import ImageCardConfig from './sub-blocks/ImageCard';
-import LayoutItemConfig from './sub-blocks/LayoutItem/form';
+import LayoutItemConfig from './sub-blocks/LayoutItem';
 import MediaCardConfig from './sub-blocks/MediaCard';
 import PriceCardConfig from './sub-blocks/PriceCard';
 import PriceDetailedConfig from './sub-blocks/PriceDetailed';

package/build/esm/editor-v2/components/BlocksList/BlocksList.css

@@ -18,21 +18,47 @@ body {
 }
 .pc-blocks-list__card {
   padding: 8px;
-  cursor: pointer;
+  cursor: grab;
   user-select: none;
   margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
 }
 .pc-blocks-list__card:last-child {
   margin-bottom: 0;
 }
 .pc-blocks-list__card:active {
   background-color: var(--g-color-base-generic-hover);
+  cursor: grabbing;
+}
+.pc-blocks-list__name {
+  flex: 1;
 }
 .pc-blocks-list__title {
   font-size: var(--g-text-subheader-3-font-size);
   line-height: var(--g-text-subheader-3-line-height);
   font-weight: var(--g-text-subheader-font-weight);
   margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.pc-blocks-list__subtitle {
+  font-size: var(--g-text-subheader-2-font-size);
+  line-height: var(--g-text-subheader-2-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.pc-blocks-list__group {
+  margin-bottom: 16px;
+}
+.pc-blocks-list__group:last-child {
+  margin-bottom: 0;
 }
 .pc-blocks-list__section {
   margin-bottom: 20px;

package/build/esm/editor-v2/components/BlocksList/BlocksList.js

@@ -1,20 +1,52 @@
 import React, { useCallback } from 'react';
-import { Card } from '@gravity-ui/uikit';
+import { Grip, Plus } from '@gravity-ui/icons';
+import { Button, Card, Icon } from '@gravity-ui/uikit';
+import _ from 'lodash';
 import { ActionTypes } from '../../../common/types';
 import { block } from '../../../utils';
 import { useContentConfigStore } from '../../context/contentConfig';
+import { useEditorStore } from '../../context/editorContext';
 import { useMessageSender } from '../../context/messagesContext';
 import './BlocksList.css';
 const b = block('blocks-list');
 const BlocksList = (_p) => {
-    const { blocks } = useContentConfigStore();
+    const { blocks, insertBlock } = useContentConfigStore();
+    const { selectedBlock } = useEditorStore();
     const sendMessage = useMessageSender();
     const onMouseDown = useCallback((blockType) => {
         sendMessage({ type: ActionTypes.InsertModeEnable, payload: { blockType } });
     }, [sendMessage]);
+    const onAddClick = useCallback((type) => {
+        const path = selectedBlock ? selectedBlock.path : [0];
+        return insertBlock(path, type);
+    }, [insertBlock, selectedBlock]);
+    const groups = blocks.reduce((acc, currentBlock) => {
+        const group = currentBlock.schema.group;
+        if (group) {
+            if (!acc[group]) {
+                /* eslint-disable no-param-reassign */
+                acc[group] = [];
+            }
+            acc[group].push(currentBlock);
+        }
+        else {
+            if (!acc['other']) {
+                /* eslint-disable no-param-reassign */
+                acc['other'] = [];
+            }
+            acc['other'].push(currentBlock);
+        }
+        return acc;
+    }, {});
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('section') },
             React.createElement("div", { className: b('title') }, "Blocks"),
-            blocks.map(({ type, schema: { name } }) => (React.createElement(Card, { key: type, className: b('card'), onMouseDown: () => onMouseDown(type) }, name))))));
+            Object.entries(groups).map(([key, groupBlocks]) => (React.createElement("div", { className: b('group'), key: key },
+                React.createElement("div", { className: b('subtitle') }, _.capitalize(key)),
+                React.createElement("div", null, groupBlocks.map(({ type, schema: { name } }) => (React.createElement(Card, { key: type, className: b('card'), onMouseDown: () => onMouseDown(type) },
+                    React.createElement(Icon, { data: Grip }),
+                    React.createElement("div", { className: b('name') }, name),
+                    React.createElement(Button, { onClick: () => onAddClick(type) },
+                        React.createElement(Icon, { data: Plus }))))))))))));
 };
 export default BlocksList;

package/build/esm/editor-v2/components/Panels/Panels.css

@@ -0,0 +1,36 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-panels__button-wrap {
+  --pc-editor-panels-button-gap: 8px;
+  position: absolute;
+  z-index: 1000;
+}
+.pc-panels__button-wrap_left {
+  bottom: var(--pc-editor-panels-button-gap);
+  left: calc(100% + var(--pc-editor-panels-button-gap));
+}
+.pc-panels__button-wrap_right {
+  bottom: var(--pc-editor-panels-button-gap);
+  right: calc(100% + var(--pc-editor-panels-button-gap));
+}
+.pc-panels__draggable {
+  position: relative;
+  width: 12px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: var(--g-color-line-generic);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--g-color-base-background);
+}