@elliemae/ds-typography 3.34.0 → 3.35.0-rc.1

package/dist/cjs/config/useDefaultProps.js

@@ -39,18 +39,34 @@ const VariantToAsMap = {
   h3: "h3",
   h4: "h4",
   h5: "h5",
+  "h3-strong": "h3",
+  "h4-strong": "h4",
+  "h5-strong": "h5",
   b1: "p",
   b2: "p",
   b3: "p",
   b4: "p",
+  "b1-light": "p",
+  "b2-light": "p",
+  "b3-light": "p",
   button: "button",
+  "button-sml-title": "button",
+  "button-med-title": "button",
+  "button-lrg-title": "button",
   link: "a",
+  "link-sml-title": "a",
+  "link-med-title": "a",
+  "link-lrg-title": "a",
   "quote-brand": "pre",
   "quote-neutral": "pre",
   "highlight-neutral": "span",
   "highlight-brand": "span",
   "highlight-important": "span",
   "highlight-critical": "span",
+  "feedback-neutral": "span",
+  "feedback-brand": "span",
+  "feedback-important": "span",
+  "feedback-critical": "span",
   "h1-article": "h1",
   "h2-article": "h2",
   "h3-article": "h3",

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  '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 = ({\n  variant,\n  component,\n  as: userAs,\n}: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n  // component prop has higher priority than as prop and variant prop\n  const defaultAs = component || 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;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,IAAI;AACN,MAAgE;AAE9D,QAAM,YAAY,aAAa,UAAU,eAAe,OAAO;AAC/D,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  'h3-strong': 'h3',\n  'h4-strong': 'h4',\n  'h5-strong': 'h5',\n  b1: 'p',\n  b2: 'p',\n  b3: 'p',\n  b4: 'p',\n  'b1-light': 'p',\n  'b2-light': 'p',\n  'b3-light': 'p',\n  button: 'button',\n  'button-sml-title': 'button',\n  'button-med-title': 'button',\n  'button-lrg-title': 'button',\n  link: 'a',\n  'link-sml-title': 'a',\n  'link-med-title': 'a',\n  'link-lrg-title': '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  'feedback-neutral': 'span',\n  'feedback-brand': 'span',\n  'feedback-important': 'span',\n  'feedback-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 = ({\n  variant,\n  component,\n  as: userAs,\n}: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n  // component prop has higher priority than as prop and variant prop\n  const defaultAs = component || 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,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,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;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,IAAI;AACN,MAAgE;AAE9D,QAAM,YAAY,aAAa,UAAU,eAAe,OAAO;AAC/D,QAAM,eAAe,aAAAA,QAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/cjs/constants/index.js

@@ -64,10 +64,16 @@ const TYPOGRAPHY_VARIANTS = {
   H3: "h3",
   H4: "h4",
   H5: "h5",
+  H3_STRONG: "h3-strong",
+  H4_STRONG: "h4-strong",
+  H5_STRONG: "h5-strong",
   B1: "b1",
   B2: "b2",
   B3: "b3",
   B4: "b4",
+  B1_LIGHT: "b1-light",
+  B2_LIGHT: "b2-light",
+  B3_LIGHT: "b3-light",
   H1_ARTICLE: "h1-article",
   H2_ARTICLE: "h2-article",
   H3_ARTICLE: "h3-article",
@@ -82,7 +88,17 @@ const TYPOGRAPHY_VARIANTS = {
   HIGHLIGHT_BRAND: "highlight-brand",
   HIGHLIGHT_IMPORTANT: "highlight-important",
   HIGHLIGHT_CRITICAL: "highlight-critical",
+  FEEDBACK_BRAND: "feedback-brand",
+  FEEDBACK_NEUTRAL: "feedback-neutral",
+  FEEDBACK_IMPORTANT: "feedback-important",
+  FEEDBACK_CRITICAL: "feedback-critical",
   BUTTON: "button",
-  LINK: "link"
+  BUTTON_SML_TITLE: "button-sml-title",
+  BUTTON_MED_TITLE: "button-med-title",
+  BUTTON_LRG_TITLE: "button-lrg-title",
+  LINK: "link",
+  LINK_SML_TITLE: "link-sml-title",
+  LINK_MED_TITLE: "link-med-title",
+  LINK_LRG_TITLE: "link-lrg-title"
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +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\nexport const TYPOGRAPHY_SLOTS = {\n  // this is the only slot that was present before the slotObjectToDataTestIds function was created\n  // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n  // we can now freely change the \"values\" of this constant without implying breakign changes\n  //   if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n  TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\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\nexport const LEGACY_DATA_TESTID = {\n  // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n  // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  // we are hardcoding this \"typography-element\" for legacy reason,\n  //  people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n  //   having constant keys and changing value is literally the point of this kind of constants\n  'typography-element': 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n  ...LEGACY_DATA_TESTID,\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;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AACxB;AAEO,MAAM,yBAAyB;AAAA,EACpC,OAAG,0CAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;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;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography' as const;\n\nexport const TYPOGRAPHY_SLOTS = {\n  // this is the only slot that was present before the slotObjectToDataTestIds function was created\n  // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n  // we can now freely change the \"values\" of this constant without implying breakign changes\n  //   if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n  TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\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\nexport const LEGACY_DATA_TESTID = {\n  // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n  // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  // we are hardcoding this \"typography-element\" for legacy reason,\n  //  people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n  //   having constant keys and changing value is literally the point of this kind of constants\n  'typography-element': 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n  ...LEGACY_DATA_TESTID,\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n  H1: 'h1',\n  H2: 'h2',\n  H3: 'h3',\n  H4: 'h4',\n  H5: 'h5',\n  H3_STRONG: 'h3-strong',\n  H4_STRONG: 'h4-strong',\n  H5_STRONG: 'h5-strong',\n  B1: 'b1',\n  B2: 'b2',\n  B3: 'b3',\n  B4: 'b4',\n  B1_LIGHT: 'b1-light',\n  B2_LIGHT: 'b2-light',\n  B3_LIGHT: 'b3-light',\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  FEEDBACK_BRAND: 'feedback-brand',\n  FEEDBACK_NEUTRAL: 'feedback-neutral',\n  FEEDBACK_IMPORTANT: 'feedback-important',\n  FEEDBACK_CRITICAL: 'feedback-critical',\n  BUTTON: 'button',\n  BUTTON_SML_TITLE: 'button-sml-title',\n  BUTTON_MED_TITLE: 'button-med-title',\n  BUTTON_LRG_TITLE: 'button-lrg-title',\n  LINK: 'link',\n  LINK_SML_TITLE: 'link-sml-title',\n  LINK_MED_TITLE: 'link-med-title',\n  LINK_LRG_TITLE: 'link-lrg-title',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AACxB;AAEO,MAAM,yBAAyB;AAAA,EACpC,OAAG,0CAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,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,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;",
   "names": []
 }

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

@@ -43,6 +43,7 @@ const VARIANTS_CSS_BODY = {
       font-size: ${(props) => props.fontSize ?? "1.08rem"};
       line-height: ${(props) => props.lineHeight ?? "1.38rem"};
     }
+    font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B2]: import_ds_system.css`
     font-size: ${(props) => props.fontSize ?? "0.8125rem"};
@@ -51,6 +52,7 @@ const VARIANTS_CSS_BODY = {
       font-size: ${(props) => props.fontSize ?? "1rem"};
       line-height: ${(props) => props.lineHeight ?? "1.31rem"};
     }
+    font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B3]: import_ds_system.css`
     font-size: ${(props) => props.fontSize ?? "0.7475rem"};
@@ -59,6 +61,7 @@ const VARIANTS_CSS_BODY = {
       font-size: ${(props) => props.fontSize ?? "0.92rem"};
       line-height: ${(props) => props.lineHeight ?? "1.23rem"};
     }
+    font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B4]: import_ds_system.css`
     font-size: ${(props) => props.fontSize ?? "0.6906249999999999rem"};
@@ -67,6 +70,37 @@ const VARIANTS_CSS_BODY = {
       font-size: ${(props) => props.fontSize ?? "0.85rem"};
       line-height: ${(props) => props.lineHeight ?? "1rem"};
     }
+    font-weight: 400;
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.B1_LIGHT]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.1212499999999999rem"};
+    color: ${(props) => props.theme.colors.neutral[600]};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.08rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.38rem"};
+    }
+    font-weight: 400;
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.B2_LIGHT]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.8125rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
+    color: ${(props) => props.theme.colors.neutral[600]};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.31rem"};
+    }
+    font-weight: 400;
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.B3_LIGHT]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.7475rem"};
+    line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
+    color: ${(props) => props.theme.colors.neutral[600]};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "0.92rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.23rem"};
+    }
+    font-weight: 400;
   `
 };
 //# sourceMappingURL=body.js.map

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

