@alto-avios/alto-ui 3.2.0 → 3.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/assets/Accordion.css +1 -1
  2. package/dist/assets/CalloutBanner.css +1 -1
  3. package/dist/assets/CreditCardNumberField.css +1 -1
  4. package/dist/assets/CreditCardSecurityCodeField.css +1 -0
  5. package/dist/assets/Image.css +1 -1
  6. package/dist/assets/PhoneNumberField.css +1 -1
  7. package/dist/assets/Section.css +1 -1
  8. package/dist/components/Accordion/Accordion.js +15 -15
  9. package/dist/components/CalloutBanner/CalloutBanner.js +16 -16
  10. package/dist/components/CreditCardNumberField/CreditCardNumberField.js +3 -3
  11. package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.d.ts +35 -0
  12. package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js +65 -0
  13. package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js.map +1 -0
  14. package/dist/components/CreditCardSecurityCodeField/index.d.ts +1 -0
  15. package/dist/components/CreditCardSecurityCodeField/index.js +5 -0
  16. package/dist/components/CreditCardSecurityCodeField/index.js.map +1 -0
  17. package/dist/components/Image/Image.js +6 -6
  18. package/dist/components/PhoneNumberField/PhoneNumberField.js +4 -4
  19. package/dist/components/Section/Section.d.ts +6 -2
  20. package/dist/components/Section/Section.js +42 -14
  21. package/dist/components/Section/Section.js.map +1 -1
  22. package/dist/components/SelectNative/SelectNative.d.ts +6 -1
  23. package/dist/components/SelectNative/SelectNative.js +7 -1
  24. package/dist/components/SelectNative/SelectNative.js.map +1 -1
  25. package/dist/components/TagGroup/TagGroup.d.ts +21 -1
  26. package/dist/components/TagGroup/TagGroup.js +6 -2
  27. package/dist/components/TagGroup/TagGroup.js.map +1 -1
  28. package/dist/components/index.d.ts +1 -0
  29. package/dist/components/index.js +2 -0
  30. package/dist/components/index.js.map +1 -1
  31. package/dist/index.js +2 -0
  32. package/dist/index.js.map +1 -1
  33. package/package.json +1 -1
