@allxsmith/bestax-bulma 2.1.2 → 2.2.0

package/dist/index.esm.js

@@ -1,436 +1,10 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { createContext, useContext, useMemo, useState, useRef, useEffect, forwardRef } from 'react';
 
-var jsxRuntime = {exports: {}};
-
-var reactJsxRuntime_production = {};
-
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_production;
-
-function requireReactJsxRuntime_production () {
-	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
-	hasRequiredReactJsxRuntime_production = 1;
-	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-	function jsxProd(type, config, maybeKey) {
-	  var key = null;
-	  void 0 !== maybeKey && (key = "" + maybeKey);
-	  void 0 !== config.key && (key = "" + config.key);
-	  if ("key" in config) {
-	    maybeKey = {};
-	    for (var propName in config)
-	      "key" !== propName && (maybeKey[propName] = config[propName]);
-	  } else maybeKey = config;
-	  config = maybeKey.ref;
-	  return {
-	    $$typeof: REACT_ELEMENT_TYPE,
-	    type: type,
-	    key: key,
-	    ref: void 0 !== config ? config : null,
-	    props: maybeKey
-	  };
-	}
-	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
-	reactJsxRuntime_production.jsx = jsxProd;
-	reactJsxRuntime_production.jsxs = jsxProd;
-	return reactJsxRuntime_production;
-}
-
-var reactJsxRuntime_development = {};
-
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_development;
-
-function requireReactJsxRuntime_development () {
-	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-	hasRequiredReactJsxRuntime_development = 1;
-	"production" !== process.env.NODE_ENV &&
-	  (function () {
-	    function getComponentNameFromType(type) {
-	      if (null == type) return null;
-	      if ("function" === typeof type)
-	        return type.$$typeof === REACT_CLIENT_REFERENCE
-	          ? null
-	          : type.displayName || type.name || null;
-	      if ("string" === typeof type) return type;
-	      switch (type) {
-	        case REACT_FRAGMENT_TYPE:
-	          return "Fragment";
-	        case REACT_PROFILER_TYPE:
-	          return "Profiler";
-	        case REACT_STRICT_MODE_TYPE:
-	          return "StrictMode";
-	        case REACT_SUSPENSE_TYPE:
-	          return "Suspense";
-	        case REACT_SUSPENSE_LIST_TYPE:
-	          return "SuspenseList";
-	        case REACT_ACTIVITY_TYPE:
-	          return "Activity";
-	      }
-	      if ("object" === typeof type)
-	        switch (
-	          ("number" === typeof type.tag &&
-	            console.error(
-	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-	            ),
-	          type.$$typeof)
-	        ) {
-	          case REACT_PORTAL_TYPE:
-	            return "Portal";
-	          case REACT_CONTEXT_TYPE:
-	            return (type.displayName || "Context") + ".Provider";
-	          case REACT_CONSUMER_TYPE:
-	            return (type._context.displayName || "Context") + ".Consumer";
-	          case REACT_FORWARD_REF_TYPE:
-	            var innerType = type.render;
-	            type = type.displayName;
-	            type ||
-	              ((type = innerType.displayName || innerType.name || ""),
-	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
-	            return type;
-	          case REACT_MEMO_TYPE:
-	            return (
-	              (innerType = type.displayName || null),
-	              null !== innerType
-	                ? innerType
-	                : getComponentNameFromType(type.type) || "Memo"
-	            );
-	          case REACT_LAZY_TYPE:
-	            innerType = type._payload;
-	            type = type._init;
-	            try {
-	              return getComponentNameFromType(type(innerType));
-	            } catch (x) {}
-	        }
-	      return null;
-	    }
-	    function testStringCoercion(value) {
-	      return "" + value;
-	    }
-	    function checkKeyStringCoercion(value) {
-	      try {
-	        testStringCoercion(value);
-	        var JSCompiler_inline_result = !1;
-	      } catch (e) {
-	        JSCompiler_inline_result = true;
-	      }
-	      if (JSCompiler_inline_result) {
-	        JSCompiler_inline_result = console;
-	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
-	        var JSCompiler_inline_result$jscomp$0 =
-	          ("function" === typeof Symbol &&
-	            Symbol.toStringTag &&
-	            value[Symbol.toStringTag]) ||
-	          value.constructor.name ||
-	          "Object";
-	        JSCompiler_temp_const.call(
-	          JSCompiler_inline_result,
-	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-	          JSCompiler_inline_result$jscomp$0
-	        );
-	        return testStringCoercion(value);
-	      }
-	    }
-	    function getTaskName(type) {
-	      if (type === REACT_FRAGMENT_TYPE) return "<>";
-	      if (
-	        "object" === typeof type &&
-	        null !== type &&
-	        type.$$typeof === REACT_LAZY_TYPE
-	      )
-	        return "<...>";
-	      try {
-	        var name = getComponentNameFromType(type);
-	        return name ? "<" + name + ">" : "<...>";
-	      } catch (x) {
-	        return "<...>";
-	      }
-	    }
-	    function getOwner() {
-	      var dispatcher = ReactSharedInternals.A;
-	      return null === dispatcher ? null : dispatcher.getOwner();
-	    }
-	    function UnknownOwner() {
-	      return Error("react-stack-top-frame");
-	    }
-	    function hasValidKey(config) {
-	      if (hasOwnProperty.call(config, "key")) {
-	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
-	        if (getter && getter.isReactWarning) return false;
-	      }
-	      return void 0 !== config.key;
-	    }
-	    function defineKeyPropWarningGetter(props, displayName) {
-	      function warnAboutAccessingKey() {
-	        specialPropKeyWarningShown ||
-	          ((specialPropKeyWarningShown = true),
-	          console.error(
-	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-	            displayName
-	          ));
-	      }
-	      warnAboutAccessingKey.isReactWarning = true;
-	      Object.defineProperty(props, "key", {
-	        get: warnAboutAccessingKey,
-	        configurable: true
-	      });
-	    }
-	    function elementRefGetterWithDeprecationWarning() {
-	      var componentName = getComponentNameFromType(this.type);
-	      didWarnAboutElementRef[componentName] ||
-	        ((didWarnAboutElementRef[componentName] = true),
-	        console.error(
-	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-	        ));
-	      componentName = this.props.ref;
-	      return void 0 !== componentName ? componentName : null;
-	    }
-	    function ReactElement(
-	      type,
-	      key,
-	      self,
-	      source,
-	      owner,
-	      props,
-	      debugStack,
-	      debugTask
-	    ) {
-	      self = props.ref;
-	      type = {
-	        $$typeof: REACT_ELEMENT_TYPE,
-	        type: type,
-	        key: key,
-	        props: props,
-	        _owner: owner
-	      };
-	      null !== (void 0 !== self ? self : null)
-	        ? Object.defineProperty(type, "ref", {
-	            enumerable: false,
-	            get: elementRefGetterWithDeprecationWarning
-	          })
-	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
-	      type._store = {};
-	      Object.defineProperty(type._store, "validated", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: 0
-	      });
-	      Object.defineProperty(type, "_debugInfo", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: null
-	      });
-	      Object.defineProperty(type, "_debugStack", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugStack
-	      });
-	      Object.defineProperty(type, "_debugTask", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugTask
-	      });
-	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
-	      return type;
-	    }
-	    function jsxDEVImpl(
-	      type,
-	      config,
-	      maybeKey,
-	      isStaticChildren,
-	      source,
-	      self,
-	      debugStack,
-	      debugTask
-	    ) {
-	      var children = config.children;
-	      if (void 0 !== children)
-	        if (isStaticChildren)
-	          if (isArrayImpl(children)) {
-	            for (
-	              isStaticChildren = 0;
-	              isStaticChildren < children.length;
-	              isStaticChildren++
-	            )
-	              validateChildKeys(children[isStaticChildren]);
-	            Object.freeze && Object.freeze(children);
-	          } else
-	            console.error(
-	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-	            );
-	        else validateChildKeys(children);
-	      if (hasOwnProperty.call(config, "key")) {
-	        children = getComponentNameFromType(type);
-	        var keys = Object.keys(config).filter(function (k) {
-	          return "key" !== k;
-	        });
-	        isStaticChildren =
-	          0 < keys.length
-	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
-	            : "{key: someKey}";
-	        didWarnAboutKeySpread[children + isStaticChildren] ||
-	          ((keys =
-	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
-	          console.error(
-	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
-	            isStaticChildren,
-	            children,
-	            keys,
-	            children
-	          ),
-	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
-	      }
-	      children = null;
-	      void 0 !== maybeKey &&
-	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
-	      hasValidKey(config) &&
-	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
-	      if ("key" in config) {
-	        maybeKey = {};
-	        for (var propName in config)
-	          "key" !== propName && (maybeKey[propName] = config[propName]);
-	      } else maybeKey = config;
-	      children &&
-	        defineKeyPropWarningGetter(
-	          maybeKey,
-	          "function" === typeof type
-	            ? type.displayName || type.name || "Unknown"
-	            : type
-	        );
-	      return ReactElement(
-	        type,
-	        children,
-	        self,
-	        source,
-	        getOwner(),
-	        maybeKey,
-	        debugStack,
-	        debugTask
-	      );
-	    }
-	    function validateChildKeys(node) {
-	      "object" === typeof node &&
-	        null !== node &&
-	        node.$$typeof === REACT_ELEMENT_TYPE &&
-	        node._store &&
-	        (node._store.validated = 1);
-	    }
-	    var React$1 = React,
-	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
-	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
-	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
-	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
-	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
-	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
-	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
-	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
-	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
-	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
-	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
-	      ReactSharedInternals =
-	        React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
-	      hasOwnProperty = Object.prototype.hasOwnProperty,
-	      isArrayImpl = Array.isArray,
-	      createTask = console.createTask
-	        ? console.createTask
-	        : function () {
-	            return null;
-	          };
-	    React$1 = {
-	      "react-stack-bottom-frame": function (callStackForError) {
-	        return callStackForError();
-	      }
-	    };
-	    var specialPropKeyWarningShown;
-	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React$1["react-stack-bottom-frame"].bind(
-	      React$1,
-	      UnknownOwner
-	    )();
-	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
-	    var didWarnAboutKeySpread = {};
-	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-	    reactJsxRuntime_development.jsx = function (type, config, maybeKey, source, self) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        false,
-	        source,
-	        self,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey, source, self) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        true,
-	        source,
-	        self,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	  })();
-	return reactJsxRuntime_development;
-}
-
-var hasRequiredJsxRuntime;
-
-function requireJsxRuntime () {
-	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
-	hasRequiredJsxRuntime = 1;
-
-	if (process.env.NODE_ENV === 'production') {
-	  jsxRuntime.exports = requireReactJsxRuntime_production();
-	} else {
-	  jsxRuntime.exports = requireReactJsxRuntime_development();
-	}
-	return jsxRuntime.exports;
-}
-
-var jsxRuntimeExports = requireJsxRuntime();
-
 const ConfigContext = createContext({});
 const useConfig = () => useContext(ConfigContext);
