@elliemae/ds-typography 3.24.0-next.0 → 3.24.0-next.2

package/dist/cjs/Typography.js

@@ -37,8 +37,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_useTypography = require("./config/useTypography.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-var import_DSTypographyDatatestId = require("./DSTypographyDatatestId.js");
-var import_styled = require("./styled.js");
+var import_constants = require("./constants/index.js");
+var import_styled = require("./parts/styled.js");
 const DSTypography = (props) => {
   const {
     globalAttributes: { ...othersGlobalAttributes },
@@ -48,7 +48,6 @@ const DSTypography = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledTypography,
     {
-      "data-testid": import_DSTypographyDatatestId.DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,
       ...othersGlobalAttributes,
       ...xstyledProps,
       as: as || component,
@@ -61,8 +60,8 @@ const DSTypography = (props) => {
     }
   );
 };
-DSTypography.displayName = import_DSTypographyDatatestId.DSTypographyName;
-DSTypography.propTypes = import_react_desc_prop_types.DSTypographyPropTypes;
+DSTypography.displayName = import_constants.DSTypographyName;
+DSTypography.propTypes = import_react_desc_prop_types.DSTypographyPropTypesSchema;
 const DSTypographyWithSchema = (0, import_ds_props_helpers.describe)(DSTypography);
-DSTypographyWithSchema.propTypes = import_react_desc_prop_types.DSTypographyPropTypes;
+DSTypographyWithSchema.propTypes = import_react_desc_prop_types.DSTypographyPropTypesSchema;
 //# sourceMappingURL=Typography.js.map

package/dist/cjs/Typography.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Typography.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useTypography } from './config/useTypography.js';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types.js';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId.js';\nimport { StyledTypography } from './styled.js';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n  const {\n    globalAttributes: { ...othersGlobalAttributes },\n    xstyledProps,\n    propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis, truncateWithReadMore },\n  } = useTypography(props);\n  return (\n    <StyledTypography\n      data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n      {...othersGlobalAttributes}\n      {...xstyledProps}\n      as={as || component}\n      variant={variant}\n      fontSize={fontSize}\n      ref={innerRef}\n      $truncateWithEllipsis={truncateWithEllipsis}\n      $truncateWithReadMore={truncateWithReadMore}\n    >\n      {props.children}\n    </StyledTypography>\n  );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypes;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypes;\n\nexport { DSTypography, DSTypographyWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAbJ,8BAAyB;AACzB,2BAA8B;AAC9B,mCAA0D;AAC1D,oCAAyD;AACzD,oBAAiC;AAEjC,MAAM,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,EAAE,GAAG,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,IAAI,WAAW,SAAS,UAAU,UAAU,sBAAsB,qBAAqB;AAAA,EAC7G,QAAI,oCAAc,KAAK;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,qDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MAEtB,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useTypography } from './config/useTypography.js';\nimport { type DSTypographyT, DSTypographyPropTypesSchema } from './react-desc-prop-types.js';\nimport { DSTypographyName } from './constants/index.js';\nimport { StyledTypography } from './parts/styled.js';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n  const {\n    globalAttributes: { ...othersGlobalAttributes },\n    xstyledProps,\n    propsWithDefault: { as, component, variant, fontSize, innerRef, truncateWithEllipsis, truncateWithReadMore },\n  } = useTypography(props);\n  return (\n    <StyledTypography\n      {...othersGlobalAttributes}\n      {...xstyledProps}\n      as={as || component}\n      variant={variant}\n      fontSize={fontSize}\n      ref={innerRef}\n      $truncateWithEllipsis={truncateWithEllipsis}\n      $truncateWithReadMore={truncateWithReadMore}\n    >\n      {props.children}\n    </StyledTypography>\n  );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypesSchema;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypesSchema;\n\nexport { DSTypography, DSTypographyWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAbJ,8BAAyB;AACzB,2BAA8B;AAC9B,mCAAgE;AAChE,uBAAiC;AACjC,oBAAiC;AAEjC,MAAM,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,EAAE,GAAG,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,IAAI,WAAW,SAAS,UAAU,UAAU,sBAAsB,qBAAqB;AAAA,EAC7G,QAAI,oCAAc,KAAK;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MAEtB,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/cjs/config/useDefaultProps.js

@@ -44,7 +44,21 @@ const VariantToAsMap = {
   b3: "p",
   b4: "p",
   button: "button",
-  link: "a"
+  link: "a",
+  "quote-brand": "pre",
+  "quote-neutral": "pre",
+  "highlight-neutral": "span",
+  "highlight-brand": "span",
+  "highlight-important": "span",
+  "highlight-critical": "span",
+  "h1-article": "h1",
+  "h2-article": "h2",
+  "h3-article": "h3",
+  "h4-article": "h4",
+  "h5-article": "h5",
+  "b1-article": "p",
+  "b2-article": "p",
+  "b3-article": "p"
 };
 const useDefaultProps = ({ variant, as: userAs }) => {
   const defaultAs = userAs || VariantToAsMap[variant];

package/dist/cjs/config/useDefaultProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useDefaultProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Variant, keyof JSX.IntrinsicElements> = {\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};\nexport const useDefaultProps = ({ variant, as: userAs }: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n  const defaultAs = userAs || VariantToAsMap[variant];\n  const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n  return defaultProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,iBAA6E;AAAA,EACjF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AACR;AACO,MAAM,kBAAkB,CAAC,EAAE,SAAS,IAAI,OAAO,MAAgE;AACpH,QAAM,YAAY,UAAU,eAAe,OAAO;AAClD,QAAM,eAAe,aAAAA,QAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
+  "sourcesContent": ["import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Variant, keyof JSX.IntrinsicElements> = {\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};\nexport const useDefaultProps = ({ variant, as: userAs }: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n  const defaultAs = userAs || VariantToAsMap[variant];\n  const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n  return defaultProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,iBAA6E;AAAA,EACjF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAChB;AACO,MAAM,kBAAkB,CAAC,EAAE,SAAS,IAAI,OAAO,MAAgE;AACpH,QAAM,YAAY,UAAU,eAAe,OAAO;AAClD,QAAM,eAAe,aAAAA,QAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/cjs/config/useTypography.js

@@ -36,9 +36,9 @@ var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_useDefaultProps = require("./useDefaultProps.js");
-var import_DSTypographyDatatestId = require("../DSTypographyDatatestId.js");
+var import_constants = require("../constants/index.js");
 const useTypography = (props) => {
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSTypographyPropTypes, import_DSTypographyDatatestId.DSTypographyName);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSTypographyPropTypes, import_constants.DSTypographyName);
   const defaultProps = (0, import_useDefaultProps.useDefaultProps)(props);
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, defaultProps);
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);

package/dist/cjs/config/useTypography.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useTypography.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types.js';\nimport { useDefaultProps } from './useDefaultProps.js';\nimport { DSTypographyName } from '../DSTypographyDatatestId.js';\n\ninterface UseTypographyT {\n  propsWithDefault: DSTypographyT.InternalProps;\n  globalAttributes: GlobalAttributesT;\n  xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n  useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n  const defaultProps = useDefaultProps(props);\n  const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  return React.useMemo(\n    () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n    [globalAttributes, propsWithDefault, xstyledProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,8BAKO;AAEP,mCAAsC;AACtC,6BAAgC;AAChC,oCAAiC;AAQ1B,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,8DAA+B,OAAO,oDAAuB,8CAAgB;AAC7E,QAAM,mBAAe,wCAAgB,KAAK;AAC1C,QAAM,uBAAmB,sDAA0D,OAAO,YAAY;AACtG,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,kBAAkB,aAAa;AAAA,IAC1D,CAAC,kBAAkB,kBAAkB,YAAY;AAAA,EACnD;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types.js';\nimport { useDefaultProps } from './useDefaultProps.js';\nimport { DSTypographyName } from '../constants/index.js';\n\ninterface UseTypographyT {\n  propsWithDefault: DSTypographyT.InternalProps;\n  globalAttributes: GlobalAttributesT;\n  xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n  useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n  const defaultProps = useDefaultProps(props);\n  const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  return React.useMemo(\n    () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n    [globalAttributes, propsWithDefault, xstyledProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,8BAKO;AAEP,mCAAsC;AACtC,6BAAgC;AAChC,uBAAiC;AAQ1B,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,8DAA+B,OAAO,oDAAuB,iCAAgB;AAC7E,QAAM,mBAAe,wCAAgB,KAAK;AAC1C,QAAM,uBAAmB,sDAA0D,OAAO,YAAY;AACtG,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,kBAAkB,aAAa;AAAA,IAC1D,CAAC,kBAAkB,kBAAkB,YAAY;AAAA,EACnD;AACF;",
   "names": ["React"]
 }

package/dist/cjs/constants/index.js

@@ -0,0 +1,78 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  DSTypographyName: () => DSTypographyName,
+  TYPOGRAPHY_DATA_TESTID: () => TYPOGRAPHY_DATA_TESTID,
+  TYPOGRAPHY_SLOTS: () => TYPOGRAPHY_SLOTS,
+  TYPOGRAPHY_VARIANTS: () => TYPOGRAPHY_VARIANTS
+});
+module.exports = __toCommonJS(constants_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const DSTypographyName = "DSTypography";
+const TYPOGRAPHY_SLOTS = {
+  // this is the only slot that was present before the slotObjectToDataTestIds function was created
+  TYPOGRAPHY_ELEMENT: "typography-element"
+  // from here on we rely on the slotObjectToDataTestIds function...
+};
+const TYPOGRAPHY_DATA_TESTID = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(DSTypographyName, TYPOGRAPHY_SLOTS),
+  // this component was created before the slotObjectToDataTestIds function was created
+  //  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds
+  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: "ds-typography-element"
+};
+const TYPOGRAPHY_VARIANTS = {
+  H1: "h1",
+  H2: "h2",
+  H3: "h3",
+  H4: "h4",
+  H5: "h5",
+  B1: "b1",
+  B2: "b2",
+  B3: "b3",
+  B4: "b4",
+  H1_ARTICLE: "h1-article",
+  H2_ARTICLE: "h2-article",
+  H3_ARTICLE: "h3-article",
+  H4_ARTICLE: "h4-article",
+  H5_ARTICLE: "h5-article",
+  B1_ARTICLE: "b1-article",
+  B2_ARTICLE: "b2-article",
+  B3_ARTICLE: "b3-article",
+  QUOTE_BRAND: "quote-brand",
+  QUOTE_NEUTRAL: "quote-neutral",
+  HIGHLIGHT_NEUTRAL: "highlight-neutral",
+  HIGHLIGHT_BRAND: "highlight-brand",
+  HIGHLIGHT_IMPORTANT: "highlight-important",
+  HIGHLIGHT_CRITICAL: "highlight-critical",
+  BUTTON: "button",
+  LINK: "link"
+};
+//# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography' as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const TYPOGRAPHY_SLOTS = {\n  // this is the only slot that was present before the slotObjectToDataTestIds function was created\n  TYPOGRAPHY_ELEMENT: 'typography-element',\n  // from here on we rely on the slotObjectToDataTestIds function...\n} as const;\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n  // this component was created before the slotObjectToDataTestIds function was created\n  //  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\n  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n  H1: 'h1',\n  H2: 'h2',\n  H3: 'h3',\n  H4: 'h4',\n  H5: 'h5',\n  B1: 'b1',\n  B2: 'b2',\n  B3: 'b3',\n  B4: 'b4',\n  H1_ARTICLE: 'h1-article',\n  H2_ARTICLE: 'h2-article',\n  H3_ARTICLE: 'h3-article',\n  H4_ARTICLE: 'h4-article',\n  H5_ARTICLE: 'h5-article',\n  B1_ARTICLE: 'b1-article',\n  B2_ARTICLE: 'b2-article',\n  B3_ARTICLE: 'b3-article',\n  QUOTE_BRAND: 'quote-brand',\n  QUOTE_NEUTRAL: 'quote-neutral',\n  HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n  HIGHLIGHT_BRAND: 'highlight-brand',\n  HIGHLIGHT_IMPORTANT: 'highlight-important',\n  HIGHLIGHT_CRITICAL: 'highlight-critical',\n  BUTTON: 'button',\n  LINK: 'link',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAGjC,MAAM,mBAAmB;AAGzB,MAAM,mBAAmB;AAAA;AAAA,EAE9B,oBAAoB;AAAA;AAEtB;AAEO,MAAM,yBAAyB;AAAA,EACpC,OAAG,0CAAwB,kBAAkB,gBAAgB;AAAA;AAAA;AAAA,EAG7D,CAAC,iBAAiB,kBAAkB,GAAG;AACzC;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AACR;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -29,9 +29,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   DSTypography: () => import_Typography.DSTypography,
-  DSTypographyWithSchema: () => import_Typography.DSTypographyWithSchema
+  DSTypographyWithSchema: () => import_Typography.DSTypographyWithSchema,
+  TYPOGRAPHY_VARIANTS: () => import_constants.TYPOGRAPHY_VARIANTS
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_Typography = require("./Typography.js");
+var import_constants = require("./constants/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type {} from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\nexport { DSTypography, DSTypographyWithSchema } from './Typography.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,wBAAqD;",
+  "sourcesContent": ["import type {} from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\nexport { DSTypography, DSTypographyWithSchema } from './Typography.js';\nexport { TYPOGRAPHY_VARIANTS } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,wBAAqD;AACrD,uBAAoC;",
   "names": []
 }

package/dist/cjs/parts/styled.js

@@ -0,0 +1,92 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledTypography: () => StyledTypography
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../constants/index.js");
+var import_variants = require("./variants/index.js");
+const noWrapStyle = import_ds_system.css`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+`;
+const wrapStyle = import_ds_system.css`
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+`;
+const truncateWithReadMoreStyle = (readMoreMeta) => import_ds_system.css`
+  display: -webkit-box;
+  -webkit-line-clamp: ${readMoreMeta.expanded ? "unset" : readMoreMeta.lines};
+  -webkit-box-orient: vertical;
+  hyphens: auto;
+  word-break: break-all;
+`;
+const shortHandsColorMap = {
+  neutral: import_ds_system.css`
+    color: ${({ theme }) => theme.colors.neutral[600]};
+  `,
+  brand: import_ds_system.css`
+    color: ${({ theme }) => theme.colors.brand[800]};
+  `,
+  important: import_ds_system.css`
+    color: #853c12;
+  `,
+  critical: import_ds_system.css`
+    color: #c70916;
+  `
+};
+const specificShorthands = ["neutral", "brand", "important", "critical"];
+const isSpecificShorthand = (color) => specificShorthands.includes(color);
+const StyledTypography = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSTypographyName,
+  slot: import_constants.TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT
+}).withConfig({
+  shouldForwardProp: (prop, defaultValidatorFn) => !["fontSize", "color", "as", "variant"].includes(String(prop)) && defaultValidatorFn(prop)
+})`
+  margin: 0;
+  padding: 0;
+  ${(props) => import_variants.VARIANTS_CSS_MAP[props.variant]}
+  ${import_ds_system.xStyledCommonProps}
+  ${(props) => {
+  if (!props.color || !isSpecificShorthand(props.color))
+    return import_ds_system.css``;
+  return shortHandsColorMap[props.color];
+}}
+
+  ${(props) => props.$truncateWithEllipsis ? noWrapStyle : wrapStyle}
+
+  ${(props) => props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : ""}
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/parts/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/styled.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyName, TYPOGRAPHY_SLOTS } from '../constants/index.js';\nimport { VARIANTS_CSS_MAP } from './variants/index.js';\n\nconst noWrapStyle = css`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\nconst wrapStyle = css`\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n`;\n\nconst truncateWithReadMoreStyle = (\n  readMoreMeta: Required<DSTypographyT.StyledPropsInterface>['$truncateWithReadMore'],\n) => css`\n  display: -webkit-box;\n  -webkit-line-clamp: ${readMoreMeta.expanded ? 'unset' : readMoreMeta.lines};\n  -webkit-box-orient: vertical;\n  hyphens: auto;\n  word-break: break-all;\n`;\n\n// support for `color` shorthands that are not available in the theme and are specific to the typography component\nconst shortHandsColorMap = {\n  neutral: css`\n    color: ${({ theme }) => theme.colors.neutral[600]};\n  `,\n  brand: css`\n    color: ${({ theme }) => theme.colors.brand[800]};\n  `,\n  important: css`\n    color: #853c12;\n  `,\n  critical: css`\n    color: #c70916;\n  `,\n};\nconst specificShorthands = ['neutral', 'brand', 'important', 'critical'];\nconst isSpecificShorthand = (color: string): color is keyof typeof shortHandsColorMap =>\n  specificShorthands.includes(color);\n\n// xStyledCommonProps need to be always AFTER the VARIANTS_CSS_MAP\n//  this allows to override the default styles with the props if users want to\nexport const StyledTypography = styled('div', {\n  name: DSTypographyName,\n  slot: TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n  shouldForwardProp: (prop, defaultValidatorFn) =>\n    !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<DSTypographyT.StyledPropsInterface>`\n  margin: 0;\n  padding: 0;\n  ${(props: DSTypographyT.StyledPropsInterface) => VARIANTS_CSS_MAP[props.variant]}\n  ${xStyledCommonProps}\n  ${(props) => {\n    // support for color shorthands that are not available in the theme\n    if (!props.color || !isSpecificShorthand(props.color)) return css``;\n\n    return shortHandsColorMap[props.color];\n  }}\n\n  ${(props: DSTypographyT.StyledPropsInterface) => (props.$truncateWithEllipsis ? noWrapStyle : wrapStyle)}\n\n  ${(props: DSTypographyT.StyledPropsInterface) =>\n    props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : ''}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAEhD,uBAAmD;AACnD,sBAAiC;AAEjC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,4BAA4B,CAChC,iBACG;AAAA;AAAA,wBAEmB,aAAa,WAAW,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAOvE,MAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,aACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAElD,OAAO;AAAA,aACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,EAEhD,WAAW;AAAA;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA;AAGZ;AACA,MAAM,qBAAqB,CAAC,WAAW,SAAS,aAAa,UAAU;AACvE,MAAM,sBAAsB,CAAC,UAC3B,mBAAmB,SAAS,KAAK;AAI5B,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC,EAAE,WAAW;AAAA,EACZ,mBAAmB,CAAC,MAAM,uBACxB,CAAC,CAAC,YAAY,SAAS,MAAM,SAAS,EAAE,SAAS,OAAO,IAAI,CAAC,KAAK,mBAAmB,IAAI;AAC7F,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAA8C,iCAAiB,MAAM,OAAO;AAAA,IAC7E;AAAA,IACA,CAAC,UAAU;AAEX,MAAI,CAAC,MAAM,SAAS,CAAC,oBAAoB,MAAM,KAAK;AAAG,WAAO;AAE9D,SAAO,mBAAmB,MAAM,KAAK;AACvC;AAAA;AAAA,IAEE,CAAC,UAA+C,MAAM,wBAAwB,cAAc;AAAA;AAAA,IAE5F,CAAC,UACD,MAAM,wBAAwB,0BAA0B,MAAM,qBAAqB,IAAI;AAAA;",
+  "names": []
+}

