@lobehub/ui 1.120.16 → 1.122.0

package/es/Form/components/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import { createStyles } from 'antd-style';
 import { isNumber } from 'lodash-es';
 export var useStyles = createStyles(function (_ref, itemMinWidth) {
@@ -10,14 +10,13 @@ export var useStyles = createStyles(function (_ref, itemMinWidth) {
     responsive = _ref.responsive,
     prefixCls = _ref.prefixCls;
   return {
-    footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    "]))),
-    formTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n\n      text-align: left;\n\n      > div {\n        font-weight: 500;\n        line-height: 1;\n      }\n\n      > small {\n        display: block;\n\n        line-height: 1;\n        color: ", ";\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n\n      .", "-tag {\n        font-family: ", ";\n      }\n    "])), token.colorTextDescription, prefixCls, token.fontFamilyCode),
-    group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .", "-collapse-content {\n            background: transparent;\n          }\n\n          .", "-collapse-header {\n            background: ", ";\n          }\n        "])), prefixCls, prefixCls, token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .", "-collapse-header {\n          align-items: center !important;\n          border-radius: 0 !important;\n        }\n\n        .", "-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .", "-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])), prefixCls, prefixCls, prefixCls)),
-    icon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      transition: all 100ms ", ";\n    "])), token.motionEaseOut),
-    item: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      padding: 16px 0;\n\n      .", "-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      .", "-form-item-required::before {\n        align-self: flex-start;\n      }\n\n      ", "\n\n      ", " {\n        padding: 16px 0;\n\n        ", "\n      }\n    "])), prefixCls, prefixCls, itemMinWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        .", "-form-item-control {\n          width: ", ";\n        }\n      "])), prefixCls, isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth), responsive.mobile, itemMinWidth ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n              .", "-row {\n                flex-direction: column;\n                gap: 4px;\n              }\n\n              .", "-form-item-control {\n                flex: 1;\n                width: 100%;\n              }\n            "])), prefixCls, prefixCls) : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n              .", "-row {\n                flex-wrap: wrap;\n                gap: 4px;\n              }\n            "])), prefixCls)),
-    itemNoDivider: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      &:not(:first-child) {\n        padding-top: 0;\n      }\n    "]))),
-    mobileGroupBody: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      padding: 0 16px;\n      background: ", ";\n    "])), token.colorBgContainer),
-    mobileGroupHeader: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      padding: 16px;\n      background: ", ";\n    "])), token.colorBgLayout),
-    title: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n\n      ", " {\n        font-size: 14px;\n        font-weight: 400;\n        opacity: 0.5;\n      }\n    "])), token.colorPrimary, responsive.mobile)
+    formTitle: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n      text-align: left;\n\n      > div {\n        font-weight: 500;\n        line-height: 1;\n      }\n\n      > small {\n        display: block;\n\n        line-height: 1;\n        color: ", ";\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n\n      .", "-tag {\n        font-family: ", ";\n      }\n    "])), token.colorTextDescription, prefixCls, token.fontFamilyCode),
+    group: cx(isDarkMode && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          .", "-collapse-content {\n            background: transparent;\n          }\n\n          .", "-collapse-header {\n            background: ", ";\n          }\n        "])), prefixCls, prefixCls, token.colorFillTertiary), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .", "-collapse-header {\n          align-items: center !important;\n          border-radius: 0 !important;\n        }\n\n        .", "-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .", "-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])), prefixCls, prefixCls, prefixCls)),
+    icon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      transition: all 100ms ", ";\n    "])), token.motionEaseOut),
+    item: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding: 16px 0;\n\n      .", "-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      .", "-form-item-required::before {\n        align-self: flex-start;\n      }\n\n      ", "\n\n      ", " {\n        padding: 16px 0;\n\n        ", "\n      }\n    "])), prefixCls, prefixCls, itemMinWidth && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .", "-form-item-control {\n          width: ", ";\n        }\n      "])), prefixCls, isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth), responsive.mobile, itemMinWidth ? css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n              .", "-row {\n                flex-direction: column;\n                gap: 4px;\n              }\n\n              .", "-form-item-control {\n                flex: 1;\n                width: 100%;\n              }\n            "])), prefixCls, prefixCls) : css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n              .", "-row {\n                flex-wrap: wrap;\n                gap: 4px;\n              }\n            "])), prefixCls)),
+    itemNoDivider: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      &:not(:first-child) {\n        padding-top: 0;\n      }\n    "]))),
+    mobileGroupBody: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      padding: 0 16px;\n      background: ", ";\n    "])), token.colorBgContainer),
+    mobileGroupHeader: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      padding: 16px;\n      background: ", ";\n    "])), token.colorBgLayout),
+    title: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      align-items: center;\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n\n      ", " {\n        font-size: 14px;\n        font-weight: 400;\n        opacity: 0.5;\n      }\n    "])), token.colorPrimary, responsive.mobile)
   };
 });

