@react-md/core 6.3.0 → 6.3.2

package/dist/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { Box } from \"../box/Box.js\";\nimport { type BoxAlignItems, type BoxOptions } from \"../box/styles.js\";\nimport { type CardClassNameOptions, card } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-card-background-color\"?: string;\n    \"--rmd-card-color\"?: string;\n    \"--rmd-card-secondary-color\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions,\n    Pick<BoxOptions, \"align\" | \"justify\" | \"fullWidth\" | \"disableWrap\"> {\n  /** @defaultValue `\"stretch\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"start\"` */\n  justify?: BoxAlignItems;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Card } from \"@react-md/core/card/Card\";\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { CardFooter } from \"@react-md/core/card/CardFooter\";\n * import { CardHeader } from \"@react-md/core/card/CardHeader\";\n * import { CardTitle } from \"@react-md/core/card/CardTitle\";\n * import { CardSubtitle } from \"@react-md/core/card/CardSubtitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <CardTitle>Main Title</CardTitle>\n *         <CardSubtitle>A subtitle</CardSubtitle>\n *       </CardHeader>\n *       <CardContent>\n *         <Typography margin=\"none\">\n *           Some paragraph of text.\n *         </Typography>\n *       </CardContent>\n *       <CardFooter>\n *         <Button>Action 1</Button>\n *         <Button>Action 2</Button>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Removed the deprecated `raiseable` prop\n * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of\n * `block`/`inline-block`.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      children,\n      className,\n      align = \"stretch\",\n      justify = \"stretch\",\n      bordered,\n      raisable,\n      interactable,\n      ...remaining\n    } = props;\n\n    return (\n      <Box\n        align={align}\n        justify={justify}\n        disableWrap\n        {...remaining}\n        stacked\n        disableGap\n        disablePadding\n        ref={ref}\n        className={card({\n          className,\n          bordered,\n          raisable,\n          interactable,\n        })}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["forwardRef","Box","card","Card","props","ref","children","className","align","justify","bordered","raisable","interactable","remaining","disableWrap","stacked","disableGap","disablePadding"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAAoCC,IAAI,QAAQ,cAAc;AAyB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMC,qBAAOH,WAClB,SAASG,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,SAAS,EACjBC,UAAU,SAAS,EACnBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZ,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCO,OAAOA;QACPC,SAASA;QACTK,WAAW;QACV,GAAGD,SAAS;QACbE,OAAO;QACPC,UAAU;QACVC,cAAc;QACdZ,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAG;YACAC;YACAC;QACF;kBAECN;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { Box } from \"../box/Box.js\";\nimport { type BoxAlignItems, type BoxOptions } from \"../box/styles.js\";\nimport { type CardClassNameOptions, card } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions,\n    Pick<BoxOptions, \"align\" | \"justify\" | \"fullWidth\" | \"disableWrap\"> {\n  /** @defaultValue `\"stretch\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"start\"` */\n  justify?: BoxAlignItems;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Card } from \"@react-md/core/card/Card\";\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { CardFooter } from \"@react-md/core/card/CardFooter\";\n * import { CardHeader } from \"@react-md/core/card/CardHeader\";\n * import { CardTitle } from \"@react-md/core/card/CardTitle\";\n * import { CardSubtitle } from \"@react-md/core/card/CardSubtitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <CardTitle>Main Title</CardTitle>\n *         <CardSubtitle>A subtitle</CardSubtitle>\n *       </CardHeader>\n *       <CardContent>\n *         <Typography margin=\"none\">\n *           Some paragraph of text.\n *         </Typography>\n *       </CardContent>\n *       <CardFooter>\n *         <Button>Action 1</Button>\n *         <Button>Action 2</Button>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Removed the deprecated `raiseable` prop\n * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of\n * `block`/`inline-block`.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      children,\n      className,\n      align = \"stretch\",\n      justify = \"stretch\",\n      bordered,\n      raisable,\n      interactable,\n      ...remaining\n    } = props;\n\n    return (\n      <Box\n        align={align}\n        justify={justify}\n        disableWrap\n        {...remaining}\n        stacked\n        disableGap\n        disablePadding\n        ref={ref}\n        className={card({\n          className,\n          bordered,\n          raisable,\n          interactable,\n        })}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["forwardRef","Box","card","Card","props","ref","children","className","align","justify","bordered","raisable","interactable","remaining","disableWrap","stacked","disableGap","disablePadding"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAAoCC,IAAI,QAAQ,cAAc;AAiB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMC,qBAAOH,WAClB,SAASG,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,SAAS,EACjBC,UAAU,SAAS,EACnBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZ,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCO,OAAOA;QACPC,SAASA;QACTK,WAAW;QACV,GAAGD,SAAS;QACbE,OAAO;QACPC,UAAU;QACVC,cAAc;QACdZ,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAG;YACAC;YACAC;QACF;kBAECN;;AAGP,GACA"}

package/dist/card/styles.d.ts

