= property.split('.');\n\n return props.reduce((acc, d) => acc && acc[d], data);\n }\n\n /* istanbul ignore else */\n if (is.number(property)) {\n return data[property];\n }\n\n return data;\n }\n\n return data;\n}\n","import equal from '@gilbarbara/deep-equal';\nimport is from 'is-lite';\n\nimport { compareNumbers, compareValues, getIterables, includesOrEqualsTo, nested } from './helpers';\nimport { Data, KeyType, TreeChanges, Value } from './types';\n\nexport default function treeChanges>(\n previousData: P,\n data: D,\n): TreeChanges {\n if ([previousData, data].some(is.nullOrUndefined)) {\n throw new Error('Missing required parameters');\n }\n\n if (![previousData, data].every(d => is.plainObject(d) || is.array(d))) {\n throw new Error('Expected plain objects or array');\n }\n\n const added = (key?: K, value?: Value): boolean => {\n try {\n return compareValues(previousData, data, { key, type: 'added', value });\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const changed = (key?: K | string, actual?: Value, previous?: Value): boolean => {\n try {\n const left = nested(previousData, key);\n const right = nested(data, key);\n const hasActual = is.defined(actual);\n const hasPrevious = is.defined(previous);\n\n if (hasActual || hasPrevious) {\n const leftComparator = hasPrevious\n ? includesOrEqualsTo(previous, left)\n : !includesOrEqualsTo(actual, left);\n const rightComparator = includesOrEqualsTo(actual, right);\n\n return leftComparator && rightComparator;\n }\n\n if ([left, right].every(is.array) || [left, right].every(is.plainObject)) {\n return !equal(left, right);\n }\n\n return left !== right;\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const changedFrom = (key: K | string, previous: Value, actual?: Value): boolean => {\n if (!is.defined(key)) {\n return false;\n }\n\n try {\n const left = nested(previousData, key);\n const right = nested(data, key);\n const hasActual = is.defined(actual);\n\n return (\n includesOrEqualsTo(previous, left) &&\n (hasActual ? includesOrEqualsTo(actual, right) : !hasActual)\n );\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const decreased = (key: K, actual?: Value, previous?: Value): boolean => {\n if (!is.defined(key)) {\n return false;\n }\n\n try {\n return compareNumbers(previousData, data, { key, actual, previous, type: 'decreased' });\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const emptied = (key?: K): boolean => {\n try {\n const [left, right] = getIterables(previousData, data, { key });\n\n return !!left.length && !right.length;\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const filled = (key?: K): boolean => {\n try {\n const [left, right] = getIterables(previousData, data, { key });\n\n return !left.length && !!right.length;\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const increased = (key: K, actual?: Value, previous?: Value): boolean => {\n if (!is.defined(key)) {\n return false;\n }\n\n try {\n return compareNumbers(previousData, data, { key, actual, previous, type: 'increased' });\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const removed = (key?: K, value?: Value): boolean => {\n try {\n return compareValues(previousData, data, { key, type: 'removed', value });\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n return { added, changed, changedFrom, decreased, emptied, filled, increased, removed };\n}\n\nexport type { Data, KeyType, TreeChanges, Value } from './types';\n","import { NarrowPlainObject, PlainObject, RemoveType, Simplify } from '@gilbarbara/types';\nimport is from 'is-lite';\n\nimport { InvertKeyValue, QueryStringFormatOptions } from './types';\n\n/**\n * Remove properties with undefined value from an object\n */\nexport function cleanUpObject(input: T) {\n const output: Record = {};\n\n for (const key in input) {\n if (input[key] !== undefined) {\n output[key] = input[key];\n }\n }\n\n return output as RemoveType;\n}\n\n/**\n * Get a nested property inside an object or array\n */\nexport function getNestedProperty>(input: T, path: string): any {\n if ((!is.plainObject(input) && !is.array(input)) || !path) {\n return input;\n }\n\n const segments = path.split('.');\n const { length } = segments;\n let output = input;\n\n for (let index = 0; index < length; index++) {\n const currentSegment = segments[index];\n const remainingSegments = segments.slice(index + 1);\n\n if (currentSegment === '+' && is.array(output) && remainingSegments.length === 1) {\n return output.map(d => d[remainingSegments.join('.')]);\n }\n\n try {\n output = output[currentSegment];\n } catch {\n // skip\n }\n }\n\n return output;\n}\n\n/**\n * Invert object key and value\n */\nexport function invertKeys>(input: T) {\n if (!is.plainObject(input)) {\n throw new TypeError('Expected an object');\n }\n\n const result: Record = {};\n\n for (const [key, value] of Object.entries(input)) {\n result[value] = key;\n }\n\n return result as InvertKeyValue;\n}\n\n/**\n * Set the key as the value\n */\nexport function keyMirror(input: T): { [K in keyof T]: K } {\n if (!is.plainObject(input)) {\n throw new TypeError('Expected an object');\n }\n\n const output: any = {};\n\n for (const key in input) {\n /* istanbul ignore else */\n if (!Object.prototype.hasOwnProperty.call(output, key)) {\n output[key] = key;\n }\n }\n\n return output;\n}\n\n/**\n * Merges the defaultProps with literal values with the incoming props, removing undefined values from it that would override the defaultProps.\n * The result is a type-safe object with the defaultProps as required properties.\n */\nexport function mergeProps, TProps extends PlainObject>(\n defaultProps: TDefaultProps,\n props: TProps,\n) {\n const cleanProps = cleanUpObject(props);\n\n return { ...defaultProps, ...cleanProps } as unknown as Simplify<\n TProps & Required>\n >;\n}\n\n/**\n * Type-safe Object.entries()\n */\nexport function objectEntries>(input: T) {\n return Object.entries(input) as Array<{ [K in keyof T]-?: [K, T[K]] }[keyof T]>;\n}\n\n/**\n * Type-safe Object.keys()\n */\nexport function objectKeys>(input: T) {\n return Object.keys(input) as Array;\n}\n\n/**\n * Convert an object to an array of objects\n */\nexport function objectToArray(input: T, includeOnly?: string) {\n if (!is.plainObject(input)) {\n throw new TypeError('Expected an object');\n }\n\n return Object.entries(input)\n .filter(([, value]) => (includeOnly ? typeof value === `${includeOnly}` : true)) // eslint-disable-line valid-typeof\n .map(([key, value]) => ({ [key]: value }));\n}\n\n/**\n * Remove properties from an object\n */\nexport function omit, K extends keyof T>(\n input: NarrowPlainObject,\n ...filter: K[]\n) {\n if (!is.plainObject(input)) {\n throw new TypeError('Expected an object');\n }\n\n const output: any = {};\n\n for (const key in input) {\n /* istanbul ignore else */\n if ({}.hasOwnProperty.call(input, key)) {\n if (!filter.includes(key as unknown as K)) {\n output[key] = input[key];\n }\n }\n }\n\n return output as Omit;\n}\n\n/**\n * Select properties from an object\n */\nexport function pick, K extends keyof T>(\n input: NarrowPlainObject,\n ...filter: K[]\n) {\n if (!is.plainObject(input)) {\n throw new TypeError('Expected an object');\n }\n\n if (!filter.length) {\n return input;\n }\n\n const output: any = {};\n\n for (const key in input) {\n /* istanbul ignore else */\n if ({}.hasOwnProperty.call(input, key)) {\n if (filter.includes(key as unknown as K)) {\n output[key] = input[key];\n }\n }\n }\n\n return output as Pick;\n}\n\n/**\n * Stringify a shallow object into a query string\n */\nexport function queryStringFormat(\n input: T,\n options: QueryStringFormatOptions = {},\n) {\n const { addPrefix = false, encoder = encodeURIComponent, encodeValuesOnly = true } = options;\n\n if (!is.plainObject(input)) {\n throw new TypeError(\"input type isn't supported\");\n }\n\n const isValidInput = Object.values(input).every(item => {\n if (is.array(item)) {\n return item.every(d => is.string(d) || is.number(d));\n }\n\n return is.string(item);\n });\n\n if (!isValidInput) {\n throw new TypeError(\"input format isn't supported\");\n }\n\n const output = Object.entries(input)\n .map(([key, value]) => {\n const nextKey = encodeValuesOnly ? key : encoder(key);\n const nextValue = is.array(value) ? value.map(encoder).join(',') : encoder(`${value}`);\n\n return `${nextKey}=${nextValue}`;\n })\n .join('&');\n\n return `${addPrefix ? '?' : ''}${output}`;\n}\n\n/**\n * Parse a query string\n */\nexport function queryStringParse(input: string): PlainObject {\n let search = input;\n\n if (input.slice(0, 1) === '?') {\n search = input.slice(1);\n }\n\n return search.split('&').reduce>((acc, d) => {\n const [key, value] = d.split('=');\n\n acc[decodeURIComponent(key)] = decodeURIComponent(value);\n\n return acc;\n }, {});\n}\n\n/**\n * Sort object keys\n */\nexport function sortObjectKeys(input: T) {\n return objectKeys(input)\n .sort()\n .reduce((acc, key) => {\n acc[key] = input[key];\n\n return acc;\n }, {} as T);\n}\n","export default typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';\n","import isBrowser from './isBrowser';\n\nconst timeoutDuration = (function(){\n const longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];\n for (let i = 0; i < longerTimeoutBrowsers.length; i += 1) {\n if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {\n return 1;\n }\n }\n return 0;\n}());\n\nexport function microtaskDebounce(fn) {\n let called = false\n return () => {\n if (called) {\n return\n }\n called = true\n window.Promise.resolve().then(() => {\n called = false\n fn()\n })\n }\n}\n\nexport function taskDebounce(fn) {\n let scheduled = false;\n return () => {\n if (!scheduled) {\n scheduled = true;\n setTimeout(() => {\n scheduled = false;\n fn();\n }, timeoutDuration);\n }\n };\n}\n\nconst supportsMicroTasks = isBrowser && window.Promise\n\n\n/**\n* Create a debounced version of a method, that's asynchronously deferred\n* but called in the minimum time possible.\n*\n* @method\n* @memberof Popper.Utils\n* @argument {Function} fn\n* @returns {Function}\n*/\nexport default (supportsMicroTasks\n ? microtaskDebounce\n : taskDebounce);\n","/**\n * Check if the given variable is a function\n * @method\n * @memberof Popper.Utils\n * @argument {Any} functionToCheck - variable to check\n * @returns {Boolean} answer to: is a function?\n */\nexport default function isFunction(functionToCheck) {\n const getType = {};\n return (\n functionToCheck &&\n getType.toString.call(functionToCheck) === '[object Function]'\n );\n}\n","/**\n * Get CSS computed property of the given element\n * @method\n * @memberof Popper.Utils\n * @argument {Eement} element\n * @argument {String} property\n */\nexport default function getStyleComputedProperty(element, property) {\n if (element.nodeType !== 1) {\n return [];\n }\n // NOTE: 1 DOM access here\n const window = element.ownerDocument.defaultView;\n const css = window.getComputedStyle(element, null);\n return property ? css[property] : css;\n}\n","/**\n * Returns the parentNode or the host of the element\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Element} parent\n */\nexport default function getParentNode(element) {\n if (element.nodeName === 'HTML') {\n return element;\n }\n return element.parentNode || element.host;\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport getParentNode from './getParentNode';\n\n/**\n * Returns the scrolling parent of the given element\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Element} scroll parent\n */\nexport default function getScrollParent(element) {\n // Return body, `getScroll` will take care to get the correct `scrollTop` from it\n if (!element) {\n return document.body\n }\n\n switch (element.nodeName) {\n case 'HTML':\n case 'BODY':\n return element.ownerDocument.body\n case '#document':\n return element.body\n }\n\n // Firefox want us to check `-x` and `-y` variations as well\n const { overflow, overflowX, overflowY } = getStyleComputedProperty(element);\n if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {\n return element;\n }\n\n return getScrollParent(getParentNode(element));\n}\n","/**\n * Returns the reference node of the reference object, or the reference object itself.\n * @method\n * @memberof Popper.Utils\n * @param {Element|Object} reference - the reference element (the popper will be relative to this)\n * @returns {Element} parent\n */\nexport default function getReferenceNode(reference) {\n return reference && reference.referenceNode ? reference.referenceNode : reference;\n}\n","import isBrowser from './isBrowser';\n\nconst isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);\nconst isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);\n\n/**\n * Determines if the browser is Internet Explorer\n * @method\n * @memberof Popper.Utils\n * @param {Number} version to check\n * @returns {Boolean} isIE\n */\nexport default function isIE(version) {\n if (version === 11) {\n return isIE11;\n }\n if (version === 10) {\n return isIE10;\n }\n return isIE11 || isIE10;\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport isIE from './isIE';\n/**\n * Returns the offset parent of the given element\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Element} offset parent\n */\nexport default function getOffsetParent(element) {\n if (!element) {\n return document.documentElement;\n }\n\n const noOffsetParent = isIE(10) ? document.body : null;\n\n // NOTE: 1 DOM access here\n let offsetParent = element.offsetParent || null;\n // Skip hidden elements which don't have an offsetParent\n while (offsetParent === noOffsetParent && element.nextElementSibling) {\n offsetParent = (element = element.nextElementSibling).offsetParent;\n }\n\n const nodeName = offsetParent && offsetParent.nodeName;\n\n if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {\n return element ? element.ownerDocument.documentElement : document.documentElement;\n }\n\n // .offsetParent will return the closest TH, TD or TABLE in case\n // no offsetParent is present, I hate this job...\n if (\n ['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 &&\n getStyleComputedProperty(offsetParent, 'position') === 'static'\n ) {\n return getOffsetParent(offsetParent);\n }\n\n return offsetParent;\n}\n","/**\n * Finds the root node (document, shadowDOM root) of the given element\n * @method\n * @memberof Popper.Utils\n * @argument {Element} node\n * @returns {Element} root node\n */\nexport default function getRoot(node) {\n if (node.parentNode !== null) {\n return getRoot(node.parentNode);\n }\n\n return node;\n}\n","import isOffsetContainer from './isOffsetContainer';\nimport getRoot from './getRoot';\nimport getOffsetParent from './getOffsetParent';\n\n/**\n * Finds the offset parent common to the two provided nodes\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element1\n * @argument {Element} element2\n * @returns {Element} common offset parent\n */\nexport default function findCommonOffsetParent(element1, element2) {\n // This check is needed to avoid errors in case one of the elements isn't defined for any reason\n if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {\n return document.documentElement;\n }\n\n // Here we make sure to give as \"start\" the element that comes first in the DOM\n const order =\n element1.compareDocumentPosition(element2) &\n Node.DOCUMENT_POSITION_FOLLOWING;\n const start = order ? element1 : element2;\n const end = order ? element2 : element1;\n\n // Get common ancestor container\n const range = document.createRange();\n range.setStart(start, 0);\n range.setEnd(end, 0);\n const { commonAncestorContainer } = range;\n\n // Both nodes are inside #document\n if (\n (element1 !== commonAncestorContainer &&\n element2 !== commonAncestorContainer) ||\n start.contains(end)\n ) {\n if (isOffsetContainer(commonAncestorContainer)) {\n return commonAncestorContainer;\n }\n\n return getOffsetParent(commonAncestorContainer);\n }\n\n // one of the nodes is inside shadowDOM, find which one\n const element1root = getRoot(element1);\n if (element1root.host) {\n return findCommonOffsetParent(element1root.host, element2);\n } else {\n return findCommonOffsetParent(element1, getRoot(element2).host);\n }\n}\n","import getOffsetParent from './getOffsetParent';\n\nexport default function isOffsetContainer(element) {\n const { nodeName } = element;\n if (nodeName === 'BODY') {\n return false;\n }\n return (\n nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element\n );\n}\n","/**\n * Gets the scroll value of the given element in the given side (top and left)\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @argument {String} side `top` or `left`\n * @returns {number} amount of scrolled pixels\n */\nexport default function getScroll(element, side = 'top') {\n const upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';\n const nodeName = element.nodeName;\n\n if (nodeName === 'BODY' || nodeName === 'HTML') {\n const html = element.ownerDocument.documentElement;\n const scrollingElement = element.ownerDocument.scrollingElement || html;\n return scrollingElement[upperSide];\n }\n\n return element[upperSide];\n}\n","/*\n * Helper to detect borders of a given element\n * @method\n * @memberof Popper.Utils\n * @param {CSSStyleDeclaration} styles\n * Result of `getStyleComputedProperty` on the given element\n * @param {String} axis - `x` or `y`\n * @return {number} borders - The borders size of the given axis\n */\n\nexport default function getBordersSize(styles, axis) {\n const sideA = axis === 'x' ? 'Left' : 'Top';\n const sideB = sideA === 'Left' ? 'Right' : 'Bottom';\n\n return (\n parseFloat(styles[`border${sideA}Width`]) +\n parseFloat(styles[`border${sideB}Width`])\n );\n}\n","import isIE from './isIE';\n\nfunction getSize(axis, body, html, computedStyle) {\n return Math.max(\n body[`offset${axis}`],\n body[`scroll${axis}`],\n html[`client${axis}`],\n html[`offset${axis}`],\n html[`scroll${axis}`],\n isIE(10)\n ? (parseInt(html[`offset${axis}`]) + \n parseInt(computedStyle[`margin${axis === 'Height' ? 'Top' : 'Left'}`]) + \n parseInt(computedStyle[`margin${axis === 'Height' ? 'Bottom' : 'Right'}`]))\n : 0 \n );\n}\n\nexport default function getWindowSizes(document) {\n const body = document.body;\n const html = document.documentElement;\n const computedStyle = isIE(10) && getComputedStyle(html);\n\n return {\n height: getSize('Height', body, html, computedStyle),\n width: getSize('Width', body, html, computedStyle),\n };\n}\n","/**\n * Given element offsets, generate an output similar to getBoundingClientRect\n * @method\n * @memberof Popper.Utils\n * @argument {Object} offsets\n * @returns {Object} ClientRect like output\n */\nexport default function getClientRect(offsets) {\n return {\n ...offsets,\n right: offsets.left + offsets.width,\n bottom: offsets.top + offsets.height,\n };\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport getBordersSize from './getBordersSize';\nimport getWindowSizes from './getWindowSizes';\nimport getScroll from './getScroll';\nimport getClientRect from './getClientRect';\nimport isIE from './isIE';\n\n/**\n * Get bounding client rect of given element\n * @method\n * @memberof Popper.Utils\n * @param {HTMLElement} element\n * @return {Object} client rect\n */\nexport default function getBoundingClientRect(element) {\n let rect = {};\n\n // IE10 10 FIX: Please, don't ask, the element isn't\n // considered in DOM in some circumstances...\n // This isn't reproducible in IE10 compatibility mode of IE11\n try {\n if (isIE(10)) {\n rect = element.getBoundingClientRect();\n const scrollTop = getScroll(element, 'top');\n const scrollLeft = getScroll(element, 'left');\n rect.top += scrollTop;\n rect.left += scrollLeft;\n rect.bottom += scrollTop;\n rect.right += scrollLeft;\n }\n else {\n rect = element.getBoundingClientRect();\n }\n }\n catch(e){}\n\n const result = {\n left: rect.left,\n top: rect.top,\n width: rect.right - rect.left,\n height: rect.bottom - rect.top,\n };\n\n // subtract scrollbar size from sizes\n const sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};\n const width =\n sizes.width || element.clientWidth || result.width;\n const height =\n sizes.height || element.clientHeight || result.height;\n\n let horizScrollbar = element.offsetWidth - width;\n let vertScrollbar = element.offsetHeight - height;\n\n // if an hypothetical scrollbar is detected, we must be sure it's not a `border`\n // we make this check conditional for performance reasons\n if (horizScrollbar || vertScrollbar) {\n const styles = getStyleComputedProperty(element);\n horizScrollbar -= getBordersSize(styles, 'x');\n vertScrollbar -= getBordersSize(styles, 'y');\n\n result.width -= horizScrollbar;\n result.height -= vertScrollbar;\n }\n\n return getClientRect(result);\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport includeScroll from './includeScroll';\nimport getScrollParent from './getScrollParent';\nimport getBoundingClientRect from './getBoundingClientRect';\nimport runIsIE from './isIE';\nimport getClientRect from './getClientRect';\n\nexport default function getOffsetRectRelativeToArbitraryNode(children, parent, fixedPosition = false) {\n const isIE10 = runIsIE(10);\n const isHTML = parent.nodeName === 'HTML';\n const childrenRect = getBoundingClientRect(children);\n const parentRect = getBoundingClientRect(parent);\n const scrollParent = getScrollParent(children);\n\n const styles = getStyleComputedProperty(parent);\n const borderTopWidth = parseFloat(styles.borderTopWidth);\n const borderLeftWidth = parseFloat(styles.borderLeftWidth);\n\n // In cases where the parent is fixed, we must ignore negative scroll in offset calc\n if(fixedPosition && isHTML) {\n parentRect.top = Math.max(parentRect.top, 0);\n parentRect.left = Math.max(parentRect.left, 0);\n }\n let offsets = getClientRect({\n top: childrenRect.top - parentRect.top - borderTopWidth,\n left: childrenRect.left - parentRect.left - borderLeftWidth,\n width: childrenRect.width,\n height: childrenRect.height,\n });\n offsets.marginTop = 0;\n offsets.marginLeft = 0;\n\n // Subtract margins of documentElement in case it's being used as parent\n // we do this only on HTML because it's the only element that behaves\n // differently when margins are applied to it. The margins are included in\n // the box of the documentElement, in the other cases not.\n if (!isIE10 && isHTML) {\n const marginTop = parseFloat(styles.marginTop);\n const marginLeft = parseFloat(styles.marginLeft);\n\n offsets.top -= borderTopWidth - marginTop;\n offsets.bottom -= borderTopWidth - marginTop;\n offsets.left -= borderLeftWidth - marginLeft;\n offsets.right -= borderLeftWidth - marginLeft;\n\n // Attach marginTop and marginLeft because in some circumstances we may need them\n offsets.marginTop = marginTop;\n offsets.marginLeft = marginLeft;\n }\n\n if (\n isIE10 && !fixedPosition\n ? parent.contains(scrollParent)\n : parent === scrollParent && scrollParent.nodeName !== 'BODY'\n ) {\n offsets = includeScroll(offsets, parent);\n }\n\n return offsets;\n}\n","import getScroll from './getScroll';\n\n/*\n * Sum or subtract the element scroll values (left and top) from a given rect object\n * @method\n * @memberof Popper.Utils\n * @param {Object} rect - Rect object you want to change\n * @param {HTMLElement} element - The element from the function reads the scroll values\n * @param {Boolean} subtract - set to true if you want to subtract the scroll values\n * @return {Object} rect - The modifier rect object\n */\nexport default function includeScroll(rect, element, subtract = false) {\n const scrollTop = getScroll(element, 'top');\n const scrollLeft = getScroll(element, 'left');\n const modifier = subtract ? -1 : 1;\n rect.top += scrollTop * modifier;\n rect.bottom += scrollTop * modifier;\n rect.left += scrollLeft * modifier;\n rect.right += scrollLeft * modifier;\n return rect;\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport getParentNode from './getParentNode';\n\n/**\n * Check if the given element is fixed or is inside a fixed parent\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @argument {Element} customContainer\n * @returns {Boolean} answer to \"isFixed?\"\n */\nexport default function isFixed(element) {\n const nodeName = element.nodeName;\n if (nodeName === 'BODY' || nodeName === 'HTML') {\n return false;\n }\n if (getStyleComputedProperty(element, 'position') === 'fixed') {\n return true;\n }\n const parentNode = getParentNode(element);\n if (!parentNode) {\n return false;\n }\n return isFixed(parentNode);\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport isIE from './isIE';\n/**\n * Finds the first parent of an element that has a transformed property defined\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Element} first transformed parent or documentElement\n */\n\nexport default function getFixedPositionOffsetParent(element) {\n // This check is needed to avoid errors in case one of the elements isn't defined for any reason\n if (!element || !element.parentElement || isIE()) {\n return document.documentElement;\n }\n let el = element.parentElement;\n while (el && getStyleComputedProperty(el, 'transform') === 'none') {\n el = el.parentElement;\n }\n return el || document.documentElement;\n\n}\n","import getScrollParent from './getScrollParent';\nimport getParentNode from './getParentNode';\nimport getReferenceNode from './getReferenceNode';\nimport findCommonOffsetParent from './findCommonOffsetParent';\nimport getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';\nimport getViewportOffsetRectRelativeToArtbitraryNode from './getViewportOffsetRectRelativeToArtbitraryNode';\nimport getWindowSizes from './getWindowSizes';\nimport isFixed from './isFixed';\nimport getFixedPositionOffsetParent from './getFixedPositionOffsetParent';\n\n/**\n * Computed the boundaries limits and return them\n * @method\n * @memberof Popper.Utils\n * @param {HTMLElement} popper\n * @param {HTMLElement} reference\n * @param {number} padding\n * @param {HTMLElement} boundariesElement - Element used to define the boundaries\n * @param {Boolean} fixedPosition - Is in fixed position mode\n * @returns {Object} Coordinates of the boundaries\n */\nexport default function getBoundaries(\n popper,\n reference,\n padding,\n boundariesElement,\n fixedPosition = false\n) {\n // NOTE: 1 DOM access here\n\n let boundaries = { top: 0, left: 0 };\n const offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));\n\n // Handle viewport case\n if (boundariesElement === 'viewport' ) {\n boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);\n }\n\n else {\n // Handle other cases based on DOM element used as boundaries\n let boundariesNode;\n if (boundariesElement === 'scrollParent') {\n boundariesNode = getScrollParent(getParentNode(reference));\n if (boundariesNode.nodeName === 'BODY') {\n boundariesNode = popper.ownerDocument.documentElement;\n }\n } else if (boundariesElement === 'window') {\n boundariesNode = popper.ownerDocument.documentElement;\n } else {\n boundariesNode = boundariesElement;\n }\n\n const offsets = getOffsetRectRelativeToArbitraryNode(\n boundariesNode,\n offsetParent,\n fixedPosition\n );\n\n // In case of HTML, we need a different computation\n if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {\n const { height, width } = getWindowSizes(popper.ownerDocument);\n boundaries.top += offsets.top - offsets.marginTop;\n boundaries.bottom = height + offsets.top;\n boundaries.left += offsets.left - offsets.marginLeft;\n boundaries.right = width + offsets.left;\n } else {\n // for all the other DOM elements, this one is good\n boundaries = offsets;\n }\n }\n\n // Add paddings\n padding = padding || 0;\n const isPaddingNumber = typeof padding === 'number';\n boundaries.left += isPaddingNumber ? padding : padding.left || 0; \n boundaries.top += isPaddingNumber ? padding : padding.top || 0; \n boundaries.right -= isPaddingNumber ? padding : padding.right || 0; \n boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0; \n\n return boundaries;\n}\n","import getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';\nimport getScroll from './getScroll';\nimport getClientRect from './getClientRect';\n\nexport default function getViewportOffsetRectRelativeToArtbitraryNode(element, excludeScroll = false) {\n const html = element.ownerDocument.documentElement;\n const relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);\n const width = Math.max(html.clientWidth, window.innerWidth || 0);\n const height = Math.max(html.clientHeight, window.innerHeight || 0);\n\n const scrollTop = !excludeScroll ? getScroll(html) : 0;\n const scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;\n\n const offset = {\n top: scrollTop - relativeOffset.top + relativeOffset.marginTop,\n left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,\n width,\n height,\n };\n\n return getClientRect(offset);\n}\n","import getBoundaries from '../utils/getBoundaries';\n\nfunction getArea({ width, height }) {\n return width * height;\n}\n\n/**\n * Utility used to transform the `auto` placement to the placement with more\n * available space.\n * @method\n * @memberof Popper.Utils\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function computeAutoPlacement(\n placement,\n refRect,\n popper,\n reference,\n boundariesElement,\n padding = 0\n) {\n if (placement.indexOf('auto') === -1) {\n return placement;\n }\n\n const boundaries = getBoundaries(\n popper,\n reference,\n padding,\n boundariesElement\n );\n\n const rects = {\n top: {\n width: boundaries.width,\n height: refRect.top - boundaries.top,\n },\n right: {\n width: boundaries.right - refRect.right,\n height: boundaries.height,\n },\n bottom: {\n width: boundaries.width,\n height: boundaries.bottom - refRect.bottom,\n },\n left: {\n width: refRect.left - boundaries.left,\n height: boundaries.height,\n },\n };\n\n const sortedAreas = Object.keys(rects)\n .map(key => ({\n key,\n ...rects[key],\n area: getArea(rects[key]),\n }))\n .sort((a, b) => b.area - a.area);\n\n const filteredAreas = sortedAreas.filter(\n ({ width, height }) =>\n width >= popper.clientWidth && height >= popper.clientHeight\n );\n\n const computedPlacement = filteredAreas.length > 0\n ? filteredAreas[0].key\n : sortedAreas[0].key;\n\n const variation = placement.split('-')[1];\n\n return computedPlacement + (variation ? `-${variation}` : '');\n}\n","import findCommonOffsetParent from './findCommonOffsetParent';\nimport getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';\nimport getFixedPositionOffsetParent from './getFixedPositionOffsetParent';\nimport getReferenceNode from './getReferenceNode';\n\n/**\n * Get offsets to the reference element\n * @method\n * @memberof Popper.Utils\n * @param {Object} state\n * @param {Element} popper - the popper element\n * @param {Element} reference - the reference element (the popper will be relative to this)\n * @param {Element} fixedPosition - is in fixed position mode\n * @returns {Object} An object containing the offsets which will be applied to the popper\n */\nexport default function getReferenceOffsets(state, popper, reference, fixedPosition = null) {\n const commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));\n return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);\n}\n","/**\n * Get the outer sizes of the given element (offset size + margins)\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Object} object containing width and height properties\n */\nexport default function getOuterSizes(element) {\n const window = element.ownerDocument.defaultView;\n const styles = window.getComputedStyle(element);\n const x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);\n const y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);\n const result = {\n width: element.offsetWidth + y,\n height: element.offsetHeight + x,\n };\n return result;\n}\n","/**\n * Get the opposite placement of the given one\n * @method\n * @memberof Popper.Utils\n * @argument {String} placement\n * @returns {String} flipped placement\n */\nexport default function getOppositePlacement(placement) {\n const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };\n return placement.replace(/left|right|bottom|top/g, matched => hash[matched]);\n}\n","import getOuterSizes from './getOuterSizes';\nimport getOppositePlacement from './getOppositePlacement';\n\n/**\n * Get offsets to the popper\n * @method\n * @memberof Popper.Utils\n * @param {Object} position - CSS position the Popper will get applied\n * @param {HTMLElement} popper - the popper element\n * @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)\n * @param {String} placement - one of the valid placement options\n * @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper\n */\nexport default function getPopperOffsets(popper, referenceOffsets, placement) {\n placement = placement.split('-')[0];\n\n // Get popper node sizes\n const popperRect = getOuterSizes(popper);\n\n // Add position, width and height to our offsets object\n const popperOffsets = {\n width: popperRect.width,\n height: popperRect.height,\n };\n\n // depending by the popper placement we have to compute its offsets slightly differently\n const isHoriz = ['right', 'left'].indexOf(placement) !== -1;\n const mainSide = isHoriz ? 'top' : 'left';\n const secondarySide = isHoriz ? 'left' : 'top';\n const measurement = isHoriz ? 'height' : 'width';\n const secondaryMeasurement = !isHoriz ? 'height' : 'width';\n\n popperOffsets[mainSide] =\n referenceOffsets[mainSide] +\n referenceOffsets[measurement] / 2 -\n popperRect[measurement] / 2;\n if (placement === secondarySide) {\n popperOffsets[secondarySide] =\n referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];\n } else {\n popperOffsets[secondarySide] =\n referenceOffsets[getOppositePlacement(secondarySide)];\n }\n\n return popperOffsets;\n}\n","/**\n * Mimics the `find` method of Array\n * @method\n * @memberof Popper.Utils\n * @argument {Array} arr\n * @argument prop\n * @argument value\n * @returns index or -1\n */\nexport default function find(arr, check) {\n // use native find if supported\n if (Array.prototype.find) {\n return arr.find(check);\n }\n\n // use `filter` to obtain the same behavior of `find`\n return arr.filter(check)[0];\n}\n","import isFunction from './isFunction';\nimport findIndex from './findIndex';\nimport getClientRect from '../utils/getClientRect';\n\n/**\n * Loop trough the list of modifiers and run them in order,\n * each of them will then edit the data object.\n * @method\n * @memberof Popper.Utils\n * @param {dataObject} data\n * @param {Array} modifiers\n * @param {String} ends - Optional modifier name used as stopper\n * @returns {dataObject}\n */\nexport default function runModifiers(modifiers, data, ends) {\n const modifiersToRun = ends === undefined\n ? modifiers\n : modifiers.slice(0, findIndex(modifiers, 'name', ends));\n\n modifiersToRun.forEach(modifier => {\n if (modifier['function']) { // eslint-disable-line dot-notation\n console.warn('`modifier.function` is deprecated, use `modifier.fn`!');\n }\n const fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation\n if (modifier.enabled && isFunction(fn)) {\n // Add properties to offsets to make them a complete clientRect object\n // we do this before each modifier to make sure the previous one doesn't\n // mess with these values\n data.offsets.popper = getClientRect(data.offsets.popper);\n data.offsets.reference = getClientRect(data.offsets.reference);\n\n data = fn(data, modifier);\n }\n });\n\n return data;\n}\n","import find from './find';\n\n/**\n * Return the index of the matching object\n * @method\n * @memberof Popper.Utils\n * @argument {Array} arr\n * @argument prop\n * @argument value\n * @returns index or -1\n */\nexport default function findIndex(arr, prop, value) {\n // use native findIndex if supported\n if (Array.prototype.findIndex) {\n return arr.findIndex(cur => cur[prop] === value);\n }\n\n // use `find` + `indexOf` if `findIndex` isn't supported\n const match = find(arr, obj => obj[prop] === value);\n return arr.indexOf(match);\n}\n","import computeAutoPlacement from '../utils/computeAutoPlacement';\nimport getReferenceOffsets from '../utils/getReferenceOffsets';\nimport getPopperOffsets from '../utils/getPopperOffsets';\nimport runModifiers from '../utils/runModifiers';\n\n/**\n * Updates the position of the popper, computing the new offsets and applying\n * the new style. = [\n 'innerHTML',\n 'ownerDocument',\n 'style',\n 'attributes',\n 'nodeValue',\n];\n\nconst objectTypes = [\n 'Array',\n 'ArrayBuffer',\n 'AsyncFunction',\n 'AsyncGenerator',\n 'AsyncGeneratorFunction',\n 'Date',\n 'Error',\n 'Function',\n 'Generator',\n 'GeneratorFunction',\n 'HTMLElement',\n 'Map',\n 'Object',\n 'Promise',\n 'RegExp',\n 'Set',\n 'WeakMap',\n 'WeakSet',\n] as const;\n\nconst primitiveTypes = [\n 'bigint',\n 'boolean',\n 'null',\n 'number',\n 'string',\n 'symbol',\n 'undefined',\n] as const;\n\nexport type ObjectTypes = typeof objectTypes[number];\n\nexport type PrimitiveTypes = typeof primitiveTypes[number];\n\nexport type TypeName = ObjectTypes | PrimitiveTypes;\n\nexport function getObjectType(value: unknown): ObjectTypes | undefined {\n const objectTypeName = Object.prototype.toString.call(value).slice(8, -1);\n\n if (/HTML\\w+Element/.test(objectTypeName)) {\n return 'HTMLElement';\n }\n\n if (isObjectType(objectTypeName)) {\n return objectTypeName;\n }\n\n return undefined;\n}\n\nfunction isObjectOfType(type: string) {\n return (value: unknown): value is T => getObjectType(value) === type;\n}\n\nfunction isObjectType(name: unknown): name is ObjectTypes {\n return objectTypes.includes(name as ObjectTypes);\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nfunction isOfType(type: string) {\n return (value: unknown): value is T => typeof value === type;\n}\n\nfunction isPrimitiveType(name: unknown): name is PrimitiveTypes {\n return primitiveTypes.includes(name as PrimitiveTypes);\n}\n\nfunction is(value: unknown): TypeName {\n if (value === null) {\n return 'null';\n }\n\n switch (typeof value) {\n case 'bigint':\n return 'bigint';\n case 'boolean':\n return 'boolean';\n case 'number':\n return 'number';\n case 'string':\n return 'string';\n case 'symbol':\n return 'symbol';\n case 'undefined':\n return 'undefined';\n default:\n }\n\n if (is.array(value)) {\n return 'Array';\n }\n\n if (is.plainFunction(value)) {\n return 'Function';\n }\n\n const tagType = getObjectType(value);\n\n /* istanbul ignore else */\n if (tagType) {\n return tagType;\n }\n\n /* istanbul ignore next */\n return 'Object';\n}\n\nis.array = Array.isArray;\n\nis.arrayOf = (target: unknown[], predicate: (v: unknown) => boolean): boolean => {\n if (!is.array(target) && !is.function(predicate)) {\n return false;\n }\n\n return target.every(d => predicate(d));\n};\n\nis.asyncGeneratorFunction = (value: unknown): value is (...arguments_: any[]) => Promise =>\n getObjectType(value) === 'AsyncGeneratorFunction';\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nis.asyncFunction = isObjectOfType('AsyncFunction');\n\nis.bigint = isOfType('bigint');\n\nis.boolean = (value: unknown): value is boolean => {\n return value === true || value === false;\n};\n\nis.date = isObjectOfType('Date');\n\nis.defined = (value: unknown): boolean => !is.undefined(value);\n\nis.domElement = (value: unknown): value is HTMLElement => {\n return (\n is.object(value) &&\n !is.plainObject(value) &&\n (value as HTMLElement).nodeType === 1 &&\n is.string((value as HTMLElement).nodeName) &&\n DOM_PROPERTIES_TO_CHECK.every(property => property in (value as HTMLElement))\n );\n};\n\nis.empty = (value: unknown): boolean => {\n return (\n (is.string(value) && value.length === 0) ||\n (is.array(value) && value.length === 0) ||\n (is.object(value) && !is.map(value) && !is.set(value) && Object.keys(value).length === 0) ||\n (is.set(value) && value.size === 0) ||\n (is.map(value) && value.size === 0)\n );\n};\n\nis.error = isObjectOfType('Error');\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nis.function = isOfType('function');\n\nis.generator = (value: unknown): value is Generator => {\n return (\n is.iterable(value) &&\n is.function((value as IterableIterator).next) &&\n is.function((value as IterableIterator).throw)\n );\n};\n\nis.generatorFunction = isObjectOfType('GeneratorFunction');\n\nis.instanceOf = (instance: unknown, class_: Class): instance is T => {\n if (!instance || !(class_ as Class)) {\n return false;\n }\n\n return Object.getPrototypeOf(instance) === class_.prototype;\n};\n\nis.iterable = (value: unknown): value is IterableIterator => {\n return (\n !is.nullOrUndefined(value) && is.function((value as IterableIterator)[Symbol.iterator])\n );\n};\n\nis.map = isObjectOfType>('Map');\n\nis.nan = (value: unknown): boolean => {\n return Number.isNaN(value as number);\n};\n\nis.null = (value: unknown): value is null => {\n return value === null;\n};\n\nis.nullOrUndefined = (value: unknown): value is null | undefined => {\n return is.null(value) || is.undefined(value);\n};\n\nis.number = (value: unknown): value is number => {\n return isOfType('number')(value) && !is.nan(value);\n};\n\nis.numericString = (value: unknown): value is string => {\n return is.string(value) && (value as string).length > 0 && !Number.isNaN(Number(value));\n};\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nis.object = (value: unknown): value is object => {\n return !is.nullOrUndefined(value) && (is.function(value) || typeof value === 'object');\n};\n\nis.oneOf = (target: unknown[], value: any): boolean => {\n if (!is.array(target)) {\n return false;\n }\n\n // eslint-disable-next-line unicorn/prefer-includes\n return target.indexOf(value) > -1;\n};\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nis.plainFunction = isObjectOfType('Function');\n\nis.plainObject = (value: unknown): value is PlainObject => {\n if (getObjectType(value) !== 'Object') {\n return false;\n }\n\n const prototype = Object.getPrototypeOf(value);\n\n return prototype === null || prototype === Object.getPrototypeOf({});\n};\n\nis.primitive = (value: unknown): value is Primitive =>\n is.null(value) || isPrimitiveType(typeof value);\n\nis.promise = isObjectOfType>('Promise');\n\nis.propertyOf = (\n target: PlainObject,\n key: string,\n predicate?: (v: unknown) => boolean,\n): boolean => {\n if (!is.object(target) || !key) {\n return false;\n }\n\n const value = target[key];\n\n if (is.function(predicate)) {\n return predicate(value);\n }\n\n return is.defined(value);\n};\n\nis.regexp = isObjectOfType('RegExp');\n\nis.set = isObjectOfType>('Set');\n\nis.string = isOfType('string');\n\nis.symbol = isOfType('symbol');\n\nis.undefined = isOfType('undefined');\n\nis.weakMap = isObjectOfType>('WeakMap');\n\nis.weakSet = isObjectOfType>('WeakSet');\n\nexport * from './types';\n\nexport default is;\n","import { AnyObject, Primitive } from './types';\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nfunction isOfType(type: string) {\n return (value: unknown): value is T => typeof value === type;\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const isFunction = isOfType('function');\n\nexport const isNull = (value: unknown): value is null => {\n return value === null;\n};\n\nexport const isRegex = (value: unknown): value is RegExp => {\n return Object.prototype.toString.call(value).slice(8, -1) === 'RegExp';\n};\n\nexport const isObject = (value: unknown): value is AnyObject => {\n return !isUndefined(value) && !isNull(value) && (isFunction(value) || typeof value === 'object');\n};\n\nexport const isUndefined = isOfType('undefined');\n","import { isObject, isRegex } from './helpers';\n\nfunction equalArray(left: unknown[], right: unknown[]) {\n const { length } = left;\n\n if (length !== right.length) {\n return false;\n }\n\n for (let index = length; index-- !== 0; ) {\n if (!equal(left[index], right[index])) {\n return false;\n }\n }\n\n return true;\n}\n\nfunction equalArrayBuffer(left: ArrayBufferView, right: ArrayBufferView) {\n if (left.byteLength !== right.byteLength) {\n return false;\n }\n\n const view1 = new DataView(left.buffer);\n const view2 = new DataView(right.buffer);\n\n let index = left.byteLength;\n\n while (index--) {\n if (view1.getUint8(index) !== view2.getUint8(index)) {\n return false;\n }\n }\n\n return true;\n}\n\nfunction equalMap(left: Map, right: Map) {\n if (left.size !== right.size) {\n return false;\n }\n\n for (const index of left.entries()) {\n if (!right.has(index[0])) {\n return false;\n }\n }\n\n for (const index of left.entries()) {\n if (!equal(index[1], right.get(index[0]))) {\n return false;\n }\n }\n\n return true;\n}\n\nfunction equalSet(left: Set, right: Set) {\n if (left.size !== right.size) {\n return false;\n }\n\n for (const index of left.entries()) {\n if (!right.has(index[0])) {\n return false;\n }\n }\n\n return true;\n}\n\nexport default function equal(left: unknown, right: unknown) {\n if (left === right) {\n return true;\n }\n\n if (left && isObject(left) && right && isObject(right)) {\n if (left.constructor !== right.constructor) {\n return false;\n }\n\n if (Array.isArray(left) && Array.isArray(right)) {\n return equalArray(left, right);\n }\n\n if (left instanceof Map && right instanceof Map) {\n return equalMap(left, right);\n }\n\n if (left instanceof Set && right instanceof Set) {\n return equalSet(left, right);\n }\n\n if (ArrayBuffer.isView(left) && ArrayBuffer.isView(right)) {\n return equalArrayBuffer(left, right);\n }\n\n if (isRegex(left) && isRegex(right)) {\n return left.source === right.source && left.flags === right.flags;\n }\n\n if (left.valueOf !== Object.prototype.valueOf) {\n return left.valueOf() === right.valueOf();\n }\n\n if (left.toString !== Object.prototype.toString) {\n return left.toString() === right.toString();\n }\n\n const leftKeys = Object.keys(left);\n const rightKeys = Object.keys(right);\n\n if (leftKeys.length !== rightKeys.length) {\n return false;\n }\n\n for (let index = leftKeys.length; index-- !== 0; ) {\n if (!Object.prototype.hasOwnProperty.call(right, leftKeys[index])) {\n return false;\n }\n }\n\n for (let index = leftKeys.length; index-- !== 0; ) {\n const key = leftKeys[index];\n\n if (key === '_owner' && left.$$typeof) {\n // React-specific: avoid traversing React elements' _owner.\n // _owner contains circular references\n // and is not needed when comparing the actual elements (and not their owners)\n // eslint-disable-next-line no-continue\n continue;\n }\n\n if (!equal(left[key], right[key])) {\n return false;\n }\n }\n\n return true;\n }\n\n if (Number.isNaN(left) && Number.isNaN(right)) {\n return true;\n }\n\n return left === right;\n}\n","import equal from '@gilbarbara/deep-equal';\nimport is from 'is-lite';\n\nimport { CompareValuesOptions, Data, Key, Options, ValidTypes, Value } from './types';\n\nexport function canHaveLength(...arguments_: any): boolean {\n return arguments_.every((d: unknown) => is.string(d) || is.array(d) || is.plainObject(d));\n}\n\nexport function checkEquality(left: Data, right: Data, value: Value) {\n if (!isSameType(left, right)) {\n return false;\n }\n\n if ([left, right].every(is.array)) {\n return !left.some(hasValue(value)) && right.some(hasValue(value));\n }\n\n /* istanbul ignore else */\n if ([left, right].every(is.plainObject)) {\n return (\n !Object.entries(left).some(hasEntry(value)) && Object.entries(right).some(hasEntry(value))\n );\n }\n\n return right === value;\n}\n\nexport function compareNumbers(\n previousData: Data,\n data: Data,\n options: Options,\n): boolean {\n const { actual, key, previous, type } = options;\n const left = nested(previousData, key);\n const right = nested(data, key);\n\n let changed =\n [left, right].every(is.number) && (type === 'increased' ? left < right : left > right);\n\n if (!is.undefined(actual)) {\n changed = changed && right === actual;\n }\n\n if (!is.undefined(previous)) {\n changed = changed && left === previous;\n }\n\n return changed;\n}\n\nexport function compareValues(\n previousData: Data,\n data: Data,\n options: CompareValuesOptions,\n) {\n const { key, type, value } = options;\n\n const left = nested(previousData, key);\n const right = nested(data, key);\n const primary = type === 'added' ? left : right;\n const secondary = type === 'added' ? right : left;\n\n // console.log({ primary, secondary });\n\n if (!is.nullOrUndefined(value)) {\n if (is.defined(primary)) {\n // check if nested data matches\n if (is.array(primary) || is.plainObject(primary)) {\n return checkEquality(primary, secondary, value);\n }\n } else {\n return equal(secondary, value);\n }\n\n return false;\n }\n\n if ([left, right].every(is.array)) {\n return !secondary.every(isEqualPredicate(primary));\n }\n\n if ([left, right].every(is.plainObject)) {\n return hasExtraKeys(Object.keys(primary), Object.keys(secondary));\n }\n\n return (\n ![left, right].every(d => is.primitive(d) && is.defined(d)) &&\n (type === 'added'\n ? !is.defined(left) && is.defined(right)\n : is.defined(left) && !is.defined(right))\n );\n}\n\nexport function getIterables(previousData: Data, data: Data, { key }: Options = {}) {\n let left = nested(previousData, key);\n let right = nested(data, key);\n\n if (!isSameType(left, right)) {\n throw new TypeError('Inputs have different types');\n }\n\n if (!canHaveLength(left, right)) {\n throw new TypeError(\"Inputs don't have length\");\n }\n\n if ([left, right].every(is.plainObject)) {\n left = Object.keys(left);\n right = Object.keys(right);\n }\n\n return [left, right];\n}\n\nexport function hasEntry(input: Value) {\n return ([key, value]: [string, Value]) => {\n if (is.array(input)) {\n return (\n equal(input, value) ||\n input.some(d => equal(d, value) || (is.array(value) && isEqualPredicate(value)(d)))\n );\n }\n\n /* istanbul ignore else */\n if (is.plainObject(input) && input[key]) {\n return !!input[key] && equal(input[key], value);\n }\n\n return equal(input, value);\n };\n}\n\nexport function hasExtraKeys(left: string[], right: string[]): boolean {\n return right.some(d => !left.includes(d));\n}\n\nexport function hasValue(input: Value) {\n return (value: Value) => {\n if (is.array(input)) {\n return input.some(d => equal(d, value) || (is.array(value) && isEqualPredicate(value)(d)));\n }\n\n return equal(input, value);\n };\n}\n\nexport function includesOrEqualsTo(previousValue: T | T[], value: T): boolean {\n return is.array(previousValue)\n ? previousValue.some(d => equal(d, value))\n : equal(previousValue, value);\n}\n\nexport function isEqualPredicate(data: unknown[]) {\n return (value: unknown) => data.some(d => equal(d, value));\n}\n\nexport function isSameType(...arguments_: ValidTypes[]): boolean {\n return (\n arguments_.every(is.array) ||\n arguments_.every(is.number) ||\n arguments_.every(is.plainObject) ||\n arguments_.every(is.string)\n );\n}\n\nexport function nested(data: T, property?: K) {\n /* istanbul ignore else */\n if (is.plainObject(data) || is.array(data)) {\n /* istanbul ignore else */\n if (is.string(property)) {\n const props: Array = property.split('.');\n\n return props.reduce((acc, d) => acc && acc[d], data);\n }\n\n /* istanbul ignore else */\n if (is.number(property)) {\n return data[property];\n }\n\n return data;\n }\n\n return data;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport Popper from 'popper.js';\nimport deepmerge from 'deepmerge';\nimport is from 'is-lite';\nimport treeChanges from 'tree-changes';\nimport ReactDOM from 'react-dom';\nimport ExecutionEnvironment from 'exenv';\n\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nfunction _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n\n return target;\n}\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n Object.defineProperty(subClass, \"prototype\", {\n writable: false\n });\n if (superClass) _setPrototypeOf(subClass, superClass);\n}\n\nfunction _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nfunction _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n return _setPrototypeOf(o, p);\n}\n\nfunction _isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nfunction _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n\n var target = _objectWithoutPropertiesLoose(source, excluded);\n\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}\n\nfunction _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (typeof call === \"object\" || typeof call === \"function\")) {\n return call;\n } else if (call !== void 0) {\n throw new TypeError(\"Derived constructors may only return object or undefined\");\n }\n\n return _assertThisInitialized(self);\n}\n\nfunction _createSuper(Derived) {\n var hasNativeReflectConstruct = _isNativeReflectConstruct();\n\n return function _createSuperInternal() {\n var Super = _getPrototypeOf(Derived),\n result;\n\n if (hasNativeReflectConstruct) {\n var NewTarget = _getPrototypeOf(this).constructor;\n\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n\n return _possibleConstructorReturn(this, result);\n };\n}\n\nvar DEFAULTS = {flip:{padding:20},preventOverflow:{padding:10}};\n\nvar STATUS = {INIT:'init',IDLE:'idle',OPENING:'opening',OPEN:'open',CLOSING:'closing',ERROR:'error'};\n\nvar canUseDOM=ExecutionEnvironment.canUseDOM;var isReact16=ReactDOM.createPortal!==undefined;function isMobile(){return 'ontouchstart'in window&&/Mobi/.test(navigator.userAgent);}/**\n * Log method calls if debug is enabled\n *\n * @private\n * @param {Object} arg\n * @param {string} arg.title - The title the logger was called from\n * @param {Object|Array} [arg.data] - The data to be logged\n * @param {boolean} [arg.warn] - If true, the message will be a warning\n * @param {boolean} [arg.debug] - Nothing will be logged unless debug is true\n */function log(_ref){var title=_ref.title,data=_ref.data,_ref$warn=_ref.warn,warn=_ref$warn===void 0?false:_ref$warn,_ref$debug=_ref.debug,debug=_ref$debug===void 0?false:_ref$debug;/* eslint-disable no-console */var logFn=warn?console.warn||console.error:console.log;if(debug&&title&&data){console.groupCollapsed(\"%creact-floater: \".concat(title),'color: #9b00ff; font-weight: bold; font-size: 12px;');if(Array.isArray(data)){data.forEach(function(d){if(is.plainObject(d)&&d.key){logFn.apply(console,[d.key,d.value]);}else {logFn.apply(console,[d]);}});}else {logFn.apply(console,[data]);}console.groupEnd();}/* eslint-enable */}function on(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.addEventListener(event,cb,capture);}function off(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.removeEventListener(event,cb,capture);}function once(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var _nextCB;// eslint-disable-next-line prefer-const\n_nextCB=function nextCB(e){cb(e);off(element,event,_nextCB);};on(element,event,_nextCB,capture);}function noop(){}\n\nvar ReactFloaterPortal=/*#__PURE__*/function(_React$Component){_inherits(ReactFloaterPortal,_React$Component);var _super=_createSuper(ReactFloaterPortal);function ReactFloaterPortal(){_classCallCheck(this,ReactFloaterPortal);return _super.apply(this,arguments);}_createClass(ReactFloaterPortal,[{key:\"componentDidMount\",value:function componentDidMount(){if(!canUseDOM)return;if(!this.node){this.appendNode();}if(!isReact16){this.renderPortal();}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(){if(!canUseDOM)return;if(!isReact16){this.renderPortal();}}},{key:\"componentWillUnmount\",value:function componentWillUnmount(){if(!canUseDOM||!this.node)return;if(!isReact16){ReactDOM.unmountComponentAtNode(this.node);}if(this.node&&this.node.parentNode===document.body){document.body.removeChild(this.node);this.node=undefined;}}},{key:\"appendNode\",value:function appendNode(){var _this$props=this.props,id=_this$props.id,zIndex=_this$props.zIndex;if(!this.node){this.node=document.createElement('div');/* istanbul ignore else */if(id){this.node.id=id;}if(zIndex){this.node.style.zIndex=zIndex;}document.body.appendChild(this.node);}}},{key:\"renderPortal\",value:function renderPortal(){if(!canUseDOM)return null;var _this$props2=this.props,children=_this$props2.children,setRef=_this$props2.setRef;if(!this.node){this.appendNode();}/* istanbul ignore else */if(isReact16){return/*#__PURE__*/ReactDOM.createPortal(children,this.node);}var portal=ReactDOM.unstable_renderSubtreeIntoContainer(this,children.length>1?/*#__PURE__*/React.createElement(\"div\",null,children):children[0],this.node);setRef(portal);return null;}},{key:\"renderReact16\",value:function renderReact16(){var _this$props3=this.props,hasChildren=_this$props3.hasChildren,placement=_this$props3.placement,target=_this$props3.target;if(!hasChildren){if(target||placement==='center'){return this.renderPortal();}return null;}return this.renderPortal();}},{key:\"render\",value:function render(){if(!isReact16){return null;}return this.renderReact16();}}]);return ReactFloaterPortal;}(React.Component);_defineProperty(ReactFloaterPortal,\"propTypes\",{children:PropTypes.oneOfType([PropTypes.element,PropTypes.array]),hasChildren:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),placement:PropTypes.string,setRef:PropTypes.func.isRequired,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),zIndex:PropTypes.number});\n\nvar FloaterArrow=/*#__PURE__*/function(_React$Component){_inherits(FloaterArrow,_React$Component);var _super=_createSuper(FloaterArrow);function FloaterArrow(){_classCallCheck(this,FloaterArrow);return _super.apply(this,arguments);}_createClass(FloaterArrow,[{key:\"parentStyle\",get:function get(){var _this$props=this.props,placement=_this$props.placement,styles=_this$props.styles;var length=styles.arrow.length;var arrow={pointerEvents:'none',position:'absolute',width:'100%'};/* istanbul ignore else */if(placement.startsWith('top')){arrow.bottom=0;arrow.left=0;arrow.right=0;arrow.height=length;}else if(placement.startsWith('bottom')){arrow.left=0;arrow.right=0;arrow.top=0;arrow.height=length;}else if(placement.startsWith('left')){arrow.right=0;arrow.top=0;arrow.bottom=0;}else if(placement.startsWith('right')){arrow.left=0;arrow.top=0;}return arrow;}},{key:\"render\",value:function render(){var _this$props2=this.props,placement=_this$props2.placement,setArrowRef=_this$props2.setArrowRef,styles=_this$props2.styles;var _styles$arrow=styles.arrow,color=_styles$arrow.color,display=_styles$arrow.display,length=_styles$arrow.length,margin=_styles$arrow.margin,position=_styles$arrow.position,spread=_styles$arrow.spread;var arrowStyles={display:display,position:position};var points;var x=spread;var y=length;/* istanbul ignore else */if(placement.startsWith('top')){points=\"0,0 \".concat(x/2,\",\").concat(y,\" \").concat(x,\",0\");arrowStyles.bottom=0;arrowStyles.marginLeft=margin;arrowStyles.marginRight=margin;}else if(placement.startsWith('bottom')){points=\"\".concat(x,\",\").concat(y,\" \").concat(x/2,\",0 0,\").concat(y);arrowStyles.top=0;arrowStyles.marginLeft=margin;arrowStyles.marginRight=margin;}else if(placement.startsWith('left')){y=spread;x=length;points=\"0,0 \".concat(x,\",\").concat(y/2,\" 0,\").concat(y);arrowStyles.right=0;arrowStyles.marginTop=margin;arrowStyles.marginBottom=margin;}else if(placement.startsWith('right')){y=spread;x=length;points=\"\".concat(x,\",\").concat(y,\" \").concat(x,\",0 0,\").concat(y/2);arrowStyles.left=0;arrowStyles.marginTop=margin;arrowStyles.marginBottom=margin;}return/*#__PURE__*/React.createElement(\"div\",{className:\"__floater__arrow\",style:this.parentStyle},/*#__PURE__*/React.createElement(\"span\",{ref:setArrowRef,style:arrowStyles},/*#__PURE__*/React.createElement(\"svg\",{width:x,height:y,version:\"1.1\",xmlns:\"http://www.w3.org/2000/svg\"},/*#__PURE__*/React.createElement(\"polygon\",{points:points,fill:color}))));}}]);return FloaterArrow;}(React.Component);_defineProperty(FloaterArrow,\"propTypes\",{placement:PropTypes.string.isRequired,setArrowRef:PropTypes.func.isRequired,styles:PropTypes.object.isRequired});\n\nvar _excluded$1=[\"color\",\"height\",\"width\"];var FloaterCloseBtn=function FloaterCloseBtn(_ref){var handleClick=_ref.handleClick,styles=_ref.styles;var color=styles.color,height=styles.height,width=styles.width,style=_objectWithoutProperties(styles,_excluded$1);return/*#__PURE__*/React.createElement(\"button\",{\"aria-label\":\"close\",onClick:handleClick,style:style,type:\"button\"},/*#__PURE__*/React.createElement(\"svg\",{width:\"\".concat(width,\"px\"),height:\"\".concat(height,\"px\"),viewBox:\"0 0 18 18\",version:\"1.1\",xmlns:\"http://www.w3.org/2000/svg\",preserveAspectRatio:\"xMidYMid\"},/*#__PURE__*/React.createElement(\"g\",null,/*#__PURE__*/React.createElement(\"path\",{d:\"M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z\",fill:color}))));};FloaterCloseBtn.propTypes={handleClick:PropTypes.func.isRequired,styles:PropTypes.object.isRequired};\n\nvar FloaterContainer=function FloaterContainer(_ref){var content=_ref.content,footer=_ref.footer,handleClick=_ref.handleClick,open=_ref.open,positionWrapper=_ref.positionWrapper,showCloseButton=_ref.showCloseButton,title=_ref.title,styles=_ref.styles;var output={content:/*#__PURE__*/React.isValidElement(content)?content:/*#__PURE__*/React.createElement(\"div\",{className:\"__floater__content\",style:styles.content},content)};if(title){output.title=/*#__PURE__*/React.isValidElement(title)?title:/*#__PURE__*/React.createElement(\"div\",{className:\"__floater__title\",style:styles.title},title);}if(footer){output.footer=/*#__PURE__*/React.isValidElement(footer)?footer:/*#__PURE__*/React.createElement(\"div\",{className:\"__floater__footer\",style:styles.footer},footer);}if((showCloseButton||positionWrapper)&&!is[\"boolean\"](open)){output.close=/*#__PURE__*/React.createElement(FloaterCloseBtn,{styles:styles.close,handleClick:handleClick});}return/*#__PURE__*/React.createElement(\"div\",{className:\"__floater__container\",style:styles.container},output.close,output.title,output.content,output.footer);};FloaterContainer.propTypes={content:PropTypes.node.isRequired,footer:PropTypes.node,handleClick:PropTypes.func.isRequired,open:PropTypes.bool,positionWrapper:PropTypes.bool.isRequired,showCloseButton:PropTypes.bool.isRequired,styles:PropTypes.object.isRequired,title:PropTypes.node};\n\nvar Floater=/*#__PURE__*/function(_React$Component){_inherits(Floater,_React$Component);var _super=_createSuper(Floater);function Floater(){_classCallCheck(this,Floater);return _super.apply(this,arguments);}_createClass(Floater,[{key:\"style\",get:function get(){var _this$props=this.props,disableAnimation=_this$props.disableAnimation,component=_this$props.component,placement=_this$props.placement,hideArrow=_this$props.hideArrow,status=_this$props.status,styles=_this$props.styles;var length=styles.arrow.length,floater=styles.floater,floaterCentered=styles.floaterCentered,floaterClosing=styles.floaterClosing,floaterOpening=styles.floaterOpening,floaterWithAnimation=styles.floaterWithAnimation,floaterWithComponent=styles.floaterWithComponent;var element={};if(!hideArrow){if(placement.startsWith('top')){element.padding=\"0 0 \".concat(length,\"px\");}else if(placement.startsWith('bottom')){element.padding=\"\".concat(length,\"px 0 0\");}else if(placement.startsWith('left')){element.padding=\"0 \".concat(length,\"px 0 0\");}else if(placement.startsWith('right')){element.padding=\"0 0 0 \".concat(length,\"px\");}}if([STATUS.OPENING,STATUS.OPEN].indexOf(status)!==-1){element=_objectSpread2(_objectSpread2({},element),floaterOpening);}if(status===STATUS.CLOSING){element=_objectSpread2(_objectSpread2({},element),floaterClosing);}if(status===STATUS.OPEN&&!disableAnimation){element=_objectSpread2(_objectSpread2({},element),floaterWithAnimation);}if(placement==='center'){element=_objectSpread2(_objectSpread2({},element),floaterCentered);}if(component){element=_objectSpread2(_objectSpread2({},element),floaterWithComponent);}return _objectSpread2(_objectSpread2({},floater),element);}},{key:\"render\",value:function render(){var _this$props2=this.props,component=_this$props2.component,closeFn=_this$props2.handleClick,hideArrow=_this$props2.hideArrow,setFloaterRef=_this$props2.setFloaterRef,status=_this$props2.status;var output={};var classes=['__floater'];if(component){if(/*#__PURE__*/React.isValidElement(component)){output.content=/*#__PURE__*/React.cloneElement(component,{closeFn:closeFn});}else {output.content=component({closeFn:closeFn});}}else {output.content=/*#__PURE__*/React.createElement(FloaterContainer,this.props);}if(status===STATUS.OPEN){classes.push('__floater__open');}if(!hideArrow){output.arrow=/*#__PURE__*/React.createElement(FloaterArrow,this.props);}return/*#__PURE__*/React.createElement(\"div\",{ref:setFloaterRef,className:classes.join(' '),style:this.style},/*#__PURE__*/React.createElement(\"div\",{className:\"__floater__body\"},output.content,output.arrow));}}]);return Floater;}(React.Component);_defineProperty(Floater,\"propTypes\",{component:PropTypes.oneOfType([PropTypes.func,PropTypes.element]),content:PropTypes.node,disableAnimation:PropTypes.bool.isRequired,footer:PropTypes.node,handleClick:PropTypes.func.isRequired,hideArrow:PropTypes.bool.isRequired,open:PropTypes.bool,placement:PropTypes.string.isRequired,positionWrapper:PropTypes.bool.isRequired,setArrowRef:PropTypes.func.isRequired,setFloaterRef:PropTypes.func.isRequired,showCloseButton:PropTypes.bool,status:PropTypes.string.isRequired,styles:PropTypes.object.isRequired,title:PropTypes.node});\n\nvar ReactFloaterWrapper=/*#__PURE__*/function(_React$Component){_inherits(ReactFloaterWrapper,_React$Component);var _super=_createSuper(ReactFloaterWrapper);function ReactFloaterWrapper(){_classCallCheck(this,ReactFloaterWrapper);return _super.apply(this,arguments);}_createClass(ReactFloaterWrapper,[{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,handleClick=_this$props.handleClick,handleMouseEnter=_this$props.handleMouseEnter,handleMouseLeave=_this$props.handleMouseLeave,setChildRef=_this$props.setChildRef,setWrapperRef=_this$props.setWrapperRef,style=_this$props.style,styles=_this$props.styles;var element;/* istanbul ignore else */if(children){if(React.Children.count(children)===1){if(!/*#__PURE__*/React.isValidElement(children)){element=/*#__PURE__*/React.createElement(\"span\",null,children);}else {var refProp=is[\"function\"](children.type)?'innerRef':'ref';element=/*#__PURE__*/React.cloneElement(React.Children.only(children),_defineProperty({},refProp,setChildRef));}}else {element=children;}}if(!element){return null;}return/*#__PURE__*/React.createElement(\"span\",{ref:setWrapperRef,style:_objectSpread2(_objectSpread2({},styles),style),onClick:handleClick,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave},element);}}]);return ReactFloaterWrapper;}(React.Component);_defineProperty(ReactFloaterWrapper,\"propTypes\",{children:PropTypes.node,handleClick:PropTypes.func.isRequired,handleMouseEnter:PropTypes.func.isRequired,handleMouseLeave:PropTypes.func.isRequired,setChildRef:PropTypes.func.isRequired,setWrapperRef:PropTypes.func.isRequired,style:PropTypes.object,styles:PropTypes.object.isRequired});\n\nvar defaultOptions={zIndex:100};function getStyles(styles){var options=deepmerge(defaultOptions,styles.options||{});return {wrapper:{cursor:'help',display:'inline-flex',flexDirection:'column',zIndex:options.zIndex},wrapperPosition:{left:-1000,position:'absolute',top:-1000,visibility:'hidden'},floater:{display:'inline-block',filter:'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',maxWidth:300,opacity:0,position:'relative',transition:'opacity 0.3s',visibility:'hidden',zIndex:options.zIndex},floaterOpening:{opacity:1,visibility:'visible'},floaterWithAnimation:{opacity:1,transition:'opacity 0.3s, transform 0.2s',visibility:'visible'},floaterWithComponent:{maxWidth:'100%'},floaterClosing:{opacity:0,visibility:'visible'},floaterCentered:{left:'50%',position:'fixed',top:'50%',transform:'translate(-50%, -50%)'},container:{backgroundColor:'#fff',color:'#666',minHeight:60,minWidth:200,padding:20,position:'relative',zIndex:10},title:{borderBottom:'1px solid #555',color:'#555',fontSize:18,marginBottom:5,paddingBottom:6,paddingRight:18},content:{fontSize:15},close:{backgroundColor:'transparent',border:0,borderRadius:0,color:'#555',fontSize:0,height:15,outline:'none',padding:10,position:'absolute',right:0,top:0,width:15,WebkitAppearance:'none'},footer:{borderTop:'1px solid #ccc',fontSize:13,marginTop:10,paddingTop:5},arrow:{color:'#fff',display:'inline-flex',length:16,margin:8,position:'absolute',spread:32},options:options};}\n\nvar _excluded=[\"arrow\",\"flip\",\"offset\"];var POSITIONING_PROPS=['position','top','right','bottom','left'];var ReactFloater=/*#__PURE__*/function(_React$Component){_inherits(ReactFloater,_React$Component);var _super=_createSuper(ReactFloater);function ReactFloater(props){var _this;_classCallCheck(this,ReactFloater);_this=_super.call(this,props);/* istanbul ignore else */_defineProperty(_assertThisInitialized(_this),\"setArrowRef\",function(ref){_this.arrowRef=ref;});_defineProperty(_assertThisInitialized(_this),\"setChildRef\",function(ref){_this.childRef=ref;});_defineProperty(_assertThisInitialized(_this),\"setFloaterRef\",function(ref){_this.floaterRef=ref;});_defineProperty(_assertThisInitialized(_this),\"setWrapperRef\",function(ref){_this.wrapperRef=ref;});_defineProperty(_assertThisInitialized(_this),\"handleTransitionEnd\",function(){var status=_this.state.status;var callback=_this.props.callback;/* istanbul ignore else */if(_this.wrapperPopper){_this.wrapperPopper.instance.update();}_this.setState({status:status===STATUS.OPENING?STATUS.OPEN:STATUS.IDLE},function(){var newStatus=_this.state.status;callback(newStatus===STATUS.OPEN?'open':'close',_this.props);});});_defineProperty(_assertThisInitialized(_this),\"handleClick\",function(){var _this$props=_this.props,event=_this$props.event,open=_this$props.open;if(is[\"boolean\"](open))return;var _this$state=_this.state,positionWrapper=_this$state.positionWrapper,status=_this$state.status;/* istanbul ignore else */if(_this.event==='click'||_this.event==='hover'&&positionWrapper){log({title:'click',data:[{event:event,status:status===STATUS.OPEN?'closing':'opening'}],debug:_this.debug});_this.toggle();}});_defineProperty(_assertThisInitialized(_this),\"handleMouseEnter\",function(){var _this$props2=_this.props,event=_this$props2.event,open=_this$props2.open;if(is[\"boolean\"](open)||isMobile())return;var status=_this.state.status;/* istanbul ignore else */if(_this.event==='hover'&&status===STATUS.IDLE){log({title:'mouseEnter',data:[{key:'originalEvent',value:event}],debug:_this.debug});clearTimeout(_this.eventDelayTimeout);_this.toggle();}});_defineProperty(_assertThisInitialized(_this),\"handleMouseLeave\",function(){var _this$props3=_this.props,event=_this$props3.event,eventDelay=_this$props3.eventDelay,open=_this$props3.open;if(is[\"boolean\"](open)||isMobile())return;var _this$state2=_this.state,status=_this$state2.status,positionWrapper=_this$state2.positionWrapper;/* istanbul ignore else */if(_this.event==='hover'){log({title:'mouseLeave',data:[{key:'originalEvent',value:event}],debug:_this.debug});if(!eventDelay){_this.toggle(STATUS.IDLE);}else if([STATUS.OPENING,STATUS.OPEN].indexOf(status)!==-1&&!positionWrapper&&!_this.eventDelayTimeout){_this.eventDelayTimeout=setTimeout(function(){delete _this.eventDelayTimeout;_this.toggle();},eventDelay*1000);}}});_this.state={currentPlacement:props.placement,needsUpdate:false,positionWrapper:props.wrapperOptions.position&&!!props.target,status:STATUS.INIT,statusWrapper:STATUS.INIT};_this._isMounted=false;_this.hasMounted=false;if(canUseDOM){window.addEventListener('load',function(){if(_this.popper){_this.popper.instance.update();}if(_this.wrapperPopper){_this.wrapperPopper.instance.update();}});}return _this;}_createClass(ReactFloater,[{key:\"componentDidMount\",value:function componentDidMount(){if(!canUseDOM)return;var positionWrapper=this.state.positionWrapper;var _this$props5=this.props,children=_this$props5.children,open=_this$props5.open,target=_this$props5.target;this._isMounted=true;log({title:'init',data:{hasChildren:!!children,hasTarget:!!target,isControlled:is[\"boolean\"](open),positionWrapper:positionWrapper,target:this.target,floater:this.floaterRef},debug:this.debug});if(!this.hasMounted){this.initPopper();this.hasMounted=true;}if(!children&&target&&!is[\"boolean\"](open));}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps,prevState){if(!canUseDOM)return;var _this$props6=this.props,autoOpen=_this$props6.autoOpen,open=_this$props6.open,target=_this$props6.target,wrapperOptions=_this$props6.wrapperOptions;var _treeChanges=treeChanges(prevState,this.state),changedFrom=_treeChanges.changedFrom,changed=_treeChanges.changed;if(prevProps.open!==open){var forceStatus;// always follow `open` in controlled mode\nif(is[\"boolean\"](open)){forceStatus=open?STATUS.OPENING:STATUS.CLOSING;}this.toggle(forceStatus);}if(prevProps.wrapperOptions.position!==wrapperOptions.position||prevProps.target!==target){this.changeWrapperPosition(this.props);}if(changed('status',STATUS.IDLE)&&open){this.toggle(STATUS.OPEN);}else if(changedFrom('status',STATUS.INIT,STATUS.IDLE)&&autoOpen){this.toggle(STATUS.OPEN);}if(this.popper&&changed('status',STATUS.OPENING)){this.popper.instance.update();}if(this.floaterRef&&(changed('status',STATUS.OPENING)||changed('status',STATUS.CLOSING))){once(this.floaterRef,'transitionend',this.handleTransitionEnd);}if(changed('needsUpdate',true)){this.rebuildPopper();}}},{key:\"componentWillUnmount\",value:function componentWillUnmount(){if(!canUseDOM)return;this._isMounted=false;if(this.popper){this.popper.instance.destroy();}if(this.wrapperPopper){this.wrapperPopper.instance.destroy();}}},{key:\"initPopper\",value:function initPopper(){var _this2=this;var target=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.target;var positionWrapper=this.state.positionWrapper;var _this$props7=this.props,disableFlip=_this$props7.disableFlip,getPopper=_this$props7.getPopper,hideArrow=_this$props7.hideArrow,offset=_this$props7.offset,placement=_this$props7.placement,wrapperOptions=_this$props7.wrapperOptions;var flipBehavior=placement==='top'||placement==='bottom'?'flip':['right','bottom-end','top-end','left','top-start','bottom-start'];/* istanbul ignore else */if(placement==='center'){this.setState({status:STATUS.IDLE});}else if(target&&this.floaterRef){var _this$options=this.options,arrow=_this$options.arrow,flip=_this$options.flip,offsetOptions=_this$options.offset,rest=_objectWithoutProperties(_this$options,_excluded);new Popper(target,this.floaterRef,{placement:placement,modifiers:_objectSpread2({arrow:_objectSpread2({enabled:!hideArrow,element:this.arrowRef},arrow),flip:_objectSpread2({enabled:!disableFlip,behavior:flipBehavior},flip),offset:_objectSpread2({offset:\"0, \".concat(offset,\"px\")},offsetOptions)},rest),onCreate:function onCreate(data){var _this2$floaterRef;_this2.popper=data;if(!((_this2$floaterRef=_this2.floaterRef)!==null&&_this2$floaterRef!==void 0&&_this2$floaterRef.isConnected)){_this2.setState({needsUpdate:true});return;}getPopper(data,'floater');if(_this2._isMounted){_this2.setState({currentPlacement:data.placement,status:STATUS.IDLE});}if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}},onUpdate:function onUpdate(data){_this2.popper=data;var currentPlacement=_this2.state.currentPlacement;if(_this2._isMounted&&data.placement!==currentPlacement){_this2.setState({currentPlacement:data.placement});}}});}if(positionWrapper){var wrapperOffset=!is.undefined(wrapperOptions.offset)?wrapperOptions.offset:0;new Popper(this.target,this.wrapperRef,{placement:wrapperOptions.placement||placement,modifiers:{arrow:{enabled:false},offset:{offset:\"0, \".concat(wrapperOffset,\"px\")},flip:{enabled:false}},onCreate:function onCreate(data){_this2.wrapperPopper=data;if(_this2._isMounted){_this2.setState({statusWrapper:STATUS.IDLE});}getPopper(data,'wrapper');if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}}});}}},{key:\"rebuildPopper\",value:function rebuildPopper(){var _this3=this;this.floaterRefInterval=setInterval(function(){var _this3$floaterRef;if((_this3$floaterRef=_this3.floaterRef)!==null&&_this3$floaterRef!==void 0&&_this3$floaterRef.isConnected){clearInterval(_this3.floaterRefInterval);_this3.setState({needsUpdate:false});_this3.initPopper();}},50);}},{key:\"changeWrapperPosition\",value:function changeWrapperPosition(_ref){var target=_ref.target,wrapperOptions=_ref.wrapperOptions;this.setState({positionWrapper:wrapperOptions.position&&!!target});}},{key:\"toggle\",value:function toggle(forceStatus){var status=this.state.status;var nextStatus=status===STATUS.OPEN?STATUS.CLOSING:STATUS.OPENING;if(!is.undefined(forceStatus)){nextStatus=forceStatus;}this.setState({status:nextStatus});}},{key:\"debug\",get:function get(){var debug=this.props.debug;return debug||!!global.ReactFloaterDebug;}},{key:\"event\",get:function get(){var _this$props8=this.props,disableHoverToClick=_this$props8.disableHoverToClick,event=_this$props8.event;if(event==='hover'&&isMobile()&&!disableHoverToClick){return 'click';}return event;}},{key:\"options\",get:function get(){var options=this.props.options;return deepmerge(DEFAULTS,options||{});}},{key:\"styles\",get:function get(){var _this4=this;var _this$state3=this.state,status=_this$state3.status,positionWrapper=_this$state3.positionWrapper,statusWrapper=_this$state3.statusWrapper;var styles=this.props.styles;var nextStyles=deepmerge(getStyles(styles),styles);if(positionWrapper){var wrapperStyles;if(!([STATUS.IDLE].indexOf(status)!==-1)||!([STATUS.IDLE].indexOf(statusWrapper)!==-1)){wrapperStyles=nextStyles.wrapperPosition;}else {wrapperStyles=this.wrapperPopper.styles;}nextStyles.wrapper=_objectSpread2(_objectSpread2({},nextStyles.wrapper),wrapperStyles);}/* istanbul ignore else */if(this.target){var targetStyles=window.getComputedStyle(this.target);/* istanbul ignore else */if(this.wrapperStyles){nextStyles.wrapper=_objectSpread2(_objectSpread2({},nextStyles.wrapper),this.wrapperStyles);}else if(!(['relative','static'].indexOf(targetStyles.position)!==-1)){this.wrapperStyles={};if(!positionWrapper){POSITIONING_PROPS.forEach(function(d){_this4.wrapperStyles[d]=targetStyles[d];});nextStyles.wrapper=_objectSpread2(_objectSpread2({},nextStyles.wrapper),this.wrapperStyles);this.target.style.position='relative';this.target.style.top='auto';this.target.style.right='auto';this.target.style.bottom='auto';this.target.style.left='auto';}}}return nextStyles;}},{key:\"target\",get:function get(){if(!canUseDOM)return null;var target=this.props.target;if(target){if(is.domElement(target)){return target;}return document.querySelector(target);}return this.childRef||this.wrapperRef;}},{key:\"render\",value:function render(){var _this$state4=this.state,currentPlacement=_this$state4.currentPlacement,positionWrapper=_this$state4.positionWrapper,status=_this$state4.status;var _this$props9=this.props,children=_this$props9.children,component=_this$props9.component,content=_this$props9.content,disableAnimation=_this$props9.disableAnimation,footer=_this$props9.footer,hideArrow=_this$props9.hideArrow,id=_this$props9.id,open=_this$props9.open,showCloseButton=_this$props9.showCloseButton,style=_this$props9.style,target=_this$props9.target,title=_this$props9.title;var wrapper=/*#__PURE__*/React.createElement(ReactFloaterWrapper,{handleClick:this.handleClick,handleMouseEnter:this.handleMouseEnter,handleMouseLeave:this.handleMouseLeave,setChildRef:this.setChildRef,setWrapperRef:this.setWrapperRef,style:style,styles:this.styles.wrapper},children);var output={};if(positionWrapper){output.wrapperInPortal=wrapper;}else {output.wrapperAsChildren=wrapper;}return/*#__PURE__*/React.createElement(\"span\",null,/*#__PURE__*/React.createElement(ReactFloaterPortal,{hasChildren:!!children,id:id,placement:currentPlacement,setRef:this.setFloaterRef,target:target,zIndex:this.styles.options.zIndex},/*#__PURE__*/React.createElement(Floater,{component:component,content:content,disableAnimation:disableAnimation,footer:footer,handleClick:this.handleClick,hideArrow:hideArrow||currentPlacement==='center',open:open,placement:currentPlacement,positionWrapper:positionWrapper,setArrowRef:this.setArrowRef,setFloaterRef:this.setFloaterRef,showCloseButton:showCloseButton,status:status,styles:this.styles,title:title}),output.wrapperInPortal),output.wrapperAsChildren);}}]);return ReactFloater;}(React.Component);_defineProperty(ReactFloater,\"propTypes\",{autoOpen:PropTypes.bool,callback:PropTypes.func,children:PropTypes.node,component:isRequiredIf(PropTypes.oneOfType([PropTypes.func,PropTypes.element]),function(props){return !props.content;}),content:isRequiredIf(PropTypes.node,function(props){return !props.component;}),debug:PropTypes.bool,disableAnimation:PropTypes.bool,disableFlip:PropTypes.bool,disableHoverToClick:PropTypes.bool,event:PropTypes.oneOf(['hover','click']),eventDelay:PropTypes.number,footer:PropTypes.node,getPopper:PropTypes.func,hideArrow:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),offset:PropTypes.number,open:PropTypes.bool,options:PropTypes.object,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto','center']),showCloseButton:PropTypes.bool,style:PropTypes.object,styles:PropTypes.object,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),title:PropTypes.node,wrapperOptions:PropTypes.shape({offset:PropTypes.number,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto']),position:PropTypes.bool})});_defineProperty(ReactFloater,\"defaultProps\",{autoOpen:false,callback:noop,debug:false,disableAnimation:false,disableFlip:false,disableHoverToClick:false,event:'click',eventDelay:0.4,getPopper:noop,hideArrow:false,offset:15,placement:'bottom',showCloseButton:false,styles:{},target:null,wrapperOptions:{position:false}});\n\nexport { ReactFloater as default };\n","import equal from '@gilbarbara/deep-equal';\nimport is from 'is-lite';\n\nimport { compareNumbers, compareValues, getIterables, includesOrEqualsTo, nested } from './helpers';\nimport { Data, KeyType, TreeChanges, Value } from './types';\n\nexport default function treeChanges>(\n previousData: P,\n data: D,\n): TreeChanges {\n if ([previousData, data].some(is.nullOrUndefined)) {\n throw new Error('Missing required parameters');\n }\n\n if (![previousData, data].every(d => is.plainObject(d) || is.array(d))) {\n throw new Error('Expected plain objects or array');\n }\n\n const added = (key?: K, value?: Value): boolean => {\n try {\n return compareValues(previousData, data, { key, type: 'added', value });\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const changed = (key?: K | string, actual?: Value, previous?: Value): boolean => {\n try {\n const left = nested(previousData, key);\n const right = nested(data, key);\n const hasActual = is.defined(actual);\n const hasPrevious = is.defined(previous);\n\n if (hasActual || hasPrevious) {\n const leftComparator = hasPrevious\n ? includesOrEqualsTo(previous, left)\n : !includesOrEqualsTo(actual, left);\n const rightComparator = includesOrEqualsTo(actual, right);\n\n return leftComparator && rightComparator;\n }\n\n if ([left, right].every(is.array) || [left, right].every(is.plainObject)) {\n return !equal(left, right);\n }\n\n return left !== right;\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const changedFrom = (key: K | string, previous: Value, actual?: Value): boolean => {\n if (!is.defined(key)) {\n return false;\n }\n\n try {\n const left = nested(previousData, key);\n const right = nested(data, key);\n const hasActual = is.defined(actual);\n\n return (\n includesOrEqualsTo(previous, left) &&\n (hasActual ? includesOrEqualsTo(actual, right) : !hasActual)\n );\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n /**\n * @deprecated\n * Use \"changed\" instead\n */\n const changedTo = (key: K | string, actual: Value): boolean => {\n if (!is.defined(key)) {\n return false;\n }\n\n /* istanbul ignore next */\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('`changedTo` is deprecated! Replace it with `change`');\n }\n\n return changed(key, actual);\n };\n\n const decreased = (key: K, actual?: Value, previous?: Value): boolean => {\n if (!is.defined(key)) {\n return false;\n }\n\n try {\n return compareNumbers(previousData, data, { key, actual, previous, type: 'decreased' });\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const emptied = (key?: K): boolean => {\n try {\n const [left, right] = getIterables(previousData, data, { key });\n\n return !!left.length && !right.length;\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const filled = (key?: K): boolean => {\n try {\n const [left, right] = getIterables(previousData, data, { key });\n\n return !left.length && !!right.length;\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const increased = (key: K, actual?: Value, previous?: Value): boolean => {\n if (!is.defined(key)) {\n return false;\n }\n\n try {\n return compareNumbers(previousData, data, { key, actual, previous, type: 'increased' });\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n const removed = (key?: K, value?: Value): boolean => {\n try {\n return compareValues(previousData, data, { key, type: 'removed', value });\n } catch {\n /* istanbul ignore next */\n return false;\n }\n };\n\n return { added, changed, changedFrom, changedTo, decreased, emptied, filled, increased, removed };\n}\n\nexport * from './types';\n","export const ACTIONS = {\n INIT: 'init',\n START: 'start',\n STOP: 'stop',\n RESET: 'reset',\n PREV: 'prev',\n NEXT: 'next',\n GO: 'go',\n CLOSE: 'close',\n SKIP: 'skip',\n UPDATE: 'update',\n} as const;\n\nexport const EVENTS = {\n TOUR_START: 'tour:start',\n STEP_BEFORE: 'step:before',\n BEACON: 'beacon',\n TOOLTIP: 'tooltip',\n STEP_AFTER: 'step:after',\n TOUR_END: 'tour:end',\n TOUR_STATUS: 'tour:status',\n TARGET_NOT_FOUND: 'error:target_not_found',\n ERROR: 'error',\n} as const;\n\nexport const LIFECYCLE = {\n INIT: 'init',\n READY: 'ready',\n BEACON: 'beacon',\n TOOLTIP: 'tooltip',\n COMPLETE: 'complete',\n ERROR: 'error',\n} as const;\n\nexport const STATUS = {\n IDLE: 'idle',\n READY: 'ready',\n WAITING: 'waiting',\n RUNNING: 'running',\n PAUSED: 'paused',\n SKIPPED: 'skipped',\n FINISHED: 'finished',\n ERROR: 'error',\n} as const;\n","import scroll from 'scroll';\nimport scrollParent from 'scrollparent';\n\nexport function canUseDOM() {\n return !!(typeof window !== 'undefined' && window.document && window.document.createElement);\n}\n\n/**\n * Find the bounding client rect\n */\nexport function getClientRect(element: HTMLElement | null) {\n if (!element) {\n return null;\n }\n\n return element.getBoundingClientRect();\n}\n\n/**\n * Helper function to get the browser-normalized \"document height\"\n */\nexport function getDocumentHeight(): number {\n const { body, documentElement } = document;\n\n if (!body || !documentElement) {\n return 0;\n }\n\n return Math.max(\n body.scrollHeight,\n body.offsetHeight,\n documentElement.clientHeight,\n documentElement.scrollHeight,\n documentElement.offsetHeight,\n );\n}\n\n/**\n * Find and return the target DOM element based on a step's 'target'.\n */\nexport function getElement(element: string | HTMLElement): HTMLElement | null {\n /* istanbul ignore else */\n if (typeof element === 'string') {\n return document.querySelector(element);\n }\n\n return element;\n}\n\n/**\n * Get computed style property\n */\nexport function getStyleComputedProperty(el: HTMLElement): CSSStyleDeclaration | null {\n if (!el || el.nodeType !== 1) {\n return null;\n }\n\n return getComputedStyle(el);\n}\n\n/**\n * Get scroll parent with fix\n */\nexport function getScrollParent(\n element: HTMLElement | null,\n skipFix: boolean,\n forListener?: boolean,\n) {\n if (!element) {\n return scrollDocument();\n }\n\n const parent = scrollParent(element) as HTMLElement;\n\n if (parent) {\n if (parent.isSameNode(scrollDocument())) {\n if (forListener) {\n return document;\n }\n\n return scrollDocument();\n }\n\n const hasScrolling = parent.scrollHeight > parent.offsetHeight;\n\n /* istanbul ignore else */\n if (!hasScrolling && !skipFix) {\n parent.style.overflow = 'initial';\n\n return scrollDocument();\n }\n }\n\n return parent;\n}\n\n/**\n * Check if the element has custom scroll parent\n */\nexport function hasCustomScrollParent(element: HTMLElement | null, skipFix: boolean): boolean {\n if (!element) {\n return false;\n }\n\n const parent = getScrollParent(element, skipFix);\n\n return !parent.isSameNode(scrollDocument());\n}\n\n/**\n * Check if the element has custom offset parent\n */\nexport function hasCustomOffsetParent(element: HTMLElement): boolean {\n return element.offsetParent !== document.body;\n}\n\n/**\n * Check if an element has fixed/sticky position\n */\nexport function hasPosition(el: HTMLElement | Node | null, type: string = 'fixed'): boolean {\n if (!el || !(el instanceof HTMLElement)) {\n return false;\n }\n\n const { nodeName } = el;\n const styles = getStyleComputedProperty(el);\n\n if (nodeName === 'BODY' || nodeName === 'HTML') {\n return false;\n }\n\n if (styles && styles.position === type) {\n return true;\n }\n\n if (!el.parentNode) {\n return false;\n }\n\n return hasPosition(el.parentNode, type);\n}\n\n/**\n * Check if the element is visible\n */\nexport function isElementVisible(element: HTMLElement): element is HTMLElement {\n if (!element) {\n return false;\n }\n\n let parentElement: HTMLElement | null = element;\n\n while (parentElement) {\n if (parentElement === document.body) {\n break;\n }\n\n /* istanbul ignore else */\n if (parentElement instanceof HTMLElement) {\n const { display, visibility } = getComputedStyle(parentElement);\n\n if (display === 'none' || visibility === 'hidden') {\n return false;\n }\n }\n\n parentElement = parentElement.parentElement ?? null;\n }\n\n return true;\n}\n\n/**\n * Find and return the target DOM element based on a step's 'target'.\n */\nexport function getElementPosition(\n element: HTMLElement | null,\n offset: number,\n skipFix: boolean,\n): number {\n const elementRect = getClientRect(element);\n const parent = getScrollParent(element, skipFix);\n const hasScrollParent = hasCustomScrollParent(element, skipFix);\n let parentTop = 0;\n\n /* istanbul ignore else */\n if (parent instanceof HTMLElement) {\n parentTop = parent.scrollTop;\n }\n\n const top = (elementRect?.top ?? 0) + (!hasScrollParent && !hasPosition(element) ? parentTop : 0);\n\n return Math.floor(top - offset);\n}\n\n/**\n * Get the scrollTop position\n */\nexport function getScrollTo(element: HTMLElement | null, offset: number, skipFix: boolean): number {\n if (!element) {\n return 0;\n }\n\n const parent = scrollParent(element);\n let top = element.offsetTop;\n\n if (parent && hasCustomScrollParent(element, skipFix) && !hasCustomOffsetParent(element)) {\n top -= parent.offsetTop;\n }\n\n return Math.floor(top - offset);\n}\n\nexport function scrollDocument(): Element | HTMLElement {\n return document.scrollingElement ?? document.documentElement;\n}\n\n/**\n * Scroll to position\n */\nexport function scrollTo(\n value: number,\n options: { duration?: number; element: Element | HTMLElement },\n): Promise {\n const { duration, element } = options;\n\n return new Promise((resolve, reject) => {\n const { scrollTop } = element;\n\n const limit = value > scrollTop ? value - scrollTop : scrollTop - value;\n\n scroll.top(element as HTMLElement, value, { duration: limit < 100 ? 50 : duration }, error => {\n if (error && error.message !== 'Element already at target scroll position') {\n return reject(error);\n }\n\n return resolve();\n });\n });\n}\n","import { isValidElement, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport is from 'is-lite';\n\nimport { LIFECYCLE } from '~/literals';\n\nimport { Lifecycle, Step } from '~/types';\n\nimport { hasPosition } from './dom';\n\ninterface LogOptions {\n /** The data to be logged */\n data: any;\n /** display the log */\n debug?: boolean;\n /** The title the logger was called from */\n title: string;\n /** If true, the message will be a warning */\n warn?: boolean;\n}\n\ninterface ShouldScrollOptions {\n isFirstStep: boolean;\n lifecycle: Lifecycle;\n previousLifecycle: Lifecycle;\n scrollToFirstStep: boolean;\n step: Step;\n target: HTMLElement | null;\n}\n\nexport const isReact16 = createPortal !== undefined;\n\n/**\n * Get the current browser\n */\nexport function getBrowser(userAgent: string = navigator.userAgent): string {\n let browser = userAgent;\n\n if (typeof window === 'undefined') {\n browser = 'node';\n }\n // @ts-expect-error IE support\n else if (document.documentMode) {\n browser = 'ie';\n } else if (/Edge/.test(userAgent)) {\n browser = 'edge';\n }\n // @ts-expect-error Opera 8.0+\n else if (Boolean(window.opera) || userAgent.includes(' OPR/')) {\n browser = 'opera';\n }\n // @ts-expect-error Firefox 1.0+\n else if (typeof window.InstallTrigger !== 'undefined') {\n browser = 'firefox';\n }\n // @ts-expect-error Chrome 1+\n else if (window.chrome) {\n browser = 'chrome';\n }\n // Safari (and Chrome iOS, Firefox iOS)\n else if (/(Version\\/([\\d._]+).*Safari|CriOS|FxiOS| Mobile\\/)/.test(userAgent)) {\n browser = 'safari';\n }\n\n return browser;\n}\n\n/**\n * Get Object type\n */\nexport function getObjectType(value: unknown): string {\n return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();\n}\n\n/**\n * Get text from React components\n */\nexport function getText(root: ReactNode): string {\n const content: Array = [];\n\n const recurse = (child: ReactNode) => {\n /* istanbul ignore else */\n if (typeof child === 'string' || typeof child === 'number') {\n content.push(child);\n } else if (Array.isArray(child)) {\n child.forEach(c => recurse(c));\n } else if (isValidElement(child)) {\n const { children } = child.props;\n\n if (Array.isArray(children)) {\n children.forEach(c => recurse(c));\n } else {\n recurse(children);\n }\n }\n };\n\n recurse(root);\n\n return content.join(' ').trim();\n}\n\nexport function hasValidKeys(object: Record, keys?: Array): boolean {\n if (!is.plainObject(object) || !is.array(keys)) {\n return false;\n }\n\n return Object.keys(object).every(d => keys.includes(d));\n}\n\n/**\n * Convert hex to RGB\n */\nexport function hexToRGB(hex: string): Array {\n const shorthandRegex = /^#?([\\da-f])([\\da-f])([\\da-f])$/i;\n const properHex = hex.replace(shorthandRegex, (_m, r, g, b) => r + r + g + g + b + b);\n\n const result = /^#?([\\da-f]{2})([\\da-f]{2})([\\da-f]{2})$/i.exec(properHex);\n\n return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [];\n}\n\n/**\n * Decide if the step shouldn't skip the beacon\n * @param {Object} step\n *\n * @returns {boolean}\n */\nexport function hideBeacon(step: Step): boolean {\n return step.disableBeacon || step.placement === 'center';\n}\n\n/**\n * Detect legacy browsers\n *\n * @returns {boolean}\n */\nexport function isLegacy(): boolean {\n return !['chrome', 'safari', 'firefox', 'opera'].includes(getBrowser());\n}\n\n/**\n * Log method calls if debug is enabled\n */\nexport function log({ data, debug = false, title, warn = false }: LogOptions) {\n /* eslint-disable no-console */\n const logFn = warn ? console.warn || console.error : console.log;\n\n if (debug) {\n if (title && data) {\n console.groupCollapsed(\n `%creact-joyride: ${title}`,\n 'color: #ff0044; font-weight: bold; font-size: 12px;',\n );\n\n if (Array.isArray(data)) {\n data.forEach(d => {\n if (is.plainObject(d) && d.key) {\n logFn.apply(console, [d.key, d.value]);\n } else {\n logFn.apply(console, [d]);\n }\n });\n } else {\n logFn.apply(console, [data]);\n }\n\n console.groupEnd();\n } else {\n console.error('Missing title or data props');\n }\n }\n /* eslint-enable */\n}\n\nexport function shouldScroll(options: ShouldScrollOptions): boolean {\n const { isFirstStep, lifecycle, previousLifecycle, scrollToFirstStep, step, target } = options;\n\n return (\n !step.disableScrolling &&\n (!isFirstStep || scrollToFirstStep || lifecycle === LIFECYCLE.TOOLTIP) &&\n step.placement !== 'center' &&\n (!step.isFixed || !hasPosition(target)) && // fixed steps don't need to scroll\n previousLifecycle !== lifecycle &&\n ([LIFECYCLE.BEACON, LIFECYCLE.TOOLTIP] as Array).includes(lifecycle)\n );\n}\n","import { noop } from '@gilbarbara/helpers';\n\nexport const defaultFloaterProps = {\n options: {\n preventOverflow: {\n boundariesElement: 'scrollParent',\n },\n },\n wrapperOptions: {\n offset: -18,\n position: true,\n },\n};\n\nexport const defaultLocale = {\n back: 'Back',\n close: 'Close',\n last: 'Last',\n next: 'Next',\n open: 'Open the dialog',\n skip: 'Skip',\n};\n\nexport const defaultStep = {\n event: 'click',\n placement: 'bottom',\n offset: 10,\n disableBeacon: false,\n disableCloseOnEsc: false,\n disableOverlay: false,\n disableOverlayClose: false,\n disableScrollParentFix: false,\n disableScrolling: false,\n hideBackButton: false,\n hideCloseButton: false,\n hideFooter: false,\n isFixed: false,\n locale: defaultLocale,\n showProgress: false,\n showSkipButton: false,\n spotlightClicks: false,\n spotlightPadding: 10,\n};\n\nexport const defaultProps = {\n continuous: false,\n debug: false,\n disableCloseOnEsc: false,\n disableOverlay: false,\n disableOverlayClose: false,\n disableScrolling: false,\n disableScrollParentFix: false,\n getHelpers: noop(),\n hideBackButton: false,\n run: true,\n scrollOffset: 20,\n scrollDuration: 300,\n scrollToFirstStep: false,\n showSkipButton: false,\n showProgress: false,\n spotlightClicks: false,\n spotlightPadding: 10,\n steps: [],\n};\n","import deepmerge from 'deepmerge';\nimport { PartialDeep } from 'type-fest';\n\nimport { hexToRGB } from './modules/helpers';\nimport { Styles, StylesOptions } from './types';\n\nconst defaultOptions = {\n arrowColor: '#fff',\n backgroundColor: '#fff',\n beaconSize: 36,\n overlayColor: 'rgba(0, 0, 0, 0.5)',\n primaryColor: '#f04',\n spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',\n textColor: '#333',\n width: 380,\n zIndex: 100,\n} satisfies StylesOptions;\n\nconst buttonBase = {\n backgroundColor: 'transparent',\n border: 0,\n borderRadius: 0,\n color: '#555',\n cursor: 'pointer',\n fontSize: 16,\n lineHeight: 1,\n padding: 8,\n WebkitAppearance: 'none' as const,\n};\n\nconst spotlight = {\n borderRadius: 4,\n position: 'absolute' as const,\n};\n\nexport default function getStyles(\n propsStyles?: PartialDeep,\n stepStyles?: PartialDeep,\n) {\n const mergedStyles = deepmerge(propsStyles ?? {}, stepStyles ?? {});\n const options = deepmerge(defaultOptions, mergedStyles.options || {}) satisfies StylesOptions;\n let { width } = options;\n\n if (window.innerWidth > 480) {\n width = 380;\n }\n\n if ('width' in options) {\n width =\n typeof options.width === 'number' && window.innerWidth < options.width\n ? window.innerWidth - 30\n : options.width;\n }\n\n const overlay = {\n bottom: 0,\n left: 0,\n overflow: 'hidden',\n position: 'absolute' as const,\n right: 0,\n top: 0,\n zIndex: options.zIndex,\n };\n\n const defaultStyles = {\n beacon: {\n ...buttonBase,\n display: 'inline-block',\n height: options.beaconSize,\n position: 'relative' as const,\n width: options.beaconSize,\n zIndex: options.zIndex,\n },\n beaconInner: {\n animation: 'joyride-beacon-inner 1.2s infinite ease-in-out',\n backgroundColor: options.primaryColor,\n borderRadius: '50%',\n display: 'block',\n height: '50%',\n left: '50%',\n opacity: 0.7,\n position: 'absolute' as const,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n width: '50%',\n },\n beaconOuter: {\n animation: 'joyride-beacon-outer 1.2s infinite ease-in-out',\n backgroundColor: `rgba(${hexToRGB(options.primaryColor).join(',')}, 0.2)`,\n border: `2px solid ${options.primaryColor}`,\n borderRadius: '50%',\n boxSizing: 'border-box' as const,\n display: 'block',\n height: '100%',\n left: 0,\n opacity: 0.9,\n position: 'absolute' as const,\n top: 0,\n transformOrigin: 'center',\n width: '100%',\n },\n tooltip: {\n backgroundColor: options.backgroundColor,\n borderRadius: 5,\n boxSizing: 'border-box' as const,\n color: options.textColor,\n fontSize: 16,\n maxWidth: '100%',\n padding: 15,\n position: 'relative' as const,\n width,\n },\n tooltipContainer: {\n lineHeight: 1.4,\n textAlign: 'center' as const,\n },\n tooltipTitle: {\n fontSize: 18,\n margin: 0,\n },\n tooltipContent: {\n padding: '20px 10px',\n },\n tooltipFooter: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-end',\n marginTop: 15,\n },\n tooltipFooterSpacer: {\n flex: 1,\n },\n buttonNext: {\n ...buttonBase,\n backgroundColor: options.primaryColor,\n borderRadius: 4,\n color: '#fff',\n },\n buttonBack: {\n ...buttonBase,\n color: options.primaryColor,\n marginLeft: 'auto',\n marginRight: 5,\n },\n buttonClose: {\n ...buttonBase,\n color: options.textColor,\n height: 14,\n padding: 15,\n position: 'absolute' as const,\n right: 0,\n top: 0,\n width: 14,\n },\n buttonSkip: {\n ...buttonBase,\n color: options.textColor,\n fontSize: 14,\n },\n overlay: {\n ...overlay,\n backgroundColor: options.overlayColor,\n mixBlendMode: 'hard-light' as const,\n },\n overlayLegacy: {\n ...overlay,\n },\n overlayLegacyCenter: {\n ...overlay,\n backgroundColor: options.overlayColor,\n },\n spotlight: {\n ...spotlight,\n backgroundColor: 'gray',\n },\n spotlightLegacy: {\n ...spotlight,\n boxShadow: `0 0 0 9999px ${options.overlayColor}, ${options.spotlightShadow}`,\n },\n floaterStyles: {\n arrow: {\n color: options.arrowColor,\n },\n options: {\n zIndex: options.zIndex + 100,\n },\n },\n options,\n };\n\n return deepmerge(defaultStyles, mergedStyles);\n}\n","import { Props as FloaterProps } from 'react-floater';\nimport { omit, pick } from '@gilbarbara/helpers';\nimport deepmerge from 'deepmerge';\nimport is from 'is-lite';\nimport { SetRequired } from 'type-fest';\n\nimport { defaultFloaterProps, defaultLocale, defaultStep } from '~/defaults';\nimport getStyles from '~/styles';\nimport { Props, Step, StepMerged } from '~/types';\n\nimport { getElement, hasCustomScrollParent } from './dom';\nimport { log } from './helpers';\n\nfunction getTourProps(props: Props) {\n return pick(\n props,\n 'beaconComponent',\n 'disableCloseOnEsc',\n 'disableOverlay',\n 'disableOverlayClose',\n 'disableScrolling',\n 'disableScrollParentFix',\n 'floaterProps',\n 'hideBackButton',\n 'hideCloseButton',\n 'locale',\n 'showProgress',\n 'showSkipButton',\n 'spotlightClicks',\n 'spotlightPadding',\n 'styles',\n 'tooltipComponent',\n );\n}\n\nexport function getMergedStep(currentStep: Step | undefined, props: Props): StepMerged {\n const step = currentStep ?? {};\n const mergedStep = deepmerge.all([defaultStep, getTourProps(props), step], {\n isMergeableObject: is.plainObject,\n }) as StepMerged;\n\n const mergedStyles = getStyles(props.styles, mergedStep.styles);\n const scrollParent = hasCustomScrollParent(\n getElement(mergedStep.target),\n mergedStep.disableScrollParentFix,\n );\n const floaterProps = deepmerge.all([\n defaultFloaterProps,\n props.floaterProps ?? {},\n mergedStep.floaterProps ?? {},\n ]) as SetRequired;\n\n // Set react-floater props\n floaterProps.offset = mergedStep.offset;\n floaterProps.styles = deepmerge(floaterProps.styles ?? {}, mergedStyles.floaterStyles);\n\n floaterProps.offset += props.spotlightPadding ?? mergedStep.spotlightPadding ?? 0;\n\n if (mergedStep.placementBeacon && floaterProps.wrapperOptions) {\n floaterProps.wrapperOptions.placement = mergedStep.placementBeacon;\n }\n\n if (scrollParent && floaterProps.options.preventOverflow) {\n floaterProps.options.preventOverflow.boundariesElement = 'window';\n }\n\n return {\n ...mergedStep,\n locale: deepmerge.all([defaultLocale, props.locale ?? {}, mergedStep.locale || {}]),\n floaterProps,\n styles: omit(mergedStyles, 'floaterStyles'),\n };\n}\n\n/**\n * Validate if a step is valid\n */\nexport function validateStep(step: Step, debug: boolean = false): boolean {\n if (!is.plainObject(step)) {\n log({\n title: 'validateStep',\n data: 'step must be an object',\n warn: true,\n debug,\n });\n\n return false;\n }\n\n if (!step.target) {\n log({\n title: 'validateStep',\n data: 'target is missing from the step',\n warn: true,\n debug,\n });\n\n return false;\n }\n\n return true;\n}\n\n/**\n * Validate if steps are valid\n */\nexport function validateSteps(steps: Array, debug: boolean = false): boolean {\n if (!is.array(steps)) {\n log({\n title: 'validateSteps',\n data: 'steps must be an array',\n warn: true,\n debug,\n });\n\n return false;\n }\n\n return steps.every(d => validateStep(d, debug));\n}\n","import is from 'is-lite';\n\nimport { ACTIONS, LIFECYCLE, STATUS } from '~/literals';\n\nimport { AnyObject, State, Status, Step, StoreHelpers, StoreOptions } from '~/types';\n\nimport { hasValidKeys } from './helpers';\n\nconst defaultState: State = {\n action: 'init',\n controlled: false,\n index: 0,\n lifecycle: LIFECYCLE.INIT,\n size: 0,\n status: STATUS.IDLE,\n};\n\ntype StateWithContinuous = State & { continuous: boolean };\n\nconst validKeys = ['action', 'index', 'lifecycle', 'status'];\n\ntype Listener = (state: State) => void;\n\nclass Store {\n private data: Map = new Map();\n private listener: Listener | null;\n private store: Map = new Map();\n\n constructor(options?: StoreOptions) {\n const { continuous = false, stepIndex, steps = [] } = options ?? {};\n\n this.setState(\n {\n action: ACTIONS.INIT,\n controlled: is.number(stepIndex),\n continuous,\n index: is.number(stepIndex) ? stepIndex : 0,\n lifecycle: LIFECYCLE.INIT,\n status: steps.length ? STATUS.READY : STATUS.IDLE,\n },\n true,\n );\n\n this.listener = null;\n this.setSteps(steps);\n }\n\n public getState(): State {\n if (!this.store.size) {\n return { ...defaultState };\n }\n\n return {\n action: this.store.get('action') || '',\n controlled: this.store.get('controlled') || false,\n index: parseInt(this.store.get('index'), 10),\n lifecycle: this.store.get('lifecycle') || '',\n size: this.store.get('size') || 0,\n status: (this.store.get('status') as Status) || '',\n };\n }\n\n private getNextState(state: Partial, force: boolean = false): State {\n const { action, controlled, index, size, status } = this.getState();\n const newIndex = is.number(state.index) ? state.index : index;\n const nextIndex = controlled && !force ? index : Math.min(Math.max(newIndex, 0), size);\n\n return {\n action: state.action ?? action,\n controlled,\n index: nextIndex,\n lifecycle: state.lifecycle ?? LIFECYCLE.INIT,\n size: state.size ?? size,\n status: nextIndex === size ? STATUS.FINISHED : state.status ?? status,\n };\n }\n\n private getSteps(): Array {\n const steps = this.data.get('steps');\n\n return Array.isArray(steps) ? steps : [];\n }\n\n private hasUpdatedState(oldState: State): boolean {\n const before = JSON.stringify(oldState);\n const after = JSON.stringify(this.getState());\n\n return before !== after;\n }\n\n private setState(nextState: Partial, initial: boolean = false) {\n const state = this.getState();\n\n const { action, index, lifecycle, size, status } = {\n ...state,\n ...nextState,\n };\n\n this.store.set('action', action);\n this.store.set('index', index);\n this.store.set('lifecycle', lifecycle);\n this.store.set('size', size);\n this.store.set('status', status);\n\n if (initial) {\n this.store.set('controlled', nextState.controlled);\n this.store.set('continuous', nextState.continuous);\n }\n\n /* istanbul ignore else */\n if (this.listener && this.hasUpdatedState(state)) {\n this.listener(this.getState());\n }\n }\n\n public addListener = (listener: Listener) => {\n this.listener = listener;\n };\n\n public setSteps = (steps: Array) => {\n const { size, status } = this.getState();\n const state = {\n size: steps.length,\n status,\n };\n\n this.data.set('steps', steps);\n\n if (status === STATUS.WAITING && !size && steps.length) {\n state.status = STATUS.RUNNING;\n }\n\n this.setState(state);\n };\n\n public getHelpers(): StoreHelpers {\n return {\n close: this.close,\n go: this.go,\n info: this.info,\n next: this.next,\n open: this.open,\n prev: this.prev,\n reset: this.reset,\n skip: this.skip,\n };\n }\n\n public close = () => {\n const { index, status } = this.getState();\n\n if (status !== STATUS.RUNNING) {\n return;\n }\n\n this.setState({\n ...this.getNextState({ action: ACTIONS.CLOSE, index: index + 1 }),\n });\n };\n\n public go = (nextIndex: number) => {\n const { controlled, status } = this.getState();\n\n if (controlled || status !== STATUS.RUNNING) {\n return;\n }\n\n const step = this.getSteps()[nextIndex];\n\n this.setState({\n ...this.getNextState({ action: ACTIONS.GO, index: nextIndex }),\n status: step ? status : STATUS.FINISHED,\n });\n };\n\n public info = (): AnyObject => this.getState();\n\n public next = () => {\n const { index, status } = this.getState();\n\n if (status !== STATUS.RUNNING) {\n return;\n }\n\n this.setState(this.getNextState({ action: ACTIONS.NEXT, index: index + 1 }));\n };\n\n public open = () => {\n const { status } = this.getState();\n\n if (status !== STATUS.RUNNING) {\n return;\n }\n\n this.setState({\n ...this.getNextState({ action: ACTIONS.UPDATE, lifecycle: LIFECYCLE.TOOLTIP }),\n });\n };\n\n public prev = () => {\n const { index, status } = this.getState();\n\n if (status !== STATUS.RUNNING) {\n return;\n }\n\n this.setState({\n ...this.getNextState({ action: ACTIONS.PREV, index: index - 1 }),\n });\n };\n\n public reset = (restart = false) => {\n const { controlled } = this.getState();\n\n if (controlled) {\n return;\n }\n\n this.setState({\n ...this.getNextState({ action: ACTIONS.RESET, index: 0 }),\n status: restart ? STATUS.RUNNING : STATUS.READY,\n });\n };\n\n public skip = () => {\n const { status } = this.getState();\n\n if (status !== STATUS.RUNNING) {\n return;\n }\n\n this.setState({\n action: ACTIONS.SKIP,\n lifecycle: LIFECYCLE.INIT,\n status: STATUS.SKIPPED,\n });\n };\n\n public start = (nextIndex?: number) => {\n const { index, size } = this.getState();\n\n this.setState({\n ...this.getNextState(\n {\n action: ACTIONS.START,\n index: is.number(nextIndex) ? nextIndex : index,\n },\n true,\n ),\n status: size ? STATUS.RUNNING : STATUS.WAITING,\n });\n };\n\n public stop = (advance = false) => {\n const { index, status } = this.getState();\n\n if (([STATUS.FINISHED, STATUS.SKIPPED] as Array).includes(status)) {\n return;\n }\n\n this.setState({\n ...this.getNextState({ action: ACTIONS.STOP, index: index + (advance ? 1 : 0) }),\n status: STATUS.PAUSED,\n });\n };\n\n public update = (state: Partial) => {\n if (!hasValidKeys(state, validKeys)) {\n throw new Error(`State is not valid. Valid keys: ${validKeys.join(', ')}`);\n }\n\n this.setState({\n ...this.getNextState(\n {\n ...this.getState(),\n ...state,\n action: state.action ?? ACTIONS.UPDATE,\n },\n true,\n ),\n });\n };\n}\n\nexport default function createStore(options?: StoreOptions) {\n return new Store(options);\n}\n","interface ScopeOptions {\n code?: string;\n selector: string | null;\n}\n\nexport default class Scope {\n element: HTMLElement;\n options: ScopeOptions;\n\n constructor(element: HTMLElement, options: ScopeOptions) {\n if (!(element instanceof HTMLElement)) {\n throw new TypeError('Invalid parameter: element must be an HTMLElement');\n }\n\n this.element = element;\n this.options = options;\n\n window.addEventListener('keydown', this.handleKeyDown, false);\n\n this.setFocus();\n }\n\n canBeTabbed = (element: HTMLElement): boolean => {\n const { tabIndex } = element;\n\n if (tabIndex === null || tabIndex < 0) {\n return false;\n }\n\n return this.canHaveFocus(element);\n };\n\n canHaveFocus = (element: HTMLElement): boolean => {\n const validTabNodes = /input|select|textarea|button|object/;\n const nodeName = element.nodeName.toLowerCase();\n\n const isValid =\n (validTabNodes.test(nodeName) && !element.getAttribute('disabled')) ||\n (nodeName === 'a' && !!element.getAttribute('href'));\n\n return isValid && this.isVisible(element);\n };\n\n findValidTabElements = (): Array =>\n [].slice.call(this.element.querySelectorAll('*'), 0).filter(this.canBeTabbed);\n\n handleKeyDown = (event: KeyboardEvent) => {\n const { code = 'Tab' } = this.options;\n\n /* istanbul ignore else */\n if (event.code === code) {\n this.interceptTab(event);\n }\n };\n\n interceptTab = (event: KeyboardEvent) => {\n event.preventDefault();\n const elements = this.findValidTabElements();\n const { shiftKey } = event;\n\n if (!elements.length) {\n return;\n }\n\n let x = document.activeElement ? elements.indexOf(document.activeElement as HTMLElement) : 0;\n\n if (x === -1 || (!shiftKey && x + 1 === elements.length)) {\n x = 0;\n } else if (shiftKey && x === 0) {\n x = elements.length - 1;\n } else {\n x += shiftKey ? -1 : 1;\n }\n\n elements[x].focus();\n };\n\n // eslint-disable-next-line class-methods-use-this\n isHidden = (element: HTMLElement) => {\n const noSize = element.offsetWidth <= 0 && element.offsetHeight <= 0;\n const style = window.getComputedStyle(element);\n\n if (noSize && !element.innerHTML) {\n return true;\n }\n\n return (\n (noSize && style.getPropertyValue('overflow') !== 'visible') ||\n style.getPropertyValue('display') === 'none'\n );\n };\n\n isVisible = (element: HTMLElement): boolean => {\n let parentElement = element;\n\n while (parentElement) {\n /* istanbul ignore else */\n if (parentElement instanceof HTMLElement) {\n if (parentElement === document.body) {\n break;\n }\n\n /* istanbul ignore else */\n if (this.isHidden(parentElement)) {\n return false;\n }\n\n // @ts-ignore\n parentElement = parentElement.parentNode;\n }\n }\n\n return true;\n };\n\n removeScope = () => {\n window.removeEventListener('keydown', this.handleKeyDown);\n };\n\n checkFocus = (target: HTMLElement) => {\n if (document.activeElement !== target) {\n target.focus();\n window.requestAnimationFrame(() => this.checkFocus(target));\n }\n };\n\n setFocus = () => {\n const { selector } = this.options;\n\n if (!selector) {\n return;\n }\n\n const target = this.element.querySelector(selector);\n\n /* istanbul ignore else */\n if (target) {\n window.requestAnimationFrame(() => this.checkFocus(target as HTMLElement));\n }\n };\n}\n","import * as React from 'react';\nimport innerText from 'react-innertext';\nimport is from 'is-lite';\n\nimport { BeaconProps } from '~/types';\n\nexport default class JoyrideBeacon extends React.Component {\n private beacon: HTMLElement | null = null;\n\n constructor(props: BeaconProps) {\n super(props);\n\n if (props.beaconComponent) {\n return;\n }\n\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n\n style.id = 'joyride-beacon-animation';\n\n if (props.nonce) {\n style.setAttribute('nonce', props.nonce);\n }\n\n const css = `\n @keyframes joyride-beacon-inner {\n 20% {\n opacity: 0.9;\n }\n \n 90% {\n opacity: 0.7;\n }\n }\n \n @keyframes joyride-beacon-outer {\n 0% {\n transform: scale(1);\n }\n \n 45% {\n opacity: 0.7;\n transform: scale(0.75);\n }\n \n 100% {\n opacity: 0.9;\n transform: scale(1);\n }\n }\n `;\n\n style.appendChild(document.createTextNode(css));\n\n head.appendChild(style);\n }\n\n componentDidMount() {\n const { shouldFocus } = this.props;\n\n if (process.env.NODE_ENV !== 'production') {\n if (!is.domElement(this.beacon)) {\n console.warn('beacon is not a valid DOM element'); // eslint-disable-line no-console\n }\n }\n\n setTimeout(() => {\n if (is.domElement(this.beacon) && shouldFocus) {\n this.beacon.focus();\n }\n }, 0);\n }\n\n componentWillUnmount() {\n const style = document.getElementById('joyride-beacon-animation');\n\n if (style?.parentNode) {\n style.parentNode.removeChild(style);\n }\n }\n\n setBeaconRef = (c: HTMLElement | null) => {\n this.beacon = c;\n };\n\n render() {\n const {\n beaconComponent,\n continuous,\n index,\n isLastStep,\n locale,\n onClickOrHover,\n size,\n step,\n styles,\n } = this.props;\n const title = is.string(locale.open) ? locale.open : innerText(locale.open);\n const sharedProps = {\n 'aria-label': title,\n onClick: onClickOrHover,\n onMouseEnter: onClickOrHover,\n ref: this.setBeaconRef,\n title,\n };\n let component;\n\n if (beaconComponent) {\n const BeaconComponent = beaconComponent;\n\n component = (\n \n {\n isActive = false;\n resizeTimeout?: number;\n scrollTimeout?: number;\n scrollParent?: Document | Element;\n state = {\n isScrolling: false,\n mouseOverSpotlight: false,\n showSpotlight: true,\n };\n\n componentDidMount() {\n const { debug, disableScrolling, disableScrollParentFix = false, target } = this.props;\n const element = getElement(target);\n\n this.scrollParent = getScrollParent(element ?? document.body, disableScrollParentFix, true);\n this.isActive = true;\n\n /* istanbul ignore else */\n if (process.env.NODE_ENV !== 'production') {\n /* istanbul ignore else */\n if (!disableScrolling && hasCustomScrollParent(element, true)) {\n log({\n title: 'step has a custom scroll parent and can cause trouble with scrolling',\n data: [{ key: 'parent', value: this.scrollParent }],\n debug,\n });\n }\n }\n\n window.addEventListener('resize', this.handleResize);\n }\n\n componentDidUpdate(previousProps: OverlayProps) {\n const { lifecycle, spotlightClicks } = this.props;\n const { changed } = treeChanges(previousProps, this.props);\n\n /* istanbul ignore else */\n if (changed('lifecycle', LIFECYCLE.TOOLTIP)) {\n this.scrollParent?.addEventListener('scroll', this.handleScroll, { passive: true });\n\n setTimeout(() => {\n const { isScrolling } = this.state;\n\n if (!isScrolling) {\n this.updateState({ showSpotlight: true });\n }\n }, 100);\n }\n\n if (changed('spotlightClicks') || changed('disableOverlay') || changed('lifecycle')) {\n if (spotlightClicks && lifecycle === LIFECYCLE.TOOLTIP) {\n window.addEventListener('mousemove', this.handleMouseMove, false);\n } else if (lifecycle !== LIFECYCLE.TOOLTIP) {\n window.removeEventListener('mousemove', this.handleMouseMove);\n }\n }\n }\n\n componentWillUnmount() {\n this.isActive = false;\n\n window.removeEventListener('mousemove', this.handleMouseMove);\n window.removeEventListener('resize', this.handleResize);\n\n clearTimeout(this.resizeTimeout);\n clearTimeout(this.scrollTimeout);\n this.scrollParent?.removeEventListener('scroll', this.handleScroll);\n }\n\n get spotlightStyles() {\n const { showSpotlight } = this.state;\n const {\n disableScrollParentFix = false,\n spotlightClicks,\n spotlightPadding = 0,\n styles,\n target,\n } = this.props;\n const element = getElement(target);\n const elementRect = getClientRect(element);\n const isFixedTarget = hasPosition(element);\n const top = getElementPosition(element, spotlightPadding, disableScrollParentFix);\n\n return {\n ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight),\n height: Math.round((elementRect?.height ?? 0) + spotlightPadding * 2),\n left: Math.round((elementRect?.left ?? 0) - spotlightPadding),\n opacity: showSpotlight ? 1 : 0,\n pointerEvents: spotlightClicks ? 'none' : 'auto',\n position: isFixedTarget ? 'fixed' : 'absolute',\n top,\n transition: 'opacity 0.2s',\n width: Math.round((elementRect?.width ?? 0) + spotlightPadding * 2),\n } satisfies React.CSSProperties;\n }\n\n handleMouseMove = (event: MouseEvent) => {\n const { mouseOverSpotlight } = this.state;\n const { height, left, position, top, width } = this.spotlightStyles;\n\n const offsetY = position === 'fixed' ? event.clientY : event.pageY;\n const offsetX = position === 'fixed' ? event.clientX : event.pageX;\n const inSpotlightHeight = offsetY >= top && offsetY <= top + height;\n const inSpotlightWidth = offsetX >= left && offsetX <= left + width;\n const inSpotlight = inSpotlightWidth && inSpotlightHeight;\n\n if (inSpotlight !== mouseOverSpotlight) {\n this.updateState({ mouseOverSpotlight: inSpotlight });\n }\n };\n\n handleScroll = () => {\n const { target } = this.props;\n const element = getElement(target);\n\n if (this.scrollParent !== document) {\n const { isScrolling } = this.state;\n\n if (!isScrolling) {\n this.updateState({ isScrolling: true, showSpotlight: false });\n }\n\n clearTimeout(this.scrollTimeout);\n\n this.scrollTimeout = window.setTimeout(() => {\n this.updateState({ isScrolling: false, showSpotlight: true });\n }, 50);\n } else if (hasPosition(element, 'sticky')) {\n this.updateState({});\n }\n };\n\n handleResize = () => {\n clearTimeout(this.resizeTimeout);\n\n this.resizeTimeout = window.setTimeout(() => {\n if (!this.isActive) {\n return;\n }\n\n this.forceUpdate();\n }, 100);\n };\n\n updateState(state: Partial) {\n if (!this.isActive) {\n return;\n }\n\n this.setState(previousState => ({ ...previousState, ...state }));\n }\n\n render() {\n const { mouseOverSpotlight, showSpotlight } = this.state;\n const { disableOverlay, disableOverlayClose, lifecycle, onClickOverlay, placement, styles } =\n this.props;\n\n if (disableOverlay || lifecycle !== LIFECYCLE.TOOLTIP) {\n return null;\n }\n\n let baseStyles = styles.overlay;\n\n /* istanbul ignore else */\n if (isLegacy()) {\n baseStyles = placement === 'center' ? styles.overlayLegacyCenter : styles.overlayLegacy;\n }\n\n const stylesOverlay: React.CSSProperties = {\n cursor: disableOverlayClose ? 'default' : 'pointer',\n height: getDocumentHeight(),\n pointerEvents: mouseOverSpotlight ? 'none' : 'auto',\n ...baseStyles,\n };\n\n let spotlight = placement !== 'center' && showSpotlight && (\n {spotlight}
;\n delete stylesOverlay.backgroundColor;\n }\n\n return (\n \n {spotlight}\n \n );\n }\n}\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport { canUseDOM } from '~/modules/dom';\nimport { isReact16 } from '~/modules/helpers';\n\ninterface Props {\n children: React.ReactElement;\n id: string;\n}\n\nexport default class JoyridePortal extends React.Component {\n node: HTMLElement | null = null;\n\n componentDidMount() {\n const { id } = this.props;\n\n if (!canUseDOM()) {\n return;\n }\n\n this.node = document.createElement('div');\n this.node.id = id;\n\n document.body.appendChild(this.node);\n\n if (!isReact16) {\n this.renderReact15();\n }\n }\n\n componentDidUpdate() {\n if (!canUseDOM()) {\n return;\n }\n\n if (!isReact16) {\n this.renderReact15();\n }\n }\n\n componentWillUnmount() {\n if (!canUseDOM() || !this.node) {\n return;\n }\n\n if (!isReact16) {\n // eslint-disable-next-line react/no-deprecated\n ReactDOM.unmountComponentAtNode(this.node);\n }\n\n if (this.node.parentNode === document.body) {\n document.body.removeChild(this.node);\n this.node = null;\n }\n }\n\n renderReact15() {\n if (!canUseDOM()) {\n return;\n }\n\n const { children } = this.props;\n\n if (this.node) {\n ReactDOM.unstable_renderSubtreeIntoContainer(this, children, this.node);\n }\n }\n\n renderReact16() {\n if (!canUseDOM() || !isReact16) {\n return null;\n }\n\n const { children } = this.props;\n\n if (!this.node) {\n return null;\n }\n\n return ReactDOM.createPortal(children, this.node);\n }\n\n render() {\n if (!isReact16) {\n return null;\n }\n\n return this.renderReact16();\n }\n}\n","import React, { CSSProperties } from 'react';\n\ninterface Props {\n styles: CSSProperties;\n}\n\nfunction JoyrideTooltipCloseButton({ styles, ...props }: Props) {\n const { color, height, width, ...style } = styles;\n\n return (\n \n \n \n \n \n \n );\n}\n\nexport default JoyrideTooltipCloseButton;\n","import * as React from 'react';\nimport innerText from 'react-innertext';\n\nimport { TooltipRenderProps } from '~/types';\n\nimport CloseButton from './CloseButton';\n\nfunction JoyrideTooltipContainer(props: TooltipRenderProps) {\n const {\n backProps,\n closeProps,\n continuous,\n index,\n isLastStep,\n primaryProps,\n size,\n skipProps,\n step,\n tooltipProps,\n } = props;\n const {\n content,\n hideBackButton,\n hideCloseButton,\n hideFooter,\n locale,\n showProgress,\n showSkipButton,\n styles,\n title,\n } = step;\n const { back, close, last, next, skip } = locale;\n const output: Record = {\n primary: close,\n };\n\n if (continuous) {\n output.primary = isLastStep ? last : next;\n\n if (showProgress) {\n output.primary = (\n \n {output.primary} ({index + 1}/{size})\n \n );\n }\n }\n\n if (showSkipButton && !isLastStep) {\n output.skip = (\n \n {skip}\n \n );\n }\n\n if (!hideBackButton && index > 0) {\n output.back = (\n \n {back}\n \n );\n }\n\n output.close = !hideCloseButton && (\n \n \n {title && (\n
\n {title}\n \n )}\n
{content}
\n
\n
{output.skip}
\n {output.back}\n
\n {output.primary}\n \n {\n handleClickBack = (event: React.MouseEvent) => {\n event.preventDefault();\n const { helpers } = this.props;\n\n helpers.prev();\n };\n\n handleClickClose = (event: React.MouseEvent) => {\n event.preventDefault();\n const { helpers } = this.props;\n\n helpers.close();\n };\n\n handleClickPrimary = (event: React.MouseEvent) => {\n event.preventDefault();\n const { continuous, helpers } = this.props;\n\n if (!continuous) {\n helpers.close();\n\n return;\n }\n\n helpers.next();\n };\n\n handleClickSkip = (event: React.MouseEvent) => {\n event.preventDefault();\n const { helpers } = this.props;\n\n helpers.skip();\n };\n\n getElementsProps = () => {\n const { continuous, isLastStep, setTooltipRef, step } = this.props;\n\n const back = getText(step.locale.back);\n const close = getText(step.locale.close);\n const last = getText(step.locale.last);\n const next = getText(step.locale.next);\n const skip = getText(step.locale.skip);\n\n let primaryText = continuous ? next : close;\n\n if (isLastStep) {\n primaryText = last;\n }\n\n return {\n backProps: {\n 'aria-label': back,\n 'data-action': 'back',\n onClick: this.handleClickBack,\n role: 'button',\n title: back,\n },\n closeProps: {\n 'aria-label': close,\n 'data-action': 'close',\n onClick: this.handleClickClose,\n role: 'button',\n title: close,\n },\n primaryProps: {\n 'aria-label': primaryText,\n 'data-action': 'primary',\n onClick: this.handleClickPrimary,\n role: 'button',\n title: primaryText,\n },\n skipProps: {\n 'aria-label': skip,\n 'data-action': 'skip',\n onClick: this.handleClickSkip,\n role: 'button',\n title: skip,\n },\n tooltipProps: {\n 'aria-modal': true,\n ref: setTooltipRef,\n role: 'alertdialog',\n },\n };\n };\n\n render() {\n const { continuous, index, isLastStep, setTooltipRef, size, step } = this.props;\n const { beaconComponent, tooltipComponent, ...cleanStep } = step;\n let component;\n\n if (tooltipComponent) {\n const renderProps = {\n ...this.getElementsProps(),\n continuous,\n index,\n isLastStep,\n size,\n step: cleanStep,\n setTooltipRef,\n };\n\n const TooltipComponent = tooltipComponent;\n\n component = >[0];\n\nexport default class JoyrideStep extends React.Component {\n beaconPopper: PopperData | null = null;\n scope: Scope | null = null;\n tooltip: HTMLElement | null = null;\n tooltipPopper: PopperData | null = null;\n\n componentDidMount() {\n const { debug, index } = this.props;\n\n log({\n title: `step:${index}`,\n data: [{ key: 'props', value: this.props }],\n debug,\n });\n }\n\n componentDidUpdate(previousProps: StepProps) {\n const {\n action,\n callback,\n continuous,\n controlled,\n debug,\n index,\n lifecycle,\n size,\n status,\n step,\n update,\n } = this.props;\n const { changed, changedFrom } = treeChanges(previousProps, this.props);\n const state = { action, controlled, index, lifecycle, size, status };\n\n const skipBeacon =\n continuous && action !== ACTIONS.CLOSE && (index > 0 || action === ACTIONS.PREV);\n const hasStoreChanged =\n changed('action') || changed('index') || changed('lifecycle') || changed('status');\n const isInitial = changedFrom('lifecycle', [LIFECYCLE.TOOLTIP, LIFECYCLE.INIT], LIFECYCLE.INIT);\n const isAfterAction = changed('action', [\n ACTIONS.NEXT,\n ACTIONS.PREV,\n ACTIONS.SKIP,\n ACTIONS.CLOSE,\n ]);\n const isControlled = controlled && index === previousProps.index;\n\n if (isAfterAction && (isInitial || isControlled)) {\n callback({\n ...state,\n index: previousProps.index,\n lifecycle: LIFECYCLE.COMPLETE,\n step: previousProps.step,\n type: EVENTS.STEP_AFTER,\n });\n }\n\n if (\n step.placement === 'center' &&\n status === STATUS.RUNNING &&\n changed('index') &&\n action !== ACTIONS.START &&\n lifecycle === LIFECYCLE.INIT\n ) {\n update({ lifecycle: LIFECYCLE.READY });\n }\n\n if (hasStoreChanged) {\n const element = getElement(step.target);\n const elementExists = !!element;\n const hasRenderedTarget = elementExists && isElementVisible(element);\n\n if (hasRenderedTarget) {\n if (\n changedFrom('status', STATUS.READY, STATUS.RUNNING) ||\n changedFrom('lifecycle', LIFECYCLE.INIT, LIFECYCLE.READY)\n ) {\n callback({\n ...state,\n step,\n type: EVENTS.STEP_BEFORE,\n });\n }\n } else {\n // eslint-disable-next-line no-console\n console.warn(elementExists ? 'Target not visible' : 'Target not mounted', step);\n callback({\n ...state,\n type: EVENTS.TARGET_NOT_FOUND,\n step,\n });\n\n if (!controlled) {\n update({ index: index + (action === ACTIONS.PREV ? -1 : 1) });\n }\n }\n }\n\n if (changedFrom('lifecycle', LIFECYCLE.INIT, LIFECYCLE.READY)) {\n update({ lifecycle: hideBeacon(step) || skipBeacon ? LIFECYCLE.TOOLTIP : LIFECYCLE.BEACON });\n }\n\n if (changed('index')) {\n log({\n title: `step:${lifecycle}`,\n data: [{ key: 'props', value: this.props }],\n debug,\n });\n }\n\n /* istanbul ignore else */\n if (changed('lifecycle', LIFECYCLE.BEACON)) {\n callback({\n ...state,\n step,\n type: EVENTS.BEACON,\n });\n }\n\n if (changed('lifecycle', LIFECYCLE.TOOLTIP)) {\n callback({\n ...state,\n step,\n type: EVENTS.TOOLTIP,\n });\n\n if (this.tooltip) {\n this.scope = new Scope(this.tooltip, { selector: '[data-action=primary]' });\n this.scope.setFocus();\n }\n }\n\n if (changedFrom('lifecycle', [LIFECYCLE.TOOLTIP, LIFECYCLE.INIT], LIFECYCLE.INIT)) {\n this.scope?.removeScope();\n this.beaconPopper = null;\n this.tooltipPopper = null;\n }\n }\n\n componentWillUnmount() {\n this.scope?.removeScope();\n }\n\n /**\n * Beacon click/hover event listener\n */\n handleClickHoverBeacon = (event: React.MouseEvent) => {\n const { step, update } = this.props;\n\n if (event.type === 'mouseenter' && step.event !== 'hover') {\n return;\n }\n\n update({ lifecycle: LIFECYCLE.TOOLTIP });\n };\n\n handleClickOverlay = () => {\n const { helpers, step } = this.props;\n\n if (!step.disableOverlayClose) {\n helpers.close();\n }\n };\n\n setTooltipRef = (element: HTMLElement) => {\n this.tooltip = element;\n };\n\n setPopper: FloaterProps['getPopper'] = (popper, type) => {\n const { action, setPopper, update } = this.props;\n\n if (type === 'wrapper') {\n this.beaconPopper = popper;\n } else {\n this.tooltipPopper = popper;\n }\n\n setPopper?.(popper, type);\n\n if (this.beaconPopper && this.tooltipPopper) {\n update({\n action,\n lifecycle: LIFECYCLE.READY,\n });\n }\n };\n\n get open() {\n const { lifecycle, step } = this.props;\n\n return hideBeacon(step) || lifecycle === LIFECYCLE.TOOLTIP;\n }\n\n renderTooltip = (renderProps: RenderProps) => {\n const { continuous, helpers, index, size, step } = this.props;\n\n return (\n {\n private readonly helpers: StoreHelpers;\n private readonly store: ReturnType;\n private beaconPopper: any;\n private tooltipPopper: any;\n\n static defaultProps = defaultProps;\n\n constructor(props: Props) {\n super(props);\n\n const { debug, getHelpers, run, stepIndex } = props;\n\n this.store = createStore({\n ...props,\n controlled: run && is.number(stepIndex),\n });\n this.helpers = this.store.getHelpers();\n\n const { addListener } = this.store;\n\n log({\n title: 'init',\n data: [\n { key: 'props', value: this.props },\n { key: 'state', value: this.state },\n ],\n debug,\n });\n\n // Sync the store to this component's state.\n addListener(this.syncState);\n\n if (getHelpers) {\n getHelpers(this.helpers);\n }\n\n this.state = this.store.getState();\n }\n\n componentDidMount() {\n if (!canUseDOM()) {\n return;\n }\n\n const { debug, disableCloseOnEsc, run, steps } = this.props;\n const { start } = this.store;\n\n if (validateSteps(steps, debug) && run) {\n start();\n }\n\n /* istanbul ignore else */\n if (!disableCloseOnEsc) {\n document.body.addEventListener('keydown', this.handleKeyboard, { passive: true });\n }\n }\n\n componentDidUpdate(previousProps: Props, previousState: State) {\n if (!canUseDOM()) {\n return;\n }\n\n const { action, controlled, index, lifecycle, status } = this.state;\n const { debug, run, stepIndex, steps } = this.props;\n const { stepIndex: previousStepIndex, steps: previousSteps } = previousProps;\n const { reset, setSteps, start, stop, update } = this.store;\n const { changed: changedProps } = treeChanges(previousProps, this.props);\n const { changed, changedFrom } = treeChanges(previousState, this.state);\n const step = getMergedStep(steps[index], this.props);\n\n const stepsChanged = !isEqual(previousSteps, steps);\n const stepIndexChanged = is.number(stepIndex) && changedProps('stepIndex');\n const target = getElement(step.target);\n\n if (stepsChanged) {\n if (validateSteps(steps, debug)) {\n setSteps(steps);\n } else {\n // eslint-disable-next-line no-console\n console.warn('Steps are not valid', steps);\n }\n }\n\n /* istanbul ignore else */\n if (changedProps('run')) {\n if (run) {\n start(stepIndex);\n } else {\n stop();\n }\n }\n\n /* istanbul ignore else */\n if (stepIndexChanged) {\n let nextAction: Actions =\n is.number(previousStepIndex) && previousStepIndex < stepIndex ? ACTIONS.NEXT : ACTIONS.PREV;\n\n if (action === ACTIONS.STOP) {\n nextAction = ACTIONS.START;\n }\n\n if (!([STATUS.FINISHED, STATUS.SKIPPED] as Array).includes(status)) {\n update({\n action: action === ACTIONS.CLOSE ? ACTIONS.CLOSE : nextAction,\n index: stepIndex,\n lifecycle: LIFECYCLE.INIT,\n });\n }\n }\n\n // Update the index if the first step is not found\n if (!controlled && status === STATUS.RUNNING && index === 0 && !target) {\n this.store.update({ index: index + 1 });\n this.callback({\n ...this.state,\n type: EVENTS.TARGET_NOT_FOUND,\n step,\n });\n }\n\n const callbackData = {\n ...this.state,\n index,\n step,\n };\n const isAfterAction = changed('action', [\n ACTIONS.NEXT,\n ACTIONS.PREV,\n ACTIONS.SKIP,\n ACTIONS.CLOSE,\n ]);\n\n if (isAfterAction && changed('status', STATUS.PAUSED)) {\n const previousStep = getMergedStep(steps[previousState.index], this.props);\n\n this.callback({\n ...callbackData,\n index: previousState.index,\n lifecycle: LIFECYCLE.COMPLETE,\n step: previousStep,\n type: EVENTS.STEP_AFTER,\n });\n }\n\n if (changed('status', [STATUS.FINISHED, STATUS.SKIPPED])) {\n const previousStep = getMergedStep(steps[previousState.index], this.props);\n\n if (!controlled) {\n this.callback({\n ...callbackData,\n index: previousState.index,\n lifecycle: LIFECYCLE.COMPLETE,\n step: previousStep,\n type: EVENTS.STEP_AFTER,\n });\n }\n\n this.callback({\n ...callbackData,\n type: EVENTS.TOUR_END,\n // Return the last step when the tour is finished\n step: previousStep,\n index: previousState.index,\n });\n reset();\n } else if (changedFrom('status', [STATUS.IDLE, STATUS.READY], STATUS.RUNNING)) {\n this.callback({\n ...callbackData,\n type: EVENTS.TOUR_START,\n });\n } else if (changed('status') || changed('action', ACTIONS.RESET)) {\n this.callback({\n ...callbackData,\n type: EVENTS.TOUR_STATUS,\n });\n }\n\n this.scrollToStep(previousState);\n\n if (step.placement === 'center' && status === STATUS.RUNNING && lifecycle === LIFECYCLE.INIT) {\n this.store.update({ lifecycle: LIFECYCLE.READY });\n }\n }\n\n componentWillUnmount() {\n const { disableCloseOnEsc } = this.props;\n\n /* istanbul ignore else */\n if (!disableCloseOnEsc) {\n document.body.removeEventListener('keydown', this.handleKeyboard);\n }\n }\n\n /**\n * Trigger the callback.\n */\n callback = (data: CallBackProps) => {\n const { callback } = this.props;\n\n /* istanbul ignore else */\n if (is.function(callback)) {\n callback(data);\n }\n };\n\n /**\n * Keydown event listener\n */\n handleKeyboard = (event: KeyboardEvent) => {\n const { index, lifecycle } = this.state;\n const { steps } = this.props;\n const step = steps[index];\n\n if (lifecycle === LIFECYCLE.TOOLTIP) {\n if (event.code === 'Escape' && step && !step.disableCloseOnEsc) {\n this.store.close();\n }\n }\n };\n\n /**\n * Sync the store with the component's state\n */\n syncState = (state: State) => {\n this.setState(state);\n };\n\n setPopper: FloaterProps['getPopper'] = (popper, type) => {\n if (type === 'wrapper') {\n this.beaconPopper = popper;\n } else {\n this.tooltipPopper = popper;\n }\n };\n\n scrollToStep(previousState: State) {\n const { index, lifecycle, status } = this.state;\n const {\n debug,\n disableScrollParentFix = false,\n scrollDuration,\n scrollOffset = 20,\n scrollToFirstStep = false,\n steps,\n } = this.props;\n const step = getMergedStep(steps[index], this.props);\n\n const target = getElement(step.target);\n const shouldScrollToStep = shouldScroll({\n isFirstStep: index === 0,\n lifecycle,\n previousLifecycle: previousState.lifecycle,\n scrollToFirstStep,\n step,\n target,\n });\n\n if (status === STATUS.RUNNING && shouldScrollToStep) {\n const hasCustomScroll = hasCustomScrollParent(target, disableScrollParentFix);\n const scrollParent = getScrollParent(target, disableScrollParentFix);\n let scrollY = Math.floor(getScrollTo(target, scrollOffset, disableScrollParentFix)) || 0;\n\n log({\n title: 'scrollToStep',\n data: [\n { key: 'index', value: index },\n { key: 'lifecycle', value: lifecycle },\n { key: 'status', value: status },\n ],\n debug,\n });\n\n /* istanbul ignore else */\n if (lifecycle === LIFECYCLE.BEACON && this.beaconPopper) {\n const { placement, popper } = this.beaconPopper;\n\n /* istanbul ignore else */\n if (!['bottom'].includes(placement) && !hasCustomScroll) {\n scrollY = Math.floor(popper.top - scrollOffset);\n }\n } else if (lifecycle === LIFECYCLE.TOOLTIP && this.tooltipPopper) {\n const { flipped, placement, popper } = this.tooltipPopper;\n\n if (['top', 'right', 'left'].includes(placement) && !flipped && !hasCustomScroll) {\n scrollY = Math.floor(popper.top - scrollOffset);\n } else {\n scrollY -= step.spotlightPadding;\n }\n }\n\n scrollY = scrollY >= 0 ? scrollY : 0;\n\n /* istanbul ignore else */\n if (status === STATUS.RUNNING) {\n scrollTo(scrollY, { element: scrollParent as Element, duration: scrollDuration });\n }\n }\n }\n\n render() {\n if (!canUseDOM()) {\n return null;\n }\n\n const { index, status } = this.state;\n const {\n continuous = false,\n debug = false,\n nonce,\n scrollToFirstStep = false,\n steps,\n } = this.props;\n let output;\n\n if (status === STATUS.RUNNING && steps[index]) {\n const step = getMergedStep(steps[index], this.props);\n\n output = (\n {output}
;\n }\n}\n\nexport default Joyride;\n","import { Modal } from 'react-bootstrap';\nimport PropTypes from 'prop-types';\nimport { ReactElement } from 'react';\n\ninterface Props {\n\theaderContent: ReactElement,\n\tchildren: ReactElement,\n\tfooterContent: ReactElement,\n\topen: boolean,\n\tonHide: () => void\n}\n\nconst SimplifiedModal = (props: Props) => {\n\tconst { headerContent, children, footerContent, open, onHide } = props;\n\n\treturn (\n\t\t\n\t\t\t{headerContent && (\n\t\t\t\t\n\t\t\t\t\t{headerContent} \n\t\t\t\t \n\t\t\t)}\n\t\t\t{children} \n\t\t\t{footerContent && {footerContent} }\n\t\t \n\t);\n};\n\nSimplifiedModal.propTypes = {\n\theaderContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\topen: PropTypes.bool,\n\tfooterContent: PropTypes.element,\n\tonHide: PropTypes.func,\n};\n\nSimplifiedModal.defaultProps = {\n\theaderContent: null,\n\topen: false,\n\tfooterContent: null,\n};\n\nexport default SimplifiedModal;\n","import React, { ReactNode, useEffect, useState } from 'react';\nimport { Button } from 'react-bootstrap';\nimport Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faQuestion } from '@fortawesome/free-solid-svg-icons';\nimport SimplifiedModal from 'components/SimplifiedModal';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\n\ninterface Props {\n\tsteps: Array,\n\tstart: boolean,\n\tisFirstTime: boolean,\n\tisBtnVisible: boolean\n}\n\nconst JoyrideOnboard = (props: Props) => {\n\tconst { isFirstTime, isBtnVisible, steps } = props;\n\tconst { t } = useTranslation(['components', 'common']);\n\tconst [run, setRun] = useState(false);\n\tconst [modal, setModal] = useState(false);\n\n\tconst locales = {\n\t\tback: t('common:back'),\n\t\tclose: t('common:close'),\n\t\tlast: t('common:finalize'),\n\t\tnext: t('common:next'),\n\t\topen: t('common:open'),\n\t\tskip: t('common:skip'),\n\t};\n\n\tuseEffect(() => {\n\t\tif (localStorage.getItem('tutorialDone') !== \"1\") {\n\t\t\tsetModal(isFirstTime);\n\t\t}\n\t}, []);\n\n\tconst handleClickStart = (event: React.MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tsetRun(true);\n\t\tsetModal(false);\n\t};\n\n\tconst handleJoyrideCallback = (data: CallBackProps) => {\n\t\tconst { status } = data;\n\t\tif (status === STATUS.FINISHED || status === STATUS.SKIPPED) {\n\t\t\tsetRun(false);\n\t\t\tlocalStorage.setItem('tutorialDone', \"1\");\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{isBtnVisible && (\n\t\t\t\t handleClickStart(e)}\n\t\t\t\t\tclassName=\"copilot-btn\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t>\n\t\t\t\t\t {\n\t\t\t\t\tsetModal(false);\n\t\t\t\t}}\n\t\t\t\theaderContent={{t('common:welcome') as ReactNode}
}\n\t\t\t\tfooterContent={\n\t\t\t\t\t<>\n\t\t\t\t\t\t setModal(false)}>\n\t\t\t\t\t\t\t{t('common:cancel') as ReactNode}\n\t\t\t\t\t\t \n\t\t\t\t\t\t handleClickStart(e)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{t('components:joyride.start_tutorial') as ReactNode}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{t('components:joyride.welcomeDescription') as ReactNode} \n\t\t\t\n\t\t\n\t);\n};\n\nJoyrideOnboard.propTypes = {\n\tsteps: PropTypes.arrayOf(PropTypes.object),\n\tstart: PropTypes.bool,\n\tisFirstTime: PropTypes.bool,\n\tisBtnVisible: PropTypes.bool,\n};\n\nJoyrideOnboard.defaultProps = {\n\tsteps: [\n\t\t{\n\t\t\tcontent: 'Comienza acá',\n\t\t\ttarget: '.body',\n\t\t},\n\t],\n\topen: false,\n\tisFirstTime: false,\n\tisBtnVisible: true,\n};\n\nexport default JoyrideOnboard;\n\n\n","import { ReactNode } from \"react\";\nimport { Spinner } from \"react-bootstrap\"\nimport { useTranslation } from \"react-i18next\";\n\nconst Loading = () => {\n\n const { t } = useTranslation();\n\n return (\n \n
\n
{t('loading') as ReactNode}...
\n
{headerContent} ;\n\n\t\tswitch (headerType) {\n\t\t\tcase 'subtitle':\n\t\t\t\ttitle = {headerContent} ;\n\t\t\t\tbreak;\n\t\t\tcase 'text':\n\t\t\t\ttitle = {headerContent} ;\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn title;\n\t};\n\n\treturn (\n\t\t\n\t\t\t{headerContent && headerContent.length > 0 && (\n\t\t\t\t{generateTitle()} \n\t\t\t)}\n\t\t\t{children} \n\t\t \n\t);\n};\n\nSimplifiedCard.propTypes = {\n\theaderContent: PropTypes.string,\n\theaderType: PropTypes.oneOf(['title', 'subtitle', 'text']),\n};\nSimplifiedCard.defaultProps = {\n\theaderContent: null,\n};\n\nexport default SimplifiedCard;\n","import { useEffect, useState } from 'react';\nimport SimplifiedCard from '../SimplifiedCard';\nimport { Button, Col, Container, Form, Row } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport PropTypes from 'prop-types';\n\nconst MaterialEditor = (props) => {\n\tconst {\n\t\teditedMaterials,\n\t\tonMaterialChange,\n\t\tonIDColorChange,\n\t\tdefaultIDColor,\n\t\tonResetMaterials,\n\t\tonDeleteVariant,\n\t} = props;\n\tconst { t } = useTranslation(['product', 'common']);\n\n\tconst [viewer, setViewer] = useState(null);\n\tconst [modelLoaded, setModelLoaded] = useState(false);\n\tconst [selectedMaterial, setSelectedMaterial] = useState({\n\t\tindex: 0,\n\t\tcolor: '#ffffff',\n\t});\n\n\tconst [materials, setMaterials] = useState([]);\n\tconst [originalMaterials, setOriginalMaterials] = useState([]);\n\tconst [IDColor, setIDColor] = useState(defaultIDColor);\n\n\tuseEffect(() => {\n\t\tconst viewerTemp = document.getElementById('model-viewer');\n\n\t\tviewerTemp.addEventListener('load', () => {\n\t\t\tsetModelLoaded(true);\n\t\t\tsetOriginalMaterials([]);\n\t\t\tloadMaterials(viewerTemp);\n\t\t\tsetIDColor(defaultIDColor);\n\t\t});\n\n\t\tsetViewer(viewerTemp);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (modelLoaded) {\n\t\t\tloadMaterials(viewer);\n\t\t\tchangeSelectedMaterial(0);\n\t\t}\n\t}, [editedMaterials]);\n\n\tuseEffect(() => {\n\t\tif (materials) {\n\t\t\tchangeSelectedMaterial(0);\n\t\t\tsetIDColor(defaultIDColor);\n\t\t}\n\t}, [materials]);\n\n\tconst loadMaterials = (viewer) => {\n\t\tif (viewer) {\n\t\t\tconst materialsTemp = [];\n\t\t\tconst modelMaterials = viewer.model.materials;\n\t\t\tif (originalMaterials.length <= 0) {\n\t\t\t\tconst materials = [];\n\t\t\t\tmodelMaterials.map((material, index) => {\n\t\t\t\t\tconst colorRGB = material.pbrMetallicRoughness.baseColorFactor;\n\t\t\t\t\tmaterials.push({\n\t\t\t\t\t\tname: material.name,\n\t\t\t\t\t\tindex: index,\n\t\t\t\t\t\tcolor: rgbToHex(colorRGB[0], colorRGB[1], colorRGB[2]),\n\t\t\t\t\t});\n\t\t\t\t});\n\n\t\t\t\tsetOriginalMaterials(materials);\n\t\t\t} else {\n\t\t\t\tviewer.model.materials.forEach((material, index) => {\n\t\t\t\t\tif (!materialIsGroup(material)) {\n\t\t\t\t\t\tmaterial.pbrMetallicRoughness.setBaseColorFactor(\n\t\t\t\t\t\t\thextoRGB(originalMaterials[index].color)\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (editedMaterials) {\n\t\t\t\tmodelMaterials.map((material, index) => {\n\t\t\t\t\tconst foundMaterial = editedMaterials\n\t\t\t\t\t\t? editedMaterials.find((mat) => mat.index == index)\n\t\t\t\t\t\t: null;\n\n\t\t\t\t\tconst colorRGB = material.pbrMetallicRoughness.baseColorFactor;\n\t\t\t\t\tconst colorHex = rgbToHex(colorRGB[0], colorRGB[1], colorRGB[2]);\n\n\t\t\t\t\tif (foundMaterial && foundMaterial.color != colorHex) {\n\t\t\t\t\t\tviewer.model.materials[\n\t\t\t\t\t\t\tfoundMaterial.index\n\t\t\t\t\t\t].pbrMetallicRoughness.setBaseColorFactor(\n\t\t\t\t\t\t\thextoRGB(foundMaterial.color)\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tmaterialsTemp.push({\n\t\t\t\t\t\tname: material.name,\n\t\t\t\t\t\tindex: index,\n\t\t\t\t\t\tcolor: foundMaterial ? foundMaterial.color : colorHex,\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tsetMaterials(materialsTemp);\n\t\t}\n\t};\n\n\tconst changeMaterialColor = (color) => {\n\t\tsetSelectedMaterial({\n\t\t\t...selectedMaterial,\n\t\t\tcolor: color,\n\t\t});\n\n\t\tviewer.model.materials[\n\t\t\tselectedMaterial.index\n\t\t].pbrMetallicRoughness.setBaseColorFactor(hextoRGB(color));\n\n\t\tsaveMaterialChanges();\n\t};\n\n\tconst saveMaterialChanges = () => {\n\t\tlet materialsTemp = materials;\n\t\tconst materialToSave = selectedMaterial;\n\n\t\tmaterialsTemp[materialToSave.index].color = materialToSave.color;\n\n\t\tonMaterialChange(materialToSave);\n\t\tsetMaterials(materialsTemp);\n\t};\n\n\tconst changeSelectedMaterial = async (index) => {\n\t\tif (materials.length > 0) {\n\t\t\tlet color = materials[index].color;\n\t\t\tcolor = Array.isArray(color)\n\t\t\t\t? rgbToHex(color[0], color[1], color[2])\n\t\t\t\t: color;\n\n\t\t\tsetSelectedMaterial({\n\t\t\t\tindex: parseInt(index),\n\t\t\t\tcolor: color,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst listMaterials = () => {\n\t\tconst options = [];\n\t\tmaterials.map((material, index) => {\n\t\t\toptions.push(\n\t\t\t\t\n\t\t\t\t\t{material.name}\n\t\t\t\t \n\t\t\t);\n\t\t});\n\n\t\treturn (\n\t\t\t {\n\t\t\t\t\tchangeSelectedMaterial(e.target.value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{options}\n\t\t\t\n\t\t);\n\t};\n\n\tconst hextoRGB = (hex) => {\n\t\tvar result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\t\treturn result\n\t\t\t? [\n\t\t\t\t\tparseInt(result[1], 16) / 255,\n\t\t\t\t\tparseInt(result[2], 16) / 255,\n\t\t\t\t\tparseInt(result[3], 16) / 255,\n\t\t\t\t\t1,\n\t\t\t ]\n\t\t\t: null;\n\t};\n\n\tconst componentToHex = (c) => {\n\t\tvar hex = Math.round(c * 255).toString(16);\n\t\treturn hex.length == 1 ? '0' + hex : hex;\n\t};\n\n\tconst rgbToHex = (r, g, b) => {\n\t\treturn '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);\n\t};\n\n\tconst resetMaterials = () => {\n\t\toriginalMaterials.forEach((material, index) => {\n\t\t\tif (!materialIsGroup(viewer.model.materials[index])) {\n\t\t\t\tviewer.model.materials[index].pbrMetallicRoughness.setBaseColorFactor(\n\t\t\t\t\thextoRGB(material.color)\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\n\t\tsetMaterials(originalMaterials);\n\t\tsetIDColor('#ffffff');\n\t\tonIDColorChange('#ffffff');\n\t\tonResetMaterials();\n\t};\n\n\tconst materialIsGroup = (material) => {\n\t\tlet isGroup = false;\n\t\tfor (var [key, value] of material[\n\t\t\tObject.getOwnPropertySymbols(material)[2]\n\t\t].entries()) {\n\t\t\tif (key.type == 'Group') {\n\t\t\t\tisGroup = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\treturn isGroup;\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\t{materials.length > 0 && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{t('variant_color')}\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\t\tsetIDColor(e.target.value);\n\t\t\t\t\t\t\t\t\t\tonIDColorChange(e.target.value);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{t('material')}\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t{materials.length > 0 && listMaterials()}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{t('material_color')} \n\t\t\t\t\t\t\t\t changeMaterialColor(e.target.value)}\n\t\t\t\t\t\t\t\t\tvalue={selectedMaterial.color}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t resetMaterials()}>\n\t\t\t\t\t\t\t\t\t{t('common:reset')}\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t onDeleteVariant()}>\n\t\t\t\t\t\t\t\t\t{t('common:delete')}\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t \n\t\t\t\t)}\n\t\t\t \n\t\t\n\t);\n};\n\nMaterialEditor.propTypes = {\n\tvariant: PropTypes.object,\n\tonMaterialChange: PropTypes.func,\n\tonIDColorChange: PropTypes.func,\n\tdefaultIDColor: PropTypes.string,\n\tonResetMaterials: PropTypes.func,\n\tonDeleteVariant: PropTypes.func,\n};\n\nMaterialEditor.defaultProps = {\n\tvariant: {},\n\tonMaterialChange: () => {},\n\tonIDColorChange: () => {},\n\tdefaultIDColor: '#fffff',\n\tonResetMaterials: () => {},\n\tonDeleteVariant: () => {},\n};\n\nexport default MaterialEditor;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ModelViewerSimpleAnnotations = (props) => {\n\tconst { data } = props;\n\n\tconst generateSlides = () => {\n\t\tlet annotations = [];\n\n\t\tdata.map((annotation, index) => {\n\t\t\tannotations.push(\n\t\t\t\t\n\t\t\t\t\t{annotation.message}
\n\t\t\t\t\n\t\t\t);\n\t\t});\n\n\t\treturn annotations;\n\t};\n\n\treturn <>{generateSlides()};\n};\n\nModelViewerSimpleAnnotations.propTypes = {\n\tdata: PropTypes.arrayOf(PropTypes.object).isRequired,\n};\n\nModelViewerSimpleAnnotations.defaultProps = {};\n\nexport default ModelViewerSimpleAnnotations;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst ModelViewerSlider = (props) => {\n\tconst { models, onSelect } = props;\n\n\tuseEffect(() => {}, [models]);\n\n\tconst generateSlides = () => {\n\t\tlet slides = [];\n\n\t\tmodels.map((model, index) => {\n\t\t\tslides.push(\n\t\t\t\t {\n\t\t\t\t\t\tonSelect({ index: index, model: model });\n\t\t\t\t\t}}\n\t\t\t\t\tsrc=\"https://model3d.shopifycdn.com/models/o/74b8183737e46415/eletta_kitchen2.glb\"\n\t\t\t\t\tid=\"slide\"\n\t\t\t\t>\n\t\t\t);\n\t\t});\n\n\t\treturn slides;\n\t};\n\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t{generateSlides()}\n\t\t\t\tNueva variante \n\t\t\t
\n\t\t
`.\");\n }\n\n return errorMessage;\n}\n/**\n * Generate a new random identifier for react-paypal-js\n *\n * @returns the {@code string} containing the random library name\n */\n\n\nfunction getScriptID(options) {\n return \"react-paypal-js-\".concat(hashStr(JSON.stringify(options)));\n}\n/**\n * Destroy the PayPal SDK from the document page\n *\n * @param reactPayPalScriptID the script identifier\n */\n\n\nfunction destroySDKScript(reactPayPalScriptID) {\n var scriptNode = self.document.querySelector(\"script[\".concat(SCRIPT_ID, \"=\\\"\").concat(reactPayPalScriptID, \"\\\"]\"));\n\n if (scriptNode === null || scriptNode === void 0 ? void 0 : scriptNode.parentNode) {\n scriptNode.parentNode.removeChild(scriptNode);\n }\n}\n/**\n * Reducer function to handle complex state changes on the context\n *\n * @param state the current state on the context object\n * @param action the action to be executed on the previous state\n * @returns a the same state if the action wasn't found, or a new state otherwise\n */\n\n\nfunction scriptReducer(state, action) {\n var _a;\n\n switch (action.type) {\n case DISPATCH_ACTION.LOADING_STATUS:\n return __assign(__assign({}, state), {\n loadingStatus: action.value\n });\n\n case DISPATCH_ACTION.RESET_OPTIONS:\n // destroy existing script to make sure only one script loads at a time\n destroySDKScript(state.options[SCRIPT_ID]); // exclude the old data-react-paypal-script-id value from the hash generated by getScriptID()\n\n delete action.value[SCRIPT_ID];\n return __assign(__assign({}, state), {\n loadingStatus: SCRIPT_LOADING_STATE.PENDING,\n options: __assign(__assign({}, action.value), (_a = {}, _a[SCRIPT_ID] = \"\".concat(getScriptID(action.value)), _a[SDK_SETTINGS.DATA_SDK_INTEGRATION_SOURCE] = SDK_SETTINGS.DATA_SDK_INTEGRATION_SOURCE_VALUE, _a))\n });\n\n case DISPATCH_ACTION.SET_BRAINTREE_INSTANCE:\n return __assign(__assign({}, state), {\n braintreePayPalCheckoutInstance: action.value\n });\n\n default:\n {\n return state;\n }\n }\n} // Create the React context to use in the script provider component\n\n\nvar ScriptContext = createContext(null);\n/**\n * Check if the context is valid and ready to dispatch actions.\n *\n * @param scriptContext the result of connecting to the context provider\n * @returns strict context avoiding null values in the type\n */\n\nfunction validateReducer(scriptContext) {\n if (typeof (scriptContext === null || scriptContext === void 0 ? void 0 : scriptContext.dispatch) === \"function\" && scriptContext.dispatch.length !== 0) {\n return scriptContext;\n }\n\n throw new Error(SCRIPT_PROVIDER_REDUCER_ERROR);\n}\n/**\n * Check if the data-client-token or the data-user-id-token are\n * set in the options of the context.\n * @type data-client-token is use to pass a client token\n * @type data-user-id-token is use to pass a client tokenization key\n *\n * @param scriptContext the result of connecting to the context provider\n * @throws an {@link Error} if both data-client-token and the data-user-id-token keys are null or undefine\n * @returns strict context if one of the keys are defined\n */\n\n\nvar validateBraintreeAuthorizationData = function (scriptContext) {\n var _a, _b;\n\n if (!((_a = scriptContext === null || scriptContext === void 0 ? void 0 : scriptContext.options) === null || _a === void 0 ? void 0 : _a[SDK_SETTINGS.DATA_CLIENT_TOKEN]) && !((_b = scriptContext === null || scriptContext === void 0 ? void 0 : scriptContext.options) === null || _b === void 0 ? void 0 : _b[SDK_SETTINGS.DATA_USER_ID_TOKEN])) {\n throw new Error(EMPTY_BRAINTREE_AUTHORIZATION_ERROR_MESSAGE);\n }\n\n return scriptContext;\n};\n/**\n * Custom hook to get access to the Script context and\n * dispatch actions to modify the state on the {@link ScriptProvider} component\n *\n * @returns a tuple containing the state of the context and\n * a dispatch function to modify the state\n */\n\n\nfunction usePayPalScriptReducer() {\n var scriptContext = validateReducer(useContext(ScriptContext));\n\n var derivedStatusContext = __assign(__assign({}, scriptContext), {\n isInitial: scriptContext.loadingStatus === SCRIPT_LOADING_STATE.INITIAL,\n isPending: scriptContext.loadingStatus === SCRIPT_LOADING_STATE.PENDING,\n isResolved: scriptContext.loadingStatus === SCRIPT_LOADING_STATE.RESOLVED,\n isRejected: scriptContext.loadingStatus === SCRIPT_LOADING_STATE.REJECTED\n });\n\n return [derivedStatusContext, scriptContext.dispatch];\n}\n/**\n * Custom hook to get access to the ScriptProvider context\n *\n * @returns the latest state of the context\n */\n\n\nfunction useScriptProviderContext() {\n var scriptContext = validateBraintreeAuthorizationData(validateReducer(useContext(ScriptContext)));\n return [scriptContext, scriptContext.dispatch];\n} // Create the React context to use in the PayPal hosted fields provider\n\n\nvar PayPalHostedFieldsContext = createContext({});\n/**\n * Custom hook to get access to the PayPal Hosted Fields instance.\n * The instance represent the returned object after the render process\n * With this object a user can submit the fields and dynamically modify the cards\n *\n * @returns the hosted fields instance if is available in the component\n */\n\nfunction usePayPalHostedFields() {\n return useContext(PayPalHostedFieldsContext);\n}\n/**\nThis `;\r\n\r\n/**\r\n * Type of an argument of [StateMethods.set](#set).\r\n * \r\n * @typeparam S Type of a value of a state\r\n */\r\nexport type SetStateAction = (S | Promise) | ((prevState: S) => (S | Promise));\r\n\r\n/**\r\n * Type of an argument of [StateMethods.merge](#merge).\r\n * \r\n * @typeparam S Type of a value of a state\r\n */\r\nexport type SetPartialStateAction =\r\n S extends ReadonlyArray<(infer U)> ?\r\n ReadonlyArray | Record | ((prevValue: S) => (ReadonlyArray | Record)) :\r\n S extends object | string ? Partial | ((prevValue: S) => Partial) :\r\n React.SetStateAction;\r\n\r\n/**\r\n * Type of an argument of [createState](#createstate) and [useState](#usestate).\r\n * \r\n * @typeparam S Type of a value of a state\r\n */\r\nexport type SetInitialStateAction = S | Promise | (() => S | Promise)\r\n\r\n/**\r\n * Special symbol which might be returned by onPromised callback of [StateMethods.map](#map) function.\r\n * \r\n * [Learn more...](https://hookstate.js.org/docs/asynchronous-state#executing-an-action-when-state-is-loaded)\r\n */\r\nexport const postpone = Symbol('postpone')\r\n\r\n/**\r\n * Special symbol which might be used to delete properties\r\n * from an object calling [StateMethods.set](#set) or [StateMethods.merge](#merge).\r\n * \r\n * [Learn more...](https://hookstate.js.org/docs/nested-state#deleting-existing-element)\r\n */\r\nexport const none = Symbol('none') as StateValueAtPath;\r\n\r\n/**\r\n * Return type of [StateMethods.keys](#readonly-keys).\r\n * \r\n * @typeparam S Type of a value of a state\r\n */\r\nexport type InferredStateKeysType =\r\n S extends ReadonlyArray ? ReadonlyArray :\r\n S extends null ? undefined :\r\n S extends object ? ReadonlyArray :\r\n undefined;\r\n\r\n/**\r\n * Return type of [StateMethods.map()](#map).\r\n * \r\n * @typeparam S Type of a value of a state\r\n */\r\nexport type InferredStateOrnullType =\r\n S extends undefined ? undefined :\r\n S extends null ? null : State;\r\n\r\n/**\r\n * For plugin developers only.\r\n * An instance to manipulate the state in more controlled way.\r\n * \r\n * @typeparam S Type of a value of a state\r\n * \r\n * [Learn more...](https://hookstate.js.org/docs/writing-plugin)\r\n */\r\nexport interface PluginStateControl {\r\n /**\r\n * Get state value, but do not leave the traces of reading it.\r\n */\r\n getUntracked(): S;\r\n /**\r\n * Set new state value, but do not trigger rerender.\r\n * \r\n * @param newValue new value to set to a state.\r\n */\r\n setUntracked(newValue: SetStateAction): Path[];\r\n /**\r\n * Merge new state value, but do not trigger rerender.\r\n * \r\n * @param mergeValue new partial value to merge with the current state value and set.\r\n */\r\n mergeUntracked(mergeValue: SetPartialStateAction): Path[];\r\n /**\r\n * Trigger rerender for hooked states, where values at the specified paths are used.\r\n * \r\n * @param paths paths of the state variables to search for being used by components and rerender\r\n */\r\n rerender(paths: Path[]): void;\r\n}\r\n\r\n/**\r\n * An interface to manage a state in Hookstate.\r\n * \r\n * @typeparam S Type of a value of a state\r\n */\r\nexport interface StateMethods {\r\n /**\r\n * 'Javascript' object 'path' to an element relative to the root object\r\n * in the state. For example:\r\n *\r\n * ```tsx\r\n * const state = useState([{ name: 'First Task' }])\r\n * state.path IS []\r\n * state[0].path IS [0]\r\n * state.[0].name.path IS [0, 'name']\r\n * ```\r\n */\r\n readonly path: Path;\r\n\r\n /**\r\n * Return the keys of nested states.\r\n * For a given state of [State](#state) type,\r\n * `state.keys` will be structurally equal to Object.keys(state),\r\n * with two minor difference:\r\n * 1. if `state.value` is an array, the returned result will be\r\n * an array of numbers, not strings like with `Object.keys`.\r\n * 2. if `state.value` is not an object, the returned result will be undefined.\r\n */\r\n readonly keys: InferredStateKeysType;\r\n\r\n /**\r\n * Unwraps and returns the underlying state value referred by\r\n * [path](#readonly-path) of this state instance.\r\n *\r\n * It returns the same result as [StateMethods.get](#get) method.\r\n *\r\n * This property is more useful than [get](#get) method for the cases,\r\n * when a value may hold null or undefined values.\r\n * Typescript compiler does not handle elimination of undefined with get(),\r\n * like in the following examples, but value does:\r\n *\r\n * ```tsx\r\n * const state = useState(0)\r\n * const myvalue: number = state.value\r\n * ? state.value + 1\r\n * : 0; // <-- compiles\r\n * const myvalue: number = state.get()\r\n * ? state.get() + 1\r\n * : 0; // <-- does not compile\r\n * ```\r\n */\r\n readonly value: S;\r\n\r\n /**\r\n * True if state value is not yet available (eg. equal to a promise)\r\n */\r\n readonly promised: boolean;\r\n \r\n /**\r\n * If a state was set to a promise and the promise was rejected,\r\n * this property will return the error captured from the promise rejection\r\n */\r\n readonly error: StateErrorAtRoot | undefined;\r\n \r\n /**\r\n * Unwraps and returns the underlying state value referred by\r\n * [path](#readonly-path) of this state instance.\r\n *\r\n * It returns the same result as [StateMethods.value](#readonly-value) method.\r\n */\r\n get(): S;\r\n \r\n /**\r\n * Sets new value for a state.\r\n * If `this.path === []`,\r\n * it is similar to the `setState` variable returned by `React.useState` hook.\r\n * If `this.path !== []`, it sets only the segment of the state value, pointed out by the path.\r\n * Unlike [merge](#merge) method, this method will not accept partial updates.\r\n * Partial updates can be also done by walking the nested states and setting those.\r\n *\r\n * @param newValue new value to set to a state.\r\n * It can be a value, a promise resolving to a value\r\n * (only if [this.path](#readonly-path) is `[]`),\r\n * or a function returning one of these.\r\n * The function receives the current state value as an argument.\r\n */\r\n set(newValue: SetStateAction): void;\r\n \r\n /**\r\n * Similarly to [set](#set) method updates state value.\r\n *\r\n * - If current state value is an object, it does partial update for the object.\r\n * - If state value is an array and the argument is an array too,\r\n * it concatenates the current value with the value of the argument and sets it to the state.\r\n * - If state value is an array and the `merge` argument is an object,\r\n * it does partial update for the current array value.\r\n * - If current state value is a string, it concatenates the current state\r\n * value with the argument converted to string and sets the result to the state.\r\n */\r\n merge(newValue: SetPartialStateAction): void;\r\n \r\n /**\r\n * Returns nested state by key.\r\n * `state.nested('myprop')` returns the same as `state.myprop` or `state['myprop']`,\r\n * but also works for properties, which names collide with names of state methods.\r\n * \r\n * [Learn more about nested states...](https://hookstate.js.org/docs/nested-state)\r\n * \r\n * @param key child property name or index\r\n */\r\n nested(key: K): State;\r\n \r\n /**\r\n * Runs the provided action callback with optimised re-rendering.\r\n * Updating state within a batch action does not trigger immediate rerendering.\r\n * Instead, all required rerendering is done once the batch is finished.\r\n * \r\n * [Learn more about batching...](https://hookstate.js.org/docs/performance-batched-updates\r\n * \r\n * @param action callback function to execute in a batch\r\n * \r\n * @param context custom user's value, which is passed to plugins\r\n */\r\n batch(\r\n action: (s: State) => R,\r\n context?: Exclude\r\n ): R;\r\n\r\n /**\r\n * If state value is null or undefined, returns state value.\r\n * Otherwise, it returns this state instance but\r\n * with null and undefined removed from the type parameter.\r\n * \r\n * [Learn more...](https://hookstate.js.org/docs/nullable-state)\r\n */\r\n ornull: InferredStateOrnullType;\r\n\r\n /**\r\n * Adds plugin to the state.\r\n * \r\n * [Learn more...](https://hookstate.js.org/docs/extensions-overview)\r\n */\r\n attach(plugin: () => Plugin): State