@alto-avios/alto-ui 4.4.1 → 4.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/Breadcrumbs.css +1 -0
- package/dist/assets/Carousel.css +1 -1
- package/dist/assets/CarouselButton.css +1 -1
- package/dist/assets/CarouselDots.css +1 -1
- package/dist/assets/Checkbox.css +1 -1
- package/dist/assets/Dialog.css +1 -1
- package/dist/assets/Link.css +1 -1
- package/dist/assets/SelectNative.css +1 -1
- package/dist/assets/SkeletonLoader.css +1 -1
- package/dist/assets/skeleton.css +1 -0
- package/dist/components/Badge/Badge.js +13 -2
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +73 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.js +132 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.js.map +1 -0
- package/dist/components/Breadcrumbs/index.d.ts +2 -0
- package/dist/components/Breadcrumbs/index.js +5 -0
- package/dist/components/Breadcrumbs/index.js.map +1 -0
- package/dist/components/CalloutBanner/CalloutBanner.d.ts +2 -1
- package/dist/components/CalloutBanner/CalloutBanner.js +5 -1
- package/dist/components/CalloutBanner/CalloutBanner.js.map +1 -1
- package/dist/components/Carousel/Carousel.js +23 -23
- package/dist/components/Carousel/CarouselButton/CarouselButton.js +11 -11
- package/dist/components/Carousel/CarouselDots/CarouselDots.js +6 -6
- package/dist/components/Checkbox/Checkbox.js +22 -18
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +11 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.js +4 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/dist/components/Dialog/Dialog.d.ts +5 -0
- package/dist/components/Dialog/Dialog.js +20 -20
- package/dist/components/Link/Link.js +6 -6
- package/dist/components/SelectNative/SelectNative.js +2 -2
- package/dist/components/SkeletonLoader/SkeletonLoader.js +2 -1
- package/dist/components/SkeletonLoader/SkeletonLoader.js.map +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/stories/DraggableContainer.d.ts +8 -0
- package/dist/utils/stories/DraggableContainer.js +134 -0
- package/dist/utils/stories/DraggableContainer.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._breadcrumbs_xrrvy_1{display:inline-block;font-family:var(--alto-sem-text-body-font-family);font-style:normal}._breadcrumbs__list_xrrvy_8{align-items:center;display:flex;gap:var(--alto-sem-space-2xs);list-style-type:none;margin:0;min-height:56px;padding:0;text-align:left}._breadcrumbs__list-item_xrrvy_20>a:focus-visible{border-radius:var(--alto-sem-radius-6xs)}._breadcrumbs__list-item_xrrvy_20>a,._breadcrumbs_xrrvy_1>span{font-weight:400}._breadcrumbs__overflow-list_xrrvy_30{align-items:stretch;display:flex;flex-direction:column;list-style:none;margin:0;outline:none;overflow:hidden;padding:0}._breadcrumbs__overflow-list_xrrvy_30 ._breadcrumbs__list-item_xrrvy_20{border-bottom:1px solid var(--alto-sem-color-border-tertiary)}._breadcrumbs__overflow-list_xrrvy_30 ._breadcrumbs__list-item_xrrvy_20:first-child{border-top-left-radius:var(--alto-tag-radius);border-top-right-radius:var(--alto-tag-radius)}._breadcrumbs__overflow-list_xrrvy_30 ._breadcrumbs__list-item_xrrvy_20:last-child{border-bottom:none;border-bottom-left-radius:var(--alto-tag-radius);border-bottom-right-radius:var(--alto-tag-radius)}._breadcrumbs__overflow-list_xrrvy_30 ._breadcrumbs__list-item_xrrvy_20 a{color:var(--alto-sem-color-fg-primary);cursor:pointer;display:block;outline:none;padding:var(--alto-sem-space-sm) var(--alto-sem-space-md);text-decoration:none}._breadcrumbs__overflow-list_xrrvy_30 ._breadcrumbs__list-item_xrrvy_20:has([data-hovered]),._breadcrumbs__overflow-list_xrrvy_30 ._breadcrumbs__list-item_xrrvy_20:hover{background-color:var(--alto-sem-color-bg-layer2-hover)}._breadcrumbs__overflow-list_xrrvy_30 ._breadcrumbs__list-item_xrrvy_20:focus,._breadcrumbs__overflow-list_xrrvy_30 ._breadcrumbs__list-item_xrrvy_20:has([data-focused]){background-color:var(--alto-sem-color-bg-layer2-active)}._breadcrumbs__overflow-list_xrrvy_30 ._breadcrumbs__list-item_xrrvy_20:has([data-active]){background-color:var(--alto-sem-color-bg-layer2-active)}@media screen and (max-width:479px){._breadcrumbs__list-item_xrrvy_20,._breadcrumbs__list-separator_xrrvy_82{display:none}._breadcrumbs__list-item_xrrvy_20[data-parent],._breadcrumbs__list-separator_xrrvy_82:has(+[data-parent]){display:block}._breadcrumbs__list-separator_xrrvy_82:has(+[data-parent]) svg{transform:rotate(180deg)}}[dir=rtl] ._breadcrumbs__list-separator_xrrvy_82{transform:rotate(180deg)}
|
package/dist/assets/Carousel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._carouselWrapper_16uhe_2{box-sizing:border-box;margin:0;max-width:100%;padding:0;position:relative;width:100%}._carouselWrapper_16uhe_2,._carouselWrapper_16uhe_2._showPartialItems_16uhe_14,._carouselWrapper_16uhe_2._showPartialItems_16uhe_14 ._carousel_16uhe_2{overflow-x:visible;overflow-y:hidden}._carouselWrapper_16uhe_2._hasScrollPadding_16uhe_25,._carouselWrapper_16uhe_2._hasScrollPadding_16uhe_25 ._carousel_16uhe_2{overflow-x:visible!important;overflow-y:hidden!important}._carousel_16uhe_2{overflow-x:visible;position:relative;width:100%}._carousel_16uhe_2,._scroller_16uhe_43{box-sizing:border-box;overflow-y:hidden}._scroller_16uhe_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_16uhe_43:focus{outline-offset:-2px;outline-width:2px}._scroller_16uhe_43::-webkit-scrollbar{display:none}._carouselWrapper_16uhe_2 [data-dragging=true] ._scroller_16uhe_43{cursor:grabbing;scroll-behavior:auto;touch-action:pan-x}._carouselWrapper_16uhe_2 ._scroller_16uhe_43:hover{cursor:grab;touch-action:pan-x}._item_16uhe_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_16uhe_2 ._carousel_16uhe_2 ._scroller_16uhe_43 ._item_16uhe_84>*{display:block;height:auto;width:100%}[data-scroll-padding=true],[data-scroll-padding=true] ._carousel_16uhe_2,[data-scroll-padding=true] ._scroller_16uhe_43{overflow-x:visible!important;overflow-y:hidden!important}[data-scroll-padding=true] ._item_16uhe_84{scroll-snap-align:start}._slideLeft_16uhe_122{animation:_slideLeftAnimation_16uhe_1 1s cubic-bezier(.25,0,.85,.1)}._slideRight_16uhe_126{animation:_slideRightAnimation_16uhe_1 1s cubic-bezier(.25,0,.85,.1)}@keyframes _slideLeftAnimation_16uhe_1{0%{transform:translate(0)}to{transform:translate(0)}}@keyframes _slideRightAnimation_16uhe_1{0%{transform:translate(0)}to{transform:translate(0)}}._controls_16uhe_149{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._defaultPrevButton_16uhe_160{left:10px}._defaultNextButton_16uhe_168,._defaultPrevButton_16uhe_160{position:absolute;top:50%;transform:translateY(-50%);z-index:5}._defaultNextButton_16uhe_168{right:10px}._defaultDotsContainer_16uhe_177{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._defaultCarouselWrapper_16uhe_188{margin:0 auto;max-width:800px;width:360px}._defaultAutoplayControl_16uhe_195{pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._showOnHover_16uhe_204 ._arrowContainer_16uhe_204{opacity:0;transition:opacity .3s ease}._carouselWrapper_16uhe_2 [data-arrows-visible=true] ._showOnHover_16uhe_204 ._arrowContainer_16uhe_204{opacity:1}._hidden_16uhe_214{opacity:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}._dotsContainerWrapper_16uhe_223{pointer-events:auto;z-index:2}._dotsContainer_16uhe_223{position:relative}@media (max-width:768px){._carouselWrapper_16uhe_2 ._dotsContainerWrapper_16uhe_223{cursor:pointer}._carouselWrapper_16uhe_2 ._dotsContainerWrapper_16uhe_223:active{opacity:.8}}._hiddenTabs_16uhe_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_16uhe_258{cursor:pointer;touch-action:manipulation}._autoplayControlWrapper_16uhe_273{align-items:center;display:flex;justify-content:center;pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._carouselDefault_16uhe_287{height:100%;overflow-x:hidden;width:361px}._carouselDefault_16uhe_287 ._prevButton_16uhe_292{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_16uhe_287 ._nextButton_16uhe_299{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_16uhe_287 ._dotsContainer_16uhe_223{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_16uhe_317{position:relative;width:100%}._carouselWithAutoPlay_16uhe_317 ._prevButton_16uhe_292{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_16uhe_317 ._nextButton_16uhe_299{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_16uhe_317 ._dotsContainer_16uhe_223{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_16uhe_317 ._autoplayControl_16uhe_273{pointer-events:auto!important;position:absolute!important;right:16px!important;top:16px!important;z-index:20!important}._carouselWithScrollPeek_16uhe_353{position:relative}._carouselWithScrollPeek_16uhe_353,._carouselWithScrollPeek_16uhe_353 ._carousel_16uhe_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithScrollPeek_16uhe_353 ._prevButton_16uhe_292{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_16uhe_353 ._nextButton_16uhe_299{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_16uhe_353 ._dotsContainer_16uhe_223{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithFractionalItems_16uhe_387{position:relative}._carouselWithFractionalItems_16uhe_387,._carouselWithFractionalItems_16uhe_387 ._carousel_16uhe_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithFractionalItems_16uhe_387 ._prevButton_16uhe_292{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_16uhe_387 ._nextButton_16uhe_299{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_16uhe_387 ._dotsContainer_16uhe_223{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._paginationDotsDefault_16uhe_421{position:relative;width:100%}._paginationDotsDefault_16uhe_421 ._prevButton_16uhe_292{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_16uhe_421 ._nextButton_16uhe_299{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_16uhe_421 ._dotsContainer_16uhe_223{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._hoverArrowsDefault_16uhe_450{height:100%;overflow-x:hidden;width:361px}._hoverArrowsDefault_16uhe_450 ._prevButton_16uhe_292{left:10px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_16uhe_450 ._nextButton_16uhe_299{opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_16uhe_450:focus-within ._nextButton_16uhe_299,._hoverArrowsDefault_16uhe_450:focus-within ._prevButton_16uhe_292,._hoverArrowsDefault_16uhe_450:hover ._nextButton_16uhe_299,._hoverArrowsDefault_16uhe_450:hover ._prevButton_16uhe_292{opacity:1}._hoverArrowsDefault_16uhe_450 ._dotsContainer_16uhe_223{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._arrowContainer_x58j2_1{background:none;border:none;box-shadow:none!important;outline:none!important;padding:0;pointer-events:auto;z-index:2}._arrowContainer_x58j2_1:focus,._arrowContainer_x58j2_1:focus-visible{box-shadow:none!important;outline:none!important}._iconButton_x58j2_19{align-items:center;display:flex;justify-content:center}._arrowContainer_x58j2_1._hideDisabledArrow_x58j2_25[aria-disabled=true]{display:none}._arrowContainer_x58j2_1._neutral_x58j2_31 ._iconButton_x58j2_19[data-focused=true],._arrowContainer_x58j2_1._neutral_x58j2_31 ._iconButton_x58j2_19[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}._arrowContainer_x58j2_1:not([aria-disabled]) ._neutral_x58j2_31 ._iconButton_x58j2_19[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active)}._arrowContainer_x58j2_1._white_x58j2_43 ._iconButton_x58j2_19{background-color:transparent;border:none;border-radius:0}._arrowContainer_x58j2_1._white_x58j2_43:not([aria-disabled]) ._iconButton_x58j2_19[data-focused=true],._arrowContainer_x58j2_1._white_x58j2_43:not([aria-disabled]) ._iconButton_x58j2_19[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-lighten-hover)}._arrowContainer_x58j2_1._white_x58j2_43:not([aria-disabled]) ._iconButton_x58j2_19[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._arrowContainer_x58j2_1._shapeFlat_x58j2_61 ._iconButton_x58j2_19{border-radius:var(--alto-sem-radius-circle)}._arrowContainer_x58j2_1._shapeFlat_x58j2_61:not([aria-disabled]) ._iconButton_x58j2_19{background-color:var(--alto-sem-color-bg-white-vibrant-default)}._arrowContainer_x58j2_1._shapeFlat_x58j2_61:not([aria-disabled]) ._iconButton_x58j2_19[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._arrowContainer_x58j2_1._shapeElevated_x58j2_74 ._iconButton_x58j2_19{border-radius:var(--alto-sem-radius-circle)}._arrowContainer_x58j2_1._shapeElevated_x58j2_74:not([aria-disabled]) ._iconButton_x58j2_19{background-color:var(--alto-sem-color-bg-white-vibrant-default);box-shadow:0 11.4px 9.12px #2f2a850d,0 2.59px 4.4px #2f2a850d,0 6.99px 18.18px #2f2a8514}._arrowContainer_x58j2_1._shapeElevated_x58j2_74:not([aria-disabled]) ._iconButton_x58j2_19[data-focused=true],._arrowContainer_x58j2_1._shapeElevated_x58j2_74:not([aria-disabled]) ._iconButton_x58j2_19[data-parent-hovered=true]{background-color:var(--alto-sem-color-bg-white-vibrant-hover)}._arrowContainer_x58j2_1._shapeElevated_x58j2_74:not([aria-disabled]) ._iconButton_x58j2_19[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._arrowContainer_x58j2_1._gradient_x58j2_98:not([aria-disabled]) ._iconButton_x58j2_19{background:linear-gradient(90deg,#fefefe 50%,#fff0);border:none;border-radius:0;height:100%}._arrowContainer_x58j2_1._gradient_x58j2_98._next_x58j2_105:not([aria-disabled]) ._iconButton_x58j2_19{background:linear-gradient(90deg,#fff0,#fefefe 50%)}._arrowContainer_x58j2_1._gradient_x58j2_98:not([aria-disabled]) ._iconButton_x58j2_19[data-focused=true],._arrowContainer_x58j2_1._gradient_x58j2_98:not([aria-disabled]) ._iconButton_x58j2_19[data-parent-hovered=true]{background:linear-gradient(90deg,#fefefe 50%,#fff0);color:var(--alto-sem-color-fg-accent-primary);outline-offset:-2px}._arrowContainer_x58j2_1._gradient_x58j2_98._next_x58j2_105:not([aria-disabled]) ._iconButton_x58j2_19[data-focused=true],._arrowContainer_x58j2_1._gradient_x58j2_98._next_x58j2_105:not([aria-disabled]) ._iconButton_x58j2_19[data-parent-hovered=true]{background:linear-gradient(90deg,#fff0,#fefefe 50%);color:var(--alto-sem-color-fg-accent-primary);outline-offset:-2px}._arrowContainer_x58j2_1._gradient_x58j2_98:not([aria-disabled]) ._iconButton_x58j2_19[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._arrowContainer_x58j2_1[aria-disabled] ._iconButton_x58j2_19{background-color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;opacity:var(--alto-sem-opacity-30)}._arrowContainer_x58j2_1._fullHeight_x58j2_139{align-items:center;bottom:0;cursor:pointer;display:flex;height:100%;top:0;transform:none}._arrowContainer_x58j2_1._fullHeight_x58j2_139._prev_x58j2_150{justify-content:flex-start;left:0}._arrowContainer_x58j2_1._fullHeight_x58j2_139._next_x58j2_105{justify-content:flex-end;right:0}._arrowContainer_x58j2_1._fullHeight_x58j2_139 ._iconButton_x58j2_19{position:relative;z-index:2}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tabsContainer_nzxrr_1{margin:0 auto;min-height:30px;width:auto}._tabsContainer_nzxrr_1,._tabs_nzxrr_1{align-items:center;display:flex;justify-content:center}._tabs_nzxrr_1{background-color:var(--alto-sem-color-bg-white-vibrant-default);border-radius:var(--alto-sem-radius-circle);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs);position:relative}._tabs_nzxrr_1._transparent_nzxrr_20{background-color:transparent}._dotsScroller_nzxrr_24{align-items:center;display:flex;flex-wrap:wrap;gap:var(--alto-sem-space-2xs);justify-content:center;position:relative;white-space:nowrap}._tab_nzxrr_1{background-color:#0000004d;border:none;border-radius:var(--alto-sem-radius-circle);cursor:pointer;display:block;flex-shrink:0;margin:0;padding:0}._tab_nzxrr_1:hover,._tab_nzxrr_1[data-hovered=true]{transform:scale(1.1)}._tab_nzxrr_1._activeTab_nzxrr_51{background-color:var(--alto-sem-color-fg-primary)}._tabs_nzxrr_1[data-focused=true] ._tab_nzxrr_1._activeTab_nzxrr_51{background-color:var(--alto-sem-color-border-accent)}._tabMd_nzxrr_60{height:8px;width:8px}._tabLg_nzxrr_65{height:12px;width:12px}._tabsContainer_nzxrr_1[data-transitioning=true] ._tab_nzxrr_1{pointer-events:none;transition:none!important}._tabsContainer_nzxrr_1[data-transitioning=true] ._dotsScroller_nzxrr_24{transition:none!important}
|
package/dist/assets/Checkbox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._checkbox_dtluy_2{align-items:flex-start;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:36px;padding-top:var(--alto-sem-space-xs);text-align:left}._checkbox_dtluy_2:only-child{min-height:24px;padding-bottom:var(--alto-sem-space-xs)}._checkboxContainer_dtluy_26{display:flex;flex-direction:column}._checkboxLabel_dtluy_31{padding-left:var(--alto-sem-space-3xs)}._checkboxDescription_dtluy_35{padding-left:42px;text-align:left}._checkboxSvgWrapper_dtluy_40{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;justify-content:center;min-height:1.5rem;min-width:1.5rem}._checkbox_dtluy_2 ._svg_dtluy_54{fill:none;min-height:1rem;min-width:1rem;stroke:var(--alto-sem-color-fg-accent-on-vibrant);stroke-dasharray:22px;stroke-dashoffset:66;stroke-width:3px;transition:all .2s}._checkbox_dtluy_2[data-hovered] ._checkboxSvgWrapper_dtluy_40{border-color:var(--alto-sem-color-border-primary-hover)}._checkbox_dtluy_2[data-pressed] ._checkboxSvgWrapper_dtluy_40{border-color:var(--alto-sem-color-border-primary-active)}._checkbox_dtluy_2[data-focus-visible] ._checkboxSvgWrapper_dtluy_40{outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._defaultFocus_dtluy_82[data-focus-visible] ._checkboxSvgWrapper_dtluy_40{outline-color:var(--alto-sem-color-border-accent)}._whiteFocus_dtluy_86[data-focus-visible] ._checkboxSvgWrapper_dtluy_40{outline-color:var(--alto-sem-color-border-white)}._checkbox_dtluy_2[data-disabled]{color:var(--alto-sem-color-fg-disabled-primary)}._checkboxSvgWrapper_dtluy_40[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle);cursor:default}._svg_dtluy_54[data-disabled]{stroke:var(--alto-sem-color-fg-disabled-on-subtle)}._checkbox_dtluy_2[data-selected] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-accent-vibrant-default);border-color:var(--alto-sem-color-bg-accent-vibrant-default)}._checkbox_dtluy_2[data-selected][data-hovered] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-accent-vibrant-hover);border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._checkbox_dtluy_2[data-selected][data-pressed] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-accent-vibrant-active);border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._checkbox_dtluy_2[data-selected] ._svg_dtluy_54{stroke-dashoffset:44}._checkbox_dtluy_2[data-indeterminate] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-accent-vibrant-default);border-color:var(--alto-sem-color-bg-accent-vibrant-default)}._checkbox_dtluy_2[data-indeterminate] ._svg_dtluy_54{fill:var(--alto-sem-color-fg-accent-on-vibrant);stroke:none}._checkbox_dtluy_2[data-invalid] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-critical-subtle-default);border-color:var(--alto-sem-color-border-critical)}._checkbox_dtluy_2[data-invalid][data-hovered] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-critical-subtle-hover)}._checkbox_dtluy_2[data-invalid][data-pressed] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-tertiary-active)}._checkbox_dtluy_2[data-invalid][data-indeterminate] ._checkboxSvgWrapper_dtluy_40,._checkbox_dtluy_2[data-invalid][data-selected] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-critical-vibrant-default);border-color:var(--alto-sem-color-bg-critical-vibrant-hover)}._checkbox_dtluy_2[data-invalid][data-indeterminate][data-hovered] ._checkboxSvgWrapper_dtluy_40,._checkbox_dtluy_2[data-invalid][data-selected][data-hovered] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-critical-vibrant-hover)}._checkbox_dtluy_2[data-invalid][data-indeterminate][data-pressed] ._checkboxSvgWrapper_dtluy_40,._checkbox_dtluy_2[data-invalid][data-selected][data-pressed] ._checkboxSvgWrapper_dtluy_40{background:var(--alto-sem-color-bg-critical-subtle-active);border-color:var(--alto-sem-color-bg-critical-vibrant-active)}._checkbox_dtluy_2[data-disabled] ._checkboxSvgWrapper_dtluy_40{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._checkbox_dtluy_2[data-disabled] ._svg_dtluy_54{stroke:var(--alto-sem-color-fg-disabled-on-subtle)}._checkbox_dtluy_2[data-indeterminate] ._svg_dtluy_54{stroke:var(--alto-sem-color-fg-disabled-onSubtle)}._checkboxLabelWrapper_dtluy_180{display:flex;flex-direction:column;justify-content:center}
|
package/dist/assets/Dialog.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._dialogWrapper_1i48s_1{align-items:center;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;position:fixed;z-index:99}._overlay_1i48s_10{background-color:var(--alto-sem-color-overlay-scrim);top:0;right:0;bottom:0;left:0;position:fixed}._dialog_1i48s_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_1i48s_1._noPadding_1i48s_30{padding:0}@media (min-width:640px){._dialog_1i48s_1{margin:var(--alto-sem-space-xl);padding:var(--alto-sem-space-xl);width:calc(100% - var(--alto-sem-space-xl)*2)}._dialog_1i48s_1._noPadding_1i48s_30{padding:0}}@media (min-width:1024px){._dialog_1i48s_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_1i48s_1._noPadding_1i48s_30{padding:0}}._dialogContent_1i48s_59{display:flex;flex-direction:column;gap:var(--alto-sem-space-md);position:relative}._dialogHeading_1i48s_66{margin:0}._dialogContentInner_1i48s_70{display:flex;flex-direction:column;gap:var(--alto-sem-space-md)}._noHeader_1i48s_76 ._dialogContentInner_1i48s_70{padding-top:0}._closeButton_1i48s_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_1i48s_80:focus,._closeButton_1i48s_80:hover{background-color:var(--alto-sem-color-bg-hover)}._closeButton_1i48s_80:focus{outline-color:var(--alto-sem-color-focus-ring)}._dialogSmall_1i48s_106{max-width:25.625rem}._dialogMedium_1i48s_110{max-width:39.25rem}._dialogLarge_1i48s_114{max-width:52.875rem}
|
package/dist/assets/Link.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._link_pwc7n_1{align-items:center;display:inline-flex;font-family:var(--alto-sem-text-body-font-family);font-style:normal;font-weight:var(--alto-sem-text-body-bold-font-weight);gap:var(--alto-sem-space-4xs);text-decoration:none}._xs_pwc7n_11{font-size:var(--alto-sem-text-body-xs-font-size);letter-spacing:var(--alto-sem-text-body-xs-letter-spacing);line-height:var(--alto-sem-text-body-xs-line-height)}._sm_pwc7n_17{font-size:var(--alto-sem-text-body-sm-font-size);letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height)}._md_pwc7n_23{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)}._lg_pwc7n_29{font-size:var(--alto-sem-text-body-lg-font-size);letter-spacing:var(--alto-sem-text-body-lg-letter-spacing);line-height:var(--alto-sem-text-body-lg-line-height)}._link_pwc7n_1[data-focused],._link_pwc7n_1[data-hovered]{text-decoration:underline}._link_pwc7n_1:focus-visible{border-radius:var(--alto-sem-radius-6xs)}._link_pwc7n_1[data-pressed]{text-decoration:none}._link_pwc7n_1[data-disabled]{color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;pointer-events:none;text-decoration-line:none}._underline_pwc7n_55{text-decoration:underline}._underline_pwc7n_55[data-focused],._underline_pwc7n_55[data-hovered]{text-decoration:none}._underline_pwc7n_55[data-pressed]{text-decoration:underline}._underline_pwc7n_55[data-disabled]{text-decoration-line:underline}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._select_1b9f5_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%}._selectInput_1b9f5_10{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--alto-sem-color-bg-base);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' fill='none' viewBox='0 0 18 20'%3E%3Cpath fill='%234b4855' d='M9.586 19.492c-.352.274-.86.274-1.172 0l-6.25-5c-.43-.312-.469-.898-.156-1.328.312-.39.898-.469 1.328-.117L9 17.578l5.664-4.531a.89.89 0 0 1 1.29.117c.312.43.273 1.016-.157 1.328l-6.25 5zm6.25-13.945c.39.312.469.898.117 1.289-.312.43-.898.469-1.289.156L9 2.461 3.336 6.992c-.43.313-1.016.274-1.328-.156-.313-.39-.274-.977.156-1.29l6.25-5c.313-.273.82-.273 1.172 0z'/%3E%3C/svg%3E");background-position:right var(--alto-sem-space-sm) center;background-repeat:no-repeat;border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-input-radius);color:var(--alto-sem-color-fg-primary);cursor:pointer;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm)}._selectInput_1b9f5_10 option[value=""][disabled]{color:var(--alto-sem-color-fg-secondary)}._selectInput_1b9f5_10:-moz-placeholder{color:var(--alto-sem-color-fg-secondary)}._selectInput_1b9f5_10:placeholder-shown{color:var(--alto-sem-color-fg-secondary)}._select_1b9f5_1[data-disabled] ._selectInput_1b9f5_10{background-color: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);cursor:not-allowed}._select_1b9f5_1[data-invalid] ._selectInput_1b9f5_10{border:2px solid var(--alto-sem-color-border-critical)}._selectInput_1b9f5_10:focus-visible{outline:none}._selectInput_1b9f5_10[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)}._selectInput_1b9f5_10:hover{border:1px solid var(--alto-sem-color-border-primary-hover)}._selectInput_1b9f5_10:active{border:1px solid var(--alto-sem-color-border-primary-active)}@-moz-document url-prefix(){._selectInput_1b9f5_10{padding-right:var(--alto-sem-space-xl);text-indent:0;text-overflow:""}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
._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}
|
|
@@ -0,0 +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}}
|
|
@@ -62,15 +62,26 @@ const Badge = ({
|
|
|
62
62
|
className,
|
|
63
63
|
...props
|
|
64
64
|
}) => {
|
|
65
|
+
const defaultIconProps = {
|
|
66
|
+
iconSize: size === "md" ? "0.75x" : "0.5x",
|
|
67
|
+
iconPrefix: "fas",
|
|
68
|
+
padding: "square"
|
|
69
|
+
};
|
|
65
70
|
return /* @__PURE__ */ jsxs("span", { className: `${badge({
|
|
66
71
|
size,
|
|
67
72
|
styleVariant
|
|
68
73
|
})} ${focusStyleVariants({
|
|
69
74
|
focusStyle
|
|
70
75
|
})} ${className || ""}`, role: "status", "aria-label": ariaLabel, ...props, children: [
|
|
71
|
-
iconStartProps && /* @__PURE__ */ jsx(Icon, { ...
|
|
76
|
+
iconStartProps && /* @__PURE__ */ jsx(Icon, { ...{
|
|
77
|
+
...defaultIconProps,
|
|
78
|
+
...iconStartProps
|
|
79
|
+
} }),
|
|
72
80
|
children,
|
|
73
|
-
iconEndProps && /* @__PURE__ */ jsx(Icon, { ...
|
|
81
|
+
iconEndProps && /* @__PURE__ */ jsx(Icon, { ...{
|
|
82
|
+
...defaultIconProps,
|
|
83
|
+
...iconEndProps
|
|
84
|
+
} })
|
|
74
85
|
] });
|
|
75
86
|
};
|
|
76
87
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { AriaBreadcrumbsProps } from '@react-aria/breadcrumbs';
|
|
3
|
+
import { LinkProps } from '../Link';
|
|
4
|
+
import { IconProps } from '../Icon';
|
|
5
|
+
import { ButtonProps } from '../Button';
|
|
6
|
+
export type BreadcrumbItemProps<T = LinkProps> = T & Pick<LinkProps, 'children' | 'foregroundColor'> & {
|
|
7
|
+
/**
|
|
8
|
+
* The React component to be rendered as the breadcrumb item. For use with external library components like Next.JS Link.
|
|
9
|
+
* @default Link
|
|
10
|
+
*/
|
|
11
|
+
as?: React.ElementType;
|
|
12
|
+
/**
|
|
13
|
+
* Whether the breadcrumb item is the link for the current page
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
isCurrent?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Data attribute used to show parent link in CSS on mobile
|
|
19
|
+
* @private
|
|
20
|
+
*/
|
|
21
|
+
'data-parent'?: boolean;
|
|
22
|
+
};
|
|
23
|
+
export declare function BreadcrumbItem<T = LinkProps>({ as, isCurrent, foregroundColor, 'data-parent': dataParent, children, ...props }: BreadcrumbItemProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export interface BreadcrumbsProps extends AriaBreadcrumbsProps {
|
|
25
|
+
/**
|
|
26
|
+
* The React component to be rendered as the breadcrumb item. For use with external library components like Next.JS Link.
|
|
27
|
+
* @default Link
|
|
28
|
+
*/
|
|
29
|
+
as?: React.ElementType;
|
|
30
|
+
/**
|
|
31
|
+
* Breadcrumb items rendered in the list.
|
|
32
|
+
*/
|
|
33
|
+
children?: React.ReactNode;
|
|
34
|
+
/**
|
|
35
|
+
* Colour of the breadcrumb item links.
|
|
36
|
+
* @default 'primary'
|
|
37
|
+
*/
|
|
38
|
+
itemForegroundColor?: LinkProps['foregroundColor'];
|
|
39
|
+
/**
|
|
40
|
+
* Colour of the separator chevron icons.
|
|
41
|
+
*/
|
|
42
|
+
separatorForegroundColor?: IconProps['color'];
|
|
43
|
+
/**
|
|
44
|
+
* Style variant of the overflow menu trigger iconButton.
|
|
45
|
+
* @default 'neutral'
|
|
46
|
+
*/
|
|
47
|
+
buttonStyleVariant?: ButtonProps['styleVariant'];
|
|
48
|
+
/**
|
|
49
|
+
* The amount of items shown before the overflow menu is shown.
|
|
50
|
+
* @default 4
|
|
51
|
+
*/
|
|
52
|
+
maxItems?: number;
|
|
53
|
+
/**
|
|
54
|
+
* Accessible label for the breadcrumb nav element.
|
|
55
|
+
* @default 'Breadcrumbs'
|
|
56
|
+
*/
|
|
57
|
+
'aria-label'?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Hide any breadcrumb items with `isCurrent` set to `true`
|
|
60
|
+
* @default true
|
|
61
|
+
*/
|
|
62
|
+
hasCurrentItem?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Disable automatic showing and hiding of the overflow menu. Can be used if the parent element width isn't properly calculated by the browser.
|
|
65
|
+
* @default false
|
|
66
|
+
*/
|
|
67
|
+
disableAutomaticOverflow?: boolean;
|
|
68
|
+
}
|
|
69
|
+
interface BreadcrumbsComponent extends React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>> {
|
|
70
|
+
Item: typeof BreadcrumbItem;
|
|
71
|
+
}
|
|
72
|
+
export declare const Breadcrumbs: BreadcrumbsComponent;
|
|
73
|
+
export default Breadcrumbs;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React__default, { forwardRef, Children, useState, useLayoutEffect } from "react";
|
|
3
|
+
import { useBreadcrumbs } from "@react-aria/breadcrumbs";
|
|
4
|
+
import { useObjectRef, mergeProps } from "@react-aria/utils";
|
|
5
|
+
import Link from "../Link/Link.js";
|
|
6
|
+
import { Icon } from "../Icon/Icon.js";
|
|
7
|
+
import { Menu } from "../Menu/Menu.js";
|
|
8
|
+
import { IconButton } from "../IconButton/IconButton.js";
|
|
9
|
+
import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
|
|
10
|
+
import '../../assets/Breadcrumbs.css';const breadcrumbs = "_breadcrumbs_xrrvy_1";
|
|
11
|
+
const breadcrumbs__list = "_breadcrumbs__list_xrrvy_8";
|
|
12
|
+
const styles = {
|
|
13
|
+
breadcrumbs,
|
|
14
|
+
breadcrumbs__list,
|
|
15
|
+
"breadcrumbs__list-item": "_breadcrumbs__list-item_xrrvy_20",
|
|
16
|
+
"breadcrumbs__overflow-list": "_breadcrumbs__overflow-list_xrrvy_30",
|
|
17
|
+
"breadcrumbs__list-separator": "_breadcrumbs__list-separator_xrrvy_82"
|
|
18
|
+
};
|
|
19
|
+
function BreadcrumbItem({
|
|
20
|
+
as = Link,
|
|
21
|
+
isCurrent = false,
|
|
22
|
+
foregroundColor = "default",
|
|
23
|
+
"data-parent": dataParent,
|
|
24
|
+
children,
|
|
25
|
+
...props
|
|
26
|
+
}) {
|
|
27
|
+
const className = foregroundColorVariants({
|
|
28
|
+
foregroundColor
|
|
29
|
+
});
|
|
30
|
+
const itemProps = mergeProps(props, {
|
|
31
|
+
className
|
|
32
|
+
});
|
|
33
|
+
const itemElement = React__default.createElement(as, itemProps, children);
|
|
34
|
+
return /* @__PURE__ */ jsx("li", { className: styles["breadcrumbs__list-item"], "data-parent": dataParent, children: isCurrent ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className, children }) : itemElement });
|
|
35
|
+
}
|
|
36
|
+
const SeparatorItem = ({
|
|
37
|
+
color
|
|
38
|
+
}) => {
|
|
39
|
+
return /* @__PURE__ */ jsx("li", { className: styles["breadcrumbs__list-separator"], "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { iconName: "chevron-right", iconSize: "0.75x", size: "sm", color }) });
|
|
40
|
+
};
|
|
41
|
+
const OverflowMenu = ({
|
|
42
|
+
children,
|
|
43
|
+
buttonStyleVariant = "neutral",
|
|
44
|
+
...props
|
|
45
|
+
}) => {
|
|
46
|
+
return /* @__PURE__ */ jsx("li", { className: styles["breadcrumbs__list-item"], children: /* @__PURE__ */ jsxs(Menu, { shouldFlip: true, "aria-label": `${props["aria-label"]} menu`, children: [
|
|
47
|
+
/* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(IconButton, { emphasis: "quaternary", iconProps: {
|
|
48
|
+
iconName: "ellipsis"
|
|
49
|
+
}, "aria-label": `${props["aria-label"]} menu button`, size: "sm", styleVariant: buttonStyleVariant }) }),
|
|
50
|
+
/* @__PURE__ */ jsx("ol", { className: styles["breadcrumbs__overflow-list"], children })
|
|
51
|
+
] }) });
|
|
52
|
+
};
|
|
53
|
+
const CURRENT_ITEM_WHITE_FOREGROUND_COLORS = ["accentOnVibrant", "accentOnVibrantAccent", "accentOnDeep", "criticalOnVibrant", "warningOnVibrant", "successOnVibrant", "informationOnVibrant", "inversePrimary", "inverseOnVibrant", "whitePrimary", "whiteOnSubtle", "disabledOnVibrant", "saleOnVibrant"];
|
|
54
|
+
const getDefaultCurrentItemColour = (foregroundColor) => CURRENT_ITEM_WHITE_FOREGROUND_COLORS.includes(foregroundColor) ? "whitePrimary" : "secondary";
|
|
55
|
+
const Breadcrumbs = forwardRef((props, forwardedRef) => {
|
|
56
|
+
const {
|
|
57
|
+
navProps
|
|
58
|
+
} = useBreadcrumbs(props);
|
|
59
|
+
const {
|
|
60
|
+
as = Link,
|
|
61
|
+
children,
|
|
62
|
+
maxItems = 4,
|
|
63
|
+
itemForegroundColor = "primary",
|
|
64
|
+
separatorForegroundColor = itemForegroundColor,
|
|
65
|
+
buttonStyleVariant = "neutral",
|
|
66
|
+
hasCurrentItem = true,
|
|
67
|
+
disableAutomaticOverflow = false
|
|
68
|
+
} = props;
|
|
69
|
+
const ariaLabel = (props == null ? void 0 : props["aria-label"]) || "Breadcrumb";
|
|
70
|
+
const navRef = useObjectRef(forwardedRef);
|
|
71
|
+
const itemsArray = Children.toArray(children);
|
|
72
|
+
let items = itemsArray.map((child, index) => {
|
|
73
|
+
var _a, _b, _c;
|
|
74
|
+
const item = child;
|
|
75
|
+
const itemColor = ((_a = item.props) == null ? void 0 : _a.isCurrent) ? getDefaultCurrentItemColour(itemForegroundColor) : itemForegroundColor;
|
|
76
|
+
const iconEndProps = ((_b = item.props) == null ? void 0 : _b.iconEndProps) || false;
|
|
77
|
+
return React__default.cloneElement(item, {
|
|
78
|
+
as,
|
|
79
|
+
"data-parent": index === itemsArray.length - 2 || void 0,
|
|
80
|
+
iconEndProps: as === Link ? iconEndProps : void 0,
|
|
81
|
+
foregroundColor: ((_c = item.props) == null ? void 0 : _c.foregroundColor) || itemColor,
|
|
82
|
+
...item.props
|
|
83
|
+
});
|
|
84
|
+
});
|
|
85
|
+
if (!hasCurrentItem) {
|
|
86
|
+
items = items.filter((item) => {
|
|
87
|
+
var _a;
|
|
88
|
+
return !((_a = item == null ? void 0 : item.props) == null ? void 0 : _a.isCurrent);
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
const itemCount = items.length;
|
|
92
|
+
const shouldOverflowMaxItems = itemCount > maxItems;
|
|
93
|
+
const [hasOverflow, setHasOverflow] = useState(false);
|
|
94
|
+
const [breadcrumbsWidth, setBreadcrumbsWidth] = useState(-1);
|
|
95
|
+
const shouldOverflowAutomatically = !disableAutomaticOverflow && breadcrumbsWidth > 0 && hasOverflow;
|
|
96
|
+
const checkForOverflow = (element) => {
|
|
97
|
+
if (!navRef.current) return;
|
|
98
|
+
const parentWidth = element.contentRect.width;
|
|
99
|
+
setHasOverflow(parentWidth <= breadcrumbsWidth);
|
|
100
|
+
};
|
|
101
|
+
useLayoutEffect(() => {
|
|
102
|
+
if (!navRef.current || disableAutomaticOverflow) return;
|
|
103
|
+
setBreadcrumbsWidth(navRef.current.clientWidth);
|
|
104
|
+
}, [navRef.current]);
|
|
105
|
+
useLayoutEffect(() => {
|
|
106
|
+
if (!navRef.current || disableAutomaticOverflow) return;
|
|
107
|
+
const observer = new ResizeObserver((entries) => {
|
|
108
|
+
entries.forEach((entry) => {
|
|
109
|
+
checkForOverflow(entry);
|
|
110
|
+
});
|
|
111
|
+
});
|
|
112
|
+
const parent = navRef.current.parentNode;
|
|
113
|
+
observer.observe(parent);
|
|
114
|
+
return () => {
|
|
115
|
+
observer.disconnect();
|
|
116
|
+
};
|
|
117
|
+
}, [navRef.current]);
|
|
118
|
+
const shouldOverflow = itemCount > 2 && (shouldOverflowMaxItems || shouldOverflowAutomatically);
|
|
119
|
+
const visibleItems = shouldOverflow ? [/* @__PURE__ */ jsx(OverflowMenu, { buttonStyleVariant, "aria-label": ariaLabel, children: items.slice(0, -2) }, "overflow"), items[itemCount - 2], items[itemCount - 1]] : items;
|
|
120
|
+
const breadcrumbItems = visibleItems.flatMap((child, index) => {
|
|
121
|
+
return index === visibleItems.length - 1 ? child : [child, /* @__PURE__ */ jsx(SeparatorItem, { color: separatorForegroundColor }, `separator-${index}`)];
|
|
122
|
+
});
|
|
123
|
+
return /* @__PURE__ */ jsx("nav", { ...navProps, className: styles.breadcrumbs, "aria-label": ariaLabel, ref: navRef, children: /* @__PURE__ */ jsx("ol", { className: styles["breadcrumbs__list"], children: breadcrumbItems }) });
|
|
124
|
+
});
|
|
125
|
+
Breadcrumbs.displayName = "Breadcrumbs";
|
|
126
|
+
Breadcrumbs.Item = BreadcrumbItem;
|
|
127
|
+
export {
|
|
128
|
+
BreadcrumbItem,
|
|
129
|
+
Breadcrumbs,
|
|
130
|
+
Breadcrumbs as default
|
|
131
|
+
};
|
|
132
|
+
//# sourceMappingURL=Breadcrumbs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -9,8 +9,9 @@ export interface CalloutBannerBaseProps {
|
|
|
9
9
|
title: string;
|
|
10
10
|
/**
|
|
11
11
|
* Optional secondary text providing more details
|
|
12
|
+
* Can be a string or React node
|
|
12
13
|
*/
|
|
13
|
-
description?: string;
|
|
14
|
+
description?: string | React.ReactNode;
|
|
14
15
|
/**
|
|
15
16
|
* Optional emphasis style for the banner
|
|
16
17
|
* @default 'primary'
|
|
@@ -105,6 +105,10 @@ const CalloutBanner = ({
|
|
|
105
105
|
const descriptionId = React__default.useId();
|
|
106
106
|
const resolvedSeverityLabel = severityLabel ?? defaultSeverityLabel;
|
|
107
107
|
const resolvedRole = role || bannerRole;
|
|
108
|
+
const renderDescriptionContent = () => {
|
|
109
|
+
if (!description) return null;
|
|
110
|
+
return description;
|
|
111
|
+
};
|
|
108
112
|
return /* @__PURE__ */ jsxs("div", { className: calloutBanner({
|
|
109
113
|
emphasis,
|
|
110
114
|
styleVariant
|
|
@@ -129,7 +133,7 @@ const CalloutBanner = ({
|
|
|
129
133
|
] }),
|
|
130
134
|
/* @__PURE__ */ jsx("bdi", { dir: "auto", children: title })
|
|
131
135
|
] }),
|
|
132
|
-
description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: styles["calloutBanner__meta-description"], children:
|
|
136
|
+
description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: styles["calloutBanner__meta-description"], children: renderDescriptionContent() })
|
|
133
137
|
] }) }),
|
|
134
138
|
label && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-label"], children: label })
|
|
135
139
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalloutBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CalloutBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
12
|
+
import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_16uhe_2";
|
|
13
|
+
const showPartialItems = "_showPartialItems_16uhe_14";
|
|
14
|
+
const carousel$1 = "_carousel_16uhe_2";
|
|
15
|
+
const hasScrollPadding = "_hasScrollPadding_16uhe_25";
|
|
16
|
+
const scroller = "_scroller_16uhe_43";
|
|
17
|
+
const item = "_item_16uhe_84";
|
|
18
|
+
const slideLeft = "_slideLeft_16uhe_122";
|
|
19
|
+
const slideRight = "_slideRight_16uhe_126";
|
|
20
|
+
const controls = "_controls_16uhe_149";
|
|
21
|
+
const defaultPrevButton = "_defaultPrevButton_16uhe_160";
|
|
22
|
+
const defaultNextButton = "_defaultNextButton_16uhe_168";
|
|
23
|
+
const defaultDotsContainer = "_defaultDotsContainer_16uhe_177";
|
|
24
|
+
const defaultCarouselWrapper = "_defaultCarouselWrapper_16uhe_188";
|
|
25
|
+
const defaultAutoplayControl = "_defaultAutoplayControl_16uhe_195";
|
|
26
|
+
const showOnHover = "_showOnHover_16uhe_204";
|
|
27
|
+
const hidden = "_hidden_16uhe_214";
|
|
28
|
+
const hiddenTabs = "_hiddenTabs_16uhe_245";
|
|
29
|
+
const infinite = "_infinite_16uhe_264";
|
|
30
|
+
const native = "_native_16uhe_269";
|
|
31
|
+
const autoplayControlWrapper = "_autoplayControlWrapper_16uhe_273";
|
|
32
32
|
const styles = {
|
|
33
33
|
carouselWrapper,
|
|
34
34
|
showPartialItems,
|
|
@@ -43,13 +43,13 @@ const styles = {
|
|
|
43
43
|
defaultNextButton,
|
|
44
44
|
defaultDotsContainer,
|
|
45
45
|
defaultCarouselWrapper,
|
|
46
|
-
autoplayControlWrapper,
|
|
47
46
|
defaultAutoplayControl,
|
|
48
47
|
showOnHover,
|
|
49
48
|
hidden,
|
|
50
49
|
hiddenTabs,
|
|
51
50
|
infinite,
|
|
52
|
-
native
|
|
51
|
+
native,
|
|
52
|
+
autoplayControlWrapper
|
|
53
53
|
};
|
|
54
54
|
const carousel = cva(styles.carousel, {
|
|
55
55
|
variants: {
|
|
@@ -357,7 +357,7 @@ const Carousel = ({
|
|
|
357
357
|
focusStyle
|
|
358
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) => {
|
|
359
359
|
const isActiveItem = activeItemIndices.includes(index);
|
|
360
|
-
const itemClasses = [
|
|
360
|
+
const itemClasses = [itemWrapperClassName || "", styles.item, isActiveItem && activeItemClassName ? activeItemClassName : ""].filter(Boolean).join(" ");
|
|
361
361
|
return /* @__PURE__ */ jsx(CarouselItem, { className: itemClasses, "data-is-active": isActiveItem ? "true" : void 0, "data-item-index": index, "aria-label": `Slide ${index + 1} of ${totalItems}`, children: child }, index);
|
|
362
362
|
}) }),
|
|
363
363
|
/* @__PURE__ */ jsxs("div", { className: `${styles.controls} ${showArrowsOnHover ? styles.showOnHover : ""}`, children: [
|
|
@@ -4,17 +4,17 @@ import { e as CarouselButton$1, i as iconButtonStyles } from "../../../IconButto
|
|
|
4
4
|
import { useFocusRing } from "@react-aria/focus";
|
|
5
5
|
import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
|
|
6
6
|
import { Icon } from "../../Icon/Icon.js";
|
|
7
|
-
import '../../../assets/CarouselButton.css';const arrowContainer = "
|
|
8
|
-
const iconButton = "
|
|
9
|
-
const hideDisabledArrow = "
|
|
10
|
-
const neutral = "
|
|
11
|
-
const white = "
|
|
12
|
-
const shapeFlat = "
|
|
13
|
-
const shapeElevated = "
|
|
14
|
-
const gradient = "
|
|
15
|
-
const next = "
|
|
16
|
-
const fullHeight = "
|
|
17
|
-
const prev = "
|
|
7
|
+
import '../../../assets/CarouselButton.css';const arrowContainer = "_arrowContainer_x58j2_1";
|
|
8
|
+
const iconButton = "_iconButton_x58j2_19";
|
|
9
|
+
const hideDisabledArrow = "_hideDisabledArrow_x58j2_25";
|
|
10
|
+
const neutral = "_neutral_x58j2_31";
|
|
11
|
+
const white = "_white_x58j2_43";
|
|
12
|
+
const shapeFlat = "_shapeFlat_x58j2_61";
|
|
13
|
+
const shapeElevated = "_shapeElevated_x58j2_74";
|
|
14
|
+
const gradient = "_gradient_x58j2_98";
|
|
15
|
+
const next = "_next_x58j2_105";
|
|
16
|
+
const fullHeight = "_fullHeight_x58j2_139";
|
|
17
|
+
const prev = "_prev_x58j2_150";
|
|
18
18
|
const styles = {
|
|
19
19
|
arrowContainer,
|
|
20
20
|
iconButton,
|
|
@@ -3,12 +3,12 @@ import { useRef } from "react";
|
|
|
3
3
|
import { useFocusRing } from "@react-aria/focus";
|
|
4
4
|
import { useHover } from "@react-aria/interactions";
|
|
5
5
|
import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
|
|
6
|
-
import '../../../assets/CarouselDots.css';const tabsContainer = "
|
|
7
|
-
const tabs = "
|
|
8
|
-
const transparent = "
|
|
9
|
-
const dotsScroller = "
|
|
10
|
-
const tab = "
|
|
11
|
-
const activeTab = "
|
|
6
|
+
import '../../../assets/CarouselDots.css';const tabsContainer = "_tabsContainer_nzxrr_1";
|
|
7
|
+
const tabs = "_tabs_nzxrr_1";
|
|
8
|
+
const transparent = "_transparent_nzxrr_20";
|
|
9
|
+
const dotsScroller = "_dotsScroller_nzxrr_24";
|
|
10
|
+
const tab = "_tab_nzxrr_1";
|
|
11
|
+
const activeTab = "_activeTab_nzxrr_51";
|
|
12
12
|
const styles = {
|
|
13
13
|
tabsContainer,
|
|
14
14
|
tabs,
|
|
@@ -4,14 +4,15 @@ import { Checkbox as Checkbox$1 } from "react-aria-components";
|
|
|
4
4
|
import { c as cva } from "../../index-DdUYounA.js";
|
|
5
5
|
import FieldDescription from "../FieldDescription/FieldDescription.js";
|
|
6
6
|
import { FieldError } from "../FieldError/FieldError.js";
|
|
7
|
-
import '../../assets/Checkbox.css';const checkbox$1 = "
|
|
8
|
-
const checkboxContainer = "
|
|
9
|
-
const checkboxLabel = "
|
|
10
|
-
const checkboxDescription = "
|
|
11
|
-
const checkboxSvgWrapper = "
|
|
12
|
-
const svg = "
|
|
13
|
-
const defaultFocus = "
|
|
14
|
-
const whiteFocus = "
|
|
7
|
+
import '../../assets/Checkbox.css';const checkbox$1 = "_checkbox_dtluy_2";
|
|
8
|
+
const checkboxContainer = "_checkboxContainer_dtluy_26";
|
|
9
|
+
const checkboxLabel = "_checkboxLabel_dtluy_31";
|
|
10
|
+
const checkboxDescription = "_checkboxDescription_dtluy_35";
|
|
11
|
+
const checkboxSvgWrapper = "_checkboxSvgWrapper_dtluy_40";
|
|
12
|
+
const svg = "_svg_dtluy_54";
|
|
13
|
+
const defaultFocus = "_defaultFocus_dtluy_82";
|
|
14
|
+
const whiteFocus = "_whiteFocus_dtluy_86";
|
|
15
|
+
const checkboxLabelWrapper = "_checkboxLabelWrapper_dtluy_180";
|
|
15
16
|
const styles = {
|
|
16
17
|
checkbox: checkbox$1,
|
|
17
18
|
checkboxContainer,
|
|
@@ -20,7 +21,8 @@ const styles = {
|
|
|
20
21
|
checkboxSvgWrapper,
|
|
21
22
|
svg,
|
|
22
23
|
defaultFocus,
|
|
23
|
-
whiteFocus
|
|
24
|
+
whiteFocus,
|
|
25
|
+
checkboxLabelWrapper
|
|
24
26
|
};
|
|
25
27
|
const DEFAULT_VALIDATION_RESULT = {
|
|
26
28
|
isInvalid: true,
|
|
@@ -75,15 +77,17 @@ const Checkbox = ({
|
|
|
75
77
|
const labelContent = label || children;
|
|
76
78
|
return /* @__PURE__ */ jsxs("div", { className: styles.checkboxContainer, children: [
|
|
77
79
|
isInvalid && resolvedErrorMessage && /* @__PURE__ */ jsx(FieldError, { id: errorId, errorPrefix, isInvalid, children: resolvedErrorMessage }),
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
isIndeterminate:
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
80
|
+
/* @__PURE__ */ jsxs("div", { className: styles.checkboxLabelWrapper, children: [
|
|
81
|
+
/* @__PURE__ */ jsx(Checkbox$1, { className: checkbox({
|
|
82
|
+
focusStyle
|
|
83
|
+
}), isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, "aria-describedby": describedById || void 0, ...props, children: ({
|
|
84
|
+
isIndeterminate: isIndeterminate2
|
|
85
|
+
}) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
86
|
+
/* @__PURE__ */ jsx("div", { className: `${styles.checkboxSvgWrapper}`, "data-disabled": isDisabled, children: /* @__PURE__ */ jsx("svg", { className: styles.svg, viewBox: "0 0 18 18", "aria-hidden": "true", children: isIndeterminate2 ? /* @__PURE__ */ jsx("rect", { x: 1, y: 7.5, width: 15, height: 3 }) : /* @__PURE__ */ jsx("polyline", { points: "1 9 7 14 15 4" }) }) }),
|
|
87
|
+
labelContent ? /* @__PURE__ */ jsx("span", { className: styles.checkboxLabel, children: labelContent }) : null
|
|
88
|
+
] }) }),
|
|
89
|
+
description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, className: styles.checkboxDescription, children: description })
|
|
90
|
+
] })
|
|
87
91
|
] });
|
|
88
92
|
};
|
|
89
93
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -17,6 +17,16 @@ export interface CheckboxGroupProps extends AriaCheckboxGroupProps {
|
|
|
17
17
|
* The error message to display when the input value is invalid.
|
|
18
18
|
*/
|
|
19
19
|
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
20
|
+
/**
|
|
21
|
+
* Prefix text for screen readers only in error messages
|
|
22
|
+
* @default 'Error:'
|
|
23
|
+
*/
|
|
24
|
+
errorPrefix?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Whether to show the error message. Defaults to true.
|
|
27
|
+
* @default true
|
|
28
|
+
*/
|
|
29
|
+
showError?: boolean;
|
|
20
30
|
/**
|
|
21
31
|
* Whether the input is disabled.
|
|
22
32
|
*/
|
|
@@ -26,5 +36,5 @@ export interface CheckboxGroupProps extends AriaCheckboxGroupProps {
|
|
|
26
36
|
*/
|
|
27
37
|
isInvalid?: boolean;
|
|
28
38
|
}
|
|
29
|
-
export declare const CheckboxGroup: ({ label, children, description, errorMessage, isDisabled, isInvalid, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
export declare const CheckboxGroup: ({ label, children, description, errorMessage, isDisabled, isInvalid, showError, errorPrefix, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
40
|
export default CheckboxGroup;
|
|
@@ -12,10 +12,13 @@ const CheckboxGroup = ({
|
|
|
12
12
|
errorMessage,
|
|
13
13
|
isDisabled,
|
|
14
14
|
isInvalid,
|
|
15
|
+
showError = true,
|
|
16
|
+
// Default to true
|
|
17
|
+
errorPrefix = "Error:",
|
|
15
18
|
...props
|
|
16
19
|
}) => {
|
|
17
20
|
return /* @__PURE__ */ jsxs(CheckboxGroup$1, { className: styles.checkboxGroup, isDisabled, isInvalid, ...props, children: [
|
|
18
|
-
/* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired: true, isInvalid }),
|
|
21
|
+
/* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired: true, isInvalid, showError, errorPrefix }),
|
|
19
22
|
children
|
|
20
23
|
] });
|
|
21
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -49,6 +49,11 @@ export interface DialogProps extends AriaDialogProps {
|
|
|
49
49
|
* @default false
|
|
50
50
|
*/
|
|
51
51
|
removePadding?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Custom z-index for the dialog wrapper
|
|
54
|
+
* @default 99 (from CSS)
|
|
55
|
+
*/
|
|
56
|
+
zIndex?: number;
|
|
52
57
|
}
|
|
53
58
|
export interface DialogComposition {
|
|
54
59
|
Header: typeof DialogHeader;
|
|
@@ -4,18 +4,18 @@ 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 noPadding = "
|
|
11
|
-
const dialogContent = "
|
|
12
|
-
const dialogHeading = "
|
|
13
|
-
const dialogContentInner = "
|
|
14
|
-
const noHeader = "
|
|
15
|
-
const closeButton = "
|
|
16
|
-
const dialogSmall = "
|
|
17
|
-
const dialogMedium = "
|
|
18
|
-
const dialogLarge = "
|
|
7
|
+
import '../../assets/Dialog.css';const dialogWrapper = "_dialogWrapper_1i48s_1";
|
|
8
|
+
const overlay = "_overlay_1i48s_10";
|
|
9
|
+
const dialog = "_dialog_1i48s_1";
|
|
10
|
+
const noPadding = "_noPadding_1i48s_30";
|
|
11
|
+
const dialogContent = "_dialogContent_1i48s_59";
|
|
12
|
+
const dialogHeading = "_dialogHeading_1i48s_66";
|
|
13
|
+
const dialogContentInner = "_dialogContentInner_1i48s_70";
|
|
14
|
+
const noHeader = "_noHeader_1i48s_76";
|
|
15
|
+
const closeButton = "_closeButton_1i48s_80";
|
|
16
|
+
const dialogSmall = "_dialogSmall_1i48s_106";
|
|
17
|
+
const dialogMedium = "_dialogMedium_1i48s_110";
|
|
18
|
+
const dialogLarge = "_dialogLarge_1i48s_114";
|
|
19
19
|
const styles = {
|
|
20
20
|
dialogWrapper,
|
|
21
21
|
overlay,
|
|
@@ -31,9 +31,7 @@ const styles = {
|
|
|
31
31
|
dialogLarge
|
|
32
32
|
};
|
|
33
33
|
const DialogHeader = ({
|
|
34
|
-
/** ID used to reference this header for aria-labelledby */
|
|
35
34
|
id,
|
|
36
|
-
/** Content of the header section */
|
|
37
35
|
children
|
|
38
36
|
}) => {
|
|
39
37
|
return /* @__PURE__ */ jsx("div", { className: styles.dialogHeading, id, children });
|
|
@@ -45,10 +43,7 @@ const DialogContent = ({
|
|
|
45
43
|
};
|
|
46
44
|
DialogHeader.displayName = "Dialog.Header";
|
|
47
45
|
DialogContent.displayName = "Dialog.Content";
|
|
48
|
-
function DialogWrapper({
|
|
49
|
-
children,
|
|
50
|
-
...props
|
|
51
|
-
}) {
|
|
46
|
+
function DialogWrapper(props) {
|
|
52
47
|
const {
|
|
53
48
|
onClose,
|
|
54
49
|
size = "dialogMedium",
|
|
@@ -57,7 +52,9 @@ function DialogWrapper({
|
|
|
57
52
|
dismissButtonLabel = "Close dialog",
|
|
58
53
|
role = "dialog",
|
|
59
54
|
id,
|
|
60
|
-
removePadding = false
|
|
55
|
+
removePadding = false,
|
|
56
|
+
zIndex,
|
|
57
|
+
children
|
|
61
58
|
} = props;
|
|
62
59
|
const ref = useRef(null);
|
|
63
60
|
const {
|
|
@@ -85,7 +82,10 @@ function DialogWrapper({
|
|
|
85
82
|
const headerId = props["aria-labelledby"] || `${id}-header`;
|
|
86
83
|
const contentId = props["aria-describedby"] || `${id}-content`;
|
|
87
84
|
const dialogClasses = [styles.dialog, styles[size], removePadding ? styles.noPadding : ""].filter(Boolean).join(" ");
|
|
88
|
-
|
|
85
|
+
const wrapperStyle = zIndex !== void 0 ? {
|
|
86
|
+
zIndex
|
|
87
|
+
} : {};
|
|
88
|
+
return /* @__PURE__ */ jsxs("div", { className: `${styles.dialogWrapper} ${modal ? styles.modal : ""}`, style: wrapperStyle, children: [
|
|
89
89
|
modal && /* @__PURE__ */ jsx("div", { className: styles.overlay, ...underlayProps, onClick: onClose, "aria-hidden": "true" }),
|
|
90
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: [
|
|
91
91
|
/* @__PURE__ */ jsxs("div", { className: `${styles.dialogContent} ${!hasHeader ? styles.noHeader : ""}`, children: [
|
|
@@ -6,12 +6,12 @@ import { Icon } from "../Icon/Icon.js";
|
|
|
6
6
|
import { c as cva } from "../../index-DdUYounA.js";
|
|
7
7
|
import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
|
|
8
8
|
import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
|
|
9
|
-
import '../../assets/Link.css';const link$1 = "
|
|
10
|
-
const xs = "
|
|
11
|
-
const sm = "
|
|
12
|
-
const md = "
|
|
13
|
-
const lg = "
|
|
14
|
-
const underline = "
|
|
9
|
+
import '../../assets/Link.css';const link$1 = "_link_pwc7n_1";
|
|
10
|
+
const xs = "_xs_pwc7n_11";
|
|
11
|
+
const sm = "_sm_pwc7n_17";
|
|
12
|
+
const md = "_md_pwc7n_23";
|
|
13
|
+
const lg = "_lg_pwc7n_29";
|
|
14
|
+
const underline = "_underline_pwc7n_55";
|
|
15
15
|
const styles = {
|
|
16
16
|
link: link$1,
|
|
17
17
|
xs,
|
|
@@ -3,8 +3,8 @@ import { TextField } from "react-aria-components";
|
|
|
3
3
|
import { useId } from "react";
|
|
4
4
|
import { FieldHeader } from "../FieldHeader/FieldHeader.js";
|
|
5
5
|
import { useFocusRing } from "@react-aria/focus";
|
|
6
|
-
import '../../assets/SelectNative.css';const select = "
|
|
7
|
-
const selectInput = "
|
|
6
|
+
import '../../assets/SelectNative.css';const select = "_select_1b9f5_1";
|
|
7
|
+
const selectInput = "_selectInput_1b9f5_10";
|
|
8
8
|
const styles = {
|
|
9
9
|
select,
|
|
10
10
|
selectInput
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React__default, { useRef, useState, useEffect } from "react";
|
|
3
|
-
import '../../assets/
|
|
3
|
+
import '../../assets/skeleton.css';import '../../assets/SkeletonLoader.css';/* empty css */
|
|
4
|
+
const SkeletonThemeContext = React__default.createContext({});
|
|
4
5
|
const defaultEnableAnimation = true;
|
|
5
6
|
function styleOptionsToCssProperties({ baseColor, highlightColor, width, height, borderRadius, circle, direction, duration, enableAnimation = defaultEnableAnimation, customHighlightBackground }) {
|
|
6
7
|
const style = {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonLoader.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SkeletonLoader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -12,6 +12,8 @@ export { default as Badge } from './Badge';
|
|
|
12
12
|
export type * from './Badge';
|
|
13
13
|
export { default as Box } from './Box';
|
|
14
14
|
export type * from './Box';
|
|
15
|
+
export { default as Breadcrumbs } from './Breadcrumbs';
|
|
16
|
+
export type * from './Breadcrumbs';
|
|
15
17
|
export { default as Button } from './Button';
|
|
16
18
|
export type * from './Button';
|
|
17
19
|
export { default as ButtonGroup } from './ButtonGroup';
|
package/dist/components/index.js
CHANGED
|
@@ -6,6 +6,7 @@ import { AviosBadge } from "./AviosBadge/AviosBadge.js";
|
|
|
6
6
|
import { AviosCurrencySymbol } from "./AviosCurrencySymbol/AviosCurrencySymbol.js";
|
|
7
7
|
import { Badge } from "./Badge/Badge.js";
|
|
8
8
|
import { Box } from "./Box/Box.js";
|
|
9
|
+
import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs.js";
|
|
9
10
|
import { Button } from "./Button/Button.js";
|
|
10
11
|
import { ButtonGroup } from "./ButtonGroup/ButtonGroup.js";
|
|
11
12
|
import { CalloutBanner } from "./CalloutBanner/CalloutBanner.js";
|
|
@@ -78,6 +79,7 @@ export {
|
|
|
78
79
|
AviosCurrencySymbol,
|
|
79
80
|
Badge,
|
|
80
81
|
Box,
|
|
82
|
+
Breadcrumbs,
|
|
81
83
|
Button,
|
|
82
84
|
ButtonGroup,
|
|
83
85
|
CalloutBanner,
|
|
@@ -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
|
@@ -6,6 +6,7 @@ import { AviosBadge } from "./components/AviosBadge/AviosBadge.js";
|
|
|
6
6
|
import { AviosCurrencySymbol } from "./components/AviosCurrencySymbol/AviosCurrencySymbol.js";
|
|
7
7
|
import { Badge } from "./components/Badge/Badge.js";
|
|
8
8
|
import { Box } from "./components/Box/Box.js";
|
|
9
|
+
import { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs.js";
|
|
9
10
|
import { Button } from "./components/Button/Button.js";
|
|
10
11
|
import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
|
|
11
12
|
import { CalloutBanner } from "./components/CalloutBanner/CalloutBanner.js";
|
|
@@ -78,6 +79,7 @@ export {
|
|
|
78
79
|
AviosCurrencySymbol,
|
|
79
80
|
Badge,
|
|
80
81
|
Box,
|
|
82
|
+
Breadcrumbs,
|
|
81
83
|
Button,
|
|
82
84
|
ButtonGroup,
|
|
83
85
|
CalloutBanner,
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const DraggableContainer: ({ children, initialWidth, minWidth, maxWidth, title, description, }: {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
initialWidth?: number;
|
|
4
|
+
minWidth?: number;
|
|
5
|
+
maxWidth?: number;
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useRef, useEffect } from "react";
|
|
3
|
+
import '../../assets/skeleton.css';import '../../assets/global.css';/* empty css */
|
|
4
|
+
import "react-aria-components";
|
|
5
|
+
import "../../components/AviosCurrencySymbol/AviosCurrencySymbol.js";
|
|
6
|
+
import { Box } from "../../components/Box/Box.js";
|
|
7
|
+
import "../../components/Breadcrumbs/Breadcrumbs.js";
|
|
8
|
+
import "../../components/Button/Button.js";
|
|
9
|
+
import "../../components/IconButton/IconButton.js";
|
|
10
|
+
import "../../components/CardSection/CardSection.js";
|
|
11
|
+
import "../../IconButton.module-4obqG6tY.js";
|
|
12
|
+
import "../../components/Carousel/CarouselButton/CarouselButton.js";
|
|
13
|
+
import "@react-aria/focus";
|
|
14
|
+
import "@react-aria/interactions";
|
|
15
|
+
import { Heading } from "../../components/Heading/Heading.js";
|
|
16
|
+
import "../../components/DetailsDisclosure/DetailsDisclosure.js";
|
|
17
|
+
import "../../components/Dialog/Dialog.js";
|
|
18
|
+
import "@react-aria/visually-hidden";
|
|
19
|
+
import "../../components/Fieldset/Fieldset.js";
|
|
20
|
+
import "../../components/Grid/Grid.js";
|
|
21
|
+
import "../../components/Image/Image.js";
|
|
22
|
+
import "../../components/ListBox/ListBox.js";
|
|
23
|
+
import "../../components/Menu/Menu.js";
|
|
24
|
+
import "../../components/MonthYearField/MonthYearField.js";
|
|
25
|
+
import "../../components/NumberField/NumberField.js";
|
|
26
|
+
import { Paragraph } from "../../components/Paragraph/Paragraph.js";
|
|
27
|
+
import "../../components/PasswordField/PasswordField.js";
|
|
28
|
+
import "../../components/Section/Section.js";
|
|
29
|
+
import "../../components/SelectCard/SelectCard.js";
|
|
30
|
+
/* empty css */
|
|
31
|
+
import "../../components/Tabs/Tabs.js";
|
|
32
|
+
import "../../components/TextField/TextField.js";
|
|
33
|
+
import "../../components/TextAreaField/TextAreaField.js";
|
|
34
|
+
const DraggableContainer = ({
|
|
35
|
+
children,
|
|
36
|
+
initialWidth = 500,
|
|
37
|
+
minWidth = 300,
|
|
38
|
+
maxWidth = 800,
|
|
39
|
+
title = "Draggable Container",
|
|
40
|
+
description = "Drag the right edge to resize and see scroll behavior"
|
|
41
|
+
}) => {
|
|
42
|
+
const [width, setWidth] = useState(initialWidth);
|
|
43
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
44
|
+
const containerRef = useRef(null);
|
|
45
|
+
const dragStartX = useRef(0);
|
|
46
|
+
const dragStartWidth = useRef(initialWidth);
|
|
47
|
+
const handleMouseDown = (e) => {
|
|
48
|
+
setIsDragging(true);
|
|
49
|
+
dragStartX.current = e.clientX;
|
|
50
|
+
dragStartWidth.current = width;
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
};
|
|
53
|
+
const handleMouseMove = (e) => {
|
|
54
|
+
if (!isDragging) return;
|
|
55
|
+
const deltaX = e.clientX - dragStartX.current;
|
|
56
|
+
const newWidth = Math.max(minWidth, Math.min(maxWidth, dragStartWidth.current + deltaX));
|
|
57
|
+
setWidth(newWidth);
|
|
58
|
+
};
|
|
59
|
+
const handleMouseUp = () => {
|
|
60
|
+
setIsDragging(false);
|
|
61
|
+
};
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
if (isDragging) {
|
|
64
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
65
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
66
|
+
document.body.style.cursor = "ew-resize";
|
|
67
|
+
document.body.style.userSelect = "none";
|
|
68
|
+
return () => {
|
|
69
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
70
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
71
|
+
document.body.style.cursor = "";
|
|
72
|
+
document.body.style.userSelect = "";
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
}, [isDragging]);
|
|
76
|
+
return /* @__PURE__ */ jsxs("div", { style: {
|
|
77
|
+
display: "flex",
|
|
78
|
+
flexDirection: "column",
|
|
79
|
+
alignItems: "center",
|
|
80
|
+
gap: "16px"
|
|
81
|
+
}, children: [
|
|
82
|
+
/* @__PURE__ */ jsxs(Box, { justifyContent: "center", maxWidth: "600px", flexDirection: "column", children: [
|
|
83
|
+
/* @__PURE__ */ jsx(Heading, { as: "h3", size: "sm", foregroundColor: "accentSecondary", children: title }),
|
|
84
|
+
/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Paragraph, { children: description }) })
|
|
85
|
+
] }),
|
|
86
|
+
/* @__PURE__ */ jsxs("div", { ref: containerRef, style: {
|
|
87
|
+
width: `${width}px`,
|
|
88
|
+
border: "var(--alto-sem-border-width-sm) dashed var(--alto-sem-color-border-secondary)",
|
|
89
|
+
borderRadius: "var(--alto-sem-radius-xs)",
|
|
90
|
+
padding: "var(--alto-sem-space-lg)",
|
|
91
|
+
position: "relative",
|
|
92
|
+
transition: isDragging ? "none" : "width 0.1s ease"
|
|
93
|
+
}, children: [
|
|
94
|
+
children,
|
|
95
|
+
/* @__PURE__ */ jsx("div", { onMouseDown: handleMouseDown, style: {
|
|
96
|
+
position: "absolute",
|
|
97
|
+
top: 0,
|
|
98
|
+
right: "-3px",
|
|
99
|
+
bottom: 0,
|
|
100
|
+
width: "6px",
|
|
101
|
+
cursor: "ew-resize",
|
|
102
|
+
background: isDragging ? "#3498db" : "transparent",
|
|
103
|
+
borderRadius: "0 8px 8px 0",
|
|
104
|
+
zIndex: 10,
|
|
105
|
+
transition: "background-color 0.2s ease"
|
|
106
|
+
}, onMouseEnter: (e) => {
|
|
107
|
+
if (!isDragging) {
|
|
108
|
+
e.currentTarget.style.background = "rgba(52, 152, 219, 0.3)";
|
|
109
|
+
}
|
|
110
|
+
}, onMouseLeave: (e) => {
|
|
111
|
+
if (!isDragging) {
|
|
112
|
+
e.currentTarget.style.background = "transparent";
|
|
113
|
+
}
|
|
114
|
+
} }),
|
|
115
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
116
|
+
position: "absolute",
|
|
117
|
+
top: "50%",
|
|
118
|
+
right: "-1px",
|
|
119
|
+
transform: "translateY(-50%)",
|
|
120
|
+
width: "2px",
|
|
121
|
+
height: "40px",
|
|
122
|
+
background: isDragging ? "#3498db" : "#bdc3c7",
|
|
123
|
+
borderRadius: "1px",
|
|
124
|
+
opacity: isDragging ? 1 : 0.6,
|
|
125
|
+
transition: "all 0.2s ease",
|
|
126
|
+
pointerEvents: "none"
|
|
127
|
+
} })
|
|
128
|
+
] })
|
|
129
|
+
] });
|
|
130
|
+
};
|
|
131
|
+
export {
|
|
132
|
+
DraggableContainer
|
|
133
|
+
};
|
|
134
|
+
//# sourceMappingURL=DraggableContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DraggableContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|