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

package/dist/badge/_badge.scss

@@ -1,3 +1,7 @@
+////
+/// @group badge
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../theme/a11y";
@@ -5,61 +9,61 @@
 @use "../theme/theme";
 @use "../typography/typography";
 
-// 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 styles for the greyscale theme only
-// @type boolean
+/// 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
+/// 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
+/// 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
+/// 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
+/// The default font size which is merged into the `$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
+/// 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
+/// An optional `top` offset override. When this is `null` or equal to the
+/// `offset`, it will not be set and fallback to the `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
+/// An optional `right` offset override. When this is `null` or equal to the
+/// `offset`, it will not be set and fallback to the `offset`
+/// instead.
+/// @type Number
 $offset-right: $offset !default;
 
-// The default border radius
-// @type number
+/// The default border radius
+/// @type Number
 $border-radius: 50% !default;
 
-// The default typography to use
-// @type Map
+/// The default typography to use
+/// @type Map
 $typography: map.merge(
   map.remove(typography.$body-1-styles, line-height, font-size),
   (
@@ -67,44 +71,44 @@ $typography: map.merge(
   )
 ) !default;
 
-// The background color for the greyscale theme when using the global light
-// theme
-// @type Color
+/// 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
+/// 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
+/// 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
+/// 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
+/// 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
+/// 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
+/// 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,
@@ -114,9 +118,9 @@ $variables: (
   offset-right
 );
 
-// @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, "badge");
   @if $fallback {
@@ -126,24 +130,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.
+/// @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
+/// @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 {
     @if $light-theme-greyscale-background-color !=
@@ -160,7 +164,7 @@ $variables: (
   }
 }
 
-// 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 {
     @if $light-theme-greyscale-background-color !=
@@ -178,7 +182,7 @@ $variables: (
   }
 }
 
-// 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(greyscale-background-color, $greyscale-background-color);
@@ -194,10 +198,10 @@ $variables: (
   }
 }
 
-// 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(badge, $disable-layer) {

package/dist/box/Box.d.ts

@@ -23,7 +23,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
  * ```
  *
  * ```tsx