-const ConfigProvider = ({ classPrefix, children, }) => {
-    return (jsxRuntimeExports.jsx(ConfigContext.Provider, { value: { classPrefix }, children: children }));
+const ConfigProvider = ({ classPrefix, iconLibrary, children, }) => {
+    return (jsx(ConfigContext.Provider, { value: { classPrefix, iconLibrary }, children: children }));
 };
 const useClassPrefix = () => {
     const { classPrefix } = useConfig();
@@ -440,6 +14,10 @@ const usePrefixedClass = () => {
     const { classPrefix } = useConfig();
     return (className) => classPrefix ? `${classPrefix}${className}` : className;
 };
+const useIconLibrary = () => {
+    const { iconLibrary } = useConfig();
+    return iconLibrary;
+};
 
 function classNames(...args) {
     const classSet = new Set();
@@ -943,7 +521,7 @@ const Column = ({ className, textColor, color: _fieldColor, bgColor, size, sizeM
         'is-narrow-fullhd': !!isNarrowFullhd,
     });
     const columnClasses = classNames(mainClass, columnSpecificClasses, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("div", { className: columnClasses, ...rest, children: children }));
+    return (jsx("div", { className: columnClasses, ...rest, children: children }));
 };
 
 const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered, isGapless, isMultiline, isVCentered, isMobile, isDesktop, gapSize, gapSizeMobile, gapSizeTablet, gapSizeDesktop, gapSizeWidescreen, gapSizeFullhd, children, ...props }) => {
@@ -968,7 +546,7 @@ const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered
         'is-desktop': !!isDesktop,
     });
     const columnsClasses = classNames(mainClass, gapClasses, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("div", { className: columnsClasses, ...rest, children: children }));
+    return (jsx("div", { className: columnsClasses, ...rest, children: children }));
 };
 
 const validBreadcrumbAlignments = ['centered', 'right'];
@@ -987,14 +565,14 @@ const Breadcrumb = ({ className, alignment, separator, size, children, ...props
         [`is-${size}`]: size && validBreadcrumbSizes.includes(size),
     });
     const breadcrumbClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("nav", { className: breadcrumbClasses, "aria-label": "breadcrumbs", ...rest, children: jsxRuntimeExports.jsx("ul", { children: children }) }));