@@ -1,3 +1,9 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-card-background-color"?: string;
+        "--rmd-card-color"?: string;
+    }
+}
 /** @since 6.0.0 */
 export interface CardClassNameOptions {
     className?: string;

package/dist/card/styles.js

@@ -1,12 +1,12 @@
 import { cnb } from "cnbuilder";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
-const cardStyles = bem("rmd-card");
+const styles = bem("rmd-card");
 /**
  * @since 6.0.0
  */ export function card(options = {}) {
     const { className, bordered, raisable, interactable } = options;
-    return cnb(cardStyles({
+    return cnb(styles({
         bordered,
         shadowed: !bordered,
         raisable: !bordered && raisable,
@@ -17,7 +17,7 @@ const cardStyles = bem("rmd-card");
  * @since 6.0.0
  */ export function cardHeader(options = {}) {
     const { className, addonAfter = false, addonBefore = false } = options;
-    return cnb(cardStyles("header", {
+    return cnb(styles("header", {
         "addon-after": addonAfter && !addonBefore,
         "addon-before": addonBefore && !addonAfter,
         surrounded: addonAfter && addonBefore
@@ -27,25 +27,25 @@ const cardStyles = bem("rmd-card");
  * @since 6.0.0
  */ export function cardHeaderContent(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("header-content"), className);
+    return cnb(styles("header-content"), className);
 }
 /**
  * @since 6.0.0
  */ export function cardTitle(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("title"), className);
+    return cnb(styles("title"), className);
 }
 /**
  * @since 6.0.0
  */ export function cardSubtitle(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("subtitle"), className);
+    return cnb(styles("subtitle"), className);
 }
 /**
  * @since 6.0.0
  */ export function cardContent(options = {}) {
     const { className, disablePadding, disableSecondaryColor, disableLastChildPadding } = options;
-    return cnb(cardStyles("content", {
+    return cnb(styles("content", {
         padded: !disablePadding,
         "padding-bottom": !disableLastChildPadding
     }), cssUtils({
@@ -56,7 +56,7 @@ const cardStyles = bem("rmd-card");
  * @since 6.0.0
  */ export function cardFooter(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("footer"), className);
+    return cnb(styles("footer"), className);
 }
 
 //# sourceMappingURL=styles.js.map

package/dist/card/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst cardStyles = bem(\"rmd-card\");\n\n/** @since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain the pointer cursor while\n   * hovering and other interaction styles and not using the `ClickableCard`\n   * component.\n   *\n   * @defaultValue `false`\n   */\n  interactable?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const { className, bordered, raisable, interactable } = options;\n\n  return cnb(\n    cardStyles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      interactable,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    cardStyles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"header-content\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"title\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"subtitle\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding,\n    disableSecondaryColor,\n    disableLastChildPadding,\n  } = options;\n\n  return cnb(\n    cardStyles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"footer\"), className);\n}\n"],"names":["cnb","cssUtils","bem","cardStyles","card","options","className","bordered","raisable","interactable","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","textColor","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,aAAaD,IAAI;AAgCvB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGJ;IAExD,OAAOL,IACLG,WAAW;QACTI;QACAG,UAAU,CAACH;QACXC,UAAU,CAACD,YAAYC;QACvBC;IACF,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASK,WAAWN,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEM,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGR;IAE/D,OAAOL,IACLG,WAAW,UAAU;QACnB,eAAeS,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAP;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASS,kBACdV,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,mBAAmBG;AAC3C;AAOA;;CAEC,GACD,OAAO,SAASU,UAAUX,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,UAAUG;AAClC;AAOA;;CAEC,GACD,OAAO,SAASW,aACdZ,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,aAAaG;AACrC;AA8BA;;CAEC,GACD,OAAO,SAASY,YAAYb,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTa,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGhB;IAEJ,OAAOL,IACLG,WAAW,WAAW;QACpBmB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACApB,SAAS;QACPsB,WAAW,CAACH,wBAAwB,mBAAmBI;IACzD,IACAlB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASmB,WAAWpB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,WAAWG;AACnC"}
+{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-card\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-card-background-color\"?: string;\n    \"--rmd-card-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain the pointer cursor while\n   * hovering and other interaction styles and not using the `ClickableCard`\n   * component.\n   *\n   * @defaultValue `false`\n   */\n  interactable?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const { className, bordered, raisable, interactable } = options;\n\n  return cnb(\n    styles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      interactable,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    styles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"header-content\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"title\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"subtitle\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding,\n    disableSecondaryColor,\n    disableLastChildPadding,\n  } = options;\n\n  return cnb(\n    styles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"footer\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","card","options","className","bordered","raisable","interactable","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","textColor","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAuCnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGJ;IAExD,OAAOL,IACLG,OAAO;QACLI;QACAG,UAAU,CAACH;QACXC,UAAU,CAACD,YAAYC;QACvBC;IACF,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASK,WAAWN,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEM,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGR;IAE/D,OAAOL,IACLG,OAAO,UAAU;QACf,eAAeS,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAP;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASS,kBACdV,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,mBAAmBG;AACvC;AAOA;;CAEC,GACD,OAAO,SAASU,UAAUX,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B;AAOA;;CAEC,GACD,OAAO,SAASW,aACdZ,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,aAAaG;AACjC;AA8BA;;CAEC,GACD,OAAO,SAASY,YAAYb,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTa,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGhB;IAEJ,OAAOL,IACLG,OAAO,WAAW;QAChBmB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACApB,SAAS;QACPsB,WAAW,CAACH,wBAAwB,mBAAmBI;IACzD,IACAlB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASmB,WAAWpB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,WAAWG;AAC/B"}

package/dist/chip/Chip.d.ts

@@ -1,27 +1,20 @@
 import { type ButtonHTMLAttributes, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
 import { type BackgroundColor } from "../cssUtils.js";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
+import { type BaseMaxWidthTransitionOptions } from "../transition/useMaxWidthTransition.js";
 import { type PropsWithRef } from "../types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-chip-solid-background-color"?: string;
-        "--rmd-chip-solid-disabled-background-color"?: string;
-        "--rmd-chip-solid-color"?: string;
-        "--rmd-chip-theme-background-color"?: string;
-        "--rmd-chip-theme-color"?: string;
-        "--rmd-chip-outline-background-color"?: string;
-        "--rmd-chip-outline-color"?: string;
-    }
-}
+import { type ChipTheme } from "./styles.js";
 /**
  * @since 6.0.0 Renamed the `noninteractive` prop to
  * `noninteractable`.
+ * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module
+ * augmentation.
  */
-export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement>, ComponentWithRippleProps {
+export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseMaxWidthTransitionOptions, ComponentWithRippleProps {
     /**
      * @defaultValue `"solid"`
      */
-    theme?: "outline" | "solid";
+    theme?: ChipTheme;
     /**
      * Set this to `true` if the chip should gain additional box shadow while the
      * user is pressing down on the chip.

package/dist/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { useMaxWidthTransition } from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { chip, chipContent } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-chip-solid-background-color\"?: string;\n    \"--rmd-chip-solid-disabled-background-color\"?: string;\n    \"--rmd-chip-solid-color\"?: string;\n    \"--rmd-chip-theme-background-color\"?: string;\n    \"--rmd-chip-theme-color\"?: string;\n    \"--rmd-chip-outline-background-color\"?: string;\n    \"--rmd-chip-outline-color\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n */\nexport interface ChipProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"solid\"`\n   */\n  theme?: \"outline\" | \"solid\";\n\n  /**\n   * Set this to `true` if the chip should gain additional box shadow while the\n   * user is pressing down on the chip.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * When this is a boolean, a selected icon will be displayed before the\n   * `children` and appear/disappear when `true`/`false`.\n   *\n   * @see {@link selectedIcon}\n   * @see {@link selectedIconAfter}\n   * @see {@link selectedThemed}\n   */\n  selected?: boolean;\n\n  /**\n   * Set this to `true` if the chip should change background color while\n   * {@link selected} instead of displaying an icon. The default background\n   * color is a lighter swatch of the theme primary color.\n   *\n   * @defaultValue `false`\n   */\n  selectedThemed?: boolean;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * This will be ignored if {@link selected} is `undefined`.\n   *\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should display as the\n   * {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should not animate and\n   * instead apply `display: none`\n   *\n   * @defaultValue `false`\n   */\n  disableIconTransition?: boolean;\n\n  /**\n   * Set this to `true` to render the chip as a `<span>` instead of a button.\n   *\n   * @since 2.6.0\n   * @since 6.0.0 Renamed from `noninteractable`\n   * @defaultValue `false`\n   */\n  noninteractive?: boolean;\n\n  /**\n   * An optional background color theme to use.\n   *\n   * @since 6.0.0\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * before the `children`. This will remove some of the leading horizontal\n   * padding on the chip as well.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * after the `children`. This will remove some of the trailing horizontal\n   * padding on the chip as well.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Set this to true if the `children` should not be wrapped in a span to apply\n   * the {@link chipContent} styles which allow for shrinking text and\n   * truncating text with ellipsis.\n   *\n   * @defaultValue `false`\n   */\n  disableContentWrap?: boolean;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Chip\n *       leftAddon={\n *         <Avatar>\n *           <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n *         </Avatar>\n *       }\n *       rightAddon={<AddCircleIcon />}\n *     >\n *       Chip\n *     </Chip>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(props, ref) {\n    const {\n      \"aria-pressed\": ariaPressed,\n      theme = \"solid\",\n      className,\n      raisable = false,\n      disabled = false,\n      selected,\n      selectedThemed = false,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      selectedIconAfter = false,\n      backgroundColor,\n      noninteractive = false,\n      disableRipple,\n      disableIconTransition = false,\n      children: propChildren,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      leftAddon: propLeftAddon,\n      rightAddon: propRightAddon,\n      contentProps,\n      contentStyle,\n      contentClassName,\n      disableContentWrap = false,\n      ...remaining\n    } = props;\n\n    let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n    if (!noninteractive) {\n      buttonProps = {\n        \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n        type: \"button\",\n        disabled,\n      };\n    }\n\n    let content = propChildren;\n    if (!disableContentWrap) {\n      content = (\n        <span\n          style={contentStyle}\n          {...contentProps}\n          className={cnb(\n            chipContent({ className: contentClassName }),\n            contentProps?.className\n          )}\n        >\n          {propChildren}\n        </span>\n      );\n    }\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n    const isTransitionable =\n      !selectedThemed &&\n      typeof selected === \"boolean\" &&\n      typeof (selectedIconAfter ? propRightAddon : propLeftAddon) ===\n        \"undefined\";\n    const selectedIcon = useMaxWidthTransition({\n      element: selectedIconNode,\n      transitionIn: !!selected,\n      disabled: !isTransitionable,\n      disableTransition: disableIconTransition,\n    });\n    if (isTransitionable) {\n      if (selectedIconAfter) {\n        rightAddon = selectedIcon;\n      } else {\n        leftAddon = selectedIcon;\n      }\n    }\n\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        mode: disableRipple ? \"none\" : undefined,\n        onClick,\n        onKeyDown,\n        onKeyUp,\n        onMouseDown,\n        onMouseUp,\n        onMouseLeave,\n        onDragStart,\n        onTouchStart,\n        onTouchEnd,\n        onTouchMove,\n        disabled: disabled || noninteractive,\n      });\n    const children = useHigherContrastChildren(content);\n    const Component = noninteractive ? \"span\" : \"button\";\n\n    return (\n      <Component\n        {...remaining}\n        {...buttonProps}\n        {...handlers}\n        className={chip({\n          className,\n          theme,\n          pressed: raisable && pressed,\n          disabled,\n          selected,\n          selectedThemed,\n          selectedClassName,\n          noninteractive,\n          backgroundColor,\n          pressedClassName,\n          leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n          rightAddon:\n            !!rightAddon && (!selectedIconAfter || selected !== false),\n        })}\n        ref={ref}\n      >\n        {leftAddon}\n        {children}\n        {rightAddon}\n        {ripples}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"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"}
+{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n  type BaseMaxWidthTransitionOptions,\n  useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { type ChipTheme, chip, chipContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module\n * augmentation.\n */\nexport interface ChipProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    BaseMaxWidthTransitionOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"solid\"`\n   */\n  theme?: ChipTheme;\n\n  /**\n   * Set this to `true` if the chip should gain additional box shadow while the\n   * user is pressing down on the chip.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * When this is a boolean, a selected icon will be displayed before the\n   * `children` and appear/disappear when `true`/`false`.\n   *\n   * @see {@link selectedIcon}\n   * @see {@link selectedIconAfter}\n   * @see {@link selectedThemed}\n   */\n  selected?: boolean;\n\n  /**\n   * Set this to `true` if the chip should change background color while\n   * {@link selected} instead of displaying an icon. The default background\n   * color is a lighter swatch of the theme primary color.\n   *\n   * @defaultValue `false`\n   */\n  selectedThemed?: boolean;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * This will be ignored if {@link selected} is `undefined`.\n   *\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should display as the\n   * {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should not animate and\n   * instead apply `display: none`\n   *\n   * @defaultValue `false`\n   */\n  disableIconTransition?: boolean;\n\n  /**\n   * Set this to `true` to render the chip as a `<span>` instead of a button.\n   *\n   * @since 2.6.0\n   * @since 6.0.0 Renamed from `noninteractable`\n   * @defaultValue `false`\n   */\n  noninteractive?: boolean;\n\n  /**\n   * An optional background color theme to use.\n   *\n   * @since 6.0.0\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * before the `children`. This will remove some of the leading horizontal\n   * padding on the chip as well.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * after the `children`. This will remove some of the trailing horizontal\n   * padding on the chip as well.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Set this to true if the `children` should not be wrapped in a span to apply\n   * the {@link chipContent} styles which allow for shrinking text and\n   * truncating text with ellipsis.\n   *\n   * @defaultValue `false`\n   */\n  disableContentWrap?: boolean;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Chip\n *       leftAddon={\n *         <Avatar>\n *           <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n *         </Avatar>\n *       }\n *       rightAddon={<AddCircleIcon />}\n *     >\n *       Chip\n *     </Chip>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(props, ref) {\n    const {\n      \"aria-pressed\": ariaPressed,\n      theme = \"solid\",\n      className,\n      raisable = false,\n      disabled = false,\n      selected,\n      selectedThemed = false,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      selectedIconAfter = false,\n      backgroundColor,\n      noninteractive = false,\n      disableRipple,\n      disableIconTransition = false,\n      children: propChildren,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      leftAddon: propLeftAddon,\n      rightAddon: propRightAddon,\n      contentProps,\n      contentStyle,\n      contentClassName,\n      disableContentWrap = false,\n      ...remaining\n    } = props;\n\n    let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n    if (!noninteractive) {\n      buttonProps = {\n        \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n        type: \"button\",\n        disabled,\n      };\n    }\n\n    let content = propChildren;\n    if (!disableContentWrap) {\n      content = (\n        <span\n          style={contentStyle}\n          {...contentProps}\n          className={cnb(\n            chipContent({ className: contentClassName }),\n            contentProps?.className\n          )}\n        >\n          {propChildren}\n        </span>\n      );\n    }\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n    const isTransitionable =\n      !selectedThemed &&\n      typeof selected === \"boolean\" &&\n      typeof (selectedIconAfter ? propRightAddon : propLeftAddon) ===\n        \"undefined\";\n    const selectedIcon = useMaxWidthTransition({\n      element: selectedIconNode,\n      transitionIn: !!selected,\n      disabled: !isTransitionable,\n      disableTransition: disableIconTransition,\n    });\n    if (isTransitionable) {\n      if (selectedIconAfter) {\n        rightAddon = selectedIcon;\n      } else {\n        leftAddon = selectedIcon;\n      }\n    }\n\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        mode: disableRipple ? \"none\" : undefined,\n        onClick,\n        onKeyDown,\n        onKeyUp,\n        onMouseDown,\n        onMouseUp,\n        onMouseLeave,\n        onDragStart,\n        onTouchStart,\n        onTouchEnd,\n        onTouchMove,\n        disabled: disabled || noninteractive,\n      });\n    const children = useHigherContrastChildren(content);\n    const Component = noninteractive ? \"span\" : \"button\";\n\n    return (\n      <Component\n        {...remaining}\n        {...buttonProps}\n        {...handlers}\n        className={chip({\n          className,\n          theme,\n          pressed: raisable && pressed,\n          disabled,\n          selected,\n          selectedThemed,\n          selectedClassName,\n          noninteractive,\n          backgroundColor,\n          pressedClassName,\n          leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n          rightAddon:\n            !!rightAddon && (!selectedIconAfter || selected !== false),\n        })}\n        ref={ref}\n      >\n        {leftAddon}\n        {children}\n        {rightAddon}\n        {ripples}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"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"}

package/dist/chip/styles.d.ts

@@ -1,4 +1,26 @@
 import { type BackgroundColor } from "../cssUtils.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-chip-gap"?: string;
+        "--rmd-chip-height"?: string;
+        "--rmd-chip-border-radius"?: string | number;
+        "--rmd-chip-horizontal-padding"?: string | number;
+        "--rmd-chip-vertical-padding"?: string | number;
+        "--rmd-chip-solid-background-color"?: string;
+        "--rmd-chip-solid-disabled-background-color"?: string;
+        "--rmd-chip-solid-color"?: string;
+        "--rmd-chip-theme-background-color"?: string;
+        "--rmd-chip-theme-color"?: string;
+        "--rmd-chip-outline-color"?: string;
+        "--rmd-chip-outline-width"?: string | number;
+        "--rmd-chip-outline-background-color"?: string;
+        "--rmd-chip-outline-text-color"?: string;
+    }
+}
+/**
+ * @since 6.3.1
+ */
+export type ChipTheme = "outline" | "solid";
 /**
  * @since 6.0.0
  *
@@ -33,9 +55,12 @@ import { type BackgroundColor } from "../cssUtils.js";
  */
 export interface ChipClassNameOptions {
     className?: string;
+    /**
+     * An optional className to provide only while {@link selected} is `true`.
+     */
     selectedClassName?: string;
     /** @defaultValue `"solid"` */
-    theme?: "outline" | "solid";
+    theme?: ChipTheme;
     backgroundColor?: BackgroundColor;
     /** @defaultValue `false` */
     disabled?: boolean;

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chip/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-chip\");\n\n/**\n * @since 6.0.0\n *\n * Note for the future: Once Firefox supports the `:has` selector, the\n * `leftAddon` and `rightAddon` can be removed. The styles would automatically\n * apply the padding instead:\n *\n * ```scss\n * &:has(.rmd-icon:first-child, .rmd-avatar:first-child) {\n *   padding-left: $addon-left-padding;\n *\n *   @include utils.rtl {\n *     padding-left: $horizontal-padding;\n *     padding-right; $addon-left-padding;\n *   }\n * }\n *\n * $index: if(\n *   not core.$interaction-mode or core.$interaction-mode == press,\n *   1,\n *   2 // last child is always the `.rmd-ripple-container`\n * );\n * &:has(.rmd-icon:nth-last-child(#{$index})) {\n *   padding-right: $addon-left-padding;\n *\n *   @include utils.rtl {\n *     padding-left; $addon-left-padding;\n *     padding-right: $horizontal-padding;\n *   }\n * }\n * ```\n */\nexport interface ChipClassNameOptions {\n  className?: string;\n  selectedClassName?: string;\n\n  /** @defaultValue `\"solid\"` */\n  theme?: \"outline\" | \"solid\";\n\n  backgroundColor?: BackgroundColor;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  selected?: boolean;\n\n  /** @defaultValue `false` */\n  selectedThemed?: boolean;\n\n  /** @defaultValue `true` */\n  noninteractive?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function chip(options: ChipClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"solid\",\n    pressed = false,\n    disabled = false,\n    selected = false,\n    selectedThemed = false,\n    selectedClassName,\n    noninteractive = true,\n    pressedClassName,\n    leftAddon = false,\n    rightAddon = false,\n    backgroundColor,\n  } = options;\n\n  return cnb(\n    styles({\n      themed: !disabled && selected && selectedThemed,\n      selected: !disabled && selected && !selectedThemed,\n      solid: theme === \"solid\",\n      outline: theme === \"outline\",\n      disabled,\n      \"left-addon\": leftAddon,\n      \"right-addon\": rightAddon,\n      pressed,\n    }),\n    selected && selectedClassName,\n    pressedClassName,\n    cssUtils({\n      surface: !noninteractive,\n      textColor: disabled ? \"text-disabled\" : undefined,\n      backgroundColor,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ChipContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function chipContent(options: ChipContentClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","chip","options","className","theme","pressed","disabled","selected","selectedThemed","selectedClassName","noninteractive","pressedClassName","leftAddon","rightAddon","backgroundColor","themed","solid","outline","surface","textColor","undefined","chipContent"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkEnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EACJC,SAAS,EACTC,QAAQ,OAAO,EACfC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,iBAAiB,IAAI,EACrBC,gBAAgB,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,eAAe,EAChB,GAAGZ;IAEJ,OAAOL,IACLG,OAAO;QACLe,QAAQ,CAACT,YAAYC,YAAYC;QACjCD,UAAU,CAACD,YAAYC,YAAY,CAACC;QACpCQ,OAAOZ,UAAU;QACjBa,SAASb,UAAU;QACnBE;QACA,cAAcM;QACd,eAAeC;QACfR;IACF,IACAE,YAAYE,mBACZE,kBACAb,SAAS;QACPoB,SAAS,CAACR;QACVS,WAAWb,WAAW,kBAAkBc;QACxCN;IACF,IACAX;AAEJ;AASA;;CAEC,GACD,OAAO,SAASkB,YAAYnB,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,YAAYG;AAChC"}
+{"version":3,"sources":["../../src/chip/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-chip\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-chip-gap\"?: string;\n    \"--rmd-chip-height\"?: string;\n    \"--rmd-chip-border-radius\"?: string | number;\n    \"--rmd-chip-horizontal-padding\"?: string | number;\n    \"--rmd-chip-vertical-padding\"?: string | number;\n    \"--rmd-chip-solid-background-color\"?: string;\n    \"--rmd-chip-solid-disabled-background-color\"?: string;\n    \"--rmd-chip-solid-color\"?: string;\n    \"--rmd-chip-theme-background-color\"?: string;\n    \"--rmd-chip-theme-color\"?: string;\n    \"--rmd-chip-outline-color\"?: string;\n    \"--rmd-chip-outline-width\"?: string | number;\n    \"--rmd-chip-outline-background-color\"?: string;\n    \"--rmd-chip-outline-text-color\"?: string;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport type ChipTheme = \"outline\" | \"solid\";\n\n/**\n * @since 6.0.0\n *\n * Note for the future: Once Firefox supports the `:has` selector, the\n * `leftAddon` and `rightAddon` can be removed. The styles would automatically\n * apply the padding instead:\n *\n * ```scss\n * &:has(.rmd-icon:first-child, .rmd-avatar:first-child) {\n *   padding-left: $addon-left-padding;\n *\n *   @include utils.rtl {\n *     padding-left: $horizontal-padding;\n *     padding-right; $addon-left-padding;\n *   }\n * }\n *\n * $index: if(\n *   not core.$interaction-mode or core.$interaction-mode == press,\n *   1,\n *   2 // last child is always the `.rmd-ripple-container`\n * );\n * &:has(.rmd-icon:nth-last-child(#{$index})) {\n *   padding-right: $addon-left-padding;\n *\n *   @include utils.rtl {\n *     padding-left; $addon-left-padding;\n *     padding-right: $horizontal-padding;\n *   }\n * }\n * ```\n */\nexport interface ChipClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /** @defaultValue `\"solid\"` */\n  theme?: ChipTheme;\n\n  backgroundColor?: BackgroundColor;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  selected?: boolean;\n\n  /** @defaultValue `false` */\n  selectedThemed?: boolean;\n\n  /** @defaultValue `true` */\n  noninteractive?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function chip(options: ChipClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"solid\",\n    pressed = false,\n    disabled = false,\n    selected = false,\n    selectedThemed = false,\n    selectedClassName,\n    noninteractive = true,\n    pressedClassName,\n    leftAddon = false,\n    rightAddon = false,\n    backgroundColor,\n  } = options;\n\n  return cnb(\n    styles({\n      themed: !disabled && selected && selectedThemed,\n      selected: !disabled && selected && !selectedThemed,\n      solid: theme === \"solid\",\n      outline: theme === \"outline\",\n      disabled,\n      \"left-addon\": leftAddon,\n      \"right-addon\": rightAddon,\n      pressed,\n    }),\n    selected && selectedClassName,\n    pressedClassName,\n    cssUtils({\n      surface: !noninteractive,\n      textColor: disabled ? \"text-disabled\" : undefined,\n      backgroundColor,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ChipContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function chipContent(options: ChipContentClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","chip","options","className","theme","pressed","disabled","selected","selectedThemed","selectedClassName","noninteractive","pressedClassName","leftAddon","rightAddon","backgroundColor","themed","solid","outline","surface","textColor","undefined","chipContent"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA8FnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EACJC,SAAS,EACTC,QAAQ,OAAO,EACfC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,iBAAiB,IAAI,EACrBC,gBAAgB,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,eAAe,EAChB,GAAGZ;IAEJ,OAAOL,IACLG,OAAO;QACLe,QAAQ,CAACT,YAAYC,YAAYC;QACjCD,UAAU,CAACD,YAAYC,YAAY,CAACC;QACpCQ,OAAOZ,UAAU;QACjBa,SAASb,UAAU;QACnBE;QACA,cAAcM;QACd,eAAeC;QACfR;IACF,IACAE,YAAYE,mBACZE,kBACAb,SAAS;QACPoB,SAAS,CAACR;QACVS,WAAWb,WAAW,kBAAkBc;QACxCN;IACF,IACAX;AAEJ;AASA;;CAEC,GACD,OAAO,SAASkB,YAAYnB,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,YAAYG;AAChC"}

package/dist/dialog/Dialog.js

@@ -79,6 +79,10 @@ const noopBool = ()=>false;
     const { eventHandlers, transitionOptions } = useFocusContainer({
         nodeRef: ref,
         activate: visible,
+        onEnter (appearing) {
+            onEnter(appearing);
+            setChildVisible(type !== "full-page");
+        },
         onEntered (appear) {
             onEntered(appear);
             // this needs to be called onEnter and onEntered just in case the
@@ -86,6 +90,10 @@ const noopBool = ()=>false;
             setChildVisible(type !== "full-page");
         },
         onEntering,
+        onExit () {
+            onExit();
+            setChildVisible(false);
+        },
         onExiting,
         onExited () {
             onExited();
@@ -120,14 +128,6 @@ const noopBool = ()=>false;
         appear: appear && !disableTransition && !ssr,
         enter: enter && !disableTransition,
         exit: exit && !disableTransition,
-        onEnter (appearing) {
-            onEnter(appearing);
-            setChildVisible(type !== "full-page");
-        },
-        onExit () {
-            onExit();
-            setChildVisible(false);
-        },
         temporary,
         exitedHidden,
         disablePortal: propDisablePortal,

package/dist/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type FocusContainerComponentProps,\n  useFocusContainer,\n} from \"../focus/useFocusContainer.js\";\nimport { Overlay } from \"../overlay/Overlay.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type ConfigurableDialogContainerProps,\n  DialogContainer,\n} from \"./DialogContainer.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport {\n  DEFAULT_DIALOG_CLASSNAMES,\n  DEFAULT_DIALOG_TIMEOUT,\n  type DialogType,\n  type DialogWidth,\n  dialog,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst noopBool = (): boolean => false;\n\nexport interface BaseDialogProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions,\n    FocusContainerComponentProps {\n  /**\n   * @defaultValue `\"dialog-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @see {@link DialogWidth}\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"alertdialog\" | \"menu\" | \"none\";\n\n  /**\n   * This value controls the visibility of the dialog.\n   */\n  visible: boolean;\n\n  /**\n   * This function should set the {@link visible} prop to false to hide the\n   * modal when:\n   * - the {@link modal} and {@link disableEscapeClose} props are `false` and\n   *   the user presses the `\"Escape\"` key.\n   * - The overlay element is clicked\n   */\n  onRequestClose: () => void;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue `-1` */\n  tabIndex?: number;\n\n  /**\n   * Set this value to `true` if the dialog should behave as a modal which\n   * prevents the modal from being closed by pressing the `\"Escape\"` key or\n   * clicking the overlay. The user **must** click one of the actions within the\n   * dialog instead.\n   *\n   * @defaultValue `false`\n   */\n  modal?: boolean;\n\n  /**\n   * Set this to `true` if the dialog should no longer use the `Portal`\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Set this to `true` if you want the page to still be scrollable while the\n   * dialog is visible. This should normally be `true` for popovers/fixed\n   * dialogs.\n   *\n   * @defaultValue `type === \"custom\"`\n   */\n  disableScrollLock?: boolean;\n\n  /**\n   * Set this to `true` to prevent the dialog from being closed when the\n   * `\"Escape\"` key is pressed. This is `true` by default when the {@link modal}\n   * prop is `true`\n   *\n   * @defaultValue `modal`\n   */\n  disableEscapeClose?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should not appear behind the dialog.\n   *\n   * Note: this was changed from `type === \"full-page\"` to `false` so that you\n   * can change between full-page and centered based on media queries. If the\n   * type changes the overlay would end up rendering above the dialog instead of\n   * behind.\n   *\n   * @see {@link overlayHidden}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should be appear behind the dialog but\n   * have an `opacity: 0`. This is useful if you want to prevent other elements\n   * on the page from being clicked while the dialog is visible, but don't want\n   * a dark background. i.e. popovers/fixed dialogs.\n   *\n   * @defaultValue `false`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * Any additional props that should be passed to the overlay element if it is\n   * rendered.\n   */\n  overlayProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be passed to the container element when\n   * the `type !== \"custom\"`.\n   */\n  containerProps?: PropsWithRef<ConfigurableDialogContainerProps>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * Set this to `true` if the `Dialog` should not gain the normal focus box\n   * shadow while it is focused. The `Dialog` should normally only gain focus\n   * when it becomes visible and no child elements have `autoFocus` enabled.\n   *\n   * @since 6.0.0\n   * @defaultValue `type === \"full-page\"`\n   */\n  disableFocusOutline?: boolean;\n}\n\nexport type DialogProps = LabelRequiredForA11y<BaseDialogProps>;\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n * import { DialogContent } from \"@react-md/core/dialog/DialogContent\";\n * import { DialogFooter } from \"@react-md/core/dialog/DialogFooter\";\n * import { DialogHeader } from \"@react-md/core/dialog/DialogHeader\";\n * import { DialogTitle } from \"@react-md/core/dialog/DialogTitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Dialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </Dialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/dialog | Dialog Demos}\n * @since 6.0.0 The `Dialog` no longer supports focusing elements\n * within once it becomes visible. You must manually add `autoFocus` to a\n * element instead.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      id: propId,\n      modal = false,\n      role = modal ? \"alertdialog\" : \"dialog\",\n      type = \"centered\",\n      width,\n      tabIndex = -1,\n      visible,\n      onRequestClose,\n      containerProps,\n      temporary = true,\n      className,\n      timeout = DEFAULT_DIALOG_TIMEOUT,\n      classNames = DEFAULT_DIALOG_CLASSNAMES,\n      disableTransition = false,\n      appear = false,\n      enter = true,\n      exit = true,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered = noop,\n      onExit = noop,\n      onExiting = noop,\n      onExited = noop,\n      exitedHidden = true,\n      disableOverlay = false,\n      overlayProps,\n      overlayHidden,\n      onKeyDown = noop,\n      isFocusTypeDisabled = noopBool,\n      disablePortal: propDisablePortal,\n      disableScrollLock = false,\n      disableEscapeClose = modal,\n      disableFocusOutline = type === \"full-page\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"dialog\");\n\n    const ssr = useSsr();\n    const setChildVisible = useNestedDialogContext();\n\n    // this makes it so that as more non-full page dialogs become visible, the\n    // overlay does not become darker as more and more overlays are stacked upon\n    // each other. only the top-most overlay will have and active background\n    // color.\n    const [isChildVisible, setIsChildVisible] = useState(false);\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEntered(appear) {\n        onEntered(appear);\n        // this needs to be called onEnter and onEntered just in case the\n        // transition is disabled\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntering,\n      onExiting,\n      onExited() {\n        onExited();\n        // this needs to be called onExit and onExited just in case the\n        // transition is disabled\n        setChildVisible(false);\n      },\n      disableTransition,\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          modal ||\n          disableEscapeClose ||\n          event.key !== \"Escape\"\n        ) {\n          return;\n        }\n\n        // prevent parent dialogs from closing as well\n        event.stopPropagation();\n        onRequestClose();\n      },\n      isFocusTypeDisabled,\n    });\n    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: dialog({\n        type,\n        width,\n        fixed: type === \"custom\",\n        outline: !disableFocusOutline,\n        disableBoxShadow: isChildVisible,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setChildVisible(type !== \"full-page\");\n      },\n      onExit() {\n        onExit();\n        setChildVisible(false);\n      },\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n      ...transitionOptions,\n    });\n    useScrollLock(!disableScrollLock && visible);\n\n    return (\n      <NestedDialogProvider value={setIsChildVisible}>\n        {!disableOverlay && (\n          <Overlay\n            visible={visible}\n            disableTransition={disableTransition}\n            temporary={temporary}\n            disablePortal={disablePortal}\n            {...overlayProps}\n            onClick={modal ? noop : onRequestClose}\n            clickable={!modal}\n            noOpacity={overlayHidden || isChildVisible}\n          />\n        )}\n        <Portal disabled={disablePortal}>\n          {rendered && (\n            <DialogContainer\n              enabled={type !== \"custom\"}\n              {...containerProps}\n              centered={type === \"centered\"}\n              displayNone={!temporary && exitedHidden && stage === \"exited\"}\n            >\n              <div\n                aria-modal={modal || undefined}\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                tabIndex={tabIndex}\n              >\n                {children}\n              </div>\n            </DialogContainer>\n          )}\n        </Portal>\n      </NestedDialogProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","DialogContainer","NestedDialogProvider","useNestedDialogContext","DEFAULT_DIALOG_CLASSNAMES","DEFAULT_DIALOG_TIMEOUT","dialog","noop","noopBool","Dialog","props","ref","id","propId","modal","role","type","width","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","isChildVisible","setIsChildVisible","eventHandlers","transitionOptions","nodeRef","activate","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","fixed","outline","disableBoxShadow","appearing","value","onClick","clickable","noOpacity","disabled","enabled","centered","displayNone","div","aria-modal","undefined"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAElE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAEEC,iBAAiB,QACZ,gCAAgC;AACvC,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,aAAa,QAAQ,6BAA6B;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAEEC,eAAe,QACV,uBAAuB;AAC9B,SACEC,oBAAoB,EACpBC,sBAAsB,QACjB,4BAA4B;AACnC,SACEC,yBAAyB,EACzBC,sBAAsB,EAGtBC,MAAM,QACD,cAAc;AAErB,MAAMC,OAAO;AACX,aAAa;AACf;AAEA,MAAMC,WAAW,IAAe;AAgJhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDC,GACD,OAAO,MAAMC,uBAASjB,WACpB,SAASiB,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,QAAQ,KAAK,EACbC,OAAOD,QAAQ,gBAAgB,QAAQ,EACvCE,OAAO,UAAU,EACjBC,KAAK,EACLC,WAAW,CAAC,CAAC,EACbC,OAAO,EACPC,cAAc,EACdC,cAAc,EACdC,YAAY,IAAI,EAChBC,SAAS,EACTC,UAAUnB,sBAAsB,EAChCoB,aAAarB,yBAAyB,EACtCsB,oBAAoB,KAAK,EACzBC,SAAS,KAAK,EACdC,QAAQ,IAAI,EACZC,OAAO,IAAI,EACXC,UAAUvB,IAAI,EACdwB,aAAaxB,IAAI,EACjByB,YAAYzB,IAAI,EAChB0B,SAAS1B,IAAI,EACb2B,YAAY3B,IAAI,EAChB4B,WAAW5B,IAAI,EACf6B,eAAe,IAAI,EACnBC,iBAAiB,KAAK,EACtBC,YAAY,EACZC,aAAa,EACbC,YAAYjC,IAAI,EAChBkC,sBAAsBjC,QAAQ,EAC9BkC,eAAeC,iBAAiB,EAChCC,oBAAoB,KAAK,EACzBC,qBAAqB/B,KAAK,EAC1BgC,sBAAsB9B,SAAS,WAAW,EAC1C+B,QAAQ,EACR,GAAGC,WACJ,GAAGtC;IACJ,MAAME,KAAKZ,aAAaa,QAAQ;IAEhC,MAAMoC,MAAMvD;IACZ,MAAMwD,kBAAkB/C;IAExB,0EAA0E;IAC1E,4EAA4E;IAC5E,wEAAwE;IACxE,SAAS;IACT,MAAM,CAACgD,gBAAgBC,kBAAkB,GAAG3D,SAAS;IACrD,MAAM,EAAE4D,aAAa,EAAEC,iBAAiB,EAAE,GAAG3D,kBAAkB;QAC7D4D,SAAS5C;QACT6C,UAAUrC;QACVa,WAAUL,MAAM;YACdK,UAAUL;YACV,iEAAiE;YACjE,yBAAyB;YACzBuB,gBAAgBlC,SAAS;QAC3B;QACAe;QACAG;QACAC;YACEA;YACA,+DAA+D;YAC/D,yBAAyB;YACzBe,gBAAgB;QAClB;QACAxB;QACAc,WAAUiB,KAAK;YACbjB,UAAUiB;YACV,IACEA,MAAMC,oBAAoB,MAC1B5C,SACA+B,sBACAY,MAAME,GAAG,KAAK,UACd;gBACA;YACF;YAEA,8CAA8C;YAC9CF,MAAMG,eAAe;YACrBxC;QACF;QACAqB;IACF;IACA,MAAM,EAAEoB,YAAY,EAAEC,KAAK,EAAEC,QAAQ,EAAErB,aAAa,EAAE,GAAG3C,iBAAiB;QACxEiE,cAAc7C;QACdK;QACAC;QACAF,WAAWjB,OAAO;YAChBU;YACAC;YACAgD,OAAOjD,SAAS;YAChBkD,SAAS,CAACpB;YACVqB,kBAAkBhB;YAClB5B;QACF;QACAI,QAAQA,UAAU,CAACD,qBAAqB,CAACuB;QACzCrB,OAAOA,SAAS,CAACF;QACjBG,MAAMA,QAAQ,CAACH;QACfI,SAAQsC,SAAS;YACftC,QAAQsC;YACRlB,gBAAgBlC,SAAS;QAC3B;QACAiB;YACEA;YACAiB,gBAAgB;QAClB;QACA5B;QACAc;QACAM,eAAeC;QACf,GAAGW,iBAAiB;IACtB;IACAxD,cAAc,CAAC8C,qBAAqBzB;IAEpC,qBACE,MAACjB;QAAqBmE,OAAOjB;;YAC1B,CAACf,gCACA,KAACzC;gBACCuB,SAASA;gBACTO,mBAAmBA;gBACnBJ,WAAWA;gBACXoB,eAAeA;gBACd,GAAGJ,YAAY;gBAChBgC,SAASxD,QAAQP,OAAOa;gBACxBmD,WAAW,CAACzD;gBACZ0D,WAAWjC,iBAAiBY;;0BAGhC,KAACtD;gBAAO4E,UAAU/B;0BACfqB,0BACC,KAAC9D;oBACCyE,SAAS1D,SAAS;oBACjB,GAAGK,cAAc;oBAClBsD,UAAU3D,SAAS;oBACnB4D,aAAa,CAACtD,aAAac,gBAAgB0B,UAAU;8BAErD,cAAA,KAACe;wBACCC,cAAYhE,SAASiE;wBACpB,GAAG/B,SAAS;wBACZ,GAAGa,YAAY;wBACf,GAAGR,aAAa;wBACjBzC,IAAIA;wBACJG,MAAMA;wBACNG,UAAUA;kCAET6B;;;;;;AAOf,GACA"}
+{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type FocusContainerComponentProps,\n  useFocusContainer,\n} from \"../focus/useFocusContainer.js\";\nimport { Overlay } from \"../overlay/Overlay.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type ConfigurableDialogContainerProps,\n  DialogContainer,\n} from \"./DialogContainer.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport {\n  DEFAULT_DIALOG_CLASSNAMES,\n  DEFAULT_DIALOG_TIMEOUT,\n  type DialogType,\n  type DialogWidth,\n  dialog,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst noopBool = (): boolean => false;\n\nexport interface BaseDialogProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions,\n    FocusContainerComponentProps {\n  /**\n   * @defaultValue `\"dialog-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @see {@link DialogWidth}\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"alertdialog\" | \"menu\" | \"none\";\n\n  /**\n   * This value controls the visibility of the dialog.\n   */\n  visible: boolean;\n\n  /**\n   * This function should set the {@link visible} prop to false to hide the\n   * modal when:\n   * - the {@link modal} and {@link disableEscapeClose} props are `false` and\n   *   the user presses the `\"Escape\"` key.\n   * - The overlay element is clicked\n   */\n  onRequestClose: () => void;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue `-1` */\n  tabIndex?: number;\n\n  /**\n   * Set this value to `true` if the dialog should behave as a modal which\n   * prevents the modal from being closed by pressing the `\"Escape\"` key or\n   * clicking the overlay. The user **must** click one of the actions within the\n   * dialog instead.\n   *\n   * @defaultValue `false`\n   */\n  modal?: boolean;\n\n  /**\n   * Set this to `true` if the dialog should no longer use the `Portal`\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Set this to `true` if you want the page to still be scrollable while the\n   * dialog is visible. This should normally be `true` for popovers/fixed\n   * dialogs.\n   *\n   * @defaultValue `type === \"custom\"`\n   */\n  disableScrollLock?: boolean;\n\n  /**\n   * Set this to `true` to prevent the dialog from being closed when the\n   * `\"Escape\"` key is pressed. This is `true` by default when the {@link modal}\n   * prop is `true`\n   *\n   * @defaultValue `modal`\n   */\n  disableEscapeClose?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should not appear behind the dialog.\n   *\n   * Note: this was changed from `type === \"full-page\"` to `false` so that you\n   * can change between full-page and centered based on media queries. If the\n   * type changes the overlay would end up rendering above the dialog instead of\n   * behind.\n   *\n   * @see {@link overlayHidden}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should be appear behind the dialog but\n   * have an `opacity: 0`. This is useful if you want to prevent other elements\n   * on the page from being clicked while the dialog is visible, but don't want\n   * a dark background. i.e. popovers/fixed dialogs.\n   *\n   * @defaultValue `false`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * Any additional props that should be passed to the overlay element if it is\n   * rendered.\n   */\n  overlayProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be passed to the container element when\n   * the `type !== \"custom\"`.\n   */\n  containerProps?: PropsWithRef<ConfigurableDialogContainerProps>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * Set this to `true` if the `Dialog` should not gain the normal focus box\n   * shadow while it is focused. The `Dialog` should normally only gain focus\n   * when it becomes visible and no child elements have `autoFocus` enabled.\n   *\n   * @since 6.0.0\n   * @defaultValue `type === \"full-page\"`\n   */\n  disableFocusOutline?: boolean;\n}\n\nexport type DialogProps = LabelRequiredForA11y<BaseDialogProps>;\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n * import { DialogContent } from \"@react-md/core/dialog/DialogContent\";\n * import { DialogFooter } from \"@react-md/core/dialog/DialogFooter\";\n * import { DialogHeader } from \"@react-md/core/dialog/DialogHeader\";\n * import { DialogTitle } from \"@react-md/core/dialog/DialogTitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Dialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </Dialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/dialog | Dialog Demos}\n * @since 6.0.0 The `Dialog` no longer supports focusing elements\n * within once it becomes visible. You must manually add `autoFocus` to a\n * element instead.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      id: propId,\n      modal = false,\n      role = modal ? \"alertdialog\" : \"dialog\",\n      type = \"centered\",\n      width,\n      tabIndex = -1,\n      visible,\n      onRequestClose,\n      containerProps,\n      temporary = true,\n      className,\n      timeout = DEFAULT_DIALOG_TIMEOUT,\n      classNames = DEFAULT_DIALOG_CLASSNAMES,\n      disableTransition = false,\n      appear = false,\n      enter = true,\n      exit = true,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered = noop,\n      onExit = noop,\n      onExiting = noop,\n      onExited = noop,\n      exitedHidden = true,\n      disableOverlay = false,\n      overlayProps,\n      overlayHidden,\n      onKeyDown = noop,\n      isFocusTypeDisabled = noopBool,\n      disablePortal: propDisablePortal,\n      disableScrollLock = false,\n      disableEscapeClose = modal,\n      disableFocusOutline = type === \"full-page\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"dialog\");\n\n    const ssr = useSsr();\n    const setChildVisible = useNestedDialogContext();\n\n    // this makes it so that as more non-full page dialogs become visible, the\n    // overlay does not become darker as more and more overlays are stacked upon\n    // each other. only the top-most overlay will have and active background\n    // color.\n    const [isChildVisible, setIsChildVisible] = useState(false);\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntered(appear) {\n        onEntered(appear);\n        // this needs to be called onEnter and onEntered just in case the\n        // transition is disabled\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntering,\n      onExit() {\n        onExit();\n        setChildVisible(false);\n      },\n      onExiting,\n      onExited() {\n        onExited();\n        // this needs to be called onExit and onExited just in case the\n        // transition is disabled\n        setChildVisible(false);\n      },\n      disableTransition,\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          modal ||\n          disableEscapeClose ||\n          event.key !== \"Escape\"\n        ) {\n          return;\n        }\n\n        // prevent parent dialogs from closing as well\n        event.stopPropagation();\n        onRequestClose();\n      },\n      isFocusTypeDisabled,\n    });\n    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: dialog({\n        type,\n        width,\n        fixed: type === \"custom\",\n        outline: !disableFocusOutline,\n        disableBoxShadow: isChildVisible,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n      ...transitionOptions,\n    });\n    useScrollLock(!disableScrollLock && visible);\n\n    return (\n      <NestedDialogProvider value={setIsChildVisible}>\n        {!disableOverlay && (\n          <Overlay\n            visible={visible}\n            disableTransition={disableTransition}\n            temporary={temporary}\n            disablePortal={disablePortal}\n            {...overlayProps}\n            onClick={modal ? noop : onRequestClose}\n            clickable={!modal}\n            noOpacity={overlayHidden || isChildVisible}\n          />\n        )}\n        <Portal disabled={disablePortal}>\n          {rendered && (\n            <DialogContainer\n              enabled={type !== \"custom\"}\n              {...containerProps}\n              centered={type === \"centered\"}\n              displayNone={!temporary && exitedHidden && stage === \"exited\"}\n            >\n              <div\n                aria-modal={modal || undefined}\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                tabIndex={tabIndex}\n              >\n                {children}\n              </div>\n            </DialogContainer>\n          )}\n        </Portal>\n      </NestedDialogProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","DialogContainer","NestedDialogProvider","useNestedDialogContext","DEFAULT_DIALOG_CLASSNAMES","DEFAULT_DIALOG_TIMEOUT","dialog","noop","noopBool","Dialog","props","ref","id","propId","modal","role","type","width","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","isChildVisible","setIsChildVisible","eventHandlers","transitionOptions","nodeRef","activate","appearing","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","fixed","outline","disableBoxShadow","value","onClick","clickable","noOpacity","disabled","enabled","centered","displayNone","div","aria-modal","undefined"],"mappings":"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"}

package/dist/dialog/styles.d.ts

@@ -1,7 +1,5 @@
 declare module "react" {
     interface CSSProperties {
-        "--rmd-dialog-background-color"?: string;
-        "--rmd-dialog-color"?: string;
         "--rmd-dialog-min-width"?: string | number;
         "--rmd-dialog-horizontal-margin"?: string | number;
         "--rmd-dialog-vertical-margin"?: string | number;
@@ -10,6 +8,11 @@ declare module "react" {
         "--rmd-dialog-header-padding-bottom"?: string | number;
         "--rmd-dialog-content-padding"?: string | number;
         "--rmd-dialog-footer-padding"?: string | number;
+        "--rmd-dialog-width"?: string | number;
+        "--rmd-dialog-small-width"?: string | number;
+        "--rmd-dialog-medium-width"?: string | number;
+        "--rmd-dialog-large-width"?: string | number;
+        "--rmd-dialog-extra-large-width"?: string | number;
     }
 }
 export type DialogType = "full-page" | "centered" | "custom";

package/dist/dialog/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-dialog-background-color\"?: string;\n    \"--rmd-dialog-color\"?: string;\n    \"--rmd-dialog-min-width\"?: string | number;\n    \"--rmd-dialog-horizontal-margin\"?: string | number;\n    \"--rmd-dialog-vertical-margin\"?: string | number;\n    \"--rmd-dialog-z-index\"?: string | number;\n    \"--rmd-dialog-header-padding\"?: string | number;\n    \"--rmd-dialog-header-padding-bottom\"?: string | number;\n    \"--rmd-dialog-content-padding\"?: string | number;\n    \"--rmd-dialog-footer-padding\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-dialog\");\nconst containerStyles = bem(\"rmd-dialog-container\");\n\nexport type DialogType = \"full-page\" | \"centered\" | \"custom\";\n\n/**\n * This can be used to enforce a specific width for dialogs instead of relying\n * on the size of the content to determine the width. The width will also ensure\n * that it does not overflow based on the viewport width and margins applied.\n *\n * For example: if the `width=\"extra-large\"` and the total viewport size is\n * `600px`, the dialog width would be `420px` since there is a default `80px`\n * margin to the left and right of the dialog. If the user expands the browser,\n * the dialog width will continue to grow until it reaches the `extra-large`\n * width and stop growing from that point.\n *\n * @since 6.0.0\n */\nexport type DialogWidth = \"auto\" | \"small\" | \"medium\" | \"large\" | \"extra-large\";\n\n/**\n * @since 6.0.0\n */\nexport interface DialogContainerClassNameOptions {\n  className?: string;\n\n  centered?: boolean;\n  displayNone?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function dialogContainer(\n  options: DialogContainerClassNameOptions = {}\n): string {\n  const { className, centered, displayNone } = options;\n\n  return cnb(\n    containerStyles({ centered }),\n    displayNone && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * @defaultValue `type === \"full-page\"`\n   */\n  outline?: boolean;\n\n  /**\n   * This is mostly used for handling nested dialogs and removes any box shadow\n   * on a dialog that has a child visible.\n   *\n   * @defaultValue `false`\n   */\n  disableBoxShadow?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialog(options: DialogClassNameOptions = {}): string {\n  const {\n    type = \"centered\",\n    width,\n    fixed = false,\n    outline = type === \"full-page\",\n    disableBoxShadow,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      fixed,\n      outline,\n      centered: type === \"centered\",\n      \"full-page\": type === \"full-page\",\n      \"no-box-shadow\": type === \"centered\" && disableBoxShadow,\n      \"s-width\": width === \"small\",\n      \"m-width\": width === \"medium\",\n      \"l-width\": width === \"large\",\n      \"xl-width\": width === \"extra-large\",\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogHeaderClassNameOptions {\n  className?: string;\n}\n\n/**\n * NOTE: The default `DialogHeader` component uses the `Box` component so the\n * `box` class name utility function or `Box` component will probably be\n * required if using this util\n *\n * @since 6.0.0\n */\nexport function dialogHeader(\n  options: DialogHeaderClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"header\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface DialogContentClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disablePadding?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialogContent(\n  options: DialogContentClassNameOptions = {}\n): string {\n  const { className, disablePadding = false } = options;\n\n  return cnb(styles(\"content\", { padded: !disablePadding }), className);\n}\n\n/**\n * An optional alignment for the content within the footer. Since the majority\n * of dialog footers are used to contain action buttons, the default alignment\n * is near the end.\n *\n * @since 3.1.0\n */\nexport type DialogFooterAlignment =\n  | \"none\"\n  | \"start\"\n  | \"end\"\n  | \"between\"\n  | \"stacked-start\"\n  | \"stacked-end\";\n\n/** @since 6.0.0 */\nexport interface DialogFooterClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"end\"` */\n  align?: DialogFooterAlignment;\n}\n\n/** @since 6.0.0 */\nexport function dialogFooter(\n  options: DialogFooterClassNameOptions = {}\n): string {\n  const { align = \"end\", className } = options;\n\n  return cnb(\n    styles(\"footer\", {\n      flex: align !== \"none\",\n      \"flex-v\": align === \"stacked-start\" || align === \"stacked-end\",\n      start: align === \"start\" || align === \"stacked-start\",\n      between: align === \"between\",\n      end: align === \"end\" || align === \"stacked-end\",\n    }),\n    className\n  );\n}\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_CLASSNAMES = {\n  appear: \"rmd-dialog--enter\",\n  appearActive: \"rmd-dialog--enter-active\",\n  enter: \"rmd-dialog--enter\",\n  enterActive: \"rmd-dialog--enter-active\",\n  exit: \"rmd-dialog--exit\",\n  exitActive: \"rmd-dialog--exit-active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","containerStyles","dialogContainer","options","className","centered","displayNone","dialog","type","width","fixed","outline","disableBoxShadow","dialogHeader","dialogContent","disablePadding","padded","dialogFooter","align","flex","start","between","end","DEFAULT_DIALOG_TIMEOUT","enter","exit","DEFAULT_DIALOG_CLASSNAMES","appear","appearActive","enterActive","exitActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAMhC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAiBlE,MAAMC,SAASF,IAAI;AACnB,MAAMG,kBAAkBH,IAAI;AA6B5B;;CAEC,GACD,OAAO,SAASI,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGH;IAE7C,OAAON,IACLI,gBAAgB;QAAEI;IAAS,IAC3BC,eAAeP,oBACfK;AAEJ;AAmCA,iBAAiB,GACjB,OAAO,SAASG,OAAOJ,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJK,OAAO,UAAU,EACjBC,KAAK,EACLC,QAAQ,KAAK,EACbC,UAAUH,SAAS,WAAW,EAC9BI,gBAAgB,EAChBR,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLG,OAAO;QACLU;QACAC;QACAN,UAAUG,SAAS;QACnB,aAAaA,SAAS;QACtB,iBAAiBA,SAAS,cAAcI;QACxC,WAAWH,UAAU;QACrB,WAAWA,UAAU;QACrB,WAAWA,UAAU;QACrB,YAAYA,UAAU;IACxB,IACAL;AAEJ;AAOA;;;;;;CAMC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAIG,OAAO,WAAWI;AAC/B;AAUA,iBAAiB,GACjB,OAAO,SAASU,cACdX,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAEW,iBAAiB,KAAK,EAAE,GAAGZ;IAE9C,OAAON,IAAIG,OAAO,WAAW;QAAEgB,QAAQ,CAACD;IAAe,IAAIX;AAC7D;AAyBA,iBAAiB,GACjB,OAAO,SAASa,aACdd,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEe,QAAQ,KAAK,EAAEd,SAAS,EAAE,GAAGD;IAErC,OAAON,IACLG,OAAO,UAAU;QACfmB,MAAMD,UAAU;QAChB,UAAUA,UAAU,mBAAmBA,UAAU;QACjDE,OAAOF,UAAU,WAAWA,UAAU;QACtCG,SAASH,UAAU;QACnBI,KAAKJ,UAAU,SAASA,UAAU;IACpC,IACAd;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAMmB,yBAAyB;IACpCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC,iBAAiB,GACjB,OAAO,MAAMC,4BAA4B;IACvCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;AACd,EAA6C"}
+{"version":3,"sources":["../../src/dialog/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-dialog-min-width\"?: string | number;\n    \"--rmd-dialog-horizontal-margin\"?: string | number;\n    \"--rmd-dialog-vertical-margin\"?: string | number;\n    \"--rmd-dialog-z-index\"?: string | number;\n    \"--rmd-dialog-header-padding\"?: string | number;\n    \"--rmd-dialog-header-padding-bottom\"?: string | number;\n    \"--rmd-dialog-content-padding\"?: string | number;\n    \"--rmd-dialog-footer-padding\"?: string | number;\n    \"--rmd-dialog-width\"?: string | number;\n    \"--rmd-dialog-small-width\"?: string | number;\n    \"--rmd-dialog-medium-width\"?: string | number;\n    \"--rmd-dialog-large-width\"?: string | number;\n    \"--rmd-dialog-extra-large-width\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-dialog\");\nconst containerStyles = bem(\"rmd-dialog-container\");\n\nexport type DialogType = \"full-page\" | \"centered\" | \"custom\";\n\n/**\n * This can be used to enforce a specific width for dialogs instead of relying\n * on the size of the content to determine the width. The width will also ensure\n * that it does not overflow based on the viewport width and margins applied.\n *\n * For example: if the `width=\"extra-large\"` and the total viewport size is\n * `600px`, the dialog width would be `420px` since there is a default `80px`\n * margin to the left and right of the dialog. If the user expands the browser,\n * the dialog width will continue to grow until it reaches the `extra-large`\n * width and stop growing from that point.\n *\n * @since 6.0.0\n */\nexport type DialogWidth = \"auto\" | \"small\" | \"medium\" | \"large\" | \"extra-large\";\n\n/**\n * @since 6.0.0\n */\nexport interface DialogContainerClassNameOptions {\n  className?: string;\n\n  centered?: boolean;\n  displayNone?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function dialogContainer(\n  options: DialogContainerClassNameOptions = {}\n): string {\n  const { className, centered, displayNone } = options;\n\n  return cnb(\n    containerStyles({ centered }),\n    displayNone && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * @defaultValue `type === \"full-page\"`\n   */\n  outline?: boolean;\n\n  /**\n   * This is mostly used for handling nested dialogs and removes any box shadow\n   * on a dialog that has a child visible.\n   *\n   * @defaultValue `false`\n   */\n  disableBoxShadow?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialog(options: DialogClassNameOptions = {}): string {\n  const {\n    type = \"centered\",\n    width,\n    fixed = false,\n    outline = type === \"full-page\",\n    disableBoxShadow,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      fixed,\n      outline,\n      centered: type === \"centered\",\n      \"full-page\": type === \"full-page\",\n      \"no-box-shadow\": type === \"centered\" && disableBoxShadow,\n      \"s-width\": width === \"small\",\n      \"m-width\": width === \"medium\",\n      \"l-width\": width === \"large\",\n      \"xl-width\": width === \"extra-large\",\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogHeaderClassNameOptions {\n  className?: string;\n}\n\n/**\n * NOTE: The default `DialogHeader` component uses the `Box` component so the\n * `box` class name utility function or `Box` component will probably be\n * required if using this util\n *\n * @since 6.0.0\n */\nexport function dialogHeader(\n  options: DialogHeaderClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"header\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface DialogContentClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disablePadding?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialogContent(\n  options: DialogContentClassNameOptions = {}\n): string {\n  const { className, disablePadding = false } = options;\n\n  return cnb(styles(\"content\", { padded: !disablePadding }), className);\n}\n\n/**\n * An optional alignment for the content within the footer. Since the majority\n * of dialog footers are used to contain action buttons, the default alignment\n * is near the end.\n *\n * @since 3.1.0\n */\nexport type DialogFooterAlignment =\n  | \"none\"\n  | \"start\"\n  | \"end\"\n  | \"between\"\n  | \"stacked-start\"\n  | \"stacked-end\";\n\n/** @since 6.0.0 */\nexport interface DialogFooterClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"end\"` */\n  align?: DialogFooterAlignment;\n}\n\n/** @since 6.0.0 */\nexport function dialogFooter(\n  options: DialogFooterClassNameOptions = {}\n): string {\n  const { align = \"end\", className } = options;\n\n  return cnb(\n    styles(\"footer\", {\n      flex: align !== \"none\",\n      \"flex-v\": align === \"stacked-start\" || align === \"stacked-end\",\n      start: align === \"start\" || align === \"stacked-start\",\n      between: align === \"between\",\n      end: align === \"end\" || align === \"stacked-end\",\n    }),\n    className\n  );\n}\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_CLASSNAMES = {\n  appear: \"rmd-dialog--enter\",\n  appearActive: \"rmd-dialog--enter-active\",\n  enter: \"rmd-dialog--enter\",\n  enterActive: \"rmd-dialog--enter-active\",\n  exit: \"rmd-dialog--exit\",\n  exitActive: \"rmd-dialog--exit-active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","containerStyles","dialogContainer","options","className","centered","displayNone","dialog","type","width","fixed","outline","disableBoxShadow","dialogHeader","dialogContent","disablePadding","padded","dialogFooter","align","flex","start","between","end","DEFAULT_DIALOG_TIMEOUT","enter","exit","DEFAULT_DIALOG_CLASSNAMES","appear","appearActive","enterActive","exitActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAMhC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAoBlE,MAAMC,SAASF,IAAI;AACnB,MAAMG,kBAAkBH,IAAI;AA6B5B;;CAEC,GACD,OAAO,SAASI,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGH;IAE7C,OAAON,IACLI,gBAAgB;QAAEI;IAAS,IAC3BC,eAAeP,oBACfK;AAEJ;AAmCA,iBAAiB,GACjB,OAAO,SAASG,OAAOJ,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJK,OAAO,UAAU,EACjBC,KAAK,EACLC,QAAQ,KAAK,EACbC,UAAUH,SAAS,WAAW,EAC9BI,gBAAgB,EAChBR,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLG,OAAO;QACLU;QACAC;QACAN,UAAUG,SAAS;QACnB,aAAaA,SAAS;QACtB,iBAAiBA,SAAS,cAAcI;QACxC,WAAWH,UAAU;QACrB,WAAWA,UAAU;QACrB,WAAWA,UAAU;QACrB,YAAYA,UAAU;IACxB,IACAL;AAEJ;AAOA;;;;;;CAMC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAIG,OAAO,WAAWI;AAC/B;AAUA,iBAAiB,GACjB,OAAO,SAASU,cACdX,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAEW,iBAAiB,KAAK,EAAE,GAAGZ;IAE9C,OAAON,IAAIG,OAAO,WAAW;QAAEgB,QAAQ,CAACD;IAAe,IAAIX;AAC7D;AAyBA,iBAAiB,GACjB,OAAO,SAASa,aACdd,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEe,QAAQ,KAAK,EAAEd,SAAS,EAAE,GAAGD;IAErC,OAAON,IACLG,OAAO,UAAU;QACfmB,MAAMD,UAAU;QAChB,UAAUA,UAAU,mBAAmBA,UAAU;QACjDE,OAAOF,UAAU,WAAWA,UAAU;QACtCG,SAASH,UAAU;QACnBI,KAAKJ,UAAU,SAASA,UAAU;IACpC,IACAd;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAMmB,yBAAyB;IACpCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC,iBAAiB,GACjB,OAAO,MAAMC,4BAA4B;IACvCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;AACd,EAA6C"}

package/dist/divider/styles.d.ts

@@ -1,7 +1,7 @@
 declare module "react" {
     interface CSSProperties {
         "--rmd-divider-size"?: string | number;
-        "--rmd-divider-vertical-size"?: string | number;
+        "--rmd-divider-border-size"?: string | number;
         "--rmd-divider-color"?: string;
         "--rmd-divider-spacing"?: string | number;
         "--rmd-divider-vertical-spacing"?: string | number;

package/dist/divider/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/divider/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-divider-size\"?: string | number;\n    \"--rmd-divider-vertical-size\"?: string | number;\n    \"--rmd-divider-color\"?: string;\n    \"--rmd-divider-spacing\"?: string | number;\n    \"--rmd-divider-vertical-spacing\"?: string | number;\n    \"--rmd-divider-inset\"?: string | number;\n    \"--rmd-divider-max-size\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-divider\");\n\n/** @since 6.0.0 */\nexport interface DividerClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the divider should appear inset instead of full width. This\n   * really just applied a margin-left (or margin-right when dir=\"rtl\").\n   *\n   * If you want to create a divider that is centered, you most likely want to\n   * use the `rmd-divider-theme-update-var` mixin instead to update the\n   * `max-size` of the divider.\n   *\n   * @defaultValue `false`\n   */\n  inset?: boolean;\n\n  /**\n   * Boolean if the divider should be vertical instead of horizontal. This will\n   * change the divider to be rendered as a `<div>` instead of an `<hr>`.\n   *\n   * Note: If your parent element of the divider does not have a static height\n   * set, you **must** manually set the height of the divider to a static\n   * non-percentage number OR use the `VerticalDivider` component instead to\n   * automagically create a valid percentage height.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function divider(options: DividerClassNameOptions = {}): string {\n  const { inset = false, vertical = false, className } = options;\n\n  return cnb(\n    styles({\n      inset: inset && !vertical,\n      vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","divider","options","inset","vertical","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AActC,MAAMC,SAASD,IAAI;AAgCnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACLG,OAAOA,SAAS,CAACC;QACjBA;IACF,IACAC;AAEJ"}
+{"version":3,"sources":["../../src/divider/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-divider-size\"?: string | number;\n    \"--rmd-divider-border-size\"?: string | number;\n    \"--rmd-divider-color\"?: string;\n    \"--rmd-divider-spacing\"?: string | number;\n    \"--rmd-divider-vertical-spacing\"?: string | number;\n    \"--rmd-divider-inset\"?: string | number;\n    \"--rmd-divider-max-size\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-divider\");\n\n/** @since 6.0.0 */\nexport interface DividerClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the divider should appear inset instead of full width. This\n   * really just applied a margin-left (or margin-right when dir=\"rtl\").\n   *\n   * If you want to create a divider that is centered, you most likely want to\n   * use the `rmd-divider-theme-update-var` mixin instead to update the\n   * `max-size` of the divider.\n   *\n   * @defaultValue `false`\n   */\n  inset?: boolean;\n\n  /**\n   * Boolean if the divider should be vertical instead of horizontal. This will\n   * change the divider to be rendered as a `<div>` instead of an `<hr>`.\n   *\n   * Note: If your parent element of the divider does not have a static height\n   * set, you **must** manually set the height of the divider to a static\n   * non-percentage number OR use the `VerticalDivider` component instead to\n   * automagically create a valid percentage height.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function divider(options: DividerClassNameOptions = {}): string {\n  const { inset = false, vertical = false, className } = options;\n\n  return cnb(\n    styles({\n      inset: inset && !vertical,\n      vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","divider","options","inset","vertical","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AActC,MAAMC,SAASD,IAAI;AAgCnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACLG,OAAOA,SAAS,CAACC;QACjBA;IACF,IACAC;AAEJ"}

package/dist/error-boundary/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/error-boundary/ErrorBoundary.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Component,\n  type ErrorInfo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { Provider } from \"./context.js\";\nimport { type ErrorBoundaryContext, type ErrorBoundaryState } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ErrorBoundaryProps {\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n  fallback: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a minimal fork of the `react-error-boundary` package from\n * {@link https://github.com/bvaughn/react-error-boundary/tree/5.0.0}\n * that only includes things I consider useful. Use the `react-error-boundary`\n * if more complex behavior is required.\n *\n * @example Main Use Case\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { ErrorBoundary } from \"@react-md/core/error-boundary/ErrorBoundary\";\n * import { useErrorBoundary } from \"@react-md/core/error-boundary/useErrorBoundary\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <ErrorBoundary\n *       fallback={<SomeFallbackComponent />}\n *     >\n *       <SomeComponentThatMightError />\n *     </ErrorBoundary>\n *   );\n * }\n *\n * \"use client\";\n *\n * function SomeFallbackComponent() {\n *   const { error, errored, reset } = useErrorBoundary();\n *\n *   return (\n *     <>\n *       <Typography>Uh oh, something broke!</Typography>\n *       <Button onClick={reset}>Try Again?</Button>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n\n    this.state = { error: null, errored: false };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { error, errored: true };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    this.props.onError?.(error, errorInfo);\n  }\n\n  reset = (): void => {\n    this.setState({ error: null, errored: false });\n  };\n\n  render(): ReactElement {\n    const { fallback } = this.props;\n    const { error, errored } = this.state;\n\n    let { children } = this.props;\n    if (errored) {\n      children = fallback;\n    }\n\n    return (\n      <Provider\n        // should always match\n        value={{ error, errored, reset: this.reset } as ErrorBoundaryContext}\n      >\n        {children}\n      </Provider>\n    );\n  }\n}\n"],"names":["Component","Provider","ErrorBoundary","getDerivedStateFromError","error","errored","componentDidCatch","errorInfo","props","onError","render","fallback","state","children","value","reset","constructor","setState"],"mappings":"AAAA;;;;;;;;;;;;;;;AAEA,SACEA,SAAS,QAIJ,QAAQ;AAEf,SAASC,QAAQ,QAAQ,eAAe;AAYxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,sBAAsBF;IAUjC,OAAOG,yBAAyBC,KAAY,EAAsB;QAChE,OAAO;YAAEA;YAAOC,SAAS;QAAK;IAChC;IAEAC,kBAAkBF,KAAY,EAAEG,SAAoB,EAAQ;QAC1D,IAAI,CAACC,KAAK,CAACC,OAAO,GAAGL,OAAOG;IAC9B;IAMAG,SAAuB;QACrB,MAAM,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACH,KAAK;QAC/B,MAAM,EAAEJ,KAAK,EAAEC,OAAO,EAAE,GAAG,IAAI,CAACO,KAAK;QAErC,IAAI,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACL,KAAK;QAC7B,IAAIH,SAAS;YACXQ,WAAWF;QACb;QAEA,qBACE,KAACV;YACC,sBAAsB;YACtBa,OAAO;gBAAEV;gBAAOC;gBAASU,OAAO,IAAI,CAACA,KAAK;YAAC;sBAE1CF;;IAGP;IAnCAG,YAAYR,KAAyB,CAAE;QACrC,KAAK,CAACA,QAaRO,uBAAAA,SAAQ;YACN,IAAI,CAACE,QAAQ,CAAC;gBAAEb,OAAO;gBAAMC,SAAS;YAAM;QAC9C;QAbE,IAAI,CAACO,KAAK,GAAG;YAAER,OAAO;YAAMC,SAAS;QAAM;IAC7C;AAgCF"}
+{"version":3,"sources":["../../src/error-boundary/ErrorBoundary.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Component,\n  type ErrorInfo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { Provider } from \"./context.js\";\nimport { type ErrorBoundaryContext, type ErrorBoundaryState } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ErrorBoundaryProps {\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n  fallback: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a minimal fork of the `react-error-boundary` package from\n * {@link https://github.com/bvaughn/react-error-boundary/tree/5.0.0}\n * that only includes things I consider useful. Use the `react-error-boundary`\n * if more complex behavior is required.\n *\n * @example Main Use Case\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { ErrorBoundary } from \"@react-md/core/error-boundary/ErrorBoundary\";\n * import { useErrorBoundary } from \"@react-md/core/error-boundary/useErrorBoundary\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <ErrorBoundary\n *       fallback={<SomeFallbackComponent />}\n *     >\n *       <SomeComponentThatMightError />\n *     </ErrorBoundary>\n *   );\n * }\n *\n * \"use client\";\n *\n * function SomeFallbackComponent() {\n *   const { error, errored, reset } = useErrorBoundary();\n *\n *   return (\n *     <>\n *       <Typography>Uh oh, something broke!</Typography>\n *       <Button onClick={reset}>Try Again?</Button>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n\n    this.state = { error: null, errored: false };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { error, errored: true };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    this.props.onError?.(error, errorInfo);\n  }\n\n  reset = (): void => {\n    this.setState({ error: null, errored: false });\n  };\n\n  render(): ReactElement {\n    const { fallback } = this.props;\n    const { error, errored } = this.state;\n\n    let { children } = this.props;\n    if (errored) {\n      children = fallback;\n    }\n\n    return (\n      <Provider\n        // should always match\n        value={{ error, errored, reset: this.reset } as ErrorBoundaryContext}\n      >\n        {children}\n      </Provider>\n    );\n  }\n}\n"],"names":["Component","Provider","ErrorBoundary","getDerivedStateFromError","error","errored","componentDidCatch","errorInfo","props","onError","render","fallback","state","children","value","reset","setState"],"mappings":"AAAA;;;;;;;;;;;;;;;AAEA,SACEA,SAAS,QAIJ,QAAQ;AAEf,SAASC,QAAQ,QAAQ,eAAe;AAYxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,sBAAsBF;IAUjC,OAAOG,yBAAyBC,KAAY,EAAsB;QAChE,OAAO;YAAEA;YAAOC,SAAS;QAAK;IAChC;IAEAC,kBAAkBF,KAAY,EAAEG,SAAoB,EAAQ;QAC1D,IAAI,CAACC,KAAK,CAACC,OAAO,GAAGL,OAAOG;IAC9B;IAMAG,SAAuB;QACrB,MAAM,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACH,KAAK;QAC/B,MAAM,EAAEJ,KAAK,EAAEC,OAAO,EAAE,GAAG,IAAI,CAACO,KAAK;QAErC,IAAI,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACL,KAAK;QAC7B,IAAIH,SAAS;YACXQ,WAAWF;QACb;QAEA,qBACE,KAACV;YACC,sBAAsB;YACtBa,OAAO;gBAAEV;gBAAOC;gBAASU,OAAO,IAAI,CAACA,KAAK;YAAC;sBAE1CF;;IAGP;IAnCA,YAAYL,KAAyB,CAAE;QACrC,KAAK,CAACA,QAaRO,uBAAAA,SAAQ;YACN,IAAI,CAACC,QAAQ,CAAC;gBAAEZ,OAAO;gBAAMC,SAAS;YAAM;QAC9C;QAbE,IAAI,CAACO,KAAK,GAAG;YAAER,OAAO;YAAMC,SAAS;QAAM;IAC7C;AAgCF"}