@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/editor/store/main/reducer.js

@@ -0,0 +1,38 @@
+import { addBlock, changeBlocksOrder, duplicateBlock, getErrorBoundaryState } from './utils';
+// actions
+export const SELECT_BLOCK = 'SELECT_BLOCK';
+export const DELETE_BLOCK = 'DELETE_BLOCK';
+export const COPY_BLOCK = 'COPY_BLOCK';
+export const ADD_BLOCK = 'ADD_BLOCK';
+export const SET_REGION = 'SET_REGION';
+export const ORDER_BLOCK = 'ORDER_BLOCK';
+export const UPDATE_CONTENT = 'UPDATE_CONTENT';
+// reducer
+export const reducer = (state, action) => {
+    const { content } = state;
+    const getNewState = (blocks, activeBlockIndex) => (Object.assign(Object.assign({}, state), { content: Object.assign(Object.assign({}, content), { blocks }), activeBlockIndex }));
+    switch (action.type) {
+        case UPDATE_CONTENT:
+            return Object.assign(Object.assign({}, state), { content: action.payload, errorBoundaryState: getErrorBoundaryState(state.errorBoundaryState) });
+        case SELECT_BLOCK:
+            return Object.assign(Object.assign({}, state), { activeBlockIndex: action.payload });
+        case DELETE_BLOCK: {
+            const blockId = action.payload;
+            return getNewState(content.blocks.filter((_block, index) => index !== blockId), -1);
+        }
+        case COPY_BLOCK: {
+            const index = action.payload;
+            return getNewState(duplicateBlock(content.blocks, index), index + 1);
+        }
+        case ADD_BLOCK: {
+            const { block, index } = action.payload;
+            return getNewState(addBlock(content.blocks, block, index), index);
+        }
+        case ORDER_BLOCK: {
+            const { oldIndex, newIndex } = action.payload;
+            return getNewState(changeBlocksOrder(content.blocks, oldIndex, newIndex), newIndex);
+        }
+        default:
+            return state;
+    }
+};

package/build/esm/editor/store/main/utils.d.ts

@@ -0,0 +1,13 @@
+import { ConstructorBlock, PageContent } from '../../../models';
+import { EditorBlockId } from './reducer';
+export declare const changeBlocksOrder: (array: ConstructorBlock[], oldIndex: number, newIndex: number) => ConstructorBlock[];
+export declare const duplicateBlock: (array: ConstructorBlock[], index: number) => ConstructorBlock[];
+export declare const getNewBlockIndex: (id: EditorBlockId, orderedBlocksCount: number) => number;
+export declare const addBlock: (array: ConstructorBlock[], block: ConstructorBlock, index: number) => ConstructorBlock[];
+export declare const addEditorProps: (content: PageContent) => {
+    animated: boolean;
+    blocks: ConstructorBlock[];
+    menu?: import("../../../models").Menu | undefined;
+    background?: import("../../../models").ThemedMediaProps | undefined;
+};
+export declare const getErrorBoundaryState: (prevState: number) => number;

package/build/esm/editor/store/main/utils.js

@@ -0,0 +1,28 @@
+import cloneDeep from 'lodash/cloneDeep';
+export const changeBlocksOrder = (array, oldIndex, newIndex) => {
+    const result = [...array];
+    const element = result.splice(oldIndex, 1)[0];
+    result.splice(newIndex, 0, element);
+    return result;
+};
+export const duplicateBlock = (array, index) => {
+    const result = [...array];
+    result.splice(index + 1, 0, cloneDeep(result[index]));
+    return result;
+};
+export const getNewBlockIndex = (id, orderedBlocksCount) => {
+    if (id === -1) {
+        return orderedBlocksCount;
+    }
+    // id === 'string' - header block
+    return typeof id === 'string' ? 0 : id + 1;
+};
+export const addBlock = (array, block, index) => {
+    const result = [...array];
+    result.splice(index, 0, block);
+    return result;
+};
+export const addEditorProps = (content) => {
+    return Object.assign(Object.assign({}, content), { animated: false });
+};
+export const getErrorBoundaryState = (prevState) => prevState === Number.MAX_SAFE_INTEGER ? 0 : prevState + 1;

