diff --git a/assets/new-request-form.js b/assets/new-request-form.js new file mode 100644 index 000000000..0cac860e7 --- /dev/null +++ b/assets/new-request-form.js @@ -0,0 +1,49 @@ +import { j as jsxRuntimeExports, F as Field, L as Label$1, H as Hint, I as Input, M as Message, T as Textarea, a as Field$1, b as Label, c as Hint$1, C as Combobox, O as Option, d as Message$1, r as reactDomExports } from 'vendor'; +import { ComponentProviders } from 'shared'; + +function TextInput({ field }) { + const { label, error, value, name, required, description } = field; + return (jsxRuntimeExports.jsxs(Field, { children: [jsxRuntimeExports.jsx(Label$1, { children: label }), description && jsxRuntimeExports.jsx(Hint, { children: description }), jsxRuntimeExports.jsx(Input, { name: name, value: value, validation: error ? "error" : undefined, required: required }), error && jsxRuntimeExports.jsx(Message, { validation: "error", children: error })] })); +} + +function TextArea({ field }) { + const { label, error, value, name, required, description } = field; + return (jsxRuntimeExports.jsxs(Field, { children: [jsxRuntimeExports.jsx(Label$1, { children: label }), description && jsxRuntimeExports.jsx(Hint, { children: description }), jsxRuntimeExports.jsx(Textarea, { name: name, value: value, validation: error ? "error" : undefined, required: required }), error && jsxRuntimeExports.jsx(Message, { validation: "error", children: error })] })); +} + +function DropDown({ field }) { + const { label, options, error, value, name, required, description } = field; + return (jsxRuntimeExports.jsxs(Field$1, { children: [jsxRuntimeExports.jsx(Label, { children: label }), description && jsxRuntimeExports.jsx(Hint$1, { children: description }), jsxRuntimeExports.jsx(Combobox, { inputProps: { name, required }, isEditable: false, children: options.map((option) => (jsxRuntimeExports.jsx(Option, { value: option.value, isSelected: option.value === value, children: option.name }, option.value))) }), error && jsxRuntimeExports.jsx(Message$1, { validation: "error", children: error })] })); +} + +function TicketFormField({ ticketForms }) { + const handleChange = ({ selectionValue }) => { + if (selectionValue && typeof selectionValue === "string") { + window.location.href = selectionValue; + } + }; + return (jsxRuntimeExports.jsxs(Field$1, { children: [jsxRuntimeExports.jsx(Label, { children: "Please choose your issue below" }), jsxRuntimeExports.jsx(Combobox, { isEditable: false, onChange: handleChange, children: ticketForms.map(({ id, url, name }) => (jsxRuntimeExports.jsx(Option, { value: url, label: name, children: name }, id))) })] })); +} + +function NewRequestForm({ ticketForms, fields }) { + return (jsxRuntimeExports.jsxs("form", { children: [jsxRuntimeExports.jsx(TicketFormField, { ticketForms: ticketForms }), fields.map((field) => { + switch (field.type) { + case "anonymous_requester_email": + case "subject": + return jsxRuntimeExports.jsx(TextInput, { field: field }); + case "description": + case "textarea": + return jsxRuntimeExports.jsx(TextArea, { field: field }); + case "priority": + return jsxRuntimeExports.jsx(DropDown, { field: field }); + default: + return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}); + } + })] })); +} + +function renderNewRequestForm(props, container) { + reactDomExports.render(jsxRuntimeExports.jsx(ComponentProviders, { children: jsxRuntimeExports.jsx(NewRequestForm, { ...props }) }), container); +} + +export { renderNewRequestForm }; diff --git a/assets/shared.js b/assets/shared.js new file mode 100644 index 000000000..3452eaf16 --- /dev/null +++ b/assets/shared.js @@ -0,0 +1,11 @@ +import { D as DEFAULT_THEME, j as jsxRuntimeExports, e as ThemeProvider } from 'vendor'; + +let theme = DEFAULT_THEME; +function setupGardenTheme(callback) { + theme = callback(DEFAULT_THEME); +} +function ComponentProviders({ children }) { + return jsxRuntimeExports.jsx(ThemeProvider, { theme: theme, children: children }); +} + +export { ComponentProviders, setupGardenTheme }; diff --git a/assets/vendor.js b/assets/vendor.js new file mode 100644 index 000000000..84f32c230 --- /dev/null +++ b/assets/vendor.js @@ -0,0 +1,21798 @@ +function _mergeNamespaces(n, m) { + m.forEach(function (e) { + e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) { + if (k !== 'default' && !(k in n)) { + var d = Object.getOwnPropertyDescriptor(e, k); + Object.defineProperty(n, k, d.get ? d : { + enumerable: true, + get: function () { return e[k]; } + }); + } + }); + }); + return Object.freeze(n); +} + +var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + +function getDefaultExportFromCjs (x) { + return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; +} + +var jsxRuntime = {exports: {}}; + +var reactJsxRuntime_production_min = {}; + +/* +object-assign +(c) Sindre Sorhus +@license MIT +*/ + +var objectAssign; +var hasRequiredObjectAssign; + +function requireObjectAssign () { + if (hasRequiredObjectAssign) return objectAssign; + hasRequiredObjectAssign = 1; + /* eslint-disable no-unused-vars */ + var getOwnPropertySymbols = Object.getOwnPropertySymbols; + var hasOwnProperty = Object.prototype.hasOwnProperty; + var propIsEnumerable = Object.prototype.propertyIsEnumerable; + + function toObject(val) { + if (val === null || val === undefined) { + throw new TypeError('Object.assign cannot be called with null or undefined'); + } + + return Object(val); + } + + function shouldUseNative() { + try { + if (!Object.assign) { + return false; + } + + // Detect buggy property enumeration order in older V8 versions. + + // https://bugs.chromium.org/p/v8/issues/detail?id=4118 + var test1 = new String('abc'); // eslint-disable-line no-new-wrappers + test1[5] = 'de'; + if (Object.getOwnPropertyNames(test1)[0] === '5') { + return false; + } + + // https://bugs.chromium.org/p/v8/issues/detail?id=3056 + var test2 = {}; + for (var i = 0; i < 10; i++) { + test2['_' + String.fromCharCode(i)] = i; + } + var order2 = Object.getOwnPropertyNames(test2).map(function (n) { + return test2[n]; + }); + if (order2.join('') !== '0123456789') { + return false; + } + + // https://bugs.chromium.org/p/v8/issues/detail?id=3056 + var test3 = {}; + 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { + test3[letter] = letter; + }); + if (Object.keys(Object.assign({}, test3)).join('') !== + 'abcdefghijklmnopqrst') { + return false; + } + + return true; + } catch (err) { + // We don't expect any of the above to throw, but better to be safe. + return false; + } + } + + objectAssign = shouldUseNative() ? Object.assign : function (target, source) { + var from; + var to = toObject(target); + var symbols; + + for (var s = 1; s < arguments.length; s++) { + from = Object(arguments[s]); + + for (var key in from) { + if (hasOwnProperty.call(from, key)) { + to[key] = from[key]; + } + } + + if (getOwnPropertySymbols) { + symbols = getOwnPropertySymbols(from); + for (var i = 0; i < symbols.length; i++) { + if (propIsEnumerable.call(from, symbols[i])) { + to[symbols[i]] = from[symbols[i]]; + } + } + } + } + + return to; + }; + return objectAssign; +} + +var react = {exports: {}}; + +var react_production_min = {}; + +/** @license React v17.0.2 + * react.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +var hasRequiredReact_production_min; + +function requireReact_production_min () { + if (hasRequiredReact_production_min) return react_production_min; + hasRequiredReact_production_min = 1; +var l=requireObjectAssign(),n=60103,p=60106;react_production_min.Fragment=60107;react_production_min.StrictMode=60108;react_production_min.Profiler=60114;var q=60109,r=60110,t=60112;react_production_min.Suspense=60113;var u=60115,v=60116; + if("function"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w("react.element");p=w("react.portal");react_production_min.Fragment=w("react.fragment");react_production_min.StrictMode=w("react.strict_mode");react_production_min.Profiler=w("react.profiler");q=w("react.provider");r=w("react.context");t=w("react.forward_ref");react_production_min.Suspense=w("react.suspense");u=w("react.memo");v=w("react.lazy");}var x="function"===typeof Symbol&&Symbol.iterator; + function y(a){if(null===a||"object"!==typeof a)return null;a=x&&a[x]||a["@@iterator"];return "function"===typeof a?a:null}function z(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c= + E};k=function(){};exports.unstable_forceFrameRate=function(a){0>a||125>>1,e=a[d];if(void 0!==e&&0I(n,c))void 0!==r&&0>I(r,n)?(a[d]=r,a[v]=c,d=v):(a[d]=n,a[m]=c,d=m);else if(void 0!==r&&0>I(r,c))a[d]=r,a[v]=c,d=v;else break a}}return b}return null}function I(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}var L=[],M=[],N=1,O=null,P=3,Q=!1,R=!1,S=!1; + function T(a){for(var b=J(M);null!==b;){if(null===b.callback)K(M);else if(b.startTime<=a)K(M),b.sortIndex=b.expirationTime,H(L,b);else break;b=J(M);}}function U(a){S=!1;T(a);if(!R)if(null!==J(L))R=!0,f(V);else {var b=J(M);null!==b&&g(U,b.startTime-a);}} + function V(a,b){R=!1;S&&(S=!1,h());Q=!0;var c=P;try{T(b);for(O=J(L);null!==O&&(!(O.expirationTime>b)||a&&!exports.unstable_shouldYield());){var d=O.callback;if("function"===typeof d){O.callback=null;P=O.priorityLevel;var e=d(O.expirationTime<=b);b=exports.unstable_now();"function"===typeof e?O.callback=e:O===J(L)&&K(L);T(b);}else K(L);O=J(L);}if(null!==O)var m=!0;else {var n=J(M);null!==n&&g(U,n.startTime-b);m=!1;}return m}finally{O=null,P=c,Q=!1;}}var W=k;exports.unstable_IdlePriority=5; + exports.unstable_ImmediatePriority=1;exports.unstable_LowPriority=4;exports.unstable_NormalPriority=3;exports.unstable_Profiling=null;exports.unstable_UserBlockingPriority=2;exports.unstable_cancelCallback=function(a){a.callback=null;};exports.unstable_continueExecution=function(){R||Q||(R=!0,f(V));};exports.unstable_getCurrentPriorityLevel=function(){return P};exports.unstable_getFirstCallbackNode=function(){return J(L)}; + exports.unstable_next=function(a){switch(P){case 1:case 2:case 3:var b=3;break;default:b=P;}var c=P;P=b;try{return a()}finally{P=c;}};exports.unstable_pauseExecution=function(){};exports.unstable_requestPaint=W;exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3;}var c=P;P=a;try{return b()}finally{P=c;}}; + exports.unstable_scheduleCallback=function(a,b,c){var d=exports.unstable_now();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0d?(a.sortIndex=c,H(M,a),null===J(L)&&a===J(M)&&(S?h():S=!0,g(U,c-d))):(a.sortIndex=e,H(L,a),R||Q||(R=!0,f(V)));return a}; + exports.unstable_wrapCallback=function(a){var b=P;return function(){var c=P;P=b;try{return a.apply(this,arguments)}finally{P=c;}}}; + } (scheduler_production_min)); + return scheduler_production_min; +} + +var hasRequiredScheduler; + +function requireScheduler () { + if (hasRequiredScheduler) return scheduler.exports; + hasRequiredScheduler = 1; + + { + scheduler.exports = requireScheduler_production_min(); + } + return scheduler.exports; +} + +/** @license React v17.0.2 + * react-dom.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +var hasRequiredReactDom_production_min; + +function requireReactDom_production_min () { + if (hasRequiredReactDom_production_min) return reactDom_production_min; + hasRequiredReactDom_production_min = 1; +var aa=reactExports,m=requireObjectAssign(),r=requireScheduler();function y(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;cb}return !1}function B(a,b,c,d,e,f,g){this.acceptsBooleans=2===b||3===b||4===b;this.attributeName=d;this.attributeNamespace=e;this.mustUseProperty=c;this.propertyName=a;this.type=b;this.sanitizeURL=f;this.removeEmptyString=g;}var D={}; + "children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(a){D[a]=new B(a,0,!1,a,null,!1,!1);});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){var b=a[0];D[b]=new B(b,1,!1,a[1],null,!1,!1);});["contentEditable","draggable","spellCheck","value"].forEach(function(a){D[a]=new B(a,2,!1,a.toLowerCase(),null,!1,!1);}); + ["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){D[a]=new B(a,2,!1,a,null,!1,!1);});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(a){D[a]=new B(a,3,!1,a.toLowerCase(),null,!1,!1);}); + ["checked","multiple","muted","selected"].forEach(function(a){D[a]=new B(a,3,!0,a,null,!1,!1);});["capture","download"].forEach(function(a){D[a]=new B(a,4,!1,a,null,!1,!1);});["cols","rows","size","span"].forEach(function(a){D[a]=new B(a,6,!1,a,null,!1,!1);});["rowSpan","start"].forEach(function(a){D[a]=new B(a,5,!1,a.toLowerCase(),null,!1,!1);});var oa=/[\-:]([a-z])/g;function pa(a){return a[1].toUpperCase()} + "accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var b=a.replace(oa, + pa);D[b]=new B(b,1,!1,a,null,!1,!1);});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(a){var b=a.replace(oa,pa);D[b]=new B(b,1,!1,a,"http://www.w3.org/1999/xlink",!1,!1);});["xml:base","xml:lang","xml:space"].forEach(function(a){var b=a.replace(oa,pa);D[b]=new B(b,1,!1,a,"http://www.w3.org/XML/1998/namespace",!1,!1);});["tabIndex","crossOrigin"].forEach(function(a){D[a]=new B(a,1,!1,a.toLowerCase(),null,!1,!1);}); + D.xlinkHref=new B("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(a){D[a]=new B(a,1,!1,a.toLowerCase(),null,!0,!0);}); + function qa(a,b,c,d){var e=D.hasOwnProperty(b)?D[b]:null;var f=null!==e?0===e.type:d?!1:!(2h||e[g]!==f[h])return "\n"+e[g].replace(" at new "," at ");while(1<=g&&0<=h)}break}}}finally{Oa=!1,Error.prepareStackTrace=c;}return (a=a?a.displayName||a.name:"")?Na(a):""} + function Qa(a){switch(a.tag){case 5:return Na(a.type);case 16:return Na("Lazy");case 13:return Na("Suspense");case 19:return Na("SuspenseList");case 0:case 2:case 15:return a=Pa(a.type,!1),a;case 11:return a=Pa(a.type.render,!1),a;case 22:return a=Pa(a.type._render,!1),a;case 1:return a=Pa(a.type,!0),a;default:return ""}} + function Ra(a){if(null==a)return null;if("function"===typeof a)return a.displayName||a.name||null;if("string"===typeof a)return a;switch(a){case ua:return "Fragment";case ta:return "Portal";case xa:return "Profiler";case wa:return "StrictMode";case Ba:return "Suspense";case Ca:return "SuspenseList"}if("object"===typeof a)switch(a.$$typeof){case za:return (a.displayName||"Context")+".Consumer";case ya:return (a._context.displayName||"Context")+".Provider";case Aa:var b=a.render;b=b.displayName||b.name||""; + return a.displayName||(""!==b?"ForwardRef("+b+")":"ForwardRef");case Da:return Ra(a.type);case Fa:return Ra(a._render);case Ea:b=a._payload;a=a._init;try{return Ra(a(b))}catch(c){}}return null}function Sa(a){switch(typeof a){case "boolean":case "number":case "object":case "string":case "undefined":return a;default:return ""}}function Ta(a){var b=a.type;return (a=a.nodeName)&&"input"===a.toLowerCase()&&("checkbox"===b||"radio"===b)} + function Ua(a){var b=Ta(a)?"checked":"value",c=Object.getOwnPropertyDescriptor(a.constructor.prototype,b),d=""+a[b];if(!a.hasOwnProperty(b)&&"undefined"!==typeof c&&"function"===typeof c.get&&"function"===typeof c.set){var e=c.get,f=c.set;Object.defineProperty(a,b,{configurable:!0,get:function(){return e.call(this)},set:function(a){d=""+a;f.call(this,a);}});Object.defineProperty(a,b,{enumerable:c.enumerable});return {getValue:function(){return d},setValue:function(a){d=""+a;},stopTracking:function(){a._valueTracker= + null;delete a[b];}}}}function Va(a){a._valueTracker||(a._valueTracker=Ua(a));}function Wa(a){if(!a)return !1;var b=a._valueTracker;if(!b)return !0;var c=b.getValue();var d="";a&&(d=Ta(a)?a.checked?"true":"false":a.value);a=d;return a!==c?(b.setValue(a),!0):!1}function Xa(a){a=a||("undefined"!==typeof document?document:void 0);if("undefined"===typeof a)return null;try{return a.activeElement||a.body}catch(b){return a.body}} + function Ya(a,b){var c=b.checked;return m({},b,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=c?c:a._wrapperState.initialChecked})}function Za(a,b){var c=null==b.defaultValue?"":b.defaultValue,d=null!=b.checked?b.checked:b.defaultChecked;c=Sa(null!=b.value?b.value:c);a._wrapperState={initialChecked:d,initialValue:c,controlled:"checkbox"===b.type||"radio"===b.type?null!=b.checked:null!=b.value};}function $a(a,b){b=b.checked;null!=b&&qa(a,"checked",b,!1);} + function ab(a,b){$a(a,b);var c=Sa(b.value),d=b.type;if(null!=c)if("number"===d){if(0===c&&""===a.value||a.value!=c)a.value=""+c;}else a.value!==""+c&&(a.value=""+c);else if("submit"===d||"reset"===d){a.removeAttribute("value");return}b.hasOwnProperty("value")?bb(a,b.type,c):b.hasOwnProperty("defaultValue")&&bb(a,b.type,Sa(b.defaultValue));null==b.checked&&null!=b.defaultChecked&&(a.defaultChecked=!!b.defaultChecked);} + function cb(a,b,c){if(b.hasOwnProperty("value")||b.hasOwnProperty("defaultValue")){var d=b.type;if(!("submit"!==d&&"reset"!==d||void 0!==b.value&&null!==b.value))return;b=""+a._wrapperState.initialValue;c||b===a.value||(a.value=b);a.defaultValue=b;}c=a.name;""!==c&&(a.name="");a.defaultChecked=!!a._wrapperState.initialChecked;""!==c&&(a.name=c);} + function bb(a,b,c){if("number"!==b||Xa(a.ownerDocument)!==a)null==c?a.defaultValue=""+a._wrapperState.initialValue:a.defaultValue!==""+c&&(a.defaultValue=""+c);}function db(a){var b="";aa.Children.forEach(a,function(a){null!=a&&(b+=a);});return b}function eb(a,b){a=m({children:void 0},b);if(b=db(b.children))a.children=b;return a} + function fb(a,b,c,d){a=a.options;if(b){b={};for(var e=0;e=c.length))throw Error(y(93));c=c[0];}b=c;}null==b&&(b="");c=b;}a._wrapperState={initialValue:Sa(c)};} + function ib(a,b){var c=Sa(b.value),d=Sa(b.defaultValue);null!=c&&(c=""+c,c!==a.value&&(a.value=c),null==b.defaultValue&&a.defaultValue!==c&&(a.defaultValue=c));null!=d&&(a.defaultValue=""+d);}function jb(a){var b=a.textContent;b===a._wrapperState.initialValue&&""!==b&&null!==b&&(a.value=b);}var kb={html:"http://www.w3.org/1999/xhtml",mathml:"http://www.w3.org/1998/Math/MathML",svg:"http://www.w3.org/2000/svg"}; + function lb(a){switch(a){case "svg":return "http://www.w3.org/2000/svg";case "math":return "http://www.w3.org/1998/Math/MathML";default:return "http://www.w3.org/1999/xhtml"}}function mb(a,b){return null==a||"http://www.w3.org/1999/xhtml"===a?lb(b):"http://www.w3.org/2000/svg"===a&&"foreignObject"===b?"http://www.w3.org/1999/xhtml":a} + var nb,ob=function(a){return "undefined"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(b,c,d,e){MSApp.execUnsafeLocalFunction(function(){return a(b,c,d,e)});}:a}(function(a,b){if(a.namespaceURI!==kb.svg||"innerHTML"in a)a.innerHTML=b;else {nb=nb||document.createElement("div");nb.innerHTML=""+b.valueOf().toString()+"";for(b=nb.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild);}}); + function pb(a,b){if(b){var c=a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b;} + var qb={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0, + floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},rb=["Webkit","ms","Moz","O"];Object.keys(qb).forEach(function(a){rb.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);qb[b]=qb[a];});});function sb(a,b,c){return null==b||"boolean"===typeof b||""===b?"":c||"number"!==typeof b||0===b||qb.hasOwnProperty(a)&&qb[a]?(""+b).trim():b+"px"} + function tb(a,b){a=a.style;for(var c in b)if(b.hasOwnProperty(c)){var d=0===c.indexOf("--"),e=sb(c,b[c],d);"float"===c&&(c="cssFloat");d?a.setProperty(c,e):a[c]=e;}}var ub=m({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0}); + function vb(a,b){if(b){if(ub[a]&&(null!=b.children||null!=b.dangerouslySetInnerHTML))throw Error(y(137,a));if(null!=b.dangerouslySetInnerHTML){if(null!=b.children)throw Error(y(60));if(!("object"===typeof b.dangerouslySetInnerHTML&&"__html"in b.dangerouslySetInnerHTML))throw Error(y(61));}if(null!=b.style&&"object"!==typeof b.style)throw Error(y(62));}} + function wb(a,b){if(-1===a.indexOf("-"))return "string"===typeof b.is;switch(a){case "annotation-xml":case "color-profile":case "font-face":case "font-face-src":case "font-face-uri":case "font-face-format":case "font-face-name":case "missing-glyph":return !1;default:return !0}}function xb(a){a=a.target||a.srcElement||window;a.correspondingUseElement&&(a=a.correspondingUseElement);return 3===a.nodeType?a.parentNode:a}var yb=null,zb=null,Ab=null; + function Bb(a){if(a=Cb(a)){if("function"!==typeof yb)throw Error(y(280));var b=a.stateNode;b&&(b=Db(b),yb(a.stateNode,a.type,b));}}function Eb(a){zb?Ab?Ab.push(a):Ab=[a]:zb=a;}function Fb(){if(zb){var a=zb,b=Ab;Ab=zb=null;Bb(a);if(b)for(a=0;ad?0:1<c;c++)b.push(a);return b} + function $c(a,b,c){a.pendingLanes|=b;var d=b-1;a.suspendedLanes&=d;a.pingedLanes&=d;a=a.eventTimes;b=31-Vc(b);a[b]=c;}var Vc=Math.clz32?Math.clz32:ad,bd=Math.log,cd=Math.LN2;function ad(a){return 0===a?32:31-(bd(a)/cd|0)|0}var dd=r.unstable_UserBlockingPriority,ed=r.unstable_runWithPriority,fd=!0;function gd(a,b,c,d){Kb||Ib();var e=hd,f=Kb;Kb=!0;try{Hb(e,a,b,c,d);}finally{(Kb=f)||Mb();}}function id(a,b,c,d){ed(dd,hd.bind(null,a,b,c,d));} + function hd(a,b,c,d){if(fd){var e;if((e=0===(b&4))&&0=be),ee=String.fromCharCode(32),fe=!1; + function ge(a,b){switch(a){case "keyup":return -1!==$d.indexOf(b.keyCode);case "keydown":return 229!==b.keyCode;case "keypress":case "mousedown":case "focusout":return !0;default:return !1}}function he(a){a=a.detail;return "object"===typeof a&&"data"in a?a.data:null}var ie=!1;function je(a,b){switch(a){case "compositionend":return he(b);case "keypress":if(32!==b.which)return null;fe=!0;return ee;case "textInput":return a=b.data,a===ee&&fe?null:a;default:return null}} + function ke(a,b){if(ie)return "compositionend"===a||!ae&&ge(a,b)?(a=nd(),md=ld=kd=null,ie=!1,a):null;switch(a){case "paste":return null;case "keypress":if(!(b.ctrlKey||b.altKey||b.metaKey)||b.ctrlKey&&b.altKey){if(b.char&&1=b)return {node:c,offset:b-a};a=d;}a:{for(;c;){if(c.nextSibling){c=c.nextSibling;break a}c=c.parentNode;}c=void 0;}c=Ke(c);}}function Me(a,b){return a&&b?a===b?!0:a&&3===a.nodeType?!1:b&&3===b.nodeType?Me(a,b.parentNode):"contains"in a?a.contains(b):a.compareDocumentPosition?!!(a.compareDocumentPosition(b)&16):!1:!1} + function Ne(){for(var a=window,b=Xa();b instanceof a.HTMLIFrameElement;){try{var c="string"===typeof b.contentWindow.location.href;}catch(d){c=!1;}if(c)a=b.contentWindow;else break;b=Xa(a.document);}return b}function Oe(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&("input"===b&&("text"===a.type||"search"===a.type||"tel"===a.type||"url"===a.type||"password"===a.type)||"textarea"===b||"true"===a.contentEditable)} + var Pe=fa&&"documentMode"in document&&11>=document.documentMode,Qe=null,Re=null,Se=null,Te=!1; + function Ue(a,b,c){var d=c.window===c?c.document:9===c.nodeType?c:c.ownerDocument;Te||null==Qe||Qe!==Xa(d)||(d=Qe,"selectionStart"in d&&Oe(d)?d={start:d.selectionStart,end:d.selectionEnd}:(d=(d.ownerDocument&&d.ownerDocument.defaultView||window).getSelection(),d={anchorNode:d.anchorNode,anchorOffset:d.anchorOffset,focusNode:d.focusNode,focusOffset:d.focusOffset}),Se&&Je(Se,d)||(Se=d,d=oe(Re,"onSelect"),0Af||(a.current=zf[Af],zf[Af]=null,Af--);}function I(a,b){Af++;zf[Af]=a.current;a.current=b;}var Cf={},M=Bf(Cf),N=Bf(!1),Df=Cf; + function Ef(a,b){var c=a.type.contextTypes;if(!c)return Cf;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},f;for(f in c)e[f]=b[f];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=e);return e}function Ff(a){a=a.childContextTypes;return null!==a&&void 0!==a}function Gf(){H(N);H(M);}function Hf(a,b,c){if(M.current!==Cf)throw Error(y(168));I(M,b);I(N,c);} + function If(a,b,c){var d=a.stateNode;a=b.childContextTypes;if("function"!==typeof d.getChildContext)return c;d=d.getChildContext();for(var e in d)if(!(e in a))throw Error(y(108,Ra(b)||"Unknown",e));return m({},c,d)}function Jf(a){a=(a=a.stateNode)&&a.__reactInternalMemoizedMergedChildContext||Cf;Df=M.current;I(M,a);I(N,N.current);return !0}function Kf(a,b,c){var d=a.stateNode;if(!d)throw Error(y(169));c?(a=If(a,b,Df),d.__reactInternalMemoizedMergedChildContext=a,H(N),H(M),I(M,a)):H(N);I(N,c);} + var Lf=null,Mf=null,Nf=r.unstable_runWithPriority,Of=r.unstable_scheduleCallback,Pf=r.unstable_cancelCallback,Qf=r.unstable_shouldYield,Rf=r.unstable_requestPaint,Sf=r.unstable_now,Tf=r.unstable_getCurrentPriorityLevel,Uf=r.unstable_ImmediatePriority,Vf=r.unstable_UserBlockingPriority,Wf=r.unstable_NormalPriority,Xf=r.unstable_LowPriority,Yf=r.unstable_IdlePriority,Zf={},$f=void 0!==Rf?Rf:function(){},ag=null,bg=null,cg=!1,dg=Sf(),O=1E4>dg?Sf:function(){return Sf()-dg}; + function eg(){switch(Tf()){case Uf:return 99;case Vf:return 98;case Wf:return 97;case Xf:return 96;case Yf:return 95;default:throw Error(y(332));}}function fg(a){switch(a){case 99:return Uf;case 98:return Vf;case 97:return Wf;case 96:return Xf;case 95:return Yf;default:throw Error(y(332));}}function gg(a,b){a=fg(a);return Nf(a,b)}function hg(a,b,c){a=fg(a);return Of(a,b,c)}function ig(){if(null!==bg){var a=bg;bg=null;Pf(a);}jg();} + function jg(){if(!cg&&null!==ag){cg=!0;var a=0;try{var b=ag;gg(99,function(){for(;az?(q=u,u=null):q=u.sibling;var n=p(e,u,h[z],k);if(null===n){null===u&&(u=q);break}a&&u&&null=== + n.alternate&&b(e,u);g=f(n,g,z);null===t?l=n:t.sibling=n;t=n;u=q;}if(z===h.length)return c(e,u),l;if(null===u){for(;zz?(q=u,u=null):q=u.sibling;var w=p(e,u,n.value,k);if(null===w){null===u&&(u=q);break}a&&u&&null===w.alternate&&b(e,u);g=f(w,g,z);null===t?l=w:t.sibling=w;t=w;u=q;}if(n.done)return c(e,u),l;if(null===u){for(;!n.done;z++,n=h.next())n=A(e,n.value,k),null!==n&&(g=f(n,g,z),null===t?l=n:t.sibling=n,t=n);return l}for(u=d(e,u);!n.done;z++,n=h.next())n=C(u,e,z,n.value,k),null!==n&&(a&&null!==n.alternate&& + u.delete(null===n.key?z:n.key),g=f(n,g,z),null===t?l=n:t.sibling=n,t=n);a&&u.forEach(function(a){return b(e,a)});return l}return function(a,d,f,h){var k="object"===typeof f&&null!==f&&f.type===ua&&null===f.key;k&&(f=f.props.children);var l="object"===typeof f&&null!==f;if(l)switch(f.$$typeof){case sa:a:{l=f.key;for(k=d;null!==k;){if(k.key===l){switch(k.tag){case 7:if(f.type===ua){c(a,k.sibling);d=e(k,f.props.children);d.return=a;a=d;break a}break;default:if(k.elementType===f.type){c(a,k.sibling); + d=e(k,f.props);d.ref=Qg(a,k,f);d.return=a;a=d;break a}}c(a,k);break}else b(a,k);k=k.sibling;}f.type===ua?(d=Xg(f.props.children,a.mode,h,f.key),d.return=a,a=d):(h=Vg(f.type,f.key,f.props,null,a.mode,h),h.ref=Qg(a,d,f),h.return=a,a=h);}return g(a);case ta:a:{for(k=f.key;null!==d;){if(d.key===k)if(4===d.tag&&d.stateNode.containerInfo===f.containerInfo&&d.stateNode.implementation===f.implementation){c(a,d.sibling);d=e(d,f.children||[]);d.return=a;a=d;break a}else {c(a,d);break}else b(a,d);d=d.sibling;}d= + Wg(f,a.mode,h);d.return=a;a=d;}return g(a)}if("string"===typeof f||"number"===typeof f)return f=""+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f),d.return=a,a=d):(c(a,d),d=Ug(f,a.mode,h),d.return=a,a=d),g(a);if(Pg(f))return x(a,d,f,h);if(La(f))return w(a,d,f,h);l&&Rg(a,f);if("undefined"===typeof f&&!k)switch(a.tag){case 1:case 22:case 0:case 11:case 15:throw Error(y(152,Ra(a.type)||"Component"));}return c(a,d)}}var Yg=Sg(!0),Zg=Sg(!1),$g={},ah=Bf($g),bh=Bf($g),ch=Bf($g); + function dh(a){if(a===$g)throw Error(y(174));return a}function eh(a,b){I(ch,b);I(bh,a);I(ah,$g);a=b.nodeType;switch(a){case 9:case 11:b=(b=b.documentElement)?b.namespaceURI:mb(null,"");break;default:a=8===a?b.parentNode:b,b=a.namespaceURI||null,a=a.tagName,b=mb(b,a);}H(ah);I(ah,b);}function fh(){H(ah);H(bh);H(ch);}function gh(a){dh(ch.current);var b=dh(ah.current);var c=mb(b,a.type);b!==c&&(I(bh,a),I(ah,c));}function hh(a){bh.current===a&&(H(ah),H(bh));}var P=Bf(0); + function ih(a){for(var b=a;null!==b;){if(13===b.tag){var c=b.memoizedState;if(null!==c&&(c=c.dehydrated,null===c||"$?"===c.data||"$!"===c.data))return b}else if(19===b.tag&&void 0!==b.memoizedProps.revealOrder){if(0!==(b.flags&64))return b}else if(null!==b.child){b.child.return=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return null;b=b.return;}b.sibling.return=b.return;b=b.sibling;}return null}var jh=null,kh=null,lh=!1; + function mh(a,b){var c=nh(5,null,null,0);c.elementType="DELETED";c.type="DELETED";c.stateNode=b;c.return=a;c.flags=8;null!==a.lastEffect?(a.lastEffect.nextEffect=c,a.lastEffect=c):a.firstEffect=a.lastEffect=c;}function oh(a,b){switch(a.tag){case 5:var c=a.type;b=1!==b.nodeType||c.toLowerCase()!==b.nodeName.toLowerCase()?null:b;return null!==b?(a.stateNode=b,!0):!1;case 6:return b=""===a.pendingProps||3!==b.nodeType?null:b,null!==b?(a.stateNode=b,!0):!1;case 13:return !1;default:return !1}} + function ph(a){if(lh){var b=kh;if(b){var c=b;if(!oh(a,b)){b=rf(c.nextSibling);if(!b||!oh(a,b)){a.flags=a.flags&-1025|2;lh=!1;jh=a;return}mh(jh,c);}jh=a;kh=rf(b.firstChild);}else a.flags=a.flags&-1025|2,lh=!1,jh=a;}}function qh(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag&&13!==a.tag;)a=a.return;jh=a;} + function rh(a){if(a!==jh)return !1;if(!lh)return qh(a),lh=!0,!1;var b=a.type;if(5!==a.tag||"head"!==b&&"body"!==b&&!nf(b,a.memoizedProps))for(b=kh;b;)mh(a,b),b=rf(b.nextSibling);qh(a);if(13===a.tag){a=a.memoizedState;a=null!==a?a.dehydrated:null;if(!a)throw Error(y(317));a:{a=a.nextSibling;for(b=0;a;){if(8===a.nodeType){var c=a.data;if("/$"===c){if(0===b){kh=rf(a.nextSibling);break a}b--;}else "$"!==c&&"$!"!==c&&"$?"!==c||b++;}a=a.nextSibling;}kh=null;}}else kh=jh?rf(a.stateNode.nextSibling):null;return !0} + function sh(){kh=jh=null;lh=!1;}var th=[];function uh(){for(var a=0;af))throw Error(y(301));f+=1;T=S=null;b.updateQueue=null;vh.current=Fh;a=c(d,e);}while(zh)}vh.current=Gh;b=null!==S&&null!==S.next;xh=0;T=S=R=null;yh=!1;if(b)throw Error(y(300));return a}function Hh(){var a={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};null===T?R.memoizedState=T=a:T=T.next=a;return T} + function Ih(){if(null===S){var a=R.alternate;a=null!==a?a.memoizedState:null;}else a=S.next;var b=null===T?R.memoizedState:T.next;if(null!==b)T=b,S=a;else {if(null===a)throw Error(y(310));S=a;a={memoizedState:S.memoizedState,baseState:S.baseState,baseQueue:S.baseQueue,queue:S.queue,next:null};null===T?R.memoizedState=T=a:T=T.next=a;}return T}function Jh(a,b){return "function"===typeof b?b(a):b} + function Kh(a){var b=Ih(),c=b.queue;if(null===c)throw Error(y(311));c.lastRenderedReducer=a;var d=S,e=d.baseQueue,f=c.pending;if(null!==f){if(null!==e){var g=e.next;e.next=f.next;f.next=g;}d.baseQueue=e=f;c.pending=null;}if(null!==e){e=e.next;d=d.baseState;var h=g=f=null,k=e;do{var l=k.lane;if((xh&l)===l)null!==h&&(h=h.next={lane:0,action:k.action,eagerReducer:k.eagerReducer,eagerState:k.eagerState,next:null}),d=k.eagerReducer===a?k.eagerState:a(d,k.action);else {var n={lane:l,action:k.action,eagerReducer:k.eagerReducer, + eagerState:k.eagerState,next:null};null===h?(g=h=n,f=d):h=h.next=n;R.lanes|=l;Dg|=l;}k=k.next;}while(null!==k&&k!==e);null===h?f=d:h.next=g;He(d,b.memoizedState)||(ug=!0);b.memoizedState=d;b.baseState=f;b.baseQueue=h;c.lastRenderedState=d;}return [b.memoizedState,c.dispatch]} + function Lh(a){var b=Ih(),c=b.queue;if(null===c)throw Error(y(311));c.lastRenderedReducer=a;var d=c.dispatch,e=c.pending,f=b.memoizedState;if(null!==e){c.pending=null;var g=e=e.next;do f=a(f,g.action),g=g.next;while(g!==e);He(f,b.memoizedState)||(ug=!0);b.memoizedState=f;null===b.baseQueue&&(b.baseState=f);c.lastRenderedState=f;}return [f,d]} + function Mh(a,b,c){var d=b._getVersion;d=d(b._source);var e=b._workInProgressVersionPrimary;if(null!==e)a=e===d;else if(a=a.mutableReadLanes,a=(xh&a)===a)b._workInProgressVersionPrimary=d,th.push(b);if(a)return c(b._source);th.push(b);throw Error(y(350));} + function Nh(a,b,c,d){var e=U;if(null===e)throw Error(y(349));var f=b._getVersion,g=f(b._source),h=vh.current,k=h.useState(function(){return Mh(e,b,c)}),l=k[1],n=k[0];k=T;var A=a.memoizedState,p=A.refs,C=p.getSnapshot,x=A.source;A=A.subscribe;var w=R;a.memoizedState={refs:p,source:b,subscribe:d};h.useEffect(function(){p.getSnapshot=c;p.setSnapshot=l;var a=f(b._source);if(!He(g,a)){a=c(b._source);He(n,a)||(l(a),a=Ig(w),e.mutableReadLanes|=a&e.pendingLanes);a=e.mutableReadLanes;e.entangledLanes|=a;for(var d= + e.entanglements,h=a;0c?98:c,function(){a(!0);});gg(97\x3c/script>",a=a.removeChild(a.firstChild)):"string"===typeof d.is?a=g.createElement(c,{is:d.is}):(a=g.createElement(c),"select"===c&&(g=a,d.multiple?g.multiple=!0:d.size&&(g.size=d.size))):a=g.createElementNS(a,c);a[wf]=b;a[xf]=d;Bi(a,b,!1,!1);b.stateNode=a;g=wb(c,d);switch(c){case "dialog":G("cancel",a);G("close",a); + e=d;break;case "iframe":case "object":case "embed":G("load",a);e=d;break;case "video":case "audio":for(e=0;eJi&&(b.flags|=64,f=!0,Fi(d,!1),b.lanes=33554432);}else {if(!f)if(a=ih(g),null!==a){if(b.flags|=64,f=!0,c=a.updateQueue,null!==c&&(b.updateQueue=c,b.flags|=4),Fi(d,!0),null===d.tail&&"hidden"===d.tailMode&&!g.alternate&&!lh)return b=b.lastEffect=d.lastEffect,null!==b&&(b.nextEffect=null),null}else 2*O()-d.renderingStartTime>Ji&&1073741824!==c&&(b.flags|= + 64,f=!0,Fi(d,!1),b.lanes=33554432);d.isBackwards?(g.sibling=b.child,b.child=g):(c=d.last,null!==c?c.sibling=g:b.child=g,d.last=g);}return null!==d.tail?(c=d.tail,d.rendering=c,d.tail=c.sibling,d.lastEffect=b.lastEffect,d.renderingStartTime=O(),c.sibling=null,b=P.current,I(P,f?b&1|2:b&1),c):null;case 23:case 24:return Ki(),null!==a&&null!==a.memoizedState!==(null!==b.memoizedState)&&"unstable-defer-without-hiding"!==d.mode&&(b.flags|=4),null}throw Error(y(156,b.tag));} + function Li(a){switch(a.tag){case 1:Ff(a.type)&&Gf();var b=a.flags;return b&4096?(a.flags=b&-4097|64,a):null;case 3:fh();H(N);H(M);uh();b=a.flags;if(0!==(b&64))throw Error(y(285));a.flags=b&-4097|64;return a;case 5:return hh(a),null;case 13:return H(P),b=a.flags,b&4096?(a.flags=b&-4097|64,a):null;case 19:return H(P),null;case 4:return fh(),null;case 10:return rg(a),null;case 23:case 24:return Ki(),null;default:return null}} + function Mi(a,b){try{var c="",d=b;do c+=Qa(d),d=d.return;while(d);var e=c;}catch(f){e="\nError generating stack: "+f.message+"\n"+f.stack;}return {value:a,source:b,stack:e}}function Ni(a,b){try{console.error(b.value);}catch(c){setTimeout(function(){throw c;});}}var Oi="function"===typeof WeakMap?WeakMap:Map;function Pi(a,b,c){c=zg(-1,c);c.tag=3;c.payload={element:null};var d=b.value;c.callback=function(){Qi||(Qi=!0,Ri=d);Ni(a,b);};return c} + function Si(a,b,c){c=zg(-1,c);c.tag=3;var d=a.type.getDerivedStateFromError;if("function"===typeof d){var e=b.value;c.payload=function(){Ni(a,b);return d(e)};}var f=a.stateNode;null!==f&&"function"===typeof f.componentDidCatch&&(c.callback=function(){"function"!==typeof d&&(null===Ti?Ti=new Set([this]):Ti.add(this),Ni(a,b));var c=b.stack;this.componentDidCatch(b.value,{componentStack:null!==c?c:""});});return c}var Ui="function"===typeof WeakSet?WeakSet:Set; + function Vi(a){var b=a.ref;if(null!==b)if("function"===typeof b)try{b(null);}catch(c){Wi(a,c);}else b.current=null;}function Xi(a,b){switch(b.tag){case 0:case 11:case 15:case 22:return;case 1:if(b.flags&256&&null!==a){var c=a.memoizedProps,d=a.memoizedState;a=b.stateNode;b=a.getSnapshotBeforeUpdate(b.elementType===b.type?c:lg(b.type,c),d);a.__reactInternalSnapshotBeforeUpdate=b;}return;case 3:b.flags&256&&qf(b.stateNode.containerInfo);return;case 5:case 6:case 4:case 17:return}throw Error(y(163));} + function Yi(a,b,c){switch(c.tag){case 0:case 11:case 15:case 22:b=c.updateQueue;b=null!==b?b.lastEffect:null;if(null!==b){a=b=b.next;do{if(3===(a.tag&3)){var d=a.create;a.destroy=d();}a=a.next;}while(a!==b)}b=c.updateQueue;b=null!==b?b.lastEffect:null;if(null!==b){a=b=b.next;do{var e=a;d=e.next;e=e.tag;0!==(e&4)&&0!==(e&1)&&(Zi(c,a),$i(c,a));a=d;}while(a!==b)}return;case 1:a=c.stateNode;c.flags&4&&(null===b?a.componentDidMount():(d=c.elementType===c.type?b.memoizedProps:lg(c.type,b.memoizedProps),a.componentDidUpdate(d, + b.memoizedState,a.__reactInternalSnapshotBeforeUpdate)));b=c.updateQueue;null!==b&&Eg(c,b,a);return;case 3:b=c.updateQueue;if(null!==b){a=null;if(null!==c.child)switch(c.child.tag){case 5:a=c.child.stateNode;break;case 1:a=c.child.stateNode;}Eg(c,b,a);}return;case 5:a=c.stateNode;null===b&&c.flags&4&&mf(c.type,c.memoizedProps)&&a.focus();return;case 6:return;case 4:return;case 12:return;case 13:null===c.memoizedState&&(c=c.alternate,null!==c&&(c=c.memoizedState,null!==c&&(c=c.dehydrated,null!==c&&Cc(c)))); + return;case 19:case 17:case 20:case 21:case 23:case 24:return}throw Error(y(163));} + function aj(a,b){for(var c=a;;){if(5===c.tag){var d=c.stateNode;if(b)d=d.style,"function"===typeof d.setProperty?d.setProperty("display","none","important"):d.display="none";else {d=c.stateNode;var e=c.memoizedProps.style;e=void 0!==e&&null!==e&&e.hasOwnProperty("display")?e.display:null;d.style.display=sb("display",e);}}else if(6===c.tag)c.stateNode.nodeValue=b?"":c.memoizedProps;else if((23!==c.tag&&24!==c.tag||null===c.memoizedState||c===a)&&null!==c.child){c.child.return=c;c=c.child;continue}if(c=== + a)break;for(;null===c.sibling;){if(null===c.return||c.return===a)return;c=c.return;}c.sibling.return=c.return;c=c.sibling;}} + function bj(a,b){if(Mf&&"function"===typeof Mf.onCommitFiberUnmount)try{Mf.onCommitFiberUnmount(Lf,b);}catch(f){}switch(b.tag){case 0:case 11:case 14:case 15:case 22:a=b.updateQueue;if(null!==a&&(a=a.lastEffect,null!==a)){var c=a=a.next;do{var d=c,e=d.destroy;d=d.tag;if(void 0!==e)if(0!==(d&4))Zi(b,c);else {d=b;try{e();}catch(f){Wi(d,f);}}c=c.next;}while(c!==a)}break;case 1:Vi(b);a=b.stateNode;if("function"===typeof a.componentWillUnmount)try{a.props=b.memoizedProps,a.state=b.memoizedState,a.componentWillUnmount();}catch(f){Wi(b, + f);}break;case 5:Vi(b);break;case 4:cj(a,b);}}function dj(a){a.alternate=null;a.child=null;a.dependencies=null;a.firstEffect=null;a.lastEffect=null;a.memoizedProps=null;a.memoizedState=null;a.pendingProps=null;a.return=null;a.updateQueue=null;}function ej(a){return 5===a.tag||3===a.tag||4===a.tag} + function fj(a){a:{for(var b=a.return;null!==b;){if(ej(b))break a;b=b.return;}throw Error(y(160));}var c=b;b=c.stateNode;switch(c.tag){case 5:var d=!1;break;case 3:b=b.containerInfo;d=!0;break;case 4:b=b.containerInfo;d=!0;break;default:throw Error(y(161));}c.flags&16&&(pb(b,""),c.flags&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c.return||ej(c.return)){c=null;break a}c=c.return;}c.sibling.return=c.return;for(c=c.sibling;5!==c.tag&&6!==c.tag&&18!==c.tag;){if(c.flags&2)continue b;if(null=== + c.child||4===c.tag)continue b;else c.child.return=c,c=c.child;}if(!(c.flags&2)){c=c.stateNode;break a}}d?gj(a,c,b):hj(a,c,b);} + function gj(a,b,c){var d=a.tag,e=5===d||6===d;if(e)a=e?a.stateNode:a.stateNode.instance,b?8===c.nodeType?c.parentNode.insertBefore(a,b):c.insertBefore(a,b):(8===c.nodeType?(b=c.parentNode,b.insertBefore(a,c)):(b=c,b.appendChild(a)),c=c._reactRootContainer,null!==c&&void 0!==c||null!==b.onclick||(b.onclick=jf));else if(4!==d&&(a=a.child,null!==a))for(gj(a,b,c),a=a.sibling;null!==a;)gj(a,b,c),a=a.sibling;} + function hj(a,b,c){var d=a.tag,e=5===d||6===d;if(e)a=e?a.stateNode:a.stateNode.instance,b?c.insertBefore(a,b):c.appendChild(a);else if(4!==d&&(a=a.child,null!==a))for(hj(a,b,c),a=a.sibling;null!==a;)hj(a,b,c),a=a.sibling;} + function cj(a,b){for(var c=b,d=!1,e,f;;){if(!d){d=c.return;a:for(;;){if(null===d)throw Error(y(160));e=d.stateNode;switch(d.tag){case 5:f=!1;break a;case 3:e=e.containerInfo;f=!0;break a;case 4:e=e.containerInfo;f=!0;break a}d=d.return;}d=!0;}if(5===c.tag||6===c.tag){a:for(var g=a,h=c,k=h;;)if(bj(g,k),null!==k.child&&4!==k.tag)k.child.return=k,k=k.child;else {if(k===h)break a;for(;null===k.sibling;){if(null===k.return||k.return===h)break a;k=k.return;}k.sibling.return=k.return;k=k.sibling;}f?(g=e,h=c.stateNode, + 8===g.nodeType?g.parentNode.removeChild(h):g.removeChild(h)):e.removeChild(c.stateNode);}else if(4===c.tag){if(null!==c.child){e=c.stateNode.containerInfo;f=!0;c.child.return=c;c=c.child;continue}}else if(bj(a,c),null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return;4===c.tag&&(d=!1);}c.sibling.return=c.return;c=c.sibling;}} + function ij(a,b){switch(b.tag){case 0:case 11:case 14:case 15:case 22:var c=b.updateQueue;c=null!==c?c.lastEffect:null;if(null!==c){var d=c=c.next;do 3===(d.tag&3)&&(a=d.destroy,d.destroy=void 0,void 0!==a&&a()),d=d.next;while(d!==c)}return;case 1:return;case 5:c=b.stateNode;if(null!=c){d=b.memoizedProps;var e=null!==a?a.memoizedProps:d;a=b.type;var f=b.updateQueue;b.updateQueue=null;if(null!==f){c[xf]=d;"input"===a&&"radio"===d.type&&null!=d.name&&$a(c,d);wb(a,e);b=wb(a,d);for(e=0;ee&&(e=g);c&=~f;}c=e;c=O()-c;c=(120>c?120:480>c?480:1080>c?1080:1920>c?1920:3E3>c?3E3:4320> + c?4320:1960*nj(c/1960))-c;if(10 component higher in the tree to provide a loading indicator or placeholder to display.");}5!==V&&(V=2);k=Mi(k,h);p= + g;do{switch(p.tag){case 3:f=k;p.flags|=4096;b&=-b;p.lanes|=b;var J=Pi(p,f,b);Bg(p,J);break a;case 1:f=k;var K=p.type,Q=p.stateNode;if(0===(p.flags&64)&&("function"===typeof K.getDerivedStateFromError||null!==Q&&"function"===typeof Q.componentDidCatch&&(null===Ti||!Ti.has(Q)))){p.flags|=4096;b&=-b;p.lanes|=b;var L=Si(p,f,b);Bg(p,L);break a}}p=p.return;}while(null!==p)}Zj(c);}catch(va){b=va;Y===c&&null!==c&&(Y=c=c.return);continue}break}while(1)} + function Pj(){var a=oj.current;oj.current=Gh;return null===a?Gh:a}function Tj(a,b){var c=X;X|=16;var d=Pj();U===a&&W===b||Qj(a,b);do try{ak();break}catch(e){Sj(a,e);}while(1);qg();X=c;oj.current=d;if(null!==Y)throw Error(y(261));U=null;W=0;return V}function ak(){for(;null!==Y;)bk(Y);}function Rj(){for(;null!==Y&&!Qf();)bk(Y);}function bk(a){var b=ck(a.alternate,a,qj);a.memoizedProps=a.pendingProps;null===b?Zj(a):Y=b;pj.current=null;} + function Zj(a){var b=a;do{var c=b.alternate;a=b.return;if(0===(b.flags&2048)){c=Gi(c,b,qj);if(null!==c){Y=c;return}c=b;if(24!==c.tag&&23!==c.tag||null===c.memoizedState||0!==(qj&1073741824)||0===(c.mode&4)){for(var d=0,e=c.child;null!==e;)d|=e.lanes|e.childLanes,e=e.sibling;c.childLanes=d;}null!==a&&0===(a.flags&2048)&&(null===a.firstEffect&&(a.firstEffect=b.firstEffect),null!==b.lastEffect&&(null!==a.lastEffect&&(a.lastEffect.nextEffect=b.firstEffect),a.lastEffect=b.lastEffect),1g&&(h=g,g=J,J=h),h=Le(t,J),f=Le(t,g),h&&f&&(1!==v.rangeCount||v.anchorNode!==h.node||v.anchorOffset!==h.offset||v.focusNode!==f.node||v.focusOffset!==f.offset)&&(q=q.createRange(),q.setStart(h.node,h.offset),v.removeAllRanges(),J>g?(v.addRange(q),v.extend(f.node,f.offset)):(q.setEnd(f.node,f.offset),v.addRange(q))))));q=[];for(v=t;v=v.parentNode;)1===v.nodeType&&q.push({element:v,left:v.scrollLeft,top:v.scrollTop});"function"===typeof t.focus&&t.focus();for(t= + 0;tO()-jj?Qj(a,0):uj|=c);Mj(a,b);}function lj(a,b){var c=a.stateNode;null!==c&&c.delete(b);b=0;0===b&&(b=a.mode,0===(b&2)?b=1:0===(b&4)?b=99===eg()?1:2:(0===Gj&&(Gj=tj),b=Yc(62914560&~Gj),0===b&&(b=4194304)));c=Hg();a=Kj(a,b);null!==a&&($c(a,b,c),Mj(a,c));}var ck; + ck=function(a,b,c){var d=b.lanes;if(null!==a)if(a.memoizedProps!==b.pendingProps||N.current)ug=!0;else if(0!==(c&d))ug=0!==(a.flags&16384)?!0:!1;else {ug=!1;switch(b.tag){case 3:ri(b);sh();break;case 5:gh(b);break;case 1:Ff(b.type)&&Jf(b);break;case 4:eh(b,b.stateNode.containerInfo);break;case 10:d=b.memoizedProps.value;var e=b.type._context;I(mg,e._currentValue);e._currentValue=d;break;case 13:if(null!==b.memoizedState){if(0!==(c&b.child.childLanes))return ti(a,b,c);I(P,P.current&1);b=hi(a,b,c);return null!== + b?b.sibling:null}I(P,P.current&1);break;case 19:d=0!==(c&b.childLanes);if(0!==(a.flags&64)){if(d)return Ai(a,b,c);b.flags|=64;}e=b.memoizedState;null!==e&&(e.rendering=null,e.tail=null,e.lastEffect=null);I(P,P.current);if(d)break;else return null;case 23:case 24:return b.lanes=0,mi(a,b,c)}return hi(a,b,c)}else ug=!1;b.lanes=0;switch(b.tag){case 2:d=b.type;null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2);a=b.pendingProps;e=Ef(b,M.current);tg(b,c);e=Ch(null,b,d,a,e,c);b.flags|=1;if("object"=== + typeof e&&null!==e&&"function"===typeof e.render&&void 0===e.$$typeof){b.tag=1;b.memoizedState=null;b.updateQueue=null;if(Ff(d)){var f=!0;Jf(b);}else f=!1;b.memoizedState=null!==e.state&&void 0!==e.state?e.state:null;xg(b);var g=d.getDerivedStateFromProps;"function"===typeof g&&Gg(b,d,g,a);e.updater=Kg;b.stateNode=e;e._reactInternals=b;Og(b,d,a,c);b=qi(null,b,d,!0,f,c);}else b.tag=0,fi(null,b,e,c),b=b.child;return b;case 16:e=b.elementType;a:{null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2); + a=b.pendingProps;f=e._init;e=f(e._payload);b.type=e;f=b.tag=hk(e);a=lg(e,a);switch(f){case 0:b=li(null,b,e,a,c);break a;case 1:b=pi(null,b,e,a,c);break a;case 11:b=gi(null,b,e,a,c);break a;case 14:b=ii(null,b,e,lg(e.type,a),d,c);break a}throw Error(y(306,e,""));}return b;case 0:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:lg(d,e),li(a,b,d,e,c);case 1:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:lg(d,e),pi(a,b,d,e,c);case 3:ri(b);d=b.updateQueue;if(null===a||null===d)throw Error(y(282)); + d=b.pendingProps;e=b.memoizedState;e=null!==e?e.element:null;yg(a,b);Cg(b,d,null,c);d=b.memoizedState.element;if(d===e)sh(),b=hi(a,b,c);else {e=b.stateNode;if(f=e.hydrate)kh=rf(b.stateNode.containerInfo.firstChild),jh=b,f=lh=!0;if(f){a=e.mutableSourceEagerHydrationData;if(null!=a)for(e=0;e q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\x00\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) { + case 0: + break; + + case 64: + if (105 === g || 99 === g) { + G += f + e.charAt(l); + break; + } + + default: + 58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2))); + } + I = r = u = q = 0; + f = ''; + g = e.charCodeAt(++l); + } + } + + switch (g) { + case 13: + case 10: + 47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00'); + 0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h); + z = 1; + D++; + break; + + case 59: + case 125: + if (0 === b + n + v + m) { + z++; + break; + } + + default: + z++; + y = e.charAt(l); + + switch (g) { + case 9: + case 32: + if (0 === n + m + b) switch (x) { + case 44: + case 58: + case 9: + case 32: + y = ''; + break; + + default: + 32 !== g && (y = ' '); + } + break; + + case 0: + y = '\\0'; + break; + + case 12: + y = '\\f'; + break; + + case 11: + y = '\\v'; + break; + + case 38: + 0 === n + b + m && (r = I = 1, y = '\f' + y); + break; + + case 108: + if (0 === n + b + m + E && 0 < u) switch (l - u) { + case 2: + 112 === x && 58 === e.charCodeAt(l - 3) && (E = x); + + case 8: + 111 === K && (E = K); + } + break; + + case 58: + 0 === n + b + m && (u = l); + break; + + case 44: + 0 === b + v + n + m && (r = 1, y += '\r'); + break; + + case 34: + case 39: + 0 === b && (n = n === g ? 0 : 0 === n ? g : n); + break; + + case 91: + 0 === n + b + v && m++; + break; + + case 93: + 0 === n + b + v && m--; + break; + + case 41: + 0 === n + b + m && v--; + break; + + case 40: + if (0 === n + b + m) { + if (0 === q) switch (2 * x + 3 * K) { + case 533: + break; + + default: + q = 1; + } + v++; + } + + break; + + case 64: + 0 === b + v + n + m + u + k && (k = 1); + break; + + case 42: + case 47: + if (!(0 < n + m + v)) switch (b) { + case 0: + switch (2 * g + 3 * e.charCodeAt(l + 1)) { + case 235: + b = 47; + break; + + case 220: + t = l, b = 42; + } + + break; + + case 42: + 47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0); + } + } + + 0 === b && (f += y); + } + + K = x; + x = g; + l++; + } + + t = p.length; + + if (0 < t) { + r = c; + if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F; + p = r.join(',') + '{' + p + '}'; + + if (0 !== w * E) { + 2 !== w || L(p, 2) || (E = 0); + + switch (E) { + case 111: + p = p.replace(ha, ':-moz-$1') + p; + break; + + case 112: + p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p; + } + + E = 0; + } + } + + return G + p + F; + } + + function X(d, c, e) { + var h = c.trim().split(ia); + c = h; + var a = h.length, + m = d.length; + + switch (m) { + case 0: + case 1: + var b = 0; + + for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) { + c[b] = Z(d, c[b], e).trim(); + } + + break; + + default: + var v = b = 0; + + for (c = []; b < a; ++b) { + for (var n = 0; n < m; ++n) { + c[v++] = Z(d[n] + ' ', h[b], e).trim(); + } + } + + } + + return c; + } + + function Z(d, c, e) { + var h = c.charCodeAt(0); + 33 > h && (h = (c = c.trim()).charCodeAt(0)); + + switch (h) { + case 38: + return c.replace(F, '$1' + d.trim()); + + case 58: + return d.trim() + c.replace(F, '$1' + d.trim()); + + default: + if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim()); + } + + return d + c; + } + + function P(d, c, e, h) { + var a = d + ';', + m = 2 * c + 3 * e + 4 * h; + + if (944 === m) { + d = a.indexOf(':', 9) + 1; + var b = a.substring(d, a.length - 1).trim(); + b = a.substring(0, d).trim() + b + ';'; + return 1 === w || 2 === w && L(b, 1) ? '-webkit-' + b + b : b; + } + + if (0 === w || 2 === w && !L(a, 1)) return a; + + switch (m) { + case 1015: + return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a; + + case 951: + return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a; + + case 963: + return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a; + + case 1009: + if (100 !== a.charCodeAt(4)) break; + + case 969: + case 942: + return '-webkit-' + a + a; + + case 978: + return '-webkit-' + a + '-moz-' + a + a; + + case 1019: + case 983: + return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a; + + case 883: + if (45 === a.charCodeAt(8)) return '-webkit-' + a + a; + if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a; + break; + + case 932: + if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) { + case 103: + return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a; + + case 115: + return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a; + + case 98: + return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a; + } + return '-webkit-' + a + '-ms-' + a + a; + + case 964: + return '-webkit-' + a + '-ms-flex-' + a + a; + + case 1023: + if (99 !== a.charCodeAt(8)) break; + b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify'); + return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a; + + case 1005: + return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a; + + case 1e3: + b = a.substring(13).trim(); + c = b.indexOf('-') + 1; + + switch (b.charCodeAt(0) + b.charCodeAt(c)) { + case 226: + b = a.replace(G, 'tb'); + break; + + case 232: + b = a.replace(G, 'tb-rl'); + break; + + case 220: + b = a.replace(G, 'lr'); + break; + + default: + return a; + } + + return '-webkit-' + a + '-ms-' + b + a; + + case 1017: + if (-1 === a.indexOf('sticky', 9)) break; + + case 975: + c = (a = d).length - 10; + b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim(); + + switch (m = b.charCodeAt(0) + (b.charCodeAt(7) | 0)) { + case 203: + if (111 > b.charCodeAt(8)) break; + + case 115: + a = a.replace(b, '-webkit-' + b) + ';' + a; + break; + + case 207: + case 102: + a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a; + } + + return a + ';'; + + case 938: + if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) { + case 105: + return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a; + + case 115: + return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a; + + default: + return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a; + } + break; + + case 973: + case 989: + if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break; + + case 931: + case 953: + if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a; + break; + + case 962: + if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a; + } + + return a; + } + + function L(d, c) { + var e = d.indexOf(1 === c ? ':' : '{'), + h = d.substring(0, 3 !== c ? e : 10); + e = d.substring(e + 1, d.length - 1); + return R(2 !== c ? h : h.replace(na, '$1'), e, c); + } + + function ea(d, c) { + var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2)); + return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')'; + } + + function H(d, c, e, h, a, m, b, v, n, q) { + for (var g = 0, x = c, w; g < A; ++g) { + switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) { + case void 0: + case !1: + case !0: + case null: + break; + + default: + x = w; + } + } + + if (x !== c) return x; + } + + function T(d) { + switch (d) { + case void 0: + case null: + A = S.length = 0; + break; + + default: + if ('function' === typeof d) S[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) { + T(d[c]); + } else Y = !!d | 0; + } + + return T; + } + + function U(d) { + d = d.prefix; + void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0); + return U; + } + + function B(d, c) { + var e = d; + 33 > e.charCodeAt(0) && (e = e.trim()); + V = e; + e = [V]; + + if (0 < A) { + var h = H(-1, c, e, e, D, z, 0, 0, 0, 0); + void 0 !== h && 'string' === typeof h && (c = h); + } + + var a = M(O, e, c, 0, 0); + 0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h)); + V = ''; + E = 0; + z = D = 1; + return a; + } + + var ca = /^\0+/g, + N = /[\0\r\f]/g, + aa = /: */g, + ka = /zoo|gra/, + ma = /([,: ])(transform)/g, + ia = /,\r+?/g, + F = /([\t\r\n ])*\f?&/g, + fa = /@(k\w+)\s*(\S*)\s*/, + Q = /::(place)/g, + ha = /:(read-only)/g, + G = /[svh]\w+-[tblr]{2}/, + da = /\(\s*(.*)\s*\)/g, + oa = /([\s\S]*?);/g, + ba = /-self|flex-/g, + na = /[^]*?(:[rp][el]a[\w-]+)[^]*/, + la = /stretch|:\s*\w+\-(?:conte|avail)/, + ja = /([^-])(image-set\()/, + z = 1, + D = 1, + E = 0, + w = 1, + O = [], + S = [], + A = 0, + R = null, + Y = 0, + V = ''; + B.use = T; + B.set = U; + void 0 !== W && U(W); + return B; +} + +var unitlessKeys = { + animationIterationCount: 1, + borderImageOutset: 1, + borderImageSlice: 1, + borderImageWidth: 1, + boxFlex: 1, + boxFlexGroup: 1, + boxOrdinalGroup: 1, + columnCount: 1, + columns: 1, + flex: 1, + flexGrow: 1, + flexPositive: 1, + flexShrink: 1, + flexNegative: 1, + flexOrder: 1, + gridRow: 1, + gridRowEnd: 1, + gridRowSpan: 1, + gridRowStart: 1, + gridColumn: 1, + gridColumnEnd: 1, + gridColumnSpan: 1, + gridColumnStart: 1, + msGridRow: 1, + msGridRowSpan: 1, + msGridColumn: 1, + msGridColumnSpan: 1, + fontWeight: 1, + lineHeight: 1, + opacity: 1, + order: 1, + orphans: 1, + tabSize: 1, + widows: 1, + zIndex: 1, + zoom: 1, + WebkitLineClamp: 1, + // SVG-related properties + fillOpacity: 1, + floodOpacity: 1, + stopOpacity: 1, + strokeDasharray: 1, + strokeDashoffset: 1, + strokeMiterlimit: 1, + strokeOpacity: 1, + strokeWidth: 1 +}; + +function memoize$2(fn) { + var cache = Object.create(null); + return function (arg) { + if (cache[arg] === undefined) cache[arg] = fn(arg); + return cache[arg]; + }; +} + +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$2(function (prop) { + return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 + /* o */ + && prop.charCodeAt(1) === 110 + /* n */ + && prop.charCodeAt(2) < 91; +} +/* Z+1 */ +); + +var reactIs$1 = {exports: {}}; + +var reactIs_production_min = {}; + +/** @license React v16.13.1 + * react-is.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +var hasRequiredReactIs_production_min; + +function requireReactIs_production_min () { + if (hasRequiredReactIs_production_min) return reactIs_production_min; + hasRequiredReactIs_production_min = 1; +var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b? + Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119; + function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d; + reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t}; + reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p}; + reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z; + return reactIs_production_min; +} + +{ + reactIs$1.exports = requireReactIs_production_min(); +} + +var reactIsExports = reactIs$1.exports; + +var reactIs = reactIsExports; + +/** + * Copyright 2015, Yahoo! Inc. + * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms. + */ +var REACT_STATICS = { + childContextTypes: true, + contextType: true, + contextTypes: true, + defaultProps: true, + displayName: true, + getDefaultProps: true, + getDerivedStateFromError: true, + getDerivedStateFromProps: true, + mixins: true, + propTypes: true, + type: true +}; +var KNOWN_STATICS = { + name: true, + length: true, + prototype: true, + caller: true, + callee: true, + arguments: true, + arity: true +}; +var FORWARD_REF_STATICS = { + '$$typeof': true, + render: true, + defaultProps: true, + displayName: true, + propTypes: true +}; +var MEMO_STATICS = { + '$$typeof': true, + compare: true, + defaultProps: true, + displayName: true, + propTypes: true, + type: true +}; +var TYPE_STATICS = {}; +TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS; +TYPE_STATICS[reactIs.Memo] = MEMO_STATICS; + +function getStatics(component) { + // React v16.11 and below + if (reactIs.isMemo(component)) { + return MEMO_STATICS; + } // React v16.12 and above + + + return TYPE_STATICS[component['$$typeof']] || REACT_STATICS; +} + +var defineProperty$3 = Object.defineProperty; +var getOwnPropertyNames = Object.getOwnPropertyNames; +var getOwnPropertySymbols = Object.getOwnPropertySymbols; +var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; +var getPrototypeOf = Object.getPrototypeOf; +var objectPrototype = Object.prototype; +function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) { + if (typeof sourceComponent !== 'string') { + // don't hoist over string (html) components + if (objectPrototype) { + var inheritedComponent = getPrototypeOf(sourceComponent); + + if (inheritedComponent && inheritedComponent !== objectPrototype) { + hoistNonReactStatics(targetComponent, inheritedComponent, blacklist); + } + } + + var keys = getOwnPropertyNames(sourceComponent); + + if (getOwnPropertySymbols) { + keys = keys.concat(getOwnPropertySymbols(sourceComponent)); + } + + var targetStatics = getStatics(targetComponent); + var sourceStatics = getStatics(sourceComponent); + + for (var i = 0; i < keys.length; ++i) { + var key = keys[i]; + + if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) { + var descriptor = getOwnPropertyDescriptor(sourceComponent, key); + + try { + // Avoid failures from read-only properties + defineProperty$3(targetComponent, key, descriptor); + } catch (e) {} + } + } + } + + return targetComponent; +} + +var hoistNonReactStatics_cjs = hoistNonReactStatics; + +var f = /*@__PURE__*/getDefaultExportFromCjs(hoistNonReactStatics_cjs); + +function m(){return (m=Object.assign||function(e){for(var t=1;t1?t-1:0),r=1;r0?" Args: "+n.join(", "):""))}var D=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&R(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s=x&&(x=t+1),j.set(e,t),T.set(t,e);},B="style["+_+'][data-styled-version="5.3.11"]',M=new RegExp("^"+_+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),G=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(_))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(_,"active"),r.setAttribute("data-styled-version","5.3.11");var i=F();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},q=function(){function e(e){var t=this.element=Y(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return !1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},t.getRule=function(e){return e0&&(u+=e+",");})),r+=""+a+c+'{content:"'+u+'"}/*!sc*/\n';}}}return r}(this)},e}(),X=/(a)(d)/gi,Z=function(e){return String.fromCharCode(e+(e>25?39:97))};function K(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=Z(t%52)+n;return (Z(t%52)+n).replace(X,"$1-$2")}var Q=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},ee=function(e){return Q(5381,e)};function te(e){for(var t=0;t>>0);if(!t.hasNameForId(r,i)){var a=n(s,"."+i,void 0,r);t.insertRules(r,i,a);}o.push(i),this.staticRulesId=i;}else {for(var c=this.rules.length,u=Q(this.baseHash,n.hash),l="",d=0;d>>0);if(!t.hasNameForId(r,m)){var y=n(l,"."+m,void 0,r);t.insertRules(r,m,y);}o.push(m);}}return o.join(" ")},e}(),oe=/^\s*\/\/.*$/gm,se=[":","[",".","#"];function ie(e){var t,n,r,o,s=void 0===e?S:e,i=s.options,a=void 0===i?S:i,c=s.plugins,u=void 0===c?g:c,l=new stylis_min(a),h=[],p=function(e){function t(t){if(t)try{e(t+"}");}catch(e){}}return function(n,r,o,s,i,a,c,u,l,d){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===u)return r+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),"";default:return r+(0===d?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t);}}}((function(e){h.push(e);})),f=function(e,r,s){return 0===r&&-1!==se.indexOf(s[n.length])||s.match(o)?e:"."+t};function m(e,s,i,a){void 0===a&&(a="&");var c=e.replace(oe,""),u=s&&i?i+" "+s+" { "+c+" }":c;return t=a,n=s,r=new RegExp("\\"+n+"\\b","g"),o=new RegExp("(\\"+n+"\\b){2,}"),l(i||!s?"":s,u)}return l.use([].concat(u,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,f));},p,function(e){if(-2===e){var t=h;return h=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||R(15),Q(e,t.name)}),5381).toString():"",m}var ae=React__default.createContext();ae.Consumer;var ue=React__default.createContext(),le=(ue.Consumer,new J),de=ie();function he(){return reactExports.useContext(ae)||le}function pe(){return reactExports.useContext(ue)||de}var me=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=de);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"));},this.toString=function(){return R(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t;}return e.prototype.getName=function(e){return void 0===e&&(e=de),this.name+e.hash},e}(),ye=/([A-Z])/,ve=/([A-Z])/g,ge=/^ms-/,Se=function(e){return "-"+e.toLowerCase()};function we(e){return ye.test(e)?e.replace(ve,Se).replace(ge,"-ms-"):e}var Ee=function(e){return null==e||!1===e||""===e};function be(e,n,r,o){if(Array.isArray(e)){for(var s,i=[],a=0,c=e.length;a1?t-1:0),r=1;r?@[\\\]^`{|}~-]+/g,Re=/(^-|-$)/g;function De(e){return e.replace(Oe,"-").replace(Re,"")}var je=function(e){return K(ee(e)>>>0)};function Te(e){return "string"==typeof e&&("production"==="production")}var xe=function(e){return "function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},ke=function(e){return "__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function Ve(e,t,n){var r=e[n];xe(t)&&xe(r)?ze(r,t):e[n]=t;}function ze(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r=0||(o[n]=e[n]);return o}(t,["componentId"]),s=r&&r+"-"+(Te(e)?e:De(E(e)));return Fe(e,m({},o,{attrs:_,componentId:s}),n)},Object.defineProperty(A,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?ze({},e.defaultProps,t):t;}}),Object.defineProperty(A,"toString",{value:function(){return "."+A.styledComponentId}}),i&&f(A,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),A}var Ye=function(e){return function e(t,r,o){if(void 0===o&&(o=S),!reactIsExports$1.isValidElementType(r))return R(1,String(r));var s=function(){return t(r,o,Ne.apply(void 0,arguments))};return s.withConfig=function(n){return e(t,r,m({},o,{},n))},s.attrs=function(n){return e(t,r,m({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},s}(Fe,e)};["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","textPath","tspan"].forEach((function(e){Ye[e]=Ye(e);}));function $e(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r { + let environment = relativeDocument; + if (!environment) { + environment = document; + } + const isValidFocusTarget = el => { + if (el && el !== scope.current && el.nodeName !== 'HTML' && el.nodeName !== 'BODY' && 'classList' in el && 'contains' in el.classList) { + return true; + } + return false; + }; + const focusTriggersKeyboardModality = el => { + const type = el.type; + const tagName = el.tagName; + if (tagName === 'INPUT' && INPUT_TYPES_WHITE_LIST[type] && !el.readOnly) { + return true; + } + if (tagName === 'TEXTAREA' && !el.readOnly) { + return true; + } + if (el.isContentEditable) { + return true; + } + return false; + }; + const isFocused = el => { + if (el && (el.classList.contains(className) || el.hasAttribute(dataAttribute))) { + return true; + } + return false; + }; + const addFocusVisibleClass = el => { + if (isFocused(el)) { + return; + } + el && el.classList.add(className); + el && el.setAttribute(dataAttribute, 'true'); + }; + const removeFocusVisibleClass = el => { + el.classList.remove(className); + el.removeAttribute(dataAttribute); + }; + const onKeyDown = e => { + if (e.metaKey || e.altKey || e.ctrlKey) { + return; + } + if (isValidFocusTarget(environment.activeElement)) { + addFocusVisibleClass(environment.activeElement); + } + hadKeyboardEvent.current = true; + }; + const onPointerDown = () => { + hadKeyboardEvent.current = false; + }; + const onFocus = e => { + if (!isValidFocusTarget(e.target)) { + return; + } + if (hadKeyboardEvent.current || focusTriggersKeyboardModality(e.target)) { + addFocusVisibleClass(e.target); + } + }; + const onBlur = e => { + if (!isValidFocusTarget(e.target)) { + return; + } + if (isFocused(e.target)) { + hadFocusVisibleRecently.current = true; + clearTimeout(hadFocusVisibleRecentlyTimeout.current); + const timeoutId = setTimeout(() => { + hadFocusVisibleRecently.current = false; + clearTimeout(hadFocusVisibleRecentlyTimeout.current); + }, 100); + hadFocusVisibleRecentlyTimeout.current = Number(timeoutId); + removeFocusVisibleClass(e.target); + } + }; + const onInitialPointerMove = e => { + const nodeName = e.target.nodeName; + if (nodeName && nodeName.toLowerCase() === 'html') { + return; + } + hadKeyboardEvent.current = false; + removeInitialPointerMoveListeners(); + }; + const addInitialPointerMoveListeners = () => { + environment.addEventListener('mousemove', onInitialPointerMove); + environment.addEventListener('mousedown', onInitialPointerMove); + environment.addEventListener('mouseup', onInitialPointerMove); + environment.addEventListener('pointermove', onInitialPointerMove); + environment.addEventListener('pointerdown', onInitialPointerMove); + environment.addEventListener('pointerup', onInitialPointerMove); + environment.addEventListener('touchmove', onInitialPointerMove); + environment.addEventListener('touchstart', onInitialPointerMove); + environment.addEventListener('touchend', onInitialPointerMove); + }; + const removeInitialPointerMoveListeners = () => { + environment.removeEventListener('mousemove', onInitialPointerMove); + environment.removeEventListener('mousedown', onInitialPointerMove); + environment.removeEventListener('mouseup', onInitialPointerMove); + environment.removeEventListener('pointermove', onInitialPointerMove); + environment.removeEventListener('pointerdown', onInitialPointerMove); + environment.removeEventListener('pointerup', onInitialPointerMove); + environment.removeEventListener('touchmove', onInitialPointerMove); + environment.removeEventListener('touchstart', onInitialPointerMove); + environment.removeEventListener('touchend', onInitialPointerMove); + }; + const onVisibilityChange = () => { + if (environment.visibilityState === 'hidden') { + if (hadFocusVisibleRecently.current) { + hadKeyboardEvent.current = true; + } + } + }; + const currentScope = scope.current; + if (!environment || !currentScope) { + return; + } + environment.addEventListener('keydown', onKeyDown, true); + environment.addEventListener('mousedown', onPointerDown, true); + environment.addEventListener('pointerdown', onPointerDown, true); + environment.addEventListener('touchstart', onPointerDown, true); + environment.addEventListener('visibilitychange', onVisibilityChange, true); + addInitialPointerMoveListeners(); + currentScope && currentScope.addEventListener('focus', onFocus, true); + currentScope && currentScope.addEventListener('blur', onBlur, true); + return () => { + environment.removeEventListener('keydown', onKeyDown); + environment.removeEventListener('mousedown', onPointerDown); + environment.removeEventListener('pointerdown', onPointerDown); + environment.removeEventListener('touchstart', onPointerDown); + environment.removeEventListener('visibilityChange', onVisibilityChange); + removeInitialPointerMoveListeners(); + currentScope && currentScope.removeEventListener('focus', onFocus); + currentScope && currentScope.removeEventListener('blur', onBlur); + clearTimeout(hadFocusVisibleRecentlyTimeout.current); + }; + }, [relativeDocument, scope, className, dataAttribute]); +} +({ + children: PropTypes.func, + render: PropTypes.func, + relativeDocument: PropTypes.object, + className: PropTypes.string, + dataAttribute: PropTypes.string +}); + +/** + * @reach/utils v0.18.0 + * + * Copyright (c) 2018-2022, React Training LLC + * + * This source code is licensed under the MIT license found in the + * LICENSE.md file in the root directory of this source tree. + * + * @license MIT + */ + + +// src/can-use-dom.ts +function canUseDOM() { + return !!(typeof window !== "undefined" && window.document && window.document.createElement); +} +var useIsomorphicLayoutEffect$1 = canUseDOM() ? reactExports.useLayoutEffect : reactExports.useEffect; + +var serverHandoffComplete = false; +var id = 0; +function genId() { + return ++id; +} +var maybeReactUseId = React["useId".toString()]; +function useId(providedId) { + if (maybeReactUseId !== void 0) { + let generatedId = maybeReactUseId(); + return providedId ?? generatedId; + } + let initialId = providedId ?? (serverHandoffComplete ? genId() : null); + let [id2, setId] = reactExports.useState(initialId); + useIsomorphicLayoutEffect$1(() => { + if (id2 === null) { + setId(genId()); + } + }, []); + reactExports.useEffect(() => { + if (serverHandoffComplete === false) { + serverHandoffComplete = true; + } + }, []); + return providedId ?? id2 ?? void 0; +} + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +function composeEventHandlers$2() { + for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) { + fns[_key] = arguments[_key]; + } + return function (event) { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + return fns.some(fn => { + fn && fn(event, ...args); + return event && event.defaultPrevented; + }); + }; +} + +function getControlledValue() { + for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) { + values[_key] = arguments[_key]; + } + for (const value of values) { + if (value !== undefined) { + return value; + } + } + return undefined; +} + +const KEY_CODES = { + ALT: 18, + ASTERISK: 170, + BACKSPACE: 8, + COMMA: 188, + DELETE: 46, + DOWN: 40, + END: 35, + ENTER: 13, + ESCAPE: 27, + HOME: 36, + LEFT: 37, + NUMPAD_ADD: 107, + NUMPAD_DECIMAL: 110, + NUMPAD_DIVIDE: 111, + NUMPAD_ENTER: 108, + NUMPAD_MULTIPLY: 106, + NUMPAD_SUBTRACT: 109, + PAGE_DOWN: 34, + PAGE_UP: 33, + PERIOD: 190, + RIGHT: 39, + SHIFT: 16, + SPACE: 32, + TAB: 9, + UP: 38 +}; + +var DocumentPosition$2; +(function (DocumentPosition) { + DocumentPosition[DocumentPosition["DISCONNECTED"] = 1] = "DISCONNECTED"; + DocumentPosition[DocumentPosition["PRECEDING"] = 2] = "PRECEDING"; + DocumentPosition[DocumentPosition["FOLLOWING"] = 4] = "FOLLOWING"; + DocumentPosition[DocumentPosition["CONTAINS"] = 8] = "CONTAINS"; + DocumentPosition[DocumentPosition["CONTAINED_BY"] = 16] = "CONTAINED_BY"; + DocumentPosition[DocumentPosition["IMPLEMENTATION_SPECIFIC"] = 32] = "IMPLEMENTATION_SPECIFIC"; +})(DocumentPosition$2 || (DocumentPosition$2 = {})); + +function _extends$x() { + _extends$x = Object.assign ? Object.assign.bind() : 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$x.apply(this, arguments); +} + +function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + return self; +} + +function _setPrototypeOf(o, p) { + _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + return _setPrototypeOf(o, p); +} + +function _inheritsLoose(subClass, superClass) { + subClass.prototype = Object.create(superClass.prototype); + subClass.prototype.constructor = subClass; + _setPrototypeOf(subClass, superClass); +} + +function _getPrototypeOf(o) { + _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf(o); +} + +function _isNativeFunction(fn) { + return Function.toString.call(fn).indexOf("[native code]") !== -1; +} + +function _isNativeReflectConstruct() { + if (typeof Reflect === "undefined" || !Reflect.construct) return false; + if (Reflect.construct.sham) return false; + if (typeof Proxy === "function") return true; + try { + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); + return true; + } catch (e) { + return false; + } +} + +function _construct(Parent, args, Class) { + if (_isNativeReflectConstruct()) { + _construct = Reflect.construct.bind(); + } else { + _construct = function _construct(Parent, args, Class) { + var a = [null]; + a.push.apply(a, args); + var Constructor = Function.bind.apply(Parent, a); + var instance = new Constructor(); + if (Class) _setPrototypeOf(instance, Class.prototype); + return instance; + }; + } + return _construct.apply(null, arguments); +} + +function _wrapNativeSuper(Class) { + var _cache = typeof Map === "function" ? new Map() : undefined; + _wrapNativeSuper = function _wrapNativeSuper(Class) { + if (Class === null || !_isNativeFunction(Class)) return Class; + if (typeof Class !== "function") { + throw new TypeError("Super expression must either be null or a function"); + } + if (typeof _cache !== "undefined") { + if (_cache.has(Class)) return _cache.get(Class); + _cache.set(Class, Wrapper); + } + function Wrapper() { + return _construct(Class, arguments, _getPrototypeOf(this).constructor); + } + Wrapper.prototype = Object.create(Class.prototype, { + constructor: { + value: Wrapper, + enumerable: false, + writable: true, + configurable: true + } + }); + return _setPrototypeOf(Wrapper, Class); + }; + return _wrapNativeSuper(Class); +} + +function last() { + var _ref; + + return _ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref]; +} + +function negation(a) { + return -a; +} + +function addition(a, b) { + return a + b; +} + +function subtraction(a, b) { + return a - b; +} + +function multiplication(a, b) { + return a * b; +} + +function division(a, b) { + return a / b; +} + +function max$2() { + return Math.max.apply(Math, arguments); +} + +function min$2() { + return Math.min.apply(Math, arguments); +} + +function comma() { + return Array.of.apply(Array, arguments); +} + +var defaultSymbols = { + symbols: { + '*': { + infix: { + symbol: '*', + f: multiplication, + notation: 'infix', + precedence: 4, + rightToLeft: 0, + argCount: 2 + }, + symbol: '*', + regSymbol: '\\*' + }, + '/': { + infix: { + symbol: '/', + f: division, + notation: 'infix', + precedence: 4, + rightToLeft: 0, + argCount: 2 + }, + symbol: '/', + regSymbol: '/' + }, + '+': { + infix: { + symbol: '+', + f: addition, + notation: 'infix', + precedence: 2, + rightToLeft: 0, + argCount: 2 + }, + prefix: { + symbol: '+', + f: last, + notation: 'prefix', + precedence: 3, + rightToLeft: 0, + argCount: 1 + }, + symbol: '+', + regSymbol: '\\+' + }, + '-': { + infix: { + symbol: '-', + f: subtraction, + notation: 'infix', + precedence: 2, + rightToLeft: 0, + argCount: 2 + }, + prefix: { + symbol: '-', + f: negation, + notation: 'prefix', + precedence: 3, + rightToLeft: 0, + argCount: 1 + }, + symbol: '-', + regSymbol: '-' + }, + ',': { + infix: { + symbol: ',', + f: comma, + notation: 'infix', + precedence: 1, + rightToLeft: 0, + argCount: 2 + }, + symbol: ',', + regSymbol: ',' + }, + '(': { + prefix: { + symbol: '(', + f: last, + notation: 'prefix', + precedence: 0, + rightToLeft: 0, + argCount: 1 + }, + symbol: '(', + regSymbol: '\\(' + }, + ')': { + postfix: { + symbol: ')', + f: undefined, + notation: 'postfix', + precedence: 0, + rightToLeft: 0, + argCount: 1 + }, + symbol: ')', + regSymbol: '\\)' + }, + min: { + func: { + symbol: 'min', + f: min$2, + notation: 'func', + precedence: 0, + rightToLeft: 0, + argCount: 1 + }, + symbol: 'min', + regSymbol: 'min\\b' + }, + max: { + func: { + symbol: 'max', + f: max$2, + notation: 'func', + precedence: 0, + rightToLeft: 0, + argCount: 1 + }, + symbol: 'max', + regSymbol: 'max\\b' + } + } +}; +var defaultSymbolMap = defaultSymbols; +/** + * Create an error file out of errors.md for development and a simple web link to the full errors + * in production mode. + * @private + */ + + +var PolishedError = /*#__PURE__*/function (_Error) { + _inheritsLoose(PolishedError, _Error); + + function PolishedError(code) { + var _this; + + { + _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this; + } + + return _assertThisInitialized(_this); + } + + return PolishedError; +}( /*#__PURE__*/_wrapNativeSuper(Error)); + +var unitRegExp = /((?!\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?!s)|hv|xamv|nimv|wv|sm|s(?!\D|$)|ged|darg?|nrut)/g; // Merges additional math functionality into the defaults. + +function mergeSymbolMaps(additionalSymbols) { + var symbolMap = {}; + symbolMap.symbols = additionalSymbols ? _extends$x({}, defaultSymbolMap.symbols, additionalSymbols.symbols) : _extends$x({}, defaultSymbolMap.symbols); + return symbolMap; +} + +function exec(operators, values) { + var _ref; + + var op = operators.pop(); + values.push(op.f.apply(op, (_ref = []).concat.apply(_ref, values.splice(-op.argCount)))); + return op.precedence; +} + +function calculate(expression, additionalSymbols) { + var symbolMap = mergeSymbolMaps(additionalSymbols); + var match; + var operators = [symbolMap.symbols['('].prefix]; + var values = []; + var pattern = new RegExp( // Pattern for numbers + "\\d+(?:\\.\\d+)?|" + // ...and patterns for individual operators/function names + Object.keys(symbolMap.symbols).map(function (key) { + return symbolMap.symbols[key]; + }) // longer symbols should be listed first + // $FlowFixMe + .sort(function (a, b) { + return b.symbol.length - a.symbol.length; + }) // $FlowFixMe + .map(function (val) { + return val.regSymbol; + }).join('|') + "|(\\S)", 'g'); + pattern.lastIndex = 0; // Reset regular expression object + + var afterValue = false; + + do { + match = pattern.exec(expression); + + var _ref2 = match || [')', undefined], + token = _ref2[0], + bad = _ref2[1]; + + var notNumber = symbolMap.symbols[token]; + var notNewValue = notNumber && !notNumber.prefix && !notNumber.func; + var notAfterValue = !notNumber || !notNumber.postfix && !notNumber.infix; // Check for syntax errors: + + if (bad || (afterValue ? notAfterValue : notNewValue)) { + throw new PolishedError(37, match ? match.index : expression.length, expression); + } + + if (afterValue) { + // We either have an infix or postfix operator (they should be mutually exclusive) + var curr = notNumber.postfix || notNumber.infix; + + do { + var prev = operators[operators.length - 1]; + if ((curr.precedence - prev.precedence || prev.rightToLeft) > 0) break; // Apply previous operator, since it has precedence over current one + } while (exec(operators, values)); // Exit loop after executing an opening parenthesis or function + + + afterValue = curr.notation === 'postfix'; + + if (curr.symbol !== ')') { + operators.push(curr); // Postfix always has precedence over any operator that follows after it + + if (afterValue) exec(operators, values); + } + } else if (notNumber) { + // prefix operator or function + operators.push(notNumber.prefix || notNumber.func); + + if (notNumber.func) { + // Require an opening parenthesis + match = pattern.exec(expression); + + if (!match || match[0] !== '(') { + throw new PolishedError(38, match ? match.index : expression.length, expression); + } + } + } else { + // number + values.push(+token); + afterValue = true; + } + } while (match && operators.length); + + if (operators.length) { + throw new PolishedError(39, match ? match.index : expression.length, expression); + } else if (match) { + throw new PolishedError(40, match ? match.index : expression.length, expression); + } else { + return values.pop(); + } +} + +function reverseString(str) { + return str.split('').reverse().join(''); +} +/** + * Helper for doing math with CSS Units. Accepts a formula as a string. All values in the formula must have the same unit (or be unitless). Supports complex formulas utliziing addition, subtraction, multiplication, division, square root, powers, factorial, min, max, as well as parentheses for order of operation. + * + *In cases where you need to do calculations with mixed units where one unit is a [relative length unit](https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units), you will want to use [CSS Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc). + * + * *warning* While we've done everything possible to ensure math safely evalutes formulas expressed as strings, you should always use extreme caution when passing `math` user provided values. + * @example + * // Styles as object usage + * const styles = { + * fontSize: math('12rem + 8rem'), + * fontSize: math('(12px + 2px) * 3'), + * fontSize: math('3px^2 + sqrt(4)'), + * } + * + * // styled-components usage + * const div = styled.div` + * fontSize: ${math('12rem + 8rem')}; + * fontSize: ${math('(12px + 2px) * 3')}; + * fontSize: ${math('3px^2 + sqrt(4)')}; + * ` + * + * // CSS as JS Output + * + * div: { + * fontSize: '20rem', + * fontSize: '42px', + * fontSize: '11px', + * } + */ + + +function math(formula, additionalSymbols) { + var reversedFormula = reverseString(formula); + var formulaMatch = reversedFormula.match(unitRegExp); // Check that all units are the same + + if (formulaMatch && !formulaMatch.every(function (unit) { + return unit === formulaMatch[0]; + })) { + throw new PolishedError(41); + } + + var cleanFormula = reverseString(reversedFormula.replace(unitRegExp, '')); + return "" + calculate(cleanFormula, additionalSymbols) + (formulaMatch ? reverseString(formulaMatch[0]) : ''); +} + +/** + * Check if a string ends with something + * @private + */ +function endsWith(string, suffix) { + return string.substr(-suffix.length) === suffix; +} + +var cssRegex$1 = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/; +/** + * Returns a given CSS value minus its unit of measure. + * + * @example + * // Styles as object usage + * const styles = { + * '--dimension': stripUnit('100px') + * } + * + * // styled-components usage + * const div = styled.div` + * --dimension: ${stripUnit('100px')}; + * ` + * + * // CSS in JS Output + * + * element { + * '--dimension': 100 + * } + */ + +function stripUnit(value) { + if (typeof value !== 'string') return value; + var matchedValue = value.match(cssRegex$1); + return matchedValue ? parseFloat(value) : value; +} + +/** + * Factory function that creates pixel-to-x converters + * @private + */ + +var pxtoFactory = function pxtoFactory(to) { + return function (pxval, base) { + if (base === void 0) { + base = '16px'; + } + + var newPxval = pxval; + var newBase = base; + + if (typeof pxval === 'string') { + if (!endsWith(pxval, 'px')) { + throw new PolishedError(69, to, pxval); + } + + newPxval = stripUnit(pxval); + } + + if (typeof base === 'string') { + if (!endsWith(base, 'px')) { + throw new PolishedError(70, to, base); + } + + newBase = stripUnit(base); + } + + if (typeof newPxval === 'string') { + throw new PolishedError(71, pxval, to); + } + + if (typeof newBase === 'string') { + throw new PolishedError(72, base, to); + } + + return "" + newPxval / newBase + to; + }; +}; + +var pixelsto = pxtoFactory; + +/** + * Convert pixel value to ems. The default base value is 16px, but can be changed by passing a + * second argument to the function. + * @function + * @param {string|number} pxval + * @param {string|number} [base='16px'] + * @example + * // Styles as object usage + * const styles = { + * 'height': em('16px') + * } + * + * // styled-components usage + * const div = styled.div` + * height: ${em('16px')} + * ` + * + * // CSS in JS Output + * + * element { + * 'height': '1em' + * } + */ + +var em = /*#__PURE__*/pixelsto('em'); +var em$1 = em; + +var cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/; +/** + * Returns a given CSS value and its unit as elements of an array. + * + * @example + * // Styles as object usage + * const styles = { + * '--dimension': getValueAndUnit('100px')[0], + * '--unit': getValueAndUnit('100px')[1], + * } + * + * // styled-components usage + * const div = styled.div` + * --dimension: ${getValueAndUnit('100px')[0]}; + * --unit: ${getValueAndUnit('100px')[1]}; + * ` + * + * // CSS in JS Output + * + * element { + * '--dimension': 100, + * '--unit': 'px', + * } + */ + +function getValueAndUnit(value) { + if (typeof value !== 'string') return [value, '']; + var matchedValue = value.match(cssRegex); + if (matchedValue) return [parseFloat(value), matchedValue[2]]; + return [value, undefined]; +} + +/** + * CSS to hide content visually but remain accessible to screen readers. + * from [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/9a176f57af1cfe8ec70300da4621fb9b07e5fa31/src/css/main.css#L121) + * + * @example + * // Styles as object usage + * const styles = { + * ...hideVisually(), + * } + * + * // styled-components usage + * const div = styled.div` + * ${hideVisually()}; + * ` + * + * // CSS as JS Output + * + * 'div': { + * 'border': '0', + * 'clip': 'rect(0 0 0 0)', + * 'height': '1px', + * 'margin': '-1px', + * 'overflow': 'hidden', + * 'padding': '0', + * 'position': 'absolute', + * 'whiteSpace': 'nowrap', + * 'width': '1px', + * } + */ +function hideVisually() { + return { + border: '0', + clip: 'rect(0 0 0 0)', + height: '1px', + margin: '-1px', + overflow: 'hidden', + padding: '0', + position: 'absolute', + whiteSpace: 'nowrap', + width: '1px' + }; +} + +function colorToInt(color) { + return Math.round(color * 255); +} + +function convertToInt(red, green, blue) { + return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue); +} + +function hslToRgb(hue, saturation, lightness, convert) { + if (convert === void 0) { + convert = convertToInt; + } + + if (saturation === 0) { + // achromatic + return convert(lightness, lightness, lightness); + } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV + + + var huePrime = (hue % 360 + 360) % 360 / 60; + var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation; + var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1)); + var red = 0; + var green = 0; + var blue = 0; + + if (huePrime >= 0 && huePrime < 1) { + red = chroma; + green = secondComponent; + } else if (huePrime >= 1 && huePrime < 2) { + red = secondComponent; + green = chroma; + } else if (huePrime >= 2 && huePrime < 3) { + green = chroma; + blue = secondComponent; + } else if (huePrime >= 3 && huePrime < 4) { + green = secondComponent; + blue = chroma; + } else if (huePrime >= 4 && huePrime < 5) { + red = secondComponent; + blue = chroma; + } else if (huePrime >= 5 && huePrime < 6) { + red = chroma; + blue = secondComponent; + } + + var lightnessModification = lightness - chroma / 2; + var finalRed = red + lightnessModification; + var finalGreen = green + lightnessModification; + var finalBlue = blue + lightnessModification; + return convert(finalRed, finalGreen, finalBlue); +} + +var namedColorMap = { + aliceblue: 'f0f8ff', + antiquewhite: 'faebd7', + aqua: '00ffff', + aquamarine: '7fffd4', + azure: 'f0ffff', + beige: 'f5f5dc', + bisque: 'ffe4c4', + black: '000', + blanchedalmond: 'ffebcd', + blue: '0000ff', + blueviolet: '8a2be2', + brown: 'a52a2a', + burlywood: 'deb887', + cadetblue: '5f9ea0', + chartreuse: '7fff00', + chocolate: 'd2691e', + coral: 'ff7f50', + cornflowerblue: '6495ed', + cornsilk: 'fff8dc', + crimson: 'dc143c', + cyan: '00ffff', + darkblue: '00008b', + darkcyan: '008b8b', + darkgoldenrod: 'b8860b', + darkgray: 'a9a9a9', + darkgreen: '006400', + darkgrey: 'a9a9a9', + darkkhaki: 'bdb76b', + darkmagenta: '8b008b', + darkolivegreen: '556b2f', + darkorange: 'ff8c00', + darkorchid: '9932cc', + darkred: '8b0000', + darksalmon: 'e9967a', + darkseagreen: '8fbc8f', + darkslateblue: '483d8b', + darkslategray: '2f4f4f', + darkslategrey: '2f4f4f', + darkturquoise: '00ced1', + darkviolet: '9400d3', + deeppink: 'ff1493', + deepskyblue: '00bfff', + dimgray: '696969', + dimgrey: '696969', + dodgerblue: '1e90ff', + firebrick: 'b22222', + floralwhite: 'fffaf0', + forestgreen: '228b22', + fuchsia: 'ff00ff', + gainsboro: 'dcdcdc', + ghostwhite: 'f8f8ff', + gold: 'ffd700', + goldenrod: 'daa520', + gray: '808080', + green: '008000', + greenyellow: 'adff2f', + grey: '808080', + honeydew: 'f0fff0', + hotpink: 'ff69b4', + indianred: 'cd5c5c', + indigo: '4b0082', + ivory: 'fffff0', + khaki: 'f0e68c', + lavender: 'e6e6fa', + lavenderblush: 'fff0f5', + lawngreen: '7cfc00', + lemonchiffon: 'fffacd', + lightblue: 'add8e6', + lightcoral: 'f08080', + lightcyan: 'e0ffff', + lightgoldenrodyellow: 'fafad2', + lightgray: 'd3d3d3', + lightgreen: '90ee90', + lightgrey: 'd3d3d3', + lightpink: 'ffb6c1', + lightsalmon: 'ffa07a', + lightseagreen: '20b2aa', + lightskyblue: '87cefa', + lightslategray: '789', + lightslategrey: '789', + lightsteelblue: 'b0c4de', + lightyellow: 'ffffe0', + lime: '0f0', + limegreen: '32cd32', + linen: 'faf0e6', + magenta: 'f0f', + maroon: '800000', + mediumaquamarine: '66cdaa', + mediumblue: '0000cd', + mediumorchid: 'ba55d3', + mediumpurple: '9370db', + mediumseagreen: '3cb371', + mediumslateblue: '7b68ee', + mediumspringgreen: '00fa9a', + mediumturquoise: '48d1cc', + mediumvioletred: 'c71585', + midnightblue: '191970', + mintcream: 'f5fffa', + mistyrose: 'ffe4e1', + moccasin: 'ffe4b5', + navajowhite: 'ffdead', + navy: '000080', + oldlace: 'fdf5e6', + olive: '808000', + olivedrab: '6b8e23', + orange: 'ffa500', + orangered: 'ff4500', + orchid: 'da70d6', + palegoldenrod: 'eee8aa', + palegreen: '98fb98', + paleturquoise: 'afeeee', + palevioletred: 'db7093', + papayawhip: 'ffefd5', + peachpuff: 'ffdab9', + peru: 'cd853f', + pink: 'ffc0cb', + plum: 'dda0dd', + powderblue: 'b0e0e6', + purple: '800080', + rebeccapurple: '639', + red: 'f00', + rosybrown: 'bc8f8f', + royalblue: '4169e1', + saddlebrown: '8b4513', + salmon: 'fa8072', + sandybrown: 'f4a460', + seagreen: '2e8b57', + seashell: 'fff5ee', + sienna: 'a0522d', + silver: 'c0c0c0', + skyblue: '87ceeb', + slateblue: '6a5acd', + slategray: '708090', + slategrey: '708090', + snow: 'fffafa', + springgreen: '00ff7f', + steelblue: '4682b4', + tan: 'd2b48c', + teal: '008080', + thistle: 'd8bfd8', + tomato: 'ff6347', + turquoise: '40e0d0', + violet: 'ee82ee', + wheat: 'f5deb3', + white: 'fff', + whitesmoke: 'f5f5f5', + yellow: 'ff0', + yellowgreen: '9acd32' +}; +/** + * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color. + * @private + */ + +function nameToHex(color) { + if (typeof color !== 'string') return color; + var normalizedColorName = color.toLowerCase(); + return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color; +} + +var hexRegex = /^#[a-fA-F0-9]{6}$/; +var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/; +var reducedHexRegex = /^#[a-fA-F0-9]{3}$/; +var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/; +var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i; +var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i; +var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i; +var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i; +/** + * Returns an RgbColor or RgbaColor object. This utility function is only useful + * if want to extract a color component. With the color util `toColorString` you + * can convert a RgbColor or RgbaColor object back to a string. + * + * @example + * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1 + * const color1 = parseToRgb('rgb(255, 0, 0)'); + * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2 + * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)'); + */ + +function parseToRgb(color) { + if (typeof color !== 'string') { + throw new PolishedError(3); + } + + var normalizedColor = nameToHex(color); + + if (normalizedColor.match(hexRegex)) { + return { + red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16), + green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16), + blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16) + }; + } + + if (normalizedColor.match(hexRgbaRegex)) { + var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2)); + return { + red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16), + green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16), + blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16), + alpha: alpha + }; + } + + if (normalizedColor.match(reducedHexRegex)) { + return { + red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16), + green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16), + blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16) + }; + } + + if (normalizedColor.match(reducedRgbaHexRegex)) { + var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2)); + + return { + red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16), + green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16), + blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16), + alpha: _alpha + }; + } + + var rgbMatched = rgbRegex.exec(normalizedColor); + + if (rgbMatched) { + return { + red: parseInt("" + rgbMatched[1], 10), + green: parseInt("" + rgbMatched[2], 10), + blue: parseInt("" + rgbMatched[3], 10) + }; + } + + var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50)); + + if (rgbaMatched) { + return { + red: parseInt("" + rgbaMatched[1], 10), + green: parseInt("" + rgbaMatched[2], 10), + blue: parseInt("" + rgbaMatched[3], 10), + alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4]) + }; + } + + var hslMatched = hslRegex.exec(normalizedColor); + + if (hslMatched) { + var hue = parseInt("" + hslMatched[1], 10); + var saturation = parseInt("" + hslMatched[2], 10) / 100; + var lightness = parseInt("" + hslMatched[3], 10) / 100; + var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")"; + var hslRgbMatched = rgbRegex.exec(rgbColorString); + + if (!hslRgbMatched) { + throw new PolishedError(4, normalizedColor, rgbColorString); + } + + return { + red: parseInt("" + hslRgbMatched[1], 10), + green: parseInt("" + hslRgbMatched[2], 10), + blue: parseInt("" + hslRgbMatched[3], 10) + }; + } + + var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50)); + + if (hslaMatched) { + var _hue = parseInt("" + hslaMatched[1], 10); + + var _saturation = parseInt("" + hslaMatched[2], 10) / 100; + + var _lightness = parseInt("" + hslaMatched[3], 10) / 100; + + var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")"; + + var _hslRgbMatched = rgbRegex.exec(_rgbColorString); + + if (!_hslRgbMatched) { + throw new PolishedError(4, normalizedColor, _rgbColorString); + } + + return { + red: parseInt("" + _hslRgbMatched[1], 10), + green: parseInt("" + _hslRgbMatched[2], 10), + blue: parseInt("" + _hslRgbMatched[3], 10), + alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4]) + }; + } + + throw new PolishedError(5); +} + +function rgbToHsl(color) { + // make sure rgb are contained in a set of [0, 255] + var red = color.red / 255; + var green = color.green / 255; + var blue = color.blue / 255; + var max = Math.max(red, green, blue); + var min = Math.min(red, green, blue); + var lightness = (max + min) / 2; + + if (max === min) { + // achromatic + if (color.alpha !== undefined) { + return { + hue: 0, + saturation: 0, + lightness: lightness, + alpha: color.alpha + }; + } else { + return { + hue: 0, + saturation: 0, + lightness: lightness + }; + } + } + + var hue; + var delta = max - min; + var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min); + + switch (max) { + case red: + hue = (green - blue) / delta + (green < blue ? 6 : 0); + break; + + case green: + hue = (blue - red) / delta + 2; + break; + + default: + // blue case + hue = (red - green) / delta + 4; + break; + } + + hue *= 60; + + if (color.alpha !== undefined) { + return { + hue: hue, + saturation: saturation, + lightness: lightness, + alpha: color.alpha + }; + } + + return { + hue: hue, + saturation: saturation, + lightness: lightness + }; +} + +/** + * Returns an HslColor or HslaColor object. This utility function is only useful + * if want to extract a color component. With the color util `toColorString` you + * can convert a HslColor or HslaColor object back to a string. + * + * @example + * // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1 + * const color1 = parseToHsl('rgb(255, 0, 0)'); + * // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2 + * const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)'); + */ +function parseToHsl(color) { + // Note: At a later stage we can optimize this function as right now a hsl + // color would be parsed converted to rgb values and converted back to hsl. + return rgbToHsl(parseToRgb(color)); +} + +/** + * Reduces hex values if possible e.g. #ff8866 to #f86 + * @private + */ +var reduceHexValue = function reduceHexValue(value) { + if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) { + return "#" + value[1] + value[3] + value[5]; + } + + return value; +}; + +var reduceHexValue$1 = reduceHexValue; + +function numberToHex(value) { + var hex = value.toString(16); + return hex.length === 1 ? "0" + hex : hex; +} + +function colorToHex(color) { + return numberToHex(Math.round(color * 255)); +} + +function convertToHex(red, green, blue) { + return reduceHexValue$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue)); +} + +function hslToHex(hue, saturation, lightness) { + return hslToRgb(hue, saturation, lightness, convertToHex); +} + +/** + * Returns a string value for the color. The returned result is the smallest possible hex notation. + * + * @example + * // Styles as object usage + * const styles = { + * background: hsl(359, 0.75, 0.4), + * background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }), + * } + * + * // styled-components usage + * const div = styled.div` + * background: ${hsl(359, 0.75, 0.4)}; + * background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })}; + * ` + * + * // CSS in JS Output + * + * element { + * background: "#b3191c"; + * background: "#b3191c"; + * } + */ +function hsl(value, saturation, lightness) { + if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') { + return hslToHex(value, saturation, lightness); + } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) { + return hslToHex(value.hue, value.saturation, value.lightness); + } + + throw new PolishedError(1); +} + +/** + * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation. + * + * @example + * // Styles as object usage + * const styles = { + * background: hsla(359, 0.75, 0.4, 0.7), + * background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }), + * background: hsla(359, 0.75, 0.4, 1), + * } + * + * // styled-components usage + * const div = styled.div` + * background: ${hsla(359, 0.75, 0.4, 0.7)}; + * background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })}; + * background: ${hsla(359, 0.75, 0.4, 1)}; + * ` + * + * // CSS in JS Output + * + * element { + * background: "rgba(179,25,28,0.7)"; + * background: "rgba(179,25,28,0.7)"; + * background: "#b3191c"; + * } + */ +function hsla(value, saturation, lightness, alpha) { + if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') { + return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")"; + } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) { + return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")"; + } + + throw new PolishedError(2); +} + +/** + * Returns a string value for the color. The returned result is the smallest possible hex notation. + * + * @example + * // Styles as object usage + * const styles = { + * background: rgb(255, 205, 100), + * background: rgb({ red: 255, green: 205, blue: 100 }), + * } + * + * // styled-components usage + * const div = styled.div` + * background: ${rgb(255, 205, 100)}; + * background: ${rgb({ red: 255, green: 205, blue: 100 })}; + * ` + * + * // CSS in JS Output + * + * element { + * background: "#ffcd64"; + * background: "#ffcd64"; + * } + */ +function rgb(value, green, blue) { + if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') { + return reduceHexValue$1("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue)); + } else if (typeof value === 'object' && green === undefined && blue === undefined) { + return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue)); + } + + throw new PolishedError(6); +} + +/** + * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation. + * + * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value. + * + * @example + * // Styles as object usage + * const styles = { + * background: rgba(255, 205, 100, 0.7), + * background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }), + * background: rgba(255, 205, 100, 1), + * background: rgba('#ffffff', 0.4), + * background: rgba('black', 0.7), + * } + * + * // styled-components usage + * const div = styled.div` + * background: ${rgba(255, 205, 100, 0.7)}; + * background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })}; + * background: ${rgba(255, 205, 100, 1)}; + * background: ${rgba('#ffffff', 0.4)}; + * background: ${rgba('black', 0.7)}; + * ` + * + * // CSS in JS Output + * + * element { + * background: "rgba(255,205,100,0.7)"; + * background: "rgba(255,205,100,0.7)"; + * background: "#ffcd64"; + * background: "rgba(255,255,255,0.4)"; + * background: "rgba(0,0,0,0.7)"; + * } + */ +function rgba(firstValue, secondValue, thirdValue, fourthValue) { + if (typeof firstValue === 'string' && typeof secondValue === 'number') { + var rgbValue = parseToRgb(firstValue); + return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")"; + } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') { + return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")"; + } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) { + return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")"; + } + + throw new PolishedError(7); +} + +var isRgb = function isRgb(color) { + return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined'); +}; + +var isRgba = function isRgba(color) { + return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number'; +}; + +var isHsl = function isHsl(color) { + return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined'); +}; + +var isHsla = function isHsla(color) { + return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number'; +}; +/** + * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string. + * This util is useful in case you only know on runtime which color object is + * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`. + * + * @example + * // Styles as object usage + * const styles = { + * background: toColorString({ red: 255, green: 205, blue: 100 }), + * background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }), + * background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }), + * background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }), + * } + * + * // styled-components usage + * const div = styled.div` + * background: ${toColorString({ red: 255, green: 205, blue: 100 })}; + * background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })}; + * background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })}; + * background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })}; + * ` + * + * // CSS in JS Output + * element { + * background: "#ffcd64"; + * background: "rgba(255,205,100,0.72)"; + * background: "#00f"; + * background: "rgba(179,25,25,0.72)"; + * } + */ + + +function toColorString(color) { + if (typeof color !== 'object') throw new PolishedError(8); + if (isRgba(color)) return rgba(color); + if (isRgb(color)) return rgb(color); + if (isHsla(color)) return hsla(color); + if (isHsl(color)) return hsl(color); + throw new PolishedError(8); +} + +// Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js +// eslint-disable-next-line no-unused-vars +// eslint-disable-next-line no-unused-vars +// eslint-disable-next-line no-redeclare +function curried(f, length, acc) { + return function fn() { + // eslint-disable-next-line prefer-rest-params + var combined = acc.concat(Array.prototype.slice.call(arguments)); + return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined); + }; +} // eslint-disable-next-line no-redeclare + + +function curry(f) { + // eslint-disable-line no-redeclare + return curried(f, f.length, []); +} + +function guard(lowerBoundary, upperBoundary, value) { + return Math.max(lowerBoundary, Math.min(upperBoundary, value)); +} + +/** + * Returns a string value for the darkened color. + * + * @example + * // Styles as object usage + * const styles = { + * background: darken(0.2, '#FFCD64'), + * background: darken('0.2', 'rgba(255,205,100,0.7)'), + * } + * + * // styled-components usage + * const div = styled.div` + * background: ${darken(0.2, '#FFCD64')}; + * background: ${darken('0.2', 'rgba(255,205,100,0.7)')}; + * ` + * + * // CSS in JS Output + * + * element { + * background: "#ffbd31"; + * background: "rgba(255,189,49,0.7)"; + * } + */ + +function darken(amount, color) { + if (color === 'transparent') return color; + var hslColor = parseToHsl(color); + return toColorString(_extends$x({}, hslColor, { + lightness: guard(0, 1, hslColor.lightness - parseFloat(amount)) + })); +} // prettier-ignore + + +var curriedDarken = /*#__PURE__*/curry +/* :: */ +(darken); +var curriedDarken$1 = curriedDarken; + +/** + * Returns a number (float) representing the luminance of a color. + * + * @example + * // Styles as object usage + * const styles = { + * background: getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff', + * background: getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ? + * 'rgba(58, 133, 255, 1)' : + * 'rgba(255, 57, 149, 1)', + * } + * + * // styled-components usage + * const div = styled.div` + * background: ${getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff'}; + * background: ${getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ? + * 'rgba(58, 133, 255, 1)' : + * 'rgba(255, 57, 149, 1)'}; + * + * // CSS in JS Output + * + * div { + * background: "#CCCD64"; + * background: "rgba(58, 133, 255, 1)"; + * } + */ + +function getLuminance(color) { + if (color === 'transparent') return 0; + var rgbColor = parseToRgb(color); + + var _Object$keys$map = Object.keys(rgbColor).map(function (key) { + var channel = rgbColor[key] / 255; + return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4); + }), + r = _Object$keys$map[0], + g = _Object$keys$map[1], + b = _Object$keys$map[2]; + + return parseFloat((0.2126 * r + 0.7152 * g + 0.0722 * b).toFixed(3)); +} + +/** + * Returns the contrast ratio between two colors based on + * [W3's recommended equation for calculating contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef). + * + * @example + * const contrastRatio = getContrast('#444', '#fff'); + */ + +function getContrast(color1, color2) { + var luminance1 = getLuminance(color1); + var luminance2 = getLuminance(color2); + return parseFloat((luminance1 > luminance2 ? (luminance1 + 0.05) / (luminance2 + 0.05) : (luminance2 + 0.05) / (luminance1 + 0.05)).toFixed(2)); +} + +/** + * Returns a string value for the lightened color. + * + * @example + * // Styles as object usage + * const styles = { + * background: lighten(0.2, '#CCCD64'), + * background: lighten('0.2', 'rgba(204,205,100,0.7)'), + * } + * + * // styled-components usage + * const div = styled.div` + * background: ${lighten(0.2, '#FFCD64')}; + * background: ${lighten('0.2', 'rgba(204,205,100,0.7)')}; + * ` + * + * // CSS in JS Output + * + * element { + * background: "#e5e6b1"; + * background: "rgba(229,230,177,0.7)"; + * } + */ + +function lighten(amount, color) { + if (color === 'transparent') return color; + var hslColor = parseToHsl(color); + return toColorString(_extends$x({}, hslColor, { + lightness: guard(0, 1, hslColor.lightness + parseFloat(amount)) + })); +} // prettier-ignore + + +var curriedLighten = /*#__PURE__*/curry +/* :: */ +(lighten); +var curriedLighten$1 = curriedLighten; + +var defaultReturnIfLightColor = '#000'; +var defaultReturnIfDarkColor = '#fff'; +/** + * Returns black or white (or optional passed colors) for best + * contrast depending on the luminosity of the given color. + * When passing custom return colors, strict mode ensures that the + * return color always meets or exceeds WCAG level AA or greater. If this test + * fails, the default return color (black or white) is returned in place of the + * custom return color. You can optionally turn off strict mode. + * + * Follows [W3C specs for readability](https://www.w3.org/TR/WCAG20-TECHS/G18.html). + * + * @example + * // Styles as object usage + * const styles = { + * color: readableColor('#000'), + * color: readableColor('black', '#001', '#ff8'), + * color: readableColor('white', '#001', '#ff8'), + * color: readableColor('red', '#333', '#ddd', true) + * } + * + * // styled-components usage + * const div = styled.div` + * color: ${readableColor('#000')}; + * color: ${readableColor('black', '#001', '#ff8')}; + * color: ${readableColor('white', '#001', '#ff8')}; + * color: ${readableColor('red', '#333', '#ddd', true)}; + * ` + * + * // CSS in JS Output + * element { + * color: "#fff"; + * color: "#ff8"; + * color: "#001"; + * color: "#000"; + * } + */ + +function readableColor(color, returnIfLightColor, returnIfDarkColor, strict) { + if (returnIfLightColor === void 0) { + returnIfLightColor = defaultReturnIfLightColor; + } + + if (returnIfDarkColor === void 0) { + returnIfDarkColor = defaultReturnIfDarkColor; + } + + if (strict === void 0) { + strict = true; + } + + var isColorLight = getLuminance(color) > 0.179; + var preferredReturnColor = isColorLight ? returnIfLightColor : returnIfDarkColor; + + if (!strict || getContrast(color, preferredReturnColor) >= 4.5) { + return preferredReturnColor; + } + + return isColorLight ? defaultReturnIfLightColor : defaultReturnIfDarkColor; +} + +/** + * lodash (Custom Build) + * Build: `lodash modularize exports="npm" -o ./` + * Copyright jQuery Foundation and other contributors + * Released under MIT license + * Based on Underscore.js 1.8.3 + * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + */ + +/** Used as the `TypeError` message for "Functions" methods. */ +var FUNC_ERROR_TEXT$1 = 'Expected a function'; + +/** Used to stand-in for `undefined` hash values. */ +var HASH_UNDEFINED = '__lodash_hash_undefined__'; + +/** `Object#toString` result references. */ +var funcTag = '[object Function]', + genTag = '[object GeneratorFunction]'; + +/** + * Used to match `RegExp` + * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns). + */ +var reRegExpChar = /[\\^$.*+?()[\]{}|]/g; + +/** Used to detect host constructors (Safari). */ +var reIsHostCtor = /^\[object .+?Constructor\]$/; + +/** Detect free variable `global` from Node.js. */ +var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal; + +/** Detect free variable `self`. */ +var freeSelf$1 = typeof self == 'object' && self && self.Object === Object && self; + +/** Used as a reference to the global object. */ +var root$1 = freeGlobal$1 || freeSelf$1 || Function('return this')(); + +/** + * Gets the value at `key` of `object`. + * + * @private + * @param {Object} [object] The object to query. + * @param {string} key The key of the property to get. + * @returns {*} Returns the property value. + */ +function getValue(object, key) { + return object == null ? undefined : object[key]; +} + +/** + * Checks if `value` is a host object in IE < 9. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a host object, else `false`. + */ +function isHostObject(value) { + // Many host objects are `Object` objects that can coerce to strings + // despite having improperly defined `toString` methods. + var result = false; + if (value != null && typeof value.toString != 'function') { + try { + result = !!(value + ''); + } catch (e) {} + } + return result; +} + +/** Used for built-in method references. */ +var arrayProto = Array.prototype, + funcProto = Function.prototype, + objectProto$1 = Object.prototype; + +/** Used to detect overreaching core-js shims. */ +var coreJsData = root$1['__core-js_shared__']; + +/** Used to detect methods masquerading as native. */ +var maskSrcKey = (function() { + var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || ''); + return uid ? ('Symbol(src)_1.' + uid) : ''; +}()); + +/** Used to resolve the decompiled source of functions. */ +var funcToString = funcProto.toString; + +/** Used to check objects for own properties. */ +var hasOwnProperty = objectProto$1.hasOwnProperty; + +/** + * Used to resolve the + * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) + * of values. + */ +var objectToString$1 = objectProto$1.toString; + +/** Used to detect if a method is native. */ +var reIsNative = RegExp('^' + + funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&') + .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$' +); + +/** Built-in value references. */ +var splice = arrayProto.splice; + +/* Built-in method references that are verified to be native. */ +var Map$1 = getNative(root$1, 'Map'), + nativeCreate = getNative(Object, 'create'); + +/** + * Creates a hash object. + * + * @private + * @constructor + * @param {Array} [entries] The key-value pairs to cache. + */ +function Hash(entries) { + var index = -1, + length = entries ? entries.length : 0; + + this.clear(); + while (++index < length) { + var entry = entries[index]; + this.set(entry[0], entry[1]); + } +} + +/** + * Removes all key-value entries from the hash. + * + * @private + * @name clear + * @memberOf Hash + */ +function hashClear() { + this.__data__ = nativeCreate ? nativeCreate(null) : {}; +} + +/** + * Removes `key` and its value from the hash. + * + * @private + * @name delete + * @memberOf Hash + * @param {Object} hash The hash to modify. + * @param {string} key The key of the value to remove. + * @returns {boolean} Returns `true` if the entry was removed, else `false`. + */ +function hashDelete(key) { + return this.has(key) && delete this.__data__[key]; +} + +/** + * Gets the hash value for `key`. + * + * @private + * @name get + * @memberOf Hash + * @param {string} key The key of the value to get. + * @returns {*} Returns the entry value. + */ +function hashGet(key) { + var data = this.__data__; + if (nativeCreate) { + var result = data[key]; + return result === HASH_UNDEFINED ? undefined : result; + } + return hasOwnProperty.call(data, key) ? data[key] : undefined; +} + +/** + * Checks if a hash value for `key` exists. + * + * @private + * @name has + * @memberOf Hash + * @param {string} key The key of the entry to check. + * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`. + */ +function hashHas(key) { + var data = this.__data__; + return nativeCreate ? data[key] !== undefined : hasOwnProperty.call(data, key); +} + +/** + * Sets the hash `key` to `value`. + * + * @private + * @name set + * @memberOf Hash + * @param {string} key The key of the value to set. + * @param {*} value The value to set. + * @returns {Object} Returns the hash instance. + */ +function hashSet(key, value) { + var data = this.__data__; + data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value; + return this; +} + +// Add methods to `Hash`. +Hash.prototype.clear = hashClear; +Hash.prototype['delete'] = hashDelete; +Hash.prototype.get = hashGet; +Hash.prototype.has = hashHas; +Hash.prototype.set = hashSet; + +/** + * Creates an list cache object. + * + * @private + * @constructor + * @param {Array} [entries] The key-value pairs to cache. + */ +function ListCache(entries) { + var index = -1, + length = entries ? entries.length : 0; + + this.clear(); + while (++index < length) { + var entry = entries[index]; + this.set(entry[0], entry[1]); + } +} + +/** + * Removes all key-value entries from the list cache. + * + * @private + * @name clear + * @memberOf ListCache + */ +function listCacheClear() { + this.__data__ = []; +} + +/** + * Removes `key` and its value from the list cache. + * + * @private + * @name delete + * @memberOf ListCache + * @param {string} key The key of the value to remove. + * @returns {boolean} Returns `true` if the entry was removed, else `false`. + */ +function listCacheDelete(key) { + var data = this.__data__, + index = assocIndexOf(data, key); + + if (index < 0) { + return false; + } + var lastIndex = data.length - 1; + if (index == lastIndex) { + data.pop(); + } else { + splice.call(data, index, 1); + } + return true; +} + +/** + * Gets the list cache value for `key`. + * + * @private + * @name get + * @memberOf ListCache + * @param {string} key The key of the value to get. + * @returns {*} Returns the entry value. + */ +function listCacheGet(key) { + var data = this.__data__, + index = assocIndexOf(data, key); + + return index < 0 ? undefined : data[index][1]; +} + +/** + * Checks if a list cache value for `key` exists. + * + * @private + * @name has + * @memberOf ListCache + * @param {string} key The key of the entry to check. + * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`. + */ +function listCacheHas(key) { + return assocIndexOf(this.__data__, key) > -1; +} + +/** + * Sets the list cache `key` to `value`. + * + * @private + * @name set + * @memberOf ListCache + * @param {string} key The key of the value to set. + * @param {*} value The value to set. + * @returns {Object} Returns the list cache instance. + */ +function listCacheSet(key, value) { + var data = this.__data__, + index = assocIndexOf(data, key); + + if (index < 0) { + data.push([key, value]); + } else { + data[index][1] = value; + } + return this; +} + +// Add methods to `ListCache`. +ListCache.prototype.clear = listCacheClear; +ListCache.prototype['delete'] = listCacheDelete; +ListCache.prototype.get = listCacheGet; +ListCache.prototype.has = listCacheHas; +ListCache.prototype.set = listCacheSet; + +/** + * Creates a map cache object to store key-value pairs. + * + * @private + * @constructor + * @param {Array} [entries] The key-value pairs to cache. + */ +function MapCache(entries) { + var index = -1, + length = entries ? entries.length : 0; + + this.clear(); + while (++index < length) { + var entry = entries[index]; + this.set(entry[0], entry[1]); + } +} + +/** + * Removes all key-value entries from the map. + * + * @private + * @name clear + * @memberOf MapCache + */ +function mapCacheClear() { + this.__data__ = { + 'hash': new Hash, + 'map': new (Map$1 || ListCache), + 'string': new Hash + }; +} + +/** + * Removes `key` and its value from the map. + * + * @private + * @name delete + * @memberOf MapCache + * @param {string} key The key of the value to remove. + * @returns {boolean} Returns `true` if the entry was removed, else `false`. + */ +function mapCacheDelete(key) { + return getMapData(this, key)['delete'](key); +} + +/** + * Gets the map value for `key`. + * + * @private + * @name get + * @memberOf MapCache + * @param {string} key The key of the value to get. + * @returns {*} Returns the entry value. + */ +function mapCacheGet(key) { + return getMapData(this, key).get(key); +} + +/** + * Checks if a map value for `key` exists. + * + * @private + * @name has + * @memberOf MapCache + * @param {string} key The key of the entry to check. + * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`. + */ +function mapCacheHas(key) { + return getMapData(this, key).has(key); +} + +/** + * Sets the map `key` to `value`. + * + * @private + * @name set + * @memberOf MapCache + * @param {string} key The key of the value to set. + * @param {*} value The value to set. + * @returns {Object} Returns the map cache instance. + */ +function mapCacheSet(key, value) { + getMapData(this, key).set(key, value); + return this; +} + +// Add methods to `MapCache`. +MapCache.prototype.clear = mapCacheClear; +MapCache.prototype['delete'] = mapCacheDelete; +MapCache.prototype.get = mapCacheGet; +MapCache.prototype.has = mapCacheHas; +MapCache.prototype.set = mapCacheSet; + +/** + * Gets the index at which the `key` is found in `array` of key-value pairs. + * + * @private + * @param {Array} array The array to inspect. + * @param {*} key The key to search for. + * @returns {number} Returns the index of the matched value, else `-1`. + */ +function assocIndexOf(array, key) { + var length = array.length; + while (length--) { + if (eq(array[length][0], key)) { + return length; + } + } + return -1; +} + +/** + * The base implementation of `_.isNative` without bad shim checks. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a native function, + * else `false`. + */ +function baseIsNative(value) { + if (!isObject$1(value) || isMasked(value)) { + return false; + } + var pattern = (isFunction$2(value) || isHostObject(value)) ? reIsNative : reIsHostCtor; + return pattern.test(toSource(value)); +} + +/** + * Gets the data for `map`. + * + * @private + * @param {Object} map The map to query. + * @param {string} key The reference key. + * @returns {*} Returns the map data. + */ +function getMapData(map, key) { + var data = map.__data__; + return isKeyable(key) + ? data[typeof key == 'string' ? 'string' : 'hash'] + : data.map; +} + +/** + * Gets the native function at `key` of `object`. + * + * @private + * @param {Object} object The object to query. + * @param {string} key The key of the method to get. + * @returns {*} Returns the function if it's native, else `undefined`. + */ +function getNative(object, key) { + var value = getValue(object, key); + return baseIsNative(value) ? value : undefined; +} + +/** + * Checks if `value` is suitable for use as unique object key. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is suitable, else `false`. + */ +function isKeyable(value) { + var type = typeof value; + return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean') + ? (value !== '__proto__') + : (value === null); +} + +/** + * Checks if `func` has its source masked. + * + * @private + * @param {Function} func The function to check. + * @returns {boolean} Returns `true` if `func` is masked, else `false`. + */ +function isMasked(func) { + return !!maskSrcKey && (maskSrcKey in func); +} + +/** + * Converts `func` to its source code. + * + * @private + * @param {Function} func The function to process. + * @returns {string} Returns the source code. + */ +function toSource(func) { + if (func != null) { + try { + return funcToString.call(func); + } catch (e) {} + try { + return (func + ''); + } catch (e) {} + } + return ''; +} + +/** + * Creates a function that memoizes the result of `func`. If `resolver` is + * provided, it determines the cache key for storing the result based on the + * arguments provided to the memoized function. By default, the first argument + * provided to the memoized function is used as the map cache key. The `func` + * is invoked with the `this` binding of the memoized function. + * + * **Note:** The cache is exposed as the `cache` property on the memoized + * function. Its creation may be customized by replacing the `_.memoize.Cache` + * constructor with one whose instances implement the + * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object) + * method interface of `delete`, `get`, `has`, and `set`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to have its output memoized. + * @param {Function} [resolver] The function to resolve the cache key. + * @returns {Function} Returns the new memoized function. + * @example + * + * var object = { 'a': 1, 'b': 2 }; + * var other = { 'c': 3, 'd': 4 }; + * + * var values = _.memoize(_.values); + * values(object); + * // => [1, 2] + * + * values(other); + * // => [3, 4] + * + * object.a = 2; + * values(object); + * // => [1, 2] + * + * // Modify the result cache. + * values.cache.set(object, ['a', 'b']); + * values(object); + * // => ['a', 'b'] + * + * // Replace `_.memoize.Cache`. + * _.memoize.Cache = WeakMap; + */ +function memoize(func, resolver) { + if (typeof func != 'function' || (resolver && typeof resolver != 'function')) { + throw new TypeError(FUNC_ERROR_TEXT$1); + } + var memoized = function() { + var args = arguments, + key = resolver ? resolver.apply(this, args) : args[0], + cache = memoized.cache; + + if (cache.has(key)) { + return cache.get(key); + } + var result = func.apply(this, args); + memoized.cache = cache.set(key, result); + return result; + }; + memoized.cache = new (memoize.Cache || MapCache); + return memoized; +} + +// Assign cache to `_.memoize`. +memoize.Cache = MapCache; + +/** + * Performs a + * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * comparison between two values to determine if they are equivalent. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {boolean} Returns `true` if the values are equivalent, else `false`. + * @example + * + * var object = { 'a': 1 }; + * var other = { 'a': 1 }; + * + * _.eq(object, object); + * // => true + * + * _.eq(object, other); + * // => false + * + * _.eq('a', 'a'); + * // => true + * + * _.eq('a', Object('a')); + * // => false + * + * _.eq(NaN, NaN); + * // => true + */ +function eq(value, other) { + return value === other || (value !== value && other !== other); +} + +/** + * Checks if `value` is classified as a `Function` object. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a function, else `false`. + * @example + * + * _.isFunction(_); + * // => true + * + * _.isFunction(/abc/); + * // => false + */ +function isFunction$2(value) { + // The use of `Object#toString` avoids issues with the `typeof` operator + // in Safari 8-9 which returns 'object' for typed array and other constructors. + var tag = isObject$1(value) ? objectToString$1.call(value) : ''; + return tag == funcTag || tag == genTag; +} + +/** + * Checks if `value` is the + * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) + * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an object, else `false`. + * @example + * + * _.isObject({}); + * // => true + * + * _.isObject([1, 2, 3]); + * // => true + * + * _.isObject(_.noop); + * // => true + * + * _.isObject(null); + * // => false + */ +function isObject$1(value) { + var type = typeof value; + return !!value && (type == 'object' || type == 'function'); +} + +var lodash_memoize = memoize; + +var memoize$1 = /*@__PURE__*/getDefaultExportFromCjs(lodash_memoize); + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +function _extends$w() { + _extends$w = Object.assign ? Object.assign.bind() : 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$w.apply(this, arguments); +} + +const PALETTE = { + black: '#000', + white: '#fff', + product: { + support: '#00a656', + message: '#37b8af', + explore: '#30aabc', + gather: '#f6c8be', + guide: '#ff6224', + connect: '#ff6224', + chat: '#f79a3e', + talk: '#efc93d', + sell: '#c38f00' + }, + grey: { + 100: '#f8f9f9', + 200: '#e9ebed', + 300: '#d8dcde', + 400: '#c2c8cc', + 500: '#87929d', + 600: '#68737d', + 700: '#49545c', + 800: '#2f3941' + }, + blue: { + 100: '#edf7ff', + 200: '#cee2f2', + 300: '#adcce4', + 400: '#5293c7', + 500: '#337fbd', + 600: '#1f73b7', + 700: '#144a75', + 800: '#0f3554' + }, + red: { + 100: '#fff0f1', + 200: '#f5d5d8', + 300: '#f5b5ba', + 400: '#e35b66', + 500: '#d93f4c', + 600: '#cc3340', + 700: '#8c232c', + 800: '#681219' + }, + yellow: { + 100: '#fff7ed', + 200: '#ffeedb', + 300: '#fed6a8', + 400: '#ffb057', + 500: '#f79a3e', + 600: '#ed8f1c', + 700: '#ad5918', + 800: '#703815' + }, + green: { + 100: '#edf8f4', + 200: '#d1e8df', + 300: '#aecfc2', + 400: '#5eae91', + 500: '#228f67', + 600: '#038153', + 700: '#186146', + 800: '#0b3b29' + }, + kale: { + 100: '#f5fcfc', + 200: '#daeded', + 300: '#bdd9d7', + 400: '#90bbbb', + 500: '#467b7c', + 600: '#17494d', + 700: '#03363d', + 800: '#012b30' + }, + fuschia: { + 400: '#d653c2', + 600: '#a81897', + M400: '#cf62a8', + M600: '#a8458c' + }, + pink: { + 400: '#ec4d63', + 600: '#d42054', + M400: '#d57287', + M600: '#b23a5d' + }, + crimson: { + 400: '#e34f32', + 600: '#c72a1c', + M400: '#cc6c5b', + M600: '#b24a3c' + }, + orange: { + 400: '#de701d', + 600: '#bf5000', + M400: '#d4772c', + M600: '#b35827' + }, + lemon: { + 400: '#ffd424', + 600: '#ffbb10', + M400: '#e7a500', + M600: '#c38f00' + }, + lime: { + 400: '#43b324', + 600: '#2e8200', + M400: '#519e2d', + M600: '#47782c' + }, + mint: { + 400: '#00a656', + 600: '#058541', + M400: '#299c66', + M600: '#2e8057' + }, + teal: { + 400: '#02a191', + 600: '#028079', + M400: '#2d9e8f', + M600: '#3c7873' + }, + azure: { + 400: '#3091ec', + 600: '#1371d6', + M400: '#5f8dcf', + M600: '#3a70b2' + }, + royal: { + 400: '#5d7df5', + 600: '#3353e2', + M400: '#7986d8', + M600: '#4b61c3' + }, + purple: { + 400: '#b552e2', + 600: '#6a27b8', + M400: '#b072cc', + M600: '#9358b0' + } +}; + +const BASE = 4; +const borderRadii = { + sm: `${BASE / 2}px`, + md: `${BASE}px` +}; +const borderStyles = { + solid: 'solid' +}; +const borderWidths = { + sm: '1px', + md: '3px' +}; +const borders = { + sm: `${borderWidths.sm} ${borderStyles.solid}`, + md: `${borderWidths.md} ${borderStyles.solid}` +}; +const breakpoints = { + xs: '0px', + sm: `${BASE * 144}px`, + md: `${BASE * 192}px`, + lg: `${BASE * 248}px`, + xl: `${BASE * 300}px` +}; +const colors = { + background: PALETTE.white, + foreground: PALETTE.grey[800], + primaryHue: 'blue', + dangerHue: 'red', + warningHue: 'yellow', + successHue: 'green', + neutralHue: 'grey', + chromeHue: 'kale' +}; +const fonts = { + mono: ['SFMono-Regular' , 'Consolas' , '"Liberation Mono"' , 'Menlo', 'Courier', 'monospace'].join(','), + system: ['system-ui' , '-apple-system' , 'BlinkMacSystemFont' , '"Segoe UI"' , 'Roboto' , 'Oxygen-Sans' , 'Ubuntu' , 'Cantarell' , '"Helvetica Neue"', 'Arial', 'sans-serif'].join(',') +}; +const fontSizes = { + xs: '10px', + sm: '12px', + md: '14px', + lg: '18px', + xl: '22px', + xxl: '26px', + xxxl: '36px' +}; +const fontWeights = { + thin: 100, + extralight: 200, + light: 300, + regular: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900 +}; +const iconSizes = { + sm: '12px', + md: '16px', + lg: '26px' +}; +const lineHeights = { + sm: `${BASE * 4}px`, + md: `${BASE * 5}px`, + lg: `${BASE * 6}px`, + xl: `${BASE * 7}px`, + xxl: `${BASE * 8}px`, + xxxl: `${BASE * 11}px` +}; +const palette = { + ...PALETTE +}; +delete palette.product; +const shadowWidths = { + xs: '1px', + sm: '2px', + md: '3px' +}; +const shadows = { + xs: color => `0 0 0 ${shadowWidths.xs} ${color}`, + sm: color => `0 0 0 ${shadowWidths.sm} ${color}`, + md: color => `0 0 0 ${shadowWidths.md} ${color}`, + lg: (offsetY, blurRadius, color) => `0 ${offsetY} ${blurRadius} 0 ${color}` +}; +const space = { + base: BASE, + xxs: `${BASE}px`, + xs: `${BASE * 2}px`, + sm: `${BASE * 3}px`, + md: `${BASE * 5}px`, + lg: `${BASE * 8}px`, + xl: `${BASE * 10}px`, + xxl: `${BASE * 12}px` +}; +const DEFAULT_THEME = { + borders, + borderRadii, + borderStyles, + borderWidths, + breakpoints, + colors: { + base: 'light', + ...colors + }, + components: {}, + fonts, + fontSizes, + fontWeights, + iconSizes, + lineHeights, + palette, + rtl: false, + shadowWidths, + shadows, + space +}; + +const useDocument = theme => { + const [controlledDocument, setControlledDocument] = reactExports.useState(); + reactExports.useEffect(() => { + if (theme && theme.document) { + setControlledDocument(theme.document); + } else { + setControlledDocument(document); + } + }, [theme]); + return controlledDocument; +}; + +const ThemeProvider = _ref => { + let { + theme, + focusVisibleRef, + children, + ...other + } = _ref; + const scopeRef = reactExports.useRef(null); + const relativeDocument = useDocument(theme); + const controlledScopeRef = focusVisibleRef === null ? React__default.createRef() : getControlledValue(focusVisibleRef, scopeRef); + useFocusVisible({ + scope: controlledScopeRef, + relativeDocument + }); + return React__default.createElement(Ge, _extends$w({ + theme: theme + }, other), focusVisibleRef === undefined ? React__default.createElement("div", { + ref: scopeRef + }, children) : children); +}; +ThemeProvider.defaultProps = { + theme: DEFAULT_THEME +}; + +function retrieveComponentStyles(componentId, props) { + const components = props.theme && props.theme.components; + if (!components) { + return undefined; + } + const componentStyles = components[componentId]; + if (typeof componentStyles === 'function') { + return componentStyles(props); + } + return componentStyles; +} + +const DEFAULT_SHADE = 600; +const adjust = (color, expected, actual) => { + if (expected !== actual) { + const amount = Math.abs(expected - actual) / 100 * 0.05; + return expected > actual ? curriedDarken$1(amount, color) : curriedLighten$1(amount, color); + } + return color; +}; +const getColor = memoize$1(function (hue) { + let shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE; + let theme = arguments.length > 2 ? arguments[2] : undefined; + let transparency = arguments.length > 3 ? arguments[3] : undefined; + let retVal; + if (isNaN(shade)) { + return undefined; + } + const palette = theme && theme.palette ? theme.palette : DEFAULT_THEME.palette; + const colors = theme && theme.colors ? theme.colors : DEFAULT_THEME.colors; + let _hue; + if (typeof hue === 'string') { + _hue = colors[hue] || hue; + } else { + _hue = hue; + } + if (Object.prototype.hasOwnProperty.call(palette, _hue)) { + _hue = palette[_hue]; + } + if (typeof _hue === 'object') { + retVal = _hue[shade]; + if (!retVal) { + const _shade = Object.keys(_hue).map(hueKey => parseInt(hueKey, 10)).reduce((previous, current) => { + return Math.abs(current - shade) < Math.abs(previous - shade) ? current : previous; + }); + retVal = adjust(_hue[_shade], shade, _shade); + } + } else { + retVal = adjust(_hue, shade, DEFAULT_SHADE); + } + if (transparency) { + retVal = rgba(retVal, transparency); + } + return retVal; +}, (hue, shade, theme, transparency) => JSON.stringify({ + hue, + shade, + palette: theme?.palette, + colors: theme?.colors, + transparency +})); + +const getFocusBoxShadow = _ref => { + let { + boxShadow, + inset = false, + hue = 'primaryHue', + shade = DEFAULT_SHADE, + shadowWidth = 'md', + spacerHue = 'background', + spacerShade = DEFAULT_SHADE, + spacerWidth = 'xs', + theme = DEFAULT_THEME + } = _ref; + const color = getColor(hue, shade, theme); + const shadow = theme.shadows[shadowWidth](color); + if (spacerWidth === null) { + return `${inset ? 'inset' : ''} ${shadow}`; + } + const spacerColor = getColor(spacerHue, spacerShade, theme); + const retVal = ` + ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)}, + ${inset ? 'inset' : ''} ${shadow}`; + return boxShadow ? `${retVal}, ${boxShadow}` : retVal; +}; + +function getLineHeight(height, fontSize) { + const [heightValue, heightUnit] = getValueAndUnit(height.toString()); + const [fontSizeValue, fontSizeUnit] = getValueAndUnit(fontSize.toString()); + const PIXELS = 'px'; + if (heightUnit && heightUnit !== PIXELS) { + throw new Error(`Unexpected \`height\` with '${heightUnit}' units.`); + } + if (fontSizeUnit && fontSizeUnit !== PIXELS) { + throw new Error(`Unexpected \`fontSize\` with '${fontSizeUnit}' units.`); + } + return heightValue / fontSizeValue; +} + +const exponentialSymbols = { + symbols: { + sqrt: { + func: { + symbol: 'sqrt', + f: a => Math.sqrt(a), + notation: 'func', + precedence: 0, + rightToLeft: 0, + argCount: 1 + }, + symbol: 'sqrt', + regSymbol: 'sqrt\\b' + } + } +}; +const animationStyles$1 = (position, modifier) => { + const property = position.split('-')[0]; + const animationName = $e(["0%,66%{", ":2px;border:transparent;}"], property); + return Ne(["&", "::before,&", "::after{animation:0.3s ease-in-out ", ";}"], modifier, modifier, animationName); +}; +const positionStyles$2 = (position, size, inset) => { + const margin = math(`${size} / -2`); + const placement = math(`${margin} + ${inset}`); + let clipPath; + let positionCss; + let propertyRadius; + if (position.startsWith('top')) { + propertyRadius = 'border-bottom-right-radius'; + clipPath = 'polygon(100% 0, 100% 1px, 1px 100%, 0 100%, 0 0)'; + positionCss = Ne(["top:", ";right:", ";left:", ";margin-left:", ";"], placement, position === 'top-right' && size, position === 'top' ? '50%' : position === 'top-left' && size, position === 'top' && margin); + } else if (position.startsWith('right')) { + propertyRadius = 'border-bottom-left-radius'; + clipPath = 'polygon(100% 0, 100% 100%, calc(100% - 1px) 100%, 0 1px, 0 0)'; + positionCss = Ne(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && size, placement, position === 'right-bottom' && size, position === 'right' && margin); + } else if (position.startsWith('bottom')) { + propertyRadius = 'border-top-left-radius'; + clipPath = 'polygon(100% 0, calc(100% - 1px) 0, 0 calc(100% - 1px), 0 100%, 100% 100%)'; + positionCss = Ne(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && size, placement, position === 'bottom' ? '50%' : position === 'bottom-left' && size, position === 'bottom' && margin); + } else if (position.startsWith('left')) { + propertyRadius = 'border-top-right-radius'; + clipPath = 'polygon(0 100%, 100% 100%, 100% calc(100% - 1px), 1px 0, 0 0)'; + positionCss = Ne(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin); + } + return Ne(["&::before{", ":100%;clip-path:", ";}&::before,&::after{", "}"], propertyRadius, clipPath, positionCss); +}; +function arrowStyles(position) { + let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + const size = options.size || '6px'; + const inset = options.inset || '0'; + const squareSize = math(`${size} * 2 / sqrt(2)`, exponentialSymbols); + return Ne(["position:relative;&::before{border-width:inherit;border-style:inherit;border-color:transparent;background-clip:content-box;}&::after{z-index:-1;border:inherit;box-shadow:inherit;}&::before,&::after{position:absolute;transform:rotate(45deg);background-color:inherit;box-sizing:inherit;width:", ";height:", ";content:'';}", ";", ";"], squareSize, squareSize, positionStyles$2(position, squareSize, inset), options.animationModifier && animationStyles$1(position, options.animationModifier)); +} + +const useWindow = theme => { + const [controlledWindow, setControlledWindow] = reactExports.useState(); + reactExports.useEffect(() => { + if (theme && theme.window) { + setControlledWindow(theme.window); + } else { + setControlledWindow(window); + } + }, [theme]); + return controlledWindow; +}; + +const useText = function (component, props, name, text) { + let condition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true; + const value = condition ? props[name] : undefined; + return reactExports.useMemo(() => { + if (condition) { + if (name === 'children') { + throw new Error('Error: `children` is not a valid `useText` prop.'); + } else if (value === null || value === '') { + throw new Error(component.displayName ? `Error: you must provide a valid \`${name}\` text value for <${component.displayName}>.` : `Error: you must provide a valid \`${name}\` text value.`); + } else if (value === undefined) { + return text; + } + } + return value; + }, [component.displayName, value, name, text, condition]); +}; + +const animationStyles = (position, options) => { + const theme = options.theme || DEFAULT_THEME; + let translateValue = `${theme.space.base * 5}px`; + let transformFunction; + if (position === 'top') { + transformFunction = 'translateY'; + } else if (position === 'right') { + transformFunction = 'translateX'; + translateValue = `-${translateValue}`; + } else if (position === 'bottom') { + transformFunction = 'translateY'; + translateValue = `-${translateValue}`; + } else { + transformFunction = 'translateX'; + } + const animationName = $e(["0%{transform:", "(", ");}"], transformFunction, translateValue); + return Ne(["&", " ", "{animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";}"], options.animationModifier, options.childSelector || '> *', animationName); +}; +const hiddenStyles$2 = options => { + const transition = 'opacity 0.2s ease-in-out, 0.2s visibility 0s linear'; + return Ne(["transition:", ";visibility:hidden;opacity:0;"], options.animationModifier && transition); +}; +function menuStyles(position) { + let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + const theme = options.theme || DEFAULT_THEME; + let marginProperty; + if (position === 'top') { + marginProperty = 'margin-bottom'; + } else if (position === 'right') { + marginProperty = 'margin-left'; + } else if (position === 'bottom') { + marginProperty = 'margin-top'; + } else { + marginProperty = 'margin-right'; + } + return Ne(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor('chromeHue', 600, theme, 0.15)), theme.colors.background, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles$2(options)); +} + +const SELECTOR_FOCUS_VISIBLE = '&:focus-visible, &[data-garden-focus-visible="true"]'; +const focusStyles = _ref => { + let { + condition = true, + selector = SELECTOR_FOCUS_VISIBLE, + shadowWidth = 'md', + spacerWidth = 'xs', + styles: { + boxShadow, + ...styles + } = {}, + theme, + ...options + } = _ref; + const _boxShadow = condition ? getFocusBoxShadow({ + boxShadow, + shadowWidth, + spacerWidth, + theme, + ...options + }) : boxShadow; + let outline; + let outlineOffset; + if (spacerWidth === null) { + outline = theme.shadowWidths[shadowWidth]; + } else { + outline = `${math(`${theme.shadowWidths[shadowWidth]} - ${theme.shadowWidths[spacerWidth]}`)} solid transparent`; + outlineOffset = theme.shadowWidths[spacerWidth]; + } + return Ne(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles); +}; + +/** + * generates a UID factory + * @internal + * @example + * const uid = generateUID(); + * uid(object) = 1; + * uid(object) = 1; + * uid(anotherObject) = 2; + */ +var generateUID$1 = function () { + var counter = 1; + var map = new WeakMap(); + /** + * @borrows {uid} + */ + var uid = function (item, index) { + if (typeof item === 'number' || typeof item === 'string') { + return index ? "idx-".concat(index) : "val-".concat(item); + } + if (!map.has(item)) { + map.set(item, counter++); + return uid(item); + } + return 'uid' + map.get(item); + }; + return uid; +}; + +var createSource = function (prefix) { + if (prefix === void 0) { prefix = ''; } + return ({ + value: 1, + prefix: prefix, + uid: generateUID$1(), + }); +}; +var counter = createSource(); +var source = reactExports.createContext(createSource()); +var getId = function (source) { return source.value++; }; +var getPrefix = function (source) { return (source ? source.prefix : ''); }; + +var generateUID = function (context) { + var quartz = context || counter; + var prefix = getPrefix(quartz); + var id = getId(quartz); + var uid = prefix + id; + var gen = function (item) { return uid + quartz.uid(item); }; + return { uid: uid, gen: gen }; +}; +var useUIDState = function () { + var context = reactExports.useContext(source); + var uid = reactExports.useState(function () { return generateUID(context); })[0]; + return uid; +}; +/** + * returns an uid generator + * @see {@link UIDConsumer} + * @see https://github.com/thearnica/react-uid#hooks-168 + * @example + * const uid = useUIDSeed(); + * return ( + * <> + * + * + * {data.map(item =>
...
+ * + * ) + */ +var useUIDSeed = function () { + var gen = useUIDState().gen; + return gen; +}; + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +function useField$1(idPrefix) { + const seed = useUIDSeed(); + const prefix = reactExports.useMemo(() => idPrefix || seed(`field_${'2.1.2'}`), [idPrefix, seed]); + const inputId = `${prefix}--input`; + const labelId = `${prefix}--label`; + const hintId = `${prefix}--hint`; + const messageId = `${prefix}--message`; + const getLabelProps = function (_temp) { + let { + id = labelId, + htmlFor = inputId, + ...other + } = _temp === void 0 ? {} : _temp; + return { + id, + htmlFor, + 'data-garden-container-id': 'containers.field', + 'data-garden-container-version': '2.1.2', + ...other + }; + }; + const getInputProps = function (_temp2, _temp3) { + let { + id = inputId, + ...other + } = _temp2 === void 0 ? {} : _temp2; + let { + isDescribed = false, + hasMessage = false + } = _temp3 === void 0 ? {} : _temp3; + return { + id, + 'aria-labelledby': labelId, + 'aria-describedby': isDescribed || hasMessage ? [].concat(isDescribed ? hintId : [], hasMessage ? messageId : []).join(' ') : null, + ...other + }; + }; + const getHintProps = function (_temp4) { + let { + id = hintId, + ...other + } = _temp4 === void 0 ? {} : _temp4; + return { + id, + ...other + }; + }; + const getMessageProps = function (_temp5) { + let { + id = messageId, + ...other + } = _temp5 === void 0 ? {} : _temp5; + return { + id, + ...other + }; + }; + return { + getLabelProps, + getInputProps, + getHintProps, + getMessageProps + }; +} +({ + children: PropTypes.func, + render: PropTypes.func, + id: PropTypes.string +}); + +function mergeRefs(refs) { + return function (value) { + refs.forEach(function (ref) { + if (typeof ref === "function") { + ref(value); + } else if (ref != null) { + ref.current = value; + } + }); + }; +} + +/** + * lodash (Custom Build) + * Build: `lodash modularize exports="npm" -o ./` + * Copyright jQuery Foundation and other contributors + * Released under MIT license + * Based on Underscore.js 1.8.3 + * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + */ + +/** Used as the `TypeError` message for "Functions" methods. */ +var FUNC_ERROR_TEXT = 'Expected a function'; + +/** Used as references for various `Number` constants. */ +var NAN = 0 / 0; + +/** `Object#toString` result references. */ +var symbolTag = '[object Symbol]'; + +/** Used to match leading and trailing whitespace. */ +var reTrim = /^\s+|\s+$/g; + +/** Used to detect bad signed hexadecimal string values. */ +var reIsBadHex = /^[-+]0x[0-9a-f]+$/i; + +/** Used to detect binary string values. */ +var reIsBinary = /^0b[01]+$/i; + +/** Used to detect octal string values. */ +var reIsOctal = /^0o[0-7]+$/i; + +/** Built-in method references without a dependency on `root`. */ +var freeParseInt = parseInt; + +/** Detect free variable `global` from Node.js. */ +var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal; + +/** Detect free variable `self`. */ +var freeSelf = typeof self == 'object' && self && self.Object === Object && self; + +/** Used as a reference to the global object. */ +var root = freeGlobal || freeSelf || Function('return this')(); + +/** Used for built-in method references. */ +var objectProto = Object.prototype; + +/** + * Used to resolve the + * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) + * of values. + */ +var objectToString = objectProto.toString; + +/* Built-in method references for those with the same name as other `lodash` methods. */ +var nativeMax = Math.max, + nativeMin = Math.min; + +/** + * Gets the timestamp of the number of milliseconds that have elapsed since + * the Unix epoch (1 January 1970 00:00:00 UTC). + * + * @static + * @memberOf _ + * @since 2.4.0 + * @category Date + * @returns {number} Returns the timestamp. + * @example + * + * _.defer(function(stamp) { + * console.log(_.now() - stamp); + * }, _.now()); + * // => Logs the number of milliseconds it took for the deferred invocation. + */ +var now = function() { + return root.Date.now(); +}; + +/** + * Creates a debounced function that delays invoking `func` until after `wait` + * milliseconds have elapsed since the last time the debounced function was + * invoked. The debounced function comes with a `cancel` method to cancel + * delayed `func` invocations and a `flush` method to immediately invoke them. + * Provide `options` to indicate whether `func` should be invoked on the + * leading and/or trailing edge of the `wait` timeout. The `func` is invoked + * with the last arguments provided to the debounced function. Subsequent + * calls to the debounced function return the result of the last `func` + * invocation. + * + * **Note:** If `leading` and `trailing` options are `true`, `func` is + * invoked on the trailing edge of the timeout only if the debounced function + * is invoked more than once during the `wait` timeout. + * + * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred + * until to the next tick, similar to `setTimeout` with a timeout of `0`. + * + * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) + * for details over the differences between `_.debounce` and `_.throttle`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to debounce. + * @param {number} [wait=0] The number of milliseconds to delay. + * @param {Object} [options={}] The options object. + * @param {boolean} [options.leading=false] + * Specify invoking on the leading edge of the timeout. + * @param {number} [options.maxWait] + * The maximum time `func` is allowed to be delayed before it's invoked. + * @param {boolean} [options.trailing=true] + * Specify invoking on the trailing edge of the timeout. + * @returns {Function} Returns the new debounced function. + * @example + * + * // Avoid costly calculations while the window size is in flux. + * jQuery(window).on('resize', _.debounce(calculateLayout, 150)); + * + * // Invoke `sendMail` when clicked, debouncing subsequent calls. + * jQuery(element).on('click', _.debounce(sendMail, 300, { + * 'leading': true, + * 'trailing': false + * })); + * + * // Ensure `batchLog` is invoked once after 1 second of debounced calls. + * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 }); + * var source = new EventSource('/stream'); + * jQuery(source).on('message', debounced); + * + * // Cancel the trailing debounced invocation. + * jQuery(window).on('popstate', debounced.cancel); + */ +function debounce$2(func, wait, options) { + var lastArgs, + lastThis, + maxWait, + result, + timerId, + lastCallTime, + lastInvokeTime = 0, + leading = false, + maxing = false, + trailing = true; + + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + wait = toNumber(wait) || 0; + if (isObject(options)) { + leading = !!options.leading; + maxing = 'maxWait' in options; + maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait; + trailing = 'trailing' in options ? !!options.trailing : trailing; + } + + function invokeFunc(time) { + var args = lastArgs, + thisArg = lastThis; + + lastArgs = lastThis = undefined; + lastInvokeTime = time; + result = func.apply(thisArg, args); + return result; + } + + function leadingEdge(time) { + // Reset any `maxWait` timer. + lastInvokeTime = time; + // Start the timer for the trailing edge. + timerId = setTimeout(timerExpired, wait); + // Invoke the leading edge. + return leading ? invokeFunc(time) : result; + } + + function remainingWait(time) { + var timeSinceLastCall = time - lastCallTime, + timeSinceLastInvoke = time - lastInvokeTime, + result = wait - timeSinceLastCall; + + return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result; + } + + function shouldInvoke(time) { + var timeSinceLastCall = time - lastCallTime, + timeSinceLastInvoke = time - lastInvokeTime; + + // Either this is the first call, activity has stopped and we're at the + // trailing edge, the system time has gone backwards and we're treating + // it as the trailing edge, or we've hit the `maxWait` limit. + return (lastCallTime === undefined || (timeSinceLastCall >= wait) || + (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait)); + } + + function timerExpired() { + var time = now(); + if (shouldInvoke(time)) { + return trailingEdge(time); + } + // Restart the timer. + timerId = setTimeout(timerExpired, remainingWait(time)); + } + + function trailingEdge(time) { + timerId = undefined; + + // Only invoke if we have `lastArgs` which means `func` has been + // debounced at least once. + if (trailing && lastArgs) { + return invokeFunc(time); + } + lastArgs = lastThis = undefined; + return result; + } + + function cancel() { + if (timerId !== undefined) { + clearTimeout(timerId); + } + lastInvokeTime = 0; + lastArgs = lastCallTime = lastThis = timerId = undefined; + } + + function flush() { + return timerId === undefined ? result : trailingEdge(now()); + } + + function debounced() { + var time = now(), + isInvoking = shouldInvoke(time); + + lastArgs = arguments; + lastThis = this; + lastCallTime = time; + + if (isInvoking) { + if (timerId === undefined) { + return leadingEdge(lastCallTime); + } + if (maxing) { + // Handle invocations in a tight loop. + timerId = setTimeout(timerExpired, wait); + return invokeFunc(lastCallTime); + } + } + if (timerId === undefined) { + timerId = setTimeout(timerExpired, wait); + } + return result; + } + debounced.cancel = cancel; + debounced.flush = flush; + return debounced; +} + +/** + * Checks if `value` is the + * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) + * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an object, else `false`. + * @example + * + * _.isObject({}); + * // => true + * + * _.isObject([1, 2, 3]); + * // => true + * + * _.isObject(_.noop); + * // => true + * + * _.isObject(null); + * // => false + */ +function isObject(value) { + var type = typeof value; + return !!value && (type == 'object' || type == 'function'); +} + +/** + * Checks if `value` is object-like. A value is object-like if it's not `null` + * and has a `typeof` result of "object". + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + * @example + * + * _.isObjectLike({}); + * // => true + * + * _.isObjectLike([1, 2, 3]); + * // => true + * + * _.isObjectLike(_.noop); + * // => false + * + * _.isObjectLike(null); + * // => false + */ +function isObjectLike(value) { + return !!value && typeof value == 'object'; +} + +/** + * Checks if `value` is classified as a `Symbol` primitive or object. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a symbol, else `false`. + * @example + * + * _.isSymbol(Symbol.iterator); + * // => true + * + * _.isSymbol('abc'); + * // => false + */ +function isSymbol(value) { + return typeof value == 'symbol' || + (isObjectLike(value) && objectToString.call(value) == symbolTag); +} + +/** + * Converts `value` to a number. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to process. + * @returns {number} Returns the number. + * @example + * + * _.toNumber(3.2); + * // => 3.2 + * + * _.toNumber(Number.MIN_VALUE); + * // => 5e-324 + * + * _.toNumber(Infinity); + * // => Infinity + * + * _.toNumber('3.2'); + * // => 3.2 + */ +function toNumber(value) { + if (typeof value == 'number') { + return value; + } + if (isSymbol(value)) { + return NAN; + } + if (isObject(value)) { + var other = typeof value.valueOf == 'function' ? value.valueOf() : value; + value = isObject(other) ? (other + '') : other; + } + if (typeof value != 'string') { + return value === 0 ? value : +value; + } + value = value.replace(reTrim, ''); + var isBinary = reIsBinary.test(value); + return (isBinary || reIsOctal.test(value)) + ? freeParseInt(value.slice(2), isBinary ? 2 : 8) + : (reIsBadHex.test(value) ? NAN : +value); +} + +var lodash_debounce = debounce$2; + +var debounce$3 = /*@__PURE__*/getDefaultExportFromCjs(lodash_debounce); + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +function composeEventHandlers$1() { + for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) { + fns[_key] = arguments[_key]; + } + return function (event) { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + return fns.some(fn => { + fn && fn(event, ...args); + return event && event.defaultPrevented; + }); + }; +} +const KEYS$1 = { + ALT: 'Alt', + ASTERISK: '*', + BACKSPACE: 'Backspace', + COMMA: ',', + DELETE: 'Delete', + DOWN: 'ArrowDown', + END: 'End', + ENTER: 'Enter', + ESCAPE: 'Escape', + HOME: 'Home', + LEFT: 'ArrowLeft', + NUMPAD_ADD: 'Add', + NUMPAD_DECIMAL: 'Decimal', + NUMPAD_DIVIDE: 'Divide', + NUMPAD_ENTER: 'Enter', + NUMPAD_MULTIPLY: 'Multiply', + NUMPAD_SUBTRACT: 'Subtract', + PAGE_DOWN: 'PageDown', + PAGE_UP: 'PageUp', + PERIOD: '.', + RIGHT: 'ArrowRight', + SHIFT: 'Shift', + SPACE: ' ', + TAB: 'Tab', + UNIDENTIFIED: 'Unidentified', + UP: 'ArrowUp' +}; +var DocumentPosition$1; +(function (DocumentPosition) { + DocumentPosition[DocumentPosition["DISCONNECTED"] = 1] = "DISCONNECTED"; + DocumentPosition[DocumentPosition["PRECEDING"] = 2] = "PRECEDING"; + DocumentPosition[DocumentPosition["FOLLOWING"] = 4] = "FOLLOWING"; + DocumentPosition[DocumentPosition["CONTAINS"] = 8] = "CONTAINS"; + DocumentPosition[DocumentPosition["CONTAINED_BY"] = 16] = "CONTAINED_BY"; + DocumentPosition[DocumentPosition["IMPLEMENTATION_SPECIFIC"] = 32] = "IMPLEMENTATION_SPECIFIC"; +})(DocumentPosition$1 || (DocumentPosition$1 = {})); + +const SLIDER_MIN = 0; +const SLIDER_MAX = 100; +const SLIDER_STEP = 1; +function useSlider(_ref) { + let { + trackRef, + minThumbRef, + maxThumbRef, + min = SLIDER_MIN, + max = SLIDER_MAX, + defaultMinValue, + defaultMaxValue, + minValue, + maxValue, + onChange = () => undefined, + step = SLIDER_STEP, + jump = step, + disabled, + rtl, + environment + } = _ref; + const doc = environment || document; + const [trackRect, setTrackRect] = reactExports.useState({ + width: 0 + }); + const init = function (initMinValue, initMaxValue) { + if (initMinValue === void 0) { + initMinValue = min; + } + if (initMaxValue === void 0) { + initMaxValue = max; + } + const retVal = { + minValue: initMinValue < min ? min : initMinValue, + maxValue: initMaxValue > max ? max : initMaxValue + }; + if (retVal.maxValue < min) { + retVal.maxValue = min; + } + if (retVal.minValue > retVal.maxValue) { + retVal.minValue = retVal.maxValue; + } + return retVal; + }; + const [state, setState] = reactExports.useState(init(defaultMinValue, defaultMaxValue)); + const isControlled = minValue !== undefined && minValue !== null || maxValue !== undefined && maxValue !== null; + const position = isControlled ? init(minValue, maxValue) : state; + const setPosition = isControlled ? onChange : setState; + reactExports.useEffect(() => { + const handleResize = debounce$3(() => { + if (trackRef.current) { + setTrackRect(trackRef.current.getBoundingClientRect()); + } + }, 100); + handleResize(); + const win = doc.defaultView || window; + win.addEventListener('resize', handleResize); + return () => { + win.removeEventListener('resize', handleResize); + handleResize.cancel(); + }; + }, [doc, trackRef]); + const getTrackPosition = reactExports.useCallback(event => { + let retVal = undefined; + if (trackRect) { + const offset = rtl ? trackRect.left + trackRect.width : trackRect.left; + const mouseX = (event.pageX - offset) * (rtl ? -1 : 1); + const x = (max - min) * mouseX / trackRect.width; + const value = min + parseInt(x, 10); + retVal = Math.floor(value / step) * step; + } + return retVal; + }, [max, min, trackRect, rtl, step]); + const setThumbPosition = reactExports.useCallback(thumb => value => { + if (!disabled) { + let newMinValue = position.minValue; + let newMaxValue = position.maxValue; + if (thumb === 'min') { + if (value < min) { + newMinValue = min; + } else if (value > position.maxValue) { + newMinValue = position.maxValue; + } else { + newMinValue = value; + } + } else if (thumb === 'max') { + if (value > max) { + newMaxValue = max; + } else if (value < position.minValue) { + newMaxValue = position.minValue; + } else { + newMaxValue = value; + } + } + if (!isNaN(newMinValue) && !isNaN(newMaxValue)) { + setPosition({ + minValue: newMinValue, + maxValue: newMaxValue + }); + } + } + }, [disabled, max, min, position.maxValue, position.minValue, setPosition]); + const getTrackProps = reactExports.useCallback(function (_temp) { + let { + onMouseDown, + ...other + } = _temp === void 0 ? {} : _temp; + const handleMouseDown = event => { + if (!disabled && event.button === 0) { + const value = getTrackPosition(event); + if (value !== undefined) { + const minOffset = Math.abs(position.minValue - value); + const maxOffset = Math.abs(position.maxValue - value); + if (minOffset <= maxOffset) { + minThumbRef.current && minThumbRef.current.focus(); + setThumbPosition('min')(value); + } else { + maxThumbRef.current && maxThumbRef.current.focus(); + setThumbPosition('max')(value); + } + } + } + }; + return { + 'data-garden-container-id': 'containers.slider.track', + 'data-garden-container-version': '0.1.6', + 'aria-disabled': disabled, + onMouseDown: composeEventHandlers$1(onMouseDown, handleMouseDown), + ...other + }; + }, [disabled, getTrackPosition, maxThumbRef, minThumbRef, position.maxValue, position.minValue, setThumbPosition]); + const getThumbProps = reactExports.useCallback(thumb => _ref2 => { + let { + onKeyDown, + onMouseDown, + onTouchStart, + ...other + } = _ref2; + const handleKeyDown = event => { + if (!disabled) { + let value; + switch (event.key) { + case KEYS$1.RIGHT: + value = (thumb === 'min' ? position.minValue : position.maxValue) + (rtl ? -step : step); + break; + case KEYS$1.UP: + value = (thumb === 'min' ? position.minValue : position.maxValue) + step; + break; + case KEYS$1.LEFT: + value = (thumb === 'min' ? position.minValue : position.maxValue) - (rtl ? -step : step); + break; + case KEYS$1.DOWN: + value = (thumb === 'min' ? position.minValue : position.maxValue) - step; + break; + case KEYS$1.PAGE_UP: + value = (thumb === 'min' ? position.minValue : position.maxValue) + jump; + break; + case KEYS$1.PAGE_DOWN: + value = (thumb === 'min' ? position.minValue : position.maxValue) - jump; + break; + case KEYS$1.HOME: + value = min; + break; + case KEYS$1.END: + value = max; + break; + } + if (value !== undefined) { + event.preventDefault(); + event.stopPropagation(); + setThumbPosition(thumb)(value); + } + } + }; + const handleMouseMove = event => { + const value = getTrackPosition(event); + if (value !== undefined) { + setThumbPosition(thumb)(value); + } + }; + const handleTouchMove = event => { + const value = getTrackPosition(event.targetTouches[0]); + if (value !== undefined) { + setThumbPosition(thumb)(value); + } + }; + const handleMouseUp = () => { + doc.removeEventListener('mousemove', handleMouseMove); + doc.removeEventListener('mouseup', handleMouseUp); + }; + const handleTouchEnd = () => { + doc.removeEventListener('touchend', handleTouchEnd); + doc.removeEventListener('touchmove', handleTouchMove); + }; + const handleMouseDown = event => { + if (!disabled && event.button === 0) { + event.stopPropagation(); + doc.addEventListener('mousemove', handleMouseMove); + doc.addEventListener('mouseup', handleMouseUp); + event.target && event.target.focus(); + } + }; + const handleTouchStart = event => { + if (!disabled) { + event.stopPropagation(); + doc.addEventListener('touchmove', handleTouchMove); + doc.addEventListener('touchend', handleTouchEnd); + event.target && event.target.focus(); + } + }; + return { + 'data-garden-container-id': 'containers.slider.thumb', + 'data-garden-container-version': '0.1.6', + role: 'slider', + tabIndex: disabled ? -1 : 0, + 'aria-valuemin': thumb === 'min' ? min : position.minValue, + 'aria-valuemax': thumb === 'min' ? position.maxValue : max, + 'aria-valuenow': thumb === 'min' ? position.minValue : position.maxValue, + onKeyDown: composeEventHandlers$1(onKeyDown, handleKeyDown), + onMouseDown: composeEventHandlers$1(onMouseDown, handleMouseDown), + onTouchStart: composeEventHandlers$1(onTouchStart, handleTouchStart), + ...other + }; + }, [doc, disabled, getTrackPosition, jump, max, min, position.maxValue, position.minValue, rtl, step, setThumbPosition]); + return reactExports.useMemo(() => ({ + getTrackProps, + getMinThumbProps: getThumbProps('min'), + getMaxThumbProps: getThumbProps('max'), + trackRect, + minValue: position.minValue, + maxValue: position.maxValue + }), [getTrackProps, getThumbProps, position.minValue, position.maxValue, trackRect]); +} +({ + children: PropTypes.func, + render: PropTypes.func, + trackRef: PropTypes.any.isRequired, + minThumbRef: PropTypes.any.isRequired, + maxThumbRef: PropTypes.any.isRequired, + environment: PropTypes.any, + defaultMinValue: PropTypes.number, + defaultMaxValue: PropTypes.number, + minValue: PropTypes.number, + maxValue: PropTypes.number, + onChange: PropTypes.func, + min: PropTypes.number, + max: PropTypes.number, + step: PropTypes.number, + jump: PropTypes.number, + disabled: PropTypes.bool, + rtl: PropTypes.bool +}); + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +function _extends$t$1() { + _extends$t$1 = Object.assign ? Object.assign.bind() : 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$t$1.apply(this, arguments); +} + +const FieldContext$2 = reactExports.createContext(undefined); +const useFieldContext$2 = () => { + const fieldContext = reactExports.useContext(FieldContext$2); + return fieldContext; +}; + +const COMPONENT_ID$K$1 = 'forms.field'; +const StyledField$2 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$K$1, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledField", + componentId: "sc-12gzfsu-0" +})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID$K$1, props)); +StyledField$2.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$J$1 = 'forms.fieldset'; +const StyledFieldset$1 = Ye(StyledField$2).attrs({ + as: 'fieldset', + 'data-garden-id': COMPONENT_ID$J$1, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledFieldset", + componentId: "sc-1vr4mxv-0" +})(["", "{margin-top:", "px;}", ";"], StyledField$2, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID$J$1, props)); +StyledFieldset$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$I$1 = 'forms.input_label'; +const StyledLabel$2 = Ye.label.attrs({ + 'data-garden-id': COMPONENT_ID$I$1, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledLabel", + componentId: "sc-2utmsz-0" +})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$I$1, props)); +StyledLabel$2.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$H$1 = 'forms.fieldset_legend'; +const StyledLegend$1 = Ye(StyledLabel$2).attrs({ + as: 'legend', + 'data-garden-id': COMPONENT_ID$H$1, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledLegend", + componentId: "sc-6s0zwq-0" +})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$H$1, props)); +StyledLegend$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$G$1 = 'forms.input_hint'; +const StyledHint$2 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$G$1, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledHint", + componentId: "sc-17c2wu8-0" +})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$G$1, props)); +StyledHint$2.defaultProps = { + theme: DEFAULT_THEME +}; + +var _g$2$1, _circle$5$1; +function _extends$s$1() { _extends$s$1 = Object.assign ? Object.assign.bind() : 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$s$1.apply(this, arguments); } +var SvgAlertErrorStroke$1 = function SvgAlertErrorStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$s$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _g$2$1 || (_g$2$1 = /*#__PURE__*/reactExports.createElement("g", { + fill: "none", + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 8.5, + r: 7 + }), /*#__PURE__*/reactExports.createElement("path", { + strokeLinecap: "round", + d: "M7.5 4.5V9" + }))), _circle$5$1 || (_circle$5$1 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 12, + r: 1, + fill: "currentColor" + }))); +}; + +var _path$n$1, _circle$4$1; +function _extends$r$1() { _extends$r$1 = Object.assign ? Object.assign.bind() : 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$r$1.apply(this, arguments); } +var SvgAlertWarningStroke$1 = function SvgAlertWarningStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$r$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$n$1 || (_path$n$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5" + })), _circle$4$1 || (_circle$4$1 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 12, + r: 1, + fill: "currentColor" + }))); +}; + +var _g$1$1; +function _extends$q$1() { _extends$q$1 = Object.assign ? Object.assign.bind() : 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$q$1.apply(this, arguments); } +var SvgCheckCircleStroke$1$1 = function SvgCheckCircleStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$q$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _g$1$1 || (_g$1$1 = /*#__PURE__*/reactExports.createElement("g", { + fill: "none", + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("path", { + strokeLinecap: "round", + strokeLinejoin: "round", + d: "M4 9l2.5 2.5 5-5" + }), /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 8.5, + r: 7 + })))); +}; + +const MessageIcon$1 = _ref => { + let { + children, + validation, + ...props + } = _ref; + let retVal; + if (validation === 'error') { + retVal = React__default.createElement(SvgAlertErrorStroke$1, props); + } else if (validation === 'success') { + retVal = React__default.createElement(SvgCheckCircleStroke$1$1, props); + } else if (validation === 'warning') { + retVal = React__default.createElement(SvgAlertWarningStroke$1, props); + } else { + retVal = React__default.cloneElement(reactExports.Children.only(children)); + } + return retVal; +}; +const COMPONENT_ID$F$1 = 'forms.input_message_icon'; +const StyledMessageIcon$1 = Ye(MessageIcon$1).attrs({ + 'data-garden-id': COMPONENT_ID$F$1, + 'data-garden-version': '8.69.1', + 'aria-hidden': null +}).withConfig({ + displayName: "StyledMessageIcon", + componentId: "sc-1ph2gba-0" +})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$F$1, props)); +StyledMessageIcon$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const validationStyles$1 = props => { + const rtl = props.theme.rtl; + const padding = math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`); + let color; + if (props.validation === 'error') { + color = getColor('dangerHue', 600, props.theme); + } else if (props.validation === 'success') { + color = getColor('successHue', 600, props.theme); + } else if (props.validation === 'warning') { + color = getColor('warningHue', 700, props.theme); + } else { + color = getColor('neutralHue', 700, props.theme); + } + return Ne(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color); +}; +const COMPONENT_ID$E$1 = 'forms.input_message'; +const StyledMessage$2 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$E$1, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledMessage", + componentId: "sc-30hgg7-0" +})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => validationStyles$1(props), StyledMessageIcon$1, props => props.theme.rtl ? 'right' : 'left', StyledLabel$2, props => math(`${props.theme.space.base} * 1px`), props => retrieveComponentStyles(COMPONENT_ID$E$1, props)); +StyledMessage$2.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$D$1 = 'forms.input'; +const isInvalid$1 = validation => { + return validation === 'warning' || validation === 'error'; +}; +const colorStyles$c$1 = props => { + const HUE = 'primaryHue'; + const SHADE = 600; + const placeholderColor = getColor('neutralHue', SHADE - 200, props.theme); + let borderColor; + let hoverBorderColor; + let focusBorderColor; + let focusRingHue = HUE; + let focusRingShade = SHADE; + if (props.validation) { + let hue = HUE; + if (props.validation === 'success') { + hue = 'successHue'; + } else if (props.validation === 'warning') { + hue = 'warningHue'; + focusRingShade = 700; + } else if (props.validation === 'error') { + hue = 'dangerHue'; + } + borderColor = getColor(hue, SHADE, props.theme); + hoverBorderColor = borderColor; + focusBorderColor = borderColor; + focusRingHue = hue; + } else { + borderColor = getColor('neutralHue', SHADE - 300, props.theme); + hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + focusBorderColor = hoverBorderColor; + } + const readOnlyBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme); + const readOnlyBorderColor = getColor('neutralHue', SHADE - 300, props.theme); + const disabledBackgroundColor = readOnlyBackgroundColor; + const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme); + const disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme); + let controlledBorderColor = borderColor; + if (props.isFocused) { + controlledBorderColor = focusBorderColor; + } + if (props.isHovered) { + controlledBorderColor = hoverBorderColor; + } + return Ne(["border-color:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}", " &:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, props.isBare ? 'transparent' : props.theme.colors.background, props.theme.colors.foreground, placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusStyles({ + theme: props.theme, + inset: props.focusInset, + condition: !props.isBare, + hue: focusRingHue, + shade: focusRingShade, + styles: { + borderColor: focusBorderColor + } + }), disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor); +}; +const sizeStyles$f$1 = props => { + const fontSize = props.theme.fontSizes.md; + const paddingHorizontal = `${props.theme.space.base * 3}px`; + let height; + let paddingVertical; + let browseFontSize; + let swatchHeight; + if (props.isCompact) { + height = `${props.theme.space.base * 8}px`; + paddingVertical = `${props.theme.space.base * 1.5}px`; + browseFontSize = math(`${props.theme.fontSizes.sm} - 1`); + swatchHeight = `${props.theme.space.base * 6}px`; + } else { + height = `${props.theme.space.base * 10}px`; + paddingVertical = `${props.theme.space.base * 2.5}px`; + browseFontSize = props.theme.fontSizes.sm; + swatchHeight = `${props.theme.space.base * 7}px`; + } + const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${props.theme.borderWidths.sm} * 2)`); + const padding = props.isBare ? '0' : `${em$1(paddingVertical, fontSize)} ${em$1(paddingHorizontal, fontSize)}`; + const swatchMarginVertical = math(`(${lineHeight} - ${swatchHeight}) / 2`); + const swatchMarginHorizontal = math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`); + return Ne(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", "px;}"], padding, props.isBare ? '1em' : height, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel$2, StyledHint$2, StyledMessage$2, StyledHint$2, StyledMessage$2, props.theme.space.base * (props.isCompact ? 1 : 2)); +}; +const StyledTextInput$1 = Ye.input.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$D$1, + 'data-garden-version': '8.69.1', + 'aria-invalid': isInvalid$1(props.validation) +})).withConfig({ + displayName: "StyledTextInput", + componentId: "sc-k12n8x-0" +})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', props => sizeStyles$f$1(props), props => colorStyles$c$1(props), props => retrieveComponentStyles(COMPONENT_ID$D$1, props)); +StyledTextInput$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$C$1 = 'forms.textarea'; +const hiddenStyles$1 = ` + visibility: hidden; + position: absolute; + overflow: hidden; + height: 0; + top: 0; + left: 0; + transform: translateZ(0); +`; +const StyledTextarea$1 = Ye(StyledTextInput$1).attrs({ + as: 'textarea', + 'data-garden-id': COMPONENT_ID$C$1, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledTextarea", + componentId: "sc-wxschl-0" +})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles$1, props => retrieveComponentStyles(COMPONENT_ID$C$1, props)); +StyledTextarea$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$B$1 = 'forms.media_figure'; +const colorStyles$b$1 = props => { + let shade = 600; + if (props.isDisabled) { + shade = 400; + } else if (props.isHovered || props.isFocused) { + shade = 700; + } + return Ne(["color:", ";"], getColor('neutralHue', shade, props.theme)); +}; +const sizeStyles$e$1 = props => { + const size = props.theme.iconSizes.md; + const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`; + const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`; + let margin; + if (props.position === 'start') { + margin = props.theme.rtl ? marginLast : marginFirst; + } else { + margin = props.theme.rtl ? marginFirst : marginLast; + } + return Ne(["margin:", ";width:", ";height:", ";"], margin, size, size); +}; +const StyledTextMediaFigure$1 = Ye( +_ref => { + let { + children, + position, + isHovered, + isFocused, + isDisabled, + isRotated, + theme, + ...props + } = _ref; + return React__default.cloneElement(reactExports.Children.only(children), props); +}).attrs({ + 'data-garden-id': COMPONENT_ID$B$1, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledTextMediaFigure", + componentId: "sc-1qepknj-0" +})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles$b$1(props), props => sizeStyles$e$1(props), props => retrieveComponentStyles(COMPONENT_ID$B$1, props)); +StyledTextMediaFigure$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$A$1 = 'forms.faux_input'; +const VALIDATION_HUES$1 = { + success: 'successHue', + warning: 'warningHue', + error: 'dangerHue' +}; +function getValidationHue$1(validation) { + let defaultHue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'primaryHue'; + if (validation) { + return VALIDATION_HUES$1[validation]; + } + return defaultHue; +} +const colorStyles$a$2 = props => { + const { + theme, + validation, + focusInset, + isBare, + isFocused + } = props; + return Ne(["", ""], focusStyles({ + theme, + inset: focusInset, + condition: !isBare, + hue: getValidationHue$1(validation), + shade: validation === 'warning' ? 700 : 600, + selector: isFocused ? '&' : '&:focus-within', + styles: { + borderColor: getColor(getValidationHue$1(validation), 600, theme) + } + })); +}; +const StyledTextFauxInput$1 = Ye(StyledTextInput$1).attrs(props => ({ + as: 'div', + 'aria-readonly': props.isReadOnly, + 'aria-disabled': props.isDisabled, + 'data-garden-id': COMPONENT_ID$A$1, + 'data-garden-version': '8.69.1' +})).withConfig({ + displayName: "StyledTextFauxInput", + componentId: "sc-yqw7j9-0" +})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;", " & > ", "{vertical-align:", ";", "{box-shadow:unset;}}& > ", "{flex-shrink:", ";}", ";"], props => props.mediaLayout ? 'inline-flex' : 'inline-block', props => props.mediaLayout && 'baseline', props => props.mediaLayout && !props.isDisabled ? 'text' : 'default', colorStyles$a$2, StyledTextInput$1, props => !props.mediaLayout && 'baseline', SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure$1, props => props.mediaLayout && '0', props => retrieveComponentStyles(COMPONENT_ID$A$1, props)); +StyledTextFauxInput$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$z$1 = 'forms.media_input'; +const StyledTextMediaInput$1 = Ye(StyledTextInput$1).attrs({ + 'data-garden-id': COMPONENT_ID$z$1, + 'data-garden-version': '8.69.1', + isBare: true +}).withConfig({ + displayName: "StyledTextMediaInput", + componentId: "sc-12i9xfi-0" +})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$z$1, props)); +StyledTextMediaInput$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$y$1 = 'forms.input_group'; +const positionStyles$1 = props => { + const topMargin = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`; + return Ne(["", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}& > ", "{position:relative;flex:1 1 auto;margin-top:0;margin-bottom:0;width:auto;min-width:0;}"], StyledLabel$2, StyledHint$2, StyledMessage$2, StyledHint$2, StyledMessage$2, topMargin, StyledTextInput$1); +}; +const itemStyles$1 = props => { + const startDirection = props.theme.rtl ? 'right' : 'left'; + const endDirection = props.theme.rtl ? 'left' : 'right'; + return Ne(["& > *{z-index:-1;}& > ", "{z-index:0;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", ":focus-visible,& > button:focus-visible,& > ", "[data-garden-focus-visible],& > button[data-garden-focus-visible],& > ", ":active,& > button:active{z-index:1;}& > button:disabled{border-top-width:0;border-bottom-width:0;}& > *:not(:first-child){margin-", ":-", ";}& > *:first-child:not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:last-child:not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:not(:first-child):not(:last-child){border-radius:0;}"], StyledTextInput$1, StyledTextInput$1, StyledTextInput$1, StyledTextInput$1, StyledTextInput$1, StyledTextInput$1, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection); +}; +const StyledInputGroup$2 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$y$1, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledInputGroup", + componentId: "sc-kjh1f0-0" +})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles$1(props), props => itemStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$y$1, props)); +StyledInputGroup$2.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$x$1 = 'forms.radio_label'; +const sizeStyles$d$1 = props => { + const size = props.theme.space.base * 4; + const padding = size + props.theme.space.base * 2; + const lineHeight = props.theme.space.base * 5; + return Ne(["padding-", ":", "px;&[hidden]{padding-", ":", "px;line-height:", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size, lineHeight); +}; +const StyledRadioLabel$1 = Ye(StyledLabel$2).attrs({ + 'data-garden-id': COMPONENT_ID$x$1, + 'data-garden-version': '8.69.1', + isRadio: true +}).withConfig({ + displayName: "StyledRadioLabel", + componentId: "sc-1aq2e5t-0" +})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d$1(props), props => retrieveComponentStyles(COMPONENT_ID$x$1, props)); +StyledRadioLabel$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$w$2 = 'forms.checkbox_label'; +const StyledCheckLabel$1 = Ye(StyledRadioLabel$1).attrs({ + 'data-garden-id': COMPONENT_ID$w$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledCheckLabel", + componentId: "sc-x7nr1-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$w$2, props)); +StyledCheckLabel$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$v$2 = 'forms.radio_hint'; +const StyledRadioHint$1 = Ye(StyledHint$2).attrs({ + 'data-garden-id': COMPONENT_ID$v$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledRadioHint", + componentId: "sc-eo8twg-0" +})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$v$2, props)); +StyledRadioHint$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$u$2 = 'forms.checkbox_hint'; +const StyledCheckHint$1 = Ye(StyledRadioHint$1).attrs({ + 'data-garden-id': COMPONENT_ID$u$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledCheckHint", + componentId: "sc-1kl8e8c-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$u$2, props)); +StyledCheckHint$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$t$2 = 'forms.radio'; +const colorStyles$9$2 = props => { + const SHADE = 600; + const borderColor = getColor('neutralHue', SHADE - 300, props.theme); + const backgroundColor = props.theme.colors.background; + const iconColor = backgroundColor; + const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08); + const hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + const focusBorderColor = hoverBorderColor; + const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2); + const activeBorderColor = focusBorderColor; + const checkedBorderColor = focusBorderColor; + const checkedBackgroundColor = checkedBorderColor; + const checkedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme); + const checkedHoverBackgroundColor = checkedHoverBorderColor; + const checkedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme); + const checkedActiveBackgroundColor = checkedActiveBorderColor; + const disabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + return Ne(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}", " & ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel$1, borderColor, backgroundColor, StyledRadioLabel$1, iconColor, StyledRadioLabel$1, hoverBorderColor, hoverBackgroundColor, focusStyles({ + theme: props.theme, + styles: { + borderColor: focusBorderColor + }, + selector: `&:focus-visible ~ ${StyledRadioLabel$1}::before, &[data-garden-focus-visible='true'] ~ ${StyledRadioLabel$1}::before` + }), StyledRadioLabel$1, activeBorderColor, activeBackgroundColor, StyledRadioLabel$1, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel$1, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel$1, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel$1, disabledBackgroundColor); +}; +const sizeStyles$c$2 = props => { + const lineHeight = `${props.theme.space.base * 5}px`; + const size = `${props.theme.space.base * 4}px`; + const top = math(`(${lineHeight} - ${size}) / 2`); + const iconSize = props.theme.iconSizes.sm; + const iconPosition = math(`(${size} - ${iconSize}) / 2`); + const iconTop = math(`${iconPosition} + ${top}`); + const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`; + return Ne(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel$1, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel$1, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel$1, StyledMessage$2, marginTop); +}; +const StyledRadioInput$1 = Ye.input.attrs({ + 'data-garden-id': COMPONENT_ID$t$2, + 'data-garden-version': '8.69.1', + type: 'radio' +}).withConfig({ + displayName: "StyledRadioInput", + componentId: "sc-qsavpv-0" +})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel$1, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, StyledRadioLabel$1, props => sizeStyles$c$2(props), StyledRadioLabel$1, StyledRadioLabel$1, props => colorStyles$9$2(props), StyledRadioLabel$1, props => retrieveComponentStyles(COMPONENT_ID$t$2, props)); +StyledRadioInput$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$s$2 = 'forms.checkbox'; +const colorStyles$8$2 = props => { + const SHADE = 600; + const indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme); + const indeterminateBackgroundColor = indeterminateBorderColor; + const indeterminateActiveBorderColor = getColor('primaryHue', SHADE + 100, props.theme); + const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor; + const indeterminateDisabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + return Ne(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled:indeterminate ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledCheckLabel$1, indeterminateBorderColor, indeterminateBackgroundColor, StyledCheckLabel$1, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel$1, indeterminateDisabledBackgroundColor); +}; +const StyledCheckInput$1 = Ye(StyledRadioInput$1).attrs({ + 'data-garden-id': COMPONENT_ID$s$2, + 'data-garden-version': '8.69.1', + type: 'checkbox' +}).withConfig({ + displayName: "StyledCheckInput", + componentId: "sc-176jxxe-0" +})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel$1, props => props.theme.borderRadii.md, props => colorStyles$8$2(props), props => retrieveComponentStyles(COMPONENT_ID$s$2, props)); +StyledCheckInput$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$r$2 = 'forms.radio_message'; +const StyledRadioMessage$1 = Ye(StyledMessage$2).attrs({ + 'data-garden-id': COMPONENT_ID$r$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledRadioMessage", + componentId: "sc-1pmi0q8-0" +})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$r$2, props)); +StyledRadioMessage$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$q$2 = 'forms.checkbox_message'; +const StyledCheckMessage$1 = Ye(StyledRadioMessage$1).attrs({ + 'data-garden-id': COMPONENT_ID$q$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledCheckMessage", + componentId: "sc-s4p6kd-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$q$2, props)); +StyledCheckMessage$1.defaultProps = { + theme: DEFAULT_THEME +}; + +var _path$m$1; +function _extends$p$1() { _extends$p$1 = Object.assign ? Object.assign.bind() : 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$p$1.apply(this, arguments); } +var SvgCheckSmFill$1 = function SvgCheckSmFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$p$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$m$1 || (_path$m$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + strokeLinejoin: "round", + strokeWidth: 2, + d: "M3 6l2 2 4-4" + }))); +}; + +const COMPONENT_ID$p$2 = 'forms.check_svg'; +const StyledCheckSvg$1 = Ye(SvgCheckSmFill$1).attrs({ + 'data-garden-id': COMPONENT_ID$p$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledCheckSvg", + componentId: "sc-fvxetk-0" +})(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput$1, StyledCheckLabel$1, StyledCheckInput$1, StyledCheckLabel$1, props => retrieveComponentStyles(COMPONENT_ID$p$2, props)); +StyledCheckSvg$1.defaultProps = { + theme: DEFAULT_THEME +}; + +var _path$l$1; +function _extends$o$1() { _extends$o$1 = Object.assign ? Object.assign.bind() : 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$o$1.apply(this, arguments); } +var SvgDashFill$1 = function SvgDashFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$o$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$l$1 || (_path$l$1 = /*#__PURE__*/reactExports.createElement("path", { + stroke: "currentColor", + strokeLinecap: "round", + strokeWidth: 2, + d: "M3 6h6" + }))); +}; + +const COMPONENT_ID$o$2 = 'forms.dash_svg'; +const StyledDashSvg$1 = Ye(SvgDashFill$1).attrs({ + 'data-garden-id': COMPONENT_ID$o$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledDashSvg", + componentId: "sc-z3vq71-0" +})(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput$1, StyledCheckLabel$1, props => retrieveComponentStyles(COMPONENT_ID$o$2, props)); +StyledDashSvg$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$n$2 = 'forms.file_upload'; +const colorStyles$7$2 = props => { + const baseColor = getColor('primaryHue', 600, props.theme); + const hoverColor = getColor('primaryHue', 700, props.theme); + const activeColor = getColor('primaryHue', 800, props.theme); + const disabledBackgroundColor = getColor('neutralHue', 200, props.theme); + const disabledForegroundColor = getColor('neutralHue', 400, props.theme); + return Ne(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : getColor('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, focusStyles({ + theme: props.theme, + hue: baseColor + }), activeColor, rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor); +}; +const sizeStyles$b$2 = props => { + const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`; + const paddingHorizontal = `${props.isCompact ? 2 : 4}em`; + const paddingVertical = math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`); + const fontSize = props.theme.fontSizes.md; + const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize); + return Ne(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel$2, StyledHint$2, StyledMessage$2, StyledHint$2, StyledMessage$2, marginTop); +}; +const StyledFileUpload$1 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$n$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledFileUpload", + componentId: "sc-1rodjgn-0" +})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles$b$2, colorStyles$7$2, props => retrieveComponentStyles(COMPONENT_ID$n$2, props)); +StyledFileUpload$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$m$2 = 'forms.file.close'; +const StyledFileClose$1 = Ye.button.attrs({ + 'data-garden-id': COMPONENT_ID$m$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledFileClose", + componentId: "sc-1m31jbf-0" +})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => props.theme.colors.foreground, props => retrieveComponentStyles(COMPONENT_ID$m$2, props)); +StyledFileClose$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$l$2 = 'forms.file'; +const colorStyles$6$2 = props => { + let borderColor; + let focusBorderColor; + let foregroundColor; + if (props.validation === 'success') { + borderColor = getColor('successHue', 600, props.theme); + focusBorderColor = borderColor; + foregroundColor = borderColor; + } else if (props.validation === 'error') { + borderColor = getColor('dangerHue', 600, props.theme); + focusBorderColor = borderColor; + foregroundColor = borderColor; + } else { + borderColor = getColor('neutralHue', 300, props.theme); + focusBorderColor = getColor('primaryHue', 600, props.theme); + foregroundColor = props.theme.colors.foreground; + } + return Ne(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({ + theme: props.theme, + inset: props.focusInset, + hue: focusBorderColor, + styles: { + borderColor: focusBorderColor + } + })); +}; +const sizeStyles$a$2 = props => { + const size = `${props.theme.space.base * (props.isCompact ? 7 : 10)}px`; + const spacing = `${props.theme.space.base * (props.isCompact ? 2 : 3)}px`; + const fontSize = props.theme.fontSizes.md; + const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize); + return ` + box-sizing: border-box; + border: ${props.theme.borders.sm}; + border-radius: ${props.theme.borderRadii.md}; + padding: 0 ${spacing}; + height: ${size}; + line-height: ${lineHeight}; + font-size: ${fontSize}; + + & > span { + width: 100%; + } + + & > ${StyledFileClose$1} { + width: ${size}; + height: ${size}; + margin-${props.theme.rtl ? 'left' : 'right'}: -${spacing}; + } + `; +}; +const StyledFile$1 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$l$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledFile", + componentId: "sc-195lzp1-0" +})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;transition:box-shadow 0.1s ease-in-out;", ";", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$a$2, colorStyles$6$2, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$l$2, props)); +StyledFile$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$k$2 = 'forms.file.delete'; +const StyledFileDelete$1 = Ye(StyledFileClose$1).attrs({ + 'data-garden-id': COMPONENT_ID$k$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledFileDelete", + componentId: "sc-a8nnhx-0" +})(["color:", ";", ";"], props => getColor('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$k$2, props)); +StyledFileDelete$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$j$2 = 'forms.file.icon'; +const StyledFileIcon$1 = Ye(_ref => { + let { + children, + isCompact, + theme, + ...props + } = _ref; + return React__default.cloneElement(reactExports.Children.only(children), props); +}).attrs({ + 'data-garden-id': COMPONENT_ID$j$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledFileIcon", + componentId: "sc-7b3q0c-0" +})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$j$2, props)); +StyledFileIcon$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$i$2 = 'forms.file_list'; +const StyledFileList$1 = Ye.ul.attrs({ + 'data-garden-id': COMPONENT_ID$i$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledFileList", + componentId: "sc-gbahjg-0" +})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$i$2, props)); +StyledFileList$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$h$2 = 'forms.file_list.item'; +const StyledFileListItem$1 = Ye.li.attrs({ + 'data-garden-id': COMPONENT_ID$h$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledFileListItem", + componentId: "sc-1ova3lo-0" +})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload$1, StyledFileList$1, props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$h$2, props)); +StyledFileListItem$1.defaultProps = { + theme: DEFAULT_THEME +}; + +var _circle$3$1; +function _extends$n$1() { _extends$n$1 = Object.assign ? Object.assign.bind() : 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$n$1.apply(this, arguments); } +var SvgCircleSmFill$1$1 = function SvgCircleSmFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$n$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _circle$3$1 || (_circle$3$1 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 6, + cy: 6, + r: 2, + fill: "currentColor" + }))); +}; + +const COMPONENT_ID$g$2 = 'forms.radio_svg'; +const StyledRadioSvg$1 = Ye(SvgCircleSmFill$1$1).attrs({ + 'data-garden-id': COMPONENT_ID$g$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledRadioSvg", + componentId: "sc-1r1qtr1-0" +})(["transition:opacity 0.25 ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput$1, StyledRadioLabel$1, props => retrieveComponentStyles(COMPONENT_ID$g$2, props)); +StyledRadioSvg$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$f$2 = 'forms.toggle_label'; +const sizeStyles$9$2 = props => { + const size = props.theme.space.base * 10; + const padding = size + props.theme.space.base * 2; + return Ne(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size); +}; +const StyledToggleLabel$1 = Ye(StyledCheckLabel$1).attrs({ + 'data-garden-id': COMPONENT_ID$f$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledToggleLabel", + componentId: "sc-e0asdk-0" +})(["", ";", ";"], props => sizeStyles$9$2(props), props => retrieveComponentStyles(COMPONENT_ID$f$2, props)); +StyledToggleLabel$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$e$2 = 'forms.toggle_hint'; +const StyledToggleHint$1 = Ye(StyledHint$2).attrs({ + 'data-garden-id': COMPONENT_ID$e$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledToggleHint", + componentId: "sc-nziggu-0" +})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID$e$2, props)); +StyledToggleHint$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$d$2 = 'forms.toggle'; +const colorStyles$5$2 = props => { + const SHADE = 600; + const backgroundColor = getColor('neutralHue', SHADE - 100, props.theme); + const hoverBackgroundColor = getColor('neutralHue', SHADE, props.theme); + const activeBackgroundColor = getColor('neutralHue', SHADE + 100, props.theme); + return Ne(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel$1, backgroundColor, StyledToggleLabel$1, hoverBackgroundColor, StyledToggleLabel$1, activeBackgroundColor); +}; +const sizeStyles$8$2 = props => { + const height = `${props.theme.space.base * 5}px`; + const width = `${props.theme.space.base * 10}px`; + const iconSize = props.theme.iconSizes.md; + const iconPosition = math(`(${height} - ${iconSize}) / 2`); + const checkedIconPosition = math(`${width} - ${iconSize} - ${iconPosition}`); + return Ne(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel$1, width, height, StyledToggleLabel$1, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel$1, props.theme.rtl ? 'right' : 'left', checkedIconPosition); +}; +const StyledToggleInput$1 = Ye(StyledCheckInput$1).attrs({ + 'data-garden-id': COMPONENT_ID$d$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledToggleInput", + componentId: "sc-sgp47s-0" +})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel$1, props => sizeStyles$8$2(props), props => colorStyles$5$2(props), props => retrieveComponentStyles(COMPONENT_ID$d$2, props)); +StyledToggleInput$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$c$2 = 'forms.toggle_message'; +const StyledToggleMessage$1 = Ye(StyledMessage$2).attrs({ + 'data-garden-id': COMPONENT_ID$c$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledToggleMessage", + componentId: "sc-13vuvl1-0" +})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon$1, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => retrieveComponentStyles(COMPONENT_ID$c$2, props)); +StyledToggleMessage$1.defaultProps = { + theme: DEFAULT_THEME +}; + +var _circle$2$1; +function _extends$m$1() { _extends$m$1 = Object.assign ? Object.assign.bind() : 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$m$1.apply(this, arguments); } +var SvgCircleSmFill$2 = function SvgCircleSmFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$m$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _circle$2$1 || (_circle$2$1 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 8, + cy: 8, + r: 6, + fill: "currentColor" + }))); +}; + +const COMPONENT_ID$b$2 = 'forms.toggle_svg'; +const StyledToggleSvg$1 = Ye(SvgCircleSmFill$2).attrs({ + 'data-garden-id': COMPONENT_ID$b$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledToggleSvg", + componentId: "sc-162xbyx-0" +})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b$2, props)); +StyledToggleSvg$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$a$2 = 'forms.select'; +const colorStyles$4$2 = props => { + const color = getColor('neutralHue', 700, props.theme); + return Ne(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure$1, StyledTextMediaFigure$1, StyledTextMediaFigure$1, StyledTextMediaFigure$1, color); +}; +const sizeStyles$7$2 = props => { + const padding = math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`); + const iconVerticalPosition = `${props.theme.space.base * (props.isCompact ? 1.5 : 2.5) + 1}px`; + const iconHorizontalPosition = `${props.theme.space.base * 3}px`; + return Ne(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure$1, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition); +}; +const StyledSelect$1 = Ye(StyledTextInput$1).attrs({ + 'data-garden-id': COMPONENT_ID$a$2, + 'data-garden-version': '8.69.1', + as: 'select' +}).withConfig({ + displayName: "StyledSelect", + componentId: "sc-8xdxpt-0" +})(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], props => sizeStyles$7$2(props), props => colorStyles$4$2(props), props => props.theme.colors.foreground, StyledTextMediaFigure$1); +StyledSelect$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$9$2 = 'forms.select_wrapper'; +const StyledSelectWrapper$1 = Ye(StyledTextFauxInput$1).attrs({ + 'data-garden-id': COMPONENT_ID$9$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledSelectWrapper", + componentId: "sc-i7b6hw-0" +})(["position:relative;padding:0;overflow:visible;& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], StyledSelect$1, SELECTOR_FOCUS_VISIBLE); +StyledSelectWrapper$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$8$2 = 'forms.range'; +const thumbStyles$1 = function (styles) { + let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return ` + &${modifier}::-moz-range-thumb { + ${styles} + } + + &${modifier}::-ms-thumb { + ${styles} + } + + &${modifier}::-webkit-slider-thumb { + ${styles} + } + `; +}; +const trackStyles$1 = function (styles) { + let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return ` + &${modifier}::-moz-range-track { + ${styles} + } + + &${modifier}::-ms-track { + ${styles} + } + + &${modifier}::-webkit-slider-runnable-track { + ${styles} + } + `; +}; +const trackLowerStyles$1 = function (styles) { + let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return ` + &${modifier}::-moz-range-progress { + ${styles} + } + + &${modifier}::-ms-fill-lower { + ${styles} + } + `; +}; +const colorStyles$3$2 = props => { + const SHADE = 600; + const thumbBackgroundColor = getColor('primaryHue', SHADE, props.theme); + const thumbBorderColor = thumbBackgroundColor; + const thumbBoxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24)); + const thumbFocusBoxShadow = getFocusBoxShadow({ + theme: props.theme + }); + const thumbActiveBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme); + const thumbActiveBorderColor = thumbBorderColor; + const thumbDisabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme); + const thumbDisabledBorderColor = thumbDisabledBackgroundColor; + const thumbHoverBackgroundColor = thumbActiveBackgroundColor; + const thumbHoverBorderColor = thumbHoverBackgroundColor; + const trackBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + const trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : ''; + const trackBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : ''; + const trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : ''; + const trackDisabledBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : ''; + return Ne(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles$1(` + background-color: ${trackBackgroundColor}; + background-image: ${trackBackgroundImage}; /* provide means for styling lower range on WebKit */ + `), thumbStyles$1(` + border-color: ${thumbBorderColor}; + box-shadow: ${thumbBoxShadow}; + background-color: ${thumbBackgroundColor}; + `), trackLowerStyles$1(` + background-color: ${trackLowerBackgroundColor}; + `), thumbStyles$1(` + transition: + border-color .25s ease-in-out, + background-color .25s ease-in-out; + border-color: ${thumbHoverBorderColor}; + background-color: ${thumbHoverBackgroundColor}; + `, ':hover'), thumbStyles$1(` + box-shadow: ${thumbFocusBoxShadow}; + `, '[data-garden-focus-visible="true"]'), thumbStyles$1(` + border-color: ${thumbActiveBorderColor}; + background-color: ${thumbActiveBackgroundColor}; + `, ':active'), trackStyles$1(` + background-image: ${trackDisabledBackgroundImage}; + `, ':disabled'), thumbStyles$1(` + border-color: ${thumbDisabledBorderColor}; + box-shadow: none; + background-color: ${thumbDisabledBackgroundColor}; + `, ':disabled'), trackLowerStyles$1(` + background-color: ${trackDisabledLowerBackgroundColor}; + `, ':disabled')); +}; +const sizeStyles$6$2 = props => { + const thumbSize = math(`${props.theme.space.base} * 5px`); + const trackHeight = math(`${props.theme.space.base} * 1.5px`); + const trackBorderRadius = trackHeight; + const trackMargin = math(`(${thumbSize} - ${trackHeight}) / 2 + ${props.theme.shadowWidths.md}`); + const thumbMargin = math(`(${trackHeight} - ${thumbSize}) / 2`); + return Ne(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel$2, StyledHint$2, StyledMessage$2, StyledHint$2, StyledMessage$2, math(`${props.theme.space.base} * 2px`), trackStyles$1(` + margin: ${trackMargin} 0; + border-radius: ${trackBorderRadius}; + height: ${trackHeight}; + `), thumbStyles$1(` + margin: ${thumbMargin} 0; /* reset for IE */ + width: ${thumbSize}; + height: ${thumbSize}; + `), trackLowerStyles$1(` + border-top-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius}; + border-bottom-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius}; + height: ${trackHeight}; + `)); +}; +const StyledRangeInput$1 = Ye.input.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$8$2, + 'data-garden-version': '8.69.1', + type: 'range', + style: { + backgroundSize: props.hasLowerTrack && props.backgroundSize + } +})).withConfig({ + displayName: "StyledRangeInput", + componentId: "sc-1iv2yqp-0" +})(["appearance:none;direction:", ";margin:0;background-color:inherit;cursor:pointer;padding:0;width:100%;vertical-align:middle;", " &::-webkit-slider-container,&::-webkit-slider-runnable-track{background-size:inherit;}", ";", " ", ";&::-moz-focus-outer{border:0;}&::-ms-tooltip{display:none;}&:focus{outline:none;}&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => trackStyles$1(` + appearance: none; + border-color: transparent; /* reset for IE */ + background-repeat: repeat-y; + background-size: 0; + background-position: ${props.theme.rtl ? '100% 100%' : '0% 0%'}; + width: 99.8%; /* fix for IE which cuts off the upper track's border radius */ + color: transparent; /* reset for IE */ + box-sizing: border-box; /* reset for IE */ + `), props => sizeStyles$6$2(props), props => thumbStyles$1(` + appearance: none; + transition: box-shadow .1s ease-in-out; + border: ${props.theme.borders.md}; + border-radius: 100%; + box-sizing: border-box; + `), props => colorStyles$3$2(props), props => retrieveComponentStyles(COMPONENT_ID$8$2, props)); +StyledRangeInput$1.defaultProps = { + backgroundSize: '0%', + hasLowerTrack: true, + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$7$2 = 'forms.slider'; +const StyledSlider$1 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$7$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledSlider", + componentId: "sc-1di437a-0" +})(["display:block;position:relative;z-index:0;cursor:pointer;height:", ";&[aria-disabled='true']{cursor:default;}", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";"], props => math(`(${props.theme.space.base} * 5px) + (${props.theme.shadowWidths.md} * 2)`), StyledLabel$2, StyledHint$2, StyledMessage$2, StyledHint$2, StyledMessage$2, props => math(`${props.theme.space.base} * 2px`), props => retrieveComponentStyles(COMPONENT_ID$7$2, props)); +StyledSlider$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$6$2 = 'forms.slider_thumb'; +const colorStyles$2$2 = props => { + const SHADE = 600; + const backgroundColor = getColor('primaryHue', SHADE, props.theme); + const borderColor = backgroundColor; + const boxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24)); + const activeBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme); + const activeBorderColor = borderColor; + const hoverBackgroundColor = activeBackgroundColor; + const hoverBorderColor = hoverBackgroundColor; + const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme); + const disabledBorderColor = disabledBackgroundColor; + return Ne(["border-color:", ";box-shadow:", ";background-color:", ";&:hover,&[data-garden-hover='true']{border-color:", ";background-color:", ";}", " &:active,&[data-garden-active='true']{border-color:", ";background-color:", ";}&[aria-disabled='true']{border-color:", ";box-shadow:none;background-color:", ";}"], borderColor, boxShadow, backgroundColor, hoverBorderColor, hoverBackgroundColor, focusStyles({ + theme: props.theme + }), activeBorderColor, activeBackgroundColor, disabledBorderColor, disabledBackgroundColor); +}; +const sizeStyles$5$2 = props => { + const size = math(`${props.theme.space.base} * 5px`); + const marginTop = math(`${size} / -2`); + return Ne(["margin-top:", ";width:", ";height:", ";"], marginTop, size, size); +}; +const StyledSliderThumb$1 = Ye.div.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$6$2, + 'data-garden-version': '8.69.1', + 'aria-disabled': props.isDisabled +})).withConfig({ + displayName: "StyledSliderThumb", + componentId: "sc-yspbwa-0" +})(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.position} * 1px`), props => props.theme.borders.md, props => sizeStyles$5$2(props), props => colorStyles$2$2(props), props => retrieveComponentStyles(COMPONENT_ID$6$2, props)); +StyledSliderThumb$1.defaultProps = { + position: 0, + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$5$2 = 'forms.slider_track'; +const colorStyles$1$2 = props => { + const SHADE = 600; + const backgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + const backgroundImageColor = getColor('primaryHue', SHADE, props.theme); + const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme); + return Ne(["background-color:", ";background-image:linear-gradient(", ",", ");&[aria-disabled='true']{background-image:linear-gradient(", ",", ");}"], backgroundColor, backgroundImageColor, backgroundImageColor, disabledBackgroundColor, disabledBackgroundColor); +}; +const sizeStyles$4$2 = props => { + const height = math(`${props.theme.space.base} * 1.5px`); + const backgroundPosition = math(`${props.backgroundPosition} * 1px`); + const backgroundSize = math(`${props.backgroundSize} * 1px`); + const borderRadius = height; + const marginTop = math(`${height} / -2`); + const padding = math(`${props.theme.space.base} * 2.5px`); + return Ne(["margin-top:", ";border-radius:", ";background-position:", ";background-size:", ";padding:0 ", ";"], marginTop, borderRadius, backgroundPosition, backgroundSize, padding); +}; +const StyledSliderTrack$1 = Ye.div.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$5$2, + 'data-garden-version': '8.69.1', + 'aria-disabled': props.isDisabled +})).withConfig({ + displayName: "StyledSliderTrack", + componentId: "sc-aw5m6g-0" +})(["position:absolute;top:50%;box-sizing:border-box;background-origin:content-box;background-repeat:repeat-y;width:100%;", ";", ";", ";"], props => sizeStyles$4$2(props), props => colorStyles$1$2(props), props => retrieveComponentStyles(COMPONENT_ID$5$2, props)); +StyledSliderTrack$1.defaultProps = { + backgroundSize: 0, + backgroundPosition: 0, + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$4$2 = 'forms.slider_track_rail'; +const sizeStyles$3$2 = props => { + const height = math(`${props.theme.space.base} * 1.5px`); + const margin = math(`${props.theme.space.base} * 2.5px`); + return Ne(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? `-${margin}` : margin, props.theme.rtl ? margin : `-${margin}`, height); +}; +const StyledSliderTrackRail$1 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$4$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledSliderTrackRail", + componentId: "sc-1o5owbd-0" +})(["position:relative;", ";", ";"], props => sizeStyles$3$2(props), props => retrieveComponentStyles(COMPONENT_ID$4$2, props)); +StyledSliderTrackRail$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$3$2 = 'forms.tile_icon'; +const sizeStyles$2$2 = props => { + const iconSize = math(`${props.theme.iconSizes.md} * 2`); + let position; + let top; + let horizontalValue; + if (!props.isCentered) { + position = 'absolute'; + top = `${props.theme.space.base * 6}px`; + horizontalValue = `left: ${props.theme.space.base * 5}px`; + if (props.theme.rtl) { + horizontalValue = `right: ${props.theme.space.base * 5}px`; + } + } + return Ne(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize); +}; +const StyledTileIcon$1 = Ye.span.attrs({ + 'data-garden-id': COMPONENT_ID$3$2, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledTileIcon", + componentId: "sc-1wazhg4-0" +})(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], props => sizeStyles$2$2(props), props => retrieveComponentStyles(COMPONENT_ID$3$2, props)); +StyledTileIcon$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$2$4 = 'forms.tile'; +const colorStyles$e = props => { + const SHADE = 600; + const iconColor = getColor('neutralHue', SHADE, props.theme); + const color = getColor('neutralHue', SHADE + 200, props.theme); + const borderColor = getColor('neutralHue', SHADE - 300, props.theme); + const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08); + const hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + const focusBorderColor = hoverBorderColor; + const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2); + const activeBorderColor = focusBorderColor; + const disabledBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme); + const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme); + const disabledColor = getColor('neutralHue', SHADE - 200, props.theme); + const selectedBorderColor = focusBorderColor; + const selectedBackgroundColor = selectedBorderColor; + const selectedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme); + const selectedHoverBackgroundColor = selectedHoverBorderColor; + const selectedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme); + const selectedActiveBackgroundColor = selectedActiveBorderColor; + const selectedDisabledBackgroundColor = disabledBorderColor; + return Ne(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}", " &:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon$1, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon$1, color, focusStyles({ + theme: props.theme, + hue: focusBorderColor, + styles: { + borderColor: focusBorderColor + }, + selector: `&:focus-within` + }), activeBorderColor, activeBackgroundColor, StyledTileIcon$1, color, selectedBorderColor, selectedBackgroundColor, props.theme.colors.background, StyledTileIcon$1, props.theme.colors.background, selectedHoverBorderColor, selectedHoverBackgroundColor, props.theme.colors.background, StyledTileIcon$1, props.theme.colors.background, selectedActiveBorderColor, selectedActiveBackgroundColor, props.theme.colors.background, StyledTileIcon$1, props.theme.colors.background, disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon$1, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon$1, disabledColor); +}; +const StyledTile$1 = Ye.label.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$2$4, + 'data-garden-version': '8.69.1', + 'data-garden-selected': props.isSelected +})).withConfig({ + displayName: "StyledTile", + componentId: "sc-1jjvmxs-0" +})(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";cursor:", ";padding:", "px;direction:", ";min-width:132px;word-break:break-word;", ";", ";"], props => props.theme.borderRadii.md, props => !props.isDisabled && 'pointer', props => props.theme.space.base * 5, props => props.theme.rtl && 'rtl', props => colorStyles$e(props), props => retrieveComponentStyles(COMPONENT_ID$2$4, props)); +StyledTile$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$1$4 = 'forms.tile_description'; +const sizeStyles$1$2 = props => { + let marginDirection = 'left'; + let marginValue; + if (props.theme.rtl) { + marginDirection = 'right'; + } + if (!props.isCentered) { + marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`); + } + return Ne(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue); +}; +const StyledTileDescription$1 = Ye.span.attrs({ + 'data-garden-id': COMPONENT_ID$1$4, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledTileDescription", + componentId: "sc-xfuu7u-0" +})(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => sizeStyles$1$2(props), props => retrieveComponentStyles(COMPONENT_ID$1$4, props)); +StyledTileDescription$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const StyledTileInput$1 = Ye.input.withConfig({ + displayName: "StyledTileInput", + componentId: "sc-1nq2m6q-0" +})(["position:absolute;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]); +StyledTileInput$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$M = 'forms.tile_label'; +const sizeStyles$h = props => { + let marginDirection = 'left'; + let marginTop = `${props.theme.space.base * 2}px`; + let marginValue; + if (props.theme.rtl) { + marginDirection = 'right'; + } + if (!props.isCentered) { + marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`); + marginTop = '0'; + } + return Ne(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue); +}; +const StyledTileLabel$1 = Ye.span.attrs({ + 'data-garden-id': COMPONENT_ID$M, + 'data-garden-version': '8.69.1' +}).withConfig({ + displayName: "StyledTileLabel", + componentId: "sc-1mypv27-0" +})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => sizeStyles$h(props), props => retrieveComponentStyles(COMPONENT_ID$M, props)); +StyledTileLabel$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const Field$2 = React__default.forwardRef((props, ref) => { + const [hasHint, setHasHint] = reactExports.useState(false); + const [hasMessage, setHasMessage] = reactExports.useState(false); + const [isLabelActive, setIsLabelActive] = reactExports.useState(false); + const [isLabelHovered, setIsLabelHovered] = reactExports.useState(false); + const multiThumbRangeRef = reactExports.useRef(null); + const { + getInputProps, + getMessageProps, + ...propGetters + } = useField$1(props.id); + const fieldProps = reactExports.useMemo(() => ({ + ...propGetters, + getInputProps: function (options) { + let describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + return getInputProps(options, { + ...describeOptions, + isDescribed: hasHint, + hasMessage + }); + }, + getMessageProps: options => getMessageProps({ + role: 'alert', + ...options + }), + isLabelActive, + setIsLabelActive, + isLabelHovered, + setIsLabelHovered, + hasHint, + setHasHint, + hasMessage, + setHasMessage, + multiThumbRangeRef + }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]); + return React__default.createElement(FieldContext$2.Provider, { + value: fieldProps + }, React__default.createElement(StyledField$2, _extends$t$1({}, props, { + ref: ref + }))); +}); +Field$2.displayName = 'Field'; + +const FieldsetContext$1 = reactExports.createContext(undefined); +const useFieldsetContext$1 = () => { + const fieldsetContext = reactExports.useContext(FieldsetContext$1); + return fieldsetContext; +}; + +const LegendComponent$1 = reactExports.forwardRef((props, ref) => { + const fieldsetContext = useFieldsetContext$1(); + return React__default.createElement(StyledLegend$1, _extends$t$1({}, props, fieldsetContext, { + ref: ref + })); +}); +LegendComponent$1.displayName = 'Fieldset.Legend'; +const Legend$1 = LegendComponent$1; + +const FieldsetComponent$1 = reactExports.forwardRef((props, ref) => { + const fieldsetContext = reactExports.useMemo(() => ({ + isCompact: props.isCompact + }), [props.isCompact]); + return React__default.createElement(FieldsetContext$1.Provider, { + value: fieldsetContext + }, React__default.createElement(StyledFieldset$1, _extends$t$1({}, props, { + ref: ref + }))); +}); +FieldsetComponent$1.displayName = 'Fieldset'; +FieldsetComponent$1.propTypes = { + isCompact: PropTypes.bool +}; +const Fieldset$1 = FieldsetComponent$1; +Fieldset$1.Legend = Legend$1; + +const InputContext$1 = reactExports.createContext(undefined); +const useInputContext$1 = () => { + return reactExports.useContext(InputContext$1); +}; + +const Hint$2 = React__default.forwardRef((props, ref) => { + const { + hasHint, + setHasHint, + getHintProps + } = useFieldContext$2() || {}; + const type = useInputContext$1(); + reactExports.useEffect(() => { + if (!hasHint && setHasHint) { + setHasHint(true); + } + return () => { + if (hasHint && setHasHint) { + setHasHint(false); + } + }; + }, [hasHint, setHasHint]); + let HintComponent; + if (type === 'checkbox') { + HintComponent = StyledCheckHint$1; + } else if (type === 'radio') { + HintComponent = StyledRadioHint$1; + } else if (type === 'toggle') { + HintComponent = StyledToggleHint$1; + } else { + HintComponent = StyledHint$2; + } + let combinedProps = props; + if (getHintProps) { + combinedProps = getHintProps(combinedProps); + } + return React__default.createElement(HintComponent, _extends$t$1({ + ref: ref + }, combinedProps)); +}); +Hint$2.displayName = 'Hint'; + +const Label$1$1 = React__default.forwardRef((props, ref) => { + const fieldContext = useFieldContext$2(); + const fieldsetContext = useFieldsetContext$1(); + const type = useInputContext$1(); + let combinedProps = props; + if (fieldContext) { + combinedProps = fieldContext.getLabelProps(combinedProps); + if (type === undefined) { + const { + setIsLabelActive, + setIsLabelHovered, + multiThumbRangeRef + } = fieldContext; + combinedProps = { + ...combinedProps, + onMouseUp: composeEventHandlers$2(props.onMouseUp, () => { + setIsLabelActive(false); + }), + onMouseDown: composeEventHandlers$2(props.onMouseDown, () => { + setIsLabelActive(true); + }), + onMouseEnter: composeEventHandlers$2(props.onMouseEnter, () => { + setIsLabelHovered(true); + }), + onMouseLeave: composeEventHandlers$2(props.onMouseLeave, () => { + setIsLabelHovered(false); + }), + onClick: composeEventHandlers$2(props.onClick, () => { + multiThumbRangeRef.current && multiThumbRangeRef.current.focus(); + }) + }; + } + } + if (fieldsetContext) { + combinedProps = { + ...combinedProps, + isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular + }; + } + if (type === 'radio') { + return React__default.createElement(StyledRadioLabel$1, _extends$t$1({ + ref: ref + }, combinedProps), React__default.createElement(StyledRadioSvg$1, null), props.children); + } else if (type === 'checkbox') { + const onLabelSelect = e => { + const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; + if (fieldContext && isFirefox && e.target instanceof Element) { + const inputId = e.target.getAttribute('for'); + if (!inputId) return; + const input = document.getElementById(inputId); + if (input && input.type === 'checkbox') { + if (e.shiftKey) { + input.click(); + input.checked = true; + } + input.focus(); + } + } + }; + combinedProps = { + ...combinedProps, + onClick: composeEventHandlers$2(combinedProps.onClick, onLabelSelect) + }; + return React__default.createElement(StyledCheckLabel$1, _extends$t$1({ + ref: ref + }, combinedProps), React__default.createElement(StyledCheckSvg$1, null), React__default.createElement(StyledDashSvg$1, null), props.children); + } else if (type === 'toggle') { + return React__default.createElement(StyledToggleLabel$1, _extends$t$1({ + ref: ref + }, combinedProps), React__default.createElement(StyledToggleSvg$1, null), props.children); + } + return React__default.createElement(StyledLabel$2, _extends$t$1({ + ref: ref + }, combinedProps)); +}); +Label$1$1.displayName = 'Label'; +Label$1$1.propTypes = { + isRegular: PropTypes.bool +}; + +const VALIDATION$1 = ['success', 'warning', 'error']; +const FILE_VALIDATION$1 = ['success', 'error']; +const FILE_TYPE$1 = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic']; + +const Message$2 = React__default.forwardRef((_ref, ref) => { + let { + validation, + validationLabel, + children, + ...props + } = _ref; + const { + hasMessage, + setHasMessage, + getMessageProps + } = useFieldContext$2() || {}; + const type = useInputContext$1(); + reactExports.useEffect(() => { + if (!hasMessage && setHasMessage) { + setHasMessage(true); + } + return () => { + if (hasMessage && setHasMessage) { + setHasMessage(false); + } + }; + }, [hasMessage, setHasMessage]); + let MessageComponent; + if (type === 'checkbox') { + MessageComponent = StyledCheckMessage$1; + } else if (type === 'radio') { + MessageComponent = StyledRadioMessage$1; + } else if (type === 'toggle') { + MessageComponent = StyledToggleMessage$1; + } else { + MessageComponent = StyledMessage$2; + } + let combinedProps = { + validation, + validationLabel, + ...props + }; + if (getMessageProps) { + combinedProps = getMessageProps(combinedProps); + } + const ariaLabel = useText(Message$2, combinedProps, 'validationLabel', validation, validation !== undefined); + return React__default.createElement(MessageComponent, _extends$t$1({ + ref: ref + }, combinedProps), validation && React__default.createElement(StyledMessageIcon$1, { + validation: validation, + "aria-label": ariaLabel + }), children); +}); +Message$2.displayName = 'Message'; +Message$2.propTypes = { + validation: PropTypes.oneOf(VALIDATION$1), + validationLabel: PropTypes.string +}; + +const Checkbox$1 = React__default.forwardRef((_ref, ref) => { + let { + indeterminate, + children, + ...props + } = _ref; + const fieldsetContext = useFieldsetContext$1(); + const fieldContext = useFieldContext$2(); + const inputRef = inputElement => { + inputElement && (inputElement.indeterminate = indeterminate); + }; + const combinedRef = inputElement => { + [inputRef, ref].forEach(targetRef => { + if (targetRef) { + if (typeof targetRef === 'function') { + targetRef(inputElement); + } else { + targetRef.current = inputElement; + } + } + }); + }; + let combinedProps = { + ref: combinedRef, + ...props, + ...fieldsetContext + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React__default.createElement(InputContext$1.Provider, { + value: "checkbox" + }, React__default.createElement(StyledCheckInput$1, combinedProps), children); +}); +Checkbox$1.displayName = 'Checkbox'; +Checkbox$1.propTypes = { + isCompact: PropTypes.bool, + indeterminate: PropTypes.bool +}; + +const InputGroupContext$1 = reactExports.createContext(undefined); +const useInputGroupContext$1 = () => { + return reactExports.useContext(InputGroupContext$1); +}; + +const Input$1 = React__default.forwardRef((_ref, ref) => { + let { + onSelect, + ...props + } = _ref; + const fieldContext = useFieldContext$2(); + const inputGroupContext = useInputGroupContext$1(); + const onSelectHandler = props.readOnly ? composeEventHandlers$2(onSelect, event => { + event.currentTarget.select(); + }) : onSelect; + let combinedProps = { + ref, + onSelect: onSelectHandler, + ...props + }; + if (inputGroupContext) { + combinedProps = { + ...combinedProps, + isCompact: inputGroupContext.isCompact || combinedProps.isCompact, + focusInset: props.focusInset === undefined ? true : props.focusInset + }; + } + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React__default.createElement(StyledTextInput$1, combinedProps); +}); +Input$1.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + validation: PropTypes.oneOf(VALIDATION$1) +}; +Input$1.displayName = 'Input'; + +const Radio$1 = React__default.forwardRef((_ref, ref) => { + let { + children, + ...props + } = _ref; + const fieldsetContext = useFieldsetContext$1(); + const fieldContext = useFieldContext$2(); + let combinedProps = { + ref, + ...props, + ...fieldsetContext + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React__default.createElement(InputContext$1.Provider, { + value: "radio" + }, React__default.createElement(StyledRadioInput$1, combinedProps), children); +}); +Radio$1.displayName = 'Radio'; +Radio$1.propTypes = { + isCompact: PropTypes.bool +}; + +const Range$1 = React__default.forwardRef((_ref, ref) => { + let { + hasLowerTrack, + min, + max, + step, + ...props + } = _ref; + const [backgroundSize, setBackgroundSize] = reactExports.useState('0'); + const rangeRef = reactExports.useRef(); + const fieldContext = useFieldContext$2(); + const updateBackgroundWidthFromInput = reactExports.useCallback(rangeTarget => { + let relativeMax = max; + const { + value + } = rangeTarget; + if (parseFloat(relativeMax) < parseFloat(min)) { + relativeMax = 100; + } + const percentage = 100 * (value - min) / (relativeMax - min); + setBackgroundSize(`${percentage}%`); + }, + [max, min, step]); + reactExports.useEffect(() => { + updateBackgroundWidthFromInput(rangeRef.current); + }, [rangeRef, updateBackgroundWidthFromInput, props.value]); + const onChange = hasLowerTrack ? composeEventHandlers$2(props.onChange, event => { + updateBackgroundWidthFromInput(event.target); + }) : props.onChange; + let combinedProps = { + ref: mergeRefs([rangeRef, ref]), + hasLowerTrack, + min, + max, + step, + backgroundSize, + ...props, + onChange + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps, { + isDescribed: true + }); + } + return React__default.createElement(StyledRangeInput$1, combinedProps); +}); +Range$1.defaultProps = { + hasLowerTrack: true, + min: 0, + max: 100, + step: 1 +}; +Range$1.displayName = 'Range'; + +const parseStyleValue$1 = value => { + return parseInt(value, 10) || 0; +}; +const Textarea$1 = React__default.forwardRef((_ref, ref) => { + let { + minRows, + maxRows, + style, + onChange, + onSelect, + ...props + } = _ref; + const fieldContext = useFieldContext$2(); + const textAreaRef = reactExports.useRef(); + const shadowTextAreaRef = reactExports.useRef(null); + const [state, setState] = reactExports.useState({ + overflow: false, + height: 0 + }); + const isControlled = props.value !== null && props.value !== undefined; + const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable; + const calculateHeight = reactExports.useCallback(() => { + if (!isAutoResizable) { + return; + } + const textarea = textAreaRef.current; + const computedStyle = window.getComputedStyle(textarea); + const shadowTextArea = shadowTextAreaRef.current; + shadowTextArea.style.width = computedStyle.width; + shadowTextArea.value = textarea.value || textarea.placeholder || ' '; + const boxSizing = computedStyle.boxSizing; + const padding = parseStyleValue$1(computedStyle.paddingBottom) + parseStyleValue$1(computedStyle.paddingTop); + const border = parseStyleValue$1(computedStyle.borderTopWidth) + parseStyleValue$1(computedStyle.borderBottomWidth); + const innerHeight = shadowTextArea.scrollHeight - padding; + shadowTextArea.value = 'x'; + const singleRowHeight = shadowTextArea.scrollHeight - padding; + let outerHeight = innerHeight; + if (minRows) { + outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight); + } + if (maxRows) { + outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight); + } + outerHeight = Math.max(outerHeight, singleRowHeight); + const updatedHeight = outerHeight + (boxSizing === 'border-box' ? padding + border : 0); + const overflow = Math.abs(outerHeight - innerHeight) <= 1; + setState(prevState => { + if (updatedHeight > 0 && Math.abs((prevState.height || 0) - updatedHeight) > 1 || prevState.overflow !== overflow) { + return { + overflow, + height: updatedHeight + }; + } + return prevState; + }); + }, [maxRows, minRows, textAreaRef, isAutoResizable]); + const onChangeHandler = reactExports.useCallback(e => { + if (!isControlled) { + calculateHeight(); + } + if (onChange) { + onChange(e); + } + }, [calculateHeight, isControlled, onChange]); + const theme = reactExports.useContext(Be); + const environment = useDocument(theme); + reactExports.useEffect(() => { + if (!isAutoResizable) { + return undefined; + } + if (environment) { + const win = environment.defaultView || window; + const resizeHandler = debounce$3(calculateHeight); + win.addEventListener('resize', resizeHandler); + return () => { + resizeHandler.cancel(); + win.removeEventListener('resize', resizeHandler); + }; + } + return undefined; + }, [calculateHeight, isAutoResizable, environment]); + reactExports.useLayoutEffect(() => { + calculateHeight(); + }); + const computedStyle = {}; + if (isAutoResizable) { + computedStyle.height = state.height; + computedStyle.overflow = state.overflow ? 'hidden' : undefined; + } + const onSelectHandler = props.readOnly ? composeEventHandlers$2(onSelect, event => { + event.currentTarget.select(); + }) : onSelect; + let combinedProps = { + ref: mergeRefs([textAreaRef, ref]), + rows: minRows, + onChange: onChangeHandler, + onSelect: onSelectHandler, + style: { + ...computedStyle, + ...style + }, + ...props + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps, { + isDescribed: true + }); + } + return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTextarea$1, combinedProps), isAutoResizable && React__default.createElement(StyledTextarea$1, { + "aria-hidden": true, + readOnly: true, + isHidden: true, + className: props.className, + ref: shadowTextAreaRef, + tabIndex: -1, + isBare: props.isBare, + isCompact: props.isCompact, + style: style + })); +}); +Textarea$1.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + isResizable: PropTypes.bool, + minRows: PropTypes.number, + maxRows: PropTypes.number, + validation: PropTypes.oneOf(VALIDATION$1) +}; +Textarea$1.displayName = 'Textarea'; + +const Toggle$1 = React__default.forwardRef((_ref, ref) => { + let { + children, + ...props + } = _ref; + const fieldsetContext = useFieldsetContext$1(); + const fieldContext = useFieldContext$2(); + let combinedProps = { + ref, + ...props, + ...fieldsetContext + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React__default.createElement(InputContext$1.Provider, { + value: "toggle" + }, React__default.createElement(StyledToggleInput$1, combinedProps), children); +}); +Toggle$1.displayName = 'Toggle'; +Toggle$1.propTypes = { + isCompact: PropTypes.bool +}; + +var _path$k$1; +function _extends$l$1() { _extends$l$1 = Object.assign ? Object.assign.bind() : 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$l$1.apply(this, arguments); } +var SvgChevronDownStroke$2 = function SvgChevronDownStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$l$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$k$1 || (_path$k$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "currentColor", + d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z" + }))); +}; + +const StartIconComponent$1 = props => React__default.createElement(StyledTextMediaFigure$1, _extends$t$1({ + position: "start" +}, props)); +StartIconComponent$1.displayName = 'FauxInput.StartIcon'; +const StartIcon$1 = StartIconComponent$1; + +const EndIconComponent$1 = props => React__default.createElement(StyledTextMediaFigure$1, _extends$t$1({ + position: "end" +}, props)); +EndIconComponent$1.displayName = 'FauxInput.EndIcon'; +const EndIcon$1 = EndIconComponent$1; + +const FauxInputComponent$1 = reactExports.forwardRef((_ref, ref) => { + let { + onFocus, + onBlur, + disabled, + readOnly, + isFocused: controlledIsFocused, + ...props + } = _ref; + const [isFocused, setIsFocused] = reactExports.useState(false); + const onFocusHandler = composeEventHandlers$2(onFocus, () => { + setIsFocused(true); + }); + const onBlurHandler = composeEventHandlers$2(onBlur, () => { + setIsFocused(false); + }); + return React__default.createElement(StyledTextFauxInput$1, _extends$t$1({ + onFocus: onFocusHandler, + onBlur: onBlurHandler, + isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused, + isReadOnly: readOnly, + isDisabled: disabled, + tabIndex: disabled ? undefined : 0 + }, props, { + ref: ref + })); +}); +FauxInputComponent$1.displayName = 'FauxInput'; +FauxInputComponent$1.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + disabled: PropTypes.bool, + readOnly: PropTypes.bool, + validation: PropTypes.oneOf(VALIDATION$1), + isFocused: PropTypes.bool, + isHovered: PropTypes.bool +}; +const FauxInput$1 = FauxInputComponent$1; +FauxInput$1.EndIcon = EndIcon$1; +FauxInput$1.StartIcon = StartIcon$1; + +const Select$1 = React__default.forwardRef((_ref, ref) => { + let { + disabled, + isCompact, + validation, + focusInset, + isBare, + ...props + } = _ref; + const fieldContext = useFieldContext$2(); + let combinedProps = { + disabled, + isBare, + isCompact, + validation, + focusInset, + ref, + ...props + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps, { + isDescribed: true + }); + } + return React__default.createElement(StyledSelectWrapper$1, { + isCompact: isCompact, + isBare: isBare, + validation: validation, + focusInset: focusInset + }, React__default.createElement(StyledSelect$1, combinedProps), !isBare && React__default.createElement(FauxInput$1.EndIcon, { + isDisabled: disabled + }, React__default.createElement(SvgChevronDownStroke$2, null))); +}); +Select$1.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + validation: PropTypes.oneOf(VALIDATION$1) +}; +Select$1.displayName = 'Select'; + +const MIN$1 = 0; +const MAX$1 = 100; +const MultiThumbRange$1 = reactExports.forwardRef((_ref, ref) => { + let { + min = MIN$1, + max = MAX$1, + minValue, + maxValue, + disabled, + step, + jump, + onChange, + onMouseDown, + ...props + } = _ref; + const theme = reactExports.useContext(Be); + const environment = useDocument(theme); + const trackRailRef = reactExports.useRef(null); + const minThumbRef = reactExports.useRef(null); + const maxThumbRef = reactExports.useRef(null); + const { + getTrackProps, + getMinThumbProps, + getMaxThumbProps, + trackRect, + minValue: updatedMinValue, + maxValue: updatedMaxValue + } = useSlider({ + trackRef: trackRailRef, + minThumbRef, + maxThumbRef, + min, + max, + minValue, + maxValue, + onChange, + step, + jump, + disabled, + rtl: theme.rtl, + environment + }); + const { + onMouseDown: onSliderMouseDown, + ...trackProps + } = getTrackProps({ + onMouseDown + }); + const fieldContext = useFieldContext$2(); + const { + isLabelHovered, + isLabelActive, + multiThumbRangeRef + } = fieldContext || {}; + reactExports.useEffect(() => { + if (multiThumbRangeRef) { + multiThumbRangeRef.current = minThumbRef.current; + } + }, [multiThumbRangeRef]); + const minPosition = (updatedMinValue - min) / (max - min) * trackRect.width; + const maxPosition = (updatedMaxValue - min) / (max - min) * trackRect.width; + const sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition); + return React__default.createElement(StyledSlider$1, _extends$t$1({ + ref: ref, + onMouseDown: onSliderMouseDown + }, props), React__default.createElement(StyledSliderTrack$1, { + backgroundSize: sliderBackgroundSize, + backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition, + isDisabled: disabled + }, React__default.createElement(StyledSliderTrackRail$1, _extends$t$1({}, trackProps, { + ref: trackRailRef + }), React__default.createElement(StyledSliderThumb$1, _extends$t$1({}, getMinThumbProps({ + 'aria-label': updatedMinValue + }), { + isDisabled: disabled, + position: minPosition, + ref: minThumbRef, + "data-garden-active": isLabelActive, + "data-garden-hover": isLabelHovered + })), React__default.createElement(StyledSliderThumb$1, _extends$t$1({}, getMaxThumbProps({ + 'aria-label': updatedMaxValue + }), { + isDisabled: disabled, + position: maxPosition, + ref: maxThumbRef + }))))); +}); +MultiThumbRange$1.displayName = 'MultiThumbRange'; +MultiThumbRange$1.propTypes = { + min: PropTypes.number, + max: PropTypes.number, + minValue: PropTypes.number, + maxValue: PropTypes.number, + step: PropTypes.number, + jump: PropTypes.number, + disabled: PropTypes.bool, + onChange: PropTypes.func +}; +MultiThumbRange$1.defaultProps = { + min: MIN$1, + max: MAX$1, + step: 1 +}; + +const TilesContext$1 = reactExports.createContext(undefined); +const useTilesContext$1 = () => { + return reactExports.useContext(TilesContext$1); +}; + +const TileComponent$1 = React__default.forwardRef((_ref, ref) => { + let { + children, + value, + disabled, + ...props + } = _ref; + const tilesContext = useTilesContext$1(); + const inputRef = reactExports.useRef(null); + let inputProps; + if (tilesContext) { + inputProps = { + name: tilesContext.name, + checked: tilesContext.value === value, + onChange: tilesContext.onChange + }; + } + return React__default.createElement(StyledTile$1, _extends$t$1({ + ref: ref, + "aria-disabled": disabled, + isDisabled: disabled, + isSelected: tilesContext && tilesContext.value === value + }, props), children, React__default.createElement(StyledTileInput$1, _extends$t$1({}, inputProps, { + disabled: disabled, + value: value, + type: "radio", + ref: inputRef + }))); +}); +TileComponent$1.displayName = 'Tiles.Tile'; +TileComponent$1.propTypes = { + value: PropTypes.string, + disabled: PropTypes.bool +}; +const Tile$1 = TileComponent$1; + +const DescriptionComponent$1 = reactExports.forwardRef((props, ref) => { + const tilesContext = useTilesContext$1(); + return React__default.createElement(StyledTileDescription$1, _extends$t$1({ + ref: ref, + isCentered: tilesContext && tilesContext.isCentered + }, props)); +}); +DescriptionComponent$1.displayName = 'Tiles.Description'; +const Description$1 = DescriptionComponent$1; + +const IconComponent$1 = reactExports.forwardRef((props, ref) => { + const tileContext = useTilesContext$1(); + return React__default.createElement(StyledTileIcon$1, _extends$t$1({ + ref: ref, + isCentered: tileContext && tileContext.isCentered + }, props)); +}); +IconComponent$1.displayName = 'Tiles.Icon'; +const Icon$1 = IconComponent$1; + +const LabelComponent$1 = reactExports.forwardRef((props, forwardedRef) => { + const [title, setTitle] = reactExports.useState(''); + const ref = reactExports.useRef(); + const tilesContext = useTilesContext$1(); + reactExports.useEffect(() => { + if (ref.current) { + setTitle(ref.current.textContent || undefined); + } + }, [ref]); + return React__default.createElement(StyledTileLabel$1, _extends$t$1({ + ref: mergeRefs([ref, forwardedRef]), + title: title, + isCentered: tilesContext && tilesContext.isCentered + }, props)); +}); +LabelComponent$1.displayName = 'Tiles.Label'; +const Label$3 = LabelComponent$1; + +const TilesComponent$1 = reactExports.forwardRef((_ref, ref) => { + let { + onChange, + value: controlledValue, + name, + isCentered, + ...props + } = _ref; + const [value, setValue] = reactExports.useState(controlledValue); + const handleOnChange = reactExports.useCallback(function () { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + setValue(args[0].target.value); + if (onChange) { + onChange(...args); + } + }, [onChange]); + const selectedValue = getControlledValue(controlledValue, value); + const tileContext = reactExports.useMemo(() => ({ + onChange: handleOnChange, + value: selectedValue, + name, + isCentered + }), [handleOnChange, selectedValue, name, isCentered]); + return React__default.createElement(TilesContext$1.Provider, { + value: tileContext + }, React__default.createElement("div", _extends$t$1({ + ref: ref, + role: "radiogroup" + }, props))); +}); +TilesComponent$1.displayName = 'Tiles'; +TilesComponent$1.propTypes = { + value: PropTypes.string, + onChange: PropTypes.func, + name: PropTypes.string.isRequired, + isCentered: PropTypes.bool +}; +TilesComponent$1.defaultProps = { + isCentered: true +}; +const Tiles$1 = TilesComponent$1; +Tiles$1.Description = Description$1; +Tiles$1.Icon = Icon$1; +Tiles$1.Label = Label$3; +Tiles$1.Tile = Tile$1; + +const InputGroup$1 = React__default.forwardRef((_ref, ref) => { + let { + isCompact, + ...props + } = _ref; + const contextValue = reactExports.useMemo(() => ({ + isCompact + }), [isCompact]); + return React__default.createElement(InputGroupContext$1.Provider, { + value: contextValue + }, React__default.createElement(StyledInputGroup$2, _extends$t$1({ + ref: ref, + isCompact: isCompact + }, props))); +}); +InputGroup$1.displayName = 'InputGroup'; +InputGroup$1.propTypes = { + isCompact: PropTypes.bool +}; + +const FileUpload$1 = React__default.forwardRef((_ref, ref) => { + let { + disabled, + ...props + } = _ref; + return ( + React__default.createElement(StyledFileUpload$1, _extends$t$1({ + ref: ref, + "aria-disabled": disabled + }, props, { + role: "button" + })) + ); +}); +FileUpload$1.propTypes = { + isDragging: PropTypes.bool, + isCompact: PropTypes.bool, + disabled: PropTypes.bool +}; +FileUpload$1.displayName = 'FileUpload'; + +const ItemComponent$1 = reactExports.forwardRef((_ref, ref) => { + let { + ...props + } = _ref; + return React__default.createElement(StyledFileListItem$1, _extends$t$1({}, props, { + ref: ref + })); +}); +ItemComponent$1.displayName = 'FileList.Item'; +const Item$1 = ItemComponent$1; + +const FileListComponent$1 = reactExports.forwardRef((_ref, ref) => { + let { + ...props + } = _ref; + return React__default.createElement(StyledFileList$1, _extends$t$1({}, props, { + ref: ref + })); +}); +FileListComponent$1.displayName = 'FileList'; +const FileList$1 = FileListComponent$1; +FileList$1.Item = Item$1; + +var _path$j$1; +function _extends$k$1() { _extends$k$1 = Object.assign ? Object.assign.bind() : 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$k$1.apply(this, arguments); } +var SvgXStroke$1$1 = function SvgXStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$k$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$j$1 || (_path$j$1 = /*#__PURE__*/reactExports.createElement("path", { + stroke: "currentColor", + strokeLinecap: "round", + d: "M3 9l6-6m0 6L3 3" + }))); +}; + +var _path$i$1; +function _extends$j$1() { _extends$j$1 = Object.assign ? Object.assign.bind() : 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$j$1.apply(this, arguments); } +var SvgXStroke$3 = function SvgXStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$j$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$i$1 || (_path$i$1 = /*#__PURE__*/reactExports.createElement("path", { + stroke: "currentColor", + strokeLinecap: "round", + d: "M3 13L13 3m0 10L3 3" + }))); +}; + +const FileContext$1 = reactExports.createContext(undefined); +const useFileContext$1 = () => { + return reactExports.useContext(FileContext$1); +}; + +const CloseComponent$2 = React__default.forwardRef((props, ref) => { + const fileContext = useFileContext$1(); + const onMouseDown = composeEventHandlers$2(props.onMouseDown, event => event.preventDefault() + ); + const ariaLabel = useText(CloseComponent$2, props, 'aria-label', 'Close'); + return React__default.createElement(StyledFileClose$1, _extends$t$1({ + ref: ref, + "aria-label": ariaLabel + }, props, { + type: "button", + tabIndex: -1, + onMouseDown: onMouseDown + }), fileContext && fileContext.isCompact ? React__default.createElement(SvgXStroke$1$1, null) : React__default.createElement(SvgXStroke$3, null)); +}); +CloseComponent$2.displayName = 'File.Close'; +const Close$2 = CloseComponent$2; + +var _path$h$1; +function _extends$i$1() { _extends$i$1 = Object.assign ? Object.assign.bind() : 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$i$1.apply(this, arguments); } +var SvgTrashStroke$1$1 = function SvgTrashStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$i$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$h$1 || (_path$h$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M4.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M2 2.5h8m-5.5 7V5m3 4.5V5m-5-.5V11c0 .3.2.5.5.5h6c.3 0 .5-.2.5-.5V4.5" + }))); +}; + +var _path$g$1; +function _extends$h$1() { _extends$h$1 = Object.assign ? Object.assign.bind() : 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$h$1.apply(this, arguments); } +var SvgTrashStroke$2 = function SvgTrashStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$h$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$g$1 || (_path$g$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M6.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M3 2.5h10m-6.5 11v-8m3 8v-8m-6-1V15c0 .3.2.5.5.5h8c.3 0 .5-.2.5-.5V4.5" + }))); +}; + +const DeleteComponent$1 = React__default.forwardRef((props, ref) => { + const fileContext = useFileContext$1(); + const onMouseDown = composeEventHandlers$2(props.onMouseDown, event => event.preventDefault() + ); + const ariaLabel = useText(DeleteComponent$1, props, 'aria-label', 'Delete'); + return React__default.createElement(StyledFileDelete$1, _extends$t$1({ + ref: ref, + "aria-label": ariaLabel + }, props, { + type: "button", + tabIndex: -1, + onMouseDown: onMouseDown + }), fileContext && fileContext.isCompact ? React__default.createElement(SvgTrashStroke$1$1, null) : React__default.createElement(SvgTrashStroke$2, null)); +}); +DeleteComponent$1.displayName = 'File.Delete'; +const Delete$1 = DeleteComponent$1; + +var _path$f$1, _rect$1$1; +function _extends$g$1() { _extends$g$1 = Object.assign ? Object.assign.bind() : 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$g$1.apply(this, arguments); } +var SvgFilePdfStroke$1$1 = function SvgFilePdfStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$g$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$f$1 || (_path$f$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M10.5 3.21V11a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h5.79a.5.5 0 01.35.15l2.21 2.21a.5.5 0 01.15.35zM7.5.5V3a.5.5 0 00.5.5h2.5m-7 6h5" + })), _rect$1$1 || (_rect$1$1 = /*#__PURE__*/reactExports.createElement("rect", { + width: 6, + height: 3, + x: 3, + y: 5, + fill: "currentColor", + rx: 0.5, + ry: 0.5 + }))); +}; + +var _path$e$1; +function _extends$f$1() { _extends$f$1 = Object.assign ? Object.assign.bind() : 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$f$1.apply(this, arguments); } +var SvgFileZipStroke$1$1 = function SvgFileZipStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$f$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$e$1 || (_path$e$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M4.5.5v8m0-6h1m-2 1h1m0 1h1m-2 1h1m0 1h1m-2 1h1m6-4.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _path$d$1, _circle$1$1; +function _extends$e$1() { _extends$e$1 = Object.assign ? Object.assign.bind() : 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$e$1.apply(this, arguments); } +var SvgFileImageStroke$1$1 = function SvgFileImageStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$e$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$d$1 || (_path$d$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + strokeLinejoin: "round", + d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5m-7 6L5 8l1.5 1.5 1-1 1 1" + })), _circle$1$1 || (_circle$1$1 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 8, + cy: 6, + r: 1, + fill: "currentColor" + }))); +}; + +var _path$c$1; +function _extends$d$1() { _extends$d$1 = Object.assign ? Object.assign.bind() : 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$d$1.apply(this, arguments); } +var SvgFileDocumentStroke$1$1 = function SvgFileDocumentStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$d$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$c$1 || (_path$c$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M3.5 5.5h5m-5 2h5m-5 2h5m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _path$b$1; +function _extends$c$1() { _extends$c$1 = Object.assign ? Object.assign.bind() : 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$c$1.apply(this, arguments); } +var SvgFileSpreadsheetStroke$1$1 = function SvgFileSpreadsheetStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$c$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$b$1 || (_path$b$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M3.5 5.5h1m-1 2h1m-1 2h1m2-4h2m-2 2h2m-2 2h2m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _path$a$1; +function _extends$b$1() { _extends$b$1 = Object.assign ? Object.assign.bind() : 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$b$1.apply(this, arguments); } +var SvgFilePresentationStroke$1$1 = function SvgFilePresentationStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$b$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$a$1 || (_path$a$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM6 9.5h2c.28 0 .5-.22.5-.5V8c0-.28-.22-.5-.5-.5H6c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm-2-2h2c.28 0 .5-.22.5-.5V6c0-.28-.22-.5-.5-.5H4c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm3.5-7V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _path$9$1; +function _extends$a$1() { _extends$a$1 = Object.assign ? Object.assign.bind() : 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$a$1.apply(this, arguments); } +var SvgFileGenericStroke$1$1 = function SvgFileGenericStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$a$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$9$1 || (_path$9$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _g$3; +function _extends$9$1() { _extends$9$1 = Object.assign ? Object.assign.bind() : 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$9$1.apply(this, arguments); } +var SvgCheckCircleStroke$2 = function SvgCheckCircleStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$9$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _g$3 || (_g$3 = /*#__PURE__*/reactExports.createElement("g", { + fill: "none", + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("path", { + strokeLinecap: "round", + strokeLinejoin: "round", + d: "M3.5 6l2 2L9 4.5" + }), /*#__PURE__*/reactExports.createElement("circle", { + cx: 6, + cy: 6, + r: 5.5 + })))); +}; + +var _path$8$1; +function _extends$8$2() { _extends$8$2 = Object.assign ? Object.assign.bind() : 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$8$2.apply(this, arguments); } +var SvgFileErrorStroke$1$1 = function SvgFileErrorStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$8$2({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$8$1 || (_path$8$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5M4 9.5l4-4m0 4l-4-4" + }))); +}; + +var _path$7$1, _rect$2; +function _extends$7$2() { _extends$7$2 = Object.assign ? Object.assign.bind() : 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$7$2.apply(this, arguments); } +var SvgFilePdfStroke$2 = function SvgFilePdfStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$7$2({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$7$1 || (_path$7$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M14.5 4.2V15a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h8.85a.5.5 0 01.36.15l3.15 3.2a.5.5 0 01.14.35zm-10 8.3h7m-7-2h7m-1-10V4a.5.5 0 00.5.5h3.5" + })), _rect$2 || (_rect$2 = /*#__PURE__*/reactExports.createElement("rect", { + width: 8, + height: 2, + x: 4, + y: 7, + fill: "currentColor", + rx: 0.5, + ry: 0.5 + }))); +}; + +var _path$6$1; +function _extends$6$2() { _extends$6$2 = Object.assign ? Object.assign.bind() : 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$6$2.apply(this, arguments); } +var SvgFileZipStroke$2 = function SvgFileZipStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$6$2({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$6$1 || (_path$6$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M6.5.5v11M5 2.5h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m8-6.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5" + }))); +}; + +var _path$5$2, _circle$6; +function _extends$5$2() { _extends$5$2 = Object.assign ? Object.assign.bind() : 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$5$2.apply(this, arguments); } +var SvgFileImageStroke$2 = function SvgFileImageStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$5$2({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$5$2 || (_path$5$2 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5m-11 9l2.65-2.65c.2-.2.51-.2.71 0l1.79 1.79c.2.2.51.2.71 0l.79-.79c.2-.2.51-.2.71 0l1.65 1.65" + })), _circle$6 || (_circle$6 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 10.5, + cy: 8.5, + r: 1.5, + fill: "currentColor" + }))); +}; + +var _path$4$2; +function _extends$4$2() { _extends$4$2 = Object.assign ? Object.assign.bind() : 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$4$2.apply(this, arguments); } +var SvgFileDocumentStroke$2 = function SvgFileDocumentStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$4$2({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$4$2 || (_path$4$2 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M4.5 7.5h7m-7 1.97h7m-7 2h7m3-7.27V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5" + }))); +}; + +var _path$3$2; +function _extends$3$2() { _extends$3$2 = Object.assign ? Object.assign.bind() : 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$3$2.apply(this, arguments); } +var SvgFileSpreadsheetStroke$2 = function SvgFileSpreadsheetStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$3$2({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$3$2 || (_path$3$2 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M4.5 7.5h2m-2 2h2m-2 2h2m2-4h3m-3 2h3m-3 2h3m3-7.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5" + }))); +}; + +var _path$2$2; +function _extends$2$2() { _extends$2$2 = Object.assign ? Object.assign.bind() : 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$2$2.apply(this, arguments); } +var SvgFilePresentationStroke$2 = function SvgFilePresentationStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$2$2({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$2$2 || (_path$2$2 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5M7 9.5h4c.28 0 .5.22.5.5v3c0 .28-.22.5-.5.5H7c-.28 0-.5-.22-.5-.5v-3c0-.28.22-.5.5-.5zm-.5 2H5c-.28 0-.5-.22-.5-.5V8c0-.28.22-.5.5-.5h4c.28 0 .5.22.5.5v1.5" + }))); +}; + +var _path$1$2; +function _extends$1$3() { _extends$1$3 = Object.assign ? Object.assign.bind() : 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$3.apply(this, arguments); } +var SvgFileGenericStroke$2 = function SvgFileGenericStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$1$3({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$1$2 || (_path$1$2 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5" + }))); +}; + +var _path$p; +function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : 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$v.apply(this, arguments); } +var SvgFileErrorStroke$2 = function SvgFileErrorStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$v({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$p || (_path$p = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M14.5 4.205V15a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h8.853a.5.5 0 01.356.15l3.148 3.204a.5.5 0 01.143.35zM10.5.5V4a.5.5 0 00.5.5h3.5m-9 8l5-5m0 5l-5-5" + }))); +}; + +const fileIconsDefault$1 = { + pdf: React__default.createElement(SvgFilePdfStroke$2, null), + zip: React__default.createElement(SvgFileZipStroke$2, null), + image: React__default.createElement(SvgFileImageStroke$2, null), + document: React__default.createElement(SvgFileDocumentStroke$2, null), + spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke$2, null), + presentation: React__default.createElement(SvgFilePresentationStroke$2, null), + generic: React__default.createElement(SvgFileGenericStroke$2, null), + success: React__default.createElement(SvgCheckCircleStroke$1$1, null), + error: React__default.createElement(SvgFileErrorStroke$2, null) +}; +const fileIconsCompact$1 = { + pdf: React__default.createElement(SvgFilePdfStroke$1$1, null), + zip: React__default.createElement(SvgFileZipStroke$1$1, null), + image: React__default.createElement(SvgFileImageStroke$1$1, null), + document: React__default.createElement(SvgFileDocumentStroke$1$1, null), + spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke$1$1, null), + presentation: React__default.createElement(SvgFilePresentationStroke$1$1, null), + generic: React__default.createElement(SvgFileGenericStroke$1$1, null), + success: React__default.createElement(SvgCheckCircleStroke$2, null), + error: React__default.createElement(SvgFileErrorStroke$1$1, null) +}; + +const FileComponent$1 = reactExports.forwardRef((_ref, ref) => { + let { + children, + type, + isCompact, + focusInset, + validation, + ...props + } = _ref; + const fileContextValue = reactExports.useMemo(() => ({ + isCompact + }), [isCompact]); + const validationType = validation || type; + return React__default.createElement(FileContext$1.Provider, { + value: fileContextValue + }, React__default.createElement(StyledFile$1, _extends$t$1({}, props, { + isCompact: isCompact, + focusInset: focusInset, + validation: validation, + ref: ref + }), validationType && React__default.createElement(StyledFileIcon$1, { + isCompact: isCompact + }, isCompact ? fileIconsCompact$1[validationType] : fileIconsDefault$1[validationType]), reactExports.Children.map(children, child => typeof child === 'string' ? React__default.createElement("span", null, child) : child))); +}); +FileComponent$1.displayName = 'File'; +FileComponent$1.propTypes = { + focusInset: PropTypes.bool, + isCompact: PropTypes.bool, + type: PropTypes.oneOf(FILE_TYPE$1), + validation: PropTypes.oneOf(FILE_VALIDATION$1) +}; +const File$1 = FileComponent$1; +File$1.Close = Close$2; +File$1.Delete = Delete$1; + +const MediaInput$1 = React__default.forwardRef((_ref, ref) => { + let { + start, + end, + disabled, + isCompact, + isBare, + focusInset, + readOnly, + validation, + wrapperProps = {}, + wrapperRef, + onSelect, + ...props + } = _ref; + const fieldContext = useFieldContext$2(); + const inputRef = reactExports.useRef(); + const [isFocused, setIsFocused] = reactExports.useState(false); + const [isHovered, setIsHovered] = reactExports.useState(false); + const { + onClick, + onFocus, + onBlur, + onMouseOver, + onMouseOut, + ...otherWrapperProps + } = wrapperProps; + const onFauxInputClickHandler = composeEventHandlers$2(onClick, () => { + inputRef.current && inputRef.current.focus(); + }); + const onFauxInputFocusHandler = composeEventHandlers$2(onFocus, () => { + setIsFocused(true); + }); + const onFauxInputBlurHandler = composeEventHandlers$2(onBlur, () => { + setIsFocused(false); + }); + const onFauxInputMouseOverHandler = composeEventHandlers$2(onMouseOver, () => { + setIsHovered(true); + }); + const onFauxInputMouseOutHandler = composeEventHandlers$2(onMouseOut, () => { + setIsHovered(false); + }); + const onSelectHandler = readOnly ? composeEventHandlers$2(onSelect, event => { + event.currentTarget.select(); + }) : onSelect; + let combinedProps = { + disabled, + readOnly, + ref: mergeRefs([inputRef, ref]), + onSelect: onSelectHandler, + ...props + }; + let isLabelHovered; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps, { + isDescribed: true + }); + isLabelHovered = fieldContext.isLabelHovered; + } + return React__default.createElement(FauxInput$1, _extends$t$1({ + tabIndex: null, + onClick: onFauxInputClickHandler, + onFocus: onFauxInputFocusHandler, + onBlur: onFauxInputBlurHandler, + onMouseOver: onFauxInputMouseOverHandler, + onMouseOut: onFauxInputMouseOutHandler, + disabled: disabled, + isFocused: isFocused, + isHovered: isHovered || isLabelHovered, + isCompact: isCompact, + isBare: isBare, + focusInset: focusInset, + readOnly: readOnly, + validation: validation, + mediaLayout: true + }, otherWrapperProps, { + ref: wrapperRef + }), start && React__default.createElement(FauxInput$1.StartIcon, { + isDisabled: disabled, + isFocused: isFocused, + isHovered: isHovered || isLabelHovered + }, start), React__default.createElement(StyledTextMediaInput$1, combinedProps), end && React__default.createElement(FauxInput$1.EndIcon, { + isDisabled: disabled, + isFocused: isFocused, + isHovered: isHovered || isLabelHovered + }, end)); +}); +MediaInput$1.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + validation: PropTypes.oneOf(VALIDATION$1), + start: PropTypes.node, + end: PropTypes.node, + wrapperProps: PropTypes.object, + wrapperRef: PropTypes.any +}; +MediaInput$1.displayName = 'MediaInput'; + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +function composeEventHandlers() { + for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) { + fns[_key] = arguments[_key]; + } + return function (event) { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + return fns.some(fn => { + fn && fn(event, ...args); + return event && event.defaultPrevented; + }); + }; +} +const KEYS = { + ALT: 'Alt', + ASTERISK: '*', + BACKSPACE: 'Backspace', + COMMA: ',', + DELETE: 'Delete', + DOWN: 'ArrowDown', + END: 'End', + ENTER: 'Enter', + ESCAPE: 'Escape', + HOME: 'Home', + LEFT: 'ArrowLeft', + NUMPAD_ADD: 'Add', + NUMPAD_DECIMAL: 'Decimal', + NUMPAD_DIVIDE: 'Divide', + NUMPAD_ENTER: 'Enter', + NUMPAD_MULTIPLY: 'Multiply', + NUMPAD_SUBTRACT: 'Subtract', + PAGE_DOWN: 'PageDown', + PAGE_UP: 'PageUp', + PERIOD: '.', + RIGHT: 'ArrowRight', + SHIFT: 'Shift', + SPACE: ' ', + TAB: 'Tab', + UNIDENTIFIED: 'Unidentified', + UP: 'ArrowUp' +}; + +var DocumentPosition; +(function (DocumentPosition) { + DocumentPosition[DocumentPosition["DISCONNECTED"] = 1] = "DISCONNECTED"; + DocumentPosition[DocumentPosition["PRECEDING"] = 2] = "PRECEDING"; + DocumentPosition[DocumentPosition["FOLLOWING"] = 4] = "FOLLOWING"; + DocumentPosition[DocumentPosition["CONTAINS"] = 8] = "CONTAINS"; + DocumentPosition[DocumentPosition["CONTAINED_BY"] = 16] = "CONTAINED_BY"; + DocumentPosition[DocumentPosition["IMPLEMENTATION_SPECIFIC"] = 32] = "IMPLEMENTATION_SPECIFIC"; +})(DocumentPosition || (DocumentPosition = {})); + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +const useField = _ref => { + let { + idPrefix, + hasHint, + hasMessage + } = _ref; + const prefix = useId(idPrefix); + const inputId = `${prefix}--input`; + const labelId = `${prefix}--label`; + const hintId = `${prefix}--hint`; + const messageId = `${prefix}--message`; + const getLabelProps = reactExports.useCallback(function (_temp) { + let { + id = labelId, + htmlFor = inputId, + ...other + } = _temp === void 0 ? {} : _temp; + return { + 'data-garden-container-id': 'containers.field.label', + 'data-garden-container-version': '3.0.6', + id, + htmlFor, + ...other + }; + }, [labelId, inputId]); + const getHintProps = reactExports.useCallback(function (_temp2) { + let { + id = hintId, + ...other + } = _temp2 === void 0 ? {} : _temp2; + return { + 'data-garden-container-id': 'containers.field.hint', + 'data-garden-container-version': '3.0.6', + id, + ...other + }; + }, [hintId]); + const getInputProps = reactExports.useCallback(function (_temp3) { + let { + id = inputId, + ...other + } = _temp3 === void 0 ? {} : _temp3; + const describedBy = []; + if (hasHint) { + describedBy.push(hintId); + } + if (hasMessage) { + describedBy.push(messageId); + } + return { + 'data-garden-container-id': 'containers.field.input', + 'data-garden-container-version': '3.0.6', + id, + 'aria-labelledby': labelId, + 'aria-describedby': describedBy.length > 0 ? describedBy.join(' ') : undefined, + ...other + }; + }, [inputId, labelId, hintId, messageId, hasHint, hasMessage]); + const getMessageProps = reactExports.useCallback(function (_temp4) { + let { + id = messageId, + role = 'alert', + ...other + } = _temp4 === void 0 ? {} : _temp4; + return { + 'data-garden-container-id': 'containers.field.message', + 'data-garden-container-version': '3.0.6', + role: role === null ? undefined : role, + id, + ...other + }; + }, [messageId]); + return reactExports.useMemo(() => ({ + getLabelProps, + getHintProps, + getInputProps, + getMessageProps + }), [getLabelProps, getHintProps, getInputProps, getMessageProps]); +}; +({ + children: PropTypes.func, + render: PropTypes.func, + idPrefix: PropTypes.string, + hasHint: PropTypes.bool, + hasMessage: PropTypes.bool +}); + +function _objectWithoutPropertiesLoose(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; +} + +let e=e=>"object"==typeof e&&null!=e&&1===e.nodeType,t=(e,t)=>(!t||"hidden"!==e)&&("visible"!==e&&"clip"!==e),n=(e,n)=>{if(e.clientHeight{let t=(e=>{if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch(e){return null}})(e);return !!t&&(t.clientHeightot||o>e&&r=t&&d>=n?o-e-l:r>t&&dn?r-t+i:0,i=e=>{let t=e.parentElement;return null==t?e.getRootNode().host||null:t};var o=(t,o)=>{var r,d,h,f,u,s;if("undefined"==typeof document)return [];let{scrollMode:a,block:c,inline:g,boundary:m,skipOverflowHiddenElements:p}=o,w="function"==typeof m?m:e=>e!==m;if(!e(t))throw new TypeError("Invalid target");let W=document.scrollingElement||document.documentElement,H=[],b=t;for(;e(b)&&w(b);){if(b=i(b),b===W){H.push(b);break}null!=b&&b===document.body&&n(b)&&!n(document.documentElement)||null!=b&&n(b,p)&&H.push(b);}let v=null!=(d=null==(r=window.visualViewport)?void 0:r.width)?d:innerWidth,y=null!=(f=null==(h=window.visualViewport)?void 0:h.height)?f:innerHeight,E=null!=(u=window.scrollX)?u:pageXOffset,M=null!=(s=window.scrollY)?s:pageYOffset,{height:x,width:I,top:C,right:R,bottom:T,left:V}=t.getBoundingClientRect(),k="start"===c||"nearest"===c?C:"end"===c?T:C+x/2,B="center"===g?V+I/2:"end"===g?R:V,D=[];for(let e=0;e=0&&V>=0&&T<=y&&R<=v&&C>=o&&T<=d&&V>=h&&R<=r)return D;let f=getComputedStyle(t),u=parseInt(f.borderLeftWidth,10),s=parseInt(f.borderTopWidth,10),m=parseInt(f.borderRightWidth,10),p=parseInt(f.borderBottomWidth,10),w=0,b=0,O="offsetWidth"in t?t.offsetWidth-t.clientWidth-u-m:0,X="offsetHeight"in t?t.offsetHeight-t.clientHeight-s-p:0,Y="offsetWidth"in t?0===t.offsetWidth?0:i/t.offsetWidth:0,L="offsetHeight"in t?0===t.offsetHeight?0:n/t.offsetHeight:0;if(W===t)w="start"===c?k:"end"===c?k-y:"nearest"===c?l(M,M+y,y,s,p,M+k,M+k+x,x):k-y/2,b="start"===g?B:"center"===g?B-v/2:"end"===g?B-v:l(E,E+v,v,u,m,E+B,E+B+I,I),w=Math.max(0,w+M),b=Math.max(0,b+E);else {w="start"===c?k-o-s:"end"===c?k-d+p+X:"nearest"===c?l(o,d,n,s,p+X,k,k+x,x):k-(o+n/2)+X/2,b="start"===g?B-h-u:"center"===g?B-(h+i/2)+O/2:"end"===g?B-r+m+O:l(h,r,i,u,m+O,B,B+I,I);let{scrollLeft:e,scrollTop:f}=t;w=Math.max(0,Math.min(f+w/L,t.scrollHeight-n/L+X)),b=Math.max(0,Math.min(e+b/Y,t.scrollWidth-i/Y+O)),k+=f-w,B+=e-b;}D.push({el:t,top:w,left:b});}return D}; + +/****************************************************************************** +Copyright (c) Microsoft Corporation. + +Permission to use, copy, modify, and/or distribute this software for any +purpose with or without fee is hereby granted. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH +REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY +AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, +INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM +LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR +OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR +PERFORMANCE OF THIS SOFTWARE. +***************************************************************************** */ + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; + +var idCounter = 0; +function noop() {} + +/** + * Scroll node into view if necessary + * @param {HTMLElement} node the element that should scroll into view + * @param {HTMLElement} menuNode the menu element of the component + */ +function scrollIntoView(node, menuNode) { + if (!node) { + return; + } + var actions = o(node, { + boundary: menuNode, + block: 'nearest', + scrollMode: 'if-needed' + }); + actions.forEach(function (_ref) { + var el = _ref.el, + top = _ref.top, + left = _ref.left; + el.scrollTop = top; + el.scrollLeft = left; + }); +} + +/** + * @param {HTMLElement} parent the parent node + * @param {HTMLElement} child the child node + * @param {Window} environment The window context where downshift renders. + * @return {Boolean} whether the parent is the child or the child is in the parent + */ +function isOrContainsNode(parent, child, environment) { + var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child); + return result; +} + +/** + * Simple debounce implementation. Will call the given + * function once after the time given has passed since + * it was last called. + * @param {Function} fn the function to call after the time + * @param {Number} time the time to wait + * @return {Function} the debounced function + */ +function debounce$1(fn, time) { + var timeoutId; + function cancel() { + if (timeoutId) { + clearTimeout(timeoutId); + } + } + function wrapper() { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + cancel(); + timeoutId = setTimeout(function () { + timeoutId = null; + fn.apply(void 0, args); + }, time); + } + wrapper.cancel = cancel; + return wrapper; +} + +/** + * This is intended to be used to compose event handlers. + * They are executed in order until one of them sets + * `event.preventDownshiftDefault = true`. + * @param {...Function} fns the event handler functions + * @return {Function} the event handler to add to an element + */ +function callAllEventHandlers() { + for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + fns[_key2] = arguments[_key2]; + } + return function (event) { + for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { + args[_key3 - 1] = arguments[_key3]; + } + return fns.some(function (fn) { + if (fn) { + fn.apply(void 0, [event].concat(args)); + } + return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault; + }); + }; +} +function handleRefs() { + for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { + refs[_key4] = arguments[_key4]; + } + return function (node) { + refs.forEach(function (ref) { + if (typeof ref === 'function') { + ref(node); + } else if (ref) { + ref.current = node; + } + }); + }; +} + +/** + * This generates a unique ID for an instance of Downshift + * @return {String} the unique ID + */ +function generateId() { + return String(idCounter++); +} + +/** + * Default implementation for status message. Only added when menu is open. + * Will specify if there are results in the list, and if so, how many, + * and what keys are relevant. + * + * @param {Object} param the downshift state and other relevant properties + * @return {String} the a11y status message + */ +function getA11yStatusMessage$1(_ref2) { + var isOpen = _ref2.isOpen, + resultCount = _ref2.resultCount, + previousResultCount = _ref2.previousResultCount; + if (!isOpen) { + return ''; + } + if (!resultCount) { + return 'No results are available.'; + } + if (resultCount !== previousResultCount) { + return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select."; + } + return ''; +} + +/** + * This will perform a shallow merge of the given state object + * with the state coming from props + * (for the controlled component scenario) + * This is used in state updater functions so they're referencing + * the right state regardless of where it comes from. + * + * @param {Object} state The state of the component/hook. + * @param {Object} props The props that may contain controlled values. + * @returns {Object} The merged controlled state. + */ +function getState(state, props) { + return Object.keys(state).reduce(function (prevState, key) { + prevState[key] = isControlledProp(props, key) ? props[key] : state[key]; + return prevState; + }, {}); +} + +/** + * This determines whether a prop is a "controlled prop" meaning it is + * state which is controlled by the outside of this component rather + * than within this component. + * + * @param {Object} props The props that may contain controlled values. + * @param {String} key the key to check + * @return {Boolean} whether it is a controlled controlled prop + */ +function isControlledProp(props, key) { + return props[key] !== undefined; +} + +/** + * Normalizes the 'key' property of a KeyboardEvent in IE/Edge + * @param {Object} event a keyboardEvent object + * @return {String} keyboard key + */ +function normalizeArrowKey(event) { + var key = event.key, + keyCode = event.keyCode; + /* istanbul ignore next (ie) */ + if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) { + return "Arrow" + key; + } + return key; +} + +/** + * Returns the new index in the list, in a circular way. If next value is out of bonds from the total, + * it will wrap to either 0 or itemCount - 1. + * + * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards. + * @param {number} baseIndex The initial position to move from. + * @param {number} itemCount The total number of items. + * @param {Function} getItemNodeFromIndex Used to check if item is disabled. + * @param {boolean} circular Specify if navigation is circular. Default is true. + * @returns {number} The new index after the move. + */ +function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) { + if (circular === void 0) { + circular = true; + } + if (itemCount === 0) { + return -1; + } + var itemsLastIndex = itemCount - 1; + if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) { + baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1; + } + var newIndex = baseIndex + moveAmount; + if (newIndex < 0) { + newIndex = circular ? itemsLastIndex : 0; + } else if (newIndex > itemsLastIndex) { + newIndex = circular ? 0 : itemsLastIndex; + } + var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular); + if (nonDisabledNewIndex === -1) { + return baseIndex >= itemCount ? -1 : baseIndex; + } + return nonDisabledNewIndex; +} + +/** + * Returns the next index in the list of an item that is not disabled. + * + * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards. + * @param {number} baseIndex The initial position to move from. + * @param {number} itemCount The total number of items. + * @param {Function} getItemNodeFromIndex Used to check if item is disabled. + * @param {boolean} circular Specify if navigation is circular. Default is true. + * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1. + */ +function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) { + var currentElementNode = getItemNodeFromIndex(baseIndex); + if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) { + return baseIndex; + } + if (moveAmount > 0) { + for (var index = baseIndex + 1; index < itemCount; index++) { + if (!getItemNodeFromIndex(index).hasAttribute('disabled')) { + return index; + } + } + } else { + for (var _index = baseIndex - 1; _index >= 0; _index--) { + if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) { + return _index; + } + } + } + if (circular) { + return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false); + } + return -1; +} + +/** + * Checks if event target is within the downshift elements. + * + * @param {EventTarget} target Target to check. + * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc). + * @param {Window} environment The window context where downshift renders. + * @param {boolean} checkActiveElement Whether to also check activeElement. + * + * @returns {boolean} Whether or not the target is within downshift elements. + */ +function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) { + if (checkActiveElement === void 0) { + checkActiveElement = true; + } + return downshiftElements.some(function (contextNode) { + return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)); + }); +} + +var cleanupStatus = debounce$1(function (documentProp) { + getStatusDiv(documentProp).textContent = ''; +}, 500); + +/** + * @param {String} status the status message + * @param {Object} documentProp document passed by the user. + */ +function setStatus(status, documentProp) { + var div = getStatusDiv(documentProp); + if (!status) { + return; + } + div.textContent = status; + cleanupStatus(documentProp); +} + +/** + * Get the status node or create it if it does not already exist. + * @param {Object} documentProp document passed by the user. + * @return {HTMLElement} the status node. + */ +function getStatusDiv(documentProp) { + if (documentProp === void 0) { + documentProp = document; + } + var statusDiv = documentProp.getElementById('a11y-status-message'); + if (statusDiv) { + return statusDiv; + } + statusDiv = documentProp.createElement('div'); + statusDiv.setAttribute('id', 'a11y-status-message'); + statusDiv.setAttribute('role', 'status'); + statusDiv.setAttribute('aria-live', 'polite'); + statusDiv.setAttribute('aria-relevant', 'additions text'); + Object.assign(statusDiv.style, { + border: '0', + clip: 'rect(0 0 0 0)', + height: '1px', + margin: '-1px', + overflow: 'hidden', + padding: '0', + position: 'absolute', + width: '1px' + }); + documentProp.body.appendChild(statusDiv); + return statusDiv; +} + +var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"]; +var dropdownDefaultStateValues = { + highlightedIndex: -1, + isOpen: false, + selectedItem: null, + inputValue: '' +}; +function callOnChangeProps(action, state, newState) { + var props = action.props, + type = action.type; + var changes = {}; + Object.keys(state).forEach(function (key) { + invokeOnChangeHandler(key, action, state, newState); + if (newState[key] !== state[key]) { + changes[key] = newState[key]; + } + }); + if (props.onStateChange && Object.keys(changes).length) { + props.onStateChange(_extends$x({ + type: type + }, changes)); + } +} +function invokeOnChangeHandler(key, action, state, newState) { + var props = action.props, + type = action.type; + var handler = "on" + capitalizeString(key) + "Change"; + if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) { + props[handler](_extends$x({ + type: type + }, newState)); + } +} + +/** + * Default state reducer that returns the changes. + * + * @param {Object} s state. + * @param {Object} a action with changes. + * @returns {Object} changes. + */ +function stateReducer(s, a) { + return a.changes; +} + +/** + * Returns a message to be added to aria-live region when item is selected. + * + * @param {Object} selectionParameters Parameters required to build the message. + * @returns {string} The a11y message. + */ +function getA11ySelectionMessage(selectionParameters) { + var selectedItem = selectionParameters.selectedItem, + itemToStringLocal = selectionParameters.itemToString; + return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : ''; +} + +/** + * Debounced call for updating the a11y message. + */ +var updateA11yStatus = debounce$1(function (getA11yMessage, document) { + setStatus(getA11yMessage(), document); +}, 200); + +// istanbul ignore next +var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? reactExports.useLayoutEffect : reactExports.useEffect; +function useElementIds(_ref) { + var _ref$id = _ref.id, + id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id, + labelId = _ref.labelId, + menuId = _ref.menuId, + getItemId = _ref.getItemId, + toggleButtonId = _ref.toggleButtonId, + inputId = _ref.inputId; + var elementIdsRef = reactExports.useRef({ + labelId: labelId || id + "-label", + menuId: menuId || id + "-menu", + getItemId: getItemId || function (index) { + return id + "-item-" + index; + }, + toggleButtonId: toggleButtonId || id + "-toggle-button", + inputId: inputId || id + "-input" + }); + return elementIdsRef.current; +} +function getItemAndIndex(itemProp, indexProp, items, errorMessage) { + var item, index; + if (itemProp === undefined) { + if (indexProp === undefined) { + throw new Error(errorMessage); + } + item = items[indexProp]; + index = indexProp; + } else { + index = indexProp === undefined ? items.indexOf(itemProp) : indexProp; + item = itemProp; + } + return [item, index]; +} +function itemToString(item) { + return item ? String(item) : ''; +} +function capitalizeString(string) { + return "" + string.slice(0, 1).toUpperCase() + string.slice(1); +} +function useLatestRef$1(val) { + var ref = reactExports.useRef(val); + // technically this is not "concurrent mode safe" because we're manipulating + // the value during render (so it's not idempotent). However, the places this + // hook is used is to support memoizing callbacks which will be called + // *during* render, so we need the latest values *during* render. + // If not for this, then we'd probably want to use useLayoutEffect instead. + ref.current = val; + return ref; +} + +/** + * Computes the controlled state using a the previous state, props, + * two reducers, one from downshift and an optional one from the user. + * Also calls the onChange handlers for state values that have changed. + * + * @param {Function} reducer Reducer function from downshift. + * @param {Object} initialState Initial state of the hook. + * @param {Object} props The hook props. + * @returns {Array} An array with the state and an action dispatcher. + */ +function useEnhancedReducer(reducer, initialState, props) { + var prevStateRef = reactExports.useRef(); + var actionRef = reactExports.useRef(); + var enhancedReducer = reactExports.useCallback(function (state, action) { + actionRef.current = action; + state = getState(state, action.props); + var changes = reducer(state, action); + var newState = action.props.stateReducer(state, _extends$x({}, action, { + changes: changes + })); + return newState; + }, [reducer]); + var _useReducer = reactExports.useReducer(enhancedReducer, initialState), + state = _useReducer[0], + dispatch = _useReducer[1]; + var propsRef = useLatestRef$1(props); + var dispatchWithProps = reactExports.useCallback(function (action) { + return dispatch(_extends$x({ + props: propsRef.current + }, action)); + }, [propsRef]); + var action = actionRef.current; + reactExports.useEffect(function () { + if (action && prevStateRef.current && prevStateRef.current !== state) { + callOnChangeProps(action, getState(prevStateRef.current, action.props), state); + } + prevStateRef.current = state; + }, [state, props, action]); + return [state, dispatchWithProps]; +} +var defaultProps$3 = { + itemToString: itemToString, + stateReducer: stateReducer, + getA11ySelectionMessage: getA11ySelectionMessage, + scrollIntoView: scrollIntoView, + environment: /* istanbul ignore next (ssr) */ + typeof window === 'undefined' ? {} : window +}; +function getDefaultValue$1(props, propKey, defaultStateValues) { + if (defaultStateValues === void 0) { + defaultStateValues = dropdownDefaultStateValues; + } + var defaultValue = props["default" + capitalizeString(propKey)]; + if (defaultValue !== undefined) { + return defaultValue; + } + return defaultStateValues[propKey]; +} +function getInitialValue$1(props, propKey, defaultStateValues) { + if (defaultStateValues === void 0) { + defaultStateValues = dropdownDefaultStateValues; + } + var value = props[propKey]; + if (value !== undefined) { + return value; + } + var initialValue = props["initial" + capitalizeString(propKey)]; + if (initialValue !== undefined) { + return initialValue; + } + return getDefaultValue$1(props, propKey, defaultStateValues); +} +function getInitialState$2(props) { + var selectedItem = getInitialValue$1(props, 'selectedItem'); + var isOpen = getInitialValue$1(props, 'isOpen'); + var highlightedIndex = getInitialValue$1(props, 'highlightedIndex'); + var inputValue = getInitialValue$1(props, 'inputValue'); + return { + highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex, + isOpen: isOpen, + selectedItem: selectedItem, + inputValue: inputValue + }; +} +function getHighlightedIndexOnOpen(props, state, offset) { + var items = props.items, + initialHighlightedIndex = props.initialHighlightedIndex, + defaultHighlightedIndex = props.defaultHighlightedIndex; + var selectedItem = state.selectedItem, + highlightedIndex = state.highlightedIndex; + if (items.length === 0) { + return -1; + } + + // initialHighlightedIndex will give value to highlightedIndex on initial state only. + if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) { + return initialHighlightedIndex; + } + if (defaultHighlightedIndex !== undefined) { + return defaultHighlightedIndex; + } + if (selectedItem) { + return items.indexOf(selectedItem); + } + if (offset === 0) { + return -1; + } + return offset < 0 ? items.length - 1 : 0; +} + +/** + * Reuse the movement tracking of mouse and touch events. + * + * @param {boolean} isOpen Whether the dropdown is open or not. + * @param {Array} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.) + * @param {Object} environment Environment where component/hook exists. + * @param {Function} handleBlur Handler on blur from mouse or touch. + * @returns {Object} Ref containing whether mouseDown or touchMove event is happening + */ +function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) { + var mouseAndTouchTrackersRef = reactExports.useRef({ + isMouseDown: false, + isTouchMove: false + }); + reactExports.useEffect(function () { + if ((environment == null ? void 0 : environment.addEventListener) == null) { + return; + } + + // The same strategy for checking if a click occurred inside or outside downshift + // as in downshift.js. + var onMouseDown = function onMouseDown() { + mouseAndTouchTrackersRef.current.isMouseDown = true; + }; + var onMouseUp = function onMouseUp(event) { + mouseAndTouchTrackersRef.current.isMouseDown = false; + if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) { + return ref.current; + }), environment)) { + handleBlur(); + } + }; + var onTouchStart = function onTouchStart() { + mouseAndTouchTrackersRef.current.isTouchMove = false; + }; + var onTouchMove = function onTouchMove() { + mouseAndTouchTrackersRef.current.isTouchMove = true; + }; + var onTouchEnd = function onTouchEnd(event) { + if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) { + return ref.current; + }), environment, false)) { + handleBlur(); + } + }; + environment.addEventListener('mousedown', onMouseDown); + environment.addEventListener('mouseup', onMouseUp); + environment.addEventListener('touchstart', onTouchStart); + environment.addEventListener('touchmove', onTouchMove); + environment.addEventListener('touchend', onTouchEnd); + + // eslint-disable-next-line consistent-return + return function cleanup() { + environment.removeEventListener('mousedown', onMouseDown); + environment.removeEventListener('mouseup', onMouseUp); + environment.removeEventListener('touchstart', onTouchStart); + environment.removeEventListener('touchmove', onTouchMove); + environment.removeEventListener('touchend', onTouchEnd); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isOpen, environment]); + return mouseAndTouchTrackersRef; +} + +/* istanbul ignore next */ +// eslint-disable-next-line import/no-mutable-exports +var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() { + return noop; +}; +function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) { + var isInitialMount = _ref2.isInitialMount, + highlightedIndex = _ref2.highlightedIndex, + items = _ref2.items, + environment = _ref2.environment, + rest = _objectWithoutPropertiesLoose(_ref2, _excluded$3); + // Sets a11y status message on changes in state. + reactExports.useEffect(function () { + if (isInitialMount || false) { + return; + } + updateA11yStatus(function () { + return getA11yMessage(_extends$x({ + highlightedIndex: highlightedIndex, + highlightedItem: items[highlightedIndex], + resultCount: items.length + }, rest)); + }, environment.document); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, dependencyArray); +} +function useScrollIntoView(_ref3) { + var highlightedIndex = _ref3.highlightedIndex, + isOpen = _ref3.isOpen, + itemRefs = _ref3.itemRefs, + getItemNodeFromIndex = _ref3.getItemNodeFromIndex, + menuElement = _ref3.menuElement, + scrollIntoViewProp = _ref3.scrollIntoView; + // used not to scroll on highlight by mouse. + var shouldScrollRef = reactExports.useRef(true); + // Scroll on highlighted item if change comes from keyboard. + useIsomorphicLayoutEffect(function () { + if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) { + return; + } + if (shouldScrollRef.current === false) { + shouldScrollRef.current = true; + } else { + scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [highlightedIndex]); + return shouldScrollRef; +} + +// eslint-disable-next-line import/no-mutable-exports +var useControlPropsValidator = noop; + +/** + * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted. + * In that case, selects the item and resets to defaults for open state and highlighted idex. + * @param {Object} props The useCombobox props. + * @param {number} highlightedIndex The index from the state. + * @param {boolean} inputValue Also return the input value for state. + * @returns The changes for the state. + */ +function getChangesOnSelection(props, highlightedIndex, inputValue) { + var _props$items; + if (inputValue === void 0) { + inputValue = true; + } + var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0; + return _extends$x({ + isOpen: false, + highlightedIndex: -1 + }, shouldSelect && _extends$x({ + selectedItem: props.items[highlightedIndex], + isOpen: getDefaultValue$1(props, 'isOpen'), + highlightedIndex: getDefaultValue$1(props, 'highlightedIndex') + }, inputValue && { + inputValue: props.itemToString(props.items[highlightedIndex]) + })); +} + +function downshiftCommonReducer(state, action, stateChangeTypes) { + var type = action.type, + props = action.props; + var changes; + switch (type) { + case stateChangeTypes.ItemMouseMove: + changes = { + highlightedIndex: action.disabled ? -1 : action.index + }; + break; + case stateChangeTypes.MenuMouseLeave: + changes = { + highlightedIndex: -1 + }; + break; + case stateChangeTypes.ToggleButtonClick: + case stateChangeTypes.FunctionToggleMenu: + changes = { + isOpen: !state.isOpen, + highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0) + }; + break; + case stateChangeTypes.FunctionOpenMenu: + changes = { + isOpen: true, + highlightedIndex: getHighlightedIndexOnOpen(props, state, 0) + }; + break; + case stateChangeTypes.FunctionCloseMenu: + changes = { + isOpen: false + }; + break; + case stateChangeTypes.FunctionSetHighlightedIndex: + changes = { + highlightedIndex: action.highlightedIndex + }; + break; + case stateChangeTypes.FunctionSetInputValue: + changes = { + inputValue: action.inputValue + }; + break; + case stateChangeTypes.FunctionReset: + changes = { + highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'), + isOpen: getDefaultValue$1(props, 'isOpen'), + selectedItem: getDefaultValue$1(props, 'selectedItem'), + inputValue: getDefaultValue$1(props, 'inputValue') + }; + break; + default: + throw new Error('Reducer called without proper action type.'); + } + return _extends$x({}, state, changes); +} +({ + items: PropTypes.array.isRequired, + itemToString: PropTypes.func, + getA11yStatusMessage: PropTypes.func, + getA11ySelectionMessage: PropTypes.func, + highlightedIndex: PropTypes.number, + defaultHighlightedIndex: PropTypes.number, + initialHighlightedIndex: PropTypes.number, + isOpen: PropTypes.bool, + defaultIsOpen: PropTypes.bool, + initialIsOpen: PropTypes.bool, + selectedItem: PropTypes.any, + initialSelectedItem: PropTypes.any, + defaultSelectedItem: PropTypes.any, + id: PropTypes.string, + labelId: PropTypes.string, + menuId: PropTypes.string, + getItemId: PropTypes.func, + toggleButtonId: PropTypes.string, + stateReducer: PropTypes.func, + onSelectedItemChange: PropTypes.func, + onHighlightedIndexChange: PropTypes.func, + onStateChange: PropTypes.func, + onIsOpenChange: PropTypes.func, + environment: PropTypes.shape({ + addEventListener: PropTypes.func, + removeEventListener: PropTypes.func, + document: PropTypes.shape({ + getElementById: PropTypes.func, + activeElement: PropTypes.any, + body: PropTypes.any + }) + }) +}); +/** + * Default implementation for status message. Only added when menu is open. + * Will specift if there are results in the list, and if so, how many, + * and what keys are relevant. + * + * @param {Object} param the downshift state and other relevant properties + * @return {String} the a11y status message + */ +function getA11yStatusMessage(_a) { + var isOpen = _a.isOpen, resultCount = _a.resultCount, previousResultCount = _a.previousResultCount; + if (!isOpen) { + return ''; + } + if (!resultCount) { + return 'No results are available.'; + } + if (resultCount !== previousResultCount) { + return "".concat(resultCount, " result").concat(resultCount === 1 ? ' is' : 's are', " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select."); + } + return ''; +} +__assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage }); + +var InputKeyDownArrowDown = 0; +var InputKeyDownArrowUp = 1; +var InputKeyDownEscape = 2; +var InputKeyDownHome = 3; +var InputKeyDownEnd = 4; +var InputKeyDownPageUp = 5; +var InputKeyDownPageDown = 6; +var InputKeyDownEnter = 7; +var InputChange = 8; +var InputBlur = 9; +var InputFocus = 10; +var MenuMouseLeave = 11; +var ItemMouseMove = 12; +var ItemClick = 13; +var ToggleButtonClick = 14; +var FunctionToggleMenu = 15; +var FunctionOpenMenu = 16; +var FunctionCloseMenu = 17; +var FunctionSetHighlightedIndex = 18; +var FunctionSelectItem = 19; +var FunctionSetInputValue = 20; +var FunctionReset$1 = 21; +var ControlledPropUpdatedSelectedItem = 22; + +var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({ + __proto__: null, + InputKeyDownArrowDown: InputKeyDownArrowDown, + InputKeyDownArrowUp: InputKeyDownArrowUp, + InputKeyDownEscape: InputKeyDownEscape, + InputKeyDownHome: InputKeyDownHome, + InputKeyDownEnd: InputKeyDownEnd, + InputKeyDownPageUp: InputKeyDownPageUp, + InputKeyDownPageDown: InputKeyDownPageDown, + InputKeyDownEnter: InputKeyDownEnter, + InputChange: InputChange, + InputBlur: InputBlur, + InputFocus: InputFocus, + MenuMouseLeave: MenuMouseLeave, + ItemMouseMove: ItemMouseMove, + ItemClick: ItemClick, + ToggleButtonClick: ToggleButtonClick, + FunctionToggleMenu: FunctionToggleMenu, + FunctionOpenMenu: FunctionOpenMenu, + FunctionCloseMenu: FunctionCloseMenu, + FunctionSetHighlightedIndex: FunctionSetHighlightedIndex, + FunctionSelectItem: FunctionSelectItem, + FunctionSetInputValue: FunctionSetInputValue, + FunctionReset: FunctionReset$1, + ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem +}); + +function getInitialState$1(props) { + var initialState = getInitialState$2(props); + var selectedItem = initialState.selectedItem; + var inputValue = initialState.inputValue; + if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) { + inputValue = props.itemToString(selectedItem); + } + return _extends$x({}, initialState, { + inputValue: inputValue + }); +} +({ + items: PropTypes.array.isRequired, + itemToString: PropTypes.func, + selectedItemChanged: PropTypes.func, + getA11yStatusMessage: PropTypes.func, + getA11ySelectionMessage: PropTypes.func, + highlightedIndex: PropTypes.number, + defaultHighlightedIndex: PropTypes.number, + initialHighlightedIndex: PropTypes.number, + isOpen: PropTypes.bool, + defaultIsOpen: PropTypes.bool, + initialIsOpen: PropTypes.bool, + selectedItem: PropTypes.any, + initialSelectedItem: PropTypes.any, + defaultSelectedItem: PropTypes.any, + inputValue: PropTypes.string, + defaultInputValue: PropTypes.string, + initialInputValue: PropTypes.string, + id: PropTypes.string, + labelId: PropTypes.string, + menuId: PropTypes.string, + getItemId: PropTypes.func, + inputId: PropTypes.string, + toggleButtonId: PropTypes.string, + stateReducer: PropTypes.func, + onSelectedItemChange: PropTypes.func, + onHighlightedIndexChange: PropTypes.func, + onStateChange: PropTypes.func, + onIsOpenChange: PropTypes.func, + onInputValueChange: PropTypes.func, + environment: PropTypes.shape({ + addEventListener: PropTypes.func, + removeEventListener: PropTypes.func, + document: PropTypes.shape({ + getElementById: PropTypes.func, + activeElement: PropTypes.any, + body: PropTypes.any + }) + }) +}); + +/** + * The useCombobox version of useControlledReducer, which also + * checks if the controlled prop selectedItem changed between + * renders. If so, it will also update inputValue with its + * string equivalent. It uses the common useEnhancedReducer to + * compute the rest of the state. + * + * @param {Function} reducer Reducer function from downshift. + * @param {Object} initialState Initial state of the hook. + * @param {Object} props The hook props. + * @returns {Array} An array with the state and an action dispatcher. + */ +function useControlledReducer(reducer, initialState, props) { + var previousSelectedItemRef = reactExports.useRef(); + var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props), + state = _useEnhancedReducer[0], + dispatch = _useEnhancedReducer[1]; + + // ToDo: if needed, make same approach as selectedItemChanged from Downshift. + reactExports.useEffect(function () { + if (!isControlledProp(props, 'selectedItem')) { + return; + } + if (props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) { + dispatch({ + type: ControlledPropUpdatedSelectedItem, + inputValue: props.itemToString(props.selectedItem) + }); + } + previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [state.selectedItem, props.selectedItem]); + return [getState(state, props), dispatch]; +} + +// eslint-disable-next-line import/no-mutable-exports +var validatePropTypes$1 = noop; +var defaultProps$1 = _extends$x({}, defaultProps$3, { + selectedItemChanged: function selectedItemChanged(prevItem, item) { + return prevItem !== item; + }, + getA11yStatusMessage: getA11yStatusMessage$1 +}); + +/* eslint-disable complexity */ +function downshiftUseComboboxReducer(state, action) { + var _props$items; + var type = action.type, + props = action.props, + altKey = action.altKey; + var changes; + switch (type) { + case ItemClick: + changes = { + isOpen: getDefaultValue$1(props, 'isOpen'), + highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'), + selectedItem: props.items[action.index], + inputValue: props.itemToString(props.items[action.index]) + }; + break; + case InputKeyDownArrowDown: + if (state.isOpen) { + changes = { + highlightedIndex: getNextWrappingIndex(1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true) + }; + } else { + changes = { + highlightedIndex: altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex), + isOpen: props.items.length >= 0 + }; + } + break; + case InputKeyDownArrowUp: + if (state.isOpen) { + if (altKey) { + changes = getChangesOnSelection(props, state.highlightedIndex); + } else { + changes = { + highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true) + }; + } + } else { + changes = { + highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex), + isOpen: props.items.length >= 0 + }; + } + break; + case InputKeyDownEnter: + changes = getChangesOnSelection(props, state.highlightedIndex); + break; + case InputKeyDownEscape: + changes = _extends$x({ + isOpen: false, + highlightedIndex: -1 + }, !state.isOpen && { + selectedItem: null, + inputValue: '' + }); + break; + case InputKeyDownPageUp: + changes = { + highlightedIndex: getNextWrappingIndex(-10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) + }; + break; + case InputKeyDownPageDown: + changes = { + highlightedIndex: getNextWrappingIndex(10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) + }; + break; + case InputKeyDownHome: + changes = { + highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false) + }; + break; + case InputKeyDownEnd: + changes = { + highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false) + }; + break; + case InputBlur: + changes = _extends$x({ + isOpen: false, + highlightedIndex: -1 + }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && { + selectedItem: props.items[state.highlightedIndex], + inputValue: props.itemToString(props.items[state.highlightedIndex]) + }); + break; + case InputChange: + changes = { + isOpen: true, + highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'), + inputValue: action.inputValue + }; + break; + case InputFocus: + changes = { + isOpen: true, + highlightedIndex: getHighlightedIndexOnOpen(props, state, 0) + }; + break; + case FunctionSelectItem: + changes = { + selectedItem: action.selectedItem, + inputValue: props.itemToString(action.selectedItem) + }; + break; + case ControlledPropUpdatedSelectedItem: + changes = { + inputValue: action.inputValue + }; + break; + default: + return downshiftCommonReducer(state, action, stateChangeTypes$1); + } + return _extends$x({}, state, changes); +} +/* eslint-enable complexity */ + +var _excluded$1 = ["onMouseLeave", "refKey", "ref"], + _excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onMouseDown", "onClick", "onPress", "disabled"], + _excluded3 = ["onClick", "onPress", "refKey", "ref"], + _excluded4 = ["onKeyDown", "onChange", "onInput", "onFocus", "onBlur", "onChangeText", "refKey", "ref"]; +useCombobox$1.stateChangeTypes = stateChangeTypes$1; +function useCombobox$1(userProps) { + if (userProps === void 0) { + userProps = {}; + } + validatePropTypes$1(); + // Props defaults and destructuring. + var props = _extends$x({}, defaultProps$1, userProps); + var initialIsOpen = props.initialIsOpen, + defaultIsOpen = props.defaultIsOpen, + items = props.items, + scrollIntoView = props.scrollIntoView, + environment = props.environment, + getA11yStatusMessage = props.getA11yStatusMessage, + getA11ySelectionMessage = props.getA11ySelectionMessage, + itemToString = props.itemToString; + // Initial state depending on controlled props. + var initialState = getInitialState$1(props); + var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props), + state = _useControlledReducer[0], + dispatch = _useControlledReducer[1]; + var isOpen = state.isOpen, + highlightedIndex = state.highlightedIndex, + selectedItem = state.selectedItem, + inputValue = state.inputValue; + + // Element refs. + var menuRef = reactExports.useRef(null); + var itemRefs = reactExports.useRef({}); + var inputRef = reactExports.useRef(null); + var toggleButtonRef = reactExports.useRef(null); + var isInitialMountRef = reactExports.useRef(true); + // prevent id re-generation between renders. + var elementIds = useElementIds(props); + // used to keep track of how many items we had on previous cycle. + var previousResultCountRef = reactExports.useRef(); + // utility callback to get item element. + var latest = useLatestRef$1({ + state: state, + props: props + }); + var getItemNodeFromIndex = reactExports.useCallback(function (index) { + return itemRefs.current[elementIds.getItemId(index)]; + }, [elementIds]); + + // Effects. + // Sets a11y status message on changes in state. + useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends$x({ + isInitialMount: isInitialMountRef.current, + previousResultCount: previousResultCountRef.current, + items: items, + environment: environment, + itemToString: itemToString + }, state)); + // Sets a11y status message on changes in selectedItem. + useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends$x({ + isInitialMount: isInitialMountRef.current, + previousResultCount: previousResultCountRef.current, + items: items, + environment: environment, + itemToString: itemToString + }, state)); + // Scroll on highlighted item if change comes from keyboard. + var shouldScrollRef = useScrollIntoView({ + menuElement: menuRef.current, + highlightedIndex: highlightedIndex, + isOpen: isOpen, + itemRefs: itemRefs, + scrollIntoView: scrollIntoView, + getItemNodeFromIndex: getItemNodeFromIndex + }); + useControlPropsValidator({ + isInitialMount: isInitialMountRef.current, + props: props, + state: state + }); + // Focus the input on first render if required. + reactExports.useEffect(function () { + var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen; + if (focusOnOpen && inputRef.current) { + inputRef.current.focus(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + reactExports.useEffect(function () { + if (isInitialMountRef.current) { + return; + } + previousResultCountRef.current = items.length; + }); + // Add mouse/touch events to document. + var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () { + dispatch({ + type: InputBlur, + selectItem: false + }); + }); + var setGetterPropCallInfo = useGetterPropsCalledChecker(); + // Make initial ref false. + reactExports.useEffect(function () { + isInitialMountRef.current = false; + return function () { + isInitialMountRef.current = true; + }; + }, []); + // Reset itemRefs on close. + reactExports.useEffect(function () { + var _environment$document; + if (!isOpen) { + itemRefs.current = {}; + } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) { + var _inputRef$current; + inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus(); + } + }, [isOpen, environment]); + + /* Event handler functions */ + var inputKeyDownHandlers = reactExports.useMemo(function () { + return { + ArrowDown: function ArrowDown(event) { + event.preventDefault(); + dispatch({ + type: InputKeyDownArrowDown, + altKey: event.altKey, + getItemNodeFromIndex: getItemNodeFromIndex + }); + }, + ArrowUp: function ArrowUp(event) { + event.preventDefault(); + dispatch({ + type: InputKeyDownArrowUp, + altKey: event.altKey, + getItemNodeFromIndex: getItemNodeFromIndex + }); + }, + Home: function Home(event) { + if (!latest.current.state.isOpen) { + return; + } + event.preventDefault(); + dispatch({ + type: InputKeyDownHome, + getItemNodeFromIndex: getItemNodeFromIndex + }); + }, + End: function End(event) { + if (!latest.current.state.isOpen) { + return; + } + event.preventDefault(); + dispatch({ + type: InputKeyDownEnd, + getItemNodeFromIndex: getItemNodeFromIndex + }); + }, + Escape: function Escape(event) { + var latestState = latest.current.state; + if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) { + event.preventDefault(); + dispatch({ + type: InputKeyDownEscape + }); + } + }, + Enter: function Enter(event) { + var latestState = latest.current.state; + // if closed or no highlighted index, do nothing. + if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event. + ) { + return; + } + event.preventDefault(); + dispatch({ + type: InputKeyDownEnter, + getItemNodeFromIndex: getItemNodeFromIndex + }); + }, + PageUp: function PageUp(event) { + if (latest.current.state.isOpen) { + event.preventDefault(); + dispatch({ + type: InputKeyDownPageUp, + getItemNodeFromIndex: getItemNodeFromIndex + }); + } + }, + PageDown: function PageDown(event) { + if (latest.current.state.isOpen) { + event.preventDefault(); + dispatch({ + type: InputKeyDownPageDown, + getItemNodeFromIndex: getItemNodeFromIndex + }); + } + } + }; + }, [dispatch, latest, getItemNodeFromIndex]); + + // Getter props. + var getLabelProps = reactExports.useCallback(function (labelProps) { + return _extends$x({ + id: elementIds.labelId, + htmlFor: elementIds.inputId + }, labelProps); + }, [elementIds]); + var getMenuProps = reactExports.useCallback(function (_temp, _temp2) { + var _extends2; + var _ref = _temp === void 0 ? {} : _temp, + onMouseLeave = _ref.onMouseLeave, + _ref$refKey = _ref.refKey, + refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey, + ref = _ref.ref, + rest = _objectWithoutPropertiesLoose(_ref, _excluded$1); + var _ref2 = _temp2 === void 0 ? {} : _temp2; + _ref2.suppressRefError; + return _extends$x((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) { + menuRef.current = menuNode; + }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = rest && rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () { + dispatch({ + type: MenuMouseLeave + }); + }), _extends2), rest); + }, [dispatch, setGetterPropCallInfo, elementIds]); + var getItemProps = reactExports.useCallback(function (_temp3) { + var _extends3, _ref4; + var _ref3 = _temp3 === void 0 ? {} : _temp3, + itemProp = _ref3.item, + indexProp = _ref3.index, + _ref3$refKey = _ref3.refKey, + refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey, + ref = _ref3.ref, + onMouseMove = _ref3.onMouseMove, + onMouseDown = _ref3.onMouseDown, + onClick = _ref3.onClick; + _ref3.onPress; + var disabled = _ref3.disabled, + rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$1); + var _latest$current = latest.current, + latestProps = _latest$current.props, + latestState = _latest$current.state; + var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'), + index = _getItemAndIndex[1]; + var onSelectKey = 'onClick'; + var customClickHandler = onClick; + var itemHandleMouseMove = function itemHandleMouseMove() { + if (index === latestState.highlightedIndex) { + return; + } + shouldScrollRef.current = false; + dispatch({ + type: ItemMouseMove, + index: index, + disabled: disabled + }); + }; + var itemHandleClick = function itemHandleClick() { + dispatch({ + type: ItemClick, + index: index + }); + }; + var itemHandleMouseDown = function itemHandleMouseDown(e) { + return e.preventDefault(); + }; + return _extends$x((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) { + if (itemNode) { + itemRefs.current[elementIds.getItemId(index)] = itemNode; + } + }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), { + onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove), + onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown) + }, rest); + }, [dispatch, latest, shouldScrollRef, elementIds]); + var getToggleButtonProps = reactExports.useCallback(function (_temp4) { + var _extends4; + var _ref5 = _temp4 === void 0 ? {} : _temp4, + onClick = _ref5.onClick; + _ref5.onPress; + var _ref5$refKey = _ref5.refKey, + refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey, + ref = _ref5.ref, + rest = _objectWithoutPropertiesLoose(_ref5, _excluded3); + var latestState = latest.current.state; + var toggleButtonHandleClick = function toggleButtonHandleClick() { + dispatch({ + type: ToggleButtonClick + }); + }; + return _extends$x((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) { + toggleButtonRef.current = toggleButtonNode; + }), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends$x({}, { + onClick: callAllEventHandlers(onClick, toggleButtonHandleClick) + }), rest); + }, [dispatch, latest, elementIds]); + var getInputProps = reactExports.useCallback(function (_temp5, _temp6) { + var _extends5; + var _ref6 = _temp5 === void 0 ? {} : _temp5, + onKeyDown = _ref6.onKeyDown, + onChange = _ref6.onChange, + onInput = _ref6.onInput, + onFocus = _ref6.onFocus, + onBlur = _ref6.onBlur; + _ref6.onChangeText; + var _ref6$refKey = _ref6.refKey, + refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey, + ref = _ref6.ref, + rest = _objectWithoutPropertiesLoose(_ref6, _excluded4); + var _ref7 = _temp6 === void 0 ? {} : _temp6; + _ref7.suppressRefError; + var latestState = latest.current.state; + var inputHandleKeyDown = function inputHandleKeyDown(event) { + var key = normalizeArrowKey(event); + if (key && inputKeyDownHandlers[key]) { + inputKeyDownHandlers[key](event); + } + }; + var inputHandleChange = function inputHandleChange(event) { + dispatch({ + type: InputChange, + inputValue: event.target.value + }); + }; + var inputHandleBlur = function inputHandleBlur(event) { + /* istanbul ignore else */ + if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) { + dispatch({ + type: InputBlur, + selectItem: event.relatedTarget !== null + }); + } + }; + var inputHandleFocus = function inputHandleFocus() { + if (!latestState.isOpen) { + dispatch({ + type: InputFocus + }); + } + }; + + /* istanbul ignore next (preact) */ + var onChangeKey = 'onChange'; + var eventHandlers = {}; + if (!rest.disabled) { + var _eventHandlers; + eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers.onFocus = callAllEventHandlers(onFocus, inputHandleFocus), _eventHandlers); + } + return _extends$x((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) { + inputRef.current = inputNode; + }), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = rest && rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest); + }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]); + + // returns + var toggleMenu = reactExports.useCallback(function () { + dispatch({ + type: FunctionToggleMenu + }); + }, [dispatch]); + var closeMenu = reactExports.useCallback(function () { + dispatch({ + type: FunctionCloseMenu + }); + }, [dispatch]); + var openMenu = reactExports.useCallback(function () { + dispatch({ + type: FunctionOpenMenu + }); + }, [dispatch]); + var setHighlightedIndex = reactExports.useCallback(function (newHighlightedIndex) { + dispatch({ + type: FunctionSetHighlightedIndex, + highlightedIndex: newHighlightedIndex + }); + }, [dispatch]); + var selectItem = reactExports.useCallback(function (newSelectedItem) { + dispatch({ + type: FunctionSelectItem, + selectedItem: newSelectedItem + }); + }, [dispatch]); + var setInputValue = reactExports.useCallback(function (newInputValue) { + dispatch({ + type: FunctionSetInputValue, + inputValue: newInputValue + }); + }, [dispatch]); + var reset = reactExports.useCallback(function () { + dispatch({ + type: FunctionReset$1 + }); + }, [dispatch]); + return { + // prop getters. + getItemProps: getItemProps, + getLabelProps: getLabelProps, + getMenuProps: getMenuProps, + getInputProps: getInputProps, + getToggleButtonProps: getToggleButtonProps, + // actions. + toggleMenu: toggleMenu, + openMenu: openMenu, + closeMenu: closeMenu, + setHighlightedIndex: setHighlightedIndex, + setInputValue: setInputValue, + selectItem: selectItem, + reset: reset, + // state. + highlightedIndex: highlightedIndex, + isOpen: isOpen, + selectedItem: selectedItem, + inputValue: inputValue + }; +} + +/** + * Returns a message to be added to aria-live region when item is removed. + * + * @param {Object} selectionParameters Parameters required to build the message. + * @returns {string} The a11y message. + */ +function getA11yRemovalMessage(selectionParameters) { + var removedSelectedItem = selectionParameters.removedSelectedItem, + itemToStringLocal = selectionParameters.itemToString; + return itemToStringLocal(removedSelectedItem) + " has been removed."; +} +({ + selectedItems: PropTypes.array, + initialSelectedItems: PropTypes.array, + defaultSelectedItems: PropTypes.array, + itemToString: PropTypes.func, + getA11yRemovalMessage: PropTypes.func, + stateReducer: PropTypes.func, + activeIndex: PropTypes.number, + initialActiveIndex: PropTypes.number, + defaultActiveIndex: PropTypes.number, + onActiveIndexChange: PropTypes.func, + onSelectedItemsChange: PropTypes.func, + keyNavigationNext: PropTypes.string, + keyNavigationPrevious: PropTypes.string, + environment: PropTypes.shape({ + addEventListener: PropTypes.func, + removeEventListener: PropTypes.func, + document: PropTypes.shape({ + getElementById: PropTypes.func, + activeElement: PropTypes.any, + body: PropTypes.any + }) + }) +}); +({ + itemToString: defaultProps$3.itemToString, + stateReducer: defaultProps$3.stateReducer, + environment: defaultProps$3.environment, + getA11yRemovalMessage: getA11yRemovalMessage, + keyNavigationNext: 'ArrowRight', + keyNavigationPrevious: 'ArrowLeft' +}); + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +const typeMap = { + [useCombobox$1.stateChangeTypes.FunctionCloseMenu]: 'fn:setExpansion', + [useCombobox$1.stateChangeTypes.FunctionOpenMenu]: 'fn:setExpansion', + [useCombobox$1.stateChangeTypes.FunctionToggleMenu]: 'fn:setExpansion', + [useCombobox$1.stateChangeTypes.FunctionReset]: 'fn:reset', + [useCombobox$1.stateChangeTypes.FunctionSelectItem]: 'fn:setSelectionValue', + [useCombobox$1.stateChangeTypes.FunctionSetHighlightedIndex]: 'fn:setActiveIndex', + [useCombobox$1.stateChangeTypes.FunctionSetInputValue]: 'fn:setInputValue', + [useCombobox$1.stateChangeTypes.InputBlur]: 'input:blur', + [useCombobox$1.stateChangeTypes.InputChange]: 'input:change', + [useCombobox$1.stateChangeTypes.InputFocus]: 'input:focus', + [useCombobox$1.stateChangeTypes.InputKeyDownArrowDown]: `input:keyDown:${KEYS.DOWN}`, + [useCombobox$1.stateChangeTypes.InputKeyDownArrowUp]: `input:keyDown:${KEYS.UP}`, + [useCombobox$1.stateChangeTypes.InputKeyDownEnd]: `input:keyDown:${KEYS.END}`, + [useCombobox$1.stateChangeTypes.InputKeyDownEnter]: `input:keyDown:${KEYS.ENTER}`, + [useCombobox$1.stateChangeTypes.InputKeyDownEscape]: `input:keyDown:${KEYS.ESCAPE}`, + [useCombobox$1.stateChangeTypes.InputKeyDownHome]: `input:keyDown:${KEYS.HOME}`, + [useCombobox$1.stateChangeTypes.InputKeyDownPageDown]: `input:keyDown:${KEYS.PAGE_DOWN}`, + [useCombobox$1.stateChangeTypes.InputKeyDownPageUp]: `input:keyDown:${KEYS.PAGE_UP}`, + [useCombobox$1.stateChangeTypes.ItemClick]: 'option:click', + [useCombobox$1.stateChangeTypes.ItemMouseMove]: 'option:mouseMove', + [useCombobox$1.stateChangeTypes.MenuMouseLeave]: 'listbox:mouseLeave', + [useCombobox$1.stateChangeTypes.ToggleButtonClick]: 'toggle:click' +}; +const toType = downshiftType => { + return typeMap[downshiftType] || downshiftType; +}; +const toLabel = (labels, value) => { + if (value === undefined) { + return ''; + } + const key = typeof value === 'string' ? value : JSON.stringify(value); + return labels[key]; +}; + +const useCombobox = _ref => { + let { + idPrefix, + triggerRef, + inputRef, + listboxRef, + isAutocomplete, + isMultiselectable, + isEditable = true, + disabled, + hasHint, + hasMessage, + options = [], + inputValue, + selectionValue, + isExpanded, + defaultExpanded, + initialExpanded, + activeIndex, + defaultActiveIndex, + initialActiveIndex, + onChange = () => undefined, + environment + } = _ref; + const win = environment || window; + const prefix = `${useId(idPrefix)}-`; + const [triggerContainsInput, setTriggerContainsInput] = reactExports.useState(); + const [matchValue, setMatchValue] = reactExports.useState(''); + const matchTimeoutRef = reactExports.useRef(); + const previousStateRef = reactExports.useRef(); + const labels = reactExports.useMemo(() => ({}), []); + const selectedValues = reactExports.useMemo(() => [], []); + const disabledValues = reactExports.useMemo(() => [], []); + const values = reactExports.useMemo(() => { + const retVal = []; + const setValues = option => { + if (option.disabled) { + if (!disabledValues.includes(option.value)) { + disabledValues.push(option.value); + } + } else { + retVal.push(option.value); + const index = disabledValues.indexOf(option.value); + if (index !== -1) { + disabledValues.splice(index, 1); + } + } + if (option.selected && !selectedValues.includes(option.value)) { + selectedValues.push(option.value); + } + const key = typeof option.value === 'string' ? option.value : JSON.stringify(option.value); + labels[key] = option.label || key; + }; + options.forEach(option => { + if ('options' in option) { + option.options.forEach(setValues); + } else { + setValues(option); + } + }); + return retVal; + }, [options, disabledValues, selectedValues, labels]); + const initialSelectionValue = isMultiselectable ? selectedValues : selectedValues[0]; + const initialInputValue = isMultiselectable ? '' : toLabel(labels, initialSelectionValue); + const _defaultActiveIndex = reactExports.useMemo(() => { + if (defaultActiveIndex === undefined) { + return isAutocomplete && isEditable ? 0 : undefined; + } + return defaultActiveIndex; + }, [defaultActiveIndex, isAutocomplete, isEditable]); + if (selectionValue === undefined || selectionValue === null) { + if (!isMultiselectable && selectedValues.length > 1) { + throw new Error('Error: expected useCombobox `options` to have no more than one selected.'); + } + } + if (selectionValue !== undefined && selectionValue !== null) { + if (isMultiselectable && !Array.isArray(selectionValue)) { + throw new Error('Error: expected multiselectable useCombobox `selectionValue` to be an array.'); + } else if (!isMultiselectable && Array.isArray(selectionValue)) { + throw new Error('Error: expected useCombobox `selectionValue` not to be an array.'); + } + } + const handleDownshiftStateChange = _ref2 => { + let { + type, + isOpen, + selectedItem, + inputValue: _inputValue, + highlightedIndex + } = _ref2; + return onChange({ + type: toType(type), + ...(isOpen !== undefined && { + isExpanded: isOpen + }), + ...(selectedItem !== undefined && { + selectionValue: selectedItem + }), + ...(_inputValue !== undefined && { + inputValue: _inputValue + }), + ...(highlightedIndex !== undefined && { + activeIndex: highlightedIndex + }) + }); + }; + const stateReducer = (state, _ref3) => { + let { + type, + changes, + altKey + } = _ref3; + switch (type) { + case useCombobox$1.stateChangeTypes.ControlledPropUpdatedSelectedItem: + return state; + case useCombobox$1.stateChangeTypes.FunctionSetHighlightedIndex: + if (previousStateRef.current?.altKey) { + changes.highlightedIndex = -1; + } + break; + case useCombobox$1.stateChangeTypes.FunctionCloseMenu: + case useCombobox$1.stateChangeTypes.InputBlur: + return { + ...state, + isOpen: type === useCombobox$1.stateChangeTypes.InputBlur && triggerContainsInput && isMultiselectable && state.isOpen || false + }; + case useCombobox$1.stateChangeTypes.InputFocus: + return { + ...state, + isOpen: false + }; + case useCombobox$1.stateChangeTypes.InputKeyDownArrowDown: + case useCombobox$1.stateChangeTypes.FunctionOpenMenu: + if (state.isOpen !== changes.isOpen && !altKey) { + changes.highlightedIndex = 0; + } + break; + case useCombobox$1.stateChangeTypes.InputKeyDownArrowUp: + if (state.isOpen !== changes.isOpen) { + changes.highlightedIndex = values.length - 1; + } + break; + case useCombobox$1.stateChangeTypes.InputKeyDownEnter: + case useCombobox$1.stateChangeTypes.FunctionSelectItem: + case useCombobox$1.stateChangeTypes.ItemClick: + changes.highlightedIndex = state.highlightedIndex; + if (isMultiselectable) { + changes.isOpen = state.isOpen; + changes.inputValue = ''; + } + break; + case useCombobox$1.stateChangeTypes.InputKeyDownEscape: + return { + ...state, + isOpen: false + }; + case useCombobox$1.stateChangeTypes.InputKeyDownPageDown: + case useCombobox$1.stateChangeTypes.InputKeyDownPageUp: + return state; + } + if (isMultiselectable && state.selectedItem !== changes.selectedItem) { + if (state.selectedItem !== undefined && state.selectedItem !== null && changes.selectedItem !== undefined && changes.selectedItem !== null) { + if (state.selectedItem.includes(changes.selectedItem)) { + changes.selectedItem = state.selectedItem.filter(value => value !== changes.selectedItem); + } else { + changes.selectedItem = [...state.selectedItem, changes.selectedItem]; + } + } else if (changes.selectedItem !== undefined && changes.selectedItem !== null) { + changes.selectedItem = [changes.selectedItem]; + } else { + changes.selectedItem = []; + } + } + previousStateRef.current = { + type, + altKey, + ...state + }; + return changes; + }; + const transformValue = value => value ? toLabel(labels, value) : ''; + const getOptionId = reactExports.useCallback((index, isDisabled) => `${prefix}-option${isDisabled ? '-disabled' : ''}-${index}`, [prefix]); + const { + selectedItem: _selectionValue, + isOpen: _isExpanded, + highlightedIndex: _activeIndex, + inputValue: _inputValue, + getToggleButtonProps: getDownshiftTriggerProps, + getInputProps: getDownshiftInputProps, + getMenuProps: getDownshiftListboxProps, + getItemProps: getDownshiftOptionProps, + closeMenu, + openMenu, + setHighlightedIndex, + selectItem + } = useCombobox$1({ + id: prefix, + toggleButtonId: `${prefix}-trigger`, + menuId: `${prefix}-listbox`, + getItemId: getOptionId, + items: values, + inputValue, + initialInputValue, + itemToString: transformValue , + selectedItem: selectionValue, + initialSelectedItem: initialSelectionValue, + isOpen: isExpanded, + defaultIsOpen: defaultExpanded, + initialIsOpen: initialExpanded, + highlightedIndex: activeIndex, + defaultHighlightedIndex: _defaultActiveIndex, + initialHighlightedIndex: initialActiveIndex, + onStateChange: handleDownshiftStateChange, + stateReducer, + environment: win + }); + const closeListbox = reactExports.useCallback(() => { + closeMenu(); + onChange({ + type: toType(useCombobox$1.stateChangeTypes.FunctionCloseMenu), + isExpanded: false + }); + }, [closeMenu, onChange]); + const openListbox = reactExports.useCallback(() => { + openMenu(); + onChange({ + type: toType(useCombobox$1.stateChangeTypes.FunctionOpenMenu), + isExpanded: true + }); + }, [openMenu, onChange]); + const setActiveIndex = reactExports.useCallback(index => { + setHighlightedIndex(index); + onChange({ + type: toType(useCombobox$1.stateChangeTypes.FunctionSetHighlightedIndex), + activeIndex: index + }); + }, [onChange, setHighlightedIndex]); + const setDownshiftSelection = reactExports.useCallback(value => { + selectItem(value); + onChange({ + type: toType(useCombobox$1.stateChangeTypes.FunctionSelectItem), + selectionValue: value + }); + }, [onChange, selectItem]); + const { + getLabelProps: getFieldLabelProps, + getHintProps, + getInputProps: getFieldInputProps, + getMessageProps + } = useField({ + idPrefix, + hasHint, + hasMessage + }); + reactExports.useLayoutEffect(() => { + if ((isAutocomplete || !isEditable) && _isExpanded && !previousStateRef.current?.isOpen && _selectionValue && !matchValue) { + const value = Array.isArray(_selectionValue) ? _selectionValue[_selectionValue.length - 1 + ] : _selectionValue; + const index = values.findIndex(current => current === value); + if (index !== -1) { + setActiveIndex(index); + } else if (_defaultActiveIndex !== undefined) { + setActiveIndex(_defaultActiveIndex); + } + } + }, [ + isAutocomplete, isEditable, _isExpanded, _selectionValue, _inputValue, values, _defaultActiveIndex, setActiveIndex]); + reactExports.useEffect( + () => setTriggerContainsInput(triggerRef.current?.contains(inputRef.current)), [triggerRef, inputRef]); + reactExports.useEffect(() => { + clearTimeout(matchTimeoutRef.current); + matchTimeoutRef.current = window.setTimeout(() => setMatchValue(''), 500); + return () => clearTimeout(matchTimeoutRef.current); + }, [matchValue]); + reactExports.useEffect(() => { + if (previousStateRef.current?.type === useCombobox$1.stateChangeTypes.FunctionSelectItem) { + if (isEditable) { + inputRef.current?.focus(); + } else { + triggerRef.current?.focus(); + } + previousStateRef.current = { + ...previousStateRef.current, + type: useCombobox$1.stateChangeTypes.InputFocus + }; + } + }); + reactExports.useEffect(() => { + if (isEditable && inputRef.current === win.document.activeElement) { + inputRef.current?.scrollIntoView && inputRef.current?.scrollIntoView({ + block: 'nearest' + }); + } + }, [inputRef, isEditable, win.document.activeElement]); + const getTriggerProps = reactExports.useCallback(function (_temp) { + let { + onBlur, + onClick, + onKeyDown, + ...other + } = _temp === void 0 ? {} : _temp; + const triggerProps = getDownshiftTriggerProps({ + 'data-garden-container-id': 'containers.combobox', + 'data-garden-container-version': '1.0.4', + onBlur, + onClick, + onKeyDown, + ref: triggerRef, + disabled, + ...other + }); + const handleBlur = event => { + if (event.relatedTarget === null || !event.currentTarget?.contains(event.relatedTarget)) { + closeListbox(); + } + }; + if (isEditable && triggerContainsInput) { + const handleClick = event => { + if (disabled) { + event.preventDefault(); + } else if (isAutocomplete) { + triggerProps.onClick(event); + } else { + inputRef.current?.focus(); + } + }; + return { + ...triggerProps, + onBlur: composeEventHandlers(onBlur, handleBlur), + onClick: composeEventHandlers(onClick, handleClick), + 'aria-controls': isAutocomplete ? triggerProps['aria-controls'] : undefined, + 'aria-expanded': undefined, + 'aria-disabled': disabled || undefined, + disabled: undefined + }; + } else if (!isEditable) { + const { + 'aria-activedescendant': ariaActiveDescendant, + onKeyDown: onDownshiftKeyDown + } = getDownshiftInputProps({}, { + suppressRefError: true + }); + const { + 'aria-labelledby': ariaLabeledBy + } = getFieldInputProps(); + const handleKeyDown = event => { + event.stopPropagation(); + if (!_isExpanded && (event.key === KEYS.SPACE || event.key === KEYS.ENTER)) { + event.preventDefault(); + openListbox(); + } else if (_isExpanded && !matchValue && (event.key === KEYS.SPACE || event.key === KEYS.ENTER)) { + event.preventDefault(); + if (_activeIndex !== -1) { + setDownshiftSelection(values[_activeIndex]); + } + if (!isMultiselectable) { + closeListbox(); + } + } else if (/^(?:\S| ){1}$/u.test(event.key)) { + const _matchValue = `${matchValue}${event.key}`; + setMatchValue(_matchValue); + let offset = 0; + if (_isExpanded) { + if (_activeIndex !== -1) { + offset = _matchValue.length === 1 ? _activeIndex + 1 : _activeIndex; + } + } else { + openListbox(); + const offsetValue = Array.isArray(_selectionValue) ? _selectionValue[_selectionValue.length - 1 + ] : _selectionValue; + if (offsetValue !== null) { + offset = values.findIndex(current => current === offsetValue); + } + } + for (let index = 0; index < values.length; index++) { + const valueIndex = (index + offset) % values.length; + const value = values[valueIndex]; + if (toLabel(labels, value).toLowerCase().startsWith(_matchValue.toLowerCase())) { + setActiveIndex(valueIndex); + break; + } + } + } + }; + return { + ...triggerProps, + 'aria-activedescendant': ariaActiveDescendant, + 'aria-haspopup': 'listbox', + 'aria-labelledby': ariaLabeledBy, + 'aria-disabled': disabled || undefined, + disabled: undefined, + role: 'combobox', + onBlur: composeEventHandlers(onBlur, handleBlur), + onKeyDown: composeEventHandlers(onKeyDown, onDownshiftKeyDown, handleKeyDown), + tabIndex: disabled ? -1 : 0 + }; + } + return triggerProps; + }, [getDownshiftTriggerProps, getDownshiftInputProps, getFieldInputProps, triggerRef, disabled, _selectionValue, _isExpanded, _activeIndex, closeListbox, openListbox, setActiveIndex, setDownshiftSelection, matchValue, values, labels, triggerContainsInput, isAutocomplete, isEditable, isMultiselectable, inputRef]); + const getLabelProps = reactExports.useCallback(function (_temp2) { + let { + onClick, + ...other + } = _temp2 === void 0 ? {} : _temp2; + const { + htmlFor, + ...labelProps + } = getFieldLabelProps(other); + const handleClick = () => !isEditable && triggerRef.current?.focus(); + return { + ...labelProps, + onClick: composeEventHandlers(onClick, handleClick), + htmlFor: isEditable ? htmlFor : undefined + }; + }, [getFieldLabelProps, isEditable, triggerRef]); + const getInputProps = reactExports.useCallback(function (_temp3) { + let { + role = isEditable ? 'combobox' : null, + 'aria-labelledby': ariaLabeledBy = null, + onClick, + onFocus, + ...other + } = _temp3 === void 0 ? {} : _temp3; + const inputProps = { + 'data-garden-container-id': 'containers.combobox.input', + 'data-garden-container-version': '1.0.4', + ref: inputRef, + role: role === null ? undefined : role, + onClick, + onFocus + }; + if (isEditable) { + const handleClick = event => event.target instanceof Element && triggerRef.current?.contains(event.target) && event.stopPropagation(); + return getDownshiftInputProps({ + ...inputProps, + disabled, + role, + 'aria-labelledby': ariaLabeledBy, + 'aria-autocomplete': isAutocomplete ? 'list' : undefined, + onClick: composeEventHandlers(onClick, handleClick), + ...getFieldInputProps(), + ...other + }); + } + const downshiftInputProps = getDownshiftInputProps({ + ...inputProps, + disabled: true, + 'aria-autocomplete': undefined, + 'aria-activedescendant': undefined, + 'aria-controls': undefined, + 'aria-expanded': undefined, + 'aria-hidden': true, + 'aria-labelledby': undefined + }); + const handleFocus = () => { + if (!isEditable) { + triggerRef.current?.focus(); + } + }; + return { + ...downshiftInputProps, + disabled, + readOnly: true, + tabIndex: -1, + onFocus: composeEventHandlers(onFocus, handleFocus), + ...other + }; + }, [getDownshiftInputProps, getFieldInputProps, inputRef, triggerRef, disabled, isAutocomplete, isEditable]); + const getTagProps = reactExports.useCallback(_ref4 => { + let { + option, + onClick, + onFocus, + onKeyDown, + ...other + } = _ref4; + const handleClick = event => event.target instanceof Element && triggerRef.current?.contains(event.target) && event.stopPropagation(); + const handleFocus = () => { + if (_isExpanded) { + setActiveIndex(values.findIndex(value => value === option.value)); + } + }; + const handleKeyDown = event => { + if (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) { + setDownshiftSelection(option.value); + } else { + const triggerContainsTag = event.target instanceof Element && triggerRef.current?.contains(event.target); + if (triggerContainsTag && !isEditable) { + event.stopPropagation(); + } + if (triggerContainsTag && (event.key === KEYS.DOWN || event.key === KEYS.UP || event.key === KEYS.ESCAPE || !isEditable && (event.key === KEYS.ENTER || event.key === KEYS.SPACE))) { + const inputProps = getDownshiftInputProps(); + if (isEditable) { + inputRef.current?.focus(); + } else { + event.preventDefault(); + triggerRef.current?.focus(); + } + inputProps.onKeyDown(event); + } + } + }; + return { + 'data-garden-container-id': 'containers.combobox.tag', + 'data-garden-container-version': '1.0.4', + onClick: composeEventHandlers(onClick, handleClick), + onFocus: composeEventHandlers(onFocus, handleFocus), + onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown), + ...other + }; + }, [triggerRef, setDownshiftSelection, getDownshiftInputProps, isEditable, _isExpanded, values, setActiveIndex, inputRef]); + const getListboxProps = reactExports.useCallback(_ref5 => { + let { + role = 'listbox', + 'aria-labelledby': ariaLabeledBy = null, + ...other + } = _ref5; + return getDownshiftListboxProps({ + 'data-garden-container-id': 'containers.combobox.listbox', + 'data-garden-container-version': '1.0.4', + ref: listboxRef, + role, + 'aria-labelledby': ariaLabeledBy, + 'aria-multiselectable': isMultiselectable ? true : undefined, + ...other + }); + }, [getDownshiftListboxProps, listboxRef, isMultiselectable]); + const getOptGroupProps = reactExports.useCallback(_ref6 => { + let { + role = 'group', + ...other + } = _ref6; + return { + 'data-garden-container-id': 'containers.combobox.optgroup', + 'data-garden-container-version': '1.0.4', + role: role === null ? undefined : role, + ...other + }; + }, []); + const getOptionProps = reactExports.useCallback(function (_temp4) { + let { + role = 'option', + option, + onMouseDown, + ...other + } = _temp4 === void 0 ? {} : _temp4; + const optionProps = { + 'data-garden-container-id': 'containers.combobox.option', + 'data-garden-container-version': '1.0.4', + role, + onMouseDown, + ...other + }; + let ariaSelected = false; + if (option?.value !== undefined) { + ariaSelected = Array.isArray(_selectionValue) ? _selectionValue?.includes(option?.value) : _selectionValue === option?.value; + } + if (option === undefined || option.disabled) { + const handleMouseDown = event => event.preventDefault(); + return { + 'aria-disabled': true, + 'aria-selected': ariaSelected, + id: option ? getOptionId(disabledValues.indexOf(option.value), option.disabled) : undefined, + ...optionProps, + onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown) + }; + } + return getDownshiftOptionProps({ + item: option.value, + index: values.indexOf(option.value), + 'aria-selected': ariaSelected, + ...optionProps + }); + }, [getDownshiftOptionProps, disabledValues, values, _selectionValue, getOptionId]); + const removeSelection = reactExports.useCallback(value => { + if (value === undefined) { + setDownshiftSelection(null); + } else { + const removeValue = typeof value === 'object' && 'value' in value ? value.value : value; + if (Array.isArray(_selectionValue) && _selectionValue.includes(removeValue)) { + setDownshiftSelection(removeValue); + } else if (_selectionValue === removeValue) { + setDownshiftSelection(null); + } else ; + } + }, [_selectionValue, setDownshiftSelection]); + const selection = reactExports.useMemo(() => { + if (Array.isArray(_selectionValue)) { + return _selectionValue.map(value => ({ + value, + label: labels[value], + disabled: disabledValues.includes(value) + })); + } else if (_selectionValue) { + return { + value: _selectionValue, + label: toLabel(labels, _selectionValue), + disabled: disabledValues.includes(_selectionValue) + }; + } + return null; + }, [_selectionValue, disabledValues, labels]); + return reactExports.useMemo(() => ({ + getLabelProps, + getHintProps, + getTriggerProps, + getInputProps, + getTagProps, + getListboxProps, + getOptGroupProps, + getOptionProps, + getMessageProps, + selection, + isExpanded: _isExpanded, + activeValue: values[_activeIndex], + inputValue: _inputValue, + removeSelection + }), [values, selection, _isExpanded, _activeIndex, _inputValue, getLabelProps, getHintProps, getTriggerProps, getInputProps, getTagProps, getListboxProps, getOptGroupProps, getOptionProps, getMessageProps, removeSelection]); +}; +({ + children: PropTypes.func, + render: PropTypes.func, + idPrefix: PropTypes.string, + triggerRef: PropTypes.any.isRequired, + inputRef: PropTypes.any.isRequired, + listboxRef: PropTypes.any.isRequired, + isAutocomplete: PropTypes.bool, + isMultiselectable: PropTypes.bool, + isEditable: PropTypes.bool, + disabled: PropTypes.bool, + hasHint: PropTypes.bool, + hasMessage: PropTypes.bool, + options: PropTypes.arrayOf(PropTypes.any).isRequired, + inputValue: PropTypes.string, + selectionValue: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), + isExpanded: PropTypes.bool, + defaultExpanded: PropTypes.bool, + initialExpanded: PropTypes.bool, + activeIndex: PropTypes.number, + defaultActiveIndex: PropTypes.number, + initialActiveIndex: PropTypes.number, + onChange: PropTypes.func, + environment: PropTypes.any +}); + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +function _extends$t() { + _extends$t = Object.assign ? Object.assign.bind() : 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$t.apply(this, arguments); +} + +const FieldContext$1 = reactExports.createContext(undefined); +const useFieldContext$1 = () => { + const fieldContext = reactExports.useContext(FieldContext$1); + return fieldContext; +}; + +const COMPONENT_ID$K = 'forms.field'; +const StyledField$1 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$K, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledField", + componentId: "sc-12gzfsu-0" +})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID$K, props)); +StyledField$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$J = 'forms.fieldset'; +const StyledFieldset = Ye(StyledField$1).attrs({ + as: 'fieldset', + 'data-garden-id': COMPONENT_ID$J, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledFieldset", + componentId: "sc-1vr4mxv-0" +})(["", "{margin-top:", "px;}", ";"], StyledField$1, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID$J, props)); +StyledFieldset.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$I = 'forms.input_label'; +const StyledLabel$1 = Ye.label.attrs(props => ({ + 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$I, + 'data-garden-version': props['data-garden-version'] || '8.69.4' +})).withConfig({ + displayName: "StyledLabel", + componentId: "sc-2utmsz-0" +})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$I, props)); +StyledLabel$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$H = 'forms.fieldset_legend'; +const StyledLegend = Ye(StyledLabel$1).attrs({ + as: 'legend', + 'data-garden-id': COMPONENT_ID$H, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledLegend", + componentId: "sc-6s0zwq-0" +})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$H, props)); +StyledLegend.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$G = 'forms.input_hint'; +const StyledHint$1 = Ye.div.attrs(props => ({ + 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$G, + 'data-garden-version': props['data-garden-version'] || '8.69.4' +})).withConfig({ + displayName: "StyledHint", + componentId: "sc-17c2wu8-0" +})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$G, props)); +StyledHint$1.defaultProps = { + theme: DEFAULT_THEME +}; + +var _g$2, _circle$5; +function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : 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$s.apply(this, arguments); } +var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$s({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _g$2 || (_g$2 = /*#__PURE__*/reactExports.createElement("g", { + fill: "none", + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 8.5, + r: 7 + }), /*#__PURE__*/reactExports.createElement("path", { + strokeLinecap: "round", + d: "M7.5 4.5V9" + }))), _circle$5 || (_circle$5 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 12, + r: 1, + fill: "currentColor" + }))); +}; + +var _path$n, _circle$4; +function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : 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$r.apply(this, arguments); } +var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$r({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$n || (_path$n = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5" + })), _circle$4 || (_circle$4 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 12, + r: 1, + fill: "currentColor" + }))); +}; + +var _g$1; +function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : 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$q.apply(this, arguments); } +var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$q({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _g$1 || (_g$1 = /*#__PURE__*/reactExports.createElement("g", { + fill: "none", + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("path", { + strokeLinecap: "round", + strokeLinejoin: "round", + d: "M4 9l2.5 2.5 5-5" + }), /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 8.5, + r: 7 + })))); +}; + +const MessageIcon = _ref => { + let { + children, + validation, + ...props + } = _ref; + let retVal; + if (validation === 'error') { + retVal = React__default.createElement(SvgAlertErrorStroke, props); + } else if (validation === 'success') { + retVal = React__default.createElement(SvgCheckCircleStroke$1, props); + } else if (validation === 'warning') { + retVal = React__default.createElement(SvgAlertWarningStroke, props); + } else { + retVal = React__default.cloneElement(reactExports.Children.only(children)); + } + return retVal; +}; +const COMPONENT_ID$F = 'forms.input_message_icon'; +const StyledMessageIcon = Ye(MessageIcon).attrs({ + 'data-garden-id': COMPONENT_ID$F, + 'data-garden-version': '8.69.4', + 'aria-hidden': null +}).withConfig({ + displayName: "StyledMessageIcon", + componentId: "sc-1ph2gba-0" +})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$F, props)); +StyledMessageIcon.defaultProps = { + theme: DEFAULT_THEME +}; + +const validationStyles = props => { + const rtl = props.theme.rtl; + const padding = math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`); + let color; + if (props.validation === 'error') { + color = getColor('dangerHue', 600, props.theme); + } else if (props.validation === 'success') { + color = getColor('successHue', 600, props.theme); + } else if (props.validation === 'warning') { + color = getColor('warningHue', 700, props.theme); + } else { + color = getColor('neutralHue', 700, props.theme); + } + return Ne(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color); +}; +const COMPONENT_ID$E = 'forms.input_message'; +const StyledMessage$1 = Ye.div.attrs(props => ({ + 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E, + 'data-garden-version': props['data-garden-version'] || '8.69.4' +})).withConfig({ + displayName: "StyledMessage", + componentId: "sc-30hgg7-0" +})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => validationStyles(props), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel$1, props => math(`${props.theme.space.base} * 1px`), props => retrieveComponentStyles(COMPONENT_ID$E, props)); +StyledMessage$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$D = 'forms.input'; +const isInvalid = validation => { + return validation === 'warning' || validation === 'error'; +}; +const colorStyles$c = props => { + const HUE = 'primaryHue'; + const SHADE = 600; + const placeholderColor = getColor('neutralHue', SHADE - 200, props.theme); + let borderColor; + let hoverBorderColor; + let focusBorderColor; + let focusRingHue = HUE; + let focusRingShade = SHADE; + if (props.validation) { + let hue = HUE; + if (props.validation === 'success') { + hue = 'successHue'; + } else if (props.validation === 'warning') { + hue = 'warningHue'; + focusRingShade = 700; + } else if (props.validation === 'error') { + hue = 'dangerHue'; + } + borderColor = getColor(hue, SHADE, props.theme); + hoverBorderColor = borderColor; + focusBorderColor = borderColor; + focusRingHue = hue; + } else { + borderColor = getColor('neutralHue', SHADE - 300, props.theme); + hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + focusBorderColor = hoverBorderColor; + } + const readOnlyBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme); + const readOnlyBorderColor = getColor('neutralHue', SHADE - 300, props.theme); + const disabledBackgroundColor = readOnlyBackgroundColor; + const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme); + const disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme); + let controlledBorderColor = borderColor; + if (props.isFocused) { + controlledBorderColor = focusBorderColor; + } + if (props.isHovered) { + controlledBorderColor = hoverBorderColor; + } + return Ne(["border-color:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}", " &:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, props.isBare ? 'transparent' : props.theme.colors.background, props.theme.colors.foreground, placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusStyles({ + theme: props.theme, + inset: props.focusInset, + condition: !props.isBare, + hue: focusRingHue, + shade: focusRingShade, + styles: { + borderColor: focusBorderColor + } + }), disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor); +}; +const sizeStyles$f = props => { + const fontSize = props.theme.fontSizes.md; + const paddingHorizontal = `${props.theme.space.base * 3}px`; + let height; + let paddingVertical; + let browseFontSize; + let swatchHeight; + if (props.isCompact) { + height = `${props.theme.space.base * 8}px`; + paddingVertical = `${props.theme.space.base * 1.5}px`; + browseFontSize = math(`${props.theme.fontSizes.sm} - 1`); + swatchHeight = `${props.theme.space.base * 6}px`; + } else { + height = `${props.theme.space.base * 10}px`; + paddingVertical = `${props.theme.space.base * 2.5}px`; + browseFontSize = props.theme.fontSizes.sm; + swatchHeight = `${props.theme.space.base * 7}px`; + } + const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${props.theme.borderWidths.sm} * 2)`); + const padding = props.isBare ? '0' : `${em$1(paddingVertical, fontSize)} ${em$1(paddingHorizontal, fontSize)}`; + const swatchMarginVertical = math(`(${lineHeight} - ${swatchHeight}) / 2`); + const swatchMarginHorizontal = math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`); + return Ne(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", "px;}"], padding, props.isBare ? '1em' : height, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel$1, StyledHint$1, StyledMessage$1, StyledHint$1, StyledMessage$1, props.theme.space.base * (props.isCompact ? 1 : 2)); +}; +const StyledTextInput = Ye.input.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$D, + 'data-garden-version': '8.69.4', + 'aria-invalid': isInvalid(props.validation) +})).withConfig({ + displayName: "StyledTextInput", + componentId: "sc-k12n8x-0" +})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', props => sizeStyles$f(props), props => colorStyles$c(props), props => retrieveComponentStyles(COMPONENT_ID$D, props)); +StyledTextInput.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$C = 'forms.textarea'; +const hiddenStyles = ` + visibility: hidden; + position: absolute; + overflow: hidden; + height: 0; + top: 0; + left: 0; + transform: translateZ(0); +`; +const StyledTextarea = Ye(StyledTextInput).attrs({ + as: 'textarea', + 'data-garden-id': COMPONENT_ID$C, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledTextarea", + componentId: "sc-wxschl-0" +})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID$C, props)); +StyledTextarea.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$B = 'forms.media_figure'; +const colorStyles$b = props => { + let shade = 600; + if (props.isDisabled) { + shade = 400; + } else if (props.isHovered || props.isFocused) { + shade = 700; + } + return Ne(["color:", ";"], getColor('neutralHue', shade, props.theme)); +}; +const sizeStyles$e = props => { + const size = props.theme.iconSizes.md; + const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`; + const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`; + let margin; + if (props.position === 'start') { + margin = props.theme.rtl ? marginLast : marginFirst; + } else { + margin = props.theme.rtl ? marginFirst : marginLast; + } + return Ne(["margin:", ";width:", ";height:", ";"], margin, size, size); +}; +const StyledTextMediaFigure = Ye( +_ref => { + let { + children, + position, + isHovered, + isFocused, + isDisabled, + isRotated, + theme, + ...props + } = _ref; + return React__default.cloneElement(reactExports.Children.only(children), props); +}).attrs({ + 'data-garden-id': COMPONENT_ID$B, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledTextMediaFigure", + componentId: "sc-1qepknj-0" +})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles$b(props), props => sizeStyles$e(props), props => retrieveComponentStyles(COMPONENT_ID$B, props)); +StyledTextMediaFigure.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$A = 'forms.faux_input'; +const VALIDATION_HUES = { + success: 'successHue', + warning: 'warningHue', + error: 'dangerHue' +}; +function getValidationHue(validation) { + let defaultHue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'primaryHue'; + if (validation) { + return VALIDATION_HUES[validation]; + } + return defaultHue; +} +const colorStyles$a$1 = props => { + const { + theme, + validation, + focusInset, + isBare, + isFocused + } = props; + return Ne(["", ""], focusStyles({ + theme, + inset: focusInset, + condition: !isBare, + hue: getValidationHue(validation), + shade: validation === 'warning' ? 700 : 600, + selector: isFocused ? '&' : '&:focus-within', + styles: { + borderColor: getColor(getValidationHue(validation), 600, theme) + } + })); +}; +const StyledTextFauxInput = Ye(StyledTextInput).attrs(props => ({ + as: 'div', + 'aria-readonly': props.isReadOnly, + 'aria-disabled': props.isDisabled, + 'data-garden-id': COMPONENT_ID$A, + 'data-garden-version': '8.69.4' +})).withConfig({ + displayName: "StyledTextFauxInput", + componentId: "sc-yqw7j9-0" +})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;", " & > ", "{vertical-align:", ";", "{box-shadow:unset;}}& > ", "{flex-shrink:", ";}", ";"], props => props.mediaLayout ? 'inline-flex' : 'inline-block', props => props.mediaLayout && 'baseline', props => props.mediaLayout && !props.isDisabled ? 'text' : 'default', colorStyles$a$1, StyledTextInput, props => !props.mediaLayout && 'baseline', SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.mediaLayout && '0', props => retrieveComponentStyles(COMPONENT_ID$A, props)); +StyledTextFauxInput.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$z = 'forms.media_input'; +const StyledTextMediaInput = Ye(StyledTextInput).attrs({ + 'data-garden-id': COMPONENT_ID$z, + 'data-garden-version': '8.69.4', + isBare: true +}).withConfig({ + displayName: "StyledTextMediaInput", + componentId: "sc-12i9xfi-0" +})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$z, props)); +StyledTextMediaInput.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$y = 'forms.input_group'; +const positionStyles = props => { + const topMargin = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`; + return Ne(["", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}& > ", "{position:relative;flex:1 1 auto;margin-top:0;margin-bottom:0;width:auto;min-width:0;}"], StyledLabel$1, StyledHint$1, StyledMessage$1, StyledHint$1, StyledMessage$1, topMargin, StyledTextInput); +}; +const itemStyles = props => { + const startDirection = props.theme.rtl ? 'right' : 'left'; + const endDirection = props.theme.rtl ? 'left' : 'right'; + return Ne(["& > *{z-index:-1;}& > ", "{z-index:0;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", ":focus-visible,& > button:focus-visible,& > ", "[data-garden-focus-visible],& > button[data-garden-focus-visible],& > ", ":active,& > button:active{z-index:1;}& > button:disabled{border-top-width:0;border-bottom-width:0;}& > *:not(:first-child){margin-", ":-", ";}& > *:first-child:not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:last-child:not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:not(:first-child):not(:last-child){border-radius:0;}"], StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection); +}; +const StyledInputGroup$1 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$y, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledInputGroup", + componentId: "sc-kjh1f0-0" +})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles(props), props => itemStyles(props), props => retrieveComponentStyles(COMPONENT_ID$y, props)); +StyledInputGroup$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$x = 'forms.radio_label'; +const sizeStyles$d = props => { + const size = props.theme.space.base * 4; + const padding = size + props.theme.space.base * 2; + const lineHeight = props.theme.space.base * 5; + return Ne(["padding-", ":", "px;&[hidden]{padding-", ":", "px;line-height:", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size, lineHeight); +}; +const StyledRadioLabel = Ye(StyledLabel$1).attrs({ + 'data-garden-id': COMPONENT_ID$x, + 'data-garden-version': '8.69.4', + isRadio: true +}).withConfig({ + displayName: "StyledRadioLabel", + componentId: "sc-1aq2e5t-0" +})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d(props), props => retrieveComponentStyles(COMPONENT_ID$x, props)); +StyledRadioLabel.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$w$1 = 'forms.checkbox_label'; +const StyledCheckLabel = Ye(StyledRadioLabel).attrs({ + 'data-garden-id': COMPONENT_ID$w$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledCheckLabel", + componentId: "sc-x7nr1-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$w$1, props)); +StyledCheckLabel.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$v$1 = 'forms.radio_hint'; +const StyledRadioHint = Ye(StyledHint$1).attrs({ + 'data-garden-id': COMPONENT_ID$v$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledRadioHint", + componentId: "sc-eo8twg-0" +})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$v$1, props)); +StyledRadioHint.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$u$1 = 'forms.checkbox_hint'; +const StyledCheckHint = Ye(StyledRadioHint).attrs({ + 'data-garden-id': COMPONENT_ID$u$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledCheckHint", + componentId: "sc-1kl8e8c-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$u$1, props)); +StyledCheckHint.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$t$1 = 'forms.radio'; +const colorStyles$9$1 = props => { + const SHADE = 600; + const borderColor = getColor('neutralHue', SHADE - 300, props.theme); + const backgroundColor = props.theme.colors.background; + const iconColor = backgroundColor; + const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08); + const hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + const focusBorderColor = hoverBorderColor; + const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2); + const activeBorderColor = focusBorderColor; + const checkedBorderColor = focusBorderColor; + const checkedBackgroundColor = checkedBorderColor; + const checkedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme); + const checkedHoverBackgroundColor = checkedHoverBorderColor; + const checkedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme); + const checkedActiveBackgroundColor = checkedActiveBorderColor; + const disabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + return Ne(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}", " & ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel, borderColor, backgroundColor, StyledRadioLabel, iconColor, StyledRadioLabel, hoverBorderColor, hoverBackgroundColor, focusStyles({ + theme: props.theme, + styles: { + borderColor: focusBorderColor + }, + selector: `&:focus-visible ~ ${StyledRadioLabel}::before, &[data-garden-focus-visible='true'] ~ ${StyledRadioLabel}::before` + }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor); +}; +const sizeStyles$c$1 = props => { + const lineHeight = `${props.theme.space.base * 5}px`; + const size = `${props.theme.space.base * 4}px`; + const top = math(`(${lineHeight} - ${size}) / 2`); + const iconSize = props.theme.iconSizes.sm; + const iconPosition = math(`(${size} - ${iconSize}) / 2`); + const iconTop = math(`${iconPosition} + ${top}`); + const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`; + return Ne(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage$1, marginTop); +}; +const StyledRadioInput = Ye.input.attrs({ + 'data-garden-id': COMPONENT_ID$t$1, + 'data-garden-version': '8.69.4', + type: 'radio' +}).withConfig({ + displayName: "StyledRadioInput", + componentId: "sc-qsavpv-0" +})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, StyledRadioLabel, props => sizeStyles$c$1(props), StyledRadioLabel, StyledRadioLabel, props => colorStyles$9$1(props), StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$t$1, props)); +StyledRadioInput.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$s$1 = 'forms.checkbox'; +const colorStyles$8$1 = props => { + const SHADE = 600; + const indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme); + const indeterminateBackgroundColor = indeterminateBorderColor; + const indeterminateActiveBorderColor = getColor('primaryHue', SHADE + 100, props.theme); + const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor; + const indeterminateDisabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + return Ne(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled:indeterminate ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledCheckLabel, indeterminateBorderColor, indeterminateBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor); +}; +const StyledCheckInput = Ye(StyledRadioInput).attrs({ + 'data-garden-id': COMPONENT_ID$s$1, + 'data-garden-version': '8.69.4', + type: 'checkbox' +}).withConfig({ + displayName: "StyledCheckInput", + componentId: "sc-176jxxe-0" +})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles$8$1(props), props => retrieveComponentStyles(COMPONENT_ID$s$1, props)); +StyledCheckInput.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$r$1 = 'forms.radio_message'; +const StyledRadioMessage = Ye(StyledMessage$1).attrs({ + 'data-garden-id': COMPONENT_ID$r$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledRadioMessage", + componentId: "sc-1pmi0q8-0" +})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$r$1, props)); +StyledRadioMessage.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$q$1 = 'forms.checkbox_message'; +const StyledCheckMessage = Ye(StyledRadioMessage).attrs({ + 'data-garden-id': COMPONENT_ID$q$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledCheckMessage", + componentId: "sc-s4p6kd-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$q$1, props)); +StyledCheckMessage.defaultProps = { + theme: DEFAULT_THEME +}; + +var _path$m; +function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : 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$p.apply(this, arguments); } +var SvgCheckSmFill = function SvgCheckSmFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$p({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$m || (_path$m = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + strokeLinejoin: "round", + strokeWidth: 2, + d: "M3 6l2 2 4-4" + }))); +}; + +const COMPONENT_ID$p$1 = 'forms.check_svg'; +const StyledCheckSvg = Ye(SvgCheckSmFill).attrs({ + 'data-garden-id': COMPONENT_ID$p$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledCheckSvg", + componentId: "sc-fvxetk-0" +})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$p$1, props)); +StyledCheckSvg.defaultProps = { + theme: DEFAULT_THEME +}; + +var _path$l; +function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : 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$o.apply(this, arguments); } +var SvgDashFill = function SvgDashFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$o({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$l || (_path$l = /*#__PURE__*/reactExports.createElement("path", { + stroke: "currentColor", + strokeLinecap: "round", + strokeWidth: 2, + d: "M3 6h6" + }))); +}; + +const COMPONENT_ID$o$1 = 'forms.dash_svg'; +const StyledDashSvg = Ye(SvgDashFill).attrs({ + 'data-garden-id': COMPONENT_ID$o$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledDashSvg", + componentId: "sc-z3vq71-0" +})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$o$1, props)); +StyledDashSvg.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$n$1 = 'forms.file_upload'; +const colorStyles$7$1 = props => { + const baseColor = getColor('primaryHue', 600, props.theme); + const hoverColor = getColor('primaryHue', 700, props.theme); + const activeColor = getColor('primaryHue', 800, props.theme); + const disabledBackgroundColor = getColor('neutralHue', 200, props.theme); + const disabledForegroundColor = getColor('neutralHue', 400, props.theme); + return Ne(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : getColor('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, focusStyles({ + theme: props.theme, + hue: baseColor + }), activeColor, rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor); +}; +const sizeStyles$b$1 = props => { + const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`; + const paddingHorizontal = `${props.isCompact ? 2 : 4}em`; + const paddingVertical = math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`); + const fontSize = props.theme.fontSizes.md; + const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize); + return Ne(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel$1, StyledHint$1, StyledMessage$1, StyledHint$1, StyledMessage$1, marginTop); +}; +const StyledFileUpload = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$n$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledFileUpload", + componentId: "sc-1rodjgn-0" +})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles$b$1, colorStyles$7$1, props => retrieveComponentStyles(COMPONENT_ID$n$1, props)); +StyledFileUpload.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$m$1 = 'forms.file.close'; +const StyledFileClose = Ye.button.attrs({ + 'data-garden-id': COMPONENT_ID$m$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledFileClose", + componentId: "sc-1m31jbf-0" +})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => props.theme.colors.foreground, props => retrieveComponentStyles(COMPONENT_ID$m$1, props)); +StyledFileClose.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$l$1 = 'forms.file'; +const colorStyles$6$1 = props => { + let borderColor; + let focusBorderColor; + let foregroundColor; + if (props.validation === 'success') { + borderColor = getColor('successHue', 600, props.theme); + focusBorderColor = borderColor; + foregroundColor = borderColor; + } else if (props.validation === 'error') { + borderColor = getColor('dangerHue', 600, props.theme); + focusBorderColor = borderColor; + foregroundColor = borderColor; + } else { + borderColor = getColor('neutralHue', 300, props.theme); + focusBorderColor = getColor('primaryHue', 600, props.theme); + foregroundColor = props.theme.colors.foreground; + } + return Ne(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({ + theme: props.theme, + inset: props.focusInset, + hue: focusBorderColor, + styles: { + borderColor: focusBorderColor + } + })); +}; +const sizeStyles$a$1 = props => { + const size = `${props.theme.space.base * (props.isCompact ? 7 : 10)}px`; + const spacing = `${props.theme.space.base * (props.isCompact ? 2 : 3)}px`; + const fontSize = props.theme.fontSizes.md; + const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize); + return ` + box-sizing: border-box; + border: ${props.theme.borders.sm}; + border-radius: ${props.theme.borderRadii.md}; + padding: 0 ${spacing}; + height: ${size}; + line-height: ${lineHeight}; + font-size: ${fontSize}; + + & > span { + width: 100%; + } + + & > ${StyledFileClose} { + width: ${size}; + height: ${size}; + margin-${props.theme.rtl ? 'left' : 'right'}: -${spacing}; + } + `; +}; +const StyledFile = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$l$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledFile", + componentId: "sc-195lzp1-0" +})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;transition:box-shadow 0.1s ease-in-out;", ";", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$a$1, colorStyles$6$1, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$l$1, props)); +StyledFile.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$k$1 = 'forms.file.delete'; +const StyledFileDelete = Ye(StyledFileClose).attrs({ + 'data-garden-id': COMPONENT_ID$k$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledFileDelete", + componentId: "sc-a8nnhx-0" +})(["color:", ";", ";"], props => getColor('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$k$1, props)); +StyledFileDelete.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$j$1 = 'forms.file.icon'; +const StyledFileIcon = Ye(_ref => { + let { + children, + isCompact, + theme, + ...props + } = _ref; + return React__default.cloneElement(reactExports.Children.only(children), props); +}).attrs({ + 'data-garden-id': COMPONENT_ID$j$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledFileIcon", + componentId: "sc-7b3q0c-0" +})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$j$1, props)); +StyledFileIcon.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$i$1 = 'forms.file_list'; +const StyledFileList = Ye.ul.attrs({ + 'data-garden-id': COMPONENT_ID$i$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledFileList", + componentId: "sc-gbahjg-0" +})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$i$1, props)); +StyledFileList.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$h$1 = 'forms.file_list.item'; +const StyledFileListItem = Ye.li.attrs({ + 'data-garden-id': COMPONENT_ID$h$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledFileListItem", + componentId: "sc-1ova3lo-0" +})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$h$1, props)); +StyledFileListItem.defaultProps = { + theme: DEFAULT_THEME +}; + +var _circle$3; +function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : 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$n.apply(this, arguments); } +var SvgCircleSmFill$1 = function SvgCircleSmFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$n({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _circle$3 || (_circle$3 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 6, + cy: 6, + r: 2, + fill: "currentColor" + }))); +}; + +const COMPONENT_ID$g$1 = 'forms.radio_svg'; +const StyledRadioSvg = Ye(SvgCircleSmFill$1).attrs({ + 'data-garden-id': COMPONENT_ID$g$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledRadioSvg", + componentId: "sc-1r1qtr1-0" +})(["transition:opacity 0.25s ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$g$1, props)); +StyledRadioSvg.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$f$1 = 'forms.toggle_label'; +const sizeStyles$9$1 = props => { + const size = props.theme.space.base * 10; + const padding = size + props.theme.space.base * 2; + return Ne(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size); +}; +const StyledToggleLabel = Ye(StyledCheckLabel).attrs({ + 'data-garden-id': COMPONENT_ID$f$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledToggleLabel", + componentId: "sc-e0asdk-0" +})(["", ";", ";"], props => sizeStyles$9$1(props), props => retrieveComponentStyles(COMPONENT_ID$f$1, props)); +StyledToggleLabel.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$e$1 = 'forms.toggle_hint'; +const StyledToggleHint = Ye(StyledHint$1).attrs({ + 'data-garden-id': COMPONENT_ID$e$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledToggleHint", + componentId: "sc-nziggu-0" +})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID$e$1, props)); +StyledToggleHint.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$d$1 = 'forms.toggle'; +const colorStyles$5$1 = props => { + const SHADE = 600; + const backgroundColor = getColor('neutralHue', SHADE - 100, props.theme); + const hoverBackgroundColor = getColor('neutralHue', SHADE, props.theme); + const activeBackgroundColor = getColor('neutralHue', SHADE + 100, props.theme); + return Ne(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor); +}; +const sizeStyles$8$1 = props => { + const height = `${props.theme.space.base * 5}px`; + const width = `${props.theme.space.base * 10}px`; + const iconSize = props.theme.iconSizes.md; + const iconPosition = math(`(${height} - ${iconSize}) / 2`); + const checkedIconPosition = math(`${width} - ${iconSize} - ${iconPosition}`); + return Ne(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition); +}; +const StyledToggleInput = Ye(StyledCheckInput).attrs({ + 'data-garden-id': COMPONENT_ID$d$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledToggleInput", + componentId: "sc-sgp47s-0" +})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, props => sizeStyles$8$1(props), props => colorStyles$5$1(props), props => retrieveComponentStyles(COMPONENT_ID$d$1, props)); +StyledToggleInput.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$c$1 = 'forms.toggle_message'; +const StyledToggleMessage = Ye(StyledMessage$1).attrs({ + 'data-garden-id': COMPONENT_ID$c$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledToggleMessage", + componentId: "sc-13vuvl1-0" +})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => retrieveComponentStyles(COMPONENT_ID$c$1, props)); +StyledToggleMessage.defaultProps = { + theme: DEFAULT_THEME +}; + +var _circle$2; +function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : 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$m.apply(this, arguments); } +var SvgCircleSmFill = function SvgCircleSmFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$m({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _circle$2 || (_circle$2 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 8, + cy: 8, + r: 6, + fill: "currentColor" + }))); +}; + +const COMPONENT_ID$b$1 = 'forms.toggle_svg'; +const StyledToggleSvg = Ye(SvgCircleSmFill).attrs({ + 'data-garden-id': COMPONENT_ID$b$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledToggleSvg", + componentId: "sc-162xbyx-0" +})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b$1, props)); +StyledToggleSvg.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$a$1 = 'forms.select'; +const colorStyles$4$1 = props => { + const color = getColor('neutralHue', 700, props.theme); + return Ne(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color); +}; +const sizeStyles$7$1 = props => { + const padding = math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`); + const iconVerticalPosition = `${props.theme.space.base * (props.isCompact ? 1.5 : 2.5) + 1}px`; + const iconHorizontalPosition = `${props.theme.space.base * 3}px`; + return Ne(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition); +}; +const StyledSelect = Ye(StyledTextInput).attrs({ + 'data-garden-id': COMPONENT_ID$a$1, + 'data-garden-version': '8.69.4', + as: 'select' +}).withConfig({ + displayName: "StyledSelect", + componentId: "sc-8xdxpt-0" +})(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], props => sizeStyles$7$1(props), props => colorStyles$4$1(props), props => props.theme.colors.foreground, StyledTextMediaFigure); +StyledSelect.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$9$1 = 'forms.select_wrapper'; +const StyledSelectWrapper = Ye(StyledTextFauxInput).attrs({ + 'data-garden-id': COMPONENT_ID$9$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledSelectWrapper", + componentId: "sc-i7b6hw-0" +})(["position:relative;padding:0;overflow:visible;& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], StyledSelect, SELECTOR_FOCUS_VISIBLE); +StyledSelectWrapper.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$8$1 = 'forms.range'; +const thumbStyles = function (styles) { + let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return ` + &${modifier}::-moz-range-thumb { + ${styles} + } + + &${modifier}::-ms-thumb { + ${styles} + } + + &${modifier}::-webkit-slider-thumb { + ${styles} + } + `; +}; +const trackStyles = function (styles) { + let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return ` + &${modifier}::-moz-range-track { + ${styles} + } + + &${modifier}::-ms-track { + ${styles} + } + + &${modifier}::-webkit-slider-runnable-track { + ${styles} + } + `; +}; +const trackLowerStyles = function (styles) { + let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return ` + &${modifier}::-moz-range-progress { + ${styles} + } + + &${modifier}::-ms-fill-lower { + ${styles} + } + `; +}; +const colorStyles$3$1 = props => { + const SHADE = 600; + const thumbBackgroundColor = getColor('primaryHue', SHADE, props.theme); + const thumbBorderColor = thumbBackgroundColor; + const thumbBoxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24)); + const thumbFocusBoxShadow = getFocusBoxShadow({ + theme: props.theme + }); + const thumbActiveBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme); + const thumbActiveBorderColor = thumbBorderColor; + const thumbDisabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme); + const thumbDisabledBorderColor = thumbDisabledBackgroundColor; + const thumbHoverBackgroundColor = thumbActiveBackgroundColor; + const thumbHoverBorderColor = thumbHoverBackgroundColor; + const trackBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + const trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : ''; + const trackBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : ''; + const trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : ''; + const trackDisabledBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : ''; + return Ne(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles(` + background-color: ${trackBackgroundColor}; + background-image: ${trackBackgroundImage}; /* provide means for styling lower range on WebKit */ + `), thumbStyles(` + border-color: ${thumbBorderColor}; + box-shadow: ${thumbBoxShadow}; + background-color: ${thumbBackgroundColor}; + `), trackLowerStyles(` + background-color: ${trackLowerBackgroundColor}; + `), thumbStyles(` + transition: + border-color .25s ease-in-out, + background-color .25s ease-in-out; + border-color: ${thumbHoverBorderColor}; + background-color: ${thumbHoverBackgroundColor}; + `, ':hover'), thumbStyles(` + box-shadow: ${thumbFocusBoxShadow}; + `, '[data-garden-focus-visible="true"]'), thumbStyles(` + border-color: ${thumbActiveBorderColor}; + background-color: ${thumbActiveBackgroundColor}; + `, ':active'), trackStyles(` + background-image: ${trackDisabledBackgroundImage}; + `, ':disabled'), thumbStyles(` + border-color: ${thumbDisabledBorderColor}; + box-shadow: none; + background-color: ${thumbDisabledBackgroundColor}; + `, ':disabled'), trackLowerStyles(` + background-color: ${trackDisabledLowerBackgroundColor}; + `, ':disabled')); +}; +const sizeStyles$6$1 = props => { + const thumbSize = math(`${props.theme.space.base} * 5px`); + const trackHeight = math(`${props.theme.space.base} * 1.5px`); + const trackBorderRadius = trackHeight; + const trackMargin = math(`(${thumbSize} - ${trackHeight}) / 2 + ${props.theme.shadowWidths.md}`); + const thumbMargin = math(`(${trackHeight} - ${thumbSize}) / 2`); + return Ne(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel$1, StyledHint$1, StyledMessage$1, StyledHint$1, StyledMessage$1, math(`${props.theme.space.base} * 2px`), trackStyles(` + margin: ${trackMargin} 0; + border-radius: ${trackBorderRadius}; + height: ${trackHeight}; + `), thumbStyles(` + margin: ${thumbMargin} 0; /* reset for IE */ + width: ${thumbSize}; + height: ${thumbSize}; + `), trackLowerStyles(` + border-top-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius}; + border-bottom-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius}; + height: ${trackHeight}; + `)); +}; +const StyledRangeInput = Ye.input.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$8$1, + 'data-garden-version': '8.69.4', + type: 'range', + style: { + backgroundSize: props.hasLowerTrack && props.backgroundSize + } +})).withConfig({ + displayName: "StyledRangeInput", + componentId: "sc-1iv2yqp-0" +})(["appearance:none;direction:", ";margin:0;background-color:inherit;cursor:pointer;padding:0;width:100%;vertical-align:middle;", " &::-webkit-slider-container,&::-webkit-slider-runnable-track{background-size:inherit;}", ";", " ", ";&::-moz-focus-outer{border:0;}&::-ms-tooltip{display:none;}&:focus{outline:none;}&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => trackStyles(` + appearance: none; + border-color: transparent; /* reset for IE */ + background-repeat: repeat-y; + background-size: 0; + background-position: ${props.theme.rtl ? '100% 100%' : '0% 0%'}; + width: 99.8%; /* fix for IE which cuts off the upper track's border radius */ + color: transparent; /* reset for IE */ + box-sizing: border-box; /* reset for IE */ + `), props => sizeStyles$6$1(props), props => thumbStyles(` + appearance: none; + transition: box-shadow .1s ease-in-out; + border: ${props.theme.borders.md}; + border-radius: 100%; + box-sizing: border-box; + `), props => colorStyles$3$1(props), props => retrieveComponentStyles(COMPONENT_ID$8$1, props)); +StyledRangeInput.defaultProps = { + backgroundSize: '0%', + hasLowerTrack: true, + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$7$1 = 'forms.slider'; +const StyledSlider = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$7$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledSlider", + componentId: "sc-1di437a-0" +})(["display:block;position:relative;z-index:0;cursor:pointer;height:", ";&[aria-disabled='true']{cursor:default;}", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";"], props => math(`(${props.theme.space.base} * 5px) + (${props.theme.shadowWidths.md} * 2)`), StyledLabel$1, StyledHint$1, StyledMessage$1, StyledHint$1, StyledMessage$1, props => math(`${props.theme.space.base} * 2px`), props => retrieveComponentStyles(COMPONENT_ID$7$1, props)); +StyledSlider.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$6$1 = 'forms.slider_thumb'; +const colorStyles$2$1 = props => { + const SHADE = 600; + const backgroundColor = getColor('primaryHue', SHADE, props.theme); + const borderColor = backgroundColor; + const boxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24)); + const activeBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme); + const activeBorderColor = borderColor; + const hoverBackgroundColor = activeBackgroundColor; + const hoverBorderColor = hoverBackgroundColor; + const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme); + const disabledBorderColor = disabledBackgroundColor; + return Ne(["border-color:", ";box-shadow:", ";background-color:", ";&:hover,&[data-garden-hover='true']{border-color:", ";background-color:", ";}", " &:active,&[data-garden-active='true']{border-color:", ";background-color:", ";}&[aria-disabled='true']{border-color:", ";box-shadow:none;background-color:", ";}"], borderColor, boxShadow, backgroundColor, hoverBorderColor, hoverBackgroundColor, focusStyles({ + theme: props.theme + }), activeBorderColor, activeBackgroundColor, disabledBorderColor, disabledBackgroundColor); +}; +const sizeStyles$5$1 = props => { + const size = math(`${props.theme.space.base} * 5px`); + const marginTop = math(`${size} / -2`); + return Ne(["margin-top:", ";width:", ";height:", ";"], marginTop, size, size); +}; +const StyledSliderThumb = Ye.div.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$6$1, + 'data-garden-version': '8.69.4', + 'aria-disabled': props.isDisabled +})).withConfig({ + displayName: "StyledSliderThumb", + componentId: "sc-yspbwa-0" +})(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.position} * 1px`), props => props.theme.borders.md, props => sizeStyles$5$1(props), props => colorStyles$2$1(props), props => retrieveComponentStyles(COMPONENT_ID$6$1, props)); +StyledSliderThumb.defaultProps = { + position: 0, + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$5$1 = 'forms.slider_track'; +const colorStyles$1$1 = props => { + const SHADE = 600; + const backgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + const backgroundImageColor = getColor('primaryHue', SHADE, props.theme); + const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme); + return Ne(["background-color:", ";background-image:linear-gradient(", ",", ");&[aria-disabled='true']{background-image:linear-gradient(", ",", ");}"], backgroundColor, backgroundImageColor, backgroundImageColor, disabledBackgroundColor, disabledBackgroundColor); +}; +const sizeStyles$4$1 = props => { + const height = math(`${props.theme.space.base} * 1.5px`); + const backgroundPosition = math(`${props.backgroundPosition} * 1px`); + const backgroundSize = math(`${props.backgroundSize} * 1px`); + const borderRadius = height; + const marginTop = math(`${height} / -2`); + const padding = math(`${props.theme.space.base} * 2.5px`); + return Ne(["margin-top:", ";border-radius:", ";background-position:", ";background-size:", ";padding:0 ", ";"], marginTop, borderRadius, backgroundPosition, backgroundSize, padding); +}; +const StyledSliderTrack = Ye.div.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$5$1, + 'data-garden-version': '8.69.4', + 'aria-disabled': props.isDisabled +})).withConfig({ + displayName: "StyledSliderTrack", + componentId: "sc-aw5m6g-0" +})(["position:absolute;top:50%;box-sizing:border-box;background-origin:content-box;background-repeat:repeat-y;width:100%;", ";", ";", ";"], props => sizeStyles$4$1(props), props => colorStyles$1$1(props), props => retrieveComponentStyles(COMPONENT_ID$5$1, props)); +StyledSliderTrack.defaultProps = { + backgroundSize: 0, + backgroundPosition: 0, + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$4$1 = 'forms.slider_track_rail'; +const sizeStyles$3$1 = props => { + const height = math(`${props.theme.space.base} * 1.5px`); + const margin = math(`${props.theme.space.base} * 2.5px`); + return Ne(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? `-${margin}` : margin, props.theme.rtl ? margin : `-${margin}`, height); +}; +const StyledSliderTrackRail = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$4$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledSliderTrackRail", + componentId: "sc-1o5owbd-0" +})(["position:relative;", ";", ";"], props => sizeStyles$3$1(props), props => retrieveComponentStyles(COMPONENT_ID$4$1, props)); +StyledSliderTrackRail.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$3$1 = 'forms.tile_icon'; +const sizeStyles$2$1 = props => { + const iconSize = math(`${props.theme.iconSizes.md} * 2`); + let position; + let top; + let horizontalValue; + if (!props.isCentered) { + position = 'absolute'; + top = `${props.theme.space.base * 6}px`; + horizontalValue = `left: ${props.theme.space.base * 5}px`; + if (props.theme.rtl) { + horizontalValue = `right: ${props.theme.space.base * 5}px`; + } + } + return Ne(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize); +}; +const StyledTileIcon = Ye.span.attrs({ + 'data-garden-id': COMPONENT_ID$3$1, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledTileIcon", + componentId: "sc-1wazhg4-0" +})(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], props => sizeStyles$2$1(props), props => retrieveComponentStyles(COMPONENT_ID$3$1, props)); +StyledTileIcon.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$2$3 = 'forms.tile'; +const colorStyles$d = props => { + const SHADE = 600; + const iconColor = getColor('neutralHue', SHADE, props.theme); + const color = getColor('neutralHue', SHADE + 200, props.theme); + const borderColor = getColor('neutralHue', SHADE - 300, props.theme); + const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08); + const hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + const focusBorderColor = hoverBorderColor; + const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2); + const activeBorderColor = focusBorderColor; + const disabledBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme); + const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme); + const disabledColor = getColor('neutralHue', SHADE - 200, props.theme); + const selectedBorderColor = focusBorderColor; + const selectedBackgroundColor = selectedBorderColor; + const selectedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme); + const selectedHoverBackgroundColor = selectedHoverBorderColor; + const selectedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme); + const selectedActiveBackgroundColor = selectedActiveBorderColor; + const selectedDisabledBackgroundColor = disabledBorderColor; + return Ne(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}", " &:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusStyles({ + theme: props.theme, + hue: focusBorderColor, + styles: { + borderColor: focusBorderColor + }, + selector: `&:focus-within` + }), activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedHoverBorderColor, selectedHoverBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedActiveBorderColor, selectedActiveBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor); +}; +const StyledTile = Ye.label.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$2$3, + 'data-garden-version': '8.69.4', + 'data-garden-selected': props.isSelected +})).withConfig({ + displayName: "StyledTile", + componentId: "sc-1jjvmxs-0" +})(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";cursor:", ";padding:", "px;direction:", ";min-width:132px;word-break:break-word;", ";", ";"], props => props.theme.borderRadii.md, props => !props.isDisabled && 'pointer', props => props.theme.space.base * 5, props => props.theme.rtl && 'rtl', props => colorStyles$d(props), props => retrieveComponentStyles(COMPONENT_ID$2$3, props)); +StyledTile.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$1$3 = 'forms.tile_description'; +const sizeStyles$1$1 = props => { + let marginDirection = 'left'; + let marginValue; + if (props.theme.rtl) { + marginDirection = 'right'; + } + if (!props.isCentered) { + marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`); + } + return Ne(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue); +}; +const StyledTileDescription = Ye.span.attrs({ + 'data-garden-id': COMPONENT_ID$1$3, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledTileDescription", + componentId: "sc-xfuu7u-0" +})(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => sizeStyles$1$1(props), props => retrieveComponentStyles(COMPONENT_ID$1$3, props)); +StyledTileDescription.defaultProps = { + theme: DEFAULT_THEME +}; + +const StyledTileInput = Ye.input.withConfig({ + displayName: "StyledTileInput", + componentId: "sc-1nq2m6q-0" +})(["position:absolute;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]); +StyledTileInput.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$L = 'forms.tile_label'; +const sizeStyles$g = props => { + let marginDirection = 'left'; + let marginTop = `${props.theme.space.base * 2}px`; + let marginValue; + if (props.theme.rtl) { + marginDirection = 'right'; + } + if (!props.isCentered) { + marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`); + marginTop = '0'; + } + return Ne(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue); +}; +const StyledTileLabel = Ye.span.attrs({ + 'data-garden-id': COMPONENT_ID$L, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledTileLabel", + componentId: "sc-1mypv27-0" +})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => sizeStyles$g(props), props => retrieveComponentStyles(COMPONENT_ID$L, props)); +StyledTileLabel.defaultProps = { + theme: DEFAULT_THEME +}; + +const Field$1 = React__default.forwardRef((props, ref) => { + const [hasHint, setHasHint] = reactExports.useState(false); + const [hasMessage, setHasMessage] = reactExports.useState(false); + const [isLabelActive, setIsLabelActive] = reactExports.useState(false); + const [isLabelHovered, setIsLabelHovered] = reactExports.useState(false); + const multiThumbRangeRef = reactExports.useRef(null); + const { + getInputProps, + getMessageProps, + ...propGetters + } = useField$1(props.id); + const fieldProps = reactExports.useMemo(() => ({ + ...propGetters, + getInputProps: function (options) { + let describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + return getInputProps(options, { + ...describeOptions, + isDescribed: hasHint, + hasMessage + }); + }, + getMessageProps: options => getMessageProps({ + role: 'alert', + ...options + }), + isLabelActive, + setIsLabelActive, + isLabelHovered, + setIsLabelHovered, + hasHint, + setHasHint, + hasMessage, + setHasMessage, + multiThumbRangeRef + }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]); + return React__default.createElement(FieldContext$1.Provider, { + value: fieldProps + }, React__default.createElement(StyledField$1, _extends$t({}, props, { + ref: ref + }))); +}); +Field$1.displayName = 'Field'; + +const FieldsetContext = reactExports.createContext(undefined); +const useFieldsetContext = () => { + const fieldsetContext = reactExports.useContext(FieldsetContext); + return fieldsetContext; +}; + +const LegendComponent = reactExports.forwardRef((props, ref) => { + const fieldsetContext = useFieldsetContext(); + return React__default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, { + ref: ref + })); +}); +LegendComponent.displayName = 'Fieldset.Legend'; +const Legend = LegendComponent; + +const FieldsetComponent = reactExports.forwardRef((props, ref) => { + const fieldsetContext = reactExports.useMemo(() => ({ + isCompact: props.isCompact + }), [props.isCompact]); + return React__default.createElement(FieldsetContext.Provider, { + value: fieldsetContext + }, React__default.createElement(StyledFieldset, _extends$t({}, props, { + ref: ref + }))); +}); +FieldsetComponent.displayName = 'Fieldset'; +FieldsetComponent.propTypes = { + isCompact: PropTypes.bool +}; +const Fieldset = FieldsetComponent; +Fieldset.Legend = Legend; + +const InputContext = reactExports.createContext(undefined); +const useInputContext = () => { + return reactExports.useContext(InputContext); +}; + +const Hint$1 = React__default.forwardRef((props, ref) => { + const { + hasHint, + setHasHint, + getHintProps + } = useFieldContext$1() || {}; + const type = useInputContext(); + reactExports.useEffect(() => { + if (!hasHint && setHasHint) { + setHasHint(true); + } + return () => { + if (hasHint && setHasHint) { + setHasHint(false); + } + }; + }, [hasHint, setHasHint]); + let HintComponent; + if (type === 'checkbox') { + HintComponent = StyledCheckHint; + } else if (type === 'radio') { + HintComponent = StyledRadioHint; + } else if (type === 'toggle') { + HintComponent = StyledToggleHint; + } else { + HintComponent = StyledHint$1; + } + let combinedProps = props; + if (getHintProps) { + combinedProps = getHintProps(combinedProps); + } + return React__default.createElement(HintComponent, _extends$t({ + ref: ref + }, combinedProps)); +}); +Hint$1.displayName = 'Hint'; + +const Label$1 = React__default.forwardRef((props, ref) => { + const fieldContext = useFieldContext$1(); + const fieldsetContext = useFieldsetContext(); + const type = useInputContext(); + let combinedProps = props; + if (fieldContext) { + combinedProps = fieldContext.getLabelProps(combinedProps); + if (type === undefined) { + const { + setIsLabelActive, + setIsLabelHovered, + multiThumbRangeRef + } = fieldContext; + combinedProps = { + ...combinedProps, + onMouseUp: composeEventHandlers$2(props.onMouseUp, () => { + setIsLabelActive(false); + }), + onMouseDown: composeEventHandlers$2(props.onMouseDown, () => { + setIsLabelActive(true); + }), + onMouseEnter: composeEventHandlers$2(props.onMouseEnter, () => { + setIsLabelHovered(true); + }), + onMouseLeave: composeEventHandlers$2(props.onMouseLeave, () => { + setIsLabelHovered(false); + }), + onClick: composeEventHandlers$2(props.onClick, () => { + multiThumbRangeRef.current && multiThumbRangeRef.current.focus(); + }) + }; + } + } + if (fieldsetContext) { + combinedProps = { + ...combinedProps, + isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular + }; + } + if (type === 'radio') { + return React__default.createElement(StyledRadioLabel, _extends$t({ + ref: ref + }, combinedProps), React__default.createElement(StyledRadioSvg, null), props.children); + } else if (type === 'checkbox') { + const onLabelSelect = e => { + const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; + if (fieldContext && isFirefox && e.target instanceof Element) { + const inputId = e.target.getAttribute('for'); + if (!inputId) return; + const input = document.getElementById(inputId); + if (input && input.type === 'checkbox') { + if (e.shiftKey) { + input.click(); + input.checked = true; + } + input.focus(); + } + } + }; + combinedProps = { + ...combinedProps, + onClick: composeEventHandlers$2(combinedProps.onClick, onLabelSelect) + }; + return React__default.createElement(StyledCheckLabel, _extends$t({ + ref: ref + }, combinedProps), React__default.createElement(StyledCheckSvg, null), React__default.createElement(StyledDashSvg, null), props.children); + } else if (type === 'toggle') { + return React__default.createElement(StyledToggleLabel, _extends$t({ + ref: ref + }, combinedProps), React__default.createElement(StyledToggleSvg, null), props.children); + } + return React__default.createElement(StyledLabel$1, _extends$t({ + ref: ref + }, combinedProps)); +}); +Label$1.displayName = 'Label'; +Label$1.propTypes = { + isRegular: PropTypes.bool +}; + +const VALIDATION = ['success', 'warning', 'error']; +const FILE_VALIDATION = ['success', 'error']; +const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic']; + +const Message$1 = React__default.forwardRef((_ref, ref) => { + let { + validation, + validationLabel, + children, + ...props + } = _ref; + const { + hasMessage, + setHasMessage, + getMessageProps + } = useFieldContext$1() || {}; + const type = useInputContext(); + reactExports.useEffect(() => { + if (!hasMessage && setHasMessage) { + setHasMessage(true); + } + return () => { + if (hasMessage && setHasMessage) { + setHasMessage(false); + } + }; + }, [hasMessage, setHasMessage]); + let MessageComponent; + if (type === 'checkbox') { + MessageComponent = StyledCheckMessage; + } else if (type === 'radio') { + MessageComponent = StyledRadioMessage; + } else if (type === 'toggle') { + MessageComponent = StyledToggleMessage; + } else { + MessageComponent = StyledMessage$1; + } + let combinedProps = { + validation, + validationLabel, + ...props + }; + if (getMessageProps) { + combinedProps = getMessageProps(combinedProps); + } + const ariaLabel = useText(Message$1, combinedProps, 'validationLabel', validation, validation !== undefined); + return React__default.createElement(MessageComponent, _extends$t({ + ref: ref + }, combinedProps), validation && React__default.createElement(StyledMessageIcon, { + validation: validation, + "aria-label": ariaLabel + }), children); +}); +Message$1.displayName = 'Message'; +Message$1.propTypes = { + validation: PropTypes.oneOf(VALIDATION), + validationLabel: PropTypes.string +}; + +const Checkbox = React__default.forwardRef((_ref, ref) => { + let { + indeterminate, + children, + ...props + } = _ref; + const fieldsetContext = useFieldsetContext(); + const fieldContext = useFieldContext$1(); + const inputRef = inputElement => { + inputElement && (inputElement.indeterminate = indeterminate); + }; + const combinedRef = inputElement => { + [inputRef, ref].forEach(targetRef => { + if (targetRef) { + if (typeof targetRef === 'function') { + targetRef(inputElement); + } else { + targetRef.current = inputElement; + } + } + }); + }; + let combinedProps = { + ref: combinedRef, + ...props, + ...fieldsetContext + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React__default.createElement(InputContext.Provider, { + value: "checkbox" + }, React__default.createElement(StyledCheckInput, combinedProps), children); +}); +Checkbox.displayName = 'Checkbox'; +Checkbox.propTypes = { + isCompact: PropTypes.bool, + indeterminate: PropTypes.bool +}; + +const InputGroupContext = reactExports.createContext(undefined); +const useInputGroupContext = () => { + return reactExports.useContext(InputGroupContext); +}; + +const Input = React__default.forwardRef((_ref, ref) => { + let { + onSelect, + ...props + } = _ref; + const fieldContext = useFieldContext$1(); + const inputGroupContext = useInputGroupContext(); + const onSelectHandler = props.readOnly ? composeEventHandlers$2(onSelect, event => { + event.currentTarget.select(); + }) : onSelect; + let combinedProps = { + ref, + onSelect: onSelectHandler, + ...props + }; + if (inputGroupContext) { + combinedProps = { + ...combinedProps, + isCompact: inputGroupContext.isCompact || combinedProps.isCompact, + focusInset: props.focusInset === undefined ? true : props.focusInset + }; + } + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React__default.createElement(StyledTextInput, combinedProps); +}); +Input.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + validation: PropTypes.oneOf(VALIDATION) +}; +Input.displayName = 'Input'; + +const Radio = React__default.forwardRef((_ref, ref) => { + let { + children, + ...props + } = _ref; + const fieldsetContext = useFieldsetContext(); + const fieldContext = useFieldContext$1(); + let combinedProps = { + ref, + ...props, + ...fieldsetContext + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React__default.createElement(InputContext.Provider, { + value: "radio" + }, React__default.createElement(StyledRadioInput, combinedProps), children); +}); +Radio.displayName = 'Radio'; +Radio.propTypes = { + isCompact: PropTypes.bool +}; + +const Range = React__default.forwardRef((_ref, ref) => { + let { + hasLowerTrack, + min, + max, + step, + ...props + } = _ref; + const [backgroundSize, setBackgroundSize] = reactExports.useState('0'); + const rangeRef = reactExports.useRef(); + const fieldContext = useFieldContext$1(); + const updateBackgroundWidthFromInput = reactExports.useCallback(rangeTarget => { + let relativeMax = max; + const { + value + } = rangeTarget; + if (parseFloat(relativeMax) < parseFloat(min)) { + relativeMax = 100; + } + const percentage = 100 * (value - min) / (relativeMax - min); + setBackgroundSize(`${percentage}%`); + }, + [max, min, step]); + reactExports.useEffect(() => { + updateBackgroundWidthFromInput(rangeRef.current); + }, [rangeRef, updateBackgroundWidthFromInput, props.value]); + const onChange = hasLowerTrack ? composeEventHandlers$2(props.onChange, event => { + updateBackgroundWidthFromInput(event.target); + }) : props.onChange; + let combinedProps = { + ref: mergeRefs([rangeRef, ref]), + hasLowerTrack, + min, + max, + step, + backgroundSize, + ...props, + onChange + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps, { + isDescribed: true + }); + } + return React__default.createElement(StyledRangeInput, combinedProps); +}); +Range.defaultProps = { + hasLowerTrack: true, + min: 0, + max: 100, + step: 1 +}; +Range.displayName = 'Range'; + +const parseStyleValue = value => { + return parseInt(value, 10) || 0; +}; +const Textarea = React__default.forwardRef((_ref, ref) => { + let { + minRows, + maxRows, + style, + onChange, + onSelect, + ...props + } = _ref; + const fieldContext = useFieldContext$1(); + const textAreaRef = reactExports.useRef(); + const shadowTextAreaRef = reactExports.useRef(null); + const [state, setState] = reactExports.useState({ + overflow: false, + height: 0 + }); + const isControlled = props.value !== null && props.value !== undefined; + const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable; + const calculateHeight = reactExports.useCallback(() => { + if (!isAutoResizable) { + return; + } + const textarea = textAreaRef.current; + const computedStyle = window.getComputedStyle(textarea); + const shadowTextArea = shadowTextAreaRef.current; + shadowTextArea.style.width = computedStyle.width; + shadowTextArea.value = textarea.value || textarea.placeholder || ' '; + const boxSizing = computedStyle.boxSizing; + const padding = parseStyleValue(computedStyle.paddingBottom) + parseStyleValue(computedStyle.paddingTop); + const border = parseStyleValue(computedStyle.borderTopWidth) + parseStyleValue(computedStyle.borderBottomWidth); + const innerHeight = shadowTextArea.scrollHeight - padding; + shadowTextArea.value = 'x'; + const singleRowHeight = shadowTextArea.scrollHeight - padding; + let outerHeight = innerHeight; + if (minRows) { + outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight); + } + if (maxRows) { + outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight); + } + outerHeight = Math.max(outerHeight, singleRowHeight); + const updatedHeight = outerHeight + (boxSizing === 'border-box' ? padding + border : 0); + const overflow = Math.abs(outerHeight - innerHeight) <= 1; + setState(prevState => { + if (updatedHeight > 0 && Math.abs((prevState.height || 0) - updatedHeight) > 1 || prevState.overflow !== overflow) { + return { + overflow, + height: updatedHeight + }; + } + return prevState; + }); + }, [maxRows, minRows, textAreaRef, isAutoResizable]); + const onChangeHandler = reactExports.useCallback(e => { + if (!isControlled) { + calculateHeight(); + } + if (onChange) { + onChange(e); + } + }, [calculateHeight, isControlled, onChange]); + const theme = reactExports.useContext(Be); + const environment = useDocument(theme); + reactExports.useEffect(() => { + if (!isAutoResizable) { + return undefined; + } + if (environment) { + const win = environment.defaultView || window; + const resizeHandler = debounce$3(calculateHeight); + win.addEventListener('resize', resizeHandler); + return () => { + resizeHandler.cancel(); + win.removeEventListener('resize', resizeHandler); + }; + } + return undefined; + }, [calculateHeight, isAutoResizable, environment]); + reactExports.useLayoutEffect(() => { + calculateHeight(); + }); + const computedStyle = {}; + if (isAutoResizable) { + computedStyle.height = state.height; + computedStyle.overflow = state.overflow ? 'hidden' : undefined; + } + const onSelectHandler = props.readOnly ? composeEventHandlers$2(onSelect, event => { + event.currentTarget.select(); + }) : onSelect; + let combinedProps = { + ref: mergeRefs([textAreaRef, ref]), + rows: minRows, + onChange: onChangeHandler, + onSelect: onSelectHandler, + style: { + ...computedStyle, + ...style + }, + ...props + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps, { + isDescribed: true + }); + } + return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTextarea, combinedProps), isAutoResizable && React__default.createElement(StyledTextarea, { + "aria-hidden": true, + readOnly: true, + isHidden: true, + className: props.className, + ref: shadowTextAreaRef, + tabIndex: -1, + isBare: props.isBare, + isCompact: props.isCompact, + style: style + })); +}); +Textarea.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + isResizable: PropTypes.bool, + minRows: PropTypes.number, + maxRows: PropTypes.number, + validation: PropTypes.oneOf(VALIDATION) +}; +Textarea.displayName = 'Textarea'; + +const Toggle = React__default.forwardRef((_ref, ref) => { + let { + children, + ...props + } = _ref; + const fieldsetContext = useFieldsetContext(); + const fieldContext = useFieldContext$1(); + let combinedProps = { + ref, + ...props, + ...fieldsetContext + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React__default.createElement(InputContext.Provider, { + value: "toggle" + }, React__default.createElement(StyledToggleInput, combinedProps), children); +}); +Toggle.displayName = 'Toggle'; +Toggle.propTypes = { + isCompact: PropTypes.bool +}; + +var _path$k; +function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : 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$l.apply(this, arguments); } +var SvgChevronDownStroke$1 = function SvgChevronDownStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$l({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$k || (_path$k = /*#__PURE__*/reactExports.createElement("path", { + fill: "currentColor", + d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z" + }))); +}; + +const StartIconComponent = props => React__default.createElement(StyledTextMediaFigure, _extends$t({ + position: "start" +}, props)); +StartIconComponent.displayName = 'FauxInput.StartIcon'; +const StartIcon = StartIconComponent; + +const EndIconComponent = props => React__default.createElement(StyledTextMediaFigure, _extends$t({ + position: "end" +}, props)); +EndIconComponent.displayName = 'FauxInput.EndIcon'; +const EndIcon = EndIconComponent; + +const FauxInputComponent = reactExports.forwardRef((_ref, ref) => { + let { + onFocus, + onBlur, + disabled, + readOnly, + isFocused: controlledIsFocused, + ...props + } = _ref; + const [isFocused, setIsFocused] = reactExports.useState(false); + const onFocusHandler = composeEventHandlers$2(onFocus, () => { + setIsFocused(true); + }); + const onBlurHandler = composeEventHandlers$2(onBlur, () => { + setIsFocused(false); + }); + return React__default.createElement(StyledTextFauxInput, _extends$t({ + onFocus: onFocusHandler, + onBlur: onBlurHandler, + isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused, + isReadOnly: readOnly, + isDisabled: disabled, + tabIndex: disabled ? undefined : 0 + }, props, { + ref: ref + })); +}); +FauxInputComponent.displayName = 'FauxInput'; +FauxInputComponent.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + disabled: PropTypes.bool, + readOnly: PropTypes.bool, + validation: PropTypes.oneOf(VALIDATION), + isFocused: PropTypes.bool, + isHovered: PropTypes.bool +}; +const FauxInput = FauxInputComponent; +FauxInput.EndIcon = EndIcon; +FauxInput.StartIcon = StartIcon; + +const Select = React__default.forwardRef((_ref, ref) => { + let { + disabled, + isCompact, + validation, + focusInset, + isBare, + ...props + } = _ref; + const fieldContext = useFieldContext$1(); + let combinedProps = { + disabled, + isBare, + isCompact, + validation, + focusInset, + ref, + ...props + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps, { + isDescribed: true + }); + } + return React__default.createElement(StyledSelectWrapper, { + isCompact: isCompact, + isBare: isBare, + validation: validation, + focusInset: focusInset + }, React__default.createElement(StyledSelect, combinedProps), !isBare && React__default.createElement(FauxInput.EndIcon, { + isDisabled: disabled + }, React__default.createElement(SvgChevronDownStroke$1, null))); +}); +Select.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + validation: PropTypes.oneOf(VALIDATION) +}; +Select.displayName = 'Select'; + +const MIN = 0; +const MAX = 100; +const MultiThumbRange = reactExports.forwardRef((_ref, ref) => { + let { + min = MIN, + max = MAX, + minValue, + maxValue, + disabled, + step, + jump, + onChange, + onMouseDown, + ...props + } = _ref; + const theme = reactExports.useContext(Be); + const environment = useDocument(theme); + const trackRailRef = reactExports.useRef(null); + const minThumbRef = reactExports.useRef(null); + const maxThumbRef = reactExports.useRef(null); + const { + getTrackProps, + getMinThumbProps, + getMaxThumbProps, + trackRect, + minValue: updatedMinValue, + maxValue: updatedMaxValue + } = useSlider({ + trackRef: trackRailRef, + minThumbRef, + maxThumbRef, + min, + max, + minValue, + maxValue, + onChange, + step, + jump, + disabled, + rtl: theme.rtl, + environment + }); + const { + onMouseDown: onSliderMouseDown, + ...trackProps + } = getTrackProps({ + onMouseDown + }); + const fieldContext = useFieldContext$1(); + const { + isLabelHovered, + isLabelActive, + multiThumbRangeRef + } = fieldContext || {}; + reactExports.useEffect(() => { + if (multiThumbRangeRef) { + multiThumbRangeRef.current = minThumbRef.current; + } + }, [multiThumbRangeRef]); + const minPosition = (updatedMinValue - min) / (max - min) * trackRect.width; + const maxPosition = (updatedMaxValue - min) / (max - min) * trackRect.width; + const sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition); + return React__default.createElement(StyledSlider, _extends$t({ + ref: ref, + onMouseDown: onSliderMouseDown + }, props), React__default.createElement(StyledSliderTrack, { + backgroundSize: sliderBackgroundSize, + backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition, + isDisabled: disabled + }, React__default.createElement(StyledSliderTrackRail, _extends$t({}, trackProps, { + ref: trackRailRef + }), React__default.createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({ + 'aria-label': updatedMinValue + }), { + isDisabled: disabled, + position: minPosition, + ref: minThumbRef, + "data-garden-active": isLabelActive, + "data-garden-hover": isLabelHovered + })), React__default.createElement(StyledSliderThumb, _extends$t({}, getMaxThumbProps({ + 'aria-label': updatedMaxValue + }), { + isDisabled: disabled, + position: maxPosition, + ref: maxThumbRef + }))))); +}); +MultiThumbRange.displayName = 'MultiThumbRange'; +MultiThumbRange.propTypes = { + min: PropTypes.number, + max: PropTypes.number, + minValue: PropTypes.number, + maxValue: PropTypes.number, + step: PropTypes.number, + jump: PropTypes.number, + disabled: PropTypes.bool, + onChange: PropTypes.func +}; +MultiThumbRange.defaultProps = { + min: MIN, + max: MAX, + step: 1 +}; + +const TilesContext = reactExports.createContext(undefined); +const useTilesContext = () => { + return reactExports.useContext(TilesContext); +}; + +const TileComponent = React__default.forwardRef((_ref, ref) => { + let { + children, + value, + disabled, + ...props + } = _ref; + const tilesContext = useTilesContext(); + const inputRef = reactExports.useRef(null); + let inputProps; + if (tilesContext) { + inputProps = { + name: tilesContext.name, + checked: tilesContext.value === value, + onChange: tilesContext.onChange + }; + } + return React__default.createElement(StyledTile, _extends$t({ + ref: ref, + "aria-disabled": disabled, + isDisabled: disabled, + isSelected: tilesContext && tilesContext.value === value + }, props), children, React__default.createElement(StyledTileInput, _extends$t({}, inputProps, { + disabled: disabled, + value: value, + type: "radio", + ref: inputRef + }))); +}); +TileComponent.displayName = 'Tiles.Tile'; +TileComponent.propTypes = { + value: PropTypes.string, + disabled: PropTypes.bool +}; +const Tile = TileComponent; + +const DescriptionComponent = reactExports.forwardRef((props, ref) => { + const tilesContext = useTilesContext(); + return React__default.createElement(StyledTileDescription, _extends$t({ + ref: ref, + isCentered: tilesContext && tilesContext.isCentered + }, props)); +}); +DescriptionComponent.displayName = 'Tiles.Description'; +const Description = DescriptionComponent; + +const IconComponent = reactExports.forwardRef((props, ref) => { + const tileContext = useTilesContext(); + return React__default.createElement(StyledTileIcon, _extends$t({ + ref: ref, + isCentered: tileContext && tileContext.isCentered + }, props)); +}); +IconComponent.displayName = 'Tiles.Icon'; +const Icon = IconComponent; + +const LabelComponent = reactExports.forwardRef((props, forwardedRef) => { + const [title, setTitle] = reactExports.useState(''); + const ref = reactExports.useRef(); + const tilesContext = useTilesContext(); + reactExports.useEffect(() => { + if (ref.current) { + setTitle(ref.current.textContent || undefined); + } + }, [ref]); + return React__default.createElement(StyledTileLabel, _extends$t({ + ref: mergeRefs([ref, forwardedRef]), + title: title, + isCentered: tilesContext && tilesContext.isCentered + }, props)); +}); +LabelComponent.displayName = 'Tiles.Label'; +const Label$2 = LabelComponent; + +const TilesComponent = reactExports.forwardRef((_ref, ref) => { + let { + onChange, + value: controlledValue, + name, + isCentered, + ...props + } = _ref; + const [value, setValue] = reactExports.useState(controlledValue); + const handleOnChange = reactExports.useCallback(function () { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + setValue(args[0].target.value); + if (onChange) { + onChange(...args); + } + }, [onChange]); + const selectedValue = getControlledValue(controlledValue, value); + const tileContext = reactExports.useMemo(() => ({ + onChange: handleOnChange, + value: selectedValue, + name, + isCentered + }), [handleOnChange, selectedValue, name, isCentered]); + return React__default.createElement(TilesContext.Provider, { + value: tileContext + }, React__default.createElement("div", _extends$t({ + ref: ref, + role: "radiogroup" + }, props))); +}); +TilesComponent.displayName = 'Tiles'; +TilesComponent.propTypes = { + value: PropTypes.string, + onChange: PropTypes.func, + name: PropTypes.string.isRequired, + isCentered: PropTypes.bool +}; +TilesComponent.defaultProps = { + isCentered: true +}; +const Tiles = TilesComponent; +Tiles.Description = Description; +Tiles.Icon = Icon; +Tiles.Label = Label$2; +Tiles.Tile = Tile; + +const InputGroup = React__default.forwardRef((_ref, ref) => { + let { + isCompact, + ...props + } = _ref; + const contextValue = reactExports.useMemo(() => ({ + isCompact + }), [isCompact]); + return React__default.createElement(InputGroupContext.Provider, { + value: contextValue + }, React__default.createElement(StyledInputGroup$1, _extends$t({ + ref: ref, + isCompact: isCompact + }, props))); +}); +InputGroup.displayName = 'InputGroup'; +InputGroup.propTypes = { + isCompact: PropTypes.bool +}; + +const FileUpload = React__default.forwardRef((_ref, ref) => { + let { + disabled, + ...props + } = _ref; + return ( + React__default.createElement(StyledFileUpload, _extends$t({ + ref: ref, + "aria-disabled": disabled + }, props, { + role: "button" + })) + ); +}); +FileUpload.propTypes = { + isDragging: PropTypes.bool, + isCompact: PropTypes.bool, + disabled: PropTypes.bool +}; +FileUpload.displayName = 'FileUpload'; + +const ItemComponent = reactExports.forwardRef((_ref, ref) => { + let { + ...props + } = _ref; + return React__default.createElement(StyledFileListItem, _extends$t({}, props, { + ref: ref + })); +}); +ItemComponent.displayName = 'FileList.Item'; +const Item = ItemComponent; + +const FileListComponent = reactExports.forwardRef((_ref, ref) => { + let { + ...props + } = _ref; + return React__default.createElement(StyledFileList, _extends$t({}, props, { + ref: ref + })); +}); +FileListComponent.displayName = 'FileList'; +const FileList = FileListComponent; +FileList.Item = Item; + +var _path$j; +function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : 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$k.apply(this, arguments); } +var SvgXStroke$1 = function SvgXStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$k({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$j || (_path$j = /*#__PURE__*/reactExports.createElement("path", { + stroke: "currentColor", + strokeLinecap: "round", + d: "M3 9l6-6m0 6L3 3" + }))); +}; + +var _path$i; +function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : 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$j.apply(this, arguments); } +var SvgXStroke$2 = function SvgXStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$j({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$i || (_path$i = /*#__PURE__*/reactExports.createElement("path", { + stroke: "currentColor", + strokeLinecap: "round", + d: "M3 13L13 3m0 10L3 3" + }))); +}; + +const FileContext = reactExports.createContext(undefined); +const useFileContext = () => { + return reactExports.useContext(FileContext); +}; + +const CloseComponent$1 = React__default.forwardRef((props, ref) => { + const fileContext = useFileContext(); + const onMouseDown = composeEventHandlers$2(props.onMouseDown, event => event.preventDefault() + ); + const ariaLabel = useText(CloseComponent$1, props, 'aria-label', 'Close'); + return React__default.createElement(StyledFileClose, _extends$t({ + ref: ref, + "aria-label": ariaLabel + }, props, { + type: "button", + tabIndex: -1, + onMouseDown: onMouseDown + }), fileContext && fileContext.isCompact ? React__default.createElement(SvgXStroke$1, null) : React__default.createElement(SvgXStroke$2, null)); +}); +CloseComponent$1.displayName = 'File.Close'; +const Close$1 = CloseComponent$1; + +var _path$h; +function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : 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$i.apply(this, arguments); } +var SvgTrashStroke$1 = function SvgTrashStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$i({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$h || (_path$h = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M4.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M2 2.5h8m-5.5 7V5m3 4.5V5m-5-.5V11c0 .3.2.5.5.5h6c.3 0 .5-.2.5-.5V4.5" + }))); +}; + +var _path$g; +function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : 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$h.apply(this, arguments); } +var SvgTrashStroke = function SvgTrashStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$h({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$g || (_path$g = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M6.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M3 2.5h10m-6.5 11v-8m3 8v-8m-6-1V15c0 .3.2.5.5.5h8c.3 0 .5-.2.5-.5V4.5" + }))); +}; + +const DeleteComponent = React__default.forwardRef((props, ref) => { + const fileContext = useFileContext(); + const onMouseDown = composeEventHandlers$2(props.onMouseDown, event => event.preventDefault() + ); + const ariaLabel = useText(DeleteComponent, props, 'aria-label', 'Delete'); + return React__default.createElement(StyledFileDelete, _extends$t({ + ref: ref, + "aria-label": ariaLabel + }, props, { + type: "button", + tabIndex: -1, + onMouseDown: onMouseDown + }), fileContext && fileContext.isCompact ? React__default.createElement(SvgTrashStroke$1, null) : React__default.createElement(SvgTrashStroke, null)); +}); +DeleteComponent.displayName = 'File.Delete'; +const Delete = DeleteComponent; + +var _path$f, _rect$1; +function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : 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$g.apply(this, arguments); } +var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$g({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$f || (_path$f = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M10.5 3.21V11a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h5.79a.5.5 0 01.35.15l2.21 2.21a.5.5 0 01.15.35zM7.5.5V3a.5.5 0 00.5.5h2.5m-7 6h5" + })), _rect$1 || (_rect$1 = /*#__PURE__*/reactExports.createElement("rect", { + width: 6, + height: 3, + x: 3, + y: 5, + fill: "currentColor", + rx: 0.5, + ry: 0.5 + }))); +}; + +var _path$e; +function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : 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$f.apply(this, arguments); } +var SvgFileZipStroke$1 = function SvgFileZipStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$f({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$e || (_path$e = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M4.5.5v8m0-6h1m-2 1h1m0 1h1m-2 1h1m0 1h1m-2 1h1m6-4.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _path$d, _circle$1; +function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : 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$e.apply(this, arguments); } +var SvgFileImageStroke$1 = function SvgFileImageStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$e({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$d || (_path$d = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + strokeLinejoin: "round", + d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5m-7 6L5 8l1.5 1.5 1-1 1 1" + })), _circle$1 || (_circle$1 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 8, + cy: 6, + r: 1, + fill: "currentColor" + }))); +}; + +var _path$c; +function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : 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$d.apply(this, arguments); } +var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$d({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$c || (_path$c = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M3.5 5.5h5m-5 2h5m-5 2h5m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _path$b; +function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : 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$c.apply(this, arguments); } +var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$c({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$b || (_path$b = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M3.5 5.5h1m-1 2h1m-1 2h1m2-4h2m-2 2h2m-2 2h2m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _path$a; +function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : 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$b.apply(this, arguments); } +var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$b({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$a || (_path$a = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM6 9.5h2c.28 0 .5-.22.5-.5V8c0-.28-.22-.5-.5-.5H6c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm-2-2h2c.28 0 .5-.22.5-.5V6c0-.28-.22-.5-.5-.5H4c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm3.5-7V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _path$9; +function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : 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$a.apply(this, arguments); } +var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$a({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$9 || (_path$9 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5" + }))); +}; + +var _g; +function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : 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$9.apply(this, arguments); } +var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$9({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _g || (_g = /*#__PURE__*/reactExports.createElement("g", { + fill: "none", + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("path", { + strokeLinecap: "round", + strokeLinejoin: "round", + d: "M3.5 6l2 2L9 4.5" + }), /*#__PURE__*/reactExports.createElement("circle", { + cx: 6, + cy: 6, + r: 5.5 + })))); +}; + +var _path$8; +function _extends$8$1() { _extends$8$1 = Object.assign ? Object.assign.bind() : 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$8$1.apply(this, arguments); } +var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$8$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$8 || (_path$8 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5M4 9.5l4-4m0 4l-4-4" + }))); +}; + +var _path$7, _rect; +function _extends$7$1() { _extends$7$1 = Object.assign ? Object.assign.bind() : 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$7$1.apply(this, arguments); } +var SvgFilePdfStroke = function SvgFilePdfStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$7$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$7 || (_path$7 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M14.5 4.2V15a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h8.85a.5.5 0 01.36.15l3.15 3.2a.5.5 0 01.14.35zm-10 8.3h7m-7-2h7m-1-10V4a.5.5 0 00.5.5h3.5" + })), _rect || (_rect = /*#__PURE__*/reactExports.createElement("rect", { + width: 8, + height: 2, + x: 4, + y: 7, + fill: "currentColor", + rx: 0.5, + ry: 0.5 + }))); +}; + +var _path$6; +function _extends$6$1() { _extends$6$1 = Object.assign ? Object.assign.bind() : 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$6$1.apply(this, arguments); } +var SvgFileZipStroke = function SvgFileZipStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$6$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$6 || (_path$6 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M6.5.5v11M5 2.5h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m8-6.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5" + }))); +}; + +var _path$5$1, _circle; +function _extends$5$1() { _extends$5$1 = Object.assign ? Object.assign.bind() : 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$5$1.apply(this, arguments); } +var SvgFileImageStroke = function SvgFileImageStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$5$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$5$1 || (_path$5$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5m-11 9l2.65-2.65c.2-.2.51-.2.71 0l1.79 1.79c.2.2.51.2.71 0l.79-.79c.2-.2.51-.2.71 0l1.65 1.65" + })), _circle || (_circle = /*#__PURE__*/reactExports.createElement("circle", { + cx: 10.5, + cy: 8.5, + r: 1.5, + fill: "currentColor" + }))); +}; + +var _path$4$1; +function _extends$4$1() { _extends$4$1 = Object.assign ? Object.assign.bind() : 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$4$1.apply(this, arguments); } +var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$4$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$4$1 || (_path$4$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M4.5 7.5h7m-7 1.97h7m-7 2h7m3-7.27V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5" + }))); +}; + +var _path$3$1; +function _extends$3$1() { _extends$3$1 = Object.assign ? Object.assign.bind() : 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$3$1.apply(this, arguments); } +var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$3$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$3$1 || (_path$3$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M4.5 7.5h2m-2 2h2m-2 2h2m2-4h3m-3 2h3m-3 2h3m3-7.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5" + }))); +}; + +var _path$2$1; +function _extends$2$1() { _extends$2$1 = Object.assign ? Object.assign.bind() : 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$2$1.apply(this, arguments); } +var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$2$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$2$1 || (_path$2$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5M7 9.5h4c.28 0 .5.22.5.5v3c0 .28-.22.5-.5.5H7c-.28 0-.5-.22-.5-.5v-3c0-.28.22-.5.5-.5zm-.5 2H5c-.28 0-.5-.22-.5-.5V8c0-.28.22-.5.5-.5h4c.28 0 .5.22.5.5v1.5" + }))); +}; + +var _path$1$1; +function _extends$1$2() { _extends$1$2 = Object.assign ? Object.assign.bind() : 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$2.apply(this, arguments); } +var SvgFileGenericStroke = function SvgFileGenericStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$1$2({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$1$1 || (_path$1$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5" + }))); +}; + +var _path$o; +function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : 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$u.apply(this, arguments); } +var SvgFileErrorStroke = function SvgFileErrorStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$u({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$o || (_path$o = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M14.5 4.205V15a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h8.853a.5.5 0 01.356.15l3.148 3.204a.5.5 0 01.143.35zM10.5.5V4a.5.5 0 00.5.5h3.5m-9 8l5-5m0 5l-5-5" + }))); +}; + +const fileIconsDefault = { + pdf: React__default.createElement(SvgFilePdfStroke, null), + zip: React__default.createElement(SvgFileZipStroke, null), + image: React__default.createElement(SvgFileImageStroke, null), + document: React__default.createElement(SvgFileDocumentStroke, null), + spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke, null), + presentation: React__default.createElement(SvgFilePresentationStroke, null), + generic: React__default.createElement(SvgFileGenericStroke, null), + success: React__default.createElement(SvgCheckCircleStroke$1, null), + error: React__default.createElement(SvgFileErrorStroke, null) +}; +const fileIconsCompact = { + pdf: React__default.createElement(SvgFilePdfStroke$1, null), + zip: React__default.createElement(SvgFileZipStroke$1, null), + image: React__default.createElement(SvgFileImageStroke$1, null), + document: React__default.createElement(SvgFileDocumentStroke$1, null), + spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke$1, null), + presentation: React__default.createElement(SvgFilePresentationStroke$1, null), + generic: React__default.createElement(SvgFileGenericStroke$1, null), + success: React__default.createElement(SvgCheckCircleStroke, null), + error: React__default.createElement(SvgFileErrorStroke$1, null) +}; + +const FileComponent = reactExports.forwardRef((_ref, ref) => { + let { + children, + type, + isCompact, + focusInset, + validation, + ...props + } = _ref; + const fileContextValue = reactExports.useMemo(() => ({ + isCompact + }), [isCompact]); + const validationType = validation || type; + return React__default.createElement(FileContext.Provider, { + value: fileContextValue + }, React__default.createElement(StyledFile, _extends$t({}, props, { + isCompact: isCompact, + focusInset: focusInset, + validation: validation, + ref: ref + }), validationType && React__default.createElement(StyledFileIcon, { + isCompact: isCompact + }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), reactExports.Children.map(children, child => typeof child === 'string' ? React__default.createElement("span", null, child) : child))); +}); +FileComponent.displayName = 'File'; +FileComponent.propTypes = { + focusInset: PropTypes.bool, + isCompact: PropTypes.bool, + type: PropTypes.oneOf(FILE_TYPE), + validation: PropTypes.oneOf(FILE_VALIDATION) +}; +const File = FileComponent; +File.Close = Close$1; +File.Delete = Delete; + +const MediaInput = React__default.forwardRef((_ref, ref) => { + let { + start, + end, + disabled, + isCompact, + isBare, + focusInset, + readOnly, + validation, + wrapperProps = {}, + wrapperRef, + onSelect, + ...props + } = _ref; + const fieldContext = useFieldContext$1(); + const inputRef = reactExports.useRef(); + const [isFocused, setIsFocused] = reactExports.useState(false); + const [isHovered, setIsHovered] = reactExports.useState(false); + const { + onClick, + onFocus, + onBlur, + onMouseOver, + onMouseOut, + ...otherWrapperProps + } = wrapperProps; + const onFauxInputClickHandler = composeEventHandlers$2(onClick, () => { + inputRef.current && inputRef.current.focus(); + }); + const onFauxInputFocusHandler = composeEventHandlers$2(onFocus, () => { + setIsFocused(true); + }); + const onFauxInputBlurHandler = composeEventHandlers$2(onBlur, () => { + setIsFocused(false); + }); + const onFauxInputMouseOverHandler = composeEventHandlers$2(onMouseOver, () => { + setIsHovered(true); + }); + const onFauxInputMouseOutHandler = composeEventHandlers$2(onMouseOut, () => { + setIsHovered(false); + }); + const onSelectHandler = readOnly ? composeEventHandlers$2(onSelect, event => { + event.currentTarget.select(); + }) : onSelect; + let combinedProps = { + disabled, + readOnly, + ref: mergeRefs([inputRef, ref]), + onSelect: onSelectHandler, + ...props + }; + let isLabelHovered; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps, { + isDescribed: true + }); + isLabelHovered = fieldContext.isLabelHovered; + } + return React__default.createElement(FauxInput, _extends$t({ + tabIndex: null, + onClick: onFauxInputClickHandler, + onFocus: onFauxInputFocusHandler, + onBlur: onFauxInputBlurHandler, + onMouseOver: onFauxInputMouseOverHandler, + onMouseOut: onFauxInputMouseOutHandler, + disabled: disabled, + isFocused: isFocused, + isHovered: isHovered || isLabelHovered, + isCompact: isCompact, + isBare: isBare, + focusInset: focusInset, + readOnly: readOnly, + validation: validation, + mediaLayout: true + }, otherWrapperProps, { + ref: wrapperRef + }), start && React__default.createElement(FauxInput.StartIcon, { + isDisabled: disabled, + isFocused: isFocused, + isHovered: isHovered || isLabelHovered + }, start), React__default.createElement(StyledTextMediaInput, combinedProps), end && React__default.createElement(FauxInput.EndIcon, { + isDisabled: disabled, + isFocused: isFocused, + isHovered: isHovered || isLabelHovered + }, end)); +}); +MediaInput.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + validation: PropTypes.oneOf(VALIDATION), + start: PropTypes.node, + end: PropTypes.node, + wrapperProps: PropTypes.object, + wrapperRef: PropTypes.any +}; +MediaInput.displayName = 'MediaInput'; + +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +function _extends$1$1() { + _extends$1$1 = Object.assign ? Object.assign.bind() : 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$1.apply(this, arguments); +} + +const SIZE$1 = ['small', 'medium', 'large']; + +const COMPONENT_ID$2$2 = 'tags.avatar'; +const StyledAvatar = Ye(_ref => { + let { + children, + ...props + } = _ref; + return React__default.cloneElement(reactExports.Children.only(children), props); +}).attrs({ + 'data-garden-id': COMPONENT_ID$2$2, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledAvatar", + componentId: "sc-3kdmgt-0" +})(["flex-shrink:0;font-size:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2$2, props)); +StyledAvatar.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$1$2 = 'tags.close'; +const StyledClose = Ye.button.attrs({ + 'data-garden-id': COMPONENT_ID$1$2, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledClose", + componentId: "sc-d6lrpn-0" +})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$1$2, props)); +StyledClose.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$w = 'tags.tag_view'; +const colorStyles$a = props => { + let backgroundColor; + let foregroundColor; + let closeColor; + if (props.hue) { + const shade = props.hue === 'yellow' ? 400 : 600; + backgroundColor = getColor(props.hue, shade, props.theme); + if (props.hue === 'yellow' || props.hue === 'lemon') { + foregroundColor = getColor('yellow', 800, props.theme); + } else { + foregroundColor = readableColor(backgroundColor, props.theme.palette.grey[800], props.theme.palette.white); + } + } else { + backgroundColor = getColor('neutralHue', 200, props.theme); + foregroundColor = getColor('neutralHue', 700, props.theme); + closeColor = getColor('neutralHue', 600, props.theme); + } + return Ne(["background-color:", ";color:", ";&:hover{color:", ";}", " & ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, focusStyles({ + theme: props.theme, + shadowWidth: 'sm', + selector: '&:focus' + }), StyledClose, closeColor); +}; +const sizeStyles$c = props => { + let borderRadius; + let padding; + let height; + let fontSize; + let minWidth; + let avatarSize; + if (props.size === 'small') { + borderRadius = props.theme.borderRadii.sm; + padding = props.theme.space.base; + height = props.theme.space.base * 4; + fontSize = props.theme.fontSizes.xs; + avatarSize = 0; + } else if (props.size === 'large') { + borderRadius = props.theme.borderRadii.md; + padding = props.theme.space.base * 3; + height = props.theme.space.base * 8; + fontSize = props.theme.fontSizes.sm; + avatarSize = props.theme.space.base * 6; + } else { + borderRadius = props.theme.borderRadii.sm; + padding = props.theme.space.base * 2; + height = props.theme.space.base * 5; + fontSize = props.theme.fontSizes.sm; + avatarSize = props.theme.space.base * 4; + } + let avatarBorderRadius = props.size === 'large' ? math(`${borderRadius} - 1`) : borderRadius; + const avatarMargin = (height - avatarSize) / 2; + const avatarTextMargin = props.isRound ? avatarMargin : avatarMargin * 2; + if (props.isRound) { + borderRadius = '50%'; + padding = 0; + minWidth = height; + avatarBorderRadius = '50%'; + } else if (props.isPill) { + borderRadius = '100px'; + avatarBorderRadius = '50%'; + if (props.size === 'small') { + padding = props.theme.space.base * 1.5; + minWidth = props.theme.space.base * 6; + } else if (props.size === 'large') { + minWidth = props.theme.space.base * 12; + } else { + minWidth = props.theme.space.base * 7.5; + } + } + return Ne(["border-radius:", ";padding:0 ", "px;min-width:", ";height:", "px;line-height:", ";font-size:", ";& > *{width:100%;min-width:", ";}& ", "{margin-", ":-", "px;margin-", ":", "px;border-radius:", ";width:", "px;min-width:", "px;height:", "px;}& ", "{margin-", ":-", "px;border-radius:", ";width:", "px;height:", "px;}"], borderRadius, padding, minWidth ? `${minWidth}px` : `calc(${padding * 2}px + 1ch)`, height, getLineHeight(height, fontSize), fontSize, minWidth ? `${minWidth - padding * 2}px` : '1ch', StyledAvatar, props.theme.rtl ? 'right' : 'left', padding - avatarMargin, props.theme.rtl ? 'left' : 'right', avatarTextMargin, avatarBorderRadius, avatarSize, avatarSize, avatarSize, StyledClose, props.theme.rtl ? 'left' : 'right', padding, borderRadius, height, height); +}; +const StyledTag$1 = Ye.div.attrs({ + 'data-garden-id': COMPONENT_ID$w, + 'data-garden-version': '8.69.4' +}).withConfig({ + displayName: "StyledTag", + componentId: "sc-1jvbe03-0" +})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.isRound && 'center', props => !props.isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles$c(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles$a(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.isRound || props.size === 'small') && 'none', StyledClose, props => props.isRound && 'none', props => retrieveComponentStyles(COMPONENT_ID$w, props)); +StyledTag$1.defaultProps = { + size: 'medium', + theme: DEFAULT_THEME +}; + +var _path$5; +function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : 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$8.apply(this, arguments); } +var SvgXStroke = function SvgXStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$8({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$5 || (_path$5 = /*#__PURE__*/reactExports.createElement("path", { + stroke: "currentColor", + strokeLinecap: "round", + d: "M3 9l6-6m0 6L3 3" + }))); +}; + +const CloseComponent = reactExports.forwardRef((props, ref) => { + const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Remove'); + return React__default.createElement(StyledClose, _extends$1$1({ + ref: ref, + "aria-label": ariaLabel + }, props, { + type: "button", + tabIndex: -1 + }), React__default.createElement(SvgXStroke, null)); +}); +CloseComponent.displayName = 'Tag.Close'; +const Close = CloseComponent; + +const AvatarComponent = props => React__default.createElement(StyledAvatar, props); +AvatarComponent.displayName = 'Tag.Avatar'; +const Avatar = AvatarComponent; + +const TagComponent$1 = reactExports.forwardRef((_ref, ref) => { + let { + size, + hue, + ...otherProps + } = _ref; + return React__default.createElement(StyledTag$1, _extends$1$1({ + ref: ref, + size: size, + hue: hue + }, otherProps)); +}); +TagComponent$1.displayName = 'Tag'; +TagComponent$1.propTypes = { + size: PropTypes.oneOf(SIZE$1), + hue: PropTypes.string, + isPill: PropTypes.bool, + isRound: PropTypes.bool, + isRegular: PropTypes.bool +}; +TagComponent$1.defaultProps = { + size: 'medium' +}; +const Tag$1 = TagComponent$1; +Tag$1.Avatar = Avatar; +Tag$1.Close = Close; + +function getAlignment(placement) { + return placement.split('-')[1]; +} + +function getLengthFromAxis(axis) { + return axis === 'y' ? 'height' : 'width'; +} + +function getSide(placement) { + return placement.split('-')[0]; +} + +function getMainAxisFromPlacement(placement) { + return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y'; +} + +function computeCoordsFromPlacement(_ref, placement, rtl) { + let { + reference, + floating + } = _ref; + const commonX = reference.x + reference.width / 2 - floating.width / 2; + const commonY = reference.y + reference.height / 2 - floating.height / 2; + const mainAxis = getMainAxisFromPlacement(placement); + const length = getLengthFromAxis(mainAxis); + const commonAlign = reference[length] / 2 - floating[length] / 2; + const side = getSide(placement); + const isVertical = mainAxis === 'x'; + let coords; + switch (side) { + case 'top': + coords = { + x: commonX, + y: reference.y - floating.height + }; + break; + case 'bottom': + coords = { + x: commonX, + y: reference.y + reference.height + }; + break; + case 'right': + coords = { + x: reference.x + reference.width, + y: commonY + }; + break; + case 'left': + coords = { + x: reference.x - floating.width, + y: commonY + }; + break; + default: + coords = { + x: reference.x, + y: reference.y + }; + } + switch (getAlignment(placement)) { + case 'start': + coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1); + break; + case 'end': + coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1); + break; + } + return coords; +} + +/** + * Computes the `x` and `y` coordinates that will place the floating element + * next to a reference element when it is given a certain positioning strategy. + * + * This export does not have any `platform` interface logic. You will need to + * write one for the platform you are using Floating UI with. + */ +const computePosition$1 = async (reference, floating, config) => { + const { + placement = 'bottom', + strategy = 'absolute', + middleware = [], + platform + } = config; + const validMiddleware = middleware.filter(Boolean); + const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating)); + let rects = await platform.getElementRects({ + reference, + floating, + strategy + }); + let { + x, + y + } = computeCoordsFromPlacement(rects, placement, rtl); + let statefulPlacement = placement; + let middlewareData = {}; + let resetCount = 0; + for (let i = 0; i < validMiddleware.length; i++) { + const { + name, + fn + } = validMiddleware[i]; + const { + x: nextX, + y: nextY, + data, + reset + } = await fn({ + x, + y, + initialPlacement: placement, + placement: statefulPlacement, + strategy, + middlewareData, + rects, + platform, + elements: { + reference, + floating + } + }); + x = nextX != null ? nextX : x; + y = nextY != null ? nextY : y; + middlewareData = { + ...middlewareData, + [name]: { + ...middlewareData[name], + ...data + } + }; + if (reset && resetCount <= 50) { + resetCount++; + if (typeof reset === 'object') { + if (reset.placement) { + statefulPlacement = reset.placement; + } + if (reset.rects) { + rects = reset.rects === true ? await platform.getElementRects({ + reference, + floating, + strategy + }) : reset.rects; + } + ({ + x, + y + } = computeCoordsFromPlacement(rects, statefulPlacement, rtl)); + } + i = -1; + continue; + } + } + return { + x, + y, + placement: statefulPlacement, + strategy, + middlewareData + }; +}; + +function evaluate(value, param) { + return typeof value === 'function' ? value(param) : value; +} + +function expandPaddingObject(padding) { + return { + top: 0, + right: 0, + bottom: 0, + left: 0, + ...padding + }; +} + +function getSideObjectFromPadding(padding) { + return typeof padding !== 'number' ? expandPaddingObject(padding) : { + top: padding, + right: padding, + bottom: padding, + left: padding + }; +} + +function rectToClientRect(rect) { + return { + ...rect, + top: rect.y, + left: rect.x, + right: rect.x + rect.width, + bottom: rect.y + rect.height + }; +} + +/** + * Resolves with an object of overflow side offsets that determine how much the + * element is overflowing a given clipping boundary on each side. + * - positive = overflowing the boundary by that number of pixels + * - negative = how many pixels left before it will overflow + * - 0 = lies flush with the boundary + * @see https://floating-ui.com/docs/detectOverflow + */ +async function detectOverflow(state, options) { + var _await$platform$isEle; + if (options === void 0) { + options = {}; + } + const { + x, + y, + platform, + rects, + elements, + strategy + } = state; + const { + boundary = 'clippingAncestors', + rootBoundary = 'viewport', + elementContext = 'floating', + altBoundary = false, + padding = 0 + } = evaluate(options, state); + const paddingObject = getSideObjectFromPadding(padding); + const altContext = elementContext === 'floating' ? 'reference' : 'floating'; + const element = elements[altBoundary ? altContext : elementContext]; + const clippingClientRect = rectToClientRect(await platform.getClippingRect({ + element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))), + boundary, + rootBoundary, + strategy + })); + const rect = elementContext === 'floating' ? { + ...rects.floating, + x, + y + } : rects.reference; + const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)); + const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || { + x: 1, + y: 1 + } : { + x: 1, + y: 1 + }; + const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({ + rect, + offsetParent, + strategy + }) : rect); + return { + top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y, + bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y, + left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x, + right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x + }; +} + +const min$1 = Math.min; +const max$1 = Math.max; + +const oppositeSideMap = { + left: 'right', + right: 'left', + bottom: 'top', + top: 'bottom' +}; +function getOppositePlacement$1(placement) { + return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]); +} + +function getAlignmentSides(placement, rects, rtl) { + if (rtl === void 0) { + rtl = false; + } + const alignment = getAlignment(placement); + const mainAxis = getMainAxisFromPlacement(placement); + const length = getLengthFromAxis(mainAxis); + let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top'; + if (rects.reference[length] > rects.floating[length]) { + mainAlignmentSide = getOppositePlacement$1(mainAlignmentSide); + } + return { + main: mainAlignmentSide, + cross: getOppositePlacement$1(mainAlignmentSide) + }; +} + +const oppositeAlignmentMap = { + start: 'end', + end: 'start' +}; +function getOppositeAlignmentPlacement(placement) { + return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]); +} + +function getExpandedPlacements(placement) { + const oppositePlacement = getOppositePlacement$1(placement); + return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)]; +} + +function getSideList(side, isStart, rtl) { + const lr = ['left', 'right']; + const rl = ['right', 'left']; + const tb = ['top', 'bottom']; + const bt = ['bottom', 'top']; + switch (side) { + case 'top': + case 'bottom': + if (rtl) return isStart ? rl : lr; + return isStart ? lr : rl; + case 'left': + case 'right': + return isStart ? tb : bt; + default: + return []; + } +} +function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) { + const alignment = getAlignment(placement); + let list = getSideList(getSide(placement), direction === 'start', rtl); + if (alignment) { + list = list.map(side => side + "-" + alignment); + if (flipAlignment) { + list = list.concat(list.map(getOppositeAlignmentPlacement)); + } + } + return list; +} + +/** + * Optimizes the visibility of the floating element by flipping the `placement` + * in order to keep it in view when the preferred placement(s) will overflow the + * clipping boundary. Alternative to `autoPlacement`. + * @see https://floating-ui.com/docs/flip + */ +const flip$1 = function (options) { + if (options === void 0) { + options = {}; + } + return { + name: 'flip', + options, + async fn(state) { + var _middlewareData$flip; + const { + placement, + middlewareData, + rects, + initialPlacement, + platform, + elements + } = state; + const { + mainAxis: checkMainAxis = true, + crossAxis: checkCrossAxis = true, + fallbackPlacements: specifiedFallbackPlacements, + fallbackStrategy = 'bestFit', + fallbackAxisSideDirection = 'none', + flipAlignment = true, + ...detectOverflowOptions + } = evaluate(options, state); + const side = getSide(placement); + const isBasePlacement = getSide(initialPlacement) === initialPlacement; + const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); + const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement$1(initialPlacement)] : getExpandedPlacements(initialPlacement)); + if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') { + fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl)); + } + const placements = [initialPlacement, ...fallbackPlacements]; + const overflow = await detectOverflow(state, detectOverflowOptions); + const overflows = []; + let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || []; + if (checkMainAxis) { + overflows.push(overflow[side]); + } + if (checkCrossAxis) { + const { + main, + cross + } = getAlignmentSides(placement, rects, rtl); + overflows.push(overflow[main], overflow[cross]); + } + overflowsData = [...overflowsData, { + placement, + overflows + }]; + + // One or more sides is overflowing. + if (!overflows.every(side => side <= 0)) { + var _middlewareData$flip2, _overflowsData$filter; + const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1; + const nextPlacement = placements[nextIndex]; + if (nextPlacement) { + // Try next placement and re-run the lifecycle. + return { + data: { + index: nextIndex, + overflows: overflowsData + }, + reset: { + placement: nextPlacement + } + }; + } + + // First, find the candidates that fit on the mainAxis side of overflow, + // then find the placement that fits the best on the main crossAxis side. + let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement; + + // Otherwise fallback. + if (!resetPlacement) { + switch (fallbackStrategy) { + case 'bestFit': + { + var _overflowsData$map$so; + const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0]; + if (placement) { + resetPlacement = placement; + } + break; + } + case 'initialPlacement': + resetPlacement = initialPlacement; + break; + } + } + if (placement !== resetPlacement) { + return { + reset: { + placement: resetPlacement + } + }; + } + } + return {}; + } + }; +}; + +async function convertValueToCoords(state, options) { + const { + placement, + platform, + elements + } = state; + const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); + const side = getSide(placement); + const alignment = getAlignment(placement); + const isVertical = getMainAxisFromPlacement(placement) === 'x'; + const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1; + const crossAxisMulti = rtl && isVertical ? -1 : 1; + const rawValue = evaluate(options, state); + + // eslint-disable-next-line prefer-const + let { + mainAxis, + crossAxis, + alignmentAxis + } = typeof rawValue === 'number' ? { + mainAxis: rawValue, + crossAxis: 0, + alignmentAxis: null + } : { + mainAxis: 0, + crossAxis: 0, + alignmentAxis: null, + ...rawValue + }; + if (alignment && typeof alignmentAxis === 'number') { + crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis; + } + return isVertical ? { + x: crossAxis * crossAxisMulti, + y: mainAxis * mainAxisMulti + } : { + x: mainAxis * mainAxisMulti, + y: crossAxis * crossAxisMulti + }; +} + +/** + * Modifies the placement by translating the floating element along the + * specified axes. + * A number (shorthand for `mainAxis` or distance), or an axes configuration + * object may be passed. + * @see https://floating-ui.com/docs/offset + */ +const offset$1 = function (options) { + if (options === void 0) { + options = 0; + } + return { + name: 'offset', + options, + async fn(state) { + const { + x, + y + } = state; + const diffCoords = await convertValueToCoords(state, options); + return { + x: x + diffCoords.x, + y: y + diffCoords.y, + data: diffCoords + }; + } + }; +}; + +/** + * Provides data that allows you to change the size of the floating element — + * for instance, prevent it from overflowing the clipping boundary or match the + * width of the reference element. + * @see https://floating-ui.com/docs/size + */ +const size = function (options) { + if (options === void 0) { + options = {}; + } + return { + name: 'size', + options, + async fn(state) { + const { + placement, + rects, + platform, + elements + } = state; + const { + apply = () => {}, + ...detectOverflowOptions + } = evaluate(options, state); + const overflow = await detectOverflow(state, detectOverflowOptions); + const side = getSide(placement); + const alignment = getAlignment(placement); + const axis = getMainAxisFromPlacement(placement); + const isXAxis = axis === 'x'; + const { + width, + height + } = rects.floating; + let heightSide; + let widthSide; + if (side === 'top' || side === 'bottom') { + heightSide = side; + widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right'; + } else { + widthSide = side; + heightSide = alignment === 'end' ? 'top' : 'bottom'; + } + const overflowAvailableHeight = height - overflow[heightSide]; + const overflowAvailableWidth = width - overflow[widthSide]; + const noShift = !state.middlewareData.shift; + let availableHeight = overflowAvailableHeight; + let availableWidth = overflowAvailableWidth; + if (isXAxis) { + const maximumClippingWidth = width - overflow.left - overflow.right; + availableWidth = alignment || noShift ? min$1(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth; + } else { + const maximumClippingHeight = height - overflow.top - overflow.bottom; + availableHeight = alignment || noShift ? min$1(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight; + } + if (noShift && !alignment) { + const xMin = max$1(overflow.left, 0); + const xMax = max$1(overflow.right, 0); + const yMin = max$1(overflow.top, 0); + const yMax = max$1(overflow.bottom, 0); + if (isXAxis) { + availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max$1(overflow.left, overflow.right)); + } else { + availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max$1(overflow.top, overflow.bottom)); + } + } + await apply({ + ...state, + availableWidth, + availableHeight + }); + const nextDimensions = await platform.getDimensions(elements.floating); + if (width !== nextDimensions.width || height !== nextDimensions.height) { + return { + reset: { + rects: true + } + }; + } + return {}; + } + }; +}; + +function getWindow$1(node) { + var _node$ownerDocument; + return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window; +} + +function getComputedStyle$1(element) { + return getWindow$1(element).getComputedStyle(element); +} + +function isNode(value) { + return value instanceof getWindow$1(value).Node; +} +function getNodeName(node) { + if (isNode(node)) { + return (node.nodeName || '').toLowerCase(); + } + // Mocked nodes in testing environments may not be instances of Node. By + // returning `#document` an infinite loop won't occur. + // https://github.com/floating-ui/floating-ui/issues/2317 + return '#document'; +} + +function isHTMLElement(value) { + return value instanceof getWindow$1(value).HTMLElement; +} +function isElement(value) { + return value instanceof getWindow$1(value).Element; +} +function isShadowRoot(node) { + // Browsers without `ShadowRoot` support. + if (typeof ShadowRoot === 'undefined') { + return false; + } + return node instanceof getWindow$1(node).ShadowRoot || node instanceof ShadowRoot; +} +function isOverflowElement(element) { + const { + overflow, + overflowX, + overflowY, + display + } = getComputedStyle$1(element); + return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); +} +function isTableElement(element) { + return ['table', 'td', 'th'].includes(getNodeName(element)); +} +function isContainingBlock(element) { + const safari = isSafari(); + const css = getComputedStyle$1(element); + + // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block + return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !safari && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !safari && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); +} +function isSafari() { + if (typeof CSS === 'undefined' || !CSS.supports) return false; + return CSS.supports('-webkit-backdrop-filter', 'none'); +} +function isLastTraversableNode(node) { + return ['html', 'body', '#document'].includes(getNodeName(node)); +} + +const min = Math.min; +const max = Math.max; +const round = Math.round; +const floor = Math.floor; +const createEmptyCoords = v => ({ + x: v, + y: v +}); + +function getCssDimensions(element) { + const css = getComputedStyle$1(element); + // In testing environments, the `width` and `height` properties are empty + // strings for SVG elements, returning NaN. Fallback to `0` in this case. + let width = parseFloat(css.width) || 0; + let height = parseFloat(css.height) || 0; + const hasOffset = isHTMLElement(element); + const offsetWidth = hasOffset ? element.offsetWidth : width; + const offsetHeight = hasOffset ? element.offsetHeight : height; + const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight; + if (shouldFallback) { + width = offsetWidth; + height = offsetHeight; + } + return { + width, + height, + $: shouldFallback + }; +} + +function unwrapElement(element) { + return !isElement(element) ? element.contextElement : element; +} + +function getScale(element) { + const domElement = unwrapElement(element); + if (!isHTMLElement(domElement)) { + return createEmptyCoords(1); + } + const rect = domElement.getBoundingClientRect(); + const { + width, + height, + $ + } = getCssDimensions(domElement); + let x = ($ ? round(rect.width) : rect.width) / width; + let y = ($ ? round(rect.height) : rect.height) / height; + + // 0, NaN, or Infinity should always fallback to 1. + + if (!x || !Number.isFinite(x)) { + x = 1; + } + if (!y || !Number.isFinite(y)) { + y = 1; + } + return { + x, + y + }; +} + +const noOffsets = /*#__PURE__*/createEmptyCoords(0); +function getVisualOffsets(element, isFixed, floatingOffsetParent) { + var _win$visualViewport, _win$visualViewport2; + if (isFixed === void 0) { + isFixed = true; + } + if (!isSafari()) { + return noOffsets; + } + const win = element ? getWindow$1(element) : window; + if (!floatingOffsetParent || isFixed && floatingOffsetParent !== win) { + return noOffsets; + } + return { + x: ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0, + y: ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 + }; +} + +function getBoundingClientRect$1(element, includeScale, isFixedStrategy, offsetParent) { + if (includeScale === void 0) { + includeScale = false; + } + if (isFixedStrategy === void 0) { + isFixedStrategy = false; + } + const clientRect = element.getBoundingClientRect(); + const domElement = unwrapElement(element); + let scale = createEmptyCoords(1); + if (includeScale) { + if (offsetParent) { + if (isElement(offsetParent)) { + scale = getScale(offsetParent); + } + } else { + scale = getScale(element); + } + } + const visualOffsets = getVisualOffsets(domElement, isFixedStrategy, offsetParent); + let x = (clientRect.left + visualOffsets.x) / scale.x; + let y = (clientRect.top + visualOffsets.y) / scale.y; + let width = clientRect.width / scale.x; + let height = clientRect.height / scale.y; + if (domElement) { + const win = getWindow$1(domElement); + const offsetWin = offsetParent && isElement(offsetParent) ? getWindow$1(offsetParent) : offsetParent; + let currentIFrame = win.frameElement; + while (currentIFrame && offsetParent && offsetWin !== win) { + const iframeScale = getScale(currentIFrame); + const iframeRect = currentIFrame.getBoundingClientRect(); + const css = getComputedStyle(currentIFrame); + const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; + const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; + x *= iframeScale.x; + y *= iframeScale.y; + width *= iframeScale.x; + height *= iframeScale.y; + x += left; + y += top; + currentIFrame = getWindow$1(currentIFrame).frameElement; + } + } + return rectToClientRect({ + width, + height, + x, + y + }); +} + +function getDocumentElement(node) { + return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement; +} + +function getNodeScroll(element) { + if (isElement(element)) { + return { + scrollLeft: element.scrollLeft, + scrollTop: element.scrollTop + }; + } + return { + scrollLeft: element.pageXOffset, + scrollTop: element.pageYOffset + }; +} + +function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) { + let { + rect, + offsetParent, + strategy + } = _ref; + const isOffsetParentAnElement = isHTMLElement(offsetParent); + const documentElement = getDocumentElement(offsetParent); + if (offsetParent === documentElement) { + return rect; + } + let scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + let scale = createEmptyCoords(1); + const offsets = createEmptyCoords(0); + if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') { + if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { + scroll = getNodeScroll(offsetParent); + } + if (isHTMLElement(offsetParent)) { + const offsetRect = getBoundingClientRect$1(offsetParent); + scale = getScale(offsetParent); + offsets.x = offsetRect.x + offsetParent.clientLeft; + offsets.y = offsetRect.y + offsetParent.clientTop; + } + } + return { + width: rect.width * scale.x, + height: rect.height * scale.y, + x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x, + y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + }; +} + +function getWindowScrollBarX(element) { + // If has a CSS width greater than the viewport, then this will be + // incorrect for RTL. + return getBoundingClientRect$1(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft; +} + +// Gets the entire size of the scrollable document area, even extending outside +// of the `` and `` rect bounds if horizontally scrollable. +function getDocumentRect(element) { + const html = getDocumentElement(element); + const scroll = getNodeScroll(element); + const body = element.ownerDocument.body; + const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth); + const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); + let x = -scroll.scrollLeft + getWindowScrollBarX(element); + const y = -scroll.scrollTop; + if (getComputedStyle$1(body).direction === 'rtl') { + x += max(html.clientWidth, body.clientWidth) - width; + } + return { + width, + height, + x, + y + }; +} + +function getParentNode$1(node) { + if (getNodeName(node) === 'html') { + return node; + } + const result = + // Step into the shadow DOM of the parent of a slotted node. + node.assignedSlot || + // DOM Element detected. + node.parentNode || + // ShadowRoot detected. + isShadowRoot(node) && node.host || + // Fallback. + getDocumentElement(node); + return isShadowRoot(result) ? result.host : result; +} + +function getNearestOverflowAncestor(node) { + const parentNode = getParentNode$1(node); + if (isLastTraversableNode(parentNode)) { + return node.ownerDocument ? node.ownerDocument.body : node.body; + } + if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) { + return parentNode; + } + return getNearestOverflowAncestor(parentNode); +} + +function getOverflowAncestors(node, list) { + var _node$ownerDocument; + if (list === void 0) { + list = []; + } + const scrollableAncestor = getNearestOverflowAncestor(node); + const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body); + const win = getWindow$1(scrollableAncestor); + if (isBody) { + return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []); + } + return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor)); +} + +function getViewportRect(element, strategy) { + const win = getWindow$1(element); + const html = getDocumentElement(element); + const visualViewport = win.visualViewport; + let width = html.clientWidth; + let height = html.clientHeight; + let x = 0; + let y = 0; + if (visualViewport) { + width = visualViewport.width; + height = visualViewport.height; + const visualViewportBased = isSafari(); + if (!visualViewportBased || visualViewportBased && strategy === 'fixed') { + x = visualViewport.offsetLeft; + y = visualViewport.offsetTop; + } + } + return { + width, + height, + x, + y + }; +} + +// Returns the inner client rect, subtracting scrollbars if present. +function getInnerBoundingClientRect(element, strategy) { + const clientRect = getBoundingClientRect$1(element, true, strategy === 'fixed'); + const top = clientRect.top + element.clientTop; + const left = clientRect.left + element.clientLeft; + const scale = isHTMLElement(element) ? getScale(element) : createEmptyCoords(1); + const width = element.clientWidth * scale.x; + const height = element.clientHeight * scale.y; + const x = left * scale.x; + const y = top * scale.y; + return { + width, + height, + x, + y + }; +} +function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) { + let rect; + if (clippingAncestor === 'viewport') { + rect = getViewportRect(element, strategy); + } else if (clippingAncestor === 'document') { + rect = getDocumentRect(getDocumentElement(element)); + } else if (isElement(clippingAncestor)) { + rect = getInnerBoundingClientRect(clippingAncestor, strategy); + } else { + const visualOffsets = getVisualOffsets(element); + rect = { + ...clippingAncestor, + x: clippingAncestor.x - visualOffsets.x, + y: clippingAncestor.y - visualOffsets.y + }; + } + return rectToClientRect(rect); +} +function hasFixedPositionAncestor(element, stopNode) { + const parentNode = getParentNode$1(element); + if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { + return false; + } + return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); +} + +// A "clipping ancestor" is an `overflow` element with the characteristic of +// clipping (or hiding) child elements. This returns all clipping ancestors +// of the given element up the tree. +function getClippingElementAncestors(element, cache) { + const cachedResult = cache.get(element); + if (cachedResult) { + return cachedResult; + } + let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body'); + let currentContainingBlockComputedStyle = null; + const elementIsFixed = getComputedStyle$1(element).position === 'fixed'; + let currentNode = elementIsFixed ? getParentNode$1(element) : element; + + // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block + while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { + const computedStyle = getComputedStyle$1(currentNode); + const currentNodeIsContaining = isContainingBlock(currentNode); + if (!currentNodeIsContaining && computedStyle.position === 'fixed') { + currentContainingBlockComputedStyle = null; + } + const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode); + if (shouldDropCurrentNode) { + // Drop non-containing blocks. + result = result.filter(ancestor => ancestor !== currentNode); + } else { + // Record last containing block for next iteration. + currentContainingBlockComputedStyle = computedStyle; + } + currentNode = getParentNode$1(currentNode); + } + cache.set(element, result); + return result; +} + +// Gets the maximum area that the element is visible in due to any number of +// clipping ancestors. +function getClippingRect(_ref) { + let { + element, + boundary, + rootBoundary, + strategy + } = _ref; + const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary); + const clippingAncestors = [...elementClippingAncestors, rootBoundary]; + const firstClippingAncestor = clippingAncestors[0]; + const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => { + const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy); + accRect.top = max(rect.top, accRect.top); + accRect.right = min(rect.right, accRect.right); + accRect.bottom = min(rect.bottom, accRect.bottom); + accRect.left = max(rect.left, accRect.left); + return accRect; + }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy)); + return { + width: clippingRect.right - clippingRect.left, + height: clippingRect.bottom - clippingRect.top, + x: clippingRect.left, + y: clippingRect.top + }; +} + +function getDimensions(element) { + return getCssDimensions(element); +} + +function getTrueOffsetParent(element, polyfill) { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { + return null; + } + if (polyfill) { + return polyfill(element); + } + return element.offsetParent; +} +function getContainingBlock(element) { + let currentNode = getParentNode$1(element); + while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) { + if (isContainingBlock(currentNode)) { + return currentNode; + } else { + currentNode = getParentNode$1(currentNode); + } + } + return null; +} + +// Gets the closest ancestor positioned element. Handles some edge cases, +// such as table ancestors and cross browser bugs. +function getOffsetParent$1(element, polyfill) { + const window = getWindow$1(element); + if (!isHTMLElement(element)) { + return window; + } + let offsetParent = getTrueOffsetParent(element, polyfill); + while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') { + offsetParent = getTrueOffsetParent(offsetParent, polyfill); + } + if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) { + return window; + } + return offsetParent || getContainingBlock(element) || window; +} + +function getRectRelativeToOffsetParent(element, offsetParent, strategy) { + const isOffsetParentAnElement = isHTMLElement(offsetParent); + const documentElement = getDocumentElement(offsetParent); + const isFixed = strategy === 'fixed'; + const rect = getBoundingClientRect$1(element, true, isFixed, offsetParent); + let scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + const offsets = createEmptyCoords(0); + if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { + if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { + scroll = getNodeScroll(offsetParent); + } + if (isHTMLElement(offsetParent)) { + const offsetRect = getBoundingClientRect$1(offsetParent, true, isFixed, offsetParent); + offsets.x = offsetRect.x + offsetParent.clientLeft; + offsets.y = offsetRect.y + offsetParent.clientTop; + } else if (documentElement) { + offsets.x = getWindowScrollBarX(documentElement); + } + } + return { + x: rect.left + scroll.scrollLeft - offsets.x, + y: rect.top + scroll.scrollTop - offsets.y, + width: rect.width, + height: rect.height + }; +} + +const platform = { + getClippingRect, + convertOffsetParentRelativeRectToViewportRelativeRect, + isElement, + getDimensions, + getOffsetParent: getOffsetParent$1, + getDocumentElement, + getScale, + async getElementRects(_ref) { + let { + reference, + floating, + strategy + } = _ref; + const getOffsetParentFn = this.getOffsetParent || getOffsetParent$1; + const getDimensionsFn = this.getDimensions; + return { + reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy), + floating: { + x: 0, + y: 0, + ...(await getDimensionsFn(floating)) + } + }; + }, + getClientRects: element => Array.from(element.getClientRects()), + isRTL: element => getComputedStyle$1(element).direction === 'rtl' +}; + +// https://samthor.au/2021/observing-dom/ +function observeMove(element, onMove) { + let io = null; + let timeoutId; + const root = getDocumentElement(element); + function cleanup() { + clearTimeout(timeoutId); + io && io.disconnect(); + io = null; + } + function refresh(skip, threshold) { + if (skip === void 0) { + skip = false; + } + if (threshold === void 0) { + threshold = 1; + } + cleanup(); + const { + left, + top, + width, + height + } = element.getBoundingClientRect(); + if (!skip) { + onMove(); + } + if (!width || !height) { + return; + } + const insetTop = floor(top); + const insetRight = floor(root.clientWidth - (left + width)); + const insetBottom = floor(root.clientHeight - (top + height)); + const insetLeft = floor(left); + const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px"; + const options = { + rootMargin, + threshold: max(0, min(1, threshold)) || 1 + }; + let isFirstUpdate = true; + function handleObserve(entries) { + const ratio = entries[0].intersectionRatio; + if (ratio !== threshold) { + if (!isFirstUpdate) { + return refresh(); + } + if (!ratio) { + timeoutId = setTimeout(() => { + refresh(false, 1e-7); + }, 100); + } else { + refresh(false, ratio); + } + } + isFirstUpdate = false; + } + + // Older browsers don't support a `document` as the root and will throw an + // error. + try { + io = new IntersectionObserver(handleObserve, { + ...options, + // Handle