package/dist/cjs/parts/variants/body-article.js

@@ -0,0 +1,82 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var body_article_exports = {};
+__export(body_article_exports, {
+  VARIANTS_CSS_BODY_ARTICLE: () => VARIANTS_CSS_BODY_ARTICLE
+});
+module.exports = __toCommonJS(body_article_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../constants/index.js");
+const typedCss = () => import_ds_system.css``;
+const VARIANTS_CSS_BODY_ARTICLE = {
+  // font-size: 16px/RT | line-height: 20px/RT
+  [import_constants.TYPOGRAPHY_VARIANTS.B1_ARTICLE]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "1rem"}; // 16px -> 16/16 = 1rem
+    line-height: ${(props) => props.lineHeight ?? "1.25rem"}; // 20px -> 20/16 = 1.25rem
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.230769230769231rem"}; // 16px -> 16/13 = 1.230769230769231rem
+      line-height: ${(props) => props.lineHeight ?? "1.538461538461538rem"}; // 20px -> 20/13 = 1.538461538461538rem
+    }
+    margin-bottom: 24px;
+    color: ${(props) => props.theme.colors.neutral[700]};
+    font-weight: 400;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  `,
+  // font-size: 14px/RT | line-height: 18px/RT
+  [import_constants.TYPOGRAPHY_VARIANTS.B2_ARTICLE]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.875rem"}; // 14px -> 14/16 = 0.875rem
+    line-height: ${(props) => props.lineHeight ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.076923076923077rem"}; // 14px -> 14/13 = 1.076923076923077rem
+      line-height: ${(props) => props.lineHeight ?? "1.384615384615385rem"}; // 18px -> 18/13 = 1.384615384615385rem
+    }
+    margin-bottom: 24px;
+    color: ${(props) => props.theme.colors.neutral[700]};
+    font-weight: 400;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  `,
+  // font-size: 13px/RT | line-height: 17px/RT
+  [import_constants.TYPOGRAPHY_VARIANTS.B3_ARTICLE]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.8125rem"}; // 13px -> 13/16 = 0.8125rem
+    line-height: ${(props) => props.lineHeight ?? "1.0625rem"}; // 17px -> 17/16 = 1.0625rem
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1rem"}; // 13px -> 13/13 = 1rem
+      line-height: ${(props) => props.lineHeight ?? "1.307692307692308rem"}; // 17px -> 17/13 = 1.307692307692308rem
+    }
+    margin-bottom: 24px;
+    color: ${(props) => props.theme.colors.neutral[700]};
+    font-weight: 400;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  `
+};
+//# sourceMappingURL=body-article.js.map

package/dist/cjs/parts/variants/body-article.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/variants/body-article.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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 ArticleBodyCSSMap = {\n  [key in DSTypographyT.ArticleBodyVariants]: 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_BODY_ARTICLE: ArticleBodyCSSMap = {\n  // font-size: 16px/RT | line-height: 20px/RT\n  [TYPOGRAPHY_VARIANTS.B1_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1rem'}; // 16px -> 16/16 = 1rem\n    line-height: ${(props) => props.lineHeight ?? '1.25rem'}; // 20px -> 20/16 = 1.25rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.230769230769231rem'}; // 16px -> 16/13 = 1.230769230769231rem\n      line-height: ${(props) => props.lineHeight ?? '1.538461538461538rem'}; // 20px -> 20/13 = 1.538461538461538rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 14px/RT | line-height: 18px/RT\n  [TYPOGRAPHY_VARIANTS.B2_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.875rem'}; // 14px -> 14/16 = 0.875rem\n    line-height: ${(props) => props.lineHeight ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.076923076923077rem'}; // 14px -> 14/13 = 1.076923076923077rem\n      line-height: ${(props) => props.lineHeight ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 13px/RT | line-height: 17px/RT\n  [TYPOGRAPHY_VARIANTS.B3_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'}; // 13px -> 13/16 = 0.8125rem\n    line-height: ${(props) => props.lineHeight ?? '1.0625rem'}; // 17px -> 17/16 = 1.0625rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'}; // 13px -> 13/13 = 1rem\n      line-height: ${(props) => props.lineHeight ?? '1.307692307692308rem'}; // 17px -> 17/13 = 1.307692307692308rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,uBAAoC;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,4BAA+C;AAAA;AAAA,EAE1D,CAAC,qCAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,yBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA,aAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD,CAAC,qCAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,yBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA,aAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD,CAAC,qCAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,yBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA,aAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAKtD;",
+  "names": []
+}

package/dist/cjs/parts/variants/body.js

@@ -0,0 +1,72 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var body_exports = {};
+__export(body_exports, {
+  VARIANTS_CSS_BODY: () => VARIANTS_CSS_BODY
+});
+module.exports = __toCommonJS(body_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../constants/index.js");
+const typedCss = () => import_ds_system.css``;
+const VARIANTS_CSS_BODY = {
+  [import_constants.TYPOGRAPHY_VARIANTS.B1]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.1212499999999999rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.08rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.38rem"};
+    }
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.B2]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.8125rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.31rem"};
+    }
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.B3]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.7475rem"};
+    line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "0.92rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.23rem"};
+    }
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.B4]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.6906249999999999rem"};
+    line-height: ${(props) => props.lineHeight ?? "0.8125rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "0.85rem"};
+      line-height: ${(props) => props.lineHeight ?? "1rem"};
+    }
+  `
+};
+//# sourceMappingURL=body.js.map

