npm - @bcgov/design-system-react-components - Versions diffs - 0.8.1-pr887 → 0.8.1-pr889 - Mend

@bcgov/design-system-react-components 0.8.1-pr887 → 0.8.1-pr889

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/cjs/index.cjs CHANGED Viewed

@@ -30463,7 +30463,7 @@ function AccordionGroup({ title, titleElement, children, ...props }) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-DisclosureGroup--Title", children: getTitle() })), jsxRuntime.jsx($a3e16eab0ea4036c$export$944aceb4f8c89f10, { className: "bcds-react-aria-DisclosureGroup", ...props, children: children })] }));
 }
-var css_248z$A = ".bcds-Alert-Banner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n}\n\n.bcds-Alert-Banner--Container {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-padding-medium);\n}\n\n.bcds-Alert-Banner--Icon {\n  place-self: first baseline flex-start;\n  padding-top: var(--layout-padding-xsmall);\n  color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--Content {\n  display: inline-flex;\n  gap: var(--layout-margin-medium);\n  align-items: first baseline;\n  flex-grow: 1;\n  flex-wrap: wrap;\n  color: var(--typography-color-primary-invert);\n}\n\n/* Layout */\n.bcds-Alert-Banner.fixed {\n  padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n.bcds-Alert-Banner.fixed > .bcds-Alert-Banner--Container {\n  max-width: 1100px;\n}\n.bcds-Alert-Banner.fluid {\n  padding: var(--layout-padding-none) var(--layout-padding-large);\n}\n\n/* Sizing */\n.bcds-Alert-Banner.small > .bcds-Alert-Banner--Container {\n  padding: var(--layout-padding-hair) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.small .bcds-Alert-Banner--Content {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-Alert-Banner.medium > .bcds-Alert-Banner--Container {\n  padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.medium .bcds-Alert-Banner--Content {\n  font: var(--typography-regular-body);\n}\n\n/* Close icon */\n.bcds-Alert-Banner--closeIcon {\n  align-self: first baseline;\n}\n\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\n  color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary-invert);\n}\n\n/* Variants */\n\n/* Info theme */\n.bcds-Alert-Banner.info {\n  background-color: var(--surface-color-background-dark-blue);\n}\n\n/* Success theme */\n.bcds-Alert-Banner.success {\n  background-color: var(--support-border-color-success);\n}\n\n/* Warning theme */\n.bcds-Alert-Banner.warning {\n  background-color: var(--support-border-color-warning);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\n  color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\n  color: var(--typography-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary);\n}\n\n/* Danger theme */\n.bcds-Alert-Banner.danger {\n  background-color: var(--support-border-color-danger);\n}\n\n/* Black theme */\n\n.bcds-Alert-Banner.black {\n  background-color: var(--theme-gray-110);\n}\n";
+var css_248z$A = ".bcds-Alert-Banner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n}\n\n.bcds-Alert-Banner--Container {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-padding-medium);\n}\n\n.bcds-Alert-Banner--Icon {\n  place-self: first baseline flex-start;\n  padding-top: var(--layout-padding-xsmall);\n  color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--Content {\n  display: inline-flex;\n  gap: var(--layout-margin-medium);\n  align-items: first baseline;\n  flex-grow: 1;\n  flex-wrap: wrap;\n  color: var(--typography-color-primary-invert);\n}\n\n/* Layout */\n.bcds-Alert-Banner.fixed {\n  padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n.bcds-Alert-Banner.fixed > .bcds-Alert-Banner--Container {\n  max-width: 1100px;\n}\n.bcds-Alert-Banner.fluid {\n  padding: var(--layout-padding-none) var(--layout-padding-large);\n}\n\n/* Sizing */\n.bcds-Alert-Banner.small > .bcds-Alert-Banner--Container {\n  padding: var(--layout-padding-hair) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.small .bcds-Alert-Banner--Content {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-Alert-Banner.medium > .bcds-Alert-Banner--Container {\n  padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.medium .bcds-Alert-Banner--Content {\n  font: var(--typography-regular-body);\n}\n\n/* Close icon */\n.bcds-Alert-Banner--closeIcon {\n  align-self: first baseline;\n}\n\n.bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\n  color: var(--icons-color-primary);\n}\n\n/* Variants */\n\n/* Info theme */\n.bcds-Alert-Banner.info {\n  background-color: var(--surface-color-background-dark-blue);\n}\n\n/* Success theme */\n.bcds-Alert-Banner.success {\n  background-color: var(--support-border-color-success);\n}\n\n/* Warning theme */\n.bcds-Alert-Banner.warning {\n  background-color: var(--support-border-color-warning);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\n  color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\n  color: var(--typography-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary);\n}\n\n/* Danger theme */\n.bcds-Alert-Banner.danger {\n  background-color: var(--support-border-color-danger);\n}\n\n/* Black theme */\n\n.bcds-Alert-Banner.black {\n  background-color: var(--theme-gray-110);\n}\n";
 styleInject(css_248z$A);
 function SvgCheckCircleIcon({ size = "medium", title, id, ...props }) {
@@ -30529,7 +30529,7 @@ function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabe
     return (jsxRuntime.jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
 }
-var css_248z$y = ".bcds-react-aria-AlertDialog {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Variant icons */\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-primary);\n}\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-success);\n}\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-warning);\n}\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n\n.bcds-react-aria-AlertDialog--Header {\n  display: inline-flex;\n  flex-direction: row;\n  gap: var(--layout-padding-small);\n  justify-content: space-between;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n  flex-grow: 1;\n  font: var(--typography-bold-h5);\n  color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n  place-self: center flex-start;\n  padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n  justify-self: flex-end;\n  color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--children {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
+var css_248z$y = ".bcds-react-aria-AlertDialog {\n  display: flex;\n  flex-direction: column;\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n  place-self: center flex-start;\n  padding-top: var(--layout-padding-xsmall);\n}\n\n/* Variant icons */\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-primary);\n}\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-success);\n}\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-warning);\n}\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n\n.bcds-react-aria-AlertDialog--Header {\n  display: inline-flex;\n  flex-direction: row;\n  gap: var(--layout-padding-small);\n  justify-content: space-between;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n  flex-grow: 1;\n  font: var(--typography-bold-h5);\n  color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n  justify-self: flex-end;\n  color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--children {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
 styleInject(css_248z$y);
 /* Sets correct left icon for selected variant */
@@ -31626,7 +31626,7 @@ function SvgDashIcon({ title, id, ...props }) {
     return (jsxRuntime.jsxs("svg", { id: id, width: "8", height: "10", viewBox: "0 0 8 2", xmlns: "http://www.w3.org/2000/svg", role: isMeaningful ? "img" : undefined, "aria-labelledby": isMeaningful ? titleId : undefined, "aria-hidden": isMeaningful ? undefined : true, focusable: "false", ...props, children: [title && jsxRuntime.jsx("title", { id: titleId, children: title }), jsxRuntime.jsx("path", { d: "M6.99005 1.96004H1.01005C0.479855 1.96004 0.0500488 1.53023 0.0500488 1.00004C0.0500488 0.469846 0.479855 0.0400391 1.01005 0.0400391H6.99005C7.52024 0.0400391 7.95005 0.469846 7.95005 1.00004C7.95005 1.53023 7.52024 1.96004 6.99005 1.96004H6.99005Z", fill: "currentColor" })] }));
 }
-var css_248z$u = ".bcds-react-aria-Checkbox {\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n}\n\n/* Checkbox */\n.bcds-react-aria-Checkbox > .checkbox {\n  align-self: first baseline;\n  display: flex;\n  margin-top: var(--layout-margin-hair);\n  justify-content: space-around;\n  width: var(--icons-size-small);\n  height: var(--icons-size-small);\n  min-width: var(--icons-size-small);\n  background-color: var(--surface-color-secondary-default);\n  border-color: var(--surface-color-border-medium);\n  border-style: solid;\n  border-width: var(--layout-border-width-small);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Checkbox > .checkbox > svg {\n  align-self: center;\n}\n\n/* Label */\n.bcds-react-aria-Checkbox > .label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Focus */\n.bcds-react-aria-Checkbox[data-focus-visible] > .checkbox {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Hover */\n.bcds-react-aria-Checkbox[data-hovered] > .checkbox {\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Checkbox[data-selected][data-hovered] > .checkbox {\n  background-color: var(--surface-color-primary-hover);\n  border-color: var(--surface-color-primary-hover);\n}\n\n/* Pressed */\n.bcds-react-aria-Checkbox[data-pressed] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n}\n\n/* Selected */\n.bcds-react-aria-Checkbox[data-selected] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n  border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-selected] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n}\n\n/* Disabled */\n.bcds-react-aria-Checkbox[data-disabled] {\n  cursor: not-allowed;\n}\n.bcds-react-aria-Checkbox[data-disabled] > .checkbox {\n  border-color: var(--surface-color-border-medium);\n  background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-disabled] > .label {\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox {\n  border-color: var(--surface-color-primary-disabled);\n  background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox > svg {\n  color: var(--icons-color-disabled);\n}\n\n/* Indeterminate */\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n  border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox {\n  background-color: var(--surface-color-primary-disabled);\n  border-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-invalid] > .checkbox {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n  align-self: center;\n  vertical-align: middle;\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox > svg {\n  color: var(--icons-color-disabled);\n}\n\n/* Read-only */\n.bcds-react-aria-Checkbox[data-readonly] {\n  cursor: not-allowed;\n}\n\n/* Invalid */\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Checkbox[data-selected][data-invalid] > .checkbox {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n";
+var css_248z$u = ".bcds-react-aria-Checkbox {\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n}\n\n/* Checkbox */\n.bcds-react-aria-Checkbox > .checkbox {\n  align-self: first baseline;\n  display: flex;\n  margin-top: var(--layout-margin-hair);\n  justify-content: space-around;\n  width: var(--icons-size-small);\n  height: var(--icons-size-small);\n  min-width: var(--icons-size-small);\n  background-color: var(--surface-color-secondary-default);\n  border-color: var(--surface-color-border-medium);\n  border-style: solid;\n  border-width: var(--layout-border-width-small);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Checkbox > .checkbox > svg {\n  align-self: center;\n}\n\n/* Label */\n.bcds-react-aria-Checkbox > .label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Focus */\n.bcds-react-aria-Checkbox[data-focus-visible] > .checkbox {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Hover */\n.bcds-react-aria-Checkbox[data-hovered] > .checkbox {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Pressed */\n.bcds-react-aria-Checkbox[data-pressed] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n}\n\n/* Selected */\n.bcds-react-aria-Checkbox[data-selected] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n  border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-selected] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n}\n\n/* Disabled */\n.bcds-react-aria-Checkbox[data-disabled] {\n  cursor: not-allowed;\n}\n.bcds-react-aria-Checkbox[data-disabled] > .checkbox {\n  border-color: var(--surface-color-border-medium);\n  background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-disabled] > .label {\n  color: var(--typography-color-disabled);\n}\n\n/* Indeterminate */\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n  border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n  align-self: center;\n  vertical-align: middle;\n}\n\n/* Read-only */\n.bcds-react-aria-Checkbox[data-readonly] {\n  cursor: not-allowed;\n}\n\n/* Invalid */\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n}\n\n/* Selected and hovered */\n.bcds-react-aria-Checkbox[data-selected][data-hovered] > .checkbox {\n  background-color: var(--surface-color-primary-hover);\n  border-color: var(--surface-color-primary-hover);\n}\n\n/* Selected and disabled */\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox {\n  border-color: var(--surface-color-primary-disabled);\n  background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox > svg {\n  color: var(--icons-color-disabled);\n}\n\n/* Indeterminate multi-state */\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox {\n  background-color: var(--surface-color-primary-disabled);\n  border-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox > svg {\n  color: var(--icons-color-disabled);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-invalid] > .checkbox {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n\n/* Selected and invalid */\n.bcds-react-aria-Checkbox[data-selected][data-invalid] > .checkbox {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n";
 styleInject(css_248z$u);
 function Checkbox({ value, children, ...props }) {
@@ -31640,7 +31640,7 @@ function CheckboxGroup({ orientation = "vertical", label, description, errorMess
     return (jsxRuntime.jsx($ed8ccb2e23e76301$export$4aa08d5625cb8ead, { className: `bcds-react-aria-CheckboxGroup`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-CheckboxGroup--label", children: [label, " ", isRequired && "(required)"] })), jsxRuntime.jsx("div", { className: `bcds-react-aria-CheckboxGroup--options ${orientation} flex-wrap-${flexWrap}`, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) }), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-CheckboxGroup--description", children: description })), isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-CheckboxGroup--error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
 }
-var css_248z$s = ".bcds-react-aria-DatePicker {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  background-color: var(--surface-color-forms-default);\n  align-self: flex-start;\n  width: 100%;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n.bcds-react-aria-DatePicker--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  gap: var(--layout-margin-small);\n}\n.bcds-react-aria-DatePicker--Input {\n  display: inline;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  align-items: center;\n  white-space: nowrap;\n  border: none;\n}\n\n/* Sizing */\n.bcds-react-aria-DatePicker.small > .bcds-react-aria-DatePicker--Group {\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n  height: 32px;\n}\n.bcds-react-aria-DatePicker.small .bcds-react-aria-DatePicker--Input {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-DatePicker.medium > .bcds-react-aria-DatePicker--Group {\n  padding: var(--layout-padding-xsmall) 0.75rem;\n  height: 40px;\n}\n.bcds-react-aria-DatePicker.medium .bcds-react-aria-DatePicker--Input {\n  font: var(--typography-regular-body);\n}\n\n/* Label */\n.bcds-react-aria-DatePicker--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Required indicator */\n.bcds-react-aria-DatePicker--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n/* Description */\n.bcds-react-aria-DatePicker--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Error message */\n.bcds-react-aria-DatePicker--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid] > .bcds-react-aria-DatePicker--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid]\n  > .bcds-react-aria-DatePicker--Group\n  > svg {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n/* Format helper text */\n.bcds-react-aria-DatePicker--FormatHelpText {\n  unicode-bidi: embed;\n  direction: ltr;\n}\n\n/* Hover and focus */\n.bcds-react-aria-DatePicker--Group[data-hovered] {\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  > .bcds-react-aria-DatePicker--Group {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  > .bcds-react-aria-DatePicker--Group:has(\n    .bcds-react-aria-Button[data-focus-visible]\n  ) {\n  outline: none; /* Hide focus ring when button is focused */\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  .bcds-react-aria-DatePicker--Segment {\n  outline: none;\n}\n.bcds-react-aria-DatePicker--Segment[data-focused] {\n  outline: none;\n  border-radius: var(--layout-border-radius-small);\n  background-color: var(--surface-color-primary-default);\n  color: var(--typography-color-primary-invert);\n  padding: var(--layout-padding-hair);\n  margin: var(--layout-margin-none) var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker > .bcds-react-aria-Button[data-focused] {\n  outline: none;\n}\n\n/* Disabled and read-only */\n.bcds-react-aria-DatePicker[data-readonly]\n  > .bcds-react-aria-DatePicker--Group {\n  cursor: not-allowed;\n}\n.bcds-react-aria-DatePicker--Segment[data-readonly][data-focused] {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-DatePicker[data-disabled]\n  > .bcds-react-aria-DatePicker--Group {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n";
+var css_248z$s = ".bcds-react-aria-DatePicker {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  background-color: var(--surface-color-forms-default);\n  align-self: flex-start;\n  width: 100%;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n.bcds-react-aria-DatePicker--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  gap: var(--layout-margin-small);\n}\n.bcds-react-aria-DatePicker--Input {\n  display: inline;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  align-items: center;\n  white-space: nowrap;\n  border: none;\n}\n\n/* Sizing */\n.bcds-react-aria-DatePicker.small > .bcds-react-aria-DatePicker--Group {\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n  height: 32px;\n}\n.bcds-react-aria-DatePicker.small .bcds-react-aria-DatePicker--Input {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-DatePicker.medium > .bcds-react-aria-DatePicker--Group {\n  padding: var(--layout-padding-xsmall) 0.75rem;\n  height: 40px;\n}\n.bcds-react-aria-DatePicker.medium .bcds-react-aria-DatePicker--Input {\n  font: var(--typography-regular-body);\n}\n\n/* Label */\n.bcds-react-aria-DatePicker--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Required indicator */\n.bcds-react-aria-DatePicker--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n/* Description */\n.bcds-react-aria-DatePicker--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Error message */\n.bcds-react-aria-DatePicker--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid] > .bcds-react-aria-DatePicker--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid]\n  > .bcds-react-aria-DatePicker--Group\n  > svg {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n/* Format helper text */\n.bcds-react-aria-DatePicker--FormatHelpText {\n  unicode-bidi: embed;\n  direction: ltr;\n}\n\n/* Disabled and read-only */\n.bcds-react-aria-DatePicker[data-readonly]\n  > .bcds-react-aria-DatePicker--Group {\n  cursor: not-allowed;\n}\n.bcds-react-aria-DatePicker[data-disabled]\n  > .bcds-react-aria-DatePicker--Group {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n\n/* Hover and focus */\n.bcds-react-aria-DatePicker--Group[data-hovered] {\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  > .bcds-react-aria-DatePicker--Group {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  > .bcds-react-aria-DatePicker--Group:has(\n    .bcds-react-aria-Button[data-focus-visible]\n  ) {\n  outline: none; /* Hide focus ring when button is focused */\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  .bcds-react-aria-DatePicker--Segment {\n  outline: none;\n}\n.bcds-react-aria-DatePicker--Segment[data-focused] {\n  outline: none;\n  border-radius: var(--layout-border-radius-small);\n  background-color: var(--surface-color-primary-default);\n  color: var(--typography-color-primary-invert);\n  padding: var(--layout-padding-hair);\n  margin: var(--layout-margin-none) var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker--Segment[data-readonly][data-focused] {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-DatePicker > .bcds-react-aria-Button[data-focused] {\n  outline: none;\n}\n";
 styleInject(css_248z$s);
 var css_248z$r = ".bcds-react-aria-Dialog {\n  display: flex;\n  flex-direction: column;\n  min-height: var(--layout-margin-xxxlarge);\n}\n\n.bcds-react-aria-Dialog--Container {\n  position: relative;\n}\n\n/* Close icon */\n.bcds-react-aria-Dialog--closeIcon {\n  color: var(--icons-color-primary);\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Dialog--closeIcon > svg {\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
@@ -31700,7 +31700,7 @@ function SvgBcLogo({ title, id, ...props }) {
     return (jsxRuntime.jsxs("svg", { id: id, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 847.65 327.01", role: isMeaningful ? "img" : undefined, "aria-labelledby": isMeaningful ? titleId : undefined, "aria-hidden": isMeaningful ? undefined : true, focusable: "false", ...props, children: [title && jsxRuntime.jsx("title", { id: titleId, children: title }), jsxRuntime.jsx("path", { d: "M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z", className: "bcds-bc-logo--whiteFill" }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", className: "bcds-bc-logo--goldFill" }), jsxRuntime.jsx("path", { d: "M423.47,116.64c0-6.39-.45-8.08-4.76-8.43l-3-.21c-.49-.39-.35-2.12.1-2.16,5.17-.46,11.69-.69,20.6-.69,6.04,0,11.79.43,16.1,2.42,4.12,1.81,7.28,5.26,7.28,10.79,0,6.22-4.03,9.41-9.77,11.83,0,.86.77,1.12,1.82,1.29,5.17.86,12.84,5.18,12.84,14.42,0,10.01-8.24,16.75-25.49,16.75-2.78,0-7.47-.26-11.5-.26s-7.47.17-11.02.26c-.57-.26-.77-1.64-.19-2.16l1.73-.26c5.08-.78,5.27-1.73,5.27-10.79v-32.8ZM431.32,128.12c0,2.42.1,2.59,4.98,2.42,9.77-.35,15.04-2.94,15.04-11.05s-7-11.65-14.28-11.65c-2.11,0-3.55.17-4.41.52-.96.26-1.34.69-1.34,2.24v17.52ZM431.32,148.14c0,3.11.19,7.51,2.01,9.41,1.82,1.98,4.7,2.42,7.57,2.42,8.53,0,15.04-3.45,15.04-12.08,0-6.82-3.83-14.76-19.07-14.76-5.17,0-5.56.52-5.56,2.24v12.77Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M531.26,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.06-.07,10.15-.22c.49.22.65,1.55.16,1.84l-2.04.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.04.22c.49.29.33,1.62-.16,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.66-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M576.66,151.53c0,7.74.15,8.85,4.6,9.22l2.45.22c.46.29.31,1.62-.15,1.84-4.37-.15-6.98-.22-10.05-.22s-5.75.07-10.66.22c-.46-.22-.62-1.47,0-1.84l2.76-.22c4.37-.37,4.75-1.48,4.75-9.22v-32.96c0-2.28,0-2.36-2.3-2.36h-4.22c-3.3,0-7.51.15-9.43,1.84-1.84,1.62-2.61,3.24-3.45,5.09-.62.44-1.69.07-1.99-.52,1.22-3.32,2.38-8.04,2.91-10.98.23-.15,1.23-.22,1.46,0,.46,2.36,2.99,2.29,6.52,2.29h31.05c4.14,0,4.83-.15,5.98-2.06.38-.15,1.23-.07,1.38.22-.84,3.02-1.38,9-1.15,11.21-.31.59-1.61.59-1.99.15-.23-1.84-.77-4.57-1.92-5.38-1.76-1.25-4.68-1.84-8.89-1.84h-5.44c-2.3,0-2.22.07-2.22,2.51v32.81Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M609.53,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.05-.07,10.15-.22c.49.22.66,1.55.17,1.84l-2.05.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.05.22c.49.29.33,1.62-.17,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.65-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M646.2,163.57c-7.31,0-11.92-1.92-13.57-2.73-1.04-1.62-2.18-6.86-2.35-10.32.44-.52,1.74-.66,2.09-.22,1.31,3.76,4.87,10.98,14.96,10.98,7.31,0,10.87-4.05,10.87-8.48,0-3.24-.78-6.86-7.13-10.32l-8.26-4.57c-4.35-2.43-9.4-6.64-9.4-12.68,0-7,6.44-12.68,17.75-12.68,2.7,0,5.83.44,8.09.96,1.13.29,2.35.44,3.04.44.78,1.77,1.57,5.9,1.57,9-.35.44-1.74.66-2.18.22-1.13-3.54-3.48-8.33-11.83-8.33s-10.35,4.79-10.35,8.18c0,4.28,4.18,7.38,7.39,9.07l6.96,3.69c5.48,2.88,10.88,7.15,10.88,14.16,0,8.11-7.22,13.64-18.53,13.64Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M689.99,138.78c-3.81,0-3.96.15-3.96,2.36v10.4c0,7.74.4,8.77,4.84,9.22l2.3.22c.48.29.32,1.62-.16,1.84-4.28-.15-6.98-.22-10.08-.22-3.41,0-6.11.15-9.2.22-.47-.22-.63-1.4-.16-1.84l1.35-.22c4.45-.74,4.6-1.48,4.6-9.22v-26.54c0-7.74-.55-8.99-4.68-9.29l-2.06-.15c-.48-.29-.32-1.62.16-1.84,3.89.07,6.58.22,10,.22,3.1,0,5.79-.07,9.2-.22.48.22.63,1.55.16,1.84l-1.51.15c-4.6.44-4.76,1.55-4.76,9.29v8.48c0,2.28.16,2.36,3.96,2.36h22.69c3.81,0,3.97-.07,3.97-2.36v-8.48c0-7.74-.16-8.85-4.84-9.29l-1.51-.15c-.48-.29-.32-1.62.16-1.84,3.65.15,6.35.22,9.6.22s5.79-.07,9.36-.22c.48.22.63,1.55.16,1.84l-1.66.15c-4.6.44-4.76,1.55-4.76,9.29v26.54c0,7.74.16,8.7,4.76,9.22l1.9.22c.47.29.32,1.62-.16,1.84-3.81-.15-6.51-.22-9.6-.22-3.25,0-6.11.07-9.6.22-.48-.22-.63-1.4-.16-1.84l1.51-.22c4.84-.74,4.84-1.48,4.84-9.22v-10.4c0-2.21-.16-2.36-3.97-2.36h-22.69Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M378.06,179.01c6.52-5.07,14.83-7.57,24.12-7.57,4.82,0,11.61.98,15.81,2.14,1.07.27,1.7.45,2.5.36.09,2.05.54,7.65,1.25,13.09-.45.62-1.79.71-2.41.18-1.34-6.05-5.36-13-18.31-13-13.67,0-25.28,8.64-25.28,27.06s11.88,29.02,26.53,29.02c11.52,0,16.62-7.48,18.67-12.73.63-.44,1.97-.27,2.32.36-.62,4.63-2.95,10.5-4.29,12.2-1.07.18-2.14.53-3.13.89-1.97.71-8.4,2.05-14.11,2.05-8.04,0-15.72-1.6-22.24-5.96-7.15-4.9-12.69-12.99-12.69-24.48,0-9.88,4.47-18.34,11.26-23.59Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M426.92,207.81c0-14.75,11.61-26.03,27.56-26.03,17.88,0,26.86,12.31,26.86,25.29,0,14.89-11.92,25.73-26.86,25.73-17.19,0-27.56-11.72-27.56-25ZM473.6,209.35c0-12.17-5.65-25.29-20.44-25.29-8.05,0-18.5,5.24-18.5,21.38,0,10.91,5.57,25.07,20.82,25.07,9.29,0,18.12-6.64,18.12-21.16Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M568.68,201.47c0-4.57-.16-13.05-1.49-15.26-.55-.89-1.95-1.4-3.91-1.55l-1.95-.15c-.47-.52-.31-1.47.15-1.77,2.97.15,5.86.22,8.91.22,3.28,0,5.39-.08,8.21-.22.62.37.55,1.33.16,1.77l-1.88.15c-1.95.15-3.44.81-3.91,1.77-1.09,2.43-1.09,10.91-1.09,15.04v8.33c0,6.42-1.1,13.2-5.47,17.62-3.36,3.47-9.14,5.38-14.93,5.38-5.39,0-10.79-.96-14.62-4.05-4.14-3.24-6.1-8.63-6.1-17.4v-17.4c0-7.67-.16-8.92-4.69-9.29l-1.96-.15c-.47-.29-.31-1.55.15-1.77,3.91.15,6.57.22,9.69.22s5.78-.08,9.61-.22c.47.22.63,1.47.16,1.77l-1.88.15c-4.53.37-4.69,1.62-4.69,9.29v15.93c0,11.87,3.91,19.69,15.87,19.69,11.33,0,15.63-8.41,15.63-19.61v-8.48Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M659.52,192.26c0-5.51-.35-6.93-4.23-7.22l-2.77-.27c-.31-.28-.48-1.78.09-1.82,4.67-.35,10.54-.59,18.57-.59,5.44,0,10.62.37,14.51,2.08,3.71,1.57,6.56,4.54,6.56,9.31,0,5.36-3.63,8.12-8.81,10.2,0,.75.69.97,1.64,1.12,4.67.74,11.58,4.47,11.58,12.44,0,8.64-7.43,14.45-22.98,14.45-2.5,0-6.74-.22-10.37-.22s-6.74.15-9.93.22c-.52-.22-.69-1.41-.17-1.86l1.55-.22c4.58-.67,4.75-1.49,4.75-9.31v-28.3ZM666.6,202.16c0,2.09.09,2.24,4.49,2.09,8.81-.3,13.56-2.53,13.56-9.53s-6.3-10.05-12.87-10.05c-1.9,0-3.2.15-3.97.45-.87.22-1.21.59-1.21,1.94v15.12ZM666.6,219.44c0,2.68.17,6.48,1.81,8.12,1.64,1.71,4.23,2.08,6.82,2.08,7.69,0,13.56-2.98,13.56-10.43,0-5.88-3.45-12.73-17.19-12.73-4.67,0-5.01.44-5.01,1.94v11.02Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M518.75,160.97l-2.05-.18c-.41-.04-.78-.1-1.13-.15-2.99-.53-4.19-3.2-5.6-5.67l-7.08-12.32c-1.22-2.05-2.53-4.82-5.33-5.21,7.25-.87,13.81-5.06,13.81-12.24,0-8.3-8.21-12.01-16.52-12.01-4.98,0-9.52.13-14.59.13-2.79,0-6.12-.13-8.92-.13-1.55,0-1.57.32-1.57,1.18,0,1.28.54.92,2.19,1.02,5.9.33,5.68,1.43,5.68,6.49v32.31c0,4.62.4,6-4.46,6.44,0,0-.74.08-1.17.12l-2.06.21c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.12,3.03-.12,2.69-.08,5.38-.28,8.06-.28s5.29.21,7.95.29h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.07-.2c-.42-.05-1.15-.11-1.15-.11-4.9-.33-4.6-1.71-4.6-6.46v-12.17c0-.71-.09-2.61.44-3.16.44-.48,1.22-.4,1.92-.4,6.64,0,6.55.63,9.7,6.16l8.56,15.4c.7,1.19,1.22,2.69,2.97,2.69h7.44c.94.03,1.92.06,3.01.1.49-.22.65-1.4.16-1.84ZM488.92,136.74c-1.49,0-4.46.55-4.46-1.42v-14.14c0-5.53.18-6.32,6.82-6.32,7.78,0,12.58,3.95,12.58,11.22,0,3.16-1.14,6.08-4.02,8.06-3.32,2.29-6.9,2.61-10.92,2.61Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M490.53,194.2c0-7.74-.16-8.92-5.27-9.29l-2.03-.15c-.49-.3-.32-1.62.16-1.84,4.54.15,7.3.22,10.54.22s5.92-.07,9.98-.22c.49.22.65,1.55.16,1.84l-1.95.15c-4.78.37-4.95,1.55-4.95,9.29v25.66c0,4.64.24,6.56,1.7,7.96.89.81,2.43,1.7,8.84,1.7,6.89,0,8.6-.3,9.9-.96,1.62-.89,3.73-3.54,5.35-7.3.49-.37,2.03-.07,2.03.44,0,.81-2.27,8.33-3.41,10.32-4.13-.15-11.84-.22-20.2-.22h-7.46c-3.41,0-6,.07-10.54.22-.49-.22-.65-1.4-.16-1.84l2.43-.22c4.7-.44,4.87-1.48,4.87-9.22v-26.54Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M707.79,194.34c0-7.81-.16-9.07-4.86-9.44l-1.99-.15c-.48-.3-.32-1.62.16-1.84,3.98.15,6.69.22,10.03.22s5.89-.07,9.87-.22c.48.22.64,1.55.16,1.84l-1.99.15c-4.7.37-4.86,1.62-4.86,9.44v26.25c0,7.82.16,8.85,4.86,9.36l1.99.22c.48.3.32,1.62-.16,1.84-3.98-.15-6.69-.22-9.87-.22-3.35,0-6.05.07-10.03.22-.48-.22-.64-1.4-.16-1.84l1.99-.22c4.7-.52,4.86-1.55,4.86-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M644.16,229.94c-.41-.04-1.17-.1-1.17-.1-.84-.08-1.59-.2-2.19-.86-1.03-1.1-.95-4.23-.95-5.48v-32.31c0-1.41-.34-4.46.69-5.56.52-.58,1.59-.67,2.55-.73h0c.58-.05.6-.05,1.11-.07l2.05-.15c.49-.3.33-1.62-.16-1.84-1.09.04-2.09.02-3.03.05h0s-8.7,0-8.7,0c-.95,0-1.81,0-2.32,1.02l-17.73,36.92-15.66-35.67c-.52-1.25-.6-2.27-2.24-2.27h-9.05c-.94-.03-1.98-.02-3.08-.06-.49.22-.66,1.55-.16,1.84l2.05.15c.42.03,1.19.09,1.19.09,3.4.22,3.61.98,3.3,4.55l-2.67,34.65c-.23,3.48-.42,5.32-4.07,5.66,0,0-.77.1-1.19.14l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,3-.1,3-.1,1.85-.09,3.73-.25,5.61-.25,2.03,0,4.06.19,6.1.27h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.04-.22c-.54-.04-1.14-.1-1.14-.1-5.26-.36-5.14-4.07-4.81-8.62l2.5-32.23h.6l16.95,39.66c.17.55.43,1.49,1.29,1.49.78,0,1.03-.86,1.29-1.41l19.1-40.68h.6v35.44c0,1.41.17,4.3-1.29,5.4-.76.57-3.25.91-3.25.91-.34.05-.7.1-1.11.15l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,2.99-.1,2.99-.1,2.77-.08,5.59-.28,8.41-.28,2.03,0,6,.19,6,.19.95.03,2.02.13,3.12.17.49-.22.66-1.4.16-1.84l-2.05-.22Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M777.13,230.14l-.28-.22c-.41-.04-.77-.09-1.11-.15-3.19-.71-4.43-4.55-5.61-7.29l-16.41-38.83c-.16-.47-.49-1.47-1.14-1.47-.89,0-1.14,1.08-1.38,1.7l-15.68,38.76c-.57,1.47-2.03,5.03-3.09,6.11-.81.83-1.86.99-2.99,1.1,0,0-.88.08-1.31.13l-1.93.2c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.11,3.03-.11,2.14-.03,4.29-.3,6.44-.3,1.81,0,3.61.19,5.41.27,0,0,1.94.07,3.03.11.49-.22.65-1.4.16-1.84l-2.05-.22c-.41-.04-1.11-.11-1.11-.11-1.89-.21-4.24-.55-4.24-2.62,0-1.39.65-3.02,1.14-4.25l2.44-5.8c1.22-2.78.73-3.1,3.98-3.1h11.05c3.9,0,3.33,0,5.04,3.95l2.6,5.88c.41,1.01,1.14,2.71,1.14,3.79,0,1.94-2.12,2.07-4.11,2.24,0,0-.66.06-1.23.1l-1.97.14c-.49.44-.33,1.62.17,1.84,1.09-.04,3.03-.12,3.03-.12,2.31-.08,4.64-.26,6.87-.26,2.85,0,5.69.19,8.54.27h0c.93.03.14.06,1.22.1.49-.22.65-1.4.16-1.84ZM755.64,211.89h-9.57c-.33,0-3,.31-3-.47,0-.24.17-.7.25-.94l5.75-14.23c.17-.39.75-2.35,1.41-2.35.5,0,1.17,2.03,1.33,2.35l5.66,13.29c0,.16.58,1.41.58,1.72,0,.86-1.91.62-2.41.62Z", className: "bcds-bc-logo--blueFill" })] }), jsxRuntime.jsx("rect", { width: "847.65", height: "327.01", className: "bcds-bc-logo--noFill" })] }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", className: "bcds-bc-logo--goldFill" }), jsxRuntime.jsx("path", { d: "M95.46,166.88l-14.14-4.97.71-1.73,15.92,5.31.07-.04,2.1-1.19.84-.53-17.36-7.39.73-1.82,38.75,15.67,1.28-.53-38.44-18.73.86-1.76,40.73,18.96.56-.29-39.49-22.4.81-1.68,57.03,31.03c.47-.86,1.44-2.44,1.95-3.28-21.68-20.39-42.61-35.69-42.61-35.69,0,0,21.52,14.41,48.07,27.81.88-1.09,1.6-1.97,2.53-3.01l-48.65-42.83,1.31-1.34,39.27,33.47-36.38-36.43,1.36-1.41,40.84,39.47-38.02-42.2,1.45-1.31,35.14,37.63-32.07-40.41,1.38-1.26,41.11,50.03c1.06-.92,1.95-1.61,3.06-2.46-12.44-26.91-26.02-48.8-26.02-48.8,0,0,14.46,21.28,33.96,43.56,1.19-.67,2.4-1.31,3.63-1.92l-.21-.13-28.81-57.5,1.71-.75,23.87,45.74-20.08-47.41,1.79-.8,23.08,51.9-19.45-53.37,1.84-.67,18.49,48.05-14.6-49.49,1.75-.65,19.22,61.38-.04.16.05-.02c1.28-.43,2.58-.81,3.89-1.16-1.46-29.48-5.82-54.7-5.82-54.7,0,0,5.4,25,15.08,52.87,1.35-.17,2.71-.31,4.07-.4l-.04-.06h.17l-.1-.14-5.17-64.11,1.87-.06,5,51.35-.86-51.48,1.96-.07,1.96,56.77,1.96-56.77,1.96.07-.86,51.48,5-51.35,1.87.06-5.17,64.11-.1.14h.03v.02s.07,0,.07,0c1.34.08,2.66.22,3.98.38,9.67-27.84,15.06-52.8,15.06-52.8,0,0-4.35,25.14-5.82,54.57,1.32.35,2.63.73,3.91,1.15l19.15-61.16,1.76.65-14.6,49.48,18.49-48.05,1.84.67-19.45,53.37,23.08-51.9,1.79.8-20.08,47.41,23.87-45.74,1.71.75-28.71,57.3.05.02c1.18.58,2.34,1.19,3.49,1.83,19.42-22.21,33.79-43.37,33.79-43.37,0,0-13.49,21.74-25.89,48.52,1.11.84,2.19,1.7,3.24,2.6l40.63-49.49,1.39,1.26-32.08,40.41,35.14-37.63,1.45,1.31-38.02,42.2,40.84-39.47,1.36,1.41-36.38,36.43,39.27-33.47,1.31,1.34-48.06,42.35.03.03c.84.94,1.65,1.9,2.44,2.88,26.39-13.34,47.71-27.62,47.71-27.62,0,0-20.72,15.16-42.29,35.4.59.99,1.55,2.67,2.09,3.69l56.22-30.61.81,1.69-44.88,25.45,46.68-21.72.86,1.76-43.48,21.19.83.29,44.24-17.89.74,1.82-41.12,17.49.77.32,27.4-9.13,4.13-2.88,1.37,1.05,9.02-3.01.71,1.73-7.8,2.75,11.27,8.6,3.61,2.01c-14.49-60.58-68.98-105.62-134-105.62s-121.42,46.63-134.73,108.82c.17-.08.34-.16.51-.24l1.65-.75,1.01-.47,19.01-10.66Z", className: "bcds-bc-logo--goldFill" })] }), jsxRuntime.jsx("path", { d: "M72.5,233.02s20.32-4.06,37.29-4.06c44.7,0,106.54,25.17,151.41,25.17,32.91,0,65.02-9.03,82.51-22.19,1.37-7.79,2.08-15.8,2.08-23.98,0-11.08-1.32-21.85-3.79-32.17l-18.7-10.43-21.95,15.39-14.76-5.75c-5,2.53-35.83,23.15-35.83,23.15l-11.84-8.57-12.7-2.51-16.93-12.33-19.42,13.33s-21.67,12.58-22.41,12.58-26.14-20.13-26.14-20.13l-11.7-12.33c-1.99,1.26-9.95,4.91-9.95,4.91l-.41.11-7.7-2.38-9.35-4.96-28.41,12.88c-.17.08-.34.16-.51.24-2,9.34-3.06,19.03-3.06,28.96,0,8.56.79,16.93,2.28,25.06Z", className: "bcds-bc-logo--blueFill" })] })] }));
 }
