@react-md/core 1.0.0-next.7 → 1.0.0-next.8

package/dist/typography/SrOnly.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Typography } from "./Typography.js";
 import { cssUtils } from "../cssUtils.js";
 /**
  * **Server Component**
@@ -25,10 +24,11 @@ import { cssUtils } from "../cssUtils.js";
  * }
  * ```
  */ export const SrOnly = /*#__PURE__*/ forwardRef(function SrOnly(props, ref) {
-    const { as = "span", className, phoneOnly, focusable, children, tabIndex, ...remaining } = props;
-    return /*#__PURE__*/ _jsx(Typography, {
+    const { as: AsComponent = "span", className, phoneOnly, focusable, children, tabIndex, ...remaining } = props;
+    // do some type-casting so ref works
+    const Component = AsComponent;
+    return /*#__PURE__*/ _jsx(Component, {
         ...remaining,
-        as: as,
         ref: ref,
         tabIndex: tabIndex ?? (focusable ? 0 : undefined),
         className: cssUtils({

package/dist/typography/SrOnly.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/SrOnly.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  Typography,\n  type CustomTypographyComponent,\n  type TypographyHTMLElement,\n  type TypographyProps,\n} from \"./Typography.js\";\nimport { cssUtils } from \"../cssUtils.js\";\n\nexport interface SrOnlyProps extends TypographyProps {\n  /** @defaultValue `\"span\"` */\n  as?: CustomTypographyComponent;\n\n  /**\n   * Set this to `true` if the content should only be screen reader only text on\n   * phones. This is useful for only displaying an icon on phones when there is\n   * limited space and then displaying an icon and text on larger devices.\n   *\n   * @defaultValue `false`\n   */\n  phoneOnly?: boolean;\n\n  /**\n   * Set this to `true` if the element should be keyboard focusable.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { SrOnly } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <SrOnly>\n *         I am only visible to screen readers.\n *       </SrOnly>\n *       <SrOnly focusable>\n *         I am only visible to screen readers but can be focused.\n *       </SrOnly>\n *     </>\n *   );\n * }\n * ```\n */\nexport const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(\n  function SrOnly(props, ref) {\n    const {\n      as = \"span\",\n      className,\n      phoneOnly,\n      focusable,\n      children,\n      tabIndex,\n      ...remaining\n    } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        as={as}\n        ref={ref}\n        tabIndex={tabIndex ?? (focusable ? 0 : undefined)}\n        className={cssUtils({\n          srOnly: focusable ? \"focusable\" : phoneOnly ? \"phone\" : true,\n          className,\n        })}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["forwardRef","Typography","cssUtils","SrOnly","props","ref","as","className","phoneOnly","focusable","children","tabIndex","remaining","undefined","srOnly"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,UAAU,QAIL,kBAAkB;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAuB1C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,KAAK,MAAM,EACXC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACH;QACE,GAAGW,SAAS;QACbN,IAAIA;QACJD,KAAKA;QACLM,UAAUA,YAAaF,CAAAA,YAAY,IAAII,SAAQ;QAC/CN,WAAWL,SAAS;YAClBY,QAAQL,YAAY,cAAcD,YAAY,UAAU;YACxDD;QACF;kBAECG;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/SrOnly.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport {\n  type CustomTypographyComponent,\n  type TypographyHTMLElement,\n} from \"./Typography.js\";\n\nexport interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {\n  /** @defaultValue `\"span\"` */\n  as?: CustomTypographyComponent;\n\n  /**\n   * Set this to `true` if the content should only be screen reader only text on\n   * phones. This is useful for only displaying an icon on phones when there is\n   * limited space and then displaying an icon and text on larger devices.\n   *\n   * @defaultValue `false`\n   */\n  phoneOnly?: boolean;\n\n  /**\n   * Set this to `true` if the element should be keyboard focusable.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { SrOnly } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <SrOnly>\n *         I am only visible to screen readers.\n *       </SrOnly>\n *       <SrOnly focusable>\n *         I am only visible to screen readers but can be focused.\n *       </SrOnly>\n *     </>\n *   );\n * }\n * ```\n */\nexport const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(\n  function SrOnly(props, ref) {\n    const {\n      as: AsComponent = \"span\",\n      className,\n      phoneOnly,\n      focusable,\n      children,\n      tabIndex,\n      ...remaining\n    } = props;\n\n    // do some type-casting so ref works\n    const Component = AsComponent as ElementType;\n\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        tabIndex={tabIndex ?? (focusable ? 0 : undefined)}\n        className={cssUtils({\n          srOnly: focusable ? \"focusable\" : phoneOnly ? \"phone\" : true,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","cssUtils","SrOnly","props","ref","as","AsComponent","className","phoneOnly","focusable","children","tabIndex","remaining","Component","undefined","srOnly"],"mappings":";AAAA,SAASA,UAAU,QAA+C,QAAQ;AAC1E,SAASC,QAAQ,QAAQ,iBAAiB;AA2B1C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,uBAASF,WACpB,SAASE,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,cAAc,MAAM,EACxBC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJ,oCAAoC;IACpC,MAAMU,YAAYP;IAElB,qBACE,KAACO;QACE,GAAGD,SAAS;QACbR,KAAKA;QACLO,UAAUA,YAAaF,CAAAA,YAAY,IAAIK,SAAQ;QAC/CP,WAAWN,SAAS;YAClBc,QAAQN,YAAY,cAAcD,YAAY,UAAU;YACxDD;QACF;kBAECG;;AAGP,GACA"}

package/dist/typography/Typography.d.ts

@@ -36,24 +36,24 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  * @example
  * Simple Example
  * ```ts
- * import { getTypographyClassName } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
- *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
- *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
- *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
- *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
- *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
- *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
- *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
- *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
- *       <p className={getTypographyClassName()} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <caption className={getTypographyClassName({ type: "caption" })} />
- *       <span className={getTypographyClassName({ type: "overline" })} />
+ *       <h1 className={typography({ type: "headline-1" })} />
+ *       <h2 className={typography({ type: "headline-2" })} />
+ *       <h3 className={typography({ type: "headline-3" })} />
+ *       <h4 className={typography({ type: "headline-4" })} />
+ *       <h5 className={typography({ type: "headline-5" })} />
+ *       <h6 className={typography({ type: "headline-6" })} />
+ *       <h5 className={typography({ type: "subtitle-1" })} />
+ *       <h6 className={typography({ type: "subtitle-2" })} />
+ *       <p className={typography()} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <caption className={typography({ type: "caption" })} />
+ *       <span className={typography({ type: "overline" })} />
  *     </>
  *   );
  * }
@@ -62,14 +62,14 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  * @example
  * Applying Additional Styles
  * ```ts
- * import { getTypography } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
  *       <h1
  *         // only maintain the default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-1",
  *           margin: "bottom",
  *         })}
@@ -77,7 +77,7 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  *
  *       <h2
  *         // remove all default margin
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-2",
  *           margin: "none",
  *         })}
