@contentful/f36-badge 5.0.0 → 5.1.1

package/dist/esm/index.js

@@ -1,9 +1,12 @@
-import B from 'react';
+import g from 'react';
 import { cx, css } from 'emotion';
 import { Box } from '@contentful/f36-core';
-import r from '@contentful/f36-tokens';
+import o from '@contentful/f36-tokens';
+import 'react-dom';
+import { ClockIcon } from '@contentful/f36-icons';
 
-var P=Object.defineProperty,h=Object.defineProperties;var b=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var m=(e,t,a)=>t in e?P(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,i=(e,t)=>{for(var a in t||(t={}))u.call(t,a)&&m(e,a,t[a]);if(s)for(var a of s(t))y.call(t,a)&&m(e,a,t[a]);return e},d=(e,t)=>h(e,b(t));var p=(e,t)=>{var a={};for(var o in e)u.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&s)for(var o of s(e))t.indexOf(o)<0&&y.call(e,o)&&(a[o]=e[o]);return a};var C=({variant:e})=>{switch(e){case"positive":return {color:r.green600,backgroundColor:r.green200};case"primary":return {color:r.blue600,backgroundColor:r.blue200};case"negative":return {color:r.red600,backgroundColor:r.red200};case"warning":return {color:r.orange600,backgroundColor:r.orange200};case"secondary":return {color:r.gray700,backgroundColor:r.gray200};case"primary-filled":return {color:r.colorWhite,backgroundColor:r.blue600};case"featured":return {color:r.purple600,backgroundColor:r.purple200};default:return {}}},k=({size:e})=>{switch(e){case"small":return {padding:`3px ${r.spacing2Xs}`,fontSize:"0.625rem",lineHeight:"0.625rem",maxHeight:"16px"};default:return {padding:`0 ${r.spacingXs}`,fontSize:`calc(1rem * (12 / ${r.fontBaseDefault}))`,lineHeight:"20px",maxHeight:"20px"}}},f=({variant:e,size:t})=>css(i(i({fontFamily:r.fontStackPrimary,fontWeight:r.fontWeightDemiBold,textTransform:"uppercase",letterSpacing:"0.06rem",borderRadius:`${r.borderRadiusSmall}`,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",verticalAlign:"middle"},C({variant:e})),k({size:t})));var g=B.forwardRef((e,t)=>{let c=e,{children:a,variant:o="primary",size:l="default",testId:n="cf-ui-badge",className:E}=c,v=p(c,["children","variant","size","testId","className"]);return B.createElement(Box,d(i({as:"div",testId:n,display:"inline-block",className:cx(f({variant:o,size:l}),E)},v),{ref:t}),a)});g.displayName="Badge";var R={published:"positive",draft:"warning",archived:"negative",changed:"primary",deleted:"negative",new:"primary-filled"};function x(e,t){let n=e,{entityStatus:a}=n,o=p(n,["entityStatus"]),l=R[a];return B.createElement(g,d(i({},o),{variant:l,ref:t}),a)}x.displayName="EntityStatusBadge";var T=B.forwardRef(x);
+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 W=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))R.call(r,t)&&W(e,t,r[t]);if(b)for(var t of b(r))M.call(r,t)&&W(e,t,r[t]);return e},I=(e,r)=>te(e,re(r));var C=(e,r)=>{var t={};for(var n in e)R.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&b)for(var n of b(e))r.indexOf(n)<0&&M.call(e,n)&&(t[n]=e[n]);return t};var O=g.createContext("low"),S=()=>g.useContext(O);O.Provider;var ae=Object.defineProperty,oe=Object.defineProperties,ie=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,h=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(P)for(var t of P(r))V.call(r,t)&&L(e,t,r[t]);return e},u=(e,r)=>oe(e,ie(r)),y=(e,r)=>{var t={};for(var n in e)$.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&P)for(var n of P(e))r.indexOf(n)<0&&V.call(e,n)&&(t[n]=e[n]);return t},se="span";function le(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function de(){return css({wordBreak:"break-word"})}function j(e,r){let t=e,{fontSize:n="fontSizeM",fontStack:a="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:d="gray800",lineHeight:i="lineHeightM",letterSpacing:l="letterSpacingDefault",children:c,isTruncated:f,isWordBreak:k,as:v,className:x,margin:H="none"}=t,_=y(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]),Q=v||se;return g.createElement(Box,u(h({},_),{as:Q,className:cx(css({padding:0,fontFamily:o[a],fontWeight:o[s],color:o[d],fontSize:o[n],lineHeight:o[i],letterSpacing:o[l]}),f?le():null,k?de():null,x),margin:H,ref:r}),c)}j.displayName="Text";var B=g.forwardRef(j),ce="span";function A(e,r){var t=e,{children:n,fontWeight:a="fontWeightNormal",testId:s="cf-ui-caption",as:d,fontColor:i="gray900"}=t,l=y(t,["children","fontWeight","testId","as","fontColor"]);let c=S();return g.createElement(B,u(h({as:d||ce,testId:s,fontSize:c==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:c==="high"?"lineHeightSHigh":"lineHeightS",fontColor:i,fontWeight:a},l),{ref:r}),n)}A.displayName="Caption";var F=g.forwardRef(A),ge="h1";function G(e,r){var t=e,{children:n,testId:a="cf-ui-heading",as:s,fontColor:d="gray900",marginBottom:i="spacingM"}=t,l=y(t,["children","testId","as","fontColor","marginBottom"]);let c=S();return g.createElement(B,u(h({as:s||ge,testId:a,marginBottom:i,fontWeight:"fontWeightDemiBold",fontColor:d,fontSize:c==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:c==="high"?"lineHeightXlHigh":"lineHeightXl"},l),{ref:r}),n)}G.displayName="Heading";g.forwardRef(G);var fe="h3";function U(e,r){var t=e,{children:n,testId:a="cf-ui-subheading",as:s,fontColor:d="gray900"}=t,i=y(t,["children","testId","as","fontColor"]);let l=S();return g.createElement(B,u(h({as:s||fe,testId:a,marginBottom:"spacingM",fontSize:l==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:l==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:d},i),{ref:r}),n)}U.displayName="Subheading";g.forwardRef(U);var pe="h2";function q(e,r){var t=e,{children:n,size:a="default",testId:s="cf-ui-display-text",as:d,fontColor:i="gray900"}=t,l=y(t,["children","size","testId","as","fontColor"]);let c="fontSize2Xl",f="lineHeightXl";return a==="large"&&(c="fontSize3Xl",f="lineHeight3Xl"),g.createElement(B,u(h({as:d||pe,testId:s,marginBottom:a==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:f,fontColor:i,fontWeight:"fontWeightDemiBold"},l),{ref:r}),n)}q.displayName="DisplayText";g.forwardRef(q);var me="h2";function J(e,r){var t=e,{children:n,className:a,testId:s="cf-ui-section-heading",as:d,fontColor:i="gray600",marginBottom:l="spacingL"}=t,c=y(t,["children","className","testId","as","fontColor","marginBottom"]);let f=S();return g.createElement(B,u(h({as:d||me,testId:s,marginBottom:l,fontWeight:"fontWeightMedium",fontColor:i,fontSize:f==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:f==="high"?"lineHeightSHigh":"lineHeightS",className:cx(css({letterSpacing:o.letterSpacingDefault}),a)},c),{ref:r}),n)}J.displayName="SectionHeading";g.forwardRef(J);var he=g.forwardRef((e,r)=>{var t=e,{children:n,testId:a="cf-ui-paragraph",marginBottom:s="spacingM"}=t,d=y(t,["children","testId","marginBottom"]);let i=S();return g.createElement(B,u(h({as:"p",testId:a,fontSize:i==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:i==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:s},d),{ref:r}),n)});he.displayName="Paragraph";var ue=({variant:e})=>{switch(e){case"positive":return {color:o.green600,backgroundColor:o.green200};case"primary":return {color:o.blue600,backgroundColor:o.blue200};case"negative":return {color:o.red600,backgroundColor:o.red200};case"warning":return {color:o.orange600,backgroundColor:o.orange200};case"secondary":return {color:o.gray700,backgroundColor:o.gray200};case"primary-filled":return {color:o.colorWhite,backgroundColor:o.blue600};case"featured":return {color:o.purple600,backgroundColor:o.purple200};default:return {}}},ye=({size:e})=>{switch(e){case"small":return {padding:`0 ${o.spacing2Xs}`,lineHeight:o.lineHeightS,maxHeight:o.lineHeightS};default:return {padding:`0 ${o.spacingXs}`,lineHeight:o.lineHeightM,maxHeight:o.lineHeightM}}},K=()=>({badge:({variant:e,size:r})=>css(p(p({columnGap:o.spacing2Xs,alignItems:"center",borderRadius:o.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},ue({variant:e})),ye({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 T=g.forwardRef((e,r)=>{let t=K(),x=e,{children:n,variant:a="primary",size:s="default",testId:d="cf-ui-badge",startIcon:i,endIcon:l,className:c,textTransform:f=void 0}=x,k=C(x,["children","variant","size","testId","startIcon","endIcon","className","textTransform"]),v=H=>g.cloneElement(H,{size:"tiny",className:cx(t.badgeIcon,H.props.className,{[t.badgeIconCustomTiny]:s==="small"}),variant:a==="primary-filled"?"white":a});return g.createElement(Box,I(p({as:"div",testId:d,display:"inline-flex",className:cx(t.badge({variant:a,size:s}),c)},k),{ref:r}),i&&v(i),g.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText({textTransform:f})},n),l&&v(l))});T.displayName="Badge";var ve={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function Z(e,r){let l=e,{entityStatus:t,isScheduled:n=void 0,size:a="default"}=l,s=C(l,["entityStatus","isScheduled","size"]),d=n&&a==="default",i=ve[t];return g.createElement(T,I(p(p({},s),d?{size:a,startIcon:g.createElement(ClockIcon,{testId:"schedule-icon"})}:{size:a}),{variant:i,ref:r}),t)}Z.displayName="EntityStatusBadge";var xe=g.forwardRef(Z);
 
-export { g as Badge, T as EntityStatusBadge };
+export { T as Badge, xe 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","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","Badge","props","ref","_a","children","testId","className","otherProps","__objRest","__spreadProps","statusMap","EntityStatusBadge","entityStatus","_EntityStatusBadge"],"mappings":"+kBAAA,OAAOA,MAAW,QAClB,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,MAIK,uBCPP,OAAOC,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAIpB,IAAMC,EAAkB,CAAC,CAAE,QAAAC,CAAQ,IAA4C,CAC7E,OAAQA,OACD,WACH,MAAO,CACL,MAAOH,EAAO,SACd,gBAAiBA,EAAO,QAC1B,MACG,UACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,MACG,WACH,MAAO,CACL,MAAOA,EAAO,OACd,gBAAiBA,EAAO,MAC1B,MACG,UACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,MACG,YACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,MACG,iBACH,MAAO,CACL,MAAOA,EAAO,WACd,gBAAiBA,EAAO,OAC1B,MACG,WACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,UAEA,MAAO,CAAC,EAEd,EAEMI,EAAe,CAAC,CAAE,KAAAC,CAAK,IAAsC,CACjE,OAAQA,OACD,QACH,MAAO,CACL,QAAS,OAAOL,EAAO,aACvB,SAAU,WACV,WAAY,WACZ,UAAW,MACb,UAEA,MAAO,CACL,QAAS,KAAKA,EAAO,YACrB,SAAU,qBAAqBA,EAAO,oBACtC,WAAY,OACZ,UAAW,MACb,EAEN,EAEaM,EAAiB,CAAC,CAC7B,QAAAH,EACA,KAAAE,CACF,IAISJ,EAAIM,IAAA,CACT,WAAYP,EAAO,iBACnB,WAAYA,EAAO,mBAEnB,cAAe,YACf,cACE,UACF,aAAc,GAAGA,EAAO,oBACxB,WAAY,SACZ,SAAU,SACV,aAAc,WACd,cAAe,UACZE,EAAgB,CAAE,QAAAC,CAAQ,CAAC,GAC3BC,EAAa,CAAE,KAAAC,CAAK,CAAC,EACzB,ED1DI,IAAMG,EAAQX,EAAM,WACzB,CAACY,EAAOC,IAAQ,CACd,IAOIC,EAAAF,EANF,UAAAG,EACA,QAAAT,EAAU,UACV,KAAAE,EAAO,UACP,OAAAQ,EAAS,cACT,UAAAC,CApCN,EAsCQH,EADCI,EAAAC,EACDL,EADC,CALH,WACA,UACA,OACA,SACA,cAIF,OACEd,EAAA,cAACE,EAAAkB,EAAAV,EAAA,CACC,GAAG,MACH,OAAQM,EACR,QAAQ,eACR,UAAWf,EAAGQ,EAAe,CAAE,QAAAH,EAAS,KAAAE,CAAK,CAAC,EAAGS,CAAS,GACtDC,GALL,CAMC,IAAKL,IAEJE,CACH,CAEJ,CACF,EAEAJ,EAAM,YAAc,QEvDpB,OAAOX,MAAW,QAMlB,IAAMqB,EAAqD,CACzD,UAAW,WACX,MAAO,UACP,SAAU,WACV,QAAS,UACT,QAAS,WACT,IAAK,gBACP,EAQA,SAASC,EACPV,EACAC,EACA,CACA,IAAwCC,EAAAF,EAAhC,cAAAW,CAzBV,EAyB0CT,EAAfI,EAAAC,EAAeL,EAAf,CAAjB,iBACFR,EAAUe,EAAUE,GAC1B,OACEvB,EAAA,cAACW,EAAAS,EAAAV,EAAA,GAAUQ,GAAV,CAAsB,QAASZ,EAAS,IAAKO,IAC3CU,CACH,CAEJ,CAEAD,EAAkB,YAAc,oBAEhC,IAAME,EAAqBxB,EAAM,WAG/BsB,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';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport interface BadgeInternalProps extends CommonProps {\n  /**\n   * Sets the size of the component\n   * @default default\n   */\n  size?: BadgeSize;\n  /**\n   * Determines the variation of the component\n   * @default primary\n   */\n  variant?: BadgeVariant;\n\n  children: React.ReactNode;\n}\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n  (props, ref) => {\n    const {\n      children,\n      variant = 'primary',\n      size = 'default',\n      testId = 'cf-ui-badge',\n      className,\n      ...otherProps\n    } = props;\n\n    return (\n      <Box\n        as=\"div\"\n        testId={testId}\n        display=\"inline-block\"\n        className={cx(getBadgeStyles({ variant, size }), className)}\n        {...otherProps}\n        ref={ref}\n      >\n        {children}\n      </Box>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\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: `3px ${tokens.spacing2Xs}`,\n        fontSize: '0.625rem',\n        lineHeight: '0.625rem',\n        maxHeight: '16px',\n      };\n    default:\n      return {\n        padding: `0 ${tokens.spacingXs}`,\n        fontSize: `calc(1rem * (12 / ${tokens.fontBaseDefault}))`,\n        lineHeight: '20px',\n        maxHeight: '20px',\n      };\n  }\n};\n\nexport const getBadgeStyles = ({\n  variant,\n  size,\n}: {\n  variant: BadgeVariant;\n  size: BadgeSize;\n}) => {\n  return css({\n    fontFamily: tokens.fontStackPrimary,\n    fontWeight: tokens.fontWeightDemiBold,\n\n    textTransform: 'uppercase',\n    letterSpacing:\n      '0.06rem' /*move to tokens or update wide letter spacing token*/,\n    borderRadius: `${tokens.borderRadiusSmall}`,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    verticalAlign: 'middle',\n    ...variantToStyles({ variant }),\n    ...sizeToStyles({ size }),\n  });\n};\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant, BadgeSize } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n  published: 'positive',\n  draft: 'warning',\n  archived: 'negative',\n  changed: 'primary',\n  deleted: 'negative',\n  new: 'primary-filled',\n};\n\nexport interface EntityStatusBadgeProps\n  extends Omit<BadgeProps, 'variant' | 'children'> {\n  size?: BadgeSize;\n  entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n  props: EntityStatusBadgeProps,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const { entityStatus, ...otherProps } = props;\n  const variant = statusMap[entityStatus];\n  return (\n    <Badge {...otherProps} variant={variant} ref={ref}>\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","I","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 { BadgeInternalProps } from './Badge';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }) => {\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 }) => {\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

@@ -0,0 +1,91 @@
+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';
+
+declare type BadgeInternalProps = CommonProps & {
+    /**
+     * Determines the variation of the component
+     * @default primary
+     */
+    variant?: BadgeVariant;
+    children: React.ReactNode;
+    /**
+     * Sets the size of the component
+     * @default default
+     */
+    size?: BadgeSize;
+    /**
+     * Expects any of the icon components. Renders the icon aligned to the start
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Expects any of the icon components. Renders the icon aligned to the end
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * 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?: 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 & {
+    /**
+     * Determines the variation of the component
+     * @default primary
+     */
+    variant?: BadgeVariant;
+    children: React.ReactNode;
+    /**
+     * Sets the size of the component
+     * @default default
+     */
+    size?: BadgeSize;
+    /**
+     * Expects any of the icon components. Renders the icon aligned to the start
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Expects any of the icon components. Renders the icon aligned to the end
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * 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?: Extract<CSS.Property.TextTransform, 'none'> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare type BadgeSizeWithIsScheduledProp = {
+    /**
+     * Sets the size of the component
+     * @default default
+     */
+    size?: Exclude<BadgeSize, 'small'>;
+    /**
+     * Indicates that the entity that the badge is related to has a scheduled action
+     */
+    isScheduled?: boolean;
+} | {
+    /**
+     * Sets the size of the component
+     * @default default
+     */
+    size: PickUnion<BadgeSize, 'small'>;
+    isScheduled?: never;
+};
+declare type EntityStatusBadgeProps = Omit<BadgeProps, 'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'> & BadgeSizeWithIsScheduledProp & {
+    entityStatus: EntityStatus;
+};
+declare const _EntityStatusBadge: React.ForwardRefExoticComponent<EntityStatusBadgeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Badge, BadgeProps, BadgeVariant, _EntityStatusBadge as EntityStatusBadge, EntityStatusBadgeProps };

package/dist/index.d.ts

@@ -1,29 +1,91 @@
 import React from 'react';
-import { PropsWithHTMLElement, CommonProps, EntityStatus } from '@contentful/f36-core';
+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';
 
-interface BadgeInternalProps extends CommonProps {
+declare type BadgeInternalProps = CommonProps & {
+    /**
+     * Determines the variation of the component
+     * @default primary
+     */
+    variant?: BadgeVariant;
+    children: React.ReactNode;
     /**
      * Sets the size of the component
      * @default default
      */
     size?: BadgeSize;
+    /**
+     * Expects any of the icon components. Renders the icon aligned to the start
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Expects any of the icon components. Renders the icon aligned to the end
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * 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?: 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 & {
     /**
      * Determines the variation of the component
      * @default primary
      */
     variant?: BadgeVariant;
     children: React.ReactNode;
-}
-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>, keyof BadgeInternalProps> & BadgeInternalProps & React.RefAttributes<HTMLDivElement>>;
-
-interface EntityStatusBadgeProps extends Omit<BadgeProps, 'variant' | 'children'> {
+    /**
+     * Sets the size of the component
+     * @default default
+     */
     size?: BadgeSize;
+    /**
+     * Expects any of the icon components. Renders the icon aligned to the start
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Expects any of the icon components. Renders the icon aligned to the end
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * 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?: Extract<CSS.Property.TextTransform, 'none'> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare type BadgeSizeWithIsScheduledProp = {
+    /**
+     * Sets the size of the component
+     * @default default
+     */
+    size?: Exclude<BadgeSize, 'small'>;
+    /**
+     * Indicates that the entity that the badge is related to has a scheduled action
+     */
+    isScheduled?: boolean;
+} | {
+    /**
+     * Sets the size of the component
+     * @default default
+     */
+    size: PickUnion<BadgeSize, 'small'>;
+    isScheduled?: never;
+};
+declare type EntityStatusBadgeProps = Omit<BadgeProps, 'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'> & BadgeSizeWithIsScheduledProp & {
     entityStatus: EntityStatus;
-}
+};
 declare const _EntityStatusBadge: React.ForwardRefExoticComponent<EntityStatusBadgeProps & React.RefAttributes<HTMLDivElement>>;
 
 export { Badge, BadgeProps, BadgeVariant, _EntityStatusBadge as EntityStatusBadge, EntityStatusBadgeProps };

package/dist/index.js

@@ -1,19 +1,20 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var B = require('react');
+var g = require('react');
 var emotion = require('emotion');
 var f36Core = require('@contentful/f36-core');
-var r = require('@contentful/f36-tokens');
+var o = require('@contentful/f36-tokens');
+require('react-dom');
+var f36Icons = require('@contentful/f36-icons');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var B__default = /*#__PURE__*/_interopDefaultLegacy(B);
-var r__default = /*#__PURE__*/_interopDefaultLegacy(r);
+var g__default = /*#__PURE__*/_interopDefault(g);
+var o__default = /*#__PURE__*/_interopDefault(o);
 
-var P=Object.defineProperty,h=Object.defineProperties;var b=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var m=(e,t,a)=>t in e?P(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,i=(e,t)=>{for(var a in t||(t={}))u.call(t,a)&&m(e,a,t[a]);if(s)for(var a of s(t))y.call(t,a)&&m(e,a,t[a]);return e},d=(e,t)=>h(e,b(t));var p=(e,t)=>{var a={};for(var o in e)u.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&s)for(var o of s(e))t.indexOf(o)<0&&y.call(e,o)&&(a[o]=e[o]);return a};var C=({variant:e})=>{switch(e){case"positive":return {color:r__default["default"].green600,backgroundColor:r__default["default"].green200};case"primary":return {color:r__default["default"].blue600,backgroundColor:r__default["default"].blue200};case"negative":return {color:r__default["default"].red600,backgroundColor:r__default["default"].red200};case"warning":return {color:r__default["default"].orange600,backgroundColor:r__default["default"].orange200};case"secondary":return {color:r__default["default"].gray700,backgroundColor:r__default["default"].gray200};case"primary-filled":return {color:r__default["default"].colorWhite,backgroundColor:r__default["default"].blue600};case"featured":return {color:r__default["default"].purple600,backgroundColor:r__default["default"].purple200};default:return {}}},k=({size:e})=>{switch(e){case"small":return {padding:`3px ${r__default["default"].spacing2Xs}`,fontSize:"0.625rem",lineHeight:"0.625rem",maxHeight:"16px"};default:return {padding:`0 ${r__default["default"].spacingXs}`,fontSize:`calc(1rem * (12 / ${r__default["default"].fontBaseDefault}))`,lineHeight:"20px",maxHeight:"20px"}}},f=({variant:e,size:t})=>emotion.css(i(i({fontFamily:r__default["default"].fontStackPrimary,fontWeight:r__default["default"].fontWeightDemiBold,textTransform:"uppercase",letterSpacing:"0.06rem",borderRadius:`${r__default["default"].borderRadiusSmall}`,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",verticalAlign:"middle"},C({variant:e})),k({size:t})));var g=B__default["default"].forwardRef((e,t)=>{let c=e,{children:a,variant:o="primary",size:l="default",testId:n="cf-ui-badge",className:E}=c,v=p(c,["children","variant","size","testId","className"]);return B__default["default"].createElement(f36Core.Box,d(i({as:"div",testId:n,display:"inline-block",className:emotion.cx(f({variant:o,size:l}),E)},v),{ref:t}),a)});g.displayName="Badge";var R={published:"positive",draft:"warning",archived:"negative",changed:"primary",deleted:"negative",new:"primary-filled"};function x(e,t){let n=e,{entityStatus:a}=n,o=p(n,["entityStatus"]),l=R[a];return B__default["default"].createElement(g,d(i({},o),{variant:l,ref:t}),a)}x.displayName="EntityStatusBadge";var T=B__default["default"].forwardRef(x);
+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 W=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))R.call(r,t)&&W(e,t,r[t]);if(b)for(var t of b(r))M.call(r,t)&&W(e,t,r[t]);return e},I=(e,r)=>te(e,re(r));var C=(e,r)=>{var t={};for(var n in e)R.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&b)for(var n of b(e))r.indexOf(n)<0&&M.call(e,n)&&(t[n]=e[n]);return t};var O=g__default.default.createContext("low"),S=()=>g__default.default.useContext(O);O.Provider;var ae=Object.defineProperty,oe=Object.defineProperties,ie=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,h=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(P)for(var t of P(r))V.call(r,t)&&L(e,t,r[t]);return e},u=(e,r)=>oe(e,ie(r)),y=(e,r)=>{var t={};for(var n in e)$.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&P)for(var n of P(e))r.indexOf(n)<0&&V.call(e,n)&&(t[n]=e[n]);return t},se="span";function le(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function de(){return emotion.css({wordBreak:"break-word"})}function j(e,r){let t=e,{fontSize:n="fontSizeM",fontStack:a="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:d="gray800",lineHeight:i="lineHeightM",letterSpacing:l="letterSpacingDefault",children:c,isTruncated:f,isWordBreak:k,as:v,className:x,margin:H="none"}=t,_=y(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]),Q=v||se;return g__default.default.createElement(f36Core.Box,u(h({},_),{as:Q,className:emotion.cx(emotion.css({padding:0,fontFamily:o__default.default[a],fontWeight:o__default.default[s],color:o__default.default[d],fontSize:o__default.default[n],lineHeight:o__default.default[i],letterSpacing:o__default.default[l]}),f?le():null,k?de():null,x),margin:H,ref:r}),c)}j.displayName="Text";var B=g__default.default.forwardRef(j),ce="span";function A(e,r){var t=e,{children:n,fontWeight:a="fontWeightNormal",testId:s="cf-ui-caption",as:d,fontColor:i="gray900"}=t,l=y(t,["children","fontWeight","testId","as","fontColor"]);let c=S();return g__default.default.createElement(B,u(h({as:d||ce,testId:s,fontSize:c==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:c==="high"?"lineHeightSHigh":"lineHeightS",fontColor:i,fontWeight:a},l),{ref:r}),n)}A.displayName="Caption";var F=g__default.default.forwardRef(A),ge="h1";function G(e,r){var t=e,{children:n,testId:a="cf-ui-heading",as:s,fontColor:d="gray900",marginBottom:i="spacingM"}=t,l=y(t,["children","testId","as","fontColor","marginBottom"]);let c=S();return g__default.default.createElement(B,u(h({as:s||ge,testId:a,marginBottom:i,fontWeight:"fontWeightDemiBold",fontColor:d,fontSize:c==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:c==="high"?"lineHeightXlHigh":"lineHeightXl"},l),{ref:r}),n)}G.displayName="Heading";g__default.default.forwardRef(G);var fe="h3";function U(e,r){var t=e,{children:n,testId:a="cf-ui-subheading",as:s,fontColor:d="gray900"}=t,i=y(t,["children","testId","as","fontColor"]);let l=S();return g__default.default.createElement(B,u(h({as:s||fe,testId:a,marginBottom:"spacingM",fontSize:l==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:l==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:d},i),{ref:r}),n)}U.displayName="Subheading";g__default.default.forwardRef(U);var pe="h2";function q(e,r){var t=e,{children:n,size:a="default",testId:s="cf-ui-display-text",as:d,fontColor:i="gray900"}=t,l=y(t,["children","size","testId","as","fontColor"]);let c="fontSize2Xl",f="lineHeightXl";return a==="large"&&(c="fontSize3Xl",f="lineHeight3Xl"),g__default.default.createElement(B,u(h({as:d||pe,testId:s,marginBottom:a==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:f,fontColor:i,fontWeight:"fontWeightDemiBold"},l),{ref:r}),n)}q.displayName="DisplayText";g__default.default.forwardRef(q);var me="h2";function J(e,r){var t=e,{children:n,className:a,testId:s="cf-ui-section-heading",as:d,fontColor:i="gray600",marginBottom:l="spacingL"}=t,c=y(t,["children","className","testId","as","fontColor","marginBottom"]);let f=S();return g__default.default.createElement(B,u(h({as:d||me,testId:s,marginBottom:l,fontWeight:"fontWeightMedium",fontColor:i,fontSize:f==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:f==="high"?"lineHeightSHigh":"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:o__default.default.letterSpacingDefault}),a)},c),{ref:r}),n)}J.displayName="SectionHeading";g__default.default.forwardRef(J);var he=g__default.default.forwardRef((e,r)=>{var t=e,{children:n,testId:a="cf-ui-paragraph",marginBottom:s="spacingM"}=t,d=y(t,["children","testId","marginBottom"]);let i=S();return g__default.default.createElement(B,u(h({as:"p",testId:a,fontSize:i==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:i==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:s},d),{ref:r}),n)});he.displayName="Paragraph";var ue=({variant:e})=>{switch(e){case"positive":return {color:o__default.default.green600,backgroundColor:o__default.default.green200};case"primary":return {color:o__default.default.blue600,backgroundColor:o__default.default.blue200};case"negative":return {color:o__default.default.red600,backgroundColor:o__default.default.red200};case"warning":return {color:o__default.default.orange600,backgroundColor:o__default.default.orange200};case"secondary":return {color:o__default.default.gray700,backgroundColor:o__default.default.gray200};case"primary-filled":return {color:o__default.default.colorWhite,backgroundColor:o__default.default.blue600};case"featured":return {color:o__default.default.purple600,backgroundColor:o__default.default.purple200};default:return {}}},ye=({size:e})=>{switch(e){case"small":return {padding:`0 ${o__default.default.spacing2Xs}`,lineHeight:o__default.default.lineHeightS,maxHeight:o__default.default.lineHeightS};default:return {padding:`0 ${o__default.default.spacingXs}`,lineHeight:o__default.default.lineHeightM,maxHeight:o__default.default.lineHeightM}}},K=()=>({badge:({variant:e,size:r})=>emotion.css(p(p({columnGap:o__default.default.spacing2Xs,alignItems:"center",borderRadius:o__default.default.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},ue({variant:e})),ye({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 T=g__default.default.forwardRef((e,r)=>{let t=K(),x=e,{children:n,variant:a="primary",size:s="default",testId:d="cf-ui-badge",startIcon:i,endIcon:l,className:c,textTransform:f=void 0}=x,k=C(x,["children","variant","size","testId","startIcon","endIcon","className","textTransform"]),v=H=>g__default.default.cloneElement(H,{size:"tiny",className:emotion.cx(t.badgeIcon,H.props.className,{[t.badgeIconCustomTiny]:s==="small"}),variant:a==="primary-filled"?"white":a});return g__default.default.createElement(f36Core.Box,I(p({as:"div",testId:d,display:"inline-flex",className:emotion.cx(t.badge({variant:a,size:s}),c)},k),{ref:r}),i&&v(i),g__default.default.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText({textTransform:f})},n),l&&v(l))});T.displayName="Badge";var ve={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function Z(e,r){let l=e,{entityStatus:t,isScheduled:n=void 0,size:a="default"}=l,s=C(l,["entityStatus","isScheduled","size"]),d=n&&a==="default",i=ve[t];return g__default.default.createElement(T,I(p(p({},s),d?{size:a,startIcon:g__default.default.createElement(f36Icons.ClockIcon,{testId:"schedule-icon"})}:{size:a}),{variant:i,ref:r}),t)}Z.displayName="EntityStatusBadge";var xe=g__default.default.forwardRef(Z);
 
-exports.Badge = g;
-exports.EntityStatusBadge = T;
+exports.Badge = T;
+exports.EntityStatusBadge = xe;
+//# 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","../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","Badge","props","ref","_a","children","testId","className","otherProps","__objRest","__spreadProps","statusMap","EntityStatusBadge","entityStatus","_EntityStatusBadge"],"mappings":"+kBAAA,OAAOA,MAAW,QAClB,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,MAIK,uBCPP,OAAOC,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAIpB,IAAMC,EAAkB,CAAC,CAAE,QAAAC,CAAQ,IAA4C,CAC7E,OAAQA,OACD,WACH,MAAO,CACL,MAAOH,EAAO,SACd,gBAAiBA,EAAO,QAC1B,MACG,UACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,MACG,WACH,MAAO,CACL,MAAOA,EAAO,OACd,gBAAiBA,EAAO,MAC1B,MACG,UACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,MACG,YACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,MACG,iBACH,MAAO,CACL,MAAOA,EAAO,WACd,gBAAiBA,EAAO,OAC1B,MACG,WACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,UAEA,MAAO,CAAC,EAEd,EAEMI,EAAe,CAAC,CAAE,KAAAC,CAAK,IAAsC,CACjE,OAAQA,OACD,QACH,MAAO,CACL,QAAS,OAAOL,EAAO,aACvB,SAAU,WACV,WAAY,WACZ,UAAW,MACb,UAEA,MAAO,CACL,QAAS,KAAKA,EAAO,YACrB,SAAU,qBAAqBA,EAAO,oBACtC,WAAY,OACZ,UAAW,MACb,EAEN,EAEaM,EAAiB,CAAC,CAC7B,QAAAH,EACA,KAAAE,CACF,IAISJ,EAAIM,IAAA,CACT,WAAYP,EAAO,iBACnB,WAAYA,EAAO,mBAEnB,cAAe,YACf,cACE,UACF,aAAc,GAAGA,EAAO,oBACxB,WAAY,SACZ,SAAU,SACV,aAAc,WACd,cAAe,UACZE,EAAgB,CAAE,QAAAC,CAAQ,CAAC,GAC3BC,EAAa,CAAE,KAAAC,CAAK,CAAC,EACzB,ED1DI,IAAMG,EAAQX,EAAM,WACzB,CAACY,EAAOC,IAAQ,CACd,IAOIC,EAAAF,EANF,UAAAG,EACA,QAAAT,EAAU,UACV,KAAAE,EAAO,UACP,OAAAQ,EAAS,cACT,UAAAC,CApCN,EAsCQH,EADCI,EAAAC,EACDL,EADC,CALH,WACA,UACA,OACA,SACA,cAIF,OACEd,EAAA,cAACE,EAAAkB,EAAAV,EAAA,CACC,GAAG,MACH,OAAQM,EACR,QAAQ,eACR,UAAWf,EAAGQ,EAAe,CAAE,QAAAH,EAAS,KAAAE,CAAK,CAAC,EAAGS,CAAS,GACtDC,GALL,CAMC,IAAKL,IAEJE,CACH,CAEJ,CACF,EAEAJ,EAAM,YAAc,QEvDpB,OAAOX,MAAW,QAMlB,IAAMqB,EAAqD,CACzD,UAAW,WACX,MAAO,UACP,SAAU,WACV,QAAS,UACT,QAAS,WACT,IAAK,gBACP,EAQA,SAASC,EACPV,EACAC,EACA,CACA,IAAwCC,EAAAF,EAAhC,cAAAW,CAzBV,EAyB0CT,EAAfI,EAAAC,EAAeL,EAAf,CAAjB,iBACFR,EAAUe,EAAUE,GAC1B,OACEvB,EAAA,cAACW,EAAAS,EAAAV,EAAA,GAAUQ,GAAV,CAAsB,QAASZ,EAAS,IAAKO,IAC3CU,CACH,CAEJ,CAEAD,EAAkB,YAAc,oBAEhC,IAAME,EAAqBxB,EAAM,WAG/BsB,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';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport interface BadgeInternalProps extends CommonProps {\n  /**\n   * Sets the size of the component\n   * @default default\n   */\n  size?: BadgeSize;\n  /**\n   * Determines the variation of the component\n   * @default primary\n   */\n  variant?: BadgeVariant;\n\n  children: React.ReactNode;\n}\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n  (props, ref) => {\n    const {\n      children,\n      variant = 'primary',\n      size = 'default',\n      testId = 'cf-ui-badge',\n      className,\n      ...otherProps\n    } = props;\n\n    return (\n      <Box\n        as=\"div\"\n        testId={testId}\n        display=\"inline-block\"\n        className={cx(getBadgeStyles({ variant, size }), className)}\n        {...otherProps}\n        ref={ref}\n      >\n        {children}\n      </Box>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\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: `3px ${tokens.spacing2Xs}`,\n        fontSize: '0.625rem',\n        lineHeight: '0.625rem',\n        maxHeight: '16px',\n      };\n    default:\n      return {\n        padding: `0 ${tokens.spacingXs}`,\n        fontSize: `calc(1rem * (12 / ${tokens.fontBaseDefault}))`,\n        lineHeight: '20px',\n        maxHeight: '20px',\n      };\n  }\n};\n\nexport const getBadgeStyles = ({\n  variant,\n  size,\n}: {\n  variant: BadgeVariant;\n  size: BadgeSize;\n}) => {\n  return css({\n    fontFamily: tokens.fontStackPrimary,\n    fontWeight: tokens.fontWeightDemiBold,\n\n    textTransform: 'uppercase',\n    letterSpacing:\n      '0.06rem' /*move to tokens or update wide letter spacing token*/,\n    borderRadius: `${tokens.borderRadiusSmall}`,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    verticalAlign: 'middle',\n    ...variantToStyles({ variant }),\n    ...sizeToStyles({ size }),\n  });\n};\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant, BadgeSize } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n  published: 'positive',\n  draft: 'warning',\n  archived: 'negative',\n  changed: 'primary',\n  deleted: 'negative',\n  new: 'primary-filled',\n};\n\nexport interface EntityStatusBadgeProps\n  extends Omit<BadgeProps, 'variant' | 'children'> {\n  size?: BadgeSize;\n  entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n  props: EntityStatusBadgeProps,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const { entityStatus, ...otherProps } = props;\n  const variant = statusMap[entityStatus];\n  return (\n    <Badge {...otherProps} variant={variant} ref={ref}>\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","I","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 { BadgeInternalProps } from './Badge';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }) => {\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 }) => {\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": "5.0.0",
+  "version": "5.1.1",
   "description": "Forma 36: Badge React Component",
   "license": "MIT",
   "files": [
@@ -14,23 +14,26 @@
   "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": "^5.0.0",
-    "@contentful/f36-tokens": "^4.0.1",
+    "@contentful/f36-core": "^5.1.1",
+    "@contentful/f36-icons": "^5.1.1",
+    "@contentful/f36-tokens": "^5.1.0",
     "emotion": "^10.0.17"
   },
   "devDependencies": {
-    "@contentful/f36-typography": "^5.0.0"
+    "@contentful/f36-typography": "^5.1.1"
   },
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "publishConfig": {
+    "registry": "https://npm.pkg.github.com/",
     "access": "public"
   }
 }