@aurodesignsystem/auro-formkit 2.0.0-beta.9 → 2.0.1

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/_grids.scss

@@ -1,395 +0,0 @@
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-// sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes
-@import 'libSupport/manageScope';
-
-$fixed-nav-width: 280px;
-$fixed-anchor-width: 168px;
-
-
-/// This mixin will set the element to be sticky on tablet and larger devices.
-///
-/// @group grid
-/// @example scss - import mixin file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-/// @example scss - import mixin file with altered output values prior to import
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-///
-@mixin grid-stickycolumn--md {
-  @media screen and (min-width: $ds-grid-breakpoint-md) {
-    position: sticky;
-    top: 0;
-    max-height: 100vh;
-    padding-top: var(--ds-grid-margin-xl, $ds-grid-margin-xl);
-    @content;
-  }
-}
-
-/// This mixin will set the element to be sticky on mobile devices.
-///
-/// @group grid
-/// @example scss - import mixin file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-/// @example scss - import mixin file with altered output values prior to import
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-///
-@mixin grid-stickycolumn--xs {
-  position: sticky;
-  top: 0;
-  --align-self: stretch;
-  align-self: var(--align-self);
-}
-
-
-/// @group grid
-/// @param {string} $maxWidth [1232px] - Specifies the max-width value of the grid.
-/// @example scss - import mixin file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-/// @example scss - import mixin file with altered output values prior to import
-///   $maxWidth: $ds-grid-breakpoint-xl !default;
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-///
-@mixin grid_width($maxWidth) {
-  max-width: $maxWidth;
-}
-
-/// @group grid
-/// @example scss - import mixin file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-/// @example scss - import mixin file with altered output values prior to import
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-@mixin grid_margin() {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/// @group grid
-/// @example scss - import mixin file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-/// @example scss - import mixin file with altered output values prior to import
-/// $padding: $ds-grid-margin-xs !default;
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-@mixin grid_padding($padding) {
-  padding-left: $padding;
-  padding-right: $padding;
-}
-
-/// @group grid
-/// @param {string} $gutter [16px] - Specifies the gutter/gap(horizontal & vertical spacing) value between each cell of the grid.
-/// @example scss - import mixin file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
-/// @example scss - import mixin file with altered output values prior to import
-///   $gutter: $ds-grid-gutter-xs !default;
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-@mixin grid_gutter($gutter) {
-  gap: $gutter;
-  @include auro_grid-breakpoint--sm {
-   gap: var(--ds-grid-gutter-sm, $ds-grid-gutter-sm);
-  }
-  @include auro_grid-breakpoint--md {
-    gap: var(--ds-grid-gutter-md, $ds-grid-gutter-md);
-  }
-  @include auro_grid-breakpoint--lg {
-    gap: var(--ds-grid-gutter-lg, $ds-grid-gutter-lg);
-  }
-  @include auro_grid-breakpoint--xl {
-    gap: var(--ds-grid-gutter-xl, $ds-grid-gutter-xl);
-  }
-}
-
-/// Container class
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group container
-/// @example scss - Default selector(s)
-///   .container {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .container {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_container {}
-///
-/// @example html - Example HTML selector use
-///   <element class="container"> ... </element>
-/// @example scss - import file;
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-///
-#{$scope}.#{$prefix}container {
-  display: grid;
-  @include grid_margin();
-  @include grid_width($ds-grid-breakpoint-xl);
-}
-
-/// Container class
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group container
-/// @example scss - Default selector(s)
-///   .container {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .container {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_container {}
-///
-/// @example html - Example HTML selector use
-///   <element class="container"> ... </element>
-/// @example scss - import file;
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-///
-#{$scope}.#{$prefix}pagecontainer {
-  @include grid_padding($ds-grid-margin-xs);
-  @include grid_margin();
-  @include grid_width($ds-grid-breakpoint-xl);
-
-  @include auro_grid-breakpoint--sm {
-    @include grid_padding($ds-grid-margin-sm);
-  }
-  @include auro_grid-breakpoint--md {
-    @include grid_padding($ds-grid-margin-md);
-  }
-  @include auro_grid-breakpoint--lg {
-    @include grid_padding($ds-grid-margin-lg);
-  }
-  @include auro_grid-breakpoint--xl {
-    @include grid_padding($ds-grid-margin-xl);
-  }
-
-  &.breadcrumbs {
-    margin-block-end: 3.35rem;
-  }
-}
-
-/// pageLayout-2colAnchorNav class
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group page layouts
-/// @example scss - Default selector(s)
-///   .pageLayout-2colAnchorNav {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .pageLayout-2colAnchorNav {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_pageLayout-2colAnchorNav {}
-///
-/// @example html - Example HTML selector use
-///   <element class="pageLayout-2colAnchorNav"> ... </element>
-/// @example scss - import file;
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-///
-#{$scope}.#{$prefix}pageLayout-2colAnchorNav {
-  display: grid;
-  @include grid_margin();
-  @include grid_padding($ds-grid-margin-xs);
-  @include grid_width($ds-grid-breakpoint-xl);
-  @include grid_gutter($ds-grid-gutter-xl);
-  grid-template-areas:
-  "breadcrumbs"
-  "anchornav"
-  "main";
-
-  @include auro_grid-breakpoint--sm {
-    @include grid_padding($ds-grid-margin-sm);
-  }
-  @include auro_grid-breakpoint--md {
-    @include grid_padding($ds-grid-margin-md);
-    grid-template-columns: auto var(--fixed-anchor-width, $fixed-anchor-width);
-      grid-template-areas:
-      "breadcrumbs breadcrumbs"
-      "main anchornav";
-  }
-  @include auro_grid-breakpoint--lg {
-    @include grid_padding($ds-grid-margin-lg);
-  }
-  @include auro_grid-breakpoint--xl {
-    @include grid_padding($ds-grid-margin-xl);
-  }
-
-  .breadcrumbs {
-    grid-area: breadcrumbs;
-  }
-  .main {
-    grid-area: main;
-    * {
-      scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
-    }
-  }
-  .anchornav {
-    grid-area: anchornav;
-    @include grid-stickycolumn--md;
-  }
-}
-
-/// pageLayout-2colSideNav class
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group page layouts
-/// @example scss - Default selector(s)
-///   .pageLayout-2colSideNav {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .pageLayout-2colSideNav {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_pageLayout-2colSideNav {}
-///
-/// @example html - Example HTML selector use
-///   <element class="pageLayout-2colSideNav"> ... </element>
-/// @example scss - import file;
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-///
-#{$scope}.#{$prefix}pageLayout-2colSideNav {
-  display: grid;
-  @include grid_margin();
-  @include grid_padding(0);
-  @include grid_width($ds-grid-breakpoint-xl);
-  @include grid_gutter($ds-grid-gutter-xl);
-  grid-template-areas:
-  "breadcrumbs"
-  "sidenav"
-  "main";
-
-
-  @include auro_grid-breakpoint--md {
-    @include grid_padding($ds-grid-margin-md);
-    grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto;
-      grid-template-areas:
-      "breadcrumbs breadcrumbs"
-      "sidenav main";
-  }
-
-  @include auro_grid-breakpoint--lg {
-    @include grid_padding($ds-grid-margin-lg);
-  }
-  @include auro_grid-breakpoint--xl {
-    @include grid_padding($ds-grid-margin-xl);
-  }
-
-
-  .breadcrumbs {
-    grid-area: breadcrumbs;
-    @include grid_padding($ds-grid-margin-xs);
-    @include auro_grid-breakpoint--md {
-      @include grid_padding(0);
-    }
-  }
-
-  .sidenav {
-    grid-area: sidenav;
-    background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
-    @include grid_padding($ds-grid-margin-xs);
-
-    @include auro_grid-breakpoint--md {
-      @include grid_padding(0);
-      background-color: transparent;
-    }
-  }
-
-  .main {
-    grid-area: main;
-    @include grid_padding($ds-grid-margin-xs);
-    @include auro_grid-breakpoint--md {
-    @include grid_padding(0);
-    }
-    * {
-      scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
-    }
-  }
-}
-
-/// pageLayout-3col class
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group page layouts
-/// @example scss - Default selector(s)
-///   .pageLayout-3col {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .pageLayout-3col {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_pageLayout-3col {}
-///
-/// @example html - Example HTML selector use
-///   <element class="pageLayout-3col"> ... </element>
-/// @example scss - import file;
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
-///
-#{$scope}.#{$prefix}pageLayout-3col {
-  display: grid;
-  @include grid_margin();
-  @include grid_padding(0);
-  @include grid_width($ds-grid-breakpoint-xl);
-  @include grid_gutter($ds-grid-gutter-xl);
-  grid-template-areas:
-  "breadcrumbs"
-  "sidenav"
-  "anchornav"
-  "main";
-
-
-  @include auro_grid-breakpoint--md {
-    @include grid_padding($ds-grid-margin-md);
-    grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto var(--fixed-anchor-width, $fixed-anchor-width);
-      grid-template-areas:
-      "breadcrumbs breadcrumbs breadcrumbs"
-      "sidenav main anchornav";
-  }
-
-  @include auro_grid-breakpoint--lg {
-    @include grid_padding($ds-grid-margin-lg);
-  }
-  @include auro_grid-breakpoint--xl {
-    @include grid_padding($ds-grid-margin-xl);
-  }
-
-
-  .breadcrumbs {
-    grid-area: breadcrumbs;
-    @include grid_padding($ds-grid-margin-xs);
-    @include auro_grid-breakpoint--md {
-      @include grid_padding(0);
-    }
-  }
-
-  .sidenav {
-    grid-area: sidenav;
-    z-index: 1;
-    background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
-    @include grid_padding($ds-grid-margin-xs);
-    @include grid-stickycolumn--xs();
-
-
-    @include auro_grid-breakpoint--md {
-      @include grid_padding(0);
-      background-color: transparent;
-    }
-  }
-
-  .main {
-    grid-area: main;
-    @include grid_padding($ds-grid-margin-xs);
-    @include auro_grid-breakpoint--md {
-    @include grid_padding(0);
-    }
-    * {
-      scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
-    }
-  }
-
-  .anchornav {
-    grid-area: anchornav;
-    @include grid-stickycolumn--md;
-    @include grid_padding($ds-grid-margin-xs);
-
-    @include auro_grid-breakpoint--md {
-      @include grid_padding(0);
-    }
-  }
-}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/_headings.scss