@@ -1 +1 @@
1
- ._accordion_1x2oh_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_1x2oh_14,._accordionStack_1x2oh_20{display:flex;flex-direction:column;gap:var(--alto-sem-space-2xs)}._accordionHeader_1x2oh_26{display:flex;flex-direction:column;gap:var(--alto-sem-space-4xs);padding-bottom:var(--alto-sem-space-2xs)}._trigger_1x2oh_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_1x2oh_42{align-items:center;display:flex;gap:var(--alto-sem-space-sm);justify-content:space-between;width:100%}._titleContainer_1x2oh_50{align-items:center;display:flex;flex:1;gap:var(--alto-sem-space-2xs)}._titleWrapper_1x2oh_57{display:flex;flex-direction:column}._endContainer_1x2oh_62{gap:var(--alto-sem-space-sm)}._endContainer_1x2oh_62,._titleEnd_1x2oh_69,._titleStart_1x2oh_68{align-items:center;display:flex}._accordionTitle_1x2oh_74{color:var(--alto-sem-color-fg-primary);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_1x2oh_87,._accordionTitle_1x2oh_74{font-family:var(--alto-sem-text-body-font-family);margin:0}._accordionDescription_1x2oh_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_1x2oh_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)}[data-expanded=true] ._iconWrapper_1x2oh_96{transform:rotate(180deg)}[role=group]{height:0;overflow:hidden;visibility:hidden;width:100%}[data-expanded=true] [role=group],[role=group]{transition:height var(--accordion-transition-duration) var(--accordion-transition-timing),visibility 0ms linear}[data-expanded=true] [role=group]{height:var(--group-height);visibility:visible}._panelContent_1x2oh_129{padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm) var(--alto-sem-space-2xl)}[data-expanded=true] ._trigger_1x2oh_33,[data-expanded=true]._accordion_1x2oh_1{background-color:var(--alto-sem-color-bg-layer1-default)}._trigger_1x2oh_33[data-hovered]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}._trigger_1x2oh_33[data-focus-visible]{box-shadow:0 0 0 2px var(--alto-sem-color-border-accent);outline:none}._trigger_1x2oh_33[data-pressed]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active);outline:none}[data-expanded=true] ._trigger_1x2oh_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}._trigger_1x2oh_33[data-focused]{outline:none}._trigger_1x2oh_33[data-disabled]{background-color:var(--alto-sem-color-bg-disabled-subtle);cursor:not-allowed}._trigger_1x2oh_33[data-disabled],._trigger_1x2oh_33[data-disabled] ._accordionDescription_1x2oh_87,._trigger_1x2oh_33[data-disabled] ._accordionTitle_1x2oh_74,._trigger_1x2oh_33[data-disabled] ._iconWrapper_1x2oh_96{color:var(--alto-sem-color-fg-disabled-on-subtle)}[data-disabled]._accordion_1x2oh_1{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}
1
+ ._accordion_1i793_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_1i793_14,._accordionStack_1i793_20{display:flex;flex-direction:column;gap:var(--alto-sem-space-2xs)}._accordionHeader_1i793_26{display:flex;flex-direction:column;gap:var(--alto-sem-space-4xs);padding-bottom:var(--alto-sem-space-2xs)}._trigger_1i793_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_1i793_42{align-items:center;display:flex;gap:var(--alto-sem-space-sm);justify-content:space-between;width:100%}._titleContainer_1i793_50{align-items:center;display:flex;flex:1;gap:var(--alto-sem-space-2xs)}._titleWrapper_1i793_57{display:flex;flex-direction:column}._endContainer_1i793_62{gap:var(--alto-sem-space-sm)}._endContainer_1i793_62,._titleEnd_1i793_69,._titleStart_1i793_68{align-items:center;display:flex}._accordionTitle_1i793_74{color:var(--alto-sem-color-fg-primary);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_1i793_87,._accordionTitle_1i793_74{font-family:var(--alto-sem-text-body-font-family);margin:0}._accordionDescription_1i793_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_1i793_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_1i793_1[data-expanded=true] ._iconWrapper_1i793_96{transform:rotate(180deg)}._accordion_1i793_1 [role=group]{height:0;overflow:hidden;visibility:hidden;width:100%}._accordion_1i793_1 [role=group],._accordion_1i793_1[data-expanded=true] [role=group]{transition:height var(--accordion-transition-duration) var(--accordion-transition-timing),visibility 0ms linear}._accordion_1i793_1[data-expanded=true] [role=group]{height:var(--group-height);visibility:visible}._panelContent_1i793_129{padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm) var(--alto-sem-space-2xl)}._accordion_1i793_1[data-expanded=true],._accordion_1i793_1[data-expanded=true] ._trigger_1i793_33{background-color:var(--alto-sem-color-bg-layer1-default)}._accordion_1i793_1 ._trigger_1i793_33[data-hovered]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}._accordion_1i793_1 ._trigger_1i793_33[data-focus-visible]{box-shadow:0 0 0 2px var(--alto-sem-color-border-accent);outline:none}._accordion_1i793_1 ._trigger_1i793_33[data-pressed]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active);outline:none}._accordion_1i793_1[data-expanded=true] ._trigger_1i793_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_1i793_1 ._trigger_1i793_33[data-focused]{outline:none}._accordion_1i793_1 ._trigger_1i793_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_1i793_1 ._trigger_1i793_33[data-disabled] ._iconWrapper_1i793_96,._trigger_1i793_33[data-disabled] ._accordionDescription_1i793_87,._trigger_1i793_33[data-disabled] ._accordionTitle_1i793_74{color:var(--alto-sem-color-fg-disabled-on-subtle)}._accordion_1i793_1[data-disabled]{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}
@@ -1 +1 @@
1
- ._calloutBanner_1o7bw_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;width:100%}._calloutBanner__icon_1o7bw_11{align-self:flex-start}._calloutBanner__start_1o7bw_15{display:flex;flex-direction:row;gap:var(--alto-sem-space-xs);padding:var(--alto-sem-space-xs);position:relative}._calloutBanner__dismiss_1o7bw_23{position:absolute;right:var(--alto-sem-space-xs);top:var(--alto-sem-space-xs)}._calloutBanner__meta_1o7bw_29{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)}._calloutBanner__meta-title_1o7bw_41{font-weight:600}._calloutBanner__meta-description_1o7bw_45{margin-top:var(--alto-sem-space-4xs)}._calloutBanner__meta-label_1o7bw_49{margin-top:var(--alto-sem-space-xs)}._calloutBanner__start_1o7bw_15{border-bottom:var(--alto-sem-border-width-sm) solid transparent;color:var(--alto-sem-color-fg-critical-on-vibrant)}._calloutBanner__end_1o7bw_58{background-color:var(--alto-sem-color-bg-layer2-default);display:flex;justify-content:flex-start;padding:var(--alto-sem-space-sm,16px)}._calloutBanner-critical_1o7bw_66{border-color:var(--alto-sem-color-border-critical)}._calloutBanner-primary_1o7bw_70._calloutBanner-critical_1o7bw_66 ._calloutBanner__start_1o7bw_15{background:var(--alto-sem-color-bg-critical-vibrant-default)}._calloutBanner-secondary_1o7bw_74._calloutBanner-critical_1o7bw_66 ._calloutBanner__start_1o7bw_15{background:var(--alto-sem-color-bg-critical-subtle-default);border-bottom:1px solid var(--alto-sem-color-border-critical);color:var(--alto-sem-color-fg-primary)}._calloutBanner-tertiary_1o7bw_80._calloutBanner-critical_1o7bw_66 ._calloutBanner__start_1o7bw_15{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-critical_1o7bw_66:not(._calloutBanner-primary_1o7bw_70) ._calloutBanner__icon_1o7bw_11{color:var(--alto-sem-color-fg-critical-primary)}._calloutBanner-success_1o7bw_89{border-color:var(--alto-sem-color-border-success)}._calloutBanner-primary_1o7bw_70._calloutBanner-success_1o7bw_89 ._calloutBanner__start_1o7bw_15{background:var(--alto-sem-color-bg-success-vibrant-default)}._calloutBanner-secondary_1o7bw_74._calloutBanner-success_1o7bw_89 ._calloutBanner__start_1o7bw_15{background:var(--alto-sem-color-bg-success-subtle-default);border-bottom:1px solid var(--alto-sem-color-border-success);color:var(--alto-sem-color-fg-primary)}._calloutBanner-tertiary_1o7bw_80._calloutBanner-success_1o7bw_89 ._calloutBanner__start_1o7bw_15{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-success_1o7bw_89:not(._calloutBanner-primary_1o7bw_70) ._calloutBanner__icon_1o7bw_11{color:var(--alto-sem-color-fg-success-primary)}._calloutBanner-information_1o7bw_112{border-color:var(--alto-sem-color-border-information)}._calloutBanner-primary_1o7bw_70._calloutBanner-information_1o7bw_112 ._calloutBanner__start_1o7bw_15{background:var(--alto-sem-color-bg-information-vibrant-default)}._calloutBanner-secondary_1o7bw_74._calloutBanner-information_1o7bw_112 ._calloutBanner__start_1o7bw_15{background:var(--alto-sem-color-bg-information-subtle-default);border-bottom:1px solid var(--alto-sem-color-border-information);color:var(--alto-sem-color-fg-primary)}._calloutBanner-tertiary_1o7bw_80._calloutBanner-information_1o7bw_112 ._calloutBanner__start_1o7bw_15{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-information_1o7bw_112:not(._calloutBanner-primary_1o7bw_70) ._calloutBanner__icon_1o7bw_11{color:var(--alto-sem-color-fg-information-primary)}._calloutBanner-neutral_1o7bw_135{border-color:var(--alto-sem-color-border-secondary)}._calloutBanner-primary_1o7bw_70._calloutBanner-neutral_1o7bw_135 ._calloutBanner__start_1o7bw_15{background:var(--alto-sem-color-bg-inverse-vibrant-default)}._calloutBanner-secondary_1o7bw_74._calloutBanner-neutral_1o7bw_135 ._calloutBanner__start_1o7bw_15{background:var(--alto-sem-color-bg-layer1-default);border-bottom:1px solid var(--alto-sem-color-border-secondary);color:var(--alto-sem-color-fg-primary)}._calloutBanner-tertiary_1o7bw_80._calloutBanner-neutral_1o7bw_135 ._calloutBanner__start_1o7bw_15{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-neutral_1o7bw_135:not(._calloutBanner-primary_1o7bw_70) ._calloutBanner__icon_1o7bw_11{color:var(--alto-sem-color-fg-neutral-primary)}._calloutBanner-tertiary_1o7bw_80{border-color:transparent}._calloutBanner-tertiary_1o7bw_80 ._calloutBanner__end_1o7bw_58{border-radius:var(--alto-card-radius)}
1
+ ._calloutBanner_kvv8j_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;width:100%}._calloutBanner__icon_kvv8j_11{align-self:flex-start}._calloutBanner__start_kvv8j_15{display:flex;flex-direction:row;gap:var(--alto-sem-space-xs);padding:var(--alto-sem-space-xs);position:relative}._calloutBanner__dismiss_kvv8j_23{position:absolute;right:var(--alto-sem-space-xs);top:var(--alto-sem-space-xs)}._calloutBanner__meta_kvv8j_29{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)}._calloutBanner__meta-title_kvv8j_41{font-weight:600}._calloutBanner__meta-description_kvv8j_45{margin-top:var(--alto-sem-space-4xs)}._calloutBanner__meta-label_kvv8j_49{margin-top:var(--alto-sem-space-xs)}._calloutBanner__start_kvv8j_15{border-bottom:var(--alto-sem-border-width-sm) solid transparent;color:var(--alto-sem-color-fg-critical-on-vibrant)}._calloutBanner__end_kvv8j_58{background-color:var(--alto-sem-color-bg-layer2-default);display:flex;justify-content:flex-start;padding:var(--alto-sem-space-sm,16px)}._calloutBanner-critical_kvv8j_66{border-color:var(--alto-sem-color-border-critical)}._calloutBanner-primary_kvv8j_70._calloutBanner-critical_kvv8j_66 ._calloutBanner__start_kvv8j_15{background:var(--alto-sem-color-bg-critical-vibrant-default)}._calloutBanner-secondary_kvv8j_74._calloutBanner-critical_kvv8j_66 ._calloutBanner__start_kvv8j_15{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kvv8j_74._calloutBanner-critical_kvv8j_66 ._calloutBanner__end_kvv8j_58{border-top:1px solid var(--alto-sem-color-border-critical)}._calloutBanner-tertiary_kvv8j_83._calloutBanner-critical_kvv8j_66 ._calloutBanner__start_kvv8j_15{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-critical_kvv8j_66:not(._calloutBanner-primary_kvv8j_70) ._calloutBanner__icon_kvv8j_11{color:var(--alto-sem-color-fg-critical-primary)}._calloutBanner-success_kvv8j_92{border-color:var(--alto-sem-color-border-success)}._calloutBanner-primary_kvv8j_70._calloutBanner-success_kvv8j_92 ._calloutBanner__start_kvv8j_15{background:var(--alto-sem-color-bg-success-vibrant-default)}._calloutBanner-secondary_kvv8j_74._calloutBanner-success_kvv8j_92 ._calloutBanner__start_kvv8j_15{background:var(--alto-sem-color-bg-success-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kvv8j_74._calloutBanner-success_kvv8j_92 ._calloutBanner__end_kvv8j_58{border-top:1px solid var(--alto-sem-color-border-success)}._calloutBanner-tertiary_kvv8j_83._calloutBanner-success_kvv8j_92 ._calloutBanner__start_kvv8j_15{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-success_kvv8j_92:not(._calloutBanner-primary_kvv8j_70) ._calloutBanner__icon_kvv8j_11{color:var(--alto-sem-color-fg-success-primary)}._calloutBanner-information_kvv8j_118{border-color:var(--alto-sem-color-border-information)}._calloutBanner-primary_kvv8j_70._calloutBanner-information_kvv8j_118 ._calloutBanner__start_kvv8j_15{background:var(--alto-sem-color-bg-information-vibrant-default)}._calloutBanner-secondary_kvv8j_74._calloutBanner-information_kvv8j_118 ._calloutBanner__start_kvv8j_15{background:var(--alto-sem-color-bg-information-subtle-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kvv8j_74._calloutBanner-information_kvv8j_118 ._calloutBanner__end_kvv8j_58{border-top:1px solid var(--alto-sem-color-border-information)}._calloutBanner-tertiary_kvv8j_83._calloutBanner-information_kvv8j_118 ._calloutBanner__start_kvv8j_15{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-information_kvv8j_118:not(._calloutBanner-primary_kvv8j_70) ._calloutBanner__icon_kvv8j_11{color:var(--alto-sem-color-fg-information-primary)}._calloutBanner-neutral_kvv8j_144{border-color:var(--alto-sem-color-border-secondary)}._calloutBanner-primary_kvv8j_70._calloutBanner-neutral_kvv8j_144 ._calloutBanner__start_kvv8j_15{background:var(--alto-sem-color-bg-inverse-vibrant-default)}._calloutBanner-secondary_kvv8j_74._calloutBanner-neutral_kvv8j_144 ._calloutBanner__start_kvv8j_15{background:var(--alto-sem-color-bg-layer1-default);color:var(--alto-sem-color-fg-primary)}._calloutBanner-secondary_kvv8j_74._calloutBanner-neutral_kvv8j_144 ._calloutBanner__end_kvv8j_58{border-top:1px solid var(--alto-sem-color-border-secondary)}._calloutBanner-tertiary_kvv8j_83._calloutBanner-neutral_kvv8j_144 ._calloutBanner__start_kvv8j_15{background:transparent;color:var(--alto-sem-color-fg-primary)}._calloutBanner-neutral_kvv8j_144:not(._calloutBanner-primary_kvv8j_70) ._calloutBanner__icon_kvv8j_11{color:var(--alto-sem-color-fg-neutral-primary)}._calloutBanner-tertiary_kvv8j_83{border-color:transparent}._calloutBanner-tertiary_kvv8j_83 ._calloutBanner__end_kvv8j_58{border-radius:var(--alto-card-radius)}
@@ -1 +1 @@
1
- ._creditCardNumberField_1d9o2_1{color:var(--alto-sem-color-fg-primary);display:flex;flex-direction:column;font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);width:100%}._creditCardNumberField_1d9o2_1 input{align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-input-radius);box-sizing:border-box;display:flex;font-size:var(--alto-sem-text-body-md-font-size);height:48px;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%}._creditCardNumberField_1d9o2_1 input[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle)}._creditCardNumberField_1d9o2_1 input[data-hovered]{border:1px solid var(--alto-sem-color-border-primary-hover)}._creditCardNumberField_1d9o2_1 input[data-pressed]{border:1px solid var(--alto-sem-color-border-primary-active)}._creditCardNumberField_1d9o2_1 input[data-invalid]{border:2px solid var(--alto-sem-color-border-critical)}._creditCardNumberField_1d9o2_1 ._inputWrapper_1d9o2_45{align-items:center;display:flex;position:relative}._creditCardNumberField_1d9o2_1 ._iconEnd_1d9o2_51{color:var(--alto-sem-color-fg-secondary);padding-right:var(--alto-sem-space-sm);position:absolute;right:0}._creditCardNumberField_1d9o2_1:has(._iconEnd_1d9o2_51) input{padding-right:44px}
1
+ ._creditCardNumberField_1wvso_1{color:var(--alto-sem-color-fg-primary);display:flex;flex-direction:column;font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);width:100%}._creditCardNumberField_1wvso_1 input{align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-input-radius);box-sizing:border-box;display:flex;font-size:var(--alto-sem-text-body-md-font-size);height:48px;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%}._creditCardNumberField_1wvso_1 input[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle)}._creditCardNumberField_1wvso_1 input[data-hovered]:not([data-disabled]){border:1px solid var(--alto-sem-color-border-primary-hover)}._creditCardNumberField_1wvso_1 input[data-pressed]:not([data-disabled]){border:1px solid var(--alto-sem-color-border-primary-active)}._creditCardNumberField_1wvso_1 input[data-invalid]{border:2px solid var(--alto-sem-color-border-critical)}._creditCardNumberField_1wvso_1 ._inputWrapper_1wvso_45{align-items:center;display:flex;position:relative}._creditCardNumberField_1wvso_1 ._iconEnd_1wvso_51{color:var(--alto-sem-color-fg-secondary);padding-right:var(--alto-sem-space-sm);position:absolute;right:0}._creditCardNumberField_1wvso_1:has(._iconEnd_1wvso_51) input{padding-right:44px}
@@ -0,0 +1 @@
1
+ ._creditCardSecurityCodeField_14mb2_1{color:var(--alto-sem-color-fg-primary);display:flex;flex-direction:column;font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);text-align:left;width:100%}._creditCardSecurityCodeField_14mb2_1 ._inputWrapper_14mb2_11{align-items:center;display:flex;gap:var(--alto-sem-space-2xs)}._creditCardSecurityCodeField_14mb2_1 input{background:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-input-radius);box-sizing:border-box;display:flex;font-size:var(--alto-sem-text-body-md-font-size);height:48px;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);max-width:305px;padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm);width:100%}._creditCardSecurityCodeField_14mb2_1 input[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle)}._creditCardSecurityCodeField_14mb2_1 input[data-hovered]:not([data-disabled]){border:1px solid var(--alto-sem-color-border-primary-hover)}._creditCardSecurityCodeField_14mb2_1 input[data-pressed]:not([data-disabled]){border:1px solid var(--alto-sem-color-border-primary-active)}._creditCardSecurityCodeField_14mb2_1 input[data-invalid]{border:2px solid var(--alto-sem-color-border-critical)}._creditCardSecurityCodeField_14mb2_1 svg{flex-shrink:0}._creditCardSecurityCodeField_14mb2_1 ._inputChildren_14mb2_54{margin-top:var(--alto-sem-space-2xs)}
@@ -1 +1 @@
1
- ._image_z82es_1{opacity:0;transition:opacity .3s ease-in-out}[data-loaded=true]{opacity:1}._fill_z82es_10{-o-object-fit:fill;object-fit:fill}._contain_z82es_14{-o-object-fit:contain;object-fit:contain}._cover_z82es_18{-o-object-fit:cover;object-fit:cover}._none_z82es_22{-o-object-fit:none;object-fit:none}._scaleDown_z82es_26{-o-object-fit:scale-down;object-fit:scale-down}
1
+ ._image_1dojz_1{opacity:0;transition:opacity .3s ease-in-out}._image_1dojz_1[data-loaded=true]{opacity:1}._fill_1dojz_10{-o-object-fit:fill;object-fit:fill}._contain_1dojz_14{-o-object-fit:contain;object-fit:contain}._cover_1dojz_18{-o-object-fit:cover;object-fit:cover}._none_1dojz_22{-o-object-fit:none;object-fit:none}._scaleDown_1dojz_26{-o-object-fit:scale-down;object-fit:scale-down}
@@ -1 +1 @@
1
- ._phoneNumberField_1udln_1{align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border:1px solid;border-color:var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-sm);box-sizing:border-box;display:flex;flex-direction:row;font-size:var(--alto-sem-text-body-md-font-size);height:48px;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);width:100%}input::-moz-placeholder{font-weight:700;opacity:.5}input::placeholder{font-weight:700;opacity:.5}._phoneNumberField_1udln_1:focus-within:not(:has(select:focus-within)){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)}._phoneNumberField_1udln_1:has(input[data-hovered]){border-color:var(--alto-sem-color-border-primary-hover)}._phoneNumberField_1udln_1:has(input[data-hovered]) ._selectHandlerValue_1udln_34{border-right-color:var(--alto-sem-color-border-primary-hover)}._phoneNumberField_1udln_1:has(select:focus-within){border-color:var(--alto-sem-color-border-primary-active)}._phoneNumberField_1udln_1:has(input[data-focused]){border-color:var(--alto-sem-color-border-primary-active)}._phoneNumberField_1udln_1:has(input[data-focused]) ._selectHandlerValue_1udln_34{border-right-color:var(--alto-sem-color-border-primary-active)}._phoneNumberField_1udln_1:has(input[data-disabled]){background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle)}._phoneNumberField_1udln_1:has(input[data-disabled]) ._selectHandlerValue_1udln_34{border-right:1px solid var(--alto-sem-color-border-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle)}._phoneNumberField_1udln_1:has(input[data-disabled]) select{pointer-events:none}._phoneNumberField_1udln_1:has(input[data-disabled]) ._selectHandlerIcon_1udln_65{opacity:0}._phoneNumberField_1udln_1:has(input[data-invalid]){border:2px solid var(--alto-sem-color-border-critical)}._phoneNumberField_1udln_1:has(input[data-invalid]) ._selectHandlerValue_1udln_34{border-right:1px solid var(--alto-sem-color-border-critical)}._selectWrapper_1udln_77{border:1px solid transparent;flex:1 0 auto;max-width:90px;position:relative;width:100%}._selectWrapper_1udln_77:has(select:focus-within){border-bottom-left-radius:var(--alto-sem-radius-sm);border-color:var(--alto-sem-color-border-accent);border-top-left-radius:var(--alto-sem-radius-sm)}._selectHandlerValue_1udln_34{align-items:center;border-right:1px solid var(--alto-sem-color-border-primary-default);color:var(--alto-sem-color-fg-primary);display:flex;font-size:var(--alto-sem-text-label-sm-font-size);gap:var(--alto-sem-space-2xs);height:48px;justify-content:center;letter-spacing:var(--alto-sem-text-label-sm-letter-spacing);line-height:var(--alto-sem-text-label-sm-line-height);max-width:90px;padding:0 var(--alto-sem-space-xs)}._selectHandlerIcon_1udln_65{color:var(--alto-sem-color-fg-secondary)}._phoneNumberField_1udln_1 select{all:unset;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--alto-sem-color-bg-base);background-position:right var(--alto-sem-space-sm) center;background-repeat:no-repeat;border-radius:var(--alto-sem-radius-sm);cursor:pointer;display:inline-flex;font-size:0;height:48px;left:0;max-width:90px;opacity:0;position:absolute;top:0;width:100%}._phoneNumberField_1udln_1 input{all:unset;align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);background-color:transparent;border-radius:var(--alto-sem-radius-sm);box-sizing:border-box;display:flex;flex:1 1 auto;font-size:var(--alto-sem-text-body-md-font-size);height:48px;justify-content:space-between;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);min-width:200px;padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm);text-align:left;width:100%}
1
+ ._phoneNumberField_trpoz_1{align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border:1px solid;border-color:var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-sm);box-sizing:border-box;display:flex;flex-direction:row;font-size:var(--alto-sem-text-body-md-font-size);height:48px;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);width:100%}._phoneNumberField_trpoz_1 input::-moz-placeholder{font-weight:700;opacity:.5}._phoneNumberField_trpoz_1 input::placeholder{font-weight:700;opacity:.5}._phoneNumberField_trpoz_1:focus-within:not(:has(select:focus-within)){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)}._phoneNumberField_trpoz_1:has(input[data-hovered]){border-color:var(--alto-sem-color-border-primary-hover)}._phoneNumberField_trpoz_1:has(input[data-hovered]) ._selectHandlerValue_trpoz_34{border-right-color:var(--alto-sem-color-border-primary-hover)}._phoneNumberField_trpoz_1:has(select:focus-within){border-color:var(--alto-sem-color-border-primary-active)}._phoneNumberField_trpoz_1:has(input[data-focused]){border-color:var(--alto-sem-color-border-primary-active)}._phoneNumberField_trpoz_1:has(input[data-focused]) ._selectHandlerValue_trpoz_34{border-right-color:var(--alto-sem-color-border-primary-active)}._phoneNumberField_trpoz_1:has(input[data-disabled]){background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle)}._phoneNumberField_trpoz_1:has(input[data-disabled]) ._selectHandlerValue_trpoz_34{border-right:1px solid var(--alto-sem-color-border-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle)}._phoneNumberField_trpoz_1:has(input[data-disabled]) select{pointer-events:none}._phoneNumberField_trpoz_1:has(input[data-disabled]) ._selectHandlerIcon_trpoz_65{opacity:0}._phoneNumberField_trpoz_1:has(input[data-invalid]){border:2px solid var(--alto-sem-color-border-critical)}._phoneNumberField_trpoz_1:has(input[data-invalid]) ._selectHandlerValue_trpoz_34{border-right:1px solid var(--alto-sem-color-border-critical)}._selectWrapper_trpoz_77{border:1px solid transparent;flex:1 0 auto;max-width:90px;position:relative;width:100%}._selectWrapper_trpoz_77:has(select:focus-within){border-bottom-left-radius:var(--alto-sem-radius-sm);border-color:var(--alto-sem-color-border-accent);border-top-left-radius:var(--alto-sem-radius-sm)}._selectHandlerValue_trpoz_34{align-items:center;border-right:1px solid var(--alto-sem-color-border-primary-default);color:var(--alto-sem-color-fg-primary);display:flex;font-size:var(--alto-sem-text-label-sm-font-size);gap:var(--alto-sem-space-2xs);height:48px;justify-content:center;letter-spacing:var(--alto-sem-text-label-sm-letter-spacing);line-height:var(--alto-sem-text-label-sm-line-height);max-width:90px;padding:0 var(--alto-sem-space-xs)}._selectHandlerIcon_trpoz_65{color:var(--alto-sem-color-fg-secondary)}._phoneNumberField_trpoz_1 select{all:unset;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--alto-sem-color-bg-base);background-position:right var(--alto-sem-space-sm) center;background-repeat:no-repeat;border-radius:var(--alto-sem-radius-sm);cursor:pointer;display:inline-flex;font-size:0;height:48px;left:0;max-width:90px;opacity:0;position:absolute;top:0;width:100%}._phoneNumberField_trpoz_1 input{all:unset;align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);background-color:transparent;border-radius:var(--alto-sem-radius-sm);box-sizing:border-box;display:flex;flex:1 1 auto;font-size:var(--alto-sem-text-body-md-font-size);height:48px;justify-content:space-between;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);min-width:200px;padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm);text-align:left;width:100%}
@@ -1 +1 @@
1
- ._section_1lo00_1{flex-direction:column}._container_1lo00_8,._section_1lo00_1{display:flex;position:relative;width:100%}._container_1lo00_8{margin:0 auto;z-index:1}._container_1lo00_8._pageWidth_1lo00_16{max-width:var(--alto-section-container-max-width)}._container_1lo00_8._fullWidth_1lo00_20{max-width:100%}._paddingX-default_1lo00_24{padding-left:var(--alto-section-padding-horizontal-default);padding-right:var(--alto-section-padding-horizontal-default)}._paddingY-default_1lo00_29{padding-bottom:var(--alto-section-padding-vertical-default)}._paddingTopDefault_1lo00_34,._paddingY-default_1lo00_29{padding-top:var(--alto-section-padding-vertical-default)}._paddingRightDefault_1lo00_38{padding-right:var(--alto-section-padding-horizontal-default)}._paddingBottomDefault_1lo00_42{padding-bottom:var(--alto-section-padding-vertical-default)}._paddingLeftDefault_1lo00_46{padding-left:var(--alto-section-padding-horizontal-default)}
1
+ ._container_1w3or_7,._section_1w3or_1{display:flex;position:relative;width:100%}._container_1w3or_7{margin:0 auto;z-index:1}._container_1w3or_7._pageWidth_1w3or_15{max-width:var(--alto-section-container-max-width)}._container_1w3or_7._fullWidth_1w3or_19{max-width:100%}._paddingX-default_1w3or_23{padding-left:var(--alto-section-padding-horizontal-default);padding-right:var(--alto-section-padding-horizontal-default)}._paddingY-default_1w3or_28{padding-bottom:var(--alto-section-padding-vertical-default)}._paddingTopDefault_1w3or_33,._paddingY-default_1w3or_28{padding-top:var(--alto-section-padding-vertical-default)}._paddingRightDefault_1w3or_37{padding-right:var(--alto-section-padding-horizontal-default)}._paddingBottomDefault_1w3or_41{padding-bottom:var(--alto-section-padding-vertical-default)}._paddingLeftDefault_1w3or_45{padding-left:var(--alto-section-padding-horizontal-default)}
@@ -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 = "_accordion_1x2oh_1";
6
- const accordionGroup = "_accordionGroup_1x2oh_14";
7
- const accordionStack = "_accordionStack_1x2oh_20";
8
- const accordionHeader = "_accordionHeader_1x2oh_26";
9
- const trigger = "_trigger_1x2oh_33";
10
- const buttonContent = "_buttonContent_1x2oh_42";
11
- const titleContainer = "_titleContainer_1x2oh_50";
12
- const titleWrapper = "_titleWrapper_1x2oh_57";
13
- const endContainer = "_endContainer_1x2oh_62";
14
- const titleStart = "_titleStart_1x2oh_68";
15
- const titleEnd = "_titleEnd_1x2oh_69";
16
- const accordionTitle = "_accordionTitle_1x2oh_74";
17
- const accordionDescription = "_accordionDescription_1x2oh_87";
18
- const iconWrapper = "_iconWrapper_1x2oh_96";
19
- const panelContent = "_panelContent_1x2oh_129";
5
+ import '../../assets/Accordion.css';const accordion = "_accordion_1i793_1";
6
+ const accordionGroup = "_accordionGroup_1i793_14";
7
+ const accordionStack = "_accordionStack_1i793_20";
8
+ const accordionHeader = "_accordionHeader_1i793_26";
9
+ const trigger = "_trigger_1i793_33";
10
+ const buttonContent = "_buttonContent_1i793_42";
11
+ const titleContainer = "_titleContainer_1i793_50";
12
+ const titleWrapper = "_titleWrapper_1i793_57";
13
+ const endContainer = "_endContainer_1i793_62";
14
+ const titleStart = "_titleStart_1i793_68";
15
+ const titleEnd = "_titleEnd_1i793_69";
16
+ const accordionTitle = "_accordionTitle_1i793_74";
17
+ const accordionDescription = "_accordionDescription_1i793_87";
18
+ const iconWrapper = "_iconWrapper_1i793_96";
19
+ const panelContent = "_panelContent_1i793_129";
20
20
  const styles = {
21
21
  accordion,
22
22
  accordionGroup,
@@ -3,29 +3,29 @@ 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 = "_calloutBanner_1o7bw_1";
7
- const calloutBanner__icon = "_calloutBanner__icon_1o7bw_11";
8
- const calloutBanner__start = "_calloutBanner__start_1o7bw_15";
9
- const calloutBanner__dismiss = "_calloutBanner__dismiss_1o7bw_23";
10
- const calloutBanner__meta = "_calloutBanner__meta_1o7bw_29";
11
- const calloutBanner__end = "_calloutBanner__end_1o7bw_58";
6
+ import '../../assets/CalloutBanner.css';const calloutBanner$1 = "_calloutBanner_kvv8j_1";
7
+ const calloutBanner__icon = "_calloutBanner__icon_kvv8j_11";
8
+ const calloutBanner__start = "_calloutBanner__start_kvv8j_15";
9
+ const calloutBanner__dismiss = "_calloutBanner__dismiss_kvv8j_23";
10
+ const calloutBanner__meta = "_calloutBanner__meta_kvv8j_29";
11
+ const calloutBanner__end = "_calloutBanner__end_kvv8j_58";
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-title": "_calloutBanner__meta-title_1o7bw_41",
19
- "calloutBanner__meta-description": "_calloutBanner__meta-description_1o7bw_45",
20
- "calloutBanner__meta-label": "_calloutBanner__meta-label_1o7bw_49",
18
+ "calloutBanner__meta-title": "_calloutBanner__meta-title_kvv8j_41",
19
+ "calloutBanner__meta-description": "_calloutBanner__meta-description_kvv8j_45",
20
+ "calloutBanner__meta-label": "_calloutBanner__meta-label_kvv8j_49",
21
21
  calloutBanner__end,
22
- "calloutBanner-critical": "_calloutBanner-critical_1o7bw_66",
23
- "calloutBanner-primary": "_calloutBanner-primary_1o7bw_70",
24
- "calloutBanner-secondary": "_calloutBanner-secondary_1o7bw_74",
25
- "calloutBanner-tertiary": "_calloutBanner-tertiary_1o7bw_80",
26
- "calloutBanner-success": "_calloutBanner-success_1o7bw_89",
27
- "calloutBanner-information": "_calloutBanner-information_1o7bw_112",
28
- "calloutBanner-neutral": "_calloutBanner-neutral_1o7bw_135"
22
+ "calloutBanner-critical": "_calloutBanner-critical_kvv8j_66",
23
+ "calloutBanner-primary": "_calloutBanner-primary_kvv8j_70",
24
+ "calloutBanner-secondary": "_calloutBanner-secondary_kvv8j_74",
25
+ "calloutBanner-tertiary": "_calloutBanner-tertiary_kvv8j_83",
26
+ "calloutBanner-success": "_calloutBanner-success_kvv8j_92",
27
+ "calloutBanner-information": "_calloutBanner-information_kvv8j_118",
28
+ "calloutBanner-neutral": "_calloutBanner-neutral_kvv8j_144"
29
29
  };
