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

package/dist/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\n *\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color = \"\",\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img: ReactNode;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color = \"\",\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img: ReactNode;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}

package/dist/avatar/_avatar.scss

@@ -6,22 +6,70 @@
 @use "../typography/typography";
 @use "../icon/icon";
 
+// Set to `true` to disable all the styles
+// @type boolean
 $disable-everything: false !default;
+
+// Set to `true` to disable updating the icon color within avatars to inherit
+// the current color by default.
+// @type boolean
 $disable-icon: false !default;
+
+// Set to `true` to disable allowing the avatar to be sized as an icon.
+// @type boolean
 $disable-icon-size: false !default;
+
+// Set to `true` to disable the img styling when `src` or `imgProps` are
+// provided to the avatar.
+// @type boolean
 $disable-image: false !default;
+
+// Set to `true` to disable automatically updating all `img` elements that
+// appear in an avatar to be responsive.
+// @type boolean
 $disable-auto-image: false !default;
 
+// The default text color
+// @type Color
 $color: colors.$grey-100 !default;
+
+// The default background color
+// @type Color
 $background-color: colors.$grey-700 !default;
+
+// The default line height
+// @type number
 $line-height: map.get(typography.$subtitle-1-styles, line-height) !default;
+
+// The default border color
+// @type Color
 $border-color: transparent !default;
+
+// The default border radius. If you want to make avatars be more square-like,
+// set this to something like 0.25rem.
+//
+// @type number
 $border-radius: 50% !default;
+
+// The default height and width
+// @type number
 $size: 2.5rem !default;
+
+// The default font size
+// @type number
 $font-size: 1.5rem !default;
+
+// The default height and width when sized as an icon
+// @type number
 $icon-sized-size: icon.get-var(size) !default;
+
+// The default font size when sized as an avatar
+// @type number
 $icon-sized-font-size: 0.75rem !default;
 
+// Some reasonable defaults for the avatar colors that ensure contrast ratios
+// are accessible between the background and foreground.
+// @type Map
 $default-colors: (
   red: colors.$red-a-700 colors.$red-50,
   pink: colors.$pink-600 colors.$white,
@@ -44,8 +92,26 @@ $default-colors: (
   blue-grey: colors.$blue-grey-700 colors.$blue-grey-50,
 );
 
-$colors: $default-colors !default;
-
+// Any custom colors to create. Each key is the class name suffix for the avatar
+// and each value should be an ordered list of: `background-color color`.
+//
+// This will automatically be merged with the {@link default-colors} so you can
+// set any value to `null` to remove it or provide the same key with different
+// values to override.
+//
+// @type Map
+$custom-colors: () !default;
+
+// The default colors that can be created for an avatar. This can be set to an
+// empty Map to create no color styles, a completely custom map, or merge with
+// the existing.
+//
+// @type Map
+$colors: map.merge($default-colors, $custom-colors) !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,
@@ -55,6 +121,9 @@ $variables: (
   font-size
 );
 
+// @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, "avatar");
   @if $fallback {
@@ -64,16 +133,32 @@ $variables: (
   @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, "avatar")}: #{$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);
 }
 
+// NOTE: You will need to enforce an acceptable color contrast yourself between
+// the background and foreground colors.
+//
+// @param {string} name - This will be used for the class name when
+// `$disable-prefix` is set to true, otherwise as `.rmd-avatar--${name}`.
+// @param {Color} color - The text color to use.
+// @param {Color} background-color - The background color to use
+// @param {boolean} disable-prefix - Set to `true` to disable the
+// `.rmd-avatar--` prefix for the class name
 @mixin custom-color($name, $color, $background-color, $disable-prefix: false) {
   $class-name: if($disable-prefix, $name, ".rmd-avatar--#{$name}");
 
@@ -83,6 +168,7 @@ $variables: (
   }
 }
 
+// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(background-color, $background-color);
@@ -94,6 +180,11 @@ $variables: (
   }
 }
 
+// Generates all the styles for the `Autocomplete` components 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(avatar, $disable-layer) {

package/dist/badge/Badge.d.ts

@@ -1,32 +1,11 @@
 import { type HTMLAttributes, type ReactNode } from "react";
