pallote-react 0.15.18 → 0.16.1

package/dist/index.js

@@ -1,1363 +1,137 @@
-import * as React from 'react';
-import React__default, { useState, useEffect, createContext, useRef, useContext } from 'react';
+import * as e$9 from 'react';
+import e__default, { useState, useEffect, createContext, Children, isValidElement, cloneElement, useContext, useRef, forwardRef, useId } from 'react';
 import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var propTypes = {exports: {}};
-
-var reactIs = {exports: {}};
-
-var reactIs_production_min = {};
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactIs_production_min;
-function requireReactIs_production_min() {
-  if (hasRequiredReactIs_production_min) return reactIs_production_min;
-  hasRequiredReactIs_production_min = 1;
-  var b = "function" === typeof Symbol && Symbol.for,
-    c = b ? Symbol.for("react.element") : 60103,
-    d = b ? Symbol.for("react.portal") : 60106,
-    e = b ? Symbol.for("react.fragment") : 60107,
-    f = b ? Symbol.for("react.strict_mode") : 60108,
-    g = b ? Symbol.for("react.profiler") : 60114,
-    h = b ? Symbol.for("react.provider") : 60109,
-    k = b ? Symbol.for("react.context") : 60110,
-    l = b ? Symbol.for("react.async_mode") : 60111,
-    m = b ? Symbol.for("react.concurrent_mode") : 60111,
-    n = b ? Symbol.for("react.forward_ref") : 60112,
-    p = b ? Symbol.for("react.suspense") : 60113,
-    q = b ? Symbol.for("react.suspense_list") : 60120,
-    r = b ? Symbol.for("react.memo") : 60115,
-    t = b ? Symbol.for("react.lazy") : 60116,
-    v = b ? Symbol.for("react.block") : 60121,
-    w = b ? Symbol.for("react.fundamental") : 60117,
-    x = b ? Symbol.for("react.responder") : 60118,
-    y = b ? Symbol.for("react.scope") : 60119;
-  function z(a) {
-    if ("object" === typeof a && null !== a) {
-      var u = a.$$typeof;
-      switch (u) {
-        case c:
-          switch (a = a.type, a) {
-            case l:
-            case m:
-            case e:
-            case g:
-            case f:
-            case p:
-              return a;
-            default:
-              switch (a = a && a.$$typeof, a) {
-                case k:
-                case n:
-                case t:
-                case r:
-                case h:
-                  return a;
-                default:
-                  return u;
-              }
-          }
-        case d:
-          return u;
-      }
-    }
-  }
-  function A(a) {
-    return z(a) === m;
-  }
-  reactIs_production_min.AsyncMode = l;
-  reactIs_production_min.ConcurrentMode = m;
-  reactIs_production_min.ContextConsumer = k;
-  reactIs_production_min.ContextProvider = h;
-  reactIs_production_min.Element = c;
-  reactIs_production_min.ForwardRef = n;
-  reactIs_production_min.Fragment = e;
-  reactIs_production_min.Lazy = t;
-  reactIs_production_min.Memo = r;
-  reactIs_production_min.Portal = d;
-  reactIs_production_min.Profiler = g;
-  reactIs_production_min.StrictMode = f;
-  reactIs_production_min.Suspense = p;
-  reactIs_production_min.isAsyncMode = function (a) {
-    return A(a) || z(a) === l;
-  };
-  reactIs_production_min.isConcurrentMode = A;
-  reactIs_production_min.isContextConsumer = function (a) {
-    return z(a) === k;
-  };
-  reactIs_production_min.isContextProvider = function (a) {
-    return z(a) === h;
-  };
-  reactIs_production_min.isElement = function (a) {
-    return "object" === typeof a && null !== a && a.$$typeof === c;
-  };
-  reactIs_production_min.isForwardRef = function (a) {
-    return z(a) === n;
-  };
-  reactIs_production_min.isFragment = function (a) {
-    return z(a) === e;
-  };
-  reactIs_production_min.isLazy = function (a) {
-    return z(a) === t;
-  };
-  reactIs_production_min.isMemo = function (a) {
-    return z(a) === r;
-  };
-  reactIs_production_min.isPortal = function (a) {
-    return z(a) === d;
-  };
-  reactIs_production_min.isProfiler = function (a) {
-    return z(a) === g;
-  };
-  reactIs_production_min.isStrictMode = function (a) {
-    return z(a) === f;
-  };
-  reactIs_production_min.isSuspense = function (a) {
-    return z(a) === p;
-  };
-  reactIs_production_min.isValidElementType = function (a) {
-    return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
-  };
-  reactIs_production_min.typeOf = z;
-  return reactIs_production_min;
-}
-
-var reactIs_development = {};
-
-/** @license React v16.13.1
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactIs_development;
-function requireReactIs_development() {
-  if (hasRequiredReactIs_development) return reactIs_development;
-  hasRequiredReactIs_development = 1;
-  if (process.env.NODE_ENV !== "production") {
-    (function () {
-
-      // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-      // nor polyfill, then a plain number is used for performance.
-      var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-      var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-      var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-      // (unstable) APIs that have been removed. Can we remove the symbols?
-
-      var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-      var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-      var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-      var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-      var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-      var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-      var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-      var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-      var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-      var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
-      function isValidElementType(type) {
-        return typeof type === 'string' || typeof type === 'function' ||
-        // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-        type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
-      }
-      function typeOf(object) {
-        if (typeof object === 'object' && object !== null) {
-          var $$typeof = object.$$typeof;
-          switch ($$typeof) {
-            case REACT_ELEMENT_TYPE:
-              var type = object.type;
-              switch (type) {
-                case REACT_ASYNC_MODE_TYPE:
-                case REACT_CONCURRENT_MODE_TYPE:
-                case REACT_FRAGMENT_TYPE:
-                case REACT_PROFILER_TYPE:
-                case REACT_STRICT_MODE_TYPE:
-                case REACT_SUSPENSE_TYPE:
-                  return type;
-                default:
-                  var $$typeofType = type && type.$$typeof;
-                  switch ($$typeofType) {
-                    case REACT_CONTEXT_TYPE:
-                    case REACT_FORWARD_REF_TYPE:
-                    case REACT_LAZY_TYPE:
-                    case REACT_MEMO_TYPE:
-                    case REACT_PROVIDER_TYPE:
-                      return $$typeofType;
-                    default:
-                      return $$typeof;
-                  }
-              }
-            case REACT_PORTAL_TYPE:
-              return $$typeof;
-          }
-        }
-        return undefined;
-      } // AsyncMode is deprecated along with isAsyncMode
-
-      var AsyncMode = REACT_ASYNC_MODE_TYPE;
-      var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
-      var ContextConsumer = REACT_CONTEXT_TYPE;
-      var ContextProvider = REACT_PROVIDER_TYPE;
-      var Element = REACT_ELEMENT_TYPE;
-      var ForwardRef = REACT_FORWARD_REF_TYPE;
-      var Fragment = REACT_FRAGMENT_TYPE;
-      var Lazy = REACT_LAZY_TYPE;
-      var Memo = REACT_MEMO_TYPE;
-      var Portal = REACT_PORTAL_TYPE;
-      var Profiler = REACT_PROFILER_TYPE;
-      var StrictMode = REACT_STRICT_MODE_TYPE;
-      var Suspense = REACT_SUSPENSE_TYPE;
-      var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
-
-      function isAsyncMode(object) {
-        {
-          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
-          }
-        }
-        return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
-      }
-      function isConcurrentMode(object) {
-        return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
-      }
-      function isContextConsumer(object) {
-        return typeOf(object) === REACT_CONTEXT_TYPE;
-      }
-      function isContextProvider(object) {
-        return typeOf(object) === REACT_PROVIDER_TYPE;
-      }
-      function isElement(object) {
-        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-      }
-      function isForwardRef(object) {
-        return typeOf(object) === REACT_FORWARD_REF_TYPE;
-      }
-      function isFragment(object) {
-        return typeOf(object) === REACT_FRAGMENT_TYPE;
-      }
-      function isLazy(object) {
-        return typeOf(object) === REACT_LAZY_TYPE;
-      }
-      function isMemo(object) {
-        return typeOf(object) === REACT_MEMO_TYPE;
-      }
-      function isPortal(object) {
-        return typeOf(object) === REACT_PORTAL_TYPE;
-      }
-      function isProfiler(object) {
-        return typeOf(object) === REACT_PROFILER_TYPE;
-      }
-      function isStrictMode(object) {
-        return typeOf(object) === REACT_STRICT_MODE_TYPE;
-      }
-      function isSuspense(object) {
-        return typeOf(object) === REACT_SUSPENSE_TYPE;
-      }
-      reactIs_development.AsyncMode = AsyncMode;
-      reactIs_development.ConcurrentMode = ConcurrentMode;
-      reactIs_development.ContextConsumer = ContextConsumer;
-      reactIs_development.ContextProvider = ContextProvider;
-      reactIs_development.Element = Element;
-      reactIs_development.ForwardRef = ForwardRef;
-      reactIs_development.Fragment = Fragment;
-      reactIs_development.Lazy = Lazy;
-      reactIs_development.Memo = Memo;
-      reactIs_development.Portal = Portal;
-      reactIs_development.Profiler = Profiler;
-      reactIs_development.StrictMode = StrictMode;
-      reactIs_development.Suspense = Suspense;
-      reactIs_development.isAsyncMode = isAsyncMode;
-      reactIs_development.isConcurrentMode = isConcurrentMode;
-      reactIs_development.isContextConsumer = isContextConsumer;
-      reactIs_development.isContextProvider = isContextProvider;
-      reactIs_development.isElement = isElement;
-      reactIs_development.isForwardRef = isForwardRef;
-      reactIs_development.isFragment = isFragment;
-      reactIs_development.isLazy = isLazy;
-      reactIs_development.isMemo = isMemo;
-      reactIs_development.isPortal = isPortal;
-      reactIs_development.isProfiler = isProfiler;
-      reactIs_development.isStrictMode = isStrictMode;
-      reactIs_development.isSuspense = isSuspense;
-      reactIs_development.isValidElementType = isValidElementType;
-      reactIs_development.typeOf = typeOf;
-    })();
-  }
-  return reactIs_development;
-}
-
-var hasRequiredReactIs;
-function requireReactIs() {
-  if (hasRequiredReactIs) return reactIs.exports;
-  hasRequiredReactIs = 1;
-  if (process.env.NODE_ENV === 'production') {
-    reactIs.exports = requireReactIs_production_min();
-  } else {
-    reactIs.exports = requireReactIs_development();
-  }
-  return reactIs.exports;
-}
-
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-var objectAssign;
-var hasRequiredObjectAssign;
-function requireObjectAssign() {
-  if (hasRequiredObjectAssign) return objectAssign;
-  hasRequiredObjectAssign = 1;
-  /* eslint-disable no-unused-vars */
-  var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-  var hasOwnProperty = Object.prototype.hasOwnProperty;
-  var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-  function toObject(val) {
-    if (val === null || val === undefined) {
-      throw new TypeError('Object.assign cannot be called with null or undefined');
-    }
-    return Object(val);
-  }
-  function shouldUseNative() {
-    try {
-      if (!Object.assign) {
-        return false;
-      }
-
-      // Detect buggy property enumeration order in older V8 versions.
-
-      // https://bugs.chromium.org/p/v8/issues/detail?id=4118
-      var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
-      test1[5] = 'de';
-      if (Object.getOwnPropertyNames(test1)[0] === '5') {
-        return false;
-      }
-
-      // https://bugs.chromium.org/p/v8/issues/detail?id=3056
-      var test2 = {};
-      for (var i = 0; i < 10; i++) {
-        test2['_' + String.fromCharCode(i)] = i;
-      }
-      var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
-        return test2[n];
-      });
-      if (order2.join('') !== '0123456789') {
-        return false;
-      }
-
-      // https://bugs.chromium.org/p/v8/issues/detail?id=3056
-      var test3 = {};
-      'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
-        test3[letter] = letter;
-      });
-      if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
-        return false;
-      }
-      return true;
-    } catch (err) {
-      // We don't expect any of the above to throw, but better to be safe.
-      return false;
-    }
-  }
-  objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
-    var from;
-    var to = toObject(target);
-    var symbols;
-    for (var s = 1; s < arguments.length; s++) {
-      from = Object(arguments[s]);
-      for (var key in from) {
-        if (hasOwnProperty.call(from, key)) {
-          to[key] = from[key];
-        }
-      }
-      if (getOwnPropertySymbols) {
-        symbols = getOwnPropertySymbols(from);
-        for (var i = 0; i < symbols.length; i++) {
-          if (propIsEnumerable.call(from, symbols[i])) {
-            to[symbols[i]] = from[symbols[i]];
-          }
-        }
-      }
-    }
-    return to;
-  };
-  return objectAssign;
-}
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var ReactPropTypesSecret_1;
-var hasRequiredReactPropTypesSecret;
-function requireReactPropTypesSecret() {
-  if (hasRequiredReactPropTypesSecret) return ReactPropTypesSecret_1;
-  hasRequiredReactPropTypesSecret = 1;
-  var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-  ReactPropTypesSecret_1 = ReactPropTypesSecret;
-  return ReactPropTypesSecret_1;
-}
-
-var has;
-var hasRequiredHas;
-function requireHas() {
-  if (hasRequiredHas) return has;
-  hasRequiredHas = 1;
-  has = Function.call.bind(Object.prototype.hasOwnProperty);
-  return has;
-}
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var checkPropTypes_1;
-var hasRequiredCheckPropTypes;
-function requireCheckPropTypes() {
-  if (hasRequiredCheckPropTypes) return checkPropTypes_1;
-  hasRequiredCheckPropTypes = 1;
-  var printWarning = function () {};
-  if (process.env.NODE_ENV !== 'production') {
-    var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
-    var loggedTypeFailures = {};
-    var has = /*@__PURE__*/requireHas();
-    printWarning = function (text) {
-      var message = 'Warning: ' + text;
-      if (typeof console !== 'undefined') {
-        console.error(message);
-      }
-      try {
-        // --- Welcome to debugging React ---
-        // This error was thrown as a convenience so that you can use this stack
-        // to find the callsite that caused this warning to fire.
-        throw new Error(message);
-      } catch (x) {/**/}
+const Color = ({ fill, stroke, customFill, customStroke, className, children, ...props }) => {
+    const style = {
+        ...(customFill ? { backgroundColor: customFill } : {}),
+        ...(customStroke ? { border: `1px solid ${customStroke}` } : {})
     };
-  }
+    const childClassName = classnames(children.props.className, className, {
+        [`fill-${fill}`]: fill,
+        [`stroke-${stroke}`]: stroke
+    });
+    return e__default.cloneElement(children, {
+        className: childClassName,
+        style: { ...children.props.style, ...style },
+        ...props
+    });
+};
 
-  /**
-   * Assert that the values match with the type specs.
-   * Error messages are memorized and will only be shown once.
-   *
-   * @param {object} typeSpecs Map of name to a ReactPropType
-   * @param {object} values Runtime values that need to be type-checked
-   * @param {string} location e.g. "prop", "context", "child context"
-   * @param {string} componentName Name of the component for error messages.
-   * @param {?Function} getStack Returns the component stack.
-   * @private
-   */
-  function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
-    if (process.env.NODE_ENV !== 'production') {
-      for (var typeSpecName in typeSpecs) {
-        if (has(typeSpecs, typeSpecName)) {
-          var error;
-          // Prop type validation may throw. In case they do, we don't want to
-          // fail the render phase where it didn't fail before. So we log it.
-          // After these have been cleaned up, we'll let them throw.
-          try {
-            // This is intentionally an invariant that gets caught. It's the same
-            // behavior as without this statement except with a better message.
-            if (typeof typeSpecs[typeSpecName] !== 'function') {
-              var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
-              err.name = 'Invariant Violation';
-              throw err;
-            }
-            error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
-          } catch (ex) {
-            error = ex;
-          }
-          if (error && !(error instanceof Error)) {
-            printWarning((componentName || 'React class') + ': type specification of ' + location + ' `' + typeSpecName + '` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).');
-          }
-          if (error instanceof Error && !(error.message in loggedTypeFailures)) {
-            // Only monitor this failure once because there tends to be a lot of the
-            // same error.
-            loggedTypeFailures[error.message] = true;
-            var stack = getStack ? getStack() : '';
-            printWarning('Failed ' + location + ' type: ' + error.message + (stack != null ? stack : ''));
-          }
+const viewportSizes = {
+    'mobile-sm': 375,
+    'mobile': 576,
+    'tablet': 768,
+    'laptop': 1024,
+    'desktop': 1280
+};
+const Display = ({ show, hide, children }) => {
+    const [isDisplayed, setDisplayed] = useState(false);
+    const updateMedia = () => {
+        if (show === 'touch') {
+            setDisplayed(navigator.maxTouchPoints > 0);
         }
-      }
-    }
-  }
-
-  /**
-   * Resets warning cache when testing.
-   *
-   * @private
-   */
-  checkPropTypes.resetWarningCache = function () {
-    if (process.env.NODE_ENV !== 'production') {
-      loggedTypeFailures = {};
-    }
-  };
-  checkPropTypes_1 = checkPropTypes;
-  return checkPropTypes_1;
-}
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var factoryWithTypeCheckers;
-var hasRequiredFactoryWithTypeCheckers;
-function requireFactoryWithTypeCheckers() {
-  if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
-  hasRequiredFactoryWithTypeCheckers = 1;
-  var ReactIs = requireReactIs();
-  var assign = requireObjectAssign();
-  var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
-  var has = /*@__PURE__*/requireHas();
-  var checkPropTypes = /*@__PURE__*/requireCheckPropTypes();
-  var printWarning = function () {};
-  if (process.env.NODE_ENV !== 'production') {
-    printWarning = function (text) {
-      var message = 'Warning: ' + text;
-      if (typeof console !== 'undefined') {
-        console.error(message);
-      }
-      try {
-        // --- Welcome to debugging React ---
-        // This error was thrown as a convenience so that you can use this stack
-        // to find the callsite that caused this warning to fire.
-        throw new Error(message);
-      } catch (x) {}
-    };
-  }
-  function emptyFunctionThatReturnsNull() {
-    return null;
-  }
-  factoryWithTypeCheckers = function (isValidElement, throwOnDirectAccess) {
-    /* global Symbol */
-    var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
-    var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
-
-    /**
-     * Returns the iterator method function contained on the iterable object.
-     *
-     * Be sure to invoke the function with the iterable as context:
-     *
-     *     var iteratorFn = getIteratorFn(myIterable);
-     *     if (iteratorFn) {
-     *       var iterator = iteratorFn.call(myIterable);
-     *       ...
-     *     }
-     *
-     * @param {?object} maybeIterable
-     * @return {?function}
-     */
-    function getIteratorFn(maybeIterable) {
-      var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
-      if (typeof iteratorFn === 'function') {
-        return iteratorFn;
-      }
-    }
-
-    /**
-     * Collection of methods that allow declaration and validation of props that are
-     * supplied to React components. Example usage:
-     *
-     *   var Props = require('ReactPropTypes');
-     *   var MyArticle = React.createClass({
-     *     propTypes: {
-     *       // An optional string prop named "description".
-     *       description: Props.string,
-     *
-     *       // A required enum prop named "category".
-     *       category: Props.oneOf(['News','Photos']).isRequired,
-     *
-     *       // A prop named "dialog" that requires an instance of Dialog.
-     *       dialog: Props.instanceOf(Dialog).isRequired
-     *     },
-     *     render: function() { ... }
-     *   });
-     *
-     * A more formal specification of how these methods are used:
-     *
-     *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
-     *   decl := ReactPropTypes.{type}(.isRequired)?
-     *
-     * Each and every declaration produces a function with the same signature. This
-     * allows the creation of custom validation functions. For example:
-     *
-     *  var MyLink = React.createClass({
-     *    propTypes: {
-     *      // An optional string or URI prop named "href".
-     *      href: function(props, propName, componentName) {
-     *        var propValue = props[propName];
-     *        if (propValue != null && typeof propValue !== 'string' &&
-     *            !(propValue instanceof URI)) {
-     *          return new Error(
-     *            'Expected a string or an URI for ' + propName + ' in ' +
-     *            componentName
-     *          );
-     *        }
-     *      }
-     *    },
-     *    render: function() {...}
-     *  });
-     *
-     * @internal
-     */
-
-    var ANONYMOUS = '<<anonymous>>';
-
-    // Important!
-    // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
-    var ReactPropTypes = {
-      array: createPrimitiveTypeChecker('array'),
-      bigint: createPrimitiveTypeChecker('bigint'),
-      bool: createPrimitiveTypeChecker('boolean'),
-      func: createPrimitiveTypeChecker('function'),
-      number: createPrimitiveTypeChecker('number'),
-      object: createPrimitiveTypeChecker('object'),
-      string: createPrimitiveTypeChecker('string'),
-      symbol: createPrimitiveTypeChecker('symbol'),
-      any: createAnyTypeChecker(),
-      arrayOf: createArrayOfTypeChecker,
-      element: createElementTypeChecker(),
-      elementType: createElementTypeTypeChecker(),
-      instanceOf: createInstanceTypeChecker,
-      node: createNodeChecker(),
-      objectOf: createObjectOfTypeChecker,
-      oneOf: createEnumTypeChecker,
-      oneOfType: createUnionTypeChecker,
-      shape: createShapeTypeChecker,
-      exact: createStrictShapeTypeChecker
-    };
-
-    /**
-     * inlined Object.is polyfill to avoid requiring consumers ship their own
-     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-     */
-    /*eslint-disable no-self-compare*/
-    function is(x, y) {
-      // SameValue algorithm
-      if (x === y) {
-        // Steps 1-5, 7-10
-        // Steps 6.b-6.e: +0 != -0
-        return x !== 0 || 1 / x === 1 / y;
-      } else {
-        // Step 6.a: NaN == NaN
-        return x !== x && y !== y;
-      }
-    }
-    /*eslint-enable no-self-compare*/
-
-    /**
-     * We use an Error-like object for backward compatibility as people may call
-     * PropTypes directly and inspect their output. However, we don't use real
-     * Errors anymore. We don't inspect their stack anyway, and creating them
-     * is prohibitively expensive if they are created too often, such as what
-     * happens in oneOfType() for any type before the one that matched.
-     */
-    function PropTypeError(message, data) {
-      this.message = message;
-      this.data = data && typeof data === 'object' ? data : {};
-      this.stack = '';
-    }
-    // Make `instanceof Error` still work for returned errors.
-    PropTypeError.prototype = Error.prototype;
-    function createChainableTypeChecker(validate) {
-      if (process.env.NODE_ENV !== 'production') {
-        var manualPropTypeCallCache = {};
-        var manualPropTypeWarningCount = 0;
-      }
-      function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
-        componentName = componentName || ANONYMOUS;
-        propFullName = propFullName || propName;
-        if (secret !== ReactPropTypesSecret) {
-          if (throwOnDirectAccess) {
-            // New behavior only for users of `prop-types` package
-            var err = new Error('Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use `PropTypes.checkPropTypes()` to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
-            err.name = 'Invariant Violation';
-            throw err;
-          } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
-            // Old behavior for people using React.PropTypes
-            var cacheKey = componentName + ':' + propName;
-            if (!manualPropTypeCallCache[cacheKey] &&
-            // Avoid spamming the console because they are often not actionable except for lib authors
-            manualPropTypeWarningCount < 3) {
-              printWarning('You are manually calling a React.PropTypes validation ' + 'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' + 'and will throw in the standalone `prop-types` package. ' + 'You may be seeing this warning due to a third-party PropTypes ' + 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.');
-              manualPropTypeCallCache[cacheKey] = true;
-              manualPropTypeWarningCount++;
-            }
-          }
+        else if (hide === 'touch') {
+            setDisplayed(navigator.maxTouchPoints === 0);
         }
-        if (props[propName] == null) {
-          if (isRequired) {
-            if (props[propName] === null) {
-              return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
+        else {
+            const viewportValue = viewportSizes[(show || hide)];
+            if (show) {
+                setDisplayed(window.innerWidth <= viewportValue);
             }
-            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
-          }
-          return null;
-        } else {
-          return validate(props, propName, componentName, location, propFullName);
-        }
-      }
-      var chainedCheckType = checkType.bind(null, false);
-      chainedCheckType.isRequired = checkType.bind(null, true);
-      return chainedCheckType;
-    }
-    function createPrimitiveTypeChecker(expectedType) {
-      function validate(props, propName, componentName, location, propFullName, secret) {
-        var propValue = props[propName];
-        var propType = getPropType(propValue);
-        if (propType !== expectedType) {
-          // `propValue` being instance of, say, date/regexp, pass the 'object'
-          // check, but we can offer a more precise error message here rather than
-          // 'of type `object`'.
-          var preciseType = getPreciseType(propValue);
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'), {
-            expectedType: expectedType
-          });
-        }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function createAnyTypeChecker() {
-      return createChainableTypeChecker(emptyFunctionThatReturnsNull);
-    }
-    function createArrayOfTypeChecker(typeChecker) {
-      function validate(props, propName, componentName, location, propFullName) {
-        if (typeof typeChecker !== 'function') {
-          return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
-        }
-        var propValue = props[propName];
-        if (!Array.isArray(propValue)) {
-          var propType = getPropType(propValue);
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
-        }
-        for (var i = 0; i < propValue.length; i++) {
-          var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);
-          if (error instanceof Error) {
-            return error;
-          }
-        }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function createElementTypeChecker() {
-      function validate(props, propName, componentName, location, propFullName) {
-        var propValue = props[propName];
-        if (!isValidElement(propValue)) {
-          var propType = getPropType(propValue);
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
-        }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function createElementTypeTypeChecker() {
-      function validate(props, propName, componentName, location, propFullName) {
-        var propValue = props[propName];
-        if (!ReactIs.isValidElementType(propValue)) {
-          var propType = getPropType(propValue);
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
-        }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function createInstanceTypeChecker(expectedClass) {
-      function validate(props, propName, componentName, location, propFullName) {
-        if (!(props[propName] instanceof expectedClass)) {
-          var expectedClassName = expectedClass.name || ANONYMOUS;
-          var actualClassName = getClassName(props[propName]);
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
-        }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function createEnumTypeChecker(expectedValues) {
-      if (!Array.isArray(expectedValues)) {
-        if (process.env.NODE_ENV !== 'production') {
-          if (arguments.length > 1) {
-            printWarning('Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' + 'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).');
-          } else {
-            printWarning('Invalid argument supplied to oneOf, expected an array.');
-          }
-        }
-        return emptyFunctionThatReturnsNull;
-      }
-      function validate(props, propName, componentName, location, propFullName) {
-        var propValue = props[propName];
-        for (var i = 0; i < expectedValues.length; i++) {
-          if (is(propValue, expectedValues[i])) {
-            return null;
-          }
-        }
-        var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
-          var type = getPreciseType(value);
-          if (type === 'symbol') {
-            return String(value);
-          }
-          return value;
-        });
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function createObjectOfTypeChecker(typeChecker) {
-      function validate(props, propName, componentName, location, propFullName) {
-        if (typeof typeChecker !== 'function') {
-          return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
-        }
-        var propValue = props[propName];
-        var propType = getPropType(propValue);
-        if (propType !== 'object') {
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
-        }
-        for (var key in propValue) {
-          if (has(propValue, key)) {
-            var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
-            if (error instanceof Error) {
-              return error;
+            else if (hide) {
+                setDisplayed(window.innerWidth > viewportValue);
             }
-          }
-        }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function createUnionTypeChecker(arrayOfTypeCheckers) {
-      if (!Array.isArray(arrayOfTypeCheckers)) {
-        process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
-        return emptyFunctionThatReturnsNull;
-      }
-      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
-        var checker = arrayOfTypeCheckers[i];
-        if (typeof checker !== 'function') {
-          printWarning('Invalid argument supplied to oneOfType. Expected an array of check functions, but ' + 'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.');
-          return emptyFunctionThatReturnsNull;
-        }
-      }
-      function validate(props, propName, componentName, location, propFullName) {
-        var expectedTypes = [];
-        for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
-          var checker = arrayOfTypeCheckers[i];
-          var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret);
-          if (checkerResult == null) {
-            return null;
-          }
-          if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
-            expectedTypes.push(checkerResult.data.expectedType);
-          }
         }
-        var expectedTypesMessage = expectedTypes.length > 0 ? ', expected one of type [' + expectedTypes.join(', ') + ']' : '';
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function createNodeChecker() {
-      function validate(props, propName, componentName, location, propFullName) {
-        if (!isNode(props[propName])) {
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
-        }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function invalidValidatorError(componentName, location, propFullName, key, type) {
-      return new PropTypeError((componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + type + '`.');
-    }
-    function createShapeTypeChecker(shapeTypes) {
-      function validate(props, propName, componentName, location, propFullName) {
-        var propValue = props[propName];
-        var propType = getPropType(propValue);
-        if (propType !== 'object') {
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
-        }
-        for (var key in shapeTypes) {
-          var checker = shapeTypes[key];
-          if (typeof checker !== 'function') {
-            return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
-          }
-          var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
-          if (error) {
-            return error;
-          }
-        }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function createStrictShapeTypeChecker(shapeTypes) {
-      function validate(props, propName, componentName, location, propFullName) {
-        var propValue = props[propName];
-        var propType = getPropType(propValue);
-        if (propType !== 'object') {
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
-        }
-        // We need to check all keys in case some are required but missing from props.
-        var allKeys = assign({}, props[propName], shapeTypes);
-        for (var key in allKeys) {
-          var checker = shapeTypes[key];
-          if (has(shapeTypes, key) && typeof checker !== 'function') {
-            return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
-          }
-          if (!checker) {
-            return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' + '\nBad object: ' + JSON.stringify(props[propName], null, '  ') + '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  '));
-          }
-          var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
-          if (error) {
-            return error;
-          }
+    };
+    useEffect(() => {
+        updateMedia();
+        window.addEventListener('resize', updateMedia);
+        return () => window.removeEventListener('resize', updateMedia);
+    }, [show, hide]);
+    return jsx(Fragment, { children: isDisplayed ? children : null });
+};
+
+const Grid = ({ item, wrap, direction, justify, items, self, gap, col, colxs, colsm, colmd, collg, colxl, className, children, ...props }) => {
+    return (jsx("div", { className: classnames('flex', {
+            'flex-wrap': wrap,
+            [`direction-${direction}`]: direction,
+            [`justify-${justify}`]: justify,
+            [`items-${items}`]: items,
+            [`slef-${self}`]: self,
+            [`col-${col}`]: col,
+            [`col-xs-${colxs}`]: colxs,
+            [`col-sm-${colsm}`]: colsm,
+            [`col-md-${colmd}`]: colmd,
+            [`col-lg-${collg}`]: collg,
+            [`col-xl-${colxl}`]: colxl,
+            [`gap-${gap}`]: gap
+        }, className), ...props, children: children }));
+};
+
+const Text = ({ variant, align, weight, transform, italic, underline, strikeThrough, code, color, component, className, children, ...props }) => {
+    const Component = component || 'p';
+    return (jsx(Component, { className: classnames([
+            {
+                [`${variant}`]: variant,
+                [`text-${align}`]: align,
+                [`text-${weight}`]: weight,
+                [`text-${transform}`]: transform,
+                [`text-${color}`]: color,
+                'text-italic': italic,
+                'text-underline': underline,
+                'text-strikeThrough': strikeThrough,
+                'text-code': code
+            },
+            className
+        ]), ...props, children: children }));
+};
+
+const AccordionContext = createContext({ size: 'md' });
+const Accordion = ({ size = 'md', allowMultiple = false, transparent, className, children, ...props }) => {
+    const [activeIndices, setActiveIndices] = useState([]);
+    const handleToggle = (index) => {
+        if (allowMultiple) {
+            setActiveIndices(prev => prev.includes(index)
+                ? prev.filter(i => i !== index)
+                : [...prev, index]);
         }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
-    function isNode(propValue) {
-      switch (typeof propValue) {
-        case 'number':
-        case 'string':
-        case 'undefined':
-          return true;
-        case 'boolean':
-          return !propValue;
-        case 'object':
-          if (Array.isArray(propValue)) {
-            return propValue.every(isNode);
-          }
-          if (propValue === null || isValidElement(propValue)) {
-            return true;
-          }
-          var iteratorFn = getIteratorFn(propValue);
-          if (iteratorFn) {
-            var iterator = iteratorFn.call(propValue);
-            var step;
-            if (iteratorFn !== propValue.entries) {
-              while (!(step = iterator.next()).done) {
-                if (!isNode(step.value)) {
-                  return false;
-                }
-              }
-            } else {
-              // Iterator will provide entry [k,v] tuples rather than values.
-              while (!(step = iterator.next()).done) {
-                var entry = step.value;
-                if (entry) {
-                  if (!isNode(entry[1])) {
-                    return false;
-                  }
-                }
-              }
-            }
-          } else {
-            return false;
-          }
-          return true;
-        default:
-          return false;
-      }
-    }
-    function isSymbol(propType, propValue) {
-      // Native Symbol.
-      if (propType === 'symbol') {
-        return true;
-      }
-
-      // falsy value can't be a Symbol
-      if (!propValue) {
-        return false;
-      }
-
-      // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
-      if (propValue['@@toStringTag'] === 'Symbol') {
-        return true;
-      }
-
-      // Fallback for non-spec compliant Symbols which are polyfilled.
-      if (typeof Symbol === 'function' && propValue instanceof Symbol) {
-        return true;
-      }
-      return false;
-    }
-
-    // Equivalent of `typeof` but with special handling for array and regexp.
-    function getPropType(propValue) {
-      var propType = typeof propValue;
-      if (Array.isArray(propValue)) {
-        return 'array';
-      }
-      if (propValue instanceof RegExp) {
-        // Old webkits (at least until Android 4.0) return 'function' rather than
-        // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
-        // passes PropTypes.object.
-        return 'object';
-      }
-      if (isSymbol(propType, propValue)) {
-        return 'symbol';
-      }
-      return propType;
-    }
-
-    // This handles more types than `getPropType`. Only used for error messages.
-    // See `createPrimitiveTypeChecker`.
-    function getPreciseType(propValue) {
-      if (typeof propValue === 'undefined' || propValue === null) {
-        return '' + propValue;
-      }
-      var propType = getPropType(propValue);
-      if (propType === 'object') {
-        if (propValue instanceof Date) {
-          return 'date';
-        } else if (propValue instanceof RegExp) {
-          return 'regexp';
+        else {
+            setActiveIndices(prev => prev.includes(index) ? [] : [index]);
         }
-      }
-      return propType;
-    }
-
-    // Returns a string that is postfixed to a warning about an invalid type.
-    // For example, "undefined" or "of type array"
-    function getPostfixForTypeWarning(value) {
-      var type = getPreciseType(value);
-      switch (type) {
-        case 'array':
-        case 'object':
-          return 'an ' + type;
-        case 'boolean':
-        case 'date':
-        case 'regexp':
-          return 'a ' + type;
-        default:
-          return type;
-      }
-    }
-
-    // Returns class name of the object, if any.
-    function getClassName(propValue) {
-      if (!propValue.constructor || !propValue.constructor.name) {
-        return ANONYMOUS;
-      }
-      return propValue.constructor.name;
-    }
-    ReactPropTypes.checkPropTypes = checkPropTypes;
-    ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
-    ReactPropTypes.PropTypes = ReactPropTypes;
-    return ReactPropTypes;
-  };
-  return factoryWithTypeCheckers;
-}
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var factoryWithThrowingShims;
-var hasRequiredFactoryWithThrowingShims;
-function requireFactoryWithThrowingShims() {
-  if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
-  hasRequiredFactoryWithThrowingShims = 1;
-  var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
-  function emptyFunction() {}
-  function emptyFunctionWithReset() {}
-  emptyFunctionWithReset.resetWarningCache = emptyFunction;
-  factoryWithThrowingShims = function () {
-    function shim(props, propName, componentName, location, propFullName, secret) {
-      if (secret === ReactPropTypesSecret) {
-        // It is still safe when called from React.
-        return;
-      }
-      var err = new Error('Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
-      err.name = 'Invariant Violation';
-      throw err;
-    }
-    shim.isRequired = shim;
-    function getShim() {
-      return shim;
-    }
-    // Important!
-    // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-    var ReactPropTypes = {
-      array: shim,
-      bigint: shim,
-      bool: shim,
-      func: shim,
-      number: shim,
-      object: shim,
-      string: shim,
-      symbol: shim,
-      any: shim,
-      arrayOf: getShim,
-      element: shim,
-      elementType: shim,
-      instanceOf: getShim,
-      node: shim,
-      objectOf: getShim,
-      oneOf: getShim,
-      oneOfType: getShim,
-      shape: getShim,
-      exact: getShim,
-      checkPropTypes: emptyFunctionWithReset,
-      resetWarningCache: emptyFunction
     };
-    ReactPropTypes.PropTypes = ReactPropTypes;
-    return ReactPropTypes;
-  };
-  return factoryWithThrowingShims;
-}
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredPropTypes;
-function requirePropTypes() {
-  if (hasRequiredPropTypes) return propTypes.exports;
-  hasRequiredPropTypes = 1;
-  if (process.env.NODE_ENV !== 'production') {
-    var ReactIs = requireReactIs();
-
-    // By explicitly using `prop-types` you are opting into new development behavior.
-    // http://fb.me/prop-types-in-prod
-    var throwOnDirectAccess = true;
-    propTypes.exports = /*@__PURE__*/requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
-  } else {
-    // By explicitly using `prop-types` you are opting into new production behavior.
-    // http://fb.me/prop-types-in-prod
-    propTypes.exports = /*@__PURE__*/requireFactoryWithThrowingShims()();
-  }
-  return propTypes.exports;
-}
-
-var propTypesExports = /*@__PURE__*/ requirePropTypes();
-var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
-
-const Color = ({
-  fill,
-  stroke,
-  customFill,
-  customStroke,
-  className,
-  children,
-  ...props
-}) => {
-  const style = {
-    ...(customFill ? {
-      backgroundColor: customFill
-    } : {}),
-    ...(customStroke ? {
-      border: `1px solid ${customStroke}`
-    } : {})
-  };
-  const childClassName = classnames(children.props.className, className, {
-    [`fill-${fill}`]: fill,
-    [`stroke-${stroke}`]: stroke
-  });
-  return /*#__PURE__*/React__default.cloneElement(children, {
-    className: childClassName,
-    style: {
-      ...children.props.style,
-      ...style
-    },
-    ...props
-  });
-};
-Color.propTypes = {
-  fill: PropTypes.oneOf(['main', 'contrast', 'grey90', 'grey80', 'grey70', 'grey60', 'grey50', 'grey40', 'grey30', 'grey20', 'grey10', 'grey5', 'default', 'paper', 'primary', 'secondary', 'success', 'info', 'warning', 'error']),
-  stroke: PropTypes.oneOf(['main', 'contrast', 'grey90', 'grey80', 'grey70', 'grey60', 'grey50', 'grey40', 'grey30', 'grey20', 'grey10', 'grey5', 'default', 'paper', 'primary', 'secondary', 'success', 'info', 'warning', 'error']),
-  customFill: PropTypes.string,
-  customStroke: PropTypes.string,
-  className: PropTypes.node,
-  children: PropTypes.node
-};
-
-const viewportSizes = {
-  'mobile-sm': 375,
-  'mobile': 576,
-  'tablet': 768,
-  'laptop': 1024,
-  'desktop': 1280
-};
-const Display = ({
-  show,
-  hide,
-  children
-}) => {
-  const [isDisplayed, setDisplayed] = useState(false);
-  const updateMedia = () => {
-    if (show === 'touch') {
-      setDisplayed(navigator.maxTouchPoints > 0);
-    } else if (hide === 'touch') {
-      setDisplayed(navigator.maxTouchPoints === 0);
-    } else {
-      const viewportValue = viewportSizes[show || hide];
-      if (show) {
-        setDisplayed(window.innerWidth <= viewportValue);
-      } else if (hide) {
-        setDisplayed(window.innerWidth > viewportValue);
-      }
-    }
-  };
-  useEffect(() => {
-    updateMedia();
-    window.addEventListener('resize', updateMedia);
-    return () => window.removeEventListener('resize', updateMedia);
-  }, [show, hide]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isDisplayed ? children : null);
-};
-Display.propTypes = {
-  show: PropTypes.oneOf(['mobile-sm', 'mobile', 'tablet', 'laptop', 'desktop', 'touch']),
-  hide: PropTypes.oneOf(['mobile-sm', 'mobile', 'tablet', 'laptop', 'desktop', 'touch']),
-  children: PropTypes.node
-};
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
-const Grid = ({
-  item,
-  wrap,
-  direction,
-  justify,
-  items,
-  self,
-  gap,
-  col,
-  colxs,
-  colsm,
-  colmd,
-  collg,
-  colxl,
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames('flex', {
-      'flex-wrap': wrap,
-      [`direction-${direction}`]: direction,
-      [`justify-${justify}`]: justify,
-      [`items-${items}`]: items,
-      [`slef-${self}`]: self,
-      [`col-${col}`]: col,
-      [`col-xs-${colxs}`]: colxs,
-      [`col-sm-${colsm}`]: colsm,
-      [`col-md-${colmd}`]: colmd,
-      [`col-lg-${collg}`]: collg,
-      [`col-xl-${colxl}`]: colxl,
-      [`gap-${gap}`]: gap
-    }, className)
-  }, props), children);
-};
-Grid.propTypes = {
-  item: PropTypes.bool,
-  wrap: PropTypes.bool,
-  direction: PropTypes.oneOf(['column', 'columnReverse', 'row', 'rowReverse']),
-  justify: PropTypes.oneOf(['center', 'end', 'start', 'spaceAround', 'spaceBetween', 'spaceEvenly']),
-  items: PropTypes.oneOf(['stretch', 'center', 'end', 'start', 'baseline']),
-  self: PropTypes.oneOf(['stretch', 'center', 'end', 'start', 'baseline']),
-  col: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  colxs: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  colsm: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  colmd: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  collg: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  colxl: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  gap: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  className: PropTypes.node,
-  children: PropTypes.node
-};
-
-const Text = ({
-  variant,
-  align,
-  weight,
-  transform,
-  italic,
-  underline,
-  strikeThrough,
-  code,
-  color,
-  component,
-  className,
-  children,
-  ...props
-}) => {
-  const Component = component || 'p';
-  return /*#__PURE__*/React__default.createElement(Component, _extends({
-    className: classnames([{
-      [`${variant}`]: variant,
-      [`text-${align}`]: align,
-      [`text-${weight}`]: weight,
-      [`text-${transform}`]: transform,
-      [`text-${color}`]: color,
-      'text-italic': italic,
-      'text-underline': underline,
-      'text-strikeThrough': strikeThrough,
-      'text-code': code
-    }, className])
-  }, props), children);
-};
-Text.propTypes = {
-  variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle', 'body', 'caption', 'overline']),
-  align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
-  weight: PropTypes.oneOf(['regular', 'bold']),
-  transform: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'initial', 'inherit']),
-  italic: PropTypes.bool,
-  underline: PropTypes.bool,
-  strikeThrough: PropTypes.bool,
-  code: PropTypes.bool,
-  color: PropTypes.oneOf(['default', 'alt', 'disabled', 'contrast', 'contrastAlt', 'contrastDisabled', 'primary', 'secondary', 'success', 'info', 'warning', 'error']),
-  component: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'legend']),
-  className: PropTypes.node,
-  children: PropTypes.node
+    return (jsx(AccordionContext.Provider, { value: { size }, children: jsx("div", { className: classnames([
+                'accordion',
+                {
+                    [`accordion-${size}`]: size,
+                    'accordion-transparent': transparent
+                },
+                className
+            ]), ...props, children: Children.map(children, (child, index) => {
+                if (isValidElement(child)) {
+                    return cloneElement(child, {
+                        isOpen: activeIndices.includes(index),
+                        onToggle: () => handleToggle(index),
+                        index
+                    });
+                }
+                return null;
+            }) }) }));
 };
 
-const o$3 = /*#__PURE__*/createContext({
+const o$4 = createContext({
   color: "currentColor",
   size: "1em",
   weight: "regular",
   mirrored: false
 });
 
-const p = /*#__PURE__*/React.forwardRef((s, a) => {
-  const {
+const p = e$9.forwardRef(
+  (s, a) => {
+    const {
       alt: n,
       color: r,
       size: t,
@@ -1366,1097 +140,680 @@ const p = /*#__PURE__*/React.forwardRef((s, a) => {
       children: i,
       weights: m,
       ...x
-    } = s,
-    {
+    } = s, {
       color: d = "currentColor",
       size: l,
       weight: f = "regular",
       mirrored: g = false,
       ...w
-    } = React.useContext(o$3);
-  return /* @__PURE__ */React.createElement("svg", {
-    ref: a,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: t != null ? t : l,
-    height: t != null ? t : l,
-    fill: r != null ? r : d,
-    viewBox: "0 0 256 256",
-    transform: c || g ? "scale(-1, 1)" : void 0,
-    ...w,
-    ...x
-  }, !!n && /* @__PURE__ */React.createElement("title", null, n), i, m.get(o != null ? o : f));
-});
+    } = e$9.useContext(o$4);
+    return /* @__PURE__ */ e$9.createElement(
+      "svg",
+      {
+        ref: a,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: t != null ? t : l,
+        height: t != null ? t : l,
+        fill: r != null ? r : d,
+        viewBox: "0 0 256 256",
+        transform: c || g ? "scale(-1, 1)" : void 0,
+        ...w,
+        ...x
+      },
+      !!n && /* @__PURE__ */ e$9.createElement("title", null, n),
+      i,
+      m.get(o != null ? o : f)
+    );
+  }
+);
 p.displayName = "IconBase";
 
-const a$4 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"
-}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M216,56V200a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V56A16,16,0,0,1,56,40H200A16,16,0,0,1,216,56Z",
-  opacity: "0.2"
-}), /* @__PURE__ */React.createElement("path", {
-  d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
-}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM181.66,170.34a8,8,0,0,1-11.32,11.32L128,139.31,85.66,181.66a8,8,0,0,1-11.32-11.32L116.69,128,74.34,85.66A8,8,0,0,1,85.66,74.34L128,116.69l42.34-42.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
-}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z"
-}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
-}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M202.83,197.17a4,4,0,0,1-5.66,5.66L128,133.66,58.83,202.83a4,4,0,0,1-5.66-5.66L122.34,128,53.17,58.83a4,4,0,0,1,5.66-5.66L128,122.34l69.17-69.17a4,4,0,1,1,5.66,5.66L133.66,128Z"
-}))]]);
-
-const e$6 = /*#__PURE__*/React.forwardRef((r, t) => /* @__PURE__ */React.createElement(p, {
-  ref: t,
-  ...r,
-  weights: a$4
-}));
-e$6.displayName = "XIcon";
-
-const Alert = ({
-  color = 'success',
-  variant = 'toast',
-  title,
-  subtitle,
-  dense,
-  noIcon,
-  show,
-  onClose,
-  className,
-  ...props
-}) => {
-  const [shouldRender, setRender] = useState(show);
-  const [container] = useState(() => {
-    let el = document.getElementById('alerts');
-    if (!el) {
-      el = document.createElement('div');
-      el.id = 'alerts';
-      document.body.appendChild(el);
+const t$2 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,96l-80,80L48,96Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M215.39,92.94A8,8,0,0,0,208,88H48a8,8,0,0,0-5.66,13.66l80,80a8,8,0,0,0,11.32,0l80-80A8,8,0,0,0,215.39,92.94ZM128,164.69,67.31,104H188.69Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z" }))
+  ]
+]);
+
+const e$8 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: t$2 }));
+e$8.displayName = "CaretDownIcon";
+
+const AccordionItem = ({ icon, label, disabled, className, children, isOpen = false, onToggle, index = 0, ...props }) => {
+    const { size } = useContext(AccordionContext);
+    const contentRef = useRef(null);
+    const [maxHeight, setMaxHeight] = useState('0px');
+    const labelVariant = size === 'sm' ? 'caption' : size === 'lg' ? 'subtitle' : 'body';
+    const headerId = `accordion-header-${index}`;
+    const panelId = `accordion-panel-${index}`;
+    useEffect(() => {
+        if (isOpen && contentRef.current) {
+            setMaxHeight(`${contentRef.current.scrollHeight}px`);
+        }
+        else {
+            setMaxHeight('0px');
+        }
+    }, [isOpen]);
+    const handleClick = () => {
+        if (!disabled && onToggle) {
+            onToggle();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleClick();
+        }
+    };
+    return (jsxs("div", { className: classnames([
+            'accordion_item',
+            {
+                'accordion_item-active': isOpen,
+                'accordion_item-disabled': disabled
+            },
+            className
+        ]), ...props, children: [jsxs("button", { type: "button", id: headerId, className: classnames('accordion_control'), onClick: handleClick, onKeyDown: handleKeyDown, "aria-expanded": isOpen, "aria-controls": panelId, "aria-disabled": disabled ? true : undefined, disabled: disabled, children: [icon ? jsx("span", { className: "accordion_icon", "aria-hidden": "true", children: icon }) : null, jsx(Text, { className: "accordion_header", variant: labelVariant, weight: "bold", children: label }), jsx(e$8, { className: "accordion_icon accordion_icon-arrow", "aria-hidden": "true" })] }), jsx("div", { id: panelId, ref: contentRef, role: "region", "aria-labelledby": headerId, className: classnames('accordion_content'), style: { maxHeight }, hidden: !isOpen, children: children })] }));
+};
+
+const a$6 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement(
+      "path",
+      {
+        d: "M216,56V200a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V56A16,16,0,0,1,56,40H200A16,16,0,0,1,216,56Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ e$9.createElement("path", { d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM181.66,170.34a8,8,0,0,1-11.32,11.32L128,139.31,85.66,181.66a8,8,0,0,1-11.32-11.32L116.69,128,74.34,85.66A8,8,0,0,1,85.66,74.34L128,116.69l42.34-42.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M202.83,197.17a4,4,0,0,1-5.66,5.66L128,133.66,58.83,202.83a4,4,0,0,1-5.66-5.66L122.34,128,53.17,58.83a4,4,0,0,1,5.66-5.66L128,122.34l69.17-69.17a4,4,0,1,1,5.66,5.66L133.66,128Z" }))
+  ]
+]);
+
+const e$7 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$6 }));
+e$7.displayName = "XIcon";
+
+const Alert = ({ color = 'success', variant = 'toast', title, subtitle, dense, noIcon, show, onClose, className, ...props }) => {
+    const [shouldRender, setRender] = useState(show);
+    const [container] = useState(() => {
+        let el = document.getElementById('alerts');
+        if (!el) {
+            el = document.createElement('div');
+            el.id = 'alerts';
+            document.body.appendChild(el);
+        }
+        return el;
+    });
+    useEffect(() => {
+        if (show)
+            setRender(true);
+    }, [show]);
+    const onAnimationEnd = () => {
+        if (!show)
+            setRender(false);
+    };
+    const alert = (jsxs("div", { role: "alert", "aria-live": variant === 'notice' ? undefined : 'polite', className: classnames([
+            'alert',
+            {
+                [`alert-${color}`]: color,
+                [`alert-${variant}`]: variant,
+                'alert-slideIn': show,
+                'alert-slideOut': !show,
+                'alert-dense': dense,
+                'alert-noIcon': noIcon
+            },
+            className
+        ]), onAnimationEnd: onAnimationEnd, ...props, children: [jsxs("div", { className: classnames('alert_content'), children: [title ? jsx(Text, { className: classnames('alert_title'), variant: dense ? 'caption' : 'body', weight: 'bold', children: title }) : null, subtitle ? jsx(Text, { variant: dense ? 'overline' : 'caption', className: classnames('alert_subtitle'), children: subtitle }) : null] }), onClose ? (jsx("button", { type: "button", className: classnames('alert_close'), onClick: onClose, "aria-label": "Dismiss alert", children: jsx(e$7, { size: dense ? 14 : 16, "aria-hidden": "true" }) })) : null] }));
+    if (variant === 'notice') {
+        return jsx(Fragment, { children: alert });
     }
-    return el;
-  });
-  useEffect(() => {
-    if (show) setRender(true);
-  }, [show]);
-  const onAnimationEnd = () => {
-    if (!show) setRender(false);
-  };
-  let alert = /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['alert', {
-      [`alert-${color}`]: color,
-      [`alert-${variant}`]: variant,
-      'alert-slideIn': show,
-      'alert-slideOut': !show,
-      'alert-dense': dense,
-      'alert-noIcon': noIcon
-    }, className]),
-    onAnimationEnd: onAnimationEnd
-  }, props), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('alert_content')
-  }, title ? /*#__PURE__*/React__default.createElement(Text, {
-    className: classnames('alert_title'),
-    variant: dense ? 'caption' : 'body',
-    weight: "bold"
-  }, title) : null, subtitle ? /*#__PURE__*/React__default.createElement(Text, {
-    variant: dense ? 'overline' : 'caption',
-    className: classnames('alert_subtitle')
-  }, subtitle) : null), onClose ? /*#__PURE__*/React__default.createElement(e$6, {
-    className: classnames('alert_close'),
-    onClick: onClose,
-    size: dense ? 14 : 16
-  }) : null);
-  if (variant === 'notice') {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, alert);
-  } else {
-    return /*#__PURE__*/createPortal(shouldRender && alert, container);
-  }
-};
-Alert.propTypes = {
-  color: PropTypes.oneOf(['success', 'info', 'warning', 'error']),
-  variant: PropTypes.oneOf(['bar', 'toast', 'notice']),
-  title: PropTypes.string.isRequired,
-  subtitle: PropTypes.string,
-  dense: PropTypes.bool,
-  noIcon: PropTypes.bool,
-  show: PropTypes.bool,
-  onClose: PropTypes.func,
-  className: PropTypes.node
-};
-
-const Breadcrumbs = ({
-  items,
-  separator = "slash",
-  className
-}) => /*#__PURE__*/React__default.createElement("nav", {
-  "aria-label": "breadcrumbs",
-  className: classnames(['breadcrumbs', {
-    [`breadcrumbs-${separator}`]: separator
-  }, className])
-}, /*#__PURE__*/React__default.createElement("ol", null, items.map((item, index) => /*#__PURE__*/React__default.createElement("li", {
-  key: index,
-  className: "breadcrumbs_item"
-}, index === items.length - 1 ? /*#__PURE__*/React__default.createElement("p", {
-  "aria-current": "page"
-}, item.label) : /*#__PURE__*/React__default.createElement("a", {
-  href: item.href
-}, item.label)))));
-Breadcrumbs.propTypes = {
-  items: PropTypes.array.isRequired,
-  separator: PropTypes.oneOf(['slash', 'arrow']),
-  className: PropTypes.node
-};
-
-const Button = /*#__PURE__*/React__default.forwardRef(({
-  component = 'button',
-  kind,
-  variant = 'fill',
-  size = 'md',
-  color = 'primary',
-  fullWidth,
-  disabled,
-  iconLeft,
-  iconRight,
-  className,
-  children = 'button',
-  type = 'button',
-  ...props
-}, ref) => {
-  const Component = component || 'button';
-  let content;
-  if (kind === 'icon') {
-    content = children;
-  } else {
-    content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, iconLeft && iconLeft, children, iconRight && iconRight);
-  }
-  return /*#__PURE__*/React__default.createElement(Component, _extends({
-    className: classnames(['button', {
-      [`button-${size}`]: size,
-      [`button-${color}`]: color,
-      [`button-${kind}`]: kind,
-      [`button-${variant}`]: variant,
-      'button-fullWidth': fullWidth,
-      'button-disabled': disabled
-    }, className]),
-    ref: ref,
-    disabled: Component === 'button' ? disabled : undefined
-  }, Component === 'button' ? {
-    type
-  } : {}, props), content);
-});
-Button.displayName = 'Button';
-Button.propTypes = {
-  component: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a']), PropTypes.elementType]),
-  kind: PropTypes.oneOf(['text', 'icon']),
-  variant: PropTypes.oneOf(['fill', 'stroke', 'transparent']),
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  color: PropTypes.oneOf(['primary', 'secondary', 'grey', 'success', 'info', 'warning', 'error', 'main', 'contrast']),
-  fullWidth: PropTypes.bool,
-  disabled: PropTypes.bool,
-  iconLeft: PropTypes.node,
-  iconRight: PropTypes.node,
-  className: PropTypes.node,
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-  children: PropTypes.node.isRequired
-};
-
-const Buttons = ({
-  direction = 'landscape',
-  fullWidth,
-  wide,
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['buttons', {
-      [`buttons-${direction}`]: direction,
-      'buttons-fullWidth': fullWidth,
-      'buttons-wide': wide
-    }, className])
-  }, props), children);
-};
-Buttons.propTypes = {
-  direction: PropTypes.oneOf(['landscape', 'portrait']),
-  fullWidth: PropTypes.bool,
-  wide: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const Card = ({
-  size = 'md',
-  fill = 'paper',
-  direction = 'portrait',
-  align = 'left',
-  hasShadow = false,
-  transparent = false,
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement(Color, {
-    fill: transparent ? null : fill
-  }, /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['card', {
-      [`card-${size}`]: size,
-      [`card-${direction}`]: direction,
-      [`card-${align}`]: align,
-      'card-hasShadow': hasShadow,
-      'card-transparent': transparent
-    }, className])
-  }, props), children));
-};
-Card.propTypes = {
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  fill: PropTypes.oneOf(['default', 'paper', 'primary', 'secondary', 'success', 'info', 'warning', 'error']),
-  direction: PropTypes.oneOf(['portrait', 'landscape']),
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  hasShadow: PropTypes.bool,
-  transparent: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const CardActions = ({
-  direction,
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['card_actions', {
-      [`card_actions-${direction}`]: direction
-    }, className])
-  }, props), children);
-};
-CardActions.propTypes = {
-  direction: PropTypes.oneOf(['portrait', 'landscape']),
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const CardContent = ({
-  fullWidth,
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['card_content', {
-      'card_content-fullWidth': fullWidth
-    }, className])
-  }, props), children);
-};
-CardContent.propTypes = {
-  fullWidth: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const CardHeader = ({
-  icon,
-  label,
-  title,
-  subtitle,
-  actions,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['card_header', className])
-  }, props), actions && /*#__PURE__*/React__default.createElement("div", {
-    className: "card_headerActions"
-  }, actions), icon ? /*#__PURE__*/React__default.cloneElement(icon, {
-    className: `${icon.props.className ?? ''} card_icon`
-  }) : null, label ? /*#__PURE__*/React__default.createElement(Text, {
-    className: classnames('card_label')
-  }, label) : null, /*#__PURE__*/React__default.createElement(Text, {
-    className: classnames('card_title')
-  }, title), subtitle ? /*#__PURE__*/React__default.createElement(Text, {
-    className: classnames('card_subtitle')
-  }, subtitle) : null);
-};
-CardHeader.propTypes = {
-  icon: PropTypes.node,
-  label: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  subtitle: PropTypes.string,
-  actions: PropTypes.node,
-  className: PropTypes.node,
-  children: PropTypes.node
-};
-
-const CardMedia = ({
-  width,
-  height,
-  image,
-  fullWidth,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['card_media', {
-      'card_media-fullWidth': fullWidth
-    }, className])
-  }, props), /*#__PURE__*/React__default.createElement("div", {
-    className: 'card_mediaInner',
-    style: {
-      width: width + 'px',
-      paddingBottom: height,
-      backgroundImage: `url(${image})`
+    else {
+        return createPortal(shouldRender && alert, container);
     }
-  }));
-};
-CardMedia.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  image: PropTypes.string.isRequired,
-  fullWidth: PropTypes.bool,
-  className: PropTypes.node
 };
 
