@zeniai/web-components 3.16.96 → 3.16.98

package/dist/LabeledUserSingleSelectWithSubtitlesField-P_wGSd90.cjs

@@ -0,0 +1,229 @@
+"use strict";const s=require("./vendor-.pnpm-D0ILHvHB.cjs"),r=require("@emotion/styled"),t=require("./index-CQwLnHSI.cjs"),te=require("./RoleWithToolTip-xbW61W6W.cjs"),W=require("./avatar-D-486uIp.cjs"),T={selectContainerMarginHorizontal:new t.ResponsiveSized(t.sp[2],t.sp[3]),marginTop:new t.ResponsiveSized(t.sp[1],t.sp[0])},se=r(t.ExtraSmallRegular)`
+  display: flex;
+  gap: ${t.Space.sp2};
+  align-items: center;
+  color: ${e=>e.theme.colors.grey1};
+  justify-content: ${e=>e.menuIsOpen?"flex-start":"flex-end"};
+  height: 18px;
+  width: 100%;
+`,ne=r.div`
+  display: flex;
+  align-items: center;
+`,re=r.div`
+  height: ${t.Space.sp1};
+  width: ${t.Space.sp1};
+  background-color: ${e=>e.theme.colors.grey1};
+  border-radius: 50%;
+  opacity: 0.4;
+`,oe=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: ${t.Space.sp6};
+  gap: ${t.Space.sp3};
+`,ie=r(t.StandardRegular)`
+  display: flex;
+`,le=r.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  opacity: ${e=>e.isCurrOptionDisabled?.5:1};
+`,ae=r.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${t.Space.sp2};
+`,ce=r.img`
+  height: ${t.Space.sp5};
+  width: ${t.Space.sp5};
+  border-radius: 50%;
+  justify-content: center;
+`,ue=r.img`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  border-radius: 50%;
+  justify-content: center;
+  color: ${e=>e.theme.colors.hero};
+`,M=r.div`
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  align-items: center;
+  gap: ${t.Space.sp2};
+  height: 100%;
+`,de=r(M)`
+  flex-direction: column;
+  gap: ${t.Space.sp0};
+`,pe=r.div`
+  display: flex;
+  align-items: center;
+  height: ${t.Space.sp6};
+  gap: ${t.Space.sp2};
+  justify-content: ${e=>e.menuIsOpen?"flex-start":"flex-end"};
+  width: 100%;
+`,xe=r(t.StandardRegular)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,me=r.div`
+  display: flex;
+  align-items: center;
+  color: ${e=>e.isError===!0&&e.menuIsOpen!==!0?t.Colors.important:e.theme.colors.grey1};
+  fill: ${e=>e.theme.colors.grey1};
+`,he=r(t.SmallRegular)`
+  color: ${e=>e.hasSelectedUser?e.theme.colors.primary:e.theme.colors.hero};
+  margin-left: -10px;
+  margin-right: -10px;
+  display: flex;
+  padding: ${t.Space.sp2} 12px 12px 12px;
+  fill: ${e=>e.hasSelectedUser?e.theme.colors.primary:e.theme.colors.hero};
+  cursor: ${e=>e.hasSelectedUser?"pointer":"default"};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+    background: ${e=>e.theme.colors.background};
+    fill: ${e=>e.theme.colors.primary};
+  }
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: -${t.Space.sp2};
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+`,ge=r(M)`
+  align-items: center;
+  gap: ${t.Space.sp2};
+`,V=r.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,F=r.div``,je=r.div`
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey5};
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+  .select-control {
+    border: none;
+    height: 100%;
+    background-color: ${e=>e.menuIsOpen&&e.isValuePlacedAtEnd===!0?e.theme.colors.background:e.isError===!0?t.Colors.importantLight:e.theme.colors.grey5};
+    box-shadow: none;
+    border-radius: ${t.Space.sp1};
+    &:hover {
+      fill: ${e=>e.theme.colors.primary};
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.isValuePlacedAtEnd!==!0?"inherit":e.theme.colors.background};
+      border-color: none;
+    }
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+    padding: 0;
+  }
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    margin: ${e=>`${t.Space.sp0} ${e.isValuePlacedAtEnd===!0?e.bigMarginRightForSmallScreens===!0?t.Space.sp3:T.selectContainerMarginHorizontal.valuePx(e.windowSize):t.Space.sp0}`};
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    justify-content: ${e=>e.menuIsOpen===!1&&e.isValuePlacedAtEnd===!0?"flex-end":"flex-start"};
+
+    .single-select-field__single-value {
+      border-radius: ${t.Space.sp0};
+      margin: ${t.Space.sp0};
+      color: ${e=>e.theme.colors.primary};
+      ${t.textStyles.standardRegular.css};
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      height: 100%;
+    }
+
+    .single-select-field__input-container {
+      display: flex;
+      width: ${e=>e.menuIsOpen===!1?t.Space.sp0:"100%"};
+      position: ${e=>e.isFocused===!1&&e.selectedValue==null?"initial":"absolute"};
+      ${t.textStyles.standardRegular.css};
+      color: ${e=>e.theme.colors.primary};
+      margin: ${t.Space.sp0};
+      cursor: inherit;
+
+      > input {
+        text-align: ${e=>e.isFocused===!1&&e.selectedValue==null?"right":"initial"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${e=>e.isError===!0&&e.menuIsOpen!==!0?t.Colors.important:e.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`,Se=r.div`
+  width: ${e=>e.windowSize==="small"?"max-content":"100%"};
+  display: flex;
+  flex-direction: column;
+`,fe=r(W.SvgAvatar)`
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  color: ${e=>e.theme.colors.hero};
+`,U=r(t.EyebrowSmallRegular)`
+  color: ${e=>e.theme.colors.alert};
+  text-transform: none;
+  border: 1px solid ${e=>e.theme.colors.alert};
+  padding: 1px ${t.Space.sp1};
+  border-radius: ${t.Space.sp1};
+  margin-top: ${({windowSize:e})=>T.marginTop.valuePx(e)};
+  width: fit-content;
+`;function $e({allUsers:e,selectedValue:a,showOneOffLabel:l,placeholder:m,isOptionRemovable:R,valueToSubtitle:j,onSelectionChanged:S,name:y,userContainerStyles:h,optionStyles:P,isValuePlacedAtEnd:b=!0,isDisabled:k,showOnlyAvatar:E=!1,showAvatarAndSubtitles:v=!0,isOptionDisabled:C,disabledOptionHint:f,bigMarginRightForSmallScreens:L=!1}){const{formState:{errors:N}}=s.useFormContext(),z=s.has(N,y??""),d=t.useWindowSizeContext(),w=[];l!=null&&w.push(l.value),w.push(...e.map(n=>n.userId));const B=n=>{if(l!=null&&l.value===n)return l.label;const o=e.findIndex(i=>i.userId===n);if(o!==-1){const i=e[o];return i.user?.firstName||i.user?.lastName?`${i.user?.firstName} ${i.user?.lastName}`:`${i.user?.email}`}else return""},O=n=>{const o=e.findIndex(i=>i.userId===n);if(o!==-1)return e[o].user},_=n=>{const{menuIsOpen:o,children:i}=n;return s.jsxRuntimeExports.jsx(me,{menuIsOpen:o,isError:z,children:s.jsxRuntimeExports.jsx(ie,{children:i})})},q=({labelDetails:n})=>s.jsxRuntimeExports.jsxs(he,{hasSelectedUser:a===n.value,children:[s.jsxRuntimeExports.jsxs(ge,{children:[s.jsxRuntimeExports.jsx(fe,{}),s.jsxRuntimeExports.jsx(F,{children:s.jsxRuntimeExports.jsx(V,{children:n.label})})]}),a===n.value?s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:s.jsxRuntimeExports.jsx(t.SvgTick,{width:t.Space.sp3,height:t.Space.sp3})}):null]}),G=n=>{const{children:o,data:i,selectProps:c}=n,{menuIsOpen:p}=c;if(l!=null&&i?.value===l.value)return s.jsxRuntimeExports.jsxs(M,{children:[v||E?s.jsxRuntimeExports.jsx(W.SvgAvatar,{style:{height:t.Space.sp4,width:t.Space.sp4}}):null,s.jsxRuntimeExports.jsx(xe,{children:l.label})]});const u=e.findIndex($=>$.userId===i.value),x=e[u],g=j(i.value);return s.jsxRuntimeExports.jsxs(de,{children:[s.jsxRuntimeExports.jsxs(pe,{menuIsOpen:p,children:[v||E?s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:x?.user?.photo!=null?s.jsxRuntimeExports.jsx(ue,{src:x?.user?.photo.href,alt:t.appLocale.getLocalizedStrings().cockpit.userProfileAltText,onError:({currentTarget:$})=>{$.onerror=null,$.src=t.AvatarSVG},loading:"lazy"}):s.jsxRuntimeExports.jsx(t.EntityAvatarWithInitials,{firstName:x?.user?.firstName??"",lastName:x?.user?.lastName??"",size:`${t.Space.sp4}`,index:u})}):null,s.jsxRuntimeExports.jsx(V,{children:o})]}),v?s.jsxRuntimeExports.jsx(A,{subtitleList:g,menuIsOpen:c.menuIsOpen,member:x}):null]})},A=({subtitleList:n,member:o,menuIsOpen:i})=>{const c=n.length;return s.jsxRuntimeExports.jsxs(se,{menuIsOpen:i,children:[o!=null?s.jsxRuntimeExports.jsx(te.RoleWithToolTip,{roles:o?.userRole.userRoles}):null,o!=null&&c>0?s.jsxRuntimeExports.jsx(re,{}):null,c>0?n.map((p,u)=>s.jsxRuntimeExports.jsx(ne,{children:p},`${p}${u}`)):null]})},H=n=>{const{data:o,isSelected:i,selectProps:c,value:p}=n,u=!!C?.(p)&&i===!1;if(l!=null&&o?.value===l.value)return s.jsxRuntimeExports.jsx(q,{labelDetails:l});const x=e.findIndex(I=>I.userId===o.value),g=e[x],$=j(o.value);return s.jsxRuntimeExports.jsxs(oe,{style:P,children:[s.jsxRuntimeExports.jsxs(le,{isCurrOptionDisabled:u,children:[s.jsxRuntimeExports.jsx(ae,{children:g?.user?.photo!=null?s.jsxRuntimeExports.jsx(ce,{src:g?.user?.photo.href,alt:t.appLocale.getLocalizedStrings().cockpit.userProfileAltText,onError:({currentTarget:I})=>{I.onerror=null,I.src=t.AvatarSVG},loading:"lazy"}):s.jsxRuntimeExports.jsx(t.EntityAvatarWithInitials,{firstName:g?.user?.firstName??"",lastName:g?.user?.lastName??"",size:`${t.Space.sp5}`,index:x})}),s.jsxRuntimeExports.jsxs(F,{children:[s.jsxRuntimeExports.jsx(V,{children:n.label}),s.jsxRuntimeExports.jsx(A,{menuIsOpen:c.menuIsOpen,subtitleList:$,member:g}),d==="small"&&u&&f!=null?s.jsxRuntimeExports.jsx(U,{windowSize:d,children:f}):null]})]}),!!i&&s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:s.jsxRuntimeExports.jsx(t.SvgTick,{width:t.Space.sp3,height:t.Space.sp3})}),d!=="small"&&u&&f!=null?s.jsxRuntimeExports.jsx(U,{windowSize:d,children:f}):null]})},Z=n=>{S(n)},J=()=>null,K=n=>{const{menuIsOpen:o,isFocused:i,isDisabled:c,selectProps:p}=n,{value:u}=p;return s.jsxRuntimeExports.jsx(je,{menuIsOpen:o,isFocused:i,isDisabled:c,selectedValue:u,isError:z,isValuePlacedAtEnd:b,windowSize:d,bigMarginRightForSmallScreens:L,children:s.jsxRuntimeExports.jsx(s.components.Control,{...n,className:"select-control",children:n.children})})},Q=n=>s.jsxRuntimeExports.jsx(s.components.ValueContainer,{...n,className:"select-value-container",children:n.children}),X=n=>s.jsxRuntimeExports.jsx(Se,{windowSize:d,children:n.children}),Y=(n,o)=>o&&typeof n.label=="string"?n.label.toLowerCase().includes(o.toLowerCase())||n.data?.data?.email?.toLowerCase().includes(o.toLowerCase()):!0,ee=s.useTheme();return s.jsxRuntimeExports.jsx(t.ZeniSingleSelect,{placeholder:m??t.appLocale.getLocalizedStrings().commonSetUp.approval.userSelectPlaceholder,selectedValue:a,pickerValues:w,valueToLabel:B,valueToData:O,backgroundColor:ee.colors.background,onPickerSelectionChanged:Z,OptionComponent:H,PlaceholderComponent:_,SingleValueComponent:G,isOptionRemovable:R,containerStyles:h,DropDownIndicatorComponent:J,ControlComponent:K,classNamePrefix:"single-select-field",ValueContainerComponent:Q,MenuListComponent:X,menuPosition:d==="small"?"right":"left",isSearchable:!0,isDisabled:k,isOptionDisabled:n=>C?.(n)===!0&&a!==n,filterOption:Y})}const Re={infoLabel:new t.ResponsiveSizedStyle("smallRegular","smallRegular")},ye=({name:e,placeholderLabel:a,registerOptions:l,value:m,valueToSubtitle:R,showOneOffLabel:j,userContainerStyles:S,optionStyles:y,isValuePlacedAtEnd:h,isDisabled:P,additionalLabelInfo:b,isOptionDisabled:k,showOnlyAvatar:E=!1,showAvatarAndSubtitles:v=!0,disabledOptionHint:C,bigMarginRightForSmallScreens:f=!1})=>{const{control:L}=s.useFormContext(),N=t.useWindowSizeContext();return s.jsxRuntimeExports.jsx(s.Controller,{name:e,control:L,defaultValue:m,rules:l,render:({field:{value:z,onChange:d}})=>s.jsxRuntimeExports.jsxs(ve,{width:S?.width,"data-testid":t.generateDataTestId("user-single-select",e),children:[s.jsxRuntimeExports.jsx($e,{onSelectionChanged:w=>{d({allUsers:m.allUsers,selectedUser:w})},selectedValue:z.selectedUser,valueToSubtitle:R,allUsers:m.allUsers,placeholder:a,name:e,showOneOffLabel:j,userContainerStyles:S,isValuePlacedAtEnd:h,isDisabled:P,isOptionDisabled:k,showAvatarAndSubtitles:v,showOnlyAvatar:E,disabledOptionHint:C,bigMarginRightForSmallScreens:f,optionStyles:y}),b!==null&&s.jsxRuntimeExports.jsx(we,{size:N,children:b})]})})},ve=r.div`
+  display: flex;
+  flex-direction: column;
+  width: ${e=>e.width!=null?e.width:"auto"};
+`,we=r.label`
+  color: ${e=>e.theme.colors.hero};
+  ${e=>`${Re.infoLabel.style(e.size)}`};
+  text-align: right;
+  padding-right: ${t.Space.sp3};
+`,D={width:new t.ResponsiveSized(343,580,726),labelMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[4])};function be({isDisabled:e,label:a,userSingleSelectWithSubTitlesField:l,style:m,showTooltip:R=!1,tooltipTitle:j,toolTipWidth:S,opacity:y=1}){const h=t.useWindowSizeContext();return s.jsxRuntimeExports.jsxs(Ee,{size:h,style:m,isDisabled:e!=null,opacity:y,"data-testid":t.generateDataTestId("labeled-user-single-select",l.name),children:[s.jsxRuntimeExports.jsx(t.Label,{isDisabled:e,label:a.label,htmlFor:l.name,style:{marginLeft:D.labelMarginLeft.value(h),marginRight:D.labelMarginRight.value(h),marginTop:t.Space.sp2,width:a.width??"auto"},showTooltip:R,tooltipTitle:j,toolTipWidth:S}),s.jsxRuntimeExports.jsx(ye,{...l,isDisabled:e,userContainerStyles:{display:"flex",flexGrow:1,...l.showOnlyAvatar===!1&&{minWidth:"unset",maxWidth:"unset"},width:a.width!=null?`calc(100% - ${a.width}px)`:"auto",height:l.value.selectedUser==null||l.value.selectedUser!=null&&l.showOnlyAvatar===!0?t.Space.sp6:t.Space.sp9}})]})}const Ee=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>D.width.valuePx(e.size)};
+  min-height: ${t.Space.sp6};
+  padding-right: ${t.Space.sp2};
+  padding-top: ${t.Space.sp2};
+  padding-bottom: ${t.Space.sp2};
+  opacity: ${e=>e.opacity};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+    .select-control {
+      background-color: ${e=>e.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: ${e=>e.isDisabled===!0?"none":`1px solid ${e.theme.colors.primary}`};
+    .select-control {
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.theme.colors.background};
+    }
+  }
+`;exports.LabeledUserSingleSelectWithSubtitlesField=be;

package/dist/LabeledZeniRolesDropDownField-C3df-yT7.cjs

@@ -0,0 +1,297 @@
+"use strict";const t=require("./vendor-.pnpm-D0ILHvHB.cjs"),A=require("@emotion/react"),a=require("@emotion/styled"),o=require("./index-CQwLnHSI.cjs"),j=require("react"),B=require("@zeniai/client-epic-state"),q=require("./RoleWithToolTip-xbW61W6W.cjs"),D={grpBtnMarginTopBottom:new o.ResponsiveSized(o.sp[1],o.sp[3]),grpBtnMarginLeftRight:new o.ResponsiveSized(o.sp[0],o.sp[3])},V=a.div`
+  display: flex;
+  margin-top: ${e=>D.grpBtnMarginTopBottom.valuePx(e.windowSize)};
+  margin-bottom: ${e=>D.grpBtnMarginTopBottom.valuePx(e.windowSize)};
+  margin-left: ${e=>D.grpBtnMarginLeftRight.valuePx(e.windowSize)};
+  cursor: pointer;
+  height: 29px;
+  &:hover {
+    .verticalLine {
+      border-left: 1px solid
+        ${e=>e.isDisabled?e.theme.colors.grey1:e.theme.colors.primary};
+    }
+  }
+`,U=a.div`
+  display: flex;
+  flex-direction: row;
+  &:hover {
+    .verticalLine {
+      border-left: 1px solid
+        ${e=>e.isDisabled?e.theme.colors.grey1:e.theme.colors.primary};
+    }
+  }
+`,G=a.div`
+  border-left: 1px solid ${e=>e.theme.colors.grey1};
+`,O=({allBtnOptions:e,isDisabled:i,selectedOption:s,buttonClickHandler:d})=>{const c=o.useWindowSizeContext(),l=t.useTheme(),g=p=>s?.value===p.value?"primary":"secondary",f=p=>s?.value===p.value?{backgroundColor:{default:l.colors.primary,hover:l.colors.primary,disabled:l.colors.primary},textColor:{default:l.colors.grey5,hover:l.colors.grey5,disabled:l.colors.hero},borderColor:{default:l.colors.primary,hover:l.colors.primary,disabled:l.colors.grey3}}:{backgroundColor:{default:"transparent",hover:l.colors.grey4,disabled:"transparent"},textColor:{default:l.colors.primary,hover:l.colors.primary,disabled:l.colors.hero},borderColor:{default:l.colors.grey1,hover:l.colors.primary,disabled:l.colors.grey3}},h=e.length,b=i==="disabled"||i==="readonly";return t.jsxRuntimeExports.jsx(V,{windowSize:c,isDisabled:b,children:e.map((p,x)=>t.jsxRuntimeExports.jsxs(U,{"data-testid":o.generateDataTestId("grouped-button-container",p.value),className:"grpBtn",isDisabled:b||!p.enabled,children:[t.jsxRuntimeExports.jsx(o.Button,{label:p.label,size:"small",variant:g(p),"data-testid":o.generateDataTestId("grouped-button",p.value),onClick:()=>d(p.value),buttonColors:f(p),disabled:b||!p.enabled,style:{borderTopRightRadius:x===h-1?o.Space.sp1:o.Space.sp0,borderBottomRightRadius:x===h-1?o.Space.sp1:o.Space.sp0,borderTopLeftRadius:x===0?o.Space.sp1:o.Space.sp0,borderBottomLeftRadius:x===0?o.Space.sp1:o.Space.sp0,borderRight:x===h-1?"":"none",borderLeft:x===0?"":"none",width:"65px",display:"flex",alignItems:"center",justifyContent:"center"}}),x!==h-1?t.jsxRuntimeExports.jsx(G,{className:"verticalLine"}):null]},p.value))})},L={allRolesMarginLeftRight:new o.ResponsiveSized(o.sp[3],o.sp[4])},Z=a.div`
+  display: flex;
+  flex-direction: column;
+  color: ${e=>e.theme.colors.hero};
+  margin-right: ${e=>L.allRolesMarginLeftRight.valuePx(e.windowSize)};
+  margin-left: ${e=>L.allRolesMarginLeftRight.valuePx(e.windowSize)};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,J=a.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,K=a.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: ${o.Space.sp4};
+  overflow: hidden;
+  height: auto;
+  max-height: ${e=>e.isCollapsed?"850px":o.Space.sp0};
+  visibility: ${e=>e.isCollapsed?"visible":"hidden"};
+  transition:
+    visibility 250ms ease-in-out,
+    max-height 250ms ease-in-out;
+`,Q=a.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: ${o.Space.sp3};
+  justify-content: space-between;
+`,X=a(o.StandardMedium)`
+  display: flex;
+  color: ${e=>e.theme.colors.primary};
+`,F=a(o.SmallRegular)`
+  display: flex;
+  color: ${e=>e.theme.colors.hero};
+`,Y=a.div`
+  display: flex;
+  .roleTitle {
+    color: ${e=>e.isError?o.Colors.important:e.theme.colors.hero};
+  }
+  .roleSubTitle {
+    color: ${e=>e.theme.colors.hero};
+  }
+  .roleSuitableFor {
+    color: ${e=>e.theme.colors.grey1};
+    border-color: ${e=>e.theme.colors.grey2};
+  }
+  &:hover {
+    input {
+      border-color: ${e=>e.theme.colors.primary};
+    }
+    .roleTitle {
+      color: ${e=>e.theme.colors.primary};
+    }
+    .roleSubTitle {
+      color: ${e=>e.theme.colors.primary};
+    }
+    .roleSuitableFor {
+      color: ${e=>e.theme.colors.primary};
+      border-color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,ee=a.div`
+  display: flex;
+  flex-direction: column;
+`,oe=a(o.StandardMedium)`
+  display: flex;
+`,te=a(o.SmallRegular)`
+  display: flex;
+  margin-bottom: ${o.Space.sp1};
+`,re=a(o.ExtraSmallRegular)`
+  display: flex;
+  padding: 1px 6px 1px 6px;
+  border: 1px solid;
+  border-radius: ${o.Space.sp1};
+  width: fit-content;
+`,se=a.div`
+  display: flex;
+  flex-direction: row;
+`,ne=a.div``,ie=a.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: ${o.Space.sp3};
+`,le=a(o.SvgReports)`
+  width: ${o.Space.sp4};
+  height: ${o.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,ae=a(o.SvgBills)`
+  width: ${o.Space.sp4};
+  height: ${o.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,de=a(o.SvgReimbursements)`
+  width: ${o.Space.sp4};
+  height: ${o.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,ce=a(o.SvgBankBuilding)`
+  width: ${o.Space.sp4};
+  height: ${o.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,pe=a(o.SvgCards)`
+  width: ${o.Space.sp4};
+  height: ${o.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,ue=a(o.SvgTreasury)`
+  width: ${o.Space.sp4};
+  height: ${o.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,me=a.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: ${e=>L.allRolesMarginLeftRight.valuePx(e.windowSize)};
+  margin-left: ${e=>L.allRolesMarginLeftRight.valuePx(e.windowSize)};
+  color: ${e=>e.theme.mode==="light"?o.Colors.brandColorOnyx:o.Colors.brandColorPearl};
+`,he=e=>{switch(e){case"bookkeeping":return t.jsxRuntimeExports.jsx(le,{});case"zeni_bill_pay":return t.jsxRuntimeExports.jsx(ae,{});case"zeni_reimbursements":return t.jsxRuntimeExports.jsx(de,{});case"zeni_checking":return t.jsxRuntimeExports.jsx(ce,{});case"zeni_cards":return t.jsxRuntimeExports.jsx(pe,{});case"zeni_treasury":return t.jsxRuntimeExports.jsx(ue,{});default:return null}},xe=e=>t.jsxRuntimeExports.jsxs(ee,{children:[t.jsxRuntimeExports.jsx(oe,{className:"roleTitle",children:o.rootRoleOptions[e].label}),t.jsxRuntimeExports.jsx(te,{className:"roleSubTitle",children:o.rootRoleOptions[e].subTitle}),t.jsxRuntimeExports.jsx(re,{className:"roleSuitableFor",children:o.rootRoleOptions[e].roleSuitableFor})]}),ge=({name:e,isDisabled:i,selectedValue:s,onSelectionChanged:d})=>{const{formState:{errors:c}}=t.useFormContext(),l=t.has(c,`${e}.userRole.selectedRole`),g=o.useWindowSizeContext(),f=s.productsByUserRole.employee.findIndex(u=>u.productType==="zeni_reimbursements"),h=j.useCallback(u=>{const n=o.getSelectedRootRole([u]),$=o.getProductTypeFromRole(u),S=t.cloneDeep(s.productsByUserRole[n]),y=S.findIndex(E=>E.productType===$),k=S[y].selectedOption?.value===u;y>-1&&(S[y]={...S[y],selectedOption:k?void 0:S[y].options.filter(E=>E.value===u)[0]});const P={userRole:{selectedRole:n,allRootRole:s.userRole.allRootRole},productsByUserRole:{...s.productsByUserRole,[n]:[...S]}};d(P)},[d,s]),b=s.userRole.selectedRole,p=j.useMemo(()=>b!=null?(s.productsByUserRole[b]??[]).map(u=>B.toUserRoleTypeStrict(u.selectedOption?.value)).filter(u=>u!=null):[],[b,s.productsByUserRole]);j.useEffect(()=>{b==="employee"&&p.length===0&&f>-1&&h("reimbursements_user")},[b,p,f,h]);const x=s.userRole.allRootRole,C=u=>u==="employee"&&s.userRole.selectedRole==="employee";return i==="readonly"?t.jsxRuntimeExports.jsx(me,{windowSize:g,children:t.jsxRuntimeExports.jsx(q.RoleWithToolTip,{roles:p})}):t.jsxRuntimeExports.jsx(J,{children:x.map(u=>t.jsxRuntimeExports.jsxs(Z,{windowSize:g,children:[t.jsxRuntimeExports.jsx(Y,{isError:l,children:t.jsxRuntimeExports.jsx(o.LabeledRadioField,{isDisabled:i,label:{label:xe(u)},style:{paddingBottom:o.Space.sp4,alignItems:"flex-start"},radioField:{name:`${e}.userRole.selectedRole`,id:`${e}.${u}`,value:u,radioSize:"small",checked:s.userRole.selectedRole===u,style:{marginTop:o.Space.sp1}}})}),t.jsxRuntimeExports.jsx(K,{windowSize:g,isCollapsed:C(u),roleCount:s.productsByUserRole[u].length,children:s.productsByUserRole[u].map(n=>t.jsxRuntimeExports.jsxs(Q,{children:[t.jsxRuntimeExports.jsxs(se,{children:[t.jsxRuntimeExports.jsx(ne,{children:n.productType&&he(n.productType)}),t.jsxRuntimeExports.jsxs(ie,{children:[t.jsxRuntimeExports.jsx(X,{children:n.label}),g==="small"?t.jsxRuntimeExports.jsx(O,{allBtnOptions:n.options,selectedOption:n.selectedOption,buttonClickHandler:h}):null,t.jsxRuntimeExports.jsx(F,{children:n.subTitleUser}),t.jsxRuntimeExports.jsx(F,{children:n.subTitleAdmin})]})]}),g!=="small"?t.jsxRuntimeExports.jsx(O,{allBtnOptions:n.options,selectedOption:n.selectedOption,buttonClickHandler:h,isDisabled:i}):null]},n.productType))})]},u))})},be=({name:e,defaultValue:i,isDisabled:s,registerOptions:d})=>{const{control:c}=t.useFormContext();return t.jsxRuntimeExports.jsx(t.Controller,{name:e,control:c,defaultValue:i,rules:d,render:({field:{onChange:l,value:g}})=>{const f=g;return t.jsxRuntimeExports.jsx(ge,{onSelectionChanged:h=>{l(h)},selectedValue:f,name:e,isDisabled:s})}})},w={width:new o.ResponsiveSized(343,580,726),height:new o.ResponsiveSized(o.sp[6],o.sp[6]),controlHeight:new o.ResponsiveSized(o.sp[6],o.sp[6]),paddingTopBottom:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginTop:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginBottom:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginRight:new o.ResponsiveSized(o.sp[2],o.sp[2]),labelPaddingLeft:new o.ResponsiveSized(o.sp[3],o.sp[4]),labelPaddingRight:new o.ResponsiveSized(o.sp[3],o.sp[4]),labelPaddingTop:new o.ResponsiveSized(o.sp[2],o.sp[2]),labelPaddingBottom:new o.ResponsiveSized(o.sp[2],o.sp[3])};function Re({isDisabled:e,label:i,rolesDropDownField:s,style:d}){const c=o.useWindowSizeContext();return t.jsxRuntimeExports.jsxs(Se,{size:c,style:d,isDisabled:e!=null,children:[t.jsxRuntimeExports.jsx(o.Label,{isDisabled:e,label:i.label,htmlFor:s.name,style:{paddingLeft:w.labelPaddingLeft.value(c),paddingRight:w.labelPaddingRight.value(c),paddingTop:w.labelPaddingTop.value(c),paddingBottom:w.labelPaddingBottom.value(c)}}),t.jsxRuntimeExports.jsx(be,{...s,isDisabled:e})]})}const Se=a.div`
+  display: flex;
+  flex-direction: ${e=>e.isDisabled?"row":"column"};
+  align-items: ${e=>e.isDisabled?"center":"flex-start"};
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>w.width.valuePx(e.size)};
+  min-height: ${e=>w.height.valuePx(e.size)};
+  padding-top: ${e=>w.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>w.paddingTopBottom.valuePx(e.size)};
+  ${e=>e.isDisabled?A.css`
+          justify-content: space-between;
+        `:null}
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+    .select-control {
+      background-color: ${e=>e.theme.colors.background};
+    }
+  }
+  &:hover {
+    z-index: 1;
+    outline: ${e=>e.isDisabled===!0?"none":`1px solid ${e.theme.colors.primary}`};
+    .roles-count-wrapper {
+      border-color: inherit;
+    }
+  }
+`;function fe({onSelectionChanged:e,forZeniUser:i,selectedRoles:s,allRoles:d,disable:c=!1,isMulti:l=!1,clearSelectedRole:g,style:f,name:h,isValuePlacedAtEnd:b=!0}){const[p,x]=j.useState(),{formState:{errors:C}}=t.useFormContext(),u=t.has(C,h??"");j.useEffect(()=>{const r=d.filter(m=>s!=null&&s.includes(m.value));x(l?r:r[0])},[s]),j.useEffect(()=>{g===!0&&l===!1&&x(void 0)},[g]);const n=t.useTheme(),$=o.useWindowSizeContext(),S=JSON.parse(JSON.stringify(d));if(s!=null&&i){if(!s.includes("admin")){const r=S.findIndex(m=>m.value==="admin");S.splice(r,1)}if(!s.includes("bookkeeping_admin")){const r=S.findIndex(m=>m.value==="bookkeeping_admin");S.splice(r,1)}}const y=n.colors.grey5,k=o.textStyles.smallRegular.cssObject,P=k,E=p?.length>3,_={control:r=>({...r,backgroundColor:"inherit",boxShadow:y,border:"none",cursor:"pointer",":hover":{backgroundColor:"inherit"},flexWrap:"nowrap",marginTop:"unset"}),container:r=>({...r,fill:n.colors.hero,":hover":{fill:n.colors.primary},width:"100%",...f}),valueContainer:r=>({...r,flexWrap:E?"wrap":"nowrap",width:$==="small"||!l?"auto":"263px",paddingTop:"unset",cursor:"pointer",...P,overflow:"visible",minWidth:"auto",paddingLeft:o.Space.sp0,paddingRight:o.Space.sp0,display:"flex",justifyContent:"flex-start",fill:n.colors.hero,":hover":{">div>div":{fill:n.colors.primary,color:n.colors.primary}},">div:last-of-type":{span:{display:"none"}}}),singleValue:(r,m)=>({...r,color:m.selectProps.menuIsOpen===!0?n.colors.primary:n.colors.hero,maxWidth:"auto",overflow:"auto",":hover":{color:n.colors.primary},marginLeft:o.Space.sp0,position:"inherit",transform:"none",top:o.Space.sp0,marginRight:o.Space.sp0,padding:o.Space.sp0,...o.textStyles.standardRegular.cssObject}),multiValue:(r,m)=>({...r,margin:0,minWidth:void 0,backgroundColor:void 0,color:m.selectProps.menuIsOpen===!0?n.colors.primary:n.colors.hero,":hover":{color:n.colors.primary},">div":{borderRadius:o.Space.sp0,padding:o.Space.sp0,borderLeftStyle:"solid",borderWidth:o.Space.sp0,borderColor:n.colors.grey1,color:"unset"}}),menu:r=>({...r,backgroundColor:y,boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${n.colors.dropShadowHover}`,whiteSpace:"nowrap",minWidth:"fit-content",width:$==="small"?"230px":"100%",right:$==="small"?o.Space.sp0:"unset",borderRadius:o.Space.sp1,margin:o.Space.sp0,border:$==="small"?`1px solid ${n.colors.grey3}`:"unset"}),menuList:r=>({...r,maxHeight:"240px"}),option:(r,{isSelected:m,isDisabled:T,data:z})=>{const R=B.isNonZeniRole(z.value)&&i===!0,I=M(m,R,z.value,n);return{...r,height:R?44:40,padding:R?o.Space.sp0:`${o.Space.sp2} 12px`,marginTop:R?o.Space.sp1:"unset",whiteSpace:"unset",display:"flex",alignItems:"center",opacity:1,...k,color:I,cursor:T?"not-allowed":"pointer",backgroundColor:m&&!R?n.colors.background:"transparent",">div":{backgroundColor:m?n.colors.background:"transparent"},borderTop:R||z.value==="delete"?`1px solid ${n.colors.background}`:"none","& label":{paddingRight:"10px"},"svg:nth-of-type(2)":{display:"none"},":hover":{color:M(!0,R,z.value,n),backgroundColor:m&&!R?n.colors.background:R?"transparent":n.colors.background,">div":{backgroundColor:n.colors.background},"svg:nth-of-type(1)":{display:R||i===!1?"inline-block":"none"},"svg:nth-of-type(2)":{display:R?"none":"inline-block"}},">div>div>div:first-of-type":{display:"flex"}}},indicatorsContainer:r=>({...r,alignItems:l?"flex-start":"center",paddingTop:E||!l?"unset":"5px"}),indicatorSeparator:()=>({}),dropdownIndicator:()=>({paddingTop:l?o.Space.sp1:"2px",svg:{marginLeft:l&&p?.length>0?"unset":"6px"}})},N=r=>{const{isSelected:m}=r;return j.createElement(t.components.Option,{...r,key:r.data.value},t.jsxRuntimeExports.jsxs(Te,{role:r.data.value,forZeniUser:i,children:[t.jsxRuntimeExports.jsx(o.StandardRegularSp,{children:r.data.label}),!!m&&t.jsxRuntimeExports.jsxs("div",{children:[t.jsxRuntimeExports.jsx(o.SvgTick,{width:o.Space.sp3,height:o.Space.sp3}),i===!0?t.jsxRuntimeExports.jsx(o.SvgCloseRound,{width:o.Space.sp3,height:o.Space.sp3}):null]})]}))},H=r=>{const m=[];l&&r.forEach(T=>{m.push(T.value)}),e(l?m:r.value)},W=r=>{const{menuIsOpen:m,isFocused:T,isDisabled:z,selectProps:R}=r,{value:I}=R;return t.jsxRuntimeExports.jsx(Be,{menuIsOpen:m,isFocused:T,isDisabled:z,selectedValue:I,isError:u,isValuePlacedAtEnd:b,windowSize:$,children:t.jsxRuntimeExports.jsx(t.components.Control,{...r,className:"select-control",children:r.children})})};return t.jsxRuntimeExports.jsx(t.StateManagedSelect$1,{isMulti:l,menuPlacement:"auto",minMenuHeight:250,menuShouldScrollIntoView:!1,defaultValue:p,value:p,closeMenuOnSelect:!0,options:S,isDisabled:c,hideSelectedOptions:!1,onChange:r=>{H(r)},isClearable:!1,isSearchable:!0,components:{Control:W,DropdownIndicator:we,Option:N,MultiValueRemove:$e,IndicatorSeparator:je,MultiValueLabel:Ce,ValueContainer:Ee,Placeholder:ve,Input:ye},styles:_,theme:r=>({...r,colors:{...r.colors,primary:y}}),placeholder:o.appLocale.getLocalizedStrings().peoplePage.dropdownPlaceHolderText,isOptionDisabled:r=>i===!1&&r.enabled===!1||i===!0&&B.isNonZeniRole(r.value),classNamePrefix:"zeniRolesDropDown"})}const ye=e=>{const{selectProps:i}=e,{placeholder:s,value:d,isMulti:c}=i;return t.jsxRuntimeExports.jsx(t.components.Input,{...e,autoComplete:"new-password",placeholder:c===!0&&d?.length===0||d==null?s:void 0,children:e.children})},ve=()=>null,M=(e,i,s,d)=>e&&!i&&s!=="delete"?d.colors.primary:i?d.colors.grey1:s==="delete"?o.Colors.important:d.colors.hero,we=()=>null,$e=()=>null,je=()=>null,Ce=({children:e,data:i,...s})=>t.jsxRuntimeExports.jsx(t.components.MultiValueLabel,{...s,children:t.jsxRuntimeExports.jsxs(ze,{children:[e,t.jsxRuntimeExports.jsx(ke,{className:"seperator",children:","})]})}),Ee=({children:e,...i})=>t.jsxRuntimeExports.jsx(t.components.ValueContainer,{...i,className:"select-value-container",children:e}),ze=a(o.StandardRegular)`
+  padding: ${o.Space.sp0} 2px;
+  max-width: 104px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${e=>e.theme.colors.primary};
+`,Te=a.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  ${e=>B.isNonZeniRole(e.role)&&e.forZeniUser===!0?`padding: ${o.Space.sp0} 12px; height: ${o.Space.sp6};margin-top: ${o.Space.sp1};width: 100%`:""}
+`,ke=a.span``,Be=a.div`
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey5};
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+  .select-control {
+    border: none;
+    height: ${e=>e.windowSize==="small"?"auto":o.Space.sp6};
+    background-color: ${e=>e.menuIsOpen&&e.isValuePlacedAtEnd===!0?e.theme.colors.background:e.isError===!0?o.Colors.importantLight:e.theme.colors.grey5};
+    box-shadow: none;
+    &:hover {
+      fill: ${e=>e.theme.colors.primary};
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.isValuePlacedAtEnd!==!0?"inherit":e.theme.colors.background};
+      border-color: none;
+    }
+    width: auto;
+    min-height: ${o.Space.sp6};
+    cursor: pointer;
+  }
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    margin: ${e=>`${o.Space.sp0}
+      ${e.isValuePlacedAtEnd===!0?o.Space.sp3:o.Space.sp0}`};
+    padding: ${o.Space.sp0};
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: ${e=>e.windowSize==="small"?"wrap":"nowrap"};
+    cursor: pointer;
+    justify-content: ${e=>e.menuIsOpen===!1&&e.isValuePlacedAtEnd===!0?"flex-end":"flex-start"};
+
+    .zeniRolesDropDown__single-value {
+      border-radius: ${o.Space.sp0};
+      margin: ${o.Space.sp0};
+      color: ${e=>e.theme.colors.primary};
+      ${o.textStyles.standardRegular.css};
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .zeniRolesDropDown__input-container {
+      display: flex;
+      width: ${e=>e.menuIsOpen===!1&&e.selectedValue==null?o.Space.sp0:"100%"};
+      position: ${e=>e.isFocused===!1&&e.selectedValue==null?"initial":"absolute"};
+      ${o.textStyles.standardRegular.css};
+      color: ${e=>e.theme.colors.primary};
+      margin: ${o.Space.sp0};
+      cursor: inherit;
+      ::after {
+        width: ${o.Space.sp0};
+        min-width: ${o.Space.sp0};
+      }
+
+      > input {
+        text-align: ${e=>e.menuIsOpen===!1&&(e.selectedValue==null||e.selectedValue?.length===0)?"right":"initial"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${e=>e.isError===!0&&e.menuIsOpen!==!0?o.Colors.important:e.theme.colors.grey1};
+        }
+      }
+    }
+    .placeholder-container {
+      color: ${e=>e.isError===!0&&e.menuIsOpen!==!0?o.Colors.important:e.theme.colors.grey1};
+    }
+    > div:nth-last-of-type(2) .seperator {
+      visibility: hidden;
+    }
+  }
+`,Le=({name:e,forZeniUser:i,registerOptions:s,defaultValue:d,isDisabled:c,isMulti:l,style:g,onSelectionChanged:f,isValuePlacedAtEnd:h=!0})=>{const{control:b}=t.useFormContext();return t.jsxRuntimeExports.jsx(t.Controller,{name:e,control:b,defaultValue:d,rules:s,render:({field:{value:p,onChange:x}})=>t.jsxRuntimeExports.jsx(fe,{onSelectionChanged:C=>{x({allOptions:d.allOptions,selectedOptions:C}),f?.(C)},forZeniUser:i,selectedRoles:p.selectedOptions,disable:c,isMulti:l,name:e,style:g,allRoles:d.allOptions,isValuePlacedAtEnd:h})})},v={width:new o.ResponsiveSized(343,580,726),height:new o.ResponsiveSized(o.sp[6],o.sp[6]),controlHeight:new o.ResponsiveSized(o.sp[6],o.sp[6]),paddingTopBottom:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginTop:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginBottom:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginRight:new o.ResponsiveSized(o.sp[2],o.sp[2]),labelMarginLeft:new o.ResponsiveSized(o.sp[3],o.sp[4]),labelMarginRight:new o.ResponsiveSized(o.sp[3],o.sp[4]),labelMarginTop:new o.ResponsiveSized(o.sp[2],o.sp[2])};function Pe({isDisabled:e,label:i,zeniRolesDropDownField:s,style:d}){const c=o.useWindowSizeContext();return t.jsxRuntimeExports.jsxs(Ie,{size:c,style:d,isDisabled:e!=null,"data-testid":o.generateDataTestId("labeled-zeni-roles-dropdown-field",s.name),children:[t.jsxRuntimeExports.jsx(o.Label,{isDisabled:e,label:i.label,htmlFor:s.name,style:{marginLeft:v.labelMarginLeft.value(c),marginRight:v.labelMarginRight.value(c),marginTop:v.labelMarginTop.value(c),width:i.width??"auto"}}),t.jsxRuntimeExports.jsx(Le,{...s,isDisabled:e==="disabled"||e==="readonly",style:{display:"flex",flexGrow:1,width:i.width!=null?`calc(100% - ${i.width}px)`:"auto",height:c==="small"?"auto":o.Space.sp6,minHeight:v.controlHeight.value(c)}})]})}const Ie=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>v.width.valuePx(e.size)};
+  min-height: ${e=>v.height.valuePx(e.size)};
+  padding-right: ${e=>v.marginRight.valuePx(e.size)};
+  padding-top: ${e=>v.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>v.paddingTopBottom.valuePx(e.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+    .select-control {
+      background-color: ${e=>e.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: ${e=>e.isDisabled===!0?"none":`1px solid ${e.theme.colors.primary}`};
+    .select-control {
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.theme.colors.background};
+    }
+  }
+`;exports.LabeledRolesDropDownField=Re;exports.LabeledZeniRolesDropDownField=Pe;