@alto-avios/alto-ui 4.2.0 → 4.3.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/ButtonGroup.css +1 -1
- package/dist/assets/Carousel.css +1 -1
- package/dist/assets/Checkbox.css +1 -1
- package/dist/assets/DetailsDisclosure.css +1 -1
- package/dist/assets/Dialog.css +1 -1
- package/dist/assets/PhoneNumberField.css +1 -1
- package/dist/assets/SelectCard.css +1 -1
- package/dist/assets/SkeletonLoader.css +1 -1
- package/dist/components/Accordion/Accordion.d.ts +4 -1
- package/dist/components/Accordion/Accordion.js +21 -18
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.js +8 -8
- package/dist/components/Carousel/Carousel.js +31 -28
- package/dist/components/Carousel/Carousel.js.map +1 -1
- package/dist/components/DateField/DateField.js +5 -2
- package/dist/components/DateField/DateField.js.map +1 -1
- package/dist/components/DestinationHeading/DestinationHeading.d.ts +14 -2
- package/dist/components/DestinationHeading/DestinationHeading.js +16 -3
- package/dist/components/DestinationHeading/DestinationHeading.js.map +1 -1
- package/dist/components/DetailsDisclosure/DetailsDisclosure.js +3 -3
- package/dist/components/Dialog/Dialog.d.ts +31 -13
- package/dist/components/Dialog/Dialog.js +27 -21
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Icon/Icon.d.ts +1 -1
- package/dist/components/Icon/Icon.js +2 -1
- package/dist/components/Icon/Icon.js.map +1 -1
- package/dist/components/PhoneNumberField/PhoneNumberField.js +4 -4
- package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +6 -1
- package/dist/components/SkeletonLoader/SkeletonLoader.js +26 -12
- package/dist/components/SkeletonLoader/SkeletonLoader.js.map +1 -1
- package/dist/components/TagGroup/TagGroup.d.ts +11 -1
- package/dist/components/TagGroup/TagGroup.js +9 -3
- package/dist/components/TagGroup/TagGroup.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._accordion_1j9rd_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_1j9rd_14,._accordionStack_1j9rd_20{display:flex;flex-direction:column;gap:var(--alto-sem-space-2xs)}._accordionHeader_1j9rd_26{display:flex;flex-direction:column;gap:var(--alto-sem-space-4xs);padding-bottom:var(--alto-sem-space-2xs)}._trigger_1j9rd_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_1j9rd_42{align-items:center;display:flex;gap:var(--alto-sem-space-sm);justify-content:space-between;width:100%}._titleContainer_1j9rd_50{align-items:center;display:flex;flex:1;gap:var(--alto-sem-space-2xs)}._titleWrapper_1j9rd_57{display:flex;flex-direction:column}._endContainer_1j9rd_62{gap:var(--alto-sem-space-sm)}._endContainer_1j9rd_62,._titleEnd_1j9rd_69,._titleStart_1j9rd_68{align-items:center;display:flex}._accordionTitle_1j9rd_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:var(--alto-sem-text-body-bold-font-weight);letter-spacing:var(--alto-sem-text-body-lg-letter-spacing);line-height:var(--alto-sem-text-body-lg-line-height)}._accordionDescription_1j9rd_87,._accordionTitle_1j9rd_74{font-family:var(--alto-sem-text-body-font-family);margin:0;text-align:left}._accordionDescription_1j9rd_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-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height)}._iconWrapper_1j9rd_97{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_1j9rd_1[data-expanded=true] ._iconWrapper_1j9rd_97{transform:rotate(180deg)}._accordion_1j9rd_1>[role=group]{height:0;overflow:hidden;visibility:hidden;width:100%}._accordion_1j9rd_1>[role=group],._accordion_1j9rd_1[data-expanded=true]>[role=group]{transition:height var(--accordion-transition-duration) var(--accordion-transition-timing),visibility 0s linear}._accordion_1j9rd_1[data-expanded=true]>[role=group]{height:var(--group-height);visibility:visible}._panelContent_1j9rd_129{padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm) var(--alto-sem-space-2xl)}._accordion_1j9rd_1[data-expanded=true],._accordion_1j9rd_1[data-expanded=true] ._trigger_1j9rd_33{background-color:var(--alto-sem-color-bg-layer1-default)}._accordion_1j9rd_1 ._trigger_1j9rd_33[data-hovered]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}._accordion_1j9rd_1 ._trigger_1j9rd_33[data-focus-visible]{box-shadow:0 0 0 2px var(--alto-sem-color-border-accent);outline:none}._accordion_1j9rd_1 ._trigger_1j9rd_33[data-pressed]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active);outline:none}._accordion_1j9rd_1[data-expanded=true] ._trigger_1j9rd_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_1j9rd_1 ._trigger_1j9rd_33[data-focused]{outline:none}._accordion_1j9rd_1 ._trigger_1j9rd_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_1j9rd_1 ._trigger_1j9rd_33[data-disabled] ._iconWrapper_1j9rd_97,._trigger_1j9rd_33[data-disabled] ._accordionDescription_1j9rd_87,._trigger_1j9rd_33[data-disabled] ._accordionTitle_1j9rd_74{color:var(--alto-sem-color-fg-disabled-on-subtle)}._accordion_1j9rd_1[data-disabled]{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._buttonGroup_53q76_2{align-items:center;display:flex;flex-wrap:wrap;gap:var(--alto-sem-space-sm) var(--alto-sem-space-2xs)}._alignStart_53q76_10{justify-content:flex-start}._alignCenter_53q76_14{justify-content:center}._alignEnd_53q76_18{justify-content:flex-end}._alignJustify_53q76_22{justify-content:space-between}._alignJustify_53q76_22>*{flex-grow:1}._alignSplit_53q76_30{justify-content:space-between}._alignSplit_53q76_30>:first-child{margin-right:auto}._alignSplit_53q76_30>:not(:first-child){display:flex;justify-content:flex-end}._alignStack_53q76_43{align-items:stretch;flex-direction:column}._alignStackFlip_53q76_48{align-items:stretch;flex-direction:column-reverse}
|
package/dist/assets/Carousel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._carouselWrapper_1bise_2{box-sizing:border-box;margin:0;max-width:100%;padding:0;position:relative;width:100%}._carouselWrapper_1bise_2,._carouselWrapper_1bise_2._showPartialItems_1bise_14,._carouselWrapper_1bise_2._showPartialItems_1bise_14 ._carousel_1bise_2{overflow-x:visible;overflow-y:hidden}._carouselWrapper_1bise_2._hasScrollPadding_1bise_25,._carouselWrapper_1bise_2._hasScrollPadding_1bise_25 ._carousel_1bise_2{overflow-x:visible!important;overflow-y:hidden!important}._carousel_1bise_2{overflow-x:visible;position:relative;width:100%}._carousel_1bise_2,._scroller_1bise_43{box-sizing:border-box;overflow-y:hidden}._scroller_1bise_43{display:grid;grid-auto-columns:100%;grid-auto-flow:column;overflow-x:auto;-ms-overflow-style:none;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;height:auto;transition:all .3s ease}._scroller_1bise_43:focus{outline-offset:-2px;outline-width:2px}._scroller_1bise_43::-webkit-scrollbar{display:none}._carouselWrapper_1bise_2 [data-dragging=true] ._scroller_1bise_43{cursor:grabbing;scroll-behavior:auto;touch-action:pan-x}._carouselWrapper_1bise_2 ._scroller_1bise_43:hover{cursor:grab;touch-action:pan-x}._item_1bise_84{box-sizing:border-box;height:auto;max-width:100%;min-height:100%;overflow-y:hidden;scroll-snap-align:start;scroll-snap-stop:always}._carouselWrapper_1bise_2 ._carousel_1bise_2 ._scroller_1bise_43 ._item_1bise_84>*{display:block;height:auto;width:100%}[data-scroll-padding=true],[data-scroll-padding=true] ._carousel_1bise_2,[data-scroll-padding=true] ._scroller_1bise_43{overflow-x:visible!important;overflow-y:hidden!important}[data-scroll-padding=true] ._item_1bise_84{scroll-snap-align:start}._slideLeft_1bise_122{animation:_slideLeftAnimation_1bise_1 1s cubic-bezier(.25,0,.85,.1)}._slideRight_1bise_126{animation:_slideRightAnimation_1bise_1 1s cubic-bezier(.25,0,.85,.1)}@keyframes _slideLeftAnimation_1bise_1{0%{transform:translate(0)}to{transform:translate(0)}}@keyframes _slideRightAnimation_1bise_1{0%{transform:translate(0)}to{transform:translate(0)}}._controls_1bise_149{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._carouselWrapper_1bise_2 ._controls_1bise_149 ._defaultPrevButton_1bise_160{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWrapper_1bise_2 ._controls_1bise_149 ._defaultNextButton_1bise_168{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWrapper_1bise_2 ._defaultDotsContainer_1bise_177{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._defaultCarouselWrapper_1bise_188{margin:0 auto;max-width:800px;width:360px}._carouselWrapper_1bise_2 ._autoplayControlWrapper_1bise_195 ._defaultAutoplayControl_1bise_195{pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._showOnHover_1bise_204 ._arrowContainer_1bise_204{opacity:0;transition:opacity .3s ease}._carouselWrapper_1bise_2 [data-arrows-visible=true] ._showOnHover_1bise_204 ._arrowContainer_1bise_204{opacity:1}._hidden_1bise_214{opacity:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}._dotsContainerWrapper_1bise_223{pointer-events:auto;z-index:2}._dotsContainer_1bise_223{position:relative}@media (max-width:768px){._carouselWrapper_1bise_2 ._dotsContainerWrapper_1bise_223{cursor:pointer}._carouselWrapper_1bise_2 ._dotsContainerWrapper_1bise_223:active{opacity:.8}}._hiddenTabs_1bise_245{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}._tapEnabled_1bise_258{cursor:pointer;touch-action:manipulation}._autoplayControlWrapper_1bise_195{align-items:center;display:flex;justify-content:center;pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._carouselDefault_1bise_287{height:100%;overflow-x:hidden;width:361px}._carouselDefault_1bise_287 ._prevButton_1bise_292{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1bise_287 ._nextButton_1bise_299{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1bise_287 ._dotsContainer_1bise_223{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1bise_317{position:relative;width:100%}._carouselWithAutoPlay_1bise_317 ._prevButton_1bise_292{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1bise_317 ._nextButton_1bise_299{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1bise_317 ._dotsContainer_1bise_223{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1bise_317 ._autoplayControl_1bise_195{pointer-events:auto!important;position:absolute!important;right:16px!important;top:16px!important;z-index:20!important}._carouselWithScrollPeek_1bise_353{position:relative}._carouselWithScrollPeek_1bise_353,._carouselWithScrollPeek_1bise_353 ._carousel_1bise_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithScrollPeek_1bise_353 ._prevButton_1bise_292{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1bise_353 ._nextButton_1bise_299{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1bise_353 ._dotsContainer_1bise_223{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithFractionalItems_1bise_387{position:relative}._carouselWithFractionalItems_1bise_387,._carouselWithFractionalItems_1bise_387 ._carousel_1bise_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithFractionalItems_1bise_387 ._prevButton_1bise_292{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1bise_387 ._nextButton_1bise_299{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1bise_387 ._dotsContainer_1bise_223{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._paginationDotsDefault_1bise_421{position:relative;width:100%}._paginationDotsDefault_1bise_421 ._prevButton_1bise_292{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1bise_421 ._nextButton_1bise_299{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1bise_421 ._dotsContainer_1bise_223{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._hoverArrowsDefault_1bise_450{height:100%;overflow-x:hidden;width:361px}._hoverArrowsDefault_1bise_450 ._prevButton_1bise_292{left:10px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1bise_450 ._nextButton_1bise_299{opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1bise_450:focus-within ._nextButton_1bise_299,._hoverArrowsDefault_1bise_450:focus-within ._prevButton_1bise_292,._hoverArrowsDefault_1bise_450:hover ._nextButton_1bise_299,._hoverArrowsDefault_1bise_450:hover ._prevButton_1bise_292{opacity:1}._hoverArrowsDefault_1bise_450 ._dotsContainer_1bise_223{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}
|
package/dist/assets/Checkbox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._checkbox_1twm2_2{align-items:center;box-sizing:border-box;color:var(--alto-sem-color-fg-primary);cursor:pointer;display:flex;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);forced-color-adjust:none;gap:.571rem;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);min-height:48px}._checkboxContainer_1twm2_19{display:flex;flex-direction:column}._checkboxLabel_1twm2_24{padding-left:var(--alto-sem-space-3xs)}._checkboxDescription_1twm2_28{padding-left:42px}._checkboxSvgWrapper_1twm2_32{align-items:center;background:var(--alto-sem-color-bg-layer2-default);border:2px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-checkbox-radius);box-sizing:border-box;display:flex;flex-direction:column;height:1.5rem;justify-content:center;width:1.5rem}._checkbox_1twm2_2 ._svg_1twm2_46{
|
|
1
|
+
._checkbox_1twm2_2{align-items:center;box-sizing:border-box;color:var(--alto-sem-color-fg-primary);cursor:pointer;display:flex;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);forced-color-adjust:none;gap:.571rem;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);min-height:48px}._checkboxContainer_1twm2_19{display:flex;flex-direction:column}._checkboxLabel_1twm2_24{padding-left:var(--alto-sem-space-3xs)}._checkboxDescription_1twm2_28{padding-left:42px}._checkboxSvgWrapper_1twm2_32{align-items:center;background:var(--alto-sem-color-bg-layer2-default);border:2px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-checkbox-radius);box-sizing:border-box;display:flex;flex-direction:column;height:1.5rem;justify-content:center;width:1.5rem}._checkbox_1twm2_2 ._svg_1twm2_46{fill:none;height:1rem;stroke:var(--alto-sem-color-fg-accent-on-vibrant);stroke-dasharray:22px;stroke-dashoffset:66;stroke-width:3px;transition:all .2s;width:1rem}._checkbox_1twm2_2[data-hovered] ._checkboxSvgWrapper_1twm2_32{border-color:var(--alto-sem-color-border-primary-hover)}._checkbox_1twm2_2[data-pressed] ._checkboxSvgWrapper_1twm2_32{border-color:var(--alto-sem-color-border-primary-active)}._checkbox_1twm2_2[data-focus-visible] ._checkboxSvgWrapper_1twm2_32{outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._defaultFocus_1twm2_74[data-focus-visible] ._checkboxSvgWrapper_1twm2_32{outline-color:var(--alto-sem-color-border-accent)}._whiteFocus_1twm2_78[data-focus-visible] ._checkboxSvgWrapper_1twm2_32{outline-color:var(--alto-sem-color-border-white)}._checkbox_1twm2_2[data-disabled]{color:var(--alto-sem-color-fg-disabled-primary)}._checkboxSvgWrapper_1twm2_32[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle);cursor:default}._svg_1twm2_46[data-disabled]{stroke:var(--alto-sem-color-fg-disabled-on-subtle)}._checkbox_1twm2_2[data-selected] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-accent-vibrant-default);border-color:var(--alto-sem-color-bg-accent-vibrant-default)}._checkbox_1twm2_2[data-selected][data-hovered] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-accent-vibrant-hover);border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._checkbox_1twm2_2[data-selected][data-pressed] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-accent-vibrant-active);border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._checkbox_1twm2_2[data-selected] ._svg_1twm2_46{stroke-dashoffset:44}._checkbox_1twm2_2[data-indeterminate] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-accent-vibrant-default);border-color:var(--alto-sem-color-bg-accent-vibrant-default)}._checkbox_1twm2_2[data-indeterminate] ._svg_1twm2_46{fill:var(--alto-sem-color-fg-accent-on-vibrant);stroke:none}._checkbox_1twm2_2[data-invalid] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-critical-subtle-default);border-color:var(--alto-sem-color-border-critical)}._checkbox_1twm2_2[data-invalid][data-hovered] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-critical-subtle-hover)}._checkbox_1twm2_2[data-invalid][data-pressed] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-tertiary-active)}._checkbox_1twm2_2[data-invalid][data-indeterminate] ._checkboxSvgWrapper_1twm2_32,._checkbox_1twm2_2[data-invalid][data-selected] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-critical-vibrant-default);border-color:var(--alto-sem-color-bg-critical-vibrant-hover)}._checkbox_1twm2_2[data-invalid][data-indeterminate][data-hovered] ._checkboxSvgWrapper_1twm2_32,._checkbox_1twm2_2[data-invalid][data-selected][data-hovered] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-critical-vibrant-hover)}._checkbox_1twm2_2[data-invalid][data-indeterminate][data-pressed] ._checkboxSvgWrapper_1twm2_32,._checkbox_1twm2_2[data-invalid][data-selected][data-pressed] ._checkboxSvgWrapper_1twm2_32{background:var(--alto-sem-color-bg-critical-subtle-active);border-color:var(--alto-sem-color-bg-critical-vibrant-active)}._checkbox_1twm2_2[data-disabled] ._checkboxSvgWrapper_1twm2_32{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._checkbox_1twm2_2[data-disabled] ._svg_1twm2_46{stroke:var(--alto-sem-color-fg-disabled-on-subtle)}._checkbox_1twm2_2[data-indeterminate] ._svg_1twm2_46{stroke:var(--alto-sem-color-fg-disabled-onSubtle)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._detailsDisclosure_1jv4t_1{display:flex;flex-direction:column;gap:var(--alto-sem-space-2xs);width:100%}._detailsDisclosureIcon_1jv4t_8{rotate:0deg;transition:rotate .2s}._detailsDisclosure_1jv4t_1[data-expanded] ._detailsDisclosureIcon_1jv4t_8{rotate:90deg}._detailsDisclosure_1jv4t_1 button[slot=trigger]{all:unset;border-radius:var(--alto-sem-radius-circle);color:var(--alto-sem-color-fg-accent-primary);cursor:pointer;display:flex;flex-direction:row;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-bold-font-weight);gap:var(--alto-sem-space-xs)}._detailsDisclosure_1jv4t_1 button[slot=trigger][data-focus-visible]{color:var(--alto-sem-color-fg-accent-secondary);outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._detailsDisclosure_1jv4t_1 button[slot=trigger][data-hovered],._detailsDisclosure_1jv4t_1 button[slot=trigger][data-pressed]{color:var(--alto-sem-color-fg-accent-secondary)}._detailsDisclosureDetails_1jv4t_41{padding-left:20px;position:relative}._detailsDisclosureDetails_1jv4t_41:before{background:var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-circle);content:"";height:100%;left:0;margin-left:3px;position:absolute;top:0;width:4px}
|
package/dist/assets/Dialog.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._dialogWrapper_yj1df_1{align-items:center;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;position:fixed;z-index:2}._overlay_yj1df_10{background-color:var(--alto-sem-color-overlay-scrim);top:0;right:0;bottom:0;left:0;position:fixed}._dialog_yj1df_1{background-color:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-tertiary);border-radius:var(--alto-card-radius);box-shadow:0 25px 50px -12px #00000040;margin:var(--alto-sem-space-md);max-height:calc(100vh - var(--alto-sem-space-xl)*2);outline:none;overflow-y:auto;padding:var(--alto-sem-space-lg);position:relative;width:calc(100% - var(--alto-sem-space-md)*2)}._dialog_yj1df_1._noPadding_yj1df_30{padding:0}@media (min-width:640px){._dialog_yj1df_1{margin:var(--alto-sem-space-xl);padding:var(--alto-sem-space-xl);width:calc(100% - var(--alto-sem-space-xl)*2)}._dialog_yj1df_1._noPadding_yj1df_30{padding:0}}@media (min-width:1024px){._dialog_yj1df_1{margin:var(--alto-sem-space-2xl);max-height:calc(100vh - var(--alto-sem-space-2xl)*2);padding:var(--alto-sem-space-2xl);width:calc(100% - var(--alto-sem-space-2xl)*2)}._dialog_yj1df_1._noPadding_yj1df_30{padding:0}}._dialogContent_yj1df_59{display:flex;flex-direction:column;gap:var(--alto-sem-space-md);position:relative}._dialogHeading_yj1df_66{margin:0}._dialogContentInner_yj1df_70{display:flex;flex-direction:column;gap:var(--alto-sem-space-md)}._noHeader_yj1df_76 ._dialogContentInner_yj1df_70{padding-top:0}._closeButton_yj1df_80{align-items:center;background:none;border:none;border-radius:var(--alto-sem-border-radius-sm);color:var(--alto-sem-color-fg-secondary);cursor:pointer;display:flex;justify-content:center;outline:2px solid transparent;outline-offset:2px;position:absolute;right:var(--alto-sem-space-sm);top:var(--alto-sem-space-sm);transition:outline-color .2s ease}._closeButton_yj1df_80:focus,._closeButton_yj1df_80:hover{background-color:var(--alto-sem-color-bg-hover)}._closeButton_yj1df_80:focus{outline-color:var(--alto-sem-color-focus-ring)}._dialogSmall_yj1df_106{max-width:25.625rem}._dialogMedium_yj1df_110{max-width:39.25rem}._dialogLarge_yj1df_114{max-width:52.875rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._phoneNumberField_10nmj_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_10nmj_1 input::-moz-placeholder{color:var(--alto-sem-color-fg-secondary);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._phoneNumberField_10nmj_1 input::placeholder{color:var(--alto-sem-color-fg-secondary);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._phoneNumberField_10nmj_1:has(input[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)}._phoneNumberField_10nmj_1:has(input[data-hovered]){border-color:var(--alto-sem-color-border-primary-hover)}._phoneNumberField_10nmj_1:has(input[data-hovered]) ._selectHandlerValue_10nmj_35{border-right-color:var(--alto-sem-color-border-primary-hover)}._phoneNumberField_10nmj_1:has(select:focus-within){border-color:var(--alto-sem-color-border-primary-active)}._phoneNumberField_10nmj_1:has(input[data-focused]){border-color:var(--alto-sem-color-border-primary-active)}._phoneNumberField_10nmj_1:has(input[data-focused]) ._selectHandlerValue_10nmj_35{border-right-color:var(--alto-sem-color-border-primary-active)}._phoneNumberField_10nmj_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_10nmj_1:has(input[data-disabled]) ._selectHandlerValue_10nmj_35{border-right:1px solid var(--alto-sem-color-border-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle)}._phoneNumberField_10nmj_1:has(input[data-disabled]) select{pointer-events:none}._phoneNumberField_10nmj_1:has(input[data-disabled]) ._selectHandlerIcon_10nmj_66{opacity:0}._phoneNumberField_10nmj_1:has(input[data-invalid]){border:2px solid var(--alto-sem-color-border-critical)}._phoneNumberField_10nmj_1:has(input[data-invalid]) ._selectHandlerValue_10nmj_35{border-right:1px solid var(--alto-sem-color-border-critical)}._selectWrapper_10nmj_78{border:1px solid transparent;flex:1 0 auto;max-width:90px;position:relative;width:100%}._selectWrapper_10nmj_78: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_10nmj_35{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_10nmj_66{color:var(--alto-sem-color-fg-secondary)}._phoneNumberField_10nmj_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;height:48px;left:0;max-width:90px;opacity:0;position:absolute;top:0;width:100%}._phoneNumberField_10nmj_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
|
-
._select-card_1xxiy_1{align-items:flex-start;background:var(--alto-sem-color-bg-layer2-default);border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-secondary);border-radius:var(--alto-card-radius,12px);cursor:pointer;display:flex;flex-direction:column;gap:var(--alto-sem-space-xs);justify-content:center;padding:var(--alto-sem-space-md) var(--alto-sem-space-sm);width:-webkit-fill-available}._select-card_1xxiy_1[data-hovered]{background:var(--alto-sem-color-bg-layer2-hover)}._select-card_1xxiy_1[data-pressed]{background:var(--alto-sem-color-bg-layer2-active)}._select-card_1xxiy_1[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._select-card_1xxiy_1[data-focus-visible],._select-card_1xxiy_1[data-selected][data-select-control=false]{border-color:var(--alto-sem-color-border-accent)}._select-card_1xxiy_1[data-focus-visible]{outline-color:var(--alto-sem-color-border-accent);outline-offset:0;outline-style:solid;outline-width:var(--alto-sem-border-width-sm)}._select-card_1xxiy_1[data-focus-visible][data-selected]{outline-width:var(--alto-sem-border-width-lg)}._select-card__header_1xxiy_46{align-items:center;display:flex;gap:var(--alto-sem-space-xs);width:100%}._select-card__header_1xxiy_46[data-select-control=false]>._checkboxSvgWrapper_1xxiy_53{display:none}._select-card_1xxiy_1[data-disabled] ._select-card__start-slot_1xxiy_58{opacity:.5}._select-card__label-title_1xxiy_63{color:var(--alto-sem-color-fg-primary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-lg-font-size);font-style:normal;font-weight:var(--alto-sem-text-heading-lg-font-weight);letter-spacing:var(--alto-sem-text-body-lg-letter-spacing);line-height:var(--alto-sem-text-body-lg-line-height);margin:0;text-align:left}._select-card_1xxiy_1[data-disabled] ._select-card__label-title_1xxiy_63{color:var(--alto-sem-color-fg-disabled-on-subtle)}._select-card__label_1xxiy_63{display:flex;flex:0 1 auto;flex-direction:column;width:100%}._select-card__end-slot_1xxiy_87{align-items:center;display:flex;flex:0 0 auto;justify-content:center}._select-card_1xxiy_1[data-disabled] ._select-card__end-slot_1xxiy_87{opacity:.5}._select-card__body_1xxiy_99{display:flex;width:-webkit-fill-available}._select-card_1xxiy_1[data-disabled] ._select-card__body_1xxiy_99{opacity:.5}._select-card_1xxiy_1:not([data-selected]) ._select-card__details_1xxiy_110{display:none}._select-card_1xxiy_1[data-selected] ._select-card__details_1xxiy_110{display:flex;width:-webkit-fill-available}._select-card_1xxiy_1[data-disabled] ._select-card__details_1xxiy_110{display:none}._select-card__checkbox_1xxiy_124 ._checkboxSvgWrapper_1xxiy_53{align-items:center;background:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-checkbox-radius);box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;height:1.5rem;justify-content:center;width:1.5rem}._select-card_1xxiy_1 ._svg_1xxiy_138{
|
|
1
|
+
._select-card_1xxiy_1{align-items:flex-start;background:var(--alto-sem-color-bg-layer2-default);border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-secondary);border-radius:var(--alto-card-radius,12px);cursor:pointer;display:flex;flex-direction:column;gap:var(--alto-sem-space-xs);justify-content:center;padding:var(--alto-sem-space-md) var(--alto-sem-space-sm);width:-webkit-fill-available}._select-card_1xxiy_1[data-hovered]{background:var(--alto-sem-color-bg-layer2-hover)}._select-card_1xxiy_1[data-pressed]{background:var(--alto-sem-color-bg-layer2-active)}._select-card_1xxiy_1[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._select-card_1xxiy_1[data-focus-visible],._select-card_1xxiy_1[data-selected][data-select-control=false]{border-color:var(--alto-sem-color-border-accent)}._select-card_1xxiy_1[data-focus-visible]{outline-color:var(--alto-sem-color-border-accent);outline-offset:0;outline-style:solid;outline-width:var(--alto-sem-border-width-sm)}._select-card_1xxiy_1[data-focus-visible][data-selected]{outline-width:var(--alto-sem-border-width-lg)}._select-card__header_1xxiy_46{align-items:center;display:flex;gap:var(--alto-sem-space-xs);width:100%}._select-card__header_1xxiy_46[data-select-control=false]>._checkboxSvgWrapper_1xxiy_53{display:none}._select-card_1xxiy_1[data-disabled] ._select-card__start-slot_1xxiy_58{opacity:.5}._select-card__label-title_1xxiy_63{color:var(--alto-sem-color-fg-primary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-lg-font-size);font-style:normal;font-weight:var(--alto-sem-text-heading-lg-font-weight);letter-spacing:var(--alto-sem-text-body-lg-letter-spacing);line-height:var(--alto-sem-text-body-lg-line-height);margin:0;text-align:left}._select-card_1xxiy_1[data-disabled] ._select-card__label-title_1xxiy_63{color:var(--alto-sem-color-fg-disabled-on-subtle)}._select-card__label_1xxiy_63{display:flex;flex:0 1 auto;flex-direction:column;width:100%}._select-card__end-slot_1xxiy_87{align-items:center;display:flex;flex:0 0 auto;justify-content:center}._select-card_1xxiy_1[data-disabled] ._select-card__end-slot_1xxiy_87{opacity:.5}._select-card__body_1xxiy_99{display:flex;width:-webkit-fill-available}._select-card_1xxiy_1[data-disabled] ._select-card__body_1xxiy_99{opacity:.5}._select-card_1xxiy_1:not([data-selected]) ._select-card__details_1xxiy_110{display:none}._select-card_1xxiy_1[data-selected] ._select-card__details_1xxiy_110{display:flex;width:-webkit-fill-available}._select-card_1xxiy_1[data-disabled] ._select-card__details_1xxiy_110{display:none}._select-card__checkbox_1xxiy_124 ._checkboxSvgWrapper_1xxiy_53{align-items:center;background:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-checkbox-radius);box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;height:1.5rem;justify-content:center;width:1.5rem}._select-card_1xxiy_1 ._svg_1xxiy_138{fill:none;height:1rem;stroke:var(--alto-sem-color-fg-accent-on-vibrant);stroke-dasharray:22px;stroke-dashoffset:66;stroke-width:3px;transition:all .2s;width:1rem}._select-card__checkbox_1xxiy_124[data-selected] ._checkboxSvgWrapper_1xxiy_53{background:var(--alto-sem-color-bg-accent-vibrant-default);border-color:var(--alto-sem-color-bg-accent-vibrant-default)}._select-card__checkbox_1xxiy_124[data-selected][data-hovered] ._checkboxSvgWrapper_1xxiy_53{background:var(--alto-sem-color-bg-accent-vibrant-hover);border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._select-card__checkbox_1xxiy_124[data-selected][data-pressed] ._checkboxSvgWrapper_1xxiy_53{background:var(--alto-sem-color-bg-accent-vibrant-active);border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._select-card__checkbox_1xxiy_124[data-selected] ._svg_1xxiy_138{stroke-dashoffset:44}._select-card__checkbox_1xxiy_124[data-hovered] ._checkboxSvgWrapper_1xxiy_53{border-color:var(--alto-sem-color-border-primary-hover)}._select-card__checkbox_1xxiy_124[data-pressed] ._checkboxSvgWrapper_1xxiy_53{border-color:var(--alto-sem-color-border-primary-active)}._select-card__checkbox_1xxiy_124[data-focus-visible][data-select-control=false] ._checkboxSvgWrapper_1xxiy_53{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)}._select-card__checkbox_1xxiy_124[data-selected=true][data-select-control=false]{border-color:var(--alto-sem-color-border-accent)}._select-card_1xxiy_1[data-disabled] ._checkboxSvgWrapper_1xxiy_53{background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._select-card_1xxiy_1[data-disabled][data-selected] ._checkboxSvgWrapper_1xxiy_53{border-color:transparent}._select-card_1xxiy_1[data-disabled] ._svg_1xxiy_138{stroke:var(--alto-sem-color-fg-disabled-on-subtle)}._select-card__radio_1xxiy_208 ._select-card__header_1xxiy_46:before{background-color:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-circle);box-sizing:border-box;content:"";display:block;flex-shrink:0;height:1.5rem;transition:all .2s;width:1.5rem}._select-card__radio_1xxiy_208[data-hovered] ._select-card__header_1xxiy_46:before{border-color:var(--alto-sem-color-border-primary-hover)}._select-card__radio_1xxiy_208[data-focus-visible][data-select-control=false] ._select-card__header_1xxiy_46:before{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);transition:none}._select-card__radio_1xxiy_208[data-pressed] ._select-card__header_1xxiy_46:before{border-color:var(--alto-sem-color-border-primary-active)}._select-card__radio_1xxiy_208[data-selected] ._select-card__header_1xxiy_46:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-accent-vibrant-default);border-width:.5rem;box-shadow:0 0 0 1px var(--alto-sem-color-border-white)}._select-card__radio_1xxiy_208[data-selected][data-hovered] ._select-card__header_1xxiy_46:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._select-card__radio_1xxiy_208[data-selected][data-focused] ._select-card__header_1xxiy_46:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._select-card__radio_1xxiy_208[data-selected][data-focus-visible] ._select-card__header_1xxiy_46:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._select-card__radio_1xxiy_208[data-selected][data-pressed] ._select-card__header_1xxiy_46:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._select-card__radio_1xxiy_208[data-invalid] ._select-card__header_1xxiy_46:before{background:var(--alto-sem-color-bg-critical-subtle-default);border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical);border-radius:var(--alto-sem-radius-circle)}._select-card__radio_1xxiy_208[data-invalid][data-hovered] ._select-card__header_1xxiy_46:before{background-color:var(--alto-sem-color-bg-tertiary-hover);border-color:var(--alto-sem-color-border-critical)}._select-card__radio_1xxiy_208[data-invalid][data-focused] ._select-card__header_1xxiy_46:before{border-color:var(--alto-sem-color-border-critical)}._select-card__radio_1xxiy_208[data-invalid][data-focus-visible] ._select-card__header_1xxiy_46:before,._select-card__radio_1xxiy_208[data-invalid][data-pressed] ._select-card__header_1xxiy_46:before{background-color:var(--alto-sem-color-bg-tertiary-active);border-color:var(--alto-sem-color-border-critical)}._select-card__radio_1xxiy_208[data-invalid][data-selected] ._select-card__header_1xxiy_46:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-critical-vibrant-default);border-width:.5rem}._select-card__radio_1xxiy_208[data-disabled] ._select-card__header_1xxiy_46:before{background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);border-radius:var(--alto-sem-radius-circle)}._select-card__radio_1xxiy_208[data-disabled][data-selected] ._select-card__header_1xxiy_46:before{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-bg-disabled-subtle);border-width:.5rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color:#ebebeb;--highlight-color:#f5f5f5;--animation-duration:1.5s;--animation-direction:normal;--pseudo-element-display:block;background-color:var(--base-color);border-radius:.25rem;display:inline-flex;line-height:1;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.react-loading-skeleton:after{animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-iteration-count:infinite;animation-name:react-loading-skeleton;animation-timing-function:ease-in-out;background-image:var( --custom-highlight-background,linear-gradient(90deg,var(--base-color) 0,var(--highlight-color) 50%,var(--base-color) 100%) );background-repeat:no-repeat;content:" ";display:var(--pseudo-element-display);height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%)}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display:none}}.
|
|
1
|
+
@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color:#ebebeb;--highlight-color:#f5f5f5;--animation-duration:1.5s;--animation-direction:normal;--pseudo-element-display:block;background-color:var(--base-color);border-radius:.25rem;display:inline-flex;line-height:1;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.react-loading-skeleton:after{animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-iteration-count:infinite;animation-name:react-loading-skeleton;animation-timing-function:ease-in-out;background-image:var( --custom-highlight-background,linear-gradient(90deg,var(--base-color) 0,var(--highlight-color) 50%,var(--base-color) 100%) );background-repeat:no-repeat;content:" ";display:var(--pseudo-element-display);height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%)}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display:none}}._skeletonLoader_2xt5b_1{border-radius:var(--alto-sem-radius-5xs);line-height:1;mix-blend-mode:luminosity;text-align:left;--skeleton-base-color:hsla(252,2%,50%,.4);--skeleton-highlight-start:hsla(0,0%,100%,0);--skeleton-highlight-center:hsla(0,0%,100%,.6);--skeleton-highlight-end:hsla(0,0%,100%,0);--animation-duration:2s}._skeletonLoader_2xt5b_1._multiLine_2xt5b_15{display:flex;flex-direction:column;line-height:unset}._skeletonLoader_2xt5b_1._multiLine_2xt5b_15 span:not(._srOnly_2xt5b_22){display:block;width:100%}._skeletonLoader_2xt5b_1._multiLine_2xt5b_15 span:not(:last-child,._srOnly_2xt5b_22){margin-bottom:var(--alto-sem-space-2xs)}._skeletonLoader_2xt5b_1 span:not(._srOnly_2xt5b_22){mix-blend-mode:inherit}._skeletonLoader_2xt5b_1 span:after{width:calc(var(--skeleton-width)*2)}@media (prefers-reduced-motion:reduce){._skeletonLoader_2xt5b_1{--animation-duration:0s}._skeletonLoader_2xt5b_1 span{animation:none}}@media (prefers-contrast:high){._skeletonLoader_2xt5b_1{--skeleton-base-color:rgba(0,0,0,.8);--skeleton-highlight-center:#fff}}._srOnly_2xt5b_22{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { DisclosureProps as AriaDisclosureProps } from 'react-aria-components';
|
|
3
|
+
type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
3
4
|
export interface AccordionProps extends Omit<AriaDisclosureProps, 'children'> {
|
|
4
5
|
/** The title text displayed in the accordion header */
|
|
5
6
|
title: string;
|
|
@@ -17,6 +18,8 @@ export interface AccordionProps extends Omit<AriaDisclosureProps, 'children'> {
|
|
|
17
18
|
titleEnd?: React.ReactNode;
|
|
18
19
|
/** Unique identifier for the accordion */
|
|
19
20
|
id?: string;
|
|
21
|
+
/** The semantic heading level for the accordion title */
|
|
22
|
+
headingLevel?: HeadingLevel;
|
|
20
23
|
}
|
|
21
24
|
export interface AccordionGroupProps {
|
|
22
25
|
/** Title for the accordion group - can be string or ReactNode */
|
|
@@ -30,6 +33,6 @@ export interface AccordionGroupProps {
|
|
|
30
33
|
/** Whether multiple accordions can be expanded at once */
|
|
31
34
|
allowsMultipleExpanded?: boolean;
|
|
32
35
|
}
|
|
33
|
-
export declare const Accordion: ({ title, description, children, defaultExpanded, className, titleStart, titleEnd, id, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
export declare const Accordion: ({ title, description, children, defaultExpanded, className, titleStart, titleEnd, id, headingLevel, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
34
37
|
export declare const AccordionGroup: ({ title, description, children, className, allowsMultipleExpanded, }: AccordionGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
35
38
|
export default Accordion;
|
|
@@ -2,21 +2,21 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import React__default 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_1j9rd_1";
|
|
6
|
+
const accordionGroup = "_accordionGroup_1j9rd_14";
|
|
7
|
+
const accordionStack = "_accordionStack_1j9rd_20";
|
|
8
|
+
const accordionHeader = "_accordionHeader_1j9rd_26";
|
|
9
|
+
const trigger = "_trigger_1j9rd_33";
|
|
10
|
+
const buttonContent = "_buttonContent_1j9rd_42";
|
|
11
|
+
const titleContainer = "_titleContainer_1j9rd_50";
|
|
12
|
+
const titleWrapper = "_titleWrapper_1j9rd_57";
|
|
13
|
+
const endContainer = "_endContainer_1j9rd_62";
|
|
14
|
+
const titleStart = "_titleStart_1j9rd_68";
|
|
15
|
+
const titleEnd = "_titleEnd_1j9rd_69";
|
|
16
|
+
const accordionTitle = "_accordionTitle_1j9rd_74";
|
|
17
|
+
const accordionDescription = "_accordionDescription_1j9rd_87";
|
|
18
|
+
const iconWrapper = "_iconWrapper_1j9rd_97";
|
|
19
|
+
const panelContent = "_panelContent_1j9rd_129";
|
|
20
20
|
const styles = {
|
|
21
21
|
accordion,
|
|
22
22
|
accordionGroup,
|
|
@@ -39,15 +39,17 @@ const AccordionTrigger = ({
|
|
|
39
39
|
description,
|
|
40
40
|
titleStart: titleStart2,
|
|
41
41
|
titleEnd: titleEnd2,
|
|
42
|
-
id
|
|
42
|
+
id,
|
|
43
|
+
headingLevel = "h3"
|
|
43
44
|
}) => {
|
|
45
|
+
const HeadingElement = headingLevel;
|
|
44
46
|
return /* @__PURE__ */ jsx(Button, { slot: "trigger", className: styles.trigger, ...id ? {
|
|
45
47
|
id
|
|
46
48
|
} : {}, children: /* @__PURE__ */ jsxs("span", { className: styles.buttonContent, children: [
|
|
47
49
|
/* @__PURE__ */ jsxs("span", { className: styles.titleContainer, children: [
|
|
48
50
|
titleStart2 && /* @__PURE__ */ jsx("span", { className: styles.titleStart, children: titleStart2 }),
|
|
49
51
|
/* @__PURE__ */ jsxs("div", { className: styles.titleWrapper, children: [
|
|
50
|
-
/* @__PURE__ */ jsx(
|
|
52
|
+
/* @__PURE__ */ jsx(HeadingElement, { className: styles.accordionTitle, children: title }),
|
|
51
53
|
description && /* @__PURE__ */ jsx("p", { className: styles.accordionDescription, children: description })
|
|
52
54
|
] })
|
|
53
55
|
] }),
|
|
@@ -98,11 +100,12 @@ const Accordion = ({
|
|
|
98
100
|
titleStart: titleStart2,
|
|
99
101
|
titleEnd: titleEnd2,
|
|
100
102
|
id,
|
|
103
|
+
headingLevel = "h3",
|
|
101
104
|
...props
|
|
102
105
|
}) => {
|
|
103
106
|
const accordionClasses = [styles.accordion, className].filter(Boolean).join(" ");
|
|
104
107
|
return /* @__PURE__ */ jsxs(Disclosure, { className: accordionClasses, defaultExpanded, id, ...props, children: [
|
|
105
|
-
/* @__PURE__ */ jsx(AccordionTrigger, { title, description, titleStart: titleStart2, titleEnd: titleEnd2, id }),
|
|
108
|
+
/* @__PURE__ */ jsx(AccordionTrigger, { title, description, titleStart: titleStart2, titleEnd: titleEnd2, id, headingLevel }),
|
|
106
109
|
/* @__PURE__ */ jsx(AccordionPanel, { children })
|
|
107
110
|
] });
|
|
108
111
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import React__default from "react";
|
|
3
3
|
import { c as cva } from "../../index-DdUYounA.js";
|
|
4
|
-
import '../../assets/ButtonGroup.css';const buttonGroup = "
|
|
5
|
-
const alignStart = "
|
|
6
|
-
const alignCenter = "
|
|
7
|
-
const alignEnd = "
|
|
8
|
-
const alignJustify = "
|
|
9
|
-
const alignSplit = "
|
|
10
|
-
const alignStack = "
|
|
11
|
-
const alignStackFlip = "
|
|
4
|
+
import '../../assets/ButtonGroup.css';const buttonGroup = "_buttonGroup_53q76_2";
|
|
5
|
+
const alignStart = "_alignStart_53q76_10";
|
|
6
|
+
const alignCenter = "_alignCenter_53q76_14";
|
|
7
|
+
const alignEnd = "_alignEnd_53q76_18";
|
|
8
|
+
const alignJustify = "_alignJustify_53q76_22";
|
|
9
|
+
const alignSplit = "_alignSplit_53q76_30";
|
|
10
|
+
const alignStack = "_alignStack_53q76_43";
|
|
11
|
+
const alignStackFlip = "_alignStackFlip_53q76_48";
|
|
12
12
|
const styles = {
|
|
13
13
|
buttonGroup,
|
|
14
14
|
alignStart,
|
|
@@ -9,26 +9,26 @@ import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
|
|
|
9
9
|
import { useFocusRing } from "@react-aria/focus";
|
|
10
10
|
import { resolveResponsiveProp } from "../../utils/breakpoint/responsive.js";
|
|
11
11
|
import { useBreakpoint } from "../../utils/breakpoint/hooks/useBreakpoint.js";
|
|
12
|
-
import '../../assets/Carousel.css';const carouselWrapper = "
|
|
13
|
-
const showPartialItems = "
|
|
14
|
-
const carousel$1 = "
|
|
15
|
-
const hasScrollPadding = "
|
|
16
|
-
const scroller = "
|
|
17
|
-
const item = "
|
|
18
|
-
const slideLeft = "
|
|
19
|
-
const slideRight = "
|
|
20
|
-
const controls = "
|
|
21
|
-
const defaultPrevButton = "
|
|
22
|
-
const defaultNextButton = "
|
|
23
|
-
const defaultDotsContainer = "
|
|
24
|
-
const defaultCarouselWrapper = "
|
|
25
|
-
const autoplayControlWrapper = "
|
|
26
|
-
const defaultAutoplayControl = "
|
|
27
|
-
const showOnHover = "
|
|
28
|
-
const hidden = "
|
|
29
|
-
const hiddenTabs = "
|
|
30
|
-
const infinite = "
|
|
31
|
-
const native = "
|
|
12
|
+
import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_1bise_2";
|
|
13
|
+
const showPartialItems = "_showPartialItems_1bise_14";
|
|
14
|
+
const carousel$1 = "_carousel_1bise_2";
|
|
15
|
+
const hasScrollPadding = "_hasScrollPadding_1bise_25";
|
|
16
|
+
const scroller = "_scroller_1bise_43";
|
|
17
|
+
const item = "_item_1bise_84";
|
|
18
|
+
const slideLeft = "_slideLeft_1bise_122";
|
|
19
|
+
const slideRight = "_slideRight_1bise_126";
|
|
20
|
+
const controls = "_controls_1bise_149";
|
|
21
|
+
const defaultPrevButton = "_defaultPrevButton_1bise_160";
|
|
22
|
+
const defaultNextButton = "_defaultNextButton_1bise_168";
|
|
23
|
+
const defaultDotsContainer = "_defaultDotsContainer_1bise_177";
|
|
24
|
+
const defaultCarouselWrapper = "_defaultCarouselWrapper_1bise_188";
|
|
25
|
+
const autoplayControlWrapper = "_autoplayControlWrapper_1bise_195";
|
|
26
|
+
const defaultAutoplayControl = "_defaultAutoplayControl_1bise_195";
|
|
27
|
+
const showOnHover = "_showOnHover_1bise_204";
|
|
28
|
+
const hidden = "_hidden_1bise_214";
|
|
29
|
+
const hiddenTabs = "_hiddenTabs_1bise_245";
|
|
30
|
+
const infinite = "_infinite_1bise_264";
|
|
31
|
+
const native = "_native_1bise_269";
|
|
32
32
|
const styles = {
|
|
33
33
|
carouselWrapper,
|
|
34
34
|
showPartialItems,
|
|
@@ -297,14 +297,17 @@ const Carousel = ({
|
|
|
297
297
|
isFocusVisible
|
|
298
298
|
} = useFocusRing();
|
|
299
299
|
const getScrollerStyles = () => {
|
|
300
|
-
|
|
301
|
-
|
|
300
|
+
const styles2 = {};
|
|
301
|
+
if (resolvedSpaceBetweenItems >= 0) {
|
|
302
|
+
styles2.gap = `${resolvedSpaceBetweenItems}px`;
|
|
302
303
|
}
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
gridAutoColumns
|
|
306
|
-
|
|
307
|
-
|
|
304
|
+
if (resolvedItemsPerPage > 1 && resolvedSpaceBetweenItems > 0) {
|
|
305
|
+
const gapSpacePerItem = resolvedSpaceBetweenItems * (safeItemsPerPage - 1) / safeItemsPerPage;
|
|
306
|
+
styles2.gridAutoColumns = `calc(${100 / safeItemsPerPage}% - ${gapSpacePerItem}px)`;
|
|
307
|
+
} else if (resolvedItemsPerPage > 1) {
|
|
308
|
+
styles2.gridAutoColumns = `${100 / safeItemsPerPage}%`;
|
|
309
|
+
}
|
|
310
|
+
return styles2;
|
|
308
311
|
};
|
|
309
312
|
const activeItemIndices = getActiveItemIndices();
|
|
310
313
|
const handleCarouselKeyDown = (e) => {
|
|
@@ -349,7 +352,7 @@ const Carousel = ({
|
|
|
349
352
|
setTimeout(() => {
|
|
350
353
|
setIsDragging(false);
|
|
351
354
|
}, 50);
|
|
352
|
-
}, "data-dragging": isDragging ? "true" : "false", itemsPerPage: safeItemsPerPage,
|
|
355
|
+
}, "data-dragging": isDragging ? "true" : "false", itemsPerPage: safeItemsPerPage, scrollPadding: resolvedScrollPadding, "data-has-space-between": resolvedSpaceBetweenItems > 0 ? "true" : void 0, "data-items-per-page": resolvedItemsPerPage !== 1 ? safeItemsPerPage.toString() : void 0, children: [
|
|
353
356
|
/* @__PURE__ */ jsx(CarouselScroller, { className: `${styles.scroller} ${focusStyleVariants({
|
|
354
357
|
focusStyle
|
|
355
358
|
})}`, ...focusProps, "data-focused": isFocusVisible ? true : void 0, "data-focus-visible": isFocusVisible ? true : void 0, "data-transitioning": isTransitioning ? "true" : void 0, style: getScrollerStyles(), tabIndex: 0, role: "region", "aria-label": "Carousel content", onKeyDown: handleCarouselKeyDown, children: items.map((child, index) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -619,8 +619,11 @@ function $fae977aafc393c5c$var$offsetToString(offset) {
|
|
|
619
619
|
let sign = Math.sign(offset) < 0 ? "-" : "+";
|
|
620
620
|
offset = Math.abs(offset);
|
|
621
621
|
let offsetHours = Math.floor(offset / 36e5);
|
|
622
|
-
let offsetMinutes = offset % 36e5 / 6e4;
|
|
623
|
-
|
|
622
|
+
let offsetMinutes = Math.floor(offset % 36e5 / 6e4);
|
|
623
|
+
let offsetSeconds = Math.floor(offset % 36e5 % 6e4 / 1e3);
|
|
624
|
+
let stringOffset = `${sign}${String(offsetHours).padStart(2, "0")}:${String(offsetMinutes).padStart(2, "0")}`;
|
|
625
|
+
if (offsetSeconds !== 0) stringOffset += `:${String(offsetSeconds).padStart(2, "0")}`;
|
|
626
|
+
return stringOffset;
|
|
624
627
|
}
|
|
625
628
|
function $fae977aafc393c5c$export$bf79f1ebf4b18792(date) {
|
|
626
629
|
return `${$fae977aafc393c5c$export$4223de14708adc63(date)}${$fae977aafc393c5c$var$offsetToString(date.offset)}[${date.timeZone}]`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
import { HeadingProps } from '../Heading/Heading';
|
|
2
2
|
export interface DestinationHeadingProps extends Omit<HeadingProps, 'children'> {
|
|
3
|
+
/**
|
|
4
|
+
* From origin
|
|
5
|
+
* */
|
|
3
6
|
from: string;
|
|
7
|
+
/**
|
|
8
|
+
* To destination
|
|
9
|
+
* */
|
|
4
10
|
to: string;
|
|
5
11
|
/**
|
|
6
|
-
*
|
|
12
|
+
* Localised label for the separator between the two locations.
|
|
13
|
+
* This is used by screen readers to better convey the relationship between the two locations.
|
|
7
14
|
* @default "to"
|
|
8
15
|
*/
|
|
16
|
+
separatorLabel?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Custom a11y label for the arrow icon between destinations.
|
|
19
|
+
* @deprecated Use `separatorLabel` instead.
|
|
20
|
+
*/
|
|
9
21
|
iconLabel?: string;
|
|
10
22
|
}
|
|
11
|
-
export declare const DestinationHeading: ({ from, to, iconLabel, ...props }: DestinationHeadingProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const DestinationHeading: ({ from, to, separatorLabel, iconLabel: _deprecatedIconLabel, ...props }: DestinationHeadingProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
24
|
export default DestinationHeading;
|
|
@@ -5,15 +5,28 @@ import '../../assets/DestinationHeading.css';const destinationHeading = "_destin
|
|
|
5
5
|
const styles = {
|
|
6
6
|
destinationHeading
|
|
7
7
|
};
|
|
8
|
+
const ICON_SIZE_MAP = {
|
|
9
|
+
xxs: "1x",
|
|
10
|
+
xs: "1x",
|
|
11
|
+
sm: "1x",
|
|
12
|
+
md: "1.25x",
|
|
13
|
+
lg: "1.5x",
|
|
14
|
+
xl: "2x"
|
|
15
|
+
};
|
|
8
16
|
const DestinationHeading = ({
|
|
9
17
|
from,
|
|
10
18
|
to,
|
|
11
|
-
|
|
19
|
+
separatorLabel,
|
|
20
|
+
iconLabel: _deprecatedIconLabel,
|
|
21
|
+
// deprecated
|
|
12
22
|
...props
|
|
13
23
|
}) => {
|
|
14
|
-
|
|
24
|
+
const iconSize = props.size ? ICON_SIZE_MAP[props.size] : void 0;
|
|
25
|
+
const separatorLabelResolved = separatorLabel || _deprecatedIconLabel || "to";
|
|
26
|
+
const a11yName = `${from} ${separatorLabelResolved} ${to}`;
|
|
27
|
+
return /* @__PURE__ */ jsx(Heading, { ...props, "aria-label": a11yName, children: /* @__PURE__ */ jsxs("span", { className: styles.destinationHeading, children: [
|
|
15
28
|
from,
|
|
16
|
-
/* @__PURE__ */ jsx(Icon, { iconName: "arrow-right", iconPrefix: "fas",
|
|
29
|
+
/* @__PURE__ */ jsx(Icon, { iconName: "arrow-right", iconPrefix: "fas", iconSize, isDecorative: true }),
|
|
17
30
|
" ",
|
|
18
31
|
to
|
|
19
32
|
] }) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DestinationHeading.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DestinationHeading.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Disclosure, DisclosurePanel, Button } from "react-aria-components";
|
|
3
3
|
import { Icon } from "../Icon/Icon.js";
|
|
4
|
-
import '../../assets/DetailsDisclosure.css';const detailsDisclosure = "
|
|
5
|
-
const detailsDisclosureIcon = "
|
|
6
|
-
const detailsDisclosureDetails = "
|
|
4
|
+
import '../../assets/DetailsDisclosure.css';const detailsDisclosure = "_detailsDisclosure_1jv4t_1";
|
|
5
|
+
const detailsDisclosureIcon = "_detailsDisclosureIcon_1jv4t_8";
|
|
6
|
+
const detailsDisclosureDetails = "_detailsDisclosureDetails_1jv4t_41";
|
|
7
7
|
const styles = {
|
|
8
8
|
detailsDisclosure,
|
|
9
9
|
detailsDisclosureIcon,
|
|
@@ -44,26 +44,44 @@ export interface DialogProps extends AriaDialogProps {
|
|
|
44
44
|
* ID of element describing the dialog (optional but recommended)
|
|
45
45
|
*/
|
|
46
46
|
'aria-labelledby'?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Removes the default padding from the dialog container
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
removePadding?: boolean;
|
|
47
52
|
}
|
|
48
53
|
export interface DialogComposition {
|
|
49
54
|
Header: typeof DialogHeader;
|
|
50
55
|
Content: typeof DialogContent;
|
|
51
56
|
}
|
|
52
|
-
declare const DialogHeader:
|
|
53
|
-
children:
|
|
54
|
-
id?: string;
|
|
55
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
56
|
-
export declare function Dialog(props: React.PropsWithChildren<DialogProps>): import("react/jsx-runtime").JSX.Element | null;
|
|
57
|
-
export declare namespace Dialog {
|
|
58
|
-
var Header: ({ id, children, }: {
|
|
57
|
+
declare const DialogHeader: {
|
|
58
|
+
({ id, children, }: {
|
|
59
59
|
children: React.ReactNode;
|
|
60
60
|
id?: string;
|
|
61
|
-
})
|
|
62
|
-
|
|
61
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
displayName: string;
|
|
63
|
+
};
|
|
64
|
+
declare const DialogContent: {
|
|
65
|
+
({ children }: {
|
|
63
66
|
children: React.ReactNode;
|
|
64
|
-
})
|
|
67
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
68
|
+
displayName: string;
|
|
69
|
+
};
|
|
70
|
+
export declare function Dialog(props: React.PropsWithChildren<DialogProps>): import("react/jsx-runtime").JSX.Element | null;
|
|
71
|
+
export declare namespace Dialog {
|
|
72
|
+
var Header: {
|
|
73
|
+
({ id, children, }: {
|
|
74
|
+
children: React.ReactNode;
|
|
75
|
+
id?: string;
|
|
76
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
77
|
+
displayName: string;
|
|
78
|
+
};
|
|
79
|
+
var Content: {
|
|
80
|
+
({ children }: {
|
|
81
|
+
children: React.ReactNode;
|
|
82
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
83
|
+
displayName: string;
|
|
84
|
+
};
|
|
85
|
+
var displayName: string;
|
|
65
86
|
}
|
|
66
|
-
export declare const DialogContent: ({ children }: {
|
|
67
|
-
children: React.ReactNode;
|
|
68
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
69
87
|
export default Dialog;
|
|
@@ -4,21 +4,23 @@ import { IconButton } from "../IconButton/IconButton.js";
|
|
|
4
4
|
import { OverlayContainer, useOverlay, usePreventScroll, useModal } from "@react-aria/overlays";
|
|
5
5
|
import { useDialog } from "@react-aria/dialog";
|
|
6
6
|
import { FocusScope } from "@react-aria/focus";
|
|
7
|
-
import '../../assets/Dialog.css';const dialogWrapper = "
|
|
8
|
-
const overlay = "
|
|
9
|
-
const dialog = "
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
7
|
+
import '../../assets/Dialog.css';const dialogWrapper = "_dialogWrapper_yj1df_1";
|
|
8
|
+
const overlay = "_overlay_yj1df_10";
|
|
9
|
+
const dialog = "_dialog_yj1df_1";
|
|
10
|
+
const noPadding = "_noPadding_yj1df_30";
|
|
11
|
+
const dialogContent = "_dialogContent_yj1df_59";
|
|
12
|
+
const dialogHeading = "_dialogHeading_yj1df_66";
|
|
13
|
+
const dialogContentInner = "_dialogContentInner_yj1df_70";
|
|
14
|
+
const noHeader = "_noHeader_yj1df_76";
|
|
15
|
+
const closeButton = "_closeButton_yj1df_80";
|
|
16
|
+
const dialogSmall = "_dialogSmall_yj1df_106";
|
|
17
|
+
const dialogMedium = "_dialogMedium_yj1df_110";
|
|
18
|
+
const dialogLarge = "_dialogLarge_yj1df_114";
|
|
18
19
|
const styles = {
|
|
19
20
|
dialogWrapper,
|
|
20
21
|
overlay,
|
|
21
22
|
dialog,
|
|
23
|
+
noPadding,
|
|
22
24
|
dialogContent,
|
|
23
25
|
dialogHeading,
|
|
24
26
|
dialogContentInner,
|
|
@@ -36,18 +38,26 @@ const DialogHeader = ({
|
|
|
36
38
|
}) => {
|
|
37
39
|
return /* @__PURE__ */ jsx("div", { className: styles.dialogHeading, id, children });
|
|
38
40
|
};
|
|
41
|
+
const DialogContent = ({
|
|
42
|
+
children
|
|
43
|
+
}) => {
|
|
44
|
+
return /* @__PURE__ */ jsx("div", { className: styles.dialogContentInner, children });
|
|
45
|
+
};
|
|
46
|
+
DialogHeader.displayName = "Dialog.Header";
|
|
47
|
+
DialogContent.displayName = "Dialog.Content";
|
|
39
48
|
function DialogWrapper({
|
|
40
49
|
children,
|
|
41
50
|
...props
|
|
42
51
|
}) {
|
|
43
52
|
const {
|
|
44
53
|
onClose,
|
|
45
|
-
size = "
|
|
54
|
+
size = "dialogMedium",
|
|
46
55
|
modal = false,
|
|
47
56
|
hasDismissButton = true,
|
|
48
57
|
dismissButtonLabel = "Close dialog",
|
|
49
58
|
role = "dialog",
|
|
50
|
-
id
|
|
59
|
+
id,
|
|
60
|
+
removePadding = false
|
|
51
61
|
} = props;
|
|
52
62
|
const ref = useRef(null);
|
|
53
63
|
const {
|
|
@@ -71,12 +81,13 @@ function DialogWrapper({
|
|
|
71
81
|
} = useModal();
|
|
72
82
|
const headerChild = React__default.Children.toArray(children).find((child) => React__default.isValidElement(child) && child.type === DialogHeader);
|
|
73
83
|
const otherChildren = React__default.Children.toArray(children).filter((child) => !React__default.isValidElement(child) || child.type !== DialogHeader);
|
|
74
|
-
const hasHeader = Boolean(headerChild)
|
|
84
|
+
const hasHeader = Boolean(headerChild);
|
|
75
85
|
const headerId = props["aria-labelledby"] || `${id}-header`;
|
|
76
86
|
const contentId = props["aria-describedby"] || `${id}-content`;
|
|
87
|
+
const dialogClasses = [styles.dialog, styles[size], removePadding ? styles.noPadding : ""].filter(Boolean).join(" ");
|
|
77
88
|
return /* @__PURE__ */ jsxs("div", { className: `${styles.dialogWrapper} ${modal ? styles.modal : ""}`, children: [
|
|
78
89
|
modal && /* @__PURE__ */ jsx("div", { className: styles.overlay, ...underlayProps, onClick: onClose, "aria-hidden": "true" }),
|
|
79
|
-
/* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: false, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ...dialogProps, ...modalProps, ref, className:
|
|
90
|
+
/* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: false, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ...dialogProps, ...modalProps, ref, className: dialogClasses, "data-size": size, id, role, "aria-labelledby": headerId, "aria-describedby": contentId, children: [
|
|
80
91
|
/* @__PURE__ */ jsxs("div", { className: `${styles.dialogContent} ${!hasHeader ? styles.noHeader : ""}`, children: [
|
|
81
92
|
hasHeader && /* @__PURE__ */ jsx("div", { className: styles.dialogHeader, id: headerId, children: headerChild }),
|
|
82
93
|
/* @__PURE__ */ jsx("div", { id: contentId, children: otherChildren })
|
|
@@ -99,16 +110,11 @@ function Dialog(props) {
|
|
|
99
110
|
}
|
|
100
111
|
return /* @__PURE__ */ jsx(OverlayContainer, { children: /* @__PURE__ */ jsx(DialogWrapper, { ...props, children }) });
|
|
101
112
|
}
|
|
102
|
-
const DialogContent = ({
|
|
103
|
-
children
|
|
104
|
-
}) => {
|
|
105
|
-
return /* @__PURE__ */ jsx("div", { className: styles.dialogContentInner, children });
|
|
106
|
-
};
|
|
107
113
|
Dialog.Header = DialogHeader;
|
|
108
114
|
Dialog.Content = DialogContent;
|
|
115
|
+
Dialog.displayName = "Dialog";
|
|
109
116
|
export {
|
|
110
117
|
Dialog,
|
|
111
|
-
DialogContent,
|
|
112
118
|
Dialog as default
|
|
113
119
|
};
|
|
114
120
|
//# sourceMappingURL=Dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -77,5 +77,5 @@ export interface IconProps {
|
|
|
77
77
|
*/
|
|
78
78
|
privateBgColorVariant?: BackgroundVariants['backgroundColor'];
|
|
79
79
|
}
|
|
80
|
-
export declare const Icon: ({ iconName, iconPrefix, iconSize, iconPack, color, padding, flip, fixedWidth, listItem, border, rotation, pull, spin, className, ariaLabel, privateBgColorVariant, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
80
|
+
export declare const Icon: ({ iconName, iconPrefix, iconSize, iconPack, color, padding, flip, fixedWidth, listItem, border, rotation, pull, isDecorative, spin, className, ariaLabel, privateBgColorVariant, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
81
81
|
export default Icon;
|
|
@@ -91,6 +91,7 @@ const Icon = ({
|
|
|
91
91
|
border,
|
|
92
92
|
rotation,
|
|
93
93
|
pull,
|
|
94
|
+
isDecorative,
|
|
94
95
|
// eslint-disable-next-line react/prop-types
|
|
95
96
|
spin,
|
|
96
97
|
className,
|
|
@@ -113,7 +114,7 @@ const Icon = ({
|
|
|
113
114
|
const classNames = [iconPrefix, `fa-${iconName}`, fontAwesomeSize, iconPack ? `fa-${iconPack}` : "", flip ? `fa-flip-${flip}` : "", fixedWidth2 ? "fa-fw" : "", listItem ? "fa-li" : "", border ? "fa-border" : "", rotation ? `fa-rotate-${rotation}` : "", pull ? `fa-pull-${pull}` : "", spin ? "fa-spin" : "", customSizeClass].filter(Boolean).join(" ");
|
|
114
115
|
return /* @__PURE__ */ jsx("span", { className: `icon-wrapper ${styles["icon-wrapper"]} ${className || ""} ${icon({
|
|
115
116
|
iconSize
|
|
116
|
-
})}`, children: /* @__PURE__ */ jsx("i", { className: `${classNames} ${icon({
|
|
117
|
+
})}`, "aria-hidden": isDecorative ? "true" : void 0, children: /* @__PURE__ */ jsx("i", { className: `${classNames} ${icon({
|
|
117
118
|
padding
|
|
118
119
|
})} ${foregroundColorVariants({
|
|
119
120
|
foregroundColor: color
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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-Dbc1db6s.js";
|
|
5
5
|
import { resolveCountryCode, countryPhoneMap, DEFAULT_PATTERN, getCountryOptions, getCountryFlagEmoji, getPhoneNumberValue } from "../../utils/phoneNumber/phoneNumber.js";
|
|
6
6
|
import { Field } from "../_base/Field/Field.js";
|
|
7
|
-
import '../../assets/PhoneNumberField.css';const phoneNumberField = "
|
|
8
|
-
const selectHandlerValue = "
|
|
9
|
-
const selectHandlerIcon = "
|
|
10
|
-
const selectWrapper = "
|
|
7
|
+
import '../../assets/PhoneNumberField.css';const phoneNumberField = "_phoneNumberField_10nmj_1";
|
|
8
|
+
const selectHandlerValue = "_selectHandlerValue_10nmj_35";
|
|
9
|
+
const selectHandlerIcon = "_selectHandlerIcon_10nmj_66";
|
|
10
|
+
const selectWrapper = "_selectWrapper_10nmj_78";
|
|
11
11
|
const styles = {
|
|
12
12
|
phoneNumberField,
|
|
13
13
|
selectHandlerValue,
|
|
@@ -45,6 +45,11 @@ export interface SkeletonLoaderProps {
|
|
|
45
45
|
* @default false
|
|
46
46
|
*/
|
|
47
47
|
elementFocusable?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Announces loading state to screen readers after a delay (in ms)
|
|
50
|
+
* @default 300
|
|
51
|
+
*/
|
|
52
|
+
announceLoadingDelay?: number;
|
|
48
53
|
}
|
|
49
|
-
export declare const SkeletonLoader: ({ width, height, count, circle, isLoading, children, "aria-label": ariaLabel, elementFocusable, }: SkeletonLoaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
export declare const SkeletonLoader: ({ width, height, count, circle, isLoading, children, "aria-label": ariaLabel, elementFocusable, announceLoadingDelay, }: SkeletonLoaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
50
55
|
export default SkeletonLoader;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx, Fragment } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React__default, { useRef, useState, useEffect } from "react";
|
|
3
3
|
import '../../assets/SkeletonLoader.css';const SkeletonThemeContext = React__default.createContext({});
|
|
4
4
|
const defaultEnableAnimation = true;
|
|
@@ -72,11 +72,13 @@ function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, con
|
|
|
72
72
|
}
|
|
73
73
|
return React__default.createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation }, Wrapper ? elements.map((el, i) => React__default.createElement(Wrapper, { key: i }, el)) : elements);
|
|
74
74
|
}
|
|
75
|
-
const skeletonLoader = "
|
|
76
|
-
const multiLine = "
|
|
75
|
+
const skeletonLoader = "_skeletonLoader_2xt5b_1";
|
|
76
|
+
const multiLine = "_multiLine_2xt5b_15";
|
|
77
|
+
const srOnly = "_srOnly_2xt5b_22";
|
|
77
78
|
const styles = {
|
|
78
79
|
skeletonLoader,
|
|
79
|
-
multiLine
|
|
80
|
+
multiLine,
|
|
81
|
+
srOnly
|
|
80
82
|
};
|
|
81
83
|
const SkeletonLoader = ({
|
|
82
84
|
width,
|
|
@@ -86,10 +88,19 @@ const SkeletonLoader = ({
|
|
|
86
88
|
isLoading = true,
|
|
87
89
|
children,
|
|
88
90
|
"aria-label": ariaLabel,
|
|
89
|
-
elementFocusable = false
|
|
91
|
+
elementFocusable = false,
|
|
92
|
+
announceLoadingDelay = 300
|
|
90
93
|
}) => {
|
|
91
94
|
const containerRef = useRef(null);
|
|
92
95
|
const [focusVisible, setFocusVisible] = useState(false);
|
|
96
|
+
const [announce, setAnnounce] = useState(false);
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
if (isLoading) {
|
|
99
|
+
const timer = setTimeout(() => setAnnounce(true), announceLoadingDelay);
|
|
100
|
+
return () => clearTimeout(timer);
|
|
101
|
+
}
|
|
102
|
+
setAnnounce(false);
|
|
103
|
+
}, [isLoading, announceLoadingDelay]);
|
|
93
104
|
useEffect(() => {
|
|
94
105
|
if (isLoading && elementFocusable && containerRef.current) {
|
|
95
106
|
const activeElement = document.activeElement;
|
|
@@ -127,6 +138,12 @@ const SkeletonLoader = ({
|
|
|
127
138
|
element.removeEventListener("keydown", handleKeyDown);
|
|
128
139
|
};
|
|
129
140
|
}, [elementFocusable]);
|
|
141
|
+
const getAriaLabel = () => {
|
|
142
|
+
if (ariaLabel) return ariaLabel;
|
|
143
|
+
if (circle) return "Loading image";
|
|
144
|
+
if (count > 1) return "Loading content";
|
|
145
|
+
return "Loading";
|
|
146
|
+
};
|
|
130
147
|
if (!isLoading) {
|
|
131
148
|
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
132
149
|
}
|
|
@@ -135,13 +152,10 @@ const SkeletonLoader = ({
|
|
|
135
152
|
const containerStyle = {
|
|
136
153
|
"--skeleton-width": typeof width === "number" ? `${width}px` : width
|
|
137
154
|
};
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
return "Loading";
|
|
143
|
-
};
|
|
144
|
-
return /* @__PURE__ */ jsx("div", { ref: containerRef, className: wrapperClass, style: containerStyle, role: "status", "aria-label": getAriaLabel(), tabIndex: elementFocusable ? 0 : -1, "data-skeleton-loader": "true", "data-focus-visible": elementFocusable && focusVisible ? "true" : void 0, children: /* @__PURE__ */ jsx(Skeleton, { width, height, count, circle, baseColor: "var(--skeleton-base-color)", customHighlightBackground: highlightGradient, inline: true }) });
|
|
155
|
+
return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: wrapperClass, style: containerStyle, tabIndex: elementFocusable ? 0 : -1, "data-skeleton-loader": "true", "data-focus-visible": elementFocusable && focusVisible ? "true" : void 0, children: [
|
|
156
|
+
/* @__PURE__ */ jsx(Skeleton, { width, height, count, circle, baseColor: "var(--skeleton-base-color)", customHighlightBackground: highlightGradient, inline: true }),
|
|
157
|
+
/* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: styles.srOnly, children: announce ? getAriaLabel() : "" })
|
|
158
|
+
] });
|
|
145
159
|
};
|
|
146
160
|
export {
|
|
147
161
|
SkeletonLoader,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonLoader.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SkeletonLoader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -25,6 +25,16 @@ export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children'>, P
|
|
|
25
25
|
* Function to call when the clear button is clicked
|
|
26
26
|
*/
|
|
27
27
|
clearButtonOnClick?: (e: PressEvent) => void;
|
|
28
|
+
/**
|
|
29
|
+
* Text for the clear button (for internationalization)
|
|
30
|
+
* @default 'Clear'
|
|
31
|
+
*/
|
|
32
|
+
clearButtonText?: string;
|
|
33
|
+
/**
|
|
34
|
+
* ID for the label element used with aria-labelledby
|
|
35
|
+
* @default 'taggroup-label'
|
|
36
|
+
*/
|
|
37
|
+
labelId?: string;
|
|
28
38
|
}
|
|
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;
|
|
39
|
+
export declare const TagGroup: <T extends object>({ label, description, ariaLabel, items, children, renderEmptyState, clearButton, clearButtonOnClick, clearButtonText, labelId, selectionMode, ...props }: TagGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
30
40
|
export default TagGroup;
|
|
@@ -20,16 +20,22 @@ const TagGroup = ({
|
|
|
20
20
|
renderEmptyState,
|
|
21
21
|
clearButton,
|
|
22
22
|
clearButtonOnClick,
|
|
23
|
+
clearButtonText = "Clear",
|
|
24
|
+
labelId = "taggroup-label",
|
|
23
25
|
selectionMode = "single",
|
|
24
26
|
...props
|
|
25
27
|
}) => {
|
|
26
28
|
if (!label && !ariaLabel) {
|
|
27
29
|
console.warn("⚠️ [TagGroup] Accessibility Warning: You must provide either a 'label' or 'ariaLabel' for screen reader support.");
|
|
28
30
|
}
|
|
29
|
-
return /* @__PURE__ */ jsxs(TagGroup$1, { className: styles.tagGroup, selectionMode,
|
|
31
|
+
return /* @__PURE__ */ jsxs(TagGroup$1, { className: styles.tagGroup, selectionMode, ...props, ...label ? {
|
|
32
|
+
"aria-labelledby": labelId
|
|
33
|
+
} : ariaLabel ? {
|
|
34
|
+
"aria-label": ariaLabel
|
|
35
|
+
} : {}, children: [
|
|
30
36
|
(label || clearButton) && /* @__PURE__ */ jsxs("span", { className: styles.spanContainer, children: [
|
|
31
|
-
/* @__PURE__ */ jsx(FieldLabel, { children: label }),
|
|
32
|
-
clearButton && /* @__PURE__ */ jsx(Button, { styleVariant: "accent", emphasis: "quaternary", size: "sm", onPress: clearButtonOnClick, children:
|
|
37
|
+
label && /* @__PURE__ */ jsx(FieldLabel, { id: labelId, children: label }),
|
|
38
|
+
clearButton && /* @__PURE__ */ jsx(Button, { styleVariant: "accent", emphasis: "quaternary", size: "sm", onPress: clearButtonOnClick, children: clearButtonText })
|
|
33
39
|
] }),
|
|
34
40
|
description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
|
|
35
41
|
/* @__PURE__ */ jsx(TagList, { className: styles.tagGroupList, items, renderEmptyState, children })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TagGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alto-avios/alto-ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0",
|
|
4
4
|
"description": "A react component library for Alto Design System",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Ian Caldwell IAGL",
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"release:major": "standard-version --release-as major"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
+
"@playwright/test": "^1.55.1",
|
|
40
41
|
"class-variance-authority": "^0.7.0",
|
|
41
42
|
"react-aria-carousel": "0.2.0",
|
|
42
43
|
"react-aria-components": "1.5.0",
|
|
@@ -72,7 +73,6 @@
|
|
|
72
73
|
"@vitejs/plugin-react": "^4.3.1",
|
|
73
74
|
"autoprefixer": "^10.4.19",
|
|
74
75
|
"axe-playwright": "^2.0.3",
|
|
75
|
-
"chromatic": "^11.28.2",
|
|
76
76
|
"commitizen": "^4.3.1",
|
|
77
77
|
"cssnano": "^7.0.4",
|
|
78
78
|
"eslint": "^9.14.0",
|