@progressiveui/react 2.0.3 → 2.0.4

package/umd/index.js

@@ -1,4387 +0,0 @@
-/*
-    * WFP Design System React.js
-    */
-   'use client';
-import * as React from 'react';
-import React__default, { createContext, useState, useEffect, useContext, useId, useLayoutEffect, useRef, useMemo, useCallback } from 'react';
-import { useTransitionMap } from 'react-transition-state';
-import { ChevronDown, WarningSolid, Search as Search$1, Close, User as User$1, Home, CalendarAltRegular, ArrowRight, Twitter, Facebook, Instagram, LinkedIn, YouTube, TikTok, InfoSolid, Cross, Check, Error as Error$1, CheckmarkCircle, InfoCircle, CaretDown, CaretUp, ChevronLeft, ChevronRight, ChevronUp, Ellipsis, WarningOutline, Locked, OverflowMenu, Checkmark, Menu } from '@progressiveui/icons-react';
-import classNames from 'classnames';
-import PropTypes, { oneOf } from 'prop-types';
-import ReactDOM from 'react-dom';
-import { usePopperTooltip } from 'react-popper-tooltip';
-
-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_development = {};
-
-var hasRequiredReactJsxRuntime_development;
-function requireReactJsxRuntime_development() {
-  if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-  hasRequiredReactJsxRuntime_development = 1;
-  (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,
-      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;
-}
-
-{
-  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 = 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 = 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.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.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 = 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] = useState(getDefaultTheme());
-    const [actualThemeState, setActualThemeState] = useState(getActualTheme());
-    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 = 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] = useState();
-    useEffect(() => setId(++current), []);
-    return (id && `${ACCORDION_PREFIX}-${id}`);
-};
-const _useId = 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'
-    ? useLayoutEffect
-    : 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] = useState();
-    const elementRef = 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 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 = useContext(AccordionContext);
-    if (!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 = 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;
-    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: useCallback((toEnter) => toggle(key, toEnter), [toggle, key]),
-    };
-};
-
-const withAccordionItem = (WrappedItem //TODO: MemoExoticComponent<(props: ItemStateProps<E, T>) => JSX.Element>
-) => {
-    const WithAccordionItem = React.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.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(`${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(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(`${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({
-        [`${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(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(`${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(`${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(`${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(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(`${prefix}--label`, {
-        // [`${prefix}--input--light`]: light,
-        [`${prefix}--visually-hidden`]: hideLabel || !labelText,
-        [`${prefix}--label--disabled`]: other.disabled,
-    });
-    const inputWrapperClasses = classNames(`${prefix}--input-wrapper`, { [`${prefix}--form-item--invalid`]: invalid }, inputWrapperClassName);
-    const helperTextClasses = classNames(`${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(`${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.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.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, 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(`${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({
-        "wfp--search-close": true,
-        "wfp--search-close--hidden": !value,
-    });
-    const searchInputClassName = classNames(`${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(Search$1, { 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(Close, { description: closeButtonLabelText }) }))] })));
-});
-Search.displayName = "Search";
-
-const Link = React.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(`${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.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(`${prefix}--avatar`, `${prefix}--avatar--empty`, `${prefix}--avatar--missing`, className);
-        return (jsxRuntimeExports.jsx(User$1, Object.assign({ fill: "#ffffff", description: alt, className: classes }, userIconProps, other)));
-    }
-    else if (image === undefined && missingImage === "letter") {
-        const classes = classNames(`${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(`${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(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.cloneElement(React__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(`${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(`${prefix}--breadcrumb-home`, className);
-    return (jsxRuntimeExports.jsx(Home
-    //icon={iconHome}
-    , Object.assign({ 
-        //icon={iconHome}
-        fill: "#0b77c2", width: "14", height: "14", description: hometext, className: classes }, other)));
-};
-
-const Button = React.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] = useState(false);
-    useEffect(() => {
-        const timer = setTimeout(() => endAnimation(), 500);
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [count]);
-    const buttonClasses = classNames(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.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: 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({
-        [`${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(`${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.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(`${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([`${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(`${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 = useRef(null);
-    const supportiveTextFontSize = 14;
-    const supportiveTextLineHeight = 1.5;
-    // Set a maximum of 3 lines of supportive text by default
-    const [supportiveTextHeight, setsupportiveTextHeight] = useState(supportiveTextFontSize * supportiveTextLineHeight * 3);
-    // statusStyle apply different style(color, backgroundColor) based on its active state
-    const statusStyle = labelStatus ? `success` : `neutral`;
-    const wrapperClasses = classNames(`${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.
-     *
-     */
-    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.string,
-    /**
-     labelStatus is either true or false, it applies  for card if any
-    */
-    labelStatus: PropTypes.bool,
-    image: PropTypes.string,
-    heading: PropTypes.string,
-    subHeading: PropTypes.string,
-    caption: PropTypes.string,
-    tag: PropTypes.string,
-    children: PropTypes.node,
-    interactive: PropTypes.bool,
-    className: PropTypes.string,
-};
-
-const DatePickerInput = React.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(CalendarAltRegular, { className: `${prefix}--date-picker__icon` })] })) })));
-});
-DatePickerInput.displayName = "DatePickerInput";
-
-const DatePicker = React.forwardRef((props, ref) => {
-    const { datePickerProps, hideLabel, helperText, /*  pattern, */ required } = props;
-    const { prefix } = useSettings();
-    const inputClassName = classNames(`${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.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(CalendarAltRegular, { className: `${prefix}--date-ranger-picker__icon` })] })), jsxRuntimeExports.jsx(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(CalendarAltRegular, { className: `${prefix}--date-ranger-picker__icon` })] }))] })));
-});
-DateRangePickerInput.displayName = "DateRangePickerInput";
-
-const DateRangePicker = React.forwardRef((props, ref) => {
-    const { fromProps, toProps, hideLabel, helperText, 
-    /* pattern, */ required, } = props;
-    const { prefix } = useSettings();
-    const inputClassName = classNames(`${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.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(`${prefix}--checkbox-label`, className);
-    const innerLabelClasses = classNames(`${prefix}--checkbox-label-text`, {
-        [`${prefix}--visually-hidden`]: hideLabel,
-    });
-    const wrapperClasses = classNames(`${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(`${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] = useState(selectedIndex);
-    const getChildren = (children) => {
-        return React__default.Children.map(children, (child, index) => React__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(`${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.useState(false);
-    const classes = classNames(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, } = usePopperTooltip({
-        closeOnOutsideClick,
-        closeOnTriggerHidden,
-        defaultVisible,
-        delayHide,
-        delayShow,
-        followCursor,
-        interactive,
-        mutationObserverOptions,
-        offset,
-        onVisibleChange,
-        placement,
-        trigger,
-    });
-    const elementClassNames = classNames(
-    /*children?.props?.className, */ {
-        [`${prefix}--tooltip--trigger`]: true,
-    });
-    const wrapperClassNames = classNames(className, {
-        [`${prefix}--tooltip--trigger`]: true,
-    });
-    const triggerElement = !createRefWrapper && typeof children !== "string" ? (React.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.createPortal(children, document.body);
-}
-
-const ContextMenu = ({ children, className, content,
-/* href,
-inline,
-trigger = 'click',
-...other*/
- }) => {
-    const { prefix } = useSettings();
-    const classes = classNames({
-        [`${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({
-        [`${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({
-        [`${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(`${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(`${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(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(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(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(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(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(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(`${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(`${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(`${prefix}--form-group__title`, className);
-    const classNamesFieldset = classNames(`${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(`${prefix}--form-hint`, className);
-    return (jsxRuntimeExports.jsx(Tooltip, Object.assign({ content: children }, { children: jsxRuntimeExports.jsx("div", Object.assign({ className: formHintClasses }, { children: jsxRuntimeExports.jsx(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(`${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(`${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(`${prefix}--loading`, className, {
-        [`${prefix}--loading--small`]: small,
-        [`${prefix}--loading--stop`]: !active,
-    });
-    const overlayClasses = classNames(`${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(`${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.forwardRef((_a, ref) => {
-    var { children, className, colon, kind, small } = _a, other = __rest(_a, ["children", "className", "colon", "kind", "small"]);
-    const { prefix } = useSettings();
-    const classes = classNames(`${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("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(Cross, { className: "wfp--list-item__icon" }), kind === "checkmark" && jsxRuntimeExports.jsx(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.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] = useState(false);
-    const [activeMenuItem, setActiveMenuItem] = 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(`${prefix}--main-navigation`, { [`${prefix}--main-navigation--line`]: line }, className);
-    const listClasses = classNames(`${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 = 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] = useState(Math.random().toString(36));
-    const wrapperRef = useRef(null);
-    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(className, {
-        [`${prefix}--main-navigation__item`]: true,
-        [`${prefix}--main-navigation__item--open`]: menuItemId === activeMenuItem,
-        [`${prefix}--content-width`]: subNavigation && subNavWideAsContent,
-    });
-    const triggerClasses = classNames({
-        [`${prefix}--main-navigation__trigger`]: true,
-        [`${prefix}--main-navigation__trigger--has-sub`]: subNavigation,
-        [`${prefix}--main-navigation__trigger--open`]: menuItemId === activeMenuItem,
-    });
-    const Icon = menuItemId === activeMenuItem ? Close : ChevronDown;
-    const subClasses = classNames({
-        [`${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(`${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(`${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(`${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(`${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(`${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(`${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(`${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(`${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({
-        [`${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 = Close, // IconTag, // Close
-    name, notificationType = "toast" } = _a, other = __rest(_a, ["ariaLabel", "className", "iconDescription", "type", "renderIcon", "name", "notificationType"]);
-    const { prefix } = useSettings();
-    const buttonClassName = classNames(className, {
-        [`${prefix}--${notificationType}-notification__close-button`]: notificationType,
-    });
-    const iconClassName = classNames({
-        [`${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(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: Error$1,
-    success: CheckmarkCircle,
-    warning: WarningSolid,
-    info: 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.useState(true);
-    const containerClassName = classNames(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.useRef(onClose);
-    React.useEffect(() => {
-        savedOnClose.current = onClose;
-    });
-    React.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.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(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(`${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(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(CaretDown, {}) : jsxRuntimeExports.jsx(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({
-        [`${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.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 = useRef(null);
-    const outerModal = useRef(null);
-    const innerModal = useRef(null);
-    const el = elementToAppend
-        ? elementToAppend
-        : typeof document !== "undefined"
-            ? document.body
-            : undefined;
-    const [beingOpen, setBeingOpen] = React__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({
-        [`${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(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.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.createRef();
-    const [isOpen, setIsOpen] = React.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.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.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({
-        [`${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("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("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("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.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] = useState(initialValue);
-    useEffect(() => {
-        setValue(props.value);
-    }, [props.value]);
-    const newInputRef = 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(`${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.forwardRef((props, ref) => {
-    const { className, inline, disabled, children, iconDescription, light, hideLabel, } = props;
-    const { prefix } = useSettings();
-    const selectClasses = classNames({
-        [`${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(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({
-        [`${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] = useState(pageNumber);
-    const [pageSizeState, setPageSize] = useState(props.pageSize ? props.pageSize : pageSizes[0]);
-    const uniqueId = 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$1 = classNames("wfp--pagination", className);
-    const backButtonClasses = classNames("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$1 }, other, { children: [jsxRuntimeExports.jsxs("div", Object.assign({ className: "wfp--pagination__left" }, { children: [!pageSizesDisabled && (jsxRuntimeExports.jsxs(React__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(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(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.forwardRef((props, ref) => {
-    const { labelText, id, className, value, name, onChange } = props, other = __rest(props, ["labelText", "id", "className", "value", "name", "onChange"]);
-    const [uid] = useState(id || uniqueId());
-    const { prefix } = useSettings();
-    const wrapperClasses = classNames("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] = useState(valueSelected || defaultSelected);
-    //const [selected, setSelected] = useState();
-    useEffect(() => {
-        if (valueSelected !== prevValueSelected) {
-            setPrevValueSelected(valueSelected);
-            //TODO: setSelected(valueSelected || defaultSelected);
-        }
-    }, [valueSelected, defaultSelected]);
-    const labelClasses = classNames(`${prefix}--label`, {
-        [`${prefix}--visually-hidden`]: hideLabel,
-    });
-    const wrapperClasses = classNames(`${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.cloneElement(link, Object.assign({ onClick: handleToggleClick }, ariaProps));
-        return clonedLink;
-    }
-    else {
-        const Icon = ChevronUp;
-        const classes = classNames({
-            [`${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] = useState(false);
-    const [innerHeight, setInnerHeight] = useState(0);
-    const readMoreRef = useRef(null);
-    const readMoreFakeRef = 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(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(`${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(`${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] = useState(true);
-    // const [elRefs, setElRefs] = useState({});
-    /*const getTabAt = (index) => {
-      return elRefs[`tab${index}`] || React.Children.toArray(children)[index];
-    };
-  */
-    const getTabs = () => {
-        return React__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(className, {
-            [`${prefix}--step-navigation`]: true,
-            [`${prefix}--step-navigation--vertical`]: vertical,
-            [`${prefix}--step-navigation--small`]: small,
-            [`${prefix}--step-navigation--regular`]: !small,
-        }),
-        tablist: classNames(`${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(`${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: Ellipsis },
-        warning: { icon: WarningOutline },
-        locked: { icon: Locked },
-        skip: { icon: OverflowMenu },
-        disabled: { icon: Error$1 },
-        complete: { icon: Checkmark },
-        summary: { icon: 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.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(`${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(`${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(`${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(`${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(`${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(ChevronLeft, {}), children] })));
-};
-
-const TextInput = React.forwardRef((props, ref) => {
-    const { 
-    //className,
-    //formItemClassName,
-    hideLabel, helperText, pattern, required, } = props;
-    const { prefix } = useSettings();
-    const inputClassName = classNames(`${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.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.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;
-            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(`${prefix}--slider--wrapper`, className, {
-        [`${prefix}--slider--helpertext`]: helperText,
-        [`${prefix}--slider--nolabel`]: hideLabel,
-        [`${prefix}--slider--nocontrols`]: hideControls,
-    });
-    const sliderContainerClasses = classNames(`${prefix}--slider-container`, {
-        [`${prefix}--slider-container--full-width`]: fullWidth,
-    });
-    const newProps = {
-        disabled,
-        id,
-        max,
-        min,
-        step,
-        onChange: handleChange,
-        value: value,
-    };
-    const inputClasses = classNames(`${prefix}--input`, `${prefix}--slider-text-input`);
-    const sliderClasses = classNames(`${prefix}--slider`, { [`${prefix}--slider--disabled`]: disabled }, className);
-    const sliderRangeWrapperClasses = classNames(`${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.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({
-        [`${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(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(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(`${prefix}--tabs__nav-item`, { [`${prefix}--tabs__nav-item--disabled`]: disabled }, { [`${prefix}--tabs__nav-item--selected`]: selected }, className);
-    const selectedClasses = classNames(`${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.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.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.useState(selected);
-    //const [sizes, setSizes] = useState<boolean>();
-    const rootRef = React.useRef(null);
-    React.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(`${prefix}--tabs`, { [`${prefix}--tabs--no-animation`]: disableAnimation }, className),
-        tablist: classNames(`${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) => {
-        };
-    };
-    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.forwardRef((props, ref) => {
-    const { className, fullWidth } = props;
-    const { prefix } = useSettings();
-    const textareaClasses = classNames(`${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.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({
-        [`${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(`${prefix}--user`, className, {
-        [`${prefix}--user--has-description`]: description,
-        [`${prefix}--user--has-extended-description`]: extendedDescription,
-    });
-    const titleClasses = classNames({
-        [`${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(`${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 = 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({
-        [`${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" ? useLayoutEffect : 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] = 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;
-}
-
-export { Accordion, AccordionItem, AddonAfter, AddonBefore, AuthLayout, Avatar, BackgroundContent, BannerNavigation, BannerNavigationItem, BannerNavigationWithContent, Callout as BlockNotification, Breadcrumb, BreadcrumbHome, BreadcrumbItem, Button, Callout, Card, CardExternal, Checkbox, ContentSwitcher, ContextMenu, ContextMenuGroup, ContextMenuItem, Credits, DatePicker, DatePickerInput, DateRangePicker, DateRangePickerInput, Empty, Footer, FooterExternal, FooterMetaLink, Form, FormGroup, FormHint, FormItem, FormLabel, Helper, Hero, HeroExternal, InfoBar, InlineErrorMessage, InlineLoading, Input, InputGroup, Item, Label, Link, LinksColumn, List, ListItem, Loading, MainNavigation, MainNavigationContext, MainNavigationItem, Modal, ModalFooter, ModalWrapper, Module, ModuleBody, ModuleFooter, ModuleHeader, NotificationActionButton, NotificationButton, NotificationTextDetails, NumberInput, Pagination, RadioButton, ReadMore, Search, SecondaryNavigation, SecondaryNavigationTitle, Select, SelectItem, SelectItemGroup, Sidebar, SidebarBackButton, SidebarContentBody, SidebarContentHeader, SidebarHeader, SidebarScroll, SkeletonText, Slider, StepNavigation, StepNavigationItem, Story, SubNavigation, SubNavigationContent, SubNavigationFilter, SubNavigationGroup, SubNavigationHeader, SubNavigationItem, SubNavigationLink, SubNavigationList, SubNavigationTitle, Tab, TabContent, Table, ReactTablePagination as TablePagination, TableSorting$1 as TableSorting, Tabs, Tag, Text, TextArea, TextInput, ToastNotification, Toggle, Tooltip, Unit, User, Value, WFPCoreContext, WFPCoreProvider, Wrapper, buttonKinds, colors, settings as defaultWFPContext, mdxComponents, notificationtypes, pageWidths, tooltipStyle, tooltipStyleDark, uniqueId, useInput, useIsomorphicLayoutEffect, useMainNavigation, useMediaQuery, useTab, useTheme, withWFPCoreSettings };