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

dist/module.js

		@@ -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-6763.2280+68ec7ca7",
		"version": "4.0.1-next-v4-6795.2281+a79c4356",
		"description": "Forma 36: Pill component",
		@@ -10,6 +10,6 @@ "scripts": {
		"@babel/runtime": "^7.6.2",
		"@contentful/f36-core": "4.0.1-next-v4-6763.2280+68ec7ca7",
		"@contentful/f36-icons": "4.0.1-next-v4-6763.2280+68ec7ca7",
		"@contentful/f36-tokens": "4.0.1-next-v4-6763.2280+68ec7ca7",
		"@contentful/f36-utils": "4.0.1-next-v4-6763.2280+68ec7ca7",
		"@contentful/f36-core": "4.0.1-next-v4-6795.2281+a79c4356",
		"@contentful/f36-icons": "4.0.1-next-v4-6795.2281+a79c4356",
		"@contentful/f36-tokens": "4.0.1-next-v4-6795.2281+a79c4356",
		"@contentful/f36-utils": "4.0.1-next-v4-6795.2281+a79c4356",
		"emotion": "^10.0.17"
		@@ -38,3 +38,3 @@ },
		},
		"gitHead": "68ec7ca78ed6341bed0b5d20a383f1589123569f"
		"gitHead": "a79c43565da14e28a3ca93825c0dbad7b20fa068"
		}

@contentful/f36-pill - npm Package Compare versions

New alerts

Fixed alerts

Dependency changes