@fluentui/web-components 3.0.0-alpha.19 → 3.0.0-alpha.20

package/dist/web-components.js

@@ -3424,6 +3424,12 @@ const keyEnter = "Enter";
 const keyEscape = "Escape";
 const keyHome = "Home";
 const keySpace = " ";
+const ArrowKeys = {
+  ArrowDown: keyArrowDown,
+  ArrowLeft: keyArrowLeft,
+  ArrowRight: keyArrowRight,
+  ArrowUp: keyArrowUp
+};
 
 /**
  * Expose ltr and rtl strings
@@ -7297,6 +7303,487 @@ function progressTemplate(options = {}) {
   return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div></div>`)} ${when(x => typeof x.value !== "number", html`<div class="progress" part="progress" slot="indeterminate"><slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator1)} ${staticallyCompose(options.indeterminateIndicator2)}</slot></div>`)}</template>`;
 }
 
+/**
+ * Radio Group orientation
+ * @public
+ */
+const RadioGroupOrientation = Orientation;
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#FASTRadioGroup} component.
+ * @public
+ */
+function radioGroupTemplate() {
+  return html`<template role="radiogroup" tabindex="${x => x.disabled ? -1 : void 0}" aria-disabled="${x => x.disabled}" aria-readonly="${x => x.readOnly}" aria-orientation="${x => x.orientation}" @click="${(x, c) => x.clickHandler(c.event)}" @mousedown="${(x, c) => x.handleDisabledClick(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @focusout="${(x, c) => x.focusOutHandler(c.event)}"><slot name="label"></slot><div class="positioning-region ${x => x.orientation === RadioGroupOrientation.horizontal ? "horizontal" : "vertical"}" part="positioning-region"><slot ${slotted({
+    property: "slottedRadioButtons",
+    filter: elements("[role=radio]")
+  })}></slot></div></template>`;
+}
+
+/**
+ * filters out any whitespace-only nodes, to be used inside a template.
+ *
+ * @param value - The Node that is being inspected
+ * @param index - The index of the node within the array
+ * @param array - The Node array that is being filtered
+ * @returns true if the node is not a whitespace-only node, false otherwise
+ *
+ * @public
+ */
+const whitespaceFilter = value => {
+  var _a;
+  return value.nodeType !== Node.TEXT_NODE || !!((_a = value.nodeValue) === null || _a === void 0 ? void 0 : _a.trim().length);
+};
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#(FASTRadio:class)} component.
+ * @public
+ */
+function radioTemplate(options = {}) {
+  return html`<template role="radio" aria-checked="${x => x.checked}" aria-required="${x => x.required}" aria-disabled="${x => x.disabled}" @keypress="${(x, c) => x.keypressHandler(c.event)}"><div part="control" class="control"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></div><label part="label" class="${x => {
+    var _a;
+    return ["label", !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length) && "label__hidden"].filter(Boolean).join(" ");
+  }}"><slot ${slotted({
+    property: "defaultSlottedNodes",
+    filter: whitespaceFilter
+  })}></slot></label></template>`;
+}
+
+class _Radio extends FASTElement {}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(FASTRadio:class)} component.
+ *
+ * @beta
+ */
+class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+class FASTRadio extends FormAssociatedRadio {
+  constructor() {
+    super();
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
+     *
+     * @internal
+     */
+    this.initialValue = "on";
+    this.proxy.setAttribute("type", "radio");
+  }
+  get radioGroup() {
+    return this.closest("[role=radiogroup]");
+  }
+  /**
+   * @internal
+   */
+  defaultCheckedChanged() {
+    var _a;
+    if (this.$fastController.isConnected && !this.dirtyChecked) {
+      // Setting this.checked will cause us to enter a dirty state,
+      // but if we are clean when defaultChecked is changed, we want to stay
+      // in a clean state, so reset this.dirtyChecked
+      if (!this.isInsideRadioGroup()) {
+        this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
+        this.dirtyChecked = false;
+      }
+    }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    var _a, _b;
+    super.connectedCallback();
+    this.validate();
+    if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" && this.getAttribute("tabindex") === null) {
+      if (!this.disabled) {
+        this.setAttribute("tabindex", "0");
+      }
+    }
+    if (this.checkedAttribute) {
+      if (!this.dirtyChecked) {
+        // Setting this.checked will cause us to enter a dirty state,
+        // but if we are clean when defaultChecked is changed, we want to stay
+        // in a clean state, so reset this.dirtyChecked
+        if (!this.isInsideRadioGroup()) {
+          this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
+          this.dirtyChecked = false;
+        }
+      }
+    }
+  }
+  isInsideRadioGroup() {
+    return this.radioGroup !== null;
+  }
+  /**
+   * Handles key presses on the radio.
+   * @beta
+   */
+  keypressHandler(e) {
+    var _a;
+    switch (e.key) {
+      case keySpace:
+        if (!this.checked && !((_a = this.radioGroup) === null || _a === void 0 ? void 0 : _a.readOnly)) {
+          this.checked = true;
+        }
+        return;
+    }
+    return true;
+  }
+}
+__decorate([observable], FASTRadio.prototype, "name", void 0);
+__decorate([observable], FASTRadio.prototype, "defaultSlottedNodes", void 0);
+
+/**
+ * An Radio Group Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
+ *
+ * @slot label - The slot for the label
+ * @slot - The default slot for radio buttons
+ * @csspart positioning-region - The positioning region for laying out the radios
+ * @fires change - Fires a custom 'change' event when the value changes
+ *
+ * @public
+ */
+class FASTRadioGroup extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * The orientation of the group
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    this.orientation = RadioGroupOrientation.horizontal;
+    this.radioChangeHandler = e => {
+      const changedRadio = e.target;
+      if (changedRadio.checked) {
+        this.slottedRadioButtons.forEach(radio => {
+          if (radio !== changedRadio) {
+            radio.checked = false;
+            if (!this.isInsideFoundationToolbar) {
+              radio.setAttribute("tabindex", "-1");
+            }
+          }
+        });
+        this.selectedRadio = changedRadio;
+        this.value = changedRadio.value;
+        changedRadio.setAttribute("tabindex", "0");
+        this.focusedRadio = changedRadio;
+      }
+      e.stopPropagation();
+    };
+    this.moveToRadioByIndex = (group, index) => {
+      const radio = group[index];
+      if (!this.isInsideToolbar) {
+        radio.setAttribute("tabindex", "0");
+        radio.checked = true;
+        this.selectedRadio = radio;
+      }
+      this.focusedRadio = radio;
+      radio.focus();
+    };
+    this.moveRightOffGroup = () => {
+      var _a;
+      (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    this.moveLeftOffGroup = () => {
+      var _a;
+      (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    /**
+     * @internal
+     */
+    this.focusOutHandler = e => {
+      const group = this.slottedRadioButtons;
+      const radio = e.target;
+      const index = radio !== null ? group.indexOf(radio) : 0;
+      const focusedIndex = this.focusedRadio ? group.indexOf(this.focusedRadio) : -1;
+      if (focusedIndex === 0 && index === focusedIndex || focusedIndex === group.length - 1 && focusedIndex === index) {
+        if (!this.selectedRadio) {
+          this.focusedRadio = group[0];
+          this.focusedRadio.setAttribute("tabindex", "0");
+          group.forEach(nextRadio => {
+            if (nextRadio !== this.focusedRadio) {
+              nextRadio.setAttribute("tabindex", "-1");
+            }
+          });
+        } else {
+          this.focusedRadio = this.selectedRadio;
+          if (!this.isInsideFoundationToolbar) {
+            this.selectedRadio.setAttribute("tabindex", "0");
+            group.forEach(nextRadio => {
+              if (nextRadio !== this.selectedRadio) {
+                nextRadio.setAttribute("tabindex", "-1");
+              }
+            });
+          }
+        }
+      }
+      return true;
+    };
+    /**
+     * @internal
+     */
+    this.handleDisabledClick = e => {
+      // prevent focus events on items from the click handler when disabled
+      if (this.disabled) {
+        e.preventDefault();
+        return;
+      }
+      return true;
+    };
+    /**
+     * @internal
+     */
+    this.clickHandler = e => {
+      if (this.disabled) {
+        return;
+      }
+      e.preventDefault();
+      const radio = e.target;
+      if (radio && radio instanceof FASTRadio) {
+        radio.checked = true;
+        radio.setAttribute("tabindex", "0");
+        this.selectedRadio = radio;
+        this.focusedRadio = radio;
+      }
+    };
+    this.shouldMoveOffGroupToTheRight = (index, group, key) => {
+      return index === group.length && this.isInsideToolbar && key === keyArrowRight;
+    };
+    this.shouldMoveOffGroupToTheLeft = (group, key) => {
+      const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
+      return index < 0 && this.isInsideToolbar && key === keyArrowLeft;
+    };
+    this.checkFocusedRadio = () => {
+      if (this.focusedRadio !== null && !this.focusedRadio.checked) {
+        this.focusedRadio.checked = true;
+        this.focusedRadio.setAttribute("tabindex", "0");
+        this.focusedRadio.focus();
+        this.selectedRadio = this.focusedRadio;
+      }
+    };
+    this.moveRight = e => {
+      const group = this.slottedRadioButtons;
+      let index = 0;
+      index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
+      if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
+        this.moveRightOffGroup();
+        return;
+      } else if (index === group.length) {
+        index = 0;
+      }
+      /* looping to get to next radio that is not disabled */
+      /* matching native radio/radiogroup which does not select an item if there is only 1 in the group */
+      while (index < group.length && group.length > 1) {
+        if (!group[index].disabled) {
+          this.moveToRadioByIndex(group, index);
+          break;
+        } else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
+          break;
+        } else if (index + 1 >= group.length) {
+          if (this.isInsideToolbar) {
+            break;
+          } else {
+            index = 0;
+          }
+        } else {
+          index += 1;
+        }
+      }
+    };
+    this.moveLeft = e => {
+      const group = this.slottedRadioButtons;
+      let index = 0;
+      index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
+      index = index < 0 ? group.length - 1 : index;
+      if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
+        this.moveLeftOffGroup();
+        return;
+      }
+      /* looping to get to next radio that is not disabled */
+      while (index >= 0 && group.length > 1) {
+        if (!group[index].disabled) {
+          this.moveToRadioByIndex(group, index);
+          break;
+        } else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
+          break;
+        } else if (index - 1 < 0) {
+          index = group.length - 1;
+        } else {
+          index -= 1;
+        }
+      }
+    };
+    /**
+     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+     * navigation is different when there is an ancestor with role='toolbar'
+     *
+     * @internal
+     */
+    this.keydownHandler = e => {
+      const key = e.key;
+      if (key in ArrowKeys && (this.isInsideFoundationToolbar || this.disabled)) {
+        return true;
+      }
+      switch (key) {
+        case keyEnter:
+          {
+            this.checkFocusedRadio();
+            break;
+          }
+        case keyArrowRight:
+        case keyArrowDown:
+          {
+            if (this.direction === Direction.ltr) {
+              this.moveRight(e);
+            } else {
+              this.moveLeft(e);
+            }
+            break;
+          }
+        case keyArrowLeft:
+        case keyArrowUp:
+          {
+            if (this.direction === Direction.ltr) {
+              this.moveLeft(e);
+            } else {
+              this.moveRight(e);
+            }
+            break;
+          }
+        default:
+          {
+            return true;
+          }
+      }
+    };
+  }
+  disabledChanged() {}
+  nameChanged() {
+    if (this.slottedRadioButtons) {
+      this.slottedRadioButtons.forEach(radio => {
+        radio.setAttribute("name", this.name);
+      });
+    }
+  }
+  valueChanged() {
+    if (this.slottedRadioButtons) {
+      this.slottedRadioButtons.forEach(radio => {
+        if (radio.value === this.value) {
+          radio.checked = true;
+          this.selectedRadio = radio;
+        }
+      });
+    }
+    this.$emit("change");
+  }
+  slottedRadioButtonsChanged(oldValue, newValue) {
+    if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
+      this.setupRadioButtons();
+    }
+  }
+  get parentToolbar() {
+    return this.closest('[role="toolbar"]');
+  }
+  get isInsideToolbar() {
+    var _a;
+    return (_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false;
+  }
+  get isInsideFoundationToolbar() {
+    var _a;
+    return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a["$fastController"]);
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.direction = getDirection(this);
+    this.setupRadioButtons();
+  }
+  disconnectedCallback() {
+    this.slottedRadioButtons.forEach(radio => {
+      radio.removeEventListener("change", this.radioChangeHandler);
+    });
+  }
+  setupRadioButtons() {
+    const checkedRadios = this.slottedRadioButtons.filter(radio => {
+      return radio.hasAttribute("checked");
+    });
+    const numberOfCheckedRadios = checkedRadios ? checkedRadios.length : 0;
+    if (numberOfCheckedRadios > 1) {
+      const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
+      lastCheckedRadio.checked = true;
+    }
+    let foundMatchingVal = false;
+    this.slottedRadioButtons.forEach(radio => {
+      if (this.name !== undefined) {
+        radio.setAttribute("name", this.name);
+      }
+      if (this.value && this.value === radio.value) {
+        this.selectedRadio = radio;
+        this.focusedRadio = radio;
+        radio.checked = true;
+        radio.setAttribute("tabindex", "0");
+        foundMatchingVal = true;
+      } else {
+        if (!this.isInsideFoundationToolbar) {
+          radio.setAttribute("tabindex", "-1");
+        }
+        radio.checked = false;
+      }
+      radio.addEventListener("change", this.radioChangeHandler);
+    });
+    if (this.value === undefined && this.slottedRadioButtons.length > 0) {
+      const checkedRadios = this.slottedRadioButtons.filter(radio => {
+        return radio.hasAttribute("checked");
+      });
+      const numberOfCheckedRadios = checkedRadios !== null ? checkedRadios.length : 0;
+      if (numberOfCheckedRadios > 0 && !foundMatchingVal) {
+        const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
+        lastCheckedRadio.checked = true;
+        this.focusedRadio = lastCheckedRadio;
+        lastCheckedRadio.setAttribute("tabindex", "0");
+      } else {
+        this.slottedRadioButtons[0].setAttribute("tabindex", "0");
+        this.focusedRadio = this.slottedRadioButtons[0];
+      }
+    }
+  }
+}
+__decorate([attr({
+  attribute: "readonly",
+  mode: "boolean"
+})], FASTRadioGroup.prototype, "readOnly", void 0);
+__decorate([attr({
+  attribute: "disabled",
+  mode: "boolean"
+})], FASTRadioGroup.prototype, "disabled", void 0);
+__decorate([attr], FASTRadioGroup.prototype, "name", void 0);
+__decorate([attr], FASTRadioGroup.prototype, "value", void 0);
+__decorate([attr], FASTRadioGroup.prototype, "orientation", void 0);
+__decorate([observable], FASTRadioGroup.prototype, "childItems", void 0);
+__decorate([observable], FASTRadioGroup.prototype, "slottedRadioButtons", void 0);
+
 /**
  * The orientation of a {@link @microsoft/fast-foundation#(FASTSlider:class)}.
  * @public
@@ -8157,9 +8644,9 @@ function display(displayValue) {
  */
 class Accordion extends FASTAccordion {}
 
