@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/card/CardTitle.d.ts

@@ -1,6 +1,6 @@
 import { type TypographyHTMLElement, type TypographyProps } from "../typography/Typography.js";
 /**
- * @since 6,0.0 Extends the {@link TypographyProps} and removed the
+ * @since 6.0.0 Extends the {@link TypographyProps} and removed the
  * `small`/`noWrap` props.
  */
 export interface CardTitleProps extends TypographyProps {
@@ -12,6 +12,7 @@ export interface CardTitleProps extends TypographyProps {
     margin?: TypographyProps["margin"];
 }
 /**
+ * @see {@link https://next.react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Extends the {@link Typography} component and removed
  * the `small`/`noWrap` props.
  */

package/dist/card/CardTitle.js

@@ -3,6 +3,7 @@ import { forwardRef } from "react";
 import { Typography } from "../typography/Typography.js";
 import { cardTitle } from "./styles.js";
 /**
+ * @see {@link https://next.react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Extends the {@link Typography} component and removed
  * the `small`/`noWrap` props.
  */ export const CardTitle = /*#__PURE__*/ forwardRef(function CardTitle(props, ref) {

package/dist/card/CardTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/CardTitle.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  Typography,\n  type TypographyHTMLElement,\n  type TypographyProps,\n} from \"../typography/Typography.js\";\nimport { cardTitle } from \"./styles.js\";\n\n/**\n * @since 6,0.0 Extends the {@link TypographyProps} and removed the\n * `small`/`noWrap` props.\n */\nexport interface CardTitleProps extends TypographyProps {\n  /** @defaultValue `\"h5\"` */\n  as?: TypographyProps[\"as\"];\n\n  /** @defaultValue `\"headline-5\"` */\n  type?: TypographyProps[\"type\"];\n\n  /** @defaultValue \"none\" */\n  margin?: TypographyProps[\"margin\"];\n}\n\n/**\n * @since 6.0.0 Extends the {@link Typography} component and removed\n * the `small`/`noWrap` props.\n */\nexport const CardTitle = forwardRef<TypographyHTMLElement, CardTitleProps>(\n  function CardTitle(props, ref) {\n    const {\n      children,\n      as = \"h5\",\n      type = \"headline-5\",\n      margin = \"none\",\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        as={as}\n        type={type}\n        margin={margin}\n        className={cardTitle({ className })}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["forwardRef","Typography","cardTitle","CardTitle","props","ref","children","as","type","margin","className","remaining"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,UAAU,QAGL,8BAA8B;AACrC,SAASC,SAAS,QAAQ,cAAc;AAiBxC;;;CAGC,GACD,OAAO,MAAMC,0BAAYH,WACvB,SAASG,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,QAAQ,EACRC,KAAK,IAAI,EACTC,OAAO,YAAY,EACnBC,SAAS,MAAM,EACfC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACH;QACE,GAAGU,SAAS;QACbN,KAAKA;QACLE,IAAIA;QACJC,MAAMA;QACNC,QAAQA;QACRC,WAAWR,UAAU;YAAEQ;QAAU;kBAEhCJ;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/CardTitle.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  Typography,\n  type TypographyHTMLElement,\n  type TypographyProps,\n} from \"../typography/Typography.js\";\nimport { cardTitle } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Extends the {@link TypographyProps} and removed the\n * `small`/`noWrap` props.\n */\nexport interface CardTitleProps extends TypographyProps {\n  /** @defaultValue `\"h5\"` */\n  as?: TypographyProps[\"as\"];\n\n  /** @defaultValue `\"headline-5\"` */\n  type?: TypographyProps[\"type\"];\n\n  /** @defaultValue \"none\" */\n  margin?: TypographyProps[\"margin\"];\n}\n\n/**\n * @see {@link https://next.react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Extends the {@link Typography} component and removed\n * the `small`/`noWrap` props.\n */\nexport const CardTitle = forwardRef<TypographyHTMLElement, CardTitleProps>(\n  function CardTitle(props, ref) {\n    const {\n      children,\n      as = \"h5\",\n      type = \"headline-5\",\n      margin = \"none\",\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        as={as}\n        type={type}\n        margin={margin}\n        className={cardTitle({ className })}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["forwardRef","Typography","cardTitle","CardTitle","props","ref","children","as","type","margin","className","remaining"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,UAAU,QAGL,8BAA8B;AACrC,SAASC,SAAS,QAAQ,cAAc;AAiBxC;;;;CAIC,GACD,OAAO,MAAMC,0BAAYH,WACvB,SAASG,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,QAAQ,EACRC,KAAK,IAAI,EACTC,OAAO,YAAY,EACnBC,SAAS,MAAM,EACfC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACH;QACE,GAAGU,SAAS;QACbN,KAAKA;QACLE,IAAIA;QACJC,MAAMA;QACNC,QAAQA;QACRC,WAAWR,UAAU;YAAEQ;QAAU;kBAEhCJ;;AAGP,GACA"}

package/dist/card/ClickableCard.d.ts

@@ -21,7 +21,8 @@ export interface ClickableCardProps extends CardProps, ComponentWithRippleProps
  *
  * @example Simple Example
  * ```tsx
- * import { CardContent, ClickableCard } from "@react-md/core";
+ * import { CardContent } from "@react-md/core/card/CardContent"
+ * import { ClickableCard } from "@react-md/core/card/ClickableCard";
  * import { type ReactElement } from "react";
  *
  * export default function ClickableCardExample(): ReactElement {
@@ -37,6 +38,7 @@ export interface ClickableCardProps extends CardProps, ComponentWithRippleProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/card#clickable-card | ClickableCard Demos}
  * @since 6.0.0
  */
 export declare const ClickableCard: import("react").ForwardRefExoticComponent<ClickableCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/card/ClickableCard.js

@@ -14,7 +14,8 @@ const noop = ()=>{
  *
  * @example Simple Example
  * ```tsx
- * import { CardContent, ClickableCard } from "@react-md/core";
+ * import { CardContent } from "@react-md/core/card/CardContent"
+ * import { ClickableCard } from "@react-md/core/card/ClickableCard";
  * import { type ReactElement } from "react";
  *
  * export default function ClickableCardExample(): ReactElement {
@@ -30,6 +31,7 @@ const noop = ()=>{
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/card#clickable-card | ClickableCard Demos}
  * @since 6.0.0
  */ export const ClickableCard = /*#__PURE__*/ forwardRef(function ClickableCard(props, ref) {
     const { role = "button", disabled, tabIndex = disabled ? undefined : 0, onClick, onKeyDown = noop, className, children: propChildren, disableRipple, ...remaining } = props;

package/dist/card/ClickableCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/ClickableCard.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { Card, type CardProps } from \"./Card.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface ClickableCardProps\n  extends CardProps,\n    ComponentWithRippleProps {\n  onClick: MouseEventHandler<HTMLDivElement>;\n\n  /**\n   * Set this to `true` to disable all click events.\n   *\n   * Note: Any disabled styling will need to be manually applied.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * A Small wrapper around the `Card` component that is clickable and has the\n * element interaction enabled (ripples).\n *\n * @example Simple Example\n * ```tsx\n * import { CardContent, ClickableCard } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ClickableCardExample(): ReactElement {\n *   return (\n *     <ClickableCard\n *       onClick={() => {\n *         // do something\n *       }}\n *     >\n *       <CardContent>Wow</CardContent>\n *     </ClickableCard>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(\n  function ClickableCard(props, ref) {\n    const {\n      role = \"button\",\n      disabled,\n      tabIndex = disabled ? undefined : 0,\n      onClick,\n      onKeyDown = noop,\n      className,\n      children: propChildren,\n      disableRipple,\n      ...remaining\n    } = props;\n    const { handlers, ripples } = useElementInteraction({\n      ...remaining,\n      mode: disableRipple ? \"none\" : undefined,\n    });\n    const children = useHigherContrastChildren(propChildren);\n\n    return (\n      <Card\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={cnb(\"rmd-card--clickable\", className)}\n        onClick={(event) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n          if (disabled) {\n            return;\n          }\n\n          const isSpace = event.key === \" \";\n          if (isSpace || event.key === \"Enter\") {\n            if (isSpace) {\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n        }}\n      >\n        {children}\n        {ripples}\n      </Card>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useHigherContrastChildren","Card","noop","ClickableCard","props","ref","role","disabled","tabIndex","undefined","onClick","onKeyDown","className","children","propChildren","disableRipple","remaining","handlers","ripples","mode","aria-disabled","event","isSpace","key","preventDefault","currentTarget","click"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAAiCC,UAAU,QAAQ,QAAQ;AAG3D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,IAAI,QAAwB,YAAY;AAEjD,MAAMC,OAAO;AACX,aAAa;AACf;AAoBA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,8BAAgBL,WAC3B,SAASK,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,OAAO,QAAQ,EACfC,QAAQ,EACRC,WAAWD,WAAWE,YAAY,CAAC,EACnCC,OAAO,EACPC,YAAYT,IAAI,EAChBU,SAAS,EACTC,UAAUC,YAAY,EACtBC,aAAa,EACb,GAAGC,WACJ,GAAGZ;IACJ,MAAM,EAAEa,QAAQ,EAAEC,OAAO,EAAE,GAAGnB,sBAAsB;QAClD,GAAGiB,SAAS;QACZG,MAAMJ,gBAAgB,SAASN;IACjC;IACA,MAAMI,WAAWb,0BAA0Bc;IAE3C,qBACE,MAACb;QACE,GAAGe,SAAS;QACZ,GAAGC,QAAQ;QACZG,iBAAeb,YAAYE;QAC3BJ,KAAKA;QACLC,MAAMA;QACNE,UAAUA;QACVI,WAAWf,IAAI,uBAAuBe;QACtCF,SAAS,CAACW;YACR,IAAId,UAAU;gBACZ;YACF;YAEAG,QAAQW;QACV;QACAV,WAAW,CAACU;YACVV,UAAUU;YACV,IAAId,UAAU;gBACZ;YACF;YAEA,MAAMe,UAAUD,MAAME,GAAG,KAAK;YAC9B,IAAID,WAAWD,MAAME,GAAG,KAAK,SAAS;gBACpC,IAAID,SAAS;oBACXD,MAAMG,cAAc;gBACtB;gBAEAH,MAAMI,aAAa,CAACC,KAAK;YAC3B;QACF;;YAECb;YACAK;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/ClickableCard.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { Card, type CardProps } from \"./Card.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface ClickableCardProps\n  extends CardProps,\n    ComponentWithRippleProps {\n  onClick: MouseEventHandler<HTMLDivElement>;\n\n  /**\n   * Set this to `true` to disable all click events.\n   *\n   * Note: Any disabled styling will need to be manually applied.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * A Small wrapper around the `Card` component that is clickable and has the\n * element interaction enabled (ripples).\n *\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\"\n * import { ClickableCard } from \"@react-md/core/card/ClickableCard\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ClickableCardExample(): ReactElement {\n *   return (\n *     <ClickableCard\n *       onClick={() => {\n *         // do something\n *       }}\n *     >\n *       <CardContent>Wow</CardContent>\n *     </ClickableCard>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/card#clickable-card | ClickableCard Demos}\n * @since 6.0.0\n */\nexport const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(\n  function ClickableCard(props, ref) {\n    const {\n      role = \"button\",\n      disabled,\n      tabIndex = disabled ? undefined : 0,\n      onClick,\n      onKeyDown = noop,\n      className,\n      children: propChildren,\n      disableRipple,\n      ...remaining\n    } = props;\n    const { handlers, ripples } = useElementInteraction({\n      ...remaining,\n      mode: disableRipple ? \"none\" : undefined,\n    });\n    const children = useHigherContrastChildren(propChildren);\n\n    return (\n      <Card\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={cnb(\"rmd-card--clickable\", className)}\n        onClick={(event) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n          if (disabled) {\n            return;\n          }\n\n          const isSpace = event.key === \" \";\n          if (isSpace || event.key === \"Enter\") {\n            if (isSpace) {\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n        }}\n      >\n        {children}\n        {ripples}\n      </Card>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useHigherContrastChildren","Card","noop","ClickableCard","props","ref","role","disabled","tabIndex","undefined","onClick","onKeyDown","className","children","propChildren","disableRipple","remaining","handlers","ripples","mode","aria-disabled","event","isSpace","key","preventDefault","currentTarget","click"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAAiCC,UAAU,QAAQ,QAAQ;AAG3D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,IAAI,QAAwB,YAAY;AAEjD,MAAMC,OAAO;AACX,aAAa;AACf;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,8BAAgBL,WAC3B,SAASK,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,OAAO,QAAQ,EACfC,QAAQ,EACRC,WAAWD,WAAWE,YAAY,CAAC,EACnCC,OAAO,EACPC,YAAYT,IAAI,EAChBU,SAAS,EACTC,UAAUC,YAAY,EACtBC,aAAa,EACb,GAAGC,WACJ,GAAGZ;IACJ,MAAM,EAAEa,QAAQ,EAAEC,OAAO,EAAE,GAAGnB,sBAAsB;QAClD,GAAGiB,SAAS;QACZG,MAAMJ,gBAAgB,SAASN;IACjC;IACA,MAAMI,WAAWb,0BAA0Bc;IAE3C,qBACE,MAACb;QACE,GAAGe,SAAS;QACZ,GAAGC,QAAQ;QACZG,iBAAeb,YAAYE;QAC3BJ,KAAKA;QACLC,MAAMA;QACNE,UAAUA;QACVI,WAAWf,IAAI,uBAAuBe;QACtCF,SAAS,CAACW;YACR,IAAId,UAAU;gBACZ;YACF;YAEAG,QAAQW;QACV;QACAV,WAAW,CAACU;YACVV,UAAUU;YACV,IAAId,UAAU;gBACZ;YACF;YAEA,MAAMe,UAAUD,MAAME,GAAG,KAAK;YAC9B,IAAID,WAAWD,MAAME,GAAG,KAAK,SAAS;gBACpC,IAAID,SAAS;oBACXD,MAAMG,cAAc;gBACtB;gBAEAH,MAAMI,aAAa,CAACC,KAAK;YAC3B;QACF;;YAECb;YACAK;;;AAGP,GACA"}

package/dist/card/_card.scss

@@ -1,3 +1,7 @@
+////
+/// @group card
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../theme/theme";
@@ -6,116 +10,117 @@
 @use "../divider/divider";
 @use "../interaction/interaction";
 
-// Set to `true` to disable all the styles
-// @type boolean
+/// 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
+/// 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
+/// 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;
 
-// Set to `true` to disable the raisable card styles where hovering a card
-// increases the elevation/box-shadow.
-//
-// @type boolean
+/// 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
+/// Set to `true` to disable the clickable card styles
+/// @type Boolean
 $disable-clickable: false !default;
 
-// Set to `true` to disable the styles for adding additional padding to the
-// last `CardContent` that exists
-// @type boolean
+/// 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
+/// The default card box-shadow elevation
+/// @type Number
 $elevation: 2 !default;
 
-// The default card raisable starting box-shadow elevation
-// @type number
+/// 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
+/// 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
+/// 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
+/// 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
+/// 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
+/// 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
+/// 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
+/// 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
+/// The default border-radius for bordered cards
+/// @type Number
 $border-radius: 0.25rem !default;
 
-// The default padding to apply to `CardHeader`
-// @type number
+/// The default padding to apply to `CardHeader`
+/// @type Number
 $header-padding: 1rem !default;
 
-// The default padding-top to apply to `CardHeader`
-// @type number
+/// 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
+/// 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
+/// 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
+/// The default padding-bottom to apply to the `CardContent` when it is the last
+/// child and the `$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`
+/// The default padding to apply to the `CardFooter`
+/// @type Number
 $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
+/// 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
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - 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 {
@@ -125,38 +130,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.
+/// @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
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - 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
+/// 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
+/// 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
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(background-color, $background-color);
@@ -164,10 +169,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
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - 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) {

package/dist/chip/Chip.d.ts

@@ -127,7 +127,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement>, Comp
 /**
  * @example Simple Example
  * ```tsx
- * import { Chip } from "@react-md/core";
+ * import { Chip } from "@react-md/core/chip/Chip";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -137,7 +137,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement>, Comp
  *
  * @example Outlined Example
  * ```tsx
- * import { Chip } from "@react-md/core";
+ * import { Chip } from "@react-md/core/chip/Chip";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -147,7 +147,8 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement>, Comp
  *
  * @example Addons Example
  * ```tsx
- * import { Avatar, Chip } from "@react-md/core";
+ * import { Avatar } from "@react-md/core/avatar/Avatar";
+ * import { Chip } from "@react-md/core/chip/Chip";
  * import AddCircleIcon from "@react-md/material-icons/AddCircleIcon";
  * import type { ReactElement } from "react";
  *
@@ -167,6 +168,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement>, Comp
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/chip | Chip Demos}
  * @since 6.0.0 Renamed the `noninteractable` prop to
  * `noninteractive`.
  */

package/dist/chip/Chip.js

@@ -10,7 +10,7 @@ import { chip, chipContent } from "./styles.js";
 /**
  * @example Simple Example
  * ```tsx
- * import { Chip } from "@react-md/core";
+ * import { Chip } from "@react-md/core/chip/Chip";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -20,7 +20,7 @@ import { chip, chipContent } from "./styles.js";
  *
  * @example Outlined Example
  * ```tsx
- * import { Chip } from "@react-md/core";
+ * import { Chip } from "@react-md/core/chip/Chip";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -30,7 +30,8 @@ import { chip, chipContent } from "./styles.js";
  *
  * @example Addons Example
  * ```tsx
- * import { Avatar, Chip } from "@react-md/core";
+ * import { Avatar } from "@react-md/core/avatar/Avatar";
+ * import { Chip } from "@react-md/core/chip/Chip";
  * import AddCircleIcon from "@react-md/material-icons/AddCircleIcon";
  * import type { ReactElement } from "react";
  *
@@ -50,6 +51,7 @@ import { chip, chipContent } from "./styles.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/chip | Chip Demos}
  * @since 6.0.0 Renamed the `noninteractable` prop to
  * `noninteractive`.
  */ export const Chip = /*#__PURE__*/ forwardRef(function Chip(props, ref) {

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>, 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":"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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 { 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/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://next.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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"}