package/build/esm/editor/store/settings/index.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from '../../../models';
+import { EditModeItem, ViewModeItem } from '../../types';
+export declare function useSettingsState(): {
+    viewMode: ViewModeItem;
+    editMode: EditModeItem;
+    theme: Theme;
+    codeFullscreeModeOn: boolean;
+    onViewModeUpdate: (newViewMode: ViewModeItem) => void;
+    onEditModeUpdate: (newEditMode: EditModeItem) => void;
+    onThemeUpdate: (newTheme: Theme) => void;
+    onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn: boolean) => void;
+};

package/build/esm/editor/store/settings/index.js

@@ -0,0 +1,17 @@
+import { useMemo, useReducer } from 'react';
+import { UPDATE_CODE_FULLSCREEN_MODE_ON, UPDATE_EDIT_MODE, UPDATE_THEME, UPDATE_VIEW_MODE, initialState, reducer, } from './reducer';
+export function useSettingsState() {
+    const [{ viewMode, editMode, theme, codeFullscreeModeOn }, dispatch] = useReducer(reducer, initialState);
+    return useMemo(() => {
+        return {
+            viewMode,
+            editMode,
+            theme,
+            codeFullscreeModeOn,
+            onViewModeUpdate: (newViewMode) => dispatch({ type: UPDATE_VIEW_MODE, payload: newViewMode }),
+            onEditModeUpdate: (newEditMode) => dispatch({ type: UPDATE_EDIT_MODE, payload: newEditMode }),
+            onThemeUpdate: (newTheme) => dispatch({ type: UPDATE_THEME, payload: newTheme }),
+            onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn) => dispatch({ type: UPDATE_CODE_FULLSCREEN_MODE_ON, payload: newCodeFullscreeModeOn }),
+        };
+    }, [viewMode, theme, codeFullscreeModeOn, editMode]);
+}

package/build/esm/editor/store/settings/reducer.d.ts

@@ -0,0 +1,37 @@
+import { Theme } from '../../../models';
+import { EditModeItem, ViewModeItem } from '../../types';
+export declare const UPDATE_CODE_FULLSCREEN_MODE_ON = "UPDATE_CODE_FULLSCREEN_MODE_ON";
+export declare const UPDATE_VIEW_MODE = "UPDATE_VIEW_MODE";
+export declare const UPDATE_EDIT_MODE = "UPDATE_EDIT_MODE";
+export declare const UPDATE_THEME = "UPDATE_THEME";
+interface EditorSettingsState {
+    theme: Theme;
+    viewMode: ViewModeItem;
+    editMode: EditModeItem;
+    codeFullscreeModeOn: boolean;
+}
+interface UpdateViewMode {
+    type: typeof UPDATE_VIEW_MODE;
+    payload: ViewModeItem;
+}
+interface UpdateEditMode {
+    type: typeof UPDATE_EDIT_MODE;
+    payload: EditModeItem;
+}
+interface UpdateTheme {
+    type: typeof UPDATE_THEME;
+    payload: Theme;
+}
+interface UpdateCodeFullscreenModeOn {
+    type: typeof UPDATE_CODE_FULLSCREEN_MODE_ON;
+    payload: boolean;
+}
+export type EditorSettingsAction = UpdateViewMode | UpdateEditMode | UpdateTheme | UpdateCodeFullscreenModeOn;
+export declare const reducer: (state: EditorSettingsState, action: EditorSettingsAction) => EditorSettingsState;
+export declare const initialState: {
+    viewMode: ViewModeItem;
+    editMode: EditModeItem;
+    theme: Theme;
+    codeFullscreeModeOn: boolean;
+};
+export {};

package/build/esm/editor/store/settings/reducer.js

@@ -0,0 +1,28 @@
+import { DEFAULT_THEME } from '../../../components/constants';
+import { EditModeItem, ViewModeItem } from '../../types';
+// actions
+export const UPDATE_CODE_FULLSCREEN_MODE_ON = 'UPDATE_CODE_FULLSCREEN_MODE_ON';
+export const UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
+export const UPDATE_EDIT_MODE = 'UPDATE_EDIT_MODE';
+export const UPDATE_THEME = 'UPDATE_THEME';
+// reducer
+export const reducer = (state, action) => {
+    switch (action.type) {
+        case UPDATE_VIEW_MODE:
+            return Object.assign(Object.assign({}, state), { viewMode: action.payload });
+        case UPDATE_EDIT_MODE:
+            return Object.assign(Object.assign({}, state), { editMode: action.payload });
+        case UPDATE_THEME:
+            return Object.assign(Object.assign({}, state), { theme: action.payload });
+        case UPDATE_CODE_FULLSCREEN_MODE_ON:
+            return Object.assign(Object.assign({}, state), { codeFullscreeModeOn: action.payload });
+        default:
+            return state;
+    }
+};
+export const initialState = {
+    viewMode: ViewModeItem.Desktop,
+    editMode: EditModeItem.Form,
+    theme: DEFAULT_THEME,
+    codeFullscreeModeOn: false,
+};

