import { r as reactExports, R as React, a as reactDomExports, b as React$1, c as ReactDOM } from './vendor-react.js';
var jsxRuntime = {exports: {}};
var reactJsxRuntime_production_min = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var f$2=reactExports,k$2=Symbol.for("react.element"),l$2=Symbol.for("react.fragment"),m$2=Object.prototype.hasOwnProperty,n$2=f$2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p$2={key:true,ref:true,__self:true,__source:true};
function q$2(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m$2.call(a,b)&&!p$2.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a) void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k$2,type:c,key:e,ref:h,props:d,_owner:n$2.current}}reactJsxRuntime_production_min.Fragment=l$2;reactJsxRuntime_production_min.jsx=q$2;reactJsxRuntime_production_min.jsxs=q$2;
{
jsxRuntime.exports = reactJsxRuntime_production_min;
}
var jsxRuntimeExports = jsxRuntime.exports;
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 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
var ReactPropTypesSecret_1 = 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 ReactPropTypesSecret = ReactPropTypesSecret_1;
function emptyFunction() {}
function emptyFunctionWithReset() {}
emptyFunctionWithReset.resetWarningCache = emptyFunction;
var 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;
};
{
propTypes.exports = factoryWithThrowingShims();
}
var propTypesExports = propTypes.exports;
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
// https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
function isPlainObject(item) {
if (typeof item !== 'object' || item === null) {
return false;
}
const prototype = Object.getPrototypeOf(item);
return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
}
function deepClone(source) {
if ( /*#__PURE__*/reactExports.isValidElement(source) || !isPlainObject(source)) {
return source;
}
const output = {};
Object.keys(source).forEach(key => {
output[key] = deepClone(source[key]);
});
return output;
}
function deepmerge(target, source, options = {
clone: true
}) {
const output = options.clone ? _extends({}, target) : target;
if (isPlainObject(target) && isPlainObject(source)) {
Object.keys(source).forEach(key => {
if ( /*#__PURE__*/reactExports.isValidElement(source[key])) {
output[key] = source[key];
} else if (isPlainObject(source[key]) &&
// Avoid prototype pollution
Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
// Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
output[key] = deepmerge(target[key], source[key], options);
} else if (options.clone) {
output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
} else {
output[key] = source[key];
}
});
}
return output;
}
/**
* WARNING: Don't import this directly.
* Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
* @param {number} code
*/
function formatMuiErrorMessage(code) {
// Apply babel-plugin-transform-template-literals in loose mode
// loose mode is safe if we're concatenating primitives
// see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
/* eslint-disable prefer-template */
let url = 'https://mui.com/production-error/?code=' + code;
for (let i = 1; i < arguments.length; i += 1) {
// rest params over-transpile for this case
// eslint-disable-next-line prefer-rest-params
url += '&args[]=' + encodeURIComponent(arguments[i]);
}
return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
/* eslint-enable prefer-template */
}
function capitalize(string) {
if (typeof string !== "string") {
throw new Error(formatMuiErrorMessage(7));
}
return string.charAt(0).toUpperCase() + string.slice(1);
}
/**
* Safe chained function.
*
* Will only create a new function if needed,
* otherwise will pass back existing functions or null.
*/
function createChainedFunction(...funcs) {
return funcs.reduce((acc, func) => {
if (func == null) {
return acc;
}
return function chainedFunction(...args) {
acc.apply(this, args);
func.apply(this, args);
};
}, () => {});
}
// Corresponds to 10 frames at 60 Hz.
// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
function debounce$1(func, wait = 166) {
let timeout;
function debounced(...args) {
const later = () => {
// @ts-ignore
func.apply(this, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
debounced.clear = () => {
clearTimeout(timeout);
};
return debounced;
}
function deprecatedPropType(validator, reason) {
{
return () => null;
}
}
function isMuiElement(element, muiNames) {
var _muiName, _element$type;
return /*#__PURE__*/reactExports.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
// relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
// eslint-disable-next-line no-underscore-dangle
(_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
}
function ownerDocument(node) {
return node && node.ownerDocument || document;
}
function ownerWindow(node) {
const doc = ownerDocument(node);
return doc.defaultView || window;
}
function requirePropFactory(componentNameInError, Component) {
{
return () => null;
}
}
/**
* TODO v5: consider making it private
*
* passes {value} to {ref}
*
* WARNING: Be sure to only call this inside a callback that is passed as a ref.
* Otherwise, make sure to cleanup the previous {ref} if it changes. See
* https://github.com/mui/material-ui/issues/13539
*
* Useful if you want to expose the ref of an inner component to the public API
* while still using it inside the component.
* @param ref A ref callback or ref object. If anything falsy, this is a no-op.
*/
function setRef(ref, value) {
if (typeof ref === 'function') {
ref(value);
} else if (ref) {
ref.current = value;
}
}
/**
* A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
* This is useful for effects that are only needed for client-side rendering but not for SSR.
*
* Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
* and confirm it doesn't apply to your use-case.
*/
const useEnhancedEffect = typeof window !== 'undefined' ? reactExports.useLayoutEffect : reactExports.useEffect;
let globalId = 0;
function useGlobalId(idOverride) {
const [defaultId, setDefaultId] = reactExports.useState(idOverride);
const id = idOverride || defaultId;
reactExports.useEffect(() => {
if (defaultId == null) {
// Fallback to this default id when possible.
// Use the incrementing value for client-side rendering only.
// We can't use it server-side.
// If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
globalId += 1;
setDefaultId(`mui-${globalId}`);
}
}, [defaultId]);
return id;
}
// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
const maybeReactUseId = React['useId'.toString()];
/**
*
* @example
* @param idOverride
* @returns {string}
*/
function useId(idOverride) {
if (maybeReactUseId !== undefined) {
const reactId = maybeReactUseId();
return idOverride != null ? idOverride : reactId;
}
// eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
return useGlobalId(idOverride);
}
function unsupportedProp(props, propName, componentName, location, propFullName) {
{
return null;
}
}
function useControlled({
controlled,
default: defaultProp,
name,
state = "value"
}) {
const {
current: isControlled
} = reactExports.useRef(controlled !== void 0);
const [valueState, setValue] = reactExports.useState(defaultProp);
const value = isControlled ? controlled : valueState;
const setValueIfUncontrolled = reactExports.useCallback((newValue) => {
if (!isControlled) {
setValue(newValue);
}
}, []);
return [value, setValueIfUncontrolled];
}
/**
* Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
* See RFC in https://github.com/reactjs/rfcs/pull/220
*/
function useEventCallback(fn) {
const ref = reactExports.useRef(fn);
useEnhancedEffect(() => {
ref.current = fn;
});
return reactExports.useRef((...args) =>
// @ts-expect-error hide `this`
(0, ref.current)(...args)).current;
}
function useForkRef(...refs) {
/**
* This will create a new function if the refs passed to this hook change and are all defined.
* This means react will call the old forkRef with `null` and the new forkRef
* with the ref. Cleanup naturally emerges from this behavior.
*/
return reactExports.useMemo(() => {
if (refs.every(ref => ref == null)) {
return null;
}
return instance => {
refs.forEach(ref => {
setRef(ref, instance);
});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, refs);
}
class Timeout {
constructor() {
this.currentId = null;
this.clear = () => {
if (this.currentId !== null) {
clearTimeout(this.currentId);
this.currentId = null;
}
};
this.disposeEffect = () => {
return this.clear;
};
}
static create() {
return new Timeout();
}
/**
* Executes `fn` after `delay`, clearing any previously scheduled call.
*/
start(delay, fn) {
this.clear();
this.currentId = setTimeout(() => {
this.currentId = null;
fn();
}, delay);
}
}
let hadKeyboardEvent = true;
let hadFocusVisibleRecently = false;
const hadFocusVisibleRecentlyTimeout = new Timeout();
const inputTypesWhitelist = {
text: true,
search: true,
url: true,
tel: true,
email: true,
password: true,
number: true,
date: true,
month: true,
week: true,
time: true,
datetime: true,
'datetime-local': true
};
/**
* Computes whether the given element should automatically trigger the
* `focus-visible` class being added, i.e. whether it should always match
* `:focus-visible` when focused.
* @param {Element} node
* @returns {boolean}
*/
function focusTriggersKeyboardModality(node) {
const {
type,
tagName
} = node;
if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
return true;
}
if (tagName === 'TEXTAREA' && !node.readOnly) {
return true;
}
if (node.isContentEditable) {
return true;
}
return false;
}
/**
* Keep track of our keyboard modality state with `hadKeyboardEvent`.
* If the most recent user interaction was via the keyboard;
* and the key press did not include a meta, alt/option, or control key;
* then the modality is keyboard. Otherwise, the modality is not keyboard.
* @param {KeyboardEvent} event
*/
function handleKeyDown(event) {
if (event.metaKey || event.altKey || event.ctrlKey) {
return;
}
hadKeyboardEvent = true;
}
/**
* If at any point a user clicks with a pointing device, ensure that we change
* the modality away from keyboard.
* This avoids the situation where a user presses a key on an already focused
* element, and then clicks on a different element, focusing it with a
* pointing device, while we still think we're in keyboard modality.
*/
function handlePointerDown() {
hadKeyboardEvent = false;
}
function handleVisibilityChange() {
if (this.visibilityState === 'hidden') {
// If the tab becomes active again, the browser will handle calling focus
// on the element (Safari actually calls it twice).
// If this tab change caused a blur on an element with focus-visible,
// re-apply the class when the user switches back to the tab.
if (hadFocusVisibleRecently) {
hadKeyboardEvent = true;
}
}
}
function prepare(doc) {
doc.addEventListener('keydown', handleKeyDown, true);
doc.addEventListener('mousedown', handlePointerDown, true);
doc.addEventListener('pointerdown', handlePointerDown, true);
doc.addEventListener('touchstart', handlePointerDown, true);
doc.addEventListener('visibilitychange', handleVisibilityChange, true);
}
function isFocusVisible(event) {
const {
target
} = event;
try {
return target.matches(':focus-visible');
} catch (error) {
// Browsers not implementing :focus-visible will throw a SyntaxError.
// We use our own heuristic for those browsers.
// Rethrow might be better if it's not the expected error but do we really
// want to crash if focus-visible malfunctioned?
}
// No need for validFocusTarget check. The user does that by attaching it to
// focusable events only.
return hadKeyboardEvent || focusTriggersKeyboardModality(target);
}
function useIsFocusVisible() {
const ref = reactExports.useCallback(node => {
if (node != null) {
prepare(node.ownerDocument);
}
}, []);
const isFocusVisibleRef = reactExports.useRef(false);
/**
* Should be called if a blur event is fired
*/
function handleBlurVisible() {
// checking against potential state variable does not suffice if we focus and blur synchronously.
// React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
// Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
// This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
// TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
if (isFocusVisibleRef.current) {
// To detect a tab/window switch, we look for a blur event followed
// rapidly by a visibility change.
// If we don't see a visibility change within 100ms, it's probably a
// regular focus change.
hadFocusVisibleRecently = true;
hadFocusVisibleRecentlyTimeout.start(100, () => {
hadFocusVisibleRecently = false;
});
isFocusVisibleRef.current = false;
return true;
}
return false;
}
/**
* Should be called if a blur event is fired
*/
function handleFocusVisible(event) {
if (isFocusVisible(event)) {
isFocusVisibleRef.current = true;
return true;
}
return false;
}
return {
isFocusVisibleRef,
onFocus: handleFocusVisible,
onBlur: handleBlurVisible,
ref
};
}
// A change of the browser zoom change the scrollbar size.
// Credit https://github.com/twbs/bootstrap/blob/488fd8afc535ca3a6ad4dc581f5e89217b6a36ac/js/src/util/scrollbar.js#L14-L18
function getScrollbarSize(doc) {
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
const documentWidth = doc.documentElement.clientWidth;
return Math.abs(window.innerWidth - documentWidth);
}
// Source from https://github.com/alitaheri/normalize-scroll-left
let cachedType;
/**
* Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type
*
* Types of scrollLeft, assuming scrollWidth=100 and direction is rtl.
*
* Type | <- Most Left | Most Right -> | Initial
* ---------------- | ------------ | ------------- | -------
* default | 0 | 100 | 100
* negative (spec*) | -100 | 0 | 0
* reverse | 100 | 0 | 0
*
* Edge 85: default
* Safari 14: negative
* Chrome 85: negative
* Firefox 81: negative
* IE11: reverse
*
* spec* https://drafts.csswg.org/cssom-view/#dom-window-scroll
*/
function detectScrollType() {
if (cachedType) {
return cachedType;
}
const dummy = document.createElement('div');
const container = document.createElement('div');
container.style.width = '10px';
container.style.height = '1px';
dummy.appendChild(container);
dummy.dir = 'rtl';
dummy.style.fontSize = '14px';
dummy.style.width = '4px';
dummy.style.height = '1px';
dummy.style.position = 'absolute';
dummy.style.top = '-1000px';
dummy.style.overflow = 'scroll';
document.body.appendChild(dummy);
cachedType = 'reverse';
if (dummy.scrollLeft > 0) {
cachedType = 'default';
} else {
dummy.scrollLeft = 1;
if (dummy.scrollLeft === 0) {
cachedType = 'negative';
}
}
document.body.removeChild(dummy);
return cachedType;
}
// Based on https://stackoverflow.com/a/24394376
function getNormalizedScrollLeft(element, direction) {
const scrollLeft = element.scrollLeft;
// Perform the calculations only when direction is rtl to avoid messing up the ltr behavior
if (direction !== 'rtl') {
return scrollLeft;
}
const type = detectScrollType();
switch (type) {
case 'negative':
return element.scrollWidth - element.clientWidth + scrollLeft;
case 'reverse':
return element.scrollWidth - element.clientWidth - scrollLeft;
default:
return scrollLeft;
}
}
/**
* Gets only the valid children of a component,
* and ignores any nullish or falsy child.
*
* @param children the children
*/
function getValidReactChildren(children) {
return reactExports.Children.toArray(children).filter(child => /*#__PURE__*/reactExports.isValidElement(child));
}
/**
* Add keys, values of `defaultProps` that does not exist in `props`
* @param {object} defaultProps
* @param {object} props
* @returns {object} resolved props
*/
function resolveProps(defaultProps, props) {
const output = _extends({}, props);
Object.keys(defaultProps).forEach(propName => {
if (propName.toString().match(/^(components|slots)$/)) {
output[propName] = _extends({}, defaultProps[propName], output[propName]);
} else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
const defaultSlotProps = defaultProps[propName] || {};
const slotProps = props[propName];
output[propName] = {};
if (!slotProps || !Object.keys(slotProps)) {
// Reduce the iteration if the slot props is empty
output[propName] = defaultSlotProps;
} else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
// Reduce the iteration if the default slot props is empty
output[propName] = slotProps;
} else {
output[propName] = _extends({}, slotProps);
Object.keys(defaultSlotProps).forEach(slotPropName => {
output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
});
}
} else if (output[propName] === undefined) {
output[propName] = defaultProps[propName];
}
});
return output;
}
function composeClasses(slots, getUtilityClass, classes = undefined) {
const output = {};
Object.keys(slots).forEach(
// `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
// @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
slot => {
output[slot] = slots[slot].reduce((acc, key) => {
if (key) {
const utilityClass = getUtilityClass(key);
if (utilityClass !== '') {
acc.push(utilityClass);
}
if (classes && classes[key]) {
acc.push(classes[key]);
}
}
return acc;
}, []).join(' ');
});
return output;
}
const defaultGenerator = componentName => componentName;
const createClassNameGenerator = () => {
let generate = defaultGenerator;
return {
configure(generator) {
generate = generator;
},
generate(componentName) {
return generate(componentName);
},
reset() {
generate = defaultGenerator;
}
};
};
const ClassNameGenerator = createClassNameGenerator();
const globalStateClasses = {
active: 'active',
checked: 'checked',
completed: 'completed',
disabled: 'disabled',
error: 'error',
expanded: 'expanded',
focused: 'focused',
focusVisible: 'focusVisible',
open: 'open',
readOnly: 'readOnly',
required: 'required',
selected: 'selected'
};
function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
const globalStateClass = globalStateClasses[slot];
return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
}
function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
const result = {};
slots.forEach(slot => {
result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
});
return result;
}
function clamp$1(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
return Math.max(min, Math.min(val, max));
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t 0 ? charat(characters, --position) : 0;
if (column--, character === 10)
column = 1, line--;
return character
}
/**
* @return {number}
*/
function next () {
character = position < length ? charat(characters, position++) : 0;
if (column++, character === 10)
column = 1, line++;
return character
}
/**
* @return {number}
*/
function peek () {
return charat(characters, position)
}
/**
* @return {number}
*/
function caret () {
return position
}
/**
* @param {number} begin
* @param {number} end
* @return {string}
*/
function slice (begin, end) {
return substr(characters, begin, end)
}
/**
* @param {number} type
* @return {number}
*/
function token (type) {
switch (type) {
// \0 \t \n \r \s whitespace token
case 0: case 9: case 10: case 13: case 32:
return 5
// ! + , / > @ ~ isolate token
case 33: case 43: case 44: case 47: case 62: case 64: case 126:
// ; { } breakpoint token
case 59: case 123: case 125:
return 4
// : accompanied token
case 58:
return 3
// " ' ( [ opening delimit token
case 34: case 39: case 40: case 91:
return 2
// ) ] closing delimit token
case 41: case 93:
return 1
}
return 0
}
/**
* @param {string} value
* @return {any[]}
*/
function alloc (value) {
return line = column = 1, length = strlen(characters = value), position = 0, []
}
/**
* @param {any} value
* @return {any}
*/
function dealloc (value) {
return characters = '', value
}
/**
* @param {number} type
* @return {string}
*/
function delimit (type) {
return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
}
/**
* @param {number} type
* @return {string}
*/
function whitespace (type) {
while (character = peek())
if (character < 33)
next();
else
break
return token(type) > 2 || token(character) > 3 ? '' : ' '
}
/**
* @param {number} index
* @param {number} count
* @return {string}
*/
function escaping (index, count) {
while (--count && next())
// not 0-9 A-F a-f
if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))
break
return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))
}
/**
* @param {number} type
* @return {number}
*/
function delimiter (type) {
while (next())
switch (character) {
// ] ) " '
case type:
return position
// " '
case 34: case 39:
if (type !== 34 && type !== 39)
delimiter(character);
break
// (
case 40:
if (type === 41)
delimiter(type);
break
// \
case 92:
next();
break
}
return position
}
/**
* @param {number} type
* @param {number} index
* @return {number}
*/
function commenter (type, index) {
while (next())
// //
if (type + character === 47 + 10)
break
// /*
else if (type + character === 42 + 42 && peek() === 47)
break
return '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next())
}
/**
* @param {number} index
* @return {string}
*/
function identifier (index) {
while (!token(peek()))
next();
return slice(index, position)
}
/**
* @param {string} value
* @return {object[]}
*/
function compile (value) {
return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value))
}
/**
* @param {string} value
* @param {object} root
* @param {object?} parent
* @param {string[]} rule
* @param {string[]} rules
* @param {string[]} rulesets
* @param {number[]} pseudo
* @param {number[]} points
* @param {string[]} declarations
* @return {object}
*/
function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
var index = 0;
var offset = 0;
var length = pseudo;
var atrule = 0;
var property = 0;
var previous = 0;
var variable = 1;
var scanning = 1;
var ampersand = 1;
var character = 0;
var type = '';
var props = rules;
var children = rulesets;
var reference = rule;
var characters = type;
while (scanning)
switch (previous = character, character = next()) {
// (
case 40:
if (previous != 108 && charat(characters, length - 1) == 58) {
if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f') != -1)
ampersand = -1;
break
}
// " ' [
case 34: case 39: case 91:
characters += delimit(character);
break
// \t \n \r \s
case 9: case 10: case 13: case 32:
characters += whitespace(previous);
break
// \
case 92:
characters += escaping(caret() - 1, 7);
continue
// /
case 47:
switch (peek()) {
case 42: case 47:
append(comment(commenter(next(), caret()), root, parent), declarations);
break
default:
characters += '/';
}
break
// {
case 123 * variable:
points[index++] = strlen(characters) * ampersand;
// } ; \0
case 125 * variable: case 59: case 0:
switch (character) {
// \0 }
case 0: case 125: scanning = 0;
// ;
case 59 + offset: if (ampersand == -1) characters = replace(characters, /\f/g, '');
if (property > 0 && (strlen(characters) - length))
append(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations);
break
// @ ;
case 59: characters += ';';
// { rule/at-rule
default:
append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets);
if (character === 123)
if (offset === 0)
parse(characters, root, reference, reference, props, rulesets, length, points, children);
else
switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
// d l m s
case 100: case 108: case 109: case 115:
parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
break
default:
parse(characters, reference, reference, reference, [''], children, 0, points, children);
}
}
index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo;
break
// :
case 58:
length = 1 + strlen(characters), property = previous;
default:
if (variable < 1)
if (character == 123)
--variable;
else if (character == 125 && variable++ == 0 && prev() == 125)
continue
switch (characters += from(character), character * variable) {
// &
case 38:
ampersand = offset > 0 ? 1 : (characters += '\f', -1);
break
// ,
case 44:
points[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1;
break
// @
case 64:
// -
if (peek() === 45)
characters += delimit(next());
atrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++;
break
// -
case 45:
if (previous === 45 && strlen(characters) == 2)
variable = 0;
}
}
return rulesets
}
/**
* @param {string} value
* @param {object} root
* @param {object?} parent
* @param {number} index
* @param {number} offset
* @param {string[]} rules
* @param {number[]} points
* @param {string} type
* @param {string[]} props
* @param {string[]} children
* @param {number} length
* @return {object}
*/
function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {
var post = offset - 1;
var rule = offset === 0 ? rules : [''];
var size = sizeof(rule);
for (var i = 0, j = 0, k = 0; i < index; ++i)
for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
if (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\f/g, rule[x])))
props[k++] = z;
return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length)
}
/**
* @param {number} value
* @param {object} root
* @param {object?} parent
* @return {object}
*/
function comment (value, root, parent) {
return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0)
}
/**
* @param {string} value
* @param {object} root
* @param {object?} parent
* @param {number} length
* @return {object}
*/
function declaration (value, root, parent, length) {
return node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length)
}
/**
* @param {object[]} children
* @param {function} callback
* @return {string}
*/
function serialize (children, callback) {
var output = '';
var length = sizeof(children);
for (var i = 0; i < length; i++)
output += callback(children[i], i, children, callback) || '';
return output
}
/**
* @param {object} element
* @param {number} index
* @param {object[]} children
* @param {function} callback
* @return {string}
*/
function stringify (element, index, children, callback) {
switch (element.type) {
case LAYER: if (element.children.length) break
case IMPORT: case DECLARATION: return element.return = element.return || element.value
case COMMENT: return ''
case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'
case RULESET: element.value = element.props.join(',');
}
return strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''
}
/**
* @param {function[]} collection
* @return {function}
*/
function middleware (collection) {
var length = sizeof(collection);
return function (element, index, children, callback) {
var output = '';
for (var i = 0; i < length; i++)
output += collection[i](element, index, children, callback) || '';
return output
}
}
/**
* @param {function} callback
* @return {function}
*/
function rulesheet (callback) {
return function (element) {
if (!element.root)
if (element = element.return)
callback(element);
}
}
var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
var previous = 0;
var character = 0;
while (true) {
previous = character;
character = peek(); // &\f
if (previous === 38 && character === 12) {
points[index] = 1;
}
if (token(character)) {
break;
}
next();
}
return slice(begin, position);
};
var toRules = function toRules(parsed, points) {
// pretend we've started with a comma
var index = -1;
var character = 44;
do {
switch (token(character)) {
case 0:
// &\f
if (character === 38 && peek() === 12) {
// this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
// stylis inserts \f after & to know when & where it should replace this sequence with the context selector
// and when it should just concatenate the outer and inner selectors
// it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
points[index] = 1;
}
parsed[index] += identifierWithPointTracking(position - 1, points, index);
break;
case 2:
parsed[index] += delimit(character);
break;
case 4:
// comma
if (character === 44) {
// colon
parsed[++index] = peek() === 58 ? '&\f' : '';
points[index] = parsed[index].length;
break;
}
// fallthrough
default:
parsed[index] += from(character);
}
} while (character = next());
return parsed;
};
var getRules = function getRules(value, points) {
return dealloc(toRules(alloc(value), points));
}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
var fixedElements = /* #__PURE__ */new WeakMap();
var compat = function compat(element) {
if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
// negative .length indicates that this rule has been already prefixed
element.length < 1) {
return;
}
var value = element.value;
var parent = element.parent;
var isImplicitRule = element.column === parent.column && element.line === parent.line;
while (parent.type !== 'rule') {
parent = parent.parent;
if (!parent) return;
} // short-circuit for the simplest case
if (element.props.length === 1 && value.charCodeAt(0) !== 58
/* colon */
&& !fixedElements.get(parent)) {
return;
} // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
// then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
if (isImplicitRule) {
return;
}
fixedElements.set(element, true);
var points = [];
var rules = getRules(value, points);
var parentRules = parent.props;
for (var i = 0, k = 0; i < rules.length; i++) {
for (var j = 0; j < parentRules.length; j++, k++) {
element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
}
}
};
var removeLabel = function removeLabel(element) {
if (element.type === 'decl') {
var value = element.value;
if ( // charcode for l
value.charCodeAt(0) === 108 && // charcode for b
value.charCodeAt(2) === 98) {
// this ignores label
element["return"] = '';
element.value = '';
}
}
};
/* eslint-disable no-fallthrough */
function prefix(value, length) {
switch (hash$2(value, length)) {
// color-adjust
case 5103:
return WEBKIT + 'print-' + value + value;
// animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
case 5737:
case 4201:
case 3177:
case 3433:
case 1641:
case 4457:
case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
case 5572:
case 6356:
case 5844:
case 3191:
case 6645:
case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
case 6391:
case 5879:
case 5623:
case 6135:
case 4599:
case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
case 4215:
case 6389:
case 5109:
case 5365:
case 5621:
case 3829:
return WEBKIT + value + value;
// appearance, user-select, transform, hyphens, text-size-adjust
case 5349:
case 4246:
case 4810:
case 6968:
case 2756:
return WEBKIT + value + MOZ + value + MS + value + value;
// flex, flex-direction
case 6828:
case 4268:
return WEBKIT + value + MS + value + value;
// order
case 6165:
return WEBKIT + value + MS + 'flex-' + value + value;
// align-items
case 5187:
return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;
// align-self
case 5443:
return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value;
// align-content
case 4675:
return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value;
// flex-shrink
case 5548:
return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;
// flex-basis
case 5292:
return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;
// flex-grow
case 6060:
return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;
// transition
case 4554:
return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;
// cursor
case 6187:
return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;
// background, background-image
case 5495:
case 3959:
return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1');
// justify-content
case 4968:
return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;
// (margin|padding)-inline-(start|end)
case 4095:
case 3583:
case 4068:
case 2532:
return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;
// (min|max)?(width|height|inline-size|block-size)
case 8116:
case 7059:
case 5753:
case 5535:
case 5445:
case 5701:
case 4933:
case 4677:
case 5533:
case 5789:
case 5021:
case 4765:
// stretch, max-content, min-content, fill-available
if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
// (m)ax-content, (m)in-content
case 109:
// -
if (charat(value, length + 4) !== 45) break;
// (f)ill-available, (f)it-content
case 102:
return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
// (s)tretch
case 115:
return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value;
}
break;
// position: sticky
case 4949:
// (s)ticky?
if (charat(value, length + 1) !== 115) break;
// display: (flex|inline-flex)
case 6444:
switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
// stic(k)y
case 107:
return replace(value, ':', ':' + WEBKIT) + value;
// (inline-)?fl(e)x
case 101:
return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;
}
break;
// writing-mode
case 5936:
switch (charat(value, length + 11)) {
// vertical-l(r)
case 114:
return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
// vertical-r(l)
case 108:
return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
// horizontal(-)tb
case 45:
return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
}
return WEBKIT + value + MS + value + value;
}
return value;
}
var prefixer = function prefixer(element, index, children, callback) {
if (element.length > -1) if (!element["return"]) switch (element.type) {
case DECLARATION:
element["return"] = prefix(element.value, element.length);
break;
case KEYFRAMES:
return serialize([copy(element, {
value: replace(element.value, '@', '@' + WEBKIT)
})], callback);
case RULESET:
if (element.length) return combine(element.props, function (value) {
switch (match(value, /(::plac\w+|:read-\w+)/)) {
// :read-(only|write)
case ':read-only':
case ':read-write':
return serialize([copy(element, {
props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
})], callback);
// :placeholder
case '::placeholder':
return serialize([copy(element, {
props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]
}), copy(element, {
props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
}), copy(element, {
props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
})], callback);
}
return '';
});
}
};
var defaultStylisPlugins = [prefixer];
var createCache = function createCache(options) {
var key = options.key;
if (key === 'css') {
var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
// document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
// note this very very intentionally targets all style elements regardless of the key to ensure
// that creating a cache works inside of render of a React component
Array.prototype.forEach.call(ssrStyles, function (node) {
// we want to only move elements which have a space in the data-emotion attribute value
// because that indicates that it is an Emotion 11 server-side rendered style elements
// while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
// Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
// so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
// will not result in the Emotion 10 styles being destroyed
var dataEmotionAttribute = node.getAttribute('data-emotion');
if (dataEmotionAttribute.indexOf(' ') === -1) {
return;
}
document.head.appendChild(node);
node.setAttribute('data-s', '');
});
}
var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
var inserted = {};
var container;
var nodesToHydrate = [];
{
container = options.container || document.head;
Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
// means that the style elements we're looking at are only Emotion 11 server-rendered style elements
document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
var attrib = node.getAttribute("data-emotion").split(' ');
for (var i = 1; i < attrib.length; i++) {
inserted[attrib[i]] = true;
}
nodesToHydrate.push(node);
});
}
var _insert;
var omnipresentPlugins = [compat, removeLabel];
{
var currentSheet;
var finalizingPlugins = [stringify, rulesheet(function (rule) {
currentSheet.insert(rule);
})];
var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
var stylis = function stylis(styles) {
return serialize(compile(styles), serializer);
};
_insert = function insert(selector, serialized, sheet, shouldCache) {
currentSheet = sheet;
stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
if (shouldCache) {
cache.inserted[serialized.name] = true;
}
};
}
var cache = {
key: key,
sheet: new StyleSheet({
key: key,
container: container,
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend,
insertionPoint: options.insertionPoint
}),
nonce: options.nonce,
inserted: inserted,
registered: {},
insert: _insert
};
cache.sheet.hydrate(nodesToHydrate);
return cache;
};
var reactIs$1 = {exports: {}};
var reactIs_production_min$1 = {};
/** @license React v16.13.1
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var b$1="function"===typeof Symbol&&Symbol.for,c$1=b$1?Symbol.for("react.element"):60103,d$1=b$1?Symbol.for("react.portal"):60106,e$1=b$1?Symbol.for("react.fragment"):60107,f$1=b$1?Symbol.for("react.strict_mode"):60108,g$1=b$1?Symbol.for("react.profiler"):60114,h$1=b$1?Symbol.for("react.provider"):60109,k$1=b$1?Symbol.for("react.context"):60110,l$1=b$1?Symbol.for("react.async_mode"):60111,m$1=b$1?Symbol.for("react.concurrent_mode"):60111,n$1=b$1?Symbol.for("react.forward_ref"):60112,p$1=b$1?Symbol.for("react.suspense"):60113,q$1=b$1?
Symbol.for("react.suspense_list"):60120,r=b$1?Symbol.for("react.memo"):60115,t$1=b$1?Symbol.for("react.lazy"):60116,v$1=b$1?Symbol.for("react.block"):60121,w=b$1?Symbol.for("react.fundamental"):60117,x=b$1?Symbol.for("react.responder"):60118,y=b$1?Symbol.for("react.scope"):60119;
function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c$1:switch(a=a.type,a){case l$1:case m$1:case e$1:case g$1:case f$1:case p$1:return a;default:switch(a=a&&a.$$typeof,a){case k$1:case n$1:case t$1:case r:case h$1:return a;default:return u}}case d$1:return u}}}function A(a){return z(a)===m$1}reactIs_production_min$1.AsyncMode=l$1;reactIs_production_min$1.ConcurrentMode=m$1;reactIs_production_min$1.ContextConsumer=k$1;reactIs_production_min$1.ContextProvider=h$1;reactIs_production_min$1.Element=c$1;reactIs_production_min$1.ForwardRef=n$1;reactIs_production_min$1.Fragment=e$1;reactIs_production_min$1.Lazy=t$1;reactIs_production_min$1.Memo=r;reactIs_production_min$1.Portal=d$1;
reactIs_production_min$1.Profiler=g$1;reactIs_production_min$1.StrictMode=f$1;reactIs_production_min$1.Suspense=p$1;reactIs_production_min$1.isAsyncMode=function(a){return A(a)||z(a)===l$1};reactIs_production_min$1.isConcurrentMode=A;reactIs_production_min$1.isContextConsumer=function(a){return z(a)===k$1};reactIs_production_min$1.isContextProvider=function(a){return z(a)===h$1};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c$1};reactIs_production_min$1.isForwardRef=function(a){return z(a)===n$1};reactIs_production_min$1.isFragment=function(a){return z(a)===e$1};reactIs_production_min$1.isLazy=function(a){return z(a)===t$1};
reactIs_production_min$1.isMemo=function(a){return z(a)===r};reactIs_production_min$1.isPortal=function(a){return z(a)===d$1};reactIs_production_min$1.isProfiler=function(a){return z(a)===g$1};reactIs_production_min$1.isStrictMode=function(a){return z(a)===f$1};reactIs_production_min$1.isSuspense=function(a){return z(a)===p$1};
reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e$1||a===m$1||a===g$1||a===f$1||a===p$1||a===q$1||"object"===typeof a&&null!==a&&(a.$$typeof===t$1||a.$$typeof===r||a.$$typeof===h$1||a.$$typeof===k$1||a.$$typeof===n$1||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v$1)};reactIs_production_min$1.typeOf=z;
{
reactIs$1.exports = reactIs_production_min$1;
}
var reactIsExports = reactIs$1.exports;
var reactIs = reactIsExports;
var FORWARD_REF_STATICS = {
'$$typeof': true,
render: true,
defaultProps: true,
displayName: true,
propTypes: true
};
var MEMO_STATICS = {
'$$typeof': true,
compare: true,
defaultProps: true,
displayName: true,
propTypes: true,
type: true
};
var TYPE_STATICS = {};
TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
var isBrowser = true;
function getRegisteredStyles(registered, registeredStyles, classNames) {
var rawClassName = '';
classNames.split(' ').forEach(function (className) {
if (registered[className] !== undefined) {
registeredStyles.push(registered[className] + ";");
} else if (className) {
rawClassName += className + " ";
}
});
return rawClassName;
}
var registerStyles = function registerStyles(cache, serialized, isStringTag) {
var className = cache.key + "-" + serialized.name;
if ( // we only need to add the styles to the registered cache if the
// class name could be used further down
// the tree but if it's a string tag, we know it won't
// so we don't have to add it to registered cache.
// this improves memory usage since we can avoid storing the whole style string
(isStringTag === false || // we need to always store it if we're in compat mode and
// in node since emotion-server relies on whether a style is in
// the registered cache to know whether a style is global or not
// also, note that this check will be dead code eliminated in the browser
isBrowser === false ) && cache.registered[className] === undefined) {
cache.registered[className] = serialized.styles;
}
};
var insertStyles = function insertStyles(cache, serialized, isStringTag) {
registerStyles(cache, serialized, isStringTag);
var className = cache.key + "-" + serialized.name;
if (cache.inserted[serialized.name] === undefined) {
var current = serialized;
do {
cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
current = current.next;
} while (current !== undefined);
}
};
/* eslint-disable */
// Inspired by https://github.com/garycourt/murmurhash-js
// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
function murmur2(str) {
// 'm' and 'r' are mixing constants generated offline.
// They're not really 'magic', they just happen to work well.
// const m = 0x5bd1e995;
// const r = 24;
// Initialize the hash
var h = 0; // Mix 4 bytes at a time into the hash
var k,
i = 0,
len = str.length;
for (; len >= 4; ++i, len -= 4) {
k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
k =
/* Math.imul(k, m): */
(k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
k ^=
/* k >>> r: */
k >>> 24;
h =
/* Math.imul(k, m): */
(k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
/* Math.imul(h, m): */
(h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
} // Handle the last few bytes of the input array
switch (len) {
case 3:
h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
case 2:
h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
case 1:
h ^= str.charCodeAt(i) & 0xff;
h =
/* Math.imul(h, m): */
(h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
} // Do a few final mixes of the hash to ensure the last few
// bytes are well-incorporated.
h ^= h >>> 13;
h =
/* Math.imul(h, m): */
(h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
return ((h ^ h >>> 15) >>> 0).toString(36);
}
var unitlessKeys = {
animationIterationCount: 1,
aspectRatio: 1,
borderImageOutset: 1,
borderImageSlice: 1,
borderImageWidth: 1,
boxFlex: 1,
boxFlexGroup: 1,
boxOrdinalGroup: 1,
columnCount: 1,
columns: 1,
flex: 1,
flexGrow: 1,
flexPositive: 1,
flexShrink: 1,
flexNegative: 1,
flexOrder: 1,
gridRow: 1,
gridRowEnd: 1,
gridRowSpan: 1,
gridRowStart: 1,
gridColumn: 1,
gridColumnEnd: 1,
gridColumnSpan: 1,
gridColumnStart: 1,
msGridRow: 1,
msGridRowSpan: 1,
msGridColumn: 1,
msGridColumnSpan: 1,
fontWeight: 1,
lineHeight: 1,
opacity: 1,
order: 1,
orphans: 1,
scale: 1,
tabSize: 1,
widows: 1,
zIndex: 1,
zoom: 1,
WebkitLineClamp: 1,
// SVG-related properties
fillOpacity: 1,
floodOpacity: 1,
stopOpacity: 1,
strokeDasharray: 1,
strokeDashoffset: 1,
strokeMiterlimit: 1,
strokeOpacity: 1,
strokeWidth: 1
};
var hyphenateRegex = /[A-Z]|^ms/g;
var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
var isCustomProperty = function isCustomProperty(property) {
return property.charCodeAt(1) === 45;
};
var isProcessableValue = function isProcessableValue(value) {
return value != null && typeof value !== 'boolean';
};
var processStyleName = /* #__PURE__ */memoize$1(function (styleName) {
return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
switch (key) {
case 'animation':
case 'animationName':
{
if (typeof value === 'string') {
return value.replace(animationRegex, function (match, p1, p2) {
cursor = {
name: p1,
styles: p2,
next: cursor
};
return p1;
});
}
}
}
if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
return value + 'px';
}
return value;
};
function handleInterpolation(mergedProps, registered, interpolation) {
if (interpolation == null) {
return '';
}
var componentSelector = interpolation;
if (componentSelector.__emotion_styles !== undefined) {
return componentSelector;
}
switch (typeof interpolation) {
case 'boolean':
{
return '';
}
case 'object':
{
var keyframes = interpolation;
if (keyframes.anim === 1) {
cursor = {
name: keyframes.name,
styles: keyframes.styles,
next: cursor
};
return keyframes.name;
}
var serializedStyles = interpolation;
if (serializedStyles.styles !== undefined) {
var next = serializedStyles.next;
if (next !== undefined) {
// not the most efficient thing ever but this is a pretty rare case
// and there will be very few iterations of this generally
while (next !== undefined) {
cursor = {
name: next.name,
styles: next.styles,
next: cursor
};
next = next.next;
}
}
var styles = serializedStyles.styles + ";";
return styles;
}
return createStringFromObject(mergedProps, registered, interpolation);
}
case 'function':
{
if (mergedProps !== undefined) {
var previousCursor = cursor;
var result = interpolation(mergedProps);
cursor = previousCursor;
return handleInterpolation(mergedProps, registered, result);
}
break;
}
} // finalize string values (regular strings and functions interpolated into css calls)
var asString = interpolation;
if (registered == null) {
return asString;
}
var cached = registered[asString];
return cached !== undefined ? cached : asString;
}
function createStringFromObject(mergedProps, registered, obj) {
var string = '';
if (Array.isArray(obj)) {
for (var i = 0; i < obj.length; i++) {
string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
}
} else {
for (var key in obj) {
var value = obj[key];
if (typeof value !== 'object') {
var asString = value;
if (registered != null && registered[asString] !== undefined) {
string += key + "{" + registered[asString] + "}";
} else if (isProcessableValue(asString)) {
string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
}
} else {
if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
for (var _i = 0; _i < value.length; _i++) {
if (isProcessableValue(value[_i])) {
string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
}
}
} else {
var interpolated = handleInterpolation(mergedProps, registered, value);
switch (key) {
case 'animation':
case 'animationName':
{
string += processStyleName(key) + ":" + interpolated + ";";
break;
}
default:
{
string += key + "{" + interpolated + "}";
}
}
}
}
}
}
return string;
}
var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes
// keyframes are stored on the SerializedStyles object as a linked list
var cursor;
function serializeStyles(args, registered, mergedProps) {
if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
return args[0];
}
var stringMode = true;
var styles = '';
cursor = undefined;
var strings = args[0];
if (strings == null || strings.raw === undefined) {
stringMode = false;
styles += handleInterpolation(mergedProps, registered, strings);
} else {
var asTemplateStringsArr = strings;
styles += asTemplateStringsArr[0];
} // we start at 1 since we've already handled the first arg
for (var i = 1; i < args.length; i++) {
styles += handleInterpolation(mergedProps, registered, args[i]);
if (stringMode) {
var templateStringsArr = strings;
styles += templateStringsArr[i];
}
} // using a global regex with .exec is stateful so lastIndex has to be reset each time
labelPattern.lastIndex = 0;
var identifierName = '';
var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
while ((match = labelPattern.exec(styles)) !== null) {
identifierName += '-' + match[1];
}
var name = murmur2(styles) + identifierName;
return {
name: name,
styles: styles,
next: cursor
};
}
var syncFallback = function syncFallback(create) {
return create();
};
var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;
var useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;
var useInsertionEffectWithLayoutFallback = useInsertionEffect || reactExports.useLayoutEffect;
var EmotionCacheContext = /* @__PURE__ */ reactExports.createContext(
// we're doing this to avoid preconstruct's dead code elimination in this one case
// because this module is primarily intended for the browser and node
// but it's also required in react native and similar environments sometimes
// and we could have a special build just for that
// but this is much easier and the native packages
// might use a different theme context in the future anyway
typeof HTMLElement !== "undefined" ? /* @__PURE__ */ createCache({
key: "css"
}) : null
);
EmotionCacheContext.Provider;
var withEmotionCache = function withEmotionCache2(func) {
return /* @__PURE__ */ reactExports.forwardRef(function(props, ref) {
var cache = reactExports.useContext(EmotionCacheContext);
return func(props, cache, ref);
});
};
var ThemeContext$1 = /* @__PURE__ */ reactExports.createContext({});
var Global = /* @__PURE__ */ withEmotionCache(function(props, cache) {
var styles = props.styles;
var serialized = serializeStyles([styles], void 0, reactExports.useContext(ThemeContext$1));
var sheetRef = reactExports.useRef();
useInsertionEffectWithLayoutFallback(function() {
var key = cache.key + "-global";
var sheet = new cache.sheet.constructor({
key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
speedy: cache.sheet.isSpeedy
});
var rehydrating = false;
var node = document.querySelector('style[data-emotion="' + key + " " + serialized.name + '"]');
if (cache.sheet.tags.length) {
sheet.before = cache.sheet.tags[0];
}
if (node !== null) {
rehydrating = true;
node.setAttribute("data-emotion", key);
sheet.hydrate([node]);
}
sheetRef.current = [sheet, rehydrating];
return function() {
sheet.flush();
};
}, [cache]);
useInsertionEffectWithLayoutFallback(function() {
var sheetRefCurrent = sheetRef.current;
var sheet = sheetRefCurrent[0], rehydrating = sheetRefCurrent[1];
if (rehydrating) {
sheetRefCurrent[1] = false;
return;
}
if (serialized.next !== void 0) {
insertStyles(cache, serialized.next, true);
}
if (sheet.tags.length) {
var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
sheet.before = element;
sheet.flush();
}
cache.insert("", serialized, sheet, false);
}, [cache, serialized.name]);
return null;
});
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return serializeStyles(args);
}
var keyframes = function keyframes2() {
var insertable = css.apply(void 0, arguments);
var name = "animation-" + insertable.name;
return {
name,
styles: "@keyframes " + name + "{" + insertable.styles + "}",
anim: 1,
toString: function toString() {
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
}
};
};
var testOmitPropsOnStringTag = isPropValid;
var testOmitPropsOnComponent = function testOmitPropsOnComponent2(key) {
return key !== "theme";
};
var getDefaultShouldForwardProp = function getDefaultShouldForwardProp2(tag) {
return typeof tag === "string" && // 96 is one less than the char code
// for "a" so this is checking that
// it's a lowercase character
tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
};
var composeShouldForwardProps = function composeShouldForwardProps2(tag, options, isReal) {
var shouldForwardProp;
if (options) {
var optionsShouldForwardProp = options.shouldForwardProp;
shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function(propName) {
return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
} : optionsShouldForwardProp;
}
if (typeof shouldForwardProp !== "function" && isReal) {
shouldForwardProp = tag.__emotion_forwardProp;
}
return shouldForwardProp;
};
var Insertion = function Insertion2(_ref) {
var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
registerStyles(cache, serialized, isStringTag);
useInsertionEffectAlwaysWithSyncFallback(function() {
return insertStyles(cache, serialized, isStringTag);
});
return null;
};
var createStyled$1 = function createStyled2(tag, options) {
var isReal = tag.__emotion_real === tag;
var baseTag = isReal && tag.__emotion_base || tag;
var identifierName;
var targetClassName;
if (options !== void 0) {
identifierName = options.label;
targetClassName = options.target;
}
var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
var shouldUseAs = !defaultShouldForwardProp("as");
return function() {
var args = arguments;
var styles = isReal && tag.__emotion_styles !== void 0 ? tag.__emotion_styles.slice(0) : [];
if (identifierName !== void 0) {
styles.push("label:" + identifierName + ";");
}
if (args[0] == null || args[0].raw === void 0) {
styles.push.apply(styles, args);
} else {
styles.push(args[0][0]);
var len = args.length;
var i = 1;
for (; i < len; i++) {
styles.push(args[i], args[0][i]);
}
}
var Styled = withEmotionCache(function(props, cache, ref) {
var FinalTag = shouldUseAs && props.as || baseTag;
var className = "";
var classInterpolations = [];
var mergedProps = props;
if (props.theme == null) {
mergedProps = {};
for (var key in props) {
mergedProps[key] = props[key];
}
mergedProps.theme = reactExports.useContext(ThemeContext$1);
}
if (typeof props.className === "string") {
className = getRegisteredStyles(cache.registered, classInterpolations, props.className);
} else if (props.className != null) {
className = props.className + " ";
}
var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
className += cache.key + "-" + serialized.name;
if (targetClassName !== void 0) {
className += " " + targetClassName;
}
var finalShouldForwardProp = shouldUseAs && shouldForwardProp === void 0 ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
var newProps = {};
for (var _key in props) {
if (shouldUseAs && _key === "as") continue;
if (
// $FlowFixMe
finalShouldForwardProp(_key)
) {
newProps[_key] = props[_key];
}
}
newProps.className = className;
newProps.ref = ref;
return /* @__PURE__ */ reactExports.createElement(reactExports.Fragment, null, /* @__PURE__ */ reactExports.createElement(Insertion, {
cache,
serialized,
isStringTag: typeof FinalTag === "string"
}), /* @__PURE__ */ reactExports.createElement(FinalTag, newProps));
});
Styled.displayName = identifierName !== void 0 ? identifierName : "Styled(" + (typeof baseTag === "string" ? baseTag : baseTag.displayName || baseTag.name || "Component") + ")";
Styled.defaultProps = tag.defaultProps;
Styled.__emotion_real = Styled;
Styled.__emotion_base = baseTag;
Styled.__emotion_styles = styles;
Styled.__emotion_forwardProp = shouldForwardProp;
Object.defineProperty(Styled, "toString", {
value: function value() {
return "." + targetClassName;
}
});
Styled.withComponent = function(nextTag, nextOptions) {
return createStyled2(nextTag, _extends({}, options, nextOptions, {
shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
})).apply(void 0, styles);
};
return Styled;
};
};
var tags = ['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', // SVG
'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
var newStyled = createStyled$1.bind();
tags.forEach(function (tagName) {
// $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
newStyled[tagName] = newStyled(tagName);
});
function isEmpty$3(obj) {
return obj === void 0 || obj === null || Object.keys(obj).length === 0;
}
function GlobalStyles$2(props) {
const {
styles,
defaultTheme = {}
} = props;
const globalStyles = typeof styles === "function" ? (themeInput) => styles(isEmpty$3(themeInput) ? defaultTheme : themeInput) : styles;
return /* @__PURE__ */ jsxRuntimeExports.jsx(Global, {
styles: globalStyles
});
}
function styled$2(tag, options) {
const stylesFactory = newStyled(tag, options);
return stylesFactory;
}
const internal_processStyles = (tag, processor) => {
if (Array.isArray(tag.__emotion_styles)) {
tag.__emotion_styles = processor(tag.__emotion_styles);
}
};
const wrapper = [];
function internal_serializeStyles(styles) {
wrapper[0] = styles;
return serializeStyles(wrapper);
}
const _excluded$_ = ["values", "unit", "step"];
const sortBreakpointsValues = values => {
const breakpointsAsArray = Object.keys(values).map(key => ({
key,
val: values[key]
})) || [];
// Sort in ascending order
breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
return breakpointsAsArray.reduce((acc, obj) => {
return _extends({}, acc, {
[obj.key]: obj.val
});
}, {});
};
// Keep in mind that @media is inclusive by the CSS specification.
function createBreakpoints(breakpoints) {
const {
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm).
values = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
},
unit = 'px',
step = 5
} = breakpoints,
other = _objectWithoutPropertiesLoose(breakpoints, _excluded$_);
const sortedValues = sortBreakpointsValues(values);
const keys = Object.keys(sortedValues);
function up(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (min-width:${value}${unit})`;
}
function down(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (max-width:${value - step / 100}${unit})`;
}
function between(start, end) {
const endIndex = keys.indexOf(end);
return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
}
function only(key) {
if (keys.indexOf(key) + 1 < keys.length) {
return between(key, keys[keys.indexOf(key) + 1]);
}
return up(key);
}
function not(key) {
// handle first and last key separately, for better readability
const keyIndex = keys.indexOf(key);
if (keyIndex === 0) {
return up(keys[1]);
}
if (keyIndex === keys.length - 1) {
return down(keys[keyIndex]);
}
return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
}
return _extends({
keys,
values: sortedValues,
up,
down,
between,
only,
not,
unit
}, other);
}
const shape = {
borderRadius: 4
};
function merge(acc, item) {
if (!item) {
return acc;
}
return deepmerge(acc, item, {
clone: false // No need to clone deep, it's way faster.
});
}
const values$1 = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536
// large screen
};
const defaultBreakpoints = {
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
keys: ["xs", "sm", "md", "lg", "xl"],
up: (key) => `@media (min-width:${values$1[key]}px)`
};
function handleBreakpoints(props, propValue, styleFromPropValue) {
const theme = props.theme || {};
if (Array.isArray(propValue)) {
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return propValue.reduce((acc, item, index) => {
acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
return acc;
}, {});
}
if (typeof propValue === "object") {
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return Object.keys(propValue).reduce((acc, breakpoint) => {
if (Object.keys(themeBreakpoints.values || values$1).indexOf(breakpoint) !== -1) {
const mediaKey = themeBreakpoints.up(breakpoint);
acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
} else {
const cssKey = breakpoint;
acc[cssKey] = propValue[cssKey];
}
return acc;
}, {});
}
const output = styleFromPropValue(propValue);
return output;
}
function createEmptyBreakpointObject(breakpointsInput = {}) {
var _breakpointsInput$key;
const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
const breakpointStyleKey = breakpointsInput.up(key);
acc[breakpointStyleKey] = {};
return acc;
}, {});
return breakpointsInOrder || {};
}
function removeUnusedBreakpoints(breakpointKeys, style) {
return breakpointKeys.reduce((acc, key) => {
const breakpointOutput = acc[key];
const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
if (isBreakpointUnused) {
delete acc[key];
}
return acc;
}, style);
}
function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
}
function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
if (typeof breakpointValues !== "object") {
return {};
}
const base = {};
const breakpointsKeys = Object.keys(themeBreakpoints);
if (Array.isArray(breakpointValues)) {
breakpointsKeys.forEach((breakpoint, i) => {
if (i < breakpointValues.length) {
base[breakpoint] = true;
}
});
} else {
breakpointsKeys.forEach((breakpoint) => {
if (breakpointValues[breakpoint] != null) {
base[breakpoint] = true;
}
});
}
return base;
}
function resolveBreakpointValues({
values: breakpointValues,
breakpoints: themeBreakpoints,
base: customBase
}) {
const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
const keys = Object.keys(base);
if (keys.length === 0) {
return breakpointValues;
}
let previous;
return keys.reduce((acc, breakpoint, i) => {
if (Array.isArray(breakpointValues)) {
acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
previous = i;
} else if (typeof breakpointValues === "object") {
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
previous = breakpoint;
} else {
acc[breakpoint] = breakpointValues;
}
return acc;
}, {});
}
function getPath(obj, path, checkVars = true) {
if (!path || typeof path !== "string") {
return null;
}
if (obj && obj.vars && checkVars) {
const val = `vars.${path}`.split(".").reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
if (val != null) {
return val;
}
}
return path.split(".").reduce((acc, item) => {
if (acc && acc[item] != null) {
return acc[item];
}
return null;
}, obj);
}
function getStyleValue$1(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
let value;
if (typeof themeMapping === "function") {
value = themeMapping(propValueFinal);
} else if (Array.isArray(themeMapping)) {
value = themeMapping[propValueFinal] || userValue;
} else {
value = getPath(themeMapping, propValueFinal) || userValue;
}
if (transform) {
value = transform(value, userValue, themeMapping);
}
return value;
}
function style$2(options) {
const {
prop,
cssProperty = options.prop,
themeKey,
transform
} = options;
const fn = (props) => {
if (props[prop] == null) {
return null;
}
const propValue = props[prop];
const theme = props.theme;
const themeMapping = getPath(theme, themeKey) || {};
const styleFromPropValue = (propValueFinal) => {
let value = getStyleValue$1(themeMapping, transform, propValueFinal);
if (propValueFinal === value && typeof propValueFinal === "string") {
value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize(propValueFinal)}`, propValueFinal);
}
if (cssProperty === false) {
return value;
}
return {
[cssProperty]: value
};
};
return handleBreakpoints(props, propValue, styleFromPropValue);
};
fn.propTypes = {};
fn.filterProps = [prop];
return fn;
}
function memoize(fn) {
const cache = {};
return arg => {
if (cache[arg] === undefined) {
cache[arg] = fn(arg);
}
return cache[arg];
};
}
const properties = {
m: "margin",
p: "padding"
};
const directions = {
t: "Top",
r: "Right",
b: "Bottom",
l: "Left",
x: ["Left", "Right"],
y: ["Top", "Bottom"]
};
const aliases = {
marginX: "mx",
marginY: "my",
paddingX: "px",
paddingY: "py"
};
const getCssProperties = memoize((prop) => {
if (prop.length > 2) {
if (aliases[prop]) {
prop = aliases[prop];
} else {
return [prop];
}
}
const [a, b] = prop.split("");
const property = properties[a];
const direction = directions[b] || "";
return Array.isArray(direction) ? direction.map((dir) => property + dir) : [property + direction];
});
const marginKeys = ["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd"];
const paddingKeys = ["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"];
[...marginKeys, ...paddingKeys];
function createUnaryUnit(theme, themeKey, defaultValue, propName) {
var _getPath;
const themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
if (typeof themeSpacing === "number") {
return (abs) => {
if (typeof abs === "string") {
return abs;
}
return themeSpacing * abs;
};
}
if (Array.isArray(themeSpacing)) {
return (abs) => {
if (typeof abs === "string") {
return abs;
}
return themeSpacing[abs];
};
}
if (typeof themeSpacing === "function") {
return themeSpacing;
}
return () => void 0;
}
function createUnarySpacing(theme) {
return createUnaryUnit(theme, "spacing", 8);
}
function getValue(transformer, propValue) {
if (typeof propValue === "string" || propValue == null) {
return propValue;
}
const abs = Math.abs(propValue);
const transformed = transformer(abs);
if (propValue >= 0) {
return transformed;
}
if (typeof transformed === "number") {
return -transformed;
}
return `-${transformed}`;
}
function getStyleFromPropValue(cssProperties, transformer) {
return (propValue) => cssProperties.reduce((acc, cssProperty) => {
acc[cssProperty] = getValue(transformer, propValue);
return acc;
}, {});
}
function resolveCssProperty(props, keys, prop, transformer) {
if (keys.indexOf(prop) === -1) {
return null;
}
const cssProperties = getCssProperties(prop);
const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
const propValue = props[prop];
return handleBreakpoints(props, propValue, styleFromPropValue);
}
function style$1(props, keys) {
const transformer = createUnarySpacing(props.theme);
return Object.keys(props).map((prop) => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
}
function margin(props) {
return style$1(props, marginKeys);
}
margin.propTypes = {};
margin.filterProps = marginKeys;
function padding(props) {
return style$1(props, paddingKeys);
}
padding.propTypes = {};
padding.filterProps = paddingKeys;
function createSpacing(spacingInput = 8) {
if (spacingInput.mui) {
return spacingInput;
}
const transform = createUnarySpacing({
spacing: spacingInput
});
const spacing = (...argsInput) => {
const args = argsInput.length === 0 ? [1] : argsInput;
return args.map((argument) => {
const output = transform(argument);
return typeof output === "number" ? `${output}px` : output;
}).join(" ");
};
spacing.mui = true;
return spacing;
}
function compose(...styles) {
const handlers = styles.reduce((acc, style) => {
style.filterProps.forEach((prop) => {
acc[prop] = style;
});
return acc;
}, {});
const fn = (props) => {
return Object.keys(props).reduce((acc, prop) => {
if (handlers[prop]) {
return merge(acc, handlers[prop](props));
}
return acc;
}, {});
};
fn.propTypes = {};
fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);
return fn;
}
function borderTransform(value) {
if (typeof value !== "number") {
return value;
}
return `${value}px solid`;
}
function createBorderStyle(prop, transform) {
return style$2({
prop,
themeKey: "borders",
transform
});
}
const border = createBorderStyle("border", borderTransform);
const borderTop = createBorderStyle("borderTop", borderTransform);
const borderRight = createBorderStyle("borderRight", borderTransform);
const borderBottom = createBorderStyle("borderBottom", borderTransform);
const borderLeft = createBorderStyle("borderLeft", borderTransform);
const borderColor = createBorderStyle("borderColor");
const borderTopColor = createBorderStyle("borderTopColor");
const borderRightColor = createBorderStyle("borderRightColor");
const borderBottomColor = createBorderStyle("borderBottomColor");
const borderLeftColor = createBorderStyle("borderLeftColor");
const outline = createBorderStyle("outline", borderTransform);
const outlineColor = createBorderStyle("outlineColor");
const borderRadius = (props) => {
if (props.borderRadius !== void 0 && props.borderRadius !== null) {
const transformer = createUnaryUnit(props.theme, "shape.borderRadius", 4);
const styleFromPropValue = (propValue) => ({
borderRadius: getValue(transformer, propValue)
});
return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
}
return null;
};
borderRadius.propTypes = {};
borderRadius.filterProps = ["borderRadius"];
compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
const gap = (props) => {
if (props.gap !== void 0 && props.gap !== null) {
const transformer = createUnaryUnit(props.theme, "spacing", 8);
const styleFromPropValue = (propValue) => ({
gap: getValue(transformer, propValue)
});
return handleBreakpoints(props, props.gap, styleFromPropValue);
}
return null;
};
gap.propTypes = {};
gap.filterProps = ["gap"];
const columnGap = (props) => {
if (props.columnGap !== void 0 && props.columnGap !== null) {
const transformer = createUnaryUnit(props.theme, "spacing", 8);
const styleFromPropValue = (propValue) => ({
columnGap: getValue(transformer, propValue)
});
return handleBreakpoints(props, props.columnGap, styleFromPropValue);
}
return null;
};
columnGap.propTypes = {};
columnGap.filterProps = ["columnGap"];
const rowGap = (props) => {
if (props.rowGap !== void 0 && props.rowGap !== null) {
const transformer = createUnaryUnit(props.theme, "spacing", 8);
const styleFromPropValue = (propValue) => ({
rowGap: getValue(transformer, propValue)
});
return handleBreakpoints(props, props.rowGap, styleFromPropValue);
}
return null;
};
rowGap.propTypes = {};
rowGap.filterProps = ["rowGap"];
const gridColumn = style$2({
prop: "gridColumn"
});
const gridRow = style$2({
prop: "gridRow"
});
const gridAutoFlow = style$2({
prop: "gridAutoFlow"
});
const gridAutoColumns = style$2({
prop: "gridAutoColumns"
});
const gridAutoRows = style$2({
prop: "gridAutoRows"
});
const gridTemplateColumns = style$2({
prop: "gridTemplateColumns"
});
const gridTemplateRows = style$2({
prop: "gridTemplateRows"
});
const gridTemplateAreas = style$2({
prop: "gridTemplateAreas"
});
const gridArea = style$2({
prop: "gridArea"
});
compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
function paletteTransform(value, userValue) {
if (userValue === 'grey') {
return userValue;
}
return value;
}
const color = style$2({
prop: 'color',
themeKey: 'palette',
transform: paletteTransform
});
const bgcolor = style$2({
prop: 'bgcolor',
cssProperty: 'backgroundColor',
themeKey: 'palette',
transform: paletteTransform
});
const backgroundColor = style$2({
prop: 'backgroundColor',
themeKey: 'palette',
transform: paletteTransform
});
compose(color, bgcolor, backgroundColor);
function sizingTransform(value) {
return value <= 1 && value !== 0 ? `${value * 100}%` : value;
}
const width = style$2({
prop: 'width',
transform: sizingTransform
});
const maxWidth = props => {
if (props.maxWidth !== undefined && props.maxWidth !== null) {
const styleFromPropValue = propValue => {
var _props$theme, _props$theme2;
const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$1[propValue];
if (!breakpoint) {
return {
maxWidth: sizingTransform(propValue)
};
}
if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
return {
maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
};
}
return {
maxWidth: breakpoint
};
};
return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
}
return null;
};
maxWidth.filterProps = ['maxWidth'];
const minWidth = style$2({
prop: 'minWidth',
transform: sizingTransform
});
const height = style$2({
prop: 'height',
transform: sizingTransform
});
const maxHeight = style$2({
prop: 'maxHeight',
transform: sizingTransform
});
const minHeight = style$2({
prop: 'minHeight',
transform: sizingTransform
});
style$2({
prop: 'size',
cssProperty: 'width',
transform: sizingTransform
});
style$2({
prop: 'size',
cssProperty: 'height',
transform: sizingTransform
});
const boxSizing = style$2({
prop: 'boxSizing'
});
compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
const defaultSxConfig = {
// borders
border: {
themeKey: 'borders',
transform: borderTransform
},
borderTop: {
themeKey: 'borders',
transform: borderTransform
},
borderRight: {
themeKey: 'borders',
transform: borderTransform
},
borderBottom: {
themeKey: 'borders',
transform: borderTransform
},
borderLeft: {
themeKey: 'borders',
transform: borderTransform
},
borderColor: {
themeKey: 'palette'
},
borderTopColor: {
themeKey: 'palette'
},
borderRightColor: {
themeKey: 'palette'
},
borderBottomColor: {
themeKey: 'palette'
},
borderLeftColor: {
themeKey: 'palette'
},
outline: {
themeKey: 'borders',
transform: borderTransform
},
outlineColor: {
themeKey: 'palette'
},
borderRadius: {
themeKey: 'shape.borderRadius',
style: borderRadius
},
// palette
color: {
themeKey: 'palette',
transform: paletteTransform
},
bgcolor: {
themeKey: 'palette',
cssProperty: 'backgroundColor',
transform: paletteTransform
},
backgroundColor: {
themeKey: 'palette',
transform: paletteTransform
},
// spacing
p: {
style: padding
},
pt: {
style: padding
},
pr: {
style: padding
},
pb: {
style: padding
},
pl: {
style: padding
},
px: {
style: padding
},
py: {
style: padding
},
padding: {
style: padding
},
paddingTop: {
style: padding
},
paddingRight: {
style: padding
},
paddingBottom: {
style: padding
},
paddingLeft: {
style: padding
},
paddingX: {
style: padding
},
paddingY: {
style: padding
},
paddingInline: {
style: padding
},
paddingInlineStart: {
style: padding
},
paddingInlineEnd: {
style: padding
},
paddingBlock: {
style: padding
},
paddingBlockStart: {
style: padding
},
paddingBlockEnd: {
style: padding
},
m: {
style: margin
},
mt: {
style: margin
},
mr: {
style: margin
},
mb: {
style: margin
},
ml: {
style: margin
},
mx: {
style: margin
},
my: {
style: margin
},
margin: {
style: margin
},
marginTop: {
style: margin
},
marginRight: {
style: margin
},
marginBottom: {
style: margin
},
marginLeft: {
style: margin
},
marginX: {
style: margin
},
marginY: {
style: margin
},
marginInline: {
style: margin
},
marginInlineStart: {
style: margin
},
marginInlineEnd: {
style: margin
},
marginBlock: {
style: margin
},
marginBlockStart: {
style: margin
},
marginBlockEnd: {
style: margin
},
// display
displayPrint: {
cssProperty: false,
transform: value => ({
'@media print': {
display: value
}
})
},
display: {},
overflow: {},
textOverflow: {},
visibility: {},
whiteSpace: {},
// flexbox
flexBasis: {},
flexDirection: {},
flexWrap: {},
justifyContent: {},
alignItems: {},
alignContent: {},
order: {},
flex: {},
flexGrow: {},
flexShrink: {},
alignSelf: {},
justifyItems: {},
justifySelf: {},
// grid
gap: {
style: gap
},
rowGap: {
style: rowGap
},
columnGap: {
style: columnGap
},
gridColumn: {},
gridRow: {},
gridAutoFlow: {},
gridAutoColumns: {},
gridAutoRows: {},
gridTemplateColumns: {},
gridTemplateRows: {},
gridTemplateAreas: {},
gridArea: {},
// positions
position: {},
zIndex: {
themeKey: 'zIndex'
},
top: {},
right: {},
bottom: {},
left: {},
// shadows
boxShadow: {
themeKey: 'shadows'
},
// sizing
width: {
transform: sizingTransform
},
maxWidth: {
style: maxWidth
},
minWidth: {
transform: sizingTransform
},
height: {
transform: sizingTransform
},
maxHeight: {
transform: sizingTransform
},
minHeight: {
transform: sizingTransform
},
boxSizing: {},
// typography
fontFamily: {
themeKey: 'typography'
},
fontSize: {
themeKey: 'typography'
},
fontStyle: {
themeKey: 'typography'
},
fontWeight: {
themeKey: 'typography'
},
letterSpacing: {},
textTransform: {},
lineHeight: {},
textAlign: {},
typography: {
cssProperty: false,
themeKey: 'typography'
}
};
function objectsHaveSameKeys(...objects) {
const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
const union = new Set(allKeys);
return objects.every(object => union.size === Object.keys(object).length);
}
function callIfFn(maybeFn, arg) {
return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
}
// eslint-disable-next-line @typescript-eslint/naming-convention
function unstable_createStyleFunctionSx() {
function getThemeValue(prop, val, theme, config) {
const props = {
[prop]: val,
theme
};
const options = config[prop];
if (!options) {
return {
[prop]: val
};
}
const {
cssProperty = prop,
themeKey,
transform,
style
} = options;
if (val == null) {
return null;
}
// TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
if (themeKey === 'typography' && val === 'inherit') {
return {
[prop]: val
};
}
const themeMapping = getPath(theme, themeKey) || {};
if (style) {
return style(props);
}
const styleFromPropValue = propValueFinal => {
let value = getStyleValue$1(themeMapping, transform, propValueFinal);
if (propValueFinal === value && typeof propValueFinal === 'string') {
// Haven't found value
value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
}
if (cssProperty === false) {
return value;
}
return {
[cssProperty]: value
};
};
return handleBreakpoints(props, val, styleFromPropValue);
}
function styleFunctionSx(props) {
var _theme$unstable_sxCon;
const {
sx,
theme = {},
nested
} = props || {};
if (!sx) {
return null; // Emotion & styled-components will neglect null
}
const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig;
/*
* Receive `sxInput` as object or callback
* and then recursively check keys & values to create media query object styles.
* (the result will be used in `styled`)
*/
function traverse(sxInput) {
let sxObject = sxInput;
if (typeof sxInput === 'function') {
sxObject = sxInput(theme);
} else if (typeof sxInput !== 'object') {
// value
return sxInput;
}
if (!sxObject) {
return null;
}
const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
const breakpointsKeys = Object.keys(emptyBreakpoints);
let css = emptyBreakpoints;
Object.keys(sxObject).forEach(styleKey => {
const value = callIfFn(sxObject[styleKey], theme);
if (value !== null && value !== undefined) {
if (typeof value === 'object') {
if (config[styleKey]) {
css = merge(css, getThemeValue(styleKey, value, theme, config));
} else {
const breakpointsValues = handleBreakpoints({
theme
}, value, x => ({
[styleKey]: x
}));
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
theme,
nested: true
});
} else {
css = merge(css, breakpointsValues);
}
}
} else {
css = merge(css, getThemeValue(styleKey, value, theme, config));
}
}
});
if (!nested && theme.modularCssLayers) {
return {
'@layer sx': removeUnusedBreakpoints(breakpointsKeys, css)
};
}
return removeUnusedBreakpoints(breakpointsKeys, css);
}
return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
}
return styleFunctionSx;
}
const styleFunctionSx = unstable_createStyleFunctionSx();
styleFunctionSx.filterProps = ['sx'];
/**
* A universal utility to style components with multiple color modes. Always use it from the theme object.
* It works with:
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
* - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
* - Zero-runtime engine
*
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
*
* ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
*
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* @example
* 1. using with `styled`:
* ```jsx
* const Component = styled('div')(({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]);
* ```
*
* @example
* 2. using with `sx` prop:
* ```jsx
* [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]}
* />
* ```
*
* @example
* 3. theming a component:
* ```jsx
* extendTheme({
* components: {
* MuiButton: {
* styleOverrides: {
* root: ({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ],
* },
* }
* }
* })
*```
*/
function applyStyles$2(key, styles) {
// @ts-expect-error this is 'any' type
const theme = this;
if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
// If CssVarsProvider is used as a provider,
// returns '* :where([data-mui-color-scheme="light|dark"]) &'
const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
return {
[selector]: styles
};
}
if (theme.palette.mode === key) {
return styles;
}
return {};
}
const _excluded$Z = ["breakpoints", "palette", "spacing", "shape"];
function createTheme$1(options = {}, ...args) {
const {
breakpoints: breakpointsInput = {},
palette: paletteInput = {},
spacing: spacingInput,
shape: shapeInput = {}
} = options,
other = _objectWithoutPropertiesLoose(options, _excluded$Z);
const breakpoints = createBreakpoints(breakpointsInput);
const spacing = createSpacing(spacingInput);
let muiTheme = deepmerge({
breakpoints,
direction: 'ltr',
components: {},
// Inject component definitions.
palette: _extends({
mode: 'light'
}, paletteInput),
spacing,
shape: _extends({}, shape, shapeInput)
}, other);
muiTheme.applyStyles = applyStyles$2;
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
muiTheme.unstable_sx = function sx(props) {
return styleFunctionSx({
sx: props,
theme: this
});
};
return muiTheme;
}
function isObjectEmpty(obj) {
return Object.keys(obj).length === 0;
}
function useTheme$3(defaultTheme = null) {
const contextTheme = reactExports.useContext(ThemeContext$1);
return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
}
const systemDefaultTheme$1 = createTheme$1();
function useTheme$2(defaultTheme = systemDefaultTheme$1) {
return useTheme$3(defaultTheme);
}
function wrapGlobalLayer(styles) {
const serialized = internal_serializeStyles(styles);
if (styles !== serialized && serialized.styles) {
if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
serialized.styles = `@layer global{${serialized.styles}}`;
}
return serialized;
}
return styles;
}
function GlobalStyles$1({
styles,
themeId,
defaultTheme = {}
}) {
const upperTheme = useTheme$2(defaultTheme);
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
let globalStyles = typeof styles === "function" ? styles(resolvedTheme) : styles;
if (resolvedTheme.modularCssLayers) {
if (Array.isArray(globalStyles)) {
globalStyles = globalStyles.map((styleArg) => {
if (typeof styleArg === "function") {
return wrapGlobalLayer(styleArg(resolvedTheme));
}
return wrapGlobalLayer(styleArg);
});
} else {
globalStyles = wrapGlobalLayer(globalStyles);
}
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalStyles$2, {
styles: globalStyles
});
}
const _excluded$Y = ["sx"];
const splitProps = props => {
var _props$theme$unstable, _props$theme;
const result = {
systemProps: {},
otherProps: {}
};
const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
Object.keys(props).forEach(prop => {
if (config[prop]) {
result.systemProps[prop] = props[prop];
} else {
result.otherProps[prop] = props[prop];
}
});
return result;
};
function extendSxProp(props) {
const {
sx: inSx
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded$Y);
const {
systemProps,
otherProps
} = splitProps(other);
let finalSx;
if (Array.isArray(inSx)) {
finalSx = [systemProps, ...inSx];
} else if (typeof inSx === 'function') {
finalSx = (...args) => {
const result = inSx(...args);
if (!isPlainObject(result)) {
return systemProps;
}
return _extends({}, systemProps, result);
};
} else {
finalSx = _extends({}, systemProps, inSx);
}
return _extends({}, otherProps, {
sx: finalSx
});
}
const _excluded$X = ["className", "component"];
function createBox(options = {}) {
const {
themeId,
defaultTheme,
defaultClassName = 'MuiBox-root',
generateClassName
} = options;
const BoxRoot = styled$2('div', {
shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
})(styleFunctionSx);
const Box = /*#__PURE__*/reactExports.forwardRef(function Box(inProps, ref) {
const theme = useTheme$2(defaultTheme);
const _extendSxProp = extendSxProp(inProps),
{
className,
component = 'div'
} = _extendSxProp,
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$X);
return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
as: component,
ref: ref,
className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
theme: themeId ? theme[themeId] || theme : theme
}, other));
});
return Box;
}
const _excluded$W = ["ownerState"], _excluded2$6 = ["variants"], _excluded3$1 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
function isEmpty$2(obj) {
return Object.keys(obj).length === 0;
}
function isStringTag(tag) {
return typeof tag === "string" && // 96 is one less than the char code
// for "a" so this is checking that
// it's a lowercase character
tag.charCodeAt(0) > 96;
}
function shouldForwardProp(prop) {
return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
}
function shallowLayer(serialized, layerName) {
if (layerName && serialized && typeof serialized === "object" && serialized.styles && !serialized.styles.startsWith("@layer")) {
serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
}
return serialized;
}
const systemDefaultTheme = createTheme$1();
const lowercaseFirstLetter = (string) => {
if (!string) {
return string;
}
return string.charAt(0).toLowerCase() + string.slice(1);
};
function resolveTheme({
defaultTheme,
theme,
themeId
}) {
return isEmpty$2(theme) ? defaultTheme : theme[themeId] || theme;
}
function defaultOverridesResolver(slot) {
if (!slot) {
return null;
}
return (props, styles) => styles[slot];
}
function processStyleArg(callableStyle, _ref, layerName) {
let {
ownerState
} = _ref, props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
const resolvedStylesArg = typeof callableStyle === "function" ? callableStyle(_extends({
ownerState
}, props)) : callableStyle;
if (Array.isArray(resolvedStylesArg)) {
return resolvedStylesArg.flatMap((resolvedStyle) => processStyleArg(resolvedStyle, _extends({
ownerState
}, props), layerName));
}
if (!!resolvedStylesArg && typeof resolvedStylesArg === "object" && Array.isArray(resolvedStylesArg.variants)) {
const {
variants = []
} = resolvedStylesArg, otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2$6);
let result = otherStyles;
variants.forEach((variant) => {
let isMatch = true;
if (typeof variant.props === "function") {
isMatch = variant.props(_extends({
ownerState
}, props, ownerState));
} else {
Object.keys(variant.props).forEach((key) => {
if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
isMatch = false;
}
});
}
if (isMatch) {
if (!Array.isArray(result)) {
result = [result];
}
const variantStyle = typeof variant.style === "function" ? variant.style(_extends({
ownerState
}, props, ownerState)) : variant.style;
result.push(layerName ? shallowLayer(internal_serializeStyles(variantStyle), layerName) : variantStyle);
}
});
return result;
}
return layerName ? shallowLayer(internal_serializeStyles(resolvedStylesArg), layerName) : resolvedStylesArg;
}
function createStyled(input = {}) {
const {
themeId,
defaultTheme = systemDefaultTheme,
rootShouldForwardProp = shouldForwardProp,
slotShouldForwardProp = shouldForwardProp
} = input;
const systemSx = (props) => {
return styleFunctionSx(_extends({}, props, {
theme: resolveTheme(_extends({}, props, {
defaultTheme,
themeId
}))
}));
};
systemSx.__mui_systemSx = true;
return (tag, inputOptions = {}) => {
internal_processStyles(tag, (styles) => styles.filter((style) => !(style != null && style.__mui_systemSx)));
const {
name: componentName,
slot: componentSlot,
skipVariantsResolver: inputSkipVariantsResolver,
skipSx: inputSkipSx,
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
} = inputOptions, options = _objectWithoutPropertiesLoose(inputOptions, _excluded3$1);
const layerName = componentName && componentName.startsWith("Mui") || !!componentSlot ? "components" : "custom";
const skipVariantsResolver = inputSkipVariantsResolver !== void 0 ? inputSkipVariantsResolver : (
// TODO v6: remove `Root` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
componentSlot && componentSlot !== "Root" && componentSlot !== "root" || false
);
const skipSx = inputSkipSx || false;
let label;
let shouldForwardPropOption = shouldForwardProp;
if (componentSlot === "Root" || componentSlot === "root") {
shouldForwardPropOption = rootShouldForwardProp;
} else if (componentSlot) {
shouldForwardPropOption = slotShouldForwardProp;
} else if (isStringTag(tag)) {
shouldForwardPropOption = void 0;
}
const defaultStyledResolver = styled$2(tag, _extends({
shouldForwardProp: shouldForwardPropOption,
label
}, options));
const transformStyleArg = (stylesArg) => {
if (typeof stylesArg === "function" && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
return (props) => {
const theme = resolveTheme({
theme: props.theme,
defaultTheme,
themeId
});
return processStyleArg(stylesArg, _extends({}, props, {
theme
}), theme.modularCssLayers ? layerName : void 0);
};
}
return stylesArg;
};
const muiStyledResolver = (styleArg, ...expressions) => {
let transformedStyleArg = transformStyleArg(styleArg);
const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
if (componentName && overridesResolver) {
expressionsWithDefaultTheme.push((props) => {
const theme = resolveTheme(_extends({}, props, {
defaultTheme,
themeId
}));
if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
return null;
}
const styleOverrides = theme.components[componentName].styleOverrides;
const resolvedStyleOverrides = {};
Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
theme
}), theme.modularCssLayers ? "theme" : void 0);
});
return overridesResolver(props, resolvedStyleOverrides);
});
}
if (componentName && !skipVariantsResolver) {
expressionsWithDefaultTheme.push((props) => {
var _theme$components;
const theme = resolveTheme(_extends({}, props, {
defaultTheme,
themeId
}));
const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
return processStyleArg({
variants: themeVariants
}, _extends({}, props, {
theme
}), theme.modularCssLayers ? "theme" : void 0);
});
}
if (!skipSx) {
expressionsWithDefaultTheme.push(systemSx);
}
const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
const placeholders = new Array(numOfCustomFnsApplied).fill("");
transformedStyleArg = [...styleArg, ...placeholders];
transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
}
const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
if (tag.muiName) {
Component.muiName = tag.muiName;
}
return Component;
};
if (defaultStyledResolver.withConfig) {
muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
}
return muiStyledResolver;
};
}
const styled$1 = createStyled();
function getThemeProps(params) {
const {
theme,
name,
props
} = params;
if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
return props;
}
return resolveProps(theme.components[name].defaultProps, props);
}
function useThemeProps$1({
props,
name,
defaultTheme,
themeId
}) {
let theme = useTheme$2(defaultTheme);
if (themeId) {
theme = theme[themeId] || theme;
}
const mergedProps = getThemeProps({
theme,
name,
props
});
return mergedProps;
}
function clampWrapper(value, min = 0, max = 1) {
return clamp$1(value, min, max);
}
function hexToRgb(color) {
color = color.slice(1);
const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, "g");
let colors = color.match(re);
if (colors && colors[0].length === 1) {
colors = colors.map((n) => n + n);
}
return colors ? `rgb${colors.length === 4 ? "a" : ""}(${colors.map((n, index) => {
return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1e3) / 1e3;
}).join(", ")})` : "";
}
function decomposeColor(color) {
if (color.type) {
return color;
}
if (color.charAt(0) === "#") {
return decomposeColor(hexToRgb(color));
}
const marker = color.indexOf("(");
const type = color.substring(0, marker);
if (["rgb", "rgba", "hsl", "hsla", "color"].indexOf(type) === -1) {
throw new Error(formatMuiErrorMessage(9, color));
}
let values = color.substring(marker + 1, color.length - 1);
let colorSpace;
if (type === "color") {
values = values.split(" ");
colorSpace = values.shift();
if (values.length === 4 && values[3].charAt(0) === "/") {
values[3] = values[3].slice(1);
}
if (["srgb", "display-p3", "a98-rgb", "prophoto-rgb", "rec-2020"].indexOf(colorSpace) === -1) {
throw new Error(formatMuiErrorMessage(10, colorSpace));
}
} else {
values = values.split(",");
}
values = values.map((value) => parseFloat(value));
return {
type,
values,
colorSpace
};
}
function recomposeColor(color) {
const {
type,
colorSpace
} = color;
let {
values
} = color;
if (type.indexOf("rgb") !== -1) {
values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
} else if (type.indexOf("hsl") !== -1) {
values[1] = `${values[1]}%`;
values[2] = `${values[2]}%`;
}
if (type.indexOf("color") !== -1) {
values = `${colorSpace} ${values.join(" ")}`;
} else {
values = `${values.join(", ")}`;
}
return `${type}(${values})`;
}
function hslToRgb(color) {
color = decomposeColor(color);
const {
values
} = color;
const h = values[0];
const s = values[1] / 100;
const l = values[2] / 100;
const a = s * Math.min(l, 1 - l);
const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
let type = "rgb";
const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
if (color.type === "hsla") {
type += "a";
rgb.push(values[3]);
}
return recomposeColor({
type,
values: rgb
});
}
function getLuminance(color) {
color = decomposeColor(color);
let rgb = color.type === "hsl" || color.type === "hsla" ? decomposeColor(hslToRgb(color)).values : color.values;
rgb = rgb.map((val) => {
if (color.type !== "color") {
val /= 255;
}
return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
});
return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
}
function getContrastRatio(foreground, background) {
const lumA = getLuminance(foreground);
const lumB = getLuminance(background);
return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
}
function alpha(color, value) {
color = decomposeColor(color);
value = clampWrapper(value);
if (color.type === "rgb" || color.type === "hsl") {
color.type += "a";
}
if (color.type === "color") {
color.values[3] = `/${value}`;
} else {
color.values[3] = value;
}
return recomposeColor(color);
}
function darken(color, coefficient) {
color = decomposeColor(color);
coefficient = clampWrapper(coefficient);
if (color.type.indexOf("hsl") !== -1) {
color.values[2] *= 1 - coefficient;
} else if (color.type.indexOf("rgb") !== -1 || color.type.indexOf("color") !== -1) {
for (let i = 0; i < 3; i += 1) {
color.values[i] *= 1 - coefficient;
}
}
return recomposeColor(color);
}
function lighten(color, coefficient) {
color = decomposeColor(color);
coefficient = clampWrapper(coefficient);
if (color.type.indexOf("hsl") !== -1) {
color.values[2] += (100 - color.values[2]) * coefficient;
} else if (color.type.indexOf("rgb") !== -1) {
for (let i = 0; i < 3; i += 1) {
color.values[i] += (255 - color.values[i]) * coefficient;
}
} else if (color.type.indexOf("color") !== -1) {
for (let i = 0; i < 3; i += 1) {
color.values[i] += (1 - color.values[i]) * coefficient;
}
}
return recomposeColor(color);
}
function emphasize(color, coefficient = 0.15) {
return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
}
const ThemeContext = /* @__PURE__ */ reactExports.createContext(null);
function useTheme$1() {
const theme = reactExports.useContext(ThemeContext);
return theme;
}
const hasSymbol = typeof Symbol === 'function' && Symbol.for;
const nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
function mergeOuterLocalTheme(outerTheme, localTheme) {
if (typeof localTheme === "function") {
const mergedTheme = localTheme(outerTheme);
return mergedTheme;
}
return _extends({}, outerTheme, localTheme);
}
function ThemeProvider$2(props) {
const {
children,
theme: localTheme
} = props;
const outerTheme = useTheme$1();
const theme = reactExports.useMemo(() => {
const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
if (output != null) {
output[nested] = outerTheme !== null;
}
return output;
}, [localTheme, outerTheme]);
return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, {
value: theme,
children
});
}
const _excluded$V = ["value"];
const RtlContext = /* @__PURE__ */ reactExports.createContext();
function RtlProvider(_ref) {
let {
value
} = _ref, props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
return /* @__PURE__ */ jsxRuntimeExports.jsx(RtlContext.Provider, _extends({
value: value != null ? value : true
}, props));
}
const PropsContext = /* @__PURE__ */ reactExports.createContext(void 0);
function DefaultPropsProvider({
value,
children
}) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(PropsContext.Provider, {
value,
children
});
}
function useLayerOrder(theme) {
const upperTheme = useTheme$3();
const id = useId() || '';
const {
modularCssLayers
} = theme;
let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
if (!modularCssLayers || upperTheme !== null) {
// skip this hook if upper theme exists.
layerOrder = '';
} else if (typeof modularCssLayers === 'string') {
layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
} else {
layerOrder = `@layer ${layerOrder};`;
}
useEnhancedEffect(() => {
const head = document.querySelector('head');
if (!head) {
return;
}
const firstChild = head.firstChild;
if (layerOrder) {
var _firstChild$hasAttrib;
// Only insert if first child doesn't have data-mui-layer-order attribute
if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
return;
}
const styleElement = document.createElement('style');
styleElement.setAttribute('data-mui-layer-order', id);
styleElement.textContent = layerOrder;
head.prepend(styleElement);
} else {
var _head$querySelector;
(_head$querySelector = head.querySelector(`style[data-mui-layer-order="${id}"]`)) == null || _head$querySelector.remove();
}
}, [layerOrder, id]);
if (!layerOrder) {
return null;
}
return /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$1, {
styles: layerOrder
});
}
const EMPTY_THEME = {};
function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
return reactExports.useMemo(() => {
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
if (typeof localTheme === "function") {
const mergedTheme = localTheme(resolvedTheme);
const result = themeId ? _extends({}, upperTheme, {
[themeId]: mergedTheme
}) : mergedTheme;
if (isPrivate) {
return () => result;
}
return result;
}
return themeId ? _extends({}, upperTheme, {
[themeId]: localTheme
}) : _extends({}, upperTheme, localTheme);
}, [themeId, upperTheme, localTheme, isPrivate]);
}
function ThemeProvider$1(props) {
const {
children,
theme: localTheme,
themeId
} = props;
const upperTheme = useTheme$3(EMPTY_THEME);
const upperPrivateTheme = useTheme$1() || EMPTY_THEME;
const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
const rtlValue = engineTheme.direction === "rtl";
const layerOrder = useLayerOrder(engineTheme);
return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider$2, {
theme: privateTheme,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext$1.Provider, {
value: engineTheme,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(RtlProvider, {
value: rtlValue,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DefaultPropsProvider, {
value: engineTheme == null ? void 0 : engineTheme.components,
children: [layerOrder, children]
})
})
})
});
}
const _excluded$U = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
const defaultTheme$3 = createTheme$1();
const defaultCreateStyledComponent$1 = styled$1("div", {
name: "MuiContainer",
slot: "Root",
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
}
});
const useThemePropsDefault$1 = (inProps) => useThemeProps$1({
props: inProps,
name: "MuiContainer",
defaultTheme: defaultTheme$3
});
const useUtilityClasses$F = (ownerState, componentName) => {
const getContainerUtilityClass = (slot) => {
return generateUtilityClass(componentName, slot);
};
const {
classes,
fixed,
disableGutters,
maxWidth
} = ownerState;
const slots = {
root: ["root", maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && "fixed", disableGutters && "disableGutters"]
};
return composeClasses(slots, getContainerUtilityClass, classes);
};
function createContainer(options = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent = defaultCreateStyledComponent$1,
useThemeProps = useThemePropsDefault$1,
componentName = "MuiContainer"
} = options;
const ContainerRoot = createStyledComponent(({
theme,
ownerState
}) => _extends({
width: "100%",
marginLeft: "auto",
boxSizing: "border-box",
marginRight: "auto",
display: "block"
}, !ownerState.disableGutters && {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up("sm")]: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3)
}
}), ({
theme,
ownerState
}) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
const breakpoint = breakpointValueKey;
const value = theme.breakpoints.values[breakpoint];
if (value !== 0) {
acc[theme.breakpoints.up(breakpoint)] = {
maxWidth: `${value}${theme.breakpoints.unit}`
};
}
return acc;
}, {}), ({
theme,
ownerState
}) => _extends({}, ownerState.maxWidth === "xs" && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up("xs")]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: Math.max(theme.breakpoints.values.xs, 444)
}
}, ownerState.maxWidth && // @ts-ignore module augmentation fails if custom breakpoints are used
ownerState.maxWidth !== "xs" && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up(ownerState.maxWidth)]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
}
}));
const Container = /* @__PURE__ */ reactExports.forwardRef(function Container2(inProps, ref) {
const props = useThemeProps(inProps);
const {
className,
component = "div",
disableGutters = false,
fixed = false,
maxWidth = "lg"
} = props, other = _objectWithoutPropertiesLoose(props, _excluded$U);
const ownerState = _extends({}, props, {
component,
disableGutters,
fixed,
maxWidth
});
const classes = useUtilityClasses$F(ownerState, componentName);
return (
// @ts-ignore theme is injected by the styled util
/* @__PURE__ */ jsxRuntimeExports.jsx(ContainerRoot, _extends({
as: component,
ownerState,
className: clsx(classes.root, className),
ref
}, other))
);
});
return Container;
}
const _excluded$T = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
const defaultTheme$2 = createTheme$1();
const defaultCreateStyledComponent = styled$1("div", {
name: "MuiStack",
slot: "Root",
overridesResolver: (props, styles) => styles.root
});
function useThemePropsDefault(props) {
return useThemeProps$1({
props,
name: "MuiStack",
defaultTheme: defaultTheme$2
});
}
function joinChildren(children, separator) {
const childrenArray = reactExports.Children.toArray(children).filter(Boolean);
return childrenArray.reduce((output, child, index) => {
output.push(child);
if (index < childrenArray.length - 1) {
output.push(/* @__PURE__ */ reactExports.cloneElement(separator, {
key: `separator-${index}`
}));
}
return output;
}, []);
}
const getSideFromDirection = (direction) => {
return {
row: "Left",
"row-reverse": "Right",
column: "Top",
"column-reverse": "Bottom"
}[direction];
};
const style = ({
ownerState,
theme
}) => {
let styles = _extends({
display: "flex",
flexDirection: "column"
}, handleBreakpoints({
theme
}, resolveBreakpointValues({
values: ownerState.direction,
breakpoints: theme.breakpoints.values
}), (propValue) => ({
flexDirection: propValue
})));
if (ownerState.spacing) {
const transformer = createUnarySpacing(theme);
const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
if (typeof ownerState.spacing === "object" && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === "object" && ownerState.direction[breakpoint] != null) {
acc[breakpoint] = true;
}
return acc;
}, {});
const directionValues = resolveBreakpointValues({
values: ownerState.direction,
base
});
const spacingValues = resolveBreakpointValues({
values: ownerState.spacing,
base
});
if (typeof directionValues === "object") {
Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
const directionValue = directionValues[breakpoint];
if (!directionValue) {
const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : "column";
directionValues[breakpoint] = previousDirectionValue;
}
});
}
const styleFromPropValue = (propValue, breakpoint) => {
if (ownerState.useFlexGap) {
return {
gap: getValue(transformer, propValue)
};
}
return {
// The useFlexGap={false} implement relies on each child to give up control of the margin.
// We need to reset the margin to avoid double spacing.
"& > :not(style):not(style)": {
margin: 0
},
"& > :not(style) ~ :not(style)": {
[`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
}
};
};
styles = deepmerge(styles, handleBreakpoints({
theme
}, spacingValues, styleFromPropValue));
}
styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
return styles;
};
function createStack(options = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent = defaultCreateStyledComponent,
useThemeProps = useThemePropsDefault,
componentName = "MuiStack"
} = options;
const useUtilityClasses = () => {
const slots = {
root: ["root"]
};
return composeClasses(slots, (slot) => generateUtilityClass(componentName, slot), {});
};
const StackRoot = createStyledComponent(style);
const Stack = /* @__PURE__ */ reactExports.forwardRef(function Grid(inProps, ref) {
const themeProps = useThemeProps(inProps);
const props = extendSxProp(themeProps);
const {
component = "div",
direction = "column",
spacing = 0,
divider,
children,
className,
useFlexGap = false
} = props, other = _objectWithoutPropertiesLoose(props, _excluded$T);
const ownerState = {
direction,
spacing,
useFlexGap
};
const classes = useUtilityClasses();
return /* @__PURE__ */ jsxRuntimeExports.jsx(StackRoot, _extends({
as: component,
ownerState,
ref,
className: clsx(classes.root, className)
}, other, {
children: divider ? joinChildren(children, divider) : children
}));
});
return Stack;
}
function createMixins(breakpoints, mixins) {
return _extends({
toolbar: {
minHeight: 56,
[breakpoints.up('xs')]: {
'@media (orientation: landscape)': {
minHeight: 48
}
},
[breakpoints.up('sm')]: {
minHeight: 64
}
}
}, mixins);
}
const common = {
black: '#000',
white: '#fff'
};
const grey = {
50: '#fafafa',
100: '#f5f5f5',
200: '#eeeeee',
300: '#e0e0e0',
400: '#bdbdbd',
500: '#9e9e9e',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
A100: '#f5f5f5',
A200: '#eeeeee',
A400: '#bdbdbd',
A700: '#616161'
};
const purple = {
50: '#f3e5f5',
200: '#ce93d8',
300: '#ba68c8',
400: '#ab47bc',
500: '#9c27b0',
700: '#7b1fa2'};
const red = {
300: '#e57373',
400: '#ef5350',
500: '#f44336',
700: '#d32f2f',
800: '#c62828'};
const orange = {
300: '#ffb74d',
400: '#ffa726',
500: '#ff9800',
700: '#f57c00',
900: '#e65100'};
const blue = {
50: '#e3f2fd',
200: '#90caf9',
400: '#42a5f5',
700: '#1976d2',
800: '#1565c0'};
const lightBlue = {
300: '#4fc3f7',
400: '#29b6f6',
500: '#03a9f4',
700: '#0288d1',
900: '#01579b'};
const green = {
300: '#81c784',
400: '#66bb6a',
500: '#4caf50',
700: '#388e3c',
800: '#2e7d32',
900: '#1b5e20'};
const _excluded$S = ["mode", "contrastThreshold", "tonalOffset"];
const light = {
// The colors used to style the text.
text: {
// The most important text.
primary: "rgba(0, 0, 0, 0.87)",
// Secondary text.
secondary: "rgba(0, 0, 0, 0.6)",
// Disabled text have even lower visual prominence.
disabled: "rgba(0, 0, 0, 0.38)"
},
// The color used to divide different elements.
divider: "rgba(0, 0, 0, 0.12)",
// The background colors used to style the surfaces.
// Consistency between these values is important.
background: {
paper: common.white,
default: common.white
},
// The colors used to style the action elements.
action: {
// The color of an active action like an icon button.
active: "rgba(0, 0, 0, 0.54)",
// The color of an hovered action.
hover: "rgba(0, 0, 0, 0.04)",
hoverOpacity: 0.04,
// The color of a selected action.
selected: "rgba(0, 0, 0, 0.08)",
selectedOpacity: 0.08,
// The color of a disabled action.
disabled: "rgba(0, 0, 0, 0.26)",
// The background color of a disabled action.
disabledBackground: "rgba(0, 0, 0, 0.12)",
disabledOpacity: 0.38,
focus: "rgba(0, 0, 0, 0.12)",
focusOpacity: 0.12,
activatedOpacity: 0.12
}
};
const dark = {
text: {
primary: common.white,
secondary: "rgba(255, 255, 255, 0.7)",
disabled: "rgba(255, 255, 255, 0.5)",
icon: "rgba(255, 255, 255, 0.5)"
},
divider: "rgba(255, 255, 255, 0.12)",
background: {
paper: "#121212",
default: "#121212"
},
action: {
active: common.white,
hover: "rgba(255, 255, 255, 0.08)",
hoverOpacity: 0.08,
selected: "rgba(255, 255, 255, 0.16)",
selectedOpacity: 0.16,
disabled: "rgba(255, 255, 255, 0.3)",
disabledBackground: "rgba(255, 255, 255, 0.12)",
disabledOpacity: 0.38,
focus: "rgba(255, 255, 255, 0.12)",
focusOpacity: 0.12,
activatedOpacity: 0.24
}
};
function addLightOrDark(intent, direction, shade, tonalOffset) {
const tonalOffsetLight = tonalOffset.light || tonalOffset;
const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
if (!intent[direction]) {
if (intent.hasOwnProperty(shade)) {
intent[direction] = intent[shade];
} else if (direction === "light") {
intent.light = lighten(intent.main, tonalOffsetLight);
} else if (direction === "dark") {
intent.dark = darken(intent.main, tonalOffsetDark);
}
}
}
function getDefaultPrimary(mode = "light") {
if (mode === "dark") {
return {
main: blue[200],
light: blue[50],
dark: blue[400]
};
}
return {
main: blue[700],
light: blue[400],
dark: blue[800]
};
}
function getDefaultSecondary(mode = "light") {
if (mode === "dark") {
return {
main: purple[200],
light: purple[50],
dark: purple[400]
};
}
return {
main: purple[500],
light: purple[300],
dark: purple[700]
};
}
function getDefaultError(mode = "light") {
if (mode === "dark") {
return {
main: red[500],
light: red[300],
dark: red[700]
};
}
return {
main: red[700],
light: red[400],
dark: red[800]
};
}
function getDefaultInfo(mode = "light") {
if (mode === "dark") {
return {
main: lightBlue[400],
light: lightBlue[300],
dark: lightBlue[700]
};
}
return {
main: lightBlue[700],
light: lightBlue[500],
dark: lightBlue[900]
};
}
function getDefaultSuccess(mode = "light") {
if (mode === "dark") {
return {
main: green[400],
light: green[300],
dark: green[700]
};
}
return {
main: green[800],
light: green[500],
dark: green[900]
};
}
function getDefaultWarning(mode = "light") {
if (mode === "dark") {
return {
main: orange[400],
light: orange[300],
dark: orange[700]
};
}
return {
main: "#ed6c02",
// closest to orange[800] that pass 3:1.
light: orange[500],
dark: orange[900]
};
}
function createPalette(palette) {
const {
mode = "light",
contrastThreshold = 3,
tonalOffset = 0.2
} = palette, other = _objectWithoutPropertiesLoose(palette, _excluded$S);
const primary = palette.primary || getDefaultPrimary(mode);
const secondary = palette.secondary || getDefaultSecondary(mode);
const error = palette.error || getDefaultError(mode);
const info = palette.info || getDefaultInfo(mode);
const success = palette.success || getDefaultSuccess(mode);
const warning = palette.warning || getDefaultWarning(mode);
function getContrastText(background) {
const contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
return contrastText;
}
const augmentColor = ({
color,
name,
mainShade = 500,
lightShade = 300,
darkShade = 700
}) => {
color = _extends({}, color);
if (!color.main && color[mainShade]) {
color.main = color[mainShade];
}
if (!color.hasOwnProperty("main")) {
throw new Error(formatMuiErrorMessage(11, name ? ` (${name})` : "", mainShade));
}
if (typeof color.main !== "string") {
throw new Error(formatMuiErrorMessage(12, name ? ` (${name})` : "", JSON.stringify(color.main)));
}
addLightOrDark(color, "light", lightShade, tonalOffset);
addLightOrDark(color, "dark", darkShade, tonalOffset);
if (!color.contrastText) {
color.contrastText = getContrastText(color.main);
}
return color;
};
const modes = {
dark,
light
};
const paletteOutput = deepmerge(_extends({
// A collection of common colors.
common: _extends({}, common),
// prevent mutable object.
// The palette mode, can be light or dark.
mode,
// The colors used to represent primary interface elements for a user.
primary: augmentColor({
color: primary,
name: "primary"
}),
// The colors used to represent secondary interface elements for a user.
secondary: augmentColor({
color: secondary,
name: "secondary",
mainShade: "A400",
lightShade: "A200",
darkShade: "A700"
}),
// The colors used to represent interface elements that the user should be made aware of.
error: augmentColor({
color: error,
name: "error"
}),
// The colors used to represent potentially dangerous actions or important messages.
warning: augmentColor({
color: warning,
name: "warning"
}),
// The colors used to present information to the user that is neutral and not necessarily important.
info: augmentColor({
color: info,
name: "info"
}),
// The colors used to indicate the successful completion of an action that user triggered.
success: augmentColor({
color: success,
name: "success"
}),
// The grey colors.
grey,
// Used by `getContrastText()` to maximize the contrast between
// the background and the text.
contrastThreshold,
// Takes a background color and returns the text color that maximizes the contrast.
getContrastText,
// Generate a rich color object.
augmentColor,
// Used by the functions below to shift a color's luminance by approximately
// two indexes within its tonal palette.
// E.g., shift from Red 500 to Red 300 or Red 700.
tonalOffset
}, modes[mode]), other);
return paletteOutput;
}
const _excluded$R = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
function round$3(value) {
return Math.round(value * 1e5) / 1e5;
}
const caseAllCaps = {
textTransform: "uppercase"
};
const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
function createTypography(palette, typography) {
const _ref = typeof typography === "function" ? typography(palette) : typography, {
fontFamily = defaultFontFamily,
// The default font size of the Material Specification.
fontSize = 14,
// px
fontWeightLight = 300,
fontWeightRegular = 400,
fontWeightMedium = 500,
fontWeightBold = 700,
// Tell MUI what's the font-size on the html element.
// 16px is the default font-size used by browsers.
htmlFontSize = 16,
// Apply the CSS properties to all the variants.
allVariants,
pxToRem: pxToRem2
} = _ref, other = _objectWithoutPropertiesLoose(_ref, _excluded$R);
const coef = fontSize / 14;
const pxToRem = pxToRem2 || ((size) => `${size / htmlFontSize * coef}rem`);
const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends({
fontFamily,
fontWeight,
fontSize: pxToRem(size),
// Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
lineHeight
}, fontFamily === defaultFontFamily ? {
letterSpacing: `${round$3(letterSpacing / size)}em`
} : {}, casing, allVariants);
const variants = {
h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
// TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.
inherit: {
fontFamily: "inherit",
fontWeight: "inherit",
fontSize: "inherit",
lineHeight: "inherit",
letterSpacing: "inherit"
}
};
return deepmerge(_extends({
htmlFontSize,
pxToRem,
fontFamily,
fontSize,
fontWeightLight,
fontWeightRegular,
fontWeightMedium,
fontWeightBold
}, variants), other, {
clone: false
// No need to clone deep
});
}
const shadowKeyUmbraOpacity = 0.2;
const shadowKeyPenumbraOpacity = 0.14;
const shadowAmbientShadowOpacity = 0.12;
function createShadow(...px) {
return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(',');
}
// Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
const _excluded$Q = ["duration", "easing", "delay"];
const easing = {
// This is the most common easing curve.
easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
// Objects enter the screen at full velocity from off-screen and
// slowly decelerate to a resting point.
easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
// Objects leave the screen at full velocity. They do not decelerate when off-screen.
easeIn: "cubic-bezier(0.4, 0, 1, 1)",
// The sharp curve is used by objects that may return to the screen at any time.
sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
};
const duration = {
shortest: 150,
shorter: 200,
short: 250,
// most basic recommended timing
standard: 300,
// this is to be used in complex animations
complex: 375,
// recommended when something is entering screen
enteringScreen: 225,
// recommended when something is leaving screen
leavingScreen: 195
};
function formatMs(milliseconds) {
return `${Math.round(milliseconds)}ms`;
}
function getAutoHeightDuration(height) {
if (!height) {
return 0;
}
const constant = height / 36;
return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
}
function createTransitions(inputTransitions) {
const mergedEasing = _extends({}, easing, inputTransitions.easing);
const mergedDuration = _extends({}, duration, inputTransitions.duration);
const create = (props = ["all"], options = {}) => {
const {
duration: durationOption = mergedDuration.standard,
easing: easingOption = mergedEasing.easeInOut,
delay = 0
} = options; _objectWithoutPropertiesLoose(options, _excluded$Q);
return (Array.isArray(props) ? props : [props]).map((animatedProp) => `${animatedProp} ${typeof durationOption === "string" ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === "string" ? delay : formatMs(delay)}`).join(",");
};
return _extends({
getAutoHeightDuration,
create
}, inputTransitions, {
easing: mergedEasing,
duration: mergedDuration
});
}
// We need to centralize the zIndex definitions as they work
// like global values in the browser.
const zIndex = {
mobileStepper: 1000,
fab: 1050,
speedDial: 1050,
appBar: 1100,
drawer: 1200,
modal: 1300,
snackbar: 1400,
tooltip: 1500
};
const _excluded$P = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
function createTheme(options = {}, ...args) {
const {
mixins: mixinsInput = {},
palette: paletteInput = {},
transitions: transitionsInput = {},
typography: typographyInput = {}
} = options, other = _objectWithoutPropertiesLoose(options, _excluded$P);
if (options.vars) {
throw new Error(formatMuiErrorMessage(18));
}
const palette = createPalette(paletteInput);
const systemTheme = createTheme$1(options);
let muiTheme = deepmerge(systemTheme, {
mixins: createMixins(systemTheme.breakpoints, mixinsInput),
palette,
// Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
shadows: shadows.slice(),
typography: createTypography(palette, typographyInput),
transitions: createTransitions(transitionsInput),
zIndex: _extends({}, zIndex)
});
muiTheme = deepmerge(muiTheme, other);
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
muiTheme.unstable_sx = function sx(props) {
return styleFunctionSx({
sx: props,
theme: this
});
};
return muiTheme;
}
const defaultTheme$1 = createTheme();
function useTheme() {
const theme = useTheme$2(defaultTheme$1);
return theme[THEME_ID] || theme;
}
function useThemeProps({
props,
name
}) {
return useThemeProps$1({
props,
name,
defaultTheme: defaultTheme$1,
themeId: THEME_ID
});
}
const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
const slotShouldForwardProp = shouldForwardProp;
const styled = createStyled({
themeId: THEME_ID,
defaultTheme: defaultTheme$1,
rootShouldForwardProp
});
const _excluded$O = ["theme"];
function ThemeProvider(_ref) {
let {
theme: themeInput
} = _ref, props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
const scopedTheme = themeInput[THEME_ID];
return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider$1, _extends({}, props, {
themeId: scopedTheme ? THEME_ID : void 0,
theme: scopedTheme || themeInput
}));
}
// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
const getOverlayAlpha = elevation => {
let alphaValue;
if (elevation < 1) {
alphaValue = 5.11916 * elevation ** 2;
} else {
alphaValue = 4.5 * Math.log(elevation + 1) + 2;
}
return (alphaValue / 100).toFixed(2);
};
/**
* Custom positioning reference element.
* @see https://floating-ui.com/docs/virtual-elements
*/
const sides = ['top', 'right', 'bottom', 'left'];
const min$1 = Math.min;
const max$1 = Math.max;
const round$2 = Math.round;
const floor = Math.floor;
const createCoords = v => ({
x: v,
y: v
});
const oppositeSideMap = {
left: 'right',
right: 'left',
bottom: 'top',
top: 'bottom'
};
const oppositeAlignmentMap = {
start: 'end',
end: 'start'
};
function clamp(start, value, end) {
return max$1(start, min$1(value, end));
}
function evaluate(value, param) {
return typeof value === 'function' ? value(param) : value;
}
function getSide(placement) {
return placement.split('-')[0];
}
function getAlignment(placement) {
return placement.split('-')[1];
}
function getOppositeAxis(axis) {
return axis === 'x' ? 'y' : 'x';
}
function getAxisLength(axis) {
return axis === 'y' ? 'height' : 'width';
}
const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
function getSideAxis(placement) {
return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
}
function getAlignmentAxis(placement) {
return getOppositeAxis(getSideAxis(placement));
}
function getAlignmentSides(placement, rects, rtl) {
if (rtl === void 0) {
rtl = false;
}
const alignment = getAlignment(placement);
const alignmentAxis = getAlignmentAxis(placement);
const length = getAxisLength(alignmentAxis);
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
if (rects.reference[length] > rects.floating[length]) {
mainAlignmentSide = getOppositePlacement$1(mainAlignmentSide);
}
return [mainAlignmentSide, getOppositePlacement$1(mainAlignmentSide)];
}
function getExpandedPlacements(placement) {
const oppositePlacement = getOppositePlacement$1(placement);
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
}
function getOppositeAlignmentPlacement(placement) {
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
}
const lrPlacement = ['left', 'right'];
const rlPlacement = ['right', 'left'];
const tbPlacement = ['top', 'bottom'];
const btPlacement = ['bottom', 'top'];
function getSideList(side, isStart, rtl) {
switch (side) {
case 'top':
case 'bottom':
if (rtl) return isStart ? rlPlacement : lrPlacement;
return isStart ? lrPlacement : rlPlacement;
case 'left':
case 'right':
return isStart ? tbPlacement : btPlacement;
default:
return [];
}
}
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
const alignment = getAlignment(placement);
let list = getSideList(getSide(placement), direction === 'start', rtl);
if (alignment) {
list = list.map(side => side + "-" + alignment);
if (flipAlignment) {
list = list.concat(list.map(getOppositeAlignmentPlacement));
}
}
return list;
}
function getOppositePlacement$1(placement) {
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
}
function expandPaddingObject(padding) {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
...padding
};
}
function getPaddingObject(padding) {
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
top: padding,
right: padding,
bottom: padding,
left: padding
};
}
function rectToClientRect$1(rect) {
const {
x,
y,
width,
height
} = rect;
return {
width,
height,
top: y,
left: x,
right: x + width,
bottom: y + height,
x,
y
};
}
function computeCoordsFromPlacement(_ref, placement, rtl) {
let {
reference,
floating
} = _ref;
const sideAxis = getSideAxis(placement);
const alignmentAxis = getAlignmentAxis(placement);
const alignLength = getAxisLength(alignmentAxis);
const side = getSide(placement);
const isVertical = sideAxis === 'y';
const commonX = reference.x + reference.width / 2 - floating.width / 2;
const commonY = reference.y + reference.height / 2 - floating.height / 2;
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
let coords;
switch (side) {
case 'top':
coords = {
x: commonX,
y: reference.y - floating.height
};
break;
case 'bottom':
coords = {
x: commonX,
y: reference.y + reference.height
};
break;
case 'right':
coords = {
x: reference.x + reference.width,
y: commonY
};
break;
case 'left':
coords = {
x: reference.x - floating.width,
y: commonY
};
break;
default:
coords = {
x: reference.x,
y: reference.y
};
}
switch (getAlignment(placement)) {
case 'start':
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
break;
case 'end':
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
break;
}
return coords;
}
/**
* Computes the `x` and `y` coordinates that will place the floating element
* next to a given reference element.
*
* This export does not have any `platform` interface logic. You will need to
* write one for the platform you are using Floating UI with.
*/
const computePosition$1 = async (reference, floating, config) => {
const {
placement = 'bottom',
strategy = 'absolute',
middleware = [],
platform
} = config;
const validMiddleware = middleware.filter(Boolean);
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
let rects = await platform.getElementRects({
reference,
floating,
strategy
});
let {
x,
y
} = computeCoordsFromPlacement(rects, placement, rtl);
let statefulPlacement = placement;
let middlewareData = {};
let resetCount = 0;
for (let i = 0; i < validMiddleware.length; i++) {
const {
name,
fn
} = validMiddleware[i];
const {
x: nextX,
y: nextY,
data,
reset
} = await fn({
x,
y,
initialPlacement: placement,
placement: statefulPlacement,
strategy,
middlewareData,
rects,
platform,
elements: {
reference,
floating
}
});
x = nextX != null ? nextX : x;
y = nextY != null ? nextY : y;
middlewareData = {
...middlewareData,
[name]: {
...middlewareData[name],
...data
}
};
if (reset && resetCount <= 50) {
resetCount++;
if (typeof reset === 'object') {
if (reset.placement) {
statefulPlacement = reset.placement;
}
if (reset.rects) {
rects = reset.rects === true ? await platform.getElementRects({
reference,
floating,
strategy
}) : reset.rects;
}
({
x,
y
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
}
i = -1;
}
}
return {
x,
y,
placement: statefulPlacement,
strategy,
middlewareData
};
};
/**
* Resolves with an object of overflow side offsets that determine how much the
* element is overflowing a given clipping boundary on each side.
* - positive = overflowing the boundary by that number of pixels
* - negative = how many pixels left before it will overflow
* - 0 = lies flush with the boundary
* @see https://floating-ui.com/docs/detectOverflow
*/
async function detectOverflow$1(state, options) {
var _await$platform$isEle;
if (options === void 0) {
options = {};
}
const {
x,
y,
platform,
rects,
elements,
strategy
} = state;
const {
boundary = 'clippingAncestors',
rootBoundary = 'viewport',
elementContext = 'floating',
altBoundary = false,
padding = 0
} = evaluate(options, state);
const paddingObject = getPaddingObject(padding);
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
const element = elements[altBoundary ? altContext : elementContext];
const clippingClientRect = rectToClientRect$1(await platform.getClippingRect({
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
boundary,
rootBoundary,
strategy
}));
const rect = elementContext === 'floating' ? {
x,
y,
width: rects.floating.width,
height: rects.floating.height
} : rects.reference;
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
x: 1,
y: 1
} : {
x: 1,
y: 1
};
const elementClientRect = rectToClientRect$1(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
elements,
rect,
offsetParent,
strategy
}) : rect);
return {
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
};
}
/**
* Provides data to position an inner element of the floating element so that it
* appears centered to the reference element.
* @see https://floating-ui.com/docs/arrow
*/
const arrow$4 = options => ({
name: 'arrow',
options,
async fn(state) {
const {
x,
y,
placement,
rects,
platform,
elements,
middlewareData
} = state;
// Since `element` is required, we don't Partial<> the type.
const {
element,
padding = 0
} = evaluate(options, state) || {};
if (element == null) {
return {};
}
const paddingObject = getPaddingObject(padding);
const coords = {
x,
y
};
const axis = getAlignmentAxis(placement);
const length = getAxisLength(axis);
const arrowDimensions = await platform.getDimensions(element);
const isYAxis = axis === 'y';
const minProp = isYAxis ? 'top' : 'left';
const maxProp = isYAxis ? 'bottom' : 'right';
const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
const startDiff = coords[axis] - rects.reference[axis];
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
// DOM platform can return `window` as the `offsetParent`.
if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
clientSize = elements.floating[clientProp] || rects.floating[length];
}
const centerToReference = endDiff / 2 - startDiff / 2;
// If the padding is large enough that it causes the arrow to no longer be
// centered, modify the padding so that it is centered.
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
const minPadding = min$1(paddingObject[minProp], largestPossiblePadding);
const maxPadding = min$1(paddingObject[maxProp], largestPossiblePadding);
// Make sure the arrow doesn't overflow the floating element if the center
// point is outside the floating element's bounds.
const min$1$1 = minPadding;
const max = clientSize - arrowDimensions[length] - maxPadding;
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
const offset = clamp(min$1$1, center, max);
// If the reference is small enough that the arrow's padding causes it to
// to point to nothing for an aligned placement, adjust the offset of the
// floating element itself. To ensure `shift()` continues to take action,
// a single reset is performed when this is true.
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
const alignmentOffset = shouldAddOffset ? center < min$1$1 ? center - min$1$1 : center - max : 0;
return {
[axis]: coords[axis] + alignmentOffset,
data: {
[axis]: offset,
centerOffset: center - offset - alignmentOffset,
...(shouldAddOffset && {
alignmentOffset
})
},
reset: shouldAddOffset
};
}
});
/**
* Optimizes the visibility of the floating element by flipping the `placement`
* in order to keep it in view when the preferred placement(s) will overflow the
* clipping boundary. Alternative to `autoPlacement`.
* @see https://floating-ui.com/docs/flip
*/
const flip$4 = function (options) {
if (options === void 0) {
options = {};
}
return {
name: 'flip',
options,
async fn(state) {
var _middlewareData$arrow, _middlewareData$flip;
const {
placement,
middlewareData,
rects,
initialPlacement,
platform,
elements
} = state;
const {
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = true,
fallbackPlacements: specifiedFallbackPlacements,
fallbackStrategy = 'bestFit',
fallbackAxisSideDirection = 'none',
flipAlignment = true,
...detectOverflowOptions
} = evaluate(options, state);
// If a reset by the arrow was caused due to an alignment offset being
// added, we should skip any logic now since `flip()` has already done its
// work.
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
return {};
}
const side = getSide(placement);
const initialSideAxis = getSideAxis(initialPlacement);
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement$1(initialPlacement)] : getExpandedPlacements(initialPlacement));
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
}
const placements = [initialPlacement, ...fallbackPlacements];
const overflow = await detectOverflow$1(state, detectOverflowOptions);
const overflows = [];
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
if (checkMainAxis) {
overflows.push(overflow[side]);
}
if (checkCrossAxis) {
const sides = getAlignmentSides(placement, rects, rtl);
overflows.push(overflow[sides[0]], overflow[sides[1]]);
}
overflowsData = [...overflowsData, {
placement,
overflows
}];
// One or more sides is overflowing.
if (!overflows.every(side => side <= 0)) {
var _middlewareData$flip2, _overflowsData$filter;
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
const nextPlacement = placements[nextIndex];
if (nextPlacement) {
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
if (!ignoreCrossAxisOverflow ||
// We leave the current main axis only if every placement on that axis
// overflows the main axis.
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
// Try next placement and re-run the lifecycle.
return {
data: {
index: nextIndex,
overflows: overflowsData
},
reset: {
placement: nextPlacement
}
};
}
}
// First, find the candidates that fit on the mainAxis side of overflow,
// then find the placement that fits the best on the main crossAxis side.
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
// Otherwise fallback.
if (!resetPlacement) {
switch (fallbackStrategy) {
case 'bestFit':
{
var _overflowsData$filter2;
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
if (hasFallbackAxisSideDirection) {
const currentSideAxis = getSideAxis(d.placement);
return currentSideAxis === initialSideAxis ||
// Create a bias to the `y` side axis due to horizontal
// reading directions favoring greater width.
currentSideAxis === 'y';
}
return true;
}).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
if (placement) {
resetPlacement = placement;
}
break;
}
case 'initialPlacement':
resetPlacement = initialPlacement;
break;
}
}
if (placement !== resetPlacement) {
return {
reset: {
placement: resetPlacement
}
};
}
}
return {};
}
};
};
function getSideOffsets$1(overflow, rect) {
return {
top: overflow.top - rect.height,
right: overflow.right - rect.width,
bottom: overflow.bottom - rect.height,
left: overflow.left - rect.width
};
}
function isAnySideFullyClipped$1(overflow) {
return sides.some(side => overflow[side] >= 0);
}
/**
* Provides data to hide the floating element in applicable situations, such as
* when it is not in the same clipping context as the reference element.
* @see https://floating-ui.com/docs/hide
*/
const hide$4 = function (options) {
if (options === void 0) {
options = {};
}
return {
name: 'hide',
options,
async fn(state) {
const {
rects
} = state;
const {
strategy = 'referenceHidden',
...detectOverflowOptions
} = evaluate(options, state);
switch (strategy) {
case 'referenceHidden':
{
const overflow = await detectOverflow$1(state, {
...detectOverflowOptions,
elementContext: 'reference'
});
const offsets = getSideOffsets$1(overflow, rects.reference);
return {
data: {
referenceHiddenOffsets: offsets,
referenceHidden: isAnySideFullyClipped$1(offsets)
}
};
}
case 'escaped':
{
const overflow = await detectOverflow$1(state, {
...detectOverflowOptions,
altBoundary: true
});
const offsets = getSideOffsets$1(overflow, rects.floating);
return {
data: {
escapedOffsets: offsets,
escaped: isAnySideFullyClipped$1(offsets)
}
};
}
default:
{
return {};
}
}
}
};
};
const originSides = /*#__PURE__*/new Set(['left', 'top']);
// For type backwards-compatibility, the `OffsetOptions` type was also
// Derivable.
async function convertValueToCoords(state, options) {
const {
placement,
platform,
elements
} = state;
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
const side = getSide(placement);
const alignment = getAlignment(placement);
const isVertical = getSideAxis(placement) === 'y';
const mainAxisMulti = originSides.has(side) ? -1 : 1;
const crossAxisMulti = rtl && isVertical ? -1 : 1;
const rawValue = evaluate(options, state);
// eslint-disable-next-line prefer-const
let {
mainAxis,
crossAxis,
alignmentAxis
} = typeof rawValue === 'number' ? {
mainAxis: rawValue,
crossAxis: 0,
alignmentAxis: null
} : {
mainAxis: rawValue.mainAxis || 0,
crossAxis: rawValue.crossAxis || 0,
alignmentAxis: rawValue.alignmentAxis
};
if (alignment && typeof alignmentAxis === 'number') {
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
}
return isVertical ? {
x: crossAxis * crossAxisMulti,
y: mainAxis * mainAxisMulti
} : {
x: mainAxis * mainAxisMulti,
y: crossAxis * crossAxisMulti
};
}
/**
* Modifies the placement by translating the floating element along the
* specified axes.
* A number (shorthand for `mainAxis` or distance), or an axes configuration
* object may be passed.
* @see https://floating-ui.com/docs/offset
*/
const offset$4 = function (options) {
if (options === void 0) {
options = 0;
}
return {
name: 'offset',
options,
async fn(state) {
var _middlewareData$offse, _middlewareData$arrow;
const {
x,
y,
placement,
middlewareData
} = state;
const diffCoords = await convertValueToCoords(state, options);
// If the placement is the same and the arrow caused an alignment offset
// then we don't need to change the positioning coordinates.
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
return {};
}
return {
x: x + diffCoords.x,
y: y + diffCoords.y,
data: {
...diffCoords,
placement
}
};
}
};
};
/**
* Optimizes the visibility of the floating element by shifting it in order to
* keep it in view when it will overflow the clipping boundary.
* @see https://floating-ui.com/docs/shift
*/
const shift$2 = function (options) {
if (options === void 0) {
options = {};
}
return {
name: 'shift',
options,
async fn(state) {
const {
x,
y,
placement
} = state;
const {
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = false,
limiter = {
fn: _ref => {
let {
x,
y
} = _ref;
return {
x,
y
};
}
},
...detectOverflowOptions
} = evaluate(options, state);
const coords = {
x,
y
};
const overflow = await detectOverflow$1(state, detectOverflowOptions);
const crossAxis = getSideAxis(getSide(placement));
const mainAxis = getOppositeAxis(crossAxis);
let mainAxisCoord = coords[mainAxis];
let crossAxisCoord = coords[crossAxis];
if (checkMainAxis) {
const minSide = mainAxis === 'y' ? 'top' : 'left';
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
const min = mainAxisCoord + overflow[minSide];
const max = mainAxisCoord - overflow[maxSide];
mainAxisCoord = clamp(min, mainAxisCoord, max);
}
if (checkCrossAxis) {
const minSide = crossAxis === 'y' ? 'top' : 'left';
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
const min = crossAxisCoord + overflow[minSide];
const max = crossAxisCoord - overflow[maxSide];
crossAxisCoord = clamp(min, crossAxisCoord, max);
}
const limitedCoords = limiter.fn({
...state,
[mainAxis]: mainAxisCoord,
[crossAxis]: crossAxisCoord
});
return {
...limitedCoords,
data: {
x: limitedCoords.x - x,
y: limitedCoords.y - y,
enabled: {
[mainAxis]: checkMainAxis,
[crossAxis]: checkCrossAxis
}
}
};
}
};
};
/**
* Built-in `limiter` that will stop `shift()` at a certain point.
*/
const limitShift$2 = function (options) {
if (options === void 0) {
options = {};
}
return {
options,
fn(state) {
const {
x,
y,
placement,
rects,
middlewareData
} = state;
const {
offset = 0,
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = true
} = evaluate(options, state);
const coords = {
x,
y
};
const crossAxis = getSideAxis(placement);
const mainAxis = getOppositeAxis(crossAxis);
let mainAxisCoord = coords[mainAxis];
let crossAxisCoord = coords[crossAxis];
const rawOffset = evaluate(offset, state);
const computedOffset = typeof rawOffset === 'number' ? {
mainAxis: rawOffset,
crossAxis: 0
} : {
mainAxis: 0,
crossAxis: 0,
...rawOffset
};
if (checkMainAxis) {
const len = mainAxis === 'y' ? 'height' : 'width';
const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
if (mainAxisCoord < limitMin) {
mainAxisCoord = limitMin;
} else if (mainAxisCoord > limitMax) {
mainAxisCoord = limitMax;
}
}
if (checkCrossAxis) {
var _middlewareData$offse, _middlewareData$offse2;
const len = mainAxis === 'y' ? 'width' : 'height';
const isOriginSide = originSides.has(getSide(placement));
const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
if (crossAxisCoord < limitMin) {
crossAxisCoord = limitMin;
} else if (crossAxisCoord > limitMax) {
crossAxisCoord = limitMax;
}
}
return {
[mainAxis]: mainAxisCoord,
[crossAxis]: crossAxisCoord
};
}
};
};
/**
* Provides data that allows you to change the size of the floating element —
* for instance, prevent it from overflowing the clipping boundary or match the
* width of the reference element.
* @see https://floating-ui.com/docs/size
*/
const size$2 = function (options) {
if (options === void 0) {
options = {};
}
return {
name: 'size',
options,
async fn(state) {
var _state$middlewareData, _state$middlewareData2;
const {
placement,
rects,
platform,
elements
} = state;
const {
apply = () => {},
...detectOverflowOptions
} = evaluate(options, state);
const overflow = await detectOverflow$1(state, detectOverflowOptions);
const side = getSide(placement);
const alignment = getAlignment(placement);
const isYAxis = getSideAxis(placement) === 'y';
const {
width,
height
} = rects.floating;
let heightSide;
let widthSide;
if (side === 'top' || side === 'bottom') {
heightSide = side;
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
} else {
widthSide = side;
heightSide = alignment === 'end' ? 'top' : 'bottom';
}
const maximumClippingHeight = height - overflow.top - overflow.bottom;
const maximumClippingWidth = width - overflow.left - overflow.right;
const overflowAvailableHeight = min$1(height - overflow[heightSide], maximumClippingHeight);
const overflowAvailableWidth = min$1(width - overflow[widthSide], maximumClippingWidth);
const noShift = !state.middlewareData.shift;
let availableHeight = overflowAvailableHeight;
let availableWidth = overflowAvailableWidth;
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
availableWidth = maximumClippingWidth;
}
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
availableHeight = maximumClippingHeight;
}
if (noShift && !alignment) {
const xMin = max$1(overflow.left, 0);
const xMax = max$1(overflow.right, 0);
const yMin = max$1(overflow.top, 0);
const yMax = max$1(overflow.bottom, 0);
if (isYAxis) {
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max$1(overflow.left, overflow.right));
} else {
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max$1(overflow.top, overflow.bottom));
}
}
await apply({
...state,
availableWidth,
availableHeight
});
const nextDimensions = await platform.getDimensions(elements.floating);
if (width !== nextDimensions.width || height !== nextDimensions.height) {
return {
reset: {
rects: true
}
};
}
return {};
}
};
};
function hasWindow() {
return typeof window !== 'undefined';
}
function getNodeName$1(node) {
if (isNode(node)) {
return (node.nodeName || '').toLowerCase();
}
// Mocked nodes in testing environments may not be instances of Node. By
// returning `#document` an infinite loop won't occur.
// https://github.com/floating-ui/floating-ui/issues/2317
return '#document';
}
function getWindow$1(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getDocumentElement$1(node) {
var _ref;
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow$1(value).Node;
}
function isElement$1(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow$1(value).Element;
}
function isHTMLElement$2(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow$1(value).HTMLElement;
}
function isShadowRoot$1(value) {
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow$1(value).ShadowRoot;
}
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle$2(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
}
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
function isTableElement$1(element) {
return tableElements.has(getNodeName$1(element));
}
const topLayerSelectors = [':popover-open', ':modal'];
function isTopLayer(element) {
return topLayerSelectors.some(selector => {
try {
return element.matches(selector);
} catch (_e) {
return false;
}
});
}
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
const containValues = ['paint', 'layout', 'strict', 'content'];
function isContainingBlock(elementOrCss) {
const webkit = isWebKit();
const css = isElement$1(elementOrCss) ? getComputedStyle$2(elementOrCss) : elementOrCss;
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
}
function getContainingBlock$1(element) {
let currentNode = getParentNode$1(element);
while (isHTMLElement$2(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else if (isTopLayer(currentNode)) {
return null;
}
currentNode = getParentNode$1(currentNode);
}
return null;
}
function isWebKit() {
if (typeof CSS === 'undefined' || !CSS.supports) return false;
return CSS.supports('-webkit-backdrop-filter', 'none');
}
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
function isLastTraversableNode(node) {
return lastTraversableNodeNames.has(getNodeName$1(node));
}
function getComputedStyle$2(element) {
return getWindow$1(element).getComputedStyle(element);
}
function getNodeScroll$1(element) {
if (isElement$1(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.scrollX,
scrollTop: element.scrollY
};
}
function getParentNode$1(node) {
if (getNodeName$1(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot$1(node) && node.host ||
// Fallback.
getDocumentElement$1(node);
return isShadowRoot$1(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode$1(node);
if (isLastTraversableNode(parentNode)) {
return node.ownerDocument ? node.ownerDocument.body : node.body;
}
if (isHTMLElement$2(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list, traverseIframes) {
var _node$ownerDocument2;
if (list === void 0) {
list = [];
}
if (traverseIframes === void 0) {
traverseIframes = true;
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = getWindow$1(scrollableAncestor);
if (isBody) {
const frameElement = getFrameElement(win);
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
}
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
}
function getFrameElement(win) {
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
}
function getCssDimensions(element) {
const css = getComputedStyle$2(element);
// In testing environments, the `width` and `height` properties are empty
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
let width = parseFloat(css.width) || 0;
let height = parseFloat(css.height) || 0;
const hasOffset = isHTMLElement$2(element);
const offsetWidth = hasOffset ? element.offsetWidth : width;
const offsetHeight = hasOffset ? element.offsetHeight : height;
const shouldFallback = round$2(width) !== offsetWidth || round$2(height) !== offsetHeight;
if (shouldFallback) {
width = offsetWidth;
height = offsetHeight;
}
return {
width,
height,
$: shouldFallback
};
}
function unwrapElement(element) {
return !isElement$1(element) ? element.contextElement : element;
}
function getScale$1(element) {
const domElement = unwrapElement(element);
if (!isHTMLElement$2(domElement)) {
return createCoords(1);
}
const rect = domElement.getBoundingClientRect();
const {
width,
height,
$
} = getCssDimensions(domElement);
let x = ($ ? round$2(rect.width) : rect.width) / width;
let y = ($ ? round$2(rect.height) : rect.height) / height;
// 0, NaN, or Infinity should always fallback to 1.
if (!x || !Number.isFinite(x)) {
x = 1;
}
if (!y || !Number.isFinite(y)) {
y = 1;
}
return {
x,
y
};
}
const noOffsets = /*#__PURE__*/createCoords(0);
function getVisualOffsets(element) {
const win = getWindow$1(element);
if (!isWebKit() || !win.visualViewport) {
return noOffsets;
}
return {
x: win.visualViewport.offsetLeft,
y: win.visualViewport.offsetTop
};
}
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
if (isFixed === void 0) {
isFixed = false;
}
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow$1(element)) {
return false;
}
return isFixed;
}
function getBoundingClientRect$1(element, includeScale, isFixedStrategy, offsetParent) {
if (includeScale === void 0) {
includeScale = false;
}
if (isFixedStrategy === void 0) {
isFixedStrategy = false;
}
const clientRect = element.getBoundingClientRect();
const domElement = unwrapElement(element);
let scale = createCoords(1);
if (includeScale) {
if (offsetParent) {
if (isElement$1(offsetParent)) {
scale = getScale$1(offsetParent);
}
} else {
scale = getScale$1(element);
}
}
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
let x = (clientRect.left + visualOffsets.x) / scale.x;
let y = (clientRect.top + visualOffsets.y) / scale.y;
let width = clientRect.width / scale.x;
let height = clientRect.height / scale.y;
if (domElement) {
const win = getWindow$1(domElement);
const offsetWin = offsetParent && isElement$1(offsetParent) ? getWindow$1(offsetParent) : offsetParent;
let currentWin = win;
let currentIFrame = getFrameElement(currentWin);
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
const iframeScale = getScale$1(currentIFrame);
const iframeRect = currentIFrame.getBoundingClientRect();
const css = getComputedStyle$2(currentIFrame);
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
x *= iframeScale.x;
y *= iframeScale.y;
width *= iframeScale.x;
height *= iframeScale.y;
x += left;
y += top;
currentWin = getWindow$1(currentIFrame);
currentIFrame = getFrameElement(currentWin);
}
}
return rectToClientRect$1({
width,
height,
x,
y
});
}
// If has a CSS width greater than the viewport, then this will be
// incorrect for RTL.
function getWindowScrollBarX$1(element, rect) {
const leftScroll = getNodeScroll$1(element).scrollLeft;
if (!rect) {
return getBoundingClientRect$1(getDocumentElement$1(element)).left + leftScroll;
}
return rect.left + leftScroll;
}
function getHTMLOffset(documentElement, scroll) {
const htmlRect = documentElement.getBoundingClientRect();
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX$1(documentElement, htmlRect);
const y = htmlRect.top + scroll.scrollTop;
return {
x,
y
};
}
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
let {
elements,
rect,
offsetParent,
strategy
} = _ref;
const isFixed = strategy === 'fixed';
const documentElement = getDocumentElement$1(offsetParent);
const topLayer = elements ? isTopLayer(elements.floating) : false;
if (offsetParent === documentElement || topLayer && isFixed) {
return rect;
}
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
let scale = createCoords(1);
const offsets = createCoords(0);
const isOffsetParentAnElement = isHTMLElement$2(offsetParent);
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
if (getNodeName$1(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll$1(offsetParent);
}
if (isHTMLElement$2(offsetParent)) {
const offsetRect = getBoundingClientRect$1(offsetParent);
scale = getScale$1(offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
}
}
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
return {
width: rect.width * scale.x,
height: rect.height * scale.y,
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
};
}
function getClientRects(element) {
return Array.from(element.getClientRects());
}
// Gets the entire size of the scrollable document area, even extending outside
// of the `` and `` rect bounds if horizontally scrollable.
function getDocumentRect$1(element) {
const html = getDocumentElement$1(element);
const scroll = getNodeScroll$1(element);
const body = element.ownerDocument.body;
const width = max$1(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
const height = max$1(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
let x = -scroll.scrollLeft + getWindowScrollBarX$1(element);
const y = -scroll.scrollTop;
if (getComputedStyle$2(body).direction === 'rtl') {
x += max$1(html.clientWidth, body.clientWidth) - width;
}
return {
width,
height,
x,
y
};
}
// Safety check: ensure the scrollbar space is reasonable in case this
// calculation is affected by unusual styles.
// Most scrollbars leave 15-18px of space.
const SCROLLBAR_MAX = 25;
function getViewportRect$1(element, strategy) {
const win = getWindow$1(element);
const html = getDocumentElement$1(element);
const visualViewport = win.visualViewport;
let width = html.clientWidth;
let height = html.clientHeight;
let x = 0;
let y = 0;
if (visualViewport) {
width = visualViewport.width;
height = visualViewport.height;
const visualViewportBased = isWebKit();
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
x = visualViewport.offsetLeft;
y = visualViewport.offsetTop;
}
}
const windowScrollbarX = getWindowScrollBarX$1(html);
// `overflow: hidden` + `scrollbar-gutter: stable` reduces the
// visual width of the but this is not considered in the size
// of `html.clientWidth`.
if (windowScrollbarX <= 0) {
const doc = html.ownerDocument;
const body = doc.body;
const bodyStyles = getComputedStyle(body);
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
width -= clippingStableScrollbarWidth;
}
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
// If the scrollbar is on the left, the width needs to be extended
// by the scrollbar amount so there isn't extra space on the right.
width += windowScrollbarX;
}
return {
width,
height,
x,
y
};
}
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
// Returns the inner client rect, subtracting scrollbars if present.
function getInnerBoundingClientRect$1(element, strategy) {
const clientRect = getBoundingClientRect$1(element, true, strategy === 'fixed');
const top = clientRect.top + element.clientTop;
const left = clientRect.left + element.clientLeft;
const scale = isHTMLElement$2(element) ? getScale$1(element) : createCoords(1);
const width = element.clientWidth * scale.x;
const height = element.clientHeight * scale.y;
const x = left * scale.x;
const y = top * scale.y;
return {
width,
height,
x,
y
};
}
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
let rect;
if (clippingAncestor === 'viewport') {
rect = getViewportRect$1(element, strategy);
} else if (clippingAncestor === 'document') {
rect = getDocumentRect$1(getDocumentElement$1(element));
} else if (isElement$1(clippingAncestor)) {
rect = getInnerBoundingClientRect$1(clippingAncestor, strategy);
} else {
const visualOffsets = getVisualOffsets(element);
rect = {
x: clippingAncestor.x - visualOffsets.x,
y: clippingAncestor.y - visualOffsets.y,
width: clippingAncestor.width,
height: clippingAncestor.height
};
}
return rectToClientRect$1(rect);
}
function hasFixedPositionAncestor(element, stopNode) {
const parentNode = getParentNode$1(element);
if (parentNode === stopNode || !isElement$1(parentNode) || isLastTraversableNode(parentNode)) {
return false;
}
return getComputedStyle$2(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
}
// A "clipping ancestor" is an `overflow` element with the characteristic of
// clipping (or hiding) child elements. This returns all clipping ancestors
// of the given element up the tree.
function getClippingElementAncestors(element, cache) {
const cachedResult = cache.get(element);
if (cachedResult) {
return cachedResult;
}
let result = getOverflowAncestors(element, [], false).filter(el => isElement$1(el) && getNodeName$1(el) !== 'body');
let currentContainingBlockComputedStyle = null;
const elementIsFixed = getComputedStyle$2(element).position === 'fixed';
let currentNode = elementIsFixed ? getParentNode$1(element) : element;
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
while (isElement$1(currentNode) && !isLastTraversableNode(currentNode)) {
const computedStyle = getComputedStyle$2(currentNode);
const currentNodeIsContaining = isContainingBlock(currentNode);
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
currentContainingBlockComputedStyle = null;
}
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
if (shouldDropCurrentNode) {
// Drop non-containing blocks.
result = result.filter(ancestor => ancestor !== currentNode);
} else {
// Record last containing block for next iteration.
currentContainingBlockComputedStyle = computedStyle;
}
currentNode = getParentNode$1(currentNode);
}
cache.set(element, result);
return result;
}
// Gets the maximum area that the element is visible in due to any number of
// clipping ancestors.
function getClippingRect$1(_ref) {
let {
element,
boundary,
rootBoundary,
strategy
} = _ref;
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
const firstClippingAncestor = clippingAncestors[0];
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
accRect.top = max$1(rect.top, accRect.top);
accRect.right = min$1(rect.right, accRect.right);
accRect.bottom = min$1(rect.bottom, accRect.bottom);
accRect.left = max$1(rect.left, accRect.left);
return accRect;
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
return {
width: clippingRect.right - clippingRect.left,
height: clippingRect.bottom - clippingRect.top,
x: clippingRect.left,
y: clippingRect.top
};
}
function getDimensions(element) {
const {
width,
height
} = getCssDimensions(element);
return {
width,
height
};
}
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
const isOffsetParentAnElement = isHTMLElement$2(offsetParent);
const documentElement = getDocumentElement$1(offsetParent);
const isFixed = strategy === 'fixed';
const rect = getBoundingClientRect$1(element, true, isFixed, offsetParent);
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
const offsets = createCoords(0);
// If the scrollbar appears on the left (e.g. RTL systems). Use
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
function setLeftRTLScrollbarOffset() {
offsets.x = getWindowScrollBarX$1(documentElement);
}
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
if (getNodeName$1(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll$1(offsetParent);
}
if (isOffsetParentAnElement) {
const offsetRect = getBoundingClientRect$1(offsetParent, true, isFixed, offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
} else if (documentElement) {
setLeftRTLScrollbarOffset();
}
}
if (isFixed && !isOffsetParentAnElement && documentElement) {
setLeftRTLScrollbarOffset();
}
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
return {
x,
y,
width: rect.width,
height: rect.height
};
}
function isStaticPositioned(element) {
return getComputedStyle$2(element).position === 'static';
}
function getTrueOffsetParent$1(element, polyfill) {
if (!isHTMLElement$2(element) || getComputedStyle$2(element).position === 'fixed') {
return null;
}
if (polyfill) {
return polyfill(element);
}
let rawOffsetParent = element.offsetParent;
// Firefox returns the element as the offsetParent if it's non-static,
// while Chrome and Safari return the element. The element must
// be used to perform the correct calculations even if the element is
// non-static.
if (getDocumentElement$1(element) === rawOffsetParent) {
rawOffsetParent = rawOffsetParent.ownerDocument.body;
}
return rawOffsetParent;
}
// Gets the closest ancestor positioned element. Handles some edge cases,
// such as table ancestors and cross browser bugs.
function getOffsetParent$1(element, polyfill) {
const win = getWindow$1(element);
if (isTopLayer(element)) {
return win;
}
if (!isHTMLElement$2(element)) {
let svgOffsetParent = getParentNode$1(element);
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
if (isElement$1(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
return svgOffsetParent;
}
svgOffsetParent = getParentNode$1(svgOffsetParent);
}
return win;
}
let offsetParent = getTrueOffsetParent$1(element, polyfill);
while (offsetParent && isTableElement$1(offsetParent) && isStaticPositioned(offsetParent)) {
offsetParent = getTrueOffsetParent$1(offsetParent, polyfill);
}
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
return win;
}
return offsetParent || getContainingBlock$1(element) || win;
}
const getElementRects = async function (data) {
const getOffsetParentFn = this.getOffsetParent || getOffsetParent$1;
const getDimensionsFn = this.getDimensions;
const floatingDimensions = await getDimensionsFn(data.floating);
return {
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
floating: {
x: 0,
y: 0,
width: floatingDimensions.width,
height: floatingDimensions.height
}
};
};
function isRTL(element) {
return getComputedStyle$2(element).direction === 'rtl';
}
const platform = {
convertOffsetParentRelativeRectToViewportRelativeRect,
getDocumentElement: getDocumentElement$1,
getClippingRect: getClippingRect$1,
getOffsetParent: getOffsetParent$1,
getElementRects,
getClientRects,
getDimensions,
getScale: getScale$1,
isElement: isElement$1,
isRTL
};
function rectsAreEqual(a, b) {
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
}
// https://samthor.au/2021/observing-dom/
function observeMove(element, onMove) {
let io = null;
let timeoutId;
const root = getDocumentElement$1(element);
function cleanup() {
var _io;
clearTimeout(timeoutId);
(_io = io) == null || _io.disconnect();
io = null;
}
function refresh(skip, threshold) {
if (skip === void 0) {
skip = false;
}
if (threshold === void 0) {
threshold = 1;
}
cleanup();
const elementRectForRootMargin = element.getBoundingClientRect();
const {
left,
top,
width,
height
} = elementRectForRootMargin;
if (!skip) {
onMove();
}
if (!width || !height) {
return;
}
const insetTop = floor(top);
const insetRight = floor(root.clientWidth - (left + width));
const insetBottom = floor(root.clientHeight - (top + height));
const insetLeft = floor(left);
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
const options = {
rootMargin,
threshold: max$1(0, min$1(1, threshold)) || 1
};
let isFirstUpdate = true;
function handleObserve(entries) {
const ratio = entries[0].intersectionRatio;
if (ratio !== threshold) {
if (!isFirstUpdate) {
return refresh();
}
if (!ratio) {
// If the reference is clipped, the ratio is 0. Throttle the refresh
// to prevent an infinite loop of updates.
timeoutId = setTimeout(() => {
refresh(false, 1e-7);
}, 1000);
} else {
refresh(false, ratio);
}
}
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
// It's possible that even though the ratio is reported as 1, the
// element is not actually fully within the IntersectionObserver's root
// area anymore. This can happen under performance constraints. This may
// be a bug in the browser's IntersectionObserver implementation. To
// work around this, we compare the element's bounding rect now with
// what it was at the time we created the IntersectionObserver. If they
// are not equal then the element moved, so we refresh.
refresh();
}
isFirstUpdate = false;
}
// Older browsers don't support a `document` as the root and will throw an
// error.
try {
io = new IntersectionObserver(handleObserve, {
...options,
// Handle