@trafilea/afrodita-components 4.4.0-beta.4 → 4.4.0-beta.7

package/build/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs as jsxs$1, jsx as jsx$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, useContext, createElement, createContext, Fragment as Fragment$2, useRef, useLayoutEffect, useMemo, useState, useEffect, isValidElement, cloneElement, useCallback, useReducer, createRef } from 'react';
+import React__default, { forwardRef, useContext, createElement, createContext, Fragment as Fragment$2, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer, createRef, isValidElement, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 
 /*! *****************************************************************************
@@ -461,8 +461,8 @@ var Icon = {
     SlideDots: SlideDots$1,
 };
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -476,7 +476,7 @@ function _extends$2() {
     return target;
   };
 
-  return _extends$2.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 function memoize(fn) {
@@ -487,7 +487,7 @@ function memoize(fn) {
   };
 }
 
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
 var isPropValid = /* #__PURE__ */memoize(function (prop) {
   return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -701,7 +701,7 @@ function trim (value) {
  * @param {RegExp} pattern
  * @return {string?}
  */
-function match$1 (value, pattern) {
+function match (value, pattern) {
 	return (value = pattern.exec(value)) ? value[0] : value
 }
 
@@ -1381,7 +1381,7 @@ function prefixer (element, index, children, callback) {
 				case RULESET:
 					if (element.length)
 						return combine(element.props, function (value) {
-							switch (match$1(value, /(::plac\w+|:read-\w+)/)) {
+							switch (match(value, /(::plac\w+|:read-\w+)/)) {
 								// :read-(only|write)
 								case ':read-only': case ':read-write':
 									return serialize([copy(element, {props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]})], callback)
@@ -1819,12 +1819,12 @@ var reactIs_production_min = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
-reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k$1=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q$1=b?
+Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w$1=b?Symbol.for("react.fundamental"):60117,x$1=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k$1:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A$1(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k$1;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
+reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A$1(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A$1;reactIs_production_min.isContextConsumer=function(a){return z(a)===k$1};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
 reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
-reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
+reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q$1||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k$1||a.$$typeof===n||a.$$typeof===w$1||a.$$typeof===x$1||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
 
 var reactIs_development = {};
 
@@ -2045,7 +2045,7 @@ function getRegisteredStyles(registered, registeredStyles, classNames) {
   });
   return rawClassName;
 }
-var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+var registerStyles = function registerStyles(cache, serialized, isStringTag) {
   var className = cache.key + "-" + serialized.name;
 
   if ( // we only need to add the styles to the registered cache if the
@@ -2060,6 +2060,10 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
   isBrowser$4 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
     cache.registered[className] = serialized.styles;
   }
+};
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  registerStyles(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
 
   if (cache.inserted[serialized.name] === undefined) {
     var stylesForSSR = '';
@@ -2570,7 +2574,7 @@ var getTheme = function getTheme(outerTheme, theme) {
     throw new Error('[ThemeProvider] Please make your theme prop a plain object');
   }
 
-  return _extends$2({}, outerTheme, theme);
+  return _extends$1({}, outerTheme, theme);
 };
 
 var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
@@ -2590,19 +2594,20 @@ var ThemeProvider$1 = function ThemeProvider(props) {
   }, props.children);
 };
 
+var getLastPart = function getLastPart(functionName) {
+  // The match may be something like 'Object.createEmotionProps' or
+  // 'Loader.prototype.render'
+  var parts = functionName.split('.');
+  return parts[parts.length - 1];
+};
+
 var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {
   // V8
   var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line);
-
-  if (match) {
-    // The match may be something like 'Object.createEmotionProps'
-    var parts = match[1].split('.');
-    return parts[parts.length - 1];
-  } // Safari / Firefox
-
+  if (match) return getLastPart(match[1]); // Safari / Firefox
 
   match = /^([A-Za-z0-9$.]+)@/.exec(line);
-  if (match) return match[1];
+  if (match) return getLastPart(match[1]);
   return undefined;
 };
 
@@ -2632,6 +2637,18 @@ var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {
   return undefined;
 };
 
+var isBrowser$1$2 = typeof document !== 'undefined';
+var useInsertionEffect$2 = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
+  create();
+};
+function useInsertionEffectMaybe$1(create) {
+  if (!isBrowser$1$2) {
+    return create();
+  }
+
+  useInsertionEffect$2(create);
+}
+
 var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
 var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
 var createEmotionProps = function createEmotionProps(type, props) {
@@ -2659,7 +2676,31 @@ var createEmotionProps = function createEmotionProps(type, props) {
   return newProps;
 };
 
-var Noop$2 = function Noop() {
+var Insertion$2 = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serialized = _ref.serialized,
+      isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  var rules = useInsertionEffectMaybe$1(function () {
+    return insertStyles(cache, serialized, isStringTag);
+  });
+
+  if (!isBrowser$3 && rules !== undefined) {
+    var _ref2;
+
+    var serializedNames = serialized.name;
+    var next = serialized.next;
+
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name;
+      next = next.next;
+    }
+
+    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref2.nonce = cache.sheet.nonce, _ref2));
+  }
+
   return null;
 };
 
@@ -2672,7 +2713,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     cssProp = cache.registered[cssProp];
   }
 
-  var type = props[typePropName];
+  var WrappedComponent = props[typePropName];
   var registeredStyles = [cssProp];
   var className = '';
 
@@ -2692,7 +2733,6 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     }
   }
 
-  var rules = insertStyles(cache, serialized, typeof type === 'string');
   className += cache.key + "-" + serialized.name;
   var newProps = {};
 
@@ -2704,27 +2744,11 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
 
   newProps.ref = ref;
   newProps.className = className;
-  var ele = /*#__PURE__*/createElement(type, newProps);
-  var possiblyStyleElement = /*#__PURE__*/createElement(Noop$2, null);
-
-  if (!isBrowser$3 && rules !== undefined) {
-    var _ref;
-
-    var serializedNames = serialized.name;
-    var next = serialized.next;
-
-    while (next !== undefined) {
-      serializedNames += ' ' + next.name;
-      next = next.next;
-    }
-
-    possiblyStyleElement = /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
-      __html: rules
-    }, _ref.nonce = cache.sheet.nonce, _ref));
-  } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
-
-
-  return /*#__PURE__*/createElement(Fragment$2, null, possiblyStyleElement, ele);
+  return /*#__PURE__*/createElement(Fragment$2, null, /*#__PURE__*/createElement(Insertion$2, {
+    cache: cache,
+    serialized: serialized,
+    isStringTag: typeof WrappedComponent === 'string'
+  }), /*#__PURE__*/createElement(WrappedComponent, newProps));
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -2733,7 +2757,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 var pkg = {
 	name: "@emotion/react",
-	version: "11.7.1",
+	version: "11.8.1",
 	main: "dist/emotion-react.cjs.js",
 	module: "dist/emotion-react.esm.js",
 	browser: {
@@ -2753,17 +2777,18 @@ var pkg = {
 		"macro.js.flow"
 	],
 	sideEffects: false,
-	author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
+	author: "Emotion Contributors",
 	license: "MIT",
 	scripts: {
 		"test:typescript": "dtslint types"
 	},
 	dependencies: {
 		"@babel/runtime": "^7.13.10",
+		"@emotion/babel-plugin": "^11.7.1",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/sheet": "^1.1.0",
-		"@emotion/utils": "^1.0.0",
+		"@emotion/utils": "^1.1.0",
 		"@emotion/weak-memoize": "^0.2.5",
 		"hoist-non-react-statics": "^3.3.1"
 	},
@@ -2784,7 +2809,7 @@ var pkg = {
 		"@emotion/css": "11.7.1",
 		"@emotion/css-prettifier": "1.0.1",
 		"@emotion/server": "11.4.0",
-		"@emotion/styled": "11.6.0",
+		"@emotion/styled": "11.8.1",
 		"@types/react": "^16.9.11",
 		dtslint: "^0.3.0",
 		"html-tag-names": "^1.1.2",
@@ -2807,6 +2832,7 @@ var pkg = {
 	}
 };
 
+var useInsertionEffect$1 = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useLayoutEffect;
 var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
 // initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
 // initial client-side render from SSR, use place of hydrating tag
@@ -2857,7 +2883,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
 
 
   var sheetRef = useRef();
-  useLayoutEffect(function () {
+  useInsertionEffect$1(function () {
     var key = cache.key + "-global";
     var sheet = new StyleSheet({
       key: key,
@@ -2885,7 +2911,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
       sheet.flush();
     };
   }, [cache]);
-  useLayoutEffect(function () {
+  useInsertionEffect$1(function () {
     var sheetRefCurrent = sheetRef.current;
     var sheet = sheetRefCurrent[0],
         rehydrating = sheetRefCurrent[1];
@@ -2986,14 +3012,41 @@ function merge(registered, css, className) {
   return rawClassName + css(registeredStyles);
 }
 
-var Noop$1 = function Noop() {
+var Insertion$1 = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serializedArr = _ref.serializedArr;
+  var rules = useInsertionEffectMaybe$1(function () {
+    var rules = '';
+
+    for (var i = 0; i < serializedArr.length; i++) {
+      var res = insertStyles(cache, serializedArr[i], false);
+
+      if (!isBrowser$3 && res !== undefined) {
+        rules += res;
+      }
+    }
+
+    if (!isBrowser$3) {
+      return rules;
+    }
+  });
+
+  if (!isBrowser$3 && rules.length !== 0) {
+    var _ref2;
+
+    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
+      return serialized.name;
+    }).join(' '), _ref2.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref2.nonce = cache.sheet.nonce, _ref2));
+  }
+
   return null;
 };
 
 var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
-  var rules = '';
-  var serializedHashes = '';
   var hasRendered = false;
+  var serializedArr = [];
 
   var css = function css() {
     if (hasRendered && process.env.NODE_ENV !== 'production') {
@@ -3005,21 +3058,9 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
     }
 
     var serialized = serializeStyles(args, cache.registered);
+    serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`
 
-    if (isBrowser$3) {
-      insertStyles(cache, serialized, false);
-    } else {
-      var res = insertStyles(cache, serialized, false);
-
-      if (res !== undefined) {
-        rules += res;
-      }
-    }
-
-    if (!isBrowser$3) {
-      serializedHashes += " " + serialized.name;
-    }
-
+    registerStyles(cache, serialized, false);
     return cache.key + "-" + serialized.name;
   };
 
@@ -3042,18 +3083,10 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   };
   var ele = props.children(content);
   hasRendered = true;
-  var possiblyStyleElement = /*#__PURE__*/createElement(Noop$1, null);
-
-  if (!isBrowser$3 && rules.length !== 0) {
-    var _ref;
-
-    possiblyStyleElement = /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedHashes.substring(1), _ref.dangerouslySetInnerHTML = {
-      __html: rules
-    }, _ref.nonce = cache.sheet.nonce, _ref));
-  } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
-
-
-  return /*#__PURE__*/createElement(Fragment$2, null, possiblyStyleElement, ele);
+  return /*#__PURE__*/createElement(Fragment$2, null, /*#__PURE__*/createElement(Insertion$1, {
+    cache: cache,
+    serializedArr: serializedArr
+  }), ele);
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -3109,10 +3142,46 @@ var composeShouldForwardProps = function composeShouldForwardProps(tag, options,
   return shouldForwardProp;
 };
 
-var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
 var isBrowser$1 = typeof document !== 'undefined';
+var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
+  create();
+};
+function useInsertionEffectMaybe(create) {
+  if (!isBrowser$1) {
+    return create();
+  }
+
+  useInsertionEffect(create);
+}
+
+var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
+var isBrowser$1$1 = typeof document !== 'undefined';
+
+var Insertion = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serialized = _ref.serialized,
+      isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  var rules = useInsertionEffectMaybe(function () {
+    return insertStyles(cache, serialized, isStringTag);
+  });
+
+  if (!isBrowser$1$1 && rules !== undefined) {
+    var _ref2;
+
+    var serializedNames = serialized.name;
+    var next = serialized.next;
+
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name;
+      next = next.next;
+    }
+
+    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref2.nonce = cache.sheet.nonce, _ref2));
+  }
 
-var Noop = function Noop() {
   return null;
 };
 
@@ -3166,7 +3235,7 @@ var createStyled = function createStyled(tag, options) {
 
 
     var Styled = withEmotionCache(function (props, cache, ref) {
-      var finalTag = shouldUseAs && props.as || baseTag;
+      var FinalTag = shouldUseAs && props.as || baseTag;
       var className = '';
       var classInterpolations = [];
       var mergedProps = props;
@@ -3188,14 +3257,13 @@ var createStyled = function createStyled(tag, options) {
       }
 
       var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
-      var rules = insertStyles(cache, serialized, typeof finalTag === 'string');
       className += cache.key + "-" + serialized.name;
 
       if (targetClassName !== undefined) {
         className += " " + targetClassName;
       }
 
-      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
+      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
       var newProps = {};
 
       for (var _key in props) {
@@ -3209,27 +3277,11 @@ var createStyled = function createStyled(tag, options) {
 
       newProps.className = className;
       newProps.ref = ref;
-      var ele = /*#__PURE__*/createElement(finalTag, newProps);
-      var possiblyStyleElement = /*#__PURE__*/createElement(Noop, null);
-
-      if (!isBrowser$1 && rules !== undefined) {
-        var _ref;
-
-        var serializedNames = serialized.name;
-        var next = serialized.next;
-
-        while (next !== undefined) {
-          serializedNames += ' ' + next.name;
-          next = next.next;
-        }
-
-        possiblyStyleElement = /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
-          __html: rules
-        }, _ref.nonce = cache.sheet.nonce, _ref));
-      } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
-
-
-      return /*#__PURE__*/createElement(Fragment$2, null, possiblyStyleElement, ele);
+      return /*#__PURE__*/createElement(Fragment$2, null, /*#__PURE__*/createElement(Insertion, {
+        cache: cache,
+        serialized: serialized,
+        isStringTag: typeof FinalTag === 'string'
+      }), /*#__PURE__*/createElement(FinalTag, newProps));
     });
     Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     Styled.defaultProps = tag.defaultProps;
@@ -3249,7 +3301,7 @@ var createStyled = function createStyled(tag, options) {
     });
 
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, _extends$2({}, options, nextOptions, {
+      return createStyled(nextTag, _extends$1({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles);
     };
@@ -3381,2580 +3433,241 @@ var stringify = function (variables) {
         var key = _a[0], value = _a[1];
         return "".concat(key, ": ").concat(value, ";");
     })
-        .join('\n'), "\n    }\n  "));
-};
-var transformThemeIntoVariables = function (_a) {
-    // eslint-disable-next-line
-    _a.name; var _b = _a.fonts, fonts = _b === void 0 ? { url: '', config: [] } : _b, theme = __rest(_a, ["name", "fonts"]);
-    var variables = {};
-    var pending = {};
-    transformToVariables('-', variables, __assign({}, theme), pending);
-    for (var key in pending) {
-        var valueKey = pending[key];
-        if (valueKey in variables === false) {
-            delete variables[key];
-            continue;
-        }
-        variables[key] = "var(".concat(valueKey, ")");
-    }
-    return stringify(variables) + transformFonts(fonts);
-};
-var transformFonts = function (fonts) {
-    if (fonts.config.length === 0) {
-        return '';
-    }
-    var css = fonts.config
-        .map(function (font) {
-        var css = [
-            "font-family: \"".concat(font.family, "\""),
-            "src: url(\"".concat(fonts.url, "/").concat(font.src, "\") format(\"opentype\")"),
-        ];
-        if (font.weight) {
-            css.push("font-weight: ".concat(font.weight));
-        }
-        if (font.stretch) {
-            css.push("font-stretch: ".concat(font.stretch));
-        }
-        if (font.style) {
-            css.push("font-style: ".concat(font.style));
-        }
-        return inline("@font-face { ".concat(css.join(';\n'), "; }"));
-    })
-        .join('\n');
-    return inline("\n    ".concat(css, "\n    body {\n      font-family: \"").concat(fonts.config[0].family, "\";\n    }\n  "));
-};
-var inline = function (text) {
-    return text.trim().replace(/\s+/g, ' ').replace(/\n/g, '');
-};
-
-var ThemeProvider = function (_a) {
-    var theme = _a.theme, children = _a.children;
-    var parsedTheme = useMemo(function () { return applyVariablesIntoTheme(theme); }, [theme]);
-    return (jsx$1(ThemeProvider$1, __assign({ theme: parsedTheme }, { children: jsx$1(AssetsProvider, __assign({ assets: parsedTheme.assets }, { children: children }), void 0) }), void 0));
-};
-var useTheme = function () { return useTheme$1(); };
-var DefaultContainer = function (props) { return jsx$1("div", __assign({}, props), void 0); };
-var ThemeVariables = function (_a) {
-    var _b;
-    var theme = _a.theme, _c = _a.Container, Container = _c === void 0 ? DefaultContainer : _c;
-    var _d = useState(function () { return transformThemeIntoVariables(theme); }), variables = _d[0], setVariables = _d[1];
-    useEffect(function () {
-        setVariables(transformThemeIntoVariables(theme));
-    }, [theme]);
-    return (jsx$1(Container, { children: jsx$1("style", { "data-theme-name": ((_b = theme.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || 'unamed-theme', dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
-};
-var AssetsContext = createContext({
-    images: {
-        favicon: '',
-        logo: '',
-    },
-});
-var AssetsProvider = function (_a) {
-    var assets = _a.assets, children = _a.children;
-    var context = useMemo(function () { return assets; }, [assets]);
-    return jsx$1(AssetsContext.Provider, __assign({ value: context }, { children: children }), void 0);
-};
-var useThemeAssets = function () { return useContext(AssetsContext); };
-
-var Container$F = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"])), function (_a) {
-    var flex = _a.flex;
-    return flex &&
-        "display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;";
-}, function (_a) {
-    var widthAuto = _a.widthAuto;
-    return (widthAuto ? 'auto' : 'fit-content');
-}, function (props) { return props.backgroundColor; }, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
-    return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
-});
-var Card = function (_a) {
-    var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
-    var theme = useTheme();
-    return (jsx$1(Container$F, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
-};
-var Card$1 = Object.assign(Card, {
-    Header: CardHeader,
-    Footer: CardFooter,
-    Body: CardBody,
-});
-var templateObject_1$13;
-
-var Fragment = Fragment$1;
-function jsx(type, props, key) {
-  if (!hasOwnProperty$1.call(props, 'css')) {
-    return jsx$1(type, props, key);
-  }
-
-  return jsx$1(Emotion, createEmotionProps(type, props), key);
-}
-function jsxs(type, props, key) {
-  if (!hasOwnProperty$1.call(props, 'css')) {
-    return jsxs$1(type, props, key);
-  }
-
-  return jsxs$1(Emotion, createEmotionProps(type, props), key);
-}
-
-var BaseButton = function (_a) {
-    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.testId, testId = _c === void 0 ? 'base-button' : _c;
-    return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
-            display: inline ? 'inline-flex' : 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            padding: '0.75rem 2rem',
-            textDecoration: 'none',
-            textTransform: 'uppercase',
-            boxSizing: 'border-box',
-            cursor: 'pointer',
-        } }, { children: [renderLeading, children, renderTrailing] }), void 0));
-};
-
-var getStylesBySize$9 = function (size, theme) {
-    switch (size) {
-        case ComponentSize.Large:
-            return {
-                fontSize: theme.component.button.size.large.fontSize,
-                padding: theme.component.button.size.large.padding,
-            };
-        case ComponentSize.Medium:
-            return {
-                fontSize: theme.component.button.size.medium.fontSize,
-                padding: theme.component.button.size.medium.padding,
-            };
-        case ComponentSize.Small:
-            return {
-                fontSize: theme.component.button.size.small.fontSize,
-                padding: theme.component.button.size.small.padding,
-            };
-        default:
-            return {
-                fontSize: theme.component.button.size.small.fontSize,
-                padding: theme.component.button.size.small.padding,
-            };
-    }
-};
-var BaseCTA = function (_a) {
-    var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
-    var theme = useTheme();
-    var stylesBySize = getStylesBySize$9(size, theme);
-    return (jsx(BaseButton, __assign({}, props, { css: __assign(__assign({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
-                backgroundColor: theme.colors.background.disabled,
-                color: theme.colors.text.disabled,
-                cursor: 'not-allowed',
-            } }) }, { children: text }), void 0));
-};
-
-var ButtonPrimary = function (_a) {
-    _a.testId; var props = __rest(_a, ["testId"]);
-    var theme = useTheme();
-    return (jsx(BaseCTA, __assign({}, props, { css: {
-            backgroundColor: theme.component.button.primary.active.backgroundColor,
-            color: theme.component.button.primary.active.color,
-            border: theme.component.button.border,
-            '&:hover': {
-                backgroundColor: theme.component.button.primary.hover.backgroundColor,
-                color: theme.component.button.primary.hover.color,
-            },
-            '&:disabled': {
-                backgroundColor: theme.colors.background.disabled,
-                color: theme.colors.text.disabled,
-            },
-        } }), void 0));
-};
-
-var ButtonSecondary = function (props) {
-    var theme = useTheme();
-    return (jsx(BaseCTA, __assign({}, props, { css: {
-            backgroundColor: theme.component.button.secondary.active.backgroundColor,
-            color: theme.component.button.secondary.active.color,
-            border: theme.component.button.border,
-            '&:hover': {
-                backgroundColor: theme.component.button.secondary.hover.backgroundColor,
-            },
-            '&:disabled': {
-                backgroundColor: theme.colors.shades['50'].color,
-                color: theme.colors.shades['250'].color,
-            },
-        } }), void 0));
-};
-
-var ButtonSecondaryOutline = function (props) {
-    var theme = useTheme();
-    return (jsx(BaseCTA, __assign({}, props, { css: {
-            backgroundColor: theme.component.button.secondary.active.color,
-            color: theme.component.button.secondary.active.backgroundColor,
-            border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
-            '&:hover': {
-                backgroundColor: theme.component.button.secondary.active.backgroundColor,
-                color: theme.component.button.secondary.active.color,
-            },
-            '&:disabled': {
-                backgroundColor: theme.colors.background.disabled,
-                color: theme.colors.text.disabled,
-                border: 'none',
-            },
-        } }), void 0));
-};
-
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
-}
-
-function match(value, lookup) {
-  if (value in lookup) {
-    var returnValue = lookup[value];
-
-    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      args[_key - 2] = arguments[_key];
-    }
-
-    return typeof returnValue === 'function' ? returnValue.apply(void 0, args) : returnValue;
-  }
-
-  var error = new Error("Tried to handle \"" + value + "\" but there is no handler defined. Only defined handlers are: " + Object.keys(lookup).map(function (key) {
-    return "\"" + key + "\"";
-  }).join(', ') + ".");
-  if (Error.captureStackTrace) Error.captureStackTrace(error, match);
-  throw error;
-}
-
-var Features;
-
-(function (Features) {
-  /** No features at all */
-  Features[Features["None"] = 0] = "None";
-  /**
-   * When used, this will allow us to use one of the render strategies.
-   *
-   * **The render strategies are:**
-   *    - **Unmount**   _(Will unmount the component.)_
-   *    - **Hidden**    _(Will hide the component using the [hidden] attribute.)_
-   */
-
-  Features[Features["RenderStrategy"] = 1] = "RenderStrategy";
-  /**
-   * When used, this will allow the user of our component to be in control. This can be used when
-   * you want to transition based on some state.
-   */
-
-  Features[Features["Static"] = 2] = "Static";
-})(Features || (Features = {}));
-
-var RenderStrategy;
-
-(function (RenderStrategy) {
-  RenderStrategy[RenderStrategy["Unmount"] = 0] = "Unmount";
-  RenderStrategy[RenderStrategy["Hidden"] = 1] = "Hidden";
-})(RenderStrategy || (RenderStrategy = {}));
-
-function render(_ref) {
-  var props = _ref.props,
-      slot = _ref.slot,
-      defaultTag = _ref.defaultTag,
-      features = _ref.features,
-      _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? true : _ref$visible,
-      name = _ref.name;
-  // Visible always render
-  if (visible) return _render(props, slot, defaultTag, name);
-  var featureFlags = features != null ? features : Features.None;
-
-  if (featureFlags & Features.Static) {
-    var _props$static = props["static"],
-        isStatic = _props$static === void 0 ? false : _props$static,
-        rest = _objectWithoutPropertiesLoose$1(props, ["static"]); // When the `static` prop is passed as `true`, then the user is in control, thus we don't care about anything else
-
-
-    if (isStatic) return _render(rest, slot, defaultTag, name);
-  }
-
-  if (featureFlags & Features.RenderStrategy) {
-    var _match;
-
-    var _props$unmount = props.unmount,
-        unmount = _props$unmount === void 0 ? true : _props$unmount,
-        _rest = _objectWithoutPropertiesLoose$1(props, ["unmount"]);
-
-    var strategy = unmount ? RenderStrategy.Unmount : RenderStrategy.Hidden;
-    return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
-      return null;
-    }, _match[RenderStrategy.Hidden] = function () {
-      return _render(_extends$1({}, _rest, {
-        hidden: true,
-        style: {
-          display: 'none'
-        }
-      }), slot, defaultTag, name);
-    }, _match));
-  } // No features enabled, just render
-
-
-  return _render(props, slot, defaultTag, name);
-}
-
-function _render(props, slot, tag, name) {
-  var _ref2;
-
-  if (slot === void 0) {
-    slot = {};
-  }
-
-  var _omit = omit(props, ['unmount', 'static']),
-      _omit$as = _omit.as,
-      Component = _omit$as === void 0 ? tag : _omit$as,
-      children = _omit.children,
-      _omit$refName = _omit.refName,
-      refName = _omit$refName === void 0 ? 'ref' : _omit$refName,
-      passThroughProps = _objectWithoutPropertiesLoose$1(_omit, ["as", "children", "refName"]); // This allows us to use `<HeadlessUIComponent as={MyComponent} refName="innerRef" />`
-
-
-  var refRelatedProps = props.ref !== undefined ? (_ref2 = {}, _ref2[refName] = props.ref, _ref2) : {};
-  var resolvedChildren = typeof children === 'function' ? children(slot) : children; // Allow for className to be a function with the slot as the contents
-
-  if (passThroughProps.className && typeof passThroughProps.className === 'function') {
-    passThroughProps.className = passThroughProps.className(slot);
-  }
-
-  if (Component === Fragment$2) {
-    if (Object.keys(passThroughProps).length > 0) {
-      if (!isValidElement(resolvedChildren) || Array.isArray(resolvedChildren) && resolvedChildren.length > 1) {
-        throw new Error(['Passing props on "Fragment"!', '', "The current component <" + name + " /> is rendering a \"Fragment\".", "However we need to passthrough the following props:", Object.keys(passThroughProps).map(function (line) {
-          return "  - " + line;
-        }).join('\n'), '', 'You can apply a few solutions:', ['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".', 'Render a single element as the child so that we can forward the props onto that element.'].map(function (line) {
-          return "  - " + line;
-        }).join('\n')].join('\n'));
-      }
-
-      return cloneElement(resolvedChildren, Object.assign({}, // Filter out undefined values so that they don't override the existing values
-      mergeEventFunctions(compact(omit(passThroughProps, ['ref'])), resolvedChildren.props, ['onClick']), refRelatedProps));
-    }
-  }
-
-  return createElement(Component, Object.assign({}, omit(passThroughProps, ['ref']), Component !== Fragment$2 && refRelatedProps), resolvedChildren);
-}
-/**
- * We can use this function for the following useCase:
- *
- * <Menu.Item> <button onClick={console.log} /> </Menu.Item>
- *
- * Our `Menu.Item` will have an internal `onClick`, if you passthrough an `onClick` to the actual
- * `Menu.Item` component we will call it correctly. However, when we have an `onClick` on the actual
- * first child, that one should _also_ be called (but before this implementation, it was just
- * overriding the `onClick`). But it is only when we *render* that we have access to the existing
- * props of this component.
- *
- * It's a bit hacky, and not that clean, but it is something internal and we have tests to rely on
- * so that we can refactor this later (if needed).
- */
-
-
-function mergeEventFunctions(passThroughProps, existingProps, functionsToMerge) {
-  var clone = Object.assign({}, passThroughProps);
-
-  var _loop = function _loop() {
-    var func = _step.value;
-
-    if (passThroughProps[func] !== undefined && existingProps[func] !== undefined) {
-      var _Object$assign;
-
-      Object.assign(clone, (_Object$assign = {}, _Object$assign[func] = function (event) {
-        // Props we control
-        if (!event.defaultPrevented) passThroughProps[func](event); // Existing props on the component
-
-        if (!event.defaultPrevented) existingProps[func](event);
-      }, _Object$assign));
-    }
-  };
-
-  for (var _iterator = _createForOfIteratorHelperLoose(functionsToMerge), _step; !(_step = _iterator()).done;) {
-    _loop();
-  }
-
-  return clone;
-}
-/**
- * This is a hack, but basically we want to keep the full 'API' of the component, but we do want to
- * wrap it in a forwardRef so that we _can_ passthrough the ref
- */
-
-
-function forwardRefWithAs(component) {
-  var _component$displayNam;
-
-  return Object.assign(forwardRef(component), {
-    displayName: (_component$displayNam = component.displayName) != null ? _component$displayNam : component.name
-  });
-}
-
-function compact(object) {
-  var clone = Object.assign({}, object);
-
-  for (var key in clone) {
-    if (clone[key] === undefined) delete clone[key];
-  }
-
-  return clone;
-}
-
-function omit(object, keysToOmit) {
-  if (keysToOmit === void 0) {
-    keysToOmit = [];
-  }
-
-  var clone = Object.assign({}, object);
-
-  for (var _iterator2 = _createForOfIteratorHelperLoose(keysToOmit), _step2; !(_step2 = _iterator2()).done;) {
-    var key = _step2.value;
-    if (key in clone) delete clone[key];
-  }
-
-  return clone;
-}
-
-var useIsoMorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-var state = {
-  serverHandoffComplete: false
-};
-function useServerHandoffComplete() {
-  var _useState = useState(state.serverHandoffComplete),
-      serverHandoffComplete = _useState[0],
-      setServerHandoffComplete = _useState[1];
-
-  useEffect(function () {
-    if (serverHandoffComplete === true) return;
-    setServerHandoffComplete(true);
-  }, [serverHandoffComplete]);
-  useEffect(function () {
-    if (state.serverHandoffComplete === false) state.serverHandoffComplete = true;
-  }, []);
-  return serverHandoffComplete;
-}
-
-function useSyncRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  var cache = useRef(refs);
-  useEffect(function () {
-    cache.current = refs;
-  }, [refs]);
-  return useCallback(function (value) {
-    for (var _iterator = _createForOfIteratorHelperLoose(cache.current), _step; !(_step = _iterator()).done;) {
-      var ref = _step.value;
-      if (ref == null) continue;
-      if (typeof ref === 'function') ref(value);else ref.current = value;
-    }
-  }, [cache]);
-}
-
-// TODO: This must already exist somewhere, right? 🤔
-// Ref: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
-var Keys;
-
-(function (Keys) {
-  Keys["Space"] = " ";
-  Keys["Enter"] = "Enter";
-  Keys["Escape"] = "Escape";
-  Keys["Backspace"] = "Backspace";
-  Keys["ArrowLeft"] = "ArrowLeft";
-  Keys["ArrowUp"] = "ArrowUp";
-  Keys["ArrowRight"] = "ArrowRight";
-  Keys["ArrowDown"] = "ArrowDown";
-  Keys["Home"] = "Home";
-  Keys["End"] = "End";
-  Keys["PageUp"] = "PageUp";
-  Keys["PageDown"] = "PageDown";
-  Keys["Tab"] = "Tab";
-})(Keys || (Keys = {}));
-
-// See: https://github.com/facebook/react/issues/7711
-// See: https://github.com/facebook/react/pull/20612
-// See: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-disabled (2.)
-function isDisabledReactIssue7711(element) {
-  var _ref, _parent;
-
-  var parent = element.parentElement;
-  var legend = null;
-
-  while (parent && !(parent instanceof HTMLFieldSetElement)) {
-    if (parent instanceof HTMLLegendElement) legend = parent;
-    parent = parent.parentElement;
-  }
-
-  var isParentDisabled = (_ref = ((_parent = parent) == null ? void 0 : _parent.getAttribute('disabled')) === '') != null ? _ref : false;
-  if (isParentDisabled && isFirstLegend(legend)) return false;
-  return isParentDisabled;
-}
-
-function isFirstLegend(element) {
-  if (!element) return false;
-  var previous = element.previousElementSibling;
-
-  while (previous !== null) {
-    if (previous instanceof HTMLLegendElement) return false;
-    previous = previous.previousElementSibling;
-  }
-
-  return true;
-}
-
-// didn't take care of the Suspense case. To fix this we used the approach the @reach-ui/auto-id
-// uses.
-//
-// Credits: https://github.com/reach/reach-ui/blob/develop/packages/auto-id/src/index.tsx
-
-var id = 0;
-
-function generateId() {
-  return ++id;
-}
-
-function useId() {
-  var ready = useServerHandoffComplete();
-
-  var _useState = useState(ready ? generateId : null),
-      id = _useState[0],
-      setId = _useState[1];
-
-  useIsoMorphicEffect(function () {
-    if (id === null) setId(generateId());
-  }, [id]);
-  return id != null ? '' + id : undefined;
-}
-
-function useWindowEvent(type, listener, options) {
-  var listenerRef = useRef(listener);
-  listenerRef.current = listener;
-  useEffect(function () {
-    function handler(event) {
-      listenerRef.current.call(window, event);
-    }
-
-    window.addEventListener(type, handler, options);
-    return function () {
-      return window.removeEventListener(type, handler, options);
-    };
-  }, [type, options]);
-}
-
-//  - https://stackoverflow.com/a/30753870
-
-var focusableSelector = /*#__PURE__*/['[contentEditable=true]', '[tabindex]', 'a[href]', 'area[href]', 'button:not([disabled])', 'iframe', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])'].map(process.env.NODE_ENV === 'test' ? // TODO: Remove this once JSDOM fixes the issue where an element that is
-// "hidden" can be the document.activeElement, because this is not possible
-// in real browsers.
-// TODO: Remove this once JSDOM fixes the issue where an element that is
-function (selector) {
-  return selector + ":not([tabindex='-1']):not([style*='display: none'])";
-} : function (selector) {
-  return selector + ":not([tabindex='-1'])";
-}).join(',');
-var Focus$1;
-
-(function (Focus) {
-  /** Focus the first non-disabled element */
-  Focus[Focus["First"] = 1] = "First";
-  /** Focus the previous non-disabled element */
-
-  Focus[Focus["Previous"] = 2] = "Previous";
-  /** Focus the next non-disabled element */
-
-  Focus[Focus["Next"] = 4] = "Next";
-  /** Focus the last non-disabled element */
-
-  Focus[Focus["Last"] = 8] = "Last";
-  /** Wrap tab around */
-
-  Focus[Focus["WrapAround"] = 16] = "WrapAround";
-  /** Prevent scrolling the focusable elements into view */
-
-  Focus[Focus["NoScroll"] = 32] = "NoScroll";
-})(Focus$1 || (Focus$1 = {}));
-
-var FocusResult;
-
-(function (FocusResult) {
-  /** Something went wrong while trying to focus. */
-  FocusResult[FocusResult["Error"] = 0] = "Error";
-  /** When `Focus.WrapAround` is enabled, going from position `N` to `N+1` where `N` is the last index in the array, then we overflow. */
-
-  FocusResult[FocusResult["Overflow"] = 1] = "Overflow";
-  /** Focus was successful. */
-
-  FocusResult[FocusResult["Success"] = 2] = "Success";
-  /** When `Focus.WrapAround` is enabled, going from position `N` to `N-1` where `N` is the first index in the array, then we underflow. */
-
-  FocusResult[FocusResult["Underflow"] = 3] = "Underflow";
-})(FocusResult || (FocusResult = {}));
-
-var Direction$1;
-
-(function (Direction) {
-  Direction[Direction["Previous"] = -1] = "Previous";
-  Direction[Direction["Next"] = 1] = "Next";
-})(Direction$1 || (Direction$1 = {}));
-
-function getFocusableElements(container) {
-  if (container === void 0) {
-    container = document.body;
-  }
-
-  if (container == null) return [];
-  return Array.from(container.querySelectorAll(focusableSelector));
-}
-var FocusableMode;
-
-(function (FocusableMode) {
-  /** The element itself must be focusable. */
-  FocusableMode[FocusableMode["Strict"] = 0] = "Strict";
-  /** The element should be inside of a focusable element. */
-
-  FocusableMode[FocusableMode["Loose"] = 1] = "Loose";
-})(FocusableMode || (FocusableMode = {}));
-
-function isFocusableElement(element, mode) {
-  var _match;
-
-  if (mode === void 0) {
-    mode = FocusableMode.Strict;
-  }
-
-  if (element === document.body) return false;
-  return match(mode, (_match = {}, _match[FocusableMode.Strict] = function () {
-    return element.matches(focusableSelector);
-  }, _match[FocusableMode.Loose] = function () {
-    var next = element;
-
-    while (next !== null) {
-      if (next.matches(focusableSelector)) return true;
-      next = next.parentElement;
-    }
-
-    return false;
-  }, _match));
-}
-function focusIn(container, focus) {
-  var elements = Array.isArray(container) ? container.slice().sort(function (a, b) {
-    var position = a.compareDocumentPosition(b);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
-    return 0;
-  }) : getFocusableElements(container);
-  var active = document.activeElement;
-
-  var direction = function () {
-    if (focus & (Focus$1.First | Focus$1.Next)) return Direction$1.Next;
-    if (focus & (Focus$1.Previous | Focus$1.Last)) return Direction$1.Previous;
-    throw new Error('Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last');
-  }();
-
-  var startIndex = function () {
-    if (focus & Focus$1.First) return 0;
-    if (focus & Focus$1.Previous) return Math.max(0, elements.indexOf(active)) - 1;
-    if (focus & Focus$1.Next) return Math.max(0, elements.indexOf(active)) + 1;
-    if (focus & Focus$1.Last) return elements.length - 1;
-    throw new Error('Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last');
-  }();
-
-  var focusOptions = focus & Focus$1.NoScroll ? {
-    preventScroll: true
-  } : {};
-  var offset = 0;
-  var total = elements.length;
-  var next = undefined;
-
-  do {
-    var _next;
-
-    // Guard against infinite loops
-    if (offset >= total || offset + total <= 0) return FocusResult.Error;
-    var nextIdx = startIndex + offset;
-
-    if (focus & Focus$1.WrapAround) {
-      nextIdx = (nextIdx + total) % total;
-    } else {
-      if (nextIdx < 0) return FocusResult.Underflow;
-      if (nextIdx >= total) return FocusResult.Overflow;
-    }
-
-    next = elements[nextIdx]; // Try the focus the next element, might not work if it is "hidden" to the user.
-
-    (_next = next) == null ? void 0 : _next.focus(focusOptions); // Try the next one in line
-
-    offset += direction;
-  } while (next !== document.activeElement); // This is a little weird, but let me try and explain: There are a few scenario's
-  // in chrome for example where a focused `<a>` tag does not get the default focus
-  // styles and sometimes they do. This highly depends on whether you started by
-  // clicking or by using your keyboard. When you programmatically add focus `anchor.focus()`
-  // then the active element (document.activeElement) is this anchor, which is expected.
-  // However in that case the default focus styles are not applied *unless* you
-  // also add this tabindex.
-
-
-  if (!next.hasAttribute('tabindex')) next.setAttribute('tabindex', '0');
-  return FocusResult.Success;
-}
-
-var DescriptionContext = /*#__PURE__*/createContext(null);
-
-function useDescriptionContext() {
-  var context = useContext(DescriptionContext);
-
-  if (context === null) {
-    var err = new Error('You used a <Description /> component, but it is not inside a relevant parent.');
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useDescriptionContext);
-    throw err;
-  }
-
-  return context;
-}
-
-function useDescriptions() {
-  var _useState = useState([]),
-      descriptionIds = _useState[0],
-      setDescriptionIds = _useState[1];
-
-  return [// The actual id's as string or undefined
-  descriptionIds.length > 0 ? descriptionIds.join(' ') : undefined, // The provider component
-  useMemo(function () {
-    return function DescriptionProvider(props) {
-      var register = useCallback(function (value) {
-        setDescriptionIds(function (existing) {
-          return [].concat(existing, [value]);
-        });
-        return function () {
-          return setDescriptionIds(function (existing) {
-            var clone = existing.slice();
-            var idx = clone.indexOf(value);
-            if (idx !== -1) clone.splice(idx, 1);
-            return clone;
-          });
-        };
-      }, []);
-      var contextBag = useMemo(function () {
-        return {
-          register: register,
-          slot: props.slot,
-          name: props.name,
-          props: props.props
-        };
-      }, [register, props.slot, props.name, props.props]);
-      return React__default.createElement(DescriptionContext.Provider, {
-        value: contextBag
-      }, props.children);
-    };
-  }, [setDescriptionIds])];
-} // ---
-
-var DEFAULT_DESCRIPTION_TAG = 'p';
-function Description$2(props) {
-  var context = useDescriptionContext();
-  var id = "headlessui-description-" + useId();
-  useIsoMorphicEffect(function () {
-    return context.register(id);
-  }, [id, context.register]);
-  var passThroughProps = props;
-
-  var propsWeControl = _extends$1({}, context.props, {
-    id: id
-  });
-
-  return render({
-    props: _extends$1({}, passThroughProps, propsWeControl),
-    slot: context.slot || {},
-    defaultTag: DEFAULT_DESCRIPTION_TAG,
-    name: context.name || 'Description'
-  });
-}
-
-var Context = /*#__PURE__*/createContext(null);
-Context.displayName = 'OpenClosedContext';
-var State;
-
-(function (State) {
-  State[State["Open"] = 0] = "Open";
-  State[State["Closed"] = 1] = "Closed";
-})(State || (State = {}));
-
-function useOpenClosed() {
-  return useContext(Context);
-}
-function OpenClosedProvider(_ref) {
-  var value = _ref.value,
-      children = _ref.children;
-  return React__default.createElement(Context.Provider, {
-    value: value
-  }, children);
-}
-
-function resolveType(props) {
-  var _props$as;
-
-  if (props.type) return props.type;
-  var tag = (_props$as = props.as) != null ? _props$as : 'button';
-  if (typeof tag === 'string' && tag.toLowerCase() === 'button') return 'button';
-  return undefined;
-}
-
-function useResolveButtonType(props, ref) {
-  var _useState = useState(function () {
-    return resolveType(props);
-  }),
-      type = _useState[0],
-      setType = _useState[1];
-
-  useIsoMorphicEffect(function () {
-    setType(resolveType(props));
-  }, [props.type, props.as]);
-  useIsoMorphicEffect(function () {
-    if (type) return;
-    if (!ref.current) return;
-
-    if (ref.current instanceof HTMLButtonElement && !ref.current.hasAttribute('type')) {
-      setType('button');
-    }
-  }, [type, ref]);
-  return type;
-}
-
-var _reducers$2;
-var DisclosureStates;
-
-(function (DisclosureStates) {
-  DisclosureStates[DisclosureStates["Open"] = 0] = "Open";
-  DisclosureStates[DisclosureStates["Closed"] = 1] = "Closed";
-})(DisclosureStates || (DisclosureStates = {}));
-
-var ActionTypes$2;
-
-(function (ActionTypes) {
-  ActionTypes[ActionTypes["ToggleDisclosure"] = 0] = "ToggleDisclosure";
-  ActionTypes[ActionTypes["CloseDisclosure"] = 1] = "CloseDisclosure";
-  ActionTypes[ActionTypes["SetButtonId"] = 2] = "SetButtonId";
-  ActionTypes[ActionTypes["SetPanelId"] = 3] = "SetPanelId";
-  ActionTypes[ActionTypes["LinkPanel"] = 4] = "LinkPanel";
-  ActionTypes[ActionTypes["UnlinkPanel"] = 5] = "UnlinkPanel";
-})(ActionTypes$2 || (ActionTypes$2 = {}));
-
-var reducers$2 = (_reducers$2 = {}, _reducers$2[ActionTypes$2.ToggleDisclosure] = function (state) {
-  var _match;
-
-  return _extends$1({}, state, {
-    disclosureState: match(state.disclosureState, (_match = {}, _match[DisclosureStates.Open] = DisclosureStates.Closed, _match[DisclosureStates.Closed] = DisclosureStates.Open, _match))
-  });
-}, _reducers$2[ActionTypes$2.CloseDisclosure] = function (state) {
-  if (state.disclosureState === DisclosureStates.Closed) return state;
-  return _extends$1({}, state, {
-    disclosureState: DisclosureStates.Closed
-  });
-}, _reducers$2[ActionTypes$2.LinkPanel] = function (state) {
-  if (state.linkedPanel === true) return state;
-  return _extends$1({}, state, {
-    linkedPanel: true
-  });
-}, _reducers$2[ActionTypes$2.UnlinkPanel] = function (state) {
-  if (state.linkedPanel === false) return state;
-  return _extends$1({}, state, {
-    linkedPanel: false
-  });
-}, _reducers$2[ActionTypes$2.SetButtonId] = function (state, action) {
-  if (state.buttonId === action.buttonId) return state;
-  return _extends$1({}, state, {
-    buttonId: action.buttonId
-  });
-}, _reducers$2[ActionTypes$2.SetPanelId] = function (state, action) {
-  if (state.panelId === action.panelId) return state;
-  return _extends$1({}, state, {
-    panelId: action.panelId
-  });
-}, _reducers$2);
-var DisclosureContext = /*#__PURE__*/createContext(null);
-DisclosureContext.displayName = 'DisclosureContext';
-
-function useDisclosureContext(component) {
-  var context = useContext(DisclosureContext);
-
-  if (context === null) {
-    var err = new Error("<" + component + " /> is missing a parent <" + Disclosure.name + " /> component.");
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useDisclosureContext);
-    throw err;
-  }
-
-  return context;
-}
-
-var DisclosureAPIContext = /*#__PURE__*/createContext(null);
-DisclosureAPIContext.displayName = 'DisclosureAPIContext';
-
-function useDisclosureAPIContext(component) {
-  var context = useContext(DisclosureAPIContext);
-
-  if (context === null) {
-    var err = new Error("<" + component + " /> is missing a parent <" + Disclosure.name + " /> component.");
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useDisclosureAPIContext);
-    throw err;
-  }
-
-  return context;
-}
-
-var DisclosurePanelContext = /*#__PURE__*/createContext(null);
-DisclosurePanelContext.displayName = 'DisclosurePanelContext';
-
-function useDisclosurePanelContext() {
-  return useContext(DisclosurePanelContext);
-}
-
-function stateReducer$2(state, action) {
-  return match(action.type, reducers$2, state, action);
-} // ---
-
-
-var DEFAULT_DISCLOSURE_TAG = Fragment$2;
-function Disclosure(props) {
-  var _match2;
-
-  var _props$defaultOpen = props.defaultOpen,
-      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
-      passthroughProps = _objectWithoutPropertiesLoose$1(props, ["defaultOpen"]);
-
-  var buttonId = "headlessui-disclosure-button-" + useId();
-  var panelId = "headlessui-disclosure-panel-" + useId();
-  var reducerBag = useReducer(stateReducer$2, {
-    disclosureState: defaultOpen ? DisclosureStates.Open : DisclosureStates.Closed,
-    linkedPanel: false,
-    buttonId: buttonId,
-    panelId: panelId
-  });
-  var disclosureState = reducerBag[0].disclosureState,
-      dispatch = reducerBag[1];
-  useEffect(function () {
-    return dispatch({
-      type: ActionTypes$2.SetButtonId,
-      buttonId: buttonId
-    });
-  }, [buttonId, dispatch]);
-  useEffect(function () {
-    return dispatch({
-      type: ActionTypes$2.SetPanelId,
-      panelId: panelId
-    });
-  }, [panelId, dispatch]);
-  var close = useCallback(function (focusableElement) {
-    dispatch({
-      type: ActionTypes$2.CloseDisclosure
-    });
-
-    var restoreElement = function () {
-      if (!focusableElement) return document.getElementById(buttonId);
-      if (focusableElement instanceof HTMLElement) return focusableElement;
-      if (focusableElement.current instanceof HTMLElement) return focusableElement.current;
-      return document.getElementById(buttonId);
-    }();
-
-    restoreElement == null ? void 0 : restoreElement.focus();
-  }, [dispatch, buttonId]);
-  var api = useMemo(function () {
-    return {
-      close: close
-    };
-  }, [close]);
-  var slot = useMemo(function () {
-    return {
-      open: disclosureState === DisclosureStates.Open,
-      close: close
-    };
-  }, [disclosureState, close]);
-  return React__default.createElement(DisclosureContext.Provider, {
-    value: reducerBag
-  }, React__default.createElement(DisclosureAPIContext.Provider, {
-    value: api
-  }, React__default.createElement(OpenClosedProvider, {
-    value: match(disclosureState, (_match2 = {}, _match2[DisclosureStates.Open] = State.Open, _match2[DisclosureStates.Closed] = State.Closed, _match2))
-  }, render({
-    props: passthroughProps,
-    slot: slot,
-    defaultTag: DEFAULT_DISCLOSURE_TAG,
-    name: 'Disclosure'
-  }))));
-} // ---
-
-var DEFAULT_BUTTON_TAG$1 = 'button';
-var Button$7 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
-  var _useDisclosureContext = useDisclosureContext([Disclosure.name, Button.name].join('.')),
-      state = _useDisclosureContext[0],
-      dispatch = _useDisclosureContext[1];
-
-  var internalButtonRef = useRef(null);
-  var buttonRef = useSyncRefs(internalButtonRef, ref);
-  var panelContext = useDisclosurePanelContext();
-  var isWithinPanel = panelContext === null ? false : panelContext === state.panelId;
-  var handleKeyDown = useCallback(function (event) {
-    var _document$getElementB;
-
-    if (isWithinPanel) {
-      if (state.disclosureState === DisclosureStates.Closed) return;
-
-      switch (event.key) {
-        case Keys.Space:
-        case Keys.Enter:
-          event.preventDefault();
-          event.stopPropagation();
-          dispatch({
-            type: ActionTypes$2.ToggleDisclosure
-          });
-          (_document$getElementB = document.getElementById(state.buttonId)) == null ? void 0 : _document$getElementB.focus();
-          break;
-      }
-    } else {
-      switch (event.key) {
-        case Keys.Space:
-        case Keys.Enter:
-          event.preventDefault();
-          event.stopPropagation();
-          dispatch({
-            type: ActionTypes$2.ToggleDisclosure
-          });
-          break;
-      }
-    }
-  }, [dispatch, isWithinPanel, state.disclosureState]);
-  var handleKeyUp = useCallback(function (event) {
-    switch (event.key) {
-      case Keys.Space:
-        // Required for firefox, event.preventDefault() in handleKeyDown for
-        // the Space key doesn't cancel the handleKeyUp, which in turn
-        // triggers a *click*.
-        event.preventDefault();
-        break;
-    }
-  }, []);
-  var handleClick = useCallback(function (event) {
-    if (isDisabledReactIssue7711(event.currentTarget)) return;
-    if (props.disabled) return;
-
-    if (isWithinPanel) {
-      var _document$getElementB2;
-
-      dispatch({
-        type: ActionTypes$2.ToggleDisclosure
-      });
-      (_document$getElementB2 = document.getElementById(state.buttonId)) == null ? void 0 : _document$getElementB2.focus();
-    } else {
-      dispatch({
-        type: ActionTypes$2.ToggleDisclosure
-      });
-    }
-  }, [dispatch, props.disabled, state.buttonId, isWithinPanel]);
-  var slot = useMemo(function () {
-    return {
-      open: state.disclosureState === DisclosureStates.Open
-    };
-  }, [state]);
-  var type = useResolveButtonType(props, internalButtonRef);
-  var passthroughProps = props;
-  var propsWeControl = isWithinPanel ? {
-    ref: buttonRef,
-    type: type,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick
-  } : {
-    ref: buttonRef,
-    id: state.buttonId,
-    type: type,
-    'aria-expanded': props.disabled ? undefined : state.disclosureState === DisclosureStates.Open,
-    'aria-controls': state.linkedPanel ? state.panelId : undefined,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    onClick: handleClick
-  };
-  return render({
-    props: _extends$1({}, passthroughProps, propsWeControl),
-    slot: slot,
-    defaultTag: DEFAULT_BUTTON_TAG$1,
-    name: 'Disclosure.Button'
-  });
-}); // ---
-
-var DEFAULT_PANEL_TAG = 'div';
-var PanelRenderFeatures = Features.RenderStrategy | Features.Static;
-var Panel = /*#__PURE__*/forwardRefWithAs(function Panel(props, ref) {
-  var _useDisclosureContext2 = useDisclosureContext([Disclosure.name, Panel.name].join('.')),
-      state = _useDisclosureContext2[0],
-      dispatch = _useDisclosureContext2[1];
-
-  var _useDisclosureAPICont = useDisclosureAPIContext([Disclosure.name, Panel.name].join('.')),
-      close = _useDisclosureAPICont.close;
-
-  var panelRef = useSyncRefs(ref, function () {
-    if (state.linkedPanel) return;
-    dispatch({
-      type: ActionTypes$2.LinkPanel
-    });
-  });
-  var usesOpenClosedState = useOpenClosed();
-
-  var visible = function () {
-    if (usesOpenClosedState !== null) {
-      return usesOpenClosedState === State.Open;
-    }
-
-    return state.disclosureState === DisclosureStates.Open;
-  }(); // Unlink on "unmount" myself
-
-
-  useEffect(function () {
-    return function () {
-      return dispatch({
-        type: ActionTypes$2.UnlinkPanel
-      });
-    };
-  }, [dispatch]); // Unlink on "unmount" children
-
-  useEffect(function () {
-    var _props$unmount;
-
-    if (state.disclosureState === DisclosureStates.Closed && ((_props$unmount = props.unmount) != null ? _props$unmount : true)) {
-      dispatch({
-        type: ActionTypes$2.UnlinkPanel
-      });
-    }
-  }, [state.disclosureState, props.unmount, dispatch]);
-  var slot = useMemo(function () {
-    return {
-      open: state.disclosureState === DisclosureStates.Open,
-      close: close
-    };
-  }, [state, close]);
-  var propsWeControl = {
-    ref: panelRef,
-    id: state.panelId
-  };
-  var passthroughProps = props;
-  return React__default.createElement(DisclosurePanelContext.Provider, {
-    value: state.panelId
-  }, render({
-    props: _extends$1({}, passthroughProps, propsWeControl),
-    slot: slot,
-    defaultTag: DEFAULT_PANEL_TAG,
-    features: PanelRenderFeatures,
-    visible: visible,
-    name: 'Disclosure.Panel'
-  }));
-}); // ---
-
-Disclosure.Button = Button$7;
-Disclosure.Panel = Panel;
-
-function disposables() {
-  var disposables = [];
-  var api = {
-    requestAnimationFrame: function (_requestAnimationFrame) {
-      function requestAnimationFrame() {
-        return _requestAnimationFrame.apply(this, arguments);
-      }
-
-      requestAnimationFrame.toString = function () {
-        return _requestAnimationFrame.toString();
-      };
-
-      return requestAnimationFrame;
-    }(function () {
-      var raf = requestAnimationFrame.apply(void 0, arguments);
-      api.add(function () {
-        return cancelAnimationFrame(raf);
-      });
-    }),
-    nextFrame: function nextFrame() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      api.requestAnimationFrame(function () {
-        api.requestAnimationFrame.apply(api, args);
-      });
-    },
-    setTimeout: function (_setTimeout) {
-      function setTimeout() {
-        return _setTimeout.apply(this, arguments);
-      }
-
-      setTimeout.toString = function () {
-        return _setTimeout.toString();
-      };
-
-      return setTimeout;
-    }(function () {
-      var timer = setTimeout.apply(void 0, arguments);
-      api.add(function () {
-        return clearTimeout(timer);
-      });
-    }),
-    add: function add(cb) {
-      disposables.push(cb);
-    },
-    dispose: function dispose() {
-      for (var _iterator = _createForOfIteratorHelperLoose(disposables.splice(0)), _step; !(_step = _iterator()).done;) {
-        var dispose = _step.value;
-        dispose();
-      }
-    }
-  };
-  return api;
-}
-
-function useDisposables() {
-  // Using useState instead of useRef so that we can use the initializer function.
-  var _useState = useState(disposables),
-      d = _useState[0];
-
-  useEffect(function () {
-    return function () {
-      return d.dispose();
-    };
-  }, [d]);
-  return d;
-}
-
-function useComputed(cb, dependencies) {
-  var _useState = useState(cb),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var cbRef = useRef(cb);
-  useIsoMorphicEffect(function () {
-    cbRef.current = cb;
-  }, [cb]);
-  useIsoMorphicEffect(function () {
-    return setValue(cbRef.current);
-  }, [cbRef, setValue].concat(dependencies));
-  return value;
-}
-
-function assertNever(x) {
-  throw new Error('Unexpected object: ' + x);
-}
-
-var Focus;
-
-(function (Focus) {
-  /** Focus the first non-disabled item. */
-  Focus[Focus["First"] = 0] = "First";
-  /** Focus the previous non-disabled item. */
-
-  Focus[Focus["Previous"] = 1] = "Previous";
-  /** Focus the next non-disabled item. */
-
-  Focus[Focus["Next"] = 2] = "Next";
-  /** Focus the last non-disabled item. */
-
-  Focus[Focus["Last"] = 3] = "Last";
-  /** Focus a specific item based on the `id` of the item. */
-
-  Focus[Focus["Specific"] = 4] = "Specific";
-  /** Focus no items at all. */
-
-  Focus[Focus["Nothing"] = 5] = "Nothing";
-})(Focus || (Focus = {}));
-
-function calculateActiveIndex(action, resolvers) {
-  var items = resolvers.resolveItems();
-  if (items.length <= 0) return null;
-  var currentActiveIndex = resolvers.resolveActiveIndex();
-  var activeIndex = currentActiveIndex != null ? currentActiveIndex : -1;
-
-  var nextActiveIndex = function () {
-    switch (action.focus) {
-      case Focus.First:
-        return items.findIndex(function (item) {
-          return !resolvers.resolveDisabled(item);
-        });
-
-      case Focus.Previous:
-        {
-          var idx = items.slice().reverse().findIndex(function (item, idx, all) {
-            if (activeIndex !== -1 && all.length - idx - 1 >= activeIndex) return false;
-            return !resolvers.resolveDisabled(item);
-          });
-          if (idx === -1) return idx;
-          return items.length - 1 - idx;
-        }
-
-      case Focus.Next:
-        return items.findIndex(function (item, idx) {
-          if (idx <= activeIndex) return false;
-          return !resolvers.resolveDisabled(item);
-        });
-
-      case Focus.Last:
-        {
-          var _idx = items.slice().reverse().findIndex(function (item) {
-            return !resolvers.resolveDisabled(item);
-          });
-
-          if (_idx === -1) return _idx;
-          return items.length - 1 - _idx;
-        }
-
-      case Focus.Specific:
-        return items.findIndex(function (item) {
-          return resolvers.resolveId(item) === action.id;
-        });
-
-      case Focus.Nothing:
-        return null;
-
-      default:
-        assertNever(action);
-    }
-  }();
-
-  return nextActiveIndex === -1 ? currentActiveIndex : nextActiveIndex;
-}
-
-var _reducers$1;
-var ListboxStates;
-
-(function (ListboxStates) {
-  ListboxStates[ListboxStates["Open"] = 0] = "Open";
-  ListboxStates[ListboxStates["Closed"] = 1] = "Closed";
-})(ListboxStates || (ListboxStates = {}));
-
-var ActionTypes$1;
-
-(function (ActionTypes) {
-  ActionTypes[ActionTypes["OpenListbox"] = 0] = "OpenListbox";
-  ActionTypes[ActionTypes["CloseListbox"] = 1] = "CloseListbox";
-  ActionTypes[ActionTypes["SetDisabled"] = 2] = "SetDisabled";
-  ActionTypes[ActionTypes["SetOrientation"] = 3] = "SetOrientation";
-  ActionTypes[ActionTypes["GoToOption"] = 4] = "GoToOption";
-  ActionTypes[ActionTypes["Search"] = 5] = "Search";
-  ActionTypes[ActionTypes["ClearSearch"] = 6] = "ClearSearch";
-  ActionTypes[ActionTypes["RegisterOption"] = 7] = "RegisterOption";
-  ActionTypes[ActionTypes["UnregisterOption"] = 8] = "UnregisterOption";
-})(ActionTypes$1 || (ActionTypes$1 = {}));
-
-var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = function (state) {
-  if (state.disabled) return state;
-  if (state.listboxState === ListboxStates.Closed) return state;
-  return _extends$1({}, state, {
-    activeOptionIndex: null,
-    listboxState: ListboxStates.Closed
-  });
-}, _reducers$1[ActionTypes$1.OpenListbox] = function (state) {
-  if (state.disabled) return state;
-  if (state.listboxState === ListboxStates.Open) return state;
-  return _extends$1({}, state, {
-    listboxState: ListboxStates.Open
-  });
-}, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
-  if (state.disabled === action.disabled) return state;
-  return _extends$1({}, state, {
-    disabled: action.disabled
-  });
-}, _reducers$1[ActionTypes$1.SetOrientation] = function (state, action) {
-  if (state.orientation === action.orientation) return state;
-  return _extends$1({}, state, {
-    orientation: action.orientation
-  });
-}, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
-  if (state.disabled) return state;
-  if (state.listboxState === ListboxStates.Closed) return state;
-  var activeOptionIndex = calculateActiveIndex(action, {
-    resolveItems: function resolveItems() {
-      return state.options;
-    },
-    resolveActiveIndex: function resolveActiveIndex() {
-      return state.activeOptionIndex;
-    },
-    resolveId: function resolveId(item) {
-      return item.id;
-    },
-    resolveDisabled: function resolveDisabled(item) {
-      return item.dataRef.current.disabled;
-    }
-  });
-  if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$1({}, state, {
-    searchQuery: '',
-    activeOptionIndex: activeOptionIndex
-  });
-}, _reducers$1[ActionTypes$1.Search] = function (state, action) {
-  if (state.disabled) return state;
-  if (state.listboxState === ListboxStates.Closed) return state;
-  var searchQuery = state.searchQuery + action.value.toLowerCase();
-  var match = state.options.findIndex(function (option) {
-    var _option$dataRef$curre;
-
-    return !option.dataRef.current.disabled && ((_option$dataRef$curre = option.dataRef.current.textValue) == null ? void 0 : _option$dataRef$curre.startsWith(searchQuery));
-  });
-  if (match === -1 || match === state.activeOptionIndex) return _extends$1({}, state, {
-    searchQuery: searchQuery
-  });
-  return _extends$1({}, state, {
-    searchQuery: searchQuery,
-    activeOptionIndex: match
-  });
-}, _reducers$1[ActionTypes$1.ClearSearch] = function (state) {
-  if (state.disabled) return state;
-  if (state.listboxState === ListboxStates.Closed) return state;
-  if (state.searchQuery === '') return state;
-  return _extends$1({}, state, {
-    searchQuery: ''
-  });
-}, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$1({}, state, {
-    options: [].concat(state.options, [{
-      id: action.id,
-      dataRef: action.dataRef
-    }])
-  });
-}, _reducers$1[ActionTypes$1.UnregisterOption] = function (state, action) {
-  var nextOptions = state.options.slice();
-  var currentActiveOption = state.activeOptionIndex !== null ? nextOptions[state.activeOptionIndex] : null;
-  var idx = nextOptions.findIndex(function (a) {
-    return a.id === action.id;
-  });
-  if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$1({}, state, {
-    options: nextOptions,
-    activeOptionIndex: function () {
-      if (idx === state.activeOptionIndex) return null;
-      if (currentActiveOption === null) return null; // If we removed the option before the actual active index, then it would be out of sync. To
-      // fix this, we will find the correct (new) index position.
-
-      return nextOptions.indexOf(currentActiveOption);
-    }()
-  });
-}, _reducers$1);
-var ListboxContext = /*#__PURE__*/createContext(null);
-ListboxContext.displayName = 'ListboxContext';
-
-function useListboxContext(component) {
-  var context = useContext(ListboxContext);
-
-  if (context === null) {
-    var err = new Error("<" + component + " /> is missing a parent <" + Listbox.name + " /> component.");
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxContext);
-    throw err;
-  }
-
-  return context;
-}
-
-function stateReducer$1(state, action) {
-  return match(action.type, reducers$1, state, action);
-} // ---
-
-
-var DEFAULT_LISTBOX_TAG = Fragment$2;
-function Listbox(props) {
-  var _match;
-
-  var value = props.value,
-      onChange = props.onChange,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$horizontal = props.horizontal,
-      horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
-      passThroughProps = _objectWithoutPropertiesLoose$1(props, ["value", "onChange", "disabled", "horizontal"]);
-
-  var orientation = horizontal ? 'horizontal' : 'vertical';
-  var reducerBag = useReducer(stateReducer$1, {
-    listboxState: ListboxStates.Closed,
-    propsRef: {
-      current: {
-        value: value,
-        onChange: onChange
-      }
-    },
-    labelRef: createRef(),
-    buttonRef: createRef(),
-    optionsRef: createRef(),
-    disabled: disabled,
-    orientation: orientation,
-    options: [],
-    searchQuery: '',
-    activeOptionIndex: null
-  });
-  var _reducerBag$ = reducerBag[0],
-      listboxState = _reducerBag$.listboxState,
-      propsRef = _reducerBag$.propsRef,
-      optionsRef = _reducerBag$.optionsRef,
-      buttonRef = _reducerBag$.buttonRef,
-      dispatch = reducerBag[1];
-  useIsoMorphicEffect(function () {
-    propsRef.current.value = value;
-  }, [value, propsRef]);
-  useIsoMorphicEffect(function () {
-    propsRef.current.onChange = onChange;
-  }, [onChange, propsRef]);
-  useIsoMorphicEffect(function () {
-    return dispatch({
-      type: ActionTypes$1.SetDisabled,
-      disabled: disabled
-    });
-  }, [disabled]);
-  useIsoMorphicEffect(function () {
-    return dispatch({
-      type: ActionTypes$1.SetOrientation,
-      orientation: orientation
-    });
-  }, [orientation]); // Handle outside click
-
-  useWindowEvent('mousedown', function (event) {
-    var _buttonRef$current, _optionsRef$current;
-
-    var target = event.target;
-    if (listboxState !== ListboxStates.Open) return;
-    if ((_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.contains(target)) return;
-    if ((_optionsRef$current = optionsRef.current) == null ? void 0 : _optionsRef$current.contains(target)) return;
-    dispatch({
-      type: ActionTypes$1.CloseListbox
-    });
-
-    if (!isFocusableElement(target, FocusableMode.Loose)) {
-      var _buttonRef$current2;
-
-      event.preventDefault();
-      (_buttonRef$current2 = buttonRef.current) == null ? void 0 : _buttonRef$current2.focus();
-    }
-  });
-  var slot = useMemo(function () {
-    return {
-      open: listboxState === ListboxStates.Open,
-      disabled: disabled
-    };
-  }, [listboxState, disabled]);
-  return React__default.createElement(ListboxContext.Provider, {
-    value: reducerBag
-  }, React__default.createElement(OpenClosedProvider, {
-    value: match(listboxState, (_match = {}, _match[ListboxStates.Open] = State.Open, _match[ListboxStates.Closed] = State.Closed, _match))
-  }, render({
-    props: passThroughProps,
-    slot: slot,
-    defaultTag: DEFAULT_LISTBOX_TAG,
-    name: 'Listbox'
-  })));
-} // ---
-
-var DEFAULT_BUTTON_TAG = 'button';
-var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
-  var _state$optionsRef$cur;
-
-  var _useListboxContext = useListboxContext([Listbox.name, Button.name].join('.')),
-      state = _useListboxContext[0],
-      dispatch = _useListboxContext[1];
-
-  var buttonRef = useSyncRefs(state.buttonRef, ref);
-  var id = "headlessui-listbox-button-" + useId();
-  var d = useDisposables();
-  var handleKeyDown = useCallback(function (event) {
-    switch (event.key) {
-      // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
-      case Keys.Space:
-      case Keys.Enter:
-      case Keys.ArrowDown:
-        event.preventDefault();
-        dispatch({
-          type: ActionTypes$1.OpenListbox
-        });
-        d.nextFrame(function () {
-          if (!state.propsRef.current.value) dispatch({
-            type: ActionTypes$1.GoToOption,
-            focus: Focus.First
-          });
-        });
-        break;
-
-      case Keys.ArrowUp:
-        event.preventDefault();
-        dispatch({
-          type: ActionTypes$1.OpenListbox
-        });
-        d.nextFrame(function () {
-          if (!state.propsRef.current.value) dispatch({
-            type: ActionTypes$1.GoToOption,
-            focus: Focus.Last
-          });
-        });
-        break;
-    }
-  }, [dispatch, state, d]);
-  var handleKeyUp = useCallback(function (event) {
-    switch (event.key) {
-      case Keys.Space:
-        // Required for firefox, event.preventDefault() in handleKeyDown for
-        // the Space key doesn't cancel the handleKeyUp, which in turn
-        // triggers a *click*.
-        event.preventDefault();
-        break;
-    }
-  }, []);
-  var handleClick = useCallback(function (event) {
-    if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault();
-
-    if (state.listboxState === ListboxStates.Open) {
-      dispatch({
-        type: ActionTypes$1.CloseListbox
-      });
-      d.nextFrame(function () {
-        var _state$buttonRef$curr;
-
-        return (_state$buttonRef$curr = state.buttonRef.current) == null ? void 0 : _state$buttonRef$curr.focus({
-          preventScroll: true
-        });
-      });
-    } else {
-      event.preventDefault();
-      dispatch({
-        type: ActionTypes$1.OpenListbox
-      });
-    }
-  }, [dispatch, d, state]);
-  var labelledby = useComputed(function () {
-    if (!state.labelRef.current) return undefined;
-    return [state.labelRef.current.id, id].join(' ');
-  }, [state.labelRef.current, id]);
-  var slot = useMemo(function () {
-    return {
-      open: state.listboxState === ListboxStates.Open,
-      disabled: state.disabled
-    };
-  }, [state]);
-  var passthroughProps = props;
-  var propsWeControl = {
-    ref: buttonRef,
-    id: id,
-    type: useResolveButtonType(props, state.buttonRef),
-    'aria-haspopup': true,
-    'aria-controls': (_state$optionsRef$cur = state.optionsRef.current) == null ? void 0 : _state$optionsRef$cur.id,
-    'aria-expanded': state.disabled ? undefined : state.listboxState === ListboxStates.Open,
-    'aria-labelledby': labelledby,
-    disabled: state.disabled,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    onClick: handleClick
-  };
-  return render({
-    props: _extends$1({}, passthroughProps, propsWeControl),
-    slot: slot,
-    defaultTag: DEFAULT_BUTTON_TAG,
-    name: 'Listbox.Button'
-  });
-}); // ---
-
-var DEFAULT_LABEL_TAG$1 = 'label';
-
-function Label$4(props) {
-  var _useListboxContext2 = useListboxContext([Listbox.name, Label$4.name].join('.')),
-      state = _useListboxContext2[0];
-
-  var id = "headlessui-listbox-label-" + useId();
-  var handleClick = useCallback(function () {
-    var _state$buttonRef$curr2;
-
-    return (_state$buttonRef$curr2 = state.buttonRef.current) == null ? void 0 : _state$buttonRef$curr2.focus({
-      preventScroll: true
-    });
-  }, [state.buttonRef]);
-  var slot = useMemo(function () {
-    return {
-      open: state.listboxState === ListboxStates.Open,
-      disabled: state.disabled
-    };
-  }, [state]);
-  var propsWeControl = {
-    ref: state.labelRef,
-    id: id,
-    onClick: handleClick
-  };
-  return render({
-    props: _extends$1({}, props, propsWeControl),
-    slot: slot,
-    defaultTag: DEFAULT_LABEL_TAG$1,
-    name: 'Listbox.Label'
-  });
-} // ---
-
-
-var DEFAULT_OPTIONS_TAG = 'ul';
-var OptionsRenderFeatures = Features.RenderStrategy | Features.Static;
-var Options = /*#__PURE__*/forwardRefWithAs(function Options(props, ref) {
-  var _state$options$state$;
-
-  var _useListboxContext3 = useListboxContext([Listbox.name, Options.name].join('.')),
-      state = _useListboxContext3[0],
-      dispatch = _useListboxContext3[1];
-
-  var optionsRef = useSyncRefs(state.optionsRef, ref);
-  var id = "headlessui-listbox-options-" + useId();
-  var d = useDisposables();
-  var searchDisposables = useDisposables();
-  var usesOpenClosedState = useOpenClosed();
-
-  var visible = function () {
-    if (usesOpenClosedState !== null) {
-      return usesOpenClosedState === State.Open;
-    }
-
-    return state.listboxState === ListboxStates.Open;
-  }();
-
-  useIsoMorphicEffect(function () {
-    var container = state.optionsRef.current;
-    if (!container) return;
-    if (state.listboxState !== ListboxStates.Open) return;
-    if (container === document.activeElement) return;
-    container.focus({
-      preventScroll: true
-    });
-  }, [state.listboxState, state.optionsRef]);
-  var handleKeyDown = useCallback(function (event) {
-    searchDisposables.dispose();
-
-    switch (event.key) {
-      // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
-      // @ts-expect-error Fallthrough is expected here
-      case Keys.Space:
-        if (state.searchQuery !== '') {
-          event.preventDefault();
-          event.stopPropagation();
-          return dispatch({
-            type: ActionTypes$1.Search,
-            value: event.key
-          });
-        }
-
-      // When in type ahead mode, fallthrough
-
-      case Keys.Enter:
-        event.preventDefault();
-        event.stopPropagation();
-        dispatch({
-          type: ActionTypes$1.CloseListbox
-        });
-
-        if (state.activeOptionIndex !== null) {
-          var dataRef = state.options[state.activeOptionIndex].dataRef;
-          state.propsRef.current.onChange(dataRef.current.value);
-        }
-
-        disposables().nextFrame(function () {
-          var _state$buttonRef$curr3;
-
-          return (_state$buttonRef$curr3 = state.buttonRef.current) == null ? void 0 : _state$buttonRef$curr3.focus({
-            preventScroll: true
-          });
-        });
-        break;
-
-      case match(state.orientation, {
-        vertical: Keys.ArrowDown,
-        horizontal: Keys.ArrowRight
-      }):
-        event.preventDefault();
-        event.stopPropagation();
-        return dispatch({
-          type: ActionTypes$1.GoToOption,
-          focus: Focus.Next
-        });
-
-      case match(state.orientation, {
-        vertical: Keys.ArrowUp,
-        horizontal: Keys.ArrowLeft
-      }):
-        event.preventDefault();
-        event.stopPropagation();
-        return dispatch({
-          type: ActionTypes$1.GoToOption,
-          focus: Focus.Previous
-        });
-
-      case Keys.Home:
-      case Keys.PageUp:
-        event.preventDefault();
-        event.stopPropagation();
-        return dispatch({
-          type: ActionTypes$1.GoToOption,
-          focus: Focus.First
-        });
-
-      case Keys.End:
-      case Keys.PageDown:
-        event.preventDefault();
-        event.stopPropagation();
-        return dispatch({
-          type: ActionTypes$1.GoToOption,
-          focus: Focus.Last
-        });
-
-      case Keys.Escape:
-        event.preventDefault();
-        event.stopPropagation();
-        dispatch({
-          type: ActionTypes$1.CloseListbox
-        });
-        return d.nextFrame(function () {
-          var _state$buttonRef$curr4;
-
-          return (_state$buttonRef$curr4 = state.buttonRef.current) == null ? void 0 : _state$buttonRef$curr4.focus({
-            preventScroll: true
-          });
-        });
-
-      case Keys.Tab:
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-
-      default:
-        if (event.key.length === 1) {
-          dispatch({
-            type: ActionTypes$1.Search,
-            value: event.key
-          });
-          searchDisposables.setTimeout(function () {
-            return dispatch({
-              type: ActionTypes$1.ClearSearch
-            });
-          }, 350);
-        }
-
-        break;
-    }
-  }, [d, dispatch, searchDisposables, state]);
-  var labelledby = useComputed(function () {
-    var _state$labelRef$curre, _state$labelRef$curre2, _state$buttonRef$curr5;
-
-    return (_state$labelRef$curre = (_state$labelRef$curre2 = state.labelRef.current) == null ? void 0 : _state$labelRef$curre2.id) != null ? _state$labelRef$curre : (_state$buttonRef$curr5 = state.buttonRef.current) == null ? void 0 : _state$buttonRef$curr5.id;
-  }, [state.labelRef.current, state.buttonRef.current]);
-  var slot = useMemo(function () {
-    return {
-      open: state.listboxState === ListboxStates.Open
-    };
-  }, [state]);
-  var propsWeControl = {
-    'aria-activedescendant': state.activeOptionIndex === null ? undefined : (_state$options$state$ = state.options[state.activeOptionIndex]) == null ? void 0 : _state$options$state$.id,
-    'aria-labelledby': labelledby,
-    'aria-orientation': state.orientation,
-    id: id,
-    onKeyDown: handleKeyDown,
-    role: 'listbox',
-    tabIndex: 0,
-    ref: optionsRef
-  };
-  var passthroughProps = props;
-  return render({
-    props: _extends$1({}, passthroughProps, propsWeControl),
-    slot: slot,
-    defaultTag: DEFAULT_OPTIONS_TAG,
-    features: OptionsRenderFeatures,
-    visible: visible,
-    name: 'Listbox.Options'
-  });
-}); // ---
-
-var DEFAULT_OPTION_TAG$1 = 'li';
-
-function Option$2(props) {
-  var _props$disabled2 = props.disabled,
-      disabled = _props$disabled2 === void 0 ? false : _props$disabled2,
-      value = props.value,
-      passthroughProps = _objectWithoutPropertiesLoose$1(props, ["disabled", "value"]);
-
-  var _useListboxContext4 = useListboxContext([Listbox.name, Option$2.name].join('.')),
-      state = _useListboxContext4[0],
-      dispatch = _useListboxContext4[1];
-
-  var id = "headlessui-listbox-option-" + useId();
-  var active = state.activeOptionIndex !== null ? state.options[state.activeOptionIndex].id === id : false;
-  var selected = state.propsRef.current.value === value;
-  var bag = useRef({
-    disabled: disabled,
-    value: value
-  });
-  useIsoMorphicEffect(function () {
-    bag.current.disabled = disabled;
-  }, [bag, disabled]);
-  useIsoMorphicEffect(function () {
-    bag.current.value = value;
-  }, [bag, value]);
-  useIsoMorphicEffect(function () {
-    var _document$getElementB, _document$getElementB2;
-
-    bag.current.textValue = (_document$getElementB = document.getElementById(id)) == null ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) == null ? void 0 : _document$getElementB2.toLowerCase();
-  }, [bag, id]);
-  var select = useCallback(function () {
-    return state.propsRef.current.onChange(value);
-  }, [state.propsRef, value]);
-  useIsoMorphicEffect(function () {
-    dispatch({
-      type: ActionTypes$1.RegisterOption,
-      id: id,
-      dataRef: bag
-    });
-    return function () {
-      return dispatch({
-        type: ActionTypes$1.UnregisterOption,
-        id: id
-      });
-    };
-  }, [bag, id]);
-  useIsoMorphicEffect(function () {
-    var _document$getElementB3;
-
-    if (state.listboxState !== ListboxStates.Open) return;
-    if (!selected) return;
-    dispatch({
-      type: ActionTypes$1.GoToOption,
-      focus: Focus.Specific,
-      id: id
-    });
-    (_document$getElementB3 = document.getElementById(id)) == null ? void 0 : _document$getElementB3.focus == null ? void 0 : _document$getElementB3.focus();
-  }, [state.listboxState]);
-  useIsoMorphicEffect(function () {
-    if (state.listboxState !== ListboxStates.Open) return;
-    if (!active) return;
-    var d = disposables();
-    d.nextFrame(function () {
-      var _document$getElementB4;
-
-      return (_document$getElementB4 = document.getElementById(id)) == null ? void 0 : _document$getElementB4.scrollIntoView == null ? void 0 : _document$getElementB4.scrollIntoView({
-        block: 'nearest'
-      });
-    });
-    return d.dispose;
-  }, [id, active, state.listboxState]);
-  var handleClick = useCallback(function (event) {
-    if (disabled) return event.preventDefault();
-    select();
-    dispatch({
-      type: ActionTypes$1.CloseListbox
-    });
-    disposables().nextFrame(function () {
-      var _state$buttonRef$curr6;
-
-      return (_state$buttonRef$curr6 = state.buttonRef.current) == null ? void 0 : _state$buttonRef$curr6.focus({
-        preventScroll: true
-      });
-    });
-  }, [dispatch, state.buttonRef, disabled, select]);
-  var handleFocus = useCallback(function () {
-    if (disabled) return dispatch({
-      type: ActionTypes$1.GoToOption,
-      focus: Focus.Nothing
-    });
-    dispatch({
-      type: ActionTypes$1.GoToOption,
-      focus: Focus.Specific,
-      id: id
-    });
-  }, [disabled, id, dispatch]);
-  var handleMove = useCallback(function () {
-    if (disabled) return;
-    if (active) return;
-    dispatch({
-      type: ActionTypes$1.GoToOption,
-      focus: Focus.Specific,
-      id: id
-    });
-  }, [disabled, active, id, dispatch]);
-  var handleLeave = useCallback(function () {
-    if (disabled) return;
-    if (!active) return;
-    dispatch({
-      type: ActionTypes$1.GoToOption,
-      focus: Focus.Nothing
-    });
-  }, [disabled, active, dispatch]);
-  var slot = useMemo(function () {
-    return {
-      active: active,
-      selected: selected,
-      disabled: disabled
-    };
-  }, [active, selected, disabled]);
-  var propsWeControl = {
-    id: id,
-    role: 'option',
-    tabIndex: disabled === true ? undefined : -1,
-    'aria-disabled': disabled === true ? true : undefined,
-    'aria-selected': selected === true ? true : undefined,
-    disabled: undefined,
-    onClick: handleClick,
-    onFocus: handleFocus,
-    onPointerMove: handleMove,
-    onMouseMove: handleMove,
-    onPointerLeave: handleLeave,
-    onMouseLeave: handleLeave
-  };
-  return render({
-    props: _extends$1({}, passthroughProps, propsWeControl),
-    slot: slot,
-    defaultTag: DEFAULT_OPTION_TAG$1,
-    name: 'Listbox.Option'
-  });
-} // ---
-
-
-Listbox.Button = Button$6;
-Listbox.Label = Label$4;
-Listbox.Options = Options;
-Listbox.Option = Option$2;
-
-function useTreeWalker(_ref) {
-  var container = _ref.container,
-      accept = _ref.accept,
-      walk = _ref.walk,
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled;
-  var acceptRef = useRef(accept);
-  var walkRef = useRef(walk);
-  useEffect(function () {
-    acceptRef.current = accept;
-    walkRef.current = walk;
-  }, [accept, walk]);
-  useIsoMorphicEffect(function () {
-    if (!container) return;
-    if (!enabled) return;
-    var accept = acceptRef.current;
-    var walk = walkRef.current;
-    var acceptNode = Object.assign(function (node) {
-      return accept(node);
-    }, {
-      acceptNode: accept
-    });
-    var walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, acceptNode, false);
-
-    while (walker.nextNode()) {
-      walk(walker.currentNode);
-    }
-  }, [container, enabled, acceptRef, walkRef]);
-}
-
-function useFlags(initialFlags) {
-  if (initialFlags === void 0) {
-    initialFlags = 0;
-  }
-
-  var _useState = useState(initialFlags),
-      flags = _useState[0],
-      setFlags = _useState[1];
-
-  var addFlag = useCallback(function (flag) {
-    return setFlags(function (flags) {
-      return flags | flag;
-    });
-  }, [setFlags]);
-  var hasFlag = useCallback(function (flag) {
-    return Boolean(flags & flag);
-  }, [flags]);
-  var removeFlag = useCallback(function (flag) {
-    return setFlags(function (flags) {
-      return flags & ~flag;
-    });
-  }, [setFlags]);
-  var toggleFlag = useCallback(function (flag) {
-    return setFlags(function (flags) {
-      return flags ^ flag;
-    });
-  }, [setFlags]);
-  return {
-    addFlag: addFlag,
-    hasFlag: hasFlag,
-    removeFlag: removeFlag,
-    toggleFlag: toggleFlag
-  };
-}
+        .join('\n'), "\n    }\n  "));
+};
+var transformThemeIntoVariables = function (_a) {
+    // eslint-disable-next-line
+    _a.name; var _b = _a.fonts, fonts = _b === void 0 ? { url: '', config: [] } : _b, theme = __rest(_a, ["name", "fonts"]);
+    var variables = {};
+    var pending = {};
+    transformToVariables('-', variables, __assign({}, theme), pending);
+    for (var key in pending) {
+        var valueKey = pending[key];
+        if (valueKey in variables === false) {
+            delete variables[key];
+            continue;
+        }
+        variables[key] = "var(".concat(valueKey, ")");
+    }
+    return stringify(variables) + transformFonts(fonts);
+};
+var transformFonts = function (fonts) {
+    if (fonts.config.length === 0) {
+        return '';
+    }
+    var css = fonts.config
+        .map(function (font) {
+        var css = [
+            "font-family: \"".concat(font.family, "\""),
+            "src: url(\"".concat(fonts.url, "/").concat(font.src, "\") format(\"opentype\")"),
+        ];
+        if (font.weight) {
+            css.push("font-weight: ".concat(font.weight));
+        }
+        if (font.stretch) {
+            css.push("font-stretch: ".concat(font.stretch));
+        }
+        if (font.style) {
+            css.push("font-style: ".concat(font.style));
+        }
+        return inline("@font-face { ".concat(css.join(';\n'), "; }"));
+    })
+        .join('\n');
+    return inline("\n    ".concat(css, "\n    body {\n      font-family: \"").concat(fonts.config[0].family, "\";\n    }\n  "));
+};
+var inline = function (text) {
+    return text.trim().replace(/\s+/g, ' ').replace(/\n/g, '');
+};
 
-var LabelContext = /*#__PURE__*/createContext(null);
+var ThemeProvider = function (_a) {
+    var theme = _a.theme, children = _a.children;
+    var parsedTheme = useMemo(function () { return applyVariablesIntoTheme(theme); }, [theme]);
+    return (jsx$1(ThemeProvider$1, __assign({ theme: parsedTheme }, { children: jsx$1(AssetsProvider, __assign({ assets: parsedTheme.assets }, { children: children }), void 0) }), void 0));
+};
+var useTheme = function () { return useTheme$1(); };
+var DefaultContainer = function (props) { return jsx$1("div", __assign({}, props), void 0); };
+var ThemeVariables = function (_a) {
+    var _b;
+    var theme = _a.theme, _c = _a.Container, Container = _c === void 0 ? DefaultContainer : _c;
+    var _d = useState(function () { return transformThemeIntoVariables(theme); }), variables = _d[0], setVariables = _d[1];
+    useEffect(function () {
+        setVariables(transformThemeIntoVariables(theme));
+    }, [theme]);
+    return (jsx$1(Container, { children: jsx$1("style", { "data-theme-name": ((_b = theme.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || 'unamed-theme', dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
+};
+var AssetsContext = createContext({
+    images: {
+        favicon: '',
+        logo: '',
+    },
+});
+var AssetsProvider = function (_a) {
+    var assets = _a.assets, children = _a.children;
+    var context = useMemo(function () { return assets; }, [assets]);
+    return jsx$1(AssetsContext.Provider, __assign({ value: context }, { children: children }), void 0);
+};
+var useThemeAssets = function () { return useContext(AssetsContext); };
 
-function useLabelContext() {
-  var context = useContext(LabelContext);
+var Container$F = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"])), function (_a) {
+    var flex = _a.flex;
+    return flex &&
+        "display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;";
+}, function (_a) {
+    var widthAuto = _a.widthAuto;
+    return (widthAuto ? 'auto' : 'fit-content');
+}, function (props) { return props.backgroundColor; }, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
+    return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
+});
+var Card = function (_a) {
+    var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
+    var theme = useTheme();
+    return (jsx$1(Container$F, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
+};
+var Card$1 = Object.assign(Card, {
+    Header: CardHeader,
+    Footer: CardFooter,
+    Body: CardBody,
+});
+var templateObject_1$13;
 
-  if (context === null) {
-    var err = new Error('You used a <Label /> component, but it is not inside a relevant parent.');
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useLabelContext);
-    throw err;
+var Fragment = Fragment$1;
+function jsx(type, props, key) {
+  if (!hasOwnProperty$1.call(props, 'css')) {
+    return jsx$1(type, props, key);
   }
 
-  return context;
-}
-
-function useLabels() {
-  var _useState = useState([]),
-      labelIds = _useState[0],
-      setLabelIds = _useState[1];
-
-  return [// The actual id's as string or undefined.
-  labelIds.length > 0 ? labelIds.join(' ') : undefined, // The provider component
-  useMemo(function () {
-    return function LabelProvider(props) {
-      var register = useCallback(function (value) {
-        setLabelIds(function (existing) {
-          return [].concat(existing, [value]);
-        });
-        return function () {
-          return setLabelIds(function (existing) {
-            var clone = existing.slice();
-            var idx = clone.indexOf(value);
-            if (idx !== -1) clone.splice(idx, 1);
-            return clone;
-          });
-        };
-      }, []);
-      var contextBag = useMemo(function () {
-        return {
-          register: register,
-          slot: props.slot,
-          name: props.name,
-          props: props.props
-        };
-      }, [register, props.slot, props.name, props.props]);
-      return React__default.createElement(LabelContext.Provider, {
-        value: contextBag
-      }, props.children);
-    };
-  }, [setLabelIds])];
-} // ---
-
-var DEFAULT_LABEL_TAG = 'label';
-function Label$3(props) {
-  var _props$passive = props.passive,
-      passive = _props$passive === void 0 ? false : _props$passive,
-      passThroughProps = _objectWithoutPropertiesLoose$1(props, ["passive"]);
-
-  var context = useLabelContext();
-  var id = "headlessui-label-" + useId();
-  useIsoMorphicEffect(function () {
-    return context.register(id);
-  }, [id, context.register]);
-
-  var propsWeControl = _extends$1({}, context.props, {
-    id: id
-  });
-
-  var allProps = _extends$1({}, passThroughProps, propsWeControl); // @ts-expect-error props are dynamic via context, some components will
-  //                  provide an onClick then we can delete it.
-
-
-  if (passive) delete allProps['onClick'];
-  return render({
-    props: allProps,
-    slot: context.slot || {},
-    defaultTag: DEFAULT_LABEL_TAG,
-    name: context.name || 'Label'
-  });
+  return jsx$1(Emotion, createEmotionProps(type, props), key);
 }
-
-var _reducers;
-var ActionTypes;
-
-(function (ActionTypes) {
-  ActionTypes[ActionTypes["RegisterOption"] = 0] = "RegisterOption";
-  ActionTypes[ActionTypes["UnregisterOption"] = 1] = "UnregisterOption";
-})(ActionTypes || (ActionTypes = {}));
-
-var reducers = (_reducers = {}, _reducers[ActionTypes.RegisterOption] = function (state, action) {
-  return _extends$1({}, state, {
-    options: [].concat(state.options, [{
-      id: action.id,
-      element: action.element,
-      propsRef: action.propsRef
-    }])
-  });
-}, _reducers[ActionTypes.UnregisterOption] = function (state, action) {
-  var options = state.options.slice();
-  var idx = state.options.findIndex(function (radio) {
-    return radio.id === action.id;
-  });
-  if (idx === -1) return state;
-  options.splice(idx, 1);
-  return _extends$1({}, state, {
-    options: options
-  });
-}, _reducers);
-var RadioGroupContext = /*#__PURE__*/createContext(null);
-RadioGroupContext.displayName = 'RadioGroupContext';
-
-function useRadioGroupContext(component) {
-  var context = useContext(RadioGroupContext);
-
-  if (context === null) {
-    var err = new Error("<" + component + " /> is missing a parent <" + RadioGroup.name + " /> component.");
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useRadioGroupContext);
-    throw err;
+function jsxs(type, props, key) {
+  if (!hasOwnProperty$1.call(props, 'css')) {
+    return jsxs$1(type, props, key);
   }
 
-  return context;
+  return jsxs$1(Emotion, createEmotionProps(type, props), key);
 }
 
-function stateReducer(state, action) {
-  return match(action.type, reducers, state, action);
-} // ---
-
-
-var DEFAULT_RADIO_GROUP_TAG = 'div';
-function RadioGroup(props) {
-  var value = props.value,
-      onChange = props.onChange,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      passThroughProps = _objectWithoutPropertiesLoose$1(props, ["value", "onChange", "disabled"]);
-
-  var _useReducer = useReducer(stateReducer, {
-    options: []
-  }),
-      options = _useReducer[0].options,
-      dispatch = _useReducer[1];
-
-  var _useLabels = useLabels(),
-      labelledby = _useLabels[0],
-      LabelProvider = _useLabels[1];
-
-  var _useDescriptions = useDescriptions(),
-      describedby = _useDescriptions[0],
-      DescriptionProvider = _useDescriptions[1];
-
-  var id = "headlessui-radiogroup-" + useId();
-  var radioGroupRef = useRef(null);
-  var firstOption = useMemo(function () {
-    return options.find(function (option) {
-      if (option.propsRef.current.disabled) return false;
-      return true;
-    });
-  }, [options]);
-  var containsCheckedOption = useMemo(function () {
-    return options.some(function (option) {
-      return option.propsRef.current.value === value;
-    });
-  }, [options, value]);
-  var triggerChange = useCallback(function (nextValue) {
-    var _options$find;
-
-    if (disabled) return false;
-    if (nextValue === value) return false;
-    var nextOption = (_options$find = options.find(function (option) {
-      return option.propsRef.current.value === nextValue;
-    })) == null ? void 0 : _options$find.propsRef.current;
-    if (nextOption == null ? void 0 : nextOption.disabled) return false;
-    onChange(nextValue);
-    return true;
-  }, [onChange, value, disabled, options]);
-  useTreeWalker({
-    container: radioGroupRef.current,
-    accept: function accept(node) {
-      if (node.getAttribute('role') === 'radio') return NodeFilter.FILTER_REJECT;
-      if (node.hasAttribute('role')) return NodeFilter.FILTER_SKIP;
-      return NodeFilter.FILTER_ACCEPT;
-    },
-    walk: function walk(node) {
-      node.setAttribute('role', 'none');
-    }
-  });
-  var handleKeyDown = useCallback(function (event) {
-    var container = radioGroupRef.current;
-    if (!container) return;
-    var all = options.filter(function (option) {
-      return option.propsRef.current.disabled === false;
-    }).map(function (radio) {
-      return radio.element.current;
-    });
-
-    switch (event.key) {
-      case Keys.ArrowLeft:
-      case Keys.ArrowUp:
-        {
-          event.preventDefault();
-          event.stopPropagation();
-          var result = focusIn(all, Focus$1.Previous | Focus$1.WrapAround);
-
-          if (result === FocusResult.Success) {
-            var activeOption = options.find(function (option) {
-              return option.element.current === document.activeElement;
-            });
-            if (activeOption) triggerChange(activeOption.propsRef.current.value);
-          }
-        }
-        break;
-
-      case Keys.ArrowRight:
-      case Keys.ArrowDown:
-        {
-          event.preventDefault();
-          event.stopPropagation();
-
-          var _result = focusIn(all, Focus$1.Next | Focus$1.WrapAround);
+var BaseButton = function (_a) {
+    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.testId, testId = _c === void 0 ? 'base-button' : _c;
+    return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
+            display: inline ? 'inline-flex' : 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: '0.75rem 2rem',
+            textDecoration: 'none',
+            textTransform: 'uppercase',
+            boxSizing: 'border-box',
+            cursor: 'pointer',
+        } }, { children: [renderLeading, children, renderTrailing] }), void 0));
+};
 
-          if (_result === FocusResult.Success) {
-            var _activeOption = options.find(function (option) {
-              return option.element.current === document.activeElement;
-            });
+var getStylesBySize$9 = function (size, theme) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                fontSize: theme.component.button.size.large.fontSize,
+                padding: theme.component.button.size.large.padding,
+            };
+        case ComponentSize.Medium:
+            return {
+                fontSize: theme.component.button.size.medium.fontSize,
+                padding: theme.component.button.size.medium.padding,
+            };
+        case ComponentSize.Small:
+            return {
+                fontSize: theme.component.button.size.small.fontSize,
+                padding: theme.component.button.size.small.padding,
+            };
+        default:
+            return {
+                fontSize: theme.component.button.size.small.fontSize,
+                padding: theme.component.button.size.small.padding,
+            };
+    }
+};
+var BaseCTA = function (_a) {
+    var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
+    var theme = useTheme();
+    var stylesBySize = getStylesBySize$9(size, theme);
+    return (jsx(BaseButton, __assign({}, props, { css: __assign(__assign({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
+                backgroundColor: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
+                cursor: 'not-allowed',
+            } }) }, { children: text }), void 0));
+};
 
-            if (_activeOption) triggerChange(_activeOption.propsRef.current.value);
-          }
-        }
-        break;
+var ButtonPrimary = function (_a) {
+    _a.testId; var props = __rest(_a, ["testId"]);
+    var theme = useTheme();
+    return (jsx(BaseCTA, __assign({}, props, { css: {
+            backgroundColor: theme.component.button.primary.active.backgroundColor,
+            color: theme.component.button.primary.active.color,
+            border: theme.component.button.border,
+            '&:hover': {
+                backgroundColor: theme.component.button.primary.hover.backgroundColor,
+                color: theme.component.button.primary.hover.color,
+            },
+            '&:disabled': {
+                backgroundColor: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
+            },
+        } }), void 0));
+};
 
-      case Keys.Space:
-        {
-          event.preventDefault();
-          event.stopPropagation();
+var ButtonSecondary = function (props) {
+    var theme = useTheme();
+    return (jsx(BaseCTA, __assign({}, props, { css: {
+            backgroundColor: theme.component.button.secondary.active.backgroundColor,
+            color: theme.component.button.secondary.active.color,
+            border: theme.component.button.border,
+            '&:hover': {
+                backgroundColor: theme.component.button.secondary.hover.backgroundColor,
+            },
+            '&:disabled': {
+                backgroundColor: theme.colors.shades['50'].color,
+                color: theme.colors.shades['250'].color,
+            },
+        } }), void 0));
+};
 
-          var _activeOption2 = options.find(function (option) {
-            return option.element.current === document.activeElement;
-          });
+var ButtonSecondaryOutline = function (props) {
+    var theme = useTheme();
+    return (jsx(BaseCTA, __assign({}, props, { css: {
+            backgroundColor: theme.component.button.secondary.active.color,
+            color: theme.component.button.secondary.active.backgroundColor,
+            border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
+            '&:hover': {
+                backgroundColor: theme.component.button.secondary.active.backgroundColor,
+                color: theme.component.button.secondary.active.color,
+            },
+            '&:disabled': {
+                backgroundColor: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
+                border: 'none',
+            },
+        } }), void 0));
+};
 
-          if (_activeOption2) triggerChange(_activeOption2.propsRef.current.value);
-        }
-        break;
-    }
-  }, [radioGroupRef, options, triggerChange]);
-  var registerOption = useCallback(function (option) {
-    dispatch(_extends$1({
-      type: ActionTypes.RegisterOption
-    }, option));
-    return function () {
-      return dispatch({
-        type: ActionTypes.UnregisterOption,
-        id: option.id
-      });
-    };
-  }, [dispatch]);
-  var api = useMemo(function () {
-    return {
-      registerOption: registerOption,
-      firstOption: firstOption,
-      containsCheckedOption: containsCheckedOption,
-      change: triggerChange,
-      disabled: disabled,
-      value: value
-    };
-  }, [registerOption, firstOption, containsCheckedOption, triggerChange, disabled, value]);
-  var propsWeControl = {
-    ref: radioGroupRef,
-    id: id,
-    role: 'radiogroup',
-    'aria-labelledby': labelledby,
-    'aria-describedby': describedby,
-    onKeyDown: handleKeyDown
-  };
-  return React__default.createElement(DescriptionProvider, {
-    name: "RadioGroup.Description"
-  }, React__default.createElement(LabelProvider, {
-    name: "RadioGroup.Label"
-  }, React__default.createElement(RadioGroupContext.Provider, {
-    value: api
-  }, render({
-    props: _extends$1({}, passThroughProps, propsWeControl),
-    defaultTag: DEFAULT_RADIO_GROUP_TAG,
-    name: 'RadioGroup'
-  }))));
-} // ---
-
-var OptionState;
-
-(function (OptionState) {
-  OptionState[OptionState["Empty"] = 1] = "Empty";
-  OptionState[OptionState["Active"] = 2] = "Active";
-})(OptionState || (OptionState = {}));
-
-var DEFAULT_OPTION_TAG = 'div';
-
-function Option$1(props) {
-  var optionRef = useRef(null);
-  var id = "headlessui-radiogroup-option-" + useId();
-
-  var _useLabels2 = useLabels(),
-      labelledby = _useLabels2[0],
-      LabelProvider = _useLabels2[1];
-
-  var _useDescriptions2 = useDescriptions(),
-      describedby = _useDescriptions2[0],
-      DescriptionProvider = _useDescriptions2[1];
-
-  var _useFlags = useFlags(OptionState.Empty),
-      addFlag = _useFlags.addFlag,
-      removeFlag = _useFlags.removeFlag,
-      hasFlag = _useFlags.hasFlag;
-
-  var value = props.value,
-      _props$disabled2 = props.disabled,
-      disabled = _props$disabled2 === void 0 ? false : _props$disabled2,
-      passThroughProps = _objectWithoutPropertiesLoose$1(props, ["value", "disabled"]);
-
-  var propsRef = useRef({
-    value: value,
-    disabled: disabled
-  });
-  useIsoMorphicEffect(function () {
-    propsRef.current.value = value;
-  }, [value, propsRef]);
-  useIsoMorphicEffect(function () {
-    propsRef.current.disabled = disabled;
-  }, [disabled, propsRef]);
-
-  var _useRadioGroupContext = useRadioGroupContext([RadioGroup.name, Option$1.name].join('.')),
-      registerOption = _useRadioGroupContext.registerOption,
-      radioGroupDisabled = _useRadioGroupContext.disabled,
-      change = _useRadioGroupContext.change,
-      firstOption = _useRadioGroupContext.firstOption,
-      containsCheckedOption = _useRadioGroupContext.containsCheckedOption,
-      radioGroupValue = _useRadioGroupContext.value;
-
-  useIsoMorphicEffect(function () {
-    return registerOption({
-      id: id,
-      element: optionRef,
-      propsRef: propsRef
-    });
-  }, [id, registerOption, optionRef, props]);
-  var handleClick = useCallback(function () {
-    var _optionRef$current;
-
-    if (!change(value)) return;
-    addFlag(OptionState.Active);
-    (_optionRef$current = optionRef.current) == null ? void 0 : _optionRef$current.focus();
-  }, [addFlag, change, value]);
-  var handleFocus = useCallback(function () {
-    return addFlag(OptionState.Active);
-  }, [addFlag]);
-  var handleBlur = useCallback(function () {
-    return removeFlag(OptionState.Active);
-  }, [removeFlag]);
-  var isFirstOption = (firstOption == null ? void 0 : firstOption.id) === id;
-  var isDisabled = radioGroupDisabled || disabled;
-  var checked = radioGroupValue === value;
-  var propsWeControl = {
-    ref: optionRef,
-    id: id,
-    role: 'radio',
-    'aria-checked': checked ? 'true' : 'false',
-    'aria-labelledby': labelledby,
-    'aria-describedby': describedby,
-    'aria-disabled': isDisabled ? true : undefined,
-    tabIndex: function () {
-      if (isDisabled) return -1;
-      if (checked) return 0;
-      if (!containsCheckedOption && isFirstOption) return 0;
-      return -1;
-    }(),
-    onClick: isDisabled ? undefined : handleClick,
-    onFocus: isDisabled ? undefined : handleFocus,
-    onBlur: isDisabled ? undefined : handleBlur
-  };
-  var slot = useMemo(function () {
-    return {
-      checked: checked,
-      disabled: isDisabled,
-      active: hasFlag(OptionState.Active)
-    };
-  }, [checked, isDisabled, hasFlag]);
-  return React__default.createElement(DescriptionProvider, {
-    name: "RadioGroup.Description"
-  }, React__default.createElement(LabelProvider, {
-    name: "RadioGroup.Label"
-  }, render({
-    props: _extends$1({}, passThroughProps, propsWeControl),
-    slot: slot,
-    defaultTag: DEFAULT_OPTION_TAG,
-    name: 'RadioGroup.Option'
-  })));
-} // ---
-
-
-RadioGroup.Option = Option$1;
-RadioGroup.Label = Label$3;
-RadioGroup.Description = Description$2;
+function k(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k);return useEffect(()=>()=>e.dispose(),[e]),e}var x=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A(){let e=q(),[t,r]=useState(e?to:null);return x(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$2&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>`  - ${c}`).join(`
+`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>`  - ${c}`).join(`
+`)].join(`
+`));return cloneElement(u,Object.assign({},fr(mr(gt(l,["ref"])),u.props,["onClick"]),s))}return createElement(n,Object.assign({},gt(l,["ref"]),n!==Fragment$2&&s),u)}function fr(e,t,r){let o=Object.assign({},e);for(let n of r)e[n]!==void 0&&t[n]!==void 0&&Object.assign(o,{[n](i){i.defaultPrevented||e[n](i),i.defaultPrevented||t[n](i);}});return o}function D(e){var t;return Object.assign(forwardRef(e),{displayName:(t=e.displayName)!=null?t:e.name})}function mr(e){let t=Object.assign({},e);for(let r in t)t[r]===void 0&&delete t[r];return t}function gt(e,t=[]){let r=Object.assign({},e);for(let o of t)o in r&&delete r[o];return r}function br(e){throw new Error("Unexpected object: "+e)}function ae(e,t){let r=t.resolveItems();if(r.length<=0)return null;let o=t.resolveActiveIndex(),n=o!=null?o:-1,i=(()=>{switch(e.focus){case 0:return r.findIndex(a=>!t.resolveDisabled(a));case 1:{let a=r.slice().reverse().findIndex((l,s,u)=>n!==-1&&u.length-s-1>=n?!1:!t.resolveDisabled(l));return a===-1?a:r.length-1-a}case 2:return r.findIndex((a,l)=>l<=n?!1:!t.resolveDisabled(a));case 3:{let a=r.slice().reverse().findIndex(l=>!t.resolveDisabled(l));return a===-1?a:r.length-1-a}case 4:return r.findIndex(a=>t.resolveId(a)===e.id);case 5:return null;default:br(e);}})();return i===-1?o:i}function G(e){let t=e.parentElement,r=null;for(;t&&!(t instanceof HTMLFieldSetElement);)t instanceof HTMLLegendElement&&(r=t),t=t.parentElement;let o=(t==null?void 0:t.getAttribute("disabled"))==="";return o&&Tr(r)?!1:o}function Tr(e){if(!e)return !1;let t=e.previousElementSibling;for(;t!==null;){if(t instanceof HTMLLegendElement)return !1;t=t.previousElementSibling;}return !0}function w(e,t,r){let o=useRef(t);o.current=t,useEffect(()=>{function n(i){o.current.call(window,i);}return window.addEventListener(e,n,r),()=>window.removeEventListener(e,n,r)},[e,r]);}var Pt=createContext(null);Pt.displayName="OpenClosedContext";function _(){return useContext(Pt)}function W({value:e,children:t}){return React__default.createElement(Pt.Provider,{value:e},t)}function ro(e){var r;if(e.type)return e.type;let t=(r=e.as)!=null?r:"button";if(typeof t=="string"&&t.toLowerCase()==="button")return "button"}function U(e,t){let[r,o]=useState(()=>ro(e));return x(()=>{o(ro(e));},[e.type,e.as]),x(()=>{r||!t.current||t.current instanceof HTMLButtonElement&&!t.current.hasAttribute("type")&&o("button");},[r,t]),r}function se({container:e,accept:t,walk:r,enabled:o=!0}){let n=useRef(t),i=useRef(r);useEffect(()=>{n.current=t,i.current=r;},[t,r]),x(()=>{if(!e||!o)return;let a=n.current,l=i.current,s=Object.assign(c=>a(c),{acceptNode:a}),u=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,s,!1);for(;u.nextNode();)l(u.currentNode);},[e,o,n,i]);}var Ar={[1](e){return e.disabled||e.comboboxState===1?e:{...e,activeOptionIndex:null,comboboxState:1}},[0](e){return e.disabled||e.comboboxState===0?e:{...e,comboboxState:0}},[2](e,t){return e.disabled===t.disabled?e:{...e,disabled:t.disabled}},[3](e,t){if(e.disabled||e.optionsRef.current&&!e.optionsPropsRef.current.static&&e.comboboxState===1)return e;let r=ae(t,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return e.activeOptionIndex===r?e:{...e,activeOptionIndex:r}},[4]:(e,t)=>{var i;let r=e.activeOptionIndex!==null?e.options[e.activeOptionIndex]:null,o=Array.from((i=e.optionsRef.current)==null?void 0:i.querySelectorAll('[id^="headlessui-combobox-option-"]')).reduce((a,l,s)=>Object.assign(a,{[l.id]:s}),{}),n=[...e.options,{id:t.id,dataRef:t.dataRef}].sort((a,l)=>o[a.id]-o[l.id]);return {...e,options:n,activeOptionIndex:(()=>r===null?null:n.indexOf(r))()}},[5]:(e,t)=>{let r=e.options.slice(),o=e.activeOptionIndex!==null?r[e.activeOptionIndex]:null,n=r.findIndex(i=>i.id===t.id);return n!==-1&&r.splice(n,1),{...e,options:r,activeOptionIndex:(()=>n===e.activeOptionIndex||o===null?null:r.indexOf(o))()}}},vt=createContext(null);vt.displayName="ComboboxContext";function pe(e){let t=useContext(vt);if(t===null){let r=new Error(`<${e} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,pe),r}return t}var Rt=createContext(null);Rt.displayName="ComboboxActions";function Ue(){let e=useContext(Rt);if(e===null){let t=new Error("ComboboxActions is missing a parent <Combobox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(t,Ue),t}return e}function hr(e,t){return S(t.type,Ar,e,t)}var Or=Fragment$2,Ir=D(function(t,r){let{value:o,onChange:n,disabled:i=!1,...a}=t,l=useRef({value:o,onChange:n}),s=useRef({static:!1,hold:!1}),u=useRef({displayValue:void 0}),c=useReducer(hr,{comboboxState:1,comboboxPropsRef:l,optionsPropsRef:s,inputPropsRef:u,labelRef:createRef(),inputRef:createRef(),buttonRef:createRef(),optionsRef:createRef(),disabled:i,options:[],activeOptionIndex:null}),[{comboboxState:m,options:b,activeOptionIndex:T,optionsRef:y,inputRef:p,buttonRef:f},d]=c;x(()=>{l.current.value=o;},[o,l]),x(()=>{l.current.onChange=n;},[n,l]),x(()=>d({type:2,disabled:i}),[i]),w("mousedown",O=>{var N,K,V;let L=O.target;m===0&&(((N=f.current)==null?void 0:N.contains(L))||((K=p.current)==null?void 0:K.contains(L))||((V=y.current)==null?void 0:V.contains(L))||d({type:1}));});let P=T===null?null:b[T].dataRef.current.value,C=useMemo(()=>({open:m===0,disabled:i,activeIndex:T,activeOption:P}),[m,i,b,T]),R=useCallback(()=>{if(!p.current||o===void 0)return;let O=u.current.displayValue;typeof O=="function"?p.current.value=O(o):typeof o=="string"&&(p.current.value=o);},[o,p,u]),g=useCallback(O=>{let L=b.find(K=>K.id===O);if(!L)return;let{dataRef:N}=L;l.current.onChange(N.current.value),R();},[b,l,p]),v=useCallback(()=>{if(T!==null){let{dataRef:O}=b[T];l.current.onChange(O.current.value),R();}},[T,b,l,p]),h=useMemo(()=>({selectOption:g,selectActiveOption:v}),[g,v]);return x(()=>{m===1&&R();},[R,m]),x(R,[R]),React__default.createElement(Rt.Provider,{value:h},React__default.createElement(vt.Provider,{value:c},React__default.createElement(W,{value:S(m,{[0]:0,[1]:1})},E({props:r===null?a:{...a,ref:r},slot:C,defaultTag:Or,name:"Combobox"}))))}),Lr="input",Dr=D(function(t,r){var R,g;let{value:o,onChange:n,displayValue:i,...a}=t,[l,s]=pe("Combobox.Input"),u=Ue(),c=I(l.inputRef,r),m=l.inputPropsRef,b=`headlessui-combobox-input-${A()}`,T=Q(),y=ke(n);x(()=>{m.current.displayValue=i;},[i,m]);let p=useCallback(v=>{switch(v.key){case"Enter":v.preventDefault(),v.stopPropagation(),u.selectActiveOption(),s({type:1});break;case"ArrowDown":return v.preventDefault(),v.stopPropagation(),S(l.comboboxState,{[0]:()=>s({type:3,focus:2}),[1]:()=>{s({type:0}),T.nextFrame(()=>{l.comboboxPropsRef.current.value||s({type:3,focus:0});});}});case"ArrowUp":return v.preventDefault(),v.stopPropagation(),S(l.comboboxState,{[0]:()=>s({type:3,focus:1}),[1]:()=>{s({type:0}),T.nextFrame(()=>{l.comboboxPropsRef.current.value||s({type:3,focus:3});});}});case"Home":case"PageUp":return v.preventDefault(),v.stopPropagation(),s({type:3,focus:0});case"End":case"PageDown":return v.preventDefault(),v.stopPropagation(),s({type:3,focus:3});case"Escape":return v.preventDefault(),l.optionsRef.current&&!l.optionsPropsRef.current.static&&v.stopPropagation(),s({type:1});case"Tab":u.selectActiveOption(),s({type:1});break}},[T,s,l,u]),f=useCallback(v=>{var h;s({type:0}),(h=y.current)==null||h.call(y,v);},[s,y]),d=ee(()=>{if(!!l.labelRef.current)return [l.labelRef.current.id].join(" ")},[l.labelRef.current]),P=useMemo(()=>({open:l.comboboxState===0,disabled:l.disabled}),[l]),C={ref:c,id:b,role:"combobox",type:"text","aria-controls":(R=l.optionsRef.current)==null?void 0:R.id,"aria-expanded":l.disabled?void 0:l.comboboxState===0,"aria-activedescendant":l.activeOptionIndex===null||(g=l.options[l.activeOptionIndex])==null?void 0:g.id,"aria-labelledby":d,disabled:l.disabled,onKeyDown:p,onChange:f};return E({props:{...a,...C},slot:P,defaultTag:Lr,name:"Combobox.Input"})}),Mr="button",Fr=D(function(t,r){var p;let[o,n]=pe("Combobox.Button"),i=Ue(),a=I(o.buttonRef,r),l=`headlessui-combobox-button-${A()}`,s=Q(),u=useCallback(f=>{switch(f.key){case"ArrowDown":return f.preventDefault(),f.stopPropagation(),o.comboboxState===1&&(n({type:0}),s.nextFrame(()=>{o.comboboxPropsRef.current.value||n({type:3,focus:0});})),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})});case"ArrowUp":return f.preventDefault(),f.stopPropagation(),o.comboboxState===1&&(n({type:0}),s.nextFrame(()=>{o.comboboxPropsRef.current.value||n({type:3,focus:3});})),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})});case"Escape":return f.preventDefault(),o.optionsRef.current&&!o.optionsPropsRef.current.static&&f.stopPropagation(),n({type:1}),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})})}},[s,n,o,i]),c=useCallback(f=>{if(G(f.currentTarget))return f.preventDefault();o.comboboxState===0?n({type:1}):(f.preventDefault(),n({type:0})),s.nextFrame(()=>{var d;return (d=o.inputRef.current)==null?void 0:d.focus({preventScroll:!0})});},[n,s,o]),m=ee(()=>{if(!!o.labelRef.current)return [o.labelRef.current.id,l].join(" ")},[o.labelRef.current,l]),b=useMemo(()=>({open:o.comboboxState===0,disabled:o.disabled}),[o]),T=t,y={ref:a,id:l,type:U(t,o.buttonRef),tabIndex:-1,"aria-haspopup":!0,"aria-controls":(p=o.optionsRef.current)==null?void 0:p.id,"aria-expanded":o.disabled?void 0:o.comboboxState===0,"aria-labelledby":m,disabled:o.disabled,onClick:c,onKeyDown:u};return E({props:{...T,...y},slot:b,defaultTag:Mr,name:"Combobox.Button"})}),wr="label";function kr(e){let[t]=pe("Combobox.Label"),r=`headlessui-combobox-label-${A()}`,o=useCallback(()=>{var a;return (a=t.inputRef.current)==null?void 0:a.focus({preventScroll:!0})},[t.inputRef]),n=useMemo(()=>({open:t.comboboxState===0,disabled:t.disabled}),[t]),i={ref:t.labelRef,id:r,onClick:o};return E({props:{...e,...i},slot:n,defaultTag:wr,name:"Combobox.Label"})}var _r="ul",Gr=1|2,Hr=D(function(t,r){var y;let{hold:o=!1,...n}=t,[i]=pe("Combobox.Options"),{optionsPropsRef:a}=i,l=I(i.optionsRef,r),s=`headlessui-combobox-options-${A()}`,u=_(),c=(()=>u!==null?u===0:i.comboboxState===0)();x(()=>{var p;a.current.static=(p=t.static)!=null?p:!1;},[a,t.static]),x(()=>{a.current.hold=o;},[o,a]),se({container:i.optionsRef.current,enabled:i.comboboxState===0,accept(p){return p.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:p.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(p){p.setAttribute("role","none");}});let m=ee(()=>{var p,f,d;return (d=(p=i.labelRef.current)==null?void 0:p.id)!=null?d:(f=i.buttonRef.current)==null?void 0:f.id},[i.labelRef.current,i.buttonRef.current]),b=useMemo(()=>({open:i.comboboxState===0}),[i]),T={"aria-activedescendant":i.activeOptionIndex===null||(y=i.options[i.activeOptionIndex])==null?void 0:y.id,"aria-labelledby":m,role:"listbox",id:s,ref:l};return E({props:{...n,...T},slot:b,defaultTag:_r,features:Gr,visible:c,name:"Combobox.Options"})}),Ur="li";function Br(e){let{disabled:t=!1,value:r,...o}=e,[n,i]=pe("Combobox.Option"),a=Ue(),l=`headlessui-combobox-option-${A()}`,s=n.activeOptionIndex!==null?n.options[n.activeOptionIndex].id===l:!1,u=n.comboboxPropsRef.current.value===r,c=useRef({disabled:t,value:r});x(()=>{c.current.disabled=t;},[c,t]),x(()=>{c.current.value=r;},[c,r]),x(()=>{var P,C;c.current.textValue=(C=(P=document.getElementById(l))==null?void 0:P.textContent)==null?void 0:C.toLowerCase();},[c,l]);let m=useCallback(()=>a.selectOption(l),[a,l]);x(()=>(i({type:4,id:l,dataRef:c}),()=>i({type:5,id:l})),[c,l]),x(()=>{n.comboboxState===0&&(!u||i({type:3,focus:4,id:l}));},[n.comboboxState,u,l]),x(()=>{if(n.comboboxState!==0||!s)return;let P=k();return P.requestAnimationFrame(()=>{var C,R;(R=(C=document.getElementById(l))==null?void 0:C.scrollIntoView)==null||R.call(C,{block:"nearest"});}),P.dispose},[l,s,n.comboboxState,n.activeOptionIndex]);let b=useCallback(P=>{if(t)return P.preventDefault();m(),i({type:1}),k().nextFrame(()=>{var C;return (C=n.inputRef.current)==null?void 0:C.focus({preventScroll:!0})});},[i,n.inputRef,t,m]),T=useCallback(()=>{if(t)return i({type:3,focus:5});i({type:3,focus:4,id:l});},[t,l,i]),y=useCallback(()=>{t||s||i({type:3,focus:4,id:l});},[t,s,l,i]),p=useCallback(()=>{t||!s||n.optionsPropsRef.current.hold||i({type:3,focus:5});},[t,s,i,n.comboboxState,n.comboboxPropsRef]),f=useMemo(()=>({active:s,selected:u,disabled:t}),[s,u,t]);return E({props:{...o,...{id:l,role:"option",tabIndex:t===!0?void 0:-1,"aria-disabled":t===!0?!0:void 0,"aria-selected":u===!0?!0:void 0,disabled:void 0,onClick:b,onFocus:T,onPointerMove:y,onMouseMove:y,onPointerLeave:p,onMouseLeave:p}},slot:f,defaultTag:Ur,name:"Combobox.Option"})}Object.assign(Ir,{Input:Dr,Button:Fr,Label:kr,Options:Hr,Option:Br});var Et=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");function xe(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(Et))}function de(e,t=0){return e===document.body?!1:S(t,{[0](){return e.matches(Et)},[1](){let r=e;for(;r!==null;){if(r.matches(Et))return !0;r=r.parentElement;}return !1}})}function ce(e){e==null||e.focus({preventScroll:!0});}function M(e,t){let r=Array.isArray(e)?e.slice().sort((c,m)=>{let b=c.compareDocumentPosition(m);return b&Node.DOCUMENT_POSITION_FOLLOWING?-1:b&Node.DOCUMENT_POSITION_PRECEDING?1:0}):xe(e),o=document.activeElement,n=(()=>{if(t&(1|4))return 1;if(t&(2|8))return -1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),i=(()=>{if(t&1)return 0;if(t&2)return Math.max(0,r.indexOf(o))-1;if(t&4)return Math.max(0,r.indexOf(o))+1;if(t&8)return r.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),a=t&32?{preventScroll:!0}:{},l=0,s=r.length,u;do{if(l>=s||l+s<=0)return 0;let c=i+l;if(t&16)c=(c+s)%s;else {if(c<0)return 3;if(c>=s)return 1}u=r[c],u==null||u.focus(a),l+=n;}while(u!==document.activeElement);return u.hasAttribute("tabindex")||u.setAttribute("tabindex","0"),2}function Be(){let e=useRef(!1);return useEffect(()=>(e.current=!0,()=>{e.current=!1;}),[]),e}function Ne(e,t=30,{initialFocus:r,containers:o}={}){let n=useRef(typeof window!="undefined"?document.activeElement:null),i=useRef(null),a=Be(),l=Boolean(t&16),s=Boolean(t&2);useEffect(()=>{!l||(n.current=document.activeElement);},[l]),useEffect(()=>{if(!!l)return ()=>{ce(n.current),n.current=null;}},[l]),useEffect(()=>{if(!s||!e.current)return;let u=document.activeElement;if(r==null?void 0:r.current){if((r==null?void 0:r.current)===u){i.current=u;return}}else if(e.current.contains(u)){i.current=u;return}(r==null?void 0:r.current)?ce(r.current):M(e.current,1)===0&&console.warn("There are no focusable elements inside the <FocusTrap />"),i.current=document.activeElement;},[e,r,s]),w("keydown",u=>{!(t&4)||!e.current||u.key==="Tab"&&(u.preventDefault(),M(e.current,(u.shiftKey?2:4)|16)===2&&(i.current=document.activeElement));}),w("focus",u=>{if(!(t&8))return;let c=new Set(o==null?void 0:o.current);if(c.add(e),!c.size)return;let m=i.current;if(!m||!a.current)return;let b=u.target;b&&b instanceof HTMLElement?Kr(c,b)?(i.current=b,ce(b)):(u.preventDefault(),u.stopPropagation(),ce(m)):ce(i.current);},!0);}function Kr(e,t){var r;for(let o of e)if((r=o.current)==null?void 0:r.contains(t))return !0;return !1}var fe=new Set,J=new Map;function po(e){e.setAttribute("aria-hidden","true"),e.inert=!0;}function co(e){let t=J.get(e);!t||(t["aria-hidden"]===null?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",t["aria-hidden"]),e.inert=t.inert);}function fo(e,t=!0){x(()=>{if(!t||!e.current)return;let r=e.current;fe.add(r);for(let o of J.keys())o.contains(r)&&(co(o),J.delete(o));return document.querySelectorAll("body > *").forEach(o=>{if(o instanceof HTMLElement){for(let n of fe)if(o.contains(n))return;fe.size===1&&(J.set(o,{"aria-hidden":o.getAttribute("aria-hidden"),inert:o.inert}),po(o));}}),()=>{if(fe.delete(r),fe.size>0)document.querySelectorAll("body > *").forEach(o=>{if(o instanceof HTMLElement&&!J.has(o)){for(let n of fe)if(o.contains(n))return;J.set(o,{"aria-hidden":o.getAttribute("aria-hidden"),inert:o.inert}),po(o);}});else for(let o of J.keys())co(o),J.delete(o);}},[t]);}var mo=createContext(!1);function bo(){return useContext(mo)}function At(e){return React__default.createElement(mo.Provider,{value:e.force},e.children)}function Xr(){let e=bo(),t=useContext(Po),[r,o]=useState(()=>{if(!e&&t!==null||typeof window=="undefined")return null;let n=document.getElementById("headlessui-portal-root");if(n)return n;let i=document.createElement("div");return i.setAttribute("id","headlessui-portal-root"),document.body.appendChild(i)});return useEffect(()=>{r!==null&&(document.body.contains(r)||document.body.appendChild(r));},[r]),useEffect(()=>{e||t!==null&&o(t.current);},[t,o,e]),r}var Jr=Fragment$2;function We(e){let t=e,r=Xr(),[o]=useState(()=>typeof window=="undefined"?null:document.createElement("div")),n=q();return x(()=>{if(!!r&&!!o)return r.appendChild(o),()=>{var i;!r||!o||(r.removeChild(o),r.childNodes.length<=0&&((i=r.parentElement)==null||i.removeChild(r)));}},[r,o]),n?!r||!o?null:createPortal(E({props:t,defaultTag:Jr,name:"Portal"}),o):null}var Zr=Fragment$2,Po=createContext(null);function en(e){let{target:t,...r}=e;return React__default.createElement(Po.Provider,{value:t},E({props:r,defaultTag:Zr,name:"Popover.Group"}))}We.Group=en;var vo=createContext(null);function Ro(){let e=useContext(vo);if(e===null){let t=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,Ro),t}return e}function re(){let[e,t]=useState([]);return [e.length>0?e.join(" "):void 0,useMemo(()=>function(o){let n=useCallback(a=>(t(l=>[...l,a]),()=>t(l=>{let s=l.slice(),u=s.indexOf(a);return u!==-1&&s.splice(u,1),s})),[]),i=useMemo(()=>({register:n,slot:o.slot,name:o.name,props:o.props}),[n,o.slot,o.name,o.props]);return React__default.createElement(vo.Provider,{value:i},o.children)},[t])]}var an="p";function me(e){let t=Ro(),r=`headlessui-description-${A()}`;x(()=>t.register(r),[r,t.register]);let o=e,n={...t.props,id:r};return E({props:{...o,...n},slot:t.slot||{},defaultTag:an,name:t.name||"Description"})}var ht=createContext(()=>{});ht.displayName="StackContext";function cn(){return useContext(ht)}function Eo({children:e,onUpdate:t,type:r,element:o}){let n=cn(),i=useCallback((...a)=>{t==null||t(...a),n(...a);},[n,t]);return x(()=>(i(0,r,o),()=>i(1,r,o)),[i,r,o]),React__default.createElement(ht.Provider,{value:i},e)}var yn={[0](e,t){return e.titleId===t.id?e:{...e,titleId:t.id}}},Ve=createContext(null);Ve.displayName="DialogContext";function It(e){let t=useContext(Ve);if(t===null){let r=new Error(`<${e} /> is missing a parent <${An.displayName} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,It),r}return t}function gn(e,t){return S(t.type,yn,e,t)}var Pn="div",xn=1|2,vn=D(function(t,r){let{open:o,onClose:n,initialFocus:i,...a}=t,[l,s]=useState(0),u=_();o===void 0&&u!==null&&(o=S(u,{[0]:!0,[1]:!1}));let c=useRef(new Set),m=useRef(null),b=I(m,r),T=t.hasOwnProperty("open")||u!==null,y=t.hasOwnProperty("onClose");if(!T&&!y)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!T)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!y)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(typeof o!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${o}`);if(typeof n!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${n}`);let p=o?0:1,f=(()=>u!==null?u===0:p===0)(),[d,P]=useReducer(gn,{titleId:null,descriptionId:null}),C=useCallback(()=>n(!1),[n]),R=useCallback(F=>P({type:0,id:F}),[P]),v=q()&&p===0,h=l>1,O=useContext(Ve)!==null;Ne(m,v?S(h?"parent":"leaf",{parent:16,leaf:30}):1,{initialFocus:i,containers:c}),fo(m,h?v:!1),w("mousedown",F=>{var H;let $=F.target;p===0&&(h||((H=m.current)==null?void 0:H.contains($))||C());}),w("keydown",F=>{F.key==="Escape"&&p===0&&(h||(F.preventDefault(),F.stopPropagation(),C()));}),useEffect(()=>{if(p!==0||O)return;let F=document.documentElement.style.overflow,$=document.documentElement.style.paddingRight,H=window.innerWidth-document.documentElement.clientWidth;return document.documentElement.style.overflow="hidden",document.documentElement.style.paddingRight=`${H}px`,()=>{document.documentElement.style.overflow=F,document.documentElement.style.paddingRight=$;}},[p,O]),useEffect(()=>{if(p!==0||!m.current)return;let F=new IntersectionObserver($=>{for(let H of $)H.boundingClientRect.x===0&&H.boundingClientRect.y===0&&H.boundingClientRect.width===0&&H.boundingClientRect.height===0&&C();});return F.observe(m.current),()=>F.disconnect()},[p,m,C]);let[N,K]=re(),V=`headlessui-dialog-${A()}`,Fe=useMemo(()=>[{dialogState:p,close:C,setTitleId:R},d],[p,d,C,R]),ge=useMemo(()=>({open:p===0}),[p]),we={ref:b,id:V,role:"dialog","aria-modal":p===0?!0:void 0,"aria-labelledby":d.titleId,"aria-describedby":N,onClick(F){F.stopPropagation();}},X=a;return React__default.createElement(Eo,{type:"Dialog",element:m,onUpdate:useCallback((F,$,H)=>{$==="Dialog"&&S(F,{[0](){c.current.add(H),s(Pe=>Pe+1);},[1](){c.current.add(H),s(Pe=>Pe-1);}});},[])},React__default.createElement(At,{force:!0},React__default.createElement(We,null,React__default.createElement(Ve.Provider,{value:Fe},React__default.createElement(We.Group,{target:m},React__default.createElement(At,{force:!1},React__default.createElement(K,{slot:ge,name:"Dialog.Description"},E({props:{...X,...we},slot:ge,defaultTag:Pn,features:xn,visible:f,name:"Dialog"}))))))))}),Rn="div",En=D(function(t,r){let[{dialogState:o,close:n}]=It("Dialog.Overlay"),i=I(r),a=`headlessui-dialog-overlay-${A()}`,l=useCallback(m=>{if(m.target===m.currentTarget){if(G(m.currentTarget))return m.preventDefault();m.preventDefault(),m.stopPropagation(),n();}},[n]),s=useMemo(()=>({open:o===0}),[o]);return E({props:{...t,...{ref:i,id:a,"aria-hidden":!0,onClick:l}},slot:s,defaultTag:Rn,name:"Dialog.Overlay"})}),Cn="h2";function Sn(e){let[{dialogState:t,setTitleId:r}]=It("Dialog.Title"),o=`headlessui-dialog-title-${A()}`;useEffect(()=>(r(o),()=>r(null)),[o,r]);let n=useMemo(()=>({open:t===0}),[t]);return E({props:{...e,...{id:o}},slot:n,defaultTag:Cn,name:"Dialog.Title"})}var An=Object.assign(vn,{Overlay:En,Title:Sn,Description:me});var Ln={[0]:e=>({...e,disclosureState:S(e.disclosureState,{[0]:1,[1]:0})}),[1]:e=>e.disclosureState===1?e:{...e,disclosureState:1},[4](e){return e.linkedPanel===!0?e:{...e,linkedPanel:!0}},[5](e){return e.linkedPanel===!1?e:{...e,linkedPanel:!1}},[2](e,t){return e.buttonId===t.buttonId?e:{...e,buttonId:t.buttonId}},[3](e,t){return e.panelId===t.panelId?e:{...e,panelId:t.panelId}}},Mt=createContext(null);Mt.displayName="DisclosureContext";function Ft(e){let t=useContext(Mt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ye.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Ft),r}return t}var wt=createContext(null);wt.displayName="DisclosureAPIContext";function Ao(e){let t=useContext(wt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ye.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Ao),r}return t}var kt=createContext(null);kt.displayName="DisclosurePanelContext";function Dn(){return useContext(kt)}function Mn(e,t){return S(t.type,Ln,e,t)}var Fn=Fragment$2;function Ye(e){let{defaultOpen:t=!1,...r}=e,o=`headlessui-disclosure-button-${A()}`,n=`headlessui-disclosure-panel-${A()}`,i=useReducer(Mn,{disclosureState:t?0:1,linkedPanel:!1,buttonId:o,panelId:n}),[{disclosureState:a},l]=i;useEffect(()=>l({type:2,buttonId:o}),[o,l]),useEffect(()=>l({type:3,panelId:n}),[n,l]);let s=useCallback(m=>{l({type:1});let b=(()=>m?m instanceof HTMLElement?m:m.current instanceof HTMLElement?m.current:document.getElementById(o):document.getElementById(o))();b==null||b.focus();},[l,o]),u=useMemo(()=>({close:s}),[s]),c=useMemo(()=>({open:a===0,close:s}),[a,s]);return React__default.createElement(Mt.Provider,{value:i},React__default.createElement(wt.Provider,{value:u},React__default.createElement(W,{value:S(a,{[0]:0,[1]:1})},E({props:r,slot:c,defaultTag:Fn,name:"Disclosure"}))))}var wn="button",kn=D(function(t,r){let[o,n]=Ft("Disclosure.Button"),i=useRef(null),a=I(i,r),l=Dn(),s=l===null?!1:l===o.panelId,u=useCallback(f=>{var d;if(s){if(o.disclosureState===1)return;switch(f.key){case" ":case"Enter":f.preventDefault(),f.stopPropagation(),n({type:0}),(d=document.getElementById(o.buttonId))==null||d.focus();break}}else switch(f.key){case" ":case"Enter":f.preventDefault(),f.stopPropagation(),n({type:0});break}},[n,s,o.disclosureState,o.buttonId]),c=useCallback(f=>{switch(f.key){case" ":f.preventDefault();break}},[]),m=useCallback(f=>{var d;G(f.currentTarget)||t.disabled||(s?(n({type:0}),(d=document.getElementById(o.buttonId))==null||d.focus()):n({type:0}));},[n,t.disabled,o.buttonId,s]),b=useMemo(()=>({open:o.disclosureState===0}),[o]),T=U(t,i),y=t,p=s?{ref:a,type:T,onKeyDown:u,onClick:m}:{ref:a,id:o.buttonId,type:T,"aria-expanded":t.disabled?void 0:o.disclosureState===0,"aria-controls":o.linkedPanel?o.panelId:void 0,onKeyDown:u,onKeyUp:c,onClick:m};return E({props:{...y,...p},slot:b,defaultTag:wn,name:"Disclosure.Button"})}),_n="div",Gn=1|2,Hn=D(function(t,r){let[o,n]=Ft("Disclosure.Panel"),{close:i}=Ao("Disclosure.Panel"),a=I(r,()=>{o.linkedPanel||n({type:4});}),l=_(),s=(()=>l!==null?l===0:o.disclosureState===0)();useEffect(()=>()=>n({type:5}),[n]),useEffect(()=>{var b;o.disclosureState===1&&((b=t.unmount)!=null?b:!0)&&n({type:5});},[o.disclosureState,t.unmount,n]);let u=useMemo(()=>({open:o.disclosureState===0,close:i}),[o,i]),c={ref:a,id:o.panelId},m=t;return React__default.createElement(kt.Provider,{value:o.panelId},E({props:{...m,...c},slot:u,defaultTag:_n,features:Gn,visible:s,name:"Disclosure.Panel"}))});Ye.Button=kn;Ye.Panel=Hn;var $n={[1](e){return e.disabled||e.listboxState===1?e:{...e,activeOptionIndex:null,listboxState:1}},[0](e){return e.disabled||e.listboxState===0?e:{...e,listboxState:0}},[2](e,t){return e.disabled===t.disabled?e:{...e,disabled:t.disabled}},[3](e,t){return e.orientation===t.orientation?e:{...e,orientation:t.orientation}},[4](e,t){if(e.disabled||e.listboxState===1)return e;let r=ae(t,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return e.searchQuery===""&&e.activeOptionIndex===r?e:{...e,searchQuery:"",activeOptionIndex:r}},[5]:(e,t)=>{if(e.disabled||e.listboxState===1)return e;let o=e.searchQuery!==""?0:1,n=e.searchQuery+t.value.toLowerCase(),a=(e.activeOptionIndex!==null?e.options.slice(e.activeOptionIndex+o).concat(e.options.slice(0,e.activeOptionIndex+o)):e.options).find(s=>{var u;return !s.dataRef.current.disabled&&((u=s.dataRef.current.textValue)==null?void 0:u.startsWith(n))}),l=a?e.options.indexOf(a):-1;return l===-1||l===e.activeOptionIndex?{...e,searchQuery:n}:{...e,searchQuery:n,activeOptionIndex:l}},[6](e){return e.disabled||e.listboxState===1||e.searchQuery===""?e:{...e,searchQuery:""}},[7]:(e,t)=>{var n;let r=Array.from((n=e.optionsRef.current)==null?void 0:n.querySelectorAll('[id^="headlessui-listbox-option-"]')).reduce((i,a,l)=>Object.assign(i,{[a.id]:l}),{}),o=[...e.options,{id:t.id,dataRef:t.dataRef}].sort((i,a)=>r[i.id]-r[a.id]);return {...e,options:o}},[8]:(e,t)=>{let r=e.options.slice(),o=e.activeOptionIndex!==null?r[e.activeOptionIndex]:null,n=r.findIndex(i=>i.id===t.id);return n!==-1&&r.splice(n,1),{...e,options:r,activeOptionIndex:(()=>n===e.activeOptionIndex||o===null?null:r.indexOf(o))()}}},Gt=createContext(null);Gt.displayName="ListboxContext";function Re(e){let t=useContext(Gt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ee.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Re),r}return t}function Qn(e,t){return S(t.type,$n,e,t)}var qn=Fragment$2;function Ee(e){let{value:t,onChange:r,disabled:o=!1,horizontal:n=!1,...i}=e,a=n?"horizontal":"vertical",l=useReducer(Qn,{listboxState:1,propsRef:{current:{value:t,onChange:r}},labelRef:createRef(),buttonRef:createRef(),optionsRef:createRef(),disabled:o,orientation:a,options:[],searchQuery:"",activeOptionIndex:null}),[{listboxState:s,propsRef:u,optionsRef:c,buttonRef:m},b]=l;x(()=>{u.current.value=t;},[t,u]),x(()=>{u.current.onChange=r;},[r,u]),x(()=>b({type:2,disabled:o}),[o]),x(()=>b({type:3,orientation:a}),[a]),w("mousedown",y=>{var f,d,P;let p=y.target;s===0&&(((f=m.current)==null?void 0:f.contains(p))||((d=c.current)==null?void 0:d.contains(p))||(b({type:1}),de(p,1)||(y.preventDefault(),(P=m.current)==null||P.focus())));});let T=useMemo(()=>({open:s===0,disabled:o}),[s,o]);return React__default.createElement(Gt.Provider,{value:l},React__default.createElement(W,{value:S(s,{[0]:0,[1]:1})},E({props:i,slot:T,defaultTag:qn,name:"Listbox"})))}var zn="button",Yn=D(function(t,r){var p;let[o,n]=Re("Listbox.Button"),i=I(o.buttonRef,r),a=`headlessui-listbox-button-${A()}`,l=Q(),s=useCallback(f=>{switch(f.key){case" ":case"Enter":case"ArrowDown":f.preventDefault(),n({type:0}),l.nextFrame(()=>{o.propsRef.current.value||n({type:4,focus:0});});break;case"ArrowUp":f.preventDefault(),n({type:0}),l.nextFrame(()=>{o.propsRef.current.value||n({type:4,focus:3});});break}},[n,o,l]),u=useCallback(f=>{switch(f.key){case" ":f.preventDefault();break}},[]),c=useCallback(f=>{if(G(f.currentTarget))return f.preventDefault();o.listboxState===0?(n({type:1}),l.nextFrame(()=>{var d;return (d=o.buttonRef.current)==null?void 0:d.focus({preventScroll:!0})})):(f.preventDefault(),n({type:0}));},[n,l,o]),m=ee(()=>{if(!!o.labelRef.current)return [o.labelRef.current.id,a].join(" ")},[o.labelRef.current,a]),b=useMemo(()=>({open:o.listboxState===0,disabled:o.disabled}),[o]),T=t,y={ref:i,id:a,type:U(t,o.buttonRef),"aria-haspopup":!0,"aria-controls":(p=o.optionsRef.current)==null?void 0:p.id,"aria-expanded":o.disabled?void 0:o.listboxState===0,"aria-labelledby":m,disabled:o.disabled,onKeyDown:s,onKeyUp:u,onClick:c};return E({props:{...T,...y},slot:b,defaultTag:zn,name:"Listbox.Button"})}),Xn="label";function Jn(e){let[t]=Re("Listbox.Label"),r=`headlessui-listbox-label-${A()}`,o=useCallback(()=>{var a;return (a=t.buttonRef.current)==null?void 0:a.focus({preventScroll:!0})},[t.buttonRef]),n=useMemo(()=>({open:t.listboxState===0,disabled:t.disabled}),[t]),i={ref:t.labelRef,id:r,onClick:o};return E({props:{...e,...i},slot:n,defaultTag:Xn,name:"Listbox.Label"})}var Zn="ul",ei=1|2,ti=D(function(t,r){var f;let[o,n]=Re("Listbox.Options"),i=I(o.optionsRef,r),a=`headlessui-listbox-options-${A()}`,l=Q(),s=Q(),u=_(),c=(()=>u!==null?u===0:o.listboxState===0)();x(()=>{let d=o.optionsRef.current;!d||o.listboxState===0&&d!==document.activeElement&&d.focus({preventScroll:!0});},[o.listboxState,o.optionsRef]);let m=useCallback(d=>{switch(s.dispose(),d.key){case" ":if(o.searchQuery!=="")return d.preventDefault(),d.stopPropagation(),n({type:5,value:d.key});case"Enter":if(d.preventDefault(),d.stopPropagation(),n({type:1}),o.activeOptionIndex!==null){let{dataRef:P}=o.options[o.activeOptionIndex];o.propsRef.current.onChange(P.current.value);}k().nextFrame(()=>{var P;return (P=o.buttonRef.current)==null?void 0:P.focus({preventScroll:!0})});break;case S(o.orientation,{vertical:"ArrowDown",horizontal:"ArrowRight"}):return d.preventDefault(),d.stopPropagation(),n({type:4,focus:2});case S(o.orientation,{vertical:"ArrowUp",horizontal:"ArrowLeft"}):return d.preventDefault(),d.stopPropagation(),n({type:4,focus:1});case"Home":case"PageUp":return d.preventDefault(),d.stopPropagation(),n({type:4,focus:0});case"End":case"PageDown":return d.preventDefault(),d.stopPropagation(),n({type:4,focus:3});case"Escape":return d.preventDefault(),d.stopPropagation(),n({type:1}),l.nextFrame(()=>{var P;return (P=o.buttonRef.current)==null?void 0:P.focus({preventScroll:!0})});case"Tab":d.preventDefault(),d.stopPropagation();break;default:d.key.length===1&&(n({type:5,value:d.key}),s.setTimeout(()=>n({type:6}),350));break}},[l,n,s,o]),b=ee(()=>{var d,P,C;return (C=(d=o.labelRef.current)==null?void 0:d.id)!=null?C:(P=o.buttonRef.current)==null?void 0:P.id},[o.labelRef.current,o.buttonRef.current]),T=useMemo(()=>({open:o.listboxState===0}),[o]),y={"aria-activedescendant":o.activeOptionIndex===null||(f=o.options[o.activeOptionIndex])==null?void 0:f.id,"aria-labelledby":b,"aria-orientation":o.orientation,id:a,onKeyDown:m,role:"listbox",tabIndex:0,ref:i};return E({props:{...t,...y},slot:T,defaultTag:Zn,features:ei,visible:c,name:"Listbox.Options"})}),oi="li";function ri(e){let{disabled:t=!1,value:r,...o}=e,[n,i]=Re("Listbox.Option"),a=`headlessui-listbox-option-${A()}`,l=n.activeOptionIndex!==null?n.options[n.activeOptionIndex].id===a:!1,s=n.propsRef.current.value===r,u=useRef({disabled:t,value:r});x(()=>{u.current.disabled=t;},[u,t]),x(()=>{u.current.value=r;},[u,r]),x(()=>{var d,P;u.current.textValue=(P=(d=document.getElementById(a))==null?void 0:d.textContent)==null?void 0:P.toLowerCase();},[u,a]);let c=useCallback(()=>n.propsRef.current.onChange(r),[n.propsRef,r]);x(()=>(i({type:7,id:a,dataRef:u}),()=>i({type:8,id:a})),[u,a]),x(()=>{var d,P;n.listboxState===0&&(!s||(i({type:4,focus:4,id:a}),(P=(d=document.getElementById(a))==null?void 0:d.focus)==null||P.call(d)));},[n.listboxState]),x(()=>{if(n.listboxState!==0||!l)return;let d=k();return d.requestAnimationFrame(()=>{var P,C;(C=(P=document.getElementById(a))==null?void 0:P.scrollIntoView)==null||C.call(P,{block:"nearest"});}),d.dispose},[a,l,n.listboxState,n.activeOptionIndex]);let m=useCallback(d=>{if(t)return d.preventDefault();c(),i({type:1}),k().nextFrame(()=>{var P;return (P=n.buttonRef.current)==null?void 0:P.focus({preventScroll:!0})});},[i,n.buttonRef,t,c]),b=useCallback(()=>{if(t)return i({type:4,focus:5});i({type:4,focus:4,id:a});},[t,a,i]),T=useCallback(()=>{t||l||i({type:4,focus:4,id:a});},[t,l,a,i]),y=useCallback(()=>{t||!l||i({type:4,focus:5});},[t,l,i]),p=useMemo(()=>({active:l,selected:s,disabled:t}),[l,s,t]);return E({props:{...o,...{id:a,role:"option",tabIndex:t===!0?void 0:-1,"aria-disabled":t===!0?!0:void 0,"aria-selected":s===!0?!0:void 0,disabled:void 0,onClick:m,onFocus:b,onPointerMove:T,onMouseMove:T,onPointerLeave:y,onMouseLeave:y}},slot:p,defaultTag:oi,name:"Listbox.Option"})}Ee.Button=Yn;Ee.Label=Jn;Ee.Options=ti;Ee.Option=ri;var ui={[1](e){return e.menuState===1?e:{...e,activeItemIndex:null,menuState:1}},[0](e){return e.menuState===0?e:{...e,menuState:0}},[2]:(e,t)=>{let r=ae(t,{resolveItems:()=>e.items,resolveActiveIndex:()=>e.activeItemIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return e.searchQuery===""&&e.activeItemIndex===r?e:{...e,searchQuery:"",activeItemIndex:r}},[3]:(e,t)=>{let o=e.searchQuery!==""?0:1,n=e.searchQuery+t.value.toLowerCase(),a=(e.activeItemIndex!==null?e.items.slice(e.activeItemIndex+o).concat(e.items.slice(0,e.activeItemIndex+o)):e.items).find(s=>{var u;return ((u=s.dataRef.current.textValue)==null?void 0:u.startsWith(n))&&!s.dataRef.current.disabled}),l=a?e.items.indexOf(a):-1;return l===-1||l===e.activeItemIndex?{...e,searchQuery:n}:{...e,searchQuery:n,activeItemIndex:l}},[4](e){return e.searchQuery===""?e:{...e,searchQuery:"",searchActiveItemIndex:null}},[5]:(e,t)=>{var n;let r=Array.from((n=e.itemsRef.current)==null?void 0:n.querySelectorAll('[id^="headlessui-menu-item-"]')).reduce((i,a,l)=>Object.assign(i,{[a.id]:l}),{}),o=[...e.items,{id:t.id,dataRef:t.dataRef}].sort((i,a)=>r[i.id]-r[a.id]);return {...e,items:o}},[6]:(e,t)=>{let r=e.items.slice(),o=e.activeItemIndex!==null?r[e.activeItemIndex]:null,n=r.findIndex(i=>i.id===t.id);return n!==-1&&r.splice(n,1),{...e,items:r,activeItemIndex:(()=>n===e.activeItemIndex||o===null?null:r.indexOf(o))()}}},Ht=createContext(null);Ht.displayName="MenuContext";function Je(e){let t=useContext(Ht);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Ze.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Je),r}return t}function pi(e,t){return S(t.type,ui,e,t)}var di=Fragment$2;function Ze(e){let t=useReducer(pi,{menuState:1,buttonRef:createRef(),itemsRef:createRef(),items:[],searchQuery:"",activeItemIndex:null}),[{menuState:r,itemsRef:o,buttonRef:n},i]=t;w("mousedown",l=>{var u,c,m;let s=l.target;r===0&&(((u=n.current)==null?void 0:u.contains(s))||((c=o.current)==null?void 0:c.contains(s))||(i({type:1}),de(s,1)||(l.preventDefault(),(m=n.current)==null||m.focus())));});let a=useMemo(()=>({open:r===0}),[r]);return React__default.createElement(Ht.Provider,{value:t},React__default.createElement(W,{value:S(r,{[0]:0,[1]:1})},E({props:e,slot:a,defaultTag:di,name:"Menu"})))}var ci="button",fi=D(function(t,r){var y;let[o,n]=Je("Menu.Button"),i=I(o.buttonRef,r),a=`headlessui-menu-button-${A()}`,l=Q(),s=useCallback(p=>{switch(p.key){case" ":case"Enter":case"ArrowDown":p.preventDefault(),p.stopPropagation(),n({type:0}),l.nextFrame(()=>n({type:2,focus:0}));break;case"ArrowUp":p.preventDefault(),p.stopPropagation(),n({type:0}),l.nextFrame(()=>n({type:2,focus:3}));break}},[n,l]),u=useCallback(p=>{switch(p.key){case" ":p.preventDefault();break}},[]),c=useCallback(p=>{if(G(p.currentTarget))return p.preventDefault();t.disabled||(o.menuState===0?(n({type:1}),l.nextFrame(()=>{var f;return (f=o.buttonRef.current)==null?void 0:f.focus({preventScroll:!0})})):(p.preventDefault(),p.stopPropagation(),n({type:0})));},[n,l,o,t.disabled]),m=useMemo(()=>({open:o.menuState===0}),[o]),b=t,T={ref:i,id:a,type:U(t,o.buttonRef),"aria-haspopup":!0,"aria-controls":(y=o.itemsRef.current)==null?void 0:y.id,"aria-expanded":t.disabled?void 0:o.menuState===0,onKeyDown:s,onKeyUp:u,onClick:c};return E({props:{...b,...T},slot:m,defaultTag:ci,name:"Menu.Button"})}),mi="div",bi=1|2,Ti=D(function(t,r){var p,f;let[o,n]=Je("Menu.Items"),i=I(o.itemsRef,r),a=`headlessui-menu-items-${A()}`,l=Q(),s=_(),u=(()=>s!==null?s===0:o.menuState===0)();useEffect(()=>{let d=o.itemsRef.current;!d||o.menuState===0&&d!==document.activeElement&&d.focus({preventScroll:!0});},[o.menuState,o.itemsRef]),se({container:o.itemsRef.current,enabled:o.menuState===0,accept(d){return d.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:d.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(d){d.setAttribute("role","none");}});let c=useCallback(d=>{var P;switch(l.dispose(),d.key){case" ":if(o.searchQuery!=="")return d.preventDefault(),d.stopPropagation(),n({type:3,value:d.key});case"Enter":if(d.preventDefault(),d.stopPropagation(),n({type:1}),o.activeItemIndex!==null){let{id:C}=o.items[o.activeItemIndex];(P=document.getElementById(C))==null||P.click();}k().nextFrame(()=>{var C;return (C=o.buttonRef.current)==null?void 0:C.focus({preventScroll:!0})});break;case"ArrowDown":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:2});case"ArrowUp":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:1});case"Home":case"PageUp":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:0});case"End":case"PageDown":return d.preventDefault(),d.stopPropagation(),n({type:2,focus:3});case"Escape":d.preventDefault(),d.stopPropagation(),n({type:1}),k().nextFrame(()=>{var C;return (C=o.buttonRef.current)==null?void 0:C.focus({preventScroll:!0})});break;case"Tab":d.preventDefault(),d.stopPropagation();break;default:d.key.length===1&&(n({type:3,value:d.key}),l.setTimeout(()=>n({type:4}),350));break}},[n,l,o]),m=useCallback(d=>{switch(d.key){case" ":d.preventDefault();break}},[]),b=useMemo(()=>({open:o.menuState===0}),[o]),T={"aria-activedescendant":o.activeItemIndex===null||(p=o.items[o.activeItemIndex])==null?void 0:p.id,"aria-labelledby":(f=o.buttonRef.current)==null?void 0:f.id,id:a,onKeyDown:c,onKeyUp:m,role:"menu",tabIndex:0,ref:i};return E({props:{...t,...T},slot:b,defaultTag:mi,features:bi,visible:u,name:"Menu.Items"})}),yi=Fragment$2;function gi(e){let{disabled:t=!1,onClick:r,...o}=e,[n,i]=Je("Menu.Item"),a=`headlessui-menu-item-${A()}`,l=n.activeItemIndex!==null?n.items[n.activeItemIndex].id===a:!1;x(()=>{if(n.menuState!==0||!l)return;let p=k();return p.requestAnimationFrame(()=>{var f,d;(d=(f=document.getElementById(a))==null?void 0:f.scrollIntoView)==null||d.call(f,{block:"nearest"});}),p.dispose},[a,l,n.menuState,n.activeItemIndex]);let s=useRef({disabled:t});x(()=>{s.current.disabled=t;},[s,t]),x(()=>{var p,f;s.current.textValue=(f=(p=document.getElementById(a))==null?void 0:p.textContent)==null?void 0:f.toLowerCase();},[s,a]),x(()=>(i({type:5,id:a,dataRef:s}),()=>i({type:6,id:a})),[s,a]);let u=useCallback(p=>{if(t)return p.preventDefault();if(i({type:1}),k().nextFrame(()=>{var f;return (f=n.buttonRef.current)==null?void 0:f.focus({preventScroll:!0})}),r)return r(p)},[i,n.buttonRef,t,r]),c=useCallback(()=>{if(t)return i({type:2,focus:5});i({type:2,focus:4,id:a});},[t,a,i]),m=useCallback(()=>{t||l||i({type:2,focus:4,id:a});},[t,l,a,i]),b=useCallback(()=>{t||!l||i({type:2,focus:5});},[t,l,i]),T=useMemo(()=>({active:l,disabled:t}),[l,t]);return E({props:{...o,...{id:a,role:"menuitem",tabIndex:t===!0?void 0:-1,"aria-disabled":t===!0?!0:void 0,disabled:void 0,onClick:u,onFocus:c,onPointerMove:m,onMouseMove:m,onPointerLeave:b,onMouseLeave:b}},slot:T,defaultTag:yi,name:"Menu.Item"})}Ze.Button=fi;Ze.Items=Ti;Ze.Item=gi;var vi={[0]:e=>({...e,popoverState:S(e.popoverState,{[0]:1,[1]:0})}),[1](e){return e.popoverState===1?e:{...e,popoverState:1}},[2](e,t){return e.button===t.button?e:{...e,button:t.button}},[3](e,t){return e.buttonId===t.buttonId?e:{...e,buttonId:t.buttonId}},[4](e,t){return e.panel===t.panel?e:{...e,panel:t.panel}},[5](e,t){return e.panelId===t.panelId?e:{...e,panelId:t.panelId}}},Ut=createContext(null);Ut.displayName="PopoverContext";function ot(e){let t=useContext(Ut);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Te.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,ot),r}return t}var Bt=createContext(null);Bt.displayName="PopoverAPIContext";function Mo(e){let t=useContext(Bt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${Te.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Mo),r}return t}var Nt=createContext(null);Nt.displayName="PopoverGroupContext";function Fo(){return useContext(Nt)}var Wt=createContext(null);Wt.displayName="PopoverPanelContext";function Ri(){return useContext(Wt)}function Ei(e,t){return S(t.type,vi,e,t)}var Ci="div";function Te(e){let t=`headlessui-popover-button-${A()}`,r=`headlessui-popover-panel-${A()}`,o=useReducer(Ei,{popoverState:1,button:null,buttonId:t,panel:null,panelId:r}),[{popoverState:n,button:i,panel:a},l]=o;useEffect(()=>l({type:3,buttonId:t}),[t,l]),useEffect(()=>l({type:5,panelId:r}),[r,l]);let s=useMemo(()=>({buttonId:t,panelId:r,close:()=>l({type:1})}),[t,r,l]),u=Fo(),c=u==null?void 0:u.registerPopover,m=useCallback(()=>{var p;return (p=u==null?void 0:u.isFocusWithinPopoverGroup())!=null?p:(i==null?void 0:i.contains(document.activeElement))||(a==null?void 0:a.contains(document.activeElement))},[u,i,a]);useEffect(()=>c==null?void 0:c(s),[c,s]),w("focus",()=>{n===0&&(m()||!i||!a||l({type:1}));},!0),w("mousedown",p=>{let f=p.target;n===0&&((i==null?void 0:i.contains(f))||(a==null?void 0:a.contains(f))||(l({type:1}),de(f,1)||(p.preventDefault(),i==null||i.focus())));});let b=useCallback(p=>{l({type:1});let f=(()=>p?p instanceof HTMLElement?p:p.current instanceof HTMLElement?p.current:i:i)();f==null||f.focus();},[l,i]),T=useMemo(()=>({close:b}),[b]),y=useMemo(()=>({open:n===0,close:b}),[n,b]);return React__default.createElement(Ut.Provider,{value:o},React__default.createElement(Bt.Provider,{value:T},React__default.createElement(W,{value:S(n,{[0]:0,[1]:1})},E({props:e,slot:y,defaultTag:Ci,name:"Popover"}))))}var Si="button",Ai=D(function(t,r){let[o,n]=ot("Popover.Button"),i=useRef(null),a=Fo(),l=a==null?void 0:a.closeOthers,s=Ri(),u=s===null?!1:s===o.panelId,c=I(i,r,u?null:g=>n({type:2,button:g})),m=I(i,r),b=useRef(null),T=useRef(typeof window=="undefined"?null:document.activeElement);w("focus",()=>{T.current=b.current,b.current=document.activeElement;},!0);let y=useCallback(g=>{var v,h;if(u){if(o.popoverState===1)return;switch(g.key){case" ":case"Enter":g.preventDefault(),g.stopPropagation(),n({type:1}),(v=o.button)==null||v.focus();break}}else switch(g.key){case" ":case"Enter":g.preventDefault(),g.stopPropagation(),o.popoverState===1&&(l==null||l(o.buttonId)),n({type:0});break;case"Escape":if(o.popoverState!==0)return l==null?void 0:l(o.buttonId);if(!i.current||!i.current.contains(document.activeElement))return;g.preventDefault(),g.stopPropagation(),n({type:1});break;case"Tab":if(o.popoverState!==0||!o.panel||!o.button)return;if(g.shiftKey){if(!T.current||((h=o.button)==null?void 0:h.contains(T.current))||o.panel.contains(T.current))return;let O=xe(),L=O.indexOf(T.current);if(O.indexOf(o.button)>L)return;g.preventDefault(),g.stopPropagation(),M(o.panel,8);}else g.preventDefault(),g.stopPropagation(),M(o.panel,1);break}},[n,o.popoverState,o.buttonId,o.button,o.panel,i,l,u]),p=useCallback(g=>{var v;if(!u&&(g.key===" "&&g.preventDefault(),o.popoverState===0&&!!o.panel&&!!o.button))switch(g.key){case"Tab":if(!T.current||((v=o.button)==null?void 0:v.contains(T.current))||o.panel.contains(T.current))return;let h=xe(),O=h.indexOf(T.current);if(h.indexOf(o.button)>O)return;g.preventDefault(),g.stopPropagation(),M(o.panel,8);break}},[o.popoverState,o.panel,o.button,u]),f=useCallback(g=>{var v,h;G(g.currentTarget)||t.disabled||(u?(n({type:1}),(v=o.button)==null||v.focus()):(o.popoverState===1&&(l==null||l(o.buttonId)),(h=o.button)==null||h.focus(),n({type:0})));},[n,o.button,o.popoverState,o.buttonId,t.disabled,l,u]),d=useMemo(()=>({open:o.popoverState===0}),[o]),P=U(t,i),C=t,R=u?{ref:m,type:P,onKeyDown:y,onClick:f}:{ref:c,id:o.buttonId,type:P,"aria-expanded":t.disabled?void 0:o.popoverState===0,"aria-controls":o.panel?o.panelId:void 0,onKeyDown:y,onKeyUp:p,onClick:f};return E({props:{...C,...R},slot:d,defaultTag:Si,name:"Popover.Button"})}),hi="div",Oi=1|2,Ii=D(function(t,r){let[{popoverState:o},n]=ot("Popover.Overlay"),i=I(r),a=`headlessui-popover-overlay-${A()}`,l=_(),s=(()=>l!==null?l===0:o===0)(),u=useCallback(T=>{if(G(T.currentTarget))return T.preventDefault();n({type:1});},[n]),c=useMemo(()=>({open:o===0}),[o]);return E({props:{...t,...{ref:i,id:a,"aria-hidden":!0,onClick:u}},slot:c,defaultTag:hi,features:Oi,visible:s,name:"Popover.Overlay"})}),Li$1="div",Di=1|2,Mi=D(function(t,r){let{focus:o=!1,...n}=t,[i,a]=ot("Popover.Panel"),{close:l}=Mo("Popover.Panel"),s=useRef(null),u=I(s,r,p=>{a({type:4,panel:p});}),c=_(),m=(()=>c!==null?c===0:i.popoverState===0)(),b=useCallback(p=>{var f;switch(p.key){case"Escape":if(i.popoverState!==0||!s.current||!s.current.contains(document.activeElement))return;p.preventDefault(),p.stopPropagation(),a({type:1}),(f=i.button)==null||f.focus();break}},[i,s,a]);useEffect(()=>()=>a({type:4,panel:null}),[a]),useEffect(()=>{var p;t.static||i.popoverState===1&&((p=t.unmount)!=null?p:!0)&&a({type:4,panel:null});},[i.popoverState,t.unmount,t.static,a]),useEffect(()=>{if(!o||i.popoverState!==0||!s.current)return;let p=document.activeElement;s.current.contains(p)||M(s.current,1);},[o,s,i.popoverState]),w("keydown",p=>{var d;if(i.popoverState!==0||!s.current||p.key!=="Tab"||!document.activeElement||!s.current||!s.current.contains(document.activeElement))return;p.preventDefault();let f=M(s.current,p.shiftKey?2:4);if(f===3)return (d=i.button)==null?void 0:d.focus();if(f===1){if(!i.button)return;let P=xe(),C=P.indexOf(i.button),R=P.splice(C+1).filter(g=>{var v;return !((v=s.current)==null?void 0:v.contains(g))});M(R,1)===0&&M(document.body,1);}}),w("focus",()=>{var p;!o||i.popoverState===0&&(!s.current||((p=s.current)==null?void 0:p.contains(document.activeElement))||a({type:1}));},!0);let T=useMemo(()=>({open:i.popoverState===0,close:l}),[i,l]),y={ref:u,id:i.panelId,onKeyDown:b};return React__default.createElement(Wt.Provider,{value:i.panelId},E({props:{...n,...y},slot:T,defaultTag:Li$1,features:Di,visible:m,name:"Popover.Panel"}))}),Fi="div";function wi(e){let t=useRef(null),[r,o]=useState([]),n=useCallback(b=>{o(T=>{let y=T.indexOf(b);if(y!==-1){let p=T.slice();return p.splice(y,1),p}return T});},[o]),i=useCallback(b=>(o(T=>[...T,b]),()=>n(b)),[o,n]),a=useCallback(()=>{var T;let b=document.activeElement;return ((T=t.current)==null?void 0:T.contains(b))?!0:r.some(y=>{var p,f;return ((p=document.getElementById(y.buttonId))==null?void 0:p.contains(b))||((f=document.getElementById(y.panelId))==null?void 0:f.contains(b))})},[t,r]),l=useCallback(b=>{for(let T of r)T.buttonId!==b&&T.close();},[r]),s=useMemo(()=>({registerPopover:i,unregisterPopover:n,isFocusWithinPopoverGroup:a,closeOthers:l}),[i,n,a,l]),u=useMemo(()=>({}),[]),c={ref:t},m=e;return React__default.createElement(Nt.Provider,{value:s},E({props:{...m,...c},slot:u,defaultTag:Fi,name:"Popover.Group"}))}Te.Button=Ai;Te.Overlay=Ii;Te.Panel=Mi;Te.Group=wi;function wo(e=0){let[t,r]=useState(e),o=useCallback(l=>r(s=>s|l),[r]),n=useCallback(l=>Boolean(t&l),[t]),i=useCallback(l=>r(s=>s&~l),[r]),a=useCallback(l=>r(s=>s^l),[r]);return {addFlag:o,hasFlag:n,removeFlag:i,toggleFlag:a}}var _o=createContext(null);function Go(){let e=useContext(_o);if(e===null){let t=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,Go),t}return e}function Ae(){let[e,t]=useState([]);return [e.length>0?e.join(" "):void 0,useMemo(()=>function(o){let n=useCallback(a=>(t(l=>[...l,a]),()=>t(l=>{let s=l.slice(),u=s.indexOf(a);return u!==-1&&s.splice(u,1),s})),[]),i=useMemo(()=>({register:n,slot:o.slot,name:o.name,props:o.props}),[n,o.slot,o.name,o.props]);return React__default.createElement(_o.Provider,{value:i},o.children)},[t])]}var Ni="label";function nt(e){let{passive:t=!1,...r}=e,o=Go(),n=`headlessui-label-${A()}`;x(()=>o.register(n),[n,o.register]);let i={...o.props,id:n},a={...r,...i};return t&&delete a.onClick,E({props:a,slot:o.slot||{},defaultTag:Ni,name:o.name||"Label"})}var Vi={[0](e,t){return {...e,options:[...e.options,{id:t.id,element:t.element,propsRef:t.propsRef}]}},[1](e,t){let r=e.options.slice(),o=e.options.findIndex(n=>n.id===t.id);return o===-1?e:(r.splice(o,1),{...e,options:r})}},jt=createContext(null);jt.displayName="RadioGroupContext";function Ho(e){let t=useContext(jt);if(t===null){let r=new Error(`<${e} /> is missing a parent <${lt.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Ho),r}return t}function $i(e,t){return S(t.type,Vi,e,t)}var Qi="div";function lt(e){let{value:t,onChange:r,disabled:o=!1,...n}=e,[{options:i},a]=useReducer($i,{options:[]}),[l,s]=Ae(),[u,c]=re(),m=`headlessui-radiogroup-${A()}`,b=useRef(null),T=useMemo(()=>i.find(R=>!R.propsRef.current.disabled),[i]),y=useMemo(()=>i.some(R=>R.propsRef.current.value===t),[i,t]),p=useCallback(R=>{var v;if(o||R===t)return !1;let g=(v=i.find(h=>h.propsRef.current.value===R))==null?void 0:v.propsRef.current;return (g==null?void 0:g.disabled)?!1:(r(R),!0)},[r,t,o,i]);se({container:b.current,accept(R){return R.getAttribute("role")==="radio"?NodeFilter.FILTER_REJECT:R.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(R){R.setAttribute("role","none");}});let f=useCallback(R=>{if(!b.current)return;let v=i.filter(h=>h.propsRef.current.disabled===!1).map(h=>h.element.current);switch(R.key){case"ArrowLeft":case"ArrowUp":if(R.preventDefault(),R.stopPropagation(),M(v,2|16)===2){let O=i.find(L=>L.element.current===document.activeElement);O&&p(O.propsRef.current.value);}break;case"ArrowRight":case"ArrowDown":if(R.preventDefault(),R.stopPropagation(),M(v,4|16)===2){let O=i.find(L=>L.element.current===document.activeElement);O&&p(O.propsRef.current.value);}break;case" ":{R.preventDefault(),R.stopPropagation();let h=i.find(O=>O.element.current===document.activeElement);h&&p(h.propsRef.current.value);}break}},[b,i,p]),d=useCallback(R=>(a({type:0,...R}),()=>a({type:1,id:R.id})),[a]),P=useMemo(()=>({registerOption:d,firstOption:T,containsCheckedOption:y,change:p,disabled:o,value:t}),[d,T,y,p,o,t]),C={ref:b,id:m,role:"radiogroup","aria-labelledby":l,"aria-describedby":u,onKeyDown:f};return React__default.createElement(c,{name:"RadioGroup.Description"},React__default.createElement(s,{name:"RadioGroup.Label"},React__default.createElement(jt.Provider,{value:P},E({props:{...n,...C},defaultTag:Qi,name:"RadioGroup"}))))}var qi="div";function zi(e){let t=useRef(null),r=`headlessui-radiogroup-option-${A()}`,[o,n]=Ae(),[i,a]=re(),{addFlag:l,removeFlag:s,hasFlag:u}=wo(1),{value:c,disabled:m=!1,...b}=e,T=useRef({value:c,disabled:m});x(()=>{T.current.value=c;},[c,T]),x(()=>{T.current.disabled=m;},[m,T]);let{registerOption:y,disabled:p,change:f,firstOption:d,containsCheckedOption:P,value:C}=Ho("RadioGroup.Option");x(()=>y({id:r,element:t,propsRef:T}),[r,y,t,e]);let R=useCallback(()=>{var V;!f(c)||(l(2),(V=t.current)==null||V.focus());},[l,f,c]),g=useCallback(()=>l(2),[l]),v=useCallback(()=>s(2),[s]),h=(d==null?void 0:d.id)===r,O=p||m,L=C===c,N={ref:t,id:r,role:"radio","aria-checked":L?"true":"false","aria-labelledby":o,"aria-describedby":i,"aria-disabled":O?!0:void 0,tabIndex:(()=>O?-1:L||!P&&h?0:-1)(),onClick:O?void 0:R,onFocus:O?void 0:g,onBlur:O?void 0:v},K=useMemo(()=>({checked:L,disabled:O,active:u(2)}),[L,O,u]);return React__default.createElement(a,{name:"RadioGroup.Description"},React__default.createElement(n,{name:"RadioGroup.Label"},E({props:{...b,...N},slot:K,defaultTag:qi,name:"RadioGroup.Option"})))}lt.Option=zi;lt.Label=nt;lt.Description=me;var $t=createContext(null);$t.displayName="GroupContext";var zt=createContext(null);zt.displayName="TabsContext";var dt=createContext(null);dt.displayName="TransitionContext";var ct=createContext(null);ct.displayName="NestingContext";
 
 var BaseSelectButton = function (_a) {
     var children = _a.children, as = _a.as;
-    return jsx$1(Listbox.Button, __assign({ as: as }, { children: children }), void 0);
+    return jsx$1(Ee.Button, __assign({ as: as }, { children: children }), void 0);
 };
 
 var BaseSelectOptions = function (_a) {
     var children = _a.children, className = _a.className;
-    return jsx$1(Listbox.Options, __assign({ className: className }, { children: children }), void 0);
+    return jsx$1(Ee.Options, __assign({ className: className }, { children: children }), void 0);
 };
 
 function BaseSelectOption(_a) {
     var value = _a.value, disabled = _a.disabled, children = _a.children, className = _a.className, as = _a.as;
-    return (jsx$1(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
+    return (jsx$1(Ee.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
 }
 
-var CustomListBox = newStyled(Listbox)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var CustomListBox = newStyled(Ee)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 function BaseSelect(_a) {
     var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
     return (jsx$1(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
@@ -6700,9 +4413,9 @@ var OutOfStock = function (_a) {
     return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
 };
 
-var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-newStyled(RadioGroup.Label)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
-var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var CustomRadioGroup = newStyled(lt)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+newStyled(lt.Label)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
+var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
 var Span = newStyled.span(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
 var OptionsContainer = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  margin-top: 0.63rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  margin-top: 0.63rem;\n  flex-wrap: wrap;\n"])));
 var Label$1 = function (_a) {
@@ -7265,6 +4978,7 @@ var AccordionSummaryStyles = {
         cursor: 'pointer',
         justifyContent: 'space-between',
         alignItems: 'center',
+        padding: '0',
     }),
     simple: function (theme, disabled) {
         return css(__assign(__assign({}, theme.component.accordion.variant.simple.summary), { color: disabled
@@ -7292,9 +5006,9 @@ var AccordionDetailsStyles = {
     },
 };
 
-var StyledDisclosure = newStyled(Disclosure)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
-var StyledButton$1 = newStyled(Disclosure.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; });
-var StyledPanel = newStyled(Disclosure.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
+var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
+var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; });
+var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
 var Accordion = function (_a) {
     var header = _a.header, content = _a.content, defaultOpen = _a.defaultOpen, variant = _a.variant, _b = _a.disabled, disabled = _b === void 0 ? false : _b, openIcon = _a.openIcon, closeIcon = _a.closeIcon;
     var theme = useTheme();
@@ -7599,10 +5313,14 @@ var sliceString = function (str, maxLength) {
 
 var formatPrice = function (value, _a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.locale, locale = _c === void 0 ? 'en-US' : _c, _d = _b.currency, currency = _d === void 0 ? 'USD' : _d;
+    var _e = value.toFixed(3).split('.'), integer = _e[0], fraction = _e[1];
+    // this prevents `Intl.NumberFormat` from rounding the number
+    var valueToFormat = parseFloat("".concat(integer, ".").concat(fraction.slice(0, 2)));
     return new Intl.NumberFormat(locale, {
         style: 'currency',
         currency: currency,
-    }).format(value);
+        maximumFractionDigits: 3,
+    }).format(valueToFormat);
 };
 
 var ErrorText = newStyled.h3(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
@@ -10034,7 +7752,7 @@ var Track = /*#__PURE__*/function (_React$PureComponent) {
         onMouseOver: onMouseOver,
         onMouseLeave: onMouseLeave
       };
-      return /*#__PURE__*/React__default.createElement("div", _extends$2({
+      return /*#__PURE__*/React__default.createElement("div", _extends$1({
         ref: this.handleRef,
         className: "slick-track",
         style: this.props.trackStyle
@@ -10190,7 +7908,7 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
       if (this.props.prevArrow) {
         prevArrow = /*#__PURE__*/React__default.cloneElement(this.props.prevArrow, _objectSpread2(_objectSpread2({}, prevArrowProps), customProps));
       } else {
-        prevArrow = /*#__PURE__*/React__default.createElement("button", _extends$2({
+        prevArrow = /*#__PURE__*/React__default.createElement("button", _extends$1({
           key: "0",
           type: "button"
         }, prevArrowProps), " ", "Previous");
@@ -10256,7 +7974,7 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
       if (this.props.nextArrow) {
         nextArrow = /*#__PURE__*/React__default.cloneElement(this.props.nextArrow, _objectSpread2(_objectSpread2({}, nextArrowProps), customProps));
       } else {
-        nextArrow = /*#__PURE__*/React__default.createElement("button", _extends$2({
+        nextArrow = /*#__PURE__*/React__default.createElement("button", _extends$1({
           key: "1",
           type: "button"
         }, nextArrowProps), " ", "Next");
@@ -11959,9 +9677,9 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         };
       }
 
-      return /*#__PURE__*/React__default.createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default.createElement("div", _extends$2({
+      return /*#__PURE__*/React__default.createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default.createElement("div", _extends$1({
         ref: _this.listRefHandler
-      }, listProps), /*#__PURE__*/React__default.createElement(Track, _extends$2({
+      }, listProps), /*#__PURE__*/React__default.createElement(Track, _extends$1({
         ref: _this.trackRefHandler
       }, trackProps), _this.props.children)), !_this.props.unslick ? nextArrow : "", !_this.props.unslick ? dots : "");
     });
@@ -12374,7 +10092,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
         settings.unslick = true;
       }
 
-      return /*#__PURE__*/React__default.createElement(InnerSlider, _extends$2({
+      return /*#__PURE__*/React__default.createElement(InnerSlider, _extends$1({
         style: this.props.style,
         ref: this.innerSliderRefHandler
       }, settings), newChildren);
@@ -13459,11 +11177,11 @@ var Description = function (_a) {
 };
 var templateObject_1$2;
 
-var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n"], ["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n"])), function (props) { return props.backgroundColor; });
+var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n  width: ", ";\n  height: ", ";\n  justify-content: center;\n  align-items: center;\n"], ["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n  width: ", ";\n  height: ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
 var CloseButton = function (_a) {
-    var onClick = _a.onClick;
+    var onClick = _a.onClick, size = _a.size;
     var theme = useTheme();
-    return (jsx$1(Container$1, __assign({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn" }, { children: jsx$1(Icon.Actions.Close, { width: 0.313, height: 0.313, fill: "#fff" }, void 0) }), void 0));
+    return (jsx$1(Container$1, __assign({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
 };
 var templateObject_1$1;