package/es/Form/style.d.ts

@@ -1,4 +1,3 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    footer: import("antd-style").SerializedStyles;
     form: import("antd-style").SerializedStyles;
 }>;

package/es/Form/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
@@ -7,7 +7,6 @@ export var useStyles = createStyles(function (_ref) {
     prefixCls = _ref.prefixCls,
     responsive = _ref.responsive;
   return {
-    footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n  "]))),
-    form: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    ", " {\n      gap: 0;\n    }\n\n    .", "-form-item {\n      margin: 0 !important;\n    }\n\n    .", "-form-item .", "-form-item-label > label {\n      height: unset;\n    }\n\n    .", "-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .", "-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .", "-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .", "-collapse-item {\n      overflow: hidden !important;\n      border-radius: ", "px !important;\n    }\n  "])), responsive.mobile, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, token.borderRadius)
+    form: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    ", " {\n      gap: 0;\n    }\n\n    .", "-form-item {\n      margin: 0 !important;\n    }\n\n    .", "-form-item .", "-form-item-label > label {\n      height: unset;\n    }\n\n    .", "-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .", "-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .", "-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .", "-collapse-item {\n      overflow: hidden !important;\n      border-radius: ", "px !important;\n    }\n  "])), responsive.mobile, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, token.borderRadius)
   };
 });

package/es/GaussianBackground/index.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { DivProps } from "../types";
+import { ColorLayer } from './vendor/gaussianBackground';
+export interface GaussianBackgroundProps extends PropsWithChildren, DivProps {
+    classNames?: {
+        canvas?: string;
+        content?: string;
+    };
+    layers: ColorLayer[];
+    options?: {
+        blurRadius?: number;
+        fpsCap?: number;
+        scale?: number;
+    };
+}
+declare const GaussianBackground: import("react").NamedExoticComponent<GaussianBackgroundProps>;
+export default GaussianBackground;

package/es/GaussianBackground/index.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["layers", "options", "className", "children", "classNames", "style"];
+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; }
+import { memo, useEffect, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useGaussianBackground } from "./useGaussianBackground";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_OPTIONS = {
+  blurRadius: 16,
+  fpsCap: 60,
+  scale: 16
+};
+var GaussianBackground = /*#__PURE__*/memo(function (_ref) {
+  var layers = _ref.layers,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? DEFAULT_OPTIONS : _ref$options,
+    className = _ref.className,
+    children = _ref.children,
+    classNames = _ref.classNames,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef(null);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var run = useGaussianBackground(ref);
+  useEffect(function () {
+    if (!run) return;
+    run(layers, options);
+  }, [run, options, layers]);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    style: style
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("canvas", {
+      className: cx(styles.canvas, classNames === null || classNames === void 0 ? void 0 : classNames.canvas),
+      ref: ref
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      className: cx(styles.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+      children: children
+    })]
+  }));
+});
+export default GaussianBackground;