-const Checkbox = ({
-  id,
-  value,
-  label,
-  checked,
-  disabled,
-  optional,
-  dense,
-  onChange,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['checkbox', {
-      'checkbox-disabled': disabled,
-      'checkbox-dense': dense
-    }, className])
-  }, /*#__PURE__*/React__default.createElement("input", _extends({
-    className: classnames('checkbox_control'),
-    type: "checkbox",
-    name: id,
-    id: id,
-    value: value,
-    checked: checked,
-    "aria-checked": checked,
-    disabled: disabled,
-    required: !(disabled || optional),
-    onChange: onChange
-  }, props)), /*#__PURE__*/React__default.createElement("label", {
-    className: classnames('checkbox_label'),
-    htmlFor: id
-  }, label));
-};
-Checkbox.propTypes = {
-  id: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  optional: PropTypes.bool,
-  dense: PropTypes.bool,
-  className: PropTypes.node
-};
-
-const InputLabel = ({
-  isLegend = false,
-  htmlFor,
-  label = 'Input label',
-  hint,
-  error,
-  hideLabel = false
-}) => {
-  const LabelTag = isLegend ? 'legend' : 'label';
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement(LabelTag, _extends({
-    className: classnames('input_label', {
-      'sr-only': hideLabel
-    })
-  }, !isLegend && {
-    htmlFor
-  }), label), hint && /*#__PURE__*/React__default.createElement("p", {
-    id: htmlFor + '-hint',
-    className: 'input_hint'
-  }, hint), error && /*#__PURE__*/React__default.createElement("p", {
-    id: htmlFor + '-error',
-    className: 'input_error'
-  }, error));
-};
-InputLabel.propTypes = {
-  isLegend: PropTypes.bool,
-  htmlFor: (props, propName, componentName) => {
-    if (!props.isLegend && !props[propName]) {
-      return new Error(`The prop \`${propName}\` is required in \`${componentName}\` when \`isLegend\` is false.`);
+const Breadcrumbs = ({ items, separator = "slash", className }) => (jsx("nav", { "aria-label": "breadcrumbs", className: classnames([
+        'breadcrumbs',
+        {
+            [`breadcrumbs-${separator}`]: separator,
+        },
+        className
+    ]), children: jsx("ol", { children: items.map((item, index) => (jsx("li", { className: 'breadcrumbs_item', children: index === items.length - 1 ? (jsx("p", { "aria-current": "page", children: item.label })) : (jsx("a", { href: item.href, children: item.label })) }, index))) }) }));
+
+const Button = forwardRef(({ component = 'button', kind, variant = 'fill', size = 'md', color = 'primary', fullWidth, disabled, iconLeft, iconRight, className, children = 'button', type = 'button', ...props }, ref) => {
+    const Component = component;
+    let content;
+    if (kind === 'icon') {
+        content = children;
     }
-  },
-  label: PropTypes.string.isRequired,
-  hint: PropTypes.string,
-  error: PropTypes.string,
-  hideLabel: PropTypes.bool
-};
-
-const Checkboxes = ({
-  id,
-  label = 'Label',
-  direction = 'portrait',
-  error,
-  disabled,
-  optional,
-  dense,
-  hint,
-  hideLabel,
-  children,
-  className
-}) => {
-  return /*#__PURE__*/React__default.createElement("fieldset", _extends({
-    className: classnames(['input', {
-      'js-error': error,
-      'input-disabled': disabled,
-      'input-optional': optional,
-      'input-dense': dense
-    }, className])
-  }, hint || error ? {
-    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
-  } : null), /*#__PURE__*/React__default.createElement(InputLabel, {
-    isLegend: true,
-    label: label,
-    hint: hint,
-    error: error,
-    hideLabel: hideLabel
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['input_control', 'radios', {
-      [`radios-${direction}`]: direction
-    }])
-  }, children));
-};
-Checkboxes.propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  direction: PropTypes.oneOf(['portrait', 'landscape']),
-  error: PropTypes.bool,
-  disabled: PropTypes.bool,
-  optional: PropTypes.bool,
-  dense: PropTypes.bool,
-  hint: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.node
-};
-
-const Divider = ({
-  direction = 'landscape',
-  padding = 'md',
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['divider', {
-      [`divider-${direction}`]: direction,
-      [`divider-${padding}`]: padding
-    }, className])
-  }, props));
-};
-Divider.propTypes = {
-  direction: PropTypes.oneOf(['landscape', 'portrait']),
-  padding: PropTypes.oneOf(['none', 'sm', 'md', 'lg']),
-  className: PropTypes.node
-};
-
-const e$5 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M208,28H188V24a12,12,0,0,0-24,0v4H92V24a12,12,0,0,0-24,0v4H48A20,20,0,0,0,28,48V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V48A20,20,0,0,0,208,28ZM68,52a12,12,0,0,0,24,0h72a12,12,0,0,0,24,0h16V76H52V52ZM52,204V100H204V204Z"
-}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M216,48V88H40V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z",
-  opacity: "0.2"
-}), /* @__PURE__ */React.createElement("path", {
-  d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"
-}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,48H48V48H72v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24Z"
-}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M208,34H182V24a6,6,0,0,0-12,0V34H86V24a6,6,0,0,0-12,0V34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H74V56a6,6,0,0,0,12,0V46h84V56a6,6,0,0,0,12,0V46h26a2,2,0,0,1,2,2V82H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V94H210V208A2,2,0,0,1,208,210Z"
-}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"
-}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M208,36H180V24a4,4,0,0,0-8,0V36H84V24a4,4,0,0,0-8,0V36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36ZM48,44H76V56a4,4,0,0,0,8,0V44h88V56a4,4,0,0,0,8,0V44h28a4,4,0,0,1,4,4V84H44V48A4,4,0,0,1,48,44ZM208,212H48a4,4,0,0,1-4-4V92H212V208A4,4,0,0,1,208,212Z"
-}))]]);
-
-const e$4 = /*#__PURE__*/React.forwardRef((o, r) => /* @__PURE__ */React.createElement(p, {
-  ref: r,
-  ...o,
-  weights: e$5
-}));
-e$4.displayName = "CalendarBlankIcon";
-
-const a$3 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M184.49,167.51a12,12,0,0,1,0,17l-48,48a12,12,0,0,1-17,0l-48-48a12,12,0,0,1,17-17L128,207l39.51-39.52A12,12,0,0,1,184.49,167.51Zm-96-79L128,49l39.51,39.52a12,12,0,0,0,17-17l-48-48a12,12,0,0,0-17,0l-48,48a12,12,0,0,0,17,17Z"
-}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M80,176h96l-48,48ZM128,32,80,80h96Z",
-  opacity: "0.2"
-}), /* @__PURE__ */React.createElement("path", {
-  d: "M176,168H80a8,8,0,0,0-5.66,13.66l48,48a8,8,0,0,0,11.32,0l48-48A8,8,0,0,0,176,168Zm-48,44.69L99.31,184h57.38ZM80,88h96a8,8,0,0,0,5.66-13.66l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,80,88Zm48-44.69L156.69,72H99.31Z"
-}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M72.61,83.06a8,8,0,0,1,1.73-8.72l48-48a8,8,0,0,1,11.32,0l48,48A8,8,0,0,1,176,88H80A8,8,0,0,1,72.61,83.06ZM176,168H80a8,8,0,0,0-5.66,13.66l48,48a8,8,0,0,0,11.32,0l48-48A8,8,0,0,0,176,168Z"
-}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M180.24,171.76a6,6,0,0,1,0,8.48l-48,48a6,6,0,0,1-8.48,0l-48-48a6,6,0,0,1,8.48-8.48L128,215.51l43.76-43.75A6,6,0,0,1,180.24,171.76Zm-96-87.52L128,40.49l43.76,43.75a6,6,0,0,0,8.48-8.48l-48-48a6,6,0,0,0-8.48,0l-48,48a6,6,0,0,0,8.48,8.48Z"
-}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
-}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M178.83,173.17a4,4,0,0,1,0,5.66l-48,48a4,4,0,0,1-5.66,0l-48-48a4,4,0,0,1,5.66-5.66L128,218.34l45.17-45.17A4,4,0,0,1,178.83,173.17Zm-96-90.34L128,37.66l45.17,45.17a4,4,0,1,0,5.66-5.66l-48-48a4,4,0,0,0-5.66,0l-48,48a4,4,0,0,0,5.66,5.66Z"
-}))]]);
-
-const e$3 = /*#__PURE__*/React.forwardRef((r, t) => /* @__PURE__ */React.createElement(p, {
-  ref: t,
-  ...r,
-  weights: a$3
-}));
-e$3.displayName = "CaretUpDownIcon";
-
-const a$2 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Zm68-84a12,12,0,0,1-12,12H128a12,12,0,0,1-12-12V72a12,12,0,0,1,24,0v44h44A12,12,0,0,1,196,128Z"
-}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z",
-  opacity: "0.2"
-}), /* @__PURE__ */React.createElement("path", {
-  d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"
-}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm56,112H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48a8,8,0,0,1,0,16Z"
-}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm62-90a6,6,0,0,1-6,6H128a6,6,0,0,1-6-6V72a6,6,0,0,1,12,0v50h50A6,6,0,0,1,190,128Z"
-}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"
-}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm60-92a4,4,0,0,1-4,4H128a4,4,0,0,1-4-4V72a4,4,0,0,1,8,0v52h52A4,4,0,0,1,188,128Z"
-}))]]);
-
-const c = /*#__PURE__*/React.forwardRef((e, r) => /* @__PURE__ */React.createElement(p, {
-  ref: r,
-  ...e,
-  weights: a$2
-}));
-c.displayName = "ClockIcon";
-
-const Input = ({
-  onChange,
-  type = 'text',
-  id,
-  placeholder,
-  label = 'Input',
-  icon,
-  isFocused,
-  error,
-  disabled,
-  optional,
-  dense,
-  hint,
-  hideLabel,
-  className,
-  ...props
-}) => {
-  const inputRef = useRef(null);
-  useEffect(() => {
-    if (isFocused && inputRef.current) {
-      inputRef.current.focus();
+    else {
+        content = (jsxs(Fragment, { children: [iconLeft && iconLeft, children, iconRight && iconRight] }));
     }
-  }, [isFocused]);
-  const customIcon = icon || type === 'date' && /*#__PURE__*/React__default.createElement(e$4, null) || type === 'time' && /*#__PURE__*/React__default.createElement(c, null) || type === 'number' && /*#__PURE__*/React__default.createElement(e$3, null);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['input', {
-      'js-error': error,
-      'input-disabled': disabled,
-      'input-optional': optional,
-      'input-dense': dense,
-      'input-withIcon': icon
-    }, className])
-  }, /*#__PURE__*/React__default.createElement(InputLabel, {
-    htmlFor: id,
-    label: label,
-    hint: hint,
-    error: error,
-    hideLabel: hideLabel
-  }), customIcon && /*#__PURE__*/React__default.createElement("div", {
-    className: 'input_icon'
-  }, customIcon), /*#__PURE__*/React__default.createElement("input", _extends({
-    ref: inputRef,
-    type: type,
-    className: 'input_control',
-    name: id,
-    id: id,
-    placeholder: placeholder,
-    disabled: disabled,
-    required: !(disabled || optional),
-    onChange: onChange
-  }, hint || error ? {
-    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
-  } : null, props)));
-};
-Input.propTypes = {
-  onChange: PropTypes.func,
-  type: PropTypes.oneOf(['date', 'email', 'number', 'tel', 'text', 'time']),
-  id: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  icon: PropTypes.node,
-  isFocused: PropTypes.bool,
-  error: PropTypes.bool,
-  disabled: PropTypes.bool,
-  optional: PropTypes.bool,
-  dense: PropTypes.bool,
-  hint: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  className: PropTypes.node
-};
-
-const e$2 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z"
-}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M184,80V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H176A8,8,0,0,1,184,80Z",
-  opacity: "0.2"
-}), /* @__PURE__ */React.createElement("path", {
-  d: "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"
-}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M192,136v72a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V80A16,16,0,0,1,48,64h72a8,8,0,0,1,0,16H48V208H176V136a8,8,0,0,1,16,0Zm32-96a8,8,0,0,0-8-8H152a8,8,0,0,0-5.66,13.66L172.69,72l-42.35,42.34a8,8,0,0,0,11.32,11.32L184,83.31l26.34,26.35A8,8,0,0,0,224,104Z"
-}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M222,104a6,6,0,0,1-12,0V54.49l-69.75,69.75a6,6,0,0,1-8.48-8.48L201.51,46H152a6,6,0,0,1,0-12h64a6,6,0,0,1,6,6Zm-38,26a6,6,0,0,0-6,6v72a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V80a2,2,0,0,1,2-2h72a6,6,0,0,0,0-12H48A14,14,0,0,0,34,80V208a14,14,0,0,0,14,14H176a14,14,0,0,0,14-14V136A6,6,0,0,0,184,130Z"
-}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"
-}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M220,104a4,4,0,0,1-8,0V49.66l-73.16,73.17a4,4,0,0,1-5.66-5.66L206.34,44H152a4,4,0,0,1,0-8h64a4,4,0,0,1,4,4Zm-36,28a4,4,0,0,0-4,4v72a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4h72a4,4,0,0,0,0-8H48A12,12,0,0,0,36,80V208a12,12,0,0,0,12,12H176a12,12,0,0,0,12-12V136A4,4,0,0,0,184,132Z"
-}))]]);
-
-const o$2 = /*#__PURE__*/React.forwardRef((e, t) => /* @__PURE__ */React.createElement(p, {
-  ref: t,
-  ...e,
-  weights: e$2
-}));
-o$2.displayName = "ArrowSquareOutIcon";
-
-const Link = ({
-  component = 'a',
-  icon,
-  color,
-  isExternal,
-  href,
-  className,
-  children,
-  ...props
-}) => {
-  const Component = component || 'a';
-  return /*#__PURE__*/React__default.createElement(Component, _extends({
-    className: classnames(['link', {
-      [`text-${color}`]: color
-    }, className]),
-    href: isExternal ? href : undefined,
-    target: isExternal ? '_blank' : undefined,
-    rel: isExternal ? 'noopener noreferrer' : undefined
-  }, props), children, icon && !isExternal && /*#__PURE__*/React__default.createElement("span", {
-    className: 'link_icon'
-  }, icon), isExternal && /*#__PURE__*/React__default.createElement("span", {
-    className: 'link_icon'
-  }, /*#__PURE__*/React__default.createElement(o$2, null)));
-};
-Link.propTypes = {
-  component: PropTypes.oneOfType(['a', PropTypes.elementType]),
-  icon: PropTypes.node,
-  color: PropTypes.oneOf(['default', 'alt', 'disabled', 'contrast', 'contrastAlt', 'contrastDisabled', 'primary', 'secondary', 'inherit']),
-  href: PropTypes.string,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const List = ({
-  dense,
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['list', {
-      'list-dense': dense
-    }, className])
-  }, props), children);
-};
-List.propTypes = {
-  dense: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const ListItem = ({
-  icon,
-  bold,
-  className,
-  children = 'List item',
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement(Text, _extends({
-    className: classnames(['list_item', {
-      'list_item-bold': bold
-    }, className])
-  }, props), icon ? /*#__PURE__*/React__default.cloneElement(icon, {
-    className: `${icon.props.className ?? ''} list_itemIcon`
-  }) : null, children);
-};
-ListItem.propTypes = {
-  icon: PropTypes.node,
-  bold: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
+    return (jsx(Component, { className: classnames([
+            'button',
+            {
+                [`button-${size}`]: size,
+                [`button-${color}`]: color,
+                [`button-${kind}`]: kind,
+                [`button-${variant}`]: variant,
+                'button-fullWidth': fullWidth,
+                'button-disabled': disabled
+            },
+            className
+        ]), ref: ref, disabled: Component === 'button' ? disabled : undefined, "aria-disabled": Component !== 'button' && disabled ? true : undefined, ...(Component === 'button' ? { type } : {}), ...props, children: content }));
+});
+Button.displayName = 'Button';
 
-const Nav = ({
-  direction,
-  dense,
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("nav", _extends({
-    className: classnames(['nav', {
-      [`nav-${direction}`]: direction,
-      'nav-dense': dense
-    }, className])
-  }, props), /*#__PURE__*/React__default.createElement("div", {
-    className: "nav_container"
-  }, children));
-};
-Nav.propTypes = {
-  direction: PropTypes.oneOf(['portrait', 'landscape']),
-  dense: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
+const Buttons = ({ direction = 'landscape', fullWidth, wide, className, children, ...props }) => {
+    return (jsx("div", { className: classnames([
+            'buttons',
+            {
+                [`buttons-${direction}`]: direction,
+                'buttons-fullWidth': fullWidth,
+                'buttons-wide': wide
+            },
+            className
+        ]), ...props, children: children }));
+};
+
+const Card = ({ size = 'md', fill = 'paper', direction = 'portrait', align = 'left', hasShadow = false, transparent = false, className, children, ...props }) => {
+    return (jsx(Color, { fill: transparent ? undefined : fill, children: jsx("div", { className: classnames([
+                'card',
+                {
+                    [`card-${size}`]: size,
+                    [`card-${direction}`]: direction,
+                    [`card-${align}`]: align,
+                    'card-hasShadow': hasShadow,
+                    'card-transparent': transparent
+                },
+                className
+            ]), ...props, children: children }) }));
+};
+
+const CardActions = ({ direction, className, children, ...props }) => {
+    return (jsx("div", { className: classnames([
+            'card_actions',
+            {
+                [`card_actions-${direction}`]: direction
+            },
+            className
+        ]), ...props, children: children }));
+};
+
+const CardContent = ({ fullWidth, className, children, ...props }) => {
+    return (jsx("div", { className: classnames([
+            'card_content',
+            {
+                'card_content-fullWidth': fullWidth
+            },
+            className
+        ]), ...props, children: children }));
+};
+
+const CardHeader = ({ icon, label, title, subtitle, actions, className, ...props }) => {
+    return (jsxs("div", { className: classnames([
+            'card_header',
+            className
+        ]), ...props, children: [actions && (jsx("div", { className: "card_headerActions", children: actions })), icon ? e__default.cloneElement(icon, { className: `${icon.props.className ?? ''} card_icon` }) : null, label ? (jsx(Text, { className: classnames('card_label'), children: label })) : null, jsx(Text, { className: classnames('card_title'), children: title }), subtitle ? (jsx(Text, { className: classnames('card_subtitle'), children: subtitle })) : null] }));
+};
+
+const CardMedia = ({ width, height, image, fullWidth, className, ...props }) => {
+    return (jsx("div", { className: classnames([
+            'card_media',
+            {
+                'card_media-fullWidth': fullWidth
+            },
+            className
+        ]), ...props, children: jsx("div", { className: 'card_mediaInner', style: {
+                width: width ? width + 'px' : undefined,
+                paddingBottom: height,
+                backgroundImage: `url(${image})`
+            } }) }));
+};
+
+const Checkbox = ({ id: providedId, value, label, checked, disabled, optional, dense, onChange, className, ...props }) => {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    return (jsxs("div", { className: classnames([
+            'checkbox',
+            {
+                'checkbox-disabled': disabled,
+                'checkbox-dense': dense
+            },
+            className
+        ]), children: [jsx("input", { className: classnames('checkbox_control'), type: "checkbox", name: id, id: id, value: value, checked: checked, "aria-checked": checked, "aria-label": !label ? 'Checkbox' : undefined, disabled: disabled, required: !(disabled || optional), onChange: onChange, ...props }), label && (jsx("label", { className: classnames('checkbox_label'), htmlFor: id, children: label }))] }));
+};
+
+const InputLabel = ({ isLegend = false, htmlFor, label = 'Input label', hint, error, hideLabel = false }) => {
+    const LabelTag = isLegend ? 'legend' : 'label';
+    return (jsxs(Fragment, { children: [label && (jsx(LabelTag, { className: classnames('input_label', { 'sr-only': hideLabel }), ...(!isLegend && htmlFor ? { htmlFor } : {}), children: label })), hint && jsx("p", { id: htmlFor + '-hint', className: 'input_hint', children: hint }), error && jsx("p", { id: htmlFor + '-error', className: 'input_error', children: error })] }));
+};
+
+const Checkboxes = ({ id, label = 'Label', direction = 'portrait', error, disabled, optional, dense, hint, hideLabel, children, className }) => {
+    return (jsxs("fieldset", { className: classnames([
+            'input',
+            {
+                'js-error': error,
+                'input-disabled': disabled,
+                'input-optional': optional,
+                'input-dense': dense
+            },
+            className
+        ]), ...(hint || error
+            ? {
+                'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null]
+                    .filter(Boolean)
+                    .join(' '),
+            }
+            : null), children: [jsx(InputLabel, { isLegend: true, label: label, hint: hint, hideLabel: hideLabel }), jsx("div", { className: classnames([
+                    'input_control',
+                    'radios',
+                    {
+                        [`radios-${direction}`]: direction
+                    }
+                ]), children: children })] }));
+};
+
+const Chip = ({ color = 'default', dense, avatar, disabled, onClose, className, children, ...props }) => {
+    return (jsx(Color, { fill: color, children: jsxs("div", { className: classnames([
+                'chip',
+                {
+                    'chip-dense': dense,
+                    'chip-disabled': disabled
+                },
+                className
+            ]), role: "listitem", "aria-disabled": disabled ? true : undefined, ...props, children: [avatar ? (jsx("img", { className: classnames('chip_avatar'), src: avatar, alt: "", "aria-hidden": "true" })) : null, children, onClose ? (jsx("button", { type: "button", className: classnames('chip_close'), onClick: onClose, disabled: disabled, "aria-label": "Remove", children: jsx(e$7, { size: dense ? 16 : 20, "aria-hidden": "true" }) })) : null] }) }));
+};
+
+const Divider = ({ direction = 'landscape', padding = 'md', className, ...props }) => {
+    return (jsx("div", { className: classnames([
+            'divider',
+            {
+                [`divider-${direction}`]: direction,
+                [`divider-${padding}`]: padding
+            },
+            className
+        ]), ...props }));
+};
+
+const e$6 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,28H188V24a12,12,0,0,0-24,0v4H92V24a12,12,0,0,0-24,0v4H48A20,20,0,0,0,28,48V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V48A20,20,0,0,0,208,28ZM68,52a12,12,0,0,0,24,0h72a12,12,0,0,0,24,0h16V76H52V52ZM52,204V100H204V204Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement(
+      "path",
+      {
+        d: "M216,48V88H40V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ e$9.createElement("path", { d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,48H48V48H72v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,34H182V24a6,6,0,0,0-12,0V34H86V24a6,6,0,0,0-12,0V34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H74V56a6,6,0,0,0,12,0V46h84V56a6,6,0,0,0,12,0V46h26a2,2,0,0,1,2,2V82H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V94H210V208A2,2,0,0,1,208,210Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,36H180V24a4,4,0,0,0-8,0V36H84V24a4,4,0,0,0-8,0V36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36ZM48,44H76V56a4,4,0,0,0,8,0V44h88V56a4,4,0,0,0,8,0V44h28a4,4,0,0,1,4,4V84H44V48A4,4,0,0,1,48,44ZM208,212H48a4,4,0,0,1-4-4V92H212V208A4,4,0,0,1,208,212Z" }))
+  ]
+]);
+
+const e$5 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: e$6 }));
+e$5.displayName = "CalendarBlankIcon";
+
+const a$5 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M184.49,167.51a12,12,0,0,1,0,17l-48,48a12,12,0,0,1-17,0l-48-48a12,12,0,0,1,17-17L128,207l39.51-39.52A12,12,0,0,1,184.49,167.51Zm-96-79L128,49l39.51,39.52a12,12,0,0,0,17-17l-48-48a12,12,0,0,0-17,0l-48,48a12,12,0,0,0,17,17Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M80,176h96l-48,48ZM128,32,80,80h96Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M176,168H80a8,8,0,0,0-5.66,13.66l48,48a8,8,0,0,0,11.32,0l48-48A8,8,0,0,0,176,168Zm-48,44.69L99.31,184h57.38ZM80,88h96a8,8,0,0,0,5.66-13.66l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,80,88Zm48-44.69L156.69,72H99.31Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M72.61,83.06a8,8,0,0,1,1.73-8.72l48-48a8,8,0,0,1,11.32,0l48,48A8,8,0,0,1,176,88H80A8,8,0,0,1,72.61,83.06ZM176,168H80a8,8,0,0,0-5.66,13.66l48,48a8,8,0,0,0,11.32,0l48-48A8,8,0,0,0,176,168Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M180.24,171.76a6,6,0,0,1,0,8.48l-48,48a6,6,0,0,1-8.48,0l-48-48a6,6,0,0,1,8.48-8.48L128,215.51l43.76-43.75A6,6,0,0,1,180.24,171.76Zm-96-87.52L128,40.49l43.76,43.75a6,6,0,0,0,8.48-8.48l-48-48a6,6,0,0,0-8.48,0l-48,48a6,6,0,0,0,8.48,8.48Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M178.83,173.17a4,4,0,0,1,0,5.66l-48,48a4,4,0,0,1-5.66,0l-48-48a4,4,0,0,1,5.66-5.66L128,218.34l45.17-45.17A4,4,0,0,1,178.83,173.17Zm-96-90.34L128,37.66l45.17,45.17a4,4,0,1,0,5.66-5.66l-48-48a4,4,0,0,0-5.66,0l-48,48a4,4,0,0,0,5.66,5.66Z" }))
+  ]
+]);
+
+const e$4 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$5 }));
+e$4.displayName = "CaretUpDownIcon";
+
+const a$4 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Zm68-84a12,12,0,0,1-12,12H128a12,12,0,0,1-12-12V72a12,12,0,0,1,24,0v44h44A12,12,0,0,1,196,128Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm56,112H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48a8,8,0,0,1,0,16Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm62-90a6,6,0,0,1-6,6H128a6,6,0,0,1-6-6V72a6,6,0,0,1,12,0v50h50A6,6,0,0,1,190,128Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm60-92a4,4,0,0,1-4,4H128a4,4,0,0,1-4-4V72a4,4,0,0,1,8,0v52h52A4,4,0,0,1,188,128Z" }))
+  ]
+]);
+
+const c = e$9.forwardRef((e, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...e, weights: a$4 }));
+c.displayName = "ClockIcon";
 
