@ainias42/react-bootstrap-mobile 1.0.3 → 1.0.5

package/dist/index.js

@@ -1,5 +1,5 @@
+import { Children, Component, Fragment, cloneElement, createContext, createElement, default as default_0, isValidElement, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { ArrayHelper, JsonHelper, ObjectHelper, PromiseWithHandlers, Random } from "@ainias42/js-helper";
-import { Children, Fragment, cloneElement, createContext, createElement, default as default_0, isValidElement, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { default as default_1 } from "classnames";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown, faChevronRight, faChevronUp, faCircleXmark, faEllipsisH, faEllipsisV, faEye, faEyeSlash, faFile, faPlus, faTimes, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
@@ -56,20 +56,8 @@ class WrongChildError extends Error {
     this.childValue = child;
   }
 }
-;// ./src/Components/Flavor.ts
-var Flavor;
-(function (Flavor) {
-  Flavor["Accent"] = "flavor-accent";
-  Flavor["Basic"] = "flavor-basic";
-  Flavor["Destructive"] = "flavor-destructive";
-  Flavor["Constructive"] = "flavor-constructive";
-})(Flavor || (Flavor = {}));
-;// ./src/helper/Characters.ts
-const Characters = {
-  NBSP: '\u00A0',
-  PATH_DELIMITER: '/',
-  MIDDLE_DOT: '\u00B7'
-};
+;// external "react"
+
 ;// external "@ainias42/js-helper"
 
 ;// ./src/helper/memoComparator.ts
@@ -87,26 +75,6 @@ function memoComparator(prevProps, nextProps) {
     return prevProps[key] === nextProps[key];
   });
 }
-;// ./src/helper/nonEmptyString.ts
-
-function nonEmptyString(str, other = Characters.NBSP) {
-  if (!str) {
-    return other;
-  }
-  return str;
-}
-;// external "react"
-
-;// ./src/helper/useDeepShallow.ts
-
-
-function useDeepShallow(selector, depth = -1) {
-  const prev = useRef(undefined);
-  return state => {
-    const next = selector(state);
-    return JsonHelper.deepEqual(prev.current, next, depth) ? prev.current : prev.current = next;
-  };
-}
 ;// ./src/helper/withRestrictedChildren.tsx
 var __rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
@@ -153,7 +121,9 @@ function withRestrictedChildren(Component, defaultAllowChildren) {
     return (
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      default_0.createElement(Component, Object.assign({}, newProps), children)
+      default_0.createElement(Component, Object.assign({}, newProps, {
+        __allowChildren: __allowChildren
+      }), children)
     );
   };
   hocComponent.displayName = displayName;
@@ -169,49 +139,6 @@ function withMemo(component, defaultAllowChildren) {
   memoizedComponent.displayName = `Memoized(${component.displayName || component.name})`;
   return memoizedComponent;
 }
-;// ./src/helper/withRenderBrowserOnly.tsx
-var withRenderBrowserOnly_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-function withRenderBrowserOnly(Component) {
-  const displayName = `WithRenderBrowserOnly(${Component.displayName || Component.name})`;
-  function HocComponent(_a, ref) {
-    var {
-        children
-      } = _a,
-      props = withRenderBrowserOnly_rest(_a, ["children"]);
-    const [isBrowser, setIsBrowser] = useState(false);
-    useEffect(() => setIsBrowser(true), []);
-    if (!isBrowser) {
-      return null;
-    }
-    const newProps = props;
-    if (ref && Object.keys(ref).length > 0) {
-      newProps.ref = ref;
-    }
-    return (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      default_0.createElement(Component, Object.assign({}, newProps), children)
-    );
-  }
-  HocComponent.displayName = displayName;
-  return HocComponent;
-}
-;// ./src/WindowContext/WindowContext.ts
-
-const WindowContext = default_0.createContext(undefined);
-WindowContext.displayName = 'WindowContext';
-function useWindow() {
-  var _a;
-  return (_a = useContext(WindowContext)) !== null && _a !== void 0 ? _a : typeof window !== 'undefined' ? window : undefined;
-}
 ;// ./src/Components/Layout/View.tsx
 var View_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
@@ -257,31 +184,378 @@ var ViewWithoutListeners_rest = undefined && undefined.__rest || function (s, e)
 
 
 
