@olenbetong/synergi-react 1.0.6 → 2.1.0

package/es/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)}}.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}
+.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)}

package/es/index.d.ts

@@ -1,12 +1,12 @@
-export { Checkbox, CheckboxProps } from "./Checkbox/index.js";
-export { ColorCard, CardColumn, CardDetail, CardLabel } from "./ColorCard/index.js";
+export { Checkbox, type CheckboxProps } from "./Checkbox/index.js";
+export { ColorCard, CardColumn, CardDetail, CardLabel, CardStep, CardStepList } from "./ColorCard/index.js";
 export { DateNavigator } from "./DateNavigator/index.js";
-export { Card, List as LinkedList, ListItem as LinkedListItem } from "./LinkedCardList/index.js";
-export { BannerImage as PageBannerImage, BannerImageProps, PageBanner, PageBannerProps, Tab as PageBannerTab, TabProps as PageBannerTabProps, TabList as PageBannerTabList, TabListProps as PageBannerTabListProps, Title as PageBannerTitle, TitleProps as PageBannerTitleProps, } from "./PageBanner/index.js";
+export { Card, LinkedList, LinkedListItem } from "./LinkedCardList/index.js";
+export { BannerImage as PageBannerImage, type BannerImageProps, PageBanner, type PageBannerProps, Tab as PageBannerTab, type TabProps as PageBannerTabProps, TabList as PageBannerTabList, type TabListProps as PageBannerTabListProps, Title as PageBannerTitle, type TitleProps as PageBannerTitleProps, } from "./PageBanner/index.js";
 export { Portal } from "./Portal/index.js";
 export { ProgressBar } from "./ProgressBar/index.js";
-export { Sidebar, SidebarProps } from "./Sidebar/index.js";
-export { Spinner, SpinnerProps } from "./Spinner/index.js";
-export { SplitContainer, SplitContainerProps } from "./SplitContainer/index.js";
+export { Sidebar, type SidebarProps } from "./Sidebar/index.js";
+export { Spinner, type SpinnerProps } from "./Spinner/index.js";
+export { SplitContainer, type SplitContainerProps } from "./SplitContainer/index.js";
 export { useTranslation } from "./useTranslation/index.js";
-export { ValueToggle, ValueToggleProps } from "./ValueToggle/index.js";
+export { ValueToggleGroup, type ValueToggleGroupProps } from "./ValueToggleGroup/index.js";

package/es/index.js

@@ -1,7 +1,7 @@
 export { Checkbox } from "./Checkbox/index.js";
-export { ColorCard, CardColumn, CardDetail, CardLabel } from "./ColorCard/index.js";
+export { ColorCard, CardColumn, CardDetail, CardLabel, CardStep, CardStepList } from "./ColorCard/index.js";
 export { DateNavigator } from "./DateNavigator/index.js";
-export { Card, List as LinkedList, ListItem as LinkedListItem } from "./LinkedCardList/index.js";
+export { Card, LinkedList, LinkedListItem } from "./LinkedCardList/index.js";
 export { BannerImage as PageBannerImage, PageBanner, Tab as PageBannerTab, TabList as PageBannerTabList, Title as PageBannerTitle, } from "./PageBanner/index.js";
 export { Portal } from "./Portal/index.js";
 export { ProgressBar } from "./ProgressBar/index.js";
@@ -9,4 +9,4 @@ export { Sidebar } from "./Sidebar/index.js";
 export { Spinner } from "./Spinner/index.js";
 export { SplitContainer } from "./SplitContainer/index.js";
 export { useTranslation } from "./useTranslation/index.js";
-export { ValueToggle } from "./ValueToggle/index.js";
+export { ValueToggleGroup } from "./ValueToggleGroup/index.js";

package/package.json