-const SectionHeader = ({
-  label,
-  title,
-  promoteTitle = false,
-  titleComponent = 'h2',
-  subtitle,
-  actions,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['section_header', className])
-  }, props), label ? /*#__PURE__*/React__default.createElement(Text, {
-    className: classnames('section_label')
-  }, label) : null, /*#__PURE__*/React__default.createElement(Text, {
-    className: "section_title",
-    component: titleComponent || (promoteTitle ? 'h1' : 'h2')
-  }, title), subtitle ? /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('section_subtitle')
-  }, subtitle) : null, actions ? /*#__PURE__*/React__default.createElement("div", {
-    className: "section_actions"
-  }, actions) : null);
-};
-SectionHeader.propTypes = {
-  label: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  promoteTitle: PropTypes.bool,
-  titleComponent: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']),
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  actions: PropTypes.node,
-  className: PropTypes.node
+const Input = ({ onChange, type = 'text', id, placeholder, label = 'Input', icon, isFocused, error, disabled, optional, dense, hint, hideLabel, className, ...props }) => {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (isFocused && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isFocused]);
+    const customIcon = icon ||
+        (type === 'date' && jsx(e$5, {})) ||
+        (type === 'time' && jsx(c, {})) ||
+        (type === 'number' && jsx(e$4, {}));
+    return (jsxs("div", { className: classnames([
+            'input',
+            {
+                'js-error': error,
+                'input-disabled': disabled,
+                'input-optional': optional,
+                'input-dense': dense,
+                'input-withIcon': icon
+            },
+            className
+        ]), children: [jsx(InputLabel, { htmlFor: id, label: label, hint: hint, hideLabel: hideLabel }), customIcon && jsx("div", { className: 'input_icon', "aria-hidden": "true", children: customIcon }), jsx("input", { ref: inputRef, type: type, className: 'input_control', name: id, id: id, placeholder: placeholder, disabled: disabled, required: !(disabled || optional), "aria-invalid": error ? true : undefined, onChange: onChange, ...(hint || error
+                    ? {
+                        'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null]
+                            .filter(Boolean)
+                            .join(' '),
+                    }
+                    : null), ...props })] }));
+};
+
+const e$3 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement(
+      "path",
+      {
+        d: "M184,80V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H176A8,8,0,0,1,184,80Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ e$9.createElement("path", { d: "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M192,136v72a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V80A16,16,0,0,1,48,64h72a8,8,0,0,1,0,16H48V208H176V136a8,8,0,0,1,16,0Zm32-96a8,8,0,0,0-8-8H152a8,8,0,0,0-5.66,13.66L172.69,72l-42.35,42.34a8,8,0,0,0,11.32,11.32L184,83.31l26.34,26.35A8,8,0,0,0,224,104Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M222,104a6,6,0,0,1-12,0V54.49l-69.75,69.75a6,6,0,0,1-8.48-8.48L201.51,46H152a6,6,0,0,1,0-12h64a6,6,0,0,1,6,6Zm-38,26a6,6,0,0,0-6,6v72a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V80a2,2,0,0,1,2-2h72a6,6,0,0,0,0-12H48A14,14,0,0,0,34,80V208a14,14,0,0,0,14,14H176a14,14,0,0,0,14-14V136A6,6,0,0,0,184,130Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M220,104a4,4,0,0,1-8,0V49.66l-73.16,73.17a4,4,0,0,1-5.66-5.66L206.34,44H152a4,4,0,0,1,0-8h64a4,4,0,0,1,4,4Zm-36,28a4,4,0,0,0-4,4v72a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4h72a4,4,0,0,0,0-8H48A12,12,0,0,0,36,80V208a12,12,0,0,0,12,12H176a12,12,0,0,0,12-12V136A4,4,0,0,0,184,132Z" }))
+  ]
+]);
+
+const o$3 = e$9.forwardRef((e, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...e, weights: e$3 }));
+o$3.displayName = "ArrowSquareOutIcon";
+
+const Link = ({ component = 'a', icon, color, isExternal, href, className, children, ...props }) => {
+    const Component = component || 'a';
+    return (jsxs(Component, { className: classnames([
+            'link',
+            { [`text-${color}`]: color },
+            className
+        ]), href: isExternal ? href : undefined, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, ...props, children: [children, icon && !isExternal && jsx("span", { className: 'link_icon', "aria-hidden": "true", children: icon }), isExternal && (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", children: " (opens in new tab)" }), jsx("span", { className: 'link_icon', "aria-hidden": "true", children: jsx(o$3, {}) })] }))] }));
+};
+
+const List = ({ dense, className, children, ...props }) => {
+    return (jsx("div", { className: classnames([
+            'list',
+            {
+                'list-dense': dense
+            },
+            className
+        ]), ...props, children: children }));
+};
+
+const ListItem = ({ icon, bold, className, children = 'List item', ...props }) => {
+    return (jsxs(Text, { className: classnames([
+            'list_item',
+            {
+                'list_item-bold': bold
+            },
+            className
+        ]), ...props, children: [icon ? e__default.cloneElement(icon, { className: `${icon.props.className ?? ''} list_itemIcon` }) : null, children] }));
+};
+
+const Nav = ({ direction, dense, className, children, ...props }) => {
+    return (jsx("nav", { className: classnames([
+            'nav',
+            {
+                [`nav-${direction}`]: direction,
+                'nav-dense': dense
+            },
+            className
+        ]), ...props, children: jsx("div", { className: 'nav_container', children: children }) }));
+};
+
+const SectionHeader = ({ label, title, promoteTitle = false, titleComponent = 'h2', subtitle, actions, className, ...props }) => {
+    return (jsxs("div", { className: classnames([
+            'section_header',
+            className
+        ]), ...props, children: [label ? jsx(Text, { className: classnames('section_label'), children: label }) : null, jsx(Text, { className: "section_title", component: titleComponent || (promoteTitle ? 'h1' : 'h2'), children: title }), subtitle ? jsx("div", { className: classnames('section_subtitle'), children: subtitle }) : null, actions ? (jsx("div", { className: "section_actions", children: actions })) : null] }));
+};
+
+const Section = ({ align = 'left', color = 'default', landing, header, className, children, ...props }) => {
+    return (jsx("div", { className: classnames([
+            'section',
+            {
+                [`section-${align}`]: align,
+                [`section-${color}`]: color,
+                'section-landing': landing,
+                'section-header': header
+            },
+            className
+        ]), ...props, children: jsx("div", { className: 'section_container', children: e__default.Children.map(children, child => {
+                if (e__default.isValidElement(child) && child.type === SectionHeader) {
+                    return e__default.cloneElement(child, { promoteTitle: landing || header });
+                }
+                return child;
+            }) }) }));
 };
 
-const Section = ({
-  align = 'left',
-  color = 'default',
-  landing,
-  header,
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['section', {
-      [`section-${align}`]: align,
-      [`section-${color}`]: color,
-      'section-landing': landing,
-      'section-header': header
-    }, className])
-  }, props), /*#__PURE__*/React__default.createElement("div", {
-    className: 'section_container'
-  }, React__default.Children.map(children, child => {
-    if (/*#__PURE__*/React__default.isValidElement(child) && child.type === SectionHeader) {
-      return /*#__PURE__*/React__default.cloneElement(child, {
-        promoteTitle: landing || header
-      });
+const NavBar = ({ logo, align, className, children, ...props }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleNav = () => {
+        setIsOpen(!isOpen);
+        document.body.classList.toggle('js-navbar', !isOpen);
+    };
+    return (jsx("header", { children: jsxs(Section, { className: classnames([
+                'navbar',
+                {
+                    [`navbar-${align}`]: align,
+                    'js-opened': isOpen
+                },
+                className
+            ]), ...props, children: [jsxs("div", { className: "navbar_main", children: [jsx("div", { className: "navbar_logo", children: logo }), jsx("button", { type: "button", "aria-label": isOpen ? "Close mobile menu" : "Open mobile menu", "aria-expanded": isOpen, "aria-controls": "navbar-nav", className: classnames('navbar_button', { 'js-opened': isOpen }), onClick: toggleNav, children: jsx("span", { "aria-hidden": "true" }) })] }), jsx("nav", { id: "navbar-nav", "aria-label": "Main navigation", className: classnames('navbar_nav nav', { 'js-opened': isOpen }), children: jsx("div", { className: 'nav_container', children: children }) })] }) }));
+};
+
+const NavItem = ({ component, label, active, dropdown, icon, end, to, className, ...props }) => {
+    const dropdownRef = useRef(null);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const onClick = () => setIsExpanded(!isExpanded);
+    let Component;
+    if (dropdown) {
+        Component = 'button';
     }
-    return child;
-  })));
-};
-Section.propTypes = {
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  color: PropTypes.oneOf(['default', 'paper', 'primary', 'primaryLight']),
-  landing: PropTypes.bool,
-  header: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const NavBar = ({
-  logo,
-  align,
-  className,
-  children,
-  ...props
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleNav = () => {
-    setIsOpen(!isOpen);
-    document.body.classList.toggle('js-navbar', !isOpen);
-  };
-  return /*#__PURE__*/React__default.createElement("header", null, /*#__PURE__*/React__default.createElement(Section, _extends({
-    className: classnames(['navbar', {
-      [`navbar-${align}`]: align,
-      'js-opened': isOpen
-    }, className])
-  }, props), /*#__PURE__*/React__default.createElement("div", {
-    className: "navbar_main"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "navbar_logo"
-  }, logo), /*#__PURE__*/React__default.createElement("button", {
-    "aria-label": "Open mobile menu",
-    className: classnames('navbar_button', {
-      'js-opened': isOpen
-    }),
-    onClick: toggleNav
-  }, /*#__PURE__*/React__default.createElement("span", null))), /*#__PURE__*/React__default.createElement("nav", {
-    "aria-label": "main-nav",
-    className: classnames('navbar_nav nav', {
-      'js-opened': isOpen
-    })
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "nav_container"
-  }, children))));
-};
-NavBar.propTypes = {
-  logo: PropTypes.node,
-  align: PropTypes.oneOf(['left', 'right']),
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const NavItem = ({
-  component,
-  label,
-  active,
-  dropdown,
-  icon,
-  end,
-  to,
-  className,
-  ...props
-}) => {
-  const dropdownRef = useRef(null);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const onClick = () => setIsExpanded(!isExpanded);
-  let Component;
-  if (dropdown) {
-    Component = 'button';
-  } else {
-    Component = component || "a";
-  }
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['nav_item', {
-      'nav_item-dropdown': dropdown,
-      'js-show': isExpanded
-    }, className])
-  }, /*#__PURE__*/React__default.createElement(Component, _extends({
-    end: end,
-    to: to,
-    className: classnames(['nav_trigger', {
-      'nav_trigger-active': active
-    }]),
-    onClick: onClick
-  }, props), icon ? /*#__PURE__*/React__default.createElement("span", {
-    className: classnames('nav_icon')
-  }, icon) : null, label), dropdown ? /*#__PURE__*/React__default.createElement("div", {
-    ref: dropdownRef,
-    className: "nav_target"
-  }, dropdown) : null);
-};
-NavItem.propTypes = {
-  label: PropTypes.string.isRequired,
-  active: PropTypes.bool,
-  dropdown: PropTypes.object,
-  icon: PropTypes.node,
-  end: PropTypes.node,
-  to: PropTypes.node,
-  className: PropTypes.node
-};
-
-const Radio = ({
-  id,
-  name,
-  value,
-  label,
-  checked,
-  disabled,
-  optional,
-  dense,
-  onChange,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['radio', {
-      'radio-disabled': disabled,
-      'radio-dense': dense
-    }, className])
-  }, /*#__PURE__*/React__default.createElement("input", _extends({
-    className: classnames('radio_control'),
-    type: "radio",
-    id: id,
-    name: name,
-    value: value,
-    checked: checked,
-    "aria-checked": checked,
-    disabled: disabled,
-    required: !(disabled || optional),
-    onChange: onChange
-  }, props)), /*#__PURE__*/React__default.createElement("label", {
-    className: classnames('radio_label'),
-    htmlFor: id
-  }, label));
-};
-Radio.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  optional: PropTypes.bool,
-  dense: PropTypes.bool,
-  className: PropTypes.node
-};
-
-const RadioButtons = ({
-  id,
-  label = 'Label',
-  direction = 'portrait',
-  error,
-  disabled,
-  optional,
-  dense,
-  hint,
-  hideLabel,
-  children,
-  className
-}) => {
-  return /*#__PURE__*/React__default.createElement("fieldset", _extends({
-    className: classnames(['input', {
-      'js-error': error,
-      'input-disabled': disabled,
-      'input-optional': optional,
-      'input-dense': dense
-    }, className])
-  }, hint || error ? {
-    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
-  } : null), /*#__PURE__*/React__default.createElement(InputLabel, {
-    isLegend: true,
-    label: label,
-    hint: hint,
-    error: error,
-    hideLabel: hideLabel
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['input_control', 'radios', {
-      [`radios-${direction}`]: direction
-    }])
-  }, children));
-};
-RadioButtons.propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  direction: PropTypes.oneOf(['portrait', 'landscape']),
-  error: PropTypes.bool,
-  disabled: PropTypes.bool,
-  optional: PropTypes.bool,
-  dense: PropTypes.bool,
-  hint: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.node
-};
-
-const SectionContent = ({
-  align = 'left',
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['section_content', {
-      [`section_content-${align}`]: align
-    }, className])
-  }, props), children);
-};
-SectionContent.propTypes = {
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const Select = ({
-  onChange,
-  id,
-  label = 'Select',
-  isFocused,
-  error,
-  disabled,
-  optional,
-  dense,
-  hint,
-  hideLabel,
-  children,
-  className,
-  ...props
-}) => {
-  const inputRef = useRef(null);
-  useEffect(() => {
-    if (isFocused && inputRef.current) {
-      inputRef.current.focus();
+    else {
+        Component = component || 'a';
     }
-  }, [isFocused]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['input', 'select', {
-      'input-focused': isFocused,
-      'js-error': error,
-      'input-disabled': disabled,
-      'input-optional': optional,
-      'input-dense': dense
-    }, className])
-  }, /*#__PURE__*/React__default.createElement(InputLabel, {
-    htmlFor: id,
-    label: label,
-    hint: hint,
-    error: error,
-    hideLabel: hideLabel
-  }), /*#__PURE__*/React__default.createElement("select", _extends({
-    ref: inputRef,
-    className: 'input_control',
-    name: id,
-    id: id,
-    disabled: disabled,
-    required: !(disabled || optional),
-    onChange: onChange
-  }, hint || error ? {
-    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
-  } : null, props), children));
-};
-Select.propTypes = {
-  onChange: PropTypes.func,
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  isFocused: PropTypes.bool,
-  error: PropTypes.bool,
-  disabled: PropTypes.bool,
-  optional: PropTypes.bool,
-  dense: PropTypes.bool,
-  hint: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  children: PropTypes.any.isRequired,
-  className: PropTypes.node
+    const dropdownId = dropdown ? `nav-dropdown-${label.replace(/\s+/g, '-').toLowerCase()}` : undefined;
+    return (jsxs("div", { className: classnames([
+            'nav_item',
+            {
+                'nav_item-dropdown': dropdown,
+                'js-show': isExpanded
+            },
+            className
+        ]), children: [jsxs(Component, { end: end, to: to, className: classnames([
+                    'nav_trigger',
+                    {
+                        'nav_trigger-active': active
+                    }
+                ]), onClick: onClick, "aria-expanded": dropdown ? isExpanded : undefined, "aria-haspopup": dropdown ? 'menu' : undefined, "aria-controls": dropdownId, ...props, children: [icon ? (jsx("span", { className: classnames('nav_icon'), "aria-hidden": "true", children: icon })) : null, label] }), dropdown ? (jsx("div", { ref: dropdownRef, id: dropdownId, className: 'nav_target', role: "menu", children: dropdown })) : null] }));
+};
+
+const Radio = ({ id, name, value, label, checked, disabled, optional, dense, onChange, className, ...props }) => {
+    return (jsxs("div", { className: classnames([
+            'radio',
+            {
+                'radio-disabled': disabled,
+                'radio-dense': dense
+            },
+            className
+        ]), children: [jsx("input", { className: classnames('radio_control'), type: "radio", id: id, name: name, value: value, checked: checked, "aria-checked": checked, disabled: disabled, required: !(disabled || optional), onChange: onChange, ...props }), jsx("label", { className: classnames('radio_label'), htmlFor: id, children: label })] }));
+};
+
+const RadioButtons = ({ id, label = 'Label', direction = 'portrait', error, disabled, optional, dense, hint, hideLabel, children, className }) => {
+    return (jsxs("fieldset", { className: classnames([
+            'input',
+            {
+                'js-error': error,
+                'input-disabled': disabled,
+                'input-optional': optional,
+                'input-dense': dense
+            },
+            className
+        ]), ...(hint || error
+            ? {
+                'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null]
+                    .filter(Boolean)
+                    .join(' '),
+            }
+            : null), children: [jsx(InputLabel, { isLegend: true, label: label, hint: hint, hideLabel: hideLabel }), jsx("div", { className: classnames([
+                    'input_control',
+                    'radios',
+                    {
+                        [`radios-${direction}`]: direction
+                    }
+                ]), children: children })] }));
+};
+
+const SectionContent = ({ align = 'left', className, children, ...props }) => {
+    return (jsx("div", { className: classnames([
+            'section_content',
+            {
+                [`section_content-${align}`]: align
+            },
+            className
+        ]), ...props, children: children }));
+};
+
+const Select = ({ onChange, id, label = 'Select', isFocused, error, disabled, optional, dense, hint, hideLabel, children, className, ...props }) => {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (isFocused && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isFocused]);
+    return (jsxs("div", { className: classnames([
+            'input',
+            'select',
+            {
+                'input-focused': isFocused,
+                'js-error': error,
+                'input-disabled': disabled,
+                'input-optional': optional,
+                'input-dense': dense,
+            },
+            className
+        ]), children: [jsx(InputLabel, { htmlFor: id, label: label, hint: hint, hideLabel: hideLabel }), jsx("select", { ref: inputRef, className: 'input_control', name: id, id: id, disabled: disabled, required: !(disabled || optional), "aria-invalid": error ? true : undefined, onChange: onChange, ...(hint || error
+                    ? {
+                        'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null]
+                            .filter(Boolean)
+                            .join(' '),
+                    }
+                    : null), ...props, children: children })] }));
 };
 
 var nnfxDark = {
@@ -2576,532 +933,479 @@ var nnfxDark = {
   }
 };
 