30
30
  const calloutBanner = cva(styles.calloutBanner, {
31
31
  variants: {
@@ -5,9 +5,9 @@ import { P as PatternFormat } from "../../react-number-format.es-DMLgWFZX.js";
5
5
  import { Field } from "../_base/Field/Field.js";
6
6
  import { Icon } from "../Icon/Icon.js";
7
7
  import { getCardIcon } from "../../utils/creditCard/creditCard.js";
8
- import '../../assets/CreditCardNumberField.css';const creditCardNumberField = "_creditCardNumberField_1d9o2_1";
9
- const inputWrapper = "_inputWrapper_1d9o2_45";
10
- const iconEnd = "_iconEnd_1d9o2_51";
8
+ import '../../assets/CreditCardNumberField.css';const creditCardNumberField = "_creditCardNumberField_1wvso_1";
9
+ const inputWrapper = "_inputWrapper_1wvso_45";
10
+ const iconEnd = "_iconEnd_1wvso_51";
11
11
  const styles = {
12
12
  creditCardNumberField,
13
13
  inputWrapper,
@@ -0,0 +1,35 @@
1
+ import { default as React } from 'react';
2
+ import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
3
+ import { FieldProps } from '../_base/Field';
4
+ type CreditCardSecurityCodeValue = string | number | null | undefined;
5
+ interface CreditCardSecurityCodeFieldBaseProps {
6
+ /**
7
+ * The controlled value of the credit card number.
8
+ */
9
+ value?: CreditCardSecurityCodeValue;
10
+ /**
11
+ * The controlled onChange handler for the credit card number.
12
+ */
13
+ onChange?: (value?: CreditCardSecurityCodeValue) => void;
14
+ /**
15
+ * The default value of the credit card number.
16
+ */
17
+ defaultValue?: CreditCardSecurityCodeValue;
18
+ /**
19
+ * The CSV pictogram icon to display.
20
+ * Expects 'back' or 'front' depending on card type.
21
+ */
22
+ cardIcon?: 'front' | 'back';
23
+ }
24
+ export interface CreditCardSecurityCodeFieldProps extends Omit<FieldProps<Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>>, 'isRequired'>, CreditCardSecurityCodeFieldBaseProps {
25
+ /**
26
+ * The placeholder text to display when the input is empty.
27
+ */
28
+ placeholder?: string;
29
+ /**
30
+ * Expects a DetailsDisclosure component for further information.
31
+ */
32
+ children?: React.ReactNode;
33
+ }
34
+ export declare const CreditCardSecurityCodeField: ({ defaultValue, value: valueControlled, onChange: onChangeControlled, label, cardIcon, ...props }: CreditCardSecurityCodeFieldProps) => import("react/jsx-runtime").JSX.Element;
35
+ export default CreditCardSecurityCodeField;
@@ -0,0 +1,65 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import React from "react";
3
+ import { TextField, Input } from "react-aria-components";
4
+ import { P as PatternFormat } from "../../react-number-format.es-DMLgWFZX.js";
5
+ import { Field } from "../_base/Field/Field.js";
6
+ import '../../assets/CreditCardSecurityCodeField.css';const creditCardSecurityCodeField = "_creditCardSecurityCodeField_14mb2_1";
7
+ const inputWrapper = "_inputWrapper_14mb2_11";
8
+ const inputChildren = "_inputChildren_14mb2_54";
9
+ const styles = {
10
+ creditCardSecurityCodeField,
11
+ inputWrapper,
12
+ inputChildren
13
+ };
14
+ const CreditCardSecurityCodeField = ({
15
+ defaultValue,
16
+ value: valueControlled,
17
+ onChange: onChangeControlled,
18
+ label = "Card security code",
19
+ cardIcon = "back",
20
+ ...props
21
+ }) => {
22
+ const [value, setValue] = React.useState(defaultValue);
23
+ const valueDefinitive = valueControlled ?? value;
24
+ return /* @__PURE__ */ jsxs(Field, { className: styles.creditCardSecurityCodeField, as: TextField, label, isRequired: true, ...props, children: [
25
+ /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
26
+ /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: "###", customInput: Input, placeholder: props == null ? void 0 : props.placeholder, defaultValue, value: valueDefinitive, onValueChange: (values) => {
27
+ if (typeof onChangeControlled === "function") {
28
+ onChangeControlled(values.value);
29
+ }
30
+ setValue(values.value);
31
+ } }),
32
+ /* @__PURE__ */ jsx(CreditCardSecurityCodeIcon, { cardIcon })
33
+ ] }),
34
+ (props == null ? void 0 : props.children) && /* @__PURE__ */ jsx("div", { className: styles.inputChildren, children: props.children })
35
+ ] });
36
+ };
37
+ function CreditCardSecurityCodeIcon({
38
+ cardIcon = "back"
39
+ }) {
40
+ return cardIcon === "back" ? /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", fill: "none", viewBox: "0 0 48 48", children: [
41
+ /* @__PURE__ */ jsx("path", { fill: "#4B4855", d: "M30.528 29.287v-.514l1.202-1.113a5 5 0 0 0 .258-.267q.105-.12.16-.233a.6.6 0 0 0 .054-.249.44.44 0 0 0-.252-.422.6.6 0 0 0-.266-.06.56.56 0 0 0-.27.063.43.43 0 0 0-.178.18.6.6 0 0 0-.063.279h-.678q0-.331.15-.576t.42-.377a1.4 1.4 0 0 1 .624-.134q.363 0 .632.129.27.126.42.353.15.225.15.517a1 1 0 0 1-.076.378q-.075.186-.265.414a6 6 0 0 1-.54.542l-.492.483v.023h1.418v.584zm-.802-3.377v3.377h-.714v-2.7h-.02l-.773.486v-.634l.836-.529zm4.317 3.296q.29.127.658.127.38 0 .673-.128a1.1 1.1 0 0 0 .46-.353.82.82 0 0 0 .166-.513.73.73 0 0 0-.194-.524q-.195-.211-.567-.26v-.026a.8.8 0 0 0 .46-.24.66.66 0 0 0 .176-.474.82.82 0 0 0-.145-.481 1 1 0 0 0-.407-.343 1.4 1.4 0 0 0-.612-.127q-.346 0-.621.127-.274.126-.436.348a.9.9 0 0 0-.166.514h.684a.4.4 0 0 1 .077-.224.47.47 0 0 1 .193-.147.65.65 0 0 1 .516.002.4.4 0 0 1 .23.374q0 .134-.07.235a.46.46 0 0 1-.194.154.7.7 0 0 1-.285.056h-.315v.525h.315q.19 0 .33.06a.5.5 0 0 1 .214.164.4.4 0 0 1 .075.24.4.4 0 0 1-.07.235.5.5 0 0 1-.197.16.7.7 0 0 1-.288.058.7.7 0 0 1-.282-.052.5.5 0 0 1-.201-.143.38.38 0 0 1-.081-.218h-.719q.005.295.17.521.166.225.453.353" }),
42
+ /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M7.2 24v7.2h31.2V24zm30 1.2H8.4V30h28.8z", clipRule: "evenodd" }),
43
+ /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M4.8 14.4a4.8 4.8 0 0 1 4.8-4.8h28.8a4.8 4.8 0 0 1 4.8 4.8v19.2a4.8 4.8 0 0 1-4.8 4.8H9.6a4.8 4.8 0 0 1-4.8-4.8zm4.8-3.6h28.8a3.6 3.6 0 0 1 3.6 3.6H6a3.6 3.6 0 0 1 3.6-3.6M42 19.2v14.4a3.6 3.6 0 0 1-3.6 3.6H9.6A3.6 3.6 0 0 1 6 33.6V19.2z", clipRule: "evenodd" }),
44
+ /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", fillRule: "evenodd", d: "M42 33.6V19.2H6v14.4a3.6 3.6 0 0 0 3.6 3.6h28.8a3.6 3.6 0 0 0 3.6-3.6M38.4 24H7.2v7.2h31.2z", clipRule: "evenodd" }),
45
+ /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", d: "M38.4 10.8H9.6A3.6 3.6 0 0 0 6 14.4h36a3.6 3.6 0 0 0-3.6-3.6" }),
46
+ /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", fillRule: "evenodd", d: "M8.4 25.2h28.8V30H8.4zm22.128 4.087v-.514l1.202-1.113a5 5 0 0 0 .258-.267q.105-.12.16-.233a.6.6 0 0 0 .054-.249.44.44 0 0 0-.252-.422.6.6 0 0 0-.266-.06.56.56 0 0 0-.27.063.43.43 0 0 0-.178.18.6.6 0 0 0-.063.279h-.678q0-.331.15-.576t.42-.377a1.4 1.4 0 0 1 .624-.134q.363 0 .632.129.27.126.42.353.15.225.15.517a1 1 0 0 1-.076.378q-.075.186-.265.414a6 6 0 0 1-.54.542l-.492.483v.023h1.418v.584zm-.802-3.377v3.377h-.714v-2.7h-.02l-.773.486v-.634l.836-.529zm4.317 3.296q.29.127.658.127.38 0 .673-.128a1.1 1.1 0 0 0 .46-.353.82.82 0 0 0 .166-.513.73.73 0 0 0-.194-.524q-.195-.211-.567-.26v-.026a.8.8 0 0 0 .46-.24.66.66 0 0 0 .176-.474.82.82 0 0 0-.145-.481 1 1 0 0 0-.407-.343 1.4 1.4 0 0 0-.612-.127q-.346 0-.621.127-.274.126-.436.348a.9.9 0 0 0-.166.514h.684a.4.4 0 0 1 .077-.224.47.47 0 0 1 .193-.147.65.65 0 0 1 .516.002.4.4 0 0 1 .23.374q0 .134-.07.235a.46.46 0 0 1-.194.154.7.7 0 0 1-.285.056h-.315v.525h.315q.19 0 .33.06a.5.5 0 0 1 .214.164.4.4 0 0 1 .075.24.4.4 0 0 1-.07.235.5.5 0 0 1-.197.16.7.7 0 0 1-.288.058.7.7 0 0 1-.282-.052.5.5 0 0 1-.201-.143.38.38 0 0 1-.081-.218h-.719q.005.295.17.521.166.225.453.353", clipRule: "evenodd" }),
47
+ /* @__PURE__ */ jsx("path", { fill: "#D32B1E", fillRule: "evenodd", d: "M37.641 30.866c1.298-.927 1.96-2.098 1.96-3.266s-.662-2.34-1.96-3.266c-1.295-.925-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.926-1.96 2.097-1.96 3.266 0 1.168.662 2.34 1.96 3.265 1.296.925 3.147 1.535 5.248 1.535 2.1 0 3.952-.61 5.247-1.534M32.394 33.6c4.643 0 8.407-2.687 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.763 6 8.407 6", clipRule: "evenodd" })
48
+ ] }) : /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", fill: "none", viewBox: "0 0 48 48", children: [
49
+ /* @__PURE__ */ jsx("path", { fill: "#D32B1E", fillRule: "evenodd", d: "M37.336 31.19c1.627-1.044 2.418-2.343 2.418-3.592s-.791-2.548-2.418-3.593c-1.615-1.036-3.917-1.716-6.522-1.716s-4.908.68-6.522 1.716c-1.627 1.045-2.418 2.343-2.418 3.593s.79 2.548 2.418 3.592c1.614 1.036 3.916 1.716 6.522 1.716 2.605 0 4.907-.68 6.522-1.716m-6.522 2.916c5.6 0 10.14-2.914 10.14-6.508 0-3.595-4.54-6.509-10.14-6.509s-10.14 2.914-10.14 6.509c0 3.594 4.54 6.508 10.14 6.508", clipRule: "evenodd" }),
50
+ /* @__PURE__ */ jsx("path", { fill: "#4B4855", d: "M27.296 29.47v-.57l1.332-1.233q.17-.165.286-.296.117-.132.177-.258a.64.64 0 0 0 .06-.276.49.49 0 0 0-.28-.468.64.64 0 0 0-.294-.066.6.6 0 0 0-.3.07.5.5 0 0 0-.197.2.65.65 0 0 0-.07.308h-.75q0-.368.166-.638a1.1 1.1 0 0 1 .466-.418q.3-.149.69-.148.403 0 .7.142.3.14.467.391.166.25.166.574 0 .211-.084.419a1.8 1.8 0 0 1-.294.458 7 7 0 0 1-.598.602l-.546.535v.026h1.572v.647h-2.669Zm-.889-3.742v3.743h-.792v-2.992h-.022l-.857.537v-.702l.927-.586zm4.785 3.653q.32.14.73.14.42 0 .745-.142.326-.143.51-.39a.9.9 0 0 0 .184-.57.8.8 0 0 0-.215-.58q-.216-.234-.629-.287v-.03a.9.9 0 0 0 .51-.266.73.73 0 0 0 .196-.525.9.9 0 0 0-.161-.534 1.1 1.1 0 0 0-.452-.38 1.54 1.54 0 0 0-.678-.14q-.383 0-.689.14a1.2 1.2 0 0 0-.482.386.97.97 0 0 0-.185.57h.759a.43.43 0 0 1 .086-.248.5.5 0 0 1 .213-.163.73.73 0 0 1 .572.002.45.45 0 0 1 .255.415.45.45 0 0 1-.077.26.5.5 0 0 1-.216.17.8.8 0 0 1-.316.063h-.35v.581h.35q.212 0 .365.066a.54.54 0 0 1 .238.183.44.44 0 0 1 .084.265.45.45 0 0 1-.078.261.5.5 0 0 1-.218.177.8.8 0 0 1-.32.064.8.8 0 0 1-.312-.056.55.55 0 0 1-.223-.16.4.4 0 0 1-.09-.24h-.797q.006.327.189.577.184.249.502.391" }),
51
+ /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M33.874 28.813v-.623l1.562-2.462h.99v2.45h.465v.635h-.464v.658h-.757v-.658zm1.782-2.223h.029v1.588H34.67v-.029zM17.687 15.988q.227-.42.227-1.022 0-.6-.227-1.021a1.57 1.57 0 0 0-.617-.642 1.73 1.73 0 0 0-.875-.222q-.49 0-.878.222a1.57 1.57 0 0 0-.615.641q-.226.422-.226 1.022c0 .6.076.74.226 1.02q.226.42.615.644.39.222.878.222.486 0 .875-.22a1.6 1.6 0 0 0 .617-.644m-.676-1.678q.117.267.117.656 0 .39-.117.656a.9.9 0 0 1-.324.405.87.87 0 0 1-.492.138.87.87 0 0 1-.49-.138.9.9 0 0 1-.327-.405 1.7 1.7 0 0 1-.115-.656q0-.39.115-.656a.9.9 0 0 1 .326-.405.87.87 0 0 1 .491-.138q.282 0 .492.138a.9.9 0 0 1 .324.405", clipRule: "evenodd" }),
52
+ /* @__PURE__ */ jsx("path", { fill: "#4B4855", d: "M8.276 16.802V13.13h2.43v.64H9.053v.874h1.493v.64H9.052v1.517z" }),
53
+ /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M11.229 16.802V13.13h1.448q.416 0 .71.149.295.147.45.417t.156.633q0 .366-.158.629a1.02 1.02 0 0 1-.457.402l-.033.014.778 1.427h-.856L12.57 15.5h-.566v1.302zm1.303-1.925h-.527v-1.112h.523q.225 0 .371.067a.45.45 0 0 1 .22.19.6.6 0 0 1 .074.308q0 .18-.073.303a.44.44 0 0 1-.219.183 1 1 0 0 1-.37.06Z", clipRule: "evenodd" }),
54
+ /* @__PURE__ */ jsx("path", { fill: "#4B4855", d: "M21.56 16.802h-.67l-1.598-2.31h-.027v2.31h-.776V13.13h.681l1.585 2.308h.032V13.13h.773v3.67Zm.501-3.672v.64h1.124v3.032h.767V13.77h1.124v-.64z" }),
55
+ /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M9.6 9.6a4.8 4.8 0 0 0-4.8 4.8v19.2a4.8 4.8 0 0 0 4.8 4.8h28.8a4.8 4.8 0 0 0 4.8-4.8V14.4a4.8 4.8 0 0 0-4.8-4.8zm28.8 1.2H9.6A3.6 3.6 0 0 0 6 14.4v19.2a3.6 3.6 0 0 0 3.6 3.6h28.8a3.6 3.6 0 0 0 3.6-3.6V14.4a3.6 3.6 0 0 0-3.6-3.6", clipRule: "evenodd" }),
56
+ /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", fillRule: "evenodd", d: "M9.6 10.8h28.8a3.6 3.6 0 0 1 3.6 3.6v19.2a3.6 3.6 0 0 1-3.6 3.6H9.6A3.6 3.6 0 0 1 6 33.6V14.4a3.6 3.6 0 0 1 3.6-3.6m17.696 18.67v-.57l1.332-1.233q.17-.165.286-.296.117-.132.177-.258a.64.64 0 0 0 .06-.276.49.49 0 0 0-.28-.468.64.64 0 0 0-.294-.066.6.6 0 0 0-.3.07.5.5 0 0 0-.197.2.65.65 0 0 0-.07.308h-.75q0-.368.166-.638a1.1 1.1 0 0 1 .466-.418q.3-.149.69-.148.403 0 .7.142.3.14.467.391.166.25.166.574 0 .211-.084.419a1.8 1.8 0 0 1-.294.458 7 7 0 0 1-.598.602l-.546.535v.026h1.572v.647h-2.669Zm-.89-3.742v3.743h-.79v-2.992h-.023l-.857.537v-.702l.927-.586h.744Zm4.786 3.653q.32.14.73.14.42 0 .745-.142.326-.143.51-.39a.9.9 0 0 0 .184-.57.8.8 0 0 0-.215-.58q-.216-.234-.629-.287v-.03a.9.9 0 0 0 .51-.266.73.73 0 0 0 .196-.525.9.9 0 0 0-.161-.534 1.1 1.1 0 0 0-.452-.38 1.54 1.54 0 0 0-.678-.14q-.383 0-.689.14a1.2 1.2 0 0 0-.482.386.97.97 0 0 0-.185.57h.759a.43.43 0 0 1 .086-.248.5.5 0 0 1 .213-.163.73.73 0 0 1 .572.002.45.45 0 0 1 .255.415.45.45 0 0 1-.077.26.5.5 0 0 1-.216.17.8.8 0 0 1-.316.063h-.35v.581h.35q.212 0 .365.066a.54.54 0 0 1 .238.183.44.44 0 0 1 .084.265.45.45 0 0 1-.078.261.5.5 0 0 1-.218.177.8.8 0 0 1-.32.064.8.8 0 0 1-.312-.056.55.55 0 0 1-.223-.16.4.4 0 0 1-.09-.24h-.797q.006.327.189.577.184.249.502.391m2.682-.568v-.623l1.562-2.462h.99v2.45h.465v.635h-.464v.658h-.757v-.658zM17.687 15.988q.227-.42.227-1.022 0-.6-.227-1.021a1.57 1.57 0 0 0-.617-.642 1.73 1.73 0 0 0-.875-.222q-.49 0-.878.222a1.57 1.57 0 0 0-.615.641q-.226.422-.226 1.022c0 .6.076.74.226 1.02q.226.42.615.644.39.222.878.222.486 0 .875-.22a1.6 1.6 0 0 0 .617-.644m-9.41.814V13.13h2.43v.64H9.052v.874h1.493v.64H9.052v1.517zm2.952 0V13.13h1.448q.416 0 .71.149.295.147.45.417t.156.633q0 .366-.158.629a1.02 1.02 0 0 1-.457.402l-.033.014.778 1.427h-.856L12.57 15.5h-.566v1.302zm10.33 0h-.67l-1.597-2.31h-.027v2.31h-.776V13.13h.681l1.585 2.308h.032V13.13h.773v3.67Zm.502-3.671v.64h1.124v3.03h.767v-3.03h1.124v-.64z", clipRule: "evenodd" }),
57
+ /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", d: "M17.128 14.966q0-.39-.117-.656a.9.9 0 0 0-.324-.405.87.87 0 0 0-.492-.138.87.87 0 0 0-.49.138.9.9 0 0 0-.327.405 1.7 1.7 0 0 0-.115.656q0 .39.115.656a.9.9 0 0 0 .326.405q.21.138.491.138a.87.87 0 0 0 .492-.138.9.9 0 0 0 .324-.405 1.6 1.6 0 0 0 .117-.656m-5.123-.089h.527a1 1 0 0 0 .369-.061.44.44 0 0 0 .219-.183.6.6 0 0 0 .073-.303.6.6 0 0 0-.073-.308.45.45 0 0 0-.22-.19.9.9 0 0 0-.372-.067h-.523zm23.68 11.713h-.03l-.985 1.56v.029h1.015z" }),
58
+ /* @__PURE__ */ jsx("path", { fill: "#D32B1E", fillRule: "evenodd", d: "M36.062 30.866c1.297-.926 1.959-2.098 1.959-3.266s-.662-2.34-1.96-3.266c-1.295-.924-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.927-1.96 2.098-1.96 3.266s.662 2.34 1.96 3.266c1.296.925 3.147 1.534 5.248 1.534 2.1 0 3.952-.61 5.248-1.534M30.814 33.6c4.643 0 8.407-2.686 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.764 6 8.407 6", clipRule: "evenodd" })
59
+ ] });
60
+ }
61
+ export {
62
+ CreditCardSecurityCodeField,
63
+ CreditCardSecurityCodeField as default
64
+ };
65
+ //# sourceMappingURL=CreditCardSecurityCodeField.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CreditCardSecurityCodeField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1 @@
1
+ export { default } from './CreditCardSecurityCodeField';
@@ -0,0 +1,5 @@
1
+ import { CreditCardSecurityCodeField } from "./CreditCardSecurityCodeField.js";
2
+ export {
3
+ CreditCardSecurityCodeField as default
4
+ };
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -3,12 +3,12 @@ import React, { useState, useRef, useEffect } from "react";
3
3
  import { c as cva } from "../../index-Bi3v_EjJ.js";