@@ -1,255 +0,0 @@
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-// sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes
-
-@import 'libSupport/manageScope';
-
-/// Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `<h1>`, `<h2>`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group headings
-/// @example scss - Default selector(s)
-///   .heading {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .heading {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_heading {}
-///
-/// @example html - Example HTML selector use
-///   <element class="heading"> ... </element>
-/// @example scss - import file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
-///
-#{$scope}.#{$prefix}heading {
-  margin: calc(#{$ds-size-200} + #{$ds-size-150}) 0;
-
-  letter-spacing: var(--ds-text-heading-default-spacing, $ds-text-heading-default-spacing);
-
-  font-weight: var(--ds-text-heading-default-weight, $ds-text-heading-default-weight);
-}
-
-/// Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `<h1>`, `<h2>`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group headings
-/// @example scss - Default selector(s)
-///   .heading--display {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .heading--display {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_heading--display {}
-///
-/// @example html - Example HTML selector use
-///   <element class="heading heading--display"> ... </element>
-/// @example scss - import file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
-#{$scope}.#{$prefix}heading--display {
-  margin-top: 0;
-
-  font-size: var(--ds-text-heading-display-size-breakpoint-sm, $ds-text-heading-display-size-breakpoint-sm);
-  font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight);
-  line-height: var(--ds-text-heading-display-height-breakpoint-sm, $ds-text-heading-display-height-breakpoint-sm);
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
-    font-size: var(--ds-text-heading-display-size-breakpoint-md, $ds-text-heading-display-size-breakpoint-md);
-    line-height: var(--ds-text-heading-display-height-breakpoint-md, $ds-text-heading-display-height-breakpoint-md);
-  }
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
-    font-size: var(--ds-text-heading-display-size-breakpoint-lg, $ds-text-heading-display-size-breakpoint-lg);
-    line-height: var(--ds-text-heading-display-height-breakpoint-lg, $ds-text-heading-display-height-breakpoint-lg);
-  }
-}
-
-/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group headings
-/// @example scss - Default selector(s)
-///   .heading--800 {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .heading--800 {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_heading--800 {}
-///
-/// @example html - Example HTML selector use
-///   <element class="heading heading--800"> ... </element>
-/// @example scss - import file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
-#{$scope}.#{$prefix}heading--800 {
-  font-size: var(--ds-text-heading-800-size-breakpoint-sm, $ds-text-heading-800-size-breakpoint-sm);
-  font-weight: var(--ds-text-heading-800-weight, $ds-text-heading-800-weight);
-  line-height: var(--ds-text-heading-800-height-breakpoint-sm, $ds-text-heading-800-height-breakpoint-sm);
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
-    font-size: var(--ds-text-heading-800-size-breakpoint-md, $ds-text-heading-800-size-breakpoint-md);
-    line-height: var(--ds-text-heading-800-height-breakpoint-md, $ds-text-heading-800-height-breakpoint-md);
-  }
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
-    font-size: var(--ds-text-heading-800-size-breakpoint-lg, $ds-text-heading-800-size-breakpoint-lg);
-    line-height: var(--ds-text-heading-800-height-breakpoint-lg, $ds-text-heading-800-height-breakpoint-lg);
-  }
-}
-
-/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group headings
-/// @example scss - Default selector(s)
-///   .heading--700 {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .heading--700 {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_heading--700 {}
-///
-/// @example html - Example HTML selector use
-///   <element class="heading heading--700"> ... </element>
-/// @example scss - import file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
-#{$scope}.#{$prefix}heading--700 {
-  font-size: var(--ds-text-heading-700-size-breakpoint-sm, $ds-text-heading-700-size-breakpoint-sm);
-  font-weight: var(--ds-text-heading-700-weight, $ds-text-heading-700-weight);
-  line-height: var(--ds-text-heading-700-height-breakpoint-sm, $ds-text-heading-700-height-breakpoint-sm);
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
-    font-size: var(--ds-text-heading-700-size-breakpoint-md, $ds-text-heading-700-size-breakpoint-md);
-    line-height: var(--ds-text-heading-700-height-breakpoint-md, $ds-text-heading-700-height-breakpoint-md);
-  }
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
-    font-size: var(--ds-text-heading-700-size-breakpoint-lg, $ds-text-heading-700-size-breakpoint-lg);
-    line-height: var(--ds-text-heading-700-height-breakpoint-lg, $ds-text-heading-700-height-breakpoint-lg);
-  }
-}
-
-/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group headings
-/// @example scss - Default selector(s)
-///   .heading--600 {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .heading--600 {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_heading--600 {}
-///
-/// @example html - Example HTML selector use
-///   <element class="heading heading--600"> ... </element>
-/// @example scss - import file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
-#{$scope}.#{$prefix}heading--600 {
-  margin: $ds-size-200 0;
-
-  font-size: var(--ds-text-heading-600-size-breakpoint-sm, $ds-text-heading-600-size-breakpoint-sm);
-  font-weight: var(--ds-text-heading-600-weight, $ds-text-heading-600-weight);
-  line-height: var(--ds-text-heading-600-height-breakpoint-sm, $ds-text-heading-600-height-breakpoint-sm);
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
-    font-size: var(--ds-text-heading-600-size-breakpoint-md, $ds-text-heading-600-size-breakpoint-md);
-    line-height: var(--ds-text-heading-600-height-breakpoint-md, $ds-text-heading-600-height-breakpoint-md);
-  }
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
-    font-size: var(--ds-text-heading-600-size-breakpoint-lg, $ds-text-heading-600-size-breakpoint-lg);
-    line-height: var(--ds-text-heading-600-height-breakpoint-lg, $ds-text-heading-600-height-breakpoint-lg);
-  }
-}
-
-/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group headings
-/// @example scss - Default selector(s)
-///   .heading--500 {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .heading--500 {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_heading--500 {}
-///
-/// @example html - Example HTML selector use
-///   <element class="heading heading--500"> ... </element>
-/// @example scss - import file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
-#{$scope}.#{$prefix}heading--500 {
-  margin: $ds-size-200 0;
-
-  font-size: var(--ds-text-heading-500-size-breakpoint-sm, $ds-text-heading-500-size-breakpoint-sm);
-  font-weight: var(--ds-text-heading-500-weight, $ds-text-heading-500-weight);
-  line-height: var(--ds-text-heading-500-height-breakpoint-sm, $ds-text-heading-500-height-breakpoint-sm);
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
-    font-size: var(--ds-text-heading-500-size-breakpoint-md, $ds-text-heading-500-size-breakpoint-md);
-    line-height: var(--ds-text-heading-500-height-breakpoint-md, $ds-text-heading-500-height-breakpoint-md);
-  }
-
-  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
-    font-size: var(--ds-text-heading-500-size-breakpoint-lg, $ds-text-heading-500-size-breakpoint-lg);
-    line-height: var(--ds-text-heading-500-height-breakpoint-lg, $ds-text-heading-500-height-breakpoint-lg);
-  }
-}
-
-/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group headings
-/// @example scss - Default selector(s)
-///   .heading--400 {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .heading--400 {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_heading--400 {}
-///
-/// @example html - Example HTML selector use
-///   <element class="heading heading--400"> ... </element>
-/// @example scss - import file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
-#{$scope}.#{$prefix}heading--400 {
-  margin: $ds-size-150 0;
-
-  font-size: var(--ds-text-heading-400-size, $ds-text-heading-400-size);
-  font-weight: var(--ds-text-heading-400-weight, $ds-text-heading-400-weight);
-  line-height: var(--ds-text-heading-400-height, $ds-text-heading-400-height);
-}
-
-/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
-///
-/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
-/// @group headings
-/// @example scss - Default selector(s)
-///   .heading--300 {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro .heading--300 {}
-///
-/// @example scss - Selector(s) when $prefix: true;
-///   .auro_heading--300 {}
-///
-/// @example html - Example HTML selector use
-///   <element class="heading heading--300"> ... </element>
-/// @example scss - import file
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
-#{$scope}.#{$prefix}heading--300 {
-  margin: $ds-size-150 0;
-
-  font-size: var(--ds-text-heading-300-size, $ds-text-heading-300-size);
-  font-weight: var(--ds-text-heading-300-weight, $ds-text-heading-300-weight);
-  line-height: var(--ds-text-heading-300-height, $ds-text-heading-300-height);
-}