@opalkelly/frontpanel-react-components/dist/cjs/index.js

React Component Library for OpalKelly FrontPanel application development

"use strict";var e=require("react"),n=require("@radix-ui/react-tooltip"),r=require("classnames"),t=require("@radix-ui/react-slider"),a=require("@radix-ui/react-select"),i=require("@radix-ui/react-scroll-area"),o=require("@opalkelly/frontpanel-platform-api");function l(e){var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var s,c,d=l(e),u=l(n),f=l(t),p=l(a),g=l(i);exports.NumeralSystem=void 0,(s=exports.NumeralSystem||(exports.NumeralSystem={}))[s.Binary=2]="Binary",s[s.Octal=8]="Octal",s[s.Decimal=10]="Decimal",s[s.Hexadecimal=16]="Hexadecimal",exports.ToggleState=void 0,(c=exports.ToggleState||(exports.ToggleState={}))[c.Off=0]="Off",c[c.On=1]="On";class m{get DigitCount(){return this._DigitCount}get NumeralSystem(){return this._NumeralSystem}get DigitChars(){return this._DigitChars}constructor(e,n){this._DigitCount=e,this._NumeralSystem=n,this._DigitChars=m.GetDigitChars(n)}GetDigitFromValue(e){let n=e%this._NumeralSystem;return n<0&&(n+=this._NumeralSystem),n.toString(this._NumeralSystem)}static GetDigitChars(e){let n;switch(e){case exports.NumeralSystem.Binary:n=m.BINARY_DIGITVALUES;break;case exports.NumeralSystem.Octal:n=m.OCTAL_DIGITVALUES;break;case exports.NumeralSystem.Decimal:n=m.DECIMAL_DIGITVALUES;break;case exports.NumeralSystem.Hexadecimal:n=m.HEXADECIMAL_DIGITVALUES;break;default:n=[]}return n}static ComputeDigitCountFromBits(e,n){const r=(1n<<BigInt(e))-1n;return this.ComputeDigitCountFromValue(r,n)}static ComputeDigitCountFromValue(e,n){const r=BigInt(n);let t,a=e;for(t=0n;t<m.MAX_DIGITS&&0n!==a;t++)a/=r;return t>0n?t:1n}}function h(e){let n=0;if(e>0n){let r=e;for(;r>0n;)r>>=1n,n++}else 0n===e&&(n=1);return n}m.MAX_DIGITS=1024,m.BINARY_DIGITVALUES=["0","1"],m.OCTAL_DIGITVALUES=["0","1","2","3","4","5","6","7"],m.DECIMAL_DIGITVALUES=[...m.OCTAL_DIGITVALUES,"8","9"],m.HEXADECIMAL_DIGITVALUES=[...m.DECIMAL_DIGITVALUES,"A","B","C","D","E","F"];const y=e.createContext({}),x=n=>{const{device:r,workQueue:t,eventSource:a}=n;return e.createElement(y.Provider,{value:{device:r,workQueue:t,eventSource:a}},n.children)};function b(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}x.displayName="FrontPanel";b("");const S=d.forwardRef(((e,n)=>d.createElement(u.Provider,null,e.children)));S.displayName="Application";b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n@font-face {\r\n    font-family: "Inter";\r\n    src: url("./fonts/Inter-VariableFont_slnt\\,wght.ttf") format("truetype");\r\n}\r\n');b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okButton {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    padding: var(--button-padding, 6px 12px);\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 8px;\r\n\r\n    /* Style */\r\n    border-width: 0px;\r\n    border-radius: 4px;\r\n    background: var(--brand-12, #44bd84);\r\n\r\n    /* Typography */\r\n    color: var(--Base-White, #fff);\r\n    text-align: center;\r\n    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n    font-size: var(--button-font-size, 12px);\r\n    font-style: normal;\r\n    font-weight: 600;\r\n    line-height: var(--button-line-height, 12px); /* 100% */\r\n\r\n    /* State Pressed */\r\n    &:is(:active) {\r\n        background: #329466;\r\n    }\r\n\r\n    /* State Disabled */\r\n    &:is(:disabled) {\r\n        background: var(--Gray-2, #d0d7df);\r\n    }\r\n\r\n    /* Size 1 */\r\n    &:where(.ok-r-size-1) {\r\n        --button-padding: 6px 12px;\r\n        --button-font-size: 12px;\r\n        --button-line-height: 12px;\r\n    }\r\n\r\n    /* Sizes 2*/\r\n    &:where(.ok-r-size-2) {\r\n        --button-padding: 10px 18px;\r\n        --button-font-size: 14px;\r\n        --button-line-height: 14px;\r\n    }\r\n\r\n    /* Sizes 3*/\r\n    &:where(.ok-r-size-3) {\r\n        --button-padding: 18px 22px;\r\n        --button-font-size: 20px;\r\n        --button-line-height: 20px;\r\n    }\r\n}\r\n');b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okTooltipContent {\r\n    /* Layout */\r\n    display: flex;\r\n    padding: 10px;\r\n    align-items: flex-end;\r\n\r\n    /* Style */\r\n    border-radius: 4px;\r\n    background: var(--Dark, #343434);\r\n\r\n    /* Drop shadow - tiny */\r\n    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.24);\r\n\r\n    user-select: none;\r\n    animation-duration: 200ms;\r\n    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\r\n    will-change: transform, opacity;\r\n}\r\n\r\n.okTooltipContent[data-state="delayed-open"][data-side="top"] {\r\n    animation-name: slideDownAndFade;\r\n}\r\n.okTooltipContent[data-state="delayed-open"][data-side="right"] {\r\n    animation-name: slideLeftAndFade;\r\n}\r\n.okTooltipContent[data-state="delayed-open"][data-side="bottom"] {\r\n    animation-name: slideUpAndFade;\r\n}\r\n.okTooltipContent[data-state="delayed-open"][data-side="left"] {\r\n    animation-name: slideRightAndFade;\r\n}\r\n\r\n.okTooltipText {\r\n    /* Typography */\r\n    color: var(--Light, #fff);\r\n    text-align: center;\r\n    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n    font-size: 12px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 12px; /* 100% */\r\n}\r\n\r\n@keyframes slideUpAndFade {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(2px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes slideRightAndFade {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateX(-2px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n}\r\n\r\n@keyframes slideDownAndFade {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(-2px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes slideLeftAndFade {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateX(2px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n}\r\n');const E=e.forwardRef(((n,t)=>{const{children:a,className:i,open:o,defaultOpen:l,onOpenChange:s,delayDuration:c,disableHoverableContent:d,content:f,container:p,forceMount:g,...m}=n,h={open:o,defaultOpen:l,onOpenChange:s,delayDuration:c,disableHoverableContent:d};return e.createElement(u.Root,{...h},e.createElement(u.Trigger,{asChild:!0},a),e.createElement(u.Portal,{container:p,forceMount:g},e.createElement(u.Content,{sideOffset:4,collisionPadding:10,...m,ref:t,className:r("okTooltipContent",i)},e.createElement("p",{className:"okTooltipText"},f))))}));function w(n){return function(r){return null!=r.tooltip?e.createElement(E,{content:r.tooltip},n):n}}E.displayName="Tooltip";const k=e.forwardRef(((n,t)=>{const{className:a,label:i,size:o=1,onButtonUp:l,onButtonDown:s,onButtonClick:c,...d}=n,u=w(e.createElement("button",{"data-disabled":d.disabled||void 0,...d,ref:t,className:r("okButton",a,"ok-r-size-"+o),onMouseDown:s,onMouseUp:l,onClick:c},i));return e.createElement(u,{...n})}));k.displayName="Button";var v;b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okIndicator {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    padding: var(--indicator-padding, 6px 12px);\r\n    justify-content: flex-start;\r\n    align-items: baseline;\r\n    gap: 4px;\r\n\r\n    /* Style */\r\n    border-radius: 4px;\r\n    border: 1px solid var(--Gray-2, #d0d7df);\r\n    background: var(--Light, #fff);\r\n\r\n    /* Indicator Icon Style */\r\n    svg.okIndicatorIcon {\r\n        width: var(--indicator-icon-width, 9px);\r\n        height: var(--indicator-icon-height, 9px);\r\n    }\r\n\r\n    /* Label Style */\r\n    .okIndicatorLabel {\r\n        /* Typography */\r\n        color: var(--Dark, #343434);\r\n        text-align: center;\r\n        /* TODO: Determine how to get Inter font */\r\n        font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n        font-size: var(--indicator-font-size, 12px);\r\n        font-style: normal;\r\n        font-weight: 500;\r\n        line-height: var(--indicator-line-height, 12px); /* 100% */\r\n    }\r\n\r\n    /* Size 1 */\r\n    &:where(.ok-r-size-1) {\r\n        --indicator-padding: 6px 12px;\r\n        --indicator-font-size: 12px;\r\n        --indicator-line-height: 12px;\r\n        --indicator-icon-width: 9px;\r\n        --indicator-icon-height: 9px;\r\n    }\r\n\r\n    /* Sizes 2 */\r\n    &:where(.ok-r-size-2) {\r\n        --indicator-padding: 10px 18px;\r\n        --indicator-font-size: 14px;\r\n        --indicator-line-height: 14px;\r\n        --indicator-icon-width: 10px;\r\n        --indicator-icon-height: 10px;\r\n    }\r\n\r\n    /* Sizes 3 */\r\n    &:where(.ok-r-size-3) {\r\n        --indicator-padding: 18px 22px;\r\n        --indicator-font-size: 20px;\r\n        --indicator-line-height: 20px;\r\n        --indicator-icon-width: 15px;\r\n        --indicator-icon-height: 15px;\r\n    }\r\n}\r\n'),function(e){e[e.Up=0]="Up",e[e.Down=1]="Down"}(v||(v={}));const I=d.forwardRef(((e,n)=>{const{direction:r=v.Down,color:t="#343434",...a}=e;return d.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",...a,ref:n},((e,n)=>{let r;return e===v.Up||v.Down,r=d.createElement("path",{d:"M6.75593 7.12713C6.35716 7.58759 5.64284 7.58759 5.24407 7.12713L2.23682 3.65465C1.67594 3.00701 2.136 2 2.99275 2L9.00725 2C9.864 2 10.3241 3.00701 9.76318 3.65465L6.75593 7.12713Z",fill:n}),r})(r,t))}));var N;I.displayName="ChevronIcon",function(e){e[e.Up=0]="Up",e[e.Down=1]="Down"}(N||(N={}));const C=d.forwardRef(((e,n)=>{const{direction:r=N.Down,color:t="#343434",...a}=e;return d.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"4",viewBox:"0 0 10 4",fill:"none",...a,ref:n},((e,n)=>{let r;switch(e){case N.Up:r=d.createElement("path",{d:"M5 5.1656e-07L10 4L0 4L5 5.1656e-07Z",fill:n});break;case N.Down:r=d.createElement("path",{d:"M5 4L0 0L10 8.88334e-07L5 4Z",fill:n});break;default:r=d.createElement("path",{d:"M5 5.1656e-07L10 4L0 4L5 5.1656e-07Z",fill:n})}return r})(r,t))}));C.displayName="IndicatorArrowIcon";const T=d.forwardRef(((e,n)=>{const{color:r="#343434",...t}=e;return d.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"1",viewBox:"0 0 10 1",fill:"none",...t,ref:n},d.createElement("path",{d:"M8.74228e-08 -8.74228e-07L10 -9.53674e-07L10 1L0 0.999999L8.74228e-08 -8.74228e-07Z",fill:r}))}));T.displayName="IndicatorBarIcon";const z=d.forwardRef(((e,n)=>{const{state:r,color:t="#D0D7DF",colorOnState:a="#44BD84",colorOffState:i="#D0D7DF"}=e;return d.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",...e,ref:n},((e,n,r,t)=>{let a;switch(e){case exports.ToggleState.On:a=d.createElement("path",{d:"M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10Z",fill:r});break;case exports.ToggleState.Off:a=d.createElement("path",{d:"M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10Z",fill:t});break;default:a=d.createElement("path",{d:"M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10Z",fill:n})}return a})(r,t,a,i))}));z.displayName="IndicatorStateIcon";const D=d.forwardRef(((e,n)=>{const{state:r,color:t="#343434",colorOnState:a="#44BD84",...i}=e;return d.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",...i,ref:n},((e,n,r)=>{let t;switch(e){case exports.ToggleState.On:t=d.createElement(d.Fragment,null,d.createElement("circle",{cx:"7",cy:"7",r:"6",stroke:n,strokeWidth:"2"}),d.createElement("circle",{cx:"7",cy:"7",r:"3",fill:r}));break;case exports.ToggleState.Off:default:t=d.createElement("circle",{cx:"7",cy:"7",r:"6",stroke:n,strokeWidth:"2"})}return t})(r,t,a))}));D.displayName="RadioToggleStateIcon";const L=d.forwardRef(((e,n)=>{const{state:r,color:t="white",colorOnState:a="white",colorOffState:i="white",...o}=e;return d.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"8",height:"8",viewBox:"0 0 8 8",fill:"none",...o,ref:n},((e,n,r,t)=>{let a;switch(e){case exports.ToggleState.On:a=d.createElement("circle",{cx:"4",cy:"4",r:"3.75",fill:r});break;case exports.ToggleState.Off:a=d.createElement("circle",{cx:"4",cy:"4",r:"3.75",fill:t});break;default:a=d.createElement("circle",{cx:"4",cy:"4",r:"3.75",fill:n})}return a})(r,t,a,i))}));L.displayName="SwitchToggleStateIcon";const R=e.forwardRef(((n,t)=>{const{className:a,label:i,size:o=1,state:l,...s}=n,c=w(e.createElement("span",{...s,ref:t,className:r("okIndicator",a,"ok-r-size-"+o)},e.createElement(z,{className:"okIndicatorIcon",state:l?exports.ToggleState.On:exports.ToggleState.Off}),e.createElement("span",{className:r("okIndicatorLabel")},i)));return e.createElement(c,{...n})}));R.displayName="Indicator";b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okLabel {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: 4px;\r\n\r\n    /* Text Style */\r\n    .okLabelText {\r\n        /* Typography */\r\n        color: var(--Dark, #343434);\r\n        font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n        font-size: 12px;\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: 12px; /* 100% */\r\n    }\r\n\r\n    /* Label Position Left Top*/\r\n    &:where(.ok-pos-left-top) {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    /* Label Position Left Bottom*/\r\n    &:where(.ok-pos-left-bottom) {\r\n        flex-direction: column-reverse;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    /* Label Position Right Top*/\r\n    &:where(.ok-pos-right-top) {\r\n        flex-direction: column;\r\n        align-items: flex-end;\r\n    }\r\n\r\n    /* Label Position Right Bottom*/\r\n    &:where(.ok-pos-right-bottom) {\r\n        flex-direction: column-reverse;\r\n        align-items: flex-end;\r\n    }\r\n}\r\n');const O=e.forwardRef(((n,t)=>{const{className:a,text:i,horizontalPosition:o="left",verticalPosition:l="top",children:s,...c}=n;return e.createElement("div",{...c,ref:t,className:r("okLabel",a,"ok-pos-"+o+"-"+l)},e.createElement("span",{className:r("okLabelText")},i),s)}));O.displayName="Label";b("/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okNumberDisplay {\r\n    /* Layout */\r\n    display: flex;\r\n    padding: var(--number-display-padding, 6px 12px);\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    gap: 4px;\r\n\r\n    /* Style */\r\n    border-radius: 4px;\r\n    border: 1px solid var(--Gray-2, #d0d7df);\r\n    background: #f5f5f5;\r\n\r\n    /* Content Style */\r\n    .okNumberDisplayContent {\r\n        display: flex;\r\n        padding: var(--spacing-0, 0px);\r\n        align-items: center;\r\n        justify-content: flex-end;\r\n        gap: 8px;\r\n        flex: 1 0 0;\r\n    }\r\n\r\n    /* Text Style */\r\n    .okNumberDisplayText {\r\n        /* Typography */\r\n        color: var(--Dark, #343434);\r\n        text-align: center;\r\n        font-family: Monaco;\r\n        font-size: var(--number-display-font-size, 12px);\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: var(--number-display-line-height, 12px); /* 100% */\r\n    }\r\n\r\n    /* Size 1 */\r\n    &:where(.ok-r-size-1) {\r\n        --number-display-padding: 6px 6px;\r\n        --number-display-font-size: 12px;\r\n        --number-display-line-height: 12px;\r\n    }\r\n\r\n    /* Sizes 2 */\r\n    &:where(.ok-r-size-2) {\r\n        --number-display-padding: 6px 10px;\r\n        --number-display-font-size: 14px;\r\n        --number-display-line-height: 14px;\r\n    }\r\n\r\n    /* Sizes 3 */\r\n    &:where(.ok-r-size-3) {\r\n        --number-display-padding: 6px 18px;\r\n        --number-display-font-size: 20px;\r\n        --number-display-line-height: 20px;\r\n    }\r\n}\r\n");const A=e.forwardRef(((n,t)=>{const{className:a,label:i,size:o=1,numeralSystem:l=exports.NumeralSystem.Decimal,decimalScale:s=0,maximumValue:c,minimumValue:d,value:u}=n,f=e.useMemo((()=>{const e=m.ComputeDigitCountFromValue(c,l),n=m.ComputeDigitCountFromValue(d,l);return e>n?e:n}),[c,d,l]),p=e.useMemo((()=>e.createElement("span",{className:r("okNumberDisplayText","ok-r-size-"+o)},"-")),[o]),g=w(e.createElement("div",{ref:t,className:r("okNumberDisplay",a,"ok-r-size-"+o)},e.createElement("div",{className:"okNumberDisplayContent"},u<0n&&p,e.createElement("span",{className:"okNumberDisplayText"},function(e,n,r,t){let a;if(null!=e){const i=e>=0n?e:-e,o=Number(n),l=i.toString(r).padStart(o,"0");if(r===exports.NumeralSystem.Decimal&&t>0){const e=o-t;if(e>0)a=l.slice(0,e)+"."+l.slice(e);else{const n="0.";a=n.padEnd(n.length-e,"0")+l}}else a=l}else a="Error";return a}(u,f,l,s)))));if(null!=i)return e.createElement(O,{...i},e.createElement("div",{style:{width:"100%"}},e.createElement(g,{...n})));e.createElement(g,{...n})}));A.displayName="NumberDisplay";b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okNumberEntry {\r\n    /* Layout */\r\n    display: flex;\r\n    padding: var(--number-entry-padding, 6px);\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n\r\n    /* Style */\r\n    border-radius: 4px;\r\n    border: 1px solid var(--brand-12, #44bd84);\r\n    background: var(--Light, #fff);\r\n\r\n    /* Content Style */\r\n    .okNumberEntryContent {\r\n        display: flex;\r\n        height: auto; /*32px;*/\r\n        justify-content: flex-end;\r\n        align-items: center;\r\n        gap: var(--spacing-0, 0px);\r\n        align-self: stretch;\r\n    }\r\n\r\n    /* Text Style */\r\n    .okNumberEntryText {\r\n        /* Typography */\r\n        color: var(--Dark, #343434);\r\n        text-align: center;\r\n        font-family: Monaco;\r\n        font-size: var(--number-entry-font-size, 12px);\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: var(--number-entry-line-height, 12px); /* 100% */\r\n        letter-spacing: 1.26px;\r\n    }\r\n\r\n    /* Size 1 */\r\n    &:where(.ok-r-size-1) {\r\n        --number-entry-padding: 1px 6px;\r\n        --number-entry-font-size: 12px;\r\n        --number-entry-line-height: 12px;\r\n    }\r\n\r\n    /* Sizes 2 */\r\n    &:where(.ok-r-size-2) {\r\n        --number-entry-padding: 1px 10px;\r\n        --number-entry-font-size: 14px;\r\n        --number-entry-line-height: 14px;\r\n    }\r\n\r\n    /* Sizes 3 */\r\n    &:where(.ok-r-size-3) {\r\n        --number-entry-padding: 1px 18px;\r\n        --number-entry-font-size: 20px;\r\n        --number-entry-line-height: 20px;\r\n    }\r\n}\r\n\r\n.okNumberEntry[data-disabled="true"] {\r\n    border: 1px solid var(--Gray-2, #d0d7df);\r\n    opacity: 0.5;\r\n    background: var(--Gray-3, #e7ebef);\r\n\r\n    pointer-events: none;\r\n}\r\n');b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okDigitEntry {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 1px;\r\n\r\n    /* Content Style */\r\n    .okDigitEntryContent {\r\n        /* Layout */\r\n        display: flex;\r\n        padding: var(--spacing-xxs, 2px);\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n\r\n        /* Style */\r\n        border-radius: 1px;\r\n\r\n        /* Typography */\r\n        color: var(--Dark, #343434);\r\n        text-align: center;\r\n        font-family: Monaco;\r\n        font-size: var(--digit-font-size, 12px);\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: var(--digit-line-height, 12px); /* 200% */\r\n        letter-spacing: 1.26px;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    /* Increment Indicator Style */\r\n    .okDigitEntryIncrementIndicator {\r\n        visibility: hidden;\r\n    }\r\n\r\n    /* Decrement Indicator Style */\r\n    .okDigitEntryDecrementIndicator {\r\n        visibility: hidden;\r\n    }\r\n\r\n    /* Size 1 */\r\n    &:where(.ok-r-size-1) {\r\n        --digit-font-size: 12px;\r\n        --digit-line-height: 12px;\r\n    }\r\n\r\n    /* Sizes 2 */\r\n    &:where(.ok-r-size-2) {\r\n        --digit-font-size: 14px;\r\n        --digit-line-height: 14px;\r\n    }\r\n\r\n    /* Sizes 3 */\r\n    &:where(.ok-r-size-3) {\r\n        --digit-font-size: 20px;\r\n        --digit-line-height: 20px;\r\n    }\r\n}\r\n\r\ndiv.okDigitEntry:focus {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 1px;\r\n\r\n    /* Style */\r\n    outline: none;\r\n    overscroll-behavior: none;\r\n\r\n    /* Content Style */\r\n    .okDigitEntryContent {\r\n        /* Layout */\r\n        display: flex;\r\n        padding: var(--spacing-xxs, 2px);\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n\r\n        /* Style */\r\n        border-radius: 1px;\r\n        background: var(--brand-12, #44bd84);\r\n\r\n        /* Typography */\r\n        color: var(--Light, #fff);\r\n        text-align: center;\r\n        font-family: Monaco;\r\n        font-size: var(--digit-font-size, 12px);\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: var(--digit-line-height, 12px); /* 200% */\r\n        letter-spacing: 1.26px;\r\n    }\r\n\r\n    .okDigitEntryIncrementIndicator {\r\n        visibility: visible;\r\n    }\r\n\r\n    .okDigitEntryDecrementIndicator {\r\n        visibility: visible;\r\n    }\r\n\r\n    .okDigitEntryIncrementIndicator[data-enabled="false"] {\r\n        opacity: 0.25;\r\n    }\r\n\r\n    .okDigitEntryDecrementIndicator[data-enabled="false"] {\r\n        opacity: 0.25;\r\n    }\r\n}\r\n');const B=n=>{const t=e.useRef(null),{className:a,variant:i="standard",size:o=1,value:l,maximum:s,minimum:c,numeralSystem:d=exports.NumeralSystem.Decimal,onValueChanged:u}=n,f=e.useRef(l);f.current=n.value;const p=e.useRef(u);p.current=u;e.useEffect((()=>{const e=e=>{e.deltaY<0?(p.current?.(f.current+1,!1),e.stopPropagation(),e.preventDefault()):e.deltaY>0&&(p.current?.(f.current-1,!1),e.stopPropagation(),e.preventDefault())};return t.current?.addEventListener("wheel",e,{passive:!1}),()=>{t.current?.removeEventListener("wheel",e)}}),[t]);const g=null==s||l<s,m=null==c||l>c;return e.createElement("div",{className:r("okDigitEntry",a,"ok-r-size-"+o),ref:t,tabIndex:-1,onMouseEnter:e=>e.currentTarget.focus(),onMouseLeave:e=>e.currentTarget.blur(),onKeyDown:e=>{let n=!1;switch(e.key){case"ArrowUp":u?.(l+1,!1),n=!0;break;case"ArrowDown":u?.(l-1,!1),n=!0;break;case"ArrowRight":{const r=e.currentTarget.nextElementSibling;r?.focus(),n=!0}break;case"ArrowLeft":{const r=e.currentTarget.previousElementSibling;r?.focus(),n=!0}break;default:n=!1}if(n)e.stopPropagation(),e.preventDefault();else{const n=parseInt(e.key,d);if(!Number.isNaN(n)){u?.(n,!0);const r=e.currentTarget.nextElementSibling;r?.focus()}}}},e.createElement((()=>{let n;switch(i){case"standard":n=e.createElement(C,{className:r("okDigitEntryIncrementIndicator"),direction:N.Up,color:"#343434","data-enabled":g});break;case"compact":n=e.createElement(T,{className:r("okDigitEntryIncrementIndicator"),color:"#343434","data-enabled":g});break;default:n=null}return n}),null),e.createElement("div",{className:r("okDigitEntryContent","ok-r-size-"+o)},Math.abs(l).toString(Number(d))),e.createElement((()=>{let n;switch(i){case"standard":n=e.createElement(C,{className:r("okDigitEntryDecrementIndicator"),direction:N.Down,color:"#343434","data-enabled":m});break;case"compact":n=e.createElement(T,{className:r("okDigitEntryDecrementIndicator"),color:"#343434","data-enabled":m});break;default:n=null}return n}),null))};B.displayName="DigitEntry";const V=n=>{const{variant:t="standard",size:a=1,numeralSystem:i,decimalScale:o=0,digitStates:l,onDigitStatesChange:s}=n;return e.createElement(e.Fragment,null,(()=>{const n=l.map(((n,r)=>e.createElement(B,{key:"digit-"+n.id,variant:t,size:a,numeralSystem:i,value:n.value,maximum:n.maximum,minimum:n.minimum,onValueChanged:(e,n)=>{const t=[...l];t[r]={...l[r],value:e},s?.(t,n)}})));if(i===exports.NumeralSystem.Decimal&&o>0){const t=o-n.length;if(t<0)n.splice(o,0,e.createElement("span",{key:"digit-decimal-point",className:r("okNumberEntryText","ok-r-size-"+a)},"."));else{const i="0.",o=i.padEnd(i.length+t,"0");n.push(e.createElement("span",{key:"digit-decimal-prefix",className:r("okNumberEntryText","ok-r-size-"+a)},o))}}return n.reverse()})())};V.displayName="NumberEntryDigits";const F=e.forwardRef(((n,r)=>{const{label:t,tooltip:a,...i}=n,o=null!=t,l=null!=a;return o&&l?e.createElement(O,{...t},e.createElement(E,{content:a},e.createElement("div",{style:{width:"100%"}},e.createElement(P,{ref:r,...i})))):o?e.createElement(O,{...t},e.createElement("div",{style:{width:"100%"}},e.createElement(P,{ref:r,...i}))):l?e.createElement(E,{content:a},e.createElement("div",null,e.createElement(P,{ref:r,...i}))):e.createElement(P,{ref:r,...i})}));F.displayName="NumberEntry";const P=e.forwardRef(((n,t)=>{const{className:a,variant:i="standard",size:o=1,disabled:l=!1,numeralSystem:s=exports.NumeralSystem.Decimal,decimalScale:c=0,maximumValue:d,minimumValue:u,value:f,onValueChange:p}=n,g=e.useMemo((()=>{const e=m.ComputeDigitCountFromValue(d,s),n=m.ComputeDigitCountFromValue(u,s);return Number(e>n?e:n)}),[d,u,s]),h=BigInt(s),y=G(f,d,u,h,g);return e.createElement("div",{ref:t,className:r("okNumberEntry",a,"ok-r-size-"+o),"data-disabled":l||void 0},e.createElement("div",{className:"okNumberEntryContent"},f<0n&&(n=>e.createElement("span",{className:r("okNumberEntryText","ok-r-size-"+n)},"-"))(o),e.createElement(V,{variant:i,size:o,numeralSystem:s,decimalScale:c,digitStates:y,onDigitStatesChange:(e,n)=>{let r=j(e,h);r>=0n!=f>=0n&&0n!==r&&(r+=2n*-f),r<=d&&r>=u&&p?.(r)}})))}));P.displayName="NumberEntryImpl";const j=(e,n)=>{const r=e.length-1;let t=BigInt(e[r].value);for(let a=r-1;a>=0;a--)t=t*n+BigInt(e[a].value);return t},G=(e,n,r,t,a)=>{const i=[];let o=e,l=n-e,s=r-e;for(let e=0;e<a;e++){const n=Number(o%t),r=Math.floor(Number(l+BigInt(n))),a=Math.ceil(Number(s+BigInt(n)));i[e]={id:e,value:n,maximum:M(r,Number(t)),minimum:M(a,Number(t))},o/=t,l/=t,s/=t}return i},M=(e,n)=>{let r;return r=e>=0?e<n?e:void 0:e>-n?e:void 0,r};b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okRangeSlider {\r\n    --range-slider-thumb-outline-size: 2px;\r\n    --range-slider-thumb-border-size: 2px;\r\n    --range-slider-thumb-size: 22px;\r\n    --range-slider-track-size: 8px;\r\n\r\n    /* Layout */\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 4px;\r\n    align-self: stretch;\r\n    width: 100%;\r\n    height: fit-content;\r\n\r\n    /* Typography */\r\n    color: var(--Dark, #343434);\r\n    text-align: right;\r\n    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n    font-size: 12px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 12px; /* 100% */\r\n}\r\n\r\n/* State Disabled */\r\n.okRangeSlider[data-disabled="true"] {\r\n    opacity: 0.5;\r\n}\r\n\r\n.okRangeSliderLabel {\r\n    width: 100%;\r\n}\r\n\r\n.okRangeSliderRoot {\r\n    /* Layout */\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: var(--range-slider-thumb-size);\r\n    min-width: 100px;\r\n\r\n    /* Style */\r\n    user-select: none;\r\n    touch-action: none;\r\n}\r\n\r\n.okRangeSliderTrack {\r\n    /* Layout */\r\n    position: relative;\r\n    flex-grow: 1;\r\n    height: var(--range-slider-track-size);\r\n\r\n    /* Style */\r\n    background: var(--Gray-2, #d0d7df);\r\n    border-radius: 9999px;\r\n}\r\n\r\n.okRangeSliderRange {\r\n    /* Layout */\r\n    position: absolute;\r\n    height: 100%;\r\n\r\n    /* Style */\r\n    background-color: #44bd84;\r\n    border-radius: inherit;\r\n}\r\n\r\n.okRangeSliderThumb {\r\n    /* Layout */\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    width: calc(\r\n        var(--range-slider-thumb-size) -\r\n            (2 * (var(--range-slider-thumb-border-size) + var(--range-slider-thumb-outline-size)))\r\n    );\r\n    height: calc(\r\n        var(--range-slider-thumb-size) -\r\n            (2 * (var(--range-slider-thumb-border-size) + var(--range-slider-thumb-outline-size)))\r\n    );\r\n\r\n    /* Style */\r\n    background: var(--Base-White, #fff);\r\n    border: var(--range-slider-thumb-border-size) solid var(--brand-12, #44bd84);\r\n    border-radius: var(--range-slider-thumb-size);\r\n}\r\n\r\n.okRangeSliderThumb:hover {\r\n    background-color: #44bd84;\r\n}\r\n\r\n.okRangeSliderThumb:focus {\r\n    outline: none;\r\n    box-shadow: 0 0 0 var(--range-slider-thumb-outline-size) #d0d7df;\r\n}\r\n\r\n.okRangeSliderThumbLabel {\r\n    /* Layout */\r\n    position: absolute;\r\n    bottom: -14px;\r\n}\r\n');const W=e.forwardRef(((n,r)=>{const{label:t,tooltip:a,...i}=n,o=null!=t,l=null!=a;return o&&l?e.createElement(O,{className:"okRangeSliderLabel",...t},e.createElement(E,{content:a},e.createElement("div",{style:{width:"100%"}},e.createElement(_,{ref:r,...i})))):o?e.createElement(O,{className:"okRangeSliderLabel",...t},e.createElement("div",{style:{width:"100%"}},e.createElement(_,{ref:r,...i}))):l?e.createElement(E,{content:a},e.createElement("div",{style:{width:"100%"}},e.createElement(_,{ref:r,...i}))):e.createElement(_,{ref:r,...i})}));W.displayName="RangeSlider";const _=e.forwardRef(((n,t)=>{const{className:a,tooltip:i,minimumValue:o=0,maximumValue:l=100,onValueChange:s,defaultValue:c=o,value:d,valueStep:u=1,showThumbLabel:p=!0,showTrackLabels:g=!0,disabled:m=!1}=n,h=d??c,[y,x]=e.useState([h]);e.useEffect((()=>{x([h])}),[h]);const b=e.useCallback((e=>{x([e]),s?.(e)}),[s]),S=()=>e.createElement(f.Track,{className:"okRangeSliderTrack"},e.createElement(f.Range,{className:"okRangeSliderRange"})),w=null!=i;return e.createElement("div",{className:r("okRangeSlider",a),"data-disabled":m||void 0},g?e.createElement("span",null,o):null,e.createElement(f.Root,{ref:t,min:o,max:l,step:u,value:y,onValueChange:e=>b(e[0]),orientation:"horizontal",className:"okRangeSliderRoot",disabled:m},w?e.createElement(E,{content:i},e.createElement(S,null)):e.createElement(S,null),e.createElement(f.Thumb,{className:"okRangeSliderThumb"},p?e.createElement("div",{className:"okRangeSliderThumbLabel"},y):null)),g?e.createElement("span",null,l):null)}));_.displayName="RangeSliderImpl";const U=e.createContext({label:{text:"",horizontalPosition:"right",verticalPosition:"top"},size:1,value:void 0}),K=n=>{const{label:r,children:t,size:a=1,tooltip:i,value:o,...l}=n;return e.createElement(p.Root,{value:o,...l},e.createElement(U.Provider,{value:e.useMemo((()=>({label:r,size:a,tooltip:i,value:o})),[r,a,i,o])},t))};K.displayName="SelectEntryRoot";b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okSelectEntryContent {\r\n    /* Layout */\r\n    width: var(--radix-select-trigger-width);\r\n    max-height: var(--radix-select-content-available-height);\r\n    display: flex;\r\n    padding: 10px 18px;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n    justify-content: center;\r\n    align-items: stretch;\r\n\r\n    /* Style */\r\n    border-radius: 4px;\r\n    border: 1px solid var(--Gray-2, #d0d7df);\r\n    background: var(--Light, #fff);\r\n    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.24);\r\n\r\n    .okSelectEntryContentInner {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n    }\r\n\r\n    /* ScrollArea Root Style */\r\n    .okScrollArea {\r\n        display: flex;\r\n        flex-direction: column;\r\n        overflow: hidden;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n\r\n    /* ScrollArea Viewport Style */\r\n    .okScrollAreaViewport {\r\n        display: flex;\r\n        flex-direction: column;\r\n        width: 100%;\r\n        height: 100%;\r\n        gap: 10px;\r\n\r\n        /* Stop Chrome back/forward two-finger swipe */\r\n        overscroll-behavior-x: contain;\r\n\r\n        &:where(:focus-visible) + :where(.rt-ScrollAreaViewportFocusRing) {\r\n            position: absolute;\r\n            inset: 0;\r\n            pointer-events: none;\r\n            outline: 2px solid var(--focus-8);\r\n            outline-offset: -2px;\r\n        }\r\n    }\r\n\r\n    /* ScrollArea Scrollbar Style */\r\n    .okScrollAreaScrollbar {\r\n        display: flex;\r\n        /* Ensures no selection */\r\n        user-select: none;\r\n        /* Disable browser handling of all panning and zooming gestures on touch devices */\r\n        touch-action: none;\r\n\r\n        &:where([data-orientation="vertical"]) {\r\n            flex-direction: column;\r\n            width: 4px;\r\n        }\r\n        &:where([data-orientation="horizontal"]) {\r\n            flex-direction: row;\r\n            height: 4px;\r\n        }\r\n    }\r\n\r\n    /* ScrollArea Thumb Style */\r\n    .okScrollAreaThumb {\r\n        position: relative;\r\n\r\n        &::before {\r\n            content: "";\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: 100%;\r\n            height: 100%;\r\n            min-width: var(--space-4);\r\n            min-height: var(--space-4);\r\n        }\r\n    }\r\n}\r\n');const Q=e.forwardRef(((n,t)=>{const{className:a,children:i,container:o,...l}=n,{size:s}=e.useContext(U);return e.createElement(p.Portal,{container:o},e.createElement(p.Content,{sideOffset:4,...l,ref:t,className:r("okSelectEntryContent",a,"ok-r-size-"+s),position:"popper",align:"start"},e.createElement(g.Root,{type:"auto",className:"okScrollArea"},e.createElement(p.Viewport,{asChild:!0},e.createElement(g.Viewport,{className:"okScrollAreaViewport"},e.createElement("div",{className:"okSelectEntryContentInner"},i))),e.createElement(g.Scrollbar,{className:"okScrollAreaScrollbar",orientation:"vertical"},e.createElement(g.Thumb,{className:"okScrollAreaThumb"})))))}));Q.displayName="SelectEntryContent";b("/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okSelectEntryGroup {\r\n    /* Layout */\r\n    display: flex;\r\n    padding: 0px;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    align-self: stretch;\r\n    gap: 10px;\r\n}\r\n");const X=e.forwardRef(((n,t)=>e.createElement(p.Group,{...n,ref:t,className:r("okSelectEntryGroup",n.className)})));X.displayName="SelectEntryGroup";b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okSelectEntryItem {\r\n    /* Layout */\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n\r\n    /* Style */\r\n    color: var(--Dark, #343434);\r\n    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 14px; /* 100% */\r\n\r\n    /* Indicator Style */\r\n    .okSelectEntryItemIndicator {\r\n        width: 14px;\r\n        height: 14px;\r\n    }\r\n}\r\n\r\n.okSelectEntryItem[data-disabled] {\r\n    opacity: 0.5;\r\n    pointer-events: none;\r\n}\r\n.okSelectEntryItem[data-highlighted] {\r\n    outline: none;\r\n}\r\n');const Y=e.forwardRef(((n,t)=>{const{className:a,children:i,...o}=n,{size:l,value:s}=e.useContext(U);return e.createElement(p.Item,{...o,ref:t,className:r("okSelectEntryItem",a,"ok-r-size-"+l)},e.createElement(D,{state:s===n.value?exports.ToggleState.On:exports.ToggleState.Off}),e.createElement(p.ItemText,null,i))}));Y.displayName="SelectEntryItem";b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okSelectEntryLabel {\r\n    /* Typography */\r\n    color: var(--Gray-1, #989da3);\r\n    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n    font-size: 10px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 12px; /* 120% */\r\n}\r\n');const Z=e.forwardRef(((n,t)=>{const{className:a,...i}=n,{size:o}=e.useContext(U);return e.createElement(p.Label,{...i,ref:t,className:r("okSelectEntryLabel",a,"ok-r-size-"+o)})}));Z.displayName="SelectEntryLabel";b("/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okSelectEntrySeparator {\r\n    height: 1px;\r\n\r\n    background: #d0d7df;\r\n}\r\n");const q=e.forwardRef(((n,t)=>e.createElement(p.Separator,{...n,ref:t,className:r("okSelectEntrySeparator",n.className)})));q.displayName="SelectEntrySeparator";b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okSelectEntryTrigger {\r\n    /* Layout */\r\n    display: flex;\r\n    padding: 0px 18px;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 8px;\r\n\r\n    /* Style */\r\n    border-radius: 4px;\r\n    border: 1px solid var(--Gray-2, #d0d7df);\r\n    background: var(--Light, #fff);\r\n\r\n    /* Typography */\r\n    color: var(--Dark, #343434);\r\n    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 14px; /* 100% */\r\n\r\n    /* State Disabled */\r\n    &:is(:disabled) {\r\n        opacity: 0.5;\r\n        background: var(--Gray-3, #e7ebef);\r\n    }\r\n}\r\n\r\n.okSelectEntryTriggerInner {\r\n    /* Layout */\r\n    padding: 10px 0px;\r\n\r\n    /* Style */\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n}\r\n\r\n/* State Disabled */\r\n.okSelectEntryTrigger[data-disabled="true"] {\r\n    opacity: 0.5;\r\n}\r\n');const H=e.forwardRef(((n,r)=>{const{label:t,tooltip:a,...i}=e.useContext(U),o=null!=t,l=null!=a;return o&&l?e.createElement(O,{...t},e.createElement(E,{content:a},e.createElement(J,{ref:r,...n,style:{width:"100%"}}))):o?e.createElement(O,{...t},e.createElement(J,{ref:r,...i,style:{width:"100%"}})):l?e.createElement(E,{content:a},e.createElement("div",null,e.createElement(J,{ref:r,...i}))):e.createElement(J,{ref:r,...i})}));H.displayName="SelectEntryTrigger";const J=e.forwardRef(((n,t)=>{const{className:a,placeholder:i,...o}=n,{size:l}=e.useContext(U);return e.createElement(p.Trigger,{asChild:!0},e.createElement("button",{...o,ref:t,className:r("okSelectEntryTrigger",a,"ok-r-size-"+l)},e.createElement("span",{className:"okSelectEntryTriggerInner"},e.createElement(p.Value,{placeholder:i})),e.createElement(p.Icon,{asChild:!0},e.createElement(I,{direction:v.Down}))))}));J.displayName="SelectEntryTriggerImpl";const $=Object.assign({},{Root:K,Trigger:H,Content:Q,Item:Y,Group:X,Label:Z,Separator:q});b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okToggle {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    padding: var(--toggle-padding, 6px 12px);\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 4px;\r\n\r\n    color: var(--base-white, #fff);\r\n\r\n    /* Style */\r\n    border-width: 0px;\r\n    border-radius: 4px;\r\n    background: var(--brand-12, #44bd84);\r\n\r\n    /* Typography */\r\n    color: var(--Base-White, #fff);\r\n    text-align: center;\r\n    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n    font-size: var(--toggle-font-size, 12px);\r\n    font-style: normal;\r\n    font-weight: 600;\r\n    line-height: 12px; /* 100% */\r\n\r\n    /* Size 1 */\r\n    &:where(.ok-r-size-1) {\r\n        --toggle-padding: 6px 12px;\r\n        --toggle-font-size: 12px;\r\n        --toggle-line-height: 12px;\r\n    }\r\n\r\n    /* Size 2 */\r\n    &:where(.ok-r-size-2) {\r\n        --toggle-padding: 10px 18px;\r\n        --toggle-font-size: 14px;\r\n        --toggle-line-height: 14px;\r\n    }\r\n\r\n    /* Size 3 */\r\n    &:where(.ok-r-size-3) {\r\n        --toggle-padding: 18px 22px;\r\n        --toggle-font-size: 20px;\r\n        --toggle-line-height: 20px;\r\n    }\r\n}\r\n\r\n/* State Disabled */\r\n.okToggle[data-disabled="true"] {\r\n    background: var(--Gray-2, #d0d7df);\r\n}\r\n\r\n/* State On */\r\n.okToggle[data-state="on"]:not([data-disabled="true"]) {\r\n    background: #329466;\r\n}\r\n\r\n/* State Off */\r\n.okToggle[data-state="off"]:not([data-disabled="true"]) {\r\n    background: var(--brand-12, #44bd84);\r\n}\r\n');const ee=e.forwardRef(((n,t)=>{const{className:a,size:i=1,disabled:o=!1,tooltip:l,state:s,children:c,onToggleStateChanged:d,...u}=n,f=e.useMemo((()=>{switch(s){case exports.ToggleState.On:return"on";case exports.ToggleState.Off:return"off";default:return"indeterminate"}}),[s]),p=e.useCallback((()=>{const e=s===exports.ToggleState.On?exports.ToggleState.Off:exports.ToggleState.On;d?.(e)}),[s]);return e.createElement("button",{"data-disabled":o||void 0,ref:t,...u,className:r("okToggle",a,"ok-r-size-"+i),"data-state":f,onClick:p},c)}));ee.displayName="Toggle";b('/**\r\n * Copyright (c) 2024 Opal Kelly Incorporated\r\n *\r\n * This source code is licensed under the FrontPanel license.\r\n * See the LICENSE file found in the root directory of this project.\r\n */\r\n\r\n.okToggleSwitchRoot {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 4px;\r\n\r\n    /* Style */\r\n    border-radius: 4px;\r\n\r\n    /* Switch Style */\r\n    .okToggleSwitch {\r\n        /* Layout */\r\n        display: flex;\r\n        width: var(--toggle-switch-width, 16.5px);\r\n        height: var(--toggle-switch-height, 9px);\r\n        padding: var(--toggle-switch-padding, 0.75px);\r\n        align-items: center;\r\n\r\n        /* Style */\r\n        border-width: 0px;\r\n        border-radius: var(--toggle-switch-border-radius, 4.5px);\r\n        background: var(--Gray-2, #d0d7df);\r\n\r\n        /* Switch Icon Style */\r\n        .okIndicatorIcon {\r\n            width: var(--toggle-switch-icon-width, 9px);\r\n            height: var(--toggle-switch-icon-height, 9px);\r\n        }\r\n    }\r\n\r\n    /* Label Style */\r\n    .okToggleSwitchLabel {\r\n        /* Typography */\r\n        color: var(--Dark, #343434);\r\n        text-align: center;\r\n        font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;\r\n        font-size: var(--toggle-switch-font-size, 12px);\r\n        font-style: normal;\r\n        font-weight: 500;\r\n        line-height: var(--toggle-switch-line-height, 12px); /* 100% */\r\n    }\r\n\r\n    /* Size 1 */\r\n    &:where(.ok-r-size-1) {\r\n        --toggle-switch-width: 16.5px;\r\n        --toggle-switch-height: 9px;\r\n\r\n        --toggle-switch-padding: 0.75px;\r\n        --toggle-switch-border-radius: 4.5px;\r\n\r\n        --toggle-switch-font-size: 12px;\r\n        --toggle-switch-line-height: 12px;\r\n\r\n        --toggle-switch-icon-width: 7.5px;\r\n        --toggle-switch-icon-height: 7.5px;\r\n    }\r\n\r\n    /* Sizes 2*/\r\n    &:where(.ok-r-size-2) {\r\n        --toggle-switch-width: 18.333px;\r\n        --toggle-switch-height: 10px;\r\n\r\n        --toggle-switch-padding: 0.883px;\r\n        --toggle-switch-border-radius: 5px;\r\n\r\n        --toggle-switch-font-size: 14px;\r\n        --toggle-switch-line-height: 14px;\r\n\r\n        --toggle-switch-icon-width: 8.33px;\r\n        --toggle-switch-icon-height: 8.33px;\r\n    }\r\n\r\n    /* Sizes 3*/\r\n    &:where(.ok-r-size-3) {\r\n        --toggle-switch-width: 27.5px;\r\n        --toggle-switch-height: 15px;\r\n\r\n        --toggle-switch-padding: 1.25px;\r\n        --toggle-switch-border-radius: 7.5px;\r\n\r\n        --toggle-switch-font-size: 20px;\r\n        --toggle-switch-line-height: 20px;\r\n\r\n        --toggle-switch-icon-width: 12.5px;\r\n        --toggle-switch-icon-height: 12.5px;\r\n    }\r\n}\r\n\r\n/* State Disabled */\r\n.okToggleSwitchRoot[data-disabled="true"] {\r\n    opacity: 0.5;\r\n}\r\n\r\n/* State On */\r\n.okToggleSwitch[data-state="on"] {\r\n    justify-content: flex-end;\r\n}\r\n\r\n.okToggleSwitch[data-state="on"]:not([data-disabled="true"]) {\r\n    background: var(--brand-12, #44bd84);\r\n}\r\n\r\n/* State Off */\r\n.okToggleSwitch[data-state="off"] {\r\n    justify-content: flex-start;\r\n}\r\n\r\n.okToggleSwitch[data-state="off"]:not([data-disabled="true"]) {\r\n    background: var(--Gray-2, #d0d7df);\r\n}\r\n');const ne=e.forwardRef(((n,t)=>{const{className:a,size:i=1,label:o,disabled:l=!1,state:s,...c}=n,d=w(e.createElement("span",{className:r("okToggleSwitchRoot",a,"ok-r-size-"+i),"data-disabled":l||void 0},e.createElement(ee,{className:r("okToggleSwitch"),ref:t,...c,size:i,disabled:l,state:s},e.createElement(L,{className:"okIndicatorIcon",state:s})),e.createElement("span",{className:r("okToggleSwitchLabel")},o)));return e.createElement(d,{...n})}));ne.displayName="ToggleSwitch";const re=e.forwardRef(((n,r)=>{const[t,a]=e.useState(n.minimumValue??0n),{device:i,workQueue:l}=e.useContext(y),{maximumValue:s,minimumValue:c,fpEndpoint:d,disabled:u,...f}=n,p=e.useMemo((()=>void 0!==c?function(e,n,r){let t;t=e<r?r:e>n?n:e;return t}(c,s,0n):0n),[c,s]),g=e.useMemo((()=>h(s)),[s]),m=(1n<<BigInt(g))-1n<<BigInt(d.bitOffset),x=e.useCallback((e=>{if(null!=e&&null!=l){let n=e.getWireInValue(d.epAddress),r=0xffffffffn&m,t=(BigInt(n)&r)>>BigInt(d.bitOffset);if(m>0xffffffffn){let a=32n-BigInt(d.bitOffset),i=m>>32n;for(let l=d.epAddress+1;l<=o.WIREIN_ADDRESS_RANGE.maximum&&i>0n;l++)n=e.getWireInValue(l),r=0xffffffffn&i,t|=(BigInt(n)&r)<<a,a+=32n,i>>=32n}a(t)}else a(0n)}),[l,d,m]);e.useEffect((()=>{x(i)}),[i,x]);const b=e.useCallback((async e=>{null!=i&&null!=l&&await l.post((async()=>{let n=0xffffffffn&m,r=Number(e<<BigInt(d.bitOffset)&n);if(i.setWireInValue(d.epAddress,r,Number(n)),m>0xffffffffn){let t=32n-BigInt(d.bitOffset),a=m>>32n;for(let l=d.epAddress+1;l<=o.WIREIN_ADDRESS_RANGE.maximum&&a>0n;l++)n=0xffffffffn&a,r=Number(e>>t&n),i.setWireInValue(l,r,Number(n)),t+=32n,a>>=32n}await i.updateWireIns()})),x(i)}),[i,l,d,m,x]);return e.createElement(F,{...f,ref:r,disabled:u||null===i,maximumValue:s,minimumValue:p,value:t,onValueChange:b})}));re.displayName="FrontPanelNumberEntry";b("");const te=e.forwardRef(((n,r)=>{const[t,a]=e.useState(0n),{device:i,workQueue:l,eventSource:s}=e.useContext(y),{maximumValue:c,fpEndpoint:d,...u}=n,f=e.useMemo((()=>h(c)),[c]),p=(1n<<BigInt(f))-1n<<BigInt(d.bitOffset),g=e.useCallback((e=>{if(null!=e&&null!=l){let n=e.getWireOutValue(d.epAddress),r=0xffffffffn&p,t=(BigInt(n)&r)>>BigInt(d.bitOffset);if(p>0xffffffffn){let a=32n-BigInt(d.bitOffset),i=p>>32n;for(let l=d.epAddress+1;l<=o.WIREOUT_ADDRESS_RANGE.maximum&&i>0n;l++)n=e.getWireOutValue(l),r=0xffffffffn&i,t|=(BigInt(n)&r)<<a,a+=32n,i>>=32n}a(t)}else a(0n)}),[l,d,p]);return e.useEffect((()=>{g(i);const e=s?.wireOutValuesChangedEvent.subscribe(g);return()=>{e?.cancel()}}),[i,s,g]),e.createElement(A,{...u,ref:r,maximumValue:c,minimumValue:0n,value:t})}));te.displayName="FrontPanelNumberDisplay";const ae=e.forwardRef(((n,r)=>{const[t,a]=e.useState(!1),{device:i,workQueu