package/build/esm/editor/styles/root.css

@@ -0,0 +1,9 @@
+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);
+}

package/build/esm/editor/types/index.d.ts

@@ -0,0 +1,42 @@
+import { PageConstructorProps, PageConstructorProviderProps } from '../../containers/PageConstructor';
+import { BlockDecorationProps, PageContent } from '../../models';
+import { Theme } from '../../models/common';
+import { SchemaCustomConfig } from '../../schema';
+import { EditBlockActions } from '../components/EditBlock/EditBlock';
+export type EditorBlockId = number | string;
+interface ContentTransformersOptions {
+    viewMode?: ViewModeItem;
+    editMode?: EditModeItem;
+}
+export type ContentTransformer = (content: PageContent, options: ContentTransformersOptions) => PageContent;
+export interface DeviceEmulationSettings {
+    customStyles?: string;
+    applyHostStyles?: boolean;
+}
+export interface EditorProps extends Required<Pick<PageConstructorProps, 'content'>>, Partial<Omit<PageConstructorProps, 'content'>> {
+    providerProps?: PageConstructorProviderProps;
+    onChange?: (data: PageContent) => void;
+    transformContent?: ContentTransformer;
+    customSchema?: SchemaCustomConfig;
+    deviceEmulationSettings?: DeviceEmulationSettings;
+    theme?: Theme;
+}
+export interface EditBlockEditorProps {
+    isActive?: boolean;
+    onSelect: () => void;
+    actions: EditBlockActions;
+}
+export interface EditBlockProps extends EditBlockEditorProps, BlockDecorationProps {
+    isHeader?: boolean;
+}
+export declare enum ViewModeItem {
+    Desktop = "desktop",
+    Tablet = "tablet",
+    Mobile = "mobile"
+}
+export declare enum EditModeItem {
+    View = "view",
+    Form = "form",
+    Code = "code"
+}
+export {};

package/build/esm/editor/types/index.js

@@ -0,0 +1,12 @@
+export var ViewModeItem;
+(function (ViewModeItem) {
+    ViewModeItem["Desktop"] = "desktop";
+    ViewModeItem["Tablet"] = "tablet";
+    ViewModeItem["Mobile"] = "mobile";
+})(ViewModeItem || (ViewModeItem = {}));
+export var EditModeItem;
+(function (EditModeItem) {
+    EditModeItem["View"] = "view";
+    EditModeItem["Form"] = "form";
+    EditModeItem["Code"] = "code";
+})(EditModeItem || (EditModeItem = {}));

package/build/esm/editor/utils/code.d.ts

@@ -0,0 +1,6 @@
+export declare function parseCode(code: string): {
+    blocks: import("../../models").ConstructorBlock[];
+    menu?: import("../../models").Menu | undefined;
+    background?: import("../../models").ThemedMediaProps | undefined;
+    animated?: boolean | undefined;
+};

package/build/esm/editor/utils/code.js

@@ -0,0 +1,6 @@
+import yaml from 'js-yaml';
+export function parseCode(code) {
+    var _a;
+    const pageContent = yaml.load(code);
+    return Object.assign(Object.assign({}, pageContent), { blocks: (_a = pageContent.blocks) === null || _a === void 0 ? void 0 : _a.filter(Boolean) });
+}

package/build/esm/editor/utils/index.d.ts