package/es/GaussianBackground/style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    canvas: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    content: import("antd-style").SerializedStyles;
+}>;

package/es/GaussianBackground/style.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    canvas: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  "]))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    width: 100%;\n    height: 100%;\n  "]))),
+    content: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n  "])))
+  };
+});

package/es/GaussianBackground/useGaussianBackground.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { ColorLayer } from './vendor/gaussianBackground';
+export declare const useGaussianBackground: (ref: RefObject<HTMLCanvasElement>) => (layers: ColorLayer[], options?: {
+    blurRadius?: number;
+    fpsCap?: number;
+    scale?: number;
+}) => void;

package/es/GaussianBackground/useGaussianBackground.js

@@ -0,0 +1,19 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useCallback, useEffect, useState } from 'react';
+import GaussianBackgroundClient from "./vendor/gaussianBackground";
+export var useGaussianBackground = function useGaussianBackground(ref) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    client = _useState2[0],
+    setClient = _useState2[1];
+  useEffect(function () {
+    if (!ref.current) return;
+    setClient(new GaussianBackgroundClient(ref.current));
+  }, []);
+  var handleRun = useCallback(function (layers, options) {
+    if (!client) return;
+    if (options) client.updateOptions(options);
+    client.run(layers);
+  }, [client]);
+  return handleRun;
+};

package/es/GaussianBackground/vendor/gaussianBackground.d.ts

@@ -0,0 +1,38 @@
+export interface ColorLayer {
+    color: string;
+    maxVelocity?: number;
+    orbs?: number;
+    radius?: number;
+    splitX?: number;
+    splitY?: number;
+}
+export interface GaussianBackgroundOptions {
+    blurRadius?: number;
+    fpsCap?: number;
+    scale?: number;
+}
+declare class GaussianBackground {
+    private fpsAverage?;
+    private canvas;
+    private context;
+    private animationFrame;
+    private timestep;
+    private firstCallTime;
+    private lastCallTime;
+    private timeElapsed;
+    private fpsTotal;
+    private layers;
+    private options;
+    constructor(node: HTMLCanvasElement, options?: GaussianBackgroundOptions);
+    run(layers: ColorLayer[]): void;
+    private generateLayer;
+    private createOrb;
+    private displayLoop;
+    drawBackground(): void;
+    private drawBlur;
+    private updateLayers;
+    updateOptions({ blurRadius, fpsCap, scale, }: Partial<GaussianBackgroundOptions>): void;
+    prototype(): void;
+    play(): void;
+}
+export default GaussianBackground;

package/es/GaussianBackground/vendor/gaussianBackground.js