-const Snippet = ({
-  content = 'Snippet',
-  isDefault = false,
-  dense = false,
-  fullWidth,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['snippet_wrapper', {
-      ' w-full': fullWidth
-    }])
-  }, /*#__PURE__*/React__default.createElement(SyntaxHighlighter, _extends({
-    language: "javascript",
-    style: nnfxDark,
-    className: classnames(['snippet', {
-      ' snippet-dense': dense
-    }, {
-      ' snippet-default': isDefault
-    }, className])
-  }, props), content));
-};
-Snippet.propTypes = {
-  content: PropTypes.string.isRequired,
-  isDefault: PropTypes.bool,
-  dense: PropTypes.bool,
-  className: PropTypes.node
-};
-
-const Status = ({
-  color = 'inactive',
-  dense,
-  className,
-  children = 'Status',
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement(Text, _extends({
-    className: classnames(['status', {
-      [`status-${color}`]: color,
-      'status-dense': dense
-    }, className])
-  }, props), children);
-};
-Status.propTypes = {
-  color: PropTypes.oneOf(['inactive', 'success', 'info', 'warning', 'error']),
-  dense: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const Switch = ({
-  id,
-  startLabel,
-  endLabel,
-  disabled,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['switch', {
-      'switch-disabled': disabled
-    }, className])
-  }, startLabel ? /*#__PURE__*/React__default.createElement(Text, {
-    className: classnames('switch_label'),
-    variant: "body"
-  }, startLabel) : null, /*#__PURE__*/React__default.createElement("input", _extends({
-    className: classnames('switch_input'),
-    type: "checkbox",
-    name: id,
-    id: id,
-    disabled: disabled
-  }, props)), /*#__PURE__*/React__default.createElement("label", {
-    className: classnames('switch_switch'),
-    htmlFor: id
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('switch_toggle')
-  })), endLabel ? /*#__PURE__*/React__default.createElement(Text, {
-    className: classnames('switch_label'),
-    variant: "body"
-  }, endLabel) : null);
-};
-Switch.propTypes = {
-  id: PropTypes.string,
-  startLabel: PropTypes.string,
-  endLabel: PropTypes.string,
-  disabled: PropTypes.bool,
-  className: PropTypes.node
-};
-
-const TabsContext = /*#__PURE__*/createContext();
-const Tabs = ({
-  direction,
-  dense,
-  hasBorder,
-  className,
-  children
-}) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  return /*#__PURE__*/React__default.createElement(TabsContext.Provider, {
-    value: {
-      activeIndex,
-      setActiveIndex
+const Snippet = ({ content = 'Snippet', isDefault = false, dense = false, fullWidth, className, ...props }) => {
+    return (jsx("div", { className: classnames([
+            'snippet_wrapper',
+            { ' w-full': fullWidth }
+        ]), children: jsx(SyntaxHighlighter, { language: "javascript", style: nnfxDark, className: classnames([
+                'snippet',
+                { ' snippet-dense': dense },
+                { ' snippet-default': isDefault },
+                className
+            ]), ...props, children: content }) }));
+};
+
+const Status = ({ color = 'inactive', dense, className, children = 'Status', ...props }) => {
+    return (jsx(Text, { className: classnames([
+            'status',
+            {
+                [`status-${color}`]: color,
+                'status-dense': dense
+            },
+            className
+        ]), ...props, children: children }));
+};
+
+const a$3 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement(
+      "path",
+      {
+        d: "M232,56V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ e$9.createElement("path", { d: "M205.66,85.66l-96,96a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L104,164.69l90.34-90.35a8,8,0,0,1,11.32,11.32Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM205.66,85.66l-96,96a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L104,164.69l90.34-90.35a8,8,0,0,1,11.32,11.32Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M226.83,74.83l-128,128a4,4,0,0,1-5.66,0l-56-56a4,4,0,0,1,5.66-5.66L96,194.34,221.17,69.17a4,4,0,1,1,5.66,5.66Z" }))
+  ]
+]);
+
+const o$2 = e$9.forwardRef((c, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...c, weights: a$3 }));
+o$2.displayName = "CheckIcon";
+
+const StepperContext = createContext(null);
+const Stepper = ({ showLabels, className, children, ...props }) => {
+    const [activeStep, setActiveStep] = useState(0);
+    const [completedSteps, setCompletedSteps] = useState([]);
+    const totalSteps = Children.count(children);
+    const goToNext = () => {
+        if (activeStep < totalSteps - 1) {
+            setCompletedSteps(prev => [...prev, activeStep]);
+            setActiveStep(prev => prev + 1);
+        }
+    };
+    const goToPrevious = () => {
+        if (activeStep > 0) {
+            setActiveStep(prev => prev - 1);
+        }
+    };
+    const skipCurrent = () => {
+        if (activeStep < totalSteps - 1) {
+            // Skip doesn't mark as completed
+            setActiveStep(prev => prev + 1);
+        }
+    };
+    // Extract labels from children
+    const stepLabels = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child)) {
+            const props = child.props;
+            stepLabels.push(props.label || '');
+        }
+    });
+    return (jsx(StepperContext.Provider, { value: { activeStep, totalSteps, goToNext, goToPrevious, skipCurrent, completedSteps }, children: jsxs("div", { className: classnames('stepper', className), ...props, children: [jsx("nav", { className: classnames('stepper_nav'), "aria-label": "Progress", children: jsx("ol", { className: classnames('stepper_list'), role: "list", children: stepLabels.map((label, index) => {
+                            const isActive = index === activeStep;
+                            const isCompleted = completedSteps.includes(index);
+                            return (jsxs("li", { className: classnames('stepper_step', {
+                                    'stepper_step-active': isActive,
+                                    'stepper_step-completed': isCompleted
+                                }), "aria-current": isActive ? 'step' : undefined, children: [jsx("span", { className: classnames('stepper_icon', {
+                                            'stepper_icon-active': isActive,
+                                            'stepper_icon-completed': isCompleted
+                                        }), "aria-hidden": "true", children: isCompleted ? jsx(o$2, { size: 16 }) : index + 1 }), showLabels ? (jsx(Text, { variant: "caption", weight: "bold", className: classnames('stepper_label'), children: label })) : (jsx("span", { className: "sr-only", children: label }))] }, index));
+                        }) }) }), jsx("div", { className: classnames('stepper_content'), children: Children.map(children, (child, index) => {
+                        if (index === activeStep && isValidElement(child)) {
+                            return child;
+                        }
+                        return null;
+                    }) })] }) }));
+};
+
+const Step = ({ label, skippable, className, children, ...props }) => {
+    const context = useContext(StepperContext);
+    if (!context) {
+        throw new Error('Step must be used within a Stepper');
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['tabs', {
-      [`tabs-${direction}`]: direction,
-      'tabs-dense': dense,
-      'tabs-hasBorder': hasBorder
-    }, className])
-  }, children));
-};
-Tabs.propTypes = {
-  direction: PropTypes.oneOf(['portrait', 'landscape']),
-  dense: PropTypes.bool,
-  hasBorder: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const Tab = ({
-  index,
-  label,
-  className
-}) => {
-  const {
-    activeIndex,
-    setActiveIndex
-  } = useContext(TabsContext);
-  const isSelected = activeIndex === index;
-  return /*#__PURE__*/React__default.createElement("button", {
-    className: classnames(['tab', {
-      'tab-active': isSelected
-    }, className]),
-    role: "tab",
-    "aria-selected": isSelected,
-    "aria-controls": `tabpanel-${index}`,
-    id: `tab-${index}`,
-    tabIndex: isSelected ? 0 : -1,
-    onClick: () => setActiveIndex(index)
-  }, label);
-};
-Tab.propTypes = {
-  label: PropTypes.string,
-  className: PropTypes.node.isRequired
-};
-
-const a$1 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z"
-}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M160,48V208L80,128Z",
-  opacity: "0.2"
-}), /* @__PURE__ */React.createElement("path", {
-  d: "M163.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,168,208V48A8,8,0,0,0,163.06,40.61ZM152,188.69,91.31,128,152,67.31Z"
-}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"
-}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M164.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L88.49,128Z"
-}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
-}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M162.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L85.66,128Z"
-}))]]);
-
-const t$1 = /*#__PURE__*/React.forwardRef((o, r) => /* @__PURE__ */React.createElement(p, {
-  ref: r,
-  ...o,
-  weights: a$1
-}));
+    const { activeStep, totalSteps, goToNext, goToPrevious, skipCurrent, completedSteps } = context;
+    const isFirstStep = activeStep === 0;
+    const isLastStep = activeStep === totalSteps - 1;
+    Array.from({ length: activeStep }, (_, i) => i).every(i => completedSteps.includes(i));
+    return (jsxs(Card, { size: "lg", className: classnames('stepper_panel', className), role: "tabpanel", "aria-label": label, ...props, children: [jsx(CardHeader, { title: label }), jsx(CardContent, { children: children }), jsxs(CardActions, { children: [jsx(Button, { variant: "transparent", onClick: goToPrevious, disabled: isFirstStep, "aria-label": "Go to previous step", children: "Back" }), jsxs(Buttons, { children: [skippable && !isLastStep && (jsx(Button, { variant: "transparent", onClick: skipCurrent, "aria-label": "Skip this step", children: "Skip" })), jsx(Button, { onClick: goToNext, disabled: isLastStep, "aria-label": isLastStep ? 'Last step reached' : 'Go to next step', children: isLastStep ? 'Finish' : 'Next' })] })] })] }));
+};
+
+const Switch = ({ id, startLabel, endLabel, disabled, className, checked, defaultChecked, ...props }) => {
+    const isChecked = checked ?? defaultChecked ?? false;
+    return (jsxs("div", { className: classnames([
+            'switch',
+            { 'switch-disabled': disabled },
+            className
+        ]), children: [startLabel ? jsx(Text, { className: classnames('switch_label'), variant: "body", id: `${id}-start`, children: startLabel }) : null, jsx("input", { className: classnames('switch_input'), type: "checkbox", role: "switch", name: id, id: id, disabled: disabled, checked: checked, defaultChecked: defaultChecked, "aria-checked": isChecked, "aria-labelledby": startLabel || endLabel ? [startLabel ? `${id}-start` : null, endLabel ? `${id}-end` : null].filter(Boolean).join(' ') : undefined, ...props }), jsx("label", { className: classnames('switch_switch'), htmlFor: id, "aria-hidden": "true", children: jsx("div", { className: classnames('switch_toggle') }) }), endLabel ? jsx(Text, { className: classnames('switch_label'), variant: "body", id: `${id}-end`, children: endLabel }) : null] }));
+};
+
+const TabsContext = createContext(null);
+const Tabs = ({ direction, dense, hasBorder, className, children }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    // Count Tab components for keyboard navigation
+    let tabCount = 0;
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.props) {
+            const childProps = child.props;
+            Children.forEach(childProps.children, (grandchild) => {
+                if (isValidElement(grandchild)) {
+                    const grandchildProps = grandchild.props;
+                    if (grandchildProps.index !== undefined) {
+                        tabCount++;
+                    }
+                }
+            });
+        }
+    });
+    return (jsx(TabsContext.Provider, { value: { activeIndex, setActiveIndex, tabCount: tabCount || 1 }, children: jsx("div", { className: classnames([
+                'tabs',
+                {
+                    [`tabs-${direction}`]: direction,
+                    'tabs-dense': dense,
+                    'tabs-hasBorder': hasBorder,
+                },
+                className
+            ]), children: children }) }));
+};
+
+const Tab = ({ index, label, className, }) => {
+    const context = useContext(TabsContext);
+    const activeIndex = context?.activeIndex ?? 0;
+    const setActiveIndex = context?.setActiveIndex ?? (() => { });
+    const tabCount = context?.tabCount ?? 1;
+    const isSelected = activeIndex === index;
+    const buttonRef = useRef(null);
+    const handleKeyDown = (e) => {
+        let newIndex = index;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                e.preventDefault();
+                newIndex = (index + 1) % tabCount;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                e.preventDefault();
+                newIndex = (index - 1 + tabCount) % tabCount;
+                break;
+            case 'Home':
+                e.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                e.preventDefault();
+                newIndex = tabCount - 1;
+                break;
+            default:
+                return;
+        }
+        setActiveIndex(newIndex);
+        // Focus the new tab
+        const newTab = document.getElementById(`tab-${newIndex}`);
+        newTab?.focus();
+    };
+    return (jsx("button", { ref: buttonRef, type: "button", className: classnames([
+            'tab',
+            {
+                'tab-active': isSelected,
+            },
+            className
+        ]), role: "tab", "aria-selected": isSelected, "aria-controls": `tabpanel-${index}`, id: `tab-${index}`, tabIndex: isSelected ? 0 : -1, onClick: () => setActiveIndex(index), onKeyDown: handleKeyDown, children: label }));
+};
+
+const a$2 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M160,48V208L80,128Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M163.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,168,208V48A8,8,0,0,0,163.06,40.61ZM152,188.69,91.31,128,152,67.31Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M164.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L88.49,128Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M162.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L85.66,128Z" }))
+  ]
+]);
+
+const t$1 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: a$2 }));
 t$1.displayName = "CaretLeftIcon";
 
