@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

package/components/input/textarea/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/components/input/upload/index.js

@@ -1,133 +1,137 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmUpload = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _link = _interopRequireDefault(require("next/link"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _withFormController = _interopRequireDefault(require("../../data/form/form-controller/withFormController"));
-var _image = _interopRequireDefault(require("next/image"));
-var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-var WmUpload = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var name = props.name,
-    formField = props.formField,
-    datavalue = props.datavalue,
-    _props$readonly = props.readonly,
-    readonly = _props$readonly === void 0 ? false : _props$readonly,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    type = props.type,
-    onChange = props.onChange,
-    className = props.className,
-    styles = props.styles,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    listener = props.listener;
-  var fileInputRef = (0, _react.useRef)(null);
-  var prevDatavalue = (0, _react.useRef)(datavalue);
-
-  // Check if we have existing file data
-  var isImage = (formField === null || formField === void 0 ? void 0 : formField.filetype) === "image";
-  var handleFileChange = function handleFileChange(event) {
-    var _event$target$files;
-    var file = ((_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0]) || null;
-
-    // For blob type, we need to call listener.onChange to update the form data
-    // The form controller will handle the actual value from the event.target.value
-    if (type === "file") {
-      var _listener$onChange;
-      listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || props.name, {
-        datavalue: file
-      });
-    } else {
-      var _listener$onChange2;
-      // For blob type, pass the file name/path from the input value
-      listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || props.name, {
-        datavalue: event.target.value
-      });
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    if (onChange) {
-      onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], type === "file" ? file : event.target.value, prevDatavalue.current);
-    }
-    prevDatavalue.current = file;
-  };
-  var handleFileFocus = function handleFileFocus(event) {
-    if (onFocus) {
-      onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    }
-  };
-  var handleFileBlur = function handleFileBlur(event) {
-    if (onBlur) {
-      onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    }
-  };
-
-  // Render existing file display
-  var renderExistingFile = (0, _react.useCallback)(function () {
-    var fileUrl = (formField === null || formField === void 0 ? void 0 : formField.href) || (formField === null || formField === void 0 ? void 0 : formField.datavalue);
-    if (!fileUrl || type !== "file") return null;
-    return __jsx("div", {
-      className: "existing-file-display"
-    }, isImage ? __jsx(_link["default"], {
-      className: "form-control-static",
-      href: fileUrl
-    }, __jsx(_image["default"], {
-      className: "wi wi-file wm-upload-existing-image",
-      src: fileUrl,
-      alt: "Existing file"
-    })) : __jsx(_link["default"], {
-      className: "form-control-static",
-      href: fileUrl
-    }, __jsx("i", {
-      className: "wi wi-file"
-    })));
-  }, [formField === null || formField === void 0 ? void 0 : formField.href, formField === null || formField === void 0 ? void 0 : formField.datavalue, isImage, type]);
-  (0, _react.useEffect)(function () {
-    if (!datavalue) {
-      // clear field input value
-      fileInputRef.current && (fileInputRef.current.value = "");
-    }
-  }, [datavalue]);
-  return __jsx("div", {
-    className: className,
-    style: styles
-  }, renderExistingFile(), __jsx("input", (0, _extends2["default"])({}, (0, _attr.removeInvalidAttributes)(props), {
-    hidden: props.hidden,
-    ref: fileInputRef,
-    type: "file",
-    name: "".concat(name, "_formWidget"),
-    className: "app-blob-upload",
-    required: required,
-    readOnly: readonly,
-    disabled: disabled,
-    onChange: handleFileChange,
-    onFocus: handleFileFocus,
-    onBlur: handleFileBlur
-  })));
-}, function (prev, current) {
-  var keys = ["name", "formField", "datavalue", "readonly", "required", "type", "onChange", "className", "styles"];
-  return keys.every(function (key) {
-    return prev[key] === current[key];
-  });
-});
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useCallback, memo, useEffect } from "react";
+import Link from "next/link";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import withFormController from "../../data/form/form-controller/withFormController";
+import Image from "next/image";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const WmUpload = memo(
+  (props) => {
+    const {
+      name,
+      formField,
+      datavalue,
+      readonly = false,
+      required = false,
+      type,
+      onChange,
+      className,
+      styles,
+      onFocus,
+      onBlur,
+      disabled = false,
+      listener
+    } = props;
+    const fileInputRef = useRef(null);
+    const prevDatavalue = useRef(datavalue);
+    const isImage = (formField == null ? void 0 : formField.filetype) === "image";
+    const handleFileChange = (event) => {
+      var _a, _b, _c;
+      const file = ((_a = event.target.files) == null ? void 0 : _a[0]) || null;
+      if (type === "file") {
+        (_b = listener == null ? void 0 : listener.onChange) == null ? void 0 : _b.call(listener, props.fieldName || props.name, {
+          datavalue: file
+        });
+      } else {
+        (_c = listener == null ? void 0 : listener.onChange) == null ? void 0 : _c.call(listener, props.fieldName || props.name, {
+          datavalue: event.target.value
+        });
+      }
+      if (onChange) {
+        onChange(
+          event,
+          listener == null ? void 0 : listener.Widgets[name],
+          type === "file" ? file : event.target.value,
+          prevDatavalue.current
+        );
+      }
+      prevDatavalue.current = file;
+    };
+    const handleFileFocus = (event) => {
+      if (onFocus) {
+        onFocus(event, listener == null ? void 0 : listener.Widgets[name]);
+      }
+    };
+    const handleFileBlur = (event) => {
+      if (onBlur) {
+        onBlur(event, listener == null ? void 0 : listener.Widgets[name]);
+      }
+    };
+    const renderExistingFile = useCallback(() => {
+      const fileUrl = (formField == null ? void 0 : formField.href) || (formField == null ? void 0 : formField.datavalue);
+      if (!fileUrl || type !== "file") return null;
+      return /* @__PURE__ */ jsx("div", { className: "existing-file-display", children: isImage ? /* @__PURE__ */ jsx(Link, { className: "form-control-static", href: fileUrl, children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "wi wi-file wm-upload-existing-image",
+          src: fileUrl,
+          alt: "Existing file"
+        }
+      ) }) : /* @__PURE__ */ jsx(Link, { className: "form-control-static", href: fileUrl, children: /* @__PURE__ */ jsx("i", { className: "wi wi-file" }) }) });
+    }, [formField == null ? void 0 : formField.href, formField == null ? void 0 : formField.datavalue, isImage, type]);
+    useEffect(() => {
+      if (!datavalue) {
+        fileInputRef.current && (fileInputRef.current.value = "");
+      }
+    }, [datavalue]);
+    return /* @__PURE__ */ jsxs("div", { className, style: styles, children: [
+      renderExistingFile(),
+      /* @__PURE__ */ jsx(
+        "input",
+        __spreadProps(__spreadValues({}, removeInvalidAttributes(props)), {
+          hidden: props.hidden,
+          ref: fileInputRef,
+          type: "file",
+          name: `${name}_formWidget`,
+          className: "app-blob-upload",
+          required,
+          readOnly: readonly,
+          disabled,
+          onChange: handleFileChange,
+          onFocus: handleFileFocus,
+          onBlur: handleFileBlur
+        })
+      )
+    ] });
+  },
+  (prev, current) => {
+    const keys = [
+      "name",
+      "formField",
+      "datavalue",
+      "readonly",
+      "required",
+      "type",
+      "onChange",
+      "className",
+      "styles"
+    ];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
 WmUpload.displayName = "WmUpload";
-var WithForm = exports.WmUpload = (0, _withFormController["default"])(WmUpload);
-/**
- * The WmUpload component provides a file upload input for form fields with blob support.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-fileupload--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-fileupload--docs)
- *
- * @param props - {@link WmUploadProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);
+const WithForm = withFormController(WmUpload);
+var upload_default = withBaseWrapper(WithForm);
+export {
+  WithForm as WmUpload,
+  upload_default as default
+};

package/components/input/upload/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/components/input/util/index.js

@@ -1,11 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sanitizeInputValue = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var sanitizeInputValue = exports.sanitizeInputValue = function sanitizeInputValue(value) {
-  return value === null || value === undefined ? "" : (0, _typeof2["default"])(value) === "object" || Array.isArray(value) ? "" : String(value) === "[object Object]" || String(value).startsWith("[object ") ? "" : String(value);
-};
+const sanitizeInputValue = (value) => {
+  if (Array.isArray(value)) {
+    return value.map((item) => sanitizeInputValue(item)).join(", ");
+  }
+  return value === null || value === void 0 ? "" : typeof value === "object" || Array.isArray(value) ? "" : String(value) === "[object Object]" || String(value).startsWith("[object ") ? "" : String(value);
+};
+export {
+  sanitizeInputValue
+};

package/components/layout/footer/index.js

@@ -1,37 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmFooter = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _material = require("@mui/material");
-var __jsx = _react["default"].createElement;
-var DEFAULT_CLASS = "app-footer clearfix";
-var WmFooter = exports.WmFooter = function WmFooter(props) {
-  var styles = props.styles,
-    children = props.children,
-    render = props.render,
-    className = props.className,
-    id = props.id;
-  return __jsx(_material.Box, {
-    component: "div",
-    sx: styles,
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
-    id: id
-  }, render ? render(props) : children);
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Box } from "@mui/material";
+const DEFAULT_CLASS = "app-footer clearfix";
+const WmFooter = (props) => {
+  const { styles, children, render, className, id } = props;
+  return /* @__PURE__ */ jsx(Box, { component: "div", sx: styles, className: clsx(DEFAULT_CLASS, className), id, children: render ? render(props) : children });
 };
 WmFooter.displayName = "WmFooter";
