@elliemae/ds-typography 3.70.0-next.4 → 3.70.0-next.41

package/dist/esm/parts/variants/link.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/link.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype LinkCSSMap = {\n  [key in DSTypographyT.LinkVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_LINK: LinkCSSMap = {\n  [TYPOGRAPHY_VARIANTS.LINK]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.LINK_SML_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.875rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.077rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.LINK_MED_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.231rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.LINK_LRG_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.385rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype LinkCSSMap = {\n  [key in DSTypographyT.LinkVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_LINK: LinkCSSMap = {\n  [TYPOGRAPHY_VARIANTS.LINK]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.LINK_SML_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.875rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.077rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.LINK_MED_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.231rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.LINK_LRG_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.385rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/variants/quote.js

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { css } from "@elliemae/ds-system";
 import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
+import { typographyFontFamily } from "../typographyFontFamily.js";
 const typedCss = () => css``;
 const VARIANTS_CSS_QUOTE = {
   // font-size: 18px/RT | line-height: 28px/RT
   [TYPOGRAPHY_VARIANTS.QUOTE_NEUTRAL]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
     line-height: ${(props) => props.lineHeight ?? "1.75rem"}; // 28px -> 28/16 = 1.75rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -23,6 +25,7 @@ const VARIANTS_CSS_QUOTE = {
   `,
   // font-size: 18px/RT | line-height: 28px/RT
   [TYPOGRAPHY_VARIANTS.QUOTE_BRAND]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
     line-height: ${(props) => props.lineHeight ?? "1.75rem"}; // 28px -> 28/16 = 1.75rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

package/dist/esm/parts/variants/quote.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/quote.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype QuoteCSSMap = {\n  [key in DSTypographyT.QuoteVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_QUOTE: QuoteCSSMap = {\n  // font-size: 18px/RT | line-height: 28px/RT\n  [TYPOGRAPHY_VARIANTS.QUOTE_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n      line-height: ${(props) => props.lineHeight ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n    }\n    padding: 16px;\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[600]};\n    background-color: ${(props) => props.theme.colors.neutral['050']};\n    border-radius: 4px;\n    font-weight: 400;\n    font-style: italic;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 18px/RT | line-height: 28px/RT\n  [TYPOGRAPHY_VARIANTS.QUOTE_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n      line-height: ${(props) => props.lineHeight ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n    }\n    padding: 24px;\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.brand[700]};\n    background-color: ${(props) => props.theme.colors.brand[200]};\n    border-radius: 4px;\n    font-weight: 400;\n    font-style: italic;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,qBAAkC;AAAA;AAAA,EAE7C,CAAC,oBAAoB,aAAa,GAAG;AAAA,iBACtB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,wBAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlE,CAAC,oBAAoB,WAAW,GAAG;AAAA,iBACpB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,wBAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype QuoteCSSMap = {\n  [key in DSTypographyT.QuoteVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_QUOTE: QuoteCSSMap = {\n  // font-size: 18px/RT | line-height: 28px/RT\n  [TYPOGRAPHY_VARIANTS.QUOTE_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n      line-height: ${(props) => props.lineHeight ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n    }\n    padding: 16px;\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[600]};\n    background-color: ${(props) => props.theme.colors.neutral['050']};\n    border-radius: 4px;\n    font-weight: 400;\n    font-style: italic;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 18px/RT | line-height: 28px/RT\n  [TYPOGRAPHY_VARIANTS.QUOTE_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n      line-height: ${(props) => props.lineHeight ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n    }\n    padding: 24px;\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.brand[700]};\n    background-color: ${(props) => props.theme.colors.brand[200]};\n    border-radius: 4px;\n    font-weight: 400;\n    font-style: italic;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAEpC,SAAS,4BAA4B;AAIrC,MAAM,WAAW,MAAM;AAWhB,MAAM,qBAAkC;AAAA;AAAA,EAE7C,CAAC,oBAAoB,aAAa,GAAG;AAAA,MACjC,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,wBAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlE,CAAC,oBAAoB,WAAW,GAAG;AAAA,MAC/B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,wBAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhE;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -19,6 +19,7 @@ const DSTypographyPropTypes = {
     "b1-light",
     "b2-light",
     "b3-light",
+    "b3-strong",
     "button",
     "button-sml-title",
     "button-med-title",

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n  export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';\n  export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light';\n  export type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';\n  export type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';\n  export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n  export type HighlightVariants =\n    | 'highlight-neutral'\n    | 'highlight-brand'\n    | 'highlight-important'\n    | 'highlight-critical';\n  export type FeedbackVariants = 'feedback-neutral' | 'feedback-brand' | 'feedback-important' | 'feedback-critical';\n  export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n  export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n  export type Variant =\n    | HeadingVariants\n    | BodyVariants\n    | ButtonVariants\n    | LinkVariants\n    | QuoteVariants\n    | HighlightVariants\n    | ArticleHeadingVariants\n    | ArticleBodyVariants\n    | FeedbackVariants;\n\n  export type VariantsMap = {\n    [key in Uppercase<TypescriptHelpersT.KebabToSnakeCase<Variant>>]: Lowercase<\n      TypescriptHelpersT.SnakeToKebabCase<key>\n    >;\n  };\n\n  export type StyledPropsInterface = FontSizeProps &\n    LineHeightProps &\n    ColorProps & {\n      children: DSTypographyT.InternalProps['children'];\n      variant: DSTypographyT.Variant;\n      $truncateWithEllipsis?: boolean;\n      $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n    };\n\n  export interface RequiredProps {\n    variant: Variant;\n    children: React.ReactNode | React.ReactNode[];\n  }\n\n  export interface OptionalProps {\n    as?: keyof React.JSX.IntrinsicElements;\n    component?: keyof React.JSX.IntrinsicElements;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    truncateWithReadMore?: {\n      lines: number;\n      expanded: boolean;\n    };\n  }\n\n  export interface DefaultProps {\n    truncateWithEllipsis: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n      XstyledProps,\n      FontSizeProps,\n      LineHeightProps,\n      ColorProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n      XstyledProps,\n      FontSizeProps,\n      LineHeightProps,\n      ColorProps,\n      RequiredProps {}\n}\n\nexport const DSTypographyPropTypes: DSPropTypesSchema<DSTypographyT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  variant: PropTypes.oneOf([\n    'h1',\n    'h2',\n    'h3',\n    'h4',\n    'h5',\n    'h3-strong',\n    'h4-strong',\n    'h5-strong',\n    'b1',\n    'b2',\n    'b3',\n    'b4',\n    'b1-light',\n    'b2-light',\n    'b3-light',\n    'button',\n    'button-sml-title',\n    'button-med-title',\n    'button-lrg-title',\n    'link',\n    'link-sml-title',\n    'link-med-title',\n    'link-lrg-title',\n    'quote-brand',\n    'quote-neutral',\n    'highlight-neutral',\n    'highlight-brand',\n    'highlight-important',\n    'highlight-critical',\n    'feedback-neutral',\n    'feedback-brand',\n    'feedback-important',\n    'feedback-critical',\n    'h1-article',\n    'h2-article',\n    'h3-article',\n    'h4-article',\n    'h5-article',\n    'b1-article',\n    'b2-article',\n    'b3-article',\n  ]).description(\n    `render the default style based on the variant and the default mapping HTML tag:\n    Variant to HTML Tag\n    h1 => <h1 />,\n    h2 => <h2 />,\n    h3 => <h3 />,\n    h4 => <h4 />,\n    h5 => <h5 />,\n    b1 => <p />,\n    b2 => <p />,\n    b3 => <p />,\n    b4 => <p />,\n    button => <button />,\n    link => <a />,\n    'quote-brand' => <pre />,\n    'quote-neutral' => <pre />,\n    'highlight-neutral' => <span />,\n    'highlight-brand' => <span />,\n    'highlight-important' => <span />,\n    'highlight-critical' => <span />,\n    'h1-article' => <h1 />,\n    'h2-article' => <h2 />,\n    'h3-article' => <h3 />,\n    'h4-article' => <h4 />,\n    'h5-article' => <h5 />,\n    'b1-article' => <p />,\n    'b2-article' => <p />,\n    'b3-article' => <p />,\n  `,\n  ).isRequired,\n  children: PropTypes.node.description('Children element').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n    .description('Applies to the root container. For more info read xstyled docs')\n    .xstyled(),\n  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n    .description('Applies to the root container. For more info read xstyled docs')\n    .xstyled(),\n  as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n  component: PropTypes.string.description(\n    'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n  ),\n  truncateWithEllipsis: PropTypes.bool\n    .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n    .defaultValue(false),\n  truncateWithReadMore: PropTypes.shape({\n    lines: PropTypes.number.description('Number of lines to truncate to.'),\n    expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n  }).description(\n    'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\n  ),\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAqFhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,IAAI,UAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,sBAAsB,UAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,UAAU,MAAM;AAAA,IACpC,OAAO,UAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;AAGO,MAAM,8BAA8B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n  export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';\n  export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light' | 'b3-strong';\n  export type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';\n  export type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';\n  export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n  export type HighlightVariants =\n    | 'highlight-neutral'\n    | 'highlight-brand'\n    | 'highlight-important'\n    | 'highlight-critical';\n  export type FeedbackVariants = 'feedback-neutral' | 'feedback-brand' | 'feedback-important' | 'feedback-critical';\n  export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n  export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n  export type Variant =\n    | HeadingVariants\n    | BodyVariants\n    | ButtonVariants\n    | LinkVariants\n    | QuoteVariants\n    | HighlightVariants\n    | ArticleHeadingVariants\n    | ArticleBodyVariants\n    | FeedbackVariants;\n\n  export type VariantsMap = {\n    [key in Uppercase<TypescriptHelpersT.KebabToSnakeCase<Variant>>]: Lowercase<\n      TypescriptHelpersT.SnakeToKebabCase<key>\n    >;\n  };\n\n  export type StyledPropsInterface = FontSizeProps &\n    LineHeightProps &\n    ColorProps & {\n      children: DSTypographyT.InternalProps['children'];\n      variant: DSTypographyT.Variant;\n      $truncateWithEllipsis?: boolean;\n      $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n    };\n\n  export interface RequiredProps {\n    variant: Variant;\n    children: React.ReactNode | React.ReactNode[];\n  }\n\n  export interface OptionalProps {\n    as?: keyof React.JSX.IntrinsicElements;\n    component?: keyof React.JSX.IntrinsicElements;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    truncateWithReadMore?: {\n      lines: number;\n      expanded: boolean;\n    };\n  }\n\n  export interface DefaultProps {\n    truncateWithEllipsis: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n      XstyledProps,\n      FontSizeProps,\n      LineHeightProps,\n      ColorProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n      XstyledProps,\n      FontSizeProps,\n      LineHeightProps,\n      ColorProps,\n      RequiredProps {}\n}\n\nexport const DSTypographyPropTypes: DSPropTypesSchema<DSTypographyT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  variant: PropTypes.oneOf([\n    'h1',\n    'h2',\n    'h3',\n    'h4',\n    'h5',\n    'h3-strong',\n    'h4-strong',\n    'h5-strong',\n    'b1',\n    'b2',\n    'b3',\n    'b4',\n    'b1-light',\n    'b2-light',\n    'b3-light',\n    'b3-strong',\n    'button',\n    'button-sml-title',\n    'button-med-title',\n    'button-lrg-title',\n    'link',\n    'link-sml-title',\n    'link-med-title',\n    'link-lrg-title',\n    'quote-brand',\n    'quote-neutral',\n    'highlight-neutral',\n    'highlight-brand',\n    'highlight-important',\n    'highlight-critical',\n    'feedback-neutral',\n    'feedback-brand',\n    'feedback-important',\n    'feedback-critical',\n    'h1-article',\n    'h2-article',\n    'h3-article',\n    'h4-article',\n    'h5-article',\n    'b1-article',\n    'b2-article',\n    'b3-article',\n  ]).description(\n    `render the default style based on the variant and the default mapping HTML tag:\n    Variant to HTML Tag\n    h1 => <h1 />,\n    h2 => <h2 />,\n    h3 => <h3 />,\n    h4 => <h4 />,\n    h5 => <h5 />,\n    b1 => <p />,\n    b2 => <p />,\n    b3 => <p />,\n    b4 => <p />,\n    button => <button />,\n    link => <a />,\n    'quote-brand' => <pre />,\n    'quote-neutral' => <pre />,\n    'highlight-neutral' => <span />,\n    'highlight-brand' => <span />,\n    'highlight-important' => <span />,\n    'highlight-critical' => <span />,\n    'h1-article' => <h1 />,\n    'h2-article' => <h2 />,\n    'h3-article' => <h3 />,\n    'h4-article' => <h4 />,\n    'h5-article' => <h5 />,\n    'b1-article' => <p />,\n    'b2-article' => <p />,\n    'b3-article' => <p />,\n  `,\n  ).isRequired,\n  children: PropTypes.node.description('Children element').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n    .description('Applies to the root container. For more info read xstyled docs')\n    .xstyled(),\n  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n    .description('Applies to the root container. For more info read xstyled docs')\n    .xstyled(),\n  as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n  component: PropTypes.string.description(\n    'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n  ),\n  truncateWithEllipsis: PropTypes.bool\n    .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n    .defaultValue(false),\n  truncateWithReadMore: PropTypes.shape({\n    lines: PropTypes.number.description('Number of lines to truncate to.'),\n    expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n  }).description(\n    'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\n  ),\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAqFhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,IAAI,UAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,sBAAsB,UAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,UAAU,MAAM;AAAA,IACpC,OAAO,UAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;AAGO,MAAM,8BAA8B;",
   "names": []
 }

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { DSTypography, DSTypographyWithSchema } from './Typography.js';
 export { TYPOGRAPHY_VARIANTS, TYPOGRAPHY_SLOTS, TYPOGRAPHY_DATA_TESTID, DSTypographyName } from './constants/index.js';
 export type { DSTypographyT } from './react-desc-prop-types.js';
+export { VARIANTS_CSS_BODY } from './parts/variants/body.js';

package/dist/types/parts/styled.d.ts

@@ -1,2 +1,4 @@
 import type { DSTypographyT } from '../react-desc-prop-types.js';
+import { typographyFontFamily } from './typographyFontFamily.js';
+export { typographyFontFamily };
 export declare const StyledTypography: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, DSTypographyT.StyledPropsInterface, string | number | symbol>;

package/dist/types/parts/typographyFontFamily.d.ts

@@ -0,0 +1 @@
+export declare const typographyFontFamily: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("@xstyled/system").Theme>>;

package/dist/types/react-desc-prop-types.d.ts

@@ -4,7 +4,7 @@ import type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-sy
 import type { WeakValidationMap } from 'react';
 export declare namespace DSTypographyT {
     type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';
-    type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light';
+    type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light' | 'b3-strong';
     type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';
     type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';
     type QuoteVariants = 'quote-brand' | 'quote-neutral';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-typography",
-  "version": "3.70.0-next.4",
+  "version": "3.70.0-next.41",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Typography",
   "files": [
@@ -38,17 +38,17 @@
   "dependencies": {
     "@xstyled/system": "~3.8.1",
     "@xstyled/util": "~3.7.0",
-    "@elliemae/ds-props-helpers": "3.70.0-next.4",
-    "@elliemae/ds-typescript-helpers": "3.70.0-next.4",
-    "@elliemae/ds-system": "3.70.0-next.4"
+    "@elliemae/ds-props-helpers": "3.70.0-next.41",
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.41",
+    "@elliemae/ds-system": "3.70.0-next.41"
   },
   "devDependencies": {
     "jest": "^30.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.4",
-    "@elliemae/ds-test-utils": "3.70.0-next.4"
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.41",
+    "@elliemae/ds-test-utils": "3.70.0-next.41"
   },
   "peerDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/dist/types/tests/DSTypography.data-testId.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/tests/DSTypography.func.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/tests/DSTypography.style.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/typescript-testing/typescript-typography-valid.d.ts

@@ -1 +0,0 @@
-export {};