blue-react 10.1.3 → 11.0.0

package/dist/components/Modal.js

@@ -7,6 +7,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useEffect, useState, useRef } from "react";
 import { Modal as BootstrapModal } from "bootstrap";
 import { getPhrase } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Simple modal/dialog. Designed to work as an alternative to JavaScript's native `alert()`, `prompt()` and `confirm()` functions.
  * It uses Bootstrap's Modal components.
@@ -83,55 +84,67 @@ export default function Modal(_ref) {
       myModal.addEventListener("shown.bs.modal", _focusFirstControl);
     }
   }, [modalContent]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "modal",
     ref: modalRef,
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "modal-dialog"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "modal-content"
-  }, /*#__PURE__*/React.createElement("form", {
-    onSubmit: submit
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "modal-header align-items-center"
-  }, modalIcon !== undefined && /*#__PURE__*/React.createElement("div", {
-    className: "me-2"
-  }, modalIcon), /*#__PURE__*/React.createElement("h5", {
-    className: "modal-title"
-  }, modalTitle || getPhrase("Message")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "btn-close",
-    onClick: cancel
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "modal-body",
-    style: {
-      whiteSpace: "pre-wrap"
-    }
-  }, modalContent, type === "ask" && /*#__PURE__*/React.createElement("input", {
-    type: inputType,
-    className: "form-control mt-1",
-    value: input,
-    onChange: function onChange(_ref2) {
-      var target = _ref2.target;
-      return setInput(target.value);
-    },
-    autoFocus: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "modal-footer"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "submit",
-    className: "btn ".concat(switchPrimaryBtn ? "btn-outline-primary" : "btn-primary", " d-block w-100"),
-    style: btnStyle
-  }, type === "verify" ? acceptBtnText ? acceptBtnText : getPhrase("Yes") : acceptBtnText ? acceptBtnText : "OK"), (type === "ask" || type === "verify") && (type === "verify" ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "btn ".concat(switchPrimaryBtn ? "btn-primary" : "btn-outline-primary", " d-block w-100"),
-    style: btnStyle,
-    onClick: sayNo
-  }, cancelBtnText ? cancelBtnText : getPhrase("No")) : /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "btn btn-outline-primary d-block w-100",
-    style: btnStyle,
-    onClick: cancel
-  }, cancelBtnText ? cancelBtnText : getPhrase("Cancel"))))))));
+    tabIndex: -1,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "modal-dialog",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "modal-content",
+        children: /*#__PURE__*/_jsxs("form", {
+          onSubmit: submit,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "modal-header align-items-center",
+            children: [modalIcon !== undefined && /*#__PURE__*/_jsx("div", {
+              className: "me-2",
+              children: modalIcon
+            }), /*#__PURE__*/_jsx("h5", {
+              className: "modal-title",
+              children: modalTitle || getPhrase("Message")
+            }), /*#__PURE__*/_jsx("button", {
+              type: "button",
+              className: "btn-close",
+              onClick: cancel
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "modal-body",
+            style: {
+              whiteSpace: "pre-wrap"
+            },
+            children: [modalContent, type === "ask" && /*#__PURE__*/_jsx("input", {
+              type: inputType,
+              className: "form-control mt-1",
+              value: input,
+              onChange: function onChange(_ref2) {
+                var target = _ref2.target;
+                return setInput(target.value);
+              },
+              autoFocus: true
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "modal-footer",
+            children: [/*#__PURE__*/_jsx("button", {
+              type: "submit",
+              className: "btn ".concat(switchPrimaryBtn ? "btn-outline-primary" : "btn-primary", " d-block w-100"),
+              style: btnStyle,
+              children: type === "verify" ? acceptBtnText ? acceptBtnText : getPhrase("Yes") : acceptBtnText ? acceptBtnText : "OK"
+            }), (type === "ask" || type === "verify") && (type === "verify" ? /*#__PURE__*/_jsx("button", {
+              type: "button",
+              className: "btn ".concat(switchPrimaryBtn ? "btn-primary" : "btn-outline-primary", " d-block w-100"),
+              style: btnStyle,
+              onClick: sayNo,
+              children: cancelBtnText ? cancelBtnText : getPhrase("No")
+            }) : /*#__PURE__*/_jsx("button", {
+              type: "button",
+              className: "btn btn-outline-primary d-block w-100",
+              style: btnStyle,
+              onClick: cancel,
+              children: cancelBtnText ? cancelBtnText : getPhrase("Cancel")
+            }))]
+          })]
+        })
+      })
+    })
+  });
 }