@@ -1,91 +1,89 @@
 {
-	"name": "@olenbetong/synergi-react",
-	"version": "1.0.6",
-	"description": "Standalone React component for SynergiWeb and Partner Portal",
-	"type": "module",
-	"types": "./es/index.d.ts",
-	"exports": {
-		".": {
-			"import": "./es/index.js"
-		},
-		"./Checkbox": {
-			"import": "./es/Checkbox/index.js"
-		},
-		"./ColorCard": {
-			"import": "./es/ColorCard/index.js"
-		},
-		"./DateNavigator": {
-			"import": "./es/DateNavigator/index.js"
-		},
-		"./LinkedCardList": {
-			"import": "./es/LinkedCardList/index.js"
-		},
-		"./PageBanner": {
-			"import": "./es/PageBanner/index.js"
-		},
-		"./Portal": {
-			"import": "./es/Portal/index.js"
-		},
-		"./ProgressBar": {
-			"import": "./es/ProgressBar/index.js"
-		},
-		"./Sidebar": {
-			"import": "./es/Sidebar/index.js"
-		},
-		"./Spinner": {
-			"import": "./es/Spinner/index.js"
-		},
-		"./SplitContainer": {
-			"import": "./es/SplitContainer/index.js"
-		},
-		"./useTranslation": {
-			"import": "./es/useTranslation/index.js"
-		},
-		"./ValueToggle": {
-			"import": "./es/ValueToggle/index.js"
-		}
-	},
-	"scripts": {
-		"prepack": "pnpm run build",
-		"build": "pnpm run build:tsc && pnpm run build:tsc:post && pnpm run build:esbuild && pnpm run build:sass && pnpm run build:sass:components",
-		"build:tsc": "rm -rf ./es && tsc",
-		"build:esbuild": "rm -rf ./dist && node --loader ts-node/esm.mjs ../../shared/esbuild.js",
-		"build:sass": "sass ./src/index.scss ./dist/styles/styles.css --source-map-urls=relative --style compressed",
-		"build:sass:components": "node ./scripts/buildSassComponents.mjs",
-		"build:tsc:post": "node ./scripts/replaceCss.mjs"
-	},
-	"files": [
-		"src",
-		"dist",
-		"es"
-	],
-	"keywords": [],
-	"author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
-	"license": "MIT",
-	"peerDependencies": {
-		"react": ">=18.2.0",
-		"react-dom": ">=18.2.0"
-	},
-	"sideEffects": false,
-	"dependencies": {
-		"@olenbetong/appframe-core": "2.11.7",
-		"clsx": "^2.1.1",
-		"localforage": "^1.10.0",
-		"mitt": "^3.0.0"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/olenbetong/ui-kit.git"
-	},
-	"buildConfig": {
-		"entries": [
-			{
-				"libraryName": "ob.react"
-			}
-		]
-	},
-	"devDependencies": {
-		"replace-in-files": "^3.0.0"
-	},
-	"gitHead": "bc10814d960b65e6959fb8506259e4d369f094ab"
-}
+  "name": "@olenbetong/synergi-react",
+  "version": "2.1.0",
+  "description": "Standalone React component for SynergiWeb and Partner Portal",
+  "type": "module",
+  "types": "./es/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./es/index.js"
+    },
+    "./Checkbox": {
+      "import": "./es/Checkbox/index.js"
+    },
+    "./ColorCard": {
+      "import": "./es/ColorCard/index.js"
+    },
+    "./DateNavigator": {
+      "import": "./es/DateNavigator/index.js"
+    },
+    "./LinkedCardList": {
+      "import": "./es/LinkedCardList/index.js"
+    },
+    "./PageBanner": {
+      "import": "./es/PageBanner/index.js"
+    },
+    "./Portal": {
+      "import": "./es/Portal/index.js"
+    },
+    "./ProgressBar": {
+      "import": "./es/ProgressBar/index.js"
+    },
+    "./Sidebar": {
+      "import": "./es/Sidebar/index.js"
+    },
+    "./Spinner": {
+      "import": "./es/Spinner/index.js"
+    },
+    "./SplitContainer": {
+      "import": "./es/SplitContainer/index.js"
+    },
+    "./useTranslation": {
+      "import": "./es/useTranslation/index.js"
+    },
+    "./ValueToggle": {
+      "import": "./es/ValueToggle/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "es"
+  ],
+  "keywords": [],
+  "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "localforage": "^1.10.0",
+    "mitt": "^3.0.1",
+    "@olenbetong/appframe-core": "2.11.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/olenbetong/ui-kit.git"
+  },
+  "buildConfig": {
+    "entries": [
+      {
+        "libraryName": "ob.react"
+      }
+    ]
+  },
+  "devDependencies": {
+    "replace-in-files": "^3.0.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:tsc && pnpm run build:tsc:post && pnpm run build:esbuild && pnpm run build:sass && pnpm run build:sass:components",
+    "build:tsc": "find . -name '*.tsbuildinfo' -delete && rm -rf ./es && tsc",
+    "build:esbuild": "rm -rf ./dist && node --experimental-strip-types ../../scripts/esbuild.ts",
+    "build:sass": "sass ./src/index.scss ./dist/styles/styles.css --source-map-urls=relative --style compressed",
+    "build:sass:components": "node ./scripts/buildSassComponents.mjs",
+    "build:tsc:post": "node ./scripts/replaceCss.mjs"
+  }
+}

