blue-react 10.1.3 → 11.0.0

package/README.md

@@ -9,90 +9,47 @@
 [Checkout the docs](https://bruegmann.github.io/blue-react) to find out how to
 use Blue React.
 
-## Breaking changes between v9 and v10
-
-### Exported JS files are now ES modules
-
-Previously JS files were in type CommonJS, now they are in ESM. For projects with Webpack or CRA, take a look at this: https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes
-
-#### Enable ESM in Webpack
-
-Add this to the `webpack.config.js` inside the `module.rules`:
-
-```js
-{
-    test: /\.m?js/,
-    resolve: {
-        fullySpecified: false
-    }
-}
-```
-
-#### Enable ESM in CRA (react-scripts)
-
-1. Install craco: `npm i -D @craco/craco`
-2. Update the scripts inside `package.json`:
-
-```json
-"scripts": {
-        "start": "craco start",
-        "build": "craco build",
-        "test": "craco test",
-```
-
-3. Add a file called `craco.config.js` with this content:
-
-```js
-module.exports = {
-    webpack: {
-        configure: {
-            module: {
-                rules: [
-                    {
-                        test: /\.m?js$/,
-                        resolve: {
-                            fullySpecified: false
-                        }
-                    }
-                ]
-            }
-        }
-    }
-}
-```
-
-### Removed hash router from Layout
-
-The new `Layout` no longer has a hash router. So there is no `pages` prop anymore. The router moved to its own component `HashRouter` for legacy reasons. But it's recommended to use other solutions like [React Router](https://reactrouter.com/) or [TanStack Router](https://tanstack.com/router/latest).
-
-### Move side content to `side` prop
-
-It should look like this:
-
-```tsx
-<Layout
-    side={
-        <SidebarMenu>
-            <MenuItem href="." label="Home" />
-        </SidebarMenu>
-    }
->
-    Your page content
-</Layout>
-```
-
-### Removed HTML elements for status
-
-If you use util functions for status like `showSuccess()` or `setAlertMessage()` you need to embed the `Status` React component like this:
-
-```tsx
-<Status
-    dangerIcon={<XCircleFill />}
-    infoIcon={<InfoCircleFill />}
-    successIcon={<CheckCircleFill />}
-    warningIcon={<ExclamationCircleFill />}
-/>
-```
+## Breaking changes between v10 and v11
+
+### Fundamental changes in `MenuItem`
+
+-   Removed props
+    -   onClickAttached
+    -   iconClassName
+    -   labelClassName
+    -   caretClassName
+    -   caretStyle
+    -   isHome
+    -   dropdownClassName
+    -   dropdownStyle
+    -   showDropdown
+    -   onShowDropdown
+    -   supportOutside
+    -   outsideIgnoreClasses
+-   Renamed
+    -   iconForActive -> iconForCurrent
+    -   isActive -> current
+    -   highlighted -> active
+-   Changed behviour. Menu item no longer has built in styling if `draggable`. But since Menu item extends HTML Button or A element, props `draggable`, `onDragStart` etc. should still work.
+-   Added
+    -   sm
+    -   lg
+    -   iconBefore
+    -   iconAfter
+    -   labelHidden
+    -   busy
+    -   success
+    -   defaultDisplay
+    -   buttonContent
+    -   as
+
+The previous Menu Item with the older API is still available as `LegacyMenuItem`, but will be removed in a future release. Because of styling changes in Blue Web, it might not behave the same.
+
+### Removed deprecated components
+
+-   Body
+-   Page
+-   SidebarToggler
 
 ## Developing
 

package/dist/components/A.js

@@ -1,8 +1,14 @@
+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", "rel"];
-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 _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 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 _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 from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The `<a>` element automatically sets `rel="noreferrer"` for external links with `target="_blank"`.\
  * `A` allows all props of the `<a>` element.\
@@ -12,7 +18,8 @@ export default function A(_ref) {
   var children = _ref.children,
     rel = _ref.rel,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("a", _extends({}, rest, {
-    rel: "".concat(rel ? "".concat(rel, " ") : "").concat(rest.target === "_blank" ? "noreferrer" : "")
-  }), children);
+  return /*#__PURE__*/_jsx("a", _objectSpread(_objectSpread({}, rest), {}, {
+    rel: "".concat(rel ? "".concat(rel, " ") : "").concat(rest.target === "_blank" ? "noreferrer" : ""),
+    children: children
+  }));
 }

package/dist/components/ActionMenu.d.ts

@@ -20,6 +20,7 @@ export interface ActionMenuProps {
     break?: breakOption | "none";
 }
 /**
+ * @deprecated Use the new `Actions` instead, which is more flexible.
  * The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.
  */
 export default function ActionMenu(props: ActionMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionMenu.js

@@ -5,12 +5,14 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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; }
 import React, { Children, createContext, useState } from "react";
-import MenuItem from "./MenuItem.js";
+import MenuItem from "./LegacyMenuItem.js";
 import Outside from "./Outside.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var ActionMenuContext = /*#__PURE__*/createContext({
   breakOption: "lg"
 });
 /**
+ * @deprecated Use the new `Actions` instead, which is more flexible.
  * The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.
  */
 export default function ActionMenu(props) {
@@ -18,16 +20,17 @@ export default function ActionMenu(props) {
     children = props.children,
     className = props.className,
     _props$toggleIcon = props.toggleIcon,
-    toggleIcon = _props$toggleIcon === void 0 ? /*#__PURE__*/React.createElement("svg", {
+    toggleIcon = _props$toggleIcon === void 0 ? /*#__PURE__*/_jsx("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       width: "16",
       height: "16",
       fill: "currentColor",
       className: "bi bi-three-dots-vertical",
-      viewBox: "0 0 16 16"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M9.5 13a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0-5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0-5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
-    })) : _props$toggleIcon;
+      viewBox: "0 0 16 16",
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M9.5 13a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0-5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0-5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
+      })
+    }) : _props$toggleIcon;
   var _break = props["break"] || "lg";
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -37,23 +40,26 @@ export default function ActionMenu(props) {
     return setActionsToggledIn(!actionsToggledIn);
   };
   var validChildren = Children.toArray(children).filter(Boolean);
-  return /*#__PURE__*/React.createElement(ActionMenuContext.Provider, {
+  return /*#__PURE__*/_jsx(ActionMenuContext.Provider, {
     value: {
       breakOption: _break
-    }
-  }, /*#__PURE__*/React.createElement(Outside, {
-    className: "blue-actions ".concat(_break, " ").concat(actionsToggledIn ? "open" : "", " ").concat(className),
-    onClickOutside: function onClickOutside() {
-      setActionsToggledIn(false);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "blue-actions-menu d-flex"
-  }, validChildren.length > 0 && !actionsToggledIn && !hideToggleAction && /*#__PURE__*/React.createElement(MenuItem, {
-    className: "blue-actions-menu-toggle w-100",
-    onClick: function onClick() {
-      return toggleActions();
     },
-    icon: toggleIcon,
-    "aria-label": "Toggle menu"
-  }), children)));
+    children: /*#__PURE__*/_jsx(Outside, {
+      className: "blue-actions ".concat(_break, " ").concat(actionsToggledIn ? "open" : "", " ").concat(className),
+      onClickOutside: function onClickOutside() {
+        setActionsToggledIn(false);
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "blue-actions-menu d-flex",
+        children: [validChildren.length > 0 && !actionsToggledIn && !hideToggleAction && /*#__PURE__*/_jsx(MenuItem, {
+          className: "blue-actions-menu-toggle w-100",
+          onClick: function onClick() {
+            return toggleActions();
+          },
+          icon: toggleIcon,
+          "aria-label": "Toggle menu"
+        }), children]
+      })
+    })
+  });
 }