package/dist/components/ModalProvider.js

@@ -1,15 +1,21 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["children"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { createContext, useCallback, useContext, useState } from "react";
 import Modal from "./Modal.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var ModalContext = /*#__PURE__*/createContext({
   ask: undefined,
   tell: undefined,
@@ -35,32 +41,32 @@ var ModalProvider = function ModalProvider(_ref) {
     modalIcon = _useState8[0],
     setModalIcon = _useState8[1];
   var _useState9 = useState(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    defaultInput = _useState10[0],
-    setDefaultInput = _useState10[1];
-  var _useState11 = useState(),
+    _useState0 = _slicedToArray(_useState9, 2),
+    defaultInput = _useState0[0],
+    setDefaultInput = _useState0[1];
+  var _useState1 = useState(),
+    _useState10 = _slicedToArray(_useState1, 2),
+    inputType = _useState10[0],
+    setInputType = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    inputType = _useState12[0],
-    setInputType = _useState12[1];
-  var _useState13 = useState(false),
+    switchPrimaryBtn = _useState12[0],
+    setSwitchPrimaryBtn = _useState12[1];
+  var _useState13 = useState(),
     _useState14 = _slicedToArray(_useState13, 2),
-    switchPrimaryBtn = _useState14[0],
-    setSwitchPrimaryBtn = _useState14[1];
+    acceptBtnText = _useState14[0],
+    setAcceptBtnText = _useState14[1];
   var _useState15 = useState(),
     _useState16 = _slicedToArray(_useState15, 2),
-    acceptBtnText = _useState16[0],
-    setAcceptBtnText = _useState16[1];
-  var _useState17 = useState(),
-    _useState18 = _slicedToArray(_useState17, 2),
-    cancelBtnText = _useState18[0],
-    setCancelBtnText = _useState18[1];
+    cancelBtnText = _useState16[0],
+    setCancelBtnText = _useState16[1];
   var unSetModalContent = useCallback(function () {
     setModalContent(undefined);
   }, [setModalContent]);
-  var _useState19 = useState(),
-    _useState20 = _slicedToArray(_useState19, 2),
-    onSubmit = _useState20[0],
-    setOnSubmit = _useState20[1];
+  var _useState17 = useState(),
+    _useState18 = _slicedToArray(_useState17, 2),
+    onSubmit = _useState18[0],
+    setOnSubmit = _useState18[1];
   var ask = function ask(text, options) {
     return new Promise(function (resolve) {
       setType("ask");
@@ -137,24 +143,26 @@ var ModalProvider = function ModalProvider(_ref) {
       });
     });
   };
-  return /*#__PURE__*/React.createElement(ModalContext.Provider, _extends({
+  return /*#__PURE__*/_jsxs(ModalContext.Provider, _objectSpread(_objectSpread({
     value: {
       ask: ask,
       tell: tell,
       verify: verify
     }
-  }, rest), children, /*#__PURE__*/React.createElement(Modal, {
-    modalContent: modalContent,
-    modalTitle: modalTitle,
-    modalIcon: modalIcon,
-    unSetModalContent: unSetModalContent,
-    onSubmit: onSubmit,
-    defaultInput: defaultInput,
-    type: type,
-    inputType: inputType,
-    switchPrimaryBtn: switchPrimaryBtn,
-    acceptBtnText: acceptBtnText,
-    cancelBtnText: cancelBtnText
+  }, rest), {}, {
+    children: [children, /*#__PURE__*/_jsx(Modal, {
+      modalContent: modalContent,
+      modalTitle: modalTitle,
+      modalIcon: modalIcon,
+      unSetModalContent: unSetModalContent,
+      onSubmit: onSubmit,
+      defaultInput: defaultInput,
+      type: type,
+      inputType: inputType,
+      switchPrimaryBtn: switchPrimaryBtn,
+      acceptBtnText: acceptBtnText,
+      cancelBtnText: cancelBtnText
+    })]
   }));
 };
 var useModal = function useModal() {

package/dist/components/Outside.js

@@ -3,6 +3,7 @@ import React, { useEffect, useRef } from "react";
 /**
  * Hook that alerts clicks outside of the passed ref
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function useOutside(ref, callback) {
   useEffect(function () {
     /**
@@ -33,10 +34,11 @@ export default function Outside(_ref) {
     wrapperRef = _ref.wrapperRef;
   var ref = useRef(null);
   useOutside(wrapperRef || ref, onClickOutside);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     ref: wrapperRef || ref,
     className: className,
     style: style,
-    onClick: onClick
-  }, children);
+    onClick: onClick,
+    children: children
+  });
 }

package/dist/components/Search.js

@@ -7,6 +7,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useEffect, useState } from "react";
 import { guid } from "blue-web/dist/js/utils.js";
 import { getPhrase } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A search bar that can be placed to the sidebar or on a page.
  */
@@ -31,69 +32,77 @@ export default function Search(props) {
   useEffect(function () {
     if (props.value) setValue(props.value);
   }, [props.value]);
-  return /*#__PURE__*/React.createElement("form", {
+  return /*#__PURE__*/_jsx("form", {
     className: className,
     onSubmit: function onSubmit(event) {
       event.preventDefault();
       if (_onSubmit) _onSubmit(event);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "blue-input-group input-group"
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: SearchControlId,
-    className: "input-group-text"
-  }, icon || /*#__PURE__*/React.createElement("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 16 16",
-    className: "bi bi-search",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "visually-hidden"
-  }, getPhrase("Search"))), props.children || /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    type: reset ? "text" : "search",
-    value: value,
-    onChange: function onChange(event) {
-      setValue(event.target.value);
-      if (_onChange) _onChange(event);
     },
-    id: SearchControlId,
-    className: "form-control " + inputClassName,
-    placeholder: placeholder,
-    autoFocus: autoFocus
-  }), reset && value.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "input-group-btn"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "btn btn-link",
-    onClick: function onClick() {
-      var _document$getElementB;
-      setValue("");
-      (_document$getElementB = document.getElementById(SearchControlId)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
-      if (_onChange) _onChange({
-        target: {
-          value: ""
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      });
-    }
-  }, resetIcon || /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "currentColor",
-    className: "bi bi-x mt-n1",
-    viewBox: "0 0 16 16"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z"
-  }))))));
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "blue-input-group input-group",
+      children: [/*#__PURE__*/_jsxs("label", {
+        htmlFor: SearchControlId,
+        className: "input-group-text",
+        children: [icon || /*#__PURE__*/_jsxs("svg", {
+          width: "1em",
+          height: "1em",
+          viewBox: "0 0 16 16",
+          className: "bi bi-search",
+          fill: "currentColor",
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": true,
+          children: [/*#__PURE__*/_jsx("path", {
+            fillRule: "evenodd",
+            d: "M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
+          }), /*#__PURE__*/_jsx("path", {
+            fillRule: "evenodd",
+            d: "M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
+          })]
+        }), /*#__PURE__*/_jsx("span", {
+          className: "visually-hidden",
+          children: getPhrase("Search")
+        })]
+      }), props.children || /*#__PURE__*/_jsx("input", {
+        ref: inputRef,
+        type: reset ? "text" : "search",
+        value: value,
+        onChange: function onChange(event) {
+          setValue(event.target.value);
+          if (_onChange) _onChange(event);
+        },
+        id: SearchControlId,
+        className: "form-control " + inputClassName,
+        placeholder: placeholder,
+        autoFocus: autoFocus
+      }), reset && value.length > 0 && /*#__PURE__*/_jsx("div", {
+        className: "input-group-btn",
+        children: /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: "btn btn-link",
+          onClick: function onClick() {
+            var _document$getElementB;
+            setValue("");
+            (_document$getElementB = document.getElementById(SearchControlId)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
+            if (_onChange) _onChange({
+              target: {
+                value: ""
+              }
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            });
+          },
+          children: resetIcon || /*#__PURE__*/_jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "1em",
+            height: "1em",
+            fill: "currentColor",
+            className: "bi bi-x mt-n1",
+            viewBox: "0 0 16 16",
+            children: /*#__PURE__*/_jsx("path", {
+              d: "M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z"
+            })
+          })
+        })
+      })]
+    })
+  });
 }