@@ -85,7 +85,7 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  *
  *       <h3
  *         // only maintain the default margin-top
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-3",
  *           margin: "top",
  *         })}
@@ -93,7 +93,7 @@ export type NullableTypographyClassNameOptions = Omit<TypographyClassNameOptions
  *
  *       <p
  *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type "subtitle-1",
  *           align: "center",
  *           margin: "bottom",

package/dist/typography/Typography.js

@@ -10,24 +10,24 @@ import { cssUtils } from "../cssUtils.js";
  * @example
  * Simple Example
  * ```ts
- * import { getTypographyClassName } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
- *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
- *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
- *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
- *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
- *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
- *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
- *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
- *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
- *       <p className={getTypographyClassName()} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <caption className={getTypographyClassName({ type: "caption" })} />
- *       <span className={getTypographyClassName({ type: "overline" })} />
+ *       <h1 className={typography({ type: "headline-1" })} />
+ *       <h2 className={typography({ type: "headline-2" })} />
+ *       <h3 className={typography({ type: "headline-3" })} />
+ *       <h4 className={typography({ type: "headline-4" })} />
+ *       <h5 className={typography({ type: "headline-5" })} />
+ *       <h6 className={typography({ type: "headline-6" })} />
+ *       <h5 className={typography({ type: "subtitle-1" })} />
+ *       <h6 className={typography({ type: "subtitle-2" })} />
+ *       <p className={typography()} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <caption className={typography({ type: "caption" })} />
+ *       <span className={typography({ type: "overline" })} />
  *     </>
  *   );
  * }
@@ -36,14 +36,14 @@ import { cssUtils } from "../cssUtils.js";
  * @example
  * Applying Additional Styles
  * ```ts
