@linzjs/lui 24.15.0 → 24.16.1

package/dist/lui.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { forwardRef as forwardRef$1, useState, useRef, useCallback, useEffect, useContext, createContext, useMemo, Fragment, useLayoutEffect, Component, cloneElement, useId as useId$1, useInsertionEffect as useInsertionEffect$1, Children, isValidElement, createElement, useImperativeHandle, useReducer } from 'react';
+import React__default, { forwardRef as forwardRef$1, useState, useEffect, useRef, useCallback, useContext, createContext, useMemo, Fragment, useLayoutEffect, Component, cloneElement, useId as useId$1, useInsertionEffect as useInsertionEffect$1, Children, isValidElement, createElement, useImperativeHandle, useReducer } from 'react';
 import { Menu as Menu$2, ControlledMenu, applyStatics, MenuItem, SubMenu, MenuDivider, MenuHeader, useMenuState, FocusableItem } from '@szhsin/react-menu';
 import lottie from 'lottie-web/build/player/lottie_light';
-import crypto$1 from 'crypto';
 import ReactDOM, { createPortal, flushSync } from 'react-dom';
+import crypto$1 from 'crypto';
 import { jsx as jsx$1, Fragment as Fragment$1, jsxs } from 'react/jsx-runtime';
 
 function r$3(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$3(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$3(e))&&(n&&(n+=" "),n+=t);return n}
@@ -145,6 +145,9 @@ iconMap['ic_add_to_csv'] = (React__default.createElement("svg", { viewBox: "0 0
     React__default.createElement("path", { d: "M5 9c0 .3.2 1 1 1s1-.7 1-1V7h2c.3 0 1-.2 1-1s-.7-1-1-1H7V3c0-.3-.2-1-1-1s-1 .7-1 1v2H3c-.3 0-1 .2-1 1s.7 1 1 1h2z" })));
 iconMap['ic_add_to_list'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("path", { d: "M13 10H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1m0-4H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1m5 8v-3c0-.55-.45-1-1-1s-1 .45-1 1v3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1zM3 16h6c.55 0 1-.45 1-1s-.45-1-1-1H3c-.55 0-1 .45-1 1s.45 1 1 1" })));
