import i from"react";import c from"react-select";import{useTranslate as d}from"../../../../../client/app/hooks";const v=function(r){const{options:o,defaultValue:e,onChange:a}=r,{translate:l}=d();return i.createElement(c,{isMulti:!0,defaultValue:e,options:o,closeMenuOnSelect:!1,styles:p,placeholder:l("dev.select.placeholder","Empty"),onChange:t=>{a(t.map(n=>n.value))}})},p={control:r=>({...r,border:"1px solid var(--border-color-primary)",boxShadow:"none",backgroundColor:"var(--bg-color-raised)","&:hover":{borderColor:"var(--color-primary-base, var(--color-blueberry-6))",cursor:"pointer"}}),placeholder:r=>({...r,color:"var(--input-content-placeholder-color)",fontSize:"var(--font-size-lg)"}),indicatorsContainer:()=>({display:"none"}),menu:r=>({...r,padding:"var(--spacing-xxs)",margin:"0",boxShadow:"var(--bg-raised-shadow)",border:"1px solid var(--border-color-primary)",backgroundColor:"var(--bg-color)"}),menuList:r=>({...r,paddingBottom:0,paddingTop:0}),option:r=>({...r,cursor:"pointer",borderRadius:"4px",color:"var(--text-color-primary)",backgroundColor:"transparent",fontSize:"14px","&:hover":{backgroundColor:"var(--bg-color-hover)"}}),multiValue:r=>({...r,backgroundColor:"var(--bg-color-raised)",color:"var(--text-color-primary)",border:"1px solid var(--border-color-primary)",borderRadius:"32px",height:"32px",alignItems:"center"}),multiValueLabel:r=>({...r,fontSize:"14px",color:"var(--text-color-primary)",paddingLeft:"var(--spacing-sm)"}),valueContainer:r=>({...r,padding:"6px 8px"}),multiValueRemove:r=>({...r,padding:0,margin:"0 var(--spacing-xxs)","&:hover":{backgroundColor:"var(--bg-color-raised)",color:"var(--text-color-secondary)"}})};export{v as MultiSelect};
