@olenbetong/synergi-react 2.1.2 → 2.3.0

package/es/elements/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./data/index.js";
+export * from "./ElementDamage/DescriptionInput.js";
+export * from "./ElementDamage/DuplicateDamage/index.js";
+export * from "./ElementDamage/ElementNumberTextField.js";
+export * from "./ElementDamage/HiddenDamageFields.js";
+export * from "./ElementDamage/RegisterFix.js";
+export * from "./ElementDamage/SubmitButtons.js";
+export * from "./ElementLookup.js";
+export * from "./ElementLookupDialog/index.js";

package/es/elements/index.js

@@ -0,0 +1,9 @@
+export * from "./data/index.js";
+export * from "./ElementDamage/DescriptionInput.js";
+export * from "./ElementDamage/DuplicateDamage/index.js";
+export * from "./ElementDamage/ElementNumberTextField.js";
+export * from "./ElementDamage/HiddenDamageFields.js";
+export * from "./ElementDamage/RegisterFix.js";
+export * from "./ElementDamage/SubmitButtons.js";
+export * from "./ElementLookup.js";
+export * from "./ElementLookupDialog/index.js";

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}.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}.ObSidebar-root.Ob-right{left:unset;right:0;transform:translateX(100%)}.ObSidebar-root{overflow-y:auto}.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)}
+.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-detailValue{color:#555}.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-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}.ObSidebar-root.Ob-right{left:unset;right:0;transform:translateX(100%)}.ObSidebar-root{overflow-y:auto}.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}.ObValueToggleOption{display:flex;align-items:center;margin:0;position:relative}.ObValueToggleLabel{font-size:.8em;margin:0 .2em;padding:.3em .5em;text-transform:uppercase;transition:background .2s ease,color .2s ease;border-radius:4px}.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 input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.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,13 @@
-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, 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, type SidebarProps } from "./Sidebar/index.js";
-export { Spinner, type SpinnerProps } from "./Spinner/index.js";
-export { SplitContainer, type SplitContainerProps } from "./SplitContainer/index.js";
+export { Checkbox, type CheckboxProps } from "./components/Checkbox/index.js";
+export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
+export { DateNavigator } from "./components/DateNavigator/index.js";
+export * from "./components/FilePond.js";
+export { Card, LinkedList, LinkedListItem } from "./components/LinkedCardList/index.js";
+export { BannerImage as PageBannerImage, type BannerImageProps, PageBanner, type PageBannerProps, Tab as PageBannerTab, TabList as PageBannerTabList, type TabListProps as PageBannerTabListProps, type TabProps as PageBannerTabProps, Title as PageBannerTitle, type TitleProps as PageBannerTitleProps, } from "./components/PageBanner/index.js";
+export { Portal } from "./components/Portal/index.js";
+export { ProgressBar } from "./components/ProgressBar/index.js";
+export { Sidebar, type SidebarProps } from "./components/Sidebar/index.js";
+export { Spinner, type SpinnerProps } from "./components/Spinner/index.js";
+export { SplitContainer, type SplitContainerProps } from "./components/SplitContainer/index.js";
+export { ValueToggleGroup, type ValueToggleGroupProps } from "./components/ValueToggleGroup/index.js";
 export { useTranslation } from "./useTranslation/index.js";
-export { ValueToggleGroup, type ValueToggleGroupProps } from "./ValueToggleGroup/index.js";

package/es/index.js

@@ -1,12 +1,13 @@
-export { Checkbox } from "./Checkbox/index.js";
-export { ColorCard, CardColumn, CardDetail, CardLabel, CardStep, CardStepList } from "./ColorCard/index.js";
-export { DateNavigator } from "./DateNavigator/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";
-export { Sidebar } from "./Sidebar/index.js";
-export { Spinner } from "./Spinner/index.js";
-export { SplitContainer } from "./SplitContainer/index.js";
+export { Checkbox } from "./components/Checkbox/index.js";
+export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
+export { DateNavigator } from "./components/DateNavigator/index.js";
+export * from "./components/FilePond.js";
+export { Card, LinkedList, LinkedListItem } from "./components/LinkedCardList/index.js";
+export { BannerImage as PageBannerImage, PageBanner, Tab as PageBannerTab, TabList as PageBannerTabList, Title as PageBannerTitle, } from "./components/PageBanner/index.js";
+export { Portal } from "./components/Portal/index.js";
+export { ProgressBar } from "./components/ProgressBar/index.js";
+export { Sidebar } from "./components/Sidebar/index.js";
+export { Spinner } from "./components/Spinner/index.js";
+export { SplitContainer } from "./components/SplitContainer/index.js";
+export { ValueToggleGroup } from "./components/ValueToggleGroup/index.js";
 export { useTranslation } from "./useTranslation/index.js";