+iconMap['ic_add_to_parcels'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("path", { d: "M3 3V11H11V3H3ZM9 9H5V5H9V9ZM3 13V21H11V13H3ZM9 19H5V15H9V19ZM13 3V11H21V3H13ZM19 9H15V5H19V9Z" }),
+    React__default.createElement("path", { d: "M22 18C22 17.4477 21.5523 17 21 17H19V15C19 14.4477 18.5523 14 18 14C17.4477 14 17 14.4477 17 15V17H15C14.4477 17 14 17.4477 14 18C14 18.5523 14.4477 19 15 19H17V21C17 21.5523 17.4477 22 18 22C18.5523 22 19 21.5523 19 21V19H21C21.5523 19 22 18.5523 22 18Z" })));
 iconMap['ic_add_to_statutory_action'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("path", { d: "M18 7V11C18 11.5523 17.5523 12 17 12H11V7H18ZM13 10H16V9H13V10Z" }),
     React__default.createElement("path", { d: "M6 10H10V12H6V10Z" }),
@@ -206,6 +209,8 @@ iconMap['ic_arrow_forward_ios'] = (React__default.createElement("svg", { xmlns:
     React__default.createElement("path", { d: "m5.93 4.125 2.156-2.109L18.07 12l-9.984 9.984-2.156-2.109L13.852 12z" })));
 iconMap['ic_arrow_forward_right'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("path", { d: "M5.027 13.05h11.47l-5.012 5.144c-.4.412-.4 1.086 0 1.498.4.41 1.048.41 1.448 0l6.767-6.949c.4-.41.4-1.075 0-1.486l-6.767-6.949a1.004 1.004 0 0 0-1.448 0 1.07 1.07 0 0 0 0 1.487l5.011 5.145H5.026c-.564 0-1.026.475-1.026 1.055s.462 1.054 1.027 1.054Z" })));
+iconMap['ic_arrow_up_left'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("path", { d: "M7.82499 9.9998L10.725 12.8998C10.925 13.0998 11.0208 13.3331 11.0125 13.5998C11.0042 13.8665 10.9083 14.0998 10.725 14.2998C10.525 14.4998 10.2917 14.604 10.025 14.6123C9.75832 14.6206 9.52499 14.5248 9.32499 14.3248L4.69999 9.6998C4.59999 9.5998 4.52915 9.49147 4.48749 9.3748C4.44582 9.25814 4.42499 9.13314 4.42499 8.9998C4.42499 8.86647 4.44582 8.74147 4.48749 8.6248C4.52915 8.50814 4.59999 8.3998 4.69999 8.2998L9.27499 3.7248C9.47499 3.5248 9.71249 3.4248 9.98749 3.4248C10.2625 3.4248 10.5 3.5248 10.7 3.7248C10.9 3.9248 11 4.15814 11 4.4248C11 4.69147 10.9 4.9248 10.7 5.1248L7.82499 7.9998H17C17.55 7.9998 18.0208 8.19564 18.4125 8.5873C18.8042 8.97897 19 9.4498 19 9.9998V18.9998C19 19.2831 18.9042 19.5206 18.7125 19.7123C18.5208 19.904 18.2833 19.9998 18 19.9998C17.7167 19.9998 17.4792 19.904 17.2875 19.7123C17.0958 19.5206 17 19.2831 17 18.9998V9.9998H7.82499Z" })));
 iconMap['ic_attach_file'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("path", { d: "m19.571 10.586-8.132 8.132a4 4 0 0 1-5.657 0 4 4 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a4 4 0 0 0 0-5.657 4 4 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131z" })));
 iconMap['ic_attachment'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
@@ -436,6 +441,8 @@ iconMap['ic_generate_title'] = (React__default.createElement("svg", { viewBox: "
     React__default.createElement("path", { d: "M9.295 9.705 7.75 9l1.545-.705L10 6.75l.705 1.545L12.25 9l-1.545.705L10 11.25zM10 18.75l.705-1.545 1.545-.705-1.545-.705L10 14.25l-.705 1.545-1.545.705 1.545.705zm-2.722-6.472-1.028.472 1.027.473.473 1.027.473-1.027 1.027-.473-1.027-.473-.473-1.027zM13 12c0-2.318 1.035-4.455 2.58-6H13V4.5h5.25v5.25h-1.5V6.96C15.4 8.265 14.5 10.11 14.5 12c0 2.49 1.575 4.77 3.75 5.865V19.5C15.182 18.308 13 15.262 13 12" })));
 iconMap['ic_grid_view'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("path", { d: "M3 3h8v8H3zm0 10h8v8H3zM21 3h-8v8h8zm-8 10h8v8h-8z" })));
+iconMap['ic_help'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("path", { d: "M12.8375 17.6375C13.0792 17.3958 13.2 17.1 13.2 16.75C13.2 16.4 13.0792 16.1042 12.8375 15.8625C12.5958 15.6208 12.3 15.5 11.95 15.5C11.6 15.5 11.3042 15.6208 11.0625 15.8625C10.8208 16.1042 10.7 16.4 10.7 16.75C10.7 17.1 10.8208 17.3958 11.0625 17.6375C11.3042 17.8792 11.6 18 11.95 18C12.3 18 12.5958 17.8792 12.8375 17.6375ZM11.05 14.15H12.9C12.9 13.6 12.9625 13.1667 13.0875 12.85C13.2125 12.5333 13.5667 12.1 14.15 11.55C14.5833 11.1167 14.925 10.7042 15.175 10.3125C15.425 9.92083 15.55 9.45 15.55 8.9C15.55 7.96667 15.2083 7.25 14.525 6.75C13.8417 6.25 13.0333 6 12.1 6C11.15 6 10.3792 6.25 9.7875 6.75C9.19583 7.25 8.78333 7.85 8.55 8.55L10.2 9.2C10.2833 8.9 10.4708 8.575 10.7625 8.225C11.0542 7.875 11.5 7.7 12.1 7.7C12.6333 7.7 13.0333 7.84583 13.3 8.1375C13.5667 8.42917 13.7 8.75 13.7 9.1C13.7 9.43333 13.6 9.74583 13.4 10.0375C13.2 10.3292 12.95 10.6 12.65 10.85C11.9167 11.5 11.4667 11.9917 11.3 12.325C11.1333 12.6583 11.05 13.2667 11.05 14.15ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" })));
 iconMap['ic_help_outline'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("path", { d: "M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4" })));
 iconMap['ic_high_priority'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
@@ -753,6 +760,9 @@ iconMap['ic_slidein'] = (React__default.createElement("svg", { xmlns: "http://ww
 iconMap['ic_slideout'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("path", { d: "M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM10 18H20V6H10V18Z" }),
     React__default.createElement("path", { d: "M15 15.8002L13.67 14.4702L15.1663 12.9502H11.2V11.0502H15.1663L13.67 9.5302L15 8.2002L18.8 12.0002L15 15.8002Z" })));
+iconMap['ic_slideup'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("path", { d: "M22 19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19L2 5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3L20 3C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V19ZM20 15V5L4 5L4 15L20 15Z" }),
+    React__default.createElement("path", { d: "M15.8 9.99999L14.47 11.33L12.95 9.83374V13.8H11.05V9.83374L9.53 11.33L8.2 9.99999L12 6.19999L15.8 9.99999Z" })));
 iconMap['ic_sort'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("path", { d: "M4 18h4c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1m1 6h10c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1" })));
 iconMap['ic_sorting_down_arrow_up'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
@@ -954,13 +964,31 @@ var PlainButton = React__default.forwardRef(function (props, ref) {
 var LuiButton = React__default.forwardRef(function (props, ref) {
     var _level = props.level ? props.level : 'primary';
     var size = props.size ? props.size : 'med';
+    if (_level === 'error') {
+        console.warn('Warning: The "error" level for LuiButton is deprecated. Please use intent="danger" instead.');
+    }
+    // Only show the loading spinner after a 100ms delay to prevent it from flashing for fast operations
+    var _a = useState(false), loadingDelayElapsed = _a[0], setLoadingDelayElapsed = _a[1];
+    var showLoadingSpinner = props.loading && loadingDelayElapsed;
+    useEffect(function () {
+        if (!props.loading) {
+            setLoadingDelayElapsed(false);
+            return;
+        }
+        var timeoutId = setTimeout(function () {
+            setLoadingDelayElapsed(true);
+        }, 100);
+        return function () {
+            clearTimeout(timeoutId);
+        };
+    }, [props.loading]);
     if (props.href) {
         var aProps = {
             href: props.href,
             'data-testid': props['data-testid'],
             name: props.name,
             title: props.title,
-            className: clsx$1('lui-button', "lui-button-".concat(props.level), "lui-button-".concat(props.size), props.className),
+            className: clsx$1('lui-button', props.level && "lui-button-".concat(props.level), props.size && "lui-button-".concat(props.size), props.intent && "lui-button-".concat(props.intent), props.className),
             style: props.style
         };
         if (props.openInNewTab) {
@@ -969,7 +997,15 @@ var LuiButton = React__default.forwardRef(function (props, ref) {
         }
         return React__default.createElement("a", __assign({}, aProps), props.children);
     }
-    return (React__default.createElement(PlainButton, { type: props.type, title: props.title, disabled: props.disabled, name: props.name, onClick: props.onClick, level: _level, size: size, "data-testid": props['data-testid'], style: props.style, className: props.className, buttonProps: props.buttonProps, ref: ref }, props.children));
+    return (React__default.createElement(PlainButton, { type: props.type, title: props.title, disabled: props.disabled || props.loading, name: props.name, onClick: props.onClick, level: _level, size: size, "data-testid": props['data-testid'], style: props.style, className: clsx$1(props.className, props.intent && "lui-button-".concat(props.intent)), buttonProps: props.loading
+            ? __assign(__assign({}, props.buttonProps), { 'aria-busy': true }) : props.buttonProps, ref: ref },
+        props.children,
+        showLoadingSpinner && (React__default.createElement(LuiMiniSpinner, { size: size === 'sm' ? 18 : 24, highContrast: ['primary', 'success', 'error'].includes(_level), divProps: {
+                className: 'lui-button-loading-spinner',
+                'data-testid': 'loading-spinner',
+                role: 'status',
+                'aria-label': 'Loading'
+            } }))));
 });
 /**
  * A series of Lui buttons together.
@@ -1072,12 +1108,12 @@ var reactIs_production_min$1 = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var b$1="function"===typeof Symbol&&Symbol.for,c$1=b$1?Symbol.for("react.element"):60103,d$1=b$1?Symbol.for("react.portal"):60106,e$1=b$1?Symbol.for("react.fragment"):60107,f$1=b$1?Symbol.for("react.strict_mode"):60108,g$1=b$1?Symbol.for("react.profiler"):60114,h$3=b$1?Symbol.for("react.provider"):60109,k$1=b$1?Symbol.for("react.context"):60110,l$1=b$1?Symbol.for("react.async_mode"):60111,m$1=b$1?Symbol.for("react.concurrent_mode"):60111,n$1=b$1?Symbol.for("react.forward_ref"):60112,p$1=b$1?Symbol.for("react.suspense"):60113,q$1=b$1?
-Symbol.for("react.suspense_list"):60120,r$2=b$1?Symbol.for("react.memo"):60115,t$1=b$1?Symbol.for("react.lazy"):60116,v$3=b$1?Symbol.for("react.block"):60121,w$4=b$1?Symbol.for("react.fundamental"):60117,x$1=b$1?Symbol.for("react.responder"):60118,y$1=b$1?Symbol.for("react.scope"):60119;
-function z$1(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c$1:switch(a=a.type,a){case l$1:case m$1:case e$1:case g$1:case f$1:case p$1:return a;default:switch(a=a&&a.$$typeof,a){case k$1:case n$1:case t$1:case r$2:case h$3:return a;default:return u}}case d$1:return u}}}function A$1(a){return z$1(a)===m$1}reactIs_production_min$1.AsyncMode=l$1;reactIs_production_min$1.ConcurrentMode=m$1;reactIs_production_min$1.ContextConsumer=k$1;reactIs_production_min$1.ContextProvider=h$3;reactIs_production_min$1.Element=c$1;reactIs_production_min$1.ForwardRef=n$1;reactIs_production_min$1.Fragment=e$1;reactIs_production_min$1.Lazy=t$1;reactIs_production_min$1.Memo=r$2;reactIs_production_min$1.Portal=d$1;
-reactIs_production_min$1.Profiler=g$1;reactIs_production_min$1.StrictMode=f$1;reactIs_production_min$1.Suspense=p$1;reactIs_production_min$1.isAsyncMode=function(a){return A$1(a)||z$1(a)===l$1};reactIs_production_min$1.isConcurrentMode=A$1;reactIs_production_min$1.isContextConsumer=function(a){return z$1(a)===k$1};reactIs_production_min$1.isContextProvider=function(a){return z$1(a)===h$3};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c$1};reactIs_production_min$1.isForwardRef=function(a){return z$1(a)===n$1};reactIs_production_min$1.isFragment=function(a){return z$1(a)===e$1};reactIs_production_min$1.isLazy=function(a){return z$1(a)===t$1};
+var b$1="function"===typeof Symbol&&Symbol.for,c$1=b$1?Symbol.for("react.element"):60103,d$1=b$1?Symbol.for("react.portal"):60106,e$1=b$1?Symbol.for("react.fragment"):60107,f$1=b$1?Symbol.for("react.strict_mode"):60108,g$1=b$1?Symbol.for("react.profiler"):60114,h$4=b$1?Symbol.for("react.provider"):60109,k$1=b$1?Symbol.for("react.context"):60110,l$1=b$1?Symbol.for("react.async_mode"):60111,m$1=b$1?Symbol.for("react.concurrent_mode"):60111,n$1=b$1?Symbol.for("react.forward_ref"):60112,p$1=b$1?Symbol.for("react.suspense"):60113,q$1=b$1?
+Symbol.for("react.suspense_list"):60120,r$2=b$1?Symbol.for("react.memo"):60115,t$1=b$1?Symbol.for("react.lazy"):60116,v$4=b$1?Symbol.for("react.block"):60121,w$5=b$1?Symbol.for("react.fundamental"):60117,x$1=b$1?Symbol.for("react.responder"):60118,y$1=b$1?Symbol.for("react.scope"):60119;
+function z$1(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c$1:switch(a=a.type,a){case l$1:case m$1:case e$1:case g$1:case f$1:case p$1:return a;default:switch(a=a&&a.$$typeof,a){case k$1:case n$1:case t$1:case r$2:case h$4:return a;default:return u}}case d$1:return u}}}function A$1(a){return z$1(a)===m$1}reactIs_production_min$1.AsyncMode=l$1;reactIs_production_min$1.ConcurrentMode=m$1;reactIs_production_min$1.ContextConsumer=k$1;reactIs_production_min$1.ContextProvider=h$4;reactIs_production_min$1.Element=c$1;reactIs_production_min$1.ForwardRef=n$1;reactIs_production_min$1.Fragment=e$1;reactIs_production_min$1.Lazy=t$1;reactIs_production_min$1.Memo=r$2;reactIs_production_min$1.Portal=d$1;
+reactIs_production_min$1.Profiler=g$1;reactIs_production_min$1.StrictMode=f$1;reactIs_production_min$1.Suspense=p$1;reactIs_production_min$1.isAsyncMode=function(a){return A$1(a)||z$1(a)===l$1};reactIs_production_min$1.isConcurrentMode=A$1;reactIs_production_min$1.isContextConsumer=function(a){return z$1(a)===k$1};reactIs_production_min$1.isContextProvider=function(a){return z$1(a)===h$4};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c$1};reactIs_production_min$1.isForwardRef=function(a){return z$1(a)===n$1};reactIs_production_min$1.isFragment=function(a){return z$1(a)===e$1};reactIs_production_min$1.isLazy=function(a){return z$1(a)===t$1};
 reactIs_production_min$1.isMemo=function(a){return z$1(a)===r$2};reactIs_production_min$1.isPortal=function(a){return z$1(a)===d$1};reactIs_production_min$1.isProfiler=function(a){return z$1(a)===g$1};reactIs_production_min$1.isStrictMode=function(a){return z$1(a)===f$1};reactIs_production_min$1.isSuspense=function(a){return z$1(a)===p$1};
-reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e$1||a===m$1||a===g$1||a===f$1||a===p$1||a===q$1||"object"===typeof a&&null!==a&&(a.$$typeof===t$1||a.$$typeof===r$2||a.$$typeof===h$3||a.$$typeof===k$1||a.$$typeof===n$1||a.$$typeof===w$4||a.$$typeof===x$1||a.$$typeof===y$1||a.$$typeof===v$3)};reactIs_production_min$1.typeOf=z$1;
+reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e$1||a===m$1||a===g$1||a===f$1||a===p$1||a===q$1||"object"===typeof a&&null!==a&&(a.$$typeof===t$1||a.$$typeof===r$2||a.$$typeof===h$4||a.$$typeof===k$1||a.$$typeof===n$1||a.$$typeof===w$5||a.$$typeof===x$1||a.$$typeof===y$1||a.$$typeof===v$4)};reactIs_production_min$1.typeOf=z$1;
 
 var reactIs_development$1 = {};
 
@@ -3247,17 +3283,17 @@ var LuiResizableLayout = function (props) {
         } }));
 };
 
-var v$2 = "5.7.4";
-var fr$1 = 30.0000305175781;
-var ip$1 = 0;
-var op$1 = 3629.0036916097;
-var w$3 = 380;
-var h$2 = 280;
-var nm$1 = "2023 spinner";
-var ddd$1 = 0;
-var assets$1 = [
+var v$3 = "5.7.4";
+var fr$2 = 30.0000305175781;
+var ip$2 = 0;
+var op$2 = 3629.0036916097;
+var w$4 = 380;
+var h$3 = 280;
+var nm$2 = "2023 spinner";
+var ddd$2 = 0;
+var assets$2 = [
 ];
-var layers$1 = [
+var layers$2 = [
 	{
 		ddd: 0,
 		ind: 1,
@@ -5975,33 +6011,33 @@ var layers$1 = [
 		bm: 0
 	}
 ];
-var markers$1 = [
+var markers$2 = [
 ];
 var loaderData = {
-	v: v$2,
-	fr: fr$1,
-	ip: ip$1,
-	op: op$1,
-	w: w$3,
-	h: h$2,
-	nm: nm$1,
-	ddd: ddd$1,
-	assets: assets$1,
-	layers: layers$1,
-	markers: markers$1
+	v: v$3,
+	fr: fr$2,
+	ip: ip$2,
+	op: op$2,
+	w: w$4,
+	h: h$3,
+	nm: nm$2,
+	ddd: ddd$2,
+	assets: assets$2,
+	layers: layers$2,
+	markers: markers$2
 };
 
-var v$1 = "5.7.4";
-var fr = 29.9700012207031;
-var ip = 0;
-var op = 20.0000008146167;
-var w$2 = 200;
-var h$1 = 200;
-var nm = "right circle/sml loader";
-var ddd = 0;
-var assets = [
+var v$2 = "5.7.4";
+var fr$1 = 29.9700012207031;
+var ip$1 = 0;
+var op$1 = 20.0000008146167;
+var w$3 = 200;
+var h$2 = 200;
+var nm$1 = "right circle/sml loader";
+var ddd$1 = 0;
+var assets$1 = [
 ];
-var layers = [
+var layers$1 = [
 	{
 		ddd: 0,
 		ind: 1,
@@ -6619,9 +6655,346 @@ var layers = [
 		bm: 0
 	}
 ];
-var markers = [
+var markers$1 = [
 ];
 var smlLoaderData = {
+	v: v$2,
+	fr: fr$1,
+	ip: ip$1,
+	op: op$1,
+	w: w$3,
+	h: h$2,
+	nm: nm$1,
+	ddd: ddd$1,
+	assets: assets$1,
+	layers: layers$1,
+	markers: markers$1
+};
+
+var v$1 = "5.7.4";
+var fr = 29.9700012207031;
+var ip = 0;
+var op = 20.0000008146167;
+var w$2 = 200;
+var h$1 = 200;
+var nm = "right circle/sml loader with high contrast";
+var ddd = 0;
+var assets = [
+];
+var layers = [
+	{
+		ddd: 0,
+		ind: 2,
+		ty: 4,
+		nm: "left circle/sml loader Outlines",
+		sr: 1,
+		ks: {
+			o: {
+				a: 0,
+				k: 100,
+				ix: 11
+			},
+			r: {
+				a: 1,
+				k: [
+					{
+						i: {
+							x: [
+								0.833
+							],
+							y: [
+								0.833
+							]
+						},
+						o: {
+							x: [
+								0.167
+							],
+							y: [
+								0.167
+							]
+						},
+						t: 0,
+						s: [
+							0
+						]
+					},
+					{
+						t: 20.0000008146167,
+						s: [
+							360
+						]
+					}
+				],
+				ix: 10
+			},
+			p: {
+				a: 0,
+				k: [
+					100,
+					100,
+					0
+				],
+				ix: 2,
+				l: 2
+			},
+			a: {
+				a: 0,
+				k: [
+					100,
+					100,
+					0
+				],
+				ix: 1,
+				l: 2
+			},
+			s: {
+				a: 0,
+				k: [
+					100,
+					100,
+					100
+				],
+				ix: 6,
+				l: 2
+			}
+		},
+		ao: 0,
+		shapes: [
+			{
+				ty: "gr",
+				it: [
+					{
+						ind: 0,
+						ty: "sh",
+						ix: 1,
+						ks: {
+							a: 0,
+							k: {
+								i: [
+									[
+										0,
+										0
+									],
+									[
+										0,
+										55.14
+									],
+									[
+										-55.14,
+										0
+									],
+									[
+										-0.147,
+										-8.749
+									],
+									[
+										0,
+										0
+									],
+									[
+										0,
+										-41.597
+									],
+									[
+										-41.597,
+										0
+									]
+								],
+								o: [
+									[
+										-55.14,
+										0
+									],
+									[
+										0,
+										-55.14
+									],
+									[
+										0,
+										0
+									],
+									[
+										0.148,
+										8.793
+									],
+									[
+										-41.597,
+										0
+									],
+									[
+										0,
+										41.598
+									],
+									[
+										0,
+										0
+									]
+								],
+								v: [
+									[
+										50,
+										100
+									],
+									[
+										-50,
+										0
+									],
+									[
+										50,
+										-100
+									],
+									[
+										59.338,
+										-87.698
+									],
+									[
+										50,
+										-75.438
+									],
+									[
+										-25.438,
+										0
+									],
+									[
+										50,
+										75.438
+									]
+								],
+								c: true
+							},
+							ix: 2
+						},
+						nm: "Path 1",
+						mn: "ADBE Vector Shape - Group",
+						hd: false
+					},
+					{
+						ty: "gf",
+						o: {
+							a: 0,
+							k: 100,
+							ix: 10
+						},
+						r: 1,
+						bm: 0,
+						g: {
+							p: 5,
+							k: {
+								a: 0,
+								k: [
+									0.002,
+									0.039,
+									0.635,
+									0.271,
+									0.286,
+									0.02,
+									0.539,
+									0.433,
+									0.57,
+									0,
+									0.443,
+									0.596,
+									0.785,
+									0,
+									0.351,
+									0.48,
+									1,
+									0,
+									0.259,
+									0.365
+								],
+								ix: 9
+							}
+						},
+						s: {
+							a: 0,
+							k: [
+								98,
+								80
+							],
+							ix: 5
+						},
+						e: {
+							a: 0,
+							k: [
+								100,
+								-75
+							],
+							ix: 6
+						},
+						t: 1,
+						nm: "Gradient Fill 1",
+						mn: "ADBE Vector Graphic - G-Fill",
+						hd: false
+					},
+					{
+						ty: "tr",
+						p: {
+							a: 0,
+							k: [
+								50,
+								100
+							],
+							ix: 2
+						},
+						a: {
+							a: 0,
+							k: [
+								0,
+								0
+							],
+							ix: 1
+						},
+						s: {
+							a: 0,
+							k: [
+								100,
+								100
+							],
+							ix: 3
+						},
+						r: {
+							a: 0,
+							k: 0,
+							ix: 6
+						},
+						o: {
+							a: 0,
+							k: 100,
+							ix: 7
+						},
+						sk: {
+							a: 0,
+							k: 0,
+							ix: 4
+						},
+						sa: {
+							a: 0,
+							k: 0,
+							ix: 5
+						},
+						nm: "Transform"
+					}
+				],
+				nm: "Group 1",
+				np: 2,
+				cix: 2,
+				bm: 0,
+				ix: 1,
+				mn: "ADBE Vector Group",
+				hd: false
+			}
+		],
+		ip: 0,
+		op: 120.0000048877,
+		st: 0,
+		bm: 0
+	}
+];
+var markers = [
+];
+var highContrastSmallLoaderData = {
 	v: v$1,
 	fr: fr,
 	ip: ip,
@@ -6684,12 +7057,13 @@ var LuiStatusSpinner = function (props) {
             React__default.createElement(LuiLoadingSpinner, null),
             React__default.createElement("div", null, props.children))));
 };
-var LuiMiniSpinner = function (props) {
-    return (React__default.createElement("div", __assign({}, props.divProps),
-        React__default.createElement(LuiLottieLight, { animationData: smlLoaderData, loop: true, autoplay: autoplay, rendererSettings: {
-                preserveAspectRatio: 'xMidYMid slice'
-            }, style: { height: props.size, width: props.size } })));
+var SPINNER_RENDERER_SETTINGS = {
+    preserveAspectRatio: 'xMidYMid slice'
 };
+var LuiMiniSpinner = React__default.memo(function (props) {
+    return (React__default.createElement("div", __assign({}, props.divProps),
+        React__default.createElement(LuiLottieLight, { animationData: props.highContrast ? highContrastSmallLoaderData : smlLoaderData, loop: true, autoplay: autoplay, rendererSettings: SPINNER_RENDERER_SETTINGS, style: { height: props.size, width: props.size } })));
+});
 var LuiLoadingSpinner = function (props) {
     return (React__default.createElement(LuiLoadingSpinnerBase, { animationData: loaderData, dataTestId: props.dataTestId }));
 };