@festo-ui/react 5.0.0-dev.105 → 5.0.0-dev.106

package/index.css

@@ -1,4 +1,4 @@
-.fr-accordion{background-color:var(--fwe-white)}.fr-accordion,.fr-accordion-header{border-bottom:1px solid var(--fwe-gray-100)}.fr-accordion-header{align-items:center;color:var(--fwe-text);display:flex;font-size:var(--fwe-font-size-md);font-weight:var(--fwe-font-weight-bold);height:48px;padding:0 16px 0 24px}.fr-accordion-item-body{height:0;overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1)}.fr-accordion-item-body>:first-child:not(.fr-accordion-item-body-spacer-bottom):not(.fr-accordion){margin-top:0!important;padding-top:0!important}.fr-accordion-item-body>:not(.fr-accordion){margin-right:0}.fr-accordion-item-body-content{margin-right:64px}.fr-accordion-item-body-spacer-bottom{height:0;margin-top:24px;width:0}.fr-accordion-item-body .fr-accordion{margin-bottom:24px;margin-top:64px}.fr-accordion-item-body .fr-accordion-item-link{display:block;top:8px}.fr-accordion-item-body .fr-accordion-item-header{padding-right:32px;padding-top:32px}.fr-accordion-item-body .fr-accordion-item:after{color:var(--fwe-caerul);content:"";font-family:var(--fwe-font-family-icons-16);font-size:var(--fwe-font-size-base);height:16px;line-height:16px;right:4px;top:12px}.fr-accordion-item-body .fr-accordion-item--expanded:before{background-color:transparent}@media(min-width:600px){.fr-accordion-item-body>:not(.fng-accordion){margin-right:64px}.fr-accordion-item-body .fr-accordion-item-header{padding-right:168px;padding-top:24px}.fr-accordion-item-body .fr-accordion-item-link{font-size:var(--fwe-font-size-base);max-width:128px;overflow:hidden;text-overflow:ellipsis;top:24px;white-space:nowrap}.fr-accordion-item-body .fr-accordion-item:after{top:30px}}.fr-accordion-item-header{align-items:center;cursor:pointer;display:flex;min-height:48px;padding:24px 64px 24px 0}.fr-accordion-item{border-bottom:1px solid var(--fwe-gray-100);border-top:1px solid var(--fwe-gray-100);padding:0 16px 0 24px;position:relative}.fr-accordion-item-link{color:var(--fwe-caerul);display:none;font-size:var(--fwe-font-size-md);pointer-events:none;position:absolute;right:24px;top:24px}.fr-accordion-item:before{background-color:var(--fwe-caerul);content:"";display:block;height:0;left:0;position:absolute;top:0;width:4px}.fr-accordion-item:after{content:"";display:block;font-family:var(--fwe-font-family-icons-32);font-size:var(--fwe-font-size-xxl);height:32px;line-height:32px;pointer-events:none;position:absolute;right:16px;top:21px;transition:transform .2s ease}.fr-accordion-item--expanded .fr-accordion-item-header{font-weight:var(--fwe-font-weight-bold)}.fr-accordion-item--expanded .fr-accordion-item-body{height:auto}.fr-accordion-item--expanded:after{transform:rotate(-180deg)}.fr-accordion-item--expanded:before{height:100%}.fr-accordion-item--collapsed .fr-accordion-item-body{height:0}.fr-accordion-item--collapsed .fr-accordion-item-header{font-weight:var(--fwe-font-weight-normal)}.fwe-chip-container .fr-chip .fwe-icon-menu-close{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333;font-size:var(--fwe-font-size-base);line-height:var(--fwe-font-size-base);margin-left:0;padding-right:0;position:absolute;right:5px;top:3px}.fwe-chip-container .fr-chip .fwe-icon-menu-close:before{font-family:var(--fwe-font-family-icons-32)}.fwe-chip-container .fr-chip.fwe-chip.fwe-selected.fwe-category:after{content:none}.fr-modal{opacity:0}.fr-modal-enter-done{opacity:1;transition:opacity .1s ease-out .3s}.fr-modal-backdrop{opacity:0}.fr-modal-backdrop-enter-done{opacity:1;transition:opacity .3s ease-out}.fr-modal-backdrop-exit,.fr-modal-exit{opacity:1}.fr-modal-backdrop-exit-active,.fr-modal-exit-active{opacity:0;transition:opacity .6s}.fwe-page-dot:focus{background:var(--fwe-control-border-dark);outline:0}.fwe-popover-menu #tooltip{background:#fff;box-shadow:0 1px 4px rgba(51,51,51,.2)}.fwe-popover-menu #tooltip,.fwe-popover-menu .fwe-popover{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{display:inline-flex;height:32px;margin-left:inherit;max-height:32px;padding:0 8px 0 0;text-align:left;width:100%}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{align-items:center;display:inline-flex;flex-wrap:nowrap;height:24px;justify-content:center;width:32px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"]{margin-left:inherit}.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{background-color:rgba(51,51,51,.102);color:var(--fwe-black)}.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:rgba(51,51,51,.2)}#arrow,#arrow:after{height:12px;position:absolute;transform:rotate(45deg);width:12px}#arrow{height:17px;overflow:hidden;width:17px}#arrow:after{background:#fff;box-shadow:0 1px 4px rgba(51,51,51,.2);content:"";z-index:-1}.fwe-popover-container[data-popper-placement^=top]>#arrow{top:100%}.fwe-popover-container[data-popper-placement^=top]>#arrow:after{left:3px;top:-6px}.fwe-popover-container[data-popper-placement^=bottom]>#arrow{top:-17px}.fwe-popover-container[data-popper-placement^=bottom]>#arrow:after{left:3px;top:11px}.fwe-popover-container[data-popper-placement^=left]>#arrow{left:100%}.fwe-popover-container[data-popper-placement^=left]>#arrow:after{left:-6px;top:2px}.fwe-popover-container[data-popper-placement^=right]>#arrow{left:-17px}.fwe-popover-container[data-popper-placement^=right]>#arrow:after{left:11px;top:2px}.fr-tooltip-container{width:-moz-fit-content;width:fit-content}.fwe-w-100{width:100%}.fwe-search-suggestion{height:40px}.fr-snackbar-wrapper{height:48px;margin-bottom:24px;opacity:1;opacity:0}.fr-snackbar-wrapper-enter-done{opacity:1;transition:opacity .6s ease-out}.fr-snackbar-wrapper-exit{opacity:1}.fr-snackbar-wrapper-exit-active{height:0;margin-bottom:0;opacity:0;transition:height .3s ease-out .3s,opacity .3s ease-out,margin-bottom .3s ease-out .3s}.fr-snackbar-wrapper--first{height:48px;margin-bottom:24px;opacity:1;transform:translateY(100px)}.fr-snackbar-wrapper--first-enter-done{opacity:1;transition:opacity .6s ease-out}.fr-snackbar-wrapper--first-exit{opacity:1}.fr-snackbar-wrapper--first-exit-active{height:0;margin-bottom:0;opacity:0;transition:height .3s ease-out .3s,opacity .3s ease-out,margin-bottom .3s ease-out .3s}.fr-snackbar-wrapper--first-enter-done{transform:translateY(0);transition:transform .6s ease-out}.fr-snackbar-wrapper--first-exit-active{transform:translateY(0)}.overflow-hidden{overflow:hidden}@keyframes stepperAnimation{0%{transform:translateX(100%)}to{transform:translateX(0)}}.fr-moving-container{animation-duration:.3s;animation-name:stepperAnimation;animation-timing-function:ease}.hidden{display:none}.fwe-stepper-vertical .fwe-step-container.fwe-step-active .fwe-step-content-container{height:20px}.fr-show{display:block}.fr-hide{display:none}.fwe-legacy-tabs{height:100%;margin:48px 0;width:100%}.fwe-legacy-tab-bar{display:flex;flex-wrap:nowrap;font-size:var(--fwe-font-size-base);list-style:none;margin-bottom:0;margin-top:0;padding-left:0;width:75%}.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width{width:100%}.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item{flex:1 1 auto}.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item{flex:1 1 0}.fwe-legacy-tab-item{background-color:var(--fwe-gray-300);border-right:2px solid var(--fwe-gray-100);height:48px;max-height:48px;text-align:center}.fwe-legacy-tab-item:last-child{border-right:none}.fwe-legacy-tab-item.fwe-active{background-color:var(--fwe-white)}.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link{color:var(--fwe-caerul)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-gray-100)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{padding:11px 16px}.fwe-legacy-tab-link{color:var(--fwe-black);cursor:pointer;display:inline-block;height:48px;line-height:24px;padding:11px 16px 13px;white-space:nowrap;width:100%}.fwe-legacy-tab-link i.fwe-icon{padding-right:8px;vertical-align:initial}.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg{position:relative;top:3px}.fwe-legacy-tab-link:hover{color:var(--fwe-caerul)}.fwe-legacy-tab-link:active{background-color:var(--fwe-white);color:var(--fwe-caerul)}.fwe-legacy-tab-panel-content{background-color:var(--fwe-white);height:100%;overflow:auto;padding:48px 24px}@media(max-width:375px){.fwe-legacy-tab-bar{background-color:var(--fwe-white);justify-content:space-between;width:100%}.fwe-legacy-tab-item{background-color:var(--fwe-white);border-right:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link,.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon{color:var(--fwe-icon-gray)}.fwe-legacy-tab-link.fwe-can-swap-icon{direction:rtl}.fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon{padding-left:8px;padding-right:0}}.fr-tab-panel-content{background-color:var(--fwe-white);height:100%;overflow:auto;padding:48px 24px}.fr-tab-bar{width:100%}.fr-tab-scroller{overflow-y:hidden}.fr-tab-scroller-scroll-area{display:flex;overflow-x:hidden;position:relative}.fr-tab-scroller-scroll-area::-webkit-scrollbar{display:none}.fr-tab-scroller-scroll-area--scroll{overflow-x:scroll}.fr-tab-scroller-scroll-content{display:flex;flex:1 0 auto;padding:0 17px 0 16px;position:relative;transform:none;will-change:transform}.fr-tab-scroller-scroll-content--with-divider .fr-tab-scroller-divider-line{display:block}.fr-tab-scroller--animating .fr-tab-scroller-scroll-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.fr-tab-scroller-divider-line{border-bottom:1px solid var(--fwe-control);bottom:0;display:none;left:0;position:absolute;right:0;top:0}.fr-tab-indicator{display:flex;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.fr-tab-indicator-content{opacity:0;transform-origin:left}.fr-tab-indicator-content--underline{align-self:flex-end;border-top-style:solid;box-sizing:border-box;width:100%}.fr-tab-indicator .fr-tab-indicator-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.fr-tab-indicator .fr-tab-indicator-content--underline{border-top:4px solid var(--fwe-caerul)}.fr-tab-indicator--active .fr-tab-indicator-content{opacity:1}.fr-tab{-webkit-appearance:none;background:none;border:none;cursor:pointer;display:flex;flex:1 0 auto;height:36px;justify-content:center;margin:0;outline:none;padding:0;position:relative;text-align:center;white-space:nowrap;z-index:1}.fr-tab:not(:last-child){margin-right:32px}.fr-tab::-moz-focus-inner{border:0;padding:0}.fr-tab .fr-tab-text-label{color:var(--fwe-text)}.fr-tab--active .fr-tab-text-label{color:var(--fwe-caerul)}.fr-tab-content{align-items:flex-start;display:flex;height:inherit;justify-content:center;pointer-events:none;position:relative}.fr-tab-text-label{display:inline-block;z-index:2}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab{flex:none}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab:not(:last-child){margin-right:64px}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-scroll-content{padding:0 32px}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-divider-line{padding-right:64px}.fwe-checkbox-container{align-items:center;cursor:pointer;display:flex;flex-direction:row;font-family:var(--fwe-font-family-sans-serif);-webkit-user-select:none;-moz-user-select:none;user-select:none}.fwe-checkbox-container.fwe-label-below{flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{position:relative}.fwe-checkbox-container input{cursor:pointer;height:0;opacity:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{color:var(--fwe-text);line-height:24px;margin-left:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;box-sizing:border-box;height:16px;transition:border-width .2s ease-out;width:16px}.fwe-checkbox-container .fwe-indeterminate-indicator{background:#fff;height:2px;left:3px;position:absolute;top:7px;width:10px}.fwe-checkbox-container svg{display:block;left:0;position:absolute;top:0}.fwe-checkbox-container.fr-checkbox-large .fwe-checkbox-indicator-background{border-radius:4px;height:24px;width:24px}.fwe-checkbox-container.fr-checkbox-large .fwe-indeterminate-indicator{left:5px;top:11px;width:14px}.fwe-checkbox-container.fr-checkbox-large.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fr-checkbox-large.fwe-checked .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-dark)}.fwe-checkbox-container.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fr-checkbox-indeterminate:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-dark)}.fwe-checkbox-container.fr-checkbox-indeterminate:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-darker)}.fwe-checkbox-container.fr-checkbox-invalid .fwe-checkbox-indicator-background{background:var(--fwe-white);border:1px solid var(--fwe-red)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fr-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}.fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);border-radius:4px;box-shadow:0 1px 4px rgba(51,51,51,.2);font-size:var(--fwe-font-size-md);line-height:1rem;padding:8px 16px 16px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);height:18px;margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{background:var(--fwe-white);border:1px solid var(--fwe-control-border);border-radius:4px;height:24px;width:24px}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-top{height:17px;overflow:hidden;position:absolute;width:17px}.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-top:after{background:var(--fwe-white);box-shadow:0 1px 4px rgba(51,51,51,.2);content:"";height:12px;position:absolute;transform:rotate(45deg);width:12px}.fwe-popover,.fwe-popover.fwe-popover-menu{background-color:var(--fwe-white);border-radius:4px;box-shadow:0 1px 4px rgba(51,51,51,.2)}.fwe-popover{font-size:var(--fwe-font-size-md);line-height:1rem;padding:8px}.fwe-popover-container{display:inline-block;position:relative}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-top:after{left:3px;top:11px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-bottom:after{left:3px;top:-6px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{left:11px;top:2px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{left:-6px;top:2px}.fwe-popover.fwe-popover-menu{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{display:inline-flex;height:32px;justify-content:unset;margin-left:inherit;max-height:32px;padding:0 8px 0 0;text-align:left;width:100%}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{align-items:center;display:inline-flex;flex-wrap:nowrap;height:24px;justify-content:center;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{background-color:rgba(51,51,51,.102);color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:rgba(51,51,51,.2)}.fwe-popover .fwe-popover-legend{display:table;line-height:24px;margin:16px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-color-picker{width:216px}.fwe-color-picker.fwe-alpha-active{width:245px}.fwe-color-picker .fwe-gradient-picker{height:198px;margin:-7px;position:relative;width:198px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{background-image:linear-gradient(transparent,#000);bottom:7px;left:7px;position:absolute;right:7px;top:7px}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{bottom:7px;left:7px;position:absolute;right:7px;top:7px}.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker,.fwe-color-picker .fwe-vertical-picker{height:198px;margin:-7px -3px -7px 18px;position:relative;width:14px}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background,.fwe-color-picker .fwe-vertical-picker .fwe-picker-background{border-radius:4px;height:184px;margin:7px 3px;width:8px}.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-picker .fwe-knob,.fwe-color-picker .fwe-vertical-picker .fwe-knob{left:-3px}.fwe-color-picker .fwe-hue-picker .fwe-picker-background{background-image:linear-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.fwe-color-picker .fwe-alpha-picker .fwe-no-color-pattern{margin:7px 3px;position:absolute}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background{position:absolute}.fwe-color-picker .fwe-type-select{display:flex;position:relative}.fwe-color-picker .fwe-type-select .fwe-type-indicator{cursor:pointer;display:flex;flex-shrink:1}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);line-height:calc(var(--fwe-font-size-small) + 5px)}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{line-height:16px;margin-left:16px}.fwe-color-picker .fwe-type-select .fwe-popover{left:0;position:absolute;top:24px;z-index:1}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item{cursor:pointer;display:flex;padding:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item .fwe-icon-menu-check{margin-right:8px;opacity:0}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected{cursor:default}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected .fwe-icon-menu-check{opacity:1}.fwe-color-picker input::-webkit-inner-spin-button,.fwe-color-picker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fwe-color-picker input[type=number]{-moz-appearance:textfield}.fwe-color-picker input{padding-right:0!important;text-align:center}.fwe-color-picker .fwe-hex-input{margin-right:16px;width:75px}.fwe-color-picker .fwe-green-input,.fwe-color-picker .fwe-red-input{margin-right:8px;width:32px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{padding-right:16px!important;width:48px}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-bottom:-8px;margin-right:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;border-radius:4px;color:#fff;display:flex;height:24px;justify-content:center;margin-bottom:8px;margin-right:8px;width:24px}.fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item{border:1px solid var(--fwe-control-border);color:#000}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button{align-items:center;border:1px solid var(--fwe-control-border);border-radius:4px;color:var(--fwe-control);display:flex;height:24px;justify-content:center;margin-bottom:8px;margin-right:8px;width:24px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern{margin:2px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button i{color:transparent;position:absolute}.fwe-color-picker .fwe-knob{border:2px solid #fff;border-radius:50%;box-shadow:0 0 4px 0 rgba(0,0,0,.15);height:14px;position:absolute;width:14px;z-index:1}.flatpickr-calendar{margin-top:6px}.flatpickr-calendar:not(.open){display:none}.fwe-border-hero{border-color:var(--fwe-hero)!important}.fr-date-range-picker:hover input{color:var(--fwe-hero)}.fr-date-range-picker-inputs{display:flex;order:2}.fwe-select-wrapper{min-width:48px;width:100%}.fwe-select-wrapper select{display:none}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer}.fwe-select-wrapper .fwe-select .fwe-select-content{line-height:1.5rem;overflow:hidden;padding-right:24px;text-overflow:ellipsis;white-space:nowrap}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{content:"*";display:inline-block;left:3px;position:relative}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled):not(.fwe-invalid)~.fwe-select-valid{display:block}.fwe-select-wrapper .fwe-select:focus:not(:disabled){border-color:var(--fwe-hero);color:var(--fwe-hero)}.fwe-select-wrapper .fwe-select:focus:not(:disabled) option{color:var(--fwe-text)}.fwe-select-wrapper .fwe-select:focus:invalid{border-color:var(--fwe-red)}.fwe-select-wrapper .fwe-select.fwe-disabled{border-color:var(--fwe-control-disabled)!important;cursor:default}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content,.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select-options-container{background-color:var(--fwe-white);border:1px solid var(--fwe-gray-200);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.161);font-size:var(--fwe-font-size-base);left:0;list-style:none;margin:0;padding:8px;position:absolute;top:56px;width:100%;z-index:500}.fwe-select-wrapper .fwe-select-options-container .fwe-select-option{cursor:pointer;line-height:24px;min-height:24px;padding:12px 8px;position:relative}.fwe-select-wrapper .fwe-select-options-container .fwe-select-option:focus,.fwe-select-wrapper .fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100);outline:none}.fwe-select-wrapper .fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-wrapper .fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;line-height:24px;min-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:95%}.fwe-select-wrapper .fwe-select-label:empty~.fwe-select-options-container{top:40px}.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:focus,.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:hover{border-color:var(--fwe-red)}.fwe-select-wrapper .fwe-select.fwe-invalid~.fwe-select-invalid{display:block}.fwe-select-wrapper .fwe-select.fwe-invalid~.fwe-select-description{display:none}.fwe-select-wrapper .fr-select-scroll{overflow-y:scroll}label.fwe-slider{display:block;height:56px;position:relative}label.fwe-slider.fr-slider-label{height:83px}label.fwe-slider .fr-slider-value{bottom:0;color:var(--fwe-text);font-size:var(--fwe-font-size-base);margin-bottom:0;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}label.fwe-input-text .fr-textarea{overflow:visible}
+.fr-accordion{background-color:var(--fwe-white)}.fr-accordion,.fr-accordion-header{border-bottom:1px solid var(--fwe-gray-100)}.fr-accordion-header{align-items:center;color:var(--fwe-text);display:flex;font-size:var(--fwe-font-size-md);font-weight:var(--fwe-font-weight-bold);height:48px;padding:0 16px 0 24px}.fr-accordion-item-body{height:0;overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1)}.fr-accordion-item-body>:first-child:not(.fr-accordion-item-body-spacer-bottom):not(.fr-accordion){margin-top:0!important;padding-top:0!important}.fr-accordion-item-body>:not(.fr-accordion){margin-right:0}.fr-accordion-item-body-content{margin-right:64px}.fr-accordion-item-body-spacer-bottom{height:0;margin-top:24px;width:0}.fr-accordion-item-body .fr-accordion{margin-bottom:24px;margin-top:64px}.fr-accordion-item-body .fr-accordion-item-link{display:block;top:8px}.fr-accordion-item-body .fr-accordion-item-header{padding-right:32px;padding-top:32px}.fr-accordion-item-body .fr-accordion-item:after{color:var(--fwe-caerul);content:"";font-family:var(--fwe-font-family-icons-16);font-size:var(--fwe-font-size-base);height:16px;line-height:16px;right:4px;top:12px}.fr-accordion-item-body .fr-accordion-item--expanded:before{background-color:transparent}@media(min-width:600px){.fr-accordion-item-body>:not(.fng-accordion){margin-right:64px}.fr-accordion-item-body .fr-accordion-item-header{padding-right:168px;padding-top:24px}.fr-accordion-item-body .fr-accordion-item-link{font-size:var(--fwe-font-size-base);max-width:128px;overflow:hidden;text-overflow:ellipsis;top:24px;white-space:nowrap}.fr-accordion-item-body .fr-accordion-item:after{top:30px}}.fr-accordion-item-header{align-items:center;cursor:pointer;display:flex;min-height:48px;padding:24px 64px 24px 0}.fr-accordion-item{border-bottom:1px solid var(--fwe-gray-100);border-top:1px solid var(--fwe-gray-100);padding:0 16px 0 24px;position:relative}.fr-accordion-item-link{color:var(--fwe-caerul);display:none;font-size:var(--fwe-font-size-md);pointer-events:none;position:absolute;right:24px;top:24px}.fr-accordion-item:before{background-color:var(--fwe-caerul);content:"";display:block;height:0;left:0;position:absolute;top:0;width:4px}.fr-accordion-item:after{content:"";display:block;font-family:var(--fwe-font-family-icons-32);font-size:var(--fwe-font-size-xxl);height:32px;line-height:32px;pointer-events:none;position:absolute;right:16px;top:21px;transition:transform .2s ease}.fr-accordion-item--expanded .fr-accordion-item-header{font-weight:var(--fwe-font-weight-bold)}.fr-accordion-item--expanded .fr-accordion-item-body{height:auto}.fr-accordion-item--expanded:after{transform:rotate(-180deg)}.fr-accordion-item--expanded:before{height:100%}.fr-accordion-item--collapsed .fr-accordion-item-body{height:0}.fr-accordion-item--collapsed .fr-accordion-item-header{font-weight:var(--fwe-font-weight-normal)}.fwe-chip-container .fr-chip .fwe-icon-menu-close{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333;font-size:var(--fwe-font-size-base);line-height:var(--fwe-font-size-base);margin-left:0;padding-right:0;position:absolute;right:5px;top:3px}.fwe-chip-container .fr-chip .fwe-icon-menu-close:before{font-family:var(--fwe-font-family-icons-32)}.fwe-chip-container .fr-chip.fwe-chip.fwe-selected.fwe-category:after{content:none}.fr-modal{opacity:0}.fr-modal-enter-done{opacity:1;transition:opacity .1s ease-out .3s}.fr-modal-backdrop{opacity:0}.fr-modal-backdrop-enter-done{opacity:1;transition:opacity .3s ease-out}.fr-modal-backdrop-exit,.fr-modal-exit{opacity:1}.fr-modal-backdrop-exit-active,.fr-modal-exit-active{opacity:0;transition:opacity .6s}.fwe-page-dot:focus{background:var(--fwe-control-border-dark);outline:0}.fwe-popover-menu #tooltip{background:#fff;box-shadow:0 1px 4px rgba(51,51,51,.2)}.fwe-popover-menu #tooltip,.fwe-popover-menu .fwe-popover{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{display:inline-flex;height:32px;margin-left:inherit;max-height:32px;padding:0 8px 0 0;text-align:left;width:100%}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{align-items:center;display:inline-flex;flex-wrap:nowrap;height:24px;justify-content:center;width:32px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"]{margin-left:inherit}.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{background-color:rgba(51,51,51,.102);color:var(--fwe-black)}.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:rgba(51,51,51,.2)}#arrow,#arrow:after{height:12px;position:absolute;transform:rotate(45deg);width:12px}#arrow{height:17px;overflow:hidden;width:17px}#arrow:after{background:#fff;box-shadow:0 1px 4px rgba(51,51,51,.2);content:"";z-index:-1}.fwe-popover-container[data-popper-placement^=top]>#arrow{top:100%}.fwe-popover-container[data-popper-placement^=top]>#arrow:after{left:3px;top:-6px}.fwe-popover-container[data-popper-placement^=bottom]>#arrow{top:-17px}.fwe-popover-container[data-popper-placement^=bottom]>#arrow:after{left:3px;top:11px}.fwe-popover-container[data-popper-placement^=left]>#arrow{left:100%}.fwe-popover-container[data-popper-placement^=left]>#arrow:after{left:-6px;top:2px}.fwe-popover-container[data-popper-placement^=right]>#arrow{left:-17px}.fwe-popover-container[data-popper-placement^=right]>#arrow:after{left:11px;top:2px}.fr-tooltip-container{width:-moz-fit-content;width:fit-content}.fwe-w-100{width:100%}.fwe-search-suggestion{height:40px}.fr-snackbar-wrapper{height:48px;margin-bottom:24px;opacity:1;opacity:0}.fr-snackbar-wrapper-enter-done{opacity:1;transition:opacity .6s ease-out}.fr-snackbar-wrapper-exit{opacity:1}.fr-snackbar-wrapper-exit-active{height:0;margin-bottom:0;opacity:0;transition:height .3s ease-out .3s,opacity .3s ease-out,margin-bottom .3s ease-out .3s}.fr-snackbar-wrapper--first{height:48px;margin-bottom:24px;opacity:1;transform:translateY(100px)}.fr-snackbar-wrapper--first-enter-done{opacity:1;transition:opacity .6s ease-out}.fr-snackbar-wrapper--first-exit{opacity:1}.fr-snackbar-wrapper--first-exit-active{height:0;margin-bottom:0;opacity:0;transition:height .3s ease-out .3s,opacity .3s ease-out,margin-bottom .3s ease-out .3s}.fr-snackbar-wrapper--first-enter-done{transform:translateY(0);transition:transform .6s ease-out}.fr-snackbar-wrapper--first-exit-active{transform:translateY(0)}.overflow-hidden{overflow:hidden}@keyframes stepperAnimation{0%{transform:translateX(100%)}to{transform:translateX(0)}}.fr-moving-container{animation-duration:.3s;animation-name:stepperAnimation;animation-timing-function:ease}.hidden{display:none}.fwe-stepper-vertical .fwe-step-container.fwe-step-active .fwe-step-content-container{height:20px}.fr-show{display:block}.fr-hide{display:none}.fwe-legacy-tabs{height:100%;margin:48px 0;width:100%}.fwe-legacy-tab-bar{display:flex;flex-wrap:nowrap;font-size:var(--fwe-font-size-base);list-style:none;margin-bottom:0;margin-top:0;padding-left:0;width:75%}.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width{width:100%}.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item{flex:1 1 auto}.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item{flex:1 1 0}.fwe-legacy-tab-item{background-color:var(--fwe-gray-300);border-right:2px solid var(--fwe-gray-100);height:48px;max-height:48px;text-align:center}.fwe-legacy-tab-item:last-child{border-right:none}.fwe-legacy-tab-item.fwe-active{background-color:var(--fwe-white)}.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link{color:var(--fwe-caerul)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-gray-100)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{padding:11px 16px}.fwe-legacy-tab-link{color:var(--fwe-black);cursor:pointer;display:inline-block;height:48px;line-height:24px;padding:11px 16px 13px;white-space:nowrap;width:100%}.fwe-legacy-tab-link i.fwe-icon{padding-right:8px;vertical-align:initial}.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg{position:relative;top:3px}.fwe-legacy-tab-link:hover{color:var(--fwe-caerul)}.fwe-legacy-tab-link:active{background-color:var(--fwe-white);color:var(--fwe-caerul)}.fwe-legacy-tab-panel-content{background-color:var(--fwe-white);height:100%;overflow:auto;padding:48px 24px}@media(max-width:375px){.fwe-legacy-tab-bar{background-color:var(--fwe-white);justify-content:space-between;width:100%}.fwe-legacy-tab-item{background-color:var(--fwe-white);border-right:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link,.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon{color:var(--fwe-icon-gray)}.fwe-legacy-tab-link.fwe-can-swap-icon{direction:rtl}.fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon{padding-left:8px;padding-right:0}}.fr-tab-panel-content{background-color:var(--fwe-white);height:100%;overflow:auto;padding:48px 24px}.fr-tab-bar{width:100%}.fr-tab-scroller{overflow-y:hidden}.fr-tab-scroller-scroll-area{display:flex;overflow-x:hidden;position:relative}.fr-tab-scroller-scroll-area::-webkit-scrollbar{display:none}.fr-tab-scroller-scroll-area--scroll{overflow-x:scroll}.fr-tab-scroller-scroll-content{display:flex;flex:1 0 auto;padding:0 17px 0 16px;position:relative;transform:none;will-change:transform}.fr-tab-scroller-scroll-content--with-divider .fr-tab-scroller-divider-line{display:block}.fr-tab-scroller--animating .fr-tab-scroller-scroll-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.fr-tab-scroller-divider-line{border-bottom:1px solid var(--fwe-control);bottom:0;display:none;left:0;position:absolute;right:0;top:0}.fr-tab-indicator{display:flex;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.fr-tab-indicator-content{opacity:0;transform-origin:left}.fr-tab-indicator-content--underline{align-self:flex-end;border-top-style:solid;box-sizing:border-box;width:100%}.fr-tab-indicator .fr-tab-indicator-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.fr-tab-indicator .fr-tab-indicator-content--underline{border-top:4px solid var(--fwe-caerul)}.fr-tab-indicator--active .fr-tab-indicator-content{opacity:1}.fr-tab{-webkit-appearance:none;background:none;border:none;cursor:pointer;display:flex;flex:1 0 auto;height:36px;justify-content:center;margin:0;outline:none;padding:0;position:relative;text-align:center;white-space:nowrap;z-index:1}.fr-tab:not(:last-child){margin-right:32px}.fr-tab::-moz-focus-inner{border:0;padding:0}.fr-tab .fr-tab-text-label{color:var(--fwe-text)}.fr-tab--active .fr-tab-text-label{color:var(--fwe-caerul)}.fr-tab-content{align-items:flex-start;display:flex;height:inherit;justify-content:center;pointer-events:none;position:relative}.fr-tab-text-label{display:inline-block;z-index:2}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab{flex:none}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab:not(:last-child){margin-right:64px}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-scroll-content{padding:0 32px}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-divider-line{padding-right:64px}.fwe-checkbox-container{align-items:center;cursor:pointer;display:flex;flex-direction:row;font-family:var(--fwe-font-family-sans-serif);-webkit-user-select:none;-moz-user-select:none;user-select:none}.fwe-checkbox-container.fwe-label-below{flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{position:relative}.fwe-checkbox-container input{cursor:pointer;height:0;opacity:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{color:var(--fwe-text);line-height:24px;margin-left:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;box-sizing:border-box;height:16px;transition:border-width .2s ease-out;width:16px}.fwe-checkbox-container .fwe-indeterminate-indicator{background:#fff;height:2px;left:3px;position:absolute;top:7px;width:10px}.fwe-checkbox-container svg{display:block;left:0;position:absolute;top:0}.fwe-checkbox-container.fr-checkbox-large .fwe-checkbox-indicator-background{border-radius:4px;height:24px;width:24px}.fwe-checkbox-container.fr-checkbox-large .fwe-indeterminate-indicator{left:5px;top:11px;width:14px}.fwe-checkbox-container.fr-checkbox-large.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fr-checkbox-large.fwe-checked .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-dark)}.fwe-checkbox-container.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fr-checkbox-indeterminate:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-dark)}.fwe-checkbox-container.fr-checkbox-indeterminate:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-darker)}.fwe-checkbox-container.fr-checkbox-invalid .fwe-checkbox-indicator-background{background:var(--fwe-white);border:1px solid var(--fwe-red)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fr-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}.fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);border-radius:4px;box-shadow:0 1px 4px rgba(51,51,51,.2);font-size:var(--fwe-font-size-md);line-height:1rem;padding:8px 16px 16px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);height:18px;margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{background:var(--fwe-white);border:1px solid var(--fwe-control-border);border-radius:4px;height:24px;width:24px}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-top{height:17px;overflow:hidden;position:absolute;width:17px}.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-top:after{background:var(--fwe-white);box-shadow:0 1px 4px rgba(51,51,51,.2);content:"";height:12px;position:absolute;transform:rotate(45deg);width:12px}.fwe-popover,.fwe-popover.fwe-popover-menu{background-color:var(--fwe-white);border-radius:4px;box-shadow:0 1px 4px rgba(51,51,51,.2)}.fwe-popover{font-size:var(--fwe-font-size-md);line-height:1rem;padding:8px}.fwe-popover-container{display:inline-block;position:relative}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-top:after{left:3px;top:11px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-bottom:after{left:3px;top:-6px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{left:11px;top:2px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{left:-6px;top:2px}.fwe-popover.fwe-popover-menu{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{display:inline-flex;height:32px;justify-content:unset;margin-left:inherit;max-height:32px;padding:0 8px 0 0;text-align:left;width:100%}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{align-items:center;display:inline-flex;flex-wrap:nowrap;height:24px;justify-content:center;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{background-color:rgba(51,51,51,.102);color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:rgba(51,51,51,.2)}.fwe-popover .fwe-popover-legend{display:table;line-height:24px;margin:16px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-color-picker{width:216px}.fwe-color-picker.fwe-alpha-active{width:245px}.fwe-color-picker .fwe-gradient-picker{height:198px;margin:-7px;position:relative;width:198px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{background-image:linear-gradient(transparent,#000);bottom:7px;left:7px;position:absolute;right:7px;top:7px}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{bottom:7px;left:7px;position:absolute;right:7px;top:7px}.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker,.fwe-color-picker .fwe-vertical-picker{height:198px;margin:-7px -3px -7px 18px;position:relative;width:14px}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background,.fwe-color-picker .fwe-vertical-picker .fwe-picker-background{border-radius:4px;height:184px;margin:7px 3px;width:8px}.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-picker .fwe-knob,.fwe-color-picker .fwe-vertical-picker .fwe-knob{left:-3px}.fwe-color-picker .fwe-hue-picker .fwe-picker-background{background-image:linear-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.fwe-color-picker .fwe-alpha-picker .fwe-no-color-pattern{margin:7px 3px;position:absolute}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background{position:absolute}.fwe-color-picker .fwe-type-select{display:flex;position:relative}.fwe-color-picker .fwe-type-select .fwe-type-indicator{cursor:pointer;display:flex;flex-shrink:1}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);line-height:calc(var(--fwe-font-size-small) + 5px)}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{line-height:16px;margin-left:16px}.fwe-color-picker .fwe-type-select .fwe-popover{left:0;position:absolute;top:24px;z-index:1}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item{cursor:pointer;display:flex;padding:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item .fwe-icon-menu-check{margin-right:8px;opacity:0}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected{cursor:default}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected .fwe-icon-menu-check{opacity:1}.fwe-color-picker input::-webkit-inner-spin-button,.fwe-color-picker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fwe-color-picker input[type=number]{-moz-appearance:textfield}.fwe-color-picker input{padding-right:0!important;text-align:center}.fwe-color-picker .fwe-hex-input{margin-right:16px;width:75px}.fwe-color-picker .fwe-green-input,.fwe-color-picker .fwe-red-input{margin-right:8px;width:32px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{padding-right:16px!important;width:48px}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-bottom:-8px;margin-right:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;border-radius:4px;color:#fff;display:flex;height:24px;justify-content:center;margin-bottom:8px;margin-right:8px;width:24px}.fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item{border:1px solid var(--fwe-control-border);color:#000}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button{align-items:center;border:1px solid var(--fwe-control-border);border-radius:4px;color:var(--fwe-control);display:flex;height:24px;justify-content:center;margin-bottom:8px;margin-right:8px;width:24px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern{margin:2px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button i{color:transparent;position:absolute}.fwe-color-picker .fwe-knob{border:2px solid #fff;border-radius:50%;box-shadow:0 0 4px 0 rgba(0,0,0,.15);height:14px;position:absolute;width:14px;z-index:1}.flatpickr-calendar{margin-top:6px}.flatpickr-calendar:not(.open){display:none}.fwe-border-hero{border-color:var(--fwe-hero)!important}.fr-date-range-picker:hover input{color:var(--fwe-hero)}.fr-date-range-picker-inputs{display:flex;order:2}.fwe-select-wrapper{min-width:48px;width:100%}.fwe-select-wrapper .fr-select-input{bottom:0;box-sizing:border-box;left:0;opacity:0;pointer-events:none;position:absolute;width:100%}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer}.fwe-select-wrapper .fwe-select .fwe-select-content{line-height:1.5rem;overflow:hidden;padding-right:24px;text-overflow:ellipsis;white-space:nowrap}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{content:"*";display:inline-block;left:3px;position:relative}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled):not(.fwe-invalid)~.fwe-select-valid{display:block}.fwe-select-wrapper .fwe-select:focus:not(:disabled){border-color:var(--fwe-hero);color:var(--fwe-hero)}.fwe-select-wrapper .fwe-select:focus:not(:disabled) option{color:var(--fwe-text)}.fwe-select-wrapper .fwe-select:focus:invalid{border-color:var(--fwe-red)}.fwe-select-wrapper .fwe-select.fwe-disabled{border-color:var(--fwe-control-disabled)!important;cursor:default}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content,.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select-options-container{background-color:var(--fwe-white);border:1px solid var(--fwe-gray-200);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.161);font-size:var(--fwe-font-size-base);left:0;list-style:none;margin:0;padding:8px;position:absolute;top:56px;width:100%;z-index:500}.fwe-select-wrapper .fwe-select-options-container .fwe-select-option{cursor:pointer;line-height:24px;min-height:24px;padding:12px 8px;position:relative}.fwe-select-wrapper .fwe-select-options-container .fwe-select-option:focus,.fwe-select-wrapper .fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100);outline:none}.fwe-select-wrapper .fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-wrapper .fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;line-height:24px;min-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:95%}.fwe-select-wrapper .fwe-select-label:empty~.fwe-select-options-container{top:40px}.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:focus,.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:hover{border-color:var(--fwe-red)}.fwe-select-wrapper .fwe-select.fwe-invalid~.fwe-select-invalid{display:block}.fwe-select-wrapper .fwe-select.fwe-invalid~.fwe-select-description{display:none}.fwe-select-wrapper .fr-select-scroll{overflow-y:scroll}label.fwe-slider{display:block;height:56px;position:relative}label.fwe-slider.fr-slider-label{height:83px}label.fwe-slider .fr-slider-value{bottom:0;color:var(--fwe-text);font-size:var(--fwe-font-size-base);margin-bottom:0;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}label.fwe-input-text .fr-textarea{overflow:visible}
 /*!
  * Quill Editor v1.3.7
  * https://quilljs.com/

package/lib/components/accordion/Accordion.js

@@ -24,7 +24,7 @@ const Accordion = /*#__PURE__*/forwardRef((_ref, ref) => {
     keepItemsOpen,
     expanded,
     toggle: handleChange
-  }), [expanded]);
+  }), [expanded, keepItemsOpen, showLess, showMore]);
   return /*#__PURE__*/_jsx(AccordionContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {

package/lib/components/snackbar/SnackbarProvider.js

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import Snackbar from './Snackbar';
 import SnackbarContext from './SnackbarContext';
@@ -13,7 +13,7 @@ function SnackbarProvider(props) {
     className
   } = props;
   const [snacks, setSnacks] = useState([]);
-  function addSnackbar(snackData, onAction, onClose) {
+  const addSnackbar = useCallback((snackData, onAction, onClose) => {
     const key = snackData.key ?? new Date().getTime() + Math.random();
     setSnacks(prevSnacks => [{
       data: {
@@ -26,7 +26,7 @@ function SnackbarProvider(props) {
       first: prevSnacks.length === 0
     }, ...prevSnacks]);
     return key;
-  }
+  }, [config]);
   function closeSnackbar(key) {
     if (key !== undefined) {
       setSnacks(prevSnacks => prevSnacks.filter(snack => snack.key !== key));
@@ -41,7 +41,7 @@ function SnackbarProvider(props) {
   const contextValue = useMemo(() => ({
     addSnackbar,
     closeSnackbar
-  }), []);
+  }), [addSnackbar]);
   return /*#__PURE__*/_jsxs(SnackbarContext.Provider, {
     value: contextValue,
     children: [children, /*#__PURE__*/_jsx("div", {

package/lib/forms/radio/RadioGroup.js

@@ -22,7 +22,7 @@ function RadioGroup(_ref) {
     large,
     disabled,
     required
-  }), []);
+  }), [checked, disabled, labelPosition, large, name, required, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {

package/lib/forms/select/Select.d.ts

@@ -1,13 +1,7 @@
-import React, { ComponentPropsWithoutRef } from 'react';
 import './Select.scss';
+import React, { ComponentPropsWithoutRef } from 'react';
+import { SelectConfiguration } from '../../helper/types';
 import { SelectOptionType } from './select-option/SelectOption';
-interface Configuration {
-    hideLabel?: boolean;
-    scroll?: {
-        enabled?: boolean;
-        viewportSize?: number;
-    };
-}
 export interface SelectProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
     defaultValue?: any;
     value?: any;
@@ -15,7 +9,7 @@ export interface SelectProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onCh
     options?: SelectOptionType[];
     required?: boolean;
     onChange?: (value: any) => void;
-    config?: Configuration;
+    config?: SelectConfiguration;
     disabled?: boolean;
     name?: string;
     id?: string;

package/lib/forms/select/Select.js

@@ -1,30 +1,16 @@
-import React, { useState, useEffect, useRef, useCallback, forwardRef } from 'react';
-import OutsideClickHandler from 'react-outside-click-handler';
 import classNames from 'classnames';
-import { SelectOption } from './select-option/SelectOption';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import useControlled from '../../helper/useControlled';
+import useForkRef from '../../helper/useForkRef';
+import useOnClickOutside from '../../helper/useOnClickOutside';
+import ListItem from './list-item/ListItem';
+import calcVirtualScrollHeight from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function calcVirtualScrollHeight(config, itemLength) {
-  const defaultHeight = 48;
-  let height = defaultHeight;
-  if (itemLength === 2) {
-    height = defaultHeight * 2;
-  } else if (itemLength >= 3) {
-    height = defaultHeight * 3;
-  }
-  if (config?.scroll?.viewportSize != null && config.scroll.viewportSize !== undefined) {
-    if (itemLength >= config.scroll.viewportSize) {
-      height = config.scroll.viewportSize * defaultHeight;
-    } else if (itemLength < config.scroll.viewportSize) {
-      height = itemLength * defaultHeight;
-    }
-  }
-  return height;
-}
 const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    defaultValue,
+    defaultValue = '',
     value,
     label,
     options,
@@ -44,8 +30,12 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
     isFocused: false,
     action: ''
   });
-  const controlled = value !== undefined;
-  const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+  const [innerValue, setInnerValue] = useControlled({
+    controlled: value,
+    default: defaultValue
+  });
+  const innerRef = useRef(null);
+  const combinedRef = useForkRef(ref, innerRef);
   const buttonEl = useRef(null);
   const childrenList = [];
   React.Children.forEach(children, element => {
@@ -63,17 +53,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
   const listItemRef = useRef(Array.from({
     length: usedOptions.length
   }, () => /*#__PURE__*/React.createRef()));
-  useEffect(() => {
-    if (controlled) {
-      setInnerValue(value);
-    }
-  }, [value, controlled]);
-  const getSelectedOptionLabel = useCallback(() => {
-    if (innerValue !== undefined) {
-      return usedOptions.find(option => option.data === innerValue)?.label;
-    }
-    return undefined;
-  }, [usedOptions, innerValue]);
+  const getSelectedOptionLabel = useCallback(() => usedOptions.find(option => option.data === innerValue)?.label, [usedOptions, innerValue]);
   const scroll = config?.scroll;
   function handleButtonFocus(blur) {
     if (buttonEl && buttonEl.current) {
@@ -84,30 +64,31 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }
   }
-  const focusNextElement = nextIndex => {
+  const focusNextElement = useCallback(nextIndex => {
     if (listItemRef && listItemRef.current) {
       const nextItem = listItemRef.current[nextIndex].current;
       if (nextItem !== null) {
         nextItem.focus();
       }
     }
-  };
+  }, []);
+  const handleKeyAction = useCallback(index => {
+    if (index >= 0) {
+      focusNextElement(index);
+    }
+  }, [focusNextElement]);
   useEffect(() => {
     if (optionsWrapper.isFocused) {
       if (optionsWrapper.action === 'key') {
         const index = usedOptions.findIndex(option => option.label === getSelectedOptionLabel());
-        if (index >= 0) {
-          focusNextElement(index);
-        }
+        handleKeyAction(index);
       } else if (optionsWrapper.action === 'click') {
         handleButtonFocus(true);
       }
     }
-  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel]);
+  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel, handleKeyAction]);
   const handleOptionChange = newOption => {
-    if (!controlled) {
-      setInnerValue(newOption.data);
-    }
+    setInnerValue(newOption.data);
     if (onChange) {
       onChange(newOption.data);
     }
@@ -119,28 +100,23 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       buttonEl.current.focus();
     }
   };
-  const handleListKeyDown = (event, option, index) => {
+  const handleListKeyDown = (e, option, index) => {
     const arrowKeys = ['ArrowDown', 'ArrowUp'];
     const validKeys = ['Enter', ' '];
-    if (arrowKeys.concat(validKeys).includes(event.key)) {
-      event.preventDefault();
+    if (arrowKeys.concat(validKeys).includes(e.key)) {
+      e.preventDefault();
     }
-    if (event.key === 'ArrowDown') {
+    if (e.key === 'ArrowDown') {
       focusNextElement((index + 1) % usedOptions.length);
     }
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      let nextIndex = (index - 1) % usedOptions.length;
-      if (nextIndex < 0) {
-        nextIndex += usedOptions.length;
-      }
+    if (e.key === 'ArrowUp') {
+      const nextIndex = (index - 1 + usedOptions.length) % usedOptions.length;
       focusNextElement(nextIndex);
     }
-    if (validKeys.includes(event.key)) {
+    if (validKeys.includes(e.key)) {
       handleOptionChange(option);
-      event.preventDefault();
     }
-    if (event.key === 'Escape') {
+    if (e.key === 'Escape') {
       setOptionsWrapper(prevOptionsWrapper => ({
         ...prevOptionsWrapper,
         isFocused: false
@@ -169,6 +145,16 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       }));
     }
   };
+  const handleChange = event => {
+    const child = usedOptions.find(childItem => childItem.data === event.target.value);
+    if (child === undefined) {
+      return;
+    }
+    setInnerValue(child.data);
+    if (onChange) {
+      onChange(child.data);
+    }
+  };
   const selectedOptionLabel = getSelectedOptionLabel();
   const selectClassName = classNames('fwe-select', {
     'fwe-focus': optionsWrapper.isFocused
@@ -183,16 +169,12 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   function renderOptions() {
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [options && options.map((option, i) => /*#__PURE__*/_jsx("li", {
+      children: [options && options.map((option, i) => /*#__PURE__*/_jsx(ListItem, {
         ref: listItemRef.current[i],
-        role: "option",
         "aria-selected": option.label === selectedOptionLabel,
         onClick: () => handleOptionChange(option),
-        className: classNames('fwe-select-option', {
-          'fwe-empty': !option.label
-        }),
+        empty: !option.label,
         onKeyDown: e => handleListKeyDown(e, option, i),
-        tabIndex: 0,
         children: /*#__PURE__*/_jsx("span", {
           className: "fwe-select-option-content",
           children: option.label
@@ -202,80 +184,68 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
           option,
           ...propsWithoutOption
         } = child.props;
-        return /*#__PURE__*/_jsx("li", {
+        return /*#__PURE__*/_jsx(ListItem, {
           ref: listItemRef.current[i],
-          role: "option",
           "aria-selected": option.label === selectedOptionLabel,
           onClick: () => handleOptionChange(option),
-          className: classNames('fwe-select-option', {
-            'fwe-empty': !option.label
-          }),
+          empty: !option.label,
           onKeyDown: e => handleListKeyDown(e, option, i),
-          tabIndex: 0,
-          children: /*#__PURE__*/_jsx(SelectOption, {
+          children: /*#__PURE__*/_jsx("span", {
             ...propsWithoutOption
           })
         }, option.data);
       })]
     });
   }
-  return /*#__PURE__*/_jsx(OutsideClickHandler, {
-    onOutsideClick: () => setOptionsWrapper({
-      action: '',
-      isFocused: false
-    }),
-    children: /*#__PURE__*/_jsxs("div", {
-      ref: ref,
-      className: classNames('fwe-select-wrapper', className),
-      ...props,
-      children: [/*#__PURE__*/_jsx("select", {
-        defaultValue: defaultValue,
-        value: innerValue,
-        name: name,
-        id: id,
-        "aria-label": label,
-        disabled: disabled,
-        required: required,
-        children: usedOptions.map(option => /*#__PURE__*/_jsx("option", {
-          value: option.data,
-          children: option.label
-        }, option.data))
-      }), /*#__PURE__*/_jsx("div", {
-        role: "button",
-        tabIndex: 0,
-        className: selectClassName,
-        onClick: e => handleClick(e),
-        ref: buttonEl,
-        onKeyDown: handleKeyPress,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "fwe-select-content",
-          children: selectedOptionLabel
-        })
-      }), /*#__PURE__*/_jsx("label", {
-        className: classNames('fwe-select-label', {
-          'fwe-sr-only': config?.hideLabel
-        }),
-        htmlFor: id,
-        children: label || ''
-      }), /*#__PURE__*/_jsx("div", {
-        className: "fwe-select-underline"
-      }), hint && !error && /*#__PURE__*/_jsx("div", {
-        className: "fwe-select-description",
-        children: hint
-      }), error && /*#__PURE__*/_jsxs("div", {
-        className: "fwe-select-invalid",
-        children: [" ", error, " "]
-      }), /*#__PURE__*/_jsx("ul", {
-        className: `fwe-select-options-container${optionsWrapper.isFocused ? '' : ' fwe-d-none'}`,
-        children: scroll?.enabled ? /*#__PURE__*/_jsx("div", {
-          className: "fr-select-scroll",
-          style: {
-            height: calcVirtualScrollHeight(config, usedOptions.length)
-          },
-          children: renderOptions()
-        }) : renderOptions()
-      })]
-    })
+  useOnClickOutside(innerRef, () => setOptionsWrapper({
+    action: '',
+    isFocused: false
+  }));
+  return /*#__PURE__*/_jsxs("div", {
+    ref: combinedRef,
+    className: classNames('fwe-select-wrapper', className),
+    ...props,
+    children: [/*#__PURE__*/_jsx("input", {
+      className: "fr-select-input",
+      "aria-hidden": true,
+      tabIndex: -1,
+      value: innerValue,
+      onChange: e => handleChange(e)
+    }), /*#__PURE__*/_jsx("div", {
+      role: "button",
+      tabIndex: 0,
+      className: selectClassName,
+      onClick: e => handleClick(e),
+      ref: buttonEl,
+      onKeyDown: handleKeyPress,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "fwe-select-content",
+        children: selectedOptionLabel
+      })
+    }), /*#__PURE__*/_jsx("label", {
+      className: classNames('fwe-select-label', {
+        'fwe-sr-only': config?.hideLabel
+      }),
+      htmlFor: id,
+      children: label || ''
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-select-underline"
+    }), hint && !error && /*#__PURE__*/_jsx("div", {
+      className: "fwe-select-description",
+      children: hint
+    }), error && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-select-invalid",
+      children: [" ", error, " "]
+    }), /*#__PURE__*/_jsx("ul", {
+      className: `fwe-select-options-container${optionsWrapper.isFocused ? '' : ' fwe-d-none'}`,
+      children: scroll?.enabled ? /*#__PURE__*/_jsx("div", {
+        className: "fr-select-scroll",
+        style: {
+          height: calcVirtualScrollHeight(config, usedOptions.length)
+        },
+        children: renderOptions()
+      }) : renderOptions()
+    })]
   });
 });
 export default Select;

package/lib/forms/select/list-item/ListItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ListItemProps extends React.ComponentPropsWithoutRef<'li'> {
+    empty?: boolean;
+}
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+export default ListItem;

package/lib/forms/select/list-item/ListItem.js

@@ -0,0 +1,24 @@
+import cn from 'classnames';
+import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    "aria-selected": ariaSelected,
+    empty,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx("li", {
+    ref: ref,
+    role: "option",
+    "aria-selected": ariaSelected,
+    className: cn('fwe-select-option', {
+      'fwe-empty': empty
+    }, className),
+    tabIndex: 0,
+    ...props,
+    children: children
+  });
+});
+export default ListItem;

package/lib/forms/select/select-option/SelectOption.d.ts

@@ -3,7 +3,7 @@ export interface SelectOptionType {
     label: string;
     data: any;
 }
-interface SelectOptionProps extends React.ComponentPropsWithoutRef<'span'> {
+export interface SelectOptionProps extends React.ComponentPropsWithoutRef<'span'> {
     option: SelectOptionType;
 }
 export declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLDivElement>>;

package/lib/forms/select/utils.d.ts

@@ -0,0 +1,2 @@
+import { SelectConfiguration } from '../../helper/types';
+export default function calcVirtualScrollHeight(config: SelectConfiguration | undefined, itemLength: number): number;

package/lib/forms/select/utils.js

@@ -0,0 +1,17 @@
+export default function calcVirtualScrollHeight(config, itemLength) {
+  const defaultHeight = 48;
+  let height = defaultHeight;
+  if (itemLength === 2) {
+    height = defaultHeight * 2;
+  } else if (itemLength >= 3) {
+    height = defaultHeight * 3;
+  }
+  if (config?.scroll?.viewportSize != null && config.scroll.viewportSize !== undefined) {
+    if (itemLength >= config.scroll.viewportSize) {
+      height = config.scroll.viewportSize * defaultHeight;
+    } else if (itemLength < config.scroll.viewportSize) {
+      height = itemLength * defaultHeight;
+    }
+  }
+  return height;
+}

package/lib/helper/types.d.ts

@@ -5,3 +5,10 @@ export interface ClassNameProps {
 export interface ClassNamePropsWithChildren extends ClassNameProps {
     children?: React.ReactNode;
 }
+export interface SelectConfiguration {
+    hideLabel?: boolean;
+    scroll?: {
+        enabled?: boolean;
+        viewportSize?: number;
+    };
+}

package/lib/helper/useId.js

@@ -10,12 +10,13 @@ function useLegacyId() {
       nextId += 1;
       setId(`fr-${nextId}`);
     }
-  }, [setId]);
+  }, [id]);
   return id;
 }
 export default function useId(idInput) {
   if (idInput !== undefined && idInput !== null) {
     return idInput;
   }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   return maybeReactUseId ? maybeReactUseId() : useLegacyId();
 }

package/node/lib/components/accordion/Accordion.js

@@ -31,7 +31,7 @@ const Accordion = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     keepItemsOpen,
     expanded,
     toggle: handleChange
-  }), [expanded]);
+  }), [expanded, keepItemsOpen, showLess, showMore]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccordionContext.default.Provider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/node/lib/components/snackbar/SnackbarProvider.js

@@ -19,7 +19,7 @@ function SnackbarProvider(props) {
     className
   } = props;
   const [snacks, setSnacks] = (0, _react.useState)([]);
-  function addSnackbar(snackData, onAction, onClose) {
+  const addSnackbar = (0, _react.useCallback)((snackData, onAction, onClose) => {
     const key = snackData.key ?? new Date().getTime() + Math.random();
     setSnacks(prevSnacks => [{
       data: {
@@ -32,7 +32,7 @@ function SnackbarProvider(props) {
       first: prevSnacks.length === 0
     }, ...prevSnacks]);
     return key;
-  }
+  }, [config]);
   function closeSnackbar(key) {
     if (key !== undefined) {
       setSnacks(prevSnacks => prevSnacks.filter(snack => snack.key !== key));
@@ -47,7 +47,7 @@ function SnackbarProvider(props) {
   const contextValue = (0, _react.useMemo)(() => ({
     addSnackbar,
     closeSnackbar
-  }), []);
+  }), [addSnackbar]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SnackbarContext.default.Provider, {
     value: contextValue,
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/node/lib/forms/radio/RadioGroup.js

@@ -29,7 +29,7 @@ function RadioGroup(_ref) {
     large,
     disabled,
     required
-  }), []);
+  }), [checked, disabled, labelPosition, large, name, required, value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.default.Provider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/node/lib/forms/select/Select.js

@@ -4,34 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _SelectOption = require("./select-option/SelectOption");
+var _react = _interopRequireWildcard(require("react"));
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled"));
+var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef"));
+var _useOnClickOutside = _interopRequireDefault(require("../../helper/useOnClickOutside"));
+var _ListItem = _interopRequireDefault(require("./list-item/ListItem"));
+var _utils = _interopRequireDefault(require("./utils"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function calcVirtualScrollHeight(config, itemLength) {
-  const defaultHeight = 48;
-  let height = defaultHeight;
-  if (itemLength === 2) {
-    height = defaultHeight * 2;
-  } else if (itemLength >= 3) {
-    height = defaultHeight * 3;
-  }
-  if (config?.scroll?.viewportSize != null && config.scroll.viewportSize !== undefined) {
-    if (itemLength >= config.scroll.viewportSize) {
-      height = config.scroll.viewportSize * defaultHeight;
-    } else if (itemLength < config.scroll.viewportSize) {
-      height = itemLength * defaultHeight;
-    }
-  }
-  return height;
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    defaultValue,
+    defaultValue = '',
     value,
     label,
     options,
@@ -51,8 +37,12 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     isFocused: false,
     action: ''
   });
-  const controlled = value !== undefined;
-  const [innerValue, setInnerValue] = (0, _react.useState)(controlled ? value : defaultValue);
+  const [innerValue, setInnerValue] = (0, _useControlled.default)({
+    controlled: value,
+    default: defaultValue
+  });
+  const innerRef = (0, _react.useRef)(null);
+  const combinedRef = (0, _useForkRef.default)(ref, innerRef);
   const buttonEl = (0, _react.useRef)(null);
   const childrenList = [];
   _react.default.Children.forEach(children, element => {
@@ -70,17 +60,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const listItemRef = (0, _react.useRef)(Array.from({
     length: usedOptions.length
   }, () => /*#__PURE__*/_react.default.createRef()));
-  (0, _react.useEffect)(() => {
-    if (controlled) {
-      setInnerValue(value);
-    }
-  }, [value, controlled]);
-  const getSelectedOptionLabel = (0, _react.useCallback)(() => {
-    if (innerValue !== undefined) {
-      return usedOptions.find(option => option.data === innerValue)?.label;
-    }
-    return undefined;
-  }, [usedOptions, innerValue]);
+  const getSelectedOptionLabel = (0, _react.useCallback)(() => usedOptions.find(option => option.data === innerValue)?.label, [usedOptions, innerValue]);
   const scroll = config?.scroll;
   function handleButtonFocus(blur) {
     if (buttonEl && buttonEl.current) {
@@ -91,30 +71,31 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       }
     }
   }
-  const focusNextElement = nextIndex => {
+  const focusNextElement = (0, _react.useCallback)(nextIndex => {
     if (listItemRef && listItemRef.current) {
       const nextItem = listItemRef.current[nextIndex].current;
       if (nextItem !== null) {
         nextItem.focus();
       }
     }
-  };
+  }, []);
+  const handleKeyAction = (0, _react.useCallback)(index => {
+    if (index >= 0) {
+      focusNextElement(index);
+    }
+  }, [focusNextElement]);
   (0, _react.useEffect)(() => {
     if (optionsWrapper.isFocused) {
       if (optionsWrapper.action === 'key') {
         const index = usedOptions.findIndex(option => option.label === getSelectedOptionLabel());
-        if (index >= 0) {
-          focusNextElement(index);
-        }
+        handleKeyAction(index);
       } else if (optionsWrapper.action === 'click') {
         handleButtonFocus(true);
       }
     }
-  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel]);
+  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel, handleKeyAction]);
   const handleOptionChange = newOption => {
-    if (!controlled) {
-      setInnerValue(newOption.data);
-    }
+    setInnerValue(newOption.data);
     if (onChange) {
       onChange(newOption.data);
     }
@@ -126,28 +107,23 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       buttonEl.current.focus();
     }
   };
-  const handleListKeyDown = (event, option, index) => {
+  const handleListKeyDown = (e, option, index) => {
     const arrowKeys = ['ArrowDown', 'ArrowUp'];
     const validKeys = ['Enter', ' '];
-    if (arrowKeys.concat(validKeys).includes(event.key)) {
-      event.preventDefault();
+    if (arrowKeys.concat(validKeys).includes(e.key)) {
+      e.preventDefault();
     }
-    if (event.key === 'ArrowDown') {
+    if (e.key === 'ArrowDown') {
       focusNextElement((index + 1) % usedOptions.length);
     }
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      let nextIndex = (index - 1) % usedOptions.length;
-      if (nextIndex < 0) {
-        nextIndex += usedOptions.length;
-      }
+    if (e.key === 'ArrowUp') {
+      const nextIndex = (index - 1 + usedOptions.length) % usedOptions.length;
       focusNextElement(nextIndex);
     }
-    if (validKeys.includes(event.key)) {
+    if (validKeys.includes(e.key)) {
       handleOptionChange(option);
-      event.preventDefault();
     }
-    if (event.key === 'Escape') {
+    if (e.key === 'Escape') {
       setOptionsWrapper(prevOptionsWrapper => ({
         ...prevOptionsWrapper,
         isFocused: false
@@ -176,6 +152,16 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       }));
     }
   };
+  const handleChange = event => {
+    const child = usedOptions.find(childItem => childItem.data === event.target.value);
+    if (child === undefined) {
+      return;
+    }
+    setInnerValue(child.data);
+    if (onChange) {
+      onChange(child.data);
+    }
+  };
   const selectedOptionLabel = getSelectedOptionLabel();
   const selectClassName = (0, _classnames.default)('fwe-select', {
     'fwe-focus': optionsWrapper.isFocused
@@ -190,16 +176,12 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
   function renderOptions() {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [options && options.map((option, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      children: [options && options.map((option, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
         ref: listItemRef.current[i],
-        role: "option",
         "aria-selected": option.label === selectedOptionLabel,
         onClick: () => handleOptionChange(option),
-        className: (0, _classnames.default)('fwe-select-option', {
-          'fwe-empty': !option.label
-        }),
+        empty: !option.label,
         onKeyDown: e => handleListKeyDown(e, option, i),
-        tabIndex: 0,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "fwe-select-option-content",
           children: option.label
@@ -209,80 +191,68 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           option,
           ...propsWithoutOption
         } = child.props;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
           ref: listItemRef.current[i],
-          role: "option",
           "aria-selected": option.label === selectedOptionLabel,
           onClick: () => handleOptionChange(option),
-          className: (0, _classnames.default)('fwe-select-option', {
-            'fwe-empty': !option.label
-          }),
+          empty: !option.label,
           onKeyDown: e => handleListKeyDown(e, option, i),
-          tabIndex: 0,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.SelectOption, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             ...propsWithoutOption
           })
         }, option.data);
       })]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
-    onOutsideClick: () => setOptionsWrapper({
-      action: '',
-      isFocused: false
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      ref: ref,
-      className: (0, _classnames.default)('fwe-select-wrapper', className),
-      ...props,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
-        defaultValue: defaultValue,
-        value: innerValue,
-        name: name,
-        id: id,
-        "aria-label": label,
-        disabled: disabled,
-        required: required,
-        children: usedOptions.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          value: option.data,
-          children: option.label
-        }, option.data))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        role: "button",
-        tabIndex: 0,
-        className: selectClassName,
-        onClick: e => handleClick(e),
-        ref: buttonEl,
-        onKeyDown: handleKeyPress,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fwe-select-content",
-          children: selectedOptionLabel
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        className: (0, _classnames.default)('fwe-select-label', {
-          'fwe-sr-only': config?.hideLabel
-        }),
-        htmlFor: id,
-        children: label || ''
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fwe-select-underline"
-      }), hint && !error && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fwe-select-description",
-        children: hint
-      }), error && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fwe-select-invalid",
-        children: [" ", error, " "]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-        className: `fwe-select-options-container${optionsWrapper.isFocused ? '' : ' fwe-d-none'}`,
-        children: scroll?.enabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fr-select-scroll",
-          style: {
-            height: calcVirtualScrollHeight(config, usedOptions.length)
-          },
-          children: renderOptions()
-        }) : renderOptions()
-      })]
-    })
+  (0, _useOnClickOutside.default)(innerRef, () => setOptionsWrapper({
+    action: '',
+    isFocused: false
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: combinedRef,
+    className: (0, _classnames.default)('fwe-select-wrapper', className),
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      className: "fr-select-input",
+      "aria-hidden": true,
+      tabIndex: -1,
+      value: innerValue,
+      onChange: e => handleChange(e)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "button",
+      tabIndex: 0,
+      className: selectClassName,
+      onClick: e => handleClick(e),
+      ref: buttonEl,
+      onKeyDown: handleKeyPress,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-select-content",
+        children: selectedOptionLabel
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      className: (0, _classnames.default)('fwe-select-label', {
+        'fwe-sr-only': config?.hideLabel
+      }),
+      htmlFor: id,
+      children: label || ''
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-select-underline"
+    }), hint && !error && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-select-description",
+      children: hint
+    }), error && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-select-invalid",
+      children: [" ", error, " "]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      className: `fwe-select-options-container${optionsWrapper.isFocused ? '' : ' fwe-d-none'}`,
+      children: scroll?.enabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fr-select-scroll",
+        style: {
+          height: (0, _utils.default)(config, usedOptions.length)
+        },
+        children: renderOptions()
+      }) : renderOptions()
+    })]
   });
 });
 var _default = Select;