- * import { Box } from "@react-md/core";
+ * import { Box } from "@react-md/core/box/Box";
  * import type { ReactElement } from "react";
  *
  * export default function Example(): ReactElement {
@@ -51,7 +51,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
  * ```
  *
  * ```tsx
- * import { Box } from "@react-md/core";
+ * import { Box } from "@react-md/core/box/Box";
  * import type { ReactElement } from "react";
  *
  * export default function Example(): ReactElement {
@@ -85,7 +85,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
  * ```
  *
  * ```tsx
- * import { Box } from "@react-md/core";
+ * import { Box } from "@react-md/core/box/Box";
  * import type { ReactElement } from "react";
  *
  * export default function Example(): ReactElement {
@@ -101,6 +101,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/box | Box Demos}
  * @since 6.0.0
  */
 export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/box/Box.js

@@ -19,7 +19,7 @@ import { box } from "./styles.js";
  * ```
  *
  * ```tsx
- * import { Box } from "@react-md/core";
+ * import { Box } from "@react-md/core/box/Box";
  * import type { ReactElement } from "react";
  *
  * export default function Example(): ReactElement {
@@ -47,7 +47,7 @@ import { box } from "./styles.js";
  * ```
  *
  * ```tsx
- * import { Box } from "@react-md/core";
+ * import { Box } from "@react-md/core/box/Box";
  * import type { ReactElement } from "react";
  *
  * export default function Example(): ReactElement {
@@ -81,7 +81,7 @@ import { box } from "./styles.js";
  * ```
  *
  * ```tsx
- * import { Box } from "@react-md/core";
+ * import { Box } from "@react-md/core/box/Box";
  * import type { ReactElement } from "react";
  *
  * export default function Example(): ReactElement {
@@ -97,6 +97,7 @@ import { box } from "./styles.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/box | Box Demos}
  * @since 6.0.0
  */ export const Box = /*#__PURE__*/ forwardRef(function Box(props, ref) {
     const { style: propStyle, className, children, align, grid, gridName, justify, stacked, reversed, gridColumns, gridAutoRows, fullWidth, disableGap, disableWrap, disablePadding, ...remaining } = props;

package/dist/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type BoxOptions, box } 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      gridAutoRows,\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          gridAutoRows,\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","gridAutoRows","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA0BC,GAAG,QAAQ,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,YAAY,EACZC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGlB;IAEJ,IAAIE,QAAQC;IACZ,IAAI,OAAOS,gBAAgB,UAAU;QACnCV,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBS;QACvB;IACF;IAEA,qBACE,KAACO;QACE,GAAGD,SAAS;QACbhB,OAAOA;QACPD,KAAKA;QACLG,WAAWN,IAAI;YACbM;YACAU;YACAP;YACAG;YACAF;YACAI;YACAC;YACAP;YACAG;YACAE;YACAI;YACAC;YACAC;QACF;kBAECZ;;AAGP,GACA"}
+{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type BoxOptions, box } 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/box/Box\";\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/box/Box\";\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/box/Box\";\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 * @see {@link https://next.react-md.dev/components/box | Box Demos}\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      gridAutoRows,\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          gridAutoRows,\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","gridAutoRows","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA0BC,GAAG,QAAQ,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGC,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,YAAY,EACZC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGlB;IAEJ,IAAIE,QAAQC;IACZ,IAAI,OAAOS,gBAAgB,UAAU;QACnCV,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBS;QACvB;IACF;IAEA,qBACE,KAACO;QACE,GAAGD,SAAS;QACbhB,OAAOA;QACPD,KAAKA;QACLG,WAAWN,IAAI;YACbM;YACAU;YACAP;YACAG;YACAF;YACAI;YACAC;YACAP;YACAG;YACAE;YACAI;YACAC;YACAC;QACF;kBAECZ;;AAGP,GACA"}

package/dist/box/_box.scss

@@ -1,100 +1,104 @@
+////
+/// @group box
+////
+
 @use "sass:map";
 @use "../utils";
 
-// 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 all the styles for stacking items using
-// `flex-direction: column` and `flex-direction: column-reverse`.
-// @type boolean
+/// Set to `true` to disable all the styles for stacking items using
+/// `flex-direction: column` and `flex-direction: column-reverse`.
+/// @type Boolean
 $disable-stacked: false !default;
 
-// Set to `true` to disable all the `flex-direction: row-reverse` and
-// `flex-direction: column-reverse` styles.
-// @type boolean
+/// Set to `true` to disable all the `flex-direction: row-reverse` and
+/// `flex-direction: column-reverse` styles.
+/// @type Boolean
 $disable-reversed: false !default;
 
-// Set to `true` to disable the css grid behavior for the box.
-// @type boolean
+/// Set to `true` to disable the css grid behavior for the box.
+/// @type Boolean
 $disable-grid: false !default;
 
-// Set to `true` to disable the styles for the auto grid columns behavior and
-// anything related to the {@link $item-min-size}.
-// @type boolean
+/// Set to `true` to disable the styles for the auto grid columns behavior and
+/// anything related to the `$item-min-size`.
+/// @type Boolean
 $disable-grid-columns: false !default;
 
-// Set to `true` to disable the styles for the `grid-auto-rows` behavior.
-// @type boolean
+/// Set to `true` to disable the styles for the `grid-auto-rows` behavior.
+/// @type Boolean
 $disable-grid-auto-rows: false !default;
 
-// This is the default `align-items` property value to set if you don't like
-// everything being centered by default. This value is always overridable using
-// the `alignItems` prop on the `Box` component.
-// @type string
+/// This is the default `align-items` property value to set if you don't like
+/// everything being centered by default. This value is always overridable using
+/// the `alignItems` prop on the `Box` component.
+/// @type String
 $default-align-items: center !default;
 
-// The additional class names to create for the `align-items` property. It
-// creates classes like:
-//
-// ```scss
-// .rmd-box--align-start {
-//   align-items: start;
-// }
-// ```
-//
-// @type List
+/// The additional class names to create for the `align-items` property. It
+/// creates classes like:
+///
+/// ```scss
+/// .rmd-box--align-start {
+///   align-items: start;
+/// }
+/// ```
+///
+/// @type List
 $align-items: (start end stretch) !default;
 
-// The additional class names to create for the `justify-content` property. It
-// creates classes like:
-//
-// ```scss
-// .rmd-box--justify-start {
-//   justify-content: start;
-// }
-// ```
-//
-// @type List
+/// The additional class names to create for the `justify-content` property. It
+/// creates classes like:
+///
+/// ```scss
+/// .rmd-box--justify-start {
+///   justify-content: start;
+/// }
+/// ```
+///
+/// @type List
 $justify-content: (
   start center end stretch space-around space-between space-evenly
 ) !default;
 
-// The default flex and grid gap to apply between each item
-// @type number
+/// The default flex and grid gap to apply between each item
+/// @type Number
 $gap: 1rem !default;
 
-// The default padding to apply to the container.
-// @type number
+/// The default padding to apply to the container.
+/// @type Number
 $padding: $gap !default;
 
-// The default minimum size for each grid item
-// @type number
+/// The default minimum size for each grid item
+/// @type Number
 $item-min-size: 8rem !default;
 
-// This is used to create custom reusable grid configurations throughout the
-// app. The custom grid can be used through the `gridName` prop.
-//
-// @example Simple Example
-// ```scss
-// $grids: (
-//   small: (
-//     min: 5rem
-//   ),
-//   medium: (
-//     min: 7rem,
-//     padding: 2rem,
-//     gap: 0.5rem
-//   )
-// );
-// ```
-//
-// @type Map
+/// This is used to create custom reusable grid configurations throughout the
+/// app. The custom grid can be used through the `gridName` prop.
+///
+/// @example scss - Simple Example<!-- no-compile -->
+///   @use "@react-md/core" with (
+///     $box-grids: (
+///       small: (
+///         min: 5rem
+///       ),
+///       medium: (
+///         min: 7rem,
+///         padding: 2rem,
+///         gap: 0.5rem
+///       )
+///     )
+///   );
+///
+/// @type Map
 $grids: () !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: (
   gap,
   padding,
@@ -105,9 +109,9 @@ $variables: (
   auto-rows-height
 );
 
-// @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, "box");
   @if $fallback {
@@ -117,41 +121,37 @@ $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.
+/// @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, "box")}: #{$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);
 }
 
-// Generates the styles for a custom grid by updating the css variables.
-//
-// @example Simple Example
-// ```scss
-// @use "@react-md/core";
-//
-// .container {
-//   @include core.box-custom-grid(
-//     $min: 20rem,
-//     $padding: 0.25rem,
-//     $gap: 0.725rem
-//   );
-// }
-// ```
-//
-// @param {number} min - An optional item min size to override
-// @param {number} padding - An optional container padding to override
-// @param {number} gap - An optional gap between each item to override
+/// Generates the styles for a custom grid by updating the css variables.
+///
+/// @example scss - Simple Example
+///   .container {
+///     @include custom-grid(
+///       $min: 20rem,
+///       $padding: 0.25rem,
+///       $gap: 0.725rem
+///     );
+///   }
+///
+/// @param {Number} min [null] - An optional item min size to override
+/// @param {Number} padding [null] - An optional container padding to override
+/// @param {Number} gap [null] - An optional gap between each item to override
 @mixin custom-grid($min: null, $padding: null, $gap: null) {
   @if $min {
     @include set-var(item-min-size, $min);
@@ -166,33 +166,29 @@ $variables: (
   }
 }
 
-// Generates the styles for a custom grid by updating the css variables.
-//
-// @example Simple Example
-// ```scss
-// @use "@react-md/core";
-//
-// .container {
-//   @include core.box-custom-grid-class(
-//     $selector: '&--custom',
-//     $min: 20rem,
-//     $padding: 0.25rem,
-//     $gap: 0.725rem
-//   );
-// }
-// ```
-//
-// @param {string} selector - The selector to use to update the grid styles.
-// @param {number} min - An optional item min size to override
-// @param {number} padding - An optional container padding to override
-// @param {number} gap - An optional gap between each item to override
+/// Generates the styles for a custom grid by updating the css variables.
+///
+/// @example scss - Simple Example
+///   .container {
+///     @include custom-grid-class(
+///       $selector: '&--custom',
+///       $min: 20rem,
+///       $padding: 0.25rem,
+///       $gap: 0.725rem
+///     );
+///   }
+///
+/// @param {String} selector - The selector to use to update the grid styles.
+/// @param {Number} min [null] - An optional item min size to override
+/// @param {Number} padding [null] - An optional container padding to override
+/// @param {Number} gap [null] - An optional gap between each item to override
 @mixin custom-grid-class($selector, $min: null, $padding: null, $gap: null) {
   #{$selector} {
     @include custom-grid($min, $padding, $gap);
   }
 }
 
-// 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(gap, $gap);
@@ -202,10 +198,10 @@ $variables: (
   }
 }
 
-// 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(box, $disable-layer) {