@alto-avios/alto-ui 3.7.0 → 3.8.0

package/dist/assets/Button.css

@@ -1 +1 @@
-._button_9pg0y_1{background:var(--alto-sem-color-bg-accent-vibrant-default);border:none;border-radius:var(--alto-button-md-radius);box-sizing:border-box;color:var(--alto-sem-color-fg-accent-on-vibrant);cursor:pointer;font-family:var(--alto-sem-text-body-font-family);font-style:normal;font-weight:500;justify-content:center;padding:var(--alto-sem-space-xs) var(--alto-sem-space-md);text-decoration:none}._button_9pg0y_1,._button_9pg0y_1 ._content_9pg0y_19{align-items:center;display:inline-flex;gap:var(--alto-sem-space-2xs)}._isNotLoading_9pg0y_28 ._loadingSpinner_9pg0y_28{opacity:0;position:absolute}._isNotLoading_9pg0y_28 ._content_9pg0y_19{opacity:1}._isLoading_9pg0y_37 ._loadingSpinner_9pg0y_28{opacity:1;position:absolute}._isLoading_9pg0y_37 ._content_9pg0y_19{opacity:0}._focusWhite_9pg0y_49[data-focus-visible]{outline-color:var(--alto-sem-color-border-white)}._sm_9pg0y_56{font-size:var(--alto-sem-text-label-sm-font-size);letter-spacing:var(--alto-sem-text-label-sm-letter-spacing);line-height:var(--alto-sem-text-label-sm-line-height);min-height:36px;padding:var(--alto-button-sm-padding-top) var(--alto-sem-space-md) var(--alto-button-sm-padding-bottom)}._md_9pg0y_65{font-size:var(--alto-sem-text-label-md-font-size);letter-spacing:var(--alto-sem-text-label-md-letter-spacing);line-height:var(--alto-sem-text-label-md-line-height);min-height:48px;padding:var(--alto-button-md-padding-top) var(--alto-sem-space-lg) var(--alto-button-md-padding-bottom)}._lg_9pg0y_74{font-size:var(--alto-sem-text-label-lg-font-size);height:55px;letter-spacing:var(--alto-sem-text-label-lg-letter-spacing);line-height:var(--alto-sem-text-label-lg-line-height);padding:var(--alto-button-lg-padding-top) var(--alto-sem-space-lg) var(--alto-button-lg-padding-bottom)}._fullWidth_9pg0y_83{width:100%}._textAlignLeft_9pg0y_90{text-align:left}._textAlignCenter_9pg0y_94{text-align:center}._textAlignRight_9pg0y_98{text-align:right}._accentPrimary_9pg0y_106[data-focused],._accentPrimary_9pg0y_106[data-hovered]{background:var(--alto-sem-color-bg-accent-vibrant-hover)}._accentPrimary_9pg0y_106[data-pressed]{background:var(--alto-sem-color-bg-accent-vibrant-active)}._accentPrimary_9pg0y_106[data-pressed][data-focused]{outline:none}._accentPrimary_9pg0y_106:disabled,._accentPrimary_9pg0y_106[aria-disabled]{background:var(--alto-sem-color-bg-disabled-vibrant);cursor:not-allowed;pointer-events:auto}._accentSecondary_9pg0y_126{background-color:transparent;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-accent);color:var(--alto-sem-color-fg-accent-primary)}._accentSecondary_9pg0y_126[data-focused],._accentSecondary_9pg0y_126[data-hovered]{background:var(--alto-sem-color-bg-accent-subtle-hover)}._accentSecondary_9pg0y_126[data-pressed]{background:var(--alto-sem-color-bg-accent-subtle-active)}._accentSecondary_9pg0y_126[data-pressed][data-focused]{outline:none}._accentSecondary_9pg0y_126:disabled,._accentSecondary_9pg0y_126[aria-disabled]{background:none;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-disabled-vibrant);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._accentTertiary_9pg0y_156{background:var(--alto-sem-color-bg-accent-subtle-default);color:var(--alto-sem-color-fg-accent-primary)}._accentTertiary_9pg0y_156[data-focused],._accentTertiary_9pg0y_156[data-hovered]{background:var(--alto-sem-color-bg-accent-subtle-hover)}._accentTertiary_9pg0y_156[data-pressed]{background:var(--alto-sem-color-bg-accent-subtle-active)}._accentTertiary_9pg0y_156[data-pressed][data-focused]{outline:none}._accentTertiary_9pg0y_156:disabled,._accentTertiary_9pg0y_156[aria-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._accentQuaternary_9pg0y_182{background:none;color:var(--alto-sem-color-fg-accent-primary)}._accentQuaternary_9pg0y_182[data-focused],._accentQuaternary_9pg0y_182[data-hovered]{background:var(--alto-sem-color-bg-accent-subtle-hover)}._accentQuaternary_9pg0y_182[data-pressed]{background:var(--alto-sem-color-bg-accent-subtle-active)}._accentQuaternary_9pg0y_182[data-pressed][data-focused]{outline:none}._accentQuaternary_9pg0y_182:disabled,._accentQuaternary_9pg0y_182[aria-disabled]{color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._criticalPrimary_9pg0y_208{background:var(--alto-sem-color-bg-critical-vibrant-default);color:var(--alto-sem-color-fg-critical-on-vibrant)}._criticalPrimary_9pg0y_208[data-focused],._criticalPrimary_9pg0y_208[data-hovered]{background:var(--alto-sem-color-bg-critical-vibrant-hover)}._criticalPrimary_9pg0y_208[data-pressed]{background:var(--alto-sem-color-bg-critical-vibrant-active)}._criticalPrimary_9pg0y_208[data-pressed][data-focused]{outline:none}._criticalPrimary_9pg0y_208:disabled,._criticalPrimary_9pg0y_208[aria-disabled]{background:var(--alto-sem-color-bg-disabled-vibrant);cursor:not-allowed;pointer-events:auto}._criticalSecondary_9pg0y_233{background:transparent;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-critical);color:var(--alto-sem-color-fg-critical-primary)}._criticalSecondary_9pg0y_233[data-focused],._criticalSecondary_9pg0y_233[data-hovered]{background:var(--alto-sem-color-bg-critical-subtle-hover)}._criticalSecondary_9pg0y_233[data-pressed]{background:var(--alto-sem-color-bg-critical-subtle-active)}._criticalSecondary_9pg0y_233[data-pressed][data-focused]{outline:none}._criticalSecondary_9pg0y_233:disabled,._criticalSecondary_9pg0y_233[aria-disabled]{background:none;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-disabled-vibrant);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._criticalTertiary_9pg0y_263{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-critical-primary)}._criticalTertiary_9pg0y_263[data-focused],._criticalTertiary_9pg0y_263[data-hovered]{background:var(--alto-sem-color-bg-critical-subtle-hover)}._criticalTertiary_9pg0y_263[data-pressed]{background:var(--alto-sem-color-bg-critical-subtle-active)}._criticalTertiary_9pg0y_263[data-pressed][data-focused]{outline:none}._criticalTertiary_9pg0y_263:disabled,._criticalTertiary_9pg0y_263[aria-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._criticalQuaternary_9pg0y_289{background:none;color:var(--alto-sem-color-fg-critical-primary)}._criticalQuaternary_9pg0y_289[data-focused],._criticalQuaternary_9pg0y_289[data-hovered]{background:var(--alto-sem-color-bg-critical-subtle-hover)}._criticalQuaternary_9pg0y_289[data-pressed]{background:var(--alto-sem-color-bg-critical-subtle-active)}._criticalQuaternary_9pg0y_289[data-pressed][data-focused]{outline:none}._criticalQuaternary_9pg0y_289:disabled,._criticalQuaternary_9pg0y_289[aria-disabled]{background:none;color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._neutralPrimary_9pg0y_316{background:var(--alto-sem-color-bg-inverse-vibrant-default);color:var(--alto-sem-color-fg-inverse-on-vibrant)}._neutralPrimary_9pg0y_316[data-focused],._neutralPrimary_9pg0y_316[data-hovered]{background:var(--alto-sem-color-bg-inverse-vibrant-hover)}._neutralPrimary_9pg0y_316[data-pressed]{background:var(--alto-sem-color-bg-inverse-vibrant-active)}._neutralPrimary_9pg0y_316[data-pressed][data-focused]{outline:none}._neutralPrimary_9pg0y_316:disabled,._neutralPrimary_9pg0y_316[aria-disabled]{background:var(--alto-sem-color-bg-disabled-vibrant);cursor:not-allowed;pointer-events:auto}._neutralSecondary_9pg0y_341{background:transparent;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-inverse);color:var(--alto-sem-color-fg-inverse-on-subtle)}._neutralSecondary_9pg0y_341[data-focused],._neutralSecondary_9pg0y_341[data-hovered]{background:var(--alto-sem-color-bg-inverse-subtle-hover)}._neutralSecondary_9pg0y_341[data-pressed]{background:var(--alto-sem-color-bg-inverse-subtle-active)}._neutralSecondary_9pg0y_341[data-pressed][data-focused]{outline:none}._neutralSecondary_9pg0y_341:disabled,._neutralSecondary_9pg0y_341[aria-disabled]{background:none;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-disabled-vibrant);cursor:not-allowed;pointer-events:auto}._neutralTertiary_9pg0y_370{background:var(--alto-sem-color-bg-inverse-subtle-default);color:var(--alto-sem-color-fg-primary)}._neutralTertiary_9pg0y_370[data-focused],._neutralTertiary_9pg0y_370[data-hovered]{background:var(--alto-sem-color-bg-inverse-subtle-hover)}._neutralTertiary_9pg0y_370[data-pressed]{background:var(--alto-sem-color-bg-inverse-subtle-active)}._neutralTertiary_9pg0y_370[data-pressed][data-focused]{outline:none}._neutralTertiary_9pg0y_370:disabled,._neutralTertiary_9pg0y_370[aria-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._neutralQuaternary_9pg0y_396{background:none;color:var(--alto-sem-color-fg-primary)}._neutralQuaternary_9pg0y_396[data-focused],._neutralQuaternary_9pg0y_396[data-hovered]{background:var(--alto-sem-color-bg-inverse-subtle-hover)}._neutralQuaternary_9pg0y_396[data-pressed]{background:var(--alto-sem-color-bg-inverse-subtle-active)}._neutralQuaternary_9pg0y_396[data-pressed][data-focused]{outline:none}._neutralQuaternary_9pg0y_396:disabled,._neutralQuaternary_9pg0y_396[aria-disabled]{background:none;color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._whitePrimary_9pg0y_423{background:var(--alto-sem-color-bg-white-vibrant-default);color:var(--alto-sem-color-fg-white-on-vibrant)}._whitePrimary_9pg0y_423[data-focused],._whitePrimary_9pg0y_423[data-hovered]{background:var(--alto-sem-color-bg-white-vibrant-hover)}._whitePrimary_9pg0y_423[data-pressed]{background:var(--alto-sem-color-bg-white-vibrant-active)}._whitePrimary_9pg0y_423[data-pressed][data-focused]{outline:none}._whitePrimary_9pg0y_423:disabled,._whitePrimary_9pg0y_423[aria-disabled]{background:#ffffff52;color:var(--alto-sem-color-fg-disabled-on-vibrant);cursor:not-allowed;pointer-events:auto}._whiteSecondary_9pg0y_449{background:transparent;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-white);color:var(--alto-sem-color-fg-white-on-subtle)}._whiteSecondary_9pg0y_449[data-focused],._whiteSecondary_9pg0y_449[data-hovered]{background:var(--alto-sem-color-overlay-state-darken-hover)}._whiteSecondary_9pg0y_449[data-pressed]{background:var(--alto-sem-color-overlay-state-darken-active)}._whiteSecondary_9pg0y_449[data-pressed][data-focused]{outline:none}._whiteSecondary_9pg0y_449[data-focused]{outline-color:var(--alto-sem-color-border-white)}._whiteSecondary_9pg0y_449:disabled,._whiteSecondary_9pg0y_449[aria-disabled]{background:none;border:var(--alto-sem-border-width-sm) solid hsla(0,0%,100%,.32);color:#ffffff52;cursor:not-allowed;pointer-events:auto}._whiteTertiary_9pg0y_482{background:var(--alto-sem-color-bg-white-subtle-default);color:var(--alto-sem-color-fg-white-on-subtle)}._whiteTertiary_9pg0y_482[data-focused],._whiteTertiary_9pg0y_482[data-hovered]{background:var(--alto-sem-color-bg-white-subtle-hover)}._whiteTertiary_9pg0y_482[data-pressed]{background:var(--alto-sem-color-bg-white-subtle-active)}._whiteTertiary_9pg0y_482[data-pressed][data-focused]{outline:none}._whiteTertiary_9pg0y_482[data-focused]{outline-color:var(--alto-sem-color-border-white)}._whiteTertiary_9pg0y_482:disabled,._whiteTertiary_9pg0y_482[aria-disabled]{background:#0000000d;color:#ffffff52;cursor:not-allowed;pointer-events:auto}._whiteQuaternary_9pg0y_512{background:none;color:var(--alto-sem-color-fg-white-primary)}._whiteQuaternary_9pg0y_512[data-focused],._whiteQuaternary_9pg0y_512[data-hovered]{background:var(--alto-sem-color-bg-white-subtle-hover)}._whiteQuaternary_9pg0y_512[data-pressed]{background:var(--alto-sem-color-bg-white-subtle-active)}._whiteQuaternary_9pg0y_512[data-pressed][data-focused]{outline:none}._whiteQuaternary_9pg0y_512[data-focused]{outline-color:var(--alto-sem-color-border-white)}._whiteQuaternary_9pg0y_512:disabled,._whiteQuaternary_9pg0y_512[aria-disabled]{background:none;color:#ffffff52;cursor:not-allowed;pointer-events:auto}._fa-spinner-third_9pg0y_544{height:1rem;width:1rem}._icon-wrapper_9pg0y_549{all:unset;align-items:center;display:flex;height:1em;justify-content:center;width:1em}
+._button_18yvx_1{background:var(--alto-sem-color-bg-accent-vibrant-default);border:none;border-radius:var(--alto-button-md-radius);box-sizing:border-box;color:var(--alto-sem-color-fg-accent-on-vibrant);cursor:pointer;font-family:var(--alto-sem-text-body-font-family);font-style:normal;font-weight:500;justify-content:center;padding:var(--alto-sem-space-xs) var(--alto-sem-space-md);text-decoration:none}._button_18yvx_1,._button_18yvx_1 ._content_18yvx_19{align-items:center;display:inline-flex;gap:var(--alto-sem-space-2xs)}._isNotLoading_18yvx_28 ._loadingSpinner_18yvx_28{opacity:0;position:absolute}._isNotLoading_18yvx_28 ._content_18yvx_19{opacity:1}._isLoading_18yvx_37 ._loadingSpinner_18yvx_28{opacity:1;position:absolute}._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg{color:var(--alto-sem-color-fg-accent-on-vibrant)}._isLoading_18yvx_37 ._content_18yvx_19{opacity:0}._focusWhite_18yvx_53[data-focus-visible]{outline-color:var(--alto-sem-color-border-white)}._sm_18yvx_60{font-size:var(--alto-sem-text-label-sm-font-size);letter-spacing:var(--alto-sem-text-label-sm-letter-spacing);line-height:var(--alto-sem-text-label-sm-line-height);min-height:36px;padding:var(--alto-button-sm-padding-top) var(--alto-sem-space-md) var(--alto-button-sm-padding-bottom)}._md_18yvx_69{font-size:var(--alto-sem-text-label-md-font-size);letter-spacing:var(--alto-sem-text-label-md-letter-spacing);line-height:var(--alto-sem-text-label-md-line-height);min-height:48px;padding:var(--alto-button-md-padding-top) var(--alto-sem-space-lg) var(--alto-button-md-padding-bottom)}._lg_18yvx_78{font-size:var(--alto-sem-text-label-lg-font-size);height:55px;letter-spacing:var(--alto-sem-text-label-lg-letter-spacing);line-height:var(--alto-sem-text-label-lg-line-height);padding:var(--alto-button-lg-padding-top) var(--alto-sem-space-lg) var(--alto-button-lg-padding-bottom)}._fullWidth_18yvx_87{width:100%}._textAlignLeft_18yvx_94{text-align:left}._textAlignCenter_18yvx_98{text-align:center}._textAlignRight_18yvx_102{text-align:right}._accentPrimary_18yvx_110[data-focused],._accentPrimary_18yvx_110[data-hovered]{background:var(--alto-sem-color-bg-accent-vibrant-hover)}._accentPrimary_18yvx_110[data-pressed]{background:var(--alto-sem-color-bg-accent-vibrant-active)}._accentPrimary_18yvx_110[data-pressed][data-focused]{outline:none}._accentPrimary_18yvx_110:disabled,._accentPrimary_18yvx_110[aria-disabled]{background:var(--alto-sem-color-bg-disabled-vibrant);cursor:not-allowed;pointer-events:auto}._accentPrimary_18yvx_110._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg{color:var(--alto-sem-color-fg-accent-on-vibrant)}._accentSecondary_18yvx_134{background-color:transparent;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-accent);color:var(--alto-sem-color-fg-accent-primary)}._accentSecondary_18yvx_134[data-focused],._accentSecondary_18yvx_134[data-hovered]{background:var(--alto-sem-color-bg-accent-subtle-hover)}._accentSecondary_18yvx_134[data-pressed]{background:var(--alto-sem-color-bg-accent-subtle-active)}._accentSecondary_18yvx_134[data-pressed][data-focused]{outline:none}._accentSecondary_18yvx_134:disabled,._accentSecondary_18yvx_134[aria-disabled]{background:none;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-disabled-vibrant);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._accentSecondary_18yvx_134._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg,._accentTertiary_18yvx_168{color:var(--alto-sem-color-fg-accent-primary)}._accentTertiary_18yvx_168{background:var(--alto-sem-color-bg-accent-subtle-default)}._accentTertiary_18yvx_168[data-focused],._accentTertiary_18yvx_168[data-hovered]{background:var(--alto-sem-color-bg-accent-subtle-hover)}._accentTertiary_18yvx_168[data-pressed]{background:var(--alto-sem-color-bg-accent-subtle-active)}._accentTertiary_18yvx_168[data-pressed][data-focused]{outline:none}._accentTertiary_18yvx_168:disabled,._accentTertiary_18yvx_168[aria-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._accentQuaternary_18yvx_198,._accentTertiary_18yvx_168._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg{color:var(--alto-sem-color-fg-accent-primary)}._accentQuaternary_18yvx_198{background:none}._accentQuaternary_18yvx_198[data-focused],._accentQuaternary_18yvx_198[data-hovered]{background:var(--alto-sem-color-bg-accent-subtle-hover)}._accentQuaternary_18yvx_198[data-pressed]{background:var(--alto-sem-color-bg-accent-subtle-active)}._accentQuaternary_18yvx_198[data-pressed][data-focused]{outline:none}._accentQuaternary_18yvx_198:disabled,._accentQuaternary_18yvx_198[aria-disabled]{color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._accentQuaternary_18yvx_198._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg{color:var(--alto-sem-color-fg-accent-primary)}._criticalPrimary_18yvx_228{background:var(--alto-sem-color-bg-critical-vibrant-default);color:var(--alto-sem-color-fg-critical-on-vibrant)}._criticalPrimary_18yvx_228[data-focused],._criticalPrimary_18yvx_228[data-hovered]{background:var(--alto-sem-color-bg-critical-vibrant-hover)}._criticalPrimary_18yvx_228[data-pressed]{background:var(--alto-sem-color-bg-critical-vibrant-active)}._criticalPrimary_18yvx_228[data-pressed][data-focused]{outline:none}._criticalPrimary_18yvx_228:disabled,._criticalPrimary_18yvx_228[aria-disabled]{background:var(--alto-sem-color-bg-disabled-vibrant);cursor:not-allowed;pointer-events:auto}._criticalSecondary_18yvx_253{background:transparent;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-critical);color:var(--alto-sem-color-fg-critical-primary)}._criticalSecondary_18yvx_253[data-focused],._criticalSecondary_18yvx_253[data-hovered]{background:var(--alto-sem-color-bg-critical-subtle-hover)}._criticalSecondary_18yvx_253[data-pressed]{background:var(--alto-sem-color-bg-critical-subtle-active)}._criticalSecondary_18yvx_253[data-pressed][data-focused]{outline:none}._criticalSecondary_18yvx_253:disabled,._criticalSecondary_18yvx_253[aria-disabled]{background:none;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-disabled-vibrant);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._criticalSecondary_18yvx_253._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg,._criticalTertiary_18yvx_287{color:var(--alto-sem-color-fg-critical-primary)}._criticalTertiary_18yvx_287{background:var(--alto-sem-color-bg-critical-subtle-default)}._criticalTertiary_18yvx_287[data-focused],._criticalTertiary_18yvx_287[data-hovered]{background:var(--alto-sem-color-bg-critical-subtle-hover)}._criticalTertiary_18yvx_287[data-pressed]{background:var(--alto-sem-color-bg-critical-subtle-active)}._criticalTertiary_18yvx_287[data-pressed][data-focused]{outline:none}._criticalTertiary_18yvx_287:disabled,._criticalTertiary_18yvx_287[aria-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._criticalQuaternary_18yvx_317,._criticalTertiary_18yvx_287._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg{color:var(--alto-sem-color-fg-critical-primary)}._criticalQuaternary_18yvx_317{background:none}._criticalQuaternary_18yvx_317[data-focused],._criticalQuaternary_18yvx_317[data-hovered]{background:var(--alto-sem-color-bg-critical-subtle-hover)}._criticalQuaternary_18yvx_317[data-pressed]{background:var(--alto-sem-color-bg-critical-subtle-active)}._criticalQuaternary_18yvx_317[data-pressed][data-focused]{outline:none}._criticalQuaternary_18yvx_317:disabled,._criticalQuaternary_18yvx_317[aria-disabled]{background:none;color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._criticalQuaternary_18yvx_317._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg{color:var(--alto-sem-color-fg-critical-primary)}._neutralPrimary_18yvx_348{background:var(--alto-sem-color-bg-inverse-vibrant-default);color:var(--alto-sem-color-fg-inverse-on-vibrant)}._neutralPrimary_18yvx_348[data-focused],._neutralPrimary_18yvx_348[data-hovered]{background:var(--alto-sem-color-bg-inverse-vibrant-hover)}._neutralPrimary_18yvx_348[data-pressed]{background:var(--alto-sem-color-bg-inverse-vibrant-active)}._neutralPrimary_18yvx_348[data-pressed][data-focused]{outline:none}._neutralPrimary_18yvx_348:disabled,._neutralPrimary_18yvx_348[aria-disabled]{background:var(--alto-sem-color-bg-disabled-vibrant);cursor:not-allowed;pointer-events:auto}._neutralSecondary_18yvx_373{background:transparent;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-inverse);color:var(--alto-sem-color-fg-inverse-on-subtle)}._neutralSecondary_18yvx_373[data-focused],._neutralSecondary_18yvx_373[data-hovered]{background:var(--alto-sem-color-bg-inverse-subtle-hover)}._neutralSecondary_18yvx_373[data-pressed]{background:var(--alto-sem-color-bg-inverse-subtle-active)}._neutralSecondary_18yvx_373[data-pressed][data-focused]{outline:none}._neutralSecondary_18yvx_373:disabled,._neutralSecondary_18yvx_373[aria-disabled]{background:none;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-disabled-vibrant);cursor:not-allowed;pointer-events:auto}._neutralSecondary_18yvx_373._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg,._neutralTertiary_18yvx_406{color:var(--alto-sem-color-fg-primary)}._neutralTertiary_18yvx_406{background:var(--alto-sem-color-bg-inverse-subtle-default)}._neutralTertiary_18yvx_406[data-focused],._neutralTertiary_18yvx_406[data-hovered]{background:var(--alto-sem-color-bg-inverse-subtle-hover)}._neutralTertiary_18yvx_406[data-pressed]{background:var(--alto-sem-color-bg-inverse-subtle-active)}._neutralTertiary_18yvx_406[data-pressed][data-focused]{outline:none}._neutralTertiary_18yvx_406:disabled,._neutralTertiary_18yvx_406[aria-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._neutralQuaternary_18yvx_436,._neutralTertiary_18yvx_406._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg{color:var(--alto-sem-color-fg-primary)}._neutralQuaternary_18yvx_436{background:none}._neutralQuaternary_18yvx_436[data-focused],._neutralQuaternary_18yvx_436[data-hovered]{background:var(--alto-sem-color-bg-inverse-subtle-hover)}._neutralQuaternary_18yvx_436[data-pressed]{background:var(--alto-sem-color-bg-inverse-subtle-active)}._neutralQuaternary_18yvx_436[data-pressed][data-focused]{outline:none}._neutralQuaternary_18yvx_436:disabled,._neutralQuaternary_18yvx_436[aria-disabled]{background:none;color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:auto}._neutralQuaternary_18yvx_436._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg{color:var(--alto-sem-color-fg-primary)}._whitePrimary_18yvx_467{background:var(--alto-sem-color-bg-white-vibrant-default);color:var(--alto-sem-color-fg-white-on-vibrant)}._whitePrimary_18yvx_467[data-focused],._whitePrimary_18yvx_467[data-hovered]{background:var(--alto-sem-color-bg-white-vibrant-hover)}._whitePrimary_18yvx_467[data-pressed]{background:var(--alto-sem-color-bg-white-vibrant-active)}._whitePrimary_18yvx_467[data-pressed][data-focused]{outline:none}._whitePrimary_18yvx_467:disabled,._whitePrimary_18yvx_467[aria-disabled]{background:#ffffff52;color:var(--alto-sem-color-fg-disabled-on-vibrant);cursor:not-allowed;pointer-events:auto}._whitePrimary_18yvx_467._isLoading_18yvx_37 ._loadingSpinner_18yvx_28 svg{color:var(--alto-sem-color-fg-white-on-primary)}._whiteSecondary_18yvx_497{background:transparent;border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-white);color:var(--alto-sem-color-fg-white-on-subtle)}._whiteSecondary_18yvx_497[data-focused],._whiteSecondary_18yvx_497[data-hovered]{background:var(--alto-sem-color-overlay-state-darken-hover)}._whiteSecondary_18yvx_497[data-pressed]{background:var(--alto-sem-color-overlay-state-darken-active)}._whiteSecondary_18yvx_497[data-pressed][data-focused]{outline:none}._whiteSecondary_18yvx_497[data-focused]{outline-color:var(--alto-sem-color-border-white)}._whiteSecondary_18yvx_497:disabled,._whiteSecondary_18yvx_497[aria-disabled]{background:none;border:var(--alto-sem-border-width-sm) solid hsla(0,0%,100%,.32);color:#ffffff52;cursor:not-allowed;pointer-events:auto}._whiteTertiary_18yvx_530{background:var(--alto-sem-color-bg-white-subtle-default);color:var(--alto-sem-color-fg-white-on-subtle)}._whiteTertiary_18yvx_530[data-focused],._whiteTertiary_18yvx_530[data-hovered]{background:var(--alto-sem-color-bg-white-subtle-hover)}._whiteTertiary_18yvx_530[data-pressed]{background:var(--alto-sem-color-bg-white-subtle-active)}._whiteTertiary_18yvx_530[data-pressed][data-focused]{outline:none}._whiteTertiary_18yvx_530[data-focused]{outline-color:var(--alto-sem-color-border-white)}._whiteTertiary_18yvx_530:disabled,._whiteTertiary_18yvx_530[aria-disabled]{background:#0000000d;color:#ffffff52;cursor:not-allowed;pointer-events:auto}._whiteQuaternary_18yvx_560{background:none;color:var(--alto-sem-color-fg-white-primary)}._whiteQuaternary_18yvx_560[data-focused],._whiteQuaternary_18yvx_560[data-hovered]{background:var(--alto-sem-color-bg-white-subtle-hover)}._whiteQuaternary_18yvx_560[data-pressed]{background:var(--alto-sem-color-bg-white-subtle-active)}._whiteQuaternary_18yvx_560[data-pressed][data-focused]{outline:none}._whiteQuaternary_18yvx_560[data-focused]{outline-color:var(--alto-sem-color-border-white)}._whiteQuaternary_18yvx_560:disabled,._whiteQuaternary_18yvx_560[aria-disabled]{background:none;color:#ffffff52;cursor:not-allowed;pointer-events:auto}._fa-spinner-third_18yvx_592{height:1rem;width:1rem}._icon-wrapper_18yvx_597{all:unset;align-items:center;display:flex;height:1em;justify-content:center;width:1em}

package/dist/assets/CalloutBanner.css

@@ -1 +1 @@
-._calloutBanner_kxqgt_1{border-radius:var(--alto-card-radius);border-style:solid;border-width:var(--alto-sem-border-width-sm);display:flex;flex-direction:column;overflow:hidden;text-align:left;width:100%}._calloutBanner__icon_kxqgt_12{align-self:flex-start}._calloutBanner__start_kxqgt_16{display:flex;flex-direction:row;gap:var(--alto-sem-space-xs);padding:var(--alto-sem-space-xs);position:relative}._calloutBanner__dismiss_kxqgt_24{position:absolute;right:var(--alto-sem-space-xs);top:var(--alto-sem-space-xs)}._calloutBanner__meta_kxqgt_30{align-items:flex-start;display:flex;flex-direction:column;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-sm-font-size);font-style:normal;justify-content:center;letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height);overflow-wrap:break-word;width:100%;word-wrap:break-word;word-break:break-word}._calloutBanner__meta-top_kxqgt_46{align-items:flex-start;display:flex;flex-direction:column;flex-wrap:wrap;text-wrap:wrap}._calloutBanner__meta-top-dismiss_kxqgt_54{padding-right:var(--alto-sem-space-3xl)}._calloutBanner__meta-title_kxqgt_58{font-weight:600}._calloutBanner__meta-description_kxqgt_62{margin-top:var(--alto-sem-space-4xs)}._calloutBanner__meta-label_kxqgt_66{margin-top:var(--alto-sem-space-xs)}._calloutBanner__start_kxqgt_16{border-bottom:var(--alto-sem-border-width-sm) solid transparent;color:var(--alto-sem-color-fg-critical-on-vibrant)}._calloutBanner__end_kxqgt_75{background-color:var(--alto-sem-color-bg-layer2-default);display:flex;justify-content:flex-start;padding:var(--alto-sem-space-sm,16px)}._calloutBanner-critical_kxqgt_83{border-color:var(--alto-sem-color-border-critical)}._calloutBanner-primary_kxqgt_87._calloutBanner-critical_kxqgt_83 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-critical-vibrant-default)}._calloutBanner-secondary_kxqgt_91._calloutBanner-critical_kxqgt_83 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kxqgt_91._calloutBanner-critical_kxqgt_83 ._calloutBanner__end_kxqgt_75{border-top:1px solid var(--alto-sem-color-border-critical)}._calloutBanner-tertiary_kxqgt_100._calloutBanner-critical_kxqgt_83 ._calloutBanner__start_kxqgt_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-critical_kxqgt_83:not(._calloutBanner-primary_kxqgt_87) ._calloutBanner__icon_kxqgt_12{color:var(--alto-sem-color-fg-critical-primary)}._calloutBanner-success_kxqgt_109{border-color:var(--alto-sem-color-border-success)}._calloutBanner-primary_kxqgt_87._calloutBanner-success_kxqgt_109 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-success-vibrant-default)}._calloutBanner-secondary_kxqgt_91._calloutBanner-success_kxqgt_109 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-success-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kxqgt_91._calloutBanner-success_kxqgt_109 ._calloutBanner__end_kxqgt_75{border-top:1px solid var(--alto-sem-color-border-success)}._calloutBanner-tertiary_kxqgt_100._calloutBanner-success_kxqgt_109 ._calloutBanner__start_kxqgt_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-success_kxqgt_109:not(._calloutBanner-primary_kxqgt_87) ._calloutBanner__icon_kxqgt_12{color:var(--alto-sem-color-fg-success-primary)}._calloutBanner-information_kxqgt_135{border-color:var(--alto-sem-color-border-information)}._calloutBanner-primary_kxqgt_87._calloutBanner-information_kxqgt_135 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-information-vibrant-default)}._calloutBanner-secondary_kxqgt_91._calloutBanner-information_kxqgt_135 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-information-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kxqgt_91._calloutBanner-information_kxqgt_135 ._calloutBanner__end_kxqgt_75{border-top:1px solid var(--alto-sem-color-border-information)}._calloutBanner-tertiary_kxqgt_100._calloutBanner-information_kxqgt_135 ._calloutBanner__start_kxqgt_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-information_kxqgt_135:not(._calloutBanner-primary_kxqgt_87) ._calloutBanner__icon_kxqgt_12{color:var(--alto-sem-color-fg-information-primary)}._calloutBanner-neutral_kxqgt_161{border-color:var(--alto-sem-color-border-secondary)}._calloutBanner-primary_kxqgt_87._calloutBanner-neutral_kxqgt_161 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-inverse-vibrant-default)}._calloutBanner-secondary_kxqgt_91._calloutBanner-neutral_kxqgt_161 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-layer1-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kxqgt_91._calloutBanner-neutral_kxqgt_161 ._calloutBanner__end_kxqgt_75{border-top:1px solid var(--alto-sem-color-border-secondary)}._calloutBanner-tertiary_kxqgt_100._calloutBanner-neutral_kxqgt_161 ._calloutBanner__start_kxqgt_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-neutral_kxqgt_161:not(._calloutBanner-primary_kxqgt_87) ._calloutBanner__icon_kxqgt_12{color:var(--alto-sem-color-fg-neutral-primary)}._calloutBanner-tertiary_kxqgt_100{border-color:transparent}._calloutBanner-tertiary_kxqgt_100 ._calloutBanner__end_kxqgt_75{border-radius:var(--alto-card-radius)}
+._calloutBanner_confe_1{border-radius:var(--alto-card-radius);border-style:solid;border-width:var(--alto-sem-border-width-sm);display:flex;flex-direction:column;overflow:hidden;text-align:left;width:100%}._calloutBanner__icon_confe_12{align-self:flex-start}._calloutBanner__start_confe_16{border-bottom:var(--alto-sem-border-width-sm) solid transparent;color:var(--alto-sem-color-fg-critical-on-vibrant);display:flex;flex-direction:row;gap:var(--alto-sem-space-xs);padding:var(--alto-sem-space-xs);position:relative}._calloutBanner__end_confe_26{background-color:var(--alto-sem-color-bg-layer2-default);display:flex;justify-content:flex-start;padding:var(--alto-sem-space-sm)}._calloutBanner__dismiss_confe_33{position:absolute;right:var(--alto-sem-space-xs);top:var(--alto-sem-space-xs)}._calloutBanner__meta_confe_39{align-items:flex-start;display:flex;flex-direction:column;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-sm-font-size);font-style:normal;justify-content:center;letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height);overflow-wrap:break-word;width:100%;word-wrap:break-word;word-break:break-word}._calloutBanner__meta-content_confe_55{display:flex;flex-direction:column;gap:var(--alto-sem-space-xs);width:calc(100% - 36px)}._calloutBanner__meta-label_confe_62{display:flex}._calloutBanner__meta-right_confe_66{flex-direction:row;justify-content:space-between}._calloutBanner__meta-top_confe_71{align-items:flex-start;display:flex;flex-direction:column;flex-wrap:wrap;text-wrap:wrap}._calloutBanner__custom-asset_confe_79{max-width:52px}._calloutBanner__custom-asset_confe_79>:first-child{max-width:inherit}._calloutBanner__meta-top-dismiss_confe_87{padding-right:var(--alto-sem-space-3xl)}._calloutBanner__meta-title_confe_91{font-weight:600}._calloutBanner__meta-description_confe_95{margin-top:var(--alto-sem-space-4xs)}._calloutBanner-critical_confe_100{border-color:var(--alto-sem-color-border-critical)}._calloutBanner-primary_confe_104._calloutBanner-critical_confe_100 ._calloutBanner__start_confe_16{background:var(--alto-sem-color-bg-critical-vibrant-default)}._calloutBanner-secondary_confe_108._calloutBanner-critical_confe_100 ._calloutBanner__start_confe_16{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_confe_108._calloutBanner-critical_confe_100 ._calloutBanner__end_confe_26{border-top:1px solid var(--alto-sem-color-border-critical)}._calloutBanner-tertiary_confe_117._calloutBanner-critical_confe_100 ._calloutBanner__start_confe_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-critical_confe_100:not(._calloutBanner-primary_confe_104) ._calloutBanner__icon_confe_12{color:var(--alto-sem-color-fg-critical-primary)}._calloutBanner-success_confe_126{border-color:var(--alto-sem-color-border-success)}._calloutBanner-primary_confe_104._calloutBanner-success_confe_126 ._calloutBanner__start_confe_16{background:var(--alto-sem-color-bg-success-vibrant-default)}._calloutBanner-secondary_confe_108._calloutBanner-success_confe_126 ._calloutBanner__start_confe_16{background:var(--alto-sem-color-bg-success-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_confe_108._calloutBanner-success_confe_126 ._calloutBanner__end_confe_26{border-top:1px solid var(--alto-sem-color-border-success)}._calloutBanner-tertiary_confe_117._calloutBanner-success_confe_126 ._calloutBanner__start_confe_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-success_confe_126:not(._calloutBanner-primary_confe_104) ._calloutBanner__icon_confe_12{color:var(--alto-sem-color-fg-success-primary)}._calloutBanner-information_confe_152{border-color:var(--alto-sem-color-border-information)}._calloutBanner-primary_confe_104._calloutBanner-information_confe_152 ._calloutBanner__start_confe_16{background:var(--alto-sem-color-bg-information-vibrant-default)}._calloutBanner-secondary_confe_108._calloutBanner-information_confe_152 ._calloutBanner__start_confe_16{background:var(--alto-sem-color-bg-information-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_confe_108._calloutBanner-information_confe_152 ._calloutBanner__end_confe_26{border-top:1px solid var(--alto-sem-color-border-information)}._calloutBanner-tertiary_confe_117._calloutBanner-information_confe_152 ._calloutBanner__start_confe_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-information_confe_152:not(._calloutBanner-primary_confe_104) ._calloutBanner__icon_confe_12{color:var(--alto-sem-color-fg-information-primary)}._calloutBanner-neutral_confe_178{border-color:var(--alto-sem-color-border-secondary)}._calloutBanner-primary_confe_104._calloutBanner-neutral_confe_178 ._calloutBanner__start_confe_16{background:var(--alto-sem-color-bg-inverse-vibrant-default)}._calloutBanner-secondary_confe_108._calloutBanner-neutral_confe_178 ._calloutBanner__start_confe_16{background:var(--alto-sem-color-bg-layer1-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_confe_108._calloutBanner-neutral_confe_178 ._calloutBanner__end_confe_26{border-top:1px solid var(--alto-sem-color-border-secondary)}._calloutBanner-tertiary_confe_117._calloutBanner-neutral_confe_178 ._calloutBanner__start_confe_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-neutral_confe_178:not(._calloutBanner-primary_confe_104) ._calloutBanner__icon_confe_12{color:var(--alto-sem-color-fg-neutral-primary)}._calloutBanner-tertiary_confe_117{border-color:transparent;gap:var(--alto-sem-space-4xs)}._calloutBanner-tertiary_confe_117 ._calloutBanner__start_confe_16{padding:0}._calloutBanner-tertiary_confe_117 ._calloutBanner__end_confe_26{border-radius:var(--alto-card-radius)}

package/dist/components/Button/Button.js

@@ -8,35 +8,35 @@ import { useFocusRing } from "@react-aria/focus";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Button.css';const button$1 = "_button_9pg0y_1";
-const content = "_content_9pg0y_19";
-const isNotLoading = "_isNotLoading_9pg0y_28";
-const loadingSpinner = "_loadingSpinner_9pg0y_28";
-const isLoading = "_isLoading_9pg0y_37";
-const focusWhite = "_focusWhite_9pg0y_49";
-const sm = "_sm_9pg0y_56";
-const md = "_md_9pg0y_65";
-const lg = "_lg_9pg0y_74";
-const fullWidth = "_fullWidth_9pg0y_83";
-const textAlignLeft = "_textAlignLeft_9pg0y_90";
-const textAlignCenter = "_textAlignCenter_9pg0y_94";
-const textAlignRight = "_textAlignRight_9pg0y_98";
-const accentPrimary = "_accentPrimary_9pg0y_106";
-const accentSecondary = "_accentSecondary_9pg0y_126";
-const accentTertiary = "_accentTertiary_9pg0y_156";
-const accentQuaternary = "_accentQuaternary_9pg0y_182";
-const criticalPrimary = "_criticalPrimary_9pg0y_208";
-const criticalSecondary = "_criticalSecondary_9pg0y_233";
-const criticalTertiary = "_criticalTertiary_9pg0y_263";
-const criticalQuaternary = "_criticalQuaternary_9pg0y_289";
-const neutralPrimary = "_neutralPrimary_9pg0y_316";
-const neutralSecondary = "_neutralSecondary_9pg0y_341";
-const neutralTertiary = "_neutralTertiary_9pg0y_370";
-const neutralQuaternary = "_neutralQuaternary_9pg0y_396";
-const whitePrimary = "_whitePrimary_9pg0y_423";
-const whiteSecondary = "_whiteSecondary_9pg0y_449";
-const whiteTertiary = "_whiteTertiary_9pg0y_482";
-const whiteQuaternary = "_whiteQuaternary_9pg0y_512";
+import '../../assets/Button.css';const button$1 = "_button_18yvx_1";
+const content = "_content_18yvx_19";
+const isNotLoading = "_isNotLoading_18yvx_28";
+const loadingSpinner = "_loadingSpinner_18yvx_28";
+const isLoading = "_isLoading_18yvx_37";
+const focusWhite = "_focusWhite_18yvx_53";
+const sm = "_sm_18yvx_60";
+const md = "_md_18yvx_69";
+const lg = "_lg_18yvx_78";
+const fullWidth = "_fullWidth_18yvx_87";
+const textAlignLeft = "_textAlignLeft_18yvx_94";
+const textAlignCenter = "_textAlignCenter_18yvx_98";
+const textAlignRight = "_textAlignRight_18yvx_102";
+const accentPrimary = "_accentPrimary_18yvx_110";
+const accentSecondary = "_accentSecondary_18yvx_134";
+const accentTertiary = "_accentTertiary_18yvx_168";
+const accentQuaternary = "_accentQuaternary_18yvx_198";
+const criticalPrimary = "_criticalPrimary_18yvx_228";
+const criticalSecondary = "_criticalSecondary_18yvx_253";
+const criticalTertiary = "_criticalTertiary_18yvx_287";
+const criticalQuaternary = "_criticalQuaternary_18yvx_317";
+const neutralPrimary = "_neutralPrimary_18yvx_348";
+const neutralSecondary = "_neutralSecondary_18yvx_373";
+const neutralTertiary = "_neutralTertiary_18yvx_406";
+const neutralQuaternary = "_neutralQuaternary_18yvx_436";
+const whitePrimary = "_whitePrimary_18yvx_467";
+const whiteSecondary = "_whiteSecondary_18yvx_497";
+const whiteTertiary = "_whiteTertiary_18yvx_530";
+const whiteQuaternary = "_whiteQuaternary_18yvx_560";
 const styles = {
   button: button$1,
   content,

package/dist/components/CalloutBanner/CalloutBanner.d.ts

@@ -1,21 +1,60 @@
 import { default as React } from 'react';
-import { VariantProps } from 'class-variance-authority';
-declare const calloutBanner: (props?: ({
-    emphasis?: "primary" | "secondary" | "tertiary" | null | undefined;
-    styleVariant?: "neutral" | "critical" | "success" | "information" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type CalloutBannerVariants = VariantProps<typeof calloutBanner>;
-export interface CalloutBannerProps extends CalloutBannerVariants {
-    /** The main heading text of the banner */
+export interface CalloutBannerProps {
+    /**
+     * The main heading text of the banner
+     */
     title: string;
-    /** Optional secondary text providing more details */
+    /**
+     * Optional secondary text providing more details
+     */
     description?: string;
-    /** Optional button group to be rendered as a label */
+    /**
+     * Optional emphasis style for the banner
+     * @default 'primary'
+     */
+    emphasis?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Optional style variant for the banner
+     * - 'critical' for errors, urgent warnings
+     * - 'success' for confirmations, achievements
+     * - 'information' for For general updates, tips
+     * - 'neutral' for non-critical messages, guidance
+     * @default 'critical'
+     */
+    styleVariant?: 'critical' | 'success' | 'information' | 'neutral';
+    /**
+     * Optional button group to be rendered as a label
+     */
     label?: React.ReactNode;
-    /** Optional content to be rendered in the end section of the banner */
+    /**
+     * Optional label for the dismiss button tooltip
+     */
+    dismissButtonTooltipLabel?: string;
+    /**
+     * Optional content to be rendered in the end section of the banner
+     */
     children?: React.ReactNode;
-    /** Optional callback function triggered when the dismiss button is clicked */
+    /**
+     * Optional callback function triggered when the dismiss button is clicked
+     */
     onDismiss?: () => void;
+    /**
+     * Optional custom asset to be rendered instead of the default icon.
+     * Can use another icon, image, or any React node.
+     */
+    customAsset?: React.ReactNode;
+    /**
+     * Optional prop to hide the illustration
+     * @default false
+     */
+    hideIllustration?: boolean;
+    /**
+     * Optional prop to align buttons within the banner
+     * - 'left' aligns buttons to the left
+     * - 'right' aligns buttons to the right
+     * @default 'left'
+     */
+    alignButtons?: 'left' | 'right';
 }
-export declare const CalloutBanner: ({ title, description, label, children, styleVariant, emphasis, onDismiss, }: CalloutBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CalloutBanner: ({ title, description, label, children, styleVariant, emphasis, dismissButtonTooltipLabel, onDismiss, customAsset, hideIllustration, alignButtons, }: CalloutBannerProps) => import("react/jsx-runtime").JSX.Element;
 export default CalloutBanner;

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -3,31 +3,34 @@ import React from "react";
 import { Icon } from "../Icon/Icon.js";
 import { c as cva } from "../../index-DdUYounA.js";
 import { IconButton } from "../IconButton/IconButton.js";
-import '../../assets/CalloutBanner.css';const calloutBanner$1 = "_calloutBanner_kxqgt_1";
-const calloutBanner__icon = "_calloutBanner__icon_kxqgt_12";
-const calloutBanner__start = "_calloutBanner__start_kxqgt_16";
-const calloutBanner__dismiss = "_calloutBanner__dismiss_kxqgt_24";
-const calloutBanner__meta = "_calloutBanner__meta_kxqgt_30";
-const calloutBanner__end = "_calloutBanner__end_kxqgt_75";
+import '../../assets/CalloutBanner.css';const calloutBanner$1 = "_calloutBanner_confe_1";
+const calloutBanner__icon = "_calloutBanner__icon_confe_12";
+const calloutBanner__start = "_calloutBanner__start_confe_16";
+const calloutBanner__end = "_calloutBanner__end_confe_26";
+const calloutBanner__dismiss = "_calloutBanner__dismiss_confe_33";
+const calloutBanner__meta = "_calloutBanner__meta_confe_39";
 const styles = {
   calloutBanner: calloutBanner$1,
   calloutBanner__icon,
   calloutBanner__start,
+  calloutBanner__end,
   calloutBanner__dismiss,
   calloutBanner__meta,
-  "calloutBanner__meta-top": "_calloutBanner__meta-top_kxqgt_46",
-  "calloutBanner__meta-top-dismiss": "_calloutBanner__meta-top-dismiss_kxqgt_54",
-  "calloutBanner__meta-title": "_calloutBanner__meta-title_kxqgt_58",
-  "calloutBanner__meta-description": "_calloutBanner__meta-description_kxqgt_62",
-  "calloutBanner__meta-label": "_calloutBanner__meta-label_kxqgt_66",
-  calloutBanner__end,
-  "calloutBanner-critical": "_calloutBanner-critical_kxqgt_83",
-  "calloutBanner-primary": "_calloutBanner-primary_kxqgt_87",
-  "calloutBanner-secondary": "_calloutBanner-secondary_kxqgt_91",
-  "calloutBanner-tertiary": "_calloutBanner-tertiary_kxqgt_100",
-  "calloutBanner-success": "_calloutBanner-success_kxqgt_109",
-  "calloutBanner-information": "_calloutBanner-information_kxqgt_135",
-  "calloutBanner-neutral": "_calloutBanner-neutral_kxqgt_161"
+  "calloutBanner__meta-content": "_calloutBanner__meta-content_confe_55",
+  "calloutBanner__meta-label": "_calloutBanner__meta-label_confe_62",
+  "calloutBanner__meta-right": "_calloutBanner__meta-right_confe_66",
+  "calloutBanner__meta-top": "_calloutBanner__meta-top_confe_71",
+  "calloutBanner__custom-asset": "_calloutBanner__custom-asset_confe_79",
+  "calloutBanner__meta-top-dismiss": "_calloutBanner__meta-top-dismiss_confe_87",
+  "calloutBanner__meta-title": "_calloutBanner__meta-title_confe_91",
+  "calloutBanner__meta-description": "_calloutBanner__meta-description_confe_95",
+  "calloutBanner-critical": "_calloutBanner-critical_confe_100",
+  "calloutBanner-primary": "_calloutBanner-primary_confe_104",
+  "calloutBanner-secondary": "_calloutBanner-secondary_confe_108",
+  "calloutBanner-tertiary": "_calloutBanner-tertiary_confe_117",
+  "calloutBanner-success": "_calloutBanner-success_confe_126",
+  "calloutBanner-information": "_calloutBanner-information_confe_152",
+  "calloutBanner-neutral": "_calloutBanner-neutral_confe_178"
 };
 const calloutBanner = cva(styles.calloutBanner, {
   variants: {
@@ -55,7 +58,11 @@ const CalloutBanner = ({
   children,
   styleVariant = "critical",
   emphasis = "primary",
-  onDismiss
+  dismissButtonTooltipLabel,
+  onDismiss,
+  customAsset,
+  hideIllustration = false,
+  alignButtons = "left"
 }) => {
   const iconName = React.useMemo(() => {
     switch (styleVariant) {
@@ -77,18 +84,23 @@ const CalloutBanner = ({
     styleVariant
   }), children: [
     /* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__start"], children: [
-      /* @__PURE__ */ jsx(Icon, { iconName, iconPrefix: "fas", className: styles["calloutBanner__icon"], iconSize: "1.25x", padding: "roomy" }),
+      !hideIllustration && (customAsset ? /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__custom-asset"], children: customAsset }) : /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__default-asset"], children: /* @__PURE__ */ jsx(Icon, { iconName, iconPrefix: "fas", className: styles["calloutBanner__icon"], iconSize: "1.25x", padding: "roomy" }) })),
       /* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__meta"], children: [
         hasOnDismiss && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__dismiss"], children: /* @__PURE__ */ jsx(IconButton, { onClick: onDismiss, styleVariant: emphasis === "primary" ? "white" : "neutral", emphasis: "quaternary", size: "sm", iconProps: {
           iconName: "close",
           iconPrefix: "far",
           iconSize: "1x"
-        }, tooltipLabel: "Dismiss banner", "aria-label": "Dismiss banner" }) }),
-        /* @__PURE__ */ jsxs("div", { className: `${styles["calloutBanner__meta-top"]} ${hasOnDismiss ? styles["calloutBanner__meta-top-dismiss"] : ""}`, children: [
-          /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-title"], children: title }),
-          description && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-description"], children: description })
-        ] }),
-        label && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-label"], children: label })
+        }, tooltipLabel: dismissButtonTooltipLabel, "aria-label": "Dismiss banner" }) }),
+        /* @__PURE__ */ jsxs("div", { className: `
+              ${styles["calloutBanner__meta-content"]}
+              
+              ${alignButtons === "right" ? styles["calloutBanner__meta-right"] : ""}`, children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: `${styles["calloutBanner__meta-top"]} ${hasOnDismiss ? styles["calloutBanner__meta-top-dismiss"] : ""}`, children: [
+            /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-title"], children: title }),
+            description && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-description"], children: description })
+          ] }) }),
+          label && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-label"], children: label })
+        ] })
       ] })
     ] }),
     children && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__end"], children })

