@carbon/layout 10.16.0 → 10.18.0

package/docs/sass.md

@@ -1,1904 +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)
-  - [✅carbon--grid-gutter--condensed [variable]](#carbon--grid-gutter--condensed-variable)
-  - [✅carbon--grid-breakpoints [variable]](#carbon--grid-breakpoints-variable)
-  - [✅carbon--breakpoint-next [function]](#carbon--breakpoint-next-function)
-  - [✅carbon--breakpoint-prev [function]](#carbon--breakpoint-prev-function)
-  - [✅carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
-  - [✅carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
-  - [✅carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
-  - [✅carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
-  - [✅carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
-  - [✅carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
-  - [✅carbon--largest-breakpoint [mixin]](#carbon--largest-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)
-  - [✅carbon--rem [function]](#carbon--rem-function)
-  - [✅carbon--em [function]](#carbon--em-function)
-  - [✅carbon--fluid-spacing-01 [variable]](#carbon--fluid-spacing-01-variable)
-  - [✅carbon--fluid-spacing-02 [variable]](#carbon--fluid-spacing-02-variable)
-  - [✅carbon--fluid-spacing-03 [variable]](#carbon--fluid-spacing-03-variable)
-  - [✅carbon--fluid-spacing-04 [variable]](#carbon--fluid-spacing-04-variable)
-  - [✅carbon--fluid-spacing [variable]](#carbon--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)
-  - [✅carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
-  - [✅carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
-  - [✅carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
-  - [✅carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
-  - [✅carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
-  - [✅carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
-  - [✅carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
-  - [✅carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
-  - [✅carbon--spacing-10 [variable]](#carbon--spacing-10-variable)
-  - [✅carbon--spacing-11 [variable]](#carbon--spacing-11-variable)
-  - [✅carbon--spacing-12 [variable]](#carbon--spacing-12-variable)
-  - [✅carbon--spacing [variable]](#carbon--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)
-  - [✅carbon--key-by-index [function]](#carbon--key-by-index-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`
-
-### ✅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`
-
-### ✅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`
-
-### ✅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`
-
-### ✅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`
-
-### ✅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)
-
-### ✅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)
-
-### ✅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`
-
-### ✅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)
-
-### ✅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)
-
-### ✅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)
-
-### ✅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)
-
-### ✅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)
-
-### ✅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)
-
-### ✅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)
-
-### ✅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`
-
-### ✅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`
-
-### ✅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`
-
-### ✅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`
-
-### ✅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-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`
-
-### ✅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`
-
-### ✅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`
-
-### ✅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`
-
-### ✅carbon--spacing-05 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--spacing-05: 1rem;
-```
-
-</details>
-
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-05`
-
-### ✅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`
-
-### ✅carbon--spacing-07 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--spacing-07: 2rem;
-```
-
-</details>
-
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-07`
-
-### ✅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`
-
-### ✅carbon--spacing-09 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--spacing-09: 3rem;
-```
-
-</details>
-
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-09`
-
-### ✅carbon--spacing-10 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--spacing-10: 4rem;
-```
-
-</details>
-
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-10`
-
-### ✅carbon--spacing-11 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--spacing-11: 5rem;
-```
-
-</details>
-
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-11`
-
-### ✅carbon--spacing-12 [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--spacing-12: 6rem;
-```
-
-</details>
-
-- **Group**: [@carbon/layout](#carbonlayout)
-- **Type**: `Number`
-- **Aliased**:
-  - `spacing-12`
-
-### ✅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-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
-
-### ✅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)
-
-### ✅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)