@contentful/f36-badge 4.65.0 → 4.65.2

package/dist/esm/index.js

@@ -5,8 +5,8 @@ import i from '@contentful/f36-tokens';
 import 'react-dom';
 import { ClockIcon } from '@contentful/f36-icons';
 
-var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var N=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))k.call(r,t)&&N(e,t,r[t]);if(b)for(var t of b(r))R.call(r,t)&&N(e,t,r[t]);return e},H=(e,r)=>te(e,re(r));var x=(e,r)=>{var t={};for(var a in e)k.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&b)for(var a of b(e))r.indexOf(a)<0&&R.call(e,a)&&(t[a]=e[a]);return t};var ae=({variant:e})=>{switch(e){case"positive":return {color:i.green600,backgroundColor:i.green200};case"primary":return {color:i.blue600,backgroundColor:i.blue200};case"negative":return {color:i.red600,backgroundColor:i.red200};case"warning":return {color:i.orange600,backgroundColor:i.orange200};case"secondary":return {color:i.gray700,backgroundColor:i.gray200};case"primary-filled":return {color:i.colorWhite,backgroundColor:i.blue600};case"featured":return {color:i.purple600,backgroundColor:i.purple200};default:return {}}},ne=({size:e})=>{switch(e){case"small":return {padding:`0 ${i.spacing2Xs}`,lineHeight:i.lineHeightS,maxHeight:i.lineHeightS};default:return {padding:`0 ${i.spacingXs}`,lineHeight:i.lineHeightM,maxHeight:i.lineHeightM}}},M=(e="capitalize")=>({badge:({variant:r,size:t})=>css(g(g({columnGap:i.spacing2Xs,alignItems:"center",borderRadius:i.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},ae({variant:r})),ne({size:t}))),badgeIcon:css({flexShrink:0}),badgeIconCustomTiny:css({width:"0.875rem",height:"0.875rem"}),badgeText:css({color:"currentcolor",lineHeight:"inherit",textTransform:e})});var D=l.createContext("low"),u=()=>l.useContext(D);D.Provider;var se=Object.defineProperty,le=Object.defineProperties,de=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?se(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(P)for(var t of P(r))j.call(r,t)&&L(e,t,r[t]);return e},m=(e,r)=>le(e,de(r)),h=(e,r)=>{var t={};for(var a in e)$.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&P)for(var a of P(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},ce="span";function ge(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function pe(){return css({wordBreak:"break-word"})}function V(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:o="gray800",lineHeight:d="lineHeightM",letterSpacing:c="letterSpacingDefault",children:w,isTruncated:T,isWordBreak:S,as:v,className:B,margin:Z="none"}=t,_=h(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=v||ce;return l.createElement(Box,m(f({},_),{as:Q,className:cx(css({padding:0,fontFamily:i[n],fontWeight:i[s],color:i[o],fontSize:i[a],lineHeight:i[d],letterSpacing:i[c]}),T?ge():null,S?pe():null,B),margin:Z,ref:r}),w)}V.displayName="Text";var y=l.forwardRef(V),fe="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=h(t,["children","fontWeight","testId"]);let d=u();return l.createElement(y,m(f({as:fe,testId:s,fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l.forwardRef(A),me="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=h(t,["children","testId"]);let o=u();return l.createElement(y,m(f({as:me,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:o==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:o==="high"?"lineHeightXlHigh":"lineHeightXl"},s),{ref:r}),a)}G.displayName="Heading";l.forwardRef(G);var he="h3";function K(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=h(t,["children","testId"]);let o=u();return l.createElement(y,m(f({as:he,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}K.displayName="Subheading";l.forwardRef(K);var ye="h2";function U(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=h(t,["children","size","testId"]);let d="fontSize2Xl",c="lineHeight2Xl";return n==="large"&&(d="fontSize3Xl",c="lineHeight3Xl"),l.createElement(y,m(f({as:ye,testId:s,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:d,lineHeight:c,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},o),{ref:r}),a)}U.displayName="DisplayText";l.forwardRef(U);var Se="h2";function Y(e,r){var t=e,{children:a,className:n,testId:s="cf-ui-section-heading"}=t,o=h(t,["children","className","testId"]);let d=u();return l.createElement(y,m(f({as:Se,testId:s,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",className:cx(css({letterSpacing:i.letterSpacingWide,textTransform:"uppercase"}),n)},o),{ref:r}),a)}Y.displayName="SectionHeading";l.forwardRef(Y);var ve=l.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,s=h(t,["children","testId"]);let o=u();return l.createElement(y,m(f({as:"p",testId:n,fontSize:o==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:o==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:"spacingM"},s),{ref:r}),a)});ve.displayName="Paragraph";var C=l.forwardRef((e,r)=>{let t=M(e.textTransform),v=e,{children:a,variant:n="primary",size:s="default",testId:o="cf-ui-badge",startIcon:d,endIcon:c,className:w}=v,T=x(v,["children","variant","size","testId","startIcon","endIcon","className"]),S=B=>l.cloneElement(B,{size:"tiny",className:cx(t.badgeIcon,B.props.className,{[t.badgeIconCustomTiny]:s==="small"}),variant:n==="primary-filled"?"white":n});return l.createElement(Box,H(g({as:"div",testId:o,display:"inline-flex",className:cx(t.badge({variant:n,size:s}),w)},T),{ref:r}),d&&S(d),l.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),c&&S(c))});C.displayName="Badge";var He={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function J(e,r){let c=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=c,s=x(c,["entityStatus","isScheduled","size"]),o=a&&n==="default",d=He[t];return l.createElement(C,H(g(g({},s),o?{size:n,startIcon:l.createElement(ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:d,ref:r}),t)}J.displayName="EntityStatusBadge";var xe=l.forwardRef(J);
+var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var k=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))R.call(r,t)&&k(e,t,r[t]);if(b)for(var t of b(r))M.call(r,t)&&k(e,t,r[t]);return e},x=(e,r)=>te(e,re(r));var H=(e,r)=>{var t={};for(var a in e)R.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&b)for(var a of b(e))r.indexOf(a)<0&&M.call(e,a)&&(t[a]=e[a]);return t};var D=l.createContext("low"),u=()=>l.useContext(D);D.Provider;var ie=Object.defineProperty,oe=Object.defineProperties,se=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?ie(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(I)for(var t of I(r))j.call(r,t)&&L(e,t,r[t]);return e},m=(e,r)=>oe(e,se(r)),h=(e,r)=>{var t={};for(var a in e)$.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&I)for(var a of I(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},le="span";function de(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function ce(){return css({wordBreak:"break-word"})}function V(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:o="gray800",lineHeight:d="lineHeightM",letterSpacing:c="letterSpacingDefault",children:w,isTruncated:T,isWordBreak:W,as:S,className:v,margin:B="none"}=t,_=h(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=S||le;return l.createElement(Box,m(f({},_),{as:Q,className:cx(css({padding:0,fontFamily:i[n],fontWeight:i[s],color:i[o],fontSize:i[a],lineHeight:i[d],letterSpacing:i[c]}),T?de():null,W?ce():null,v),margin:B,ref:r}),w)}V.displayName="Text";var y=l.forwardRef(V),ge="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=h(t,["children","fontWeight","testId"]);let d=u();return l.createElement(y,m(f({as:ge,testId:s,fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l.forwardRef(A),pe="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=h(t,["children","testId"]);let o=u();return l.createElement(y,m(f({as:pe,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:o==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:o==="high"?"lineHeightXlHigh":"lineHeightXl"},s),{ref:r}),a)}G.displayName="Heading";l.forwardRef(G);var fe="h3";function K(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=h(t,["children","testId"]);let o=u();return l.createElement(y,m(f({as:fe,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}K.displayName="Subheading";l.forwardRef(K);var he="h2";function U(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=h(t,["children","size","testId"]);let d="fontSize2Xl",c="lineHeight2Xl";return n==="large"&&(d="fontSize3Xl",c="lineHeight3Xl"),l.createElement(y,m(f({as:he,testId:s,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:d,lineHeight:c,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},o),{ref:r}),a)}U.displayName="DisplayText";l.forwardRef(U);var ue="h2";function Y(e,r){var t=e,{children:a,className:n,testId:s="cf-ui-section-heading"}=t,o=h(t,["children","className","testId"]);let d=u();return l.createElement(y,m(f({as:ue,testId:s,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",className:cx(css({letterSpacing:i.letterSpacingWide,textTransform:"uppercase"}),n)},o),{ref:r}),a)}Y.displayName="SectionHeading";l.forwardRef(Y);var ye=l.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,s=h(t,["children","testId"]);let o=u();return l.createElement(y,m(f({as:"p",testId:n,fontSize:o==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:o==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:"spacingM"},s),{ref:r}),a)});ye.displayName="Paragraph";var Se=({variant:e})=>{switch(e){case"positive":return {color:i.green600,backgroundColor:i.green200};case"primary":return {color:i.blue600,backgroundColor:i.blue200};case"negative":return {color:i.red600,backgroundColor:i.red200};case"warning":return {color:i.orange600,backgroundColor:i.orange200};case"secondary":return {color:i.gray700,backgroundColor:i.gray200};case"primary-filled":return {color:i.colorWhite,backgroundColor:i.blue600};case"featured":return {color:i.purple600,backgroundColor:i.purple200};default:return {}}},ve=({size:e})=>{switch(e){case"small":return {padding:`0 ${i.spacing2Xs}`,lineHeight:i.lineHeightS,maxHeight:i.lineHeightS};default:return {padding:`0 ${i.spacingXs}`,lineHeight:i.lineHeightM,maxHeight:i.lineHeightM}}},q=()=>({badge:({variant:e,size:r})=>css(g(g({columnGap:i.spacing2Xs,alignItems:"center",borderRadius:i.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Se({variant:e})),ve({size:r}))),badgeIcon:css({flexShrink:0}),badgeIconCustomTiny:css({width:"0.875rem",height:"0.875rem"}),badgeText:({textTransform:e})=>css([{color:"currentcolor",lineHeight:"inherit"},e!=="none"&&{textTransform:"lowercase","&::first-letter":{textTransform:"uppercase"}}])});var C=l.forwardRef((e,r)=>{let t=q(),v=e,{children:a,variant:n="primary",size:s="default",testId:o="cf-ui-badge",startIcon:d,endIcon:c,className:w,textTransform:T=void 0}=v,W=H(v,["children","variant","size","testId","startIcon","endIcon","className","textTransform"]),S=B=>l.cloneElement(B,{size:"tiny",className:cx(t.badgeIcon,B.props.className,{[t.badgeIconCustomTiny]:s==="small"}),variant:n==="primary-filled"?"white":n});return l.createElement(Box,x(g({as:"div",testId:o,display:"inline-flex",className:cx(t.badge({variant:n,size:s}),w)},W),{ref:r}),d&&S(d),l.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText({textTransform:T})},a),c&&S(c))});C.displayName="Badge";var xe={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function Z(e,r){let c=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=c,s=H(c,["entityStatus","isScheduled","size"]),o=a&&n==="default",d=xe[t];return l.createElement(C,x(g(g({},s),o?{size:n,startIcon:l.createElement(ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:d,ref:r}),t)}Z.displayName="EntityStatusBadge";var He=l.forwardRef(Z);
 
-export { C as Badge, xe as EntityStatusBadge };
+export { C as Badge, He as EntityStatusBadge };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Badge/Badge.tsx","../../src/Badge/Badge.styles.ts","../../../utils/src/Portal/Portal.tsx","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","textTransform","__spreadValues","u","useRef","useEffect","useCallback","Children","isValidElement","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","D","ClockIcon","statusMap","EntityStatusBadge","entityStatus","isScheduled","withClockIcon","_EntityStatusBadge"],"mappings":"qlBAAA,OAAOA,MAA8B,QACrC,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,OAIK,uBCPP,OAAOC,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAKpB,IAAMC,GAAkB,CAAC,CAAE,QAAAC,CAAQ,IAA4C,CAC7E,OAAQA,EAAS,CACf,IAAK,WACH,MAAO,CACL,MAAOH,EAAO,SACd,gBAAiBA,EAAO,QAC1B,EACF,IAAK,UACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,EACF,IAAK,WACH,MAAO,CACL,MAAOA,EAAO,OACd,gBAAiBA,EAAO,MAC1B,EACF,IAAK,UACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,EACF,IAAK,YACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,EACF,IAAK,iBACH,MAAO,CACL,MAAOA,EAAO,WACd,gBAAiBA,EAAO,OAC1B,EACF,IAAK,WACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,EACF,QACE,MAAO,CAAC,CACZ,CACF,EAEMI,GAAe,CAAC,CAAE,KAAAC,CAAK,IAAsC,CACjE,OAAQA,EAAM,CACZ,IAAK,QACH,MAAO,CACL,QAAS,KAAKL,EAAO,UAAU,GAC/B,WAAYA,EAAO,YACnB,UAAWA,EAAO,WACpB,EACF,QACE,MAAO,CACL,QAAS,KAAKA,EAAO,SAAS,GAC9B,WAAYA,EAAO,YACnB,UAAWA,EAAO,WACpB,CACJ,CACF,EAEaM,EAAiB,CAC5BC,EAAgD,gBAC5C,CACJ,MAAO,CAAC,CAAE,QAAAJ,EAAS,KAAAE,CAAK,IACtBJ,EAAIO,IAAA,CACF,UAAWR,EAAO,WAClB,WAAY,SACZ,aAAcA,EAAO,kBACrB,SAAU,SACV,cAAe,UACZE,GAAgB,CAAE,QAAAC,CAAQ,CAAC,GAC3BC,GAAa,CAAE,KAAAC,CAAK,CAAC,EACzB,EACH,UAAWJ,EAAI,CACb,WAAY,CACd,CAAC,EACD,oBAAqBA,EAAI,CACvB,MAAO,WACP,OAAQ,UACV,CAAC,EACD,UAAWA,EAAI,CACb,MAAO,eACP,WAAY,UACZ,cAAAM,CACF,CAAC,CACH,iKC1FA,OAASE,GAAA,UAAAC,GAAAC,aAAAA,GAAW,eAAAC,GAAc,YAAAC,GACzB,kBAAAC,OAAoB,8pIFwCtB,IAAMC,EAAQlB,EAAM,WACzB,CAACmB,EAAOC,IAAQ,CACd,IAAMC,EAASZ,EAAeU,EAAM,aAAa,EAU7CG,EAAAH,EARF,UAAAI,EACA,QAAAjB,EAAU,UACV,KAAAE,EAAO,UACP,OAAAgB,EAAS,cACT,UAAAC,EACA,QAAAC,EACA,UAAAC,CAnDN,EAqDQL,EADCM,EAAAC,EACDP,EADC,CAPH,WACA,UACA,OACA,SACA,YACA,UACA,cAIIQ,EAAeC,GACnB/B,EAAM,aAAa+B,EAAM,CACvB,KAAM,OACN,UAAW9B,EAAGoB,EAAO,UAAWU,EAAK,MAAM,UAAW,CACpD,CAACV,EAAO,mBAAmB,EAAGb,IAAS,OACzC,CAAC,EACD,QAASF,IAAY,iBAAmB,QAAUA,CACpD,CAAC,EAEH,OACEN,EAAA,cAACE,GAAA8B,EAAArB,EAAA,CACC,GAAG,MACH,OAAQa,EACR,QAAQ,cACR,UAAWvB,EAAGoB,EAAO,MAAM,CAAE,QAAAf,EAAS,KAAAE,CAAK,CAAC,EAAGmB,CAAS,GACpDC,GALL,CAMC,IAAKR,IAEJK,GAAaK,EAAYL,CAAS,EACnCzB,EAAA,cAACiC,EAAA,CACC,WAAW,mBACX,YAAW,GACX,UAAWZ,EAAO,WAEjBE,CACH,EACCG,GAAWI,EAAYJ,CAAO,CACjC,CAEJ,CACF,EAEAR,EAAM,YAAc,QGvFpB,OAAOlB,MAAW,QAMlB,OAAS,aAAAkC,OAAiB,wBAK1B,IAAMC,GAAqD,CACzD,UAAW,WACX,MAAO,UACP,SAAU,YACV,QAAS,UACT,QAAS,WACT,IAAK,gBACP,EAgCA,SAASC,EACPjB,EACAC,EACA,CACA,IAKIE,EAAAH,EAJF,cAAAkB,EACA,YAAAC,EAAc,OACd,KAAA9B,EAAO,SAzDX,EA2DMc,EADCM,EAAAC,EACDP,EADC,CAHH,eACA,cACA,SAGIiB,EAAgBD,GAAe9B,IAAS,UACxCF,EAAU6B,GAAUE,CAAY,EAEtC,OACErC,EAAA,cAACkB,EAAAc,EAAArB,IAAA,GACKiB,GACCW,EACD,CAAE,KAAA/B,EAAM,UAAWR,EAAA,cAACkC,GAAA,CAAU,OAAO,gBAAgB,CAAG,EACxD,CAAE,KAAA1B,CAAK,GAJZ,CAKC,QAASF,EACT,IAAKc,IAEJiB,CACH,CAEJ,CAEAD,EAAkB,YAAc,oBAEhC,IAAMI,GAAqBxC,EAAM,WAG/BoC,CAAiB","sourcesContent":["import React, { CSSProperties } from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  type CommonProps,\n  type PropsWithHTMLElement,\n  type ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\nexport type BadgeInternalProps = CommonProps & {\n  /**\n   * Determines the variation of the component\n   * @default primary\n   */\n  variant?: BadgeVariant;\n  children: React.ReactNode;\n  /**\n   * Sets the size of the component\n   * @default default\n   */\n  size?: BadgeSize;\n  /**\n   * Expects any of the icon components. Renders the icon aligned to the start\n   */\n  startIcon?: React.ReactNode;\n  /**\n   * Expects any of the icon components. Renders the icon aligned to the end\n   */\n  endIcon?: React.ReactNode;\n  /**\n   * Expects any valid CSS text-transform value. If not provided, will default to 'capitalize'\n   */\n  textTransform?: CSSProperties['textTransform'];\n};\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n  (props, ref) => {\n    const styles = getBadgeStyles(props.textTransform);\n    const {\n      children,\n      variant = 'primary',\n      size = 'default',\n      testId = 'cf-ui-badge',\n      startIcon,\n      endIcon,\n      className,\n      ...otherProps\n    } = props;\n\n    const iconContent = (icon) =>\n      React.cloneElement(icon, {\n        size: 'tiny',\n        className: cx(styles.badgeIcon, icon.props.className, {\n          [styles.badgeIconCustomTiny]: size === 'small',\n        }),\n        variant: variant === 'primary-filled' ? 'white' : variant,\n      });\n\n    return (\n      <Box\n        as=\"div\"\n        testId={testId}\n        display=\"inline-flex\"\n        className={cx(styles.badge({ variant, size }), className)}\n        {...otherProps}\n        ref={ref}\n      >\n        {startIcon && iconContent(startIcon)}\n        <Caption\n          fontWeight=\"fontWeightMedium\"\n          isTruncated\n          className={styles.badgeText}\n        >\n          {children}\n        </Caption>\n        {endIcon && iconContent(endIcon)}\n      </Box>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\nimport { CSSProperties } from 'react';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n  switch (variant) {\n    case 'positive':\n      return {\n        color: tokens.green600,\n        backgroundColor: tokens.green200,\n      };\n    case 'primary':\n      return {\n        color: tokens.blue600,\n        backgroundColor: tokens.blue200,\n      };\n    case 'negative':\n      return {\n        color: tokens.red600,\n        backgroundColor: tokens.red200,\n      };\n    case 'warning':\n      return {\n        color: tokens.orange600,\n        backgroundColor: tokens.orange200,\n      };\n    case 'secondary':\n      return {\n        color: tokens.gray700,\n        backgroundColor: tokens.gray200,\n      };\n    case 'primary-filled':\n      return {\n        color: tokens.colorWhite,\n        backgroundColor: tokens.blue600,\n      };\n    case 'featured':\n      return {\n        color: tokens.purple600,\n        backgroundColor: tokens.purple200,\n      };\n    default:\n      return {};\n  }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n  switch (size) {\n    case 'small':\n      return {\n        padding: `0 ${tokens.spacing2Xs}`,\n        lineHeight: tokens.lineHeightS,\n        maxHeight: tokens.lineHeightS,\n      };\n    default:\n      return {\n        padding: `0 ${tokens.spacingXs}`,\n        lineHeight: tokens.lineHeightM,\n        maxHeight: tokens.lineHeightM,\n      };\n  }\n};\n\nexport const getBadgeStyles = (\n  textTransform: CSSProperties['textTransform'] = 'capitalize',\n) => ({\n  badge: ({ variant, size }: BadgeStylesProps) =>\n    css({\n      columnGap: tokens.spacing2Xs,\n      alignItems: 'center',\n      borderRadius: tokens.borderRadiusSmall,\n      overflow: 'hidden',\n      verticalAlign: 'middle',\n      ...variantToStyles({ variant }),\n      ...sizeToStyles({ size }),\n    }),\n  badgeIcon: css({\n    flexShrink: 0,\n  }),\n  badgeIconCustomTiny: css({\n    width: '0.875rem',\n    height: '0.875rem',\n  }),\n  badgeText: css({\n    color: 'currentcolor',\n    lineHeight: 'inherit',\n    textTransform,\n  }),\n});\n","import { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n  children: React.ReactElement;\n  /**\n   * Container element for Portal\n   */\n  container?: Document | HTMLElement;\n}\n\nexport function Portal({\n  children,\n  container: containerElement,\n}: PortalProps): React.ReactPortal | null {\n  const container = useRef<Document | HTMLElement | undefined>(\n    containerElement,\n  );\n  const portal = useRef<HTMLDivElement>(document.createElement('div'));\n\n  useEffect(() => {\n    if (!container.current) {\n      container.current = document.body;\n    }\n\n    const portalContainer = portal.current;\n    portalContainer.setAttribute('data-cf-ui-portal', '');\n    container.current.appendChild(portalContainer);\n\n    return () => {\n      if (container.current) {\n        container.current.removeChild(portalContainer);\n      }\n    };\n  }, []);\n\n  return portal.current ? createPortal(children, portal.current) : null;\n}\n","import React from 'react';\nimport type {\n  EntityStatus,\n  ExpandProps,\n  PickUnion,\n} from '@contentful/f36-core';\nimport { ClockIcon } from '@contentful/f36-icons';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeSize, BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n  published: 'positive',\n  draft: 'warning',\n  archived: 'secondary',\n  changed: 'primary',\n  deleted: 'negative',\n  new: 'primary-filled',\n};\n\ntype BadgeSizeWithIsScheduledProp =\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size?: Exclude<BadgeSize, 'small'>;\n      /**\n       * Indicates that the entity that the badge is related to has a scheduled action\n       */\n      isScheduled?: boolean;\n    }\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size: PickUnion<BadgeSize, 'small'>;\n      // We use discriminative union typing, so in case the size is set as small we don't allow isScheduled\n      isScheduled?: never;\n    };\n\nexport type EntityStatusBadgeProps = Omit<\n  BadgeProps,\n  'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'\n> &\n  BadgeSizeWithIsScheduledProp & {\n    entityStatus: EntityStatus;\n  };\n\nfunction EntityStatusBadge(\n  props: EntityStatusBadgeProps,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    entityStatus,\n    isScheduled = undefined,\n    size = 'default',\n    ...otherProps\n  } = props;\n  const withClockIcon = isScheduled && size === 'default';\n  const variant = statusMap[entityStatus];\n\n  return (\n    <Badge\n      {...otherProps}\n      {...(withClockIcon\n        ? { size, startIcon: <ClockIcon testId=\"schedule-icon\" /> }\n        : { size })}\n      variant={variant}\n      ref={ref}\n    >\n      {entityStatus}\n    </Badge>\n  );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n  HTMLDivElement,\n  ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}
+{"version":3,"sources":["../../src/Badge/Badge.tsx","../../../utils/src/Portal/Portal.tsx","../../src/Badge/Badge.styles.ts","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","u","useRef","useEffect","useCallback","Children","isValidElement","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","textTransform","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","D","ClockIcon","statusMap","EntityStatusBadge","entityStatus","isScheduled","withClockIcon","_EntityStatusBadge"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  type CommonProps,\n  type PropsWithHTMLElement,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport type * as CSS from 'csstype';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport type BadgeInternalProps = CommonProps & {\n  /**\n   * Determines the variation of the component\n   * @default primary\n   */\n  variant?: BadgeVariant;\n  children: React.ReactNode;\n  /**\n   * Sets the size of the component\n   * @default default\n   */\n  size?: BadgeSize;\n  /**\n   * Expects any of the icon components. Renders the icon aligned to the start\n   */\n  startIcon?: React.ReactNode;\n  /**\n   * Expects any of the icon components. Renders the icon aligned to the end\n   */\n  endIcon?: React.ReactNode;\n  /**\n   * By default the Badge uses CSS to capitalize only the first letter of the\n   * badge text. This CSS is hit by a bug in Firefox that results in the badge\n   * being rendered slightly too wide. To avoid the bug, set this property to\n   * `none` to disable the text transformation. Please be sure the initial\n   * letter of the badge text is already capitalized!\n   */\n  textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;\n};\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n  (props, ref) => {\n    const styles = getBadgeStyles();\n    const {\n      children,\n      variant = 'primary',\n      size = 'default',\n      testId = 'cf-ui-badge',\n      startIcon,\n      endIcon,\n      className,\n      textTransform = undefined,\n      ...otherProps\n    } = props;\n\n    const iconContent = (icon) =>\n      React.cloneElement(icon, {\n        size: 'tiny',\n        className: cx(styles.badgeIcon, icon.props.className, {\n          [styles.badgeIconCustomTiny]: size === 'small',\n        }),\n        variant: variant === 'primary-filled' ? 'white' : variant,\n      });\n\n    return (\n      <Box\n        as=\"div\"\n        testId={testId}\n        display=\"inline-flex\"\n        className={cx(styles.badge({ variant, size }), className)}\n        {...otherProps}\n        ref={ref}\n      >\n        {startIcon && iconContent(startIcon)}\n        <Caption\n          fontWeight=\"fontWeightMedium\"\n          isTruncated\n          className={styles.badgeText({ textTransform })}\n        >\n          {children}\n        </Caption>\n        {endIcon && iconContent(endIcon)}\n      </Box>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n","import { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n  children: React.ReactElement;\n  /**\n   * Container element for Portal\n   */\n  container?: Document | HTMLElement;\n}\n\nexport function Portal({\n  children,\n  container: containerElement,\n}: PortalProps): React.ReactPortal | null {\n  const container = useRef<Document | HTMLElement | undefined>(\n    containerElement,\n  );\n  const portal = useRef<HTMLDivElement>(document.createElement('div'));\n\n  useEffect(() => {\n    if (!container.current) {\n      container.current = document.body;\n    }\n\n    const portalContainer = portal.current;\n    portalContainer.setAttribute('data-cf-ui-portal', '');\n    container.current.appendChild(portalContainer);\n\n    return () => {\n      if (container.current) {\n        container.current.removeChild(portalContainer);\n      }\n    };\n  }, []);\n\n  return portal.current ? createPortal(children, portal.current) : null;\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\nimport type { BadgeInternalProps } from './Badge';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n  switch (variant) {\n    case 'positive':\n      return {\n        color: tokens.green600,\n        backgroundColor: tokens.green200,\n      };\n    case 'primary':\n      return {\n        color: tokens.blue600,\n        backgroundColor: tokens.blue200,\n      };\n    case 'negative':\n      return {\n        color: tokens.red600,\n        backgroundColor: tokens.red200,\n      };\n    case 'warning':\n      return {\n        color: tokens.orange600,\n        backgroundColor: tokens.orange200,\n      };\n    case 'secondary':\n      return {\n        color: tokens.gray700,\n        backgroundColor: tokens.gray200,\n      };\n    case 'primary-filled':\n      return {\n        color: tokens.colorWhite,\n        backgroundColor: tokens.blue600,\n      };\n    case 'featured':\n      return {\n        color: tokens.purple600,\n        backgroundColor: tokens.purple200,\n      };\n    default:\n      return {};\n  }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n  switch (size) {\n    case 'small':\n      return {\n        padding: `0 ${tokens.spacing2Xs}`,\n        lineHeight: tokens.lineHeightS,\n        maxHeight: tokens.lineHeightS,\n      };\n    default:\n      return {\n        padding: `0 ${tokens.spacingXs}`,\n        lineHeight: tokens.lineHeightM,\n        maxHeight: tokens.lineHeightM,\n      };\n  }\n};\n\nexport const getBadgeStyles = () => ({\n  badge: ({ variant, size }: BadgeStylesProps) =>\n    css({\n      columnGap: tokens.spacing2Xs,\n      alignItems: 'center',\n      borderRadius: tokens.borderRadiusSmall,\n      overflow: 'hidden',\n      verticalAlign: 'middle',\n      ...variantToStyles({ variant }),\n      ...sizeToStyles({ size }),\n    }),\n  badgeIcon: css({\n    flexShrink: 0,\n  }),\n  badgeIconCustomTiny: css({\n    width: '0.875rem',\n    height: '0.875rem',\n  }),\n  badgeText: ({\n    textTransform,\n  }: {\n    textTransform: BadgeInternalProps['textTransform'];\n  }) =>\n    css([\n      {\n        color: 'currentcolor',\n        lineHeight: 'inherit',\n      },\n      textTransform !== 'none' && {\n        textTransform: 'lowercase',\n        '&::first-letter': {\n          textTransform: 'uppercase',\n        },\n      },\n    ]),\n});\n","import React from 'react';\nimport type {\n  EntityStatus,\n  ExpandProps,\n  PickUnion,\n} from '@contentful/f36-core';\nimport { ClockIcon } from '@contentful/f36-icons';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeSize, BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n  published: 'positive',\n  draft: 'warning',\n  archived: 'secondary',\n  changed: 'primary',\n  deleted: 'negative',\n  new: 'primary-filled',\n};\n\ntype BadgeSizeWithIsScheduledProp =\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size?: Exclude<BadgeSize, 'small'>;\n      /**\n       * Indicates that the entity that the badge is related to has a scheduled action\n       */\n      isScheduled?: boolean;\n    }\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size: PickUnion<BadgeSize, 'small'>;\n      // We use discriminative union typing, so in case the size is set as small we don't allow isScheduled\n      isScheduled?: never;\n    };\n\nexport type EntityStatusBadgeProps = Omit<\n  BadgeProps,\n  'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'\n> &\n  BadgeSizeWithIsScheduledProp & {\n    entityStatus: EntityStatus;\n  };\n\nfunction EntityStatusBadge(\n  props: EntityStatusBadgeProps,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    entityStatus,\n    isScheduled = undefined,\n    size = 'default',\n    ...otherProps\n  } = props;\n  const withClockIcon = isScheduled && size === 'default';\n  const variant = statusMap[entityStatus];\n\n  return (\n    <Badge\n      {...otherProps}\n      {...(withClockIcon\n        ? { size, startIcon: <ClockIcon testId=\"schedule-icon\" /> }\n        : { size })}\n      variant={variant}\n      ref={ref}\n    >\n      {entityStatus}\n    </Badge>\n  );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n  HTMLDivElement,\n  ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}

package/dist/index.d.mts

@@ -1,5 +1,6 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { PropsWithHTMLElement, CommonProps, EntityStatus, PickUnion } from '@contentful/f36-core';
+import * as CSS from 'csstype';
 
 declare type BadgeSize = 'default' | 'small';
 declare type BadgeVariant = 'negative' | 'positive' | 'primary' | 'secondary' | 'warning' | 'primary-filled' | 'featured';
@@ -25,9 +26,13 @@ declare type BadgeInternalProps = CommonProps & {
      */
     endIcon?: React.ReactNode;
     /**
-     * Expects any valid CSS text-transform value. If not provided, will default to 'capitalize'
+     * By default the Badge uses CSS to capitalize only the first letter of the
+     * badge text. This CSS is hit by a bug in Firefox that results in the badge
+     * being rendered slightly too wide. To avoid the bug, set this property to
+     * `none` to disable the text transformation. Please be sure the initial
+     * letter of the badge text is already capitalized!
      */
-    textTransform?: CSSProperties['textTransform'];
+    textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;
 };
 declare type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
 declare const Badge: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, "variant" | "size" | "textTransform" | "children" | keyof CommonProps | "startIcon" | "endIcon"> & CommonProps & {
@@ -51,9 +56,13 @@ declare const Badge: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.Detail
      */
     endIcon?: React.ReactNode;
     /**
-     * Expects any valid CSS text-transform value. If not provided, will default to 'capitalize'
+     * By default the Badge uses CSS to capitalize only the first letter of the
+     * badge text. This CSS is hit by a bug in Firefox that results in the badge
+     * being rendered slightly too wide. To avoid the bug, set this property to
+     * `none` to disable the text transformation. Please be sure the initial
+     * letter of the badge text is already capitalized!
      */
-    textTransform?: CSSProperties['textTransform'];
+    textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 
 declare type BadgeSizeWithIsScheduledProp = {

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { PropsWithHTMLElement, CommonProps, EntityStatus, PickUnion } from '@contentful/f36-core';
+import * as CSS from 'csstype';
 
 declare type BadgeSize = 'default' | 'small';
 declare type BadgeVariant = 'negative' | 'positive' | 'primary' | 'secondary' | 'warning' | 'primary-filled' | 'featured';
@@ -25,9 +26,13 @@ declare type BadgeInternalProps = CommonProps & {
      */
     endIcon?: React.ReactNode;
     /**
-     * Expects any valid CSS text-transform value. If not provided, will default to 'capitalize'
+     * By default the Badge uses CSS to capitalize only the first letter of the
+     * badge text. This CSS is hit by a bug in Firefox that results in the badge
+     * being rendered slightly too wide. To avoid the bug, set this property to
+     * `none` to disable the text transformation. Please be sure the initial
+     * letter of the badge text is already capitalized!
      */
-    textTransform?: CSSProperties['textTransform'];
+    textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;
 };
 declare type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
 declare const Badge: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, "variant" | "size" | "textTransform" | "children" | keyof CommonProps | "startIcon" | "endIcon"> & CommonProps & {
@@ -51,9 +56,13 @@ declare const Badge: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.Detail
      */
     endIcon?: React.ReactNode;
     /**
-     * Expects any valid CSS text-transform value. If not provided, will default to 'capitalize'
+     * By default the Badge uses CSS to capitalize only the first letter of the
+     * badge text. This CSS is hit by a bug in Firefox that results in the badge
+     * being rendered slightly too wide. To avoid the bug, set this property to
+     * `none` to disable the text transformation. Please be sure the initial
+     * letter of the badge text is already capitalized!
      */
-    textTransform?: CSSProperties['textTransform'];
+    textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 
 declare type BadgeSizeWithIsScheduledProp = {

package/dist/index.js

@@ -12,9 +12,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var l__default = /*#__PURE__*/_interopDefault(l);
 var i__default = /*#__PURE__*/_interopDefault(i);
 
-var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var N=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))k.call(r,t)&&N(e,t,r[t]);if(b)for(var t of b(r))R.call(r,t)&&N(e,t,r[t]);return e},H=(e,r)=>te(e,re(r));var x=(e,r)=>{var t={};for(var a in e)k.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&b)for(var a of b(e))r.indexOf(a)<0&&R.call(e,a)&&(t[a]=e[a]);return t};var ae=({variant:e})=>{switch(e){case"positive":return {color:i__default.default.green600,backgroundColor:i__default.default.green200};case"primary":return {color:i__default.default.blue600,backgroundColor:i__default.default.blue200};case"negative":return {color:i__default.default.red600,backgroundColor:i__default.default.red200};case"warning":return {color:i__default.default.orange600,backgroundColor:i__default.default.orange200};case"secondary":return {color:i__default.default.gray700,backgroundColor:i__default.default.gray200};case"primary-filled":return {color:i__default.default.colorWhite,backgroundColor:i__default.default.blue600};case"featured":return {color:i__default.default.purple600,backgroundColor:i__default.default.purple200};default:return {}}},ne=({size:e})=>{switch(e){case"small":return {padding:`0 ${i__default.default.spacing2Xs}`,lineHeight:i__default.default.lineHeightS,maxHeight:i__default.default.lineHeightS};default:return {padding:`0 ${i__default.default.spacingXs}`,lineHeight:i__default.default.lineHeightM,maxHeight:i__default.default.lineHeightM}}},M=(e="capitalize")=>({badge:({variant:r,size:t})=>emotion.css(g(g({columnGap:i__default.default.spacing2Xs,alignItems:"center",borderRadius:i__default.default.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},ae({variant:r})),ne({size:t}))),badgeIcon:emotion.css({flexShrink:0}),badgeIconCustomTiny:emotion.css({width:"0.875rem",height:"0.875rem"}),badgeText:emotion.css({color:"currentcolor",lineHeight:"inherit",textTransform:e})});var D=l__default.default.createContext("low"),u=()=>l__default.default.useContext(D);D.Provider;var se=Object.defineProperty,le=Object.defineProperties,de=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?se(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(P)for(var t of P(r))j.call(r,t)&&L(e,t,r[t]);return e},m=(e,r)=>le(e,de(r)),h=(e,r)=>{var t={};for(var a in e)$.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&P)for(var a of P(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},ce="span";function ge(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function pe(){return emotion.css({wordBreak:"break-word"})}function V(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:o="gray800",lineHeight:d="lineHeightM",letterSpacing:c="letterSpacingDefault",children:w,isTruncated:T,isWordBreak:S,as:v,className:B,margin:Z="none"}=t,_=h(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=v||ce;return l__default.default.createElement(f36Core.Box,m(f({},_),{as:Q,className:emotion.cx(emotion.css({padding:0,fontFamily:i__default.default[n],fontWeight:i__default.default[s],color:i__default.default[o],fontSize:i__default.default[a],lineHeight:i__default.default[d],letterSpacing:i__default.default[c]}),T?ge():null,S?pe():null,B),margin:Z,ref:r}),w)}V.displayName="Text";var y=l__default.default.forwardRef(V),fe="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=h(t,["children","fontWeight","testId"]);let d=u();return l__default.default.createElement(y,m(f({as:fe,testId:s,fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l__default.default.forwardRef(A),me="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=h(t,["children","testId"]);let o=u();return l__default.default.createElement(y,m(f({as:me,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:o==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:o==="high"?"lineHeightXlHigh":"lineHeightXl"},s),{ref:r}),a)}G.displayName="Heading";l__default.default.forwardRef(G);var he="h3";function K(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=h(t,["children","testId"]);let o=u();return l__default.default.createElement(y,m(f({as:he,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}K.displayName="Subheading";l__default.default.forwardRef(K);var ye="h2";function U(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=h(t,["children","size","testId"]);let d="fontSize2Xl",c="lineHeight2Xl";return n==="large"&&(d="fontSize3Xl",c="lineHeight3Xl"),l__default.default.createElement(y,m(f({as:ye,testId:s,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:d,lineHeight:c,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},o),{ref:r}),a)}U.displayName="DisplayText";l__default.default.forwardRef(U);var Se="h2";function Y(e,r){var t=e,{children:a,className:n,testId:s="cf-ui-section-heading"}=t,o=h(t,["children","className","testId"]);let d=u();return l__default.default.createElement(y,m(f({as:Se,testId:s,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:i__default.default.letterSpacingWide,textTransform:"uppercase"}),n)},o),{ref:r}),a)}Y.displayName="SectionHeading";l__default.default.forwardRef(Y);var ve=l__default.default.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,s=h(t,["children","testId"]);let o=u();return l__default.default.createElement(y,m(f({as:"p",testId:n,fontSize:o==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:o==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:"spacingM"},s),{ref:r}),a)});ve.displayName="Paragraph";var C=l__default.default.forwardRef((e,r)=>{let t=M(e.textTransform),v=e,{children:a,variant:n="primary",size:s="default",testId:o="cf-ui-badge",startIcon:d,endIcon:c,className:w}=v,T=x(v,["children","variant","size","testId","startIcon","endIcon","className"]),S=B=>l__default.default.cloneElement(B,{size:"tiny",className:emotion.cx(t.badgeIcon,B.props.className,{[t.badgeIconCustomTiny]:s==="small"}),variant:n==="primary-filled"?"white":n});return l__default.default.createElement(f36Core.Box,H(g({as:"div",testId:o,display:"inline-flex",className:emotion.cx(t.badge({variant:n,size:s}),w)},T),{ref:r}),d&&S(d),l__default.default.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),c&&S(c))});C.displayName="Badge";var He={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function J(e,r){let c=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=c,s=x(c,["entityStatus","isScheduled","size"]),o=a&&n==="default",d=He[t];return l__default.default.createElement(C,H(g(g({},s),o?{size:n,startIcon:l__default.default.createElement(f36Icons.ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:d,ref:r}),t)}J.displayName="EntityStatusBadge";var xe=l__default.default.forwardRef(J);
+var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var k=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))R.call(r,t)&&k(e,t,r[t]);if(b)for(var t of b(r))M.call(r,t)&&k(e,t,r[t]);return e},x=(e,r)=>te(e,re(r));var H=(e,r)=>{var t={};for(var a in e)R.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&b)for(var a of b(e))r.indexOf(a)<0&&M.call(e,a)&&(t[a]=e[a]);return t};var D=l__default.default.createContext("low"),u=()=>l__default.default.useContext(D);D.Provider;var ie=Object.defineProperty,oe=Object.defineProperties,se=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?ie(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(I)for(var t of I(r))j.call(r,t)&&L(e,t,r[t]);return e},m=(e,r)=>oe(e,se(r)),h=(e,r)=>{var t={};for(var a in e)$.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&I)for(var a of I(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},le="span";function de(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function ce(){return emotion.css({wordBreak:"break-word"})}function V(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:o="gray800",lineHeight:d="lineHeightM",letterSpacing:c="letterSpacingDefault",children:w,isTruncated:T,isWordBreak:W,as:S,className:v,margin:B="none"}=t,_=h(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=S||le;return l__default.default.createElement(f36Core.Box,m(f({},_),{as:Q,className:emotion.cx(emotion.css({padding:0,fontFamily:i__default.default[n],fontWeight:i__default.default[s],color:i__default.default[o],fontSize:i__default.default[a],lineHeight:i__default.default[d],letterSpacing:i__default.default[c]}),T?de():null,W?ce():null,v),margin:B,ref:r}),w)}V.displayName="Text";var y=l__default.default.forwardRef(V),ge="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=h(t,["children","fontWeight","testId"]);let d=u();return l__default.default.createElement(y,m(f({as:ge,testId:s,fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l__default.default.forwardRef(A),pe="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=h(t,["children","testId"]);let o=u();return l__default.default.createElement(y,m(f({as:pe,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:o==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:o==="high"?"lineHeightXlHigh":"lineHeightXl"},s),{ref:r}),a)}G.displayName="Heading";l__default.default.forwardRef(G);var fe="h3";function K(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=h(t,["children","testId"]);let o=u();return l__default.default.createElement(y,m(f({as:fe,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}K.displayName="Subheading";l__default.default.forwardRef(K);var he="h2";function U(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=h(t,["children","size","testId"]);let d="fontSize2Xl",c="lineHeight2Xl";return n==="large"&&(d="fontSize3Xl",c="lineHeight3Xl"),l__default.default.createElement(y,m(f({as:he,testId:s,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:d,lineHeight:c,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},o),{ref:r}),a)}U.displayName="DisplayText";l__default.default.forwardRef(U);var ue="h2";function Y(e,r){var t=e,{children:a,className:n,testId:s="cf-ui-section-heading"}=t,o=h(t,["children","className","testId"]);let d=u();return l__default.default.createElement(y,m(f({as:ue,testId:s,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:i__default.default.letterSpacingWide,textTransform:"uppercase"}),n)},o),{ref:r}),a)}Y.displayName="SectionHeading";l__default.default.forwardRef(Y);var ye=l__default.default.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,s=h(t,["children","testId"]);let o=u();return l__default.default.createElement(y,m(f({as:"p",testId:n,fontSize:o==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:o==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:"spacingM"},s),{ref:r}),a)});ye.displayName="Paragraph";var Se=({variant:e})=>{switch(e){case"positive":return {color:i__default.default.green600,backgroundColor:i__default.default.green200};case"primary":return {color:i__default.default.blue600,backgroundColor:i__default.default.blue200};case"negative":return {color:i__default.default.red600,backgroundColor:i__default.default.red200};case"warning":return {color:i__default.default.orange600,backgroundColor:i__default.default.orange200};case"secondary":return {color:i__default.default.gray700,backgroundColor:i__default.default.gray200};case"primary-filled":return {color:i__default.default.colorWhite,backgroundColor:i__default.default.blue600};case"featured":return {color:i__default.default.purple600,backgroundColor:i__default.default.purple200};default:return {}}},ve=({size:e})=>{switch(e){case"small":return {padding:`0 ${i__default.default.spacing2Xs}`,lineHeight:i__default.default.lineHeightS,maxHeight:i__default.default.lineHeightS};default:return {padding:`0 ${i__default.default.spacingXs}`,lineHeight:i__default.default.lineHeightM,maxHeight:i__default.default.lineHeightM}}},q=()=>({badge:({variant:e,size:r})=>emotion.css(g(g({columnGap:i__default.default.spacing2Xs,alignItems:"center",borderRadius:i__default.default.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Se({variant:e})),ve({size:r}))),badgeIcon:emotion.css({flexShrink:0}),badgeIconCustomTiny:emotion.css({width:"0.875rem",height:"0.875rem"}),badgeText:({textTransform:e})=>emotion.css([{color:"currentcolor",lineHeight:"inherit"},e!=="none"&&{textTransform:"lowercase","&::first-letter":{textTransform:"uppercase"}}])});var C=l__default.default.forwardRef((e,r)=>{let t=q(),v=e,{children:a,variant:n="primary",size:s="default",testId:o="cf-ui-badge",startIcon:d,endIcon:c,className:w,textTransform:T=void 0}=v,W=H(v,["children","variant","size","testId","startIcon","endIcon","className","textTransform"]),S=B=>l__default.default.cloneElement(B,{size:"tiny",className:emotion.cx(t.badgeIcon,B.props.className,{[t.badgeIconCustomTiny]:s==="small"}),variant:n==="primary-filled"?"white":n});return l__default.default.createElement(f36Core.Box,x(g({as:"div",testId:o,display:"inline-flex",className:emotion.cx(t.badge({variant:n,size:s}),w)},W),{ref:r}),d&&S(d),l__default.default.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText({textTransform:T})},a),c&&S(c))});C.displayName="Badge";var xe={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function Z(e,r){let c=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=c,s=H(c,["entityStatus","isScheduled","size"]),o=a&&n==="default",d=xe[t];return l__default.default.createElement(C,x(g(g({},s),o?{size:n,startIcon:l__default.default.createElement(f36Icons.ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:d,ref:r}),t)}Z.displayName="EntityStatusBadge";var He=l__default.default.forwardRef(Z);
 
 exports.Badge = C;
-exports.EntityStatusBadge = xe;
+exports.EntityStatusBadge = He;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Badge/Badge.tsx","../src/Badge/Badge.styles.ts","../../utils/src/Portal/Portal.tsx","../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","textTransform","__spreadValues","u","useRef","useEffect","useCallback","Children","isValidElement","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","D","ClockIcon","statusMap","EntityStatusBadge","entityStatus","isScheduled","withClockIcon","_EntityStatusBadge"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  type CommonProps,\n  type PropsWithHTMLElement,\n  type ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\nexport type BadgeInternalProps = CommonProps & {\n  /**\n   * Determines the variation of the component\n   * @default primary\n   */\n  variant?: BadgeVariant;\n  children: React.ReactNode;\n  /**\n   * Sets the size of the component\n   * @default default\n   */\n  size?: BadgeSize;\n  /**\n   * Expects any of the icon components. Renders the icon aligned to the start\n   */\n  startIcon?: React.ReactNode;\n  /**\n   * Expects any of the icon components. Renders the icon aligned to the end\n   */\n  endIcon?: React.ReactNode;\n  /**\n   * Expects any valid CSS text-transform value. If not provided, will default to 'capitalize'\n   */\n  textTransform?: CSSProperties['textTransform'];\n};\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n  (props, ref) => {\n    const styles = getBadgeStyles(props.textTransform);\n    const {\n      children,\n      variant = 'primary',\n      size = 'default',\n      testId = 'cf-ui-badge',\n      startIcon,\n      endIcon,\n      className,\n      ...otherProps\n    } = props;\n\n    const iconContent = (icon) =>\n      React.cloneElement(icon, {\n        size: 'tiny',\n        className: cx(styles.badgeIcon, icon.props.className, {\n          [styles.badgeIconCustomTiny]: size === 'small',\n        }),\n        variant: variant === 'primary-filled' ? 'white' : variant,\n      });\n\n    return (\n      <Box\n        as=\"div\"\n        testId={testId}\n        display=\"inline-flex\"\n        className={cx(styles.badge({ variant, size }), className)}\n        {...otherProps}\n        ref={ref}\n      >\n        {startIcon && iconContent(startIcon)}\n        <Caption\n          fontWeight=\"fontWeightMedium\"\n          isTruncated\n          className={styles.badgeText}\n        >\n          {children}\n        </Caption>\n        {endIcon && iconContent(endIcon)}\n      </Box>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\nimport { CSSProperties } from 'react';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n  switch (variant) {\n    case 'positive':\n      return {\n        color: tokens.green600,\n        backgroundColor: tokens.green200,\n      };\n    case 'primary':\n      return {\n        color: tokens.blue600,\n        backgroundColor: tokens.blue200,\n      };\n    case 'negative':\n      return {\n        color: tokens.red600,\n        backgroundColor: tokens.red200,\n      };\n    case 'warning':\n      return {\n        color: tokens.orange600,\n        backgroundColor: tokens.orange200,\n      };\n    case 'secondary':\n      return {\n        color: tokens.gray700,\n        backgroundColor: tokens.gray200,\n      };\n    case 'primary-filled':\n      return {\n        color: tokens.colorWhite,\n        backgroundColor: tokens.blue600,\n      };\n    case 'featured':\n      return {\n        color: tokens.purple600,\n        backgroundColor: tokens.purple200,\n      };\n    default:\n      return {};\n  }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n  switch (size) {\n    case 'small':\n      return {\n        padding: `0 ${tokens.spacing2Xs}`,\n        lineHeight: tokens.lineHeightS,\n        maxHeight: tokens.lineHeightS,\n      };\n    default:\n      return {\n        padding: `0 ${tokens.spacingXs}`,\n        lineHeight: tokens.lineHeightM,\n        maxHeight: tokens.lineHeightM,\n      };\n  }\n};\n\nexport const getBadgeStyles = (\n  textTransform: CSSProperties['textTransform'] = 'capitalize',\n) => ({\n  badge: ({ variant, size }: BadgeStylesProps) =>\n    css({\n      columnGap: tokens.spacing2Xs,\n      alignItems: 'center',\n      borderRadius: tokens.borderRadiusSmall,\n      overflow: 'hidden',\n      verticalAlign: 'middle',\n      ...variantToStyles({ variant }),\n      ...sizeToStyles({ size }),\n    }),\n  badgeIcon: css({\n    flexShrink: 0,\n  }),\n  badgeIconCustomTiny: css({\n    width: '0.875rem',\n    height: '0.875rem',\n  }),\n  badgeText: css({\n    color: 'currentcolor',\n    lineHeight: 'inherit',\n    textTransform,\n  }),\n});\n","import { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n  children: React.ReactElement;\n  /**\n   * Container element for Portal\n   */\n  container?: Document | HTMLElement;\n}\n\nexport function Portal({\n  children,\n  container: containerElement,\n}: PortalProps): React.ReactPortal | null {\n  const container = useRef<Document | HTMLElement | undefined>(\n    containerElement,\n  );\n  const portal = useRef<HTMLDivElement>(document.createElement('div'));\n\n  useEffect(() => {\n    if (!container.current) {\n      container.current = document.body;\n    }\n\n    const portalContainer = portal.current;\n    portalContainer.setAttribute('data-cf-ui-portal', '');\n    container.current.appendChild(portalContainer);\n\n    return () => {\n      if (container.current) {\n        container.current.removeChild(portalContainer);\n      }\n    };\n  }, []);\n\n  return portal.current ? createPortal(children, portal.current) : null;\n}\n","import React from 'react';\nimport type {\n  EntityStatus,\n  ExpandProps,\n  PickUnion,\n} from '@contentful/f36-core';\nimport { ClockIcon } from '@contentful/f36-icons';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeSize, BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n  published: 'positive',\n  draft: 'warning',\n  archived: 'secondary',\n  changed: 'primary',\n  deleted: 'negative',\n  new: 'primary-filled',\n};\n\ntype BadgeSizeWithIsScheduledProp =\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size?: Exclude<BadgeSize, 'small'>;\n      /**\n       * Indicates that the entity that the badge is related to has a scheduled action\n       */\n      isScheduled?: boolean;\n    }\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size: PickUnion<BadgeSize, 'small'>;\n      // We use discriminative union typing, so in case the size is set as small we don't allow isScheduled\n      isScheduled?: never;\n    };\n\nexport type EntityStatusBadgeProps = Omit<\n  BadgeProps,\n  'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'\n> &\n  BadgeSizeWithIsScheduledProp & {\n    entityStatus: EntityStatus;\n  };\n\nfunction EntityStatusBadge(\n  props: EntityStatusBadgeProps,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    entityStatus,\n    isScheduled = undefined,\n    size = 'default',\n    ...otherProps\n  } = props;\n  const withClockIcon = isScheduled && size === 'default';\n  const variant = statusMap[entityStatus];\n\n  return (\n    <Badge\n      {...otherProps}\n      {...(withClockIcon\n        ? { size, startIcon: <ClockIcon testId=\"schedule-icon\" /> }\n        : { size })}\n      variant={variant}\n      ref={ref}\n    >\n      {entityStatus}\n    </Badge>\n  );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n  HTMLDivElement,\n  ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}
+{"version":3,"sources":["../src/Badge/Badge.tsx","../../utils/src/Portal/Portal.tsx","../src/Badge/Badge.styles.ts","../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","u","useRef","useEffect","useCallback","Children","isValidElement","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","textTransform","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","D","ClockIcon","statusMap","EntityStatusBadge","entityStatus","isScheduled","withClockIcon","_EntityStatusBadge"],"mappings":"qlBAAA,OAAOA,MAAW,QAClB,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,OAIK,qLCPP,OAASC,GAAA,UAAAC,GAAAC,aAAAA,GAAW,eAAAC,GAAc,YAAAC,GACzB,kBAAAC,OAAoB,8pICD7B,OAAOC,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAKpB,IAAMC,GAAkB,CAAC,CAAE,QAAAC,CAAQ,IAA4C,CAC7E,OAAQA,EAAS,CACf,IAAK,WACH,MAAO,CACL,MAAOH,EAAO,SACd,gBAAiBA,EAAO,QAC1B,EACF,IAAK,UACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,EACF,IAAK,WACH,MAAO,CACL,MAAOA,EAAO,OACd,gBAAiBA,EAAO,MAC1B,EACF,IAAK,UACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,EACF,IAAK,YACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,EACF,IAAK,iBACH,MAAO,CACL,MAAOA,EAAO,WACd,gBAAiBA,EAAO,OAC1B,EACF,IAAK,WACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,EACF,QACE,MAAO,CAAC,CACZ,CACF,EAEMI,GAAe,CAAC,CAAE,KAAAC,CAAK,IAAsC,CACjE,OAAQA,EAAM,CACZ,IAAK,QACH,MAAO,CACL,QAAS,KAAKL,EAAO,UAAU,GAC/B,WAAYA,EAAO,YACnB,UAAWA,EAAO,WACpB,EACF,QACE,MAAO,CACL,QAAS,KAAKA,EAAO,SAAS,GAC9B,WAAYA,EAAO,YACnB,UAAWA,EAAO,WACpB,CACJ,CACF,EAEaM,EAAiB,KAAO,CACnC,MAAO,CAAC,CAAE,QAAAH,EAAS,KAAAE,CAAK,IACtBJ,EAAIM,IAAA,CACF,UAAWP,EAAO,WAClB,WAAY,SACZ,aAAcA,EAAO,kBACrB,SAAU,SACV,cAAe,UACZE,GAAgB,CAAE,QAAAC,CAAQ,CAAC,GAC3BC,GAAa,CAAE,KAAAC,CAAK,CAAC,EACzB,EACH,UAAWJ,EAAI,CACb,WAAY,CACd,CAAC,EACD,oBAAqBA,EAAI,CACvB,MAAO,WACP,OAAQ,UACV,CAAC,EACD,UAAW,CAAC,CACV,cAAAO,CACF,IAGEP,EAAI,CACF,CACE,MAAO,eACP,WAAY,SACd,EACAO,IAAkB,QAAU,CAC1B,cAAe,YACf,kBAAmB,CACjB,cAAe,WACjB,CACF,CACF,CAAC,CACL,GFtDO,IAAMC,EAAQlB,EAAM,WACzB,CAACmB,EAAOC,IAAQ,CACd,IAAMC,EAASN,EAAe,EAW1BO,EAAAH,EATF,UAAAI,EACA,QAAAX,EAAU,UACV,KAAAE,EAAO,UACP,OAAAU,EAAS,cACT,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,cAAAV,EAAgB,MAzDtB,EA2DQK,EADCM,EAAAC,EACDP,EADC,CARH,WACA,UACA,OACA,SACA,YACA,UACA,YACA,kBAIIQ,EAAeC,GACnB/B,EAAM,aAAa+B,EAAM,CACvB,KAAM,OACN,UAAW9B,EAAGoB,EAAO,UAAWU,EAAK,MAAM,UAAW,CACpD,CAACV,EAAO,mBAAmB,EAAGP,IAAS,OACzC,CAAC,EACD,QAASF,IAAY,iBAAmB,QAAUA,CACpD,CAAC,EAEH,OACEZ,EAAA,cAACE,GAAA8B,EAAAhB,EAAA,CACC,GAAG,MACH,OAAQQ,EACR,QAAQ,cACR,UAAWvB,EAAGoB,EAAO,MAAM,CAAE,QAAAT,EAAS,KAAAE,CAAK,CAAC,EAAGa,CAAS,GACpDC,GALL,CAMC,IAAKR,IAEJK,GAAaK,EAAYL,CAAS,EACnCzB,EAAA,cAACiC,EAAA,CACC,WAAW,mBACX,YAAW,GACX,UAAWZ,EAAO,UAAU,CAAE,cAAAJ,CAAc,CAAC,GAE5CM,CACH,EACCG,GAAWI,EAAYJ,CAAO,CACjC,CAEJ,CACF,EAEAR,EAAM,YAAc,QG7FpB,OAAOlB,MAAW,QAMlB,OAAS,aAAAkC,OAAiB,wBAK1B,IAAMC,GAAqD,CACzD,UAAW,WACX,MAAO,UACP,SAAU,YACV,QAAS,UACT,QAAS,WACT,IAAK,gBACP,EAgCA,SAASC,EACPjB,EACAC,EACA,CACA,IAKIE,EAAAH,EAJF,cAAAkB,EACA,YAAAC,EAAc,OACd,KAAAxB,EAAO,SAzDX,EA2DMQ,EADCM,EAAAC,EACDP,EADC,CAHH,eACA,cACA,SAGIiB,EAAgBD,GAAexB,IAAS,UACxCF,EAAUuB,GAAUE,CAAY,EAEtC,OACErC,EAAA,cAACkB,EAAAc,EAAAhB,IAAA,GACKY,GACCW,EACD,CAAE,KAAAzB,EAAM,UAAWd,EAAA,cAACkC,GAAA,CAAU,OAAO,gBAAgB,CAAG,EACxD,CAAE,KAAApB,CAAK,GAJZ,CAKC,QAASF,EACT,IAAKQ,IAEJiB,CACH,CAEJ,CAEAD,EAAkB,YAAc,oBAEhC,IAAMI,GAAqBxC,EAAM,WAG/BoC,CAAiB","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  type CommonProps,\n  type PropsWithHTMLElement,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport type * as CSS from 'csstype';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport type BadgeInternalProps = CommonProps & {\n  /**\n   * Determines the variation of the component\n   * @default primary\n   */\n  variant?: BadgeVariant;\n  children: React.ReactNode;\n  /**\n   * Sets the size of the component\n   * @default default\n   */\n  size?: BadgeSize;\n  /**\n   * Expects any of the icon components. Renders the icon aligned to the start\n   */\n  startIcon?: React.ReactNode;\n  /**\n   * Expects any of the icon components. Renders the icon aligned to the end\n   */\n  endIcon?: React.ReactNode;\n  /**\n   * By default the Badge uses CSS to capitalize only the first letter of the\n   * badge text. This CSS is hit by a bug in Firefox that results in the badge\n   * being rendered slightly too wide. To avoid the bug, set this property to\n   * `none` to disable the text transformation. Please be sure the initial\n   * letter of the badge text is already capitalized!\n   */\n  textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;\n};\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n  (props, ref) => {\n    const styles = getBadgeStyles();\n    const {\n      children,\n      variant = 'primary',\n      size = 'default',\n      testId = 'cf-ui-badge',\n      startIcon,\n      endIcon,\n      className,\n      textTransform = undefined,\n      ...otherProps\n    } = props;\n\n    const iconContent = (icon) =>\n      React.cloneElement(icon, {\n        size: 'tiny',\n        className: cx(styles.badgeIcon, icon.props.className, {\n          [styles.badgeIconCustomTiny]: size === 'small',\n        }),\n        variant: variant === 'primary-filled' ? 'white' : variant,\n      });\n\n    return (\n      <Box\n        as=\"div\"\n        testId={testId}\n        display=\"inline-flex\"\n        className={cx(styles.badge({ variant, size }), className)}\n        {...otherProps}\n        ref={ref}\n      >\n        {startIcon && iconContent(startIcon)}\n        <Caption\n          fontWeight=\"fontWeightMedium\"\n          isTruncated\n          className={styles.badgeText({ textTransform })}\n        >\n          {children}\n        </Caption>\n        {endIcon && iconContent(endIcon)}\n      </Box>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n","import { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n  children: React.ReactElement;\n  /**\n   * Container element for Portal\n   */\n  container?: Document | HTMLElement;\n}\n\nexport function Portal({\n  children,\n  container: containerElement,\n}: PortalProps): React.ReactPortal | null {\n  const container = useRef<Document | HTMLElement | undefined>(\n    containerElement,\n  );\n  const portal = useRef<HTMLDivElement>(document.createElement('div'));\n\n  useEffect(() => {\n    if (!container.current) {\n      container.current = document.body;\n    }\n\n    const portalContainer = portal.current;\n    portalContainer.setAttribute('data-cf-ui-portal', '');\n    container.current.appendChild(portalContainer);\n\n    return () => {\n      if (container.current) {\n        container.current.removeChild(portalContainer);\n      }\n    };\n  }, []);\n\n  return portal.current ? createPortal(children, portal.current) : null;\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\nimport type { BadgeInternalProps } from './Badge';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n  switch (variant) {\n    case 'positive':\n      return {\n        color: tokens.green600,\n        backgroundColor: tokens.green200,\n      };\n    case 'primary':\n      return {\n        color: tokens.blue600,\n        backgroundColor: tokens.blue200,\n      };\n    case 'negative':\n      return {\n        color: tokens.red600,\n        backgroundColor: tokens.red200,\n      };\n    case 'warning':\n      return {\n        color: tokens.orange600,\n        backgroundColor: tokens.orange200,\n      };\n    case 'secondary':\n      return {\n        color: tokens.gray700,\n        backgroundColor: tokens.gray200,\n      };\n    case 'primary-filled':\n      return {\n        color: tokens.colorWhite,\n        backgroundColor: tokens.blue600,\n      };\n    case 'featured':\n      return {\n        color: tokens.purple600,\n        backgroundColor: tokens.purple200,\n      };\n    default:\n      return {};\n  }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n  switch (size) {\n    case 'small':\n      return {\n        padding: `0 ${tokens.spacing2Xs}`,\n        lineHeight: tokens.lineHeightS,\n        maxHeight: tokens.lineHeightS,\n      };\n    default:\n      return {\n        padding: `0 ${tokens.spacingXs}`,\n        lineHeight: tokens.lineHeightM,\n        maxHeight: tokens.lineHeightM,\n      };\n  }\n};\n\nexport const getBadgeStyles = () => ({\n  badge: ({ variant, size }: BadgeStylesProps) =>\n    css({\n      columnGap: tokens.spacing2Xs,\n      alignItems: 'center',\n      borderRadius: tokens.borderRadiusSmall,\n      overflow: 'hidden',\n      verticalAlign: 'middle',\n      ...variantToStyles({ variant }),\n      ...sizeToStyles({ size }),\n    }),\n  badgeIcon: css({\n    flexShrink: 0,\n  }),\n  badgeIconCustomTiny: css({\n    width: '0.875rem',\n    height: '0.875rem',\n  }),\n  badgeText: ({\n    textTransform,\n  }: {\n    textTransform: BadgeInternalProps['textTransform'];\n  }) =>\n    css([\n      {\n        color: 'currentcolor',\n        lineHeight: 'inherit',\n      },\n      textTransform !== 'none' && {\n        textTransform: 'lowercase',\n        '&::first-letter': {\n          textTransform: 'uppercase',\n        },\n      },\n    ]),\n});\n","import React from 'react';\nimport type {\n  EntityStatus,\n  ExpandProps,\n  PickUnion,\n} from '@contentful/f36-core';\nimport { ClockIcon } from '@contentful/f36-icons';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeSize, BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n  published: 'positive',\n  draft: 'warning',\n  archived: 'secondary',\n  changed: 'primary',\n  deleted: 'negative',\n  new: 'primary-filled',\n};\n\ntype BadgeSizeWithIsScheduledProp =\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size?: Exclude<BadgeSize, 'small'>;\n      /**\n       * Indicates that the entity that the badge is related to has a scheduled action\n       */\n      isScheduled?: boolean;\n    }\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size: PickUnion<BadgeSize, 'small'>;\n      // We use discriminative union typing, so in case the size is set as small we don't allow isScheduled\n      isScheduled?: never;\n    };\n\nexport type EntityStatusBadgeProps = Omit<\n  BadgeProps,\n  'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'\n> &\n  BadgeSizeWithIsScheduledProp & {\n    entityStatus: EntityStatus;\n  };\n\nfunction EntityStatusBadge(\n  props: EntityStatusBadgeProps,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    entityStatus,\n    isScheduled = undefined,\n    size = 'default',\n    ...otherProps\n  } = props;\n  const withClockIcon = isScheduled && size === 'default';\n  const variant = statusMap[entityStatus];\n\n  return (\n    <Badge\n      {...otherProps}\n      {...(withClockIcon\n        ? { size, startIcon: <ClockIcon testId=\"schedule-icon\" /> }\n        : { size })}\n      variant={variant}\n      ref={ref}\n    >\n      {entityStatus}\n    </Badge>\n  );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n  HTMLDivElement,\n  ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-badge",
-  "version": "4.65.0",
+  "version": "4.65.2",
   "description": "Forma 36: Badge React Component",
   "license": "MIT",
   "files": [
@@ -14,19 +14,19 @@
   "browserslist": "extends @contentful/browserslist-config",
   "repository": {
     "type": "git",
-    "url": "https://github.com/contentful/forma-36"
+    "url": "git+https://github.com/contentful/forma-36.git"
   },
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^4.65.0",
-    "@contentful/f36-icons": "^4.28.0",
+    "@contentful/f36-core": "^4.65.2",
+    "@contentful/f36-icons": "^4.28.1",
     "@contentful/f36-tokens": "^4.0.4",
     "emotion": "^10.0.17"
   },
   "devDependencies": {
-    "@contentful/f36-typography": "^4.65.0"
+    "@contentful/f36-typography": "^4.65.2"
   },
   "peerDependencies": {
     "react": ">=16.8",