superdesk-ui-framework 3.0.65 → 3.0.67

package/react/examples/pages/playgrounds/react-playgrounds/components/Index.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarMenu = exports.SearchBar = exports.PanelFooter = exports.PanelHeader = exports.PanelContentBlock = exports.PanelContent = exports.Panel = exports.GraphicButton = exports.GraphicButtonsGroup = exports.SubNav = exports.ContentSplitter = exports.AuthoringContainer = exports.LeftPanel = exports.RightPanel = exports.OverlayPanel = exports.MainPanel = exports.HeaderPanel = exports.LayoutContainer = exports.Layout = void 0;
+var Layout_1 = require("./Layout");
+Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return Layout_1.Layout; } });
+var LayoutContainer_1 = require("./LayoutContainer");
+Object.defineProperty(exports, "LayoutContainer", { enumerable: true, get: function () { return LayoutContainer_1.LayoutContainer; } });
+var HeaderPanel_1 = require("./HeaderPanel");
+Object.defineProperty(exports, "HeaderPanel", { enumerable: true, get: function () { return HeaderPanel_1.HeaderPanel; } });
+var MainPanel_1 = require("./MainPanel");
+Object.defineProperty(exports, "MainPanel", { enumerable: true, get: function () { return MainPanel_1.MainPanel; } });
+var OverlayPanel_1 = require("./OverlayPanel");
+Object.defineProperty(exports, "OverlayPanel", { enumerable: true, get: function () { return OverlayPanel_1.OverlayPanel; } });
+var RightPanel_1 = require("./RightPanel");
+Object.defineProperty(exports, "RightPanel", { enumerable: true, get: function () { return RightPanel_1.RightPanel; } });
+var LeftPanel_1 = require("./LeftPanel");
+Object.defineProperty(exports, "LeftPanel", { enumerable: true, get: function () { return LeftPanel_1.LeftPanel; } });
+var AuthoringContainer_1 = require("./AuthoringContainer");
+Object.defineProperty(exports, "AuthoringContainer", { enumerable: true, get: function () { return AuthoringContainer_1.AuthoringContainer; } });
+var ContentSplitter_1 = require("./ContentSplitter");
+Object.defineProperty(exports, "ContentSplitter", { enumerable: true, get: function () { return ContentSplitter_1.ContentSplitter; } });
+var SubNav_1 = require("./SubNav");
+Object.defineProperty(exports, "SubNav", { enumerable: true, get: function () { return SubNav_1.SubNav; } });
+var GraphicButtonsGroup_1 = require("./GraphicButtonsGroup");
+Object.defineProperty(exports, "GraphicButtonsGroup", { enumerable: true, get: function () { return GraphicButtonsGroup_1.GraphicButtonsGroup; } });
+var GraphicButton_1 = require("./GraphicButton");
+Object.defineProperty(exports, "GraphicButton", { enumerable: true, get: function () { return GraphicButton_1.GraphicButton; } });
+var Panel_1 = require("./Panel");
+Object.defineProperty(exports, "Panel", { enumerable: true, get: function () { return Panel_1.Panel; } });
+var PanelContent_1 = require("./PanelContent");
+Object.defineProperty(exports, "PanelContent", { enumerable: true, get: function () { return PanelContent_1.PanelContent; } });
+var PanelContentBlock_1 = require("./PanelContentBlock");
+Object.defineProperty(exports, "PanelContentBlock", { enumerable: true, get: function () { return PanelContentBlock_1.PanelContentBlock; } });
+var PanelHeader_1 = require("./PanelHeader");
+Object.defineProperty(exports, "PanelHeader", { enumerable: true, get: function () { return PanelHeader_1.PanelHeader; } });
+var PanelFooter_1 = require("./PanelFooter");
+Object.defineProperty(exports, "PanelFooter", { enumerable: true, get: function () { return PanelFooter_1.PanelFooter; } });
+var SearchBar_1 = require("./SearchBar");
+Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return SearchBar_1.SearchBar; } });
+var SidebarMenu_1 = require("./SidebarMenu");
+Object.defineProperty(exports, "SidebarMenu", { enumerable: true, get: function () { return SidebarMenu_1.SidebarMenu; } });

package/react/examples/pages/playgrounds/react-playgrounds/components/Layout.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    header: string;
+    children?: React.ReactNode;
+    theme?: string;
+}
+export declare const Layout: ({ header, children, theme, }: IProps) => JSX.Element;
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/Layout.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+var React = __importStar(require("react"));
+var Layout = function (_a) {
+    var header = _a.header, children = _a.children, theme = _a.theme;
+    return (React.createElement("div", { className: 'sd-page-grid--test docs-page__full-width-helper', "data-theme": theme },
+        React.createElement("div", { className: 'sd-main-menu' },
+            React.createElement("div", { className: 'sd-main-menu__inner' })),
+        React.createElement("header", { className: 'sd-top-menu' },
+            React.createElement("a", { className: 'sd-top-menu__collapse-nav' },
+                React.createElement("i", { className: 'icon-collapse icon--white' })),
+            React.createElement("p", { className: 'sd-top-menu__header' }, header)),
+        React.createElement("section", { id: '1', className: 'sd-content sd-content-wrapper' }, children),
+        React.createElement("footer", { className: 'sd-bottom-bar' }, "Footer")));
+};
+exports.Layout = Layout;

package/react/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+export declare class LayoutContainer extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.js

@@ -0,0 +1,53 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutContainer = void 0;
+var React = __importStar(require("react"));
+var LayoutContainer = /** @class */ (function (_super) {
+    __extends(LayoutContainer, _super);
+    function LayoutContainer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LayoutContainer.prototype.render = function () {
+        return (React.createElement("div", { className: 'sd-content-wrapper__main-content-area sd-main-content-grid comfort' }, this.props.children));
+    };
+    return LayoutContainer;
+}(React.PureComponent));
+exports.LayoutContainer = LayoutContainer;