@@ -1,7 +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;",
+  "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    font-weight: 400;\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    font-weight: 400;\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    font-weight: 400;\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    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\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    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\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    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\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    font-weight: 400;\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;AAAA,EAIlD,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;AAAA,EAIlD,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;AAAA,EAIlD,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;AAAA,EAIlD,CAAC,qCAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,aACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,yBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA,EAIlD,CAAC,qCAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,aACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,yBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA,EAIlD,CAAC,qCAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY;AAAA,mBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA,aACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,yBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACvC,CAAC,UAAU,MAAM,YAAY;AAAA,qBAC3B,CAAC,UAAU,MAAM,cAAc;AAAA;AAAA;AAAA;AAIpD;",
   "names": []
 }

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

@@ -59,6 +59,78 @@ const VARIANTS_BUTTON = {
     &:focus {
       color: ${(props) => props.theme.colors.brand[700]};
     }
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.BUTTON_SML_TITLE]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.875rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.077rem"};
+      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]};
+    }
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.BUTTON_MED_TITLE]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "1rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.231rem"};
+      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]};
+    }
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.BUTTON_LRG_TITLE]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "1.125rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.385rem"};
+      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

@@ -1,7 +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;",
+  "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  [TYPOGRAPHY_VARIANTS.BUTTON_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    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  [TYPOGRAPHY_VARIANTS.BUTTON_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    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  [TYPOGRAPHY_VARIANTS.BUTTON_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    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;AAAA,EAGpD,CAAC,qCAAoB,gBAAgB,GAAG;AAAA,iBACzB,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;AAAA,EAGpD,CAAC,qCAAoB,gBAAgB,GAAG;AAAA,iBACzB,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;AAAA,EAGpD,CAAC,qCAAoB,gBAAgB,GAAG;AAAA,iBACzB,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": []
 }

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