-const template$m = accordionTemplate();
+const template$o = accordionTemplate();
 
-const styles$l = css`
+const styles$n = css`
   ${display('flex')}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -8179,10 +8666,10 @@ const FluentDesignSystem = Object.freeze({
  * @remarks
  * HTML Element: \<fluent-accordion\>
  */
-const definition$m = Accordion.compose({
+const definition$o = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$m,
-  styles: styles$l
+  template: template$o,
+  styles: styles$n
 });
 
 /**
@@ -9002,7 +9489,7 @@ var tokens = /*#__PURE__*/Object.freeze({
     shadow64Brand: shadow64Brand
 });
 
-const styles$k = css`
+const styles$m = css`
   ${display('block')}
 
   :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;vertical-align:middle;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.heading-content{height:100%;display:flex;align-items:center}.button{box-sizing:border-box;appearance:none;border:none;outline:none;text-align:start;cursor:pointer;font-family:inherit;height:44px;color:${colorNeutralForeground1};background:${colorTransparentBackground};line-height:${lineHeightBase300};height:auto;padding:0;font-size:inherit;grid-column:auto / span 2;grid-row:1}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}.icon{display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-right:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.region{margin:0 ${spacingHorizontalM}}::slotted([slot='start']),::slotted([slot='end']){justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1 / span 1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .region{display:block}:host([expanded]) .default-collapsed-icon,:host([expanded]) ::slotted([slot='collapsed-icon']),:host(:not([expanded])) .default-expanded-icon,:host(:not([expanded])) ::slotted([slot='expanded-icon']),:host([expanded]) ::slotted([slot='end']),::slotted([slot='start']),.region{display:none}:host([expanded]) ::slotted([slot='start']),:host([expanded]) ::slotted([slot='expanded-icon']),:host(:not([expanded])) ::slotted([slot='collapsed-icon']),::slotted([slot='end']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([expand-icon-position='end']) :slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) ::slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) .icon{grid-column:4 / span 1;grid-row:1;display:flex;padding-left:10px;padding-right:0}:host([expand-icon-position='end']) .button{grid-column:2 / span 3;grid-row:1}:host([block]){max-width:100%}:host([expand-icon-position='end']) .heading{grid-template-columns:auto auto 28px}:host([expand-icon-position='end']) .icon{grid-column:5 / span 1}:host([block][expand-icon-position='end']) .heading{grid-template-columns:auto 1fr}:host([block][expand-icon-position='end']) .icon{grid-column:5 / span 1}`;
@@ -9037,7 +9524,7 @@ const chevronDown20Filled = html.partial(`<svg
  * The template for the fluent-accordion component.
  * @public
  */
-const template$l = accordionItemTemplate({
+const template$n = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
@@ -9051,10 +9538,10 @@ const template$l = accordionItemTemplate({
  * @remarks
  * HTML Element: \<fluent-accordion-item\>
  */
-const definition$l = AccordionItem.compose({
+const definition$n = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$l,
-  styles: styles$k
+  template: template$n,
+  styles: styles$m
 });
 
 /**
@@ -9191,18 +9678,18 @@ const AnchorButtonSize = ButtonSize;
  * The template for the Button component.
  * @public
  */
-const template$k = anchorTemplate();
+const template$m = anchorTemplate();
 
 // Need to support icon hover styles
-const styles$j = css`
+const styles$l = css`
   ${display('inline-flex')}
 
   :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}.content{display:inherit}:host(:hover) .control{background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active) .control{background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host .control:focus-visible{border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS}}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:${borderRadiusCircular}}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:${borderRadiusNone}}:host([appearance='primary']) .control{background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active) .control{background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']) .control:focus-visible{border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:${colorTransparentBackground}}:host([appearance='outline']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active) .control{background-color:${colorTransparentBackgroundPressed}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active) .control{background-color:${colorTransparentBackground}}:host([appearance='subtle']) .control{background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active) .control{background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control{background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active) .control{background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active) .control{border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
     .control{background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`;
 
 // Need to support icon hover styles
-const styles$i = css`
-  ${styles$j}
+const styles$k = css`
+  ${styles$l}
 
   .content{text-align:center}`;
 
@@ -9214,10 +9701,10 @@ const styles$i = css`
  * @remarks
  * HTML Element: \<fluent-anchor-button\>
  */
-const definition$k = AnchorButton.compose({
+const definition$m = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$k,
-  styles: styles$i,
+  template: template$m,
+  styles: styles$k,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -9474,7 +9961,7 @@ const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 2
 function avatarTemplate() {
   return html`<template role="img" data-color=${x => x.generateColor()}><slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot></template>`;
 }
-const template$j = avatarTemplate();
+const template$l = avatarTemplate();
 
 const animations = {
   fastOutSlowInMax: curveDecelerateMax,
@@ -9490,7 +9977,7 @@ const animations = {
 /** Avatar styles
  * @public
  */
-const styles$h = css`
+const styles$j = css`
   ${display('inline-flex')} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin} ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick} ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
 /**
@@ -9500,10 +9987,10 @@ const styles$h = css`
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-const definition$j = Avatar.compose({
+const definition$l = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$j,
-  styles: styles$h
+  template: template$l,
+  styles: styles$j
 });
 
 /**
@@ -9590,7 +10077,7 @@ applyMixins(Badge, StartEnd);
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$i = badgeTemplate();
+const template$k = badgeTemplate();
 
 const textPadding = spacingHorizontalXXS;
 const badgeBaseStyles = css.partial`
@@ -9867,7 +10354,7 @@ const badgeTintStyles = css.partial`
 /** Badge styles
  * @public
  */
-const styles$g = css`
+const styles$i = css`
   :host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -9885,10 +10372,10 @@ const styles$g = css`
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-const definition$i = Badge.compose({
+const definition$k = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$i,
-  styles: styles$g
+  template: template$k,
+  styles: styles$i
 });
 
 /**
@@ -9959,7 +10446,7 @@ __decorate([attr({
  * The template for the Button component.
  * @public
  */
-const template$h = buttonTemplate$1();
+const template$j = buttonTemplate$1();
 
 /**
  * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
@@ -9969,10 +10456,10 @@ const template$h = buttonTemplate$1();
  * @remarks
  * HTML Element: \<fluent-button\>
  */
-const definition$h = Button.compose({
+const definition$j = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$h,
-  styles: styles$j,
+  template: template$j,
+  styles: styles$l,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -10011,11 +10498,11 @@ function buttonTemplate(options = {}) {
  * The template for the Button component.
  * @public
  */
-const template$g = buttonTemplate();
+const template$i = buttonTemplate();
 
 // Need to support icon hover styles
-const styles$f = css`
-  ${styles$j}
+const styles$h = css`
+  ${styles$l}
 
   :host .control,:host(:is([size])) .control{gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:hover,[appearance='primary']:active))
     ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='subtle'],[appearance='subtle']:hover,[appearance='subtle']:active))
@@ -10030,10 +10517,10 @@ const styles$f = css`
  * @remarks
  * HTML Element: \<fluent-comopund-button\>
  */
-const definition$g = CompoundButton.compose({
+const definition$i = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$g,
-  styles: styles$f,
+  template: template$i,
+  styles: styles$h,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -10172,12 +10659,12 @@ function composeTemplate(options = {}) {
  * The template for the Counter Badge component.
  * @public
  */
-const template$f = composeTemplate();
+const template$h = composeTemplate();
 
 /** Badge styles
  * @public
  */
-const styles$e = css`
+const styles$g = css`
   :host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -10194,10 +10681,10 @@ const styles$e = css`
  * @remarks
  * HTML Element: \<fluent-counter-badge\>
  */
-const definition$f = CounterBadge.compose({
+const definition$h = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$f,
-  styles: styles$e
+  template: template$h,
+  styles: styles$g
 });
 
 /**
@@ -10239,12 +10726,12 @@ const DividerAppearance = {
  * Template for the Divider component
  * @public
  */
-const template$e = dividerTemplate();
+const template$g = dividerTemplate();
 
 /** Divider styles
  * @public
  */
-const styles$d = css`
+const styles$f = css`
   ${display('flex')}
 
   :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`;
@@ -10256,10 +10743,10 @@ const styles$d = css`
  * @remarks
  * HTML Element: \<fluent-divider\>
  */
-const definition$e = Divider.compose({
+const definition$g = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$e,
-  styles: styles$d
+  template: template$g,
+  styles: styles$f
 });
 
 /**
@@ -10304,13 +10791,13 @@ const ImageShape = {
  * Template for the Image component
  * @public
  */
-const template$d = html`<slot></slot>`;
+const template$f = html`<slot></slot>`;
 
 /** Image styles
  *
  * @public
  */
-const styles$c = css`
+const styles$e = css`
   :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
 /**
@@ -10320,10 +10807,10 @@ const styles$c = css`
  * @remarks
  * HTML Element: \<fluent-image\>
  */
-const definition$d = Image.compose({
+const definition$f = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
-  template: template$d,
-  styles: styles$c
+  template: template$f,
+  styles: styles$e
 });
 
 /**
@@ -10363,7 +10850,7 @@ __decorate([attr({
 /** Label styles
  * @public
  */
-const styles$b = css`
+const styles$d = css`
   ${display('flex')}
 
   :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};color:${colorNeutralForeground1}}.asterisk{color:${colorPaletteRedForeground1};margin-left:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400};font-weight:${fontWeightSemibold}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
@@ -10375,7 +10862,7 @@ const styles$b = css`
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
 }
-const template$c = labelTemplate();
+const template$e = labelTemplate();
 
 /**
  * The Fluent Label Element.
@@ -10385,10 +10872,10 @@ const template$c = labelTemplate();
  * @remarks
  * HTML Element: \<fluent-label\>
  */
-const definition$c = Label.compose({
+const definition$e = Label.compose({
   name: `${FluentDesignSystem.prefix}-label`,
-  template: template$c,
-  styles: styles$b
+  template: template$e,
+  styles: styles$d
 });
 
 /**
@@ -10417,7 +10904,7 @@ const MenuButtonSize = ButtonSize;
  * The template for the Button component.
  * @public
  */
-const template$b = buttonTemplate$1({
+const template$d = buttonTemplate$1({
   end: html.partial(`<svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path></svg>`)
 });
 
@@ -10429,10 +10916,10 @@ const template$b = buttonTemplate$1({
  * @remarks
  * HTML Element: \<fluent-button\>
  */
-const definition$b = MenuButton.compose({
+const definition$d = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
-  template: template$b,
-  styles: styles$j,
+  template: template$d,
+  styles: styles$l,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -10446,7 +10933,7 @@ class MenuItem extends FASTMenuItem {}
 
 const Checkmark16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
 const chevronRight16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
-const template$a = menuItemTemplate({
+const template$c = menuItemTemplate({
   checkboxIndicator: Checkmark16Filled,
   expandCollapseGlyph: chevronRight16Filled,
   radioIndicator: Checkmark16Filled
@@ -10455,7 +10942,7 @@ const template$a = menuItemTemplate({
 /** MenuItem styles
  * @public
  */
-const styles$a = css`
+const styles$c = css`
   ${display('grid')}
 
   :host{grid-template-columns:20px 20px auto 20px;align-items:center;grid-gap:4px;height:32px;background:${colorNeutralBackground1};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};padding:0 10px;cursor:pointer;overflow:visible;contain:layout}:host(:hover){background:${colorNeutralBackground1Hover}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}.checkbox,.radio{display:none}.input-container,.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']),:host([checked]) .checkbox,:host([checked]) .radio{display:inline-flex;justify-content:center;align-items:center;color:${colorNeutralForeground2}}.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']){height:32px;font-size:${fontSizeBase500};width:fit-content}.input-container{width:20px}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap;grid-column:4 / span 1;justify-self:flex-end}.expand-collapse-glyph-container{grid-column:4 / span 1;justify-self:flex-end}:host(:hover) .input-container,:host(:hover) .expand-collapse-glyph-container,:host(:hover) .content{color:${colorNeutralForeground2Hover}}:host([icon]:hover) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Hover}}:host(:active){background-color:${colorNeutralBackground1Selected}}:host(:active) .input-container,:host(:active) .expand-collapse-glyph-container,:host(:active) .content{color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host([disabled]){background-color:${colorNeutralBackgroundDisabled}}:host([disabled]) .content,:host([disabled]) .expand-collapse-glyph-container,:host([disabled]) ::slotted([slot='end']),:host([disabled]) ::slotted([slot='start']){color:${colorNeutralForegroundDisabled}}:host([data-indent]){display:grid}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']){display:grid}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1}:host([data-indent='2'][aria-haspopup='menu']) .expand-collapse-glyph-container{grid-column:5 / span 1}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']) .content,:host([data-indent='1'][role='menuitemradio']) .content{grid-column:auto / span 1}:host([icon]) ::slotted([slot='end']),:host([data-indent='1']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}:host([data-indent='2']){display:grid;grid-template-columns:20px 20px auto auto}:host([data-indent='2']) .content{grid-column:3 / span 1}:host([data-indent='2']) .input-container{grid-column:1 / span 1}:host([data-indent='2']) ::slotted([slot='start']){grid-column:2 / span 1}:host([aria-haspopup='menu']){grid-template-columns:20px auto auto 20px}:host([data-indent='2'][aria-haspopup='menu']){grid-template-columns:20px 20px auto auto 20px}:host([aria-haspopup='menu']) ::slotted([slot='end']){grid-column:3 / span 1;justify-self:flex-end}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}`;
@@ -10469,10 +10956,10 @@ const styles$a = css`
  * @remarks
  * HTML Element: <fluent-menu-item>
  */
-const definition$a = MenuItem.compose({
+const definition$c = MenuItem.compose({
   name: `${FluentDesignSystem.prefix}-menu-item`,
-  template: template$a,
-  styles: styles$a
+  template: template$c,
+  styles: styles$c
 });
 
 /**
@@ -10509,12 +10996,12 @@ class MenuList extends FASTMenu {
   }
 }
 
-const template$9 = menuTemplate();
+const template$b = menuTemplate();
 
 /** MenuList styles
  * @public
  */
-const styles$9 = css`
+const styles$b = css`
   ${display('flex')}
 
   :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
@@ -10528,10 +11015,10 @@ const styles$9 = css`
  * @remarks
  * HTML Element: <fluent-menu-list>
  */
-const definition$9 = MenuList.compose({
+const definition$b = MenuList.compose({
   name: `${FluentDesignSystem.prefix}-menu-list`,
-  template: template$9,
-  styles: styles$9
+  template: template$b,
+  styles: styles$b
 });
 
 /**
@@ -10585,7 +11072,7 @@ const ProgressBarValidationState = {
 /** ProgressBar styles
  * @public
  */
-const styles$8 = css`
+const styles$a = css`
   ${display('flex')}
 
   :host{align-items:center;height:2px;overflow-x:hidden;border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']),:host([thickness='large']) .progress,:host([thickness='large']) .determinate{height:4px}:host([shape='square']),:host([shape='square']) .progress,:host([shape='square']) .determinate{border-radius:0}:host([validation-state='error']) .determinate{background-color:${colorPaletteRedBackground3}}:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background:linear-gradient(
@@ -10600,7 +11087,7 @@ const styles$8 = css`
       to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
     );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:60%;animation:indeterminate-2 3s infinite}@keyframes indeterminate-1{0%{opacity:1;transform:translateX(-100%)}70%{opacity:1;transform:translateX(300%)}70.01%{opacity:0}100%{opacity:0;transform:translateX(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translateX(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translateX(-150%)}100%{transform:translateX(166.66%);opacity:1}}`;
 
-const template$8 = progressTemplate({
+const template$a = progressTemplate({
   indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
   indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`
 });
@@ -10613,8 +11100,85 @@ const template$8 = progressTemplate({
  * @remarks
  * HTML Element: \<fluent-progress-bar\>
  */
-const definition$8 = ProgressBar.compose({
+const definition$a = ProgressBar.compose({
   name: `${FluentDesignSystem.prefix}-progress-bar`,
+  template: template$a,
+  styles: styles$a
+});
+
+/**
+ * The base class used for constructing a fluent-radio custom element
+ * @public
+ */
+class Radio extends FASTRadio {}
+
+/** Radio styles
+ * @public
+ */
+const styles$9 = css`
+  ${display('inline-grid')}
+
+  :host{grid-auto-flow:column;grid-template-columns:max-content;gap:${spacingHorizontalXS};align-items:center;height:32px;cursor:pointer;outline:none;position:relative;user-select:none;color:blue;color:var(--state-color,${colorNeutralForeground3});padding-inline-end:${spacingHorizontalS};--control-border-color:${colorNeutralStrokeAccessible};--checked-indicator-background-color:${colorCompoundBrandForeground1};--state-color:${colorNeutralForeground3}}:host([disabled]){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}.label{cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label__hidden{display:none}.control{box-sizing:border-box;align-items:center;border:1px solid var(--control-border-color,${colorNeutralStrokeAccessible});border-radius:${borderRadiusCircular};display:flex;height:16px;justify-content:center;margin:${spacingVerticalS} ${spacingHorizontalS};position:relative;width:16px;justify-self:center}.checked-indicator{border-radius:${borderRadiusCircular};height:10px;opacity:0;width:10px}:host([aria-checked='false']:hover) .control{color:${colorNeutralForeground2}}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host([aria-checked='true']) .checked-indicator{opacity:1}:host([aria-checked='true']) .control{border-color:var(--control-border-color,${colorNeutralStrokeAccessible})}:host([aria-checked='true']) .checked-indicator{background-color:var(--checked-indicator-background-color,${colorCompoundBrandForeground1})}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:hover) .checked-indicator{background-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([aria-checked='true']:active) .checked-indicator{background:${colorCompoundBrandForeground1Pressed}}:host([disabled]){color:${colorNeutralForegroundDisabled};pointer-events:none}:host([disabled]) .control{pointer-events:none;border-color:${colorNeutralForegroundDisabled}}:host([disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`;
+
+const template$9 = radioTemplate({
+  checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`
+});
+
+/**
+ * The Fluent Radio Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-radio\>
+ */
+const definition$9 = Radio.compose({
+  name: `${FluentDesignSystem.prefix}-radio`,
+  template: template$9,
+  styles: styles$9
+});
+
+/**
+ * The base class used for constructing a fluent-radio-group custom element
+ * @public
+ */
+class RadioGroup extends FASTRadioGroup {
+  constructor() {
+    super(...arguments);
+    /**
+     * sets radio layout styles
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: stacked
+     */
+    this.stacked = false;
+  }
+}
+__decorate([attr({
+  mode: 'boolean'
+})], RadioGroup.prototype, "stacked", void 0);
+
+/** RadioGroup styles
+ * @public
+ */
+const styles$8 = css`
+  ${display('flex')}
+
+  :host{align-items:flex-start;flex-direction:column;row-gap:${spacingVerticalS}}:host([disabled]) ::slotted([role='radio']){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}::slotted([slot='label']){color:${colorNeutralForeground1};padding:${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};cursor:default}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']) .positioning-region{flex-direction:row}:host([orientation='horizontal']) ::slotted([role='radio']){padding-inline-end:${spacingHorizontalS}}:host([orientation='horizontal'][stacked]) ::slotted([role='radio']){display:flex;flex-direction:column;padding-inline:${spacingHorizontalS};height:auto;align-items:center;justify-content:center}:host([disabled]) ::slotted([role='radio']){pointer-events:none}`;
+
+const template$8 = radioGroupTemplate();
+
+/**
+ * The Fluent RadioGroup Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-radio-group\>
+ */
+const definition$8 = RadioGroup.compose({
+  name: `${FluentDesignSystem.prefix}-radio-group`,
   template: template$8,
   styles: styles$8
 });
@@ -11300,7 +11864,7 @@ const template = buttonTemplate$1();
 
 // Need to support icon hover styles
 const styles = css`
-  ${styles$j}
+  ${styles$l}
 
   :host([aria-pressed="true"]) .control{border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover) .control{border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active) .control{border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']) .control{border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active) .control{background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']) .control{border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']) .control,:host([aria-pressed='true'][appearance='transparent']) .control{background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover) .control,:host([aria-pressed='true'][appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active) .control,:host([aria-pressed='true'][appearance='transparent']:active) .control{background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']) .control{border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover) .control{color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active) .control{color:${colorNeutralForeground2BrandPressed}}`;
 
@@ -11332,4 +11896,4 @@ const setTheme = theme => {
   }
 };
 
-export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$k as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$k as AnchorButtonTemplate, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$j as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$h as AvatarStyles, template$j as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$i as BadgeDefinition, BadgeShape, BadgeSize, styles$g as BadgeStyles, template$i as BadgeTemplate, Button, ButtonAppearance, definition$h as ButtonDefinition, ButtonShape, ButtonSize, styles$j as ButtonStyles, template$h as ButtonTemplate, CompoundButton, CompoundButtonAppearance, definition$g as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$f as CompoundButtonStyles, template$g as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$f as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$e as CounterBadgeStyles, template$f as CounterBadgeTemplate, Divider, DividerAlignContent, DividerAppearance, definition$e as DividerDefinition, DividerOrientation, DividerRole, styles$d as DividerStyles, template$e as DividerTemplate, Image, definition$d as ImageDefinition, ImageFit, ImageShape, styles$c as ImageStyles, template$d as ImageTemplate, Label, definition$c as LabelDefinition, styles$b as LabelStyles, template$c as LabelTemplate, MenuButton, MenuButtonAppearance, definition$b as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$j as MenuButtonStyles, template$b as MenuButtonTemplate, MenuItem, definition$a as MenuItemDefinition, styles$a as MenuItemStyles, template$a as MenuItemTemplate, MenuList, definition$9 as MenuListDefinition, styles$9 as MenuListStyles, template$9 as MenuListTemplate, ProgressBar, definition$8 as ProgressBarDefinition, ProgressBarShape, styles$8 as ProgressBarStyles, template$8 as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Slider, definition$7 as SliderDefinition, SliderOrientation, SliderSize, styles$7 as SliderStyles, template$7 as SliderTemplate, Spinner, SpinnerAppearance, definition$6 as SpinnerDefinition, SpinnerSize, styles$6 as SpinnerStyles, template$6 as SpinnerTemplate, Switch, SwitchLabelPosition, Tab, definition$3 as TabDefinition, TabPanel, definition$2 as TabPanelDefinition, styles$2 as TabPanelStyles, template$2 as TabPanelTemplate, styles$3 as TabStyles, template$3 as TabTemplate, Tabs, TabsAppearance, definition$4 as TabsDefinition, TabsOrientation, TabsSize, styles$4 as TabsStyles, template$4 as TabsTemplate, Text, TextAlign, definition$1 as TextDefinition, TextFont, TextSize, styles$1 as TextStyles, template$1 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$m as accordionDefinition, definition$l as accordionItemDefinition, styles$k as accordionItemStyles, template$l as accordionItemTemplate, styles$l as accordionStyles, template$m as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, definition$5 as definition, durationFast, durationFaster, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, setTheme, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin, styles$5 as switchStyles, template$5 as switchTemplate };
+export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$m as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$m as AnchorButtonTemplate, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$l as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$j as AvatarStyles, template$l as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$k as BadgeDefinition, BadgeShape, BadgeSize, styles$i as BadgeStyles, template$k as BadgeTemplate, Button, ButtonAppearance, definition$j as ButtonDefinition, ButtonShape, ButtonSize, styles$l as ButtonStyles, template$j as ButtonTemplate, CompoundButton, CompoundButtonAppearance, definition$i as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$h as CompoundButtonStyles, template$i as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$h as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$g as CounterBadgeStyles, template$h as CounterBadgeTemplate, Divider, DividerAlignContent, DividerAppearance, definition$g as DividerDefinition, DividerOrientation, DividerRole, styles$f as DividerStyles, template$g as DividerTemplate, Image, definition$f as ImageDefinition, ImageFit, ImageShape, styles$e as ImageStyles, template$f as ImageTemplate, Label, definition$e as LabelDefinition, styles$d as LabelStyles, template$e as LabelTemplate, MenuButton, MenuButtonAppearance, definition$d as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$l as MenuButtonStyles, template$d as MenuButtonTemplate, MenuItem, definition$c as MenuItemDefinition, styles$c as MenuItemStyles, template$c as MenuItemTemplate, MenuList, definition$b as MenuListDefinition, styles$b as MenuListStyles, template$b as MenuListTemplate, ProgressBar, definition$a as ProgressBarDefinition, ProgressBarShape, styles$a as ProgressBarStyles, template$a as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$9 as RadioDefinition, RadioGroup, definition$8 as RadioGroupDefinition, RadioGroupOrientation, styles$8 as RadioGroupStyles, template$8 as RadioGroupTemplate, styles$9 as RadioStyles, template$9 as RadioTemplate, Slider, definition$7 as SliderDefinition, SliderOrientation, SliderSize, styles$7 as SliderStyles, template$7 as SliderTemplate, Spinner, SpinnerAppearance, definition$6 as SpinnerDefinition, SpinnerSize, styles$6 as SpinnerStyles, template$6 as SpinnerTemplate, Switch, SwitchLabelPosition, Tab, definition$3 as TabDefinition, TabPanel, definition$2 as TabPanelDefinition, styles$2 as TabPanelStyles, template$2 as TabPanelTemplate, styles$3 as TabStyles, template$3 as TabTemplate, Tabs, TabsAppearance, definition$4 as TabsDefinition, TabsOrientation, TabsSize, styles$4 as TabsStyles, template$4 as TabsTemplate, Text, TextAlign, definition$1 as TextDefinition, TextFont, TextSize, styles$1 as TextStyles, template$1 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$o as accordionDefinition, definition$n as accordionItemDefinition, styles$m as accordionItemStyles, template$n as accordionItemTemplate, styles$n as accordionStyles, template$o as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, definition$5 as definition, durationFast, durationFaster, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, setTheme, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin, styles$5 as switchStyles, template$5 as switchTemplate };