-var css_248z$o = ".bcds-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: 100%;\n}\n\n.bcds-footer > .bcds-footer--acknowledgement {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-top: var(--layout-border-width-large) solid var(--theme-gold-60);\n  border-bottom: var(--layout-border-width-large) solid var(--theme-gold-60);\n  background-color: var(--theme-gray-110);\n  padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n  > .bcds-footer--acknowledgement\n  > .bcds-footer--acknowledgement-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: stretch;\n  color: var(--typography-color-primary-invert);\n  font: var(--typography-regular-small-body);\n  max-width: 1100px;\n  width: 100%;\n}\n\n.bcds-footer\n  > .bcds-footer--acknowledgement\n  > .bcds-footer--acknowledgement-text\n  > p {\n  margin: var(--layout-margin-none);\n}\n\n.bcds-footer > .bcds-footer--container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  background-color: var(--surface-color-background-light-gray);\n  padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--layout-padding-xlarge);\n  max-width: 1100px;\n  width: 100%;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: flex-start;\n  gap: var(--layout-padding-medium) var(--layout-padding-xlarge);\n  justify-content: space-between;\n  width: 100%;\n}\n\n/* `horizontal` class is the default, when no `children` prop is passed */\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.horizontal {\n  flex-direction: row;\n}\n\n/* `vertical` class is used when a `children` prop is passed */\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.vertical {\n  flex-direction: column;\n  align-items: stretch;\n  row-gap: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-padding-large);\n  min-width: 324px;\n  width: 576px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > #bcgov-logo-footer {\n  width: 146px;\n  min-width: 146px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p {\n  font: var(--typography-regular-small-body);\n  margin: var(--layout-margin-none);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p\n  > a {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  text-decoration: underline;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p\n  > a:hover {\n  text-decoration: none;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links {\n  margin: var(--layout-margin-none);\n}\n\n/*\n  When Footer hasn't been passed `children`, expand the links container to take\n  up 320px, as the default links are narrower.\n*/\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.horizontal\n  > .bcds-footer--links {\n  min-width: 320px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > .bcds-footer--links-title {\n  display: block;\n  font: var(--typography-bold-small-body);\n  margin-bottom: var(--layout-padding-medium);\n  text-transform: uppercase;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: auto;\n  gap: var(--layout-padding-small) var(--layout-padding-xlarge);\n  list-style: none;\n  margin: var(--layout-margin-none);\n  padding: var(--layout-padding-none);\n}\n\n/*\n  When a Footer has been passed `children`, the logo-links container fills the\n  full width of the container, so there's room for 4 columns of links.\n*/\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.vertical\n  > .bcds-footer--links\n  > ul {\n  grid-template-columns: repeat(4, 1fr);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li\n  > a {\n  color: var(--typography-color-primary);\n  text-decoration: none;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li\n  > a:hover {\n  text-decoration: underline;\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {\n  background-color: var(--surface-color-border-dark);\n  border: var(--layout-border-width-none);\n  height: var(--layout-border-width-small);\n  margin: var(--layout-margin-none);\n  width: 100%;\n}\n\np.bcds-footer--copyright {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-body);\n  margin: var(--layout-margin-none);\n}\n\n/* Tablet */\n@media (width <= 991px) {\n  /* Links drop beneath logo in the default configuration */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links {\n    flex-wrap: wrap;\n  }\n\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links\n    > .bcds-footer--logo {\n    max-width: 324px;\n  }\n\n  /*\n    When the `children` prop is used with multiple FooterLinks components,\n    only two columns of links appear on screen at once.\n  */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links.vertical\n    > .bcds-footer--links\n    > ul {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n/* Extra small screens */\n@media (width <= 575px) {\n  .bcds-footer > .bcds-footer--acknowledgement {\n    padding: var(--layout-padding-xlarge) var(--layout-padding-medium);\n  }\n\n  .bcds-footer > .bcds-footer--container {\n    padding: var(--layout-padding-medium);\n  }\n\n  .bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n    gap: var(--layout-padding-medium);\n  }\n\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links\n    > .bcds-footer--logo {\n    gap: var(--layout-padding-medium);\n  }\n\n  /*\n    When the `children` prop is used with multiple FooterLinks components,\n    only one column of links appear on screen at once.\n  */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links.vertical\n    > .bcds-footer--links\n    > ul {\n    grid-template-columns: repeat(1, 1fr);\n  }\n}\n";
+var css_248z$o = ".bcds-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: 100%;\n}\n\n.bcds-footer > .bcds-footer--acknowledgement {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-top: var(--layout-border-width-large) solid var(--theme-gold-60);\n  border-bottom: var(--layout-border-width-large) solid var(--theme-gold-60);\n  background-color: var(--theme-gray-110);\n  padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n  > .bcds-footer--acknowledgement\n  > .bcds-footer--acknowledgement-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: stretch;\n  color: var(--typography-color-primary-invert);\n  font: var(--typography-regular-small-body);\n  max-width: 1100px;\n  width: 100%;\n}\n\n.bcds-footer\n  > .bcds-footer--acknowledgement\n  > .bcds-footer--acknowledgement-text\n  > p {\n  margin: var(--layout-margin-none);\n}\n\n.bcds-footer > .bcds-footer--container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  background-color: var(--surface-color-background-light-gray);\n  padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--layout-padding-xlarge);\n  max-width: 1100px;\n  width: 100%;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: flex-start;\n  gap: var(--layout-padding-medium) var(--layout-padding-xlarge);\n  justify-content: space-between;\n  width: 100%;\n}\n\n/* `horizontal` class is the default, when no `children` prop is passed */\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.horizontal {\n  flex-direction: row;\n}\n\n/* `vertical` class is used when a `children` prop is passed */\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.vertical {\n  flex-direction: column;\n  align-items: stretch;\n  row-gap: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-padding-large);\n  min-width: 324px;\n  width: 576px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > #bcgov-logo-footer {\n  width: 146px;\n  min-width: 146px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p {\n  font: var(--typography-regular-small-body);\n  margin: var(--layout-margin-none);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p\n  > a {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  text-decoration: underline;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li\n  > a {\n  color: var(--typography-color-primary);\n  text-decoration: none;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p\n  > a:hover {\n  text-decoration: none;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links {\n  margin: var(--layout-margin-none);\n}\n\n/*\n  When Footer hasn't been passed `children`, expand the links container to take\n  up 320px, as the default links are narrower.\n*/\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.horizontal\n  > .bcds-footer--links {\n  min-width: 320px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > .bcds-footer--links-title {\n  display: block;\n  font: var(--typography-bold-small-body);\n  margin-bottom: var(--layout-padding-medium);\n  text-transform: uppercase;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: auto;\n  gap: var(--layout-padding-small) var(--layout-padding-xlarge);\n  list-style: none;\n  margin: var(--layout-margin-none);\n  padding: var(--layout-padding-none);\n}\n\n/*\n  When a Footer has been passed `children`, the logo-links container fills the\n  full width of the container, so there's room for 4 columns of links.\n*/\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.vertical\n  > .bcds-footer--links\n  > ul {\n  grid-template-columns: repeat(4, 1fr);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li\n  > a:hover {\n  text-decoration: underline;\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {\n  background-color: var(--surface-color-border-dark);\n  border: var(--layout-border-width-none);\n  height: var(--layout-border-width-small);\n  margin: var(--layout-margin-none);\n  width: 100%;\n}\n\np.bcds-footer--copyright {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-body);\n  margin: var(--layout-margin-none);\n}\n\n/* Tablet */\n@media (width <= 991px) {\n  /* Links drop beneath logo in the default configuration */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links {\n    flex-wrap: wrap;\n  }\n\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links\n    > .bcds-footer--logo {\n    max-width: 324px;\n  }\n\n  /*\n    When the `children` prop is used with multiple FooterLinks components,\n    only two columns of links appear on screen at once.\n  */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links.vertical\n    > .bcds-footer--links\n    > ul {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n/* Extra small screens */\n@media (width <= 575px) {\n  .bcds-footer > .bcds-footer--acknowledgement {\n    padding: var(--layout-padding-xlarge) var(--layout-padding-medium);\n  }\n\n  .bcds-footer > .bcds-footer--container {\n    padding: var(--layout-padding-medium);\n  }\n\n  .bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n    gap: var(--layout-padding-medium);\n  }\n\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links\n    > .bcds-footer--logo {\n    gap: var(--layout-padding-medium);\n  }\n\n  /*\n    When the `children` prop is used with multiple FooterLinks components,\n    only one column of links appear on screen at once.\n  */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links.vertical\n    > .bcds-footer--links\n    > ul {\n    grid-template-columns: repeat(1, 1fr);\n  }\n}\n";
 styleInject(css_248z$o);
 /**
@@ -31826,7 +31826,7 @@ function Link({ children, size = "medium", danger = false, isButton = false, but
             : undefined, "aria-label": ariaLabel, ...props, children: [iconLeft && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconLeft })), children, iconRight && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconRight }))] }));
 }
-var css_248z$k = ".bcds-react-aria-MenuItem {\n  display: flex;\n  gap: var(--layout-margin-xsmall);\n  padding: var(--layout-padding-small);\n  cursor: pointer;\n  color: var(--typography-color-secondary);\n}\n.bcds-react-aria-MenuItem--Icon {\n  display: flex;\n  align-self: flex-start;\n  padding-top: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-MenuItem--Content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-padding-hair);\n}\n\n/* Sizing */\n.bcds-react-aria-MenuItem.small {\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-MenuItem.small\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  font: var(--typography-regular-label);\n}\n.bcds-react-aria-MenuItem.medium {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-MenuItem.medium\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  font: var(--typography-regular-small-body);\n}\n\n/* Link styling */\na.bcds-react-aria-MenuItem {\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"label\"] {\n  color: var(--typography-color-link);\n  text-decoration: underline var(--typography-color-link);\n  text-underline-offset: var(--layout-margin-hair);\n}\na.bcds-react-aria-MenuItem\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  color: var(--typography-color-secondary);\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"label\"] {\n  color: var(--typography-color-disabled);\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  color: var(--typography-color-disabled);\n}\n\n/* Icon displayed when an item has a submenu */\n.bcds-react-aria-MenuItem > svg {\n  width: var(--icons-size-xsmall);\n  height: var(--icons-size-xsmall);\n  padding: var(--layout-padding-hair);\n  align-self: center;\n}\n\n/* States */\n.bcds-react-aria-MenuItem[data-focused],\n.bcds-react-aria-MenuItem[data-hovered],\n.bcds-react-aria-MenuItem[data-hovered][data-focused] {\n  border-radius: var(--layout-border-radius-small);\n  background-color: var(--surface-color-menus-hover);\n  outline: none;\n}\n\n.bcds-react-aria-MenuItem[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n";
+var css_248z$k = ".bcds-react-aria-MenuItem {\n  display: flex;\n  gap: var(--layout-margin-xsmall);\n  padding: var(--layout-padding-small);\n  cursor: pointer;\n  color: var(--typography-color-secondary);\n}\n.bcds-react-aria-MenuItem--Icon {\n  display: flex;\n  align-self: flex-start;\n  padding-top: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-MenuItem--Content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-padding-hair);\n}\n\n/* Link styling */\na.bcds-react-aria-MenuItem {\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  color: var(--typography-color-secondary);\n  text-decoration: none;\n}\n\n/* Sizing */\n.bcds-react-aria-MenuItem.small {\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-MenuItem.small\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  font: var(--typography-regular-label);\n}\n.bcds-react-aria-MenuItem.medium {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-MenuItem.medium\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  font: var(--typography-regular-small-body);\n}\n\n/* Link styling, part 2 */\na.bcds-react-aria-MenuItem\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"label\"] {\n  color: var(--typography-color-link);\n  text-decoration: underline var(--typography-color-link);\n  text-underline-offset: var(--layout-margin-hair);\n}\na.bcds-react-aria-MenuItem[data-disabled]\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"label\"] {\n  color: var(--typography-color-disabled);\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  color: var(--typography-color-disabled);\n}\n\n/* Icon displayed when an item has a submenu */\n.bcds-react-aria-MenuItem > svg {\n  width: var(--icons-size-xsmall);\n  height: var(--icons-size-xsmall);\n  padding: var(--layout-padding-hair);\n  align-self: center;\n}\n\n/* States */\n.bcds-react-aria-MenuItem[data-focused],\n.bcds-react-aria-MenuItem[data-hovered],\n.bcds-react-aria-MenuItem[data-hovered][data-focused] {\n  border-radius: var(--layout-border-radius-small);\n  background-color: var(--surface-color-menus-hover);\n  outline: none;\n}\n\n.bcds-react-aria-MenuItem[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$k);
 function MenuItem({ size = "medium", label, description, iconLeft, ...props }) {
@@ -31938,7 +31938,7 @@ function TagList({ items, orientation = "horizontal", renderEmptyState, ...props
     return (jsxRuntime.jsx($3df3ddf5bafbc7b1$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => $8WNJc$react.createElement(Tag, { ...item, key: item.id }) }));
 }
-var css_248z$9 = ".bcds-react-aria-Select {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  align-items: stretch;\n  min-width: 0;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Scroll mode: single-select text truncation */\n.bcds-react-aria-Select.scroll .bcds-react-aria-SelectValue {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Scroll mode: horizontally scrollable tag overlay.\n   overflow-x: auto forces overflow-y to also clip (per CSS spec), which\n   would clip tag focus rings. padding-block creates room for the outline\n   inside the scroll container's padding box, and matching negative\n   margin-block cancels it out so the overlay's outer box stays the same\n   size, preserving alignment with wrap mode. */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Select--TagOverlay {\n  overflow-x: auto;\n  pointer-events: auto;\n  scrollbar-width: thin;\n  padding-block: calc(\n    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n  );\n  margin-block: calc(\n    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n  );\n  padding-inline: calc(\n    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n  );\n  margin-inline: calc(\n    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n  );\n}\n\n/* Scroll mode: prevent tag list from wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-TagList {\n  flex-wrap: nowrap;\n  width: max-content;\n}\n\n/* Scroll mode: prevent tags from shrinking or wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag {\n  flex-shrink: 0;\n}\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag--Label {\n  white-space: nowrap;\n}\n\n/* Sizing */\n.bcds-react-aria-Select.small .bcds-react-aria-Select--Button {\n  min-height: 32px;\n}\n.bcds-react-aria-Select--ListBox.small .bcds-react-aria-Select--ListBoxItem {\n  padding: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Select.small .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.small\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-Select--Button {\n  min-height: 40px;\n}\n.bcds-react-aria-Select--ListBox.medium .bcds-react-aria-Select--ListBoxItem {\n  padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.medium\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-body);\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button {\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--layout-margin-small);\n  align-items: center;\n  padding: var(--layout-padding-small);\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n.bcds-react-aria-Select--Button[data-hovered] {\n  border-color: var(--surface-color-border-dark);\n  cursor: pointer;\n}\n.bcds-react-aria-Select--Button.invalid {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select[data-invalid] > .bcds-react-aria-Select--Button {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select--Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-Select--Button[data-focus-visible] {\n  border-color: var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-Select--Button[data-pressed] {\n  border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {\n  flex: 1 1 auto;\n  overflow: visible;\n  white-space: normal;\n  text-align: left;\n  min-width: 0;\n}\n.bcds-react-aria-Select--Button > svg {\n  flex: 0 0 auto;\n}\n\n/* Overlay for tags in multi-select mode */\n.bcds-react-aria-Select--InputContainer {\n  display: grid;\n  width: 100%;\n  min-width: 0;\n}\n.bcds-react-aria-Select--InputContainer > .bcds-react-aria-Select--Button {\n  grid-area: 1 / 1;\n  align-self: stretch;\n}\n.bcds-react-aria-Select--TagOverlayContainer {\n  grid-area: 1 / 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: calc(var(--layout-padding-small) - 0.5px);\n  padding-right: 2.5rem;\n  pointer-events: none;\n}\n.bcds-react-aria-Select--TagOverlay {\n  width: 100%;\n  min-width: 0;\n  pointer-events: none;\n}\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag,\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag [slot=\"remove\"],\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag button {\n  pointer-events: auto;\n}\n\n/* Label above select input */\n.bcds-react-aria-Select--Label {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {\n  color: var(--typography-color-disabled);\n}\n\n/* Text description below select input */\n.bcds-react-aria-Select--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Error message */\n.bcds-react-aria-Select--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n/* Error icon */\n.bcds-react-aria-Select[data-invalid]\n  .bcds-react-aria-Select--Button\n  svg:not(:last-child) {\n  color: var(--icons-color-danger);\n}\n\n/* Dropdown menu panel */\n.bcds-react-aria-Select--Popover {\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  box-shadow: var(--surface-shadow-medium);\n  box-sizing: border-box;\n  overflow-y: auto;\n  padding: var(--layout-padding-hair) var(--layout-padding-xsmall);\n  width: var(\n    --trigger-width\n  ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\n}\n.bcds-react-aria-Select--ListBox[data-focused] {\n  outline: none;\n}\n.bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  margin-top: 1px;\n  padding-top: var(--layout-padding-hair);\n}\n\n/* Header label within Section of multi-section Select */\n.bcds-react-aria-Select--Header {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n}\n\n/* ListBox option item */\n.bcds-react-aria-Select--ListBoxItem {\n  border-radius: var(--layout-border-radius-medium);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n}\n.bcds-react-aria-Select--ListBoxItem[data-focused],\n.bcds-react-aria-Select--ListBoxItem[data-hovered] {\n  background-color: var(--surface-color-secondary-button-hover);\n  outline: none;\n}\n.bcds-react-aria-Select--ListBoxItem-icon {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  /* This `min-width` rule can cause horizontal overflow on very narrow Select\n  instances, but if we leave it out, the icons will shrink instead. */\n  min-width: 20px;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.bcds-react-aria-Select--ListBoxItem.destructive {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem-Text-description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n";
+var css_248z$9 = ".bcds-react-aria-Select {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  align-items: stretch;\n  min-width: 0;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n.bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {\n  flex: 1 1 auto;\n  overflow: visible;\n  white-space: normal;\n  text-align: left;\n  min-width: 0;\n}\n.bcds-react-aria-Select--Button > svg {\n  flex: 0 0 auto;\n}\n\n.bcds-react-aria-Select--TagOverlay {\n  width: 100%;\n  min-width: 0;\n  pointer-events: none;\n}\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag,\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag [slot=\"remove\"],\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag button {\n  pointer-events: auto;\n}\n/* Scroll mode: single-select text truncation */\n.bcds-react-aria-Select.scroll .bcds-react-aria-SelectValue {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Scroll mode: horizontally scrollable tag overlay.\n   overflow-x: auto forces overflow-y to also clip (per CSS spec), which\n   would clip tag focus rings. padding-block creates room for the outline\n   inside the scroll container's padding box, and matching negative\n   margin-block cancels it out so the overlay's outer box stays the same\n   size, preserving alignment with wrap mode. */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Select--TagOverlay {\n  overflow-x: auto;\n  pointer-events: auto;\n  scrollbar-width: thin;\n  padding-block: calc(\n    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n  );\n  margin-block: calc(\n    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n  );\n  padding-inline: calc(\n    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n  );\n  margin-inline: calc(\n    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n  );\n}\n\n/* Scroll mode: prevent tag list from wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-TagList {\n  flex-wrap: nowrap;\n  width: max-content;\n}\n\n/* Scroll mode: prevent tags from shrinking or wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag {\n  flex-shrink: 0;\n}\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag--Label {\n  white-space: nowrap;\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button {\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--layout-margin-small);\n  align-items: center;\n  padding: var(--layout-padding-small);\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n.bcds-react-aria-Select--InputContainer > .bcds-react-aria-Select--Button {\n  grid-area: 1 / 1;\n  align-self: stretch;\n}\n/* ListBox option item */\n.bcds-react-aria-Select--ListBoxItem {\n  border-radius: var(--layout-border-radius-medium);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n}\n.bcds-react-aria-Select--ListBoxItem[data-focused],\n.bcds-react-aria-Select--ListBoxItem[data-hovered] {\n  background-color: var(--surface-color-secondary-button-hover);\n  outline: none;\n}\n/* Sizing */\n.bcds-react-aria-Select.small .bcds-react-aria-Select--Button {\n  min-height: 32px;\n}\n.bcds-react-aria-Select--ListBox.small .bcds-react-aria-Select--ListBoxItem {\n  padding: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Select.small .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.small\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-Select--Button {\n  min-height: 40px;\n}\n.bcds-react-aria-Select--ListBox.medium .bcds-react-aria-Select--ListBoxItem {\n  padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.medium\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-body);\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button[data-hovered] {\n  border-color: var(--surface-color-border-dark);\n  cursor: pointer;\n}\n.bcds-react-aria-Select--Button.invalid {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select[data-invalid] > .bcds-react-aria-Select--Button {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select--Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-Select--Button[data-focus-visible] {\n  border-color: var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-Select--Button[data-pressed] {\n  border-color: var(--surface-color-border-active);\n}\n\n/* Overlay for tags in multi-select mode */\n.bcds-react-aria-Select--InputContainer {\n  display: grid;\n  width: 100%;\n  min-width: 0;\n}\n.bcds-react-aria-Select--TagOverlayContainer {\n  grid-area: 1 / 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: calc(var(--layout-padding-small) - 0.5px);\n  padding-right: 2.5rem;\n  pointer-events: none;\n}\n\n/* Label above select input */\n.bcds-react-aria-Select--Label {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {\n  color: var(--typography-color-disabled);\n}\n\n/* Text description below select input */\n.bcds-react-aria-Select--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Error message */\n.bcds-react-aria-Select--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n/* Error icon */\n.bcds-react-aria-Select[data-invalid]\n  .bcds-react-aria-Select--Button\n  svg:not(:last-child) {\n  color: var(--icons-color-danger);\n}\n\n/* Dropdown menu panel */\n.bcds-react-aria-Select--Popover {\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  box-shadow: var(--surface-shadow-medium);\n  box-sizing: border-box;\n  overflow-y: auto;\n  padding: var(--layout-padding-hair) var(--layout-padding-xsmall);\n  width: var(\n    --trigger-width\n  ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\n}\n.bcds-react-aria-Select--ListBox[data-focused] {\n  outline: none;\n}\n.bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  margin-top: 1px;\n  padding-top: var(--layout-padding-hair);\n}\n\n/* Header label within Section of multi-section Select */\n.bcds-react-aria-Select--Header {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n}\n\n.bcds-react-aria-Select--ListBoxItem-icon {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  /* This `min-width` rule can cause horizontal overflow on very narrow Select\n  instances, but if we leave it out, the icons will shrink instead. */\n  min-width: 20px;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.bcds-react-aria-Select--ListBoxItem.destructive {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem-Text-description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n";
 styleInject(css_248z$9);
 /** Select displays a collapsible list of options and allows a user to select one or more of them. */
@@ -32054,7 +32054,7 @@ function Text({ elementType = "span", size = "medium", color = "primary", isUnst
     return (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { elementType: elementType, className: isUnstyled ? undefined : `bcds-react-aria-Text ${size} ${color}`, ...props, children: props.children }));
 }
-var css_248z$7 = ".bcds-react-aria-TextArea {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n  display: grid;\n  gap: var(--layout-margin-medium);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n  justify-self: flex-start;\n  grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n  justify-self: flex-end;\n  grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n.bcds-rect-aria-TextArea--Input::placeholder {\n  color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n  > .bcds-react-aria-TextArea--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focused]\n),\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focused][data-hovered]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-hovered]\n) {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n.bcds-react-aria-TextArea[data-disabled] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-disabled] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextArea[data-readonly] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-readonly] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextArea--Error {\n  display: flex;\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextArea--Error > svg {\n  padding-right: var(--layout-padding-xsmall);\n  color: var(--icons-color-danger);\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
+var css_248z$7 = ".bcds-react-aria-TextArea {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n  display: grid;\n  gap: var(--layout-margin-medium);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n  justify-self: flex-start;\n  grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n  justify-self: flex-end;\n  grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n  > .bcds-react-aria-TextArea--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled and invalid states */\n.bcds-react-aria-TextArea[data-disabled] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-disabled] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focused]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextArea[data-readonly] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-readonly] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid wins over focus: red border stays even while focused */\n.bcds-react-aria-TextArea[data-invalid]\n  > .bcds-react-aria-TextArea--Container:has(\n    > .bcds-react-aria-TextArea--Input[data-focused]\n  ) {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextArea--Error {\n  display: flex;\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextArea--Error > svg {\n  padding-right: var(--layout-padding-xsmall);\n  color: var(--icons-color-danger);\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
 styleInject(css_248z$7);
 function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }) {
@@ -32068,7 +32068,7 @@ function TextArea({ label, description, errorMessage, maxLength, onChange, value
     return (jsxRuntime.jsx($b8dcdc58eeae0d40$export$2c73285ae9390cec, { className: `bcds-react-aria-TextArea`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextArea--Label", children: isRequired ? `${label} (required)` : label })), jsxRuntime.jsx("div", { className: "bcds-react-aria-TextArea--Container", children: jsxRuntime.jsx($bd263d78e9bf3c56$export$f5c9f3c2c4054eec, { className: "bcds-react-aria-TextArea--Input", value: value, onChange: (e) => handleChange(e.target.value) }) }), description || maxLength ? (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Description", children: [description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "text", children: description })), maxLength && (jsxRuntime.jsxs("div", { className: "counter", children: [charCount, "/", maxLength] }))] })) : null, isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
 }