package/dist/components/SidebarMenu.js

@@ -1,13 +1,16 @@
 import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Sidebar for the `Layout` component.
  */
 export default function SidebarMenu(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "d-flex flex-column h-100 " + (props.sidebarClass || ""),
-    style: props.sidebarStyle
-  }, props.topContent, /*#__PURE__*/React.createElement("div", {
-    className: "flex-grow-1 overflow-auto " + (props.menuClass || ""),
-    style: props.menuStyle ? props.menuStyle : {}
-  }, props.children), props.bottomContent);
+    style: props.sidebarStyle,
+    children: [props.topContent, /*#__PURE__*/_jsx("div", {
+      className: "flex-grow-1 overflow-auto " + (props.menuClass || ""),
+      style: props.menuStyle ? props.menuStyle : {},
+      children: props.children
+    }), props.bottomContent]
+  });
 }

package/dist/components/SimpleLayout.d.ts

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 export interface SimpleLayoutProps {
     children?: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
     header?: React.ReactNode;
     noPageBorder?: boolean;
 }
 /**
  * A simple layout with header and main content area.
  */
-export default function SimpleLayout({ children, header, noPageBorder }: SimpleLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default function SimpleLayout({ children, className, style, header, noPageBorder }: SimpleLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SimpleLayout.js

@@ -1,23 +1,30 @@
 import React from "react";
-import LayoutHeader from "./Layout/LayoutHeader.js";
-import LayoutMain from "./Layout/LayoutMain.js";
+import clsx from "clsx";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A simple layout with header and main content area.
  */
 export default function SimpleLayout(_ref) {
   var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
     header = _ref.header,
     _ref$noPageBorder = _ref.noPageBorder,
     noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "vh-100 d-grid",
-    style: {
-      gridTemplateRows: "var(--blue-menu-item-height) auto"
-    }
-  }, /*#__PURE__*/React.createElement(LayoutHeader, {
-    slot: "header"
-  }, header), /*#__PURE__*/React.createElement(LayoutMain, {
-    noPageBorder: noPageBorder,
-    className: "overflow-hidden"
-  }, children));
+  return /*#__PURE__*/_jsxs("div", {
+    className: clsx("blue-layout", className),
+    style: style,
+    children: [/*#__PURE__*/_jsx("header", {
+      className: "blue-layout-header",
+      children: header
+    }), /*#__PURE__*/_jsx("main", {
+      className: "blue-layout-main",
+      children: /*#__PURE__*/_jsx("div", {
+        className: clsx("blue-layout-body", {
+          "border-0": noPageBorder
+        }),
+        children: children
+      })
+    })]
+  });
 }

