@contentful/f36-typography 5.0.0 → 5.1.1

package/dist/esm/index.js

@@ -1,9 +1,11 @@
-import H, { useEffect } from 'react';
-import f from '@contentful/f36-tokens';
+import u from 'react';
+import d from '@contentful/f36-tokens';
 import { cx, css } from 'emotion';
 import { Box } from '@contentful/f36-core';
+import { useDensity } from '@contentful/f36-utils';
 
-var O=Object.defineProperty,Y=Object.defineProperties;var v=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var x=(e,o,t)=>o in e?O(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))h.call(o,t)&&x(e,t,o[t]);if(T)for(var t of T(o))E.call(o,t)&&x(e,t,o[t]);return e},a=(e,o)=>Y(e,v(o));var i=(e,o)=>{var t={};for(var r in e)h.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&T)for(var r of T(e))o.indexOf(r)<0&&E.call(e,r)&&(t[r]=e[r]);return t};var J="span";function K(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function Q(){return css({wordBreak:"break-word"})}function S(pe,X){var P=pe,{fontSize:e="fontSizeM",fontStack:o="fontStackPrimary",fontWeight:t="fontWeightNormal",fontColor:r="gray800",lineHeight:m="lineHeightM",children:n,isTruncated:l,isWordBreak:g,as:d,className:W,margin:M="none"}=P,z=i(P,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let w=d||J;return H.createElement(Box,a(p({},z),{as:w,className:cx(css({padding:0,fontFamily:f[o],fontWeight:f[t],color:f[r],fontSize:f[e],lineHeight:f[m]}),l?K():null,g?Q():null,W),margin:M,ref:X}),n)}S.displayName="Text";var s=H.forwardRef(S);var V="h1";function A(m,r){var n=m,{children:e,testId:o="cf-ui-heading"}=n,t=i(n,["children","testId"]);return H.createElement(s,a(p({as:V,testId:o,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},t),{ref:r}),e)}A.displayName="Heading";var D=H.forwardRef(A);var Z="h3";function I(m,r){var n=m,{children:e,testId:o="cf-ui-subheading"}=n,t=i(n,["children","testId"]);return H.createElement(s,a(p({as:Z,testId:o,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},t),{ref:r}),e)}I.displayName="Subheading";var L=H.forwardRef(I);var C=e=>(useEffect(()=>{console.warn("Forma 36: Typography component is deprecated. You can safely remove it from your components.");},[]),H.createElement(H.Fragment,null,e.children));C.displayName="Typography";var ee="h2";function F(n,m){var l=n,{children:e,size:o="default",testId:t="cf-ui-display-text"}=l,r=i(l,["children","size","testId"]);let g="fontSize2Xl",d="lineHeight2Xl";return o==="large"&&(g="fontSize3Xl",d="lineHeight3Xl"),H.createElement(s,a(p({as:ee,testId:t,marginBottom:o==="default"?"spacingL":"spacingXl",fontSize:g,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},r),{ref:m}),e)}F.displayName="DisplayText";var N=H.forwardRef(F);var ne="h2";function b(n,m){var l=n,{children:e,className:o,testId:t="cf-ui-section-heading"}=l,r=i(l,["children","className","testId"]);return H.createElement(s,a(p({as:ne,testId:t,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:cx(css({letterSpacing:f.letterSpacingWide,textTransform:"uppercase"}),o)},r),{ref:m}),e)}b.displayName="SectionHeading";var U=H.forwardRef(b);var y=H.forwardRef((m,r)=>{var n=m,{children:e,testId:o="cf-ui-paragraph"}=n,t=i(n,["children","testId"]);return H.createElement(s,a(p({as:"p",testId:o,marginBottom:"spacingM",lineHeight:"lineHeightM"},t),{ref:r}),e)});y.displayName="Paragraph";
+var j=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var S=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var H=(e,t,o)=>t in e?j(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,p=(e,t)=>{for(var o in t||(t={}))S.call(t,o)&&H(e,o,t[o]);if(h)for(var o of h(t))A.call(t,o)&&H(e,o,t[o]);return e},a=(e,t)=>q(e,J(t));var s=(e,t)=>{var o={};for(var n in e)S.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(e!=null&&h)for(var n of h(e))t.indexOf(n)<0&&A.call(e,n)&&(o[n]=e[n]);return o};var V="span";function Z(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function $(){return css({wordBreak:"break-word"})}function D(e,t){let E=e,{fontSize:o="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:l="fontWeightNormal",fontColor:c="gray800",lineHeight:f="lineHeightM",letterSpacing:g="letterSpacingDefault",children:r,isTruncated:i,isWordBreak:T,as:y,className:w,margin:O="none"}=E,Y=s(E,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]),v=y||V;return u.createElement(Box,a(p({},Y),{as:v,className:cx(css({padding:0,fontFamily:d[n],fontWeight:d[l],color:d[c],fontSize:d[o],lineHeight:d[f],letterSpacing:d[g]}),i?Z():null,T?$():null,w),margin:O,ref:t}),r)}D.displayName="Text";var m=u.forwardRef(D);var te="span";function R(g,f){var r=g,{children:e,fontWeight:t="fontWeightNormal",testId:o="cf-ui-caption",as:n,fontColor:l="gray900"}=r,c=s(r,["children","fontWeight","testId","as","fontColor"]);let i=useDensity();return u.createElement(m,a(p({as:n||te,testId:o,fontSize:i==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:i==="high"?"lineHeightSHigh":"lineHeightS",fontColor:l,fontWeight:t},c),{ref:f}),e)}R.displayName="Caption";var I=u.forwardRef(R);var ne="h1";function L(g,f){var r=g,{children:e,testId:t="cf-ui-heading",as:o,fontColor:n="gray900",marginBottom:l="spacingM"}=r,c=s(r,["children","testId","as","fontColor","marginBottom"]);let i=useDensity();return u.createElement(m,a(p({as:o||ne,testId:t,marginBottom:l,fontWeight:"fontWeightDemiBold",fontColor:n,fontSize:i==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:i==="high"?"lineHeightXlHigh":"lineHeightXl"},c),{ref:f}),e)}L.displayName="Heading";var N=u.forwardRef(L);var ie="h3";function G(f,c){var g=f,{children:e,testId:t="cf-ui-subheading",as:o,fontColor:n="gray900"}=g,l=s(g,["children","testId","as","fontColor"]);let r=useDensity();return u.createElement(m,a(p({as:o||ie,testId:t,marginBottom:"spacingM",fontSize:r==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:r==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:n},l),{ref:c}),e)}G.displayName="Subheading";var F=u.forwardRef(G);var pe="h2";function b(g,f){var r=g,{children:e,size:t="default",testId:o="cf-ui-display-text",as:n,fontColor:l="gray900"}=r,c=s(r,["children","size","testId","as","fontColor"]);let i="fontSize2Xl",T="lineHeightXl";return t==="large"&&(i="fontSize3Xl",T="lineHeight3Xl"),u.createElement(m,a(p({as:n||pe,testId:o,marginBottom:t==="default"?"spacingL":"spacingXl",fontSize:i,lineHeight:T,fontColor:l,fontWeight:"fontWeightDemiBold"},c),{ref:f}),e)}b.displayName="DisplayText";var U=u.forwardRef(b);var fe="h2";function B(r,g){var i=r,{children:e,className:t,testId:o="cf-ui-section-heading",as:n,fontColor:l="gray600",marginBottom:c="spacingL"}=i,f=s(i,["children","className","testId","as","fontColor","marginBottom"]);let T=useDensity();return u.createElement(m,a(p({as:n||fe,testId:o,marginBottom:c,fontWeight:"fontWeightMedium",fontColor:l,fontSize:T==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:T==="high"?"lineHeightSHigh":"lineHeightS",className:cx(css({letterSpacing:d.letterSpacingDefault}),t)},f),{ref:g}),e)}B.displayName="SectionHeading";var M=u.forwardRef(B);var P=u.forwardRef((c,l)=>{var f=c,{children:e,testId:t="cf-ui-paragraph",marginBottom:o="spacingM"}=f,n=s(f,["children","testId","marginBottom"]);let g=useDensity();return u.createElement(m,a(p({as:"p",testId:t,fontSize:g==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:g==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:o},n),{ref:l}),e)});P.displayName="Paragraph";
 
-export { N as DisplayText, D as Heading, y as Paragraph, U as SectionHeading, L as Subheading, s as Text, C as Typography };
+export { I as Caption, U as DisplayText, N as Heading, P as Paragraph, M as SectionHeading, F as Subheading, m as Text };
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Heading/Heading.tsx","../../src/Text/Text.tsx","../../src/Subheading/Subheading.tsx","../../src/Typography.tsx","../../src/DisplayText/DisplayText.tsx","../../src/SectionHeading/SectionHeading.tsx","../../src/Paragraph/Paragraph.tsx"],"names":["React","tokens","css","cx","Box","TEXT_DEFAULT_TAG","truncatedStyle","wordBreakStyle","_Text","_a","ref","_b","fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin","otherProps","__objRest","Element","__spreadProps","__spreadValues","Text","HEADING_DEFAULT_TAG","_Heading","testId","Heading","SUBHEADING_DEFAULT_TAG","_Subheading","Subheading","useEffect","Typography","props","DISPLAY_TEXT_DEFAULT_TAG","_DisplayText","size","DisplayText","SECTION_HEADING_DEFAULT_TAG","_SectionHeading","SectionHeading","Paragraph"],"mappings":"+kBAAA,OAAOA,MAAW,QCAlB,OAAOA,MAAW,QAClB,OAAOC,MAMA,yBACP,OAAS,OAAAC,EAAK,MAAAC,MAAU,UACxB,OACE,OAAAC,MAMK,uBAaP,IAAMC,EAAmB,OAEzB,SAASC,GAAiB,CACxB,OAAOJ,EAAI,CACT,SAAU,SACV,aAAc,WACd,WAAY,SACZ,SAAU,MACZ,CAAC,CACH,CAEA,SAASK,GAAiB,CACxB,OAAOL,EAAI,CACT,UAAW,YACb,CAAC,CACH,CAKA,SAASM,EACPC,GAcAC,EACA,CAfA,IAAAC,EAAAF,GACE,UAAAG,EAAW,YACX,UAAAC,EAAY,mBACZ,WAAAC,EAAa,mBACb,UAAAC,EAAY,UACZ,WAAAC,EAAa,cACb,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,GAAAC,EACA,UAAAC,EACA,OAAAC,EAAS,MA7Db,EAkDEX,EAYKY,EAAAC,EAZLb,EAYK,CAXH,WACA,YACA,aACA,YACA,aACA,WACA,cACA,cACA,KACA,YACA,WAKF,IAAMc,EAA6BL,GAAMf,EAEzC,OACEL,EAAA,cAACI,EAAAsB,EAAAC,EAAA,GACKJ,GADL,CAEC,GAAIE,EACJ,UAAWtB,EACTD,EAAI,CACF,QAAS,EACT,WAAYD,EAAOY,GACnB,WAAYZ,EAAOa,GACnB,MAAOb,EAAOc,GACd,SAAUd,EAAOW,GACjB,WAAYX,EAAOe,EACrB,CAAC,EACDE,EAAcZ,EAAe,EAAI,KACjCa,EAAcZ,EAAe,EAAI,KACjCc,CACF,EACA,OAAQC,EACR,IAAKZ,IAEJO,CACH,CAEJ,CAEAT,EAAM,YAAc,OAEb,IAAMoB,EAGT5B,EAAM,WAAWQ,CAAK,EDxF1B,IAAMqB,EAAsB,KAe5B,SAASC,EACPrB,EACAC,EACA,CAFA,IAAAC,EAAAF,EAAE,UAAAQ,EAAU,OAAAc,EAAS,eA1BvB,EA0BEpB,EAAyCY,EAAAC,EAAzCb,EAAyC,CAAvC,WAAU,WAGZ,OACEX,EAAA,cAAC4B,EAAAF,EAAAC,EAAA,CACC,GAAIE,EACJ,OAAQE,EACR,aAAa,WACb,WAAW,qBACX,UAAU,UACV,SAAS,aACT,WAAW,gBACPR,GARL,CASC,IAAKb,IAEJO,CACH,CAEJ,CAEAa,EAAS,YAAc,UAEhB,IAAME,EAGThC,EAAM,WAAW8B,CAAQ,EEnD7B,OAAO9B,MAAW,QAWlB,IAAMiC,EAAyB,KAY/B,SAASC,EAGPzB,EACAC,EACA,CAFA,IAAAC,EAAAF,EAAE,UAAAQ,EAAU,OAAAc,EAAS,kBA1BvB,EA0BEpB,EAA4CY,EAAAC,EAA5Cb,EAA4C,CAA1C,WAAU,WAGZ,OACEX,EAAA,cAAC4B,EAAAF,EAAAC,EAAA,CACC,GAAIM,EACJ,OAAQF,EACR,aAAa,WACb,SAAS,YACT,WAAW,cACX,WAAW,qBACX,UAAU,WACNR,GARL,CASC,IAAKb,IAEJO,CACH,CAEJ,CAEAiB,EAAY,YAAc,aAEnB,IAAMC,EAGTnC,EAAM,WAAWkC,CAAW,ECnDhC,OAAOlC,GAAS,aAAAoC,MAAiB,QAS1B,IAAMC,EAAcC,IACzBF,EAAU,IAAM,CACd,QAAQ,KACN,8FACF,CACF,EAAG,CAAC,CAAC,EACEpC,EAAA,cAAAA,EAAA,cAAGsC,EAAM,QAAS,GAG3BD,EAAW,YAAc,aClBzB,OAAOrC,MAAW,QAYlB,IAAMuC,GAA2B,KAajC,SAASC,EAGP/B,EAMAC,EACA,CAPA,IAAAC,EAAAF,EACE,UAAAQ,EACA,KAAAwB,EAAO,UACP,OAAAV,EAAS,oBA/Bb,EA4BEpB,EAIKY,EAAAC,EAJLb,EAIK,CAHH,WACA,OACA,WAKF,IAAIC,EAA2B,cAC3BI,EAA+B,gBAEnC,OAAIyB,IAAS,UACX7B,EAAW,cACXI,EAAa,iBAIbhB,EAAA,cAAC4B,EAAAF,EAAAC,EAAA,CACC,GAAIY,GACJ,OAAQR,EACR,aAAcU,IAAS,UAAY,WAAa,YAChD,SAAU7B,EACV,WAAYI,EACZ,UAAU,UACV,WAAW,sBACPO,GARL,CASC,IAAKb,IAEJO,CACH,CAEJ,CAEAuB,EAAa,YAAc,cAEpB,IAAME,EAGT1C,EAAM,WAAWwC,CAAY,EClEjC,OAAOxC,MAAW,QAClB,OAAOC,OAAY,yBACnB,OAAS,OAAAC,GAAK,MAAAC,OAAU,UAWxB,IAAMwC,GAA8B,KAYpC,SAASC,EAGPnC,EAMAC,EACA,CAPA,IAAAC,EAAAF,EACE,UAAAQ,EACA,UAAAI,EACA,OAAAU,EAAS,uBA/Bb,EA4BEpB,EAIKY,EAAAC,EAJLb,EAIK,CAHH,WACA,YACA,WAKF,OACEX,EAAA,cAAC4B,EAAAF,EAAAC,EAAA,CACC,GAAIgB,GACJ,OAAQZ,EACR,aAAa,WACb,WAAW,qBACX,UAAU,UACV,SAAS,YACT,WAAW,cACX,UAAW5B,GACTD,GAAI,CACF,cAAeD,GAAO,kBACtB,cAAe,WACjB,CAAC,EACDoB,CACF,GACIE,GAfL,CAgBC,IAAKb,IAEJO,CACH,CAEJ,CAEA2B,EAAgB,YAAc,iBAEvB,IAAMC,EAGT7C,EAAM,WAAW4C,CAAe,ECjEpC,OAAO5C,MAAW,QAkBX,IAAM8C,EAAY9C,EAAM,WAG7B,CAACS,EAAyDC,IAAQ,CAAjE,IAAAC,EAAAF,EAAE,UAAAQ,EAAU,OAAAc,EAAS,iBArBxB,EAqBGpB,EAA2CY,EAAAC,EAA3Cb,EAA2C,CAAzC,WAAU,WACb,OACEX,EAAA,cAAC4B,EAAAF,EAAAC,EAAA,CACC,GAAG,IACH,OAAQI,EACR,aAAa,WACb,WAAW,eACPR,GALL,CAMC,IAAKb,IAEJO,CACH,CAEJ,CAAC,EAED6B,EAAU,YAAc","sourcesContent":["import React from 'react';\nimport type {\n  CommonProps,\n  MarginProps,\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text } from '../Text';\n\nconst HEADING_DEFAULT_TAG = 'h1';\n\nexport type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface HeadingInternalProps extends CommonProps, MarginProps {\n  as?: HeadingElement;\n  children?: React.ReactNode;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type HeadingProps<\n  E extends React.ElementType = typeof HEADING_DEFAULT_TAG,\n> = PolymorphicProps<HeadingInternalProps, E>;\n\nfunction _Heading<E extends React.ElementType = typeof HEADING_DEFAULT_TAG>(\n  { children, testId = 'cf-ui-heading', ...otherProps }: HeadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  return (\n    <Text\n      as={HEADING_DEFAULT_TAG}\n      testId={testId}\n      marginBottom=\"spacingM\"\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor=\"gray900\"\n      fontSize=\"fontSizeXl\"\n      lineHeight=\"lineHeightXl\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Heading.displayName = 'Heading';\n\nexport const Heading: PolymorphicComponent<\n  ExpandProps<HeadingInternalProps>,\n  typeof HEADING_DEFAULT_TAG\n> = React.forwardRef(_Heading);\n","import React from 'react';\nimport tokens, {\n  FontSizeTokens,\n  LineHeightTokens,\n  FontWeightTokens,\n  FontStackTokens,\n  ColorTokens,\n} from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\nimport {\n  Box,\n  type PolymorphicComponent,\n  type CommonProps,\n  type MarginProps,\n  type PolymorphicProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\n\nexport interface TextInternalProps extends CommonProps, MarginProps {\n  children?: React.ReactNode;\n  fontSize?: FontSizeTokens;\n  lineHeight?: LineHeightTokens;\n  fontStack?: FontStackTokens;\n  fontWeight?: FontWeightTokens;\n  fontColor?: ColorTokens;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nconst TEXT_DEFAULT_TAG = 'span';\n\nfunction truncatedStyle() {\n  return css({\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  });\n}\n\nfunction wordBreakStyle() {\n  return css({\n    wordBreak: 'break-word',\n  });\n}\n\nexport type TextProps<E extends React.ElementType = typeof TEXT_DEFAULT_TAG> =\n  PolymorphicProps<TextInternalProps, E>;\n\nfunction _Text<E extends React.ElementType = typeof TEXT_DEFAULT_TAG>(\n  {\n    fontSize = 'fontSizeM',\n    fontStack = 'fontStackPrimary',\n    fontWeight = 'fontWeightNormal',\n    fontColor = 'gray800',\n    lineHeight = 'lineHeightM',\n    children,\n    isTruncated,\n    isWordBreak,\n    as,\n    className,\n    margin = 'none',\n    ...otherProps\n  }: TextProps<E>,\n  ref: React.Ref<any>,\n) {\n  const Element: React.ElementType = as || TEXT_DEFAULT_TAG;\n\n  return (\n    <Box\n      {...otherProps}\n      as={Element}\n      className={cx(\n        css({\n          padding: 0,\n          fontFamily: tokens[fontStack],\n          fontWeight: tokens[fontWeight],\n          color: tokens[fontColor],\n          fontSize: tokens[fontSize],\n          lineHeight: tokens[lineHeight],\n        }),\n        isTruncated ? truncatedStyle() : null,\n        isWordBreak ? wordBreakStyle() : null,\n        className,\n      )}\n      margin={margin}\n      ref={ref}\n    >\n      {children}\n    </Box>\n  );\n}\n\n_Text.displayName = 'Text';\n\nexport const Text: PolymorphicComponent<\n  ExpandProps<TextInternalProps>,\n  typeof TEXT_DEFAULT_TAG\n> = React.forwardRef(_Text);\n","import React from 'react';\nimport type {\n  CommonProps,\n  MarginProps,\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { HeadingElement } from '../Heading';\nimport { Text } from '../Text';\n\nconst SUBHEADING_DEFAULT_TAG = 'h3';\n\nexport interface SubheadingInternalProps extends CommonProps, MarginProps {\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type SubheadingProps<\n  E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG,\n> = PolymorphicProps<SubheadingInternalProps, E>;\n\nfunction _Subheading<\n  E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG,\n>(\n  { children, testId = 'cf-ui-subheading', ...otherProps }: SubheadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  return (\n    <Text\n      as={SUBHEADING_DEFAULT_TAG}\n      testId={testId}\n      marginBottom=\"spacingM\"\n      fontSize=\"fontSizeL\"\n      lineHeight=\"lineHeightL\"\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor=\"gray900\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Subheading.displayName = 'Subheading';\n\nexport const Subheading: PolymorphicComponent<\n  ExpandProps<SubheadingInternalProps>,\n  typeof SUBHEADING_DEFAULT_TAG\n> = React.forwardRef(_Subheading);\n","import React, { useEffect } from 'react';\n\nexport interface TypographyProps {\n  children?: React.ReactNode;\n}\n\n/**\n * @deprecated\n */\nexport const Typography = (props: TypographyProps) => {\n  useEffect(() => {\n    console.warn(\n      'Forma 36: Typography component is deprecated. You can safely remove it from your components.',\n    );\n  }, []);\n  return <>{props.children}</>;\n};\n\nTypography.displayName = 'Typography';\n","import React from 'react';\nimport { FontSizeTokens, LineHeightTokens } from '@contentful/f36-tokens';\nimport type {\n  CommonProps,\n  MarginProps,\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text } from '../Text';\nimport type { HeadingElement } from '../Heading';\n\nconst DISPLAY_TEXT_DEFAULT_TAG = 'h2';\n\nexport interface DisplayTextInternalProps extends CommonProps, MarginProps {\n  size?: 'default' | 'large';\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type DisplayTextProps<\n  E extends React.ElementType = typeof DISPLAY_TEXT_DEFAULT_TAG,\n> = PolymorphicProps<DisplayTextInternalProps, E>;\n\nfunction _DisplayText<\n  E extends React.ElementType = typeof DISPLAY_TEXT_DEFAULT_TAG,\n>(\n  {\n    children,\n    size = 'default',\n    testId = 'cf-ui-display-text',\n    ...otherProps\n  }: DisplayTextProps<E>,\n  ref: React.Ref<any>,\n) {\n  let fontSize: FontSizeTokens = 'fontSize2Xl';\n  let lineHeight: LineHeightTokens = 'lineHeight2Xl';\n\n  if (size === 'large') {\n    fontSize = 'fontSize3Xl';\n    lineHeight = 'lineHeight3Xl';\n  }\n\n  return (\n    <Text\n      as={DISPLAY_TEXT_DEFAULT_TAG}\n      testId={testId}\n      marginBottom={size === 'default' ? 'spacingL' : 'spacingXl'}\n      fontSize={fontSize}\n      lineHeight={lineHeight}\n      fontColor=\"gray900\"\n      fontWeight=\"fontWeightDemiBold\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_DisplayText.displayName = 'DisplayText';\n\nexport const DisplayText: PolymorphicComponent<\n  ExpandProps<DisplayTextInternalProps>,\n  typeof DISPLAY_TEXT_DEFAULT_TAG\n> = React.forwardRef(_DisplayText);\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\nimport type {\n  CommonProps,\n  MarginProps,\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { HeadingElement } from '../Heading';\nimport { Text } from '../Text';\n\nconst SECTION_HEADING_DEFAULT_TAG = 'h2';\n\nexport interface SectionHeadingInternalProps extends CommonProps, MarginProps {\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type SectionHeadingProps<\n  E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG,\n> = PolymorphicProps<SectionHeadingInternalProps, E>;\n\nfunction _SectionHeading<\n  E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG,\n>(\n  {\n    children,\n    className,\n    testId = 'cf-ui-section-heading',\n    ...otherProps\n  }: SectionHeadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  return (\n    <Text\n      as={SECTION_HEADING_DEFAULT_TAG}\n      testId={testId}\n      marginBottom=\"spacingL\"\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor=\"gray900\"\n      fontSize=\"fontSizeS\"\n      lineHeight=\"lineHeightS\"\n      className={cx(\n        css({\n          letterSpacing: tokens.letterSpacingWide,\n          textTransform: 'uppercase',\n        }),\n        className,\n      )}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_SectionHeading.displayName = 'SectionHeading';\n\nexport const SectionHeading: PolymorphicComponent<\n  ExpandProps<SectionHeadingInternalProps>,\n  typeof SECTION_HEADING_DEFAULT_TAG\n> = React.forwardRef(_SectionHeading);\n","import React from 'react';\nimport type {\n  PropsWithHTMLElement,\n  CommonProps,\n  MarginProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text } from '../Text';\n\nexport type ParagraphInternalProps = CommonProps &\n  MarginProps & {\n    children: React.ReactNode;\n    isTruncated?: boolean;\n    isWordBreak?: boolean;\n  };\n\nexport type ParagraphProps = PropsWithHTMLElement<ParagraphInternalProps, 'p'>;\n\nexport const Paragraph = React.forwardRef<\n  HTMLParagraphElement,\n  ExpandProps<ParagraphProps>\n>(({ children, testId = 'cf-ui-paragraph', ...otherProps }, ref) => {\n  return (\n    <Text\n      as=\"p\"\n      testId={testId}\n      marginBottom=\"spacingM\"\n      lineHeight=\"lineHeightM\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n});\n\nParagraph.displayName = 'Paragraph';\n"]}
+{"version":3,"sources":["../../src/Caption/Caption.tsx","../../src/Text/Text.tsx","../../src/Heading/Heading.tsx","../../src/Subheading/Subheading.tsx","../../src/DisplayText/DisplayText.tsx","../../src/SectionHeading/SectionHeading.tsx","../../src/Paragraph/Paragraph.tsx"],"names":["React","tokens","css","cx","Box","TEXT_DEFAULT_TAG","truncatedStyle","wordBreakStyle","_Text","props","ref","_a","fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin","otherProps","__objRest","Element","__spreadProps","__spreadValues","Text","useDensity","CAPTION_DEFAULT_TAG","_Caption","_b","testId","density","Caption","HEADING_DEFAULT_TAG","_Heading","marginBottom","Heading","SUBHEADING_DEFAULT_TAG","_Subheading","Subheading","DISPLAY_TEXT_DEFAULT_TAG","_DisplayText","size","DisplayText","SECTION_HEADING_DEFAULT_TAG","_SectionHeading","SectionHeading","Paragraph"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FontWeightTokens } from '@contentful/f36-tokens';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nconst CAPTION_DEFAULT_TAG = 'span';\n\nexport interface CaptionInternalProps extends Omit<TextProps, 'as'> {\n  children?: React.ReactNode;\n  fontWeight?: Extract<\n    FontWeightTokens,\n    'fontWeightNormal' | 'fontWeightMedium'\n  >;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type CaptionProps<\n  E extends React.ElementType = typeof CAPTION_DEFAULT_TAG,\n> = PolymorphicProps<CaptionInternalProps, E>;\n\nfunction _Caption<E extends React.ElementType = typeof CAPTION_DEFAULT_TAG>(\n  {\n    children,\n    fontWeight = 'fontWeightNormal',\n    testId = 'cf-ui-caption',\n    as,\n    fontColor = 'gray900',\n    ...otherProps\n  }: CaptionProps<E>,\n  ref: React.Ref<any>,\n) {\n  const density = useDensity();\n  const Element: React.ElementType = as || CAPTION_DEFAULT_TAG;\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}\n      lineHeight={density === 'high' ? 'lineHeightSHigh' : 'lineHeightS'}\n      fontColor={fontColor}\n      fontWeight={fontWeight}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Caption.displayName = 'Caption';\n\nexport const Caption: PolymorphicComponent<\n  ExpandProps<CaptionInternalProps>,\n  typeof CAPTION_DEFAULT_TAG\n> = React.forwardRef(_Caption);\n","import React from 'react';\nimport tokens, {\n  FontSizeTokens,\n  LineHeightTokens,\n  FontWeightTokens,\n  FontStackTokens,\n  ColorTokens,\n  LetterSpacingTokens,\n} from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\nimport {\n  Box,\n  type PolymorphicComponent,\n  type CommonProps,\n  type MarginProps,\n  type PolymorphicProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\n\nexport interface TextInternalProps extends CommonProps, MarginProps {\n  children?: React.ReactNode;\n  fontSize?: FontSizeTokens;\n  lineHeight?: LineHeightTokens;\n  letterSpacing?: LetterSpacingTokens;\n  fontStack?: FontStackTokens;\n  fontWeight?: FontWeightTokens;\n  fontColor?: ColorTokens;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nconst TEXT_DEFAULT_TAG = 'span';\n\nfunction truncatedStyle() {\n  return css({\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  });\n}\n\nfunction wordBreakStyle() {\n  return css({\n    wordBreak: 'break-word',\n  });\n}\n\nexport type TextProps<E extends React.ElementType = typeof TEXT_DEFAULT_TAG> =\n  PolymorphicProps<TextInternalProps, E, 'color'>;\n\nfunction _Text<E extends React.ElementType = typeof TEXT_DEFAULT_TAG>(\n  props: TextProps<E>,\n  ref: React.Ref<any>,\n) {\n  const {\n    fontSize = 'fontSizeM',\n    fontStack = 'fontStackPrimary',\n    fontWeight = 'fontWeightNormal',\n    fontColor = 'gray800',\n    lineHeight = 'lineHeightM',\n    letterSpacing = 'letterSpacingDefault',\n    children,\n    isTruncated,\n    isWordBreak,\n    as,\n    className,\n    margin = 'none',\n    ...otherProps\n  } = props;\n  const Element: React.ElementType = as || TEXT_DEFAULT_TAG;\n\n  return (\n    <Box\n      {...otherProps}\n      as={Element}\n      className={cx(\n        css({\n          padding: 0,\n          fontFamily: tokens[fontStack],\n          fontWeight: tokens[fontWeight],\n          color: tokens[fontColor],\n          fontSize: tokens[fontSize],\n          lineHeight: tokens[lineHeight],\n          letterSpacing: tokens[letterSpacing],\n        }),\n        isTruncated ? truncatedStyle() : null,\n        isWordBreak ? wordBreakStyle() : null,\n        className,\n      )}\n      margin={margin}\n      ref={ref}\n    >\n      {children}\n    </Box>\n  );\n}\n\n_Text.displayName = 'Text';\n\nexport const Text: PolymorphicComponent<\n  ExpandProps<TextInternalProps>,\n  typeof TEXT_DEFAULT_TAG,\n  'color'\n> = React.forwardRef(_Text);\n","import React from 'react';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nconst HEADING_DEFAULT_TAG = 'h1';\n\nexport type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface HeadingInternalProps extends Omit<TextProps, 'as'> {\n  as?: HeadingElement;\n  children?: React.ReactNode;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type HeadingProps<\n  E extends React.ElementType = typeof HEADING_DEFAULT_TAG,\n> = PolymorphicProps<HeadingInternalProps, E>;\n\nfunction _Heading<E extends React.ElementType = typeof HEADING_DEFAULT_TAG>(\n  {\n    children,\n    testId = 'cf-ui-heading',\n    as,\n    fontColor = 'gray900',\n    marginBottom = 'spacingM',\n    ...otherProps\n  }: HeadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  const density = useDensity();\n  const Element: React.ElementType = as || HEADING_DEFAULT_TAG;\n\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      marginBottom={marginBottom}\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor={fontColor}\n      fontSize={density === 'high' ? 'fontSizeXlHigh' : 'fontSizeXl'}\n      lineHeight={density === 'high' ? 'lineHeightXlHigh' : 'lineHeightXl'}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Heading.displayName = 'Heading';\n\nexport const Heading: PolymorphicComponent<\n  ExpandProps<HeadingInternalProps>,\n  typeof HEADING_DEFAULT_TAG\n> = React.forwardRef(_Heading);\n","import React from 'react';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { HeadingElement } from '../Heading';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nconst SUBHEADING_DEFAULT_TAG = 'h3';\n\nexport interface SubheadingInternalProps extends Omit<TextProps, 'as'> {\n  children?: React.ReactNode;\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type SubheadingProps<\n  E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG,\n> = PolymorphicProps<SubheadingInternalProps, E>;\n\nfunction _Subheading<\n  E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG,\n>(\n  {\n    children,\n    testId = 'cf-ui-subheading',\n    as,\n    fontColor = 'gray900',\n    ...otherProps\n  }: SubheadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  const density = useDensity();\n  const Element: React.ElementType = as || SUBHEADING_DEFAULT_TAG;\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      marginBottom=\"spacingM\"\n      fontSize={density === 'high' ? 'fontSizeLHigh' : 'fontSizeL'}\n      lineHeight={density === 'high' ? 'lineHeightLHigh' : 'lineHeightL'}\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor={fontColor}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Subheading.displayName = 'Subheading';\n\nexport const Subheading: PolymorphicComponent<\n  ExpandProps<SubheadingInternalProps>,\n  typeof SUBHEADING_DEFAULT_TAG\n> = React.forwardRef(_Subheading);\n","import React from 'react';\nimport { FontSizeTokens, LineHeightTokens } from '@contentful/f36-tokens';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text, type TextProps } from '../Text';\nimport type { HeadingElement } from '../Heading';\n\nconst DISPLAY_TEXT_DEFAULT_TAG = 'h2';\n\nexport interface DisplayTextInternalProps extends Omit<TextProps, 'as'> {\n  children?: React.ReactNode;\n  size?: 'default' | 'large';\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type DisplayTextProps<\n  E extends React.ElementType = typeof DISPLAY_TEXT_DEFAULT_TAG,\n> = PolymorphicProps<DisplayTextInternalProps, E>;\n\nfunction _DisplayText<\n  E extends React.ElementType = typeof DISPLAY_TEXT_DEFAULT_TAG,\n>(\n  {\n    children,\n    size = 'default',\n    testId = 'cf-ui-display-text',\n    as,\n    fontColor = 'gray900',\n    ...otherProps\n  }: DisplayTextProps<E>,\n  ref: React.Ref<any>,\n) {\n  let fontSize: FontSizeTokens = 'fontSize2Xl';\n  let lineHeight: LineHeightTokens = 'lineHeightXl';\n\n  if (size === 'large') {\n    fontSize = 'fontSize3Xl';\n    lineHeight = 'lineHeight3Xl';\n  }\n  const Element: React.ElementType = as || DISPLAY_TEXT_DEFAULT_TAG;\n\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      marginBottom={size === 'default' ? 'spacingL' : 'spacingXl'}\n      fontSize={fontSize}\n      lineHeight={lineHeight}\n      fontColor={fontColor}\n      fontWeight=\"fontWeightDemiBold\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_DisplayText.displayName = 'DisplayText';\n\nexport const DisplayText: PolymorphicComponent<\n  ExpandProps<DisplayTextInternalProps>,\n  typeof DISPLAY_TEXT_DEFAULT_TAG\n> = React.forwardRef(_DisplayText);\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { HeadingElement } from '../Heading';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nconst SECTION_HEADING_DEFAULT_TAG = 'h2';\n\nexport interface SectionHeadingInternalProps extends Omit<TextProps, 'as'> {\n  children?: React.ReactNode;\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type SectionHeadingProps<\n  E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG,\n> = PolymorphicProps<SectionHeadingInternalProps, E>;\n\nfunction _SectionHeading<\n  E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG,\n>(\n  {\n    children,\n    className,\n    testId = 'cf-ui-section-heading',\n    as,\n    fontColor = 'gray600',\n    marginBottom = 'spacingL',\n    ...otherProps\n  }: SectionHeadingProps<E>,\n  ref: React.Ref<HTMLHeadingElement>,\n) {\n  const density = useDensity();\n  const Element: React.ElementType = as || SECTION_HEADING_DEFAULT_TAG;\n\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      marginBottom={marginBottom}\n      fontWeight=\"fontWeightMedium\"\n      fontColor={fontColor}\n      fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}\n      lineHeight={density === 'high' ? 'lineHeightSHigh' : 'lineHeightS'}\n      className={cx(\n        css({\n          letterSpacing: tokens.letterSpacingDefault,\n        }),\n        className,\n      )}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_SectionHeading.displayName = 'SectionHeading';\n\nexport const SectionHeading: PolymorphicComponent<\n  ExpandProps<SectionHeadingInternalProps>,\n  typeof SECTION_HEADING_DEFAULT_TAG\n> = React.forwardRef(_SectionHeading);\n","import React from 'react';\nimport type { PropsWithHTMLElement, ExpandProps } from '@contentful/f36-core';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nexport type ParagraphInternalProps = TextProps & {\n  children: React.ReactNode;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n};\n\nexport type ParagraphProps = PropsWithHTMLElement<ParagraphInternalProps, 'p'>;\n\nexport const Paragraph = React.forwardRef<\n  HTMLParagraphElement,\n  ExpandProps<ParagraphProps>\n>(\n  (\n    {\n      children,\n      testId = 'cf-ui-paragraph',\n      marginBottom = 'spacingM',\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const density = useDensity();\n\n    return (\n      <Text\n        as=\"p\"\n        testId={testId}\n        fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}\n        lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}\n        marginBottom={marginBottom}\n        {...otherProps}\n        ref={ref}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n\nParagraph.displayName = 'Paragraph';\n"]}

package/dist/index.d.mts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { FontSizeTokens, LineHeightTokens, LetterSpacingTokens, FontStackTokens, FontWeightTokens, ColorTokens } from '@contentful/f36-tokens';
+import { PolymorphicProps, PolymorphicComponent, ExpandProps, CommonProps, MarginProps, PropsWithHTMLElement } from '@contentful/f36-core';
+
+interface TextInternalProps extends CommonProps, MarginProps {
+    children?: React.ReactNode;
+    fontSize?: FontSizeTokens;
+    lineHeight?: LineHeightTokens;
+    letterSpacing?: LetterSpacingTokens;
+    fontStack?: FontStackTokens;
+    fontWeight?: FontWeightTokens;
+    fontColor?: ColorTokens;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+}
+declare const TEXT_DEFAULT_TAG = "span";
+declare type TextProps<E extends React.ElementType = typeof TEXT_DEFAULT_TAG> = PolymorphicProps<TextInternalProps, E, 'color'>;
+declare const Text: PolymorphicComponent<ExpandProps<TextInternalProps>, typeof TEXT_DEFAULT_TAG, 'color'>;
+
+declare const CAPTION_DEFAULT_TAG = "span";
+interface CaptionInternalProps extends Omit<TextProps, 'as'> {
+    children?: React.ReactNode;
+    fontWeight?: Extract<FontWeightTokens, 'fontWeightNormal' | 'fontWeightMedium'>;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+}
+declare type CaptionProps<E extends React.ElementType = typeof CAPTION_DEFAULT_TAG> = PolymorphicProps<CaptionInternalProps, E>;
+declare const Caption: PolymorphicComponent<ExpandProps<CaptionInternalProps>, typeof CAPTION_DEFAULT_TAG>;
+
+declare const HEADING_DEFAULT_TAG = "h1";
+declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface HeadingInternalProps extends Omit<TextProps, 'as'> {
+    as?: HeadingElement;
+    children?: React.ReactNode;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+}
+declare type HeadingProps<E extends React.ElementType = typeof HEADING_DEFAULT_TAG> = PolymorphicProps<HeadingInternalProps, E>;
+declare const Heading: PolymorphicComponent<ExpandProps<HeadingInternalProps>, typeof HEADING_DEFAULT_TAG>;
+
+declare const SUBHEADING_DEFAULT_TAG = "h3";
+interface SubheadingInternalProps extends Omit<TextProps, 'as'> {
+    children?: React.ReactNode;
+    as?: HeadingElement;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+}
+declare type SubheadingProps<E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG> = PolymorphicProps<SubheadingInternalProps, E>;
+declare const Subheading: PolymorphicComponent<ExpandProps<SubheadingInternalProps>, typeof SUBHEADING_DEFAULT_TAG>;
+
+declare const DISPLAY_TEXT_DEFAULT_TAG = "h2";
+interface DisplayTextInternalProps extends Omit<TextProps, 'as'> {
+    children?: React.ReactNode;
+    size?: 'default' | 'large';
+    as?: HeadingElement;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+}
+declare type DisplayTextProps<E extends React.ElementType = typeof DISPLAY_TEXT_DEFAULT_TAG> = PolymorphicProps<DisplayTextInternalProps, E>;
+declare const DisplayText: PolymorphicComponent<ExpandProps<DisplayTextInternalProps>, typeof DISPLAY_TEXT_DEFAULT_TAG>;
+
+declare const SECTION_HEADING_DEFAULT_TAG = "h2";
+interface SectionHeadingInternalProps extends Omit<TextProps, 'as'> {
+    children?: React.ReactNode;
+    as?: HeadingElement;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+}
+declare type SectionHeadingProps<E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG> = PolymorphicProps<SectionHeadingInternalProps, E>;
+declare const SectionHeading: PolymorphicComponent<ExpandProps<SectionHeadingInternalProps>, typeof SECTION_HEADING_DEFAULT_TAG>;
+
+declare type ParagraphInternalProps = TextProps & {
+    children: React.ReactNode;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+};
+declare type ParagraphProps = PropsWithHTMLElement<ParagraphInternalProps, 'p'>;
+declare const Paragraph: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>>, never>, "css" | "hidden" | "translate" | "slot" | "title" | keyof TextInternalProps | "as" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>>, "color">, keyof TextInternalProps> & TextInternalProps & {
+    as?: "span";
+} & {
+    children: React.ReactNode;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+} & React.RefAttributes<HTMLParagraphElement>>;
+
+export { Caption, CaptionProps, DisplayText, DisplayTextProps, Heading, HeadingElement, HeadingProps, Paragraph, ParagraphProps, SectionHeading, SectionHeadingProps, Subheading, SubheadingProps, Text, TextProps };

package/dist/index.d.ts

@@ -1,10 +1,35 @@
 import React from 'react';
+import { FontSizeTokens, LineHeightTokens, LetterSpacingTokens, FontStackTokens, FontWeightTokens, ColorTokens } from '@contentful/f36-tokens';
 import { PolymorphicProps, PolymorphicComponent, ExpandProps, CommonProps, MarginProps, PropsWithHTMLElement } from '@contentful/f36-core';
-import { FontSizeTokens, LineHeightTokens, FontStackTokens, FontWeightTokens, ColorTokens } from '@contentful/f36-tokens';
+
+interface TextInternalProps extends CommonProps, MarginProps {
+    children?: React.ReactNode;
+    fontSize?: FontSizeTokens;
+    lineHeight?: LineHeightTokens;
+    letterSpacing?: LetterSpacingTokens;
+    fontStack?: FontStackTokens;
+    fontWeight?: FontWeightTokens;
+    fontColor?: ColorTokens;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+}
+declare const TEXT_DEFAULT_TAG = "span";
+declare type TextProps<E extends React.ElementType = typeof TEXT_DEFAULT_TAG> = PolymorphicProps<TextInternalProps, E, 'color'>;
+declare const Text: PolymorphicComponent<ExpandProps<TextInternalProps>, typeof TEXT_DEFAULT_TAG, 'color'>;
+
+declare const CAPTION_DEFAULT_TAG = "span";
+interface CaptionInternalProps extends Omit<TextProps, 'as'> {
+    children?: React.ReactNode;
+    fontWeight?: Extract<FontWeightTokens, 'fontWeightNormal' | 'fontWeightMedium'>;
+    isTruncated?: boolean;
+    isWordBreak?: boolean;
+}
+declare type CaptionProps<E extends React.ElementType = typeof CAPTION_DEFAULT_TAG> = PolymorphicProps<CaptionInternalProps, E>;
+declare const Caption: PolymorphicComponent<ExpandProps<CaptionInternalProps>, typeof CAPTION_DEFAULT_TAG>;
 
 declare const HEADING_DEFAULT_TAG = "h1";
 declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-interface HeadingInternalProps extends CommonProps, MarginProps {
+interface HeadingInternalProps extends Omit<TextProps, 'as'> {
     as?: HeadingElement;
     children?: React.ReactNode;
     isTruncated?: boolean;
@@ -14,7 +39,8 @@ declare type HeadingProps<E extends React.ElementType = typeof HEADING_DEFAULT_T
 declare const Heading: PolymorphicComponent<ExpandProps<HeadingInternalProps>, typeof HEADING_DEFAULT_TAG>;
 
 declare const SUBHEADING_DEFAULT_TAG = "h3";
-interface SubheadingInternalProps extends CommonProps, MarginProps {
+interface SubheadingInternalProps extends Omit<TextProps, 'as'> {
+    children?: React.ReactNode;
     as?: HeadingElement;
     isTruncated?: boolean;
     isWordBreak?: boolean;
@@ -22,19 +48,9 @@ interface SubheadingInternalProps extends CommonProps, MarginProps {
 declare type SubheadingProps<E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG> = PolymorphicProps<SubheadingInternalProps, E>;
 declare const Subheading: PolymorphicComponent<ExpandProps<SubheadingInternalProps>, typeof SUBHEADING_DEFAULT_TAG>;
 
-interface TypographyProps {
-    children?: React.ReactNode;
-}
-/**
- * @deprecated
- */
-declare const Typography: {
-    (props: TypographyProps): JSX.Element;
-    displayName: string;
-};
-
 declare const DISPLAY_TEXT_DEFAULT_TAG = "h2";
-interface DisplayTextInternalProps extends CommonProps, MarginProps {
+interface DisplayTextInternalProps extends Omit<TextProps, 'as'> {
+    children?: React.ReactNode;
     size?: 'default' | 'large';
     as?: HeadingElement;
     isTruncated?: boolean;
@@ -44,7 +60,8 @@ declare type DisplayTextProps<E extends React.ElementType = typeof DISPLAY_TEXT_
 declare const DisplayText: PolymorphicComponent<ExpandProps<DisplayTextInternalProps>, typeof DISPLAY_TEXT_DEFAULT_TAG>;
 
 declare const SECTION_HEADING_DEFAULT_TAG = "h2";
-interface SectionHeadingInternalProps extends CommonProps, MarginProps {
+interface SectionHeadingInternalProps extends Omit<TextProps, 'as'> {
+    children?: React.ReactNode;
     as?: HeadingElement;
     isTruncated?: boolean;
     isWordBreak?: boolean;
@@ -52,30 +69,18 @@ interface SectionHeadingInternalProps extends CommonProps, MarginProps {
 declare type SectionHeadingProps<E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG> = PolymorphicProps<SectionHeadingInternalProps, E>;
 declare const SectionHeading: PolymorphicComponent<ExpandProps<SectionHeadingInternalProps>, typeof SECTION_HEADING_DEFAULT_TAG>;
 
-declare type ParagraphInternalProps = CommonProps & MarginProps & {
+declare type ParagraphInternalProps = TextProps & {
     children: React.ReactNode;
     isTruncated?: boolean;
     isWordBreak?: boolean;
 };
 declare type ParagraphProps = PropsWithHTMLElement<ParagraphInternalProps, 'p'>;
-declare const Paragraph: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>>, never>, "children" | "isTruncated" | "isWordBreak" | keyof CommonProps | keyof MarginProps> & CommonProps & MarginProps & {
+declare const Paragraph: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>>, never>, "css" | "hidden" | "translate" | "slot" | "title" | keyof TextInternalProps | "as" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>>, "color">, keyof TextInternalProps> & TextInternalProps & {
+    as?: "span";
+} & {
     children: React.ReactNode;
     isTruncated?: boolean;
     isWordBreak?: boolean;
 } & React.RefAttributes<HTMLParagraphElement>>;
 
-interface TextInternalProps extends CommonProps, MarginProps {
-    children?: React.ReactNode;
-    fontSize?: FontSizeTokens;
-    lineHeight?: LineHeightTokens;
-    fontStack?: FontStackTokens;
-    fontWeight?: FontWeightTokens;
-    fontColor?: ColorTokens;
-    isTruncated?: boolean;
-    isWordBreak?: boolean;
-}
-declare const TEXT_DEFAULT_TAG = "span";
-declare type TextProps<E extends React.ElementType = typeof TEXT_DEFAULT_TAG> = PolymorphicProps<TextInternalProps, E>;
-declare const Text: PolymorphicComponent<ExpandProps<TextInternalProps>, typeof TEXT_DEFAULT_TAG>;
-
-export { DisplayText, DisplayTextProps, Heading, HeadingElement, HeadingProps, Paragraph, ParagraphProps, SectionHeading, SectionHeadingProps, Subheading, SubheadingProps, Text, TextProps, Typography, TypographyProps };
+export { Caption, CaptionProps, DisplayText, DisplayTextProps, Heading, HeadingElement, HeadingProps, Paragraph, ParagraphProps, SectionHeading, SectionHeadingProps, Subheading, SubheadingProps, Text, TextProps };

package/dist/index.js

@@ -1,24 +1,24 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var H = require('react');
-var f = require('@contentful/f36-tokens');
+var u = require('react');
+var d = require('@contentful/f36-tokens');
 var emotion = require('emotion');
 var f36Core = require('@contentful/f36-core');
+var f36Utils = require('@contentful/f36-utils');
 
-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 H__default = /*#__PURE__*/_interopDefaultLegacy(H);
-var f__default = /*#__PURE__*/_interopDefaultLegacy(f);
+var u__default = /*#__PURE__*/_interopDefault(u);
+var d__default = /*#__PURE__*/_interopDefault(d);
 
-var O=Object.defineProperty,Y=Object.defineProperties;var v=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var x=(e,o,t)=>o in e?O(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))h.call(o,t)&&x(e,t,o[t]);if(T)for(var t of T(o))E.call(o,t)&&x(e,t,o[t]);return e},a=(e,o)=>Y(e,v(o));var i=(e,o)=>{var t={};for(var r in e)h.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&T)for(var r of T(e))o.indexOf(r)<0&&E.call(e,r)&&(t[r]=e[r]);return t};var J="span";function K(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function Q(){return emotion.css({wordBreak:"break-word"})}function S(pe,X){var P=pe,{fontSize:e="fontSizeM",fontStack:o="fontStackPrimary",fontWeight:t="fontWeightNormal",fontColor:r="gray800",lineHeight:m="lineHeightM",children:n,isTruncated:l,isWordBreak:g,as:d,className:W,margin:M="none"}=P,z=i(P,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let w=d||J;return H__default["default"].createElement(f36Core.Box,a(p({},z),{as:w,className:emotion.cx(emotion.css({padding:0,fontFamily:f__default["default"][o],fontWeight:f__default["default"][t],color:f__default["default"][r],fontSize:f__default["default"][e],lineHeight:f__default["default"][m]}),l?K():null,g?Q():null,W),margin:M,ref:X}),n)}S.displayName="Text";var s=H__default["default"].forwardRef(S);var V="h1";function A(m,r){var n=m,{children:e,testId:o="cf-ui-heading"}=n,t=i(n,["children","testId"]);return H__default["default"].createElement(s,a(p({as:V,testId:o,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},t),{ref:r}),e)}A.displayName="Heading";var D=H__default["default"].forwardRef(A);var Z="h3";function I(m,r){var n=m,{children:e,testId:o="cf-ui-subheading"}=n,t=i(n,["children","testId"]);return H__default["default"].createElement(s,a(p({as:Z,testId:o,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},t),{ref:r}),e)}I.displayName="Subheading";var L=H__default["default"].forwardRef(I);var C=e=>(H.useEffect(()=>{console.warn("Forma 36: Typography component is deprecated. You can safely remove it from your components.");},[]),H__default["default"].createElement(H__default["default"].Fragment,null,e.children));C.displayName="Typography";var ee="h2";function F(n,m){var l=n,{children:e,size:o="default",testId:t="cf-ui-display-text"}=l,r=i(l,["children","size","testId"]);let g="fontSize2Xl",d="lineHeight2Xl";return o==="large"&&(g="fontSize3Xl",d="lineHeight3Xl"),H__default["default"].createElement(s,a(p({as:ee,testId:t,marginBottom:o==="default"?"spacingL":"spacingXl",fontSize:g,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},r),{ref:m}),e)}F.displayName="DisplayText";var N=H__default["default"].forwardRef(F);var ne="h2";function b(n,m){var l=n,{children:e,className:o,testId:t="cf-ui-section-heading"}=l,r=i(l,["children","className","testId"]);return H__default["default"].createElement(s,a(p({as:ne,testId:t,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:f__default["default"].letterSpacingWide,textTransform:"uppercase"}),o)},r),{ref:m}),e)}b.displayName="SectionHeading";var U=H__default["default"].forwardRef(b);var y=H__default["default"].forwardRef((m,r)=>{var n=m,{children:e,testId:o="cf-ui-paragraph"}=n,t=i(n,["children","testId"]);return H__default["default"].createElement(s,a(p({as:"p",testId:o,marginBottom:"spacingM",lineHeight:"lineHeightM"},t),{ref:r}),e)});y.displayName="Paragraph";
+var j=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var S=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var H=(e,t,o)=>t in e?j(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,p=(e,t)=>{for(var o in t||(t={}))S.call(t,o)&&H(e,o,t[o]);if(h)for(var o of h(t))A.call(t,o)&&H(e,o,t[o]);return e},a=(e,t)=>q(e,J(t));var s=(e,t)=>{var o={};for(var n in e)S.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(e!=null&&h)for(var n of h(e))t.indexOf(n)<0&&A.call(e,n)&&(o[n]=e[n]);return o};var V="span";function Z(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function $(){return emotion.css({wordBreak:"break-word"})}function D(e,t){let E=e,{fontSize:o="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:l="fontWeightNormal",fontColor:c="gray800",lineHeight:f="lineHeightM",letterSpacing:g="letterSpacingDefault",children:r,isTruncated:i,isWordBreak:T,as:y,className:w,margin:O="none"}=E,Y=s(E,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]),v=y||V;return u__default.default.createElement(f36Core.Box,a(p({},Y),{as:v,className:emotion.cx(emotion.css({padding:0,fontFamily:d__default.default[n],fontWeight:d__default.default[l],color:d__default.default[c],fontSize:d__default.default[o],lineHeight:d__default.default[f],letterSpacing:d__default.default[g]}),i?Z():null,T?$():null,w),margin:O,ref:t}),r)}D.displayName="Text";var m=u__default.default.forwardRef(D);var te="span";function R(g,f){var r=g,{children:e,fontWeight:t="fontWeightNormal",testId:o="cf-ui-caption",as:n,fontColor:l="gray900"}=r,c=s(r,["children","fontWeight","testId","as","fontColor"]);let i=f36Utils.useDensity();return u__default.default.createElement(m,a(p({as:n||te,testId:o,fontSize:i==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:i==="high"?"lineHeightSHigh":"lineHeightS",fontColor:l,fontWeight:t},c),{ref:f}),e)}R.displayName="Caption";var I=u__default.default.forwardRef(R);var ne="h1";function L(g,f){var r=g,{children:e,testId:t="cf-ui-heading",as:o,fontColor:n="gray900",marginBottom:l="spacingM"}=r,c=s(r,["children","testId","as","fontColor","marginBottom"]);let i=f36Utils.useDensity();return u__default.default.createElement(m,a(p({as:o||ne,testId:t,marginBottom:l,fontWeight:"fontWeightDemiBold",fontColor:n,fontSize:i==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:i==="high"?"lineHeightXlHigh":"lineHeightXl"},c),{ref:f}),e)}L.displayName="Heading";var N=u__default.default.forwardRef(L);var ie="h3";function G(f,c){var g=f,{children:e,testId:t="cf-ui-subheading",as:o,fontColor:n="gray900"}=g,l=s(g,["children","testId","as","fontColor"]);let r=f36Utils.useDensity();return u__default.default.createElement(m,a(p({as:o||ie,testId:t,marginBottom:"spacingM",fontSize:r==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:r==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:n},l),{ref:c}),e)}G.displayName="Subheading";var F=u__default.default.forwardRef(G);var pe="h2";function b(g,f){var r=g,{children:e,size:t="default",testId:o="cf-ui-display-text",as:n,fontColor:l="gray900"}=r,c=s(r,["children","size","testId","as","fontColor"]);let i="fontSize2Xl",T="lineHeightXl";return t==="large"&&(i="fontSize3Xl",T="lineHeight3Xl"),u__default.default.createElement(m,a(p({as:n||pe,testId:o,marginBottom:t==="default"?"spacingL":"spacingXl",fontSize:i,lineHeight:T,fontColor:l,fontWeight:"fontWeightDemiBold"},c),{ref:f}),e)}b.displayName="DisplayText";var U=u__default.default.forwardRef(b);var fe="h2";function B(r,g){var i=r,{children:e,className:t,testId:o="cf-ui-section-heading",as:n,fontColor:l="gray600",marginBottom:c="spacingL"}=i,f=s(i,["children","className","testId","as","fontColor","marginBottom"]);let T=f36Utils.useDensity();return u__default.default.createElement(m,a(p({as:n||fe,testId:o,marginBottom:c,fontWeight:"fontWeightMedium",fontColor:l,fontSize:T==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:T==="high"?"lineHeightSHigh":"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:d__default.default.letterSpacingDefault}),t)},f),{ref:g}),e)}B.displayName="SectionHeading";var M=u__default.default.forwardRef(B);var P=u__default.default.forwardRef((c,l)=>{var f=c,{children:e,testId:t="cf-ui-paragraph",marginBottom:o="spacingM"}=f,n=s(f,["children","testId","marginBottom"]);let g=f36Utils.useDensity();return u__default.default.createElement(m,a(p({as:"p",testId:t,fontSize:g==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:g==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:o},n),{ref:l}),e)});P.displayName="Paragraph";
 
-exports.DisplayText = N;
-exports.Heading = D;
-exports.Paragraph = y;
-exports.SectionHeading = U;
-exports.Subheading = L;
-exports.Text = s;
-exports.Typography = C;
+exports.Caption = I;
+exports.DisplayText = U;
+exports.Heading = N;
+exports.Paragraph = P;
+exports.SectionHeading = M;
+exports.Subheading = F;
+exports.Text = m;
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Heading/Heading.tsx","../src/Text/Text.tsx","../src/Subheading/Subheading.tsx","../src/Typography.tsx","../src/DisplayText/DisplayText.tsx","../src/SectionHeading/SectionHeading.tsx","../src/Paragraph/Paragraph.tsx"],"names":["React","tokens","css","cx","Box","TEXT_DEFAULT_TAG","truncatedStyle","wordBreakStyle","_Text","_a","ref","_b","fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin","otherProps","__objRest","Element","__spreadProps","__spreadValues","Text","HEADING_DEFAULT_TAG","_Heading","testId","Heading","SUBHEADING_DEFAULT_TAG","_Subheading","Subheading","useEffect","Typography","props","DISPLAY_TEXT_DEFAULT_TAG","_DisplayText","size","DisplayText","SECTION_HEADING_DEFAULT_TAG","_SectionHeading","SectionHeading","Paragraph"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type {\n  CommonProps,\n  MarginProps,\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text } from '../Text';\n\nconst HEADING_DEFAULT_TAG = 'h1';\n\nexport type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface HeadingInternalProps extends CommonProps, MarginProps {\n  as?: HeadingElement;\n  children?: React.ReactNode;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type HeadingProps<\n  E extends React.ElementType = typeof HEADING_DEFAULT_TAG,\n> = PolymorphicProps<HeadingInternalProps, E>;\n\nfunction _Heading<E extends React.ElementType = typeof HEADING_DEFAULT_TAG>(\n  { children, testId = 'cf-ui-heading', ...otherProps }: HeadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  return (\n    <Text\n      as={HEADING_DEFAULT_TAG}\n      testId={testId}\n      marginBottom=\"spacingM\"\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor=\"gray900\"\n      fontSize=\"fontSizeXl\"\n      lineHeight=\"lineHeightXl\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Heading.displayName = 'Heading';\n\nexport const Heading: PolymorphicComponent<\n  ExpandProps<HeadingInternalProps>,\n  typeof HEADING_DEFAULT_TAG\n> = React.forwardRef(_Heading);\n","import React from 'react';\nimport tokens, {\n  FontSizeTokens,\n  LineHeightTokens,\n  FontWeightTokens,\n  FontStackTokens,\n  ColorTokens,\n} from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\nimport {\n  Box,\n  type PolymorphicComponent,\n  type CommonProps,\n  type MarginProps,\n  type PolymorphicProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\n\nexport interface TextInternalProps extends CommonProps, MarginProps {\n  children?: React.ReactNode;\n  fontSize?: FontSizeTokens;\n  lineHeight?: LineHeightTokens;\n  fontStack?: FontStackTokens;\n  fontWeight?: FontWeightTokens;\n  fontColor?: ColorTokens;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nconst TEXT_DEFAULT_TAG = 'span';\n\nfunction truncatedStyle() {\n  return css({\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  });\n}\n\nfunction wordBreakStyle() {\n  return css({\n    wordBreak: 'break-word',\n  });\n}\n\nexport type TextProps<E extends React.ElementType = typeof TEXT_DEFAULT_TAG> =\n  PolymorphicProps<TextInternalProps, E>;\n\nfunction _Text<E extends React.ElementType = typeof TEXT_DEFAULT_TAG>(\n  {\n    fontSize = 'fontSizeM',\n    fontStack = 'fontStackPrimary',\n    fontWeight = 'fontWeightNormal',\n    fontColor = 'gray800',\n    lineHeight = 'lineHeightM',\n    children,\n    isTruncated,\n    isWordBreak,\n    as,\n    className,\n    margin = 'none',\n    ...otherProps\n  }: TextProps<E>,\n  ref: React.Ref<any>,\n) {\n  const Element: React.ElementType = as || TEXT_DEFAULT_TAG;\n\n  return (\n    <Box\n      {...otherProps}\n      as={Element}\n      className={cx(\n        css({\n          padding: 0,\n          fontFamily: tokens[fontStack],\n          fontWeight: tokens[fontWeight],\n          color: tokens[fontColor],\n          fontSize: tokens[fontSize],\n          lineHeight: tokens[lineHeight],\n        }),\n        isTruncated ? truncatedStyle() : null,\n        isWordBreak ? wordBreakStyle() : null,\n        className,\n      )}\n      margin={margin}\n      ref={ref}\n    >\n      {children}\n    </Box>\n  );\n}\n\n_Text.displayName = 'Text';\n\nexport const Text: PolymorphicComponent<\n  ExpandProps<TextInternalProps>,\n  typeof TEXT_DEFAULT_TAG\n> = React.forwardRef(_Text);\n","import React from 'react';\nimport type {\n  CommonProps,\n  MarginProps,\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { HeadingElement } from '../Heading';\nimport { Text } from '../Text';\n\nconst SUBHEADING_DEFAULT_TAG = 'h3';\n\nexport interface SubheadingInternalProps extends CommonProps, MarginProps {\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type SubheadingProps<\n  E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG,\n> = PolymorphicProps<SubheadingInternalProps, E>;\n\nfunction _Subheading<\n  E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG,\n>(\n  { children, testId = 'cf-ui-subheading', ...otherProps }: SubheadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  return (\n    <Text\n      as={SUBHEADING_DEFAULT_TAG}\n      testId={testId}\n      marginBottom=\"spacingM\"\n      fontSize=\"fontSizeL\"\n      lineHeight=\"lineHeightL\"\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor=\"gray900\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Subheading.displayName = 'Subheading';\n\nexport const Subheading: PolymorphicComponent<\n  ExpandProps<SubheadingInternalProps>,\n  typeof SUBHEADING_DEFAULT_TAG\n> = React.forwardRef(_Subheading);\n","import React, { useEffect } from 'react';\n\nexport interface TypographyProps {\n  children?: React.ReactNode;\n}\n\n/**\n * @deprecated\n */\nexport const Typography = (props: TypographyProps) => {\n  useEffect(() => {\n    console.warn(\n      'Forma 36: Typography component is deprecated. You can safely remove it from your components.',\n    );\n  }, []);\n  return <>{props.children}</>;\n};\n\nTypography.displayName = 'Typography';\n","import React from 'react';\nimport { FontSizeTokens, LineHeightTokens } from '@contentful/f36-tokens';\nimport type {\n  CommonProps,\n  MarginProps,\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text } from '../Text';\nimport type { HeadingElement } from '../Heading';\n\nconst DISPLAY_TEXT_DEFAULT_TAG = 'h2';\n\nexport interface DisplayTextInternalProps extends CommonProps, MarginProps {\n  size?: 'default' | 'large';\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type DisplayTextProps<\n  E extends React.ElementType = typeof DISPLAY_TEXT_DEFAULT_TAG,\n> = PolymorphicProps<DisplayTextInternalProps, E>;\n\nfunction _DisplayText<\n  E extends React.ElementType = typeof DISPLAY_TEXT_DEFAULT_TAG,\n>(\n  {\n    children,\n    size = 'default',\n    testId = 'cf-ui-display-text',\n    ...otherProps\n  }: DisplayTextProps<E>,\n  ref: React.Ref<any>,\n) {\n  let fontSize: FontSizeTokens = 'fontSize2Xl';\n  let lineHeight: LineHeightTokens = 'lineHeight2Xl';\n\n  if (size === 'large') {\n    fontSize = 'fontSize3Xl';\n    lineHeight = 'lineHeight3Xl';\n  }\n\n  return (\n    <Text\n      as={DISPLAY_TEXT_DEFAULT_TAG}\n      testId={testId}\n      marginBottom={size === 'default' ? 'spacingL' : 'spacingXl'}\n      fontSize={fontSize}\n      lineHeight={lineHeight}\n      fontColor=\"gray900\"\n      fontWeight=\"fontWeightDemiBold\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_DisplayText.displayName = 'DisplayText';\n\nexport const DisplayText: PolymorphicComponent<\n  ExpandProps<DisplayTextInternalProps>,\n  typeof DISPLAY_TEXT_DEFAULT_TAG\n> = React.forwardRef(_DisplayText);\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\nimport type {\n  CommonProps,\n  MarginProps,\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { HeadingElement } from '../Heading';\nimport { Text } from '../Text';\n\nconst SECTION_HEADING_DEFAULT_TAG = 'h2';\n\nexport interface SectionHeadingInternalProps extends CommonProps, MarginProps {\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type SectionHeadingProps<\n  E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG,\n> = PolymorphicProps<SectionHeadingInternalProps, E>;\n\nfunction _SectionHeading<\n  E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG,\n>(\n  {\n    children,\n    className,\n    testId = 'cf-ui-section-heading',\n    ...otherProps\n  }: SectionHeadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  return (\n    <Text\n      as={SECTION_HEADING_DEFAULT_TAG}\n      testId={testId}\n      marginBottom=\"spacingL\"\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor=\"gray900\"\n      fontSize=\"fontSizeS\"\n      lineHeight=\"lineHeightS\"\n      className={cx(\n        css({\n          letterSpacing: tokens.letterSpacingWide,\n          textTransform: 'uppercase',\n        }),\n        className,\n      )}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_SectionHeading.displayName = 'SectionHeading';\n\nexport const SectionHeading: PolymorphicComponent<\n  ExpandProps<SectionHeadingInternalProps>,\n  typeof SECTION_HEADING_DEFAULT_TAG\n> = React.forwardRef(_SectionHeading);\n","import React from 'react';\nimport type {\n  PropsWithHTMLElement,\n  CommonProps,\n  MarginProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text } from '../Text';\n\nexport type ParagraphInternalProps = CommonProps &\n  MarginProps & {\n    children: React.ReactNode;\n    isTruncated?: boolean;\n    isWordBreak?: boolean;\n  };\n\nexport type ParagraphProps = PropsWithHTMLElement<ParagraphInternalProps, 'p'>;\n\nexport const Paragraph = React.forwardRef<\n  HTMLParagraphElement,\n  ExpandProps<ParagraphProps>\n>(({ children, testId = 'cf-ui-paragraph', ...otherProps }, ref) => {\n  return (\n    <Text\n      as=\"p\"\n      testId={testId}\n      marginBottom=\"spacingM\"\n      lineHeight=\"lineHeightM\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n});\n\nParagraph.displayName = 'Paragraph';\n"]}
+{"version":3,"sources":["../src/Caption/Caption.tsx","../src/Text/Text.tsx","../src/Heading/Heading.tsx","../src/Subheading/Subheading.tsx","../src/DisplayText/DisplayText.tsx","../src/SectionHeading/SectionHeading.tsx","../src/Paragraph/Paragraph.tsx"],"names":["React","tokens","css","cx","Box","TEXT_DEFAULT_TAG","truncatedStyle","wordBreakStyle","_Text","props","ref","_a","fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin","otherProps","__objRest","Element","__spreadProps","__spreadValues","Text","useDensity","CAPTION_DEFAULT_TAG","_Caption","_b","testId","density","Caption","HEADING_DEFAULT_TAG","_Heading","marginBottom","Heading","SUBHEADING_DEFAULT_TAG","_Subheading","Subheading","DISPLAY_TEXT_DEFAULT_TAG","_DisplayText","size","DisplayText","SECTION_HEADING_DEFAULT_TAG","_SectionHeading","SectionHeading","Paragraph"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FontWeightTokens } from '@contentful/f36-tokens';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nconst CAPTION_DEFAULT_TAG = 'span';\n\nexport interface CaptionInternalProps extends Omit<TextProps, 'as'> {\n  children?: React.ReactNode;\n  fontWeight?: Extract<\n    FontWeightTokens,\n    'fontWeightNormal' | 'fontWeightMedium'\n  >;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type CaptionProps<\n  E extends React.ElementType = typeof CAPTION_DEFAULT_TAG,\n> = PolymorphicProps<CaptionInternalProps, E>;\n\nfunction _Caption<E extends React.ElementType = typeof CAPTION_DEFAULT_TAG>(\n  {\n    children,\n    fontWeight = 'fontWeightNormal',\n    testId = 'cf-ui-caption',\n    as,\n    fontColor = 'gray900',\n    ...otherProps\n  }: CaptionProps<E>,\n  ref: React.Ref<any>,\n) {\n  const density = useDensity();\n  const Element: React.ElementType = as || CAPTION_DEFAULT_TAG;\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}\n      lineHeight={density === 'high' ? 'lineHeightSHigh' : 'lineHeightS'}\n      fontColor={fontColor}\n      fontWeight={fontWeight}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Caption.displayName = 'Caption';\n\nexport const Caption: PolymorphicComponent<\n  ExpandProps<CaptionInternalProps>,\n  typeof CAPTION_DEFAULT_TAG\n> = React.forwardRef(_Caption);\n","import React from 'react';\nimport tokens, {\n  FontSizeTokens,\n  LineHeightTokens,\n  FontWeightTokens,\n  FontStackTokens,\n  ColorTokens,\n  LetterSpacingTokens,\n} from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\nimport {\n  Box,\n  type PolymorphicComponent,\n  type CommonProps,\n  type MarginProps,\n  type PolymorphicProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\n\nexport interface TextInternalProps extends CommonProps, MarginProps {\n  children?: React.ReactNode;\n  fontSize?: FontSizeTokens;\n  lineHeight?: LineHeightTokens;\n  letterSpacing?: LetterSpacingTokens;\n  fontStack?: FontStackTokens;\n  fontWeight?: FontWeightTokens;\n  fontColor?: ColorTokens;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nconst TEXT_DEFAULT_TAG = 'span';\n\nfunction truncatedStyle() {\n  return css({\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  });\n}\n\nfunction wordBreakStyle() {\n  return css({\n    wordBreak: 'break-word',\n  });\n}\n\nexport type TextProps<E extends React.ElementType = typeof TEXT_DEFAULT_TAG> =\n  PolymorphicProps<TextInternalProps, E, 'color'>;\n\nfunction _Text<E extends React.ElementType = typeof TEXT_DEFAULT_TAG>(\n  props: TextProps<E>,\n  ref: React.Ref<any>,\n) {\n  const {\n    fontSize = 'fontSizeM',\n    fontStack = 'fontStackPrimary',\n    fontWeight = 'fontWeightNormal',\n    fontColor = 'gray800',\n    lineHeight = 'lineHeightM',\n    letterSpacing = 'letterSpacingDefault',\n    children,\n    isTruncated,\n    isWordBreak,\n    as,\n    className,\n    margin = 'none',\n    ...otherProps\n  } = props;\n  const Element: React.ElementType = as || TEXT_DEFAULT_TAG;\n\n  return (\n    <Box\n      {...otherProps}\n      as={Element}\n      className={cx(\n        css({\n          padding: 0,\n          fontFamily: tokens[fontStack],\n          fontWeight: tokens[fontWeight],\n          color: tokens[fontColor],\n          fontSize: tokens[fontSize],\n          lineHeight: tokens[lineHeight],\n          letterSpacing: tokens[letterSpacing],\n        }),\n        isTruncated ? truncatedStyle() : null,\n        isWordBreak ? wordBreakStyle() : null,\n        className,\n      )}\n      margin={margin}\n      ref={ref}\n    >\n      {children}\n    </Box>\n  );\n}\n\n_Text.displayName = 'Text';\n\nexport const Text: PolymorphicComponent<\n  ExpandProps<TextInternalProps>,\n  typeof TEXT_DEFAULT_TAG,\n  'color'\n> = React.forwardRef(_Text);\n","import React from 'react';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nconst HEADING_DEFAULT_TAG = 'h1';\n\nexport type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface HeadingInternalProps extends Omit<TextProps, 'as'> {\n  as?: HeadingElement;\n  children?: React.ReactNode;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type HeadingProps<\n  E extends React.ElementType = typeof HEADING_DEFAULT_TAG,\n> = PolymorphicProps<HeadingInternalProps, E>;\n\nfunction _Heading<E extends React.ElementType = typeof HEADING_DEFAULT_TAG>(\n  {\n    children,\n    testId = 'cf-ui-heading',\n    as,\n    fontColor = 'gray900',\n    marginBottom = 'spacingM',\n    ...otherProps\n  }: HeadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  const density = useDensity();\n  const Element: React.ElementType = as || HEADING_DEFAULT_TAG;\n\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      marginBottom={marginBottom}\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor={fontColor}\n      fontSize={density === 'high' ? 'fontSizeXlHigh' : 'fontSizeXl'}\n      lineHeight={density === 'high' ? 'lineHeightXlHigh' : 'lineHeightXl'}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Heading.displayName = 'Heading';\n\nexport const Heading: PolymorphicComponent<\n  ExpandProps<HeadingInternalProps>,\n  typeof HEADING_DEFAULT_TAG\n> = React.forwardRef(_Heading);\n","import React from 'react';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { HeadingElement } from '../Heading';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nconst SUBHEADING_DEFAULT_TAG = 'h3';\n\nexport interface SubheadingInternalProps extends Omit<TextProps, 'as'> {\n  children?: React.ReactNode;\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type SubheadingProps<\n  E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG,\n> = PolymorphicProps<SubheadingInternalProps, E>;\n\nfunction _Subheading<\n  E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG,\n>(\n  {\n    children,\n    testId = 'cf-ui-subheading',\n    as,\n    fontColor = 'gray900',\n    ...otherProps\n  }: SubheadingProps<E>,\n  ref: React.Ref<any>,\n) {\n  const density = useDensity();\n  const Element: React.ElementType = as || SUBHEADING_DEFAULT_TAG;\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      marginBottom=\"spacingM\"\n      fontSize={density === 'high' ? 'fontSizeLHigh' : 'fontSizeL'}\n      lineHeight={density === 'high' ? 'lineHeightLHigh' : 'lineHeightL'}\n      fontWeight=\"fontWeightDemiBold\"\n      fontColor={fontColor}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_Subheading.displayName = 'Subheading';\n\nexport const Subheading: PolymorphicComponent<\n  ExpandProps<SubheadingInternalProps>,\n  typeof SUBHEADING_DEFAULT_TAG\n> = React.forwardRef(_Subheading);\n","import React from 'react';\nimport { FontSizeTokens, LineHeightTokens } from '@contentful/f36-tokens';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { Text, type TextProps } from '../Text';\nimport type { HeadingElement } from '../Heading';\n\nconst DISPLAY_TEXT_DEFAULT_TAG = 'h2';\n\nexport interface DisplayTextInternalProps extends Omit<TextProps, 'as'> {\n  children?: React.ReactNode;\n  size?: 'default' | 'large';\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type DisplayTextProps<\n  E extends React.ElementType = typeof DISPLAY_TEXT_DEFAULT_TAG,\n> = PolymorphicProps<DisplayTextInternalProps, E>;\n\nfunction _DisplayText<\n  E extends React.ElementType = typeof DISPLAY_TEXT_DEFAULT_TAG,\n>(\n  {\n    children,\n    size = 'default',\n    testId = 'cf-ui-display-text',\n    as,\n    fontColor = 'gray900',\n    ...otherProps\n  }: DisplayTextProps<E>,\n  ref: React.Ref<any>,\n) {\n  let fontSize: FontSizeTokens = 'fontSize2Xl';\n  let lineHeight: LineHeightTokens = 'lineHeightXl';\n\n  if (size === 'large') {\n    fontSize = 'fontSize3Xl';\n    lineHeight = 'lineHeight3Xl';\n  }\n  const Element: React.ElementType = as || DISPLAY_TEXT_DEFAULT_TAG;\n\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      marginBottom={size === 'default' ? 'spacingL' : 'spacingXl'}\n      fontSize={fontSize}\n      lineHeight={lineHeight}\n      fontColor={fontColor}\n      fontWeight=\"fontWeightDemiBold\"\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_DisplayText.displayName = 'DisplayText';\n\nexport const DisplayText: PolymorphicComponent<\n  ExpandProps<DisplayTextInternalProps>,\n  typeof DISPLAY_TEXT_DEFAULT_TAG\n> = React.forwardRef(_DisplayText);\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { HeadingElement } from '../Heading';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nconst SECTION_HEADING_DEFAULT_TAG = 'h2';\n\nexport interface SectionHeadingInternalProps extends Omit<TextProps, 'as'> {\n  children?: React.ReactNode;\n  as?: HeadingElement;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n}\n\nexport type SectionHeadingProps<\n  E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG,\n> = PolymorphicProps<SectionHeadingInternalProps, E>;\n\nfunction _SectionHeading<\n  E extends React.ElementType = typeof SECTION_HEADING_DEFAULT_TAG,\n>(\n  {\n    children,\n    className,\n    testId = 'cf-ui-section-heading',\n    as,\n    fontColor = 'gray600',\n    marginBottom = 'spacingL',\n    ...otherProps\n  }: SectionHeadingProps<E>,\n  ref: React.Ref<HTMLHeadingElement>,\n) {\n  const density = useDensity();\n  const Element: React.ElementType = as || SECTION_HEADING_DEFAULT_TAG;\n\n  return (\n    <Text\n      as={Element}\n      testId={testId}\n      marginBottom={marginBottom}\n      fontWeight=\"fontWeightMedium\"\n      fontColor={fontColor}\n      fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}\n      lineHeight={density === 'high' ? 'lineHeightSHigh' : 'lineHeightS'}\n      className={cx(\n        css({\n          letterSpacing: tokens.letterSpacingDefault,\n        }),\n        className,\n      )}\n      {...otherProps}\n      ref={ref}\n    >\n      {children}\n    </Text>\n  );\n}\n\n_SectionHeading.displayName = 'SectionHeading';\n\nexport const SectionHeading: PolymorphicComponent<\n  ExpandProps<SectionHeadingInternalProps>,\n  typeof SECTION_HEADING_DEFAULT_TAG\n> = React.forwardRef(_SectionHeading);\n","import React from 'react';\nimport type { PropsWithHTMLElement, ExpandProps } from '@contentful/f36-core';\nimport { Text, type TextProps } from '../Text';\nimport { useDensity } from '@contentful/f36-utils';\n\nexport type ParagraphInternalProps = TextProps & {\n  children: React.ReactNode;\n  isTruncated?: boolean;\n  isWordBreak?: boolean;\n};\n\nexport type ParagraphProps = PropsWithHTMLElement<ParagraphInternalProps, 'p'>;\n\nexport const Paragraph = React.forwardRef<\n  HTMLParagraphElement,\n  ExpandProps<ParagraphProps>\n>(\n  (\n    {\n      children,\n      testId = 'cf-ui-paragraph',\n      marginBottom = 'spacingM',\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const density = useDensity();\n\n    return (\n      <Text\n        as=\"p\"\n        testId={testId}\n        fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}\n        lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}\n        marginBottom={marginBottom}\n        {...otherProps}\n        ref={ref}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n\nParagraph.displayName = 'Paragraph';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-typography",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "description": "Forma 36: typography React Component",
   "license": "MIT",
   "files": [
@@ -14,20 +14,23 @@
   "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-tokens": "^5.1.0",
+    "@contentful/f36-utils": "^5.1.0",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "publishConfig": {
+    "registry": "https://npm.pkg.github.com/",
     "access": "public"
   }
 }