+    return (jsx("nav", { className: breadcrumbClasses, "aria-label": "breadcrumbs", ...rest, children: jsx("ul", { children: children }) }));
 };
 
 const renderFooter = (footer) => {
     if (!footer)
         return null;
     const items = Array.isArray(footer) ? footer : [footer];
-    return items.map((item, idx) => (jsxRuntimeExports.jsx("span", { className: "card-footer-item", children: item }, idx)));
+    return items.map((item, idx) => (jsx("span", { className: "card-footer-item", children: item }, idx)));
 };
 const hasCompoundComponents = (children) => {
     return React.Children.toArray(children).some(child => {
@@ -1021,33 +599,33 @@ const CardComponent = ({ className, children, textColor, bgColor, hasShadow = tr
     const renderHeader = (header, headerIcon, headerCentered) => {
         if (!header && !headerIcon)
             return null;
-        return (jsxRuntimeExports.jsxs("header", { className: "card-header", children: [header && (jsxRuntimeExports.jsx("div", { className: classNames('card-header-title', {
+        return (jsxs("header", { className: "card-header", children: [header && (jsx("div", { className: classNames('card-header-title', {
                         'is-centered': headerCentered,
                     }), children: header })), headerIcon] }));
     };
-    return (jsxRuntimeExports.jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered), image && (jsxRuntimeExports.jsx("div", { className: "card-image", children: typeof image === 'string' ? (jsxRuntimeExports.jsx("figure", { className: "image", children: jsxRuntimeExports.jsx("img", { src: image, alt: imageAlt !== null && imageAlt !== void 0 ? imageAlt : 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
+    return (jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered), image && (jsx("div", { className: "card-image", children: typeof image === 'string' ? (jsx("figure", { className: "image", children: jsx("img", { src: image, alt: imageAlt !== null && imageAlt !== void 0 ? imageAlt : 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
                 children !== null &&
                 children !== '' &&
-                !hasCompoundComponents(children) && (jsxRuntimeExports.jsx("div", { className: "card-content", children: children })), typeof children !== 'undefined' &&
+                !hasCompoundComponents(children) && (jsx("div", { className: "card-content", children: children })), typeof children !== 'undefined' &&
                 children !== null &&
                 children !== '' &&
                 hasCompoundComponents(children) &&
-                children, footer && (jsxRuntimeExports.jsx("footer", { className: "card-footer", children: renderFooter(footer) }))] }));
+                children, footer && (jsx("footer", { className: "card-footer", children: renderFooter(footer) }))] }));
 };
 const CardHeader = ({ className, children, centered, ...props }) => {
     const hasHeaderTitle = React.Children.toArray(children).some(child => React.isValidElement(child) &&
         typeof child.type === 'function' &&
         child.type === CardHeaderTitle);
-    return (jsxRuntimeExports.jsx("header", { className: classNames('card-header', className), ...props, children: hasHeaderTitle ? (children) : (jsxRuntimeExports.jsx("div", { className: classNames('card-header-title', {
+    return (jsx("header", { className: classNames('card-header', className), ...props, children: hasHeaderTitle ? (children) : (jsx("div", { className: classNames('card-header-title', {
                 'is-centered': centered,
             }), children: children })) }));
 };
-const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('card-header-title', { 'is-centered': centered }, className), ...props, children: children }));
-const CardHeaderIcon = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("button", { className: classNames('card-header-icon', className), "aria-label": props['aria-label'] || 'more options', ...props, children: children }));
-const CardImage = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('card-image', className), ...props, children: children }));
-const CardContent = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('card-content', className), ...props, children: children }));
-const CardFooter = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("footer", { className: classNames('card-footer', className), ...props, children: children }));
-const CardFooterItem = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("span", { className: classNames('card-footer-item', className), ...props, children: children }));
+const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsx("div", { className: classNames('card-header-title', { 'is-centered': centered }, className), ...props, children: children }));
+const CardHeaderIcon = ({ className, children, ...props }) => (jsx("button", { className: classNames('card-header-icon', className), "aria-label": props['aria-label'] || 'more options', ...props, children: children }));
+const CardImage = ({ className, children, ...props }) => (jsx("div", { className: classNames('card-image', className), ...props, children: children }));
+const CardContent = ({ className, children, ...props }) => (jsx("div", { className: classNames('card-content', className), ...props, children: children }));
+const CardFooter = ({ className, children, ...props }) => (jsx("footer", { className: classNames('card-footer', className), ...props, children: children }));
+const CardFooterItem = ({ className, children, ...props }) => (jsx("span", { className: classNames('card-footer-item', className), ...props, children: children }));
 const CardWithSubComponents = CardComponent;
 const CardHeaderWithTitle = CardHeader;
 CardHeaderWithTitle.Title = CardHeaderTitle;
@@ -1105,13 +683,13 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
         }
     };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntimeExports.jsx("div", { className: "dropdown-trigger", children: jsxRuntimeExports.jsxs("button", { className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx("span", { className: "icon is-small", "aria-hidden": "true", children: jsxRuntimeExports.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntimeExports.jsx("div", { className: classNames('dropdown-menu', menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsxRuntimeExports.jsx("div", { className: "dropdown-content", onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
+    return (jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsx("div", { className: "dropdown-trigger", children: jsxs("button", { className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsx("span", { children: label }), jsx("span", { className: "icon is-small", "aria-hidden": "true", children: jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsx("div", { className: classNames('dropdown-menu', menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsx("div", { className: "dropdown-content", onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
 };
 const DropdownItem = ({ children, active, className, as: Component = 'a', ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx(Component, { className: classNames('dropdown-item', bulmaHelperClasses, { 'is-active': active }, className), tabIndex: 0, role: "menuitem", "data-testid": "dropdown-item", ...rest, children: children }));
+    return (jsx(Component, { className: classNames('dropdown-item', bulmaHelperClasses, { 'is-active': active }, className), tabIndex: 0, role: "menuitem", "data-testid": "dropdown-item", ...rest, children: children }));
 };
-const DropdownDivider = () => (jsxRuntimeExports.jsx("hr", { className: "dropdown-divider" }));
+const DropdownDivider = () => (jsx("hr", { className: "dropdown-divider" }));
 const Dropdown = Object.assign(DropdownComponent, {
     Item: DropdownItem,
     Divider: DropdownDivider,
@@ -1121,11 +699,11 @@ const MenuListLevelContext = createContext(0);
 const MenuComponent = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const bulmaClasses = usePrefixedClassNames('menu');
-    return (jsxRuntimeExports.jsx("aside", { className: classNames(bulmaClasses, bulmaHelperClasses, className), ...rest, children: children }));
+    return (jsx("aside", { className: classNames(bulmaClasses, bulmaHelperClasses, className), ...rest, children: children }));
 };
 const MenuLabel = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("p", { className: classNames('menu-label', className, bulmaHelperClasses), ...rest, children: children }));
+    return (jsx("p", { className: classNames('menu-label', className, bulmaHelperClasses), ...rest, children: children }));
 };
 const MenuList = ({ className, children, ...props }) => {
     const level = useContext(MenuListLevelContext);
@@ -1133,7 +711,7 @@ const MenuList = ({ className, children, ...props }) => {
     const ulClass = classNames(className, bulmaHelperClasses, {
         'menu-list': level === 0,
     });
-    return (jsxRuntimeExports.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntimeExports.jsx("ul", { className: ulClass, ...rest, children: children }) }));
+    return (jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsx("ul", { className: ulClass, ...rest, children: children }) }));
 };
 const MenuItem = ({ className, children, active, href, as: Component = 'a', 'data-testid': testId, ...rest }) => {
     const { bulmaHelperClasses, rest: bulmaRest } = useBulmaClasses(rest);
@@ -1155,7 +733,7 @@ const MenuItem = ({ className, children, active, href, as: Component = 'a', 'dat
     if (Object.prototype.hasOwnProperty.call(rest, 'to')) {
         linkProps.to = rest.to;
     }
-    return (jsxRuntimeExports.jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsxRuntimeExports.jsx(Component, { className: itemClass, ...linkProps, children: labelChildren }), nestedMenuLists] }));
+    return (jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsx(Component, { className: itemClass, ...linkProps, children: labelChildren }), nestedMenuLists] }));
 };
 const Menu = Object.assign(MenuComponent, {
     Label: MenuLabel,
@@ -1174,10 +752,10 @@ const MessageComponent = ({ className, title, textColor, color, bgColor, onClose
     });
     const deleteClass = usePrefixedClassNames('delete');
     const messageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxRuntimeExports.jsxs("div", { className: "message-header", children: [title && jsxRuntimeExports.jsx("span", { children: title }), onClose && (jsxRuntimeExports.jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsxRuntimeExports.jsx("div", { className: "message-body", "data-testid": "message-body", children: children }))] }));
+    return (jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxs("div", { className: "message-header", children: [title && jsx("span", { children: title }), onClose && (jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsx("div", { className: "message-body", "data-testid": "message-body", children: children }))] }));
 };
-const MessageHeader = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('message-header', className), ...props, children: children }));
-const MessageBody = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('message-body', className), ...props, children: children }));
+const MessageHeader = ({ className, children, ...props }) => (jsx("div", { className: classNames('message-header', className), ...props, children: children }));
+const MessageBody = ({ className, children, ...props }) => (jsx("div", { className: classNames('message-body', className), ...props, children: children }));
 const MessageWithSubComponents = MessageComponent;
 MessageWithSubComponents.Header = MessageHeader;
 MessageWithSubComponents.Body = MessageBody;
@@ -1200,7 +778,7 @@ const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCa
     });
     const deleteClass = usePrefixedClassNames('delete');
     const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsxRuntimeExports.jsx("div", { className: "modal-background", onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxRuntimeExports.jsxs("div", { className: "modal-card", children: [modalCardTitle && (jsxRuntimeExports.jsxs("header", { className: "modal-card-head", children: [jsxRuntimeExports.jsx("p", { className: "modal-card-title", children: modalCardTitle }), onClose && (jsxRuntimeExports.jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsxRuntimeExports.jsx("section", { className: "modal-card-body", "data-testid": "modal-body", children: children }), modalCardFoot && (jsxRuntimeExports.jsx("footer", { className: "modal-card-foot", children: modalCardFoot }))] })) : (jsxRuntimeExports.jsx("div", { className: "modal-content", "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsxRuntimeExports.jsx("button", { className: "modal-close is-large", "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
+    return (jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsx("div", { className: "modal-background", onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: "modal-card", children: [modalCardTitle && (jsxs("header", { className: "modal-card-head", children: [jsx("p", { className: "modal-card-title", children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: "modal-card-body", "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: "modal-card-foot", children: modalCardFoot }))] })) : (jsx("div", { className: "modal-content", "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: "modal-close is-large", "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
 };
 
 const Navbar = ({ className, textColor, bgColor, color, transparent, fixed, children, ...props }) => {
@@ -1215,14 +793,14 @@ const Navbar = ({ className, textColor, bgColor, color, transparent, fixed, chil
         [`is-fixed-${fixed}`]: fixed,
     });
     const navbarClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("nav", { className: navbarClasses, role: "navigation", "aria-label": "main navigation", ...rest, children: children }));
+    return (jsx("nav", { className: navbarClasses, role: "navigation", "aria-label": "main navigation", ...rest, children: children }));
 };
 const NavbarBrand = ({ className, children, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('navbar-brand', bulmaHelperClasses, className), ...rest, children: children }));
+    return (jsx("div", { className: classNames('navbar-brand', bulmaHelperClasses, className), ...rest, children: children }));
 };
 const NavbarItem = ({ className, as: Component = 'a', active, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -1230,7 +808,7 @@ const NavbarItem = ({ className, as: Component = 'a', active, textColor, bgColor
         backgroundColor: bgColor,
         ...props,
     });
-    return (jsxRuntimeExports.jsx(Component, { className: classNames('navbar-item', bulmaHelperClasses, className, {
+    return (jsx(Component, { className: classNames('navbar-item', bulmaHelperClasses, className, {
             'is-active': active,
         }), ...rest, children: children }));
 };
@@ -1239,15 +817,15 @@ const NavbarBurger = ({ className, active, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    return (jsxRuntimeExports.jsxs("button", { type: "button", className: classNames('navbar-burger', bulmaHelperClasses, className, {
+    return (jsxs("button", { type: "button", className: classNames('navbar-burger', bulmaHelperClasses, className, {
             'is-active': active,
-        }), "aria-label": props['aria-label'] || 'menu', "aria-expanded": (_a = props['aria-expanded']) !== null && _a !== void 0 ? _a : !!active, ...rest, children: [jsxRuntimeExports.jsx("span", { "aria-hidden": "true" }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true" }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true" }), children] }));
+        }), "aria-label": props['aria-label'] || 'menu', "aria-expanded": (_a = props['aria-expanded']) !== null && _a !== void 0 ? _a : !!active, ...rest, children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), children] }));
 };
 const NavbarMenu = ({ className, active, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('navbar-menu', bulmaHelperClasses, className, {
+    return (jsx("div", { className: classNames('navbar-menu', bulmaHelperClasses, className, {
             'is-active': active,
         }), ...rest, children: children }));
 };
@@ -1255,25 +833,25 @@ const NavbarStart = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('navbar-start', bulmaHelperClasses, className), ...rest, children: children }));
+    return (jsx("div", { className: classNames('navbar-start', bulmaHelperClasses, className), ...rest, children: children }));
 };
 const NavbarEnd = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('navbar-end', bulmaHelperClasses, className), ...rest, children: children }));
+    return (jsx("div", { className: classNames('navbar-end', bulmaHelperClasses, className), ...rest, children: children }));
 };
-const NavbarDropdown = ({ className, right, up, hoverable, active, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('navbar-item', 'has-dropdown', {
+const NavbarDropdown = ({ className, right, up, hoverable, active, children, ...props }) => (jsx("div", { className: classNames('navbar-item', 'has-dropdown', {
         'is-right': right,
         'is-up': up,
         'is-hoverable': hoverable,
         'is-active': active,
     }, className), ...props, children: children }));
-const NavbarDropdownMenu = ({ className, right, up, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('navbar-dropdown', {
+const NavbarDropdownMenu = ({ className, right, up, children, ...props }) => (jsx("div", { className: classNames('navbar-dropdown', {
         'is-right': right,
         'is-up': up,
     }, className), ...props, children: children }));
-const NavbarDivider = props => jsxRuntimeExports.jsx("hr", { className: "navbar-divider", ...props });
+const NavbarDivider = props => jsx("hr", { className: "navbar-divider", ...props });
 Navbar.Brand = NavbarBrand;
 Navbar.Item = NavbarItem;
 Navbar.Burger = NavbarBurger;
@@ -1284,7 +862,7 @@ Navbar.Dropdown = NavbarDropdown;
 Navbar.DropdownMenu = NavbarDropdownMenu;
 Navbar.Divider = NavbarDivider;
 
-const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsxRuntimeExports.jsx("a", { className: classNames('pagination-previous', className, {
+const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames('pagination-previous', className, {
         'is-disabled': disabled,
     }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
         ? e => {
@@ -1292,7 +870,7 @@ const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx
             e.stopPropagation();
         }
         : props.onClick, children: children }));
-const PaginationNext = ({ className, disabled, children, ...props }) => (jsxRuntimeExports.jsx("a", { className: classNames('pagination-next', className, {
+const PaginationNext = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames('pagination-next', className, {
         'is-disabled': disabled,
     }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
         ? e => {
@@ -1313,7 +891,7 @@ const Pagination = ({ color, textColor, bgColor, size, align, rounded, className
         'is-rounded': rounded,
     });
     const paginationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: children }));
+    return (jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: children }));
 };
 const PaginationList = ({ className, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -1321,7 +899,7 @@ const PaginationList = ({ className, textColor, bgColor, children, ...props }) =
         backgroundColor: bgColor,
         ...props,
     });
-    return (jsxRuntimeExports.jsx("ul", { className: classNames('pagination-list', bulmaHelperClasses, className), ...rest, children: children }));
+    return (jsx("ul", { className: classNames('pagination-list', bulmaHelperClasses, className), ...rest, children: children }));
 };
 const PaginationLink = ({ className, textColor, bgColor, active, disabled, onClick, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -1339,12 +917,12 @@ const PaginationLink = ({ className, textColor, bgColor, active, disabled, onCli
             onClick(e);
         }
     };
-    return (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsx("a", { className: classNames('pagination-link', bulmaHelperClasses, className, {
+    return (jsx("li", { children: jsx("a", { className: classNames('pagination-link', bulmaHelperClasses, className, {
                 'is-current': active,
                 'is-disabled': disabled,
             }), "aria-current": active ? 'page' : undefined, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleClick, ...rest, children: children }) }));
 };
-const PaginationEllipsis = props => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsx("span", { className: "pagination-ellipsis", ...props, children: "\u2026" }) }));
+const PaginationEllipsis = props => (jsx("li", { children: jsx("span", { className: "pagination-ellipsis", ...props, children: "\u2026" }) }));
 Pagination.Link = PaginationLink;
 Pagination.List = PaginationList;
 Pagination.Ellipsis = PaginationEllipsis;
@@ -1360,18 +938,18 @@ const Panel = ({ color, className, children, ...props }) => {
         [`is-${color}`]: color,
     });
     const panelClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("nav", { className: panelClasses, ...rest, children: children }));
+    return (jsx("nav", { className: panelClasses, ...rest, children: children }));
 };
-const PanelHeading = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("p", { className: classNames('panel-heading', className), ...props, children: children }));
-const PanelTabs = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("p", { className: classNames('panel-tabs', className), ...props, children: children }));
-const PanelBlock = ({ className, active, children, ...props }) => (jsxRuntimeExports.jsx("a", { className: classNames('panel-block', className, { 'is-active': active }), ...props, children: children }));
-const PanelIcon = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("span", { className: classNames('panel-icon', className), ...props, children: children }));
+const PanelHeading = ({ className, children, ...props }) => (jsx("p", { className: classNames('panel-heading', className), ...props, children: children }));
+const PanelTabs = ({ className, children, ...props }) => (jsx("p", { className: classNames('panel-tabs', className), ...props, children: children }));
+const PanelBlock = ({ className, active, children, ...props }) => (jsx("a", { className: classNames('panel-block', className, { 'is-active': active }), ...props, children: children }));
+const PanelIcon = ({ className, children, ...props }) => (jsx("span", { className: classNames('panel-icon', className), ...props, children: children }));
 const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa-search', ...props }) => {
     const inputClass = usePrefixedClassNames('input');
-    return (jsxRuntimeExports.jsx("div", { className: "panel-block", ...props, children: jsxRuntimeExports.jsxs("p", { className: "control has-icons-left", children: [jsxRuntimeExports.jsx("input", { className: inputClass, type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsxRuntimeExports.jsx("span", { className: "icon is-left", children: jsxRuntimeExports.jsx("i", { className: iconClassName, "aria-hidden": "true" }) })] }) }));
+    return (jsx("div", { className: "panel-block", ...props, children: jsxs("p", { className: "control has-icons-left", children: [jsx("input", { className: inputClass, type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsx("span", { className: "icon is-left", children: jsx("i", { className: iconClassName, "aria-hidden": "true" }) })] }) }));
 };
-const PanelCheckboxBlock = ({ checked, onChange, children, ...props }) => (jsxRuntimeExports.jsxs("label", { className: "panel-block", ...props, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: checked, onChange: onChange }), children] }));
-const PanelButtonBlock = ({ children, className, ...props }) => (jsxRuntimeExports.jsx("div", { className: "panel-block", children: jsxRuntimeExports.jsx("button", { className: classNames('button is-link is-outlined is-fullwidth', className), ...props, children: children }) }));
+const PanelCheckboxBlock = ({ checked, onChange, children, ...props }) => (jsxs("label", { className: "panel-block", ...props, children: [jsx("input", { type: "checkbox", checked: checked, onChange: onChange }), children] }));
+const PanelButtonBlock = ({ children, className, ...props }) => (jsx("div", { className: "panel-block", children: jsx("button", { className: classNames('button is-link is-outlined is-fullwidth', className), ...props, children: children }) }));
 Panel.Heading = PanelHeading;
 Panel.Tabs = PanelTabs;
 Panel.Block = PanelBlock;
@@ -1394,10 +972,10 @@ const Tabs = ({ align, size, fullwidth, boxed, toggle, rounded, color, className
         'is-toggle-rounded': rounded,
     });
     const tabsClass = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: tabsClass, ...rest, children: children }));
+    return (jsx("div", { className: tabsClass, ...rest, children: children }));
 };
-const TabList = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("ul", { className: classNames(className), ...props, children: children }));
-const TabItem = ({ active, className, children, onClick, ...props }) => (jsxRuntimeExports.jsx("li", { className: classNames({ 'is-active': active }, className), onClick: onClick, ...props, children: children }));
+const TabList = ({ className, children, ...props }) => (jsx("ul", { className: classNames(className), ...props, children: children }));
+const TabItem = ({ active, className, children, onClick, ...props }) => (jsx("li", { className: classNames({ 'is-active': active }, className), onClick: onClick, ...props, children: children }));
 Tabs.List = TabList;
 Tabs.Item = TabItem;
 
@@ -1409,7 +987,7 @@ const Block = ({ className, textColor, bgColor, children, ...props }) => {
     });
     const bulmaClasses = usePrefixedClassNames('block');
     const blockClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: blockClasses, ...rest, children: children }));
+    return (jsx("div", { className: blockClasses, ...rest, children: children }));
 };
 
 const Box = ({ className, textColor, bgColor, hasShadow = true, children, ...props }) => {
@@ -1422,7 +1000,7 @@ const Box = ({ className, textColor, bgColor, hasShadow = true, children, ...pro
         'is-shadowless': !hasShadow,
     });
     const boxClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: boxClasses, ...rest, children: children }));
+    return (jsx("div", { className: boxClasses, ...rest, children: children }));
 };
 
 const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as = 'button', href, onClick, target, rel, ...props }) => {
@@ -1449,11 +1027,11 @@ const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWi
     const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     if (as === 'a') {
         const { type: _type, disabled: _disabled, form: _form, formAction: _formAction, formEncType: _formEncType, formMethod: _formMethod, formNoValidate: _formNoValidate, formTarget: _formTarget, name: _name, value: _value, autoFocus: _autoFocus, ...anchorRest } = rest;
-        return (jsxRuntimeExports.jsx("a", { className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
+        return (jsx("a", { className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
                 ? (e) => e.preventDefault()
                 : onClick, ...anchorRest, children: children }));
     }
-    return (jsxRuntimeExports.jsx("button", { className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
+    return (jsx("button", { className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
 };
 
 const Buttons = ({ className, textColor, bgColor, isCentered, isRight, hasAddons, children, ...props }) => {
@@ -1468,7 +1046,7 @@ const Buttons = ({ className, textColor, bgColor, isCentered, isRight, hasAddons
         ...props,
     });
     const combinedClasses = classNames(buttonsClasses, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("div", { className: combinedClasses, ...rest, children: children }));
+    return (jsx("div", { className: combinedClasses, ...rest, children: children }));
 };
 
 const validSizes = ['small', 'medium', 'large'];
@@ -1482,7 +1060,7 @@ const Content = ({ className, textColor, bgColor, size, children, ...props }) =>
         [`is-${size}`]: size && size !== 'normal' && validSizes.includes(size),
     });
     const contentClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: contentClasses, ...rest, children: children }));
+    return (jsx("div", { className: contentClasses, ...rest, children: children }));
 };
 
 const Delete = ({ className, textColor, bgColor, onClick, size, ariaLabel = 'Close', disabled = false, ...props }) => {
@@ -1496,7 +1074,7 @@ const Delete = ({ className, textColor, bgColor, onClick, size, ariaLabel = 'Clo
         'is-disabled': disabled,
     });
     const classes = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("button", { className: classes, onClick: onClick, "aria-label": ariaLabel, disabled: disabled, type: "button", ...rest }));
+    return (jsx("button", { className: classes, onClick: onClick, "aria-label": ariaLabel, disabled: disabled, type: "button", ...rest }));
 };
 
 function getIconClasses(library, name, variant, features) {
@@ -1553,7 +1131,25 @@ function getIconClasses(library, name, variant, features) {
             return [name, ...featureList].join(' ');
     }
 }
-const Icon = ({ className, textColor, bgColor, name, library = 'fa', variant, features, libraryFeatures, size, ariaLabel = 'icon', style, ...restProps }) => {
+const Icon = ({ className, textColor, bgColor, name, library, variant, features, libraryFeatures, size, ariaLabel = 'icon', style, icon, color: _color, ...restProps }) => {
+    let finalName = name;
+    if (!name && icon) {
+        if (typeof icon === 'string') {
+            const parts = icon.split(' ');
+            const lastPart = parts[parts.length - 1];
+            if (lastPart.startsWith('mdi-')) {
+                finalName = lastPart.substring(4);
+            }
+            else if (lastPart.startsWith('fa-')) {
+                finalName = lastPart.substring(3);
+            }
+            else {
+                finalName = lastPart;
+            }
+        }
+    }
+    const defaultLibrary = useIconLibrary();
+    const finalLibrary = library || defaultLibrary || 'fa';
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -1569,7 +1165,7 @@ const Icon = ({ className, textColor, bgColor, name, library = 'fa', variant, fe
         const legacyFeatures = Array.isArray(libraryFeatures)
             ? libraryFeatures
             : [libraryFeatures];
-        if (library === 'fa') {
+        if (finalLibrary === 'fa') {
             const faStyle = legacyFeatures.find(f => [
                 'fas',
                 'far',
@@ -1592,8 +1188,9 @@ const Icon = ({ className, textColor, bgColor, name, library = 'fa', variant, fe
                 finalFeatures = legacyFeatures;
             }
         }
-        else if (library === 'material-icons' || library === 'material-symbols') {
-            const styleVariants = library === 'material-icons'
+        else if (finalLibrary === 'material-icons' ||
+            finalLibrary === 'material-symbols') {
+            const styleVariants = finalLibrary === 'material-icons'
                 ? ['filled', 'outlined', 'round', 'sharp']
                 : ['outlined', 'rounded', 'sharp'];
             const styleVariant = legacyFeatures.find(f => styleVariants.includes(f));
@@ -1609,21 +1206,22 @@ const Icon = ({ className, textColor, bgColor, name, library = 'fa', variant, fe
             finalFeatures = legacyFeatures;
         }
     }
-    if (library === 'ion') {
-        let ionName = name;
+    if (finalLibrary === 'ion') {
+        let ionName = finalName;
         if (finalVariant === 'outline') {
-            ionName = `${name}-outline`;
+            ionName = `${finalName}-outline`;
         }
         else if (finalVariant === 'sharp') {
-            ionName = `${name}-sharp`;
+            ionName = `${finalName}-sharp`;
         }
-        return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("ion-icon", { name: ionName }) }));
+        return (jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsx("ion-icon", { name: ionName }) }));
     }
-    const iClasses = getIconClasses(library, name, finalVariant, finalFeatures);
-    if (library === 'material-icons' || library === 'material-symbols') {
-        return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("i", { className: iClasses, children: name }) }));
+    const iClasses = getIconClasses(finalLibrary, finalName, finalVariant, finalFeatures);
+    if (finalLibrary === 'material-icons' ||
+        finalLibrary === 'material-symbols') {
+        return (jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsx("i", { className: iClasses, children: finalName }) }));
     }
-    return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("i", { className: iClasses }) }));
+    return (jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsx("i", { className: iClasses }) }));
 };
 
 const IconText = ({ className, textColor, bgColor, iconProps, children, items, ...props }) => {
@@ -1634,7 +1232,7 @@ const IconText = ({ className, textColor, bgColor, iconProps, children, items, .
     });
     const bulmaClasses = usePrefixedClassNames('icon-text');
     const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxRuntimeExports.jsxs(React.Fragment, { children: [jsxRuntimeExports.jsx(Icon, { ...item.iconProps }), item.text && jsxRuntimeExports.jsx("span", { children: item.text })] }, index)))) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [iconProps && jsxRuntimeExports.jsx(Icon, { ...iconProps }), children && jsxRuntimeExports.jsx("span", { children: children })] })) }));
+    return (jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxs(React.Fragment, { children: [jsx(Icon, { ...item.iconProps }), item.text && jsx("span", { children: item.text })] }, index)))) : (jsxs(Fragment, { children: [iconProps && jsx(Icon, { ...iconProps }), children && jsx("span", { children: children })] })) }));
 };
 
 const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, src, alt, children, ...props }) => {
@@ -1659,8 +1257,8 @@ const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, s
         Tag = 'div';
     }
     const roundedClass = usePrefixedClassNames('is-rounded');
-    const content = children ? (children) : (jsxRuntimeExports.jsx("img", { className: classNames({ [roundedClass]: isRounded }), src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
-    return (jsxRuntimeExports.jsx(Tag, { className: imageClasses, ...rest, children: content }));
+    const content = children ? (children) : (jsx("img", { className: classNames({ [roundedClass]: isRounded }), src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
+    return (jsx(Tag, { className: imageClasses, ...rest, children: content }));
 };
 
 const Notification = ({ className, color, isLight, hasDelete, onDelete, children, ...props }) => {
@@ -1673,7 +1271,7 @@ const Notification = ({ className, color, isLight, hasDelete, onDelete, children
     });
     const deleteClasses = usePrefixedClassNames('delete');
     const notificationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsxRuntimeExports.jsx("button", { className: deleteClasses, onClick: onDelete, "aria-label": "Close notification" })), children] }));
+    return (jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsx("button", { className: deleteClasses, onClick: onDelete, "aria-label": "Close notification" })), children] }));
 };
 
 const Progress = ({ className, color, size, value, max, children, ...props }) => {
@@ -1685,16 +1283,16 @@ const Progress = ({ className, color, size, value, max, children, ...props }) =>
         [`is-${size}`]: size,
     });
     const progressClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("progress", { className: progressClasses, value: value, max: max, ...rest, children: children }));
+    return (jsx("progress", { className: progressClasses, value: value, max: max, ...rest, children: children }));
 };
 
 const Skeleton = ({ className, variant = 'block', lines = 3, children, ...props }) => {
     const linesClass = usePrefixedClassNames('skeleton-lines');
     const blockClass = usePrefixedClassNames('skeleton-block');
     if (variant === 'lines') {
-        return (jsxRuntimeExports.jsx("div", { className: classNames(linesClass, className), ...props, children: Array.from({ length: lines }).map((_, i) => (jsxRuntimeExports.jsx("div", {}, i))) }));
+        return (jsx("div", { className: classNames(linesClass, className), ...props, children: Array.from({ length: lines }).map((_, i) => (jsx("div", {}, i))) }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: classNames(blockClass, className), ...props, children: children }));
+    return (jsx("div", { className: classNames(blockClass, className), ...props, children: children }));
 };
 
 const validSubTitleSizes = ['1', '2', '3', '4', '5', '6'];
@@ -1707,8 +1305,12 @@ const validSubTitleElements = [
     'h6',
     'p',
 ];
-const SubTitle = ({ className, size, as = 'h1', hasSkeleton, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+const SubTitle = ({ className, size, as = 'h1', hasSkeleton, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
     const element = validSubTitleElements.includes(as) ? as : 'h1';
     const validSize = size && validSubTitleSizes.includes(size) ? size : undefined;
     const bulmaClasses = usePrefixedClassNames('subtitle', {
@@ -1717,7 +1319,7 @@ const SubTitle = ({ className, size, as = 'h1', hasSkeleton, children, ...props
     });
     const subTitleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
-    return (jsxRuntimeExports.jsx(Tag, { className: subTitleClasses, ...rest, children: children }));
+    return (jsx(Tag, { className: subTitleClasses, ...rest, children: children }));
 };
 
 const Table = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isResponsive, children, ...props }) => {
@@ -1731,9 +1333,9 @@ const Table = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFull
     });
     const containerClass = usePrefixedClassNames('table-container');
     const tableClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    const tableElement = (jsxRuntimeExports.jsx("table", { className: tableClasses, ...rest, children: children }));
+    const tableElement = (jsx("table", { className: tableClasses, ...rest, children: children }));
     if (isResponsive) {
-        return jsxRuntimeExports.jsx("div", { className: containerClass, children: tableElement });
+        return jsx("div", { className: containerClass, children: tableElement });
     }
     return tableElement;
 };
@@ -1762,9 +1364,9 @@ const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelet
     });
     const tagClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     if (isDelete) {
-        return (jsxRuntimeExports.jsx("button", { className: tagClasses, onClick: onDelete, "aria-label": "Delete tag", ...rest }));
+        return (jsx("button", { className: tagClasses, onClick: onDelete, "aria-label": "Delete tag", ...rest }));
     }
