@contentful/f36-badge 4.55.0 → 4.56.0

package/dist/esm/index.js

@@ -1,11 +1,11 @@
 import s from 'react';
 import { cx, css } from 'emotion';
 import { Box } from '@contentful/f36-core';
-import i from '@contentful/f36-tokens';
+import n from '@contentful/f36-tokens';
 import { ClockIcon } from '@contentful/f36-icons';
 
-var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var N=(e,r,t)=>r in e?Y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))k.call(r,t)&&N(e,t,r[t]);if(v)for(var t of v(r))T.call(r,t)&&N(e,t,r[t]);return e},I=(e,r)=>Z(e,K(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&&v)for(var a of v(e))r.indexOf(a)<0&&T.call(e,a)&&(t[a]=e[a]);return t};var Q=({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 {}}},ee=({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}}},O=()=>({badge:({variant:e,size:r})=>css(p(p({columnGap:i.spacing2Xs,alignItems:"center",borderRadius:i.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Q({variant:e})),ee({size:r}))),badgeIcon:css({flexShrink:0}),badgeText:css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var ae=Object.defineProperty,ne=Object.defineProperties,ie=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertySymbols,X=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,R=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))X.call(r,t)&&R(e,t,r[t]);if(b)for(var t of b(r))j.call(r,t)&&R(e,t,r[t]);return e},f=(e,r)=>ne(e,ie(r)),m=(e,r)=>{var t={};for(var a in e)X.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&&j.call(e,a)&&(t[a]=e[a]);return t},oe="span";function se(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function le(){return css({wordBreak:"break-word"})}function D(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:o="fontWeightNormal",fontColor:l="gray800",lineHeight:c="lineHeightM",children:d,isTruncated:H,isWordBreak:w,as:y,className:S,margin:B="none"}=t,A=m(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let J=y||oe;return s.createElement(Box,f(g({},A),{as:J,className:cx(css({padding:0,fontFamily:i[n],fontWeight:i[o],color:i[l],fontSize:i[a],lineHeight:i[c]}),H?se():null,w?le():null,S),margin:B,ref:r}),d)}D.displayName="Text";var h=s.forwardRef(D),de="span";function L(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:o="cf-ui-caption"}=t,l=m(t,["children","fontWeight","testId"]);return s.createElement(h,f(g({as:de,testId:o,fontSize:"fontSizeS",lineHeight:"lineHeightS",fontColor:"gray900",fontWeight:n},l),{ref:r}),a)}L.displayName="Caption";var V=s.forwardRef(L),ce="h1";function U(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(g({as:ce,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o),{ref:r}),a)}U.displayName="Heading";s.forwardRef(U);var pe="h3";function F(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(g({as:pe,testId:n,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o),{ref:r}),a)}F.displayName="Subheading";s.forwardRef(F);var fe="h2";function $(e,r){var t=e,{children:a,size:n="default",testId:o="cf-ui-display-text"}=t,l=m(t,["children","size","testId"]);let c="fontSize2Xl",d="lineHeight2Xl";return n==="large"&&(c="fontSize3Xl",d="lineHeight3Xl"),s.createElement(h,f(g({as:fe,testId:o,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},l),{ref:r}),a)}$.displayName="DisplayText";s.forwardRef($);var me="h2";function G(e,r){var t=e,{children:a,className:n,testId:o="cf-ui-section-heading"}=t,l=m(t,["children","className","testId"]);return s.createElement(h,f(g({as:me,testId:o,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:cx(css({letterSpacing:i.letterSpacingWide,textTransform:"uppercase"}),n)},l),{ref:r}),a)}G.displayName="SectionHeading";s.forwardRef(G);var ue=s.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(g({as:"p",testId:n,marginBottom:"spacingM",lineHeight:"lineHeightM"},o),{ref:r}),a)});ue.displayName="Paragraph";var E=s.forwardRef((e,r)=>{let t=O(),S=e,{children:a,variant:n="primary",size:o="default",testId:l="cf-ui-badge",startIcon:c,endIcon:d,className:H}=S,w=x(S,["children","variant","size","testId","startIcon","endIcon","className"]),y=B=>s.cloneElement(B,{size:"tiny",className:cx(t.badgeIcon,B.props.className),variant:n==="primary-filled"?"white":n});return s.createElement(Box,I(p({as:"div",testId:l,display:"inline-flex",className:cx(t.badge({variant:n,size:o}),H)},w),{ref:r}),c&&o==="default"&&y(c),s.createElement(V,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),d&&o==="default"&&y(d))});E.displayName="Badge";var Se={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function q(e,r){let d=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=d,o=x(d,["entityStatus","isScheduled","size"]),l=a&&n==="default",c=Se[t];return s.createElement(E,I(p(p({},o),l?{size:n,startIcon:s.createElement(ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:c,ref:r}),t)}q.displayName="EntityStatusBadge";var Be=s.forwardRef(q);
+var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var N=(e,r,t)=>r in e?Y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))T.call(r,t)&&N(e,t,r[t]);if(v)for(var t of v(r))k.call(r,t)&&N(e,t,r[t]);return e},b=(e,r)=>Z(e,K(r));var x=(e,r)=>{var t={};for(var a in e)T.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&v)for(var a of v(e))r.indexOf(a)<0&&k.call(e,a)&&(t[a]=e[a]);return t};var Q=({variant:e})=>{switch(e){case"positive":return {color:n.green600,backgroundColor:n.green200};case"primary":return {color:n.blue600,backgroundColor:n.blue200};case"negative":return {color:n.red600,backgroundColor:n.red200};case"warning":return {color:n.orange600,backgroundColor:n.orange200};case"secondary":return {color:n.gray700,backgroundColor:n.gray200};case"primary-filled":return {color:n.colorWhite,backgroundColor:n.blue600};case"featured":return {color:n.purple600,backgroundColor:n.purple200};default:return {}}},ee=({size:e})=>{switch(e){case"small":return {padding:`0 ${n.spacing2Xs}`,lineHeight:n.lineHeightS,maxHeight:n.lineHeightS};default:return {padding:`0 ${n.spacingXs}`,lineHeight:n.lineHeightM,maxHeight:n.lineHeightM}}},O=()=>({badge:({variant:e,size:r})=>css(g(g({columnGap:n.spacing2Xs,alignItems:"center",borderRadius:n.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Q({variant:e})),ee({size:r}))),badgeIcon:css({flexShrink:0}),badgeIconCustomTiny:css({width:"0.875rem",height:"0.875rem"}),badgeText:css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var ae=Object.defineProperty,ie=Object.defineProperties,ne=Object.getOwnPropertyDescriptors,z=Object.getOwnPropertySymbols,X=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,R=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))X.call(r,t)&&R(e,t,r[t]);if(z)for(var t of z(r))j.call(r,t)&&R(e,t,r[t]);return e},f=(e,r)=>ie(e,ne(r)),m=(e,r)=>{var t={};for(var a in e)X.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&z)for(var a of z(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},oe="span";function se(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function le(){return css({wordBreak:"break-word"})}function D(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:i="fontStackPrimary",fontWeight:o="fontWeightNormal",fontColor:l="gray800",lineHeight:c="lineHeightM",children:d,isTruncated:w,isWordBreak:C,as:y,className:S,margin:B="none"}=t,A=m(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let J=y||oe;return s.createElement(Box,f(p({},A),{as:J,className:cx(css({padding:0,fontFamily:n[i],fontWeight:n[o],color:n[l],fontSize:n[a],lineHeight:n[c]}),w?se():null,C?le():null,S),margin:B,ref:r}),d)}D.displayName="Text";var h=s.forwardRef(D),de="span";function L(e,r){var t=e,{children:a,fontWeight:i="fontWeightNormal",testId:o="cf-ui-caption"}=t,l=m(t,["children","fontWeight","testId"]);return s.createElement(h,f(p({as:de,testId:o,fontSize:"fontSizeS",lineHeight:"lineHeightS",fontColor:"gray900",fontWeight:i},l),{ref:r}),a)}L.displayName="Caption";var V=s.forwardRef(L),ce="h1";function F(e,r){var t=e,{children:a,testId:i="cf-ui-heading"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(p({as:ce,testId:i,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o),{ref:r}),a)}F.displayName="Heading";s.forwardRef(F);var ge="h3";function $(e,r){var t=e,{children:a,testId:i="cf-ui-subheading"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(p({as:ge,testId:i,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o),{ref:r}),a)}$.displayName="Subheading";s.forwardRef($);var fe="h2";function G(e,r){var t=e,{children:a,size:i="default",testId:o="cf-ui-display-text"}=t,l=m(t,["children","size","testId"]);let c="fontSize2Xl",d="lineHeight2Xl";return i==="large"&&(c="fontSize3Xl",d="lineHeight3Xl"),s.createElement(h,f(p({as:fe,testId:o,marginBottom:i==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},l),{ref:r}),a)}G.displayName="DisplayText";s.forwardRef(G);var me="h2";function U(e,r){var t=e,{children:a,className:i,testId:o="cf-ui-section-heading"}=t,l=m(t,["children","className","testId"]);return s.createElement(h,f(p({as:me,testId:o,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:cx(css({letterSpacing:n.letterSpacingWide,textTransform:"uppercase"}),i)},l),{ref:r}),a)}U.displayName="SectionHeading";s.forwardRef(U);var ue=s.forwardRef((e,r)=>{var t=e,{children:a,testId:i="cf-ui-paragraph"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(p({as:"p",testId:i,marginBottom:"spacingM",lineHeight:"lineHeightM"},o),{ref:r}),a)});ue.displayName="Paragraph";var P=s.forwardRef((e,r)=>{let t=O(),S=e,{children:a,variant:i="primary",size:o="default",testId:l="cf-ui-badge",startIcon:c,endIcon:d,className:w}=S,C=x(S,["children","variant","size","testId","startIcon","endIcon","className"]),y=B=>s.cloneElement(B,{size:"tiny",className:cx(t.badgeIcon,B.props.className,{[t.badgeIconCustomTiny]:o==="small"}),variant:i==="primary-filled"?"white":i});return s.createElement(Box,b(g({as:"div",testId:l,display:"inline-flex",className:cx(t.badge({variant:i,size:o}),w)},C),{ref:r}),c&&y(c),s.createElement(V,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),d&&y(d))});P.displayName="Badge";var Se={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function q(e,r){let d=e,{entityStatus:t,isScheduled:a=void 0,size:i="default"}=d,o=x(d,["entityStatus","isScheduled","size"]),l=a&&i==="default",c=Se[t];return s.createElement(P,b(g(g({},o),l?{size:i,startIcon:s.createElement(ClockIcon,{testId:"schedule-icon"})}:{size:i}),{variant:c,ref:r}),t)}q.displayName="EntityStatusBadge";var Be=s.forwardRef(q);
 
-export { E as Badge, Be as EntityStatusBadge };
+export { P as Badge, Be 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","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","_","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  type PickUnion,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\ntype BadgeSizeWithIconProps =\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size?: Exclude<BadgeSize, 'small'>;\n      /**\n       * Expects any of the icon components. Renders the icon aligned to the start\n       */\n      startIcon?: React.ReactElement;\n      /**\n       * Expects any of the icon components. Renders the icon aligned to the end\n       */\n      endIcon?: React.ReactElement;\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 startIcon or endIcon\n      startIcon?: never;\n      endIcon?: never;\n    };\n\nexport type BadgeInternalProps = CommonProps &\n  BadgeSizeWithIconProps & {\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 styles = getBadgeStyles();\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        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 && size === 'default' && iconContent(startIcon)}\n        <Caption\n          fontWeight=\"fontWeightMedium\"\n          isTruncated\n          className={styles.badgeText}\n        >\n          {children}\n        </Caption>\n        {endIcon && size === 'default' && 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';\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  badgeText: css({\n    color: 'currentcolor',\n    lineHeight: 'inherit',\n    textTransform: 'lowercase',\n    '::first-letter': {\n      textTransform: 'uppercase',\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"]}
+{"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","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","_","ClockIcon","statusMap","EntityStatusBadge","entityStatus","isScheduled","withClockIcon","_EntityStatusBadge"],"mappings":"+kBAAA,OAAOA,MAAW,QAClB,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,OAIK,uBCPP,OAAOC,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAIpB,IAAMC,EAAkB,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,EAAgB,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,cAAe,YACf,iBAAkB,CAChB,cAAe,WACjB,CACF,CAAC,CACH,iyHDrDO,IAAMO,EAAQX,EAAM,WACzB,CAACY,EAAOC,IAAQ,CACd,IAAMC,EAASL,EAAe,EAU1BM,EAAAH,EARF,UAAAI,EACA,QAAAV,EAAU,UACV,KAAAE,EAAO,UACP,OAAAS,EAAS,cACT,UAAAC,EACA,QAAAC,EACA,UAAAC,CA/CN,EAiDQL,EADCM,EAAAC,EACDP,EADC,CAPH,WACA,UACA,OACA,SACA,YACA,UACA,cAIIQ,EAAeC,GACnBxB,EAAM,aAAawB,EAAM,CACvB,KAAM,OACN,UAAWvB,EAAGa,EAAO,UAAWU,EAAK,MAAM,UAAW,CACpD,CAACV,EAAO,mBAAmB,EAAGN,IAAS,OACzC,CAAC,EACD,QAASF,IAAY,iBAAmB,QAAUA,CACpD,CAAC,EAEH,OACEN,EAAA,cAACE,GAAAuB,EAAAf,EAAA,CACC,GAAG,MACH,OAAQO,EACR,QAAQ,cACR,UAAWhB,EAAGa,EAAO,MAAM,CAAE,QAAAR,EAAS,KAAAE,CAAK,CAAC,EAAGY,CAAS,GACpDC,GALL,CAMC,IAAKR,IAEJK,GAAaK,EAAYL,CAAS,EACnClB,EAAA,cAAC0B,EAAA,CACC,WAAW,mBACX,YAAW,GACX,UAAWZ,EAAO,WAEjBE,CACH,EACCG,GAAWI,EAAYJ,CAAO,CACjC,CAEJ,CACF,EAEAR,EAAM,YAAc,QEnFpB,OAAOX,MAAW,QAMlB,OAAS,aAAA2B,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,KAAAvB,EAAO,SAzDX,EA2DMO,EADCM,EAAAC,EACDP,EADC,CAHH,eACA,cACA,SAGIiB,EAAgBD,GAAevB,IAAS,UACxCF,EAAUsB,GAAUE,CAAY,EAEtC,OACE9B,EAAA,cAACW,EAAAc,EAAAf,IAAA,GACKW,GACCW,EACD,CAAE,KAAAxB,EAAM,UAAWR,EAAA,cAAC2B,GAAA,CAAU,OAAO,gBAAgB,CAAG,EACxD,CAAE,KAAAnB,CAAK,GAJZ,CAKC,QAASF,EACT,IAAKO,IAEJiB,CACH,CAEJ,CAEAD,EAAkB,YAAc,oBAEhC,IAAMI,GAAqBjC,EAAM,WAG/B6B,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';\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\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      ...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';\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: css({\n    color: 'currentcolor',\n    lineHeight: 'inherit',\n    textTransform: 'lowercase',\n    '::first-letter': {\n      textTransform: 'uppercase',\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,42 +1,52 @@
 import React from 'react';
-import { PropsWithHTMLElement, CommonProps, PickUnion, EntityStatus } from '@contentful/f36-core';
+import { PropsWithHTMLElement, CommonProps, EntityStatus, PickUnion } from '@contentful/f36-core';
 
 declare type BadgeSize = 'default' | 'small';
 declare type BadgeVariant = 'negative' | 'positive' | 'primary' | 'secondary' | 'warning' | 'primary-filled' | 'featured';
 
-declare type BadgeSizeWithIconProps = {
+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?: Exclude<BadgeSize, 'small'>;
+    size?: BadgeSize;
     /**
      * Expects any of the icon components. Renders the icon aligned to the start
      */
-    startIcon?: React.ReactElement;
+    startIcon?: React.ReactNode;
     /**
      * Expects any of the icon components. Renders the icon aligned to the end
      */
-    endIcon?: React.ReactElement;
-} | {
-    /**
-     * Sets the size of the component
-     * @default default
-     */
-    size: PickUnion<BadgeSize, 'small'>;
-    startIcon?: never;
-    endIcon?: never;
+    endIcon?: React.ReactNode;
 };
-declare type BadgeInternalProps = CommonProps & BadgeSizeWithIconProps & {
+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" | "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<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * 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;
+} & React.RefAttributes<HTMLDivElement>>;
 
 declare type BadgeSizeWithIsScheduledProp = {
     /**

package/dist/index.d.ts

@@ -1,42 +1,52 @@
 import React from 'react';
-import { PropsWithHTMLElement, CommonProps, PickUnion, EntityStatus } from '@contentful/f36-core';
+import { PropsWithHTMLElement, CommonProps, EntityStatus, PickUnion } from '@contentful/f36-core';
 
 declare type BadgeSize = 'default' | 'small';
 declare type BadgeVariant = 'negative' | 'positive' | 'primary' | 'secondary' | 'warning' | 'primary-filled' | 'featured';
 
-declare type BadgeSizeWithIconProps = {
+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?: Exclude<BadgeSize, 'small'>;
+    size?: BadgeSize;
     /**
      * Expects any of the icon components. Renders the icon aligned to the start
      */
-    startIcon?: React.ReactElement;
+    startIcon?: React.ReactNode;
     /**
      * Expects any of the icon components. Renders the icon aligned to the end
      */
-    endIcon?: React.ReactElement;
-} | {
-    /**
-     * Sets the size of the component
-     * @default default
-     */
-    size: PickUnion<BadgeSize, 'small'>;
-    startIcon?: never;
-    endIcon?: never;
+    endIcon?: React.ReactNode;
 };
-declare type BadgeInternalProps = CommonProps & BadgeSizeWithIconProps & {
+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" | "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<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * 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;
+} & React.RefAttributes<HTMLDivElement>>;
 
 declare type BadgeSizeWithIsScheduledProp = {
     /**

package/dist/index.js

@@ -3,17 +3,17 @@
 var s = require('react');
 var emotion = require('emotion');
 var f36Core = require('@contentful/f36-core');
-var i = require('@contentful/f36-tokens');
+var n = require('@contentful/f36-tokens');
 var f36Icons = require('@contentful/f36-icons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var s__default = /*#__PURE__*/_interopDefault(s);
-var i__default = /*#__PURE__*/_interopDefault(i);
+var n__default = /*#__PURE__*/_interopDefault(n);
 
-var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var N=(e,r,t)=>r in e?Y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))k.call(r,t)&&N(e,t,r[t]);if(v)for(var t of v(r))T.call(r,t)&&N(e,t,r[t]);return e},I=(e,r)=>Z(e,K(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&&v)for(var a of v(e))r.indexOf(a)<0&&T.call(e,a)&&(t[a]=e[a]);return t};var Q=({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 {}}},ee=({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}}},O=()=>({badge:({variant:e,size:r})=>emotion.css(p(p({columnGap:i__default.default.spacing2Xs,alignItems:"center",borderRadius:i__default.default.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Q({variant:e})),ee({size:r}))),badgeIcon:emotion.css({flexShrink:0}),badgeText:emotion.css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var ae=Object.defineProperty,ne=Object.defineProperties,ie=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertySymbols,X=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,R=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))X.call(r,t)&&R(e,t,r[t]);if(b)for(var t of b(r))j.call(r,t)&&R(e,t,r[t]);return e},f=(e,r)=>ne(e,ie(r)),m=(e,r)=>{var t={};for(var a in e)X.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&&j.call(e,a)&&(t[a]=e[a]);return t},oe="span";function se(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function le(){return emotion.css({wordBreak:"break-word"})}function D(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:o="fontWeightNormal",fontColor:l="gray800",lineHeight:c="lineHeightM",children:d,isTruncated:H,isWordBreak:w,as:y,className:S,margin:B="none"}=t,A=m(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let J=y||oe;return s__default.default.createElement(f36Core.Box,f(g({},A),{as:J,className:emotion.cx(emotion.css({padding:0,fontFamily:i__default.default[n],fontWeight:i__default.default[o],color:i__default.default[l],fontSize:i__default.default[a],lineHeight:i__default.default[c]}),H?se():null,w?le():null,S),margin:B,ref:r}),d)}D.displayName="Text";var h=s__default.default.forwardRef(D),de="span";function L(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:o="cf-ui-caption"}=t,l=m(t,["children","fontWeight","testId"]);return s__default.default.createElement(h,f(g({as:de,testId:o,fontSize:"fontSizeS",lineHeight:"lineHeightS",fontColor:"gray900",fontWeight:n},l),{ref:r}),a)}L.displayName="Caption";var V=s__default.default.forwardRef(L),ce="h1";function U(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,o=m(t,["children","testId"]);return s__default.default.createElement(h,f(g({as:ce,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o),{ref:r}),a)}U.displayName="Heading";s__default.default.forwardRef(U);var pe="h3";function F(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,o=m(t,["children","testId"]);return s__default.default.createElement(h,f(g({as:pe,testId:n,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o),{ref:r}),a)}F.displayName="Subheading";s__default.default.forwardRef(F);var fe="h2";function $(e,r){var t=e,{children:a,size:n="default",testId:o="cf-ui-display-text"}=t,l=m(t,["children","size","testId"]);let c="fontSize2Xl",d="lineHeight2Xl";return n==="large"&&(c="fontSize3Xl",d="lineHeight3Xl"),s__default.default.createElement(h,f(g({as:fe,testId:o,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},l),{ref:r}),a)}$.displayName="DisplayText";s__default.default.forwardRef($);var me="h2";function G(e,r){var t=e,{children:a,className:n,testId:o="cf-ui-section-heading"}=t,l=m(t,["children","className","testId"]);return s__default.default.createElement(h,f(g({as:me,testId:o,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:i__default.default.letterSpacingWide,textTransform:"uppercase"}),n)},l),{ref:r}),a)}G.displayName="SectionHeading";s__default.default.forwardRef(G);var ue=s__default.default.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,o=m(t,["children","testId"]);return s__default.default.createElement(h,f(g({as:"p",testId:n,marginBottom:"spacingM",lineHeight:"lineHeightM"},o),{ref:r}),a)});ue.displayName="Paragraph";var E=s__default.default.forwardRef((e,r)=>{let t=O(),S=e,{children:a,variant:n="primary",size:o="default",testId:l="cf-ui-badge",startIcon:c,endIcon:d,className:H}=S,w=x(S,["children","variant","size","testId","startIcon","endIcon","className"]),y=B=>s__default.default.cloneElement(B,{size:"tiny",className:emotion.cx(t.badgeIcon,B.props.className),variant:n==="primary-filled"?"white":n});return s__default.default.createElement(f36Core.Box,I(p({as:"div",testId:l,display:"inline-flex",className:emotion.cx(t.badge({variant:n,size:o}),H)},w),{ref:r}),c&&o==="default"&&y(c),s__default.default.createElement(V,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),d&&o==="default"&&y(d))});E.displayName="Badge";var Se={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function q(e,r){let d=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=d,o=x(d,["entityStatus","isScheduled","size"]),l=a&&n==="default",c=Se[t];return s__default.default.createElement(E,I(p(p({},o),l?{size:n,startIcon:s__default.default.createElement(f36Icons.ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:c,ref:r}),t)}q.displayName="EntityStatusBadge";var Be=s__default.default.forwardRef(q);
+var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var N=(e,r,t)=>r in e?Y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))T.call(r,t)&&N(e,t,r[t]);if(v)for(var t of v(r))k.call(r,t)&&N(e,t,r[t]);return e},b=(e,r)=>Z(e,K(r));var x=(e,r)=>{var t={};for(var a in e)T.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&v)for(var a of v(e))r.indexOf(a)<0&&k.call(e,a)&&(t[a]=e[a]);return t};var Q=({variant:e})=>{switch(e){case"positive":return {color:n__default.default.green600,backgroundColor:n__default.default.green200};case"primary":return {color:n__default.default.blue600,backgroundColor:n__default.default.blue200};case"negative":return {color:n__default.default.red600,backgroundColor:n__default.default.red200};case"warning":return {color:n__default.default.orange600,backgroundColor:n__default.default.orange200};case"secondary":return {color:n__default.default.gray700,backgroundColor:n__default.default.gray200};case"primary-filled":return {color:n__default.default.colorWhite,backgroundColor:n__default.default.blue600};case"featured":return {color:n__default.default.purple600,backgroundColor:n__default.default.purple200};default:return {}}},ee=({size:e})=>{switch(e){case"small":return {padding:`0 ${n__default.default.spacing2Xs}`,lineHeight:n__default.default.lineHeightS,maxHeight:n__default.default.lineHeightS};default:return {padding:`0 ${n__default.default.spacingXs}`,lineHeight:n__default.default.lineHeightM,maxHeight:n__default.default.lineHeightM}}},O=()=>({badge:({variant:e,size:r})=>emotion.css(g(g({columnGap:n__default.default.spacing2Xs,alignItems:"center",borderRadius:n__default.default.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Q({variant:e})),ee({size:r}))),badgeIcon:emotion.css({flexShrink:0}),badgeIconCustomTiny:emotion.css({width:"0.875rem",height:"0.875rem"}),badgeText:emotion.css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var ae=Object.defineProperty,ie=Object.defineProperties,ne=Object.getOwnPropertyDescriptors,z=Object.getOwnPropertySymbols,X=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,R=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))X.call(r,t)&&R(e,t,r[t]);if(z)for(var t of z(r))j.call(r,t)&&R(e,t,r[t]);return e},f=(e,r)=>ie(e,ne(r)),m=(e,r)=>{var t={};for(var a in e)X.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&z)for(var a of z(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},oe="span";function se(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function le(){return emotion.css({wordBreak:"break-word"})}function D(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:i="fontStackPrimary",fontWeight:o="fontWeightNormal",fontColor:l="gray800",lineHeight:c="lineHeightM",children:d,isTruncated:w,isWordBreak:C,as:y,className:S,margin:B="none"}=t,A=m(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let J=y||oe;return s__default.default.createElement(f36Core.Box,f(p({},A),{as:J,className:emotion.cx(emotion.css({padding:0,fontFamily:n__default.default[i],fontWeight:n__default.default[o],color:n__default.default[l],fontSize:n__default.default[a],lineHeight:n__default.default[c]}),w?se():null,C?le():null,S),margin:B,ref:r}),d)}D.displayName="Text";var h=s__default.default.forwardRef(D),de="span";function L(e,r){var t=e,{children:a,fontWeight:i="fontWeightNormal",testId:o="cf-ui-caption"}=t,l=m(t,["children","fontWeight","testId"]);return s__default.default.createElement(h,f(p({as:de,testId:o,fontSize:"fontSizeS",lineHeight:"lineHeightS",fontColor:"gray900",fontWeight:i},l),{ref:r}),a)}L.displayName="Caption";var V=s__default.default.forwardRef(L),ce="h1";function F(e,r){var t=e,{children:a,testId:i="cf-ui-heading"}=t,o=m(t,["children","testId"]);return s__default.default.createElement(h,f(p({as:ce,testId:i,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o),{ref:r}),a)}F.displayName="Heading";s__default.default.forwardRef(F);var ge="h3";function $(e,r){var t=e,{children:a,testId:i="cf-ui-subheading"}=t,o=m(t,["children","testId"]);return s__default.default.createElement(h,f(p({as:ge,testId:i,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o),{ref:r}),a)}$.displayName="Subheading";s__default.default.forwardRef($);var fe="h2";function G(e,r){var t=e,{children:a,size:i="default",testId:o="cf-ui-display-text"}=t,l=m(t,["children","size","testId"]);let c="fontSize2Xl",d="lineHeight2Xl";return i==="large"&&(c="fontSize3Xl",d="lineHeight3Xl"),s__default.default.createElement(h,f(p({as:fe,testId:o,marginBottom:i==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},l),{ref:r}),a)}G.displayName="DisplayText";s__default.default.forwardRef(G);var me="h2";function U(e,r){var t=e,{children:a,className:i,testId:o="cf-ui-section-heading"}=t,l=m(t,["children","className","testId"]);return s__default.default.createElement(h,f(p({as:me,testId:o,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:n__default.default.letterSpacingWide,textTransform:"uppercase"}),i)},l),{ref:r}),a)}U.displayName="SectionHeading";s__default.default.forwardRef(U);var ue=s__default.default.forwardRef((e,r)=>{var t=e,{children:a,testId:i="cf-ui-paragraph"}=t,o=m(t,["children","testId"]);return s__default.default.createElement(h,f(p({as:"p",testId:i,marginBottom:"spacingM",lineHeight:"lineHeightM"},o),{ref:r}),a)});ue.displayName="Paragraph";var P=s__default.default.forwardRef((e,r)=>{let t=O(),S=e,{children:a,variant:i="primary",size:o="default",testId:l="cf-ui-badge",startIcon:c,endIcon:d,className:w}=S,C=x(S,["children","variant","size","testId","startIcon","endIcon","className"]),y=B=>s__default.default.cloneElement(B,{size:"tiny",className:emotion.cx(t.badgeIcon,B.props.className,{[t.badgeIconCustomTiny]:o==="small"}),variant:i==="primary-filled"?"white":i});return s__default.default.createElement(f36Core.Box,b(g({as:"div",testId:l,display:"inline-flex",className:emotion.cx(t.badge({variant:i,size:o}),w)},C),{ref:r}),c&&y(c),s__default.default.createElement(V,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),d&&y(d))});P.displayName="Badge";var Se={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function q(e,r){let d=e,{entityStatus:t,isScheduled:a=void 0,size:i="default"}=d,o=x(d,["entityStatus","isScheduled","size"]),l=a&&i==="default",c=Se[t];return s__default.default.createElement(P,b(g(g({},o),l?{size:i,startIcon:s__default.default.createElement(f36Icons.ClockIcon,{testId:"schedule-icon"})}:{size:i}),{variant:c,ref:r}),t)}q.displayName="EntityStatusBadge";var Be=s__default.default.forwardRef(q);
 
-exports.Badge = E;
+exports.Badge = P;
 exports.EntityStatusBadge = Be;
 //# 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","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","_","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  type PickUnion,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\ntype BadgeSizeWithIconProps =\n  | {\n      /**\n       * Sets the size of the component\n       * @default default\n       */\n      size?: Exclude<BadgeSize, 'small'>;\n      /**\n       * Expects any of the icon components. Renders the icon aligned to the start\n       */\n      startIcon?: React.ReactElement;\n      /**\n       * Expects any of the icon components. Renders the icon aligned to the end\n       */\n      endIcon?: React.ReactElement;\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 startIcon or endIcon\n      startIcon?: never;\n      endIcon?: never;\n    };\n\nexport type BadgeInternalProps = CommonProps &\n  BadgeSizeWithIconProps & {\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 styles = getBadgeStyles();\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        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 && size === 'default' && iconContent(startIcon)}\n        <Caption\n          fontWeight=\"fontWeightMedium\"\n          isTruncated\n          className={styles.badgeText}\n        >\n          {children}\n        </Caption>\n        {endIcon && size === 'default' && 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';\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  badgeText: css({\n    color: 'currentcolor',\n    lineHeight: 'inherit',\n    textTransform: 'lowercase',\n    '::first-letter': {\n      textTransform: 'uppercase',\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"]}
+{"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","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","_","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';\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\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      ...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';\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: css({\n    color: 'currentcolor',\n    lineHeight: 'inherit',\n    textTransform: 'lowercase',\n    '::first-letter': {\n      textTransform: 'uppercase',\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.55.0",
+  "version": "4.56.0",
   "description": "Forma 36: Badge React Component",
   "license": "MIT",
   "files": [
@@ -20,13 +20,13 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^4.55.0",
+    "@contentful/f36-core": "^4.56.0",
     "@contentful/f36-icons": "^4.27.0",
     "@contentful/f36-tokens": "^4.0.2",
     "emotion": "^10.0.17"
   },
   "devDependencies": {
-    "@contentful/f36-typography": "^4.55.0"
+    "@contentful/f36-typography": "^4.56.0"
   },
   "peerDependencies": {
     "react": ">=16.8",