@olenbetong/synergi-react 1.0.6 → 2.1.0

package/dist/styles/styles.css

@@ -1 +1 @@
-.ObCheckbox-root{--check-width: 2rem;--bg-color: var(--brand-dark, rgba(42, 65, 50, 0.5));--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, 0.8));--bg-color-selected: var(--brand-light);display:inline-block;height:var(--check-width);margin-bottom:0}.ObCheckbox-root:focus-within .ObCheckbox-box{border:.1rem solid #000}.ObCheckbox-root.Ob-disabled{--bg-color: rgba(150, 150, 150, 0.5);--bg-color-hover: var(--bg-color)}.ObCheckbox-box{position:relative;background:var(--bg-color);transition:background 300ms ease;overflow:hidden;border-radius:calc(var(--check-width)/15);height:var(--check-width);width:var(--check-width)}.ObCheckbox-box:hover{background:var(--bg-color-hover)}.ObCheckbox-label{position:relative;margin-bottom:0;overflow:hidden}.ObCheckbox-label:focus{outline:none}.ObCheckbox-mark{color:#fff;display:inline-block;font-size:calc(var(--check-width)*.4);left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition:all 300ms ease-in-out;transition-delay:0ms;transform:translate(-50%, -50%) scale(6)}.ObCheckbox-input{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.ObCheckbox-input:focus{outline:none}.check_Label{margin-bottom:0;flex-grow:1}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label{animation:animOn 800ms 1 forwards}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{background:var(--bg-color-selected)}.ObCheckbox-input:checked+.ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark{transform:translate(-50%, -50%) scale(1);transition-delay:200ms;opacity:1}.ObCheckbox-root.Ob-disabled .ObCheckbox-box{cursor:not-allowed}@keyframes animOn{40%{transform:scaleY(0.4) scaleX(2)}50%{transform:scaleY(1.2) scaleX(0.6)}60%{transform:scaleY(0.8) scaleX(1.4)}70%{transform:scaleY(1.1) scaleX(0.9)}100%{transform:scaleY(1) scaleX(1)}}.ObColorCard-root{--bg-color-border: black;--bg-color-main: white;--bg-size: 0.75rem;--card-color: rgb(0, 0, 0);align-items:stretch;background-image:linear-gradient(to right, hsl(186, 72%, 24%), hsl(186, 72%, 24%) 0.75rem, white 0.75rem, white);background-image:linear-gradient(to right, var(--bg-color-border), var(--bg-color-border) var(--bg-size), var(--bg-color-main) var(--bg-size), var(--bg-color-main));border-radius:.25rem;box-shadow:0 1px 12px rgba(0,0,0,.15),0 1px 6px rgba(0,0,0,.25);color:#666;cursor:pointer;display:flex;font-family:"Variable Bahnschrift","Bahnschrift","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;min-height:10rem;overflow:hidden;transition:all ease-in-out 300ms}.ObColorCard-root:nth-of-type(5n + 1){--bg-color-border: rgb(178, 108, 190)}.ObColorCard-root:nth-of-type(5n + 2){--bg-color-border: rgb(79, 164, 61)}.ObColorCard-root:nth-of-type(5n + 3){--bg-color-border: rgb(246, 170, 23)}.ObColorCard-root:nth-of-type(5n + 4){--bg-color-border: rgb(218, 93, 83)}.ObColorCard-root:nth-of-type(5n + 5){--bg-color-border: rgb(23, 162, 184)}.ObColorCard-root:hover,.ObColorCard-root:focus{--bg-color-main: #f5f5f5;box-shadow:0 3px 18px rgba(0,0,0,.15),0 3px 12px rgba(0,0,0,.25);color:#666;text-decoration:none}@media screen and (min-width: 48rem){.ObColorCard-root{font-size:1.2rem}}.ObColorCard-column{display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;margin:1rem 0;overflow:hidden;padding:.5rem 1.5rem .5rem 1rem;text-overflow:ellipsis}.ObColorCard-column:first-child{margin-left:.75rem;margin-left:var(--bg-size)}.ObColorCard-column.ObColorCard-minor{border-right:1px solid #e3e3e3;flex:0 0 4rem;transition:margin ease-in-out 300ms}@media screen and (min-width: 48rem){.ObColorCard-column.ObColorCard-minor{flex:0 0 8rem}}.ObColorCard-detailLabel{color:#ccc;font-size:.8rem;text-transform:uppercase}.ObColorCard-detail:not(:last-child){margin-right:1.5rem}.ObColorCard-detail.ObColorCard-primary,.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue{font-size:1.25rem;font-weight:300}.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue{color:unset}@media screen and (min-width: 48rem){.ObColorCard-detail{font-size:1rem}}.ObColorCard-detailValue{color:#999}.ObColorCard-label{position:relative;padding-left:1.5rem}.ObColorCard-label:not(:last-child){margin-bottom:1rem}.ObColorCard-label:not(:last-child)::after{content:"";position:absolute;width:.2rem;height:calc(100% + 1rem);border-left:.2rem dotted #666;left:.25rem;top:.5rem;z-index:0}.ObColorCard-label::before{background:#fff;border:.2rem solid hsl(186,72%,24%);border:.2rem solid var(--bg-color-border);border-radius:50%;content:"";display:block;height:.75rem;left:0;position:absolute;top:.3rem;width:.75rem;z-index:1}.ObDateNavigator-icon{display:inline-block}.ObDateNavigator-icon svg{width:.625em;position:relative;top:-1px}.ObDateNavigator-root{background-color:hsl(220,20%,96%);background-color:var(--block-header-color-bg);display:flex;font-size:1rem}.ObDateNavigator-arrow{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:button;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;align-items:center;flex:0 0 3rem;justify-content:center;height:3rem;cursor:pointer;text-align:center}.ObDateNavigator-arrow::-moz-focus-inner{border:0;padding:0}.ObDateNavigator-arrow:hover{background-color:#e3e3e3;background-color:var(--block-header-button-hover)}.ObDateNavigator-arrowLeft{border-right:1px solid #ddd;order:1}.ObDateNavigator-arrowRight{border-left:1px solid #ddd;order:3}.ObDateNavigator-date{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;order:2;height:3rem;text-align:center}.ObLinkedList-root{list-style-type:none;margin-left:0;padding-left:0}.ObLinkedList-item{display:flex;align-items:center;flex-direction:row}.ObLinkedList-leftColumn{flex:1 1 4em;font-size:.75em;padding:0 1em;text-align:center}.ObLinkedList-rightColumn{flex:1 1 100%;padding:1em 1em 1em 1.5em}.ObLinkedList-line{display:flex;align-self:stretch;flex:0 0 .2em;background:#fff;position:relative}.ObLinkedList-bullet{background:#fff;border:1px solid rgba(50,50,50,.25);border-radius:.55em;height:.7em;width:.7em;position:absolute;left:0;top:50%;transform:translate(-0.25em, -50%)}.ObLinkedList-card{background:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;border-radius:.1875em;color:inherit;cursor:pointer;flex:100% 1 1;position:relative}.ObLinkedList-card::before{border-bottom:.5em solid rgba(0,0,0,0);border-right:1em solid #fff;border-top:.5em solid rgba(0,0,0,0);content:" ";filter:drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));height:1em;left:-1em;margin-top:-0.5em;position:absolute;top:50%;width:1em}.ObLinkedList-card:hover{background-color:hsl(220,20%,94%) !important;color:inherit;text-decoration:inherit}.ObLinkedList-card:hover::before{border-right-color:hsl(220,20%,94%) !important}.ObPageBanner-root{background-color:hsl(186,72%,24%);background-color:var(--brand-dark);box-shadow:0px 8px 8px rgba(0,0,0,.2);color:#fff}.ObPageBanner-root a{color:hsl(200,50%,80%)}.ObPageBanner-inner{display:flex;align-items:center;flex-direction:column}@media screen and (min-width: 768px){.ObPageBanner-inner{align-items:flex-start;flex-direction:row}}.ObPageBanner-plantTitle{font-size:2rem}@media screen and (min-width: 992px){.ObPageBanner-plantTitle{font-size:3rem}}.ObPageBanner-bannerImage{align-self:stretch;background-color:#ddd;display:inline-block;height:20vh;object-fit:cover;object-position:center center;width:100%}@media screen and (min-width: 576px){.ObPageBanner-bannerImage{align-self:center;margin:0;margin-right:1rem;border:.4rem solid #fff;border-radius:50%;height:150px;width:150px}}@media screen and (min-width: 992px){.ObPageBanner-bannerImage{height:250px;width:250px}}.ObPageBanner-bannerTitle{margin-bottom:1rem;margin-top:1rem;font-size:2rem}@media screen and (min-width: 768px){.ObPageBanner-bannerTitle{margin-top:0}}@media screen and (min-width: 992px){.ObPageBanner-bannerTitle{font-size:3rem}}.ObPageBanner-tabList.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1000}.ObPageBanner-tabListInner{overflow-x:auto;scrollbar-width:thin;white-space:nowrap}.ObPageBanner-tab{border-bottom:.25rem solid rgba(0,0,0,0);display:inline-block;margin-top:.5rem;min-width:8rem;padding:.5rem 1rem;text-align:center;text-transform:capitalize}.ObPageBanner-tab.active{border-color:#fff}.ObProgressBar-root{height:1.5em;width:100%;appearance:none;-webkit-appearance:none;background-color:#f5f5f5;border:none;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset;color:#4169e1;position:relative}.ObProgressBar-root::-webkit-progress-bar{background-color:#f5f5f5;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset}.ObProgressBar-root::-webkit-progress-value{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary, hsl(186, 72%, 24%)), var(--brand-light, hsl(186, 72%, 37%)));background-image:-webkit-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-webkit-linear-gradient(left, var(--brand-primary), hsl(186, 72%, 24%), var(--brand-light, hsl(186, 72%, 37%)));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;position:relative;transition:width .5s ease-out}.ObProgressBar-root::-webkit-progress-value:after{background-color:#fff;content:"";border-radius:100%;height:5px;position:absolute;right:7px;top:7px;width:5px}.ObProgressBar-root::-moz-progress-bar{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary), var(--brand-light));background-image:-moz-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-moz-linear-gradient(left, var(--brand-primary), var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;transition:width .5s ease-out}.ObSidebar-root{position:fixed;bottom:0;left:0;top:0;z-index:2;background-color:#fff;transform:translateX(-100%);transition:transform .2s ease-out;will-change:transform;overflow-y:auto}.ObSidebar-root.Ob-right{left:unset;right:0;transform:translateX(100%)}.ObSidebar-root.Ob-open{transform:translateX(0)}.ObSidebar-root.ObSidebar-shadow{box-shadow:2px 2px 4px rgba(0,0,0,.15)}.ObSidebar-root.ObSidebar-shadow.Ob-right{box-shadow:-2px 2px 4px rgba(0,0,0,.15)}.ObSidebar-overlay{position:fixed;bottom:0;left:0;right:0;top:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility .3s ease-out;background-color:rgba(0,0,0,.3)}.ObSidebar-overlay.Ob-open{opacity:1;visibility:visible}.😖{display:initial}.ObSplitContainer-root{display:flex;flex-direction:column;height:100%;width:100%}.ObSplitContainer-root.horizontal{flex-direction:row}.ObSplitContainer-panel{overflow:hidden}.ObSplitContainer-divider{flex:0 0 .5rem;background-color:rgba(0,0,0,0);line-height:.75;cursor:ns-resize;display:flex;align-items:center;justify-content:center}.ObSplitContainer-divider:focus{background-color:rgba(0,0,0,.3)}.ObSplitContainer-root.horizontal>.ObSplitContainer-divider{cursor:ew-resize;writing-mode:vertical-lr}.ObSplitContainer-panel.dragging{pointer-events:none}.ObValueToggle-root{display:flex;align-items:center}.ObValueToggle-option{margin-bottom:0}.ObValueToggle-label{cursor:pointer;font-size:.8em;margin:0 .2em;padding:.3em .5em;text-transform:uppercase}.ObValueToggle-label:hover{background:#ccc}.ObValueToggle-input:checked+.ObValueToggle-label{--color-bg: var(--brand-dark);background-color:#666;background-color:var(--color-bg);cursor:default;color:#fff}.ObValueToggle-input:checked:focus-within+.ObValueToggle-label{--color-bg: var(--brand-light)}.ObValueToggle-input:checked:hover+.ObValueToggle-label{background-color:#666;background-color:var(--color-bg)}.ObValueToggle-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}/*# sourceMappingURL=styles.css.map */
+.ObCheckbox-root{--check-width: 2rem;--bg-color: var(--brand-dark, rgba(42, 65, 50, 0.5));--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, 0.8));--bg-color-selected: var(--brand-light);display:inline-block;height:var(--check-width);margin-bottom:0}.ObCheckbox-root:focus-within .ObCheckbox-box{border:.1rem solid #000}.ObCheckbox-root.Ob-disabled{--bg-color: rgba(150, 150, 150, 0.5);--bg-color-hover: var(--bg-color)}.ObCheckbox-box{position:relative;background:var(--bg-color);transition:background 300ms ease;overflow:hidden;border-radius:calc(var(--check-width)/15);height:var(--check-width);width:var(--check-width)}.ObCheckbox-box:hover{background:var(--bg-color-hover)}.ObCheckbox-label{position:relative;margin-bottom:0;overflow:hidden}.ObCheckbox-label:focus{outline:none}.ObCheckbox-mark{color:#fff;display:inline-block;font-size:calc(var(--check-width)*.4);left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition:all 300ms ease-in-out;transition-delay:0ms;transform:translate(-50%, -50%) scale(6)}.ObCheckbox-input{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.ObCheckbox-input:focus{outline:none}.ObCheckbox-label{display:flex;gap:.5rem;align-items:center;overflow:visible}.ObCheckbox-root.Ob-reverse .ObCheckbox-label{flex-direction:row-reverse}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{animation:animOn 600ms 1 forwards}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{background:var(--bg-color-selected)}.ObCheckbox-input:checked+.ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark{transform:translate(-50%, -50%) scale(1);transition-delay:200ms;opacity:1}.ObCheckbox-root.Ob-disabled .ObCheckbox-box{cursor:not-allowed}@keyframes animOn{40%{transform:scaleY(0.4) scaleX(2)}50%{transform:scaleY(1.2) scaleX(0.6)}60%{transform:scaleY(0.8) scaleX(1.4)}70%{transform:scaleY(1.1) scaleX(0.9)}100%{transform:scaleY(1) scaleX(1)}}.ObColorCard-root{--bg-color-border: black;--bg-color-main: white;--bg-size: 0.75rem;--card-color: rgb(0, 0, 0);display:flex;align-items:stretch;min-height:10rem;overflow:hidden;border-radius:.25rem;box-shadow:0 1px 12px rgba(0, 0, 0, 0.15),0 1px 6px rgba(0, 0, 0, 0.25);color:#666;background-image:linear-gradient(to right, var(--bg-color-border), var(--bg-color-border) var(--bg-size), var(--bg-color-main) var(--bg-size), var(--bg-color-main));font-family:"Variable Bahnschrift","Bahnschrift","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;transition:all ease-in-out 300ms;cursor:pointer;&:nth-of-type(5n + 1){--bg-color-border: rgb(178, 108, 190)}&:nth-of-type(5n + 2){--bg-color-border: rgb(79, 164, 61)}&:nth-of-type(5n + 3){--bg-color-border: rgb(246, 170, 23)}&:nth-of-type(5n + 4){--bg-color-border: rgb(218, 93, 83)}&:nth-of-type(5n + 5){--bg-color-border: rgb(23, 162, 184)}&:hover,&:focus{--bg-color-main: #f5f5f5;box-shadow:0 3px 18px rgba(0, 0, 0, 0.15),0 3px 12px rgba(0, 0, 0, 0.25);text-decoration:none}}@media screen and (min-width: 48rem){.ObColorCard-root{font-size:1.2rem}}.ObColorCard-column{display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;margin:1rem 0;padding:.5rem 1.5rem .5rem 1rem;overflow:hidden;text-overflow:ellipsis;&:first-child{margin-left:var(--bg-size, 0.75rem)}&.ObColorCard-minor{flex:0 0 4rem;border-right:1px solid #e3e3e3;transition:margin ease-in-out 300ms}}@media screen and (min-width: 48rem){&.ObColorCard-minor{flex:0 0 8rem}}.ObColorCard-detailLabel{color:dimgray;font-size:.8rem;text-transform:uppercase}.ObColorCard-detail{&:not(:last-child){margin-right:1.5rem}&.ObColorCard-primary,&.ObColorCard-primary .ObColorCard-detailValue{font-size:1.25rem;font-weight:300}&.ObColorCard-primary .ObColorCard-detailValue{color:unset}}@media screen and (min-width: 48rem){.ObColorCard-detail{font-size:1rem}}.ObColorCard-detailValue{color:#555}.ObColorCard-stepList{display:flex;flex-direction:column;gap:1rem}.ObColorCard-step{position:relative;text-box-trim:trim-both;display:flex;align-items:flex-start;gap:.5rem}.ObColorCard-step::before{flex:.6em 0 0;content:"";position:relative;top:.25em;width:.6em;height:.6em;background:white;border:2px solid var(--bg-color-border, #999);border-radius:50%;box-sizing:border-box;z-index:1}.ObColorCard-step:not(:last-child)::after{content:"";position:absolute;top:1em;left:calc(.3em - 1px);height:calc(100% - .95em + 1rem + .0625em);border-left:2px dotted #999;z-index:0}:root{--ob-datenavigator-height: 3rem}.ObDateNavigator-icon{display:inline-block;svg{width:.625em;position:relative;top:-1px}}.ObDateNavigator-root{background-color:hsl(220, 20%, 96%);background-color:var(--block-header-color-bg);display:flex;font-size:1rem;outline:none;&:focus-visible{outline:2px solid var(--brand-dark, #336699);outline-offset:2px}}.ObDateNavigator-arrow{display:flex;align-items:center;flex:0 0 var(--ob-datenavigator-height);justify-content:center;height:var(--ob-datenavigator-height);cursor:pointer;text-align:center;&:hover:not(:disabled){background-color:#e3e3e3;background-color:var(--block-header-button-hover)}&:disabled{cursor:not-allowed;color:rgba(0 0 0/0.2)}}.ObDateNavigator-arrowLeft{border-right:1px solid #ddd;order:1}.ObDateNavigator-arrowRight{border-left:1px solid #ddd;order:3}.ObDateNavigator-date{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;order:2;height:var(--ob-datenavigator-height);text-align:center}.ObDateNavigator-today{order:4;padding:0 1rem;height:var(--ob-datenavigator-height);display:flex;align-items:center;justify-content:center;font-size:.875rem;color:var(--brand-dark, #336699);text-transform:uppercase;cursor:pointer;text-wrap:nowrap;border-left:1px solid #ddd;&:hover:not(:disabled){background-color:var(--block-header-button-hover)}&:focus-visible{outline:2px solid var(--brand-dark, #336699);outline-offset:2px}}:root{--ob-linked-list-bullet-size: 0.7em;--ob-linked-list-line-width: 0.2em}.ObLinkedList-root{list-style-type:none;margin-left:0;padding-left:0}.ObLinkedList-item{display:flex;align-items:center;flex-direction:row}.ObLinkedList-leftColumn{flex:1 1 4em;font-size:.75em;padding:0 1em;text-align:center}.ObLinkedList-rightColumn{flex:1 1 100%;padding:1em 1em 1em 1.5em}.ObLinkedList-line{display:flex;align-self:stretch;flex:0 0 .2em;background:#fff;position:relative}.ObLinkedList-bullet{background:#fff;border:1px solid rgba(50,50,50,.25);border-radius:.55em;height:.7em;width:.7em;position:absolute;left:0;top:50%;transform:translate(calc(-1 * var(--ob-linked-list-bullet-size) / 2 + var(--ob-linked-list-line-width) / 2), -50%)}.ObLinkedList-card{display:block;background:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;border-radius:.1875em;color:inherit;cursor:pointer;flex:100% 1 1;position:relative}.ObLinkedList-card::before{border-bottom:.5em solid rgba(0,0,0,0);border-right:1em solid #fff;border-top:.5em solid rgba(0,0,0,0);content:" ";filter:drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));height:1em;left:-1em;margin-top:-0.5em;position:absolute;top:50%;width:1em}.ObLinkedList-card:hover{background-color:hsl(220,20%,94%) !important;color:inherit;text-decoration:inherit}.ObLinkedList-card:hover::before{border-right-color:hsl(220,20%,94%) !important}.ObPageBanner-root{background-color:hsl(186,72%,24%);background-color:var(--brand-dark);box-shadow:0px 8px 8px rgba(0,0,0,.2);color:#fff}.ObPageBanner-root a{color:hsl(200,50%,80%)}.ObPageBanner-inner{display:flex;align-items:center;flex-direction:column}@media screen and (min-width: 768px){.ObPageBanner-inner{align-items:flex-start;flex-direction:row}}.ObPageBanner-plantTitle{font-size:2rem}@media screen and (min-width: 992px){.ObPageBanner-plantTitle{font-size:3rem}}.ObPageBanner-bannerImage{align-self:stretch;background-color:#ddd;display:inline-block;height:20vh;object-fit:cover;object-position:center center;width:100%}@media screen and (min-width: 576px){.ObPageBanner-bannerImage{align-self:center;margin:0;margin-right:1rem;border:.4rem solid #fff;border-radius:50%;height:150px;width:150px}}@media screen and (min-width: 992px){.ObPageBanner-bannerImage{height:250px;width:250px}}.ObPageBanner-bannerTitle{margin-bottom:1rem;margin-top:1rem;font-size:2rem}@media screen and (min-width: 768px){.ObPageBanner-bannerTitle{margin-top:0}}@media screen and (min-width: 992px){.ObPageBanner-bannerTitle{font-size:3rem}}.ObPageBanner-tabList.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1000}.ObPageBanner-tabListInner{overflow-x:auto;scrollbar-width:thin;white-space:nowrap}.ObPageBanner-tab{border-bottom:.25rem solid rgba(0,0,0,0);display:inline-block;margin-top:.5rem;min-width:8rem;padding:.5rem 1rem;text-align:center;text-transform:capitalize}.ObPageBanner-tab.active{border-color:#fff}.ObProgressBar-root{height:1.5em;width:100%;appearance:none;-webkit-appearance:none;background-color:#f5f5f5;border:none;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset;color:#4169e1;position:relative}.ObProgressBar-root::-webkit-progress-bar{background-color:#f5f5f5;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset}.ObProgressBar-root::-webkit-progress-value{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary), var(--brand-light));background-image:-webkit-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-webkit-linear-gradient(left, var(--brand-primary), var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;position:relative;transition:width .5s ease-out}.ObProgressBar-root::-webkit-progress-value:after{background-color:#fff;content:"";border-radius:100%;height:5px;position:absolute;right:7px;top:7px;width:5px}.ObProgressBar-root::-moz-progress-bar{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary), var(--brand-light));background-image:-moz-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-moz-linear-gradient(left, var(--brand-primary), var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;transition:width .5s ease-out}.ObSidebar-root{position:fixed;bottom:0;left:0;top:0;z-index:2;background-color:#fff;transform:translateX(-100%);transition:transform .2s ease-out;will-change:transform;overflow-y:auto}.ObSidebar-root.Ob-right{left:unset;right:0;transform:translateX(100%)}.ObSidebar-root.Ob-open{transform:translateX(0)}.ObSidebar-root.ObSidebar-shadow{box-shadow:2px 2px 4px rgba(0,0,0,.15)}.ObSidebar-root.ObSidebar-shadow.Ob-right{box-shadow:-2px 2px 4px rgba(0,0,0,.15)}.ObSidebar-overlay{position:fixed;bottom:0;left:0;right:0;top:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility .3s ease-out;background-color:rgba(0,0,0,.3)}.ObSidebar-overlay.Ob-open{opacity:1;visibility:visible}.ObSpinner-wrapper,.ObSpinner-fullPage{--bullet-size: 0.5em}.ObSpinner-root{display:inline-block}.ObSpinner-fullPage{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw}.ObSpinner-spinner{display:inline-block;height:calc(var(--bullet-size)*1.5);position:relative;width:calc(var(--bullet-size)*5)}.ObSpinner-bullet{animation-timing-function:cubic-bezier(0, 1, 1, 0);background:#666;border-radius:50%;height:var(--bullet-size);position:absolute;top:.2rem;width:var(--bullet-size);&:nth-child(1){animation:scaleAnimation .6s infinite ease-in-out;left:calc(var(--bullet-size)*.5)}&:nth-child(2){animation:translateAnimation .6s infinite ease-in-out;left:calc(var(--bullet-size)*.5)}&:nth-child(3){animation:translateAnimation .6s infinite ease-in-out;left:calc(var(--bullet-size)*2.4)}&:nth-child(4){animation:scaleAnimation .6s infinite ease-in-out reverse;left:calc(var(--bullet-size)*4)}}@keyframes scaleAnimation{from{transform:scale(0)}to{transform:scale(1)}}@keyframes translateAnimation{from{transform:translate(0, 0)}to{transform:translate(calc(var(--bullet-size) * 1.65), 0)}}.😖{display:initial}.ObSplitContainer-root{display:flex;flex-direction:column;height:100%;width:100%}.ObSplitContainer-root.horizontal{flex-direction:row}.ObSplitContainer-panel{overflow:hidden}.ObSplitContainer-divider{flex:0 0 .5rem;background-color:rgba(0,0,0,0);line-height:.75;cursor:ns-resize;display:flex;align-items:center;justify-content:center}.ObSplitContainer-divider:focus{background-color:rgba(0,0,0,.3)}.ObSplitContainer-root.horizontal>.ObSplitContainer-divider{cursor:ew-resize;writing-mode:vertical-lr}.ObSplitContainer-panel.dragging{pointer-events:none}.ObValueToggleGroup{padding:.25rem;border:2px solid rgb(0 0 0/0.2);border-radius:4px;display:flex;gap:.25rem;flex-wrap:wrap;&.vertical{flex-direction:column;align-items:center;& .ObValueToggleOption{width:100%;& .ObValueToggleLabel{width:100%;text-align:center}}}&:focus-within{border-color:rgb(0 0 0/0.8)}}.ObValueToggleOption{display:flex;align-items:center;margin:0;position:relative}.ObValueToggleOption input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.ObValueToggleLabel{font-size:.8em;margin:0 .2em;padding:.3em .5em;text-transform:uppercase;transition:background .2s ease,color .2s ease;border-radius:4px}.ObValueToggleOption:hover input:not(:disabled)+.ObValueToggleLabel{cursor:pointer;background:#ccc}.ObValueToggleOption input:checked+.ObValueToggleLabel{--color-bg: var(--brand-dark);background-color:var(--color-bg);color:white;cursor:default}.ObValueToggleOption input:disabled+.ObValueToggleLabel{color:rgb(0 0 0/0.5)}.ObValueToggleOption input:checked:focus-visible+.ObValueToggleLabel{--color-bg: var(--brand-light);outline:2px solid var(--brand-light)}.ObValueToggleOption input:checked:hover+.ObValueToggleLabel{background-color:var(--color-bg)}/*# sourceMappingURL=styles.css.map */

package/dist/styles/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/Checkbox/index.scss","../../src/ColorCard/index.scss","../../src/DateNavigator/index.scss","../../src/styles/_mixins.scss","../../src/LinkedCardList/index.scss","../../src/PageBanner/index.scss","../../src/styles/_variables.scss","../../src/ProgressBar/index.scss","../../src/Sidebar/index.scss","../../src/SplitContainer/index.scss","../../src/ValueToggle/index.scss"],"names":[],"mappings":"CAAA,iBACC,oBACA,qDACA,8DACA,wCAEA,qBACA,0BACA,gBAEA,8CACC,wBAGD,6BACC,qCACA,kCAIF,gBACC,kBAEA,2BACA,iCAEA,gBAEA,0CACA,0BACA,yBAEA,sBACC,iCAIF,kBACC,kBACA,gBACA,gBAEA,wBACC,aAIF,iBACC,WACA,qBACA,sCACA,SACA,UACA,oBACA,kBACA,QACA,iCACA,qBACA,yCAGD,kBACC,mBACA,qBACA,WACA,gBACA,kBACA,mBACA,UAEA,wBACC,aAIF,aACC,gBACA,YAGD,2DACC,kCAGD,2EACC,oCAGD,6EACC,yCACA,uBACA,UAGD,6CACC,mBAGD,kBACC,IACC,gCAGD,IACC,kCAGD,IACC,kCAGD,IACC,kCAGD,KACC,+BClHF,kBACC,yBACA,uBACA,mBACA,2BAEA,oBACA,iHACA,qKAOA,qBACA,WACC,qDAED,WACA,eACA,aACA,YACC,6LAaD,eACA,iBACA,gBACA,iCAEA,sCACC,sCAED,sCACC,oCAED,sCACC,qCAED,sCACC,oCAED,sCACC,qCAGD,gDAGC,yBAEA,WACC,sDAED,WACA,qBAID,qCAtED,kBAuEE,kBAIF,oBACC,aACA,cACA,sBACA,8BACA,cACA,gBACA,gCACA,uBAEA,gCACC,mBACA,2BAGD,sCACC,+BACA,cACA,oCAGD,qCACC,sCACC,eAKH,yBACC,WACA,gBACA,yBAIA,qCACC,oBAGD,yGAEC,kBACA,gBAGD,iEACC,YAGD,qCAfD,oBAgBE,gBAIF,yBACC,WAGD,mBACC,kBACA,oBAGA,oCACC,mBAEA,2CACC,WACA,kBACA,YACA,yBACA,8BACA,YACA,UACA,UAIF,2BACC,gBACA,oCACA,0CACA,kBACA,WACA,cACA,cACA,OACA,kBACA,UACA,aACA,UCnKF,sBACC,qBAEA,0BACC,aACA,kBACA,SAIF,sBACC,kCACA,8CACA,aACA,eAGD,uBCpBC,gBACA,SACA,cAEA,aACA,mBACA,iBACA,UACA,0BACA,yBACA,sBACA,qBDWA,aACA,mBACA,cACA,uBAEA,OA1BoB,KA4BpB,eACA,kBCjBA,yCACC,SACA,UDiBD,6BACC,yBACA,kDAIF,2BACC,4BACA,QAGD,4BACC,2BACA,QAGD,sBACC,aACA,cACA,sBACA,uBACA,QAEA,OAtDoB,KAwDpB,kBErDD,mBACC,qBACA,cACA,eAGD,mBACC,aACA,mBACA,mBAGD,yBACC,aACA,gBACA,cACA,kBAGD,0BACC,cACA,0BAGD,mBACC,aACA,mBACA,cACA,gBACA,kBAGD,qBACC,gBAEA,oCACA,oBACA,OAxCa,KAyCb,MAzCa,KA2Cb,kBACA,OACA,QAEA,mCAGD,mBACC,gBACA,iBACA,qCACA,sBACA,cACA,eACA,cACA,kBAGD,2BACC,uCACA,4BACA,oCACA,YACA,uDACA,WACA,UACA,kBACA,kBACA,QACA,UAGD,yBACC,6CACA,cACA,wBAGD,iCACC,+CClFD,mBACC,iBCHe,iBDIf,mCACA,sCACA,WAEA,qBACC,uBAIF,oBACC,aACA,mBACA,sBAEA,qCALD,oBAME,uBACA,oBAIF,yBACC,eAEA,qCAHD,yBAIE,gBAIF,0BACC,mBACA,sBACA,qBACA,YACA,iBACA,8BACA,WAEA,qCATD,0BAUE,kBACA,SACA,kBACA,wBACA,kBACA,aACA,aAGD,qCAnBD,0BAoBE,aACA,aAIF,0BACC,mBACA,gBACA,eAEA,qCALD,0BAME,cAGD,qCATD,0BAUE,gBAKD,6BACC,wBACA,gBACA,MACA,aAIF,2BACC,gBACA,qBACA,mBAGD,kBACC,yCACA,qBACA,iBACA,eACA,mBACA,kBACA,0BAEA,yBACC,kBE9FF,oBACC,aACA,WACA,gBACA,wBACA,yBACA,YACA,kBACA,0CACA,cACA,kBAEA,0CACC,yBACA,kBACA,0CAGD,4CACC,oTAUA,iBACC,2TAUD,gBACC,8BAGD,kBACA,kBACA,8BAGD,kDACC,sBACA,WAEA,mBACA,WAEA,kBACA,UACA,QACA,UAGD,uCACC,4QAUA,iBACC,0QAUD,gBACC,8BAGD,kBACA,8BC3FF,gBACC,eACA,SACA,OACA,MACA,UAEA,sBAEA,4BACA,kCACA,sBAQA,gBANA,yBACC,WACA,QACA,2BAKD,wBACC,wBAGD,iCACC,uCAEA,0CACC,wCAKH,mBACC,eACA,SACA,OACA,QACA,MACA,UAEA,UACA,kBAEA,WACC,6CAED,gCAEA,2BACC,UACA,mBCjDF,IACC,gBAGD,uBACC,aACA,sBACA,YACA,WAEA,kCACC,mBAIF,wBACC,gBAGD,0BACC,eACA,+BACA,gBACA,iBAEA,aACA,mBACA,uBAEA,gCACC,gCAGD,4DACC,iBACA,yBAIF,iCACC,oBCzCD,oBACC,aACA,mBAGD,sBACC,gBAGD,qBACC,eACA,eACA,cACA,kBACA,yBAEA,2BACC,gBAGD,kDACC,8BACA,sBACA,iCACA,eACA,WAGD,+DACC,+BAGD,wDACC,sBACA,iCAIF,qBACC,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/Checkbox/index.scss","../../src/ColorCard/index.css","../../src/DateNavigator/index.css","../../src/LinkedCardList/index.scss","../../src/PageBanner/index.scss","../../src/styles/_variables.scss","../../src/ProgressBar/index.scss","../../src/Sidebar/index.scss","../../src/Spinner/index.css","../../src/SplitContainer/index.scss","../../src/ValueToggleGroup/index.css"],"names":[],"mappings":"CAAA,iBACC,oBACA,qDACA,8DACA,wCAEA,qBACA,0BACA,gBAEA,8CACC,wBAGD,6BACC,qCACA,kCAIF,gBACC,kBAEA,2BACA,iCAEA,gBAEA,0CACA,0BACA,yBAEA,sBACC,iCAIF,kBACC,kBACA,gBACA,gBAEA,wBACC,aAIF,iBACC,WACA,qBACA,sCACA,SACA,UACA,oBACA,kBACA,QACA,iCACA,qBACA,yCAGD,kBACC,mBACA,qBACA,WACA,gBACA,kBACA,mBACA,UAEA,wBACC,aAIF,kBACC,aACA,UACA,mBAEA,iBAGD,8CACC,2BAGD,2EACC,kCAGD,2EACC,oCAGD,6EACC,yCACA,uBACA,UAGD,6CACC,mBAGD,kBACC,IACC,gCAGD,IACC,kCAGD,IACC,kCAGD,IACC,kCAGD,KACC,+BC3HF,kBACC,yBACA,uBACA,mBACA,2BAEA,aACA,oBACA,iBACA,gBACA,qBACA,wEACA,WACA,qKAOA,YACC,6LAaD,eACA,iCACA,eAEA,sBACC,sCAED,sBACC,oCAED,sBACC,qCAED,sBACC,oCAED,sBACC,qCAGD,gBAEC,yBACA,yEACA,sBAGD,qCA7DD,kBA8DE,kBAIF,oBACC,aACA,cACA,sBACA,8BACA,cACA,gCACA,gBACA,uBAEA,cACC,oCAGD,oBACC,cACA,+BACA,qCAEA,qCALD,oBAME,eAKH,yBACC,cACA,gBACA,yBAGD,oBACC,mBACC,oBAGD,qEAEC,kBACA,gBAGD,+CACC,aAGD,qCAfD,oBAgBE,gBAIF,yBACC,WAGD,sBACC,aACA,sBACA,SAGD,kBACC,kBACA,wBAEA,aACA,uBACA,UAGD,0BACC,cACA,WAEA,kBACA,UAEA,WACA,YACA,iBACA,8CACA,kBACA,sBACA,UAGD,0CACC,WACA,kBACA,QACA,sBACA,2CACA,4BACA,UC/JD,MACC,gCAGD,sBACC,qBAEA,IACC,aACA,kBACA,UAIF,sBACC,oCACA,8CACA,aACA,eACA,aAEA,gBACC,6CACA,oBAIF,uBACC,aACA,mBACA,wCACA,uBAEA,sCAEA,eACA,kBAEA,uBACC,yBACA,kDAGD,WACC,mBACA,uBAIF,2BACC,4BACA,QAGD,4BACC,2BACA,QAGD,sBACC,aACA,cACA,sBACA,uBACA,QAEA,sCAEA,kBAGD,uBACC,QACA,eACA,sCACA,aACA,mBACA,uBACA,kBACA,iCACA,yBACA,eAEA,iBAEA,2BAEA,uBACC,kDAGD,gBACC,6CACA,oBCxFF,MACC,oCACA,mCAGD,mBAEC,qBACA,cACA,eAGD,mBACC,aACA,mBACA,mBAGD,yBACC,aACA,gBACA,cACA,kBAGD,0BACC,cACA,0BAGD,mBACC,aACA,mBACA,cACA,gBACA,kBAGD,qBACC,gBAEA,oCACA,oBACA,OA9Ca,KA+Cb,MA/Ca,KAiDb,kBACA,OACA,QAEA,mHAGD,mBACC,cACA,gBACA,iBACA,qCACA,sBACA,cACA,eACA,cACA,kBAGD,2BACC,uCACA,4BACA,oCACA,YACA,uDACA,WACA,UACA,kBACA,kBACA,QACA,UAGD,yBACC,6CACA,cACA,wBAGD,iCACC,+CCzFD,mBACC,iBCHe,iBDIf,mCACA,sCACA,WAEA,qBACC,uBAIF,oBACC,aACA,mBACA,sBAEA,qCALD,oBAME,uBACA,oBAIF,yBACC,eAEA,qCAHD,yBAIE,gBAIF,0BACC,mBACA,sBACA,qBACA,YACA,iBACA,8BACA,WAEA,qCATD,0BAUE,kBACA,SACA,kBACA,wBACA,kBACA,aACA,aAGD,qCAnBD,0BAoBE,aACA,aAIF,0BACC,mBACA,gBACA,eAEA,qCALD,0BAME,cAGD,qCATD,0BAUE,gBAKD,6BACC,wBACA,gBACA,MACA,aAIF,2BACC,gBACA,qBACA,mBAGD,kBACC,yCACA,qBACA,iBACA,eACA,mBACA,kBACA,0BAEA,yBACC,kBE9FF,oBACC,aACA,WACA,gBACA,wBACA,yBACA,YACA,kBACA,0CACA,cACA,kBAEA,0CACC,yBACA,kBACA,0CAGD,4CACC,4QAUA,iBACC,mRAUD,gBACC,8BAGD,kBACA,kBACA,8BAGD,kDACC,sBACA,WAEA,mBACA,WAEA,kBACA,UACA,QACA,UAGD,uCACC,4QAUA,iBACC,0QAUD,gBACC,8BAGD,kBACA,8BC3FF,gBACC,eACA,SACA,OACA,MACA,UAEA,sBAEA,4BACA,kCACA,sBAQA,gBANA,yBACC,WACA,QACA,2BAKD,wBACC,wBAGD,iCACC,uCAEA,0CACC,wCAKH,mBACC,eACA,SACA,OACA,QACA,MACA,UAEA,UACA,kBAEA,WACC,6CAED,gCAEA,2BACC,UACA,mBCnDF,uCACC,qBAGD,gBACC,qBAGD,oBACC,aACA,mBACA,uBAEA,aACA,YAGD,mBACC,qBACA,oCACA,kBACA,iCAGD,kBACC,mDACA,gBACA,kBACA,0BACA,kBACA,UACA,yBAEA,eACC,kDACA,iCAGD,eACC,sDACA,iCAGD,eACC,sDACA,kCAGD,eACC,0DACA,iCAIF,0BACC,KACC,mBAGD,GACC,oBAIF,8BACC,KACC,0BAGD,GACC,yDCpEF,IACC,gBAGD,uBACC,aACA,sBACA,YACA,WAEA,kCACC,mBAIF,wBACC,gBAGD,0BACC,eACA,+BACA,gBACA,iBAEA,aACA,mBACA,uBAEA,gCACC,gCAGD,4DACC,iBACA,yBAIF,iCACC,oBC3CD,oBACC,eACA,gCACA,kBAEC,aACA,WACA,eAEA,WACE,sBACA,mBAEF,uBACC,WAEA,sBACC,WACA,oBAKF,eACE,6BAIJ,qBACE,aACA,mBACA,SACA,kBAGF,2BACE,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA,SAGF,oBACE,eACA,cACA,kBACA,yBACA,8CACA,kBAGF,oEACE,eACA,gBAGF,uDACE,8BACA,iCACA,YACA,eAGF,wDACE,qBAGF,qEACE,+BACA,qCAGF,6DACE","file":"styles.css"}

package/es/Checkbox/index.css

@@ -1 +1 @@
-.ObCheckbox-root{--check-width: 2rem;--bg-color: var(--brand-dark, rgba(42, 65, 50, 0.5));--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, 0.8));--bg-color-selected: var(--brand-light);display:inline-block;height:var(--check-width);margin-bottom:0}.ObCheckbox-root:focus-within .ObCheckbox-box{border:.1rem solid #000}.ObCheckbox-root.Ob-disabled{--bg-color: rgba(150, 150, 150, 0.5);--bg-color-hover: var(--bg-color)}.ObCheckbox-box{position:relative;background:var(--bg-color);transition:background 300ms ease;overflow:hidden;border-radius:calc(var(--check-width)/15);height:var(--check-width);width:var(--check-width)}.ObCheckbox-box:hover{background:var(--bg-color-hover)}.ObCheckbox-label{position:relative;margin-bottom:0;overflow:hidden}.ObCheckbox-label:focus{outline:none}.ObCheckbox-mark{color:#fff;display:inline-block;font-size:calc(var(--check-width)*.4);left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition:all 300ms ease-in-out;transition-delay:0ms;transform:translate(-50%, -50%) scale(6)}.ObCheckbox-input{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.ObCheckbox-input:focus{outline:none}.check_Label{margin-bottom:0;flex-grow:1}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label{animation:animOn 800ms 1 forwards}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{background:var(--bg-color-selected)}.ObCheckbox-input:checked+.ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark{transform:translate(-50%, -50%) scale(1);transition-delay:200ms;opacity:1}.ObCheckbox-root.Ob-disabled .ObCheckbox-box{cursor:not-allowed}@keyframes animOn{40%{transform:scaleY(0.4) scaleX(2)}50%{transform:scaleY(1.2) scaleX(0.6)}60%{transform:scaleY(0.8) scaleX(1.4)}70%{transform:scaleY(1.1) scaleX(0.9)}100%{transform:scaleY(1) scaleX(1)}}
+.ObCheckbox-root{--check-width: 2rem;--bg-color: var(--brand-dark, rgba(42, 65, 50, 0.5));--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, 0.8));--bg-color-selected: var(--brand-light);display:inline-block;height:var(--check-width);margin-bottom:0}.ObCheckbox-root:focus-within .ObCheckbox-box{border:.1rem solid #000}.ObCheckbox-root.Ob-disabled{--bg-color: rgba(150, 150, 150, 0.5);--bg-color-hover: var(--bg-color)}.ObCheckbox-box{position:relative;background:var(--bg-color);transition:background 300ms ease;overflow:hidden;border-radius:calc(var(--check-width)/15);height:var(--check-width);width:var(--check-width)}.ObCheckbox-box:hover{background:var(--bg-color-hover)}.ObCheckbox-label{position:relative;margin-bottom:0;overflow:hidden}.ObCheckbox-label:focus{outline:none}.ObCheckbox-mark{color:#fff;display:inline-block;font-size:calc(var(--check-width)*.4);left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition:all 300ms ease-in-out;transition-delay:0ms;transform:translate(-50%, -50%) scale(6)}.ObCheckbox-input{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.ObCheckbox-input:focus{outline:none}.ObCheckbox-label{display:flex;gap:.5rem;align-items:center;overflow:visible}.ObCheckbox-root.Ob-reverse .ObCheckbox-label{flex-direction:row-reverse}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{animation:animOn 600ms 1 forwards}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{background:var(--bg-color-selected)}.ObCheckbox-input:checked+.ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark{transform:translate(-50%, -50%) scale(1);transition-delay:200ms;opacity:1}.ObCheckbox-root.Ob-disabled .ObCheckbox-box{cursor:not-allowed}@keyframes animOn{40%{transform:scaleY(0.4) scaleX(2)}50%{transform:scaleY(1.2) scaleX(0.6)}60%{transform:scaleY(0.8) scaleX(1.4)}70%{transform:scaleY(1.1) scaleX(0.9)}100%{transform:scaleY(1) scaleX(1)}}

package/es/Checkbox/index.d.ts

@@ -2,7 +2,18 @@ import "./index.css";
 export type CheckboxProps = React.RefAttributes<HTMLInputElement> & Omit<React.HTMLProps<HTMLInputElement>, "value"> & {
     className?: string;
     id?: string;
+    /**
+     * Label for the checkbox.
+     */
+    label?: React.ReactNode;
+    /**
+     * Tooltip text for the checkbox.
+     */
     title?: string;
     value?: boolean;
+    /**
+     * Reverses the checkbox layout, placing the label before the checkbox.
+     */
+    reverse?: boolean;
 };
 export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/es/Checkbox/index.js

@@ -5,9 +5,11 @@ import { forwardRef, useEffect, useId, useRef } from "react";
 function Mark(props) {
     return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", ...props, children: _jsx("path", { d: "M20.285 2L9 13.567 3.714 8.556 0 12.272 9 21 24 5.715z", fill: "currentColor" }) }));
 }
-export const Checkbox = forwardRef(function Checkbox({ className, disabled = false, id, onChange = () => null, title, value, ...other }, ref) {
-    const inputId = useId() + (id ?? "");
-    const input = useRef(null);
+export const Checkbox = forwardRef(function Checkbox({ className, disabled = false, id, onChange = () => null, label, title, reverse, value, ...other }, ref) {
+    let inputId = useId();
+    inputId = id ?? inputId;
+    let inputIdRef = `#${inputId}`;
+    let input = useRef(null);
     // biome-ignore lint/correctness/useExhaustiveDependencies: Ref object
     useEffect(() => {
         if (typeof ref === "function") {
@@ -31,12 +33,12 @@ export const Checkbox = forwardRef(function Checkbox({ className, disabled = fal
     }
     function handleKeyDown(evt) {
         if (evt.nativeEvent) {
-            const { nativeEvent } = evt;
+            let { nativeEvent } = evt;
             if (nativeEvent.key === " ") {
                 nativeEvent.preventDefault();
                 input.current?.click();
             }
         }
     }
-    return (_jsxs("div", { className: clsx("ObCheckbox-root", disabled && "Ob-disabled", className), title: title, children: [_jsx("input", { className: "ObCheckbox-input", id: inputId, type: "checkbox", onChange: handleInputChanged, checked: value, disabled: disabled, ref: input, ...other }), _jsx("label", { htmlFor: `#${inputId}`, className: "ObCheckbox-label", onKeyDown: handleKeyDown, onClick: handleClick, children: _jsx("div", { className: "ObCheckbox-box", children: _jsx(Mark, { className: "ObCheckbox-mark" }) }) })] }));
+    return (_jsxs("div", { className: clsx("ObCheckbox-root", disabled && "Ob-disabled", reverse && "Ob-reverse", className), title: title, children: [_jsx("input", { className: "ObCheckbox-input", id: inputId, type: "checkbox", onChange: handleInputChanged, checked: value, disabled: disabled, ref: input, ...other }), _jsxs("label", { htmlFor: inputIdRef, className: "ObCheckbox-label", onKeyDown: handleKeyDown, onClick: handleClick, children: [_jsx("div", { className: "ObCheckbox-box", children: _jsx(Mark, { className: "ObCheckbox-mark" }) }), label && _jsx("div", { className: "ObCheckbox-label-text", children: label })] })] }));
 });

package/es/ColorCard/index.d.ts

@@ -1,8 +1,11 @@
 import "./index.css";
-export declare function ColorCard({ as: Component, children, className, href, ...other }: Pick<React.HTMLAttributes<HTMLDivElement>, "id" | "className" | "children"> & {
+export type ColorCardProps = Pick<React.HTMLAttributes<HTMLDivElement>, "id" | "className" | "children"> & {
     as?: "a" | "div" | "button" | "span" | "section" | "article";
     href?: string;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function ColorCard({ as: Component, children, className, href, ...other }: ColorCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardStepList({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function CardStep({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare function CardColumn({ children, className, minor, ...other }: React.HTMLAttributes<HTMLDivElement> & {
     minor?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/es/ColorCard/index.js

@@ -5,6 +5,12 @@ export function ColorCard({ as: Component, children, className, href, ...other }
     const BaseElement = Component ? Component : href ? "a" : "div";
     return (_jsx(BaseElement, { className: clsx("ObColorCard-root", className), href: href, ...other, children: children }));
 }
+export function CardStepList({ children, className, ...props }) {
+    return (_jsx("div", { className: clsx("ObColorCard-stepList", className), ...props, children: children }));
+}
+export function CardStep({ children, className, ...props }) {
+    return (_jsx("div", { className: clsx("ObColorCard-step", className), ...props, children: _jsx("div", { className: "ObColorCard-stepText", children: children }) }));
+}
 export function CardColumn({ children, className, minor, ...other }) {
     return (_jsx("div", { className: clsx("ObColorCard-column", minor && "ObColorCard-minor", className), ...other, children: children }));
 }

package/es/DateNavigator/index.d.ts

@@ -1,5 +1,10 @@
 import "./index.css";
-export declare function DateNavigator({ date: dateProp, onChange }: {
-    date?: Date;
+export type DateNavigatorProps = {
+    date?: Date | string | number;
+    defaultDate?: Date | string | number;
+    disableTodayButton?: boolean;
     onChange?: (date: Date) => void;
-}): import("react/jsx-runtime").JSX.Element;
+    minDate?: Date | string | number;
+    maxDate?: Date | string | number;
+};
+export declare function DateNavigator({ date: dateProp, defaultDate, disableTodayButton, onChange, minDate: minDateProp, maxDate: maxDateProp, }: DateNavigatorProps): import("react/jsx-runtime").JSX.Element;

package/es/DateNavigator/index.js

@@ -2,13 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./index.css";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import clsx from "clsx";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 function getUiCulture() {
     return af?.userSession?.culture ?? "default";
 }
-function Arrow(props) {
-    const { direction, ...rest } = props;
-    return (_jsx("button", { className: clsx("ObDateNavigator-arrow", direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"), ...rest, children: _jsx("span", { className: "ObDateNavigator-icon", children: direction === "left" ? (_jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 320 512", children: _jsx("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" }) })) : (_jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 320 512", children: _jsx("path", { fill: "currentColor", d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" }) })) }) }));
+function Arrow({ direction, ...rest }) {
+    return (_jsx("button", { className: clsx("ObDateNavigator-arrow btn-reset", direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"), "aria-label": direction === "left" ? getLocalizedString("Previous day") : getLocalizedString("Next day"), ...rest, children: _jsx("span", { className: "ObDateNavigator-icon", children: direction === "left" ? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 320 512", children: _jsx("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" }) })) : (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 320 512", children: _jsx("path", { fill: "currentColor", d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" }) })) }) }));
 }
 const formatter = new Intl.DateTimeFormat(getUiCulture(), {
     weekday: "short",
@@ -17,35 +16,108 @@ const formatter = new Intl.DateTimeFormat(getUiCulture(), {
     year: "numeric",
     timeZone: "utc",
 });
-const today = new Date();
-const todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
 const oneDay = 24 * 60 * 60 * 1000;
-export function DateNavigator({ date: dateProp, onChange }) {
-    let [internalDate, setInternalDate] = useState(new Date());
-    const date = dateProp ?? internalDate;
-    const dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
-    let dateValue = new Date(dateUtc);
-    let text = formatter.format(dateValue);
-    let altText = "";
-    if (todayUtc === dateUtc) {
-        altText = getLocalizedString("Today");
+function sanitizeDate(date) {
+    if (typeof date === "string" || typeof date === "number") {
+        let parsedDate = new Date(date);
+        if (Number.isNaN(parsedDate.getTime())) {
+            throw new Error(`Invalid date value: ${date}`);
+        }
+        return parsedDate;
     }
-    else if (todayUtc === dateUtc + oneDay) {
-        altText = getLocalizedString("Yesterday");
+    else if (date instanceof Date) {
+        if (Number.isNaN(date.getTime())) {
+            throw new Error(`Invalid date object: ${date}`);
+        }
+        return new Date(date.getTime()); // Return a copy of the date
     }
-    else if (todayUtc === dateUtc - oneDay) {
-        altText = getLocalizedString("Tomorrow");
+    else {
+        throw new Error(`Unsupported date type: ${typeof date}`);
     }
-    if (altText) {
-        text = `${altText}, ${text}`;
+}
+export function DateNavigator({ date: dateProp, defaultDate, disableTodayButton, onChange, minDate: minDateProp, maxDate: maxDateProp, }) {
+    let [internalDate, setInternalDate] = useState(() => (defaultDate ? sanitizeDate(defaultDate) : new Date()));
+    let date = dateProp ? sanitizeDate(dateProp) : internalDate;
+    let dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+    let today = new Date();
+    let todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
+    let liveRef = useRef(null);
+    let text = (() => {
+        let base = formatter.format(new Date(dateUtc));
+        if (todayUtc === dateUtc)
+            return `${getLocalizedString("Today")}, ${base}`;
+        if (todayUtc === dateUtc + oneDay)
+            return `${getLocalizedString("Yesterday")}, ${base}`;
+        if (todayUtc === dateUtc - oneDay)
+            return `${getLocalizedString("Tomorrow")}, ${base}`;
+        return base;
+    })();
+    let minDate = minDateProp && sanitizeDate(minDateProp);
+    let maxDate = maxDateProp && sanitizeDate(maxDateProp);
+    let disablePrev = !!minDate && dateUtc <= Date.UTC(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
+    let disableNext = !!maxDate && dateUtc >= Date.UTC(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
+    function updateDate(newDate) {
+        if (minDate && newDate < minDate) {
+            newDate = new Date(minDate); // Ensure we don't go below minDate
+        }
+        else if (maxDate && newDate > maxDate) {
+            newDate = new Date(maxDate); // Ensure we don't go above maxDate
+        }
+        onChange?.(newDate);
+        setInternalDate(newDate);
     }
-    function handleDateChanged(date) {
-        if (typeof onChange === "function") {
-            onChange(date);
+    function jumpToToday() {
+        updateDate(new Date());
+    }
+    useEffect(() => {
+        if (liveRef.current) {
+            liveRef.current.textContent = text;
+        }
+    }, [text]);
+    function handleKeyDown(event) {
+        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+            return;
+        if (event.defaultPrevented)
+            return;
+        if (event.altKey || event.metaKey)
+            return; // Ignore if alt or meta key is pressed
+        if (disablePrev && event.key === "ArrowLeft")
+            return;
+        if (disableNext && event.key === "ArrowRight")
+            return;
+        if (event.ctrlKey && event.shiftKey) {
+            // If both ctrl and shift are pressed, navigate by 1 year
+            let newDate = new Date(dateUtc);
+            if (event.key === "ArrowLeft") {
+                newDate.setFullYear(newDate.getFullYear() - 1);
+            }
+            else if (event.key === "ArrowRight") {
+                newDate.setFullYear(newDate.getFullYear() + 1);
+            }
+            updateDate(newDate);
+            return;
+        }
+        if (event.ctrlKey) {
+            // Navigate by month
+            let newDate = new Date(dateUtc);
+            if (event.key === "ArrowLeft") {
+                newDate.setMonth(newDate.getMonth() - 1);
+            }
+            else if (event.key === "ArrowRight") {
+                newDate.setMonth(newDate.getMonth() + 1);
+            }
+            updateDate(newDate);
+            return;
+        }
+        let modifier = event.shiftKey ? 7 : 1;
+        if (event.key === "ArrowLeft") {
+            updateDate(new Date(dateUtc - oneDay * modifier));
         }
-        else {
-            setInternalDate(date);
+        else if (event.key === "ArrowRight") {
+            updateDate(new Date(dateUtc + oneDay * modifier));
         }
     }
-    return (_jsxs("div", { className: "ObDateNavigator-root", children: [_jsx(Arrow, { direction: "left", onClick: () => handleDateChanged(new Date(dateUtc - oneDay)) }), _jsx("div", { className: "ObDateNavigator-date", children: text }), _jsx(Arrow, { direction: "right", onClick: () => handleDateChanged(new Date(dateUtc + oneDay)) })] }));
+    return (
+    // biome-ignore lint/a11y/noNoninteractiveTabindex: I hate this component
+    _jsxs("div", { className: "ObDateNavigator-root", onKeyDown: handleKeyDown, tabIndex: 0, "aria-label": "Date navigator", children: [_jsx(Arrow, { direction: "left", onClick: () => updateDate(new Date(dateUtc - oneDay)), disabled: disablePrev }), _jsx("div", { className: "ObDateNavigator-date", children: text }), _jsx(Arrow, { direction: "right", onClick: () => updateDate(new Date(dateUtc + oneDay)), disabled: disableNext }), !disableTodayButton && (_jsx("button", { type: "button", className: "ObDateNavigator-today btn-reset", onClick: jumpToToday, children: getLocalizedString("Today") })), _jsx("div", { "aria-live": "polite", ref: liveRef, style: { position: "absolute", left: "-9999px" } })] }));
 }

package/es/LinkedCardList/index.css

@@ -1 +1 @@
-.ObLinkedList-root{list-style-type:none;margin-left:0;padding-left:0}.ObLinkedList-item{display:flex;align-items:center;flex-direction:row}.ObLinkedList-leftColumn{flex:1 1 4em;font-size:.75em;padding:0 1em;text-align:center}.ObLinkedList-rightColumn{flex:1 1 100%;padding:1em 1em 1em 1.5em}.ObLinkedList-line{display:flex;align-self:stretch;flex:0 0 .2em;background:#fff;position:relative}.ObLinkedList-bullet{background:#fff;border:1px solid rgba(50,50,50,.25);border-radius:.55em;height:.7em;width:.7em;position:absolute;left:0;top:50%;transform:translate(-0.25em, -50%)}.ObLinkedList-card{background:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;border-radius:.1875em;color:inherit;cursor:pointer;flex:100% 1 1;position:relative}.ObLinkedList-card::before{border-bottom:.5em solid rgba(0,0,0,0);border-right:1em solid #fff;border-top:.5em solid rgba(0,0,0,0);content:" ";filter:drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));height:1em;left:-1em;margin-top:-0.5em;position:absolute;top:50%;width:1em}.ObLinkedList-card:hover{background-color:hsl(220,20%,94%) !important;color:inherit;text-decoration:inherit}.ObLinkedList-card:hover::before{border-right-color:hsl(220,20%,94%) !important}
+:root{--ob-linked-list-bullet-size: 0.7em;--ob-linked-list-line-width: 0.2em}.ObLinkedList-root{list-style-type:none;margin-left:0;padding-left:0}.ObLinkedList-item{display:flex;align-items:center;flex-direction:row}.ObLinkedList-leftColumn{flex:1 1 4em;font-size:.75em;padding:0 1em;text-align:center}.ObLinkedList-rightColumn{flex:1 1 100%;padding:1em 1em 1em 1.5em}.ObLinkedList-line{display:flex;align-self:stretch;flex:0 0 .2em;background:#fff;position:relative}.ObLinkedList-bullet{background:#fff;border:1px solid rgba(50,50,50,.25);border-radius:.55em;height:.7em;width:.7em;position:absolute;left:0;top:50%;transform:translate(calc(-1 * var(--ob-linked-list-bullet-size) / 2 + var(--ob-linked-list-line-width) / 2), -50%)}.ObLinkedList-card{display:block;background:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;border-radius:.1875em;color:inherit;cursor:pointer;flex:100% 1 1;position:relative}.ObLinkedList-card::before{border-bottom:.5em solid rgba(0,0,0,0);border-right:1em solid #fff;border-top:.5em solid rgba(0,0,0,0);content:" ";filter:drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));height:1em;left:-1em;margin-top:-0.5em;position:absolute;top:50%;width:1em}.ObLinkedList-card:hover{background-color:hsl(220,20%,94%) !important;color:inherit;text-decoration:inherit}.ObLinkedList-card:hover::before{border-right-color:hsl(220,20%,94%) !important}

package/es/LinkedCardList/index.d.ts

@@ -1,6 +1,6 @@
 import "./index.css";
-export declare function List({ children, className, ...other }: React.HTMLProps<HTMLUListElement>): import("react/jsx-runtime").JSX.Element;
-export declare function ListItem({ children, className, label, ...other }: React.HTMLProps<HTMLLIElement> & {
+export declare function LinkedList({ children, className, ...other }: React.HTMLProps<HTMLUListElement>): import("react/jsx-runtime").JSX.Element;
+export declare function LinkedListItem({ children, className, label, ...other }: React.HTMLProps<HTMLLIElement> & {
     label: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function Card({ as, children, className, ...other }: React.HTMLProps<HTMLDivElement> & {

package/es/LinkedCardList/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./index.css";
 import clsx from "clsx";
-export function List({ children, className, ...other }) {
+export function LinkedList({ children, className, ...other }) {
     return (_jsx("ul", { className: clsx("ObLinkedList-root", className), ...other, children: children }));
 }
-export function ListItem({ children, className, label, ...other }) {
+export function LinkedListItem({ children, className, label, ...other }) {
     return (_jsxs("li", { className: clsx("ObLinkedList-item", className), ...other, children: [label && _jsx("div", { className: "ObLinkedList-leftColumn", children: label }), _jsx("div", { className: "ObLinkedList-line", children: _jsx("div", { className: "ObLinkedList-bullet" }) }), _jsx("div", { className: "ObLinkedList-rightColumn", children: children })] }));
 }
 export function Card({ as, children, className, ...other }) {

package/es/ProgressBar/index.css

@@ -1 +1 @@
-.ObProgressBar-root{height:1.5em;width:100%;appearance:none;-webkit-appearance:none;background-color:#f5f5f5;border:none;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset;color:#4169e1;position:relative}.ObProgressBar-root::-webkit-progress-bar{background-color:#f5f5f5;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset}.ObProgressBar-root::-webkit-progress-value{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary, hsl(186, 72%, 24%)), var(--brand-light, hsl(186, 72%, 37%)));background-image:-webkit-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-webkit-linear-gradient(left, var(--brand-primary), hsl(186, 72%, 24%), var(--brand-light, hsl(186, 72%, 37%)));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;position:relative;transition:width .5s ease-out}.ObProgressBar-root::-webkit-progress-value:after{background-color:#fff;content:"";border-radius:100%;height:5px;position:absolute;right:7px;top:7px;width:5px}.ObProgressBar-root::-moz-progress-bar{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary), var(--brand-light));background-image:-moz-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-moz-linear-gradient(left, var(--brand-primary), var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;transition:width .5s ease-out}
+.ObProgressBar-root{height:1.5em;width:100%;appearance:none;-webkit-appearance:none;background-color:#f5f5f5;border:none;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset;color:#4169e1;position:relative}.ObProgressBar-root::-webkit-progress-bar{background-color:#f5f5f5;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset}.ObProgressBar-root::-webkit-progress-value{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary), var(--brand-light));background-image:-webkit-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-webkit-linear-gradient(left, var(--brand-primary), var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;position:relative;transition:width .5s ease-out}.ObProgressBar-root::-webkit-progress-value:after{background-color:#fff;content:"";border-radius:100%;height:5px;position:absolute;right:7px;top:7px;width:5px}.ObProgressBar-root::-moz-progress-bar{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary), var(--brand-light));background-image:-moz-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-moz-linear-gradient(left, var(--brand-primary), var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;transition:width .5s ease-out}

package/es/SplitContainer/index.d.ts

@@ -7,6 +7,8 @@ export type SplitContainerProps = {
     direction?: "horizontal" | "vertical";
     fixedPanel?: 1 | 2;
     defaultFixedSize?: number;
+    min?: number;
+    max?: number;
     /**
      * When the fixed size is persisted, changing the layoutVersion will force clients
      * to reset to the default value.
@@ -17,4 +19,4 @@ export type SplitContainerProps = {
      */
     id?: string;
 };
-export declare function SplitContainer({ className, children, direction, fixedPanel, panelClassName, defaultFixedSize, layoutVersion, id, }: SplitContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitContainer({ className, children, direction, fixedPanel, panelClassName, defaultFixedSize, layoutVersion, min, max, id, }: SplitContainerProps): import("react/jsx-runtime").JSX.Element;

package/es/SplitContainer/index.js

@@ -36,7 +36,9 @@ settingsStore.keys().then((keys) => Promise.allSettled(keys
     }
 }))));
 const Divider = forwardRef(function Divider(props, ref) {
-    return (_jsx("div", { className: clsx("ObSplitContainer-divider", props.className), ref: ref, children: _jsx("span", { children: "\u2022\u2022\u2022" }) }));
+    return (_jsx("div", { className: clsx("ObSplitContainer-divider", props.className), tabIndex: 0, ref: ref, 
+        // biome-ignore lint/a11y/useSemanticElements: this is allowed according to WAI-ARIA
+        role: "separator", "aria-orientation": props.direction, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-valuenow": props.size, children: _jsx("span", { children: "\u2022\u2022\u2022" }) }));
 });
 function SplitRoot({ className, direction, ...props }) {
     return _jsx("div", { className: clsx(className, "ObSplitContainer-root", direction), ...props });
@@ -48,23 +50,28 @@ function SplitPanel(props) {
     };
     return (_jsx("div", { className: clsx(props.className, "ObSplitContainer-panel"), style: style, children: props.children }));
 }
-export function SplitContainer({ className, children, direction = "vertical", fixedPanel = 1, panelClassName, defaultFixedSize = 400, layoutVersion = 1, id, }) {
+export function SplitContainer({ className, children, direction = "vertical", fixedPanel = 1, panelClassName, defaultFixedSize = 400, layoutVersion = 1, min = 0, max, id, }) {
     let [fixedSize, setFixedSize] = useState(defaultFixedSize);
     let [isDragging, setIsDragging] = useState(false);
     let dividerRef = useRef(null);
     if (Children.count(children) !== 2) {
         throw Error("SplitContainer requires exactly 2 children");
     }
-    function handleFixedSizeChanged(size) {
-        setFixedSize((current) => {
-            let newValue = typeof size === "function" ? size(current) : size;
-            if (id) {
-                let key = `${article}.${id}`;
-                persistState(key, layoutVersion, newValue);
+    let containerRef = useRef(null);
+    let [containerSize, setContainerSize] = useState(0);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        let resizeObserver = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+                if (entry.contentRect) {
+                    setContainerSize(direction === "horizontal" ? entry.contentRect.width : entry.contentRect.height);
+                }
             }
-            return newValue;
         });
-    }
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect();
+    }, [direction]);
     useEffect(() => {
         if (id) {
             let key = `${article}.${id}`;
@@ -79,7 +86,6 @@ export function SplitContainer({ className, children, direction = "vertical", fi
         }
     }, [id, layoutVersion]);
     let childrenArray = Children.toArray(children);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
     useEffect(() => {
         let divider = dividerRef.current;
         if (divider) {
@@ -89,12 +95,33 @@ export function SplitContainer({ className, children, direction = "vertical", fi
                 size: 0,
             };
             let movingPanel = (fixedPanel === 1 ? divider.previousElementSibling : divider.nextElementSibling);
+            function clampSize(size) {
+                let adjustedContainerSize = containerSize - 10; // make sure divider will not be stuck outside the container
+                let maxSize = Math.min(max ?? adjustedContainerSize, adjustedContainerSize);
+                if (size < min) {
+                    size = min;
+                }
+                else if (size > maxSize) {
+                    size = maxSize;
+                }
+                return size;
+            }
             function getNewSize(event) {
                 let deltaSize = direction === "horizontal"
                     ? event.clientX - initialPosition.clientX
                     : event.clientY - initialPosition.clientY;
                 deltaSize *= fixedPanel === 1 ? -1 : 1;
-                return initialPosition.size - deltaSize;
+                return clampSize(initialPosition.size - deltaSize);
+            }
+            function handleFixedSizeChanged(size) {
+                setFixedSize((current) => {
+                    let newValue = clampSize(typeof size === "function" ? size(current) : size);
+                    if (id) {
+                        let key = `${article}.${id}`;
+                        persistState(key, layoutVersion, newValue);
+                    }
+                    return newValue;
+                });
             }
             function handlePointerUp(event) {
                 let newSize = getNewSize(event);
@@ -106,6 +133,10 @@ export function SplitContainer({ className, children, direction = "vertical", fi
             function handlePointerMove(event) {
                 event.preventDefault();
                 let newSize = getNewSize(event);
+                let divider = dividerRef.current;
+                if (divider) {
+                    divider.setAttribute("aria-valuenow", String(newSize));
+                }
                 movingPanel.style.flex = `0 0 ${newSize}px`;
             }
             function handlePointerDown(event) {
@@ -148,6 +179,6 @@ export function SplitContainer({ className, children, direction = "vertical", fi
                 divider?.removeEventListener("keydown", handleKeyDown);
             };
         }
-    }, [direction, fixedPanel]);
-    return (_jsxs(SplitRoot, { direction: direction, className: className, children: [_jsx(SplitPanel, { className: clsx(isDragging && "dragging", panelClassName), fixed: fixedPanel === 1, size: fixedSize, children: childrenArray[0] }), _jsx(Divider, { ref: dividerRef, direction: direction, isDragging: isDragging }), _jsx(SplitPanel, { className: clsx(isDragging && "dragging", panelClassName), fixed: fixedPanel === 2, size: fixedSize, children: childrenArray[1] })] }));
+    }, [direction, fixedPanel, layoutVersion, id, min, max, containerSize]);
+    return (_jsxs(SplitRoot, { direction: direction, className: className, ref: containerRef, children: [_jsx(SplitPanel, { className: clsx(isDragging && "dragging", panelClassName), fixed: fixedPanel === 1, size: fixedSize, children: childrenArray[0] }), _jsx(Divider, { ref: dividerRef, direction: direction, isDragging: isDragging, size: fixedSize, min: min, max: max ?? containerSize }), _jsx(SplitPanel, { className: clsx(isDragging && "dragging", panelClassName), fixed: fixedPanel === 2, size: fixedSize, children: childrenArray[1] })] }));
 }

package/es/ValueToggleGroup/index.d.ts

@@ -0,0 +1,18 @@
+import "./index.css";
+export type ValueToggleOption = {
+    value: string | number;
+    label?: React.ReactNode;
+    disabled?: boolean;
+};
+export type ValueToggleGroupProps = {
+    options: ValueToggleOption[];
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number) => void;
+    className?: string;
+    name?: string;
+    id?: string;
+    style?: React.CSSProperties;
+    orientation?: "horizontal" | "vertical";
+};
+export declare const ValueToggleGroup: import("react").ForwardRefExoticComponent<ValueToggleGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/es/ValueToggleGroup/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./index.css";
+import { forwardRef, useId } from "react";
+import clsx from "clsx";
+export const ValueToggleGroup = forwardRef(function ValueToggleGroup({ options, value, defaultValue, onChange, className, name, id, style, orientation = "horizontal" }, ref) {
+    let randomId = useId();
+    let groupName = name || `toggle-${id ?? randomId}`;
+    let isControlled = value !== undefined;
+    return (_jsx("fieldset", { className: clsx("ObValueToggleGroup", orientation, className), role: "radiogroup", ref: ref, style: style, children: options.map((opt) => {
+            return (_jsxs("label", { className: clsx("ObValueToggleOption", { disabled: opt.disabled }), children: [_jsx("input", { type: "radio", name: groupName, value: opt.value, checked: isControlled ? value === opt.value : undefined, defaultChecked: !isControlled ? defaultValue === opt.value : undefined, onChange: () => onChange?.(opt.value), disabled: opt.disabled }), _jsx("span", { className: "ObValueToggleLabel", children: opt.label ?? opt.value })] }, opt.value));
+        }) }));
+});