-export { ValueToggleGroup } from "./ValueToggleGroup/index.js";

package/package.json

@@ -1,48 +1,16 @@
 {
   "name": "@olenbetong/synergi-react",
-  "version": "2.1.2",
+  "version": "2.3.0",
   "description": "Standalone React component for SynergiWeb and Partner Portal",
   "type": "module",
-  "types": "./es/index.d.ts",
   "exports": {
     ".": {
+      "types": "./es/index.d.ts",
       "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"
+    "./elements": {
+      "types": "./es/features/elements/index.d.ts",
+      "import": "./es/features/elements/index.js"
     }
   },
   "files": [
@@ -59,10 +27,18 @@
   },
   "sideEffects": false,
   "dependencies": {
+    "@emotion/styled": "^11.14.1",
     "clsx": "^2.1.1",
+    "dynamsoft-javascript-barcode": "6.5.4",
+    "filepond": "^4.32.9",
+    "filepond-plugin-file-poster": "^2.5.2",
+    "filepond-plugin-image-exif-orientation": "^1.0.11",
+    "filepond-plugin-image-preview": "^4.6.12",
+    "filepond-plugin-image-resize": "^2.0.10",
+    "filepond-plugin-image-transform": "^3.8.7",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
-    "@olenbetong/appframe-core": "2.11.8"
+    "@olenbetong/appframe-core": "2.11.9"
   },
   "repository": {
     "type": "git",
@@ -78,9 +54,9 @@
   "devDependencies": {
     "replace-in-files": "^3.0.0"
   },
+  "optionalDependencies": {},
   "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:esbuild": "node --no-warnings ../../scripts/packages-esbuild.ts",
+    "build": "pnpm run build:tsc && pnpm run build:tsc:post && pnpm run build:sass && pnpm run build:sass:components",
     "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 → components/Checkbox}/index.tsx

@@ -1,7 +1,7 @@
 import "./index.scss";
 
 import clsx from "clsx";
-import { type HTMLAttributes, forwardRef, useEffect, useId, useRef } from "react";
+import { forwardRef, type HTMLAttributes, useEffect, useId, useRef } from "react";
 
 function Mark(props: HTMLAttributes<SVGElement>) {
 	return (

package/{es → src/components}/ColorCard/index.css

@@ -9,7 +9,9 @@
 	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);
+	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,
@@ -55,7 +57,9 @@
 	&: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);
+		box-shadow:
+			0 3px 18px rgba(0, 0, 0, 0.15),
+			0 3px 12px rgba(0, 0, 0, 0.25);
 		text-decoration: none;
 	}
 
@@ -89,6 +93,10 @@
 	}
 }
 
+.ObColorCard-detailValue {
+	color: #555555;
+}
+
 .ObColorCard-detailLabel {
 	color: #696969;
 	font-size: 0.8rem;
@@ -115,10 +123,6 @@
 	}
 }
 
