@spscommerce/ds-react 5.20.5 → 5.21.1

package/lib/index.cjs.js

@@ -1,8 +1,8 @@
-"use strict";var sv=Object.defineProperty,rv=Object.defineProperties;var ov=Object.getOwnPropertyDescriptors;var vs=Object.getOwnPropertySymbols;var _c=Object.prototype.hasOwnProperty,Mc=Object.prototype.propertyIsEnumerable;var Oc=(e,t,n)=>t in e?sv(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,I=(e,t)=>{for(var n in t||(t={}))_c.call(t,n)&&Oc(e,n,t[n]);if(vs)for(var n of vs(t))Mc.call(t,n)&&Oc(e,n,t[n]);return e},$=(e,t)=>rv(e,ov(t));var Z=(e,t)=>{var n={};for(var a in e)_c.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(e!=null&&vs)for(var a of vs(e))t.indexOf(a)<0&&Mc.call(e,a)&&(n[a]=e[a]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var H=require("react"),M=require("@spscommerce/ds-shared"),x=require("@spscommerce/utils"),Rc=require("moment-timezone"),co=require("react-dom"),iv=require("@react-stately/collections"),An=require("@spscommerce/positioning"),Lc=require("@spscommerce/ds-colors"),Bc=require("@spscommerce/ds-illustrations");function Pc(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}function po(e){if(e&&e.__esModule)return e;var t={__proto__:null,[Symbol.toStringTag]:"Module"};return e&&Object.keys(e).forEach(function(n){if(n!=="default"){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var s=po(H),He=Pc(H),Ut=po(Rc),ht=Pc(Rc),lv=po(co);function Ac(e){var t,n,a="";if(typeof e=="string"||typeof e=="number")a+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=Ac(e[t]))&&(a&&(a+=" "),a+=n);else for(t in e)e[t]&&(a&&(a+=" "),a+=t);return a}function A(){for(var e=0,t,n,a="";e<arguments.length;)(t=arguments[e++])&&(n=Ac(t))&&(a&&(a+=" "),a+=n);return a}var zt=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function qt(e){throw new Error('Could not dynamically require "'+e+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')}var T={exports:{}},cv="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",dv=cv,pv=dv;function Fc(){}function Kc(){}Kc.resetWarningCache=Fc;var uv=function(){function e(a,o,i,l,c,p){if(p!==pv){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}e.isRequired=e;function t(){return e}var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:Kc,resetWarningCache:Fc};return n.PropTypes=n,n};T.exports=uv();function ys(e){return e}function be(e){return T.exports.oneOf(x.values(e))}function re(){return T.exports.func}function ce(){return T.exports.object}function Jt(){return T.exports.object}const Nt=T.exports.oneOfType([T.exports.node,T.exports.func]),q={children:T.exports.oneOfType([T.exports.arrayOf(T.exports.node),T.exports.node]),className:T.exports.string,"data-testid":T.exports.string,unsafelyReplaceClassName:T.exports.string},Ye=s.createContext(M.noI18nI18n),mv={disabled:"boolean",href:"string",icon:"SpsIcon",kind:"ButtonKind",spinning:"boolean",spinningTitle:"string",type:"ButtonType"},fv=$(I({},q),{disabled:T.exports.bool,href:T.exports.string,icon:be(M.SpsIcon),kind:be(M.ButtonKind),spinning:T.exports.bool,spinningTitle:T.exports.string,type:be(M.ButtonType)});function Ge(e){const S=e,{children:t,className:n,href:a,icon:o,kind:i=M.ButtonKind.DEFAULT,spinning:l,spinningTitle:c,type:p=M.ButtonType.BUTTON,unsafelyReplaceClassName:u}=S,f=Z(S,["children","className","href","icon","kind","spinning","spinningTitle","type","unsafelyReplaceClassName"]);let{disabled:m}=e;l&&(m=!0);const{t:g}=s.useContext(Ye),v=A(u||"sps-button",`sps-button--${i}`,m&&"sps-button--disabled",l&&"sps-button--spinning",n),C=o&&s.createElement("i",{className:A("sps-icon",`sps-icon-${o}`),"aria-hidden":"true"}),k=l&&s.createElement("div",{className:"sps-spinner"},c||g("design-system:button.spinningTitle"));return s.createElement("div",{className:v},a?s.createElement("a",$(I({},f),{href:a,className:"sps-button__clickable-element"}),C,t,k):s.createElement("button",$(I({},f),{type:p,className:"sps-button__clickable-element",disabled:m}),C,t,k))}Object.assign(Ge,{props:mv,propTypes:fv,displayName:"SpsButton"});const Vc={formMeta:"SpsFormSetMeta<any>",onSubmit:"React.FormEventHandler"},$c=$(I({},q),{formArray:ce(),formGroup:ce(),formMeta:ce(),onSubmit:re()}),Ts=s.forwardRef((e,t)=>{const f=e,{children:n,onSubmit:a,formArray:o,formGroup:i,formMeta:l}=f,c=Z(f,["children","onSubmit","formArray","formGroup","formMeta"]),p=i||o;function u(m){m.preventDefault(),p&&p.markAsDirty(),l&&(l.markAsDirty(),l.markAsBlurred(),l.markAsSubmitted()),a(m)}return s.createElement("form",I({ref:t,onSubmit:u},c),n)});Object.assign(Ts,{props:Vc,propTypes:$c,displayName:"SpsForm"});function At(e){return typeof e=="function"?e():e}const hv=$(I({},Vc),{controlsDisabled:"boolean",footerLinks:"ReactNodeOrRenderFn",formMeta:"SpsFormArrayMeta<any> | SpsFormGroupMeta<any>",isOpen:"boolean",onClear:"() => void",onSubmit:"React.FormEventHandler"}),gv=$(I(I({},q),$c),{controlsDisabled:T.exports.bool,footerLinks:Nt,formArray:ce(),formGroup:ce(),formMeta:T.exports.oneOfType([ce(),ce()]),isOpen:T.exports.bool,onClear:re(),onSubmit:re()});function uo(e){const S=e,{children:t,className:n,controlsDisabled:a,footerLinks:o,formArray:i,formGroup:l,formMeta:c,isOpen:p,onClear:u,onSubmit:f,unsafelyReplaceClassName:m}=S,g=Z(S,["children","className","controlsDisabled","footerLinks","formArray","formGroup","formMeta","isOpen","onClear","onSubmit","unsafelyReplaceClassName"]),{t:v}=s.useContext(Ye);function C(){u&&u()}const k=A(m||"sps-advanced-search",p&&"sps-advanced-search--open",n);return s.createElement("div",I({className:k},g),s.createElement(Ts,{onSubmit:f,formArray:i,formGroup:l,formMeta:c},s.createElement("div",{className:"sps-advanced-search__form"},t),s.createElement("div",{className:"sps-advanced-search__footer"},o&&s.createElement("div",{id:"footer_links"},At(o)),s.createElement("div",{className:"sps-advanced-search__footer-controls"},s.createElement(Ge,{kind:M.ButtonKind.DEFAULT,type:M.ButtonType.BUTTON,className:"mr-2",onClick:C,disabled:a},v("design-system:advancedSearch.clear")),s.createElement(Ge,{kind:M.ButtonKind.KEY,type:M.ButtonType.SUBMIT,disabled:a},v("design-system:advancedSearch.search"))))))}Object.assign(uo,{props:hv,propTypes:gv,displayName:"SpsAdvancedSearch"});const Hc={basic:{label:"Basic Usage",examples:{basic:{react:x.code`
+"use strict";var sv=Object.defineProperty,rv=Object.defineProperties;var ov=Object.getOwnPropertyDescriptors;var vs=Object.getOwnPropertySymbols;var _c=Object.prototype.hasOwnProperty,Mc=Object.prototype.propertyIsEnumerable;var Oc=(e,t,n)=>t in e?sv(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,I=(e,t)=>{for(var n in t||(t={}))_c.call(t,n)&&Oc(e,n,t[n]);if(vs)for(var n of vs(t))Mc.call(t,n)&&Oc(e,n,t[n]);return e},$=(e,t)=>rv(e,ov(t));var Z=(e,t)=>{var n={};for(var a in e)_c.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(e!=null&&vs)for(var a of vs(e))t.indexOf(a)<0&&Mc.call(e,a)&&(n[a]=e[a]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var H=require("react"),M=require("@spscommerce/ds-shared"),x=require("@spscommerce/utils"),Rc=require("moment-timezone"),co=require("react-dom"),iv=require("@react-stately/collections"),An=require("@spscommerce/positioning"),Lc=require("@spscommerce/ds-colors"),Bc=require("@spscommerce/ds-illustrations");function Pc(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}function po(e){if(e&&e.__esModule)return e;var t={__proto__:null,[Symbol.toStringTag]:"Module"};return e&&Object.keys(e).forEach(function(n){if(n!=="default"){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var s=po(H),He=Pc(H),Ut=po(Rc),ht=Pc(Rc),lv=po(co);function Ac(e){var t,n,a="";if(typeof e=="string"||typeof e=="number")a+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=Ac(e[t]))&&(a&&(a+=" "),a+=n);else for(t in e)e[t]&&(a&&(a+=" "),a+=t);return a}function A(){for(var e=0,t,n,a="";e<arguments.length;)(t=arguments[e++])&&(n=Ac(t))&&(a&&(a+=" "),a+=n);return a}var zt=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function qt(e){throw new Error('Could not dynamically require "'+e+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')}var T={exports:{}},cv="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",dv=cv,pv=dv;function Fc(){}function Kc(){}Kc.resetWarningCache=Fc;var uv=function(){function e(a,o,i,l,c,p){if(p!==pv){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}e.isRequired=e;function t(){return e}var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:Kc,resetWarningCache:Fc};return n.PropTypes=n,n};T.exports=uv();function ys(e){return e}function be(e){return T.exports.oneOf(x.values(e))}function re(){return T.exports.func}function ce(){return T.exports.object}function Jt(){return T.exports.object}const Nt=T.exports.oneOfType([T.exports.node,T.exports.func]),q={children:T.exports.oneOfType([T.exports.arrayOf(T.exports.node),T.exports.node]),className:T.exports.string,"data-testid":T.exports.string,unsafelyReplaceClassName:T.exports.string},Ye=s.createContext(M.noI18nI18n),mv={disabled:"boolean",href:"string",icon:"SpsIcon",kind:"ButtonKind",spinning:"boolean",spinningTitle:"string",type:"ButtonType"},fv=$(I({},q),{disabled:T.exports.bool,href:T.exports.string,icon:be(M.SpsIcon),kind:be(M.ButtonKind),spinning:T.exports.bool,spinningTitle:T.exports.string,type:be(M.ButtonType)});function Ge(e){const S=e,{children:t,className:n,href:a,icon:o,kind:i=M.ButtonKind.DEFAULT,spinning:l,spinningTitle:c,type:p=M.ButtonType.BUTTON,unsafelyReplaceClassName:u}=S,f=Z(S,["children","className","href","icon","kind","spinning","spinningTitle","type","unsafelyReplaceClassName"]);let{disabled:m}=e;l&&(m=!0);const{t:g}=s.useContext(Ye),v=A(u||"sps-button",`sps-button--${i}`,m&&"sps-button--disabled",l&&"sps-button--spinning",n),C=o&&s.createElement("i",{className:A("sps-icon",`sps-icon-${o}`),"aria-hidden":"true"}),k=l&&s.createElement("div",{className:"sps-spinner"},c||g("design-system:button.spinningTitle"));return s.createElement("div",{className:v},a?s.createElement("a",$(I({},f),{href:a,className:"sps-button__clickable-element"}),C,t,k):s.createElement("button",$(I({},f),{type:p,className:"sps-button__clickable-element",disabled:m}),C,t,k))}Object.assign(Ge,{props:mv,propTypes:fv,displayName:"SpsButton"});const Vc={formMeta:"SpsFormSetMeta<any>",onSubmit:"React.FormEventHandler"},$c=$(I({},q),{formArray:ce(),formGroup:ce(),formMeta:ce(),onSubmit:re()}),Ts=s.forwardRef((e,t)=>{const f=e,{children:n,onSubmit:a,formArray:o,formGroup:i,formMeta:l}=f,c=Z(f,["children","onSubmit","formArray","formGroup","formMeta"]),p=i||o;function u(m){m.preventDefault(),p&&p.markAsDirty(),l&&(l.markAsDirty(),l.markAsBlurred(),l.markAsSubmitted()),a(m)}return s.createElement("form",I({ref:t,onSubmit:u},c),n)});Object.assign(Ts,{props:Vc,propTypes:$c,displayName:"SpsForm"});function At(e){return typeof e=="function"?e():e}const hv=$(I({},Vc),{controlsDisabled:"boolean",footerLinks:"ReactNodeOrRenderFn",formMeta:"SpsFormArrayMeta<any> | SpsFormGroupMeta<any>",isOpen:"boolean",onClear:"() => void",onSubmit:"React.FormEventHandler"}),gv=$(I(I({},q),$c),{controlsDisabled:T.exports.bool,footerLinks:Nt,formArray:ce(),formGroup:ce(),formMeta:T.exports.oneOfType([ce(),ce()]),isOpen:T.exports.bool,onClear:re(),onSubmit:re()});function uo(e){const S=e,{children:t,className:n,controlsDisabled:a,footerLinks:o,formArray:i,formGroup:l,formMeta:c,isOpen:p,onClear:u,onSubmit:f,unsafelyReplaceClassName:m}=S,g=Z(S,["children","className","controlsDisabled","footerLinks","formArray","formGroup","formMeta","isOpen","onClear","onSubmit","unsafelyReplaceClassName"]),{t:v}=s.useContext(Ye);function C(){u&&u()}const k=A(m||"sps-advanced-search",p&&"sps-advanced-search--open",n);return s.createElement("div",I({className:k},g),s.createElement(Ts,{onSubmit:f,formArray:i,formGroup:l,formMeta:c},s.createElement("div",{className:"sps-advanced-search__form"},t),s.createElement("div",{className:"sps-advanced-search__footer"},o&&s.createElement("div",{id:"footer_links"},At(o)),s.createElement("div",{className:"sps-advanced-search__footer-controls"},s.createElement(Ge,{kind:M.ButtonKind.DEFAULT,type:M.ButtonType.BUTTON,className:"mr-2",onClick:C,disabled:a},v("design-system:advancedSearch.clear")),s.createElement(Ge,{kind:M.ButtonKind.KEY,type:M.ButtonType.SUBMIT,disabled:a},v("design-system:advancedSearch.search"))))))}Object.assign(uo,{props:hv,propTypes:gv,displayName:"SpsAdvancedSearch"});const Hc={general:{label:"General Usage",description:({NavigateTo:e,Link:t})=>s.createElement(s.Fragment,null,s.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),s.createElement("p",null,"Advanced Search works in conjunction with the"," ",s.createElement(e,{to:"list-toolbar"},"List Bar")," and"," ",s.createElement(e,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),s.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",s.createElement("ul",null,s.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),s.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",s.createElement(t,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",s.createElement(e,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",s.createElement(e,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:x.code`
                     function Component(props) {
                         const [toolbarSearchText, setToolbarSearchText] = React.useState("");
                         const [advSearch, patchAdvSearch] = usePatchReducer({
-                            isOpen: true,
+                            isOpen: false,
                             enteredFields: 0,
                         });
 
@@ -90,66 +90,92 @@
                             </SpsAdvancedSearch>
                         </>;
                     }
-                `}}},b_disabledButtons:{label:"Disabling the Clear/Search Buttons",examples:{disabledButtons:{react:x.code`
-                    function Component() {
+                `}}},footerLink:{label:"Footer Link",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"A Footer Link can be included in the Advanced Search footer (visible only when the menu is exposed). The Footer Link is used to link to preferences that control the Advanced Search panel display (such as customized fields and defaults).")),examples:{footerLink:{react:x.code`
+                    function Component(props) {
+                        const [toolbarSearchText, setToolbarSearchText] = React.useState("");
                         const [advSearch, setAdvSearch] = React.useState({
-                            isOpen: true,
-                            controlsDisabled: true,
+                            isOpen: false
                         });
 
                         function handleToggleAdvancedSearch(isOpen) {
                             setAdvSearch({ isOpen });
                         }
 
+                        function handleToolbarSearchChange(event) {
+                          setToolbarSearchText(event.target.value);
+                        }
+
                         return <>
                             <SpsListToolbar advancedSearch={advSearch}
                                 onToggleAdvancedSearch={handleToggleAdvancedSearch}
                             >
-                                <SpsListToolbarSearch>
-                                    <i>quick search goes here</i>
-                                </SpsListToolbarSearch>
+                              <SpsListToolbarSearch>
+                                  <SpsTextInput value={toolbarSearchText}
+                                      onChange={handleToolbarSearchChange}
+                                      disabled={advSearch.isOpen}
+                                      title="Search"
+                                  />
+                                  <SpsButton kind={ButtonKind.ICON}
+                                      icon={SpsIcon.SEARCH}
+                                      disabled={advSearch.isOpen}
+                                  />
+                              </SpsListToolbarSearch>
                             </SpsListToolbar>
-                            <SpsAdvancedSearch {...advSearch}>
-                                <i>insert form here</i>
+                            <SpsAdvancedSearch {...advSearch}
+                                footerLinks={
+                                    <SpsButton kind={ButtonKind.LINK} icon={SpsIcon.GEAR}>
+                                        Advanced Search Defaults
+                                    </SpsButton>
+                                }
+                            >
+                                <br />
+                                <br />
+                                <br />
+                                <br />
                             </SpsAdvancedSearch>
                         </>;
                     }
-                `}}},c_footerLink:{label:"Footer Link",description:x.code`
-            <p>Some applications have a need to add a link button to the footer
-            as directed by the product design team.</p>
-        `,examples:{footerLink:{react:x.code`
-                    function Component(props) {
+                `}}},disabledButtons:{label:"Disabling the Clear/Search Buttons",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"The Search and Clear Fields buttons in the footer can be disabled when no input fields in the Advanced Search Panel contain values.")),examples:{disabledButtons:{react:x.code`
+                    function Component() {
+                        const [toolbarSearchText, setToolbarSearchText] = React.useState("");
                         const [advSearch, setAdvSearch] = React.useState({
-                            isOpen: true
+                            isOpen: false,
+                            controlsDisabled: true,
                         });
 
                         function handleToggleAdvancedSearch(isOpen) {
                             setAdvSearch({ isOpen });
                         }
 
+                        function handleToolbarSearchChange(event) {
+                          setToolbarSearchText(event.target.value);
+                        }
+
                         return <>
                             <SpsListToolbar advancedSearch={advSearch}
                                 onToggleAdvancedSearch={handleToggleAdvancedSearch}
                             >
-                                <SpsListToolbarSearch>
-                                    <i>quick search goes here</i>
-                                </SpsListToolbarSearch>
+                              <SpsListToolbarSearch>
+                                <SpsTextInput value={toolbarSearchText}
+                                    onChange={handleToolbarSearchChange}
+                                    disabled={advSearch.isOpen}
+                                    title="Search"
+                                />
+                                <SpsButton kind={ButtonKind.ICON}
+                                    icon={SpsIcon.SEARCH}
+                                    disabled={advSearch.isOpen}
+                                />
+                              </SpsListToolbarSearch>
                             </SpsListToolbar>
-                            <SpsAdvancedSearch {...advSearch}
-                                footerLinks={
-                                    <SpsButton kind={ButtonKind.LINK} icon={SpsIcon.GEAR}>
-                                        Advanced Search Defaults
-                                    </SpsButton>
-                                }
-                            >
-                                <i>insert form here</i>
+                            <SpsAdvancedSearch {...advSearch}>
+                                <br />
+                                <br />
+                                <br />
+                                <br />
                             </SpsAdvancedSearch>
                         </>;
                     }
-                `}}},d_withTitle:{label:"Title Bar With No List Toolbar Search",description:x.code`
-            <p>If you do not provide a search within the List Toolbar, then it will
-            act as a title bar and the Advanced Search will not be togglable.</p>
-        `,examples:{withTitle:{react:x.code`
+                `}}},advancedSearchOnly:{label:'"Advanced Search Only" List Bar',description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Certain scenarios may require an Advanced Search Panel to display by default (eschewing a basic search). In these scenarios a title will replace the search input in the List Bar."),s.createElement("p",null,"To achieve an Advanced Search Only effect, remove the basic search input from the List Bar.")),examples:{withTitle:{react:x.code`
                     function Component(props) {
                         const [advSearch, patchAdvSearch] = usePatchReducer({
                             isOpen: true,
@@ -160,11 +186,14 @@
                                 advancedSearch={advSearch}
                             />
                             <SpsAdvancedSearch isOpen={advSearch.isOpen}>
-                                <i>insert form here</i>
+                                <br />
+                                <br />
+                                <br />
+                                <br />
                             </SpsAdvancedSearch>
                         </>;
                     }
-                `}}}};var Sv=self.crypto||self.msCrypto,mo="-_",xn=36;for(;xn--;)mo+=xn.toString(36);xn=36;for(;xn---10;)mo+=xn.toString(36).toUpperCase();var bv=function(e){var t="",n=Sv.getRandomValues(new Uint8Array(e||21));for(xn=e||21;xn--;)t+=mo[n[xn]&63];return t},Dn=bv;function ca(e){return H.useRef(e||Dn())}function Ft(e,t){const n=ca(e),a=H.useRef(`${n.current}_ctrl`);return H.useEffect(()=>{t&&(t.id=a.current,t.update())},[t]),{wrapperId:n.current,controlId:a.current}}var vv="[object Object]";function yv(e){var t=!1;if(e!=null&&typeof e.toString!="function")try{t=!!(e+"")}catch{}return t}function Tv(e,t){return function(n){return e(t(n))}}var wv=Function.prototype,Wc=Object.prototype,jc=wv.toString,Cv=Wc.hasOwnProperty,Ev=jc.call(Object),xv=Wc.toString,Dv=Tv(Object.getPrototypeOf,Object);function kv(e){return!!e&&typeof e=="object"}function Nv(e){if(!kv(e)||xv.call(e)!=vv||yv(e))return!1;var t=Dv(e);if(t===null)return!0;var n=Cv.call(t,"constructor")&&t.constructor;return typeof n=="function"&&n instanceof n&&jc.call(n)==Ev}var Yc=Nv;const Kt=new Set,da=new Set,mn=new Set,Ba=new Set;function Gc(e){Kt.has(e)||mn.has(e)||Ba.has(e)||da.add(e)}function Uc(e){Kt.has(e)||mn.has(e)||da.has(e)||Ba.add(e)}const fo=Ut.default||Ut,ws="MM/DD/YYYY",Iv=/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,zc=Symbol("Date Parse Error");function pa(e){return e.year*1e4+e.month*100+e.date}const he=Object.freeze({createFrom(e){if(!e)return null;if(typeof e=="string"){const t=Iv.exec(e);if(t){const[,n,a,o]=t;return Object.freeze({year:Number(o),month:Number(n),date:Number(a)})}return Object.freeze({[zc]:!0,year:void 0,month:void 0,date:void 0})}return Object.freeze({year:e.year(),month:e.month()+1,date:e.date()})},createRangeFrom(e){return e?e.split(/[^\d]*-[^\d]*/).map(he.createFrom):null},isValid(e){return e&&typeof e=="object"&&typeof e.year=="number"&&typeof e.month=="number"&&typeof e.date=="number"&&he.toMoment(e).isValid()},nullifyInvalidDate(e){return he.isValid(e)?e:null},toMoment(e){return e?fo($(I({},e),{month:e.month-1})):null},toString(e){const t=he.toMoment(e);return t?t.format(ws):""},toStringRange(e){return e?e.map(he.toString).join("-"):""},create(){const e=new Date;return Object.freeze({year:e.getFullYear(),month:e.getMonth()+1,date:e.getDate()})},isSameDate(e,t){return e&&t&&e.year===t.year&&e.month===t.month&&e.date===t.date},isSameMonth(e,t){return e&&t&&e.year===t.year&&e.month===t.month},isAfter(e,t){return!e||!t?null:pa(e)>pa(t)},isBefore(e,t){return!e||!t?null:pa(e)<pa(t)},isInRange(e,t,n=!0){if(!e||!t||!t[0]||!t[1])return null;const a=pa(e),[o,i]=t.map(pa);return e&&o&&i&&(n&&a>=o&&a<=i||!n&&a>o&&a<i)},prevMonth(e){return Object.freeze({year:e.month===1?e.year-1:e.year,month:e.month-1||12,date:e.date})},nextMonth(e){return Object.freeze({year:e.month===12?e.year+1:e.year,month:e.month+1>12?1:e.month+1,date:e.date})},createRangeFromPreset(e){if(typeof e.definition=="function")return e.definition();const t=fo(),n=t.clone().subtract(fo.duration(e.definition));return[he.createFrom(n),he.createFrom(t)]}}),Pa=function(t){if(Array.isArray(t)){const n=Pa(t[0]),a=Pa(t[1]);return n||a}if(t&&t.hasOwnProperty("year")){if(t[zc])return{dateFormat:ws};if(!he.isValid(t))return{dateValidity:!0}}return null};Kt.add("dateFormat");Kt.add("dateValidity");const qc=function(t){if(Array.isArray(t)){const n=Pa(t);if(n)return n;if(t&&he.isBefore(t[1],t[0]))return{dateRangeOrder:!0}}return null};Kt.add("dateRangeOrder");const Jc=function({minDate:t,maxDate:n}){function a(o){const i=he.isBefore(o,t),l=he.isAfter(o,n),c={minExceeded:i?he.toString(t):null,maxExceeded:l?he.toString(n):null};return i||l?{dateConstraint:c}:null}return function(i){if(!i)return null;if(Array.isArray(i)){const l=a(i[0]),c=a(i[1]);return l||c}return i.hasOwnProperty("year")?a(i):null}};Kt.add("dateConstraint");var _v=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",date:Pa,dateRange:qc,dateConstraint:Jc});const Mv=function(t){return function(a){return Number(a)>=t?null:{min:t}}};Kt.add("min");const Ov=function(t){return n=>Number(n)<=t?null:{max:t}};da.add("max");const Rv=function(t){return typeof t=="undefined"||t===null||t===""||Number.isNaN(t)||(t==null?void 0:t.length)===0?{required:!0}:null};da.add("required");const Lv=function(t){return function(a){return a.length>=t?null:{minLength:t}}};Kt.add("minLength");const Bv=function(t){return function(a){return a.length<=t?null:{maxLength:t}}};mn.add("maxLength");const Pv=function(t){const n=t instanceof RegExp?t:new RegExp(t);return function(o){return n.test(o)?null:{pattern:t}}};Kt.add("pattern");const Av=function(t){return/^[A-Za-z]*$/.test(t)?null:{alpha:!0}};mn.add("alpha");const Fv=function(t){return/^[0-9,. ]*$/.test(t)?null:{numeric:!0}};mn.add("numeric");const Kv=function(t){return/^[^0-9]*$/.test(t)?null:{nonNumeric:!0}};mn.add("nonNumeric");const Cs=Object.freeze($(I({},_v),{min:Mv,max:Ov,required:Rv,minLength:Lv,maxLength:Bv,pattern:Pv,alpha:Av,numeric:Fv,nonNumeric:Kv,OnBlurErrorKeys:Kt}));function Aa(e,t=[]){const n=t.reduce((a,o)=>Object.assign(a,o(e)||{}),{});return Object.keys(n).length?n:null}class Fn{constructor(t,n){this.path=t,this.update=n,this.validators=[],this.errors=null,this.revealAllErrors=!1,this.preventativeErrors=[],this.submitted=!1}setValidators(t){return this.update(this.path,null,null,t),this}validate(t){return this.validators&&this.validators.length>0?(this.errors=Aa(t,this.validators),this.update(null),this.isFocused()&&this.onFocus&&this.onFocus()):this.errors&&(this.errors=null,this.update(null)),this}isValid(){return!this.errors||this.isPristine()}hasErrors(){return!!this.errors}isVisibilyInvalid(){return this.errors&&(this.revealAllErrors&&!Object.keys(this.errors).some(t=>Ba.has(t))||this.revealAllErrors&&Object.keys(this.errors).some(t=>Ba.has(t))&&this.isSubmitted()||!this.isPristine()&&Object.keys(this.errors).some(t=>da.has(t)))}hasError(t){return this.errors&&Object.prototype.hasOwnProperty.call(this.errors,t)}hasPreventativeError(t){return this.preventativeErrors.includes(t)}hasPreventativeErrors(){return this.preventativeErrors.length>0}isRequired(){return this.validators&&this.validators.indexOf(Cs.required)>-1}isSubmitted(){return this.submitted}onFocus(){}onBlur(){}}class Kn extends Fn{constructor(){super(...arguments);this.id=Dn(),this.focused=!1,this.pristine=!0}setValue(t){if(this.revealAllErrors=!1,this.preventativeErrors=[],this.validators&&this.validators.length>0){const n=Aa(t,this.validators);if(n&&Object.keys(n).filter(o=>mn.has(o)).length>0){this.preventativeErrors=Object.keys(n);return}}this.update(this.path,t)}isPristine(){return this.pristine}markAsPristine(){return this.pristine=!0,this.revealAllErrors=!1,this.update(null),this}markAsDirty(){return this.pristine=!1,this.update(null),this}isFocused(){return this.focused}markAsFocused(){return this.focused=!0,this.update(null),this.onFocus&&this.onFocus(),this}markAsBlurred(){return this.update(this.path,null,!0),this.onBlur&&this.onBlur(),this.preventativeErrors=[],this}markAsSubmitted(){return this.submitted=!0,this.update(null),this}}class Es extends Kn{constructor(t,n,a){const o=a?n:t,i=a||n;super(o,i);a&&this.inferMembers(t)}inferSpsControl(t,n){return xs(t,[...this.path,n],this.update)}rollup(t){return Object.keys(this.fields).reduce((n,a)=>n&&(!this.fields[a][t]||this.fields[a][t]()),!0)}isFocused(){return super.isFocused()||this.rollup("isFocused")}isValid(){return super.isValid()&&this.rollup("isValid")}hasErrors(){return super.hasErrors()||Object.keys(this.fields).some(t=>this.fields[t].hasErrors())}contentsAreValid(){return this.rollup("isValid")&&this.rollup("contentsAreValid")}isPristine(){return super.isPristine()&&this.rollup("isPristine")}markAsPristine(){super.markAsPristine();for(const t of Object.keys(this.fields))this.fields[t].markAsPristine();return this}markAsDirty(){super.markAsDirty();for(const t of Object.keys(this.fields))this.fields[t].markAsDirty();return this}markAsBlurred(){super.markAsBlurred();for(const t of Object.keys(this.fields))this.fields[t].markAsBlurred();return this}markAsSubmitted(){super.markAsSubmitted();for(const t of Object.keys(this.fields))this.fields[t].markAsSubmitted();return this}}class Zc extends Es{inferMembers(t){this.fields={};for(const n of Object.keys(t))this.fields[n]=this.inferSpsControl(t[n],n)}}class Xc extends Es{inferMembers(t){this.fields=t.map((n,a)=>this.inferSpsControl(n,String(a)))}}function xs(e,t,n){return e instanceof Fn?(e.path=t,e.update=n,e):Array.isArray(e)?new Xc(e,t,n):Yc(e)?new Zc(e,t,n):new Kn(t,n)}function ho(e,t){return t.length===0||!e?e:ho(e.fields[t[0]],t.slice(1,t.length))}function go(e,t){if(t.length===0||!e)return[e];const n=t[0];if(t=t.slice(1,t.length),n==="*"){const a=Array.isArray(e.fields)?e.fields:Object.keys(e.fields).map(o=>e.fields[o]);return t.length===0?a:a.reduce((o,i)=>[...o,...go(i,t)],[])}return go(e.fields[n],t)}function Qc(e,t,n){for(const a of Object.keys(t)){const o=t[a];for(const i of go(e,a.split(".")))i&&o&&n(i,o)}}function So(e,t,n,a=!1){Qc(t,n,(o,i)=>{o.validators=typeof i=="function"?i(e):i,a&&(o.errors=Aa(x.getPath(e,o.path),o.validators))})}function bo(e,t){const n=t[0];return t=t.slice(1),Array.isArray(e)?e.map((a,o)=>o===Number(n)?bo(a,t):a):Yc(e)?Object.keys(e).reduce((a,o)=>Object.assign(a,{[o]:o===n?bo(e[o],t):e[o]}),{}):e}function Vv(e){if(typeof e!="object"||e===null||Array.isArray(e))throw new TypeError("The initial value of useSpsForm() hook must be an object.")}function $v(e,t){Vv(e);const n=H.useMemo(()=>{x.deepFreeze(e);const f=xs(e,[],p);return t&&So(e,f,t,!0),f},[]),a=H.useRef();let o=t;const i=H.useCallback((f,m)=>{let g;if(a.current=null,m)if(m.path)if(m.markAsBlurred){const v=ho(f.formMeta,m.path);v&&(v.focused=!1,v.revealAllErrors=!0)}else if(m.newValidators){if(o){const v=m.path.join("."),C=I({},o);C[v]=m.newValidators,o=C,So(f.formValue,f.formMeta,o,!0)}}else g=bo(f.formValue,m.path),x.setPath(g,m.path,m.value);else g=m.value;if(g){x.deepFreeze(g);const v=x.diff(f.formValue,g);for(const{type:C,key:k,parentPath:S,objects:[w,E]}of v){const y=ho(f.formMeta,S);if(typeof k!="symbol"&&y)switch(C){case x.DiffChange.ADDITION:y.fields[k]=xs(E[k],[...S,k],p);break;case x.DiffChange.DELETION:Array.isArray(y.fields)?y.fields.splice(Number(k),1):delete y.fields[k];break;case x.DiffChange.ALTERATION:if(!w[k]&&E[k]&&!(y.fields[k]instanceof Es)){const N=xs(E[k],[...S,k],p);N instanceof Kn&&y.fields[k]instanceof Kn&&(N.id=y.fields[k].id,N.focused=y.fields[k].focused,N.pristine=y.fields[k].pristine),y.fields[k]=N}break}}if(o){So(g,f.formMeta,o);const C=new Set;Qc(f.formMeta,t,(k,S)=>{typeof S=="function"&&(k.validate(x.getPath(g,k.path)),C.add(k))});for(const{type:k,key:S,parentPath:w,objects:[,E]}of v)if(typeof S!="symbol"){let y=f.formMeta,N=g;if(y){for(const _ of w)y=y.fields[_],N=N[_],C.has(y)||y.validate(N);if(k===x.DiffChange.ADDITION||k===x.DiffChange.ALTERATION){const _=y.fields[S];if(!C.has(_)&&(y.fields[S].validate(E[S]),k===x.DiffChange.ADDITION&&_.fields))for(const[R,O]of Object.entries(_.fields))O.validate(E[S][R])}}}}}return{formValue:g||f.formValue,formMeta:f.formMeta,updateForm:f.updateForm}},[]),[l,c]=H.useReducer(i,{formValue:e,formMeta:n,updateForm:u});function p(f,m,g=!1,v){f?c({path:f,value:m,markAsBlurred:g,newValidators:v}):u()}function u(f){if(f){a.current&&window.clearTimeout(a.current);const m=window.setTimeout(c,0,{value:f});a.current=m}else if(!a.current){const m=window.setTimeout(c,0,{});a.current=m}}return H.useEffect(()=>()=>{a.current&&window.clearTimeout(a.current)},[]),l}const Hv=$(I({},q),{focusInputOnClick:T.exports.bool,formMeta:ce(),formControl:ce(),inputRef:Jt()}),Tt=s.forwardRef((e,t)=>{const E=e,{className:n,children:a,focusInputOnClick:o,formControl:i,formMeta:l,inputRef:c,onClick:p}=E,u=Z(E,["className","children","focusInputOnClick","formControl","formMeta","inputRef","onClick"]),f=s.useRef(),g=c||(t||f);function v(){g&&g!==t&&g.current&&g.current.focus()}function C(){g&&g!==t&&g.current&&l&&l instanceof Kn&&l.markAsFocused()}function k(){g&&g!==t&&g.current&&l&&l instanceof Kn&&l.markAsBlurred()}const S=A("sps-form-group",(i&&i.isRequired()||l&&l.isRequired())&&"sps-form-group--required",(i&&!i.isValid()||l&&l.isVisibilyInvalid())&&"sps-form-group--error",l&&l.hasPreventativeErrors()&&"sps-form-group--preventative-error",n);function w(y){o&&v(),p&&p(y)}return s.createElement("div",$(I({},u),{className:S,ref:t,tabIndex:-1,onClick:w,onFocus:C,onBlur:k}),a)});Object.assign(Tt,{spsFormComponentWrapperPropTypes:Hv,displayName:"SpsFormComponentWrapper"});function ed(e){return typeof e=="object"&&e!=null&&e.nodeType===1}function td(e,t){return(!t||e!=="hidden")&&e!=="visible"&&e!=="clip"}function vo(e,t){if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){var n=getComputedStyle(e,null);return td(n.overflowY,t)||td(n.overflowX,t)||function(a){var o=function(i){if(!i.ownerDocument||!i.ownerDocument.defaultView)return null;try{return i.ownerDocument.defaultView.frameElement}catch{return null}}(a);return!!o&&(o.clientHeight<a.scrollHeight||o.clientWidth<a.scrollWidth)}(e)}return!1}function Ds(e,t,n,a,o,i,l,c){return i<e&&l>t||i>e&&l<t?0:i<=e&&c<=n||l>=t&&c>=n?i-e-a:l>t&&c<n||i<e&&c>n?l-t+o:0}function nd(e,t){var n=window,a=t.scrollMode,o=t.block,i=t.inline,l=t.boundary,c=t.skipOverflowHiddenElements,p=typeof l=="function"?l:function(Ve){return Ve!==l};if(!ed(e))throw new TypeError("Invalid target");for(var u=document.scrollingElement||document.documentElement,f=[],m=e;ed(m)&&p(m);){if((m=m.parentElement)===u){f.push(m);break}m!=null&&m===document.body&&vo(m)&&!vo(document.documentElement)||m!=null&&vo(m,c)&&f.push(m)}for(var g=n.visualViewport?n.visualViewport.width:innerWidth,v=n.visualViewport?n.visualViewport.height:innerHeight,C=window.scrollX||pageXOffset,k=window.scrollY||pageYOffset,S=e.getBoundingClientRect(),w=S.height,E=S.width,y=S.top,N=S.right,_=S.bottom,R=S.left,O=o==="start"||o==="nearest"?y:o==="end"?_:y+w/2,B=i==="center"?R+E/2:i==="end"?N:R,F=[],P=0;P<f.length;P++){var U=f[P],K=U.getBoundingClientRect(),j=K.height,J=K.width,ee=K.top,ae=K.right,pe=K.bottom,de=K.left;if(a==="if-needed"&&y>=0&&R>=0&&_<=v&&N<=g&&y>=ee&&_<=pe&&R>=de&&N<=ae)return F;var G=getComputedStyle(U),X=parseInt(G.borderLeftWidth,10),V=parseInt(G.borderTopWidth,10),oe=parseInt(G.borderRightWidth,10),ne=parseInt(G.borderBottomWidth,10),se=0,Q=0,Ie="offsetWidth"in U?U.offsetWidth-U.clientWidth-X-oe:0,Be="offsetHeight"in U?U.offsetHeight-U.clientHeight-V-ne:0;if(u===U)se=o==="start"?O:o==="end"?O-v:o==="nearest"?Ds(k,k+v,v,V,ne,k+O,k+O+w,w):O-v/2,Q=i==="start"?B:i==="center"?B-g/2:i==="end"?B-g:Ds(C,C+g,g,X,oe,C+B,C+B+E,E),se=Math.max(0,se+k),Q=Math.max(0,Q+C);else{se=o==="start"?O-ee-V:o==="end"?O-pe+ne+Be:o==="nearest"?Ds(ee,pe,j,V,ne+Be,O,O+w,w):O-(ee+j/2)+Be/2,Q=i==="start"?B-de-X:i==="center"?B-(de+J/2)+Ie/2:i==="end"?B-ae+oe+Ie:Ds(de,ae,J,X,oe+Ie,B,B+E,E);var ve=U.scrollLeft,Fe=U.scrollTop;O+=Fe-(se=Math.max(0,Math.min(Fe+se,U.scrollHeight-j+Be))),B+=ve-(Q=Math.max(0,Math.min(ve+Q,U.scrollWidth-J+Ie)))}F.push({el:U,top:se,left:Q})}return F}function ad(e){return e===Object(e)&&Object.keys(e).length!==0}function Wv(e,t){t===void 0&&(t="auto");var n="scrollBehavior"in document.body.style;e.forEach(function(a){var o=a.el,i=a.top,l=a.left;o.scroll&&n?o.scroll({top:i,left:l,behavior:t}):(o.scrollTop=i,o.scrollLeft=l)})}function jv(e){return e===!1?{block:"end",inline:"nearest"}:ad(e)?e:{block:"start",inline:"nearest"}}function sd(e,t){var n=!e.ownerDocument.documentElement.contains(e);if(ad(t)&&typeof t.behavior=="function")return t.behavior(n?[]:nd(e,t));if(!n){var a=jv(t);return Wv(nd(e,a),a.behavior)}}var Yv=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",default:sd});const Gv={alt:"string",size:"SpinnerSize",title:"string"},Uv=$(I({},q),{alt:T.exports.string,size:be(M.SpinnerSize),title:T.exports.string});function ks(e){const m=e,{alt:t,className:n,size:a=M.SpinnerSize.MEDIUM,"data-testid":o,title:i,unsafelyReplaceClassName:l}=m,c=Z(m,["alt","className","size","data-testid","title","unsafelyReplaceClassName"]),{t:p}=s.useContext(Ye),u=t||i||p("design-system:spinner.defaultAltText"),f=A(l||"sps-spinner",`sps-spinner--${a}`,n);return s.createElement("i",I({className:f,"data-testid":o,title:u},c))}Object.assign(ks,{props:Gv,propTypes:Uv,displayName:"SpsSpinner"});const zv=60;function Ns(e){return typeof e=="undefined"?"inherit":`${e}px`}function rd(e){switch(e){case M.Position.TOP_LEFT:return M.Position.BOTTOM_LEFT;case M.Position.TOP_MIDDLE:return M.Position.BOTTOM_MIDDLE;case M.Position.TOP_RIGHT:return M.Position.BOTTOM_RIGHT;case M.Position.RIGHT_TOP:return M.Position.LEFT_TOP;case M.Position.RIGHT_MIDDLE:return M.Position.LEFT_MIDDLE;case M.Position.RIGHT_BOTTOM:return M.Position.LEFT_BOTTOM;case M.Position.BOTTOM_RIGHT:return M.Position.TOP_RIGHT;case M.Position.BOTTOM_MIDDLE:return M.Position.TOP_MIDDLE;case M.Position.BOTTOM_LEFT:return M.Position.TOP_LEFT;case M.Position.LEFT_BOTTOM:return M.Position.RIGHT_BOTTOM;case M.Position.LEFT_MIDDLE:return M.Position.RIGHT_MIDDLE;case M.Position.LEFT_TOP:return M.Position.RIGHT_TOP}}function qv(e,t,n,a,o,i,l,c){const p=l&&l.current,u=p?p.scrollTop:window.pageYOffset,f=c?0:u,m=p?p.scrollLeft:window.pageXOffset,g=c?0:m,[v,C]=e.split(" ");let k,S,w,E;switch(v){case"top":w=t.height-n.top-f-i[0];break;case"left":S=t.width-n.left-g-i[0];break;case"right":E=n.right+g-i[0];break;case"bottom":k=n.bottom+f-i[0];break;default:throw new Error(`Invalid position ${e}`)}switch(C){case"left":E=n.left+g+i[1];break;case"top":k=n.top+f+i[1];break;case"middle":v==="top"||v==="bottom"?E=n.left+g+n.width/2-o/2+i[1]:(v==="left"||v==="right")&&(k=n.top+f+n.height/2-a.height/2+i[1]);break;case"bottom":w=t.height-n.bottom-f+i[1];break;case"right":S=t.width-n.right-g+i[1];break;default:throw new Error(`Invalid position ${e}`)}return[k,S,w,E]}function Fa(e,t,n,{altPosition:a,setMinWidth:o=!1,setWidth:i=!1,parentElementRef:l,fixed:c=!1,offsets:p=[0,0]}){if(e.current&&t.current){const u=Math.max(document.documentElement.clientHeight,window.innerHeight||0),f=document.documentElement.getBoundingClientRect().width,m=l&&l.current?l.current:document.documentElement,g=c?{width:f,height:u,top:0,left:0,bottom:u,right:f}:m.getBoundingClientRect(),v=e.current.getBoundingClientRect(),C=t.current.getBoundingClientRect(),[k]=n.split(" ");let S=n;a&&(k==="top"&&C.top-v.height<zv||k==="right"&&C.right+v.width>f||k==="bottom"&&C.bottom+v.height>u||k==="left"&&C.left-v.width<0)&&(S=a);const w=o?Math.max(C.width,v.width):v.width,E=i?C.width:w,[y,N,_,R]=qv(S,g,C,v,E,p,l,c),O={top:Ns(y),right:Ns(N),bottom:Ns(_),left:Ns(R)};return c&&(O.position="fixed",O.zIndex=M.ZStratum.BAR),o&&(O.minWidth=`${C.width}px`),i&&(O.width=`${C.width}px`),[O,S===a]}return[{},!1]}const It=H.createContext(null);function ua(e,t=[]){const n=H.useContext(It);return H.useMemo(()=>a=>{const i=n&&n.parentElementRef&&n.parentElementRef.current||document.body;let l,c=i.lastElementChild;for(;c!==i.firstElementChild;){if(c.hasAttribute("data-portalid")&&c.getAttribute("data-portalid")===e){l=c;break}c=c.previousElementSibling}if(l)i.contains(l)||i.appendChild(l);else{l=document.createElement("div"),l.setAttribute("data-portalid",e);for(const p of t)l.classList.add(p);i.appendChild(l)}return co.createPortal(a,l)},[n])}const Jv={docs:{options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",captionKey:"string",disabledOptions:"any[]",comparisonKey:"string",tall:"boolean",textKey:"string",valueKey:"string",zeroState:"string",maxHeightPx:"number",maxHeightRem:"number"},propTypes:{captionKey:T.exports.string,comparisonKey:T.exports.string,disabledOptions:T.exports.arrayOf(T.exports.any),options:T.exports.oneOfType([T.exports.array,T.exports.instanceOf(Promise),re()]).isRequired,tall:T.exports.bool,textKey:T.exports.string,valueKey:T.exports.string,zeroState:T.exports.string,maxHeightPx:T.exports.number,maxHeightRem:T.exports.number}},Zv={hideInlineSearch:T.exports.bool,onSearchChange:re(),search:T.exports.string,searchDebounce:T.exports.number,searchPlaceholder:T.exports.string,searchInputRef:Jt()},Xv=$(I(I(I({},q),Jv.propTypes),Zv),{attachTo:Jt().isRequired,conformWidth:T.exports.bool,id:T.exports.string.isRequired,isOpen:T.exports.bool,keepOpen:T.exports.bool,keyDown:ce(),nullOption:T.exports.string,offsets:T.exports.arrayOf(T.exports.number),onOptionListChanged:re(),onOptionSelected:re(),onPositionFlip:re(),onSelfToggle:re(),optionRole:T.exports.string,positionOverride:T.exports.arrayOf(be(M.Position)),selectedOption:T.exports.any,specialAction:re(),ignoreWidthStyles:T.exports.bool,loading:T.exports.bool,filterByTextAndCaptionKey:T.exports.bool});async function od(e,t,n,a,o,i){const l=typeof e.options=="function"?e.options(t.value):e.options||[],c=l instanceof Promise;n({pending:c}),i.current=c?l:null;const p=c?await l||[]:l||[];if(c&&i.current!==l)return;let u=Array.from(p).filter(Boolean).map(f=>new M.SpsOptionListOption(f,typeof f=="function"?{textKey:"label",captionKey:"caption"}:{textKey:e.textKey,captionKey:e.captionKey}));if(e.nullOption&&u.unshift(new M.SpsOptionListOption(null,{text:e.nullOption})),t.value?(n({replacementPattern:new RegExp(t.value,"ig")}),u=u.filter(f=>{const m=new RegExp(t.value,"i");return e.filterByTextAndCaptionKey?m.test(f.text)||m.test(f.caption):m.test(f.text)})):n({replacementPattern:null}),e.disabledOptions)for(const f of u)e.disabledOptions.includes(f.value)&&(f.disabled=!0);a(Object.freeze(u)),e.onOptionListChanged&&e.onOptionListChanged(u.length),o(u.some(f=>f.value&&!!f.value.icon)),n({pending:!1})}function Qv(e,t,n){const[a,o]=s.useState(Object.freeze([])),[i,l]=s.useState(!1),c=s.useRef(null),p=s.useRef(e.options);typeof e.options!="function"&&(p.current=e.options);const u=s.useMemo(()=>typeof p.current=="function"?x.debounce(od,typeof e.searchDebounce!="undefined"?e.searchDebounce:500):od,[p.current,e.disabledOptions]);return s.useEffect(()=>{u(e,t,n,o,l,c)},[p.current,t.value,e.disabledOptions]),[a,i]}class Vn{constructor(t,n){this.target=t,this.isPgStoppedInternal=!1,this.currentTarget=t,this.nativeEvent=new CustomEvent("change",n),Object.defineProperty(this.nativeEvent,"target",{value:t,writable:!1,configurable:!1,enumerable:!0})}get bubbles(){return this.nativeEvent.bubbles}get cancelable(){return this.nativeEvent.cancelable}get defaultPrevented(){return this.nativeEvent.defaultPrevented}get eventPhase(){return this.nativeEvent.eventPhase}get isTrusted(){return this.nativeEvent.isTrusted}get timeStamp(){return this.nativeEvent.timeStamp}get type(){return this.nativeEvent.type}preventDefault(){this.nativeEvent.preventDefault()}isDefaultPrevented(){return this.defaultPrevented}stopPropagation(){this.nativeEvent.stopPropagation(),this.isPgStoppedInternal=!0}isPropagationStopped(){return this.isPgStoppedInternal}persist(){throw new Error("This is not a real React ChangeEvent. React does not permit the creation of SyntheticEvents in userland.")}}function ey(e,t){return I(I({},e),t)}function Zt(e){return H.useReducer(ey,e)}function ty({hideInlineSearch:e,options:t,onSearchChange:n,search:a="",searchPlaceholder:o="Search\u2026",searchInputRef:i}){const[l,c]=Zt({isAsync:typeof t=="function",pending:!1,value:a,replacementPattern:null}),p=s.useCallback(v=>{c({value:v.target.value}),n&&n(v)},[n]),u=s.useCallback(v=>{v.nativeEvent.stopImmediatePropagation(),v.stopPropagation()},[]),f=s.useCallback(v=>{v.nativeEvent.stopImmediatePropagation(),c({value:""}),n&&n(new Vn(i.current)),i.current&&i.current.focus()},[n]),m=v=>{!v||["Tab","Escape","Enter","Up","ArrowUp","Down","ArrowDown"].includes(v.key)||v.stopPropagation()};return s.useEffect(()=>{c({value:a})},[a]),[l.isAsync&&!e&&s.createElement("div",{className:"sps-option-list__search sps-form-group sps-text-input"},s.createElement("div",{className:"sps-form-control"},!l.value&&s.createElement("i",{className:"sps-icon sps-icon-filter sps-text-input__icon"}),s.createElement("input",{type:"text",className:"sps-text-input__input",placeholder:o,ref:i,value:l.value,onChange:p,onClick:u,onKeyDown:m}),l.value&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:f}))),l,c]}const ny=sd||Yv,ay=["Tab","Escape","Enter","Up","ArrowUp","Down","ArrowDown"],sy=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];function ry(e,t,n){return n?(e&&e[n])===(t&&t[n]):e===t}function id(e,t,n){return typeof n.value=="function"&&n.disabled?!0:t?!!(e==null?void 0:e.find(a=>{var o;return a[t]&&a[t]===((o=n==null?void 0:n.value)==null?void 0:o[t])})):!1}const Ka=s.forwardRef((e,t)=>{const _n=e,{captionKey:n,comparisonKey:a,disabledOptions:o,options:i,tall:l,textKey:c,valueKey:p,zeroState:u,hideInlineSearch:f,onSearchChange:m,search:g,searchDebounce:v,searchPlaceholder:C,attachTo:k,className:S,conformWidth:w,id:E,ignoreWidthStyles:y,isOpen:N,keepOpen:_,keyDown:R,nullOption:O,onOptionListChanged:B,onOptionSelected:F,onPositionFlip:P,onSelfToggle:U,optionRole:K,positionOverride:j,selectedOption:J,specialAction:ee,unsafelyReplaceClassName:ae,loading:pe,filterByTextAndCaptionKey:de,maxHeightPx:G,maxHeightRem:X,"data-testid":V}=_n,oe=Z(_n,["captionKey","comparisonKey","disabledOptions","options","tall","textKey","valueKey","zeroState","hideInlineSearch","onSearchChange","search","searchDebounce","searchPlaceholder","attachTo","className","conformWidth","id","ignoreWidthStyles","isOpen","keepOpen","keyDown","nullOption","onOptionListChanged","onOptionSelected","onPositionFlip","onSelfToggle","optionRole","positionOverride","selectedOption","specialAction","unsafelyReplaceClassName","loading","filterByTextAndCaptionKey","maxHeightPx","maxHeightRem","data-testid"]),ne=s.useMemo(()=>ee?new M.SpsOptionListOption(ee,{textKey:"label",captionKey:"caption"}):null,[ee]),[se,Q]=s.useState(-1),[Ie,Be]=s.useState(N),ve=t||s.useRef(null),Fe=s.useRef(null),Ve=s.useRef(null),Qe=ua("sps-option-list-portal"),Ze=s.useContext(It),[st,et]=j||[M.Position.BOTTOM_LEFT,M.Position.TOP_LEFT],[bt,ye]=Ie?Fa(ve,k,st,I({altPosition:et,setMinWidth:!y,setWidth:!y&&w},Ze)):[{},!1],Ae=s.useRef(null),[De,Oe,nt]=ty($(I({},e),{searchInputRef:Ae})),[ke,pt]=Qv(e,Oe,nt);s.useEffect(()=>{Q(-1)},[Oe]);const nn=A(ae||"sps-option-list","z-stratum-dropdown",Ie&&"sps-option-list--open",Oe.isAsync&&"sps-option-list--searchable",ye&&"sps-option-list--opens-upward",ee&&ee.label&&"sps-option-list--has-special-action",S),yn=A(ae||"sps-option-list__options",l&&"sps-option-list__options--tall"),Xe=s.useCallback(()=>{Ie||(Be(!0),Ae.current&&Ae.current.focus(),Q(-1),U&&U(!0))},[Ie,U]),an=s.useCallback(()=>{Ie&&(Be(!1),Q(-1),U&&U(!1))},[Ie,U]),Et=s.useCallback((me,Ce)=>{Ce||me&&!me.disabled&&(typeof me.value=="function"?me.value():typeof F=="function"&&F(me.value),_||an())},[F,an]),ut=s.useCallback((me,Ce,rt)=>{me.stopPropagation(),Et(Ce,rt)},[Et]),we=s.useRef(o||[]);we.current=o||[];const jt=s.useCallback(me=>{switch(me.key){case"Tab":case"Escape":an();break;case"Enter":if(se>-1){const Ce=ke[se]||ne;me.preventDefault();const rt=!!Ce&&id(we.current,a,Ce);!rt&&Ce&&typeof F=="function"&&typeof Ce.value=="function"?Ce.value():Ce&&Et(Ce,rt)}break;case"Up":case"ArrowUp":{let Ce=se;ye?se<=-1?Ce=ke.length-1:se===0?ee&&(Ce=ke.length):se<ke.length&&(Ce=se-1):se>-1&&(Ce=se-1),Ce!==se&&(me.preventDefault(),Q(Ce));break}case"Down":case"ArrowDown":{Xe();let Ce=se;ye?se!==-1&&(se>=ke.length?Ce=0:se===ke.length-1?Ce=-1:Ce=se+1):se<ke.length-1+Number(!!ee)&&(Ce=se+1),Ce!==se&&(me.preventDefault(),Q(Ce));break}default:Xe()}},[an,Xe,se,Et,F,ye,ke]),Tn=s.useCallback(me=>{const Ce=ke.findIndex(rt=>{if(rt.textKey){const Lt=rt.textKey;return rt.value[Lt].toLowerCase().charAt([0])===me.key.toLocaleLowerCase()}return rt.value.toLowerCase().charAt([0])===me.key.toLocaleLowerCase()});Ce>-1&&Q(Ce)},[ke]),Qn=s.useCallback(me=>{!me||(ay.includes(me.key)?jt(me):sy.includes(me.key)&&Tn(me))},[an,Xe,se,Et,F,ye,ke]);s.useEffect(()=>{if(Ze!==null&&document.getElementsByClassName("sps-modal__body").length>0){const me=()=>{U(!1)},Ce=document.getElementsByClassName("sps-modal__body")[0];return Ce.addEventListener("scroll",me),()=>{Ce.removeEventListener("scroll",me)}}},[]),s.useEffect(()=>{Ve.current&&ny(Ve.current,{scrollMode:"if-needed",block:"nearest",inline:"nearest"})},[se]),s.useEffect(()=>{Be(N),N?Ae.current&&Ae.current.focus():Q(-1)},[N]),s.useEffect(()=>{Qn(R)},[R]),s.useEffect(()=>{!Ie&&Fe.current&&(nt({value:""}),Fe.current.scrollTop=0),Ie&&P&&P(ye)},[Ie]);const ea=G?G/16:X,ka=ea?{maxHeight:`${ea}rem`}:{};return Qe(s.createElement("div",I({className:nn,id:E,"aria-activedescendant":se>-1?`${E}-option-${se}`:null,tabIndex:-1,ref:ve,style:bt,onMouseLeave:()=>Q(-1),"data-testid":V},oe),De,s.createElement("div",{className:yn,ref:Fe,"data-testid":`${V}-options`,style:ka},!pe&&!Oe.pending&&u&&(Oe.value||!Oe.isAsync)&&ke.length===0&&s.createElement("div",{className:"sps-option-list__zero-state"},u),(pe||Oe.pending)&&s.createElement("div",{className:"sps-option-list__loading"},s.createElement(ks,null)),!pe&&!Oe.pending&&ke.map((me,Ce)=>{const rt=`${E}-option-${Ce}`,Lt=ry(me.value,J,a),Le=id(we.current,a,me);return s.createElement("a",{key:rt,id:rt,role:K,"aria-selected":Lt,href:me.href,className:A("sps-option-list__option",me.caption&&"sps-option-list__option--has-caption",me.disabled&&"sps-option-list__option--disabled",me.bold&&"sps-option-list__option--bold",(Lt||Le)&&"sps-option-list__option--selected",se===Ce&&"sps-option-list__option--highlighted"),onClick:Yt=>ut(Yt,me,Le),onMouseOver:()=>Q(Ce),tabIndex:-1,ref:se===Ce?Ve:null,"data-testid":`${V}-option-${Ce}`},me.value&&me.value.icon&&s.createElement("i",{className:A("sps-icon","sps-option-list__option-icon",`sps-icon-${String(me.value.icon)}`)}),(!me.value||!me.value.icon&&pt)&&s.createElement("span",{className:"sps-option-list__option-icon-spacer"}),s.createElement("span",{dangerouslySetInnerHTML:{__html:me.getHtml(Oe.replacementPattern)}}),me.caption&&s.createElement("div",{className:"sps-option-list__option-caption"},s.createElement("span",{dangerouslySetInnerHTML:{__html:me.caption.replace(Oe.replacementPattern,"<u>$&</u>")}})))})),ne&&ee.label&&s.createElement("a",{className:A("sps-option-list__option","sps-option-list__special-action",se===ke.length&&"sps-option-list__option--highlighted",ee.disabled&&"sps-option-list__special-action--disabled"),href:ne.href,onClick:me=>ut(me,ne),onMouseOver:()=>Q(ke.length)},ee.icon&&s.createElement("i",{className:A("sps-icon","sps-option-list__option-icon",`sps-icon-${String(ee.icon)}`)}),!ee.icon&&pt&&s.createElement("span",{className:"sps-option-list__option-icon-spacer"}),s.createElement("span",null,ee.label))))});Object.assign(Ka,{propTypes:Xv,displayName:"SpsOptionList"});function Vt(e=[],t=[]){const n=Array.isArray(e)?x.flatten(e):[e],a=t.map(i=>Array.isArray(i)?i:[i]),o=new Array(a.length+1).fill(null).map(()=>[]);for(const i of n){let l=!1;for(let c=0;c<a.length;c+=1)for(const{type:p,props:u={}}of a[c])if(i.type===p&&Object.keys(u).every(m=>u[m]===i.props[m])){l=!0,o[c].push(i);break}l||o[o.length-1].push(i)}return o}function ld(e,t,n){const a=Object.entries(t).filter(([,i])=>typeof i!="string"&&i.deprecated).map(([i])=>i),o=a.map(i=>n[i]);s.useEffect(()=>{o.find(i=>typeof i!="undefined")&&console.warn(`The following prop(s) of ${e} are deprecated: ${a.join(", ")}`)},o)}function cd(e,t){const n=H.useRef(!1);H.useEffect(()=>{if(n.current)return e();n.current=!0},t)}function dd(e,t,n){const a=s.useRef(t(...n));s.useEffect(()=>(document.addEventListener(e,a.current),()=>document.removeEventListener(e,a.current)),[]),s.useEffect(()=>{document.removeEventListener(e,a.current),a.current=t(...n),document.addEventListener(e,a.current)},n)}function oy(e,t,n){return function(o){var i,l;!((i=e.current)==null?void 0:i.contains(o.target))&&!((l=t.current)==null?void 0:l.contains(o.target))&&n()}}function Va(e,t,n){const a=s.useRef(!1),[o,i]=s.useState(!1),l=s.useCallback(()=>{a.current?a.current=!1:i(!0)},[]),c=s.useCallback((p=!1)=>{i(!1),a.current=p,n&&n()},[]);return dd("mousedown",oy,[e,t,c]),{showPopup:o,doShowPopup:l,doHidePopup:c}}const iy={debounce:"number",disabled:"boolean",formMeta:"SpsFormFieldMeta<string>",icon:"SpsIcon",onChange:"React.ChangeEventHandler",placeholder:"string",suggestions:{type:`
+                `}}}};var Sv=self.crypto||self.msCrypto,mo="-_",xn=36;for(;xn--;)mo+=xn.toString(36);xn=36;for(;xn---10;)mo+=xn.toString(36).toUpperCase();var bv=function(e){var t="",n=Sv.getRandomValues(new Uint8Array(e||21));for(xn=e||21;xn--;)t+=mo[n[xn]&63];return t},Dn=bv;function ca(e){return H.useRef(e||Dn())}function Ft(e,t){const n=ca(e),a=H.useRef(`${n.current}_ctrl`);return H.useEffect(()=>{t&&(t.id=a.current,t.update())},[t]),{wrapperId:n.current,controlId:a.current}}var vv="[object Object]";function yv(e){var t=!1;if(e!=null&&typeof e.toString!="function")try{t=!!(e+"")}catch{}return t}function Tv(e,t){return function(n){return e(t(n))}}var wv=Function.prototype,Wc=Object.prototype,jc=wv.toString,Cv=Wc.hasOwnProperty,Ev=jc.call(Object),xv=Wc.toString,Dv=Tv(Object.getPrototypeOf,Object);function kv(e){return!!e&&typeof e=="object"}function Nv(e){if(!kv(e)||xv.call(e)!=vv||yv(e))return!1;var t=Dv(e);if(t===null)return!0;var n=Cv.call(t,"constructor")&&t.constructor;return typeof n=="function"&&n instanceof n&&jc.call(n)==Ev}var Yc=Nv;const Kt=new Set,da=new Set,mn=new Set,Ba=new Set;function Gc(e){Kt.has(e)||mn.has(e)||Ba.has(e)||da.add(e)}function Uc(e){Kt.has(e)||mn.has(e)||da.has(e)||Ba.add(e)}const fo=Ut.default||Ut,ws="MM/DD/YYYY",Iv=/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,zc=Symbol("Date Parse Error");function pa(e){return e.year*1e4+e.month*100+e.date}const he=Object.freeze({createFrom(e){if(!e)return null;if(typeof e=="string"){const t=Iv.exec(e);if(t){const[,n,a,o]=t;return Object.freeze({year:Number(o),month:Number(n),date:Number(a)})}return Object.freeze({[zc]:!0,year:void 0,month:void 0,date:void 0})}return Object.freeze({year:e.year(),month:e.month()+1,date:e.date()})},createRangeFrom(e){return e?e.split(/[^\d]*-[^\d]*/).map(he.createFrom):null},isValid(e){return e&&typeof e=="object"&&typeof e.year=="number"&&typeof e.month=="number"&&typeof e.date=="number"&&he.toMoment(e).isValid()},nullifyInvalidDate(e){return he.isValid(e)?e:null},toMoment(e){return e?fo($(I({},e),{month:e.month-1})):null},toString(e){const t=he.toMoment(e);return t?t.format(ws):""},toStringRange(e){return e?e.map(he.toString).join("-"):""},create(){const e=new Date;return Object.freeze({year:e.getFullYear(),month:e.getMonth()+1,date:e.getDate()})},isSameDate(e,t){return e&&t&&e.year===t.year&&e.month===t.month&&e.date===t.date},isSameMonth(e,t){return e&&t&&e.year===t.year&&e.month===t.month},isAfter(e,t){return!e||!t?null:pa(e)>pa(t)},isBefore(e,t){return!e||!t?null:pa(e)<pa(t)},isInRange(e,t,n=!0){if(!e||!t||!t[0]||!t[1])return null;const a=pa(e),[o,i]=t.map(pa);return e&&o&&i&&(n&&a>=o&&a<=i||!n&&a>o&&a<i)},prevMonth(e){return Object.freeze({year:e.month===1?e.year-1:e.year,month:e.month-1||12,date:e.date})},nextMonth(e){return Object.freeze({year:e.month===12?e.year+1:e.year,month:e.month+1>12?1:e.month+1,date:e.date})},createRangeFromPreset(e){if(typeof e.definition=="function")return e.definition();const t=fo(),n=t.clone().subtract(fo.duration(e.definition));return[he.createFrom(n),he.createFrom(t)]}}),Pa=function(t){if(Array.isArray(t)){const n=Pa(t[0]),a=Pa(t[1]);return n||a}if(t&&t.hasOwnProperty("year")){if(t[zc])return{dateFormat:ws};if(!he.isValid(t))return{dateValidity:!0}}return null};Kt.add("dateFormat");Kt.add("dateValidity");const qc=function(t){if(Array.isArray(t)){const n=Pa(t);if(n)return n;if(t&&he.isBefore(t[1],t[0]))return{dateRangeOrder:!0}}return null};Kt.add("dateRangeOrder");const Jc=function({minDate:t,maxDate:n}){function a(o){const i=he.isBefore(o,t),l=he.isAfter(o,n),c={minExceeded:i?he.toString(t):null,maxExceeded:l?he.toString(n):null};return i||l?{dateConstraint:c}:null}return function(i){if(!i)return null;if(Array.isArray(i)){const l=a(i[0]),c=a(i[1]);return l||c}return i.hasOwnProperty("year")?a(i):null}};Kt.add("dateConstraint");var _v=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",date:Pa,dateRange:qc,dateConstraint:Jc});const Mv=function(t){return function(a){return Number(a)>=t?null:{min:t}}};Kt.add("min");const Ov=function(t){return n=>Number(n)<=t?null:{max:t}};da.add("max");const Rv=function(t){return typeof t=="undefined"||t===null||t===""||Number.isNaN(t)||(t==null?void 0:t.length)===0?{required:!0}:null};da.add("required");const Lv=function(t){return function(a){return a.length>=t?null:{minLength:t}}};Kt.add("minLength");const Bv=function(t){return function(a){return a.length<=t?null:{maxLength:t}}};mn.add("maxLength");const Pv=function(t){const n=t instanceof RegExp?t:new RegExp(t);return function(o){return n.test(o)?null:{pattern:t}}};Kt.add("pattern");const Av=function(t){return/^[A-Za-z]*$/.test(t)?null:{alpha:!0}};mn.add("alpha");const Fv=function(t){return/^[0-9,. ]*$/.test(t)?null:{numeric:!0}};mn.add("numeric");const Kv=function(t){return/^[^0-9]*$/.test(t)?null:{nonNumeric:!0}};mn.add("nonNumeric");const Cs=Object.freeze($(I({},_v),{min:Mv,max:Ov,required:Rv,minLength:Lv,maxLength:Bv,pattern:Pv,alpha:Av,numeric:Fv,nonNumeric:Kv,OnBlurErrorKeys:Kt}));function Aa(e,t=[]){const n=t.reduce((a,o)=>Object.assign(a,o(e)||{}),{});return Object.keys(n).length?n:null}class Fn{constructor(t,n){this.path=t,this.update=n,this.validators=[],this.errors=null,this.revealAllErrors=!1,this.preventativeErrors=[],this.submitted=!1}setValidators(t){return this.update(this.path,null,null,t),this}validate(t){return this.validators&&this.validators.length>0?(this.errors=Aa(t,this.validators),this.update(null),this.isFocused()&&this.onFocus&&this.onFocus()):this.errors&&(this.errors=null,this.update(null)),this}isValid(){return!this.errors||this.isPristine()}hasErrors(){return!!this.errors}isVisibilyInvalid(){return this.errors&&(this.revealAllErrors&&!Object.keys(this.errors).some(t=>Ba.has(t))||this.revealAllErrors&&Object.keys(this.errors).some(t=>Ba.has(t))&&this.isSubmitted()||!this.isPristine()&&Object.keys(this.errors).some(t=>da.has(t)))}hasError(t){return this.errors&&Object.prototype.hasOwnProperty.call(this.errors,t)}hasPreventativeError(t){return this.preventativeErrors.includes(t)}hasPreventativeErrors(){return this.preventativeErrors.length>0}isRequired(){return this.validators&&this.validators.indexOf(Cs.required)>-1}isSubmitted(){return this.submitted}onFocus(){}onBlur(){}}class Kn extends Fn{constructor(){super(...arguments);this.id=Dn(),this.focused=!1,this.pristine=!0}setValue(t){if(this.revealAllErrors=!1,this.preventativeErrors=[],this.validators&&this.validators.length>0){const n=Aa(t,this.validators);if(n&&Object.keys(n).filter(o=>mn.has(o)).length>0){this.preventativeErrors=Object.keys(n);return}}this.update(this.path,t)}isPristine(){return this.pristine}markAsPristine(){return this.pristine=!0,this.revealAllErrors=!1,this.update(null),this}markAsDirty(){return this.pristine=!1,this.update(null),this}isFocused(){return this.focused}markAsFocused(){return this.focused=!0,this.update(null),this.onFocus&&this.onFocus(),this}markAsBlurred(){return this.update(this.path,null,!0),this.onBlur&&this.onBlur(),this.preventativeErrors=[],this}markAsSubmitted(){return this.submitted=!0,this.update(null),this}}class Es extends Kn{constructor(t,n,a){const o=a?n:t,i=a||n;super(o,i);a&&this.inferMembers(t)}inferSpsControl(t,n){return xs(t,[...this.path,n],this.update)}rollup(t){return Object.keys(this.fields).reduce((n,a)=>n&&(!this.fields[a][t]||this.fields[a][t]()),!0)}isFocused(){return super.isFocused()||this.rollup("isFocused")}isValid(){return super.isValid()&&this.rollup("isValid")}hasErrors(){return super.hasErrors()||Object.keys(this.fields).some(t=>this.fields[t].hasErrors())}contentsAreValid(){return this.rollup("isValid")&&this.rollup("contentsAreValid")}isPristine(){return super.isPristine()&&this.rollup("isPristine")}markAsPristine(){super.markAsPristine();for(const t of Object.keys(this.fields))this.fields[t].markAsPristine();return this}markAsDirty(){super.markAsDirty();for(const t of Object.keys(this.fields))this.fields[t].markAsDirty();return this}markAsBlurred(){super.markAsBlurred();for(const t of Object.keys(this.fields))this.fields[t].markAsBlurred();return this}markAsSubmitted(){super.markAsSubmitted();for(const t of Object.keys(this.fields))this.fields[t].markAsSubmitted();return this}}class Zc extends Es{inferMembers(t){this.fields={};for(const n of Object.keys(t))this.fields[n]=this.inferSpsControl(t[n],n)}}class Xc extends Es{inferMembers(t){this.fields=t.map((n,a)=>this.inferSpsControl(n,String(a)))}}function xs(e,t,n){return e instanceof Fn?(e.path=t,e.update=n,e):Array.isArray(e)?new Xc(e,t,n):Yc(e)?new Zc(e,t,n):new Kn(t,n)}function ho(e,t){return t.length===0||!e?e:ho(e.fields[t[0]],t.slice(1,t.length))}function go(e,t){if(t.length===0||!e)return[e];const n=t[0];if(t=t.slice(1,t.length),n==="*"){const a=Array.isArray(e.fields)?e.fields:Object.keys(e.fields).map(o=>e.fields[o]);return t.length===0?a:a.reduce((o,i)=>[...o,...go(i,t)],[])}return go(e.fields[n],t)}function Qc(e,t,n){for(const a of Object.keys(t)){const o=t[a];for(const i of go(e,a.split(".")))i&&o&&n(i,o)}}function So(e,t,n,a=!1){Qc(t,n,(o,i)=>{o.validators=typeof i=="function"?i(e):i,a&&(o.errors=Aa(x.getPath(e,o.path),o.validators))})}function bo(e,t){const n=t[0];return t=t.slice(1),Array.isArray(e)?e.map((a,o)=>o===Number(n)?bo(a,t):a):Yc(e)?Object.keys(e).reduce((a,o)=>Object.assign(a,{[o]:o===n?bo(e[o],t):e[o]}),{}):e}function Vv(e){if(typeof e!="object"||e===null||Array.isArray(e))throw new TypeError("The initial value of useSpsForm() hook must be an object.")}function $v(e,t){Vv(e);const n=H.useMemo(()=>{x.deepFreeze(e);const f=xs(e,[],p);return t&&So(e,f,t,!0),f},[]),a=H.useRef();let o=t;const i=H.useCallback((f,m)=>{let g;if(a.current=null,m)if(m.path)if(m.markAsBlurred){const v=ho(f.formMeta,m.path);v&&(v.focused=!1,v.revealAllErrors=!0)}else if(m.newValidators){if(o){const v=m.path.join("."),C=I({},o);C[v]=m.newValidators,o=C,So(f.formValue,f.formMeta,o,!0)}}else g=bo(f.formValue,m.path),x.setPath(g,m.path,m.value);else g=m.value;if(g){x.deepFreeze(g);const v=x.diff(f.formValue,g);for(const{type:C,key:k,parentPath:S,objects:[w,E]}of v){const y=ho(f.formMeta,S);if(typeof k!="symbol"&&y)switch(C){case x.DiffChange.ADDITION:y.fields[k]=xs(E[k],[...S,k],p);break;case x.DiffChange.DELETION:Array.isArray(y.fields)?y.fields.splice(Number(k),1):delete y.fields[k];break;case x.DiffChange.ALTERATION:if(!w[k]&&E[k]&&!(y.fields[k]instanceof Es)){const N=xs(E[k],[...S,k],p);N instanceof Kn&&y.fields[k]instanceof Kn&&(N.id=y.fields[k].id,N.focused=y.fields[k].focused,N.pristine=y.fields[k].pristine),y.fields[k]=N}break}}if(o){So(g,f.formMeta,o);const C=new Set;Qc(f.formMeta,t,(k,S)=>{typeof S=="function"&&(k.validate(x.getPath(g,k.path)),C.add(k))});for(const{type:k,key:S,parentPath:w,objects:[,E]}of v)if(typeof S!="symbol"){let y=f.formMeta,N=g;if(y){for(const _ of w)y=y.fields[_],N=N[_],C.has(y)||y.validate(N);if(k===x.DiffChange.ADDITION||k===x.DiffChange.ALTERATION){const _=y.fields[S];if(!C.has(_)&&(y.fields[S].validate(E[S]),k===x.DiffChange.ADDITION&&_.fields))for(const[R,O]of Object.entries(_.fields))O.validate(E[S][R])}}}}}return{formValue:g||f.formValue,formMeta:f.formMeta,updateForm:f.updateForm}},[]),[l,c]=H.useReducer(i,{formValue:e,formMeta:n,updateForm:u});function p(f,m,g=!1,v){f?c({path:f,value:m,markAsBlurred:g,newValidators:v}):u()}function u(f){if(f){a.current&&window.clearTimeout(a.current);const m=window.setTimeout(c,0,{value:f});a.current=m}else if(!a.current){const m=window.setTimeout(c,0,{});a.current=m}}return H.useEffect(()=>()=>{a.current&&window.clearTimeout(a.current)},[]),l}const Hv=$(I({},q),{focusInputOnClick:T.exports.bool,formMeta:ce(),formControl:ce(),inputRef:Jt()}),Tt=s.forwardRef((e,t)=>{const E=e,{className:n,children:a,focusInputOnClick:o,formControl:i,formMeta:l,inputRef:c,onClick:p}=E,u=Z(E,["className","children","focusInputOnClick","formControl","formMeta","inputRef","onClick"]),f=s.useRef(),g=c||(t||f);function v(){g&&g!==t&&g.current&&g.current.focus()}function C(){g&&g!==t&&g.current&&l&&l instanceof Kn&&l.markAsFocused()}function k(){g&&g!==t&&g.current&&l&&l instanceof Kn&&l.markAsBlurred()}const S=A("sps-form-group",(i&&i.isRequired()||l&&l.isRequired())&&"sps-form-group--required",(i&&!i.isValid()||l&&l.isVisibilyInvalid())&&"sps-form-group--error",l&&l.hasPreventativeErrors()&&"sps-form-group--preventative-error",n);function w(y){o&&v(),p&&p(y)}return s.createElement("div",$(I({},u),{className:S,ref:t,tabIndex:-1,onClick:w,onFocus:C,onBlur:k}),a)});Object.assign(Tt,{spsFormComponentWrapperPropTypes:Hv,displayName:"SpsFormComponentWrapper"});function ed(e){return typeof e=="object"&&e!=null&&e.nodeType===1}function td(e,t){return(!t||e!=="hidden")&&e!=="visible"&&e!=="clip"}function vo(e,t){if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){var n=getComputedStyle(e,null);return td(n.overflowY,t)||td(n.overflowX,t)||function(a){var o=function(i){if(!i.ownerDocument||!i.ownerDocument.defaultView)return null;try{return i.ownerDocument.defaultView.frameElement}catch{return null}}(a);return!!o&&(o.clientHeight<a.scrollHeight||o.clientWidth<a.scrollWidth)}(e)}return!1}function Ds(e,t,n,a,o,i,l,c){return i<e&&l>t||i>e&&l<t?0:i<=e&&c<=n||l>=t&&c>=n?i-e-a:l>t&&c<n||i<e&&c>n?l-t+o:0}function nd(e,t){var n=window,a=t.scrollMode,o=t.block,i=t.inline,l=t.boundary,c=t.skipOverflowHiddenElements,p=typeof l=="function"?l:function(Ve){return Ve!==l};if(!ed(e))throw new TypeError("Invalid target");for(var u=document.scrollingElement||document.documentElement,f=[],m=e;ed(m)&&p(m);){if((m=m.parentElement)===u){f.push(m);break}m!=null&&m===document.body&&vo(m)&&!vo(document.documentElement)||m!=null&&vo(m,c)&&f.push(m)}for(var g=n.visualViewport?n.visualViewport.width:innerWidth,v=n.visualViewport?n.visualViewport.height:innerHeight,C=window.scrollX||pageXOffset,k=window.scrollY||pageYOffset,S=e.getBoundingClientRect(),w=S.height,E=S.width,y=S.top,N=S.right,_=S.bottom,R=S.left,O=o==="start"||o==="nearest"?y:o==="end"?_:y+w/2,B=i==="center"?R+E/2:i==="end"?N:R,F=[],P=0;P<f.length;P++){var U=f[P],K=U.getBoundingClientRect(),j=K.height,J=K.width,ee=K.top,ae=K.right,pe=K.bottom,de=K.left;if(a==="if-needed"&&y>=0&&R>=0&&_<=v&&N<=g&&y>=ee&&_<=pe&&R>=de&&N<=ae)return F;var G=getComputedStyle(U),X=parseInt(G.borderLeftWidth,10),V=parseInt(G.borderTopWidth,10),oe=parseInt(G.borderRightWidth,10),ne=parseInt(G.borderBottomWidth,10),se=0,Q=0,Ie="offsetWidth"in U?U.offsetWidth-U.clientWidth-X-oe:0,Be="offsetHeight"in U?U.offsetHeight-U.clientHeight-V-ne:0;if(u===U)se=o==="start"?O:o==="end"?O-v:o==="nearest"?Ds(k,k+v,v,V,ne,k+O,k+O+w,w):O-v/2,Q=i==="start"?B:i==="center"?B-g/2:i==="end"?B-g:Ds(C,C+g,g,X,oe,C+B,C+B+E,E),se=Math.max(0,se+k),Q=Math.max(0,Q+C);else{se=o==="start"?O-ee-V:o==="end"?O-pe+ne+Be:o==="nearest"?Ds(ee,pe,j,V,ne+Be,O,O+w,w):O-(ee+j/2)+Be/2,Q=i==="start"?B-de-X:i==="center"?B-(de+J/2)+Ie/2:i==="end"?B-ae+oe+Ie:Ds(de,ae,J,X,oe+Ie,B,B+E,E);var ve=U.scrollLeft,Fe=U.scrollTop;O+=Fe-(se=Math.max(0,Math.min(Fe+se,U.scrollHeight-j+Be))),B+=ve-(Q=Math.max(0,Math.min(ve+Q,U.scrollWidth-J+Ie)))}F.push({el:U,top:se,left:Q})}return F}function ad(e){return e===Object(e)&&Object.keys(e).length!==0}function Wv(e,t){t===void 0&&(t="auto");var n="scrollBehavior"in document.body.style;e.forEach(function(a){var o=a.el,i=a.top,l=a.left;o.scroll&&n?o.scroll({top:i,left:l,behavior:t}):(o.scrollTop=i,o.scrollLeft=l)})}function jv(e){return e===!1?{block:"end",inline:"nearest"}:ad(e)?e:{block:"start",inline:"nearest"}}function sd(e,t){var n=!e.ownerDocument.documentElement.contains(e);if(ad(t)&&typeof t.behavior=="function")return t.behavior(n?[]:nd(e,t));if(!n){var a=jv(t);return Wv(nd(e,a),a.behavior)}}var Yv=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",default:sd});const Gv={alt:"string",size:"SpinnerSize",title:"string"},Uv=$(I({},q),{alt:T.exports.string,size:be(M.SpinnerSize),title:T.exports.string});function ks(e){const m=e,{alt:t,className:n,size:a=M.SpinnerSize.MEDIUM,"data-testid":o,title:i,unsafelyReplaceClassName:l}=m,c=Z(m,["alt","className","size","data-testid","title","unsafelyReplaceClassName"]),{t:p}=s.useContext(Ye),u=t||i||p("design-system:spinner.defaultAltText"),f=A(l||"sps-spinner",`sps-spinner--${a}`,n);return s.createElement("i",I({className:f,"data-testid":o,title:u},c))}Object.assign(ks,{props:Gv,propTypes:Uv,displayName:"SpsSpinner"});const zv=60;function Ns(e){return typeof e=="undefined"?"inherit":`${e}px`}function rd(e){switch(e){case M.Position.TOP_LEFT:return M.Position.BOTTOM_LEFT;case M.Position.TOP_MIDDLE:return M.Position.BOTTOM_MIDDLE;case M.Position.TOP_RIGHT:return M.Position.BOTTOM_RIGHT;case M.Position.RIGHT_TOP:return M.Position.LEFT_TOP;case M.Position.RIGHT_MIDDLE:return M.Position.LEFT_MIDDLE;case M.Position.RIGHT_BOTTOM:return M.Position.LEFT_BOTTOM;case M.Position.BOTTOM_RIGHT:return M.Position.TOP_RIGHT;case M.Position.BOTTOM_MIDDLE:return M.Position.TOP_MIDDLE;case M.Position.BOTTOM_LEFT:return M.Position.TOP_LEFT;case M.Position.LEFT_BOTTOM:return M.Position.RIGHT_BOTTOM;case M.Position.LEFT_MIDDLE:return M.Position.RIGHT_MIDDLE;case M.Position.LEFT_TOP:return M.Position.RIGHT_TOP}}function qv(e,t,n,a,o,i,l,c){const p=l&&l.current,u=p?p.scrollTop:window.pageYOffset,f=c?0:u,m=p?p.scrollLeft:window.pageXOffset,g=c?0:m,[v,C]=e.split(" ");let k,S,w,E;switch(v){case"top":w=t.height-n.top-f-i[0];break;case"left":S=t.width-n.left-g-i[0];break;case"right":E=n.right+g-i[0];break;case"bottom":k=n.bottom+f-i[0];break;default:throw new Error(`Invalid position ${e}`)}switch(C){case"left":E=n.left+g+i[1];break;case"top":k=n.top+f+i[1];break;case"middle":v==="top"||v==="bottom"?E=n.left+g+n.width/2-o/2+i[1]:(v==="left"||v==="right")&&(k=n.top+f+n.height/2-a.height/2+i[1]);break;case"bottom":w=t.height-n.bottom-f+i[1];break;case"right":S=t.width-n.right-g+i[1];break;default:throw new Error(`Invalid position ${e}`)}return[k,S,w,E]}function Fa(e,t,n,{altPosition:a,setMinWidth:o=!1,setWidth:i=!1,parentElementRef:l,fixed:c=!1,offsets:p=[0,0]}){if(e.current&&t.current){const u=Math.max(document.documentElement.clientHeight,window.innerHeight||0),f=document.documentElement.getBoundingClientRect().width,m=l&&l.current?l.current:document.documentElement,g=c?{width:f,height:u,top:0,left:0,bottom:u,right:f}:m.getBoundingClientRect(),v=e.current.getBoundingClientRect(),C=t.current.getBoundingClientRect(),[k]=n.split(" ");let S=n;a&&(k==="top"&&C.top-v.height<zv||k==="right"&&C.right+v.width>f||k==="bottom"&&C.bottom+v.height>u||k==="left"&&C.left-v.width<0)&&(S=a);const w=o?Math.max(C.width,v.width):v.width,E=i?C.width:w,[y,N,_,R]=qv(S,g,C,v,E,p,l,c),O={top:Ns(y),right:Ns(N),bottom:Ns(_),left:Ns(R)};return c&&(O.position="fixed",O.zIndex=M.ZStratum.BAR),o&&(O.minWidth=`${C.width}px`),i&&(O.width=`${C.width}px`),[O,S===a]}return[{},!1]}const It=H.createContext(null);function ua(e,t=[]){const n=H.useContext(It);return H.useMemo(()=>a=>{const i=n&&n.parentElementRef&&n.parentElementRef.current||document.body;let l,c=i.lastElementChild;for(;c!==i.firstElementChild;){if(c.hasAttribute("data-portalid")&&c.getAttribute("data-portalid")===e){l=c;break}c=c.previousElementSibling}if(l)i.contains(l)||i.appendChild(l);else{l=document.createElement("div"),l.setAttribute("data-portalid",e);for(const p of t)l.classList.add(p);i.appendChild(l)}return co.createPortal(a,l)},[n])}const Jv={docs:{options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",captionKey:"string",disabledOptions:"any[]",comparisonKey:"string",tall:"boolean",textKey:"string",valueKey:"string",zeroState:"string",maxHeightPx:"number",maxHeightRem:"number"},propTypes:{captionKey:T.exports.string,comparisonKey:T.exports.string,disabledOptions:T.exports.arrayOf(T.exports.any),options:T.exports.oneOfType([T.exports.array,T.exports.instanceOf(Promise),re()]).isRequired,tall:T.exports.bool,textKey:T.exports.string,valueKey:T.exports.string,zeroState:T.exports.string,maxHeightPx:T.exports.number,maxHeightRem:T.exports.number}},Zv={hideInlineSearch:T.exports.bool,onSearchChange:re(),search:T.exports.string,searchDebounce:T.exports.number,searchPlaceholder:T.exports.string,searchInputRef:Jt()},Xv=$(I(I(I({},q),Jv.propTypes),Zv),{attachTo:Jt().isRequired,conformWidth:T.exports.bool,id:T.exports.string.isRequired,isOpen:T.exports.bool,keepOpen:T.exports.bool,keyDown:ce(),nullOption:T.exports.string,offsets:T.exports.arrayOf(T.exports.number),onOptionListChanged:re(),onOptionSelected:re(),onPositionFlip:re(),onSelfToggle:re(),optionRole:T.exports.string,positionOverride:T.exports.arrayOf(be(M.Position)),selectedOption:T.exports.any,specialAction:re(),ignoreWidthStyles:T.exports.bool,loading:T.exports.bool,filterByTextAndCaptionKey:T.exports.bool});async function od(e,t,n,a,o,i){const l=typeof e.options=="function"?e.options(t.value):e.options||[],c=l instanceof Promise;n({pending:c}),i.current=c?l:null;const p=c?await l||[]:l||[];if(c&&i.current!==l)return;let u=Array.from(p).filter(Boolean).map(f=>new M.SpsOptionListOption(f,typeof f=="function"?{textKey:"label",captionKey:"caption"}:{textKey:e.textKey,captionKey:e.captionKey}));if(e.nullOption&&u.unshift(new M.SpsOptionListOption(null,{text:e.nullOption})),t.value?(n({replacementPattern:new RegExp(t.value,"ig")}),u=u.filter(f=>{const m=new RegExp(t.value,"i");return e.filterByTextAndCaptionKey?m.test(f.text)||m.test(f.caption):m.test(f.text)})):n({replacementPattern:null}),e.disabledOptions)for(const f of u)e.disabledOptions.includes(f.value)&&(f.disabled=!0);a(Object.freeze(u)),e.onOptionListChanged&&e.onOptionListChanged(u.length),o(u.some(f=>f.value&&!!f.value.icon)),n({pending:!1})}function Qv(e,t,n){const[a,o]=s.useState(Object.freeze([])),[i,l]=s.useState(!1),c=s.useRef(null),p=s.useRef(e.options);typeof e.options!="function"&&(p.current=e.options);const u=s.useMemo(()=>typeof p.current=="function"?x.debounce(od,typeof e.searchDebounce!="undefined"?e.searchDebounce:500):od,[p.current,e.disabledOptions]);return s.useEffect(()=>{u(e,t,n,o,l,c)},[p.current,t.value,e.disabledOptions]),[a,i]}class Vn{constructor(t,n){this.target=t,this.isPgStoppedInternal=!1,this.currentTarget=t,this.nativeEvent=new CustomEvent("change",n),Object.defineProperty(this.nativeEvent,"target",{value:t,writable:!1,configurable:!1,enumerable:!0})}get bubbles(){return this.nativeEvent.bubbles}get cancelable(){return this.nativeEvent.cancelable}get defaultPrevented(){return this.nativeEvent.defaultPrevented}get eventPhase(){return this.nativeEvent.eventPhase}get isTrusted(){return this.nativeEvent.isTrusted}get timeStamp(){return this.nativeEvent.timeStamp}get type(){return this.nativeEvent.type}preventDefault(){this.nativeEvent.preventDefault()}isDefaultPrevented(){return this.defaultPrevented}stopPropagation(){this.nativeEvent.stopPropagation(),this.isPgStoppedInternal=!0}isPropagationStopped(){return this.isPgStoppedInternal}persist(){throw new Error("This is not a real React ChangeEvent. React does not permit the creation of SyntheticEvents in userland.")}}function ey(e,t){return I(I({},e),t)}function Zt(e){return H.useReducer(ey,e)}function ty({hideInlineSearch:e,options:t,onSearchChange:n,search:a="",searchPlaceholder:o="Search\u2026",searchInputRef:i}){const[l,c]=Zt({isAsync:typeof t=="function",pending:!1,value:a,replacementPattern:null}),p=s.useCallback(v=>{c({value:v.target.value}),n&&n(v)},[n]),u=s.useCallback(v=>{v.nativeEvent.stopImmediatePropagation(),v.stopPropagation()},[]),f=s.useCallback(v=>{v.nativeEvent.stopImmediatePropagation(),c({value:""}),n&&n(new Vn(i.current)),i.current&&i.current.focus()},[n]),m=v=>{!v||["Tab","Escape","Enter","Up","ArrowUp","Down","ArrowDown"].includes(v.key)||v.stopPropagation()};return s.useEffect(()=>{c({value:a})},[a]),[l.isAsync&&!e&&s.createElement("div",{className:"sps-option-list__search sps-form-group sps-text-input"},s.createElement("div",{className:"sps-form-control"},!l.value&&s.createElement("i",{className:"sps-icon sps-icon-filter sps-text-input__icon"}),s.createElement("input",{type:"text",className:"sps-text-input__input",placeholder:o,ref:i,value:l.value,onChange:p,onClick:u,onKeyDown:m}),l.value&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:f}))),l,c]}const ny=sd||Yv,ay=["Tab","Escape","Enter","Up","ArrowUp","Down","ArrowDown"],sy=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];function ry(e,t,n){return n?(e&&e[n])===(t&&t[n]):e===t}function id(e,t,n){return typeof n.value=="function"&&n.disabled?!0:t?!!(e==null?void 0:e.find(a=>{var o;return a[t]&&a[t]===((o=n==null?void 0:n.value)==null?void 0:o[t])})):!1}const Ka=s.forwardRef((e,t)=>{const _n=e,{captionKey:n,comparisonKey:a,disabledOptions:o,options:i,tall:l,textKey:c,valueKey:p,zeroState:u,hideInlineSearch:f,onSearchChange:m,search:g,searchDebounce:v,searchPlaceholder:C,attachTo:k,className:S,conformWidth:w,id:E,ignoreWidthStyles:y,isOpen:N,keepOpen:_,keyDown:R,nullOption:O,onOptionListChanged:B,onOptionSelected:F,onPositionFlip:P,onSelfToggle:U,optionRole:K,positionOverride:j,selectedOption:J,specialAction:ee,unsafelyReplaceClassName:ae,loading:pe,filterByTextAndCaptionKey:de,maxHeightPx:G,maxHeightRem:X,"data-testid":V}=_n,oe=Z(_n,["captionKey","comparisonKey","disabledOptions","options","tall","textKey","valueKey","zeroState","hideInlineSearch","onSearchChange","search","searchDebounce","searchPlaceholder","attachTo","className","conformWidth","id","ignoreWidthStyles","isOpen","keepOpen","keyDown","nullOption","onOptionListChanged","onOptionSelected","onPositionFlip","onSelfToggle","optionRole","positionOverride","selectedOption","specialAction","unsafelyReplaceClassName","loading","filterByTextAndCaptionKey","maxHeightPx","maxHeightRem","data-testid"]),ne=s.useMemo(()=>ee?new M.SpsOptionListOption(ee,{textKey:"label",captionKey:"caption"}):null,[ee]),[se,Q]=s.useState(-1),[Ie,Be]=s.useState(N),ve=t||s.useRef(null),Fe=s.useRef(null),Ve=s.useRef(null),Qe=ua("sps-option-list-portal"),Ze=s.useContext(It),[st,et]=j||[M.Position.BOTTOM_LEFT,M.Position.TOP_LEFT],[bt,ye]=Ie?Fa(ve,k,st,I({altPosition:et,setMinWidth:!y,setWidth:!y&&w},Ze)):[{},!1],Ae=s.useRef(null),[De,Oe,nt]=ty($(I({},e),{searchInputRef:Ae})),[ke,pt]=Qv(e,Oe,nt);s.useEffect(()=>{Q(-1)},[Oe]);const nn=A(ae||"sps-option-list","z-stratum-dropdown",Ie&&"sps-option-list--open",Oe.isAsync&&"sps-option-list--searchable",ye&&"sps-option-list--opens-upward",ee&&ee.label&&"sps-option-list--has-special-action",S),yn=A(ae||"sps-option-list__options",l&&"sps-option-list__options--tall"),Xe=s.useCallback(()=>{Ie||(Be(!0),Ae.current&&Ae.current.focus(),Q(-1),U&&U(!0))},[Ie,U]),an=s.useCallback(()=>{Ie&&(Be(!1),Q(-1),U&&U(!1))},[Ie,U]),Et=s.useCallback((me,Ce)=>{Ce||me&&!me.disabled&&(typeof me.value=="function"?me.value():typeof F=="function"&&F(me.value),_||an())},[F,an]),ut=s.useCallback((me,Ce,rt)=>{me.stopPropagation(),Et(Ce,rt)},[Et]),we=s.useRef(o||[]);we.current=o||[];const jt=s.useCallback(me=>{switch(me.key){case"Tab":case"Escape":an();break;case"Enter":if(se>-1){const Ce=ke[se]||ne;me.preventDefault();const rt=!!Ce&&id(we.current,a,Ce);!rt&&Ce&&typeof F=="function"&&typeof Ce.value=="function"?Ce.value():Ce&&Et(Ce,rt)}break;case"Up":case"ArrowUp":{let Ce=se;ye?se<=-1?Ce=ke.length-1:se===0?ee&&(Ce=ke.length):se<ke.length&&(Ce=se-1):se>-1&&(Ce=se-1),Ce!==se&&(me.preventDefault(),Q(Ce));break}case"Down":case"ArrowDown":{Xe();let Ce=se;ye?se!==-1&&(se>=ke.length?Ce=0:se===ke.length-1?Ce=-1:Ce=se+1):se<ke.length-1+Number(!!ee)&&(Ce=se+1),Ce!==se&&(me.preventDefault(),Q(Ce));break}default:Xe()}},[an,Xe,se,Et,F,ye,ke]),Tn=s.useCallback(me=>{const Ce=ke.findIndex(rt=>{if(rt.textKey){const Lt=rt.textKey;return rt.value[Lt].toLowerCase().charAt([0])===me.key.toLocaleLowerCase()}return rt.value.toLowerCase().charAt([0])===me.key.toLocaleLowerCase()});Ce>-1&&Q(Ce)},[ke]),Qn=s.useCallback(me=>{!me||(ay.includes(me.key)?jt(me):sy.includes(me.key)&&Tn(me))},[an,Xe,se,Et,F,ye,ke]);s.useEffect(()=>{if(Ze!==null&&document.getElementsByClassName("sps-modal__body").length>0){const me=()=>{U(!1)},Ce=document.getElementsByClassName("sps-modal__body")[0];return Ce.addEventListener("scroll",me),()=>{Ce.removeEventListener("scroll",me)}}},[]),s.useEffect(()=>{Ve.current&&ny(Ve.current,{scrollMode:"if-needed",block:"nearest",inline:"nearest"})},[se]),s.useEffect(()=>{Be(N),N?Ae.current&&Ae.current.focus():Q(-1)},[N]),s.useEffect(()=>{Qn(R)},[R]),s.useEffect(()=>{!Ie&&Fe.current&&(nt({value:""}),Fe.current.scrollTop=0),Ie&&P&&P(ye)},[Ie]);const ea=G?G/16:X,ka=ea?{maxHeight:`${ea}rem`}:{};return Qe(s.createElement("div",I({className:nn,id:E,"aria-activedescendant":se>-1?`${E}-option-${se}`:null,tabIndex:-1,ref:ve,style:bt,onMouseLeave:()=>Q(-1),"data-testid":V},oe),De,s.createElement("div",{className:yn,ref:Fe,"data-testid":`${V}-options`,style:ka},!pe&&!Oe.pending&&u&&(Oe.value||!Oe.isAsync)&&ke.length===0&&s.createElement("div",{className:"sps-option-list__zero-state"},u),(pe||Oe.pending)&&s.createElement("div",{className:"sps-option-list__loading"},s.createElement(ks,null)),!pe&&!Oe.pending&&ke.map((me,Ce)=>{const rt=`${E}-option-${Ce}`,Lt=ry(me.value,J,a),Le=id(we.current,a,me);return s.createElement("a",{key:rt,id:rt,role:K,"aria-selected":Lt,href:me.href,className:A("sps-option-list__option",me.caption&&"sps-option-list__option--has-caption",me.disabled&&"sps-option-list__option--disabled",me.bold&&"sps-option-list__option--bold",(Lt||Le)&&"sps-option-list__option--selected",se===Ce&&"sps-option-list__option--highlighted"),onClick:Yt=>ut(Yt,me,Le),onMouseOver:()=>Q(Ce),tabIndex:-1,ref:se===Ce?Ve:null,"data-testid":`${V}-option-${Ce}`},me.value&&me.value.icon&&s.createElement("i",{className:A("sps-icon","sps-option-list__option-icon",`sps-icon-${String(me.value.icon)}`)}),(!me.value||!me.value.icon&&pt)&&s.createElement("span",{className:"sps-option-list__option-icon-spacer"}),s.createElement("span",{dangerouslySetInnerHTML:{__html:me.getHtml(Oe.replacementPattern)}}),me.caption&&s.createElement("div",{className:"sps-option-list__option-caption"},s.createElement("span",{dangerouslySetInnerHTML:{__html:me.caption.replace(Oe.replacementPattern,"<u>$&</u>")}})))})),ne&&ee.label&&s.createElement("a",{className:A("sps-option-list__option","sps-option-list__special-action",se===ke.length&&"sps-option-list__option--highlighted",ee.disabled&&"sps-option-list__special-action--disabled"),href:ne.href,target:ne.href&&ee.newTab?"_blank":"_self",onClick:me=>ut(me,ne),onMouseOver:()=>Q(ke.length),"data-testid":`${V}-special-action`},ee.icon&&s.createElement("i",{className:A("sps-icon","sps-option-list__option-icon",`sps-icon-${String(ee.icon)}`)}),!ee.icon&&pt&&s.createElement("span",{className:"sps-option-list__option-icon-spacer"}),s.createElement("span",null,ee.label))))});Object.assign(Ka,{propTypes:Xv,displayName:"SpsOptionList"});function Vt(e=[],t=[]){const n=Array.isArray(e)?x.flatten(e):[e],a=t.map(i=>Array.isArray(i)?i:[i]),o=new Array(a.length+1).fill(null).map(()=>[]);for(const i of n){let l=!1;for(let c=0;c<a.length;c+=1)for(const{type:p,props:u={}}of a[c])if(i.type===p&&Object.keys(u).every(m=>u[m]===i.props[m])){l=!0,o[c].push(i);break}l||o[o.length-1].push(i)}return o}function ld(e,t,n){const a=Object.entries(t).filter(([,i])=>typeof i!="string"&&i.deprecated).map(([i])=>i),o=a.map(i=>n[i]);s.useEffect(()=>{o.find(i=>typeof i!="undefined")&&console.warn(`The following prop(s) of ${e} are deprecated: ${a.join(", ")}`)},o)}function cd(e,t){const n=H.useRef(!1);H.useEffect(()=>{if(n.current)return e();n.current=!0},t)}function dd(e,t,n){const a=s.useRef(t(...n));s.useEffect(()=>(document.addEventListener(e,a.current),()=>document.removeEventListener(e,a.current)),[]),s.useEffect(()=>{document.removeEventListener(e,a.current),a.current=t(...n),document.addEventListener(e,a.current)},n)}function oy(e,t,n){return function(o){var i,l;!((i=e.current)==null?void 0:i.contains(o.target))&&!((l=t.current)==null?void 0:l.contains(o.target))&&n()}}function Va(e,t,n){const a=s.useRef(!1),[o,i]=s.useState(!1),l=s.useCallback(()=>{a.current?a.current=!1:i(!0)},[]),c=s.useCallback((p=!1)=>{i(!1),a.current=p,n&&n()},[]);return dd("mousedown",oy,[e,t,c]),{showPopup:o,doShowPopup:l,doHidePopup:c}}const iy={debounce:"number",disabled:"boolean",formMeta:"SpsFormFieldMeta<string>",icon:"SpsIcon",onChange:"React.ChangeEventHandler",placeholder:"string",suggestions:{type:`
             Eventually<Iterable<string>>
             | ((filter?: string) => Eventually<Iterable<string>>)
         `,required:!0},tallOptionList:"boolean",value:"string",zeroState:"string",loading:"boolean",maxHeightOptionListPx:"number",maxHeightOptionListRem:"number"},ly=$(I({},q),{debounce:T.exports.number,disabled:T.exports.bool,formControl:ce(),formMeta:ce(),icon:be(M.SpsIcon),onChange:re(),placeholder:T.exports.string,suggestions:T.exports.oneOfType([T.exports.arrayOf(T.exports.string),T.exports.instanceOf(Promise),re()]).isRequired,tallOptionList:T.exports.bool,value:T.exports.string,zeroState:T.exports.string,loading:T.exports.bool,maxHeightOptionListPx:T.exports.number,maxHeightOptionListRem:T.exports.number});function Is(y){var N=y,{className:e,debounce:t=0,disabled:n,formControl:a,formMeta:o,onChange:i,icon:l,id:c,placeholder:p="",suggestions:u,unsafelyReplaceClassName:f,tallOptionList:m,value:g="",zeroState:v,loading:C,maxHeightOptionListPx:k,maxHeightOptionListRem:S,"data-testid":w}=N,E=Z(N,["className","debounce","disabled","formControl","formMeta","onChange","icon","id","placeholder","suggestions","unsafelyReplaceClassName","tallOptionList","value","zeroState","loading","maxHeightOptionListPx","maxHeightOptionListRem","data-testid"]);const _=o||a,{wrapperId:R,controlId:O}=Ft(c,_),[B,F]=Zt({keyDown:null,opensUpward:!1}),P=s.useRef(),U=s.useRef(),K=s.useRef(),{showPopup:j,doShowPopup:J,doHidePopup:ee}=Va(P,K);function ae(ne,se){_&&(_.setValue(ne),_.markAsDirty()),i&&i(se||new Vn({value:ne}))}function pe(ne){U.current.value="",ae(""),ne.stopPropagation()}function de(ne){ae(ne.target.value,ne)}function G(ne){n||(["Up","ArrowUp","Down","ArrowDown","Enter"].indexOf(ne.key)>-1&&(ne.preventDefault(),ne.persist()),ne.stopPropagation(),F({keyDown:ne})),ne.key==="Tab"&&ee()}function X(ne){ne?J():ee()}function V(ne){F({opensUpward:ne})}const oe=A(f||"sps-autocomplete",j&&"sps-autocomplete--open",j&&"z-stratum-dropdown",B.opensUpward&&"sps-autocomplete--opens-upward",n&&"sps-form-control--disabled",e);return s.createElement(Tt,{id:R,className:oe,formControl:a,formMeta:o,inputRef:U,ref:P,focusInputOnClick:!0,onClick:ne=>ne.nativeEvent.stopImmediatePropagation(),"data-testId":`${w}`},s.createElement("div",{className:"sps-text-input"},s.createElement("div",{className:"sps-form-control"},l&&s.createElement("i",{className:A("sps-text-input__icon","sps-icon",`sps-icon-${l}`)}),s.createElement("input",I({type:"text",ref:U,value:g,className:"sps-text-input__input",placeholder:p,onFocus:J,onClick:J,onChange:de,onKeyDown:G,disabled:n,id:O,"data-testid":`${w}__input`},E)),g&&!n&&s.createElement("i",{"aria-label":"clear",className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:ne=>pe(ne)}))),s.createElement(Ka,{id:`${R}_options`,ref:K,attachTo:P,isOpen:j,options:u,hideInlineSearch:!0,keyDown:B.keyDown,onOptionSelected:ae,onPositionFlip:V,onSelfToggle:X,offsets:[1,0],search:g,searchDebounce:t,tall:m,zeroState:v,loading:C,maxHeightPx:k,maxHeightRem:S}))}Object.assign(Is,{props:iy,propTypes:ly,displayName:"SpsAutocomplete"});const pd={basic:{label:"Basic",examples:{basic:{react:x.code`
@@ -5366,7 +5395,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             )}
                         </>;
                     }
-                `}}},sizing:{label:"Sizing",description:()=>s.createElement("p",null,"There are 3 sizes of Modal: Small (4 columns), Medium (6 columns), and Large (8 columns). Use the size that best fits the content that needs to be in the Modal, erring towards the smallest size whenever possible.")},default:{label:"Default",description:()=>s.createElement("p",null,"Use Default Modals to inform the user of something with a neutral meaning. Use these as the default option for Modals."),examples:{small:{description:"Small",react:x.code`
+                `}}},sizing:{label:"Sizing",description:()=>s.createElement("p",null,"There are 4 sizes of Modal: Small (4 columns), Medium (6 columns), and Large (8 columns), XLarge (12 columns). Use the size that best fits the content that needs to be in the Modal, erring towards the smallest size whenever possible.")},default:{label:"Default",description:()=>s.createElement("p",null,"Use Default Modals to inform the user of something with a neutral meaning. Use these as the default option for Modals."),examples:{small:{description:"Small",react:x.code`
                     function Component() {
                         const [showModal, setShowModal] = React.useState(false);
 
@@ -5423,6 +5452,25 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             )}
                         </>;
                     }
+                `},xlarge:{description:"XLarge",react:x.code`
+                    function Component() {
+                        const [showModal, setShowModal] = React.useState(false);
+
+                        return <>
+                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>
+                                Show XLarge Default Modal
+                            </SpsButton>
+                            {showModal && (
+                                <SpsModalV2
+                                    size={ModalSize.X_LARGE}
+                                    onClose={() => setShowModal(false)}
+                                >
+                                    <div className="sps-text-semibold mb-1">Optional Headline</div>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                </SpsModalV2>
+                            )}
+                        </>;
+                    }
                 `}}},delete:{label:"Delete",description:()=>s.createElement("p",null,"Use Delete Modals to have the user confirm they want to continue with a destructive action. Be clear on what will happen if they continue."),examples:{small:{description:"Small",react:x.code`
                     function Component() {
                         const [showModal, setShowModal] = React.useState(false);
@@ -5868,7 +5916,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             MacNeil Automotive Parts
                         </SpsPageSubtitle>
                     </SpsPageTitle>
-                `}}}},GI={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",placeholder:"string",searchDebounce:"number",searchPlaceholder:"string",tallOptionList:"boolean",textKey:"string",valueKey:"string",value:"any",zeroState:"string",autoFixWidth:"boolean",loading:"boolean",filterByTextAndCaptionKey:"boolean",maxHeightOptionListPx:"number",maxHeightOptionListRem:"number"},UI=$(I({},q),{action:re(),captionKey:T.exports.string,comparisonKey:T.exports.string,disabled:T.exports.bool,formControl:ce(),formMeta:ce(),notClearable:T.exports.bool,options:T.exports.oneOfType([T.exports.array,T.exports.instanceOf(Promise),re()]).isRequired,onChange:re(),placeholder:T.exports.string,searchDebounce:T.exports.number,searchPlaceholder:T.exports.string,tallOptionList:T.exports.bool,textKey:T.exports.string,valueKey:T.exports.string,value:T.exports.any,zeroState:T.exports.string,autoFixWidth:T.exports.bool,loading:T.exports.bool,filterByTextAndCaptionKey:T.exports.bool,maxHeightOptionListPx:T.exports.number,maxHeightOptionListRem:T.exports.number}),Lr=s.forwardRef((e,t)=>{const bt=e,{action:n,autoFixWidth:a=!1,captionKey:o,className:i,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:f,notClearable:m,options:g,onChange:v,onClick:C,placeholder:k,searchDebounce:S,searchPlaceholder:w="Search\u2026",tallOptionList:E,textKey:y,valueKey:N,unsafelyReplaceClassName:_,value:R,zeroState:O,loading:B,filterByTextAndCaptionKey:F,maxHeightOptionListPx:P,maxHeightOptionListRem:U,"data-testid":K}=bt,j=Z(bt,["action","autoFixWidth","captionKey","className","comparisonKey","disabled","formControl","formMeta","id","notClearable","options","onChange","onClick","placeholder","searchDebounce","searchPlaceholder","tallOptionList","textKey","valueKey","unsafelyReplaceClassName","value","zeroState","loading","filterByTextAndCaptionKey","maxHeightOptionListPx","maxHeightOptionListRem","data-testid"]),J=u||p,{wrapperId:ee,controlId:ae}=Ft(f,J),pe=s.useRef(null),de=s.useRef(null),G=s.useRef(null),{t:X}=s.useContext(Ye),[V,oe]=Zt({isOpen:!1,value:R,text:"",keyDown:null,opensUpward:!1,optionIds:""});function ne(ye){oe({value:ye,text:ye&&y?ye[y]:ye})}function se(ye){ne(ye);const Ae=ye&&N&&typeof ye=="object"?ye[N]:ye;J&&(J.setValue(Ae),J.markAsDirty()),v&&v(new Vn({value:Ae}))}s.useEffect(()=>{ne(R)},[R,y]);function Q(){se(void 0)}function Ie(){oe({isOpen:!1})}function Be(ye){ye.nativeEvent.stopImmediatePropagation(),c||oe({isOpen:!V.isOpen})}function ve(ye){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(ye.key)>-1&&ye.preventDefault(),ye.persist(),oe({keyDown:ye}))}function Fe(ye){oe({isOpen:ye})}function Ve(ye){oe({opensUpward:ye})}function Qe(ye){ye.detail!==ee&&oe({isOpen:!1})}function Ze(ye){oe({optionIds:new Array(ye).fill("").map((Ae,De)=>`${ee}-options-option-${De}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",Ie),document.addEventListener("DropdownOpened",Qe),()=>{document.removeEventListener("click",Ie),document.removeEventListener("DropdownOpened",Qe)}),[]),s.useLayoutEffect(()=>{if(a&&G.current&&pe.current){pe.current.style.width=null;const Ae=`${pe.current.getBoundingClientRect().width+6}px`;pe.current.style.width=Ae,G.current.style.width=Ae,G.current.style.maxWidth=Ae}}),cd(()=>{if(V.isOpen){const ye=document.createEvent("CustomEvent");ye.initCustomEvent("DropdownOpened",!1,!1,ee),document.dispatchEvent(ye)}else de.current.focus()},[V.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{de.current.focus()}}));const st=A(_||"sps-select",V.isOpen&&"sps-select--open",V.isOpen&&"z-stratum-dropdown",V.opensUpward&&"sps-select--opens-upward",i),et=V.text||k||X("design-system:select.defaultPlaceholder");return s.createElement(Tt,I({id:ee,className:st,onKeyDown:ve,formControl:p,formMeta:u,ref:de,role:"listbox","aria-owns":V.optionIds,"data-testid":K,onClick:C},j),s.createElement("div",{className:A("sps-select__dropctrl",c&&"disabled"),id:ae,tabIndex:0,onClick:Be,ref:G,title:et,"data-testid":`${K}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:A("sps-select__value",!V.text&&"sps-select__value--placeholder"),"data-testid":`${K}-value`},et),V.value&&!m&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:Q,"data-testid":`${K}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Ka,{id:`${ee}-options`,ref:pe,attachTo:G,captionKey:o,comparisonKey:l,isOpen:V.isOpen,keyDown:V.keyDown,nullOption:V.value&&!m?k:null,options:g,onOptionSelected:se,onPositionFlip:Ve,onSelfToggle:Fe,searchDebounce:S,searchPlaceholder:w,selectedOption:V.value,specialAction:n,tall:E,textKey:y,filterByTextAndCaptionKey:F,optionRole:"option",valueKey:N,onOptionListChanged:Ze,zeroState:O,ignoreWidthStyles:a,loading:B,maxHeightPx:P,maxHeightRem:U,"data-testid":`${K}-option-list`}))});Object.assign(Lr,{props:GI,propTypes:UI,displayName:"SpsSelect"});const zI={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean"},qI=I({numPages:T.exports.number,onPageChange:re(),page:T.exports.number,disabled:T.exports.bool},q);function Br(e){const y=e,{numPages:t=0,onPageChange:n,page:a=1,unsafelyReplaceClassName:o,className:i,"data-testid":l,disabled:c=!1}=y,p=Z(y,["numPages","onPageChange","page","unsafelyReplaceClassName","className","data-testid","disabled"]),{t:u}=s.useContext(Ye),[f,m]=s.useState(a),[g,v]=s.useState(a);s.useEffect(()=>{v(a),m(a)},[a]);function C(N){const _=x.constrain(N,[1,t]);_!==f&&(v(_),m(_),n&&typeof n=="function"&&n(_))}const k=x.debounce(C,500);function S(N){m(N.target.value),k(parseInt(N.target.value,10))}const w=A(o||"sps-page-selector",i),E=ca(null);return s.createElement("div",I({className:w,"data-testid":l},p),s.createElement("div",{className:"sps-pagination__input-wrapper","data-testid":`${l}__input`},s.createElement("div",{className:"sps-form-control sps-pagination__input-sizer"},f),s.createElement("label",{htmlFor:E.current,className:"sr-only"},u("design-system:pagination.page")),s.createElement("input",{id:E.current,type:"text",value:f,onInput:S,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c})),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?u("design-system:pagination.ofMany"):u("design-system:pagination.ofPageCount",{pageCount:t})),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:A("sps-button","sps-button--icon",(g===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>C(g-1),disabled:g===1||c,title:u("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:A("sps-button","sps-button--icon",(g===t||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>C(g+1),disabled:g===t||c,title:u("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(Br,{props:zI,propTypes:qI,displayName:"SpsPageSelector"});const JI={page:"number",pageSize:"number",pageSizeOptions:"Array<number>",totalResults:"number",onPageChange:"(page: number, pageSize: number, indices: [number, number]) => void",disabled:"boolean"},ZI=I({onPageChange:re().isRequired,page:T.exports.number,pageSize:T.exports.number,pageSizeOptions:T.exports.arrayOf(T.exports.number),totalResults:T.exports.number,disabled:T.exports.bool},q);function pl(e){const _=e,{className:t,onPageChange:n,page:a=1,pageSizeOptions:o=M.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:i=o[0],"data-testid":l,totalResults:c,unsafelyReplaceClassName:p,disabled:u=!1}=_,f=Z(_,["className","onPageChange","page","pageSizeOptions","pageSize","data-testid","totalResults","unsafelyReplaceClassName","disabled"]),[m,g]=Zt({page:a,pageSize:i,numPages:0,indices:[0,0]});function v(R=m.pageSize){return Math.ceil(c/R)}function C(R=m.page,O=m.pageSize){const B=v(),F=R===B&&c%O||O,P=B===0?0:F,U=(R-1)*O;return B===0?[0,0]:[U+1,U+P]}function k(R){const O={page:R,indices:C(R)};return g(O),O}function S(R,O){const B={page:O,pageSize:R,numPages:v(R),indices:C(O,R)};return g(B),B}s.useEffect(()=>{a!==m.page&&k(a)},[a]),s.useEffect(()=>{i!==m.pageSize&&S(i,a!==m.page?a:m.page)},[i]),s.useEffect(()=>{g({numPages:v(),indices:C()})},[c]);function w(){return typeof c=="number"?c:"many"}function E(R){const O=S(R.target.value,1);n(O.page,O.pageSize,O.indices)}function y(R){const O=k(R);n(O.page,m.pageSize,O.indices)}const N=A(p||"sps-pagination",t);return s.createElement("div",I({className:N,"data-testid":l},f),s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(Lr,{options:o,onChange:E,notClearable:!0,autoFixWidth:!0,value:m.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),s.createElement("div",{className:"sps-pagination__details"},`Viewing ${m.indices[0]} - ${m.indices[1]} of ${w()}`),s.createElement(Br,{numPages:m.numPages,page:m.page,onPageChange:y,disabled:u}))}Object.assign(pl,{props:JI,propTypes:ZI,displayName:"SpsPagination"});const Mf={general:{label:"General Usage",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Use the Standard Pagination Bar on a list page (comprised of a Table, Content Rows, or Content Tiles). It should always appear at the bottom of the listed records."),s.createElement("p",null,"Use the Mini Pagination component when a paginated list of results exists inside a smaller Card."))},pagination:{label:"Standard Pagination Bar",description:({Link:e})=>s.createElement(s.Fragment,null,s.createElement("p",null,"The Standard Pagination Bar is comprised of three main sections. The middle section is hidden from view when the width of its container is at the responsive breakpoint of 767 pixels."),s.createElement("ul",null,s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Results-per-page Select")," ","(left): allows the user to adjust the number of records being displayed per page.*")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Viewing details")," (middle): describes which results are being displayed on the current page.")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Page Navigator")," (right): allows the user to navigate between pages of results"))),s.createElement("i",null,"*Note: For Tables and Content Rows, per-page options should be 25, 50, and 100. For Content Tiles, per-page options should be 24, 48, and 100."),s.createElement("br",null),s.createElement("p",{className:"mt-2"},"To see an example of the Standard Pagination Bar in context with a Table, view the Table Lists section on the"," ",s.createElement(e,{to:"/style-and-layout/page-types"},"Page Types")," page.")),examples:{basic:{description:()=>s.createElement("h4",null,"Building the Standard Pagination Bar"),react:x.code`
+                `}}}},GI={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",placeholder:"string",searchDebounce:"number",searchPlaceholder:"string",tallOptionList:"boolean",textKey:"string",valueKey:"string",value:"any",zeroState:"string",autoFixWidth:"boolean",loading:"boolean",filterByTextAndCaptionKey:"boolean",maxHeightOptionListPx:"number",maxHeightOptionListRem:"number"},UI=$(I({},q),{action:re(),captionKey:T.exports.string,comparisonKey:T.exports.string,disabled:T.exports.bool,formControl:ce(),formMeta:ce(),notClearable:T.exports.bool,options:T.exports.oneOfType([T.exports.array,T.exports.instanceOf(Promise),re()]).isRequired,onChange:re(),placeholder:T.exports.string,searchDebounce:T.exports.number,searchPlaceholder:T.exports.string,tallOptionList:T.exports.bool,textKey:T.exports.string,valueKey:T.exports.string,value:T.exports.any,zeroState:T.exports.string,autoFixWidth:T.exports.bool,loading:T.exports.bool,filterByTextAndCaptionKey:T.exports.bool,maxHeightOptionListPx:T.exports.number,maxHeightOptionListRem:T.exports.number}),Lr=s.forwardRef((e,t)=>{const bt=e,{action:n,autoFixWidth:a=!1,captionKey:o,className:i,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:f,notClearable:m,options:g,onChange:v,onClick:C,placeholder:k,searchDebounce:S,searchPlaceholder:w="Search\u2026",tallOptionList:E,textKey:y,valueKey:N,unsafelyReplaceClassName:_,value:R,zeroState:O,loading:B,filterByTextAndCaptionKey:F,maxHeightOptionListPx:P,maxHeightOptionListRem:U,"data-testid":K}=bt,j=Z(bt,["action","autoFixWidth","captionKey","className","comparisonKey","disabled","formControl","formMeta","id","notClearable","options","onChange","onClick","placeholder","searchDebounce","searchPlaceholder","tallOptionList","textKey","valueKey","unsafelyReplaceClassName","value","zeroState","loading","filterByTextAndCaptionKey","maxHeightOptionListPx","maxHeightOptionListRem","data-testid"]),J=u||p,{wrapperId:ee,controlId:ae}=Ft(f,J),pe=s.useRef(null),de=s.useRef(null),G=s.useRef(null),{t:X}=s.useContext(Ye),[V,oe]=Zt({isOpen:!1,value:R,text:"",keyDown:null,opensUpward:!1,optionIds:""});function ne(ye){oe({value:ye,text:ye&&y?ye[y]:ye})}function se(ye){ne(ye);const Ae=ye&&N&&typeof ye=="object"?ye[N]:ye;J&&(J.setValue(Ae),J.markAsDirty()),v&&v(new Vn({value:Ae}))}s.useEffect(()=>{ne(R)},[R,y]);function Q(){se(void 0)}function Ie(){oe({isOpen:!1})}function Be(ye){ye.nativeEvent.stopImmediatePropagation(),c||oe({isOpen:!V.isOpen})}function ve(ye){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(ye.key)>-1&&ye.preventDefault(),ye.persist(),oe({keyDown:ye}))}function Fe(ye){oe({isOpen:ye})}function Ve(ye){oe({opensUpward:ye})}function Qe(ye){ye.detail!==ee&&oe({isOpen:!1})}function Ze(ye){oe({optionIds:new Array(ye).fill("").map((Ae,De)=>`${ee}-options-option-${De}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",Ie),document.addEventListener("DropdownOpened",Qe),()=>{document.removeEventListener("click",Ie),document.removeEventListener("DropdownOpened",Qe)}),[]),s.useLayoutEffect(()=>{if(a&&G.current&&pe.current){pe.current.style.width=null;const Ae=`${pe.current.getBoundingClientRect().width+6}px`;pe.current.style.width=Ae,G.current.style.width=Ae,G.current.style.maxWidth=Ae}}),cd(()=>{if(V.isOpen){const ye=document.createEvent("CustomEvent");ye.initCustomEvent("DropdownOpened",!1,!1,ee),document.dispatchEvent(ye)}else de.current.focus()},[V.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{de.current.focus()}}));const st=A(_||"sps-select",V.isOpen&&"sps-select--open",V.isOpen&&"z-stratum-dropdown",V.opensUpward&&"sps-select--opens-upward",i),et=V.text||k||X("design-system:select.defaultPlaceholder");return s.createElement(Tt,I({id:ee,className:st,onKeyDown:ve,formControl:p,formMeta:u,ref:de,role:"listbox","aria-owns":V.optionIds,"data-testid":K,onClick:C},j),s.createElement("div",{className:A("sps-select__dropctrl",c&&"disabled"),id:ae,tabIndex:0,onClick:Be,ref:G,title:et,"data-testid":`${K}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:A("sps-select__value",!V.text&&"sps-select__value--placeholder"),"data-testid":`${K}-value`},et),V.value&&!m&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:Q,"data-testid":`${K}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Ka,{id:`${ee}-options`,ref:pe,attachTo:G,captionKey:o,comparisonKey:l,isOpen:V.isOpen,keyDown:V.keyDown,options:g,onOptionSelected:se,onPositionFlip:Ve,onSelfToggle:Fe,searchDebounce:S,searchPlaceholder:w,selectedOption:V.value,specialAction:n,tall:E,textKey:y,filterByTextAndCaptionKey:F,optionRole:"option",valueKey:N,onOptionListChanged:Ze,zeroState:O,ignoreWidthStyles:a,loading:B,maxHeightPx:P,maxHeightRem:U,"data-testid":`${K}-option-list`}))});Object.assign(Lr,{props:GI,propTypes:UI,displayName:"SpsSelect"});const zI={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean"},qI=I({numPages:T.exports.number,onPageChange:re(),page:T.exports.number,disabled:T.exports.bool},q);function Br(e){const y=e,{numPages:t=0,onPageChange:n,page:a=1,unsafelyReplaceClassName:o,className:i,"data-testid":l,disabled:c=!1}=y,p=Z(y,["numPages","onPageChange","page","unsafelyReplaceClassName","className","data-testid","disabled"]),{t:u}=s.useContext(Ye),[f,m]=s.useState(a),[g,v]=s.useState(a);s.useEffect(()=>{v(a),m(a)},[a]);function C(N){const _=x.constrain(N,[1,t]);_!==f&&(v(_),m(_),n&&typeof n=="function"&&n(_))}const k=x.debounce(C,500);function S(N){m(N.target.value),k(parseInt(N.target.value,10))}const w=A(o||"sps-page-selector",i),E=ca(null);return s.createElement("div",I({className:w,"data-testid":l},p),s.createElement("div",{className:"sps-pagination__input-wrapper","data-testid":`${l}__input`},s.createElement("div",{className:"sps-form-control sps-pagination__input-sizer"},f),s.createElement("label",{htmlFor:E.current,className:"sr-only"},u("design-system:pagination.page")),s.createElement("input",{id:E.current,type:"text",value:f,onInput:S,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c})),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?u("design-system:pagination.ofMany"):u("design-system:pagination.ofPageCount",{pageCount:t})),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:A("sps-button","sps-button--icon",(g===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>C(g-1),disabled:g===1||c,title:u("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:A("sps-button","sps-button--icon",(g===t||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>C(g+1),disabled:g===t||c,title:u("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(Br,{props:zI,propTypes:qI,displayName:"SpsPageSelector"});const JI={page:"number",pageSize:"number",pageSizeOptions:"Array<number>",totalResults:"number",onPageChange:"(page: number, pageSize: number, indices: [number, number]) => void",disabled:"boolean"},ZI=I({onPageChange:re().isRequired,page:T.exports.number,pageSize:T.exports.number,pageSizeOptions:T.exports.arrayOf(T.exports.number),totalResults:T.exports.number,disabled:T.exports.bool},q);function pl(e){const _=e,{className:t,onPageChange:n,page:a=1,pageSizeOptions:o=M.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:i=o[0],"data-testid":l,totalResults:c,unsafelyReplaceClassName:p,disabled:u=!1}=_,f=Z(_,["className","onPageChange","page","pageSizeOptions","pageSize","data-testid","totalResults","unsafelyReplaceClassName","disabled"]),[m,g]=Zt({page:a,pageSize:i,numPages:0,indices:[0,0]});function v(R=m.pageSize){return Math.ceil(c/R)}function C(R=m.page,O=m.pageSize){const B=v(O),F=R===B&&c%O||O,P=B===0?0:F,U=(R-1)*O;return B===0?[0,0]:[U+1,U+P]}function k(R){const O={page:R,indices:C(R)};return g(O),O}function S(R,O){const B={page:O,pageSize:R,numPages:v(R),indices:C(O,R)};return g(B),B}s.useEffect(()=>{a!==m.page&&k(a)},[a]),s.useEffect(()=>{i!==m.pageSize&&S(i,a!==m.page?a:m.page)},[i]),s.useEffect(()=>{g({numPages:v(),indices:C()})},[c]);function w(){return typeof c=="number"?c:"many"}function E(R){const O=S(R.target.value,1);n(O.page,O.pageSize,O.indices)}function y(R){const O=k(R);n(O.page,m.pageSize,O.indices)}const N=A(p||"sps-pagination",t);return s.createElement("div",I({className:N,"data-testid":l},f),s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(Lr,{options:o,onChange:E,notClearable:!0,autoFixWidth:!0,value:m.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),s.createElement("div",{className:"sps-pagination__details"},`Viewing ${m.indices[0]} - ${m.indices[1]} of ${w()}`),s.createElement(Br,{numPages:m.numPages,page:m.page,onPageChange:y,disabled:u}))}Object.assign(pl,{props:JI,propTypes:ZI,displayName:"SpsPagination"});const Mf={general:{label:"General Usage",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Use the Standard Pagination Bar on a list page (comprised of a Table, Content Rows, or Content Tiles). It should always appear at the bottom of the listed records."),s.createElement("p",null,"Use the Mini Pagination component when a paginated list of results exists inside a smaller Card."))},pagination:{label:"Standard Pagination Bar",description:({Link:e})=>s.createElement(s.Fragment,null,s.createElement("p",null,"The Standard Pagination Bar is comprised of three main sections. The middle section is hidden from view when the width of its container is at the responsive breakpoint of 767 pixels."),s.createElement("ul",null,s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Results-per-page Select")," ","(left): allows the user to adjust the number of records being displayed per page.*")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Viewing details")," (middle): describes which results are being displayed on the current page.")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Page Navigator")," (right): allows the user to navigate between pages of results"))),s.createElement("i",null,"*Note: For Tables and Content Rows, per-page options should be 25, 50, and 100. For Content Tiles, per-page options should be 24, 48, and 100."),s.createElement("br",null),s.createElement("p",{className:"mt-2"},"To see an example of the Standard Pagination Bar in context with a Table, view the Table Lists section on the"," ",s.createElement(e,{to:"/style-and-layout/page-types"},"Page Types")," page.")),examples:{basic:{description:()=>s.createElement("h4",null,"Building the Standard Pagination Bar"),react:x.code`
                     function Component() {
                         const [page, setPage] = React.useState(2);
                         const [pageSize, setPageSize] = React.useState(25);
@@ -6780,8 +6828,10 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                         const colors = ["red", "orange", "yellow", "blue", "indigo", "violet"];
                         const [action, updateAction] = useSpsAction(
                             {
-                                label: "Test Action",
-                                icon: "drill"
+                                label: "Go to Overview",
+                                icon: "dashboard",
+                                href: "#/overview",
+                                newTab: true
                             },
                             () => console.log("Action")
                         );

package/lib/index.es.js

@@ -361,15 +361,30 @@ Object.assign(SpsAdvancedSearch, {
   displayName: "SpsAdvancedSearch"
 });
 const SpsAdvancedSearchExamples = {
+  general: {
+    label: "General Usage",
+    description: ({ NavigateTo, Link }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, 'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'), /* @__PURE__ */ React.createElement("p", null, "Advanced Search works in conjunction with the", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "list-toolbar"
+    }, "List Bar"), " and", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "search-results-bar"
+    }, "Search Results"), " components. Refer to those pages for additional details."), /* @__PURE__ */ React.createElement("p", null, "Use the following guidelines when including Advanced Search on your page:", /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, "The Advanced Search Panel can contain any number of input fields."), /* @__PURE__ */ React.createElement("li", null, "The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the", " ", /* @__PURE__ */ React.createElement(Link, {
+      to: "/style-and-layout/grid/"
+    }, "SPS Grid"), " and guidelines for", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "form"
+    }, "Form Layouts"), "."))))
+  },
   basic: {
     label: "Basic Usage",
+    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "list-toolbar"
+    }, "List Bar"), " page.")),
     examples: {
       basic: {
         react: code`
                     function Component(props) {
                         const [toolbarSearchText, setToolbarSearchText] = React.useState("");
                         const [advSearch, patchAdvSearch] = usePatchReducer({
-                            isOpen: true,
+                            isOpen: false,
                             enteredFields: 0,
                         });
 
@@ -461,31 +476,53 @@ const SpsAdvancedSearchExamples = {
       }
     }
   },
-  b_disabledButtons: {
-    label: "Disabling the Clear/Search Buttons",
+  footerLink: {
+    label: "Footer Link",
+    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "A Footer Link can be included in the Advanced Search footer (visible only when the menu is exposed). The Footer Link is used to link to preferences that control the Advanced Search panel display (such as customized fields and defaults).")),
     examples: {
-      disabledButtons: {
+      footerLink: {
         react: code`
-                    function Component() {
+                    function Component(props) {
+                        const [toolbarSearchText, setToolbarSearchText] = React.useState("");
                         const [advSearch, setAdvSearch] = React.useState({
-                            isOpen: true,
-                            controlsDisabled: true,
+                            isOpen: false
                         });
 
                         function handleToggleAdvancedSearch(isOpen) {
                             setAdvSearch({ isOpen });
                         }
 
+                        function handleToolbarSearchChange(event) {
+                          setToolbarSearchText(event.target.value);
+                        }
+
                         return <>
                             <SpsListToolbar advancedSearch={advSearch}
                                 onToggleAdvancedSearch={handleToggleAdvancedSearch}
                             >
-                                <SpsListToolbarSearch>
-                                    <i>quick search goes here</i>
-                                </SpsListToolbarSearch>
+                              <SpsListToolbarSearch>
+                                  <SpsTextInput value={toolbarSearchText}
+                                      onChange={handleToolbarSearchChange}
+                                      disabled={advSearch.isOpen}
+                                      title="Search"
+                                  />
+                                  <SpsButton kind={ButtonKind.ICON}
+                                      icon={SpsIcon.SEARCH}
+                                      disabled={advSearch.isOpen}
+                                  />
+                              </SpsListToolbarSearch>
                             </SpsListToolbar>
-                            <SpsAdvancedSearch {...advSearch}>
-                                <i>insert form here</i>
+                            <SpsAdvancedSearch {...advSearch}
+                                footerLinks={
+                                    <SpsButton kind={ButtonKind.LINK} icon={SpsIcon.GEAR}>
+                                        Advanced Search Defaults
+                                    </SpsButton>
+                                }
+                            >
+                                <br />
+                                <br />
+                                <br />
+                                <br />
                             </SpsAdvancedSearch>
                         </>;
                     }
@@ -493,40 +530,48 @@ const SpsAdvancedSearchExamples = {
       }
     }
   },
-  c_footerLink: {
-    label: "Footer Link",
-    description: code`
-            <p>Some applications have a need to add a link button to the footer
-            as directed by the product design team.</p>
-        `,
+  disabledButtons: {
+    label: "Disabling the Clear/Search Buttons",
+    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "The Search and Clear Fields buttons in the footer can be disabled when no input fields in the Advanced Search Panel contain values.")),
     examples: {
-      footerLink: {
+      disabledButtons: {
         react: code`
-                    function Component(props) {
+                    function Component() {
+                        const [toolbarSearchText, setToolbarSearchText] = React.useState("");
                         const [advSearch, setAdvSearch] = React.useState({
-                            isOpen: true
+                            isOpen: false,
+                            controlsDisabled: true,
                         });
 
                         function handleToggleAdvancedSearch(isOpen) {
                             setAdvSearch({ isOpen });
                         }
 
+                        function handleToolbarSearchChange(event) {
+                          setToolbarSearchText(event.target.value);
+                        }
+
                         return <>
                             <SpsListToolbar advancedSearch={advSearch}
                                 onToggleAdvancedSearch={handleToggleAdvancedSearch}
                             >
-                                <SpsListToolbarSearch>
-                                    <i>quick search goes here</i>
-                                </SpsListToolbarSearch>
+                              <SpsListToolbarSearch>
+                                <SpsTextInput value={toolbarSearchText}
+                                    onChange={handleToolbarSearchChange}
+                                    disabled={advSearch.isOpen}
+                                    title="Search"
+                                />
+                                <SpsButton kind={ButtonKind.ICON}
+                                    icon={SpsIcon.SEARCH}
+                                    disabled={advSearch.isOpen}
+                                />
+                              </SpsListToolbarSearch>
                             </SpsListToolbar>
-                            <SpsAdvancedSearch {...advSearch}
-                                footerLinks={
-                                    <SpsButton kind={ButtonKind.LINK} icon={SpsIcon.GEAR}>
-                                        Advanced Search Defaults
-                                    </SpsButton>
-                                }
-                            >
-                                <i>insert form here</i>
+                            <SpsAdvancedSearch {...advSearch}>
+                                <br />
+                                <br />
+                                <br />
+                                <br />
                             </SpsAdvancedSearch>
                         </>;
                     }
@@ -534,12 +579,9 @@ const SpsAdvancedSearchExamples = {
       }
     }
   },
-  d_withTitle: {
-    label: "Title Bar With No List Toolbar Search",
-    description: code`
-            <p>If you do not provide a search within the List Toolbar, then it will
-            act as a title bar and the Advanced Search will not be togglable.</p>
-        `,
+  advancedSearchOnly: {
+    label: '"Advanced Search Only" List Bar',
+    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "Certain scenarios may require an Advanced Search Panel to display by default (eschewing a basic search). In these scenarios a title will replace the search input in the List Bar."), /* @__PURE__ */ React.createElement("p", null, "To achieve an Advanced Search Only effect, remove the basic search input from the List Bar.")),
     examples: {
       withTitle: {
         react: code`
@@ -553,7 +595,10 @@ const SpsAdvancedSearchExamples = {
                                 advancedSearch={advSearch}
                             />
                             <SpsAdvancedSearch isOpen={advSearch.isOpen}>
-                                <i>insert form here</i>
+                                <br />
+                                <br />
+                                <br />
+                                <br />
                             </SpsAdvancedSearch>
                         </>;
                     }
@@ -2393,8 +2438,10 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
   })), specialActionOption && specialAction.label && /* @__PURE__ */ React.createElement("a", {
     className: clsx("sps-option-list__option", "sps-option-list__special-action", highlightedOptionIndex === optionList.length && "sps-option-list__option--highlighted", specialAction.disabled && "sps-option-list__special-action--disabled"),
     href: specialActionOption.href,
+    target: specialActionOption.href && specialAction.newTab ? "_blank" : "_self",
     onClick: (event) => handleOptionClick(event, specialActionOption),
-    onMouseOver: () => setHighlightedOptionIndex(optionList.length)
+    onMouseOver: () => setHighlightedOptionIndex(optionList.length),
+    "data-testid": `${testId}-special-action`
   }, specialAction.icon && /* @__PURE__ */ React.createElement("i", {
     className: clsx("sps-icon", "sps-option-list__option-icon", `sps-icon-${String(specialAction.icon)}`)
   }), !specialAction.icon && anyOptionHasIcon && /* @__PURE__ */ React.createElement("span", {
@@ -29513,7 +29560,7 @@ const SpsModalExamples = {
   },
   sizing: {
     label: "Sizing",
-    description: () => /* @__PURE__ */ React.createElement("p", null, "There are 3 sizes of Modal: Small (4 columns), Medium (6 columns), and Large (8 columns). Use the size that best fits the content that needs to be in the Modal, erring towards the smallest size whenever possible.")
+    description: () => /* @__PURE__ */ React.createElement("p", null, "There are 4 sizes of Modal: Small (4 columns), Medium (6 columns), and Large (8 columns), XLarge (12 columns). Use the size that best fits the content that needs to be in the Modal, erring towards the smallest size whenever possible.")
   },
   default: {
     label: "Default",
@@ -29587,6 +29634,29 @@ const SpsModalExamples = {
                         </>;
                     }
                 `
+      },
+      xlarge: {
+        description: "XLarge",
+        react: code`
+                    function Component() {
+                        const [showModal, setShowModal] = React.useState(false);
+
+                        return <>
+                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>
+                                Show XLarge Default Modal
+                            </SpsButton>
+                            {showModal && (
+                                <SpsModalV2
+                                    size={ModalSize.X_LARGE}
+                                    onClose={() => setShowModal(false)}
+                                >
+                                    <div className="sps-text-semibold mb-1">Optional Headline</div>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                </SpsModalV2>
+                            )}
+                        </>;
+                    }
+                `
       }
     }
   },
@@ -30822,7 +30892,6 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     comparisonKey,
     isOpen: state.isOpen,
     keyDown: state.keyDown,
-    nullOption: state.value && !notClearable ? placeholder : null,
     options,
     onOptionSelected: updateValue,
     onPositionFlip: handlePositionFlip,
@@ -31005,7 +31074,7 @@ function SpsPagination(props2) {
     return Math.ceil(totalResults / pageSize);
   }
   function indices(page = state.page, pageSize = state.pageSize) {
-    const numPgs = numPages();
+    const numPgs = numPages(pageSize);
     const resultsVisibleIfThereArePages = page === numPgs ? totalResults % pageSize || pageSize : pageSize;
     const resultsVisible = numPgs === 0 ? 0 : resultsVisibleIfThereArePages;
     const start = (page - 1) * pageSize;
@@ -32798,8 +32867,10 @@ const SpsSelectExamples = {
                         const colors = ["red", "orange", "yellow", "blue", "indigo", "violet"];
                         const [action, updateAction] = useSpsAction(
                             {
-                                label: "Test Action",
-                                icon: "drill"
+                                label: "Go to Overview",
+                                icon: "dashboard",
+                                href: "#/overview",
+                                newTab: true
                             },
                             () => console.log("Action")
                         );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.20.5",
+  "version": "5.21.1",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,11 +28,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.20.5",
-    "@spscommerce/ds-illustrations": "5.20.5",
-    "@spscommerce/ds-shared": "5.20.5",
-    "@spscommerce/positioning": "5.20.5",
-    "@spscommerce/utils": "5.20.5",
+    "@spscommerce/ds-colors": "5.21.1",
+    "@spscommerce/ds-illustrations": "5.21.1",
+    "@spscommerce/ds-shared": "5.21.1",
+    "@spscommerce/positioning": "5.21.1",
+    "@spscommerce/utils": "5.21.1",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -40,11 +40,11 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.20.5",
-    "@spscommerce/ds-illustrations": "5.20.5",
-    "@spscommerce/ds-shared": "5.20.5",
-    "@spscommerce/positioning": "5.20.5",
-    "@spscommerce/utils": "5.20.5",
+    "@spscommerce/ds-colors": "5.21.1",
+    "@spscommerce/ds-illustrations": "5.21.1",
+    "@spscommerce/ds-shared": "5.21.1",
+    "@spscommerce/positioning": "5.21.1",
+    "@spscommerce/utils": "5.21.1",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",