@mirohq/design-system-typography 1.1.2-dummy.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +13 -2
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +13 -2
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +6 -6
  6. package/package.json +4 -4
package/dist/main.js CHANGED
@@ -44,6 +44,11 @@ const styles = {
44
44
  lineHeight: 1.5,
45
45
  fontSize: "$200",
46
46
  fontWeight: "$semibold"
47
+ },
48
+ 5: {
49
+ lineHeight: 1.4,
50
+ fontSize: "$175",
51
+ fontWeight: "$semibold"
47
52
  }
48
53
  }
49
54
  }
@@ -52,13 +57,15 @@ const H1 = designSystemStitches.styled(designSystemPrimitive.Primitive.h1, style
52
57
  const H2 = designSystemStitches.styled(designSystemPrimitive.Primitive.h2, styles);
53
58
  const H3 = designSystemStitches.styled(designSystemPrimitive.Primitive.h3, styles);
54
59
  const H4 = designSystemStitches.styled(designSystemPrimitive.Primitive.h4, styles);
60
+ const H5 = designSystemStitches.styled(designSystemPrimitive.Primitive.h5, styles);
55
61
 
56
62
  var Styled = /*#__PURE__*/Object.freeze({
57
63
  __proto__: null,
58
64
  H1: H1,
59
65
  H2: H2,
60
66
  H3: H3,
61
- H4: H4
67
+ H4: H4,
68
+ H5: H5
62
69
  });
63
70
 
64
71
  const Heading = React__default["default"].forwardRef(
@@ -92,6 +99,9 @@ const textStyles = {
92
99
  },
93
100
  mini: {
94
101
  fontSize: "$150"
102
+ },
103
+ tiny: {
104
+ fontSize: "$125"
95
105
  }
96
106
  },
97
107
  weight: {
@@ -154,7 +164,8 @@ const StyledParagraph = designSystemStitches.styled(designSystemPrimitive.Primit
154
164
  size: {
155
165
  normal: textStyles.size.normal,
156
166
  small: textStyles.size.small,
157
- mini: textStyles.size.mini
167
+ mini: textStyles.size.mini,
168
+ tiny: textStyles.size.tiny
158
169
  },
159
170
  weight: {
160
171
  normal: textStyles.weight.normal,
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/styles.ts","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n display: 'block',\n fontFamily: '$heading',\n margin: 0,\n color: '$text-neutrals',\n fontStyle: 'normal',\n fontWeight: 500,\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n fontWeight: '$semibold',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n fontWeight: '$semibold',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\n/** @knipignore */\nexport const H2 = styled(Primitive.h2, styles)\n/** @knipignore */\nexport const H3 = styled(Primitive.h3, styles)\n/** @knipignore */\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends Omit<StyledHeadingProps, 'debug'> {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel\n {...props}\n debug={debug}\n level={styledAsLevel ?? level}\n ref={forwardRef}\n >\n {children}\n </HeadingLevel>\n )\n }\n)\n","export const textStyles = {\n default: {\n lineHeight: 1.5,\n },\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n}\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { textStyles } from './styles'\n\nexport const StyledText = styled(Primitive.span, {\n ...textStyles.default,\n\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n size: {\n normal: textStyles.size.normal,\n small: textStyles.size.small,\n mini: textStyles.size.mini,\n },\n weight: {\n normal: textStyles.weight.normal,\n bold: textStyles.weight.bold,\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends Omit<StyledTextProps, 'debug'> {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n return (\n <StyledText\n {...restProps}\n ref={forwardRef}\n debug={debug}\n size={size}\n weight={weight}\n />\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { textStyles } from './styles'\n\nexport const StyledParagraph = styled(Primitive.p, {\n ...textStyles.default,\n margin: 0,\n\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n size: {\n normal: textStyles.size.normal,\n small: textStyles.size.small,\n mini: textStyles.size.mini,\n },\n weight: {\n normal: textStyles.weight.normal,\n bold: textStyles.weight.bold,\n },\n },\n})\n\nexport type StyledParagraphProps = ComponentPropsWithRef<typeof StyledParagraph>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport type { StyledParagraphProps } from './paragraph.styled'\nimport { StyledParagraph } from './paragraph.styled'\n\nexport interface ParagraphProps extends Omit<StyledParagraphProps, 'debug'> {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: StyledParagraphProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: StyledParagraphProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<ElementRef<'p'>, ParagraphProps>(\n (props, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n return <StyledParagraph ref={forwardRef} debug={debug} {...props} />\n }\n)\n"],"names":["styled","Primitive","React","useLocalStorage","jsx"],"mappings":";;;;;;;;;;;;;;AAIA,MAAM,MAAS,GAAA;AAAA,EACb,OAAS,EAAA,OAAA;AAAA,EACT,UAAY,EAAA,UAAA;AAAA,EACZ,MAAQ,EAAA,CAAA;AAAA,EACR,KAAO,EAAA,gBAAA;AAAA,EACP,SAAW,EAAA,QAAA;AAAA,EACX,UAAY,EAAA,GAAA;AAAA,EACZ,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,KAAO,EAAA,oBAAA;AAAA,OACT;AAAA,MACA,OAAO,EAAC;AAAA,KACV;AAAA,IACA,KAAO,EAAA;AAAA,MACL,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,IAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,WAAA;AAAA,OACd;AAAA,MACA,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,WAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF,CAAA,CAAA;AAEO,MAAM,EAAK,GAAAA,2BAAA,CAAOC,+BAAU,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AAEtC,MAAM,EAAK,GAAAD,2BAAA,CAAOC,+BAAU,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AAEtC,MAAM,EAAK,GAAAD,2BAAA,CAAOC,+BAAU,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AAEtC,MAAM,EAAK,GAAAD,2BAAA,CAAOC,+BAAU,CAAA,EAAA,EAAI,MAAM,CAAA;;;;;;;;;;ACzBtC,MAAM,UAAUC,yBAAM,CAAA,UAAA;AAAA,EAC3B,CAAC,EAAE,KAAO,EAAA,QAAA,EAAU,UAAU,GAAG,KAAA,IAAS,UAAe,KAAA;AACvD,IAAA,MAAM,CAAC,KAAK,CAAI,GAAAC,2CAAA,CAAgB,cAAc,KAAK,CAAA,CAAA;AAEnD,IAAM,MAAA,YAAA,GAAe,MAAO,CAAA,GAAA,CAAI,MAAO,CAAA,KAAA,CAAA,CAAA,CAAA;AACvC,IAAM,MAAA,aAAA,GACJ,aAAa,KAAa,CAAA,GAAA,CAAC,SAAS,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAc,GAAA,QAAA,CAAA;AACnE,IACE,uBAAAC,cAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,KAAA;AAAA,QACA,OAAO,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,KAAA;AAAA,QACxB,GAAK,EAAA,UAAA;AAAA,QAEJ,QAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACF;;ACxCO,MAAM,UAAa,GAAA;AAAA,EACxB,OAAS,EAAA;AAAA,IACP,UAAY,EAAA,GAAA;AAAA,GACd;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA,MAAA;AAAA,KACZ;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAU,EAAA,MAAA;AAAA,KACZ;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA,MAAA;AAAA,KACZ;AAAA,GACF;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,MAAQ,EAAA;AAAA,MACN,UAAY,EAAA,GAAA;AAAA,KACd;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,UAAY,EAAA,GAAA;AAAA,KACd;AAAA,GACF;AACF,CAAA;;ACjBa,MAAA,UAAA,GAAaJ,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EAC/C,GAAG,UAAW,CAAA,OAAA;AAAA,EAEd,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,KAAO,EAAA,oBAAA;AAAA,OACT;AAAA,MACA,OAAO,EAAC;AAAA,KACV;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAA,EAAQ,WAAW,IAAK,CAAA,MAAA;AAAA,MACxB,KAAA,EAAO,WAAW,IAAK,CAAA,KAAA;AAAA,MACvB,IAAA,EAAM,WAAW,IAAK,CAAA,IAAA;AAAA,KACxB;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,MAAA,EAAQ,WAAW,MAAO,CAAA,MAAA;AAAA,MAC1B,IAAA,EAAM,WAAW,MAAO,CAAA,IAAA;AAAA,KAC1B;AAAA,GACF;AACF,CAAC,CAAA;;ACFM,MAAM,OAAOC,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,IAAA,EAAM,QAAQ,GAAG,SAAA,IAAa,UAAe,KAAA;AAC9C,IAAA,MAAM,CAAC,KAAK,CAAI,GAAAC,2CAAA,CAAgB,cAAc,KAAK,CAAA,CAAA;AAEnD,IACE,uBAAAC,cAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,GAAK,EAAA,UAAA;AAAA,QACL,KAAA;AAAA,QACA,IAAA;AAAA,QACA,MAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;AChCa,MAAA,eAAA,GAAkBJ,2BAAO,CAAAC,+BAAA,CAAU,CAAG,EAAA;AAAA,EACjD,GAAG,UAAW,CAAA,OAAA;AAAA,EACd,MAAQ,EAAA,CAAA;AAAA,EAER,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,KAAO,EAAA,oBAAA;AAAA,OACT;AAAA,MACA,OAAO,EAAC;AAAA,KACV;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAA,EAAQ,WAAW,IAAK,CAAA,MAAA;AAAA,MACxB,KAAA,EAAO,WAAW,IAAK,CAAA,KAAA;AAAA,MACvB,IAAA,EAAM,WAAW,IAAK,CAAA,IAAA;AAAA,KACxB;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,MAAA,EAAQ,WAAW,MAAO,CAAA,MAAA;AAAA,MAC1B,IAAA,EAAM,WAAW,MAAO,CAAA,IAAA;AAAA,KAC1B;AAAA,GACF;AACF,CAAC,CAAA;;ACHM,MAAM,YAAYC,yBAAM,CAAA,UAAA;AAAA,EAC7B,CAAC,OAAO,UAAe,KAAA;AACrB,IAAA,MAAM,CAAC,KAAK,CAAI,GAAAC,2CAAA,CAAgB,cAAc,KAAK,CAAA,CAAA;AAEnD,IAAA,sCAAQ,eAAgB,EAAA,EAAA,GAAA,EAAK,UAAY,EAAA,KAAA,EAAe,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,GACpE;AACF;;;;;;"}
1
+ {"version":3,"file":"main.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/styles.ts","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n display: 'block',\n fontFamily: '$heading',\n margin: 0,\n color: '$text-neutrals',\n fontStyle: 'normal',\n fontWeight: 500,\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n fontWeight: '$semibold',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n fontWeight: '$semibold',\n },\n 5: {\n lineHeight: 1.4,\n fontSize: '$175',\n fontWeight: '$semibold',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\n/** @knipignore */\nexport const H2 = styled(Primitive.h2, styles)\n/** @knipignore */\nexport const H3 = styled(Primitive.h3, styles)\n/** @knipignore */\nexport const H4 = styled(Primitive.h4, styles)\n/** @knipignore */\nexport const H5 = styled(Primitive.h5, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4 | 5\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5'\n\nexport interface HeadingProps extends Omit<StyledHeadingProps, 'debug'> {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel\n {...props}\n debug={debug}\n level={styledAsLevel ?? level}\n ref={forwardRef}\n >\n {children}\n </HeadingLevel>\n )\n }\n)\n","export const textStyles = {\n default: {\n lineHeight: 1.5,\n },\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n tiny: {\n fontSize: '$125',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n}\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { textStyles } from './styles'\n\nexport const StyledText = styled(Primitive.span, {\n ...textStyles.default,\n\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n size: {\n normal: textStyles.size.normal,\n small: textStyles.size.small,\n mini: textStyles.size.mini,\n },\n weight: {\n normal: textStyles.weight.normal,\n bold: textStyles.weight.bold,\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends Omit<StyledTextProps, 'debug'> {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n return (\n <StyledText\n {...restProps}\n ref={forwardRef}\n debug={debug}\n size={size}\n weight={weight}\n />\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { textStyles } from './styles'\n\nexport const StyledParagraph = styled(Primitive.p, {\n ...textStyles.default,\n margin: 0,\n\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n size: {\n normal: textStyles.size.normal,\n small: textStyles.size.small,\n mini: textStyles.size.mini,\n tiny: textStyles.size.tiny,\n },\n weight: {\n normal: textStyles.weight.normal,\n bold: textStyles.weight.bold,\n },\n },\n})\n\nexport type StyledParagraphProps = ComponentPropsWithRef<typeof StyledParagraph>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport type { StyledParagraphProps } from './paragraph.styled'\nimport { StyledParagraph } from './paragraph.styled'\n\nexport interface ParagraphProps extends Omit<StyledParagraphProps, 'debug'> {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: StyledParagraphProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: StyledParagraphProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<ElementRef<'p'>, ParagraphProps>(\n (props, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n return <StyledParagraph ref={forwardRef} debug={debug} {...props} />\n }\n)\n"],"names":["styled","Primitive","React","useLocalStorage","jsx"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -36,6 +36,11 @@ const styles = {
36
36
  lineHeight: 1.5,
37
37
  fontSize: "$200",
38
38
  fontWeight: "$semibold"
39
+ },
40
+ 5: {
41
+ lineHeight: 1.4,
42
+ fontSize: "$175",
43
+ fontWeight: "$semibold"
39
44
  }
40
45
  }
41
46
  }
@@ -44,13 +49,15 @@ const H1 = styled(Primitive.h1, styles);
44
49
  const H2 = styled(Primitive.h2, styles);
45
50
  const H3 = styled(Primitive.h3, styles);
46
51
  const H4 = styled(Primitive.h4, styles);
52
+ const H5 = styled(Primitive.h5, styles);
47
53
 
48
54
  var Styled = /*#__PURE__*/Object.freeze({
49
55
  __proto__: null,
50
56
  H1: H1,
51
57
  H2: H2,
52
58
  H3: H3,
53
- H4: H4
59
+ H4: H4,
60
+ H5: H5
54
61
  });
55
62
 
56
63
  const Heading = React.forwardRef(
@@ -84,6 +91,9 @@ const textStyles = {
84
91
  },
85
92
  mini: {
86
93
  fontSize: "$150"
94
+ },
95
+ tiny: {
96
+ fontSize: "$125"
87
97
  }
88
98
  },
89
99
  weight: {
@@ -146,7 +156,8 @@ const StyledParagraph = styled(Primitive.p, {
146
156
  size: {
147
157
  normal: textStyles.size.normal,
148
158
  small: textStyles.size.small,
149
- mini: textStyles.size.mini
159
+ mini: textStyles.size.mini,
160
+ tiny: textStyles.size.tiny
150
161
  },
151
162
  weight: {
152
163
  normal: textStyles.weight.normal,
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/styles.ts","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n display: 'block',\n fontFamily: '$heading',\n margin: 0,\n color: '$text-neutrals',\n fontStyle: 'normal',\n fontWeight: 500,\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n fontWeight: '$semibold',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n fontWeight: '$semibold',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\n/** @knipignore */\nexport const H2 = styled(Primitive.h2, styles)\n/** @knipignore */\nexport const H3 = styled(Primitive.h3, styles)\n/** @knipignore */\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends Omit<StyledHeadingProps, 'debug'> {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel\n {...props}\n debug={debug}\n level={styledAsLevel ?? level}\n ref={forwardRef}\n >\n {children}\n </HeadingLevel>\n )\n }\n)\n","export const textStyles = {\n default: {\n lineHeight: 1.5,\n },\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n}\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { textStyles } from './styles'\n\nexport const StyledText = styled(Primitive.span, {\n ...textStyles.default,\n\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n size: {\n normal: textStyles.size.normal,\n small: textStyles.size.small,\n mini: textStyles.size.mini,\n },\n weight: {\n normal: textStyles.weight.normal,\n bold: textStyles.weight.bold,\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends Omit<StyledTextProps, 'debug'> {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n return (\n <StyledText\n {...restProps}\n ref={forwardRef}\n debug={debug}\n size={size}\n weight={weight}\n />\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { textStyles } from './styles'\n\nexport const StyledParagraph = styled(Primitive.p, {\n ...textStyles.default,\n margin: 0,\n\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n size: {\n normal: textStyles.size.normal,\n small: textStyles.size.small,\n mini: textStyles.size.mini,\n },\n weight: {\n normal: textStyles.weight.normal,\n bold: textStyles.weight.bold,\n },\n },\n})\n\nexport type StyledParagraphProps = ComponentPropsWithRef<typeof StyledParagraph>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport type { StyledParagraphProps } from './paragraph.styled'\nimport { StyledParagraph } from './paragraph.styled'\n\nexport interface ParagraphProps extends Omit<StyledParagraphProps, 'debug'> {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: StyledParagraphProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: StyledParagraphProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<ElementRef<'p'>, ParagraphProps>(\n (props, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n return <StyledParagraph ref={forwardRef} debug={debug} {...props} />\n }\n)\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/styles.ts","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n display: 'block',\n fontFamily: '$heading',\n margin: 0,\n color: '$text-neutrals',\n fontStyle: 'normal',\n fontWeight: 500,\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n fontWeight: '$semibold',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n fontWeight: '$semibold',\n },\n 5: {\n lineHeight: 1.4,\n fontSize: '$175',\n fontWeight: '$semibold',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\n/** @knipignore */\nexport const H2 = styled(Primitive.h2, styles)\n/** @knipignore */\nexport const H3 = styled(Primitive.h3, styles)\n/** @knipignore */\nexport const H4 = styled(Primitive.h4, styles)\n/** @knipignore */\nexport const H5 = styled(Primitive.h5, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4 | 5\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5'\n\nexport interface HeadingProps extends Omit<StyledHeadingProps, 'debug'> {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel\n {...props}\n debug={debug}\n level={styledAsLevel ?? level}\n ref={forwardRef}\n >\n {children}\n </HeadingLevel>\n )\n }\n)\n","export const textStyles = {\n default: {\n lineHeight: 1.5,\n },\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n tiny: {\n fontSize: '$125',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n}\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { textStyles } from './styles'\n\nexport const StyledText = styled(Primitive.span, {\n ...textStyles.default,\n\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n size: {\n normal: textStyles.size.normal,\n small: textStyles.size.small,\n mini: textStyles.size.mini,\n },\n weight: {\n normal: textStyles.weight.normal,\n bold: textStyles.weight.bold,\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends Omit<StyledTextProps, 'debug'> {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n return (\n <StyledText\n {...restProps}\n ref={forwardRef}\n debug={debug}\n size={size}\n weight={weight}\n />\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { textStyles } from './styles'\n\nexport const StyledParagraph = styled(Primitive.p, {\n ...textStyles.default,\n margin: 0,\n\n variants: {\n debug: {\n true: {\n color: '#06D834 !important',\n },\n false: {},\n },\n size: {\n normal: textStyles.size.normal,\n small: textStyles.size.small,\n mini: textStyles.size.mini,\n tiny: textStyles.size.tiny,\n },\n weight: {\n normal: textStyles.weight.normal,\n bold: textStyles.weight.bold,\n },\n },\n})\n\nexport type StyledParagraphProps = ComponentPropsWithRef<typeof StyledParagraph>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useLocalStorage } from '@mirohq/design-system-use-local-storage'\n\nimport type { StyledParagraphProps } from './paragraph.styled'\nimport { StyledParagraph } from './paragraph.styled'\n\nexport interface ParagraphProps extends Omit<StyledParagraphProps, 'debug'> {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: StyledParagraphProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: StyledParagraphProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<ElementRef<'p'>, ParagraphProps>(\n (props, forwardRef) => {\n const [debug] = useLocalStorage('DEBUG_TEXT', false)\n\n return <StyledParagraph ref={forwardRef} debug={debug} {...props} />\n }\n)\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -6,15 +6,15 @@ import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitiv
6
6
 
7
7
  declare const H1: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"h1">>>, "debug" | "level"> & _stitches_react_types_styled_component.TransformProps<{
8
8
  debug?: boolean | "true" | "false" | undefined;
9
- level?: "1" | "2" | "3" | "4" | 1 | 3 | 2 | 4 | undefined;
9
+ level?: "1" | "2" | "3" | "4" | 1 | 3 | 2 | 4 | 5 | "5" | undefined;
10
10
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLHeadingElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"h1">>, {
11
11
  debug?: boolean | "true" | "false" | undefined;
12
- level?: "1" | "2" | "3" | "4" | 1 | 3 | 2 | 4 | undefined;
12
+ level?: "1" | "2" | "3" | "4" | 1 | 3 | 2 | 4 | 5 | "5" | undefined;
13
13
  }, {}>;
14
14
  type StyledHeadingProps = ComponentPropsWithRef<typeof H1>;
15
15
 
16
- type Level = 1 | 2 | 3 | 4;
17
- type Tags = 'h1' | 'h2' | 'h3' | 'h4';
16
+ type Level = 1 | 2 | 3 | 4 | 5;
17
+ type Tags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
18
18
  interface HeadingProps extends Omit<StyledHeadingProps, 'debug'> {
19
19
  /**
20
20
  * The sematic heading level used in the HTML markup.
@@ -56,11 +56,11 @@ declare const Text: react__default.ForwardRefExoticComponent<Omit<TextProps, "re
56
56
 
57
57
  declare const StyledParagraph: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"p">>>, "size" | "weight" | "debug"> & _stitches_react_types_styled_component.TransformProps<{
58
58
  debug?: boolean | "true" | "false" | undefined;
59
- size?: "normal" | "small" | "mini" | undefined;
59
+ size?: "normal" | "small" | "mini" | "tiny" | undefined;
60
60
  weight?: "normal" | "bold" | undefined;
61
61
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLParagraphElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"p">>, {
62
62
  debug?: boolean | "true" | "false" | undefined;
63
- size?: "normal" | "small" | "mini" | undefined;
63
+ size?: "normal" | "small" | "mini" | "tiny" | undefined;
64
64
  weight?: "normal" | "bold" | undefined;
65
65
  }, {}>;
66
66
  type StyledParagraphProps = ComponentPropsWithRef<typeof StyledParagraph>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-typography",
3
- "version": "1.1.2-dummy.0",
3
+ "version": "1.2.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,9 +26,9 @@
26
26
  "react": "^16.14 || ^17 || ^18 || ^19"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-primitive": "^2.1.1-dummy.0",
30
- "@mirohq/design-system-stitches": "^3.1.2-dummy.0",
31
- "@mirohq/design-system-use-local-storage": "^1.1.1-dummy.0"
29
+ "@mirohq/design-system-primitive": "^2.1.0",
30
+ "@mirohq/design-system-stitches": "^3.1.1",
31
+ "@mirohq/design-system-use-local-storage": "^1.1.0"
32
32
  },
33
33
  "scripts": {
34
34
  "build": "rollup -c ../../../rollup.config.js",