-var css_248z$6 = ".bcds-react-aria-TextField {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n  height: var(--layout-margin-xlarge);\n  min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n  height: var(--layout-margin-xxlarge);\n  min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n  color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focused]\n),\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focused][data-hovered]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextField--container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-disabled] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-readonly] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container\n  > svg#exclamation-icon {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
+var css_248z$6 = ".bcds-react-aria-TextField {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n  height: var(--layout-margin-xlarge);\n  min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n  height: var(--layout-margin-xxlarge);\n  min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n  color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextField--container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-disabled] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focused]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-readonly] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid wins over focus: red border stays even while focused */\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container:has(\n    > .bcds-react-aria-TextField--Input[data-focused]\n  ) {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container\n  > svg#exclamation-icon {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
 styleInject(css_248z$6);
 function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }) {
@@ -32096,7 +32096,7 @@ function ToggleButtonGroup({ label, size = "medium", children, ...props }) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { className: "bcds-react-aria-ToggleButtonGroup--Label", children: label })), jsxRuntime.jsx($bc25b811ec97a172$export$40258cc1d95ff477, { className: `bcds-react-aria-ToggleButtonGroup ${size === "small" ? "small" : "medium"}`, ...props, children: children })] }));
 }
-var css_248z$2 = ".bcds-react-aria-Switch {\n  display: flex;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n  align-items: center;\n  width: var(--layout-margin-xxlarge);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-primary-disabled);\n  border-radius: var(--icons-size-medium);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch container color if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator {\n    transition: none;\n  }\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-secondary-default);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--icons-size-small);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch circle indicator if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator::before {\n    transition: none;\n  }\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n  background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n  transform: translateX(100%);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] {\n  cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n  background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Switch[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n  background-color: var(--surface-color-primary-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n  background-color: var(--theme-gray-10);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] {\n  cursor: not-allowed;\n}\n";
+var css_248z$2 = ".bcds-react-aria-Switch {\n  display: flex;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n  align-items: center;\n  width: var(--layout-margin-xxlarge);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-primary-disabled);\n  border-radius: var(--icons-size-medium);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch container color if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator {\n    transition: none;\n  }\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-secondary-default);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--icons-size-small);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch circle indicator if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator::before {\n    transition: none;\n  }\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n  background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n  transform: translateX(100%);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-default);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n  background-color: var(--surface-color-primary-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n  background-color: var(--theme-gray-10);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] {\n  cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n  background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-hover);\n}\n\n/* Disabled */\n.bcds-react-aria-Switch[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] {\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$2);
 function Switch({ labelPosition = "right", children, ...props }) {
@@ -32110,7 +32110,7 @@ function Tooltip(props) {
     return (jsxRuntime.jsxs($05a50f7d78b03ad9$export$28c660c63b792dea, { className: "bcds-react-aria-Tooltip", ...props, children: [jsxRuntime.jsx($4fcfe18fac72dabd$export$746d02f47f4d381, { className: "bcds-react-aria-OverlayArrow", children: jsxRuntime.jsx(SvgTooltipArrowUp, {}) }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children })] }));
 }