-    return (jsxRuntimeExports.jsx("span", { className: tagClasses, ...rest, children: children }));
+    return (jsx("span", { className: tagClasses, ...rest, children: children }));
 };
 
 const Tags = ({ className, hasAddons, isMultiline, children, ...props }) => {
@@ -1774,13 +1376,13 @@ const Tags = ({ className, hasAddons, isMultiline, children, ...props }) => {
         'are-multiline': isMultiline,
     });
     const tagsClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: tagsClasses, ...rest, children: children }));
+    return (jsx("div", { className: tagsClasses, ...rest, children: children }));
 };
 
 const Tbody = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const tbodyClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("tbody", { className: tbodyClasses, ...rest, children: children }));
+    return (jsx("tbody", { className: tbodyClasses, ...rest, children: children }));
 };
 
 const validTableColors = [
@@ -1801,13 +1403,13 @@ const Td = ({ className, color, children, ...props }) => {
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const tdClasses = classNames(colorClass, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("td", { className: tdClasses, ...rest, children: children }));
+    return (jsx("td", { className: tdClasses, ...rest, children: children }));
 };
 
 const Tfoot = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const tfootClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("tfoot", { className: tfootClasses, ...rest, children: children }));
+    return (jsx("tfoot", { className: tfootClasses, ...rest, children: children }));
 };
 
 const validAlignments = ['left', 'right', 'centered'];