-.ObColorCard-detailValue {
-	color: #555555;
-}
-
 .ObColorCard-stepList {
 	display: flex;
 	flex-direction: column;

package/src/{DateNavigator → components/DateNavigator}/index.tsx

@@ -169,6 +169,8 @@ export function DateNavigator({
 
 	return (
 		// biome-ignore lint/a11y/noNoninteractiveTabindex: I hate this component
+		// biome-ignore lint/a11y/noStaticElementInteractions: legacy component
+		// biome-ignore lint/a11y/useAriaPropsSupportedByRole: legacy component
 		<div className="ObDateNavigator-root" onKeyDown={handleKeyDown} tabIndex={0} aria-label="Date navigator">
 			<Arrow direction="left" onClick={() => updateDate(new Date(dateUtc - oneDay))} disabled={disablePrev} />
 			<div className="ObDateNavigator-date">{text}</div>

package/src/components/FilePond.tsx

@@ -0,0 +1,312 @@
+import "filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css";
+import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
+import "filepond/dist/filepond.css";
+
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useData, useFetchData } from "@olenbetong/appframe-react";
+
+import {
+	create,
+	type FilePondErrorDescription,
+	type FilePondFile,
+	type FilePondInitialFile,
+	type FilePond as FilePondInstance,
+	type FilePondOptions,
+	FileStatus,
+	registerPlugin,
+} from "filepond";
+import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
+import FilePondPluginImagePreview from "filepond-plugin-image-preview";
+import FilePondPluginImageResize from "filepond-plugin-image-resize";
+import FilePondPluginImageTransform from "filepond-plugin-image-transform";
+import { type RefObject, useEffect, useMemo, useRef } from "react";
+
+export { registerPlugin, FileStatus };
+
+registerPlugin(
+	FilePondPluginImageExifOrientation,
+	FilePondPluginImageResize,
+	FilePondPluginImagePreview,
+	FilePondPluginImageTransform,
+);
+
+let isMostLikelyMobile =
+	navigator.userAgent.match(/Android/i) ||
+	navigator.userAgent.match(/iPhone/i) ||
+	navigator.userAgent.match(/iPad/i) ||
+	navigator.userAgent.match(/iPod/i);
+
+const labels = {
+	labelIdle: isMostLikelyMobile
+		? getLocalizedString("Take a photo, or upload an existing image/file")
+		: getLocalizedString('Drag & Drop your files or <span class="filepond--label-action"> Browse </span>'),
+	labelInvalidField: getLocalizedString("Field contains invalid files"),
+	labelFileWaitingForSize: getLocalizedString("Waiting for size"),
+	labelFileSizeNotAvailable: getLocalizedString("Size not available"),
+	labelFileLoading: getLocalizedString("Loading"),
+	labelFileLoadError: getLocalizedString("Error during load"),
+	labelFileProcessing: getLocalizedString("Uploading"),
+	labelFileProcessingComplete: getLocalizedString("Upload complete"),
+	labelFileProcessingAborted: getLocalizedString("Upload cancelled"),
+	labelFileProcessingError: getLocalizedString("Error during upload"),
+	labelFileProcessingRevertError: getLocalizedString("Error during revert"),
+	labelFileRemoveError: getLocalizedString("Error during remove"),
+	labelTapToCancel: getLocalizedString("tap to cancel"),
+	labelTapToRetry: getLocalizedString("tap to retry"),
+	labelTapToUndo: getLocalizedString("tap to undo"),
+	labelButtonRemoveItem: getLocalizedString("Remove"),
+	labelButtonAbortItemLoad: getLocalizedString("Abort"),
+	labelButtonRetryItemLoad: getLocalizedString("Retry"),
+	labelButtonAbortItemProcessing: getLocalizedString("Cancel"),
+	labelButtonUndoItemProcessing: getLocalizedString("Undo"),
+	labelButtonRetryItemProcessing: getLocalizedString("Retry"),
+	labelButtonProcessItem: getLocalizedString("Upload"),
+	labelMaxFileSizeExceeded: getLocalizedString("File is too large"),
+	labelMaxFileSize: getLocalizedString("Maximum file size is {filesize}"),
+	labelMaxTotalFileSizeExceeded: getLocalizedString("Maximum total size exceeded"),
+	labelMaxTotalFileSize: getLocalizedString("Maximum total file size is {filesize}"),
+	labelFileTypeNotAllowed: getLocalizedString("File of invalid type"),
+	fileValidateTypeLabelExpectedTypes: getLocalizedString("Expects {allButLastType} or {lastType}"),
+	imageValidateSizeLabelFormatError: getLocalizedString("Image type not supported"),
+	imageValidateSizeLabelImageSizeTooSmall: getLocalizedString("Image is too small"),
+	imageValidateSizeLabelImageSizeTooBig: getLocalizedString("Image is too big"),
+	imageValidateSizeLabelExpectedMinSize: getLocalizedString("Minimum size is {minWidth} × {minHeight}"),
+	imageValidateSizeLabelExpectedMaxSize: getLocalizedString("Maximum size is {maxWidth} × {maxHeight}"),
+	imageValidateSizeLabelImageResolutionTooLow: getLocalizedString("Resolution is too low"),
+	imageValidateSizeLabelImageResolutionTooHigh: getLocalizedString("Resolution is too high"),
+	imageValidateSizeLabelExpectedMinResolution: getLocalizedString("Minimum resolution is {minResolution}"),
+	imageValidateSizeLabelExpectedMaxResolution: getLocalizedString("Maximum resolution is {maxResolution}"),
+};
+
+type FilePondProps<T extends Record<string, unknown>> = React.HTMLProps<HTMLInputElement> & {
+	dataObject: DataObject<T>;
+	fields: Partial<T>;
+	onUploadStart: () => void;
+	onFileUploaded: (error: FilePondErrorDescription | null, file: FilePondFile) => void;
+	onFinishedUploads: () => void;
+	onError: (error: string) => void;
+	onFileRemoved?: (primKey: string) => void;
+	/**
+	 * If the file should be uploaded to a blob field, set the field name here
+	 */
+	fieldName?: string;
+	/**
+	 * If the file should be added to an existing record, set the prim key here
+	 */
+	primKey?: string;
+	/**
+	 * If a reference to the file input element is needed, pass a ref here.
+	 */
+	inputRef?: RefObject<HTMLInputElement>;
+	/**
+	 * Options to pass to FilePond
+	 */
+	filePondOptions?: Partial<FilePondOptions>;
+	attachmentPrimKeys?: string[];
+	whereClause?: string;
+};
+
+function getFileUrl<T extends Record<string, unknown>>(
+	dataObject: DataObject<T>,
+	fieldName?: string,
+	primKey?: string,
+	action = "upload",
+) {
+	let url =
+		action === "upload"
+			? dataObject.dataHandler.getUploadUrl()
+			: dataObject.dataHandler.getFileStoreURL(primKey ?? "", fieldName ?? "");
+
+	if (action === "upload") {
+		url += "/";
+	}
+
+	return url?.replaceAll("//", "/") ?? "";
+}
+
+type FileStoreDataObjectRecord = {
+	PrimKey: string;
+	FileName: string | null;
+	FileSize: number | null;
+	FileRef: string | null;
+	ElementRef: string | null;
+	Damage: boolean;
+	DamageID: number | null;
+};
+
+export function FilePond<T extends FileStoreDataObjectRecord>({
+	dataObject,
+	fields,
+	onUploadStart,
+	onFileUploaded,
+	onFinishedUploads,
+	onFileRemoved,
+	onError,
+	fieldName,
+	filePondOptions,
+	primKey,
+	attachmentPrimKeys,
+	whereClause,
+	inputRef: inputRefProp,
+	...props
+}: FilePondProps<T>) {
+	let inputRef = useRef<HTMLInputElement>(null);
+	let pondRef = useRef<FilePondInstance | null>(null);
+	let filesData = useData(dataObject);
+	let { data: filesFetched } = useFetchData(dataObject, whereClause ?? "1=2");
+	let files = useMemo(() => {
+		if (whereClause) {
+			return filesFetched;
+		}
+		return filesData;
+	}, [whereClause, filesFetched, filesData]);
+	let clearFilesRef = useRef(false);
+
+	useEffect(() => {
+		return () => {
+			pondRef.current?.destroy();
+			pondRef.current = null;
+		};
+	}, []);
+
+	useEffect(() => {
+		async function removeUploadedFile(source: string, load: () => void, error: (error: string) => void) {
+			// this method is also called when we clear the files on data object
+			// refresh. Haven't found any elegant way to work around that, so instead
+			// we set this ref to true when we remove the files to have a way
+			// to discover why the files are being removed
+			if (clearFilesRef.current) return;
+
+			let { dataHandler } = dataObject;
+			try {
+				let result = await dataHandler.destroy({
+					PrimKey: source,
+				} as Partial<T>);
+
+				if (result) {
+					onFileRemoved?.(source);
+					load();
+				} else {
+					error("Failed to delete file on server. Delete request returned false");
+				}
+			} catch (err: any) {
+				error(
+					err.responseText ??
+						err.statusText ??
+						err.message ??
+						"Failed to delete file on server but no error was returned.",
+				);
+			}
+		}
+
+		let options: FilePondOptions = {
+			allowMultiple: Boolean(props.multiple),
+			allowImageResize: true,
+			imageResizeMode: "contain",
+			imageResizeTargetWidth: 2400,
+			imageResizeTargetHeight: 2400,
+			imageResizeUpscale: false,
+			...labels,
+			onaddfilestart: (file) => {
+				if (file.status !== 5 && file.status !== 6 && file.status !== 10) {
+					onUploadStart();
+				}
+			},
+			onprocessfile: (error, file) => {
+				onFileUploaded(error, file);
+
+				let refFiles = pondRef.current?.getFiles();
+				let found = refFiles?.find(
+					(file) => file.status !== 2 && file.status !== 5 && file.status !== 6 && file.status !== 10,
+				);
+
+				if (found === undefined) {
+					onFinishedUploads();
+				}
+			},
+			onprocessfiles: () => onFinishedUploads(),
+			onerror: (error) => onError(error.body),
+			beforeRemoveFile: () => {
+				if (confirm(getLocalizedString("Are you sure you want to remove this file?"))) {
+					return true;
+				}
+
+				return false;
+			},
+			server: {
+				load: getFileUrl(dataObject, fieldName, primKey, "view"),
+				restore: getFileUrl(dataObject, fieldName, primKey, "view"),
+
+				revert: removeUploadedFile,
+				remove: removeUploadedFile,
+
+				process: {
+					url: getFileUrl(dataObject, fieldName),
+					ondata: (formData) => {
+						let masterChildCriteria = dataObject.getParameter("masterChildCriteria");
+						let allFields = { ...masterChildCriteria, ...fields };
+
+						for (let [field, value] of Object.entries(allFields)) {
+							if (value !== undefined) {
+								formData.append(field, String(value));
+							}
+						}
+
+						return formData;
+					},
+					onload: (response) => JSON.parse(response),
+				},
+			},
+			...filePondOptions,
+		};
+
+		if (pondRef.current) {
+			pondRef.current.setOptions(options);
+		} else {
+			pondRef.current = create(inputRefProp?.current ?? inputRef.current ?? undefined, options);
+		}
+	}, [
+		dataObject,
+		props.multiple,
+		fields,
+		fieldName,
+		primKey,
+		inputRefProp,
+		filePondOptions,
+		onError,
+		onFileUploaded,
+		onUploadStart,
+		onFinishedUploads,
+		onFileRemoved,
+	]);
+
+	useEffect(() => {
+		if (pondRef.current) {
+			files.forEach((file, index) => {
+				let options: { index: number } & Partial<FilePondInitialFile["options"]> = {
+					index,
+					type: "local",
+				};
+
+				pondRef.current?.addFile(file.PrimKey, options);
+			});
+		}
+
+		return () => {
+			// Indicate that we are clearing the files because data has changed,
+			// to prevent the remove callback from deleting the files
+			clearFilesRef.current = true;
+			pondRef.current?.removeFiles();
+			clearFilesRef.current = false;
+		};
+	}, [files]);
+
+	return (
+		<div className="filepond--wrapper">
+			{attachmentPrimKeys && <input type="hidden" name="AttachmentPrimkeys" value={attachmentPrimKeys} />}
+
+			<input type="file" {...props} name="File" ref={inputRefProp ?? inputRef} />
+		</div>
+	);
+}

package/src/{LinkedCardList → components/LinkedCardList}/index.scss

@@ -1,4 +1,4 @@
-@use "../styles/variables";
+@use "../../styles/variables";
 
 $bullet-size: 0.7em;
 $line-width: 0.2em;

package/src/{PageBanner → components/PageBanner}/index.scss

@@ -1,4 +1,4 @@
-@use "../styles/variables";
+@use "../../styles/variables";
 
 .ObPageBanner-root {
 	background-color: variables.$brand-primary;

package/src/{PageBanner → components/PageBanner}/index.tsx

@@ -26,7 +26,6 @@ export const BannerImage = React.forwardRef<HTMLImageElement, BannerImageProps>(
 	ref,
 ) {
 	const { className, ...other } = props;
-	// biome-ignore lint/a11y/useAltText: should be provided by the user
 	return <img ref={ref} className={clsx("ObPageBanner-bannerImage", className)} alt="" {...other} />;
 });
 

package/src/{ProgressBar → components/ProgressBar}/index.scss

@@ -1,4 +1,4 @@
-@use "../styles/variables";
+@use "../../styles/variables";
 
 .ObProgressBar-root {
 	height: 1.5em;

package/src/{Sidebar → components/Sidebar}/index.tsx

@@ -3,10 +3,10 @@ import "./index.scss";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 
-export type SidebarProps = React.HTMLProps<HTMLDivElement> & {
+export type SidebarProps = React.HTMLAttributes<HTMLDivElement> & {
 	open?: boolean;
 	onClose?: () => void;
-	overlayProps: React.HTMLProps<HTMLDivElement>;
+	overlayProps?: React.HTMLAttributes<HTMLDivElement>;
 	pullRight?: boolean;
 	shadow?: boolean;
 };
@@ -106,6 +106,7 @@ export function Sidebar(props: SidebarProps) {
 			>
 				{(open || !hidden) && children}
 			</div>
+			{/** biome-ignore lint/a11y/noStaticElementInteractions: legacy component */}
 			<div
 				role="presentation"
 				tabIndex={-1}