- * import { getTypography } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
  *       <h1
  *         // only maintain the default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-1",
  *           margin: "bottom",
  *         })}
@@ -51,7 +51,7 @@ import { cssUtils } from "../cssUtils.js";
  *
  *       <h2
  *         // remove all default margin
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-2",
  *           margin: "none",
  *         })}
@@ -59,7 +59,7 @@ import { cssUtils } from "../cssUtils.js";
  *
  *       <h3
  *         // only maintain the default margin-top
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-3",
  *           margin: "top",
  *         })}
@@ -67,7 +67,7 @@ import { cssUtils } from "../cssUtils.js";
  *
  *       <p
  *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type "subtitle-1",
  *           align: "center",
  *           margin: "bottom",

package/dist/typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport { cssUtils, type TextCssUtilsOptions } from \"../cssUtils.js\";\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example\n * Simple Example\n * ```ts\n * import { getTypographyClassName } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={getTypographyClassName({ type: \"headline-1\" })} />\n *       <h2 className={getTypographyClassName({ type: \"headline-2\" })} />\n *       <h3 className={getTypographyClassName({ type: \"headline-3\" })} />\n *       <h4 className={getTypographyClassName({ type: \"headline-4\" })} />\n *       <h5 className={getTypographyClassName({ type: \"headline-5\" })} />\n *       <h6 className={getTypographyClassName({ type: \"headline-6\" })} />\n *       <h5 className={getTypographyClassName({ type: \"subtitle-1\" })} />\n *       <h6 className={getTypographyClassName({ type: \"subtitle-2\" })} />\n *       <p className={getTypographyClassName()} />\n *       <p className={getTypographyClassName({ type \"body-1\" })} />\n *       <p className={getTypographyClassName({ type \"body-1\" })} />\n *       <caption className={getTypographyClassName({ type: \"caption\" })} />\n *       <span className={getTypographyClassName({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Applying Additional Styles\n * ```ts\n * import { getTypography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={getTypographyClassName({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={getTypographyClassName({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={getTypographyClassName({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={getTypographyClassName({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @remarks \\@since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n\n/**\n * A union of the default supported elements that the `Typography` component can\n * be rendered as. This is mostly used for adding the correct `HTMLAttributes`\n * and enabling the forward ref.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomTypographyComponent = ElementType<\n  HTMLAttributes<TypographyHTMLElement> & { className: string }\n>;\n\n/** @internal */\nfunction getComponent(\n  as: CustomTypographyComponent | undefined,\n  type: TypographyType\n): ElementType {\n  if (as) {\n    return as;\n  }\n\n  switch (type) {\n    case \"headline-1\":\n      return \"h1\";\n    case \"headline-2\":\n      return \"h2\";\n    case \"headline-3\":\n      return \"h3\";\n    case \"headline-4\":\n      return \"h4\";\n    case \"headline-5\":\n      return \"h5\";\n    case \"headline-6\":\n    case \"subtitle-1\":\n    case \"subtitle-2\":\n      return \"h6\";\n    case \"body-1\":\n    case \"body-2\":\n      return \"p\";\n    case \"caption\":\n      return \"caption\";\n    default:\n      return \"span\";\n  }\n}\n\nexport interface TypographyProps\n  extends HTMLAttributes<TypographyHTMLElement>,\n    TypographyClassNameOptions {\n  /**\n   * The component to render as when the children are not a render function. If\n   * this prop is omitted, the component will be determined by the `type` prop\n   * where:\n   *\n   * - `\"headline-1\" -> <h1>`\n   * - `\"headline-2\" -> <h2>`\n   * - `\"headline-3\" -> <h3>`\n   * - `\"headline-4\" -> <h4>`\n   * - `\"headline-5\" -> <h5>`\n   * - `\"headline-6\" -> <h6>`\n   * - `\"subtitle-1\" -> <h5>`\n   * - `\"subtitle-2\" -> <h6>`\n   * - `\"body-1\"     -> <p>`\n   * - `\"body-2\"     -> <p>`\n   * - `\"caption\"    -> <caption>`\n   * - `\"overline\"   -> <span>`\n   */\n  as?: CustomTypographyComponent;\n}\n\n/**\n * **Server Component**\n *\n * Render text with one of the material design typography styles applied and\n * optional styles like font-weight, font-style, text color, etc.\n *\n * @example\n * All Example\n * ```tsx\n * import { Typography } from \"@react-md/core\":\n *\n * export function Example() {\n *   return (\n *    <>\n *      <Typography type=\"headline-1\">Headline 1</Typography>\n *      <Typography type=\"headline-2\">Headline 2</Typography>\n *      <Typography type=\"headline-3\">Headline 3</Typography>\n *      <Typography type=\"headline-4\">Headline 4</Typography>\n *      <Typography type=\"headline-5\">Headline 5</Typography>\n *      <Typography type=\"headline-6\">Headline 6</Typography>\n *      <Typography type=\"subtitle-1\">Subtitle 1</Typography>\n *      <Typography type=\"subtitle-2\">Subtitle 2</Typography>\n *      <Typography>\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-1\">\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-2\">\n *        Another paragraph of text.\n *      </Typography>\n *      <Typography type=\"caption\" component=\"h5\">\n *        Caption text\n *      </Typography>\n *      <Typography type=\"overline\" component=\"h5\">\n *        Overline text\n *      </Typography>\n *    </>\n *   ):\n * }\n * ```\n */\nexport const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(\n  function Typography(props, ref): ReactElement {\n    const {\n      as,\n      type = \"body-1\",\n      className,\n      margin,\n      fontStyle,\n      fontWeight,\n      textAlign,\n      textColor,\n      textDecoration,\n      textTransform,\n      textOverflow,\n      children,\n      ...remaining\n    } = props;\n\n    const Component = getComponent(as, type);\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        className={typography({\n          type,\n          margin,\n          fontStyle,\n          fontWeight,\n          textAlign,\n          textColor,\n          textDecoration,\n          textTransform,\n          textOverflow,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","typography","options","type","getComponent","as","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOJ,IACL,kBACAK,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb;AAuBA,cAAc,GACd,SAASE,aACPC,EAAyC,EACzCF,IAAoB;IAEpB,IAAIE,IAAI;QACN,OAAOA;IACT;IAEA,OAAQF;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMG,2BAAaP,WACxB,SAASO,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJH,EAAE,EACFF,OAAO,QAAQ,EACfM,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGZ;IAEJ,MAAMa,YAAYhB,aAAaC,IAAIF;IACnC,qBACE,KAACiB;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWR,WAAW;YACpBE;YACAO;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport { cssUtils, type TextCssUtilsOptions } from \"../cssUtils.js\";\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example\n * Simple Example\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={typography({ type: \"headline-1\" })} />\n *       <h2 className={typography({ type: \"headline-2\" })} />\n *       <h3 className={typography({ type: \"headline-3\" })} />\n *       <h4 className={typography({ type: \"headline-4\" })} />\n *       <h5 className={typography({ type: \"headline-5\" })} />\n *       <h6 className={typography({ type: \"headline-6\" })} />\n *       <h5 className={typography({ type: \"subtitle-1\" })} />\n *       <h6 className={typography({ type: \"subtitle-2\" })} />\n *       <p className={typography()} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <caption className={typography({ type: \"caption\" })} />\n *       <span className={typography({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Applying Additional Styles\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={typography({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={typography({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={typography({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={typography({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @remarks \\@since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n\n/**\n * A union of the default supported elements that the `Typography` component can\n * be rendered as. This is mostly used for adding the correct `HTMLAttributes`\n * and enabling the forward ref.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomTypographyComponent = ElementType<\n  HTMLAttributes<TypographyHTMLElement> & { className: string }\n>;\n\n/** @internal */\nfunction getComponent(\n  as: CustomTypographyComponent | undefined,\n  type: TypographyType\n): ElementType {\n  if (as) {\n    return as;\n  }\n\n  switch (type) {\n    case \"headline-1\":\n      return \"h1\";\n    case \"headline-2\":\n      return \"h2\";\n    case \"headline-3\":\n      return \"h3\";\n    case \"headline-4\":\n      return \"h4\";\n    case \"headline-5\":\n      return \"h5\";\n    case \"headline-6\":\n    case \"subtitle-1\":\n    case \"subtitle-2\":\n      return \"h6\";\n    case \"body-1\":\n    case \"body-2\":\n      return \"p\";\n    case \"caption\":\n      return \"caption\";\n    default:\n      return \"span\";\n  }\n}\n\nexport interface TypographyProps\n  extends HTMLAttributes<TypographyHTMLElement>,\n    TypographyClassNameOptions {\n  /**\n   * The component to render as when the children are not a render function. If\n   * this prop is omitted, the component will be determined by the `type` prop\n   * where:\n   *\n   * - `\"headline-1\" -> <h1>`\n   * - `\"headline-2\" -> <h2>`\n   * - `\"headline-3\" -> <h3>`\n   * - `\"headline-4\" -> <h4>`\n   * - `\"headline-5\" -> <h5>`\n   * - `\"headline-6\" -> <h6>`\n   * - `\"subtitle-1\" -> <h5>`\n   * - `\"subtitle-2\" -> <h6>`\n   * - `\"body-1\"     -> <p>`\n   * - `\"body-2\"     -> <p>`\n   * - `\"caption\"    -> <caption>`\n   * - `\"overline\"   -> <span>`\n   */\n  as?: CustomTypographyComponent;\n}\n\n/**\n * **Server Component**\n *\n * Render text with one of the material design typography styles applied and\n * optional styles like font-weight, font-style, text color, etc.\n *\n * @example\n * All Example\n * ```tsx\n * import { Typography } from \"@react-md/core\":\n *\n * export function Example() {\n *   return (\n *    <>\n *      <Typography type=\"headline-1\">Headline 1</Typography>\n *      <Typography type=\"headline-2\">Headline 2</Typography>\n *      <Typography type=\"headline-3\">Headline 3</Typography>\n *      <Typography type=\"headline-4\">Headline 4</Typography>\n *      <Typography type=\"headline-5\">Headline 5</Typography>\n *      <Typography type=\"headline-6\">Headline 6</Typography>\n *      <Typography type=\"subtitle-1\">Subtitle 1</Typography>\n *      <Typography type=\"subtitle-2\">Subtitle 2</Typography>\n *      <Typography>\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-1\">\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-2\">\n *        Another paragraph of text.\n *      </Typography>\n *      <Typography type=\"caption\" component=\"h5\">\n *        Caption text\n *      </Typography>\n *      <Typography type=\"overline\" component=\"h5\">\n *        Overline text\n *      </Typography>\n *    </>\n *   ):\n * }\n * ```\n */\nexport const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(\n  function Typography(props, ref): ReactElement {\n    const {\n      as,\n      type = \"body-1\",\n      className,\n      margin,\n      fontStyle,\n      fontWeight,\n      textAlign,\n      textColor,\n      textDecoration,\n      textTransform,\n      textOverflow,\n      children,\n      ...remaining\n    } = props;\n\n    const Component = getComponent(as, type);\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        className={typography({\n          type,\n          margin,\n          fontStyle,\n          fontWeight,\n          textAlign,\n          textColor,\n          textDecoration,\n          textTransform,\n          textOverflow,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","typography","options","type","getComponent","as","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOJ,IACL,kBACAK,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb;AAuBA,cAAc,GACd,SAASE,aACPC,EAAyC,EACzCF,IAAoB;IAEpB,IAAIE,IAAI;QACN,OAAOA;IACT;IAEA,OAAQF;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMG,2BAAaP,WACxB,SAASO,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJH,EAAE,EACFF,OAAO,QAAQ,EACfM,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGZ;IAEJ,MAAMa,YAAYhB,aAAaC,IAAIF;IACnC,qBACE,KAACiB;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWR,WAAW;YACpBE;YACAO;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}

