@indico-data/design-system 2.21.1 → 2.22.0

package/lib/index.esm.css

@@ -87,10 +87,11 @@
   --pf-red-color-800: #b01b1d;
   --pf-red-color-900: #9d181a;
   --pf-white-color: #ffffff;
-  --pf-error-color: var(--pf-red-color);
-  --pf-success-color: var(--pf-green-color);
-  --pf-warning-color: var(--pf-orange-color);
-  --pf-info-color: var(--pf-gray-color);
+  --pf-error-color: var(--pf-red-color-600);
+  --pf-success-color: var(--pf-green-color-600);
+  --pf-warning-color: var(--pf-orange-color-600);
+  --pf-neutral-color: var(--pf-gray-color);
+  --pf-info-color: var(--pf-secondary-color-600);
   --pf-link-color: var(--pf-secondary-color);
   --pf-link-hover-color: var(--pf-secondary-color-400);
 }
@@ -136,7 +137,7 @@
   --pf-green-color-600: #168116;
   --pf-green-color-700: #106710;
   --pf-green-color-800: #0d5a0d;
-  --pf-green-color-900: #0a500a;
+  --pf-green-color-900: #003c00;
   --pf-orange-color: #da9534;
   --pf-orange-color-100: #ffd599;
   --pf-orange-color-200: #ffc676;
@@ -153,14 +154,17 @@
   --pf-red-color-300: #ff7577;
   --pf-red-color-400: #ff6466;
   --pf-red-color-500: #f44d4f;
-  --pf-red-color-600: #cf4244;
+  --pf-red-color-600: #ba5759;
   --pf-red-color-700: #b4393a;
-  --pf-red-color-800: #9a3132;
-  --pf-red-color-900: #752324;
+  --pf-red-color-800: #7b2728;
+  --pf-red-color-900: #4d1717;
   --pf-error-color: var(--pf-red-color);
   --pf-success-color: var(--pf-green-color);
   --pf-warning-color: var(--pf-orange-color);
-  --pf-info-color: var(--pf-gray-color);
+  --pf-neutral-color: var(--pf-gray-color);
+  --pf-info-color: var(--pf-secondary-color);
+  --pf-link-color: var(--pf-gray-color-300);
+  --pf-link-hover-color: var(--pf-gray-color-100);
 }
 
 :root {
@@ -2093,6 +2097,114 @@ form {
   position: absolute !important;
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-pill-primary-background-color: var(--pf-primary-color);
+  --pf-pill-primary-font-color: var(--pf-white-color);
+  --pf-pill-primary-border-color: var(--pf-primary-color);
+  --pf-pill-secondary-background-color: var(--pf-secondary-color);
+  --pf-pill-secondary-font-color: var(--pf-white-color);
+  --pf-pill-secondary-border-color: var(--pf-secondary-color);
+  --pf-pill-error-background-color: var(--pf-error-color);
+  --pf-pill-error-font-color: var(--pf-white-color);
+  --pf-pill-error-border-color: var(--pf-error-color);
+  --pf-pill-warning-background-color: var(--pf-warning-color);
+  --pf-pill-warning-font-color: var(--pf-white-color);
+  --pf-pill-warning-border-color: var(--pf-warning-color);
+  --pf-pill-info-background-color: var(--pf-info-color);
+  --pf-pill-info-font-color: var(--pf-white-color);
+  --pf-pill-info-border-color: var(--pf-info-color);
+  --pf-pill-success-background-color: var(--pf-success-color);
+  --pf-pill-success-font-color: var(--pf-white-color);
+  --pf-pill-success-border-color: var(--pf-success-color);
+  --pf-pill-neutral-background-color: var(--pf-gray-color);
+  --pf-pill-neutral-font-color: var(--pf-white-color);
+  --pf-pill-neutral-border-color: var(--pf-gray-color);
+}
+
+:root [data-theme=dark] {
+  --pf-pill-primary-background-color: var(--pf-primary-color-900);
+  --pf-pill-primary-font-color: var(--pf-white-color);
+  --pf-pill-primary-border-color: var(--pf-primary-color-100);
+  --pf-pill-secondary-background-color: var(--pf-secondary-color-800);
+  --pf-pill-secondary-font-color: var(--pf-white-color);
+  --pf-pill-secondary-border-color: var(--pf-secondary-color-400);
+  --pf-pill-error-background-color: var(--pf-red-color-900);
+  --pf-pill-error-font-color: var(--pf-white-color);
+  --pf-pill-error-border-color: var(--pf-red-color-600);
+  --pf-pill-warning-background-color: var(--pf-orange-color-800);
+  --pf-pill-warning-font-color: var(--pf-white-color);
+  --pf-pill-warning-border-color: var(--pf-orange-color-600);
+  --pf-pill-info-background-color: var(--pf-secondary-color-800);
+  --pf-pill-info-font-color: var(--pf-white-color);
+  --pf-pill-info-border-color: var(--pf-secondary-color-300);
+  --pf-pill-success-background-color: var(--pf-green-color-900);
+  --pf-pill-success-font-color: var(--pf-white-color);
+  --pf-pill-success-border-color: var(--pf-green-color-600);
+  --pf-pill-neutral-background-color: var(--pf-gray-color-900);
+  --pf-pill-neutral-font-color: var(--pf-gray-color-100);
+  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
+}
+
+.pill {
+  display: inline-block;
+  border-radius: var(--pf-rounded-pill);
+  padding: var(--pf-padding-1) var(--pf-padding-2);
+  font-size: var(--pf-font-size-overline);
+  font-weight: var(--pf-font-weight-medium);
+  white-space: nowrap;
+  line-height: 1;
+  border: solid 1px;
+}
+.pill--sm {
+  padding: var(--pf-padding-1) var(--pf-padding-2);
+  font-size: var(--pf-font-size-overline);
+}
+.pill--md {
+  padding: var(--pf-padding-2) var(--pf-padding-3);
+  font-size: var(--pf-font-size-body);
+}
+.pill--lg {
+  padding: var(--pf-padding-3) var(--pf-padding-4);
+  font-size: var(--pf-font-size-h2);
+}
+.pill--error {
+  background-color: var(--pf-pill-error-background-color);
+  color: var(--pf-pill-error-font-color);
+  border-color: var(--pf-pill-error-border-color);
+}
+.pill--warning {
+  background-color: var(--pf-pill-warning-background-color);
+  color: var(--pf-pill-warning-font-color);
+  border-color: var(--pf-pill-warning-border-color);
+}
+.pill--info {
+  background-color: var(--pf-pill-info-background-color);
+  color: var(--pf-pill-info-font-color);
+  border-color: var(--pf-pill-info-border-color);
+}
+.pill--success {
+  background-color: var(--pf-pill-success-background-color);
+  color: var(--pf-pill-success-font-color);
+  border-color: var(--pf-pill-success-border-color);
+}
+.pill--neutral {
+  background-color: var(--pf-pill-neutral-background-color);
+  color: var(--pf-pill-neutral-font-color);
+  border-color: var(--pf-pill-neutral-border-color);
+}
+.pill--primary {
+  background-color: var(--pf-pill-primary-background-color);
+  color: var(--pf-pill-primary-font-color);
+  border-color: var(--pf-pill-primary-border-color);
+}
+.pill--secondary {
+  background-color: var(--pf-pill-secondary-background-color);
+  color: var(--pf-pill-secondary-font-color);
+  border-color: var(--pf-pill-secondary-border-color);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.esm.js

@@ -3159,11 +3159,11 @@ var classnames = {exports: {}};
 } (classnames));
 
 var classnamesExports = classnames.exports;
