@opentrons/components 0.3.9-alpha.0 → 0.3.10-alpha.0

package/README.md

@@ -8,7 +8,7 @@
 
 ## Version
 
-`0.3.9-alpha.0`
+`0.3.10-alpha.0`
 
 ## License
 

package/lib/atoms/buttons/PrimaryButton/index.d.ts

@@ -1,16 +1,6 @@
-import { AltPrimaryButton } from './AltPrimaryButton';
-import { DefaultPrimaryButton } from './DefaultPrimaryButton';
-import { WarningPrimaryButton } from './WarningPrimaryButton';
 import type { ComponentProps } from 'react';
-interface DefaultProps extends ComponentProps<typeof DefaultPrimaryButton> {
-    variant?: 'default';
-}
-interface AltProps extends ComponentProps<typeof AltPrimaryButton> {
-    variant: 'alt';
-}
-interface WarningProps extends ComponentProps<typeof WarningPrimaryButton> {
-    variant: 'warning';
-}
-type Props = DefaultProps | AltProps | WarningProps;
-export declare function PrimaryButton(props: Props): JSX.Element;
-export {};
+import type { StyleProps } from '../../../primitives/types';
+export type PrimaryButtonProps = ComponentProps<'button'> & StyleProps & {
+    variant?: 'default' | 'alt' | 'warning';
+};
+export declare function PrimaryButton(props: PrimaryButtonProps): JSX.Element;

package/lib/index.js

