import{_ as __rest,a as __assign}from"./tslib.es6-bjGg6Bxl.js";import React__default from"react";import{I as Icon}from"./Icon.component-7-ap-6Ys.js";var pillStyles=function(a){return"\n    jn-inline-flex\n    jn-basis-auto\n    jn-shrink\n    jn-items-center\n    jn-flex-nowrap\n    jn-text-xs\n    jn-p-px\n    jn-border\n    jn-rounded\n    jn-border-theme-background-lvl-4\n    jn-group\n    ".concat(a?"jn-cursor-pointer":"","\n  ")},pillKeyStyles=function(a){return"\n    jn-bg-theme-background-lvl-4\n    jn-text-theme-high\n    ".concat(a?"group-hover:jn-text-theme-highest":"","\n    jn-px-1\n    jn-py-0.5\n    jn-rounded-sm\n    jn-inline-block\n  ")},pillValueStyles=function(a){return"\n    jn-px-1\n    jn-py-0.5\n    jn-text-theme-high\n    ".concat(a?"group-hover:jn-text-theme-highest":"","\n    jn-inline-block\n  ")},Pill=function(a){var b=a.uid,c=void 0===b?"":b,d=a.pillKey,e=void 0===d?"":d,f=a.pillKeyLabel,g=void 0===f?"":f,h=a.pillValue,i=void 0===h?"":h,j=a.pillValueLabel,k=void 0===j?"":j,l=a.closeable,m=a.onClick,n=void 0===m?void 0:m,o=a.onClose,p=void 0===o?void 0:o,q=a.className,r=void 0===q?"":q,s=__rest(a,["uid","pillKey","pillKeyLabel","pillValue","pillValueLabel","closeable","onClick","onClose","className"]),t=function(a){p&&p(a,c||e||i)},u=function(a){n&&n(a,c||e||i)};return React__default.createElement("div",__assign({className:"juno-pill ".concat(pillStyles(!!n)," ").concat(r)},s),i||k?(React__default.createElement(React__default.Fragment,null,(g||e)&&(React__default.createElement("span",{className:"pill-key ".concat(pillKeyStyles(!!n)),onClick:function(a){return u(a)}},g||e)),React__default.createElement("span",{className:"pill-value ".concat(pillValueStyles(!!n)),onClick:function(a){return u(a)}},k||i))):(React__default.createElement("span",{className:"".concat(pillValueStyles(!1))},"set pillValue or pillValueLabel")),void 0!==l&&l&&React__default.createElement(Icon,{icon:"close",size:18,onClick:function(a){return t(a)}}))};export{Pill as P};