@indico-data/design-system 3.18.0 → 3.20.0

package/lib/index.esm.js

@@ -175,7 +175,7 @@ function indiconToIconDef([name, customIcon]) {
     if (pathElements.length === 1 && !pathElements[0].props.d)
         throw new Error(`Monotone indicon '${name}' must have a 'd' attribute.`);
     if (pathElements.length === 2) {
-        let [primary, secondary] = pathElements;
+        const [primary, secondary] = pathElements;
         if (!primary.props.d || !secondary.props.d)
             throw new Error(`Duotone indicon '${name}' must have 'd' attributes on both paths.`);
         const op1 = parseFloat(primary.props.opacity);
@@ -5042,7 +5042,9 @@ const Icon = (_a) => {
 };
 
 const Button$1 = forwardRef((props, ref) => {
-    const { ariaLabel, children, isLoading, isDisabled, variant = 'solid', isPill, iconLeft, iconRight, onClick, type = 'button', size = 'md', onMouseExit, className, href } = props, rest = __rest(props, ["ariaLabel", "children", "isLoading", "isDisabled", "variant", "isPill", "iconLeft", "iconRight", "onClick", "type", "size", "onMouseExit", "className", "href"]);
+    const { ariaLabel, children, isLoading, isDisabled, variant = 'solid', isPill, iconLeft, iconRight, onClick, type = 'button', size = 'md', onMouseExit, className, 
+    // Destructure unused prop to prevent leaking to DOM
+    href: _href } = props, rest = __rest(props, ["ariaLabel", "children", "isLoading", "isDisabled", "variant", "isPill", "iconLeft", "iconRight", "onClick", "type", "size", "onMouseExit", "className", "href"]);
     const buttonClasses = classNames('btn', {
         [`btn--${variant}`]: variant,
         [`btn--${size}`]: size,
@@ -5074,7 +5076,7 @@ const Button$1 = forwardRef((props, ref) => {
             onClick(event);
         }
     };
-    return (jsxs("button", Object.assign({ ref: ref, disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseLeave: onMouseExit }, rest, { children: [isLoading && !iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, ariaLabel: "Loading...", size: iconSize })), iconLeft && !isLoading && (jsx(Icon, { name: iconLeft, ariaLabel: `${iconLeft} Icon`, size: iconSize })), children, iconRight && !isLoading && (jsx(Icon, { name: iconRight, ariaLabel: `${iconRight} Icon`, size: iconSize })), isLoading && iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, ariaLabel: "Loading...", size: iconSize }))] })));
+    return (jsxs("button", Object.assign({ ref: ref, disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseLeave: onMouseExit }, rest, { children: [isLoading && !iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, size: iconSize })), iconLeft && !isLoading && jsx(Icon, { name: iconLeft, ariaLabel: iconLeft, size: iconSize }), children, iconRight && !isLoading && jsx(Icon, { name: iconRight, ariaLabel: iconRight, size: iconSize }), isLoading && iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, size: iconSize }))] })));
 });
 
 var l;function r$1(e,t){return e[t]}function i(e=[],t,n=0){return [...e.slice(0,n),t,...e.slice(n)]}function s(e=[],t,n="id"){const o=e.slice(),a=r$1(t,n);return a?o.splice(o.findIndex((e=>r$1(e,n)===a)),1):o.splice(o.findIndex((e=>e===t)),1),o}function d(e){return e.map(((e,t)=>{const n=Object.assign(Object.assign({},e),{sortable:e.sortable||!!e.sortFunction||void 0});return e.id||(n.id=t+1),n}))}function c(e,t){return Math.ceil(e/t)}function g(e,t){return Math.min(e,t)}!function(e){e.ASC="asc",e.DESC="desc";}(l||(l={}));const u=()=>null;function p(e,t=[],n=[]){let o={},a=[...n];return t.length&&t.forEach((t=>{if(!t.when||"function"!=typeof t.when)throw new Error('"when" must be defined in the conditional style object and must be function');t.when(e)&&(o=t.style||{},t.classNames&&(a=[...a,...t.classNames]),"function"==typeof t.style&&(o=t.style(e)||{}));})),{conditionalStyle:o,classNames:a.join(" ")}}function b$1(e,t=[],n="id"){const o=r$1(e,n);return o?t.some((e=>r$1(e,n)===o)):t.some((t=>t===e))}function m(e,t){return t?e.findIndex((e=>h$1(e.id,t))):-1}function h$1(e,t){return e==t}function w$1(e,t){const n=!e.toggleOnSelectedRowsChange;switch(t.type){case"SELECT_ALL_ROWS":{const{keyField:n,rows:o,rowCount:a,mergeSelections:l}=t,r=!e.allSelected,i=!e.toggleOnSelectedRowsChange;if(l){const t=r?[...e.selectedRows,...o.filter((t=>!b$1(t,e.selectedRows,n)))]:e.selectedRows.filter((e=>!b$1(e,o,n)));return Object.assign(Object.assign({},e),{allSelected:r,selectedCount:t.length,selectedRows:t,toggleOnSelectedRowsChange:i})}return Object.assign(Object.assign({},e),{allSelected:r,selectedCount:r?a:0,selectedRows:r?o:[],toggleOnSelectedRowsChange:i})}case"SELECT_SINGLE_ROW":{const{keyField:o,row:a,isSelected:l,rowCount:r,singleSelect:d}=t;return d?l?Object.assign(Object.assign({},e),{selectedCount:0,allSelected:!1,selectedRows:[],toggleOnSelectedRowsChange:n}):Object.assign(Object.assign({},e),{selectedCount:1,allSelected:!1,selectedRows:[a],toggleOnSelectedRowsChange:n}):l?Object.assign(Object.assign({},e),{selectedCount:e.selectedRows.length>0?e.selectedRows.length-1:0,allSelected:!1,selectedRows:s(e.selectedRows,a,o),toggleOnSelectedRowsChange:n}):Object.assign(Object.assign({},e),{selectedCount:e.selectedRows.length+1,allSelected:e.selectedRows.length+1===r,selectedRows:i(e.selectedRows,a),toggleOnSelectedRowsChange:n})}case"SELECT_MULTIPLE_ROWS":{const{keyField:o,selectedRows:a,totalRows:l,mergeSelections:r}=t;if(r){const t=[...e.selectedRows,...a.filter((t=>!b$1(t,e.selectedRows,o)))];return Object.assign(Object.assign({},e),{selectedCount:t.length,allSelected:!1,selectedRows:t,toggleOnSelectedRowsChange:n})}return Object.assign(Object.assign({},e),{selectedCount:a.length,allSelected:a.length===l,selectedRows:a,toggleOnSelectedRowsChange:n})}case"CLEAR_SELECTED_ROWS":{const{selectedRowsFlag:n}=t;return Object.assign(Object.assign({},e),{allSelected:!1,selectedCount:0,selectedRows:[],selectedRowsFlag:n})}case"SORT_CHANGE":{const{sortDirection:o,selectedColumn:a,clearSelectedOnSort:l}=t;return Object.assign(Object.assign(Object.assign({},e),{selectedColumn:a,sortDirection:o,currentPage:1}),l&&{allSelected:!1,selectedCount:0,selectedRows:[],toggleOnSelectedRowsChange:n})}case"CHANGE_PAGE":{const{page:o,paginationServer:a,visibleOnly:l,persistSelectedOnPageChange:r}=t,i=a&&r,s=a&&!r||l;return Object.assign(Object.assign(Object.assign(Object.assign({},e),{currentPage:o}),i&&{allSelected:!1}),s&&{allSelected:!1,selectedCount:0,selectedRows:[],toggleOnSelectedRowsChange:n})}case"CHANGE_ROWS_PER_PAGE":{const{rowsPerPage:n,page:o}=t;return Object.assign(Object.assign({},e),{currentPage:o,rowsPerPage:n})}}}const f=css`
@@ -5461,32 +5463,32 @@ var l;function r$1(e,t){return e[t]}function i(e=[],t,n=0){return [...e.slice(0,
 	margin: 0 4px;
 `;var Me=React.memo((function({rowsPerPage:t,rowCount:n,currentPage:o,direction:a=ke.direction,paginationRowsPerPageOptions:l=ke.paginationRowsPerPageOptions,paginationIconLastPage:r=ke.paginationIconLastPage,paginationIconFirstPage:i=ke.paginationIconFirstPage,paginationIconNext:s=ke.paginationIconNext,paginationIconPrevious:d=ke.paginationIconPrevious,paginationComponentOptions:g=ke.paginationComponentOptions,onChangeRowsPerPage:u=ke.onChangeRowsPerPage,onChangePage:p=ke.onChangePage}){const b=(()=>{const t="object"==typeof window;function n(){return {width:t?window.innerWidth:void 0,height:t?window.innerHeight:void 0}}const[o,a]=React.useState(n);return React.useEffect((()=>{if(!t)return ()=>null;function e(){a(n());}return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),o})(),m=le(a),h=b.width&&b.width>599,w=c(n,t),f=o*t,x=f-t+1,C=1===o,y=o===w,R=Object.assign(Object.assign({},Pe),g),v=o===w?`${x}-${n} ${R.rangeSeparatorText} ${n}`:`${x}-${f} ${R.rangeSeparatorText} ${n}`,S=React.useCallback((()=>p(o-1)),[o,p]),E=React.useCallback((()=>p(o+1)),[o,p]),O=React.useCallback((()=>p(1)),[p]),$=React.useCallback((()=>p(c(n,t))),[p,n,t]),k=React.useCallback((e=>u(Number(e.target.value),o)),[o,u]),P=l.map((t=>React.createElement("option",{key:t,value:t},t)));R.selectAllRowsItem&&P.push(React.createElement("option",{key:-1,value:n},R.selectAllRowsItemText));const D=React.createElement($e,{onChange:k,defaultValue:t,"aria-label":R.rowsPerPageText},P);return React.createElement(De,{className:"rdt_Pagination"},!R.noRowsPerPage&&h&&React.createElement(React.Fragment,null,React.createElement(Te,null,R.rowsPerPageText),D),h&&React.createElement(Ie,null,v),React.createElement(Fe,null,React.createElement(He,{id:"pagination-first-page",type:"button","aria-label":"First Page","aria-disabled":C,onClick:O,disabled:C,$isRTL:m},i),React.createElement(He,{id:"pagination-previous-page",type:"button","aria-label":"Previous Page","aria-disabled":C,onClick:S,disabled:C,$isRTL:m},d),!R.noRowsPerPage&&!h&&D,React.createElement(He,{id:"pagination-next-page",type:"button","aria-label":"Next Page","aria-disabled":y,onClick:E,disabled:y,$isRTL:m},s),React.createElement(He,{id:"pagination-last-page",type:"button","aria-label":"Last Page","aria-disabled":y,onClick:$,disabled:y,$isRTL:m},r)))}));const Le=(t,n)=>{const o=React.useRef(!0);React.useEffect((()=>{o.current?o.current=!1:t();}),n);};function Ae(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var _e=function(e){return function(e){return !!e&&"object"==typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return "[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===Ne}(e)}(e)};var Ne="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function ze(e,t){return !1!==t.clone&&t.isMergeableObject(e)?Ue((n=e,Array.isArray(n)?[]:{}),e,t):e;var n;}function We(e,t,n){return e.concat(t).map((function(e){return ze(e,n)}))}function Be(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter((function(t){return Object.propertyIsEnumerable.call(e,t)})):[]}(e))}function Ge(e,t){try{return t in e}catch(e){return !1}}function Ve(e,t,n){var o={};return n.isMergeableObject(e)&&Be(e).forEach((function(t){o[t]=ze(e[t],n);})),Be(t).forEach((function(a){(function(e,t){return Ge(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,a)||(Ge(e,a)&&n.isMergeableObject(t[a])?o[a]=function(e,t){if(!t.customMerge)return Ue;var n=t.customMerge(e);return "function"==typeof n?n:Ue}(a,n)(e[a],t[a],n):o[a]=ze(t[a],n));})),o}function Ue(e,t,n){(n=n||{}).arrayMerge=n.arrayMerge||We,n.isMergeableObject=n.isMergeableObject||_e,n.cloneUnlessOtherwiseSpecified=ze;var o=Array.isArray(t);return o===Array.isArray(e)?o?n.arrayMerge(e,t,n):Ve(e,t,n):ze(t,n)}Ue.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,n){return Ue(e,n,t)}),{})};var Ye=Ae(Ue);const Ke={text:{primary:"rgba(0, 0, 0, 0.87)",secondary:"rgba(0, 0, 0, 0.54)",disabled:"rgba(0, 0, 0, 0.38)"},background:{default:"#FFFFFF"},context:{background:"#e3f2fd",text:"rgba(0, 0, 0, 0.87)"},divider:{default:"rgba(0,0,0,.12)"},button:{default:"rgba(0,0,0,.54)",focus:"rgba(0,0,0,.12)",hover:"rgba(0,0,0,.12)",disabled:"rgba(0, 0, 0, .18)"},selected:{default:"#e3f2fd",text:"rgba(0, 0, 0, 0.87)"},highlightOnHover:{default:"#EEEEEE",text:"rgba(0, 0, 0, 0.87)"},striped:{default:"#FAFAFA",text:"rgba(0, 0, 0, 0.87)"}},qe={default:Ke,light:Ke,dark:{text:{primary:"#FFFFFF",secondary:"rgba(255, 255, 255, 0.7)",disabled:"rgba(0,0,0,.12)"},background:{default:"#424242"},context:{background:"#E91E63",text:"#FFFFFF"},divider:{default:"rgba(81, 81, 81, 1)"},button:{default:"#FFFFFF",focus:"rgba(255, 255, 255, .54)",hover:"rgba(255, 255, 255, .12)",disabled:"rgba(255, 255, 255, .18)"},selected:{default:"rgba(0, 0, 0, .7)",text:"#FFFFFF"},highlightOnHover:{default:"rgba(0, 0, 0, .7)",text:"#FFFFFF"},striped:{default:"rgba(0, 0, 0, .87)",text:"#FFFFFF"}}};function Qe(t,n,o,a){const[r,i]=React.useState((()=>d(t))),[s,c]=React.useState(""),g=React.useRef("");Le((()=>{i(d(t));}),[t]);const u=React.useCallback((e=>{var t,n,o;const{attributes:a}=e.target,l=null===(t=a.getNamedItem("data-column-id"))||void 0===t?void 0:t.value;l&&(g.current=(null===(o=null===(n=r[m(r,l)])||void 0===n?void 0:n.id)||void 0===o?void 0:o.toString())||"",c(g.current));}),[r]),p=React.useCallback((e=>{var t;const{attributes:o}=e.target,a=null===(t=o.getNamedItem("data-column-id"))||void 0===t?void 0:t.value;if(a&&g.current&&a!==g.current){const e=m(r,g.current),t=m(r,a),o=[...r];o[e]=r[t],o[t]=r[e],i(o),n(o);}}),[n,r]),b=React.useCallback((e=>{e.preventDefault();}),[]),h=React.useCallback((e=>{e.preventDefault();}),[]),w=React.useCallback((e=>{e.preventDefault(),g.current="",c("");}),[]),f=function(e=!1){return e?l.ASC:l.DESC}(a),x=React.useMemo((()=>r[m(r,null==o?void 0:o.toString())]||{}),[o,r]);return {tableColumns:r,draggingColumnId:s,handleDragStart:u,handleDragEnter:p,handleDragOver:b,handleDragLeave:h,handleDragEnd:w,defaultSortDirection:f,defaultSortColumn:x}}var Xe=React.memo((function(t){const{data:n=ke.data,columns:o=ke.columns,title:i=ke.title,actions:s=ke.actions,keyField:d=ke.keyField,striped:u=ke.striped,highlightOnHover:p=ke.highlightOnHover,pointerOnHover:m=ke.pointerOnHover,dense:h=ke.dense,selectableRows:f=ke.selectableRows,selectableRowsSingle:C=ke.selectableRowsSingle,selectableRowsHighlight:v=ke.selectableRowsHighlight,selectableRowsNoSelectAll:S=ke.selectableRowsNoSelectAll,selectableRowsVisibleOnly:E=ke.selectableRowsVisibleOnly,selectableRowSelected:O=ke.selectableRowSelected,selectableRowDisabled:k=ke.selectableRowDisabled,selectableRowsComponent:P=ke.selectableRowsComponent,selectableRowsComponentProps:D=ke.selectableRowsComponentProps,onRowExpandToggled:H=ke.onRowExpandToggled,onSelectedRowsChange:F=ke.onSelectedRowsChange,expandableIcon:j=ke.expandableIcon,onChangeRowsPerPage:I=ke.onChangeRowsPerPage,onChangePage:T=ke.onChangePage,paginationServer:M=ke.paginationServer,paginationServerOptions:L=ke.paginationServerOptions,paginationTotalRows:A=ke.paginationTotalRows,paginationDefaultPage:_=ke.paginationDefaultPage,paginationResetDefaultPage:N=ke.paginationResetDefaultPage,paginationPerPage:z=ke.paginationPerPage,paginationRowsPerPageOptions:W=ke.paginationRowsPerPageOptions,paginationIconLastPage:B=ke.paginationIconLastPage,paginationIconFirstPage:G=ke.paginationIconFirstPage,paginationIconNext:V=ke.paginationIconNext,paginationIconPrevious:U=ke.paginationIconPrevious,paginationComponent:Y=ke.paginationComponent,paginationComponentOptions:K=ke.paginationComponentOptions,responsive:J=ke.responsive,progressPending:Q=ke.progressPending,progressComponent:X=ke.progressComponent,persistTableHead:Z=ke.persistTableHead,noDataComponent:ee=ke.noDataComponent,disabled:te=ke.disabled,noTableHead:oe=ke.noTableHead,noHeader:le=ke.noHeader,fixedHeader:re=ke.fixedHeader,fixedHeaderScrollHeight:ie=ke.fixedHeaderScrollHeight,pagination:se=ke.pagination,subHeader:de=ke.subHeader,subHeaderAlign:ce=ke.subHeaderAlign,subHeaderWrap:ge=ke.subHeaderWrap,subHeaderComponent:ue=ke.subHeaderComponent,noContextMenu:be=ke.noContextMenu,contextMessage:me=ke.contextMessage,contextActions:he=ke.contextActions,contextComponent:Se=ke.contextComponent,expandableRows:Ee=ke.expandableRows,onRowClicked:Oe=ke.onRowClicked,onRowDoubleClicked:$e=ke.onRowDoubleClicked,onRowMouseEnter:Pe=ke.onRowMouseEnter,onRowMouseLeave:De=ke.onRowMouseLeave,sortIcon:He=ke.sortIcon,onSort:Fe=ke.onSort,sortFunction:je=ke.sortFunction,sortServer:Ie=ke.sortServer,expandableRowsComponent:Te=ke.expandableRowsComponent,expandableRowsComponentProps:Ae=ke.expandableRowsComponentProps,expandableRowDisabled:_e=ke.expandableRowDisabled,expandableRowsHideExpander:Ne=ke.expandableRowsHideExpander,expandOnRowClicked:ze=ke.expandOnRowClicked,expandOnRowDoubleClicked:We=ke.expandOnRowDoubleClicked,expandableRowExpanded:Be=ke.expandableRowExpanded,expandableInheritConditionalStyles:Ge=ke.expandableInheritConditionalStyles,defaultSortFieldId:Ve=ke.defaultSortFieldId,defaultSortAsc:Ue=ke.defaultSortAsc,clearSelectedRows:Ke=ke.clearSelectedRows,conditionalRowStyles:Je=ke.conditionalRowStyles,theme:Xe=ke.theme,customStyles:Ze=ke.customStyles,direction:et=ke.direction,onColumnOrderChange:tt=ke.onColumnOrderChange,className:nt}=t,{tableColumns:ot,draggingColumnId:at,handleDragStart:lt,handleDragEnter:rt,handleDragOver:it,handleDragLeave:st,handleDragEnd:dt,defaultSortDirection:ct,defaultSortColumn:gt}=Qe(o,tt,Ve,Ue),[{rowsPerPage:ut,currentPage:pt,selectedRows:bt,allSelected:mt,selectedCount:ht,selectedColumn:wt,sortDirection:ft,toggleOnSelectedRowsChange:xt},Ct]=React.useReducer(w$1,{allSelected:!1,selectedCount:0,selectedRows:[],selectedColumn:gt,toggleOnSelectedRowsChange:!1,sortDirection:ct,currentPage:_,rowsPerPage:z,selectedRowsFlag:!1,contextMessage:ke.contextMessage}),{persistSelectedOnSort:yt=!1,persistSelectedOnPageChange:Rt=!1}=L,vt=!(!M||!Rt&&!yt),St=se&&!Q&&n.length>0,Et=Y||Me,Ot=React.useMemo((()=>((e={},t="default",n="default")=>{const o=qe[t]?t:n;return Ye({table:{style:{color:(a=qe[o]).text.primary,backgroundColor:a.background.default}},tableWrapper:{style:{display:"table"}},responsiveWrapper:{style:{}},header:{style:{fontSize:"22px",color:a.text.primary,backgroundColor:a.background.default,minHeight:"56px",paddingLeft:"16px",paddingRight:"8px"}},subHeader:{style:{backgroundColor:a.background.default,minHeight:"52px"}},head:{style:{color:a.text.primary,fontSize:"12px",fontWeight:500}},headRow:{style:{backgroundColor:a.background.default,minHeight:"52px",borderBottomWidth:"1px",borderBottomColor:a.divider.default,borderBottomStyle:"solid"},denseStyle:{minHeight:"32px"}},headCells:{style:{paddingLeft:"16px",paddingRight:"16px"},draggingStyle:{cursor:"move"}},contextMenu:{style:{backgroundColor:a.context.background,fontSize:"18px",fontWeight:400,color:a.context.text,paddingLeft:"16px",paddingRight:"8px",transform:"translate3d(0, -100%, 0)",transitionDuration:"125ms",transitionTimingFunction:"cubic-bezier(0, 0, 0.2, 1)",willChange:"transform"},activeStyle:{transform:"translate3d(0, 0, 0)"}},cells:{style:{paddingLeft:"16px",paddingRight:"16px",wordBreak:"break-word"},draggingStyle:{}},rows:{style:{fontSize:"13px",fontWeight:400,color:a.text.primary,backgroundColor:a.background.default,minHeight:"48px","&:not(:last-of-type)":{borderBottomStyle:"solid",borderBottomWidth:"1px",borderBottomColor:a.divider.default}},denseStyle:{minHeight:"32px"},selectedHighlightStyle:{"&:nth-of-type(n)":{color:a.selected.text,backgroundColor:a.selected.default,borderBottomColor:a.background.default}},highlightOnHoverStyle:{color:a.highlightOnHover.text,backgroundColor:a.highlightOnHover.default,transitionDuration:"0.15s",transitionProperty:"background-color",borderBottomColor:a.background.default,outlineStyle:"solid",outlineWidth:"1px",outlineColor:a.background.default},stripedStyle:{color:a.striped.text,backgroundColor:a.striped.default}},expanderRow:{style:{color:a.text.primary,backgroundColor:a.background.default}},expanderCell:{style:{flex:"0 0 48px"}},expanderButton:{style:{color:a.button.default,fill:a.button.default,backgroundColor:"transparent",borderRadius:"2px",transition:"0.25s",height:"100%",width:"100%","&:hover:enabled":{cursor:"pointer"},"&:disabled":{color:a.button.disabled},"&:hover:not(:disabled)":{cursor:"pointer",backgroundColor:a.button.hover},"&:focus":{outline:"none",backgroundColor:a.button.focus},svg:{margin:"auto"}}},pagination:{style:{color:a.text.secondary,fontSize:"13px",minHeight:"56px",backgroundColor:a.background.default,borderTopStyle:"solid",borderTopWidth:"1px",borderTopColor:a.divider.default},pageButtonsStyle:{borderRadius:"50%",height:"40px",width:"40px",padding:"8px",margin:"px",cursor:"pointer",transition:"0.4s",color:a.button.default,fill:a.button.default,backgroundColor:"transparent","&:disabled":{cursor:"unset",color:a.button.disabled,fill:a.button.disabled},"&:hover:not(:disabled)":{backgroundColor:a.button.hover},"&:focus":{outline:"none",backgroundColor:a.button.focus}}},noData:{style:{display:"flex",alignItems:"center",justifyContent:"center",color:a.text.primary,backgroundColor:a.background.default}},progress:{style:{display:"flex",alignItems:"center",justifyContent:"center",color:a.text.primary,backgroundColor:a.background.default}}},e);var a;})(Ze,Xe)),[Ze,Xe]),$t=React.useMemo((()=>Object.assign({},"auto"!==et&&{dir:et})),[et]),kt=React.useMemo((()=>{if(Ie)return n;if((null==wt?void 0:wt.sortFunction)&&"function"==typeof wt.sortFunction){const e=wt.sortFunction,t=ft===l.ASC?e:(t,n)=>-1*e(t,n);return [...n].sort(t)}return function(e,t,n,o){return t?o&&"function"==typeof o?o(e.slice(0),t,n):e.slice(0).sort(((e,o)=>{const a=t(e),l=t(o);if("asc"===n){if(a<l)return -1;if(a>l)return 1}if("desc"===n){if(a>l)return -1;if(a<l)return 1}return 0})):e}(n,null==wt?void 0:wt.selector,ft,je)}),[Ie,wt,ft,n,je]),Pt=React.useMemo((()=>{if(se&&!M){const e=pt*ut,t=e-ut;return kt.slice(t,e)}return kt}),[pt,se,M,ut,kt]),Dt=React.useCallback((e=>{Ct(e);}),[]),Ht=React.useCallback((e=>{Ct(e);}),[]),Ft=React.useCallback((e=>{Ct(e);}),[]),jt=React.useCallback(((e,t)=>Oe(e,t)),[Oe]),It=React.useCallback(((e,t)=>$e(e,t)),[$e]),Tt=React.useCallback(((e,t)=>Pe(e,t)),[Pe]),Mt=React.useCallback(((e,t)=>De(e,t)),[De]),Lt=React.useCallback((e=>Ct({type:"CHANGE_PAGE",page:e,paginationServer:M,visibleOnly:E,persistSelectedOnPageChange:Rt})),[M,Rt,E]),At=React.useCallback((e=>{const t=c(A||Pt.length,e),n=g(pt,t);M||Lt(n),Ct({type:"CHANGE_ROWS_PER_PAGE",page:n,rowsPerPage:e});}),[pt,Lt,M,A,Pt.length]);if(se&&!M&&kt.length>0&&0===Pt.length){const e=c(kt.length,ut),t=g(pt,e);Lt(t);}Le((()=>{F({allSelected:mt,selectedCount:ht,selectedRows:bt.slice(0)});}),[xt]),Le((()=>{Fe(wt,ft,kt.slice(0));}),[wt,ft]),Le((()=>{T(pt,A||kt.length);}),[pt]),Le((()=>{I(ut,pt);}),[ut]),Le((()=>{Lt(_);}),[_,N]),Le((()=>{if(se&&M&&A>0){const e=c(A,ut),t=g(pt,e);pt!==t&&Lt(t);}}),[A]),React.useEffect((()=>{Ct({type:"CLEAR_SELECTED_ROWS",selectedRowsFlag:Ke});}),[C,Ke]),React.useEffect((()=>{if(!O)return;const e=kt.filter((e=>O(e))),t=C?e.slice(0,1):e;Ct({type:"SELECT_MULTIPLE_ROWS",keyField:d,selectedRows:t,totalRows:kt.length,mergeSelections:vt});}),[n,O]);const _t=E?Pt:kt,Nt=Rt||C||S;return React.createElement(ThemeProvider,{theme:Ot},!le&&(!!i||!!s)&&React.createElement(pe,{title:i,actions:s,showMenu:!be,selectedCount:ht,direction:et,contextActions:he,contextComponent:Se,contextMessage:me}),de&&React.createElement(we,{align:ce,wrapContent:ge},ue),React.createElement(xe,Object.assign({$responsive:J,$fixedHeader:re,$fixedHeaderScrollHeight:ie,className:nt},$t),React.createElement(ye,null,Q&&!Z&&React.createElement(Ce,null,X),React.createElement(x$1,{disabled:te,className:"rdt_Table",role:"table"},!oe&&(!!Z||kt.length>0&&!Q)&&React.createElement(y$1,{className:"rdt_TableHead",role:"rowgroup",$fixedHeader:re},React.createElement(R$1,{className:"rdt_TableHeadRow",role:"row",$dense:h},f&&(Nt?React.createElement($$2,{style:{flex:"0 0 48px"}}):React.createElement(ae,{allSelected:mt,selectedRows:bt,selectableRowsComponent:P,selectableRowsComponentProps:D,selectableRowDisabled:k,rowData:_t,keyField:d,mergeSelections:vt,onSelectAllRows:Ht})),Ee&&!Ne&&React.createElement(Re,null),ot.map((t=>React.createElement(ne,{key:t.id,column:t,selectedColumn:wt,disabled:Q||0===kt.length,pagination:se,paginationServer:M,persistSelectedOnSort:yt,selectableRowsVisibleOnly:E,sortDirection:ft,sortIcon:He,sortServer:Ie,onSort:Dt,onDragStart:lt,onDragOver:it,onDragEnd:dt,onDragEnter:rt,onDragLeave:st,draggingColumnId:at}))))),!kt.length&&!Q&&React.createElement(ve,null,ee),Q&&Z&&React.createElement(Ce,null,X),!Q&&kt.length>0&&React.createElement(fe,{className:"rdt_TableBody",role:"rowgroup"},Pt.map(((t,n)=>{const o=r$1(t,d),a=function(e=""){return "number"!=typeof e&&(!e||0===e.length)}(o)?n:o,l=b$1(t,bt,d),i=!!(Ee&&Be&&Be(t)),s=!!(Ee&&_e&&_e(t));return React.createElement(q$1,{id:a,key:a,keyField:d,"data-row-id":a,columns:ot,row:t,rowCount:kt.length,rowIndex:n,selectableRows:f,expandableRows:Ee,expandableIcon:j,highlightOnHover:p,pointerOnHover:m,dense:h,expandOnRowClicked:ze,expandOnRowDoubleClicked:We,expandableRowsComponent:Te,expandableRowsComponentProps:Ae,expandableRowsHideExpander:Ne,defaultExpanderDisabled:s,defaultExpanded:i,expandableInheritConditionalStyles:Ge,conditionalRowStyles:Je,selected:l,selectableRowsHighlight:v,selectableRowsComponent:P,selectableRowsComponentProps:D,selectableRowDisabled:k,selectableRowsSingle:C,striped:u,onRowExpandToggled:H,onRowClicked:jt,onRowDoubleClicked:It,onRowMouseEnter:Tt,onRowMouseLeave:Mt,onSelectedRow:Ft,draggingColumnId:at,onDragStart:lt,onDragOver:it,onDragEnd:dt,onDragEnter:rt,onDragLeave:st})})))))),St&&React.createElement("div",null,React.createElement(Et,{onChangePage:Lt,onChangeRowsPerPage:At,rowCount:A||kt.length,currentPage:pt,rowsPerPage:ut,direction:et,paginationRowsPerPageOptions:W,paginationIconLastPage:B,paginationIconFirstPage:G,paginationIconNext:V,paginationIconPrevious:U,paginationComponentOptions:K})))}));
 
-const LoadingComponent = () => {
-    return jsx("div", { className: "table-loading", children: "Loading..." });
+const DisplayFormError = (_a) => {
+    var { message } = _a, rest = __rest(_a, ["message"]);
+    return (jsx("p", Object.assign({ className: "form-errors" }, rest, { children: message })));
 };
 
+const DEFAULT_TEXT$c = {
+    required: '(required)',
+};
 const Label = ({ label, name, isRequired }) => {
     return (jsx("div", { "data-testid": `${name}-testId`, className: `form-label`, children: jsxs("label", { htmlFor: `${name}`, children: [label, isRequired ? jsx("span", { className: "text-error", children: " *" }) : ''] }) }));
 };
 // HOC to add common label functionality to components
 function withLabel(WrappedComponent) {
     const WithLabelComponent = (_a, ref) => {
-        var { label, hasHiddenLabel = false, name, isRequired } = _a, rest = __rest(_a, ["label", "hasHiddenLabel", "name", "isRequired"]);
+        var { label, hasHiddenLabel = false, name, isRequired, text: textProp } = _a, rest = __rest(_a, ["label", "hasHiddenLabel", "name", "isRequired", "text"]);
+        const text = Object.assign(Object.assign({}, DEFAULT_TEXT$c), textProp);
         const ariaLabel = hasHiddenLabel
-            ? { 'aria-label': isRequired ? `${label} (required)` : label }
+            ? { 'aria-label': isRequired ? `${label} ${text.required}` : label }
             : {};
-        return (jsxs("div", { className: "form-control", children: [!hasHiddenLabel && jsx(Label, { label: label, name: name, isRequired: isRequired }), jsx(WrappedComponent, Object.assign({}, rest, { id: name, name: name }, ariaLabel, { ref: ref }))] }));
+        return (jsxs("div", { className: "form-control", children: [!hasHiddenLabel && jsx(Label, { label: label, name: name, isRequired: isRequired }), jsx(WrappedComponent, Object.assign({}, rest, { id: name, name: name }, ariaLabel, { text: textProp, ref: ref }))] }));
     };
     return forwardRef(WithLabelComponent);
 }
 
-const DisplayFormError = (_a) => {
-    var { message } = _a, rest = __rest(_a, ["message"]);
-    return (jsx("p", Object.assign({ className: "form-errors" }, rest, { children: message })));
-};
-
 const Input = React__default.forwardRef((_a, ref) => {
-    var { id, name, placeholder, isRequired, isDisabled, readonly, isClearable, errorMessage, helpText, maxLength, iconName, tabIndex, onChange, onBlur, onKeyDown, className } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "readonly", "isClearable", "errorMessage", "helpText", "maxLength", "iconName", "tabIndex", "onChange", "onBlur", "onKeyDown", "className"]);
+    var { id, name, placeholder, isRequired, isDisabled, readonly, isClearable, errorMessage, helpText, maxLength, iconName, tabIndex, onChange, onBlur, onKeyDown, className, text: _text } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "readonly", "isClearable", "errorMessage", "helpText", "maxLength", "iconName", "tabIndex", "onChange", "onBlur", "onKeyDown", "className", "text"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: '' } });
@@ -5500,10 +5502,17 @@ const Input = React__default.forwardRef((_a, ref) => {
 });
 const LabeledInput = withLabel(Input);
 