@@ -378,7 +378,7 @@ Valid keys: `+JSON.stringify(Object.keys(O),null,"  "));var ae=ke(he,xe,ee,le,z+
         @media ${e=>e.$_css3} {
           display: flex !important;
         }
-      `,Eq=ne("li")`${Dr}`,Mq=ne("li")`${Dr}`,kq=ne("li")`${Dr}`,Rq=ne("li").withConfig({displayName:"CommandText___StyledLi0",componentId:"sc-7uroq7-0"})(["",""],Dr);const G0={success:{icon:{name:"check-circle"},backgroundColor:X1,color:Po},error:{icon:{name:"ot-alert"},backgroundColor:Rr,color:mn},warning:{icon:{name:"ot-alert"},backgroundColor:qr,color:F1},updating:{icon:{name:"ot-spinner"},backgroundColor:ut,color:Qe},informing:{icon:{name:"information"},backgroundColor:q1,color:Kt}};function Oq(e){const{type:t,onCloseClick:n,icon:r,children:o,isCloseActionLoading:i=!1,padding:a,closeButton:s,iconMarginLeft:c,iconMarginRight:u,size:d,...p}=e,v=G0[t],g={...r??v.icon,size:d??"1rem",marginRight:u??Be,marginLeft:c??"0rem",color:G0[t].color},_=X(["font-size:",";font-weight:",";border-radius:",";@media ","{font-size:1.25rem;font-weight:",";background-color:",";border-radius:",";line-height:1.5rem;}"],Tr,un,nt,ye,kt,Qo,Q6);return l.jsxs(jq,{backgroundColor:G0[t].backgroundColor,flexDirection:vn,justifyContent:Nn,alignItems:Ve,padding:a??Be,onClick:C=>{C.stopPropagation()},"data-testid":`Banner_${t}`,...p,$_css:_,children:[l.jsx(Pe,{...g,"aria-label":`icon_${t}`,spin:G0[t].icon.name==="ot-spinner"}),l.jsx(Ce,{flex:"1",alignItems:Ve,children:e.children}),n!=null&&!(i??!1)?l.jsx(Lt,{"data-testid":"Banner_close-button",onClick:e.onCloseClick,children:s??l.jsx(Pe,{width:ht,height:ht,marginTop:Za,name:"close","aria-label":"close_icon"})}):null,(i??!1)&&l.jsx(Pe,{name:"ot-spinner",size:"1rem","aria-label":"ot-spinner",spin:!0})]})}var jq=ne(Ce).withConfig({displayName:"Banner___StyledFlex",componentId:"sc-1q92z8p-0"})(["",""],e=>e.$_css);const Pq="number",Nq="text",Dq="password",Bq="#9e5e00",G7=W.forwardRef((e,t)=>{const{disabled:n,id:r,placeholder:o,units:i,value:a,error:s,title:c,tooltipText:u,caption:d,type:p,onClick:v,isIndeterminate:g=!1,textAlign:_=qa,size:C="small",leftElement:b,rightElement:S,borderRadius:L,padding:w,testId:I,...T}=e,[R,k]=Z1(),H=W.useRef(null),N=N7(t,H),Z=W.useId(),V=r??Z,F=s!=null,J=g??!1?"":a??"",U=g??!1?"-":o,Y=X(["background-color:",";border-radius:",";padding:",";border:1px "," ",";font-size:",";width:100%;height:",";& input{border-radius:inherit;color:",";border:none;flex:1 1 auto;width:100%;height:",";text-align:",";}& input:focus{outline:none;}&:has(input:disabled){border:1px "," ",";}&:has(input:focus){border:1px "," ",";}&:has(input:focus-visible){outline:2px "," ",";outline-offset:2px;}&:hover{border:1px "," ",";}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"],de,L??Dt,w??Be,nn,F?Ht:tt,Tr,C==="small"?"2rem":"2.75rem",De,it,_,nn,ut,nn,F?Ht:Se,nn,Se,nn,F?Ht:Qe),se=X(["color:",";padding-bottom:",";text-align:",";font-size:",";line-height:",";font-weight:",";"],Qe,nt,_,K1,Xt,un),re=X(["color:",";font:",";text-align:",";white-space:",";"],n?At:tt,xl,ow,Lo);return l.jsx(Ce,{width:"100%",alignItems:Ve,lineHeight:1,fontSize:Tr,fontWeight:un,color:s!=null?Bq:De,opacity:n===!0?.5:1,children:l.jsxs(Ce,{flexDirection:dt,width:"100%",children:[c!=null?l.jsxs(Ce,{flexDirection:vn,gridGap:Be,alignItems:Ve,children:[l.jsx(zq,{htmlFor:V,$_css:se,children:c}),u!=null?l.jsxs(l.Fragment,{children:[l.jsx(Ce,{...R,children:l.jsx(Pe,{name:"information",size:xt,color:Qe})}),l.jsx(Go,{tooltipProps:k,children:u})]}):null]}):null,l.jsx(Ce,{width:"100%",flexDirection:dt,onClick:n===!0?void 0:v,children:l.jsxs(Zq,{alignItems:Ve,onClick:()=>{H.current?.focus()},$_css2:Y,children:[b!=null?l.jsx(Ce,{marginRight:Be,children:b}):null,l.jsx(Fq,{...T,id:V,"data-testid":I,value:J,placeholder:U,onWheel:fe=>{fe.currentTarget.blur()},type:p,disabled:n,ref:N}),i!=null?l.jsx(Gq,{$_css3:re,children:i}):null,S!=null?l.jsx(Ce,{alignSelf:jS,onClick:fe=>{fe.stopPropagation()},children:S}):null]})}),d!=null?l.jsx(Wq,{desktopStyle:"bodyDefaultRegular",color:F?Ht:Qe,children:d}):null,F?l.jsx(Uq,{desktopStyle:"bodyDefaultRegular",children:s}):null]})})});G7.displayName="InputField";const Hq=X(["color:",";padding-top:",";"],Ht,nt),Vq=X(["padding-top:",";"],nt),Fq=ne.input.withConfig({displayName:"InputField__StyledInput",componentId:"sc-7xlzm8-0"})(["background-color:transparent;&::placeholder{color:",";}"],At);var zq=ne("label").withConfig({displayName:"InputField___StyledLabel",componentId:"sc-7xlzm8-1"})(["",""],e=>e.$_css),Zq=ne(Ce).withConfig({displayName:"InputField___StyledFlex",componentId:"sc-7xlzm8-2"})(["",""],e=>e.$_css2),Gq=ne(Ce).withConfig({displayName:"InputField___StyledFlex2",componentId:"sc-7xlzm8-3"})(["",""],e=>e.$_css3),Wq=ne(Re).withConfig({displayName:"InputField___StyledStyledText",componentId:"sc-7xlzm8-4"})(["",""],Vq),Uq=ne(Re).withConfig({displayName:"InputField___StyledStyledText2",componentId:"sc-7xlzm8-5"})(["",""],Hq);function zI(e){const{buttonText:t,buttonValue:n,isSelected:r=!1,onChange:o,disabled:i=!1,id:a=t,stackingProps:s,allowInputField:c,isNestedDefALid:u,customStackLimit:d}=e,p=s!=null&&s.definition.allowedRoles?.includes("lid"),v=d??s?.definition.stackLimit;return l.jsxs(Ce,{width:"100%",margin:nt,onClick:g=>{g.stopPropagation()},children:[l.jsx(Xq,{checked:r,id:a,disabled:i,onChange:g=>{o(g),g.stopPropagation()},type:"radio",value:n}),l.jsx(Kq,{role:"label",isSelected:r,disabled:i,htmlFor:a,children:l.jsxs(Ce,{flexDirection:dt,gridGap:nt,children:[l.jsx(Re,{desktopStyle:"bodyDefaultRegular",children:t}),s!=null&&r?l.jsxs(Ce,{flexDirection:dt,backgroundColor:q6,padding:it,borderRadius:Dt,gridGap:Be,children:[p&&!u&&s.onCheckboxChange!=null?l.jsx(bw,{onChange:g=>{g.stopPropagation(),g.preventDefault(),s.onCheckboxChange?.()},value:s.checked,label:s.checkboxCaption,padding:`0 0 0 ${Be}`}):null,v!=null&&v>1&&c?l.jsx(G7,{id:"CustomizeExpandButton_inputField",testId:"customize-expand-button-input-field",title:s.inputTitle,onChange:g=>{g.stopPropagation(),s.onInputFieldChange(g)},type:"number",error:!s.inputFieldValue||s.inputFieldValue>v?s.errorMessage:null,value:s.inputFieldValue,caption:s.inputCaption}):null]}):null]})})]})}const Yq=W.memo(zI),Xq=ne.input.withConfig({displayName:"CustomizeExpandButton__SettingButton",componentId:"sc-vfv2m-0"})(["display:none;"]),qq=X(["background:",";color:",";&:hover{background-color:",";}"],de,De,Da),Jq=X(["background:",";color:",";&:active{background-color:",";}"],Se,de,Kt),Qq=X(["color:",";background-color:",";"],At,Da),Kq=ne.label.withConfig({displayName:"CustomizeExpandButton__SettingButtonLabel",componentId:"sc-vfv2m-1"})(["border-radius:",";cursor:",";padding:",";width:100%;"," ",""],Bt,bn,xt,({isSelected:e})=>e?Jq:qq,({disabled:e})=>e&&Qq);function ZI({text:e,isSelected:t,isZoomed:n,moduleModel:r,maxWidth:o=Un,labelBorderRadius:i,isLast:a=!1}){return l.jsx(tJ,{fontSize:n?"6px":"18px","data-testid":`DeckLabel_${t?"Selected":"UnSelected"}`,$_css:t?$q(o,i):eJ(o,i,a),children:l.jsxs(Ce,{gridGap:di,alignItems:Ve,children:[r!=null&&n?l.jsx(NS,{size:"0.5rem",moduleType:P.getModuleType(r)}):null,l.jsx(Re,{color:t?de:Se,children:e})]})})}const GI=(e,t)=>X(["width:",";max-width:",";padding:",";border-radius:",";"],Un,e,di,t??"0"),$q=(e,t)=>X([""," color:",";border:1.5px solid ",";background-color:",";"],GI(e,t),de,Se,Se),eJ=(e,t,n)=>X([""," color:",";border-right:1.5px solid ",";border-bottom:1.5px solid ",";border-left:1.5px solid ",";background-color:",";border-radius:",";"],GI(e,t),Se,Se,Se,Se,de,n?t:"0");var tJ=ne(Ce).withConfig({displayName:"DeckLabel___StyledFlex",componentId:"sc-nwtj4r-0"})(["",""],e=>e.$_css);const nJ="iconbutton-module__icon_button__It6HS",rJ="iconbutton-module__size_sm__J-9-w",oJ="iconbutton-module__size_md__dF9-a",Bd={icon_button:nJ,size_sm:rJ,size_md:oJ},iJ={primary:{default:Se,active:Kt,hover:Et,icon:de},alert:{default:Ht,active:mn,hover:G6,icon:de}},aJ={sm:"1rem",md:"1.5rem"};function sJ({variant:e,iconName:t,size:n="md","aria-label":r,focusableDisabled:o=!1,onClick:i,...a}){const s=iJ[e],c=aJ[n],u=Ye(Bd.icon_button,Bd[`variant_${e}`],Bd[`size_${n}`]),d={"--variant-default":s.default,"--variant-active":s.active,"--variant-hover":s.hover},p=v=>{if(o){v.preventDefault();return}i?.(v)};return l.jsx("button",{type:"button",className:u,style:d,"aria-label":r,"aria-disabled":o?"true":void 0,onClick:p,...a,children:l.jsx(Pe,{name:t,size:c,color:s.icon})})}function lJ({content:e,subContent:t,backgroundColor:n=ut,height:r="100%",iconName:o}){return l.jsxs(Ce,{alignItems:Ve,justifyContent:_n,width:"100%",height:r,flexDirection:dt,gridGap:xt,backgroundColor:n,borderRadius:Bt,padding:`${pa} ${it}`,"data-testid":"InfoScreen",children:[l.jsx(Pe,{name:o??"ot-alert",size:"1.25rem",color:Qe,"aria-label":"alert",spin:o==="ot-spinner"}),l.jsxs(Ce,{flexDirection:dt,alignItems:Ve,gridGap:nt,children:[l.jsx(Re,{desktopStyle:"bodyDefaultSemiBold",children:e}),t!=null?l.jsx(Re,{desktopStyle:"bodyDefaultRegular",color:Qe,textAlign:Ao,children:t}):null]})]})}const WI="all 150ms ease-in";function cJ({headerChild:e,alertKind:t,icon:n,children:r,tableHeaders:o}){const[i,a]=W.useState(!1);return l.jsxs(vJ,{$_css:uJ(t),children:[l.jsxs(bJ,{onClick:()=>{a(!i)},children:[l.jsxs(_J,{children:[t!=="default"?l.jsx(yJ,{name:"ot-alert","data-testid":"ot-alert"}):n,l.jsx(CJ,{children:e})]}),l.jsx(xJ,{name:i?"chevron-up":"chevron-down","data-testid":i?"chevron-up":"chevron-down"})]}),l.jsx(LJ,{$_css2:dJ(i),children:l.jsx(j7,{headers:o,children:r})})]})}const uJ=e=>X(["width:100%;flex-direction:",";padding:",";border-radius:",";gap:",";background-color:",";transition:",";&:focus-visible{border-color:",";border-width:3px;}@media ","{padding:",";gap:",";border-radius:",";background-color:",";&:active{background-color:",";}}@media not all and ","{&:hover{background-color:",";}}"],dt,xt,Be,Be,e==="warning"?qr:Ar,WI,Se,ye,ht,ht,it,e==="warning"?Qo:ft,e==="warning"?tl:At,ye,e==="warning"?qr:ut),dJ=e=>X(["width:100%;display:block;max-height:",";opacity:",";overflow:hidden;margin-top:",";transition:",";@media ","{margin-top:",";}"],e?"10000000px":"0px",e?1:0,e?"0px":`-${Be}`,WI,ye,e?"0px":`-${ht}`),fJ=X(["width:100%;justify-content:",";gap:",";cursor:",";@media ","{gap:",";}"],Nn,ht,bn,ye,pa),hJ=X(["display:flex;flex-grow:1;gap:",";align-items:",";"],xt,Ve),pJ=X(["flex-grow:1;width:100%;"]),mJ=X(["color:",";height:",";width:",";flex-shrink:0;@media ","{height:",";width:",";}"],F1,Ir,Ir,ye,Ho,Ho),gJ=X(["height:",";width:",";flex-shrink:0;@media ","{height:",";width:",";}"],ht,ht,ye,q4,q4);var vJ=ne(Ce)`${e=>e.$_css}`,bJ=ne(Ce)`${fJ}`,_J=ne(Ce)`${hJ}`,yJ=ne(Pe)`${mJ}`,CJ=ne(Wt)`${pJ}`,xJ=ne(Pe)`${gJ}`,LJ=ne(Wt).withConfig({displayName:"ListAccordion___StyledBox2",componentId:"sc-ved93c-0"})(["",""],e=>e.$_css2);const SJ="modelessmodal-module__modal_root__-ChBo",wJ="modelessmodal-module__modal_header__9vlw1",AJ="modelessmodal-module__header_title__G6pB-",IJ="modelessmodal-module__close_button__iPdOw",TJ="modelessmodal-module__modal_content__sIyhC",EJ="modelessmodal-module__resizer__SIKNY",MJ="modelessmodal-module__resizer_r__j-ot4",kJ="modelessmodal-module__resizer_l__g9q6M",RJ="modelessmodal-module__resizer_b__naDkH",OJ="modelessmodal-module__resizer_bl__W037N",jJ="modelessmodal-module__resizer_br__NdOdB",an={modal_root:SJ,modal_header:wJ,header_title:AJ,close_button:IJ,modal_content:TJ,resizer:EJ,resizer_r:MJ,resizer_l:kJ,resizer_b:RJ,resizer_bl:OJ,resizer_br:jJ},zr=10,W0=300;function PJ({header:e,children:t,"aria-labelledby":n,onClose:r,"aria-label":o,defaultWidth:i=400,defaultHeight:a=400}){const s=W.useRef(null),[c,u]=W.useState({subLeft:100,subTop:100,width:i,height:a}),d=W.useRef(null);W.useEffect(()=>{if(s.current!=null){s.current.focus();const _=Math.max(0,(window.innerWidth-i)/2),C=Math.max(0,(window.innerHeight-a)/2);u(b=>({...b,subLeft:_,subTop:C}))}return()=>{d.current!=null&&d.current()}},[i,a]);const p=_=>{if(_.key==="Escape"){_.stopPropagation(),r();return}_.target.closest(`.${an.modal_header}`)!=null&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(_.key)&&(_.preventDefault(),u(b=>{let{subLeft:S,subTop:L,width:w,height:I}=b;return _.shiftKey?(_.key==="ArrowRight"&&(w=w+zr),_.key==="ArrowDown"&&(I=I+zr),_.key==="ArrowLeft"&&(w=w+zr,S=S-zr),_.key==="ArrowUp"&&(I=Math.max(W0,I-zr))):(_.key==="ArrowRight"&&(S+=zr),_.key==="ArrowLeft"&&(S-=zr),_.key==="ArrowDown"&&(L+=zr),_.key==="ArrowUp"&&(L=Math.max(0,L-zr))),{subLeft:S,subTop:L,width:w,height:I}}))},v=_=>{if(_.target.closest(".close_button"))return;const C=_.clientX-c.subLeft,b=_.clientY-c.subTop,S=w=>{u(I=>({...I,subLeft:w.clientX-C,subTop:Math.max(0,w.clientY-b)}))},L=()=>{window.removeEventListener("mousemove",S),window.removeEventListener("mouseup",L),d.current=null};window.addEventListener("mousemove",S),window.addEventListener("mouseup",L),d.current=()=>{window.removeEventListener("mousemove",S),window.removeEventListener("mouseup",L)}},g=(_,C)=>{C.preventDefault(),C.stopPropagation();const b=c.width,S=c.height,L=C.clientX,w=C.clientY,I=R=>{const k=R.clientX-L,H=R.clientY-w;u(N=>{let{subLeft:Z,subTop:V,width:F,height:J}=N;if(_.includes("r")&&(F=Math.max(W0,b+k)),_.includes("b")&&(J=Math.max(W0,S+H)),_.includes("l")){const U=b-k;U>=W0&&(F=U,Z=c.subLeft+k)}return{subLeft:Z,subTop:V,width:F,height:J}})},T=()=>{window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",T),d.current=null};window.addEventListener("mousemove",I),window.addEventListener("mouseup",T),d.current=()=>{window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",T)}};return F6.createPortal(l.jsxs("div",{ref:s,className:an.modal_root,style:{left:`${c.subLeft}px`,top:`${c.subTop}px`,width:`${c.width}px`,height:`${c.height}px`},tabIndex:-1,onKeyDown:p,role:"dialog","aria-modal":"false","aria-labelledby":n,children:[l.jsxs("div",{className:an.modal_header,onMouseDown:v,tabIndex:0,children:[l.jsx("div",{className:an.header_title,children:e}),l.jsx("button",{className:an.close_button,onClick:r,"aria-label":o,children:l.jsx(Pe,{name:"close",size:"1.75rem"})})]}),l.jsx("div",{className:an.modal_content,children:t}),l.jsx("div",{className:`${an.resizer} ${an.resizer_r}`,onMouseDown:_=>{g("r",_)}}),l.jsx("div",{className:`${an.resizer} ${an.resizer_l}`,onMouseDown:_=>{g("l",_)}}),l.jsx("div",{className:`${an.resizer} ${an.resizer_b}`,onMouseDown:_=>{g("b",_)}}),l.jsx("div",{className:`${an.resizer} ${an.resizer_bl}`,onMouseDown:_=>{g("bl",_)}}),l.jsx("div",{className:`${an.resizer} ${an.resizer_br}`,onMouseDown:_=>{g("br",_)}})]}),document.body)}function NJ({runTimeParameters:e,t}){const n=r=>{const{type:o}=r,i=P.formatRunTimeParameterMinMax(r),a="choices"in r?r.choices:[],s=a.length;if(s>0)return s>2?t!=null?t("num_options",{num:s}):`${s} options`:P.orderRuntimeParameterRangeOptions(a);switch(o){case"int":case"float":return i;case"bool":return t!=null?t("on_off"):"On, off";default:return""}};return l.jsxs(BJ,{children:[l.jsxs("thead",{children:[l.jsx(Hd,{children:t!=null?t("name"):"Name"}),l.jsx(Hd,{children:t!=null?t("default_value"):"Default Value"}),l.jsx(Hd,{children:t!=null?t("range"):"Range"})]}),l.jsx("tbody",{children:e.sort((r,o)=>r.type==="csv_file"&&o.type!=="csv_file"?-1:0).map((r,o)=>{const i=o===e.length-1;return l.jsxs(HJ,{isLast:i,children:[l.jsx(DJ,{displayName:r.displayName,description:r.description,isLast:i,index:o}),l.jsx(s6,{isLast:i,children:r.type==="csv_file"?l.jsx(yw,{text:t("protocol_details:requires_upload"),type:"warning",hasIcon:!1,width:Un}):l.jsx(Re,{desktopStyle:"bodyDefaultRegular",children:P.formatRunTimeParameterDefaultValue(r,t)})}),l.jsx(s6,{isLast:i,paddingRight:"0",children:l.jsx(Re,{desktopStyle:"bodyDefaultRegular",children:r.type==="csv_file"?t("n_a"):n(r)})})]},`runTimeParameter-${o}`)})})]})}const DJ=e=>{const{displayName:t,description:n,isLast:r,index:o}=e,[i,a]=Z1();return l.jsxs(s6,{display:"span",isLast:r,children:[l.jsx(VJ,{desktopStyle:"bodyDefaultRegular",$_css:Be,children:t}),n!=null?l.jsxs(l.Fragment,{children:[l.jsx(Ce,{display:R8,...i,children:l.jsx(Pe,{name:"information",size:"1rem",color:Qe,"data-testid":`Icon_${o}`,paddingTop:nt})}),l.jsx(FJ,{...a,backgroundColor:De,width:"8.75rem",$_css2:U8,children:n})]}):null]})},BJ=ne.table`
+      `,Eq=ne("li")`${Dr}`,Mq=ne("li")`${Dr}`,kq=ne("li")`${Dr}`,Rq=ne("li").withConfig({displayName:"CommandText___StyledLi0",componentId:"sc-7uroq7-0"})(["",""],Dr);const G0={success:{icon:{name:"check-circle"},backgroundColor:X1,color:Po},error:{icon:{name:"ot-alert"},backgroundColor:Rr,color:mn},warning:{icon:{name:"ot-alert"},backgroundColor:qr,color:F1},updating:{icon:{name:"ot-spinner"},backgroundColor:ut,color:Qe},informing:{icon:{name:"information"},backgroundColor:q1,color:Kt}};function Oq(e){const{type:t,onCloseClick:n,icon:r,children:o,isCloseActionLoading:i=!1,padding:a,closeButton:s,iconMarginLeft:c,iconMarginRight:u,size:d,...p}=e,v=G0[t],g={...r??v.icon,size:d??"1rem",marginRight:u??Be,marginLeft:c??"0rem",color:G0[t].color},_=X(["font-size:",";font-weight:",";border-radius:",";@media ","{font-size:1.25rem;font-weight:",";background-color:",";border-radius:",";line-height:1.5rem;}"],Tr,un,nt,ye,kt,Qo,Q6);return l.jsxs(jq,{backgroundColor:G0[t].backgroundColor,flexDirection:vn,justifyContent:Nn,alignItems:Ve,padding:a??Be,onClick:C=>{C.stopPropagation()},"data-testid":`Banner_${t}`,...p,$_css:_,children:[l.jsx(Pe,{...g,"aria-label":`icon_${t}`,spin:G0[t].icon.name==="ot-spinner"}),l.jsx(Ce,{flex:"1",alignItems:Ve,children:e.children}),n!=null&&!(i??!1)?l.jsx(Lt,{"data-testid":"Banner_close-button",onClick:e.onCloseClick,children:s??l.jsx(Pe,{width:ht,height:ht,marginTop:Za,name:"close","aria-label":"close_icon"})}):null,(i??!1)&&l.jsx(Pe,{name:"ot-spinner",size:"1rem","aria-label":"ot-spinner",spin:!0})]})}var jq=ne(Ce).withConfig({displayName:"Banner___StyledFlex",componentId:"sc-1q92z8p-0"})(["",""],e=>e.$_css);const Pq="number",Nq="text",Dq="password",Bq="#9e5e00",G7=W.forwardRef((e,t)=>{const{disabled:n,id:r,placeholder:o,units:i,value:a,error:s,title:c,tooltipText:u,caption:d,type:p,onClick:v,isIndeterminate:g=!1,textAlign:_=qa,size:C="small",leftElement:b,rightElement:S,borderRadius:L,padding:w,testId:I,...T}=e,[R,k]=Z1(),H=W.useRef(null),N=N7(t,H),Z=W.useId(),V=r??Z,F=s!=null,J=g??!1?"":a??"",U=g??!1?"-":o,Y=X(["background-color:",";border-radius:",";padding:",";border:1px "," ",";font-size:",";width:100%;height:",";& input{border-radius:inherit;color:",";border:none;flex:1 1 auto;width:100%;height:",";text-align:",";}& input:focus{outline:none;}&:has(input:disabled){border:1px "," ",";}&:has(input:focus){border:1px "," ",";}&:has(input:focus-visible){outline:2px "," ",";outline-offset:2px;}&:hover{border:1px "," ",";}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"],de,L??Dt,w??Be,nn,F?Ht:tt,Tr,C==="small"?"2rem":"2.75rem",De,it,_,nn,ut,nn,F?Ht:Se,nn,Se,nn,F?Ht:Qe),se=X(["color:",";padding-bottom:",";text-align:",";font-size:",";line-height:",";font-weight:",";"],Qe,nt,_,K1,Xt,un),re=X(["color:",";font:",";text-align:",";white-space:",";"],n?At:tt,xl,ow,Lo);return l.jsx(Ce,{width:"100%",alignItems:Ve,lineHeight:1,fontSize:Tr,fontWeight:un,color:s!=null?Bq:De,opacity:n===!0?.5:1,children:l.jsxs(Ce,{flexDirection:dt,width:"100%",children:[c!=null?l.jsxs(Ce,{flexDirection:vn,gridGap:Be,alignItems:Ve,children:[l.jsx(zq,{htmlFor:V,$_css:se,children:c}),u!=null?l.jsxs(l.Fragment,{children:[l.jsx(Ce,{...R,children:l.jsx(Pe,{name:"information",size:xt,color:Qe})}),l.jsx(Go,{tooltipProps:k,children:u})]}):null]}):null,l.jsx(Ce,{width:"100%",flexDirection:dt,onClick:n===!0?void 0:v,children:l.jsxs(Zq,{alignItems:Ve,onClick:()=>{H.current?.focus()},$_css2:Y,children:[b!=null?l.jsx(Ce,{marginRight:Be,children:b}):null,l.jsx(Fq,{...T,id:V,"data-testid":I,value:J,placeholder:U,onWheel:fe=>{fe.currentTarget.blur()},type:p,disabled:n,ref:N}),i!=null?l.jsx(Gq,{$_css3:re,children:i}):null,S!=null?l.jsx(Ce,{alignSelf:jS,onClick:fe=>{fe.stopPropagation()},children:S}):null]})}),d!=null?l.jsx(Wq,{desktopStyle:"bodyDefaultRegular",color:F?Ht:Qe,children:d}):null,F?l.jsx(Uq,{desktopStyle:"bodyDefaultRegular",children:s}):null]})})});G7.displayName="InputField";const Hq=X(["color:",";padding-top:",";"],Ht,nt),Vq=X(["padding-top:",";"],nt),Fq=ne.input.withConfig({displayName:"InputField__StyledInput",componentId:"sc-7xlzm8-0"})(["background-color:transparent;&::placeholder{color:",";}"],At);var zq=ne("label").withConfig({displayName:"InputField___StyledLabel",componentId:"sc-7xlzm8-1"})(["",""],e=>e.$_css),Zq=ne(Ce).withConfig({displayName:"InputField___StyledFlex",componentId:"sc-7xlzm8-2"})(["",""],e=>e.$_css2),Gq=ne(Ce).withConfig({displayName:"InputField___StyledFlex2",componentId:"sc-7xlzm8-3"})(["",""],e=>e.$_css3),Wq=ne(Re).withConfig({displayName:"InputField___StyledStyledText",componentId:"sc-7xlzm8-4"})(["",""],Vq),Uq=ne(Re).withConfig({displayName:"InputField___StyledStyledText2",componentId:"sc-7xlzm8-5"})(["",""],Hq);function zI(e){const{buttonText:t,buttonValue:n,isSelected:r=!1,onChange:o,disabled:i=!1,id:a=t,stackingProps:s,allowInputField:c,isNestedDefALid:u,customStackLimit:d}=e,p=s!=null&&s.definition.allowedRoles?.includes("lid"),v=d??s?.definition.stackLimit;return l.jsxs(Ce,{width:"100%",margin:nt,onClick:g=>{g.stopPropagation()},children:[l.jsx(Xq,{checked:r,id:a,disabled:i,onChange:g=>{o(g),g.stopPropagation()},type:"radio",value:n}),l.jsx(Kq,{role:"label",isSelected:r,disabled:i,htmlFor:a,children:l.jsxs(Ce,{flexDirection:dt,gridGap:nt,children:[l.jsx(Re,{desktopStyle:"bodyDefaultRegular",children:t}),s!=null&&r?l.jsxs(Ce,{flexDirection:dt,backgroundColor:q6,padding:it,borderRadius:Dt,gridGap:Be,children:[p&&!u&&s.onCheckboxChange!=null?l.jsx(bw,{onChange:g=>{g.stopPropagation(),g.preventDefault(),s.onCheckboxChange?.()},value:s.checked,label:s.checkboxCaption,padding:`0 0 0 ${Be}`}):null,v!=null&&v>1&&c?l.jsx(G7,{id:"CustomizeExpandButton_inputField",testId:"customize-expand-button-input-field",title:s.inputTitle,onChange:g=>{g.stopPropagation(),s.onInputFieldChange(g)},type:"number",error:!s.inputFieldValue||s.inputFieldValue>v?s.errorMessage:null,value:s.inputFieldValue,caption:s.inputCaption}):null]}):null]})})]})}const Yq=W.memo(zI),Xq=ne.input.withConfig({displayName:"CustomizeExpandButton__SettingButton",componentId:"sc-vfv2m-0"})(["display:none;"]),qq=X(["background:",";color:",";&:hover{background-color:",";}"],de,De,Da),Jq=X(["background:",";color:",";&:active{background-color:",";}"],Se,de,Kt),Qq=X(["color:",";background-color:",";"],At,Da),Kq=ne.label.withConfig({displayName:"CustomizeExpandButton__SettingButtonLabel",componentId:"sc-vfv2m-1"})(["border-radius:",";cursor:",";padding:",";width:100%;"," ",""],Bt,bn,xt,({isSelected:e})=>e?Jq:qq,({disabled:e})=>e&&Qq);function ZI({text:e,isSelected:t,isZoomed:n,moduleModel:r,maxWidth:o=Un,labelBorderRadius:i,isLast:a=!1}){return l.jsx(tJ,{fontSize:n?"6px":"18px","data-testid":`DeckLabel_${t?"Selected":"UnSelected"}`,$_css:t?$q(o,i):eJ(o,i,a),children:l.jsxs(Ce,{gridGap:di,alignItems:Ve,children:[r!=null&&n?l.jsx(NS,{size:"0.5rem",moduleType:P.getModuleType(r)}):null,l.jsx(Re,{color:t?de:Se,children:e})]})})}const GI=(e,t)=>X(["width:",";max-width:",";padding:",";border-radius:",";"],Un,e,di,t??"0"),$q=(e,t)=>X([""," color:",";border:1.5px solid ",";background-color:",";"],GI(e,t),de,Se,Se),eJ=(e,t,n)=>X([""," color:",";border-right:1.5px solid ",";border-bottom:1.5px solid ",";border-left:1.5px solid ",";background-color:",";border-radius:",";"],GI(e,t),Se,Se,Se,Se,de,n?t:"0");var tJ=ne(Ce).withConfig({displayName:"DeckLabel___StyledFlex",componentId:"sc-nwtj4r-0"})(["",""],e=>e.$_css);const nJ="iconbutton-module__icon_button__It6HS",rJ="iconbutton-module__size_sm__J-9-w",oJ="iconbutton-module__size_md__dF9-a",Bd={icon_button:nJ,size_sm:rJ,size_md:oJ},iJ={primary:{default:Se,active:Kt,hover:Et,icon:de},alert:{default:Ht,active:mn,hover:G6,icon:de}},aJ={sm:"1rem",md:"1.5rem"};function sJ({variant:e,iconName:t,size:n="md","aria-label":r,focusableDisabled:o=!1,onClick:i,className:a,...s}){const c=iJ[e],u=aJ[n],d=Ye(Bd.icon_button,Bd[`variant_${e}`],Bd[`size_${n}`],a),p={"--variant-default":c.default,"--variant-active":c.active,"--variant-hover":c.hover},v=g=>{if(o){g.preventDefault();return}i?.(g)};return l.jsx("button",{type:"button",className:d,style:p,"aria-label":r,"aria-disabled":o?"true":void 0,onClick:v,...s,children:l.jsx(Pe,{name:t,size:u,color:c.icon})})}function lJ({content:e,subContent:t,backgroundColor:n=ut,height:r="100%",iconName:o}){return l.jsxs(Ce,{alignItems:Ve,justifyContent:_n,width:"100%",height:r,flexDirection:dt,gridGap:xt,backgroundColor:n,borderRadius:Bt,padding:`${pa} ${it}`,"data-testid":"InfoScreen",children:[l.jsx(Pe,{name:o??"ot-alert",size:"1.25rem",color:Qe,"aria-label":"alert",spin:o==="ot-spinner"}),l.jsxs(Ce,{flexDirection:dt,alignItems:Ve,gridGap:nt,children:[l.jsx(Re,{desktopStyle:"bodyDefaultSemiBold",children:e}),t!=null?l.jsx(Re,{desktopStyle:"bodyDefaultRegular",color:Qe,textAlign:Ao,children:t}):null]})]})}const WI="all 150ms ease-in";function cJ({headerChild:e,alertKind:t,icon:n,children:r,tableHeaders:o}){const[i,a]=W.useState(!1);return l.jsxs(vJ,{$_css:uJ(t),children:[l.jsxs(bJ,{onClick:()=>{a(!i)},children:[l.jsxs(_J,{children:[t!=="default"?l.jsx(yJ,{name:"ot-alert","data-testid":"ot-alert"}):n,l.jsx(CJ,{children:e})]}),l.jsx(xJ,{name:i?"chevron-up":"chevron-down","data-testid":i?"chevron-up":"chevron-down"})]}),l.jsx(LJ,{$_css2:dJ(i),children:l.jsx(j7,{headers:o,children:r})})]})}const uJ=e=>X(["width:100%;flex-direction:",";padding:",";border-radius:",";gap:",";background-color:",";transition:",";&:focus-visible{border-color:",";border-width:3px;}@media ","{padding:",";gap:",";border-radius:",";background-color:",";&:active{background-color:",";}}@media not all and ","{&:hover{background-color:",";}}"],dt,xt,Be,Be,e==="warning"?qr:Ar,WI,Se,ye,ht,ht,it,e==="warning"?Qo:ft,e==="warning"?tl:At,ye,e==="warning"?qr:ut),dJ=e=>X(["width:100%;display:block;max-height:",";opacity:",";overflow:hidden;margin-top:",";transition:",";@media ","{margin-top:",";}"],e?"10000000px":"0px",e?1:0,e?"0px":`-${Be}`,WI,ye,e?"0px":`-${ht}`),fJ=X(["width:100%;justify-content:",";gap:",";cursor:",";@media ","{gap:",";}"],Nn,ht,bn,ye,pa),hJ=X(["display:flex;flex-grow:1;gap:",";align-items:",";"],xt,Ve),pJ=X(["flex-grow:1;width:100%;"]),mJ=X(["color:",";height:",";width:",";flex-shrink:0;@media ","{height:",";width:",";}"],F1,Ir,Ir,ye,Ho,Ho),gJ=X(["height:",";width:",";flex-shrink:0;@media ","{height:",";width:",";}"],ht,ht,ye,q4,q4);var vJ=ne(Ce)`${e=>e.$_css}`,bJ=ne(Ce)`${fJ}`,_J=ne(Ce)`${hJ}`,yJ=ne(Pe)`${mJ}`,CJ=ne(Wt)`${pJ}`,xJ=ne(Pe)`${gJ}`,LJ=ne(Wt).withConfig({displayName:"ListAccordion___StyledBox2",componentId:"sc-ved93c-0"})(["",""],e=>e.$_css2);const SJ="modelessmodal-module__modal_root__-ChBo",wJ="modelessmodal-module__modal_header__9vlw1",AJ="modelessmodal-module__header_title__G6pB-",IJ="modelessmodal-module__close_button__iPdOw",TJ="modelessmodal-module__modal_content__sIyhC",EJ="modelessmodal-module__resizer__SIKNY",MJ="modelessmodal-module__resizer_r__j-ot4",kJ="modelessmodal-module__resizer_l__g9q6M",RJ="modelessmodal-module__resizer_b__naDkH",OJ="modelessmodal-module__resizer_bl__W037N",jJ="modelessmodal-module__resizer_br__NdOdB",an={modal_root:SJ,modal_header:wJ,header_title:AJ,close_button:IJ,modal_content:TJ,resizer:EJ,resizer_r:MJ,resizer_l:kJ,resizer_b:RJ,resizer_bl:OJ,resizer_br:jJ},zr=10,W0=300;function PJ({header:e,children:t,"aria-labelledby":n,onClose:r,"aria-label":o,defaultWidth:i=400,defaultHeight:a=400}){const s=W.useRef(null),[c,u]=W.useState({subLeft:100,subTop:100,width:i,height:a}),d=W.useRef(null);W.useEffect(()=>{if(s.current!=null){s.current.focus();const _=Math.max(0,(window.innerWidth-i)/2),C=Math.max(0,(window.innerHeight-a)/2);u(b=>({...b,subLeft:_,subTop:C}))}return()=>{d.current!=null&&d.current()}},[i,a]);const p=_=>{if(_.key==="Escape"){_.stopPropagation(),r();return}_.target.closest(`.${an.modal_header}`)!=null&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(_.key)&&(_.preventDefault(),u(b=>{let{subLeft:S,subTop:L,width:w,height:I}=b;return _.shiftKey?(_.key==="ArrowRight"&&(w=w+zr),_.key==="ArrowDown"&&(I=I+zr),_.key==="ArrowLeft"&&(w=w+zr,S=S-zr),_.key==="ArrowUp"&&(I=Math.max(W0,I-zr))):(_.key==="ArrowRight"&&(S+=zr),_.key==="ArrowLeft"&&(S-=zr),_.key==="ArrowDown"&&(L+=zr),_.key==="ArrowUp"&&(L=Math.max(0,L-zr))),{subLeft:S,subTop:L,width:w,height:I}}))},v=_=>{if(_.target.closest(".close_button"))return;const C=_.clientX-c.subLeft,b=_.clientY-c.subTop,S=w=>{u(I=>({...I,subLeft:w.clientX-C,subTop:Math.max(0,w.clientY-b)}))},L=()=>{window.removeEventListener("mousemove",S),window.removeEventListener("mouseup",L),d.current=null};window.addEventListener("mousemove",S),window.addEventListener("mouseup",L),d.current=()=>{window.removeEventListener("mousemove",S),window.removeEventListener("mouseup",L)}},g=(_,C)=>{C.preventDefault(),C.stopPropagation();const b=c.width,S=c.height,L=C.clientX,w=C.clientY,I=R=>{const k=R.clientX-L,H=R.clientY-w;u(N=>{let{subLeft:Z,subTop:V,width:F,height:J}=N;if(_.includes("r")&&(F=Math.max(W0,b+k)),_.includes("b")&&(J=Math.max(W0,S+H)),_.includes("l")){const U=b-k;U>=W0&&(F=U,Z=c.subLeft+k)}return{subLeft:Z,subTop:V,width:F,height:J}})},T=()=>{window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",T),d.current=null};window.addEventListener("mousemove",I),window.addEventListener("mouseup",T),d.current=()=>{window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",T)}};return F6.createPortal(l.jsxs("div",{ref:s,className:an.modal_root,style:{left:`${c.subLeft}px`,top:`${c.subTop}px`,width:`${c.width}px`,height:`${c.height}px`},tabIndex:-1,onKeyDown:p,role:"dialog","aria-modal":"false","aria-labelledby":n,children:[l.jsxs("div",{className:an.modal_header,onMouseDown:v,tabIndex:0,children:[l.jsx("div",{className:an.header_title,children:e}),l.jsx("button",{className:an.close_button,onClick:r,"aria-label":o,children:l.jsx(Pe,{name:"close",size:"1.75rem"})})]}),l.jsx("div",{className:an.modal_content,children:t}),l.jsx("div",{className:`${an.resizer} ${an.resizer_r}`,onMouseDown:_=>{g("r",_)}}),l.jsx("div",{className:`${an.resizer} ${an.resizer_l}`,onMouseDown:_=>{g("l",_)}}),l.jsx("div",{className:`${an.resizer} ${an.resizer_b}`,onMouseDown:_=>{g("b",_)}}),l.jsx("div",{className:`${an.resizer} ${an.resizer_bl}`,onMouseDown:_=>{g("bl",_)}}),l.jsx("div",{className:`${an.resizer} ${an.resizer_br}`,onMouseDown:_=>{g("br",_)}})]}),document.body)}function NJ({runTimeParameters:e,t}){const n=r=>{const{type:o}=r,i=P.formatRunTimeParameterMinMax(r),a="choices"in r?r.choices:[],s=a.length;if(s>0)return s>2?t!=null?t("num_options",{num:s}):`${s} options`:P.orderRuntimeParameterRangeOptions(a);switch(o){case"int":case"float":return i;case"bool":return t!=null?t("on_off"):"On, off";default:return""}};return l.jsxs(BJ,{children:[l.jsxs("thead",{children:[l.jsx(Hd,{children:t!=null?t("name"):"Name"}),l.jsx(Hd,{children:t!=null?t("default_value"):"Default Value"}),l.jsx(Hd,{children:t!=null?t("range"):"Range"})]}),l.jsx("tbody",{children:e.sort((r,o)=>r.type==="csv_file"&&o.type!=="csv_file"?-1:0).map((r,o)=>{const i=o===e.length-1;return l.jsxs(HJ,{isLast:i,children:[l.jsx(DJ,{displayName:r.displayName,description:r.description,isLast:i,index:o}),l.jsx(s6,{isLast:i,children:r.type==="csv_file"?l.jsx(yw,{text:t("protocol_details:requires_upload"),type:"warning",hasIcon:!1,width:Un}):l.jsx(Re,{desktopStyle:"bodyDefaultRegular",children:P.formatRunTimeParameterDefaultValue(r,t)})}),l.jsx(s6,{isLast:i,paddingRight:"0",children:l.jsx(Re,{desktopStyle:"bodyDefaultRegular",children:r.type==="csv_file"?t("n_a"):n(r)})})]},`runTimeParameter-${o}`)})})]})}const DJ=e=>{const{displayName:t,description:n,isLast:r,index:o}=e,[i,a]=Z1();return l.jsxs(s6,{display:"span",isLast:r,children:[l.jsx(VJ,{desktopStyle:"bodyDefaultRegular",$_css:Be,children:t}),n!=null?l.jsxs(l.Fragment,{children:[l.jsx(Ce,{display:R8,...i,children:l.jsx(Pe,{name:"information",size:"1rem",color:Qe,"data-testid":`Icon_${o}`,paddingTop:nt})}),l.jsx(FJ,{...a,backgroundColor:De,width:"8.75rem",$_css2:U8,children:n})]}):null]})},BJ=ne.table`
   width: 100%;
   border-collapse: collapse;
   text-align: left;

package/lib/index.mjs

@@ -17097,21 +17097,22 @@ function Zhe({
   "aria-label": r,
   focusableDisabled: o = !1,
   onClick: i,
-  ...a
+  className: a,
+  ...s
 }) {
-  const s = qU[e], l = JU[n], u = Ye($4.icon_button, $4[`variant_${e}`], $4[`size_${n}`]), d = {
+  const l = qU[e], u = JU[n], d = Ye($4.icon_button, $4[`variant_${e}`], $4[`size_${n}`], a), p = {
     // @ts-expect-error: CSS custom properties are not recognized by React.CSSProperties
-    "--variant-default": s.default,
-    "--variant-active": s.active,
-    "--variant-hover": s.hover
+    "--variant-default": l.default,
+    "--variant-active": l.active,
+    "--variant-hover": l.hover
   };
-  return /* @__PURE__ */ c("button", { type: "button", className: u, style: d, "aria-label": r, "aria-disabled": o ? "true" : void 0, onClick: (v) => {
+  return /* @__PURE__ */ c("button", { type: "button", className: d, style: p, "aria-label": r, "aria-disabled": o ? "true" : void 0, onClick: (g) => {
     if (o) {
-      v.preventDefault();
+      g.preventDefault();
       return;
     }
-    i?.(v);
-  }, ...a, children: /* @__PURE__ */ c(Oe, { name: t, size: l, color: s.icon }) });
+    i?.(g);
+  }, ...s, children: /* @__PURE__ */ c(Oe, { name: t, size: u, color: l.icon }) });
 }
 function Ghe({
   content: e,

package/lib/molecules/IconButton/index.d.ts

@@ -40,6 +40,8 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
      * in the future, we will need to add a style for this
      */
     focusableDisabled?: boolean;
+    /** improve extensibility of styling */
+    className?: string;
 }
 /**
  * A round button component that displays a centered icon.
@@ -48,5 +50,5 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
  * @param {IconButtonProps} props The props for the component.
  * @returns {JSX.Element} The rendered IconButton component.
  */
-export declare function NewIconButton({ variant, iconName, size, 'aria-label': ariaLabel, focusableDisabled, onClick, ...restProps }: IconButtonProps): JSX.Element;
+export declare function NewIconButton({ variant, iconName, size, 'aria-label': ariaLabel, focusableDisabled, onClick, className, ...restProps }: IconButtonProps): JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentrons/components",
-  "version": "0.3.9-alpha.0",
+  "version": "0.3.10-alpha.0",
   "description": "React components library for Opentrons' projects",
   "types": "lib/index.d.ts",
   "style": "lib/style.css",
@@ -45,8 +45,8 @@
     "react-select": "5.4.0",
     "react-viewport-list": "6.3.0",
     "styled-components": "5.3.6",
-    "@opentrons/step-generation": "0.3.9-alpha.0",
-    "@opentrons/shared-data": "0.3.9-alpha.0"
+    "@opentrons/shared-data": "0.3.10-alpha.0",
+    "@opentrons/step-generation": "0.3.10-alpha.0"
   },
   "files": [
     "lib/",