@@ -0,0 +1,15 @@
+import { BlockDecorationProps, BlockDecorator, CustomConfig } from '../../models';
+import { ViewModeItem } from '../types';
+export declare const formatBlockName: (name: string) => string;
+export declare const addCustomDecorator: (decorators: BlockDecorator[], custom?: CustomConfig) => {
+    decorators: {
+        block: ((props: BlockDecorationProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
+    };
+    blocks?: import("../../models").CustomItems | undefined;
+    subBlocks?: import("../../models").CustomItems | undefined;
+    headers?: import("../../models").CustomItems | undefined;
+    navigation?: import("../../models").CustomItems | undefined;
+    loadable?: import("../../models").LoadableConfig | undefined;
+};
+export declare const getBlockId: ({ index, type }: BlockDecorationProps) => string;
+export declare const checkIsMobile: (viewMode: ViewModeItem) => boolean;

package/build/esm/editor/utils/index.js

@@ -0,0 +1,9 @@
+import capitalize from 'lodash/capitalize';
+import { ViewModeItem } from '../types';
+export const formatBlockName = (name) => capitalize(name).replace(/(block|-)/g, ' ');
+export const addCustomDecorator = (decorators, custom = {}) => {
+    const customDecorators = custom.decorators || {};
+    return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, customDecorators), { block: [...(customDecorators.block || []), ...decorators] }) });
+};
+export const getBlockId = ({ index, type }) => `${type}${index === undefined ? '' : `-${index}`}`;
+export const checkIsMobile = (viewMode) => [ViewModeItem.Mobile, ViewModeItem.Tablet].includes(viewMode);

package/build/esm/editor/utils/validation.d.ts

@@ -0,0 +1,13 @@
+import { ValidateFunction } from 'ajv';
+import { JSONSchema4 } from 'json-schema';
+export interface CodeEditorMessageProps {
+    text: string;
+    status: CodeEditorMessageStatus;
+}
+export declare enum CodeEditorMessageStatus {
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}
+export declare function createValidator(schema: JSONSchema4): ValidateFunction<unknown>;
+export declare function validate(content: string, validator: ValidateFunction): CodeEditorMessageProps;

package/build/esm/editor/utils/validation.js

@@ -0,0 +1,51 @@
+import Ajv from 'ajv';
+import ajvKeywords from 'ajv-keywords';
+import yaml from 'js-yaml';
+import SourceMap from 'js-yaml-source-map';
+import isArray from 'lodash/isArray';
+const SUCCESS_MESSAGE = 'Valid';
+export var CodeEditorMessageStatus;
+(function (CodeEditorMessageStatus) {
+    CodeEditorMessageStatus["SUCCESS"] = "success";
+    CodeEditorMessageStatus["WARNING"] = "warning";
+    CodeEditorMessageStatus["ERROR"] = "error";
+})(CodeEditorMessageStatus || (CodeEditorMessageStatus = {}));
+export function createValidator(schema) {
+    const ajv = new Ajv({ $data: true, allErrors: true, schemas: [schema], strict: false });
+    // TODO: select is deprecated, replace with discriminator:
+    // https://github.com/ajv-validator/ajv-keywords#selectselectcasesselectdefault
+    ajvKeywords(ajv, 'select');
+    return ajv.compile(schema);
+}
+export function validate(content, validator) {
+    let result;
+    if (!content) {
+        return { status: CodeEditorMessageStatus.SUCCESS, text: SUCCESS_MESSAGE };
+    }
+    try {
+        const jsYamlMap = new SourceMap();
+        const data = yaml.load(content, { listener: jsYamlMap.listen() });
+        validator(data);
+        if (validator.errors) {
+            const messages = validator.errors.map(({ instancePath, schemaPath, message, params }) => {
+                const pointer = jsYamlMap.lookup(instancePath.split('/').filter(Boolean));
+                const stringParams = Object.entries(params).map(([key, value]) => {
+                    if (isArray(value)) {
+                        return `${key}: ${value.join(' | ')}`;
+                    }
+                    return `${key}: ${value}`;
+                });
+                const ref = pointer ? `${pointer.line}: ` : '';
+                return `${ref}${instancePath || schemaPath}: ${message}\n${stringParams.join('\n')}`;
+            });
+            result = { status: CodeEditorMessageStatus.WARNING, text: messages.join('\n\n') };
+        }
+        else {
+            result = { status: CodeEditorMessageStatus.SUCCESS, text: SUCCESS_MESSAGE };
+        }
+    }
+    catch ({ message }) {
+        result = { status: CodeEditorMessageStatus.ERROR, text: message };
+    }
+    return result;
+}

package/build/esm/editor/widget/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const DeviceFrameMessageType: {
+    Ready: string;
+    Update: string;
+};

package/build/esm/editor/widget/constants.js

@@ -0,0 +1,5 @@
+const prefix = 'PC_EDITOR_DEVICE';
+export const DeviceFrameMessageType = {
+    Ready: `${prefix}_MESSAGE_READY`,
+    Update: `${prefix}_MESSAGE_UPDATE`,
+};

package/build/esm/editor/widget/index.d.ts

