@sebgroup/green-core 1.70.0 → 1.71.0

package/components/badge/badge.component.js

@@ -5,16 +5,16 @@ import {
 } from "../../chunks/chunk.QTSIPXV3.js";
 var _renderLeadSlot, renderLeadSlot_fn, _renderMainSlot, renderMainSlot_fn, _handleSlotChange, handleSlotChange_fn, _renderTrailSlot, renderTrailSlot_fn;
 import { property, state } from "lit/decorators.js";
-import { GdsElement } from "../../gds-element";
-import { html } from "../../scoping";
+import { GdsElement } from "../../gds-element.js";
+import { html } from "../../scoping.js";
 import { tokens } from "../../tokens.style";
-import { gdsCustomElement } from "../../utils/helpers/custom-element-scoping";
+import { gdsCustomElement } from "../../utils/helpers/custom-element-scoping.js";
 import {
   withLayoutChildProps,
   withMarginProps,
   withSizeXProps
-} from "../../utils/mixins/declarative-layout-mixins";
-import { GdsFlex } from "../flex/flex.component";
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { GdsFlex } from "../flex/flex.component.js";
 import BadgeCSS from "./badge.style";
 let GdsBadge = class extends withSizeXProps(
   withMarginProps(withLayoutChildProps(GdsElement))

package/components/badge/badge.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsBadge } from "./badge.component";
+import { GdsBadge } from "./badge.component.js";
 GdsBadge.define();
 export {
   GdsBadge

package/components/badge/index.js

@@ -1 +1 @@
-export * from "./badge";
+export * from "./badge.js";

package/components/button/button.component.js

@@ -11,19 +11,19 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import { literal, html as staticHtml } from "lit/static-html.js";
-import { GdsRipple } from "../../primitives/ripple/ripple.component";
-import { html as customElementHtml, gdsCustomElement } from "../../scoping";
+import { GdsRipple } from "../../primitives/ripple/ripple.component.js";
+import { html as customElementHtml, gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style";
-import { TransitionalStyles } from "../../transitional-styles";
-import { observeLightDOM } from "../../utils/decorators";
-import { forwardAttributes } from "../../utils/directives";
-import { stripWhitespace } from "../../utils/helpers/strip-white-space";
+import { TransitionalStyles } from "../../transitional-styles.js";
+import { observeLightDOM } from "../../utils/decorators/index.js";
+import { forwardAttributes } from "../../utils/directives/index.js";
+import { stripWhitespace } from "../../utils/helpers/strip-white-space.js";
 import {
   withLayoutChildProps,
   withMarginProps,
   withSizeXProps
-} from "../../utils/mixins/declarative-layout-mixins";
-import { GdsFormControlElement } from "../form/form-control";
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { GdsFormControlElement } from "../form/form-control.js";
 import style from "./button.style.css.js";
 const ariaForwards = ["aria-label", "aria-haspopup", "aria-expanded"];
 const html = stripWhitespace(customElementHtml);

package/components/button/button.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsButton } from "./button.component";
+import { GdsButton } from "./button.component.js";
 GdsButton.define();
 export {
   GdsButton

package/components/button/button.style.css.js

@@ -1,4 +1,2 @@
-
-            const styles = "@layer tokens, core, a11y, ranks, sizes, variants, disabled;\n\n@layer a11y {\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n}\n\n@layer core {\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n  }\n\n  .button {\n    --_block-size: var(--gds-space-3xl);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    block-size: var(--_block-size);\n    background-color: var(--gds-color-l3-background-primary);\n    color: var(--gds-color-l3-content-primary);\n    border-radius: var(--gds-space-max);\n    font-family: inherit;\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n    font-weight: var(--gds-text-weight-book);\n    gap: var(--gds-space-s);\n    outline-color: transparent;\n    outline-offset: var(--gds-space-3xs);\n    outline-style: solid;\n    outline-width: var(--gds-space-3xs);\n    padding-block: var(--gds-space-s);\n    padding-inline: var(--gds-space-l);\n    position: relative;\n    text-decoration: none;\n    transition-property: color, border-colorm, background;\n    transition-duration: 0.2s;\n    flex: 1;\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-tertiary);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-primary),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-primary),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &:not(.circle) slot:not([name]) {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n\n/* High specificity */\n.button.circle {\n  aspect-ratio: 1 / 1;\n  padding: 0;\n  min-block-size: var(--_block-size);\n  min-inline-size: var(--_block-size);\n}\n\n.button:disabled {\n  pointer-events: none;\n  background-color: var(--gds-color-l3-background-disabled);\n  color: var(--gds-color-l3-content-disabled);\n}\n\n@layer ranks {\n  :host([rank*='secondary']) .button {\n    background-color: var(--gds-color-l3-background-secondary);\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-secondary),\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-secondary),\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n\n  :host([rank*='tertiary']) .button {\n    background-color: transparent;\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        transparent,\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n}\n\n@layer sizes {\n  :host([size='xs']) .button {\n    --_block-size: var(--gds-space-l);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='small']) .button {\n    --_block-size: var(--gds-space-xl);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='medium']) .button {\n    --_block-size: var(--gds-space-2xl);\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n  }\n}\n\n@layer variants {\n  .positive {\n    background-color: var(--gds-color-l3-background-positive);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-positive);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-positive),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-positive-secondary);\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-positive-secondary),\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive-secondary),\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n  }\n\n  .negative {\n    background-color: var(--gds-color-l3-background-negative);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-negative);\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-negative),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-negative-secondary);\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-negative-secondary),\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative-secondary),\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n  }\n}\n";
-            export default styles;
-          
+const styles = "@layer tokens, core, a11y, ranks, sizes, variants, disabled;\n\n@layer a11y {\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n}\n\n@layer core {\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n  }\n\n  .button {\n    --_block-size: var(--gds-space-3xl);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    block-size: var(--_block-size);\n    background-color: var(--gds-color-l3-background-primary);\n    color: var(--gds-color-l3-content-primary);\n    border-radius: var(--gds-space-max);\n    font-family: inherit;\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n    font-weight: var(--gds-text-weight-book);\n    gap: var(--gds-space-s);\n    outline-color: transparent;\n    outline-offset: var(--gds-space-3xs);\n    outline-style: solid;\n    outline-width: var(--gds-space-3xs);\n    padding-block: var(--gds-space-s);\n    padding-inline: var(--gds-space-l);\n    position: relative;\n    text-decoration: none;\n    transition-property: color, border-colorm, background;\n    transition-duration: 0.2s;\n    flex: 1;\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-tertiary);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-primary),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-primary),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &:not(.circle) slot:not([name]) {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n\n/* High specificity */\n.button.circle {\n  aspect-ratio: 1 / 1;\n  padding: 0;\n  min-block-size: var(--_block-size);\n  min-inline-size: var(--_block-size);\n}\n\n.button:disabled {\n  pointer-events: none;\n  background-color: var(--gds-color-l3-background-disabled);\n  color: var(--gds-color-l3-content-disabled);\n}\n\n@layer ranks {\n  :host([rank*='secondary']) .button {\n    background-color: var(--gds-color-l3-background-secondary);\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-secondary),\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-secondary),\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n\n  :host([rank*='tertiary']) .button {\n    background-color: transparent;\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        transparent,\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n}\n\n@layer sizes {\n  :host([size='xs']) .button {\n    --_block-size: var(--gds-space-l);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='small']) .button {\n    --_block-size: var(--gds-space-xl);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='medium']) .button {\n    --_block-size: var(--gds-space-2xl);\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n  }\n}\n\n@layer variants {\n  .positive {\n    background-color: var(--gds-color-l3-background-positive);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-positive);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-positive),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-positive-secondary);\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-positive-secondary),\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive-secondary),\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n  }\n\n  .negative {\n    background-color: var(--gds-color-l3-background-negative);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-negative);\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-negative),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-negative-secondary);\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-negative-secondary),\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative-secondary),\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n  }\n}\n";
+export default styles;

package/components/button/button.trans.styles.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { TransitionalStyles } from "../../transitional-styles";
+import { TransitionalStyles } from "../../transitional-styles.js";
 import styles from "./button.trans.styles.scss.js";
 function register() {
   TransitionalStyles.instance.register("gds-button", styles.toString());

package/components/button/button.trans.styles.scss.js

@@ -1,4 +1,2 @@
-
-            const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n  font-size: 0;\n  width: 1rem;\n  height: 1rem;\n  display: inline-block;\n}\ni.sg-icon::before {\n  content: \"\";\n  display: inline-block;\n  background: var(--color);\n  width: 100%;\n  height: 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n  -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -10px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(-135deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -4px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(45deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base, _ranks, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    .button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: var(--sg-border-radius);\n      border: solid var(--sg-border-width) var(--sg-border-color);\n      font-weight: 500;\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n      box-sizing: border-box;\n      font-size: inherit;\n      overflow: hidden;\n      display: flex;\n      gap: 0.5rem;\n      text-decoration: none;\n      width: 100%;\n    }\n    .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    .button:focus, .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    @media (max-width: 35.98em) {\n      .button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      .button {\n        border: 2px solid currentcolor;\n      }\n    }\n    .button.small {\n      min-height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      line-height: 1rem;\n    }\n    .button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    .button slot:not([name]) {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    :host(:not([variant=ghost])) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: rgb(0, 122, 199);\n      border-color: rgb(0, 122, 199);\n      color: #fff;\n      --color: #fff;\n    }\n    :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host(:not([variant=ghost])) .button:focus-visible {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;\n    }\n    :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: transparent;\n      border-color: rgb(0, 122, 199);\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: transparent;\n      border-color: transparent;\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-disable */\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n    :host([variant=negative][rank=primary]) .button {\n      background: rgb(187, 0, 12);\n      border-color: rgb(187, 0, 12);\n      color: #fff;\n      --color: #fff;\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected=true],\n    :host([variant=negative][rank=primary]) .button:active,\n    :host([variant=negative][rank=primary]) .button.active,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n    :host([variant=negative][rank=primary]) .button:focus,\n    :host([variant=negative][rank=primary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n    :host([variant=negative][rank=primary]) .button:disabled,\n    :host([variant=negative][rank=primary]) .button.disabled,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n    :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-enable */\n    :host([variant=negative][rank=secondary]) .button,\n    :host([variant=negative][rank=tertiary]) .button {\n      color: rgb(187, 0, 12);\n      --color: rgb(187, 0, 12);\n      border-color: transparent;\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n    :host([variant=negative][rank=tertiary]) .button:active,\n    :host([variant=negative][rank=tertiary]) .button.active,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n    :host([variant=negative][rank=tertiary]) .button:focus,\n    :host([variant=negative][rank=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative][rank=secondary]) .button {\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=ghost]) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      border-color: rgb(51, 51, 51);\n      color: rgb(51, 51, 51);\n      --color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=ghost]) .button:focus-visible {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51) !important;\n    }\n    :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n  }\n  @layer _overrides {\n    :host .button.icon {\n      padding: 0.75rem;\n      background: transparent;\n      border-width: 0px;\n      color: currentColor;\n    }\n    :host .button.icon:hover {\n      color: currentColor;\n      background: var(--grey-500);\n    }\n    :host .button.icon slot {\n      display: contents;\n    }\n    .button.icon.xs {\n      min-height: 1.5rem;\n      line-height: 0.75rem;\n      padding: 0.25rem;\n    }\n    .button.icon.small {\n      padding: 0.5rem;\n    }\n    .button.icon.large {\n      padding: 1rem;\n    }\n  }\n}";
-            export default styles;
-          
+const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n  font-size: 0;\n  width: 1rem;\n  height: 1rem;\n  display: inline-block;\n}\ni.sg-icon::before {\n  content: \"\";\n  display: inline-block;\n  background: var(--color);\n  width: 100%;\n  height: 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n  -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -10px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(-135deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -4px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(45deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base, _ranks, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    .button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: var(--sg-border-radius);\n      border: solid var(--sg-border-width) var(--sg-border-color);\n      font-weight: 500;\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n      box-sizing: border-box;\n      font-size: inherit;\n      overflow: hidden;\n      display: flex;\n      gap: 0.5rem;\n      text-decoration: none;\n      width: 100%;\n    }\n    .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    .button:focus, .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    @media (max-width: 35.98em) {\n      .button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      .button {\n        border: 2px solid currentcolor;\n      }\n    }\n    .button.small {\n      min-height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      line-height: 1rem;\n    }\n    .button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    .button slot:not([name]) {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    :host(:not([variant=ghost])) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: rgb(0, 122, 199);\n      border-color: rgb(0, 122, 199);\n      color: #fff;\n      --color: #fff;\n    }\n    :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host(:not([variant=ghost])) .button:focus-visible {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;\n    }\n    :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: transparent;\n      border-color: rgb(0, 122, 199);\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: transparent;\n      border-color: transparent;\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-disable */\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n    :host([variant=negative][rank=primary]) .button {\n      background: rgb(187, 0, 12);\n      border-color: rgb(187, 0, 12);\n      color: #fff;\n      --color: #fff;\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected=true],\n    :host([variant=negative][rank=primary]) .button:active,\n    :host([variant=negative][rank=primary]) .button.active,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n    :host([variant=negative][rank=primary]) .button:focus,\n    :host([variant=negative][rank=primary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n    :host([variant=negative][rank=primary]) .button:disabled,\n    :host([variant=negative][rank=primary]) .button.disabled,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n    :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-enable */\n    :host([variant=negative][rank=secondary]) .button,\n    :host([variant=negative][rank=tertiary]) .button {\n      color: rgb(187, 0, 12);\n      --color: rgb(187, 0, 12);\n      border-color: transparent;\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n    :host([variant=negative][rank=tertiary]) .button:active,\n    :host([variant=negative][rank=tertiary]) .button.active,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n    :host([variant=negative][rank=tertiary]) .button:focus,\n    :host([variant=negative][rank=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative][rank=secondary]) .button {\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=ghost]) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      border-color: rgb(51, 51, 51);\n      color: rgb(51, 51, 51);\n      --color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=ghost]) .button:focus-visible {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51) !important;\n    }\n    :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n  }\n  @layer _overrides {\n    :host .button.icon {\n      padding: 0.75rem;\n      background: transparent;\n      border-width: 0px;\n      color: currentColor;\n    }\n    :host .button.icon:hover {\n      color: currentColor;\n      background: var(--grey-500);\n    }\n    :host .button.icon slot {\n      display: contents;\n    }\n    .button.icon.xs {\n      min-height: 1.5rem;\n      line-height: 0.75rem;\n      padding: 0.25rem;\n    }\n    .button.icon.small {\n      padding: 0.5rem;\n    }\n    .button.icon.large {\n      padding: 1rem;\n    }\n  }\n}";
+export default styles;

package/components/button/index.js

@@ -1 +1 @@
-export * from "./button";
+export * from "./button.js";

package/components/calendar/calendar.component.js

@@ -20,13 +20,13 @@ import {
   setHours,
   subMonths
 } from "date-fns";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement } from "../../scoping";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style";
-import { TransitionalStyles } from "../../transitional-styles";
-import { watch } from "../../utils/decorators/watch";
+import { TransitionalStyles } from "../../transitional-styles.js";
+import { watch } from "../../utils/decorators/watch.js";
 import style from "./calendar.styles";
-import { renderMonthGridView } from "./functions";
+import { renderMonthGridView } from "./functions.js";
 let GdsCalendar = class extends GdsElement {
   constructor() {
     super(...arguments);

package/components/calendar/calendar.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsCalendar } from "./calendar.component";
+import { GdsCalendar } from "./calendar.component.js";
 GdsCalendar.define();
 export {
   GdsCalendar

package/components/calendar/calendar.trans.styles.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles";
+import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles.js";
 import styles from "./calendar.trans.styles.scss.js";
 function register() {
   TransitionalStyles.instance.register("gds-calendar", styles.toString());

package/components/calendar/calendar.trans.styles.scss.js

@@ -1,4 +1,2 @@
-
-            const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/* medium */\n/* regular */\n/* regular */\n/* regular */\n/* hover */\n/* focus */\n/* selected */\n/* highlighted */\n/* active */\n/* disabled */\n/* today */\n/* weekend */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base {\n    :host {\n      display: flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      :host {\n        flex-wrap: wrap;\n        overflow-y: auto;\n      }\n    }\n    :host table {\n      border-spacing: 0;\n    }\n    :host th,\n    :host td {\n      box-sizing: border-box;\n      height: 2.75rem;\n      text-align: center;\n      width: 2.75rem;\n    }\n    :host thead {\n      /* days */\n    }\n    :host thead th {\n      background: var(--sg-bg-level-2);\n      border-bottom: solid 1px var(--sg-grey-300);\n      font-weight: 400;\n      top: 0;\n    }\n    @media (max-width: 35.98em) {\n      :host thead th {\n        position: sticky;\n      }\n    }\n    :host tbody {\n      /* week numbers */\n      /* dates */\n    }\n    :host tbody th {\n      font-weight: 400;\n    }\n    :host tbody td {\n      border: solid 1px transparent;\n      font-weight: 500;\n      -webkit-user-select: none;\n         -moz-user-select: none;\n              user-select: none;\n      /* weekend */\n      /* today */\n      /* hover */\n      /* focus */\n      /* selected */\n      /* highlighted */\n      /* active (pressed) */\n      /* disabled */\n    }\n    :host tbody td.sg-date-holiday:not(.disabled) {\n      background: var(--sg-bg-level-2);\n      color: hsl(var(--sg-hsl-red-2));\n    }\n    :host tbody td.today {\n      background: transparent;\n      border-radius: 4px;\n      box-shadow: inset 0 0 0 2px var(--grey-1000);\n      color: var(--grey-1000);\n    }\n    :host tbody td:hover:not(.disabled) {\n      background: var(--grey-500);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: var(--gds-sys-color-font);\n      cursor: pointer;\n    }\n    :host tbody td:focus-visible:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host tbody td:focus-visible:not(.disabled) {\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n      z-index: 0;\n    }\n    :host tbody td[aria-selected=true] {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td[tabindex=\"0\"] {\n      border-radius: 4px;\n    }\n    :host tbody td:hover:active:not(.disabled) {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td.disabled {\n      background: hsl(var(--sg-hsl-disabled-background));\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-disabled-color));\n      cursor: not-allowed;\n      font-weight: 400;\n    }\n    :host tbody td.disabled.sg-date-holiday {\n      color: hsla(var(--sg-hsl-red-2), 0.25);\n    }\n    :host tbody td.disabled .number,\n    :host tbody td.disabled .indicator-dot {\n      --_color: hsl(var(--sg-hsl-disabled-color)) !important;\n    }\n    :host tbody td.custom-date {\n      position: relative;\n    }\n    :host tbody .number {\n      color: var(--_color, \"currentColor\");\n    }\n    :host tbody .indicator-dot {\n      display: block;\n      width: 0.375rem;\n      height: 0.375rem;\n      top: 1.5rem;\n      border-radius: 50%;\n      margin: auto;\n      position: absolute;\n      inset-block-end: 0.125rem;\n      inset-inline: 0;\n      background-color: var(--_color);\n    }\n    :host table {\n      flex-grow: 1;\n      width: 100%;\n    }\n    :host table td {\n      width: 3rem;\n      height: 3rem;\n    }\n  }\n  @layer _modifiers {\n    .week-number {\n      border-right: solid 1px var(--gds-ref-pallet-base300);\n      font-weight: 400;\n      pointer-events: none;\n    }\n  }\n}";
-            export default styles;
-          
+const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/* medium */\n/* regular */\n/* regular */\n/* regular */\n/* hover */\n/* focus */\n/* selected */\n/* highlighted */\n/* active */\n/* disabled */\n/* today */\n/* weekend */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base {\n    :host {\n      display: flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      :host {\n        flex-wrap: wrap;\n        overflow-y: auto;\n      }\n    }\n    :host table {\n      border-spacing: 0;\n    }\n    :host th,\n    :host td {\n      box-sizing: border-box;\n      height: 2.75rem;\n      text-align: center;\n      width: 2.75rem;\n    }\n    :host thead {\n      /* days */\n    }\n    :host thead th {\n      background: var(--sg-bg-level-2);\n      border-bottom: solid 1px var(--sg-grey-300);\n      font-weight: 400;\n      top: 0;\n    }\n    @media (max-width: 35.98em) {\n      :host thead th {\n        position: sticky;\n      }\n    }\n    :host tbody {\n      /* week numbers */\n      /* dates */\n    }\n    :host tbody th {\n      font-weight: 400;\n    }\n    :host tbody td {\n      border: solid 1px transparent;\n      font-weight: 500;\n      -webkit-user-select: none;\n         -moz-user-select: none;\n              user-select: none;\n      /* weekend */\n      /* today */\n      /* hover */\n      /* focus */\n      /* selected */\n      /* highlighted */\n      /* active (pressed) */\n      /* disabled */\n    }\n    :host tbody td.sg-date-holiday:not(.disabled) {\n      background: var(--sg-bg-level-2);\n      color: hsl(var(--sg-hsl-red-2));\n    }\n    :host tbody td.today {\n      background: transparent;\n      border-radius: 4px;\n      box-shadow: inset 0 0 0 2px var(--grey-1000);\n      color: var(--grey-1000);\n    }\n    :host tbody td:hover:not(.disabled) {\n      background: var(--grey-500);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: var(--gds-sys-color-font);\n      cursor: pointer;\n    }\n    :host tbody td:focus-visible:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host tbody td:focus-visible:not(.disabled) {\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n      z-index: 0;\n    }\n    :host tbody td[aria-selected=true] {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td[tabindex=\"0\"] {\n      border-radius: 4px;\n    }\n    :host tbody td:hover:active:not(.disabled) {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td.disabled {\n      background: hsl(var(--sg-hsl-disabled-background));\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-disabled-color));\n      cursor: not-allowed;\n      font-weight: 400;\n    }\n    :host tbody td.disabled.sg-date-holiday {\n      color: hsla(var(--sg-hsl-red-2), 0.25);\n    }\n    :host tbody td.disabled .number,\n    :host tbody td.disabled .indicator-dot {\n      --_color: hsl(var(--sg-hsl-disabled-color)) !important;\n    }\n    :host tbody td.custom-date {\n      position: relative;\n    }\n    :host tbody .number {\n      color: var(--_color, \"currentColor\");\n    }\n    :host tbody .indicator-dot {\n      display: block;\n      width: 0.375rem;\n      height: 0.375rem;\n      top: 1.5rem;\n      border-radius: 50%;\n      margin: auto;\n      position: absolute;\n      inset-block-end: 0.125rem;\n      inset-inline: 0;\n      background-color: var(--_color);\n    }\n    :host table {\n      flex-grow: 1;\n      width: 100%;\n    }\n    :host table td {\n      width: 3rem;\n      height: 3rem;\n    }\n  }\n  @layer _modifiers {\n    .week-number {\n      border-right: solid 1px var(--gds-ref-pallet-base300);\n      font-weight: 400;\n      pointer-events: none;\n    }\n  }\n}";
+export default styles;

package/components/calendar/index.js

@@ -1 +1 @@
-export * from "./calendar";
+export * from "./calendar.js";

package/components/card/card.component.js

@@ -3,12 +3,12 @@ import {
 } from "../../chunks/chunk.QTSIPXV3.js";
 import { css } from "lit";
 import { tokens } from "../../tokens.style";
-import { styleExpressionProperty } from "../../utils/decorators/style-expression-property";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import {
   gdsCustomElement,
   html
-} from "../../utils/helpers/custom-element-scoping";
-import { GdsDiv } from "../div/div.component";
+} from "../../utils/helpers/custom-element-scoping.js";
+import { GdsDiv } from "../div/div.component.js";
 let GdsCard = class extends GdsDiv {
   /// This sets variables that are used in the default styles. Any other SEPs will override.
   constructor() {

package/components/card/card.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsCard } from "./card.component";
+import { GdsCard } from "./card.component.js";
 GdsCard.define();
 export {
   GdsCard

package/components/card/index.js

@@ -1 +1 @@
-export * from "./card";
+export * from "./card.js";

package/components/coachmark/coachmark.component.js

@@ -19,8 +19,8 @@ import {
   offset,
   shift
 } from "@floating-ui/dom";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement, html } from "../../scoping";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
 import styles from "./coachmark.styles";
 let GdsCoachmark = class extends GdsElement {
   constructor() {

package/components/coachmark/coachmark.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsCoachmark } from "./coachmark.component";
+import { GdsCoachmark } from "./coachmark.component.js";
 GdsCoachmark.define();
 export {
   GdsCoachmark

package/components/coachmark/index.js

@@ -1 +1 @@
-export * from "./coachmark";
+export * from "./coachmark.js";

package/components/container/container.component.js

@@ -1,8 +1,8 @@
 import {
   __decorateClass
 } from "../../chunks/chunk.QTSIPXV3.js";
-import { gdsCustomElement } from "../../scoping";
-import { GdsDiv } from "../div/div.component";
+import { gdsCustomElement } from "../../scoping.js";
+import { GdsDiv } from "../div/div.component.js";
 let GdsContainer = class extends GdsDiv {
 };
 GdsContainer = __decorateClass([

package/components/container/container.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsContainer } from "./container.component";
+import { GdsContainer } from "./container.component.js";
 GdsContainer.define();
 export {
   GdsContainer

package/components/container/index.js

@@ -1 +1 @@
-export * from "./container";
+export * from "./container.js";

package/components/context-menu/context-menu.component.js

@@ -10,22 +10,22 @@ import { nothing } from "lit";
 import { property, queryAsync } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
-import { GdsElement } from "../../gds-element";
-import { GdsMenuItem } from "../../primitives/menu/menu-item.component";
-import { GdsMenu } from "../../primitives/menu/menu.component";
+import { GdsElement } from "../../gds-element.js";
+import { GdsMenuItem } from "../../primitives/menu/menu-item.component.js";
+import { GdsMenu } from "../../primitives/menu/menu.component.js";
 import { tokens } from "../../tokens.style";
-import { TransitionalStyles } from "../../transitional-styles";
+import { TransitionalStyles } from "../../transitional-styles.js";
 import {
   gdsCustomElement,
   html
-} from "../../utils/helpers/custom-element-scoping";
+} from "../../utils/helpers/custom-element-scoping.js";
 import {
   withLayoutChildProps,
   withMarginProps
-} from "../../utils/mixins/declarative-layout-mixins";
-import { GdsPopover } from "../popover/popover.component";
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { GdsPopover } from "../popover/popover.component.js";
 import styles from "./context-menu.styles";
-import { GdsMenuHeading } from "../../primitives/menu/menu-heading.component";
+import { GdsMenuHeading } from "../../primitives/menu/menu-heading.component.js";
 let GdsContextMenu = class extends withMarginProps(
   withLayoutChildProps(GdsElement)
 ) {

package/components/context-menu/context-menu.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsContextMenu } from "./context-menu.component";
+import { GdsContextMenu } from "./context-menu.component.js";
 GdsContextMenu.define();
 export {
   GdsContextMenu

package/components/context-menu/context-menu.trans.styles.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QTSIPXV3.js";
 import * as Listbox from "../../primitives/listbox/listbox.trans.styles";
-import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles";
+import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles.js";
 import * as Popover from "../popover/popover.trans.styles";
 import styles from "./context-menu.trans.styles.scss.js";
 function register() {

package/components/context-menu/context-menu.trans.styles.scss.js

@@ -1,4 +1,2 @@
-
-            const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n  font-size: 0;\n  width: 1rem;\n  height: 1rem;\n  display: inline-block;\n}\ni.sg-icon::before {\n  content: \"\";\n  display: inline-block;\n  background: var(--color);\n  width: 100%;\n  height: 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n  -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -10px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(-135deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -4px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(45deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: var(--sg-border-radius);\n      border: solid var(--sg-border-width) var(--sg-border-color);\n      font-weight: 500;\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n      background-color: transparent;\n      border: 0.0625rem solid transparent;\n      padding: 0.625rem;\n      height: 2.75rem;\n      width: 2.75rem;\n      min-width: auto;\n      --color: var(--gds-ref-pallet-base800);\n    }\n    button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    button:focus, button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    @media (max-width: 35.98em) {\n      button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      button {\n        border: 2px solid currentcolor;\n      }\n    }\n    button.small {\n      min-height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      line-height: 1rem;\n    }\n    button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    .form-group button {\n      margin-top: -0.625rem;\n    }\n    button.small {\n      height: 2rem;\n      width: 2rem;\n      padding: 0.4375rem;\n      line-height: 1.125rem;\n    }\n    button svg {\n      height: 1rem;\n      width: 1rem;\n    }\n    button path,\n    button line,\n    button circle,\n    button rect,\n    button ellipse,\n    button polyline,\n    button text {\n      fill: var(--gds-ref-pallet-base800);\n      stroke: var(--gds-ref-pallet-base800);\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n    }\n    button:hover, button.highlighted {\n      background-color: rgba(0, 0, 0, 0.1);\n      border-color: transparent;\n    }\n    button:active, button.highlighted:hover {\n      background-color: rgba(0, 0, 0, 0.2);\n      border-color: transparent;\n    }\n  }\n  @layer _overrides {\n    button {\n      border-color: transparent;\n      color: var(--gds-ref-pallet-base800);\n      display: flex;\n      gap: 0.5rem;\n      line-height: 0.75;\n      padding-inline: 0.4375rem;\n      width: auto;\n    }\n    button.highlighted {\n      background-color: var(--gds-ref-pallet-base300);\n    }\n  }\n}";
-            export default styles;
-          
+const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n  font-size: 0;\n  width: 1rem;\n  height: 1rem;\n  display: inline-block;\n}\ni.sg-icon::before {\n  content: \"\";\n  display: inline-block;\n  background: var(--color);\n  width: 100%;\n  height: 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n  -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -10px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(-135deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -4px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(45deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: var(--sg-border-radius);\n      border: solid var(--sg-border-width) var(--sg-border-color);\n      font-weight: 500;\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n      background-color: transparent;\n      border: 0.0625rem solid transparent;\n      padding: 0.625rem;\n      height: 2.75rem;\n      width: 2.75rem;\n      min-width: auto;\n      --color: var(--gds-ref-pallet-base800);\n    }\n    button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    button:focus, button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    @media (max-width: 35.98em) {\n      button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      button {\n        border: 2px solid currentcolor;\n      }\n    }\n    button.small {\n      min-height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      line-height: 1rem;\n    }\n    button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    .form-group button {\n      margin-top: -0.625rem;\n    }\n    button.small {\n      height: 2rem;\n      width: 2rem;\n      padding: 0.4375rem;\n      line-height: 1.125rem;\n    }\n    button svg {\n      height: 1rem;\n      width: 1rem;\n    }\n    button path,\n    button line,\n    button circle,\n    button rect,\n    button ellipse,\n    button polyline,\n    button text {\n      fill: var(--gds-ref-pallet-base800);\n      stroke: var(--gds-ref-pallet-base800);\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n    }\n    button:hover, button.highlighted {\n      background-color: rgba(0, 0, 0, 0.1);\n      border-color: transparent;\n    }\n    button:active, button.highlighted:hover {\n      background-color: rgba(0, 0, 0, 0.2);\n      border-color: transparent;\n    }\n  }\n  @layer _overrides {\n    button {\n      border-color: transparent;\n      color: var(--gds-ref-pallet-base800);\n      display: flex;\n      gap: 0.5rem;\n      line-height: 0.75;\n      padding-inline: 0.4375rem;\n      width: auto;\n    }\n    button.highlighted {\n      background-color: var(--gds-ref-pallet-base300);\n    }\n  }\n}";
+export default styles;

package/components/context-menu/index.js

@@ -1,3 +1,3 @@
-export * from "./context-menu";
-export * from "../../primitives/menu/menu-item";
-export * from "../../primitives/menu/menu-heading";
+export * from "./context-menu.js";
+export * from "../../primitives/menu/menu-item.js";
+export * from "../../primitives/menu/menu-heading.js";

package/components/datepicker/date-part-spinner.js

@@ -7,9 +7,9 @@ import {
 } from "../../chunks/chunk.QTSIPXV3.js";
 var _inputBuffer, _increment, _decrement, _handleClick, _handleFocus, _handleBlur, _handleWheel, _handleKeyDown, _focusNextSpinner, focusNextSpinner_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _formatNumber, formatNumber_fn, _clamp, clamp_fn, _clearInputBuffer, clearInputBuffer_fn;
 import { property, state } from "lit/decorators.js";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement, html } from "../../scoping";
-import { watch } from "../../utils/decorators/watch";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { watch } from "../../utils/decorators/watch.js";
 let GdsDatePartSpinner = class extends GdsElement {
   constructor() {
     super(...arguments);

package/components/datepicker/datepicker.component.js

@@ -15,30 +15,30 @@ import { repeat } from "lit/directives/repeat.js";
 import { until } from "lit/directives/until.js";
 import { when } from "lit/directives/when.js";
 import { isSameDay } from "date-fns";
-import { GdsButton } from "../../components/button/button.component";
-import { GdsDropdown } from "../../components/dropdown/dropdown.component";
-import { GdsFlex } from "../../components/flex/flex.component";
-import { gdsCustomElement, html } from "../../scoping";
+import { GdsButton } from "../../components/button/button.component.js";
+import { GdsDropdown } from "../../components/dropdown/dropdown.component.js";
+import { GdsFlex } from "../../components/flex/flex.component.js";
+import { gdsCustomElement, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style";
-import { TransitionalStyles } from "../../transitional-styles";
-import { watch } from "../../utils/decorators";
+import { TransitionalStyles } from "../../transitional-styles.js";
+import { watch } from "../../utils/decorators/index.js";
 import {
   dateArrayConverter,
   dateConverter
-} from "../../utils/helpers/attribute-converters";
+} from "../../utils/helpers/attribute-converters.js";
 import {
   withLayoutChildProps,
   withMarginProps,
   withSizeXProps
-} from "../../utils/mixins/declarative-layout-mixins";
-import { GdsCalendar } from "../calendar/calendar.component";
-import { GdsFormControlElement } from "../form/form-control";
-import { IconCalendar } from "../icon/icons/calendar.component";
-import { IconCalenderAdd } from "../icon/icons/calender-add.component";
-import { IconChevronLeft } from "../icon/icons/chevron-left.component";
-import { IconChevronRight } from "../icon/icons/chevron-right.component";
-import { GdsPopover } from "../popover/popover.component";
-import { GdsDatePartSpinner } from "./date-part-spinner";
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { GdsCalendar } from "../calendar/calendar.component.js";
+import { GdsFormControlElement } from "../form/form-control.js";
+import { IconCalendar } from "../icon/icons/calendar.component.js";
+import { IconCalenderAdd } from "../icon/icons/calender-add.component.js";
+import { IconChevronLeft } from "../icon/icons/chevron-left.component.js";
+import { IconChevronRight } from "../icon/icons/chevron-right.component.js";
+import { GdsPopover } from "../popover/popover.component.js";
+import { GdsDatePartSpinner } from "./date-part-spinner.js";
 import { styles } from "./datepicker.styles";
 let Datepicker = class extends GdsFormControlElement {
   constructor() {

package/components/datepicker/datepicker.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsDatepicker } from "./datepicker.component";
+import { GdsDatepicker } from "./datepicker.component.js";
 GdsDatepicker.define();
 export {
   GdsDatepicker