		@@ -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{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};
		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};
		//# sourceMappingURL=module.js.map

package.json

		{
		"name": "@contentful/f36-pill",
		"version": "4.0.1-next-v4-6317.2231+bf43895f",
		"version": "4.0.1-next-v4-6321.2232+4fbeb4b9",
		"description": "Forma 36: Pill component",
		@@ -10,6 +10,6 @@ "scripts": {
		"@babel/runtime": "^7.6.2",
		"@contentful/f36-core": "4.0.1-next-v4-6317.2231+bf43895f",
		"@contentful/f36-icons": "4.0.1-next-v4-6317.2231+bf43895f",
		"@contentful/f36-tokens": "4.0.1-next-v4-6317.2231+bf43895f",
		"@contentful/f36-utils": "4.0.1-next-v4-6317.2231+bf43895f",
		"@contentful/f36-core": "4.0.1-next-v4-6321.2232+4fbeb4b9",
		"@contentful/f36-icons": "4.0.1-next-v4-6321.2232+4fbeb4b9",
		"@contentful/f36-tokens": "4.0.1-next-v4-6321.2232+4fbeb4b9",
		"@contentful/f36-utils": "4.0.1-next-v4-6321.2232+4fbeb4b9",
		"emotion": "^10.0.17"
		@@ -38,3 +38,3 @@ },
		},
		"gitHead": "bf43895f55f9f1157e63ee1b9cd5ae2e6bb7d688"
		"gitHead": "4fbeb4b96baa267fe697a3143d14a4325fa77158"
		}

@contentful/f36-pill - npm Package Compare versions

New alerts

Fixed alerts

Dependency changes