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

package.json

		{
		"name": "@contentful/f36-pill",
		"version": "4.0.1-next-v4-8879.2361+ee39c787",
		"version": "4.0.1-next-v4-8904.2363+6c461df0",
		"description": "Forma 36: Pill component",
		@@ -10,6 +10,6 @@ "scripts": {
		"@babel/runtime": "^7.6.2",
		"@contentful/f36-button": "4.0.1-next-v4-8879.2361+ee39c787",
		"@contentful/f36-core": "4.0.1-next-v4-8879.2361+ee39c787",
		"@contentful/f36-icons": "4.0.1-next-v4-8879.2361+ee39c787",
		"@contentful/f36-tokens": "4.0.1-next-v4-8879.2361+ee39c787",
		"@contentful/f36-button": "4.0.1-next-v4-8904.2363+6c461df0",
		"@contentful/f36-core": "4.0.1-next-v4-8904.2363+6c461df0",
		"@contentful/f36-icons": "4.0.1-next-v4-8904.2363+6c461df0",
		"@contentful/f36-tokens": "4.0.1-next-v4-8904.2363+6c461df0",
		"emotion": "^10.0.17"
		@@ -38,3 +38,3 @@ },
		},
		"gitHead": "ee39c7876324bfadc940bfe7c54c603aab4e0791"
		"gitHead": "6c461df0e9a2d6ef0053b1d4b489e5ab3947bc92"
		}

@contentful/f36-pill - npm Package Compare versions

New alerts

Fixed alerts

Dependency changes