package/node/lib/forms/select/list-item/ListItem.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    "aria-selected": ariaSelected,
+    empty,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    ref: ref,
+    role: "option",
+    "aria-selected": ariaSelected,
+    className: (0, _classnames.default)('fwe-select-option', {
+      'fwe-empty': empty
+    }, className),
+    tabIndex: 0,
+    ...props,
+    children: children
+  });
+});
+var _default = ListItem;
+exports.default = _default;

package/node/lib/forms/select/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = calcVirtualScrollHeight;
+function calcVirtualScrollHeight(config, itemLength) {
+  const defaultHeight = 48;
+  let height = defaultHeight;
+  if (itemLength === 2) {
+    height = defaultHeight * 2;
+  } else if (itemLength >= 3) {
+    height = defaultHeight * 3;
+  }
+  if (config?.scroll?.viewportSize != null && config.scroll.viewportSize !== undefined) {
+    if (itemLength >= config.scroll.viewportSize) {
+      height = config.scroll.viewportSize * defaultHeight;
+    } else if (itemLength < config.scroll.viewportSize) {
+      height = itemLength * defaultHeight;
+    }
+  }
+  return height;
+}

package/node/lib/helper/useId.js

@@ -16,12 +16,13 @@ function useLegacyId() {
       nextId += 1;
       setId(`fr-${nextId}`);
     }
-  }, [setId]);
+  }, [id]);
   return id;
 }
 function useId(idInput) {
   if (idInput !== undefined && idInput !== null) {
     return idInput;
   }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   return maybeReactUseId ? maybeReactUseId() : useLegacyId();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "5.0.0-dev.105",
+  "version": "5.0.0-dev.106",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "peerDependencies": {