		@@ -1,2 +0,2 @@
		import e from"@babel/runtime/helpers/esm/extends";import{cx as a,css as t}from"emotion";import r from"react";import{Box as n}from"@contentful/f36-core";import{TabFocusTrap as o}from"@contentful/f36-utils";import{CloseIcon as i,DragIcon as l}from"@contentful/f36-icons";import s from"@contentful/f36-tokens";var c,d,m,u;c={},d="Pill",m=()=>h,Object.defineProperty(c,d,{get:m,set:u,enumerable:!0,configurable:!0});const g=e=>t({border:"none",borderTopRightRadius:s.borderRadiusSmall,borderBottomRightRadius:s.borderRadiusSmall,padding:s.spacingXs,background:"transparent",transition:`background ${s.transitionDurationShort} ${s.transitionEasingDefault}`,...(e=>{switch(e){case"active":default:return{borderLeft:`1px solid ${s.gray400}`,"&:hover, &:focus":{background:s.gray300,cursor:"pointer"}}}})(e)},""),p={fill:s.gray600,verticalAlign:"middle"},f={padding:s.spacingXs,paddingRight:0},b=e=>t({display:"inline-flex",fontFamily:s.fontStackPrimary,alignItems:"center",borderRadius:s.borderRadiusSmall,border:"none",padding:0,maxWidth:"100%",...(e=>{switch(e){case"active":return{background:s.gray300};case"deleted":return{background:s.gray200,textDecoration:"line-through",opacity:"0.5"};default:return{background:s.gray200}}})(e)},"");const h=r.forwardRef(((c,d)=>{const{label:m,onClose:u,testId:h="cf-ui-pill",onDrag:y,className:v,dragHandleComponent:x,variant:R="idle",...k}=c,w=(e=>({closeButton:g(e),label:t({color:s.gray700,lineHeight:s.lineHeightM,padding:s.spacingXs,fontSize:s.fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},""),icon:t(p,""),dragIcon:t(f,""),pill:b(e)}))(R);return r.createElement(n,e({as:"div",className:a(w.pill,v),"data-test-id":h,onDrag:y,ref:d},k),y&&(x\|\|r.createElement("span",{"aria-label":"Drag handler",className:w.dragIcon},r.createElement(l,{className:w.icon,variant:"muted"}))),r.createElement("span",{title:m,className:w.label},m),u&&r.createElement("button",{type:"button","aria-label":"close",onClick:u,className:w.closeButton},r.createElement(o,null,r.createElement(i,{className:w.icon,variant:"muted"}))))}));h.displayName="Pill";export{h as Pill};
		import e from"@babel/runtime/helpers/esm/extends";import{cx as a,css as t}from"emotion";import r from"react";import{Box as n}from"@contentful/f36-core";import{TabFocusTrap as o}from"@contentful/f36-utils";import{DragIcon as i,CloseIcon as l}from"@contentful/f36-icons";import s from"@contentful/f36-tokens";var c,d,m,u;c={},d="Pill",m=()=>h,Object.defineProperty(c,d,{get:m,set:u,enumerable:!0,configurable:!0});const g=e=>t({border:"none",borderTopRightRadius:s.borderRadiusSmall,borderBottomRightRadius:s.borderRadiusSmall,padding:s.spacingXs,background:"transparent",transition:`background ${s.transitionDurationShort} ${s.transitionEasingDefault}`,...(e=>{switch(e){case"active":default:return{borderLeft:`1px solid ${s.gray400}`,"&:hover, &:focus":{background:s.gray300,cursor:"pointer"}}}})(e)},""),p={fill:s.gray600,verticalAlign:"middle"},f={padding:s.spacingXs,paddingRight:0},b=e=>t({display:"inline-flex",fontFamily:s.fontStackPrimary,alignItems:"center",borderRadius:s.borderRadiusSmall,border:"none",padding:0,maxWidth:"100%",...(e=>{switch(e){case"active":return{background:s.gray300};case"deleted":return{background:s.gray200,textDecoration:"line-through",opacity:"0.5"};default:return{background:s.gray200}}})(e)},"");const h=r.forwardRef(((c,d)=>{const{label:m,onClose:u,testId:h="cf-ui-pill",onDrag:y,className:v,dragHandleComponent:x,variant:R="idle",...k}=c,w=(e=>({closeButton:g(e),label:t({color:s.gray700,lineHeight:s.lineHeightM,padding:s.spacingXs,fontSize:s.fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},""),icon:t(p,""),dragIcon:t(f,""),pill:b(e)}))(R);return r.createElement(n,e({as:"div",className:a(w.pill,v),"data-test-id":h,onDrag:y,ref:d},k),y&&(x\|\|r.createElement("span",{"aria-label":"Drag handler",className:w.dragIcon},r.createElement(i,{className:w.icon,variant:"muted"}))),r.createElement("span",{title:m,className:w.label},m),u&&r.createElement("button",{type:"button","aria-label":"close",onClick:u,className:w.closeButton},r.createElement(o,null,r.createElement(l,{className:w.icon,variant:"muted"}))))}));h.displayName="Pill";export{h as Pill};
		//# sourceMappingURL=module.js.map

package.json

		{
		"name": "@contentful/f36-pill",
		"version": "4.0.1-next-v4-6714.2276+fd8aedf5",
		"version": "4.0.1-next-v4-6748.2278+3d8c58a5",
		"description": "Forma 36: Pill component",
		@@ -10,6 +10,6 @@ "scripts": {
		"@babel/runtime": "^7.6.2",
		"@contentful/f36-core": "4.0.1-next-v4-6714.2276+fd8aedf5",
		"@contentful/f36-icons": "4.0.1-next-v4-6714.2276+fd8aedf5",
		"@contentful/f36-tokens": "4.0.1-next-v4-6714.2276+fd8aedf5",
		"@contentful/f36-utils": "4.0.1-next-v4-6714.2276+fd8aedf5",
		"@contentful/f36-core": "4.0.1-next-v4-6748.2278+3d8c58a5",
		"@contentful/f36-icons": "4.0.1-next-v4-6748.2278+3d8c58a5",
		"@contentful/f36-tokens": "4.0.1-next-v4-6748.2278+3d8c58a5",
		"@contentful/f36-utils": "4.0.1-next-v4-6748.2278+3d8c58a5",
		"emotion": "^10.0.17"
		@@ -38,3 +38,3 @@ },
		},
		"gitHead": "fd8aedf5553d30aac21d370e024594b1068f4ca2"
		"gitHead": "3d8c58a50b62f4e2e2a9157e1385a21650ed191a"
		}

@contentful/f36-pill - npm Package Compare versions

New alerts

Fixed alerts

Dependency changes