@@ -1818,7 +1420,7 @@ const Th = ({ className, isAligned, width, color, children, ...props }) => {
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("th", { className: thClasses, style: width
+    return (jsx("th", { className: thClasses, style: width
             ? { width: typeof width === 'number' ? `${width}px` : width }
             : undefined, ...rest, children: children }));
 };
@@ -1826,13 +1428,17 @@ const Th = ({ className, isAligned, width, color, children, ...props }) => {
 const Thead = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const theadClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("thead", { className: theadClasses, ...rest, children: children }));
+    return (jsx("thead", { className: theadClasses, ...rest, children: children }));
 };
 
 const validTitleSizes = ['1', '2', '3', '4', '5', '6'];
 const validTitleElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
-const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
     const element = validTitleElements.includes(as) ? as : 'h1';
     const validSize = size && validTitleSizes.includes(size) ? size : undefined;
     const bulmaClasses = usePrefixedClassNames('title', {
@@ -1842,7 +1448,7 @@ const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, children, ..
     });
     const titleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
-    return (jsxRuntimeExports.jsx(Tag, { className: titleClasses, ...rest, children: children }));
+    return (jsx(Tag, { className: titleClasses, ...rest, children: children }));
 };
 
 const Tr = ({ className, isSelected, color, children, ...props }) => {
@@ -1852,7 +1458,7 @@ const Tr = ({ className, isSelected, color, children, ...props }) => {
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("tr", { className: trClasses, ...rest, children: children }));
+    return (jsx("tr", { className: trClasses, ...rest, children: children }));
 };
 
 const Checkbox = forwardRef(({ disabled, className, children, ...props }, ref) => {
@@ -1861,7 +1467,7 @@ const Checkbox = forwardRef(({ disabled, className, children, ...props }, ref) =
     });
     const mainClass = usePrefixedClassNames('checkbox');
     const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsxs("label", { className: checkboxClass, children: [jsxRuntimeExports.jsx("input", { ref: ref, type: "checkbox", disabled: disabled, ...rest }), children] }));
