@alto-avios/alto-ui 5.9.0 → 5.11.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/CalloutBanner.css +1 -1
- package/dist/assets/Input.css +1 -1
- package/dist/assets/border.css +1 -1
- package/dist/components/AviosCurrencyBadge/AviosCurrencyBadge.js +3 -2
- package/dist/components/AviosCurrencyBadge/AviosCurrencyBadge.js.map +1 -1
- package/dist/components/BannerSectionContent/BannerSectionContent.d.ts +9 -2
- package/dist/components/BannerSectionContent/BannerSectionContent.js +4 -4
- package/dist/components/BannerSectionContent/BannerSectionContent.js.map +1 -1
- package/dist/components/Box/Box.d.ts +16 -0
- package/dist/components/Box/Box.js +2 -2
- package/dist/components/Box/Box.js.map +1 -1
- package/dist/components/CalloutBanner/CalloutBanner.js +8 -8
- package/dist/components/NumberField/NumberField.d.ts +13 -1
- package/dist/components/NumberField/NumberField.js +2 -2
- package/dist/components/NumberField/NumberField.js.map +1 -1
- package/dist/components/_base/Input/Input.d.ts +5 -0
- package/dist/components/_base/Input/Input.js +8 -8
- package/dist/components/_base/Input/Input.js.map +1 -1
- package/dist/utils/border/border.d.ts +8 -0
- package/dist/utils/border/border.js +1 -1
- package/dist/utils/border/border.js.map +1 -1
- package/dist/utils/stories/inputControls.d.ts +11 -0
- package/dist/utils/stories/inputControls.js +1 -1
- package/dist/utils/stories/inputControls.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
._callout-
|
|
1
|
+
._callout-banner_1mjzf_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%}._callout-banner__icon_1mjzf_12{align-self:flex-start}._callout-banner_1mjzf_1:has(._callout-banner__meta-title_1mjzf_21:only-child):has(:not(._callout-banner__meta-label_1mjzf_19)) ._callout-banner__meta_1mjzf_19,._callout-banner_1mjzf_1:has(._callout-banner__meta-title_1mjzf_21:only-child):has(:not(._callout-banner__meta-label_1mjzf_19)) ._callout-banner__start_1mjzf_17{align-items:center}._callout-banner__start_1mjzf_17{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}._callout-banner__end_1mjzf_42{background-color:var(--alto-sem-color-bg-layer2-default);display:flex;justify-content:flex-start;padding:var(--alto-sem-space-sm)}._callout-banner__dismiss_1mjzf_49{right:var(--alto-sem-space-xs);top:var(--alto-sem-space-xs)}._callout-banner__meta_1mjzf_19{display:flex;flex-direction:row-reverse;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-sm-font-size);font-style:normal;gap:var(--alto-sem-space-xs);letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height);width:100%}._callout-banner__meta-content_1mjzf_66{display:flex;flex-direction:column;gap:var(--alto-sem-space-xs);width:100%}._callout-banner__meta-label_1mjzf_19{align-items:flex-start;display:flex}._callout-banner__meta-content--row_1mjzf_78{flex-direction:row;justify-content:space-between}._callout-banner__meta-top_1mjzf_83{align-items:flex-start;display:flex;flex-direction:column;flex-wrap:wrap;text-wrap:wrap;word-wrap:break-word;word-break:break-word}._callout-banner__custom-asset_1mjzf_93{max-width:52px}._callout-banner__custom-asset_1mjzf_93>:first-child{max-width:inherit}._callout-banner__meta-title_1mjzf_21{font-size:var(--alto-sem-text-body-sm-font-size);font-weight:var(--alto-sem-text-body-bold-font-weight);margin:0}._callout-banner__meta-description_1mjzf_107{margin:var(--alto-sem-space-4xs) 0 0}._callout-banner__severity-label_1mjzf_112{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0)}._callout-banner__default-asset--center_1mjzf_123{align-self:center;display:flex}._callout-banner--critical_1mjzf_129{border-color:var(--alto-sem-color-border-critical)}._callout-banner--primary_1mjzf_133._callout-banner--critical_1mjzf_129 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-critical-vibrant-default)}._callout-banner--secondary_1mjzf_137._callout-banner--critical_1mjzf_129 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-primary)}._callout-banner--secondary_1mjzf_137._callout-banner--critical_1mjzf_129 ._callout-banner__end_1mjzf_42{border-top:1px solid var(--alto-sem-color-border-critical)}._callout-banner--tertiary_1mjzf_146._callout-banner--critical_1mjzf_129 ._callout-banner__start_1mjzf_17{background:transparent;color:var(--alto-sem-color-fg-primary)}._callout-banner--critical_1mjzf_129:not(._callout-banner--primary_1mjzf_133) ._callout-banner__icon_1mjzf_12{color:var(--alto-sem-color-fg-critical-primary)}._callout-banner--success_1mjzf_155{border-color:var(--alto-sem-color-border-success)}._callout-banner--primary_1mjzf_133._callout-banner--success_1mjzf_155 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-success-vibrant-default)}._callout-banner--secondary_1mjzf_137._callout-banner--success_1mjzf_155 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-success-subtle-default);color:var(--alto-sem-color-fg-primary)}._callout-banner--secondary_1mjzf_137._callout-banner--success_1mjzf_155 ._callout-banner__end_1mjzf_42{border-top:1px solid var(--alto-sem-color-border-success)}._callout-banner--tertiary_1mjzf_146._callout-banner--success_1mjzf_155 ._callout-banner__start_1mjzf_17{background:transparent;color:var(--alto-sem-color-fg-primary)}._callout-banner--success_1mjzf_155:not(._callout-banner--primary_1mjzf_133) ._callout-banner__icon_1mjzf_12{color:var(--alto-sem-color-fg-success-primary)}._callout-banner--information_1mjzf_181{border-color:var(--alto-sem-color-border-information)}._callout-banner--primary_1mjzf_133._callout-banner--information_1mjzf_181 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-information-vibrant-default)}._callout-banner--secondary_1mjzf_137._callout-banner--information_1mjzf_181 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-information-subtle-default);color:var(--alto-sem-color-fg-primary)}._callout-banner--secondary_1mjzf_137._callout-banner--information_1mjzf_181 ._callout-banner__end_1mjzf_42{border-top:1px solid var(--alto-sem-color-border-information)}._callout-banner--tertiary_1mjzf_146._callout-banner--information_1mjzf_181 ._callout-banner__start_1mjzf_17{background:transparent;color:var(--alto-sem-color-fg-primary)}._callout-banner--information_1mjzf_181:not(._callout-banner--primary_1mjzf_133) ._callout-banner__icon_1mjzf_12{color:var(--alto-sem-color-fg-information-primary)}._callout-banner--neutral_1mjzf_208{border-color:var(--alto-sem-color-border-secondary)}._callout-banner--primary_1mjzf_133._callout-banner--neutral_1mjzf_208 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-inverse-vibrant-default)}._callout-banner--secondary_1mjzf_137._callout-banner--neutral_1mjzf_208 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-layer1-default);color:var(--alto-sem-color-fg-primary)}._callout-banner--secondary_1mjzf_137._callout-banner--neutral_1mjzf_208 ._callout-banner__end_1mjzf_42{border-top:1px solid var(--alto-sem-color-border-secondary)}._callout-banner--tertiary_1mjzf_146._callout-banner--neutral_1mjzf_208 ._callout-banner__start_1mjzf_17{background:transparent;color:var(--alto-sem-color-fg-primary)}._callout-banner--neutral_1mjzf_208:not(._callout-banner--primary_1mjzf_133) ._callout-banner__icon_1mjzf_12{color:var(--alto-sem-color-fg-primary)}._callout-banner--accent_1mjzf_234{border-color:var(--alto-sem-color-border-accent)}._callout-banner--primary_1mjzf_133._callout-banner--accent_1mjzf_234 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-accent-vibrant-default);color:var(--alto-sem-color-fg-accent-on-vibrant)}._callout-banner--secondary_1mjzf_137._callout-banner--accent_1mjzf_234{border:none}._callout-banner--secondary_1mjzf_137._callout-banner--accent_1mjzf_234 ._callout-banner__start_1mjzf_17{background:var(--alto-sem-color-bg-accent-subtle-default);color:var(--alto-sem-color-fg-primary)}._callout-banner--tertiary_1mjzf_146._callout-banner--accent_1mjzf_234 ._callout-banner__start_1mjzf_17{background:transparent;color:var(--alto-sem-color-fg-primary)}._callout-banner--accent_1mjzf_234:not(._callout-banner--primary_1mjzf_133) ._callout-banner__icon_1mjzf_12{color:var(--alto-sem-color-fg-accent-primary)}._callout-banner--tertiary_1mjzf_146{border-color:transparent;gap:var(--alto-sem-space-4xs)}._callout-banner--tertiary_1mjzf_146 ._callout-banner__start_1mjzf_17{padding:0}._callout-banner--tertiary_1mjzf_146 ._callout-banner__end_1mjzf_42{background:var(--alto-sem-color-bg-layer1-default);border:1px solid var(--alto-sem-color-border-secondary);border-radius:var(--alto-card-radius)}
|
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._input-field_t4b0i_1{color:var(--alto-sem-color-fg-primary);font-family:var(--alto-sem-text-body-font-family);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);width:100%;--clearButton-focus-width:48px;--input-field-max-height:48px;--input-inner-field-height:calc(var(--input-field-max-height) - var(--alto-sem-border-width-sm)*2);--input-error-inner-field-height:calc(var(--input-field-max-height) - var(--alto-sem-border-width-md)*2);--input-slot-min-width:46px}._input-field__grid_t4b0i_20{display:grid;grid-template-columns:repeat(12,1fr)}._input-field__wrapper_t4b0i_26{align-items:center;display:grid;grid-template-columns:1fr;position:relative;grid-column-gap:var(--alto-sem-space-2xs);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-input-radius);box-sizing:border-box}._input-field__wrapper_t4b0i_26[data-start-slot]{grid-template-columns:minmax(var(--input-slot-min-width),auto) 1fr}._input-field__wrapper_t4b0i_26[data-end-slot]{grid-template-columns:1fr minmax(var(--input-slot-min-width),auto)}._input-field__wrapper_t4b0i_26[data-start-slot][data-end-slot]{grid-template-columns:minmax(var(--input-slot-min-width),auto) 1fr minmax(var(--input-slot-min-width),auto)}._input-field__wrapper_t4b0i_26:not([data-start-slot]):not([data-end-slot]) ._input-field__input_t4b0i_55{border-radius:var(--alto-input-radius)}._input-field__wrapper_t4b0i_26[data-end-slot]:not([data-start-slot]) ._input-field__input_t4b0i_55,._input-field__wrapper_t4b0i_26[data-start-slot] div:first-child{border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}._input-field__wrapper_t4b0i_26[data-start-slot]:not([data-end-slot]) ._input-field__input_t4b0i_55{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__input_t4b0i_55{align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border:0;box-sizing:border-box;color:var(--alto-sem-color-fg-primary);display:grid;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);height:var(--input-inner-field-height);justify-content:space-between;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-xs) var(--alto-sem-space-sm);width:100%}._input-field__input_t4b0i_55::-moz-placeholder{color:var(--alto-sem-color-fg-secondary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._input-field__input_t4b0i_55::placeholder{color:var(--alto-sem-color-fg-secondary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-hovered]):not([data-disabled]){border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-hover)}._input-field__input_t4b0i_55[data-focus-visible]:not([data-disabled]){outline:none}._input-field__endSelect_t4b0i_117[data-focused],._input-field__startSelect_t4b0i_116[data-focused],._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-focus-visible]):not([data-disabled]),._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-focused]):not([data-disabled]){outline-color:var(--alto-sem-color-border-accent);outline-offset:var(--alto-sem-border-width-none);outline-style:solid;outline-width:var(--alto-sem-border-width-md);z-index:1}._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]){border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical)}._input-field__endIcon_t4b0i_138,._input-field__endSelect_t4b0i_117,._input-field__endSlot_t4b0i_140,._input-field__prefix_t4b0i_133,._input-field__startIcon_t4b0i_137,._input-field__startSelect_t4b0i_116,._input-field__startSlot_t4b0i_139,._input-field__suffix_t4b0i_134{align-items:center;background:var(--alto-sem-color-bg-layer2-default);box-sizing:border-box;color:var(--alto-sem-color-fg-secondary);display:flex;height:var(--input-inner-field-height);justify-content:center;min-width:var(--input-slot-min-width);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]) ._input-field__endIcon_t4b0i_138,._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]) ._input-field__endSelect_t4b0i_117,._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]) ._input-field__endSlot_t4b0i_140,._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]) ._input-field__input_t4b0i_55,._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]) ._input-field__prefix_t4b0i_133,._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]) ._input-field__startIcon_t4b0i_137,._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]) ._input-field__startSelect_t4b0i_116,._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]) ._input-field__startSlot_t4b0i_139,._input-field__wrapper_t4b0i_26:has(._input-field__input_t4b0i_55[data-invalid]):not([data-disabled]) ._input-field__suffix_t4b0i_134{height:var(--input-error-inner-field-height)}._input-field__endIcon_t4b0i_138,._input-field__endSelect_t4b0i_117,._input-field__endSlot_t4b0i_140,._input-field__suffix_t4b0i_134{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__prefix_t4b0i_133,._input-field__startSelect_t4b0i_116{border-right:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}._input-field__endSelect_t4b0i_117,._input-field__suffix_t4b0i_134{border-left:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}._input-field__prefix_t4b0i_133,._input-field__suffix_t4b0i_134{background-color:var(--alto-sem-color-bg-layer1-default)}._input-field__endSelect_t4b0i_117,._input-field__startSelect_t4b0i_116{background-color:var(--alto-sem-color-bg-layer2-default);padding:0}._input-field__startSelect_t4b0i_116 select{border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}._input-field__endSelect_t4b0i_117 select{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__endSelect_t4b0i_117 select,._input-field__startSelect_t4b0i_116 select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--alto-sem-color-bg-base);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='16' fill='none' viewBox='0 0 18 20'%3E%3Cpath fill='%234b4855' d='M9.586 19.492c-.352.274-.86.274-1.172 0l-6.25-5c-.43-.312-.469-.898-.156-1.328.312-.39.898-.469 1.328-.117L9 17.578l5.664-4.531a.89.89 0 0 1 1.29.117c.312.43.273 1.016-.157 1.328l-6.25 5zm6.25-13.945c.39.312.469.898.117 1.289-.312.43-.898.469-1.289.156L9 2.461 3.336 6.992c-.43.313-1.016.274-1.328-.156-.313-.39-.274-.977.156-1.29l6.25-5c.313-.273.82-.273 1.172 0z'/%3E%3C/svg%3E");background-position:right var(--alto-sem-space-xs) center;background-repeat:no-repeat;border:none;color:var(--alto-sem-color-fg-primary);cursor:pointer;font-family:var(--alto-sem-text-body-font-family);height:100%;padding:var(--alto-sem-space-2xs) calc(var(--alto-sem-space-xs)*2 + 11px) var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._input-field__endSlot_t4b0i_140[data-end-slot-button],._input-field__startSlot_t4b0i_139[data-start-slot-button]{padding-bottom:0;padding-top:0}._input-field__clearButton_t4b0i_260{position:absolute;right:var(--alto-sem-space-2xs)}._input-field__clearButton_t4b0i_260:not(:last-child){right:calc(var(--input-end-slot-width) + 6px)}._input-field__wrapper_t4b0i_26:has(._input-field__clearButton_t4b0i_260) ._input-field__input_t4b0i_55{padding-right:var(--clearButton-focus-width)}._input-field__wrapper_t4b0i_26:has(._input-field__startIcon_t4b0i_137):has(._input-field__endIcon_t4b0i_138) ._input-field__input_t4b0i_55,._input-field__wrapper_t4b0i_26:has(._input-field__startSlot_t4b0i_139):has(._input-field__endSlot_t4b0i_140) ._input-field__input_t4b0i_55{padding-left:0;padding-right:0}._input-field__wrapper_t4b0i_26:has(._input-field__startIcon_t4b0i_137) ._input-field__input_t4b0i_55,._input-field__wrapper_t4b0i_26:has(._input-field__startSlot_t4b0i_139) ._input-field__input_t4b0i_55{padding-left:0}._input-field__wrapper_t4b0i_26:has(._input-field__endIcon_t4b0i_138) ._input-field__input_t4b0i_55,._input-field__wrapper_t4b0i_26:has(._input-field__endSlot_t4b0i_140) ._input-field__input_t4b0i_55{padding-right:0}._input-field__wrapper_t4b0i_26:has(._input-field__prefix_t4b0i_133,._input-field__startSelect_t4b0i_116) ._input-field__input_t4b0i_55,._input-field__wrapper_t4b0i_26:has(._input-field__suffix_t4b0i_134,._input-field__endSelect_t4b0i_117) ._input-field__input_t4b0i_55{padding-left:var(--alto-sem-space-2xs);padding-right:var(--alto-sem-space-2xs)}._input-field__wrapper_t4b0i_26:has(._input-field__suffix_t4b0i_134,._input-field__endSelect_t4b0i_117):not([data-start-slot]) ._input-field__input_t4b0i_55{padding-left:var(--alto-sem-space-sm)}._input-field__wrapper_t4b0i_26[data-has-end-button] ._input-field__endSlot_t4b0i_140,._input-field__wrapper_t4b0i_26[data-has-start-button] ._input-field__startSlot_t4b0i_139{padding-left:var(--alto-sem-space-3xs);padding-right:var(--alto-sem-space-3xs)}._input-field__errorMessage_t4b0i_318{margin-top:var(--alto-sem-space-2xs)}._input-field__input--hideSearchClear_t4b0i_323::-webkit-search-cancel-button,._input-field__input--hideSearchClear_t4b0i_323::-webkit-search-decoration,._input-field__input--hideSearchClear_t4b0i_323::-webkit-search-results-button,._input-field__input--hideSearchClear_t4b0i_323::-webkit-search-results-decoration{display:none}._input-field__input--hideSearchClear_t4b0i_323::-ms-clear{display:none}._input-field__input--hideSearchClear_t4b0i_323::-moz-search-clear-button{display:none}[dir=rtl] ._input-field__wrapper_t4b0i_26[data-end-slot]:not([data-start-slot]) ._input-field__input_t4b0i_55,[dir=rtl] ._input-field__wrapper_t4b0i_26[data-start-slot] div:first-child{border-radius:0;border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius);padding-right:var(--alto-sem-space-sm)}[dir=rtl] ._input-field__wrapper_t4b0i_26[data-end-slot] div:last-child,[dir=rtl] ._input-field__wrapper_t4b0i_26[data-start-slot]:not([data-end-slot]) ._input-field__input_t4b0i_55{border-radius:0;border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}[dir=rtl] ._input-field__prefix_t4b0i_133,[dir=rtl] ._input-field__startSelect_t4b0i_116{border-left:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default);border-right:0}[dir=rtl] ._input-field__endSelect_t4b0i_117,[dir=rtl] ._input-field__suffix_t4b0i_134{border-left:0;border-right:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}[dir=rtl] ._input-field__wrapper_t4b0i_26:has(._input-field__startIcon_t4b0i_137) ._input-field__input_t4b0i_55,[dir=rtl] ._input-field__wrapper_t4b0i_26:has(._input-field__startSlot_t4b0i_139) ._input-field__input_t4b0i_55{padding-right:0}[dir=rtl]._input-field__wrapper_t4b0i_26:has(._input-field__endIcon_t4b0i_138) ._input-field__input_t4b0i_55,[dir=rtl]._input-field__wrapper_t4b0i_26:has(._input-field__endSlot_t4b0i_140) ._input-field__input_t4b0i_55{padding-left:0}[dir=rtl] ._input-field__wrapper_t4b0i_26:has(._input-field__clearButton_t4b0i_260) ._input-field__input_t4b0i_55{padding-left:var(--clearButton-focus-width)}[dir=rtl] ._input-field__clearButton_t4b0i_260{left:var(--alto-sem-space-2xs);right:unset}[dir=rtl] ._input-field__clearButton_t4b0i_260:not(:last-child){left:calc(var(--input-end-slot-width) + 6px);right:unset}._input-field__wrapper_t4b0i_26:has([data-disabled]){background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._input-field__wrapper_t4b0i_26>[data-disabled]{border-color:var(--alto-sem-color-border-disabled-subtle);pointer-events:none}._input-field__wrapper_t4b0i_26 select[disabled],._input-field__wrapper_t4b0i_26>[data-disabled]{background:transparent;color:var(--alto-sem-color-fg-disabled-on-subtle);cursor:not-allowed}
|
|
1
|
+
._input-field_igmej_1{color:var(--alto-sem-color-fg-primary);font-family:var(--alto-sem-text-body-font-family);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);width:100%;--clearButton-focus-width:48px;--input-field-max-height:48px;--input-inner-field-height:calc(var(--input-field-max-height) - var(--alto-sem-border-width-sm)*2);--input-error-inner-field-height:calc(var(--input-field-max-height) - var(--alto-sem-border-width-md)*2);--input-slot-min-width:46px}._input-field__grid_igmej_20{display:grid;grid-template-columns:repeat(12,1fr)}._input-field__wrapper_igmej_26{align-items:center;display:grid;grid-template-columns:1fr;position:relative;grid-column-gap:var(--alto-sem-space-2xs);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-input-radius);box-sizing:border-box}._input-field__wrapper_igmej_26[data-start-slot]{grid-template-columns:minmax(var(--input-slot-min-width),auto) 1fr}._input-field__wrapper_igmej_26[data-end-slot]{grid-template-columns:1fr minmax(var(--input-slot-min-width),auto)}._input-field__wrapper_igmej_26[data-start-slot][data-end-slot]{grid-template-columns:minmax(var(--input-slot-min-width),auto) 1fr minmax(var(--input-slot-min-width),auto)}._input-field__wrapper_igmej_26[data-start-slot]:has(._input-field__startIcon_igmej_55):not([data-end-slot]){grid-template-columns:auto 1fr}._input-field__wrapper_igmej_26[data-end-slot]:has(._input-field__endIcon_igmej_61):not([data-start-slot]){grid-template-columns:1fr auto}._input-field__wrapper_igmej_26[data-start-slot]:has(._input-field__startIcon_igmej_55)[data-end-slot]{grid-template-columns:auto 1fr minmax(var(--input-slot-min-width),auto)}._input-field__wrapper_igmej_26[data-end-slot]:has(._input-field__endIcon_igmej_61)[data-start-slot]{grid-template-columns:minmax(var(--input-slot-min-width),auto) 1fr auto}._input-field__wrapper_igmej_26[data-start-slot][data-end-slot]:has(._input-field__startIcon_igmej_55):has(._input-field__endIcon_igmej_61){grid-template-columns:auto 1fr auto}._input-field__wrapper_igmej_26:not([data-start-slot]):not([data-end-slot]) ._input-field__input_igmej_86{border-radius:var(--alto-input-radius)}._input-field__wrapper_igmej_26[data-end-slot]:not([data-start-slot]) ._input-field__input_igmej_86,._input-field__wrapper_igmej_26[data-start-slot] div:first-child{border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}._input-field__wrapper_igmej_26[data-start-slot]:not([data-end-slot]) ._input-field__input_igmej_86{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__input_igmej_86{align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border:0;box-sizing:border-box;color:var(--alto-sem-color-fg-primary);display:grid;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);height:var(--input-inner-field-height);justify-content:space-between;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-xs) var(--alto-sem-space-sm);width:100%}._input-field__input_igmej_86::-moz-placeholder{color:var(--alto-sem-color-fg-secondary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._input-field__input_igmej_86::placeholder{color:var(--alto-sem-color-fg-secondary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-hovered]):not([data-disabled]){border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-hover)}._input-field__input_igmej_86[data-focus-visible]:not([data-disabled]){outline:none}._input-field__endSelect_igmej_148[data-focused],._input-field__startSelect_igmej_147[data-focused],._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-focus-visible]):not([data-disabled]),._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-focused]):not([data-disabled]){outline-color:var(--alto-sem-color-border-accent);outline-offset:var(--alto-sem-border-width-none);outline-style:solid;outline-width:var(--alto-sem-border-width-md);z-index:1}._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]){border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical)}._input-field__endIcon_igmej_61,._input-field__endSelect_igmej_148,._input-field__endSlot_igmej_171,._input-field__prefix_igmej_164,._input-field__startIcon_igmej_55,._input-field__startSelect_igmej_147,._input-field__startSlot_igmej_170,._input-field__suffix_igmej_165{align-items:center;background:var(--alto-sem-color-bg-layer2-default);box-sizing:border-box;color:var(--alto-sem-color-fg-secondary);display:flex;height:var(--input-inner-field-height);justify-content:center;min-width:var(--input-slot-min-width);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._input-field__startIcon_igmej_55{min-width:unset;padding:var(--alto-sem-space-2xs) 0 var(--alto-sem-space-2xs) var(--alto-sem-space-sm)}._input-field__endIcon_igmej_61{min-width:unset;padding:var(--alto-sem-space-2xs) var(--alto-sem-space-sm) var(--alto-sem-space-2xs) 0}._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]) ._input-field__endIcon_igmej_61,._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]) ._input-field__endSelect_igmej_148,._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]) ._input-field__endSlot_igmej_171,._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]) ._input-field__input_igmej_86,._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]) ._input-field__prefix_igmej_164,._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]) ._input-field__startIcon_igmej_55,._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]) ._input-field__startSelect_igmej_147,._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]) ._input-field__startSlot_igmej_170,._input-field__wrapper_igmej_26:has(._input-field__input_igmej_86[data-invalid]):not([data-disabled]) ._input-field__suffix_igmej_165{height:var(--input-error-inner-field-height)}._input-field__endIcon_igmej_61,._input-field__endSelect_igmej_148,._input-field__endSlot_igmej_171,._input-field__suffix_igmej_165{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__prefix_igmej_164,._input-field__startSelect_igmej_147{border-right:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}._input-field__endSelect_igmej_148,._input-field__suffix_igmej_165{border-left:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}._input-field__prefix_igmej_164,._input-field__suffix_igmej_165{background-color:var(--alto-sem-color-bg-layer1-default)}._input-field__endSelect_igmej_148,._input-field__startSelect_igmej_147{background-color:var(--alto-sem-color-bg-layer2-default);padding:0}._input-field__startSelect_igmej_147 select{border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}._input-field__endSelect_igmej_148 select{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__endSelect_igmej_148 select,._input-field__startSelect_igmej_147 select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--alto-sem-color-bg-base);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='16' fill='none' viewBox='0 0 18 20'%3E%3Cpath fill='%234b4855' d='M9.586 19.492c-.352.274-.86.274-1.172 0l-6.25-5c-.43-.312-.469-.898-.156-1.328.312-.39.898-.469 1.328-.117L9 17.578l5.664-4.531a.89.89 0 0 1 1.29.117c.312.43.273 1.016-.157 1.328l-6.25 5zm6.25-13.945c.39.312.469.898.117 1.289-.312.43-.898.469-1.289.156L9 2.461 3.336 6.992c-.43.313-1.016.274-1.328-.156-.313-.39-.274-.977.156-1.29l6.25-5c.313-.273.82-.273 1.172 0z'/%3E%3C/svg%3E");background-position:right var(--alto-sem-space-xs) center;background-repeat:no-repeat;border:none;color:var(--alto-sem-color-fg-primary);cursor:pointer;font-family:var(--alto-sem-text-body-font-family);height:100%;padding:var(--alto-sem-space-2xs) calc(var(--alto-sem-space-xs)*2 + 11px) var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._input-field__endSlot_igmej_171[data-end-slot-button],._input-field__startSlot_igmej_170[data-start-slot-button]{padding-bottom:0;padding-top:0}._input-field__clearButton_igmej_303{position:absolute;right:var(--alto-sem-space-2xs)}._input-field__clearButton_igmej_303:not(:last-child){right:calc(var(--input-end-slot-width) + 6px)}._input-field__wrapper_igmej_26:has(._input-field__clearButton_igmej_303) ._input-field__input_igmej_86{padding-right:var(--clearButton-focus-width)}._input-field__wrapper_igmej_26:has(._input-field__startIcon_igmej_55):has(._input-field__endIcon_igmej_61) ._input-field__input_igmej_86,._input-field__wrapper_igmej_26:has(._input-field__startSlot_igmej_170):has(._input-field__endSlot_igmej_171) ._input-field__input_igmej_86{padding-left:0;padding-right:0}._input-field__wrapper_igmej_26:has(._input-field__startIcon_igmej_55) ._input-field__input_igmej_86,._input-field__wrapper_igmej_26:has(._input-field__startSlot_igmej_170) ._input-field__input_igmej_86{padding-left:0}._input-field__wrapper_igmej_26:has(._input-field__endIcon_igmej_61) ._input-field__input_igmej_86,._input-field__wrapper_igmej_26:has(._input-field__endSlot_igmej_171) ._input-field__input_igmej_86{padding-right:0}._input-field__wrapper_igmej_26:has(._input-field__prefix_igmej_164,._input-field__startSelect_igmej_147) ._input-field__input_igmej_86{padding-left:var(--alto-sem-space-2xs)}._input-field__wrapper_igmej_26:has(._input-field__suffix_igmej_165,._input-field__endSelect_igmej_148) ._input-field__input_igmej_86{padding-right:var(--alto-sem-space-2xs)}._input-field__wrapper_igmej_26:has(._input-field__suffix_igmej_165,._input-field__endSelect_igmej_148):not([data-start-slot]) ._input-field__input_igmej_86{padding-left:var(--alto-sem-space-sm)}._input-field__wrapper_igmej_26[data-has-end-button] ._input-field__endSlot_igmej_171,._input-field__wrapper_igmej_26[data-has-start-button] ._input-field__startSlot_igmej_170{padding-left:var(--alto-sem-space-3xs);padding-right:var(--alto-sem-space-3xs)}._input-field__errorMessage_igmej_362{margin-top:var(--alto-sem-space-2xs)}._input-field__input--hideSearchClear_igmej_367::-webkit-search-cancel-button,._input-field__input--hideSearchClear_igmej_367::-webkit-search-decoration,._input-field__input--hideSearchClear_igmej_367::-webkit-search-results-button,._input-field__input--hideSearchClear_igmej_367::-webkit-search-results-decoration{display:none}._input-field__input--hideSearchClear_igmej_367::-ms-clear{display:none}._input-field__input--hideSearchClear_igmej_367::-moz-search-clear-button{display:none}[dir=rtl] ._input-field__wrapper_igmej_26[data-end-slot]:not([data-start-slot]) ._input-field__input_igmej_86,[dir=rtl] ._input-field__wrapper_igmej_26[data-start-slot] div:first-child{border-radius:0;border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius);padding-right:var(--alto-sem-space-sm)}[dir=rtl] ._input-field__wrapper_igmej_26[data-end-slot] div:last-child,[dir=rtl] ._input-field__wrapper_igmej_26[data-start-slot]:not([data-end-slot]) ._input-field__input_igmej_86{border-radius:0;border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}[dir=rtl] ._input-field__prefix_igmej_164,[dir=rtl] ._input-field__startSelect_igmej_147{border-left:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default);border-right:0}[dir=rtl] ._input-field__endSelect_igmej_148,[dir=rtl] ._input-field__suffix_igmej_165{border-left:0;border-right:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}[dir=rtl] ._input-field__wrapper_igmej_26:has(._input-field__startIcon_igmej_55) ._input-field__input_igmej_86,[dir=rtl] ._input-field__wrapper_igmej_26:has(._input-field__startSlot_igmej_170) ._input-field__input_igmej_86{padding-right:0}[dir=rtl]._input-field__wrapper_igmej_26:has(._input-field__endIcon_igmej_61) ._input-field__input_igmej_86,[dir=rtl]._input-field__wrapper_igmej_26:has(._input-field__endSlot_igmej_171) ._input-field__input_igmej_86{padding-left:0}[dir=rtl] ._input-field__wrapper_igmej_26:has(._input-field__clearButton_igmej_303) ._input-field__input_igmej_86{padding-left:var(--clearButton-focus-width)}[dir=rtl] ._input-field__clearButton_igmej_303{left:var(--alto-sem-space-2xs);right:unset}[dir=rtl] ._input-field__clearButton_igmej_303:not(:last-child){left:calc(var(--input-end-slot-width) + 6px);right:unset}._input-field__wrapper_igmej_26:has([data-disabled]){background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._input-field__wrapper_igmej_26>[data-disabled]{border-color:var(--alto-sem-color-border-disabled-subtle);pointer-events:none}._input-field__wrapper_igmej_26 select[disabled],._input-field__wrapper_igmej_26>[data-disabled]{background:transparent;color:var(--alto-sem-color-fg-disabled-on-subtle);cursor:not-allowed}
|
package/dist/assets/border.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._borderRadiusNone_yomal_1{border-radius:var(--alto-sem-radius-none)}._borderRadius6xs_yomal_5{border-radius:var(--alto-sem-radius-6xs)}._borderRadius5xs_yomal_9{border-radius:var(--alto-sem-radius-5xs)}._borderRadius4xs_yomal_13{border-radius:var(--alto-sem-radius-4xs)}._borderRadius3xs_yomal_17{border-radius:var(--alto-sem-radius-3xs)}._borderRadius2xs_yomal_21{border-radius:var(--alto-sem-radius-2xs)}._borderRadiusXs_yomal_25{border-radius:var(--alto-sem-radius-xs)}._borderRadiusSm_yomal_29{border-radius:var(--alto-sem-radius-sm)}._borderRadiusMd_yomal_33{border-radius:var(--alto-sem-radius-md)}._borderRadiusLg_yomal_37{border-radius:var(--alto-sem-radius-lg)}._borderRadiusXl_yomal_41{border-radius:var(--alto-sem-radius-xl)}._borderRadiusCircle_yomal_45{border-radius:var(--alto-sem-radius-circle)}._borderRadiusCard_yomal_49{border-radius:var(--alto-card-radius)}._borderWidthNone_yomal_53{border-width:var(--alto-sem-border-width-none)}._borderWidthXs_yomal_57{border-width:var(--alto-sem-border-width-xs)}._borderWidthSm_yomal_61{border-width:var(--alto-sem-border-width-sm)}._borderWidthMd_yomal_65{border-width:var(--alto-sem-border-width-md)}._borderWidthLg_yomal_69{border-width:var(--alto-sem-border-width-lg)}._borderWidthXl_yomal_73{border-width:var(--alto-sem-border-width-xl)}._borderStyleNone_yomal_77{border-style:none}._borderStyleSolid_yomal_81{border-style:solid}._borderStyleDashed_yomal_85{border-style:dashed}._borderColourNone_yomal_89{border-color:transparent}._borderColourSecondary_yomal_93{border-color:var(--alto-sem-color-border-secondary)}._borderColourTertiary_yomal_97{border-color:var(--alto-sem-color-border-tertiary)}._borderColourAccent_yomal_101{border-color:var(--alto-sem-color-border-accent)}._borderColourCaution_yomal_105{border-color:var(--alto-sem-color-border-caution)}._borderColourCritical_yomal_109{border-color:var(--alto-sem-color-border-critical)}._borderColourInformation_yomal_113{border-color:var(--alto-sem-color-border-information)}._borderColourInverse_yomal_117{border-color:var(--alto-sem-color-border-inverse)}._borderColourSuccess_yomal_121{border-color:var(--alto-sem-color-border-success)}._borderColourWarning_yomal_125{border-color:var(--alto-sem-color-border-warning)}._borderColourWhite_yomal_129{border-color:var(--alto-sem-color-border-white)}._borderTopWidthNone_yomal_135{border-top-width:var(--alto-sem-border-width-none)}._borderTopWidthXs_yomal_139{border-top-width:var(--alto-sem-border-width-xs)}._borderTopWidthSm_yomal_143{border-top-width:var(--alto-sem-border-width-sm)}._borderTopWidthMd_yomal_147{border-top-width:var(--alto-sem-border-width-md)}._borderTopWidthLg_yomal_151{border-top-width:var(--alto-sem-border-width-lg)}._borderTopWidthXl_yomal_155{border-top-width:var(--alto-sem-border-width-xl)}._borderTopRadiusNone_yomal_159{border-top-left-radius:var(--alto-sem-radius-none);border-top-right-radius:var(--alto-sem-radius-none)}._borderTopRadius6xs_yomal_164{border-top-left-radius:var(--alto-sem-radius-6xs);border-top-right-radius:var(--alto-sem-radius-6xs)}._borderTopRadius5xs_yomal_169{border-top-left-radius:var(--alto-sem-radius-5xs);border-top-right-radius:var(--alto-sem-radius-5xs)}._borderTopRadius4xs_yomal_174{border-top-left-radius:var(--alto-sem-radius-4xs);border-top-right-radius:var(--alto-sem-radius-4xs)}._borderTopRadius3xs_yomal_179{border-top-left-radius:var(--alto-sem-radius-3xs);border-top-right-radius:var(--alto-sem-radius-3xs)}._borderTopRadius2xs_yomal_184{border-top-left-radius:var(--alto-sem-radius-2xs);border-top-right-radius:var(--alto-sem-radius-2xs)}._borderTopRadiusXs_yomal_189{border-top-left-radius:var(--alto-sem-radius-xs);border-top-right-radius:var(--alto-sem-radius-xs)}._borderTopRadiusSm_yomal_194{border-top-left-radius:var(--alto-sem-radius-sm);border-top-right-radius:var(--alto-sem-radius-sm)}._borderTopRadiusMd_yomal_199{border-top-left-radius:var(--alto-sem-radius-md);border-top-right-radius:var(--alto-sem-radius-md)}._borderTopRadiusLg_yomal_204{border-top-left-radius:var(--alto-sem-radius-lg);border-top-right-radius:var(--alto-sem-radius-lg)}._borderTopRadiusXl_yomal_209{border-top-left-radius:var(--alto-sem-radius-xl);border-top-right-radius:var(--alto-sem-radius-xl)}._borderTopRadiusCircle_yomal_214{border-top-left-radius:var(--alto-sem-radius-circle);border-top-right-radius:var(--alto-sem-radius-circle)}._borderTopRadiusCard_yomal_219{border-top-left-radius:var(--alto-card-radius);border-top-right-radius:var(--alto-card-radius)}._borderTopStyleNone_yomal_224{border-top-style:none}._borderTopStyleSolid_yomal_228{border-top-style:solid}._borderTopStyleDashed_yomal_232{border-top-style:dashed}._borderTopColourNone_yomal_236{border-top-color:transparent}._borderTopColourSecondary_yomal_240{border-top-color:var(--alto-sem-color-border-secondary)}._borderTopColourTertiary_yomal_244{border-top-color:var(--alto-sem-color-border-tertiary)}._borderTopColourAccent_yomal_248{border-top-color:var(--alto-sem-color-border-accent)}._borderTopColourCaution_yomal_252{border-top-color:var(--alto-sem-color-border-caution)}._borderTopColourCritical_yomal_256{border-top-color:var(--alto-sem-color-border-critical)}._borderTopColourInformation_yomal_260{border-top-color:var(--alto-sem-color-border-information)}._borderTopColourInverse_yomal_264{border-top-color:var(--alto-sem-color-border-inverse)}._borderTopColourSuccess_yomal_268{border-top-color:var(--alto-sem-color-border-success)}._borderTopColourWarning_yomal_272{border-top-color:var(--alto-sem-color-border-warning)}._borderTopColourWhite_yomal_276{border-top-color:var(--alto-sem-color-border-white)}._borderRightWidthNone_yomal_282{border-right-width:var(--alto-sem-border-width-none)}._borderRightWidthXs_yomal_286{border-right-width:var(--alto-sem-border-width-xs)}._borderRightWidthSm_yomal_290{border-right-width:var(--alto-sem-border-width-sm)}._borderRightWidthMd_yomal_294{border-right-width:var(--alto-sem-border-width-md)}._borderRightWidthLg_yomal_298{border-right-width:var(--alto-sem-border-width-lg)}._borderRightWidthXl_yomal_302{border-right-width:var(--alto-sem-border-width-xl)}._borderRightRadiusNone_yomal_306{border-bottom-right-radius:var(--alto-sem-radius-none);border-top-right-radius:var(--alto-sem-radius-none)}._borderRightRadius6xs_yomal_311{border-bottom-right-radius:var(--alto-sem-radius-6xs);border-top-right-radius:var(--alto-sem-radius-6xs)}._borderRightRadius5xs_yomal_316{border-bottom-right-radius:var(--alto-sem-radius-5xs);border-top-right-radius:var(--alto-sem-radius-5xs)}._borderRightRadius4xs_yomal_321{border-bottom-right-radius:var(--alto-sem-radius-4xs);border-top-right-radius:var(--alto-sem-radius-4xs)}._borderRightRadius3xs_yomal_326{border-bottom-right-radius:var(--alto-sem-radius-3xs);border-top-right-radius:var(--alto-sem-radius-3xs)}._borderRightRadius2xs_yomal_331{border-bottom-right-radius:var(--alto-sem-radius-2xs);border-top-right-radius:var(--alto-sem-radius-2xs)}._borderRightRadiusXs_yomal_336{border-bottom-right-radius:var(--alto-sem-radius-xs);border-top-right-radius:var(--alto-sem-radius-xs)}._borderRightRadiusSm_yomal_341{border-bottom-right-radius:var(--alto-sem-radius-sm);border-top-right-radius:var(--alto-sem-radius-sm)}._borderRightRadiusMd_yomal_346{border-bottom-right-radius:var(--alto-sem-radius-md);border-top-right-radius:var(--alto-sem-radius-md)}._borderRightRadiusLg_yomal_351{border-bottom-right-radius:var(--alto-sem-radius-lg);border-top-right-radius:var(--alto-sem-radius-lg)}._borderRightRadiusXl_yomal_356{border-bottom-right-radius:var(--alto-sem-radius-xl);border-top-right-radius:var(--alto-sem-radius-xl)}._borderRightRadiusCircle_yomal_361{border-bottom-right-radius:var(--alto-sem-radius-circle);border-top-right-radius:var(--alto-sem-radius-circle)}._borderRightRadiusCard_yomal_366{border-bottom-right-radius:var(--alto-card-radius);border-top-right-radius:var(--alto-card-radius)}._borderRightStyleNone_yomal_371{border-right-style:none}._borderRightStyleSolid_yomal_375{border-right-style:solid}._borderRightStyleDashed_yomal_379{border-right-style:dashed}._borderRightColourNone_yomal_383{border-right-color:transparent}._borderRightColourSecondary_yomal_387{border-right-color:var(--alto-sem-color-border-secondary)}._borderRightColourTertiary_yomal_391{border-right-color:var(--alto-sem-color-border-tertiary)}._borderRightColourAccent_yomal_395{border-right-color:var(--alto-sem-color-border-accent)}._borderRightColourCaution_yomal_399{border-right-color:var(--alto-sem-color-border-caution)}._borderRightColourCritical_yomal_403{border-right-color:var(--alto-sem-color-border-critical)}._borderRightColourInformation_yomal_407{border-right-color:var(--alto-sem-color-border-information)}._borderRightColourInverse_yomal_411{border-right-color:var(--alto-sem-color-border-inverse)}._borderRightColourSuccess_yomal_415{border-right-color:var(--alto-sem-color-border-success)}._borderRightColourWarning_yomal_419{border-right-color:var(--alto-sem-color-border-warning)}._borderRightColourWhite_yomal_423{border-right-color:var(--alto-sem-color-border-white)}._borderBottomWidthNone_yomal_429{border-bottom-width:var(--alto-sem-border-width-none)}._borderBottomWidthXs_yomal_433{border-bottom-width:var(--alto-sem-border-width-xs)}._borderBottomWidthSm_yomal_437{border-bottom-width:var(--alto-sem-border-width-sm)}._borderBottomWidthMd_yomal_441{border-bottom-width:var(--alto-sem-border-width-md)}._borderBottomWidthLg_yomal_445{border-bottom-width:var(--alto-sem-border-width-lg)}._borderBottomWidthXl_yomal_449{border-bottom-width:var(--alto-sem-border-width-xl)}._borderBottomRadiusNone_yomal_453{border-bottom-left-radius:var(--alto-sem-radius-none);border-bottom-right-radius:var(--alto-sem-radius-none)}._borderBottomRadius6xs_yomal_458{border-bottom-left-radius:var(--alto-sem-radius-6xs);border-bottom-right-radius:var(--alto-sem-radius-6xs)}._borderBottomRadius5xs_yomal_463{border-bottom-left-radius:var(--alto-sem-radius-5xs);border-bottom-right-radius:var(--alto-sem-radius-5xs)}._borderBottomRadius4xs_yomal_468{border-bottom-left-radius:var(--alto-sem-radius-4xs);border-bottom-right-radius:var(--alto-sem-radius-4xs)}._borderBottomRadius3xs_yomal_473{border-bottom-left-radius:var(--alto-sem-radius-3xs);border-bottom-right-radius:var(--alto-sem-radius-3xs)}._borderBottomRadius2xs_yomal_478{border-bottom-left-radius:var(--alto-sem-radius-2xs);border-bottom-right-radius:var(--alto-sem-radius-2xs)}._borderBottomRadiusXs_yomal_483{border-bottom-left-radius:var(--alto-sem-radius-xs);border-bottom-right-radius:var(--alto-sem-radius-xs)}._borderBottomRadiusSm_yomal_488{border-bottom-left-radius:var(--alto-sem-radius-sm);border-bottom-right-radius:var(--alto-sem-radius-sm)}._borderBottomRadiusMd_yomal_493{border-bottom-left-radius:var(--alto-sem-radius-md);border-bottom-right-radius:var(--alto-sem-radius-md)}._borderBottomRadiusLg_yomal_498{border-bottom-left-radius:var(--alto-sem-radius-lg);border-bottom-right-radius:var(--alto-sem-radius-lg)}._borderBottomRadiusXl_yomal_503{border-bottom-left-radius:var(--alto-sem-radius-xl);border-bottom-right-radius:var(--alto-sem-radius-xl)}._borderBottomRadiusCircle_yomal_508{border-bottom-left-radius:var(--alto-sem-radius-circle);border-bottom-right-radius:var(--alto-sem-radius-circle)}._borderBottomRadiusCard_yomal_513{border-bottom-left-radius:var(--alto-card-radius);border-bottom-right-radius:var(--alto-card-radius)}._borderBottomStyleNone_yomal_518{border-bottom-style:none}._borderBottomStyleSolid_yomal_522{border-bottom-style:solid}._borderBottomStyleDashed_yomal_526{border-bottom-style:dashed}._borderBottomColourNone_yomal_530{border-bottom-color:transparent}._borderBottomColourSecondary_yomal_534{border-bottom-color:var(--alto-sem-color-border-secondary)}._borderBottomColourTertiary_yomal_538{border-bottom-color:var(--alto-sem-color-border-tertiary)}._borderBottomColourAccent_yomal_542{border-bottom-color:var(--alto-sem-color-border-accent)}._borderBottomColourCaution_yomal_546{border-bottom-color:var(--alto-sem-color-border-caution)}._borderBottomColourCritical_yomal_550{border-bottom-color:var(--alto-sem-color-border-critical)}._borderBottomColourInformation_yomal_554{border-bottom-color:var(--alto-sem-color-border-information)}._borderBottomColourInverse_yomal_558{border-bottom-color:var(--alto-sem-color-border-inverse)}._borderBottomColourSuccess_yomal_562{border-bottom-color:var(--alto-sem-color-border-success)}._borderBottomColourWarning_yomal_566{border-bottom-color:var(--alto-sem-color-border-warning)}._borderBottomColourWhite_yomal_570{border-bottom-color:var(--alto-sem-color-border-white)}._borderLeftWidthNone_yomal_576{border-left-width:var(--alto-sem-border-width-none)}._borderLeftWidthXs_yomal_580{border-left-width:var(--alto-sem-border-width-xs)}._borderLeftWidthSm_yomal_584{border-left-width:var(--alto-sem-border-width-sm)}._borderLeftWidthMd_yomal_588{border-left-width:var(--alto-sem-border-width-md)}._borderLeftWidthLg_yomal_592{border-left-width:var(--alto-sem-border-width-lg)}._borderLeftWidthXl_yomal_596{border-left-width:var(--alto-sem-border-width-xl)}._borderLeftRadiusNone_yomal_600{border-bottom-left-radius:var(--alto-sem-radius-none);border-top-left-radius:var(--alto-sem-radius-none)}._borderLeftRadius6xs_yomal_605{border-bottom-left-radius:var(--alto-sem-radius-6xs);border-top-left-radius:var(--alto-sem-radius-6xs)}._borderLeftRadius5xs_yomal_610{border-bottom-left-radius:var(--alto-sem-radius-5xs);border-top-left-radius:var(--alto-sem-radius-5xs)}._borderLeftRadius4xs_yomal_615{border-bottom-left-radius:var(--alto-sem-radius-4xs);border-top-left-radius:var(--alto-sem-radius-4xs)}._borderLeftRadius3xs_yomal_620{border-bottom-left-radius:var(--alto-sem-radius-3xs);border-top-left-radius:var(--alto-sem-radius-3xs)}._borderLeftRadius2xs_yomal_625{border-bottom-left-radius:var(--alto-sem-radius-2xs);border-top-left-radius:var(--alto-sem-radius-2xs)}._borderLeftRadiusXs_yomal_630{border-bottom-left-radius:var(--alto-sem-radius-xs);border-top-left-radius:var(--alto-sem-radius-xs)}._borderLeftRadiusSm_yomal_635{border-bottom-left-radius:var(--alto-sem-radius-sm);border-top-left-radius:var(--alto-sem-radius-sm)}._borderLeftRadiusMd_yomal_640{border-bottom-left-radius:var(--alto-sem-radius-md);border-top-left-radius:var(--alto-sem-radius-md)}._borderLeftRadiusLg_yomal_645{border-bottom-left-radius:var(--alto-sem-radius-lg);border-top-left-radius:var(--alto-sem-radius-lg)}._borderLeftRadiusXl_yomal_650{border-bottom-left-radius:var(--alto-sem-radius-xl);border-top-left-radius:var(--alto-sem-radius-xl)}._borderLeftRadiusCircle_yomal_655{border-bottom-left-radius:var(--alto-sem-radius-circle);border-top-left-radius:var(--alto-sem-radius-circle)}._borderLeftRadiusCard_yomal_660{border-bottom-left-radius:var(--alto-card-radius);border-top-left-radius:var(--alto-card-radius)}._borderLeftStyleNone_yomal_665{border-left-style:none}._borderLeftStyleSolid_yomal_669{border-left-style:solid}._borderLeftStyleDashed_yomal_673{border-left-style:dashed}._borderLeftColourNone_yomal_677{border-left-color:transparent}._borderLeftColourSecondary_yomal_681{border-left-color:var(--alto-sem-color-border-secondary)}._borderLeftColourTertiary_yomal_685{border-left-color:var(--alto-sem-color-border-tertiary)}._borderLeftColourAccent_yomal_689{border-left-color:var(--alto-sem-color-border-accent)}._borderLeftColourCaution_yomal_693{border-left-color:var(--alto-sem-color-border-caution)}._borderLeftColourCritical_yomal_697{border-left-color:var(--alto-sem-color-border-critical)}._borderLeftColourInformation_yomal_701{border-left-color:var(--alto-sem-color-border-information)}._borderLeftColourInverse_yomal_705{border-left-color:var(--alto-sem-color-border-inverse)}._borderLeftColourSuccess_yomal_709{border-left-color:var(--alto-sem-color-border-success)}._borderLeftColourWarning_yomal_713{border-left-color:var(--alto-sem-color-border-warning)}._borderLeftColourWhite_yomal_717{border-left-color:var(--alto-sem-color-border-white)}
|
|
1
|
+
._borderRadiusNone_1dpvv_1{border-radius:var(--alto-sem-radius-none)}._borderRadius6xs_1dpvv_5{border-radius:var(--alto-sem-radius-6xs)}._borderRadius5xs_1dpvv_9{border-radius:var(--alto-sem-radius-5xs)}._borderRadius4xs_1dpvv_13{border-radius:var(--alto-sem-radius-4xs)}._borderRadius3xs_1dpvv_17{border-radius:var(--alto-sem-radius-3xs)}._borderRadius2xs_1dpvv_21{border-radius:var(--alto-sem-radius-2xs)}._borderRadiusXs_1dpvv_25{border-radius:var(--alto-sem-radius-xs)}._borderRadiusSm_1dpvv_29{border-radius:var(--alto-sem-radius-sm)}._borderRadiusMd_1dpvv_33{border-radius:var(--alto-sem-radius-md)}._borderRadiusLg_1dpvv_37{border-radius:var(--alto-sem-radius-lg)}._borderRadiusXl_1dpvv_41{border-radius:var(--alto-sem-radius-xl)}._borderRadiusCircle_1dpvv_45{border-radius:var(--alto-sem-radius-circle)}._borderRadiusCard_1dpvv_49{border-radius:var(--alto-card-radius)}._borderWidthNone_1dpvv_53{border-width:var(--alto-sem-border-width-none)}._borderWidthXs_1dpvv_57{border-width:var(--alto-sem-border-width-xs)}._borderWidthSm_1dpvv_61{border-width:var(--alto-sem-border-width-sm)}._borderWidthMd_1dpvv_65{border-width:var(--alto-sem-border-width-md)}._borderWidthLg_1dpvv_69{border-width:var(--alto-sem-border-width-lg)}._borderWidthXl_1dpvv_73{border-width:var(--alto-sem-border-width-xl)}._borderStyleNone_1dpvv_77{border-style:none}._borderStyleSolid_1dpvv_81{border-style:solid}._borderStyleDashed_1dpvv_85{border-style:dashed}._borderColourNone_1dpvv_89{border-color:transparent}._borderColourSecondary_1dpvv_93{border-color:var(--alto-sem-color-border-secondary)}._borderColourTertiary_1dpvv_97{border-color:var(--alto-sem-color-border-tertiary)}._borderColourAccent_1dpvv_101{border-color:var(--alto-sem-color-border-accent)}._borderColourCaution_1dpvv_105{border-color:var(--alto-sem-color-border-caution)}._borderColourCritical_1dpvv_109{border-color:var(--alto-sem-color-border-critical)}._borderColourInformation_1dpvv_113{border-color:var(--alto-sem-color-border-information)}._borderColourInverse_1dpvv_117{border-color:var(--alto-sem-color-border-inverse)}._borderColourSuccess_1dpvv_121{border-color:var(--alto-sem-color-border-success)}._borderColourWarning_1dpvv_125{border-color:var(--alto-sem-color-border-warning)}._borderColourWhite_1dpvv_129{border-color:var(--alto-sem-color-border-white)}._borderTopWidthNone_1dpvv_135{border-top-width:var(--alto-sem-border-width-none)}._borderTopWidthXs_1dpvv_139{border-top-width:var(--alto-sem-border-width-xs)}._borderTopWidthSm_1dpvv_143{border-top-width:var(--alto-sem-border-width-sm)}._borderTopWidthMd_1dpvv_147{border-top-width:var(--alto-sem-border-width-md)}._borderTopWidthLg_1dpvv_151{border-top-width:var(--alto-sem-border-width-lg)}._borderTopWidthXl_1dpvv_155{border-top-width:var(--alto-sem-border-width-xl)}._borderTopRadiusNone_1dpvv_159{border-top-left-radius:var(--alto-sem-radius-none);border-top-right-radius:var(--alto-sem-radius-none)}._borderTopRadius6xs_1dpvv_164{border-top-left-radius:var(--alto-sem-radius-6xs);border-top-right-radius:var(--alto-sem-radius-6xs)}._borderTopRadius5xs_1dpvv_169{border-top-left-radius:var(--alto-sem-radius-5xs);border-top-right-radius:var(--alto-sem-radius-5xs)}._borderTopRadius4xs_1dpvv_174{border-top-left-radius:var(--alto-sem-radius-4xs);border-top-right-radius:var(--alto-sem-radius-4xs)}._borderTopRadius3xs_1dpvv_179{border-top-left-radius:var(--alto-sem-radius-3xs);border-top-right-radius:var(--alto-sem-radius-3xs)}._borderTopRadius2xs_1dpvv_184{border-top-left-radius:var(--alto-sem-radius-2xs);border-top-right-radius:var(--alto-sem-radius-2xs)}._borderTopRadiusXs_1dpvv_189{border-top-left-radius:var(--alto-sem-radius-xs);border-top-right-radius:var(--alto-sem-radius-xs)}._borderTopRadiusSm_1dpvv_194{border-top-left-radius:var(--alto-sem-radius-sm);border-top-right-radius:var(--alto-sem-radius-sm)}._borderTopRadiusMd_1dpvv_199{border-top-left-radius:var(--alto-sem-radius-md);border-top-right-radius:var(--alto-sem-radius-md)}._borderTopRadiusLg_1dpvv_204{border-top-left-radius:var(--alto-sem-radius-lg);border-top-right-radius:var(--alto-sem-radius-lg)}._borderTopRadiusXl_1dpvv_209{border-top-left-radius:var(--alto-sem-radius-xl);border-top-right-radius:var(--alto-sem-radius-xl)}._borderTopRadiusCircle_1dpvv_214{border-top-left-radius:var(--alto-sem-radius-circle);border-top-right-radius:var(--alto-sem-radius-circle)}._borderTopRadiusCard_1dpvv_219{border-top-left-radius:var(--alto-card-radius);border-top-right-radius:var(--alto-card-radius)}._borderTopStyleNone_1dpvv_224{border-top-style:none}._borderTopStyleSolid_1dpvv_228{border-top-style:solid}._borderTopStyleDashed_1dpvv_232{border-top-style:dashed}._borderTopColourNone_1dpvv_236{border-top-color:transparent}._borderTopColourSecondary_1dpvv_240{border-top-color:var(--alto-sem-color-border-secondary)}._borderTopColourTertiary_1dpvv_244{border-top-color:var(--alto-sem-color-border-tertiary)}._borderTopColourAccent_1dpvv_248{border-top-color:var(--alto-sem-color-border-accent)}._borderTopColourCaution_1dpvv_252{border-top-color:var(--alto-sem-color-border-caution)}._borderTopColourCritical_1dpvv_256{border-top-color:var(--alto-sem-color-border-critical)}._borderTopColourInformation_1dpvv_260{border-top-color:var(--alto-sem-color-border-information)}._borderTopColourInverse_1dpvv_264{border-top-color:var(--alto-sem-color-border-inverse)}._borderTopColourSuccess_1dpvv_268{border-top-color:var(--alto-sem-color-border-success)}._borderTopColourWarning_1dpvv_272{border-top-color:var(--alto-sem-color-border-warning)}._borderTopColourWhite_1dpvv_276{border-top-color:var(--alto-sem-color-border-white)}._borderRightWidthNone_1dpvv_282{border-right-width:var(--alto-sem-border-width-none)}._borderRightWidthXs_1dpvv_286{border-right-width:var(--alto-sem-border-width-xs)}._borderRightWidthSm_1dpvv_290{border-right-width:var(--alto-sem-border-width-sm)}._borderRightWidthMd_1dpvv_294{border-right-width:var(--alto-sem-border-width-md)}._borderRightWidthLg_1dpvv_298{border-right-width:var(--alto-sem-border-width-lg)}._borderRightWidthXl_1dpvv_302{border-right-width:var(--alto-sem-border-width-xl)}._borderRightRadiusNone_1dpvv_306{border-bottom-right-radius:var(--alto-sem-radius-none);border-top-right-radius:var(--alto-sem-radius-none)}._borderRightRadius6xs_1dpvv_311{border-bottom-right-radius:var(--alto-sem-radius-6xs);border-top-right-radius:var(--alto-sem-radius-6xs)}._borderRightRadius5xs_1dpvv_316{border-bottom-right-radius:var(--alto-sem-radius-5xs);border-top-right-radius:var(--alto-sem-radius-5xs)}._borderRightRadius4xs_1dpvv_321{border-bottom-right-radius:var(--alto-sem-radius-4xs);border-top-right-radius:var(--alto-sem-radius-4xs)}._borderRightRadius3xs_1dpvv_326{border-bottom-right-radius:var(--alto-sem-radius-3xs);border-top-right-radius:var(--alto-sem-radius-3xs)}._borderRightRadius2xs_1dpvv_331{border-bottom-right-radius:var(--alto-sem-radius-2xs);border-top-right-radius:var(--alto-sem-radius-2xs)}._borderRightRadiusXs_1dpvv_336{border-bottom-right-radius:var(--alto-sem-radius-xs);border-top-right-radius:var(--alto-sem-radius-xs)}._borderRightRadiusSm_1dpvv_341{border-bottom-right-radius:var(--alto-sem-radius-sm);border-top-right-radius:var(--alto-sem-radius-sm)}._borderRightRadiusMd_1dpvv_346{border-bottom-right-radius:var(--alto-sem-radius-md);border-top-right-radius:var(--alto-sem-radius-md)}._borderRightRadiusLg_1dpvv_351{border-bottom-right-radius:var(--alto-sem-radius-lg);border-top-right-radius:var(--alto-sem-radius-lg)}._borderRightRadiusXl_1dpvv_356{border-bottom-right-radius:var(--alto-sem-radius-xl);border-top-right-radius:var(--alto-sem-radius-xl)}._borderRightRadiusCircle_1dpvv_361{border-bottom-right-radius:var(--alto-sem-radius-circle);border-top-right-radius:var(--alto-sem-radius-circle)}._borderRightRadiusCard_1dpvv_366{border-bottom-right-radius:var(--alto-card-radius);border-top-right-radius:var(--alto-card-radius)}._borderRightStyleNone_1dpvv_371{border-right-style:none}._borderRightStyleSolid_1dpvv_375{border-right-style:solid}._borderRightStyleDashed_1dpvv_379{border-right-style:dashed}._borderRightColourNone_1dpvv_383{border-right-color:transparent}._borderRightColourSecondary_1dpvv_387{border-right-color:var(--alto-sem-color-border-secondary)}._borderRightColourTertiary_1dpvv_391{border-right-color:var(--alto-sem-color-border-tertiary)}._borderRightColourAccent_1dpvv_395{border-right-color:var(--alto-sem-color-border-accent)}._borderRightColourCaution_1dpvv_399{border-right-color:var(--alto-sem-color-border-caution)}._borderRightColourCritical_1dpvv_403{border-right-color:var(--alto-sem-color-border-critical)}._borderRightColourInformation_1dpvv_407{border-right-color:var(--alto-sem-color-border-information)}._borderRightColourInverse_1dpvv_411{border-right-color:var(--alto-sem-color-border-inverse)}._borderRightColourSuccess_1dpvv_415{border-right-color:var(--alto-sem-color-border-success)}._borderRightColourWarning_1dpvv_419{border-right-color:var(--alto-sem-color-border-warning)}._borderRightColourWhite_1dpvv_423{border-right-color:var(--alto-sem-color-border-white)}._borderBottomWidthNone_1dpvv_429{border-bottom-width:var(--alto-sem-border-width-none)}._borderBottomWidthXs_1dpvv_433{border-bottom-width:var(--alto-sem-border-width-xs)}._borderBottomWidthSm_1dpvv_437{border-bottom-width:var(--alto-sem-border-width-sm)}._borderBottomWidthMd_1dpvv_441{border-bottom-width:var(--alto-sem-border-width-md)}._borderBottomWidthLg_1dpvv_445{border-bottom-width:var(--alto-sem-border-width-lg)}._borderBottomWidthXl_1dpvv_449{border-bottom-width:var(--alto-sem-border-width-xl)}._borderBottomRadiusNone_1dpvv_453{border-bottom-left-radius:var(--alto-sem-radius-none);border-bottom-right-radius:var(--alto-sem-radius-none)}._borderBottomRadius6xs_1dpvv_458{border-bottom-left-radius:var(--alto-sem-radius-6xs);border-bottom-right-radius:var(--alto-sem-radius-6xs)}._borderBottomRadius5xs_1dpvv_463{border-bottom-left-radius:var(--alto-sem-radius-5xs);border-bottom-right-radius:var(--alto-sem-radius-5xs)}._borderBottomRadius4xs_1dpvv_468{border-bottom-left-radius:var(--alto-sem-radius-4xs);border-bottom-right-radius:var(--alto-sem-radius-4xs)}._borderBottomRadius3xs_1dpvv_473{border-bottom-left-radius:var(--alto-sem-radius-3xs);border-bottom-right-radius:var(--alto-sem-radius-3xs)}._borderBottomRadius2xs_1dpvv_478{border-bottom-left-radius:var(--alto-sem-radius-2xs);border-bottom-right-radius:var(--alto-sem-radius-2xs)}._borderBottomRadiusXs_1dpvv_483{border-bottom-left-radius:var(--alto-sem-radius-xs);border-bottom-right-radius:var(--alto-sem-radius-xs)}._borderBottomRadiusSm_1dpvv_488{border-bottom-left-radius:var(--alto-sem-radius-sm);border-bottom-right-radius:var(--alto-sem-radius-sm)}._borderBottomRadiusMd_1dpvv_493{border-bottom-left-radius:var(--alto-sem-radius-md);border-bottom-right-radius:var(--alto-sem-radius-md)}._borderBottomRadiusLg_1dpvv_498{border-bottom-left-radius:var(--alto-sem-radius-lg);border-bottom-right-radius:var(--alto-sem-radius-lg)}._borderBottomRadiusXl_1dpvv_503{border-bottom-left-radius:var(--alto-sem-radius-xl);border-bottom-right-radius:var(--alto-sem-radius-xl)}._borderBottomRadiusCircle_1dpvv_508{border-bottom-left-radius:var(--alto-sem-radius-circle);border-bottom-right-radius:var(--alto-sem-radius-circle)}._borderBottomRadiusCard_1dpvv_513{border-bottom-left-radius:var(--alto-card-radius);border-bottom-right-radius:var(--alto-card-radius)}._borderBottomStyleNone_1dpvv_518{border-bottom-style:none}._borderBottomStyleSolid_1dpvv_522{border-bottom-style:solid}._borderBottomStyleDashed_1dpvv_526{border-bottom-style:dashed}._borderBottomColourNone_1dpvv_530{border-bottom-color:transparent}._borderBottomColourSecondary_1dpvv_534{border-bottom-color:var(--alto-sem-color-border-secondary)}._borderBottomColourTertiary_1dpvv_538{border-bottom-color:var(--alto-sem-color-border-tertiary)}._borderBottomColourAccent_1dpvv_542{border-bottom-color:var(--alto-sem-color-border-accent)}._borderBottomColourCaution_1dpvv_546{border-bottom-color:var(--alto-sem-color-border-caution)}._borderBottomColourCritical_1dpvv_550{border-bottom-color:var(--alto-sem-color-border-critical)}._borderBottomColourInformation_1dpvv_554{border-bottom-color:var(--alto-sem-color-border-information)}._borderBottomColourInverse_1dpvv_558{border-bottom-color:var(--alto-sem-color-border-inverse)}._borderBottomColourSuccess_1dpvv_562{border-bottom-color:var(--alto-sem-color-border-success)}._borderBottomColourWarning_1dpvv_566{border-bottom-color:var(--alto-sem-color-border-warning)}._borderBottomColourWhite_1dpvv_570{border-bottom-color:var(--alto-sem-color-border-white)}._borderLeftWidthNone_1dpvv_576{border-left-width:var(--alto-sem-border-width-none)}._borderLeftWidthXs_1dpvv_580{border-left-width:var(--alto-sem-border-width-xs)}._borderLeftWidthSm_1dpvv_584{border-left-width:var(--alto-sem-border-width-sm)}._borderLeftWidthMd_1dpvv_588{border-left-width:var(--alto-sem-border-width-md)}._borderLeftWidthLg_1dpvv_592{border-left-width:var(--alto-sem-border-width-lg)}._borderLeftWidthXl_1dpvv_596{border-left-width:var(--alto-sem-border-width-xl)}._borderLeftRadiusNone_1dpvv_600{border-bottom-left-radius:var(--alto-sem-radius-none);border-top-left-radius:var(--alto-sem-radius-none)}._borderLeftRadius6xs_1dpvv_605{border-bottom-left-radius:var(--alto-sem-radius-6xs);border-top-left-radius:var(--alto-sem-radius-6xs)}._borderLeftRadius5xs_1dpvv_610{border-bottom-left-radius:var(--alto-sem-radius-5xs);border-top-left-radius:var(--alto-sem-radius-5xs)}._borderLeftRadius4xs_1dpvv_615{border-bottom-left-radius:var(--alto-sem-radius-4xs);border-top-left-radius:var(--alto-sem-radius-4xs)}._borderLeftRadius3xs_1dpvv_620{border-bottom-left-radius:var(--alto-sem-radius-3xs);border-top-left-radius:var(--alto-sem-radius-3xs)}._borderLeftRadius2xs_1dpvv_625{border-bottom-left-radius:var(--alto-sem-radius-2xs);border-top-left-radius:var(--alto-sem-radius-2xs)}._borderLeftRadiusXs_1dpvv_630{border-bottom-left-radius:var(--alto-sem-radius-xs);border-top-left-radius:var(--alto-sem-radius-xs)}._borderLeftRadiusSm_1dpvv_635{border-bottom-left-radius:var(--alto-sem-radius-sm);border-top-left-radius:var(--alto-sem-radius-sm)}._borderLeftRadiusMd_1dpvv_640{border-bottom-left-radius:var(--alto-sem-radius-md);border-top-left-radius:var(--alto-sem-radius-md)}._borderLeftRadiusLg_1dpvv_645{border-bottom-left-radius:var(--alto-sem-radius-lg);border-top-left-radius:var(--alto-sem-radius-lg)}._borderLeftRadiusXl_1dpvv_650{border-bottom-left-radius:var(--alto-sem-radius-xl);border-top-left-radius:var(--alto-sem-radius-xl)}._borderLeftRadiusCircle_1dpvv_655{border-bottom-left-radius:var(--alto-sem-radius-circle);border-top-left-radius:var(--alto-sem-radius-circle)}._borderLeftRadiusCard_1dpvv_660{border-bottom-left-radius:var(--alto-card-radius);border-top-left-radius:var(--alto-card-radius)}._borderLeftStyleNone_1dpvv_665{border-left-style:none}._borderLeftStyleSolid_1dpvv_669{border-left-style:solid}._borderLeftStyleDashed_1dpvv_673{border-left-style:dashed}._borderLeftColourNone_1dpvv_677{border-left-color:transparent}._borderLeftColourSecondary_1dpvv_681{border-left-color:var(--alto-sem-color-border-secondary)}._borderLeftColourTertiary_1dpvv_685{border-left-color:var(--alto-sem-color-border-tertiary)}._borderLeftColourAccent_1dpvv_689{border-left-color:var(--alto-sem-color-border-accent)}._borderLeftColourCaution_1dpvv_693{border-left-color:var(--alto-sem-color-border-caution)}._borderLeftColourCritical_1dpvv_697{border-left-color:var(--alto-sem-color-border-critical)}._borderLeftColourInformation_1dpvv_701{border-left-color:var(--alto-sem-color-border-information)}._borderLeftColourInverse_1dpvv_705{border-left-color:var(--alto-sem-color-border-inverse)}._borderLeftColourSuccess_1dpvv_709{border-left-color:var(--alto-sem-color-border-success)}._borderLeftColourWarning_1dpvv_713{border-left-color:var(--alto-sem-color-border-warning)}._borderLeftColourWhite_1dpvv_717{border-left-color:var(--alto-sem-color-border-white)}._borderRadiusTopLeftNone_1dpvv_723{border-top-left-radius:var(--alto-sem-radius-none)}._borderRadiusTopLeft6xs_1dpvv_727{border-top-left-radius:var(--alto-sem-radius-6xs)}._borderRadiusTopLeft5xs_1dpvv_731{border-top-left-radius:var(--alto-sem-radius-5xs)}._borderRadiusTopLeft4xs_1dpvv_735{border-top-left-radius:var(--alto-sem-radius-4xs)}._borderRadiusTopLeft3xs_1dpvv_739{border-top-left-radius:var(--alto-sem-radius-3xs)}._borderRadiusTopLeft2xs_1dpvv_743{border-top-left-radius:var(--alto-sem-radius-2xs)}._borderRadiusTopLeftXs_1dpvv_747{border-top-left-radius:var(--alto-sem-radius-xs)}._borderRadiusTopLeftSm_1dpvv_751{border-top-left-radius:var(--alto-sem-radius-sm)}._borderRadiusTopLeftMd_1dpvv_755{border-top-left-radius:var(--alto-sem-radius-md)}._borderRadiusTopLeftLg_1dpvv_759{border-top-left-radius:var(--alto-sem-radius-lg)}._borderRadiusTopLeftXl_1dpvv_763{border-top-left-radius:var(--alto-sem-radius-xl)}._borderRadiusTopLeftCircle_1dpvv_767{border-top-left-radius:var(--alto-sem-radius-circle)}._borderRadiusTopLeftCard_1dpvv_771{border-top-left-radius:var(--alto-card-radius)}._borderRadiusTopRightNone_1dpvv_775{border-top-right-radius:var(--alto-sem-radius-none)}._borderRadiusTopRight6xs_1dpvv_779{border-top-right-radius:var(--alto-sem-radius-6xs)}._borderRadiusTopRight5xs_1dpvv_783{border-top-right-radius:var(--alto-sem-radius-5xs)}._borderRadiusTopRight4xs_1dpvv_787{border-top-right-radius:var(--alto-sem-radius-4xs)}._borderRadiusTopRight3xs_1dpvv_791{border-top-right-radius:var(--alto-sem-radius-3xs)}._borderRadiusTopRight2xs_1dpvv_795{border-top-right-radius:var(--alto-sem-radius-2xs)}._borderRadiusTopRightXs_1dpvv_799{border-top-right-radius:var(--alto-sem-radius-xs)}._borderRadiusTopRightSm_1dpvv_803{border-top-right-radius:var(--alto-sem-radius-sm)}._borderRadiusTopRightMd_1dpvv_807{border-top-right-radius:var(--alto-sem-radius-md)}._borderRadiusTopRightLg_1dpvv_811{border-top-right-radius:var(--alto-sem-radius-lg)}._borderRadiusTopRightXl_1dpvv_815{border-top-right-radius:var(--alto-sem-radius-xl)}._borderRadiusTopRightCircle_1dpvv_819{border-top-right-radius:var(--alto-sem-radius-circle)}._borderRadiusTopRightCard_1dpvv_823{border-top-right-radius:var(--alto-card-radius)}._borderRadiusBottomLeftNone_1dpvv_827{border-bottom-left-radius:var(--alto-sem-radius-none)}._borderRadiusBottomLeft6xs_1dpvv_831{border-bottom-left-radius:var(--alto-sem-radius-6xs)}._borderRadiusBottomLeft5xs_1dpvv_835{border-bottom-left-radius:var(--alto-sem-radius-5xs)}._borderRadiusBottomLeft4xs_1dpvv_839{border-bottom-left-radius:var(--alto-sem-radius-4xs)}._borderRadiusBottomLeft3xs_1dpvv_843{border-bottom-left-radius:var(--alto-sem-radius-3xs)}._borderRadiusBottomLeft2xs_1dpvv_847{border-bottom-left-radius:var(--alto-sem-radius-2xs)}._borderRadiusBottomLeftXs_1dpvv_851{border-bottom-left-radius:var(--alto-sem-radius-xs)}._borderRadiusBottomLeftSm_1dpvv_855{border-bottom-left-radius:var(--alto-sem-radius-sm)}._borderRadiusBottomLeftMd_1dpvv_859{border-bottom-left-radius:var(--alto-sem-radius-md)}._borderRadiusBottomLeftLg_1dpvv_863{border-bottom-left-radius:var(--alto-sem-radius-lg)}._borderRadiusBottomLeftXl_1dpvv_867{border-bottom-left-radius:var(--alto-sem-radius-xl)}._borderRadiusBottomLeftCircle_1dpvv_871{border-bottom-left-radius:var(--alto-sem-radius-circle)}._borderRadiusBottomLeftCard_1dpvv_875{border-bottom-left-radius:var(--alto-card-radius)}._borderRadiusBottomRightNone_1dpvv_879{border-bottom-right-radius:var(--alto-sem-radius-none)}._borderRadiusBottomRight6xs_1dpvv_883{border-bottom-right-radius:var(--alto-sem-radius-6xs)}._borderRadiusBottomRight5xs_1dpvv_887{border-bottom-right-radius:var(--alto-sem-radius-5xs)}._borderRadiusBottomRight4xs_1dpvv_891{border-bottom-right-radius:var(--alto-sem-radius-4xs)}._borderRadiusBottomRight3xs_1dpvv_895{border-bottom-right-radius:var(--alto-sem-radius-3xs)}._borderRadiusBottomRight2xs_1dpvv_899{border-bottom-right-radius:var(--alto-sem-radius-2xs)}._borderRadiusBottomRightXs_1dpvv_903{border-bottom-right-radius:var(--alto-sem-radius-xs)}._borderRadiusBottomRightSm_1dpvv_907{border-bottom-right-radius:var(--alto-sem-radius-sm)}._borderRadiusBottomRightMd_1dpvv_911{border-bottom-right-radius:var(--alto-sem-radius-md)}._borderRadiusBottomRightLg_1dpvv_915{border-bottom-right-radius:var(--alto-sem-radius-lg)}._borderRadiusBottomRightXl_1dpvv_919{border-bottom-right-radius:var(--alto-sem-radius-xl)}._borderRadiusBottomRightCircle_1dpvv_923{border-bottom-right-radius:var(--alto-sem-radius-circle)}._borderRadiusBottomRightCard_1dpvv_927{border-bottom-right-radius:var(--alto-card-radius)}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,jsx as s}from"react/jsx-runtime";import{AviosCurrency as d}from"../AviosCurrency/AviosCurrency.js";import{c as r}from"../../index-CCUt_dAN.js";import{useMemo as a,isValidElement as i}from"react";import '../../assets/AviosCurrencyBadge.css';const o="_avios-currency-badge__text--xs-bold_1d5jx_78",
|
|
2
|
-
return e("span",{"data-testid":"avios-currency-badge","aria-label":p,role:_||void 0,className:x({size:i,kind:r}),children:[o&&/* @__PURE__ */s("span",{className:m({size:i,bold:
|
|
1
|
+
import{jsxs as e,jsx as s}from"react/jsx-runtime";import{AviosCurrency as d}from"../AviosCurrency/AviosCurrency.js";import{c as r}from"../../index-CCUt_dAN.js";import{useMemo as a,isValidElement as i}from"react";import '../../assets/AviosCurrencyBadge.css';const o="_avios-currency-badge__text--xs-bold_1d5jx_78",c="_avios-currency-badge__text--sm-bold_1d5jx_79",l="_avios-currency-badge__text--md-bold_1d5jx_80",t="_avios-currency-badge__text--lg-bold_1d5jx_81",n="_avios-currency-badge__text--xl-bold_1d5jx_85",_="_avios-currency-badge__text_1d5jx_78",x=r("_avios-currency-badge_1d5jx_1",{variants:{size:{xs:"_avios-currency-badge--xs_1d5jx_28",sm:"_avios-currency-badge--sm_1d5jx_35",md:"_avios-currency-badge--md_1d5jx_47",lg:"_avios-currency-badge--lg_1d5jx_59",xl:"_avios-currency-badge--xl_1d5jx_71"},kind:{collect:"_avios-currency-badge--collect_1d5jx_16",spend:"_avios-currency-badge--spend_1d5jx_21"}},defaultVariants:{size:"md",kind:"collect"}}),m=r(_,{variants:{size:{xs:void 0,sm:void 0,md:void 0,lg:void 0,xl:void 0},bold:{true:void 0,false:void 0}},defaultVariants:{size:"md",bold:!1},compoundVariants:[{size:"xs",bold:!0,className:o},{size:"sm",bold:!0,className:c},{size:"md",bold:!0,className:l},{size:"lg",bold:!0,className:t},{size:"xl",bold:!0,className:n}]}),b=["xs","sm","md","lg","xl"],u={xs:"5xs",sm:"4xs",md:"3xs",lg:"2xs",xl:"xs"};function v(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(v).join(" "):i(e)&&e.props&&e.props.children?v(e.props.children):""}const g=({kind:r="collect",size:i="md",textStart:o,textEnd:c,textStartBold:l=!1,textEndBold:t=!1,ariaLabel:n,role:_,children:b=0,...g})=>{const y=Number(b).toLocaleString(),p=a(()=>{if(n)return n;const e=y??"";return`${v(o)||""} ${e} Avios ${v(c)||""}`.trim()},[n,o,c,y]),j=u[i]??"3xs";/* @__PURE__ */
|
|
2
|
+
return e("span",{"data-testid":"avios-currency-badge","aria-label":p,role:_||void 0,className:x({size:i,kind:r}),children:[o&&/* @__PURE__ */s("span",{className:m({size:i,bold:l}),children:o}),
|
|
3
|
+
/* @__PURE__ */s(d,{"aria-hidden":!0,styleVariant:"collect"===r?"onCollect":"onSpend",size:j,kind:r,...g,children:Number(b)||0}),c&&/* @__PURE__ */s("span",{className:m({size:i,bold:t}),children:c})]})};export{g as AviosCurrencyBadge,b as BADGE_SIZES,g as default,m as textCva};
|
|
3
4
|
//# sourceMappingURL=AviosCurrencyBadge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AviosCurrencyBadge.js","sources":["../../../src/components/AviosCurrencyBadge/AviosCurrencyBadge.tsx"],"sourcesContent":["import styles from './AviosCurrencyBadge.module.css';\nimport AviosCurrency, {\n AviosCurrencyProps,\n} from '../AviosCurrency/AviosCurrency';\nimport { cva } from 'class-variance-authority';\nimport { useMemo, type ReactNode, isValidElement } from 'react';\n\nconst aviosCurrencyBadge = cva(styles['avios-currency-badge'], {\n variants: {\n size: {\n xs: styles['avios-currency-badge--xs'],\n sm: styles['avios-currency-badge--sm'],\n md: styles['avios-currency-badge--md'],\n lg: styles['avios-currency-badge--lg'],\n xl: styles['avios-currency-badge--xl'],\n },\n kind: {\n collect: styles['avios-currency-badge--collect'],\n spend: styles['avios-currency-badge--spend'],\n },\n },\n defaultVariants: {\n size: 'md',\n kind: 'collect',\n },\n});\n\nexport const textCva = cva(styles['avios-currency-badge__text'], {\n variants: {\n // we pull in size so we can fire off the .xs-bold/.sm-bold/etc macros\n size: {\n xs: undefined,\n sm: undefined,\n md: undefined,\n lg: undefined,\n xl: undefined,\n },\n bold: {\n true: undefined,\n false: undefined,\n },\n },\n defaultVariants: {\n size: 'md',\n bold: false,\n },\n compoundVariants: [\n {\n size: 'xs',\n bold: true,\n className: styles['avios-currency-badge__text--xs-bold'],\n },\n {\n size: 'sm',\n bold: true,\n className: styles['avios-currency-badge__text--sm-bold'],\n },\n {\n size: 'md',\n bold: true,\n className: styles['avios-currency-badge__text--md-bold'],\n },\n {\n size: 'lg',\n bold: true,\n className: styles['avios-currency-badge__text--lg-bold'],\n },\n {\n size: 'xl',\n bold: true,\n className: styles['avios-currency-badge__text--xl-bold'],\n },\n ],\n});\n\nexport const BADGE_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\nexport type BadgeSize = (typeof BADGE_SIZES)[number];\n\nexport interface AviosCurrencyBadgeProps\n extends Omit<\n AviosCurrencyProps,\n 'isStrikethrough' | 'decorator' | 'styleVariant'\n > {\n /**\n * The kind of Avios badge (collect or spend)\n * @default 'collect'\n */\n kind?: 'collect' | 'spend';\n /**\n * Additional content to be displayed at the start of the badge\n */\n textStart?: ReactNode;\n /**\n * Additional content to be displayed at the end of the badge\n */\n textEnd?: ReactNode;\n /**\n * Whether the text at the start of the badge should be bold\n * @default false\n */\n textStartBold?: boolean;\n /**\n * Whether the text at the end of the badge should be bold\n * @default false\n */\n textEndBold?: boolean;\n /**\n * Size of the badge\n * @default 'md'\n */\n size?: BadgeSize;\n /**\n * A string representation of the badge's contents, used for accessibility\n * Example: \"Collect 50,000 Avios points\"\n */\n ariaLabel?: string;\n /**\n * ARIA role for the badge container. This should only be used when changes to the currency badge need to be announced.\n */\n role?: string;\n /**\n * Number of Avios points\n */\n children?: number;\n}\n\nconst sizeMap: Record<BadgeSize, AviosCurrencyProps['size']> = {\n xs: '5xs',\n sm: '4xs',\n md: '3xs',\n lg: '2xs',\n xl: 'xs',\n};\n\nfunction extractText(node: ReactNode): string {\n if (typeof node === 'string' || typeof node === 'number') return String(node);\n if (Array.isArray(node)) return node.map(extractText).join(' ');\n if (isValidElement(node) && node.props && node.props.children) {\n return extractText(node.props.children);\n }\n return '';\n}\n\nexport const AviosCurrencyBadge = ({\n kind = 'collect',\n size = 'md',\n textStart,\n textEnd,\n textStartBold = false,\n textEndBold = false,\n ariaLabel,\n role,\n children = 0,\n ...props\n}: AviosCurrencyBadgeProps) => {\n const formattedPoints = children.toLocaleString();\n\n const computedAriaLabel = useMemo(() => {\n if (ariaLabel) return ariaLabel;\n\n const formatted = formattedPoints ?? '';\n const startText = extractText(textStart);\n const endText = extractText(textEnd);\n return `${startText || ''} ${formatted} Avios ${endText || ''}`.trim();\n }, [ariaLabel, textStart, textEnd, formattedPoints]);\n\n const aviosCurrencySize = sizeMap[size] ?? '3xs';\n\n return (\n <span\n data-testid=\"avios-currency-badge\"\n aria-label={computedAriaLabel}\n role={role || undefined}\n className={aviosCurrencyBadge({\n size,\n kind,\n })}\n >\n {textStart && (\n <span className={textCva({ size, bold: textStartBold })}>\n {textStart}\n </span>\n )}\n
|
|
1
|
+
{"version":3,"file":"AviosCurrencyBadge.js","sources":["../../../src/components/AviosCurrencyBadge/AviosCurrencyBadge.tsx"],"sourcesContent":["import styles from './AviosCurrencyBadge.module.css';\nimport AviosCurrency, {\n AviosCurrencyProps,\n} from '../AviosCurrency/AviosCurrency';\nimport { cva } from 'class-variance-authority';\nimport { useMemo, type ReactNode, isValidElement } from 'react';\n\nconst aviosCurrencyBadge = cva(styles['avios-currency-badge'], {\n variants: {\n size: {\n xs: styles['avios-currency-badge--xs'],\n sm: styles['avios-currency-badge--sm'],\n md: styles['avios-currency-badge--md'],\n lg: styles['avios-currency-badge--lg'],\n xl: styles['avios-currency-badge--xl'],\n },\n kind: {\n collect: styles['avios-currency-badge--collect'],\n spend: styles['avios-currency-badge--spend'],\n },\n },\n defaultVariants: {\n size: 'md',\n kind: 'collect',\n },\n});\n\nexport const textCva = cva(styles['avios-currency-badge__text'], {\n variants: {\n // we pull in size so we can fire off the .xs-bold/.sm-bold/etc macros\n size: {\n xs: undefined,\n sm: undefined,\n md: undefined,\n lg: undefined,\n xl: undefined,\n },\n bold: {\n true: undefined,\n false: undefined,\n },\n },\n defaultVariants: {\n size: 'md',\n bold: false,\n },\n compoundVariants: [\n {\n size: 'xs',\n bold: true,\n className: styles['avios-currency-badge__text--xs-bold'],\n },\n {\n size: 'sm',\n bold: true,\n className: styles['avios-currency-badge__text--sm-bold'],\n },\n {\n size: 'md',\n bold: true,\n className: styles['avios-currency-badge__text--md-bold'],\n },\n {\n size: 'lg',\n bold: true,\n className: styles['avios-currency-badge__text--lg-bold'],\n },\n {\n size: 'xl',\n bold: true,\n className: styles['avios-currency-badge__text--xl-bold'],\n },\n ],\n});\n\nexport const BADGE_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\nexport type BadgeSize = (typeof BADGE_SIZES)[number];\n\nexport interface AviosCurrencyBadgeProps\n extends Omit<\n AviosCurrencyProps,\n 'isStrikethrough' | 'decorator' | 'styleVariant'\n > {\n /**\n * The kind of Avios badge (collect or spend)\n * @default 'collect'\n */\n kind?: 'collect' | 'spend';\n /**\n * Additional content to be displayed at the start of the badge\n */\n textStart?: ReactNode;\n /**\n * Additional content to be displayed at the end of the badge\n */\n textEnd?: ReactNode;\n /**\n * Whether the text at the start of the badge should be bold\n * @default false\n */\n textStartBold?: boolean;\n /**\n * Whether the text at the end of the badge should be bold\n * @default false\n */\n textEndBold?: boolean;\n /**\n * Size of the badge\n * @default 'md'\n */\n size?: BadgeSize;\n /**\n * A string representation of the badge's contents, used for accessibility\n * Example: \"Collect 50,000 Avios points\"\n */\n ariaLabel?: string;\n /**\n * ARIA role for the badge container. This should only be used when changes to the currency badge need to be announced.\n */\n role?: string;\n /**\n * Number of Avios points\n */\n children?: number;\n}\n\nconst sizeMap: Record<BadgeSize, AviosCurrencyProps['size']> = {\n xs: '5xs',\n sm: '4xs',\n md: '3xs',\n lg: '2xs',\n xl: 'xs',\n};\n\nfunction extractText(node: ReactNode): string {\n if (typeof node === 'string' || typeof node === 'number') return String(node);\n if (Array.isArray(node)) return node.map(extractText).join(' ');\n if (isValidElement(node) && node.props && node.props.children) {\n return extractText(node.props.children);\n }\n return '';\n}\n\nexport const AviosCurrencyBadge = ({\n kind = 'collect',\n size = 'md',\n textStart,\n textEnd,\n textStartBold = false,\n textEndBold = false,\n ariaLabel,\n role,\n children = 0,\n ...props\n}: AviosCurrencyBadgeProps) => {\n const formattedPoints = Number(children).toLocaleString();\n\n const computedAriaLabel = useMemo(() => {\n if (ariaLabel) return ariaLabel;\n\n const formatted = formattedPoints ?? '';\n const startText = extractText(textStart);\n const endText = extractText(textEnd);\n return `${startText || ''} ${formatted} Avios ${endText || ''}`.trim();\n }, [ariaLabel, textStart, textEnd, formattedPoints]);\n\n const aviosCurrencySize = sizeMap[size] ?? '3xs';\n\n return (\n <span\n data-testid=\"avios-currency-badge\"\n aria-label={computedAriaLabel}\n role={role || undefined}\n className={aviosCurrencyBadge({\n size,\n kind,\n })}\n >\n {textStart && (\n <span className={textCva({ size, bold: textStartBold })}>\n {textStart}\n </span>\n )}\n <AviosCurrency\n aria-hidden\n styleVariant={kind === 'collect' ? 'onCollect' : 'onSpend'}\n size={aviosCurrencySize}\n kind={kind}\n {...props}\n >\n {Number(children) || 0}\n </AviosCurrency>\n {textEnd && (\n <span className={textCva({ size, bold: textEndBold })}>{textEnd}</span>\n )}\n </span>\n );\n};\n\nexport default AviosCurrencyBadge;\n"],"names":["aviosCurrencyBadge","cva","variants","size","xs","sm","md","lg","xl","kind","collect","spend","defaultVariants","textCva","styles","bold","true","false","compoundVariants","className","BADGE_SIZES","sizeMap","extractText","node","String","Array","isArray","map","join","isValidElement","props","children","AviosCurrencyBadge","textStart","textEnd","textStartBold","textEndBold","ariaLabel","role","formattedPoints","Number","toLocaleString","computedAriaLabel","useMemo","formatted","trim","aviosCurrencySize","jsxs","jsx","AviosCurrency","styleVariant"],"mappings":"6fAOMA,EAAqBC,kCAAoC,CAC7DC,SAAU,CACRC,KAAM,CACJC,wCACAC,wCACAC,wCACAC,wCACAC,yCAEFC,KAAM,CACJC,kDACAC,gDAGJC,gBAAiB,CACfT,KAAM,KACNM,KAAM,aAIGI,EAAUZ,EAAIa,EAAsC,CAC/DZ,SAAU,CAERC,KAAM,CACJC,QAAI,EACJC,QAAI,EACJC,QAAI,EACJC,QAAI,EACJC,QAAI,GAENO,KAAM,CACJC,UAAM,EACNC,WAAO,IAGXL,gBAAiB,CACfT,KAAM,KACNY,MAAM,GAERG,iBAAkB,CAChB,CACEf,KAAM,KACNY,MAAM,EACNI,UAAWL,GAEb,CACEX,KAAM,KACNY,MAAM,EACNI,UAAWL,GAEb,CACEX,KAAM,KACNY,MAAM,EACNI,UAAWL,GAEb,CACEX,KAAM,KACNY,MAAM,EACNI,UAAWL,GAEb,CACEX,KAAM,KACNY,MAAM,EACNI,UAAWL,MAKJM,EAAc,CAAC,KAAM,KAAM,KAAM,KAAM,MAmD9CC,EAAyD,CAC7DjB,GAAI,MACJC,GAAI,MACJC,GAAI,MACJC,GAAI,MACJC,GAAI,MAGN,SAASc,EAAYC,GACnB,MAAoB,iBAATA,GAAqC,iBAATA,EAA0BC,OAAOD,GACpEE,MAAMC,QAAQH,GAAcA,EAAKI,IAAIL,GAAaM,KAAK,KACvDC,EAAeN,IAASA,EAAKO,OAASP,EAAKO,MAAMC,SAC5CT,EAAYC,EAAKO,MAAMC,UAEzB,EACT,CAEO,MAAMC,EAAqB,EAChCvB,OAAO,UACPN,OAAO,KACP8B,YACAC,UACAC,iBAAgB,EAChBC,eAAc,EACdC,YACAC,OACAP,WAAW,KACRD,MAEH,MAAMS,EAAkBC,OAAOT,GAAUU,iBAEnCC,EAAoBC,EAAQ,KAChC,GAAIN,EAAW,OAAOA,EAEtB,MAAMO,EAAYL,GAAmB,GAGrC,MAAO,GAFWjB,EAAYW,IAEP,MAAMW,WADbtB,EAAYY,IAC+B,KAAKW,QAC/D,CAACR,EAAWJ,EAAWC,EAASK,IAE7BO,EAAoBzB,EAAQlB,IAAS;AAE3C,OACE4C,EAAC,OAAA,CACC,cAAY,uBACZ,aAAYL,EACZJ,KAAMA,QAAQ,EACdnB,UAAWnB,EAAmB,CAC5BG,OACAM,SAGDsB,SAAA,CAAAE,kBACCe,EAAC,OAAA,CAAK7B,UAAWN,EAAQ,CAAEV,OAAMY,KAAMoB,IACpCJ,SAAAE;eAGLe,EAACC,EAAA,CACC,eAAW,EACXC,aAAuB,YAATzC,EAAqB,YAAc,UACjDN,KAAM2C,EACNrC,UACIqB,EAEHC,SAAAS,OAAOT,IAAa,IAEtBG,kBACCc,EAAC,OAAA,CAAK7B,UAAWN,EAAQ,CAAEV,OAAMY,KAAMqB,IAAiBL,SAAAG"}
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import { default as React, HTMLAttributes } from 'react';
|
|
2
|
+
declare const titleHeadingLevels: readonly ["h1", "h2", "h3", "h4", "h5"];
|
|
3
|
+
type TitleHeadingLevel = (typeof titleHeadingLevels)[number];
|
|
2
4
|
export interface BannerSectionContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
|
|
3
5
|
/**
|
|
4
|
-
* Text displayed in heading.
|
|
6
|
+
* Text displayed in heading. Rendered in an `h2` unless `headingLevel` is set
|
|
5
7
|
*/
|
|
6
8
|
title: string;
|
|
7
9
|
/**
|
|
8
|
-
*
|
|
10
|
+
* Heading level of the title element
|
|
11
|
+
* @default 'h2'
|
|
12
|
+
*/
|
|
13
|
+
headingLevel?: TitleHeadingLevel;
|
|
14
|
+
/**
|
|
15
|
+
* Text displayed in subheading. Renders one heading level below `headingLevel`, default `h3`
|
|
9
16
|
*/
|
|
10
17
|
subtitle?: string;
|
|
11
18
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
2
|
-
return e("div",{...
|
|
3
|
-
/* @__PURE__ */e("div",{className:d,children:[
|
|
4
|
-
/* @__PURE__ */
|
|
1
|
+
import{jsxs as e,jsx as n}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Heading as t}from"../Heading/Heading.js";import{Paragraph as o}from"../Paragraph/Paragraph.js";import{SubHeading as a}from"../SubHeading/SubHeading.js";import '../../assets/BannerSectionContent.css';const i="_bannerSectionContent_1196e_1",d="_bannerSectionContent__content_1196e_7",c="_bannerSectionContent__end-slot_1196e_14",s=["h1","h2","h3","h4","h5"],h=["h2","h3","h4","h5","h6"],l=e=>{const n=s.indexOf(e);return h[n]},m=r(({title:r,headingLevel:s="h2",subtitle:h,description:m,styleVariant:g="onLight",startSlot:_,endSlot:f,...p},u)=>{const S="onLight"===g;/* @__PURE__ */
|
|
2
|
+
return e("div",{...p,className:i,"data-on-light":S||void 0,"data-on-dark":!S||void 0,ref:u,children:[
|
|
3
|
+
/* @__PURE__ */e("div",{className:d,children:[_,
|
|
4
|
+
/* @__PURE__ */n(t,{as:s,size:"lg",foregroundColor:S?"accentSecondary":"whitePrimary",children:r}),h&&/* @__PURE__ */n(a,{as:l(s),size:"xs",foregroundColor:S?"accentSecondary":"whitePrimary",children:h}),m&&/* @__PURE__ */n(o,{size:"lg",foregroundColor:S?"secondary":"whitePrimary",children:m})]}),f&&/* @__PURE__ */n("div",{className:c,children:f})]})});m.displayName="BannerSectionContent";export{m as BannerSectionContent,m as default};
|
|
5
5
|
//# sourceMappingURL=BannerSectionContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerSectionContent.js","sources":["../../../src/components/BannerSectionContent/BannerSectionContent.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport Heading from '../Heading';\nimport Paragraph from '../Paragraph';\n\nimport styles from './BannerSectionContent.module.css';\nimport SubHeading from '../SubHeading';\n\nexport interface BannerSectionContentProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {\n /**\n * Text displayed in heading.
|
|
1
|
+
{"version":3,"file":"BannerSectionContent.js","sources":["../../../src/components/BannerSectionContent/BannerSectionContent.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport Heading from '../Heading';\nimport Paragraph from '../Paragraph';\n\nimport styles from './BannerSectionContent.module.css';\nimport SubHeading from '../SubHeading';\n\n// Accepted heading levels for title and subtitle elements\nconst titleHeadingLevels = ['h1', 'h2', 'h3', 'h4', 'h5'] as const;\ntype TitleHeadingLevel = (typeof titleHeadingLevels)[number];\n\nconst subtitleHeadingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\ntype SubtitleHeadingLevel = (typeof titleHeadingLevels)[number];\n\n// Get subtitle heading level by matching the index of the title heading level\nconst getSubtitleHeadingLevel = (headingLevel: TitleHeadingLevel) => {\n const index = titleHeadingLevels.indexOf(headingLevel);\n return subtitleHeadingLevels[index] as SubtitleHeadingLevel;\n};\n\nexport interface BannerSectionContentProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {\n /**\n * Text displayed in heading. Rendered in an `h2` unless `headingLevel` is set\n */\n title: string;\n /**\n * Heading level of the title element\n * @default 'h2'\n */\n headingLevel?: TitleHeadingLevel;\n /**\n * Text displayed in subheading. Renders one heading level below `headingLevel`, default `h3`\n */\n subtitle?: string;\n /**\n * Content displayed below the title\n */\n description?: React.ReactNode;\n /**\n * Changes the colour of the `title` and `description` for placement on light or dark backgrounds\n *\n * @default 'onLight'\n */\n styleVariant?: 'onLight' | 'onDark';\n /**\n * Content displayed above the title\n */\n startSlot?: React.ReactNode;\n /**\n * Content displayed below the description\n */\n endSlot?: React.ReactNode;\n}\n\nexport const BannerSectionContent = forwardRef<\n HTMLDivElement,\n BannerSectionContentProps\n>(\n (\n {\n title,\n headingLevel = 'h2',\n subtitle,\n description,\n styleVariant = 'onLight',\n startSlot,\n endSlot,\n ...props\n },\n forwardedRef,\n ) => {\n const isOnLight = styleVariant === 'onLight';\n\n return (\n <div\n {...props}\n className={styles['bannerSectionContent']}\n data-on-light={isOnLight || undefined}\n data-on-dark={!isOnLight || undefined}\n ref={forwardedRef}\n >\n <div className={styles['bannerSectionContent__content']}>\n {startSlot}\n <Heading\n as={headingLevel}\n size=\"lg\"\n foregroundColor={isOnLight ? 'accentSecondary' : 'whitePrimary'}\n >\n {title}\n </Heading>\n {subtitle && (\n <SubHeading\n as={getSubtitleHeadingLevel(headingLevel)}\n size=\"xs\"\n foregroundColor={isOnLight ? 'accentSecondary' : 'whitePrimary'}\n >\n {subtitle}\n </SubHeading>\n )}\n {description && (\n <Paragraph\n size=\"lg\"\n foregroundColor={isOnLight ? 'secondary' : 'whitePrimary'}\n >\n {description}\n </Paragraph>\n )}\n </div>\n {endSlot && (\n <div className={styles['bannerSectionContent__end-slot']}>\n {endSlot}\n </div>\n )}\n </div>\n );\n },\n);\nBannerSectionContent.displayName = 'BannerSectionContent';\n\nexport default BannerSectionContent;\n"],"names":["titleHeadingLevels","subtitleHeadingLevels","getSubtitleHeadingLevel","headingLevel","index","indexOf","BannerSectionContent","forwardRef","title","subtitle","description","styleVariant","startSlot","endSlot","props","forwardedRef","isOnLight","jsxs","className","styles","ref","children","jsx","Heading","as","size","foregroundColor","SubHeading","Paragraph","displayName"],"mappings":"oXAQMA,EAAqB,CAAC,KAAM,KAAM,KAAM,KAAM,MAG9CC,EAAwB,CAAC,KAAM,KAAM,KAAM,KAAM,MAIjDC,EAA2BC,IAC/B,MAAMC,EAAQJ,EAAmBK,QAAQF,GACzC,OAAOF,EAAsBG,IAsClBE,EAAuBC,EAIlC,EAEIC,QACAL,eAAe,KACfM,WACAC,cACAC,eAAe,UACfC,YACAC,aACGC,GAELC,KAEA,MAAMC,EAA6B,YAAjBL;AAElB,OACEM,EAAC,MAAA,IACKH,EACJI,UAAWC,EACX,gBAAeH,QAAa,EAC5B,gBAAeA,QAAa,EAC5BI,IAAKL,EAELM,SAAA;iBAAC,MAAA,CAAIH,UAAWC,EACbE,SAAA,CAAAT;eACDU,EAACC,EAAA,CACCC,GAAIrB,EACJsB,KAAK,KACLC,gBAAiBV,EAAY,kBAAoB,eAEhDK,SAAAb,IAEFC,kBACCa,EAACK,EAAA,CACCH,GAAItB,EAAwBC,GAC5BsB,KAAK,KACLC,gBAAiBV,EAAY,kBAAoB,eAEhDK,SAAAZ,IAGJC,kBACCY,EAACM,EAAA,CACCH,KAAK,KACLC,gBAAiBV,EAAY,YAAc,eAE1CK,SAAAX,OAING,kBACCS,EAAC,MAAA,CAAIJ,UAAWC,EACbE,SAAAR,SAObP,EAAqBuB,YAAc"}
|
|
@@ -7,6 +7,22 @@ import { MarginVariants } from '../../utils/margin/margin';
|
|
|
7
7
|
import { PositionVariants } from '../../utils/position/position';
|
|
8
8
|
import { WithResponsiveProps } from '../../utils/breakpoint/responsiveSSR';
|
|
9
9
|
export interface BoxBaseProps extends BackgroundVariants, Omit<FlexVariants, 'flexBasis'>, BorderVariants, PaddingVariants, MarginVariants, PositionVariants, Omit<React.HTMLAttributes<Element>, 'className' | 'style'> {
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated Use `borderRadiusTopLeft` and `borderRadiusTopRight` instead.
|
|
12
|
+
*/
|
|
13
|
+
borderTopRadius?: BorderVariants['borderTopRadius'];
|
|
14
|
+
/**
|
|
15
|
+
* @deprecated Use `borderRadiusBottomLeft` and `borderRadiusBottomRight` instead.
|
|
16
|
+
*/
|
|
17
|
+
borderBottomRadius?: BorderVariants['borderBottomRadius'];
|
|
18
|
+
/**
|
|
19
|
+
* @deprecated Use `borderRadiusTopLeft` and `borderRadiusBottomLeft` instead.
|
|
20
|
+
*/
|
|
21
|
+
borderLeftRadius?: BorderVariants['borderLeftRadius'];
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated Use `borderRadiusTopRight` and `borderRadiusBottomRight` instead.
|
|
24
|
+
*/
|
|
25
|
+
borderRightRadius?: BorderVariants['borderRightRadius'];
|
|
10
26
|
/**
|
|
11
27
|
* The HTML element to render the Box as.
|
|
12
28
|
*/
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import{backgroundColorVariants as i}from"../../utils/backgroundColor/backgroundColor.js";import{f as r,i as t,a as d,r as a}from"../../flex-BfhdHBb6.js";import{p as e,a as n}from"../../padding-nClUzhWp.js";import{m as g,a as m}from"../../margin-CCJx_ENX.js";import{borderVariants as p}from"../../utils/border/border.js";import{positionVariants as
|
|
2
|
-
return o(n,{className:[b.box,p({...
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{backgroundColorVariants as i}from"../../utils/backgroundColor/backgroundColor.js";import{f as r,i as t,a as d,r as a}from"../../flex-BfhdHBb6.js";import{p as e,a as n}from"../../padding-nClUzhWp.js";import{m as g,a as m}from"../../margin-CCJx_ENX.js";import{borderVariants as p}from"../../utils/border/border.js";import{positionVariants as s}from"../../utils/position/position.js";import{getBaseValueOrUndefined as l,generateResponsiveClasses as f}from"../../utils/breakpoint/responsiveSSR.js";import{responsiveToCssVars as h}from"../../utils/breakpoint/responsiveToCssVars.js";import '../../assets/Box.css';const b={box:"_box_sckl4_1"},u=f(d),x=f(n),R=f(m),c=/* @__PURE__ */new Set,B=[["borderTopRadius",["borderRadiusTopLeft","borderRadiusTopRight"]],["borderBottomRadius",["borderRadiusBottomLeft","borderRadiusBottomRight"]],["borderLeftRadius",["borderRadiusTopLeft","borderRadiusBottomLeft"]],["borderRightRadius",["borderRadiusTopRight","borderRadiusBottomRight"]]],W=({children:d,as:n="div",width:m,height:f,minHeight:W,zIndex:v,top:T,right:w,bottom:C,left:L,position:j,"data-testid":k,dataTestId:y="box",overflowWrap:G,wordBreak:I,...X})=>{"production"!==process.env.NODE_ENV&&B.forEach(([o,i])=>{o in X&&void 0!==X[o]&&!c.has(o)&&(c.add(o),console.warn(`[Box] The prop "${o}" is deprecated. Please use ${i.map(o=>`"${o}"`).join(" and ")} instead.`))});const Y=l(X.justifyContent),P=l(X.flexDirection),S=l(X.gap),D=l(X.rowGap),H=l(X.columnGap),_=l(X.alignItems),E=l(X.display),N=l(X.flexWrap),$=l(X.flexGrow),z=l(X.flexShrink),V=l(X.flexBasis),O=l(X.paddingTop),q=l(X.paddingRight),A=l(X.paddingBottom),F=l(X.paddingLeft),J=l(X.padding),K=l(X.paddingX),M=l(X.paddingY),Q=l(X.marginTop),U=l(X.marginRight),Z=l(X.marginBottom),oo=l(X.marginLeft),io=l(X.margin),ro=l(X.marginX),to=l(X.marginY),ao=h(X.maxWidth,{varPrefix:"--box-max-width",normalise:o=>"pageWidth"===o?"var(--alto-section-container-max-width)":o}),eo=h(X.maxHeight,{varPrefix:"--box-max-height",normalise:o=>o}),no=h(X.minWidth,{varPrefix:"--box-min-width",normalise:o=>o}),go=h(X.flexBasis,{varPrefix:"--box-flex-basis",normalise:o=>a(o)}),mo=r({display:E,justifyContent:Y,flexDirection:P,gap:S,rowGap:D,columnGap:H,alignItems:_,flexWrap:N,flexGrow:$,flexShrink:z,flexBasis:t(V)?V:void 0}),po=e({paddingTop:O,paddingRight:q,paddingBottom:A,paddingLeft:F,padding:J,paddingX:K,paddingY:M}),so=g({marginTop:Q,marginRight:U,marginBottom:Z,marginLeft:oo,margin:io,marginX:ro,marginY:to}),lo=u(X.justifyContent,"flex-justify-content"),fo=u(X.flexDirection,"flex-direction"),ho=u(X.gap,"flex-gap"),bo=u(X.rowGap,"flex-row-gap"),uo=u(X.columnGap,"flex-column-gap"),xo=u(X.alignItems,"flex-align-items"),Ro=x(X.paddingTop,"padding-top"),co=x(X.paddingRight,"padding-right"),Bo=x(X.paddingBottom,"padding-bottom"),Wo=x(X.paddingLeft,"padding-left"),vo=x(X.padding,"padding"),To=x(X.paddingX,"padding-x"),wo=x(X.paddingY,"padding-y"),Co=R(X.marginTop,"margin-top"),Lo=R(X.marginRight,"margin-right"),jo=R(X.marginBottom,"margin-bottom"),ko=R(X.marginLeft,"margin-left"),yo=R(X.margin,"margin"),Go=R(X.marginX,"margin-x"),Io=R(X.marginY,"margin-y"),Xo=X?.borderWidth||void 0===X.borderColour||"none"===X.borderColour?X.borderWidth:"sm",Yo=X?.borderTopWidth||void 0===X.borderTopColour||"none"===X.borderTopColour?X.borderTopWidth:"sm",Po=X?.borderRightWidth||void 0===X.borderRightColour||"none"===X.borderRightColour?X.borderRightWidth:"sm",So=X?.borderBottomWidth||void 0===X.borderBottomColour||"none"===X.borderBottomColour?X.borderBottomWidth:"sm",Do=X?.borderLeftWidth||void 0===X.borderLeftColour||"none"===X.borderLeftColour?X.borderLeftWidth:"sm",Ho={width:"full"===m?"100%":m,height:"full"===f?"100%":f,minHeight:W,zIndex:v,top:T,right:w,bottom:C,left:L,...ao,...no,...eo,...go,overflow:X.maxHeight||X.maxWidth?"auto":void 0,overflowWrap:G,wordBreak:I};/* @__PURE__ */
|
|
2
|
+
return o(n,{className:[b.box,p({...X,borderWidth:Xo,borderTopWidth:Yo,borderRightWidth:Po,borderBottomWidth:So,borderLeftWidth:Do}),mo,po,so,i({backgroundColor:X.backgroundColor,...X}),s({position:j}),...lo,...fo,...ho,...bo,...uo,...xo,...Ro,...co,...Bo,...Wo,...vo,...To,...wo,...Co,...Lo,...jo,...ko,...yo,...Go,...Io].filter(Boolean).join(" "),style:Ho,"data-testid":k??y,children:d})};export{W as Box,W as default};
|
|
3
3
|
//# sourceMappingURL=Box.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport styles from './Box.module.css';\nimport {\n backgroundColorVariants,\n type BackgroundVariants,\n} from '../../utils/backgroundColor/backgroundColor';\nimport {\n flexVariants,\n isFlexBasisToken,\n resolveFlexBasisCssValue,\n type FlexBasisToken,\n type FlexVariants,\n} from '../../utils/flex/flex';\nimport flexStyles from '../../utils/flex/flex.module.css';\nimport paddingStyles from '../../utils/padding/padding.module.css';\nimport marginStyles from '../../utils/margin/margin.module.css';\nimport { borderVariants, type BorderVariants } from '../../utils/border/border';\nimport {\n paddingVariants,\n type PaddingVariants,\n} from '../../utils/padding/padding';\nimport { marginVariants, type MarginVariants } from '../../utils/margin/margin';\nimport {\n positionVariants,\n type PositionVariants,\n} from '../../utils/position/position';\nimport {\n getBaseValueOrUndefined,\n generateResponsiveClasses,\n type WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\nimport { responsiveToCssVars } from '../../utils/breakpoint/responsiveToCssVars';\n\nconst getResponsiveClassesFlex = generateResponsiveClasses(flexStyles);\nconst getResponsiveClassesPadding = generateResponsiveClasses(paddingStyles);\nconst getResponsiveClassesMargin = generateResponsiveClasses(marginStyles);\n\nexport interface BoxBaseProps\n extends BackgroundVariants,\n Omit<FlexVariants, 'flexBasis'>,\n BorderVariants,\n PaddingVariants,\n MarginVariants,\n PositionVariants,\n Omit<React.HTMLAttributes<Element>, 'className' | 'style'> {\n /**\n * The HTML element to render the Box as.\n */\n as?:\n | 'div'\n | 'article'\n | 'aside'\n | 'nav'\n | 'section'\n | 'main'\n | 'span'\n | 'ul'\n | 'ol'\n | 'li';\n /**\n * The width of the Box.\n * Accepts any valid CSS unit or \"full\"\n */\n width?: 'full' | string;\n /**\n * **[Responsive]** The maximum width of the Box.\n * Accepts any valid CSS unit or \"pageWidth\" to use the `section-container-max-width` token.\n */\n maxWidth?: 'pageWidth' | string;\n /**\n * **[Responsive]** The minimum width of the Box.\n * Accepts any valid CSS unit.\n */\n minWidth?: string;\n /**\n * The height of the Box.\n * Accepts any valid CSS unit.\n */\n height?: string;\n /**\n * **[Responsive]** The maximum height of the Box.\n * Accepts any valid CSS unit.\n */\n maxHeight?: string;\n /**\n * The minimum height of the Box.\n * Accepts any valid CSS unit.\n */\n minHeight?: string;\n /**\n * The z-index of the Box.\n * Accepts any valid CSS z-index value.\n */\n zIndex?: string;\n /**\n * The top position of the Box.\n * Accepts any valid CSS position value.\n */\n top?: string;\n /**\n * The right position of the Box.\n * Accepts any valid CSS position value.\n */\n right?: string;\n /**\n * The bottom position of the Box.\n * Accepts any valid CSS position value.\n */\n bottom?: string;\n /**\n * The left position of the Box.\n * Accepts any valid CSS position value.\n */\n left?: string;\n /**\n * Test identifier for testing purposes.\n * Defaults to \"box\" if not provided.\n */\n 'data-testid'?: string;\n /**\n * @deprecated Use `data-testid` instead.\n * @ignore\n */\n dataTestId?: string;\n /**\n * CSS overflow-wrap property.\n */\n overflowWrap?: 'normal' | 'break-word' | 'anywhere';\n /**\n * CSS word-break property.\n */\n wordBreak?: React.CSSProperties['wordBreak'];\n /**\n * **[Responsive]** Defines the default size of a flex item before remaining space is distributed.\n * Accepts predefined flex-basis tokens and arbitrary CSS values (e.g. \"200px\", \"30%\", \"clamp(200px, 50vw, 400px)\").\n */\n flexBasis?: FlexBasisToken | string | number;\n}\n\ntype ResponsivePropKeys =\n | 'justifyContent'\n | 'flexDirection'\n | 'gap'\n | 'rowGap'\n | 'columnGap'\n | 'flexBasis'\n | 'alignItems'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'padding'\n | 'paddingX'\n | 'paddingY'\n | 'marginTop'\n | 'marginRight'\n | 'marginBottom'\n | 'marginLeft'\n | 'margin'\n | 'marginX'\n | 'marginY'\n | 'minWidth'\n | 'maxWidth'\n | 'maxHeight';\n\nexport type BoxProps = WithResponsiveProps<BoxBaseProps, ResponsivePropKeys>;\n\nexport const Box = ({\n children,\n as: Component = 'div',\n width,\n height,\n minHeight,\n zIndex,\n top,\n right,\n bottom,\n left,\n position,\n 'data-testid': dataTestIdNative,\n dataTestId: dataTestIdLegacy = 'box',\n overflowWrap,\n wordBreak,\n ...props\n}: BoxProps) => {\n //Responsive Props\n\n const baseJustifyContent = getBaseValueOrUndefined(props.justifyContent);\n const baseFlexDirection = getBaseValueOrUndefined(props.flexDirection);\n const baseGap = getBaseValueOrUndefined(props.gap);\n const baseRowGap = getBaseValueOrUndefined(props.rowGap);\n const baseColumnGap = getBaseValueOrUndefined(props.columnGap);\n const baseAlignItems = getBaseValueOrUndefined(props.alignItems);\n const baseDisplay = getBaseValueOrUndefined(props.display);\n const baseFlexWrap = getBaseValueOrUndefined(props.flexWrap);\n const baseFlexGrow = getBaseValueOrUndefined(props.flexGrow);\n const baseFlexShrink = getBaseValueOrUndefined(props.flexShrink);\n const baseFlexBasis = getBaseValueOrUndefined(props.flexBasis);\n const basePaddingTop = getBaseValueOrUndefined(props.paddingTop);\n const basePaddingRight = getBaseValueOrUndefined(props.paddingRight);\n const basePaddingBottom = getBaseValueOrUndefined(props.paddingBottom);\n const basePaddingLeft = getBaseValueOrUndefined(props.paddingLeft);\n const basePadding = getBaseValueOrUndefined(props.padding);\n const basePaddingX = getBaseValueOrUndefined(props.paddingX);\n const basePaddingY = getBaseValueOrUndefined(props.paddingY);\n const baseMarginTop = getBaseValueOrUndefined(props.marginTop);\n const baseMarginRight = getBaseValueOrUndefined(props.marginRight);\n const baseMarginBottom = getBaseValueOrUndefined(props.marginBottom);\n const baseMarginLeft = getBaseValueOrUndefined(props.marginLeft);\n const baseMargin = getBaseValueOrUndefined(props.margin);\n const baseMarginX = getBaseValueOrUndefined(props.marginX);\n const baseMarginY = getBaseValueOrUndefined(props.marginY);\n\n const maxWidthVars = responsiveToCssVars(props.maxWidth, {\n varPrefix: '--box-max-width',\n normalise: (value) => {\n if (value === 'pageWidth') {\n return 'var(--alto-section-container-max-width)';\n }\n return value; // arbitrary CSS string (e.g. \"960px\", \"80vw\", \"min(960px, 100%)\")\n },\n });\n\n const maxHeightVars = responsiveToCssVars(props.maxHeight, {\n varPrefix: '--box-max-height',\n normalise: (value) => value, // arbitrary CSS string (e.g. \"500px\", \"80vh\", \"min(500px, 100%)\")\n });\n\n const minWidthVars = responsiveToCssVars(props.minWidth, {\n varPrefix: '--box-min-width',\n normalise: (value) => value, // arbitrary CSS string (e.g. \"300px\", \"50vw\", \"min(300px, 100%)\")\n });\n\n const flexBasisVars = responsiveToCssVars(props.flexBasis, {\n varPrefix: '--box-flex-basis',\n normalise: (value) => resolveFlexBasisCssValue(value),\n });\n\n const flexBaseClass = flexVariants({\n display: baseDisplay,\n justifyContent: baseJustifyContent,\n flexDirection: baseFlexDirection,\n gap: baseGap,\n rowGap: baseRowGap,\n columnGap: baseColumnGap,\n alignItems: baseAlignItems,\n flexWrap: baseFlexWrap,\n flexGrow: baseFlexGrow,\n flexShrink: baseFlexShrink,\n flexBasis: isFlexBasisToken(baseFlexBasis) ? baseFlexBasis : undefined,\n });\n\n const paddingBaseClass = paddingVariants({\n paddingTop: basePaddingTop,\n paddingRight: basePaddingRight,\n paddingBottom: basePaddingBottom,\n paddingLeft: basePaddingLeft,\n padding: basePadding,\n paddingX: basePaddingX,\n paddingY: basePaddingY,\n });\n\n const marginBaseClass = marginVariants({\n marginTop: baseMarginTop,\n marginRight: baseMarginRight,\n marginBottom: baseMarginBottom,\n marginLeft: baseMarginLeft,\n margin: baseMargin,\n marginX: baseMarginX,\n marginY: baseMarginY,\n });\n\n const justifyContentResponsiveClasses = getResponsiveClassesFlex(\n props.justifyContent,\n 'flex-justify-content',\n );\n\n const flexDirectionResponsiveClasses = getResponsiveClassesFlex(\n props.flexDirection,\n 'flex-direction',\n );\n\n const gapResponsiveClasses = getResponsiveClassesFlex(props.gap, 'flex-gap');\n\n const rowGapResponsiveClasses = getResponsiveClassesFlex(\n props.rowGap,\n 'flex-row-gap',\n );\n\n const columnGapResponsiveClasses = getResponsiveClassesFlex(\n props.columnGap,\n 'flex-column-gap',\n );\n\n const alignItemsResponsiveClasses = getResponsiveClassesFlex(\n props.alignItems,\n 'flex-align-items',\n );\n\n const paddingTopResponsiveClasses = getResponsiveClassesPadding(\n props.paddingTop,\n 'padding-top',\n );\n\n const paddingRightResponsiveClasses = getResponsiveClassesPadding(\n props.paddingRight,\n 'padding-right',\n );\n\n const paddingBottomResponsiveClasses = getResponsiveClassesPadding(\n props.paddingBottom,\n 'padding-bottom',\n );\n\n const paddingLeftResponsiveClasses = getResponsiveClassesPadding(\n props.paddingLeft,\n 'padding-left',\n );\n\n const paddingResponsiveClasses = getResponsiveClassesPadding(\n props.padding,\n 'padding',\n );\n\n const paddingXResponsiveClasses = getResponsiveClassesPadding(\n props.paddingX,\n 'padding-x',\n );\n\n const paddingYResponsiveClasses = getResponsiveClassesPadding(\n props.paddingY,\n 'padding-y',\n );\n\n const marginTopResponsiveClasses = getResponsiveClassesMargin(\n props.marginTop,\n 'margin-top',\n );\n\n const marginRightResponsiveClasses = getResponsiveClassesMargin(\n props.marginRight,\n 'margin-right',\n );\n\n const marginBottomResponsiveClasses = getResponsiveClassesMargin(\n props.marginBottom,\n 'margin-bottom',\n );\n\n const marginLeftResponsiveClasses = getResponsiveClassesMargin(\n props.marginLeft,\n 'margin-left',\n );\n\n const marginResponsiveClasses = getResponsiveClassesMargin(\n props.margin,\n 'margin',\n );\n\n const marginXResponsiveClasses = getResponsiveClassesMargin(\n props.marginX,\n 'margin-x',\n );\n\n const marginYResponsiveClasses = getResponsiveClassesMargin(\n props.marginY,\n 'margin-y',\n );\n\n // Keep existing convenience behavior for all-sides borders:\n // if a border colour is set but width is omitted, default width to `sm`.\n const borderWidth =\n !props?.borderWidth &&\n props.borderColour !== undefined &&\n props.borderColour !== 'none'\n ? 'sm'\n : props.borderWidth;\n\n // Mirror the same convenience behavior for top-only borders.\n // If top colour is set without top width, default top width to `sm`.\n const borderTopWidth =\n !props?.borderTopWidth &&\n props.borderTopColour !== undefined &&\n props.borderTopColour !== 'none'\n ? 'sm'\n : props.borderTopWidth;\n\n // Apply the same side-only convenience fallback for right, bottom, and left.\n const borderRightWidth =\n !props?.borderRightWidth &&\n props.borderRightColour !== undefined &&\n props.borderRightColour !== 'none'\n ? 'sm'\n : props.borderRightWidth;\n\n const borderBottomWidth =\n !props?.borderBottomWidth &&\n props.borderBottomColour !== undefined &&\n props.borderBottomColour !== 'none'\n ? 'sm'\n : props.borderBottomWidth;\n\n const borderLeftWidth =\n !props?.borderLeftWidth &&\n props.borderLeftColour !== undefined &&\n props.borderLeftColour !== 'none'\n ? 'sm'\n : props.borderLeftWidth;\n\n const stylesProp: React.CSSProperties = {\n width: width === 'full' ? '100%' : (width as CSSProperties['width']),\n height: height === 'full' ? '100%' : height,\n minHeight,\n zIndex,\n top,\n right,\n bottom,\n left,\n ...maxWidthVars,\n ...minWidthVars,\n ...maxHeightVars,\n ...flexBasisVars,\n overflow: props.maxHeight || props.maxWidth ? 'auto' : undefined,\n overflowWrap,\n wordBreak,\n };\n\n return (\n <Component\n className={[\n styles.box,\n borderVariants({\n ...props,\n borderWidth,\n borderTopWidth,\n borderRightWidth,\n borderBottomWidth,\n borderLeftWidth,\n }),\n flexBaseClass,\n paddingBaseClass,\n marginBaseClass,\n backgroundColorVariants({\n backgroundColor: props.backgroundColor,\n ...props,\n }),\n positionVariants({ position }),\n ...justifyContentResponsiveClasses,\n ...flexDirectionResponsiveClasses,\n ...gapResponsiveClasses,\n ...rowGapResponsiveClasses,\n ...columnGapResponsiveClasses,\n ...alignItemsResponsiveClasses,\n ...paddingTopResponsiveClasses,\n ...paddingRightResponsiveClasses,\n ...paddingBottomResponsiveClasses,\n ...paddingLeftResponsiveClasses,\n ...paddingResponsiveClasses,\n ...paddingXResponsiveClasses,\n ...paddingYResponsiveClasses,\n ...marginTopResponsiveClasses,\n ...marginRightResponsiveClasses,\n ...marginBottomResponsiveClasses,\n ...marginLeftResponsiveClasses,\n ...marginResponsiveClasses,\n ...marginXResponsiveClasses,\n ...marginYResponsiveClasses,\n ]\n .filter(Boolean)\n .join(' ')}\n style={stylesProp}\n data-testid={dataTestIdNative ?? dataTestIdLegacy}\n >\n {children}\n </Component>\n );\n};\n\nexport default Box;\n"],"names":["getResponsiveClassesFlex","generateResponsiveClasses","flexStyles","getResponsiveClassesPadding","paddingStyles","getResponsiveClassesMargin","marginStyles","Box","children","as","Component","width","height","minHeight","zIndex","top","right","bottom","left","position","dataTestIdNative","dataTestId","dataTestIdLegacy","overflowWrap","wordBreak","props","baseJustifyContent","getBaseValueOrUndefined","justifyContent","baseFlexDirection","flexDirection","baseGap","gap","baseRowGap","rowGap","baseColumnGap","columnGap","baseAlignItems","alignItems","baseDisplay","display","baseFlexWrap","flexWrap","baseFlexGrow","flexGrow","baseFlexShrink","flexShrink","baseFlexBasis","flexBasis","basePaddingTop","paddingTop","basePaddingRight","paddingRight","basePaddingBottom","paddingBottom","basePaddingLeft","paddingLeft","basePadding","padding","basePaddingX","paddingX","basePaddingY","paddingY","baseMarginTop","marginTop","baseMarginRight","marginRight","baseMarginBottom","marginBottom","baseMarginLeft","marginLeft","baseMargin","margin","baseMarginX","marginX","baseMarginY","marginY","maxWidthVars","responsiveToCssVars","maxWidth","varPrefix","normalise","value","maxHeightVars","maxHeight","minWidthVars","minWidth","flexBasisVars","resolveFlexBasisCssValue","flexBaseClass","flexVariants","isFlexBasisToken","paddingBaseClass","paddingVariants","marginBaseClass","marginVariants","justifyContentResponsiveClasses","flexDirectionResponsiveClasses","gapResponsiveClasses","rowGapResponsiveClasses","columnGapResponsiveClasses","alignItemsResponsiveClasses","paddingTopResponsiveClasses","paddingRightResponsiveClasses","paddingBottomResponsiveClasses","paddingLeftResponsiveClasses","paddingResponsiveClasses","paddingXResponsiveClasses","paddingYResponsiveClasses","marginTopResponsiveClasses","marginRightResponsiveClasses","marginBottomResponsiveClasses","marginLeftResponsiveClasses","marginResponsiveClasses","marginXResponsiveClasses","marginYResponsiveClasses","borderWidth","borderColour","borderTopWidth","borderTopColour","borderRightWidth","borderRightColour","borderBottomWidth","borderBottomColour","borderLeftWidth","borderLeftColour","stylesProp","overflow","jsx","className","styles","box","borderVariants","backgroundColorVariants","backgroundColor","positionVariants","filter","Boolean","join","style"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Box.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport styles from './Box.module.css';\nimport {\n backgroundColorVariants,\n type BackgroundVariants,\n} from '../../utils/backgroundColor/backgroundColor';\nimport {\n flexVariants,\n isFlexBasisToken,\n resolveFlexBasisCssValue,\n type FlexBasisToken,\n type FlexVariants,\n} from '../../utils/flex/flex';\nimport flexStyles from '../../utils/flex/flex.module.css';\nimport paddingStyles from '../../utils/padding/padding.module.css';\nimport marginStyles from '../../utils/margin/margin.module.css';\nimport { borderVariants, type BorderVariants } from '../../utils/border/border';\nimport {\n paddingVariants,\n type PaddingVariants,\n} from '../../utils/padding/padding';\nimport { marginVariants, type MarginVariants } from '../../utils/margin/margin';\nimport {\n positionVariants,\n type PositionVariants,\n} from '../../utils/position/position';\nimport {\n getBaseValueOrUndefined,\n generateResponsiveClasses,\n type WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\nimport { responsiveToCssVars } from '../../utils/breakpoint/responsiveToCssVars';\n\nconst getResponsiveClassesFlex = generateResponsiveClasses(flexStyles);\nconst getResponsiveClassesPadding = generateResponsiveClasses(paddingStyles);\nconst getResponsiveClassesMargin = generateResponsiveClasses(marginStyles);\n\nconst warnedDeprecations = new Set<string>();\nconst deprecatedBorderRadiusProps: Array<[string, string[]]> = [\n ['borderTopRadius', ['borderRadiusTopLeft', 'borderRadiusTopRight']],\n ['borderBottomRadius', ['borderRadiusBottomLeft', 'borderRadiusBottomRight']],\n ['borderLeftRadius', ['borderRadiusTopLeft', 'borderRadiusBottomLeft']],\n ['borderRightRadius', ['borderRadiusTopRight', 'borderRadiusBottomRight']],\n];\n\nexport interface BoxBaseProps\n extends BackgroundVariants,\n Omit<FlexVariants, 'flexBasis'>,\n BorderVariants,\n PaddingVariants,\n MarginVariants,\n PositionVariants,\n Omit<React.HTMLAttributes<Element>, 'className' | 'style'> {\n /**\n * @deprecated Use `borderRadiusTopLeft` and `borderRadiusTopRight` instead.\n */\n borderTopRadius?: BorderVariants['borderTopRadius'];\n /**\n * @deprecated Use `borderRadiusBottomLeft` and `borderRadiusBottomRight` instead.\n */\n borderBottomRadius?: BorderVariants['borderBottomRadius'];\n /**\n * @deprecated Use `borderRadiusTopLeft` and `borderRadiusBottomLeft` instead.\n */\n borderLeftRadius?: BorderVariants['borderLeftRadius'];\n /**\n * @deprecated Use `borderRadiusTopRight` and `borderRadiusBottomRight` instead.\n */\n borderRightRadius?: BorderVariants['borderRightRadius'];\n /**\n * The HTML element to render the Box as.\n */\n as?:\n | 'div'\n | 'article'\n | 'aside'\n | 'nav'\n | 'section'\n | 'main'\n | 'span'\n | 'ul'\n | 'ol'\n | 'li';\n /**\n * The width of the Box.\n * Accepts any valid CSS unit or \"full\"\n */\n width?: 'full' | string;\n /**\n * **[Responsive]** The maximum width of the Box.\n * Accepts any valid CSS unit or \"pageWidth\" to use the `section-container-max-width` token.\n */\n maxWidth?: 'pageWidth' | string;\n /**\n * **[Responsive]** The minimum width of the Box.\n * Accepts any valid CSS unit.\n */\n minWidth?: string;\n /**\n * The height of the Box.\n * Accepts any valid CSS unit.\n */\n height?: string;\n /**\n * **[Responsive]** The maximum height of the Box.\n * Accepts any valid CSS unit.\n */\n maxHeight?: string;\n /**\n * The minimum height of the Box.\n * Accepts any valid CSS unit.\n */\n minHeight?: string;\n /**\n * The z-index of the Box.\n * Accepts any valid CSS z-index value.\n */\n zIndex?: string;\n /**\n * The top position of the Box.\n * Accepts any valid CSS position value.\n */\n top?: string;\n /**\n * The right position of the Box.\n * Accepts any valid CSS position value.\n */\n right?: string;\n /**\n * The bottom position of the Box.\n * Accepts any valid CSS position value.\n */\n bottom?: string;\n /**\n * The left position of the Box.\n * Accepts any valid CSS position value.\n */\n left?: string;\n /**\n * Test identifier for testing purposes.\n * Defaults to \"box\" if not provided.\n */\n 'data-testid'?: string;\n /**\n * @deprecated Use `data-testid` instead.\n * @ignore\n */\n dataTestId?: string;\n /**\n * CSS overflow-wrap property.\n */\n overflowWrap?: 'normal' | 'break-word' | 'anywhere';\n /**\n * CSS word-break property.\n */\n wordBreak?: React.CSSProperties['wordBreak'];\n /**\n * **[Responsive]** Defines the default size of a flex item before remaining space is distributed.\n * Accepts predefined flex-basis tokens and arbitrary CSS values (e.g. \"200px\", \"30%\", \"clamp(200px, 50vw, 400px)\").\n */\n flexBasis?: FlexBasisToken | string | number;\n}\n\ntype ResponsivePropKeys =\n | 'justifyContent'\n | 'flexDirection'\n | 'gap'\n | 'rowGap'\n | 'columnGap'\n | 'flexBasis'\n | 'alignItems'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'padding'\n | 'paddingX'\n | 'paddingY'\n | 'marginTop'\n | 'marginRight'\n | 'marginBottom'\n | 'marginLeft'\n | 'margin'\n | 'marginX'\n | 'marginY'\n | 'minWidth'\n | 'maxWidth'\n | 'maxHeight';\n\nexport type BoxProps = WithResponsiveProps<BoxBaseProps, ResponsivePropKeys>;\n\nexport const Box = ({\n children,\n as: Component = 'div',\n width,\n height,\n minHeight,\n zIndex,\n top,\n right,\n bottom,\n left,\n position,\n 'data-testid': dataTestIdNative,\n dataTestId: dataTestIdLegacy = 'box',\n overflowWrap,\n wordBreak,\n ...props\n}: BoxProps) => {\n // Deprecation warnings for side-based border radius props\n if (process.env.NODE_ENV !== 'production') {\n deprecatedBorderRadiusProps.forEach(([prop, replacements]) => {\n const typedProp = prop as keyof typeof props;\n if (\n typedProp in props &&\n props[typedProp] !== undefined &&\n !warnedDeprecations.has(prop)\n ) {\n warnedDeprecations.add(prop);\n console.warn(\n `[Box] The prop \"${prop}\" is deprecated. Please use ${replacements\n .map((replacement) => `\"${replacement}\"`)\n .join(' and ')} instead.`,\n );\n }\n });\n }\n\n //Responsive Props\n\n const baseJustifyContent = getBaseValueOrUndefined(props.justifyContent);\n const baseFlexDirection = getBaseValueOrUndefined(props.flexDirection);\n const baseGap = getBaseValueOrUndefined(props.gap);\n const baseRowGap = getBaseValueOrUndefined(props.rowGap);\n const baseColumnGap = getBaseValueOrUndefined(props.columnGap);\n const baseAlignItems = getBaseValueOrUndefined(props.alignItems);\n const baseDisplay = getBaseValueOrUndefined(props.display);\n const baseFlexWrap = getBaseValueOrUndefined(props.flexWrap);\n const baseFlexGrow = getBaseValueOrUndefined(props.flexGrow);\n const baseFlexShrink = getBaseValueOrUndefined(props.flexShrink);\n const baseFlexBasis = getBaseValueOrUndefined(props.flexBasis);\n const basePaddingTop = getBaseValueOrUndefined(props.paddingTop);\n const basePaddingRight = getBaseValueOrUndefined(props.paddingRight);\n const basePaddingBottom = getBaseValueOrUndefined(props.paddingBottom);\n const basePaddingLeft = getBaseValueOrUndefined(props.paddingLeft);\n const basePadding = getBaseValueOrUndefined(props.padding);\n const basePaddingX = getBaseValueOrUndefined(props.paddingX);\n const basePaddingY = getBaseValueOrUndefined(props.paddingY);\n const baseMarginTop = getBaseValueOrUndefined(props.marginTop);\n const baseMarginRight = getBaseValueOrUndefined(props.marginRight);\n const baseMarginBottom = getBaseValueOrUndefined(props.marginBottom);\n const baseMarginLeft = getBaseValueOrUndefined(props.marginLeft);\n const baseMargin = getBaseValueOrUndefined(props.margin);\n const baseMarginX = getBaseValueOrUndefined(props.marginX);\n const baseMarginY = getBaseValueOrUndefined(props.marginY);\n\n const maxWidthVars = responsiveToCssVars(props.maxWidth, {\n varPrefix: '--box-max-width',\n normalise: (value) => {\n if (value === 'pageWidth') {\n return 'var(--alto-section-container-max-width)';\n }\n return value; // arbitrary CSS string (e.g. \"960px\", \"80vw\", \"min(960px, 100%)\")\n },\n });\n\n const maxHeightVars = responsiveToCssVars(props.maxHeight, {\n varPrefix: '--box-max-height',\n normalise: (value) => value, // arbitrary CSS string (e.g. \"500px\", \"80vh\", \"min(500px, 100%)\")\n });\n\n const minWidthVars = responsiveToCssVars(props.minWidth, {\n varPrefix: '--box-min-width',\n normalise: (value) => value, // arbitrary CSS string (e.g. \"300px\", \"50vw\", \"min(300px, 100%)\")\n });\n\n const flexBasisVars = responsiveToCssVars(props.flexBasis, {\n varPrefix: '--box-flex-basis',\n normalise: (value) => resolveFlexBasisCssValue(value),\n });\n\n const flexBaseClass = flexVariants({\n display: baseDisplay,\n justifyContent: baseJustifyContent,\n flexDirection: baseFlexDirection,\n gap: baseGap,\n rowGap: baseRowGap,\n columnGap: baseColumnGap,\n alignItems: baseAlignItems,\n flexWrap: baseFlexWrap,\n flexGrow: baseFlexGrow,\n flexShrink: baseFlexShrink,\n flexBasis: isFlexBasisToken(baseFlexBasis) ? baseFlexBasis : undefined,\n });\n\n const paddingBaseClass = paddingVariants({\n paddingTop: basePaddingTop,\n paddingRight: basePaddingRight,\n paddingBottom: basePaddingBottom,\n paddingLeft: basePaddingLeft,\n padding: basePadding,\n paddingX: basePaddingX,\n paddingY: basePaddingY,\n });\n\n const marginBaseClass = marginVariants({\n marginTop: baseMarginTop,\n marginRight: baseMarginRight,\n marginBottom: baseMarginBottom,\n marginLeft: baseMarginLeft,\n margin: baseMargin,\n marginX: baseMarginX,\n marginY: baseMarginY,\n });\n\n const justifyContentResponsiveClasses = getResponsiveClassesFlex(\n props.justifyContent,\n 'flex-justify-content',\n );\n\n const flexDirectionResponsiveClasses = getResponsiveClassesFlex(\n props.flexDirection,\n 'flex-direction',\n );\n\n const gapResponsiveClasses = getResponsiveClassesFlex(props.gap, 'flex-gap');\n\n const rowGapResponsiveClasses = getResponsiveClassesFlex(\n props.rowGap,\n 'flex-row-gap',\n );\n\n const columnGapResponsiveClasses = getResponsiveClassesFlex(\n props.columnGap,\n 'flex-column-gap',\n );\n\n const alignItemsResponsiveClasses = getResponsiveClassesFlex(\n props.alignItems,\n 'flex-align-items',\n );\n\n const paddingTopResponsiveClasses = getResponsiveClassesPadding(\n props.paddingTop,\n 'padding-top',\n );\n\n const paddingRightResponsiveClasses = getResponsiveClassesPadding(\n props.paddingRight,\n 'padding-right',\n );\n\n const paddingBottomResponsiveClasses = getResponsiveClassesPadding(\n props.paddingBottom,\n 'padding-bottom',\n );\n\n const paddingLeftResponsiveClasses = getResponsiveClassesPadding(\n props.paddingLeft,\n 'padding-left',\n );\n\n const paddingResponsiveClasses = getResponsiveClassesPadding(\n props.padding,\n 'padding',\n );\n\n const paddingXResponsiveClasses = getResponsiveClassesPadding(\n props.paddingX,\n 'padding-x',\n );\n\n const paddingYResponsiveClasses = getResponsiveClassesPadding(\n props.paddingY,\n 'padding-y',\n );\n\n const marginTopResponsiveClasses = getResponsiveClassesMargin(\n props.marginTop,\n 'margin-top',\n );\n\n const marginRightResponsiveClasses = getResponsiveClassesMargin(\n props.marginRight,\n 'margin-right',\n );\n\n const marginBottomResponsiveClasses = getResponsiveClassesMargin(\n props.marginBottom,\n 'margin-bottom',\n );\n\n const marginLeftResponsiveClasses = getResponsiveClassesMargin(\n props.marginLeft,\n 'margin-left',\n );\n\n const marginResponsiveClasses = getResponsiveClassesMargin(\n props.margin,\n 'margin',\n );\n\n const marginXResponsiveClasses = getResponsiveClassesMargin(\n props.marginX,\n 'margin-x',\n );\n\n const marginYResponsiveClasses = getResponsiveClassesMargin(\n props.marginY,\n 'margin-y',\n );\n\n // Keep existing convenience behavior for all-sides borders:\n // if a border colour is set but width is omitted, default width to `sm`.\n const borderWidth =\n !props?.borderWidth &&\n props.borderColour !== undefined &&\n props.borderColour !== 'none'\n ? 'sm'\n : props.borderWidth;\n\n // Mirror the same convenience behavior for top-only borders.\n // If top colour is set without top width, default top width to `sm`.\n const borderTopWidth =\n !props?.borderTopWidth &&\n props.borderTopColour !== undefined &&\n props.borderTopColour !== 'none'\n ? 'sm'\n : props.borderTopWidth;\n\n // Apply the same side-only convenience fallback for right, bottom, and left.\n const borderRightWidth =\n !props?.borderRightWidth &&\n props.borderRightColour !== undefined &&\n props.borderRightColour !== 'none'\n ? 'sm'\n : props.borderRightWidth;\n\n const borderBottomWidth =\n !props?.borderBottomWidth &&\n props.borderBottomColour !== undefined &&\n props.borderBottomColour !== 'none'\n ? 'sm'\n : props.borderBottomWidth;\n\n const borderLeftWidth =\n !props?.borderLeftWidth &&\n props.borderLeftColour !== undefined &&\n props.borderLeftColour !== 'none'\n ? 'sm'\n : props.borderLeftWidth;\n\n const stylesProp: React.CSSProperties = {\n width: width === 'full' ? '100%' : (width as CSSProperties['width']),\n height: height === 'full' ? '100%' : height,\n minHeight,\n zIndex,\n top,\n right,\n bottom,\n left,\n ...maxWidthVars,\n ...minWidthVars,\n ...maxHeightVars,\n ...flexBasisVars,\n overflow: props.maxHeight || props.maxWidth ? 'auto' : undefined,\n overflowWrap,\n wordBreak,\n };\n\n return (\n <Component\n className={[\n styles.box,\n borderVariants({\n ...props,\n borderWidth,\n borderTopWidth,\n borderRightWidth,\n borderBottomWidth,\n borderLeftWidth,\n }),\n flexBaseClass,\n paddingBaseClass,\n marginBaseClass,\n backgroundColorVariants({\n backgroundColor: props.backgroundColor,\n ...props,\n }),\n positionVariants({ position }),\n ...justifyContentResponsiveClasses,\n ...flexDirectionResponsiveClasses,\n ...gapResponsiveClasses,\n ...rowGapResponsiveClasses,\n ...columnGapResponsiveClasses,\n ...alignItemsResponsiveClasses,\n ...paddingTopResponsiveClasses,\n ...paddingRightResponsiveClasses,\n ...paddingBottomResponsiveClasses,\n ...paddingLeftResponsiveClasses,\n ...paddingResponsiveClasses,\n ...paddingXResponsiveClasses,\n ...paddingYResponsiveClasses,\n ...marginTopResponsiveClasses,\n ...marginRightResponsiveClasses,\n ...marginBottomResponsiveClasses,\n ...marginLeftResponsiveClasses,\n ...marginResponsiveClasses,\n ...marginXResponsiveClasses,\n ...marginYResponsiveClasses,\n ]\n .filter(Boolean)\n .join(' ')}\n style={stylesProp}\n data-testid={dataTestIdNative ?? dataTestIdLegacy}\n >\n {children}\n </Component>\n );\n};\n\nexport default Box;\n"],"names":["getResponsiveClassesFlex","generateResponsiveClasses","flexStyles","getResponsiveClassesPadding","paddingStyles","getResponsiveClassesMargin","marginStyles","warnedDeprecations","Set","deprecatedBorderRadiusProps","Box","children","as","Component","width","height","minHeight","zIndex","top","right","bottom","left","position","dataTestIdNative","dataTestId","dataTestIdLegacy","overflowWrap","wordBreak","props","process","env","NODE_ENV","forEach","prop","replacements","has","add","console","warn","map","replacement","join","baseJustifyContent","getBaseValueOrUndefined","justifyContent","baseFlexDirection","flexDirection","baseGap","gap","baseRowGap","rowGap","baseColumnGap","columnGap","baseAlignItems","alignItems","baseDisplay","display","baseFlexWrap","flexWrap","baseFlexGrow","flexGrow","baseFlexShrink","flexShrink","baseFlexBasis","flexBasis","basePaddingTop","paddingTop","basePaddingRight","paddingRight","basePaddingBottom","paddingBottom","basePaddingLeft","paddingLeft","basePadding","padding","basePaddingX","paddingX","basePaddingY","paddingY","baseMarginTop","marginTop","baseMarginRight","marginRight","baseMarginBottom","marginBottom","baseMarginLeft","marginLeft","baseMargin","margin","baseMarginX","marginX","baseMarginY","marginY","maxWidthVars","responsiveToCssVars","maxWidth","varPrefix","normalise","value","maxHeightVars","maxHeight","minWidthVars","minWidth","flexBasisVars","resolveFlexBasisCssValue","flexBaseClass","flexVariants","isFlexBasisToken","paddingBaseClass","paddingVariants","marginBaseClass","marginVariants","justifyContentResponsiveClasses","flexDirectionResponsiveClasses","gapResponsiveClasses","rowGapResponsiveClasses","columnGapResponsiveClasses","alignItemsResponsiveClasses","paddingTopResponsiveClasses","paddingRightResponsiveClasses","paddingBottomResponsiveClasses","paddingLeftResponsiveClasses","paddingResponsiveClasses","paddingXResponsiveClasses","paddingYResponsiveClasses","marginTopResponsiveClasses","marginRightResponsiveClasses","marginBottomResponsiveClasses","marginLeftResponsiveClasses","marginResponsiveClasses","marginXResponsiveClasses","marginYResponsiveClasses","borderWidth","borderColour","borderTopWidth","borderTopColour","borderRightWidth","borderRightColour","borderBottomWidth","borderBottomColour","borderLeftWidth","borderLeftColour","stylesProp","overflow","jsx","className","styles","box","borderVariants","backgroundColorVariants","backgroundColor","positionVariants","filter","Boolean","style"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{jsxs as a,jsx as e}from"react/jsx-runtime";import
|
|
2
|
-
return a("div",{className:o({emphasis:d,styleVariant:
|
|
3
|
-
/* @__PURE__ */a("div",{className:c["callout-banner__start"],children:[!
|
|
4
|
-
/* @__PURE__ */a("div",{className:c["callout-banner__meta"],children:[
|
|
5
|
-
/* @__PURE__ */a("div",{className:[c["callout-banner__meta-content"],"right"===
|
|
6
|
-
/* @__PURE__ */e("div",{children:/* @__PURE__ */a("div",{className:`${c["callout-banner__meta-top"]} ${
|
|
7
|
-
/* @__PURE__ */a(
|
|
1
|
+
import{jsxs as a,jsx as e}from"react/jsx-runtime";import n from"react";import{Icon as l}from"../Icon/Icon.js";import{c as t}from"../../index-CCUt_dAN.js";import{IconButton as r}from"../IconButton/IconButton.js";import '../../assets/CalloutBanner.css';const c={"callout-banner":"_callout-banner_1mjzf_1","callout-banner__icon":"_callout-banner__icon_1mjzf_12","callout-banner__meta-title":"_callout-banner__meta-title_1mjzf_21","callout-banner__meta-label":"_callout-banner__meta-label_1mjzf_19","callout-banner__start":"_callout-banner__start_1mjzf_17","callout-banner__meta":"_callout-banner__meta_1mjzf_19","callout-banner__end":"_callout-banner__end_1mjzf_42","callout-banner__dismiss":"_callout-banner__dismiss_1mjzf_49","callout-banner__meta-content":"_callout-banner__meta-content_1mjzf_66","callout-banner__meta-content--row":"_callout-banner__meta-content--row_1mjzf_78","callout-banner__meta-top":"_callout-banner__meta-top_1mjzf_83","callout-banner__custom-asset":"_callout-banner__custom-asset_1mjzf_93","callout-banner__meta-description":"_callout-banner__meta-description_1mjzf_107","callout-banner__severity-label":"_callout-banner__severity-label_1mjzf_112","callout-banner__default-asset--center":"_callout-banner__default-asset--center_1mjzf_123","callout-banner--critical":"_callout-banner--critical_1mjzf_129","callout-banner--primary":"_callout-banner--primary_1mjzf_133","callout-banner--secondary":"_callout-banner--secondary_1mjzf_137","callout-banner--tertiary":"_callout-banner--tertiary_1mjzf_146","callout-banner--success":"_callout-banner--success_1mjzf_155","callout-banner--information":"_callout-banner--information_1mjzf_181","callout-banner--neutral":"_callout-banner--neutral_1mjzf_208","callout-banner--accent":"_callout-banner--accent_1mjzf_234"},o=t(c["callout-banner"],{variants:{emphasis:{primary:c["callout-banner--primary"],secondary:c["callout-banner--secondary"],tertiary:c["callout-banner--tertiary"]},styleVariant:{critical:c["callout-banner--critical"],success:c["callout-banner--success"],information:c["callout-banner--information"],neutral:c["callout-banner--neutral"],accent:c["callout-banner--accent"]},headerLayout:{row:c["callout-banner__header--row"],column:c["callout-banner__header-column"]}},defaultVariants:{emphasis:"primary",styleVariant:"critical"}}),i={critical:{icon:"circle-exclamation",severityLabel:"Critical",role:"alert"},success:{icon:"check-circle",severityLabel:"Success",role:"status"},information:{icon:"info-circle",severityLabel:"Information",role:"status"},neutral:{icon:"check-circle",severityLabel:"",role:"region"},accent:{icon:"house",severityLabel:"",role:"region"}},_=({title:t,description:_,label:u,children:m,styleVariant:b="critical",emphasis:d="primary",headingLevel:f="h3",dismissButtonTooltipLabel:y,onDismiss:h,customAsset:p,hideIllustration:j=!1,alignButtons:v="left",headerLayout:z="column",severityLabel:N,role:L,dismissButtonProps:g={"aria-label":"Dismiss banner"},...x})=>{const I="function"==typeof h,{icon:V,severityLabel:w,role:B}=i[b],P=f,A=n.useId(),S=n.useId(),k=N??w,C=L||B,D=n.Children.toArray(m),E=D.find(a=>n.isValidElement(a)&&a.type===s),$=D.filter(a=>!(n.isValidElement(a)&&a.type===s)),T=!_;/* @__PURE__ */
|
|
2
|
+
return a("div",{className:o({emphasis:d,styleVariant:b}),role:C,"aria-labelledby":A,"aria-describedby":_?S:void 0,...x,children:[
|
|
3
|
+
/* @__PURE__ */a("div",{className:c["callout-banner__start"],children:[!j&&/* @__PURE__ */e("div",p?{className:c["callout-banner__custom-asset"],children:p}:{className:T?c["callout-banner__default-asset--center"]:void 0,children:/* @__PURE__ */e(l,{iconName:V,iconPrefix:"fas",className:c["callout-banner__icon"],iconSize:"1.25x",padding:"roomy"})}),
|
|
4
|
+
/* @__PURE__ */a("div",{className:c["callout-banner__meta"],children:[I&&/* @__PURE__ */e("div",{className:c["callout-banner__dismiss"],children:/* @__PURE__ */e(r,{onPress:h,styleVariant:"neutral",emphasis:"tertiary"===d?"tertiary":"primary",size:"sm",iconProps:{iconName:"close",iconPrefix:"fas",iconSize:"1x"},tooltipLabel:y,...g})}),
|
|
5
|
+
/* @__PURE__ */a("div",{className:[c["callout-banner__meta-content"],"right"===v?c["callout-banner__meta-right"]:"","row"===z?c["callout-banner__meta-content--row"]:""].filter(Boolean).join(" "),children:[
|
|
6
|
+
/* @__PURE__ */e("div",{children:/* @__PURE__ */a("div",{className:`${c["callout-banner__meta-top"]} ${I?c["callout-banner__meta-top-dismiss"]:""}`,children:[
|
|
7
|
+
/* @__PURE__ */a(P,{id:A,className:c["callout-banner__meta-title"],children:[
|
|
8
8
|
/* @__PURE__ */a("span",{className:c["callout-banner__severity-label"],dir:"auto",children:[k,k?": ":""]}),
|
|
9
|
-
/* @__PURE__ */e("bdi",{dir:"auto",children:
|
|
9
|
+
/* @__PURE__ */e("bdi",{dir:"auto",children:t})]}),_&&/* @__PURE__ */e("p",{id:S,className:c["callout-banner__meta-description"],children:_||null})]})}),u&&/* @__PURE__ */e("div",{className:c["callout-banner__meta-label"],children:u}),E&&/* @__PURE__ */e("div",{className:c["callout-banner__meta-label"],children:E.props.children})]})]})]}),$.length>0&&/* @__PURE__ */e("div",{className:c["callout-banner__end"],children:$})]})},s=({children:a})=>/* @__PURE__ */e("div",{className:c["callout-banner__meta-label"],children:a});_.Action=s;export{_ as CalloutBanner,s as CalloutBannerAction,_ as default};
|
|
10
10
|
//# sourceMappingURL=CalloutBanner.js.map
|
|
@@ -10,7 +10,7 @@ type NumberFieldComponent = React.ForwardRefExoticComponent<NumberFieldProps & R
|
|
|
10
10
|
StartIcon: typeof BaseInput.StartIcon;
|
|
11
11
|
EndIcon: typeof BaseInput.EndIcon;
|
|
12
12
|
};
|
|
13
|
-
export interface NumberFieldProps extends Omit<InputProps, 'maxWidthByChars'> {
|
|
13
|
+
export interface NumberFieldProps extends Omit<InputProps, 'maxWidthByChars' | 'value' | 'defaultValue' | 'onChange'> {
|
|
14
14
|
/**
|
|
15
15
|
* Number formatting options (Intl.NumberFormat)
|
|
16
16
|
*/
|
|
@@ -33,6 +33,18 @@ export interface NumberFieldProps extends Omit<InputProps, 'maxWidthByChars'> {
|
|
|
33
33
|
* The maximum value for the NumberField
|
|
34
34
|
*/
|
|
35
35
|
maxValue?: number;
|
|
36
|
+
/**
|
|
37
|
+
* Starting value of the number field (uncontrolled)
|
|
38
|
+
*/
|
|
39
|
+
defaultValue?: string | number;
|
|
40
|
+
/**
|
|
41
|
+
* Value of the number field (controlled)
|
|
42
|
+
*/
|
|
43
|
+
value?: string | number;
|
|
44
|
+
/**
|
|
45
|
+
* Function called when the numberfield changes value. `onChange` will be called with the same type as `defaultValue` or `value` i.e. number or string
|
|
46
|
+
*/
|
|
47
|
+
onChange?: ((newValue: string) => void) | ((newValue: number) => void);
|
|
36
48
|
}
|
|
37
49
|
export declare const NumberField: NumberFieldComponent;
|
|
38
50
|
export default NumberField;
|