+const DEFAULT_TEXT$b = {
+    previousPage: 'Previous Page',
+    nextPage: 'Next Page',
+    currentPage: 'Current Page',
+    of: 'of',
+};
 const Pagination = (_a) => {
-    var { totalPages, currentPage = 1, onChange, className } = _a, rest = __rest(_a, ["totalPages", "currentPage", "onChange", "className"]);
+    var { totalPages, currentPage = 1, onChange, className, text: textProp } = _a, rest = __rest(_a, ["totalPages", "currentPage", "onChange", "className", "text"]);
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$b), textProp);
     const [inputValue, setInputValue] = useState(currentPage.toString());
-    const totalPagesText = `of ${totalPages}`;
+    const totalPagesText = `${text.of} ${totalPages}`;
     const classes = classNames('pagination', className);
     useEffect(() => {
         setInputValue(currentPage.toString());
@@ -5535,9 +5544,9 @@ const Pagination = (_a) => {
     const isNextButtonDisabled = currentPage === totalPages;
     const isPreviousButtonDisabled = currentPage === 1;
     const hasError = Number(inputValue) > totalPages || Number(inputValue) < 1;
-    return (jsx("div", Object.assign({ className: classes }, rest, { children: jsx(Container, { children: jsxs(Row, { gutterWidth: 12, align: "center", children: [jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__previous", children: jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: "Previous Page", variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", size: "sm", isDisabled: isPreviousButtonDisabled || totalPages === 0 }) }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__current-page", children: jsx(LabeledInput, { "data-testid": "pagination-current-page-input", className: classNames('pagination__current-page-input', {
+    return (jsx("div", Object.assign({ className: classes }, rest, { children: jsx(Container, { children: jsxs(Row, { gutterWidth: 12, align: "center", children: [jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__previous", children: jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: text.previousPage, variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", size: "sm", isDisabled: isPreviousButtonDisabled || totalPages === 0 }) }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__current-page", children: jsx(LabeledInput, { "data-testid": "pagination-current-page-input", className: classNames('pagination__current-page-input', {
                                     'has-error': hasError,
-                                }), value: totalPages === 0 ? '0' : inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
+                                }), value: totalPages === 0 ? '0' : inputValue, name: "currentPage", label: text.currentPage, hasHiddenLabel: true, onKeyDown: (e) => {
                                     if (e.key === 'Enter') {
                                         validateAndUpdatePage(e.currentTarget.value);
                                     }
@@ -5547,7 +5556,7 @@ const Pagination = (_a) => {
                                     if (value === '' || /^\d*$/.test(value)) {
                                         setInputValue(value);
                                     }
-                                }, onBlur: (e) => validateAndUpdatePage(e.currentTarget.value) }) }) }), jsx(Col, { xs: "content", children: jsx("p", { className: "pagination__page-total", children: totalPagesText }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__next", children: jsx(Button$1, { "data-testid": "pagination-next-button", ariaLabel: "Next Page", variant: "link", onClick: handleNextPage, iconLeft: "chevron-right", isDisabled: isNextButtonDisabled || totalPages === 0, size: "sm" }) }) })] }) }) })));
+                                }, onBlur: (e) => validateAndUpdatePage(e.currentTarget.value) }) }) }), jsx(Col, { xs: "content", children: jsx("p", { className: "pagination__page-total", children: totalPagesText }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__next", children: jsx(Button$1, { "data-testid": "pagination-next-button", ariaLabel: text.nextPage, variant: "link", onClick: handleNextPage, iconLeft: "chevron-right", isDisabled: isNextButtonDisabled || totalPages === 0, size: "sm" }) }) })] }) }) })));
 };
 
 const TablePagination$1 = ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }) => {
@@ -5632,7 +5641,12 @@ const clearStickyStyles = (header) => {
     header.style.backgroundColor = '';
 };
 
-const HorizontalStickyHeader = ({ children, position, onPinColumn, isPinned = false, pinnedColumnIds, }) => {
+const DEFAULT_TEXT$a = {
+    unpinColumn: 'Unpin column',
+    pinColumn: 'Pin column',
+};
+const HorizontalStickyHeader = ({ children, position, onPinColumn, isPinned = false, pinnedColumnIds, text: textProp, }) => {
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$a), textProp);
     useEffect(() => {
         const calculateWidth = () => __awaiter(void 0, void 0, void 0, function* () {
             yield new Promise((resolve) => setTimeout(resolve, 0));
@@ -5649,14 +5663,14 @@ const HorizontalStickyHeader = ({ children, position, onPinColumn, isPinned = fa
         });
         calculateWidth();
     }, [position, isPinned, pinnedColumnIds]);
-    return (jsxs("div", { className: "table__header-cell", "data-testid": `sticky-column-${position}`, children: [jsx(Button$1, { "data-testid": `sticky-header-pin-button-${position}`, variant: "link", size: "sm", iconLeft: "pin", onClick: () => onPinColumn === null || onPinColumn === void 0 ? void 0 : onPinColumn(`sticky-column-${position}`), ariaLabel: isPinned ? 'Unpin column' : 'Pin column', className: `table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action` }), jsx("div", { className: "table__header-content", children: children })] }));
+    return (jsxs("div", { className: "table__header-cell", "data-testid": `sticky-column-${position}`, children: [jsx(Button$1, { "data-testid": `sticky-header-pin-button-${position}`, variant: "link", size: "sm", iconLeft: "pin", onClick: () => onPinColumn === null || onPinColumn === void 0 ? void 0 : onPinColumn(`sticky-column-${position}`), ariaLabel: isPinned ? text.unpinColumn : text.pinColumn, className: `table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action` }), jsx("div", { className: "table__header-content", children: children })] }));
 };
 
-const processColumns = (columns, pinnedColumnIds, togglePinnedColumn) => {
+const processColumns = (columns, pinnedColumnIds, togglePinnedColumn, text) => {
     return columns.map((column, index) => {
         const dataColumnId = `sticky-column-${index}`;
         const isPinned = pinnedColumnIds.includes(dataColumnId);
-        const headerContent = column.isPinned !== undefined ? (jsx(HorizontalStickyHeader, { position: index, isPinned: isPinned, onPinColumn: () => togglePinnedColumn(column.id), pinnedColumnIds: pinnedColumnIds, children: column.name })) : (jsx(Fragment, { children: column.name }));
+        const headerContent = column.isPinned !== undefined ? (jsx(HorizontalStickyHeader, { position: index, isPinned: isPinned, onPinColumn: () => togglePinnedColumn(column.id), pinnedColumnIds: pinnedColumnIds, text: text, children: column.name })) : (jsx(Fragment, { children: column.name }));
         return Object.assign(Object.assign({}, column), { name: headerContent, id: dataColumnId, style: getPinnedColumnStyles(isPinned, index, pinnedColumnIds) });
     });
 };
@@ -5665,7 +5679,7 @@ const processColumns = (columns, pinnedColumnIds, togglePinnedColumn) => {
  * Hook to manage pinned columns in a table
  * Handles initialization, toggling, positioning and resizing of pinned columns
  */
-const usePinnedColumnsManager = (columns, canPinColumns, onPinnedColumnsChange) => {
+const usePinnedColumnsManager = (columns, canPinColumns, onPinnedColumnsChange, text) => {
     const pinnedColumnIds = columns.filter((column) => column.isPinned).map((column) => column.id);
     // `dataColumnIds` is the list of IDs used as `data-column-id` attributes on the table headers and cells
     const dataColumnIds = useMemo(() => {
@@ -5772,17 +5786,27 @@ const usePinnedColumnsManager = (columns, canPinColumns, onPinnedColumnsChange)
     }, [canPinColumns, dataColumnIds]);
     // Process columns for rendering with pin state
     const columnsWithPinning = canPinColumns
-        ? sortPinnedColumns(processColumns(columns, dataColumnIds, togglePinnedColumn), dataColumnIds)
+        ? sortPinnedColumns(processColumns(columns, dataColumnIds, togglePinnedColumn, text), dataColumnIds)
         : columns;
     return {
         columnsWithPinning, // Columns with pin state and handlers applied
     };
 };
 
+const LoadingComponent = ({ loadingText }) => {
+    return jsx("div", { className: "table-loading", children: loadingText });
+};
+
+const DEFAULT_TEXT$9 = {
+    loading: 'Loading...',
+    unpinColumn: 'Unpin column',
+    pinColumn: 'Pin column',
+};
 const Table = (props) => {
-    const { responsive = true, direction = 'auto', keyField = 'id', striped = false, noDataComponent = 'built-in', isDisabled, isLoading, isFullHeight = false, subHeaderAlign = 'left', className, paginationTotalRows, totalEntriesText, data, columns: initialColumns, canPinColumns = false, onPinnedColumnsChange } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "isFullHeight", "subHeaderAlign", "className", "paginationTotalRows", "totalEntriesText", "data", "columns", "canPinColumns", "onPinnedColumnsChange"]);
+    const { responsive = true, direction = 'auto', keyField = 'id', striped = false, noDataComponent = 'built-in', isDisabled, isLoading, isFullHeight = false, subHeaderAlign = 'left', className, paginationTotalRows, totalEntriesText, data, columns: initialColumns, canPinColumns = false, onPinnedColumnsChange, text: textProp } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "isFullHeight", "subHeaderAlign", "className", "paginationTotalRows", "totalEntriesText", "data", "columns", "canPinColumns", "onPinnedColumnsChange", "text"]);
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$9), textProp);
     // Turns on/off column pinning.
-    const { columnsWithPinning } = usePinnedColumnsManager(initialColumns, canPinColumns, onPinnedColumnsChange);
+    const { columnsWithPinning } = usePinnedColumnsManager(initialColumns, canPinColumns, onPinnedColumnsChange, { unpinColumn: text.unpinColumn, pinColumn: text.pinColumn });
     const combinedClassName = classNames(className, {
         'table--striped': striped,
         'table-body': true,
@@ -5790,7 +5814,7 @@ const Table = (props) => {
     const tableWrapperClassName = classNames('table', {
         'table--full-height': isFullHeight,
     });
-    return (jsx("div", { className: tableWrapperClassName, "data-testid": "table", children: jsx(Xe, Object.assign({ data: data, columns: columnsWithPinning, responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}), pagination: true, paginationComponent: (props) => (jsx(TablePagination$1, Object.assign({}, props, { totalEntriesText: totalEntriesText }))), paginationTotalRows: paginationTotalRows, highlightOnHover: true, pointerOnHover: true }, rest)) }));
+    return (jsx("div", { className: tableWrapperClassName, "data-testid": "table", children: jsx(Xe, Object.assign({ data: data, columns: columnsWithPinning, responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, { loadingText: text.loading }), pagination: true, paginationComponent: (props) => (jsx(TablePagination$1, Object.assign({}, props, { totalEntriesText: totalEntriesText }))), paginationTotalRows: paginationTotalRows, highlightOnHover: true, pointerOnHover: true }, rest)) }));
 };
 
 const Radio = React__default.forwardRef((_a, ref) => {
@@ -5809,7 +5833,7 @@ const Toggle = React__default.forwardRef((_a, ref) => {
 });
 
 const Textarea = React__default.forwardRef((_a, ref) => {
-    var { label, name, placeholder, value, onChange, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, defaultValue, tabIndex } = _a, rest = __rest(_a, ["label", "name", "placeholder", "value", "onChange", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus", "defaultValue", "tabIndex"]);
+    var { label: _label, name, placeholder, value, onChange, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel: _hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, defaultValue, tabIndex, text: _text } = _a, rest = __rest(_a, ["label", "name", "placeholder", "value", "onChange", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus", "defaultValue", "tabIndex", "text"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const textareaClasses = classNames('textarea', { error: hasErrors });
     return (jsxs(Fragment, { children: [jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, value: value, defaultValue: defaultValue, tabIndex: tabIndex }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
@@ -5817,7 +5841,7 @@ const Textarea = React__default.forwardRef((_a, ref) => {
 const LabeledTextarea = withLabel(Textarea);
 
 const PasswordInput = React__default.forwardRef((_a, ref) => {
-    var { name, placeholder, onChange, onBlur, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest(_a, ["name", "placeholder", "onChange", "onBlur", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
+    var { name, placeholder, onChange, onBlur, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true, text: _text } = _a, rest = __rest(_a, ["name", "placeholder", "onChange", "onBlur", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword", "text"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const [showPassword, setShowPassword] = useState(false);
     const handleShowPassword = () => {
@@ -5830,18 +5854,25 @@ const PasswordInput = React__default.forwardRef((_a, ref) => {
 });
 const LabeledPasswordInput = withLabel(PasswordInput);
 
+const DEFAULT_TEXT$8 = {
+    placeholder: 'Select...',
+    noOptions: 'No options',
+    loading: 'Loading...',
+    required: '(required)',
+};
 const OptionComponent = (_a) => {
     var _b, _c, _d;
     var props = __rest(_a, []);
     return (jsx(components$1.Option, Object.assign({}, props, { children: jsxs("div", { className: "select__items", children: [jsx("div", { className: "select__item-value", children: (_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.label }), ((_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c.detail) && jsx("div", { className: "select__item-detail", children: (_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.detail })] }) })));
 };
 const Select$1 = React__default.forwardRef((_a, ref) => {
-    var { classNamePrefix = 'select', className, components: customComponents, label, hasHiddenLabel, name } = _a, props = __rest(_a, ["classNamePrefix", "className", "components", "label", "hasHiddenLabel", "name"]);
+    var { classNamePrefix = 'select', className, components: customComponents, label: _label, hasHiddenLabel: _hasHiddenLabel, name: _name, text: textProp } = _a, props = __rest(_a, ["classNamePrefix", "className", "components", "label", "hasHiddenLabel", "name", "text"]);
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$8), textProp);
     const defaultComponents = {
         Option: OptionComponent,
     };
     const mergedComponents = Object.assign(Object.assign({}, defaultComponents), customComponents);
-    return (jsx(ReactSelect, Object.assign({ ref: ref, classNamePrefix: classNamePrefix, className: classNames('select-wrapper', className), components: mergedComponents }, props)));
+    return (jsx(ReactSelect, Object.assign({ ref: ref, classNamePrefix: classNamePrefix, className: classNames('select-wrapper', className), components: mergedComponents, placeholder: text.placeholder, noOptionsMessage: () => text.noOptions, loadingMessage: () => text.loading }, props)));
 });
 const LabeledSelect = withLabel(Select$1);
 
@@ -13841,48 +13872,6 @@ function useInteractions(propsList) {
   }), [getReferenceProps, getFloatingProps, getItemProps]);
 }
 
-const defaultOptions$1 = {
-    placement: 'bottom-start',
-    middleware: [offset$2(5), flip$2(), shift$2()],
-};
-function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, hover = false, onOpenChange, disableAutoUpdate = false, }) {
-    var _a, _b;
-    const [internalIsOpen, setInternalIsOpen] = useState(false);
-    // Determine whether the component is controlled or uncontrolled
-    const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
-    const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
-    const setIsOpen = isControlled ? controlledSetIsOpen : setInternalIsOpen;
-    const floatUIContentRef = useRef();
-    const referenceElementRef = useRef(null);
-    const childrenArray = React__default.Children.toArray(children);
-    if (childrenArray.length !== 2) {
-        throw new Error('FloatUI requires exactly two children: a trigger element and a content element.');
-    }
-    const [trigger, content] = childrenArray;
-    if (!isValidElement(trigger) || !isValidElement(content)) {
-        throw new Error('Both children of FloatUI must be valid React elements.');
-    }
-    const referenceElement = ((_a = floatingOptions.elements) === null || _a === void 0 ? void 0 : _a.reference) || referenceElementRef.current;
-    const { refs, floatingStyles, context } = useFloating(Object.assign(Object.assign({}, floatingOptions), { open: isOpen, onOpenChange: (isOpen) => {
-            setIsOpen(isOpen);
-            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
-        }, whileElementsMounted: disableAutoUpdate
-            ? undefined
-            : ((_b = floatingOptions.whileElementsMounted) !== null && _b !== void 0 ? _b : autoUpdate$1), elements: {
-            reference: referenceElement,
-        } }));
-    // Can't call hooks conditionally so this enabled option is needed.
-    const click = useClick(context, { enabled: !hover });
-    const hoverHook = useHover(context, { enabled: hover });
-    const dismiss = useDismiss(context, {
-        bubbles: true,
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([click, hoverHook, dismiss]);
-    const tooltipContent = (jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: `floatui-container ${className}`, children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
-    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: trigger })), isOpen &&
-                (isPortal ? (jsx(FloatingPortal, { id: portalOptions === null || portalOptions === void 0 ? void 0 : portalOptions.rootId, children: tooltipContent })) : (tooltipContent))] }));
-}
-
 const formatTimeValue = (value) => {
     if (!value || value.trim() === '') {
         return '';
@@ -13932,8 +13921,54 @@ const validateInputValue = (value) => {
     return ''; // Valid time format
 };
 
+const defaultOptions$1 = {
+    placement: 'bottom-start',
+    middleware: [offset$2(5), flip$2(), shift$2()],
+};
+function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, hover = false, onOpenChange, disableAutoUpdate = false, }) {
+    var _a, _b;
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    // Determine whether the component is controlled or uncontrolled
+    const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
+    const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+    const setIsOpen = isControlled ? controlledSetIsOpen : setInternalIsOpen;
+    const floatUIContentRef = useRef();
+    const referenceElementRef = useRef(null);
+    const childrenArray = React__default.Children.toArray(children);
+    if (childrenArray.length !== 2) {
+        throw new Error('FloatUI requires exactly two children: a trigger element and a content element.');
+    }
+    const [trigger, content] = childrenArray;
+    if (!isValidElement(trigger) || !isValidElement(content)) {
+        throw new Error('Both children of FloatUI must be valid React elements.');
+    }
+    const referenceElement = ((_a = floatingOptions.elements) === null || _a === void 0 ? void 0 : _a.reference) || referenceElementRef.current;
+    const { refs, floatingStyles, context } = useFloating(Object.assign(Object.assign({}, floatingOptions), { open: isOpen, onOpenChange: (isOpen) => {
+            setIsOpen(isOpen);
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+        }, whileElementsMounted: disableAutoUpdate
+            ? undefined
+            : (_b = floatingOptions.whileElementsMounted) !== null && _b !== void 0 ? _b : autoUpdate$1, elements: {
+            reference: referenceElement,
+        } }));
+    // Can't call hooks conditionally so this enabled option is needed.
+    const click = useClick(context, { enabled: !hover });
+    const hoverHook = useHover(context, { enabled: hover });
+    const dismiss = useDismiss(context, {
+        bubbles: true,
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, hoverHook, dismiss]);
+    const tooltipContent = (jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: `floatui-container ${className}`, children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
+    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: trigger })), isOpen &&
+                (isPortal ? (jsx(FloatingPortal, { id: portalOptions === null || portalOptions === void 0 ? void 0 : portalOptions.rootId, children: tooltipContent })) : (tooltipContent))] }));
+}
+
+const DEFAULT_TEXT$7 = {
+    validationError: 'Time validation error',
+};
 const TimePicker = (_a) => {
-    var { ref, timeValue = '', label = 'Time Picker', name = 'time-picker', hasHiddenLabel = false, onTimeChange, className, isDisabled, isReadOnly, tabIndex } = _a, rest = __rest(_a, ["ref", "timeValue", "label", "name", "hasHiddenLabel", "onTimeChange", "className", "isDisabled", "isReadOnly", "tabIndex"]);
+    var { ref, timeValue = '', label = 'Time Picker', name = 'time-picker', hasHiddenLabel = false, onTimeChange, className, isDisabled, isReadOnly, tabIndex, text: textProp } = _a, rest = __rest(_a, ["ref", "timeValue", "label", "name", "hasHiddenLabel", "onTimeChange", "className", "isDisabled", "isReadOnly", "tabIndex", "text"]);
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$7), textProp);
     const [validationError, setValidationError] = useState('');
     const [inputValue, setInputValue] = useState(timeValue);
     const handleTimeChange = (e) => {
@@ -13955,7 +13990,7 @@ const TimePicker = (_a) => {
             onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(formattedValue);
         }
     };
-    return (jsxs("div", { className: "time-input-wrapper", children: [jsx(LabeledInput, Object.assign({ ref: ref, tabIndex: tabIndex, className: className, "data-testid": `${name}-input`, label: label, hasHiddenLabel: hasHiddenLabel, value: inputValue, maxLength: 8, onChange: handleTimeChange, onBlur: handleBlur, name: name, readonly: isReadOnly, isDisabled: isDisabled }, rest)), jsxs(FloatUI, { ariaLabel: "Time validation error", isOpen: !!validationError, setIsOpen: () => { }, isPortal: true, portalOptions: {
+    return (jsxs("div", { className: "time-input-wrapper", children: [jsx(LabeledInput, Object.assign({ ref: ref, tabIndex: tabIndex, className: className, "data-testid": `${name}-input`, label: label, hasHiddenLabel: hasHiddenLabel, value: inputValue, maxLength: 8, onChange: handleTimeChange, onBlur: handleBlur, name: name, readonly: isReadOnly, isDisabled: isDisabled }, rest)), jsxs(FloatUI, { ariaLabel: text.validationError, isOpen: !!validationError, setIsOpen: () => { }, isPortal: true, portalOptions: {
                     rootId: 'theme-root' ,
                 }, floatingOptions: {
                     placement: 'bottom-start',
@@ -13963,8 +13998,15 @@ const TimePicker = (_a) => {
                 }, children: [jsx("div", {}), jsx("div", { className: "time-validation-error", children: validationError && jsx("div", { className: "error-message", children: validationError }) })] })] }));
 };
 
+const DEFAULT_TEXT$6 = {
+    selectTime: 'Select Time',
+};
 const DatePicker = (props) => {
-    const { mode = 'single', className, captionLayout = 'dropdown', selected, hasTimePicker = false, id, month, defaultMonth, startMonth, endMonth, components, numberOfMonths, isDisabled, formatters, weekStartsOn, firstWeekContainsDate, today, timeValue, isRequired, min, max, onTimeChange, onSelect, onMonthChange, onNextClick, onPrevClick, onDayClick, isReadOnly, ref, timeTabIndex, dateTabIndex } = props, rest = __rest(props, ["mode", "className", "captionLayout", "selected", "hasTimePicker", "id", "month", "defaultMonth", "startMonth", "endMonth", "components", "numberOfMonths", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "timeValue", "isRequired", "min", "max", "onTimeChange", "onSelect", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick", "isReadOnly", "ref", "timeTabIndex", "dateTabIndex"]);
+    const { mode = 'single', selected, hasTimePicker = false, endMonth, numberOfMonths, timeValue, onTimeChange, onSelect, isReadOnly, ref, timeTabIndex, text: textProp, 
+    // Destructure props handled by getCommonProps to prevent them from
+    // leaking through ...rest and overriding the transformed values
+    className: _className, captionLayout: _captionLayout, id: _id, month: _month, defaultMonth: _defaultMonth, startMonth: _startMonth, components: _components, isDisabled: _isDisabled, formatters: _formatters, weekStartsOn: _weekStartsOn, firstWeekContainsDate: _firstWeekContainsDate, today: _today, isRequired: _isRequired, min: _min, max: _max, onMonthChange: _onMonthChange, onNextClick: _onNextClick, onPrevClick: _onPrevClick, onDayClick: _onDayClick, dateTabIndex: _dateTabIndex } = props, rest = __rest(props, ["mode", "selected", "hasTimePicker", "endMonth", "numberOfMonths", "timeValue", "onTimeChange", "onSelect", "isReadOnly", "ref", "timeTabIndex", "text", "className", "captionLayout", "id", "month", "defaultMonth", "startMonth", "components", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "isRequired", "min", "max", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick", "dateTabIndex"]);
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$6), textProp);
     const futureDateByYear = (year) => new Date(new Date().getFullYear() + year, 11, 31);
     const endMonthDefault = endMonth !== null && endMonth !== void 0 ? endMonth : futureDateByYear(5);
     const modeMap = {
@@ -14015,11 +14057,17 @@ const DatePicker = (props) => {
         }
         return () => observer.disconnect();
     }, []);
-    return (jsxs("div", { className: "date-picker-wrapper", tabIndex: -1, ref: wrapperRef, children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
+    return (jsxs("div", { className: "date-picker-wrapper", tabIndex: -1, ref: wrapperRef, children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: text.selectTime }) }), jsx(Col, { children: jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
 };
 
+const DEFAULT_TEXT$5 = {
+    triggerIcon: 'Open date picker',
+};
 const IconTriggerDatePicker = (props) => {
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, id, label, onSelect, selected, triggerIcon, triggerIconSize, mode, isOpen, clearOnClose, initialMonth, portalOptions, floatingOptions, isPortal } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "id", "label", "onSelect", "selected", "triggerIcon", "triggerIconSize", "mode", "isOpen", "clearOnClose", "initialMonth", "portalOptions", "floatingOptions", "isPortal"]);
+    const { ariaLabel, isDisabled, disableBeforeDate, disableAfterDate, id, 
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className, label: _label, onSelect, selected, triggerIcon, triggerIconSize, mode, isOpen, clearOnClose, initialMonth, portalOptions, floatingOptions, isPortal, text: textProp } = props, rest = __rest(props, ["ariaLabel", "isDisabled", "disableBeforeDate", "disableAfterDate", "id", "className", "label", "onSelect", "selected", "triggerIcon", "triggerIconSize", "mode", "isOpen", "clearOnClose", "initialMonth", "portalOptions", "floatingOptions", "isPortal", "text"]);
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$5), textProp);
     const [localMonth, setLocalMonth] = useState(initialMonth !== null && initialMonth !== void 0 ? initialMonth : new Date());
     const handleSelect = (date) => {
         if (!date) {
@@ -14035,7 +14083,7 @@ const IconTriggerDatePicker = (props) => {
             onSelect && onSelect(undefined);
         }
     }, [isOpen, clearOnClose]);
-    return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}` }), jsx(DatePicker, Object.assign({ isDisabled: isDisabled, mode: mode, selected: selected, onSelect: handleSelect, month: localMonth, startMonth: disableBeforeDate, endMonth: disableAfterDate, onMonthChange: setLocalMonth }, rest))] }));
+    return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsx(Icon, { "aria-label": text.triggerIcon, name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}` }), jsx(DatePicker, Object.assign({ isDisabled: isDisabled, mode: mode, selected: selected, onSelect: handleSelect, month: localMonth, startMonth: disableBeforeDate, endMonth: disableAfterDate, onMonthChange: setLocalMonth }, rest))] }));
 };
 
 /**
@@ -19428,7 +19476,9 @@ const formatDateAsString$1 = (date) => format(date, 'MM/dd/yyyy');
 
 function SingleInputDatePicker(props) {
     var _a;
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, hasHiddenLabel, ref, isReadOnly, tabIndex, portalOptions, floatingOptions, isPortal } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "hasHiddenLabel", "ref", "isReadOnly", "tabIndex", "portalOptions", "floatingOptions", "isPortal"]);
+    const { ariaLabel, isDisabled, captionLayout, initialMonth, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, hasHiddenLabel, ref, isReadOnly, tabIndex, portalOptions, floatingOptions, isPortal, 
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className, disableBeforeDate: _disableBeforeDate, disableAfterDate: _disableAfterDate, id: _id } = props, rest = __rest(props, ["ariaLabel", "isDisabled", "captionLayout", "initialMonth", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "hasHiddenLabel", "ref", "isReadOnly", "tabIndex", "portalOptions", "floatingOptions", "isPortal", "className", "disableBeforeDate", "disableAfterDate", "id"]);
     const inputId = useId$1();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = useState(selected ? formatDateAsString$1(selected) : '');
@@ -19462,11 +19512,18 @@ function SingleInputDatePicker(props) {
             setLocalTextValue('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, hasHiddenLabel: hasHiddenLabel, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, label: 'Single Date Picker', tabIndex: tabIndex, name: 'Date Picker', ref: ref, readonly: isReadOnly }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }));
+    return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, hasHiddenLabel: hasHiddenLabel, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, label: label, tabIndex: tabIndex, name: label, ref: ref, readonly: isReadOnly }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }));
 }
 
+const DEFAULT_TEXT$4 = {
+    fromDate: 'From Date',
+    toDate: 'To Date',
+};
 function InputDateRangePicker(props) {
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, month, id, onSelect, selected, isOpen, setIsOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage, gutterWidth, fromLabel, toLabel, closeOnSelect, clearOnClose, hasHiddenLabel, ref, isFromReadOnly, isToReadOnly, toTabIndex, fromTabIndex, portalOptions, floatingOptions, isPortal } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "month", "id", "onSelect", "selected", "isOpen", "setIsOpen", "inputPlaceholder", "inputIconName", "toErrorMessage", "fromErrorMessage", "gutterWidth", "fromLabel", "toLabel", "closeOnSelect", "clearOnClose", "hasHiddenLabel", "ref", "isFromReadOnly", "isToReadOnly", "toTabIndex", "fromTabIndex", "portalOptions", "floatingOptions", "isPortal"]);
+    const { ariaLabel, isDisabled, captionLayout, 
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className, disableBeforeDate: _disableBeforeDate, disableAfterDate: _disableAfterDate, month: _month, id: _id, isPortal: _isPortal, onSelect, selected, isOpen, setIsOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage, gutterWidth, fromLabel, toLabel, closeOnSelect, clearOnClose, hasHiddenLabel, ref, isFromReadOnly, isToReadOnly, toTabIndex, fromTabIndex, portalOptions, floatingOptions, text: textProp } = props, rest = __rest(props, ["ariaLabel", "isDisabled", "captionLayout", "className", "disableBeforeDate", "disableAfterDate", "month", "id", "isPortal", "onSelect", "selected", "isOpen", "setIsOpen", "inputPlaceholder", "inputIconName", "toErrorMessage", "fromErrorMessage", "gutterWidth", "fromLabel", "toLabel", "closeOnSelect", "clearOnClose", "hasHiddenLabel", "ref", "isFromReadOnly", "isToReadOnly", "toTabIndex", "fromTabIndex", "portalOptions", "floatingOptions", "text"]);
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$4), textProp);
     const inputId = useId$1();
     // Hold the input values in state
     const [localTextValueFrom, setLocalTextValueFrom] = useState((selected === null || selected === void 0 ? void 0 : selected.from) ? formatDateAsString$1(selected.from) : '');
@@ -19525,14 +19582,16 @@ function InputDateRangePicker(props) {
             setLocalTextValueTo('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsxs(Row, { gutterWidth: gutterWidth, children: [jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-from`, value: localTextValueFrom, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'from'), errorMessage: fromErrorMessage, label: fromLabel, name: 'From Date', "data-testid": "date-picker-from", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isFromReadOnly, tabIndex: fromTabIndex }) }), jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-to`, value: localTextValueTo, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'to'), errorMessage: toErrorMessage, label: toLabel, name: 'To Date', "data-testid": "date-picker-to", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isToReadOnly, tabIndex: toTabIndex }) })] }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
+    return (jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsxs(Row, { gutterWidth: gutterWidth, children: [jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-from`, value: localTextValueFrom, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'from'), errorMessage: fromErrorMessage, label: fromLabel, name: text.fromDate, "data-testid": "date-picker-from", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isFromReadOnly, tabIndex: fromTabIndex }) }), jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-to`, value: localTextValueTo, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'to'), errorMessage: toErrorMessage, label: toLabel, name: text.toDate, "data-testid": "date-picker-to", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isToReadOnly, tabIndex: toTabIndex }) })] }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
 }
 
 const formatDateAsString = (date) => format(date, 'MM/dd/yyyy');
 
 function SingleInputDateTimePicker(props) {
     var _a;
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, timeValue, onTimeChange, hasHiddenLabel, isReadOnly, timePickerRef, dateTabIndex, timeTabIndex, ref, portalOptions, floatingOptions, isPortal } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "timeValue", "onTimeChange", "hasHiddenLabel", "isReadOnly", "timePickerRef", "dateTabIndex", "timeTabIndex", "ref", "portalOptions", "floatingOptions", "isPortal"]);
+    const { ariaLabel, isDisabled, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, timeValue, onTimeChange, hasHiddenLabel, isReadOnly, timePickerRef, dateTabIndex, timeTabIndex, ref, portalOptions, floatingOptions, isPortal, 
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className, disableBeforeDate: _disableBeforeDate, disableAfterDate: _disableAfterDate } = props, rest = __rest(props, ["ariaLabel", "isDisabled", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "timeValue", "onTimeChange", "hasHiddenLabel", "isReadOnly", "timePickerRef", "dateTabIndex", "timeTabIndex", "ref", "portalOptions", "floatingOptions", "isPortal", "className", "disableBeforeDate", "disableAfterDate"]);
     const inputId = useId$1();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = useState(selected ? formatDateAsString(selected) : '');
@@ -19569,7 +19628,7 @@ function SingleInputDateTimePicker(props) {
     const handleTimeChange = (time) => {
         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
     };
-    return (jsxs(Row, { className: "date-time-picker-row", children: [jsx(Col, { className: "date-picker-col", children: jsxs(FloatUI, { className: "date-picker-float-ui", isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsx(LabeledInput, { ref: ref, className: `date-picker-input`, id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isReadOnly || isDisabled, readonly: isReadOnly, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, hasHiddenLabel: hasHiddenLabel, label: 'Single Date Picker', name: `${id}-date-picker`, tabIndex: dateTabIndex }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth, isReadOnly: isReadOnly }, rest))] }) }), jsx(Col, { xs: "content", className: "time-picker-col", children: jsx(TimePicker, { ref: timePickerRef, className: `time-picker-input`, timeValue: timeValue, name: `${id}-time-picker`, hasHiddenLabel: true, onTimeChange: handleTimeChange, isReadOnly: isReadOnly, isDisabled: isDisabled, tabIndex: timeTabIndex }) })] }));
+    return (jsxs(Row, { className: "date-time-picker-row", children: [jsx(Col, { className: "date-picker-col", children: jsxs(FloatUI, { className: "date-picker-float-ui", isOpen: isOpen, ariaLabel: ariaLabel, isPortal: isPortal, portalOptions: portalOptions, floatingOptions: floatingOptions, children: [jsx(LabeledInput, { ref: ref, className: `date-picker-input`, id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isReadOnly || isDisabled, readonly: isReadOnly, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, hasHiddenLabel: hasHiddenLabel, label: label, name: `${id}-date-picker`, tabIndex: dateTabIndex }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth, isReadOnly: isReadOnly }, rest))] }) }), jsx(Col, { xs: "content", className: "time-picker-col", children: jsx(TimePicker, { ref: timePickerRef, className: `time-picker-input`, timeValue: timeValue, name: `${id}-time-picker`, hasHiddenLabel: true, onTimeChange: handleTimeChange, isReadOnly: isReadOnly, isDisabled: isDisabled, tabIndex: timeTabIndex }) })] }));
 }
 
 const Form = (_a) => {
@@ -21451,32 +21510,42 @@ Modal$2.default = Modal$1;
 var libExports = lib.exports;
 var ReactModal = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
+const DEFAULT_TEXT$3 = {
+    closeButton: 'Close',
+};
 const Modal = (_a) => {
     var { className = '', children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement = document.getElementById('theme-root') ||
         document.getElementById('root') ||
         document.body, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position = 'center', parentSelector = () => document.getElementById('theme-root') || document.getElementById('root'), // default for our apps, storybook needs a different one
-    title, subtitle, footer, maxWidthInPixels } = _a, rest = __rest(_a, ["className", "children", "isOpen", "onRequestClose", "portalClassName", "overlayClassName", "appElement", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "testId", "contentElement", "overlayElement", "position", "parentSelector", "title", "subtitle", "footer", "maxWidthInPixels"]);
+    title, subtitle, footer, maxWidthInPixels, text: textProp } = _a, rest = __rest(_a, ["className", "children", "isOpen", "onRequestClose", "portalClassName", "overlayClassName", "appElement", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "testId", "contentElement", "overlayElement", "position", "parentSelector", "title", "subtitle", "footer", "maxWidthInPixels", "text"]);
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$3), textProp);
     const modalClasses = classNames('modal', `modal--${position}`, className);
     const overlayClasses = classNames('modal-overlay', overlayClassName);
     const hasHeader = title || subtitle;
-    return (jsx(ReactModal, Object.assign({ className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxs("div", { className: "modal-content", style: { maxWidth: `${maxWidthInPixels}px` }, children: [jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "x-close", ariaLabel: "Close" }), hasHeader && (jsx("div", { className: "modal-header", children: jsx(Row, { justify: "between", align: "center", children: jsxs(Col, { children: [title && jsx("h2", { className: "modal-title", children: title }), subtitle && jsx("p", { className: "modal-subtitle", children: subtitle })] }) }) })), jsx("div", { className: "modal-body", children: children }), footer && jsx("div", { className: "modal-footer", children: footer })] }) })));
+    return (jsx(ReactModal, Object.assign({ className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxs("div", { className: "modal-content", style: { maxWidth: `${maxWidthInPixels}px` }, children: [jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "x-close", ariaLabel: text.closeButton }), hasHeader && (jsx("div", { className: "modal-header", children: jsx(Row, { justify: "between", align: "center", children: jsxs(Col, { children: [title && jsx("h2", { className: "modal-title", children: title }), subtitle && jsx("p", { className: "modal-subtitle", children: subtitle })] }) }) })), jsx("div", { className: "modal-body", children: children }), footer && jsx("div", { className: "modal-footer", children: footer })] }) })));
 };
 
-const defaultFooter = ({ onCancelRequest, onConfirmRequest, confirmationButtonText, confirmationButtonVariant, cancelButtonText, hasDontShowAgainCheckbox, isChecked, onDontShowAgainChange, }) => (jsxs(Row, { gutterWidth: 12, justify: "end", align: "center", children: [hasDontShowAgainCheckbox && (jsx(Col, { children: jsx(Checkbox, { label: "Don't display this again.", onChange: (e) => onDontShowAgainChange === null || onDontShowAgainChange === void 0 ? void 0 : onDontShowAgainChange(e.target.checked), isChecked: isChecked, id: "dont-show-again", name: "dont-show-again" }) })), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: onCancelRequest, ariaLabel: cancelButtonText || 'Cancel', variant: "outline", children: cancelButtonText }) }), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: () => onConfirmRequest === null || onConfirmRequest === void 0 ? void 0 : onConfirmRequest({ dontShowAgain: isChecked }), ariaLabel: confirmationButtonText || 'Confirm', variant: confirmationButtonVariant, children: confirmationButtonText }) })] }));
-const ConfirmationModal = ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText = 'Confirm', cancelButtonText = 'Cancel', confirmationButtonVariant = 'solid', icon, title, status = 'info', maxWidthInPixels, hasDontShowAgainCheckbox, }) => {
+const DEFAULT_TEXT$2 = {
+    closeButton: 'Close',
+    dontShowAgain: "Don't display this again.",
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+};
+const defaultFooter = ({ onCancelRequest, onConfirmRequest, text, confirmationButtonVariant, hasDontShowAgainCheckbox, isChecked, onDontShowAgainChange, }) => (jsxs(Row, { gutterWidth: 12, justify: "end", align: "center", children: [hasDontShowAgainCheckbox && (jsx(Col, { children: jsx(Checkbox, { label: text.dontShowAgain, onChange: (e) => onDontShowAgainChange === null || onDontShowAgainChange === void 0 ? void 0 : onDontShowAgainChange(e.target.checked), isChecked: isChecked, id: "dont-show-again", name: "dont-show-again" }) })), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: onCancelRequest, ariaLabel: text.cancel, variant: "outline", children: text.cancel }) }), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: () => onConfirmRequest === null || onConfirmRequest === void 0 ? void 0 : onConfirmRequest({ dontShowAgain: isChecked }), ariaLabel: text.confirm, variant: confirmationButtonVariant, children: text.confirm }) })] }));
+const ConfirmationModal = ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonVariant = 'solid', icon, title, status = 'info', maxWidthInPixels, hasDontShowAgainCheckbox, text: textProp, }) => {
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$2), textProp);
     const [dontShowAgain, setDontShowAgain] = useState(false);
     const modalFooter = footer ||
         defaultFooter({
             onCancelRequest,
             onConfirmRequest,
-            confirmationButtonText,
-            cancelButtonText,
+            text,
             confirmationButtonVariant,
             hasDontShowAgainCheckbox,
             isChecked: dontShowAgain,
             onDontShowAgainChange: setDontShowAgain,
         });
-    return (jsxs(Modal, { className: classNames('confirmation-modal', className), overlayClassName: overlayClassName, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement, footer: modalFooter, maxWidthInPixels: maxWidthInPixels, children: [icon && (jsx(Icon, { name: icon, className: classNames('confirmation-modal-icon', `color-${status}`), size: "xl" })), title && jsx("h2", { className: "confirmation-modal-title", children: title }), children] }));
+    return (jsxs(Modal, { className: classNames('confirmation-modal', className), overlayClassName: overlayClassName, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement, footer: modalFooter, maxWidthInPixels: maxWidthInPixels, text: { closeButton: text.closeButton }, children: [icon && (jsx(Icon, { name: icon, className: classNames('confirmation-modal-icon', `color-${status}`), size: "xl" })), title && jsx("h2", { className: "confirmation-modal-title", children: title }), children] }));
 };
 
 /**
@@ -24570,20 +24639,6 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
-function ActionBar({ table, TableActions, className, children, }) {
-    const selectedItems = table.getRowModel().rows.filter((row) => row.getIsSelected());
-    const unselectRows = () => {
-        table.getRowModel().rows.forEach((row) => {
-            row.toggleSelected(false);
-        });
-    };
-    return (jsx(Card, { className: classNames('tanstack-table__action-bar', className), children: children !== null && children !== void 0 ? children : (jsx("div", { className: "tanstack-table__action-bar__container", children: TableActions && (jsx("div", { className: "tanstack-table__action-bar__button-container", children: jsx(TableActions, { selectedItems: selectedItems, unselectRows: unselectRows }) })) })) }));
-}
-
-function NoResults({ clearFilters, hasFilters, message }) {
-    return (jsxs("div", { className: "tanstack-table__no-results", "data-testid": "tanstack-table-no-results", children: [jsx("p", { className: "tanstack-table__no-results__text", children: message }), hasFilters && (jsx("p", { className: "tanstack-table__no-results__text", children: jsx(Button$1, { ariaLabel: "Reset filters", variant: "link", onClick: clearFilters, children: "Reset filters" }) }))] }));
-}
-
 var lodash = {exports: {}};
 
 /**
@@ -41788,36 +41843,18 @@ lodash.exports;
 
 var lodashExports = lodash.exports;
 
-const TablePagination = ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }) => {
-    const totalPages = Math.ceil(rowCount / rowsPerPage);
-    return (jsx("div", { className: "table__pagination", "data-testid": "tanstack-table-pagination", children: jsxs(Row, { align: "center", justify: "between", children: [jsx(Col, { xs: "content", children: totalEntriesText && (jsx("span", { "data-testid": "table-pagination-total-entries", className: "table__pagination-total-entries", children: totalEntriesText })) }), jsx(Col, { xs: "content", children: jsx(Pagination, { "data-testid": "table-pagination-component", totalPages: totalPages, currentPage: currentPage, onChange: (page) => onChangePage(page) }) })] }) }));
-};
-
-function useTanstackTable({ defaultColumns }) {
-    const columns = useMemo(() => defaultColumns, []);
-    const defaultData = useMemo(() => [], []);
-    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-    const [rowSelection, setRowSelection] = useState({});
-    const [formattedColumns, setFormattedColumns] = useState(columns);
-    // Tracks changes to browser width to allow for updating of column widths
-    useEffect(() => {
-        const handleResize = () => {
-            setWindowWidth(window.innerWidth);
-        };
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    return {
-        columns,
-        defaultData,
-        rowSelection,
-        setRowSelection,
-        windowWidth,
-        formattedColumns,
-        setFormattedColumns,
+function ActionBar({ table, TableActions, className, children, }) {
+    const selectedItems = table.getRowModel().rows.filter((row) => row.getIsSelected());
+    const unselectRows = () => {
+        table.getRowModel().rows.forEach((row) => {
+            row.toggleSelected(false);
+        });
     };
+    return (jsx(Card, { className: classNames('tanstack-table__action-bar', className), children: children !== null && children !== void 0 ? children : (jsx("div", { className: "tanstack-table__action-bar__container", children: TableActions && (jsx("div", { className: "tanstack-table__action-bar__button-container", children: jsx(TableActions, { selectedItems: selectedItems, unselectRows: unselectRows }) })) })) }));
+}
+
+function NoResults({ clearFilters, hasFilters, message, resetFiltersText = 'Reset filters', }) {
+    return (jsxs("div", { className: "tanstack-table__no-results", "data-testid": "tanstack-table-no-results", children: [jsx("p", { className: "tanstack-table__no-results__text", children: message }), hasFilters && (jsx("p", { className: "tanstack-table__no-results__text", children: jsx(Button$1, { ariaLabel: resetFiltersText, variant: "link", onClick: clearFilters, children: resetFiltersText }) }))] }));
 }
 
 // Sets style attributes for pinned columns
@@ -41852,25 +41889,6 @@ const getTdStyles = (column, textAlign, hasDefinedColumnSize, width) => {
     return styles;
 };
 
-const TableHeader = forwardRef(({ table }, ref) => {
-    const getStyles = (column, header) => {
-        var _a, _b, _c, _d, _e, _f;
-        return Object.assign(Object.assign({}, getThStyles(column)), (((_c = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.textAlign)
-            ? { textAlign: (_f = (_e = (_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.styles) === null || _e === void 0 ? void 0 : _e.header) === null || _f === void 0 ? void 0 : _f.textAlign }
-            : {}));
-    };
-    return (jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsx("tr", { children: headerGroup.headers.map((header) => {
-                var _a, _b, _c;
-                const { column } = header;
-                return (jsx("th", { className: classNames('tanstack-table__thead__th', {
-                        'pa-0': !!((_c = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.hasNoPadding),
-                    }), ref: (el) => {
-                        if (el)
-                            ref.current[column.id] = el;
-                    }, colSpan: header.colSpan, style: Object.assign({}, getStyles(column, header)), children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-            }) }, headerGroup.id))) }));
-});
-
 const TableBody = ({ table, onRowClick, activeRows }) => {
     return (jsx(Fragment, { children: table.getRowModel().rows.map((row) => (jsx("tr", { className: classNames('tanstack-table__tbody__tr', {
                 'is-selected': row.getIsSelected(),
@@ -41891,6 +41909,25 @@ const TableBody = ({ table, onRowClick, activeRows }) => {
             }) }, row.id))) }));
 };
 
+const TableHeader = forwardRef(({ table }, ref) => {
+    const getStyles = (column, header) => {
+        var _a, _b, _c, _d, _e, _f;
+        return Object.assign(Object.assign({}, getThStyles(column)), (((_c = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.textAlign)
+            ? { textAlign: (_f = (_e = (_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.styles) === null || _e === void 0 ? void 0 : _e.header) === null || _f === void 0 ? void 0 : _f.textAlign }
+            : {}));
+    };
+    return (jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsx("tr", { children: headerGroup.headers.map((header) => {
+                var _a, _b, _c;
+                const { column } = header;
+                return (jsx("th", { className: classNames('tanstack-table__thead__th', {
+                        'pa-0': !!((_c = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.hasNoPadding),
+                    }), ref: (el) => {
+                        if (el)
+                            ref.current[column.id] = el;
+                    }, colSpan: header.colSpan, style: Object.assign({}, getStyles(column, header)), children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+            }) }, headerGroup.id))) }));
+});
+
 function CirclePulse(_a) {
     var { size = 'md', className } = _a, rest = __rest(_a, ["size", "className"]);
     return (jsx("div", Object.assign({ className: `circle-pulse circle-pulse-${size} ${className}`, "aria-hidden": true }, rest)));
@@ -41900,8 +41937,50 @@ const TableLoading = ({ columns, message }) => {
     return (jsx("tr", { className: "tanstack-table__tbody__tr ", children: jsxs("td", { className: "tanstack-table__centered-row pa-6", colSpan: columns.length, children: [jsx("h2", { className: "my-12", children: message }), jsx(CirclePulse, { "data-testid": "loading-indicator", className: "mb-14" })] }) }));
 };
 
+const TablePagination = ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, text, }) => {
+    const totalPages = Math.ceil(rowCount / rowsPerPage);
+    return (jsx("div", { className: "table__pagination", "data-testid": "tanstack-table-pagination", children: jsxs(Row, { align: "center", justify: "between", children: [jsx(Col, { xs: "content", children: totalEntriesText && (jsx("span", { "data-testid": "table-pagination-total-entries", className: "table__pagination-total-entries", children: totalEntriesText })) }), jsx(Col, { xs: "content", children: jsx(Pagination, { "data-testid": "table-pagination-component", totalPages: totalPages, currentPage: currentPage, onChange: (page) => onChangePage(page), text: text }) })] }) }));
+};
+
+function useTanstackTable({ defaultColumns }) {
+    const columns = useMemo(() => defaultColumns, []);
+    const defaultData = useMemo(() => [], []);
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+    const [rowSelection, setRowSelection] = useState({});
+    const [formattedColumns, setFormattedColumns] = useState(columns);
+    // Tracks changes to browser width to allow for updating of column widths
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowWidth(window.innerWidth);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return {
+        columns,
+        defaultData,
+        rowSelection,
+        setRowSelection,
+        windowWidth,
+        formattedColumns,
+        setFormattedColumns,
+    };
+}
+
+const DEFAULT_TEXT$1 = {
+    loading: 'Table is loading...',
+    noResults: 'No results found.',
+    error: 'There was an error loading the data.',
+    resetFilters: 'Reset filters',
+    entry: 'entry',
+    entries: 'entries',
+    of: 'of',
+};
 function TanstackTable(_a) {
-    var { columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, isLoadingMessage = 'Table is loading...', defaultPinnedColumns, onRowClick, activeRows = [], isStriped = true, actionBarClassName, defaultSorting } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "isLoadingMessage", "defaultPinnedColumns", "onRowClick", "activeRows", "isStriped", "actionBarClassName", "defaultSorting"]);
+    var { columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, defaultPinnedColumns, onRowClick, activeRows = [], isStriped = true, actionBarClassName, defaultSorting, text: textProp } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "defaultPinnedColumns", "onRowClick", "activeRows", "isStriped", "actionBarClassName", "defaultSorting", "text"]);
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT$1), textProp);
     const { columns, defaultData, windowWidth, rowSelection, // This refers to the checkboxes.
     setRowSelection, formattedColumns, setFormattedColumns, } = useTanstackTable({
         defaultColumns,
@@ -41940,20 +42019,18 @@ function TanstackTable(_a) {
     const renderBody = () => {
         var _a;
         if (hasErrorAndIsNotLoading || hasNoResults) {
-            return (jsx("tr", { className: "tanstack-table__tbody__tr", children: jsx("td", { className: "tanstack-table__centered-row", colSpan: columns.length, children: jsx(NoResults, { clearFilters: clearFilters, hasFilters: hasFilters, message: hasErrorAndIsNotLoading
-                            ? (_a = error === null || error === void 0 ? void 0 : error.errorMessage) !== null && _a !== void 0 ? _a : 'There was an error isLoading the data.'
-                            : 'No results found.' }) }) }));
+            return (jsx("tr", { className: "tanstack-table__tbody__tr", children: jsx("td", { className: "tanstack-table__centered-row", colSpan: columns.length, children: jsx(NoResults, { clearFilters: clearFilters, hasFilters: hasFilters, resetFiltersText: text.resetFilters, message: hasErrorAndIsNotLoading ? (_a = error === null || error === void 0 ? void 0 : error.errorMessage) !== null && _a !== void 0 ? _a : text.error : text.noResults }) }) }));
         }
         if (isLoading) {
-            return jsx(TableLoading, { columns: columns, message: isLoadingMessage });
+            return jsx(TableLoading, { columns: columns, message: text.loading });
         }
         return (jsx(TableBody, { table: table, onRowClick: onRowClick, activeRows: activeRows }));
     };
     return (jsxs("div", { className: "tanstack-table__outer-container", children: [jsxs("div", { className: "tanstack-table__container", children: [jsxs("table", { className: classNames('tanstack-table', className, {
                             'is-striped': isStriped,
-                        }), children: [jsx("thead", { className: "tanstack-table__thead", children: jsx(TableHeader, { table: table, ref: thRefs }) }), jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: (totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : rowCount === 1)
-                    ? '1 entry'
-                    : `${totalRowsOnPage} of ${rowCount} entries` })) : null] }));
+                        }), children: [jsx("thead", { className: "tanstack-table__thead", children: jsx(TableHeader, { table: table, ref: thRefs }) }), jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : (rowCount === 1
+                    ? `1 ${text.entry}`
+                    : `${totalRowsOnPage} ${text.of} ${rowCount} ${text.entries}`), text: { of: text.of } })) : null] }));
 }
 
 /**
@@ -43482,6 +43559,10 @@ function BarSpinner(_a) {
     return (jsx("div", Object.assign({ className: `bar-spinner ${className}`, id: id, style: style }, rest, { children: jsx("span", {}) })));
 }
 
+const BackNavigation = ({ isDisabled, onBackClick, label }) => {
+    return (jsx("div", { className: "stepper-navigation-back", children: jsx(Button$1, { "data-testid": "stepper-back-button", ariaLabel: label, iconLeft: "fa-arrow-left", onClick: onBackClick, variant: "outline", isDisabled: isDisabled, children: label }) }));
+};
+
 const Legend = ({ currentStep, steps, onStepClick }) => {
     const totalSteps = (steps === null || steps === void 0 ? void 0 : steps.length) || 0;
     return (jsx("div", { className: "stepper-legend", children: steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
@@ -43501,15 +43582,17 @@ const Legend = ({ currentStep, steps, onStepClick }) => {
         }) }));
 };
 
-const BackNavigation = ({ isDisabled, onBackClick }) => {
-    return (jsx("div", { className: "stepper-navigation-back", children: jsx(Button$1, { "data-testid": "stepper-back-button", ariaLabel: "Previous Step", iconLeft: "fa-arrow-left", onClick: onBackClick, variant: "outline", isDisabled: isDisabled, children: "Previous Step" }) }));
+const NextNavigation = ({ isLastStep, onNextClick, onFinishClick, isDisabled, nextLabel, finishLabel, }) => {
+    return (jsx("div", { className: "stepper-navigation", children: !isLastStep ? (jsx("div", { className: "stepper-navigation-next", children: jsx(Button$1, { "data-testid": "stepper-next-button", iconRight: "fa-arrow-right", ariaLabel: nextLabel, onClick: onNextClick, isDisabled: isDisabled, children: nextLabel }) })) : (jsx("div", { className: "stepper-navigation-finish", children: jsx(Button$1, { "data-testid": "stepper-finish-button", ariaLabel: finishLabel, onClick: onFinishClick, isDisabled: isDisabled, children: finishLabel }) })) }));
 };
 
-const NextNavigation = ({ isLastStep, onNextClick, onFinishClick, isDisabled }) => {
-    return (jsx("div", { className: "stepper-navigation", children: !isLastStep ? (jsx("div", { className: "stepper-navigation-next", children: jsx(Button$1, { "data-testid": "stepper-next-button", iconRight: "fa-arrow-right", ariaLabel: "Next Step", onClick: onNextClick, isDisabled: isDisabled, children: "Next Step" }) })) : (jsx("div", { className: "stepper-navigation-finish", children: jsx(Button$1, { "data-testid": "stepper-finish-button", ariaLabel: "Finish", onClick: onFinishClick, isDisabled: isDisabled, children: "Finish" }) })) }));
+const DEFAULT_TEXT = {
+    previousStep: 'Previous Step',
+    nextStep: 'Next Step',
+    finish: 'Finish',
 };
-
-const Stepper = ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, }) => {
+const Stepper = ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, text: textProp, }) => {
+    const text = Object.assign(Object.assign({}, DEFAULT_TEXT), textProp);
     const [internalCurrentStep, setInternalCurrentStep] = useState(0);
     const currentStep = externalCurrentStep !== undefined ? externalCurrentStep : internalCurrentStep;
     // Convert children to array to access by index
@@ -43545,7 +43628,7 @@ const Stepper = ({ currentStep: externalCurrentStep, legendHeader, legendFooter,
     const disableNextButton = (step) => {
         return steps[step].isOptional || !steps[step].isCompleted;
     };
-    return (jsxs("div", { className: "stepper", children: [jsxs("div", { className: "legend", children: [jsx("div", { className: "legend-header", children: legendHeader }), jsx("div", { className: "legend-body", children: jsx(Legend, { currentStep: currentStep, steps: steps, onStepClick: handleStepClick }) }), jsx("div", { className: "legend-footer", children: legendFooter })] }), jsxs("div", { className: "stepper-body", children: [jsx("div", { className: "stepper-content", children: jsx("div", { className: "stepper-steps", children: childrenArray[currentStep] }) }), jsxs("div", { className: "stepper-actions", children: [jsx(BackNavigation, { isDisabled: isFirstStep, onBackClick: handleBackClick }), jsx(NextNavigation, { isLastStep: isLastStep, onNextClick: handleNextClick, onFinishClick: handleFinishClick, isDisabled: disableNextButton(currentStep) })] })] })] }));
+    return (jsxs("div", { className: "stepper", children: [jsxs("div", { className: "legend", children: [jsx("div", { className: "legend-header", children: legendHeader }), jsx("div", { className: "legend-body", children: jsx(Legend, { currentStep: currentStep, steps: steps, onStepClick: handleStepClick }) }), jsx("div", { className: "legend-footer", children: legendFooter })] }), jsxs("div", { className: "stepper-body", children: [jsx("div", { className: "stepper-content", children: jsx("div", { className: "stepper-steps", children: childrenArray[currentStep] }) }), jsxs("div", { className: "stepper-actions", children: [jsx(BackNavigation, { isDisabled: isFirstStep, onBackClick: handleBackClick, label: text.previousStep }), jsx(NextNavigation, { isLastStep: isLastStep, onNextClick: handleNextClick, onFinishClick: handleFinishClick, isDisabled: disableNextButton(currentStep), nextLabel: text.nextStep, finishLabel: text.finish })] })] })] }));
 };
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore