@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/dist/card/_card.scss

@@ -6,48 +6,116 @@
 @use "../divider/divider";
 @use "../interaction/interaction";
 
+// Set to `true` to disable all the styles
+// @type boolean
 $disable-everything: false !default;
+
+// Set to `true` to disable the bordered styles since cards use box-shadow by
+// default.
+// @type boolean
 $disable-bordered: false !default;
+
+// Set to `true` to disable the box-shadow styles if you want to rely on the
+// border styles instead.
+// @type boolean
 $disable-shadowed: false !default;
-$disable-raisable: false !default;
-$disable-full-width: false !default;
+
+// Set to `true` to disable the raisable card styles where hovering a card
+// increases the elevation/box-shadow.
+//
+// @type boolean
+$disable-raisable: $disable-shadowed !default;
+
+// Set to `true` to disable the clickable card styles
+// @type boolean
 $disable-clickable: false !default;
-$disable-content-secondary-color: false !default;
+
+// Set to `true` to disable the styles for adding additional padding to the
+// last `CardContent` that exists
+// @type boolean
 $disable-content-last-child-padding: false !default;
 
+// The default card box-shadow elevation
+// @type number
 $elevation: 2 !default;
+
+// The default card raisable starting box-shadow elevation
+// @type number
 $raisable-start-elevation: 1 !default;
+
+// The default card raisable ending (hovering) box-shadow elevation
+// @type number
 $raisable-end-elevation: 8 !default;
 
+// The background color to use when using the global light theme
+// @type Color
 $light-theme-background-color: theme.theme-get-var(surface-color) !default;
+
+// The background color to use when using the global dark theme
+// @type Color
 $dark-theme-background-color: if(
   theme.$disable-dark-elevation,
   theme.$dark-theme-surface-color,
   map.get(theme.$dark-elevation-colors, $elevation)
 ) !default;
 
+// The default card background color
+// @type Color
 $background-color: theme.get-default-color(
   $light-theme-background-color,
   $dark-theme-background-color
 ) !default;
+
+// The default card text color
+// @type Color
 $color: theme.theme-get-var(text-primary-color) !default;
 
+// The default border-color for bordered cards
+// @type Color
 $border-color: divider.get-var(color) !default;
+
+// The default border-width for bordered cards
+// @type number
 $border-width: divider.get-var(size) !default;
+
+// The default border-radius for bordered cards
+// @type number
 $border-radius: 0.25rem !default;
 
+// The default padding to apply to `CardHeader`
+// @type number
 $header-padding: 1rem !default;
+
+// The default padding-top to apply to `CardHeader`
+// @type number
 $header-padding-top: 1.5rem !default;
 
+// The default `column-gap` to apply to the `CardHeader`
+// @type number
 $header-spacing: 1rem !default;
 
+// The default padding to apply to the `CardContent`
+// @type number
 $content-padding: 1rem !default;
+
+// The default padding-bottom to apply to the `CardContent` when it is the last
+// child and the {@link $disable-content-last-child-padding} feature flag has
+// not been disabled.
+//
+// @type number
 $content-padding-bottom: 1.5rem !default;
 
+// The default padding to apply to the `CardFooter`
 $footer-padding: 0.5rem !default;
 
+// The available configurable css variables and mostly used internally for the
+// `get-var`, `set-var`, and `use-var` utils.
+// @type List
 $variables: (background-color, color, secondary-color);
 
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value
+// @returns {string} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "card");
   @if $fallback {
@@ -57,28 +125,38 @@ $variables: (background-color, color, secondary-color);
   @return var(#{$var});
 }
 
+// @param {string} name - The supported variable name
+// @param {any} value - The value to set the variable to. Supports `null` which
+// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "card")}: #{$value};
   }
 }
 
+// @param {string} property - The css property to apply the variable to
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value if the variable has not
+// been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+// Applies the light the variables based on feature flags
 @mixin use-light-theme {
   @if not $disable-everything {
     @include set-var(background-color, $light-theme-background-color);
   }
 }
 
+// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @if not $disable-everything {
     @include set-var(background-color, $dark-theme-background-color);
   }
 }
 
+// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(background-color, $background-color);
@@ -86,6 +164,10 @@ $variables: (background-color, color, secondary-color);
   }
 }
 
+// Generates all the styles based on feature flags.
+//
+// @param {boolean} disable-layer - Set this to `true` to disable the
+// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(card, $disable-layer) {
@@ -98,8 +180,6 @@ $variables: (background-color, color, secondary-color);
         @include use-var(color);
 
         border-radius: $border-radius;
-        display: inline-block;
-        max-width: 100%;
 
         @if not $disable-raisable {
           &--raisable {
@@ -123,13 +203,6 @@ $variables: (background-color, color, secondary-color);
           }
         }
 
-        @if not $disable-full-width {
-          &--full-width {
-            display: block;
-            width: 100%;
-          }
-        }
-
         @if not $disable-clickable {
           &--clickable {
             @include interaction.surface;
@@ -140,7 +213,11 @@ $variables: (background-color, color, secondary-color);
           align-items: center;
           column-gap: $header-spacing;
           display: flex;
-          padding: $header-padding-top $header-padding $header-padding;
+          padding: if(
+            $header-padding == $header-padding-top or not $header-padding-top,
+            $header-padding,
+            $header-padding-top $header-padding $header-padding
+          );
         }
 
         &__header-content {
@@ -159,12 +236,6 @@ $variables: (background-color, color, secondary-color);
         // }
 
         &__content {
-          @if not $disable-content-secondary-color {
-            &--secondary {
-              @include theme.theme-use-var(color, text-secondary-color);
-            }
-          }
-
           @if $content-padding {
             &--padded {
               padding: $content-padding;

package/dist/card/styles.d.ts

@@ -15,13 +15,6 @@ export interface CardClassNameOptions {
      * @defaultValue `false`
      */
     raisable?: boolean;
-    /**
-     * Update the card to have `display: block` and `width: 100%` instead of
-     * `display: inline-block`.
-     *
-     * @defaultValue `false`
-     */
-    fullWidth?: boolean;
     /**
      * Set this to `true` if the card should gain the pointer cursor while
      * hovering and other interaction styles and not using the `ClickableCard`

package/dist/card/styles.js

@@ -5,13 +5,12 @@ const cardStyles = bem("rmd-card");
 /**
  * @since 6.0.0
  */ export function card(options = {}) {
-    const { className, bordered, raisable, fullWidth, interactable } = options;
+    const { className, bordered, raisable, interactable } = options;
     return cnb(cardStyles({
         bordered,
         shadowed: !bordered,
         raisable: !bordered && raisable,
-        interactable,
-        "full-width": fullWidth
+        interactable
     }), className);
 }
 /**

package/dist/card/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\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   * Update the card to have `display: block` and `width: 100%` instead of\n   * `display: inline-block`.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: 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, fullWidth, interactable } = options;\n\n  return cnb(\n    cardStyles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      interactable,\n      \"full-width\": fullWidth,\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","fullWidth","interactable","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","textColor","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,aAAaD,IAAI;AAwCvB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGL;IAEnE,OAAOL,IACLG,WAAW;QACTI;QACAI,UAAU,CAACJ;QACXC,UAAU,CAACD,YAAYC;QACvBE;QACA,cAAcD;IAChB,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASM,WAAWP,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEO,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGT;IAE/D,OAAOL,IACLG,WAAW,UAAU;QACnB,eAAeU,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAR;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASU,kBACdX,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,mBAAmBG;AAC3C;AAOA;;CAEC,GACD,OAAO,SAASW,UAAUZ,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,UAAUG;AAClC;AAOA;;CAEC,GACD,OAAO,SAASY,aACdb,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,aAAaG;AACrC;AA8BA;;CAEC,GACD,OAAO,SAASa,YAAYd,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTc,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGjB;IAEJ,OAAOL,IACLG,WAAW,WAAW;QACpBoB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACArB,SAAS;QACPuB,WAAW,CAACH,wBAAwB,mBAAmBI;IACzD,IACAnB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASoB,WAAWrB,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\";\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;AAChC,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"}

package/dist/chip/Chip.d.ts

@@ -1,5 +1,6 @@
 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 PropsWithRef } from "../types.js";
 declare module "react" {
     interface CSSProperties {
@@ -16,7 +17,7 @@ declare module "react" {
  * @since 6.0.0 Renamed the `noninteractive` prop to
  * `noninteractable`.
  */
-export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement>, ComponentWithRippleProps {
     /**
      * @defaultValue `"solid"`
      */
@@ -124,8 +125,6 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     contentClassName?: string;
 }
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Chip } from "@react-md/core";

package/dist/chip/Chip.js

@@ -8,8 +8,6 @@ import { useHigherContrastChildren } from "../interaction/useHigherContrastChild
 import { useMaxWidthTransition } from "../transition/useMaxWidthTransition.js";
 import { chip, chipContent } from "./styles.js";
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Chip } from "@react-md/core";
@@ -55,7 +53,7 @@ import { chip, chipContent } from "./styles.js";
  * @since 6.0.0 Renamed the `noninteractable` prop to
  * `noninteractive`.
  */ export const Chip = /*#__PURE__*/ forwardRef(function Chip(props, ref) {
-    const { "aria-pressed": ariaPressed, theme = "solid", className, raisable = false, disabled = false, selected, selectedThemed = false, selectedClassName, selectedIcon: propSelectedIcon, selectedIconAfter = false, backgroundColor, noninteractive = false, disableIconTransition = false, children: propChildren, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, leftAddon: propLeftAddon, rightAddon: propRightAddon, contentProps, contentStyle, contentClassName, disableContentWrap = false, ...remaining } = props;
+    const { "aria-pressed": ariaPressed, theme = "solid", className, raisable = false, disabled = false, selected, selectedThemed = false, selectedClassName, selectedIcon: propSelectedIcon, selectedIconAfter = false, backgroundColor, noninteractive = false, disableRipple, disableIconTransition = false, children: propChildren, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, leftAddon: propLeftAddon, rightAddon: propRightAddon, contentProps, contentStyle, contentClassName, disableContentWrap = false, ...remaining } = props;
     let buttonProps;
     if (!noninteractive) {
         buttonProps = {
@@ -93,6 +91,7 @@ import { chip, chipContent } from "./styles.js";
         }
     }
     const { pressed, pressedClassName, ripples, handlers } = useElementInteraction({
+        mode: disableRipple ? "none" : undefined,
         onClick,
         onKeyDown,
         onKeyUp,

package/dist/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/iconConfig.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 extends ButtonHTMLAttributes<HTMLButtonElement> {\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>, 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 * **Server Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core\";\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\";\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, Chip } from \"@react-md/core\";\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 * @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      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        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","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","Component"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AAEf,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,IAAI,EAAEC,WAAW,QAAQ,cAAc;AA8IhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,MAAMC,qBAAOP,WAClB,SAASO,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJ,gBAAgBC,WAAW,EAC3BC,QAAQ,OAAO,EACfC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,cAAcC,gBAAgB,EAC9BC,oBAAoB,KAAK,EACzBC,eAAe,EACfC,iBAAiB,KAAK,EACtBC,wBAAwB,KAAK,EAC7BC,UAAUC,YAAY,EACtBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAC1BC,YAAY,EACZC,YAAY,EACZC,gBAAgB,EAChBC,qBAAqB,KAAK,EAC1B,GAAGC,WACJ,GAAGpC;IAEJ,IAAIqC;IACJ,IAAI,CAACvB,gBAAgB;QACnBuB,cAAc;YACZ,gBAAgBnC,eAAgB,CAAA,CAAC,CAACK,YAAY+B,SAAQ;YACtDC,MAAM;YACNjC;QACF;IACF;IAEA,IAAIkC,UAAUvB;IACd,IAAI,CAACkB,oBAAoB;QACvBK,wBACE,KAACC;YACCC,OAAOT;YACN,GAAGD,YAAY;YAChB5B,WAAWb,IACTO,YAAY;gBAAEM,WAAW8B;YAAiB,IAC1CF,cAAc5B;sBAGfa;;IAGP;IAEA,IAAIW,YAAYC;IAChB,IAAIC,aAAaC;IACjB,MAAMY,mBAAmBlD,QAAQ,YAAYkB;IAC7C,MAAMiC,mBACJ,CAACpC,kBACD,OAAOD,aAAa,aACpB,OAAQK,CAAAA,oBAAoBmB,iBAAiBF,aAAY,MACvD;IACJ,MAAMnB,eAAed,sBAAsB;QACzCiD,SAASF;QACTG,cAAc,CAAC,CAACvC;QAChBD,UAAU,CAACsC;QACXG,mBAAmBhC;IACrB;IACA,IAAI6B,kBAAkB;QACpB,IAAIhC,mBAAmB;YACrBkB,aAAapB;QACf,OAAO;YACLkB,YAAYlB;QACd;IACF;IAEA,MAAM,EAAEsC,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpDzD,sBAAsB;QACpBwB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACArB,UAAUA,YAAYQ;IACxB;IACF,MAAME,WAAWrB,0BAA0B6C;IAC3C,MAAMY,YAAYtC,iBAAiB,SAAS;IAE5C,qBACE,MAACsC;QACE,GAAGhB,SAAS;QACZ,GAAGC,WAAW;QACd,GAAGc,QAAQ;QACZ/C,WAAWP,KAAK;YACdO;YACAD;YACA6C,SAAS3C,YAAY2C;YACrB1C;YACAC;YACAC;YACAC;YACAK;YACAD;YACAoC;YACArB,WAAW,CAAC,CAACA,aAAchB,CAAAA,qBAAqBL,aAAa,KAAI;YACjEuB,YACE,CAAC,CAACA,cAAe,CAAA,CAAClB,qBAAqBL,aAAa,KAAI;QAC5D;QACAN,KAAKA;;YAEJ2B;YACAZ;YACAc;YACAoB;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/iconConfig.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>, 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\";\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\";\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, Chip } from \"@react-md/core\";\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 * @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":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AAEf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,IAAI,EAAEC,WAAW,QAAQ,cAAc;AAgJhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CC,GACD,OAAO,MAAMC,qBAAOP,WAClB,SAASO,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJ,gBAAgBC,WAAW,EAC3BC,QAAQ,OAAO,EACfC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,cAAcC,gBAAgB,EAC9BC,oBAAoB,KAAK,EACzBC,eAAe,EACfC,iBAAiB,KAAK,EACtBC,aAAa,EACbC,wBAAwB,KAAK,EAC7BC,UAAUC,YAAY,EACtBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAC1BC,YAAY,EACZC,YAAY,EACZC,gBAAgB,EAChBC,qBAAqB,KAAK,EAC1B,GAAGC,WACJ,GAAGrC;IAEJ,IAAIsC;IACJ,IAAI,CAACxB,gBAAgB;QACnBwB,cAAc;YACZ,gBAAgBpC,eAAgB,CAAA,CAAC,CAACK,YAAYgC,SAAQ;YACtDC,MAAM;YACNlC;QACF;IACF;IAEA,IAAImC,UAAUvB;IACd,IAAI,CAACkB,oBAAoB;QACvBK,wBACE,KAACC;YACCC,OAAOT;YACN,GAAGD,YAAY;YAChB7B,WAAWb,IACTO,YAAY;gBAAEM,WAAW+B;YAAiB,IAC1CF,cAAc7B;sBAGfc;;IAGP;IAEA,IAAIW,YAAYC;IAChB,IAAIC,aAAaC;IACjB,MAAMY,mBAAmBnD,QAAQ,YAAYkB;IAC7C,MAAMkC,mBACJ,CAACrC,kBACD,OAAOD,aAAa,aACpB,OAAQK,CAAAA,oBAAoBoB,iBAAiBF,aAAY,MACvD;IACJ,MAAMpB,eAAed,sBAAsB;QACzCkD,SAASF;QACTG,cAAc,CAAC,CAACxC;QAChBD,UAAU,CAACuC;QACXG,mBAAmBhC;IACrB;IACA,IAAI6B,kBAAkB;QACpB,IAAIjC,mBAAmB;YACrBmB,aAAarB;QACf,OAAO;YACLmB,YAAYnB;QACd;IACF;IAEA,MAAM,EAAEuC,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpD1D,sBAAsB;QACpB2D,MAAMtC,gBAAgB,SAASwB;QAC/BpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB,UAAUA,YAAYQ;IACxB;IACF,MAAMG,WAAWtB,0BAA0B8C;IAC3C,MAAMa,YAAYxC,iBAAiB,SAAS;IAE5C,qBACE,MAACwC;QACE,GAAGjB,SAAS;QACZ,GAAGC,WAAW;QACd,GAAGc,QAAQ;QACZhD,WAAWP,KAAK;YACdO;YACAD;YACA8C,SAAS5C,YAAY4C;YACrB3C;YACAC;YACAC;YACAC;YACAK;YACAD;YACAqC;YACArB,WAAW,CAAC,CAACA,aAAcjB,CAAAA,qBAAqBL,aAAa,KAAI;YACjEwB,YACE,CAAC,CAACA,cAAe,CAAA,CAACnB,qBAAqBL,aAAa,KAAI;QAC5D;QACAN,KAAKA;;YAEJ4B;YACAZ;YACAc;YACAoB;;;AAGP,GACA"}

package/dist/chip/_chip.scss

@@ -81,6 +81,7 @@ $solid-raisable-box-shadow-z-value: 4 !default;
 $solid-raisable-transition-duration: transition.$linear-duration !default;
 
 $outline-width: 0.0625rem !default;
+$outline-raisable-box-shadow-z-value: 8 !default;
 $outline-light-color: colors.$grey-300 !default;
 $outline-light-background-color: theme.$light-theme-surface-color !default;
 $outline-light-text-color: a11y.contrast-color(
@@ -90,7 +91,7 @@ $outline-dark-color: $outline-light-color !default;
 $outline-dark-background-color: if(
   theme.$disable-dark-elevation,
   theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, 8)
+  map.get(theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
 ) !default;
 $outline-dark-text-color: a11y.contrast-color(
   $outline-dark-background-color
@@ -108,10 +109,14 @@ $outline-text-color: theme.get-default-color(
   $outline-light-text-color,
   $outline-dark-text-color
 ) !default;
-$outline-raisable-box-shadow-z-value: 8 !default;
 $outline-raisable-transition-duration: transition.$linear-duration !default;
 
 $variables: (
+  gap,
+  height,
+  border-radius,
+  horizontal-padding,
+  vertical-padding,
   solid-background-color,
   solid-disabled-background-color,
   solid-color,
@@ -145,6 +150,10 @@ $variables: (
 @mixin use-light-theme {
   @if not $disable-solid-theme {
     @include set-var(solid-background-color, $solid-light-background-color);
+    @include set-var(
+      solid-disabled-background-color,
+      $solid-light-disabled-background-color
+    );
     @include set-var(solid-color, $solid-light-color);
   }
 
@@ -160,6 +169,10 @@ $variables: (
 @mixin use-dark-theme {
   @if not $disable-solid-theme {
     @include set-var(solid-background-color, $solid-dark-background-color);
+    @include set-var(
+      solid-disabled-background-color,
+      $solid-dark-disabled-background-color
+    );
     @include set-var(solid-color, $solid-dark-color);
   }
 
@@ -179,6 +192,11 @@ $variables: (
       solid-disabled-background-color,
       $solid-disabled-background-color
     );
+    @include set-var(gap, $gap);
+    @include set-var(height, $height);
+    @include set-var(border-radius, $border-radius);
+    @include set-var(horizontal-padding, $horizontal-padding);
+    @include set-var(vertical-padding, $vertical-padding);
     @include set-var(solid-color, $solid-color);
     @include set-var(theme-background-color, $theme-background-color);
     @include set-var(theme-color, $theme-color);
@@ -217,18 +235,21 @@ $variables: (
         @include utils.map-to-styles($typography);
 
         align-items: center;
-        border-radius: $border-radius;
+        border-radius: get-var(border-radius);
         border-width: 0;
         display: inline-flex;
         flex-shrink: 0;
-        gap: $gap;
-        height: $height;
+        gap: get-var(gap);
+        height: get-var(height);
         justify-content: center;
         max-width: 100%;
-        padding: $vertical-padding $horizontal-padding;
+        padding: get-var(vertical-padding) get-var(horizontal-padding);
 
         @if not $disable-solid-theme {
           &--solid {
+            @include use-var(background-color, solid-background-color);
+            @include use-var(color, solid-color);
+
             @if not $disable-solid-raisable {
               @include box-shadows.elevation-transition(
                 $start-z-value: 0,
@@ -239,13 +260,14 @@ $variables: (
                 $position-relative: false
               );
             }
-            @include use-var(background-color, solid-background-color);
-            @include use-var(color, solid-color);
           }
         }
 
         @if not $disable-outline-theme {
           &--outline {
+            @include use-var(background-color, outline-background-color);
+            @include use-var(color, outline-text-color);
+
             @if not $disable-outline-raisable {
               $outline-box-shadow: inset
                 0
@@ -264,8 +286,6 @@ $variables: (
                 $position-relative: false
               );
             }
-            @include use-var(background-color, outline-background-color);
-            @include use-var(color, outline-text-color);
           }
         }
 
@@ -293,21 +313,23 @@ $variables: (
 
         @if not $disable-left-addon {
           &--left-addon {
-            @include utils.auto-rtl(
-              padding-left,
-              $addon-left-padding,
-              $horizontal-padding
-            );
+            padding-left: $addon-left-padding;
+
+            @include utils.rtl {
+              padding-left: $horizontal-padding;
+              padding-right: $addon-left-padding;
+            }
           }
         }
 
         @if not $disable-right-addon {
           &--right-addon {
-            @include utils.auto-rtl(
-              padding-right,
-              $addon-right-padding,
-              $horizontal-padding
-            );
+            padding-right: $addon-right-padding;
+
+            @include utils.rtl {
+              padding-left: $addon-right-padding;
+              padding-right: $horizontal-padding;
+            }
           }
         }
 

package/dist/chip/styles.d.ts

@@ -8,11 +8,12 @@ import { type BackgroundColor } from "../cssUtils.js";
  *
  * ```scss
  * &:has(.rmd-icon:first-child, .rmd-avatar:first-child) {
- *   @include core.auto-rtl(
- *     padding-left,
- *     $addon-left-padding,
- *     $horizontal-padding
- *   );
+ *   padding-left: $addon-left-padding;
+ *
+ *   @include utils.rtl {
+ *     padding-left: $horizontal-padding;
+ *     padding-right; $addon-left-padding;
+ *   }
  * }
  *
  * $index: if(
@@ -21,11 +22,12 @@ import { type BackgroundColor } from "../cssUtils.js";
  *   2 // last child is always the `.rmd-ripple-container`
  * );
  * &:has(.rmd-icon:nth-last-child(#{$index})) {
- *   @include core.auto-rtl(
- *     padding-right,
- *     $addon-right-padding,
- *     $horizontal-padding
- *   );
+ *   padding-right: $addon-left-padding;
+ *
+ *   @include utils.rtl {
+ *     padding-left; $addon-left-padding;
+ *     padding-right: $horizontal-padding;
+ *   }
  * }
  * ```
  */

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chip/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\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 *   @include core.auto-rtl(\n *     padding-left,\n *     $addon-left-padding,\n *     $horizontal-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 *   @include core.auto-rtl(\n *     padding-right,\n *     $addon-right-padding,\n *     $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;AAChC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAgEnB;;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\";\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;AAChC,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"}