@@ -0,0 +1,52 @@
+"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 feedback_exports = {};
+__export(feedback_exports, {
+  VARIANTS_CSS_FEEDBACK: () => VARIANTS_CSS_FEEDBACK
+});
+module.exports = __toCommonJS(feedback_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_FEEDBACK = {
+  [import_constants.TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: import_ds_system.css`
+    color: ${(props) => props.theme.colors.neutral[600]};
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: import_ds_system.css`
+    color: ${(props) => props.theme.colors.brand[800]};
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: import_ds_system.css`
+    color: ${(props) => props.theme.colors.warning[950]};
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: import_ds_system.css`
+    color: ${(props) => props.theme.colors.danger[950]};
+  `
+};
+//# sourceMappingURL=feedback.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/variants/feedback.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 FeedbackCSSMap = {\n  [key in DSTypographyT.FeedbackVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_FEEDBACK: FeedbackCSSMap = {\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.neutral[600]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.brand[800]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.warning[950]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.danger[950]};\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;AAKhB,MAAM,wBAAwC;AAAA,EACnD,CAAC,qCAAoB,gBAAgB,GAAG;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAEpD,CAAC,qCAAoB,cAAc,GAAG;AAAA,aAC3B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,EAElD,CAAC,qCAAoB,kBAAkB,GAAG;AAAA,aAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAEpD,CAAC,qCAAoB,iBAAiB,GAAG;AAAA,aAC9B,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAErD;",
+  "names": []
+}

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

@@ -52,6 +52,7 @@ const VARIANTS_CSS_HEADER = {
       font-size: ${(props) => props.fontSize ?? "1.85rem"};
       line-height: ${(props) => props.lineHeight ?? "2.38rem"};
     }
+    font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H3]: import_ds_system.css`
     font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
@@ -60,6 +61,7 @@ const VARIANTS_CSS_HEADER = {
       font-size: ${(props) => props.fontSize ?? "1.38rem"};
       line-height: ${(props) => props.lineHeight ?? "1.69rem"};
     }
+    font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H4]: import_ds_system.css`
     font-size: ${(props) => props.fontSize ?? "0.999375rem"};
@@ -68,7 +70,7 @@ const VARIANTS_CSS_HEADER = {
       font-size: ${(props) => props.fontSize ?? "1.23rem"};
       line-height: ${(props) => props.lineHeight ?? "1.54rem"};
     }
-    font-weight: 600;
+    font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H5]: import_ds_system.css`
     font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
@@ -77,6 +79,34 @@ const VARIANTS_CSS_HEADER = {
       font-size: ${(props) => props.fontSize ?? "1.08rem"};
       line-height: ${(props) => props.lineHeight ?? "1.31rem"};
     }
+    font-weight: 400;
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.H5_STRONG]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.08rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.31rem"};
+    }
+    font-weight: 600;
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.H4_STRONG]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "0.999375rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.23rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.54rem"};
+    }
+    font-weight: 600;
+  `,
+  [import_constants.TYPOGRAPHY_VARIANTS.H3_STRONG]: import_ds_system.css`
+    font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
+    line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "1.38rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.69rem"};
+    }
+    font-weight: 600;
   `
 };
 //# sourceMappingURL=header.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/header.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 HeadingCSSMap = {\n  [key in DSTypographyT.HeadingVariants]: 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_HEADER: HeadingCSSMap = {\n  [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n    line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '2.62rem'};\n      line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.85rem'};\n      line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.38rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.23rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n    }\n    font-weight: 600;\n  `,\n  [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\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,sBAAqC;AAAA,EAChD,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;AAAA,EAIlD,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;AAAA,EAIlD,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;",
+  "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 HeadingCSSMap = {\n  [key in DSTypographyT.HeadingVariants]: 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_HEADER: HeadingCSSMap = {\n  [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n    line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '2.62rem'};\n      line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.85rem'};\n      line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.38rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.23rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H5_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n    }\n    font-weight: 600;\n  `,\n  [TYPOGRAPHY_VARIANTS.H4_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.23rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n    }\n    font-weight: 600;\n  `,\n  [TYPOGRAPHY_VARIANTS.H3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.38rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n    }\n    font-weight: 600;\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,sBAAqC;AAAA,EAChD,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;AAAA,EAIlD,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;AAAA,EAIlD,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;AAAA,EAIlD,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;AAAA,EAIlD,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;AAAA,EAIlD,CAAC,qCAAoB,SAAS,GAAG;AAAA,iBAClB,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;AAAA,EAIlD,CAAC,qCAAoB,SAAS,GAAG;AAAA,iBAClB,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;AAAA,EAIlD,CAAC,qCAAoB,SAAS,GAAG;AAAA,iBAClB,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;AAIpD;",
   "names": []
 }

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