package/dist/components/SlimContainer.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Shortcut for a combination using Bootstrap's Grid System to create a slim responsive container.
  */
@@ -6,9 +7,11 @@ export default function SlimContainer(_ref) {
   var children = _ref.children,
     className = _ref.className,
     innerClassName = _ref.innerClassName;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "row " + (className || "")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-md-6 col-lg-4 " + (innerClassName || "")
-  }, children));
+  return /*#__PURE__*/_jsx("div", {
+    className: "row " + (className || ""),
+    children: /*#__PURE__*/_jsx("div", {
+      className: "col-md-6 col-lg-4 " + (innerClassName || ""),
+      children: children
+    })
+  });
 }

package/dist/components/Status.js

@@ -1,5 +1,6 @@
 import React from "react";
 import clsx from "clsx";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function Status(_ref) {
   var alert = _ref.alert,
     onUnsetAlert = _ref.onUnsetAlert,
@@ -13,44 +14,59 @@ export default function Status(_ref) {
     dangerIcon = _ref$dangerIcon === void 0 ? "❌" : _ref$dangerIcon,
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? null : _ref$status;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: clsx("blue-status-circle blue-loading blue-status-loading", {
-      "d-block": status === "loading" || alert && alert.status === "loading"
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "spinner-bounce-circle"
-  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null))), /*#__PURE__*/React.createElement("div", {
-    className: clsx("blue-status-circle blue-status-success", {
-      "d-flex": status === "success" || alert && alert.status === "success"
-    })
-  }, successIcon), /*#__PURE__*/React.createElement("div", {
-    className: clsx("blue-status-circle blue-status-info", {
-      "d-flex": status === "info" || alert && alert.status === "info"
-    })
-  }, infoIcon), /*#__PURE__*/React.createElement("div", {
-    className: clsx("blue-status-circle blue-status-warning", {
-      "d-flex": status === "warning" || alert && alert.status === "warning"
-    })
-  }, warningIcon), /*#__PURE__*/React.createElement("div", {
-    className: clsx("blue-status-circle blue-status-danger", {
-      "d-flex": status === "danger" || alert && alert.status === "danger"
-    })
-  }, dangerIcon), /*#__PURE__*/React.createElement("div", {
-    className: "blue-status-alert alert"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "btn-close float-end mb-1",
-    "aria-label": "Close"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "alert-body"
-  })), alert && /*#__PURE__*/React.createElement("div", {
-    className: clsx("blue-status-alert alert d-block", alert.alertClassName, alert.status && "alert-".concat(alert.status))
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "btn-close float-end mb-1 d-inline-block",
-    "aria-label": "Close",
-    onClick: onUnsetAlert
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "alert-body"
-  }, alert.title && /*#__PURE__*/React.createElement("h2", null, alert.title), alert.detailText && /*#__PURE__*/React.createElement("span", null, alert.detailText))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: clsx("blue-status-circle blue-loading blue-status-loading", {
+        "d-block": status === "loading" || alert && alert.status === "loading"
+      }),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "spinner-bounce-circle",
+        children: [/*#__PURE__*/_jsx("div", {}), /*#__PURE__*/_jsx("div", {})]
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: clsx("blue-status-circle blue-status-success", {
+        "d-flex": status === "success" || alert && alert.status === "success"
+      }),
+      children: successIcon
+    }), /*#__PURE__*/_jsx("div", {
+      className: clsx("blue-status-circle blue-status-info", {
+        "d-flex": status === "info" || alert && alert.status === "info"
+      }),
+      children: infoIcon
+    }), /*#__PURE__*/_jsx("div", {
+      className: clsx("blue-status-circle blue-status-warning", {
+        "d-flex": status === "warning" || alert && alert.status === "warning"
+      }),
+      children: warningIcon
+    }), /*#__PURE__*/_jsx("div", {
+      className: clsx("blue-status-circle blue-status-danger", {
+        "d-flex": status === "danger" || alert && alert.status === "danger"
+      }),
+      children: dangerIcon
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "blue-status-alert alert",
+      children: [/*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "btn-close float-end mb-1",
+        "aria-label": "Close"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "alert-body"
+      })]
+    }), alert && /*#__PURE__*/_jsxs("div", {
+      className: clsx("blue-status-alert alert d-block", alert.alertClassName, alert.status && "alert-".concat(alert.status)),
+      children: [/*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "btn-close float-end mb-1 d-inline-block",
+        "aria-label": "Close",
+        onClick: onUnsetAlert
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "alert-body",
+        children: [alert.title && /*#__PURE__*/_jsx("h2", {
+          children: alert.title
+        }), alert.detailText && /*#__PURE__*/_jsx("span", {
+          children: alert.detailText
+        })]
+      })]
+    })]
+  });
 }