@progressiveui/react 2.0.2 → 2.0.4

package/lib/index.js

@@ -1,4575 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var reactTransitionState = require('react-transition-state');
-var iconsReact = require('@progressiveui/icons-react');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var ReactDOM = require('react-dom');
-var reactPopperTooltip = require('react-popper-tooltip');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var jsxRuntime = {exports: {}};
-
-var reactJsxRuntime_production = {};
-
-var hasRequiredReactJsxRuntime_production;
-function requireReactJsxRuntime_production() {
-  if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
-  hasRequiredReactJsxRuntime_production = 1;
-  var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-    REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-  function jsxProd(type, config, maybeKey) {
-    var key = null;
-    void 0 !== maybeKey && (key = "" + maybeKey);
-    void 0 !== config.key && (key = "" + config.key);
-    if ("key" in config) {
-      maybeKey = {};
-      for (var propName in config) "key" !== propName && (maybeKey[propName] = config[propName]);
-    } else maybeKey = config;
-    config = maybeKey.ref;
-    return {
-      $$typeof: REACT_ELEMENT_TYPE,
-      type: type,
-      key: key,
-      ref: void 0 !== config ? config : null,
-      props: maybeKey
-    };
-  }
-  reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
-  reactJsxRuntime_production.jsx = jsxProd;
-  reactJsxRuntime_production.jsxs = jsxProd;
-  return reactJsxRuntime_production;
-}
-
-var reactJsxRuntime_development = {};
-
-var hasRequiredReactJsxRuntime_development;
-function requireReactJsxRuntime_development() {
-  if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-  hasRequiredReactJsxRuntime_development = 1;
-  "production" !== process.env.NODE_ENV && function () {
-    function getComponentNameFromType(type) {
-      if (null == type) return null;
-      if ("function" === typeof type) return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
-      if ("string" === typeof type) return type;
-      switch (type) {
-        case REACT_FRAGMENT_TYPE:
-          return "Fragment";
-        case REACT_PROFILER_TYPE:
-          return "Profiler";
-        case REACT_STRICT_MODE_TYPE:
-          return "StrictMode";
-        case REACT_SUSPENSE_TYPE:
-          return "Suspense";
-        case REACT_SUSPENSE_LIST_TYPE:
-          return "SuspenseList";
-        case REACT_ACTIVITY_TYPE:
-          return "Activity";
-      }
-      if ("object" === _typeof(type)) switch ("number" === typeof type.tag && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), type.$$typeof) {
-        case REACT_PORTAL_TYPE:
-          return "Portal";
-        case REACT_CONTEXT_TYPE:
-          return (type.displayName || "Context") + ".Provider";
-        case REACT_CONSUMER_TYPE:
-          return (type._context.displayName || "Context") + ".Consumer";
-        case REACT_FORWARD_REF_TYPE:
-          var innerType = type.render;
-          type = type.displayName;
-          type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
-          return type;
-        case REACT_MEMO_TYPE:
-          return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
-        case REACT_LAZY_TYPE:
-          innerType = type._payload;
-          type = type._init;
-          try {
-            return getComponentNameFromType(type(innerType));
-          } catch (x) {}
-      }
-      return null;
-    }
-    function testStringCoercion(value) {
-      return "" + value;
-    }
-    function checkKeyStringCoercion(value) {
-      try {
-        testStringCoercion(value);
-        var JSCompiler_inline_result = !1;
-      } catch (e) {
-        JSCompiler_inline_result = !0;
-      }
-      if (JSCompiler_inline_result) {
-        JSCompiler_inline_result = console;
-        var JSCompiler_temp_const = JSCompiler_inline_result.error;
-        var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
-        JSCompiler_temp_const.call(JSCompiler_inline_result, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", JSCompiler_inline_result$jscomp$0);
-        return testStringCoercion(value);
-      }
-    }
-    function getTaskName(type) {
-      if (type === REACT_FRAGMENT_TYPE) return "<>";
-      if ("object" === _typeof(type) && null !== type && type.$$typeof === REACT_LAZY_TYPE) return "<...>";
-      try {
-        var name = getComponentNameFromType(type);
-        return name ? "<" + name + ">" : "<...>";
-      } catch (x) {
-        return "<...>";
-      }
-    }
-    function getOwner() {
-      var dispatcher = ReactSharedInternals.A;
-      return null === dispatcher ? null : dispatcher.getOwner();
-    }
-    function UnknownOwner() {
-      return Error("react-stack-top-frame");
-    }
-    function hasValidKey(config) {
-      if (hasOwnProperty.call(config, "key")) {
-        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
-        if (getter && getter.isReactWarning) return !1;
-      }
-      return void 0 !== config.key;
-    }
-    function defineKeyPropWarningGetter(props, displayName) {
-      function warnAboutAccessingKey() {
-        specialPropKeyWarningShown || (specialPropKeyWarningShown = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", displayName));
-      }
-      warnAboutAccessingKey.isReactWarning = !0;
-      Object.defineProperty(props, "key", {
-        get: warnAboutAccessingKey,
-        configurable: !0
-      });
-    }
-    function elementRefGetterWithDeprecationWarning() {
-      var componentName = getComponentNameFromType(this.type);
-      didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."));
-      componentName = this.props.ref;
-      return void 0 !== componentName ? componentName : null;
-    }
-    function ReactElement(type, key, self, source, owner, props, debugStack, debugTask) {
-      self = props.ref;
-      type = {
-        $$typeof: REACT_ELEMENT_TYPE,
-        type: type,
-        key: key,
-        props: props,
-        _owner: owner
-      };
-      null !== (void 0 !== self ? self : null) ? Object.defineProperty(type, "ref", {
-        enumerable: !1,
-        get: elementRefGetterWithDeprecationWarning
-      }) : Object.defineProperty(type, "ref", {
-        enumerable: !1,
-        value: null
-      });
-      type._store = {};
-      Object.defineProperty(type._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      });
-      Object.defineProperty(type, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      });
-      Object.defineProperty(type, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: debugStack
-      });
-      Object.defineProperty(type, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: debugTask
-      });
-      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
-      return type;
-    }
-    function jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self, debugStack, debugTask) {
-      var children = config.children;
-      if (void 0 !== children) if (isStaticChildren) {
-        if (isArrayImpl(children)) {
-          for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++) validateChildKeys(children[isStaticChildren]);
-          Object.freeze && Object.freeze(children);
-        } else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
-      } else validateChildKeys(children);
-      if (hasOwnProperty.call(config, "key")) {
-        children = getComponentNameFromType(type);
-        var keys = Object.keys(config).filter(function (k) {
-          return "key" !== k;
-        });
-        isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
-        didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />', isStaticChildren, children, keys, children), didWarnAboutKeySpread[children + isStaticChildren] = !0);
-      }
-      children = null;
-      void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
-      hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
-      if ("key" in config) {
-        maybeKey = {};
-        for (var propName in config) "key" !== propName && (maybeKey[propName] = config[propName]);
-      } else maybeKey = config;
-      children && defineKeyPropWarningGetter(maybeKey, "function" === typeof type ? type.displayName || type.name || "Unknown" : type);
-      return ReactElement(type, children, self, source, getOwner(), maybeKey, debugStack, debugTask);
-    }
-    function validateChildKeys(node) {
-      "object" === _typeof(node) && null !== node && node.$$typeof === REACT_ELEMENT_TYPE && node._store && (node._store.validated = 1);
-    }
-    var React = React__default["default"],
-      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
-      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
-      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
-      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
-      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
-      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
-      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
-      REACT_MEMO_TYPE = Symbol.for("react.memo"),
-      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
-      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
-      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
-      ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
-      hasOwnProperty = Object.prototype.hasOwnProperty,
-      isArrayImpl = Array.isArray,
-      createTask = console.createTask ? console.createTask : function () {
-        return null;
-      };
-    React = {
-      "react-stack-bottom-frame": function reactStackBottomFrame(callStackForError) {
-        return callStackForError();
-      }
-    };
-    var specialPropKeyWarningShown;
-    var didWarnAboutElementRef = {};
-    var unknownOwnerDebugStack = React["react-stack-bottom-frame"].bind(React, UnknownOwner)();
-    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
-    var didWarnAboutKeySpread = {};
-    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-    reactJsxRuntime_development.jsx = function (type, config, maybeKey, source, self) {
-      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-      return jsxDEVImpl(type, config, maybeKey, !1, source, self, trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack, trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask);
-    };
-    reactJsxRuntime_development.jsxs = function (type, config, maybeKey, source, self) {
-      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-      return jsxDEVImpl(type, config, maybeKey, !0, source, self, trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack, trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask);
-    };
-  }();
-  return reactJsxRuntime_development;
-}
-
-if (process.env.NODE_ENV === 'production') {
-  jsxRuntime.exports = requireReactJsxRuntime_production();
-} else {
-  jsxRuntime.exports = requireReactJsxRuntime_development();
-}
-var jsxRuntimeExports = jsxRuntime.exports;
-
-const getTransition = (transition, name) => transition === true || !!(transition && transition[name]);
-const useAccordionProvider = (_a = {}) => {
-    var { transition, transitionTimeout } = _a, rest = __rest(_a, ["transition", "transitionTimeout"]);
-    const transitionMap = reactTransitionState.useTransitionMap(Object.assign({ timeout: transitionTimeout, enter: getTransition(transition, 'enter'), exit: getTransition(transition, 'exit'), preEnter: getTransition(transition, 'preEnter'), preExit: getTransition(transition, 'preExit') }, rest));
-    return Object.assign({ mountOnEnter: !!rest.mountOnEnter, initialEntered: !!rest.initialEntered }, transitionMap);
-};
-
-const ACCORDION_BLOCK = "szh-accordion";
-const ACCORDION_PREFIX = "szh-adn";
-const ACCORDION_ATTR = `data-${ACCORDION_PREFIX}`;
-const ACCORDION_BTN_ATTR = `data-${ACCORDION_PREFIX}-btn`;
-const AccordionContext = React.createContext({});
-
-const bem = (block, element, modifiers) => (className, props) => {
-    const blockElement = element ? `${block}__${element}` : block;
-    let classString = blockElement;
-    modifiers &&
-        Object.keys(modifiers).forEach((name) => {
-            const value = modifiers[name];
-            if (value)
-                classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
-        });
-    let expandedClassName = typeof className === 'function' ? className(props) : className;
-    if (typeof expandedClassName === 'string') {
-        expandedClassName = expandedClassName.trim();
-        if (expandedClassName)
-            classString += ` ${expandedClassName}`;
-    }
-    return classString;
-};
-
-/* eslint-disable */
-// @ts-nocheck
-const mergeProps = (target, source) => {
-    if (!source)
-        return target;
-    const result = Object.assign({}, target);
-    Object.keys(source).forEach((key) => {
-        const targetProp = target[key];
-        const sourceProp = source[key];
-        if (typeof sourceProp === 'function' && targetProp) {
-            result[key] = (...e) => {
-                targetProp(...e);
-                sourceProp(...e);
-            };
-        }
-        else {
-            result[key] = sourceProp;
-        }
-    });
-    return result;
-};
-
-const AccordionProvider = (props) => jsxRuntimeExports.jsx(AccordionContext.Provider, Object.assign({}, props));
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-const getAccordion = (node) => {
-    do {
-        node = node.parentElement;
-    } while (node && !node.hasAttribute(ACCORDION_ATTR));
-    return node;
-};
-const getNextIndex = (moveUp, current, length) => moveUp ? (current > 0 ? current - 1 : length - 1) : (current + 1) % length;
-const moveFocus = (moveUp, e) => {
-    const { activeElement } = document;
-    if (!activeElement ||
-        !activeElement.hasAttribute(ACCORDION_BTN_ATTR) ||
-        getAccordion(activeElement) !== e.currentTarget)
-        return;
-    const nodes = e.currentTarget.querySelectorAll(`[${ACCORDION_BTN_ATTR}]`);
-    const { length } = nodes;
-    for (let i = 0; i < length; i++) {
-        if (nodes[i] === activeElement) {
-            let next = getNextIndex(moveUp, i, length);
-            while (getAccordion(nodes[i]) !== getAccordion(nodes[next]))
-                next = getNextIndex(moveUp, next, length);
-            if (i !== next) {
-                e.preventDefault();
-                nodes[next].focus();
-            }
-            break;
-        }
-    }
-};
-const useAccordion = () => {
-    const accordionProps = {
-        [ACCORDION_ATTR]: '',
-        onKeyDown: (e) => e.key === 'ArrowUp'
-            ? moveFocus(true, e)
-            : e.key === 'ArrowDown' && moveFocus(false, e),
-    };
-    return {
-        accordionProps,
-    };
-};
-
-const ControlledAccordion = React__namespace.forwardRef((_a, ref) => {
-    var { providerValue, className } = _a, rest = __rest(_a, ["providerValue", "className"]);
-    const { accordionProps } = useAccordion();
-    return (jsxRuntimeExports.jsx(AccordionProvider, Object.assign({ value: providerValue }, { children: jsxRuntimeExports.jsx("div", Object.assign({}, mergeProps(accordionProps, rest), { ref: ref, className: bem(ACCORDION_BLOCK)(className) })) })));
-});
-ControlledAccordion.displayName = "ControlledAccordion";
-
-const Accordion = React__namespace.forwardRef((_a, ref) => {
-    var { allowMultiple, initialEntered, mountOnEnter, unmountOnExit, transition, transitionTimeout, onStateChange } = _a, rest = __rest(_a, ["allowMultiple", "initialEntered", "mountOnEnter", "unmountOnExit", "transition", "transitionTimeout", "onStateChange"]);
-    const providerValue = useAccordionProvider({
-        allowMultiple,
-        initialEntered,
-        mountOnEnter,
-        unmountOnExit,
-        transition,
-        transitionTimeout,
-        onStateChange,
-    });
-    return (jsxRuntimeExports.jsx(ControlledAccordion, Object.assign({}, rest, { ref: ref, providerValue: providerValue })));
-});
-Accordion.displayName = "Accordion";
-
-const settings = {
-    prefix: "wfp",
-    initialized: false,
-    selectorTabbable: `
-    a[href], area[href], input:not([disabled]):not([tabindex='-1']),
-    button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
-    textarea:not([disabled]):not([tabindex='-1']),
-    iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]
-  `,
-    selectorFocusable: `
-    a[href], area[href], input:not([disabled]),
-    button:not([disabled]),select:not([disabled]),
-    textarea:not([disabled]),
-    iframe, object, embed, *[tabindex], *[contenteditable=true]
-  `,
-    theme: `light`,
-    actualTheme: `light`,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-    setTheme: (theme) => {
-        console.warn("setTheme not initialized");
-    },
-};
-//module.exports = settings;
-
-const WFPCoreContext = React.createContext(settings);
-// Detecting the default theme
-const isBrowserDefaultDark = () => typeof window !== "undefined"
-    ? window.matchMedia("(prefers-color-scheme: dark)").matches
-    : false;
-const WFPCoreProvider = (_a) => {
-    var { children, wrapperElement /* = document?.body*/, prefix = "wfp", initialTheme = "light" } = _a, props = __rest(_a, ["children", "wrapperElement", "prefix", "initialTheme"]);
-    const setElementTheme = (theme) => {
-        const prefixClass = `${prefix}--theme--`;
-        if (theme === "auto") {
-            isBrowserDefaultDark() ? "dark" : "light";
-        }
-        const newTheme = theme === "auto" && isBrowserDefaultDark()
-            ? "dark"
-            : theme === "auto"
-                ? "light"
-                : theme;
-        if (wrapperElement) {
-            const classes = wrapperElement.className
-                .split(" ")
-                .filter((c) => !c.startsWith(prefixClass));
-            wrapperElement.className = classes.join(" ").trim();
-            wrapperElement.classList.add(`${prefix}--theme--${newTheme}`);
-        }
-        return newTheme;
-    };
-    const getActualTheme = () => {
-        const defaultTheme = getDefaultTheme();
-        if (defaultTheme === "auto")
-            return isBrowserDefaultDark() ? "dark" : "light";
-        return defaultTheme;
-    };
-    const getDefaultTheme = () => {
-        const localStorageTheme = typeof window !== "undefined"
-            ? window.localStorage.getItem("theme")
-            : false;
-        const defaultTheme = localStorageTheme || initialTheme;
-        setElementTheme(defaultTheme);
-        return defaultTheme;
-    };
-    const [themeState, setThemeState] = React.useState(getDefaultTheme());
-    const [actualThemeState, setActualThemeState] = React.useState(getActualTheme());
-    React.useEffect(() => {
-        const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
-        darkThemeMq.addListener(mqListener);
-        return () => darkThemeMq.removeListener(mqListener);
-    }, []);
-    const mqListener = () => {
-        if (themeState === "auto") {
-            const newTheme = setElementTheme("auto");
-            setActualThemeState(newTheme);
-        }
-    };
-    const setTheme = (theme) => {
-        const newTheme = setElementTheme(theme);
-        setActualThemeState(newTheme);
-        if (typeof window !== "undefined")
-            window.localStorage.setItem("theme", theme);
-        setThemeState(theme);
-    };
-    const ctx = Object.assign(Object.assign(Object.assign({}, settings), props), { prefix, theme: themeState, actualTheme: actualThemeState, initialized: true, setTheme });
-    return (jsxRuntimeExports.jsx(WFPCoreContext.Provider, Object.assign({ value: ctx }, { children: children })));
-};
-
-function useSettings() {
-    const settings$1 = React.useContext(WFPCoreContext);
-    /* if (settings?.initialized === false) {
-      console.warn("useSettings: WFPCoreContext not initialized");
-    } */
-    if (settings$1 === undefined) {
-        return settings;
-    }
-    return settings$1;
-}
-
-let current = 0;
-const useIdShim = () => {
-    const [id, setId] = React.useState();
-    React.useEffect(() => setId(++current), []);
-    return (id && `${ACCORDION_PREFIX}-${id}`);
-};
-const _useId = React.useId || useIdShim;
-
-const useAccordionItem = ({ state, toggle, disabled }) => {
-    const buttonId = _useId();
-    const panelId = buttonId && buttonId + "-";
-    const buttonProps = {
-        id: buttonId,
-        "aria-controls": panelId,
-        "aria-expanded": state.isEnter,
-        onClick: toggle,
-    };
-    disabled
-        ? (buttonProps.disabled = true)
-        : (buttonProps[ACCORDION_BTN_ATTR] = "");
-    const panelProps = {
-        id: panelId,
-        "aria-labelledby": buttonId,
-        role: "region",
-    };
-    return {
-        buttonProps,
-        panelProps,
-    };
-};
-
-// Get around a warning when using useLayoutEffect on the server.
-// https://github.com/reduxjs/react-redux/blob/b48d087d76f666e1c6c5a9713bbec112a1631841/src/utils/useIsomorphicLayoutEffect.js#L12
-// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
-// https://github.com/facebook/react/issues/14927#issuecomment-549457471
-const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' &&
-    typeof window.document !== 'undefined' &&
-    typeof window.document.createElement !== 'undefined'
-    ? React.useLayoutEffect
-    : React.useEffect;
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const useHeightTransition = ({ status, isResolved, }) => {
-    const [height, setHeight] = React.useState();
-    const elementRef = React.useRef(null);
-    useIsomorphicLayoutEffect$1(() => {
-        (status === "preEnter" || status === "preExit") &&
-            setHeight(elementRef.current.getBoundingClientRect().height);
-    }, [status]);
-    const style = {
-        height: status === "preEnter" || status === "exiting"
-            ? 0
-            : status === "entering" || status === "preExit"
-                ? height
-                : undefined,
-        overflow: isResolved ? undefined : "hidden",
-    };
-    return [style, elementRef];
-};
-
-function setRef(ref, instance) {
-    typeof ref === 'function' ? ref(instance) : (ref.current = instance);
-}
-function useMergeRef(refA, refB) {
-    return React.useMemo(() => {
-        if (!refA)
-            return refB;
-        if (!refB)
-            return refA;
-        return (instance) => {
-            setRef(refA, instance);
-            setRef(refB, instance);
-        };
-    }, [refA, refB]);
-}
-
-const getItemState = (providerValue, key, itemInitialEntered) => {
-    const { stateMap, mountOnEnter, initialEntered } = providerValue;
-    const _initialEntered = itemInitialEntered !== null && itemInitialEntered !== void 0 ? itemInitialEntered : initialEntered;
-    return (stateMap.get(key) || {
-        status: _initialEntered ? 'entered' : mountOnEnter ? 'unmounted' : 'exited',
-        isMounted: !mountOnEnter,
-        isEnter: _initialEntered,
-        isResolved: true
-    });
-};
-const useAccordionContext = () => {
-    const context = React.useContext(AccordionContext);
-    if (process.env.NODE_ENV !== 'production' && !context.stateMap) {
-        throw new Error('[React-Accordion] Cannot find a <AccordionProvider/> above this AccordionItem.');
-    }
-    return context;
-};
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const useAccordionItemEffect = ({ itemKey, initialEntered, disabled, } = {}) => {
-    const itemRef = React.useRef(null);
-    const context = useAccordionContext();
-    const key = itemKey !== null && itemKey !== void 0 ? itemKey : itemRef.current;
-    const state = getItemState(context, key, initialEntered);
-    const { setItem, deleteItem, toggle } = context;
-    React.useEffect(() => {
-        if (disabled)
-            return;
-        const key = itemKey !== null && itemKey !== void 0 ? itemKey : itemRef.current;
-        setItem(key, { initialEntered });
-        return () => void deleteItem(key);
-    }, [setItem, deleteItem, itemKey, initialEntered, disabled]);
-    return {
-        itemRef,
-        state,
-        toggle: React.useCallback((toEnter) => toggle(key, toEnter), [toggle, key]),
-    };
-};
-
-const withAccordionItem = (WrappedItem //TODO: MemoExoticComponent<(props: ItemStateProps<E, T>) => JSX.Element>
-) => {
-    const WithAccordionItem = React__namespace.forwardRef((_a, ref) => {
-        var { itemKey, initialEntered } = _a, rest = __rest(_a, ["itemKey", "initialEntered"]);
-        return (jsxRuntimeExports.jsx(WrappedItem, Object.assign({ forwardedRef: ref }, rest, useAccordionItemEffect({
-            itemKey,
-            initialEntered,
-            disabled: rest.disabled,
-        }))));
-    });
-    WithAccordionItem.displayName = "withAccordionItem";
-    return WithAccordionItem;
-};
-withAccordionItem.displayName = "withAccordionItem";
-
-const getRenderNode = (nodeOrFunc, props) => typeof nodeOrFunc === "function" ? nodeOrFunc(props) : nodeOrFunc;
-const WrappedItem = React__namespace.memo((_a) => {
-    var { forwardedRef, itemRef, state, toggle, className, disabled, header, headingTag: Heading = "h3", headingProps, buttonProps, contentProps, panelProps, children } = _a, rest = __rest(_a, ["forwardedRef", "itemRef", "state", "toggle", "className", "disabled", "header", "headingTag", "headingProps", "buttonProps", "contentProps", "panelProps", "children"]);
-    const itemState = { state, toggle, disabled };
-    const { buttonProps: _buttonProps, panelProps: _panelProps } = useAccordionItem(itemState);
-    const [transitionStyle, _panelRef] = useHeightTransition(state);
-    const panelRef = useMergeRef(panelProps && panelProps.ref, _panelRef);
-    const { status, isMounted, isEnter } = state;
-    const { prefix } = useSettings();
-    const buttonClasses = classNames__default["default"](`${prefix}--accordion--button`, {
-        [`${prefix}--accordion--button__expanded`]: isEnter,
-        //  [`${className}`]: className,
-    });
-    return (jsxRuntimeExports.jsxs("div", Object.assign({}, rest, { ref: useMergeRef(forwardedRef, itemRef), className: bem(ACCORDION_BLOCK, "item", { status, expanded: isEnter })(className, state) }, { children: [jsxRuntimeExports.jsx(Heading, Object.assign({}, headingProps, { style: Object.assign({ margin: 0 }, (headingProps && headingProps.style)), className: bem(ACCORDION_BLOCK, "item-heading")(headingProps && headingProps.className, state) }, { children: jsxRuntimeExports.jsxs("button", Object.assign({}, mergeProps(_buttonProps, buttonProps), { type: "button", className: bem(ACCORDION_BLOCK, "item-btn")(buttonProps && buttonProps.className, state) }, { children: [jsxRuntimeExports.jsx(iconsReact.ChevronDown, { description: "open", className: buttonClasses }), getRenderNode(header, itemState)] })) })), isMounted && (jsxRuntimeExports.jsx("div", Object.assign({}, contentProps, { style: Object.assign(Object.assign({ display: status === "exited" ? "none" : undefined }, transitionStyle), (contentProps && contentProps.style)), className: bem(ACCORDION_BLOCK, "item-content")(contentProps && contentProps.className, state) }, { children: jsxRuntimeExports.jsx("div", Object.assign({}, mergeProps(_panelProps, panelProps), { ref: panelRef, className: bem(ACCORDION_BLOCK, "item-panel")(panelProps && panelProps.className, state) }, { children: getRenderNode(children, itemState) })) })))] })));
-});
-WrappedItem.displayName = "AccordionItem";
-const AccordionItem = withAccordionItem(WrappedItem);
-AccordionItem.displayName = "AccordionItem";
-
-const AuthLayout = (_a) => {
-    var { image, backgroundContent, children, className } = _a, other = __rest(_a, ["image", "backgroundContent", "children", "className"]);
-    const { prefix } = useSettings();
-    const style = image
-        ? {
-            backgroundImage: `url(${image})`,
-        }
-        : {};
-    const wrapperClasses = classNames__default["default"](`${prefix}--auth-background-wrapper`, {
-        [`${prefix}--auth-background-image`]: image,
-        [`${className}`]: className,
-    });
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--auth-wrapper` }, other, { children: [jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses, style: style }, { children: backgroundContent })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--auth-content-wrapper` }, { children: children }))] })));
-};
-const BackgroundContent = (_a) => {
-    var { children } = _a, other = __rest(_a, ["children"]);
-    const { prefix } = useSettings();
-    return (jsxRuntimeExports.jsx("div", Object.assign({}, other, { className: `${prefix}--auth-background-content` }, { children: children })));
-};
-
-const pageWidths = ["sm", "md", "lg", "full"];
-const Wrapper = (props) => {
-    const { prefix } = useSettings();
-    const { background, backgroundClassName, backgroundStyle, children, className, pageWidth, mobilePageWidth, spacing } = props, other = __rest(props, ["background", "backgroundClassName", "backgroundStyle", "children", "className", "pageWidth", "mobilePageWidth", "spacing"]);
-    const wrapperClasses = classNames__default["default"]({
-        [`${prefix}--wrapper`]: true,
-        [`${prefix}--wrapper--width-lg`]: pageWidth === "narrow",
-        [`${prefix}--wrapper--width-md`]: pageWidth === "narrower",
-        [`${prefix}--wrapper--width-sm`]: pageWidth === "narrowest",
-        [`${prefix}--wrapper--width-xs`]: pageWidth === "narrowest",
-        [`${prefix}--wrapper--width-${pageWidth}`]: pageWidth,
-        [`${prefix}--wrapper--width-mobile-full`]: mobilePageWidth === "full",
-        [`${prefix}--wrapper--spacing-md`]: spacing === "md",
-        [`${prefix}--wrapper--spacing-xl`]: spacing === "xl",
-        [`${className}`]: className,
-    });
-    if (background || backgroundStyle || backgroundClassName) {
-        const backgroundClasses = classNames__default["default"](backgroundClassName, {
-            [`${prefix}--wrapper--background-${background}`]: background,
-        });
-        return (jsxRuntimeExports.jsx("div", Object.assign({ className: backgroundClasses, style: backgroundStyle }, { children: jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses }, other, { children: children })) })));
-    }
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses }, other, { children: children })));
-};
-
-const BannerNavigationItem = ({ className, children, }) => {
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames__default["default"](`${prefix}--banner-navigation__item`, className);
-    return jsxRuntimeExports.jsx("li", Object.assign({ className: wrapperClasses }, { children: children }));
-};
-const BannerNavigation = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames__default["default"](`${prefix}--banner-navigation`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses }, { children: jsxRuntimeExports.jsx(Wrapper, Object.assign({}, props, { children: jsxRuntimeExports.jsx("ul", Object.assign({ className: `${prefix}--banner-navigation__list` }, { children: children })) })) })));
-};
-
-const FormItem = (_a) => {
-    var { className, children, invalid, inline } = _a, other = __rest(_a, ["className", "children", "invalid", "inline"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--form-item`, {
-        [`${prefix}--form-item--inline`]: inline,
-        [`${prefix}--form-item--invalid`]: invalid,
-    }, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-
-function AddonBefore({ addonBefore, prefix, }) {
-    if (addonBefore) {
-        return jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--input-addon-before` }, { children: addonBefore }));
-    }
-    return null;
-}
-function AddonAfter({ addonAfter, prefix, }) {
-    if (addonAfter) {
-        return jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--input-addon-after` }, { children: addonAfter }));
-    }
-    return null;
-}
-/**
- * Shows the error message underneath the element */
-function InlineErrorMessage({ errorId, errorClasses, invalid, invalidText, }) {
-    if (invalid) {
-        const errorIcon = jsxRuntimeExports.jsx(iconsReact.WarningSolid, { fill: "#c5192d" });
-        return (jsxRuntimeExports.jsxs("div", Object.assign({ className: errorClasses, id: errorId }, { children: [errorIcon, " ", jsxRuntimeExports.jsx("span", { children: typeof invalid === "object" && invalid.message
-                        ? invalid.message
-                        : typeof invalid === "string"
-                            ? invalid
-                            : invalidText
-                                ? invalidText
-                                : "required" })] })));
-    }
-    return null;
-}
-/**
- * Shows a helper text under the label */
-function Label({ labelClasses, calculatedId, labelText, required, hideLabel, }) {
-    if (hideLabel)
-        return null;
-    return (jsxRuntimeExports.jsxs("label", Object.assign({ htmlFor: calculatedId, className: labelClasses }, { children: [labelText && labelText, required && "*"] })));
-}
-/**
- * Shows a helper text under the label */
-function Helper({ helperTextClasses, helperText, }) {
-    if (helperText)
-        return jsxRuntimeExports.jsx("div", Object.assign({ className: helperTextClasses }, { children: helperText }));
-    return null;
-}
-/**
- * Input is a wrapper for custom inputs providing the label, helperText and errors. */
-const Input = (_a) => {
-    var { additional, addonBefore, addonAfter, labelText, children, components: componentsOverride = {}, 
-    //className,
-    // iconDescription,
-    id, className, inputWrapperClassName, 
-    //placeholder,
-    //type,
-    //onChange,
-    //onClick,
-    hideLabel, name, invalid, invalidText, helperText, required } = _a, other = __rest(_a, ["additional", "addonBefore", "addonAfter", "labelText", "children", "components", "id", "className", "inputWrapperClassName", "hideLabel", "name", "invalid", "invalidText", "helperText", "required"]);
-    const { prefix } = useSettings();
-    const calculatedId = id ? id : name;
-    /* const inputProps = {
-      id: calculatedId,
-      onChange: (evt) => {
-        if (!other.disabled && !other.readOnly) {
-          onChange && onChange(evt);
-        }
-      },
-      onClick: (evt) => {
-        if (!other.disabled && !other.readOnly) {
-          onClick && onClick(evt);
-        }
-      },
-      placeholder,
-      type,
-    };*/
-    const errorId = calculatedId + "-error-msg";
-    const labelClasses = classNames__default["default"](`${prefix}--label`, {
-        // [`${prefix}--input--light`]: light,
-        [`${prefix}--visually-hidden`]: hideLabel || !labelText,
-        [`${prefix}--label--disabled`]: other.disabled,
-    });
-    const inputWrapperClasses = classNames__default["default"](`${prefix}--input-wrapper`, { [`${prefix}--form-item--invalid`]: invalid }, inputWrapperClassName);
-    const helperTextClasses = classNames__default["default"](`${prefix}--form__helper-text`, {
-        [`${prefix}--form__helper-text--disabled`]: other.disabled,
-    });
-    const errorClasses = `${prefix}--form-requirement`;
-    const components = Object.assign({ AddonAfter,
-        AddonBefore,
-        Label,
-        Helper,
-        InlineErrorMessage }, componentsOverride);
-    const AddonAfterComponent = components.AddonAfter;
-    const AddonBeforeComponent = components.AddonBefore;
-    const LabelComponent = components.Label;
-    const HelperComponent = components.Helper;
-    const InlineErrorMessageComponent = components.InlineErrorMessage;
-    const componentProps = {
-        labelText,
-        labelClasses,
-        calculatedId,
-        required,
-        helperTextClasses,
-        helperText,
-        errorClasses,
-        errorId,
-        invalid,
-        invalidText,
-        addonAfter,
-        addonBefore,
-        hideLabel,
-        prefix,
-    };
-    return (jsxRuntimeExports.jsxs(FormItem, Object.assign({ className: className, inline: other.inline }, { children: [jsxRuntimeExports.jsx(LabelComponent, Object.assign({}, componentProps)), jsxRuntimeExports.jsx(HelperComponent, Object.assign({}, componentProps)), additional, jsxRuntimeExports.jsxs("div", Object.assign({ className: inputWrapperClasses }, { children: [jsxRuntimeExports.jsx(AddonBeforeComponent, Object.assign({}, componentProps)), children, jsxRuntimeExports.jsx(AddonAfterComponent, Object.assign({}, componentProps))] })), jsxRuntimeExports.jsx(InlineErrorMessageComponent, Object.assign({}, componentProps))] })));
-};
-Input.displayName = "Input";
-
-/**
- * Input is a wrapper for custom inputs providing the label, helperText and errors. */
-const useInput = (_a) => {
-    var { addonAfter, className, inputClassName = "wfp--input", id, placeholder, type = "text", onChange = () => { }, onClick = () => { }, hideLabel, name, invalid, invalidText, labelText, helperText, light, value = undefined } = _a, 
-    //required,
-    other = __rest(_a, ["addonAfter", "className", "inputClassName", "id", "placeholder", "type", "onChange", "onClick", "hideLabel", "name", "invalid", "invalidText", "labelText", "helperText", "light", "value"]);
-    const { prefix } = useSettings();
-    const calculatedId = id ? id : name;
-    const inputClasses = classNames__default["default"](`${prefix}--input`, inputClassName, {
-        [`${prefix}--input--light`]: light,
-        [`${prefix}--input--invalid`]: invalid, // legacy className
-    });
-    const inputProps = Object.assign(Object.assign({ id: calculatedId, name, className: inputClasses }, other), { onChange: (evt) => {
-            if (!other.disabled && !other.readOnly) {
-                onChange(evt);
-            }
-        }, onClick: (evt) => {
-            if (!other.disabled && !other.readOnly) {
-                onClick(evt);
-            }
-        }, placeholder,
-        value,
-        type });
-    const wrapperProps = {
-        calculatedId,
-        id,
-        name,
-        className,
-        addonAfter,
-        labelText,
-        helperText,
-        hideLabel,
-        invalid,
-        invalidText,
-    };
-    const errorId = calculatedId + "-error-msg";
-    /*const labelClasses = classNames(`${prefix}--label`, {
-      [`${prefix}--visually-hidden`]: hideLabel || !labelText,
-      [`${prefix}--label--disabled`]: other.disabled,
-    });*/
-    /* const label = (
-      <label htmlFor={calculatedId} className={labelClasses}>
-        {labelText && labelText}
-        {required && '*'}
-      </label>
-    );*/
-    if (invalid) {
-        inputProps["data-invalid"] = true;
-        inputProps["aria-invalid"] = true;
-        inputProps["aria-describedby"] = errorId;
-    }
-    return { inputProps, wrapperProps };
-};
-
-/** Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation. */
-const Search = React__namespace.forwardRef((props, ref) => {
-    const { prefix } = useSettings();
-    const { className, closeButtonLabelText, disabled, 
-    // id,
-    hideLabel, hideControls, labelText, kind = "large", 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange = () => { }, 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onSearchIconClick = () => { }, helperText, light, rounded, } = props;
-    const initialValue = props.value;
-    const [value, setValue] = React__namespace.useState(initialValue);
-    React__namespace.useEffect(() => {
-        setValue(props.value);
-    }, [props.value]);
-    const newInputRef = React__namespace.useRef(null);
-    const _inputRef = ref ? ref : newInputRef;
-    const handleChange = (evt) => {
-        if (!disabled) {
-            evt.persist();
-            evt.imaginaryTarget = _inputRef;
-            setValue(evt.target.value);
-            onChange(evt, evt.target.value); //TODO: why are we passing evt as second arg
-        }
-    };
-    const clearSearch = (evt) => {
-        setValue("");
-        // setTimeout(() => {
-        //   console.log("value", value);
-        // }, 1000);
-        onChange(evt, "");
-    };
-    const searchInputWrapperClasses = classNames__default["default"](`${prefix}--number`, className, {
-        [`${prefix}--number--light`]: light,
-        [`${prefix}--number--helpertext`]: helperText,
-        [`${prefix}--number--nolabel`]: hideLabel,
-        [`${prefix}--number--nocontrols`]: hideControls,
-        "wfp--search": true,
-        "wfp--search--lg": kind === "large",
-        "wfp--search--sm": kind === "small",
-        "wfp--search--main": kind === "main",
-        "wfp--search--banner": kind === "banner",
-        "wfp--search--light": kind === "light",
-    });
-    /*const newProps = {
-      disabled,
-      id,
-      onChange: handleChange,
-      value: value,
-    };*/
-    const clearClasses = classNames__default["default"]({
-        "wfp--search-close": true,
-        "wfp--search-close--hidden": !value,
-    });
-    const searchInputClassName = classNames__default["default"](`${prefix}--search-input`, className, {
-        [`${prefix}--search-input--rounded`]: rounded,
-    });
-    const useInputProps = props;
-    const { wrapperProps, inputProps } = useInput(Object.assign(Object.assign({}, useInputProps), { onChange: handleChange, className: `${prefix}--search-input__wrapper`, inputClassName: searchInputClassName }));
-    return (jsxRuntimeExports.jsxs(Input, Object.assign({}, wrapperProps, { inputWrapperClassName: searchInputWrapperClasses }, { children: [jsxRuntimeExports.jsx(iconsReact.Search, { description: labelText, className: `${prefix}--search-magnifier-icon`, onClick: onSearchIconClick }), jsxRuntimeExports.jsx("input", Object.assign({}, inputProps, { ref: _inputRef, value: value })), jsxRuntimeExports.jsx("button", Object.assign({ className: clearClasses, onClick: clearSearch, type: "button", "aria-label": closeButtonLabelText }, { children: jsxRuntimeExports.jsx(iconsReact.Close, { description: closeButtonLabelText }) }))] })));
-});
-Search.displayName = "Search";
-
-const Link = React__namespace.forwardRef(function Link(props, ref) {
-    const { children, className, href, disabled, inline, visited, icon, size, linkSolid } = props, other = __rest(props, ["children", "className", "href", "disabled", "inline", "visited", "icon", "size", "linkSolid"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--link`, className, {
-        [`${prefix}--link--disabled`]: disabled,
-        [`${prefix}--link--inline`]: inline,
-        [`${prefix}--link--visited`]: visited,
-        [`${prefix}--link--${size}`]: size,
-        [`${prefix}--link--icon`]: icon,
-        [`${prefix}--link--solid`]: linkSolid,
-    });
-    const rel = other.target === "_blank" ? "noopener" : undefined;
-    const IconAsComponent = icon;
-    return (jsxRuntimeExports.jsxs("a", Object.assign({ href: disabled ? undefined : href, className: classes, rel: rel, ref: ref, "aria-disabled": disabled }, other, { children: [children, icon && React__namespace.isValidElement(icon) ? (jsxRuntimeExports.jsx("span", Object.assign({ className: `${prefix}--link__icon` }, { children: icon }))) : icon ? (jsxRuntimeExports.jsx(IconAsComponent, {})) : null] })));
-});
-Link.displayName = "Link";
-
-const BannerNavigationWithContent = (_a) => {
-    var { searchOnChange, search } = _a, other = __rest(_a, ["searchOnChange", "search"]);
-    return (jsxRuntimeExports.jsxs(BannerNavigation, Object.assign({}, other, { children: [jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "http://communities.wfp.org", target: "_blank" }, { children: "Communities" })) }), jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "http://manuals.wfp.org", target: "_blank" }, { children: "Manuals" })) }), jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "https://newgo.docs.wfp.org", target: "_blank" }, { children: "GoDocs" })) }), jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "https://welearn.wfp.org", target: "_blank" }, { children: "WeLearn" })) }), jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "https://dashboard.wfp.org", target: "_blank" }, { children: "Dashboard" })) }), jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "http://opweb.wfp.org", target: "_blank" }, { children: "OPweb" })) }), jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "https://selfservice.go.wfp.org", target: "_blank" }, { children: "Self-Service" })) }), jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "https://erpapps.wfp.org/fiori", target: "_blank" }, { children: "WeTravel" })) }), jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "https://unbooking.org/", target: "_blank" }, { children: "UN Booking Hub" })) }), jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: "https://wfp.org", target: "_blank" }, { children: "WFP.org" })) }), search && (jsxRuntimeExports.jsx(BannerNavigationItem, { children: jsxRuntimeExports.jsx("form", Object.assign({ action: "http://gtd.wfp.org", method: "GET", acceptCharset: "UTF-8", target: "_blank" }, { children: jsxRuntimeExports.jsx(Search, { kind: "banner", id: "search-2", labelText: "Find People", name: "q", placeholder: "Find People", onChange: searchOnChange }) })) }))] })));
-};
-
-/**
- * Avatar is used to display a user image or icon.
- */
-function Avatar(_a) {
-    var { alt, className, image, missingImage = "avatar", name, userIconProps } = _a, other = __rest(_a, ["alt", "className", "image", "missingImage", "name", "userIconProps"]);
-    const { prefix } = useSettings();
-    if (!image && missingImage === "avatar") {
-        const classes = classNames__default["default"](`${prefix}--avatar`, `${prefix}--avatar--empty`, `${prefix}--avatar--missing`, className);
-        return (jsxRuntimeExports.jsx(iconsReact.User, Object.assign({ fill: "#ffffff", description: alt, className: classes }, userIconProps, other)));
-    }
-    else if (image === undefined && missingImage === "letter") {
-        const classes = classNames__default["default"](`${prefix}--avatar`, `${prefix}--avatar--empty`, `${prefix}--avatar--letter`, className);
-        return (jsxRuntimeExports.jsx("svg", Object.assign({ id: "avatar-layer", className: classes, x: "0px", y: "0px", viewBox: "0 0 25 25", height: "25px", width: "25px" }, { children: jsxRuntimeExports.jsx("text", Object.assign({ x: "50%", y: "57%", dominantBaseline: "middle", textAnchor: "middle" }, { children: name && name.toUpperCase()[0] })) })));
-    }
-    else {
-        const classes = classNames__default["default"](`${prefix}--avatar`, className);
-        return (jsxRuntimeExports.jsx("div", Object.assign({}, other, { className: classes }, { children: jsxRuntimeExports.jsx("img", { alt: alt, src: image }) })));
-    }
-}
-Avatar.displayName = "Avatar";
-
-const Breadcrumb = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](className, {
-        [`${prefix}--breadcrumb`]: true,
-        [`${prefix}--breadcrumb--no-trailing-slash`]: true,
-    });
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-
-const newChild = (children, disableLink, href) => {
-    const { prefix } = useSettings();
-    if (disableLink === true) {
-        return jsxRuntimeExports.jsx("span", { children: children });
-    }
-    else if (typeof children === "string" && !(href === undefined)) {
-        return jsxRuntimeExports.jsx(Link, Object.assign({ href: href }, { children: children }));
-    }
-    else {
-        return React__default["default"].cloneElement(React__default["default"].Children.only(children), {
-            className: `${prefix}--link`,
-        });
-    }
-};
-const BreadcrumbItem = (_a) => {
-    var { children, className, disableLink, href } = _a, other = __rest(_a, ["children", "className", "disableLink", "href"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--breadcrumb-item`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: newChild(children, disableLink, href) })));
-};
-
-const BreadcrumbHome = (_a) => {
-    var { className, hometext } = _a, other = __rest(_a, ["className", "hometext"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--breadcrumb-home`, className);
-    return (jsxRuntimeExports.jsx(iconsReact.Home
-    //icon={iconHome}
-    , Object.assign({ 
-        //icon={iconHome}
-        fill: "#0b77c2", width: "14", height: "14", description: hometext, className: classes }, other)));
-};
-
-const Button = React__namespace.forwardRef((props, ref) => {
-    const { children, className, disabled, small, large, btnSolid, kind = "primary", iconReverse, tabIndex, useFlexbox, type = "button", icon, iconDescription, onClick, id } = props, other = __rest(props, ["children", "className", "disabled", "small", "large", "btnSolid", "kind", "iconReverse", "tabIndex", "useFlexbox", "type", "icon", "iconDescription", "onClick", "id"]);
-    const { prefix } = useSettings();
-    const [count, setCount] = React.useState(false);
-    React.useEffect(() => {
-        const timer = setTimeout(() => endAnimation(), 500);
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [count]);
-    const buttonClasses = classNames__default["default"](className, {
-        [`${prefix}--btn`]: true,
-        [`${prefix}--btn--sm`]: small,
-        [`${prefix}--btn--lg`]: large,
-        [`${prefix}--btn--icon-reverse`]: iconReverse,
-        [`${prefix}--btn--flexbox`]: useFlexbox,
-        [`${prefix}--btn--icon-only`]: icon && children === undefined,
-        [`${prefix}--btn--${kind}`]: kind,
-        [`${prefix}--btn--${kind}-solid`]: btnSolid,
-        [`${prefix}--btn--animating`]: count,
-    });
-    const commonProps = {
-        tabIndex,
-        className: buttonClasses,
-    };
-    let buttonImage = null;
-    if (icon && React__namespace.isValidElement(icon)) {
-        buttonImage = jsxRuntimeExports.jsx("span", Object.assign({ className: `${prefix}--btn__icon` }, { children: icon }));
-    }
-    else if (icon) {
-        const Icon = icon;
-        buttonImage = (jsxRuntimeExports.jsx(Icon, { description: iconDescription, className: `${prefix}--btn__icon` }));
-    }
-    const endAnimation = () => {
-        setCount(false);
-    };
-    const onClickAnimation = (e) => {
-        if (onClick) {
-            onClick(e);
-        }
-        setCount(true);
-    };
-    if (other.href) {
-        const anchorProps = Object.assign(Object.assign({}, other), { href: other.href });
-        return (jsxRuntimeExports.jsxs("a", Object.assign({}, anchorProps, commonProps, { role: "button", onClick: onClickAnimation, ref: ref, id: id }, { children: [iconReverse && buttonImage, children, !iconReverse && buttonImage] })));
-    }
-    const buttonProps = Object.assign(Object.assign({}, other), { disabled: disabled });
-    return (jsxRuntimeExports.jsxs("button", Object.assign({}, buttonProps, commonProps, { disabled: disabled, type: type, onClick: onClickAnimation, ref: ref, id: id }, { children: [iconReverse && buttonImage, children, !iconReverse && buttonImage] })));
-});
-Button.displayName = "Button";
-
-// TODO: remove legacy
-({
-    buttonKind: PropTypes.oneOf([
-        "primary",
-        "secondary",
-        "accent",
-        "danger",
-        "ghost",
-        "inverse--primary",
-        "inverse",
-        "danger--primary",
-        "tertiary",
-        "navigation",
-    ]),
-});
-const buttonKinds = [
-    "primary",
-    "secondary",
-    "tertiary",
-    "accent",
-    "danger--primary",
-    "danger",
-    "ghost",
-    "inverse--primary",
-    "inverse",
-    "navigation",
-];
-const notificationtypes = ["info", "success", "warning", "error"];
-
-const Icon = ({ icon }) => {
-    const { prefix } = useSettings();
-    if (!icon)
-        return null;
-    return jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--empty__icon` }, { children: icon }));
-};
-const Text$1 = ({ title, children }) => {
-    const { prefix } = useSettings();
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--empty__text` }, { children: [title && jsxRuntimeExports.jsx("h2", { children: title }), jsxRuntimeExports.jsx("div", { children: children })] })));
-};
-/** The Empty component can be used whenever a section should indicate that there is no content available. This can be the case for a empty list table or search results. */
-const Empty = (_a) => {
-    var { button, children, className, components, icon, title, kind = "large" } = _a, other = __rest(_a, ["button", "children", "className", "components", "icon", "title", "kind"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"]({
-        [`${prefix}--empty`]: true,
-        [`${prefix}--empty--${kind}`]: kind,
-    }, className);
-    const defaultComponents = { Icon, Text: Text$1 };
-    const allComponents = Object.assign(Object.assign({}, defaultComponents), components);
-    const IconComponent = allComponents.Icon;
-    const TextComponent = allComponents.Text;
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: classes }, other, { children: [jsxRuntimeExports.jsx(IconComponent, { icon: icon }), jsxRuntimeExports.jsx(TextComponent, { title: title, children: children }), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--empty__button` }, { children: button }))] })));
-};
-Empty.displayName = "Empty";
-
-const Hero = (_a) => {
-    var { children, className, image, isExternal, isLink, metadata, more, subTitle, title, kind, url } = _a, other = __rest(_a, ["children", "className", "image", "isExternal", "isLink", "metadata", "more", "subTitle", "title", "kind", "url"]);
-    const { prefix } = useSettings();
-    const style = kind !== 'related'
-        ? {
-            backgroundImage: `url(${image})`,
-        }
-        : {};
-    const wrapperClasses = classNames__default["default"](`${prefix}--photo-card`, {
-        [`${prefix}--photo-card--${kind}`]: kind,
-        [`${prefix}--photo-card--no-background`]: !image,
-        [`${prefix}--photo-card--link`]: isLink,
-        [`${className}`]: className,
-    });
-    const content = (jsxRuntimeExports.jsxs(React__namespace.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: `${prefix}--photo-card__background`, style: style }), image && kind === 'related' && jsxRuntimeExports.jsx("img", { src: image }), jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--photo-card__info` }, { children: [jsxRuntimeExports.jsxs("div", { children: [(kind === 'landscape' || kind === 'hero') && (jsxRuntimeExports.jsx("div", { className: `${prefix}--photo-card__info__background`, style: style })), metadata && (jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--photo-card__info__metadata` }, { children: metadata }))), title && (kind === 'hero' || kind === 'splash-compact') && (jsxRuntimeExports.jsx("h2", Object.assign({ className: `${prefix}--photo-card__info__title` }, { children: title }))), title && kind !== 'hero' && kind !== 'splash-compact' && (jsxRuntimeExports.jsx("h3", Object.assign({ className: `${prefix}--photo-card__info__title` }, { children: title }))), subTitle && (jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--photo-card__info__subtitle` }, { children: subTitle })))] }), kind === 'hero' ||
-                        kind === 'splash-image' ||
-                        (kind === 'splash-compact' && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--photo-card__info__more` }, { children: more }))))] })), children] }));
-    return isLink ? (jsxRuntimeExports.jsx("a", Object.assign({ href: url, target: isExternal ? '_blank' : '', className: wrapperClasses }, other, { children: content }))) : (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses }, other, { children: content })));
-};
-Hero.displayName = 'Hero';
-
-const HeroExternal = ({ title, subTitle, image, children, className,
-// ...other
- }) => {
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames__default["default"](`${prefix}--hero-ext`, {
-        [`${className}`]: className,
-    });
-    return (
-    // TODO: Provide a prop to set the backgrond image (linear-gradient should be not editable)
-    // TODO: Provide a prop [string] to set the backgrond position (optional).
-    jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses, 
-        // TODO: do we need a token for the linear gradient?
-        style: {
-            backgroundImage: `linear-gradient(rgba(26, 66, 98, 0.8), rgba(26, 66, 98, 0.8)), url(${image})`,
-            backgroundPosition: 'center right',
-        } }, { children: jsxRuntimeExports.jsxs(Wrapper, Object.assign({ pageWidth: "md" }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--hero-ext__content` }, { children: [title && jsxRuntimeExports.jsx("h1", Object.assign({ className: `${prefix}--hero-ext__heading` }, { children: title })), subTitle && (jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--hero-ext__body-copy` }, { children: subTitle })))] })), children] })) })));
-};
-
-const Card = (_a) => {
-    var { children, className, image, isExternal, isLink, metadata, subTitle, title, alt, kind, url, cardWidth, cardHeight } = _a, other = __rest(_a, ["children", "className", "image", "isExternal", "isLink", "metadata", "subTitle", "title", "alt", "kind", "url", "cardWidth", "cardHeight"]);
-    const { prefix } = useSettings();
-    const style = kind == 'overlay'
-        ? {
-            backgroundImage: `url(${image})`,
-        }
-        : {};
-    const pagewidth = cardWidth ? cardWidth : '300px';
-    const pageheight = cardHeight ? cardHeight : '260px';
-    const wrapperClasses = classNames__default["default"]([`${prefix}--card-box`], {
-        [`${prefix}--photo-cardnew--${kind}`]: kind,
-        // 'wfp--photo-cardnew--no-background': !image,
-        [`${prefix}--photo-cardnew--link`]: isLink,
-        [`${className}`]: className,
-    });
-    const content = (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [kind === 'overlay' ? (jsxRuntimeExports.jsx("div", { className: `${prefix}--photo-cardnew__background`, style: style })) : null, image && kind === 'simple-card' ? (jsxRuntimeExports.jsx("img", { src: image, alt: alt, className: `${prefix}--header-photo` })) : null, jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--photo-cardnew__info` }, { children: jsxRuntimeExports.jsxs("div", { children: [kind === 'overlay' && (jsxRuntimeExports.jsx("div", { className: `${prefix}--photo-cardnew__info__background`, style: style })), metadata && (jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--photo-cardnew__info__metadata` }, { children: metadata }))), title && (jsxRuntimeExports.jsx("h3", Object.assign({ className: `${prefix}--photo-cardnew__info__title` }, { children: title }))), subTitle && (jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--photo-cardnew__info__subtitle` }, { children: subTitle })))] }) })), children] }));
-    return isLink ? (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses, style: { width: pagewidth, minHeight: pageheight } }, { children: jsxRuntimeExports.jsx("a", Object.assign({ href: url, target: isExternal ? '_blank' : '', style: { width: pagewidth, minHeight: pageheight } }, other, { children: content })) }))) : (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses }, other, { style: { width: pagewidth, minHeight: pageheight } }, { children: content })));
-};
-Card.displayName = 'Card';
-
-//import { TagType } from '../../typesLegacy/utils';
-const TYPES = {
-    info: "Info",
-    error: "error",
-    success: "Success",
-    warning: "Warning",
-    custom: "Custom",
-};
-/** Tag is used to label, categorize, or organize items using keywords that describe them. */
-const Tag = (_a) => {
-    var { children, className, type = "info" } = _a, other = __rest(_a, ["children", "className", "type"]);
-    const { prefix } = useSettings();
-    const tagClass = `${prefix}--tag--${type}`;
-    const tagClasses = classNames__default["default"](`${prefix}--tag`, tagClass, className);
-    return (jsxRuntimeExports.jsx("span", Object.assign({ className: tagClasses }, other, { children: children || TYPES[type] })));
-};
-Tag.displayName = "Tag";
-
-const CardExternal = (_a) => {
-    var { label, labelStatus, interactive, image, heading, subHeading, caption, tag, children, className } = _a, other = __rest(_a, ["label", "labelStatus", "interactive", "image", "heading", "subHeading", "caption", "tag", "children", "className"]);
-    const { prefix } = useSettings();
-    const ref = React.useRef(null);
-    const supportiveTextFontSize = 14;
-    const supportiveTextLineHeight = 1.5;
-    // Set a maximum of 3 lines of supportive text by default
-    const [supportiveTextHeight, setsupportiveTextHeight] = React.useState(supportiveTextFontSize * supportiveTextLineHeight * 3);
-    // statusStyle apply different style(color, backgroundColor) based on its active state
-    const statusStyle = labelStatus ? `success` : `neutral`;
-    const wrapperClasses = classNames__default["default"](`${prefix}--card-ext`, {
-        [`${prefix}--card-ext--interactive`]: interactive,
-        [`${className}`]: className,
-    });
-    /**
-     * Get the height of the supportive text element.
-     * This is useful to calculate a dynamic maximum amount of line text with final
-     * ellipsis for the "supportive text" element, depending of the available
-     * height.
-     *
-     * Cards' title has no limits in terms of line text, whereas we can decide to
-     * truncate the supportive text at 3 number of lines. The multiline truncation
-     * can be obtained by using the "line clamp" CSS property that truncates text
-     * at a specific number of lines.
-     * The problem is, if we place three cards on a Flexbox/Grid parent, these
-     * cards will have the same height, depending on the highest of the three.
-     * This means that if one card has a multiline title, the other two will grow
-     * in height, showing a significant white space. To fill the latter cards'
-     * white space we need to increase the number of their "supportive text" lines.
-     * To do this we need to divide the "supportive text" element's height by its
-     * font-size and line-height in order to get exact amount of line text that are
-     * needed to fill the extra white space.
-     *
-     */
-    React.useEffect(() => {
-        if (!ref.current)
-            return;
-        setsupportiveTextHeight(ref.current.offsetHeight);
-    }, [ref]);
-    return (
-    /* Also expose a custom classname prop */
-    /**
-     * A prop will establish if the card is either informative (default) or
-     * interactive.
-     * If interactive, a modifier will be added and an animation will be shown
-     * on hover event ("${prefix}--card-ext--interactive").
-     */
-    jsxRuntimeExports.jsxs("div", Object.assign({ className: wrapperClasses }, { children: [label && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--card-ext__label ${prefix}--card-ext__label--${statusStyle}` }, { children: label }))), jsxRuntimeExports.jsx("figure", Object.assign({ className: `${prefix}--card-ext__media` }, { children: jsxRuntimeExports.jsx("img", { className: `${prefix}--card-ext__image`, src: image, alt: "Card picture" }) })), jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--card-ext__info-wrapper ${prefix}--card-ext__info-wrapper--with-divider` }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--card-ext__primary-title` }, { children: [subHeading && (jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--card-ext__subheading` }, { children: subHeading }))), heading && (jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--card-ext__heading` }, { children: heading })))] })), jsxRuntimeExports.jsx("div", Object.assign({ className: other.truncated
-                            ? `${prefix}--card-ext__supportive-text ${prefix}--card-ext__supportive-text--truncated`
-                            : `${prefix}--card-ext__supportive-text`, ref: ref }, { children: jsxRuntimeExports.jsx("p", Object.assign({ style: {
-                                WebkitLineClamp: Math.floor(supportiveTextHeight /
-                                    supportiveTextLineHeight /
-                                    supportiveTextFontSize),
-                            } }, { children: caption })) })), tag && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--card-ext__tags` }, { children: jsxRuntimeExports.jsx(Tag, Object.assign({ className: `${prefix}--card-ext__tag`, type: "custom" }, { children: tag })) })))] })), children] })));
-};
-CardExternal.propTypes = {
-    /**
-     label description for card if any
-    */
-    label: PropTypes__default["default"].string,
-    /**
-     labelStatus is either true or false, it applies  for card if any
-    */
-    labelStatus: PropTypes__default["default"].bool,
-    image: PropTypes__default["default"].string,
-    heading: PropTypes__default["default"].string,
-    subHeading: PropTypes__default["default"].string,
-    caption: PropTypes__default["default"].string,
-    tag: PropTypes__default["default"].string,
-    children: PropTypes__default["default"].node,
-    interactive: PropTypes__default["default"].bool,
-    className: PropTypes__default["default"].string,
-};
-
-const DatePickerInput = React__namespace.forwardRef(({ startDate, endDate, setStartDate, datePicker, datePickerProps = {} }, ref) => {
-    const { prefix } = useSettings();
-    const DatePicker = datePicker;
-    if (!DatePicker) {
-        return jsxRuntimeExports.jsx("div", { children: "Add a datepicker component" });
-    }
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--date-picker` }, { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--date-picker__input` }, { children: [jsxRuntimeExports.jsx(DatePicker, Object.assign({ selected: startDate, className: `${prefix}--input ${prefix}--date__input__start-date`, onChange: setStartDate, selectsStart: true, startDate: startDate, endDate: endDate, wrapperClassName: `${prefix}--date-picker__wrapper` }, datePickerProps, { ref: ref })), jsxRuntimeExports.jsx(iconsReact.CalendarAltRegular, { className: `${prefix}--date-picker__icon` })] })) })));
-});
-DatePickerInput.displayName = "DatePickerInput";
-
-const DatePicker = React__namespace.forwardRef((props, ref) => {
-    const { datePickerProps, hideLabel, helperText, /*  pattern, */ required } = props;
-    const { prefix } = useSettings();
-    const inputClassName = classNames__default["default"](`${prefix}--input`, `${prefix}--date-picker`, {
-        [`${prefix}--date-picker--helpertext`]: helperText,
-        [`${prefix}--date-picker--nolabel`]: hideLabel,
-        [`${prefix}--date-picker--required`]: required,
-    });
-    const useInputProps = props;
-    const { inputProps, wrapperProps } = useInput(Object.assign(Object.assign({}, useInputProps), { inputClassName }));
-    return (jsxRuntimeExports.jsx(Input, Object.assign({}, wrapperProps, { children: jsxRuntimeExports.jsx(DatePickerInput
-        // pattern={pattern}
-        , Object.assign({}, inputProps, { ref: ref, datePickerProps: datePickerProps })) })));
-});
-DatePicker.displayName = "DatePicker";
-
-const DateRangePickerInput = React__namespace.forwardRef(({ startDate, endDate, setStartDate, setEndDate, datePicker, fromProps = {}, toProps = {}, }, ref) => {
-    const { prefix } = useSettings();
-    const DatePicker = datePicker;
-    if (!DatePicker) {
-        return jsxRuntimeExports.jsx("div", { children: "Add a datepicker component" });
-    }
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--date-ranger-picker` }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--date-ranger-picker__input` }, { children: [jsxRuntimeExports.jsx(DatePicker, Object.assign({ selected: startDate, className: `${prefix}--input ${prefix}--date-ranger__input__start-date`, onChange: setStartDate, selectsStart: true, startDate: startDate, endDate: endDate, wrapperClassName: `${prefix}--date-picker__wrapper` }, fromProps, { ref: ref })), jsxRuntimeExports.jsx(iconsReact.CalendarAltRegular, { className: `${prefix}--date-ranger-picker__icon` })] })), jsxRuntimeExports.jsx(iconsReact.ArrowRight, { className: `${prefix}--date-ranger-picker__arrow` }), jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--date-ranger-picker__input` }, { children: [jsxRuntimeExports.jsx(DatePicker, Object.assign({ selected: endDate, className: `${prefix}--input ${prefix}--date-ranger__input__start-date`, onChange: setEndDate, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: startDate, wrapperClassName: `${prefix}--date-picker__wrapper` }, toProps)), jsxRuntimeExports.jsx(iconsReact.CalendarAltRegular, { className: `${prefix}--date-ranger-picker__icon` })] }))] })));
-});
-DateRangePickerInput.displayName = "DateRangePickerInput";
-
-const DateRangePicker = React__namespace.forwardRef((props, ref) => {
-    const { fromProps, toProps, hideLabel, helperText, 
-    /* pattern, */ required, } = props;
-    const { prefix } = useSettings();
-    const inputClassName = classNames__default["default"](`${prefix}--input`, `${prefix}--date-range-picker`, {
-        [`${prefix}--date-range-picker--helpertext`]: helperText,
-        [`${prefix}--date-range-picker--nolabel`]: hideLabel,
-        [`${prefix}--date-range-picker--required`]: required,
-    });
-    const useInputProps = props;
-    const { inputProps, wrapperProps } = useInput(Object.assign(Object.assign({}, useInputProps), { inputClassName }));
-    return (jsxRuntimeExports.jsx(Input, Object.assign({}, wrapperProps, { children: jsxRuntimeExports.jsx(DateRangePickerInput
-        // pattern={pattern}
-        , Object.assign({}, inputProps, { ref: ref, fromProps: fromProps, toProps: toProps })) })));
-});
-DateRangePicker.displayName = "DateRangePicker";
-
-const Checkbox = React__namespace.forwardRef((_a, ref) => {
-    var { className, id, labelText, 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange = () => { }, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    indeterminate, invalid, invalidText, hideLabel, wrapperClassName, title = "" } = _a, other = __rest(_a, ["className", "id", "labelText", "onChange", "indeterminate", "invalid", "invalidText", "hideLabel", "wrapperClassName", "title"]);
-    const { prefix } = useSettings();
-    const labelClasses = classNames__default["default"](`${prefix}--checkbox-label`, className);
-    const innerLabelClasses = classNames__default["default"](`${prefix}--checkbox-label-text`, {
-        [`${prefix}--visually-hidden`]: hideLabel,
-    });
-    const wrapperClasses = classNames__default["default"](`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, {
-        [`${prefix}--checkbox-wrapper--invalid`]: invalid,
-    }, wrapperClassName);
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: wrapperClasses }, { children: [jsxRuntimeExports.jsx("input", Object.assign({}, other, { "aria-invalid": invalid, "data-invalid": invalid, type: "checkbox", onChange: (evt) => {
-                    onChange(evt, evt.target.checked, id);
-                }, className: `${prefix}--checkbox`, id: id || other.name, ref: (el) => {
-                    if (el) {
-                        if (indeterminate) {
-                            el.indeterminate = indeterminate;
-                        }
-                    }
-                    if (typeof ref === "function") {
-                        ref(el);
-                    }
-                    else if (Object(ref) === ref && ref) {
-                        ref.current = el;
-                    }
-                } })), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: id || other.name, className: labelClasses, title: title || undefined }, { children: jsxRuntimeExports.jsx("span", Object.assign({ className: innerLabelClasses }, { children: labelText })) })), jsxRuntimeExports.jsx(InlineErrorMessage, { errorClasses: `${prefix}--form-requirement`, invalid: invalid, invalidText: invalidText })] })));
-});
-Checkbox.displayName = "Checkbox";
-
-/** Credits are mostly used when a photo need a source attribution. */
-const Credits = (_a) => {
-    var { children, className, info } = _a, other = __rest(_a, ["children", "className", "info"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--credits`, className);
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: classes }, other, { children: [jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--credits__info` }, { children: info })), children] })));
-};
-Credits.displayName = "Credits";
-
-const ContentSwitcher = (_a) => {
-    var { children, className, selectedIndex, small, onChange } = _a, other = __rest(_a, ["children", "className", "selectedIndex", "small", "onChange"]);
-    const { prefix } = useSettings();
-    const [selectedIdx, setSelectedIndex] = React.useState(selectedIndex);
-    const getChildren = (children) => {
-        return React__default["default"].Children.map(children, (child, index) => React__default["default"].cloneElement(child, {
-            index,
-            onClick: handleChildChange,
-            onKeyDown: handleChildChange,
-            selected: index === selectedIdx,
-        }));
-    };
-    const handleChildChange = (data) => {
-        const { index } = data;
-        if (selectedIdx !== index) {
-            setSelectedIndex(index);
-            onChange(data);
-        }
-    };
-    const classes = classNames__default["default"](`${prefix}--content-switcher`, className, {
-        [`${prefix}--content-switcher--sm`]: small,
-    });
-    return (jsxRuntimeExports.jsx("div", Object.assign({}, other, { className: classes }, { children: getChildren(children) })));
-};
-
-const tooltipStyle = {
-    duration: 100,
-    animation: "fade",
-    theme: "light",
-    arrow: true,
-};
-const tooltipStyleDark = {
-    duration: 100,
-    animation: "fade",
-    theme: "dark",
-    arrow: true,
-};
-/** Tooltips display additional information upon click, hover, or focus. The information should be contextual, useful, and nonessential. */
-const Tooltip = ({ className, dark, noPadding, children, content, trigger = "hover", 
-// modifiers = [],
-placement = "top", createRefWrapper, closeOnOutsideClick, closeOnTriggerHidden, defaultVisible, delayHide, delayShow, followCursor, interactive, mutationObserverOptions, offset, onVisibleChange, usePortal,
-// ...others
- }) => {
-    const { prefix } = useSettings();
-    const [visibility, setVisibility] = React__namespace.useState(false);
-    const classes = classNames__default["default"](className, {
-        [`${prefix}--tooltip`]: true,
-        [`${prefix}--tooltip--disable-padding`]: noPadding,
-        [`${prefix}--tooltip--visible`]: visibility,
-        [`${prefix}--tooltip--${trigger}`]: trigger,
-        [`${prefix}--tooltip--dark`]: dark,
-    });
-    const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible, } = reactPopperTooltip.usePopperTooltip({
-        closeOnOutsideClick,
-        closeOnTriggerHidden,
-        defaultVisible,
-        delayHide,
-        delayShow,
-        followCursor,
-        interactive,
-        mutationObserverOptions,
-        offset,
-        onVisibleChange,
-        placement,
-        trigger,
-    });
-    const elementClassNames = classNames__default["default"](
-    /*children?.props?.className, */ {
-        [`${prefix}--tooltip--trigger`]: true,
-    });
-    const wrapperClassNames = classNames__default["default"](className, {
-        [`${prefix}--tooltip--trigger`]: true,
-    });
-    const triggerElement = !createRefWrapper && typeof children !== "string" ? (React__namespace.cloneElement(children, {
-        ref: setTriggerRef,
-        className: elementClassNames,
-    })) : (jsxRuntimeExports.jsx("span", Object.assign({ ref: setTriggerRef, className: wrapperClassNames }, { children: children })));
-    const visibilityChange = (e) => {
-        setVisibility(e);
-        if (onVisibleChange)
-            onVisibleChange(e);
-    };
-    const tooltip = (jsxRuntimeExports.jsxs("div", Object.assign({ ref: setTooltipRef }, getTooltipProps({ className: classes }), { children: [typeof content === "function"
-                ? content({ setVisibility, visibilityChange })
-                : content, jsxRuntimeExports.jsx("div", Object.assign({}, getArrowProps({ className: `${prefix}--tooltip__arrow` })))] })));
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [triggerElement, visible && usePortal && jsxRuntimeExports.jsx(TooltipPortal, { children: tooltip }), visible && !usePortal && tooltip] }));
-};
-function TooltipPortal({ children }) {
-    return ReactDOM__default["default"].createPortal(children, document.body);
-}
-
-const ContextMenu = ({ children, className, content,
-/* href,
-inline,
-trigger = 'click',
-...other*/
- }) => {
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"]({
-        [`${prefix}--context-menu`]: true,
-    }, className);
-    return (jsxRuntimeExports.jsx(Tooltip, Object.assign({ className: classes, content: content, noPadding: true, trigger: "click" }, { children: children })));
-};
-const ContextMenuGroup = (_a) => {
-    var { className } = _a, other = __rest(_a, ["className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"]({
-        [`${prefix}--context-menu__group`]: true,
-    }, className);
-    return jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other));
-};
-const ContextMenuItem = (_a) => {
-    var { className } = _a, other = __rest(_a, ["className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"]({
-        [`${prefix}--context-menu__item`]: true,
-    }, className);
-    return jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other));
-};
-
-const Footer = ({ className, children, labelOne, linkTextOne, linkHrefOne, labelTwo, linkTextTwo, linkHrefTwo, logo, metaContent, metaLinks, secondary, pageWidth = "lg", }) => {
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--footer`, className);
-    return (jsxRuntimeExports.jsxs("footer", Object.assign({ className: classes }, { children: [jsxRuntimeExports.jsx(Wrapper, Object.assign({ pageWidth: pageWidth }, { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--footer__content` }, { children: [children ? (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--footer__info` }, { children: children }))) : (jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--footer__info` }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--footer__info__item` }, { children: [jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--footer__label` }, { children: labelOne })), jsxRuntimeExports.jsx("ul", Object.assign({ className: `${prefix}--footer__list` }, { children: jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: linkHrefOne }, { children: linkTextOne })) }) }))] })), jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--footer__info__item` }, { children: [jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--footer__label` }, { children: labelTwo })), jsxRuntimeExports.jsx("ul", Object.assign({ className: `${prefix}--footer__list` }, { children: jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsx(Link, Object.assign({ href: linkHrefTwo }, { children: linkTextTwo })) }) }))] }))] }))), jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--footer__cta` }, { children: [logo, secondary && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--footer__secondary` }, { children: secondary })))] }))] })) })), jsxRuntimeExports.jsxs(Wrapper, Object.assign({ className: `${prefix}--footer__meta`, pageWidth: pageWidth }, { children: [metaLinks && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--footer__meta__links` }, { children: metaLinks }))), metaContent && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--footer__meta__content` }, { children: metaContent })))] }))] })));
-};
-Footer.displayName = "Footer";
-
-const FooterExternal = ({ className, productName, children, metaContent, pageWidth = "lg", metaLinks, }) => {
-    const { prefix } = useSettings();
-    const externalClasses = classNames__default["default"](`${prefix}--footer-ext`, className);
-    return (jsxRuntimeExports.jsx("footer", Object.assign({ className: externalClasses }, { children: jsxRuntimeExports.jsxs(Wrapper, Object.assign({ pageWidth: pageWidth }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--footer-ext__content` }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--footer-ext__info` }, { children: [jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--footer-ext__branding` }, { children: jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--footer-ext__product-name` }, { children: productName })) })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--footer-ext__address` }, { children: metaContent })), jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--footer-ext__social-wrapper` }, { children: [jsxRuntimeExports.jsx("p", { children: "Follow WFP on:" }), jsxRuntimeExports.jsxs("ul", Object.assign({ className: `${prefix}--footer-ext__social-icons-list` }, { children: [jsxRuntimeExports.jsx("li", Object.assign({ className: `${prefix}--footer-ext__social-icon` }, { children: jsxRuntimeExports.jsx("a", Object.assign({ href: "https://twitter.com/WFP", target: "_blank", rel: "noopener" }, { children: jsxRuntimeExports.jsx(iconsReact.Twitter, {}) })) })), jsxRuntimeExports.jsx("li", Object.assign({ className: `${prefix}--footer-ext__social-icon` }, { children: jsxRuntimeExports.jsx("a", Object.assign({ href: "https://www.facebook.com/WorldFoodProgramme", target: "_blank", rel: "noopener" }, { children: jsxRuntimeExports.jsx(iconsReact.Facebook, {}) })) })), jsxRuntimeExports.jsx("li", Object.assign({ className: `${prefix}--footer-ext__social-icon` }, { children: jsxRuntimeExports.jsx("a", Object.assign({ href: "https://www.instagram.com/Worldfoodprogramme/", target: "_blank", rel: "noopener" }, { children: jsxRuntimeExports.jsx(iconsReact.Instagram, {}) })) })), jsxRuntimeExports.jsx("li", Object.assign({ className: `${prefix}--footer-ext__social-icon` }, { children: jsxRuntimeExports.jsx("a", Object.assign({ href: "https://www.linkedin.com/company/world-food-programme", target: "_blank", rel: "noopener" }, { children: jsxRuntimeExports.jsx(iconsReact.LinkedIn, {}) })) })), jsxRuntimeExports.jsx("li", Object.assign({ className: `${prefix}--footer-ext__social-icon` }, { children: jsxRuntimeExports.jsx("a", Object.assign({ href: "https://www.youtube.com/user/WORLDFOODPROGRAM", target: "_blank", rel: "noopener" }, { children: jsxRuntimeExports.jsx(iconsReact.YouTube, {}) })) })), jsxRuntimeExports.jsx("li", Object.assign({ className: `${prefix}--footer-ext__social-icon` }, { children: jsxRuntimeExports.jsx("a", Object.assign({ href: "https://www.tiktok.com/@worldfoodprogramme", target: "_blank", rel: "noopener" }, { children: jsxRuntimeExports.jsx(iconsReact.TikTok, {}) })) }))] }))] }))] })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--footer-ext__nav-wrapper` }, { children: children }))] })), jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--footer-ext__legal` }, { children: [jsxRuntimeExports.jsxs("span", { children: [new Date().getFullYear(), " \u00A9 World Food Programme"] }), jsxRuntimeExports.jsx("nav", Object.assign({ className: `${prefix}--footer-ext__nav-legal` }, { children: jsxRuntimeExports.jsx("ul", Object.assign({ className: `${prefix}--footer-ext__legal-links` }, { children: metaLinks })) }))] }))] })) })));
-};
-const LinksColumn = ({ title, children }) => {
-    const { prefix } = useSettings();
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--links-column` }, { children: [title && jsxRuntimeExports.jsxs("p", Object.assign({ className: `${prefix}--links-column__title` }, { children: [" ", title, " "] })), jsxRuntimeExports.jsx("nav", { children: jsxRuntimeExports.jsx("ul", Object.assign({ className: `${prefix}--links-column__nav-list` }, { children: children })) })] })));
-};
-const FooterMetaLink = ({ className, href, children, }) => {
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames__default["default"](`${prefix}--footer-ext__legal-link`, className);
-    return (jsxRuntimeExports.jsx("li", Object.assign({ className: wrapperClasses }, { children: jsxRuntimeExports.jsx("a", Object.assign({ href: href }, { children: children })) })));
-};
-
-/** A form is a group of related input controls that allows users to provide data or configure options. */
-const Form = (_a) => {
-    var { className, children, longForm = true } = _a, other = __rest(_a, ["className", "children", "longForm"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--form`, { [`${prefix}--form-long`]: longForm === true }, className);
-    return (jsxRuntimeExports.jsx("form", Object.assign({ className: classes }, other, { children: children })));
-};
-Form.displayName = 'Form';
-
-/** A FormGroup element is used to group several controls as well as labels  within a web form. It uses  `<fieldset>` */
-const FormGroup = ({ align, breakpoint, legendText, inline, 
-// invalid,
-children, className, inputSpacing, message, messageText,
-// ...other
- }) => {
-    const { prefix } = useSettings();
-    const classNamesLegend = classNames__default["default"](`${prefix}--form-group__title`, className);
-    const classNamesFieldset = classNames__default["default"](`${prefix}--fieldset`, {
-        [`${prefix}--fieldset__inline`]: inline,
-        [`${prefix}--fieldset__align-${align}`]: align,
-        [`${prefix}--fieldset__breakpoint-${breakpoint}`]: breakpoint,
-        [`${prefix}--fieldset__input-spacing-${inputSpacing}`]: inputSpacing,
-    }, className);
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ 
-        //{...(invalid && { 'data-invalid': '' })}
-        className: classNamesFieldset }, { children: [jsxRuntimeExports.jsx("legend", Object.assign({ className: classNamesLegend }, { children: legendText })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--fieldset__content` }, { children: children })), message ? (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--form__requirements` }, { children: messageText }))) : null] })));
-};
-
-const FormHint = ({ className, children, description, }) => {
-    const { prefix } = useSettings();
-    const formHintClasses = classNames__default["default"](`${prefix}--form-hint`, className);
-    return (jsxRuntimeExports.jsx(Tooltip, Object.assign({ content: children }, { children: jsxRuntimeExports.jsx("div", Object.assign({ className: formHintClasses }, { children: jsxRuntimeExports.jsx(iconsReact.InfoSolid, { width: "15", height: "15", description: description }) })) })));
-};
-
-const FormLabel = (_a) => {
-    var { className, children, id } = _a, other = __rest(_a, ["className", "children", "id"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--label`, className);
-    return (jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: id, className: classes }, other, { children: children })));
-};
-
-const InfoBar = ({ children, className, id, pageWidth, }) => {
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames__default["default"](`${prefix}--info-bar`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ id: id, className: wrapperClasses }, { children: jsxRuntimeExports.jsx(Wrapper, Object.assign({ pageWidth: pageWidth }, { children: children })) })));
-};
-InfoBar.displayName = 'InfoBar';
-
-/** Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. */
-const Loading = (props) => {
-    const { active = true, className, withOverlay = true, small = false } = props, other = __rest(props, ["active", "className", "withOverlay", "small"]);
-    const { prefix } = useSettings();
-    const loadingClasses = classNames__default["default"](`${prefix}--loading`, className, {
-        [`${prefix}--loading--small`]: small,
-        [`${prefix}--loading--stop`]: !active,
-    });
-    const overlayClasses = classNames__default["default"](`${prefix}--loading-overlay`, {
-        [`${prefix}--loading-overlay--stop`]: !active,
-    });
-    const loading = (jsxRuntimeExports.jsx("div", Object.assign({}, other, { "aria-live": active ? 'assertive' : 'off', className: loadingClasses }, { children: jsxRuntimeExports.jsxs("svg", Object.assign({ className: `${prefix}--loading__svg`, viewBox: "-75 -75 150 150" }, { children: [jsxRuntimeExports.jsx("title", { children: "Loading" }), null, jsxRuntimeExports.jsx("circle", { className: undefined, cx: "0", cy: "0", r: "37.5" })] })) })));
-    return withOverlay ? (jsxRuntimeExports.jsx("div", Object.assign({ className: overlayClasses }, { children: loading }))) : (loading);
-};
-Loading.displayName = 'Loading';
-
-const InlineLoading = (props) => {
-    const { className, success, description, onSuccess, successDelay } = props, other = __rest(props, ["className", "success", "description", "onSuccess", "successDelay"]);
-    const { prefix } = useSettings();
-    const loadingClasses = classNames__default["default"](`${prefix}--inline-loading`, className);
-    const getLoading = () => {
-        if (success) {
-            setTimeout(() => {
-                if (onSuccess) {
-                    onSuccess();
-                }
-            }, successDelay);
-            return (jsxRuntimeExports.jsx("svg", Object.assign({ className: `${prefix}--inline-loading__checkmark-container ${prefix}--inline-loading__svg`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 10 10" }, { children: jsxRuntimeExports.jsx("polyline", { className: `${prefix}--inline-loading__checkmark`, points: "0.74 3.4 3.67 6.34 9.24 0.74" }) })));
-        }
-        return jsxRuntimeExports.jsx(Loading, { small: true, withOverlay: false });
-    };
-    const loadingText = (jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--inline-loading__text` }, { children: description })));
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: loadingClasses }, other, { children: [jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--inline-loading__animation` }, { children: getLoading() })), description && loadingText] })));
-};
-InlineLoading.displayName = "InlineLoading";
-
-const List = React__namespace.forwardRef((_a, ref) => {
-    var { children, className, colon, kind, small } = _a, other = __rest(_a, ["children", "className", "colon", "kind", "small"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--list`, className, {
-        [`${prefix}--list--${kind}`]: kind,
-        [`${prefix}--list--small`]: small,
-        [`${prefix}--list--colon`]: colon,
-    });
-    /* if (kind == 'ordered') {
-      const olProps = {
-        ...other,
-        href: other.href,
-      } as React.AnchorHTMLAttributes<HTMLOListElement>;
-
-      return (
-        <ol
-          className={classes}
-          {...olProps}
-          ref={ref as React.Ref<HTMLOListElement>}>
-          {children}
-        </ol>
-      );
-    }*/
-    const ulProps = Object.assign({}, other);
-    return (jsxRuntimeExports.jsx("ul", Object.assign({ className: classes }, ulProps, { ref: ref }, { children: children })));
-});
-List.displayName = "List";
-
-const ListItem = (_a) => {
-    var { children, className, title, kind, icon } = _a, other = __rest(_a, ["children", "className", "title", "kind", "icon"]);
-    const classes = classNames__default["default"]("wfp--list__element", className, {
-        "wfp--list-item--checkmark": kind === "checkmark",
-        "wfp--list-item--cross": kind === "cross",
-    });
-    return (jsxRuntimeExports.jsxs("li", Object.assign({ className: classes }, other, { children: [kind === "cross" && jsxRuntimeExports.jsx(iconsReact.Cross, { className: "wfp--list-item__icon" }), kind === "checkmark" && jsxRuntimeExports.jsx(iconsReact.Check, { className: "wfp--list-item__icon" }), icon && jsxRuntimeExports.jsx("span", Object.assign({ className: "wfp--list__element__icon" }, { children: icon })), title && jsxRuntimeExports.jsx("span", Object.assign({ className: "wfp--list__element__title" }, { children: title })), jsxRuntimeExports.jsx("span", Object.assign({ className: "wfp--list__element__content" }, { children: children }))] })));
-};
-
-/* eslint-disable @typescript-eslint/no-empty-function */
-const MainNavigationContext = React__default["default"].createContext({
-    onChangeSub: (e) => e,
-    activeMenuItem: null,
-    openMobileMenu: false,
-    toggleMenu: () => { },
-    setOpenMobileMenu: () => { },
-});
-
-const MobileButton = ({ toggleMenu, prefix }) => {
-    return (jsxRuntimeExports.jsx(Button, Object.assign({ className: `${prefix}--main-navigation__button`, onClick: toggleMenu }, { children: "Menu" })));
-};
-
-const MainNavigation = ({ children, components: componentsOverride = {}, className, id, logo, line = false, logoRibbon = "default", mobilePageWidth, pageWidth, }) => {
-    const { prefix } = useSettings();
-    const [openMobileMenu, setOpenMobileMenu] = React.useState(false);
-    const [activeMenuItem, setActiveMenuItem] = React.useState(null);
-    const onChangeSub = (action, i, e) => {
-        if (e)
-            e.preventDefault();
-        if (action === "close") {
-            setActiveMenuItem(null);
-        }
-        else if (action === "toggle") {
-            const newI = activeMenuItem === null || activeMenuItem !== i ? i : null;
-            if (newI !== undefined)
-                setActiveMenuItem(newI);
-        }
-    };
-    const toggleMenu = () => {
-        setOpenMobileMenu(!openMobileMenu);
-    };
-    // const triggerSubNavigation = () => {
-    //   setActiveMenuItem(undefined);
-    // };
-    // const handleClickOutside = () => {
-    //   setActiveMenuItem(undefined);
-    // };
-    const wrapperClasses = classNames__default["default"](`${prefix}--main-navigation`, { [`${prefix}--main-navigation--line`]: line }, className);
-    const listClasses = classNames__default["default"](`${prefix}--main-navigation__list`, {
-        [`${prefix}--main-navigation__list--open`]: openMobileMenu,
-    });
-    const components = Object.assign({ Wrapper: Wrapper, MobileButton: MobileButton }, componentsOverride);
-    const Wrapper$1 = components.Wrapper;
-    const MobileButton$1 = components.MobileButton;
-    return (jsxRuntimeExports.jsx("nav", Object.assign({ id: id, className: wrapperClasses }, { children: jsxRuntimeExports.jsx(MainNavigationContext.Provider, Object.assign({ value: {
-                activeMenuItem,
-                openMobileMenu,
-                toggleMenu,
-                onChangeSub,
-                setOpenMobileMenu,
-            } }, { children: jsxRuntimeExports.jsxs(Wrapper$1, Object.assign({ pageWidth: pageWidth, mobilePageWidth: mobilePageWidth, className: `${prefix}--main-navigation__wrapper` }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--main-navigation__logo-wrapper` }, { children: [jsxRuntimeExports.jsx(MobileButton$1, Object.assign({ toggleMenu: toggleMenu, prefix: prefix, openMobileMenu: openMobileMenu }, { children: "Menu" })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--main-navigation__logo` }, { children: logo }))] })), jsxRuntimeExports.jsx("ul", Object.assign({ className: listClasses }, { children: children }))] })) })) })));
-};
-MainNavigation.displayName = "MainNavigation";
-
-/** The useMainNavigation() is a hook to access the current state of the MainNavigation and manipulate it. */
-function useMainNavigation() {
-    const settings = React.useContext(MainNavigationContext);
-    return settings;
-}
-useMainNavigation.displayName = "useMainNavigation";
-
-const MainNavigationItem = ({ className, children, kind, subNavigation, subNavWideAsContent, }) => {
-    const { prefix } = useSettings();
-    const { onChangeSub, activeMenuItem /*menuItem */ } = useMainNavigation();
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [menuItemId] = React.useState(Math.random().toString(36));
-    const wrapperRef = React.useRef(null);
-    React.useEffect(() => {
-        if (menuItemId === activeMenuItem) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        else {
-            document.removeEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [activeMenuItem]);
-    const handleClickOutside = (e) => {
-        if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && !wrapperRef.current.contains(e.target)) {
-            onChangeSub("close");
-        }
-    };
-    const wrapperClasses = classNames__default["default"](className, {
-        [`${prefix}--main-navigation__item`]: true,
-        [`${prefix}--main-navigation__item--open`]: menuItemId === activeMenuItem,
-        [`${prefix}--content-width`]: subNavigation && subNavWideAsContent,
-    });
-    const triggerClasses = classNames__default["default"]({
-        [`${prefix}--main-navigation__trigger`]: true,
-        [`${prefix}--main-navigation__trigger--has-sub`]: subNavigation,
-        [`${prefix}--main-navigation__trigger--open`]: menuItemId === activeMenuItem,
-    });
-    const Icon = menuItemId === activeMenuItem ? iconsReact.Close : iconsReact.ChevronDown;
-    const subClasses = classNames__default["default"]({
-        [`${prefix}--main-navigation__sub`]: true,
-        [`${prefix}--main-navigation__sub--${kind}`]: kind,
-        [`${prefix}--main-navigation__sub--open`]: menuItemId === activeMenuItem,
-    });
-    return (jsxRuntimeExports.jsxs("li", Object.assign({ className: wrapperClasses, ref: wrapperRef }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: triggerClasses, onClick: () => onChangeSub("toggle", menuItemId) }, { children: [children, subNavigation && (jsxRuntimeExports.jsx(Icon, { className: `${prefix}--main-navigation__trigger__icon`, description: menuItemId === activeMenuItem ? "close icon" : "expand icon" }))] })), subNavigation && jsxRuntimeExports.jsx("div", Object.assign({ className: subClasses }, { children: subNavigation }))] })));
-};
-
-/** The SubNavigation is a toogleable part of the MainNavigation */
-const SubNavigation = (_a) => {
-    var { children } = _a, other = __rest(_a, ["children"]);
-    return jsxRuntimeExports.jsx("div", Object.assign({}, other, { children: children }));
-};
-
-const SubNavigationItem = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sub-navigation__item`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-
-const SubNavigationHeader = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sub-navigation__header`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-
-const SubNavigationTitle = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sub-navigation__title`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-
-const SubNavigationLink = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sub-navigation__link`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-
-const SubNavigationFilter = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sub-navigation__filter`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-
-const SubNavigationContent = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sub-navigation__content`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-
-const SubNavigationList = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sub-navigation__list`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-
-const SubNavigationGroup = (_a) => {
-    var { children, columns, className, title } = _a, other = __rest(_a, ["children", "columns", "className", "title"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sub-navigation__group`, {
-        className,
-    }, {
-        [`${prefix}--sub-navigation__group--columns`]: columns,
-        [`${prefix}--sub-navigation__group--columns--${columns}`]: columns,
-    });
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: classes }, other, { children: [title && (jsxRuntimeExports.jsx("h3", Object.assign({ className: `${prefix}--sub-navigation__group__title` }, { children: title }))), jsxRuntimeExports.jsx("div", { children: children })] })));
-};
-
-const Story = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const { prefix } = useSettings();
-    const wrapperclassNames = classNames__default["default"]({
-        [`${prefix}--story`]: true,
-        [`${className}`]: className,
-    });
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperclassNames }, other, { children: children })));
-};
-
-const NotificationButton = (_a) => {
-    var { ariaLabel = "close notification", className, iconDescription = "close icon", type = "button", renderIcon: IconTag = iconsReact.Close, // IconTag, // Close
-    name, notificationType = "toast" } = _a, other = __rest(_a, ["ariaLabel", "className", "iconDescription", "type", "renderIcon", "name", "notificationType"]);
-    const { prefix } = useSettings();
-    const buttonClassName = classNames__default["default"](className, {
-        [`${prefix}--${notificationType}-notification__close-button`]: notificationType,
-    });
-    const iconClassName = classNames__default["default"]({
-        [`${prefix}--${notificationType}-notification__close-icon`]: notificationType,
-    });
-    // const Icon = renderIcon;
-    return (
-    // eslint-disable-next-line react/button-has-type
-    jsxRuntimeExports.jsx("button", Object.assign({}, other, { type: type, "aria-label": iconDescription, title: iconDescription, className: buttonClassName }, { children: IconTag && (jsxRuntimeExports.jsx(IconTag, { "aria-label": ariaLabel, className: iconClassName, name: name })) })));
-};
-
-/** Notifications are messages that communicate information to the user. The two main types of notifications are toast notifications and inline notifications. */
-const NotificationActionButton = (_a) => {
-    var { children, className: customClassName, onClick } = _a, other = __rest(_a, ["children", "className", "onClick"]);
-    const { prefix } = useSettings();
-    const className = classNames__default["default"](customClassName, `${prefix}--inline-notification__action-button`);
-    return (jsxRuntimeExports.jsx(Button, Object.assign({ className: className, kind: "ghost", onClick: onClick, small //TODO size="small"
-        : true }, other, { children: children })));
-};
-
-const NotificationTextDetails = (_a) => {
-    var { title, subtitle, caption, notificationType = "toast", children } = _a, other = __rest(_a, ["title", "subtitle", "caption", "notificationType", "children"]);
-    const { prefix } = useSettings();
-    if (notificationType === "toast") {
-        return (jsxRuntimeExports.jsxs("div", Object.assign({}, other, { className: `${prefix}--toast-notification__details` }, { children: [title && (jsxRuntimeExports.jsx("h3", Object.assign({ className: `${prefix}--toast-notification__title` }, { children: title }))), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--toast-notification__subtitle` }, { children: subtitle })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--toast-notification__caption` }, { children: caption })), children] })));
-    }
-    return (jsxRuntimeExports.jsxs("div", Object.assign({}, other, { className: `${prefix}--inline-notification__text-wrapper` }, { children: [title && (jsxRuntimeExports.jsx("p", Object.assign({ className: `${prefix}--inline-notification__title` }, { children: title }))), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--inline-notification__subtitle` }, { children: children || subtitle }))] })));
-};
-
-const iconTypes = {
-    error: iconsReact.Error,
-    success: iconsReact.CheckmarkCircle,
-    warning: iconsReact.WarningSolid,
-    info: iconsReact.InfoCircle,
-};
-const NotificationIcon = ({ iconDescription, kind = "info", notificationType = "toast", }) => {
-    const { prefix } = useSettings();
-    const IconForKind = kind ? iconTypes[kind] : undefined;
-    if (!IconForKind) {
-        return null;
-    }
-    return (jsxRuntimeExports.jsx(IconForKind, Object.assign({ className: `${prefix}--${notificationType}-notification__icon` }, { children: jsxRuntimeExports.jsx("title", { children: iconDescription }) })));
-};
-
-const ToastNotification = (_a) => {
-    var { role = "alert", notificationType = "toast", 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onClose = () => { }, 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onCloseButtonClick = () => { }, iconDescription = "closes notification", statusIconDescription, className, 
-    //caption = 'provide a caption',
-    subtitle, title = "provide a title", kind = "error", lowContrast = true, hideCloseButton = false, children, timeout = 0 } = _a, other = __rest(_a, ["role", "notificationType", "onClose", "onCloseButtonClick", "iconDescription", "statusIconDescription", "className", "subtitle", "title", "kind", "lowContrast", "hideCloseButton", "children", "timeout"]);
-    const { prefix } = useSettings();
-    const [isOpen, setIsOpen] = React__namespace.useState(true);
-    const containerClassName = classNames__default["default"](className, {
-        [`${prefix}--toast-notification`]: true,
-        [`${prefix}--toast-notification--low-contrast`]: lowContrast,
-        [`${prefix}--toast-notification--${kind}`]: kind,
-    });
-    const handleClose = (evt) => {
-        if (!onClose || onClose(evt) !== false) {
-            setIsOpen(false);
-        }
-    };
-    function handleCloseButtonClick(event) {
-        onCloseButtonClick(event);
-        handleClose(event);
-    }
-    const savedOnClose = React__namespace.useRef(onClose);
-    React__namespace.useEffect(() => {
-        savedOnClose.current = onClose;
-    });
-    React__namespace.useEffect(() => {
-        if (!timeout) {
-            return;
-        }
-        const timeoutId = window.setTimeout((event) => {
-            setIsOpen(false);
-            if (savedOnClose.current) {
-                savedOnClose.current(event);
-            }
-        }, timeout);
-        return () => {
-            window.clearTimeout(timeoutId);
-        };
-    }, [timeout]);
-    if (!isOpen) {
-        return null;
-    }
-    return (jsxRuntimeExports.jsxs("div", Object.assign({}, other, { role: role, 
-        /* kind={kind} */ className: containerClassName }, { children: [jsxRuntimeExports.jsx(NotificationIcon, { kind: kind, iconDescription: statusIconDescription || `${kind} icon`, notificationType: notificationType }), jsxRuntimeExports.jsx(NotificationTextDetails, Object.assign({ title: title, subtitle: subtitle, 
-                //caption={caption}
-                notificationType: notificationType }, { children: children })), !hideCloseButton && (jsxRuntimeExports.jsx(NotificationButton, { iconDescription: iconDescription, notificationType: notificationType, onClick: handleCloseButtonClick }))] })));
-};
-
-const Callout = React__namespace.forwardRef((props, ref) => {
-    const { actions, role = "alert", notificationType = "inline", icon, 
-    //  iconDescription = 'closes notification',
-    statusIconDescription, className, subtitle, title, kind = "info", lowContrast = true, hideCloseButton = false, children } = props, other = __rest(props, ["actions", "role", "notificationType", "icon", "statusIconDescription", "className", "subtitle", "title", "kind", "lowContrast", "hideCloseButton", "children"]);
-    const { prefix } = useSettings();
-    const containerClassName = classNames__default["default"](className, {
-        [`${prefix}--inline-notification`]: true,
-        [`${prefix}--block-notification`]: true,
-        [`${prefix}--inline-notification--low-contrast`]: lowContrast,
-        [`${prefix}--inline-notification--${kind}`]: kind,
-        [`${prefix}--inline-notification--hide-close-button`]: hideCloseButton,
-    });
-    return (jsxRuntimeExports.jsx("div", Object.assign({}, other, { ref: ref, role: role, className: containerClassName }, { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--inline-notification__details` }, { children: [icon === undefined && (jsxRuntimeExports.jsx(NotificationIcon, { notificationType: notificationType, kind: kind, iconDescription: statusIconDescription || `${kind} icon` })), icon && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--${notificationType}-notification__icon` }, { children: icon }))), jsxRuntimeExports.jsx(NotificationTextDetails, Object.assign({ title: title, subtitle: subtitle, notificationType: notificationType }, { children: children })), actions && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--inline-notification__actions-wrapper` }, { children: actions })))] })) })));
-});
-Callout.displayName = "Callout";
-
-/** Tables are used to make large volumes of data easy to understand and to access. */
-const Table = (_a) => {
-    var { className, children, responsive, withBorder } = _a, other = __rest(_a, ["className", "children", "responsive", "withBorder"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--table`, {
-        [`${prefix}--table--responsive`]: responsive,
-        [`${prefix}--table--with-border`]: withBorder,
-    }, className);
-    return (jsxRuntimeExports.jsx("table", Object.assign({}, other, { className: classes }, { children: children })));
-};
-
-const TableSorting = ({ className, isSorted, isSortedDesc, sortType, }) => {
-    const classes = classNames__default["default"](className, "wfp--table--sorting", {
-        "wfp--table--is-sorted": isSorted,
-        "wfp--table--is-sortable": sortType,
-    });
-    return (jsxRuntimeExports.jsx("span", Object.assign({ className: classes }, { children: isSorted ? isSortedDesc ? jsxRuntimeExports.jsx(iconsReact.CaretDown, {}) : jsxRuntimeExports.jsx(iconsReact.CaretUp, {}) : "" })));
-};
-
-var TableSorting$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TableSorting
-});
-
-const textLookup = {
-    h1: "h1",
-    h2: "h2",
-    h3: "h3",
-    h4: "h4",
-    h5: "h5",
-    h6: "h6",
-    title: "h1",
-    subtitle: "h3",
-    p: "p",
-    caption: "div",
-    code: "code",
-    i: "i",
-    bold: "b",
-    strong: "strong",
-    a: "a",
-    "inline-highlight": "code",
-};
-/**
- *Text is a component for displaying paragraphs. You can use Text to standardize text across your web app. For longer sections or full articles use the <Story /> component instead.
- */
-const Text = ({ children, className, kind, spacingTop, spacingBottom, }) => {
-    const { prefix } = useSettings();
-    const TagName = kind && textLookup[kind] ? textLookup[kind] : "div";
-    const classes = classNames__default["default"]({
-        [`${prefix}--text`]: true,
-        // [`${prefix}--story__${kind}`]: kind,
-        [`${prefix}--text__${kind}`]: kind,
-        [`${prefix}--text__spacing-top-${spacingTop}`]: spacingTop,
-        [`${prefix}--text__spacing-bottom-${spacingBottom}`]: spacingBottom,
-    }, className);
-    return React__namespace.createElement(TagName, { className: classes }, children);
-};
-Text.displayName = "Text";
-
-/** Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content. */
-const wrapper = (props) => jsxRuntimeExports.jsx(Story, Object.assign({}, props));
-const li = (props) => {
-    const kind = typeof props.children === 'string' ? props.children.substring(0, 1) : '';
-    if (kind === '✓' || kind === '✗')
-        return (jsxRuntimeExports.jsx(ListItem, Object.assign({ kind: kind === '✓' ? 'checkmark' : 'cross' }, props, { children: props.children.substring(1, props.children.length) })));
-    return jsxRuntimeExports.jsx("li", Object.assign({}, props, { children: props.children }));
-};
-const ul = (_a) => {
-    var { children } = _a, other = __rest(_a, ["children"]);
-    return (jsxRuntimeExports.jsx(List, Object.assign({}, other, { kind: "bullets" }, { children: children })));
-};
-const ol = (_a) => {
-    var { children } = _a, other = __rest(_a, ["children"]);
-    return (jsxRuntimeExports.jsx(List, Object.assign({}, other, { kind: "ordered" }, { children: children })));
-};
-const h1 = (props) => {
-    return (jsxRuntimeExports.jsx(Text, Object.assign({ kind: "h1" }, props, { children: props.children })));
-};
-const h2 = (props) => {
-    return (jsxRuntimeExports.jsx(Text, Object.assign({ kind: "h2" }, props, { children: props.children })));
-};
-const h3 = (props) => {
-    return (jsxRuntimeExports.jsx(Text, Object.assign({ kind: "h3" }, props, { children: props.children })));
-};
-const h4 = (props) => {
-    return (jsxRuntimeExports.jsx(Text, Object.assign({ kind: "h4" }, props, { children: props.children })));
-};
-const h5 = (props) => {
-    return (jsxRuntimeExports.jsx(Text, Object.assign({ kind: "h5" }, props, { children: props.children })));
-};
-const p = (props) => {
-    return jsxRuntimeExports.jsx("p", Object.assign({}, props, { children: props.children }));
-};
-const table = (props) => {
-    return jsxRuntimeExports.jsx(Table, Object.assign({}, props, { children: props.children }));
-};
-const a = (props) => {
-    return (jsxRuntimeExports.jsx(Link, Object.assign({ inline: true }, props, { children: props.children })));
-};
-const code = (props) => {
-    const settings = useSettings();
-    return (jsxRuntimeExports.jsx("code", Object.assign({ className: `${settings.prefix}--story__code` }, props, { children: props.children })));
-};
-const pre = (props) => {
-    const settings = useSettings();
-    return (jsxRuntimeExports.jsx("pre", Object.assign({ className: `${settings.prefix}--story__pre` }, props, { children: props.children })));
-};
-/*const inlineCode = (props) => {
-  const settings = useSettings();
-  return (
-    <code className={`${settings.prefix}--story__inlinecode`} {...props}>
-      {props.children}
-    </code>
-  );
-};*/
-const blockquote = (_a) => {
-    var { children } = _a, other = __rest(_a, ["children"]);
-    if (Array.isArray(children) && children.length >= 2 && children[0].props)
-        return (jsxRuntimeExports.jsx(Callout, Object.assign({ kind: "info" }, other, { subtitle: children.map((e, i) => {
-                if (i > 0)
-                    return e;
-            }), title: children[0].props.children })));
-    return jsxRuntimeExports.jsx(Callout, Object.assign({ kind: "info" }, other, { subtitle: children }));
-};
-/*const code = ({ children, className, ...other }) => {
-    const language = className && className.split('-');
-    return (
-      <PureSource
-        format={false}
-        dark
-        language={(language && language[1]) || 'plaintext'}
-        code={children as string}
-        {...other}
-      />
-    );
-  };
-  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mdxComponents = {
-    wrapper,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    p,
-    li,
-    a,
-    ul,
-    ol,
-    code,
-    pre,
-    // inlineCode,
-    table,
-    blockquote,
-    Button,
-    Accordion,
-    AccordionItem,
-};
-
-const ModalFooter = ({ passiveModal, secondaryButtonText, onSecondaryButtonClick, primaryButtonText, onRequestSubmit, primaryButtonDisabled, secondaryButtonDisabled, danger, primaryButtonRef, secondaryButtonRef, }) => {
-    const { prefix } = useSettings();
-    if (passiveModal)
-        return null;
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--modal-footer` }, { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--modal__buttons-container` }, { children: [secondaryButtonText && (jsxRuntimeExports.jsx(Button, Object.assign({ kind: "secondary", disabled: secondaryButtonDisabled, id: "secondaryButton", onClick: (e) => {
-                        if (onSecondaryButtonClick)
-                            onSecondaryButtonClick(e, "button");
-                    }, ref: secondaryButtonRef }, { children: secondaryButtonText }))), jsxRuntimeExports.jsx(Button, Object.assign({ kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled, onClick: onRequestSubmit, id: "primaryButton", ref: primaryButtonRef }, { children: primaryButtonText }))] })) })));
-};
-
-const matchesFuncName = typeof Element !== "undefined" &&
-    ["matches", "webkitMatchesSelector", "msMatchesSelector"].filter((name) => typeof Element.prototype[name] === "function")[0];
-/** Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content. */
-function Modal(props) {
-    const { modalHeading, modalLabel, className, components: componentsOverride = {}, modalSecondaryAction, modalAriaLabel, passiveModal, children, elementToAppend, backgroundImage, open, lazyLoad, onRequestClose = () => { }, 
-    // onRequestSubmit,
-    onSecondarySubmit, iconDescription, inPortal = true, hideClose, handleBlur = () => { }, wide, type, selectorPrimaryFocus, primaryButtonRef, secondaryButtonRef } = props, 
-    // shouldSubmitOnEnter,
-    other = __rest(props, ["modalHeading", "modalLabel", "className", "components", "modalSecondaryAction", "modalAriaLabel", "passiveModal", "children", "elementToAppend", "backgroundImage", "open", "lazyLoad", "onRequestClose", "onSecondarySubmit", "iconDescription", "inPortal", "hideClose", "handleBlur", "wide", "type", "selectorPrimaryFocus", "primaryButtonRef", "secondaryButtonRef"]);
-    const { prefix } = useSettings();
-    const button = React.useRef(null);
-    const outerModal = React.useRef(null);
-    const innerModal = React.useRef(null);
-    const el = elementToAppend
-        ? elementToAppend
-        : typeof document !== "undefined"
-            ? document.body
-            : undefined;
-    const [beingOpen, setBeingOpen] = React__default["default"].useState(false);
-    //   const handleKeyDown = (evt) => {
-    //     if (evt.which === 27) onRequestClose(evt, 'key');
-    //     if (evt.which === 13 && shouldSubmitOnEnter) onRequestSubmit(evt, 'key');
-    //   };
-    const elementOrParentIsFloatingMenu = (target) => {
-        const { selectorsFloatingMenus = [
-            `.${prefix}--overflow-menu-options`,
-            `.${prefix}--tooltip`,
-            ".flatpickr-calendar",
-        ], } = props;
-        if (target && typeof target.closest === "function") {
-            return selectorsFloatingMenus.some((selector) => target.closest(selector));
-        }
-        else {
-            // Alternative if closest does not exist.
-            while (target) {
-                if (matchesFuncName && typeof target[matchesFuncName] === "function") {
-                    if (
-                    // eslint-disable-next-line no-loop-func
-                    selectorsFloatingMenus.some((selector) => target[matchesFuncName](selector))) {
-                        return true;
-                    }
-                }
-                target = target.parentNode;
-            }
-            return false;
-        }
-    };
-    //   const handleClick = (evt) => {
-    //     console.log(
-    //       'evt.target',
-    //       evt,
-    //       innerModal.current.contains(evt.target),
-    //       innerModal.current
-    //     );
-    //     if (
-    //       innerModal.current &&
-    //       !innerModal.current.contains(evt.target) &&
-    //       !elementOrParentIsFloatingMenu(evt.target)
-    //     ) {
-    //       onRequestClose(evt, 'background');
-    //     }
-    //   };
-    const handleCloseButton = (evt) => {
-        onRequestClose(evt, "button");
-    };
-    const focusModal = () => {
-        if (outerModal.current)
-            outerModal.current.focus();
-    };
-    const handleBlurEvent = (evt) => {
-        if (handleBlur) {
-            handleBlur({
-                evt,
-                innerModal,
-                open,
-                elementOrParentIsFloatingMenu,
-                focusModal,
-            });
-        }
-        else if (innerModal.current &&
-            open &&
-            evt.relatedTarget &&
-            !innerModal.current.contains(evt.relatedTarget) &&
-            !elementOrParentIsFloatingMenu(evt.relatedTarget)) {
-            focusModal();
-        }
-    };
-    const focusButton = (focusContainerElement) => {
-        if (selectorPrimaryFocus === false)
-            return;
-        const primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
-        if (primaryFocusElement) {
-            primaryFocusElement.focus();
-            return;
-        }
-        if (button === null || button === void 0 ? void 0 : button.current) {
-            button.current.focus();
-        }
-    };
-    const handleTransitionEnd = (evt) => {
-        if (outerModal.current &&
-            outerModal.current.offsetWidth &&
-            outerModal.current.offsetHeight &&
-            beingOpen) {
-            focusButton(evt.currentTarget);
-            setBeingOpen(false);
-        }
-    };
-    if (open === false && lazyLoad)
-        return null;
-    const components = Object.assign({ ModalFooter: ModalFooter }, componentsOverride);
-    const ModalFooter$1 = components.ModalFooter;
-    const onSecondaryButtonClick = onSecondarySubmit
-        ? onSecondarySubmit
-        : onRequestClose;
-    const modalClasses = classNames__default["default"]({
-        [`${prefix}--modal`]: true,
-        [`${prefix}--modal--wide`]: wide,
-        [`${prefix}--modal--tall`]: !passiveModal,
-        [`${prefix}--modal--background-image`]: backgroundImage,
-        "is-visible": open,
-        [`${prefix}--modal--warning`]: type === "warning" || props.warning,
-        [`${prefix}--modal--danger`]: type === "danger" || props.danger,
-    }, className);
-    const modalButton = !hideClose ? (jsxRuntimeExports.jsx("button", Object.assign({ className: `${prefix}--modal-close`, type: "button", id: "closeButton", onClick: handleCloseButton, ref: button }, { children: jsxRuntimeExports.jsx(iconsReact.Close, { className: `${prefix}--modal-close__icon`, description: iconDescription }) }))) : null;
-    const modalBody = (jsxRuntimeExports.jsxs("div", Object.assign({ ref: innerModal, role: "dialog", className: `${prefix}--modal-container`, "aria-label": modalAriaLabel }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--modal-header` }, { children: [passiveModal && modalButton, jsxRuntimeExports.jsxs("div", { children: [modalLabel && (jsxRuntimeExports.jsx("h4", Object.assign({ className: `${prefix}--modal-header__label` }, { children: modalLabel }))), jsxRuntimeExports.jsx("h2", Object.assign({ className: `${prefix}--modal-header__heading` }, { children: modalHeading }))] }), modalSecondaryAction && jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: modalSecondaryAction }), !passiveModal && modalButton] })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--modal-content` }, { children: children })), jsxRuntimeExports.jsx(ModalFooter$1, Object.assign({}, props, { prefix: prefix, onSecondaryButtonClick: onSecondaryButtonClick, primaryButtonRef: primaryButtonRef, secondaryButtonRef: secondaryButtonRef }))] })));
-    const modal = (jsxRuntimeExports.jsx("div", Object.assign({}, other, { 
-        // onKeyDown={handleKeyDown}
-        //onClick={handleClick}
-        onBlur: handleBlurEvent, className: modalClasses, style: backgroundImage
-            ? { backgroundImage: `url(${backgroundImage})` }
-            : undefined, role: "presentation", tabIndex: -1, onTransitionEnd: open ? handleTransitionEnd : undefined, ref: outerModal }, { children: jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--modal-inner` }, { children: modalBody })) })));
-    if (inPortal && el)
-        return ReactDOM__default["default"].createPortal(modal, el);
-    else
-        return modal;
-}
-Modal.displayName = "Modal";
-
-const ModalWrapper = (_a) => {
-    var { children, customButton, id, onKeyDown, buttonTriggerText, buttonTriggerClassName, triggerButtonKind, disabled, 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    handleSubmit = () => { }, shouldCloseAfterSubmit = true } = _a, other = __rest(_a, ["children", "customButton", "id", "onKeyDown", "buttonTriggerText", "buttonTriggerClassName", "triggerButtonKind", "disabled", "handleSubmit", "shouldCloseAfterSubmit"]);
-    const { prefix } = useSettings();
-    const triggerButton = React__namespace.createRef();
-    const [isOpen, setIsOpen] = React__namespace.useState(false);
-    const handleOpen = () => {
-        setIsOpen(true);
-    };
-    const handleClose = () => {
-        setIsOpen(false);
-        if (!isOpen) {
-            triggerButton.current && triggerButton.current.focus();
-            if (handleClose) {
-                handleClose();
-            }
-        }
-    };
-    const handleOnRequestSubmit = () => {
-        if (handleSubmit) {
-            handleSubmit(handleClose);
-            if (shouldCloseAfterSubmit) {
-                handleClose();
-            }
-        }
-    };
-    const props = Object.assign(Object.assign({}, other), { open: isOpen, onRequestClose: handleClose, onRequestSubmit: handleOnRequestSubmit });
-    const customButtonEl = customButton
-        ? React__namespace.cloneElement(customButton, {
-            disabled: disabled,
-            onClick: handleOpen,
-            inputref: triggerButton,
-        })
-        : undefined;
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ role: "presentation", className: `${prefix}--modal__wrapper`, onKeyDown: (evt) => {
-            if (evt.which === 27) {
-                handleClose();
-                onKeyDown && onKeyDown(evt);
-            }
-        } }, { children: [customButton ? (jsxRuntimeExports.jsx(React__namespace.Fragment, { children: customButtonEl })) : (jsxRuntimeExports.jsx(Button, Object.assign({ id: id, className: buttonTriggerClassName, disabled: disabled, kind: triggerButtonKind, onClick: handleOpen, ref: triggerButton }, { children: buttonTriggerText }))), jsxRuntimeExports.jsx(Modal, Object.assign({}, props, { children: children }))] })));
-};
-ModalWrapper.displayName = "ModalWrapper";
-
-const Module = (_a) => {
-    var { dark, light, children, className, margin, fullHeight, noMargin, withHover } = _a, other = __rest(_a, ["dark", "light", "children", "className", "margin", "fullHeight", "noMargin", "withHover"]);
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames__default["default"]({
-        [`${prefix}--module--dark`]: dark,
-        [`${prefix}--module--no-margin`]: noMargin || margin === undefined,
-        [`${prefix}--module--full-height`]: fullHeight,
-        [`${prefix}--module--margin-xs`]: margin === "xs",
-        [`${prefix}--module--margin-md`]: margin === "md",
-        [`${prefix}--module--margin-lg`]: margin === "lg",
-        [`${prefix}--module--light`]: light,
-        [`${prefix}--module--with-hover`]: withHover,
-    }, className, [`${prefix}--module`]);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses }, other, { children: jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--module__inner` }, { children: children })) })));
-};
-
-const ModuleBody = (_a) => {
-    var { children, className, centered, noPadding } = _a, other = __rest(_a, ["children", "className", "centered", "noPadding"]);
-    const wrapperClasses = classNames__default["default"]("wfp--module__content", className, {
-        "wfp--module__content--centered": centered,
-        "wfp--module__content--no-padding": noPadding,
-    });
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses }, other, { children: children })));
-};
-
-const ModuleHeader = (_a) => {
-    var { filter, children, className } = _a, other = __rest(_a, ["filter", "children", "className"]);
-    const wrapperClasses = classNames__default["default"]("wfp--module__header", className);
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: wrapperClasses }, other, { children: [jsxRuntimeExports.jsx("h1", Object.assign({ className: "wfp--module__title" }, { children: children })), filter && jsxRuntimeExports.jsx("div", Object.assign({ className: "wfp--module__filter" }, { children: filter }))] })));
-};
-
-const ModuleFooter = (_a) => {
-    var { children, className } = _a, other = __rest(_a, ["children", "className"]);
-    const wrapperClasses = classNames__default["default"]("wfp--module__footer", className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses }, other, { children: children })));
-};
-
-const countDecimals = (value) => {
-    const valueFloat = parseFloat(value);
-    if (Math.floor(valueFloat) === valueFloat)
-        return 0;
-    return value.split(".")[1].length || 0;
-};
-const capMin = (min, value) => isNaN(min) || (!min && min !== 0) || isNaN(value) || (!value && value !== 0)
-    ? value
-    : Math.max(min, value);
-const capMax = (max, value) => isNaN(max) || (!max && max !== 0) || isNaN(value) || (!value && value !== 0)
-    ? value
-    : Math.min(max, value);
-/** The number input component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value */
-const NumberInput = React__namespace.forwardRef((props, ref) => {
-    const { className, disabled, id, hideLabel, hideControls, max, min, step = 1, onChange = () => { }, onClick = () => { }, helperText, light, 
-    //allowEmpty,
-    pattern = "[0-9]*",
-    // ...other
-     } = props;
-    const { prefix } = useSettings();
-    const initialValue = capMax(max, capMin(min, props.value));
-    const [value, setValue] = React.useState(initialValue);
-    React.useEffect(() => {
-        setValue(props.value);
-    }, [props.value]);
-    const newInputRef = React.useRef(null);
-    const _inputRef = ref ? ref : newInputRef;
-    const handleChange = (evt) => {
-        if (!disabled) {
-            evt.persist();
-            evt.imaginaryTarget = _inputRef;
-            setValue(evt.target.value);
-            onChange(evt, parseFloat(evt.target.value));
-        }
-    };
-    const handleArrowClick = (evt, direction) => {
-        let valueState = typeof value === "string" ? Number(value) : value;
-        valueState = isNaN(valueState) ? 0 : valueState;
-        const conditional = direction === "down"
-            ? (min !== undefined && valueState > min) || min === undefined
-            : (max !== undefined && valueState < max) || max === undefined;
-        const stepString = step.toString();
-        valueState =
-            direction === "down"
-                ? valueState - step
-                : valueState + parseFloat(stepString);
-        valueState = capMax(max, capMin(min, valueState));
-        valueState = parseFloat(valueState.toFixed(countDecimals(stepString)));
-        if (!disabled && conditional) {
-            evt.persist();
-            evt.imaginaryTarget = _inputRef;
-            evt.target.value = parseFloat(valueState);
-            onClick(evt, direction);
-            setValue(valueState);
-            onChange(evt, valueState, direction);
-        }
-    };
-    const numberInputClasses = classNames__default["default"](`${prefix}--number`, className, {
-        [`${prefix}--number--light`]: light,
-        [`${prefix}--number--helpertext`]: helperText,
-        [`${prefix}--number--nolabel`]: hideLabel,
-        [`${prefix}--number--nocontrols`]: hideControls,
-    });
-    const newProps = {
-        disabled,
-        id,
-        max,
-        min,
-        step,
-        onChange: handleChange,
-        value: value,
-    };
-    const useInputProps = props;
-    const { inputProps, wrapperProps } = useInput(Object.assign(Object.assign({}, useInputProps), { type: "number" }));
-    return (jsxRuntimeExports.jsx(Input, Object.assign({}, wrapperProps, { inputWrapperClassName: numberInputClasses }, { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--number__controls` }, { children: [jsxRuntimeExports.jsx("button", Object.assign({ className: `${prefix}--number__control-btn up-icon`, type: "button", disabled: disabled, onClick: (evt) => handleArrowClick(evt, "up") }, { children: "+" })), jsxRuntimeExports.jsx("button", Object.assign({ className: `${prefix}--number__control-btn down-icon`, type: "button", disabled: disabled, onClick: (evt) => handleArrowClick(evt, "down") }, { children: "\u2212" })), jsxRuntimeExports.jsx("input", Object.assign({ pattern: pattern }, inputProps, newProps, { ref: ref }))] })) })));
-});
-NumberInput.displayName = "NumberInput";
-
-/** The select component allows users to choose one option from a list. It is used in forms for users to submit data. */
-const Select = React__namespace.forwardRef((props, ref) => {
-    const { className, inline, disabled, children, iconDescription, light, hideLabel, } = props;
-    const { prefix } = useSettings();
-    const selectClasses = classNames__default["default"]({
-        [`${prefix}--select-input`]: true,
-        [`${prefix}--select--inline`]: inline,
-        [`${prefix}--select--light`]: light,
-        //      [`${prefix}--select--invalid`]: invalid,
-        [`${prefix}--select--disabled`]: disabled,
-    }, className);
-    /*const ariaProps = {};
-   if (invalid) {
-      //TODO: check if correct
-      ariaProps['aria-describedby'] = usedId;
-    }*/
-    const useInputProps = props;
-    const { inputProps, wrapperProps } = useInput(Object.assign(Object.assign({}, useInputProps), { inputClassName: selectClasses }));
-    return (jsxRuntimeExports.jsxs(Input, Object.assign({}, wrapperProps, { inputWrapperClassName: `${prefix}--select`, hideLabel: hideLabel }, { children: [jsxRuntimeExports.jsx("select", Object.assign({}, inputProps, { 
-                /*disabled={disabled || undefined}
-                  data-invalid={invalid || undefined}
-                  aria-invalid={invalid || undefined} */
-                ref: ref }, { children: children })), jsxRuntimeExports.jsx(iconsReact.ChevronDown, { className: `${prefix}--select__arrow`, description: iconDescription })] })));
-});
-Select.displayName = "Select";
-
-function SelectItem(_a) {
-    var { className, value, disabled, hidden, text } = _a, other = __rest(_a, ["className", "value", "disabled", "hidden", "text"]);
-    const { prefix } = useSettings();
-    const selectItemClasses = classNames__default["default"]({
-        [`${prefix}--select-option`]: true,
-        [`${className}`]: className,
-    });
-    return (jsxRuntimeExports.jsx("option", Object.assign({}, other, { className: selectItemClasses, value: value, disabled: disabled, hidden: hidden }, { children: text })));
-}
-SelectItem.displayName = "SelectItem";
-
-let instanceId = 0;
-const Pagination = (props) => {
-    const { backwardText = "Backward", className, forwardText = "Forward", id, itemsPerPageText = "Items per page:", itemsPerPageFollowsText, itemRangeText = (min, max, total) => `${min}-${max} of ${total} items`, pageRangeText = (current, total) => `${current} of ${total} pages`, pageSize, //eslint-disable-line
-    pageSizesDisabled, pageSizes, itemText = (min, max) => `${min}-${max} items`, pageText = (page) => `page ${page}`, pageNumberText = "Page Number", //eslint-disable-line
-    pagesUnknown = false, isLastPage = false, pageInputDisabled = false, totalItems, onChange, page: pageNumber = 1 } = props, other = __rest(props, ["backwardText", "className", "forwardText", "id", "itemsPerPageText", "itemsPerPageFollowsText", "itemRangeText", "pageRangeText", "pageSize", "pageSizesDisabled", "pageSizes", "itemText", "pageText", "pageNumberText", "pagesUnknown", "isLastPage", "pageInputDisabled", "totalItems", "onChange", "page"]);
-    const [page, setPage] = React.useState(pageNumber);
-    const [pageSizeState, setPageSize] = React.useState(props.pageSize ? props.pageSize : pageSizes[0]);
-    const uniqueId = React.useState(() => ++instanceId)[0];
-    const handleSizeChange = (evt) => {
-        const pageSize = Number(evt.target.value);
-        setPage(1);
-        setPageSize(pageSize);
-        onChange === null || onChange === void 0 ? void 0 : onChange({ page: 1, pageSize });
-    };
-    // const handlePageChange = (evt: ChangeEvent<HTMLSelectElement>) => {
-    //   setPage(Number(evt.target.value));
-    // };
-    const handlePageInputChange = (evt) => {
-        const page = Number(evt.target.value);
-        if (page > 0 &&
-            page <= Math.max(Math.ceil(totalItems / pageSizeState), 1)) {
-            setPage(page);
-            onChange === null || onChange === void 0 ? void 0 : onChange({ page, pageSize: pageSizeState });
-        }
-    };
-    const incrementPage = () => {
-        const newPage = page + 1;
-        setPage(newPage);
-        onChange === null || onChange === void 0 ? void 0 : onChange({ page: newPage, pageSize: pageSizeState });
-    };
-    const decrementPage = () => {
-        const newPage = page - 1;
-        setPage(newPage);
-        onChange === null || onChange === void 0 ? void 0 : onChange({ page: newPage, pageSize: pageSizeState });
-    };
-    const renderSelectItems = (total) => {
-        let counter = 1;
-        const itemArr = [];
-        while (counter <= total) {
-            itemArr.push(jsxRuntimeExports.jsx(SelectItem, { value: counter, text: String(counter) }, counter));
-            counter++;
-        }
-        return itemArr;
-    };
-    const classNames = classNames__default["default"]("wfp--pagination", className);
-    const backButtonClasses = classNames__default["default"]("wfp--pagination__button", "wfp--pagination__button--backward", {
-        "wfp--pagination__button--no-index": pageInputDisabled,
-    });
-    const inputId = id || uniqueId;
-    const totalPages = Math.max(Math.ceil(totalItems / pageSizeState), 1);
-    const selectItems = renderSelectItems(totalPages);
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: classNames }, other, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: "wfp--pagination__left" }, { children: [!pageSizesDisabled && (jsxRuntimeExports.jsxs(React__default["default"].Fragment, { children: [jsxRuntimeExports.jsx("span", Object.assign({ className: "wfp--pagination__text" }, { children: itemsPerPageFollowsText || itemsPerPageText })), jsxRuntimeExports.jsx(Select, Object.assign({ id: `wfp-pagination-select-${inputId}`, labelText: itemsPerPageText, hideLabel: true, inline: true, onChange: handleSizeChange, value: pageSizeState }, { children: pageSizes.map((size) => (jsxRuntimeExports.jsx(SelectItem, { value: size, text: String(size) }, size))) })), jsxRuntimeExports.jsxs("span", Object.assign({ className: "wfp--pagination__text" }, { children: [" ", "\u00A0\u00A0|\u00A0\u00A0"] }))] })), jsxRuntimeExports.jsx("span", Object.assign({ className: "wfp--pagination__text" }, { children: pagesUnknown
-                            ? itemText(pageSizeState * (page - 1) + 1, page * pageSizeState)
-                            : itemRangeText(Math.min(pageSizeState * (page - 1) + 1, totalItems), Math.min(page * pageSizeState, totalItems), totalItems) }))] })), jsxRuntimeExports.jsxs("div", Object.assign({ className: "wfp--pagination__right wfp--pagination--inline" }, { children: [jsxRuntimeExports.jsx("span", Object.assign({ className: "wfp--pagination__text" }, { children: pagesUnknown ? pageText(page) : pageRangeText(page, totalPages) })), jsxRuntimeExports.jsx("button", Object.assign({ className: backButtonClasses, onClick: decrementPage, disabled: props.disabled || page === 1 }, { children: jsxRuntimeExports.jsx(iconsReact.ChevronLeft, { className: "wfp--pagination__button-icon", description: backwardText }) })), pageInputDisabled ? null : (jsxRuntimeExports.jsx(Select, Object.assign({ id: `wfp-pagination-select-${+inputId + 2}`, labelText: itemsPerPageText, hideLabel: true, inline: true, onChange: handlePageInputChange, value: page }, { children: selectItems }))), jsxRuntimeExports.jsx("button", Object.assign({ className: "wfp--pagination__button wfp--pagination__button--forward", onClick: incrementPage, disabled: props.disabled || page === totalPages || isLastPage }, { children: jsxRuntimeExports.jsx(iconsReact.ChevronRight, { className: "wfp--pagination__button-icon", description: forwardText }) }))] }))] })));
-};
-Pagination.displayName = "Pagination";
-
-let lastId = 0;
-function uniqueId(prefix = 'id') {
-    lastId++;
-    return `${prefix}${lastId}`;
-}
-
-const RadioButton = React__namespace.forwardRef((props, ref) => {
-    const { labelText, id, className, value, name, onChange } = props, other = __rest(props, ["labelText", "id", "className", "value", "name", "onChange"]);
-    const [uid] = React.useState(id || uniqueId());
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames__default["default"]("radioButtonWrapper", className);
-    const handleOnChange = (evt) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(evt, value, name);
-    };
-    const handleChange = onChange
-        ? {
-            onChange: handleOnChange,
-        }
-        : {};
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: wrapperClasses }, { children: [jsxRuntimeExports.jsx("input", Object.assign({}, other, { ref: ref, type: "radio", className: `${prefix}--radio-button` }, handleChange, { id: uid, value: value, name: name, checked: props.checked, defaultChecked: props.defaultChecked, disabled: props.disabled })), jsxRuntimeExports.jsxs("label", Object.assign({ htmlFor: uid, className: `${prefix}--radio-button__label` }, { children: [jsxRuntimeExports.jsx("span", { className: `${prefix}--radio-button__appearance` }), labelText] }))] })));
-});
-RadioButton.displayName = "RadioButton";
-
-/*InputGroup.defaultProps = {
-    onChange: () => {},
-    controlled: false,
-  };*/
-const InputGroup = (props) => {
-    const { prefix } = useSettings();
-    const { children, 
-    //disabled,
-    labelText, helperText, 
-    //controlled,
-    vertical, hideLabel, className = `${prefix}--input-group`, wrapperClassName, valueSelected, defaultSelected, } = props;
-    const [prevValueSelected, setPrevValueSelected] = React.useState(valueSelected || defaultSelected);
-    //const [selected, setSelected] = useState();
-    React.useEffect(() => {
-        if (valueSelected !== prevValueSelected) {
-            setPrevValueSelected(valueSelected);
-            //TODO: setSelected(valueSelected || defaultSelected);
-        }
-    }, [valueSelected, defaultSelected]);
-    const labelClasses = classNames__default["default"](`${prefix}--label`, {
-        [`${prefix}--visually-hidden`]: hideLabel,
-    });
-    const wrapperClasses = classNames__default["default"](`${prefix}--form-item`, {
-        [`${prefix}--input-group__vertical`]: vertical,
-        wrapperClassName,
-    });
-    const label = labelText ? (jsxRuntimeExports.jsx("span", Object.assign({ className: labelClasses }, { children: labelText }))) : null;
-    const helper = helperText ? (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--form__helper-text` }, { children: helperText }))) : null;
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: wrapperClasses }, { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: className }, { children: [label, helper, jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--input-group-inside` }, { children: /*controlled ? getRadioButtons() : */ children }))] })) })));
-};
-InputGroup.displayName = 'InputGroup';
-
-const MoreLink = ({ handleToggleClick, link, text, showMore, contentId }) => {
-    const { prefix } = useSettings();
-    const ariaProps = {
-        "aria-expanded": showMore,
-        "aria-controls": contentId,
-    };
-    if (link) {
-        const clonedLink = React__default["default"].cloneElement(link, Object.assign({ onClick: handleToggleClick }, ariaProps));
-        return clonedLink;
-    }
-    else {
-        const Icon = iconsReact.ChevronUp;
-        const classes = classNames__default["default"]({
-            [`${prefix}--read-more__trigger`]: true,
-            [`${prefix}--read-more__trigger--expanded`]: showMore,
-        });
-        return (jsxRuntimeExports.jsxs(Link, Object.assign({ className: classes, size: "sm", onClick: handleToggleClick }, ariaProps, { children: [text, jsxRuntimeExports.jsx(Icon, { width: "10", height: "10", description: showMore ? "icon up" : "icon down" })] })));
-    }
-};
-/** ReadMore component is a simple way to keep longer content from cluttering up your page, giving you more control over how much content is displayed to visitor */
-function ReadMore({ collapseLink, collapseText = "Show less", children, collapsed, className, disableAutoscroll, expandLink, expandText = "Show more", fade, maxHeight, }) {
-    const { prefix } = useSettings();
-    const [showMore, setShowMore] = React.useState(false);
-    const [innerHeight, setInnerHeight] = React.useState(0);
-    const readMoreRef = React.useRef(null);
-    const readMoreFakeRef = React.useRef(null);
-    const internalId = _useId();
-    // Generate a unique ID for the content container
-    const contentId = `${internalId}-read-more-content`;
-    const handleToggleClick = (e) => {
-        var _a;
-        e.preventDefault();
-        const innerHeight = (_a = readMoreRef === null || readMoreRef === void 0 ? void 0 : readMoreRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
-        if (!showMore && !disableAutoscroll)
-            setTimeout(() => {
-                if (readMoreFakeRef === null || readMoreFakeRef === void 0 ? void 0 : readMoreFakeRef.current)
-                    readMoreFakeRef.current.scrollIntoView({
-                        behavior: "smooth",
-                        block: "end",
-                    });
-            }, 50);
-        setShowMore(!showMore);
-        if (innerHeight) {
-            setInnerHeight(innerHeight);
-        }
-    };
-    const classes = classNames__default["default"](className, {
-        [`${prefix}--read-more`]: true,
-        [`${prefix}--read-more--expanded`]: showMore,
-        [`${prefix}--read-more--fade`]: fade,
-        [`${prefix}--read-more--max-height`]: maxHeight,
-    });
-    const contentStyle = !maxHeight
-        ? {
-            undefined,
-        }
-        : maxHeight && !showMore
-            ? {
-                maxHeight: maxHeight,
-            }
-            : {
-                maxHeight: innerHeight + 20,
-            };
-    const collapseStyle = showMore
-        ? {
-            display: "none",
-        }
-        : {
-            display: "block",
-        };
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: classes }, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--read-more__content`, style: contentStyle, id: contentId }, { children: [jsxRuntimeExports.jsx("div", { className: `${prefix}--read-more__fake-height`, ref: readMoreFakeRef, style: { height: `${innerHeight + 30}px` } }), jsxRuntimeExports.jsxs("div", Object.assign({ ref: readMoreRef }, { children: [(showMore || !collapsed) && children, collapsed && jsxRuntimeExports.jsx("div", Object.assign({ style: collapseStyle }, { children: collapsed }))] }))] })), jsxRuntimeExports.jsx(MoreLink, { handleToggleClick: handleToggleClick, showMore: showMore, link: showMore ? collapseLink : expandLink, text: showMore ? collapseText : expandText, contentId: contentId })] })));
-}
-ReadMore.displayName = "ReadMore";
-
-function SecondaryNavigation(_a) {
-    var { additional, children, className, id, pageWidth } = _a, other = __rest(_a, ["additional", "children", "className", "id", "pageWidth"]);
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames__default["default"](`${prefix}--secondary-navigation`, className);
-    return (jsxRuntimeExports.jsx("div", Object.assign({ id: id, className: wrapperClasses }, other, { children: jsxRuntimeExports.jsxs(Wrapper, Object.assign({ pageWidth: pageWidth, className: `${prefix}--secondary-navigation__wrapper` }, { children: [jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--secondary-navigation__list` }, { children: children })), additional && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--secondary-navigation__additional` }, { children: additional })))] })) })));
-}
-SecondaryNavigation.displayName = "SecondaryNavigation";
-
-function SecondaryNavigationTitle({ className, children, }) {
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames__default["default"](`${prefix}--secondary-navigation__title`, className);
-    return jsxRuntimeExports.jsx("h1", Object.assign({ className: wrapperClasses }, { children: children }));
-}
-SecondaryNavigationTitle.displayName = "SecondaryNavigationTitle";
-
-function StepNavigation({ inline, small, vertical, className, role, children, }) {
-    const { prefix } = useSettings();
-    const [dropdownHidden] = React.useState(true);
-    // const [elRefs, setElRefs] = useState({});
-    /*const getTabAt = (index) => {
-      return elRefs[`tab${index}`] || React.Children.toArray(children)[index];
-    };
-  */
-    const getTabs = () => {
-        return React__default["default"].Children.map(children, (tab) => tab);
-    };
-    const tabsWithProps = getTabs(); /* TODO: Use hook ?.map(
-      (tab: React.ReactElement<any>, index: number) => {
-        const newTab = React.cloneElement(tab as React.ReactElement<any>, {
-          index,
-          selectedPage: selectedPage,
-          handleTabClick: handleTabClick(onSelectionChange),
-          handleTabAnchorFocus: handleTabAnchorFocus(onSelectionChange),
-          ref: elRefs[index],
-        });
-  
-        return newTab;
-      }
-    );*/
-    const classes = {
-        tabs: classNames__default["default"](className, {
-            [`${prefix}--step-navigation`]: true,
-            [`${prefix}--step-navigation--vertical`]: vertical,
-            [`${prefix}--step-navigation--small`]: small,
-            [`${prefix}--step-navigation--regular`]: !small,
-        }),
-        tablist: classNames__default["default"](`${prefix}--step-navigation__nav`, {
-            [`${prefix}--step-navigation__nav--hidden`]: dropdownHidden,
-            [`${prefix}--step-navigation__nav--inline`]: inline,
-        }),
-    };
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx("nav", Object.assign({ className: classes.tabs, role: role }, { children: jsxRuntimeExports.jsx("ul", Object.assign({ role: "tablist", className: classes.tablist }, { children: tabsWithProps })) })) }));
-}
-
-const StepNavigationItem = ({ className, handleTabClick = () => { }, index, label, status, helperText, selectedPage = 0, onClick = () => { }, page = 0, renderAnchor, }) => {
-    var _a;
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--step-navigation__nav-item`, { [`${prefix}--step-navigation__nav-item--before`]: page < selectedPage }, {
-        [`${prefix}--step-navigation__nav-item--selected`]: page === selectedPage,
-    }, { [`${prefix}--step-navigation__nav-item--${status}`]: status }, className);
-    const anchorProps = {
-        className: `${prefix}--step-navigation__nav-link`,
-        /*ref: (e) => {
-          this.tabAnchor = e;
-        },*/
-    };
-    const icon = {
-        "not-started": { icon: iconsReact.Ellipsis },
-        warning: { icon: iconsReact.WarningOutline },
-        locked: { icon: iconsReact.Locked },
-        skip: { icon: iconsReact.OverflowMenu },
-        disabled: { icon: iconsReact.Error },
-        complete: { icon: iconsReact.Checkmark },
-        summary: { icon: iconsReact.Menu },
-    };
-    const Icon = status ? (_a = icon[status]) === null || _a === void 0 ? void 0 : _a.icon : null;
-    return (jsxRuntimeExports.jsx("li", Object.assign({ tabIndex: -1, className: classes, onClick: (evt) => {
-            if (status !== "locked") {
-                handleTabClick(evt, index, label);
-                onClick(evt);
-            }
-        }, role: "presentation" }, { children: jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: renderAnchor ? (renderAnchor(anchorProps)) : (jsxRuntimeExports.jsxs(React__namespace.Fragment, { children: [jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--step-navigation__nav-item__indicator` }, { children: status && page !== selectedPage ? (jsxRuntimeExports.jsx(Icon, { width: "14", height: "14", description: "Step Item" })) : (jsxRuntimeExports.jsx("span", { children: page + 1 })) })), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("span", Object.assign({ className: `${prefix}--step-navigation__nav-item__text` }, { children: label })), helperText && (jsxRuntimeExports.jsx("span", Object.assign({ className: `${prefix}--step-navigation__nav-item__helper-text` }, { children: helperText })))] })] })) }) })));
-};
-
-function SelectItemGroup(_a) {
-    var { children, className, disabled, label } = _a, other = __rest(_a, ["children", "className", "disabled", "label"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--select-optgroup`, className);
-    return (jsxRuntimeExports.jsx("optgroup", Object.assign({ className: classes, label: label, disabled: disabled }, other, { children: children })));
-}
-
-const Sidebar = (_a) => {
-    var { active, children, className, 
-    // sidebarMobileHeader,
-    sidebar } = _a, other = __rest(_a, ["active", "children", "className", "sidebar"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sidebar-content__container`, className, {
-        [`${prefix}--sidebar-content__container--active`]: active,
-    });
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: classes }, other, { children: [jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--sidebar-item-content` }, { children: sidebar })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--content-section` }, { children: children }))] })));
-};
-const SidebarHeader = (_a) => {
-    var { className, children, noPadding } = _a, other = __rest(_a, ["className", "children", "noPadding"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sidebar-content__header`, className, {
-        [`${prefix}--sidebar-content__header--no-padding`]: noPadding,
-    });
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classes }, other, { children: children })));
-};
-const SidebarContentHeader = (_a) => {
-    var { className, children } = _a, other = __rest(_a, ["className", "children"]);
-    const { prefix } = useSettings();
-    const mobileClasses = classNames__default["default"](`${prefix}--sidebar-content-mobile-header`, className, {});
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: mobileClasses }, other, { children: children })));
-};
-const SidebarContentBody = (_a) => {
-    var { className, children } = _a, other = __rest(_a, ["className", "children"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--sidebar-content__children`, className, {});
-    return (jsxRuntimeExports.jsx("div", Object.assign({ id: "scroll-container", className: classes }, other, { children: children })));
-};
-const SidebarScroll = (_a) => {
-    var { children } = _a, other = __rest(_a, ["children"]);
-    const { prefix } = useSettings();
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--sidebar-content__scroll` }, other, { children: children })));
-};
-const SidebarBackButton = (_a) => {
-    var { children } = _a, other = __rest(_a, ["children"]);
-    const { prefix } = useSettings();
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--sidebar-content__back-button` }, other, { children: [jsxRuntimeExports.jsx(iconsReact.ChevronLeft, {}), children] })));
-};
-
-const TextInput = React__namespace.forwardRef((props, ref) => {
-    const { 
-    //className,
-    //formItemClassName,
-    hideLabel, helperText, pattern, required, } = props;
-    const { prefix } = useSettings();
-    const inputClassName = classNames__default["default"](`${prefix}--input`, `${prefix}--text-input`, 
-    //className,
-    {
-        [`${prefix}--text--helpertext`]: helperText,
-        [`${prefix}--text--nolabel`]: hideLabel,
-        [`${prefix}--text--required`]: required,
-    });
-    const useInputProps = props;
-    const { inputProps, wrapperProps } = useInput(Object.assign(Object.assign({}, useInputProps), { inputClassName }));
-    return (jsxRuntimeExports.jsx(Input, Object.assign({}, wrapperProps, { children: jsxRuntimeExports.jsx("input", Object.assign({ pattern: pattern }, inputProps, { ref: ref })) })));
-});
-TextInput.displayName = "TextInput";
-
-const defaultFormatLabel = (value, label) => {
-    return typeof label === "function"
-        ? label(value)
-        : `${value}${label ? label : ""}`;
-};
-function calculatePercentage(value, min, max) {
-    // Ensure the values are in the correct range
-    if (max <= min) {
-        return;
-    }
-    if (value < min)
-        value = min;
-    if (value > max)
-        value = max;
-    // Calculate the percentage
-    return ((value - min) / (max - min)) * 100;
-}
-const Slider = React__namespace.forwardRef((props, ref) => {
-    const { ariaLabelInput, className, disabled, formatLabel = defaultFormatLabel, fullWidth, id, inputType, hideLabel, hideControls, hideTextInput, min, minLabel, max, maxLabel, step = 1, 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange = () => { }, 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    //onClick = () => {},
-    helperText } = props, other = __rest(props, ["ariaLabelInput", "className", "disabled", "formatLabel", "fullWidth", "id", "inputType", "hideLabel", "hideControls", "hideTextInput", "min", "minLabel", "max", "maxLabel", "step", "onChange", "helperText"]);
-    const { prefix } = useSettings();
-    const initialValue = props.value;
-    const [value, setValue] = React__namespace.useState(initialValue);
-    React__namespace.useEffect(() => {
-        setValue(props.value);
-    }, [props.value]);
-    const newInputRef = React__namespace.useRef(null);
-    const _inputRef = ref ? ref : newInputRef;
-    const handleChange = (evt) => {
-        if (!disabled) {
-            evt.persist();
-            evt.imaginaryTarget = _inputRef;
-            if (evt.target.value > max) {
-                setValue(max);
-                onChange(/*max, */ evt);
-            } /* else if (evt.target.value < min) {
-              setValue(evt.target.value);
-              onChange(parseFloat(min), evt);
-            }*/
-            else {
-                setValue(evt.target.value);
-                onChange(/*parseFloat(evt.target.value), */ evt);
-            }
-        }
-    };
-    const numberInputClasses = classNames__default["default"](`${prefix}--slider--wrapper`, className, {
-        [`${prefix}--slider--helpertext`]: helperText,
-        [`${prefix}--slider--nolabel`]: hideLabel,
-        [`${prefix}--slider--nocontrols`]: hideControls,
-    });
-    const sliderContainerClasses = classNames__default["default"](`${prefix}--slider-container`, {
-        [`${prefix}--slider-container--full-width`]: fullWidth,
-    });
-    const newProps = {
-        disabled,
-        id,
-        max,
-        min,
-        step,
-        onChange: handleChange,
-        value: value,
-    };
-    const inputClasses = classNames__default["default"](`${prefix}--input`, `${prefix}--slider-text-input`);
-    const sliderClasses = classNames__default["default"](`${prefix}--slider`, { [`${prefix}--slider--disabled`]: disabled }, className);
-    const sliderRangeWrapperClasses = classNames__default["default"](`${prefix}--slider__range-wrapper`, { [`${prefix}--slider__range-wrapper--disabled`]: disabled }, className);
-    const valueMinimal = value && value < min ? min : value;
-    const useInputProps = props;
-    const input = useInput(useInputProps);
-    console.log("valueMinimal", valueMinimal);
-    return (jsxRuntimeExports.jsx(Input, Object.assign({}, input.wrapperProps, { formItemClassName: numberInputClasses }, { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: sliderContainerClasses }, { children: [jsxRuntimeExports.jsx("span", Object.assign({ className: `${prefix}--slider__range-label` }, { children: formatLabel(min, minLabel) })), jsxRuntimeExports.jsxs("div", Object.assign({ className: sliderRangeWrapperClasses }, { children: [jsxRuntimeExports.jsx("div", { className: `${prefix}--slider__range-before`, style: {
-                                width: `${calculatePercentage(valueMinimal, min, max)}%`,
-                            } }), jsxRuntimeExports.jsx("input", Object.assign({ className: sliderClasses, type: "range" }, other, newProps, { ref: _inputRef }))] })), jsxRuntimeExports.jsx("span", Object.assign({ className: `${prefix}--slider__range-label` }, { children: formatLabel(max, maxLabel) })), !hideTextInput && (jsxRuntimeExports.jsx(TextInput, { disabled: disabled, type: inputType, id: "input-for-slider", className: inputClasses, value: value, onChange: handleChange, "aria-label": ariaLabelInput }))] })) })));
-});
-Slider.displayName = "Slider";
-
-/** The item component to show entries inside a list, like a sidebar or an overview page. */
-const Item = React__namespace.forwardRef((_a, ref) => {
-    var { active, additional, children, className, subContent, image, hint, noImage, unread, showAdditionalIcon, title, kind = "large", wrapper = "none" } = _a, other = __rest(_a, ["active", "additional", "children", "className", "subContent", "image", "hint", "noImage", "unread", "showAdditionalIcon", "title", "kind", "wrapper"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"]({
-        [`${prefix}--item`]: true,
-        [`${prefix}--item--${kind}`]: kind,
-        [`${prefix}--item--${wrapper}`]: wrapper,
-        [`${prefix}--item--active`]: active,
-        [`${prefix}--item--unread`]: unread,
-    }, className);
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: classes }, other, { ref: ref }, { children: [image ? (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--item__image` }, { children: image }))) : noImage ? (jsxRuntimeExports.jsx("div", { className: `${prefix}--item__image ${prefix}--item__image-empty` })) : null, title && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--item__title-wrapper` }, { children: jsxRuntimeExports.jsx("h2", Object.assign({ className: `${prefix}--item__title` }, { children: title })) }))), additional && (jsxRuntimeExports.jsxs("div", Object.assign({ className: `${prefix}--item__additional` }, { children: [additional, showAdditionalIcon && (jsxRuntimeExports.jsx(iconsReact.ChevronRight, { className: `${prefix}--item__additional-icon` }))] }))), children && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--item__text` }, { children: children }))), subContent && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--item__sub-content` }, { children: subContent }))), hint && jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--item__hint` }, { children: hint })), unread && jsxRuntimeExports.jsx("div", { className: `${prefix}--item__unread` })] })));
-});
-Item.displayName = "Item";
-
-const ReactTablePagination = ({ 
-// Computed
-data, page, pageSizeOptions, paginationClassName, totalItems, style, onPageChange, onPageSizeChange, 
-// Props
-isLastPage, pages, 
-// showPageSizeOptions,
-pageInputDisabled, pageSize, pagesUnknown, backwardText, forwardText, itemsPerPageText, itemsPerPageFollowsText, itemRangeText, pageRangeText, pageSizesDisabled, itemText, pageNumberText, }) => {
-    const { prefix } = useSettings();
-    const getSafePage = (newPage) => {
-        if (isNaN(newPage)) {
-            newPage = page;
-        }
-        return newPage;
-    };
-    const changePage = (page) => {
-        const nextPage = getSafePage(page.page - 1);
-        // Update Page
-        if (page !== nextPage) {
-            onPageChange(nextPage);
-        }
-        // Update PageSize
-        if (pageSize !== page.pageSize) {
-            onPageSizeChange(page.pageSize);
-        }
-    };
-    const propList = {
-        isLastPage,
-        pages,
-        //showPageSizeOptions,
-        pageInputDisabled,
-        pageSize,
-        pagesUnknown,
-        backwardText,
-        forwardText,
-        itemsPerPageText,
-        itemsPerPageFollowsText,
-        itemRangeText,
-        pageRangeText,
-        pageSizesDisabled,
-        itemText,
-        pageNumberText,
-    };
-    return (jsxRuntimeExports.jsx("div", Object.assign({ className: classNames__default["default"](paginationClassName, '-pagination'), style: style }, { children: jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}-pagination` }, { children: jsxRuntimeExports.jsx(Pagination, Object.assign({ onChange: changePage, pageSizes: pageSizeOptions, page: page, totalItems: totalItems ? totalItems : data ? data.length : undefined }, propList)) })) })));
-};
-ReactTablePagination.displayName = 'ReactTablePagination';
-
-function useTab(props) {
-    const { prefix } = useSettings();
-    const { className, disabled, handleTabClick = () => { }, // eslint-disable-line
-    handleTabAnchorFocus = () => { }, // eslint-disable-line
-    handleTabKeyDown = () => { }, // eslint-disable-line
-    href, index = 0, label, selected, tabIndex, onClick = () => { }, // eslint-disable-line
-    onKeyDown = () => { } } = props, // eslint-disable-line
-    //renderAnchor,
-    //renderListElement,
-    other = __rest(props, ["className", "disabled", "handleTabClick", "handleTabAnchorFocus", "handleTabKeyDown", "href", "index", "label", "selected", "tabIndex", "onClick", "onKeyDown"]);
-    const setTabFocus = (evt) => {
-        const leftKey = 37;
-        const rightKey = 39;
-        if (evt.which === leftKey && handleTabAnchorFocus) {
-            handleTabAnchorFocus(index - 1);
-        }
-        else if (evt.which === rightKey && handleTabAnchorFocus) {
-            handleTabAnchorFocus(index + 1);
-        }
-        else {
-            return;
-        }
-    };
-    const classes = classNames__default["default"](`${prefix}--tabs__nav-item`, { [`${prefix}--tabs__nav-item--disabled`]: disabled }, { [`${prefix}--tabs__nav-item--selected`]: selected }, className);
-    const selectedClasses = classNames__default["default"](`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-item--selected`, className);
-    const anchorProps = {
-        className: 'wfp--tabs__nav-link',
-        href: disabled ? undefined : href,
-        label,
-        role: 'tab',
-        tabIndex,
-        'aria-selected': selected,
-        // ref: (e) => {
-        //   tabAnchor = e;
-        // },
-    };
-    //  {...other}
-    const liProps = Object.assign({ tabIndex: -1, className: classes, onClick: (evt) => {
-            if (!disabled) {
-                handleTabClick(index, label, evt);
-                onClick(evt);
-            }
-        }, onKeyDown: (evt) => {
-            if (!disabled) {
-                setTabFocus(evt);
-                handleTabKeyDown(index, label, evt);
-                onKeyDown(evt);
-            }
-        }, role: 'presentation', selected: selected }, other);
-    return {
-        liProps,
-        anchorProps,
-        selectedClasses,
-    };
-}
-
-/** Tab to be used inside the Tabs component */
-const Tab = (props) => {
-    // const { prefix } = useSettings();
-    const { 
-    // className,
-    disabled, 
-    //  handleTabClick = () => {},
-    // handleTabAnchorFocus = () => {}, // eslint-disable-line
-    //  handleTabKeyDown = () => {},
-    // href,
-    // index = 0,
-    label, 
-    //  selected,
-    //  tabIndex,
-    ///  onClick = () => {},
-    //  onKeyDown = () => {},
-    renderAnchor, renderListElement,
-    //  ...other
-     } = props;
-    const { anchorProps, liProps, selectedClasses } = useTab(props);
-    return (jsxRuntimeExports.jsx(React__namespace.Fragment, { children: renderListElement ? (typeof renderListElement === "function" ? (renderListElement(Object.assign(Object.assign(Object.assign({}, props), liProps), { anchor: anchorProps, selectedClasses: selectedClasses }))) : (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: renderListElement }))) : (jsxRuntimeExports.jsx("li", Object.assign({}, liProps, { children: renderAnchor ? (renderAnchor(anchorProps)) : disabled ? (jsxRuntimeExports.jsx("span", Object.assign({}, anchorProps, { children: label }))) : (jsxRuntimeExports.jsx("a", Object.assign({}, anchorProps, { children: label }))) }))) }));
-};
-
-const TabContent = (props) => {
-    const { selected = false, children } = props, other = __rest(props, ["selected", "children"]);
-    return (jsxRuntimeExports.jsx("div", Object.assign({}, other, { "data-selected": selected, hidden: !selected }, { children: children })));
-};
-TabContent.displayName = 'TabContent';
-
-/* eslint-disable @typescript-eslint/no-empty-function */
-const TabsContext = React__default["default"].createContext({
-    handleTabClick: () => { },
-    handleTabKeyDown: () => { },
-    handleTabAnchorFocus: () => { },
-});
-
-/** Tabs allow users to navigate easily between views within the same context */
-const Tabs = (props) => {
-    const { 
-    // ariaLabel = 'listbox',
-    disableAnimation, inline, className, 
-    //customTabContent,
-    // triggerHref = '#',
-    role = "navigation", 
-    //onSelectionChange,
-    selected = null } = props, 
-    // children,
-    other = __rest(props, ["disableAnimation", "inline", "className", "role", "selected"]);
-    const { prefix } = useSettings();
-    const [currentSelected, setCurrentSelected] = React__namespace.useState(selected);
-    //const [sizes, setSizes] = useState<boolean>();
-    const rootRef = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-        if (selected !== currentSelected) {
-            setCurrentSelected(selected);
-        }
-    }, [selected]);
-    /*useEffect(() => {
-      getSizes();
-      // eslint-disable-next-line no-undef
-      if (window) {
-        // eslint-disable-next-line no-undef
-        window.addEventListener('resize', getSizes);
-        return () => {
-          // eslint-disable-next-line no-undef
-          window.removeEventListener('resize', getSizes);
-        };
-      }
-    }, []);*/
-    const classes = {
-        tabs: classNames__default["default"](`${prefix}--tabs`, { [`${prefix}--tabs--no-animation`]: disableAnimation }, className),
-        tablist: classNames__default["default"](`${prefix}--tabs__nav`, {
-            [`${prefix}--tabs__nav--inline`]: inline,
-        }),
-    };
-    /*function getTabs() {
-      return React.Children.map(props.children, (tab) => tab);
-    }*/
-    /*const getTabAt = (index) => {
-      return this[`tab${index}`] || React.Children.toArray(props.children)[index];
-    };*/
-    /*const getSizes = () => {
-      if (rootRef.current === null || rootRef.current.length > 1) {
-        return null;
-      }
-      const rootBounds = rootRef.current.getBoundingClientRect();
-      const sizes = {};
-      Object.values(rootRef.current.children).forEach((el, key) => {
-        const bounds = el.children[0].getBoundingClientRect();
-  
-        const left = bounds.left - rootBounds.left;
-        const right = rootBounds.right - bounds.right;
-  
-        sizes[key] = { left, right };
-      });
-      setSizes(sizes);
-    };
-  */
-    //   const setTabAt = (index, tabRef) => {
-    //     this[`tab${index}`] = tabRef;
-    //   };
-    // following functions (handle*) are Props on Tab.js, see Tab.js for parameters
-    const handleTabClick = ( /*onSelectionChange*/) => {
-        return (index, label, evt) => {
-            if (evt) {
-                evt.preventDefault();
-            }
-            // selectTabAt(index, onSelectionChange);
-        };
-    };
-    const handleTabKeyDown = ( /*onSelectionChange*/) => {
-        return (index, label, evt) => {
-            evt.key || evt.which;
-        };
-    };
-    const handleTabAnchorFocus = ( /*onSelectionChange*/) => {
-        /* return (index) => {
-          const tabCount = React.Children.count(props.children) - 1;
-          let tabIndex = index;
-    
-          if (index < 0) {
-            tabIndex = tabCount;
-          } else if (index > tabCount) {
-            tabIndex = 0;
-          }
-    
-          const tab = getTabAt(tabIndex);
-    
-          if (tab) {
-            selectTabAt(tabIndex, onSelectionChange);
-            if (tab.tabAnchor) {
-              tab.tabAnchor.focus();
-            }
-          }
-        };*/
-    };
-    /*const selectTabAt = (index, onSelectionChange) => {
-      /* if (currentSelected !== index) {
-        setCurrentSelected(index);
-        if (typeof onSelectionChange === 'function') {
-          onSelectionChange(index);
-        }
-      }
-    };*/
-    //   const { selected, sizes } = this.state;
-    /*const tabsWithProps = getTabs().map((Tab, index) => {
-      const newTab = React.cloneElement(Tab, {
-        index,
-        selected: index === currentSelected,
-        handleTabClick: handleTabClick(onSelectionChange),
-        handleTabAnchorFocus: handleTabAnchorFocus(onSelectionChange),
-        //   ref: (e) => {
-        //     setTabAt(index, e);
-        //   },
-        handleTabKeyDown: handleTabKeyDown(onSelectionChange),
-      });
-  
-      return newTab;
-    });
-  
-    const tabContentWithProps = !customTabContent
-      ? React.Children.map(tabsWithProps, (tab) => {
-          const { children, selected } = tab.props;
-          if (!children) {
-            return null;
-          }
-          return (
-            <TabContent
-              className={`${prefix}--tab-content`}
-              aria-hidden={!selected}
-              hidden={!selected}
-              selected={selected}>
-              {children}
-            </TabContent>
-          );
-        })
-      : null;
-      */
-    //const sizeBar = sizes ? sizes[currentSelected] : undefined;
-    return (jsxRuntimeExports.jsx(TabsContext.Provider, Object.assign({ value: { handleTabClick, handleTabKeyDown, handleTabAnchorFocus } }, { children: jsxRuntimeExports.jsxs("nav", Object.assign({}, other, { className: classes.tabs, role: role }, { children: [jsxRuntimeExports.jsx("div", { className: `${prefix}--tabs__nav__bar` }), jsxRuntimeExports.jsx("ul", Object.assign({ ref: rootRef, role: "tablist", className: classes.tablist }, { children: props.children }))] })) })));
-};
-Tabs.displayName = "Tabs";
-
-const TextArea = React__namespace.forwardRef((props, ref) => {
-    const { className, fullWidth } = props;
-    const { prefix } = useSettings();
-    const textareaClasses = classNames__default["default"](`${prefix}--text-area`, className, {
-        [`${prefix}--textarea-fullwidth`]: fullWidth,
-    });
-    const useInputProps = props;
-    const input = useInput(Object.assign(Object.assign({}, useInputProps), { inputClassName: textareaClasses }));
-    return (jsxRuntimeExports.jsx(Input, Object.assign({}, input.wrapperProps, { children: jsxRuntimeExports.jsx("textarea", Object.assign({}, input.inputProps, { ref: ref })) })));
-});
-TextArea.displayName = 'TextArea';
-
-const Toggle = React__namespace.forwardRef((props, ref) => {
-    const { className, defaultToggled = false, 
-    //    toggled,
-    //    onChange,
-    //    onToggle = () => {},
-    id, labelA = "Off", labelB = "On" } = props, other = __rest(props, ["className", "defaultToggled", "id", "labelA", "labelB"]);
-    const { prefix } = useSettings();
-    //  let input;
-    const wrapperClasses = classNames__default["default"]({
-        [`${prefix}--form-item`]: true,
-    }, className);
-    // const checkedProps = {};
-    // if (typeof toggled !== 'undefined') {
-    //   checkedProps.checked = toggled;
-    // } else {
-    //   checkedProps.defaultChecked = defaultToggled;
-    // }
-    const htmlFor = id ? id : other.name;
-    const useInputProps = props;
-    const input = useInput(useInputProps);
-    const otherInputProps = other;
-    return (jsxRuntimeExports.jsxs(Input, Object.assign({ className: wrapperClasses }, props, { children: [jsxRuntimeExports.jsx("input", Object.assign({}, otherInputProps, input.inputProps, { 
-                //checked={toggled}
-                defaultChecked: defaultToggled, type: "checkbox", id: htmlFor, className: `${prefix}--toggle`, 
-                /*onChange={(evt) => {
-                  onChange && onChange(evt);
-                  onToggle && onToggle(input.checked, htmlFor, evt);
-                }}*/
-                ref: ref })), jsxRuntimeExports.jsxs("label", Object.assign({ className: `${prefix}--toggle__label`, htmlFor: htmlFor }, { children: [jsxRuntimeExports.jsx("span", Object.assign({ className: `${prefix}--toggle__text--left` }, { children: labelA })), jsxRuntimeExports.jsx("span", { className: `${prefix}--toggle__appearance` }), jsxRuntimeExports.jsx("span", Object.assign({ className: `${prefix}--toggle__text--right` }, { children: labelB }))] }))] })));
-});
-Toggle.displayName = "Toggle";
-
-/** The User is used inside the MainNavigation and form, and can display an avatar and username. */
-const User = (props) => {
-    const { className, children, components = {}, description, ellipsis, extendedDescription, showName, small, name, missingImage } = props, other = __rest(props, ["className", "children", "components", "description", "ellipsis", "extendedDescription", "showName", "small", "name", "missingImage"]);
-    const { prefix } = useSettings();
-    const defaultComponents = { Avatar };
-    const allComponents = Object.assign(Object.assign({}, defaultComponents), components);
-    const classes = classNames__default["default"](`${prefix}--user`, className, {
-        [`${prefix}--user--has-description`]: description,
-        [`${prefix}--user--has-extended-description`]: extendedDescription,
-    });
-    const titleClasses = classNames__default["default"]({
-        [`${prefix}--user__title`]: true,
-        [`${prefix}--user__title--ellipsis`]: ellipsis,
-        [`${prefix}--user__title--small`]: small,
-    });
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: classes }, other, { children: [jsxRuntimeExports.jsx(allComponents.Avatar, Object.assign({}, props, { missingImage: missingImage })), showName && (jsxRuntimeExports.jsxs("span", Object.assign({ className: titleClasses }, { children: [jsxRuntimeExports.jsx("span", { children: name }), description && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--user__description` }, { children: description })))] }))), children, extendedDescription && (jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--user__extended-description` }, { children: extendedDescription })))] })));
-};
-
-const scaleLookup = {
-    thousand: {
-        pow: 1000,
-        defaultmaximumFractionDigits: 2,
-        default: { after: 'T' },
-    },
-    million: {
-        pow: 1000000,
-        defaultmaximumFractionDigits: 1,
-        default: { after: 'M' },
-    },
-    billion: {
-        pow: 1000000000,
-        defaultmaximumFractionDigits: 2,
-        default: { after: 'B' },
-    },
-};
-
-// For invalid Values
-const Invalid = props => {
-    return jsxRuntimeExports.jsx("span", Object.assign({ className: props.className + ' invalid' }, { children: "\u2013" }));
-};
-// For invalid Values
-const InvalidSvg = props => {
-    return jsxRuntimeExports.jsx("tspan", Object.assign({ className: props.className + ' invalid' }, { children: "\u2013" }));
-};
-
-const StringUnit = value => {
-    if (value) {
-        const before = value.before ? value.before + ' ' : '';
-        const afterOutput = value.output && value.output.default
-            ? value.output.default.after + ''
-            : '';
-        const after = value.after ? ' ' + value.after : '';
-        return before + value.value + afterOutput + after;
-    }
-    else
-        return '';
-};
-
-const SvgUnit = (value, props) => {
-    const { style } = props, other = __rest(props, ["style"]);
-    if (value)
-        return (jsxRuntimeExports.jsxs("text", Object.assign({ className: props.className }, other, { children: [jsxRuntimeExports.jsxs("tspan", Object.assign({ style: style }, { children: [value.before, " "] })), jsxRuntimeExports.jsx("tspan", Object.assign({ style: style }, { children: value.value })), jsxRuntimeExports.jsxs("tspan", Object.assign({ style: style }, { children: [' ', value.output ? value.output.default.after + '' : '', value.after] }))] })));
-    else
-        return jsxRuntimeExports.jsx(InvalidSvg, { className: props.className });
-};
-
-const currencyCalc = (props, after, before, afterSingular, isAbsolute) => {
-    const { children, input, output, 
-    /* maximumSignificantDigits, */
-    minimumFractionDigits, maximumFractionDigits, localeStringLanguage = "en-EN", calcOnly, string, svg, hideZero, } = props;
-    // Remove commas
-    var value = typeof children === "string" ? children.replace(/,/g, "") : children;
-    // Parse as float
-    value = parseFloat(value);
-    // Input
-    value =
-        value !== 0 && input && scaleLookup[input]
-            ? scaleLookup[input].pow * value
-            : value;
-    // output
-    const outputCalc = output && scaleLookup[output] ? scaleLookup[output] : undefined;
-    value = value !== 0 && output ? value / outputCalc.pow : value;
-    const minimumFractionDigitsCalculated = isAbsolute === true && output === undefined
-        ? minimumFractionDigits === 0
-        : /*: maximumFractionDigits === 0
-        ? 0*/
-            typeof minimumFractionDigits === "number"
-                ? minimumFractionDigits
-                : outputCalc && outputCalc.defaultmaximumFractionDigits
-                    ? outputCalc.defaultmaximumFractionDigits
-                    : 2;
-    const maximumFractionDigitsCalculated = isAbsolute === true && output === undefined
-        ? maximumFractionDigits === 0
-        : value <= 0.005
-            ? 4
-            : value <= 0.05
-                ? 3
-                : value <= 0.5
-                    ? 2
-                    : maximumFractionDigits === 0
-                        ? 0
-                        : typeof maximumFractionDigits === "number"
-                            ? maximumFractionDigits
-                            : outputCalc && outputCalc.defaultmaximumFractionDigits
-                                ? outputCalc.defaultmaximumFractionDigits
-                                : 2;
-    const toLocalStringConfig = {
-        //maximumSignificantDigits: maximumSignificantDigits,
-        minimumFractionDigits: minimumFractionDigitsCalculated,
-        maximumFractionDigits: maximumFractionDigitsCalculated > minimumFractionDigitsCalculated
-            ? maximumFractionDigitsCalculated
-            : minimumFractionDigitsCalculated,
-    };
-    // Convert to Locale String
-    value = value.toLocaleString(localeStringLanguage, toLocalStringConfig);
-    const calcObject = {
-        value: value,
-        before: before,
-        after: after,
-        output: outputCalc,
-    };
-    let className = props.className;
-    if (value === "1" && afterSingular) {
-        className = className + " wfp--unit--singular";
-    }
-    if ((!value || value === "NaN" || parseFloat(value) === 0) && hideZero)
-        return false;
-    else if (calcOnly)
-        return calcObject;
-    else if (svg)
-        return SvgUnit(calcObject, props);
-    else if (string)
-        return StringUnit(calcObject /*, props*/);
-    else if (value !== false)
-        return jsxRuntimeExports.jsx("span", Object.assign({ className: className }, { children: value }));
-    else
-        return jsxRuntimeExports.jsx(Invalid, { className: props.className });
-};
-
-const percentageCalc = (props, after, before) => {
-    const { calcOnly, children, from, string, svg, hideZero, maximumSignificantDigits, maximumFractionDigits, } = props;
-    // Remove commas
-    var value = typeof children === "string" ? children.replace(/,/g, "") : children;
-    // Parse as float
-    value = parseFloat(value);
-    if (parseFloat(from) === 0) {
-        value = false;
-    }
-    else if (from) {
-        value = (value / parseFloat(from)) * 100;
-    }
-    // Convert to Locale String
-    value = value.toLocaleString("en-EN", {
-        minimumFractionDigits: maximumSignificantDigits
-            ? maximumSignificantDigits
-            : 0,
-        maximumSignificantDigits: maximumSignificantDigits,
-        maximumFractionDigits: value <= 0.5 ? 5 : maximumFractionDigits ? maximumFractionDigits : 1,
-    });
-    const calcObject = {
-        value: value,
-        before: before,
-        after: after,
-        output: undefined,
-    };
-    if ((!value || value === "NaN" || parseFloat(value) === 0) && hideZero)
-        return false;
-    else if (calcOnly)
-        return calcObject;
-    else if (svg)
-        return SvgUnit(calcObject, props);
-    else if (string)
-        return StringUnit(calcObject /*, props*/);
-    else if (value !== false)
-        return jsxRuntimeExports.jsx("span", Object.assign({ className: props.className }, { children: value }));
-    else
-        return jsxRuntimeExports.jsx(Invalid, { className: props.className });
-};
-
-const SimpleCalc = (props, after, before) => {
-    const { calcOnly, className, children, string, svg, hideUnit } = props;
-    // Remove commas
-    const value = children;
-    const afterCalc = after ? after : "";
-    const unit = hideUnit ? "" : before + children + afterCalc;
-    const calcObject = {
-        value: value,
-        before: before,
-        after: after,
-        output: value + unit,
-    };
-    if (calcOnly)
-        return calcObject;
-    else if (svg)
-        return SvgUnit({ value: value + unit, before: before, after: after }, props);
-    else if (string)
-        return StringUnit(calcObject /*, props */);
-    else if (value !== false)
-        return jsxRuntimeExports.jsx("span", Object.assign({ className: className }, { children: value }));
-};
-
-const YearMonthGen = (props) => {
-    const { children } = props;
-    const value = children;
-    let newDate;
-    /* Generate Date from Date */
-    if (typeof value === "number" && value.toString().length >= 7) {
-        newDate = new Date(value, props);
-    }
-    else if (value.getMonth) {
-        /* Use Date Object */
-        newDate = value;
-    }
-    else {
-        /* Generate Date from String YYYYMM */
-        const year = value.toString().substring(0, 4);
-        const month = parseInt(value.toString().substring(4, 7), 10) - 1;
-        newDate = new Date(year, month, 1);
-    }
-    const monthName = newDate.toLocaleString("en-us", { month: "short" });
-    const monthNameFull = newDate.toLocaleString("en-us", { month: "long" });
-    return {
-        monthName: monthName,
-        monthNameFull: monthNameFull,
-        year: newDate.getFullYear(),
-        date: newDate,
-    };
-};
-/*const MonthYearCalcDate = ( value, showZero, showUnit ) => {
-  const year = value.toString().substring(0, 4);
-  const month = parseInt(value.toString().substring(4, 7), 10) - 1;
-  const newDate = new Date(year, month, 1);
-  return newDate
-}*/
-// Format YYYYMM / from 201709  => Sep 2017
-const YearMonthCalc = (props) => {
-    const { className, string, svg, calcOnly } = props;
-    const YearMonthgenerated = YearMonthGen(props);
-    const calcObject = {
-        value: YearMonthgenerated.monthName + " " + YearMonthgenerated.year,
-        before: "",
-        after: "",
-        output: undefined,
-    };
-    if (calcOnly)
-        return calcObject;
-    else if (svg)
-        return SvgUnit(calcObject, props);
-    else if (string)
-        return StringUnit(calcObject /*, props*/);
-    else if (calcObject === null || calcObject === void 0 ? void 0 : calcObject.value)
-        return jsxRuntimeExports.jsx("span", Object.assign({ className: className }, { children: calcObject.value }));
-};
-
-// Generate USD
-const Usd = (props) => {
-    return currencyCalc(props, "", "US$");
-};
-// Generate People
-const People = (props) => {
-    return currencyCalc(props, "People", undefined, true, true);
-};
-// Generate Partners
-const Partners = (props) => {
-    return currencyCalc(props, "Partners", undefined, true, true);
-};
-// Generate MT
-const Mt = (props) => {
-    return currencyCalc(props, "MT", undefined, true);
-};
-// Generate MetricTons
-const MetricTons = (props) => {
-    return currencyCalc(props, "MetricTons", undefined, true);
-};
-// Generate Months
-const Months = (props) => {
-    return currencyCalc(props, "Months", undefined, true, "Month");
-};
-// Generate Num
-const Num = (props) => {
-    return currencyCalc(props, "");
-};
-// Generate Beneficiaries
-const Beneficiaries = (props) => {
-    return currencyCalc(props, "Beneficaries", undefined, true, true);
-};
-// Generate Households
-const Households = (props) => {
-    return currencyCalc(props, "Households", undefined, true, true);
-};
-// Generate Trips
-const Trips = (props) => {
-    return currencyCalc(props, "Trips", undefined, true, true);
-};
-// Generate kg
-const Kg = (props) => {
-    return SimpleCalc(props, "kg");
-};
-// Generate Households
-const Level = (props) => {
-    return SimpleCalc(props, "");
-};
-// Generate Countries
-const Countries = (props) => {
-    return SimpleCalc(props, "Countries");
-};
-// Generate None
-const None = (props) => {
-    return SimpleCalc(props, "");
-};
-// Generate Percentage
-const Percentage = (props) => {
-    return percentageCalc(props, "%");
-};
-// Generate YearMonth
-const YearMonth = (props) => {
-    return YearMonthCalc(props);
-};
-
-const components = {
-    Usd,
-    Partners,
-    Beneficiaries,
-    Households,
-    Months,
-    Mt,
-    Kg,
-    MetricTons,
-    Num,
-    Level,
-    None,
-    Trips,
-    Countries,
-    People,
-    Percentage,
-    YearMonth,
-};
-/** The Unit component method returns a component with a language and unit sensitive representation of this number based on [Numbers and Unit from the Editorial Guidelines](https://cdn.wfp.org/guides/editorial/content/numbers-and-units/) the [Numbers and Units Reference on developer.mozilla.org](http://cdn.wfp.org/guides/editorial/content/numbers-and-units). */
-const Unit = (props) => {
-    const { prefix } = useSettings();
-    const { className, output, string, textAnchor, localeStringLanguage = 'en-EN', type = 'none', setup, } = props;
-    const typeEl = props.type.charAt(0).toUpperCase() + props.type.slice(1);
-    const Unit = components[typeEl];
-    //const unitHideClass = setup && setup.hideUnit ? 'wfp--unit--hide' : '';
-    const textAnchorCalc = textAnchor ? textAnchor : 'start';
-    const unitClassName = type ? `${prefix}--unit--${type.toLowerCase()}` : '';
-    const outputClassName = output && scaleLookup[output] ? `${prefix}--unit--${output}` : '';
-    const setupClassName = setup ? `${prefix}--unit--${setup}` : '';
-    const classNameCalc = `${prefix}--unit ${className} ${unitClassName} ${outputClassName} ${setupClassName}`;
-    if (string) {
-        return Unit(props);
-    }
-    if (Unit === undefined) {
-        //  console.warn(`The unit "${type}" is undefined`);
-        return null;
-    }
-    return (jsxRuntimeExports.jsx(Unit, Object.assign({}, props, { className: classNameCalc, textAnchor: textAnchorCalc, localeStringLanguage: localeStringLanguage })));
-};
-
-const Value = (_a) => {
-    var { value, secondaryValue, className, title } = _a, other = __rest(_a, ["value", "secondaryValue", "className", "title"]);
-    const { prefix } = useSettings();
-    const classes = classNames__default["default"](`${prefix}--value`, className);
-    return (jsxRuntimeExports.jsxs("div", Object.assign({ className: classes }, other, { children: [jsxRuntimeExports.jsx("h4", Object.assign({ className: `${prefix}--value__title` }, { children: title })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--value__primary-value` }, { children: value })), jsxRuntimeExports.jsx("div", Object.assign({ className: `${prefix}--value__secondary-value` }, { children: secondaryValue }))] })));
-};
-
-// Passes settings down to children, primarily useful for class components
-// that can't consume the useSettings hook. Props passed to the underlying
-// component can be used to override settings values
-const withWFPCoreSettings = (WrappedComponent) => (props) => {
-    const settings = useSettings();
-    const allProps = Object.assign(Object.assign({}, settings), props);
-    return jsxRuntimeExports.jsx(WrappedComponent, Object.assign({}, allProps));
-};
-
-function useTheme() {
-    const settings = React.useContext(WFPCoreContext);
-    return settings;
-}
-
-const SkeletonText = (_a) => {
-    var { paragraph = false, lineCount = 3, width = '100%', heading = false, className } = _a, other = __rest(_a, ["paragraph", "lineCount", "width", "heading", "className"]);
-    const { prefix } = useSettings();
-    const skeletonTextClasses = classNames__default["default"]({
-        [`${prefix}--skeleton__text`]: true,
-        [`${prefix}--skeleton__heading`]: heading,
-    }, className);
-    const widthNum = typeof width === 'string' ? parseInt(width, 10) : width;
-    const widthPx = typeof width === 'string' && width.includes('px');
-    const widthPercent = typeof width === 'string' && width.includes('%');
-    function getRandomInt(min, max) {
-        return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-    if (widthPercent && paragraph) {
-        const lines = [];
-        for (let i = 0; i < lineCount; i++) {
-            const randomWidth = getRandomInt(0, 75) + 'px';
-            lines.push(jsxRuntimeExports.jsx("p", Object.assign({ className: skeletonTextClasses, style: { width: `calc(${width} - ${randomWidth})` } }, other), i));
-        }
-        return jsxRuntimeExports.jsx("div", { children: lines });
-    }
-    if (widthPx && paragraph) {
-        const lines = [];
-        for (let j = 0; j < lineCount; j++) {
-            const randomWidth = getRandomInt(widthNum - 75, widthNum) + 'px';
-            lines.push(jsxRuntimeExports.jsx("p", Object.assign({ className: skeletonTextClasses, style: { width: randomWidth } }, other), j));
-        }
-        return jsxRuntimeExports.jsx("div", { children: lines });
-    }
-    return (jsxRuntimeExports.jsx("p", Object.assign({ className: skeletonTextClasses, style: { width: width } }, other)));
-};
-SkeletonText.displayName = 'SkeletonText';
-
-var colors = {
-  main: {
-    name: "main",
-    hex: "#007DBC",
-    // previously 0A6EB4
-    scss: "$color__main",
-    type: "communications"
-  },
-  "sequential-default-07": {
-    name: "sequential-default-07",
-    hex: "#9DEAFF",
-    scss: "$color__sequential-default-07",
-    type: "sequential-default",
-    shortDescription: "sequential default 07"
-  },
-  "sequential-default-06": {
-    name: "sequential-default-06",
-    hex: "#73C3FE",
-    scss: "$color__sequential-default-06",
-    type: "sequential-default",
-    shortDescription: "sequential default 06"
-  },
-  "sequential-default-05": {
-    name: "sequential-default-05",
-    hex: "#4AA1E2",
-    scss: "$color__sequential-default-05",
-    type: "sequential-default",
-    shortDescription: "sequential default 05"
-  },
-  "sequential-default-04": {
-    name: "sequential-default-04",
-    hex: "#0780C0",
-    scss: "$color__sequential-default-04",
-    type: "sequential-default",
-    shortDescription: "sequential default 04"
-  },
-  "sequential-default-03": {
-    name: "sequential-default-03",
-    hex: "#005F9B",
-    scss: "$color__sequential-default-03",
-    type: "sequential-default",
-    shortDescription: "sequential default 03"
-  },
-  "sequential-default-02": {
-    name: "sequential-default-02",
-    hex: "#003F76",
-    scss: "$color__sequential-default-02",
-    type: "sequential-default",
-    shortDescription: "sequential default 02"
-  },
-  "sequential-default-01": {
-    name: "sequential-default-01",
-    hex: "#002153",
-    scss: "$color__sequential-default-01",
-    type: "sequential-default",
-    shortDescription: "sequential default 01"
-  },
-  "sequential-secondary-07": {
-    name: "sequential-secondary-07",
-    hex: "#bdf9c4",
-    scss: "$color__sequential-secondary-07",
-    type: "sequential-secondary",
-    shortDescription: "sequential secondary 07"
-  },
-  "sequential-secondary-06": {
-    name: "sequential-secondary-06",
-    hex: "#89eaa8",
-    scss: "$color__sequential-secondary-06",
-    type: "sequential-secondary",
-    shortDescription: "sequential secondary 06"
-  },
-  "sequential-secondary-05": {
-    name: "sequential-secondary-05",
-    hex: "#5fd79a",
-    scss: "$color__sequential-secondary-05",
-    type: "sequential-secondary",
-    shortDescription: "sequential secondary 05"
-  },
-  "sequential-secondary-04": {
-    name: "sequential-secondary-04",
-    hex: "#41c196",
-    scss: "$color__sequential-secondary-04",
-    type: "sequential-secondary",
-    shortDescription: "sequential secondary 04"
-  },
-  "sequential-secondary-03": {
-    name: "sequential-secondary-03",
-    hex: "#33aa96",
-    scss: "$color__sequential-secondary-03",
-    type: "sequential-secondary",
-    shortDescription: "sequential secondary 03"
-  },
-  "sequential-secondary-02": {
-    name: "sequential-secondary-02",
-    hex: "#319298",
-    scss: "$color__sequential-secondary-02",
-    type: "sequential-secondary",
-    shortDescription: "sequential secondary 02"
-  },
-  "sequential-secondary-01": {
-    name: "sequential-secondary-01",
-    hex: "#367a96",
-    scss: "$color__sequential-secondary-01",
-    type: "sequential-secondary",
-    shortDescription: "sequential secondary 01"
-  },
-  "categorical-corporate-01": {
-    name: "categorical-01",
-    hex: "#007DBC",
-    scss: "$color__categorical-corporate-01",
-    type: "categorical",
-    shortDescription: "categorical-01"
-  },
-  "categorical-corporate-02": {
-    name: "categorical-02",
-    hex: "#36B5C5",
-    scss: "$color__categorical-corporate-02",
-    type: "categorical",
-    shortDescription: "categorical-02"
-  },
-  "categorical-corporate-03": {
-    name: "categorical-03",
-    hex: "#00B485",
-    scss: "$color__categorical-corporate-03",
-    type: "categorical",
-    shortDescription: "categorical-03"
-  },
-  "categorical-corporate-04": {
-    name: "categorical-04",
-    hex: "#008868",
-    scss: "$color__categorical-corporate-04",
-    type: "categorical",
-    shortDescription: "categorical-04"
-  },
-  "categorical-corporate-05": {
-    name: "categorical-05",
-    hex: "#1A4262",
-    scss: "$color__categorical-corporate-05",
-    type: "categorical",
-    shortDescription: "categorical-05"
-  },
-  "categorical-corporate-06": {
-    name: "categorical-06",
-    hex: "#982B56",
-    scss: "$color__categorical-corporate-06",
-    type: "categorical",
-    shortDescription: "categorical-06"
-  },
-  "categorical-corporate-07": {
-    name: "categorical-07",
-    hex: "#EF404C",
-    scss: "$color__categorical-corporate-07",
-    type: "categorical",
-    shortDescription: "categorical-07"
-  },
-  "categorical-corporate-08": {
-    name: "categorical-08",
-    hex: "#F47847",
-    scss: "$color__categorical-corporate-08",
-    type: "categorical",
-    shortDescription: "categorical-08"
-  },
-  "categorical-corporate-09": {
-    name: "categorical-09",
-    hex: "#B79F8D",
-    scss: "$color__categorical-corporate-09",
-    type: "categorical",
-    shortDescription: "categorical-09"
-  },
-  "categorical-corporate-10": {
-    name: "categorical-10",
-    hex: "#ECDFBB",
-    scss: "$color__categorical-corporate-10",
-    type: "categorical",
-    shortDescription: "categorical-10"
-  },
-  female: {
-    name: "female",
-    hex: "#3f7e44",
-    scss: "$color__female",
-    type: "symbolic",
-    shortDescription: "Indicate female"
-  },
-  male: {
-    name: "male",
-    hex: "#26bde2",
-    scss: "$color__male",
-    type: "symbolic",
-    shortDescription: "Indicate male"
-  },
-  national: {
-    name: "national",
-    hex: "#3C5979",
-    scss: "$color__national",
-    type: "symbolic",
-    shortDescription: "Indicate national staff"
-  },
-  international: {
-    name: "international",
-    hex: "#fcc30b",
-    scss: "$color__international",
-    type: "symbolic",
-    shortDescription: "Indicate international staff"
-  },
-  "brand-01": {
-    name: "brand-01",
-    hex: "#007DBC",
-    //previously 0A6EB4
-    scss: "var(--brand-01)",
-    css: "color__brand-01",
-    type: "brand",
-    shortDescription: "WFP brand color"
-  },
-  "interactive-01": {
-    name: "interactive-01",
-    hex: "#0b77c2",
-    scss: "var(--interactive-01)",
-    css: "color__interactive-01",
-    type: "brand",
-    shortDescription: "Primary interactive color, Primary buttons"
-  },
-  "interactive-02": {
-    name: "interactive-02",
-    hex: "#085387",
-    scss: "$action-default-fill-primary-default-02",
-    css: "color__interactive-02",
-    type: "brand",
-    shortDescription: "BannerNavigation"
-  },
-  "accent-01": {
-    name: "accent-01",
-    hex: "#f7b825",
-    scss: "$accent-01",
-    css: "color__accent-01",
-    type: "brand-accent",
-    //replaced type brand to brand-accent to prevent it from showing it
-    shortDescription: "Accent colour (recommended)"
-  },
-  "brand-01-20": {
-    name: "brand-01-20",
-    hex: "#c2dbec",
-    scss: "$brand-01-20",
-    css: "color__brand-01-20",
-    type: "brand-extended"
-  },
-  "brand-01-30": {
-    name: "brand-01-30",
-    hex: "#85b7da",
-    scss: "$brand-01-30",
-    css: "color__brand-01-30",
-    type: "brand-extended"
-  },
-  "brand-01-40": {
-    name: "brand-01-40",
-    hex: "#4792c7",
-    scss: "$brand-01-40",
-    css: "color__brand-01-40",
-    type: "brand-extended"
-  },
-  "brand-01-60": {
-    name: "brand-01-60",
-    hex: "#085387",
-    scss: "$brand-01-60",
-    css: "color__brand-01-60",
-    type: "brand-extended"
-  },
-  "brand-01-70": {
-    name: "brand-01-70",
-    hex: "#05375a",
-    scss: "$brand-01-70",
-    css: "color__brand-01-70",
-    type: "brand-extended"
-  },
-  "brand-01-80": {
-    name: "brand-01-80",
-    hex: "#031c2d",
-    scss: "$brand-01-80",
-    css: "color__brand-01-80",
-    type: "brand-extended"
-  },
-  "ui-01": {
-    name: "ui-01",
-    hex: "#ffffff",
-    scss: "$ui-01",
-    css: "color__ui-01",
-    type: "ui",
-    shortDescription: "Primary container background; Secondary page background",
-    description: "This colour is used as the page background if there are no Modules on top of it."
-  },
-  "ui-02": {
-    name: "ui-02",
-    hex: "#eff2f5",
-    scss: "var(--ui-02)",
-    css: "color__ui-02",
-    type: "ui",
-    shortDescription: "Primary page background; Secondary container background",
-    description: "Use this colour as page background if there are modules on top of it to increase the contrast between the modules."
-  },
-  "ui-03": {
-    name: "ui-03",
-    hex: "#f0f3f6",
-    scss: "$ui-03",
-    css: "color__ui-03",
-    type: "ui",
-    shortDescription: "Subtle border, Tertiary background color"
-  },
-  "ui-04": {
-    name: "ui-04",
-    hex: "#dfe3e6",
-    scss: "$ui-04",
-    css: "color__ui-04",
-    type: "ui",
-    shortDescription: "3:1 AA element contrast; Medium contrast border"
-  },
-  "ui-05": {
-    name: "ui-05",
-    hex: "#8c9ba5",
-    scss: "$ui-03",
-    css: "color__ui-05",
-    type: "ui",
-    shortDescription: "4.5:1 AA element contrast; High contrast border; Emphasis elements"
-  },
-  "ui-06": {
-    name: "ui-06",
-    hex: "#0b1923",
-    scss: "$ui-06",
-    css: "color__ui-06",
-    type: "ui",
-    shortDescription: ""
-  },
-  "text-01": {
-    name: "text-01",
-    hex: "#031c2d",
-    scss: "$text-01",
-    css: "color__text-01",
-    type: "ui",
-    shortDescription: "Primary text colour; Input labels;"
-  },
-  "text-02": {
-    name: "text-02",
-    hex: "#5a6872",
-    scss: "$text-02",
-    css: "color__text-02",
-    type: "ui",
-    shortDescription: "Secondary text; Help text"
-  },
-  "text-03": {
-    name: "text-03",
-    hex: "#dfe6eb",
-    scss: "$text-03",
-    css: "color__text-03",
-    type: "ui",
-    shortDescription: "Placeholder text"
-  },
-  "text-04": {
-    name: "text-04",
-    hex: "#ffffff",
-    scss: "$text-04",
-    css: "color__text-04",
-    type: "ui",
-    shortDescription: ""
-  },
-  "inverse-01": {
-    name: "inverse-01",
-    hex: "#ffffff",
-    scss: "$inverse-01",
-    css: "color__inverse-01",
-    type: "ui",
-    shortDescription: "Inverse text color; Inverse icon color"
-  },
-  // 'inverse-02': {
-  //   name: 'inverse-02',
-  //   hex: '#f0f3f6',
-  //   scss: '$inverse-02',
-  //   css: 'color__inverse-02',
-  //   type: 'ui',
-  //   shortDescription: 'High contrast backgrounds; High contrast elements',
-  // },
-  "field-01": {
-    name: "field-01",
-    hex: "#ffffff",
-    scss: "$field-02",
-    css: "color__field-01",
-    type: "ui",
-    shortDescription: "Default input fields; Fields on $ui-backgrounds"
-  },
-  /*'field-02': {
-    name: 'field-02',
-    hex: '#fbfcfc',
-    scss: '$field-02',
-    css: 'color__field-02',
-    type: 'ui',
-  },*/
-  "field-border-01": {
-    name: "field-border-01",
-    hex: "#d4d7d9",
-    scss: "$field-border-01",
-    css: "color__field-border-01",
-    type: "ui",
-    shortDescription: ""
-  },
-  "disabled-01": {
-    name: "disabled-01",
-    hex: "#f9fbfc",
-    scss: "$disabled-01",
-    css: "color__disabled-01",
-    type: "ui",
-    shortDescription: ""
-  },
-  "disabled-02": {
-    name: "disabled-02",
-    hex: "#dfe6eb",
-    scss: "$disabled-02",
-    css: "color__disabled-02",
-    type: "ui",
-    shortDescription: ""
-  },
-  "sdg-01": {
-    name: "sdg-01",
-    hex: "#E5243B",
-    scss: "$sdg-01",
-    css: "color__sdg-01",
-    type: "sdg",
-    shortDescription: "No poverty, red"
-  },
-  "sdg-02": {
-    name: "sdg-02",
-    hex: "#DDA63A",
-    scss: "$sdg-02",
-    css: "color__sdg-02",
-    type: "sdg",
-    shortDescription: "Zero hunger, mustard"
-  },
-  "sdg-03": {
-    name: "sdg-03",
-    hex: "#4C9F38",
-    scss: "$sdg-03",
-    css: "color__sdg-03",
-    type: "sdg",
-    shortDescription: "Good health and well-being, kelly green"
-  },
-  "sdg-04": {
-    name: "sdg-04",
-    hex: "#C5192D",
-    scss: "$sdg-04",
-    css: "color__sdg-04",
-    type: "sdg",
-    shortDescription: "Quality education, dark red"
-  },
-  "sdg-05": {
-    name: "sdg-05",
-    hex: "#FF3A21",
-    scss: "$sdg-05",
-    css: "color__sdg-05",
-    type: "sdg",
-    shortDescription: "Gender equality, red orange"
-  },
-  "sdg-06": {
-    name: "sdg-06",
-    hex: "#26BDE2",
-    scss: "$sdg-06",
-    css: "color__sdg-06",
-    type: "sdg",
-    shortDescription: "Clean water and sanitation, bright blue"
-  },
-  "sdg-07": {
-    name: "sdg-07",
-    hex: "#FCC30B",
-    scss: "$sdg-07",
-    css: "color__sdg-07",
-    type: "sdg",
-    shortDescription: "Affordable and clean energy, yellow"
-  },
-  "sdg-08": {
-    name: "sdg-08",
-    hex: "#A21942",
-    scss: "$sdg-08",
-    css: "color__sdg-08",
-    type: "sdg",
-    shortDescription: "Decent work and economic growth, burgundy red"
-  },
-  "sdg-09": {
-    name: "sdg-09",
-    hex: "#FD6925",
-    scss: "$sdg-09",
-    css: "color__sdg-09",
-    type: "sdg",
-    shortDescription: "Industry, innovation and infrastructure, orange"
-  },
-  "sdg-10": {
-    name: "sdg-10",
-    hex: "#DD1367",
-    scss: "$sdg-10",
-    css: "color__sdg-10",
-    type: "sdg",
-    shortDescription: "Reduced inequalities, magentas"
-  },
-  "sdg-11": {
-    name: "sdg-11",
-    hex: "#FD9D24",
-    scss: "$sdg-11",
-    css: "color__sdg-11",
-    type: "sdg",
-    shortDescription: "Sustainable cities and communities, golden yellow"
-  },
-  "sdg-12": {
-    name: "sdg-12",
-    hex: "#BF8B2E",
-    scss: "$sdg-12",
-    css: "color__sdg-12",
-    type: "sdg",
-    shortDescription: "Responsible consumption and production, dark mustard"
-  },
-  "sdg-13": {
-    name: "sdg-13",
-    hex: "#3F7E44",
-    scss: "$sdg-10",
-    css: "color__sdg-13",
-    type: "sdg",
-    shortDescription: "Climate action, dark green"
-  },
-  "sdg-14": {
-    name: "sdg-14",
-    hex: "#0A97D9",
-    scss: "$sdg-14",
-    css: "color__sdg-14",
-    type: "sdg",
-    shortDescription: "Life below water, blue"
-  },
-  "sdg-15": {
-    name: "sdg-15",
-    hex: "#56C02B",
-    scss: "$sdg-15",
-    css: "color__sdg-15",
-    type: "sdg",
-    shortDescription: "Life on land, lime green"
-  },
-  "sdg-16": {
-    name: "sdg-16",
-    hex: "#00689D",
-    scss: "$sdg-16",
-    css: "color__sdg-16",
-    type: "sdg",
-    shortDescription: "Peace, justice and stron institutions, royal blue"
-  },
-  "sdg-17": {
-    name: "sdg-17",
-    hex: "#19486A",
-    scss: "$sdg-17",
-    css: "color__sdg-17",
-    type: "sdg",
-    shortDescription: "Partnership for the goals, navy blue"
-  },
-  "support-01": {
-    name: "support-01",
-    hex: "#c5192d",
-    scss: "$support-01",
-    css: "color__support-01",
-    type: "support",
-    shortDescription: "Error (same as color__red)",
-    description: "Use the error color to indicate an error or to focus the attention on something which is crucial to see. Paired with a cross icon, red delivers the message that something went wrong."
-  },
-  "support-light-01": {
-    name: "support-light-01",
-    hex: "#f1c6cb",
-    scss: "$support-light-01",
-    css: "color__support-light-01",
-    type: "support",
-    shortDescription: "Lighter version of color-red",
-    description: ""
-  },
-  "support-02": {
-    name: "support-02",
-    hex: "#689e18",
-    scss: "$support-02",
-    css: "color__support-02",
-    type: "support",
-    shortDescription: "Success",
-    description: "Use green to indicate success state. Paired with a checkmark icon the user knows that the operation was successfully completed."
-  },
-  "support-light-02": {
-    name: "support-light-02",
-    hex: "#ccdbcd",
-    scss: "$support-light-02",
-    css: "color__support-light-02",
-    type: "support",
-    shortDescription: "Lighter version of green",
-    description: ""
-  },
-  "support-03": {
-    name: "support-03",
-    hex: "#f7b825",
-    scss: "$support-03",
-    css: "color__support-03",
-    type: "support",
-    shortDescription: "Warning (same as color__yellow)",
-    description: "Use yellow to indicate a transient warning which is less important than an error message. Yellow typically consists of items which require the user’s immediate attention, or indicate a waiting period. Although this overlaps with the use of red, yellow is more transient in nature."
-  },
-  "support-light-03": {
-    name: "support-light-03",
-    hex: "#fdedc9",
-    scss: "$support-light-03",
-    css: "color__support-light-03",
-    type: "support",
-    shortDescription: "Lighter version of yellow",
-    description: ""
-  },
-  "support-04": {
-    name: "support-04",
-    hex: "#85b7da",
-    scss: "$support-04",
-    css: "color__support-04",
-    type: "support",
-    shortDescription: "Info",
-    description: ""
-  },
-  "support-light-04": {
-    name: "support-light-04",
-    hex: "#c2dbec",
-    scss: "$support-light-04",
-    css: "color__support-light-04",
-    type: "support",
-    shortDescription: "",
-    description: ""
-  }
-};
-
-// main: {
-//   name: 'main',
-//   hex: '#0A6EB4',
-//   scss: '$color__main',
-//   type: 'communications',
-// },
-// navy: {
-//   name: 'navy',
-//   hex: '#19486a',
-//   scss: '$color__navy',
-//   // shortDescription: 'Same as SDG 17',
-//   shortDescription: '',
-//   type: 'communications',
-// },
-// aqua: {
-//   name: 'aqua',
-//   hex: '#26bde2',
-//   // shortDescription: 'Same as SDG 6',
-//   shortDescription: '',
-//   scss: '$color__aqua',
-//   type: 'communications',
-// },
-// 'dark-green': {
-//   name: 'dark-green',
-//   hex: '#3f7e44',
-//   // shortDescription: 'Same as SDG 13',
-//   shortDescription: '',
-//   scss: '$color__dark-green',
-//   type: 'communications',
-// },
-// lime: {
-//   name: 'lime',
-//   hex: '#97d700',
-//   scss: '$color__lime',
-//   type: 'communications',
-// },
-// yellow: {
-//   name: 'yellow',
-//   hex: '#fcc30b',
-//   // shortDescription: 'Same as SDG 7',
-//   shortDescription: '',
-//   scss: '$color__yellow',
-//   type: 'communications',
-// },
-// ochre: {
-//   name: 'ochre',
-//   hex: '#dda63a',
-//   // shortDescription: 'Same as SDG 2',
-//   shortDescription: '',
-//   scss: '$color__ochre',
-//   type: 'communications',
-// },
-// orange: {
-//   name: 'orange',
-//   hex: '#fd6925',
-//   // shortDescription: 'Same as SDG 9',
-//   shortDescription: '',
-//   scss: '$color__orange',
-//   type: 'communications',
-// },
-// red: {
-//   name: 'red',
-//   hex: '#c5192d',
-//   // shortDescription: 'Same as SDG 1',
-//   shortDescription: '',
-//   scss: '$color__red',
-//   type: 'communications',
-// },
-// 'dark-red': {
-//   name: 'dark-red',
-//   hex: '#a21942',
-//   // shortDescription: 'Same as SDG 8',
-//   shortDescription: '',
-//   scss: '$color__dark-red',
-//   type: 'communications',
-// },
-// magenta: {
-//   name: 'magenta',
-//   hex: '#dd1367',
-//   // shortDescription: 'Same as SDG 10',
-//   shortDescription: '',
-//   scss: '$color__magenta',
-//   type: 'communications',
-// },
-
-/**
- * Custom hook for using either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
- * @param {Function} effect - The effect function to be executed.
- * @param {Array<any>} [dependencies] - An array of dependencies for the effect (optional).
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect)
- * @example
- * useIsomorphicLayoutEffect(() => {
- *   // Code to be executed during the layout phase on the client side
- * }, [dependency1, dependency2]);
- */
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-
-const IS_SERVER = typeof window === "undefined";
-/**
- * Custom hook for tracking the state of a media query.
- * @param {string} query - The media query to track.
- * @param {boolean | ?UseMediaQueryOptions} [options] - The default value to return if the hook is being run on the server (default is `false`).
- * @param {?boolean} [options.defaultValue] - The default value to return if the hook is being run on the server (default is `false`).
- * @param {?boolean} [options.initializeWithValue] - If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
- * @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-media-query)
- * @see [MDN Match Media](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
- * @example
- * const isSmallScreen = useMediaQuery('(max-width: 600px)');
- * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
- */
-function useMediaQuery(query, options) {
-    var _a, _b;
-    // TODO: Refactor this code after the deprecated signature has been removed.
-    const defaultValue = typeof options === "boolean" ? options : (_a = options === null || options === void 0 ? void 0 : options.defaultValue) !== null && _a !== void 0 ? _a : false;
-    const initializeWithValue = typeof options === "boolean"
-        ? undefined
-        : (_b = options === null || options === void 0 ? void 0 : options.initializeWithValue) !== null && _b !== void 0 ? _b : undefined;
-    const getMatches = (query) => {
-        if (IS_SERVER) {
-            return defaultValue;
-        }
-        return window.matchMedia(query).matches;
-    };
-    const [matches, setMatches] = React.useState(() => {
-        if (initializeWithValue) {
-            return getMatches(query);
-        }
-        return defaultValue;
-    });
-    /** Handles the change event of the media query. */
-    function handleChange() {
-        setMatches(getMatches(query));
-    }
-    useIsomorphicLayoutEffect(() => {
-        const matchMedia = window.matchMedia(query);
-        // Triggered at the first client-side load and if query changes
-        handleChange();
-        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-        if (matchMedia.addListener) {
-            matchMedia.addListener(handleChange);
-        }
-        else {
-            matchMedia.addEventListener("change", handleChange);
-        }
-        return () => {
-            if (matchMedia.removeListener) {
-                matchMedia.removeListener(handleChange);
-            }
-            else {
-                matchMedia.removeEventListener("change", handleChange);
-            }
-        };
-    }, [query]);
-    return matches;
-}
-
-exports.Accordion = Accordion;
-exports.AccordionItem = AccordionItem;
-exports.AddonAfter = AddonAfter;
-exports.AddonBefore = AddonBefore;
-exports.AuthLayout = AuthLayout;
-exports.Avatar = Avatar;
-exports.BackgroundContent = BackgroundContent;
-exports.BannerNavigation = BannerNavigation;
-exports.BannerNavigationItem = BannerNavigationItem;
-exports.BannerNavigationWithContent = BannerNavigationWithContent;
-exports.BlockNotification = Callout;
-exports.Breadcrumb = Breadcrumb;
-exports.BreadcrumbHome = BreadcrumbHome;
-exports.BreadcrumbItem = BreadcrumbItem;
-exports.Button = Button;
-exports.Callout = Callout;
-exports.Card = Card;
-exports.CardExternal = CardExternal;
-exports.Checkbox = Checkbox;
-exports.ContentSwitcher = ContentSwitcher;
-exports.ContextMenu = ContextMenu;
-exports.ContextMenuGroup = ContextMenuGroup;
-exports.ContextMenuItem = ContextMenuItem;
-exports.Credits = Credits;
-exports.DatePicker = DatePicker;
-exports.DatePickerInput = DatePickerInput;
-exports.DateRangePicker = DateRangePicker;
-exports.DateRangePickerInput = DateRangePickerInput;
-exports.Empty = Empty;
-exports.Footer = Footer;
-exports.FooterExternal = FooterExternal;
-exports.FooterMetaLink = FooterMetaLink;
-exports.Form = Form;
-exports.FormGroup = FormGroup;
-exports.FormHint = FormHint;
-exports.FormItem = FormItem;
-exports.FormLabel = FormLabel;
-exports.Helper = Helper;
-exports.Hero = Hero;
-exports.HeroExternal = HeroExternal;
-exports.InfoBar = InfoBar;
-exports.InlineErrorMessage = InlineErrorMessage;
-exports.InlineLoading = InlineLoading;
-exports.Input = Input;
-exports.InputGroup = InputGroup;
-exports.Item = Item;
-exports.Label = Label;
-exports.Link = Link;
-exports.LinksColumn = LinksColumn;
-exports.List = List;
-exports.ListItem = ListItem;
-exports.Loading = Loading;
-exports.MainNavigation = MainNavigation;
-exports.MainNavigationContext = MainNavigationContext;
-exports.MainNavigationItem = MainNavigationItem;
-exports.Modal = Modal;
-exports.ModalFooter = ModalFooter;
-exports.ModalWrapper = ModalWrapper;
-exports.Module = Module;
-exports.ModuleBody = ModuleBody;
-exports.ModuleFooter = ModuleFooter;
-exports.ModuleHeader = ModuleHeader;
-exports.NotificationActionButton = NotificationActionButton;
-exports.NotificationButton = NotificationButton;
-exports.NotificationTextDetails = NotificationTextDetails;
-exports.NumberInput = NumberInput;
-exports.Pagination = Pagination;
-exports.RadioButton = RadioButton;
-exports.ReadMore = ReadMore;
-exports.Search = Search;
-exports.SecondaryNavigation = SecondaryNavigation;
-exports.SecondaryNavigationTitle = SecondaryNavigationTitle;
-exports.Select = Select;
-exports.SelectItem = SelectItem;
-exports.SelectItemGroup = SelectItemGroup;
-exports.Sidebar = Sidebar;
-exports.SidebarBackButton = SidebarBackButton;
-exports.SidebarContentBody = SidebarContentBody;
-exports.SidebarContentHeader = SidebarContentHeader;
-exports.SidebarHeader = SidebarHeader;
-exports.SidebarScroll = SidebarScroll;
-exports.SkeletonText = SkeletonText;
-exports.Slider = Slider;
-exports.StepNavigation = StepNavigation;
-exports.StepNavigationItem = StepNavigationItem;
-exports.Story = Story;
-exports.SubNavigation = SubNavigation;
-exports.SubNavigationContent = SubNavigationContent;
-exports.SubNavigationFilter = SubNavigationFilter;
-exports.SubNavigationGroup = SubNavigationGroup;
-exports.SubNavigationHeader = SubNavigationHeader;
-exports.SubNavigationItem = SubNavigationItem;
-exports.SubNavigationLink = SubNavigationLink;
-exports.SubNavigationList = SubNavigationList;
-exports.SubNavigationTitle = SubNavigationTitle;
-exports.Tab = Tab;
-exports.TabContent = TabContent;
-exports.Table = Table;
-exports.TablePagination = ReactTablePagination;
-exports.TableSorting = TableSorting$1;
-exports.Tabs = Tabs;
-exports.Tag = Tag;
-exports.Text = Text;
-exports.TextArea = TextArea;
-exports.TextInput = TextInput;
-exports.ToastNotification = ToastNotification;
-exports.Toggle = Toggle;
-exports.Tooltip = Tooltip;
-exports.Unit = Unit;
-exports.User = User;
-exports.Value = Value;
-exports.WFPCoreContext = WFPCoreContext;
-exports.WFPCoreProvider = WFPCoreProvider;
-exports.Wrapper = Wrapper;
-exports.buttonKinds = buttonKinds;
-exports.colors = colors;
-exports.defaultWFPContext = settings;
-exports.mdxComponents = mdxComponents;
-exports.notificationtypes = notificationtypes;
-exports.pageWidths = pageWidths;
-exports.tooltipStyle = tooltipStyle;
-exports.tooltipStyleDark = tooltipStyleDark;
-exports.uniqueId = uniqueId;
-exports.useInput = useInput;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
-exports.useMainNavigation = useMainNavigation;
-exports.useMediaQuery = useMediaQuery;
-exports.useTab = useTab;
-exports.useTheme = useTheme;
-exports.withWFPCoreSettings = withWFPCoreSettings;