package/react/examples/pages/playgrounds/react-playgrounds/components/LeftPanel.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+    open?: boolean;
+}
+export declare class LeftPanel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/LeftPanel.js

@@ -0,0 +1,53 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LeftPanel = void 0;
+var React = __importStar(require("react"));
+var LeftPanel = /** @class */ (function (_super) {
+    __extends(LeftPanel, _super);
+    function LeftPanel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LeftPanel.prototype.render = function () {
+        return (React.createElement("div", { className: 'sd-main-content-grid__filter' + (this.props.open ? ' open-filters' : '') }, this.props.children));
+    };
+    return LeftPanel;
+}(React.PureComponent));
+exports.LeftPanel = LeftPanel;

package/react/examples/pages/playgrounds/react-playgrounds/components/MainPanel.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+    className?: string;
+    padding?: 'small' | 'medium' | 'large' | 'none';
+}
+export declare class MainPanel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/MainPanel.js

@@ -0,0 +1,63 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainPanel = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var MainPanel = /** @class */ (function (_super) {
+    __extends(MainPanel, _super);
+    function MainPanel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    MainPanel.prototype.render = function () {
+        var classes = (0, classnames_1.default)('sd-main-content-grid__content', {
+            'sd-padding--2': !this.props.padding || this.props.padding === 'small',
+            'sd-padding--3': this.props.padding === 'medium',
+            'sd-padding--4': this.props.padding === 'large',
+            'sd-padding--0': this.props.padding === 'none',
+        }, this.props.className);
+        return (React.createElement("div", { className: classes }, this.props.children));
+    };
+    return MainPanel;
+}(React.PureComponent));
+exports.MainPanel = MainPanel;

package/react/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+export declare class OverlayPanel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.js

@@ -0,0 +1,55 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayPanel = void 0;
+var React = __importStar(require("react"));
+var OverlayPanel = /** @class */ (function (_super) {
+    __extends(OverlayPanel, _super);
+    function OverlayPanel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    OverlayPanel.prototype.render = function () {
+        return (React.createElement("div", { className: 'sd-main-content-grid__overlay' },
+            React.createElement("div", { className: 'sd-overlay-panel sd-overlay-panel--dark-ui' },
+                React.createElement("div", { className: 'side-panel side-panel--shadow-right side-panel--dark-ui' }, this.props.children))));
+    };
+    return OverlayPanel;
+}(React.PureComponent));
+exports.OverlayPanel = OverlayPanel;

package/react/examples/pages/playgrounds/react-playgrounds/components/Panel.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+    side?: 'left' | 'right';
+    background?: 'transparent' | 'light' | 'grey' | 'dark';
+}
+export declare class Panel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/Panel.js

@@ -0,0 +1,63 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Panel = /** @class */ (function (_super) {
+    __extends(Panel, _super);
+    function Panel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Panel.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('side-panel', (_a = {},
+            _a["side-panel--".concat(this.props.side)] = this.props.side,
+            _a["side-panel--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
+            _a));
+        return (React.createElement("div", { className: 'side-panel__container' },
+            React.createElement("div", { className: classes }, this.props.children)));
+    };
+    return Panel;
+}(React.PureComponent));
+exports.Panel = Panel;

package/react/examples/pages/playgrounds/react-playgrounds/components/PanelContent.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+export declare class PanelContent extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/PanelContent.js

@@ -0,0 +1,53 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelContent = void 0;
+var React = __importStar(require("react"));
+var PanelContent = /** @class */ (function (_super) {
+    __extends(PanelContent, _super);
+    function PanelContent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PanelContent.prototype.render = function () {
+        return (React.createElement("div", { className: "side-panel__content" }, this.props.children));
+    };
+    return PanelContent;
+}(React.PureComponent));
+exports.PanelContent = PanelContent;

package/react/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+    flex?: boolean;
+    padding?: '0' | '1-5' | '3';
+    className?: string;
+}
+export declare class PanelContentBlock extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.js

@@ -0,0 +1,63 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelContentBlock = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var PanelContentBlock = /** @class */ (function (_super) {
+    __extends(PanelContentBlock, _super);
+    function PanelContentBlock() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PanelContentBlock.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('side-panel__content-block', this.props.className, (_a = {
+                'side-panel__content-block--flex': this.props.flex
+            },
+            _a["side-panel__content-block--padding-".concat(this.props.padding)] = this.props.padding,
+            _a));
+        return (React.createElement("div", { className: classes }, this.props.children));
+    };
+    return PanelContentBlock;
+}(React.PureComponent));
+exports.PanelContentBlock = PanelContentBlock;

package/react/examples/pages/playgrounds/react-playgrounds/components/PanelFooter.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+export declare class PanelFooter extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/PanelFooter.js

@@ -0,0 +1,54 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelFooter = void 0;
+var React = __importStar(require("react"));
+var PanelFooter = /** @class */ (function (_super) {
+    __extends(PanelFooter, _super);
+    function PanelFooter() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PanelFooter.prototype.render = function () {
+        return (React.createElement("div", { className: "side-panel__footer side-panel__footer--button-box" },
+            React.createElement("div", { className: "flex-grid flex-grid--boxed-small flex-grid--wrap-items flex-grid--small-2" }, this.props.children)));
+    };
+    return PanelFooter;
+}(React.PureComponent));
+exports.PanelFooter = PanelFooter;

package/react/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+    title?: string;
+    handleFilterParent(): void;
+}
+export declare class PanelHeader extends React.PureComponent<IProps> {
+    constructor(props: IProps);
+    handleFilter(): void;
+    render(): JSX.Element;
+}
+export {};