package/dist/components/CalloutBanner/CalloutBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalloutBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CalloutBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/FieldHeader/FieldHeader.d.ts

@@ -6,6 +6,7 @@ export interface FieldHeaderProps {
     isInvalid?: boolean;
     isRequired?: boolean;
     labelFor?: string;
+    optionalTranslation?: string;
 }
-export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, optionalTranslation, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldHeader;

package/dist/components/FieldHeader/FieldHeader.js

@@ -13,12 +13,13 @@ const FieldHeader = ({
   isInvalid,
   isRequired,
   errorMessage,
-  labelFor
+  labelFor,
+  optionalTranslation = "Optional"
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: styles.fieldHeader, "data-invalid": isInvalid ? true : void 0, children: [
     /* @__PURE__ */ jsx("div", { className: styles["label-container"], children: label && /* @__PURE__ */ jsxs(FieldLabel, { required: isRequired ? true : void 0, htmlFor: labelFor, children: [
       label,
-      !isRequired && ` (Optional)`
+      !isRequired && ` (${optionalTranslation})`
     ] }) }),
     description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
     /* @__PURE__ */ jsx(FieldError, { children: errorMessage })

package/dist/components/FieldHeader/FieldHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FieldHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Menu/Menu.d.ts

@@ -57,9 +57,15 @@ export interface MenuProps {
      * @default true
      */
     allowTabOut?: boolean;
+    /**
+     * Whether the menu should close when mouse leaves the menu area
+     * @default true
+     */
+    closeOnHover?: boolean;
     /**
      * The content to display inside the menu (as JSX children)
-     * Can be custom HTML content
+     * Can be custom HTML content. Interactive elements work normally.
+     * Add data-menu-close="true" to elements that should close the menu when clicked.
      */
     children: React.ReactNode;
     /**
@@ -71,5 +77,5 @@ export interface MenuProps {
      */
     iconEndProps?: ButtonProps['iconEndProps'];
 }
-export declare const Menu: ({ label, "aria-label": ariaLabel, isDisabled, placement, buttonEmphasis, buttonStyleVariant, buttonOpenVariant, alignToElementId, shouldFlip, openOnHoverAndFocus, allowTabOut, children, iconStartProps, iconEndProps, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: ({ label, "aria-label": ariaLabel, isDisabled, placement, buttonEmphasis, buttonStyleVariant, buttonOpenVariant, alignToElementId, shouldFlip, openOnHoverAndFocus, allowTabOut, closeOnHover, children, iconStartProps, iconEndProps, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
 export default Menu;

package/dist/components/Menu/Menu.js

@@ -80,16 +80,22 @@ const useMenuNavigation = (menuRef, allowTabOut, closeMenu, buttonRef) => {
       closeMenu();
     }
   };
+  const getFocusableElements = () => {
+    if (!menuRef.current) return [];
+    return Array.from(menuRef.current.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'));
+  };
   const handleArrowNavigation = (e, focusableElements) => {
     if (focusableElements.length === 0) return;
     const focusedElement = document.activeElement;
     const currentIndex = focusableElements.indexOf(focusedElement);
-    if (e.key === "ArrowDown" && currentIndex < focusableElements.length - 1) {
+    if (e.key === "ArrowDown") {
       e.preventDefault();
-      focusableElements[currentIndex + 1].focus();
-    } else if (e.key === "ArrowUp" && currentIndex > 0) {
+      const nextIndex = currentIndex < focusableElements.length - 1 ? currentIndex + 1 : 0;
+      focusableElements[nextIndex].focus();
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      focusableElements[currentIndex - 1].focus();
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : focusableElements.length - 1;
+      focusableElements[prevIndex].focus();
     } else if (e.key === "Home") {
       e.preventDefault();
       focusableElements[0].focus();
@@ -112,65 +118,85 @@ const useMenuNavigation = (menuRef, allowTabOut, closeMenu, buttonRef) => {
       handleTabNavigation();
       return;
     }
-    if (!menuRef.current) return;
-    const focusableElements = Array.from(menuRef.current.querySelectorAll('[role="menuitem"], a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'));
+    const focusableElements = getFocusableElements();
     handleArrowNavigation(e, focusableElements);
   };
   return {
-    handleMenuKeyDown
+    handleMenuKeyDown,
+    getFocusableElements
   };
 };
-const useHoverAndFocus = (config, refs, actions) => {
-  const {
-    openOnHoverAndFocus,
-    isDisabled,
-    preventFocusOpen,
-    menuId
-  } = config;
-  const {
-    buttonRef,
-    containerRef
-  } = refs;
-  const {
-    openMenu,
-    closeMenu
-  } = actions;
+const useHoverAndFocus = (openOnHoverAndFocus, isDisabled, preventFocusOpen, menuId, buttonRef, containerRef, menuRef, isOpen, openMenu, closeMenu) => {
   useEffect(() => {
     if (!openOnHoverAndFocus || isDisabled) return;
     let hoverTimeout = null;
-    const handleMouseEnter = () => {
+    let isHovering = false;
+    const clearHoverTimeout = () => {
       if (hoverTimeout) {
         clearTimeout(hoverTimeout);
+        hoverTimeout = null;
       }
-      hoverTimeout = setTimeout(() => {
-        openMenu(false);
-      }, 300);
     };
-    const handleMouseLeave = () => {
-      if (hoverTimeout) {
-        clearTimeout(hoverTimeout);
-      }
-      hoverTimeout = setTimeout(() => {
-        if (menuRegistry.getActiveMenu() === menuId) {
-          closeMenu();
+    const checkIfStillHovering = () => {
+      setTimeout(() => {
+        const button = buttonRef.current;
+        const menu = menuRef.current;
+        if (!button) return;
+        const isOverButton = button.matches(":hover");
+        const isOverMenu = (menu == null ? void 0 : menu.matches(":hover")) || false;
+        if (!isOverButton && !isOverMenu && isHovering) {
+          isHovering = false;
+          hoverTimeout = setTimeout(() => {
+            if (menuRegistry.getActiveMenu() === menuId) {
+              closeMenu();
+            }
+          }, 300);
         }
-      }, 300);
+      }, 50);
+    };
+    const handleMouseEnter = () => {
+      clearHoverTimeout();
+      if (!isHovering) {
+        isHovering = true;
+        if (!isOpen) {
+          hoverTimeout = setTimeout(() => {
+            openMenu(false);
+          }, 300);
+        }
+      }
+    };
+    const handleMouseLeave = () => {
+      checkIfStillHovering();
+    };
+    const handleMenuMouseEnter = () => {
+      clearHoverTimeout();
+      isHovering = true;
+    };
+    const handleMenuMouseLeave = () => {
+      checkIfStillHovering();
     };
     const buttonElement = buttonRef.current;
+    const menuElement = menuRef.current;
     if (buttonElement) {
       buttonElement.addEventListener("mouseenter", handleMouseEnter);
       buttonElement.addEventListener("mouseleave", handleMouseLeave);
     }
+    if (isOpen && menuElement) {
+      menuElement.addEventListener("mouseenter", handleMenuMouseEnter);
+      menuElement.addEventListener("mouseleave", handleMenuMouseLeave);
+    }
     return () => {
       if (buttonElement) {
         buttonElement.removeEventListener("mouseenter", handleMouseEnter);
         buttonElement.removeEventListener("mouseleave", handleMouseLeave);
       }
-      if (hoverTimeout) {
-        clearTimeout(hoverTimeout);
+      if (menuElement) {
+        menuElement.removeEventListener("mouseenter", handleMenuMouseEnter);
+        menuElement.removeEventListener("mouseleave", handleMenuMouseLeave);
       }
+      clearHoverTimeout();
     };
-  }, [openOnHoverAndFocus, isDisabled, menuId]);
+  }, [openOnHoverAndFocus, isDisabled, menuId, isOpen, openMenu, closeMenu, buttonRef, menuRef]);
   useEffect(() => {
     if (!openOnHoverAndFocus || isDisabled) return;
     const buttonElement = buttonRef.current;
@@ -216,7 +242,66 @@ const useHoverAndFocus = (config, refs, actions) => {
         clearTimeout(focusTimeout);
       }
     };
-  }, [openOnHoverAndFocus, isDisabled, preventFocusOpen, menuId]);
+  }, [openOnHoverAndFocus, isDisabled, preventFocusOpen, menuId, openMenu, closeMenu, containerRef, buttonRef]);
+};
+const useMenuHover = (menuRef, isOpen, closeOnHover, openOnHoverAndFocus, menuId, closeMenu) => {
+  useEffect(() => {
+    if (!isOpen || !closeOnHover || openOnHoverAndFocus) return;
+    let hoverTimeout = null;
+    const clearHoverTimeout = () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = null;
+      }
+    };
+    const handleMenuMouseLeave = () => {
+      clearHoverTimeout();
+      hoverTimeout = setTimeout(() => {
+        closeMenu();
+      }, 200);
+    };
+    const handleMenuMouseEnter = () => {
+      clearHoverTimeout();
+    };
+    const menuElement = menuRef.current;
+    if (menuElement) {
+      menuElement.addEventListener("mouseenter", handleMenuMouseEnter);
+      menuElement.addEventListener("mouseleave", handleMenuMouseLeave);
+    }
+    return () => {
+      if (menuElement) {
+        menuElement.removeEventListener("mouseenter", handleMenuMouseEnter);
+        menuElement.removeEventListener("mouseleave", handleMenuMouseLeave);
+      }
+      clearHoverTimeout();
+    };
+  }, [isOpen, closeOnHover, openOnHoverAndFocus, menuId, closeMenu, menuRef]);
+};
+const useMenuCloseHandling = (menuRef, containerRef, isOpen, menuId, closeMenu) => {
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleDocumentClick = (e) => {
+      const target = e.target;
+      const container = containerRef.current;
+      const menu = menuRef.current;
+      const isOnTriggerButton = (container == null ? void 0 : container.contains(target)) && !(menu == null ? void 0 : menu.contains(target));
+      if (menu && menu.contains(target)) {
+        const shouldClose = target.closest('[data-menu-close="true"]');
+        if (shouldClose) {
+          closeMenu();
+        }
+        return;
+      }
+      if (isOnTriggerButton) {
+        return;
+      }
+      closeMenu();
+    };
+    document.addEventListener("click", handleDocumentClick, true);
+    return () => {
+      document.removeEventListener("click", handleDocumentClick, true);
+    };
+  }, [isOpen, menuId, closeMenu, menuRef, containerRef]);
 };
 const Menu = ({
   label,
@@ -230,6 +315,7 @@ const Menu = ({
   shouldFlip = false,
   openOnHoverAndFocus = false,
   allowTabOut = true,
+  closeOnHover = true,
   children,
   iconStartProps,
   iconEndProps
@@ -251,20 +337,12 @@ const Menu = ({
     toggleMenu
   } = useMenuState(menuId);
   const {
-    handleMenuKeyDown
+    handleMenuKeyDown,
+    getFocusableElements
   } = useMenuNavigation(menuRef, allowTabOut, closeMenu, buttonRef);
-  useHoverAndFocus({
-    openOnHoverAndFocus,
-    isDisabled,
-    preventFocusOpen,
-    menuId
-  }, {
-    buttonRef,
-    containerRef
-  }, {
-    openMenu,
-    closeMenu
-  });
+  useHoverAndFocus(openOnHoverAndFocus, isDisabled, preventFocusOpen, menuId, buttonRef, containerRef, menuRef, isOpen, openMenu, closeMenu);
+  useMenuHover(menuRef, isOpen, closeOnHover, openOnHoverAndFocus, menuId, closeMenu);
+  useMenuCloseHandling(menuRef, containerRef, isOpen, menuId, closeMenu);
   const currentStyleVariant = isOpen ? buttonOpenVariant : buttonStyleVariant;
   const getAlignmentTarget = () => {
     if (alignToElementId) {
@@ -315,29 +393,14 @@ const Menu = ({
   }, [menuId, isOpen, setIsOpen]);
   useEffect(() => {
     if (isOpen && openedViaKeyboard && menuRef.current) {
-      const focusableElements = menuRef.current.querySelectorAll('[role="menuitem"], a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
+      const focusableElements = getFocusableElements();
       if (focusableElements.length > 0) {
         setTimeout(() => {
           focusableElements[0].focus();
         }, 50);
       }
     }
-  }, [isOpen, openedViaKeyboard]);
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleOutsideClick = (e) => {
-      const container = containerRef.current;
-      if (container && !container.contains(e.target)) {
-        if (menuRegistry.getActiveMenu() === menuId) {
-          closeMenu();
-        }
-      }
-    };
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => {
-      document.removeEventListener("mousedown", handleOutsideClick);
-    };
-  }, [isOpen, menuId, closeMenu]);
+  }, [isOpen, openedViaKeyboard, getFocusableElements]);
   useEffect(() => {
     if (!isOpen) {
       setOpenedViaKeyboard(false);
@@ -346,15 +409,15 @@ const Menu = ({
   const menuTriggerState = {
     isOpen,
     open: () => openMenu(),
-    close: () => closeMenu(),
+    close: closeMenu,
     toggle: () => toggleMenu(),
-    setOpen: /* @__PURE__ */ (() => {
-      const actionMap = /* @__PURE__ */ new Map([[true, openMenu], [false, closeMenu]]);
-      return (open) => {
-        var _a;
-        return (_a = actionMap.get(open)) == null ? void 0 : _a();
-      };
-    })()
+    setOpen: (open) => {
+      if (open) {
+        openMenu();
+      } else {
+        closeMenu();
+      }
+    }
   };
   const handleButtonPress = () => {
     setPreventFocusOpen(false);

package/dist/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/_base/Field/Field.d.ts

@@ -23,6 +23,11 @@ export interface FieldCommonProps extends FieldHeaderProps {
      * The label of the field. Required for accessibility compliance
      */
     label?: string;
+    /**
+     * The translation for the optional text, used for localization
+     * @default 'Optional'
+     */
+    optionalTranslation?: string;
 }
 export type FieldProps<T extends object = object> = T & FieldCommonProps;
 type FieldBaseProps<T extends object> = FieldProps<T> & Pick<FieldVariants, 'hasEndIcon' | 'hasStartIcon'> & {

package/dist/components/_base/Field/Field.js

@@ -36,7 +36,7 @@ function Field({
     }
   }, [props == null ? void 0 : props.label]);
   return /* @__PURE__ */ jsxs(PolymorphicField, { as, isDisabled: props == null ? void 0 : props.isDisabled, className, isRequired: props == null ? void 0 : props.isRequired, ...props, children: [
-    (props == null ? void 0 : props.label) ? /* @__PURE__ */ jsx(FieldHeader, { label: props == null ? void 0 : props.label, description: props == null ? void 0 : props.description, isInvalid: props == null ? void 0 : props.isInvalid, isRequired: props == null ? void 0 : props.isRequired, labelFor: props == null ? void 0 : props.labelFor, errorMessage: errorPlacement === "top" ? props == null ? void 0 : props.errorMessage : void 0 }) : null,
+    (props == null ? void 0 : props.label) ? /* @__PURE__ */ jsx(FieldHeader, { label: props == null ? void 0 : props.label, description: props == null ? void 0 : props.description, isInvalid: props == null ? void 0 : props.isInvalid, isRequired: props == null ? void 0 : props.isRequired, labelFor: props == null ? void 0 : props.labelFor, errorMessage: errorPlacement === "top" ? props == null ? void 0 : props.errorMessage : void 0, optionalTranslation: props == null ? void 0 : props.optionalTranslation }) : null,
     /* @__PURE__ */ jsx("div", { className: styles.fieldGrid, children: /* @__PURE__ */ jsx("div", { className: fieldVariants({
       columns,
       maxWidthByChars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "A react component library for Alto Design System",
   "author": {
     "name": "Ian Caldwell IAGL",