@@ -54,15 +54,15 @@ const VARIANTS_CSS_HIGHLIGHT = {
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;
-    background-color: #ffefd8;
-    color: #853c12;
+    background-color: ${(props) => props.theme.colors.warning[400]};
+    color: ${(props) => props.theme.colors.warning[950]};
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: import_ds_system.css`
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;
-    background-color: #fbebed;
-    color: #c70916;
+    background-color: ${(props) => props.theme.colors.danger[400]};
+    color: ${(props) => props.theme.colors.danger[950]};
   `
 };
 //# sourceMappingURL=highlight.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/highlight.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 HighlightCSSMap = {\n  [key in DSTypographyT.HighlightVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_HIGHLIGHT: HighlightCSSMap = {\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.neutral['050']};\n    color: ${(props) => props.theme.colors.neutral[600]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.brand[200]};\n    color: ${(props) => props.theme.colors.brand[800]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: #ffefd8;\n    color: #853c12;\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: #fbebed;\n    color: #c70916;\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;AAKhB,MAAM,yBAA0C;AAAA,EACrD,CAAC,qCAAoB,iBAAiB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAInB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,aACtD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAEpD,CAAC,qCAAoB,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIjB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,aAClD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,EAElD,CAAC,qCAAoB,mBAAmB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO3C,CAAC,qCAAoB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C;",
+  "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 HighlightCSSMap = {\n  [key in DSTypographyT.HighlightVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_HIGHLIGHT: HighlightCSSMap = {\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.neutral['050']};\n    color: ${(props) => props.theme.colors.neutral[600]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.brand[200]};\n    color: ${(props) => props.theme.colors.brand[800]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.warning[400]};\n    color: ${(props) => props.theme.colors.warning[950]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.danger[400]};\n    color: ${(props) => props.theme.colors.danger[950]};\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;AAKhB,MAAM,yBAA0C;AAAA,EACrD,CAAC,qCAAoB,iBAAiB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAInB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,aACtD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAEpD,CAAC,qCAAoB,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIjB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,aAClD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,EAElD,CAAC,qCAAoB,mBAAmB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,aACpD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAEpD,CAAC,qCAAoB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIpB,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA,aACnD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAErD;",
   "names": []
 }

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

@@ -31,6 +31,7 @@ __export(variants_exports, {
   VARIANTS_BUTTON: () => import_button2.VARIANTS_BUTTON,
   VARIANTS_CSS_BODY: () => import_body2.VARIANTS_CSS_BODY,
   VARIANTS_CSS_BODY_ARTICLE: () => import_body_article2.VARIANTS_CSS_BODY_ARTICLE,
+  VARIANTS_CSS_FEEDBACK: () => import_feedback2.VARIANTS_CSS_FEEDBACK,
   VARIANTS_CSS_HEADER: () => import_header2.VARIANTS_CSS_HEADER,
   VARIANTS_CSS_HEADER_ARTICLE: () => import_header_article2.VARIANTS_CSS_HEADER_ARTICLE,
   VARIANTS_CSS_HIGHLIGHT: () => import_highlight2.VARIANTS_CSS_HIGHLIGHT,
@@ -49,6 +50,7 @@ var import_header_article = require("./header-article.js");
 var import_body_article = require("./body-article.js");
 var import_quote = require("./quote.js");
 var import_highlight = require("./highlight.js");
+var import_feedback = require("./feedback.js");
 var import_header2 = require("./header.js");
 var import_body2 = require("./body.js");
 var import_button2 = require("./button.js");
@@ -57,6 +59,7 @@ var import_header_article2 = require("./header-article.js");
 var import_body_article2 = require("./body-article.js");
 var import_quote2 = require("./quote.js");
 var import_highlight2 = require("./highlight.js");
+var import_feedback2 = require("./feedback.js");
 const typedCss = () => import_ds_system.css``;
 const VARIANTS_CSS_MAP = {
   ...import_header.VARIANTS_CSS_HEADER,
@@ -66,6 +69,7 @@ const VARIANTS_CSS_MAP = {
   ...import_header_article.VARIANTS_CSS_HEADER_ARTICLE,
   ...import_body_article.VARIANTS_CSS_BODY_ARTICLE,
   ...import_quote.VARIANTS_CSS_QUOTE,
-  ...import_highlight.VARIANTS_CSS_HIGHLIGHT
+  ...import_highlight.VARIANTS_CSS_HIGHLIGHT,
+  ...import_feedback.VARIANTS_CSS_FEEDBACK
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/index.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { css } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { VARIANTS_CSS_HEADER } from './header.js';\nimport { VARIANTS_CSS_BODY } from './body.js';\nimport { VARIANTS_BUTTON } from './button.js';\nimport { VARIANTS_LINK } from './link.js';\nimport { VARIANTS_CSS_HEADER_ARTICLE } from './header-article.js';\nimport { VARIANTS_CSS_BODY_ARTICLE } from './body-article.js';\nimport { VARIANTS_CSS_QUOTE } from './quote.js';\nimport { VARIANTS_CSS_HIGHLIGHT } from './highlight.js';\n\nexport { VARIANTS_CSS_HEADER } from './header.js';\nexport { VARIANTS_CSS_BODY } from './body.js';\nexport { VARIANTS_BUTTON } from './button.js';\nexport { VARIANTS_LINK } from './link.js';\nexport { VARIANTS_CSS_HEADER_ARTICLE } from './header-article.js';\nexport { VARIANTS_CSS_BODY_ARTICLE } from './body-article.js';\nexport { VARIANTS_CSS_QUOTE } from './quote.js';\nexport { VARIANTS_CSS_HIGHLIGHT } from './highlight.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.\n// this is importing (and declaring) a javascript function for typescript purposes which is extremely bad\n//   BUT transpiler are magical and they should be abra-cadabra-ing this function away\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype VariantCSSMap = {\n  [key in DSTypographyT.Variant]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_MAP: VariantCSSMap = {\n  ...VARIANTS_CSS_HEADER,\n  ...VARIANTS_CSS_BODY,\n  ...VARIANTS_BUTTON,\n  ...VARIANTS_LINK,\n  ...VARIANTS_CSS_HEADER_ARTICLE,\n  ...VARIANTS_CSS_BODY_ARTICLE,\n  ...VARIANTS_CSS_QUOTE,\n  ...VARIANTS_CSS_HIGHLIGHT,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AAEpB,oBAAoC;AACpC,kBAAkC;AAClC,oBAAgC;AAChC,kBAA8B;AAC9B,4BAA4C;AAC5C,0BAA0C;AAC1C,mBAAmC;AACnC,uBAAuC;AAEvC,IAAAA,iBAAoC;AACpC,IAAAC,eAAkC;AAClC,IAAAC,iBAAgC;AAChC,IAAAC,eAA8B;AAC9B,IAAAC,yBAA4C;AAC5C,IAAAC,uBAA0C;AAC1C,IAAAC,gBAAmC;AACnC,IAAAC,oBAAuC;AAMvC,MAAM,WAAW,MAAM;AAKhB,MAAM,mBAAkC;AAAA,EAC7C,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;",
-  "names": ["import_header", "import_body", "import_button", "import_link", "import_header_article", "import_body_article", "import_quote", "import_highlight"]
+  "sourcesContent": ["import { css } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { VARIANTS_CSS_HEADER } from './header.js';\nimport { VARIANTS_CSS_BODY } from './body.js';\nimport { VARIANTS_BUTTON } from './button.js';\nimport { VARIANTS_LINK } from './link.js';\nimport { VARIANTS_CSS_HEADER_ARTICLE } from './header-article.js';\nimport { VARIANTS_CSS_BODY_ARTICLE } from './body-article.js';\nimport { VARIANTS_CSS_QUOTE } from './quote.js';\nimport { VARIANTS_CSS_HIGHLIGHT } from './highlight.js';\nimport { VARIANTS_CSS_FEEDBACK } from './feedback.js';\n\nexport { VARIANTS_CSS_HEADER } from './header.js';\nexport { VARIANTS_CSS_BODY } from './body.js';\nexport { VARIANTS_BUTTON } from './button.js';\nexport { VARIANTS_LINK } from './link.js';\nexport { VARIANTS_CSS_HEADER_ARTICLE } from './header-article.js';\nexport { VARIANTS_CSS_BODY_ARTICLE } from './body-article.js';\nexport { VARIANTS_CSS_QUOTE } from './quote.js';\nexport { VARIANTS_CSS_HIGHLIGHT } from './highlight.js';\nexport { VARIANTS_CSS_FEEDBACK } from './feedback.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.\n// this is importing (and declaring) a javascript function for typescript purposes which is extremely bad\n//   BUT transpiler are magical and they should be abra-cadabra-ing this function away\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype VariantCSSMap = {\n  [key in DSTypographyT.Variant]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_MAP: VariantCSSMap = {\n  ...VARIANTS_CSS_HEADER,\n  ...VARIANTS_CSS_BODY,\n  ...VARIANTS_BUTTON,\n  ...VARIANTS_LINK,\n  ...VARIANTS_CSS_HEADER_ARTICLE,\n  ...VARIANTS_CSS_BODY_ARTICLE,\n  ...VARIANTS_CSS_QUOTE,\n  ...VARIANTS_CSS_HIGHLIGHT,\n  ...VARIANTS_CSS_FEEDBACK,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AAEpB,oBAAoC;AACpC,kBAAkC;AAClC,oBAAgC;AAChC,kBAA8B;AAC9B,4BAA4C;AAC5C,0BAA0C;AAC1C,mBAAmC;AACnC,uBAAuC;AACvC,sBAAsC;AAEtC,IAAAA,iBAAoC;AACpC,IAAAC,eAAkC;AAClC,IAAAC,iBAAgC;AAChC,IAAAC,eAA8B;AAC9B,IAAAC,yBAA4C;AAC5C,IAAAC,uBAA0C;AAC1C,IAAAC,gBAAmC;AACnC,IAAAC,oBAAuC;AACvC,IAAAC,mBAAsC;AAMtC,MAAM,WAAW,MAAM;AAKhB,MAAM,mBAAkC;AAAA,EAC7C,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;",
+  "names": ["import_header", "import_body", "import_button", "import_link", "import_header_article", "import_body_article", "import_quote", "import_highlight", "import_feedback"]
 }