package/src/Checkbox/index.scss

@@ -73,13 +73,20 @@
 	}
 }
 
-.check_Label {
-	margin-bottom: 0;
-	flex-grow: 1;
+.ObCheckbox-label {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+
+	overflow: visible;
 }
 
-.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label {
-	animation: animOn 800ms 1 forwards;
+.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 {

package/src/Checkbox/index.tsx

@@ -15,16 +15,29 @@ 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 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
-	{ className, disabled = false, id, onChange = () => null, title, value, ...other }: CheckboxProps,
+	{ className, disabled = false, id, onChange = () => null, label, title, reverse, value, ...other }: CheckboxProps,
 	ref: React.ForwardedRef<HTMLInputElement>,
 ) {
-	const inputId = useId() + (id ?? "");
-	const input = useRef<HTMLInputElement>(null);
+	let inputId = useId();
+	inputId = id ?? inputId;
+	let inputIdRef = `#${inputId}`;
+	let input = useRef<HTMLInputElement>(null);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Ref object
 	useEffect(() => {
@@ -51,7 +64,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
 
 	function handleKeyDown(evt: any) {
 		if (evt.nativeEvent) {
-			const { nativeEvent } = evt;
+			let { nativeEvent } = evt;
 
 			if (nativeEvent.key === " ") {
 				nativeEvent.preventDefault();
@@ -61,7 +74,10 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
 	}
 
 	return (
-		<div className={clsx("ObCheckbox-root", disabled && "Ob-disabled", className)} title={title}>
+		<div
+			className={clsx("ObCheckbox-root", disabled && "Ob-disabled", reverse && "Ob-reverse", className)}
+			title={title}
+		>
 			<input
 				className="ObCheckbox-input"
 				id={inputId}
@@ -72,10 +88,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
 				ref={input}
 				{...other}
 			/>
-			<label htmlFor={`#${inputId}`} className="ObCheckbox-label" onKeyDown={handleKeyDown} onClick={handleClick}>
+			<label htmlFor={inputIdRef} className="ObCheckbox-label" onKeyDown={handleKeyDown} onClick={handleClick}>
 				<div className="ObCheckbox-box">
 					<Mark className="ObCheckbox-mark" />
 				</div>
+				{label && <div className="ObCheckbox-label-text">{label}</div>}
 			</label>
 		</div>
 	);

package/src/ColorCard/{index.scss → index.css}

@@ -1,13 +1,16 @@
-@use "../styles/variables";
-
 .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;
-	background-image: linear-gradient(to right, variables.$brand-primary, variables.$brand-primary 0.75rem, white 0.75rem, white);
+	min-height: 10rem;
+	overflow: hidden;
+	border-radius: 0.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),
@@ -15,13 +18,6 @@
 		var(--bg-color-main) var(--bg-size),
 		var(--bg-color-main)
 	);
-	border-radius: 0.25rem;
-	box-shadow:
-		0 1px 12px rgba(0, 0, 0, 0.15),
-		0 1px 6px rgba(0, 0, 0, 0.25);
-	color: #666;
-	cursor: pointer;
-	display: flex;
 	font-family:
 		"Variable Bahnschrift",
 		"Bahnschrift",
@@ -37,9 +33,8 @@
 		"Segoe UI Emoji",
 		"Segoe UI Symbol";
 	font-size: 1rem;
-	min-height: 10rem;
-	overflow: hidden;
 	transition: all ease-in-out 300ms;
+	cursor: pointer;
 
 	&:nth-of-type(5n + 1) {
 		--bg-color-border: rgb(178, 108, 190);
@@ -59,15 +54,9 @@
 
 	&:hover,
 	&:focus {
-		/*--bg-size: 1rem;*/
 		--bg-color-main: #f5f5f5;
-
-		box-shadow:
-			0 3px 18px rgba(0, 0, 0, 0.15),
-			0 3px 12px rgba(0, 0, 0, 0.25);
-		color: #666;
+		box-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 12px rgba(0, 0, 0, 0.25);
 		text-decoration: none;
-		/*transform: scale(1.03) translateY(-3px);*/
 	}
 
 	@media screen and (min-width: 48rem) {
@@ -81,30 +70,27 @@
 	flex-direction: column;
 	justify-content: space-between;
 	margin: 1rem 0;
-	overflow: hidden;
 	padding: 0.5rem 1.5rem 0.5rem 1rem;
+	overflow: hidden;
 	text-overflow: ellipsis;
 
 	&:first-child {
-		margin-left: 0.75rem;
-		margin-left: var(--bg-size);
+		margin-left: var(--bg-size, 0.75rem);
 	}
 
 	&.ObColorCard-minor {
-		border-right: 1px solid #e3e3e3;
 		flex: 0 0 4rem;
+		border-right: 1px solid #e3e3e3;
 		transition: margin ease-in-out 300ms;
-	}
 
-	@media screen and (min-width: 48rem) {
-		&.ObColorCard-minor {
+		@media screen and (min-width: 48rem) {
 			flex: 0 0 8rem;
 		}
 	}
 }
 
 .ObColorCard-detailLabel {
-	color: #ccc;
+	color: #696969;
 	font-size: 0.8rem;
 	text-transform: uppercase;
 }
@@ -130,41 +116,46 @@
 }
 
 .ObColorCard-detailValue {
-	color: #999;
+	color: #555555;
 }
 
-.ObColorCard-label {
+.ObColorCard-stepList {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.ObColorCard-step {
 	position: relative;
-	padding-left: 1.5rem;
-	/* white-space: nowrap; */
+	text-box-trim: trim-both;
 
-	&:not(:last-child) {
-		margin-bottom: 1rem;
-
-		&::after {
-			content: "";
-			position: absolute;
-			width: 0.2rem;
-			height: calc(100% + 1rem);
-			border-left: 0.2rem dotted #666;
-			left: 0.25rem;
-			top: 0.5rem;
-			z-index: 0;
-		}
-	}
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+}
 
-	&::before {
-		background: white;
-		border: 0.2rem solid variables.$brand-primary;
-		border: 0.2rem solid var(--bg-color-border);
-		border-radius: 50%;
-		content: "";
-		display: block;
-		height: 0.75rem;
-		left: 0;
-		position: absolute;
-		top: 0.3rem;
-		width: 0.75rem;
-		z-index: 1;
-	}
+.ObColorCard-step::before {
+	flex: 0.6em 0 0;
+	content: "";
+
+	position: relative;
+	top: 0.25em; /* half the height difference of text and the circle */
+
+	width: 0.6em;
+	height: 0.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: calc(0.25em + 0.6em + 0.15em); /* dot top + dot height + 0.15em spacing */
+	left: calc(0.3em - 1px); /* half of the circle width minus half the border width */
+	height: calc(100% - 0.95em + 1rem + 0.0625em); /* height of container - top + gap */
+	border-left: 2px dotted #999;
+	z-index: 0;
 }

package/src/ColorCard/index.tsx

@@ -1,17 +1,13 @@
-import "./index.scss";
+import "./index.css";
 
 import clsx from "clsx";
 
-export 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;
-}) {
+};
+
+export function ColorCard({ as: Component, children, className, href, ...other }: ColorCardProps) {
 	const BaseElement = Component ? Component : href ? "a" : "div";
 
 	return (
@@ -21,6 +17,22 @@ export function ColorCard({
 	);
 }
 
+export function CardStepList({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div className={clsx("ObColorCard-stepList", className)} {...props}>
+			{children}
+		</div>
+	);
+}
+
+export function CardStep({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div className={clsx("ObColorCard-step", className)} {...props}>
+			<div className="ObColorCard-stepText">{children}</div>
+		</div>
+	);
+}
+
 export function CardColumn({
 	children,
 	className,