-import { type BackgroundColor } from "../cssUtils.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-badge-size"?: string | number;
-        "--rmd-badge-offset"?: string | number;
-        "--rmd-badge-offset-top"?: string | number;
-        "--rmd-badge-offset-right"?: string | number;
-    }
-}
-/**
- * @since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
- * theme colors.
- */
-export type BadgeTheme = BackgroundColor | "greyscale" | "clear";
-export interface BadgeClassNameOptions {
-    className?: string;
-    /** @defaultValue `""greyscale` */
-    theme?: BadgeTheme;
-}
-export declare function badge(options?: BadgeClassNameOptions): string;
+import { type BadgeTheme } from "./styles.js";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    /** @defaultValue `""greyscale` */
+    /** @defaultValue `"greyscale"` */
     theme?: BadgeTheme;
     children: ReactNode;
 }
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";

package/dist/badge/Badge.js

@@ -1,22 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { cssUtils } from "../cssUtils.js";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-badge");
-export function badge(options = {}) {
-    const { className, theme = "greyscale" } = options;
-    const greyscale = theme === "greyscale";
-    const clear = theme === "clear";
-    return cnb(styles({
-        greyscale
-    }), cssUtils({
-        backgroundColor: !clear && !greyscale ? theme : undefined
-    }), className);
-}
+import { badge } from "./styles.js";
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";