-const t = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"
-}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M176,128,96,208V48Z",
-  opacity: "0.2"
-}), /* @__PURE__ */React.createElement("path", {
-  d: "M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34ZM104,188.69V67.31L164.69,128Z"
-}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z"
-}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z"
-}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
-}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M178.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L170.34,128,93.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,178.83,130.83Z"
-}))]]);
-
-const e$1 = /*#__PURE__*/React.forwardRef((o, r) => /* @__PURE__ */React.createElement(p, {
-  ref: r,
-  ...o,
-  weights: t
-}));
-e$1.displayName = "CaretRightIcon";
-
-const e = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M208.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L137,128ZM57,128l71.52-71.51a12,12,0,0,0-17-17l-80,80a12,12,0,0,0,0,17l80,80a12,12,0,0,0,17-17Z"
-}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M200,48V208l-80-80Z",
-  opacity: "0.2"
-}), /* @__PURE__ */React.createElement("path", {
-  d: "M203.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,208,208V48A8,8,0,0,0,203.06,40.61ZM192,188.69,131.31,128,192,67.31Zm-66.34,13.65a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L51.31,128Z"
-}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M208,48V208a8,8,0,0,1-13.66,5.66L128,147.31V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,128,48v60.69l66.34-66.35A8,8,0,0,1,208,48Z"
-}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M204.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L128.49,128ZM48.49,128l75.75-75.76a6,6,0,0,0-8.48-8.48l-80,80a6,6,0,0,0,0,8.48l80,80a6,6,0,1,0,8.48-8.48Z"
-}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z"
-}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M202.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L125.66,128ZM45.66,128l77.17-77.17a4,4,0,0,0-5.66-5.66l-80,80a4,4,0,0,0,0,5.66l80,80a4,4,0,1,0,5.66-5.66Z"
-}))]]);
-
-const o$1 = /*#__PURE__*/React.forwardRef((t, r) => /* @__PURE__ */React.createElement(p, {
-  ref: r,
-  ...t,
-  weights: e
-}));
+const t = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M176,128,96,208V48Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34ZM104,188.69V67.31L164.69,128Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M178.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L170.34,128,93.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,178.83,130.83Z" }))
+  ]
+]);
+
+const e$2 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: t }));
+e$2.displayName = "CaretRightIcon";
+
+const e$1 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L137,128ZM57,128l71.52-71.51a12,12,0,0,0-17-17l-80,80a12,12,0,0,0,0,17l80,80a12,12,0,0,0,17-17Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M200,48V208l-80-80Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M203.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,208,208V48A8,8,0,0,0,203.06,40.61ZM192,188.69,131.31,128,192,67.31Zm-66.34,13.65a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L51.31,128Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,48V208a8,8,0,0,1-13.66,5.66L128,147.31V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,128,48v60.69l66.34-66.35A8,8,0,0,1,208,48Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M204.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L128.49,128ZM48.49,128l75.75-75.76a6,6,0,0,0-8.48-8.48l-80,80a6,6,0,0,0,0,8.48l80,80a6,6,0,1,0,8.48-8.48Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M202.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L125.66,128ZM45.66,128l77.17-77.17a4,4,0,0,0-5.66-5.66l-80,80a4,4,0,0,0,0,5.66l80,80a4,4,0,1,0,5.66-5.66Z" }))
+  ]
+]);
+
+const o$1 = e$9.forwardRef((t, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...t, weights: e$1 }));
 o$1.displayName = "CaretDoubleLeftIcon";
 
