		@@ -1,2 +0,2 @@
		var e=c(require("@babel/runtime/helpers/extends")),{cx:t,css:a}=require("emotion"),r=c(require("react")),{CloseIcon:n,DragIcon:o}=require("@contentful/f36-icons"),{Button:i}=require("@contentful/f36-button"),l=c(require("@contentful/f36-tokens"));function c(e){return e&&e.__esModule?e.default:e}var s,d,u,g,f={};s=f,d="Pill",u=()=>m,Object.defineProperty(s,d,{get:u,set:g,enumerable:!0,configurable:!0});const b=e=>a({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(((c,s)=>{const{label:d,onClose:u,testId:g="cf-ui-pill",onDrag:f,className:m,dragHandleComponent:p,variant:y="idle",...h}=c,v=function(e){return{closeButton:a({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:a({color:l.gray700,lineHeight:l.lineHeightM,padding:l.spacingXs,fontSize:l.fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},""),icon:a({fill:l.gray600,verticalAlign:"middle",outline:"none"},""),dragIcon:a({padding:l.spacingXs,paddingRight:0,cursor:"move"},""),pill:b(e)}}(y);return r.createElement("div",e({className:t(v.pill,m),"data-test-id":g,onDrag:f,ref:s},h),f&&(p\|\|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",icon:r.createElement(n,{"aria-label":"Close"}),"aria-label":"Close",onClick:u,className:v.closeButton}))}));var p,y;m.displayName="Pill",p=module.exports,y=f,Object.keys(y).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(p,e,{enumerable:!0,get:function(){return y[e]}})}));
		var e=c(require("@babel/runtime/helpers/extends")),{cx:t,css:a}=require("emotion"),r=c(require("react")),{DragIcon:n,CloseIcon:o}=require("@contentful/f36-icons"),{Button:i}=require("@contentful/f36-button"),l=c(require("@contentful/f36-tokens"));function c(e){return e&&e.__esModule?e.default:e}var s,d,u,g,f={};s=f,d="Pill",u=()=>m,Object.defineProperty(s,d,{get:u,set:g,enumerable:!0,configurable:!0});const b=e=>a({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(((c,s)=>{const{label:d,onClose:u,testId:g="cf-ui-pill",onDrag:f,className:m,dragHandleComponent:p,variant:y="idle",...h}=c,v=function(e){return{closeButton:a({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:a({color:l.gray700,lineHeight:l.lineHeightM,padding:l.spacingXs,fontSize:l.fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},""),icon:a({fill:l.gray600,verticalAlign:"middle",outline:"none"},""),dragIcon:a({padding:l.spacingXs,paddingRight:0,cursor:"move"},""),pill:b(e)}}(y);return r.createElement("div",e({className:t(v.pill,m),"data-test-id":g,onDrag:f,ref:s},h),f&&(p\|\|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",icon:r.createElement(o,{"aria-label":"Close"}),"aria-label":"Close",onClick:u,className:v.closeButton}))}));var p,y;m.displayName="Pill",p=module.exports,y=f,Object.keys(y).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(p,e,{enumerable:!0,get:function(){return y[e]}})}));
		//# sourceMappingURL=main.js.map

package.json

		{
		"name": "@contentful/f36-pill",
		"version": "4.0.1-next-v4-8060.2337+43a4f2e9",
		"version": "4.0.1-next-v4-8093.2338+03d606d3",
		"description": "Forma 36: Pill component",
		@@ -10,6 +10,6 @@ "scripts": {
		"@babel/runtime": "^7.6.2",
		"@contentful/f36-button": "4.0.1-next-v4-8060.2337+43a4f2e9",
		"@contentful/f36-core": "4.0.1-next-v4-8060.2337+43a4f2e9",
		"@contentful/f36-icons": "4.0.1-next-v4-8060.2337+43a4f2e9",
		"@contentful/f36-tokens": "4.0.1-next-v4-8060.2337+43a4f2e9",
		"@contentful/f36-button": "4.0.1-next-v4-8093.2338+03d606d3",
		"@contentful/f36-core": "4.0.1-next-v4-8093.2338+03d606d3",
		"@contentful/f36-icons": "4.0.1-next-v4-8093.2338+03d606d3",
		"@contentful/f36-tokens": "4.0.1-next-v4-8093.2338+03d606d3",
		"emotion": "^10.0.17"
		@@ -38,3 +38,3 @@ },
		},
		"gitHead": "43a4f2e9f2f79f2a6b5ba5d06304a9bdcca3a8d6"
		"gitHead": "03d606d387a2c3d4a860bd36b3b0fc14e385e992"
		}

@contentful/f36-pill - npm Package Compare versions

New alerts

Fixed alerts

Dependency changes