From beb1a882094a9c27575455e8a2da6d8ef32e8972 Mon Sep 17 00:00:00 2001 From: Gianluca Frediani Date: Tue, 5 Sep 2023 16:30:50 +0200 Subject: [PATCH] feat: added attachment field --- .eslintrc.js | 1 + assets/CcField.js | 2 +- assets/DatePicker.js | 2 +- assets/new-request-form.js | 152 +- assets/shared.js | 4 +- assets/vendor.js | 21697 +++++++++------- package.json | 4 + .../new-request-form/NewRequestForm.tsx | 3 + .../new-request-form/data-types/Field.ts | 7 + .../fields/attachments/Attachments.tsx | 192 + .../fields/attachments/FileListItem.tsx | 86 + .../fields/attachments/useAttachedFiles.ts | 74 + src/modules/shared.tsx | 8 +- yarn.lock | 44 +- 14 files changed, 13214 insertions(+), 9062 deletions(-) create mode 100644 src/modules/new-request-form/fields/attachments/Attachments.tsx create mode 100644 src/modules/new-request-form/fields/attachments/FileListItem.tsx create mode 100644 src/modules/new-request-form/fields/attachments/useAttachedFiles.ts diff --git a/.eslintrc.js b/.eslintrc.js index 22f64ae93..9c520201e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,6 +11,7 @@ module.exports = { "plugin:import/typescript", "plugin:react/recommended", "plugin:react/jsx-runtime", + "plugin:react-hooks/recommended", "plugin:prettier/recommended", ], env: { diff --git a/assets/CcField.js b/assets/CcField.js index 35b43a1c4..fd35532fb 100644 --- a/assets/CcField.js +++ b/assets/CcField.js @@ -1,4 +1,4 @@ -import { r as reactExports, u as useGrid, j as jsxRuntimeExports, F as Field, L as Label$1, H as Hint, k as Tag, M as Message, s as styled, l as focusStyles, m as hideVisually, n as FauxInput, N as Ne, o as getLineHeight, I as Input } from 'vendor'; +import { r as reactExports, x as useGrid, j as jsxRuntimeExports, F as Field, L as Label$1, H as Hint, y as Tag, M as Message, s as styled, z as focusStyles, E as hideVisually, G as FauxInput, J as Ne, K as getLineHeight, I as Input } from 'vendor'; function useTagsInputContainer({ tags, onTagsChange, inputValue, onInputValueChange, inputRef, gridRowRef, i18n, }) { const [selectedIndex, setSelectedIndex] = reactExports.useState(0); diff --git a/assets/DatePicker.js b/assets/DatePicker.js index a5e04fbb8..6c3abb13e 100644 --- a/assets/DatePicker.js +++ b/assets/DatePicker.js @@ -1,4 +1,4 @@ -import { r as reactExports, j as jsxRuntimeExports, F as Field, L as Label$1, H as Hint, i as Datepicker, I as Input, M as Message } from 'vendor'; +import { r as reactExports, j as jsxRuntimeExports, F as Field, L as Label$1, H as Hint, w as Datepicker, I as Input, M as Message } from 'vendor'; function DatePicker({ field, locale, valueFormat, }) { const { label, error, value, name, required, description } = field; diff --git a/assets/new-request-form.js b/assets/new-request-form.js index 632c932b6..5718ef6e2 100644 --- a/assets/new-request-form.js +++ b/assets/new-request-form.js @@ -1,4 +1,4 @@ -import { j as jsxRuntimeExports, F as Field, L as Label$1, H as Hint, I as Input$1, 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 reactExports, e as Checkbox$1, f as OptGroup, p as purify, s as styled, A as Alert, B as Button, g as reactDomExports } from 'vendor'; +import { j as jsxRuntimeExports, F as Field, L as Label$1, H as Hint, I as Input$1, 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 reactExports, e as Checkbox$1, f as OptGroup, p as purify, s as styled, g as FileList, h as File, i as Tooltip, P as Progress, A as Anchor, u as useToast, N as Notification, k as Title, l as Close, m as useDropzone, n as FileUpload, o as Alert, B as Button, q as reactDomExports } from 'vendor'; import { ComponentProviders } from 'shared'; function Input({ field }) { @@ -168,7 +168,7 @@ function ParentTicketField({ field }) { } // NOTE: This is a temporary handling of the CSRF token -const fetchCsrfToken = async () => { +const fetchCsrfToken$1 = async () => { const response = await fetch("/hc/api/internal/csrf_token.json"); const { current_session } = await response.json(); return current_session.csrf_token; @@ -189,7 +189,7 @@ function useSubmitHandler() { if (isSubmitting.current === false) { isSubmitting.current = true; const form = e.target; - const token = await fetchCsrfToken(); + const token = await fetchCsrfToken$1(); const hiddenInput = document.createElement("input"); hiddenInput.type = "hidden"; hiddenInput.name = "authenticity_token"; @@ -279,6 +279,150 @@ function usePrefilledTicketFields(fields) { return fields; } +const FileNameWrapper = styled.div ` + flex: 1; +`; +function FileListItem({ file, onRemove, }) { + const handleFileKeyDown = (e) => { + if (e.code === "Delete" || e.code === "Backspace") { + e.preventDefault(); + onRemove(); + } + }; + const handleCloseKeyDown = (e) => { + if (e.code === "Enter" || + e.code === "Space" || + e.code === "Delete" || + e.code === "Backspace") { + e.preventDefault(); + onRemove(); + } + }; + const fileName = file.status === "pending" ? file.file_name : file.value.file_name; + return (jsxRuntimeExports.jsx(FileList.Item, { children: jsxRuntimeExports.jsx(File, { type: "generic", title: fileName, onKeyDown: handleFileKeyDown, children: file.status === "pending" ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(FileNameWrapper, { children: fileName }), jsxRuntimeExports.jsx(Tooltip, { content: "Stop upload", children: jsxRuntimeExports.jsx(File.Close, { "aria-label": "Stop upload", onClick: () => { + onRemove(); + }, onKeyDown: handleCloseKeyDown }) }), jsxRuntimeExports.jsx(Progress, { value: file.progress, "aria-label": `Uploading ${fileName}` })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(FileNameWrapper, { children: jsxRuntimeExports.jsx(Anchor, { isExternal: true, href: file.value.url, target: "_blank", children: fileName }) }), jsxRuntimeExports.jsx(Tooltip, { content: "Remove file", children: jsxRuntimeExports.jsx(File.Delete, { "aria-label": "Remove file", onClick: () => { + onRemove(); + }, onKeyDown: handleCloseKeyDown }) }), jsxRuntimeExports.jsx(Progress, { value: 100, "aria-hidden": "true" })] })) }) })); +} + +function useAttachedFiles(initialValue) { + const [files, setFiles] = reactExports.useState(initialValue); + const addPendingFile = reactExports.useCallback((id, file_name, xhr) => { + setFiles((current) => [ + ...current, + { status: "pending", id, file_name, progress: 0, xhr }, + ]); + }, []); + const setPendingFileProgress = reactExports.useCallback((id, progress) => { + setFiles((current) => current.map((file) => file.status === "pending" && file.id === id + ? { ...file, progress } + : file)); + }, []); + const removePendingFile = reactExports.useCallback((id) => { + setFiles((current) => current.filter((file) => file.status !== "pending" || file.id !== id)); + }, []); + const removeUploadedFile = reactExports.useCallback((id) => { + setFiles((current) => current.filter((file) => file.status !== "uploaded" || file.value.id !== id)); + }, []); + const setUploaded = reactExports.useCallback((pendingId, value) => { + setFiles((current) => current.map((file) => file.status === "pending" && file.id === pendingId + ? { status: "uploaded", value } + : file)); + }, []); + return { + files, + addPendingFile, + setPendingFileProgress, + removePendingFile, + removeUploadedFile, + setUploaded, + }; +} + +async function fetchCsrfToken() { + const response = await fetch("/api/v2/users/me.json"); + const { user: { authenticity_token }, } = await response.json(); + return authenticity_token; +} +function Attachments({ field }) { + const { label, error, name, attachments, description } = field; + const { files, addPendingFile, setPendingFileProgress, setUploaded, removePendingFile, removeUploadedFile, } = useAttachedFiles(attachments?.map((value) => ({ + status: "uploaded", + value, + })) ?? []); + const { addToast } = useToast(); + const notifyError = reactExports.useCallback((fileName) => { + addToast(({ close }) => (jsxRuntimeExports.jsxs(Notification, { type: "error", children: [jsxRuntimeExports.jsx(Title, { children: "Upload error" }), "There was an error uploading ", fileName, ". Please try again or upload another file.", jsxRuntimeExports.jsx(Close, { "aria-label": "Close", onClick: close })] }))); + }, [addToast]); + const onDrop = reactExports.useCallback(async (acceptedFiles) => { + const csrfToken = await fetchCsrfToken(); + for (const file of acceptedFiles) { + // fetch doesn't support upload progress, so we use XMLHttpRequest + const xhr = new XMLHttpRequest(); + const url = new URL(`${window.location.origin}/api/v2/uploads.json`); + url.searchParams.append("filename", file.name); + xhr.open("POST", url); + xhr.setRequestHeader("Content-Type", file.type); + xhr.setRequestHeader("X-CSRF-Token", csrfToken); + xhr.responseType = "json"; + const pendingId = crypto.randomUUID(); + addPendingFile(pendingId, file.name, xhr); + xhr.upload.addEventListener("progress", ({ loaded, total }) => { + const progress = Math.round((loaded / total) * 100); + // There is a bit of delay between the upload ending and the + // load event firing, so we don't want to set the progress to 100 + // otherwise it is not clear that the upload is still in progress. + if (progress <= 90) { + setPendingFileProgress(pendingId, progress); + } + }); + xhr.addEventListener("load", () => { + if (xhr.status >= 200 && xhr.status < 300) { + const { upload: { attachment: { file_name, content_url }, token, }, } = xhr.response; + setUploaded(pendingId, { id: token, file_name, url: content_url }); + } + else { + notifyError(file.name); + removePendingFile(pendingId); + } + }); + xhr.addEventListener("error", () => { + notifyError(file.name); + removePendingFile(pendingId); + }); + xhr.send(file); + } + }, [ + addPendingFile, + removePendingFile, + setPendingFileProgress, + setUploaded, + notifyError, + ]); + const { getRootProps, getInputProps, isDragActive } = useDropzone({ + onDrop, + }); + const handleRemove = async (file) => { + if (file.status === "pending") { + file.xhr.abort(); + removePendingFile(file.id); + } + else { + const csrfToken = await fetchCsrfToken(); + const token = file.value.id; + removeUploadedFile(file.value.id); + await fetch(`/api/v2/uploads/${token}.json`, { + method: "DELETE", + headers: { "X-CSRF-Token": csrfToken }, + }); + } + }; + return (jsxRuntimeExports.jsxs(Field, { children: [jsxRuntimeExports.jsx(Label$1, { children: label }), description && jsxRuntimeExports.jsx(Hint, { children: description }), error && jsxRuntimeExports.jsx(Message, { validation: "error", children: error }), jsxRuntimeExports.jsxs(FileUpload, { ...getRootProps(), isDragging: isDragActive, children: [isDragActive ? (jsxRuntimeExports.jsx("span", { children: "Drop files here" })) : (jsxRuntimeExports.jsx("span", { children: "Choose a file or drag and drop here" })), jsxRuntimeExports.jsx(Input$1, { ...getInputProps() })] }), files.map((file) => (jsxRuntimeExports.jsx(FileListItem, { file: file, onRemove: () => { + handleRemove(file); + } }, file.status === "pending" ? file.id : file.value.id))), files.map((file) => file.status === "uploaded" && (jsxRuntimeExports.jsx("input", { type: "hidden", name: name, value: JSON.stringify(file.value) }, file.value.id)))] })); +} + const Form = styled.form ` display: flex; flex-direction: column; @@ -327,6 +471,8 @@ function NewRequestForm({ ticketForms, requestForm, parentId, locale, }) { return jsxRuntimeExports.jsx("div", { children: "tagger" }); case "due_at": return (showDueDate && (jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}), children: jsxRuntimeExports.jsx(DatePicker, { field: field, locale: locale, valueFormat: "dateTime" }) }))); + case "attachments": + return jsxRuntimeExports.jsx(Attachments, { field: field }); default: return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}); } diff --git a/assets/shared.js b/assets/shared.js index 9a90aae62..9354ba853 100644 --- a/assets/shared.js +++ b/assets/shared.js @@ -1,11 +1,11 @@ -import { D as DEFAULT_THEME, j as jsxRuntimeExports, h as ThemeProvider } from 'vendor'; +import { D as DEFAULT_THEME, j as jsxRuntimeExports, t as ThemeProvider, v as ToastProvider } from 'vendor'; let theme = DEFAULT_THEME; function setupGardenTheme(callback) { theme = callback(DEFAULT_THEME); } function ComponentProviders({ children }) { - return jsxRuntimeExports.jsx(ThemeProvider, { theme: theme, children: children }); + return (jsxRuntimeExports.jsx(ThemeProvider, { theme: theme, children: jsxRuntimeExports.jsx(ToastProvider, { zIndex: 2147483647, children: children }) })); } export { ComponentProviders, setupGardenTheme }; diff --git a/assets/vendor.js b/assets/vendor.js index 9426060f3..f5d654b81 100644 --- a/assets/vendor.js +++ b/assets/vendor.js @@ -574,6 +574,116 @@ function checkDCE() { } var reactDomExports = reactDom.exports; +var ReactDOM = /*@__PURE__*/getDefaultExportFromCjs(reactDomExports); + +var propTypes = {exports: {}}; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +var ReactPropTypesSecret_1; +var hasRequiredReactPropTypesSecret; + +function requireReactPropTypesSecret () { + if (hasRequiredReactPropTypesSecret) return ReactPropTypesSecret_1; + hasRequiredReactPropTypesSecret = 1; + + var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; + + ReactPropTypesSecret_1 = ReactPropTypesSecret; + return ReactPropTypesSecret_1; +} + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +var factoryWithThrowingShims; +var hasRequiredFactoryWithThrowingShims; + +function requireFactoryWithThrowingShims () { + if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims; + hasRequiredFactoryWithThrowingShims = 1; + + var ReactPropTypesSecret = requireReactPropTypesSecret(); + + function emptyFunction() {} + function emptyFunctionWithReset() {} + emptyFunctionWithReset.resetWarningCache = emptyFunction; + + factoryWithThrowingShims = function() { + function shim(props, propName, componentName, location, propFullName, secret) { + if (secret === ReactPropTypesSecret) { + // It is still safe when called from React. + return; + } + var err = new Error( + 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + + 'Use PropTypes.checkPropTypes() to call them. ' + + 'Read more at http://fb.me/use-check-prop-types' + ); + err.name = 'Invariant Violation'; + throw err; + } shim.isRequired = shim; + function getShim() { + return shim; + } // Important! + // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. + var ReactPropTypes = { + array: shim, + bigint: shim, + bool: shim, + func: shim, + number: shim, + object: shim, + string: shim, + symbol: shim, + + any: shim, + arrayOf: getShim, + element: shim, + elementType: shim, + instanceOf: getShim, + node: shim, + objectOf: getShim, + oneOf: getShim, + oneOfType: getShim, + shape: getShim, + exact: getShim, + + checkPropTypes: emptyFunctionWithReset, + resetWarningCache: emptyFunction + }; + + ReactPropTypes.PropTypes = ReactPropTypes; + + return ReactPropTypes; + }; + return factoryWithThrowingShims; +} + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +{ + // By explicitly using `prop-types` you are opting into new production behavior. + // http://fb.me/prop-types-in-prod + propTypes.exports = requireFactoryWithThrowingShims()(); +} + +var propTypesExports = propTypes.exports; +var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports); var reactIs$2 = {exports: {}}; @@ -1430,115 +1540,6 @@ 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.createContext();ae.Consumer;var ue=React.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 false */ -function isObject$1(value) { +function isObject$2(value) { var type = typeof value; return !!value && (type == 'object' || type == 'function'); } @@ -4021,8 +4022,8 @@ var memoize$1 = /*@__PURE__*/getDefaultExportFromCjs(lodash_memoize); * found at http://www.apache.org/licenses/LICENSE-2.0. */ -function _extends$v() { - _extends$v = Object.assign ? Object.assign.bind() : function (target) { +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) { @@ -4033,7 +4034,7 @@ function _extends$v() { } return target; }; - return _extends$v.apply(this, arguments); + return _extends$x.apply(this, arguments); } const PALETTE = { @@ -4322,7 +4323,7 @@ const ThemeProvider = _ref => { scope: controlledScopeRef, relativeDocument }); - return React.createElement(Ge, _extends$v({ + return React.createElement(Ge, _extends$x({ theme: theme }, other), focusVisibleRef === undefined ? React.createElement("div", { ref: scopeRef @@ -4514,7 +4515,7 @@ const useText = function (component, props, name, text) { }, [component.displayName, value, name, text, condition]); }; -const animationStyles = (position, options) => { +const animationStyles$2 = (position, options) => { const theme = options.theme || DEFAULT_THEME; let translateValue = `${theme.space.base * 5}px`; let transformFunction; @@ -4549,7 +4550,7 @@ function menuStyles(position) { } 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$1(options)); + 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$2(position, options), options.hidden && hiddenStyles$1(options)); } const SELECTOR_FOCUS_VISIBLE = '&:focus-visible, &[data-garden-focus-visible="true"]'; @@ -4584,79 +4585,90 @@ const focusStyles = _ref => { return Ne(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles); }; +function mergeRefs(refs) { + return function (value) { + refs.forEach(function (ref) { + if (typeof ref === "function") { + ref(value); + } else if (ref != null) { + ref.current = value; + } + }); + }; +} + /** - * generates a UID factory - * @internal - * @example - * const uid = generateUID(); - * uid(object) = 1; - * uid(object) = 1; - * uid(anotherObject) = 2; + * 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. */ -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(), +function composeEventHandlers$4() { + 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; }); -}; -var counter = createSource(); -var source = reactExports.createContext(createSource()); -var getId$1 = 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$1(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; +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 KEYS$3 = { + 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$3; +(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$3 || (DocumentPosition$3 = {})); + /** * Copyright Zendesk, Inc. * @@ -4664,5565 +4676,8630 @@ var useUIDSeed = function () { * 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) { +const stateReducer$1 = (state, action) => { + switch (action.type) { + case 'END': + case 'HOME': + case 'FOCUS': + case 'INCREMENT': + case 'DECREMENT': + { + return { + ...state, + focusedValue: action.payload + }; + } + case 'MOUSE_SELECT': + { + return { + ...state, + selectedValue: action.payload, + focusedValue: undefined + }; + } + case 'KEYBOARD_SELECT': + { + return { + ...state, + selectedValue: action.payload + }; + } + case 'EXIT_WIDGET': + { + return { + ...state, + focusedValue: undefined + }; + } + default: + return state; + } +}; + +const useSelection = _ref => { + let { + values, + direction = 'horizontal', + defaultFocusedValue = values[0], + defaultSelectedValue, + rtl, + selectedValue, + focusedValue, + onSelect, + onFocus + } = _ref; + const isSelectedValueControlled = selectedValue !== undefined; + const isFocusedValueControlled = focusedValue !== undefined; + const refs = reactExports.useMemo(() => values.reduce((all, value) => { + all[value] = reactExports.createRef(); + return all; + }, {}), [values]); + const [state, dispatch] = reactExports.useReducer(stateReducer$1, { + selectedValue, + focusedValue + }); + const controlledFocusedValue = getControlledValue(focusedValue, state.focusedValue); + const controlledSelectedValue = getControlledValue(selectedValue, state.selectedValue); + reactExports.useEffect(() => { + if (controlledFocusedValue !== undefined) { + const targetRef = refs[controlledFocusedValue]; + targetRef?.current && targetRef.current.focus(); + } + }, [controlledFocusedValue]); + reactExports.useEffect(() => { + if (selectedValue === undefined && defaultSelectedValue !== undefined) { + onSelect && onSelect(defaultSelectedValue); + if (!isSelectedValueControlled) { + dispatch({ + type: 'KEYBOARD_SELECT', + payload: defaultSelectedValue + }); + } + } + }, []); + const getGroupProps = reactExports.useCallback(function (_temp) { let { - id = labelId, - htmlFor = inputId, + role = 'group', ...other } = _temp === void 0 ? {} : _temp; return { - id, - htmlFor, - 'data-garden-container-id': 'containers.field', - 'data-garden-container-version': '2.1.2', + role: role === null ? undefined : role, + 'data-garden-container-id': 'containers.selection', + 'data-garden-container-version': '3.0.2', ...other }; - }; - const getInputProps = function (_temp2, _temp3) { - let { - id = inputId, - ...other - } = _temp2 === void 0 ? {} : _temp2; + }, []); + const getElementProps = _ref2 => { 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, + selectedAriaKey = 'aria-selected', + onFocus: onFocusCallback, + onKeyDown, + onClick, + value, ...other + } = _ref2; + const isSelected = controlledSelectedValue === value; + const isFocused = controlledFocusedValue === undefined ? isSelected : controlledFocusedValue === value; + const tabIndex = isFocused || controlledSelectedValue === undefined && controlledFocusedValue === undefined && value === defaultFocusedValue ? 0 : -1; + const verticalDirection = direction === 'vertical' || direction === 'both'; + const horizontalDirection = direction === 'horizontal' || direction === 'both'; + const handleFocus = () => { + onFocus && onFocus(value); + !isFocusedValueControlled && dispatch({ + type: 'FOCUS', + payload: value + }); }; - }; - const getHintProps = function (_temp4) { - let { - id = hintId, - ...other - } = _temp4 === void 0 ? {} : _temp4; - return { - id, - ...other + const handleClick = () => { + onSelect && onSelect(value); + onFocus && onFocus(value); + !isSelectedValueControlled && dispatch({ + type: 'MOUSE_SELECT', + payload: value + }); + }; + const handleKeyDown = event => { + let nextItem; + let currentItem; + if (isFocusedValueControlled) { + currentItem = values.find(id => focusedValue === id); + } else { + currentItem = values.find(id => state.focusedValue === id); + } + const onIncrement = () => { + const nextItemIndex = values.indexOf(currentItem) + 1; + nextItem = values[nextItemIndex]; + if (!nextItem) { + nextItem = values[0]; + } + !isFocusedValueControlled && dispatch({ + type: 'INCREMENT', + payload: nextItem + }); + onFocus && onFocus(nextItem); + }; + const onDecrement = () => { + const nextItemIndex = values.indexOf(currentItem) - 1; + nextItem = values[nextItemIndex]; + if (!nextItem) { + nextItem = values[values.length - 1]; + } + !isFocusedValueControlled && dispatch({ + type: 'DECREMENT', + payload: nextItem + }); + onFocus && onFocus(nextItem); + }; + const hasModifierKeyPressed = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey; + if (!hasModifierKeyPressed) { + if (event.key === KEYS$3.UP && verticalDirection || event.key === KEYS$3.LEFT && horizontalDirection) { + if (rtl && horizontalDirection) { + onIncrement(); + } else { + onDecrement(); + } + event.preventDefault(); + } else if (event.key === KEYS$3.DOWN && verticalDirection || event.key === KEYS$3.RIGHT && horizontalDirection) { + if (rtl && horizontalDirection) { + onDecrement(); + } else { + onIncrement(); + } + event.preventDefault(); + } else if (event.key === KEYS$3.HOME) { + const firstItem = values[0]; + !isFocusedValueControlled && dispatch({ + type: 'HOME', + payload: firstItem + }); + onFocus && onFocus(firstItem); + event.preventDefault(); + } else if (event.key === KEYS$3.END) { + const lastItem = values[values.length - 1]; + !isFocusedValueControlled && dispatch({ + type: 'END', + payload: lastItem + }); + onFocus && onFocus(lastItem); + event.preventDefault(); + } else if (event.key === KEYS$3.SPACE || event.key === KEYS$3.ENTER) { + onSelect && onSelect(value); + !isSelectedValueControlled && dispatch({ + type: 'KEYBOARD_SELECT', + payload: value + }); + event.preventDefault(); + } + } + }; + const onBlur = event => { + if (event.target.tabIndex === 0) { + dispatch({ + type: 'EXIT_WIDGET' + }); + onFocus && onFocus(); + } }; - }; - const getMessageProps = function (_temp5) { - let { - id = messageId, - ...other - } = _temp5 === void 0 ? {} : _temp5; return { - id, + tabIndex, + [selectedAriaKey]: selectedAriaKey ? isSelected : undefined, + ref: refs[value], + onFocus: composeEventHandlers$4(onFocusCallback, handleFocus), + onClick: composeEventHandlers$4(onClick, handleClick), + onKeyDown: composeEventHandlers$4(onKeyDown, handleKeyDown), + onBlur, ...other }; }; return { - getLabelProps, - getInputProps, - getHintProps, - getMessageProps + focusedValue: controlledFocusedValue, + selectedValue: controlledSelectedValue, + getElementProps, + getGroupProps }; -} +}; ({ children: PropTypes.func, render: PropTypes.func, - id: PropTypes.string + values: PropTypes.arrayOf(PropTypes.any).isRequired, + rtl: PropTypes.bool, + direction: PropTypes.oneOf(['horizontal', 'vertical', 'both']), + defaultFocusedValue: PropTypes.string, + defaultSelectedValue: PropTypes.string, + focusedValue: PropTypes.any, + selectedValue: PropTypes.any, + onSelect: PropTypes.func, + onFocus: PropTypes.func }); -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 + * 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. */ -/** 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; +function _extends$2$4() { + _extends$2$4 = 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$4.apply(this, arguments); +} -/** - * Used to resolve the - * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) - * of values. - */ -var objectToString = objectProto.toString; +const SIZE$3 = ['small', 'medium', 'large']; -/* Built-in method references for those with the same name as other `lodash` methods. */ -var nativeMax = Math.max, - nativeMin = Math.min; +const COMPONENT_ID$5$5 = 'buttons.button_group_view'; +const StyledButtonGroup = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$5$5, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledButtonGroup", + componentId: "sc-1fbpzef-0" +})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$5$5, props)); +StyledButtonGroup.defaultProps = { + theme: DEFAULT_THEME +}; -/** - * 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(); +const COMPONENT_ID$4$5 = 'buttons.icon'; +const sizeStyles$1$3 = props => { + let marginProperty; + if (props.position === 'start') { + marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`; + } else if (props.position === 'end') { + marginProperty = `margin-${props.theme.rtl ? 'right' : 'left'}`; + } + return marginProperty && Ne(["", ":", "px;"], marginProperty, props.theme.space.base * 2); +}; +const StyledIcon$1 = styled(_ref => { + let { + children, + isRotated, + theme, + ...props + } = _ref; + return React.cloneElement(reactExports.Children.only(children), props); +}).attrs({ + 'data-garden-id': COMPONENT_ID$4$5, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledIcon", + componentId: "sc-19meqgg-0" +})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles$1$3(props), props => retrieveComponentStyles(COMPONENT_ID$4$5, props)); +StyledIcon$1.defaultProps = { + theme: DEFAULT_THEME }; -/** - * 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); +const COMPONENT_ID$3$5 = 'buttons.button'; +const getBorderRadius = props => { + if (props.isPill) { + return '100px'; } - 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; + return props.theme.borderRadii.md; +}; +const getDisabledBackgroundColor = props => { + return getColor('neutralHue', 200, props.theme); +}; +const getHeight$1 = props => { + if (props.size === 'small') { + return `${props.theme.space.base * 8}px`; + } else if (props.size === 'large') { + return `${props.theme.space.base * 12}px`; } - - function invokeFunc(time) { - var args = lastArgs, - thisArg = lastThis; - - lastArgs = lastThis = undefined; - lastInvokeTime = time; - result = func.apply(thisArg, args); - return result; + return `${props.theme.space.base * 10}px`; +}; +const colorStyles$f = props => { + let retVal; + let hue; + if (props.disabled || props.isNeutral && (props.isPrimary || props.isSelected) && !props.isDanger) { + hue = 'neutralHue'; + } else if (props.isDanger) { + hue = 'dangerHue'; + } else { + hue = 'primaryHue'; } - - 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; + const shade = 600; + const baseColor = getColor(hue, shade, props.theme); + const hoverColor = getColor(hue, shade + 100, props.theme); + const activeColor = getColor(hue, shade + 200, props.theme); + const focusColor = getColor('primaryHue', shade, props.theme); + const disabledBackgroundColor = getDisabledBackgroundColor(props); + const disabledForegroundColor = getColor(hue, shade - 200, props.theme); + if (props.isLink) { + retVal = Ne(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, focusStyles({ + theme: props.theme, + condition: false, + styles: { + color: baseColor, + outlineColor: focusColor + } + }), hoverColor, activeColor, disabledForegroundColor); + } else if (props.isPrimary || props.isSelected) { + retVal = Ne(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], props.isPrimary && props.isSelected ? activeColor : baseColor, props.theme.palette.white, hoverColor, focusStyles({ + theme: props.theme, + inset: props.focusInset, + shadowWidth: props.focusInset ? 'sm' : 'md', + spacerWidth: props.focusInset ? 'sm' : 'xs', + styles: props.isDanger && props.focusInset ? { + borderColor: focusColor + } : undefined + }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor); + } else { + const borderColor = props.isNeutral && !props.isDanger ? getColor('neutralHue', 300, props.theme) : baseColor; + const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor; + const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor; + const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor; + retVal = Ne(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, rgba(baseColor, 0.08), hoverForegroundColor, focusStyles({ + theme: props.theme, + inset: props.focusInset, + styles: props.isNeutral ? { + borderColor: baseColor + } : undefined + }), !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon$1, props.isNeutral && getColor('neutralHue', shade, props.theme), StyledIcon$1, StyledIcon$1, StyledIcon$1, props.isNeutral && getColor('neutralHue', shade + 100, props.theme), StyledIcon$1, props.isNeutral && foregroundColor, StyledIcon$1, disabledForegroundColor); } - - function remainingWait(time) { - var timeSinceLastCall = time - lastCallTime, - timeSinceLastInvoke = time - lastInvokeTime, - result = wait - timeSinceLastCall; - - return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result; + return retVal; +}; +const groupStyles = props => { + const { + theme, + isPrimary, + isBasic, + isSelected, + isPill, + focusInset + } = props; + const { + rtl, + borderWidths, + borders + } = theme; + const startPosition = rtl ? 'right' : 'left'; + const endPosition = rtl ? 'left' : 'right'; + const marginOffset = borderWidths.sm; + const marginDisplacement = `${isPrimary || isBasic ? '' : '-'}${marginOffset}`; + const iconMarginDisplacement = isPill && '-2px'; + const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props); + const borderColor = isBasic ? 'transparent' : 'revert'; + const focusColor = getColor('primaryHue', 600, theme); + const focusBoxShadow = isBasic && !isSelected && !isPrimary && getFocusBoxShadow({ + theme, + inset: focusInset, + spacerHue: focusColor, + hue: 'transparent' + }); + return Ne(["position:relative;transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,margin-", " 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;border:", " ", ";", "{border-color:", ";box-shadow:", ";}&:hover,&:active,", "{z-index:1;}&:disabled{z-index:-1;background-color:", ";}&:not(:first-of-type){margin-", ":", ";}&:not(:first-of-type):disabled{margin-", ":", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], startPosition, borders.sm, borderColor, SELECTOR_FOCUS_VISIBLE, focusColor, focusBoxShadow, SELECTOR_FOCUS_VISIBLE, disabledBackgroundColor, startPosition, marginDisplacement, startPosition, marginOffset, endPosition, endPosition, startPosition, startPosition, StyledIcon$1, endPosition, iconMarginDisplacement, StyledIcon$1, startPosition, iconMarginDisplacement); +}; +const iconStyles$1 = props => { + const size = props.size === 'small' ? props.theme.iconSizes.sm : props.theme.iconSizes.md; + return Ne(["width:", ";min-width:", ";height:", ";vertical-align:", ";"], size, size, size, props.isLink && 'middle'); +}; +const sizeStyles$i = props => { + let retVal; + if (props.isLink) { + retVal = Ne(["padding:0;font-size:inherit;"]); + } else { + const height = getHeight$1(props); + const lineHeight = math(`${height} - (${props.theme.borderWidths.sm} * 2)`); + let padding; + let fontSize; + if (props.size === 'small') { + fontSize = props.theme.fontSizes.sm; + padding = `${props.theme.space.base * 3}px`; + } else { + fontSize = props.theme.fontSizes.md; + if (props.size === 'large') { + padding = `${props.theme.space.base * 5}px`; + } else { + padding = `${props.theme.space.base * 4}px`; + } + } + retVal = Ne(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], em$1(math(`${padding} - ${props.theme.borderWidths.sm}`), fontSize), height, lineHeight, fontSize); } + return retVal; +}; +const StyledButton = styled.button.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$3$5, + 'data-garden-version': '8.69.9', + type: props.type || 'button' +})).withConfig({ + displayName: "StyledButton", + componentId: "sc-qe3ace-0" +})(["display:", ";align-items:", ";justify-content:", ";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,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles$i(props), SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles$f(props), props => props.isLink && 'none', StyledIcon$1, props => iconStyles$1(props), StyledButtonGroup, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3$5, props)); +StyledButton.defaultProps = { + theme: DEFAULT_THEME +}; - function shouldInvoke(time) { - var timeSinceLastCall = time - lastCallTime, - timeSinceLastInvoke = time - lastInvokeTime; +const COMPONENT_ID$2$7 = 'buttons.anchor'; +const StyledAnchor = styled(StyledButton).attrs(props => ({ + 'data-garden-id': COMPONENT_ID$2$7, + 'data-garden-version': '8.69.9', + as: 'a', + dir: props.theme.rtl ? 'rtl' : undefined, + isLink: true, + type: undefined +})).withConfig({ + displayName: "StyledAnchor", + componentId: "sc-xshgmo-0" +})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$2$7, props)); +StyledAnchor.defaultProps = { + theme: DEFAULT_THEME +}; - // 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)); - } +var _path$1$4; +function _extends$1$5() { _extends$1$5 = 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$5.apply(this, arguments); } +var SvgNewWindowStroke = function SvgNewWindowStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$1$5({ + xmlns: "http://www.w3.org/2000/svg", + width: 12, + height: 12, + focusable: "false", + viewBox: "0 0 12 12", + "aria-hidden": "true" + }, props), _path$1$4 || (_path$1$4 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + d: "M10.5 8.5V10c0 .3-.2.5-.5.5H2c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5h1.5M6 6l4-4m-3.5-.5H10c.3 0 .5.2.5.5v3.5" + }))); +}; - function timerExpired() { - var time = now(); - if (shouldInvoke(time)) { - return trailingEdge(time); - } - // Restart the timer. - timerId = setTimeout(timerExpired, remainingWait(time)); - } +const COMPONENT_ID$1$7 = 'buttons.external_icon'; +const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({ + 'data-garden-id': COMPONENT_ID$1$7, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledExternalIcon", + componentId: "sc-16oz07e-0" +})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', props => retrieveComponentStyles(COMPONENT_ID$1$7, props)); +StyledExternalIcon.defaultProps = { + theme: DEFAULT_THEME +}; - 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; - } +const COMPONENT_ID$N = 'buttons.icon_button'; +const iconColorStyles = props => { + const shade = 600; + const baseColor = getColor('neutralHue', shade, props.theme); + const hoverColor = getColor('neutralHue', shade + 100, props.theme); + const activeColor = getColor('neutralHue', shade + 200, props.theme); + return Ne(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor); +}; +const iconButtonStyles = props => { + const width = getHeight$1(props); + return Ne(["border:", ";padding:0;width:", ";min-width:", ";", ";&:disabled{background-color:", ";}"], props.isBasic && 'none', width, width, props.isBasic && !(props.isPrimary || props.isDanger || props.disabled) && iconColorStyles(props), !props.isPrimary && 'transparent'); +}; +const iconStyles = props => { + const size = props.theme.iconSizes.md; + return Ne(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size); +}; +const StyledIconButton = styled(StyledButton).attrs({ + 'data-garden-id': COMPONENT_ID$N, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledIconButton", + componentId: "sc-1t0ughp-0" +})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon$1, props => iconStyles(props), props => retrieveComponentStyles(COMPONENT_ID$N, props)); +StyledIconButton.defaultProps = { + theme: DEFAULT_THEME +}; - function cancel() { - if (timerId !== undefined) { - clearTimeout(timerId); - } - lastInvokeTime = 0; - lastArgs = lastCallTime = lastThis = timerId = undefined; - } +const ButtonGroupContext = reactExports.createContext(undefined); +const useButtonGroupContext = () => { + return reactExports.useContext(ButtonGroupContext); +}; - function flush() { - return timerId === undefined ? result : trailingEdge(now()); - } +const SplitButtonContext = reactExports.createContext(undefined); +const useSplitButtonContext = () => { + return reactExports.useContext(SplitButtonContext); +}; - function debounced() { - var time = now(), - isInvoking = shouldInvoke(time); +const StartIconComponent$1 = props => React.createElement(StyledIcon$1, _extends$2$4({ + position: "start" +}, props)); +StartIconComponent$1.displayName = 'Button.StartIcon'; +const StartIcon$1 = StartIconComponent$1; - lastArgs = arguments; - lastThis = this; - lastCallTime = time; +const EndIconComponent$1 = props => React.createElement(StyledIcon$1, _extends$2$4({ + position: "end" +}, props)); +EndIconComponent$1.displayName = 'Button.EndIcon'; +const EndIcon$1 = EndIconComponent$1; - 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); +const ButtonComponent = reactExports.forwardRef((props, ref) => { + const buttonGroupContext = useButtonGroupContext(); + const splitButtonContext = useSplitButtonContext(); + let computedRef = ref; + let computedProps = { + ...props, + focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext + }; + if (buttonGroupContext && !props.disabled) { + if (!props.value) { + throw new Error('"value" prop must be provided to Button when used within a ButtonGroup'); } - return result; + computedProps = buttonGroupContext.getButtonProps({ + isSelected: props.value === buttonGroupContext.selectedItem, + ...computedProps + }); + computedRef = mergeRefs([ + computedProps.ref, ref]); } - debounced.cancel = cancel; - debounced.flush = flush; - return debounced; -} + return React.createElement(StyledButton, _extends$2$4({}, computedProps, { + ref: computedRef + })); +}); +ButtonComponent.displayName = 'Button'; +ButtonComponent.propTypes = { + isNeutral: PropTypes.bool, + isPrimary: PropTypes.bool, + isDanger: PropTypes.bool, + isPill: PropTypes.bool, + isBasic: PropTypes.bool, + focusInset: PropTypes.bool, + isLink: PropTypes.bool, + isStretched: PropTypes.bool, + isSelected: PropTypes.bool, + size: PropTypes.oneOf(SIZE$3) +}; +ButtonComponent.defaultProps = { + size: 'medium' +}; +const Button = ButtonComponent; +Button.EndIcon = EndIcon$1; +Button.StartIcon = StartIcon$1; -/** - * 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'); -} +const Anchor = reactExports.forwardRef((_ref, ref) => { + let { + children, + isExternal, + externalIconLabel, + ...otherProps + } = _ref; + let anchorProps = otherProps; + if (isExternal) { + anchorProps = { + target: '_blank', + rel: 'noopener noreferrer', + ...anchorProps + }; + } + const checkProps = isExternal ? { + externalIconLabel + } : { + noIconLabel: 'true' + }; + const iconAriaLabel = useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)'); + return React.createElement(StyledAnchor, _extends$2$4({ + ref: ref + }, anchorProps), children, isExternal && + React.createElement(StyledExternalIcon, { + role: "img", + "aria-label": iconAriaLabel, + "aria-hidden": undefined + })); +}); +Anchor.displayName = 'Anchor'; +Anchor.propTypes = { + isExternal: PropTypes.bool, + isDanger: PropTypes.bool, + externalIconLabel: PropTypes.string +}; -/** - * 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'; -} +const ButtonGroup = reactExports.forwardRef((_ref, ref) => { + let { + children, + onSelect, + selectedItem: controlledSelectedValue, + ...otherProps + } = _ref; + const { + rtl + } = reactExports.useContext(Be) || DEFAULT_THEME; + const [internalSelectedValue, setInternalSelectedValue] = reactExports.useState(); + const selectedValue = getControlledValue$1(controlledSelectedValue, internalSelectedValue); + const values = reactExports.useMemo(() => reactExports.Children.toArray(children).reduce((buttons, child) => { + if ( reactExports.isValidElement(child) && child.type !== 'string' && !child.props.disabled) { + buttons.push(child.props.value); + } + return buttons; + }, []), [children]); + const { + selectedValue: selectedItem, + getElementProps, + getGroupProps + } = useSelection({ + rtl, + values, + defaultSelectedValue: values[0], + selectedValue, + onSelect: reactExports.useCallback(value => { + onSelect && onSelect(value); + setInternalSelectedValue(value); + }, [onSelect]) + }); + const contextValue = reactExports.useMemo(() => ({ + selectedItem, + getButtonProps: props => getElementProps({ + role: 'button', + selectedAriaKey: 'aria-pressed', + ...props + }) + }), [selectedItem, getElementProps]); + return React.createElement(ButtonGroupContext.Provider, { + value: contextValue + }, React.createElement(StyledButtonGroup, _extends$2$4({ + ref: ref + }, getGroupProps(otherProps)), children)); +}); +ButtonGroup.displayName = 'ButtonGroup'; +ButtonGroup.propTypes = { + selectedItem: PropTypes.any, + onSelect: PropTypes.func +}; -/** - * 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 +const IconButton = reactExports.forwardRef((_ref, ref) => { + let { + children, + isRotated, + ...otherProps + } = _ref; + const focusInset = useSplitButtonContext(); + return React.createElement(StyledIconButton, _extends$2$4({ + ref: ref + }, otherProps, { + focusInset: otherProps.focusInset || focusInset + }), React.createElement(StyledIcon$1, { + isRotated: isRotated + }, children)); +}); +IconButton.displayName = 'IconButton'; +IconButton.propTypes = { + isDanger: PropTypes.bool, + size: PropTypes.oneOf(SIZE$3), + isNeutral: PropTypes.bool, + isPrimary: PropTypes.bool, + isBasic: PropTypes.bool, + isPill: PropTypes.bool, + focusInset: PropTypes.bool, + isRotated: PropTypes.bool +}; +IconButton.defaultProps = { + isPill: true, + isBasic: true, + size: 'medium' +}; + +var _path$q; +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); } +var SvgChevronDownStroke$2 = function SvgChevronDownStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$w({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$q || (_path$q = /*#__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 ChevronButton = reactExports.forwardRef((_ref, ref) => { + let { + ...buttonProps + } = _ref; + return React.createElement(IconButton, _extends$2$4({ + ref: ref + }, buttonProps), React.createElement(SvgChevronDownStroke$2, null)); +}); +ChevronButton.displayName = 'ChevronButton'; +ChevronButton.propTypes = IconButton.propTypes; +ChevronButton.defaultProps = { + isBasic: false, + isPill: false, + size: 'medium' +}; + +const SplitButton = reactExports.forwardRef((_ref, ref) => { + let { + children, + ...other + } = _ref; + return React.createElement(SplitButtonContext.Provider, { + value: true + }, React.createElement(StyledButtonGroup, _extends$2$4({ + ref: ref + }, other), children)); +}); +SplitButton.displayName = 'SplitButton'; + +const ToggleButton = reactExports.forwardRef((_ref, ref) => { + let { + isPressed, + ...otherProps + } = _ref; + return React.createElement(Button, _extends$2$4({ + "aria-pressed": isPressed, + ref: ref + }, otherProps)); +}); +ToggleButton.displayName = 'ToggleButton'; +ToggleButton.propTypes = { + ...Button.propTypes, + isPressed: PropTypes.oneOf([true, false, 'mixed']) +}; +ToggleButton.defaultProps = { + size: 'medium' +}; + +const ToggleIconButton = reactExports.forwardRef((_ref, ref) => { + let { + isPressed, + ...otherProps + } = _ref; + return React.createElement(IconButton, _extends$2$4({ + "aria-pressed": isPressed, + ref: ref + }, otherProps)); +}); +ToggleIconButton.displayName = 'ToggleIconButton'; +ToggleIconButton.propTypes = { + ...IconButton.propTypes, + isPressed: PropTypes.oneOf([true, false, 'mixed']) +}; +ToggleIconButton.defaultProps = { + isPill: true, + isBasic: true, + size: 'medium' +}; + +function _objectWithoutPropertiesLoose$1(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + return target; +} + +/** + * Checks if a given element has a CSS class. + * + * @param element the element + * @param className the CSS class name */ -function isSymbol(value) { - return typeof value == 'symbol' || - (isObjectLike(value) && objectToString.call(value) == symbolTag); +function hasClass(element, className) { + if (element.classList) return !!className && element.classList.contains(className); + return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1; } /** - * 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 + * Adds a CSS class to a given element. + * + * @param element the element + * @param className the CSS class name */ -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; + +function addClass(element, className) { + if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + " " + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + " " + className); +} + +function replaceClassName(origClass, classToRemove) { + return origClass.replace(new RegExp("(^|\\s)" + classToRemove + "(?:\\s|$)", 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, ''); +} +/** + * Removes a CSS class from a given element. + * + * @param element the element + * @param className the CSS class name + */ + + +function removeClass$1(element, className) { + if (element.classList) { + element.classList.remove(className); + } else if (typeof element.className === 'string') { + element.className = replaceClassName(element.className, className); + } else { + element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className)); } - 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 config = { + disabled: false +}; -var debounce$3 = /*@__PURE__*/getDefaultExportFromCjs(lodash_debounce); +var TransitionGroupContext = React.createContext(null); + +var forceReflow = function forceReflow(node) { + return node.scrollTop; +}; +var UNMOUNTED = 'unmounted'; +var EXITED = 'exited'; +var ENTERING = 'entering'; +var ENTERED = 'entered'; +var EXITING = 'exiting'; /** - * Copyright Zendesk, Inc. + * The Transition component lets you describe a transition from one component + * state to another _over time_ with a simple declarative API. Most commonly + * it's used to animate the mounting and unmounting of a component, but can also + * be used to describe in-place transition states as well. * - * Use of this source code is governed under the Apache License, Version 2.0 - * found at http://www.apache.org/licenses/LICENSE-2.0. + * --- + * + * **Note**: `Transition` is a platform-agnostic base component. If you're using + * transitions in CSS, you'll probably want to use + * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition) + * instead. It inherits all the features of `Transition`, but contains + * additional features necessary to play nice with CSS transitions (hence the + * name of the component). + * + * --- + * + * By default the `Transition` component does not alter the behavior of the + * component it renders, it only tracks "enter" and "exit" states for the + * components. It's up to you to give meaning and effect to those states. For + * example we can add styles to a component when it enters or exits: + * + * ```jsx + * import { Transition } from 'react-transition-group'; + * + * const duration = 300; + * + * const defaultStyle = { + * transition: `opacity ${duration}ms ease-in-out`, + * opacity: 0, + * } + * + * const transitionStyles = { + * entering: { opacity: 1 }, + * entered: { opacity: 1 }, + * exiting: { opacity: 0 }, + * exited: { opacity: 0 }, + * }; + * + * const Fade = ({ in: inProp }) => ( + * + * {state => ( + *
+ * I'm a fade Transition! + *
+ * )} + * + * ); + * ``` + * + * There are 4 main states a Transition can be in: + * - `'entering'` + * - `'entered'` + * - `'exiting'` + * - `'exited'` + * + * Transition state is toggled via the `in` prop. When `true` the component + * begins the "Enter" stage. During this stage, the component will shift from + * its current transition state, to `'entering'` for the duration of the + * transition and then to the `'entered'` stage once it's complete. Let's take + * the following example (we'll use the + * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook): + * + * ```jsx + * function App() { + * const [inProp, setInProp] = useState(false); + * return ( + *
+ * + * {state => ( + * // ... + * )} + * + * + *
+ * ); + * } + * ``` + * + * When the button is clicked the component will shift to the `'entering'` state + * and stay there for 500ms (the value of `timeout`) before it finally switches + * to `'entered'`. + * + * When `in` is `false` the same thing happens except the state moves from + * `'exiting'` to `'exited'`. */ -function composeEventHandlers$3() { - for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) { - fns[_key] = arguments[_key]; +var Transition = /*#__PURE__*/function (_React$Component) { + _inheritsLoose(Transition, _React$Component); + + function Transition(props, context) { + var _this; + + _this = _React$Component.call(this, props, context) || this; + var parentGroup = context; // In the context of a TransitionGroup all enters are really appears + + var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear; + var initialStatus; + _this.appearStatus = null; + + if (props.in) { + if (appear) { + initialStatus = EXITED; + _this.appearStatus = ENTERING; + } else { + initialStatus = ENTERED; + } + } else { + if (props.unmountOnExit || props.mountOnEnter) { + initialStatus = UNMOUNTED; + } else { + initialStatus = EXITED; + } + } + + _this.state = { + status: initialStatus + }; + _this.nextCallback = null; + return _this; } - 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]; + + Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) { + var nextIn = _ref.in; + + if (nextIn && prevState.status === UNMOUNTED) { + return { + status: EXITED + }; } - return fns.some(fn => { - fn && fn(event, ...args); - return event && event.defaultPrevented; - }); + + return null; + } // getSnapshotBeforeUpdate(prevProps) { + // let nextStatus = null + // if (prevProps !== this.props) { + // const { status } = this.state + // if (this.props.in) { + // if (status !== ENTERING && status !== ENTERED) { + // nextStatus = ENTERING + // } + // } else { + // if (status === ENTERING || status === ENTERED) { + // nextStatus = EXITING + // } + // } + // } + // return { nextStatus } + // } + ; + + var _proto = Transition.prototype; + + _proto.componentDidMount = function componentDidMount() { + this.updateStatus(true, this.appearStatus); }; -} -const KEYS$3 = { - 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$3; -(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$3 || (DocumentPosition$3 = {})); -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; + _proto.componentDidUpdate = function componentDidUpdate(prevProps) { + var nextStatus = null; + + if (prevProps !== this.props) { + var status = this.state.status; + + if (this.props.in) { + if (status !== ENTERING && status !== ENTERED) { + nextStatus = ENTERING; + } + } else { + if (status === ENTERING || status === ENTERED) { + nextStatus = EXITING; + } + } } - if (initMaxValue === void 0) { - initMaxValue = max; + + this.updateStatus(false, nextStatus); + }; + + _proto.componentWillUnmount = function componentWillUnmount() { + this.cancelNextCallback(); + }; + + _proto.getTimeouts = function getTimeouts() { + var timeout = this.props.timeout; + var exit, enter, appear; + exit = enter = appear = timeout; + + if (timeout != null && typeof timeout !== 'number') { + exit = timeout.exit; + enter = timeout.enter; // TODO: remove fallback for next major + + appear = timeout.appear !== undefined ? timeout.appear : enter; } - const retVal = { - minValue: initMinValue < min ? min : initMinValue, - maxValue: initMaxValue > max ? max : initMaxValue + + return { + exit: exit, + enter: enter, + appear: appear }; - 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; + + _proto.updateStatus = function updateStatus(mounting, nextStatus) { + if (mounting === void 0) { + mounting = false; } - 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 (nextStatus !== null) { + // nextStatus will always be ENTERING or EXITING. + this.cancelNextCallback(); + + if (nextStatus === ENTERING) { + if (this.props.unmountOnExit || this.props.mountOnEnter) { + var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749 + // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`. + // To make the animation happen, we have to separate each rendering and avoid being processed as batched. + + if (node) forceReflow(node); } + + this.performEnter(mounting); + } else { + this.performExit(); } - if (!isNaN(newMinValue) && !isNaN(newMaxValue)) { - setPosition({ - minValue: newMinValue, - maxValue: newMaxValue + } else if (this.props.unmountOnExit && this.state.status === EXITED) { + this.setState({ + status: UNMOUNTED + }); + } + }; + + _proto.performEnter = function performEnter(mounting) { + var _this2 = this; + + var enter = this.props.enter; + var appearing = this.context ? this.context.isMounting : mounting; + + var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing], + maybeNode = _ref2[0], + maybeAppearing = _ref2[1]; + + var timeouts = this.getTimeouts(); + var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED + // if we are mounting and running this it means appear _must_ be set + + if (!mounting && !enter || config.disabled) { + this.safeSetState({ + status: ENTERED + }, function () { + _this2.props.onEntered(maybeNode); + }); + return; + } + + this.props.onEnter(maybeNode, maybeAppearing); + this.safeSetState({ + status: ENTERING + }, function () { + _this2.props.onEntering(maybeNode, maybeAppearing); + + _this2.onTransitionEnd(enterTimeout, function () { + _this2.safeSetState({ + status: ENTERED + }, function () { + _this2.props.onEntered(maybeNode, maybeAppearing); + }); + }); + }); + }; + + _proto.performExit = function performExit() { + var _this3 = this; + + var exit = this.props.exit; + var timeouts = this.getTimeouts(); + var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED + + if (!exit || config.disabled) { + this.safeSetState({ + status: EXITED + }, function () { + _this3.props.onExited(maybeNode); + }); + return; + } + + this.props.onExit(maybeNode); + this.safeSetState({ + status: EXITING + }, function () { + _this3.props.onExiting(maybeNode); + + _this3.onTransitionEnd(timeouts.exit, function () { + _this3.safeSetState({ + status: EXITED + }, function () { + _this3.props.onExited(maybeNode); }); + }); + }); + }; + + _proto.cancelNextCallback = function cancelNextCallback() { + if (this.nextCallback !== null) { + this.nextCallback.cancel(); + this.nextCallback = null; + } + }; + + _proto.safeSetState = function safeSetState(nextState, callback) { + // This shouldn't be necessary, but there are weird race conditions with + // setState callbacks and unmounting in testing, so always make sure that + // we can cancel any pending setState callbacks after we unmount. + callback = this.setNextCallback(callback); + this.setState(nextState, callback); + }; + + _proto.setNextCallback = function setNextCallback(callback) { + var _this4 = this; + + var active = true; + + this.nextCallback = function (event) { + if (active) { + active = false; + _this4.nextCallback = null; + callback(event); } + }; + + this.nextCallback.cancel = function () { + active = false; + }; + + return this.nextCallback; + }; + + _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) { + this.setNextCallback(handler); + var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); + var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener; + + if (!node || doesNotHaveTimeoutOrListener) { + setTimeout(this.nextCallback, 0); + return; } - }, [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); - } - } + + if (this.props.addEndListener) { + var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback], + maybeNode = _ref3[0], + maybeNextCallback = _ref3[1]; + + this.props.addEndListener(maybeNode, maybeNextCallback); + } + + if (timeout != null) { + setTimeout(this.nextCallback, timeout); + } + }; + + _proto.render = function render() { + var status = this.state.status; + + if (status === UNMOUNTED) { + return null; + } + + var _this$props = this.props, + children = _this$props.children; + _this$props.in; + _this$props.mountOnEnter; + _this$props.unmountOnExit; + _this$props.appear; + _this$props.enter; + _this$props.exit; + _this$props.timeout; + _this$props.addEndListener; + _this$props.onEnter; + _this$props.onEntering; + _this$props.onEntered; + _this$props.onExit; + _this$props.onExiting; + _this$props.onExited; + _this$props.nodeRef; + var childProps = _objectWithoutPropertiesLoose$1(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]); + + return ( + /*#__PURE__*/ + // allows for nested Transitions + React.createElement(TransitionGroupContext.Provider, { + value: null + }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps)) + ); + }; + + return Transition; +}(React.Component); + +Transition.contextType = TransitionGroupContext; +Transition.propTypes = {}; // Name the function so it is clearer in the documentation + +function noop$2() {} + +Transition.defaultProps = { + in: false, + mountOnEnter: false, + unmountOnExit: false, + appear: false, + enter: true, + exit: true, + onEnter: noop$2, + onEntering: noop$2, + onEntered: noop$2, + onExit: noop$2, + onExiting: noop$2, + onExited: noop$2 +}; +Transition.UNMOUNTED = UNMOUNTED; +Transition.EXITED = EXITED; +Transition.ENTERING = ENTERING; +Transition.ENTERED = ENTERED; +Transition.EXITING = EXITING; +var Transition$1 = Transition; + +var _addClass = function addClass$1(node, classes) { + return node && classes && classes.split(' ').forEach(function (c) { + return addClass(node, c); + }); +}; + +var removeClass = function removeClass(node, classes) { + return node && classes && classes.split(' ').forEach(function (c) { + return removeClass$1(node, c); + }); +}; +/** + * A transition component inspired by the excellent + * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should + * use it if you're using CSS transitions or animations. It's built upon the + * [`Transition`](https://reactcommunity.org/react-transition-group/transition) + * component, so it inherits all of its props. + * + * `CSSTransition` applies a pair of class names during the `appear`, `enter`, + * and `exit` states of the transition. The first class is applied and then a + * second `*-active` class in order to activate the CSS transition. After the + * transition, matching `*-done` class names are applied to persist the + * transition state. + * + * ```jsx + * function App() { + * const [inProp, setInProp] = useState(false); + * return ( + *
+ * + *
+ * {"I'll receive my-node-* classes"} + *
+ * + * + *
+ * ); + * } + * ``` + * + * When the `in` prop is set to `true`, the child component will first receive + * the class `example-enter`, then the `example-enter-active` will be added in + * the next tick. `CSSTransition` [forces a + * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215) + * between before adding the `example-enter-active`. This is an important trick + * because it allows us to transition between `example-enter` and + * `example-enter-active` even though they were added immediately one after + * another. Most notably, this is what makes it possible for us to animate + * _appearance_. + * + * ```css + * .my-node-enter { + * opacity: 0; + * } + * .my-node-enter-active { + * opacity: 1; + * transition: opacity 200ms; + * } + * .my-node-exit { + * opacity: 1; + * } + * .my-node-exit-active { + * opacity: 0; + * transition: opacity 200ms; + * } + * ``` + * + * `*-active` classes represent which styles you want to animate **to**, so it's + * important to add `transition` declaration only to them, otherwise transitions + * might not behave as intended! This might not be obvious when the transitions + * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in + * the example above (minus `transition`), but it becomes apparent in more + * complex transitions. + * + * **Note**: If you're using the + * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear) + * prop, make sure to define styles for `.appear-*` classes as well. + */ + + +var CSSTransition = /*#__PURE__*/function (_React$Component) { + _inheritsLoose(CSSTransition, _React$Component); + + function CSSTransition() { + var _this; + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; + _this.appliedClasses = { + appear: {}, + enter: {}, + exit: {} + }; + + _this.onEnter = function (maybeNode, maybeAppearing) { + var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing), + node = _this$resolveArgument[0], + appearing = _this$resolveArgument[1]; + + _this.removeClasses(node, 'exit'); + + _this.addClass(node, appearing ? 'appear' : 'enter', 'base'); + + if (_this.props.onEnter) { + _this.props.onEnter(maybeNode, maybeAppearing); } }; - return { - 'data-garden-container-id': 'containers.slider.track', - 'data-garden-container-version': '0.1.6', - 'aria-disabled': disabled, - onMouseDown: composeEventHandlers$3(onMouseDown, handleMouseDown), - ...other + + _this.onEntering = function (maybeNode, maybeAppearing) { + var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing), + node = _this$resolveArgument2[0], + appearing = _this$resolveArgument2[1]; + + var type = appearing ? 'appear' : 'enter'; + + _this.addClass(node, type, 'active'); + + if (_this.props.onEntering) { + _this.props.onEntering(maybeNode, maybeAppearing); + } }; - }, [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$3.RIGHT: - value = (thumb === 'min' ? position.minValue : position.maxValue) + (rtl ? -step : step); - break; - case KEYS$3.UP: - value = (thumb === 'min' ? position.minValue : position.maxValue) + step; - break; - case KEYS$3.LEFT: - value = (thumb === 'min' ? position.minValue : position.maxValue) - (rtl ? -step : step); - break; - case KEYS$3.DOWN: - value = (thumb === 'min' ? position.minValue : position.maxValue) - step; - break; - case KEYS$3.PAGE_UP: - value = (thumb === 'min' ? position.minValue : position.maxValue) + jump; - break; - case KEYS$3.PAGE_DOWN: - value = (thumb === 'min' ? position.minValue : position.maxValue) - jump; - break; - case KEYS$3.HOME: - value = min; - break; - case KEYS$3.END: - value = max; - break; - } - if (value !== undefined) { - event.preventDefault(); - event.stopPropagation(); - setThumbPosition(thumb)(value); - } + + _this.onEntered = function (maybeNode, maybeAppearing) { + var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing), + node = _this$resolveArgument3[0], + appearing = _this$resolveArgument3[1]; + + var type = appearing ? 'appear' : 'enter'; + + _this.removeClasses(node, type); + + _this.addClass(node, type, 'done'); + + if (_this.props.onEntered) { + _this.props.onEntered(maybeNode, maybeAppearing); } }; - const handleMouseMove = event => { - const value = getTrackPosition(event); - if (value !== undefined) { - setThumbPosition(thumb)(value); + + _this.onExit = function (maybeNode) { + var _this$resolveArgument4 = _this.resolveArguments(maybeNode), + node = _this$resolveArgument4[0]; + + _this.removeClasses(node, 'appear'); + + _this.removeClasses(node, 'enter'); + + _this.addClass(node, 'exit', 'base'); + + if (_this.props.onExit) { + _this.props.onExit(maybeNode); } }; - const handleTouchMove = event => { - const value = getTrackPosition(event.targetTouches[0]); - if (value !== undefined) { - setThumbPosition(thumb)(value); + + _this.onExiting = function (maybeNode) { + var _this$resolveArgument5 = _this.resolveArguments(maybeNode), + node = _this$resolveArgument5[0]; + + _this.addClass(node, 'exit', 'active'); + + if (_this.props.onExiting) { + _this.props.onExiting(maybeNode); } }; - 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(); + + _this.onExited = function (maybeNode) { + var _this$resolveArgument6 = _this.resolveArguments(maybeNode), + node = _this$resolveArgument6[0]; + + _this.removeClasses(node, 'exit'); + + _this.addClass(node, 'exit', 'done'); + + if (_this.props.onExited) { + _this.props.onExited(maybeNode); } }; - const handleTouchStart = event => { - if (!disabled) { - event.stopPropagation(); - doc.addEventListener('touchmove', handleTouchMove); - doc.addEventListener('touchend', handleTouchEnd); - event.target && event.target.focus(); - } + + _this.resolveArguments = function (maybeNode, maybeAppearing) { + return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing` + : [maybeNode, maybeAppearing]; }; - 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$3(onKeyDown, handleKeyDown), - onMouseDown: composeEventHandlers$3(onMouseDown, handleMouseDown), - onTouchStart: composeEventHandlers$3(onTouchStart, handleTouchStart), - ...other + + _this.getClassNames = function (type) { + var classNames = _this.props.classNames; + var isStringClassNames = typeof classNames === 'string'; + var prefix = isStringClassNames && classNames ? classNames + "-" : ''; + var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type]; + var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"]; + var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"]; + return { + baseClassName: baseClassName, + activeClassName: activeClassName, + doneClassName: doneClassName + }; }; - }, [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 -}); + + return _this; + } + + var _proto = CSSTransition.prototype; + + _proto.addClass = function addClass(node, type, phase) { + var className = this.getClassNames(type)[phase + "ClassName"]; + + var _this$getClassNames = this.getClassNames('enter'), + doneClassName = _this$getClassNames.doneClassName; + + if (type === 'appear' && phase === 'done' && doneClassName) { + className += " " + doneClassName; + } // This is to force a repaint, + // which is necessary in order to transition styles when adding a class name. + + + if (phase === 'active') { + if (node) forceReflow(node); + } + + if (className) { + this.appliedClasses[type][phase] = className; + + _addClass(node, className); + } + }; + + _proto.removeClasses = function removeClasses(node, type) { + var _this$appliedClasses$ = this.appliedClasses[type], + baseClassName = _this$appliedClasses$.base, + activeClassName = _this$appliedClasses$.active, + doneClassName = _this$appliedClasses$.done; + this.appliedClasses[type] = {}; + + if (baseClassName) { + removeClass(node, baseClassName); + } + + if (activeClassName) { + removeClass(node, activeClassName); + } + + if (doneClassName) { + removeClass(node, doneClassName); + } + }; + + _proto.render = function render() { + var _this$props = this.props; + _this$props.classNames; + var props = _objectWithoutPropertiesLoose$1(_this$props, ["classNames"]); + + return /*#__PURE__*/React.createElement(Transition$1, _extends$y({}, props, { + onEnter: this.onEnter, + onEntered: this.onEntered, + onEntering: this.onEntering, + onExit: this.onExit, + onExiting: this.onExiting, + onExited: this.onExited + })); + }; + + return CSSTransition; +}(React.Component); + +CSSTransition.defaultProps = { + classNames: '' +}; +CSSTransition.propTypes = {}; +var CSSTransition$1 = CSSTransition; /** - * Copyright Zendesk, Inc. + * Given `this.props.children`, return an object mapping key to child. * - * Use of this source code is governed under the Apache License, Version 2.0 - * found at http://www.apache.org/licenses/LICENSE-2.0. + * @param {*} children `this.props.children` + * @return {object} Mapping of key to child */ -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]; - } +function getChildMapping(children, mapFn) { + var mapper = function mapper(child) { + return mapFn && reactExports.isValidElement(child) ? mapFn(child) : child; + }; + + var result = Object.create(null); + if (children) reactExports.Children.map(children, function (c) { + return c; + }).forEach(function (child) { + // run the map function here instead so that the key is the computed one + result[child.key] = mapper(child); + }); + return result; +} +/** + * When you're adding or removing children some may be added or removed in the + * same render pass. We want to show *both* since we want to simultaneously + * animate elements in and out. This function takes a previous set of keys + * and a new set of keys and merges them with its best guess of the correct + * ordering. In the future we may expose some of the utilities in + * ReactMultiChild to make this easy, but for now React itself does not + * directly have this concept of the union of prevChildren and nextChildren + * so we implement it here. + * + * @param {object} prev prev children as returned from + * `ReactTransitionChildMapping.getChildMapping()`. + * @param {object} next next children as returned from + * `ReactTransitionChildMapping.getChildMapping()`. + * @return {object} a key set that contains all keys in `prev` and all keys + * in `next` in a reasonable order. + */ + +function mergeChildMappings(prev, next) { + prev = prev || {}; + next = next || {}; + + function getValueForKey(key) { + return key in next ? next[key] : prev[key]; + } // For each key of `next`, the list of keys to insert before that key in + // the combined list + + + var nextKeysPending = Object.create(null); + var pendingKeys = []; + + for (var prevKey in prev) { + if (prevKey in next) { + if (pendingKeys.length) { + nextKeysPending[prevKey] = pendingKeys; + pendingKeys = []; } + } else { + pendingKeys.push(prevKey); } - return target; - }; - return _extends$t.apply(this, arguments); + } + + var i; + var childMapping = {}; + + for (var nextKey in next) { + if (nextKeysPending[nextKey]) { + for (i = 0; i < nextKeysPending[nextKey].length; i++) { + var pendingNextKey = nextKeysPending[nextKey][i]; + childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey); + } + } + + childMapping[nextKey] = getValueForKey(nextKey); + } // Finally, add the keys which didn't appear before any key in `next` + + + for (i = 0; i < pendingKeys.length; i++) { + childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]); + } + + return childMapping; } -const FieldContext$1 = reactExports.createContext(undefined); -const useFieldContext$1 = () => { - const fieldContext = reactExports.useContext(FieldContext$1); - return fieldContext; -}; +function getProp(child, prop, props) { + return props[prop] != null ? props[prop] : child.props[prop]; +} -const COMPONENT_ID$K = 'forms.field'; -const StyledField$1 = styled.div.attrs({ - 'data-garden-id': COMPONENT_ID$K, - 'data-garden-version': '8.69.9' -}).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 -}; +function getInitialChildMapping(props, onExited) { + return getChildMapping(props.children, function (child) { + return reactExports.cloneElement(child, { + onExited: onExited.bind(null, child), + in: true, + appear: getProp(child, 'appear', props), + enter: getProp(child, 'enter', props), + exit: getProp(child, 'exit', props) + }); + }); +} +function getNextChildMapping(nextProps, prevChildMapping, onExited) { + var nextChildMapping = getChildMapping(nextProps.children); + var children = mergeChildMappings(prevChildMapping, nextChildMapping); + Object.keys(children).forEach(function (key) { + var child = children[key]; + if (!reactExports.isValidElement(child)) return; + var hasPrev = (key in prevChildMapping); + var hasNext = (key in nextChildMapping); + var prevChild = prevChildMapping[key]; + var isLeaving = reactExports.isValidElement(prevChild) && !prevChild.props.in; // item is new (entering) + + if (hasNext && (!hasPrev || isLeaving)) { + // console.log('entering', key) + children[key] = reactExports.cloneElement(child, { + onExited: onExited.bind(null, child), + in: true, + exit: getProp(child, 'exit', nextProps), + enter: getProp(child, 'enter', nextProps) + }); + } else if (!hasNext && hasPrev && !isLeaving) { + // item is old (exiting) + // console.log('leaving', key) + children[key] = reactExports.cloneElement(child, { + in: false + }); + } else if (hasNext && hasPrev && reactExports.isValidElement(prevChild)) { + // item hasn't changed transition states + // copy over the last transition props; + // console.log('unchanged', key) + children[key] = reactExports.cloneElement(child, { + onExited: onExited.bind(null, child), + in: prevChild.props.in, + exit: getProp(child, 'exit', nextProps), + enter: getProp(child, 'enter', nextProps) + }); + } + }); + return children; +} -const COMPONENT_ID$J = 'forms.fieldset'; -const StyledFieldset = styled(StyledField$1).attrs({ - as: 'fieldset', - 'data-garden-id': COMPONENT_ID$J, - 'data-garden-version': '8.69.9' -}).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 +var values = Object.values || function (obj) { + return Object.keys(obj).map(function (k) { + return obj[k]; + }); }; -const COMPONENT_ID$I = 'forms.input_label'; -const StyledLabel$1 = styled.label.attrs(props => ({ - 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$I, - 'data-garden-version': props['data-garden-version'] || '8.69.9' -})).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 +var defaultProps$2 = { + component: 'div', + childFactory: function childFactory(child) { + return child; + } }; +/** + * The `` component manages a set of transition components + * (`` and ``) in a list. Like with the transition + * components, `` is a state machine for managing the mounting + * and unmounting of components over time. + * + * Consider the example below. As items are removed or added to the TodoList the + * `in` prop is toggled automatically by the ``. + * + * Note that `` does not define any animation behavior! + * Exactly _how_ a list item animates is up to the individual transition + * component. This means you can mix and match animations across different list + * items. + */ -const COMPONENT_ID$H = 'forms.fieldset_legend'; -const StyledLegend = styled(StyledLabel$1).attrs({ - as: 'legend', - 'data-garden-id': COMPONENT_ID$H, - 'data-garden-version': '8.69.9' -}).withConfig({ - displayName: "StyledLegend", - componentId: "sc-6s0zwq-0" -})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$H, props)); -StyledLegend.defaultProps = { - theme: DEFAULT_THEME -}; +var TransitionGroup = /*#__PURE__*/function (_React$Component) { + _inheritsLoose(TransitionGroup, _React$Component); -const COMPONENT_ID$G = 'forms.input_hint'; -const StyledHint$1 = styled.div.attrs(props => ({ - 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$G, - 'data-garden-version': props['data-garden-version'] || '8.69.9' -})).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 + function TransitionGroup(props, context) { + var _this; + + _this = _React$Component.call(this, props, context) || this; + + var handleExited = _this.handleExited.bind(_assertThisInitialized$1(_this)); // Initial children should all be entering, dependent on appear + + + _this.state = { + contextValue: { + isMounting: true + }, + handleExited: handleExited, + firstRender: true + }; + return _this; + } + + var _proto = TransitionGroup.prototype; + + _proto.componentDidMount = function componentDidMount() { + this.mounted = true; + this.setState({ + contextValue: { + isMounting: false + } + }); + }; + + _proto.componentWillUnmount = function componentWillUnmount() { + this.mounted = false; + }; + + TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) { + var prevChildMapping = _ref.children, + handleExited = _ref.handleExited, + firstRender = _ref.firstRender; + return { + children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited), + firstRender: false + }; + } // node is `undefined` when user provided `nodeRef` prop + ; + + _proto.handleExited = function handleExited(child, node) { + var currentChildMapping = getChildMapping(this.props.children); + if (child.key in currentChildMapping) return; + + if (child.props.onExited) { + child.props.onExited(node); + } + + if (this.mounted) { + this.setState(function (state) { + var children = _extends$y({}, state.children); + + delete children[child.key]; + return { + children: children + }; + }); + } + }; + + _proto.render = function render() { + var _this$props = this.props, + Component = _this$props.component, + childFactory = _this$props.childFactory, + props = _objectWithoutPropertiesLoose$1(_this$props, ["component", "childFactory"]); + + var contextValue = this.state.contextValue; + var children = values(this.state.children).map(childFactory); + delete props.appear; + delete props.enter; + delete props.exit; + + if (Component === null) { + return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, { + value: contextValue + }, children); + } + + return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, { + value: contextValue + }, /*#__PURE__*/React.createElement(Component, props, children)); + }; + + return TransitionGroup; +}(React.Component); + +TransitionGroup.propTypes = {}; +TransitionGroup.defaultProps = defaultProps$2; +var TransitionGroup$1 = TransitionGroup; + +/** + * 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; }; +/** + * @name uid + * returns an UID associated with {item} + * @param {Object} item - object to generate UID for + * @param {Number} index, a fallback index + * @example + * uid(object) == 1; + * uid(object) == 1; + * uid(anotherObject) == 2; + * uid("not object", 42) == 42 + * + * @see {@link useUID} + */ +var uid = generateUID$1(); -var _g$2$1, _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$1 = 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$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 || (_circle$5 = /*#__PURE__*/reactExports.createElement("circle", { - cx: 7.5, - cy: 12, - r: 1, - fill: "currentColor" - }))); +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$1 = function (source) { return source.value++; }; +var getPrefix = function (source) { return (source ? source.prefix : ''); }; -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$1 = 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 generateUID = function (context) { + var quartz = context || counter; + var prefix = getPrefix(quartz); + var id = getId$1(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; }; -var _g$1$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$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 - })))); +/** + * 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$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); +} + +const TYPE$1 = ['success', 'warning', 'error', 'info']; + +const COMPONENT_ID$b$3 = 'notifications.close'; +const StyledClose$1 = styled.button.attrs({ + 'data-garden-id': COMPONENT_ID$b$3, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledClose", + componentId: "sc-1mr9nx1-0" +})(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColor('neutralHue', 600, props.theme), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => focusStyles({ + theme: props.theme, + inset: true +}), props => retrieveComponentStyles(COMPONENT_ID$b$3, props)); +StyledClose$1.defaultProps = { + theme: DEFAULT_THEME }; -const MessageIcon = _ref => { - let { - children, - validation, - ...props - } = _ref; - let retVal; - if (validation === 'error') { - retVal = React.createElement(SvgAlertErrorStroke$1, props); - } else if (validation === 'success') { - retVal = React.createElement(SvgCheckCircleStroke$1, props); - } else if (validation === 'warning') { - retVal = React.createElement(SvgAlertWarningStroke$1, props); - } else { - retVal = React.cloneElement(reactExports.Children.only(children)); - } - return retVal; +const COMPONENT_ID$a$3 = 'notifications.paragraph'; +const StyledParagraph$1 = styled.p.attrs({ + 'data-garden-id': COMPONENT_ID$a$3, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledParagraph", + componentId: "sc-12tmd6p-0" +})(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$a$3, props)); +StyledParagraph$1.defaultProps = { + theme: DEFAULT_THEME }; -const COMPONENT_ID$F = 'forms.input_message_icon'; -const StyledMessageIcon = styled(MessageIcon).attrs({ - 'data-garden-id': COMPONENT_ID$F, - 'data-garden-version': '8.69.9', - 'aria-hidden': null + +const COMPONENT_ID$9$3 = 'notifications.title'; +const StyledTitle$1 = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$9$3, + 'data-garden-version': '8.69.9' }).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 = { + displayName: "StyledTitle", + componentId: "sc-xx4jsv-0" +})(["margin:0;color:", ";font-weight:", ";", ";"], props => props.theme.colors.foreground, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$9$3, props)); +StyledTitle$1.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); +const boxShadow = props => { + const { + theme + } = props; + const { + space, + shadows + } = theme; + const offsetY = `${space.base * 5}px`; + const blurRadius = `${space.base * 7}px`; + const color = getColor('chromeHue', 600, theme, 0.15); + return shadows.lg(offsetY, blurRadius, color); +}; +const colorStyles$6$2 = props => { + let backgroundColor; + let borderColor; + let foregroundColor; + if (props.hue) { + backgroundColor = getColor(props.hue, 100, props.theme); + borderColor = getColor(props.hue, 300, props.theme); + foregroundColor = getColor(props.hue, props.type === 'info' ? 600 : 700, props.theme); } else { - color = getColor('neutralHue', 700, props.theme); + backgroundColor = props.theme.colors.background; + borderColor = getColor('neutralHue', 300, props.theme); + foregroundColor = getColor('neutralHue', 800, props.theme); } - return Ne(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color); + return Ne(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor); }; -const COMPONENT_ID$E = 'forms.input_message'; -const StyledMessage$1 = styled.div.attrs(props => ({ - 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E, - 'data-garden-version': props['data-garden-version'] || '8.69.9' -})).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 = { +const padding = props => { + const { + space + } = props.theme; + const paddingVertical = `${space.base * 5}px`; + const paddingHorizontal = `${space.base * 10}px`; + return `${paddingVertical} ${paddingHorizontal}`; +}; +const StyledBase = styled.div.withConfig({ + displayName: "StyledBase", + componentId: "sc-14syaqw-0" +})(["position:relative;border:", ";border-radius:", ";box-shadow:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";"], props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.isFloating && boxShadow, padding, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles$6$2); +StyledBase.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$D = 'forms.input'; -const isInvalid = validation => { - return validation === 'warning' || validation === 'error'; +const COMPONENT_ID$8$3 = 'notifications.alert'; +const colorStyles$5$2 = props => Ne(["", "{color:", ";}"], StyledTitle$1, props.hue && getColor(props.hue, 800, props.theme)); +const StyledAlert = styled(StyledBase).attrs({ + 'data-garden-id': COMPONENT_ID$8$3, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledAlert", + componentId: "sc-fyn8jp-0" +})(["", " ", ";"], colorStyles$5$2, props => retrieveComponentStyles(COMPONENT_ID$8$3, props)); +StyledAlert.defaultProps = { + theme: DEFAULT_THEME }; -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; + +const COMPONENT_ID$7$3 = 'notifications.notification'; +const colorStyles$4$2 = props => { + const { + type, + theme + } = props; + const { + colors + } = theme; + const { + successHue, + dangerHue, + warningHue, + foreground + } = colors; + let color; + switch (type) { + case 'success': + color = getColor(successHue, 600, theme); + break; + case 'error': + color = getColor(dangerHue, 600, theme); + break; + case 'warning': + color = getColor(warningHue, 700, theme); + break; + case 'info': + color = foreground; + break; + default: + color = 'inherit'; + break; } - 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); + return Ne(["", "{color:", ";}"], StyledTitle$1, color); }; -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 StyledNotification = styled(StyledBase).attrs({ + 'data-garden-id': COMPONENT_ID$7$3, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledNotification", + componentId: "sc-uf6jh-0" +})(["", " ", ";"], colorStyles$4$2, props => retrieveComponentStyles(COMPONENT_ID$7$3, props)); +StyledNotification.propTypes = { + type: PropTypes.oneOf(TYPE$1) }; -const StyledTextInput = styled.input.attrs(props => ({ - 'data-garden-id': COMPONENT_ID$D, - 'data-garden-version': '8.69.9', - '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 = { +StyledNotification.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 = styled(StyledTextInput).attrs({ - as: 'textarea', - 'data-garden-id': COMPONENT_ID$C, +const COMPONENT_ID$6$3 = 'notifications.well'; +const StyledWell = styled(StyledBase).attrs({ + 'data-garden-id': COMPONENT_ID$6$3, 'data-garden-version': '8.69.9' }).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 = { + displayName: "StyledWell", + componentId: "sc-a5831c-0" +})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColor('neutralHue', 100, props.theme), props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6$3, props)); +StyledWell.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$B = '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 = 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 = styled( -_ref => { +const StyledIcon = styled(_ref => { let { children, - position, - isHovered, - isFocused, - isDisabled, - isRotated, - theme, ...props } = _ref; return React.cloneElement(reactExports.Children.only(children), props); -}).attrs({ - 'data-garden-id': COMPONENT_ID$B, - 'data-garden-version': '8.69.9' }).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(props), props => retrieveComponentStyles(COMPONENT_ID$B, props)); -StyledTextMediaFigure.defaultProps = { + displayName: "StyledIcon", + componentId: "sc-msklws-0" +})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme)); +StyledIcon.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', +const COMPONENT_ID$5$4 = 'notifications.global-alert'; +const colorStyles$3$2 = props => { + let borderColor; + let backgroundColor; + let foregroundColor; + let anchorHoverColor; + let anchorActiveColor; + let focusColor; + switch (props.alertType) { + case 'success': + borderColor = getColor('successHue', 700, props.theme); + backgroundColor = getColor('successHue', 600, props.theme); + foregroundColor = getColor('successHue', 100, props.theme); + anchorHoverColor = props.theme.palette.white; + anchorActiveColor = props.theme.palette.white; + focusColor = 'successHue'; + break; + case 'error': + borderColor = getColor('dangerHue', 700, props.theme); + backgroundColor = getColor('dangerHue', 600, props.theme); + foregroundColor = getColor('dangerHue', 100, props.theme); + anchorHoverColor = props.theme.palette.white; + anchorActiveColor = props.theme.palette.white; + focusColor = 'dangerHue'; + break; + case 'warning': + borderColor = getColor('warningHue', 400, props.theme); + backgroundColor = getColor('warningHue', 300, props.theme); + foregroundColor = getColor('warningHue', 800, props.theme); + anchorHoverColor = getColor('warningHue', 900, props.theme); + anchorActiveColor = getColor('warningHue', 1000, props.theme); + focusColor = 'warningHue'; + break; + case 'info': + borderColor = getColor('primaryHue', 300, props.theme); + backgroundColor = getColor('primaryHue', 200, props.theme); + foregroundColor = getColor('primaryHue', 700, props.theme); + anchorHoverColor = getColor('primaryHue', 800, props.theme); + anchorActiveColor = getColor('primaryHue', 900, props.theme); + focusColor = 'primaryHue'; + break; + } + const boxShadow = `0 ${props.theme.borderWidths.sm} ${props.theme.borderWidths.sm} ${borderColor}`; + return Ne(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;", " &:hover{color:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, focusStyles({ + theme: props.theme, + hue: focusColor, + shade: props.alertType === 'info' ? 600 : 800, styles: { - borderColor: getColor(getValidationHue(validation), 600, theme) + color: 'inherit' } - })); + }), anchorHoverColor, anchorActiveColor); }; -const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({ - as: 'div', - 'aria-readonly': props.isReadOnly, - 'aria-disabled': props.isDisabled, - 'data-garden-id': COMPONENT_ID$A, - 'data-garden-version': '8.69.9' -})).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 sizeStyles$3$2 = props => { + const { + fontSizes, + space + } = props.theme; + const minHeight = space.base * 13; + const padding = space.base * 4; + const lineHeight = getLineHeight(space.base * 5, fontSizes.md); + return Ne(["padding:", "px;min-height:", "px;line-height:", ";font-size:", ";"], padding, minHeight, lineHeight, fontSizes.md); }; - -const COMPONENT_ID$z = 'forms.media_input'; -const StyledTextMediaInput = styled(StyledTextInput).attrs({ - 'data-garden-id': COMPONENT_ID$z, - 'data-garden-version': '8.69.9', - isBare: true +const StyledGlobalAlert = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$5$4, + 'data-garden-version': '8.69.9' }).withConfig({ - displayName: "StyledTextMediaInput", - componentId: "sc-12i9xfi-0" -})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$z, props)); -StyledTextMediaInput.defaultProps = { + displayName: "StyledGlobalAlert", + componentId: "sc-k6rimt-0" +})(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";", " ", " && a{border-radius:", ";text-decoration:underline;}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', sizeStyles$3$2, colorStyles$3$2, props => props.theme.borderRadii.sm, props => retrieveComponentStyles(COMPONENT_ID$5$4, props)); +StyledGlobalAlert.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 COMPONENT_ID$4$4 = 'notifications.global-alert.close'; +const colorStyles$2$2 = props => { + let hoverBackgroundColor; + let hoverForegroundColor; + let activeBackgroundColor; + let activeForegroundColor; + let focusColor; + switch (props.alertType) { + case 'success': + hoverBackgroundColor = getColor('successHue', 100, props.theme, 0.08); + hoverForegroundColor = props.theme.palette.white; + activeBackgroundColor = getColor('successHue', 100, props.theme, 0.2); + activeForegroundColor = props.theme.palette.white; + focusColor = 'successHue'; + break; + case 'error': + hoverBackgroundColor = getColor('dangerHue', 100, props.theme, 0.08); + hoverForegroundColor = props.theme.palette.white; + activeBackgroundColor = getColor('dangerHue', 100, props.theme, 0.2); + activeForegroundColor = props.theme.palette.white; + focusColor = 'dangerHue'; + break; + case 'warning': + hoverBackgroundColor = getColor('warningHue', 800, props.theme, 0.08); + hoverForegroundColor = getColor('warningHue', 900, props.theme); + activeBackgroundColor = getColor('warningHue', 800, props.theme, 0.2); + activeForegroundColor = getColor('warningHue', 1000, props.theme); + focusColor = 'warningHue'; + break; + case 'info': + hoverBackgroundColor = getColor('primaryHue', 700, props.theme, 0.08); + hoverForegroundColor = getColor('primaryHue', 800, props.theme); + activeBackgroundColor = getColor('primaryHue', 700, props.theme, 0.2); + activeForegroundColor = getColor('primaryHue', 900, props.theme); + focusColor = 'primaryHue'; + break; + } + return Ne(["color:inherit;&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, focusStyles({ + theme: props.theme, + hue: focusColor, + shade: props.alertType === 'info' ? 600 : 800 + }), activeBackgroundColor, activeForegroundColor); }; -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 sizeStyles$2$2 = props => { + const marginVertical = `-${props.theme.space.base * 1.5}px`; + const marginStart = `${props.theme.space.base * 2}px`; + const marginEnd = `-${props.theme.space.base * 2}px`; + return Ne(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : marginEnd, marginVertical, props.theme.rtl ? marginEnd : marginStart); }; -const StyledInputGroup$1 = styled.div.attrs({ - 'data-garden-id': COMPONENT_ID$y, - 'data-garden-version': '8.69.9' +const StyledGlobalAlertClose = styled(IconButton).attrs({ + 'data-garden-id': COMPONENT_ID$4$4, + 'data-garden-version': '8.69.9', + size: 'small' }).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 = { + displayName: "StyledGlobalAlertClose", + componentId: "sc-1g5s93s-0" +})(["", ";", ";", ";"], sizeStyles$2$2, colorStyles$2$2, props => retrieveComponentStyles(COMPONENT_ID$4$4, props)); +StyledGlobalAlertClose.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 = styled(StyledLabel$1).attrs({ - 'data-garden-id': COMPONENT_ID$x$1, +const COMPONENT_ID$3$4 = 'notifications.global-alert.button'; +function colorStyles$1$2(props) { + if (props.isBasic) { + return colorStyles$2$2(props); + } + let backgroundColor; + let hoverBackgroundColor; + let activeBackgroundColor; + let focusColor; + switch (props.alertType) { + case 'success': + backgroundColor = getColor('successHue', 800, props.theme); + hoverBackgroundColor = getColor('successHue', 900, props.theme); + activeBackgroundColor = getColor('successHue', 1000, props.theme); + focusColor = 'successHue'; + break; + case 'error': + backgroundColor = getColor('dangerHue', 800, props.theme); + hoverBackgroundColor = getColor('dangerHue', 900, props.theme); + activeBackgroundColor = getColor('dangerHue', 1000, props.theme); + focusColor = 'dangerHue'; + break; + case 'warning': + backgroundColor = getColor('warningHue', 800, props.theme); + hoverBackgroundColor = getColor('warningHue', 900, props.theme); + activeBackgroundColor = getColor('warningHue', 1000, props.theme); + focusColor = 'warningHue'; + break; + case 'info': + focusColor = 'primaryHue'; + break; + } + return Ne(["background-color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, focusStyles({ + theme: props.theme, + hue: focusColor, + shade: props.alertType === 'info' ? 600 : 800 + }), activeBackgroundColor); +} +function sizeStyles$1$2(props) { + const marginVertical = `-${props.theme.space.base * 1.5}px`; + const marginStart = `${props.theme.space.base * 2}px`; + return Ne(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : 0, marginVertical, props.theme.rtl ? 0 : marginStart); +} +const StyledGlobalAlertButton = styled(Button).attrs({ + 'data-garden-id': COMPONENT_ID$3$4, 'data-garden-version': '8.69.9', - isRadio: true + focusInset: false, + isDanger: false, + isLink: false, + isNeutral: false, + isPill: false, + isStretched: false, + size: 'small' }).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.defaultProps = { + displayName: "StyledGlobalAlertButton", + componentId: "sc-1txe91a-0" +})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$1$2, colorStyles$1$2, props => retrieveComponentStyles(COMPONENT_ID$3$4, props)); +StyledGlobalAlertButton.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$w$1 = 'forms.checkbox_label'; -const StyledCheckLabel = styled(StyledRadioLabel).attrs({ - 'data-garden-id': COMPONENT_ID$w$1, +const COMPONENT_ID$2$6 = 'notifications.global-alert.content'; +const StyledGlobalAlertContent = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$2$6, 'data-garden-version': '8.69.9' }).withConfig({ - displayName: "StyledCheckLabel", - componentId: "sc-x7nr1-0" -})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$w$1, props)); -StyledCheckLabel.defaultProps = { + displayName: "StyledGlobalAlertContent", + componentId: "sc-rept0u-0" +})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2$6, props)); +StyledGlobalAlertContent.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$v$1 = 'forms.radio_hint'; -const StyledRadioHint = styled(StyledHint$1).attrs({ - 'data-garden-id': COMPONENT_ID$v$1, - 'data-garden-version': '8.69.9' -}).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 = styled(StyledRadioHint).attrs({ - 'data-garden-id': COMPONENT_ID$u$1, - 'data-garden-version': '8.69.9' -}).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 COMPONENT_ID$1$6 = 'notifications.global-alert.icon'; +const sizeStyles$h = props => { + const size = props.theme.iconSizes.md; + const marginTop = math(`(${props.theme.space.base * 5} - ${size}) / 2`); + const marginHorizontal = `${props.theme.space.base * 2}px`; + return Ne(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size); }; -const StyledRadioInput = styled.input.attrs({ - 'data-garden-id': COMPONENT_ID$t$1, - 'data-garden-version': '8.69.9', - type: 'radio' +const StyledGlobalAlertIcon = styled(_ref => { + let { + children, + ...props + } = _ref; + return React.cloneElement(reactExports.Children.only(children), props); +}).attrs({ + 'data-garden-id': COMPONENT_ID$1$6, + 'data-garden-version': '8.69.9' }).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 = { + displayName: "StyledGlobalAlertIcon", + componentId: "sc-84ne9k-0" +})(["flex-shrink:0;", ";", ";"], sizeStyles$h, props => retrieveComponentStyles(COMPONENT_ID$1$6, props)); +StyledGlobalAlertIcon.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 = styled(StyledRadioInput).attrs({ - 'data-garden-id': COMPONENT_ID$s$1, - 'data-garden-version': '8.69.9', - 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$M = 'notifications.global-alert.title'; +const colorStyles$e = props => { + let color; + switch (props.alertType) { + case 'success': + case 'error': + color = props.theme.palette.white; + break; + case 'warning': + color = getColor('warningHue', 900, props.theme); + break; + case 'info': + color = getColor('primaryHue', 800, props.theme); + break; + } + return Ne(["color:", ";"], color); }; - -const COMPONENT_ID$r$1 = 'forms.radio_message'; -const StyledRadioMessage = styled(StyledMessage$1).attrs({ - 'data-garden-id': COMPONENT_ID$r$1, +const StyledGlobalAlertTitle = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$M, 'data-garden-version': '8.69.9' }).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 = { + displayName: "StyledGlobalAlertTitle", + componentId: "sc-10clqbo-0" +})(["display:inline;margin-", ":", "px;font-weight:", ";", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, colorStyles$e, props => retrieveComponentStyles(COMPONENT_ID$M, props)); +StyledGlobalAlertTitle.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$q$1 = 'forms.checkbox_message'; -const StyledCheckMessage = styled(StyledRadioMessage).attrs({ - 'data-garden-id': COMPONENT_ID$q$1, - 'data-garden-version': '8.69.9' -}).withConfig({ - displayName: "StyledCheckMessage", - componentId: "sc-s4p6kd-0" -})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$q$1, props)); -StyledCheckMessage.defaultProps = { - theme: DEFAULT_THEME +var _g$2$1, _circle$2$1; +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 SvgAlertErrorStroke$1 = function SvgAlertErrorStroke(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), _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$2$1 || (_circle$2$1 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 12, + r: 1, + fill: "currentColor" + }))); }; -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({ +var _g$1$1; +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 SvgCheckCircleStroke$2 = function SvgCheckCircleStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$4$2({ xmlns: "http://www.w3.org/2000/svg", - width: 12, - height: 12, + width: 16, + height: 16, focusable: "false", - viewBox: "0 0 12 12", + viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$m || (_path$m = /*#__PURE__*/reactExports.createElement("path", { + }, props), _g$1$1 || (_g$1$1 = /*#__PURE__*/reactExports.createElement("g", { fill: "none", - stroke: "currentColor", + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", - strokeWidth: 2, - d: "M3 6l2 2 4-4" - }))); + d: "M4 9l2.5 2.5 5-5" + }), /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 8.5, + r: 7 + })))); }; -const COMPONENT_ID$p$1 = 'forms.check_svg'; -const StyledCheckSvg = styled(SvgCheckSmFill).attrs({ - 'data-garden-id': COMPONENT_ID$p$1, - 'data-garden-version': '8.69.9' -}).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$2$2, _circle$1$1; +function _extends$3$3() { _extends$3$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$3$3.apply(this, arguments); } +var SvgAlertWarningStroke$1 = function SvgAlertWarningStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$3$3({ + 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", + 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$1$1 || (_circle$1$1 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 12, + r: 1, + fill: "currentColor" + }))); }; -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({ +var _g$3, _circle$6; +function _extends$2$3() { _extends$2$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$2$3.apply(this, arguments); } +var SvgInfoStroke = function SvgInfoStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$2$3({ xmlns: "http://www.w3.org/2000/svg", - width: 12, - height: 12, + width: 16, + height: 16, focusable: "false", - viewBox: "0 0 12 12", + viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$l || (_path$l = /*#__PURE__*/reactExports.createElement("path", { - stroke: "currentColor", + }, props), _g$3 || (_g$3 = /*#__PURE__*/reactExports.createElement("g", { + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 8.5, + r: 7, + fill: "none" + }), /*#__PURE__*/reactExports.createElement("path", { strokeLinecap: "round", - strokeWidth: 2, - d: "M3 6h6" + d: "M7.5 12.5V8" + }))), _circle$6 || (_circle$6 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 5, + r: 1, + fill: "currentColor" }))); }; -const COMPONENT_ID$o$1 = 'forms.dash_svg'; -const StyledDashSvg = styled(SvgDashFill).attrs({ - 'data-garden-id': COMPONENT_ID$o$1, - 'data-garden-version': '8.69.9' -}).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 validationIcons = { + success: SvgCheckCircleStroke$2, + error: SvgAlertErrorStroke$1, + warning: SvgAlertWarningStroke$1, + info: SvgInfoStroke +}; +const validationHues = { + success: 'successHue', + error: 'dangerHue', + warning: 'warningHue', + info: 'neutralHue' }; -const COMPONENT_ID$n$1 = '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$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 = styled.div.attrs({ - 'data-garden-id': COMPONENT_ID$n$1, - 'data-garden-version': '8.69.9' -}).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$2, props => retrieveComponentStyles(COMPONENT_ID$n$1, props)); -StyledFileUpload.defaultProps = { - theme: DEFAULT_THEME -}; - -const COMPONENT_ID$m$1 = 'forms.file.close'; -const StyledFileClose = styled.button.attrs({ - 'data-garden-id': COMPONENT_ID$m$1, - 'data-garden-version': '8.69.9' -}).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$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$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 = styled.div.attrs({ - 'data-garden-id': COMPONENT_ID$l$1, - 'data-garden-version': '8.69.9' -}).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$2, 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 = styled(StyledFileClose).attrs({ - 'data-garden-id': COMPONENT_ID$k$1, - 'data-garden-version': '8.69.9' -}).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 NotificationsContext = reactExports.createContext(undefined); +const useNotificationsContext = () => { + return reactExports.useContext(NotificationsContext); }; -const COMPONENT_ID$j$1 = 'forms.file.icon'; -const StyledFileIcon = styled(_ref => { +const Alert = React.forwardRef((_ref, ref) => { let { - children, - isCompact, - theme, + role, ...props } = _ref; - return React.cloneElement(reactExports.Children.only(children), props); -}).attrs({ - 'data-garden-id': COMPONENT_ID$j$1, - 'data-garden-version': '8.69.9' -}).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 hue = validationHues[props.type]; + const Icon = validationIcons[props.type]; + return React.createElement(NotificationsContext.Provider, { + value: hue + }, React.createElement(StyledAlert, _extends$6$2({ + ref: ref, + hue: hue, + role: role === undefined ? 'alert' : role + }, props), React.createElement(StyledIcon, { + hue: hue + }, React.createElement(Icon, null)), props.children)); +}); +Alert.displayName = 'Alert'; +Alert.propTypes = { + type: PropTypes.oneOf(TYPE$1).isRequired }; -const COMPONENT_ID$i$1 = 'forms.file_list'; -const StyledFileList = styled.ul.attrs({ - 'data-garden-id': COMPONENT_ID$i$1, - 'data-garden-version': '8.69.9' -}).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 Notification = reactExports.forwardRef((_ref, ref) => { + let { + role, + ...props + } = _ref; + const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke; + const hue = props.type && validationHues[props.type]; + return React.createElement(StyledNotification, _extends$6$2({ + ref: ref, + type: props.type, + isFloating: true + }, props, { + role: role === undefined ? 'status' : role + }), props.type && React.createElement(StyledIcon, { + hue: hue + }, React.createElement(Icon, null)), props.children); +}); +Notification.displayName = 'Notification'; +Notification.propTypes = { + type: PropTypes.oneOf(TYPE$1) }; -const COMPONENT_ID$h$1 = 'forms.file_list.item'; -const StyledFileListItem = styled.li.attrs({ - 'data-garden-id': COMPONENT_ID$h$1, - 'data-garden-version': '8.69.9' -}).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 +const Well = React.forwardRef((props, ref) => React.createElement(StyledWell, _extends$6$2({ + ref: ref +}, props))); +Well.displayName = 'Well'; +Well.propTypes = { + isRecessed: PropTypes.bool, + isFloating: PropTypes.bool }; -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({ +var _path$1$3; +function _extends$1$4() { _extends$1$4 = 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$4.apply(this, arguments); } +var SvgXStroke$1$1 = function SvgXStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$1$4({ 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" + }, props), _path$1$3 || (_path$1$3 = /*#__PURE__*/reactExports.createElement("path", { + stroke: "currentColor", + strokeLinecap: "round", + d: "M3 9l6-6m0 6L3 3" }))); }; -const COMPONENT_ID$g$1 = 'forms.radio_svg'; -const StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({ - 'data-garden-id': COMPONENT_ID$g$1, - 'data-garden-version': '8.69.9' -}).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 Close$2 = React.forwardRef((props, ref) => { + const ariaLabel = useText(Close$2, props, 'aria-label', 'Close'); + const hue = useNotificationsContext(); + return React.createElement(StyledClose$1, _extends$6$2({ + ref: ref, + hue: hue, + "aria-label": ariaLabel + }, props), React.createElement(SvgXStroke$1$1, null)); +}); +Close$2.displayName = 'Close'; -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 = styled(StyledCheckLabel).attrs({ - 'data-garden-id': COMPONENT_ID$f$1, - 'data-garden-version': '8.69.9' -}).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 Paragraph$1 = React.forwardRef((props, ref) => React.createElement(StyledParagraph$1, _extends$6$2({ + ref: ref +}, props))); +Paragraph$1.displayName = 'Paragraph'; -const COMPONENT_ID$e$1 = 'forms.toggle_hint'; -const StyledToggleHint = styled(StyledHint$1).attrs({ - 'data-garden-id': COMPONENT_ID$e$1, - 'data-garden-version': '8.69.9' -}).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 Title$1 = React.forwardRef((props, ref) => React.createElement(StyledTitle$1, _extends$6$2({ + ref: ref +}, props))); +Title$1.displayName = 'Title'; -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, 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 getInitialState = () => { + return { + toasts: [] + }; }; -const StyledToggleInput = styled(StyledCheckInput).attrs({ - 'data-garden-id': COMPONENT_ID$d$2, - 'data-garden-version': '8.69.9' -}).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$2(props), props => retrieveComponentStyles(COMPONENT_ID$d$2, props)); -StyledToggleInput.defaultProps = { - theme: DEFAULT_THEME +const toasterReducer = (state, action) => { + switch (action.type) { + case 'ADD_TOAST': + { + return { + ...state, + toasts: [...state.toasts, action.payload] + }; + } + case 'REMOVE_TOAST': + { + const filteredToasts = state.toasts.filter(toast => toast.id !== action.payload); + return { + ...state, + toasts: filteredToasts + }; + } + case 'UPDATE_TOAST': + { + const updatedToasts = state.toasts.map(toast => { + if (toast.id !== action.payload.id) { + return toast; + } + const updatedToast = toast; + const { + content, + ...newOptions + } = action.payload.options; + if (content) { + updatedToast.content = content; + } + updatedToast.options = { + ...updatedToast.options, + ...newOptions + }; + return updatedToast; + }); + return { + ...state, + toasts: updatedToasts + }; + } + case 'REMOVE_ALL_TOASTS': + { + return { + ...state, + toasts: [] + }; + } + default: + throw new Error('Invalid toaster reducer action'); + } }; -const COMPONENT_ID$c$2 = 'forms.toggle_message'; -const StyledToggleMessage = styled(StyledMessage$1).attrs({ - 'data-garden-id': COMPONENT_ID$c$2, - 'data-garden-version': '8.69.9' -}).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$2, props)); -StyledToggleMessage.defaultProps = { - theme: DEFAULT_THEME -}; +const ToastContext = reactExports.createContext(undefined); -var _circle$2$1; -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$1 || (_circle$2$1 = /*#__PURE__*/reactExports.createElement("circle", { - cx: 8, - cy: 8, - r: 6, - fill: "currentColor" - }))); +const DEFAULT_TOAST_OPTIONS = { + autoDismiss: 5000, + placement: 'top-end' }; - -const COMPONENT_ID$b$3 = 'forms.toggle_svg'; -const StyledToggleSvg = styled(SvgCircleSmFill).attrs({ - 'data-garden-id': COMPONENT_ID$b$3, - 'data-garden-version': '8.69.9' -}).withConfig({ - displayName: "StyledToggleSvg", - componentId: "sc-162xbyx-0" -})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b$3, props)); -StyledToggleSvg.defaultProps = { - theme: DEFAULT_THEME +const useToast = () => { + const context = reactExports.useContext(ToastContext); + if (context === undefined) { + throw new Error('useToast() must be used within a "ToastProvider"'); + } + const { + dispatch, + state + } = context; + const addToast = reactExports.useCallback(function (content) { + let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + const mergedOptions = { + ...DEFAULT_TOAST_OPTIONS, + ...options + }; + const newToast = { + id: mergedOptions.id || uid(content), + content, + options: mergedOptions + }; + dispatch({ + type: 'ADD_TOAST', + payload: newToast + }); + return newToast.id; + }, [dispatch]); + const removeToast = reactExports.useCallback(id => { + dispatch({ + type: 'REMOVE_TOAST', + payload: id + }); + }, [dispatch]); + const updateToast = reactExports.useCallback((id, options) => { + dispatch({ + type: 'UPDATE_TOAST', + payload: { + id, + options + } + }); + }, [dispatch]); + const removeAllToasts = reactExports.useCallback(() => { + dispatch({ + type: 'REMOVE_ALL_TOASTS' + }); + }, [dispatch]); + return { + addToast, + removeToast, + updateToast, + removeAllToasts, + toasts: state.toasts + }; }; -const COMPONENT_ID$a$3 = '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, 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 Toast = _ref => { + let { + toast, + pauseTimers + } = _ref; + const { + removeToast + } = useToast(); + const { + id + } = toast; + const { + autoDismiss + } = toast.options; + const [remainingTime, setRemainingTime] = reactExports.useState(NaN); + const startTimeRef = reactExports.useRef(Date.now()); + const previousRemainingTimeRef = reactExports.useRef(remainingTime); + reactExports.useEffect(() => { + if (typeof autoDismiss === 'number') { + setRemainingTime(autoDismiss); + } else { + setRemainingTime(NaN); + } + }, [autoDismiss]); + reactExports.useEffect(() => { + if (pauseTimers && !isNaN(remainingTime)) { + previousRemainingTimeRef.current = remainingTime - (Date.now() - startTimeRef.current); + setRemainingTime(NaN); + } else if (!pauseTimers && isNaN(remainingTime) && !isNaN(previousRemainingTimeRef.current)) { + setRemainingTime(previousRemainingTimeRef.current); + } + }, [pauseTimers, remainingTime]); + reactExports.useEffect(() => { + let timeout; + if (!isNaN(remainingTime)) { + startTimeRef.current = Date.now(); + timeout = setTimeout(() => { + removeToast(id); + }, remainingTime); + } + return () => { + clearTimeout(timeout); + }; + }, [id, pauseTimers, remainingTime, removeToast]); + const close = reactExports.useCallback(() => { + removeToast(toast.id); + }, [removeToast, toast.id]); + return toast.content({ + close + }); }; -const StyledSelect = styled(StyledTextInput).attrs({ - 'data-garden-id': COMPONENT_ID$a$3, - 'data-garden-version': '8.69.9', - 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$2(props), props => props.theme.colors.foreground, StyledTextMediaFigure); -StyledSelect.defaultProps = { + +const TRANSITION_CLASS = 'garden-toast-transition'; +const DEFAULT_DURATION = '400ms'; +const StyledFadeInTransition = styled.div.withConfig({ + displayName: "styled__StyledFadeInTransition", + componentId: "sc-nq0usb-0" +})(["transition:opacity ", " ease-in 300ms;opacity:", ";margin-bottom:", "px;", " &.", "-enter{transform:translateY( ", " );opacity:0;max-height:0;}&.", "-enter-active{transform:translateY(0);transition:opacity ", " ease-in,transform ", " cubic-bezier(0.15,0.85,0.35,1.2),max-height ", ";opacity:1;max-height:500px;}&.", "-exit{opacity:1;max-height:500px;}&.", "-exit-active{transition:opacity 550ms ease-out,max-height ", " linear 150ms;opacity:0;max-height:0;}"], DEFAULT_DURATION, p => p.isHidden ? '0 !important' : 1, p => p.theme.space.base * 2, p => p.isHidden && hideVisually(), TRANSITION_CLASS, props => { + if (props.placement === 'bottom-start' || props.placement === 'bottom' || props.placement === 'bottom-end') { + return '100px'; + } + return '-100px'; +}, TRANSITION_CLASS, DEFAULT_DURATION, DEFAULT_DURATION, DEFAULT_DURATION, TRANSITION_CLASS, TRANSITION_CLASS, DEFAULT_DURATION); +StyledFadeInTransition.defaultProps = { theme: DEFAULT_THEME }; - -const COMPONENT_ID$9$3 = 'forms.select_wrapper'; -const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({ - 'data-garden-id': COMPONENT_ID$9$3, - 'data-garden-version': '8.69.9' -}).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 = { +const placementStyles = props => { + const verticalDistance = `${props.theme.space.base * 16}px`; + const horizontalDistance = `${props.theme.space.base * 3}px`; + const topLeftStyles = Ne(["top:", ";left:", ";"], verticalDistance, horizontalDistance); + const topStyles = Ne(["top:", ";left:50%;transform:translate(-50%,0);"], verticalDistance); + const topRightStyles = Ne(["top:", ";right:", ";"], verticalDistance, horizontalDistance); + const bottomLeftStyles = Ne(["bottom:", ";left:", ";"], verticalDistance, horizontalDistance); + const bottomStyles = Ne(["bottom:", ";left:50%;transform:translate(-50%,0);"], verticalDistance); + const bottomRightStyles = Ne(["right:", ";bottom:", ";"], horizontalDistance, verticalDistance); + switch (props.toastPlacement) { + case 'top-start': + if (props.theme.rtl) { + return topRightStyles; + } + return topLeftStyles; + case 'top': + return topStyles; + case 'top-end': + if (props.theme.rtl) { + return topLeftStyles; + } + return topRightStyles; + case 'bottom-start': + if (props.theme.rtl) { + return bottomRightStyles; + } + return bottomLeftStyles; + case 'bottom': + return bottomStyles; + case 'bottom-end': + if (props.theme.rtl) { + return bottomLeftStyles; + } + return bottomRightStyles; + default: + return ''; + } +}; +const StyledTransitionContainer = styled.div.withConfig({ + displayName: "styled__StyledTransitionContainer", + componentId: "sc-nq0usb-1" +})(["position:fixed;z-index:", ";", ";"], props => props.toastZIndex, placementStyles); +StyledTransitionContainer.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$8$3 = 'forms.range'; -const thumbStyles = function (styles) { - let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; - return ` - &${modifier}::-moz-range-thumb { - ${styles} +const ToastSlot = _ref => { + let { + toasts, + placement, + zIndex, + limit, + ...props + } = _ref; + const [pauseTimers, setPauseTimers] = reactExports.useState(false); + const theme = reactExports.useContext(Be); + const environment = useDocument(theme); + const handleVisibilityChange = reactExports.useCallback(e => { + if (e.target.visibilityState === 'visible') { + setPauseTimers(false); + } else { + setPauseTimers(true); } - - &${modifier}::-ms-thumb { - ${styles} + }, []); + reactExports.useEffect(() => { + if (environment) { + environment.addEventListener('visibilitychange', handleVisibilityChange); } + return () => { + if (environment) { + environment.removeEventListener('visibilitychange', handleVisibilityChange); + } + }; + }, [environment, handleVisibilityChange]); + const handleMouseEnter = reactExports.useCallback(() => { + setPauseTimers(true); + }, []); + const handleMouseLeave = reactExports.useCallback(() => { + setPauseTimers(false); + }, []); + const isHidden = reactExports.useCallback(index => { + if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') { + return index < toasts.length - limit; + } + return index >= limit; + }, [limit, placement, toasts.length]); + return React.createElement(StyledTransitionContainer, _extends$6$2({ + key: placement, + toastPlacement: placement, + toastZIndex: zIndex, + onMouseEnter: handleMouseEnter, + onMouseLeave: handleMouseLeave + }, props), React.createElement(TransitionGroup$1, null, toasts.map((toast, index) => { + const transitionRef = React.createRef(); + return React.createElement(CSSTransition$1, { + key: toast.id, + timeout: { + enter: 400, + exit: 550 + }, + unmountOnExit: true, + classNames: TRANSITION_CLASS, + nodeRef: transitionRef + }, React.createElement(StyledFadeInTransition, { + ref: transitionRef, + placement: placement, + isHidden: isHidden(index) + }, React.createElement(Toast, { + toast: toast, + pauseTimers: pauseTimers || isHidden(index) + }))); + }))); +}; - &${modifier}::-webkit-slider-thumb { - ${styles} - } - `; +const ToastProvider = _ref => { + let { + limit, + zIndex, + placementProps = {}, + children + } = _ref; + const [state, dispatch] = reactExports.useReducer(toasterReducer, getInitialState()); + const contextValue = reactExports.useMemo(() => ({ + state, + dispatch + }), [state, dispatch]); + const toastsByPlacement = reactExports.useCallback(placement => { + let matchingToasts = state.toasts.filter(toast => toast.options.placement === placement); + if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') { + matchingToasts = matchingToasts.reverse(); + } + return React.createElement(ToastSlot, _extends$6$2({ + placement: placement, + toasts: matchingToasts, + zIndex: zIndex, + limit: limit + }, placementProps[placement])); + }, [limit, state.toasts, zIndex, placementProps]); + return React.createElement(ToastContext.Provider, { + value: contextValue + }, toastsByPlacement('top-start'), toastsByPlacement('top'), toastsByPlacement('top-end'), children, toastsByPlacement('bottom-start'), toastsByPlacement('bottom'), toastsByPlacement('bottom-end')); +}; +ToastProvider.displayName = 'ToastProvider'; +ToastProvider.defaultProps = { + limit: 4 +}; +ToastProvider.propTypes = { + limit: PropTypes.number, + zIndex: PropTypes.number, + placementProps: PropTypes.object }; -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} - } +const GlobalAlertContext = reactExports.createContext({ + type: 'info' +}); +const useGlobalAlertContext = () => reactExports.useContext(GlobalAlertContext); - &${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(` - 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 = styled.input.attrs(props => ({ - 'data-garden-id': COMPONENT_ID$8$3, - 'data-garden-version': '8.69.9', - 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$2(props), props => retrieveComponentStyles(COMPONENT_ID$8$3, props)); -StyledRangeInput.defaultProps = { - backgroundSize: '0%', - hasLowerTrack: true, - theme: DEFAULT_THEME +const GlobalAlertButton = reactExports.forwardRef((_ref, ref) => { + let { + isBasic, + ...props + } = _ref; + const { + type + } = useGlobalAlertContext(); + return React.createElement(StyledGlobalAlertButton, _extends$6$2({ + ref: ref, + alertType: type + }, props, { + isPrimary: !isBasic, + isBasic: isBasic + })); +}); +GlobalAlertButton.displayName = 'GlobalAlert.Button'; +GlobalAlertButton.propTypes = { + isBasic: PropTypes.bool }; -const COMPONENT_ID$7$3 = 'forms.slider'; -const StyledSlider = styled.div.attrs({ - 'data-garden-id': COMPONENT_ID$7$3, - 'data-garden-version': '8.69.9' -}).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$3, props)); -StyledSlider.defaultProps = { - theme: DEFAULT_THEME +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 SvgXStroke$3 = function SvgXStroke(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", { + stroke: "currentColor", + strokeLinecap: "round", + d: "M3 13L13 3m0 10L3 3" + }))); }; -const COMPONENT_ID$6$3 = '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$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 = styled.div.attrs(props => ({ - 'data-garden-id': COMPONENT_ID$6$3, - 'data-garden-version': '8.69.9', - '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$2(props), props => retrieveComponentStyles(COMPONENT_ID$6$3, props)); -StyledSliderThumb.defaultProps = { - position: 0, - theme: DEFAULT_THEME -}; +const GlobalAlertClose = reactExports.forwardRef((props, ref) => { + const { + type + } = useGlobalAlertContext(); + const label = useText(GlobalAlertClose, props, 'aria-label', 'Close'); + return React.createElement(StyledGlobalAlertClose, _extends$6$2({ + ref: ref, + alertType: type + }, props), React.createElement(SvgXStroke$3, { + role: "img", + "aria-label": label + })); +}); +GlobalAlertClose.displayName = 'GlobalAlert.Close'; -const COMPONENT_ID$5$4 = '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 = styled.div.attrs(props => ({ - 'data-garden-id': COMPONENT_ID$5$4, - 'data-garden-version': '8.69.9', - '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$4, props)); -StyledSliderTrack.defaultProps = { - backgroundSize: 0, - backgroundPosition: 0, - theme: DEFAULT_THEME -}; +const GlobalAlertContent = reactExports.forwardRef((props, ref) => { + return React.createElement(StyledGlobalAlertContent, _extends$6$2({ + ref: ref + }, props)); +}); +GlobalAlertContent.displayName = 'GlobalAlert.Content'; -const COMPONENT_ID$4$4 = '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 = styled.div.attrs({ - 'data-garden-id': COMPONENT_ID$4$4, - 'data-garden-version': '8.69.9' -}).withConfig({ - displayName: "StyledSliderTrackRail", - componentId: "sc-1o5owbd-0" -})(["position:relative;", ";", ";"], props => sizeStyles$3$2(props), props => retrieveComponentStyles(COMPONENT_ID$4$4, props)); -StyledSliderTrackRail.defaultProps = { - theme: DEFAULT_THEME +const GlobalAlertTitle = reactExports.forwardRef((props, ref) => { + const { + type + } = useGlobalAlertContext(); + return React.createElement(StyledGlobalAlertTitle, _extends$6$2({ + alertType: type, + ref: ref + }, props)); +}); +GlobalAlertTitle.displayName = 'GlobalAlert.Title'; +GlobalAlertTitle.propTypes = { + isRegular: PropTypes.bool }; -const COMPONENT_ID$3$4 = '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 = styled.span.attrs({ - 'data-garden-id': COMPONENT_ID$3$4, - 'data-garden-version': '8.69.9' -}).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$4, props)); -StyledTileIcon.defaultProps = { - theme: DEFAULT_THEME -}; - -const COMPONENT_ID$2$6 = '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 = styled.label.attrs(props => ({ - 'data-garden-id': COMPONENT_ID$2$6, - 'data-garden-version': '8.69.9', - '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$6, props)); -StyledTile.defaultProps = { - theme: DEFAULT_THEME -}; - -const COMPONENT_ID$1$6 = 'forms.tile_description'; -const sizeStyles$1$3 = 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 = styled.span.attrs({ - 'data-garden-id': COMPONENT_ID$1$6, - 'data-garden-version': '8.69.9' -}).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$3(props), props => retrieveComponentStyles(COMPONENT_ID$1$6, props)); -StyledTileDescription.defaultProps = { - theme: DEFAULT_THEME -}; - -const StyledTileInput = styled.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 GlobalAlertComponent = reactExports.forwardRef((_ref, ref) => { + let { + type, + ...props + } = _ref; + return React.createElement(GlobalAlertContext.Provider, { + value: reactExports.useMemo(() => ({ + type + }), [type]) + }, React.createElement(StyledGlobalAlert, _extends$6$2({ + ref: ref, + role: "status", + alertType: type + }, props), { + success: React.createElement(StyledGlobalAlertIcon, null, React.createElement(SvgCheckCircleStroke$2, null)), + error: React.createElement(StyledGlobalAlertIcon, null, React.createElement(SvgAlertErrorStroke$1, null)), + warning: React.createElement(StyledGlobalAlertIcon, null, React.createElement(SvgAlertWarningStroke$1, null)), + info: React.createElement(StyledGlobalAlertIcon, null, React.createElement(SvgInfoStroke, null)) + }[type], props.children)); +}); +GlobalAlertComponent.displayName = 'GlobalAlert'; +const GlobalAlert = GlobalAlertComponent; +GlobalAlert.Button = GlobalAlertButton; +GlobalAlert.Close = GlobalAlertClose; +GlobalAlert.Content = GlobalAlertContent; +GlobalAlert.Title = GlobalAlertTitle; +GlobalAlert.propTypes = { + type: PropTypes.oneOf(TYPE$1).isRequired }; -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 = styled.span.attrs({ - 'data-garden-id': COMPONENT_ID$L, - 'data-garden-version': '8.69.9' -}).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 -}; +/** + * 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 Field$1 = React.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 { +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, - 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.createElement(FieldContext$1.Provider, { - value: fieldProps - }, React.createElement(StyledField$1, _extends$t({}, props, { - ref: ref - }))); + getHintProps, + getMessageProps + }; +} +({ + children: PropTypes.func, + render: PropTypes.func, + id: PropTypes.string }); -Field$1.displayName = 'Field'; -const FieldsetContext = reactExports.createContext(undefined); -const useFieldsetContext = () => { - const fieldsetContext = reactExports.useContext(FieldsetContext); - return fieldsetContext; -}; +/** + * 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 + */ -const LegendComponent = reactExports.forwardRef((props, ref) => { - const fieldsetContext = useFieldsetContext(); - return React.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, { - ref: ref - })); -}); -LegendComponent.displayName = 'Fieldset.Legend'; -const Legend = LegendComponent; +/** Used as the `TypeError` message for "Functions" methods. */ +var FUNC_ERROR_TEXT = 'Expected a function'; -const FieldsetComponent = reactExports.forwardRef((props, ref) => { - const fieldsetContext = reactExports.useMemo(() => ({ - isCompact: props.isCompact - }), [props.isCompact]); - return React.createElement(FieldsetContext.Provider, { - value: fieldsetContext - }, React.createElement(StyledFieldset, _extends$t({}, props, { - ref: ref - }))); -}); -FieldsetComponent.displayName = 'Fieldset'; -FieldsetComponent.propTypes = { - isCompact: PropTypes.bool -}; -const Fieldset = FieldsetComponent; -Fieldset.Legend = Legend; +/** Used as references for various `Number` constants. */ +var NAN = 0 / 0; -const InputContext = reactExports.createContext(undefined); -const useInputContext = () => { - return reactExports.useContext(InputContext); +/** `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(); }; -const Hint$1 = React.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; +/** + * 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); } - let combinedProps = props; - if (getHintProps) { - combinedProps = getHintProps(combinedProps); + wait = toNumber(wait) || 0; + if (isObject$1(options)) { + leading = !!options.leading; + maxing = 'maxWait' in options; + maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait; + trailing = 'trailing' in options ? !!options.trailing : trailing; } - return React.createElement(HintComponent, _extends$t({ - ref: ref - }, combinedProps)); -}); -Hint$1.displayName = 'Hint'; -const Label$1 = React.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$4(props.onMouseUp, () => { - setIsLabelActive(false); - }), - onMouseDown: composeEventHandlers$4(props.onMouseDown, () => { - setIsLabelActive(true); - }), - onMouseEnter: composeEventHandlers$4(props.onMouseEnter, () => { - setIsLabelHovered(true); - }), - onMouseLeave: composeEventHandlers$4(props.onMouseLeave, () => { - setIsLabelHovered(false); - }), - onClick: composeEventHandlers$4(props.onClick, () => { - multiThumbRangeRef.current && multiThumbRangeRef.current.focus(); - }) - }; - } + function invokeFunc(time) { + var args = lastArgs, + thisArg = lastThis; + + lastArgs = lastThis = undefined; + lastInvokeTime = time; + result = func.apply(thisArg, args); + return result; } - if (fieldsetContext) { - combinedProps = { - ...combinedProps, - isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular - }; + + 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; } - if (type === 'radio') { - return React.createElement(StyledRadioLabel, _extends$t({ - ref: ref - }, combinedProps), React.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$4(combinedProps.onClick, onLabelSelect) - }; - return React.createElement(StyledCheckLabel, _extends$t({ - ref: ref - }, combinedProps), React.createElement(StyledCheckSvg, null), React.createElement(StyledDashSvg, null), props.children); - } else if (type === 'toggle') { - return React.createElement(StyledToggleLabel, _extends$t({ - ref: ref - }, combinedProps), React.createElement(StyledToggleSvg, null), props.children); - } - return React.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']; + function remainingWait(time) { + var timeSinceLastCall = time - lastCallTime, + timeSinceLastInvoke = time - lastInvokeTime, + result = wait - timeSinceLastCall; -const Message$1 = React.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; + return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result; } - let combinedProps = { - validation, - validationLabel, - ...props - }; - if (getMessageProps) { - combinedProps = getMessageProps(combinedProps); + + 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)); } - const ariaLabel = useText(Message$1, combinedProps, 'validationLabel', validation, validation !== undefined); - return React.createElement(MessageComponent, _extends$t({ - ref: ref - }, combinedProps), validation && React.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.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); + function timerExpired() { + var time = now(); + if (shouldInvoke(time)) { + return trailingEdge(time); + } + // Restart the timer. + timerId = setTimeout(timerExpired, remainingWait(time)); } - return React.createElement(InputContext.Provider, { - value: "checkbox" - }, React.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); -}; + function trailingEdge(time) { + timerId = undefined; -const Input = React.forwardRef((_ref, ref) => { - let { - onSelect, - ...props - } = _ref; - const fieldContext = useFieldContext$1(); - const inputGroupContext = useInputGroupContext(); - const onSelectHandler = props.readOnly ? composeEventHandlers$4(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 - }; + // 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; } - if (fieldContext) { - combinedProps = fieldContext.getInputProps(combinedProps); + + function cancel() { + if (timerId !== undefined) { + clearTimeout(timerId); + } + lastInvokeTime = 0; + lastArgs = lastCallTime = lastThis = timerId = undefined; } - return React.createElement(StyledTextInput, combinedProps); -}); -Input.propTypes = { - isCompact: PropTypes.bool, - isBare: PropTypes.bool, - focusInset: PropTypes.bool, - validation: PropTypes.oneOf(VALIDATION) -}; -Input.displayName = 'Input'; -const Radio = React.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); + function flush() { + return timerId === undefined ? result : trailingEdge(now()); } - return React.createElement(InputContext.Provider, { - value: "radio" - }, React.createElement(StyledRadioInput, combinedProps), children); -}); -Radio.displayName = 'Radio'; -Radio.propTypes = { - isCompact: PropTypes.bool -}; -const Range = React.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$4(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.createElement(StyledRangeInput, combinedProps); -}); -Range.defaultProps = { - hasLowerTrack: true, - min: 0, - max: 100, - step: 1 -}; -Range.displayName = 'Range'; + function debounced() { + var time = now(), + isInvoking = shouldInvoke(time); -const parseStyleValue = value => { - return parseInt(value, 10) || 0; -}; -const Textarea = React.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 - }; + 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); } - 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); - }; + if (timerId === undefined) { + timerId = setTimeout(timerExpired, wait); } - 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$4(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.createElement(React.Fragment, null, React.createElement(StyledTextarea, combinedProps), isAutoResizable && React.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.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 result; } - return React.createElement(InputContext.Provider, { - value: "toggle" - }, React.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$2 = 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$1 = props => React.createElement(StyledTextMediaFigure, _extends$t({ - position: "start" -}, props)); -StartIconComponent$1.displayName = 'FauxInput.StartIcon'; -const StartIcon$1 = StartIconComponent$1; + debounced.cancel = cancel; + debounced.flush = flush; + return debounced; +} -const EndIconComponent$1 = props => React.createElement(StyledTextMediaFigure, _extends$t({ - position: "end" -}, props)); -EndIconComponent$1.displayName = 'FauxInput.EndIcon'; -const EndIcon$1 = EndIconComponent$1; +/** + * 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'); +} -const FauxInputComponent = reactExports.forwardRef((_ref, ref) => { - let { - onFocus, - onBlur, - disabled, - readOnly, - isFocused: controlledIsFocused, - ...props - } = _ref; - const [isFocused, setIsFocused] = reactExports.useState(false); - const onFocusHandler = composeEventHandlers$4(onFocus, () => { - setIsFocused(true); - }); - const onBlurHandler = composeEventHandlers$4(onBlur, () => { - setIsFocused(false); - }); - return React.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$1; -FauxInput.StartIcon = StartIcon$1; +/** + * 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'; +} -const Select = React.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 - }); +/** + * 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; } - return React.createElement(StyledSelectWrapper, { - isCompact: isCompact, - isBare: isBare, - validation: validation, - focusInset: focusInset - }, React.createElement(StyledSelect, combinedProps), !isBare && React.createElement(FauxInput.EndIcon, { - isDisabled: disabled - }, React.createElement(SvgChevronDownStroke$2, null))); -}); -Select.propTypes = { - isCompact: PropTypes.bool, - isBare: PropTypes.bool, - focusInset: PropTypes.bool, - validation: PropTypes.oneOf(VALIDATION) + if (isSymbol(value)) { + return NAN; + } + if (isObject$1(value)) { + var other = typeof value.valueOf == 'function' ? value.valueOf() : value; + value = isObject$1(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$3() { + 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$2 = { + 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' }; -Select.displayName = 'Select'; +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 = {})); -const MIN = 0; -const MAX = 100; -const MultiThumbRange = reactExports.forwardRef((_ref, ref) => { +const SLIDER_MIN = 0; +const SLIDER_MAX = 100; +const SLIDER_STEP = 1; +function useSlider(_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, + trackRef, minThumbRef, maxThumbRef, - min, - max, + min = SLIDER_MIN, + max = SLIDER_MAX, + defaultMinValue, + defaultMaxValue, minValue, maxValue, - onChange, - step, - jump, + onChange = () => undefined, + step = SLIDER_STEP, + jump = step, disabled, - rtl: theme.rtl, + rtl, environment + } = _ref; + const doc = environment || document; + const [trackRect, setTrackRect] = reactExports.useState({ + width: 0 }); - const { - onMouseDown: onSliderMouseDown, - ...trackProps - } = getTrackProps({ - onMouseDown - }); - const fieldContext = useFieldContext$1(); - const { - isLabelHovered, - isLabelActive, - multiThumbRangeRef - } = fieldContext || {}; - reactExports.useEffect(() => { - if (multiThumbRangeRef) { - multiThumbRangeRef.current = minThumbRef.current; + const init = function (initMinValue, initMaxValue) { + if (initMinValue === void 0) { + initMinValue = min; } - }, [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.createElement(StyledSlider, _extends$t({ - ref: ref, - onMouseDown: onSliderMouseDown - }, props), React.createElement(StyledSliderTrack, { - backgroundSize: sliderBackgroundSize, - backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition, - isDisabled: disabled - }, React.createElement(StyledSliderTrackRail, _extends$t({}, trackProps, { - ref: trackRailRef - }), React.createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({ - 'aria-label': updatedMinValue - }), { - isDisabled: disabled, - position: minPosition, - ref: minThumbRef, - "data-garden-active": isLabelActive, - "data-garden-hover": isLabelHovered - })), React.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.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 + if (initMaxValue === void 0) { + initMaxValue = max; + } + const retVal = { + minValue: initMinValue < min ? min : initMinValue, + maxValue: initMaxValue > max ? max : initMaxValue }; - } - return React.createElement(StyledTile, _extends$t({ - ref: ref, - "aria-disabled": disabled, - isDisabled: disabled, - isSelected: tilesContext && tilesContext.value === value - }, props), children, React.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.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.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); + if (retVal.maxValue < min) { + retVal.maxValue = min; } - }, [ref]); - return React.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]; + if (retVal.minValue > retVal.maxValue) { + retVal.minValue = retVal.maxValue; } - setValue(args[0].target.value); - if (onChange) { - onChange(...args); + 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; } - }, [onChange]); - const selectedValue = getControlledValue$1(controlledValue, value); - const tileContext = reactExports.useMemo(() => ({ - onChange: handleOnChange, - value: selectedValue, - name, - isCentered - }), [handleOnChange, selectedValue, name, isCentered]); - return React.createElement(TilesContext.Provider, { - value: tileContext - }, React.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.forwardRef((_ref, ref) => { - let { - isCompact, - ...props - } = _ref; - const contextValue = reactExports.useMemo(() => ({ - isCompact - }), [isCompact]); - return React.createElement(InputGroupContext.Provider, { - value: contextValue - }, React.createElement(StyledInputGroup$1, _extends$t({ - ref: ref, - isCompact: isCompact - }, props))); -}); -InputGroup.displayName = 'InputGroup'; -InputGroup.propTypes = { - isCompact: PropTypes.bool -}; - -const FileUpload = React.forwardRef((_ref, ref) => { - let { - disabled, - ...props - } = _ref; - return ( - React.createElement(StyledFileUpload, _extends$t({ - ref: ref, - "aria-disabled": disabled - }, props, { - role: "button" - })) - ); + 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$3(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$2.RIGHT: + value = (thumb === 'min' ? position.minValue : position.maxValue) + (rtl ? -step : step); + break; + case KEYS$2.UP: + value = (thumb === 'min' ? position.minValue : position.maxValue) + step; + break; + case KEYS$2.LEFT: + value = (thumb === 'min' ? position.minValue : position.maxValue) - (rtl ? -step : step); + break; + case KEYS$2.DOWN: + value = (thumb === 'min' ? position.minValue : position.maxValue) - step; + break; + case KEYS$2.PAGE_UP: + value = (thumb === 'min' ? position.minValue : position.maxValue) + jump; + break; + case KEYS$2.PAGE_DOWN: + value = (thumb === 'min' ? position.minValue : position.maxValue) - jump; + break; + case KEYS$2.HOME: + value = min; + break; + case KEYS$2.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$3(onKeyDown, handleKeyDown), + onMouseDown: composeEventHandlers$3(onMouseDown, handleMouseDown), + onTouchStart: composeEventHandlers$3(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 }); -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.createElement(StyledFileListItem, _extends$t({}, props, { - ref: ref - })); -}); -ItemComponent.displayName = 'FileList.Item'; -const Item = ItemComponent; +/** + * 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 FileListComponent = reactExports.forwardRef((_ref, ref) => { - let { - ...props - } = _ref; - return React.createElement(StyledFileList, _extends$t({}, props, { - ref: ref - })); -}); -FileListComponent.displayName = 'FileList'; -const FileList = FileListComponent; -FileList.Item = Item; +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); +} -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$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" - }))); +const FieldContext$1 = reactExports.createContext(undefined); +const useFieldContext$1 = () => { + const fieldContext = reactExports.useContext(FieldContext$1); + return fieldContext; }; -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$3 = 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 COMPONENT_ID$K = 'forms.field'; +const StyledField$1 = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$K, + 'data-garden-version': '8.69.9' +}).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 CloseComponent$1 = React.forwardRef((props, ref) => { - const fileContext = useFileContext(); - const onMouseDown = composeEventHandlers$4(props.onMouseDown, event => event.preventDefault() - ); - const ariaLabel = useText(CloseComponent$1, props, 'aria-label', 'Close'); - return React.createElement(StyledFileClose, _extends$t({ - ref: ref, - "aria-label": ariaLabel - }, props, { - type: "button", - tabIndex: -1, - onMouseDown: onMouseDown - }), fileContext && fileContext.isCompact ? React.createElement(SvgXStroke$1$1, null) : React.createElement(SvgXStroke$3, null)); -}); -CloseComponent$1.displayName = 'File.Close'; -const Close$2 = 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" - }))); +const COMPONENT_ID$J = 'forms.fieldset'; +const StyledFieldset = styled(StyledField$1).attrs({ + as: 'fieldset', + 'data-garden-id': COMPONENT_ID$J, + 'data-garden-version': '8.69.9' +}).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 }; -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 COMPONENT_ID$I = 'forms.input_label'; +const StyledLabel$1 = styled.label.attrs(props => ({ + 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$I, + 'data-garden-version': props['data-garden-version'] || '8.69.9' +})).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 DeleteComponent = React.forwardRef((props, ref) => { - const fileContext = useFileContext(); - const onMouseDown = composeEventHandlers$4(props.onMouseDown, event => event.preventDefault() - ); - const ariaLabel = useText(DeleteComponent, props, 'aria-label', 'Delete'); - return React.createElement(StyledFileDelete, _extends$t({ - ref: ref, - "aria-label": ariaLabel - }, props, { - type: "button", - tabIndex: -1, - onMouseDown: onMouseDown - }), fileContext && fileContext.isCompact ? React.createElement(SvgTrashStroke$1, null) : React.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 - }))); +const COMPONENT_ID$H = 'forms.fieldset_legend'; +const StyledLegend = styled(StyledLabel$1).attrs({ + as: 'legend', + 'data-garden-id': COMPONENT_ID$H, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledLegend", + componentId: "sc-6s0zwq-0" +})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$H, props)); +StyledLegend.defaultProps = { + theme: DEFAULT_THEME }; -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" - }))); +const COMPONENT_ID$G = 'forms.input_hint'; +const StyledHint$1 = styled.div.attrs(props => ({ + 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$G, + 'data-garden-version': props['data-garden-version'] || '8.69.9' +})).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 _path$d, _circle$1$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({ +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: 12, - height: 12, + width: 16, + height: 16, focusable: "false", - viewBox: "0 0 12 12", + viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$d || (_path$d = /*#__PURE__*/reactExports.createElement("path", { + }, props), _g$2 || (_g$2 = /*#__PURE__*/reactExports.createElement("g", { fill: "none", - stroke: "currentColor", + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 8.5, + r: 7 + }), /*#__PURE__*/reactExports.createElement("path", { 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, + d: "M7.5 4.5V9" + }))), _circle$5 || (_circle$5 = /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 12, 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({ +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: 12, - height: 12, + width: 16, + height: 16, focusable: "false", - viewBox: "0 0 12 12", + viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$c || (_path$c = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$n || (_path$n = /*#__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" + 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 _path$b; -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 = function SvgFileSpreadsheetStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$c$1({ +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: 12, - height: 12, + width: 16, + height: 16, focusable: "false", - viewBox: "0 0 12 12", + viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$b || (_path$b = /*#__PURE__*/reactExports.createElement("path", { + }, props), _g$1 || (_g$1 = /*#__PURE__*/reactExports.createElement("g", { fill: "none", - stroke: "currentColor", + stroke: "currentColor" + }, /*#__PURE__*/reactExports.createElement("path", { 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" - }))); + strokeLinejoin: "round", + d: "M4 9l2.5 2.5 5-5" + }), /*#__PURE__*/reactExports.createElement("circle", { + cx: 7.5, + cy: 8.5, + r: 7 + })))); }; -var _path$a; -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 = 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 || (_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" - }))); +const MessageIcon = _ref => { + let { + children, + validation, + ...props + } = _ref; + let retVal; + if (validation === 'error') { + retVal = React.createElement(SvgAlertErrorStroke, props); + } else if (validation === 'success') { + retVal = React.createElement(SvgCheckCircleStroke$1, props); + } else if (validation === 'warning') { + retVal = React.createElement(SvgAlertWarningStroke, props); + } else { + retVal = React.cloneElement(reactExports.Children.only(children)); + } + return retVal; }; - -var _path$9; -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 = 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 || (_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" - }))); +const COMPONENT_ID$F = 'forms.input_message_icon'; +const StyledMessageIcon = styled(MessageIcon).attrs({ + 'data-garden-id': COMPONENT_ID$F, + 'data-garden-version': '8.69.9', + '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 }; -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 - })))); +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); }; - -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" - }))); +const COMPONENT_ID$E = 'forms.input_message'; +const StyledMessage$1 = styled.div.attrs(props => ({ + 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E, + 'data-garden-version': props['data-garden-version'] || '8.69.9' +})).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 }; -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 - }))); +const COMPONENT_ID$D = 'forms.input'; +const isInvalid = validation => { + return validation === 'warning' || validation === 'error'; }; - -var _path$6$1; -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$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" - }))); +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); }; - -var _path$5$1, _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 = 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$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$6 || (_circle$6 = /*#__PURE__*/reactExports.createElement("circle", { - cx: 10.5, - cy: 8.5, - r: 1.5, - fill: "currentColor" - }))); +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 = styled.input.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$D, + 'data-garden-version': '8.69.9', + '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 }; -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 = 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" - }))); +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 = styled(StyledTextInput).attrs({ + as: 'textarea', + 'data-garden-id': COMPONENT_ID$C, + 'data-garden-version': '8.69.9' +}).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 }; -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 = 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" - }))); +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)); }; - -var _path$2$2; -function _extends$2$4() { _extends$2$4 = 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$4.apply(this, arguments); } -var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$2$4({ - 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" - }))); +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 = styled( +_ref => { + let { + children, + position, + isHovered, + isFocused, + isDisabled, + isRotated, + theme, + ...props + } = _ref; + return React.cloneElement(reactExports.Children.only(children), props); +}).attrs({ + 'data-garden-id': COMPONENT_ID$B, + 'data-garden-version': '8.69.9' +}).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 }; -var _path$1$4; -function _extends$1$5() { _extends$1$5 = 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$5.apply(this, arguments); } -var SvgFileGenericStroke = function SvgFileGenericStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$1$5({ - xmlns: "http://www.w3.org/2000/svg", - width: 16, - height: 16, - focusable: "false", - viewBox: "0 0 16 16", - "aria-hidden": "true" - }, props), _path$1$4 || (_path$1$4 = /*#__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" - }))); +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 = styled(StyledTextInput).attrs(props => ({ + as: 'div', + 'aria-readonly': props.isReadOnly, + 'aria-disabled': props.isDisabled, + 'data-garden-id': COMPONENT_ID$A, + 'data-garden-version': '8.69.9' +})).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 }; -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 COMPONENT_ID$z = 'forms.media_input'; +const StyledTextMediaInput = styled(StyledTextInput).attrs({ + 'data-garden-id': COMPONENT_ID$z, + 'data-garden-version': '8.69.9', + isBare: true +}).withConfig({ + displayName: "StyledTextMediaInput", + componentId: "sc-12i9xfi-0" +})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$z, props)); +StyledTextMediaInput.defaultProps = { + theme: DEFAULT_THEME }; -const fileIconsDefault = { - pdf: React.createElement(SvgFilePdfStroke, null), - zip: React.createElement(SvgFileZipStroke, null), - image: React.createElement(SvgFileImageStroke, null), - document: React.createElement(SvgFileDocumentStroke, null), - spreadsheet: React.createElement(SvgFileSpreadsheetStroke, null), - presentation: React.createElement(SvgFilePresentationStroke, null), - generic: React.createElement(SvgFileGenericStroke, null), - success: React.createElement(SvgCheckCircleStroke$1, null), - error: React.createElement(SvgFileErrorStroke, null) +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 fileIconsCompact = { - pdf: React.createElement(SvgFilePdfStroke$1, null), - zip: React.createElement(SvgFileZipStroke$1, null), - image: React.createElement(SvgFileImageStroke$1, null), - document: React.createElement(SvgFileDocumentStroke$1, null), - spreadsheet: React.createElement(SvgFileSpreadsheetStroke$1, null), - presentation: React.createElement(SvgFilePresentationStroke$1, null), - generic: React.createElement(SvgFileGenericStroke$1, null), - success: React.createElement(SvgCheckCircleStroke$2, null), - error: React.createElement(SvgFileErrorStroke$1, null) +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 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.createElement(FileContext.Provider, { - value: fileContextValue - }, React.createElement(StyledFile, _extends$t({}, props, { - isCompact: isCompact, - focusInset: focusInset, - validation: validation, - ref: ref - }), validationType && React.createElement(StyledFileIcon, { - isCompact: isCompact - }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), reactExports.Children.map(children, child => typeof child === 'string' ? React.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 StyledInputGroup$1 = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$y, + 'data-garden-version': '8.69.9' +}).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 File = FileComponent; -File.Close = Close$2; -File.Delete = Delete; -const MediaInput = React.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$4(onClick, () => { - inputRef.current && inputRef.current.focus(); - }); - const onFauxInputFocusHandler = composeEventHandlers$4(onFocus, () => { - setIsFocused(true); - }); - const onFauxInputBlurHandler = composeEventHandlers$4(onBlur, () => { - setIsFocused(false); - }); - const onFauxInputMouseOverHandler = composeEventHandlers$4(onMouseOver, () => { - setIsHovered(true); - }); - const onFauxInputMouseOutHandler = composeEventHandlers$4(onMouseOut, () => { - setIsHovered(false); - }); - const onSelectHandler = readOnly ? composeEventHandlers$4(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.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.createElement(FauxInput.StartIcon, { - isDisabled: disabled, - isFocused: isFocused, - isHovered: isHovered || isLabelHovered - }, start), React.createElement(StyledTextMediaInput, combinedProps), end && React.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 +const COMPONENT_ID$x$1 = '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 = styled(StyledLabel$1).attrs({ + 'data-garden-id': COMPONENT_ID$x$1, + 'data-garden-version': '8.69.9', + 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$1, props)); +StyledRadioLabel.defaultProps = { + theme: DEFAULT_THEME }; -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 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; - }); - }; -} -const KEYS$2 = { - 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' +const COMPONENT_ID$w$1 = 'forms.checkbox_label'; +const StyledCheckLabel = styled(StyledRadioLabel).attrs({ + 'data-garden-id': COMPONENT_ID$w$1, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledCheckLabel", + componentId: "sc-x7nr1-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$w$1, props)); +StyledCheckLabel.defaultProps = { + theme: DEFAULT_THEME }; -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 = {})); +const COMPONENT_ID$v$1 = 'forms.radio_hint'; +const StyledRadioHint = styled(StyledHint$1).attrs({ + 'data-garden-id': COMPONENT_ID$v$1, + 'data-garden-version': '8.69.9' +}).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 +}; -let idCounter$1 = 0; -const useId = id => useId$1(id) || `id:${idCounter$1++}`; +const COMPONENT_ID$u$1 = 'forms.checkbox_hint'; +const StyledCheckHint = styled(StyledRadioHint).attrs({ + 'data-garden-id': COMPONENT_ID$u$1, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledCheckHint", + componentId: "sc-1kl8e8c-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$u$1, props)); +StyledCheckHint.defaultProps = { + theme: DEFAULT_THEME +}; -/** - * 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 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 = styled.input.attrs({ + 'data-garden-id': COMPONENT_ID$t$1, + 'data-garden-version': '8.69.9', + 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 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.9', - 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.9', - 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.9', - 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.9', - role: role === null ? undefined : role, - id, - ...other - }; - }, [messageId]); - return reactExports.useMemo(() => ({ - getLabelProps, - getHintProps, - getInputProps, - getMessageProps - }), [getLabelProps, getHintProps, getInputProps, getMessageProps]); +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 = styled(StyledRadioInput).attrs({ + 'data-garden-id': COMPONENT_ID$s$1, + 'data-garden-version': '8.69.9', + 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 }; -({ - 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; -} +const COMPONENT_ID$r$1 = 'forms.radio_message'; +const StyledRadioMessage = styled(StyledMessage$1).attrs({ + 'data-garden-id': COMPONENT_ID$r$1, + 'data-garden-version': '8.69.9' +}).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 +}; -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}; +const COMPONENT_ID$q$1 = 'forms.checkbox_message'; +const StyledCheckMessage = styled(StyledRadioMessage).attrs({ + 'data-garden-id': COMPONENT_ID$q$1, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledCheckMessage", + componentId: "sc-s4p6kd-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$q$1, props)); +StyledCheckMessage.defaultProps = { + theme: DEFAULT_THEME +}; -/*! ***************************************************************************** -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 _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" + }))); }; -var idCounter = 0; -function noop() {} +const COMPONENT_ID$p$1 = 'forms.check_svg'; +const StyledCheckSvg = styled(SvgCheckSmFill).attrs({ + 'data-garden-id': COMPONENT_ID$p$1, + 'data-garden-version': '8.69.9' +}).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 +}; -/** - * 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; - }); -} +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" + }))); +}; -/** - * @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; -} +const COMPONENT_ID$o$1 = 'forms.dash_svg'; +const StyledDashSvg = styled(SvgDashFill).attrs({ + 'data-garden-id': COMPONENT_ID$o$1, + 'data-garden-version': '8.69.9' +}).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 +}; -/** - * 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); - } +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 = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$n$1, + 'data-garden-version': '8.69.9' +}).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 = styled.button.attrs({ + 'data-garden-id': COMPONENT_ID$m$1, + 'data-garden-version': '8.69.9' +}).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; } - function wrapper() { - for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; + return Ne(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({ + theme: props.theme, + inset: props.focusInset, + hue: focusBorderColor, + styles: { + borderColor: focusBorderColor } - cancel(); - timeoutId = setTimeout(function () { - timeoutId = null; - fn.apply(void 0, args); - }, time); - } - wrapper.cancel = cancel; - return wrapper; -} + })); +}; +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}; -/** - * 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]; + & > span { + width: 100%; } - 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++); -} + & > ${StyledFileClose} { + width: ${size}; + height: ${size}; + margin-${props.theme.rtl ? 'left' : 'right'}: -${spacing}; + } + `; +}; +const StyledFile = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$l$1, + 'data-garden-version': '8.69.9' +}).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 +}; -/** - * 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 ''; -} +const COMPONENT_ID$k$1 = 'forms.file.delete'; +const StyledFileDelete = styled(StyledFileClose).attrs({ + 'data-garden-id': COMPONENT_ID$k$1, + 'data-garden-version': '8.69.9' +}).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 +}; -/** - * 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; - }, {}); -} +const COMPONENT_ID$j$1 = 'forms.file.icon'; +const StyledFileIcon = styled(_ref => { + let { + children, + isCompact, + theme, + ...props + } = _ref; + return React.cloneElement(reactExports.Children.only(children), props); +}).attrs({ + 'data-garden-id': COMPONENT_ID$j$1, + 'data-garden-version': '8.69.9' +}).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 +}; -/** - * 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; -} +const COMPONENT_ID$i$1 = 'forms.file_list'; +const StyledFileList = styled.ul.attrs({ + 'data-garden-id': COMPONENT_ID$i$1, + 'data-garden-version': '8.69.9' +}).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 +}; -/** - * 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 next non-disabled highlightedIndex value. - * - * @param {number} start The current highlightedIndex. - * @param {number} offset The offset from the current highlightedIndex to start searching. - * @param {unknown[]} items The items array. - * @param {(item: unknown, index: number) => boolean} isItemDisabled Function that tells if an item is disabled or not. - * @param {boolean?} circular If the search reaches the end, if it can search again starting from the other end. - * @returns {number} The next highlightedIndex. - */ -function getHighlightedIndex(start, offset, items, isItemDisabled, circular) { - if (circular === void 0) { - circular = false; - } - var count = items.length; - if (count === 0) { - return -1; - } - var itemsLastIndex = count - 1; - if (typeof start !== 'number' || start < 0 || start > itemsLastIndex) { - start = offset > 0 ? -1 : itemsLastIndex + 1; - } - var current = start + offset; - if (current < 0) { - current = circular ? itemsLastIndex : 0; - } else if (current > itemsLastIndex) { - current = circular ? 0 : itemsLastIndex; - } - var highlightedIndex = getNonDisabledIndex(current, offset < 0, items, isItemDisabled, circular); - if (highlightedIndex === -1) { - return start >= count ? -1 : start; - } - return highlightedIndex; -} +const COMPONENT_ID$h$1 = 'forms.file_list.item'; +const StyledFileListItem = styled.li.attrs({ + 'data-garden-id': COMPONENT_ID$h$1, + 'data-garden-version': '8.69.9' +}).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 +}; -/** - * Returns the next non-disabled highlightedIndex value. - * - * @param {number} start The current highlightedIndex. - * @param {boolean} backwards If true, it will search backwards from the start. - * @param {unknown[]} items The items array. - * @param {(item: unknown, index: number) => boolean} isItemDisabled Function that tells if an item is disabled or not. - * @param {boolean} circular If the search reaches the end, if it can search again starting from the other end. - * @returns {number} The next non-disabled index. - */ -function getNonDisabledIndex(start, backwards, items, isItemDisabled, circular) { - if (circular === void 0) { - circular = false; - } - var count = items.length; - if (backwards) { - for (var index = start; index >= 0; index--) { - if (!isItemDisabled(items[index], index)) { - return index; - } - } - } else { - for (var _index = start; _index < count; _index++) { - if (!isItemDisabled(items[_index], _index)) { - return _index; - } - } - } - if (circular) { - return getNonDisabledIndex(backwards ? count - 1 : 0, backwards, items, isItemDisabled); - } - return -1; -} +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" + }))); +}; -/** - * 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)); - }); -} +const COMPONENT_ID$g$1 = 'forms.radio_svg'; +const StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({ + 'data-garden-id': COMPONENT_ID$g$1, + 'data-garden-version': '8.69.9' +}).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 +}; -var cleanupStatus = debounce$1(function (documentProp) { - getStatusDiv(documentProp).textContent = ''; -}, 500); +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 = styled(StyledCheckLabel).attrs({ + 'data-garden-id': COMPONENT_ID$f$1, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledToggleLabel", + componentId: "sc-e0asdk-0" +})(["", ";", ";"], props => sizeStyles$9$1(props), props => retrieveComponentStyles(COMPONENT_ID$f$1, props)); +StyledToggleLabel.defaultProps = { + theme: DEFAULT_THEME +}; -/** - * @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); -} +const COMPONENT_ID$e$1 = 'forms.toggle_hint'; +const StyledToggleHint = styled(StyledHint$1).attrs({ + 'data-garden-id': COMPONENT_ID$e$1, + 'data-garden-version': '8.69.9' +}).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 +}; -/** - * 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; -} +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 = styled(StyledCheckInput).attrs({ + 'data-garden-id': COMPONENT_ID$d$1, + 'data-garden-version': '8.69.9' +}).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 +}; -var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"]; -var dropdownDefaultStateValues = { - highlightedIndex: -1, - isOpen: false, - selectedItem: null, - inputValue: '' +const COMPONENT_ID$c$2 = 'forms.toggle_message'; +const StyledToggleMessage = styled(StyledMessage$1).attrs({ + 'data-garden-id': COMPONENT_ID$c$2, + 'data-garden-version': '8.69.9' +}).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$2, props)); +StyledToggleMessage.defaultProps = { + theme: DEFAULT_THEME }; -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$w({ - 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$w({ - 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$1(s, a) { - return a.changes; -} +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" + }))); +}; -/** - * 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." : ''; -} +const COMPONENT_ID$b$2 = 'forms.toggle_svg'; +const StyledToggleSvg = styled(SvgCircleSmFill).attrs({ + 'data-garden-id': COMPONENT_ID$b$2, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledToggleSvg", + componentId: "sc-162xbyx-0" +})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b$2, props)); +StyledToggleSvg.defaultProps = { + theme: DEFAULT_THEME +}; -/** - * Debounced call for updating the a11y message. - */ -var updateA11yStatus = debounce$1(function (getA11yMessage, document) { - setStatus(getA11yMessage(), document); -}, 200); +const COMPONENT_ID$a$2 = '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 = styled(StyledTextInput).attrs({ + 'data-garden-id': COMPONENT_ID$a$2, + 'data-garden-version': '8.69.9', + 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 +}; -// istanbul ignore next -var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? reactExports.useLayoutEffect : reactExports.useEffect; +const COMPONENT_ID$9$2 = 'forms.select_wrapper'; +const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({ + 'data-garden-id': COMPONENT_ID$9$2, + 'data-garden-version': '8.69.9' +}).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 +}; -// istanbul ignore next -var useElementIds = 'useId' in React // Avoid conditional useId call -? function useElementIds(_ref) { - var id = _ref.id, - labelId = _ref.labelId, - menuId = _ref.menuId, - getItemId = _ref.getItemId, - toggleButtonId = _ref.toggleButtonId, - inputId = _ref.inputId; - // Avoid conditional useId call - var reactId = "downshift-" + React.useId(); - if (!id) { - id = reactId; - } - 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 useElementIds(_ref2) { - var _ref2$id = _ref2.id, - id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id, - labelId = _ref2.labelId, - menuId = _ref2.menuId, - getItemId = _ref2.getItemId, - toggleButtonId = _ref2.toggleButtonId, - inputId = _ref2.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; +const COMPONENT_ID$8$2 = '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} + } + `; }; -function getItemAndIndex(itemProp, indexProp, items, errorMessage) { - var item, index; - if (itemProp === undefined) { - if (indexProp === undefined) { - throw new Error(errorMessage); +const trackStyles = function (styles) { + let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return ` + &${modifier}::-moz-range-track { + ${styles} } - 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$w({}, 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$w({ - 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); + &${modifier}::-ms-track { + ${styles} } - prevStateRef.current = state; - }, [state, props, action]); - return [state, dispatchWithProps]; -} -var defaultProps$3 = { - itemToString: itemToString, - stateReducer: stateReducer$1, - getA11ySelectionMessage: getA11ySelectionMessage, - scrollIntoView: scrollIntoView, - environment: /* istanbul ignore next (ssr) */ - typeof window === 'undefined' ? {} : window + + &${modifier}::-webkit-slider-runnable-track { + ${styles} + } + `; }; -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; +const trackLowerStyles = function (styles) { + let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return ` + &${modifier}::-moz-range-progress { + ${styles} } - // 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); + &${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 = styled.input.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$8$2, + 'data-garden-version': '8.69.9', + 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$2, props)); +StyledRangeInput.defaultProps = { + backgroundSize: '0%', + hasLowerTrack: true, + theme: DEFAULT_THEME +}; - // 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; -} +const COMPONENT_ID$7$2 = 'forms.slider'; +const StyledSlider = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$7$2, + 'data-garden-version': '8.69.9' +}).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$2, props)); +StyledSlider.defaultProps = { + theme: DEFAULT_THEME +}; -/* istanbul ignore next */ -// eslint-disable-next-line import/no-mutable-exports -var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() { - return noop; +const COMPONENT_ID$6$2 = '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 = styled.div.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$6$2, + 'data-garden-version': '8.69.9', + '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$2, props)); +StyledSliderThumb.defaultProps = { + position: 0, + theme: DEFAULT_THEME }; -function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) { - var isInitialMount = _ref3.isInitialMount, - highlightedIndex = _ref3.highlightedIndex, - items = _ref3.items, - environment = _ref3.environment, - rest = _objectWithoutPropertiesLoose(_ref3, _excluded$3); - // Sets a11y status message on changes in state. - reactExports.useEffect(function () { - if (isInitialMount || false) { - return; - } - updateA11yStatus(function () { - return getA11yMessage(_extends$w({ - highlightedIndex: highlightedIndex, - highlightedItem: items[highlightedIndex], - resultCount: items.length - }, rest)); - }, environment.document); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, dependencyArray); -} -function useScrollIntoView(_ref4) { - var highlightedIndex = _ref4.highlightedIndex, - isOpen = _ref4.isOpen, - itemRefs = _ref4.itemRefs, - getItemNodeFromIndex = _ref4.getItemNodeFromIndex, - menuElement = _ref4.menuElement, - scrollIntoViewProp = _ref4.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; +const COMPONENT_ID$5$3 = '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 = styled.div.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$5$3, + 'data-garden-version': '8.69.9', + '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$3, props)); +StyledSliderTrack.defaultProps = { + backgroundSize: 0, + backgroundPosition: 0, + theme: DEFAULT_THEME +}; -/** - * 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; +const COMPONENT_ID$4$3 = '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 = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID$4$3, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledSliderTrackRail", + componentId: "sc-1o5owbd-0" +})(["position:relative;", ";", ";"], props => sizeStyles$3$1(props), props => retrieveComponentStyles(COMPONENT_ID$4$3, props)); +StyledSliderTrackRail.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$3$3 = '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`; + } } - var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0; - return _extends$w({ - isOpen: false, - highlightedIndex: -1 - }, shouldSelect && _extends$w({ - selectedItem: props.items[highlightedIndex], - isOpen: getDefaultValue$1(props, 'isOpen'), - highlightedIndex: getDefaultValue$1(props, 'highlightedIndex') - }, inputValue && { - inputValue: props.itemToString(props.items[highlightedIndex]) - })); -} + return Ne(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize); +}; +const StyledTileIcon = styled.span.attrs({ + 'data-garden-id': COMPONENT_ID$3$3, + 'data-garden-version': '8.69.9' +}).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$3, props)); +StyledTileIcon.defaultProps = { + theme: DEFAULT_THEME +}; -// Shared between all exports. -var commonPropTypes = { - environment: PropTypes.shape({ - addEventListener: PropTypes.func.isRequired, - removeEventListener: PropTypes.func.isRequired, - document: PropTypes.shape({ - createElement: PropTypes.func.isRequired, - getElementById: PropTypes.func.isRequired, - activeElement: PropTypes.any.isRequired, - body: PropTypes.any.isRequired - }).isRequired, - Node: PropTypes.func.isRequired - }), - itemToString: PropTypes.func, - stateReducer: PropTypes.func +const COMPONENT_ID$2$5 = '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 = styled.label.attrs(props => ({ + 'data-garden-id': COMPONENT_ID$2$5, + 'data-garden-version': '8.69.9', + '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$5, props)); +StyledTile.defaultProps = { + theme: DEFAULT_THEME }; -// Shared between useSelect, useCombobox, Downshift. -var commonDropdownPropTypes = _extends$w({}, commonPropTypes, { - getA11yStatusMessage: 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, - onSelectedItemChange: PropTypes.func, - onHighlightedIndexChange: PropTypes.func, - onStateChange: PropTypes.func, - onIsOpenChange: PropTypes.func, - scrollIntoView: PropTypes.func -}); +const COMPONENT_ID$1$5 = '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 = styled.span.attrs({ + 'data-garden-id': COMPONENT_ID$1$5, + 'data-garden-version': '8.69.9' +}).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$5, props)); +StyledTileDescription.defaultProps = { + theme: DEFAULT_THEME +}; -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.'); +const StyledTileInput = styled.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'; } - return _extends$w({}, state, changes); -} -// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -__assign(__assign({}, commonDropdownPropTypes), { items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func, getA11ySelectionMessage: PropTypes.func }); -/** - * 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, isItemDisabled: function () { - return false; - } }); + 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 = styled.span.attrs({ + 'data-garden-id': COMPONENT_ID$L, + 'data-garden-version': '8.69.9' +}).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 +}; -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 InputClick = 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; +const Field$1 = React.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.createElement(FieldContext$1.Provider, { + value: fieldProps + }, React.createElement(StyledField$1, _extends$t({}, props, { + ref: ref + }))); +}); +Field$1.displayName = 'Field'; -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, - InputClick: InputClick, - 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 +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.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, { + ref: ref + })); }); +LegendComponent.displayName = 'Fieldset.Legend'; +const Legend = LegendComponent; -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$w({}, initialState, { - inputValue: inputValue - }); -} -_extends$w({}, commonDropdownPropTypes, { - items: PropTypes.array.isRequired, - isItemDisabled: PropTypes.func, - selectedItemChanged: PropTypes.func, - getA11ySelectionMessage: PropTypes.func, - inputValue: PropTypes.string, - defaultInputValue: PropTypes.string, - initialInputValue: PropTypes.string, - inputId: PropTypes.string, - onInputValueChange: PropTypes.func +const FieldsetComponent = reactExports.forwardRef((props, ref) => { + const fieldsetContext = reactExports.useMemo(() => ({ + isCompact: props.isCompact + }), [props.isCompact]); + return React.createElement(FieldsetContext.Provider, { + value: fieldsetContext + }, React.createElement(StyledFieldset, _extends$t({}, props, { + ref: ref + }))); }); +FieldsetComponent.displayName = 'Fieldset'; +FieldsetComponent.propTypes = { + isCompact: PropTypes.bool +}; +const Fieldset = FieldsetComponent; +Fieldset.Legend = Legend; -/** - * 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]; +const InputContext = reactExports.createContext(undefined); +const useInputContext = () => { + return reactExports.useContext(InputContext); +}; - // ToDo: if needed, make same approach as selectedItemChanged from Downshift. - reactExports.useEffect(function () { - if (!isControlledProp(props, 'selectedItem')) { - return; +const Hint$1 = React.forwardRef((props, ref) => { + const { + hasHint, + setHasHint, + getHintProps + } = useFieldContext$1() || {}; + const type = useInputContext(); + reactExports.useEffect(() => { + if (!hasHint && setHasHint) { + setHasHint(true); } - 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]; -} -var defaultProps$1 = _extends$w({}, defaultProps$3, { - selectedItemChanged: function selectedItemChanged(prevItem, item) { - return prevItem !== item; - }, - getA11yStatusMessage: getA11yStatusMessage$1, - isItemDisabled: function isItemDisabled() { - return false; + 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.createElement(HintComponent, _extends$t({ + ref: ref + }, combinedProps)); }); +Hint$1.displayName = 'Hint'; -/* 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]) +const Label$1 = React.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$5(props.onMouseUp, () => { + setIsLabelActive(false); + }), + onMouseDown: composeEventHandlers$5(props.onMouseDown, () => { + setIsLabelActive(true); + }), + onMouseEnter: composeEventHandlers$5(props.onMouseEnter, () => { + setIsLabelHovered(true); + }), + onMouseLeave: composeEventHandlers$5(props.onMouseLeave, () => { + setIsLabelHovered(false); + }), + onClick: composeEventHandlers$5(props.onClick, () => { + multiThumbRangeRef.current && multiThumbRangeRef.current.focus(); + }) }; - break; - case InputKeyDownArrowDown: - if (state.isOpen) { - changes = { - highlightedIndex: getHighlightedIndex(state.highlightedIndex, 1, props.items, props.isItemDisabled, true) - }; - } else { - changes = { - highlightedIndex: altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1), - isOpen: props.items.length >= 0 - }; - } - break; - case InputKeyDownArrowUp: - if (state.isOpen) { - if (altKey) { - changes = getChangesOnSelection(props, state.highlightedIndex); - } else { - changes = { - highlightedIndex: getHighlightedIndex(state.highlightedIndex, -1, props.items, props.isItemDisabled, true) - }; + } + } + if (fieldsetContext) { + combinedProps = { + ...combinedProps, + isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular + }; + } + if (type === 'radio') { + return React.createElement(StyledRadioLabel, _extends$t({ + ref: ref + }, combinedProps), React.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(); } - } else { - changes = { - highlightedIndex: getHighlightedIndexOnOpen(props, state, -1), - isOpen: props.items.length >= 0 - }; } - break; - case InputKeyDownEnter: - changes = getChangesOnSelection(props, state.highlightedIndex); - break; - case InputKeyDownEscape: - changes = _extends$w({ - isOpen: false, - highlightedIndex: -1 - }, !state.isOpen && { - selectedItem: null, - inputValue: '' - }); - break; - case InputKeyDownPageUp: - changes = { - highlightedIndex: getHighlightedIndex(state.highlightedIndex, -10, props.items, props.isItemDisabled, true) - }; - break; - case InputKeyDownPageDown: - changes = { - highlightedIndex: getHighlightedIndex(state.highlightedIndex, 10, props.items, props.isItemDisabled, true) - }; - break; - case InputKeyDownHome: - changes = { - highlightedIndex: getNonDisabledIndex(0, false, props.items, props.isItemDisabled) - }; - break; - case InputKeyDownEnd: - changes = { - highlightedIndex: getNonDisabledIndex(props.items.length - 1, true, props.items, props.isItemDisabled) - }; - break; - case InputBlur: - changes = _extends$w({ - 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 InputClick: - changes = { - isOpen: !state.isOpen, - highlightedIndex: state.isOpen ? -1 : 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); + }; + combinedProps = { + ...combinedProps, + onClick: composeEventHandlers$5(combinedProps.onClick, onLabelSelect) + }; + return React.createElement(StyledCheckLabel, _extends$t({ + ref: ref + }, combinedProps), React.createElement(StyledCheckSvg, null), React.createElement(StyledDashSvg, null), props.children); + } else if (type === 'toggle') { + return React.createElement(StyledToggleLabel, _extends$t({ + ref: ref + }, combinedProps), React.createElement(StyledToggleSvg, null), props.children); } - return _extends$w({}, state, changes); -} -/* eslint-enable complexity */ + return React.createElement(StyledLabel$1, _extends$t({ + ref: ref + }, combinedProps)); +}); +Label$1.displayName = 'Label'; +Label$1.propTypes = { + isRegular: PropTypes.bool +}; -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", "onBlur", "onChangeText", "onClick", "refKey", "ref"]; -useCombobox$1.stateChangeTypes = stateChangeTypes$1; -function useCombobox$1(userProps) { - if (userProps === void 0) { - userProps = {}; - } - // Props defaults and destructuring. - var props = _extends$w({}, defaultProps$1, userProps); - var 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; +const VALIDATION = ['success', 'warning', 'error']; +const FILE_VALIDATION = ['success', 'error']; +const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic']; - // 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$w({ - 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$w({ - 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 = getInitialValue$1(props, 'isOpen'); - if (focusOnOpen && inputRef.current) { - inputRef.current.focus(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - reactExports.useEffect(function () { - if (isInitialMountRef.current) { - return; +const Message$1 = React.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); } - 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; + return () => { + if (hasMessage && setHasMessage) { + setHasMessage(false); + } }; - }, []); - // 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 || (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus(); - } - }, [isOpen, environment]); + }, [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.createElement(MessageComponent, _extends$t({ + ref: ref + }, combinedProps), validation && React.createElement(StyledMessageIcon, { + validation: validation, + "aria-label": ariaLabel + }), children); +}); +Message$1.displayName = 'Message'; +Message$1.propTypes = { + validation: PropTypes.oneOf(VALIDATION), + validationLabel: PropTypes.string +}; - /* Event handler functions */ - var inputKeyDownHandlers = reactExports.useMemo(function () { - return { - ArrowDown: function ArrowDown(event) { - event.preventDefault(); - dispatch({ - type: InputKeyDownArrowDown, - altKey: event.altKey - }); - }, - ArrowUp: function ArrowUp(event) { - event.preventDefault(); - dispatch({ - type: InputKeyDownArrowUp, - altKey: event.altKey - }); - }, - Home: function Home(event) { - if (!latest.current.state.isOpen) { - return; - } - event.preventDefault(); - dispatch({ - type: InputKeyDownHome - }); - }, - End: function End(event) { - if (!latest.current.state.isOpen) { - return; - } - event.preventDefault(); - dispatch({ - type: InputKeyDownEnd - }); - }, - 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 - }); - }, - PageUp: function PageUp(event) { - if (latest.current.state.isOpen) { - event.preventDefault(); - dispatch({ - type: InputKeyDownPageUp - }); - } - }, - PageDown: function PageDown(event) { - if (latest.current.state.isOpen) { - event.preventDefault(); - dispatch({ - type: InputKeyDownPageDown - }); +const Checkbox = React.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; } } - }; - }, [dispatch, latest]); + }); + }; + let combinedProps = { + ref: combinedRef, + ...props, + ...fieldsetContext + }; + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React.createElement(InputContext.Provider, { + value: "checkbox" + }, React.createElement(StyledCheckInput, combinedProps), children); +}); +Checkbox.displayName = 'Checkbox'; +Checkbox.propTypes = { + isCompact: PropTypes.bool, + indeterminate: PropTypes.bool +}; - // Getter props. - var getLabelProps = reactExports.useCallback(function (labelProps) { - return _extends$w({ - 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$w((_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 disabledProp = _ref3.disabled, - rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$1); - if (disabledProp !== undefined) { - console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useCombobox.'); - } - 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!'), - item = _getItemAndIndex[0], - index = _getItemAndIndex[1]; - var disabled = latestProps.isItemDisabled(item, index); - 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$w((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) { - if (itemNode) { - itemRefs.current[elementIds.getItemId(index)] = itemNode; - } - }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _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$w((_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$w({}, { - 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, - onBlur = _ref6.onBlur; - _ref6.onChangeText; - var onClick = _ref6.onClick, - _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) { - var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body; - dispatch({ - type: InputBlur, - selectItem: !isBlurByTabChange - }); - } - }; - var inputHandleClick = function inputHandleClick() { - dispatch({ - type: InputClick - }); - }; - - /* 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.onClick = callAllEventHandlers(onClick, inputHandleClick), _eventHandlers); - } - return _extends$w((_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); - }, [setGetterPropCallInfo, latest, elementIds, inputKeyDownHandlers, dispatch, mouseAndTouchTrackersRef, environment]); +const InputGroupContext = reactExports.createContext(undefined); +const useInputGroupContext = () => { + return reactExports.useContext(InputGroupContext); +}; - // 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 +const Input = React.forwardRef((_ref, ref) => { + let { + onSelect, + ...props + } = _ref; + const fieldContext = useFieldContext$1(); + const inputGroupContext = useInputGroupContext(); + const onSelectHandler = props.readOnly ? composeEventHandlers$5(onSelect, event => { + event.currentTarget.select(); + }) : onSelect; + let combinedProps = { + ref, + onSelect: onSelectHandler, + ...props }; -} - -/** - * 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."; -} -_extends$w({}, commonPropTypes, { - selectedItems: PropTypes.array, - initialSelectedItems: PropTypes.array, - defaultSelectedItems: PropTypes.array, - getA11yRemovalMessage: PropTypes.func, - activeIndex: PropTypes.number, - initialActiveIndex: PropTypes.number, - defaultActiveIndex: PropTypes.number, - onActiveIndexChange: PropTypes.func, - onSelectedItemsChange: PropTypes.func, - keyNavigationNext: PropTypes.string, - keyNavigationPrevious: PropTypes.string -}); -({ - itemToString: defaultProps$3.itemToString, - stateReducer: defaultProps$3.stateReducer, - environment: defaultProps$3.environment, - getA11yRemovalMessage: getA11yRemovalMessage, - keyNavigationNext: 'ArrowRight', - keyNavigationPrevious: 'ArrowLeft' + if (inputGroupContext) { + combinedProps = { + ...combinedProps, + isCompact: inputGroupContext.isCompact || combinedProps.isCompact, + focusInset: props.focusInset === undefined ? true : props.focusInset + }; + } + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + return React.createElement(StyledTextInput, combinedProps); }); +Input.propTypes = { + isCompact: PropTypes.bool, + isBare: PropTypes.bool, + focusInset: PropTypes.bool, + validation: PropTypes.oneOf(VALIDATION) +}; +Input.displayName = 'Input'; -/** - * 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.InputClick]: 'input:click', - [useCombobox$1.stateChangeTypes.InputKeyDownArrowDown]: `input:keyDown:${KEYS$2.DOWN}`, - [useCombobox$1.stateChangeTypes.InputKeyDownArrowUp]: `input:keyDown:${KEYS$2.UP}`, - [useCombobox$1.stateChangeTypes.InputKeyDownEnd]: `input:keyDown:${KEYS$2.END}`, - [useCombobox$1.stateChangeTypes.InputKeyDownEnter]: `input:keyDown:${KEYS$2.ENTER}`, - [useCombobox$1.stateChangeTypes.InputKeyDownEscape]: `input:keyDown:${KEYS$2.ESCAPE}`, - [useCombobox$1.stateChangeTypes.InputKeyDownHome]: `input:keyDown:${KEYS$2.HOME}`, - [useCombobox$1.stateChangeTypes.InputKeyDownPageDown]: `input:keyDown:${KEYS$2.PAGE_DOWN}`, - [useCombobox$1.stateChangeTypes.InputKeyDownPageUp]: `input:keyDown:${KEYS$2.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 Radio = React.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.createElement(InputContext.Provider, { + value: "radio" + }, React.createElement(StyledRadioInput, combinedProps), children); +}); +Radio.displayName = 'Radio'; +Radio.propTypes = { + isCompact: PropTypes.bool }; -const toLabel = (labels, value) => { - if (value === undefined) { - return ''; + +const Range = React.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$5(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 + }); } - const key = typeof value === 'string' ? value : JSON.stringify(value); - return labels[key]; + return React.createElement(StyledRangeInput, combinedProps); +}); +Range.defaultProps = { + hasLowerTrack: true, + min: 0, + max: 100, + step: 1 }; +Range.displayName = 'Range'; -const useCombobox = _ref => { +const parseStyleValue = value => { + return parseInt(value, 10) || 0; +}; +const Textarea = React.forwardRef((_ref, 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 + minRows, + maxRows, + style, + onChange, + onSelect, + ...props } = _ref; - const win = environment || window; - const [triggerContainsInput, setTriggerContainsInput] = reactExports.useState(); - const [matchValue, setMatchValue] = reactExports.useState(''); - const matchTimeoutRef = reactExports.useRef(); - const prefixRef = reactExports.useRef(`${useId(idPrefix)}-`); - 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); + 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; }); - 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; + }, [maxRows, minRows, textAreaRef, isAutoResizable]); + const onChangeHandler = reactExports.useCallback(e => { + if (!isControlled) { + calculateHeight(); } - 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 (onChange) { + onChange(e); } - } - 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.'); + }, [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 handleDownshiftStateChange = _ref2 => { - let { - type, - isOpen, - selectedItem, - inputValue: _inputValue, - highlightedIndex - } = _ref2; + const onSelectHandler = props.readOnly ? composeEventHandlers$5(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.createElement(React.Fragment, null, React.createElement(StyledTextarea, combinedProps), isAutoResizable && React.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.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.createElement(InputContext.Provider, { + value: "toggle" + }, React.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.createElement(StyledTextMediaFigure, _extends$t({ + position: "start" +}, props)); +StartIconComponent.displayName = 'FauxInput.StartIcon'; +const StartIcon = StartIconComponent; + +const EndIconComponent = props => React.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$5(onFocus, () => { + setIsFocused(true); + }); + const onBlurHandler = composeEventHandlers$5(onBlur, () => { + setIsFocused(false); + }); + return React.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.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.createElement(StyledSelectWrapper, { + isCompact: isCompact, + isBare: isBare, + validation: validation, + focusInset: focusInset + }, React.createElement(StyledSelect, combinedProps), !isBare && React.createElement(FauxInput.EndIcon, { + isDisabled: disabled + }, React.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.createElement(StyledSlider, _extends$t({ + ref: ref, + onMouseDown: onSliderMouseDown + }, props), React.createElement(StyledSliderTrack, { + backgroundSize: sliderBackgroundSize, + backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition, + isDisabled: disabled + }, React.createElement(StyledSliderTrackRail, _extends$t({}, trackProps, { + ref: trackRailRef + }), React.createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({ + 'aria-label': updatedMinValue + }), { + isDisabled: disabled, + position: minPosition, + ref: minThumbRef, + "data-garden-active": isLabelActive, + "data-garden-hover": isLabelHovered + })), React.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.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.createElement(StyledTile, _extends$t({ + ref: ref, + "aria-disabled": disabled, + isDisabled: disabled, + isSelected: tilesContext && tilesContext.value === value + }, props), children, React.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.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.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.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$1(controlledValue, value); + const tileContext = reactExports.useMemo(() => ({ + onChange: handleOnChange, + value: selectedValue, + name, + isCentered + }), [handleOnChange, selectedValue, name, isCentered]); + return React.createElement(TilesContext.Provider, { + value: tileContext + }, React.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.forwardRef((_ref, ref) => { + let { + isCompact, + ...props + } = _ref; + const contextValue = reactExports.useMemo(() => ({ + isCompact + }), [isCompact]); + return React.createElement(InputGroupContext.Provider, { + value: contextValue + }, React.createElement(StyledInputGroup$1, _extends$t({ + ref: ref, + isCompact: isCompact + }, props))); +}); +InputGroup.displayName = 'InputGroup'; +InputGroup.propTypes = { + isCompact: PropTypes.bool +}; + +const FileUpload = React.forwardRef((_ref, ref) => { + let { + disabled, + ...props + } = _ref; + return ( + React.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.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.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.forwardRef((props, ref) => { + const fileContext = useFileContext(); + const onMouseDown = composeEventHandlers$5(props.onMouseDown, event => event.preventDefault() + ); + const ariaLabel = useText(CloseComponent$1, props, 'aria-label', 'Close'); + return React.createElement(StyledFileClose, _extends$t({ + ref: ref, + "aria-label": ariaLabel + }, props, { + type: "button", + tabIndex: -1, + onMouseDown: onMouseDown + }), fileContext && fileContext.isCompact ? React.createElement(SvgXStroke$1, null) : React.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.forwardRef((props, ref) => { + const fileContext = useFileContext(); + const onMouseDown = composeEventHandlers$5(props.onMouseDown, event => event.preventDefault() + ); + const ariaLabel = useText(DeleteComponent, props, 'aria-label', 'Delete'); + return React.createElement(StyledFileDelete, _extends$t({ + ref: ref, + "aria-label": ariaLabel + }, props, { + type: "button", + tabIndex: -1, + onMouseDown: onMouseDown + }), fileContext && fileContext.isCompact ? React.createElement(SvgTrashStroke$1, null) : React.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$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 = 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 || (_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$1; +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$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$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$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 = 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$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$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 = 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$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$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 = 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$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.createElement(SvgFilePdfStroke, null), + zip: React.createElement(SvgFileZipStroke, null), + image: React.createElement(SvgFileImageStroke, null), + document: React.createElement(SvgFileDocumentStroke, null), + spreadsheet: React.createElement(SvgFileSpreadsheetStroke, null), + presentation: React.createElement(SvgFilePresentationStroke, null), + generic: React.createElement(SvgFileGenericStroke, null), + success: React.createElement(SvgCheckCircleStroke$1, null), + error: React.createElement(SvgFileErrorStroke, null) +}; +const fileIconsCompact = { + pdf: React.createElement(SvgFilePdfStroke$1, null), + zip: React.createElement(SvgFileZipStroke$1, null), + image: React.createElement(SvgFileImageStroke$1, null), + document: React.createElement(SvgFileDocumentStroke$1, null), + spreadsheet: React.createElement(SvgFileSpreadsheetStroke$1, null), + presentation: React.createElement(SvgFilePresentationStroke$1, null), + generic: React.createElement(SvgFileGenericStroke$1, null), + success: React.createElement(SvgCheckCircleStroke, null), + error: React.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.createElement(FileContext.Provider, { + value: fileContextValue + }, React.createElement(StyledFile, _extends$t({}, props, { + isCompact: isCompact, + focusInset: focusInset, + validation: validation, + ref: ref + }), validationType && React.createElement(StyledFileIcon, { + isCompact: isCompact + }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), reactExports.Children.map(children, child => typeof child === 'string' ? React.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.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$5(onClick, () => { + inputRef.current && inputRef.current.focus(); + }); + const onFauxInputFocusHandler = composeEventHandlers$5(onFocus, () => { + setIsFocused(true); + }); + const onFauxInputBlurHandler = composeEventHandlers$5(onBlur, () => { + setIsFocused(false); + }); + const onFauxInputMouseOverHandler = composeEventHandlers$5(onMouseOver, () => { + setIsHovered(true); + }); + const onFauxInputMouseOutHandler = composeEventHandlers$5(onMouseOut, () => { + setIsHovered(false); + }); + const onSelectHandler = readOnly ? composeEventHandlers$5(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.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.createElement(FauxInput.StartIcon, { + isDisabled: disabled, + isFocused: isFocused, + isHovered: isHovered || isLabelHovered + }, start), React.createElement(StyledTextMediaInput, combinedProps), end && React.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 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; + }); + }; +} +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 = {})); + +let idCounter$1 = 0; +const useId = id => useId$1(id) || `id:${idCounter$1++}`; + +/** + * 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.9', + 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.9', + 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.9', + 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.9', + 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 +}); + +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); +}; + +function __awaiter(thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +} + +function __generator(thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +} + +function __read(o, n) { + var m = typeof Symbol === "function" && o[Symbol.iterator]; + if (!m) return o; + var i = m.call(o), r, ar = [], e; + try { + while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); + } + catch (error) { e = { error: error }; } + finally { + try { + if (r && !r.done && (m = i["return"])) m.call(i); + } + finally { if (e) throw e.error; } + } + return ar; +} + +function __spreadArray(to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +} + +var idCounter = 0; +function noop$1() {} + +/** + * 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 next non-disabled highlightedIndex value. + * + * @param {number} start The current highlightedIndex. + * @param {number} offset The offset from the current highlightedIndex to start searching. + * @param {unknown[]} items The items array. + * @param {(item: unknown, index: number) => boolean} isItemDisabled Function that tells if an item is disabled or not. + * @param {boolean?} circular If the search reaches the end, if it can search again starting from the other end. + * @returns {number} The next highlightedIndex. + */ +function getHighlightedIndex(start, offset, items, isItemDisabled, circular) { + if (circular === void 0) { + circular = false; + } + var count = items.length; + if (count === 0) { + return -1; + } + var itemsLastIndex = count - 1; + if (typeof start !== 'number' || start < 0 || start > itemsLastIndex) { + start = offset > 0 ? -1 : itemsLastIndex + 1; + } + var current = start + offset; + if (current < 0) { + current = circular ? itemsLastIndex : 0; + } else if (current > itemsLastIndex) { + current = circular ? 0 : itemsLastIndex; + } + var highlightedIndex = getNonDisabledIndex(current, offset < 0, items, isItemDisabled, circular); + if (highlightedIndex === -1) { + return start >= count ? -1 : start; + } + return highlightedIndex; +} + +/** + * Returns the next non-disabled highlightedIndex value. + * + * @param {number} start The current highlightedIndex. + * @param {boolean} backwards If true, it will search backwards from the start. + * @param {unknown[]} items The items array. + * @param {(item: unknown, index: number) => boolean} isItemDisabled Function that tells if an item is disabled or not. + * @param {boolean} circular If the search reaches the end, if it can search again starting from the other end. + * @returns {number} The next non-disabled index. + */ +function getNonDisabledIndex(start, backwards, items, isItemDisabled, circular) { + if (circular === void 0) { + circular = false; + } + var count = items.length; + if (backwards) { + for (var index = start; index >= 0; index--) { + if (!isItemDisabled(items[index], index)) { + return index; + } + } + } else { + for (var _index = start; _index < count; _index++) { + if (!isItemDisabled(items[_index], _index)) { + return _index; + } + } + } + if (circular) { + return getNonDisabledIndex(backwards ? count - 1 : 0, backwards, items, isItemDisabled); + } + 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$y({ + 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$y({ + 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; + +// istanbul ignore next +var useElementIds = 'useId' in React // Avoid conditional useId call +? function useElementIds(_ref) { + var id = _ref.id, + labelId = _ref.labelId, + menuId = _ref.menuId, + getItemId = _ref.getItemId, + toggleButtonId = _ref.toggleButtonId, + inputId = _ref.inputId; + // Avoid conditional useId call + var reactId = "downshift-" + React.useId(); + if (!id) { + id = reactId; + } + 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 useElementIds(_ref2) { + var _ref2$id = _ref2.id, + id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id, + labelId = _ref2.labelId, + menuId = _ref2.menuId, + getItemId = _ref2.getItemId, + toggleButtonId = _ref2.toggleButtonId, + inputId = _ref2.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$y({}, 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$y({ + 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$1; +}; +function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) { + var isInitialMount = _ref3.isInitialMount, + highlightedIndex = _ref3.highlightedIndex, + items = _ref3.items, + environment = _ref3.environment, + rest = _objectWithoutPropertiesLoose$1(_ref3, _excluded$3); + // Sets a11y status message on changes in state. + reactExports.useEffect(function () { + if (isInitialMount || false) { + return; + } + updateA11yStatus(function () { + return getA11yMessage(_extends$y({ + highlightedIndex: highlightedIndex, + highlightedItem: items[highlightedIndex], + resultCount: items.length + }, rest)); + }, environment.document); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, dependencyArray); +} +function useScrollIntoView(_ref4) { + var highlightedIndex = _ref4.highlightedIndex, + isOpen = _ref4.isOpen, + itemRefs = _ref4.itemRefs, + getItemNodeFromIndex = _ref4.getItemNodeFromIndex, + menuElement = _ref4.menuElement, + scrollIntoViewProp = _ref4.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$1; + +/** + * 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$y({ + isOpen: false, + highlightedIndex: -1 + }, shouldSelect && _extends$y({ + selectedItem: props.items[highlightedIndex], + isOpen: getDefaultValue$1(props, 'isOpen'), + highlightedIndex: getDefaultValue$1(props, 'highlightedIndex') + }, inputValue && { + inputValue: props.itemToString(props.items[highlightedIndex]) + })); +} + +// Shared between all exports. +var commonPropTypes = { + environment: PropTypes.shape({ + addEventListener: PropTypes.func.isRequired, + removeEventListener: PropTypes.func.isRequired, + document: PropTypes.shape({ + createElement: PropTypes.func.isRequired, + getElementById: PropTypes.func.isRequired, + activeElement: PropTypes.any.isRequired, + body: PropTypes.any.isRequired + }).isRequired, + Node: PropTypes.func.isRequired + }), + itemToString: PropTypes.func, + stateReducer: PropTypes.func +}; + +// Shared between useSelect, useCombobox, Downshift. +var commonDropdownPropTypes = _extends$y({}, commonPropTypes, { + getA11yStatusMessage: 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, + onSelectedItemChange: PropTypes.func, + onHighlightedIndexChange: PropTypes.func, + onStateChange: PropTypes.func, + onIsOpenChange: PropTypes.func, + scrollIntoView: PropTypes.func +}); + +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$y({}, state, changes); +} +// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment +__assign(__assign({}, commonDropdownPropTypes), { items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func, getA11ySelectionMessage: PropTypes.func }); +/** + * 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, isItemDisabled: function () { + return false; + } }); + +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 InputClick = 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, + InputClick: InputClick, + 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$y({}, initialState, { + inputValue: inputValue + }); +} +_extends$y({}, commonDropdownPropTypes, { + items: PropTypes.array.isRequired, + isItemDisabled: PropTypes.func, + selectedItemChanged: PropTypes.func, + getA11ySelectionMessage: PropTypes.func, + inputValue: PropTypes.string, + defaultInputValue: PropTypes.string, + initialInputValue: PropTypes.string, + inputId: PropTypes.string, + onInputValueChange: PropTypes.func +}); + +/** + * 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]; +} +var defaultProps$1 = _extends$y({}, defaultProps$3, { + selectedItemChanged: function selectedItemChanged(prevItem, item) { + return prevItem !== item; + }, + getA11yStatusMessage: getA11yStatusMessage$1, + isItemDisabled: function isItemDisabled() { + return false; + } +}); + +/* 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: getHighlightedIndex(state.highlightedIndex, 1, props.items, props.isItemDisabled, true) + }; + } else { + changes = { + highlightedIndex: altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1), + isOpen: props.items.length >= 0 + }; + } + break; + case InputKeyDownArrowUp: + if (state.isOpen) { + if (altKey) { + changes = getChangesOnSelection(props, state.highlightedIndex); + } else { + changes = { + highlightedIndex: getHighlightedIndex(state.highlightedIndex, -1, props.items, props.isItemDisabled, true) + }; + } + } else { + changes = { + highlightedIndex: getHighlightedIndexOnOpen(props, state, -1), + isOpen: props.items.length >= 0 + }; + } + break; + case InputKeyDownEnter: + changes = getChangesOnSelection(props, state.highlightedIndex); + break; + case InputKeyDownEscape: + changes = _extends$y({ + isOpen: false, + highlightedIndex: -1 + }, !state.isOpen && { + selectedItem: null, + inputValue: '' + }); + break; + case InputKeyDownPageUp: + changes = { + highlightedIndex: getHighlightedIndex(state.highlightedIndex, -10, props.items, props.isItemDisabled, true) + }; + break; + case InputKeyDownPageDown: + changes = { + highlightedIndex: getHighlightedIndex(state.highlightedIndex, 10, props.items, props.isItemDisabled, true) + }; + break; + case InputKeyDownHome: + changes = { + highlightedIndex: getNonDisabledIndex(0, false, props.items, props.isItemDisabled) + }; + break; + case InputKeyDownEnd: + changes = { + highlightedIndex: getNonDisabledIndex(props.items.length - 1, true, props.items, props.isItemDisabled) + }; + break; + case InputBlur: + changes = _extends$y({ + 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 InputClick: + changes = { + isOpen: !state.isOpen, + highlightedIndex: state.isOpen ? -1 : 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$y({}, state, changes); +} +/* eslint-enable complexity */ + +var _excluded$1 = ["onMouseLeave", "refKey", "ref"], + _excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onMouseDown", "onClick", "onPress", "disabled"], + _excluded3$1 = ["onClick", "onPress", "refKey", "ref"], + _excluded4$1 = ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "onClick", "refKey", "ref"]; +useCombobox$1.stateChangeTypes = stateChangeTypes$1; +function useCombobox$1(userProps) { + if (userProps === void 0) { + userProps = {}; + } + // Props defaults and destructuring. + var props = _extends$y({}, defaultProps$1, userProps); + var 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$y({ + 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$y({ + 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 = getInitialValue$1(props, '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 || (_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 + }); + }, + ArrowUp: function ArrowUp(event) { + event.preventDefault(); + dispatch({ + type: InputKeyDownArrowUp, + altKey: event.altKey + }); + }, + Home: function Home(event) { + if (!latest.current.state.isOpen) { + return; + } + event.preventDefault(); + dispatch({ + type: InputKeyDownHome + }); + }, + End: function End(event) { + if (!latest.current.state.isOpen) { + return; + } + event.preventDefault(); + dispatch({ + type: InputKeyDownEnd + }); + }, + 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 + }); + }, + PageUp: function PageUp(event) { + if (latest.current.state.isOpen) { + event.preventDefault(); + dispatch({ + type: InputKeyDownPageUp + }); + } + }, + PageDown: function PageDown(event) { + if (latest.current.state.isOpen) { + event.preventDefault(); + dispatch({ + type: InputKeyDownPageDown + }); + } + } + }; + }, [dispatch, latest]); + + // Getter props. + var getLabelProps = reactExports.useCallback(function (labelProps) { + return _extends$y({ + 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$1(_ref, _excluded$1); + var _ref2 = _temp2 === void 0 ? {} : _temp2; + _ref2.suppressRefError; + return _extends$y((_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 disabledProp = _ref3.disabled, + rest = _objectWithoutPropertiesLoose$1(_ref3, _excluded2$1); + if (disabledProp !== undefined) { + console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useCombobox.'); + } + 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!'), + item = _getItemAndIndex[0], + index = _getItemAndIndex[1]; + var disabled = latestProps.isItemDisabled(item, index); + 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$y((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) { + if (itemNode) { + itemRefs.current[elementIds.getItemId(index)] = itemNode; + } + }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _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$1(_ref5, _excluded3$1); + var latestState = latest.current.state; + var toggleButtonHandleClick = function toggleButtonHandleClick() { + dispatch({ + type: ToggleButtonClick + }); + }; + return _extends$y((_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$y({}, { + 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, + onBlur = _ref6.onBlur; + _ref6.onChangeText; + var onClick = _ref6.onClick, + _ref6$refKey = _ref6.refKey, + refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey, + ref = _ref6.ref, + rest = _objectWithoutPropertiesLoose$1(_ref6, _excluded4$1); + 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) { + var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body; + dispatch({ + type: InputBlur, + selectItem: !isBlurByTabChange + }); + } + }; + var inputHandleClick = function inputHandleClick() { + dispatch({ + type: InputClick + }); + }; + + /* 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.onClick = callAllEventHandlers(onClick, inputHandleClick), _eventHandlers); + } + return _extends$y((_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); + }, [setGetterPropCallInfo, latest, elementIds, inputKeyDownHandlers, dispatch, mouseAndTouchTrackersRef, environment]); + + // 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."; +} +_extends$y({}, commonPropTypes, { + selectedItems: PropTypes.array, + initialSelectedItems: PropTypes.array, + defaultSelectedItems: PropTypes.array, + getA11yRemovalMessage: PropTypes.func, + activeIndex: PropTypes.number, + initialActiveIndex: PropTypes.number, + defaultActiveIndex: PropTypes.number, + onActiveIndexChange: PropTypes.func, + onSelectedItemsChange: PropTypes.func, + keyNavigationNext: PropTypes.string, + keyNavigationPrevious: PropTypes.string +}); +({ + 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.InputClick]: 'input:click', + [useCombobox$1.stateChangeTypes.InputKeyDownArrowDown]: `input:keyDown:${KEYS$1.DOWN}`, + [useCombobox$1.stateChangeTypes.InputKeyDownArrowUp]: `input:keyDown:${KEYS$1.UP}`, + [useCombobox$1.stateChangeTypes.InputKeyDownEnd]: `input:keyDown:${KEYS$1.END}`, + [useCombobox$1.stateChangeTypes.InputKeyDownEnter]: `input:keyDown:${KEYS$1.ENTER}`, + [useCombobox$1.stateChangeTypes.InputKeyDownEscape]: `input:keyDown:${KEYS$1.ESCAPE}`, + [useCombobox$1.stateChangeTypes.InputKeyDownHome]: `input:keyDown:${KEYS$1.HOME}`, + [useCombobox$1.stateChangeTypes.InputKeyDownPageDown]: `input:keyDown:${KEYS$1.PAGE_DOWN}`, + [useCombobox$1.stateChangeTypes.InputKeyDownPageUp]: `input:keyDown:${KEYS$1.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 [triggerContainsInput, setTriggerContainsInput] = reactExports.useState(); + const [matchValue, setMatchValue] = reactExports.useState(''); + const matchTimeoutRef = reactExports.useRef(); + const prefixRef = reactExports.useRef(`${useId(idPrefix)}-`); + 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 && { @@ -10480,10 +13557,10 @@ const useCombobox = _ref => { } = getFieldInputProps(); const handleKeyDown = event => { event.stopPropagation(); - if (!_isExpanded && (event.key === KEYS$2.SPACE || event.key === KEYS$2.ENTER)) { + if (!_isExpanded && (event.key === KEYS$1.SPACE || event.key === KEYS$1.ENTER)) { event.preventDefault(); openListbox(); - } else if (_isExpanded && !matchValue && (event.key === KEYS$2.SPACE || event.key === KEYS$2.ENTER)) { + } else if (_isExpanded && !matchValue && (event.key === KEYS$1.SPACE || event.key === KEYS$1.ENTER)) { event.preventDefault(); if (_activeIndex !== -1) { setDownshiftSelection(values[_activeIndex]); @@ -10608,14 +13685,14 @@ const useCombobox = _ref => { } = _ref4; const handleClick = event => event.target instanceof Element && triggerRef.current?.contains(event.target) && event.stopPropagation(); const handleKeyDown = event => { - if (event.key === KEYS$2.BACKSPACE || event.key === KEYS$2.DELETE) { + if (event.key === KEYS$1.BACKSPACE || event.key === KEYS$1.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$2.DOWN || event.key === KEYS$2.UP || event.key === KEYS$2.ESCAPE || !isEditable && (event.key === KEYS$2.ENTER || event.key === KEYS$2.SPACE))) { + if (triggerContainsTag && (event.key === KEYS$1.DOWN || event.key === KEYS$1.UP || event.key === KEYS$1.ESCAPE || !isEditable && (event.key === KEYS$1.ENTER || event.key === KEYS$1.SPACE))) { const inputProps = getDownshiftInputProps(); if (isEditable) { inputRef.current?.focus(); @@ -10775,8 +13852,8 @@ const useCombobox = _ref => { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -function _extends$1$4() { - _extends$1$4 = Object.assign ? Object.assign.bind() : function (target) { +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) { @@ -10787,12 +13864,12 @@ function _extends$1$4() { } return target; }; - return _extends$1$4.apply(this, arguments); + return _extends$1$2.apply(this, arguments); } const SIZE$2 = ['small', 'medium', 'large']; -const COMPONENT_ID$2$5 = 'tags.avatar'; +const COMPONENT_ID$2$4 = 'tags.avatar'; const StyledAvatar = styled(_ref => { let { children, @@ -10800,30 +13877,30 @@ const StyledAvatar = styled(_ref => { } = _ref; return React.cloneElement(reactExports.Children.only(children), props); }).attrs({ - 'data-garden-id': COMPONENT_ID$2$5, + 'data-garden-id': COMPONENT_ID$2$4, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledAvatar", componentId: "sc-3kdmgt-0" -})(["flex-shrink:0;font-size:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2$5, props)); +})(["flex-shrink:0;font-size:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2$4, props)); StyledAvatar.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$1$5 = 'tags.close'; -const StyledClose$1 = styled.button.attrs({ - 'data-garden-id': COMPONENT_ID$1$5, +const COMPONENT_ID$1$4 = 'tags.close'; +const StyledClose = styled.button.attrs({ + 'data-garden-id': COMPONENT_ID$1$4, 'data-garden-version': '8.69.9' }).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$5, props)); -StyledClose$1.defaultProps = { +})(["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$4, props)); +StyledClose.defaultProps = { theme: DEFAULT_THEME }; const COMPONENT_ID$x = 'tags.tag_view'; -const colorStyles$b = props => { +const colorStyles$a = props => { let backgroundColor; let foregroundColor; let closeColor; @@ -10844,9 +13921,9 @@ const colorStyles$b = props => { theme: props.theme, shadowWidth: 'sm', selector: '&:focus' - }), StyledClose$1, closeColor); + }), StyledClose, closeColor); }; -const sizeStyles$d = props => { +const sizeStyles$c = props => { let borderRadius; let padding; let height; @@ -10892,7 +13969,7 @@ const sizeStyles$d = props => { 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$1, props.theme.rtl ? 'left' : 'right', padding, borderRadius, height, height); + 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 = styled.div.attrs({ 'data-garden-id': COMPONENT_ID$x, @@ -10900,16 +13977,16 @@ const StyledTag$1 = styled.div.attrs({ }).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$d(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles$b(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.isRound || props.size === 'small') && 'none', StyledClose$1, props => props.isRound && 'none', props => retrieveComponentStyles(COMPONENT_ID$x, props)); +})(["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$x, props)); StyledTag$1.defaultProps = { size: 'medium', theme: DEFAULT_THEME }; var _path$6; -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 SvgXStroke$2 = function SvgXStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$c({ +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 SvgXStroke = function SvgXStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$9({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, @@ -10925,16 +14002,16 @@ var SvgXStroke$2 = function SvgXStroke(props) { const CloseComponent = reactExports.forwardRef((props, ref) => { const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Remove'); - return React.createElement(StyledClose$1, _extends$1$4({ + return React.createElement(StyledClose, _extends$1$2({ ref: ref, "aria-label": ariaLabel }, props, { type: "button", tabIndex: -1 - }), React.createElement(SvgXStroke$2, null)); + }), React.createElement(SvgXStroke, null)); }); CloseComponent.displayName = 'Tag.Close'; -const Close$1 = CloseComponent; +const Close = CloseComponent; const AvatarComponent = props => React.createElement(StyledAvatar, props); AvatarComponent.displayName = 'Tag.Avatar'; @@ -10946,7 +14023,7 @@ const TagComponent$1 = reactExports.forwardRef((_ref, ref) => { hue, ...otherProps } = _ref; - return React.createElement(StyledTag$1, _extends$1$4({ + return React.createElement(StyledTag$1, _extends$1$2({ ref: ref, size: size, hue: hue @@ -10965,7 +14042,7 @@ TagComponent$1.defaultProps = { }; const Tag$1 = TagComponent$1; Tag$1.Avatar = Avatar; -Tag$1.Close = Close$1; +Tag$1.Close = Close; function getAlignment(placement) { return placement.split('-')[1]; @@ -12571,11 +15648,11 @@ const useTooltip = function (_temp) { } = _temp2 === void 0 ? {} : _temp2; return { tabIndex, - onMouseEnter: composeEventHandlers$4(onMouseEnter, () => openTooltip()), - onMouseLeave: composeEventHandlers$4(onMouseLeave, () => closeTooltip()), - onFocus: composeEventHandlers$4(onFocus, () => openTooltip()), - onBlur: composeEventHandlers$4(onBlur, () => closeTooltip(0)), - onKeyDown: composeEventHandlers$4(onKeyDown, event => { + onMouseEnter: composeEventHandlers$5(onMouseEnter, () => openTooltip()), + onMouseLeave: composeEventHandlers$5(onMouseLeave, () => closeTooltip()), + onFocus: composeEventHandlers$5(onFocus, () => openTooltip()), + onBlur: composeEventHandlers$5(onBlur, () => closeTooltip(0)), + onKeyDown: composeEventHandlers$5(onKeyDown, event => { if (event.keyCode === KEY_CODES.ESCAPE && visibility) { closeTooltip(0); } @@ -12595,8 +15672,8 @@ const useTooltip = function (_temp) { } = _temp3 === void 0 ? {} : _temp3; return { role, - onMouseEnter: composeEventHandlers$4(onMouseEnter, () => openTooltip()), - onMouseLeave: composeEventHandlers$4(onMouseLeave, () => closeTooltip()), + onMouseEnter: composeEventHandlers$5(onMouseEnter, () => openTooltip()), + onMouseLeave: composeEventHandlers$5(onMouseLeave, () => closeTooltip()), 'aria-hidden': !visibility, id: _id, ...other @@ -12643,7 +15720,7 @@ function _toPropertyKey$1(arg) { return _typeof$1(key) === "symbol" ? key : String(key); } -function _defineProperty$1(obj, key, value) { +function _defineProperty$3(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) { Object.defineProperty(obj, key, { @@ -14310,7 +17387,7 @@ var defineProperty = function (obj, key, value) { return obj; }; -var _extends$b = Object.assign || function (target) { +var _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -14332,7 +17409,7 @@ var _extends$b = Object.assign || function (target) { * @returns {Object} ClientRect like output */ function getClientRect(offsets) { - return _extends$b({}, offsets, { + return _extends$8({}, offsets, { right: offsets.left + offsets.width, bottom: offsets.top + offsets.height }); @@ -14620,7 +17697,7 @@ function computeAutoPlacement(placement, refRect, popper, reference, boundariesE }; var sortedAreas = Object.keys(rects).map(function (key) { - return _extends$b({ + return _extends$8({ key: key }, rects[key], { area: getArea(rects[key]) @@ -15262,9 +18339,9 @@ function computeStyle(data, options) { }; // Update `data` attributes, styles and arrowStyles - data.attributes = _extends$b({}, attributes, data.attributes); - data.styles = _extends$b({}, styles, data.styles); - data.arrowStyles = _extends$b({}, data.offsets.arrow, data.arrowStyles); + data.attributes = _extends$8({}, attributes, data.attributes); + data.styles = _extends$8({}, styles, data.styles); + data.arrowStyles = _extends$8({}, data.offsets.arrow, data.arrowStyles); return data; } @@ -15544,7 +18621,7 @@ function flip(data, options) { // this object contains `position`, we want to preserve it along with // any additional property we may add in the future - data.offsets.popper = _extends$b({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement)); + data.offsets.popper = _extends$8({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement)); data = runModifiers(data.instance.modifiers, data, 'flip'); } @@ -15818,7 +18895,7 @@ function preventOverflow(data, options) { order.forEach(function (placement) { var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary'; - popper = _extends$b({}, popper, check[side](placement)); + popper = _extends$8({}, popper, check[side](placement)); }); data.offsets.popper = popper; @@ -15853,7 +18930,7 @@ function shift(data) { end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement]) }; - data.offsets.popper = _extends$b({}, popper, shiftOffsets[shiftvariation]); + data.offsets.popper = _extends$8({}, popper, shiftOffsets[shiftvariation]); } return data; @@ -16385,7 +19462,7 @@ var Popper$1 = function () { this.update = debounce(this.update.bind(this)); // with {} we create a new object with the options inside it - this.options = _extends$b({}, Popper.Defaults, options); + this.options = _extends$8({}, Popper.Defaults, options); // init state this.state = { @@ -16400,13 +19477,13 @@ var Popper$1 = function () { // Deep merge modifiers options this.options.modifiers = {}; - Object.keys(_extends$b({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) { - _this.options.modifiers[name] = _extends$b({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {}); + Object.keys(_extends$8({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) { + _this.options.modifiers[name] = _extends$8({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {}); }); // Refactoring modifiers' list (Object => Array) this.modifiers = Object.keys(this.options.modifiers).map(function (name) { - return _extends$b({ + return _extends$8({ name: name }, _this.options.modifiers[name]); }) @@ -16779,9 +19856,9 @@ function (_React$Component) { _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "referenceNode", void 0); + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "referenceNode", void 0); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "setReferenceNode", function (newReferenceNode) { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "setReferenceNode", function (newReferenceNode) { if (newReferenceNode && _this.referenceNode !== newReferenceNode) { _this.referenceNode = newReferenceNode; @@ -16866,18 +19943,18 @@ function (_React$Component) { _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "state", { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "state", { data: undefined, placement: undefined }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "popperInstance", void 0); + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "popperInstance", void 0); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "popperNode", null); + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "popperNode", null); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "arrowNode", null); + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "arrowNode", null); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "setPopperNode", function (popperNode) { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "setPopperNode", function (popperNode) { if (!popperNode || _this.popperNode === popperNode) return; setRef(_this.props.innerRef, popperNode); _this.popperNode = popperNode; @@ -16885,11 +19962,11 @@ function (_React$Component) { _this.updatePopperInstance(); }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "setArrowNode", function (arrowNode) { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "setArrowNode", function (arrowNode) { _this.arrowNode = arrowNode; }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "updateStateModifier", { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "updateStateModifier", { enabled: true, order: 900, fn: function fn(data) { @@ -16904,13 +19981,13 @@ function (_React$Component) { } }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getOptions", function () { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getOptions", function () { return { placement: _this.props.placement, eventsEnabled: _this.props.eventsEnabled, positionFixed: _this.props.positionFixed, - modifiers: _extends$w({}, _this.props.modifiers, { - arrow: _extends$w({}, _this.props.modifiers && _this.props.modifiers.arrow, { + modifiers: _extends$y({}, _this.props.modifiers, { + arrow: _extends$y({}, _this.props.modifiers && _this.props.modifiers.arrow, { enabled: !!_this.arrowNode, element: _this.arrowNode }), @@ -16922,25 +19999,25 @@ function (_React$Component) { }; }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getPopperStyle", function () { - return !_this.popperNode || !_this.state.data ? initialStyle : _extends$w({ + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getPopperStyle", function () { + return !_this.popperNode || !_this.state.data ? initialStyle : _extends$y({ position: _this.state.data.offsets.popper.position }, _this.state.data.styles); }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getPopperPlacement", function () { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getPopperPlacement", function () { return !_this.state.data ? undefined : _this.state.placement; }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getArrowStyle", function () { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getArrowStyle", function () { return !_this.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles; }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getOutOfBoundariesState", function () { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getOutOfBoundariesState", function () { return _this.state.data ? _this.state.data.hide : undefined; }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "destroyPopperInstance", function () { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "destroyPopperInstance", function () { if (!_this.popperInstance) return; _this.popperInstance.destroy(); @@ -16948,7 +20025,7 @@ function (_React$Component) { _this.popperInstance = null; }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "updatePopperInstance", function () { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "updatePopperInstance", function () { _this.destroyPopperInstance(); var _assertThisInitialize = _assertThisInitialized$1(_assertThisInitialized$1(_this)), @@ -16959,7 +20036,7 @@ function (_React$Component) { _this.popperInstance = new PopperJS(referenceElement, popperNode, _this.getOptions()); }); - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "scheduleUpdate", function () { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "scheduleUpdate", function () { if (_this.popperInstance) { _this.popperInstance.scheduleUpdate(); } @@ -17012,7 +20089,7 @@ function (_React$Component) { return InnerPopper; }(reactExports.Component); -_defineProperty$1(InnerPopper, "defaultProps", { +_defineProperty$3(InnerPopper, "defaultProps", { placement: 'bottom', eventsEnabled: true, referenceElement: undefined, @@ -17022,10 +20099,10 @@ _defineProperty$1(InnerPopper, "defaultProps", { PopperJS.placements; function Popper(_ref) { var referenceElement = _ref.referenceElement, - props = _objectWithoutPropertiesLoose(_ref, ["referenceElement"]); + props = _objectWithoutPropertiesLoose$1(_ref, ["referenceElement"]); return reactExports.createElement(ManagerReferenceNodeContext.Consumer, null, function (referenceNode) { - return reactExports.createElement(InnerPopper, _extends$w({ + return reactExports.createElement(InnerPopper, _extends$y({ referenceElement: referenceElement !== undefined ? referenceElement : referenceNode }, props)); }); @@ -17045,7 +20122,7 @@ function (_React$Component) { _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; - _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "refHandler", function (node) { + _defineProperty$3(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "refHandler", function (node) { setRef(_this.props.innerRef, node); safeInvoke(_this.props.setReferenceNode, node); }); @@ -17071,7 +20148,7 @@ function (_React$Component) { function Reference(props) { return reactExports.createElement(ManagerReferenceNodeSetterContext.Consumer, null, function (setReferenceNode) { - return reactExports.createElement(InnerReference, _extends$w({ + return reactExports.createElement(InnerReference, _extends$y({ setReferenceNode: setReferenceNode }, props)); }); @@ -17136,32 +20213,32 @@ function getArrowPosition(popperPlacement) { return arrowPositionMappings[popperPlacement] || 'top'; } -const COMPONENT_ID$2$4 = 'tooltip.paragraph'; -const StyledParagraph$1 = styled.p.attrs({ - 'data-garden-id': COMPONENT_ID$2$4, +const COMPONENT_ID$2$3 = 'tooltip.paragraph'; +const StyledParagraph = styled.p.attrs({ + 'data-garden-id': COMPONENT_ID$2$3, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledParagraph", componentId: "sc-wuqkfc-0" -})(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2$4, props)); -StyledParagraph$1.defaultProps = { +})(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2$3, props)); +StyledParagraph.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$1$4 = 'tooltip.title'; -const StyledTitle$1 = styled.strong.attrs({ - 'data-garden-id': COMPONENT_ID$1$4, +const COMPONENT_ID$1$3 = 'tooltip.title'; +const StyledTitle = styled.strong.attrs({ + 'data-garden-id': COMPONENT_ID$1$3, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledTitle", componentId: "sc-vnjcvz-0" -})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$1$4, props)); -StyledTitle$1.defaultProps = { +})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$1$3, props)); +StyledTitle.defaultProps = { theme: DEFAULT_THEME }; const COMPONENT_ID$w = 'tooltip.tooltip'; -const sizeStyles$c = _ref => { +const sizeStyles$b = _ref => { let { theme, size, @@ -17225,9 +20302,9 @@ const sizeStyles$c = _ref => { return Ne(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && arrowStyles(getArrowPosition(placement), { size: arrowSize, inset: arrowInset - }), StyledParagraph$1, paragraphMarginTop, StyledTitle$1, titleDisplay); + }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay); }; -const colorStyles$a = _ref2 => { +const colorStyles$9 = _ref2 => { let { theme, type @@ -17244,7 +20321,7 @@ const colorStyles$a = _ref2 => { color = getColor('neutralHue', 700, theme); titleColor = theme.colors.foreground; } - return Ne(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle$1, titleColor); + return Ne(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor); }; const StyledTooltip = styled.div.attrs({ 'data-garden-id': COMPONENT_ID$w, @@ -17252,7 +20329,7 @@ const StyledTooltip = styled.div.attrs({ }).withConfig({ displayName: "StyledTooltip", componentId: "sc-gzzjq4-0" -})(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles$c(props), colorStyles$a, props => retrieveComponentStyles(COMPONENT_ID$w, props)); +})(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles$b(props), colorStyles$9, props => retrieveComponentStyles(COMPONENT_ID$w, props)); StyledTooltip.defaultProps = { theme: DEFAULT_THEME }; @@ -17268,7 +20345,7 @@ StyledTooltipWrapper.defaultProps = { const SHARED_PLACEMENT$1 = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']; const PLACEMENT$1 = [...SHARED_PLACEMENT$1, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']; const SIZE$1 = ['small', 'medium', 'large', 'extra-large']; -const TYPE$1 = ['light', 'dark']; +const TYPE = ['light', 'dark']; const Tooltip = _ref => { let { @@ -17355,10 +20432,10 @@ const Tooltip = _ref => { hasArrow, placement: currentPlacement, size: computedSize, - onFocus: composeEventHandlers$4(onFocus, () => { + onFocus: composeEventHandlers$5(onFocus, () => { openTooltip(); }), - onBlur: composeEventHandlers$4(onBlur, () => { + onBlur: composeEventHandlers$5(onBlur, () => { closeTooltip(0); }), 'aria-hidden': !controlledIsVisible, @@ -17388,7 +20465,7 @@ Tooltip.propTypes = { placement: PropTypes.oneOf(PLACEMENT$1), popperModifiers: PropTypes.any, size: PropTypes.oneOf(SIZE$1), - type: PropTypes.oneOf(TYPE$1), + type: PropTypes.oneOf(TYPE), zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), isInitialVisible: PropTypes.bool, refKey: PropTypes.string @@ -17402,8 +20479,8 @@ Tooltip.defaultProps = { refKey: 'ref' }; -function _extends$a() { - _extends$a = Object.assign ? Object.assign.bind() : function (target) { +function _extends$7() { + _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { @@ -17414,18 +20491,18 @@ function _extends$a() { } return target; }; - return _extends$a.apply(this, arguments); + return _extends$7.apply(this, arguments); } -const Paragraph$1 = reactExports.forwardRef((props, ref) => React.createElement(StyledParagraph$1, _extends$a({ +const Paragraph = reactExports.forwardRef((props, ref) => React.createElement(StyledParagraph, _extends$7({ ref: ref }, props))); -Paragraph$1.displayName = 'Paragraph'; +Paragraph.displayName = 'Paragraph'; -const Title$1 = reactExports.forwardRef((props, ref) => React.createElement(StyledTitle$1, _extends$a({ +const Title = reactExports.forwardRef((props, ref) => React.createElement(StyledTitle, _extends$7({ ref: ref }, props))); -Title$1.displayName = 'Title'; +Title.displayName = 'Title'; /** * Copyright Zendesk, Inc. @@ -17434,8 +20511,8 @@ Title$1.displayName = 'Title'; * found at http://www.apache.org/licenses/LICENSE-2.0. */ -function _extends$5$1() { - _extends$5$1 = Object.assign ? Object.assign.bind() : function (target) { +function _extends$5() { + _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { @@ -17446,20 +20523,20 @@ function _extends$5$1() { } return target; }; - return _extends$5$1.apply(this, arguments); + return _extends$5.apply(this, arguments); } -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 SvgChevronDownStroke$1 = function SvgChevronDownStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$4$1({ +var _path$4; +function _extends$4() { _extends$4 = 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.apply(this, arguments); } +var SvgChevronDownStroke = function SvgChevronDownStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$4({ 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", { + }, props), _path$4 || (_path$4 = /*#__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" }))); @@ -17628,11 +20705,11 @@ StyledFloatingListbox.defaultProps = { }; const COMPONENT_ID$l = 'dropdowns.combobox.input'; -const colorStyles$7$1 = props => { +const colorStyles$7 = props => { const placeholderColor = getColor('neutralHue', 400, props.theme); return Ne(["background-color:inherit;color:inherit;&::placeholder{opacity:1;color:", ";}"], placeholderColor); }; -const getHeight$1 = props => { +const getHeight = props => { if (props.isBare && !props.isMultiselectable) { return props.theme.space.base * 5; } @@ -17642,7 +20719,7 @@ const sizeStyles$7 = props => { const height = props.theme.space.base * 5; const fontSize = props.theme.fontSizes.md; const lineHeight = getLineHeight(height, fontSize); - const margin = math(`${props.theme.shadowWidths.sm} + ${(getHeight$1(props) - height) / 2}`); + const margin = math(`${props.theme.shadowWidths.sm} + ${(getHeight(props) - height) / 2}`); const minWidth = `${props.theme.space.base * 8}px`; return Ne(["min-width:", ";height:", "px;line-height:", ";font-size:", ";&&{margin-top:", ";margin-bottom:", ";}"], minWidth, height, lineHeight, fontSize, margin, margin); }; @@ -17652,7 +20729,7 @@ const StyledInput = styled.input.attrs({ }).withConfig({ displayName: "StyledInput", componentId: "sc-m2m56e-0" -})(["flex-basis:0;flex-grow:1;border:none;padding:0;font-family:inherit;&:focus{outline:none;}", ";", ";&[hidden]{display:revert;", "}&[aria-hidden='true']{display:none;}", ";"], sizeStyles$7, colorStyles$7$1, props => props.isEditable && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$l, props)); +})(["flex-basis:0;flex-grow:1;border:none;padding:0;font-family:inherit;&:focus{outline:none;}", ";", ";&[hidden]{display:revert;", "}&[aria-hidden='true']{display:none;}", ";"], sizeStyles$7, colorStyles$7, props => props.isEditable && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$l, props)); StyledInput.defaultProps = { theme: DEFAULT_THEME }; @@ -17674,7 +20751,7 @@ StyledInputGroup.defaultProps = { }; const COMPONENT_ID$j = 'dropdowns.combobox.trigger'; -const colorStyles$6$1 = props => { +const colorStyles$6 = props => { const SHADE = 600; let hue = 'neutralHue'; if (props.validation === 'success') { @@ -17723,7 +20800,7 @@ const colorStyles$6$1 = props => { }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor); }; const sizeStyles$5 = props => { - const inputHeight = getHeight$1(props); + const inputHeight = getHeight(props); let minHeight; let horizontalPadding; if (props.isBare) { @@ -17748,21 +20825,21 @@ const StyledTrigger = styled.div.attrs({ }).withConfig({ displayName: "StyledTrigger", componentId: "sc-14t9k4c-0" -})(["overflow-y:auto;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:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => !props.isAutocomplete && props.isEditable ? 'text' : 'pointer', sizeStyles$5, colorStyles$6$1, props => retrieveComponentStyles(COMPONENT_ID$j, props)); +})(["overflow-y:auto;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:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => !props.isAutocomplete && props.isEditable ? 'text' : 'pointer', sizeStyles$5, colorStyles$6, props => retrieveComponentStyles(COMPONENT_ID$j, props)); StyledTrigger.defaultProps = { theme: DEFAULT_THEME }; const COMPONENT_ID$i = 'dropdowns.combobox.input_icon'; -const colorStyles$5$1 = props => { +const colorStyles$5 = props => { const color = getColor('neutralHue', 600, props.theme); const focusColor = getColor('neutralHue', 700, props.theme); const disabledColor = getColor('neutralHue', 400, props.theme); return Ne(["color:", ";", ":hover &,", ":focus-within &,", ":focus &,", "[data-garden-focus-visible='true'] &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor); }; -const sizeStyles$4$1 = props => { +const sizeStyles$4 = props => { const size = props.theme.iconSizes.md; - const position = math(`(${getHeight$1(props)} - ${size}) / 2`); + const position = math(`(${getHeight(props)} - ${size}) / 2`); const margin = `${props.theme.space.base * 2}px`; let side; if (props.isEnd) { @@ -17790,17 +20867,17 @@ const StyledInputIcon = styled(_ref => { }).withConfig({ displayName: "StyledInputIcon", componentId: "sc-15ewmjl-0" -})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$4$1, colorStyles$5$1, props => retrieveComponentStyles(COMPONENT_ID$i, props)); +})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$4, colorStyles$5, props => retrieveComponentStyles(COMPONENT_ID$i, props)); StyledInputIcon.defaultProps = { theme: DEFAULT_THEME }; const COMPONENT_ID$h = 'dropdowns.combobox.separator'; -const colorStyles$4$1 = props => { +const colorStyles$4 = props => { const backgroundColor = getColor('neutralHue', 200, props.theme); return Ne(["background-color:", ";"], backgroundColor); }; -const sizeStyles$3$1 = props => { +const sizeStyles$3 = props => { const margin = `${props.theme.space.base}px`; const height = props.theme.borderWidths.sm; return Ne(["margin:", " 0;height:", ";"], margin, height); @@ -17811,7 +20888,7 @@ const StyledListboxSeparator = styled.li.attrs({ }).withConfig({ displayName: "StyledListboxSeparator", componentId: "sc-19umtmg-0" -})(["cursor:default;", ";", ";", ";"], sizeStyles$3$1, colorStyles$4$1, props => retrieveComponentStyles(COMPONENT_ID$h, props)); +})(["cursor:default;", ";", ";", ";"], sizeStyles$3, colorStyles$4, props => retrieveComponentStyles(COMPONENT_ID$h, props)); StyledListboxSeparator.defaultProps = { theme: DEFAULT_THEME }; @@ -17841,7 +20918,7 @@ StyledOptionContent.defaultProps = { }; const COMPONENT_ID$e = 'dropdowns.combobox.option.icon'; -const sizeStyles$2$1 = props => { +const sizeStyles$2 = props => { const size = props.theme.iconSizes.md; const marginTop = math(`(${props.theme.lineHeights.md} - ${size}) / 2`); const marginHorizontal = `${props.theme.space.base * 2}px`; @@ -17860,34 +20937,34 @@ const StyledOptionIcon = styled(_ref => { }).withConfig({ displayName: "StyledOptionIcon", componentId: "sc-3vecfi-0" -})(["flex-shrink:0;", ";", ";"], sizeStyles$2$1, props => retrieveComponentStyles(COMPONENT_ID$e, props)); +})(["flex-shrink:0;", ";", ";"], sizeStyles$2, props => retrieveComponentStyles(COMPONENT_ID$e, props)); StyledOptionIcon.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$d$1 = 'dropdowns.combobox.option.meta'; -const colorStyles$3$1 = props => { +const COMPONENT_ID$d = 'dropdowns.combobox.option.meta'; +const colorStyles$3 = props => { const color = getColor('neutralHue', props.isDisabled ? 400 : 600, props.theme); return Ne(["color:", ";"], color); }; -const sizeStyles$1$2 = props => { +const sizeStyles$1 = props => { const lineHeight = props.theme.lineHeights.sm; const fontSize = props.theme.fontSizes.sm; return Ne(["line-height:", ";font-size:", ";"], lineHeight, fontSize); }; const StyledOptionMeta = styled.div.attrs({ - 'data-garden-id': COMPONENT_ID$d$1, + 'data-garden-id': COMPONENT_ID$d, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledOptionMeta", componentId: "sc-1nizjb3-0" -})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$1$2, colorStyles$3$1, props => retrieveComponentStyles(COMPONENT_ID$d$1, props)); +})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$1, colorStyles$3, props => retrieveComponentStyles(COMPONENT_ID$d, props)); StyledOptionMeta.defaultProps = { theme: DEFAULT_THEME }; const COMPONENT_ID$c$1 = 'dropdowns.combobox.option.type_icon'; -const colorStyles$2$1 = props => { +const colorStyles$2 = props => { const opacity = props.type && props.type !== 'danger' ? 1 : 0; let color; if (props.type === 'add' || props.type === 'danger') { @@ -17899,7 +20976,7 @@ const colorStyles$2$1 = props => { } return Ne(["opacity:", ";color:", ";", "[aria-selected='true'] > &{opacity:1;}", "[aria-disabled='true'] > &{color:inherit;}"], opacity, color, StyledOption, StyledOption); }; -const sizeStyles$b = props => { +const sizeStyles = props => { const size = props.theme.iconSizes.md; const position = `${props.theme.space.base * 3}px`; const top = math(`(${getMinHeight(props)} - ${size}) / 2`); @@ -17926,30 +21003,30 @@ const StyledOptionTypeIcon = styled(_ref => { }).withConfig({ displayName: "StyledOptionTypeIcon", componentId: "sc-vlhimu-0" -})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.type === 'next' || props.type === 'previous') && 'rotate(180deg)', sizeStyles$b, colorStyles$2$1, props => retrieveComponentStyles(COMPONENT_ID$c$1, props)); +})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.type === 'next' || props.type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles$2, props => retrieveComponentStyles(COMPONENT_ID$c$1, props)); StyledOptionTypeIcon.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$b$2 = 'dropdowns.combobox.tag'; +const COMPONENT_ID$b$1 = 'dropdowns.combobox.tag'; const StyledTag = styled(Tag$1).attrs({ - 'data-garden-id': COMPONENT_ID$b$2, + 'data-garden-id': COMPONENT_ID$b$1, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledTag", componentId: "sc-1mrab0f-0" -})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColor('neutralHue', 400, props.theme), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$b$2, props)); +})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColor('neutralHue', 400, props.theme), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$b$1, props)); StyledTag.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$a$2 = 'dropdowns.combobox.value'; -const colorStyles$1$1 = props => { +const COMPONENT_ID$a$1 = 'dropdowns.combobox.value'; +const colorStyles$1 = props => { const foregroundColor = props.isPlaceholder && getColor('neutralHue', 400, props.theme); return Ne(["color:", ";"], foregroundColor); }; const StyledValue = styled.div.attrs({ - 'data-garden-id': COMPONENT_ID$a$2, + 'data-garden-id': COMPONENT_ID$a$1, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledValue", @@ -17959,4232 +21036,4746 @@ const StyledValue = styled.div.attrs({ return 'default'; } return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer'; -}, sizeStyles$7, colorStyles$1$1, props => retrieveComponentStyles(COMPONENT_ID$a$2, props)); +}, sizeStyles$7, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$a$1, props)); StyledValue.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$9$2 = 'dropdowns.combobox.tags_button'; -const colorStyles$9 = props => { +const COMPONENT_ID$9$1 = 'dropdowns.combobox.tags_button'; +const colorStyles = props => { const color = getColor('primaryHue', 600, props.theme); return Ne(["color:", ";&:disabled{color:inherit;}"], color); }; const StyledTagsButton = styled(StyledValue).attrs({ as: 'button', - 'data-garden-id': COMPONENT_ID$9$2, + 'data-garden-id': COMPONENT_ID$9$1, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledTagsButton", componentId: "sc-ewyffo-0" -})(["display:inline-flex;flex:0 1 auto;align-items:center;border:none;background-color:transparent;cursor:pointer;min-width:auto;font-family:inherit;&:hover{text-decoration:underline;}", ";&:disabled{cursor:default;text-decoration:none;}", ";"], colorStyles$9, props => retrieveComponentStyles(COMPONENT_ID$9$2, props)); +})(["display:inline-flex;flex:0 1 auto;align-items:center;border:none;background-color:transparent;cursor:pointer;min-width:auto;font-family:inherit;&:hover{text-decoration:underline;}", ";&:disabled{cursor:default;text-decoration:none;}", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID$9$1, props)); StyledTagsButton.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$8$2 = 'dropdowns.menu.floating'; +const COMPONENT_ID$8$1 = 'dropdowns.menu.floating'; const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({ - 'data-garden-id': COMPONENT_ID$8$2, + 'data-garden-id': COMPONENT_ID$8$1, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledFloatingMenu", componentId: "sc-1kawjbc-0" -})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$8$2, props)); +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$8$1, props)); StyledFloatingMenu.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$7$2 = 'dropdowns.menu.item'; +const COMPONENT_ID$7$1 = 'dropdowns.menu.item'; const StyledItem = styled(StyledOption).attrs({ - 'data-garden-id': COMPONENT_ID$7$2, + 'data-garden-id': COMPONENT_ID$7$1, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledItem", componentId: "sc-1rlz2s1-0" -})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$7$2, props)); +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$7$1, props)); StyledItem.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$6$2 = 'dropdowns.menu.item.content'; +const COMPONENT_ID$6$1 = 'dropdowns.menu.item.content'; const StyledItemContent = styled(StyledOptionContent).attrs({ - 'data-garden-id': COMPONENT_ID$6$2, + 'data-garden-id': COMPONENT_ID$6$1, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledItemContent", componentId: "sc-lycr0m-0" -})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$6$2, props)); +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$6$1, props)); StyledItemContent.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$5$3 = 'dropdowns.menu.item_group'; +const COMPONENT_ID$5$2 = 'dropdowns.menu.item_group'; const StyledItemGroup = styled(StyledOptGroup).attrs({ - 'data-garden-id': COMPONENT_ID$5$3, + 'data-garden-id': COMPONENT_ID$5$2, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledItemGroup", componentId: "sc-1p1oxg2-0" -})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$5$3, props)); +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$5$2, props)); StyledItemGroup.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$4$3 = 'dropdowns.menu.item.icon'; +const COMPONENT_ID$4$2 = 'dropdowns.menu.item.icon'; const StyledItemIcon = styled(StyledOptionIcon).attrs({ - 'data-garden-id': COMPONENT_ID$4$3, + 'data-garden-id': COMPONENT_ID$4$2, 'data-garden-version': '8.69.9' }).withConfig({ displayName: "StyledItemIcon", componentId: "sc-1htsio6-0" -})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$4$3, props)); +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$4$2, props)); StyledItemIcon.defaultProps = { theme: DEFAULT_THEME }; -const COMPONENT_ID$3$3 = 'dropdowns.menu.item.meta'; -const StyledItemMeta = styled(StyledOptionMeta).attrs({ - 'data-garden-id': COMPONENT_ID$3$3, - 'data-garden-version': '8.69.9' -}).withConfig({ - displayName: "StyledItemMeta", - componentId: "sc-1w4thi3-0" -})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$3$3, props)); -StyledItemMeta.defaultProps = { - theme: DEFAULT_THEME +const COMPONENT_ID$3$2 = 'dropdowns.menu.item.meta'; +const StyledItemMeta = styled(StyledOptionMeta).attrs({ + 'data-garden-id': COMPONENT_ID$3$2, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledItemMeta", + componentId: "sc-1w4thi3-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$3$2, props)); +StyledItemMeta.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$2$2 = 'dropdowns.menu.item.type_icon'; +const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({ + 'data-garden-id': COMPONENT_ID$2$2, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledItemTypeIcon", + componentId: "sc-15p2dtm-0" +})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => retrieveComponentStyles(COMPONENT_ID$2$2, props)); +StyledItemTypeIcon.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$1$2 = 'dropdowns.menu'; +const StyledMenu$1 = styled(StyledListbox).attrs({ + 'data-garden-id': COMPONENT_ID$1$2, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledMenu", + componentId: "sc-1ht6lc5-0" +})(["position:static !important;", ";", ";"], props => props.arrowPosition && arrowStyles(props.arrowPosition, { + size: `${props.theme.space.base * 2}px`, + inset: '2px', + animationModifier: '[data-garden-animate="true"]' +}), props => retrieveComponentStyles(COMPONENT_ID$1$2, props)); +StyledMenu$1.defaultProps = { + theme: DEFAULT_THEME +}; + +const COMPONENT_ID$v = 'dropdowns.menu.separator'; +const StyledMenuSeparator = styled(StyledListboxSeparator).attrs({ + 'data-garden-id': COMPONENT_ID$v, + 'data-garden-version': '8.69.9' +}).withConfig({ + displayName: "StyledMenuSeparator", + componentId: "sc-vjn46k-0" +})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$v, props)); +StyledMenuSeparator.defaultProps = { + theme: DEFAULT_THEME +}; + +const Listbox = reactExports.forwardRef((_ref, ref) => { + let { + appendToNode, + children, + isCompact, + isExpanded, + maxHeight, + minHeight, + triggerRef, + zIndex, + ...props + } = _ref; + const floatingRef = reactExports.useRef(null); + const [isVisible, setIsVisible] = reactExports.useState(false); + const [height, setHeight] = reactExports.useState(); + const [width, setWidth] = reactExports.useState(); + const theme = reactExports.useContext(Be) || DEFAULT_THEME; + const { + refs, + placement, + update, + floatingStyles: { + transform + } + } = useFloating({ + elements: { + reference: triggerRef?.current, + floating: floatingRef?.current + }, + placement: 'bottom-start', + middleware: [offset$1(theme.space.base), flip$1(), size({ + apply: _ref2 => { + let { + rects, + availableHeight + } = _ref2; + if (rects.reference.width > 0) { + setWidth(rects.reference.width); + if (!(minHeight === null || minHeight === 'fit-content') && rects.floating.height > availableHeight) { + setHeight(availableHeight); + } + } + } + })] + }); + reactExports.useEffect(() => { + let cleanup; + if (isExpanded && refs.reference.current && refs.floating.current) { + cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, { + elementResize: typeof ResizeObserver === 'function' + }); + } + return () => cleanup && cleanup(); + }, [isExpanded, refs.reference, refs.floating, update]); + reactExports.useEffect(() => { + let timeout; + if (isExpanded) { + setIsVisible(true); + } else { + timeout = setTimeout(() => { + setIsVisible(false); + setHeight(undefined); + }, 200 ); + } + return () => clearTimeout(timeout); + }, [isExpanded]); + reactExports.useEffect(() => { + if (height) { + setHeight(undefined); + update(); + } + }, [ + children, update]); + const Node = React.createElement(StyledFloatingListbox, { + "data-garden-animate": isVisible ? 'true' : 'false', + isHidden: !isExpanded, + position: placement === 'bottom-start' ? 'bottom' : 'top', + style: { + transform, + width + }, + zIndex: zIndex, + ref: floatingRef + }, React.createElement(StyledListbox, _extends$5({ + isCompact: isCompact, + maxHeight: maxHeight, + minHeight: minHeight, + style: { + height + } + }, props, { + ref: ref + }), isVisible && children)); + return appendToNode ? reactDomExports.createPortal(Node, appendToNode) : Node; +}); +Listbox.displayName = 'Listbox'; +Listbox.propTypes = { + appendToNode: PropTypes.any, + isCompact: PropTypes.bool, + isExpanded: PropTypes.bool, + maxHeight: PropTypes.string, + triggerRef: PropTypes.any.isRequired, + zIndex: PropTypes.number +}; + +const toString = option => typeof option.value === 'string' ? option.value : JSON.stringify(option.value); +const toOption = props => { + return { + value: props.value, + label: props.label, + disabled: props.isDisabled, + selected: props.isSelected + }; }; +const toOptions = (children, optionTagProps) => reactExports.Children.toArray(children).reduce((options, option) => { + const retVal = options; + if ( reactExports.isValidElement(option)) { + if ('value' in option.props) { + retVal.push(toOption(option.props)); + optionTagProps[toString(option.props)] = option.props.tagProps; + } else { + const props = option.props; + const groupOptions = toOptions(props.children, optionTagProps); + retVal.push({ + label: props.label, + options: groupOptions + }); + } + } + return retVal; +}, []); -const COMPONENT_ID$2$3 = 'dropdowns.menu.item.type_icon'; -const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({ - 'data-garden-id': COMPONENT_ID$2$3, - 'data-garden-version': '8.69.9' -}).withConfig({ - displayName: "StyledItemTypeIcon", - componentId: "sc-15p2dtm-0" -})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => retrieveComponentStyles(COMPONENT_ID$2$3, props)); -StyledItemTypeIcon.defaultProps = { - theme: DEFAULT_THEME -}; +const TagAvatarComponent = Tag$1.Avatar; +TagAvatarComponent.displayName = 'Tag.Avatar'; +const TagAvatar = TagAvatarComponent; -const COMPONENT_ID$1$3 = 'dropdowns.menu'; -const StyledMenu$1 = styled(StyledListbox).attrs({ - 'data-garden-id': COMPONENT_ID$1$3, - 'data-garden-version': '8.69.9' -}).withConfig({ - displayName: "StyledMenu", - componentId: "sc-1ht6lc5-0" -})(["position:static !important;", ";", ";"], props => props.arrowPosition && arrowStyles(props.arrowPosition, { - size: `${props.theme.space.base * 2}px`, - inset: '2px', - animationModifier: '[data-garden-animate="true"]' -}), props => retrieveComponentStyles(COMPONENT_ID$1$3, props)); -StyledMenu$1.defaultProps = { - theme: DEFAULT_THEME +const TagComponent = reactExports.forwardRef((_ref, ref) => { + let { + children, + option, + removeLabel, + tooltipZIndex, + ...props + } = _ref; + const { + getTagProps, + isCompact, + removeSelection + } = useComboboxContext(); + const text = option.label || toString(option); + const ariaLabel = useText( + Tag, props, 'aria-label', `${text}, press delete or backspace to remove`, !option.disabled); + const tagProps = getTagProps({ + option, + 'aria-label': ariaLabel + }); + const theme = reactExports.useContext(Be) || DEFAULT_THEME; + const doc = useDocument(theme); + const handleClick = () => removeSelection(option.value); + return React.createElement(StyledTag, _extends$5({ + "aria-disabled": option.disabled, + tabIndex: option.disabled ? undefined : 0 + }, tagProps, props, { + size: isCompact ? 'medium' : 'large', + ref: ref + }), children || React.createElement("span", null, text), !option.disabled && (removeLabel ? + React.createElement(Tooltip, { + appendToNode: doc?.body, + content: removeLabel, + zIndex: tooltipZIndex + }, React.createElement(StyledTag.Close, { + "aria-label": removeLabel, + onClick: handleClick + })) : React.createElement(StyledTag.Close, { + onClick: handleClick + }))); +}); +TagComponent.displayName = 'Tag'; +TagComponent.propTypes = { + hue: PropTypes.string, + isPill: PropTypes.bool, + isRegular: PropTypes.bool, + removeLabel: PropTypes.string }; +const Tag = TagComponent; +Tag.Avatar = TagAvatar; -const COMPONENT_ID$v = 'dropdowns.menu.separator'; -const StyledMenuSeparator = styled(StyledListboxSeparator).attrs({ - 'data-garden-id': COMPONENT_ID$v, - 'data-garden-version': '8.69.9' -}).withConfig({ - displayName: "StyledMenuSeparator", - componentId: "sc-vjn46k-0" -})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$v, props)); -StyledMenuSeparator.defaultProps = { - theme: DEFAULT_THEME +const TagGroup = _ref => { + let { + children, + isDisabled, + isExpanded, + listboxZIndex, + maxTags, + optionTagProps, + selection + } = _ref; + return React.createElement(React.Fragment, null, selection.map((option, index) => { + const key = toString(option); + const disabled = isDisabled || option.disabled; + return React.createElement(Tag, _extends$5({ + key: key, + hidden: !isExpanded && index >= maxTags, + option: { + ...option, + disabled + }, + tooltipZIndex: listboxZIndex ? listboxZIndex + 1 : undefined + }, optionTagProps[key])); + }), children); }; +TagGroup.displayName = 'TagGroup'; -const Listbox = reactExports.forwardRef((_ref, ref) => { +const MAX_TAGS = 4; +const Combobox = reactExports.forwardRef((_ref, ref) => { let { - appendToNode, children, + activeIndex, + defaultActiveIndex, + defaultExpanded, + endIcon, + focusInset, + inputProps: _inputProps, + inputValue: _inputValue, + isAutocomplete, + isBare, + isCompact, + isDisabled, + isEditable, + isExpanded: _isExpanded, + isMultiselectable, + listboxAppendToNode, + listboxAriaLabel, + listboxMaxHeight, + listboxMinHeight, + listboxZIndex, + maxHeight, + maxTags = MAX_TAGS, + onChange, + placeholder, + renderExpandTags, + renderValue, + selectionValue, + startIcon, + validation, + ...props + } = _ref; + const { + hasHint, + hasMessage, + labelProps, + setLabelProps + } = useFieldContext(); + const [isInputHidden, setIsInputHidden] = reactExports.useState(true); + const [isLabelHovered, setIsLabelHovered] = reactExports.useState(false); + const [isTagGroupExpanded, setIsTagGroupExpanded] = reactExports.useState(false); + const [optionTagProps, setOptionTagProps] = reactExports.useState({}); + const options = reactExports.useMemo(() => { + const tagProps = {}; + const retVal = toOptions(children, tagProps); + if (isMultiselectable) { + setOptionTagProps(value => ({ + ...value, + ...tagProps + })); + } + return retVal; + }, [children, isMultiselectable]); + const triggerRef = reactExports.useRef(null); + const inputRef = reactExports.useRef(null); + const listboxRef = reactExports.useRef(null); + const theme = reactExports.useContext(Be) || DEFAULT_THEME; + const environment = useWindow(theme); + const { + activeValue, + inputValue, + isExpanded, + getTriggerProps, + getInputProps, + getLabelProps, + getListboxProps, + getOptionProps, + getOptGroupProps, + getTagProps, + removeSelection, + selection + } = useCombobox({ + idPrefix: props.id, + triggerRef, + inputRef, + listboxRef, + options, + environment, + hasHint, + hasMessage, + isAutocomplete, + isEditable, + isMultiselectable, + disabled: isDisabled, + inputValue: _inputValue, + selectionValue, + isExpanded: _isExpanded, + defaultExpanded, + activeIndex, + defaultActiveIndex, + onChange + }); + const contextValue = reactExports.useMemo(() => ({ + activeValue, + getOptionProps, + getOptGroupProps, + getTagProps, + isCompact, + removeSelection + }), [activeValue, getOptionProps, getOptGroupProps, getTagProps, isCompact, removeSelection]); + const hasChevron = reactExports.useMemo(() => !isBare && (isAutocomplete || !isEditable), [isAutocomplete, isBare, isEditable]); + const expandTags = useText(Combobox, { + renderExpandTags + }, 'renderExpandTags', '+ {{value}} more', isMultiselectable || false); + const _listboxAriaLabel = useText(Combobox, { + listboxAriaLabel + }, 'listboxAriaLabel', 'Options'); + const triggerProps = { + isAutocomplete, + isBare, isCompact, - isExpanded, + isEditable, + isLabelHovered, + isMultiselectable, maxHeight, - minHeight, - triggerRef, - zIndex, - ...props - } = _ref; - const floatingRef = reactExports.useRef(null); - const [isVisible, setIsVisible] = reactExports.useState(false); - const [height, setHeight] = reactExports.useState(); - const [width, setWidth] = reactExports.useState(); - const theme = reactExports.useContext(Be) || DEFAULT_THEME; - const { - refs, - placement, - update, - floatingStyles: { - transform - } - } = useFloating({ - elements: { - reference: triggerRef?.current, - floating: floatingRef?.current - }, - placement: 'bottom-start', - middleware: [offset$1(theme.space.base), flip$1(), size({ - apply: _ref2 => { - let { - rects, - availableHeight - } = _ref2; - if (rects.reference.width > 0) { - setWidth(rects.reference.width); - if (!(minHeight === null || minHeight === 'fit-content') && rects.floating.height > availableHeight) { - setHeight(availableHeight); + focusInset, + validation, + ...getTriggerProps({ + onFocus: () => { + if (isEditable) { + setIsInputHidden(false); + } + if (isMultiselectable) { + setIsTagGroupExpanded(true); + } + }, + onBlur: event => { + if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) { + if (isEditable) { + setIsInputHidden(true); + } + if (isMultiselectable) { + setIsTagGroupExpanded(false); } } } - })] + }) + }; + const inputProps = { + 'aria-invalid': validation === 'error' || validation === 'warning', + hidden: isInputHidden, + isBare, + isCompact, + isEditable, + isMultiselectable, + placeholder, + ...getInputProps({ + ..._inputProps + }) + }; + const listboxProps = getListboxProps({ + 'aria-label': _listboxAriaLabel }); reactExports.useEffect(() => { - let cleanup; - if (isExpanded && refs.reference.current && refs.floating.current) { - cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, { - elementResize: typeof ResizeObserver === 'function' + if (!labelProps) { + const _labelProps = getLabelProps({ + onMouseEnter: () => setIsLabelHovered(true), + onMouseLeave: () => setIsLabelHovered(false) }); + setLabelProps(_labelProps); } - return () => cleanup && cleanup(); - }, [isExpanded, refs.reference, refs.floating, update]); - reactExports.useEffect(() => { - let timeout; - if (isExpanded) { - setIsVisible(true); - } else { - timeout = setTimeout(() => { - setIsVisible(false); - setHeight(undefined); - }, 200 ); - } - return () => clearTimeout(timeout); - }, [isExpanded]); - reactExports.useEffect(() => { - if (height) { - setHeight(undefined); - update(); - } - }, [ - children, update]); - const Node = React.createElement(StyledFloatingListbox, { - "data-garden-animate": isVisible ? 'true' : 'false', - isHidden: !isExpanded, - position: placement === 'bottom-start' ? 'bottom' : 'top', - style: { - transform, - width - }, - zIndex: zIndex, - ref: floatingRef - }, React.createElement(StyledListbox, _extends$5$1({ + return () => labelProps && setLabelProps(undefined); + }, [getLabelProps, labelProps, setLabelProps]); + return React.createElement(ComboboxContext.Provider, { + value: contextValue + }, React.createElement(StyledCombobox, _extends$5({ isCompact: isCompact, - maxHeight: maxHeight, - minHeight: minHeight, - style: { - height - } + tabIndex: -1 + }, props, { + ref: ref + }), React.createElement(StyledTrigger, triggerProps, React.createElement(StyledContainer, null, startIcon && React.createElement(StyledInputIcon, { + isLabelHovered: isLabelHovered, + isCompact: isCompact + }, startIcon), React.createElement(StyledInputGroup, null, isMultiselectable && Array.isArray(selection) && React.createElement(TagGroup, { + isDisabled: isDisabled, + isExpanded: isTagGroupExpanded, + maxTags: maxTags, + optionTagProps: optionTagProps, + selection: selection + }, selection.length > maxTags && React.createElement(StyledTagsButton, { + disabled: isDisabled, + hidden: isTagGroupExpanded, + isCompact: isCompact, + tabIndex: -1, + type: "button" + }, (() => { + const value = selection.length - maxTags; + return renderExpandTags ? renderExpandTags(value) : expandTags?.replace('{{value}}', value.toString()); + })())), React.createElement(StyledValue, { + hidden: !isInputHidden, + isAutocomplete: isAutocomplete, + isBare: isBare, + isCompact: isCompact, + isDisabled: isDisabled, + isEditable: isEditable, + isMultiselectable: isMultiselectable, + isPlaceholder: !(inputValue || renderValue) + }, renderValue ? renderValue({ + selection, + inputValue + }) : inputValue || placeholder), React.createElement(StyledInput, inputProps)), (hasChevron || endIcon) && React.createElement(StyledInputIcon, { + isCompact: isCompact, + isEnd: true, + isLabelHovered: isLabelHovered, + isRotated: hasChevron && isExpanded + }, hasChevron ? React.createElement(SvgChevronDownStroke, null) : endIcon))), React.createElement(Listbox, _extends$5({ + appendToNode: listboxAppendToNode, + isCompact: isCompact, + isExpanded: isExpanded, + maxHeight: listboxMaxHeight, + minHeight: listboxMinHeight, + triggerRef: triggerRef, + zIndex: listboxZIndex + }, listboxProps), children))); +}); +Combobox.displayName = 'Combobox'; +Combobox.propTypes = { + activeIndex: PropTypes.number, + defaultActiveIndex: PropTypes.number, + defaultExpanded: PropTypes.bool, + endIcon: PropTypes.any, + focusInset: PropTypes.bool, + id: PropTypes.string, + inputProps: PropTypes.object, + inputValue: PropTypes.string, + isAutocomplete: PropTypes.bool, + isBare: PropTypes.bool, + isCompact: PropTypes.bool, + isDisabled: PropTypes.bool, + isEditable: PropTypes.bool, + isExpanded: PropTypes.bool, + isMultiselectable: PropTypes.bool, + listboxAppendToNode: PropTypes.any, + listboxAriaLabel: PropTypes.string, + listboxMaxHeight: PropTypes.string, + listboxMinHeight: PropTypes.string, + listboxZIndex: PropTypes.number, + maxHeight: PropTypes.string, + maxTags: PropTypes.number, + onChange: PropTypes.func, + placeholder: PropTypes.string, + renderExpandTags: PropTypes.func, + renderValue: PropTypes.func, + selectionValue: PropTypes.any, + startIcon: PropTypes.any, + validation: PropTypes.oneOf(VALIDATION) +}; +Combobox.defaultProps = { + isEditable: true, + listboxMaxHeight: '400px', + listboxZIndex: 1000, + maxTags: MAX_TAGS +}; + +const Field = reactExports.forwardRef((props, ref) => { + const [labelProps, setLabelProps] = reactExports.useState(undefined); + const [hasHint, setHasHint] = reactExports.useState(false); + const [hasMessage, setHasMessage] = reactExports.useState(false); + const contextValue = reactExports.useMemo(() => ({ + labelProps, + setLabelProps, + hasHint, + setHasHint, + hasMessage, + setHasMessage + }), [labelProps, setLabelProps, hasHint, setHasHint, hasMessage, setHasMessage]); + return React.createElement(FieldContext.Provider, { + value: contextValue + }, React.createElement(StyledField, _extends$5({}, props, { + ref: ref + }))); +}); +Field.displayName = 'Field'; + +const Hint = reactExports.forwardRef((props, ref) => { + const { + setHasHint + } = useFieldContext(); + reactExports.useEffect(() => { + setHasHint(true); + return () => setHasHint(false); + }, [setHasHint]); + return React.createElement(StyledHint, _extends$5({}, props, { + ref: ref + })); +}); +Hint.displayName = 'Hint'; + +const Label = reactExports.forwardRef((_ref, ref) => { + let { + onClick, + onMouseEnter, + onMouseLeave, + ...props + } = _ref; + const { + labelProps + } = useFieldContext(); + return React.createElement(StyledLabel, _extends$5({}, labelProps, { + onClick: composeEventHandlers$5(onClick, labelProps?.onClick), + onMouseEnter: composeEventHandlers$5(onMouseEnter, labelProps?.onMouseEnter), + onMouseLeave: composeEventHandlers$5(onMouseLeave, labelProps?.onMouseLeave) }, props, { ref: ref - }), isVisible && children)); - return appendToNode ? reactDomExports.createPortal(Node, appendToNode) : Node; + })); }); -Listbox.displayName = 'Listbox'; -Listbox.propTypes = { - appendToNode: PropTypes.any, - isCompact: PropTypes.bool, - isExpanded: PropTypes.bool, - maxHeight: PropTypes.string, - triggerRef: PropTypes.any.isRequired, - zIndex: PropTypes.number +Label.displayName = 'Label'; +Label.propTypes = { + hidden: PropTypes.bool, + isRegular: PropTypes.bool }; -const toString = option => typeof option.value === 'string' ? option.value : JSON.stringify(option.value); -const toOption = props => { - return { - value: props.value, - label: props.label, - disabled: props.isDisabled, - selected: props.isSelected - }; +const Message = reactExports.forwardRef((props, ref) => { + const { + setHasMessage + } = useFieldContext(); + reactExports.useEffect(() => { + setHasMessage(true); + return () => setHasMessage(false); + }, [setHasMessage]); + return React.createElement(StyledMessage, _extends$5({}, props, { + ref: ref + })); +}); +Message.displayName = 'Message'; +Message.propTypes = { + validation: PropTypes.oneOf(VALIDATION), + validationLabel: PropTypes.string }; -const toOptions = (children, optionTagProps) => reactExports.Children.toArray(children).reduce((options, option) => { - const retVal = options; - if ( reactExports.isValidElement(option)) { - if ('value' in option.props) { - retVal.push(toOption(option.props)); - optionTagProps[toString(option.props)] = option.props.tagProps; - } else { - const props = option.props; - const groupOptions = toOptions(props.children, optionTagProps); - retVal.push({ - label: props.label, - options: groupOptions - }); - } + +var _path$3; +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 SvgPlusStroke = function SvgPlusStroke(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 || (_path$3 = /*#__PURE__*/reactExports.createElement("path", { + stroke: "currentColor", + strokeLinecap: "round", + d: "M7.5 2.5v12m6-6h-12" + }))); +}; + +var _path$2; +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 SvgChevronRightStroke$1 = function SvgChevronRightStroke(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 || (_path$2 = /*#__PURE__*/reactExports.createElement("path", { + fill: "currentColor", + d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z" + }))); +}; + +var _path$1$1; +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); } +var SvgChevronLeftStroke$1 = function SvgChevronLeftStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$1$1({ + 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: "currentColor", + d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z" + }))); +}; + +var _path$5; +function _extends$6() { _extends$6 = 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.apply(this, arguments); } +var SvgCheckLgStroke = function SvgCheckLgStroke(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$6({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + focusable: "false", + viewBox: "0 0 16 16", + "aria-hidden": "true" + }, props), _path$5 || (_path$5 = /*#__PURE__*/reactExports.createElement("path", { + fill: "none", + stroke: "currentColor", + strokeLinecap: "round", + strokeLinejoin: "round", + d: "M1 9l4 4L15 3" + }))); +}; + +const OPTION_TYPE = ['add', 'danger', 'next', 'previous']; + +const OptionContext = reactExports.createContext(undefined); +const useOptionContext = () => { + const context = reactExports.useContext(OptionContext); + if (!context) { + throw new Error('Error: this component must be rendered within an