-const a = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M144.49,136.49l-80,80a12,12,0,0,1-17-17L119,128,47.51,56.49a12,12,0,0,1,17-17l80,80A12,12,0,0,1,144.49,136.49Zm80-17-80-80a12,12,0,1,0-17,17L199,128l-71.52,71.51a12,12,0,0,0,17,17l80-80A12,12,0,0,0,224.49,119.51Z"
-}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M136,128,56,208V48Z",
-  opacity: "0.2"
-}), /* @__PURE__ */React.createElement("path", {
-  d: "M141.66,122.34l-80-80A8,8,0,0,0,48,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,141.66,122.34ZM64,188.69V67.31L124.69,128Zm157.66-55-80,80a8,8,0,0,1-11.32-11.32L204.69,128,130.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,221.66,133.66Z"
-}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M221.66,133.66l-80,80A8,8,0,0,1,128,208V147.31L61.66,213.66A8,8,0,0,1,48,208V48a8,8,0,0,1,13.66-5.66L128,108.69V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,221.66,133.66Z"
-}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M140.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L127.51,128,51.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,140.24,132.24Zm80-8.48-80-80a6,6,0,0,0-8.48,8.48L207.51,128l-75.75,75.76a6,6,0,1,0,8.48,8.48l80-80A6,6,0,0,0,220.24,123.76Z"
-}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
-}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
-  d: "M138.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L130.34,128,53.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,138.83,130.83Zm80-5.66-80-80a4,4,0,0,0-5.66,5.66L210.34,128l-77.17,77.17a4,4,0,0,0,5.66,5.66l80-80A4,4,0,0,0,218.83,125.17Z"
-}))]]);
-
-const o = /*#__PURE__*/React.forwardRef((t, r) => /* @__PURE__ */React.createElement(p, {
-  ref: r,
-  ...t,
-  weights: a
-}));
+const a$1 = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M144.49,136.49l-80,80a12,12,0,0,1-17-17L119,128,47.51,56.49a12,12,0,0,1,17-17l80,80A12,12,0,0,1,144.49,136.49Zm80-17-80-80a12,12,0,1,0-17,17L199,128l-71.52,71.51a12,12,0,0,0,17,17l80-80A12,12,0,0,0,224.49,119.51Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M136,128,56,208V48Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M141.66,122.34l-80-80A8,8,0,0,0,48,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,141.66,122.34ZM64,188.69V67.31L124.69,128Zm157.66-55-80,80a8,8,0,0,1-11.32-11.32L204.69,128,130.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,221.66,133.66Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M221.66,133.66l-80,80A8,8,0,0,1,128,208V147.31L61.66,213.66A8,8,0,0,1,48,208V48a8,8,0,0,1,13.66-5.66L128,108.69V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,221.66,133.66Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M140.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L127.51,128,51.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,140.24,132.24Zm80-8.48-80-80a6,6,0,0,0-8.48,8.48L207.51,128l-75.75,75.76a6,6,0,1,0,8.48,8.48l80-80A6,6,0,0,0,220.24,123.76Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M138.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L130.34,128,53.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,138.83,130.83Zm80-5.66-80-80a4,4,0,0,0-5.66,5.66L210.34,128l-77.17,77.17a4,4,0,0,0,5.66,5.66l80-80A4,4,0,0,0,218.83,125.17Z" }))
+  ]
+]);
+
+const o = e$9.forwardRef((t, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...t, weights: a$1 }));
 o.displayName = "CaretDoubleRightIcon";
 
