@indico-data/design-system 3.14.1 → 3.16.0

package/lib/components/button/enums.d.ts

@@ -1,3 +1,3 @@
 export type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
-export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonTypes = 'button' | 'submit' | 'reset';

package/lib/components/button/types.d.ts

@@ -1,6 +1,6 @@
 import { IconName } from '../../types';
 export type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
-export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonTypes = 'button' | 'submit' | 'reset';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**

package/lib/components/icons/types.d.ts

@@ -2,7 +2,7 @@ import { MouseEventHandler, CSSProperties } from 'react';
 import { PermafrostComponent } from '../../types';
 import { IconName as FAIconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
 import { indicons } from './indicons';
-export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type IconSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 export type IndiconName = keyof typeof indicons;
 export type IconName = IndiconName | `fa-${FAIconName}`;
 export type IconProps = PermafrostComponent & {

package/lib/index.css

@@ -290,9 +290,10 @@
 }
 
 :root {
-  --pf-icon-size-xs: 10px;
-  --pf-icon-size-sm: 12px;
-  --pf-icon-size-md: 16px;
+  --pf-icon-size-xxs: 10px;
+  --pf-icon-size-xs: 12px;
+  --pf-icon-size-sm: 16px;
+  --pf-icon-size-md: 20px;
   --pf-icon-size-lg: 24px;
   --pf-icon-size-xl: 32px;
   --pf-icon-size-2xl: 48px;
@@ -4489,15 +4490,7 @@ a:hover,
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
-  --pf-button-font-weight: var(--pf-font-weight-regular);
-  --pf-button-font-size-xs: calc(0.875 * var(--pf-font-size-base));
-  --pf-button-font-size-sm: calc(0.875 * var(--pf-font-size-base));
-  --pf-button-font-size-md: calc(0.875 * var(--pf-font-size-base));
-  --pf-button-font-size-lg: var(--pf-font-size-base);
-  --pf-button-line-height-xs: var(--pf-line-height-md);
-  --pf-button-line-height-sm: var(--pf-line-height-md);
-  --pf-button-line-height-md: var(--pf-line-height-md);
-  --pf-button-line-height-lg: var(--pf-line-height-lg);
+  --pf-button-font-weight: var(--pf-font-weight-medium);
   --pf-button-border-radius: var(--pf-border-radius-md);
   --pf-button-pill-border-radius: 100px;
   --pf-button-focus-box-shadow: var(--pf-focus-box-shadow-alignment) rgba(25, 139, 220, 0.25);
@@ -4595,6 +4588,7 @@ a:hover,
   border-color: transparent;
   border-radius: var(--pf-button-border-radius);
   font-weight: var(--pf-button-font-weight);
+  gap: 0;
   cursor: pointer;
 }
 .btn:disabled {
@@ -4602,27 +4596,33 @@ a:hover,
 }
 
 .btn--xs {
-  line-height: var(--pf-button-line-height-xs);
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
-  font-size: var(--pf-button-font-size-xs);
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
+  font-size: var(--pf-font-size-sm);
+  gap: var(--pf-spacing-xs);
 }
 
 .btn--sm {
-  line-height: var(--pf-button-line-height-sm);
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
-  font-size: var(--pf-button-font-size-sm);
+  padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
+  font-size: var(--pf-font-size-md);
+  gap: var(--pf-spacing-xs);
 }
 
 .btn--md {
-  line-height: var(--pf-button-line-height-md);
-  padding: var(--pf-spacing-sm) var(--pf-spacing-lg);
-  font-size: var(--pf-button-font-size-md);
+  padding: var(--pf-spacing-sm) var(--pf-spacing-2xl);
+  font-size: var(--pf-font-size-base);
+  gap: var(--pf-spacing-md);
 }
 
 .btn--lg {
-  line-height: var(--pf-button-line-height-lg);
-  padding: var(--pf-spacing-sm) var(--pf-spacing-2xl);
-  font-size: var(--pf-button-font-size-lg);
+  padding: var(--pf-spacing-md) var(--pf-spacing-2xl);
+  font-size: var(--pf-font-size-2xl);
+  gap: var(--pf-spacing-md);
+}
+
+.btn--xl {
+  padding: var(--pf-spacing-lg) var(--pf-spacing-3xl);
+  font-size: var(--pf-font-size-3xl);
+  gap: var(--pf-spacing-md);
 }
 
 .btn--icon-only {
@@ -4755,6 +4755,11 @@ a:hover,
 .icon {
   display: inline-block;
 }
+.icon--xxs {
+  width: var(--pf-icon-size-xxs);
+  height: var(--pf-icon-size-xxs);
+  font-size: var(--pf-icon-size-xxs);
+}
 .icon--xs {
   width: var(--pf-icon-size-xs);
   height: var(--pf-icon-size-xs);
@@ -5014,13 +5019,15 @@ a:hover,
 }
 .input-wrapper .embedded-icon {
   position: absolute;
-  top: 10px;
+  top: 50%;
+  transform: translateY(-50%);
   left: var(--pf-spacing-sm);
   color: var(--pf-semantic-font-regular);
 }
 .input-wrapper .clearable-icon {
   position: absolute;
-  top: var(--pf-spacing-lg);
+  top: 50%;
+  transform: translateY(-50%);
   right: var(--pf-spacing-sm);
   color: var(--pf-semantic-font-regular);
   cursor: pointer;
@@ -5716,8 +5723,8 @@ body div[class*=select__single-value] {
   width: 100%;
   background: var(--pf-semantic-background-secondary);
   color: var(--pf-semantic-font-regular);
-  display: block;
-  width: 100%;
+  display: flex;
+  justify-content: flex-start;
   text-align: left;
   border: none;
   border-radius: 0;

package/lib/index.d.ts

@@ -177,7 +177,7 @@ declare const indicons: {
     'zoom-out': react_jsx_runtime.JSX.Element;
 };
 
-type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+type IconSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 type IndiconName = keyof typeof indicons;
 type IconName = IndiconName | `fa-${IconName$1}`;
 type IconProps = PermafrostComponent & {
@@ -258,7 +258,7 @@ type PermafrostComponent = {
 type ChromaticColor = 'blue' | 'purple' | 'red' | 'yellow' | 'gray' | 'green' | 'pink' | 'orange' | 'teal';
 
 type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
-type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ButtonTypes = 'button' | 'submit' | 'reset';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**

package/lib/index.esm.css

@@ -290,9 +290,10 @@
 }
 
 :root {
-  --pf-icon-size-xs: 10px;
-  --pf-icon-size-sm: 12px;
-  --pf-icon-size-md: 16px;
+  --pf-icon-size-xxs: 10px;
+  --pf-icon-size-xs: 12px;
+  --pf-icon-size-sm: 16px;
+  --pf-icon-size-md: 20px;
   --pf-icon-size-lg: 24px;
   --pf-icon-size-xl: 32px;
   --pf-icon-size-2xl: 48px;
@@ -4489,15 +4490,7 @@ a:hover,
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
-  --pf-button-font-weight: var(--pf-font-weight-regular);
-  --pf-button-font-size-xs: calc(0.875 * var(--pf-font-size-base));
-  --pf-button-font-size-sm: calc(0.875 * var(--pf-font-size-base));
-  --pf-button-font-size-md: calc(0.875 * var(--pf-font-size-base));
-  --pf-button-font-size-lg: var(--pf-font-size-base);
-  --pf-button-line-height-xs: var(--pf-line-height-md);
-  --pf-button-line-height-sm: var(--pf-line-height-md);
-  --pf-button-line-height-md: var(--pf-line-height-md);
-  --pf-button-line-height-lg: var(--pf-line-height-lg);
+  --pf-button-font-weight: var(--pf-font-weight-medium);
   --pf-button-border-radius: var(--pf-border-radius-md);
   --pf-button-pill-border-radius: 100px;
   --pf-button-focus-box-shadow: var(--pf-focus-box-shadow-alignment) rgba(25, 139, 220, 0.25);
@@ -4595,6 +4588,7 @@ a:hover,
   border-color: transparent;
   border-radius: var(--pf-button-border-radius);
   font-weight: var(--pf-button-font-weight);
+  gap: 0;
   cursor: pointer;
 }
 .btn:disabled {
@@ -4602,27 +4596,33 @@ a:hover,
 }
 
 .btn--xs {
-  line-height: var(--pf-button-line-height-xs);
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
-  font-size: var(--pf-button-font-size-xs);
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
+  font-size: var(--pf-font-size-sm);
+  gap: var(--pf-spacing-xs);
 }
 
 .btn--sm {
-  line-height: var(--pf-button-line-height-sm);
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
-  font-size: var(--pf-button-font-size-sm);
+  padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
+  font-size: var(--pf-font-size-md);
+  gap: var(--pf-spacing-xs);
 }
 
 .btn--md {
-  line-height: var(--pf-button-line-height-md);
-  padding: var(--pf-spacing-sm) var(--pf-spacing-lg);
-  font-size: var(--pf-button-font-size-md);
+  padding: var(--pf-spacing-sm) var(--pf-spacing-2xl);
+  font-size: var(--pf-font-size-base);
+  gap: var(--pf-spacing-md);
 }
 
 .btn--lg {
-  line-height: var(--pf-button-line-height-lg);
-  padding: var(--pf-spacing-sm) var(--pf-spacing-2xl);
-  font-size: var(--pf-button-font-size-lg);
+  padding: var(--pf-spacing-md) var(--pf-spacing-2xl);
+  font-size: var(--pf-font-size-2xl);
+  gap: var(--pf-spacing-md);
+}
+
+.btn--xl {
+  padding: var(--pf-spacing-lg) var(--pf-spacing-3xl);
+  font-size: var(--pf-font-size-3xl);
+  gap: var(--pf-spacing-md);
 }
 
 .btn--icon-only {
@@ -4755,6 +4755,11 @@ a:hover,
 .icon {
   display: inline-block;
 }
+.icon--xxs {
+  width: var(--pf-icon-size-xxs);
+  height: var(--pf-icon-size-xxs);
+  font-size: var(--pf-icon-size-xxs);
+}
 .icon--xs {
   width: var(--pf-icon-size-xs);
   height: var(--pf-icon-size-xs);
@@ -5014,13 +5019,15 @@ a:hover,
 }
 .input-wrapper .embedded-icon {
   position: absolute;
-  top: 10px;
+  top: 50%;
+  transform: translateY(-50%);
   left: var(--pf-spacing-sm);
   color: var(--pf-semantic-font-regular);
 }
 .input-wrapper .clearable-icon {
   position: absolute;
-  top: var(--pf-spacing-lg);
+  top: 50%;
+  transform: translateY(-50%);
   right: var(--pf-spacing-sm);
   color: var(--pf-semantic-font-regular);
   cursor: pointer;
@@ -5716,8 +5723,8 @@ body div[class*=select__single-value] {
   width: 100%;
   background: var(--pf-semantic-background-secondary);
   color: var(--pf-semantic-font-regular);
-  display: block;
-  width: 100%;
+  display: flex;
+  justify-content: flex-start;
   text-align: left;
   border: none;
   border-radius: 0;

package/lib/index.esm.js

@@ -5050,12 +5050,31 @@ const Button$1 = forwardRef((props, ref) => {
         'btn--loading': isLoading,
         'btn--pill': isPill,
     }, className);
+    // Map button size to icon size
+    // xs → xs (12px), sm → sm (16px), md → md (20px), lg → md (20px), xl → lg (24px)
+    const getIconSize = (buttonSize) => {
+        switch (buttonSize) {
+            case 'xs':
+                return 'xs';
+            case 'sm':
+                return 'sm';
+            case 'md':
+                return 'md'; // md buttons use md icons (20px)
+            case 'lg':
+                return 'md'; // lg buttons use md icons (20px)
+            case 'xl':
+                return 'lg'; // xl buttons use lg icons (24px)
+            default:
+                return 'md';
+        }
+    };
+    const iconSize = getIconSize(size);
     const handleOnClick = (event) => {
         if (!isLoading && onClick) {
             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' }, className: children ? 'mr-2' : '', ariaLabel: "Loading...", size: size })), iconLeft && !isLoading && (jsx(Icon, { name: iconLeft, className: children ? 'mr-2' : '', ariaLabel: `${iconLeft} Icon`, size: size })), children, iconRight && !isLoading && (jsx(Icon, { name: iconRight, className: children ? 'ml-2' : '', ariaLabel: `${iconRight} Icon`, size: size })), isLoading && iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, className: children ? 'ml-2' : '', ariaLabel: "Loading...", size: size }))] })));
+    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 }))] })));
 });
 
 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`
@@ -5477,7 +5496,7 @@ const Input = React__default.forwardRef((_a, ref) => {
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, tabIndex: tabIndex, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, readOnly: readonly, onChange: onChange, onBlur: onBlur, maxLength: maxLength, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { "data-testid": `${name}-error`, message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon", size: "sm" })), jsx("input", Object.assign({ ref: ref, tabIndex: tabIndex, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, readOnly: readonly, onChange: onChange, onBlur: onBlur, maxLength: maxLength, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "xs", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { "data-testid": `${name}-error`, message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledInput = withLabel(Input);
 
@@ -5516,7 +5535,7 @@ 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", 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: "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', {
                                     'has-error': hasError,
                                 }), value: totalPages === 0 ? '0' : inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
                                     if (e.key === 'Enter') {
@@ -5528,7 +5547,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 }) }) })] }) }) })));
+                                }, 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" }) }) })] }) }) })));
 };
 
 const TablePagination$1 = ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }) => {
@@ -5807,7 +5826,7 @@ const PasswordInput = React__default.forwardRef((_a, ref) => {
     const inputClasses = classNames('password-input', {
         error: hasErrors,
     }, 'password-input--has-icon');
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon", size: "sm" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "sm", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledPasswordInput = withLabel(PasswordInput);
 
@@ -13827,6 +13846,7 @@ const defaultOptions$1 = {
     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, }) {
+    var _a;
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     // Determine whether the component is controlled or uncontrolled
     const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
@@ -13842,11 +13862,12 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
     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);
         }, elements: {
-            reference: referenceElementRef.current,
+            reference: referenceElement,
         } }));
     // Can't call hooks conditionally so this enabled option is needed.
     const click = useClick(context, { enabled: !hover });
@@ -43468,7 +43489,7 @@ const Legend = ({ currentStep, steps, onStepClick }) => {
             return (jsxs("div", { children: [jsxs(Row, { nogutter: true, align: "center", children: [jsx(Col, { xs: "content", children: jsx("div", { className: classNames('stepper-legend-circle', {
                                         completed: isCompleted,
                                         current: isCurrent,
-                                    }), children: isCompleted ? jsx(Icon, { name: "check" }) : index + 1 }) }), jsx(Col, { children: jsx("div", { className: classNames('stepper-legend-step', {
+                                    }), children: isCompleted ? jsx(Icon, { name: "check", size: "sm" }) : index + 1 }) }), jsx(Col, { children: jsx("div", { className: classNames('stepper-legend-step', {
                                         'stepper-legend-step--current-step': isCurrent,
                                         'stepper-legend-step--completed-step': isCompleted,
                                         'stepper-legend-step--disabled-step': !isSidebarEnabled,