package/dist/components/Actions.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from "react";
+export interface ActionsProps {
+    children?: ReactNode;
+    className?: string;
+    menuClassName?: string;
+    collapseClassName?: string;
+    collapseStyle?: CSSProperties;
+    collapseMenuClassName?: string;
+    collapseMenuStyle?: CSSProperties;
+}
+/**
+ * Combination of toolbar and a dropdown menu. Items in toolbar will only be shown if there is enough space.
+ * Otherwise they will be visible in the dropdown menu. JavaScript detects if space is changing and rearranges.
+ * IMPORTANT: As of right now, children you pass will be rendered twice. Once in the toolbar and once in the dropdown.
+ */
+export default function Actions({ children, className, menuClassName, collapseClassName, collapseStyle, collapseMenuClassName, collapseMenuStyle }: ActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Actions.js

@@ -0,0 +1,68 @@
+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); }
+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); }
+import React, { useEffect, useId, useRef } from "react";
+import { getPhrase } from "./shared.js";
+import clsx from "clsx";
+import { init } from "blue-web/dist/js/actions.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Combination of toolbar and a dropdown menu. Items in toolbar will only be shown if there is enough space.
+ * Otherwise they will be visible in the dropdown menu. JavaScript detects if space is changing and rearranges.
+ * IMPORTANT: As of right now, children you pass will be rendered twice. Once in the toolbar and once in the dropdown.
+ */
+export default function Actions(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    menuClassName = _ref.menuClassName,
+    collapseClassName = _ref.collapseClassName,
+    collapseStyle = _ref.collapseStyle,
+    collapseMenuClassName = _ref.collapseMenuClassName,
+    collapseMenuStyle = _ref.collapseMenuStyle;
+  var element = useRef(null);
+  var id = "Actions_Dropdown_".concat(useId().replace(/:/g, "-"));
+  useEffect(function () {
+    if (element.current) {
+      var _init = init(element.current),
+        destroy = _init.destroy;
+      return function () {
+        destroy();
+      };
+    }
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: element,
+    className: clsx("BLUE-actions", className),
+    role: "toolbar",
+    "aria-label": getPhrase("Toolbar with buttons and button groups"),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: clsx("BLUE-actions-menu", menuClassName),
+      children: children
+    }), /*#__PURE__*/_jsxs("div", {
+      className: clsx("BLUE-actions-collapse", collapseClassName),
+      style: collapseStyle,
+      children: [/*#__PURE__*/_jsxs("button", {
+        type: "button",
+        popoverTarget: id,
+        className: "blue-anchor blue-menu-item btn px-3",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "blue-menu-item-icon",
+          "aria-hidden": true,
+          children: "\u22EE"
+        }), /*#__PURE__*/_jsx("span", {
+          className: "visually-hidden",
+          children: getPhrase("Toggle menu")
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        id: id,
+        popover: "",
+        className: clsx("BLUE-actions-collapse-menu blue-anchored blue-anchored-end blue-anchored-fallback", "blue-menu-item-dropdown text-body", collapseMenuClassName),
+        style: _objectSpread(_defineProperty({}, "--blue-menu-item-dropdown-bg", "var(--bs-body-bg)"), collapseMenuStyle),
+        children: children
+      })]
+    })]
+  });
+}

package/dist/components/Button.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps, ReactNode, ElementType } from "react";
+export type ButtonVariant = "filled" | "soft" | "plain" | "outline" | "link" | "menu-item";
+export type ButtonColor = "theme" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+export type ButtonProps = ComponentProps<"a"> & ComponentProps<"button"> & {
+    elementType?: ElementType;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    sm?: boolean;
+    lg?: boolean;
+    iconBefore?: ReactNode;
+    iconAfter?: ReactNode;
+    label?: string;
+    labelHidden?: boolean;
+    busy?: boolean;
+    success?: boolean;
+    active?: boolean;
+} & {
+    /**
+     * For compatibility with React Router NavLink
+     */
+    to?: string;
+    /**
+     * For compatibility with React Router NavLink
+     */
+    exact?: boolean;
+    /**
+     * For compatibility with React Router NavLink
+     */
+    activeClassName?: string;
+};
+export default function Button({ elementType, className, type, variant, color, sm, lg, iconBefore, iconAfter, label, labelHidden, busy: busyProp, success: successProp, active, activeClassName, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button.js

@@ -0,0 +1,119 @@
+var _excluded = ["elementType", "className", "type", "variant", "color", "sm", "lg", "iconBefore", "iconAfter", "label", "labelHidden", "busy", "success", "active", "activeClassName"];
+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 _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); }
+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 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 { useEffect, useState } from "react";
+import clsx from "clsx";
+import { getPhrase } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function getButtonVariantClass(variant, color) {
+  switch (variant) {
+    case "soft":
+      return "blue-btn-soft-".concat(color);
+    case "plain":
+      return "blue-btn-plain-".concat(color);
+    case "outline":
+      return "btn-outline-".concat(color);
+    case "link":
+      return "btn-link link-".concat(color, " link-offset-2");
+    case "menu-item":
+      return "blue-menu-item";
+    default:
+      return "btn-".concat(color);
+  }
+}
+export default function Button(_ref) {
+  var elementType = _ref.elementType,
+    className = _ref.className,
+    type = _ref.type,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "soft" : _ref$variant,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "secondary" : _ref$color,
+    sm = _ref.sm,
+    lg = _ref.lg,
+    iconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter,
+    label = _ref.label,
+    labelHidden = _ref.labelHidden,
+    busyProp = _ref.busy,
+    successProp = _ref.success,
+    active = _ref.active,
+    _ref$activeClassName = _ref.activeClassName,
+    activeClassName = _ref$activeClassName === void 0 ? "current" : _ref$activeClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var Comp = elementType || (props.href ? "a" : "button");
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    success = _useState2[0],
+    setSuccess = _useState2[1];
+  useEffect(function () {
+    if (successProp) {
+      setSuccess(true);
+      setTimeout(function () {
+        setSuccess(false);
+      }, 3000);
+    }
+  }, [successProp]);
+  var variantClass = getButtonVariantClass(variant, color);
+  var isNavLink = _typeof(elementType) === "object" && elementType !== null && "displayName" in elementType && elementType.displayName === "NavLink";
+  if (isNavLink) {
+    props = _objectSpread(_objectSpread({}, props), {}, {
+      activeClassName: activeClassName
+    });
+  }
+  return /*#__PURE__*/_jsx(Comp, _objectSpread(_objectSpread({
+    type: Comp === "button" && type === undefined ? "button" : type,
+    className: clsx("btn", _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, variantClass, !success), "btn-success", success), "btn-sm", sm), "btn-lg", lg), "icon-link", busyProp || iconBefore !== null || iconAfter !== null), "active", active), className)
+  }, props), {}, {
+    children: busyProp ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "spinner-border spinner-border-sm bi me-1",
+        "aria-hidden": true
+      }), /*#__PURE__*/_jsxs("span", {
+        role: "status",
+        children: [getPhrase("Loading"), "\u2026"]
+      })]
+    }) : success ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        className: "bi bi-check-lg me-1",
+        viewBox: "0 0 16 16",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        role: "status",
+        children: getPhrase("Successful")
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [iconBefore !== null && /*#__PURE__*/_jsx("span", {
+        className: "blue-btn-icon-wrapper",
+        "aria-hidden": true,
+        children: iconBefore
+      }), label && !labelHidden && /*#__PURE__*/_jsx("span", {
+        className: "text-truncate",
+        children: label
+      }), props.children, iconAfter != null && /*#__PURE__*/_jsx("span", {
+        className: "blue-btn-icon-wrapper",
+        "aria-hidden": true,
+        children: iconAfter
+      })]
+    })
+  }));
+}