-var css_248z = ".bcds-react-aria-NumberField {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-margin-hair);\n  background-color: var(--surface-color-forms-default);\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n/* Input and controls */\n.bcds-react-aria-NumberField--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n}\n/* Decrement button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child {\n  border-right: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child\n  > .bcds-react-aria-Button {\n  border-top-right-radius: var(--layout-border-radius-none);\n  border-bottom-right-radius: var(--layout-border-radius-none);\n}\n/* Increment button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child {\n  border-left: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child\n  > .bcds-react-aria-Button {\n  border-top-left-radius: var(--layout-border-radius-none);\n  border-bottom-left-radius: var(--layout-border-radius-none);\n}\n/* Button icons */\n.bcds-react-aria-NumberField--Group > button > svg {\n  color: var(--icons-color-primary);\n}\n/* Input container */\n.bcds-react-aria-NumberField--InputContainer {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  min-width: 0;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  padding: var(--layout-padding-small) 0.75rem;\n}\n/* Input field */\n.bcds-react-aria-NumberField--Input {\n  box-sizing: border-box;\n  border: none;\n  width: 100%;\n}\n\n/* Sizing */\n.bcds-react-aria-NumberField.medium > .bcds-react-aria-NumberField--Group {\n  height: 40px;\n}\n.bcds-react-aria-NumberField.medium .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-NumberField.small > .bcds-react-aria-NumberField--Group {\n  height: 32px;\n}\n.bcds-react-aria-NumberField.small .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-small-body);\n}\n\n/* Label above the input field */\n.bcds-react-aria-NumberField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* \"Required\" label */\n.bcds-react-aria-NumberField--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-small) var(--layout-padding-xsmall);\n}\n\n/* Description below the input field */\n.bcds-react-aria-NumberField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Hover state */\n.bcds-react-aria-NumberField--Group[data-hovered],\n.bcds-react-aria-NumberField--Group[data-hovered][data-disabled],\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Focus state */\n.bcds-react-aria-NumberField--Group[data-focus-within],\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button,\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  .bcds-react-aria-NumberField--Input,\n.bcds-react-aria-NumberField--Group[data-focus-visible]\n  .bcds-react-aria-NumberField--Input {\n  outline: none;\n}\n.bcds-react-aria-NumberField--Group[data-focus-visible] {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Error state */\n.bcds-react-aria-NumberField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  .bcds-react-aria-NumberField--InputContainer\n  > svg {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Disabled and read-only states */\n.bcds-react-aria-NumberField[data-disabled]\n  > .bcds-react-aria-NumberField--Group,\n.bcds-react-aria-NumberField[data-disabled]\n  .bcds-react-aria-NumberField--Input {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n}\n/* BCDS Button style tweaks */\n/* Hover/focus states */\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n}\n/* Disabled/read-only states */\n.bcds-react-aria-NumberField--Group[data-disabled],\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n/* Error state */\n.bcds-react-aria-NumberField--Group[data-invalid]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled],\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n";
+var css_248z = ".bcds-react-aria-NumberField {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-margin-hair);\n  background-color: var(--surface-color-forms-default);\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n/* Input and controls */\n.bcds-react-aria-NumberField--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n}\n/* Decrement button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child {\n  border-right: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child\n  > .bcds-react-aria-Button {\n  border-top-right-radius: var(--layout-border-radius-none);\n  border-bottom-right-radius: var(--layout-border-radius-none);\n}\n/* Increment button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child {\n  border-left: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child\n  > .bcds-react-aria-Button {\n  border-top-left-radius: var(--layout-border-radius-none);\n  border-bottom-left-radius: var(--layout-border-radius-none);\n}\n/* Button icons */\n.bcds-react-aria-NumberField--Group > button > svg {\n  color: var(--icons-color-primary);\n}\n/* Input container */\n.bcds-react-aria-NumberField--InputContainer {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  min-width: 0;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  padding: var(--layout-padding-small) 0.75rem;\n}\n/* Input field */\n.bcds-react-aria-NumberField--Input {\n  box-sizing: border-box;\n  border: none;\n  width: 100%;\n}\n\n/* Sizing */\n.bcds-react-aria-NumberField.medium > .bcds-react-aria-NumberField--Group {\n  height: 40px;\n}\n.bcds-react-aria-NumberField.medium .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-NumberField.small > .bcds-react-aria-NumberField--Group {\n  height: 32px;\n}\n.bcds-react-aria-NumberField.small .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-small-body);\n}\n\n/* Label above the input field */\n.bcds-react-aria-NumberField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* \"Required\" label */\n.bcds-react-aria-NumberField--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-small) var(--layout-padding-xsmall);\n}\n\n/* Description below the input field */\n.bcds-react-aria-NumberField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Hover state */\n.bcds-react-aria-NumberField--Group[data-hovered],\n.bcds-react-aria-NumberField--Group[data-hovered][data-disabled],\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Focus state */\n.bcds-react-aria-NumberField--Group[data-focus-within],\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button,\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  .bcds-react-aria-NumberField--Input,\n.bcds-react-aria-NumberField--Group[data-focus-visible]\n  .bcds-react-aria-NumberField--Input {\n  outline: none;\n}\n.bcds-react-aria-NumberField--Group[data-focus-visible] {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Error state */\n.bcds-react-aria-NumberField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  .bcds-react-aria-NumberField--InputContainer\n  > svg {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Disabled and read-only states */\n.bcds-react-aria-NumberField[data-disabled]\n  > .bcds-react-aria-NumberField--Group,\n.bcds-react-aria-NumberField[data-disabled]\n  .bcds-react-aria-NumberField--Input {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n}\n/* BCDS Button style tweaks */\n/* Disabled/read-only states */\n.bcds-react-aria-NumberField--Group[data-disabled],\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n/* Error state */\n.bcds-react-aria-NumberField--Group[data-invalid]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button {\n  border-top: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n/* Hover/focus states */\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n}\n/* Error state combos */\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled],\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n";
 styleInject(css_248z);
 function NumberField({ size = "medium", label, description, minValue = 0, errorMessage, ...props }) {

package/dist/esm/index.js CHANGED Viewed

@@ -30461,7 +30461,7 @@ function AccordionGroup({ title, titleElement, children, ...props }) {
     return (jsxs(Fragment$1, { children: [title && (jsx("div", { className: "bcds-react-aria-DisclosureGroup--Title", children: getTitle() })), jsx($a3e16eab0ea4036c$export$944aceb4f8c89f10, { className: "bcds-react-aria-DisclosureGroup", ...props, children: children })] }));
 }
-var css_248z$A = ".bcds-Alert-Banner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n}\n\n.bcds-Alert-Banner--Container {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-padding-medium);\n}\n\n.bcds-Alert-Banner--Icon {\n  place-self: first baseline flex-start;\n  padding-top: var(--layout-padding-xsmall);\n  color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--Content {\n  display: inline-flex;\n  gap: var(--layout-margin-medium);\n  align-items: first baseline;\n  flex-grow: 1;\n  flex-wrap: wrap;\n  color: var(--typography-color-primary-invert);\n}\n\n/* Layout */\n.bcds-Alert-Banner.fixed {\n  padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n.bcds-Alert-Banner.fixed > .bcds-Alert-Banner--Container {\n  max-width: 1100px;\n}\n.bcds-Alert-Banner.fluid {\n  padding: var(--layout-padding-none) var(--layout-padding-large);\n}\n\n/* Sizing */\n.bcds-Alert-Banner.small > .bcds-Alert-Banner--Container {\n  padding: var(--layout-padding-hair) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.small .bcds-Alert-Banner--Content {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-Alert-Banner.medium > .bcds-Alert-Banner--Container {\n  padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.medium .bcds-Alert-Banner--Content {\n  font: var(--typography-regular-body);\n}\n\n/* Close icon */\n.bcds-Alert-Banner--closeIcon {\n  align-self: first baseline;\n}\n\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\n  color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary-invert);\n}\n\n/* Variants */\n\n/* Info theme */\n.bcds-Alert-Banner.info {\n  background-color: var(--surface-color-background-dark-blue);\n}\n\n/* Success theme */\n.bcds-Alert-Banner.success {\n  background-color: var(--support-border-color-success);\n}\n\n/* Warning theme */\n.bcds-Alert-Banner.warning {\n  background-color: var(--support-border-color-warning);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\n  color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\n  color: var(--typography-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary);\n}\n\n/* Danger theme */\n.bcds-Alert-Banner.danger {\n  background-color: var(--support-border-color-danger);\n}\n\n/* Black theme */\n\n.bcds-Alert-Banner.black {\n  background-color: var(--theme-gray-110);\n}\n";
+var css_248z$A = ".bcds-Alert-Banner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n}\n\n.bcds-Alert-Banner--Container {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-padding-medium);\n}\n\n.bcds-Alert-Banner--Icon {\n  place-self: first baseline flex-start;\n  padding-top: var(--layout-padding-xsmall);\n  color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--Content {\n  display: inline-flex;\n  gap: var(--layout-margin-medium);\n  align-items: first baseline;\n  flex-grow: 1;\n  flex-wrap: wrap;\n  color: var(--typography-color-primary-invert);\n}\n\n/* Layout */\n.bcds-Alert-Banner.fixed {\n  padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n.bcds-Alert-Banner.fixed > .bcds-Alert-Banner--Container {\n  max-width: 1100px;\n}\n.bcds-Alert-Banner.fluid {\n  padding: var(--layout-padding-none) var(--layout-padding-large);\n}\n\n/* Sizing */\n.bcds-Alert-Banner.small > .bcds-Alert-Banner--Container {\n  padding: var(--layout-padding-hair) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.small .bcds-Alert-Banner--Content {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-Alert-Banner.medium > .bcds-Alert-Banner--Container {\n  padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.medium .bcds-Alert-Banner--Content {\n  font: var(--typography-regular-body);\n}\n\n/* Close icon */\n.bcds-Alert-Banner--closeIcon {\n  align-self: first baseline;\n}\n\n.bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\n  color: var(--icons-color-primary);\n}\n\n/* Variants */\n\n/* Info theme */\n.bcds-Alert-Banner.info {\n  background-color: var(--surface-color-background-dark-blue);\n}\n\n/* Success theme */\n.bcds-Alert-Banner.success {\n  background-color: var(--support-border-color-success);\n}\n\n/* Warning theme */\n.bcds-Alert-Banner.warning {\n  background-color: var(--support-border-color-warning);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\n  color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\n  color: var(--typography-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary);\n}\n\n/* Danger theme */\n.bcds-Alert-Banner.danger {\n  background-color: var(--support-border-color-danger);\n}\n\n/* Black theme */\n\n.bcds-Alert-Banner.black {\n  background-color: var(--theme-gray-110);\n}\n";
 styleInject(css_248z$A);
 function SvgCheckCircleIcon({ size = "medium", title, id, ...props }) {
@@ -30527,7 +30527,7 @@ function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabe
     return (jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
 }
-var css_248z$y = ".bcds-react-aria-AlertDialog {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Variant icons */\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-primary);\n}\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-success);\n}\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-warning);\n}\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n\n.bcds-react-aria-AlertDialog--Header {\n  display: inline-flex;\n  flex-direction: row;\n  gap: var(--layout-padding-small);\n  justify-content: space-between;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n  flex-grow: 1;\n  font: var(--typography-bold-h5);\n  color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n  place-self: center flex-start;\n  padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n  justify-self: flex-end;\n  color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--children {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
+var css_248z$y = ".bcds-react-aria-AlertDialog {\n  display: flex;\n  flex-direction: column;\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n  place-self: center flex-start;\n  padding-top: var(--layout-padding-xsmall);\n}\n\n/* Variant icons */\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-primary);\n}\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-success);\n}\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-warning);\n}\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n\n.bcds-react-aria-AlertDialog--Header {\n  display: inline-flex;\n  flex-direction: row;\n  gap: var(--layout-padding-small);\n  justify-content: space-between;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n  flex-grow: 1;\n  font: var(--typography-bold-h5);\n  color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n  justify-self: flex-end;\n  color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--children {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
 styleInject(css_248z$y);
 /* Sets correct left icon for selected variant */
@@ -31624,7 +31624,7 @@ function SvgDashIcon({ title, id, ...props }) {
     return (jsxs("svg", { id: id, width: "8", height: "10", viewBox: "0 0 8 2", xmlns: "http://www.w3.org/2000/svg", role: isMeaningful ? "img" : undefined, "aria-labelledby": isMeaningful ? titleId : undefined, "aria-hidden": isMeaningful ? undefined : true, focusable: "false", ...props, children: [title && jsx("title", { id: titleId, children: title }), jsx("path", { d: "M6.99005 1.96004H1.01005C0.479855 1.96004 0.0500488 1.53023 0.0500488 1.00004C0.0500488 0.469846 0.479855 0.0400391 1.01005 0.0400391H6.99005C7.52024 0.0400391 7.95005 0.469846 7.95005 1.00004C7.95005 1.53023 7.52024 1.96004 6.99005 1.96004H6.99005Z", fill: "currentColor" })] }));
 }
-var css_248z$u = ".bcds-react-aria-Checkbox {\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n}\n\n/* Checkbox */\n.bcds-react-aria-Checkbox > .checkbox {\n  align-self: first baseline;\n  display: flex;\n  margin-top: var(--layout-margin-hair);\n  justify-content: space-around;\n  width: var(--icons-size-small);\n  height: var(--icons-size-small);\n  min-width: var(--icons-size-small);\n  background-color: var(--surface-color-secondary-default);\n  border-color: var(--surface-color-border-medium);\n  border-style: solid;\n  border-width: var(--layout-border-width-small);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Checkbox > .checkbox > svg {\n  align-self: center;\n}\n\n/* Label */\n.bcds-react-aria-Checkbox > .label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Focus */\n.bcds-react-aria-Checkbox[data-focus-visible] > .checkbox {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Hover */\n.bcds-react-aria-Checkbox[data-hovered] > .checkbox {\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Checkbox[data-selected][data-hovered] > .checkbox {\n  background-color: var(--surface-color-primary-hover);\n  border-color: var(--surface-color-primary-hover);\n}\n\n/* Pressed */\n.bcds-react-aria-Checkbox[data-pressed] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n}\n\n/* Selected */\n.bcds-react-aria-Checkbox[data-selected] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n  border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-selected] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n}\n\n/* Disabled */\n.bcds-react-aria-Checkbox[data-disabled] {\n  cursor: not-allowed;\n}\n.bcds-react-aria-Checkbox[data-disabled] > .checkbox {\n  border-color: var(--surface-color-border-medium);\n  background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-disabled] > .label {\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox {\n  border-color: var(--surface-color-primary-disabled);\n  background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox > svg {\n  color: var(--icons-color-disabled);\n}\n\n/* Indeterminate */\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n  border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox {\n  background-color: var(--surface-color-primary-disabled);\n  border-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-invalid] > .checkbox {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n  align-self: center;\n  vertical-align: middle;\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox > svg {\n  color: var(--icons-color-disabled);\n}\n\n/* Read-only */\n.bcds-react-aria-Checkbox[data-readonly] {\n  cursor: not-allowed;\n}\n\n/* Invalid */\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Checkbox[data-selected][data-invalid] > .checkbox {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n";
+var css_248z$u = ".bcds-react-aria-Checkbox {\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n}\n\n/* Checkbox */\n.bcds-react-aria-Checkbox > .checkbox {\n  align-self: first baseline;\n  display: flex;\n  margin-top: var(--layout-margin-hair);\n  justify-content: space-around;\n  width: var(--icons-size-small);\n  height: var(--icons-size-small);\n  min-width: var(--icons-size-small);\n  background-color: var(--surface-color-secondary-default);\n  border-color: var(--surface-color-border-medium);\n  border-style: solid;\n  border-width: var(--layout-border-width-small);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Checkbox > .checkbox > svg {\n  align-self: center;\n}\n\n/* Label */\n.bcds-react-aria-Checkbox > .label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Focus */\n.bcds-react-aria-Checkbox[data-focus-visible] > .checkbox {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Hover */\n.bcds-react-aria-Checkbox[data-hovered] > .checkbox {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Pressed */\n.bcds-react-aria-Checkbox[data-pressed] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n}\n\n/* Selected */\n.bcds-react-aria-Checkbox[data-selected] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n  border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-selected] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n}\n\n/* Disabled */\n.bcds-react-aria-Checkbox[data-disabled] {\n  cursor: not-allowed;\n}\n.bcds-react-aria-Checkbox[data-disabled] > .checkbox {\n  border-color: var(--surface-color-border-medium);\n  background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-disabled] > .label {\n  color: var(--typography-color-disabled);\n}\n\n/* Indeterminate */\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox {\n  background-color: var(--surface-color-primary-default);\n  border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n  align-self: center;\n  vertical-align: middle;\n}\n\n/* Read-only */\n.bcds-react-aria-Checkbox[data-readonly] {\n  cursor: not-allowed;\n}\n\n/* Invalid */\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox > svg {\n  color: var(--icons-color-primary-invert);\n}\n\n/* Selected and hovered */\n.bcds-react-aria-Checkbox[data-selected][data-hovered] > .checkbox {\n  background-color: var(--surface-color-primary-hover);\n  border-color: var(--surface-color-primary-hover);\n}\n\n/* Selected and disabled */\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox {\n  border-color: var(--surface-color-primary-disabled);\n  background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox > svg {\n  color: var(--icons-color-disabled);\n}\n\n/* Indeterminate multi-state */\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox {\n  background-color: var(--surface-color-primary-disabled);\n  border-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox > svg {\n  color: var(--icons-color-disabled);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-invalid] > .checkbox {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n\n/* Selected and invalid */\n.bcds-react-aria-Checkbox[data-selected][data-invalid] > .checkbox {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n";
 styleInject(css_248z$u);
 function Checkbox({ value, children, ...props }) {
@@ -31638,7 +31638,7 @@ function CheckboxGroup({ orientation = "vertical", label, description, errorMess
     return (jsx($ed8ccb2e23e76301$export$4aa08d5625cb8ead, { className: `bcds-react-aria-CheckboxGroup`, ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment$1, { children: [label && (jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-CheckboxGroup--label", children: [label, " ", isRequired && "(required)"] })), jsx("div", { className: `bcds-react-aria-CheckboxGroup--options ${orientation} flex-wrap-${flexWrap}`, children: jsx(Fragment$1, { children: children }) }), description && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-CheckboxGroup--description", children: description })), isInvalid && (jsxs("div", { className: "bcds-react-aria-CheckboxGroup--error", children: [jsx(SvgExclamationIcon, {}), jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
 }
-var css_248z$s = ".bcds-react-aria-DatePicker {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  background-color: var(--surface-color-forms-default);\n  align-self: flex-start;\n  width: 100%;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n.bcds-react-aria-DatePicker--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  gap: var(--layout-margin-small);\n}\n.bcds-react-aria-DatePicker--Input {\n  display: inline;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  align-items: center;\n  white-space: nowrap;\n  border: none;\n}\n\n/* Sizing */\n.bcds-react-aria-DatePicker.small > .bcds-react-aria-DatePicker--Group {\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n  height: 32px;\n}\n.bcds-react-aria-DatePicker.small .bcds-react-aria-DatePicker--Input {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-DatePicker.medium > .bcds-react-aria-DatePicker--Group {\n  padding: var(--layout-padding-xsmall) 0.75rem;\n  height: 40px;\n}\n.bcds-react-aria-DatePicker.medium .bcds-react-aria-DatePicker--Input {\n  font: var(--typography-regular-body);\n}\n\n/* Label */\n.bcds-react-aria-DatePicker--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Required indicator */\n.bcds-react-aria-DatePicker--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n/* Description */\n.bcds-react-aria-DatePicker--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Error message */\n.bcds-react-aria-DatePicker--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid] > .bcds-react-aria-DatePicker--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid]\n  > .bcds-react-aria-DatePicker--Group\n  > svg {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n/* Format helper text */\n.bcds-react-aria-DatePicker--FormatHelpText {\n  unicode-bidi: embed;\n  direction: ltr;\n}\n\n/* Hover and focus */\n.bcds-react-aria-DatePicker--Group[data-hovered] {\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  > .bcds-react-aria-DatePicker--Group {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  > .bcds-react-aria-DatePicker--Group:has(\n    .bcds-react-aria-Button[data-focus-visible]\n  ) {\n  outline: none; /* Hide focus ring when button is focused */\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  .bcds-react-aria-DatePicker--Segment {\n  outline: none;\n}\n.bcds-react-aria-DatePicker--Segment[data-focused] {\n  outline: none;\n  border-radius: var(--layout-border-radius-small);\n  background-color: var(--surface-color-primary-default);\n  color: var(--typography-color-primary-invert);\n  padding: var(--layout-padding-hair);\n  margin: var(--layout-margin-none) var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker > .bcds-react-aria-Button[data-focused] {\n  outline: none;\n}\n\n/* Disabled and read-only */\n.bcds-react-aria-DatePicker[data-readonly]\n  > .bcds-react-aria-DatePicker--Group {\n  cursor: not-allowed;\n}\n.bcds-react-aria-DatePicker--Segment[data-readonly][data-focused] {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-DatePicker[data-disabled]\n  > .bcds-react-aria-DatePicker--Group {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n";
+var css_248z$s = ".bcds-react-aria-DatePicker {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  background-color: var(--surface-color-forms-default);\n  align-self: flex-start;\n  width: 100%;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n.bcds-react-aria-DatePicker--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  gap: var(--layout-margin-small);\n}\n.bcds-react-aria-DatePicker--Input {\n  display: inline;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  align-items: center;\n  white-space: nowrap;\n  border: none;\n}\n\n/* Sizing */\n.bcds-react-aria-DatePicker.small > .bcds-react-aria-DatePicker--Group {\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n  height: 32px;\n}\n.bcds-react-aria-DatePicker.small .bcds-react-aria-DatePicker--Input {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-DatePicker.medium > .bcds-react-aria-DatePicker--Group {\n  padding: var(--layout-padding-xsmall) 0.75rem;\n  height: 40px;\n}\n.bcds-react-aria-DatePicker.medium .bcds-react-aria-DatePicker--Input {\n  font: var(--typography-regular-body);\n}\n\n/* Label */\n.bcds-react-aria-DatePicker--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Required indicator */\n.bcds-react-aria-DatePicker--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n/* Description */\n.bcds-react-aria-DatePicker--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Error message */\n.bcds-react-aria-DatePicker--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid] > .bcds-react-aria-DatePicker--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid]\n  > .bcds-react-aria-DatePicker--Group\n  > svg {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n/* Format helper text */\n.bcds-react-aria-DatePicker--FormatHelpText {\n  unicode-bidi: embed;\n  direction: ltr;\n}\n\n/* Disabled and read-only */\n.bcds-react-aria-DatePicker[data-readonly]\n  > .bcds-react-aria-DatePicker--Group {\n  cursor: not-allowed;\n}\n.bcds-react-aria-DatePicker[data-disabled]\n  > .bcds-react-aria-DatePicker--Group {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n\n/* Hover and focus */\n.bcds-react-aria-DatePicker--Group[data-hovered] {\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  > .bcds-react-aria-DatePicker--Group {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  > .bcds-react-aria-DatePicker--Group:has(\n    .bcds-react-aria-Button[data-focus-visible]\n  ) {\n  outline: none; /* Hide focus ring when button is focused */\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n  .bcds-react-aria-DatePicker--Segment {\n  outline: none;\n}\n.bcds-react-aria-DatePicker--Segment[data-focused] {\n  outline: none;\n  border-radius: var(--layout-border-radius-small);\n  background-color: var(--surface-color-primary-default);\n  color: var(--typography-color-primary-invert);\n  padding: var(--layout-padding-hair);\n  margin: var(--layout-margin-none) var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker--Segment[data-readonly][data-focused] {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-DatePicker > .bcds-react-aria-Button[data-focused] {\n  outline: none;\n}\n";
 styleInject(css_248z$s);
 var css_248z$r = ".bcds-react-aria-Dialog {\n  display: flex;\n  flex-direction: column;\n  min-height: var(--layout-margin-xxxlarge);\n}\n\n.bcds-react-aria-Dialog--Container {\n  position: relative;\n}\n\n/* Close icon */\n.bcds-react-aria-Dialog--closeIcon {\n  color: var(--icons-color-primary);\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Dialog--closeIcon > svg {\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
@@ -31698,7 +31698,7 @@ function SvgBcLogo({ title, id, ...props }) {
     return (jsxs("svg", { id: id, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 847.65 327.01", role: isMeaningful ? "img" : undefined, "aria-labelledby": isMeaningful ? titleId : undefined, "aria-hidden": isMeaningful ? undefined : true, focusable: "false", ...props, children: [title && jsx("title", { id: titleId, children: title }), jsx("path", { d: "M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z", className: "bcds-bc-logo--whiteFill" }), jsxs("g", { children: [jsxs("g", { children: [jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", className: "bcds-bc-logo--goldFill" }), jsx("path", { d: "M423.47,116.64c0-6.39-.45-8.08-4.76-8.43l-3-.21c-.49-.39-.35-2.12.1-2.16,5.17-.46,11.69-.69,20.6-.69,6.04,0,11.79.43,16.1,2.42,4.12,1.81,7.28,5.26,7.28,10.79,0,6.22-4.03,9.41-9.77,11.83,0,.86.77,1.12,1.82,1.29,5.17.86,12.84,5.18,12.84,14.42,0,10.01-8.24,16.75-25.49,16.75-2.78,0-7.47-.26-11.5-.26s-7.47.17-11.02.26c-.57-.26-.77-1.64-.19-2.16l1.73-.26c5.08-.78,5.27-1.73,5.27-10.79v-32.8ZM431.32,128.12c0,2.42.1,2.59,4.98,2.42,9.77-.35,15.04-2.94,15.04-11.05s-7-11.65-14.28-11.65c-2.11,0-3.55.17-4.41.52-.96.26-1.34.69-1.34,2.24v17.52ZM431.32,148.14c0,3.11.19,7.51,2.01,9.41,1.82,1.98,4.7,2.42,7.57,2.42,8.53,0,15.04-3.45,15.04-12.08,0-6.82-3.83-14.76-19.07-14.76-5.17,0-5.56.52-5.56,2.24v12.77Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M531.26,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.06-.07,10.15-.22c.49.22.65,1.55.16,1.84l-2.04.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.04.22c.49.29.33,1.62-.16,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.66-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M576.66,151.53c0,7.74.15,8.85,4.6,9.22l2.45.22c.46.29.31,1.62-.15,1.84-4.37-.15-6.98-.22-10.05-.22s-5.75.07-10.66.22c-.46-.22-.62-1.47,0-1.84l2.76-.22c4.37-.37,4.75-1.48,4.75-9.22v-32.96c0-2.28,0-2.36-2.3-2.36h-4.22c-3.3,0-7.51.15-9.43,1.84-1.84,1.62-2.61,3.24-3.45,5.09-.62.44-1.69.07-1.99-.52,1.22-3.32,2.38-8.04,2.91-10.98.23-.15,1.23-.22,1.46,0,.46,2.36,2.99,2.29,6.52,2.29h31.05c4.14,0,4.83-.15,5.98-2.06.38-.15,1.23-.07,1.38.22-.84,3.02-1.38,9-1.15,11.21-.31.59-1.61.59-1.99.15-.23-1.84-.77-4.57-1.92-5.38-1.76-1.25-4.68-1.84-8.89-1.84h-5.44c-2.3,0-2.22.07-2.22,2.51v32.81Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M609.53,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.05-.07,10.15-.22c.49.22.66,1.55.17,1.84l-2.05.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.05.22c.49.29.33,1.62-.17,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.65-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M646.2,163.57c-7.31,0-11.92-1.92-13.57-2.73-1.04-1.62-2.18-6.86-2.35-10.32.44-.52,1.74-.66,2.09-.22,1.31,3.76,4.87,10.98,14.96,10.98,7.31,0,10.87-4.05,10.87-8.48,0-3.24-.78-6.86-7.13-10.32l-8.26-4.57c-4.35-2.43-9.4-6.64-9.4-12.68,0-7,6.44-12.68,17.75-12.68,2.7,0,5.83.44,8.09.96,1.13.29,2.35.44,3.04.44.78,1.77,1.57,5.9,1.57,9-.35.44-1.74.66-2.18.22-1.13-3.54-3.48-8.33-11.83-8.33s-10.35,4.79-10.35,8.18c0,4.28,4.18,7.38,7.39,9.07l6.96,3.69c5.48,2.88,10.88,7.15,10.88,14.16,0,8.11-7.22,13.64-18.53,13.64Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M689.99,138.78c-3.81,0-3.96.15-3.96,2.36v10.4c0,7.74.4,8.77,4.84,9.22l2.3.22c.48.29.32,1.62-.16,1.84-4.28-.15-6.98-.22-10.08-.22-3.41,0-6.11.15-9.2.22-.47-.22-.63-1.4-.16-1.84l1.35-.22c4.45-.74,4.6-1.48,4.6-9.22v-26.54c0-7.74-.55-8.99-4.68-9.29l-2.06-.15c-.48-.29-.32-1.62.16-1.84,3.89.07,6.58.22,10,.22,3.1,0,5.79-.07,9.2-.22.48.22.63,1.55.16,1.84l-1.51.15c-4.6.44-4.76,1.55-4.76,9.29v8.48c0,2.28.16,2.36,3.96,2.36h22.69c3.81,0,3.97-.07,3.97-2.36v-8.48c0-7.74-.16-8.85-4.84-9.29l-1.51-.15c-.48-.29-.32-1.62.16-1.84,3.65.15,6.35.22,9.6.22s5.79-.07,9.36-.22c.48.22.63,1.55.16,1.84l-1.66.15c-4.6.44-4.76,1.55-4.76,9.29v26.54c0,7.74.16,8.7,4.76,9.22l1.9.22c.47.29.32,1.62-.16,1.84-3.81-.15-6.51-.22-9.6-.22-3.25,0-6.11.07-9.6.22-.48-.22-.63-1.4-.16-1.84l1.51-.22c4.84-.74,4.84-1.48,4.84-9.22v-10.4c0-2.21-.16-2.36-3.97-2.36h-22.69Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M378.06,179.01c6.52-5.07,14.83-7.57,24.12-7.57,4.82,0,11.61.98,15.81,2.14,1.07.27,1.7.45,2.5.36.09,2.05.54,7.65,1.25,13.09-.45.62-1.79.71-2.41.18-1.34-6.05-5.36-13-18.31-13-13.67,0-25.28,8.64-25.28,27.06s11.88,29.02,26.53,29.02c11.52,0,16.62-7.48,18.67-12.73.63-.44,1.97-.27,2.32.36-.62,4.63-2.95,10.5-4.29,12.2-1.07.18-2.14.53-3.13.89-1.97.71-8.4,2.05-14.11,2.05-8.04,0-15.72-1.6-22.24-5.96-7.15-4.9-12.69-12.99-12.69-24.48,0-9.88,4.47-18.34,11.26-23.59Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M426.92,207.81c0-14.75,11.61-26.03,27.56-26.03,17.88,0,26.86,12.31,26.86,25.29,0,14.89-11.92,25.73-26.86,25.73-17.19,0-27.56-11.72-27.56-25ZM473.6,209.35c0-12.17-5.65-25.29-20.44-25.29-8.05,0-18.5,5.24-18.5,21.38,0,10.91,5.57,25.07,20.82,25.07,9.29,0,18.12-6.64,18.12-21.16Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M568.68,201.47c0-4.57-.16-13.05-1.49-15.26-.55-.89-1.95-1.4-3.91-1.55l-1.95-.15c-.47-.52-.31-1.47.15-1.77,2.97.15,5.86.22,8.91.22,3.28,0,5.39-.08,8.21-.22.62.37.55,1.33.16,1.77l-1.88.15c-1.95.15-3.44.81-3.91,1.77-1.09,2.43-1.09,10.91-1.09,15.04v8.33c0,6.42-1.1,13.2-5.47,17.62-3.36,3.47-9.14,5.38-14.93,5.38-5.39,0-10.79-.96-14.62-4.05-4.14-3.24-6.1-8.63-6.1-17.4v-17.4c0-7.67-.16-8.92-4.69-9.29l-1.96-.15c-.47-.29-.31-1.55.15-1.77,3.91.15,6.57.22,9.69.22s5.78-.08,9.61-.22c.47.22.63,1.47.16,1.77l-1.88.15c-4.53.37-4.69,1.62-4.69,9.29v15.93c0,11.87,3.91,19.69,15.87,19.69,11.33,0,15.63-8.41,15.63-19.61v-8.48Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M659.52,192.26c0-5.51-.35-6.93-4.23-7.22l-2.77-.27c-.31-.28-.48-1.78.09-1.82,4.67-.35,10.54-.59,18.57-.59,5.44,0,10.62.37,14.51,2.08,3.71,1.57,6.56,4.54,6.56,9.31,0,5.36-3.63,8.12-8.81,10.2,0,.75.69.97,1.64,1.12,4.67.74,11.58,4.47,11.58,12.44,0,8.64-7.43,14.45-22.98,14.45-2.5,0-6.74-.22-10.37-.22s-6.74.15-9.93.22c-.52-.22-.69-1.41-.17-1.86l1.55-.22c4.58-.67,4.75-1.49,4.75-9.31v-28.3ZM666.6,202.16c0,2.09.09,2.24,4.49,2.09,8.81-.3,13.56-2.53,13.56-9.53s-6.3-10.05-12.87-10.05c-1.9,0-3.2.15-3.97.45-.87.22-1.21.59-1.21,1.94v15.12ZM666.6,219.44c0,2.68.17,6.48,1.81,8.12,1.64,1.71,4.23,2.08,6.82,2.08,7.69,0,13.56-2.98,13.56-10.43,0-5.88-3.45-12.73-17.19-12.73-4.67,0-5.01.44-5.01,1.94v11.02Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M518.75,160.97l-2.05-.18c-.41-.04-.78-.1-1.13-.15-2.99-.53-4.19-3.2-5.6-5.67l-7.08-12.32c-1.22-2.05-2.53-4.82-5.33-5.21,7.25-.87,13.81-5.06,13.81-12.24,0-8.3-8.21-12.01-16.52-12.01-4.98,0-9.52.13-14.59.13-2.79,0-6.12-.13-8.92-.13-1.55,0-1.57.32-1.57,1.18,0,1.28.54.92,2.19,1.02,5.9.33,5.68,1.43,5.68,6.49v32.31c0,4.62.4,6-4.46,6.44,0,0-.74.08-1.17.12l-2.06.21c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.12,3.03-.12,2.69-.08,5.38-.28,8.06-.28s5.29.21,7.95.29h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.07-.2c-.42-.05-1.15-.11-1.15-.11-4.9-.33-4.6-1.71-4.6-6.46v-12.17c0-.71-.09-2.61.44-3.16.44-.48,1.22-.4,1.92-.4,6.64,0,6.55.63,9.7,6.16l8.56,15.4c.7,1.19,1.22,2.69,2.97,2.69h7.44c.94.03,1.92.06,3.01.1.49-.22.65-1.4.16-1.84ZM488.92,136.74c-1.49,0-4.46.55-4.46-1.42v-14.14c0-5.53.18-6.32,6.82-6.32,7.78,0,12.58,3.95,12.58,11.22,0,3.16-1.14,6.08-4.02,8.06-3.32,2.29-6.9,2.61-10.92,2.61Z", className: "bcds-bc-logo--blueFill" }), jsxs("g", { children: [jsx("path", { d: "M490.53,194.2c0-7.74-.16-8.92-5.27-9.29l-2.03-.15c-.49-.3-.32-1.62.16-1.84,4.54.15,7.3.22,10.54.22s5.92-.07,9.98-.22c.49.22.65,1.55.16,1.84l-1.95.15c-4.78.37-4.95,1.55-4.95,9.29v25.66c0,4.64.24,6.56,1.7,7.96.89.81,2.43,1.7,8.84,1.7,6.89,0,8.6-.3,9.9-.96,1.62-.89,3.73-3.54,5.35-7.3.49-.37,2.03-.07,2.03.44,0,.81-2.27,8.33-3.41,10.32-4.13-.15-11.84-.22-20.2-.22h-7.46c-3.41,0-6,.07-10.54.22-.49-.22-.65-1.4-.16-1.84l2.43-.22c4.7-.44,4.87-1.48,4.87-9.22v-26.54Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M707.79,194.34c0-7.81-.16-9.07-4.86-9.44l-1.99-.15c-.48-.3-.32-1.62.16-1.84,3.98.15,6.69.22,10.03.22s5.89-.07,9.87-.22c.48.22.64,1.55.16,1.84l-1.99.15c-4.7.37-4.86,1.62-4.86,9.44v26.25c0,7.82.16,8.85,4.86,9.36l1.99.22c.48.3.32,1.62-.16,1.84-3.98-.15-6.69-.22-9.87-.22-3.35,0-6.05.07-10.03.22-.48-.22-.64-1.4-.16-1.84l1.99-.22c4.7-.52,4.86-1.55,4.86-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M644.16,229.94c-.41-.04-1.17-.1-1.17-.1-.84-.08-1.59-.2-2.19-.86-1.03-1.1-.95-4.23-.95-5.48v-32.31c0-1.41-.34-4.46.69-5.56.52-.58,1.59-.67,2.55-.73h0c.58-.05.6-.05,1.11-.07l2.05-.15c.49-.3.33-1.62-.16-1.84-1.09.04-2.09.02-3.03.05h0s-8.7,0-8.7,0c-.95,0-1.81,0-2.32,1.02l-17.73,36.92-15.66-35.67c-.52-1.25-.6-2.27-2.24-2.27h-9.05c-.94-.03-1.98-.02-3.08-.06-.49.22-.66,1.55-.16,1.84l2.05.15c.42.03,1.19.09,1.19.09,3.4.22,3.61.98,3.3,4.55l-2.67,34.65c-.23,3.48-.42,5.32-4.07,5.66,0,0-.77.1-1.19.14l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,3-.1,3-.1,1.85-.09,3.73-.25,5.61-.25,2.03,0,4.06.19,6.1.27h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.04-.22c-.54-.04-1.14-.1-1.14-.1-5.26-.36-5.14-4.07-4.81-8.62l2.5-32.23h.6l16.95,39.66c.17.55.43,1.49,1.29,1.49.78,0,1.03-.86,1.29-1.41l19.1-40.68h.6v35.44c0,1.41.17,4.3-1.29,5.4-.76.57-3.25.91-3.25.91-.34.05-.7.1-1.11.15l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,2.99-.1,2.99-.1,2.77-.08,5.59-.28,8.41-.28,2.03,0,6,.19,6,.19.95.03,2.02.13,3.12.17.49-.22.66-1.4.16-1.84l-2.05-.22Z", className: "bcds-bc-logo--blueFill" }), jsx("path", { d: "M777.13,230.14l-.28-.22c-.41-.04-.77-.09-1.11-.15-3.19-.71-4.43-4.55-5.61-7.29l-16.41-38.83c-.16-.47-.49-1.47-1.14-1.47-.89,0-1.14,1.08-1.38,1.7l-15.68,38.76c-.57,1.47-2.03,5.03-3.09,6.11-.81.83-1.86.99-2.99,1.1,0,0-.88.08-1.31.13l-1.93.2c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.11,3.03-.11,2.14-.03,4.29-.3,6.44-.3,1.81,0,3.61.19,5.41.27,0,0,1.94.07,3.03.11.49-.22.65-1.4.16-1.84l-2.05-.22c-.41-.04-1.11-.11-1.11-.11-1.89-.21-4.24-.55-4.24-2.62,0-1.39.65-3.02,1.14-4.25l2.44-5.8c1.22-2.78.73-3.1,3.98-3.1h11.05c3.9,0,3.33,0,5.04,3.95l2.6,5.88c.41,1.01,1.14,2.71,1.14,3.79,0,1.94-2.12,2.07-4.11,2.24,0,0-.66.06-1.23.1l-1.97.14c-.49.44-.33,1.62.17,1.84,1.09-.04,3.03-.12,3.03-.12,2.31-.08,4.64-.26,6.87-.26,2.85,0,5.69.19,8.54.27h0c.93.03.14.06,1.22.1.49-.22.65-1.4.16-1.84ZM755.64,211.89h-9.57c-.33,0-3,.31-3-.47,0-.24.17-.7.25-.94l5.75-14.23c.17-.39.75-2.35,1.41-2.35.5,0,1.17,2.03,1.33,2.35l5.66,13.29c0,.16.58,1.41.58,1.72,0,.86-1.91.62-2.41.62Z", className: "bcds-bc-logo--blueFill" })] }), jsx("rect", { width: "847.65", height: "327.01", className: "bcds-bc-logo--noFill" })] }), jsxs("g", { children: [jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", className: "bcds-bc-logo--goldFill" }), jsx("path", { d: "M95.46,166.88l-14.14-4.97.71-1.73,15.92,5.31.07-.04,2.1-1.19.84-.53-17.36-7.39.73-1.82,38.75,15.67,1.28-.53-38.44-18.73.86-1.76,40.73,18.96.56-.29-39.49-22.4.81-1.68,57.03,31.03c.47-.86,1.44-2.44,1.95-3.28-21.68-20.39-42.61-35.69-42.61-35.69,0,0,21.52,14.41,48.07,27.81.88-1.09,1.6-1.97,2.53-3.01l-48.65-42.83,1.31-1.34,39.27,33.47-36.38-36.43,1.36-1.41,40.84,39.47-38.02-42.2,1.45-1.31,35.14,37.63-32.07-40.41,1.38-1.26,41.11,50.03c1.06-.92,1.95-1.61,3.06-2.46-12.44-26.91-26.02-48.8-26.02-48.8,0,0,14.46,21.28,33.96,43.56,1.19-.67,2.4-1.31,3.63-1.92l-.21-.13-28.81-57.5,1.71-.75,23.87,45.74-20.08-47.41,1.79-.8,23.08,51.9-19.45-53.37,1.84-.67,18.49,48.05-14.6-49.49,1.75-.65,19.22,61.38-.04.16.05-.02c1.28-.43,2.58-.81,3.89-1.16-1.46-29.48-5.82-54.7-5.82-54.7,0,0,5.4,25,15.08,52.87,1.35-.17,2.71-.31,4.07-.4l-.04-.06h.17l-.1-.14-5.17-64.11,1.87-.06,5,51.35-.86-51.48,1.96-.07,1.96,56.77,1.96-56.77,1.96.07-.86,51.48,5-51.35,1.87.06-5.17,64.11-.1.14h.03v.02s.07,0,.07,0c1.34.08,2.66.22,3.98.38,9.67-27.84,15.06-52.8,15.06-52.8,0,0-4.35,25.14-5.82,54.57,1.32.35,2.63.73,3.91,1.15l19.15-61.16,1.76.65-14.6,49.48,18.49-48.05,1.84.67-19.45,53.37,23.08-51.9,1.79.8-20.08,47.41,23.87-45.74,1.71.75-28.71,57.3.05.02c1.18.58,2.34,1.19,3.49,1.83,19.42-22.21,33.79-43.37,33.79-43.37,0,0-13.49,21.74-25.89,48.52,1.11.84,2.19,1.7,3.24,2.6l40.63-49.49,1.39,1.26-32.08,40.41,35.14-37.63,1.45,1.31-38.02,42.2,40.84-39.47,1.36,1.41-36.38,36.43,39.27-33.47,1.31,1.34-48.06,42.35.03.03c.84.94,1.65,1.9,2.44,2.88,26.39-13.34,47.71-27.62,47.71-27.62,0,0-20.72,15.16-42.29,35.4.59.99,1.55,2.67,2.09,3.69l56.22-30.61.81,1.69-44.88,25.45,46.68-21.72.86,1.76-43.48,21.19.83.29,44.24-17.89.74,1.82-41.12,17.49.77.32,27.4-9.13,4.13-2.88,1.37,1.05,9.02-3.01.71,1.73-7.8,2.75,11.27,8.6,3.61,2.01c-14.49-60.58-68.98-105.62-134-105.62s-121.42,46.63-134.73,108.82c.17-.08.34-.16.51-.24l1.65-.75,1.01-.47,19.01-10.66Z", className: "bcds-bc-logo--goldFill" })] }), jsx("path", { d: "M72.5,233.02s20.32-4.06,37.29-4.06c44.7,0,106.54,25.17,151.41,25.17,32.91,0,65.02-9.03,82.51-22.19,1.37-7.79,2.08-15.8,2.08-23.98,0-11.08-1.32-21.85-3.79-32.17l-18.7-10.43-21.95,15.39-14.76-5.75c-5,2.53-35.83,23.15-35.83,23.15l-11.84-8.57-12.7-2.51-16.93-12.33-19.42,13.33s-21.67,12.58-22.41,12.58-26.14-20.13-26.14-20.13l-11.7-12.33c-1.99,1.26-9.95,4.91-9.95,4.91l-.41.11-7.7-2.38-9.35-4.96-28.41,12.88c-.17.08-.34.16-.51.24-2,9.34-3.06,19.03-3.06,28.96,0,8.56.79,16.93,2.28,25.06Z", className: "bcds-bc-logo--blueFill" })] })] }));
 }
-var css_248z$o = ".bcds-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: 100%;\n}\n\n.bcds-footer > .bcds-footer--acknowledgement {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-top: var(--layout-border-width-large) solid var(--theme-gold-60);\n  border-bottom: var(--layout-border-width-large) solid var(--theme-gold-60);\n  background-color: var(--theme-gray-110);\n  padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n  > .bcds-footer--acknowledgement\n  > .bcds-footer--acknowledgement-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: stretch;\n  color: var(--typography-color-primary-invert);\n  font: var(--typography-regular-small-body);\n  max-width: 1100px;\n  width: 100%;\n}\n\n.bcds-footer\n  > .bcds-footer--acknowledgement\n  > .bcds-footer--acknowledgement-text\n  > p {\n  margin: var(--layout-margin-none);\n}\n\n.bcds-footer > .bcds-footer--container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  background-color: var(--surface-color-background-light-gray);\n  padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--layout-padding-xlarge);\n  max-width: 1100px;\n  width: 100%;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: flex-start;\n  gap: var(--layout-padding-medium) var(--layout-padding-xlarge);\n  justify-content: space-between;\n  width: 100%;\n}\n\n/* `horizontal` class is the default, when no `children` prop is passed */\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.horizontal {\n  flex-direction: row;\n}\n\n/* `vertical` class is used when a `children` prop is passed */\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.vertical {\n  flex-direction: column;\n  align-items: stretch;\n  row-gap: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-padding-large);\n  min-width: 324px;\n  width: 576px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > #bcgov-logo-footer {\n  width: 146px;\n  min-width: 146px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p {\n  font: var(--typography-regular-small-body);\n  margin: var(--layout-margin-none);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p\n  > a {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  text-decoration: underline;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p\n  > a:hover {\n  text-decoration: none;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links {\n  margin: var(--layout-margin-none);\n}\n\n/*\n  When Footer hasn't been passed `children`, expand the links container to take\n  up 320px, as the default links are narrower.\n*/\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.horizontal\n  > .bcds-footer--links {\n  min-width: 320px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > .bcds-footer--links-title {\n  display: block;\n  font: var(--typography-bold-small-body);\n  margin-bottom: var(--layout-padding-medium);\n  text-transform: uppercase;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: auto;\n  gap: var(--layout-padding-small) var(--layout-padding-xlarge);\n  list-style: none;\n  margin: var(--layout-margin-none);\n  padding: var(--layout-padding-none);\n}\n\n/*\n  When a Footer has been passed `children`, the logo-links container fills the\n  full width of the container, so there's room for 4 columns of links.\n*/\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.vertical\n  > .bcds-footer--links\n  > ul {\n  grid-template-columns: repeat(4, 1fr);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li\n  > a {\n  color: var(--typography-color-primary);\n  text-decoration: none;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li\n  > a:hover {\n  text-decoration: underline;\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {\n  background-color: var(--surface-color-border-dark);\n  border: var(--layout-border-width-none);\n  height: var(--layout-border-width-small);\n  margin: var(--layout-margin-none);\n  width: 100%;\n}\n\np.bcds-footer--copyright {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-body);\n  margin: var(--layout-margin-none);\n}\n\n/* Tablet */\n@media (width <= 991px) {\n  /* Links drop beneath logo in the default configuration */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links {\n    flex-wrap: wrap;\n  }\n\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links\n    > .bcds-footer--logo {\n    max-width: 324px;\n  }\n\n  /*\n    When the `children` prop is used with multiple FooterLinks components,\n    only two columns of links appear on screen at once.\n  */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links.vertical\n    > .bcds-footer--links\n    > ul {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n/* Extra small screens */\n@media (width <= 575px) {\n  .bcds-footer > .bcds-footer--acknowledgement {\n    padding: var(--layout-padding-xlarge) var(--layout-padding-medium);\n  }\n\n  .bcds-footer > .bcds-footer--container {\n    padding: var(--layout-padding-medium);\n  }\n\n  .bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n    gap: var(--layout-padding-medium);\n  }\n\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links\n    > .bcds-footer--logo {\n    gap: var(--layout-padding-medium);\n  }\n\n  /*\n    When the `children` prop is used with multiple FooterLinks components,\n    only one column of links appear on screen at once.\n  */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links.vertical\n    > .bcds-footer--links\n    > ul {\n    grid-template-columns: repeat(1, 1fr);\n  }\n}\n";
+var css_248z$o = ".bcds-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: 100%;\n}\n\n.bcds-footer > .bcds-footer--acknowledgement {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-top: var(--layout-border-width-large) solid var(--theme-gold-60);\n  border-bottom: var(--layout-border-width-large) solid var(--theme-gold-60);\n  background-color: var(--theme-gray-110);\n  padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n  > .bcds-footer--acknowledgement\n  > .bcds-footer--acknowledgement-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: stretch;\n  color: var(--typography-color-primary-invert);\n  font: var(--typography-regular-small-body);\n  max-width: 1100px;\n  width: 100%;\n}\n\n.bcds-footer\n  > .bcds-footer--acknowledgement\n  > .bcds-footer--acknowledgement-text\n  > p {\n  margin: var(--layout-margin-none);\n}\n\n.bcds-footer > .bcds-footer--container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  background-color: var(--surface-color-background-light-gray);\n  padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--layout-padding-xlarge);\n  max-width: 1100px;\n  width: 100%;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: flex-start;\n  gap: var(--layout-padding-medium) var(--layout-padding-xlarge);\n  justify-content: space-between;\n  width: 100%;\n}\n\n/* `horizontal` class is the default, when no `children` prop is passed */\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.horizontal {\n  flex-direction: row;\n}\n\n/* `vertical` class is used when a `children` prop is passed */\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.vertical {\n  flex-direction: column;\n  align-items: stretch;\n  row-gap: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-padding-large);\n  min-width: 324px;\n  width: 576px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > #bcgov-logo-footer {\n  width: 146px;\n  min-width: 146px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p {\n  font: var(--typography-regular-small-body);\n  margin: var(--layout-margin-none);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p\n  > a {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  text-decoration: underline;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li\n  > a {\n  color: var(--typography-color-primary);\n  text-decoration: none;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--logo\n  > p\n  > a:hover {\n  text-decoration: none;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links {\n  margin: var(--layout-margin-none);\n}\n\n/*\n  When Footer hasn't been passed `children`, expand the links container to take\n  up 320px, as the default links are narrower.\n*/\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.horizontal\n  > .bcds-footer--links {\n  min-width: 320px;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > .bcds-footer--links-title {\n  display: block;\n  font: var(--typography-bold-small-body);\n  margin-bottom: var(--layout-padding-medium);\n  text-transform: uppercase;\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: auto;\n  gap: var(--layout-padding-small) var(--layout-padding-xlarge);\n  list-style: none;\n  margin: var(--layout-margin-none);\n  padding: var(--layout-padding-none);\n}\n\n/*\n  When a Footer has been passed `children`, the logo-links container fills the\n  full width of the container, so there's room for 4 columns of links.\n*/\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links.vertical\n  > .bcds-footer--links\n  > ul {\n  grid-template-columns: repeat(4, 1fr);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-footer\n  > .bcds-footer--container\n  > .bcds-footer--container-content\n  > .bcds-footer--logo-links\n  > .bcds-footer--links\n  > ul\n  > li\n  > a:hover {\n  text-decoration: underline;\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {\n  background-color: var(--surface-color-border-dark);\n  border: var(--layout-border-width-none);\n  height: var(--layout-border-width-small);\n  margin: var(--layout-margin-none);\n  width: 100%;\n}\n\np.bcds-footer--copyright {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-body);\n  margin: var(--layout-margin-none);\n}\n\n/* Tablet */\n@media (width <= 991px) {\n  /* Links drop beneath logo in the default configuration */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links {\n    flex-wrap: wrap;\n  }\n\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links\n    > .bcds-footer--logo {\n    max-width: 324px;\n  }\n\n  /*\n    When the `children` prop is used with multiple FooterLinks components,\n    only two columns of links appear on screen at once.\n  */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links.vertical\n    > .bcds-footer--links\n    > ul {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n/* Extra small screens */\n@media (width <= 575px) {\n  .bcds-footer > .bcds-footer--acknowledgement {\n    padding: var(--layout-padding-xlarge) var(--layout-padding-medium);\n  }\n\n  .bcds-footer > .bcds-footer--container {\n    padding: var(--layout-padding-medium);\n  }\n\n  .bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n    gap: var(--layout-padding-medium);\n  }\n\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links\n    > .bcds-footer--logo {\n    gap: var(--layout-padding-medium);\n  }\n\n  /*\n    When the `children` prop is used with multiple FooterLinks components,\n    only one column of links appear on screen at once.\n  */\n  .bcds-footer\n    > .bcds-footer--container\n    > .bcds-footer--container-content\n    > .bcds-footer--logo-links.vertical\n    > .bcds-footer--links\n    > ul {\n    grid-template-columns: repeat(1, 1fr);\n  }\n}\n";
 styleInject(css_248z$o);
 /**
@@ -31824,7 +31824,7 @@ function Link({ children, size = "medium", danger = false, isButton = false, but
             : undefined, "aria-label": ariaLabel, ...props, children: [iconLeft && (jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconLeft })), children, iconRight && (jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconRight }))] }));
 }
-var css_248z$k = ".bcds-react-aria-MenuItem {\n  display: flex;\n  gap: var(--layout-margin-xsmall);\n  padding: var(--layout-padding-small);\n  cursor: pointer;\n  color: var(--typography-color-secondary);\n}\n.bcds-react-aria-MenuItem--Icon {\n  display: flex;\n  align-self: flex-start;\n  padding-top: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-MenuItem--Content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-padding-hair);\n}\n\n/* Sizing */\n.bcds-react-aria-MenuItem.small {\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-MenuItem.small\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  font: var(--typography-regular-label);\n}\n.bcds-react-aria-MenuItem.medium {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-MenuItem.medium\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  font: var(--typography-regular-small-body);\n}\n\n/* Link styling */\na.bcds-react-aria-MenuItem {\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"label\"] {\n  color: var(--typography-color-link);\n  text-decoration: underline var(--typography-color-link);\n  text-underline-offset: var(--layout-margin-hair);\n}\na.bcds-react-aria-MenuItem\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  color: var(--typography-color-secondary);\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"label\"] {\n  color: var(--typography-color-disabled);\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  color: var(--typography-color-disabled);\n}\n\n/* Icon displayed when an item has a submenu */\n.bcds-react-aria-MenuItem > svg {\n  width: var(--icons-size-xsmall);\n  height: var(--icons-size-xsmall);\n  padding: var(--layout-padding-hair);\n  align-self: center;\n}\n\n/* States */\n.bcds-react-aria-MenuItem[data-focused],\n.bcds-react-aria-MenuItem[data-hovered],\n.bcds-react-aria-MenuItem[data-hovered][data-focused] {\n  border-radius: var(--layout-border-radius-small);\n  background-color: var(--surface-color-menus-hover);\n  outline: none;\n}\n\n.bcds-react-aria-MenuItem[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n";
+var css_248z$k = ".bcds-react-aria-MenuItem {\n  display: flex;\n  gap: var(--layout-margin-xsmall);\n  padding: var(--layout-padding-small);\n  cursor: pointer;\n  color: var(--typography-color-secondary);\n}\n.bcds-react-aria-MenuItem--Icon {\n  display: flex;\n  align-self: flex-start;\n  padding-top: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-MenuItem--Content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-padding-hair);\n}\n\n/* Link styling */\na.bcds-react-aria-MenuItem {\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  color: var(--typography-color-secondary);\n  text-decoration: none;\n}\n\n/* Sizing */\n.bcds-react-aria-MenuItem.small {\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-MenuItem.small\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  font: var(--typography-regular-label);\n}\n.bcds-react-aria-MenuItem.medium {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-MenuItem.medium\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  font: var(--typography-regular-small-body);\n}\n\n/* Link styling, part 2 */\na.bcds-react-aria-MenuItem\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"label\"] {\n  color: var(--typography-color-link);\n  text-decoration: underline var(--typography-color-link);\n  text-underline-offset: var(--layout-margin-hair);\n}\na.bcds-react-aria-MenuItem[data-disabled]\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"label\"] {\n  color: var(--typography-color-disabled);\n  text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n  > .bcds-react-aria-MenuItem--Content\n  > *[slot=\"description\"] {\n  color: var(--typography-color-disabled);\n}\n\n/* Icon displayed when an item has a submenu */\n.bcds-react-aria-MenuItem > svg {\n  width: var(--icons-size-xsmall);\n  height: var(--icons-size-xsmall);\n  padding: var(--layout-padding-hair);\n  align-self: center;\n}\n\n/* States */\n.bcds-react-aria-MenuItem[data-focused],\n.bcds-react-aria-MenuItem[data-hovered],\n.bcds-react-aria-MenuItem[data-hovered][data-focused] {\n  border-radius: var(--layout-border-radius-small);\n  background-color: var(--surface-color-menus-hover);\n  outline: none;\n}\n\n.bcds-react-aria-MenuItem[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$k);
 function MenuItem({ size = "medium", label, description, iconLeft, ...props }) {
@@ -31936,7 +31936,7 @@ function TagList({ items, orientation = "horizontal", renderEmptyState, ...props
     return (jsx($3df3ddf5bafbc7b1$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => createElement(Tag, { ...item, key: item.id }) }));
 }
-var css_248z$9 = ".bcds-react-aria-Select {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  align-items: stretch;\n  min-width: 0;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Scroll mode: single-select text truncation */\n.bcds-react-aria-Select.scroll .bcds-react-aria-SelectValue {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Scroll mode: horizontally scrollable tag overlay.\n   overflow-x: auto forces overflow-y to also clip (per CSS spec), which\n   would clip tag focus rings. padding-block creates room for the outline\n   inside the scroll container's padding box, and matching negative\n   margin-block cancels it out so the overlay's outer box stays the same\n   size, preserving alignment with wrap mode. */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Select--TagOverlay {\n  overflow-x: auto;\n  pointer-events: auto;\n  scrollbar-width: thin;\n  padding-block: calc(\n    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n  );\n  margin-block: calc(\n    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n  );\n  padding-inline: calc(\n    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n  );\n  margin-inline: calc(\n    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n  );\n}\n\n/* Scroll mode: prevent tag list from wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-TagList {\n  flex-wrap: nowrap;\n  width: max-content;\n}\n\n/* Scroll mode: prevent tags from shrinking or wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag {\n  flex-shrink: 0;\n}\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag--Label {\n  white-space: nowrap;\n}\n\n/* Sizing */\n.bcds-react-aria-Select.small .bcds-react-aria-Select--Button {\n  min-height: 32px;\n}\n.bcds-react-aria-Select--ListBox.small .bcds-react-aria-Select--ListBoxItem {\n  padding: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Select.small .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.small\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-Select--Button {\n  min-height: 40px;\n}\n.bcds-react-aria-Select--ListBox.medium .bcds-react-aria-Select--ListBoxItem {\n  padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.medium\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-body);\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button {\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--layout-margin-small);\n  align-items: center;\n  padding: var(--layout-padding-small);\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n.bcds-react-aria-Select--Button[data-hovered] {\n  border-color: var(--surface-color-border-dark);\n  cursor: pointer;\n}\n.bcds-react-aria-Select--Button.invalid {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select[data-invalid] > .bcds-react-aria-Select--Button {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select--Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-Select--Button[data-focus-visible] {\n  border-color: var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-Select--Button[data-pressed] {\n  border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {\n  flex: 1 1 auto;\n  overflow: visible;\n  white-space: normal;\n  text-align: left;\n  min-width: 0;\n}\n.bcds-react-aria-Select--Button > svg {\n  flex: 0 0 auto;\n}\n\n/* Overlay for tags in multi-select mode */\n.bcds-react-aria-Select--InputContainer {\n  display: grid;\n  width: 100%;\n  min-width: 0;\n}\n.bcds-react-aria-Select--InputContainer > .bcds-react-aria-Select--Button {\n  grid-area: 1 / 1;\n  align-self: stretch;\n}\n.bcds-react-aria-Select--TagOverlayContainer {\n  grid-area: 1 / 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: calc(var(--layout-padding-small) - 0.5px);\n  padding-right: 2.5rem;\n  pointer-events: none;\n}\n.bcds-react-aria-Select--TagOverlay {\n  width: 100%;\n  min-width: 0;\n  pointer-events: none;\n}\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag,\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag [slot=\"remove\"],\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag button {\n  pointer-events: auto;\n}\n\n/* Label above select input */\n.bcds-react-aria-Select--Label {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {\n  color: var(--typography-color-disabled);\n}\n\n/* Text description below select input */\n.bcds-react-aria-Select--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Error message */\n.bcds-react-aria-Select--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n/* Error icon */\n.bcds-react-aria-Select[data-invalid]\n  .bcds-react-aria-Select--Button\n  svg:not(:last-child) {\n  color: var(--icons-color-danger);\n}\n\n/* Dropdown menu panel */\n.bcds-react-aria-Select--Popover {\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  box-shadow: var(--surface-shadow-medium);\n  box-sizing: border-box;\n  overflow-y: auto;\n  padding: var(--layout-padding-hair) var(--layout-padding-xsmall);\n  width: var(\n    --trigger-width\n  ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\n}\n.bcds-react-aria-Select--ListBox[data-focused] {\n  outline: none;\n}\n.bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  margin-top: 1px;\n  padding-top: var(--layout-padding-hair);\n}\n\n/* Header label within Section of multi-section Select */\n.bcds-react-aria-Select--Header {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n}\n\n/* ListBox option item */\n.bcds-react-aria-Select--ListBoxItem {\n  border-radius: var(--layout-border-radius-medium);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n}\n.bcds-react-aria-Select--ListBoxItem[data-focused],\n.bcds-react-aria-Select--ListBoxItem[data-hovered] {\n  background-color: var(--surface-color-secondary-button-hover);\n  outline: none;\n}\n.bcds-react-aria-Select--ListBoxItem-icon {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  /* This `min-width` rule can cause horizontal overflow on very narrow Select\n  instances, but if we leave it out, the icons will shrink instead. */\n  min-width: 20px;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.bcds-react-aria-Select--ListBoxItem.destructive {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem-Text-description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n";
+var css_248z$9 = ".bcds-react-aria-Select {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  align-items: stretch;\n  min-width: 0;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n.bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {\n  flex: 1 1 auto;\n  overflow: visible;\n  white-space: normal;\n  text-align: left;\n  min-width: 0;\n}\n.bcds-react-aria-Select--Button > svg {\n  flex: 0 0 auto;\n}\n\n.bcds-react-aria-Select--TagOverlay {\n  width: 100%;\n  min-width: 0;\n  pointer-events: none;\n}\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag,\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag [slot=\"remove\"],\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag button {\n  pointer-events: auto;\n}\n/* Scroll mode: single-select text truncation */\n.bcds-react-aria-Select.scroll .bcds-react-aria-SelectValue {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Scroll mode: horizontally scrollable tag overlay.\n   overflow-x: auto forces overflow-y to also clip (per CSS spec), which\n   would clip tag focus rings. padding-block creates room for the outline\n   inside the scroll container's padding box, and matching negative\n   margin-block cancels it out so the overlay's outer box stays the same\n   size, preserving alignment with wrap mode. */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Select--TagOverlay {\n  overflow-x: auto;\n  pointer-events: auto;\n  scrollbar-width: thin;\n  padding-block: calc(\n    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n  );\n  margin-block: calc(\n    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n  );\n  padding-inline: calc(\n    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n  );\n  margin-inline: calc(\n    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n  );\n}\n\n/* Scroll mode: prevent tag list from wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-TagList {\n  flex-wrap: nowrap;\n  width: max-content;\n}\n\n/* Scroll mode: prevent tags from shrinking or wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag {\n  flex-shrink: 0;\n}\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag--Label {\n  white-space: nowrap;\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button {\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--layout-margin-small);\n  align-items: center;\n  padding: var(--layout-padding-small);\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n.bcds-react-aria-Select--InputContainer > .bcds-react-aria-Select--Button {\n  grid-area: 1 / 1;\n  align-self: stretch;\n}\n/* ListBox option item */\n.bcds-react-aria-Select--ListBoxItem {\n  border-radius: var(--layout-border-radius-medium);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n}\n.bcds-react-aria-Select--ListBoxItem[data-focused],\n.bcds-react-aria-Select--ListBoxItem[data-hovered] {\n  background-color: var(--surface-color-secondary-button-hover);\n  outline: none;\n}\n/* Sizing */\n.bcds-react-aria-Select.small .bcds-react-aria-Select--Button {\n  min-height: 32px;\n}\n.bcds-react-aria-Select--ListBox.small .bcds-react-aria-Select--ListBoxItem {\n  padding: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Select.small .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.small\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-Select--Button {\n  min-height: 40px;\n}\n.bcds-react-aria-Select--ListBox.medium .bcds-react-aria-Select--ListBoxItem {\n  padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.medium\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-body);\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button[data-hovered] {\n  border-color: var(--surface-color-border-dark);\n  cursor: pointer;\n}\n.bcds-react-aria-Select--Button.invalid {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select[data-invalid] > .bcds-react-aria-Select--Button {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select--Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-Select--Button[data-focus-visible] {\n  border-color: var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-Select--Button[data-pressed] {\n  border-color: var(--surface-color-border-active);\n}\n\n/* Overlay for tags in multi-select mode */\n.bcds-react-aria-Select--InputContainer {\n  display: grid;\n  width: 100%;\n  min-width: 0;\n}\n.bcds-react-aria-Select--TagOverlayContainer {\n  grid-area: 1 / 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: calc(var(--layout-padding-small) - 0.5px);\n  padding-right: 2.5rem;\n  pointer-events: none;\n}\n\n/* Label above select input */\n.bcds-react-aria-Select--Label {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {\n  color: var(--typography-color-disabled);\n}\n\n/* Text description below select input */\n.bcds-react-aria-Select--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Error message */\n.bcds-react-aria-Select--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n/* Error icon */\n.bcds-react-aria-Select[data-invalid]\n  .bcds-react-aria-Select--Button\n  svg:not(:last-child) {\n  color: var(--icons-color-danger);\n}\n\n/* Dropdown menu panel */\n.bcds-react-aria-Select--Popover {\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  box-shadow: var(--surface-shadow-medium);\n  box-sizing: border-box;\n  overflow-y: auto;\n  padding: var(--layout-padding-hair) var(--layout-padding-xsmall);\n  width: var(\n    --trigger-width\n  ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\n}\n.bcds-react-aria-Select--ListBox[data-focused] {\n  outline: none;\n}\n.bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  margin-top: 1px;\n  padding-top: var(--layout-padding-hair);\n}\n\n/* Header label within Section of multi-section Select */\n.bcds-react-aria-Select--Header {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-small-body);\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n}\n\n.bcds-react-aria-Select--ListBoxItem-icon {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  /* This `min-width` rule can cause horizontal overflow on very narrow Select\n  instances, but if we leave it out, the icons will shrink instead. */\n  min-width: 20px;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.bcds-react-aria-Select--ListBoxItem.destructive {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem-Text-description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n";
 styleInject(css_248z$9);
 /** Select displays a collapsible list of options and allows a user to select one or more of them. */
@@ -32052,7 +32052,7 @@ function Text({ elementType = "span", size = "medium", color = "primary", isUnst
     return (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { elementType: elementType, className: isUnstyled ? undefined : `bcds-react-aria-Text ${size} ${color}`, ...props, children: props.children }));
 }
-var css_248z$7 = ".bcds-react-aria-TextArea {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n  display: grid;\n  gap: var(--layout-margin-medium);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n  justify-self: flex-start;\n  grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n  justify-self: flex-end;\n  grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n.bcds-rect-aria-TextArea--Input::placeholder {\n  color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n  > .bcds-react-aria-TextArea--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focused]\n),\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focused][data-hovered]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-hovered]\n) {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n.bcds-react-aria-TextArea[data-disabled] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-disabled] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextArea[data-readonly] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-readonly] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextArea--Error {\n  display: flex;\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextArea--Error > svg {\n  padding-right: var(--layout-padding-xsmall);\n  color: var(--icons-color-danger);\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
+var css_248z$7 = ".bcds-react-aria-TextArea {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n  display: grid;\n  gap: var(--layout-margin-medium);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n  justify-self: flex-start;\n  grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n  justify-self: flex-end;\n  grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n  > .bcds-react-aria-TextArea--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled and invalid states */\n.bcds-react-aria-TextArea[data-disabled] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-disabled] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focused]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextArea[data-readonly] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-readonly] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid wins over focus: red border stays even while focused */\n.bcds-react-aria-TextArea[data-invalid]\n  > .bcds-react-aria-TextArea--Container:has(\n    > .bcds-react-aria-TextArea--Input[data-focused]\n  ) {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextArea--Error {\n  display: flex;\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextArea--Error > svg {\n  padding-right: var(--layout-padding-xsmall);\n  color: var(--icons-color-danger);\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
 styleInject(css_248z$7);
 function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }) {
@@ -32066,7 +32066,7 @@ function TextArea({ label, description, errorMessage, maxLength, onChange, value
     return (jsx($b8dcdc58eeae0d40$export$2c73285ae9390cec, { className: `bcds-react-aria-TextArea`, ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment$1, { children: [label && (jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextArea--Label", children: isRequired ? `${label} (required)` : label })), jsx("div", { className: "bcds-react-aria-TextArea--Container", children: jsx($bd263d78e9bf3c56$export$f5c9f3c2c4054eec, { className: "bcds-react-aria-TextArea--Input", value: value, onChange: (e) => handleChange(e.target.value) }) }), description || maxLength ? (jsxs("div", { className: "bcds-react-aria-TextArea--Description", children: [description && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "text", children: description })), maxLength && (jsxs("div", { className: "counter", children: [charCount, "/", maxLength] }))] })) : null, isInvalid && (jsxs("div", { className: "bcds-react-aria-TextArea--Error", children: [jsx(SvgExclamationIcon, {}), jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
 }
-var css_248z$6 = ".bcds-react-aria-TextField {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n  height: var(--layout-margin-xlarge);\n  min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n  height: var(--layout-margin-xxlarge);\n  min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n  color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focused]\n),\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focused][data-hovered]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextField--container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-disabled] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-readonly] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container\n  > svg#exclamation-icon {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
+var css_248z$6 = ".bcds-react-aria-TextField {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n  height: var(--layout-margin-xlarge);\n  min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n  height: var(--layout-margin-xxlarge);\n  min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n  color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextField--container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-disabled] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focused]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-readonly] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid wins over focus: red border stays even while focused */\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container:has(\n    > .bcds-react-aria-TextField--Input[data-focused]\n  ) {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container\n  > svg#exclamation-icon {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
 styleInject(css_248z$6);
 function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }) {
@@ -32094,7 +32094,7 @@ function ToggleButtonGroup({ label, size = "medium", children, ...props }) {
     return (jsxs(Fragment$1, { children: [label && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { className: "bcds-react-aria-ToggleButtonGroup--Label", children: label })), jsx($bc25b811ec97a172$export$40258cc1d95ff477, { className: `bcds-react-aria-ToggleButtonGroup ${size === "small" ? "small" : "medium"}`, ...props, children: children })] }));
 }
-var css_248z$2 = ".bcds-react-aria-Switch {\n  display: flex;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n  align-items: center;\n  width: var(--layout-margin-xxlarge);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-primary-disabled);\n  border-radius: var(--icons-size-medium);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch container color if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator {\n    transition: none;\n  }\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-secondary-default);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--icons-size-small);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch circle indicator if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator::before {\n    transition: none;\n  }\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n  background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n  transform: translateX(100%);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] {\n  cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n  background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Switch[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n  background-color: var(--surface-color-primary-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n  background-color: var(--theme-gray-10);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] {\n  cursor: not-allowed;\n}\n";
+var css_248z$2 = ".bcds-react-aria-Switch {\n  display: flex;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n  align-items: center;\n  width: var(--layout-margin-xxlarge);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-primary-disabled);\n  border-radius: var(--icons-size-medium);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch container color if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator {\n    transition: none;\n  }\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-secondary-default);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--icons-size-small);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch circle indicator if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator::before {\n    transition: none;\n  }\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n  background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n  transform: translateX(100%);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-default);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n  background-color: var(--surface-color-primary-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n  background-color: var(--theme-gray-10);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] {\n  cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n  background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-hover);\n}\n\n/* Disabled */\n.bcds-react-aria-Switch[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] {\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$2);
 function Switch({ labelPosition = "right", children, ...props }) {
@@ -32108,7 +32108,7 @@ function Tooltip(props) {
     return (jsxs($05a50f7d78b03ad9$export$28c660c63b792dea, { className: "bcds-react-aria-Tooltip", ...props, children: [jsx($4fcfe18fac72dabd$export$746d02f47f4d381, { className: "bcds-react-aria-OverlayArrow", children: jsx(SvgTooltipArrowUp, {}) }), jsx(Fragment$1, { children: props.children })] }));
 }
-var css_248z = ".bcds-react-aria-NumberField {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-margin-hair);\n  background-color: var(--surface-color-forms-default);\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n/* Input and controls */\n.bcds-react-aria-NumberField--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n}\n/* Decrement button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child {\n  border-right: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child\n  > .bcds-react-aria-Button {\n  border-top-right-radius: var(--layout-border-radius-none);\n  border-bottom-right-radius: var(--layout-border-radius-none);\n}\n/* Increment button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child {\n  border-left: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child\n  > .bcds-react-aria-Button {\n  border-top-left-radius: var(--layout-border-radius-none);\n  border-bottom-left-radius: var(--layout-border-radius-none);\n}\n/* Button icons */\n.bcds-react-aria-NumberField--Group > button > svg {\n  color: var(--icons-color-primary);\n}\n/* Input container */\n.bcds-react-aria-NumberField--InputContainer {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  min-width: 0;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  padding: var(--layout-padding-small) 0.75rem;\n}\n/* Input field */\n.bcds-react-aria-NumberField--Input {\n  box-sizing: border-box;\n  border: none;\n  width: 100%;\n}\n\n/* Sizing */\n.bcds-react-aria-NumberField.medium > .bcds-react-aria-NumberField--Group {\n  height: 40px;\n}\n.bcds-react-aria-NumberField.medium .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-NumberField.small > .bcds-react-aria-NumberField--Group {\n  height: 32px;\n}\n.bcds-react-aria-NumberField.small .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-small-body);\n}\n\n/* Label above the input field */\n.bcds-react-aria-NumberField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* \"Required\" label */\n.bcds-react-aria-NumberField--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-small) var(--layout-padding-xsmall);\n}\n\n/* Description below the input field */\n.bcds-react-aria-NumberField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Hover state */\n.bcds-react-aria-NumberField--Group[data-hovered],\n.bcds-react-aria-NumberField--Group[data-hovered][data-disabled],\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Focus state */\n.bcds-react-aria-NumberField--Group[data-focus-within],\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button,\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  .bcds-react-aria-NumberField--Input,\n.bcds-react-aria-NumberField--Group[data-focus-visible]\n  .bcds-react-aria-NumberField--Input {\n  outline: none;\n}\n.bcds-react-aria-NumberField--Group[data-focus-visible] {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Error state */\n.bcds-react-aria-NumberField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  .bcds-react-aria-NumberField--InputContainer\n  > svg {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Disabled and read-only states */\n.bcds-react-aria-NumberField[data-disabled]\n  > .bcds-react-aria-NumberField--Group,\n.bcds-react-aria-NumberField[data-disabled]\n  .bcds-react-aria-NumberField--Input {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n}\n/* BCDS Button style tweaks */\n/* Hover/focus states */\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n}\n/* Disabled/read-only states */\n.bcds-react-aria-NumberField--Group[data-disabled],\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n/* Error state */\n.bcds-react-aria-NumberField--Group[data-invalid]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled],\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n";
+var css_248z = ".bcds-react-aria-NumberField {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-margin-hair);\n  background-color: var(--surface-color-forms-default);\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n/* Input and controls */\n.bcds-react-aria-NumberField--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n}\n/* Decrement button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child {\n  border-right: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child\n  > .bcds-react-aria-Button {\n  border-top-right-radius: var(--layout-border-radius-none);\n  border-bottom-right-radius: var(--layout-border-radius-none);\n}\n/* Increment button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child {\n  border-left: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child\n  > .bcds-react-aria-Button {\n  border-top-left-radius: var(--layout-border-radius-none);\n  border-bottom-left-radius: var(--layout-border-radius-none);\n}\n/* Button icons */\n.bcds-react-aria-NumberField--Group > button > svg {\n  color: var(--icons-color-primary);\n}\n/* Input container */\n.bcds-react-aria-NumberField--InputContainer {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  min-width: 0;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  padding: var(--layout-padding-small) 0.75rem;\n}\n/* Input field */\n.bcds-react-aria-NumberField--Input {\n  box-sizing: border-box;\n  border: none;\n  width: 100%;\n}\n\n/* Sizing */\n.bcds-react-aria-NumberField.medium > .bcds-react-aria-NumberField--Group {\n  height: 40px;\n}\n.bcds-react-aria-NumberField.medium .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-NumberField.small > .bcds-react-aria-NumberField--Group {\n  height: 32px;\n}\n.bcds-react-aria-NumberField.small .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-small-body);\n}\n\n/* Label above the input field */\n.bcds-react-aria-NumberField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* \"Required\" label */\n.bcds-react-aria-NumberField--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-small) var(--layout-padding-xsmall);\n}\n\n/* Description below the input field */\n.bcds-react-aria-NumberField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Hover state */\n.bcds-react-aria-NumberField--Group[data-hovered],\n.bcds-react-aria-NumberField--Group[data-hovered][data-disabled],\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Focus state */\n.bcds-react-aria-NumberField--Group[data-focus-within],\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button,\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  .bcds-react-aria-NumberField--Input,\n.bcds-react-aria-NumberField--Group[data-focus-visible]\n  .bcds-react-aria-NumberField--Input {\n  outline: none;\n}\n.bcds-react-aria-NumberField--Group[data-focus-visible] {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Error state */\n.bcds-react-aria-NumberField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  .bcds-react-aria-NumberField--InputContainer\n  > svg {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Disabled and read-only states */\n.bcds-react-aria-NumberField[data-disabled]\n  > .bcds-react-aria-NumberField--Group,\n.bcds-react-aria-NumberField[data-disabled]\n  .bcds-react-aria-NumberField--Input {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n}\n/* BCDS Button style tweaks */\n/* Disabled/read-only states */\n.bcds-react-aria-NumberField--Group[data-disabled],\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n/* Error state */\n.bcds-react-aria-NumberField--Group[data-invalid]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button {\n  border-top: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n/* Hover/focus states */\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n}\n/* Error state combos */\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled],\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n";
 styleInject(css_248z);
 function NumberField({ size = "medium", label, description, minValue = 0, errorMessage, ...props }) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.8.1-pr887",
+  "version": "0.8.1-pr889",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bcgov/design-system.git",
@@ -63,13 +63,13 @@
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
-    "@storybook/addon-a11y": "10.5.10",
-    "@storybook/addon-docs": "10.5.10",
-    "@storybook/addon-links": "10.5.10",
+    "@storybook/addon-a11y": "10.6.0",
+    "@storybook/addon-docs": "10.6.0",
+    "@storybook/addon-links": "10.6.0",
     "@storybook/addon-mcp": "0.7.0",
-    "@storybook/addon-vitest": "10.5.10",
+    "@storybook/addon-vitest": "10.6.0",
     "@storybook/mcp": "0.8.0",
-    "@storybook/react-vite": "10.5.10",
+    "@storybook/react-vite": "10.6.0",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.3",
     "@types/node": "25.9.5",
@@ -81,20 +81,20 @@
     "@vitest/browser-playwright": "4.1.11",
     "@vitest/coverage-v8": "4.1.11",
     "axe-playwright": "2.2.2",
-    "eslint": "10.9.1",
+    "eslint": "10.10.0",
     "eslint-plugin-react-hooks": "7.1.1",
-    "eslint-plugin-react-refresh": "0.5.5",
-    "eslint-plugin-storybook": "10.5.10",
-    "globals": "17.11.0",
+    "eslint-plugin-react-refresh": "0.5.6",
+    "eslint-plugin-storybook": "10.6.0",
+    "globals": "17.12.0",
     "jsdom": "29.1.1",
-    "playwright": "1.62.1",
+    "playwright": "1.63.0",
     "prettier": "3.9.6",
     "rollup": "4.63.1",
     "rollup-plugin-dts": "6.5.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "10.5.10",
-    "stylelint": "17.14.1",
+    "storybook": "10.6.0",
+    "stylelint": "17.15.0",
     "stylelint-config-standard": "40.0.0",
     "tslib": "2.8.1",
     "typescript": "6.0.3",