-const ViewWithoutListeners = withMemo(function ViewWithoutListeners(_a) {
+const ViewWithoutListeners = withMemo(function ViewWithoutListeners(_a) {
+  // Variables
+  var {
+      children,
+      ref
+    } = _a,
+    props = ViewWithoutListeners_rest(_a, ["children", "ref"]);
+  // Refs
+  // States
+  // Selectors
+  // Callbacks
+  // Effects
+  // Other
+  // Render Functions
+  return createElement(View, Object.assign({}, props, {
+    ref: ref
+  }), children);
+}, 'all');
+;// external "classnames"
+
+;// ./src/Components/Layout/layout.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const layout_module = ({"flex":"flex__Xtdxj","horizontal":"horizontal__HAxyH","unaligned":"unaligned__jkwMg","fillWidth":"fillWidth__LDtNS","fillHeight":"fillHeight__pkb_S","grow":"grow__GRH5E","weight0":"weight0__mAhm_","weight1":"weight1__Gvlqz","weight2":"weight2__KF4_k","weight3":"weight3__fZi1h","weight4":"weight4__SUChB","weight5":"weight5__fgiwz","weight6":"weight6__tBvFt","center":"center__JNiHZ","block":"block__OUDP2","inlineBlock":"inlineBlock__C1O3Y","inline":"inline__uUoNu"});
+;// ./src/Components/Layout/BaseBlock.tsx
+var BaseBlock_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+const BaseBlock = withMemo(function Block(_a) {
+  // Variables
+  var {
+      children,
+      as = 'div',
+      className,
+      ref
+    } = _a,
+    props = BaseBlock_rest(_a, ["children", "as", "className", "ref"]);
+  // Refs
+  // States
+  // Selectors
+  // Callbacks
+  // Effects
+  // Other
+  // Render Functions
+  return createElement(ViewWithoutListeners, Object.assign({
+    className: default_1(layout_module.block, className),
+    as: as,
+    ref: ref
+  }, props), children);
+});
+;// ./src/Components/Layout/Inline.tsx
+var Inline_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+const Inline = withMemo(function Inline(_a) {
+  // Variables
+  var {
+      children,
+      as = 'span',
+      className
+    } = _a,
+    props = Inline_rest(_a, ["children", "as", "className"]);
+  // Refs
+  // States
+  // Selectors
+  // Callbacks
+  // Effects
+  // Other
+  // Render Functions
+  return createElement(ViewWithoutListeners, Object.assign({
+    className: default_1(layout_module.inline, className),
+    as: as
+  }, props), children);
+});
+;// ./src/Components/Text/text.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const text_module = ({"text":"text__ejS3o","block":"block__naLxK","heading":"heading__KU9xU","primaryDefault":"primaryDefault__Liz7y","primary":"primary__rEpob","secondary":"secondary__zUXeI","tertiary":"tertiary__UaTRx","xsmall":"xsmall__BCYOF","small":"small__AWNxX","medium":"medium__rHmhh","large":"large__ekCpY","xlarge":"xlarge__KP0mY","xxlarge":"xxlarge__Japom","emphasized":"emphasized__Gn24q"});
+;// ./src/Components/Text/Text.tsx
+var Text_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+const TEXT_PRIO = {
+  primary: text_module.primary,
+  secondary: text_module.secondary,
+  tertiary: text_module.tertiary,
+  heading: text_module.heading
+};
+const TEXT_SIZE = {
+  xSmall: text_module.xsmall,
+  small: text_module.small,
+  medium: text_module.medium,
+  large: text_module.large,
+  xLarge: text_module.xlarge,
+  xxLarge: text_module.xxlarge
+};
+function Text(_a) {
+  var {
+      className,
+      children,
+      block = false,
+      prio,
+      emphasized = false,
+      size = TEXT_SIZE.medium,
+      as = 'span'
+    } = _a,
+    props = Text_rest(_a, ["className", "children", "block", "prio", "emphasized", "size", "as"]);
+  // Variables
+  prio = prio !== null && prio !== void 0 ? prio : text_module.primaryDefault;
+  // States
+  // Refs
+  // Callbacks
+  // Effects
+  // Other
+  Children.forEach(children, child => {
+    const type = typeof child;
+    if (type !== 'string' && type !== 'undefined' && type !== 'object' && type !== 'number' || type === 'object' && child !== null) {
+      throw new WrongChildError('string, number, undefined, null', type, child, 'Text');
+    }
+  });
+  // Render Functions
+  return createElement(Inline, Object.assign({
+    __allowChildren: "text",
+    as: as
+  }, props, {
+    className: default_1(text_module.text, {
+      [text_module.block]: block,
+      [text_module.emphasized]: emphasized
+    }, prio, size, className)
+  }), children);
+}
+const tmp = memo(Text);
+
+;// ./src/Components/Text/heading.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const heading_module = ({"heading":"heading__oxEyT"});
+;// ./src/Components/Text/Heading.tsx
+
+
+
+
+
+function Heading({
+  children,
+  className,
+  style
+}) {
+  // Variables
+  // Refs
+  // States
+  // Selectors
+  // Callbacks
+  // Effects
+  // Other
+  // Render Functions
+  return createElement(tmp, {
+    as: "h1",
+    size: TEXT_SIZE.xxLarge,
+    prio: TEXT_PRIO.heading,
+    className: default_1(heading_module.heading, className),
+    style: style
+  }, children);
+}
+// Need HeadingMemo for autocompletion of phpstorm
+const HeadingMemo = withMemo(Heading, 'text');
+
+;// ./src/Components/ErrorBoundary.tsx
+
+
+
+
+class ErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      error: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    console.error('Got error', error);
+    return {
+      error
+    };
+  }
+  render() {
+    const {
+      error
+    } = this.state;
+    const {
+      children,
+      formatError,
+      showStack
+    } = this.props;
+    if (error) {
+      const message = (formatError === null || formatError === void 0 ? void 0 : formatError(error)) || String(error);
+      let stack;
+      if (error instanceof Error) {
+        stack = error.stack;
+      }
+      return default_0.createElement(BaseBlock, null, default_0.createElement(HeadingMemo, null, message), !!stack && showStack && default_0.createElement(tmp, {
+        style: {
+          whiteSpace: 'pre'
+        }
+      }, stack));
+    }
+    return children;
+  }
+}
+;// ./src/Components/Flavor.ts
+var Flavor;
+(function (Flavor) {
+  Flavor["Accent"] = "flavor-accent";
+  Flavor["Basic"] = "flavor-basic";
+  Flavor["Destructive"] = "flavor-destructive";
+  Flavor["Constructive"] = "flavor-constructive";
+})(Flavor || (Flavor = {}));
+;// ./src/helper/Characters.ts
+const Characters = {
+  NBSP: '\u00A0',
+  PATH_DELIMITER: '/',
+  MIDDLE_DOT: '\u00B7'
+};
+;// ./src/helper/nonEmptyString.ts
+
+function nonEmptyString(str, other = Characters.NBSP) {
+  if (!str) {
+    return other;
+  }
+  return str;
+}
+;// ./src/helper/useDeepShallow.ts
+
+
+function useDeepShallow(selector, depth = -1) {
+  const prev = useRef(undefined);
+  return state => {
+    const next = selector(state);
+    return JsonHelper.deepEqual(prev.current, next, depth) ? prev.current : prev.current = next;
+  };
+}
+;// ./src/helper/withRenderBrowserOnly.tsx
+var withRenderBrowserOnly_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+function withRenderBrowserOnly(Component) {
+  const displayName = `WithRenderBrowserOnly(${Component.displayName || Component.name})`;
+  function HocComponent(_a, ref) {
+    var {
+        children
+      } = _a,
+      props = withRenderBrowserOnly_rest(_a, ["children"]);
+    const [isBrowser, setIsBrowser] = useState(false);
+    useEffect(() => setIsBrowser(true), []);
+    if (!isBrowser) {
+      return null;
+    }
+    const newProps = props;
+    if (ref && Object.keys(ref).length > 0) {
+      newProps.ref = ref;
+    }
+    return (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      default_0.createElement(Component, Object.assign({}, newProps), children)
+    );
+  }
+  HocComponent.displayName = displayName;
+  return HocComponent;
+}
+;// ./src/WindowContext/WindowContext.ts
+
+const WindowContext = default_0.createContext(undefined);
+WindowContext.displayName = 'WindowContext';
+function useWindow() {
+  var _a;
+  return (_a = useContext(WindowContext)) !== null && _a !== void 0 ? _a : typeof window !== 'undefined' ? window : undefined;
+}
+;// external "@fortawesome/react-fontawesome"
+
+;// ./src/Components/Icon/icon.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const icon_module = ({"margin":"margin__Oq6ib","imgIcon":"imgIcon__B6ZP0","doubleIconContainer":"doubleIconContainer__TzWce","secondIcon":"secondIcon__YwXe_"});
+;// ./src/Components/Icon/BaseIcon.tsx
+var BaseIcon_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+const BaseIcon = withMemo(function BaseIcon(_a) {
   // Variables
   var {
-      children,
+      icon,
+      alt,
+      className,
+      noMargin = true,
+      style,
       ref
     } = _a,
-    props = ViewWithoutListeners_rest(_a, ["children", "ref"]);
-  // Refs
+    props = BaseIcon_rest(_a, ["icon", "alt", "className", "noMargin", "style", "ref"]);
   // States
-  // Selectors
+  // Refs
   // Callbacks
   // Effects
   // Other
+  if (!alt && typeof icon === 'string') {
+    alt = icon;
+  }
   // Render Functions
-  return createElement(View, Object.assign({}, props, {
+  if (typeof icon === 'string' && (icon.includes('.') || icon.startsWith('data:'))) {
+    return createElement("img", {
+      src: icon,
+      alt: alt,
+      className: default_1(icon_module.imgIcon, className, {
+        [icon_module.margin]: !noMargin
+      }),
+      style: style,
+      ref: ref
+    });
+  }
+  return createElement(FontAwesomeIcon, Object.assign({}, props, {
+    icon: icon,
+    className: default_1(className, {
+      [icon_module.margin]: !noMargin
+    }),
+    style: style,
     ref: ref
-  }), children);
-}, 'all');
-;// external "classnames"
-
-;// ./src/Components/Layout/layout.module.scss
-// extracted by mini-css-extract-plugin
-/* harmony default export */ const layout_module = ({"flex":"flex__Xtdxj","horizontal":"horizontal__HAxyH","grow":"grow__GRH5E","weight0":"weight0__mAhm_","weight1":"weight1__Gvlqz","weight2":"weight2__KF4_k","weight3":"weight3__fZi1h","weight4":"weight4__SUChB","weight5":"weight5__fgiwz","weight6":"weight6__tBvFt","center":"center__JNiHZ","block":"block__OUDP2","inlineBlock":"inlineBlock__C1O3Y","inline":"inline__uUoNu"});
-;// ./src/Components/Layout/Block.tsx
-var Block_rest = undefined && undefined.__rest || function (s, e) {
+  }));
+});
+;// ./src/Components/Layout/BaseInlineBlock.tsx
+var BaseInlineBlock_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -294,15 +568,14 @@ var Block_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-const Block = withMemo(function Block(_a) {
+const BaseInlineBlock = withMemo(function BaseInlineBlock(_a) {
   // Variables
   var {
       children,
-      as = 'div',
-      className,
-      ref
+      as = 'span',
+      className
     } = _a,
-    props = Block_rest(_a, ["children", "as", "className", "ref"]);
+    props = BaseInlineBlock_rest(_a, ["children", "as", "className"]);
   // Refs
   // States
   // Selectors
@@ -310,11 +583,10 @@ const Block = withMemo(function Block(_a) {
   // Effects
   // Other
   // Render Functions
-  return createElement(ViewWithoutListeners, Object.assign({
-    className: default_1(layout_module.block, className),
-    as: as,
-    ref: ref
-  }, props), children);
+  return createElement(ViewWithoutListeners, Object.assign({}, props, {
+    className: default_1(layout_module.inlineBlock, className),
+    as: as
+  }), children);
 });
 ;// ./src/Components/Hooks/useComposedRef.ts
 
@@ -646,220 +918,37 @@ const Flex = withMemo(function Flex(_a) {
       className,
       horizontal = false,
       ref,
-      grow = false
-    } = _a,
-    props = Flex_rest(_a, ["children", "as", "className", "horizontal", "ref", "grow"]);
-  // States
-  // Refs
-  // Callbacks
-  // Effects
-  // Other
-  // Render Functions
-  return createElement(ViewWithoutListeners, Object.assign({
-    className: default_1(className, layout_module.flex, {
-      [layout_module.horizontal]: horizontal,
-      [layout_module.grow]: grow,
-      [layout_module.weight1]: grow
-    }),
-    as: as,
-    ref: ref
-  }, props), children);
-});
-;// external "@fortawesome/react-fontawesome"
-
-;// ./src/Components/Icon/icon.module.scss
-// extracted by mini-css-extract-plugin
-/* harmony default export */ const icon_module = ({"margin":"margin__Oq6ib","imgIcon":"imgIcon__B6ZP0","doubleIconContainer":"doubleIconContainer__TzWce","secondIcon":"secondIcon__YwXe_"});
-;// ./src/Components/Icon/Icon.tsx
-var Icon_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-const Icon = withMemo(function Icon(_a) {
-  // Variables
-  var {
-      icon,
-      alt,
-      className,
-      noMargin = true,
-      style,
-      title
-    } = _a,
-    props = Icon_rest(_a, ["icon", "alt", "className", "noMargin", "style", "title"]);
-  // States
-  // Refs
-  // Callbacks
-  // Effects
-  // Other
-  if (!alt && typeof icon === 'string') {
-    alt = icon;
-  }
-  // Render Functions
-  if (typeof icon === 'string' && (icon.includes('.') || icon.startsWith('data:'))) {
-    return createElement("img", {
-      src: icon,
-      alt: alt,
-      className: default_1(icon_module.imgIcon, className, {
-        [icon_module.margin]: !noMargin
-      }),
-      style: style,
-      title: title
-    });
-  }
-  return createElement(FontAwesomeIcon, Object.assign({}, props, {
-    icon: icon,
-    className: default_1(className, {
-      [icon_module.margin]: !noMargin
-    }),
-    style: style,
-    title: title
-  }));
-});
-;// ./src/Components/Layout/InlineBlock.tsx
-var InlineBlock_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-const InlineBlock = withMemo(function InlineBlock(_a) {
-  // Variables
-  var {
-      children,
-      as = 'span',
-      className
-    } = _a,
-    props = InlineBlock_rest(_a, ["children", "as", "className"]);
-  // Refs
-  // States
-  // Selectors
-  // Callbacks
-  // Effects
-  // Other
-  // Render Functions
-  return createElement(ViewWithoutListeners, Object.assign({}, props, {
-    className: default_1(layout_module.inlineBlock, className),
-    as: as
-  }), children);
-});
-;// ./src/Components/Layout/Inline.tsx
-var Inline_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-const Inline = withMemo(function Inline(_a) {
-  // Variables
-  var {
-      children,
-      as = 'span',
-      className
-    } = _a,
-    props = Inline_rest(_a, ["children", "as", "className"]);
-  // Refs
-  // States
-  // Selectors
-  // Callbacks
-  // Effects
-  // Other
-  // Render Functions
-  return createElement(ViewWithoutListeners, Object.assign({
-    className: default_1(layout_module.inline, className),
-    as: as
-  }, props), children);
-});
-;// ./src/Components/Text/text.module.scss
-// extracted by mini-css-extract-plugin
-/* harmony default export */ const text_module = ({"text":"text__ejS3o","block":"block__naLxK","heading":"heading__KU9xU","primaryDefault":"primaryDefault__Liz7y","primary":"primary__rEpob","secondary":"secondary__zUXeI","tertiary":"tertiary__UaTRx","xsmall":"xsmall__BCYOF","small":"small__AWNxX","medium":"medium__rHmhh","large":"large__ekCpY","xlarge":"xlarge__KP0mY","xxlarge":"xxlarge__Japom","emphasized":"emphasized__Gn24q"});
-;// ./src/Components/Text/Text.tsx
-var Text_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-const TEXT_PRIO = {
-  primary: text_module.primary,
-  secondary: text_module.secondary,
-  tertiary: text_module.tertiary,
-  heading: text_module.heading
-};
-const TEXT_SIZE = {
-  xSmall: text_module.xsmall,
-  small: text_module.small,
-  medium: text_module.medium,
-  large: text_module.large,
-  xLarge: text_module.xlarge,
-  xxLarge: text_module.xxlarge
-};
-function Text(_a) {
-  var {
-      className,
-      children,
-      block = false,
-      prio,
-      emphasized = false,
-      size = TEXT_SIZE.medium,
-      as = 'span'
+      grow = false,
+      unaligned = false,
+      fill = false,
+      fillWidth = fill,
+      fillHeight = fill,
+      gap,
+      style
     } = _a,
-    props = Text_rest(_a, ["className", "children", "block", "prio", "emphasized", "size", "as"]);
-  // Variables
-  prio = prio !== null && prio !== void 0 ? prio : text_module.primaryDefault;
+    props = Flex_rest(_a, ["children", "as", "className", "horizontal", "ref", "grow", "unaligned", "fill", "fillWidth", "fillHeight", "gap", "style"]);
   // States
   // Refs
   // Callbacks
   // Effects
-  // Other
-  Children.forEach(children, child => {
-    const type = typeof child;
-    if (type !== 'string' && type !== 'undefined' && type !== 'object' && type !== 'number' || type === 'object' && child !== null) {
-      throw new WrongChildError('string, number, undefined, null', type, child, 'Text');
-    }
-  });
+  // Other
   // Render Functions
-  return createElement(Inline, Object.assign({
-    __allowChildren: "text",
-    as: as
-  }, props, {
-    className: default_1(text_module.text, {
-      [text_module.block]: block,
-      [text_module.emphasized]: emphasized
-    }, prio, size, className)
-  }), children);
-}
-const tmp = memo(Text);
-
+  return createElement(ViewWithoutListeners, Object.assign({
+    className: default_1(className, layout_module.flex, {
+      [layout_module.horizontal]: horizontal,
+      [layout_module.grow]: grow,
+      [layout_module.weight1]: grow,
+      [layout_module.unaligned]: unaligned,
+      [layout_module.fillWidth]: fillWidth,
+      [layout_module.fillHeight]: fillHeight
+    }),
+    style: Object.assign({
+      gap
+    }, style),
+    as: as,
+    ref: ref
+  }, props), children);
+});
 ;// external "@fortawesome/free-solid-svg-icons"
 
 ;// ./src/scss/baseClasses.module.scss
@@ -920,9 +1009,9 @@ const ActionSheet = withMemo(function ActionSheet({
     }),
     onClick: onActionClick,
     onClickData: action
-  }, createElement(InlineBlock, {
+  }, createElement(BaseInlineBlock, {
     className: actionSheet_module.actionIcon
-  }, action.icon ? createElement(Icon, {
+  }, action.icon ? createElement(BaseIcon, {
     icon: action.icon
   }) : null), createElement(tmp, {
     className: actionSheet_module.actionName
@@ -938,15 +1027,15 @@ const ActionSheet = withMemo(function ActionSheet({
     className: baseClasses_module.fullHeight
   }, createElement(Flex, {
     className: actionSheet_module.content
-  }, title ? createElement(Block, {
+  }, title ? createElement(BaseBlock, {
     className: actionSheet_module.title
   }, createElement(tmp, null, title)) : null, actions.map(renderAction), createElement(Clickable, {
     className: actionSheet_module.cancel,
     onClick: () => console.log('Cancel clicked'),
     __allowChildren: "all"
-  }, createElement(InlineBlock, {
+  }, createElement(BaseInlineBlock, {
     className: actionSheet_module.actionIcon
-  }, createElement(Icon, {
+  }, createElement(BaseIcon, {
     icon: faTimes
   })), cancelText))));
 });
@@ -1021,15 +1110,15 @@ function ButtonDialog({
   // Effects
   // Other
   // Render Functions
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     className: default_1(buttonDialog_module.buttonDialog, className),
     style: style
-  }, !!title && createElement(Block, null, createElement(tmp, {
+  }, !!title && createElement(BaseBlock, null, createElement(tmp, {
     size: TEXT_SIZE.large,
     className: buttonDialog_module.title
-  }, title)), createElement(Block, null, createElement(tmp, {
+  }, title)), createElement(BaseBlock, null, createElement(tmp, {
     className: buttonDialog_module.message
-  }, message)), extraContent, createElement(Block, {
+  }, message)), extraContent, createElement(BaseBlock, {
     className: buttonDialog_module.buttonContainer
   }, buttons.map((b, i) => {
     var _a;
@@ -1153,7 +1242,7 @@ function Dialog({
   if (isClosed) {
     return null;
   }
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     className: default_1(dialog_module.dialogContainer, className),
     __allowChildren: "all",
     style: style
@@ -1161,7 +1250,7 @@ function Dialog({
     onClick: onCurtainClick,
     className: dialog_module.closeCurtain,
     interactable: closable
-  }), createElement(InlineBlock, {
+  }), createElement(BaseInlineBlock, {
     __allowChildren: "all",
     className: dialog_module.dialog
   }, Children.map(children, child => {
@@ -1213,39 +1302,6 @@ const Grow = withMemo(function Grow({
     style: style
   }, children);
 });
-;// ./src/Components/Text/heading.module.scss
-// extracted by mini-css-extract-plugin
-/* harmony default export */ const heading_module = ({"heading":"heading__oxEyT"});
-;// ./src/Components/Text/Heading.tsx
-
-
-
-
-
-function Heading({
-  children,
-  className,
-  style
-}) {
-  // Variables
-  // Refs
-  // States
-  // Selectors
-  // Callbacks
-  // Effects
-  // Other
-  // Render Functions
-  return createElement(tmp, {
-    as: "h1",
-    size: TEXT_SIZE.xxLarge,
-    prio: TEXT_PRIO.heading,
-    className: default_1(heading_module.heading, className),
-    style: style
-  }, children);
-}
-// Need HeadingMemo for autocompletion of phpstorm
-const HeadingMemo = withMemo(Heading, 'text');
-
 ;// ./src/Components/Dialog/dialogBackground.module.scss
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const dialogBackground_module = ({"dialogBackground":"dialogBackground__d53GC","title":"title___zJOu"});
@@ -1276,7 +1332,7 @@ const DialogBackground = withMemo(function DialogBackground({
   // Effects
   // Other
   // Render Functions
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     __allowChildren: "all",
     className: default_1(dialogBackground_module.dialogBackground, className),
     style: style
@@ -1285,7 +1341,7 @@ const DialogBackground = withMemo(function DialogBackground({
     className: dialogBackground_module.title
   }, !!title && createElement(Grow, null, createElement(HeadingMemo, null, title)), !!onClose && createElement(Clickable, {
     onClick: onClose
-  }, createElement(Icon, {
+  }, createElement(BaseIcon, {
     size: "lg",
     icon: faCircleXmark
   }))), children);
@@ -1353,7 +1409,7 @@ const DialogContainer = withMemo(function DialogContainer({
   // Render Functions
   return createElement(DialogProvider, {
     value: showDialog
-  }, children, createElement(Block, {
+  }, children, createElement(BaseBlock, {
     className: dialogClassName
   }, dialogs.map(d => {
     const DialogComponent = d.component;
@@ -1690,7 +1746,7 @@ function useDelayed(callback, dependencies, delay = 100, maxDelay = undefined) {
   const maxDelayTimeout = useRef(undefined);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const realCB = useCallback(callback, dependencies);
-  const func = useCallback((...newArgs) => {
+  return useCallback((...newArgs) => {
     argsRef.current = newArgs;
     const triggerFunc = () => {
       clearTimeout(mayDelayTimeoutRef.current);
@@ -1699,19 +1755,21 @@ function useDelayed(callback, dependencies, delay = 100, maxDelay = undefined) {
       maxDelayTimeout.current = undefined;
       if (argsRef.current !== undefined) {
         realCB(...argsRef.current);
+        argsRef.current = undefined;
       }
     };
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
-    timeoutRef.current = setTimeout(triggerFunc, delay);
+    timeoutRef.current = setTimeout(() => {
+      triggerFunc();
+    }, delay);
     if (maxDelay && maxDelayTimeout.current === undefined) {
       maxDelayTimeout.current = setTimeout(() => {
         triggerFunc();
       }, maxDelay);
     }
   }, [delay, maxDelay, realCB]);
-  return func;
 }
 ;// ./src/Components/Hooks/useDelayedEffect.ts
 
@@ -1941,17 +1999,238 @@ const DoubleIcon = withMemo(function DoubleIcon(_a) {
   // Effects
   // Other
   // RenderFunctions
-  return default_0.createElement(InlineBlock, {
+  return default_0.createElement(BaseInlineBlock, {
     className: icon_module.doubleIconContainer
-  }, default_0.createElement(Icon, Object.assign({}, otherProps, {
+  }, default_0.createElement(BaseIcon, Object.assign({}, otherProps, {
     color: color
-  })), default_0.createElement(Icon, {
+  })), default_0.createElement(BaseIcon, {
     icon: secondIcon,
     size: "xs",
     className: icon_module.secondIcon,
     color: secondIconColor !== null && secondIconColor !== void 0 ? secondIconColor : color
   }));
 });
+;// ./src/Components/Title/hoverTitle.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const hoverTitle_module = ({"title":"title__I36WU"});
+;// ./src/Components/Title/HoverTitle.tsx
+
+
+
+
+
+
+const HoverTitle = withMemo(function HoverTitle({
+  children,
+  baseElement,
+  isOpen,
+  onClose
+}) {
+  // Refs
+  const titleRef = useRef(null);
+  // States/Variables/Selectors
+  const [top, setTop] = useState(0);
+  const [left, setLeft] = useState(0);
+  const window = useWindow();
+  // Callbacks
+  // Effects
+  useEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+    const listener = e => {
+      var _a;
+      if (!((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        onClose();
+      }
+    };
+    window === null || window === void 0 ? void 0 : window.addEventListener('mousedown', listener, {
+      capture: true
+    });
+    window === null || window === void 0 ? void 0 : window.addEventListener('touchstart', listener, {
+      capture: true
+    });
+    return () => {
+      window === null || window === void 0 ? void 0 : window.removeEventListener('mousedown', listener, {
+        capture: true
+      });
+      window === null || window === void 0 ? void 0 : window.removeEventListener('touchstart', listener, {
+        capture: true
+      });
+    };
+  }, [isOpen, onClose, window]);
+  useClientLayoutEffect(() => {
+    if (!titleRef.current || !baseElement.current || !isOpen) {
+      return undefined;
+    }
+    const titleElement = titleRef.current;
+    const base = baseElement.current;
+    const updateInnerPositions = () => {
+      var _a, _b;
+      const computedStyleElement = base.getBoundingClientRect();
+      const computedStyleTitle = getComputedStyle(titleElement);
+      const height = Number.parseFloat(computedStyleTitle.height);
+      let newY = computedStyleElement.top - height;
+      if (newY < 0) {
+        newY = computedStyleElement.top + computedStyleElement.height;
+      }
+      setTop(Math.min((_a = window === null || window === void 0 ? void 0 : window.innerHeight) !== null && _a !== void 0 ? _a : 1600, newY));
+      const width = Number.parseFloat(computedStyleTitle.width);
+      let newX = computedStyleElement.left;
+      if (newX > ((_b = window === null || window === void 0 ? void 0 : window.innerWidth) !== null && _b !== void 0 ? _b : 0) - width) {
+        newX -= width;
+      }
+      setLeft(Math.max(0, newX));
+    };
+    const observer = new ResizeObserver(() => {
+      updateInnerPositions();
+    });
+    observer.observe(titleElement);
+    observer.observe(base);
+    updateInnerPositions();
+    return () => {
+      observer.disconnect();
+    };
+  }, [window, baseElement, isOpen]);
+  // Other
+  // RenderFunctions
+  if (!isOpen || !children) {
+    return null;
+  }
+  return default_0.createElement(BaseInlineBlock, {
+    ref: titleRef,
+    style: {
+      top,
+      left
+    },
+    className: hoverTitle_module.title
+  }, children);
+});
+;// ./src/Components/Menu/useHoverMenu.ts
+
+function useHoverMenu({
+  openToSide,
+  ref
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  const [offset, setOffset] = useState({
+    x: 0,
+    y: 0
+  });
+  // Dispatch
+  // Callbacks
+  const recalculatePosition = useCallback(() => {
+    if (!ref.current) {
+      return;
+    }
+    const {
+      top,
+      left,
+      bottom,
+      right,
+      width,
+      height
+    } = ref.current.getBoundingClientRect();
+    if (openToSide) {
+      setPosition({
+        x: right,
+        y: top
+      });
+      setOffset({
+        x: width,
+        y: -height
+      });
+    } else {
+      setPosition({
+        x: left,
+        y: bottom
+      });
+      setOffset({
+        x: -width,
+        y: height
+      });
+    }
+  }, [openToSide, ref]);
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const open = useCallback(() => {
+    recalculatePosition();
+    setIsOpen(true);
+  }, [recalculatePosition]);
+  return {
+    isOpen,
+    position,
+    open,
+    close,
+    offset
+  };
+}
+;// ./src/Components/Title/withTitle.tsx
+var withTitle_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+
+function withTitle(Comp) {
+  return withMemo(_a => {
+    var {
+        title,
+        ref
+      } = _a,
+      otherProps = withTitle_rest(_a, ["title", "ref"]);
+    const titleRef = useRef(null);
+    const composedRef = useComposedRef(titleRef, ref);
+    const titleElement = typeof title === 'string' ? default_0.createElement(tmp, {
+      size: TEXT_SIZE.small
+    }, title.trim()) : title;
+    const {
+      isOpen,
+      position,
+      offset,
+      open,
+      close
+    } = useHoverMenu({
+      ref: titleRef
+    });
+    useEffect(() => {
+      const element = titleRef.current;
+      if (!element || !title) {
+        return undefined;
+      }
+      element.addEventListener('mouseenter', open);
+      element.addEventListener('mouseleave', close);
+      return () => {
+        element.removeEventListener('mouseenter', open);
+        element.removeEventListener('mouseleave', close);
+      };
+    }, [close, open, title]);
+    return default_0.createElement(default_0.Fragment, null, default_0.createElement(Comp, Object.assign({}, otherProps, {
+      ref: composedRef
+    })), default_0.createElement(HoverTitle, {
+      baseElement: titleRef,
+      isOpen: isOpen,
+      onClose: close
+    }, titleElement));
+  });
+}
+;// ./src/Components/Icon/Icon.ts
+
+
+const Icon = withTitle(BaseIcon);
 ;// ./src/Components/Image/image.module.scss
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const image_module = ({"image":"image__L7PA6"});
@@ -2043,6 +2322,14 @@ function InViewport({
 }
 const InViewportMemo = withMemo(InViewport);
 
+;// ./src/Components/Layout/Block.ts
+
+
+const Block = withTitle(BaseBlock);
+;// ./src/Components/Layout/InlineBlock.ts
+
+
+const InlineBlock = withTitle(BaseInlineBlock);
 ;// ./src/Components/LoadingCircle/loadingCircle.module.scss
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const loadingCircle_module = ({"loadingCircle":"loadingCircle__XRvFa","spinner":"spinner__xIW3U","loadingCircleRotate":"loadingCircleRotate__DF8JT"});
@@ -2211,9 +2498,9 @@ const MenuItem = withMemo(function MenuItem(_a) {
     onMouseEnter: onMouseEnterInner,
     onMouseLeave: onMouseLeaveInner,
     __allowChildren: "all"
-  }), default_0.createElement(Block, {
+  }), default_0.createElement(BaseBlock, {
     className: default_1(menu_module.itemChildren)
-  }, !!icon && default_0.createElement(Icon, {
+  }, !!icon && default_0.createElement(BaseIcon, {
     icon: icon,
     color: iconColor,
     className: menu_module.icon
@@ -2332,7 +2619,7 @@ const Menu = withMemo(withRenderBrowserOnly(function Menu({
   }
   return createElement(Fragment, null, createPortal(createElement(MenuCloseContextProvider, {
     value: onClose
-  }, createElement(Block, {
+  }, createElement(BaseBlock, {
     className: default_1(className, menu_module.menu),
     style: Object.assign(Object.assign({}, style), {
       top: innerY,
@@ -2361,6 +2648,7 @@ const Menu = withMemo(withRenderBrowserOnly(function Menu({
 
 
 
+
 const HoverMenu = withMemo(function HoverMenu({
   children,
   items,
@@ -2373,57 +2661,22 @@ const HoverMenu = withMemo(function HoverMenu({
   // Refs
   // States/Variables/Selectors
   const hoverItemRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const [position, setPosition] = useState({
-    x: 0,
-    y: 0
-  });
-  const [offset, setOffset] = useState({
-    x: 0,
-    y: 0
+  const {
+    isOpen,
+    position,
+    offset,
+    open,
+    close
+  } = useHoverMenu({
+    ref: hoverItemRef,
+    openToSide
   });
   // Dispatch
   // Callbacks
-  const recalculatePosition = useCallback(() => {
-    if (!hoverItemRef.current) {
-      return;
-    }
-    const {
-      top,
-      left,
-      bottom,
-      right,
-      width,
-      height
-    } = hoverItemRef.current.getBoundingClientRect();
-    if (openToSide) {
-      setPosition({
-        x: right,
-        y: top
-      });
-      setOffset({
-        x: width,
-        y: -height
-      });
-    } else {
-      setPosition({
-        x: left,
-        y: bottom
-      });
-      setOffset({
-        x: -width,
-        y: height
-      });
-    }
-  }, [openToSide]);
-  const close = useCallback(() => {
-    setIsOpen(false);
+  const innerOnClose = useCallback(() => {
+    close();
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose]);
-  const open = useCallback(() => {
-    recalculatePosition();
-    setIsOpen(true);
-  }, [recalculatePosition]);
+  }, [onClose, close]);
   const onClickInner = useCallback(() => {
     if ((onClick === null || onClick === void 0 ? void 0 : onClick()) !== false) {
       open();
@@ -2434,7 +2687,7 @@ const HoverMenu = withMemo(function HoverMenu({
   // RenderFunctions
   return default_0.createElement(Clickable, {
     onMouseEnter: open,
-    onMouseLeave: close,
+    onMouseLeave: innerOnClose,
     useReactOnMouseLeave: true,
     onClick: onClickInner,
     className: default_1(menu_module.hoverMenu, {
@@ -2447,7 +2700,7 @@ const HoverMenu = withMemo(function HoverMenu({
     x: position.x,
     y: position.y,
     isOpen: true,
-    onClose: close,
+    onClose: innerOnClose,
     offsetX: offset.x,
     offsetY: offset.y,
     className: default_1({
@@ -2468,7 +2721,7 @@ const MenuDivider = withMemo(function MenuDivider() {
   // Effects
   // Other
   // RenderFunctions
-  return default_0.createElement(Block, {
+  return default_0.createElement(BaseBlock, {
     className: menu_module.divider
   });
 });
@@ -2553,13 +2806,13 @@ const Submenu = withMemo(function Submenu({
     ref: submenuRef,
     className: default_1(menu_module.itemChildren),
     horizontal: true
-  }, !!icon && default_0.createElement(Icon, {
+  }, !!icon && default_0.createElement(BaseIcon, {
     icon: icon,
     color: iconColor,
     className: menu_module.icon
-  }), default_0.createElement(Grow, null, default_0.createElement(tmp, null, label)), default_0.createElement(Icon, {
+  }), default_0.createElement(Grow, null, default_0.createElement(tmp, null, label)), default_0.createElement(BaseIcon, {
     icon: faChevronRight
-  })), default_0.createElement(Block, {
+  })), default_0.createElement(BaseBlock, {
     className: menu_module.container,
     __allowChildren: "all",
     ref: containerRef
@@ -2613,7 +2866,7 @@ function SizeCalculator({
   }, [onSize]);
   // Other
   // Render Functions
-  return createElement(InlineBlock, {
+  return createElement(BaseInlineBlock, {
     ref: ref,
     __allowChildren: "all",
     style: {
@@ -2673,7 +2926,7 @@ const Spoiler = withMemo(function Spoiler(_a) {
   // Selectors
   // Callbacks
   const onClickListener = useListener('onClick', listenerProps);
-  const toggleOpen = useCallback(ev => {
+  const toggleOpen = useCallback(_ => {
     if (open !== undefined) {
       onClickListener === null || onClickListener === void 0 ? void 0 : onClickListener(!open);
     } else {
@@ -2710,12 +2963,12 @@ const Spoiler = withMemo(function Spoiler(_a) {
     horizontal: true
   }, createElement(Grow, {
     __allowChildren: "all"
-  }, titleComponent), icon ? createElement(Icon, {
+  }, titleComponent), icon ? createElement(BaseIcon, {
     icon: icon,
     className: spoiler_module.icon
-  }) : null)), createElement(Block, {
+  }) : null)), createElement(BaseBlock, {
     className: spoiler_module.bodyContainer
-  }, createElement(Block, {
+  }, createElement(BaseBlock, {
     __allowChildren: "all",
     className: spoiler_module.body
   }, children)));
@@ -2769,7 +3022,7 @@ const SpoilerList = withMemo(function SpoilerList({
   // Effects
   // Other
   // Render Functions
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     className: default_1(className),
     style: style
   }, data.map(item => createElement(Spoiler, Object.assign({
@@ -2854,7 +3107,7 @@ function getButtonComponents(buttons, activeTab, onSelect) {
       active: isActive,
       onClickData: index,
       onClick: onSelect
-    }, createElement(Inline, null, button.icon ? createElement(Icon, {
+    }, createElement(Inline, null, button.icon ? createElement(BaseIcon, {
       icon: button.icon,
       className: tabBar_module.buttonIcon
     }) : null, button.title ? createElement(tmp, {
@@ -3218,10 +3471,10 @@ const MoreButton = withMemo(function MoreButton({
     disabled: disabled,
     className: className,
     style: style
-  }, createElement(Icon, {
+  }, createElement(BaseIcon, {
     icon: faEllipsisH,
     className: baseClasses_module.materialHidden
-  }), createElement(Icon, {
+  }), createElement(BaseIcon, {
     icon: faEllipsisV,
     className: baseClasses_module.flatHidden
   }));
@@ -3263,7 +3516,7 @@ function TopBar_getButtonComponents(buttons) {
     }
     let child = button.title;
     if (button.icon) {
-      child = createElement(Icon, {
+      child = createElement(BaseIcon, {
         icon: button.icon
       });
     }
@@ -3361,7 +3614,7 @@ const TopBar = withMemo(function TopBar(_a) {
     grow: true,
     className: default_1(topBar_module.buttonContainer, topBar_module.left),
     horizontal: true
-  }, leftButtonComponents), createElement(Block, {
+  }, leftButtonComponents), createElement(BaseBlock, {
     className: topBar_module.titleContainer
   }, createElement(tmp, {
     className: topBar_module.title
@@ -3411,7 +3664,7 @@ var Button_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-const Button = withMemo(function Button(_a) {
+const Button = withTitle(function Button(_a) {
   var {
       children,
       className,
@@ -3470,13 +3723,13 @@ const FormError = withMemo(function FormError({
     return null;
   }
   if (inline) {
-    return default_0.createElement(InlineBlock, {
+    return default_0.createElement(BaseInlineBlock, {
       className: formError_module.error
     }, default_0.createElement(tmp, {
       size: TEXT_SIZE.small
     }, error));
   }
-  return default_0.createElement(Block, {
+  return default_0.createElement(BaseBlock, {
     className: formError_module.error
   }, default_0.createElement(tmp, {
     size: TEXT_SIZE.small
@@ -3969,9 +4222,9 @@ const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
         className: default_1(fileInput_module.previewImage)
       });
     }
-    return createElement(Block, {
+    return createElement(BaseBlock, {
       className: fileInput_module.previewText
-    }, createElement(Icon, {
+    }, createElement(BaseIcon, {
       icon: faFile,
       className: fileInput_module.previewTextIcon
     }), createElement(tmp, null, file.name));
@@ -4003,7 +4256,7 @@ const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
       className: fileInput_module.previewRemove,
       onClick: removeFile,
       onClickData: index
-    }, createElement(Icon, {
+    }, createElement(BaseIcon, {
       icon: faTimesCircle
     }))));
   }), createElement(Grow, {
@@ -4018,7 +4271,7 @@ const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
     onDropData: maxFiles,
     onClick: clickOnFile,
     __allowChildren: "html"
-  }, createElement(Icon, {
+  }, createElement(BaseIcon, {
     icon: faPlus
   }), createElement("input", Object.assign({}, props, {
     ref: inputRef,
@@ -4486,7 +4739,7 @@ const PasswordInput = withMemo(function PasswordInput(_a) {
     onClick: toggleVisible,
     className: passwordInput_module.showButton,
     interactable: false
-  }, default_0.createElement(Icon, {
+  }, default_0.createElement(BaseIcon, {
     icon: isVisible ? faEye : faEyeSlash
   })));
 });
@@ -5014,7 +5267,7 @@ const SearchSelectInput = withMemo(function SearchSelectInput({
     if (!option) {
       return null;
     }
-    const element = (_a = renderSelectedOption === null || renderSelectedOption === void 0 ? void 0 : renderSelectedOption(option)) !== null && _a !== void 0 ? _a : createElement(InlineBlock, {
+    const element = (_a = renderSelectedOption === null || renderSelectedOption === void 0 ? void 0 : renderSelectedOption(option)) !== null && _a !== void 0 ? _a : createElement(BaseInlineBlock, {
       className: seachSelectInput_module.tag
     }, createElement(tmp, {
       size: TEXT_SIZE.xSmall
@@ -5031,7 +5284,7 @@ const SearchSelectInput = withMemo(function SearchSelectInput({
   const renderSelectableOption = (opt, index) => {
     var _a;
     const isActive = index === selectedIndex;
-    const element = (_a = renderSelectableOptions === null || renderSelectableOptions === void 0 ? void 0 : renderSelectableOptions(opt, isActive, index, selectedIndex)) !== null && _a !== void 0 ? _a : createElement(Block, {
+    const element = (_a = renderSelectableOptions === null || renderSelectableOptions === void 0 ? void 0 : renderSelectableOptions(opt, isActive, index, selectedIndex)) !== null && _a !== void 0 ? _a : createElement(BaseBlock, {
       className: default_1(seachSelectInput_module.selectableOption, {
         [seachSelectInput_module.active]: index === selectedIndex
       })
@@ -5054,7 +5307,7 @@ const SearchSelectInput = withMemo(function SearchSelectInput({
     }, label) : null, createElement(Flex, {
       className: seachSelectInput_module.inputContainer,
       horizontal: true
-    }, createElement(InlineBlock, null, values.map(renderOption)), createElement(Grow, {
+    }, createElement(BaseInlineBlock, null, values.map(renderOption)), createElement(Grow, {
       __allowChildren: "html"
     }, createElement("input", {
       ref: inputRef,
@@ -5065,7 +5318,7 @@ const SearchSelectInput = withMemo(function SearchSelectInput({
       onChange: onChange,
       onKeyDown: onKeyPress,
       onFocus: onFocus
-    }))), createElement(InlineBlock, {
+    }))), createElement(BaseInlineBlock, {
       className: seachSelectInput_module.selectableOptionContainer,
       style: suggestionsPosition
     }, selectableOptions.map(renderSelectableOption)))
@@ -5103,7 +5356,7 @@ const Grid = withMemo(function Grid({
   // Effects
   // Other
   // Render Functions
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     ref: ref,
     style: appliedStyle,
     className: default_1(grid_module.grid, className, {
@@ -5226,7 +5479,7 @@ function GridItem({
   // Effects
   // Other
   // Render Functions
-  return createElement(InlineBlock, {
+  return createElement(BaseInlineBlock, {
     style: style,
     className: default_1(...classes.map(name => grid_module[name]), grid_module.item, className),
     __allowChildren: __allowChildren
@@ -5352,6 +5605,13 @@ const GridItemMemo = withMemo(GridItem);
 
 
 
-export { ActionSheet, AlertDialog, Block, BreakpointNames, Breakpoints, Button, ButtonDialogMemo as ButtonDialog, ButtonType, CONTAINER_CLASSES, Card, Characters, Checkbox, Clickable, ColorInput, ColorInputController, ConfirmDialog, Container, DialogMemo as Dialog, DialogBackground, DialogContainer, DialogProvider, DoubleIcon, DragItemMemo as DragItem, DropArea, FileInput, FileInputController, Flavor, Flex, FormError, FullScreen, Grid, GridItemMemo as GridItem, Grow, HeadingMemo as Heading, HiddenInput, HookForm, HoverMenu, Icon, Image, InViewportMemo as InViewport, Inline, InlineBlock, Input, InputController, LoadingArea, LoadingCircle, MENU_CONTAINER_CLASS, Menu, MenuCloseContextProvider, MenuDivider, MenuItem, MoreButton, MultipleFileInput, MultipleFileInputController, PasswordInput, PasswordInputController, RESTRICT_CHILDREN, SearchSelectInput, Select, SelectController, SendFormContext, Size, SizeCalculatorMemo as SizeCalculator, Slider, SliderController, Spoiler, SpoilerList, Submenu, Switch, SwitchController, TEXT_PRIO, TEXT_SIZE, TabBar, TabBarButton, Table_tmp as Table, tmp as Text, Textarea, TextareaController, Toast, ToastContainerMemo as ToastContainer, ToastContext, TopBar, TopBarButton, View, ViewWithoutListeners, WindowContext, WrongChildError, memoComparator, nonEmptyString, treeshakeTest, useAlertDialog, useBreakpoint, useBreakpointSelect, useClientLayoutEffect, useComposedRef, useConfirmDialog, useDebounced, useDeepShallow, useDelayed, useDelayedEffect, useDelayedState, useDialog, useInViewport, useKeyListener, useKeyPressed, useKeyUpListener, useListener, useListenerWithExtractedProps, useMenu, useMenuClose, useMousePosition, useOnChangeDone, useOnMount, useOnce, useRerender, useSendFormContext, useSharedSelectedColor, useSpoilerGroup, useStrictEnabled, useToast, useWindow, useWindowDimensions, useYupResolver, withHookController, withMemo, withRenderBrowserOnly, withRestrictedChildren };
+
+
+
+
+
+
+
+export { ActionSheet, AlertDialog, BaseBlock, BaseIcon, BaseInlineBlock, Block, BreakpointNames, Breakpoints, Button, ButtonDialogMemo as ButtonDialog, ButtonType, CONTAINER_CLASSES, Card, Characters, Checkbox, Clickable, ColorInput, ColorInputController, ConfirmDialog, Container, DialogMemo as Dialog, DialogBackground, DialogContainer, DialogProvider, DoubleIcon, DragItemMemo as DragItem, DropArea, ErrorBoundary, FileInput, FileInputController, Flavor, Flex, FormError, FullScreen, Grid, GridItemMemo as GridItem, Grow, HeadingMemo as Heading, HiddenInput, HookForm, HoverMenu, HoverTitle, Icon, Image, InViewportMemo as InViewport, Inline, InlineBlock, Input, InputController, LoadingArea, LoadingCircle, MENU_CONTAINER_CLASS, Menu, MenuCloseContextProvider, MenuDivider, MenuItem, MoreButton, MultipleFileInput, MultipleFileInputController, PasswordInput, PasswordInputController, RESTRICT_CHILDREN, SearchSelectInput, Select, SelectController, SendFormContext, Size, SizeCalculatorMemo as SizeCalculator, Slider, SliderController, Spoiler, SpoilerList, Submenu, Switch, SwitchController, TEXT_PRIO, TEXT_SIZE, TabBar, TabBarButton, Table_tmp as Table, tmp as Text, Textarea, TextareaController, Toast, ToastContainerMemo as ToastContainer, ToastContext, TopBar, TopBarButton, View, ViewWithoutListeners, WindowContext, WrongChildError, memoComparator, nonEmptyString, treeshakeTest, useAlertDialog, useBreakpoint, useBreakpointSelect, useClientLayoutEffect, useComposedRef, useConfirmDialog, useDebounced, useDeepShallow, useDelayed, useDelayedEffect, useDelayedState, useDialog, useHoverMenu, useInViewport, useKeyListener, useKeyPressed, useKeyUpListener, useListener, useListenerWithExtractedProps, useMenu, useMenuClose, useMousePosition, useOnChangeDone, useOnMount, useOnce, useRerender, useSendFormContext, useSharedSelectedColor, useSpoilerGroup, useStrictEnabled, useToast, useWindow, useWindowDimensions, useYupResolver, withHookController, withMemo, withRenderBrowserOnly, withRestrictedChildren, withTitle };
 
 //# sourceMappingURL=index.js.map