package/dist/components/Chevron.js

@@ -5,6 +5,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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); }
 import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Chevron icon component with open state.
  */
@@ -14,7 +15,7 @@ export default function Chevron(_ref) {
     className = _ref.className,
     style = _ref.style;
   var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion)").matches;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -26,12 +27,13 @@ export default function Chevron(_ref) {
       transform: "rotate(".concat(open && mirrored ? -90 : open ? 90 : 0, "deg)"),
       transition: prefersReducedMotion ? "none" : "transform 0.2s"
     }),
-    viewBox: "0 0 16 16"
-  }, mirrored ? /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0"
-  }) : /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708"
-  }));
+    viewBox: "0 0 16 16",
+    children: mirrored ? /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      d: "M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0"
+    }) : /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      d: "M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708"
+    })
+  });
 }

package/dist/components/HashRouter.js

@@ -12,6 +12,7 @@ function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? O
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 import React, { Component } from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Component for simple hash routing. It's recommended to use solutions like `react-router-dom` for more complex routing.
  *
@@ -156,12 +157,14 @@ var HashRouter = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props$pages,
         _this3 = this;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, (_this$props$pages = this.props.pages) === null || _this$props$pages === void 0 ? void 0 : _this$props$pages.map(function (page) {
-        return _this3.state.history.indexOf(page.name) > -1 && /*#__PURE__*/React.createElement("div", {
-          key: page.name,
-          className: "router-page " + (_this3.state.match[0] === page.name ? "active" : "d-none")
-        }, page.component);
-      }));
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: (_this$props$pages = this.props.pages) === null || _this$props$pages === void 0 ? void 0 : _this$props$pages.map(function (page) {
+          return _this3.state.history.indexOf(page.name) > -1 && /*#__PURE__*/_jsx("div", {
+            className: "router-page " + (_this3.state.match[0] === page.name ? "active" : "d-none"),
+            children: page.component
+          }, page.name);
+        })
+      });
     }
   }], [{
     key: "defaultProps",

package/dist/components/Header.js

@@ -3,6 +3,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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); }
 import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The top of a page.
  */
@@ -10,8 +11,9 @@ export default function Header(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
-  return /*#__PURE__*/React.createElement("header", {
+  return /*#__PURE__*/_jsx("header", {
     className: "bg-body position-sticky top-0 border-bottom d-flex justify-content-between ".concat(className),
-    style: _defineProperty(_defineProperty(_defineProperty({}, "--bs-bg-opacity", 1), "--blue-menu-item-dropdown-bg", "rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity))"), "zIndex", "var(--blue-header-z-index, 3)")
-  }, children);
+    style: _defineProperty(_defineProperty(_defineProperty({}, "--bs-bg-opacity", 1), "--blue-menu-item-dropdown-bg", "rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity))"), "zIndex", "var(--blue-header-z-index, 3)"),
+    children: children
+  });
 }