@@ -0,0 +1,21 @@
+import { EditorContextType } from '../context';
+import { DeviceEmulationSettings } from '../types';
+interface DeviceIframeParams {
+    initialData?: EditorContextType;
+    className?: string;
+    settings?: DeviceEmulationSettings;
+}
+type InitialData = EditorContextType;
+export declare class DeviceIframe {
+    iframeElement?: HTMLIFrameElement;
+    private initialData?;
+    private settings?;
+    constructor(parentElement: HTMLDivElement, { className, initialData, settings }: DeviceIframeParams);
+    onDataUpdate(data: InitialData): void;
+    onActivenessUpdate(active: boolean): void;
+    destroy(): void;
+    private addWidgetScript;
+    private addCustomStyles;
+    private onInit;
+}
+export {};

package/build/esm/editor/widget/index.js

@@ -0,0 +1,71 @@
+//widget bundle available after build only
+//@ts-ignore
+import bundle from '../../../../widget';
+import { DeviceFrameMessageType } from './constants';
+import { getHostStyles } from './utils';
+export class DeviceIframe {
+    constructor(parentElement, { className = '', initialData, settings }) {
+        const iframe = document.createElement('iframe');
+        parentElement.appendChild(iframe);
+        if (iframe.contentWindow) {
+            const frameDoc = iframe.contentWindow.document;
+            iframe.className = className;
+            frameDoc.body.classList.add(...document.body.classList, ...className.split(' '));
+            iframe.style.visibility = 'hidden';
+            this.iframeElement = iframe;
+            this.initialData = initialData;
+            this.settings = settings;
+            window.addEventListener('message', this.onInit.bind(this));
+            this.addWidgetScript();
+            this.addCustomStyles();
+        }
+    }
+    onDataUpdate(data) {
+        var _a, _b;
+        (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage({
+            type: DeviceFrameMessageType.Update,
+            data,
+        }, window.origin);
+    }
+    onActivenessUpdate(active) {
+        if (this.iframeElement) {
+            this.iframeElement.style.visibility = active ? 'visible' : 'hidden';
+        }
+    }
+    destroy() {
+        window.removeEventListener('message', this.onInit.bind(this));
+    }
+    addWidgetScript() {
+        var _a, _b;
+        const frameDoc = (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document;
+        if (frameDoc) {
+            const head = frameDoc === null || frameDoc === void 0 ? void 0 : frameDoc.getElementsByTagName('head')[0];
+            const script = frameDoc.createElement('script');
+            script.appendChild(document.createTextNode(bundle));
+            head.appendChild(script);
+        }
+    }
+    addCustomStyles() {
+        var _a, _b;
+        const { applyHostStyles, customStyles } = this.settings || {};
+        const frameDoc = (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document;
+        if (frameDoc) {
+            const head = frameDoc === null || frameDoc === void 0 ? void 0 : frameDoc.getElementsByTagName('head')[0];
+            let styles = applyHostStyles ? getHostStyles() : '';
+            if (customStyles) {
+                styles += `\n${customStyles}`;
+            }
+            if (styles) {
+                const style = frameDoc.createElement('style');
+                style.appendChild(document.createTextNode(styles));
+                head.appendChild(style);
+            }
+        }
+    }
+    onInit(event) {
+        const { type } = event.data;
+        if (type === DeviceFrameMessageType.Ready && this.initialData) {
+            this.onDataUpdate(this.initialData);
+        }
+    }
+}

package/build/esm/editor/widget/utils.d.ts

@@ -0,0 +1 @@
+export declare const getHostStyles: () => string;

package/build/esm/editor/widget/utils.js

@@ -0,0 +1,15 @@
+export const getHostStyles = () => {
+    return [...document.styleSheets]
+        .map((styleSheet) => {
+        try {
+            return [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
+        }
+        catch (e) {
+            //eslint-disable-next-line no-console
+            console.log(`Access to stylesheet  ${styleSheet.href} is denied. Ignoring...`);
+            return '';
+        }
+    })
+        .filter(Boolean)
+        .join('\n');
+};

package/build/esm/grid/Break/Break.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Break: React.FunctionComponent;

package/build/esm/grid/Break/Break.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const Break = () => React.createElement("div", { className: "w-100" });

package/build/esm/grid/Col/Col.d.ts

@@ -0,0 +1,8 @@
+import React, { CSSProperties } from 'react';
+import { QAProps, Refable, Roleable } from '../../models';
+import { GridColumnClassParams } from '../types';
+export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps, Roleable {
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "hidden" | "sizes" | "className" | "role" | "qa" | "offsets" | "orders" | "visible" | "alignSelf" | "justifyContent" | "reset"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/grid/Col/Col.js

@@ -0,0 +1,8 @@
+import { __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { getColClass } from '../utils';
+export const Col = forwardRef((props, ref) => {
+    const { children, style, qa, role } = props, rest = __rest(props, ["children", "style", "qa", "role"]);
+    return (React.createElement("div", { ref: ref, className: getColClass(rest), style: style, "data-qa": qa, role: role }, children));
+});
+Col.displayName = 'Col';

package/build/esm/grid/Grid/Grid.css

@@ -0,0 +1,87 @@
+.pc-Grid .container-fluid,
+.pc-Grid .container {
+  max-width: calc(1232px + 8px * 2 + 40px * 2);
+}
+.pc-Grid .row {
+  margin-right: 0;
+  margin-left: 0;
+}
+.pc-Grid .pc-Grid .container-fluid,
+.pc-Grid .pc-Grid .container {
+  padding: 0;
+}
+.pc-Grid .row .row {
+  margin: 0 -8px;
+}
+.pc-Grid_debug .container,
+.pc-Grid_debug .container-fluid,
+.pc-Grid_debug [class*=col-] {
+  box-sizing: border-box;
+  border: 1px solid var(--g-color-line-generic);
+}
+@media only screen and (max-width: 577px) {
+  .pc-Grid .container,
+  .pc-Grid .container-fluid {
+    padding: 0 16px;
+  }
+  .pc-Grid .col,
+  .pc-Grid .col-sm-auto,
+  .pc-Grid .col-auto {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-0,
+  .pc-Grid .col-0 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-1,
+  .pc-Grid .col-1 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-2,
+  .pc-Grid .col-2 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-3,
+  .pc-Grid .col-3 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-4,
+  .pc-Grid .col-4 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-5,
+  .pc-Grid .col-5 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-6,
+  .pc-Grid .col-6 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-7,
+  .pc-Grid .col-7 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-8,
+  .pc-Grid .col-8 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-9,
+  .pc-Grid .col-9 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-10,
+  .pc-Grid .col-10 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-11,
+  .pc-Grid .col-11 {
+    padding: 0 8px;
+  }
+  .pc-Grid .col-sm-12,
+  .pc-Grid .col-12 {
+    padding: 0 8px;
+  }
+  .pc-Grid .row .row {
+    margin: 0 -8px;
+  }
+}

package/build/esm/grid/Grid/Grid.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import '../styles/bootstrap.css';
+import './Grid.css';
+export interface GridProps {
+    debug?: boolean;
+    className?: string;
+    containerClass?: string;
+    style?: React.CSSProperties;
+}
+export declare const Grid: ({ debug, children, className, style, containerClass, }: React.PropsWithChildren<GridProps>) => JSX.Element;

package/build/esm/grid/Grid/Grid.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { block } from '../../utils';
+import '../styles/bootstrap.css';
+import './Grid.css';
+const b = block('Grid');
+export const Grid = ({ debug, children, className, style, containerClass = '', }) => (React.createElement("div", { style: style, className: b({ debug }, className) },
+    React.createElement("div", { className: `container-fluid ${containerClass}` }, children)));

package/build/esm/grid/Row/Row.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Refable } from '../../models/common';
+import { GridAlignItems, GridJustifyContent } from '../types';
+export interface RowProps extends Refable<HTMLDivElement> {
+    className?: string;
+    justifyContent?: GridJustifyContent;
+    alignItems?: GridAlignItems;
+    noGutter?: boolean;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare const Row: React.ForwardRefExoticComponent<Pick<RowProps, "style" | "children" | "className" | "justifyContent" | "alignItems" | "noGutter"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/grid/Row/Row.js

@@ -0,0 +1,11 @@
+import React, { forwardRef, useCallback } from 'react';
+export const Row = forwardRef((props, ref) => {
+    const { className, justifyContent, alignItems, noGutter, style, children } = props;
+    const getClassName = useCallback(() => {
+        return ['row', className, justifyContent, alignItems, noGutter && 'no-gutter']
+            .filter(Boolean)
+            .join(' ');
+    }, [className, justifyContent, alignItems, noGutter]);
+    return (React.createElement("div", { ref: ref, className: getClassName(), style: style }, children));
+});
+Row.displayName = 'Row';