package/dist/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cssUtils, type BackgroundColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\n\nexport function badge(options: BadgeClassNameOptions = {}): string {\n  const { className, theme = \"greyscale\" } = options;\n  const greyscale = theme === \"greyscale\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({ greyscale }),\n    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n    className\n  );\n}\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Within Buttons Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(props, ref) {\n    const { children, className, theme, ...remaining } = props;\n    return (\n      <span {...remaining} ref={ref} className={badge({ theme, className })}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined","Badge","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,QAAQ,QAA8B,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAenB,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOR,IACLI,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMM,sBAAQZ,WACnB,SAASY,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAET,SAAS,EAAEC,KAAK,EAAE,GAAGS,WAAW,GAAGH;IACrD,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAEF,KAAKA;QAAKR,WAAWF,MAAM;YAAEG;YAAOD;QAAU;kBAChES;;AAGP,GACA"}
+{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { badge, type BadgeTheme } from \"./styles.js\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"greyscale\"` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Within Buttons Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(props, ref) {\n    const { children, className, theme, ...remaining } = props;\n    return (\n      <span {...remaining} ref={ref} className={badge({ theme, className })}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","badge","Badge","props","ref","children","className","theme","remaining","span"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,KAAK,QAAyB,cAAc;AASrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,WAAW,GAAGL;IACrD,qBACE,KAACM;QAAM,GAAGD,SAAS;QAAEJ,KAAKA;QAAKE,WAAWL,MAAM;YAAEM;YAAOD;QAAU;kBAChED;;AAGP,GACA"}

package/dist/badge/_badge.scss

@@ -5,17 +5,61 @@
 @use "../theme/theme";
 @use "../typography/typography";
 
+// Set to `true` to disable all the styles
+// @type boolean
 $disable-everything: false !default;
+
+// Set to `true` to disable the styles for the greyscale theme only
+// @type boolean
 $disable-greyscale-theme: false !default;
+
+// Set to `true` to disable the styles for the primary theme only
+// @type boolean
 $disable-primary-theme: false !default;
+
+// Set to `true` to disable the styles for the secondary theme only
+// @type boolean
 $disable-secondary-theme: false !default;
 
+// The default height and width
+// @type number
 $size: 1.5rem !default;
+
+// The default font size which is merged into the {@link $typography} map.
+// @type number
 $font-size: 0.625rem !default;
+
+// The default `top` and `right` offset applied to badges that are positioned
+// absolutely in a relative container.
+//
+// The styles are setup like:
+//
+// ```scss
+// top: var(--rmd-badge-offset-top, var(--rmd-badge-offset))
+// right: var(--rmd-badge-offset-right, var(--rmd-badge-offset))
+// ```
+//
+// @type number
 $offset: 0 !default;
+
+// An optional `top` offset override. When this is `null` or equal to the
+// {@link offset}, it will not be set and fallback to the {@link offset}
+// instead.
+// @type number
 $offset-top: $offset !default;
+
+// An optional `right` offset override. When this is `null` or equal to the
+// {@link offset}, it will not be set and fallback to the {@link offset}
+// instead.
+// @type number
 $offset-right: $offset !default;
+
+// The default border radius
+// @type number
 $border-radius: 50% !default;
+
+// The default typography to use
+// @type Map
 $typography: map.merge(
   map.remove(typography.$body-1-styles, line-height, font-size),
   (
@@ -23,23 +67,44 @@ $typography: map.merge(
   )
 ) !default;
 
+// The background color for the greyscale theme when using the global light
+// theme
+// @type Color
 $light-theme-greyscale-background-color: #ccc !default;
+
+// The text color for the greyscale theme when using the global light theme
+// @type Color
 $light-theme-greyscale-color: a11y.contrast-color(
   $light-theme-greyscale-background-color
 ) !default;
+
+// The background color for the greyscale theme when using the global dark theme
+// @type Color
 $dark-theme-greyscale-background-color: colors.$grey-700 !default;
+
+// The text color for the greyscale theme when using the global dark theme
+// @type Color
 $dark-theme-greyscale-color: a11y.contrast-color(
   $dark-theme-greyscale-background-color
 ) !default;
+
+// The default greyscale background color
+// @type Color
 $greyscale-background-color: theme.get-default-color(
   $light-theme-greyscale-background-color,
   $dark-theme-greyscale-background-color
 ) !default;
+
+// The default greyscale text color
+// @type Color
 $greyscale-color: theme.get-default-color(
   $light-theme-greyscale-color,
   $dark-theme-greyscale-color
 ) !default;
 
+// The available configurable css variables and mostly used internally for the
+// `get-var`, `set-var`, and `use-var` utils.
+// @type List
 $variables: (
   greyscale-background-color,
   greyscale-color,
@@ -49,6 +114,9 @@ $variables: (
   offset-right
 );
 
+// @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, "badge");
   @if $fallback {
@@ -58,16 +126,24 @@ $variables: (
   @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, "badge")}: #{$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 {
     @if $light-theme-greyscale-background-color !=
@@ -84,6 +160,7 @@ $variables: (
   }
 }
 
+// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @if not $disable-everything {
     @if $light-theme-greyscale-background-color !=
@@ -101,21 +178,26 @@ $variables: (
   }
 }
 
+// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(greyscale-background-color, $greyscale-background-color);
     @include set-var(greyscale-color, $greyscale-color);
     @include set-var(size, $size);
     @include set-var(offset, $offset);
-    @if $offset != $offset-top {
+    @if $offset != $offset-top and $offset-top {
       @include set-var(offset-top, $offset-top);
     }
-    @if $offset != $offset-right {
+    @if $offset != $offset-right and $offset-right {
       @include set-var(offset-right, $offset-right);
     }
   }
 }
 
+// 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(badge, $disable-layer) {
@@ -123,7 +205,6 @@ $variables: (
         @include utils.map-to-styles($typography);
         @include use-var(height, size);
         @include use-var(width, size);
-        @include utils.auto-rtl(right, get-var(offset-right, get-var(offset)));
         @include use-var(top, offset-top, get-var(offset));
 
         align-items: center;
@@ -132,6 +213,7 @@ $variables: (
         justify-content: center;
         pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events
         position: absolute;
+        right: get-var(offset-right, get-var(offset));
 
         @if not $disable-greyscale-theme {
           &--greyscale {
@@ -139,6 +221,11 @@ $variables: (
             @include use-var(color, greyscale-color);
           }
         }
+
+        @include utils.rtl {
+          left: get-var(offset-right, get-var(offset));
+          right: auto;
+        }
       }
     }
   }

package/dist/badge/styles.d.ts

@@ -0,0 +1,26 @@
+import { type BackgroundColor } from "../cssUtils.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-badge-size"?: string | number;
+        "--rmd-badge-offset"?: string | number;
+        "--rmd-badge-offset-top"?: string | number;
+        "--rmd-badge-offset-right"?: string | number;
+    }
+}
+/**
+ * @since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
+ * theme colors.
+ */
+export type BadgeTheme = BackgroundColor | "greyscale" | "clear";
+/**
+ * @since 6.0.0
+ */
+export interface BadgeClassNameOptions {
+    className?: string;
+    /** @defaultValue `""greyscale` */
+    theme?: BadgeTheme;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function badge(options?: BadgeClassNameOptions): string;

package/dist/badge/styles.js

@@ -0,0 +1,18 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-badge");
+/**
+ * @since 6.0.0
+ */ export function badge(options = {}) {
+    const { className, theme = "greyscale" } = options;
+    const greyscale = theme === "greyscale";
+    const clear = theme === "clear";
+    return cnb(styles({
+        greyscale
+    }), cssUtils({
+        backgroundColor: !clear && !greyscale ? theme : undefined
+    }), className);
+}
+
+//# sourceMappingURL=styles.js.map

package/dist/badge/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/badge/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\n/**\n * @since 6.0.0\n */\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport function badge(options: BadgeClassNameOptions = {}): string {\n  const { className, theme = \"greyscale\" } = options;\n  const greyscale = theme === \"greyscale\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({ greyscale }),\n    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAkBnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOP,IACLG,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ"}

package/dist/box/Box.d.ts

@@ -6,8 +6,6 @@ import { type BoxOptions } from "./styles.js";
 export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
 }
 /**
- * **Server Component**
- *
  * The `Box` component is a wrapper around the CSS box model and should solve
  * most of your `flex` and `grid` layout requirements for responsive design.
  * There are pass-through props for all of the box module styling properties

package/dist/box/Box.js

@@ -2,8 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { box } from "./styles.js";
 /**
- * **Server Component**
- *
  * The `Box` component is a wrapper around the CSS box model and should solve
  * most of your `flex` and `grid` layout requirements for responsive design.
  * There are pass-through props for all of the box module styling properties
@@ -101,7 +99,7 @@ import { box } from "./styles.js";
  *
  * @since 6.0.0
  */ export const Box = /*#__PURE__*/ forwardRef(function Box(props, ref) {
-    const { className, children, align, grid = false, style: propStyle, gridName = "", justify, stacked = false, reversed = false, gridColumns = "fit", fullWidth = false, disableWrap = false, disablePadding = false, ...remaining } = props;
+    const { style: propStyle, className, children, align, grid, gridName, justify, stacked, reversed, gridColumns, fullWidth, disableGap, disableWrap, disablePadding, ...remaining } = props;
     let style = propStyle;
     if (typeof gridColumns === "number") {
         style = {
@@ -123,6 +121,7 @@ import { box } from "./styles.js";
             align,
             justify,
             reversed,
+            disableGap,
             disableWrap,
             disablePadding
         }),

package/dist/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { box, type BoxOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * **Server Component**\n *\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $box-grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      className,\n      children,\n      align,\n      grid = false,\n      style: propStyle,\n      gridName = \"\",\n      justify,\n      stacked = false,\n      reversed = false,\n      gridColumns = \"fit\",\n      fullWidth = false,\n      disableWrap = false,\n      disablePadding = false,\n      ...remaining\n    } = props;\n\n    let style = propStyle;\n    if (typeof gridColumns === \"number\") {\n      style = {\n        ...propStyle,\n        \"--rmd-box-columns\": gridColumns,\n      };\n    }\n\n    return (\n      <div\n        {...remaining}\n        style={style}\n        ref={ref}\n        className={box({\n          className,\n          fullWidth,\n          grid,\n          stacked,\n          gridName,\n          gridColumns,\n          align,\n          justify,\n          reversed,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","box","Box","props","ref","className","children","align","grid","style","propStyle","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,WAAW,EAAE,EACbC,OAAO,EACPC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGhB;IAEJ,IAAIM,QAAQC;IACZ,IAAI,OAAOK,gBAAgB,UAAU;QACnCN,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBK;QACvB;IACF;IAEA,qBACE,KAACK;QACE,GAAGD,SAAS;QACbV,OAAOA;QACPL,KAAKA;QACLC,WAAWJ,IAAI;YACbI;YACAW;YACAR;YACAK;YACAF;YACAI;YACAR;YACAK;YACAE;YACAG;YACAC;QACF;kBAECZ;;AAGP,GACA"}
+{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { box, type BoxOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $box-grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      style: propStyle,\n      className,\n      children,\n      align,\n      grid,\n      gridName,\n      justify,\n      stacked,\n      reversed,\n      gridColumns,\n      fullWidth,\n      disableGap,\n      disableWrap,\n      disablePadding,\n      ...remaining\n    } = props;\n\n    let style = propStyle;\n    if (typeof gridColumns === \"number\") {\n      style = {\n        ...propStyle,\n        \"--rmd-box-columns\": gridColumns,\n      };\n    }\n\n    return (\n      <div\n        {...remaining}\n        style={style}\n        ref={ref}\n        className={box({\n          className,\n          fullWidth,\n          grid,\n          stacked,\n          gridName,\n          gridColumns,\n          align,\n          justify,\n          reversed,\n          disableGap,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","box","Box","props","ref","style","propStyle","className","children","align","grid","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGjB;IAEJ,IAAIE,QAAQC;IACZ,IAAI,OAAOS,gBAAgB,UAAU;QACnCV,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBS;QACvB;IACF;IAEA,qBACE,KAACM;QACE,GAAGD,SAAS;QACbf,OAAOA;QACPD,KAAKA;QACLG,WAAWN,IAAI;YACbM;YACAS;YACAN;YACAG;YACAF;YACAI;YACAN;YACAG;YACAE;YACAG;YACAC;YACAC;QACF;kBAECX;;AAGP,GACA"}