+    return (jsxs("label", { className: checkboxClass, children: [jsx("input", { ref: ref, type: "checkbox", disabled: disabled, ...rest }), children] }));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -1871,7 +1477,7 @@ const Checkboxes = ({ children, className, ...props }) => {
     });
     const mainClass = usePrefixedClassNames('checkboxes');
     const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: wrapperClass, ...rest, children: children }));
+    return (jsx("div", { className: wrapperClass, ...rest, children: children }));
 };
 
 const allowedColors = [...validColors, 'inherit', 'current'];
@@ -1911,7 +1517,7 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
         [`is-${size}`]: !!size,
     });
     const controlClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconProps && leftIconProps.name && (jsxRuntimeExports.jsx(Icon, { ...leftIconProps, className: "is-left" })), rightIconProps && rightIconProps.name && (jsxRuntimeExports.jsx(Icon, { ...rightIconProps, className: "is-right" }))] }));
+    return (jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconProps && leftIconProps.name && (jsx(Icon, { ...leftIconProps, className: "is-left" })), rightIconProps && rightIconProps.name && (jsx(Icon, { ...rightIconProps, className: "is-right" }))] }));
 });
 Control.displayName = 'Control';
 
@@ -1925,7 +1531,7 @@ const FieldLabel = ({ size, textColor, bgColor, className, children, ...props })
         [`is-${size}`]: !!size,
     });
     const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: fieldLabelClass, ...props, ...rest, children: children }));
