@alto-avios/alto-ui 3.4.1 → 3.5.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/Accordion.css +1 -1
- package/dist/assets/Badge.css +1 -1
- package/dist/assets/CalloutBanner.css +1 -1
- package/dist/assets/DateField.css +1 -1
- package/dist/assets/Eyebrow.css +1 -1
- package/dist/components/Accordion/Accordion.js +15 -15
- package/dist/components/AviosBadge/AviosBadge.js +1 -1
- package/dist/components/Badge/Badge.d.ts +17 -2
- package/dist/components/Badge/Badge.js +29 -19
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/CalloutBanner/CalloutBanner.js +24 -19
- package/dist/components/CalloutBanner/CalloutBanner.js.map +1 -1
- package/dist/components/CreditCardNumberField/CreditCardNumberField.js +1 -1
- package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.d.ts +6 -1
- package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js +3 -2
- package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js.map +1 -1
- package/dist/components/DateField/DateField.js +3 -3
- package/dist/components/Eyebrow/Eyebrow.js +5 -5
- package/dist/components/Link/Link.js +17 -2
- package/dist/components/Link/Link.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._accordion_1m3lr_1{--accordion-transition-duration:.2s;--accordion-transition-timing:cubic-bezier(.4,0,.2,1);align-items:center;align-self:stretch;background-color:var(--alto-sem-color-bg-white-vibrant-default);border:1px solid var(--alto-sem-color-border-secondary);border-radius:var(--alto-card-radius);display:flex;flex-direction:column;padding:0}._accordionGroup_1m3lr_14,._accordionStack_1m3lr_20{display:flex;flex-direction:column;gap:var(--alto-sem-space-2xs)}._accordionHeader_1m3lr_26{display:flex;flex-direction:column;gap:var(--alto-sem-space-4xs);padding-bottom:var(--alto-sem-space-2xs)}._trigger_1m3lr_33{background-color:var(--alto-sem-color-bg-white-vibrant-default);border:none;border-radius:var(--alto-card-radius);cursor:pointer;padding:var(--alto-sem-space-md) var(--alto-sem-space-sm);width:100%}._buttonContent_1m3lr_42{align-items:center;display:flex;gap:var(--alto-sem-space-sm);justify-content:space-between;width:100%}._titleContainer_1m3lr_50{align-items:center;display:flex;flex:1;gap:var(--alto-sem-space-2xs)}._titleWrapper_1m3lr_57{display:flex;flex-direction:column}._endContainer_1m3lr_62{gap:var(--alto-sem-space-sm)}._endContainer_1m3lr_62,._titleEnd_1m3lr_69,._titleStart_1m3lr_68{align-items:center;display:flex}._accordionTitle_1m3lr_74{color:var(--alto-sem-color-fg-accent-secondary);flex:1;font-size:var(--alto-sem-text-body-lg-font-size);font-style:normal;font-weight:600;letter-spacing:var(--alto-sem-text-body-lg-letter-spacing);line-height:var(--alto-sem-text-body-lg-line-height);text-align:left}._accordionDescription_1m3lr_87,._accordionTitle_1m3lr_74{font-family:var(--alto-sem-text-body-font-family);margin:0}._accordionDescription_1m3lr_87{color:var(--alto-sem-color-fg-secondary);font-size:var(--alto-sem-text-body-md-font-size);letter-spacing:var(--alto-sem-text-body-md-letterSpacing);line-height:var(--alto-sem-text-body-md-line-height)}._iconWrapper_1m3lr_96{align-items:center;color:var(--alto-sem-color-foreground-secondary);display:flex;justify-content:center;transition:transform .25s cubic-bezier(.4,0,.2,1)}._accordion_1m3lr_1[data-expanded=true] ._iconWrapper_1m3lr_96{transform:rotate(180deg)}._accordion_1m3lr_1>[role=group]{height:0;overflow:hidden;visibility:hidden;width:100%}._accordion_1m3lr_1>[role=group],._accordion_1m3lr_1[data-expanded=true]>[role=group]{transition:height var(--accordion-transition-duration) var(--accordion-transition-timing),visibility 0ms linear}._accordion_1m3lr_1[data-expanded=true]>[role=group]{height:var(--group-height);visibility:visible}._panelContent_1m3lr_128{padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm) var(--alto-sem-space-2xl)}._accordion_1m3lr_1[data-expanded=true],._accordion_1m3lr_1[data-expanded=true] ._trigger_1m3lr_33{background-color:var(--alto-sem-color-bg-layer1-default)}._accordion_1m3lr_1 ._trigger_1m3lr_33[data-hovered]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}._accordion_1m3lr_1 ._trigger_1m3lr_33[data-focus-visible]{box-shadow:0 0 0 2px var(--alto-sem-color-border-accent);outline:none}._accordion_1m3lr_1 ._trigger_1m3lr_33[data-pressed]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active);outline:none}._accordion_1m3lr_1[data-expanded=true] ._trigger_1m3lr_33[data-hovered]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover);border-radius:var(--alto-card-radius) var(--alto-card-radius) 0 0}._accordion_1m3lr_1 ._trigger_1m3lr_33[data-focused]{outline:none}._accordion_1m3lr_1 ._trigger_1m3lr_33[data-disabled]{background-color:var(--alto-sem-color-bg-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle);cursor:not-allowed}._accordion_1m3lr_1 ._trigger_1m3lr_33[data-disabled] ._iconWrapper_1m3lr_96,._trigger_1m3lr_33[data-disabled] ._accordionDescription_1m3lr_87,._trigger_1m3lr_33[data-disabled] ._accordionTitle_1m3lr_74{color:var(--alto-sem-color-fg-disabled-on-subtle)}._accordion_1m3lr_1[data-disabled]{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}
|
package/dist/assets/Badge.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._badge_7kyyn_1{align-items:center;border-radius:var(--alto-tag-radius);display:inline-flex;flex-shrink:0;font-family:var(--alto-sem-text-body-font-family);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);justify-content:center;overflow:hidden;text-align:center;text-overflow:ellipsis}._md_7kyyn_15{font-size:var(--alto-sem-text-body-md-font-size);gap:var(--alto-sem-space-2xs);height:26px;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._sm_7kyyn_24{font-size:var(--alto-sem-text-body-xs-font-size);gap:var(--alto-sem-space-4xs);height:20px;letter-spacing:var(--alto-sem-text-body-xs-letter-spacing);line-height:var(--alto-sem-text-body-xs-line-height);padding:var(--alto-sem-space-3xs) var(--alto-sem-space-2xs)}._neutral_7kyyn_33{background:var(--alto-sem-color-bg-inverse-subtle-default);color:var(--alto-sem-color-fg-inverse-on-subtle)}._critical_7kyyn_38{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-critical-on-subtle)}._warning_7kyyn_43{background:var(--alto-sem-color-bg-warning-subtle-default);color:var(--alto-sem-color-fg-warning-on-subtle)}._caution_7kyyn_48{background:var(--alto-sem-color-bg-caution-subtle-default);color:var(--alto-sem-color-fg-caution-on-subtle)}._success_7kyyn_53{background:var(--alto-sem-color-bg-success-subtle-default);color:var(--alto-sem-color-fg-success-on-subtle)}._info_7kyyn_58{background:var(--alto-sem-color-bg-information-subtle-default);color:var(--alto-sem-color-fg-information-on-subtle)}._brand_7kyyn_63{background:var(--alto-sem-color-bg-accent-subtle-default);color:var(--alto-sem-color-fg-accent-on-subtle)}._sale_7kyyn_68{background:var(--alto-sem-color-bg-sale-vibrant-default);color:var(--alto-sem-color-fg-sale-on-vibrant)}._white_7kyyn_73{background:var(--alto-sem-color-bg-white-vibrant-default);color:var(--alto-sem-color-fg-white-on-vibrant)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._calloutBanner_kxqgt_1{border-radius:var(--alto-card-radius);border-style:solid;border-width:var(--alto-sem-border-width-sm);display:flex;flex-direction:column;overflow:hidden;text-align:left;width:100%}._calloutBanner__icon_kxqgt_12{align-self:flex-start}._calloutBanner__start_kxqgt_16{display:flex;flex-direction:row;gap:var(--alto-sem-space-xs);padding:var(--alto-sem-space-xs);position:relative}._calloutBanner__dismiss_kxqgt_24{position:absolute;right:var(--alto-sem-space-xs);top:var(--alto-sem-space-xs)}._calloutBanner__meta_kxqgt_30{align-items:flex-start;display:flex;flex-direction:column;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-sm-font-size);font-style:normal;justify-content:center;letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height);overflow-wrap:break-word;width:100%;word-wrap:break-word;word-break:break-word}._calloutBanner__meta-top_kxqgt_46{align-items:flex-start;display:flex;flex-direction:column;flex-wrap:wrap;text-wrap:wrap}._calloutBanner__meta-top-dismiss_kxqgt_54{padding-right:var(--alto-sem-space-3xl)}._calloutBanner__meta-title_kxqgt_58{font-weight:600}._calloutBanner__meta-description_kxqgt_62{margin-top:var(--alto-sem-space-4xs)}._calloutBanner__meta-label_kxqgt_66{margin-top:var(--alto-sem-space-xs)}._calloutBanner__start_kxqgt_16{border-bottom:var(--alto-sem-border-width-sm) solid transparent;color:var(--alto-sem-color-fg-critical-on-vibrant)}._calloutBanner__end_kxqgt_75{background-color:var(--alto-sem-color-bg-layer2-default);display:flex;justify-content:flex-start;padding:var(--alto-sem-space-sm,16px)}._calloutBanner-critical_kxqgt_83{border-color:var(--alto-sem-color-border-critical)}._calloutBanner-primary_kxqgt_87._calloutBanner-critical_kxqgt_83 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-critical-vibrant-default)}._calloutBanner-secondary_kxqgt_91._calloutBanner-critical_kxqgt_83 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kxqgt_91._calloutBanner-critical_kxqgt_83 ._calloutBanner__end_kxqgt_75{border-top:1px solid var(--alto-sem-color-border-critical)}._calloutBanner-tertiary_kxqgt_100._calloutBanner-critical_kxqgt_83 ._calloutBanner__start_kxqgt_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-critical_kxqgt_83:not(._calloutBanner-primary_kxqgt_87) ._calloutBanner__icon_kxqgt_12{color:var(--alto-sem-color-fg-critical-primary)}._calloutBanner-success_kxqgt_109{border-color:var(--alto-sem-color-border-success)}._calloutBanner-primary_kxqgt_87._calloutBanner-success_kxqgt_109 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-success-vibrant-default)}._calloutBanner-secondary_kxqgt_91._calloutBanner-success_kxqgt_109 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-success-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kxqgt_91._calloutBanner-success_kxqgt_109 ._calloutBanner__end_kxqgt_75{border-top:1px solid var(--alto-sem-color-border-success)}._calloutBanner-tertiary_kxqgt_100._calloutBanner-success_kxqgt_109 ._calloutBanner__start_kxqgt_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-success_kxqgt_109:not(._calloutBanner-primary_kxqgt_87) ._calloutBanner__icon_kxqgt_12{color:var(--alto-sem-color-fg-success-primary)}._calloutBanner-information_kxqgt_135{border-color:var(--alto-sem-color-border-information)}._calloutBanner-primary_kxqgt_87._calloutBanner-information_kxqgt_135 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-information-vibrant-default)}._calloutBanner-secondary_kxqgt_91._calloutBanner-information_kxqgt_135 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-information-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kxqgt_91._calloutBanner-information_kxqgt_135 ._calloutBanner__end_kxqgt_75{border-top:1px solid var(--alto-sem-color-border-information)}._calloutBanner-tertiary_kxqgt_100._calloutBanner-information_kxqgt_135 ._calloutBanner__start_kxqgt_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-information_kxqgt_135:not(._calloutBanner-primary_kxqgt_87) ._calloutBanner__icon_kxqgt_12{color:var(--alto-sem-color-fg-information-primary)}._calloutBanner-neutral_kxqgt_161{border-color:var(--alto-sem-color-border-secondary)}._calloutBanner-primary_kxqgt_87._calloutBanner-neutral_kxqgt_161 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-inverse-vibrant-default)}._calloutBanner-secondary_kxqgt_91._calloutBanner-neutral_kxqgt_161 ._calloutBanner__start_kxqgt_16{background:var(--alto-sem-color-bg-layer1-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kxqgt_91._calloutBanner-neutral_kxqgt_161 ._calloutBanner__end_kxqgt_75{border-top:1px solid var(--alto-sem-color-border-secondary)}._calloutBanner-tertiary_kxqgt_100._calloutBanner-neutral_kxqgt_161 ._calloutBanner__start_kxqgt_16{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-neutral_kxqgt_161:not(._calloutBanner-primary_kxqgt_87) ._calloutBanner__icon_kxqgt_12{color:var(--alto-sem-color-fg-neutral-primary)}._calloutBanner-tertiary_kxqgt_100{border-color:transparent}._calloutBanner-tertiary_kxqgt_100 ._calloutBanner__end_kxqgt_75{border-radius:var(--alto-card-radius)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._dateField_1fojc_1{color:var(--alto-sem-color-fg-secondary)}._dateInput_1fojc_5{align-items:center;background:var(--alto-sem-color-bg-base);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;display:flex;forced-color-adjust:none;height:var(--alto-sem-space-lg);justify-content:flex-start;min-height:48px;padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm);white-space:nowrap;width:-moz-fit-content;width:fit-content}._dateInput_1fojc_5[data-hovered]{border-color:var(--alto-sem-color-border-primary-hover)}._dateInput_1fojc_5[data-pressed]{border-color:var(--alto-sem-color-border-primary-active)}._dateInput_1fojc_5[data-focused]{border-color:var(--alto-sem-color-border-accent)}._dateInput_1fojc_5[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._dateInput_1fojc_5[data-focus-visible]{outline-color:var(--alto-sem-color-border-accent);outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._dateInput_1fojc_5[data-invalid]{border:var(--alto-sem-radius-6xs) solid var(--alto-sem-color-border-critical)}._dateSegment_1fojc_50{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-style:normal;font-variant-numeric:tabular-nums;font-weight:var(--alto-sem-text-body-regular-font-weight);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);padding:0 var(--alto-sem-space-3xs);text-align:end}._dateSegment_1fojc_50[data-type=literal]{padding:var(--alto-sem-space-3xs)}._dateSegment_1fojc_50[data-focused],._dateSegment_1fojc_50[data-invalid]._dateSegment_1fojc_50[data-focused]{background:var(--alto-sem-color-bg-accent-vibrant-default);border-radius:var(--alto-tag-radius);caret-color:transparent;color:var(--alto-sem-color-fg-accent-on-vibrant);outline:none}._dateSegment_1fojc_50[data-disabled]{color:var(--alto-sem-color-fg-disabled-primary)}._dateSegment_1fojc_50[data-invalid][data-focused]{background:var(--highlight-background-invalid);color:var(--highlight-foreground)}
|
package/dist/assets/Eyebrow.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._eyebrow_ie5k8_1{border-radius:var(--alto-eyebrow-radius);display:inline-block;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-sm-font-size);font-style:normal;font-weight:400;letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height);padding:var(--alto-eyebrow-padding-vertical) var(--alto-eyebrow-padding-horizontal)}._inspiration_ie5k8_14{background-color:var(--alto-eyebrow-color-bg-inspiration);color:var(--alto-eyebrow-color-fg-inspiration)}._collect_ie5k8_19{background-color:var(--alto-eyebrow-color-bg-collect);color:var(--alto-eyebrow-color-fg-collect)}._spend_ie5k8_24{background-color:var(--alto-eyebrow-color-bg-spend);color:var(--alto-eyebrow-color-fg-spend)}._activate_ie5k8_29{background-color:var(--alto-eyebrow-color-bg-activate);color:var(--alto-eyebrow-color-fg-activate)}
|
|
@@ -2,21 +2,21 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { Disclosure, DisclosureGroup, Button, DisclosurePanel } from "react-aria-components";
|
|
4
4
|
import { Icon } from "../Icon/Icon.js";
|
|
5
|
-
import '../../assets/Accordion.css';const accordion = "
|
|
6
|
-
const accordionGroup = "
|
|
7
|
-
const accordionStack = "
|
|
8
|
-
const accordionHeader = "
|
|
9
|
-
const trigger = "
|
|
10
|
-
const buttonContent = "
|
|
11
|
-
const titleContainer = "
|
|
12
|
-
const titleWrapper = "
|
|
13
|
-
const endContainer = "
|
|
14
|
-
const titleStart = "
|
|
15
|
-
const titleEnd = "
|
|
16
|
-
const accordionTitle = "
|
|
17
|
-
const accordionDescription = "
|
|
18
|
-
const iconWrapper = "
|
|
19
|
-
const panelContent = "
|
|
5
|
+
import '../../assets/Accordion.css';const accordion = "_accordion_1m3lr_1";
|
|
6
|
+
const accordionGroup = "_accordionGroup_1m3lr_14";
|
|
7
|
+
const accordionStack = "_accordionStack_1m3lr_20";
|
|
8
|
+
const accordionHeader = "_accordionHeader_1m3lr_26";
|
|
9
|
+
const trigger = "_trigger_1m3lr_33";
|
|
10
|
+
const buttonContent = "_buttonContent_1m3lr_42";
|
|
11
|
+
const titleContainer = "_titleContainer_1m3lr_50";
|
|
12
|
+
const titleWrapper = "_titleWrapper_1m3lr_57";
|
|
13
|
+
const endContainer = "_endContainer_1m3lr_62";
|
|
14
|
+
const titleStart = "_titleStart_1m3lr_68";
|
|
15
|
+
const titleEnd = "_titleEnd_1m3lr_69";
|
|
16
|
+
const accordionTitle = "_accordionTitle_1m3lr_74";
|
|
17
|
+
const accordionDescription = "_accordionDescription_1m3lr_87";
|
|
18
|
+
const iconWrapper = "_iconWrapper_1m3lr_96";
|
|
19
|
+
const panelContent = "_panelContent_1m3lr_128";
|
|
20
20
|
const styles = {
|
|
21
21
|
accordion,
|
|
22
22
|
accordionGroup,
|
|
@@ -39,7 +39,7 @@ const AviosBadge = ({
|
|
|
39
39
|
lg: "24px"
|
|
40
40
|
};
|
|
41
41
|
const badgeSize = size === "lg" ? "md" : size;
|
|
42
|
-
return /* @__PURE__ */ jsxs(Badge, {
|
|
42
|
+
return /* @__PURE__ */ jsxs(Badge, { styleVariant: kind === "collect" ? "success" : "info", size: badgeSize, ariaLabel: ariaLabel || defaultAriaLabel, className: `${styles.aviosBadge} ${styles[size]} ${styles[kind]} ${className || ""}`, ...props, children: [
|
|
43
43
|
/* @__PURE__ */ jsx(AviosCurrencySymbol, { kind, styleVariant: kind === "collect" ? "onCollect" : "onSpend", width: iconSizes[size], height: iconSizes[size], "aria-hidden": "true" }),
|
|
44
44
|
/* @__PURE__ */ jsxs("span", { className: styles.content, children: [
|
|
45
45
|
/* @__PURE__ */ jsx("span", { className: styles.points, children: formattedPoints }),
|
|
@@ -16,15 +16,30 @@ export interface BadgeProps {
|
|
|
16
16
|
/**
|
|
17
17
|
* The style variant of the tag
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
styleVariant?: 'neutral' | 'critical' | 'warning' | 'caution' | 'success' | 'info' | 'brand' | 'sale' | 'white';
|
|
20
|
+
/**
|
|
21
|
+
* The style variant of the tag
|
|
22
|
+
* @deprecated Use styleVariant instead
|
|
23
|
+
*/
|
|
24
|
+
variant?: 'neutral' | 'critical' | 'warning' | 'caution' | 'success' | 'info' | 'brand' | 'sale' | 'white';
|
|
20
25
|
/**
|
|
21
26
|
* Whether the tag has a leading icon and what icon to use
|
|
27
|
+
* @deprecated Use iconStartProps instead
|
|
22
28
|
*/
|
|
23
29
|
leadingIconProps?: IconProps;
|
|
24
30
|
/**
|
|
25
31
|
* Whether the tag has a trailing icon and what icon to use
|
|
32
|
+
* @deprecated Use iconEndProps instead
|
|
26
33
|
*/
|
|
27
34
|
trailingIconProps?: IconProps;
|
|
35
|
+
/**
|
|
36
|
+
* Whether an icon should display at the start of the Button and icon properties
|
|
37
|
+
*/
|
|
38
|
+
iconStartProps?: IconProps;
|
|
39
|
+
/**
|
|
40
|
+
* Whether an icon should display at the end of Button and icon properties
|
|
41
|
+
*/
|
|
42
|
+
iconEndProps?: IconProps;
|
|
28
43
|
/**
|
|
29
44
|
* The focus style of the button
|
|
30
45
|
*/
|
|
@@ -35,5 +50,5 @@ export interface BadgeProps {
|
|
|
35
50
|
*/
|
|
36
51
|
className?: string;
|
|
37
52
|
}
|
|
38
|
-
export declare const Badge: ({ children, size, variant, ariaLabel, leadingIconProps, trailingIconProps, focusStyle, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
export declare const Badge: ({ children, size, variant, styleVariant, ariaLabel, leadingIconProps, trailingIconProps, iconStartProps, iconEndProps, focusStyle, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
39
54
|
export default Badge;
|
|
@@ -2,17 +2,18 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as cva } from "../../index-Bi3v_EjJ.js";
|
|
3
3
|
import { Icon } from "../Icon/Icon.js";
|
|
4
4
|
import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
|
|
5
|
-
import '../../assets/Badge.css';const badge$1 = "
|
|
6
|
-
const md = "
|
|
7
|
-
const sm = "
|
|
8
|
-
const neutral = "
|
|
9
|
-
const critical = "
|
|
10
|
-
const warning = "
|
|
11
|
-
const caution = "
|
|
12
|
-
const success = "
|
|
13
|
-
const info = "
|
|
14
|
-
const brand = "
|
|
15
|
-
const sale = "
|
|
5
|
+
import '../../assets/Badge.css';const badge$1 = "_badge_7kyyn_1";
|
|
6
|
+
const md = "_md_7kyyn_15";
|
|
7
|
+
const sm = "_sm_7kyyn_24";
|
|
8
|
+
const neutral = "_neutral_7kyyn_33";
|
|
9
|
+
const critical = "_critical_7kyyn_38";
|
|
10
|
+
const warning = "_warning_7kyyn_43";
|
|
11
|
+
const caution = "_caution_7kyyn_48";
|
|
12
|
+
const success = "_success_7kyyn_53";
|
|
13
|
+
const info = "_info_7kyyn_58";
|
|
14
|
+
const brand = "_brand_7kyyn_63";
|
|
15
|
+
const sale = "_sale_7kyyn_68";
|
|
16
|
+
const white = "_white_7kyyn_73";
|
|
16
17
|
const styles = {
|
|
17
18
|
badge: badge$1,
|
|
18
19
|
md,
|
|
@@ -24,7 +25,8 @@ const styles = {
|
|
|
24
25
|
success,
|
|
25
26
|
info,
|
|
26
27
|
brand,
|
|
27
|
-
sale
|
|
28
|
+
sale,
|
|
29
|
+
white
|
|
28
30
|
};
|
|
29
31
|
const badge = cva(styles.badge, {
|
|
30
32
|
variants: {
|
|
@@ -32,7 +34,7 @@ const badge = cva(styles.badge, {
|
|
|
32
34
|
sm: styles.sm,
|
|
33
35
|
md: styles.md
|
|
34
36
|
},
|
|
35
|
-
|
|
37
|
+
styleVariant: {
|
|
36
38
|
neutral: styles.neutral,
|
|
37
39
|
critical: styles.critical,
|
|
38
40
|
warning: styles.warning,
|
|
@@ -40,33 +42,41 @@ const badge = cva(styles.badge, {
|
|
|
40
42
|
success: styles.success,
|
|
41
43
|
info: styles.info,
|
|
42
44
|
brand: styles.brand,
|
|
43
|
-
sale: styles.sale
|
|
45
|
+
sale: styles.sale,
|
|
46
|
+
white: styles.white
|
|
44
47
|
}
|
|
45
48
|
},
|
|
46
49
|
defaultVariants: {
|
|
47
|
-
size: "md"
|
|
50
|
+
size: "md",
|
|
51
|
+
styleVariant: "neutral"
|
|
48
52
|
}
|
|
49
53
|
});
|
|
50
54
|
const Badge = ({
|
|
51
55
|
children,
|
|
52
56
|
size = "md",
|
|
53
|
-
variant
|
|
57
|
+
variant,
|
|
58
|
+
styleVariant,
|
|
54
59
|
ariaLabel,
|
|
55
60
|
leadingIconProps,
|
|
56
61
|
trailingIconProps,
|
|
62
|
+
iconStartProps,
|
|
63
|
+
iconEndProps,
|
|
57
64
|
focusStyle = "default",
|
|
58
65
|
className,
|
|
59
66
|
...props
|
|
60
67
|
}) => {
|
|
68
|
+
const resolvedIconStartProps = iconStartProps ?? leadingIconProps;
|
|
69
|
+
const resolvedIconEndProps = iconEndProps ?? trailingIconProps;
|
|
70
|
+
const resolvedStyleVariant = styleVariant ?? variant;
|
|
61
71
|
return /* @__PURE__ */ jsxs("span", { className: `${badge({
|
|
62
72
|
size,
|
|
63
|
-
|
|
73
|
+
styleVariant: resolvedStyleVariant
|
|
64
74
|
})} ${focusStyleVariants({
|
|
65
75
|
focusStyle
|
|
66
76
|
})} ${className || ""}`, role: "status", "aria-label": ariaLabel, ...props, children: [
|
|
67
|
-
|
|
77
|
+
resolvedIconStartProps && /* @__PURE__ */ jsx(Icon, { ...resolvedIconStartProps }),
|
|
68
78
|
children,
|
|
69
|
-
|
|
79
|
+
resolvedIconEndProps && /* @__PURE__ */ jsx(Icon, { ...resolvedIconEndProps })
|
|
70
80
|
] });
|
|
71
81
|
};
|
|
72
82
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,29 +3,31 @@ import React from "react";
|
|
|
3
3
|
import { Icon } from "../Icon/Icon.js";
|
|
4
4
|
import { c as cva } from "../../index-Bi3v_EjJ.js";
|
|
5
5
|
import { IconButton } from "../IconButton/IconButton.js";
|
|
6
|
-
import '../../assets/CalloutBanner.css';const calloutBanner$1 = "
|
|
7
|
-
const calloutBanner__icon = "
|
|
8
|
-
const calloutBanner__start = "
|
|
9
|
-
const calloutBanner__dismiss = "
|
|
10
|
-
const calloutBanner__meta = "
|
|
11
|
-
const calloutBanner__end = "
|
|
6
|
+
import '../../assets/CalloutBanner.css';const calloutBanner$1 = "_calloutBanner_kxqgt_1";
|
|
7
|
+
const calloutBanner__icon = "_calloutBanner__icon_kxqgt_12";
|
|
8
|
+
const calloutBanner__start = "_calloutBanner__start_kxqgt_16";
|
|
9
|
+
const calloutBanner__dismiss = "_calloutBanner__dismiss_kxqgt_24";
|
|
10
|
+
const calloutBanner__meta = "_calloutBanner__meta_kxqgt_30";
|
|
11
|
+
const calloutBanner__end = "_calloutBanner__end_kxqgt_75";
|
|
12
12
|
const styles = {
|
|
13
13
|
calloutBanner: calloutBanner$1,
|
|
14
14
|
calloutBanner__icon,
|
|
15
15
|
calloutBanner__start,
|
|
16
16
|
calloutBanner__dismiss,
|
|
17
17
|
calloutBanner__meta,
|
|
18
|
-
"calloutBanner__meta-
|
|
19
|
-
"calloutBanner__meta-
|
|
20
|
-
"calloutBanner__meta-
|
|
18
|
+
"calloutBanner__meta-top": "_calloutBanner__meta-top_kxqgt_46",
|
|
19
|
+
"calloutBanner__meta-top-dismiss": "_calloutBanner__meta-top-dismiss_kxqgt_54",
|
|
20
|
+
"calloutBanner__meta-title": "_calloutBanner__meta-title_kxqgt_58",
|
|
21
|
+
"calloutBanner__meta-description": "_calloutBanner__meta-description_kxqgt_62",
|
|
22
|
+
"calloutBanner__meta-label": "_calloutBanner__meta-label_kxqgt_66",
|
|
21
23
|
calloutBanner__end,
|
|
22
|
-
"calloutBanner-critical": "_calloutBanner-
|
|
23
|
-
"calloutBanner-primary": "_calloutBanner-
|
|
24
|
-
"calloutBanner-secondary": "_calloutBanner-
|
|
25
|
-
"calloutBanner-tertiary": "_calloutBanner-
|
|
26
|
-
"calloutBanner-success": "_calloutBanner-
|
|
27
|
-
"calloutBanner-information": "_calloutBanner-
|
|
28
|
-
"calloutBanner-neutral": "_calloutBanner-
|
|
24
|
+
"calloutBanner-critical": "_calloutBanner-critical_kxqgt_83",
|
|
25
|
+
"calloutBanner-primary": "_calloutBanner-primary_kxqgt_87",
|
|
26
|
+
"calloutBanner-secondary": "_calloutBanner-secondary_kxqgt_91",
|
|
27
|
+
"calloutBanner-tertiary": "_calloutBanner-tertiary_kxqgt_100",
|
|
28
|
+
"calloutBanner-success": "_calloutBanner-success_kxqgt_109",
|
|
29
|
+
"calloutBanner-information": "_calloutBanner-information_kxqgt_135",
|
|
30
|
+
"calloutBanner-neutral": "_calloutBanner-neutral_kxqgt_161"
|
|
29
31
|
};
|
|
30
32
|
const calloutBanner = cva(styles.calloutBanner, {
|
|
31
33
|
variants: {
|
|
@@ -69,6 +71,7 @@ const CalloutBanner = ({
|
|
|
69
71
|
return "circle-exclamation";
|
|
70
72
|
}
|
|
71
73
|
}, [emphasis]);
|
|
74
|
+
const hasOnDismiss = typeof onDismiss === "function";
|
|
72
75
|
return /* @__PURE__ */ jsxs("div", { className: calloutBanner({
|
|
73
76
|
emphasis,
|
|
74
77
|
styleVariant
|
|
@@ -76,13 +79,15 @@ const CalloutBanner = ({
|
|
|
76
79
|
/* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__start"], children: [
|
|
77
80
|
/* @__PURE__ */ jsx(Icon, { iconName, iconPrefix: "fas", className: styles["calloutBanner__icon"], iconSize: "1.25x", padding: "roomy" }),
|
|
78
81
|
/* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__meta"], children: [
|
|
79
|
-
|
|
82
|
+
hasOnDismiss && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__dismiss"], children: /* @__PURE__ */ jsx(IconButton, { onClick: onDismiss, styleVariant: emphasis === "primary" ? "white" : "neutral", emphasis: "quaternary", size: "sm", iconProps: {
|
|
80
83
|
iconName: "close",
|
|
81
84
|
iconPrefix: "far",
|
|
82
85
|
iconSize: "1x"
|
|
83
86
|
}, tooltipLabel: "Dismiss banner", "aria-label": "Dismiss banner" }) }),
|
|
84
|
-
/* @__PURE__ */
|
|
85
|
-
|
|
87
|
+
/* @__PURE__ */ jsxs("div", { className: `${styles["calloutBanner__meta-top"]} ${hasOnDismiss ? styles["calloutBanner__meta-top-dismiss"] : ""}`, children: [
|
|
88
|
+
/* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-title"], children: title }),
|
|
89
|
+
description && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-description"], children: description })
|
|
90
|
+
] }),
|
|
86
91
|
label && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-label"], children: label })
|
|
87
92
|
] })
|
|
88
93
|
] }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalloutBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CalloutBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -35,7 +35,7 @@ const CreditCardNumberField = ({
|
|
|
35
35
|
onChangeControlled(values.value);
|
|
36
36
|
}
|
|
37
37
|
setValue(values.value);
|
|
38
|
-
} }),
|
|
38
|
+
}, autoComplete: "cc-number" }),
|
|
39
39
|
/* @__PURE__ */ jsx(Icon, { iconName: cardIcon, iconPrefix: cardIcon === "credit-card" ? "fas" : "fab", className: styles.iconEnd, iconSize: "1.25x", padding: "roomy" })
|
|
40
40
|
] }) });
|
|
41
41
|
};
|
|
@@ -30,6 +30,11 @@ export interface CreditCardSecurityCodeFieldProps extends Omit<FieldProps<Omit<A
|
|
|
30
30
|
* Expects a DetailsDisclosure component for further information.
|
|
31
31
|
*/
|
|
32
32
|
children?: React.ReactNode;
|
|
33
|
+
/**
|
|
34
|
+
* Digits allowed in the input
|
|
35
|
+
* @default 3
|
|
36
|
+
*/
|
|
37
|
+
digits?: number;
|
|
33
38
|
}
|
|
34
|
-
export declare const CreditCardSecurityCodeField: ({ defaultValue, value: valueControlled, onChange: onChangeControlled, label, cardIcon, ...props }: CreditCardSecurityCodeFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
export declare const CreditCardSecurityCodeField: ({ defaultValue, value: valueControlled, onChange: onChangeControlled, label, cardIcon, digits, ...props }: CreditCardSecurityCodeFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
35
40
|
export default CreditCardSecurityCodeField;
|
|
@@ -17,18 +17,19 @@ const CreditCardSecurityCodeField = ({
|
|
|
17
17
|
onChange: onChangeControlled,
|
|
18
18
|
label = "Card security code",
|
|
19
19
|
cardIcon = "back",
|
|
20
|
+
digits = 3,
|
|
20
21
|
...props
|
|
21
22
|
}) => {
|
|
22
23
|
const [value, setValue] = React.useState(defaultValue);
|
|
23
24
|
const valueDefinitive = valueControlled ?? value;
|
|
24
25
|
return /* @__PURE__ */ jsxs(Field, { className: styles.creditCardSecurityCodeField, as: TextField, label, isRequired: true, ...props, children: [
|
|
25
26
|
/* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
|
|
26
|
-
/* @__PURE__ */ jsx(PatternFormat, { type: "text", format: "
|
|
27
|
+
/* @__PURE__ */ jsx(PatternFormat, { type: "text", format: `${"#".repeat(digits)}`, customInput: Input, placeholder: props == null ? void 0 : props.placeholder, defaultValue, value: valueDefinitive, onValueChange: (values) => {
|
|
27
28
|
if (typeof onChangeControlled === "function") {
|
|
28
29
|
onChangeControlled(values.value);
|
|
29
30
|
}
|
|
30
31
|
setValue(values.value);
|
|
31
|
-
} }),
|
|
32
|
+
}, autoComplete: "cc-csc" }),
|
|
32
33
|
/* @__PURE__ */ jsx(CreditCardSecurityCodeIcon, { cardIcon })
|
|
33
34
|
] }),
|
|
34
35
|
(props == null ? void 0 : props.children) && /* @__PURE__ */ jsx("div", { className: styles.inputChildren, children: props.children })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreditCardSecurityCodeField.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CreditCardSecurityCodeField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { DateField as DateField$1, DateInput, DateSegment } from "react-aria-components";
|
|
3
3
|
import { Field } from "../_base/Field/Field.js";
|
|
4
4
|
import { useMemo, useState } from "react";
|
|
5
|
-
import '../../assets/DateField.css';const dateField = "
|
|
6
|
-
const dateInput = "
|
|
7
|
-
const dateSegment = "
|
|
5
|
+
import '../../assets/DateField.css';const dateField = "_dateField_1fojc_1";
|
|
6
|
+
const dateInput = "_dateInput_1fojc_5";
|
|
7
|
+
const dateSegment = "_dateSegment_1fojc_50";
|
|
8
8
|
const styles = {
|
|
9
9
|
dateField,
|
|
10
10
|
dateInput,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { c as cva } from "../../index-Bi3v_EjJ.js";
|
|
3
|
-
import '../../assets/Eyebrow.css';const eyebrow$1 = "
|
|
4
|
-
const inspiration = "
|
|
5
|
-
const collect = "
|
|
6
|
-
const spend = "
|
|
7
|
-
const activate = "
|
|
3
|
+
import '../../assets/Eyebrow.css';const eyebrow$1 = "_eyebrow_ie5k8_1";
|
|
4
|
+
const inspiration = "_inspiration_ie5k8_14";
|
|
5
|
+
const collect = "_collect_ie5k8_19";
|
|
6
|
+
const spend = "_spend_ie5k8_24";
|
|
7
|
+
const activate = "_activate_ie5k8_29";
|
|
8
8
|
const styles = {
|
|
9
9
|
eyebrow: eyebrow$1,
|
|
10
10
|
inspiration,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
2
3
|
import { Icon } from "../Icon/Icon.js";
|
|
3
4
|
import { c as cva } from "../../index-Bi3v_EjJ.js";
|
|
4
5
|
import { Link as Link$1 } from "react-aria-components";
|
|
@@ -70,6 +71,20 @@ const Link = ({
|
|
|
70
71
|
rel: "noopener noreferrer",
|
|
71
72
|
"aria-label": ariaLabelExternal
|
|
72
73
|
} : {};
|
|
74
|
+
const iconSize = useMemo(() => {
|
|
75
|
+
switch (size) {
|
|
76
|
+
case "xs":
|
|
77
|
+
return "0.75x";
|
|
78
|
+
case "sm":
|
|
79
|
+
return "0.75x";
|
|
80
|
+
case "md":
|
|
81
|
+
return "1x";
|
|
82
|
+
case "lg":
|
|
83
|
+
return "1.25x";
|
|
84
|
+
default:
|
|
85
|
+
return "1x";
|
|
86
|
+
}
|
|
87
|
+
}, [size]);
|
|
73
88
|
return /* @__PURE__ */ jsxs(Link$1, { className: `${link({
|
|
74
89
|
size,
|
|
75
90
|
underline: underline2
|
|
@@ -80,11 +95,11 @@ const Link = ({
|
|
|
80
95
|
})}`, href, target, ...externalLinkProps, ...props, children: [
|
|
81
96
|
iconStartProps && /* @__PURE__ */ jsx(Icon, { className: link({
|
|
82
97
|
iconStart: !!iconStartProps
|
|
83
|
-
}), ...iconStartProps }),
|
|
98
|
+
}), iconSize, ...iconStartProps }),
|
|
84
99
|
children || linkText,
|
|
85
100
|
finalIconEndProps && /* @__PURE__ */ jsx(Icon, { className: link({
|
|
86
101
|
iconEnd: !!finalIconEndProps
|
|
87
|
-
}), ...finalIconEndProps })
|
|
102
|
+
}), iconSize, ...finalIconEndProps })
|
|
88
103
|
] });
|
|
89
104
|
};
|
|
90
105
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alto-avios/alto-ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"description": "A react component library for Alto Design System",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Ian Caldwell IAGL",
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
"wait-on": "^8.0.1"
|
|
109
109
|
},
|
|
110
110
|
"peerDependencies": {
|
|
111
|
-
"@alto-avios/alto-tokens": "^3.
|
|
111
|
+
"@alto-avios/alto-tokens": "^3.2.0",
|
|
112
112
|
"react": "^18.0.0"
|
|
113
113
|
},
|
|
114
114
|
"main": "dist/index.js",
|