npm - @carbon/layout - Versions diffs - 10.18.0-rc.0 → 10.18.0 - Mend

@carbon/layout 10.18.0-rc.0 → 10.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +0 -6
package/package.json +5 -4
package/scss/modules/generated/_fluid-spacing.scss +5 -5
package/scss/modules/generated/_spacing.scss +13 -13
package/docs/sass.md +0 -2791

package/docs/sass.md DELETED Viewed

@@ -1,2791 +0,0 @@
-# Sass API
-| Mark | Description                                                |
-| ---- | ---------------------------------------------------------- |
-| ✅   | Public functions, mixins, placeholders, and variables      |
-| ❌   | Private items - not supported outside package's build      |
-| ⚠️   | Deprecated items - may not be available in future releases |
-<!-- toc -->
-- [@carbon/layout](#carbonlayout)
-  - [✅carbon--grid-gutter [variable]](#carbon--grid-gutter-variable)
-  - [✅grid-gutter [variable]](#grid-gutter-variable)
-  - [✅carbon--grid-gutter--condensed [variable]](#carbon--grid-gutter--condensed-variable)
-  - [✅grid-gutter--condensed [variable]](#grid-gutter--condensed-variable)
-  - [✅carbon--grid-breakpoints [variable]](#carbon--grid-breakpoints-variable)
-  - [✅grid-breakpoints [variable]](#grid-breakpoints-variable)
-  - [✅carbon--breakpoint-next [function]](#carbon--breakpoint-next-function)
-  - [✅breakpoint-next [function]](#breakpoint-next-function)
-  - [✅carbon--breakpoint-prev [function]](#carbon--breakpoint-prev-function)
-  - [✅breakpoint-prev [function]](#breakpoint-prev-function)
-  - [✅carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
-  - [✅is-smallest-breakpoint [function]](#is-smallest-breakpoint-function)
-  - [✅carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
-  - [✅largest-breakpoint-name [function]](#largest-breakpoint-name-function)
-  - [✅breakpoint-infix [function]](#breakpoint-infix-function)
-  - [✅carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
-  - [✅breakpoint-up [mixin]](#breakpoint-up-mixin)
-  - [✅carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
-  - [✅breakpoint-down [mixin]](#breakpoint-down-mixin)
-  - [✅carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
-  - [✅breakpoint-between [mixin]](#breakpoint-between-mixin)
-  - [✅carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
-  - [✅largest-breakpoint [mixin]](#largest-breakpoint-mixin)
-  - [✅carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
-  - [✅breakpoint [mixin]](#breakpoint-mixin)
-  - [✅carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
-  - [✅carbon--container-01 [variable]](#carbon--container-01-variable)
-  - [✅carbon--container-02 [variable]](#carbon--container-02-variable)
-  - [✅carbon--container-03 [variable]](#carbon--container-03-variable)
-  - [✅carbon--container-04 [variable]](#carbon--container-04-variable)
-  - [✅carbon--container-05 [variable]](#carbon--container-05-variable)
-  - [✅carbon--container [variable]](#carbon--container-variable)
-  - [✅container-01 [variable]](#container-01-variable)
-  - [✅container-02 [variable]](#container-02-variable)
-  - [✅container-03 [variable]](#container-03-variable)
-  - [✅container-04 [variable]](#container-04-variable)
-  - [✅container-05 [variable]](#container-05-variable)
-  - [✅carbon--base-font-size [variable]](#carbon--base-font-size-variable)
-  - [✅base-font-size [variable]](#base-font-size-variable)
-  - [✅carbon--rem [function]](#carbon--rem-function)
-  - [✅rem [function]](#rem-function)
-  - [✅carbon--em [function]](#carbon--em-function)
-  - [✅em [function]](#em-function)
-  - [✅carbon--fluid-spacing-01 [variable]](#carbon--fluid-spacing-01-variable)
-  - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable)
-  - [✅carbon--fluid-spacing-02 [variable]](#carbon--fluid-spacing-02-variable)
-  - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable)
-  - [✅carbon--fluid-spacing-03 [variable]](#carbon--fluid-spacing-03-variable)
-  - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable)
-  - [✅carbon--fluid-spacing-04 [variable]](#carbon--fluid-spacing-04-variable)
-  - [✅fluid-spacing-04 [variable]](#fluid-spacing-04-variable)
-  - [✅carbon--fluid-spacing [variable]](#carbon--fluid-spacing-variable)
-  - [✅fluid-spacing [variable]](#fluid-spacing-variable)
-  - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable)
-  - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable)
-  - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable)
-  - [✅fluid-spacing-04 [variable]](#fluid-spacing-04-variable)
-  - [✅carbon--icon-size-01 [variable]](#carbon--icon-size-01-variable)
-  - [✅carbon--icon-size-02 [variable]](#carbon--icon-size-02-variable)
-  - [✅carbon--icon-size [variable]](#carbon--icon-size-variable)
-  - [✅icon-size-01 [variable]](#icon-size-01-variable)
-  - [✅icon-size-02 [variable]](#icon-size-02-variable)
-  - [✅carbon--get-column-width [function]](#carbon--get-column-width-function)
-  - [✅carbon--key-height-scales [variable]](#carbon--key-height-scales-variable)
-  - [✅carbon--key-height [function]](#carbon--key-height-function)
-  - [✅carbon--layout-01 [variable]](#carbon--layout-01-variable)
-  - [✅carbon--layout-02 [variable]](#carbon--layout-02-variable)
-  - [✅carbon--layout-03 [variable]](#carbon--layout-03-variable)
-  - [✅carbon--layout-04 [variable]](#carbon--layout-04-variable)
-  - [✅carbon--layout-05 [variable]](#carbon--layout-05-variable)
-  - [✅carbon--layout-06 [variable]](#carbon--layout-06-variable)
-  - [✅carbon--layout-07 [variable]](#carbon--layout-07-variable)
-  - [✅carbon--layout [variable]](#carbon--layout-variable)
-  - [✅layout-01 [variable]](#layout-01-variable)
-  - [✅layout-02 [variable]](#layout-02-variable)
-  - [✅layout-03 [variable]](#layout-03-variable)
-  - [✅layout-04 [variable]](#layout-04-variable)
-  - [✅layout-05 [variable]](#layout-05-variable)
-  - [✅layout-06 [variable]](#layout-06-variable)
-  - [✅layout-07 [variable]](#layout-07-variable)
-  - [✅carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable)
-  - [✅carbon--mini-units [function]](#carbon--mini-units-function)
-  - [✅carbon--spacing-01 [variable]](#carbon--spacing-01-variable)
-  - [✅spacing-01 [variable]](#spacing-01-variable)
-  - [✅carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
-  - [✅spacing-02 [variable]](#spacing-02-variable)
-  - [✅carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
-  - [✅spacing-03 [variable]](#spacing-03-variable)
-  - [✅carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
-  - [✅spacing-04 [variable]](#spacing-04-variable)
-  - [✅carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
-  - [✅spacing-05 [variable]](#spacing-05-variable)
-  - [✅carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
-  - [✅spacing-06 [variable]](#spacing-06-variable)
-  - [✅carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
-  - [✅spacing-07 [variable]](#spacing-07-variable)
-  - [✅carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
-  - [✅spacing-08 [variable]](#spacing-08-variable)
-  - [✅carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
-  - [✅spacing-09 [variable]](#spacing-09-variable)
-  - [✅carbon--spacing-10 [variable]](#carbon--spacing-10-variable)
-  - [✅spacing-10 [variable]](#spacing-10-variable)
-  - [✅carbon--spacing-11 [variable]](#carbon--spacing-11-variable)
-  - [✅spacing-11 [variable]](#spacing-11-variable)
-  - [✅carbon--spacing-12 [variable]](#carbon--spacing-12-variable)
-  - [✅spacing-12 [variable]](#spacing-12-variable)
-  - [✅carbon--spacing [variable]](#carbon--spacing-variable)
-  - [✅spacing [variable]](#spacing-variable)
-  - [✅spacing-01 [variable]](#spacing-01-variable)
-  - [✅spacing-02 [variable]](#spacing-02-variable)
-  - [✅spacing-03 [variable]](#spacing-03-variable)
-  - [✅spacing-04 [variable]](#spacing-04-variable)
-  - [✅spacing-05 [variable]](#spacing-05-variable)
-  - [✅spacing-06 [variable]](#spacing-06-variable)
-  - [✅spacing-07 [variable]](#spacing-07-variable)
-  - [✅spacing-08 [variable]](#spacing-08-variable)
-  - [✅spacing-09 [variable]](#spacing-09-variable)
-  - [✅spacing-10 [variable]](#spacing-10-variable)
-  - [✅spacing-11 [variable]](#spacing-11-variable)
-  - [✅spacing-12 [variable]](#spacing-12-variable)
-  - [✅map-deep-get [function]](#map-deep-get-function)
-  - [✅map-deep-get [function]](#map-deep-get-function)
-  - [✅carbon--key-by-index [function]](#carbon--key-by-index-function)
-  - [✅key-by-index [function]](#key-by-index-function)
-  - [✅last-map-item [function]](#last-map-item-function)
-  - [✅last-map-item [function]](#last-map-item-function)
-<!-- tocstop -->
-## @carbon/layout
-### ✅carbon--grid-gutter [variable]
-Carbon gutter size in rem
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--grid-gutter: carbon--rem(32px);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅grid-gutter [variable]
-Carbon gutter size in rem
-<details>
-<summary>Source code</summary>
-```scss
-$grid-gutter: convert.rem(32px);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--grid-gutter--condensed [variable]
-Carbon condensed gutter size in rem
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--grid-gutter--condensed: carbon--rem(1px);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅grid-gutter--condensed [variable]
-Carbon condensed gutter size in rem
-<details>
-<summary>Source code</summary>
-```scss
-$grid-gutter--condensed: convert.rem(1px);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--grid-breakpoints [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--grid-breakpoints: (
-  sm: (
-    columns: 4,
-    margin: 0,
-    width: carbon--rem(320px),
-  ),
-  md: (
-    columns: 8,
-    margin: carbon--rem(16px),
-    width: carbon--rem(672px),
-  ),
-  lg: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1056px),
-  ),
-  xlg: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1312px),
-  ),
-  max: (
-    columns: 16,
-    margin: carbon--rem(24px),
-    width: carbon--rem(1584px),
-  ),
-);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Map`
-### ✅grid-breakpoints [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$grid-breakpoints: (
-  sm: (
-    columns: 4,
-    margin: 0,
-    width: convert.rem(320px),
-  ),
-  md: (
-    columns: 8,
-    margin: convert.rem(16px),
-    width: convert.rem(672px),
-  ),
-  lg: (
-    columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1056px),
-  ),
-  xlg: (
-    columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1312px),
-  ),
-  max: (
-    columns: 16,
-    margin: convert.rem(24px),
-    width: convert.rem(1584px),
-  ),
-);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Map`
-### ✅carbon--breakpoint-next [function]
-Get the value of the next breakpoint, or null for the last breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--breakpoint-next(
-  $name,
-  $breakpoints: $carbon--grid-breakpoints,
-  $breakpoint-names: map-keys($breakpoints)
-) {
-  $n: index($breakpoint-names, $name);
-  @if $n != null and $n < length($breakpoint-names) {
-    @return nth($breakpoint-names, $n + 1);
-  }
-  @return null;
-}
-```
-</details>
-- **Parameters**:
-| Name                | Description                                                                                                     | Type     | Default value               |
-| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------------- |
-| `$name`             | The name of the brekapoint                                                                                      | `String` | —                           |
-| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$carbon--grid-breakpoints` |
-| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)`    |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String`
-### ✅breakpoint-next [function]
-Get the value of the next breakpoint, or null for the last breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@function breakpoint-next(
-  $name,
-  $breakpoints: $grid-breakpoints,
-  $breakpoint-names: map-keys($breakpoints)
-) {
-  $n: list.index($breakpoint-names, $name);
-  @if $n != null and $n < list.length($breakpoint-names) {
-    @return list.nth($breakpoint-names, $n + 1);
-  }
-  @return null;
-}
-```
-</details>
-- **Parameters**:
-| Name                | Description                                                                                                     | Type     | Default value            |
-| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ |
-| `$name`             | The name of the brekapoint                                                                                      | `String` | —                        |
-| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints`      |
-| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String`
-### ✅carbon--breakpoint-prev [function]
-Get the value of the previous breakpoint, or null for the first breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--breakpoint-prev(
-  $name,
-  $breakpoints: $carbon--grid-breakpoints,
-  $breakpoint-names: map-keys($breakpoints)
-) {
-  $n: index($breakpoint-names, $name);
-  @if $n != null and $n > 1 {
-    @return nth($breakpoint-names, $n - 1);
-  }
-  @return null;
-}
-```
-</details>
-- **Parameters**:
-| Name                | Description                                                                                                     | Type     | Default value               |
-| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------------- |
-| `$name`             | The name of the brekapoint                                                                                      | `String` | —                           |
-| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$carbon--grid-breakpoints` |
-| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)`    |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String`
-### ✅breakpoint-prev [function]
-Get the value of the previous breakpoint, or null for the first breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@function breakpoint-prev(
-  $name,
-  $breakpoints: $grid-breakpoints,
-  $breakpoint-names: map-keys($breakpoints)
-) {
-  $n: list.index($breakpoint-names, $name);
-  @if $n != null and $n > 1 {
-    @return list.nth($breakpoint-names, $n - 1);
-  }
-  @return null;
-}
-```
-</details>
-- **Parameters**:
-| Name                | Description                                                                                                     | Type     | Default value            |
-| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ |
-| `$name`             | The name of the brekapoint                                                                                      | `String` | —                        |
-| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints`      |
-| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String`
-### ✅carbon--is-smallest-breakpoint [function]
-Check to see if the given breakpoint name
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--is-smallest-breakpoint(
-  $name,
-  $breakpoints: $carbon--grid-breakpoints
-) {
-  @return index(map-keys($breakpoints), $name) == 1;
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                                                                                     | Type     | Default value               |
-| -------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------------- |
-| `$name`        | The name of the brekapoint                                                                                      | `String` | —                           |
-| `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$carbon--grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Bool`
-- **Used by**:
-  - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
-### ✅is-smallest-breakpoint [function]
-Check to see if the given breakpoint name
-<details>
-<summary>Source code</summary>
-```scss
-@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
-  @return list.index(map.keys($breakpoints), $name) == 1;
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                                                                                     | Type     | Default value       |
-| -------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------- |
-| `$name`        | The name of the brekapoint                                                                                      | `String` | —                   |
-| `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Bool`
-- **Used by**:
-  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
-### ✅carbon--largest-breakpoint-name [function]
-Returns the largest breakpoint name
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--largest-breakpoint-name(
-  $breakpoints: $carbon--grid-breakpoints
-) {
-  $total-breakpoints: length($breakpoints);
-  @return carbon--key-by-index($breakpoints, $total-breakpoints);
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type  | Default value               |
-| -------------- | ---------------------------------------------- | ----- | --------------------------- |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String`
-- **Requires**:
-  - [carbon--key-by-index [function]](#carbon--key-by-index-function)
-- **Used by**:
-  - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
-### ✅largest-breakpoint-name [function]
-Returns the largest breakpoint name
-<details>
-<summary>Source code</summary>
-```scss
-@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
-  $total-breakpoints: list.length($breakpoints);
-  @return key-by-index($breakpoints, $total-breakpoints);
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type  | Default value       |
-| -------------- | ---------------------------------------------- | ----- | ------------------- |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String`
-- **Requires**:
-  - [key-by-index [function]](#key-by-index-function)
-- **Used by**:
-  - [largest-breakpoint [mixin]](#largest-breakpoint-mixin)
-### ✅breakpoint-infix [function]
-Get the infix for a given breakpoint in a list of breakpoints. Usesful for
-generate the size part in a selector, for example: `.prefix--col-sm-2`.
-<details>
-<summary>Source code</summary>
-```scss
-@function breakpoint-infix($name) {
-  @return '-#{$name}';
-}
-```
-</details>
-- **Parameters**:
-| Name    | Description                | Type     | Default value |
-| ------- | -------------------------- | -------- | ------------- |
-| `$name` | The name of the breakpoint | `String` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String`
-### ✅carbon--breakpoint-infix [function]
-Get the infix for a given breakpoint in a list of breakpoints. Usesful for
-generate the size part in a selector, for example: `.prefix--col-sm-2`.
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--breakpoint-infix($name) {
-  @return '-#{$name}';
-}
-```
-</details>
-- **Parameters**:
-| Name    | Description                | Type     | Default value |
-| ------- | -------------------------- | -------- | ------------- |
-| `$name` | The name of the breakpoint | `String` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String`
-### ✅breakpoint-up [mixin]
-Generate a media query from the width of the given breakpoint to infinity
-<details>
-<summary>Source code</summary>
-```scss
-@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-  @if meta.type-of($name) == 'number' {
-    @media (min-width: $name) {
-      @content;
-    }
-  } @else if map.has-key($breakpoints, $name) {
-    $breakpoint: map.get($breakpoints, $name);
-    $width: map.get($breakpoint, width);
-    @if is-smallest-breakpoint($name, $breakpoints) {
-      @content;
-    } @else {
-      @media (min-width: $width) {
-        @content;
-      }
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type               | Default value       |
-| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
-| `$name`        | —                                              | `String \| Number` | —                   |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Requires**:
-  - [is-smallest-breakpoint [function]](#is-smallest-breakpoint-function)
-- **Used by**:
-  - [breakpoint-between [mixin]](#breakpoint-between-mixin)
-  - [breakpoint [mixin]](#breakpoint-mixin)
-### ✅carbon--breakpoint-up [mixin]
-Generate a media query from the width of the given breakpoint to infinity
-<details>
-<summary>Source code</summary>
-```scss
-@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
-  @if type-of($name) == 'number' {
-    @media (min-width: $name) {
-      @content;
-    }
-  } @else if map-has-key($breakpoints, $name) {
-    $breakpoint: map-get($breakpoints, $name);
-    $width: map-get($breakpoint, width);
-    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
-      @content;
-    } @else {
-      @media (min-width: $width) {
-        @content;
-      }
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type               | Default value               |
-| -------------- | ---------------------------------------------- | ------------------ | --------------------------- |
-| `$name`        | —                                              | `String \| Number` | —                           |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$carbon--grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Requires**:
-  - [carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
-- **Used by**:
-  - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
-  - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
-### ✅breakpoint-down [mixin]
-Generate a media query for the maximum width of the given styles
-<details>
-<summary>Source code</summary>
-```scss
-@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-  @if meta.type-of($name) == 'number' {
-    @media (max-width: $name) {
-      @content;
-    }
-  } @else if map.has-key($breakpoints, $name) {
-    // We borrow this logic from bootstrap for specifying the value of the
-    // max-width. The maximum width is calculated by finding the breakpoint and
-    // subtracting .02 from its value. This value is used instead of .01 to
-    // avoid rounding issues in Safari
-    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
-    $breakpoint: map.get($breakpoints, $name);
-    $width: map.get($breakpoint, width) - 0.02;
-    @media (max-width: $width) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type               | Default value       |
-| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
-| `$name`        | —                                              | `String \| Number` | —                   |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Used by**:
-  - [breakpoint-between [mixin]](#breakpoint-between-mixin)
-### ✅carbon--breakpoint-down [mixin]
-Generate a media query for the maximum width of the given styles
-<details>
-<summary>Source code</summary>
-```scss
-@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
-  @if type-of($name) == 'number' {
-    @media (max-width: $name) {
-      @content;
-    }
-  } @else if map-has-key($breakpoints, $name) {
-    // We borrow this logic from bootstrap for specifying the value of the
-    // max-width. The maximum width is calculated by finding the breakpoint and
-    // subtracting .02 from its value. This value is used instead of .01 to
-    // avoid rounding issues in Safari
-    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
-    $breakpoint: map-get($breakpoints, $name);
-    $width: map-get($breakpoint, width) - 0.02;
-    @media (max-width: $width) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type               | Default value               |
-| -------------- | ---------------------------------------------- | ------------------ | --------------------------- |
-| `$name`        | —                                              | `String \| Number` | —                           |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$carbon--grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Used by**:
-  - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
-### ✅breakpoint-between [mixin]
-Generate a media query for the range between the lower and upper breakpoints
-<details>
-<summary>Source code</summary>
-```scss
-@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-  $is-number-lower: meta.type-of($lower) == 'number';
-  $is-number-upper: meta.type-of($upper) == 'number';
-  $min: if($is-number-lower, $lower, map.get($breakpoints, $lower));
-  $max: if($is-number-upper, $upper, map.get($breakpoints, $upper));
-  @if $min and $max {
-    $min-width: if(not $is-number-lower and $min, map.get($min, width), $min);
-    $max-width: if(not $is-number-upper and $max, map.get($max, width), $max);
-    @media (min-width: $min-width) and (max-width: $max-width) {
-      @content;
-    }
-  } @else if $min != null and $max == null {
-    @include breakpoint-up($lower) {
-      @content;
-    }
-  } @else if $min == null and $max != null {
-    @include breakpoint-down($upper) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).';
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type               | Default value       |
-| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
-| `$lower`       | —                                              | `String \| Number` | —                   |
-| `$upper`       | —                                              | `String \| Number` | —                   |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Requires**:
-  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
-  - [breakpoint-down [mixin]](#breakpoint-down-mixin)
-### ✅carbon--breakpoint-between [mixin]
-Generate a media query for the range between the lower and upper breakpoints
-<details>
-<summary>Source code</summary>
-```scss
-@mixin carbon--breakpoint-between(
-  $lower,
-  $upper,
-  $breakpoints: $carbon--grid-breakpoints
-) {
-  $is-number-lower: type-of($lower) == 'number';
-  $is-number-upper: type-of($upper) == 'number';
-  $min: if($is-number-lower, $lower, map-get($breakpoints, $lower));
-  $max: if($is-number-upper, $upper, map-get($breakpoints, $upper));
-  @if $min and $max {
-    $min-width: if(not $is-number-lower and $min, map-get($min, width), $min);
-    $max-width: if(not $is-number-upper and $max, map-get($max, width), $max);
-    @media (min-width: $min-width) and (max-width: $max-width) {
-      @content;
-    }
-  } @else if $min != null and $max == null {
-    @include carbon--breakpoint-up($lower) {
-      @content;
-    }
-  } @else if $min == null and $max != null {
-    @include carbon--breakpoint-down($upper) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).';
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type               | Default value               |
-| -------------- | ---------------------------------------------- | ------------------ | --------------------------- |
-| `$lower`       | —                                              | `String \| Number` | —                           |
-| `$upper`       | —                                              | `String \| Number` | —                           |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$carbon--grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Requires**:
-  - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
-  - [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
-### ✅largest-breakpoint [mixin]
-Generate media query for the largest breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
-  @include breakpoint(largest-breakpoint-name()) {
-    @content;
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type  | Default value       |
-| -------------- | ---------------------------------------------- | ----- | ------------------- |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Requires**:
-  - [breakpoint [mixin]](#breakpoint-mixin)
-  - [largest-breakpoint-name [function]](#largest-breakpoint-name-function)
-### ✅carbon--largest-breakpoint [mixin]
-Generate media query for the largest breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
-  @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
-    @content;
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type  | Default value               |
-| -------------- | ---------------------------------------------- | ----- | --------------------------- |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Requires**:
-  - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
-  - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
-### ✅breakpoint [mixin]
-Generate a media query for a given breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
-  @include breakpoint-up($name, $breakpoints) {
-    @content;
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type               | Default value       |
-| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
-| `$name`        | —                                              | `String \| Number` | —                   |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Requires**:
-  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
-- **Used by**:
-  - [largest-breakpoint [mixin]](#largest-breakpoint-mixin)
-### ✅carbon--breakpoint [mixin]
-Generate a media query for a given breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
-  @include carbon--breakpoint-up($name, $breakpoints) {
-    @content;
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description                                    | Type               | Default value               |
-| -------------- | ---------------------------------------------- | ------------------ | --------------------------- |
-| `$name`        | —                                              | `String \| Number` | —                           |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$carbon--grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Requires**:
-  - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
-- **Used by**:
-  - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
-### ✅carbon--container-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--container-01: 1.5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `container-01`
-### ✅carbon--container-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--container-02: 2rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `container-02`
-### ✅carbon--container-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--container-03: 2.5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `container-03`
-### ✅carbon--container-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--container-04: 3rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `container-04`
-### ✅carbon--container-05 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--container-05: 4rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `container-05`
-### ✅carbon--container [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--container: (
-  $carbon--container-01,
-  $carbon--container-02,
-  $carbon--container-03,
-  $carbon--container-04,
-  $carbon--container-05
-);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `List`
-### ✅container-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$container-01: $carbon--container-01;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--container-01`
-### ✅container-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$container-02: $carbon--container-02;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--container-02`
-### ✅container-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$container-03: $carbon--container-03;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--container-03`
-### ✅container-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$container-04: $carbon--container-04;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--container-04`
-### ✅container-05 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$container-05: $carbon--container-05;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--container-05`
-### ✅carbon--base-font-size [variable]
-Default font size
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--base-font-size: 16px;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Used by**:
-  - [carbon--rem [function]](#carbon--rem-function)
-  - [carbon--em [function]](#carbon--em-function)
-### ✅base-font-size [variable]
-Default font size
-<details>
-<summary>Source code</summary>
-```scss
-$base-font-size: 16px;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Used by**:
-  - [rem [function]](#rem-function)
-  - [em [function]](#em-function)
-### ✅carbon--rem [function]
-Convert a given px unit to a rem unit
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--rem($px) {
-  @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
-  }
-  @return ($px / $carbon--base-font-size) * 1rem;
-}
-```
-</details>
-- **Parameters**:
-| Name  | Description         | Type     | Default value |
-| ----- | ------------------- | -------- | ------------- |
-| `$px` | Number with px unit | `Number` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Number` Number with rem unit
-- **Requires**:
-  - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
-- **Used by**:
-  - [carbon--mini-units [function]](#carbon--mini-units-function)
-### ✅rem [function]
-Convert a given px unit to a rem unit
-<details>
-<summary>Source code</summary>
-```scss
-@function rem($px) {
-  @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
-  }
-  @return ($px / $base-font-size) * 1rem;
-}
-```
-</details>
-- **Parameters**:
-| Name  | Description         | Type     | Default value |
-| ----- | ------------------- | -------- | ------------- |
-| `$px` | Number with px unit | `Number` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Number` Number with rem unit
-- **Requires**:
-  - [base-font-size [variable]](#base-font-size-variable)
-### ✅carbon--em [function]
-Convert a given px unit to a em unit
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--em($px) {
-  @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
-  }
-  @return ($px / $carbon--base-font-size) * 1em;
-}
-```
-</details>
-- **Parameters**:
-| Name  | Description         | Type     | Default value |
-| ----- | ------------------- | -------- | ------------- |
-| `$px` | Number with px unit | `Number` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Number` Number with em unit
-- **Requires**:
-  - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
-### ✅em [function]
-Convert a given px unit to a em unit
-<details>
-<summary>Source code</summary>
-```scss
-@function em($px) {
-  @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
-  }
-  @return ($px / $base-font-size) * 1em;
-}
-```
-</details>
-- **Parameters**:
-| Name  | Description         | Type     | Default value |
-| ----- | ------------------- | -------- | ------------- |
-| `$px` | Number with px unit | `Number` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Number` Number with em unit
-- **Requires**:
-  - [base-font-size [variable]](#base-font-size-variable)
-### ✅carbon--fluid-spacing-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--fluid-spacing-01: 0;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `fluid-spacing-01`
-### ✅fluid-spacing-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$fluid-spacing-01: 0;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--fluid-spacing-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--fluid-spacing-02: 2vw;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `fluid-spacing-02`
-### ✅fluid-spacing-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$fluid-spacing-02: 2vw;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--fluid-spacing-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--fluid-spacing-03: 5vw;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `fluid-spacing-03`
-### ✅fluid-spacing-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$fluid-spacing-03: 5vw;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--fluid-spacing-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--fluid-spacing-04: 10vw;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `fluid-spacing-04`
-### ✅fluid-spacing-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$fluid-spacing-04: 10vw;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--fluid-spacing [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--fluid-spacing: (
-  $carbon--fluid-spacing-01,
-  $carbon--fluid-spacing-02,
-  $carbon--fluid-spacing-03,
-  $carbon--fluid-spacing-04
-);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `List`
-### ✅fluid-spacing [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$fluid-spacing: (
-  $fluid-spacing-01,
-  $fluid-spacing-02,
-  $fluid-spacing-03,
-  $fluid-spacing-04
-);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `List`
-### ✅fluid-spacing-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$fluid-spacing-01: $carbon--fluid-spacing-01;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--fluid-spacing-01`
-### ✅fluid-spacing-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$fluid-spacing-02: $carbon--fluid-spacing-02;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--fluid-spacing-02`
-### ✅fluid-spacing-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$fluid-spacing-03: $carbon--fluid-spacing-03;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--fluid-spacing-03`
-### ✅fluid-spacing-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$fluid-spacing-04: $carbon--fluid-spacing-04;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--fluid-spacing-04`
-### ✅carbon--icon-size-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--icon-size-01: 1rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `icon-size-01`
-### ✅carbon--icon-size-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--icon-size-02: 1.25rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `icon-size-02`
-### ✅carbon--icon-size [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `List`
-### ✅icon-size-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$icon-size-01: $carbon--icon-size-01;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--icon-size-01`
-### ✅icon-size-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$icon-size-02: $carbon--icon-size-02;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--icon-size-02`
-### ✅carbon--get-column-width [function]
-Get the column width for a given breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--get-column-width(
-  $breakpoint,
-  $breakpoints: $carbon--grid-breakpoints
-) {
-  @if map-has-key($breakpoints, $breakpoint) {
-    $values: map-get($breakpoints, $breakpoint);
-    $width: map-get($values, width);
-    $margin: map-get($values, margin);
-    $columns: map-get($values, columns);
-    @return ($width - (2 * $margin)) / $columns;
-  } @else {
-    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name           | Description | Type     | Default value               |
-| -------------- | ----------- | -------- | --------------------------- |
-| `$breakpoint`  | —           | `String` | —                           |
-| `$breakpoints` | —           | `Map`    | `$carbon--grid-breakpoints` |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Number` In rem
-### ✅carbon--key-height-scales [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--key-height-scales: (
-  sm: (
-    carbon--get-column-width(sm),
-    carbon--get-column-width(sm) * 2,
-    carbon--get-column-width(sm) * 3,
-    carbon--get-column-width(sm) * 4,
-    carbon--get-column-width(sm) * 5,
-    carbon--get-column-width(sm) * 6,
-  ),
-  md: (
-    carbon--get-column-width(md),
-    carbon--get-column-width(md) * 2,
-    carbon--get-column-width(md) * 3,
-    carbon--get-column-width(md) * 4,
-    carbon--get-column-width(md) * 5,
-    carbon--get-column-width(md) * 6,
-  ),
-  lg: (
-    carbon--get-column-width(lg),
-    carbon--get-column-width(lg) * 2,
-    carbon--get-column-width(lg) * 3,
-    carbon--get-column-width(lg) * 4,
-    carbon--get-column-width(lg) * 5,
-    carbon--get-column-width(lg) * 6,
-    carbon--get-column-width(lg) * 7,
-    carbon--get-column-width(lg) * 8,
-  ),
-  xlg: (
-    carbon--get-column-width(xlg),
-    carbon--get-column-width(xlg) * 2,
-    carbon--get-column-width(xlg) * 3,
-    carbon--get-column-width(xlg) * 4,
-    carbon--get-column-width(xlg) * 5,
-    carbon--get-column-width(xlg) * 6,
-    carbon--get-column-width(xlg) * 7,
-    carbon--get-column-width(xlg) * 8,
-  ),
-  max: (
-    carbon--get-column-width(max),
-    carbon--get-column-width(max) * 2,
-    carbon--get-column-width(max) * 3,
-    carbon--get-column-width(max) * 4,
-    carbon--get-column-width(max) * 5,
-    carbon--get-column-width(max) * 6,
-    carbon--get-column-width(max) * 7,
-    carbon--get-column-width(max) * 8,
-  ),
-);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Map`
-- **Used by**:
-  - [carbon--key-height [function]](#carbon--key-height-function)
-### ✅carbon--key-height [function]
-Get the value of a key height step at a given breakpoint
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--key-height($breakpoint, $step) {
-  @if map-has-key($carbon--key-height-scales, $breakpoint) {
-    @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
-  } @else {
-    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
-  }
-}
-```
-</details>
-- **Parameters**:
-| Name          | Description | Type     | Default value |
-| ------------- | ----------- | -------- | ------------- |
-| `$breakpoint` | —           | `String` | —             |
-| `$step`       | —           | `Number` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Number` In rem
-- **Requires**:
-  - [carbon--key-height-scales [variable]](#carbon--key-height-scales-variable)
-### ✅carbon--layout-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--layout-01: 1rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `layout-01`
-### ✅carbon--layout-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--layout-02: 1.5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `layout-02`
-### ✅carbon--layout-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--layout-03: 2rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `layout-03`
-### ✅carbon--layout-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--layout-04: 3rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `layout-04`
-### ✅carbon--layout-05 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--layout-05: 4rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `layout-05`
-### ✅carbon--layout-06 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--layout-06: 6rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `layout-06`
-### ✅carbon--layout-07 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--layout-07: 10rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `layout-07`
-### ✅carbon--layout [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--layout: (
-  $carbon--layout-01,
-  $carbon--layout-02,
-  $carbon--layout-03,
-  $carbon--layout-04,
-  $carbon--layout-05,
-  $carbon--layout-06,
-  $carbon--layout-07
-);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `List`
-### ✅layout-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$layout-01: $carbon--layout-01;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--layout-01`
-### ✅layout-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$layout-02: $carbon--layout-02;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--layout-02`
-### ✅layout-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$layout-03: $carbon--layout-03;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--layout-03`
-### ✅layout-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$layout-04: $carbon--layout-04;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--layout-04`
-### ✅layout-05 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$layout-05: $carbon--layout-05;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--layout-05`
-### ✅layout-06 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$layout-06: $carbon--layout-06;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--layout-06`
-### ✅layout-07 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$layout-07: $carbon--layout-07;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--layout-07`
-### ✅carbon--mini-unit-size [variable]
-Default mini-unit value
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--mini-unit-size: 8px;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Used by**:
-  - [carbon--mini-units [function]](#carbon--mini-units-function)
-### ✅carbon--mini-units [function]
-Get the value of the corresponding number of units
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--mini-units($count) {
-  @return carbon--rem($carbon--mini-unit-size * $count);
-}
-```
-</details>
-- **Parameters**:
-| Name     | Description                              | Type     | Default value |
-| -------- | ---------------------------------------- | -------- | ------------- |
-| `$count` | The number of units to get the value for | `Number` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Number` In rem units
-- **Requires**:
-  - [carbon--rem [function]](#carbon--rem-function)
-  - [carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable)
-### ✅carbon--spacing-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-01: 0.125rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-01`
-### ✅spacing-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-01: 0.125rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-02: 0.25rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-02`
-### ✅spacing-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-02: 0.25rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-03: 0.5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-03`
-### ✅spacing-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-03: 0.5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-04: 0.75rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-04`
-### ✅spacing-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-04: 0.75rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-05 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-05: 1rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-05`
-### ✅spacing-05 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-05: 1rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-06 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-06: 1.5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-06`
-### ✅spacing-06 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-06: 1.5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-07 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-07: 2rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-07`
-### ✅spacing-07 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-07: 2rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-08 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-08: 2.5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-08`
-### ✅spacing-08 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-08: 2.5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-09 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-09: 3rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-09`
-### ✅spacing-09 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-09: 3rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-10 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-10: 4rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-10`
-### ✅spacing-10 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-10: 4rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-11 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-11: 5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-11`
-### ✅spacing-11 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-11: 5rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing-12 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing-12: 6rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-12`
-### ✅spacing-12 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-12: 6rem;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-### ✅carbon--spacing [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$carbon--spacing: (
-  $carbon--spacing-01,
-  $carbon--spacing-02,
-  $carbon--spacing-03,
-  $carbon--spacing-04,
-  $carbon--spacing-05,
-  $carbon--spacing-06,
-  $carbon--spacing-07,
-  $carbon--spacing-08,
-  $carbon--spacing-09,
-  $carbon--spacing-10,
-  $carbon--spacing-11,
-  $carbon--spacing-12
-);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `List`
-### ✅spacing [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing: (
-  $spacing-01,
-  $spacing-02,
-  $spacing-03,
-  $spacing-04,
-  $spacing-05,
-  $spacing-06,
-  $spacing-07,
-  $spacing-08,
-  $spacing-09,
-  $spacing-10,
-  $spacing-11,
-  $spacing-12
-);
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `List`
-### ✅spacing-01 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-01: $carbon--spacing-01;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-01`
-### ✅spacing-02 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-02: $carbon--spacing-02;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-02`
-### ✅spacing-03 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-03: $carbon--spacing-03;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-03`
-### ✅spacing-04 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-04: $carbon--spacing-04;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-04`
-### ✅spacing-05 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-05: $carbon--spacing-05;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-05`
-### ✅spacing-06 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-06: $carbon--spacing-06;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-06`
-### ✅spacing-07 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-07: $carbon--spacing-07;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-07`
-### ✅spacing-08 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-08: $carbon--spacing-08;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-08`
-### ✅spacing-09 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-09: $carbon--spacing-09;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-09`
-### ✅spacing-10 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-10: $carbon--spacing-10;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-10`
-### ✅spacing-11 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-11: $carbon--spacing-11;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-11`
-### ✅spacing-12 [variable]
-<details>
-<summary>Source code</summary>
-```scss
-$spacing-12: $carbon--spacing-12;
-```
-</details>
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Alias**: `carbon--spacing-12`
-### ✅map-deep-get [function]
-Map deep get
-<details>
-<summary>Source code</summary>
-```scss
-@function map-deep-get($map, $keys) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}
-```
-</details>
-- **Parameters**:
-| Name    | Description | Type      | Default value |
-| ------- | ----------- | --------- | ------------- |
-| `$map`  | Map         | `Map`     | —             |
-| `$keys` | Key chain   | `Arglist` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `*` Desired value
-### ✅map-deep-get [function]
-Map deep get
-<details>
-<summary>Source code</summary>
-```scss
-@function map-deep-get($map, $keys) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}
-```
-</details>
-- **Parameters**:
-| Name    | Description | Type      | Default value |
-| ------- | ----------- | --------- | ------------- |
-| `$map`  | Map         | `Map`     | —             |
-| `$keys` | Key chain   | `Arglist` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `*` Desired value
-### ✅carbon--key-by-index [function]
-Provide a map and index, and get back the relevant key value
-<details>
-<summary>Source code</summary>
-```scss
-@function carbon--key-by-index($map, $index) {
-  $keys: map-keys($map);
-  @return nth($keys, $index);
-}
-```
-</details>
-- **Parameters**:
-| Name     | Description | Type      | Default value |
-| -------- | ----------- | --------- | ------------- |
-| `$map`   | Map         | `Map`     | —             |
-| `$index` | Key chain   | `Integer` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String` Desired value
-- **Used by**:
-  - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
-  - [last-map-item [function]](#last-map-item-function)
-### ✅key-by-index [function]
-Provide a map and index, and get back the relevant key value
-<details>
-<summary>Source code</summary>
-```scss
-@function key-by-index($map, $index) {
-  $keys: map-keys($map);
-  @return nth($keys, $index);
-}
-```
-</details>
-- **Parameters**:
-| Name     | Description | Type      | Default value |
-| -------- | ----------- | --------- | ------------- |
-| `$map`   | Map         | `Map`     | —             |
-| `$index` | Key chain   | `Integer` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String` Desired value
-- **Used by**:
-  - [largest-breakpoint-name [function]](#largest-breakpoint-name-function)
-### ✅last-map-item [function]
-Pass in a map, and get the last one in the list back
-<details>
-<summary>Source code</summary>
-```scss
-@function last-map-item($map) {
-  $total-length: length($map);
-  @return map-get($map, carbon--key-by-index($map, $total-length));
-}
-```
-</details>
-- **Parameters**:
-| Name   | Description | Type  | Default value |
-| ------ | ----------- | ----- | ------------- |
-| `$map` | Map         | `Map` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `*` Desired value
-- **Requires**:
-  - [carbon--key-by-index [function]](#carbon--key-by-index-function)
-### ✅last-map-item [function]
-Pass in a map, and get the last one in the list back
-<details>
-<summary>Source code</summary>
-```scss
-@function last-map-item($map) {
-  $total-length: length($map);
-  @return map-get($map, carbon--key-by-index($map, $total-length));
-}
-```
-</details>
-- **Parameters**:
-| Name   | Description | Type  | Default value |
-| ------ | ----------- | ----- | ------------- |
-| `$map` | Map         | `Map` | —             |
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `*` Desired value
-- **Requires**:
-  - [carbon--key-by-index [function]](#carbon--key-by-index-function)