+    return (jsx("div", { className: fieldLabelClass, ...props, ...rest, children: children }));
 };
 const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -1935,7 +1541,7 @@ const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
     });
     const mainClass = usePrefixedClassNames('field-body');
     const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
+    return (jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
 };
 const Field = ({ horizontal, grouped, hasAddons, label, labelSize, labelProps, textColor, color: _fieldColor, bgColor, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -1960,10 +1566,10 @@ const Field = ({ horizontal, grouped, hasAddons, label, labelSize, labelProps, t
     let renderedLabel = null;
     if (label) {
         if (horizontal) {
-            renderedLabel = (jsxRuntimeExports.jsx(FieldLabel, { size: mappedLabelSize, children: jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: labelProps === null || labelProps === void 0 ? void 0 : labelProps.style, children: label }) }));
+            renderedLabel = (jsx(FieldLabel, { size: mappedLabelSize, children: jsx("label", { ...labelProps, className: classNames(labelClass, labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: labelProps === null || labelProps === void 0 ? void 0 : labelProps.style, children: label }) }));
         }
         else {
-            renderedLabel = (jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: { display: 'block', ...((labelProps === null || labelProps === void 0 ? void 0 : labelProps.style) || {}) }, children: label }));
+            renderedLabel = (jsx("label", { ...labelProps, className: classNames(labelClass, labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: { display: 'block', ...((labelProps === null || labelProps === void 0 ? void 0 : labelProps.style) || {}) }, children: label }));
         }
     }
     let content = children;
@@ -1973,10 +1579,10 @@ const Field = ({ horizontal, grouped, hasAddons, label, labelSize, labelProps, t
             content = children;
         }
         else {
-            content = jsxRuntimeExports.jsx(FieldBody, { children: children });
+            content = jsx(FieldBody, { children: children });
         }
     }
-    return (jsxRuntimeExports.jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }));
+    return (jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }));
 };
 FieldLabel.displayName = 'FieldLabel';
 FieldBody.displayName = 'FieldBody';
@@ -2006,7 +1612,7 @@ const File = forwardRef(({ color, size, isBoxed, isFullwidth, isRight, isCentere
         'has-name': hasName,
     });
     const fileClass = classNames(mainClass, bulmaHelperClasses, alignmentClass, className);
-    return (jsxRuntimeExports.jsx("div", { className: fileClass, children: jsxRuntimeExports.jsxs("label", { className: "file-label", children: [jsxRuntimeExports.jsx("input", { ref: ref, className: classNames('file-input', inputClassName), type: "file", ...rest }), jsxRuntimeExports.jsxs("span", { className: "file-cta", children: [iconLeft && jsxRuntimeExports.jsx("span", { className: "file-icon", children: iconLeft }), jsxRuntimeExports.jsx("span", { className: "file-label", children: label || 'Choose a file…' }), iconRight && jsxRuntimeExports.jsx("span", { className: "file-icon", children: iconRight })] }), hasName && fileName && jsxRuntimeExports.jsx("span", { className: "file-name", children: fileName })] }) }));
+    return (jsx("div", { className: fileClass, children: jsxs("label", { className: "file-label", children: [jsx("input", { ref: ref, className: classNames('file-input', inputClassName), type: "file", ...rest }), jsxs("span", { className: "file-cta", children: [iconLeft && jsx("span", { className: "file-icon", children: iconLeft }), jsx("span", { className: "file-label", children: label || 'Choose a file…' }), iconRight && jsx("span", { className: "file-icon", children: iconRight })] }), hasName && fileName && jsx("span", { className: "file-name", children: fileName })] }) }));
 });
 File.displayName = 'File';
 
@@ -2025,7 +1631,7 @@ const Input = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocus
         'is-loading': isLoading,
     });
     const inputClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("input", { ref: ref, className: inputClass, disabled: disabled, readOnly: readOnly, ...rest }));
+    return (jsx("input", { ref: ref, className: inputClass, disabled: disabled, readOnly: readOnly, ...rest }));
 });
 Input.displayName = 'Input';
 
@@ -2035,7 +1641,7 @@ const Radio = forwardRef(({ disabled, className, children, ...props }, ref) => {
     });
     const mainClass = usePrefixedClassNames('radio');
     const radioClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsxs("label", { className: radioClass, children: [jsxRuntimeExports.jsx("input", { ref: ref, type: "radio", disabled: disabled, ...rest }), children] }));
+    return (jsxs("label", { className: radioClass, children: [jsx("input", { ref: ref, type: "radio", disabled: disabled, ...rest }), children] }));
 });
 Radio.displayName = 'Radio';
 
@@ -2045,7 +1651,7 @@ const Radios = ({ children, className, ...props }) => {
     });
     const mainClass = usePrefixedClassNames('radios');
     const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: wrapperClass, ...rest, children: children }));
+    return (jsx("div", { className: wrapperClass, ...rest, children: children }));
 };
 
 const Select = forwardRef(({ color, size, isRounded, isLoading, isActive, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
@@ -2069,7 +1675,7 @@ const Select = forwardRef(({ color, size, isRounded, isLoading, isActive, classN
     if (multiple && typeof multipleSize === 'number') {
         selectProps.size = multipleSize;
     }
-    return (jsxRuntimeExports.jsx("div", { className: selectClass, children: jsxRuntimeExports.jsx("select", { ref: ref, ...selectProps, children: children }) }));
+    return (jsx("div", { className: selectClass, children: jsx("select", { ref: ref, ...selectProps, children: children }) }));
 });
 Select.displayName = 'Select';
 
@@ -2090,7 +1696,7 @@ const TextArea = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFo
         'has-fixed-size': hasFixedSize,
     });
     const textareaClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("textarea", { ref: ref, className: textareaClass, disabled: disabled, readOnly: readOnly, rows: rows, ...rest }));
+    return (jsx("textarea", { ref: ref, className: textareaClass, disabled: disabled, readOnly: readOnly, rows: rows, ...rest }));
 });
 TextArea.displayName = 'TextArea';
 
@@ -2110,7 +1716,7 @@ const Cell = ({ colStart, colFromEnd, colSpan, rowStart, rowFromEnd, rowSpan, cl
         [`is-row-span-${rowSpan}`]: rowSpan !== undefined && rowSpan !== null,
     });
     const cellClasses = classNames(mainClass, cellGridClasses, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("div", { className: cellClasses, ...rest, children: children }));
+    return (jsx("div", { className: cellClasses, ...rest, children: children }));
 };
 
 const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixedColsMobile, fixedColsTablet, fixedColsDesktop, fixedColsWidescreen, fixedColsFullhd, className, textColor, color: _fieldColor, bgColor, children, ...props }) => {
@@ -2137,9 +1743,9 @@ const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixe
     });
     const gridClasses = classNames(mainClass, gridInnerClasses, bulmaHelperClasses, className);
     if (isFixed) {
-        return (jsxRuntimeExports.jsx("div", { className: fixedGridClasses, children: jsxRuntimeExports.jsx("div", { className: gridClasses, ...rest, children: children }) }));
+        return (jsx("div", { className: fixedGridClasses, children: jsx("div", { className: gridClasses, ...rest, children: children }) }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: gridClasses, ...rest, children: children }));
+    return (jsx("div", { className: gridClasses, ...rest, children: children }));
 };
 
 const bulmaCssVars = [
@@ -2729,7 +2335,7 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, ...restPro
         }
         return classNames(className, bulmaHelperClasses);
     }, [className, bulmaHelperClasses, isRoot]);