-var y$1 = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const Button$2 = forwardRef((props, ref) => {
     const { ariaLabel, children, isLoading, isDisabled, variant = 'solid', color = 'primary', iconPosition = 'left', iconName, onClick, type = 'button', size = 'md', onMouseEnter, onMouseExit, onKeyDown, className, href } = props, rest = __rest$1(props, ["ariaLabel", "children", "isLoading", "isDisabled", "variant", "color", "iconPosition", "iconName", "onClick", "type", "size", "onMouseEnter", "onMouseExit", "onKeyDown", "className", "href"]);
-    const buttonClasses = y$1('btn', {
+    const buttonClasses = classNames('btn', {
         [`btn--${color}`]: color,
         [`btn--${variant}`]: variant,
         [`btn--${size}`]: size,
@@ -18190,7 +18190,7 @@ const Icon = (_a) => {
         console.error(`Icon "${name}" not found`);
         return null;
     }
-    const iconClasses = y$1('icon', {
+    const iconClasses = classNames('icon', {
         [`icon--${size}`]: size,
     }, className);
     return faIcon ? (jsx(FontAwesomeIcon, Object.assign({ icon: faIcon, className: iconClasses, "aria-label": label }, props))) : (cloneElement(customIcon, Object.assign({ className: iconClasses, 'aria-label': label }, props)));
@@ -18614,7 +18614,7 @@ const Input = e__default.forwardRef((_a, ref) => {
     const handleClear = () => {
         onChange({ target: { value: '' } });
     };
-    const inputClasses = y$1('input', {
+    const inputClasses = classNames('input', {
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
@@ -18640,7 +18640,7 @@ const Toggle$1 = e__default.forwardRef((_a, ref) => {
 const Textarea = e__default.forwardRef((_a, ref) => {
     var { label, name, placeholder, value, onChange, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
-    const textareaClasses = y$1('textarea', { error: hasErrors });
+    const textareaClasses = classNames('textarea', { error: hasErrors });
     return (jsxs(Fragment, { children: [jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledTextarea = withLabel(Textarea);
@@ -18652,7 +18652,7 @@ const PasswordInput = e__default.forwardRef((_a, ref) => {
     const handleShowPassword = () => {
         setShowPassword((prevShowPassword) => !prevShowPassword);
     };
-    const inputClasses = y$1('password-input', {
+    const inputClasses = classNames('password-input', {
         error: hasErrors,
     }, 'password-input--has-icon');
     return (jsxs(Fragment, { children: [jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
@@ -18670,7 +18670,7 @@ const Select$1 = (_a) => {
         Option: OptionComponent,
     };
     const mergedComponents = Object.assign(Object.assign({}, defaultComponents), customComponents);
-    return (jsx(ReactSelect, Object.assign({ classNamePrefix: classNamePrefix, className: y$1('select-wrapper', className), components: mergedComponents }, props)));
+    return (jsx(ReactSelect, Object.assign({ classNamePrefix: classNamePrefix, className: classNames('select-wrapper', className), components: mergedComponents }, props)));
 };
 
 const Form = (_a) => {
@@ -18703,7 +18703,7 @@ const Skeleton = (_a) => {
 
 const Card = (_a) => {
     var { className = '', children, title, subtitle, hasBoxShadow = false } = _a, rest = __rest$1(_a, ["className", "children", "title", "subtitle", "hasBoxShadow"]);
-    const cardClasses = y$1('card', { 'card--box-shadow': hasBoxShadow }, className);
+    const cardClasses = classNames('card', { 'card--box-shadow': hasBoxShadow }, className);
     return (jsxs("div", Object.assign({ className: cardClasses }, rest, { children: [(title || subtitle) && (jsxs("div", { className: "card__header", children: [title && jsx("h2", { children: title }), subtitle && jsx("p", { children: subtitle })] })), jsx("div", { className: "card__content", children: children })] })));
 };
 
@@ -20265,7 +20265,7 @@ function Popper({ children, referenceElement, isOpen, onClose, ariaLabel, placem
 function Menu({ children }) {
     return (jsx("div", { className: "menu", children: e__default.Children.map(children, (child) => e__default.isValidElement(child)
             ? e__default.cloneElement(child, {
-                className: y$1(child.props.className, 'menu-item'),
+                className: classNames(child.props.className, 'menu-item'),
             })
             : child) }));
 }
@@ -20318,7 +20318,7 @@ const StyledSection = styled.article `
 
 const Section = (props) => {
     const { className, style = {}, children, id } = props, restOfProps = __rest$1(props, ["className", "style", "children", "id"]);
-    return (jsx(StyledSection, Object.assign({ className: y$1('Section', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
+    return (jsx(StyledSection, Object.assign({ className: classNames('Section', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
 };
 
 const StyledSectionBlock = styled.div `
@@ -20335,7 +20335,7 @@ const StyledSectionBlock = styled.div `
 
 const SectionBlock = (props) => {
     const { title, className, children, id, style = {} } = props, restOfProps = __rest$1(props, ["title", "className", "children", "id", "style"]);
-    return (jsxs(StyledSectionBlock, Object.assign({ className: y$1('SectionBlock', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: [title ? (jsx("header", { children: jsx("h3", { children: title }) })) : null, children, jsx("hr", { className: "section-bottom-border" })] })));
+    return (jsxs(StyledSectionBlock, Object.assign({ className: classNames('SectionBlock', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: [title ? (jsx("header", { children: jsx("h3", { children: title }) })) : null, children, jsx("hr", { className: "section-bottom-border" })] })));
 };
 
 const sectionSidePadding = '19px';
@@ -20354,7 +20354,7 @@ const StyledSectionBody = styled.div `
 
 const SectionBody = (props) => {
     const { className, style = {}, children, id } = props, restOfProps = __rest$1(props, ["className", "style", "children", "id"]);
-    return (jsx(StyledSectionBody, Object.assign({ className: y$1('SectionBody', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
+    return (jsx(StyledSectionBody, Object.assign({ className: classNames('SectionBody', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
 };
 
 const StyledSectionHeader = styled.header `
@@ -20363,7 +20363,7 @@ const StyledSectionHeader = styled.header `
 
 const SectionHeader = (props) => {
     const { className = '', style = {}, children, id } = props, restOfProps = __rest$1(props, ["className", "style", "children", "id"]);
-    return (jsx(StyledSectionHeader, Object.assign({ className: y$1('SectionHeader', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
+    return (jsx(StyledSectionHeader, Object.assign({ className: classNames('SectionHeader', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
 };
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
@@ -20493,7 +20493,7 @@ const StyledValidationError = styled.div `
 const BorderSelect = (props) => {
     const { className = '', disabled, horizontal, id, initialText, label, onChange, options, style = {}, value, validationErrors, } = props;
     const selectId = v4();
-    return (jsxs(StyledSelect$1, { className: y$1('Select', { horizontal }, className), "data-cy": props['data-cy'], id: id, style: style, children: [label && jsx("label", { htmlFor: selectId, children: label }), jsxs("div", { className: "select-container", children: [jsxs("select", { onChange: onChange, value: value, disabled: disabled, id: selectId, children: [initialText && (jsx("option", { disabled: true, value: "", children: initialText })), options.map((o) => {
+    return (jsxs(StyledSelect$1, { className: classNames('Select', { horizontal }, className), "data-cy": props['data-cy'], id: id, style: style, children: [label && jsx("label", { htmlFor: selectId, children: label }), jsxs("div", { className: "select-container", children: [jsxs("select", { onChange: onChange, value: value, disabled: disabled, id: selectId, children: [initialText && (jsx("option", { disabled: true, value: "", children: initialText })), options.map((o) => {
                                 const key = v4();
                                 return (jsx("option", { value: o.value, children: o.name }, key));
                             })] }), jsx(Icon, { name: "fa-caret-down", className: "selectCaret" })] }), validationErrors ? (jsx(StyledValidationError, { children: validationErrors.map((err, i) => {
@@ -20574,7 +20574,7 @@ const StyledSelect = styled.div `
 const Select = (props) => {
     const { id, className, disabled, initialText, onChange, options, size = 'medium', style = {}, value, variant, onClick, } = props;
     const selectId = v4();
-    return (jsx(StyledSelect, { className: className, "data-cy": props['data-cy'], id: id, style: style, children: jsxs("div", { className: y$1('Select__container', size, variant), onClick: (e) => (onClick ? onClick(e) : null), children: [jsxs("select", { onChange: onChange, value: value, disabled: disabled, id: selectId, children: [initialText && (jsx("option", { disabled: true, value: "", children: initialText })), options.map((o) => {
+    return (jsx(StyledSelect, { className: className, "data-cy": props['data-cy'], id: id, style: style, children: jsxs("div", { className: classNames('Select__container', size, variant), onClick: (e) => (onClick ? onClick(e) : null), children: [jsxs("select", { onChange: onChange, value: value, disabled: disabled, id: selectId, children: [initialText && (jsx("option", { disabled: true, value: "", children: initialText })), options.map((o) => {
                             const key = v4();
                             return (jsx("option", { value: o.value, children: o.name }, key));
                         })] }), jsx(Icon, { className: "chevron", name: "chevron-down", size: size === 'small' ? 'xs' : 'sm' })] }) }));
@@ -21363,10 +21363,10 @@ const SectionTable = (props) => {
         }
     };
     const headers = Object.keys(props.tableObjects[0].content);
-    return (jsxs(StyledSectionTable, { className: y$1('SectionTable', props.className, { loading: props.loading }), "data-cy": props['data-cy'], id: props.id, children: [props.sortColumnHandler && props.sortedColumn && (jsx("div", { className: "mobile-sort", children: jsx(BorderSelect, { onChange: (e) => props.sortColumnHandler(e.target.value), value: props.sortedColumn, options: [].concat({ name: 'Choose Sorting Option', value: '' }, headers.map((item) => {
+    return (jsxs(StyledSectionTable, { className: classNames('SectionTable', props.className, { loading: props.loading }), "data-cy": props['data-cy'], id: props.id, children: [props.sortColumnHandler && props.sortedColumn && (jsx("div", { className: "mobile-sort", children: jsx(BorderSelect, { onChange: (e) => props.sortColumnHandler(e.target.value), value: props.sortedColumn, options: [].concat({ name: 'Choose Sorting Option', value: '' }, headers.map((item) => {
                         return { name: item, value: item };
                     })) }) })), jsxs("table", Object.assign({}, props.tableProps, { children: [jsx("thead", { children: jsxs("tr", { children: [props.tableObjects[0].rowAccordionContent ? jsx("th", { className: "action-column" }) : null, headers.map((header, i) => {
-                                    return (jsxs("th", { className: y$1({
+                                    return (jsxs("th", { className: classNames({
                                             'not-sortable': props.sortableHeaders && props.sortableHeaders.indexOf(header) === -1,
                                         }), onClick: () => {
                                             if (props.sortColumnHandler) {
@@ -21380,7 +21380,7 @@ const SectionTable = (props) => {
                                                 }
                                             }
                                         }, children: [props.headersContent ? props.headersContent[header] : header, ' ', props.sortedColumn === header && (jsx(Icon, { name: `fa-caret-${props.sortDirection}` }))] }, i));
-                                })] }) }), jsx("tbody", { className: y$1({ 'SectionTable--tbody-loading': props.loading }), children: props.loading
+                                })] }) }), jsx("tbody", { className: classNames({ 'SectionTable--tbody-loading': props.loading }), children: props.loading
                             ? Array.from({ length: 5 }, (x, i) => (jsx("tr", { children: props.tableObjects[0].rowAccordionContent ? (jsx("td", { colSpan: headers.length + 1 })) : (jsx("td", { colSpan: headers.length })) }, i)))
                             : props.tableObjects.map((obj, i) => {
                                 let rowStyle = obj.rowStyleCondition;
@@ -21388,7 +21388,7 @@ const SectionTable = (props) => {
                                     rowStyle = { [rowStyle.className]: rowStyle.condition };
                                 }
                                 if (obj.rowAccordionContent) {
-                                    return (jsx("tr", Object.assign({ className: y$1(rowStyle) }, props.rowProps, { children: jsx("td", { colSpan: headers.length + 1, style: { padding: '0' }, className: "outer-hover", children: jsxs("table", { children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "action-column", style: {
+                                    return (jsx("tr", Object.assign({ className: classNames(rowStyle) }, props.rowProps, { children: jsx("td", { colSpan: headers.length + 1, style: { padding: '0' }, className: "outer-hover", children: jsxs("table", { children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "action-column", style: {
                                                                         padding: '0',
                                                                         height: '1px',
                                                                         border: 'none',
@@ -21407,18 +21407,18 @@ const SectionTable = (props) => {
                                                                         return (jsx("td", Object.assign({ style: {
                                                                                 borderBottom: 'none',
                                                                             }, "data-heading": headers[i], title: createTitle(obj.content[key]) }, (_a = props === null || props === void 0 ? void 0 : props.headingProps) === null || _a === void 0 ? void 0 : _a[headers === null || headers === void 0 ? void 0 : headers[i]], { children: obj.content[key] }), i));
-                                                                    })] }), jsx("tr", { className: y$1('row-option', {
+                                                                    })] }), jsx("tr", { className: classNames('row-option', {
                                                                     open: openRowOptions.indexOf(obj.id) !== -1,
                                                                 }), children: jsx("td", { className: "inner-table-cell", colSpan: headers.length + 1, children: obj.rowAccordionContent }) })] })] }) }) }), i));
                                 }
                                 else if (obj.lineItemLink) {
-                                    return (jsx("tr", Object.assign({ onClick: handleRowClick(obj.lineItemLink), className: y$1('hover', rowStyle) }, props.rowProps, { children: Object.keys(obj.content).map((key, i) => {
+                                    return (jsx("tr", Object.assign({ onClick: handleRowClick(obj.lineItemLink), className: classNames('hover', rowStyle) }, props.rowProps, { children: Object.keys(obj.content).map((key, i) => {
                                             var _a;
                                             return (jsx("td", Object.assign({ "data-heading": headers[i], title: createTitle(obj.content[key]) }, (_a = props === null || props === void 0 ? void 0 : props.headingProps) === null || _a === void 0 ? void 0 : _a[headers === null || headers === void 0 ? void 0 : headers[i]], { children: obj.content[key] }), i));
                                         }) }), i));
                                 }
                                 else {
-                                    return (jsx("tr", Object.assign({ className: y$1(rowStyle) }, props.rowProps, { children: Object.keys(obj.content).map((key, i) => {
+                                    return (jsx("tr", Object.assign({ className: classNames(rowStyle) }, props.rowProps, { children: Object.keys(obj.content).map((key, i) => {
                                             var _a;
                                             return (jsx("td", Object.assign({ "data-heading": headers[i], title: createTitle(obj.content[key]) }, (_a = props === null || props === void 0 ? void 0 : props.headingProps) === null || _a === void 0 ? void 0 : _a[headers === null || headers === void 0 ? void 0 : headers[i]], { children: obj.content[key] }), i));
                                         }) }), i));
@@ -21922,7 +21922,7 @@ const StyledButton = styled.button `
 
 function Button$1(props) {
     const { id, className, busy, children, disabled, onClick, onFocus, role, style, tabindex, type, variant = 'default' } = props, rest = __rest$1(props, ["id", "className", "busy", "children", "disabled", "onClick", "onFocus", "role", "style", "tabindex", "type", "variant"]);
-    return (jsxs(StyledButton, Object.assign({ "aria-disabled": busy, "aria-label": props['aria-label'], "aria-pressed": props['aria-pressed'], "aria-selected": props['aria-selected'], className: y$1(variant, className, {
+    return (jsxs(StyledButton, Object.assign({ "aria-disabled": busy, "aria-label": props['aria-label'], "aria-pressed": props['aria-pressed'], "aria-selected": props['aria-selected'], className: classNames(variant, className, {
             blue: variant === 'primary' || variant === 'cta',
             busy,
         }), "data-cy": props['data-cy'], disabled: disabled, id: id, onClick: busy ? undefined : onClick, onFocus: onFocus, role: role, style: style, tabIndex: tabindex, type: type || 'button' }, rest, { children: [busy && jsx(CircleSpinner, { className: "mr-2" }), children] })));
@@ -24427,7 +24427,7 @@ function IconButton(props) {
     // @ts-ignore
     buttonEl);
     const { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
-    const commonProps = Object.assign(Object.assign(Object.assign({ 'aria-disabled': busy, className: y$1(iconSide, size, variant, className, {
+    const commonProps = Object.assign(Object.assign(Object.assign({ 'aria-disabled': busy, className: classNames(iconSide, size, variant, className, {
             'focus-visible': isFocusVisible,
             busy,
             disabled: isLink && isDisabled,
@@ -24436,7 +24436,7 @@ function IconButton(props) {
             marginTop: `${adjustAlignment}px`,
             marginBottom: `${Math.abs(adjustAlignment)}px`,
             marginRight: `${spacings.xs}`,
-        } })) : (jsx(Icon, { className: y$1({ 'right-margin': label }), name: iconName }));
+        } })) : (jsx(Icon, { className: classNames({ 'right-margin': label }), name: iconName }));
     const labelElement = label ? (jsx("span", { style: { marginTop: `${adjustAlignment}px` }, children: label })) : null;
     if (isLink && !isDisabled) {
         return (
@@ -24519,7 +24519,7 @@ function EditableInput(props) {
             setInitialValue(editableEl.current.innerText);
         }
     }, []);
-    return (jsxs(StyledEditableInput, { className: y$1('EditableInput-container', id, className), "data-cy": props['data-cy'], id: props.id, children: [jsx("span", { role: "textbox", tabIndex: 0, contentEditable: true, suppressContentEditableWarning: true, ref: editableEl, onKeyDown: handleKeypress, onBlur: handleBlur, children: children }), jsx(Icon, { name: "fa-pencil-alt", className: "pencil-icon" })] }));
+    return (jsxs(StyledEditableInput, { className: classNames('EditableInput-container', id, className), "data-cy": props['data-cy'], id: props.id, children: [jsx("span", { role: "textbox", tabIndex: 0, contentEditable: true, suppressContentEditableWarning: true, ref: editableEl, onKeyDown: handleKeypress, onBlur: handleBlur, children: children }), jsx(Icon, { name: "fa-pencil-alt", className: "pencil-icon" })] }));
 }
 
 const inputCommon = css$1 `
@@ -24700,7 +24700,7 @@ function NumberInput(props) {
         }, 1000);
         return () => clearTimeout(delayDebounceFn);
     }, [currentValue]);
-    return (jsxs(StyledNumberField, { className: y$1(className, {
+    return (jsxs(StyledNumberField, { className: classNames(className, {
             hiddenLabel,
         }), "data-cy": props['data-cy'], id: id, children: [jsx("input", { tabIndex: tabIndex, autoFocus: autoFocus, id: fieldId, type: "number", value: currentValue, disabled: disabled, max: max, min: min, onChange: handleChange, placeholder: placeholder, required: required, step: step, "aria-label": hiddenLabel ? label : '', ref: inputEl }), !hiddenLabel && jsx("label", { htmlFor: fieldId, children: label }), jsxs("div", { className: "spin-buttons", children: [jsx(Button$1, { variant: "no-style", onClick: increment, tabindex: -1, children: jsx(Icon, { name: "fa-caret-up", ariaLabel: "increase" }) }), jsx(Button$1, { variant: "no-style", onClick: decrement, tabindex: -1, children: jsx(Icon, { name: "fa-caret-down", ariaLabel: "decrease" }) })] })] }));
 }
@@ -24754,7 +24754,7 @@ const StyledSearchField = styled.div `
 const SearchInput = (props) => {
     const { id, inputBorder, showSearchIcon, showClearInputIcon, className = '', inputProps, onChange, onClear, onKeyUp, placeholder, value, } = props;
     const getId = id ? id : v4();
-    return (jsxs(StyledSearchField, { className: y$1(className, {
+    return (jsxs(StyledSearchField, { className: classNames(className, {
             inputBorder,
             showSearchIcon,
             showClearInputIcon,
@@ -24829,7 +24829,7 @@ function TextInput(props) {
     const inputId = v4();
     const { autoComplete, autoFocus, className, defaultValue, disabled, displayErrors, id, inputProps, label, maxLength, name, onBlur, onChange, onFocus, placeholder, promptProps, required, type = 'text', validationErrors, value, readOnly, } = props;
     const errorClass = displayErrors ? 'error' : 'prompt';
-    return (jsxs(StyledTextInput, { className: className, "data-cy": props['data-cy'], id: id, children: [jsx("input", Object.assign({ autoComplete: autoComplete, autoFocus: autoFocus, className: y$1('text-input__input-element', {
+    return (jsxs(StyledTextInput, { className: className, "data-cy": props['data-cy'], id: id, children: [jsx("input", Object.assign({ autoComplete: autoComplete, autoFocus: autoFocus, className: classNames('text-input__input-element', {
                     filled: (value && value.length > 0) || defaultValue,
                 }), disabled: disabled, defaultValue: defaultValue, id: inputId, maxLength: maxLength, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: (e) => {
                     if (e.key === 'Enter') {
@@ -24837,7 +24837,7 @@ function TextInput(props) {
                     }
                 }, placeholder: placeholder, required: required, type: type, value: value, readOnly: readOnly }, inputProps)), label ? jsx("label", { htmlFor: inputId, children: label }) : null, (validationErrors || maxLength) && (jsxs(StyledInputInfo, { children: [validationErrors && (jsx("div", { children: validationErrors.map((err, i) => {
                             return (jsx("p", Object.assign({ className: errorClass }, promptProps, { children: err }), i));
-                        }) })), maxLength && (jsxs("div", { className: y$1('count', { isMax: (value === null || value === void 0 ? void 0 : value.length) === maxLength }), children: [(value === null || value === void 0 ? void 0 : value.length) || 0, " / ", maxLength] }))] }))] }));
+                        }) })), maxLength && (jsxs("div", { className: classNames('count', { isMax: (value === null || value === void 0 ? void 0 : value.length) === maxLength }), children: [(value === null || value === void 0 ? void 0 : value.length) || 0, " / ", maxLength] }))] }))] }));
 }
 
 /*
@@ -25667,7 +25667,7 @@ function RadioGroup$1(props) {
     };
     const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(radioGroupState);
     const { radioGroupProps, labelProps } = $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state);
-    return (jsxs(StyledRadioGroup$1, Object.assign({}, radioGroupProps, { className: y$1(className, { horizontal: orientation === 'horizontal' }), "data-cy": props['data-cy'], id: id, children: [label && (jsx("div", Object.assign({ className: "groupLabel" }, labelProps, { children: label }))), jsx(RadioContext.Provider, { value: state, children: children })] })));
+    return (jsxs(StyledRadioGroup$1, Object.assign({}, radioGroupProps, { className: classNames(className, { horizontal: orientation === 'horizontal' }), "data-cy": props['data-cy'], id: id, children: [label && (jsx("div", Object.assign({ className: "groupLabel" }, labelProps, { children: label }))), jsx(RadioContext.Provider, { value: state, children: children })] })));
 }
 /**
  * A single radio button and its label; no styling is applied, and the native
@@ -25687,7 +25687,7 @@ function Radio$1(props) {
     else {
         isSelected = state.selectedValue === props.value;
     }
-    return (jsxs("label", { className: y$1(className, {
+    return (jsxs("label", { className: classNames(className, {
             disabled: isDisabled || state.isDisabled,
             selected: isSelected,
             focused: isFocusVisible,
@@ -40910,7 +40910,11 @@ function ModalBase(props) {
         ariaProps['describedby'] = describedBy;
     }
     // Try to render modal within the theme-root, otherwise attach to the root
-    const parentSelector = () => document.getElementById('theme-root') || document.getElementById('root');
+    const parentSelector = () => {
+        const themeRoot = document.getElementById('theme-root');
+        const root = document.getElementById('root');
+        return themeRoot || root || document.body;
+    };
     return (jsx(StyledModalBase, { ariaHideApp: false, "data-cy": props['data-cy'], aria: ariaProps, className: className || 'baseModal', contentLabel: 'labelText' in props ? props.labelText : null, id: id, isOpen: open, node: node, onRequestClose: clickToDismiss, parentSelector: parentSelector, shouldCloseOnEsc: !preventEscDismiss, shouldReturnFocusAfterClose: !preventReturnFocus, maxWidth: maxWidth, children: children }));
 }
 
@@ -40936,7 +40940,7 @@ const StyledLoadingAwareContainer = styled.div `
  */
 function LoadingAwareContainer(props) {
     const { children, className, isLoading, style } = props;
-    return (jsxs(StyledLoadingAwareContainer, { className: y$1({ loading: isLoading }, className), style: style, children: [jsx(StyledStatusContainer, { role: "status", children: isLoading && 'Loading' }), isLoading ? jsx(LoadingIndicator, {}) : jsx(Fragment, { children: children })] }));
+    return (jsxs(StyledLoadingAwareContainer, { className: classNames({ loading: isLoading }, className), style: style, children: [jsx(StyledStatusContainer, { role: "status", children: isLoading && 'Loading' }), isLoading ? jsx(LoadingIndicator, {}) : jsx(Fragment, { children: children })] }));
 }
 
 const StyledTextTruncate = styled.span ``;
@@ -41031,7 +41035,7 @@ const StyledToggle = styled.label `
 const Toggle = (props) => {
     const { disabled, onChange, value, className, id, checkedIconName, notCheckedIconName, iconSize, } = props;
     const defaultIconStyle = { width: '5px', height: '5px' };
-    return (jsxs(StyledToggle, { className: y$1(className, {
+    return (jsxs(StyledToggle, { className: classNames(className, {
             disabled,
         }), "data-cy": props['data-cy'], id: id, children: [jsx("input", { "aria-label": props['aria-label'], type: "checkbox", disabled: disabled, checked: value, onChange: onChange }), jsx("span", { className: "slider round" }), checkedIconName && (jsx(Icon, { size: iconSize, name: checkedIconName, className: "checked-icon", style: iconSize ? undefined : defaultIconStyle })), notCheckedIconName && (jsx(Icon, { size: iconSize, name: notCheckedIconName, className: "not-checked-icon", style: iconSize ? undefined : defaultIconStyle }))] }));
 };
@@ -42534,7 +42538,7 @@ const computePosition = (reference, floating, options) => {
 * @copyright ReactTooltip Team
 * @license MIT
 */
-const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,base:!1};function S({css:e,id:t=w,type:o="base",ref:r}){var l,n;if(!e||"undefined"==typeof document||b[o])return;if("core"===o&&"undefined"!=typeof process&&(null===(l=null===process||void 0===process?void 0:process.env)||void 0===l?void 0:l.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if("base"!==o&&"undefined"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;"core"===o&&(t=h),r||(r={});const{insertAt:c}=r;if(document.getElementById(t))return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \`removeStyle()\` first`);const i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.id=t,s.type="text/css","top"===c&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=!0;}const E=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:r="top",offset:l=10,strategy:n="absolute",middlewares:c=[offset(Number(l)),flip({fallbackAxisSideDirection:"start"}),shift({padding:5})],border:i})=>{if(!e)return {tooltipStyles:{},tooltipArrowStyles:{},place:r};if(null===t)return {tooltipStyles:{},tooltipArrowStyles:{},place:r};const s=c;return o?(s.push(arrow({element:o,padding:5})),computePosition(e,t,{placement:r,strategy:n,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:r})=>{var l,n;const c={left:`${e}px`,top:`${t}px`,border:i},{x:s,y:a}=null!==(l=r.arrow)&&void 0!==l?l:{x:0,y:0},u=null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom",d=i&&{borderBottom:i,borderRight:i};let p=0;if(i){const e=`${i}`.match(/(\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1;}return {tooltipStyles:c,tooltipArrowStyles:{left:null!=s?`${s}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",...d,[u]:`-${4+p}px`},place:o}}))):computePosition(e,t,{placement:"bottom",strategy:n,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))},A=(e,t)=>!("CSS"in window&&"supports"in window.CSS)||window.CSS.supports(e,t),_=(e,t,o)=>{let r=null;const l=function(...l){const n=()=>{r=null;};!r&&(e.apply(this,l),r=setTimeout(n,t));};return l.cancel=()=>{r&&(clearTimeout(r),r=null);},l},O=e=>null!==e&&!Array.isArray(e)&&"object"==typeof e,T=(e,t)=>{if(e===t)return !0;if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&e.every(((e,o)=>T(e,t[o])));if(Array.isArray(e)!==Array.isArray(t))return !1;if(!O(e)||!O(t))return e===t;const o=Object.keys(e),r=Object.keys(t);return o.length===r.length&&o.every((o=>T(e[o],t[o])))},k=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return !1;const t=getComputedStyle(e);return ["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return "auto"===o||"scroll"===o}))},C=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(k(t))return t;t=t.parentElement;}return document.scrollingElement||document.documentElement},L="undefined"!=typeof window?useLayoutEffect:useEffect,R="DEFAULT_TOOLTIP_ID",x={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},N=createContext({getTooltipData:()=>x});function I(e=R){return useContext(N).getTooltipData(e)}var B={tooltip:"core-styles-module_tooltip__3vRRp",fixed:"core-styles-module_fixed__pcSol",arrow:"core-styles-module_arrow__cvMwQ",noArrow:"core-styles-module_noArrow__xock6",clickable:"core-styles-module_clickable__ZuTTB",show:"core-styles-module_show__Nt9eE",closing:"core-styles-module_closing__sGnxF"},z={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const D=({forwardRef:t,id:r,className:c,classNameArrow:i,variant:u="dark",anchorId:d,anchorSelect:p,place:v="top",offset:m=10,events:h=["hover"],openOnClick:w=!1,positionStrategy:b="absolute",middlewares:S,wrapper:g,delayShow:A=0,delayHide:O=0,float:k=!1,hidden:R=!1,noArrow:x=!1,clickable:N=!1,closeOnEsc:$=!1,closeOnScroll:j=!1,closeOnResize:D=!1,openEvents:q,closeEvents:H,globalCloseEvents:M,imperativeModeOnly:W,style:P,position:V,afterShow:F,afterHide:K,content:U,contentWrapperRef:X,isOpen:Y,defaultIsOpen:G=!1,setIsOpen:Z,activeAnchor:J,setActiveAnchor:Q,border:ee,opacity:te,arrowColor:oe,role:re="tooltip"})=>{var le;const ne=useRef(null),ce=useRef(null),ie=useRef(null),se=useRef(null),ae=useRef(null),[ue,de]=useState({tooltipStyles:{},tooltipArrowStyles:{},place:v}),[pe,ve]=useState(!1),[me,fe]=useState(!1),[ye,he]=useState(null),we=useRef(!1),be=useRef(null),{anchorRefs:Se,setActiveAnchor:ge}=I(r),Ee=useRef(!1),[Ae,_e]=useState([]),Oe=useRef(!1),Te=w||h.includes("click"),ke=Te||(null==q?void 0:q.click)||(null==q?void 0:q.dblclick)||(null==q?void 0:q.mousedown),Ce=q?{...q}:{mouseenter:!0,focus:!0,click:!1,dblclick:!1,mousedown:!1};!q&&Te&&Object.assign(Ce,{mouseenter:!1,focus:!1,click:!0});const Le=H?{...H}:{mouseleave:!0,blur:!0,click:!1,dblclick:!1,mouseup:!1};!H&&Te&&Object.assign(Le,{mouseleave:!1,blur:!1});const Re=M?{...M}:{escape:$||!1,scroll:j||!1,resize:D||!1,clickOutsideAnchor:ke||!1};W&&(Object.assign(Ce,{mouseenter:!1,focus:!1,click:!1,dblclick:!1,mousedown:!1}),Object.assign(Le,{mouseleave:!1,blur:!1,click:!1,dblclick:!1,mouseup:!1}),Object.assign(Re,{escape:!1,scroll:!1,resize:!1,clickOutsideAnchor:!1})),L((()=>(Oe.current=!0,()=>{Oe.current=!1;})),[]);const xe=e=>{Oe.current&&(e&&fe(!0),setTimeout((()=>{Oe.current&&(null==Z||Z(e),void 0===Y&&ve(e));}),10));};useEffect((()=>{if(void 0===Y)return ()=>null;Y&&fe(!0);const e=setTimeout((()=>{ve(Y);}),10);return ()=>{clearTimeout(e);}}),[Y]),useEffect((()=>{if(pe!==we.current)if(ae.current&&clearTimeout(ae.current),we.current=pe,pe)null==F||F();else {const e=(e=>{const t=e.match(/^([\d.]+)(ms|s)$/);if(!t)return 0;const[,o,r]=t;return Number(o)*("ms"===r?1:1e3)})(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));ae.current=setTimeout((()=>{fe(!1),he(null),null==K||K();}),e+25);}}),[pe]);const Ne=e=>{de((t=>T(t,e)?t:e));},$e=(e=A)=>{ie.current&&clearTimeout(ie.current),me?xe(!0):ie.current=setTimeout((()=>{xe(!0);}),e);},Ie=(e=O)=>{se.current&&clearTimeout(se.current),se.current=setTimeout((()=>{Ee.current||xe(!1);}),e);},je=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return Q(null),void ge({current:null});A?$e():xe(!0),Q(o),ge({current:o}),se.current&&clearTimeout(se.current);},Be=()=>{N?Ie(O||100):O?Ie():xe(!1),ie.current&&clearTimeout(ie.current);},ze=({x:e,y:t})=>{var o;const r={getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})};E({place:null!==(o=null==ye?void 0:ye.place)&&void 0!==o?o:v,offset:m,elementReference:r,tooltipReference:ne.current,tooltipArrowReference:ce.current,strategy:b,middlewares:S,border:ee}).then((e=>{Ne(e);}));},De=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};ze(o),be.current=o;},qe=e=>{var t;if(!pe)return;const o=e.target;if(!o.isConnected)return;if(null===(t=ne.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${d}']`),...Ae].some((e=>null==e?void 0:e.contains(o)))||(xe(!1),ie.current&&clearTimeout(ie.current));},He=_(je,50),Me=_(Be,50),We=e=>{Me.cancel(),He(e);},Pe=()=>{He.cancel(),Me();},Ve=useCallback((()=>{var e,t;const o=null!==(e=null==ye?void 0:ye.position)&&void 0!==e?e:V;o?ze(o):k?be.current&&ze(be.current):(null==J?void 0:J.isConnected)&&E({place:null!==(t=null==ye?void 0:ye.place)&&void 0!==t?t:v,offset:m,elementReference:J,tooltipReference:ne.current,tooltipArrowReference:ce.current,strategy:b,middlewares:S,border:ee}).then((e=>{Oe.current&&Ne(e);}));}),[pe,J,U,P,v,null==ye?void 0:ye.place,m,b,V,null==ye?void 0:ye.position,k]);useEffect((()=>{var e,t;const o=new Set(Se);Ae.forEach((e=>{o.add({current:e});}));const r=document.querySelector(`[id='${d}']`);r&&o.add({current:r});const l=()=>{xe(!1);},n=C(J),c=C(ne.current);Re.scroll&&(window.addEventListener("scroll",l),null==n||n.addEventListener("scroll",l),null==c||c.addEventListener("scroll",l));let i=null;Re.resize?window.addEventListener("resize",l):J&&ne.current&&(i=autoUpdate(J,ne.current,Ve,{ancestorResize:!0,elementResize:!0,layoutShift:!0}));const s=e=>{"Escape"===e.key&&xe(!1);};Re.escape&&window.addEventListener("keydown",s),Re.clickOutsideAnchor&&window.addEventListener("click",qe);const a=[],u=e=>{pe&&(null==e?void 0:e.target)===J||je(e);},p=e=>{pe&&(null==e?void 0:e.target)===J&&Be();},v=["mouseenter","mouseleave","focus","blur"],m=["click","dblclick","mousedown","mouseup"];Object.entries(Ce).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:We}):m.includes(e)&&a.push({event:e,listener:u}));})),Object.entries(Le).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Pe}):m.includes(e)&&a.push({event:e,listener:p}));})),k&&a.push({event:"pointermove",listener:De});const y=()=>{Ee.current=!0;},h=()=>{Ee.current=!1,Be();};return N&&!ke&&(null===(e=ne.current)||void 0===e||e.addEventListener("mouseenter",y),null===(t=ne.current)||void 0===t||t.addEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.addEventListener(e,t);}));})),()=>{var e,t;Re.scroll&&(window.removeEventListener("scroll",l),null==n||n.removeEventListener("scroll",l),null==c||c.removeEventListener("scroll",l)),Re.resize?window.removeEventListener("resize",l):null==i||i(),Re.clickOutsideAnchor&&window.removeEventListener("click",qe),Re.escape&&window.removeEventListener("keydown",s),N&&!ke&&(null===(e=ne.current)||void 0===e||e.removeEventListener("mouseenter",y),null===(t=ne.current)||void 0===t||t.removeEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.removeEventListener(e,t);}));}));}}),[J,Ve,me,Se,Ae,q,H,M,Te,A,O]),useEffect((()=>{var e,t;let o=null!==(t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:"";!o&&r&&(o=`[data-tooltip-id='${r.replace(/'/g,"\\'")}']`);const l=new MutationObserver((e=>{const t=[],l=[];e.forEach((e=>{if("attributes"===e.type&&"data-tooltip-id"===e.attributeName){e.target.getAttribute("data-tooltip-id")===r?t.push(e.target):e.oldValue===r&&l.push(e.target);}if("childList"===e.type){if(J){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{l.push(...t.filter((e=>e.matches(o)))),l.push(...t.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}t.some((e=>{var t;return !!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,J))&&(fe(!1),xe(!1),Q(null),ie.current&&clearTimeout(ie.current),se.current&&clearTimeout(se.current),!0)}));}if(o)try{const r=[...e.addedNodes].filter((e=>1===e.nodeType));t.push(...r.filter((e=>e.matches(o)))),t.push(...r.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}}})),(t.length||l.length)&&_e((e=>[...e.filter((e=>!l.includes(e))),...t]));}));return l.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"],attributeOldValue:!0}),()=>{l.disconnect();}}),[r,p,null==ye?void 0:ye.anchorSelect,J]),useEffect((()=>{Ve();}),[Ve]),useEffect((()=>{if(!(null==X?void 0:X.current))return ()=>null;const e=new ResizeObserver((()=>{setTimeout((()=>Ve()));}));return e.observe(X.current),()=>{e.disconnect();}}),[U,null==X?void 0:X.current]),useEffect((()=>{var e;const t=document.querySelector(`[id='${d}']`),o=[...Ae,t];J&&o.includes(J)||Q(null!==(e=Ae[0])&&void 0!==e?e:t);}),[d,Ae,J]),useEffect((()=>(G&&xe(!0),()=>{ie.current&&clearTimeout(ie.current),se.current&&clearTimeout(se.current);})),[]),useEffect((()=>{var e;let t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p;if(!t&&r&&(t=`[data-tooltip-id='${r.replace(/'/g,"\\'")}']`),t)try{const e=Array.from(document.querySelectorAll(t));_e(e);}catch(e){_e([]);}}),[r,p,null==ye?void 0:ye.anchorSelect]),useEffect((()=>{ie.current&&(clearTimeout(ie.current),$e(A));}),[A]);const Fe=null!==(le=null==ye?void 0:ye.content)&&void 0!==le?le:U,Ke=pe&&Object.keys(ue.tooltipStyles).length>0;return useImperativeHandle(t,(()=>({open:e=>{if(null==e?void 0:e.anchorSelect)try{document.querySelector(e.anchorSelect);}catch(t){return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`)}he(null!=e?e:null),(null==e?void 0:e.delay)?$e(e.delay):xe(!0);},close:e=>{(null==e?void 0:e.delay)?Ie(e.delay):xe(!1);},activeAnchor:J,place:ue.place,isOpen:Boolean(me&&!R&&Fe&&Ke)}))),me&&!R&&Fe?e__default.createElement(g,{id:r,role:re,className:y$1("react-tooltip",B.tooltip,z.tooltip,z[u],c,`react-tooltip__place-${ue.place}`,B[Ke?"show":"closing"],Ke?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&B.fixed,N&&B.clickable),onTransitionEnd:e=>{ae.current&&clearTimeout(ae.current),pe||"opacity"!==e.propertyName||(fe(!1),he(null),null==K||K());},style:{...P,...ue.tooltipStyles,opacity:void 0!==te&&Ke?te:void 0},ref:ne},Fe,e__default.createElement(g,{className:y$1("react-tooltip-arrow",B.arrow,z.arrow,i,x&&B.noArrow),style:{...ue.tooltipArrowStyles,background:oe?`linear-gradient(to right bottom, transparent 50%, ${oe} 50%)`:void 0},ref:ce})):null},q=({content:t})=>e__default.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),H=e__default.forwardRef((({id:t,anchorId:r,anchorSelect:n,content:c,html:i,render:a,className:u,classNameArrow:d,variant:p="dark",place:v="top",offset:m=10,wrapper:f="div",children:h=null,events:w=["hover"],openOnClick:b=!1,positionStrategy:S="absolute",middlewares:g,delayShow:E=0,delayHide:_=0,float:O=!1,hidden:T=!1,noArrow:k=!1,clickable:C=!1,closeOnEsc:L=!1,closeOnScroll:R=!1,closeOnResize:x=!1,openEvents:N,closeEvents:$,globalCloseEvents:j,imperativeModeOnly:B=!1,style:z,position:H,isOpen:M,defaultIsOpen:W=!1,disableStyleInjection:P=!1,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,role:G="tooltip"},Z)=>{const[J,Q]=useState(c),[ee,te]=useState(i),[oe,re]=useState(v),[le,ne]=useState(p),[ce,ie]=useState(m),[se,ae]=useState(E),[ue,de]=useState(_),[pe,ve]=useState(O),[me,fe]=useState(T),[ye,he]=useState(f),[we,be]=useState(w),[Se,ge]=useState(S),[Ee,Ae]=useState(null),[_e,Oe]=useState(null),Te=useRef(P),{anchorRefs:ke,activeAnchor:Ce}=I(t),Le=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var r;if(o.startsWith("data-tooltip-")){t[o.replace(/^data-tooltip-/,"")]=null!==(r=null==e?void 0:e.getAttribute(o))&&void 0!==r?r:null;}return t}),{}),Re=e=>{const t={place:e=>{var t;re(null!==(t=e)&&void 0!==t?t:v);},content:e=>{Q(null!=e?e:c);},html:e=>{te(null!=e?e:i);},variant:e=>{var t;ne(null!==(t=e)&&void 0!==t?t:p);},offset:e=>{ie(null===e?m:Number(e));},wrapper:e=>{var t;he(null!==(t=e)&&void 0!==t?t:f);},events:e=>{const t=null==e?void 0:e.split(" ");be(null!=t?t:w);},"position-strategy":e=>{var t;ge(null!==(t=e)&&void 0!==t?t:S);},"delay-show":e=>{ae(null===e?E:Number(e));},"delay-hide":e=>{de(null===e?_:Number(e));},float:e=>{ve(null===e?O:"true"===e);},hidden:e=>{fe(null===e?T:"true"===e);},"class-name":e=>{Ae(e);}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var r;null===(r=t[e])||void 0===r||r.call(t,o);}));};useEffect((()=>{Q(c);}),[c]),useEffect((()=>{te(i);}),[i]),useEffect((()=>{re(v);}),[v]),useEffect((()=>{ne(p);}),[p]),useEffect((()=>{ie(m);}),[m]),useEffect((()=>{ae(E);}),[E]),useEffect((()=>{de(_);}),[_]),useEffect((()=>{ve(O);}),[O]),useEffect((()=>{fe(T);}),[T]),useEffect((()=>{ge(S);}),[S]),useEffect((()=>{Te.current!==P&&console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");}),[P]),useEffect((()=>{"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{detail:{disableCore:"core"===P,disableBase:P}}));}),[]),useEffect((()=>{var e;const o=new Set(ke);let l=n;if(!l&&t&&(l=`[data-tooltip-id='${t.replace(/'/g,"\\'")}']`),l)try{document.querySelectorAll(l).forEach((e=>{o.add({current:e});}));}catch(e){console.warn(`[react-tooltip] "${l}" is not a valid CSS selector`);}const c=document.querySelector(`[id='${r}']`);if(c&&o.add({current:c}),!o.size)return ()=>null;const i=null!==(e=null!=_e?_e:c)&&void 0!==e?e:Ce.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!i||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const o=Le(i);Re(o);}));})),a={attributes:!0,childList:!1,subtree:!1};if(i){const e=Le(i);Re(e),s.observe(i,a);}return ()=>{s.disconnect();}}),[ke,Ce,_e,r,n]),useEffect((()=>{(null==z?void 0:z.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),V&&!A("border",`${V}`)&&console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`),(null==z?void 0:z.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),F&&!A("opacity",`${F}`)&&console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);}),[]);let xe=h;const Ne=useRef(null);if(a){const t=a({content:(null==_e?void 0:_e.getAttribute("data-tooltip-content"))||J||null,activeAnchor:_e});xe=t?e__default.createElement("div",{ref:Ne,className:"react-tooltip-content-wrapper"},t):null;}else J&&(xe=J);ee&&(xe=e__default.createElement(q,{content:ee}));const $e={forwardRef:Z,id:t,anchorId:r,anchorSelect:n,className:y$1(u,Ee),classNameArrow:d,content:xe,contentWrapperRef:Ne,place:oe,variant:le,offset:ce,wrapper:ye,events:we,openOnClick:b,positionStrategy:Se,middlewares:g,delayShow:se,delayHide:ue,float:pe,hidden:me,noArrow:k,clickable:C,closeOnEsc:L,closeOnScroll:R,closeOnResize:x,openEvents:N,closeEvents:$,globalCloseEvents:j,imperativeModeOnly:B,style:z,position:H,isOpen:M,defaultIsOpen:W,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,activeAnchor:_e,setActiveAnchor:e=>Oe(e),role:G};return e__default.createElement(D,{...$e})}));"undefined"!=typeof window&&window.addEventListener("react-tooltip-inject-styles",(e=>{e.detail.disableCore||S({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,type:"core"}),e.detail.disableBase||S({css:`
+const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,base:!1};function S({css:e,id:t=w,type:o="base",ref:r}){var l,n;if(!e||"undefined"==typeof document||b[o])return;if("core"===o&&"undefined"!=typeof process&&(null===(l=null===process||void 0===process?void 0:process.env)||void 0===l?void 0:l.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if("base"!==o&&"undefined"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;"core"===o&&(t=h),r||(r={});const{insertAt:c}=r;if(document.getElementById(t))return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \`removeStyle()\` first`);const i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.id=t,s.type="text/css","top"===c&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=!0;}const E=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:r="top",offset:l=10,strategy:n="absolute",middlewares:c=[offset(Number(l)),flip({fallbackAxisSideDirection:"start"}),shift({padding:5})],border:i})=>{if(!e)return {tooltipStyles:{},tooltipArrowStyles:{},place:r};if(null===t)return {tooltipStyles:{},tooltipArrowStyles:{},place:r};const s=c;return o?(s.push(arrow({element:o,padding:5})),computePosition(e,t,{placement:r,strategy:n,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:r})=>{var l,n;const c={left:`${e}px`,top:`${t}px`,border:i},{x:s,y:a}=null!==(l=r.arrow)&&void 0!==l?l:{x:0,y:0},u=null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom",d=i&&{borderBottom:i,borderRight:i};let p=0;if(i){const e=`${i}`.match(/(\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1;}return {tooltipStyles:c,tooltipArrowStyles:{left:null!=s?`${s}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",...d,[u]:`-${4+p}px`},place:o}}))):computePosition(e,t,{placement:"bottom",strategy:n,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))},A=(e,t)=>!("CSS"in window&&"supports"in window.CSS)||window.CSS.supports(e,t),_=(e,t,o)=>{let r=null;const l=function(...l){const n=()=>{r=null;};!r&&(e.apply(this,l),r=setTimeout(n,t));};return l.cancel=()=>{r&&(clearTimeout(r),r=null);},l},O=e=>null!==e&&!Array.isArray(e)&&"object"==typeof e,T=(e,t)=>{if(e===t)return !0;if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&e.every(((e,o)=>T(e,t[o])));if(Array.isArray(e)!==Array.isArray(t))return !1;if(!O(e)||!O(t))return e===t;const o=Object.keys(e),r=Object.keys(t);return o.length===r.length&&o.every((o=>T(e[o],t[o])))},k=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return !1;const t=getComputedStyle(e);return ["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return "auto"===o||"scroll"===o}))},C=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(k(t))return t;t=t.parentElement;}return document.scrollingElement||document.documentElement},L="undefined"!=typeof window?useLayoutEffect:useEffect,R="DEFAULT_TOOLTIP_ID",x={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},N=createContext({getTooltipData:()=>x});function I(e=R){return useContext(N).getTooltipData(e)}var B={tooltip:"core-styles-module_tooltip__3vRRp",fixed:"core-styles-module_fixed__pcSol",arrow:"core-styles-module_arrow__cvMwQ",noArrow:"core-styles-module_noArrow__xock6",clickable:"core-styles-module_clickable__ZuTTB",show:"core-styles-module_show__Nt9eE",closing:"core-styles-module_closing__sGnxF"},z={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const D=({forwardRef:t,id:r,className:c,classNameArrow:i,variant:u="dark",anchorId:d,anchorSelect:p,place:v="top",offset:m=10,events:h=["hover"],openOnClick:w=!1,positionStrategy:b="absolute",middlewares:S,wrapper:g,delayShow:A=0,delayHide:O=0,float:k=!1,hidden:R=!1,noArrow:x=!1,clickable:N=!1,closeOnEsc:$=!1,closeOnScroll:j=!1,closeOnResize:D=!1,openEvents:q,closeEvents:H,globalCloseEvents:M,imperativeModeOnly:W,style:P,position:V,afterShow:F,afterHide:K,content:U,contentWrapperRef:X,isOpen:Y,defaultIsOpen:G=!1,setIsOpen:Z,activeAnchor:J,setActiveAnchor:Q,border:ee,opacity:te,arrowColor:oe,role:re="tooltip"})=>{var le;const ne=useRef(null),ce=useRef(null),ie=useRef(null),se=useRef(null),ae=useRef(null),[ue,de]=useState({tooltipStyles:{},tooltipArrowStyles:{},place:v}),[pe,ve]=useState(!1),[me,fe]=useState(!1),[ye,he]=useState(null),we=useRef(!1),be=useRef(null),{anchorRefs:Se,setActiveAnchor:ge}=I(r),Ee=useRef(!1),[Ae,_e]=useState([]),Oe=useRef(!1),Te=w||h.includes("click"),ke=Te||(null==q?void 0:q.click)||(null==q?void 0:q.dblclick)||(null==q?void 0:q.mousedown),Ce=q?{...q}:{mouseenter:!0,focus:!0,click:!1,dblclick:!1,mousedown:!1};!q&&Te&&Object.assign(Ce,{mouseenter:!1,focus:!1,click:!0});const Le=H?{...H}:{mouseleave:!0,blur:!0,click:!1,dblclick:!1,mouseup:!1};!H&&Te&&Object.assign(Le,{mouseleave:!1,blur:!1});const Re=M?{...M}:{escape:$||!1,scroll:j||!1,resize:D||!1,clickOutsideAnchor:ke||!1};W&&(Object.assign(Ce,{mouseenter:!1,focus:!1,click:!1,dblclick:!1,mousedown:!1}),Object.assign(Le,{mouseleave:!1,blur:!1,click:!1,dblclick:!1,mouseup:!1}),Object.assign(Re,{escape:!1,scroll:!1,resize:!1,clickOutsideAnchor:!1})),L((()=>(Oe.current=!0,()=>{Oe.current=!1;})),[]);const xe=e=>{Oe.current&&(e&&fe(!0),setTimeout((()=>{Oe.current&&(null==Z||Z(e),void 0===Y&&ve(e));}),10));};useEffect((()=>{if(void 0===Y)return ()=>null;Y&&fe(!0);const e=setTimeout((()=>{ve(Y);}),10);return ()=>{clearTimeout(e);}}),[Y]),useEffect((()=>{if(pe!==we.current)if(ae.current&&clearTimeout(ae.current),we.current=pe,pe)null==F||F();else {const e=(e=>{const t=e.match(/^([\d.]+)(ms|s)$/);if(!t)return 0;const[,o,r]=t;return Number(o)*("ms"===r?1:1e3)})(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));ae.current=setTimeout((()=>{fe(!1),he(null),null==K||K();}),e+25);}}),[pe]);const Ne=e=>{de((t=>T(t,e)?t:e));},$e=(e=A)=>{ie.current&&clearTimeout(ie.current),me?xe(!0):ie.current=setTimeout((()=>{xe(!0);}),e);},Ie=(e=O)=>{se.current&&clearTimeout(se.current),se.current=setTimeout((()=>{Ee.current||xe(!1);}),e);},je=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return Q(null),void ge({current:null});A?$e():xe(!0),Q(o),ge({current:o}),se.current&&clearTimeout(se.current);},Be=()=>{N?Ie(O||100):O?Ie():xe(!1),ie.current&&clearTimeout(ie.current);},ze=({x:e,y:t})=>{var o;const r={getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})};E({place:null!==(o=null==ye?void 0:ye.place)&&void 0!==o?o:v,offset:m,elementReference:r,tooltipReference:ne.current,tooltipArrowReference:ce.current,strategy:b,middlewares:S,border:ee}).then((e=>{Ne(e);}));},De=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};ze(o),be.current=o;},qe=e=>{var t;if(!pe)return;const o=e.target;if(!o.isConnected)return;if(null===(t=ne.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${d}']`),...Ae].some((e=>null==e?void 0:e.contains(o)))||(xe(!1),ie.current&&clearTimeout(ie.current));},He=_(je,50),Me=_(Be,50),We=e=>{Me.cancel(),He(e);},Pe=()=>{He.cancel(),Me();},Ve=useCallback((()=>{var e,t;const o=null!==(e=null==ye?void 0:ye.position)&&void 0!==e?e:V;o?ze(o):k?be.current&&ze(be.current):(null==J?void 0:J.isConnected)&&E({place:null!==(t=null==ye?void 0:ye.place)&&void 0!==t?t:v,offset:m,elementReference:J,tooltipReference:ne.current,tooltipArrowReference:ce.current,strategy:b,middlewares:S,border:ee}).then((e=>{Oe.current&&Ne(e);}));}),[pe,J,U,P,v,null==ye?void 0:ye.place,m,b,V,null==ye?void 0:ye.position,k]);useEffect((()=>{var e,t;const o=new Set(Se);Ae.forEach((e=>{o.add({current:e});}));const r=document.querySelector(`[id='${d}']`);r&&o.add({current:r});const l=()=>{xe(!1);},n=C(J),c=C(ne.current);Re.scroll&&(window.addEventListener("scroll",l),null==n||n.addEventListener("scroll",l),null==c||c.addEventListener("scroll",l));let i=null;Re.resize?window.addEventListener("resize",l):J&&ne.current&&(i=autoUpdate(J,ne.current,Ve,{ancestorResize:!0,elementResize:!0,layoutShift:!0}));const s=e=>{"Escape"===e.key&&xe(!1);};Re.escape&&window.addEventListener("keydown",s),Re.clickOutsideAnchor&&window.addEventListener("click",qe);const a=[],u=e=>{pe&&(null==e?void 0:e.target)===J||je(e);},p=e=>{pe&&(null==e?void 0:e.target)===J&&Be();},v=["mouseenter","mouseleave","focus","blur"],m=["click","dblclick","mousedown","mouseup"];Object.entries(Ce).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:We}):m.includes(e)&&a.push({event:e,listener:u}));})),Object.entries(Le).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Pe}):m.includes(e)&&a.push({event:e,listener:p}));})),k&&a.push({event:"pointermove",listener:De});const y=()=>{Ee.current=!0;},h=()=>{Ee.current=!1,Be();};return N&&!ke&&(null===(e=ne.current)||void 0===e||e.addEventListener("mouseenter",y),null===(t=ne.current)||void 0===t||t.addEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.addEventListener(e,t);}));})),()=>{var e,t;Re.scroll&&(window.removeEventListener("scroll",l),null==n||n.removeEventListener("scroll",l),null==c||c.removeEventListener("scroll",l)),Re.resize?window.removeEventListener("resize",l):null==i||i(),Re.clickOutsideAnchor&&window.removeEventListener("click",qe),Re.escape&&window.removeEventListener("keydown",s),N&&!ke&&(null===(e=ne.current)||void 0===e||e.removeEventListener("mouseenter",y),null===(t=ne.current)||void 0===t||t.removeEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.removeEventListener(e,t);}));}));}}),[J,Ve,me,Se,Ae,q,H,M,Te,A,O]),useEffect((()=>{var e,t;let o=null!==(t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:"";!o&&r&&(o=`[data-tooltip-id='${r.replace(/'/g,"\\'")}']`);const l=new MutationObserver((e=>{const t=[],l=[];e.forEach((e=>{if("attributes"===e.type&&"data-tooltip-id"===e.attributeName){e.target.getAttribute("data-tooltip-id")===r?t.push(e.target):e.oldValue===r&&l.push(e.target);}if("childList"===e.type){if(J){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{l.push(...t.filter((e=>e.matches(o)))),l.push(...t.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}t.some((e=>{var t;return !!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,J))&&(fe(!1),xe(!1),Q(null),ie.current&&clearTimeout(ie.current),se.current&&clearTimeout(se.current),!0)}));}if(o)try{const r=[...e.addedNodes].filter((e=>1===e.nodeType));t.push(...r.filter((e=>e.matches(o)))),t.push(...r.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}}})),(t.length||l.length)&&_e((e=>[...e.filter((e=>!l.includes(e))),...t]));}));return l.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"],attributeOldValue:!0}),()=>{l.disconnect();}}),[r,p,null==ye?void 0:ye.anchorSelect,J]),useEffect((()=>{Ve();}),[Ve]),useEffect((()=>{if(!(null==X?void 0:X.current))return ()=>null;const e=new ResizeObserver((()=>{setTimeout((()=>Ve()));}));return e.observe(X.current),()=>{e.disconnect();}}),[U,null==X?void 0:X.current]),useEffect((()=>{var e;const t=document.querySelector(`[id='${d}']`),o=[...Ae,t];J&&o.includes(J)||Q(null!==(e=Ae[0])&&void 0!==e?e:t);}),[d,Ae,J]),useEffect((()=>(G&&xe(!0),()=>{ie.current&&clearTimeout(ie.current),se.current&&clearTimeout(se.current);})),[]),useEffect((()=>{var e;let t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p;if(!t&&r&&(t=`[data-tooltip-id='${r.replace(/'/g,"\\'")}']`),t)try{const e=Array.from(document.querySelectorAll(t));_e(e);}catch(e){_e([]);}}),[r,p,null==ye?void 0:ye.anchorSelect]),useEffect((()=>{ie.current&&(clearTimeout(ie.current),$e(A));}),[A]);const Fe=null!==(le=null==ye?void 0:ye.content)&&void 0!==le?le:U,Ke=pe&&Object.keys(ue.tooltipStyles).length>0;return useImperativeHandle(t,(()=>({open:e=>{if(null==e?void 0:e.anchorSelect)try{document.querySelector(e.anchorSelect);}catch(t){return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`)}he(null!=e?e:null),(null==e?void 0:e.delay)?$e(e.delay):xe(!0);},close:e=>{(null==e?void 0:e.delay)?Ie(e.delay):xe(!1);},activeAnchor:J,place:ue.place,isOpen:Boolean(me&&!R&&Fe&&Ke)}))),me&&!R&&Fe?e__default.createElement(g,{id:r,role:re,className:classNames("react-tooltip",B.tooltip,z.tooltip,z[u],c,`react-tooltip__place-${ue.place}`,B[Ke?"show":"closing"],Ke?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&B.fixed,N&&B.clickable),onTransitionEnd:e=>{ae.current&&clearTimeout(ae.current),pe||"opacity"!==e.propertyName||(fe(!1),he(null),null==K||K());},style:{...P,...ue.tooltipStyles,opacity:void 0!==te&&Ke?te:void 0},ref:ne},Fe,e__default.createElement(g,{className:classNames("react-tooltip-arrow",B.arrow,z.arrow,i,x&&B.noArrow),style:{...ue.tooltipArrowStyles,background:oe?`linear-gradient(to right bottom, transparent 50%, ${oe} 50%)`:void 0},ref:ce})):null},q=({content:t})=>e__default.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),H=e__default.forwardRef((({id:t,anchorId:r,anchorSelect:n,content:c,html:i,render:a,className:u,classNameArrow:d,variant:p="dark",place:v="top",offset:m=10,wrapper:f="div",children:h=null,events:w=["hover"],openOnClick:b=!1,positionStrategy:S="absolute",middlewares:g,delayShow:E=0,delayHide:_=0,float:O=!1,hidden:T=!1,noArrow:k=!1,clickable:C=!1,closeOnEsc:L=!1,closeOnScroll:R=!1,closeOnResize:x=!1,openEvents:N,closeEvents:$,globalCloseEvents:j,imperativeModeOnly:B=!1,style:z,position:H,isOpen:M,defaultIsOpen:W=!1,disableStyleInjection:P=!1,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,role:G="tooltip"},Z)=>{const[J,Q]=useState(c),[ee,te]=useState(i),[oe,re]=useState(v),[le,ne]=useState(p),[ce,ie]=useState(m),[se,ae]=useState(E),[ue,de]=useState(_),[pe,ve]=useState(O),[me,fe]=useState(T),[ye,he]=useState(f),[we,be]=useState(w),[Se,ge]=useState(S),[Ee,Ae]=useState(null),[_e,Oe]=useState(null),Te=useRef(P),{anchorRefs:ke,activeAnchor:Ce}=I(t),Le=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var r;if(o.startsWith("data-tooltip-")){t[o.replace(/^data-tooltip-/,"")]=null!==(r=null==e?void 0:e.getAttribute(o))&&void 0!==r?r:null;}return t}),{}),Re=e=>{const t={place:e=>{var t;re(null!==(t=e)&&void 0!==t?t:v);},content:e=>{Q(null!=e?e:c);},html:e=>{te(null!=e?e:i);},variant:e=>{var t;ne(null!==(t=e)&&void 0!==t?t:p);},offset:e=>{ie(null===e?m:Number(e));},wrapper:e=>{var t;he(null!==(t=e)&&void 0!==t?t:f);},events:e=>{const t=null==e?void 0:e.split(" ");be(null!=t?t:w);},"position-strategy":e=>{var t;ge(null!==(t=e)&&void 0!==t?t:S);},"delay-show":e=>{ae(null===e?E:Number(e));},"delay-hide":e=>{de(null===e?_:Number(e));},float:e=>{ve(null===e?O:"true"===e);},hidden:e=>{fe(null===e?T:"true"===e);},"class-name":e=>{Ae(e);}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var r;null===(r=t[e])||void 0===r||r.call(t,o);}));};useEffect((()=>{Q(c);}),[c]),useEffect((()=>{te(i);}),[i]),useEffect((()=>{re(v);}),[v]),useEffect((()=>{ne(p);}),[p]),useEffect((()=>{ie(m);}),[m]),useEffect((()=>{ae(E);}),[E]),useEffect((()=>{de(_);}),[_]),useEffect((()=>{ve(O);}),[O]),useEffect((()=>{fe(T);}),[T]),useEffect((()=>{ge(S);}),[S]),useEffect((()=>{Te.current!==P&&console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");}),[P]),useEffect((()=>{"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{detail:{disableCore:"core"===P,disableBase:P}}));}),[]),useEffect((()=>{var e;const o=new Set(ke);let l=n;if(!l&&t&&(l=`[data-tooltip-id='${t.replace(/'/g,"\\'")}']`),l)try{document.querySelectorAll(l).forEach((e=>{o.add({current:e});}));}catch(e){console.warn(`[react-tooltip] "${l}" is not a valid CSS selector`);}const c=document.querySelector(`[id='${r}']`);if(c&&o.add({current:c}),!o.size)return ()=>null;const i=null!==(e=null!=_e?_e:c)&&void 0!==e?e:Ce.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!i||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const o=Le(i);Re(o);}));})),a={attributes:!0,childList:!1,subtree:!1};if(i){const e=Le(i);Re(e),s.observe(i,a);}return ()=>{s.disconnect();}}),[ke,Ce,_e,r,n]),useEffect((()=>{(null==z?void 0:z.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),V&&!A("border",`${V}`)&&console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`),(null==z?void 0:z.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),F&&!A("opacity",`${F}`)&&console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);}),[]);let xe=h;const Ne=useRef(null);if(a){const t=a({content:(null==_e?void 0:_e.getAttribute("data-tooltip-content"))||J||null,activeAnchor:_e});xe=t?e__default.createElement("div",{ref:Ne,className:"react-tooltip-content-wrapper"},t):null;}else J&&(xe=J);ee&&(xe=e__default.createElement(q,{content:ee}));const $e={forwardRef:Z,id:t,anchorId:r,anchorSelect:n,className:classNames(u,Ee),classNameArrow:d,content:xe,contentWrapperRef:Ne,place:oe,variant:le,offset:ce,wrapper:ye,events:we,openOnClick:b,positionStrategy:Se,middlewares:g,delayShow:se,delayHide:ue,float:pe,hidden:me,noArrow:k,clickable:C,closeOnEsc:L,closeOnScroll:R,closeOnResize:x,openEvents:N,closeEvents:$,globalCloseEvents:j,imperativeModeOnly:B,style:z,position:H,isOpen:M,defaultIsOpen:W,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,activeAnchor:_e,setActiveAnchor:e=>Oe(e),role:G};return e__default.createElement(D,{...$e})}));"undefined"!=typeof window&&window.addEventListener("react-tooltip-inject-styles",(e=>{e.detail.disableCore||S({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,type:"core"}),e.detail.disableBase||S({css:`
 .styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:"base"});}));
 
 const StyledTooltip = styled.div `
@@ -42634,5 +42638,14 @@ const Tooltip = (props) => {
                 openOnClick: props.clickToShow, id: props.for, delayShow: props.delayShow, delayHide: props.delayHide, children: props.children })] }));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Popper, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Select$1 as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+const Pill = (_a) => {
+    var { value, status = 'info', size = 'sm' } = _a, rest = __rest$1(_a, ["value", "status", "size"]);
+    const className = classNames('pill', {
+        [`pill--${status}`]: status,
+        [`pill--${size}`]: size,
+    });
+    return (jsx("div", Object.assign({ className: className }, rest, { children: value })));
+};
+
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Popper, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Select$1 as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map