-const TableFooter = ({
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(['table_footer', className])
-  }, props), /*#__PURE__*/React__default.createElement(Select, {
-    dense: true,
-    id: "rows",
-    className: "table_rowSelect"
-  }, /*#__PURE__*/React__default.createElement("option", {
-    value: "1"
-  }, "10"), /*#__PURE__*/React__default.createElement("option", {
-    value: "2"
-  }, "25"), /*#__PURE__*/React__default.createElement("option", {
-    value: "2"
-  }, "50"), /*#__PURE__*/React__default.createElement("option", {
-    value: "2"
-  }, "100"), /*#__PURE__*/React__default.createElement("option", {
-    value: "2"
-  }, "All")), /*#__PURE__*/React__default.createElement(Buttons, {
-    className: "table_pagination"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    kind: "icon",
-    variant: "transparent",
-    size: "sm"
-  }, /*#__PURE__*/React__default.createElement(o$1, null)), /*#__PURE__*/React__default.createElement(Button, {
-    kind: "icon",
-    variant: "transparent",
-    size: "sm"
-  }, /*#__PURE__*/React__default.createElement(t$1, null)), /*#__PURE__*/React__default.createElement(Button, {
-    kind: "icon",
-    size: "sm"
-  }, "1"), /*#__PURE__*/React__default.createElement(Button, {
-    kind: "icon",
-    variant: "transparent",
-    size: "sm"
-  }, "2"), /*#__PURE__*/React__default.createElement(Button, {
-    kind: "icon",
-    variant: "transparent",
-    size: "sm"
-  }, "3"), /*#__PURE__*/React__default.createElement(Button, {
-    kind: "icon",
-    variant: "transparent",
-    size: "sm"
-  }, "\u2026"), /*#__PURE__*/React__default.createElement(Button, {
-    kind: "icon",
-    variant: "transparent",
-    size: "sm"
-  }, "8"), /*#__PURE__*/React__default.createElement(Button, {
-    kind: "icon",
-    variant: "transparent",
-    size: "sm"
-  }, /*#__PURE__*/React__default.createElement(e$1, null)), /*#__PURE__*/React__default.createElement(Button, {
-    kind: "icon",
-    variant: "transparent",
-    size: "sm"
-  }, /*#__PURE__*/React__default.createElement(o, null))));
-};
-TableFooter.propTypes = {
-  className: PropTypes.node
-};
-
-const DenseContext = /*#__PURE__*/createContext(false);
-const Table = ({
-  striped,
-  hasHover,
-  dense,
-  border,
-  withFooter,
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement(DenseContext.Provider, {
-    value: dense
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['table', {
-      'table-striped': striped,
-      'table-hasHover': hasHover,
-      'table-dense': dense,
-      'table-border': border
-    }, className])
-  }, /*#__PURE__*/React__default.createElement("table", _extends({
-    cellPadding: 0,
-    cellSpacing: 0,
-    className: classnames('table_content')
-  }, props), children), withFooter ? /*#__PURE__*/React__default.createElement(TableFooter, {
-    dense: dense ? dense : null
-  }) : null));
-};
-Table.propTypes = {
-  striped: PropTypes.bool,
-  hasHover: PropTypes.bool,
-  dense: PropTypes.bool,
-  border: PropTypes.bool,
-  withFooter: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const TableBody = ({
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("tbody", _extends({
-    className: classnames(['table_body', className])
-  }, props), children);
-};
-TableBody.propTypes = {
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const TableCellComponentContext = /*#__PURE__*/createContext('td');
-const TableHead = ({
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement(TableCellComponentContext.Provider, {
-    value: "th"
-  }, /*#__PURE__*/React__default.createElement("thead", _extends({
-    className: classnames(['table_head', className])
-  }, props), children));
-};
-TableHead.propTypes = {
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const TableCell = ({
-  kind = 'default',
-  className,
-  children,
-  ...props
-}) => {
-  const useTableCellComponent = () => useContext(TableCellComponentContext);
-  const Component = useTableCellComponent();
-  return /*#__PURE__*/React__default.createElement(Component, _extends({
-    className: classnames(['table_cell', {
-      [`table_cell-${kind}`]: kind
-    }, className])
-  }, props), children);
-};
-TableCell.propTypes = {
-  kind: PropTypes.oneOf(['default', 'number', 'action']),
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const TableRow = ({
-  className,
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement("tr", _extends({
-    className: classnames(['table_row', className])
-  }, props), children);
-};
-TableRow.propTypes = {
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const TabsControl = ({
-  className,
-  children
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", {
-    role: "tablist",
-    className: classnames(['tabs_controls', className])
-  }, children);
-};
-TabsControl.propTypes = {
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const TabsPanel = ({
-  index,
-  className,
-  children
-}) => {
-  const {
-    activeIndex
-  } = useContext(TabsContext);
-  const isActive = activeIndex === index;
-  return isActive ? /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['tabs_panel', className]),
-    role: "tabpanel",
-    id: `tabpanel-${index}`,
-    "aria-labelledby": `tab-${index}`,
-    hidden: !isActive
-  }, children) : null;
-};
-TabsPanel.propTypes = {
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const Tag = ({
-  color = 'primary',
-  dense,
-  className,
-  children = 'Tag',
-  ...props
-}) => {
-  return /*#__PURE__*/React__default.createElement(Text, _extends({
-    className: classnames(['tag', {
-      [`tag-${color}`]: color,
-      'tag-dense': dense
-    }, className])
-  }, props), children);
-};
-Tag.propTypes = {
-  color: PropTypes.oneOf(['primary', 'secondary', 'grey', 'success', 'info', 'warning', 'error']),
-  dense: PropTypes.bool,
-  className: PropTypes.node,
-  children: PropTypes.node.isRequired
-};
-
-const Textarea = ({
-  onChange,
-  id,
-  placeholder,
-  label = 'Textarea',
-  isFocused,
-  error,
-  disabled,
-  optional,
-  dense,
-  hint,
-  hideLabel,
-  className,
-  ...props
-}) => {
-  const inputRef = useRef(null);
-  useEffect(() => {
-    if (isFocused && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isFocused]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(['input', {
-      'js-error': error,
-      'input-disabled': disabled,
-      'input-optional': optional,
-      'input-dense': dense
-    }, className])
-  }, /*#__PURE__*/React__default.createElement(InputLabel, {
-    htmlFor: id,
-    label: label,
-    hint: hint,
-    error: error,
-    hideLabel: hideLabel
-  }), /*#__PURE__*/React__default.createElement("textarea", _extends({
-    ref: inputRef,
-    className: 'input_control',
-    name: id,
-    id: id,
-    placeholder: placeholder,
-    disabled: disabled,
-    required: !(disabled || optional),
-    rows: 4,
-    onChange: onChange
-  }, hint || error ? {
-    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
-  } : null, props)));
-};
-Textarea.propTypes = {
-  onChange: PropTypes.func,
-  id: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  isFocused: PropTypes.bool,
-  error: PropTypes.bool,
-  disabled: PropTypes.bool,
-  optional: PropTypes.bool,
-  dense: PropTypes.bool,
-  hint: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  className: PropTypes.node
-};
-
-export { Alert, Breadcrumbs, Button, Buttons, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Checkboxes, Color, Display, Divider, Grid, Input, InputLabel, Link, List, ListItem, Nav, NavBar, NavItem, Radio, RadioButtons, Section, SectionContent, SectionHeader, Select, Snippet, Status, Switch, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableRow, Tabs, TabsControl, TabsPanel, Tag, Text, Textarea };
+const TableFooter = ({ className, ...props }) => {
+    return (jsxs("div", { className: classnames([
+            'table_footer',
+            className
+        ]), ...props, children: [jsxs(Select, { dense: true, id: "rows", className: "table_rowSelect", children: [jsx("option", { value: "1", children: "10" }), jsx("option", { value: "2", children: "25" }), jsx("option", { value: "2", children: "50" }), jsx("option", { value: "2", children: "100" }), jsx("option", { value: "2", children: "All" })] }), jsxs(Buttons, { className: "table_pagination", children: [jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: jsx(o$1, {}) }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: jsx(t$1, {}) }), jsx(Button, { kind: "icon", size: "sm", children: "1" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: "2" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: "3" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: "\u2026" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: "8" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: jsx(e$2, {}) }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: jsx(o, {}) })] })] }));
+};
+
+const DenseContext = createContext(false);
+const Table = ({ striped, hasHover, dense, border, withFooter, className, children, ...props }) => {
+    return (jsx(DenseContext.Provider, { value: dense ?? false, children: jsxs("div", { className: classnames([
+                'table',
+                {
+                    'table-striped': striped,
+                    'table-hasHover': hasHover,
+                    'table-dense': dense,
+                    'table-border': border
+                },
+                className
+            ]), children: [jsx("table", { cellPadding: 0, cellSpacing: 0, className: classnames('table_content'), ...props, children: children }), withFooter ? jsx(TableFooter, {}) : null] }) }));
+};
+
+const TableBody = ({ className, children, ...props }) => {
+    return (jsx("tbody", { className: classnames([
+            'table_body',
+            className
+        ]), ...props, children: children }));
+};
+
+const TableCellComponentContext = createContext('td');
+const TableHead = ({ className, children, ...props }) => {
+    return (jsx(TableCellComponentContext.Provider, { value: 'th', children: jsx("thead", { className: classnames([
+                'table_head',
+                className
+            ]), ...props, children: children }) }));
+};
+
+const TableCell = ({ kind = 'default', className, children, ...props }) => {
+    const Component = useContext(TableCellComponentContext);
+    return (jsx(Component, { className: classnames([
+            'table_cell',
+            {
+                [`table_cell-${kind}`]: kind,
+            },
+            className
+        ]), ...props, children: children }));
+};
+
+const TableRow = ({ className, children, ...props }) => {
+    return (jsx("tr", { className: classnames([
+            'table_row',
+            className
+        ]), ...props, children: children }));
+};
+
+const TabsControl = ({ className, children, }) => {
+    return (jsx("div", { role: 'tablist', className: classnames([
+            'tabs_controls',
+            className
+        ]), children: children }));
+};
+
+const TabsPanel = ({ index, className, children, }) => {
+    const context = useContext(TabsContext);
+    const activeIndex = context?.activeIndex ?? 0;
+    const isActive = activeIndex === index;
+    return (isActive ? (jsx("div", { className: classnames([
+            'tabs_panel',
+            className
+        ]), role: "tabpanel", id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, hidden: !isActive, children: children })) : null);
+};
+
+const Tag = ({ color = 'primary', dense, className, children = 'Tag', ...props }) => {
+    return (jsx(Text, { className: classnames([
+            'tag',
+            {
+                [`tag-${color}`]: color,
+                'tag-dense': dense
+            },
+            className
+        ]), ...props, children: children }));
+};
+
+const Textarea = ({ onChange, id, placeholder, label = 'Textarea', isFocused, error, disabled, optional, dense, hint, hideLabel, className, ...props }) => {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (isFocused && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isFocused]);
+    return (jsxs("div", { className: classnames([
+            'input',
+            {
+                'js-error': error,
+                'input-disabled': disabled,
+                'input-optional': optional,
+                'input-dense': dense
+            },
+            className
+        ]), children: [jsx(InputLabel, { htmlFor: id, label: label, hint: hint, hideLabel: hideLabel }), jsx("textarea", { ref: inputRef, className: 'input_control', name: id, id: id, placeholder: placeholder, disabled: disabled, required: !(disabled || optional), "aria-invalid": error ? true : undefined, rows: 4, onChange: onChange, ...(hint || error
+                    ? {
+                        'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null]
+                            .filter(Boolean)
+                            .join(' '),
+                    }
+                    : null), ...props })] }));
+};
+
+const a = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M142,176a6,6,0,0,1-6,6,14,14,0,0,1-14-14V128a2,2,0,0,0-2-2,6,6,0,0,1,0-12,14,14,0,0,1,14,14v40a2,2,0,0,0,2,2A6,6,0,0,1,142,176ZM124,94a10,10,0,1,0-10-10A10,10,0,0,0,124,94Zm106,34A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M140,176a4,4,0,0,1-4,4,12,12,0,0,1-12-12V128a4,4,0,0,0-4-4,4,4,0,0,1,0-8,12,12,0,0,1,12,12v40a4,4,0,0,0,4,4A4,4,0,0,1,140,176ZM124,92a8,8,0,1,0-8-8A8,8,0,0,0,124,92Zm104,36A100,100,0,1,1,128,28,100.11,100.11,0,0,1,228,128Zm-8,0a92,92,0,1,0-92,92A92.1,92.1,0,0,0,220,128Z" }))
+  ]
+]);
+
+const e = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a }));
+e.displayName = "InfoIcon";
+
+const Tooltip = ({ infoIcon, content, dense, className, children, ...props }) => {
+    const tooltipId = useId();
+    return (jsxs("span", { className: classnames([
+            'tooltip',
+            {
+                'tooltip-info': infoIcon,
+            },
+            className
+        ]), "aria-describedby": tooltipId, tabIndex: infoIcon ? 0 : undefined, ...props, children: [infoIcon ? (jsx(e, { className: classnames('tooltip_icon'), size: 12, "aria-hidden": "true" })) : (children), jsx("span", { id: tooltipId, role: "tooltip", className: classnames([
+                    'tooltip_content',
+                    {
+                        'tooltip_content-dense': dense
+                    }
+                ]), children: content })] }));
+};
+
+export { Accordion, AccordionContext, AccordionItem, Alert, Breadcrumbs, Button, Buttons, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Checkboxes, Chip, Color, Display, Divider, Grid, Input, InputLabel, Link, List, ListItem, Nav, NavBar, NavItem, Radio, RadioButtons, Section, SectionContent, SectionHeader, Select, Snippet, Status, Step, Stepper, StepperContext, Switch, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableRow, Tabs, TabsControl, TabsPanel, Tag, Text, Textarea, Tooltip };