-    return isRoot ? (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children })) : (jsxRuntimeExports.jsx("div", { className: combinedClassName || undefined, style: style, ...rest, children: children }));
+    return isRoot ? (jsx(Fragment, { children: children })) : (jsx("div", { className: combinedClassName || undefined, style: style, ...rest, children: children }));
 };
 
 const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, ...props }) => {
@@ -2760,7 +2366,7 @@ const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, b
     });
     const prefixedBreakpointClass = usePrefixedClassNames(breakpointClass || '');
     const containerClasses = classNames(mainClass, containerModifiers, prefixedBreakpointClass, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("div", { className: containerClasses, ...rest, children: children }));
+    return (jsx("div", { className: containerClasses, ...rest, children: children }));
 };
 
 const Footer = ({ as = 'footer', className, children, color, bgColor, textColor, ...props }) => {
@@ -2772,7 +2378,7 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
     const Tag = as;
     const mainClass = usePrefixedClassNames('footer');
     const footerClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx(Tag, { className: footerClasses, ...rest, children: children }));
+    return (jsx(Tag, { className: footerClasses, ...rest, children: children }));
 };
 
 const Hero = ({ className, color, size, bgColor, fullheightWithNavbar, children, ...props }) => {
@@ -2786,7 +2392,7 @@ const Hero = ({ className, color, size, bgColor, fullheightWithNavbar, children,
         'is-fullheight-with-navbar': fullheightWithNavbar || size === 'fullheight-with-navbar',
     });
     const heroClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("section", { className: heroClasses, ...rest, children: children }));
+    return (jsx("section", { className: heroClasses, ...rest, children: children }));
 };
 const HeroHead = ({ className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2796,7 +2402,7 @@ const HeroHead = ({ className, children, color, bgColor, textColor, ...props })
     });
     const mainClass = usePrefixedClassNames('hero-head');
     const heroHeadClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: heroHeadClasses, ...rest, children: children }));
+    return (jsx("div", { className: heroHeadClasses, ...rest, children: children }));
 };
 const HeroBody = ({ className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2806,7 +2412,7 @@ const HeroBody = ({ className, children, color, bgColor, textColor, ...props })
     });
     const mainClass = usePrefixedClassNames('hero-body');
     const heroBodyClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: heroBodyClasses, ...rest, children: children }));
+    return (jsx("div", { className: heroBodyClasses, ...rest, children: children }));
 };
 const HeroFoot = ({ className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2816,7 +2422,7 @@ const HeroFoot = ({ className, children, color, bgColor, textColor, ...props })
     });
     const mainClass = usePrefixedClassNames('hero-foot');
     const heroFootClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: heroFootClasses, ...rest, children: children }));
+    return (jsx("div", { className: heroFootClasses, ...rest, children: children }));
 };
 Hero.Head = HeroHead;
 Hero.Body = HeroBody;
@@ -2832,7 +2438,7 @@ const Level = ({ isMobile, className, children, color, bgColor, textColor, ...pr
         'is-mobile': isMobile,
     });
     const levelClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("nav", { className: levelClasses, ...rest, children: children }));
+    return (jsx("nav", { className: levelClasses, ...rest, children: children }));
 };
 const LevelLeft = ({ className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2842,7 +2448,7 @@ const LevelLeft = ({ className, children, color, bgColor, textColor, ...props })
     });
     const mainClass = usePrefixedClassNames('level-left');
     const levelLeftClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: levelLeftClasses, ...rest, children: children }));
+    return (jsx("div", { className: levelLeftClasses, ...rest, children: children }));
 };
 const LevelRight = ({ className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2852,7 +2458,7 @@ const LevelRight = ({ className, children, color, bgColor, textColor, ...props }
     });
     const mainClass = usePrefixedClassNames('level-right');
     const levelRightClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: levelRightClasses, ...rest, children: children }));
+    return (jsx("div", { className: levelRightClasses, ...rest, children: children }));
 };
 const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, target, rel, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2866,9 +2472,9 @@ const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, tar
     });
     const levelItemClasses = classNames(mainClass, bulmaHelperClasses, className);
     if (Tag === 'a') {
-        return (jsxRuntimeExports.jsx("a", { className: levelItemClasses, href: href, target: target, rel: rel, ...rest, children: children }));
+        return (jsx("a", { className: levelItemClasses, href: href, target: target, rel: rel, ...rest, children: children }));
     }
-    return (jsxRuntimeExports.jsx(Tag, { className: levelItemClasses, ...rest, children: children }));
+    return (jsx(Tag, { className: levelItemClasses, ...rest, children: children }));
 };
 Level.Left = LevelLeft;
 Level.Right = LevelRight;
@@ -2883,7 +2489,7 @@ const Media = ({ as = 'article', className, children, color, bgColor, textColor,
     const Tag = as;
     const mainClass = usePrefixedClassNames('media');
     const mediaClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx(Tag, { className: mediaClasses, ...rest, children: children }));
+    return (jsx(Tag, { className: mediaClasses, ...rest, children: children }));
 };
 const MediaLeft = ({ as = 'figure', className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2894,7 +2500,7 @@ const MediaLeft = ({ as = 'figure', className, children, color, bgColor, textCol
     const Tag = as;
     const mainClass = usePrefixedClassNames('media-left');
     const mediaLeftClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx(Tag, { className: mediaLeftClasses, ...rest, children: children }));
+    return (jsx(Tag, { className: mediaLeftClasses, ...rest, children: children }));
 };
 const MediaContent = ({ className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2904,7 +2510,7 @@ const MediaContent = ({ className, children, color, bgColor, textColor, ...props
     });
     const mainClass = usePrefixedClassNames('media-content');
     const mediaContentClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: mediaContentClasses, ...rest, children: children }));
+    return (jsx("div", { className: mediaContentClasses, ...rest, children: children }));
 };
 const MediaRight = ({ className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2914,7 +2520,7 @@ const MediaRight = ({ className, children, color, bgColor, textColor, ...props }
     });
     const mainClass = usePrefixedClassNames('media-right');
     const mediaRightClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntimeExports.jsx("div", { className: mediaRightClasses, ...rest, children: children }));
+    return (jsx("div", { className: mediaRightClasses, ...rest, children: children }));
 };
 const MediaWithSubcomponents = Media;
 MediaWithSubcomponents.Left = MediaLeft;
@@ -2932,8 +2538,8 @@ const Section = ({ size, className, children, color, bgColor, textColor, ...prop
         [`is-${size}`]: size,
     });
     const sectionClasses = classNames(mainClass, sectionModifiers, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsx("section", { className: sectionClasses, ...rest, children: children }));
+    return (jsx("section", { className: sectionClasses, ...rest, children: children }));
 };
 
-export { Block, Box, Breadcrumb, Button, Buttons, CardWithSubComponents as Card, Cell, Checkbox, Checkboxes, Column, Columns, ConfigProvider, Container, Content, Control, Delete, Dropdown, DropdownDivider, DropdownItem, Field, FieldBody, FieldLabel, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, Level, LevelItem, LevelLeft, LevelRight, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, MessageWithSubComponents as Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarMenu, NavbarStart, Notification, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Progress, Radio, Radios, Section, Select, Skeleton, SubTitle, TabItem, TabList, Table, Tabs, Tag, Tags, Tbody, Td, TextArea, Tfoot, Th, Thead, Theme, Title, Tr, __test_exports__, classNames, createPrefixedClassNames, isBrowser, prefixedClassNames, useBulmaClasses, useClassPrefix, useConfig, usePrefixedClass, usePrefixedClassNames, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFontFamilies, validJustifyContents, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Block, Box, Breadcrumb, Button, Buttons, CardWithSubComponents as Card, Cell, Checkbox, Checkboxes, Column, Columns, ConfigProvider, Container, Content, Control, Delete, Dropdown, DropdownDivider, DropdownItem, Field, FieldBody, FieldLabel, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, Level, LevelItem, LevelLeft, LevelRight, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, MessageWithSubComponents as Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarMenu, NavbarStart, Notification, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Progress, Radio, Radios, Section, Select, Skeleton, SubTitle, TabItem, TabList, Table, Tabs, Tag, Tags, Tbody, Td, TextArea, Tfoot, Th, Thead, Theme, Title, Tr, __test_exports__, classNames, createPrefixedClassNames, isBrowser, prefixedClassNames, useBulmaClasses, useClassPrefix, useConfig, useIconLibrary, usePrefixedClass, usePrefixedClassNames, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFontFamilies, validJustifyContents, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map