@alto-avios/alto-ui 4.1.1 → 5.0.0-alpha.0
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.
- package/dist/assets/AviosCurrency.css +1 -1
- package/dist/assets/AviosCurrencyBadge.css +1 -1
- package/dist/assets/CalloutBanner.css +1 -1
- package/dist/assets/Currency.css +1 -0
- package/dist/assets/ErrorSummary.css +1 -1
- package/dist/assets/PasswordField.css +1 -1
- package/dist/components/Accordion/Accordion.js +1 -1
- package/dist/components/AviosCurrency/AviosCurrency.js +25 -69
- package/dist/components/AviosCurrency/AviosCurrency.js.map +1 -1
- package/dist/components/AviosCurrencyBadge/AviosCurrencyBadge.js +13 -13
- package/dist/components/Box/Box.d.ts +6 -1
- package/dist/components/Box/Box.js +1 -0
- package/dist/components/Box/Box.js.map +1 -1
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/CalloutBanner/CalloutBanner.d.ts +27 -3
- package/dist/components/CalloutBanner/CalloutBanner.js +72 -40
- package/dist/components/CalloutBanner/CalloutBanner.js.map +1 -1
- package/dist/components/Currency/Currency.d.ts +51 -0
- package/dist/components/Currency/Currency.js +110 -0
- package/dist/components/Currency/Currency.js.map +1 -0
- package/dist/components/Currency/index.d.ts +2 -0
- package/dist/components/Currency/index.js +5 -0
- package/dist/components/Currency/index.js.map +1 -0
- package/dist/components/DetailsDisclosure/DetailsDisclosure.d.ts +11 -1
- package/dist/components/DetailsDisclosure/DetailsDisclosure.js +11 -4
- package/dist/components/DetailsDisclosure/DetailsDisclosure.js.map +1 -1
- package/dist/components/DetailsDisclosure/index.js +2 -2
- package/dist/components/ErrorSummary/ErrorSummary.d.ts +3 -3
- package/dist/components/ErrorSummary/ErrorSummary.js +9 -11
- package/dist/components/ErrorSummary/ErrorSummary.js.map +1 -1
- package/dist/components/FieldError/FieldError.js +2 -2
- package/dist/components/FieldHeader/FieldHeader.d.ts +3 -1
- package/dist/components/FieldHeader/FieldHeader.js +4 -2
- package/dist/components/FieldHeader/FieldHeader.js.map +1 -1
- package/dist/components/Image/Image.js +11 -13
- package/dist/components/Image/Image.js.map +1 -1
- package/dist/components/PasswordField/PasswordField.d.ts +14 -0
- package/dist/components/PasswordField/PasswordField.js +54 -39
- package/dist/components/PasswordField/PasswordField.js.map +1 -1
- package/dist/components/PhoneNumberField/PhoneNumberField.d.ts +1 -1
- package/dist/components/PhoneNumberField/PhoneNumberField.js +5 -4
- package/dist/components/PhoneNumberField/PhoneNumberField.js.map +1 -1
- package/dist/components/Popover/Popover.d.ts +1 -1
- package/dist/components/SelectCard/SelectCard.d.ts +10 -1
- package/dist/components/SelectCard/SelectCard.js +4 -2
- package/dist/components/SelectCard/SelectCard.js.map +1 -1
- package/dist/components/Spacer/Spacer.js +1 -1
- package/dist/components/Tabs/index.d.ts +8 -0
- package/dist/components/Tabs/index.js +7 -2
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/components/_base/Field/Field.d.ts +9 -0
- package/dist/components/_base/Field/Field.js +1 -1
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.js +27 -20
- package/dist/components/index.js.map +1 -1
- package/dist/index.js +27 -20
- package/dist/index.js.map +1 -1
- package/dist/utils/phoneNumber/phoneNumber.d.ts +1 -0
- package/dist/utils/phoneNumber/phoneNumber.js +8 -1
- package/dist/utils/phoneNumber/phoneNumber.js.map +1 -1
- package/package.json +6 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._aviosCurrency_sqlpf_1{align-items:center;display:inline-flex;gap:var(--alto-sem-space-5xs);position:relative;width:-moz-fit-content;width:fit-content}._aviosCurrency_sqlpf_1>span{text-box:trim-both cap alphabetic}._aviosCurrencyName_sqlpf_13{padding-left:var(--alto-sem-space-5xs)}._aviosCurrency-strikethrough_sqlpf_17:after{border-top:.05em solid;bottom:.4cap;content:"";display:block;left:calc(100% + 3px);position:absolute;transform:translate(-100%);transition:transform .25s ease-in-out;width:calc(100% + 5px)}._aviosCurrency_sqlpf_1{color:var(--alto-sem-color-fg-spend-on-vibrant-default);font-family:var(--alto-sem-text-heading-font-family)}._aviosCurrency-primary_sqlpf_34{color:var(--alto-sem-color-fg-primary)}._aviosCurrency-secondary_sqlpf_38{color:var(--alto-sem-color-fg-secondary)}._aviosCurrency-white_sqlpf_42{color:var(--alto-sem-color-fg-white-primary)}._aviosCurrency-onSpend_sqlpf_46{color:var(--alto-sem-color-fg-spend-on-vibrant-default)}._aviosCurrency-onCollect_sqlpf_50{color:var(--alto-sem-color-fg-collect-on-vibrant-default)}._aviosCurrency-accentPrimary_sqlpf_54{color:var(--alto-sem-color-fg-accent-primary)}._aviosCurrency-accentSecondary_sqlpf_58{color:var(--alto-sem-color-fg-accent-secondary)}._aviosCurrency-xl_sqlpf_62{font-size:var(--alto-sem-text-heading-xl-font-size);font-weight:var(--alto-sem-text-heading-xl-font-weight);letter-spacing:var(--alto-sem-text-heading-xl-letter-spacing);line-height:var(--alto-sem-text-heading-xl-font-size)}._aviosCurrency_sqlpf_1 svg{height:1cap;width:auto}._aviosCurrency-lg_sqlpf_74{font-size:var(--alto-sem-text-heading-lg-font-size);font-weight:var(--alto-sem-text-heading-lg-font-weight);letter-spacing:var(--alto-sem-text-heading-lg-letter-spacing);line-height:var(--alto-sem-text-heading-lg-font-size)}._aviosCurrency-md_sqlpf_81{font-size:var(--alto-sem-text-heading-md-font-size);font-weight:var(--alto-sem-text-heading-md-font-weight);letter-spacing:var(--alto-sem-text-heading-md-letter-spacing);line-height:var(--alto-sem-text-heading-md-font-size)}._aviosCurrency-sm_sqlpf_88{font-size:var(--alto-sem-text-heading-sm-font-size);font-weight:var(--alto-sem-text-heading-sm-font-weight);letter-spacing:var(--alto-sem-text-heading-sm-letter-spacing);line-height:var(--alto-sem-text-heading-sm-font-size)}._aviosCurrency-xs_sqlpf_95{font-size:var(--alto-sem-text-heading-xs-font-size);font-weight:var(--alto-sem-text-heading-xs-font-weight);letter-spacing:var(--alto-sem-text-heading-xs-letter-spacing);line-height:var(--alto-sem-text-heading-xs-font-size)}._aviosCurrency-2xs_sqlpf_102{font-size:var(--alto-sem-text-heading-2xs-font-size);font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-heading-2xs-letter-spacing);line-height:var(--alto-sem-text-heading-2xs-font-size)}._aviosCurrency-3xs_sqlpf_109{font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-font-size)}._aviosCurrency-4xs_sqlpf_116{font-size:var(--alto-sem-text-body-sm-font-size);font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-font-size)}._aviosCurrency-5xs_sqlpf_123{font-size:var(--alto-sem-text-body-xs-font-size);font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-body-xs-letter-spacing);line-height:var(--alto-sem-text-body-xs-font-size)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._aviosCurrencyBadge_cc82y_1{align-items:center;border-radius:var(--alto-sem-radius-circle);color:var(--alto-sem-color-fg-collect-on-vibrant-default);display:inline-flex;font-family:var(--alto-sem-text-heading-font-family);gap:var(--alto-sem-space-4xs);padding:var(--alto-sem-space-3xs) var(--alto-sem-space-xs);width:-moz-fit-content;width:fit-content}._aviosCurrencyBadge_cc82y_1 span{text-box:trim-both cap alphabetic}._collect_cc82y_17{background:var(--alto-sem-color-bg-collect-vibrant-default)}._spend_cc82y_21{background:var(--alto-sem-color-bg-spend-vibrant-default)}._xs_cc82y_27{font-size:var(--alto-sem-text-label-2xs-font-size);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-label-2xs-font-size);padding:var(--alto-sem-space-4xs) var(--alto-sem-space-2xs)}._xs-bold_cc82y_34{font-weight:var(--alto-sem-text-heading-2xs-font-weight)}._sm_cc82y_38{font-size:var(--alto-sem-text-label-2xs-font-size);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-label-2xs-font-size);padding:var(--alto-sem-space-3xs) var(--alto-sem-space-xs)}._sm-bold_cc82y_45{font-weight:var(--alto-sem-text-heading-2xs-font-weight)}._aviosCurrencyBadge_cc82y_1._sm_cc82y_38 svg{height:11px;width:11px}._md_cc82y_54{font-size:var(--alto-sem-text-body-xs-font-size);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-xs-line-height);padding:var(--alto-sem-space-3xs) var(--alto-sem-space-xs)}._md-bold_cc82y_61{font-weight:var(--alto-sem-text-heading-2xs-font-weight)}._aviosCurrencyBadge_cc82y_1._md_cc82y_54 svg{height:12px;width:12px}._lg_cc82y_70{font-size:var(--alto-sem-text-body-md-font-size);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._lg-bold_cc82y_77{font-weight:var(--alto-sem-text-heading-2xs-font-weight)}._aviosCurrencyBadge_cc82y_1._lg_cc82y_70 svg{height:14px;width:14px}._xl_cc82y_86{font-size:var(--alto-sem-text-body-md-font-size);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._xl-bold_cc82y_93{font-weight:var(--alto-sem-text-heading-xl-font-weight)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._calloutBanner_10d8r_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_10d8r_12{align-self:flex-start}._calloutBanner__start_10d8r_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_10d8r_26{background-color:var(--alto-sem-color-bg-layer2-default);display:flex;justify-content:flex-start;padding:var(--alto-sem-space-sm)}._calloutBanner__dismiss_10d8r_33{position:absolute;right:var(--alto-sem-space-xs);top:var(--alto-sem-space-xs)}._calloutBanner__meta-top-dismiss_10d8r_39{padding-right:36px}._calloutBanner__meta_10d8r_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_10d8r_59{display:flex;flex-direction:column;gap:var(--alto-sem-space-xs);width:100%}._calloutBanner__meta-label_10d8r_66{display:flex}._calloutBanner__meta-right_10d8r_70{flex-direction:row;justify-content:space-between}._calloutBanner__meta-top_10d8r_39{align-items:flex-start;display:flex;flex-direction:column;flex-wrap:wrap;text-wrap:wrap}._calloutBanner__custom-asset_10d8r_83{max-width:52px}._calloutBanner__custom-asset_10d8r_83>:first-child{max-width:inherit}._calloutBanner__meta-title_10d8r_91{font-size:var(--alto-sem-text-body-sm-font-size);font-weight:var(--alto-sem-text-body-bold-font-weight);margin:0}._calloutBanner__meta-description_10d8r_97{margin:var(--alto-sem-space-4xs) 0 0}._calloutBanner__severity-label_10d8r_103{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0)}._calloutBanner-critical_10d8r_115{border-color:var(--alto-sem-color-border-critical)}._calloutBanner-primary_10d8r_119._calloutBanner-critical_10d8r_115 ._calloutBanner__start_10d8r_16{background:var(--alto-sem-color-bg-critical-vibrant-default)}._calloutBanner-secondary_10d8r_123._calloutBanner-critical_10d8r_115 ._calloutBanner__start_10d8r_16{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_10d8r_123._calloutBanner-critical_10d8r_115 ._calloutBanner__end_10d8r_26{border-top:1px solid var(--alto-sem-color-border-critical)}._calloutBanner-tertiary_10d8r_132._calloutBanner-critical_10d8r_115 ._calloutBanner__start_10d8r_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-critical_10d8r_115:not(._calloutBanner-primary_10d8r_119) ._calloutBanner__icon_10d8r_12{color:var(--alto-sem-color-fg-critical-primary)}._calloutBanner-success_10d8r_141{border-color:var(--alto-sem-color-border-success)}._calloutBanner-primary_10d8r_119._calloutBanner-success_10d8r_141 ._calloutBanner__start_10d8r_16{background:var(--alto-sem-color-bg-success-vibrant-default)}._calloutBanner-secondary_10d8r_123._calloutBanner-success_10d8r_141 ._calloutBanner__start_10d8r_16{background:var(--alto-sem-color-bg-success-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_10d8r_123._calloutBanner-success_10d8r_141 ._calloutBanner__end_10d8r_26{border-top:1px solid var(--alto-sem-color-border-success)}._calloutBanner-tertiary_10d8r_132._calloutBanner-success_10d8r_141 ._calloutBanner__start_10d8r_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-success_10d8r_141:not(._calloutBanner-primary_10d8r_119) ._calloutBanner__icon_10d8r_12{color:var(--alto-sem-color-fg-success-primary)}._calloutBanner-information_10d8r_167{border-color:var(--alto-sem-color-border-information)}._calloutBanner-primary_10d8r_119._calloutBanner-information_10d8r_167 ._calloutBanner__start_10d8r_16{background:var(--alto-sem-color-bg-information-vibrant-default)}._calloutBanner-secondary_10d8r_123._calloutBanner-information_10d8r_167 ._calloutBanner__start_10d8r_16{background:var(--alto-sem-color-bg-information-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_10d8r_123._calloutBanner-information_10d8r_167 ._calloutBanner__end_10d8r_26{border-top:1px solid var(--alto-sem-color-border-information)}._calloutBanner-tertiary_10d8r_132._calloutBanner-information_10d8r_167 ._calloutBanner__start_10d8r_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-information_10d8r_167:not(._calloutBanner-primary_10d8r_119) ._calloutBanner__icon_10d8r_12{color:var(--alto-sem-color-fg-information-primary)}._calloutBanner-neutral_10d8r_193{border-color:var(--alto-sem-color-border-secondary)}._calloutBanner-primary_10d8r_119._calloutBanner-neutral_10d8r_193 ._calloutBanner__start_10d8r_16{background:var(--alto-sem-color-bg-inverse-vibrant-default)}._calloutBanner-secondary_10d8r_123._calloutBanner-neutral_10d8r_193 ._calloutBanner__start_10d8r_16{background:var(--alto-sem-color-bg-layer1-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_10d8r_123._calloutBanner-neutral_10d8r_193 ._calloutBanner__end_10d8r_26{border-top:1px solid var(--alto-sem-color-border-secondary)}._calloutBanner-tertiary_10d8r_132._calloutBanner-neutral_10d8r_193 ._calloutBanner__start_10d8r_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-neutral_10d8r_193:not(._calloutBanner-primary_10d8r_119) ._calloutBanner__icon_10d8r_12{color:var(--alto-sem-color-fg-neutral-primary)}._calloutBanner-tertiary_10d8r_132{border-color:transparent;gap:var(--alto-sem-space-4xs)}._calloutBanner-tertiary_10d8r_132 ._calloutBanner__start_10d8r_16{padding:0}._calloutBanner-tertiary_10d8r_132 ._calloutBanner__end_10d8r_26{border-radius:var(--alto-card-radius)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._currency_1w262_1{font-family:var(--alto-sem-text-heading-font-family);font-size:var(--alto-sem-text-heading-xl-font-size);font-style:normal;font-weight:var(--alto-sem-text-heading-xl-font-weight);letter-spacing:var(--alto-sem-text-heading-xl-letter-spacing);line-height:var(--alto-sem-text-heading-xl-line-height);position:relative}._currency-strikethrough_1w262_11:after{border-top:.05em solid;bottom:calc(1cap - .2em);content:"";display:block;left:calc(100% + 3px);position:absolute;transform:translate(-100%);transition:transform .25s ease-in-out;width:calc(100% + 5px)}._currency-primary_1w262_23{color:var(--alto-sem-color-fg-primary)}._currency-secondary_1w262_27{color:var(--alto-sem-color-fg-secondary)}._currency-white_1w262_31{color:var(--alto-sem-color-fg-white-primary)}._currency-onSpend_1w262_35{color:var(--alto-sem-color-fg-spend-on-vibrant-default)}._currency-onCollect_1w262_39{color:var(--alto-sem-color-fg-collect-on-vibrant-default)}._currency-accentPrimary_1w262_43{color:var(--alto-sem-color-fg-accent-primary)}._currency-accentSecondary_1w262_47{color:var(--alto-sem-color-fg-accent-secondary)}._currency-xl_1w262_51{font-size:var(--alto-sem-text-heading-xl-font-size);font-weight:var(--alto-sem-text-heading-xl-font-weight);letter-spacing:var(--alto-sem-text-heading-xl-letter-spacing);line-height:var(--alto-sem-text-heading-xl-line-height)}._currency-lg_1w262_58{font-size:var(--alto-sem-text-heading-lg-font-size);font-weight:var(--alto-sem-text-heading-lg-font-weight);letter-spacing:var(--alto-sem-text-heading-lg-letter-spacing);line-height:var(--alto-sem-text-heading-lg-line-height)}._currency-md_1w262_65{font-size:var(--alto-sem-text-heading-md-font-size);font-weight:var(--alto-sem-text-heading-md-font-weight);letter-spacing:var(--alto-sem-text-heading-md-letter-spacing);line-height:var(--alto-sem-text-heading-md-line-height)}._currency-sm_1w262_72{font-size:var(--alto-sem-text-heading-sm-font-size);font-weight:var(--alto-sem-text-heading-sm-font-weight);letter-spacing:var(--alto-sem-text-heading-sm-letter-spacing);line-height:var(--alto-sem-text-heading-sm-line-height)}._currency-xs_1w262_79{font-size:var(--alto-sem-text-heading-xs-font-size);font-weight:var(--alto-sem-text-heading-xs-font-weight);letter-spacing:var(--alto-sem-text-heading-xs-letter-spacing);line-height:var(--alto-sem-text-heading-xs-line-height)}._currency-2xs_1w262_86{font-size:var(--alto-sem-text-heading-2xs-font-size)}._currency-2xs_1w262_86,._currency-3xs_1w262_93{font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-heading-2xs-letter-spacing);line-height:var(--alto-sem-text-heading-2xs-line-height)}._currency-3xs_1w262_93{font-size:var(--alto-sem-text-body-md-font-size)}._currency-4xs_1w262_100{font-size:var(--alto-sem-text-body-sm-font-size)}._currency-4xs_1w262_100,._currency-5xs_1w262_107{font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-heading-2xs-letter-spacing);line-height:var(--alto-sem-text-heading-2xs-line-height)}._currency-5xs_1w262_107{font-size:var(--alto-sem-text-body-xs-font-size)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._errorSummary-
|
|
1
|
+
._errorSummary-list_1xa84_1{list-style:none;padding:0}._errorSummary-list_1xa84_1 a{display:block;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-fontSize);font-weight:var(--alto-sem-text-body-bold-font-weight);letter-spacing:var(--alto-sem-text-body-md-letterSpacing);line-height:var(--alto-sem-text-body-md-lineHeight);margin:0;margin-bottom:var(--alto-sem-space-sm);padding:0;text-align:left;text-decoration:underline}._errorSummary-list_1xa84_1 a,._errorSummary-list_1xa84_1 a:focus,._errorSummary-list_1xa84_1 a:hover{color:var(--alto-sem-color-fg-critical-primary)}._errorSummary-list__item_1xa84_29{margin-bottom:var(--alto-sem-space-xs)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._passwordField__wrapper_vzml0_1{width:100%}._passwordField__wrapper_vzml0_1,._passwordField_vzml0_1{display:flex;flex-direction:column}._passwordField__strength_vzml0_12{display:flex;flex-direction:column;gap:var(--alto-sem-space-4xs);list-style:none;margin-left:0;margin-top:var(--alto-sem-space-xs);padding:0}._passwordField__strength-text_vzml0_22{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;white-space:nowrap;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);pointer-events:none}._passwordField_vzml0_1 input{font-size:var(--alto-sem-text-body-md-font-size);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height)}._passwordField_vzml0_1>[role=group]{align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-sm);box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;overflow:hidden;position:relative}._passwordField_vzml0_1>[role=group][data-focus-within][data-focus-visible]:not(:has(>button[data-focused])){outline-color:var(--alto-sem-color-border-accent);outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._passwordField_vzml0_1>[role=group]:has(input[data-disabled]){background:var(--alto-sem-color-bg-disabled-subtle);border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle)}._passwordField_vzml0_1>[role=group]:has(input[data-hovered]){border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-hover)}._passwordField_vzml0_1>[role=group]:has(input[data-pressed]){border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-active)}._passwordField_vzml0_1>[role=group]:has(input[data-invalid]){border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical)}._passwordField_vzml0_1>[role=group]>button{flex-shrink:0;margin:0 var(--alto-sem-space-3xs)}._passwordField_vzml0_1 input{border:none;height:48px;padding:0 var(--alto-sem-space-2xs) 0 var(--alto-sem-space-sm);width:100%}._passwordField_vzml0_1 input::-moz-placeholder{color:var(--alto-sem-color-fg-secondary);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._passwordField_vzml0_1 input::placeholder{color:var(--alto-sem-color-fg-secondary);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._passwordField_vzml0_1 input[data-focused]{outline:none}._passwordStrengthItem_vzml0_111{align-items:center;display:flex;font-size:var(--alto-sem-text-body-sm-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight);gap:var(--alto-sem-space-2xs);letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height);margin:0}._passwordStrengthItemValid_vzml0_122{color:var(--alto-sem-color-fg-success-primary)}._passwordStrengthItemNeutral_vzml0_126{color:var(--alto-sem-color-fg-secondary)}._passwordStrengthItemInvalid_vzml0_130{color:var(--alto-sem-color-fg-critical-primary)}
|
|
@@ -115,7 +115,7 @@ const AccordionGroup = ({
|
|
|
115
115
|
}) => {
|
|
116
116
|
const groupClasses = [styles.accordionGroup, className].filter(Boolean).join(" ");
|
|
117
117
|
const defaultExpandedKeys = React__default.Children.toArray(children).map((child, index) => {
|
|
118
|
-
if (React__default.isValidElement(child) && child.props.defaultExpanded) {
|
|
118
|
+
if (React__default.isValidElement(child) && typeof child.props === "object" && child.props !== null && "defaultExpanded" in child.props && child.props.defaultExpanded) {
|
|
119
119
|
return `accordion-${index}`;
|
|
120
120
|
}
|
|
121
121
|
return null;
|
|
@@ -3,45 +3,28 @@ import { useMemo } from "react";
|
|
|
3
3
|
import { c as cva } from "../../index-DdUYounA.js";
|
|
4
4
|
import { AviosCurrencySymbol } from "../AviosCurrencySymbol/AviosCurrencySymbol.js";
|
|
5
5
|
import { Icon } from "../Icon/Icon.js";
|
|
6
|
-
import '../../assets/AviosCurrency.css';const aviosCurrency$1 = "
|
|
7
|
-
const aviosCurrencyName = "
|
|
8
|
-
const aviosCurrencyStrikethrough$1 = "_aviosCurrencyStrikethrough_1ehjl_17";
|
|
6
|
+
import '../../assets/AviosCurrency.css';const aviosCurrency$1 = "_aviosCurrency_sqlpf_1";
|
|
7
|
+
const aviosCurrencyName = "_aviosCurrencyName_sqlpf_13";
|
|
9
8
|
const styles = {
|
|
10
9
|
aviosCurrency: aviosCurrency$1,
|
|
11
10
|
aviosCurrencyName,
|
|
12
|
-
|
|
13
|
-
"aviosCurrency-primary": "_aviosCurrency-
|
|
14
|
-
"
|
|
15
|
-
"aviosCurrency-
|
|
16
|
-
"
|
|
17
|
-
"aviosCurrency-
|
|
18
|
-
"
|
|
19
|
-
"aviosCurrency-
|
|
20
|
-
"
|
|
21
|
-
"aviosCurrency-
|
|
22
|
-
"
|
|
23
|
-
"aviosCurrency-
|
|
24
|
-
"
|
|
25
|
-
"aviosCurrency-
|
|
26
|
-
"
|
|
27
|
-
"aviosCurrency-
|
|
28
|
-
"
|
|
29
|
-
"aviosCurrency-lg": "_aviosCurrency-lg_1ehjl_103",
|
|
30
|
-
"aviosCurrencyStrikethrough-lg": "_aviosCurrencyStrikethrough-lg_1ehjl_110",
|
|
31
|
-
"aviosCurrency-md": "_aviosCurrency-md_1ehjl_114",
|
|
32
|
-
"aviosCurrencyStrikethrough-md": "_aviosCurrencyStrikethrough-md_1ehjl_121",
|
|
33
|
-
"aviosCurrency-sm": "_aviosCurrency-sm_1ehjl_125",
|
|
34
|
-
"aviosCurrencyStrikethrough-sm": "_aviosCurrencyStrikethrough-sm_1ehjl_132",
|
|
35
|
-
"aviosCurrency-xs": "_aviosCurrency-xs_1ehjl_136",
|
|
36
|
-
"aviosCurrencyStrikethrough-xs": "_aviosCurrencyStrikethrough-xs_1ehjl_143",
|
|
37
|
-
"aviosCurrency-2xs": "_aviosCurrency-2xs_1ehjl_147",
|
|
38
|
-
"aviosCurrencyStrikethrough-2xs": "_aviosCurrencyStrikethrough-2xs_1ehjl_154",
|
|
39
|
-
"aviosCurrency-3xs": "_aviosCurrency-3xs_1ehjl_158",
|
|
40
|
-
"aviosCurrencyStrikethrough-3xs": "_aviosCurrencyStrikethrough-3xs_1ehjl_165",
|
|
41
|
-
"aviosCurrency-4xs": "_aviosCurrency-4xs_1ehjl_169",
|
|
42
|
-
"aviosCurrencyStrikethrough-4xs": "_aviosCurrencyStrikethrough-4xs_1ehjl_176",
|
|
43
|
-
"aviosCurrency-5xs": "_aviosCurrency-5xs_1ehjl_180",
|
|
44
|
-
"aviosCurrencyStrikethrough-5xs": "_aviosCurrencyStrikethrough-5xs_1ehjl_187"
|
|
11
|
+
"aviosCurrency-strikethrough": "_aviosCurrency-strikethrough_sqlpf_17",
|
|
12
|
+
"aviosCurrency-primary": "_aviosCurrency-primary_sqlpf_34",
|
|
13
|
+
"aviosCurrency-secondary": "_aviosCurrency-secondary_sqlpf_38",
|
|
14
|
+
"aviosCurrency-white": "_aviosCurrency-white_sqlpf_42",
|
|
15
|
+
"aviosCurrency-onSpend": "_aviosCurrency-onSpend_sqlpf_46",
|
|
16
|
+
"aviosCurrency-onCollect": "_aviosCurrency-onCollect_sqlpf_50",
|
|
17
|
+
"aviosCurrency-accentPrimary": "_aviosCurrency-accentPrimary_sqlpf_54",
|
|
18
|
+
"aviosCurrency-accentSecondary": "_aviosCurrency-accentSecondary_sqlpf_58",
|
|
19
|
+
"aviosCurrency-xl": "_aviosCurrency-xl_sqlpf_62",
|
|
20
|
+
"aviosCurrency-lg": "_aviosCurrency-lg_sqlpf_74",
|
|
21
|
+
"aviosCurrency-md": "_aviosCurrency-md_sqlpf_81",
|
|
22
|
+
"aviosCurrency-sm": "_aviosCurrency-sm_sqlpf_88",
|
|
23
|
+
"aviosCurrency-xs": "_aviosCurrency-xs_sqlpf_95",
|
|
24
|
+
"aviosCurrency-2xs": "_aviosCurrency-2xs_sqlpf_102",
|
|
25
|
+
"aviosCurrency-3xs": "_aviosCurrency-3xs_sqlpf_109",
|
|
26
|
+
"aviosCurrency-4xs": "_aviosCurrency-4xs_sqlpf_116",
|
|
27
|
+
"aviosCurrency-5xs": "_aviosCurrency-5xs_sqlpf_123"
|
|
45
28
|
};
|
|
46
29
|
const aviosCurrency = cva(styles.aviosCurrency, {
|
|
47
30
|
variants: {
|
|
@@ -64,6 +47,10 @@ const aviosCurrency = cva(styles.aviosCurrency, {
|
|
|
64
47
|
"3xs": styles["aviosCurrency-3xs"],
|
|
65
48
|
"4xs": styles["aviosCurrency-4xs"],
|
|
66
49
|
"5xs": styles["aviosCurrency-5xs"]
|
|
50
|
+
},
|
|
51
|
+
isStrikethrough: {
|
|
52
|
+
true: styles["aviosCurrency-strikethrough"],
|
|
53
|
+
false: ""
|
|
67
54
|
}
|
|
68
55
|
},
|
|
69
56
|
defaultVariants: {
|
|
@@ -83,34 +70,6 @@ function getIconSize(size) {
|
|
|
83
70
|
return "1x";
|
|
84
71
|
}
|
|
85
72
|
}
|
|
86
|
-
const aviosCurrencyStrikethrough = cva(styles.aviosCurrencyStrikethrough, {
|
|
87
|
-
variants: {
|
|
88
|
-
size: {
|
|
89
|
-
xl: styles["aviosCurrencyStrikethrough-xl"],
|
|
90
|
-
lg: styles["aviosCurrencyStrikethrough-lg"],
|
|
91
|
-
md: styles["aviosCurrencyStrikethrough-md"],
|
|
92
|
-
sm: styles["aviosCurrencyStrikethrough-sm"],
|
|
93
|
-
xs: styles["aviosCurrencyStrikethrough-xs"],
|
|
94
|
-
"2xs": styles["aviosCurrencyStrikethrough-2xs"],
|
|
95
|
-
"3xs": styles["aviosCurrencyStrikethrough-3xs"],
|
|
96
|
-
"4xs": styles["aviosCurrencyStrikethrough-4xs"],
|
|
97
|
-
"5xs": styles["aviosCurrencyStrikethrough-5xs"]
|
|
98
|
-
},
|
|
99
|
-
styleVariant: {
|
|
100
|
-
primary: styles["aviosCurrencyStrikethrough-primary"],
|
|
101
|
-
secondary: styles["aviosCurrencyStrikethrough-secondary"],
|
|
102
|
-
white: styles["aviosCurrencyStrikethrough-white"],
|
|
103
|
-
onSpend: styles["aviosCurrencyStrikethrough-onSpend"],
|
|
104
|
-
onCollect: styles["aviosCurrencyStrikethrough-onCollect"],
|
|
105
|
-
accentPrimary: styles["aviosCurrencyStrikethrough-accentPrimary"],
|
|
106
|
-
accentSecondary: styles["aviosCurrencyStrikethrough-accentSecondary"]
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
defaultVariants: {
|
|
110
|
-
styleVariant: "accentSecondary",
|
|
111
|
-
size: "xl"
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
73
|
const AviosCurrency = ({
|
|
115
74
|
children,
|
|
116
75
|
styleVariant = "accentSecondary",
|
|
@@ -149,12 +108,9 @@ const AviosCurrency = ({
|
|
|
149
108
|
const iconSize = useMemo(() => getIconSize(size), [size]);
|
|
150
109
|
return /* @__PURE__ */ jsxs("span", { className: aviosCurrency({
|
|
151
110
|
styleVariant,
|
|
152
|
-
size
|
|
111
|
+
size,
|
|
112
|
+
isStrikethrough
|
|
153
113
|
}), children: [
|
|
154
|
-
isStrikethrough && /* @__PURE__ */ jsx("span", { className: aviosCurrencyStrikethrough({
|
|
155
|
-
size,
|
|
156
|
-
styleVariant
|
|
157
|
-
}) }),
|
|
158
114
|
/* @__PURE__ */ jsx(AviosCurrencySymbol, { ...props, styleVariant, kind }),
|
|
159
115
|
/* @__PURE__ */ jsx("span", { className: "aviosCurrencypoints", children: formattedChildren }),
|
|
160
116
|
isLink && /* @__PURE__ */ jsx(Icon, { iconName: "chevron-right", iconSize }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AviosCurrency.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AviosCurrency.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { AviosCurrency } from "../AviosCurrency/AviosCurrency.js";
|
|
3
3
|
import { c as cva } from "../../index-DdUYounA.js";
|
|
4
|
-
import '../../assets/AviosCurrencyBadge.css';const aviosCurrencyBadge$1 = "
|
|
5
|
-
const collect = "
|
|
6
|
-
const spend = "
|
|
7
|
-
const xs = "
|
|
8
|
-
const sm = "
|
|
9
|
-
const md = "
|
|
10
|
-
const lg = "
|
|
11
|
-
const xl = "
|
|
4
|
+
import '../../assets/AviosCurrencyBadge.css';const aviosCurrencyBadge$1 = "_aviosCurrencyBadge_cc82y_1";
|
|
5
|
+
const collect = "_collect_cc82y_17";
|
|
6
|
+
const spend = "_spend_cc82y_21";
|
|
7
|
+
const xs = "_xs_cc82y_27";
|
|
8
|
+
const sm = "_sm_cc82y_38";
|
|
9
|
+
const md = "_md_cc82y_54";
|
|
10
|
+
const lg = "_lg_cc82y_70";
|
|
11
|
+
const xl = "_xl_cc82y_86";
|
|
12
12
|
const styles = {
|
|
13
13
|
aviosCurrencyBadge: aviosCurrencyBadge$1,
|
|
14
14
|
collect,
|
|
15
15
|
spend,
|
|
16
16
|
xs,
|
|
17
|
-
"xs-bold": "_xs-
|
|
17
|
+
"xs-bold": "_xs-bold_cc82y_34",
|
|
18
18
|
sm,
|
|
19
|
-
"sm-bold": "_sm-
|
|
19
|
+
"sm-bold": "_sm-bold_cc82y_45",
|
|
20
20
|
md,
|
|
21
|
-
"md-bold": "_md-
|
|
21
|
+
"md-bold": "_md-bold_cc82y_61",
|
|
22
22
|
lg,
|
|
23
|
-
"lg-bold": "_lg-
|
|
23
|
+
"lg-bold": "_lg-bold_cc82y_77",
|
|
24
24
|
xl,
|
|
25
|
-
"xl-bold": "_xl-
|
|
25
|
+
"xl-bold": "_xl-bold_cc82y_93"
|
|
26
26
|
};
|
|
27
27
|
const aviosCurrencyBadge = cva(styles.aviosCurrencyBadge, {
|
|
28
28
|
variants: {
|
|
@@ -64,6 +64,11 @@ export interface BoxProps extends BackgroundVariants, FlexVariants, BorderVarian
|
|
|
64
64
|
* Accepts any valid CSS position value.
|
|
65
65
|
*/
|
|
66
66
|
left?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Custom test identifier for testing purposes.
|
|
69
|
+
* Defaults to "box" if not provided.
|
|
70
|
+
*/
|
|
71
|
+
dataTestId?: string;
|
|
67
72
|
}
|
|
68
|
-
export declare const Box: ({ children, as: Component, width, maxWidth, minWidth, height, maxHeight, minHeight, zIndex, top, right, bottom, left, position, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
73
|
+
export declare const Box: ({ children, as: Component, width, maxWidth, minWidth, height, maxHeight, minHeight, zIndex, top, right, bottom, left, position, dataTestId, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
69
74
|
export default Box;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Box.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComponentType, ElementType, ReactNode } from 'react';
|
|
1
|
+
import { ComponentType, ElementType, ReactNode, JSX } from 'react';
|
|
2
2
|
import { AriaButtonOptions } from '@react-aria/button';
|
|
3
3
|
import { HoverProps } from '@react-aria/interactions';
|
|
4
4
|
import { IconProps } from '../Icon/Icon';
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
|
|
2
|
+
import { default as IconButton } from '../IconButton';
|
|
3
|
+
type StyleVariant = 'critical' | 'success' | 'information' | 'neutral';
|
|
4
|
+
type DismissButtonProps = Omit<React.ComponentProps<typeof IconButton>, 'onPress' | 'iconProps' | 'size' | 'styleVariant' | 'emphasis' | 'tooltipLabel'>;
|
|
5
|
+
export interface CalloutBannerBaseProps {
|
|
3
6
|
/**
|
|
4
7
|
* The main heading text of the banner
|
|
5
8
|
*/
|
|
@@ -21,7 +24,7 @@ export interface CalloutBannerProps {
|
|
|
21
24
|
* - 'neutral' for non-critical messages, guidance
|
|
22
25
|
* @default 'critical'
|
|
23
26
|
*/
|
|
24
|
-
styleVariant?:
|
|
27
|
+
styleVariant?: StyleVariant;
|
|
25
28
|
/**
|
|
26
29
|
* Optional button group to be rendered as a label
|
|
27
30
|
*/
|
|
@@ -30,10 +33,20 @@ export interface CalloutBannerProps {
|
|
|
30
33
|
* Optional label for the dismiss button tooltip
|
|
31
34
|
*/
|
|
32
35
|
dismissButtonTooltipLabel?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Optional props for the dismiss icon button
|
|
38
|
+
*/
|
|
39
|
+
dismissButtonProps?: DismissButtonProps;
|
|
33
40
|
/**
|
|
34
41
|
* Optional content to be rendered in the end section of the banner
|
|
35
42
|
*/
|
|
36
43
|
children?: React.ReactNode;
|
|
44
|
+
/**
|
|
45
|
+
* Semantic heading level to use when styleVariant is 'heading'
|
|
46
|
+
* Affects accessibility and document structure
|
|
47
|
+
* @default 'h3'
|
|
48
|
+
*/
|
|
49
|
+
headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
37
50
|
/**
|
|
38
51
|
* Optional callback function triggered when the dismiss button is clicked
|
|
39
52
|
*/
|
|
@@ -55,6 +68,17 @@ export interface CalloutBannerProps {
|
|
|
55
68
|
* @default 'left'
|
|
56
69
|
*/
|
|
57
70
|
alignButtons?: 'left' | 'right';
|
|
71
|
+
/**
|
|
72
|
+
* Optional prefix text to be added before the title to denote severity.
|
|
73
|
+
* E.g., "Critical", "Success", "Information"
|
|
74
|
+
* For i18m purposes, this should be provided by the consumer.
|
|
75
|
+
*/
|
|
76
|
+
severityLabel?: string;
|
|
77
|
+
/**
|
|
78
|
+
* Optional ARIA role for the banner. Defaults to 'alert' for critical, 'status' for success/information, 'region' for neutral.
|
|
79
|
+
*/
|
|
80
|
+
role?: React.AriaRole;
|
|
58
81
|
}
|
|
59
|
-
export
|
|
82
|
+
export type CalloutBannerProps = CalloutBannerBaseProps & React.AriaAttributes;
|
|
83
|
+
export declare const CalloutBanner: ({ title, description, label, children, styleVariant, emphasis, headingLevel, dismissButtonTooltipLabel, onDismiss, customAsset, hideIllustration, alignButtons, severityLabel, role, dismissButtonProps, ...ariaProps }: CalloutBannerProps) => import("react/jsx-runtime").JSX.Element;
|
|
60
84
|
export default CalloutBanner;
|
|
@@ -3,34 +3,35 @@ import React__default from "react";
|
|
|
3
3
|
import { Icon } from "../Icon/Icon.js";
|
|
4
4
|
import { c as cva } from "../../index-DdUYounA.js";
|
|
5
5
|
import { IconButton } from "../IconButton/IconButton.js";
|
|
6
|
-
import '../../assets/CalloutBanner.css';const calloutBanner$1 = "
|
|
7
|
-
const calloutBanner__icon = "
|
|
8
|
-
const calloutBanner__start = "
|
|
9
|
-
const calloutBanner__end = "
|
|
10
|
-
const calloutBanner__dismiss = "
|
|
11
|
-
const calloutBanner__meta = "
|
|
6
|
+
import '../../assets/CalloutBanner.css';const calloutBanner$1 = "_calloutBanner_10d8r_1";
|
|
7
|
+
const calloutBanner__icon = "_calloutBanner__icon_10d8r_12";
|
|
8
|
+
const calloutBanner__start = "_calloutBanner__start_10d8r_16";
|
|
9
|
+
const calloutBanner__end = "_calloutBanner__end_10d8r_26";
|
|
10
|
+
const calloutBanner__dismiss = "_calloutBanner__dismiss_10d8r_33";
|
|
11
|
+
const calloutBanner__meta = "_calloutBanner__meta_10d8r_39";
|
|
12
12
|
const styles = {
|
|
13
13
|
calloutBanner: calloutBanner$1,
|
|
14
14
|
calloutBanner__icon,
|
|
15
15
|
calloutBanner__start,
|
|
16
16
|
calloutBanner__end,
|
|
17
17
|
calloutBanner__dismiss,
|
|
18
|
+
"calloutBanner__meta-top-dismiss": "_calloutBanner__meta-top-dismiss_10d8r_39",
|
|
18
19
|
calloutBanner__meta,
|
|
19
|
-
"calloutBanner__meta-content": "_calloutBanner__meta-
|
|
20
|
-
"calloutBanner__meta-label": "_calloutBanner__meta-
|
|
21
|
-
"calloutBanner__meta-right": "_calloutBanner__meta-
|
|
22
|
-
"calloutBanner__meta-top": "_calloutBanner__meta-
|
|
23
|
-
"calloutBanner__custom-asset": "_calloutBanner__custom-
|
|
24
|
-
"calloutBanner__meta-
|
|
25
|
-
"calloutBanner__meta-
|
|
26
|
-
"
|
|
27
|
-
"calloutBanner-critical": "_calloutBanner-
|
|
28
|
-
"calloutBanner-primary": "_calloutBanner-
|
|
29
|
-
"calloutBanner-secondary": "_calloutBanner-
|
|
30
|
-
"calloutBanner-tertiary": "_calloutBanner-
|
|
31
|
-
"calloutBanner-success": "_calloutBanner-
|
|
32
|
-
"calloutBanner-information": "_calloutBanner-
|
|
33
|
-
"calloutBanner-neutral": "_calloutBanner-
|
|
20
|
+
"calloutBanner__meta-content": "_calloutBanner__meta-content_10d8r_59",
|
|
21
|
+
"calloutBanner__meta-label": "_calloutBanner__meta-label_10d8r_66",
|
|
22
|
+
"calloutBanner__meta-right": "_calloutBanner__meta-right_10d8r_70",
|
|
23
|
+
"calloutBanner__meta-top": "_calloutBanner__meta-top_10d8r_39",
|
|
24
|
+
"calloutBanner__custom-asset": "_calloutBanner__custom-asset_10d8r_83",
|
|
25
|
+
"calloutBanner__meta-title": "_calloutBanner__meta-title_10d8r_91",
|
|
26
|
+
"calloutBanner__meta-description": "_calloutBanner__meta-description_10d8r_97",
|
|
27
|
+
"calloutBanner__severity-label": "_calloutBanner__severity-label_10d8r_103",
|
|
28
|
+
"calloutBanner-critical": "_calloutBanner-critical_10d8r_115",
|
|
29
|
+
"calloutBanner-primary": "_calloutBanner-primary_10d8r_119",
|
|
30
|
+
"calloutBanner-secondary": "_calloutBanner-secondary_10d8r_123",
|
|
31
|
+
"calloutBanner-tertiary": "_calloutBanner-tertiary_10d8r_132",
|
|
32
|
+
"calloutBanner-success": "_calloutBanner-success_10d8r_141",
|
|
33
|
+
"calloutBanner-information": "_calloutBanner-information_10d8r_167",
|
|
34
|
+
"calloutBanner-neutral": "_calloutBanner-neutral_10d8r_193"
|
|
34
35
|
};
|
|
35
36
|
const calloutBanner = cva(styles.calloutBanner, {
|
|
36
37
|
variants: {
|
|
@@ -51,6 +52,28 @@ const calloutBanner = cva(styles.calloutBanner, {
|
|
|
51
52
|
styleVariant: "critical"
|
|
52
53
|
}
|
|
53
54
|
});
|
|
55
|
+
const CALLOUT_BANNER_META = {
|
|
56
|
+
critical: {
|
|
57
|
+
icon: "circle-exclamation",
|
|
58
|
+
severityLabel: "Critical",
|
|
59
|
+
role: "alert"
|
|
60
|
+
},
|
|
61
|
+
success: {
|
|
62
|
+
icon: "check-circle",
|
|
63
|
+
severityLabel: "Success",
|
|
64
|
+
role: "status"
|
|
65
|
+
},
|
|
66
|
+
information: {
|
|
67
|
+
icon: "info-circle",
|
|
68
|
+
severityLabel: "Information",
|
|
69
|
+
role: "status"
|
|
70
|
+
},
|
|
71
|
+
neutral: {
|
|
72
|
+
icon: "check-circle",
|
|
73
|
+
severityLabel: "",
|
|
74
|
+
role: "region"
|
|
75
|
+
}
|
|
76
|
+
};
|
|
54
77
|
const CalloutBanner = ({
|
|
55
78
|
title,
|
|
56
79
|
description,
|
|
@@ -58,31 +81,34 @@ const CalloutBanner = ({
|
|
|
58
81
|
children,
|
|
59
82
|
styleVariant = "critical",
|
|
60
83
|
emphasis = "primary",
|
|
84
|
+
headingLevel = "h3",
|
|
61
85
|
dismissButtonTooltipLabel,
|
|
62
86
|
onDismiss,
|
|
63
87
|
customAsset,
|
|
64
88
|
hideIllustration = false,
|
|
65
|
-
alignButtons = "left"
|
|
89
|
+
alignButtons = "left",
|
|
90
|
+
severityLabel,
|
|
91
|
+
role,
|
|
92
|
+
dismissButtonProps = {
|
|
93
|
+
"aria-label": "Dismiss banner"
|
|
94
|
+
},
|
|
95
|
+
...ariaProps
|
|
66
96
|
}) => {
|
|
67
|
-
const iconName = React__default.useMemo(() => {
|
|
68
|
-
switch (styleVariant) {
|
|
69
|
-
case "critical":
|
|
70
|
-
return "circle-exclamation";
|
|
71
|
-
case "success":
|
|
72
|
-
return "check-circle";
|
|
73
|
-
case "information":
|
|
74
|
-
return "info-circle";
|
|
75
|
-
case "neutral":
|
|
76
|
-
return "check-circle";
|
|
77
|
-
default:
|
|
78
|
-
return "circle-exclamation";
|
|
79
|
-
}
|
|
80
|
-
}, [styleVariant]);
|
|
81
97
|
const hasOnDismiss = typeof onDismiss === "function";
|
|
98
|
+
const {
|
|
99
|
+
icon: iconName,
|
|
100
|
+
severityLabel: defaultSeverityLabel,
|
|
101
|
+
role: bannerRole
|
|
102
|
+
} = CALLOUT_BANNER_META[styleVariant];
|
|
103
|
+
const HeadingBanner = headingLevel;
|
|
104
|
+
const titleId = React__default.useId();
|
|
105
|
+
const descriptionId = React__default.useId();
|
|
106
|
+
const resolvedSeverityLabel = severityLabel ?? defaultSeverityLabel;
|
|
107
|
+
const resolvedRole = role || bannerRole;
|
|
82
108
|
return /* @__PURE__ */ jsxs("div", { className: calloutBanner({
|
|
83
109
|
emphasis,
|
|
84
110
|
styleVariant
|
|
85
|
-
}), children: [
|
|
111
|
+
}), role: resolvedRole, "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0, ...ariaProps, children: [
|
|
86
112
|
/* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__start"], children: [
|
|
87
113
|
!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" }) })),
|
|
88
114
|
/* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__meta"], children: [
|
|
@@ -90,14 +116,20 @@ const CalloutBanner = ({
|
|
|
90
116
|
iconName: "close",
|
|
91
117
|
iconPrefix: "far",
|
|
92
118
|
iconSize: "1x"
|
|
93
|
-
}, tooltipLabel: dismissButtonTooltipLabel,
|
|
119
|
+
}, tooltipLabel: dismissButtonTooltipLabel, ...dismissButtonProps }) }),
|
|
94
120
|
/* @__PURE__ */ jsxs("div", { className: `
|
|
95
121
|
${styles["calloutBanner__meta-content"]}
|
|
96
122
|
|
|
97
123
|
${alignButtons === "right" ? styles["calloutBanner__meta-right"] : ""}`, children: [
|
|
98
124
|
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: `${styles["calloutBanner__meta-top"]} ${hasOnDismiss ? styles["calloutBanner__meta-top-dismiss"] : ""}`, children: [
|
|
99
|
-
/* @__PURE__ */
|
|
100
|
-
|
|
125
|
+
/* @__PURE__ */ jsxs(HeadingBanner, { id: titleId, className: styles["calloutBanner__meta-title"], children: [
|
|
126
|
+
/* @__PURE__ */ jsxs("span", { className: styles["calloutBanner__severity-label"], dir: "auto", children: [
|
|
127
|
+
resolvedSeverityLabel,
|
|
128
|
+
resolvedSeverityLabel ? ": " : ""
|
|
129
|
+
] }),
|
|
130
|
+
/* @__PURE__ */ jsx("bdi", { dir: "auto", children: title })
|
|
131
|
+
] }),
|
|
132
|
+
description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: styles["calloutBanner__meta-description"], children: description })
|
|
101
133
|
] }) }),
|
|
102
134
|
label && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-label"], children: label })
|
|
103
135
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalloutBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CalloutBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
export type CurrencyStyleVariant = 'primary' | 'secondary' | 'white' | 'onSpend' | 'onCollect' | 'accentPrimary' | 'accentSecondary';
|
|
2
|
+
export interface CurrencyProps {
|
|
3
|
+
/**
|
|
4
|
+
* The numeric value to display
|
|
5
|
+
*/
|
|
6
|
+
children?: number;
|
|
7
|
+
/**
|
|
8
|
+
* A BCP‑47 language tag, e.g. "en-GB", "fr-FR".
|
|
9
|
+
* Only used when you don’t supply a custom `formatter`.
|
|
10
|
+
* @default "en-GB"
|
|
11
|
+
*/
|
|
12
|
+
locale?: string;
|
|
13
|
+
/**
|
|
14
|
+
* If you just want to prepend/append a symbol and use decimal formatting,
|
|
15
|
+
* supply this (e.g. "£", "$", "€"). Ignored if `formatOptions.style === "currency"`.
|
|
16
|
+
*/
|
|
17
|
+
symbol?: string;
|
|
18
|
+
/**
|
|
19
|
+
* The style variant to use for the currency
|
|
20
|
+
* @default 'accentSecondary'
|
|
21
|
+
*/
|
|
22
|
+
styleVariant?: CurrencyStyleVariant;
|
|
23
|
+
/**
|
|
24
|
+
* The size of the Avios currency
|
|
25
|
+
* @default 'md'
|
|
26
|
+
*/
|
|
27
|
+
size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs' | '4xs' | '5xs';
|
|
28
|
+
/**
|
|
29
|
+
* Whether to apply strikethrough styling to the currency text.
|
|
30
|
+
* Useful for indicating a discount or a change in value.
|
|
31
|
+
* @default false
|
|
32
|
+
*/
|
|
33
|
+
isStrikethrough?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Any standard Intl.NumberFormatOptions you’d like to customize
|
|
36
|
+
* (digit counts, grouping, currency style, etc.).
|
|
37
|
+
*/
|
|
38
|
+
formatOptions?: Omit<Intl.NumberFormatOptions, 'style'> & {
|
|
39
|
+
/** If you want a true currency style, set this to "currency" and supply `currency` below */
|
|
40
|
+
style?: 'decimal' | 'currency';
|
|
41
|
+
currency?: Intl.NumberFormatOptions['currency'];
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Full override formatter. Handy if you need something totally bespoke:
|
|
45
|
+
* `(value) => string`.
|
|
46
|
+
* When present, this always wins and `locale|symbol|formatOptions` are ignored.
|
|
47
|
+
*/
|
|
48
|
+
formatter?: (value: number) => string;
|
|
49
|
+
}
|
|
50
|
+
export declare const Currency: ({ children, locale, symbol, size, styleVariant, isStrikethrough, formatOptions, formatter, }: CurrencyProps) => import("react/jsx-runtime").JSX.Element;
|
|
51
|
+
export default Currency;
|