package/dist/cjs/parts/variants/body.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/variants/body.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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 BodyCSSMap = {\n  [key in DSTypographyT.BodyVariants]: 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_BODY: BodyCSSMap = {\n  [TYPOGRAPHY_VARIANTS.B1]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.B2]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.85rem'};\n      line-height: ${(props) => props.lineHeight ?? '1rem'};\n    }\n  `,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,uBAAoC;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,oBAAgC;AAAA,EAC3C,CAAC,qCAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,yBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA,EAGlD,CAAC,qCAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,yBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA,EAGlD,CAAC,qCAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,yBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA,EAGlD,CAAC,qCAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,yBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAGpD;",
+  "names": []
+}

package/dist/cjs/parts/variants/button.js

@@ -0,0 +1,64 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var button_exports = {};
+__export(button_exports, {
+  VARIANTS_BUTTON: () => VARIANTS_BUTTON
+});
+module.exports = __toCommonJS(button_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../constants/index.js");
+const typedCss = () => import_ds_system.css``;
+const VARIANTS_BUTTON = {
+  [import_constants.TYPOGRAPHY_VARIANTS.BUTTON]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.8125rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.85rem"};
+    }
+    text-decoration: underline;
+    color: ${(props) => props.theme.colors.brand[600]};
+    background: none;
+    border: none;
+    display: inline-block;
+    text-align: left;
+    cursor: pointer;
+    &:hover {
+      color: ${(props) => props.theme.colors.brand[700]};
+    }
+    &:active {
+      color: ${(props) => props.theme.colors.brand[800]};
+    }
+    &:focus {
+      color: ${(props) => props.theme.colors.brand[700]};
+    }
+  `
+};
+//# sourceMappingURL=button.js.map

package/dist/cjs/parts/variants/button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/variants/button.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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 ButtonCSSMap = {\n  [key in DSTypographyT.ButtonVariants]: 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_BUTTON: ButtonCSSMap = {\n  [TYPOGRAPHY_VARIANTS.BUTTON]: 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    background: none;\n    border: none;\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AAEpB,uBAAoC;AAIpC,MAAM,WAAW,MAAM;AAWhB,MAAM,kBAAgC;AAAA,EAC3C,CAAC,qCAAoB,MAAM,GAAG;AAAA,iBACf,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,yBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA,aAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOrC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,eAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,eAGvC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGtD;",
+  "names": []
+}