@allxsmith/bestax-bulma 1.0.9 → 1.0.11

package/dist/index.esm.js

@@ -0,0 +1,1997 @@
+import React, { useMemo, useState, useRef, useEffect, createContext, useContext, 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();
+
+function classNames(...args) {
+    const classSet = new Set();
+    function process(item) {
+        if (item === undefined || item === null || item === false || item === '') {
+            return;
+        }
+        if (typeof item === 'string' || typeof item === 'number') {
+            for (const cls of String(item).split(/\s+/)) {
+                if (cls)
+                    classSet.add(cls);
+            }
+        }
+        else if (Array.isArray(item)) {
+            for (const sub of item)
+                process(sub);
+        }
+        else if (typeof item === 'object') {
+            for (const key in item) {
+                if (Object.prototype.hasOwnProperty.call(item, key) && item[key]) {
+                    for (const cls of key.split(/\s+/)) {
+                        if (cls)
+                            classSet.add(cls);
+                    }
+                }
+            }
+        }
+    }
+    for (const arg of args) {
+        process(arg);
+    }
+    return Array.from(classSet).join(' ');
+}
+
+const validColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'black',
+    'black-bis',
+    'black-ter',
+    'grey-darker',
+    'grey-dark',
+    'grey',
+    'grey-light',
+    'grey-lighter',
+    'white',
+    'light',
+    'dark',
+];
+const validColorShades = [
+    '00',
+    '05',
+    '10',
+    '15',
+    '20',
+    '25',
+    '30',
+    '35',
+    '40',
+    '45',
+    '50',
+    '55',
+    '60',
+    '65',
+    '70',
+    '75',
+    '80',
+    '85',
+    '90',
+    '95',
+    'invert',
+];
+const validSizes$1 = ['0', '1', '2', '3', '4', '5', '6', 'auto'];
+const validTextSizes = ['1', '2', '3', '4', '5', '6', '7'];
+const validAlignments$1 = [
+    'centered',
+    'justified',
+    'left',
+    'right',
+];
+const validTextTransforms = [
+    'capitalized',
+    'lowercase',
+    'uppercase',
+    'italic',
+];
+const validTextWeights = [
+    'light',
+    'normal',
+    'medium',
+    'semibold',
+    'bold',
+];
+const validFontFamilies = [
+    'sans-serif',
+    'monospace',
+    'primary',
+    'secondary',
+    'code',
+];
+const validDisplays = [
+    'block',
+    'flex',
+    'inline',
+    'inline-block',
+    'inline-flex',
+];
+const validVisibilities = ['hidden', 'sr-only'];
+const validFlexDirections = [
+    'row',
+    'row-reverse',
+    'column',
+    'column-reverse',
+];
+const validFlexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const validJustifyContents = [
+    'flex-start',
+    'flex-end',
+    'center',
+    'space-between',
+    'space-around',
+    'space-evenly',
+    'start',
+    'end',
+    'left',
+    'right',
+];
+const validAlignContents = [
+    'flex-start',
+    'flex-end',
+    'center',
+    'space-between',
+    'space-around',
+    'space-evenly',
+    'stretch',
+];
+const validAlignItems = [
+    'stretch',
+    'flex-start',
+    'flex-end',
+    'center',
+    'baseline',
+    'start',
+    'end',
+];
+const validAlignSelfs = [
+    'auto',
+    'flex-start',
+    'flex-end',
+    'center',
+    'baseline',
+    'stretch',
+];
+const validFlexGrowShrink = ['0', '1'];
+const validViewports = [
+    'mobile',
+    'tablet',
+    'desktop',
+    'widescreen',
+    'fullhd',
+];
+const useBulmaClasses = (props) => {
+    const { color, backgroundColor, colorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, radius, shadow, responsive, viewport, ...rest } = props;
+    const bulmaHelperClasses = useMemo(() => {
+        const classes = [];
+        const addClass = (prefix, value, validValues) => {
+            if (value && (!validValues.length || validValues.includes(value))) {
+                const className = viewport && validViewports.includes(viewport)
+                    ? `${prefix}-${value}-${viewport}`
+                    : `${prefix}-${value}`;
+                classes.push(className);
+            }
+        };
+        const addColorClass = (prefix, value, shade) => {
+            if (!value || ![...validColors, 'inherit', 'current'].includes(value))
+                return;
+            if (shade && validColorShades.includes(shade)) {
+                const className = prefix === 'has-text' && viewport && validViewports.includes(viewport)
+                    ? `${prefix}-${value}-${shade}-${viewport}`
+                    : `${prefix}-${value}-${shade}`;
+                classes.push(className);
+            }
+            else {
+                addClass(prefix, value, [...validColors, 'inherit', 'current']);
+            }
+        };
+        addColorClass('has-text', color, colorShade);
+        addColorClass('has-background', backgroundColor, colorShade);
+        addClass('m', m, validSizes$1);
+        addClass('mt', mt, validSizes$1);
+        addClass('mr', mr, validSizes$1);
+        addClass('mb', mb, validSizes$1);
+        addClass('ml', ml, validSizes$1);
+        addClass('mx', mx, validSizes$1);
+        addClass('my', my, validSizes$1);
+        addClass('p', p, validSizes$1);
+        addClass('pt', pt, validSizes$1);
+        addClass('pr', pr, validSizes$1);
+        addClass('pb', pb, validSizes$1);
+        addClass('pl', pl, validSizes$1);
+        addClass('px', px, validSizes$1);
+        addClass('py', py, validSizes$1);
+        addClass('is-size', textSize, validTextSizes);
+        addClass('has-text', textAlign, validAlignments$1);
+        addClass('is', textTransform, validTextTransforms);
+        addClass('has-text-weight', textWeight, validTextWeights);
+        addClass('is-family', fontFamily, validFontFamilies);
+        addClass('is', display, validDisplays);
+        if (visibility) {
+            if (visibility === 'hidden' &&
+                viewport &&
+                validViewports.includes(viewport)) {
+                classes.push(`is-hidden-${viewport}`);
+            }
+            else if (validVisibilities.includes(visibility)) {
+                classes.push(`is-${visibility}`);
+            }
+        }
+        if (display === 'flex' || display === 'inline-flex') {
+            addClass('is-flex-direction', flexDirection, validFlexDirections);
+            addClass('is-flex-wrap', flexWrap, validFlexWraps);
+            addClass('is-justify-content', justifyContent, validJustifyContents);
+            addClass('is-align-content', alignContent, validAlignContents);
+            addClass('is-align-items', alignItems, validAlignItems);
+            addClass('is-align-self', alignSelf, validAlignSelfs);
+            addClass('is-flex-grow', flexGrow, validFlexGrowShrink);
+            addClass('is-flex-shrink', flexShrink, validFlexGrowShrink);
+        }
+        if (float) {
+            addClass('is-pulled', float, ['left', 'right']);
+        }
+        if (overflow) {
+            addClass('is', overflow, ['clipped']);
+        }
+        if (overlay) {
+            classes.push('is-overlay');
+        }
+        if (interaction) {
+            addClass('is', interaction, ['unselectable', 'clickable']);
+        }
+        if (radius) {
+            addClass('is', radius, ['radiusless']);
+        }
+        if (shadow) {
+            addClass('is', shadow, ['shadowless']);
+        }
+        if (responsive) {
+            addClass('is', responsive, ['mobile', 'narrow']);
+        }
+        return classNames(classes);
+    }, [
+        color,
+        backgroundColor,
+        colorShade,
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py,
+        textSize,
+        textAlign,
+        textTransform,
+        textWeight,
+        fontFamily,
+        display,
+        visibility,
+        flexDirection,
+        flexWrap,
+        justifyContent,
+        alignContent,
+        alignItems,
+        alignSelf,
+        flexGrow,
+        flexShrink,
+        float,
+        overflow,
+        overlay,
+        interaction,
+        radius,
+        shadow,
+        responsive,
+        viewport,
+    ]);
+    return { bulmaHelperClasses, rest };
+};
+
+function getColumnClassNames(props) {
+    const classList = [];
+    const sizeProps = [
+        { prop: 'size', prefix: 'is', suffix: '' },
+        { prop: 'sizeMobile', prefix: 'is', suffix: 'mobile' },
+        { prop: 'sizeTablet', prefix: 'is', suffix: 'tablet' },
+        { prop: 'sizeDesktop', prefix: 'is', suffix: 'desktop' },
+        { prop: 'sizeWidescreen', prefix: 'is', suffix: 'widescreen' },
+        { prop: 'sizeFullhd', prefix: 'is', suffix: 'fullhd' },
+    ];
+    for (const { prop, prefix, suffix } of sizeProps) {
+        const val = props[prop];
+        if (val !== undefined && val !== null) {
+            let className = `${prefix}-${val}`;
+            if (suffix)
+                className += `-${suffix}`;
+            classList.push(className);
+        }
+    }
+    const offsetProps = [
+        { prop: 'offset', prefix: 'is-offset', suffix: '' },
+        { prop: 'offsetMobile', prefix: 'is-offset', suffix: 'mobile' },
+        { prop: 'offsetTablet', prefix: 'is-offset', suffix: 'tablet' },
+        { prop: 'offsetDesktop', prefix: 'is-offset', suffix: 'desktop' },
+        { prop: 'offsetWidescreen', prefix: 'is-offset', suffix: 'widescreen' },
+        { prop: 'offsetFullhd', prefix: 'is-offset', suffix: 'fullhd' },
+    ];
+    for (const { prop, prefix, suffix } of offsetProps) {
+        const val = props[prop];
+        if (val !== undefined && val !== null) {
+            let className = `${prefix}-${val}`;
+            if (suffix)
+                className += `-${suffix}`;
+            classList.push(className);
+        }
+    }
+    if (props.isNarrow)
+        classList.push('is-narrow');
+    if (props.isNarrowMobile)
+        classList.push('is-narrow-mobile');
+    if (props.isNarrowTablet)
+        classList.push('is-narrow-tablet');
+    if (props.isNarrowTouch)
+        classList.push('is-narrow-touch');
+    if (props.isNarrowDesktop)
+        classList.push('is-narrow-desktop');
+    if (props.isNarrowWidescreen)
+        classList.push('is-narrow-widescreen');
+    if (props.isNarrowFullhd)
+        classList.push('is-narrow-fullhd');
+    return classList;
+}
+const Column = ({ className, textColor, bgColor, size, sizeMobile, sizeTablet, sizeDesktop, sizeWidescreen, sizeFullhd, offset, offsetMobile, offsetTablet, offsetDesktop, offsetWidescreen, offsetFullhd, isNarrow, isNarrowMobile, isNarrowTablet, isNarrowTouch, isNarrowDesktop, isNarrowWidescreen, isNarrowFullhd, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const columnClasses = classNames('column', ...getColumnClassNames({
+        size,
+        sizeMobile,
+        sizeTablet,
+        sizeDesktop,
+        sizeWidescreen,
+        sizeFullhd,
+        offset,
+        offsetMobile,
+        offsetTablet,
+        offsetDesktop,
+        offsetWidescreen,
+        offsetFullhd,
+        isNarrow,
+        isNarrowMobile,
+        isNarrowTablet,
+        isNarrowTouch,
+        isNarrowDesktop,
+        isNarrowWidescreen,
+        isNarrowFullhd,
+    }), className, bulmaHelperClasses);
+    return (jsxRuntimeExports.jsx("div", { className: columnClasses, ...rest, children: children }));
+};
+
+function getGapClasses(props) {
+    const gapClassMap = [
+        { prop: 'gapSize', prefix: 'is' },
+        { prop: 'gapSizeMobile', prefix: 'is', suffix: 'mobile' },
+        { prop: 'gapSizeTablet', prefix: 'is', suffix: 'tablet' },
+        { prop: 'gapSizeDesktop', prefix: 'is', suffix: 'desktop' },
+        { prop: 'gapSizeWidescreen', prefix: 'is', suffix: 'widescreen' },
+        { prop: 'gapSizeFullhd', prefix: 'is', suffix: 'fullhd' },
+    ];
+    return gapClassMap.flatMap(({ prop, prefix, suffix }) => {
+        const val = props[prop];
+        if (val !== undefined && val !== null) {
+            let className = `${prefix}-${val}`;
+            if (suffix)
+                className += `-${suffix}`;
+            return [className];
+        }
+        return [];
+    });
+}
+const Columns = ({ className, textColor, bgColor, isCentered, isGapless, isMultiline, isVCentered, isMobile, isDesktop, gapSize, gapSizeMobile, gapSizeTablet, gapSizeDesktop, gapSizeWidescreen, gapSizeFullhd, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const columnsClasses = classNames('columns', {
+        'is-centered': isCentered,
+        'is-gapless': isGapless,
+        'is-multiline': isMultiline,
+        'is-vcentered': isVCentered,
+        'is-mobile': isMobile,
+        'is-desktop': isDesktop,
+    }, ...getGapClasses({
+        gapSize,
+        gapSizeMobile,
+        gapSizeTablet,
+        gapSizeDesktop,
+        gapSizeWidescreen,
+        gapSizeFullhd,
+    }), className, bulmaHelperClasses);
+    return (jsxRuntimeExports.jsx("div", { className: columnsClasses, ...rest, children: children }));
+};
+
+const validBreadcrumbAlignments = ['centered', 'right'];
+const validBreadcrumbSeparators = [
+    'arrow',
+    'bullet',
+    'dot',
+    'succeeds',
+];
+const validBreadcrumbSizes = ['small', 'medium', 'large'];
+const Breadcrumb = ({ className, alignment, separator, size, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const breadcrumbClasses = classNames('breadcrumb', className, bulmaHelperClasses, {
+        [`is-${alignment}`]: alignment && validBreadcrumbAlignments.includes(alignment),
+        [`has-${separator}-separator`]: separator && validBreadcrumbSeparators.includes(separator),
+        [`is-${size}`]: size && validBreadcrumbSizes.includes(size),
+    });
+    return (jsxRuntimeExports.jsx("nav", { className: breadcrumbClasses, "aria-label": "breadcrumbs", ...rest, children: jsxRuntimeExports.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)));
+};
+const Card = ({ className, children, textColor, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const cardClasses = classNames('card', className, bulmaHelperClasses, {
+        'is-shadowless': !hasShadow,
+    });
+    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', {
+                        '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' &&
+                children !== null &&
+                children !== '' && jsxRuntimeExports.jsx("div", { className: "card-content", children: children }), footer && (jsxRuntimeExports.jsx("footer", { className: "card-footer", children: renderFooter(footer) }))] }));
+};
+const __test_exports__ = { renderFooter };
+
+const isBrowser = (win, doc) => typeof win !== 'undefined' && typeof doc !== 'undefined';
+const DropdownComponent = ({ label, children, className, menuClassName, active: activeProp, up, right, hoverable, disabled, onActiveChange, closeOnClick = true, id, ...props }) => {
+    const [active, setActive] = useState(!!activeProp);
+    const dropdownRef = useRef(null);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    useEffect(() => {
+        if (typeof activeProp === 'boolean')
+            setActive(activeProp);
+    }, [activeProp]);
+    useEffect(() => {
+        if (!active)
+            return;
+        if (!isBrowser(window, document))
+            return;
+        const handleClick = (e) => {
+            var _a;
+            if (!((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                setActive(false);
+                onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [active, onActiveChange]);
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        const newActive = !active;
+        setActive(newActive);
+        onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(newActive);
+    };
+    const handleMenuClick = () => {
+        if (closeOnClick) {
+            setActive(false);
+            onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
+        }
+    };
+    const dropdownClasses = classNames('dropdown', bulmaHelperClasses, {
+        'is-active': active,
+        'is-up': up,
+        'is-right': right,
+        'is-hoverable': hoverable,
+        'is-disabled': disabled,
+    }, 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: "button", "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 }) })] }));
+};
+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 }));
+};
+const DropdownDivider = () => (jsxRuntimeExports.jsx("hr", { className: "dropdown-divider" }));
+const Dropdown = Object.assign(DropdownComponent, {
+    Item: DropdownItem,
+    Divider: DropdownDivider,
+});
+
+const MenuListLevelContext = createContext(0);
+const MenuComponent = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntimeExports.jsx("aside", { className: classNames('menu', className, bulmaHelperClasses), ...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 }));
+};
+const MenuList = ({ className, children, ...props }) => {
+    const level = useContext(MenuListLevelContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(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 }) }));
+};
+const MenuItem = ({ className, children, active, href, as: Component = 'a', 'data-testid': testId, ...rest }) => {
+    const { bulmaHelperClasses, rest: bulmaRest } = useBulmaClasses(rest);
+    const itemClass = classNames({ 'is-active': active }, bulmaHelperClasses);
+    const { style, id, title, role, tabIndex, ...linkProps } = bulmaRest;
+    const labelChildren = [];
+    const nestedMenuLists = [];
+    React.Children.forEach(children, child => {
+        if (React.isValidElement(child) && child.type === MenuList) {
+            nestedMenuLists.push(child);
+        }
+        else {
+            labelChildren.push(child);
+        }
+    });
+    if (Component === 'a' && href) {
+        linkProps.href = href;
+    }
+    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] }));
+};
+const Menu = Object.assign(MenuComponent, {
+    Label: MenuLabel,
+    List: MenuList,
+    Item: MenuItem,
+});
+
+const Message = ({ className, title, textColor, color, bgColor, onClose, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const messageClasses = classNames('message', color && `is-${color}`, className, bulmaHelperClasses);
+    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: "delete", "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsxRuntimeExports.jsx("div", { className: "message-body", "data-testid": "message-body", children: children }))] }));
+};
+
+const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    let isModalCard;
+    if (type === 'card')
+        isModalCard = true;
+    else if (type === 'content')
+        isModalCard = false;
+    else
+        isModalCard = !!modalCardTitle || !!modalCardFoot;
+    const modalClasses = classNames('modal', { 'is-active': active }, className, bulmaHelperClasses);
+    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: "delete", "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" }))] }));
+};
+
+const Navbar = ({ className, textColor, bgColor, color, transparent, fixed, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const navbarClasses = classNames('navbar', bulmaHelperClasses, className, {
+        [`is-${color}`]: color,
+        'is-transparent': transparent,
+        [`is-fixed-${fixed}`]: fixed,
+    });
+    return (jsxRuntimeExports.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 }));
+};
+const NavbarItem = ({ className, as: Component = 'a', active, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntimeExports.jsx(Component, { className: classNames('navbar-item', bulmaHelperClasses, className, {
+            'is-active': active,
+        }), ...rest, children: children }));
+};
+const NavbarBurger = ({ className, active, children, ...props }) => {
+    var _a;
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    return (jsxRuntimeExports.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] }));
+};
+const NavbarMenu = ({ className, active, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    return (jsxRuntimeExports.jsx("div", { className: classNames('navbar-menu', bulmaHelperClasses, className, {
+            'is-active': active,
+        }), ...rest, children: children }));
+};
+const NavbarStart = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    return (jsxRuntimeExports.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 }));
+};
+const NavbarDropdown = ({ className, right, up, hoverable, active, children, ...props }) => (jsxRuntimeExports.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', {
+        'is-right': right,
+        'is-up': up,
+    }, className), ...props, children: children }));
+const NavbarDivider = props => jsxRuntimeExports.jsx("hr", { className: "navbar-divider", ...props });
+Navbar.Brand = NavbarBrand;
+Navbar.Item = NavbarItem;
+Navbar.Burger = NavbarBurger;
+Navbar.Menu = NavbarMenu;
+Navbar.Start = NavbarStart;
+Navbar.End = NavbarEnd;
+Navbar.Dropdown = NavbarDropdown;
+Navbar.DropdownMenu = NavbarDropdownMenu;
+Navbar.Divider = NavbarDivider;
+
+const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsxRuntimeExports.jsx("a", { className: classNames('pagination-previous', className, {
+        'is-disabled': disabled,
+    }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
+        ? e => {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        : props.onClick, children: children }));
+const PaginationNext = ({ className, disabled, children, ...props }) => (jsxRuntimeExports.jsx("a", { className: classNames('pagination-next', className, {
+        'is-disabled': disabled,
+    }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
+        ? e => {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        : props.onClick, children: children }));
+const Pagination = ({ color, textColor, bgColor, size, align, rounded, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const paginationClasses = classNames('pagination', bulmaHelperClasses, className, {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size,
+        [`is-${align}`]: align,
+        'is-rounded': rounded,
+    });
+    return (jsxRuntimeExports.jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: children }));
+};
+const PaginationList = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntimeExports.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({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const handleClick = (e) => {
+        if (disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.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" }) }));
+Pagination.Link = PaginationLink;
+Pagination.List = PaginationList;
+Pagination.Ellipsis = PaginationEllipsis;
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+
+const Panel = ({ color, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color,
+        ...props,
+    });
+    const panelClasses = classNames('panel', bulmaHelperClasses, className, {
+        [`is-${color}`]: color,
+    });
+    return (jsxRuntimeExports.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 PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa-search', ...props }) => (jsxRuntimeExports.jsx("div", { className: "panel-block", ...props, children: jsxRuntimeExports.jsxs("p", { className: "control has-icons-left", children: [jsxRuntimeExports.jsx("input", { className: "input", type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsxRuntimeExports.jsx("span", { className: "icon is-left", children: jsxRuntimeExports.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 }) }));
+Panel.Heading = PanelHeading;
+Panel.Tabs = PanelTabs;
+Panel.Block = PanelBlock;
+Panel.Icon = PanelIcon;
+Panel.InputBlock = PanelInputBlock;
+Panel.CheckboxBlock = PanelCheckboxBlock;
+Panel.ButtonBlock = PanelButtonBlock;
+
+const Tabs = ({ align, size, fullwidth, boxed, toggle, rounded, color, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color,
+        ...props,
+    });
+    const tabsClass = classNames('tabs', bulmaHelperClasses, {
+        [`is-${align}`]: align,
+        [`is-${size}`]: size,
+        'is-fullwidth': fullwidth,
+        'is-boxed': boxed,
+        'is-toggle': toggle,
+        'is-toggle-rounded': toggle && rounded,
+        [`is-${color}`]: color,
+    }, className);
+    return (jsxRuntimeExports.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 }));
+Tabs.List = TabList;
+Tabs.Item = TabItem;
+
+const Block = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const blockClasses = classNames('block', className, bulmaHelperClasses);
+    return (jsxRuntimeExports.jsx("div", { className: blockClasses, ...rest, children: children }));
+};
+
+const Box = ({ className, textColor, bgColor, hasShadow = true, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const boxClasses = classNames('box', className, bulmaHelperClasses, {
+        'is-shadowless': !hasShadow,
+    });
+    return (jsxRuntimeExports.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 }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const buttonClasses = classNames('button', className, bulmaHelperClasses, {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size && size !== 'normal',
+        'is-light': isLight,
+        'is-rounded': isRounded,
+        'is-loading': isLoading,
+        'is-static': isStatic,
+        'is-fullwidth': isFullWidth,
+        'is-outlined': isOutlined,
+        'is-inverted': isInverted,
+        'is-focused': isFocused,
+        'is-active': isActive,
+        'is-hovered': isHovered,
+        'is-disabled': isDisabled,
+    });
+    if (as === 'a') {
+        const { ...anchorRest } = rest;
+        return (jsxRuntimeExports.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 }));
+};
+
+const Buttons = ({ className, textColor, bgColor, isCentered, isRight, hasAddons, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const buttonsClasses = classNames('buttons', className, bulmaHelperClasses, {
+        'is-centered': isCentered,
+        'is-right': isRight,
+        'has-addons': hasAddons,
+    });
+    return (jsxRuntimeExports.jsx("div", { className: buttonsClasses, ...rest, children: children }));
+};
+
+const validSizes = ['small', 'medium', 'large'];
+const Content = ({ className, textColor, bgColor, size, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const contentClasses = classNames('content', className, bulmaHelperClasses, {
+        [`is-${size}`]: size && size !== 'normal' && validSizes.includes(size),
+    });
+    return (jsxRuntimeExports.jsx("div", { className: contentClasses, ...rest, children: children }));
+};
+
+const Delete = ({ className, textColor, bgColor, onClick, size, ariaLabel = 'Close', disabled = false, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const classes = classNames('delete', {
+        [`is-${size}`]: size,
+        'is-disabled': disabled,
+    }, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("button", { className: classes, onClick: onClick, "aria-label": ariaLabel, disabled: disabled, type: "button", ...rest }));
+};
+
+function getIconClasses(library, name, libraryFeatures) {
+    let baseClass = '';
+    let iconClass = '';
+    let features = Array.isArray(libraryFeatures)
+        ? libraryFeatures
+        : libraryFeatures
+            ? [libraryFeatures]
+            : [];
+    switch (library) {
+        case 'fa': {
+            const faStyle = features.find(f => ['fas', 'far', 'fab', 'fal', 'fad', 'fat'].includes(f)) || 'fas';
+            baseClass = faStyle;
+            iconClass = `fa-${name}`;
+            features = features.filter(f => f !== faStyle);
+            return [baseClass, iconClass, ...features].join(' ');
+        }
+        case 'mdi':
+            baseClass = 'mdi';
+            iconClass = `mdi-${name}`;
+            return [baseClass, iconClass, ...features].join(' ');
+        case 'ion':
+            baseClass = 'ion';
+            iconClass = `ion-${name}`;
+            return [baseClass, iconClass, ...features].join(' ');
+        default:
+            return [name, ...features].join(' ');
+    }
+}
+const Icon = ({ className, textColor, bgColor, name, library = 'fa', libraryFeatures, size, ariaLabel = 'icon', style, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const iconContainerClasses = classNames('icon', {
+        [`is-${size}`]: size,
+    }, bulmaHelperClasses, className);
+    const iClasses = getIconClasses(library, name, libraryFeatures);
+    return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("i", { className: iClasses }) }));
+};
+
+const IconText = ({ className, textColor, bgColor, iconProps, children, items, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const iconTextClasses = classNames('icon-text', 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 })] })) }));
+};
+
+const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, src, alt, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const imageClasses = classNames('image', className, bulmaHelperClasses, {
+        [`is-${size}`]: size,
+        'has-ratio': size && typeof size === 'string' && size.includes('by'),
+    });
+    let Tag;
+    if (as) {
+        Tag = as;
+    }
+    else if (size && typeof size === 'string' && size.includes('by')) {
+        Tag = 'figure';
+    }
+    else {
+        Tag = 'div';
+    }
+    const content = children ? (children) : (jsxRuntimeExports.jsx("img", { className: classNames({ 'is-rounded': isRounded }), src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
+    return (jsxRuntimeExports.jsx(Tag, { className: imageClasses, ...rest, children: content }));
+};
+
+const Notification = ({ className, color, isLight, hasDelete, onDelete, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    const notificationClasses = classNames('notification', className, bulmaHelperClasses, {
+        [`is-${color}`]: color && validColors.includes(color),
+        'is-light': isLight,
+    });
+    return (jsxRuntimeExports.jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsxRuntimeExports.jsx("button", { className: "delete", onClick: onDelete, "aria-label": "Close notification" })), children] }));
+};
+
+const Progress = ({ className, color, size, value, max, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    const progressClasses = classNames('progress', className, bulmaHelperClasses, {
+        [`is-${color}`]: color && validColors.includes(color),
+        [`is-${size}`]: size,
+    });
+    return (jsxRuntimeExports.jsx("progress", { className: progressClasses, value: value, max: max, ...rest, children: children }));
+};
+
+const validSubTitleSizes = ['1', '2', '3', '4', '5', '6'];
+const validSubTitleElements = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'p',
+];
+const SubTitle = ({ className, size, as = 'h1', children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const element = validSubTitleElements.includes(as) ? as : 'h1';
+    const validSize = size && validSubTitleSizes.includes(size) ? size : undefined;
+    const subTitleClasses = classNames('subtitle', className, bulmaHelperClasses, {
+        [`is-${validSize}`]: validSize,
+    });
+    const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
+    return (jsxRuntimeExports.jsx(Tag, { className: subTitleClasses, ...rest, children: children }));
+};
+
+const Table = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isResponsive, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tableClasses = classNames('table', className, bulmaHelperClasses, {
+        'is-bordered': isBordered,
+        'is-striped': isStriped,
+        'is-narrow': isNarrow,
+        'is-hoverable': isHoverable,
+        'is-fullwidth': isFullwidth,
+    });
+    const tableElement = (jsxRuntimeExports.jsx("table", { className: tableClasses, ...rest, children: children }));
+    return isResponsive ? (jsxRuntimeExports.jsx("div", { className: "table-container", children: tableElement })) : (tableElement);
+};
+
+const validTagColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'black',
+    'dark',
+    'light',
+    'white',
+];
+const validTagSizes = ['normal', 'medium', 'large'];
+const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelete, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tagClasses = classNames('tag', className, bulmaHelperClasses, {
+        [`is-${color}`]: color && validTagColors.includes(color),
+        [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),
+        'is-rounded': isRounded,
+        'is-delete': isDelete,
+        'is-hoverable': isHoverable,
+    });
+    if (isDelete) {
+        return (jsxRuntimeExports.jsx("button", { className: tagClasses, onClick: onDelete, "aria-label": "Delete tag", ...rest }));
+    }
+    return (jsxRuntimeExports.jsx("span", { className: tagClasses, ...rest, children: children }));
+};
+
+const Tags = ({ className, hasAddons, isMultiline, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tagsClasses = classNames('tags', className, bulmaHelperClasses, {
+        'has-addons': hasAddons,
+        'are-multiline': isMultiline,
+    });
+    return (jsxRuntimeExports.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 }));
+};
+
+const validTableColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'black',
+    'dark',
+    'light',
+    'white',
+];
+const Td = ({ className, color, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tdClasses = classNames(className, bulmaHelperClasses, {
+        [`is-${color}`]: color && validTableColors.includes(color),
+    });
+    return (jsxRuntimeExports.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 }));
+};
+
+const validAlignments = ['left', 'right', 'centered'];
+const Th = ({ className, isAligned, width, color, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const thClasses = classNames(className, bulmaHelperClasses, {
+        [`has-text-${isAligned}`]: isAligned && validAlignments.includes(isAligned),
+        [`is-${color}`]: color && validTableColors.includes(color),
+    });
+    return (jsxRuntimeExports.jsx("th", { className: thClasses, style: width
+            ? { width: typeof width === 'number' ? `${width}px` : width }
+            : undefined, ...rest, children: children }));
+};
+
+const Thead = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const theadClasses = classNames(className, bulmaHelperClasses);
+    return (jsxRuntimeExports.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', children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const element = validTitleElements.includes(as) ? as : 'h1';
+    const validSize = size && validTitleSizes.includes(size) ? size : undefined;
+    const titleClasses = classNames('title', className, bulmaHelperClasses, {
+        [`is-${validSize}`]: validSize,
+        'is-spaced': isSpaced,
+    });
+    const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
+    return (jsxRuntimeExports.jsx(Tag, { className: titleClasses, ...rest, children: children }));
+};
+
+const Tr = ({ className, isSelected, color, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const trClasses = classNames(className, bulmaHelperClasses, {
+        'is-selected': isSelected,
+        [`is-${color}`]: color && validTableColors.includes(color),
+    });
+    return (jsxRuntimeExports.jsx("tr", { className: trClasses, ...rest, children: children }));
+};
+
+const Checkbox = forwardRef(({ disabled, className, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    const checkboxClass = classNames('checkbox', bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsxs("label", { className: checkboxClass, children: [jsxRuntimeExports.jsx("input", { ref: ref, type: "checkbox", disabled: disabled, ...rest }), children] }));
+});
+Checkbox.displayName = 'Checkbox';
+
+const Checkboxes = ({ children, className, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    const wrapperClass = classNames('checkboxes', bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: wrapperClass, ...rest, children: children }));
+};
+
+const allowedColors = [...validColors, 'inherit', 'current'];
+const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isLoading, isExpanded, size, textColor, bgColor, iconLeft, iconRight, iconLeftName, iconLeftSize, iconRightName, iconRightSize, className, children, ...props }, ref) => {
+    const Component = (as === 'p' ? 'p' : 'div');
+    const { textColor: _ignoredTextColor, bgColor: _ignoredBgColor, ...restProps } = props;
+    const safeTextColor = allowedColors.includes(textColor)
+        ? textColor
+        : undefined;
+    const safeBgColor = allowedColors.includes(bgColor)
+        ? bgColor
+        : undefined;
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: safeTextColor,
+        backgroundColor: safeBgColor,
+        ...restProps,
+    });
+    const leftIconProps = iconLeft ||
+        (iconLeftName
+            ? {
+                name: iconLeftName,
+                size: iconLeftSize,
+            }
+            : undefined);
+    const rightIconProps = iconRight ||
+        (iconRightName
+            ? {
+                name: iconRightName,
+                size: iconRightSize,
+            }
+            : undefined);
+    const controlClass = classNames('control', bulmaHelperClasses, {
+        'has-icons-left': hasIconsLeft || !!leftIconProps,
+        'has-icons-right': hasIconsRight || !!rightIconProps,
+        'is-loading': isLoading,
+        'is-expanded': isExpanded,
+        [`is-${size}`]: !!size,
+    }, 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" }))] }));
+});
+Control.displayName = 'Control';
+
+const FieldLabel = ({ size, textColor, bgColor, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const fieldLabelClass = classNames('field-label', bulmaHelperClasses, { [`is-${size}`]: size }, className);
+    return (jsxRuntimeExports.jsx("div", { className: fieldLabelClass, ...props, ...rest, children: children }));
+};
+const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const fieldBodyClass = classNames('field-body', bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
+};
+const Field = ({ horizontal, grouped, hasAddons, label, labelSize, labelProps, textColor, bgColor, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const fieldClass = classNames('field', bulmaHelperClasses, {
+        'is-horizontal': horizontal,
+        'has-addons': !!hasAddons,
+        'is-grouped': grouped === true ||
+            grouped === 'centered' ||
+            grouped === 'right' ||
+            grouped === 'multiline',
+        'is-grouped-centered': grouped === 'centered',
+        'is-grouped-right': grouped === 'right',
+        'is-grouped-multiline': grouped === 'multiline',
+    }, className);
+    const mappedLabelSize = labelSize === 'normal' ? undefined : labelSize;
+    let renderedLabel = null;
+    if (label) {
+        if (horizontal) {
+            renderedLabel = (jsxRuntimeExports.jsx(FieldLabel, { size: mappedLabelSize, children: jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames('label', 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('label', 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;
+    if (horizontal) {
+        if (React.isValidElement(children) &&
+            (children.type === FieldBody || children.type.displayName === 'FieldBody')) {
+            content = children;
+        }
+        else {
+            content = jsxRuntimeExports.jsx(FieldBody, { children: children });
+        }
+    }
+    return (jsxRuntimeExports.jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }));
+};
+FieldLabel.displayName = 'FieldLabel';
+FieldBody.displayName = 'FieldBody';
+Field.Label = FieldLabel;
+Field.Body = FieldBody;
+
+const File = forwardRef(({ color, size, isBoxed, isFullwidth, isRight, isCentered, hasName, label, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color,
+        ...props,
+    });
+    let alignmentClass;
+    if (isRight && isCentered) {
+        alignmentClass = 'is-right';
+    }
+    else if (isRight) {
+        alignmentClass = 'is-right';
+    }
+    else if (isCentered) {
+        alignmentClass = 'is-centered';
+    }
+    const fileClass = classNames('file', bulmaHelperClasses, {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size,
+        'is-boxed': isBoxed,
+        'is-fullwidth': isFullwidth,
+        'has-name': hasName,
+    }, 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 })] }) }));
+});
+File.displayName = 'File';
+
+const Input = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled, readOnly, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color,
+        ...props,
+    });
+    const inputClass = classNames('input', bulmaHelperClasses, {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size,
+        'is-rounded': isRounded,
+        'is-static': isStatic,
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
+        'is-loading': isLoading,
+    }, className);
+    return (jsxRuntimeExports.jsx("input", { ref: ref, className: inputClass, disabled: disabled, readOnly: readOnly, ...rest }));
+});
+Input.displayName = 'Input';
+
+const Radio = forwardRef(({ disabled, className, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    const radioClass = classNames('radio', bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsxs("label", { className: radioClass, children: [jsxRuntimeExports.jsx("input", { ref: ref, type: "radio", disabled: disabled, ...rest }), children] }));
+});
+Radio.displayName = 'Radio';
+
+const Radios = ({ children, className, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    const wrapperClass = classNames('radios', bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: wrapperClass, ...rest, children: children }));
+};
+
+const Select = forwardRef(({ color, size, isRounded, isLoading, isActive, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color,
+        ...props,
+    });
+    const selectClass = classNames('select', bulmaHelperClasses, {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size,
+        'is-rounded': isRounded,
+        'is-loading': isLoading,
+        'is-active': isActive,
+    }, className);
+    const selectProps = {
+        disabled,
+        multiple,
+        ...rest,
+    };
+    if (multiple && typeof multipleSize === 'number') {
+        selectProps.size = multipleSize;
+    }
+    return (jsxRuntimeExports.jsx("div", { className: selectClass, children: jsxRuntimeExports.jsx("select", { ref: ref, ...selectProps, children: children }) }));
+});
+Select.displayName = 'Select';
+
+const TextArea = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, isActive, hasFixedSize, className, disabled, readOnly, rows, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color,
+        ...props,
+    });
+    const textareaClass = classNames('textarea', bulmaHelperClasses, {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size,
+        'is-rounded': isRounded,
+        'is-static': isStatic,
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
+        'is-loading': isLoading,
+        'is-active': isActive,
+        'has-fixed-size': hasFixedSize,
+    }, className);
+    return (jsxRuntimeExports.jsx("textarea", { ref: ref, className: textareaClass, disabled: disabled, readOnly: readOnly, rows: rows, ...rest }));
+});
+TextArea.displayName = 'TextArea';
+
+function getCellGridClasses(props) {
+    const classes = [];
+    if (props.colStart !== undefined)
+        classes.push(`is-col-start-${props.colStart}`);
+    if (props.colFromEnd !== undefined)
+        classes.push(`is-col-from-end-${props.colFromEnd}`);
+    if (props.colSpan !== undefined)
+        classes.push(`is-col-span-${props.colSpan}`);
+    if (props.rowStart !== undefined)
+        classes.push(`is-row-start-${props.rowStart}`);
+    if (props.rowFromEnd !== undefined)
+        classes.push(`is-row-from-end-${props.rowFromEnd}`);
+    if (props.rowSpan !== undefined)
+        classes.push(`is-row-span-${props.rowSpan}`);
+    return classes;
+}
+const Cell = ({ colStart, colFromEnd, colSpan, rowStart, rowFromEnd, rowSpan, className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const cellClasses = classNames('cell', ...getCellGridClasses({
+        colStart,
+        colFromEnd,
+        colSpan,
+        rowStart,
+        rowFromEnd,
+        rowSpan,
+    }), className, bulmaHelperClasses);
+    return (jsxRuntimeExports.jsx("div", { className: cellClasses, ...rest, children: children }));
+};
+
+function getGridInnerClasses({ gap, columnGap, rowGap, minCol, }) {
+    const classes = [];
+    if (gap !== undefined)
+        classes.push(`is-gap-${gap}`);
+    if (columnGap !== undefined)
+        classes.push(`is-column-gap-${columnGap}`);
+    if (rowGap !== undefined)
+        classes.push(`is-row-gap-${rowGap}`);
+    if (minCol !== undefined)
+        classes.push(`is-col-min-${minCol}`);
+    return classes;
+}
+function getFixedGridClasses({ fixedCols, fixedColsMobile, fixedColsTablet, fixedColsDesktop, fixedColsWidescreen, fixedColsFullhd, }) {
+    const classes = [];
+    if (fixedCols === 'auto') {
+        classes.push('has-auto-count');
+        return classes;
+    }
+    if (fixedCols !== undefined)
+        classes.push(`has-${fixedCols}-cols`);
+    if (fixedColsMobile !== undefined)
+        classes.push(`has-${fixedColsMobile}-cols-mobile`);
+    if (fixedColsTablet !== undefined)
+        classes.push(`has-${fixedColsTablet}-cols-tablet`);
+    if (fixedColsDesktop !== undefined)
+        classes.push(`has-${fixedColsDesktop}-cols-desktop`);
+    if (fixedColsWidescreen !== undefined)
+        classes.push(`has-${fixedColsWidescreen}-cols-widescreen`);
+    if (fixedColsFullhd !== undefined)
+        classes.push(`has-${fixedColsFullhd}-cols-fullhd`);
+    return classes;
+}
+const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixedColsMobile, fixedColsTablet, fixedColsDesktop, fixedColsWidescreen, fixedColsFullhd, className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const gridClasses = classNames('grid', ...getGridInnerClasses({ gap, columnGap, rowGap, minCol }), bulmaHelperClasses, className);
+    if (isFixed) {
+        const fixedGridClasses = classNames('fixed-grid', ...getFixedGridClasses({
+            fixedCols,
+            fixedColsMobile,
+            fixedColsTablet,
+            fixedColsDesktop,
+            fixedColsWidescreen,
+            fixedColsFullhd,
+        }));
+        return (jsxRuntimeExports.jsx("div", { className: fixedGridClasses, children: jsxRuntimeExports.jsx("div", { className: gridClasses, ...rest, children: children }) }));
+    }
+    return (jsxRuntimeExports.jsx("div", { className: gridClasses, ...rest, children: children }));
+};
+
+const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const validMaxBreakpoints = [
+        'tablet',
+        'desktop',
+        'widescreen',
+    ];
+    let breakpointClass;
+    if (breakpoint) {
+        if (isMax && validMaxBreakpoints.includes(breakpoint)) {
+            breakpointClass = `is-max-${breakpoint}`;
+        }
+        else if (!isMax) {
+            breakpointClass = `is-${breakpoint}`;
+        }
+    }
+    const containerClasses = classNames('container', {
+        'is-fluid': fluid,
+        'is-widescreen': widescreen,
+        'is-fullhd': fullhd,
+    }, breakpointClass, className, bulmaHelperClasses);
+    return (jsxRuntimeExports.jsx("div", { className: containerClasses, ...rest, children: children }));
+};
+
+const Footer = ({ as = 'footer', className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const Tag = as;
+    return (jsxRuntimeExports.jsx(Tag, { className: classNames('footer', bulmaHelperClasses, className), ...rest, children: children }));
+};
+
+const Hero = ({ className, color, size, bgColor, fullheightWithNavbar, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const heroClasses = classNames('hero', bulmaHelperClasses, className, color && `is-${color}`, size && size !== 'fullheight-with-navbar' && `is-${size}`, {
+        'is-fullheight-with-navbar': fullheightWithNavbar || size === 'fullheight-with-navbar',
+    });
+    return (jsxRuntimeExports.jsx("section", { className: heroClasses, ...rest, children: children }));
+};
+const HeroHead = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntimeExports.jsx("div", { className: classNames('hero-head', bulmaHelperClasses, className), ...rest, children: children }));
+};
+const HeroBody = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntimeExports.jsx("div", { className: classNames('hero-body', bulmaHelperClasses, className), ...rest, children: children }));
+};
+const HeroFoot = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntimeExports.jsx("div", { className: classNames('hero-foot', bulmaHelperClasses, className), ...rest, children: children }));
+};
+Hero.Head = HeroHead;
+Hero.Body = HeroBody;
+Hero.Foot = HeroFoot;
+
+const Level = ({ isMobile, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntimeExports.jsx("nav", { className: classNames('level', bulmaHelperClasses, className, {
+            'is-mobile': isMobile,
+        }), ...rest, children: children }));
+};
+const LevelLeft = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntimeExports.jsx("div", { className: classNames('level-left', bulmaHelperClasses, className), ...rest, children: children }));
+};
+const LevelRight = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntimeExports.jsx("div", { className: classNames('level-right', bulmaHelperClasses, className), ...rest, children: children }));
+};
+const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, target, rel, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const Tag = as;
+    if (Tag === 'a') {
+        return (jsxRuntimeExports.jsx("a", { className: classNames('level-item', bulmaHelperClasses, className, {
+                'has-text-centered': hasTextCentered,
+            }), href: href, target: target, rel: rel, ...rest, children: children }));
+    }
+    return (jsxRuntimeExports.jsx(Tag, { className: classNames('level-item', bulmaHelperClasses, className, {
+            'has-text-centered': hasTextCentered,
+        }), ...rest, children: children }));
+};
+Level.Left = LevelLeft;
+Level.Right = LevelRight;
+Level.Item = LevelItem;
+
+const Media = ({ as = 'article', className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const Tag = as;
+    return (jsxRuntimeExports.jsx(Tag, { className: classNames('media', bulmaHelperClasses, className), ...rest, children: children }));
+};
+const MediaLeft = ({ as = 'figure', className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const Tag = as;
+    return (jsxRuntimeExports.jsx(Tag, { className: classNames('media-left', bulmaHelperClasses, className), ...rest, children: children }));
+};
+const MediaContent = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntimeExports.jsx("div", { className: classNames('media-content', bulmaHelperClasses, className), ...rest, children: children }));
+};
+const MediaRight = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntimeExports.jsx("div", { className: classNames('media-right', bulmaHelperClasses, className), ...rest, children: children }));
+};
+Media.Left = MediaLeft;
+Media.Content = MediaContent;
+Media.Right = MediaRight;
+
+const Section = ({ size, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const sectionClasses = classNames('section', className, bulmaHelperClasses, {
+        [`is-${size}`]: size,
+    });
+    return (jsxRuntimeExports.jsx("section", { className: sectionClasses, ...rest, children: children }));
+};
+
+export { Block, Box, Breadcrumb, Button, Buttons, Card, Cell, Checkbox, Checkboxes, Column, Columns, 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, 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, SubTitle, TabItem, TabList, Table, Tabs, Tag, Tags, Tbody, Td, TextArea, Tfoot, Th, Thead, Title, Tr, __test_exports__, classNames, isBrowser, useBulmaClasses, 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