-
-/**
- * The WmFooter component is used to create a footer area for the application.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-footer--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-footer--docs)
- *
- * @param props - {@link WmFooterProps}
- */
-var _default = exports["default"] = WmFooter;
+var footer_default = WmFooter;
+export {
+  WmFooter,
+  footer_default as default
+};

package/components/layout/footer/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/components/layout/header/index.js

@@ -1,40 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmHeader = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var __jsx = _react["default"].createElement;
-var DEFAULT_CLASS = "app-header clearfix app-header-shrink";
-var WmHeader = exports.WmHeader = function WmHeader(props) {
-  var styles = props.styles,
-    children = props.children,
-    render = props.render,
-    className = props.className,
-    id = props.id;
-  return __jsx(_Box["default"], {
-    component: "header",
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
-    id: id,
-    sx: styles
-  }, __jsx(_Box["default"], {
-    component: "div",
-    className: "app-header-container"
-  }, render ? render(props) : children));
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+const DEFAULT_CLASS = "app-header clearfix app-header-shrink";
+const WmHeader = (props) => {
+  const { styles, children, render, className, id } = props;
+  return /* @__PURE__ */ jsx(Box, { component: "header", className: clsx(DEFAULT_CLASS, className), id, sx: styles, children: /* @__PURE__ */ jsx(Box, { component: "div", className: "app-header-container", children: render ? render(props) : children }) });
 };
 WmHeader.displayName = "WmHeader";
-
-/**
- * The WmHeader component is used to create a header area for the application.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-header--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-header--docs)
- *
- * @param props - {@link WmHeaderProps}
- */
-var _default = exports["default"] = WmHeader;
+var header_default = WmHeader;
+export {
+  WmHeader,
+  header_default as default
+};

package/components/layout/header/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/components/layout/leftnav/index.js

@@ -1,54 +1,67 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmLeftPanel = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-var DEFAULT_CLASS = "app-nav-drawer app-left-panel left-panel-collapsed ";
-var WmLeftPanel = exports.WmLeftPanel = function WmLeftPanel(props) {
-  var styles = props.styles,
-    children = props.children,
-    render = props.render,
-    className = props.className,
-    _props$columnwidth = props.columnwidth,
-    columnwidth = _props$columnwidth === void 0 ? 2 : _props$columnwidth,
-    id = props.id,
-    navtype = props.navtype,
-    navheight = props.navheight,
-    onNavHeightChange = props.onNavHeightChange;
-  (0, _react.useEffect)(function () {
+import { jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { PageLayoutContext } from "../../page/page-context";
+import { getLeftPanelPageClasses } from "./utils/page-class-util";
+const DEFAULT_CLASS = "app-nav-drawer app-left-panel left-panel-collapsed ";
+const SLIDE_IN = "slide-in";
+const WmLeftPanel = (props) => {
+  const { onLeftPanelPageClassesChange } = useContext(PageLayoutContext);
+  const {
+    styles,
+    children,
+    render,
+    className,
+    columnwidth = 2,
+    xscolumnwidth = 10,
+    id,
+    navtype,
+    navheight,
+    animation = SLIDE_IN,
+    onNavHeightChange
+  } = props;
+  useEffect(() => {
     if (onNavHeightChange) {
       onNavHeightChange(navheight === "full");
     }
-    return function () {
+    return () => {
       if (onNavHeightChange) {
         onNavHeightChange(false);
       }
     };
   }, [navheight, onNavHeightChange]);
-  return __jsx(_Box["default"], {
-    id: id,
-    component: "div",
-    sx: styles,
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth, " ").concat(navtype ? "app-nav-".concat(navtype) : "", " ").concat(navheight ? "app-nav-".concat(navheight) : ""))
-  }, render ? render(props) : children);
+  useEffect(() => {
+    onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(
+      getLeftPanelPageClasses({
+        animation,
+        columnwidth,
+        xscolumnwidth
+      })
+    );
+    return () => {
+      onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(void 0);
+    };
+  }, [animation, columnwidth, xscolumnwidth]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      id,
+      component: "div",
+      sx: styles,
+      className: clsx(
+        DEFAULT_CLASS,
+        className,
+        animation,
+        `col-md-${columnwidth} col-sm-${columnwidth} col-xs-${xscolumnwidth} ${navtype ? `app-nav-${navtype}` : ""} ${navheight ? `app-nav-${navheight}` : ""}`
+      ),
+      children: render ? render(props) : children
+    }
+  );
 };
 WmLeftPanel.displayName = "WmLeftPanel";
-
-/**
- * The WmLeftPanel component is used to create a left navigation panel.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-leftnav--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-leftnav--docs)
- *
- * @param props - {@link WmLeftNavProps}
- */
-var _default = exports["default"] = WmLeftPanel;
+var leftnav_default = WmLeftPanel;
+export {
+  WmLeftPanel,
+  leftnav_default as default
+};

package/components/layout/leftnav/props.d.ts

@@ -1,9 +1,18 @@
 export interface LeftNavProps {
+    /**
+     * The animation mode used by the left panel.
+     */
+    animation?: string;
     /**
      * The number of columns the left panel should span.
      * @default 2
      */
     columnwidth?: number | string;
+    /**
+     * The number of columns the left panel should span on extra-small screens.
+     * @default 10
+     */
+    xscolumnwidth?: number | string;
     /**
      * The height of the navigation panel.
      */

package/components/layout/leftnav/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/components/layout/leftnav/utils/page-class-util.d.ts

@@ -0,0 +1,9 @@
+export type LeftPanelPageLayout = {
+    animation?: string;
+    columnwidth?: number | string;
+    xscolumnwidth?: number | string;
+};
+/**
+ * (slide-in-left-panel-container, left-panel-container-*-*, etc.).
+ */
+export declare const getLeftPanelPageClasses: (layout: LeftPanelPageLayout) => string;

package/components/layout/leftnav/utils/page-class-util.js

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+const SLIDE_IN = "slide-in";
+const SLIDE_OVER = "slide-over";
+const getPageWidthClass = (device, panelWidth) => {
+  const width = Number(panelWidth);
+  if (!Number.isFinite(width)) {
+    return "";
+  }
+  return `left-panel-container-${device}-${12 - width}`;
+};
+const getLeftPanelPageClasses = (layout) => {
+  if (layout.animation === SLIDE_IN) {
+    return clsx(
+      "left-panel-collapsed-container",
+      "slide-in-left-panel-container",
+      getPageWidthClass("md", layout.columnwidth),
+      getPageWidthClass("sm", layout.columnwidth),
+      getPageWidthClass("xs", layout.xscolumnwidth)
+    );
+  }
+  if (layout.animation === SLIDE_OVER) {
+    return clsx("left-panel-collapsed-container", "slide-over-left-panel-container");
+  }
+  return "left-panel-collapsed-container";
+};
+export {
+  getLeftPanelPageClasses
+};