package/dist/typography/_typography.scss

@@ -4,6 +4,18 @@
 @use "../utils";
 
 $disable-text-container: false !default;
+$disable-headline-1: false !default;
+$disable-headline-2: false !default;
+$disable-headline-3: false !default;
+$disable-headline-4: false !default;
+$disable-headline-5: false !default;
+$disable-headline-6: false !default;
+$disable-subtitle-1: false !default;
+$disable-subtitle-2: false !default;
+$disable-body-1: false !default;
+$disable-body-2: false !default;
+$disable-caption: false !default;
+$disable-overline: false !default;
 
 /// A small utility function to get the letter spacing based on tracking and
 /// font-size
@@ -216,9 +228,13 @@ $button-recommended-styles: map.merge(
   $base-font-styles,
   (
     font-size: 0.875rem,
-    line-height: 2.25rem,
     font-weight: map.get($font-weights, medium),
     letter-spacing: get-letter-spacing(1.25, 0.875),
+    line-height: 2.25rem,
+    // buttons with multiple lines of text look terrible because of the large
+    // line-height. You normally want to use a different component if the
+    // clickable area has so much content to line-wrap
+    line-wrap: nowrap,
   )
 );
 $button-custom-styles: () !default;
@@ -276,52 +292,76 @@ $typography-variables: (line-length, text-container-padding);
     .rmd-typography {
       @include utils.map-to-styles($base-font-styles);
 
-      &--headline-1 {
-        @include utils.map-to-styles($headline-1-styles);
+      @if not $disable-headline-1 {
+        &--headline-1 {
+          @include utils.map-to-styles($headline-1-styles);
+        }
       }
 
-      &--headline-2 {
-        @include utils.map-to-styles($headline-2-styles);
+      @if not $disable-headline-2 {
+        &--headline-2 {
+          @include utils.map-to-styles($headline-2-styles);
+        }
       }
 
-      &--headline-3 {
-        @include utils.map-to-styles($headline-3-styles);
+      @if not $disable-headline-3 {
+        &--headline-3 {
+          @include utils.map-to-styles($headline-3-styles);
+        }
       }
 
-      &--headline-4 {
-        @include utils.map-to-styles($headline-4-styles);
+      @if not $disable-headline-4 {
+        &--headline-4 {
+          @include utils.map-to-styles($headline-4-styles);
+        }
       }
 
-      &--headline-5 {
-        @include utils.map-to-styles($headline-5-styles);
+      @if not $disable-headline-5 {
+        &--headline-5 {
+          @include utils.map-to-styles($headline-5-styles);
+        }
       }
 
-      &--headline-6 {
-        @include utils.map-to-styles($headline-6-styles);
+      @if not $disable-headline-6 {
+        &--headline-6 {
+          @include utils.map-to-styles($headline-6-styles);
+        }
       }
 
-      &--subtitle-1 {
-        @include utils.map-to-styles($subtitle-1-styles);
+      @if not $disable-subtitle-1 {
+        &--subtitle-1 {
+          @include utils.map-to-styles($subtitle-1-styles);
+        }
       }
 
-      &--subtitle-2 {
-        @include utils.map-to-styles($subtitle-2-styles);
+      @if not $disable-subtitle-2 {
+        &--subtitle-2 {
+          @include utils.map-to-styles($subtitle-2-styles);
+        }
       }
 
-      &--body-1 {
-        @include utils.map-to-styles($body-1-styles);
+      @if not $disable-body-1 {
+        &--body-1 {
+          @include utils.map-to-styles($body-1-styles);
+        }
       }
 
-      &--body-2 {
-        @include utils.map-to-styles($body-2-styles);
+      @if not $disable-body-2 {
+        &--body-2 {
+          @include utils.map-to-styles($body-2-styles);
+        }
       }
 
-      &--caption {
-        @include utils.map-to-styles($caption-styles);
+      @if not $disable-caption {
+        &--caption {
+          @include utils.map-to-styles($caption-styles);
+        }
       }
 
-      &--overline {
-        @include utils.map-to-styles($overline-styles);
+      @if not $disable-overline {
+        &--overline {
+          @include utils.map-to-styles($overline-styles);
+        }
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.7",
+  "version": "1.0.0-next.8",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -60,15 +60,15 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@swc/cli": "^0.1.63",
-    "@swc/core": "1.3.105",
+    "@swc/cli": "^0.3.2",
+    "@swc/core": "1.3.106",
     "@swc/jest": "^0.2.31",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.6",
+    "@types/node": "^20.11.7",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "chokidar": "^3.5.3",
@@ -90,12 +90,12 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@jest/globals": "^29.6.1",
-    "@jest/types": "^29.6.1",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@jest/globals": "^29.7.0",
+    "@jest/types": "^29.6.3",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "react": ">= 18",
     "react-dom": ">= 18"
   },
@@ -132,7 +132,7 @@
     "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
     "prepare-release": "npm-run-all clean-dist build",
     "build": "npm-run-all build-esm build-scss build-types",
-    "build-esm": "swc src -d ./dist",
+    "build-esm": "swc -d ./dist --strip-leading-paths src",
     "build-esm-watch": "pnpm run build-esm --watch",
     "build-types": "tsc -P tsconfig.types.json",
     "build-types-watch": "pnpm run build-types --watch",

package/src/_core.scss

@@ -13,6 +13,7 @@
 @forward "icon/icon" as icon-*;
 @forward "divider/divider" as divider-*;
 @forward "progress/progress" as progress-*;
+@forward "overlay/overlay" as overlay-*;
 @forward "button/button" as button-*;
 @forward "badge/badge" as badge-*;
 @forward "tabs/tabs" as tabs-*;
@@ -21,7 +22,6 @@
 @forward "table/table" as table-*;
 @forward "app-bar/app-bar" as app-bar-*;
 @forward "responsive-item/responsive-item" as responsive-item-*;
-@forward "overlay/overlay" as overlay-*;
 @forward "card/card" as card-*;
 @forward "link/link" as link-*;
 @forward "list/list" as list-*;
@@ -361,53 +361,59 @@ $_layer-order: (
   @include typography.typography-variables;
 }
 
-@mixin styles {
-  @include css-reset;
-
-  @layer #{$_layer-order};
-  @include css-utils;
-
-  @include app-bar.styles;
-  @include avatar.styles;
-  @include badge.styles;
-  @include box.styles;
-  @include button.styles;
-  @include card.styles;
-  @include chip.styles;
-  @include dialog.styles;
-  @include divider.styles;
-  @include draggable.styles;
-  @include expansion-panel.styles;
-  @include form.styles;
-  @include icon.styles;
-  @include interaction.styles;
-  @include layout.styles;
-  @include link.styles;
-  @include list.styles;
-  @include menu.styles;
-  @include overlay.styles;
-  @include progress.styles;
-  @include responsive-item.styles;
-  @include segmented-button.styles;
-  @include sheet.styles;
-  @include snackbar.styles;
-  @include table.styles;
-  @include tabs.styles;
-  @include tooltip.styles;
-  @include transition.transition-styles;
-  @include tree.styles;
-  @include typography.typography-styles;
-  @include window-splitter.styles;
+@mixin styles(
+  $disable-layer: false,
+  $disable-layer-order: $disable-layer,
+  $disable-reset: false,
+  $disable-css-utils: false
+) {
+  @if not $disable-layer-order {
+    @layer #{$_layer-order};
+  }
+  @if not $disable-reset {
+    @include css-reset;
+  }
+  @if not $disable-css-utils {
+    @include css-utils($disable-layer);
+  }
+
+  @include app-bar.styles($disable-layer);
+  @include avatar.styles($disable-layer);
+  @include badge.styles($disable-layer);
+  @include box.styles($disable-layer);
+  @include button.styles($disable-layer);
+  @include card.styles($disable-layer);
+  @include chip.styles($disable-layer);
+  @include dialog.styles($disable-layer);
+  @include divider.styles($disable-layer);
+  @include draggable.styles($disable-layer);
+  @include expansion-panel.styles($disable-layer);
+  @include form.styles($disable-layer);
+  @include icon.styles($disable-layer);
+  @include interaction.styles($disable-layer);
+  @include layout.styles($disable-layer);
+  @include link.styles($disable-layer);
+  @include list.styles($disable-layer);
+  @include menu.styles($disable-layer);
+  @include overlay.styles($disable-layer);
+  @include progress.styles($disable-layer);
+  @include responsive-item.styles($disable-layer);
+  @include segmented-button.styles($disable-layer);
+  @include sheet.styles($disable-layer);
+  @include snackbar.styles($disable-layer);
+  @include table.styles($disable-layer);
+  @include tabs.styles($disable-layer);
+  @include tooltip.styles($disable-layer);
+  @include transition.transition-styles($disable-layer);
+  @include tree.styles($disable-layer);
+  @include typography.typography-styles($disable-layer);
+  @include window-splitter.styles($disable-layer);
 
   @if not theme.$disable-default-root-theme {
     :root {
       @include variables;
 
-      @if not
-        theme.$disable-default-system-theme and
-        theme.$color-scheme ==
-        system
-      {
+      @if theme.$color-scheme == system {
         @media (prefers-color-scheme: dark) {
           @include use-dark-theme;
         }

package/src/badge/_badge.scss

@@ -69,31 +69,35 @@ $variables: (
 }
 
 @mixin use-light-theme {
-  @if $light-theme-greyscale-background-color !=
-    $dark-theme-greyscale-background-color
-  {
-    @include set-var(
-      greyscale-background-color,
-      $light-theme-greyscale-background-color
-    );
-  }
-  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
-    @include set-var(greyscale-color, $light-theme-greyscale-color);
+  @if not $disable-everything {
+    @if $light-theme-greyscale-background-color !=
+      $dark-theme-greyscale-background-color
+    {
+      @include set-var(
+        greyscale-background-color,
+        $light-theme-greyscale-background-color
+      );
+    }
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $light-theme-greyscale-color);
+    }
   }
 }
 
 @mixin use-dark-theme {
-  @if $light-theme-greyscale-background-color !=
-    $dark-theme-greyscale-background-color
-  {
-    @include set-var(
-      greyscale-background-color,
+  @if not $disable-everything {
+    @if $light-theme-greyscale-background-color !=
       $dark-theme-greyscale-background-color
-    );
-  }
+    {
+      @include set-var(
+        greyscale-background-color,
+        $dark-theme-greyscale-background-color
+      );
+    }
 
-  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
-    @include set-var(greyscale-color, $dark-theme-greyscale-color);
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $dark-theme-greyscale-color);
+    }
   }
 }
 

package/src/button/__tests__/__snapshots__/Button.tsx.snap

@@ -25,7 +25,7 @@ exports[`Button floating action buttons should allow for responsive icon with la
     favorite
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-phone-sr-only"
+    class="rmd-phone-sr-only"
   >
     Label
   </span>