4
4
  import { borderVariants } from "../../utils/border/border.js";
5
5
  import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
6
- import '../../assets/Image.css';const image = "_image_z82es_1";
7
- const fill = "_fill_z82es_10";
8
- const contain = "_contain_z82es_14";
9
- const cover = "_cover_z82es_18";
10
- const none = "_none_z82es_22";
11
- const scaleDown = "_scaleDown_z82es_26";
6
+ import '../../assets/Image.css';const image = "_image_1dojz_1";
7
+ const fill = "_fill_1dojz_10";
8
+ const contain = "_contain_1dojz_14";
9
+ const cover = "_cover_1dojz_18";
10
+ const none = "_none_1dojz_22";
11
+ const scaleDown = "_scaleDown_1dojz_26";
12
12
  const styles = {
13
13
  image,
14
14
  fill,
@@ -4,10 +4,10 @@ import { TextField, Input } from "react-aria-components";
4
4
  import { u as usePatternFormat, N as NumberFormatBase } from "../../react-number-format.es-DMLgWFZX.js";
5
5
  import { DEFAULT_PATTERN, getCountryOptions, getCountryFlagEmoji, countryPhoneMap, getPhoneNumberValue } from "../../utils/phoneNumber/phoneNumber.js";
6
6
  import { Field } from "../_base/Field/Field.js";
7
- import '../../assets/PhoneNumberField.css';const phoneNumberField = "_phoneNumberField_1udln_1";
8
- const selectHandlerValue = "_selectHandlerValue_1udln_34";
9
- const selectHandlerIcon = "_selectHandlerIcon_1udln_65";
10
- const selectWrapper = "_selectWrapper_1udln_77";
7
+ import '../../assets/PhoneNumberField.css';const phoneNumberField = "_phoneNumberField_trpoz_1";
8
+ const selectHandlerValue = "_selectHandlerValue_trpoz_34";
9
+ const selectHandlerIcon = "_selectHandlerIcon_trpoz_65";
10
+ const selectWrapper = "_selectWrapper_trpoz_77";
11
11
  const styles = {
12
12
  phoneNumberField,
13
13
  selectHandlerValue,
@@ -1,6 +1,7 @@
1
1
  import { default as React } from 'react';
2
2
  import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
3
3
  import { PaddingVariants } from '../../utils/padding/padding';
4
+ import { FlexVariants } from '../../utils/flex/flex';
4
5
  type SectionPaddingValue = 'default' | PaddingVariants['paddingX'];
5
6
  type SectionPadding = {
6
7
  paddingX?: SectionPaddingValue;
@@ -10,7 +11,7 @@ type SectionPadding = {
10
11
  paddingBottom?: SectionPaddingValue;
11
12
  paddingLeft?: SectionPaddingValue;
12
13
  };
13
- export interface SectionProps extends BackgroundVariants, SectionPadding {
14
+ export interface SectionProps extends BackgroundVariants, SectionPadding, Pick<FlexVariants, 'flexDirection' | 'justifyContent' | 'alignItems'> {
14
15
  children: React.ReactNode;
15
16
  containerMaxWidth?: 'full-width' | 'page';
16
17
  style?: React.CSSProperties;
@@ -21,8 +22,11 @@ interface ContainerProps {
21
22
  children: React.ReactNode;
22
23
  className?: string;
23
24
  containerMaxWidth?: 'full-width' | 'page';
25
+ flexDirection?: FlexVariants['flexDirection'];
26
+ justifyContent?: FlexVariants['justifyContent'];
27
+ alignItems?: FlexVariants['alignItems'];
24
28
  }
25
- declare const Container: ({ children, className, containerMaxWidth, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
29
+ declare const Container: ({ children, className, containerMaxWidth, flexDirection, justifyContent, alignItems, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
26
30
  interface SectionComponent extends React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>> {
27
31
  Container: typeof Container;
28
32
  }
@@ -3,21 +3,22 @@ import React, { forwardRef } from "react";
3
3
  import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
4
4
  import { paddingVariants } from "../../utils/padding/padding.js";
5
5
  import { c as cva } from "../../index-Bi3v_EjJ.js";
6
- import '../../assets/Section.css';const section = "_section_1lo00_1";
7
- const container = "_container_1lo00_8";
8
- const pageWidth = "_pageWidth_1lo00_16";
9
- const fullWidth = "_fullWidth_1lo00_20";
10
- const paddingTopDefault = "_paddingTopDefault_1lo00_34";
11
- const paddingRightDefault = "_paddingRightDefault_1lo00_38";
12
- const paddingBottomDefault = "_paddingBottomDefault_1lo00_42";
13
- const paddingLeftDefault = "_paddingLeftDefault_1lo00_46";
6
+ import { flexVariants } from "../../utils/flex/flex.js";
7
+ import '../../assets/Section.css';const section = "_section_1w3or_1";
8
+ const container = "_container_1w3or_7";
9
+ const pageWidth = "_pageWidth_1w3or_15";
10
+ const fullWidth = "_fullWidth_1w3or_19";
11
+ const paddingTopDefault = "_paddingTopDefault_1w3or_33";
12
+ const paddingRightDefault = "_paddingRightDefault_1w3or_37";
13
+ const paddingBottomDefault = "_paddingBottomDefault_1w3or_41";
14
+ const paddingLeftDefault = "_paddingLeftDefault_1w3or_45";
14
15
  const styles = {
15
16
  section,
16
17
  container,
17
18
  pageWidth,
18
19
  fullWidth,
19
- "paddingX-default": "_paddingX-default_1lo00_24",
20
- "paddingY-default": "_paddingY-default_1lo00_29",
20
+ "paddingX-default": "_paddingX-default_1w3or_23",
21
+ "paddingY-default": "_paddingY-default_1w3or_28",
21
22
  paddingTopDefault,
22
23
  paddingRightDefault,
23
24
  paddingBottomDefault,
@@ -48,8 +49,23 @@ const sectionPaddingVariants = cva("", {
48
49
  const Container = ({
49
50
  children,
50
51
  className,
51
- containerMaxWidth = "page"
52
- }) => /* @__PURE__ */ jsx("div", { className: `${styles.container} ${styles[`${containerMaxWidth}Width`]} ${className || ""}`, children });
52
+ containerMaxWidth = "page",
53
+ flexDirection,
54
+ justifyContent,
55
+ alignItems
56
+ }) => {
57
+ const widthClassName = containerMaxWidth === "full-width" ? "fullWidth" : "pageWidth";
58
+ return /* @__PURE__ */ jsx("div", { className: `
59
+ ${styles.container}
60
+ ${styles[widthClassName]}
61
+ ${flexVariants({
62
+ flexDirection,
63
+ justifyContent,
64
+ alignItems
65
+ })}
66
+ ${className || ""}
67
+ `.trim(), children });
68
+ };
53
69
  const Section = forwardRef(({
54
70
  children,
55
71
  containerMaxWidth = "page",
@@ -62,7 +78,10 @@ const Section = forwardRef(({
62
78
  paddingX,
63
79
  paddingY = "default",
64
80
  style,
65
- className
81
+ className,
82
+ flexDirection,
83
+ justifyContent,
84
+ alignItems
66
85
  }, ref) => {
67
86
  if (backgroundColour && !backgroundColor) {
68
87
  console.warn("Warning: `backgroundColour` is deprecated and will be removed in a future release. Please use `backgroundColor` instead.");
@@ -89,12 +108,21 @@ const Section = forwardRef(({
89
108
  ${backgroundColorVariants({
90
109
  backgroundColor: resolvedBackgroundColor
91
110
  })}
111
+ ${flexVariants({
112
+ display: flexDirection || justifyContent ? "flex" : void 0,
113
+ flexDirection,
114
+ justifyContent,
115
+ alignItems
116
+ })}
92
117
  ${className || ""}
93
118
  `.trim(), style, children: React.Children.map(children, (child) => {
94
119
  if (React.isValidElement(child) && child.type === Container) {
95
120
  return React.cloneElement(child, {
96
121
  ...child.props,
97
- containerMaxWidth
122
+ containerMaxWidth,
123
+ flexDirection,
124
+ justifyContent,
125
+ alignItems
98
126
  });
99
127
  }
100
128
  return child;
@@ -1 +1 @@
1
- {"version":3,"file":"Section.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Section.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,4 +1,5 @@
1
1
  import { ValidationResult } from 'react-aria-components';
2
+ import { ChangeEvent } from 'react';
2
3
  export interface SelectNativeOption {
3
4
  label: string;
4
5
  value: string;
@@ -51,6 +52,10 @@ export interface SelectNativeProps {
51
52
  * Optional ID for the select element. If not provided, one will be generated.
52
53
  */
53
54
  id?: string;
55
+ /**
56
+ * Callback function when the selection changes
57
+ */
58
+ onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
54
59
  }
55
- export declare const SelectNative: ({ label, description, errorMessage, isInvalid, isDisabled, isRequired, placeholder, options, defaultValue, value, id: providedId, ...props }: SelectNativeProps) => import("react/jsx-runtime").JSX.Element;
60
+ export declare const SelectNative: ({ label, description, errorMessage, isInvalid, isDisabled, isRequired, placeholder, options, defaultValue, value, id: providedId, onChange, ...props }: SelectNativeProps) => import("react/jsx-runtime").JSX.Element;
56
61
  export default SelectNative;
@@ -20,14 +20,20 @@ const SelectNative = ({
20
20
  defaultValue,
21
21
  value,
22
22
  id: providedId,
23
+ onChange,
23
24
  ...props
24
25
  }) => {
25
26
  const uniqueId = useId();
26
27
  const id = providedId || `select-${uniqueId}`;
27
28
  const showPlaceholder = !defaultValue && !value;
29
+ const handleChange = (event) => {
30
+ if (onChange) {
31
+ onChange(event);
32
+ }
33
+ };
28
34
  return /* @__PURE__ */ jsxs(TextField, { className: styles.select, defaultValue, value, isDisabled, isInvalid, ...props, children: [
29
35
  label && /* @__PURE__ */ jsx(FieldHeader, { label, description, isInvalid, isRequired, errorMessage, labelFor: id }),
30
- /* @__PURE__ */ jsxs("select", { id, className: styles.selectInput, defaultValue, value, disabled: isDisabled, required: isRequired, "aria-invalid": isInvalid, children: [
36
+ /* @__PURE__ */ jsxs("select", { id, className: styles.selectInput, defaultValue, value, disabled: isDisabled, required: isRequired, "aria-invalid": isInvalid, onChange: handleChange, children: [
31
37
  showPlaceholder && placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
32
38
  options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
33
39
  ] })
@@ -1 +1 @@
1
- {"version":3,"file":"SelectNative.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SelectNative.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,10 +1,30 @@
1
1
  import { TagGroupProps as AriaTagGroupProps, PressEvent, TagListProps } from 'react-aria-components';
2
2
  export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'> {
3
+ /**
4
+ * Optional label text
5
+ */
3
6
  label?: string;
7
+ /**
8
+ * Optional description text
9
+ */
4
10
  description?: string;
11
+ /**
12
+ * AriaLabel for the tag group. Required for accessibility if no label is provided
13
+ */
14
+ ariaLabel?: string;
15
+ /**
16
+ * Selection mode for the tag group
17
+ * @default 'single'
18
+ */
5
19
  selectionMode?: 'single' | 'multiple';
20
+ /**
21
+ * Whether to show a clear button
22
+ */
6
23
  clearButton?: boolean;
24
+ /**
25
+ * Function to call when the clear button is clicked
26
+ */
7
27
  clearButtonOnClick?: (e: PressEvent) => void;
8
28
  }
9
- export declare const TagGroup: <T extends object>({ label, description, items, children, renderEmptyState, clearButton, clearButtonOnClick, selectionMode, ...props }: TagGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
29
+ export declare const TagGroup: <T extends object>({ label, description, ariaLabel, items, children, renderEmptyState, clearButton, clearButtonOnClick, selectionMode, ...props }: TagGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
10
30
  export default TagGroup;
@@ -15,6 +15,7 @@ const styles = {
15
15
  const TagGroup = ({
16
16
  label,
17
17
  description,
18
+ ariaLabel,
18
19
  items,
19
20
  children,
20
21
  renderEmptyState,
@@ -23,8 +24,11 @@ const TagGroup = ({
23
24
  selectionMode = "single",
24
25
  ...props
25
26
  }) => {
26
- return /* @__PURE__ */ jsxs(TagGroup$1, { className: styles.tagGroup, selectionMode, ...props, children: [
27
- /* @__PURE__ */ jsxs("span", { className: styles.spanContainer, children: [
27
+ if (!label && !ariaLabel) {
28
+ console.warn("⚠️ [TagGroup] Accessibility Warning: You must provide either a 'label' or 'ariaLabel' for screen reader support.");
29
+ }
30
+ return /* @__PURE__ */ jsxs(TagGroup$1, { className: styles.tagGroup, selectionMode, "aria-label": label ? void 0 : ariaLabel, ...props, children: [
31
+ (label || clearButton) && /* @__PURE__ */ jsxs("span", { className: styles.spanContainer, children: [
28
32
  /* @__PURE__ */ jsx(FieldLabel, { children: label }),
29
33
  clearButton && /* @__PURE__ */ jsx(Button, { styleVariant: "accent", emphasis: "quaternary", size: "sm", onPress: clearButtonOnClick, children: "Clear" })
30
34
  ] }),
@@ -1 +1 @@
1
- {"version":3,"file":"TagGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TagGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -10,6 +10,7 @@ export { default as CardSection } from './CardSection';
10
10
  export { default as Checkbox } from './Checkbox';
11
11
  export { default as CheckboxGroup } from './CheckboxGroup';
12
12
  export { default as CreditCardNumberField } from './CreditCardNumberField';
13
+ export { default as CreditCardSecurityCodeField } from './CreditCardSecurityCodeField';
13
14
  export { default as DateField } from './DateField';
14
15
  export { default as DestinationHeading } from './DestinationHeading';
15
16
  export { default as DetailsDisclosure } from './DetailsDisclosure';
@@ -11,6 +11,7 @@ import { default as default2 } from "./CardSection/CardSection.js";
11
11
  import { Checkbox } from "./Checkbox/Checkbox.js";
12
12
  import { CheckboxGroup } from "./CheckboxGroup/CheckboxGroup.js";
13
13
  import { CreditCardNumberField } from "./CreditCardNumberField/CreditCardNumberField.js";
14
+ import { CreditCardSecurityCodeField } from "./CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";
14
15
  import { DateField } from "./DateField/DateField.js";
15
16
  import { DestinationHeading } from "./DestinationHeading/DestinationHeading.js";
16
17
  import { default as default3 } from "./DetailsDisclosure/DetailsDisclosure.js";
@@ -65,6 +66,7 @@ export {
65
66
  Checkbox,
66
67
  CheckboxGroup,
67
68
  CreditCardNumberField,
69
+ CreditCardSecurityCodeField,
68
70
  DateField,
69
71
  DestinationHeading,
70
72
  default3 as DetailsDisclosure,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -11,6 +11,7 @@ import { default as default2 } from "./components/CardSection/CardSection.js";
11
11
  import { Checkbox } from "./components/Checkbox/Checkbox.js";
12
12
  import { CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup.js";
13
13
  import { CreditCardNumberField } from "./components/CreditCardNumberField/CreditCardNumberField.js";
14
+ import { CreditCardSecurityCodeField } from "./components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";
14
15
  import { DateField } from "./components/DateField/DateField.js";
15
16
  import { DestinationHeading } from "./components/DestinationHeading/DestinationHeading.js";
16
17
  import { default as default3 } from "./components/DetailsDisclosure/DetailsDisclosure.js";
@@ -65,6 +66,7 @@ export {
65
66
  Checkbox,
66
67
  CheckboxGroup,
67
68
  CreditCardNumberField,
69
+ CreditCardSecurityCodeField,
68
70
  DateField,
69
71
  DestinationHeading,
70
72
  default3 as DetailsDisclosure,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.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.2.0",
3
+ "version": "3.2.1",
4
4
  "description": "A react component library for Alto Design System",
5
5
  "author": {
6
6
  "name": "Ian Caldwell IAGL",