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

React Component Library for OpalKelly FrontPanel application development

import*as e from"react";import n,{useContext as r}from"react";import*as t from"@radix-ui/react-tooltip";import a from"classnames";import*as i from"@radix-ui/react-slider";import*as o from"@radix-ui/react-select";import*as l from"@radix-ui/react-scroll-area";import{WIREIN_ADDRESS_RANGE as s,WIREOUT_ADDRESS_RANGE as c}from"@opalkelly/frontpanel-platform-api";var d,f;!function(e){e[e.Binary=2]="Binary",e[e.Octal=8]="Octal",e[e.Decimal=10]="Decimal",e[e.Hexadecimal=16]="Hexadecimal"}(d||(d={})),function(e){e[e.Off=0]="Off",e[e.On=1]="On"}(f||(f={}));class u{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=u.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 d.Binary:n=u.BINARY_DIGITVALUES;break;case d.Octal:n=u.OCTAL_DIGITVALUES;break;case d.Decimal:n=u.DECIMAL_DIGITVALUES;break;case d.Hexadecimal:n=u.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<u.MAX_DIGITS&&0n!==a;t++)a/=r;return t>0n?t:1n}}function p(e){let n=0;if(e>0n){let r=e;for(;r>0n;)r>>=1n,n++}else 0n===e&&(n=1);return n}u.MAX_DIGITS=1024,u.BINARY_DIGITVALUES=["0","1"],u.OCTAL_DIGITVALUES=["0","1","2","3","4","5","6","7"],u.DECIMAL_DIGITVALUES=[...u.OCTAL_DIGITVALUES,"8","9"],u.HEXADECIMAL_DIGITVALUES=[...u.DECIMAL_DIGITVALUES,"A","B","C","D","E","F"];const m=n.createContext({}),g=e=>{const{device:r,workQueue:t,eventSource:a}=e;return n.createElement(m.Provider,{value:{device:r,workQueue:t,eventSource:a}},e.children)};function h(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))}}g.displayName="FrontPanel";h("");const y=e.forwardRef(((n,r)=>e.createElement(t.Provider,null,n.children)));y.displayName="Application";h('/**\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');h('/**\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');h('/**\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 x=n.forwardRef(((e,r)=>{const{children:i,className:o,open:l,defaultOpen:s,onOpenChange:c,delayDuration:d,disableHoverableContent:f,content:u,container:p,forceMount:m,...g}=e,h={open:l,defaultOpen:s,onOpenChange:c,delayDuration:d,disableHoverableContent:f};return n.createElement(t.Root,{...h},n.createElement(t.Trigger,{asChild:!0},i),n.createElement(t.Portal,{container:p,forceMount:m},n.createElement(t.Content,{sideOffset:4,collisionPadding:10,...g,ref:r,className:a("okTooltipContent",o)},n.createElement("p",{className:"okTooltipText"},u))))}));function b(e){return function(r){return null!=r.tooltip?n.createElement(x,{content:r.tooltip},e):e}}x.displayName="Tooltip";const w=n.forwardRef(((e,r)=>{const{className:t,label:i,size:o=1,onButtonUp:l,onButtonDown:s,onButtonClick:c,...d}=e,f=b(n.createElement("button",{"data-disabled":d.disabled||void 0,...d,ref:r,className:a("okButton",t,"ok-r-size-"+o),onMouseDown:s,onMouseUp:l,onClick:c},i));return n.createElement(f,{...e})}));w.displayName="Button";var E;h('/**\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"}(E||(E={}));const S=e.forwardRef(((n,r)=>{const{direction:t=E.Down,color:a="#343434",...i}=n;return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",...i,ref:r},((n,r)=>{let t;return n===E.Up||E.Down,t=e.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:r}),t})(t,a))}));var k;S.displayName="ChevronIcon",function(e){e[e.Up=0]="Up",e[e.Down=1]="Down"}(k||(k={}));const v=e.forwardRef(((n,r)=>{const{direction:t=k.Down,color:a="#343434",...i}=n;return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"4",viewBox:"0 0 10 4",fill:"none",...i,ref:r},((n,r)=>{let t;switch(n){case k.Up:t=e.createElement("path",{d:"M5 5.1656e-07L10 4L0 4L5 5.1656e-07Z",fill:r});break;case k.Down:t=e.createElement("path",{d:"M5 4L0 0L10 8.88334e-07L5 4Z",fill:r});break;default:t=e.createElement("path",{d:"M5 5.1656e-07L10 4L0 4L5 5.1656e-07Z",fill:r})}return t})(t,a))}));v.displayName="IndicatorArrowIcon";const I=e.forwardRef(((n,r)=>{const{color:t="#343434",...a}=n;return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"1",viewBox:"0 0 10 1",fill:"none",...a,ref:r},e.createElement("path",{d:"M8.74228e-08 -8.74228e-07L10 -9.53674e-07L10 1L0 0.999999L8.74228e-08 -8.74228e-07Z",fill:t}))}));I.displayName="IndicatorBarIcon";const N=e.forwardRef(((n,r)=>{const{state:t,color:a="#D0D7DF",colorOnState:i="#44BD84",colorOffState:o="#D0D7DF"}=n;return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",...n,ref:r},((n,r,t,a)=>{let i;switch(n){case f.On:i=e.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;case f.Off:i=e.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:a});break;default:i=e.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})}return i})(t,a,i,o))}));N.displayName="IndicatorStateIcon";const C=e.forwardRef(((n,r)=>{const{state:t,color:a="#343434",colorOnState:i="#44BD84",...o}=n;return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",...o,ref:r},((n,r,t)=>{let a;switch(n){case f.On:a=e.createElement(e.Fragment,null,e.createElement("circle",{cx:"7",cy:"7",r:"6",stroke:r,strokeWidth:"2"}),e.createElement("circle",{cx:"7",cy:"7",r:"3",fill:t}));break;case f.Off:default:a=e.createElement("circle",{cx:"7",cy:"7",r:"6",stroke:r,strokeWidth:"2"})}return a})(t,a,i))}));C.displayName="RadioToggleStateIcon";const z=e.forwardRef(((n,r)=>{const{state:t,color:a="white",colorOnState:i="white",colorOffState:o="white",...l}=n;return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"8",height:"8",viewBox:"0 0 8 8",fill:"none",...l,ref:r},((n,r,t,a)=>{let i;switch(n){case f.On:i=e.createElement("circle",{cx:"4",cy:"4",r:"3.75",fill:t});break;case f.Off:i=e.createElement("circle",{cx:"4",cy:"4",r:"3.75",fill:a});break;default:i=e.createElement("circle",{cx:"4",cy:"4",r:"3.75",fill:r})}return i})(t,a,i,o))}));z.displayName="SwitchToggleStateIcon";const T=n.forwardRef(((e,r)=>{const{className:t,label:i,size:o=1,state:l,...s}=e,c=b(n.createElement("span",{...s,ref:r,className:a("okIndicator",t,"ok-r-size-"+o)},n.createElement(N,{className:"okIndicatorIcon",state:l?f.On:f.Off}),n.createElement("span",{className:a("okIndicatorLabel")},i)));return n.createElement(c,{...e})}));T.displayName="Indicator";h('/**\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 D=n.forwardRef(((e,r)=>{const{className:t,text:i,horizontalPosition:o="left",verticalPosition:l="top",children:s,...c}=e;return n.createElement("div",{...c,ref:r,className:a("okLabel",t,"ok-pos-"+o+"-"+l)},n.createElement("span",{className:a("okLabelText")},i),s)}));D.displayName="Label";h("/**\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 L=n.forwardRef(((e,r)=>{const{className:t,label:i,size:o=1,numeralSystem:l=d.Decimal,decimalScale:s=0,maximumValue:c,minimumValue:f,value:p}=e,m=n.useMemo((()=>{const e=u.ComputeDigitCountFromValue(c,l),n=u.ComputeDigitCountFromValue(f,l);return e>n?e:n}),[c,f,l]),g=n.useMemo((()=>n.createElement("span",{className:a("okNumberDisplayText","ok-r-size-"+o)},"-")),[o]),h=b(n.createElement("div",{ref:r,className:a("okNumberDisplay",t,"ok-r-size-"+o)},n.createElement("div",{className:"okNumberDisplayContent"},p<0n&&g,n.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===d.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}(p,m,l,s)))));if(null!=i)return n.createElement(D,{...i},n.createElement("div",{style:{width:"100%"}},n.createElement(h,{...e})));n.createElement(h,{...e})}));L.displayName="NumberDisplay";h('/**\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');h('/**\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 O=e=>{const r=n.useRef(null),{className:t,variant:i="standard",size:o=1,value:l,maximum:s,minimum:c,numeralSystem:f=d.Decimal,onValueChanged:u}=e,p=n.useRef(l);p.current=e.value;const m=n.useRef(u);m.current=u;n.useEffect((()=>{const e=e=>{e.deltaY<0?(m.current?.(p.current+1,!1),e.stopPropagation(),e.preventDefault()):e.deltaY>0&&(m.current?.(p.current-1,!1),e.stopPropagation(),e.preventDefault())};return r.current?.addEventListener("wheel",e,{passive:!1}),()=>{r.current?.removeEventListener("wheel",e)}}),[r]);const g=null==s||l<s,h=null==c||l>c;return n.createElement("div",{className:a("okDigitEntry",t,"ok-r-size-"+o),ref:r,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,f);if(!Number.isNaN(n)){u?.(n,!0);const r=e.currentTarget.nextElementSibling;r?.focus()}}}},n.createElement((()=>{let e;switch(i){case"standard":e=n.createElement(v,{className:a("okDigitEntryIncrementIndicator"),direction:k.Up,color:"#343434","data-enabled":g});break;case"compact":e=n.createElement(I,{className:a("okDigitEntryIncrementIndicator"),color:"#343434","data-enabled":g});break;default:e=null}return e}),null),n.createElement("div",{className:a("okDigitEntryContent","ok-r-size-"+o)},Math.abs(l).toString(Number(f))),n.createElement((()=>{let e;switch(i){case"standard":e=n.createElement(v,{className:a("okDigitEntryDecrementIndicator"),direction:k.Down,color:"#343434","data-enabled":h});break;case"compact":e=n.createElement(I,{className:a("okDigitEntryDecrementIndicator"),color:"#343434","data-enabled":h});break;default:e=null}return e}),null))};O.displayName="DigitEntry";const R=e=>{const{variant:r="standard",size:t=1,numeralSystem:i,decimalScale:o=0,digitStates:l,onDigitStatesChange:s}=e;return n.createElement(n.Fragment,null,(()=>{const e=l.map(((e,a)=>n.createElement(O,{key:"digit-"+e.id,variant:r,size:t,numeralSystem:i,value:e.value,maximum:e.maximum,minimum:e.minimum,onValueChanged:(e,n)=>{const r=[...l];r[a]={...l[a],value:e},s?.(r,n)}})));if(i===d.Decimal&&o>0){const r=o-e.length;if(r<0)e.splice(o,0,n.createElement("span",{key:"digit-decimal-point",className:a("okNumberEntryText","ok-r-size-"+t)},"."));else{const i="0.",o=i.padEnd(i.length+r,"0");e.push(n.createElement("span",{key:"digit-decimal-prefix",className:a("okNumberEntryText","ok-r-size-"+t)},o))}}return e.reverse()})())};R.displayName="NumberEntryDigits";const A=n.forwardRef(((e,r)=>{const{label:t,tooltip:a,...i}=e,o=null!=t,l=null!=a;return o&&l?n.createElement(D,{...t},n.createElement(x,{content:a},n.createElement("div",{style:{width:"100%"}},n.createElement(V,{ref:r,...i})))):o?n.createElement(D,{...t},n.createElement("div",{style:{width:"100%"}},n.createElement(V,{ref:r,...i}))):l?n.createElement(x,{content:a},n.createElement("div",null,n.createElement(V,{ref:r,...i}))):n.createElement(V,{ref:r,...i})}));A.displayName="NumberEntry";const V=n.forwardRef(((e,r)=>{const{className:t,variant:i="standard",size:o=1,disabled:l=!1,numeralSystem:s=d.Decimal,decimalScale:c=0,maximumValue:f,minimumValue:p,value:m,onValueChange:g}=e,h=n.useMemo((()=>{const e=u.ComputeDigitCountFromValue(f,s),n=u.ComputeDigitCountFromValue(p,s);return Number(e>n?e:n)}),[f,p,s]),y=BigInt(s),x=F(m,f,p,y,h);return n.createElement("div",{ref:r,className:a("okNumberEntry",t,"ok-r-size-"+o),"data-disabled":l||void 0},n.createElement("div",{className:"okNumberEntryContent"},m<0n&&(e=>n.createElement("span",{className:a("okNumberEntryText","ok-r-size-"+e)},"-"))(o),n.createElement(R,{variant:i,size:o,numeralSystem:s,decimalScale:c,digitStates:x,onDigitStatesChange:(e,n)=>{let r=B(e,y);r>=0n!=m>=0n&&0n!==r&&(r+=2n*-m),r<=f&&r>=p&&g?.(r)}})))}));V.displayName="NumberEntryImpl";const B=(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},F=(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:P(r,Number(t)),minimum:P(a,Number(t))},o/=t,l/=t,s/=t}return i},P=(e,n)=>{let r;return r=e>=0?e<n?e:void 0:e>-n?e:void 0,r};h('/**\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 M=n.forwardRef(((e,r)=>{const{label:t,tooltip:a,...i}=e,o=null!=t,l=null!=a;return o&&l?n.createElement(D,{className:"okRangeSliderLabel",...t},n.createElement(x,{content:a},n.createElement("div",{style:{width:"100%"}},n.createElement(j,{ref:r,...i})))):o?n.createElement(D,{className:"okRangeSliderLabel",...t},n.createElement("div",{style:{width:"100%"}},n.createElement(j,{ref:r,...i}))):l?n.createElement(x,{content:a},n.createElement("div",{style:{width:"100%"}},n.createElement(j,{ref:r,...i}))):n.createElement(j,{ref:r,...i})}));M.displayName="RangeSlider";const j=n.forwardRef(((e,r)=>{const{className:t,tooltip:o,minimumValue:l=0,maximumValue:s=100,onValueChange:c,defaultValue:d=l,value:f,valueStep:u=1,showThumbLabel:p=!0,showTrackLabels:m=!0,disabled:g=!1}=e,h=f??d,[y,b]=n.useState([h]);n.useEffect((()=>{b([h])}),[h]);const w=n.useCallback((e=>{b([e]),c?.(e)}),[c]),E=()=>n.createElement(i.Track,{className:"okRangeSliderTrack"},n.createElement(i.Range,{className:"okRangeSliderRange"})),S=null!=o;return n.createElement("div",{className:a("okRangeSlider",t),"data-disabled":g||void 0},m?n.createElement("span",null,l):null,n.createElement(i.Root,{ref:r,min:l,max:s,step:u,value:y,onValueChange:e=>w(e[0]),orientation:"horizontal",className:"okRangeSliderRoot",disabled:g},S?n.createElement(x,{content:o},n.createElement(E,null)):n.createElement(E,null),n.createElement(i.Thumb,{className:"okRangeSliderThumb"},p?n.createElement("div",{className:"okRangeSliderThumbLabel"},y):null)),m?n.createElement("span",null,s):null)}));j.displayName="RangeSliderImpl";const G=n.createContext({label:{text:"",horizontalPosition:"right",verticalPosition:"top"},size:1,value:void 0}),W=e=>{const{label:r,children:t,size:a=1,tooltip:i,value:l,...s}=e;return n.createElement(o.Root,{value:l,...s},n.createElement(G.Provider,{value:n.useMemo((()=>({label:r,size:a,tooltip:i,value:l})),[r,a,i,l])},t))};W.displayName="SelectEntryRoot";h('/**\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 U=n.forwardRef(((e,r)=>{const{className:t,children:i,container:s,...c}=e,{size:d}=n.useContext(G);return n.createElement(o.Portal,{container:s},n.createElement(o.Content,{sideOffset:4,...c,ref:r,className:a("okSelectEntryContent",t,"ok-r-size-"+d),position:"popper",align:"start"},n.createElement(l.Root,{type:"auto",className:"okScrollArea"},n.createElement(o.Viewport,{asChild:!0},n.createElement(l.Viewport,{className:"okScrollAreaViewport"},n.createElement("div",{className:"okSelectEntryContentInner"},i))),n.createElement(l.Scrollbar,{className:"okScrollAreaScrollbar",orientation:"vertical"},n.createElement(l.Thumb,{className:"okScrollAreaThumb"})))))}));U.displayName="SelectEntryContent";h("/**\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 _=n.forwardRef(((e,r)=>n.createElement(o.Group,{...e,ref:r,className:a("okSelectEntryGroup",e.className)})));_.displayName="SelectEntryGroup";h('/**\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 K=n.forwardRef(((e,r)=>{const{className:t,children:i,...l}=e,{size:s,value:c}=n.useContext(G);return n.createElement(o.Item,{...l,ref:r,className:a("okSelectEntryItem",t,"ok-r-size-"+s)},n.createElement(C,{state:c===e.value?f.On:f.Off}),n.createElement(o.ItemText,null,i))}));K.displayName="SelectEntryItem";h('/**\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 Q=n.forwardRef(((e,r)=>{const{className:t,...i}=e,{size:l}=n.useContext(G);return n.createElement(o.Label,{...i,ref:r,className:a("okSelectEntryLabel",t,"ok-r-size-"+l)})}));Q.displayName="SelectEntryLabel";h("/**\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 X=n.forwardRef(((e,r)=>n.createElement(o.Separator,{...e,ref:r,className:a("okSelectEntrySeparator",e.className)})));X.displayName="SelectEntrySeparator";h('/**\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 Y=n.forwardRef(((e,t)=>{const{label:a,tooltip:i,...o}=r(G),l=null!=a,s=null!=i;return l&&s?n.createElement(D,{...a},n.createElement(x,{content:i},n.createElement(Z,{ref:t,...e,style:{width:"100%"}}))):l?n.createElement(D,{...a},n.createElement(Z,{ref:t,...o,style:{width:"100%"}})):s?n.createElement(x,{content:i},n.createElement("div",null,n.createElement(Z,{ref:t,...o}))):n.createElement(Z,{ref:t,...o})}));Y.displayName="SelectEntryTrigger";const Z=n.forwardRef(((e,r)=>{const{className:t,placeholder:i,...l}=e,{size:s}=n.useContext(G);return n.createElement(o.Trigger,{asChild:!0},n.createElement("button",{...l,ref:r,className:a("okSelectEntryTrigger",t,"ok-r-size-"+s)},n.createElement("span",{className:"okSelectEntryTriggerInner"},n.createElement(o.Value,{placeholder:i})),n.createElement(o.Icon,{asChild:!0},n.createElement(S,{direction:E.Down}))))}));Z.displayName="SelectEntryTriggerImpl";const H=Object.assign({},{Root:W,Trigger:Y,Content:U,Item:K,Group:_,Label:Q,Separator:X});h('/**\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 q=n.forwardRef(((e,r)=>{const{className:t,size:i=1,disabled:o=!1,tooltip:l,state:s,children:c,onToggleStateChanged:d,...u}=e,p=n.useMemo((()=>{switch(s){case f.On:return"on";case f.Off:return"off";default:return"indeterminate"}}),[s]),m=n.useCallback((()=>{const e=s===f.On?f.Off:f.On;d?.(e)}),[s]);return n.createElement("button",{"data-disabled":o||void 0,ref:r,...u,className:a("okToggle",t,"ok-r-size-"+i),"data-state":p,onClick:m},c)}));q.displayName="Toggle";h('/**\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 J=n.forwardRef(((e,r)=>{const{className:t,size:i=1,label:o,disabled:l=!1,state:s,...c}=e,d=b(n.createElement("span",{className:a("okToggleSwitchRoot",t,"ok-r-size-"+i),"data-disabled":l||void 0},n.createElement(q,{className:a("okToggleSwitch"),ref:r,...c,size:i,disabled:l,state:s},n.createElement(z,{className:"okIndicatorIcon",state:s})),n.createElement("span",{className:a("okToggleSwitchLabel")},o)));return n.createElement(d,{...e})}));J.displayName="ToggleSwitch";const $=n.forwardRef(((e,r)=>{const[t,a]=n.useState(e.minimumValue??0n),{device:i,workQueue:o}=n.useContext(m),{maximumValue:l,minimumValue:c,fpEndpoint:d,disabled:f,...u}=e,g=n.useMemo((()=>void 0!==c?function(e,n,r){let t;t=e<r?r:e>n?n:e;return t}(c,l,0n):0n),[c,l]),h=n.useMemo((()=>p(l)),[l]),y=(1n<<BigInt(h))-1n<<BigInt(d.bitOffset),x=n.useCallback((e=>{if(null!=e&&null!=o){let n=e.getWireInValue(d.epAddress),r=0xffffffffn&y,t=(BigInt(n)&r)>>BigInt(d.bitOffset);if(y>0xffffffffn){let a=32n-BigInt(d.bitOffset),i=y>>32n;for(let o=d.epAddress+1;o<=s.maximum&&i>0n;o++)n=e.getWireInValue(o),r=0xffffffffn&i,t|=(BigInt(n)&r)<<a,a+=32n,i>>=32n}a(t)}else a(0n)}),[o,d,y]);n.useEffect((()=>{x(i)}),[i,x]);const b=n.useCallback((async e=>{null!=i&&null!=o&&await o.post((async()=>{let n=0xffffffffn&y,r=Number(e<<BigInt(d.bitOffset)&n);if(i.setWireInValue(d.epAddress,r,Number(n)),y>0xffffffffn){let t=32n-BigInt(d.bitOffset),a=y>>32n;for(let o=d.epAddress+1;o<=s.maximum&&a>0n;o++)n=0xffffffffn&a,r=Number(e>>t&n),i.setWireInValue(o,r,Number(n)),t+=32n,a>>=32n}await i.updateWireIns()})),x(i)}),[i,o,d,y,x]);return n.createElement(A,{...u,ref:r,disabled:f||null===i,maximumValue:l,minimumValue:g,value:t,onValueChange:b})}));$.displayName="FrontPanelNumberEntry";h("");const ee=n.forwardRef(((e,r)=>{const[t,a]=n.useState(0n),{device:i,workQueue:o,eventSource:l}=n.useContext(m),{maximumValue:s,fpEndpoint:d,...f}=e,u=n.useMemo((()=>p(s)),[s]),g=(1n<<BigInt(u))-1n<<BigInt(d.bitOffset),h=n.useCallback((e=>{if(null!=e&&null!=o){let n=e.getWireOutValue(d.epAddress),r=0xffffffffn&g,t=(BigInt(n)&r)>>BigInt(d.bitOffset);if(g>0xffffffffn){let a=32n-BigInt(d.bitOffset),i=g>>32n;for(let o=d.epAddress+1;o<=c.maximum&&i>0n;o++)n=e.getWireOutValue(o),r=0xffffffffn&i,t|=(BigInt(n)&r)<<a,a+=32n,i>>=32n}a(t)}else a(0n)}),[o,d,g]);return n.useEffect((()=>{h(i);const e=l?.wireOutValuesChangedEvent.subscribe(h);return()=>{e?.cancel()}}),[i,l,h]),n.createElement(L,{...f,ref:r,maximumValue:s,minimumValue:0n,value:t})}));ee.displayName="FrontPanelNumberDisplay";const ne=n.forwardRef(((e,r)=>{const[t,a]=n.useState(!1),{device:i,workQueue:o,eventSource:l}=n.useContext(m),{fpEndpoint:s,...c}=e,d=1<<s.bitOffset,f=n.useCallback((e=>{if(null!=e&&null!=o){const n=e.getWireOutValue(s.epAddress);a((n&d)===d)}else a(!1)}),[o,s,d]);return n.useEffect((()=>{f(i);const e=l?.wireOutValuesChangedEvent.subscribe(f);return()=>{e?.cancel()}}),[i,l,f]),n.createElement(T,{...c,ref:r,state:t})}));ne.displayName="FrontPanelIndicator";const re=n.forwardRef(((e,r)=>{const{device:t,workQueue:a}=n.useContext(m),{fpEndpoint:i,disabled:o,...l}=e,s=1<<i.bitOffset,c=n.useCallback((async()=>{null!=t&&null!=a&&await a.post((async()=>{t.setWireInValue(i.epAddress,0,s),await t.updateWireIns()}))}),[t,a,i,s,a]),d=n.useCallback((async()=>{null!=t&&null!=a&&await a.post((async()=>{t.setWireInValue(i.epAddress,4294967295,s),await t.updateWireIns()}))}),[t,a,i,s,a]);return n.createElement(