@@ -0,0 +1,222 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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; }
+import { stackBlurCanvasRGB } from "./stackBlur";
+var GaussianBackground = /*#__PURE__*/function () {
+  function GaussianBackground(node, options) {
+    _classCallCheck(this, GaussianBackground);
+    _defineProperty(this, "fpsAverage", void 0);
+    _defineProperty(this, "canvas", void 0);
+    _defineProperty(this, "context", void 0);
+    _defineProperty(this, "animationFrame", null);
+    _defineProperty(this, "timestep", 0);
+    _defineProperty(this, "firstCallTime", 0);
+    _defineProperty(this, "lastCallTime", 0);
+    _defineProperty(this, "timeElapsed", 0);
+    _defineProperty(this, "fpsTotal", 0);
+    _defineProperty(this, "layers", []);
+    _defineProperty(this, "options", {
+      blurRadius: 16,
+      fpsCap: 30,
+      height: 32,
+      scale: 20,
+      width: 64
+    });
+    this.canvas = node;
+    this.context = this.canvas.getContext('2d');
+    if (!this.context) {
+      throw new Error('ERROR: Could not load canvas');
+    }
+    if (options) {
+      this.updateOptions(options);
+    }
+  }
+  _createClass(GaussianBackground, [{
+    key: "run",
+    value: function run(layers) {
+      this.updateLayers(layers);
+      this.firstCallTime = Date.now();
+      this.lastCallTime = this.firstCallTime;
+      if (this.animationFrame) window.cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = window.requestAnimationFrame(this.displayLoop.bind(this));
+      this.play();
+    }
+  }, {
+    key: "generateLayer",
+    value: function generateLayer(_ref, index) {
+      var _ref$orbs = _ref.orbs,
+        orbs = _ref$orbs === void 0 ? 0 : _ref$orbs,
+        _ref$radius = _ref.radius,
+        radius = _ref$radius === void 0 ? 0 : _ref$radius,
+        _ref$maxVelocity = _ref.maxVelocity,
+        maxVelocity = _ref$maxVelocity === void 0 ? 0 : _ref$maxVelocity,
+        color = _ref.color,
+        splitX = _ref.splitX,
+        splitY = _ref.splitY;
+      var canvas = document.createElement('canvas');
+      var context = canvas.getContext('2d');
+      if (!context) {
+        throw new Error("Failed to get 2D context for layer ".concat(index));
+      }
+      var layerOrbs = [];
+      for (var i = 0; i < orbs; i++) {
+        var orb = this.createOrb(radius, maxVelocity, splitX, splitY);
+        layerOrbs.push(orb);
+      }
+      return {
+        color: color,
+        context: context,
+        orbs: layerOrbs
+      };
+    }
+  }, {
+    key: "createOrb",
+    value: function createOrb(radius, maxVelocity, splitX, splitY) {
+      var optionsWidth = this.options.width;
+      var optionsHeight = this.options.height;
+      var posX = splitX ? Math.random() * (optionsWidth / splitX) : Math.random() * optionsWidth;
+      var posY = splitY ? Math.random() * (optionsHeight / splitY) : Math.random() * optionsHeight;
+      return {
+        maxX: optionsWidth,
+        maxY: optionsHeight,
+        minX: 0,
+        minY: 0,
+        posX: posX,
+        posY: posY,
+        radius: radius,
+        velX: (Math.random() - 0.5) * 2 * maxVelocity,
+        velY: (Math.random() - 0.5) * 2 * maxVelocity
+      };
+    }
+  }, {
+    key: "displayLoop",
+    value: function displayLoop() {
+      // Keep going if the user wants animation
+      this.animationFrame = window.requestAnimationFrame(this.displayLoop.bind(this));
+      var currentTime = Date.now();
+      var delta = currentTime - this.lastCallTime;
+
+      // Ignore timesteping code if there is no animation
+      if (delta > this.timestep) {
+        this.lastCallTime = currentTime - delta % this.timestep;
+        this.timeElapsed = this.lastCallTime - this.firstCallTime;
+        this.fpsTotal++;
+        this.fpsAverage = this.fpsTotal / (this.timeElapsed / 1000);
+        this.drawBackground();
+        this.drawBlur();
+      }
+    }
+  }, {
+    key: "drawBackground",
+    value: function drawBackground() {
+      for (var i = Object.keys(this.layers).length - 1; i >= 0; i--) {
+        var layerContext = this.layers[i].context;
+        var layerOrbs = this.layers[i].orbs;
+
+        // Draw background
+        layerContext.fillStyle = this.layers[i].color;
+        layerContext.fillRect(0, 0, this.options.width, this.options.height);
+
+        // Draw animated layer elements
+        for (var x = Object.keys(layerOrbs).length - 1; x >= 0; x--) {
+          // Animate the movement
+          layerOrbs[x].posX += layerOrbs[x].velX;
+          layerOrbs[x].posY += layerOrbs[x].velY;
+
+          // Check if the orb has custom boundaries
+          var minX = void 0;
+          var maxX = void 0;
+          var minY = void 0;
+          var maxY = void 0;
+          if (layerOrbs[x].maxX && layerOrbs[x].maxY) {
+            minX = layerOrbs[x].minX;
+            maxX = layerOrbs[x].maxX;
+            minY = layerOrbs[x].minY;
+            maxY = layerOrbs[x].maxY;
+          } else {
+            minX = 0;
+            maxX = this.options.width;
+            minY = 0;
+            maxY = this.options.height;
+          }
+
+          // Collision detection and correction
+          if (layerOrbs[x].posX >= maxX) {
+            layerOrbs[x].posX = maxX;
+            layerOrbs[x].velX = -layerOrbs[x].velX;
+          } else if (layerOrbs[x].posX <= minX) {
+            layerOrbs[x].posX = minX;
+            layerOrbs[x].velX = -layerOrbs[x].velX;
+          }
+          if (layerOrbs[x].posY >= maxY) {
+            layerOrbs[x].posY = maxY;
+            layerOrbs[x].velY = -layerOrbs[x].velY;
+          } else if (layerOrbs[x].posY <= minY) {
+            layerOrbs[x].posY = minY;
+            layerOrbs[x].velY = -layerOrbs[x].velY;
+          }
+          layerContext.save();
+          layerContext.globalCompositeOperation = 'destination-out';
+          layerContext.beginPath();
+          layerContext.arc(layerOrbs[x].posX, layerOrbs[x].posY, layerOrbs[x].radius, 0, 2 * Math.PI, false);
+          layerContext.fill();
+          layerContext.restore();
+        }
+
+        // Draw the virtual canvas layer onto the main canvas
+        this.context.drawImage(layerContext.canvas, 0, 0);
+      }
+    }
+  }, {
+    key: "drawBlur",
+    value: function drawBlur() {
+      stackBlurCanvasRGB(this.canvas, 0, 0, this.options.width, this.options.height, this.options.blurRadius);
+    }
+  }, {
+    key: "updateLayers",
+    value: function updateLayers(layers) {
+      var _this = this;
+      this.layers = layers.map(function (layer, index) {
+        return _this.generateLayer(layer, index);
+      });
+    }
+  }, {
+    key: "updateOptions",
+    value: function updateOptions(_ref2) {
+      var _ref2$blurRadius = _ref2.blurRadius,
+        blurRadius = _ref2$blurRadius === void 0 ? 16 : _ref2$blurRadius,
+        _ref2$fpsCap = _ref2.fpsCap,
+        fpsCap = _ref2$fpsCap === void 0 ? 30 : _ref2$fpsCap,
+        _ref2$scale = _ref2.scale,
+        scale = _ref2$scale === void 0 ? 20 : _ref2$scale;
+      this.options = _objectSpread(_objectSpread({}, this.options), {}, {
+        blurRadius: blurRadius,
+        fpsCap: fpsCap,
+        scale: scale
+      });
+      this.options.height = Math.round(this.canvas.clientHeight / this.options.scale);
+      this.options.width = Math.round(this.canvas.clientWidth / this.options.scale);
+      this.timestep = 1000 / this.options.fpsCap;
+      this.context.canvas.width = this.options.width;
+      this.context.canvas.height = this.options.height;
+    }
+  }, {
+    key: "prototype",
+    value: function prototype() {
+      window.cancelAnimationFrame(this.animationFrame);
+    }
+  }, {
+    key: "play",
+    value: function play() {
+      var _this2 = this;
+      window.cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = window.requestAnimationFrame(function () {
+        return _this2.displayLoop();
+      });
+    }
+  }]);
+  return GaussianBackground;
+}();
+export default GaussianBackground;

package/es/GaussianBackground/vendor/stackBlur.d.ts

@@ -0,0 +1 @@
+export declare const stackBlurCanvasRGB: (canvasIDOrElement: string | HTMLCanvasElement, topX: number, topY: number, width: number, height: number, radius: number) => void;

package/es/GaussianBackground/vendor/stackBlur.js

@@ -0,0 +1,184 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { mulTable, shgTable } from "./stackBlurTable";
+var BlurStack = /*#__PURE__*/_createClass(function BlurStack() {
+  _classCallCheck(this, BlurStack);
+  _defineProperty(this, "r", 0);
+  _defineProperty(this, "g", 0);
+  _defineProperty(this, "b", 0);
+  _defineProperty(this, "a", 0);
+  _defineProperty(this, "next", void 0);
+});
+var stackBlurGetElement = function stackBlurGetElement(elementOrID) {
+  if (typeof elementOrID === 'string') {
+    // eslint-disable-next-line unicorn/prefer-query-selector
+    return document.getElementById(elementOrID);
+  } else if (elementOrID.nodeType === 1) {
+    return elementOrID;
+  }
+};
+export var stackBlurCanvasRGB = function stackBlurCanvasRGB(canvasIDOrElement, topX, topY, width, height, radius) {
+  if (Number.isNaN(radius) || radius < 1) return;
+  // eslint-disable-next-line no-param-reassign
+  radius = Math.trunc(radius);
+  var canvas = stackBlurGetElement(canvasIDOrElement);
+  if (!canvas && !(canvas !== null && canvas !== void 0 && canvas.getContext)) return;
+  var context = canvas.getContext('2d');
+  var imageData = context === null || context === void 0 ? void 0 : context.getImageData(topX, topY, width, height);
+  var pixels = imageData.data;
+  var x;
+  var y;
+  var i;
+  var p;
+  var yp;
+  var yi;
+  var yw;
+  var rSum;
+  var gSum;
+  var bSum;
+  var rOutSum;
+  var gOutSum;
+  var bOutSum;
+  var rInSum;
+  var gInSum;
+  var bInSum;
+  var pr;
+  var pg;
+  var pb;
+  var rbs;
+  var stackEnd;
+  var div = radius + radius + 1;
+  var widthMinus1 = width - 1;
+  var heightMinus1 = height - 1;
+  var radiusPlus1 = radius + 1;
+  var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
+  var stackStart = new BlurStack();
+  var stack = stackStart;
+  for (i = 1; i < div; i++) {
+    stack = stack.next = new BlurStack();
+    if (i === radiusPlus1) stackEnd = stack;
+  }
+  stack.next = stackStart;
+  var stackIn;
+  var stackOut;
+  yw = yi = 0;
+  var mulSum = mulTable[radius];
+  var shgSum = shgTable[radius];
+  for (y = 0; y < height; y++) {
+    rInSum = gInSum = bInSum = rSum = gSum = bSum = 0;
+    rOutSum = radiusPlus1 * (pr = pixels[yi]);
+    gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
+    bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
+    rSum += sumFactor * pr;
+    gSum += sumFactor * pg;
+    bSum += sumFactor * pb;
+    stack = stackStart;
+    for (i = 0; i < radiusPlus1; i++) {
+      stack.r = pr;
+      stack.g = pg;
+      stack.b = pb;
+      stack = stack.next;
+    }
+    for (i = 1; i < radiusPlus1; i++) {
+      p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
+      rSum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
+      gSum += (stack.g = pg = pixels[p + 1]) * rbs;
+      bSum += (stack.b = pb = pixels[p + 2]) * rbs;
+      rInSum += pr;
+      gInSum += pg;
+      bInSum += pb;
+      stack = stack.next;
+    }
+    stackIn = stackStart;
+    stackOut = stackEnd;
+    for (x = 0; x < width; x++) {
+      pixels[yi] = rSum * mulSum >> shgSum;
+      pixels[yi + 1] = gSum * mulSum >> shgSum;
+      pixels[yi + 2] = bSum * mulSum >> shgSum;
+      rSum -= rOutSum;
+      gSum -= gOutSum;
+      bSum -= bOutSum;
+      rOutSum -= stackIn.r;
+      gOutSum -= stackIn.g;
+      bOutSum -= stackIn.b;
+      p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2;
+      rInSum += stackIn.r = pixels[p];
+      gInSum += stackIn.g = pixels[p + 1];
+      bInSum += stackIn.b = pixels[p + 2];
+      rSum += rInSum;
+      gSum += gInSum;
+      bSum += bInSum;
+      stackIn = stackIn.next;
+      rOutSum += pr = stackOut.r;
+      gOutSum += pg = stackOut.g;
+      bOutSum += pb = stackOut.b;
+      rInSum -= pr;
+      gInSum -= pg;
+      bInSum -= pb;
+      stackOut = stackOut.next;
+      yi += 4;
+    }
+    yw += width;
+  }
+  for (x = 0; x < width; x++) {
+    gInSum = bInSum = rInSum = gSum = bSum = rSum = 0;
+    yi = x << 2;
+    rOutSum = radiusPlus1 * (pr = pixels[yi]);
+    gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
+    bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
+    rSum += sumFactor * pr;
+    gSum += sumFactor * pg;
+    bSum += sumFactor * pb;
+    stack = stackStart;
+    for (i = 0; i < radiusPlus1; i++) {
+      stack.r = pr;
+      stack.g = pg;
+      stack.b = pb;
+      stack = stack.next;
+    }
+    yp = width;
+    for (i = 1; i <= radius; i++) {
+      yi = yp + x << 2;
+      rSum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
+      gSum += (stack.g = pg = pixels[yi + 1]) * rbs;
+      bSum += (stack.b = pb = pixels[yi + 2]) * rbs;
+      rInSum += pr;
+      gInSum += pg;
+      bInSum += pb;
+      stack = stack.next;
+      if (i < heightMinus1) {
+        yp += width;
+      }
+    }
+    yi = x;
+    stackIn = stackStart;
+    stackOut = stackEnd;
+    for (y = 0; y < height; y++) {
+      p = yi << 2;
+      pixels[p] = rSum * mulSum >> shgSum;
+      pixels[p + 1] = gSum * mulSum >> shgSum;
+      pixels[p + 2] = bSum * mulSum >> shgSum;
+      rSum -= rOutSum;
+      gSum -= gOutSum;
+      bSum -= bOutSum;
+      rOutSum -= stackIn.r;
+      gOutSum -= stackIn.g;
+      bOutSum -= stackIn.b;
+      p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2;
+      rSum += rInSum += stackIn.r = pixels[p];
+      gSum += gInSum += stackIn.g = pixels[p + 1];
+      bSum += bInSum += stackIn.b = pixels[p + 2];
+      stackIn = stackIn.next;
+      rOutSum += pr = stackOut.r;
+      gOutSum += pg = stackOut.g;
+      bOutSum += pb = stackOut.b;
+      rInSum -= pr;
+      gInSum -= pg;
+      bInSum -= pb;
+      stackOut = stackOut.next;
+      yi += width;
+    }
+  }
+  context === null || context === void 0 || context.putImageData(imageData, topX, topY);
+};

package/es/GaussianBackground/vendor/stackBlurTable.d.ts

@@ -0,0 +1,2 @@
+export declare const mulTable: number[];
+export declare const shgTable: number[];

package/es/GaussianBackground/vendor/stackBlurTable.js

@@ -0,0 +1,2 @@
+export var mulTable = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259];
+export var shgTable = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24];

package/es/Header/index.js

@@ -74,8 +74,11 @@ var Header = /*#__PURE__*/memo(function (_ref) {
             overflow: 'hidden'
           }, navStyle),
           children: nav
-        }), /*#__PURE__*/_jsxs("section", {
+        }), /*#__PURE__*/_jsxs(Flexbox, {
           className: cx(styles.right, actionsClassName),
+          flex: 1,
+          horizontal: true,
+          justify: 'space-between',
           style: actionsStyle,
           children: [/*#__PURE__*/_jsx("div", {}), /*#__PURE__*/_jsx(Flexbox, {
             align: 'center',