From 2b99daee483179f9d61099abd3b84dc810e3ee70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Mon, 14 Aug 2023 19:33:02 +0300
Subject: [PATCH 01/23] feat(Select): define component skeleton from `bq-input`

---
 packages/bee-q/src/components.d.ts            | 123 ++++++++
 .../bee-q/src/components/select/bq-select.tsx | 282 ++++++++++++++++++
 .../bee-q/src/components/select/readme.md     |  67 +++++
 .../src/components/select/scss/bq-select.scss | 154 ++++++++++
 .../select/scss/bq-select.variables.scss      |  59 ++++
 5 files changed, 685 insertions(+)
 create mode 100644 packages/bee-q/src/components/select/bq-select.tsx
 create mode 100644 packages/bee-q/src/components/select/readme.md
 create mode 100644 packages/bee-q/src/components/select/scss/bq-select.scss
 create mode 100644 packages/bee-q/src/components/select/scss/bq-select.variables.scss

diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index 3a40bb5e1..f7e8e53bf 100644
--- a/packages/bee-q/src/components.d.ts
+++ b/packages/bee-q/src/components.d.ts
@@ -596,6 +596,53 @@ export namespace Components {
          */
         "value"?: string;
     }
+    interface BqSelect {
+        /**
+          * If true, the Select input will be focused on component render
+         */
+        "autofocus": boolean;
+        /**
+          * The clear button aria label
+         */
+        "clearButtonLabel"?: string;
+        /**
+          * If true, the clear button won't be displayed
+         */
+        "disableClear"?: boolean;
+        /**
+          * Indicates whether the Select input is disabled or not. If `true`, the Select is disabled and cannot be interacted with.
+         */
+        "disabled"?: boolean;
+        /**
+          * The ID of the form that the Select input belongs to.
+         */
+        "form"?: string;
+        /**
+          * The Select input name.
+         */
+        "name": string;
+        /**
+          * The Select input placeholder text value
+         */
+        "placeholder"?: string;
+        /**
+          * If true, the Select input cannot be modified.
+         */
+        "readonly"?: boolean;
+        /**
+          * Indicates whether or not the Select input is required to be filled out before submitting the form.
+         */
+        "required"?: boolean;
+        /**
+          * The validation status of the Select input.
+          * @remarks This property is used to indicate the validation status of the select input. It can be set to one of the following values: - `'none'`: No validation status is set. - `'error'`: The input has a validation error. - `'warning'`: The input has a validation warning. - `'success'`: The input has passed validation.
+         */
+        "validationStatus": TInputValidation;
+        /**
+          * The select input value, it can be used to reset the field to a previous value
+         */
+        "value": TInputValue;
+    }
     interface BqSideMenu {
         /**
           * It sets a predefined appearance of the side menu
@@ -996,6 +1043,10 @@ export interface BqRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBqRadioGroupElement;
 }
+export interface BqSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBqSelectElement;
+}
 export interface BqSideMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBqSideMenuElement;
@@ -1146,6 +1197,12 @@ declare global {
         prototype: HTMLBqRadioGroupElement;
         new (): HTMLBqRadioGroupElement;
     };
+    interface HTMLBqSelectElement extends Components.BqSelect, HTMLStencilElement {
+    }
+    var HTMLBqSelectElement: {
+        prototype: HTMLBqSelectElement;
+        new (): HTMLBqSelectElement;
+    };
     interface HTMLBqSideMenuElement extends Components.BqSideMenu, HTMLStencilElement {
     }
     var HTMLBqSideMenuElement: {
@@ -1238,6 +1295,7 @@ declare global {
         "bq-panel": HTMLBqPanelElement;
         "bq-radio": HTMLBqRadioElement;
         "bq-radio-group": HTMLBqRadioGroupElement;
+        "bq-select": HTMLBqSelectElement;
         "bq-side-menu": HTMLBqSideMenuElement;
         "bq-side-menu-item": HTMLBqSideMenuItemElement;
         "bq-slider": HTMLBqSliderElement;
@@ -1898,6 +1956,69 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface BqSelect {
+        /**
+          * If true, the Select input will be focused on component render
+         */
+        "autofocus"?: boolean;
+        /**
+          * The clear button aria label
+         */
+        "clearButtonLabel"?: string;
+        /**
+          * If true, the clear button won't be displayed
+         */
+        "disableClear"?: boolean;
+        /**
+          * Indicates whether the Select input is disabled or not. If `true`, the Select is disabled and cannot be interacted with.
+         */
+        "disabled"?: boolean;
+        /**
+          * The ID of the form that the Select input belongs to.
+         */
+        "form"?: string;
+        /**
+          * The Select input name.
+         */
+        "name": string;
+        /**
+          * Callback handler emitted when the Select input loses focus
+         */
+        "onBqBlur"?: (event: BqSelectCustomEvent<HTMLBqSelectElement>) => void;
+        /**
+          * Callback handler emitted when the selected value has changed and the Select input loses focus
+         */
+        "onBqChange"?: (event: BqSelectCustomEvent<{ value: string | number | string[]; el: HTMLBqSelectElement }>) => void;
+        /**
+          * Callback handler emitted when the selected value has been cleared
+         */
+        "onBqClear"?: (event: BqSelectCustomEvent<HTMLBqSelectElement>) => void;
+        /**
+          * Callback handler emitted when the Select input has received focus
+         */
+        "onBqFocus"?: (event: BqSelectCustomEvent<HTMLBqSelectElement>) => void;
+        /**
+          * The Select input placeholder text value
+         */
+        "placeholder"?: string;
+        /**
+          * If true, the Select input cannot be modified.
+         */
+        "readonly"?: boolean;
+        /**
+          * Indicates whether or not the Select input is required to be filled out before submitting the form.
+         */
+        "required"?: boolean;
+        /**
+          * The validation status of the Select input.
+          * @remarks This property is used to indicate the validation status of the select input. It can be set to one of the following values: - `'none'`: No validation status is set. - `'error'`: The input has a validation error. - `'warning'`: The input has a validation warning. - `'success'`: The input has passed validation.
+         */
+        "validationStatus"?: TInputValidation;
+        /**
+          * The select input value, it can be used to reset the field to a previous value
+         */
+        "value"?: TInputValue;
+    }
     interface BqSideMenu {
         /**
           * It sets a predefined appearance of the side menu
@@ -2308,6 +2429,7 @@ declare namespace LocalJSX {
         "bq-panel": BqPanel;
         "bq-radio": BqRadio;
         "bq-radio-group": BqRadioGroup;
+        "bq-select": BqSelect;
         "bq-side-menu": BqSideMenu;
         "bq-side-menu-item": BqSideMenuItem;
         "bq-slider": BqSlider;
@@ -2352,6 +2474,7 @@ declare module "@stencil/core" {
             "bq-panel": LocalJSX.BqPanel & JSXBase.HTMLAttributes<HTMLBqPanelElement>;
             "bq-radio": LocalJSX.BqRadio & JSXBase.HTMLAttributes<HTMLBqRadioElement>;
             "bq-radio-group": LocalJSX.BqRadioGroup & JSXBase.HTMLAttributes<HTMLBqRadioGroupElement>;
+            "bq-select": LocalJSX.BqSelect & JSXBase.HTMLAttributes<HTMLBqSelectElement>;
             "bq-side-menu": LocalJSX.BqSideMenu & JSXBase.HTMLAttributes<HTMLBqSideMenuElement>;
             "bq-side-menu-item": LocalJSX.BqSideMenuItem & JSXBase.HTMLAttributes<HTMLBqSideMenuItemElement>;
             "bq-slider": LocalJSX.BqSlider & JSXBase.HTMLAttributes<HTMLBqSliderElement>;
diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
new file mode 100644
index 000000000..d8e5560bb
--- /dev/null
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -0,0 +1,282 @@
+import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';
+
+import { hasSlotContent, isDefined, isHTMLElement } from '../../shared/utils';
+import { TInputValidation, TInputValue } from '../input/bq-input.types';
+
+@Component({
+  tag: 'bq-select',
+  styleUrl: './scss/bq-select.scss',
+  shadow: true,
+})
+export class BqSelect {
+  // Own Properties
+  // ====================
+
+  private helperTextElem?: HTMLElement;
+  private inputElem?: HTMLInputElement;
+  private labelElem?: HTMLElement;
+  private prefixElem?: HTMLElement;
+  private suffixElem?: HTMLElement;
+
+  private fallbackInputId = 'input';
+
+  // Reference to host HTML element
+  // ===================================
+
+  @Element() el!: HTMLBqSelectElement;
+
+  // State() variables
+  // Inlined decorator, alphabetical order
+  // =======================================
+
+  @State() hasHelperText = false;
+  @State() hasLabel = false;
+  @State() hasPrefix = false;
+  @State() hasSuffix = false;
+  @State() hasValue = false;
+
+  // Public Property API
+  // ========================
+
+  /** If true, the Select input will be focused on component render */
+  @Prop({ reflect: true }) autofocus: boolean;
+
+  /** The clear button aria label */
+  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';
+
+  /**
+   * Indicates whether the Select input is disabled or not.
+   * If `true`, the Select is disabled and cannot be interacted with.
+   */
+  @Prop({ mutable: true }) disabled?: boolean = false;
+
+  /** If true, the clear button won't be displayed */
+  @Prop({ reflect: true }) disableClear? = false;
+
+  /** The ID of the form that the Select input belongs to. */
+  @Prop({ reflect: true }) form?: string;
+
+  /** The Select input name. */
+  @Prop({ reflect: true }) name!: string;
+
+  /** The Select input placeholder text value */
+  @Prop({ reflect: true }) placeholder?: string;
+
+  /** If true, the Select input cannot be modified. */
+  @Prop({ reflect: true }) readonly?: boolean;
+
+  /** Indicates whether or not the Select input is required to be filled out before submitting the form. */
+  @Prop({ reflect: true }) required?: boolean;
+
+  /**
+   * The validation status of the Select input.
+   *
+   * @remarks
+   * This property is used to indicate the validation status of the select input. It can be set to one of the following values:
+   * - `'none'`: No validation status is set.
+   * - `'error'`: The input has a validation error.
+   * - `'warning'`: The input has a validation warning.
+   * - `'success'`: The input has passed validation.
+   */
+  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';
+
+  /** The select input value, it can be used to reset the field to a previous value */
+  @Prop({ reflect: true, mutable: true }) value: TInputValue;
+
+  // Prop lifecycle events
+  // =======================
+
+  @Watch('value')
+  handleValueChange() {
+    if (Array.isArray(this.value)) {
+      this.hasValue = this.value.some((val) => val.length > 0);
+      return;
+    }
+
+    this.hasValue = isDefined(this.value);
+  }
+
+  // Events section
+  // Requires JSDocs for public API documentation
+  // ==============================================
+
+  /** Callback handler emitted when the Select input loses focus */
+  @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;
+
+  /** Callback handler emitted when the selected value has changed and the Select input loses focus */
+  @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqSelectElement }>;
+
+  /** Callback handler emitted when the selected value has been cleared */
+  @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;
+
+  /** Callback handler emitted when the Select input has received focus */
+  @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;
+
+  // Component lifecycle events
+  // Ordered by their natural call order
+  // =====================================
+
+  componentDidLoad() {
+    this.handleValueChange();
+  }
+
+  // Listeners
+  // ==============
+
+  // Public methods API
+  // These methods are exposed on the host element.
+  // Always use two lines.
+  // Public Methods must be async.
+  // Requires JSDocs for public API documentation.
+  // ===============================================
+
+  // Local methods
+  // Internal business logic.
+  // These methods cannot be called from the host element.
+  // =======================================================
+
+  private handleBlur = () => {
+    if (this.disabled) return;
+
+    this.bqBlur.emit(this.el);
+  };
+
+  private handleFocus = () => {
+    if (this.disabled) return;
+
+    this.bqFocus.emit(this.el);
+  };
+
+  private handleChange = (ev: Event) => {
+    if (this.disabled) return;
+
+    if (!isHTMLElement(ev.target, 'input')) return;
+    this.value = ev.target.value;
+
+    this.bqChange.emit({ value: this.value, el: this.el });
+  };
+
+  private handleClearClick = (ev: CustomEvent) => {
+    if (this.disabled) return;
+
+    this.inputElem.value = '';
+    this.value = this.inputElem.value;
+
+    this.bqClear.emit(this.el);
+    this.bqChange.emit({ value: this.value, el: this.el });
+    this.inputElem.focus();
+
+    ev.stopPropagation();
+  };
+
+  private handleLabelSlotChange = () => {
+    this.hasLabel = hasSlotContent(this.labelElem);
+  };
+
+  private handlePrefixSlotChange = () => {
+    this.hasPrefix = hasSlotContent(this.prefixElem);
+  };
+
+  private handleSuffixSlotChange = () => {
+    this.hasSuffix = hasSlotContent(this.suffixElem);
+  };
+
+  private handleHelperTextSlotChange = () => {
+    this.hasHelperText = hasSlotContent(this.helperTextElem);
+  };
+
+  // render() function
+  // Always the last one in the class.
+  // ===================================
+
+  render() {
+    return (
+      <div class="bq-select" part="base">
+        {/* Label */}
+        <label
+          class={{ 'bq-select--label': true, hidden: !this.hasLabel }}
+          htmlFor={this.name || this.fallbackInputId}
+          ref={(labelElem) => (this.labelElem = labelElem)}
+          part="label"
+        >
+          <slot name="label" onSlotchange={this.handleLabelSlotChange} />
+        </label>
+        {/* Input control group */}
+        <div
+          class={{
+            'bq-select--control': true,
+            [`validation-${this.validationStatus}`]: true,
+            disabled: this.disabled,
+          }}
+          part="control"
+        >
+          {/* Prefix */}
+          <span
+            class={{ 'bq-select--control__prefix': true, hidden: !this.hasPrefix }}
+            ref={(spanElem) => (this.prefixElem = spanElem)}
+            part="prefix"
+          >
+            <slot name="prefix" onSlotchange={this.handlePrefixSlotChange} />
+          </span>
+          {/* HTML Input */}
+          <input
+            id={this.name || this.fallbackInputId}
+            class="bq-select--control__input"
+            aria-disabled={this.disabled ? 'true' : 'false'}
+            autoFocus={this.autofocus}
+            disabled={this.disabled}
+            form={this.form}
+            name={this.name}
+            placeholder={this.placeholder}
+            ref={(inputElem) => (this.inputElem = inputElem)}
+            readOnly={true}
+            required={this.required}
+            type="text"
+            value={this.value}
+            part="input"
+            // Events
+            onBlur={this.handleBlur}
+            onChange={this.handleChange}
+            onFocus={this.handleFocus}
+          />
+          {/* Clear Button */}
+          {this.hasValue && !this.disabled && !this.disableClear && (
+            // The clear button will be visible as long as the input has a value
+            // and the parent group is hovered or has focus-within
+            <bq-button
+              class="bq-select--control__clear ms-[--bq-select--gap] hidden"
+              appearance="text"
+              aria-label={this.clearButtonLabel}
+              size="small"
+              onBqClick={this.handleClearClick}
+              part="clear-btn"
+              exportparts="button"
+            >
+              <slot name="clear-icon">
+                <bq-icon name="x-circle" class="flex" />
+              </slot>
+            </bq-button>
+          )}
+          {/* Suffix */}
+          <span
+            class={{ 'bq-select--control__suffix': true }}
+            ref={(spanElem) => (this.suffixElem = spanElem)}
+            part="suffix"
+          >
+            <slot name="suffix" onSlotchange={this.handleSuffixSlotChange}>
+              <bq-icon name="caret-down" class="flex" />
+            </slot>
+          </span>
+        </div>
+        {/* Helper text */}
+        <div
+          class={{ [`bq-select--helper-text validation-${this.validationStatus}`]: true, hidden: !this.hasHelperText }}
+          ref={(divElem) => (this.helperTextElem = divElem)}
+          part="helper-text"
+        >
+          <slot name="helper-text" onSlotchange={this.handleHelperTextSlotChange} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/packages/bee-q/src/components/select/readme.md b/packages/bee-q/src/components/select/readme.md
new file mode 100644
index 000000000..949896f8d
--- /dev/null
+++ b/packages/bee-q/src/components/select/readme.md
@@ -0,0 +1,67 @@
+# bq-select
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute            | Description                                                                                                             | Type                                          | Default         |
+| ------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | --------------- |
+| `autofocus`         | `autofocus`          | If true, the Select input will be focused on component render                                                           | `boolean`                                     | `undefined`     |
+| `clearButtonLabel`  | `clear-button-label` | The clear button aria label                                                                                             | `string`                                      | `'Clear value'` |
+| `disableClear`      | `disable-clear`      | If true, the clear button won't be displayed                                                                            | `boolean`                                     | `false`         |
+| `disabled`          | `disabled`           | Indicates whether the Select input is disabled or not. If `true`, the Select is disabled and cannot be interacted with. | `boolean`                                     | `false`         |
+| `form`              | `form`               | The ID of the form that the Select input belongs to.                                                                    | `string`                                      | `undefined`     |
+| `name` _(required)_ | `name`               | The Select input name.                                                                                                  | `string`                                      | `undefined`     |
+| `placeholder`       | `placeholder`        | The Select input placeholder text value                                                                                 | `string`                                      | `undefined`     |
+| `readonly`          | `readonly`           | If true, the Select input cannot be modified.                                                                           | `boolean`                                     | `undefined`     |
+| `required`          | `required`           | Indicates whether or not the Select input is required to be filled out before submitting the form.                      | `boolean`                                     | `undefined`     |
+| `validationStatus`  | `validation-status`  | The validation status of the Select input.                                                                              | `"error" \| "none" \| "success" \| "warning"` | `'none'`        |
+| `value`             | `value`              | The select input value, it can be used to reset the field to a previous value                                           | `number \| string \| string[]`                | `undefined`     |
+
+
+## Events
+
+| Event      | Description                                                                                   | Type                                                                             |
+| ---------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `bqBlur`   | Callback handler emitted when the Select input loses focus                                    | `CustomEvent<HTMLBqSelectElement>`                                               |
+| `bqChange` | Callback handler emitted when the selected value has changed and the Select input loses focus | `CustomEvent<{ value: string \| number \| string[]; el: HTMLBqSelectElement; }>` |
+| `bqClear`  | Callback handler emitted when the selected value has been cleared                             | `CustomEvent<HTMLBqSelectElement>`                                               |
+| `bqFocus`  | Callback handler emitted when the Select input has received focus                             | `CustomEvent<HTMLBqSelectElement>`                                               |
+
+
+## Shadow Parts
+
+| Part            | Description |
+| --------------- | ----------- |
+| `"base"`        |             |
+| `"clear-btn"`   |             |
+| `"control"`     |             |
+| `"helper-text"` |             |
+| `"input"`       |             |
+| `"label"`       |             |
+| `"prefix"`      |             |
+| `"suffix"`      |             |
+
+
+## Dependencies
+
+### Depends on
+
+- [bq-button](../button)
+- [bq-icon](../icon)
+
+### Graph
+```mermaid
+graph TD;
+  bq-select --> bq-button
+  bq-select --> bq-icon
+  bq-button --> bq-icon
+  style bq-select fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/bee-q/src/components/select/scss/bq-select.scss b/packages/bee-q/src/components/select/scss/bq-select.scss
new file mode 100644
index 000000000..1c5aefd2f
--- /dev/null
+++ b/packages/bee-q/src/components/select/scss/bq-select.scss
@@ -0,0 +1,154 @@
+/* -------------------------------------------------------------------------- */
+/*                                Select styles                               */
+/* -------------------------------------------------------------------------- */
+
+@import './bq-select.variables';
+
+:host {
+  @apply block w-full;
+}
+
+/* -------------------------------------------------------------------------- */
+/*                            Label and Helper text                           */
+/* -------------------------------------------------------------------------- */
+
+.bq-select--label {
+  @apply mb-[--bq-select--label-margin-bottom] flex flex-grow items-center gap-[--var(--bq-select--gap-label)];
+  @apply text-[length:--bq-select--label-text-size] text-[color:--bq-select--label-text-color];
+}
+
+.bq-select--helper-text {
+  @apply mt-[--bq-select--helper-margin-top] text-[length:--bq-select--helper-text-size] text-[color:--bq-select--helper-text-color];
+}
+
+.bq-select--helper-text.validation-error {
+  @apply text-text-danger;
+}
+
+.bq-select--helper-text.validation-success {
+  @apply text-text-success;
+}
+
+.bq-select--helper-text.validation-warning {
+  @apply text-text-warning;
+}
+
+/* -------------------------------------------------------------------------- */
+/*                         Select input group control                         */
+/* -------------------------------------------------------------------------- */
+
+.bq-select--control {
+  @apply flex w-full items-center transition-[border-color,box-shadow];
+  // Border
+  @apply rounded-[--bq-select--border-radius] border-[length:--bq-select--border-width] border-[color:--bq-select--border-color];
+  // Padding
+  @apply py-[--bq-select--paddingY] pe-[--bq-select--pading-end] ps-[--bq-select--pading-start];
+  // Text
+  @apply text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];
+  // Hover
+  @apply [&:not(.disabled):not(:focus-within)]:hover:border-[color:--bq-select--border-color-hover];
+
+  border-style: var(--bq-select--border-style);
+
+  // Focus
+  &:not(.disabled):focus-within {
+    --bq-ring-width: 1px;
+    --bq-ring-offset-width: 0;
+    --bq-ring-color-focus: var(--bq-select--border-color-focus);
+
+    @apply focus border-[color:--bq-select--border-color-focus];
+  }
+
+  // Enable clear button whenever the input group control is hovered or has focus
+  &:not(.disabled):hover,
+  &:not(.disabled):focus-within {
+    .bq-select--control__clear {
+      @apply inline-block;
+    }
+  }
+}
+
+.bq-select--control.disabled {
+  @apply cursor-not-allowed border-[color:--bq-stroke--tertiary-disabled] bg-ui-secondary-disabled;
+}
+
+/* ------------------------------- Validation ------------------------------- */
+
+.bq-select--control.validation-error {
+  @apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-stroke-danger-hover;
+
+  &:not(.disabled):focus-within {
+    --bq-ring-color-focus: theme('colors.stroke.danger-active');
+    @apply border-stroke-danger-active;
+  }
+}
+
+.bq-select--control.validation-success {
+  @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-stroke-success-hover;
+
+  &:not(.disabled):focus-within {
+    --bq-ring-color-focus: theme('colors.stroke.success-active');
+    @apply border-stroke-success-active;
+  }
+}
+
+.bq-select--control.validation-warning {
+  @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-stroke-warning-hover;
+
+  &:not(.disabled):focus-within {
+    --bq-ring-color-focus: theme('colors.stroke.warning-active');
+    @apply border-stroke-warning-active;
+  }
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Native HTML Input                             */
+/* -------------------------------------------------------------------------- */
+
+.bq-select--control__input {
+  @apply flex-auto cursor-[inherit] appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];
+  @apply m-0 min-h-[--bq-select--icon-size] min-w-[0] border-none p-0 focus:outline-none focus-visible:outline-none;
+
+  box-shadow: none;
+  font-weight: inherit;
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                Clear button                                */
+/* -------------------------------------------------------------------------- */
+
+.bq-select--control__clear::part(button) {
+  // Since the clear button is inside the input group control,
+  // we need to reset the focus ring styles
+  --bq-ring-width: initial;
+  --bq-ring-offset-width: initial;
+  --bq-ring-color-focus: initial;
+
+  @apply h-auto rounded-xs border-none p-0;
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Prefix and suffix                             */
+/* -------------------------------------------------------------------------- */
+
+.bq-select--control__prefix,
+.bq-select--control__suffix {
+  @apply pointer-events-none flex items-center text-[color:var(--bq-select--text-color)];
+}
+
+.bq-select--control__prefix {
+  @apply me-[--bq-select--gap];
+}
+
+.bq-select--control__suffix {
+  @apply ms-[--bq-select--gap];
+}
+
+/* -------------------------------------------------------------------------- */
+/*                         Slotted and internal icons                         */
+/* -------------------------------------------------------------------------- */
+
+bq-icon,
+::slotted(bq-icon) {
+  --bq-icon--size: var(--bq-select--icon-size) !important;
+}
diff --git a/packages/bee-q/src/components/select/scss/bq-select.variables.scss b/packages/bee-q/src/components/select/scss/bq-select.variables.scss
new file mode 100644
index 000000000..d7917f685
--- /dev/null
+++ b/packages/bee-q/src/components/select/scss/bq-select.variables.scss
@@ -0,0 +1,59 @@
+/* -------------------------------------------------------------------------- */
+/*                          Select custom properties                          */
+/* -------------------------------------------------------------------------- */
+
+:host {
+  /**
+   * @prop --bq-select--background-color - Select background color
+   * @prop --bq-select--border-color - Select border color
+   * @prop --bq-select--border-color-hover - Select border color on hover
+   * @prop --bq-select--border-color-focus - Select border color on focus
+   * @prop --bq-select--border-color-disabled - Select border color when disabled
+   * @prop --bq-select--border-radius - Select border radius
+   * @prop --bq-select--border-width - Select border width
+   * @prop --bq-select--border-style - Select border style
+   * @prop --bq-select--gap - Gap between Select content and prefix/suffix
+   * @prop --bq-select--helper-margin-top - Helper text margin top
+   * @prop --bq-select--helper-text-color - Helper text color
+   * @prop --bq-select--helper-text-size - Helper text size
+   * @prop --bq-select--icon-size - Icon size to use in prefix/suffix and clear button
+   * @prop --bq-select--label-margin-bottom - Select label margin bottom
+   * @prop --bq-select--label-text-color - Select label text color
+   * @prop --bq-select--label-text-size - Select label text size
+   * @prop --bq-select--pading-start - Select padding start
+   * @prop --bq-select--pading-end - Select padding end
+   * @prop --bq-select--paddingY - Select padding top and bottom
+   * @prop --bq-select--text-color - Select text color
+   * @prop --bq-select--text-size - Select text size
+   * @prop --bq-select--text-placeholder-color - Select placeholder text color
+   */
+  --bq-select--background-color: theme('colors.ui.primary');
+
+  --bq-select--border-color: theme('colors.stroke.tertiary');
+  --bq-select--border-color-hover: theme('colors.stroke.brand-hover');
+  --bq-select--border-color-focus: theme('colors.stroke.brand');
+  --bq-select--border-color-disabled: theme('colors.stroke.tertiary-disabled');
+  --bq-select--border-radius: theme('borderRadius.s');
+  --bq-select--border-width: 1px;
+  --bq-select--border-style: solid;
+
+  --bq-select--gap: theme('spacing.xs');
+
+  --bq-select--helper-margin-top: theme('spacing.xs');
+  --bq-select--helper-text-size: theme('fontSize.s');
+  --bq-select--helper-text-color: theme('colors.text.primary');
+
+  --bq-select--icon-size: 24px;
+
+  --bq-select--label-margin-bottom: theme('spacing.xs');
+  --bq-select--label-text-size: theme('fontSize.s');
+  --bq-select--label-text-color: theme('colors.text.primary');
+
+  --bq-select--pading-start: theme('spacing.m');
+  --bq-select--pading-end: theme('spacing.m');
+  --bq-select--paddingY: theme('spacing.s');
+
+  --bq-select--text-color: theme('colors.text.primary');
+  --bq-select--text-size: theme('fontSize.m');
+  --bq-select--text-placeholder-color: theme('colors.text.secondary-disabled');
+}

From 84ca668bb2240c41753f5e2033706cc8162aeec9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Mon, 14 Aug 2023 19:46:06 +0300
Subject: [PATCH 02/23] feat(Select): add dropdown functionality

---
 .../bee-q/src/components/select/bq-select.tsx | 147 ++++++++++--------
 1 file changed, 83 insertions(+), 64 deletions(-)

diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
index d8e5560bb..9e2c5da57 100644
--- a/packages/bee-q/src/components/select/bq-select.tsx
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -3,6 +3,18 @@ import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '
 import { hasSlotContent, isDefined, isHTMLElement } from '../../shared/utils';
 import { TInputValidation, TInputValue } from '../input/bq-input.types';
 
+/**
+ * @part base - The component's base wrapper.
+ * @part button - The native HTML button used under the hood in the clear button.
+ * @part clear-btn - The clear button.
+ * @part control - The input control wrapper.
+ * @part helper-text - The helper text slot container.
+ * @part input - The native HTML input element used under the hood.
+ * @part label - The label slot container.
+ * @part panel - The select panel container
+ * @part prefix - The prefix slot container.
+ * @part suffix - The suffix slot container.
+ */
 @Component({
   tag: 'bq-select',
   styleUrl: './scss/bq-select.scss',
@@ -201,73 +213,80 @@ export class BqSelect {
         >
           <slot name="label" onSlotchange={this.handleLabelSlotChange} />
         </label>
-        {/* Input control group */}
-        <div
-          class={{
-            'bq-select--control': true,
-            [`validation-${this.validationStatus}`]: true,
-            disabled: this.disabled,
-          }}
-          part="control"
-        >
-          {/* Prefix */}
-          <span
-            class={{ 'bq-select--control__prefix': true, hidden: !this.hasPrefix }}
-            ref={(spanElem) => (this.prefixElem = spanElem)}
-            part="prefix"
+        {/* Select dropdown */}
+        <bq-dropdown class="bq-select__dropdown w-full" sameWidth exportparts="panel">
+          {/* Input control group */}
+          <div
+            class={{
+              'bq-select--control': true,
+              [`validation-${this.validationStatus}`]: true,
+              disabled: this.disabled,
+            }}
+            part="control"
+            slot="trigger"
           >
-            <slot name="prefix" onSlotchange={this.handlePrefixSlotChange} />
-          </span>
-          {/* HTML Input */}
-          <input
-            id={this.name || this.fallbackInputId}
-            class="bq-select--control__input"
-            aria-disabled={this.disabled ? 'true' : 'false'}
-            autoFocus={this.autofocus}
-            disabled={this.disabled}
-            form={this.form}
-            name={this.name}
-            placeholder={this.placeholder}
-            ref={(inputElem) => (this.inputElem = inputElem)}
-            readOnly={true}
-            required={this.required}
-            type="text"
-            value={this.value}
-            part="input"
-            // Events
-            onBlur={this.handleBlur}
-            onChange={this.handleChange}
-            onFocus={this.handleFocus}
-          />
-          {/* Clear Button */}
-          {this.hasValue && !this.disabled && !this.disableClear && (
-            // The clear button will be visible as long as the input has a value
-            // and the parent group is hovered or has focus-within
-            <bq-button
-              class="bq-select--control__clear ms-[--bq-select--gap] hidden"
-              appearance="text"
-              aria-label={this.clearButtonLabel}
-              size="small"
-              onBqClick={this.handleClearClick}
-              part="clear-btn"
-              exportparts="button"
+            {/* Prefix */}
+            <span
+              class={{ 'bq-select--control__prefix': true, hidden: !this.hasPrefix }}
+              ref={(spanElem) => (this.prefixElem = spanElem)}
+              part="prefix"
+            >
+              <slot name="prefix" onSlotchange={this.handlePrefixSlotChange} />
+            </span>
+            {/* HTML Input */}
+            <input
+              id={this.name || this.fallbackInputId}
+              class="bq-select--control__input"
+              aria-disabled={this.disabled ? 'true' : 'false'}
+              autoFocus={this.autofocus}
+              disabled={this.disabled}
+              form={this.form}
+              name={this.name}
+              placeholder={this.placeholder}
+              ref={(inputElem) => (this.inputElem = inputElem)}
+              readOnly={true}
+              required={this.required}
+              type="text"
+              value={this.value}
+              part="input"
+              // Events
+              onBlur={this.handleBlur}
+              onChange={this.handleChange}
+              onFocus={this.handleFocus}
+            />
+            {/* Clear Button */}
+            {this.hasValue && !this.disabled && !this.disableClear && (
+              // The clear button will be visible as long as the input has a value
+              // and the parent group is hovered or has focus-within
+              <bq-button
+                class="bq-select--control__clear ms-[--bq-select--gap] hidden"
+                appearance="text"
+                aria-label={this.clearButtonLabel}
+                size="small"
+                onBqClick={this.handleClearClick}
+                part="clear-btn"
+                exportparts="button"
+              >
+                <slot name="clear-icon">
+                  <bq-icon name="x-circle" class="flex" />
+                </slot>
+              </bq-button>
+            )}
+            {/* Suffix */}
+            <span
+              class={{ 'bq-select--control__suffix': true }}
+              ref={(spanElem) => (this.suffixElem = spanElem)}
+              part="suffix"
             >
-              <slot name="clear-icon">
-                <bq-icon name="x-circle" class="flex" />
+              <slot name="suffix" onSlotchange={this.handleSuffixSlotChange}>
+                <bq-icon name="caret-down" class="flex" />
               </slot>
-            </bq-button>
-          )}
-          {/* Suffix */}
-          <span
-            class={{ 'bq-select--control__suffix': true }}
-            ref={(spanElem) => (this.suffixElem = spanElem)}
-            part="suffix"
-          >
-            <slot name="suffix" onSlotchange={this.handleSuffixSlotChange}>
-              <bq-icon name="caret-down" class="flex" />
-            </slot>
-          </span>
-        </div>
+            </span>
+          </div>
+          <bq-option-list>
+            <slot />
+          </bq-option-list>
+        </bq-dropdown>
         {/* Helper text */}
         <div
           class={{ [`bq-select--helper-text validation-${this.validationStatus}`]: true, hidden: !this.hasHelperText }}

From 130bbb4cde81b9f0f9bc6956b69c607d4b79a3ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Mon, 14 Aug 2023 19:47:17 +0300
Subject: [PATCH 03/23] docs(Select): update readme files, included `Used by`
 components

---
 .../bee-q/src/components/button/readme.md     |  2 ++
 .../bee-q/src/components/dropdown/readme.md   |  5 ++++
 packages/bee-q/src/components/icon/readme.md  |  2 ++
 .../src/components/option-list/readme.md      | 13 +++++++++
 .../bee-q/src/components/select/readme.md     | 27 ++++++++++++-------
 5 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/packages/bee-q/src/components/button/readme.md b/packages/bee-q/src/components/button/readme.md
index afe3a9605..4a02f83cd 100644
--- a/packages/bee-q/src/components/button/readme.md
+++ b/packages/bee-q/src/components/button/readme.md
@@ -52,6 +52,7 @@ Buttons are designed for users to take action on a page or a screen.
  - [bq-dialog](../dialog)
  - [bq-input](../input)
  - [bq-notification](../notification)
+ - [bq-select](../select)
 
 ### Depends on
 
@@ -64,6 +65,7 @@ graph TD;
   bq-dialog --> bq-button
   bq-input --> bq-button
   bq-notification --> bq-button
+  bq-select --> bq-button
   style bq-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/bee-q/src/components/dropdown/readme.md b/packages/bee-q/src/components/dropdown/readme.md
index 18233ce7f..e0934fac7 100644
--- a/packages/bee-q/src/components/dropdown/readme.md
+++ b/packages/bee-q/src/components/dropdown/readme.md
@@ -31,6 +31,10 @@
 
 ## Dependencies
 
+### Used by
+
+ - [bq-select](../select)
+
 ### Depends on
 
 - [bq-panel](../panel)
@@ -39,6 +43,7 @@
 ```mermaid
 graph TD;
   bq-dropdown --> bq-panel
+  bq-select --> bq-dropdown
   style bq-dropdown fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/bee-q/src/components/icon/readme.md b/packages/bee-q/src/components/icon/readme.md
index f873a0046..50aebeec8 100644
--- a/packages/bee-q/src/components/icon/readme.md
+++ b/packages/bee-q/src/components/icon/readme.md
@@ -40,6 +40,7 @@ Icons are simplified images that graphically explain the meaning of an object on
  - [bq-dialog](../dialog)
  - [bq-input](../input)
  - [bq-notification](../notification)
+ - [bq-select](../select)
  - [bq-switch](../switch)
  - [bq-toast](../toast)
 
@@ -50,6 +51,7 @@ graph TD;
   bq-dialog --> bq-icon
   bq-input --> bq-icon
   bq-notification --> bq-icon
+  bq-select --> bq-icon
   bq-switch --> bq-icon
   bq-toast --> bq-icon
   style bq-icon fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/bee-q/src/components/option-list/readme.md b/packages/bee-q/src/components/option-list/readme.md
index 8e806f3af..d46e310c6 100644
--- a/packages/bee-q/src/components/option-list/readme.md
+++ b/packages/bee-q/src/components/option-list/readme.md
@@ -26,6 +26,19 @@
 | `"base"` | The component's internal wrapper. |
 
 
+## Dependencies
+
+### Used by
+
+ - [bq-select](../select)
+
+### Graph
+```mermaid
+graph TD;
+  bq-select --> bq-option-list
+  style bq-option-list fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/bee-q/src/components/select/readme.md b/packages/bee-q/src/components/select/readme.md
index 949896f8d..dddc4cdb8 100644
--- a/packages/bee-q/src/components/select/readme.md
+++ b/packages/bee-q/src/components/select/readme.md
@@ -34,30 +34,37 @@
 
 ## Shadow Parts
 
-| Part            | Description |
-| --------------- | ----------- |
-| `"base"`        |             |
-| `"clear-btn"`   |             |
-| `"control"`     |             |
-| `"helper-text"` |             |
-| `"input"`       |             |
-| `"label"`       |             |
-| `"prefix"`      |             |
-| `"suffix"`      |             |
+| Part            | Description                                                     |
+| --------------- | --------------------------------------------------------------- |
+| `"base"`        | The component's base wrapper.                                   |
+| `"button"`      | The native HTML button used under the hood in the clear button. |
+| `"clear-btn"`   | The clear button.                                               |
+| `"control"`     | The input control wrapper.                                      |
+| `"helper-text"` | The helper text slot container.                                 |
+| `"input"`       | The native HTML input element used under the hood.              |
+| `"label"`       | The label slot container.                                       |
+| `"panel"`       | The select panel container                                      |
+| `"prefix"`      | The prefix slot container.                                      |
+| `"suffix"`      | The suffix slot container.                                      |
 
 
 ## Dependencies
 
 ### Depends on
 
+- [bq-dropdown](../dropdown)
 - [bq-button](../button)
 - [bq-icon](../icon)
+- [bq-option-list](../option-list)
 
 ### Graph
 ```mermaid
 graph TD;
+  bq-select --> bq-dropdown
   bq-select --> bq-button
   bq-select --> bq-icon
+  bq-select --> bq-option-list
+  bq-dropdown --> bq-panel
   bq-button --> bq-icon
   style bq-select fill:#f9f,stroke:#333,stroke-width:4px
 ```

From 05eadeb0481e03f102533577b8fedc615eb6d7f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Mon, 14 Aug 2023 20:57:29 +0300
Subject: [PATCH 04/23] refactor(Select): sync selected option from value

---
 packages/bee-q/src/components.d.ts            | 16 +++--
 .../bee-q/src/components/select/bq-select.tsx | 71 +++++++++++++------
 .../bee-q/src/components/select/readme.md     | 13 ++--
 3 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index f7e8e53bf..f59aa1004 100644
--- a/packages/bee-q/src/components.d.ts
+++ b/packages/bee-q/src/components.d.ts
@@ -621,6 +621,10 @@ export namespace Components {
           * The Select input name.
          */
         "name": string;
+        /**
+          * If true, the Select panel will be visible.
+         */
+        "open"?: boolean;
         /**
           * The Select input placeholder text value
          */
@@ -1985,10 +1989,6 @@ declare namespace LocalJSX {
           * Callback handler emitted when the Select input loses focus
          */
         "onBqBlur"?: (event: BqSelectCustomEvent<HTMLBqSelectElement>) => void;
-        /**
-          * Callback handler emitted when the selected value has changed and the Select input loses focus
-         */
-        "onBqChange"?: (event: BqSelectCustomEvent<{ value: string | number | string[]; el: HTMLBqSelectElement }>) => void;
         /**
           * Callback handler emitted when the selected value has been cleared
          */
@@ -1997,6 +1997,14 @@ declare namespace LocalJSX {
           * Callback handler emitted when the Select input has received focus
          */
         "onBqFocus"?: (event: BqSelectCustomEvent<HTMLBqSelectElement>) => void;
+        /**
+          * Callback handler emitted when the selected value has changed
+         */
+        "onBqSelect"?: (event: BqSelectCustomEvent<{ value: string | number | string[]; item: HTMLBqOptionElement }>) => void;
+        /**
+          * If true, the Select panel will be visible.
+         */
+        "open"?: boolean;
         /**
           * The Select input placeholder text value
          */
diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
index 9e2c5da57..11a95f257 100644
--- a/packages/bee-q/src/components/select/bq-select.tsx
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';
 
-import { hasSlotContent, isDefined, isHTMLElement } from '../../shared/utils';
+import { getTextContent, hasSlotContent, isDefined } from '../../shared/utils';
 import { TInputValidation, TInputValue } from '../input/bq-input.types';
 
 /**
@@ -30,7 +30,7 @@ export class BqSelect {
   private prefixElem?: HTMLElement;
   private suffixElem?: HTMLElement;
 
-  private fallbackInputId = 'input';
+  private fallbackInputId = 'select';
 
   // Reference to host HTML element
   // ===================================
@@ -41,6 +41,7 @@ export class BqSelect {
   // Inlined decorator, alphabetical order
   // =======================================
 
+  @State() displayValue?: string;
   @State() hasHelperText = false;
   @State() hasLabel = false;
   @State() hasPrefix = false;
@@ -71,6 +72,9 @@ export class BqSelect {
   /** The Select input name. */
   @Prop({ reflect: true }) name!: string;
 
+  /** If true, the Select panel will be visible. */
+  @Prop({ reflect: true }) open?: boolean = false;
+
   /** The Select input placeholder text value */
   @Prop({ reflect: true }) placeholder?: string;
 
@@ -100,6 +104,8 @@ export class BqSelect {
 
   @Watch('value')
   handleValueChange() {
+    this.syncItemsFromValue();
+
     if (Array.isArray(this.value)) {
       this.hasValue = this.value.some((val) => val.length > 0);
       return;
@@ -115,15 +121,15 @@ export class BqSelect {
   /** Callback handler emitted when the Select input loses focus */
   @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;
 
-  /** Callback handler emitted when the selected value has changed and the Select input loses focus */
-  @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqSelectElement }>;
-
   /** Callback handler emitted when the selected value has been cleared */
   @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;
 
   /** Callback handler emitted when the Select input has received focus */
   @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;
 
+  /** Callback handler emitted when the selected value has changed */
+  @Event() bqSelect!: EventEmitter<{ value: string | number | string[]; item: HTMLBqOptionElement }>;
+
   // Component lifecycle events
   // Ordered by their natural call order
   // =====================================
@@ -159,28 +165,24 @@ export class BqSelect {
     this.bqFocus.emit(this.el);
   };
 
-  private handleChange = (ev: Event) => {
-    if (this.disabled) return;
-
-    if (!isHTMLElement(ev.target, 'input')) return;
-    this.value = ev.target.value;
-
-    this.bqChange.emit({ value: this.value, el: this.el });
-  };
-
   private handleClearClick = (ev: CustomEvent) => {
     if (this.disabled) return;
 
-    this.inputElem.value = '';
-    this.value = this.inputElem.value;
+    this.value = '';
+    this.displayValue = '';
 
     this.bqClear.emit(this.el);
-    this.bqChange.emit({ value: this.value, el: this.el });
     this.inputElem.focus();
 
     ev.stopPropagation();
   };
 
+  private handleSelect = (ev: CustomEvent<{ value: string | number | string[]; item: HTMLBqOptionElement }>) => {
+    if (this.disabled) return;
+
+    this.value = ev.detail.value;
+  };
+
   private handleLabelSlotChange = () => {
     this.hasLabel = hasSlotContent(this.labelElem);
   };
@@ -197,6 +199,28 @@ export class BqSelect {
     this.hasHelperText = hasSlotContent(this.helperTextElem);
   };
 
+  private syncItemsFromValue = () => {
+    const items = this.options;
+    if (!items.length) return;
+
+    // Sync selected state
+    this.options.forEach((item: HTMLBqOptionElement) => (item.selected = item.value === this.value));
+    // Sync display label
+    const checkedItem = items.filter((item) => item.value === this.value)[0];
+    this.displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';
+  };
+
+  private getOptionLabel = (item: HTMLBqOptionElement) => {
+    const slot = item.shadowRoot.querySelector('slot:not([name])');
+    if (!slot) return;
+
+    return getTextContent(slot as HTMLSlotElement);
+  };
+
+  private get options() {
+    return Array.from(this.el.querySelectorAll('bq-option'));
+  }
+
   // render() function
   // Always the last one in the class.
   // ===================================
@@ -237,8 +261,13 @@ export class BqSelect {
             <input
               id={this.name || this.fallbackInputId}
               class="bq-select--control__input"
-              aria-disabled={this.disabled ? 'true' : 'false'}
+              autoComplete="off"
+              autoCapitalize="off"
               autoFocus={this.autofocus}
+              aria-disabled={this.disabled ? 'true' : 'false'}
+              aria-controls="listbox"
+              aria-expanded={this.open}
+              aria-haspopup="listbox"
               disabled={this.disabled}
               form={this.form}
               name={this.name}
@@ -246,12 +275,12 @@ export class BqSelect {
               ref={(inputElem) => (this.inputElem = inputElem)}
               readOnly={true}
               required={this.required}
+              spellcheck={false}
               type="text"
-              value={this.value}
+              value={this.displayValue}
               part="input"
               // Events
               onBlur={this.handleBlur}
-              onChange={this.handleChange}
               onFocus={this.handleFocus}
             />
             {/* Clear Button */}
@@ -283,7 +312,7 @@ export class BqSelect {
               </slot>
             </span>
           </div>
-          <bq-option-list>
+          <bq-option-list aria-expanded={this.open} role="listbox" onBqSelect={this.handleSelect} tabIndex={-1}>
             <slot />
           </bq-option-list>
         </bq-dropdown>
diff --git a/packages/bee-q/src/components/select/readme.md b/packages/bee-q/src/components/select/readme.md
index dddc4cdb8..aa248d4bc 100644
--- a/packages/bee-q/src/components/select/readme.md
+++ b/packages/bee-q/src/components/select/readme.md
@@ -15,6 +15,7 @@
 | `disabled`          | `disabled`           | Indicates whether the Select input is disabled or not. If `true`, the Select is disabled and cannot be interacted with. | `boolean`                                     | `false`         |
 | `form`              | `form`               | The ID of the form that the Select input belongs to.                                                                    | `string`                                      | `undefined`     |
 | `name` _(required)_ | `name`               | The Select input name.                                                                                                  | `string`                                      | `undefined`     |
+| `open`              | `open`               | If true, the Select panel will be visible.                                                                              | `boolean`                                     | `false`         |
 | `placeholder`       | `placeholder`        | The Select input placeholder text value                                                                                 | `string`                                      | `undefined`     |
 | `readonly`          | `readonly`           | If true, the Select input cannot be modified.                                                                           | `boolean`                                     | `undefined`     |
 | `required`          | `required`           | Indicates whether or not the Select input is required to be filled out before submitting the form.                      | `boolean`                                     | `undefined`     |
@@ -24,12 +25,12 @@
 
 ## Events
 
-| Event      | Description                                                                                   | Type                                                                             |
-| ---------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| `bqBlur`   | Callback handler emitted when the Select input loses focus                                    | `CustomEvent<HTMLBqSelectElement>`                                               |
-| `bqChange` | Callback handler emitted when the selected value has changed and the Select input loses focus | `CustomEvent<{ value: string \| number \| string[]; el: HTMLBqSelectElement; }>` |
-| `bqClear`  | Callback handler emitted when the selected value has been cleared                             | `CustomEvent<HTMLBqSelectElement>`                                               |
-| `bqFocus`  | Callback handler emitted when the Select input has received focus                             | `CustomEvent<HTMLBqSelectElement>`                                               |
+| Event      | Description                                                       | Type                                                                               |
+| ---------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `bqBlur`   | Callback handler emitted when the Select input loses focus        | `CustomEvent<HTMLBqSelectElement>`                                                 |
+| `bqClear`  | Callback handler emitted when the selected value has been cleared | `CustomEvent<HTMLBqSelectElement>`                                                 |
+| `bqFocus`  | Callback handler emitted when the Select input has received focus | `CustomEvent<HTMLBqSelectElement>`                                                 |
+| `bqSelect` | Callback handler emitted when the selected value has changed      | `CustomEvent<{ value: string \| number \| string[]; item: HTMLBqOptionElement; }>` |
 
 
 ## Shadow Parts

From 3a90ee25c4bbabef53ca0b4829e0992764d018e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Mon, 14 Aug 2023 21:36:53 +0300
Subject: [PATCH 05/23] fix(Select): delegate focus, also after select

---
 packages/bee-q/src/components/select/bq-select.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
index 11a95f257..3eeedc070 100644
--- a/packages/bee-q/src/components/select/bq-select.tsx
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -18,7 +18,9 @@ import { TInputValidation, TInputValue } from '../input/bq-input.types';
 @Component({
   tag: 'bq-select',
   styleUrl: './scss/bq-select.scss',
-  shadow: true,
+  shadow: {
+    delegatesFocus: true,
+  },
 })
 export class BqSelect {
   // Own Properties
@@ -177,10 +179,11 @@ export class BqSelect {
     ev.stopPropagation();
   };
 
-  private handleSelect = (ev: CustomEvent<{ value: string | number | string[]; item: HTMLBqOptionElement }>) => {
+  private handleSelect = (ev: CustomEvent<{ value: TInputValue; item: HTMLBqOptionElement }>) => {
     if (this.disabled) return;
 
     this.value = ev.detail.value;
+    this.inputElem.focus();
   };
 
   private handleLabelSlotChange = () => {

From 79cd451e1093a986ab8698b29db98b63a451540b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 13:06:41 +0300
Subject: [PATCH 06/23] fix(Dropdown): accessibility issues regarding arias and
 role

---
 .../src/components/dropdown/bq-dropdown.tsx      | 16 ++++++++++------
 .../components/option-list/bq-option-list.tsx    |  6 +++++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/bee-q/src/components/dropdown/bq-dropdown.tsx b/packages/bee-q/src/components/dropdown/bq-dropdown.tsx
index 46abb8827..0d98019cc 100644
--- a/packages/bee-q/src/components/dropdown/bq-dropdown.tsx
+++ b/packages/bee-q/src/components/dropdown/bq-dropdown.tsx
@@ -2,6 +2,8 @@ import { h, Component, Element, Prop, Listen } from '@stencil/core';
 
 import { FloatingUIPlacement } from '../../services/interfaces';
 
+let id = 0;
+
 /**
  * @part base - The component's internal wrapper.
  * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel
@@ -17,6 +19,8 @@ export class BqDropdown {
   // Own Properties
   // ====================
 
+  private dropdownPanelId = `bq-dropdown-panel-${++id}`;
+
   // Reference to host HTML element
   // ===================================
 
@@ -32,6 +36,9 @@ export class BqDropdown {
   /** Represents the distance (gutter or margin) between the panel and the trigger element. */
   @Prop({ reflect: true }) distance?: number = 4;
 
+  /** If true, the panel will remain open after a selection is made. */
+  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;
+
   /** Position of the panel */
   @Prop({ reflect: true }) placement?: FloatingUIPlacement = 'bottom-start';
 
@@ -41,9 +48,6 @@ export class BqDropdown {
   /** When set, it will override the height of the dropdown panel */
   @Prop({ reflect: true }) panelHeight?: string;
 
-  /** If true, the panel will remain open after a selection is made. */
-  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;
-
   /** Whether the panel should have the same width as the trigger element */
   @Prop({ reflect: true }) sameWidth?: boolean = false;
 
@@ -133,7 +137,7 @@ export class BqDropdown {
           class="bq-dropdown__trigger block"
           onClick={this.togglePanel}
           aria-haspopup="true"
-          aria-expanded={this.open ? 'true' : 'false'}
+          aria-controls={this.dropdownPanelId}
           part="trigger"
         >
           <slot name="trigger" />
@@ -141,6 +145,7 @@ export class BqDropdown {
         {/* PANEL */}
         <bq-panel
           style={style}
+          id={this.dropdownPanelId}
           class="bq-dropdown__panel"
           distance={this.distance}
           placement={this.placement}
@@ -148,8 +153,7 @@ export class BqDropdown {
           sameWidth={this.sameWidth}
           skidding={this.skidding}
           strategy={this.strategy}
-          aria-labelledby="dropdown"
-          role="region"
+          role="group"
           part="dropdown"
           exportparts="panel"
         >
diff --git a/packages/bee-q/src/components/option-list/bq-option-list.tsx b/packages/bee-q/src/components/option-list/bq-option-list.tsx
index 031b40525..41af24143 100644
--- a/packages/bee-q/src/components/option-list/bq-option-list.tsx
+++ b/packages/bee-q/src/components/option-list/bq-option-list.tsx
@@ -43,6 +43,10 @@ export class BqOptionList {
   // Ordered by their natural call order
   // =====================================
 
+  componentDidLoad() {
+    this.el.setAttribute('role', 'listbox');
+  }
+
   // Listeners
   // ==============
 
@@ -77,7 +81,7 @@ export class BqOptionList {
       <div
         class="bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]"
         part="base"
-        role="listbox"
+        role="group"
         aria-label={this.ariaLabel}
       >
         <slot />

From 1ccf09490ca3f684baf0f1f0dcde5b9a0e1b41c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 13:10:22 +0300
Subject: [PATCH 07/23] fix(Select): aria-* accessibility issues

---
 packages/bee-q/src/components/select/bq-select.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
index 3eeedc070..6a4f1fe51 100644
--- a/packages/bee-q/src/components/select/bq-select.tsx
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -229,10 +229,13 @@ export class BqSelect {
   // ===================================
 
   render() {
+    const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;
+
     return (
       <div class="bq-select" part="base">
         {/* Label */}
         <label
+          id={labelId}
           class={{ 'bq-select--label': true, hidden: !this.hasLabel }}
           htmlFor={this.name || this.fallbackInputId}
           ref={(labelElem) => (this.labelElem = labelElem)}
@@ -241,7 +244,7 @@ export class BqSelect {
           <slot name="label" onSlotchange={this.handleLabelSlotChange} />
         </label>
         {/* Select dropdown */}
-        <bq-dropdown class="bq-select__dropdown w-full" sameWidth exportparts="panel">
+        <bq-dropdown class="bq-select__dropdown w-full" open={this.open} sameWidth exportparts="panel">
           {/* Input control group */}
           <div
             class={{
@@ -268,7 +271,7 @@ export class BqSelect {
               autoCapitalize="off"
               autoFocus={this.autofocus}
               aria-disabled={this.disabled ? 'true' : 'false'}
-              aria-controls="listbox"
+              aria-controls={`bq-options-${this.name}`}
               aria-expanded={this.open}
               aria-haspopup="listbox"
               disabled={this.disabled}
@@ -315,7 +318,7 @@ export class BqSelect {
               </slot>
             </span>
           </div>
-          <bq-option-list aria-expanded={this.open} role="listbox" onBqSelect={this.handleSelect} tabIndex={-1}>
+          <bq-option-list id={`bq-options-${this.name}`} onBqSelect={this.handleSelect}>
             <slot />
           </bq-option-list>
         </bq-dropdown>

From ac8ec174e4f01638ca165d18140ad2c58ad1e851 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 13:11:02 +0300
Subject: [PATCH 08/23] fix(Selected): supress user click text selection

---
 packages/bee-q/src/components/select/scss/bq-select.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bee-q/src/components/select/scss/bq-select.scss b/packages/bee-q/src/components/select/scss/bq-select.scss
index 1c5aefd2f..c03ba1178 100644
--- a/packages/bee-q/src/components/select/scss/bq-select.scss
+++ b/packages/bee-q/src/components/select/scss/bq-select.scss
@@ -44,7 +44,7 @@
   // Padding
   @apply py-[--bq-select--paddingY] pe-[--bq-select--pading-end] ps-[--bq-select--pading-start];
   // Text
-  @apply text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];
+  @apply select-none text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];
   // Hover
   @apply [&:not(.disabled):not(:focus-within)]:hover:border-[color:--bq-select--border-color-hover];
 
@@ -106,7 +106,7 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-select--control__input {
-  @apply flex-auto cursor-[inherit] appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];
+  @apply flex-auto cursor-[inherit] select-none appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];
   @apply m-0 min-h-[--bq-select--icon-size] min-w-[0] border-none p-0 focus:outline-none focus-visible:outline-none;
 
   box-shadow: none;

From 6f62f0e08323dc4fbc97d5d9f932164e84a2a4af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 13:46:34 +0300
Subject: [PATCH 09/23] feat(Dropdown): add `bqoOpen` event emitter

---
 packages/bee-q/src/components.d.ts                     |  8 ++++++++
 packages/bee-q/src/components/dropdown/bq-dropdown.tsx | 10 +++++++++-
 packages/bee-q/src/components/dropdown/readme.md       |  7 +++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index f59aa1004..328cb55db 100644
--- a/packages/bee-q/src/components.d.ts
+++ b/packages/bee-q/src/components.d.ts
@@ -1019,6 +1019,10 @@ export interface BqDialogCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBqDialogElement;
 }
+export interface BqDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBqDropdownElement;
+}
 export interface BqIconCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBqIconElement;
@@ -1613,6 +1617,10 @@ declare namespace LocalJSX {
           * If true, the panel will remain open after a selection is made.
          */
         "keepOpenOnSelect"?: boolean;
+        /**
+          * Callback handler to be called when the dropdown panel is opened or closed.
+         */
+        "onBqOpen"?: (event: BqDropdownCustomEvent<{ open: boolean }>) => void;
         /**
           * If true, the panel will be visible.
          */
diff --git a/packages/bee-q/src/components/dropdown/bq-dropdown.tsx b/packages/bee-q/src/components/dropdown/bq-dropdown.tsx
index 0d98019cc..e58f8125d 100644
--- a/packages/bee-q/src/components/dropdown/bq-dropdown.tsx
+++ b/packages/bee-q/src/components/dropdown/bq-dropdown.tsx
@@ -1,4 +1,4 @@
-import { h, Component, Element, Prop, Listen } from '@stencil/core';
+import { h, Component, Element, Prop, Listen, Event, EventEmitter, Watch } from '@stencil/core';
 
 import { FloatingUIPlacement } from '../../services/interfaces';
 
@@ -60,10 +60,18 @@ export class BqDropdown {
   // Prop lifecycle events
   // =======================
 
+  @Watch('open')
+  onOpenChange() {
+    this.bqOpen.emit({ open: this.open });
+  }
+
   // Events section
   // Requires JSDocs for public API documentation
   // ==============================================
 
+  /** Callback handler to be called when the dropdown panel is opened or closed. */
+  @Event() bqOpen: EventEmitter<{ open: boolean }>;
+
   // Component lifecycle events
   // Ordered by their natural call order
   // =====================================
diff --git a/packages/bee-q/src/components/dropdown/readme.md b/packages/bee-q/src/components/dropdown/readme.md
index e0934fac7..276b8a707 100644
--- a/packages/bee-q/src/components/dropdown/readme.md
+++ b/packages/bee-q/src/components/dropdown/readme.md
@@ -19,6 +19,13 @@
 | `strategy`         | `strategy`            | Defines the strategy to position the panel                                            | `"absolute" \| "fixed"`                                                                                                                                              | `'fixed'`        |
 
 
+## Events
+
+| Event    | Description                                                                | Type                              |
+| -------- | -------------------------------------------------------------------------- | --------------------------------- |
+| `bqOpen` | Callback handler to be called when the dropdown panel is opened or closed. | `CustomEvent<{ open: boolean; }>` |
+
+
 ## Shadow Parts
 
 | Part         | Description                                                                             |

From f1ebe9d85cb6bc98f08a8d4a18683507f358d4f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 13:48:20 +0300
Subject: [PATCH 10/23] feat(Select): animate suffix icon on dropdown panel
 open/close

---
 .../bee-q/src/components/select/bq-select.tsx | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
index 6a4f1fe51..d8c64a592 100644
--- a/packages/bee-q/src/components/select/bq-select.tsx
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';
 
 import { getTextContent, hasSlotContent, isDefined } from '../../shared/utils';
 import { TInputValidation, TInputValue } from '../input/bq-input.types';
@@ -143,6 +143,13 @@ export class BqSelect {
   // Listeners
   // ==============
 
+  @Listen('bqOpen', { capture: true })
+  handleOpenChange(ev: CustomEvent<{ open: boolean }>) {
+    if (!ev.composedPath().includes(this.el)) return;
+
+    this.open = ev.detail.open;
+  }
+
   // Public methods API
   // These methods are exposed on the host element.
   // Always use two lines.
@@ -167,6 +174,13 @@ export class BqSelect {
     this.bqFocus.emit(this.el);
   };
 
+  private handleSelect = (ev: CustomEvent<{ value: TInputValue; item: HTMLBqOptionElement }>) => {
+    if (this.disabled) return;
+
+    this.value = ev.detail.value;
+    this.inputElem.focus();
+  };
+
   private handleClearClick = (ev: CustomEvent) => {
     if (this.disabled) return;
 
@@ -179,13 +193,6 @@ export class BqSelect {
     ev.stopPropagation();
   };
 
-  private handleSelect = (ev: CustomEvent<{ value: TInputValue; item: HTMLBqOptionElement }>) => {
-    if (this.disabled) return;
-
-    this.value = ev.detail.value;
-    this.inputElem.focus();
-  };
-
   private handleLabelSlotChange = () => {
     this.hasLabel = hasSlotContent(this.labelElem);
   };
@@ -309,7 +316,7 @@ export class BqSelect {
             )}
             {/* Suffix */}
             <span
-              class={{ 'bq-select--control__suffix': true }}
+              class={{ 'bq-select--control__suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}
               ref={(spanElem) => (this.suffixElem = spanElem)}
               part="suffix"
             >

From 8b8f98a237cc709ea9f139425cc72adf350e86cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 14:55:56 +0300
Subject: [PATCH 11/23] feat(dropdown): allow disabled and do not open panel if
 trigger is disabled

---
 packages/bee-q/src/components.d.ts            | 64 +++++++++++++++++++
 .../_storybook/bq-dropdown.stories.tsx        |  3 +
 .../src/components/dropdown/bq-dropdown.tsx   | 17 ++++-
 .../bee-q/src/components/dropdown/readme.md   |  1 +
 4 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index 328cb55db..f0e33f11b 100644
--- a/packages/bee-q/src/components.d.ts
+++ b/packages/bee-q/src/components.d.ts
@@ -289,6 +289,10 @@ export namespace Components {
         "titleAlignment"?: TDividerTitleAlignment;
     }
     interface BqDropdown {
+        /**
+          * If true, the dropdown panel will be visible and won't be shown.
+         */
+        "disabled"?: boolean;
         /**
           * Represents the distance (gutter or margin) between the panel and the trigger element.
          */
@@ -613,10 +617,18 @@ export namespace Components {
           * Indicates whether the Select input is disabled or not. If `true`, the Select is disabled and cannot be interacted with.
          */
         "disabled"?: boolean;
+        /**
+          * Represents the distance (gutter or margin) between the Select panel and the input element.
+         */
+        "distance"?: number;
         /**
           * The ID of the form that the Select input belongs to.
          */
         "form"?: string;
+        /**
+          * If true, the Select panel will remain open after a selection is made.
+         */
+        "keepOpenOnSelect"?: boolean;
         /**
           * The Select input name.
          */
@@ -625,10 +637,18 @@ export namespace Components {
           * If true, the Select panel will be visible.
          */
         "open"?: boolean;
+        /**
+          * When set, it will override the height of the Select panel.
+         */
+        "panelHeight"?: string;
         /**
           * The Select input placeholder text value
          */
         "placeholder"?: string;
+        /**
+          * Position of the Select panel
+         */
+        "placement"?: FloatingUIPlacement;
         /**
           * If true, the Select input cannot be modified.
          */
@@ -637,6 +657,18 @@ export namespace Components {
           * Indicates whether or not the Select input is required to be filled out before submitting the form.
          */
         "required"?: boolean;
+        /**
+          * Whether the panel should have the Select same width as the input element
+         */
+        "sameWidth"?: boolean;
+        /**
+          * Represents the skidding between the Select panel and the input element.
+         */
+        "skidding"?: number;
+        /**
+          * Defines the strategy to position the Select panel
+         */
+        "strategy"?: 'fixed' | 'absolute';
         /**
           * The validation status of the Select input.
           * @remarks This property is used to indicate the validation status of the select input. It can be set to one of the following values: - `'none'`: No validation status is set. - `'error'`: The input has a validation error. - `'warning'`: The input has a validation warning. - `'success'`: The input has passed validation.
@@ -1609,6 +1641,10 @@ declare namespace LocalJSX {
         "titleAlignment"?: TDividerTitleAlignment;
     }
     interface BqDropdown {
+        /**
+          * If true, the dropdown panel will be visible and won't be shown.
+         */
+        "disabled"?: boolean;
         /**
           * Represents the distance (gutter or margin) between the panel and the trigger element.
          */
@@ -1985,10 +2021,18 @@ declare namespace LocalJSX {
           * Indicates whether the Select input is disabled or not. If `true`, the Select is disabled and cannot be interacted with.
          */
         "disabled"?: boolean;
+        /**
+          * Represents the distance (gutter or margin) between the Select panel and the input element.
+         */
+        "distance"?: number;
         /**
           * The ID of the form that the Select input belongs to.
          */
         "form"?: string;
+        /**
+          * If true, the Select panel will remain open after a selection is made.
+         */
+        "keepOpenOnSelect"?: boolean;
         /**
           * The Select input name.
          */
@@ -2013,10 +2057,18 @@ declare namespace LocalJSX {
           * If true, the Select panel will be visible.
          */
         "open"?: boolean;
+        /**
+          * When set, it will override the height of the Select panel.
+         */
+        "panelHeight"?: string;
         /**
           * The Select input placeholder text value
          */
         "placeholder"?: string;
+        /**
+          * Position of the Select panel
+         */
+        "placement"?: FloatingUIPlacement;
         /**
           * If true, the Select input cannot be modified.
          */
@@ -2025,6 +2077,18 @@ declare namespace LocalJSX {
           * Indicates whether or not the Select input is required to be filled out before submitting the form.
          */
         "required"?: boolean;
+        /**
+          * Whether the panel should have the Select same width as the input element
+         */
+        "sameWidth"?: boolean;
+        /**
+          * Represents the skidding between the Select panel and the input element.
+         */
+        "skidding"?: number;
+        /**
+          * Defines the strategy to position the Select panel
+         */
+        "strategy"?: 'fixed' | 'absolute';
         /**
           * The validation status of the Select input.
           * @remarks This property is used to indicate the validation status of the select input. It can be set to one of the following values: - `'none'`: No validation status is set. - `'error'`: The input has a validation error. - `'warning'`: The input has a validation warning. - `'success'`: The input has passed validation.
diff --git a/packages/bee-q/src/components/dropdown/_storybook/bq-dropdown.stories.tsx b/packages/bee-q/src/components/dropdown/_storybook/bq-dropdown.stories.tsx
index dd29fdd71..b0530df23 100644
--- a/packages/bee-q/src/components/dropdown/_storybook/bq-dropdown.stories.tsx
+++ b/packages/bee-q/src/components/dropdown/_storybook/bq-dropdown.stories.tsx
@@ -13,6 +13,7 @@ const meta: Meta = {
     },
   },
   argTypes: {
+    disabled: { control: 'boolean' },
     distance: { control: 'number' },
     placement: {
       control: 'select',
@@ -43,6 +44,7 @@ const meta: Meta = {
     trigger: { control: 'text', table: { disable: true } },
   },
   args: {
+    disabled: false,
     distance: 4,
     placement: 'bottom-start',
     open: false,
@@ -60,6 +62,7 @@ type Story = StoryObj;
 
 const Template = (args: Args) => html`
   <bq-dropdown
+    ?disabled=${args.disabled}
     distance=${args.distance}
     placement=${args.placement}
     ?open=${args.open}
diff --git a/packages/bee-q/src/components/dropdown/bq-dropdown.tsx b/packages/bee-q/src/components/dropdown/bq-dropdown.tsx
index e58f8125d..409e2ae20 100644
--- a/packages/bee-q/src/components/dropdown/bq-dropdown.tsx
+++ b/packages/bee-q/src/components/dropdown/bq-dropdown.tsx
@@ -20,6 +20,7 @@ export class BqDropdown {
   // ====================
 
   private dropdownPanelId = `bq-dropdown-panel-${++id}`;
+  private triggerElem: HTMLElement;
 
   // Reference to host HTML element
   // ===================================
@@ -33,6 +34,9 @@ export class BqDropdown {
   // Public Property API
   // ========================
 
+  /** If true, the dropdown panel will be visible and won't be shown. */
+  @Prop({ reflect: true }) disabled?: boolean = false;
+
   /** Represents the distance (gutter or margin) between the panel and the trigger element. */
   @Prop({ reflect: true }) distance?: number = 4;
 
@@ -76,6 +80,10 @@ export class BqDropdown {
   // Ordered by their natural call order
   // =====================================
 
+  componentDidLoad() {
+    this.triggerElem = this.el.querySelector('[slot="trigger"]');
+  }
+
   // Listeners
   // ==============
 
@@ -126,6 +134,9 @@ export class BqDropdown {
   // =======================================================
 
   private togglePanel = (): void => {
+    // Don't toggle the panel if the component is disabled or the trigger element is disabled
+    if (this.disabled || this.triggerElem?.hasAttribute('disabled')) return;
+
     this.open = !this.open;
   };
 
@@ -140,12 +151,12 @@ export class BqDropdown {
 
     return (
       <div class="bq-dropdown" part="base">
-        {/* TRIGGER ELEMENT */}
+        {/* TRIGGER CONTAINER */}
         <div
           class="bq-dropdown__trigger block"
-          onClick={this.togglePanel}
-          aria-haspopup="true"
           aria-controls={this.dropdownPanelId}
+          aria-haspopup="true"
+          onClick={this.togglePanel}
           part="trigger"
         >
           <slot name="trigger" />
diff --git a/packages/bee-q/src/components/dropdown/readme.md b/packages/bee-q/src/components/dropdown/readme.md
index 276b8a707..71f4012c5 100644
--- a/packages/bee-q/src/components/dropdown/readme.md
+++ b/packages/bee-q/src/components/dropdown/readme.md
@@ -9,6 +9,7 @@
 
 | Property           | Attribute             | Description                                                                           | Type                                                                                                                                                                 | Default          |
 | ------------------ | --------------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| `disabled`         | `disabled`            | If true, the dropdown panel will be visible and won't be shown.                       | `boolean`                                                                                                                                                            | `false`          |
 | `distance`         | `distance`            | Represents the distance (gutter or margin) between the panel and the trigger element. | `number`                                                                                                                                                             | `4`              |
 | `keepOpenOnSelect` | `keep-open-on-select` | If true, the panel will remain open after a selection is made.                        | `boolean`                                                                                                                                                            | `false`          |
 | `open`             | `open`                | If true, the panel will be visible.                                                   | `boolean`                                                                                                                                                            | `false`          |

From 14b18f6488d68de5cbcac840c10ae6f4a28e4196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 14:57:19 +0300
Subject: [PATCH 12/23] feat(Select): add panel properties

---
 .../bee-q/src/components/select/bq-select.tsx | 36 ++++++++++++++++++-
 .../bee-q/src/components/select/readme.md     | 35 ++++++++++--------
 .../src/components/select/scss/bq-select.scss |  2 +-
 3 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
index d8c64a592..c9145010c 100644
--- a/packages/bee-q/src/components/select/bq-select.tsx
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -1,5 +1,6 @@
 import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';
 
+import { FloatingUIPlacement } from '../../services/interfaces';
 import { getTextContent, hasSlotContent, isDefined } from '../../shared/utils';
 import { TInputValidation, TInputValue } from '../input/bq-input.types';
 
@@ -68,24 +69,45 @@ export class BqSelect {
   /** If true, the clear button won't be displayed */
   @Prop({ reflect: true }) disableClear? = false;
 
+  /** Represents the distance (gutter or margin) between the Select panel and the input element. */
+  @Prop({ reflect: true }) distance?: number = 8;
+
   /** The ID of the form that the Select input belongs to. */
   @Prop({ reflect: true }) form?: string;
 
+  /** If true, the Select panel will remain open after a selection is made. */
+  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;
+
   /** The Select input name. */
   @Prop({ reflect: true }) name!: string;
 
   /** If true, the Select panel will be visible. */
   @Prop({ reflect: true }) open?: boolean = false;
 
+  /** When set, it will override the height of the Select panel. */
+  @Prop({ reflect: true }) panelHeight?: string;
+
   /** The Select input placeholder text value */
   @Prop({ reflect: true }) placeholder?: string;
 
+  /** Position of the Select panel */
+  @Prop({ reflect: true }) placement?: FloatingUIPlacement = 'bottom';
+
   /** If true, the Select input cannot be modified. */
   @Prop({ reflect: true }) readonly?: boolean;
 
   /** Indicates whether or not the Select input is required to be filled out before submitting the form. */
   @Prop({ reflect: true }) required?: boolean;
 
+  /** Whether the panel should have the Select same width as the input element */
+  @Prop({ reflect: true }) sameWidth?: boolean = true;
+
+  /**  Represents the skidding between the Select panel and the input element. */
+  @Prop({ reflect: true }) skidding?: number = 0;
+
+  /** Defines the strategy to position the Select panel */
+  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';
+
   /**
    * The validation status of the Select input.
    *
@@ -251,7 +273,19 @@ export class BqSelect {
           <slot name="label" onSlotchange={this.handleLabelSlotChange} />
         </label>
         {/* Select dropdown */}
-        <bq-dropdown class="bq-select__dropdown w-full" open={this.open} sameWidth exportparts="panel">
+        <bq-dropdown
+          class="bq-select__dropdown w-full"
+          disabled={this.disabled}
+          distance={this.distance}
+          keepOpenOnSelect={this.keepOpenOnSelect}
+          open={this.open}
+          panelHeight={this.panelHeight}
+          placement={this.placement}
+          sameWidth={this.sameWidth}
+          skidding={this.skidding}
+          strategy={this.strategy}
+          exportparts="panel"
+        >
           {/* Input control group */}
           <div
             class={{
diff --git a/packages/bee-q/src/components/select/readme.md b/packages/bee-q/src/components/select/readme.md
index aa248d4bc..8117cce76 100644
--- a/packages/bee-q/src/components/select/readme.md
+++ b/packages/bee-q/src/components/select/readme.md
@@ -7,20 +7,27 @@
 
 ## Properties
 
-| Property            | Attribute            | Description                                                                                                             | Type                                          | Default         |
-| ------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | --------------- |
-| `autofocus`         | `autofocus`          | If true, the Select input will be focused on component render                                                           | `boolean`                                     | `undefined`     |
-| `clearButtonLabel`  | `clear-button-label` | The clear button aria label                                                                                             | `string`                                      | `'Clear value'` |
-| `disableClear`      | `disable-clear`      | If true, the clear button won't be displayed                                                                            | `boolean`                                     | `false`         |
-| `disabled`          | `disabled`           | Indicates whether the Select input is disabled or not. If `true`, the Select is disabled and cannot be interacted with. | `boolean`                                     | `false`         |
-| `form`              | `form`               | The ID of the form that the Select input belongs to.                                                                    | `string`                                      | `undefined`     |
-| `name` _(required)_ | `name`               | The Select input name.                                                                                                  | `string`                                      | `undefined`     |
-| `open`              | `open`               | If true, the Select panel will be visible.                                                                              | `boolean`                                     | `false`         |
-| `placeholder`       | `placeholder`        | The Select input placeholder text value                                                                                 | `string`                                      | `undefined`     |
-| `readonly`          | `readonly`           | If true, the Select input cannot be modified.                                                                           | `boolean`                                     | `undefined`     |
-| `required`          | `required`           | Indicates whether or not the Select input is required to be filled out before submitting the form.                      | `boolean`                                     | `undefined`     |
-| `validationStatus`  | `validation-status`  | The validation status of the Select input.                                                                              | `"error" \| "none" \| "success" \| "warning"` | `'none'`        |
-| `value`             | `value`              | The select input value, it can be used to reset the field to a previous value                                           | `number \| string \| string[]`                | `undefined`     |
+| Property            | Attribute             | Description                                                                                                             | Type                                                                                                                                                                 | Default         |
+| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
+| `autofocus`         | `autofocus`           | If true, the Select input will be focused on component render                                                           | `boolean`                                                                                                                                                            | `undefined`     |
+| `clearButtonLabel`  | `clear-button-label`  | The clear button aria label                                                                                             | `string`                                                                                                                                                             | `'Clear value'` |
+| `disableClear`      | `disable-clear`       | If true, the clear button won't be displayed                                                                            | `boolean`                                                                                                                                                            | `false`         |
+| `disabled`          | `disabled`            | Indicates whether the Select input is disabled or not. If `true`, the Select is disabled and cannot be interacted with. | `boolean`                                                                                                                                                            | `false`         |
+| `distance`          | `distance`            | Represents the distance (gutter or margin) between the Select panel and the input element.                              | `number`                                                                                                                                                             | `8`             |
+| `form`              | `form`                | The ID of the form that the Select input belongs to.                                                                    | `string`                                                                                                                                                             | `undefined`     |
+| `keepOpenOnSelect`  | `keep-open-on-select` | If true, the Select panel will remain open after a selection is made.                                                   | `boolean`                                                                                                                                                            | `false`         |
+| `name` _(required)_ | `name`                | The Select input name.                                                                                                  | `string`                                                                                                                                                             | `undefined`     |
+| `open`              | `open`                | If true, the Select panel will be visible.                                                                              | `boolean`                                                                                                                                                            | `false`         |
+| `panelHeight`       | `panel-height`        | When set, it will override the height of the Select panel.                                                              | `string`                                                                                                                                                             | `undefined`     |
+| `placeholder`       | `placeholder`         | The Select input placeholder text value                                                                                 | `string`                                                                                                                                                             | `undefined`     |
+| `placement`         | `placement`           | Position of the Select panel                                                                                            | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'`      |
+| `readonly`          | `readonly`            | If true, the Select input cannot be modified.                                                                           | `boolean`                                                                                                                                                            | `undefined`     |
+| `required`          | `required`            | Indicates whether or not the Select input is required to be filled out before submitting the form.                      | `boolean`                                                                                                                                                            | `undefined`     |
+| `sameWidth`         | `same-width`          | Whether the panel should have the Select same width as the input element                                                | `boolean`                                                                                                                                                            | `true`          |
+| `skidding`          | `skidding`            | Represents the skidding between the Select panel and the input element.                                                 | `number`                                                                                                                                                             | `0`             |
+| `strategy`          | `strategy`            | Defines the strategy to position the Select panel                                                                       | `"absolute" \| "fixed"`                                                                                                                                              | `'fixed'`       |
+| `validationStatus`  | `validation-status`   | The validation status of the Select input.                                                                              | `"error" \| "none" \| "success" \| "warning"`                                                                                                                        | `'none'`        |
+| `value`             | `value`               | The select input value, it can be used to reset the field to a previous value                                           | `number \| string \| string[]`                                                                                                                                       | `undefined`     |
 
 
 ## Events
diff --git a/packages/bee-q/src/components/select/scss/bq-select.scss b/packages/bee-q/src/components/select/scss/bq-select.scss
index c03ba1178..0a8ce98d5 100644
--- a/packages/bee-q/src/components/select/scss/bq-select.scss
+++ b/packages/bee-q/src/components/select/scss/bq-select.scss
@@ -141,7 +141,7 @@
 }
 
 .bq-select--control__suffix {
-  @apply ms-[--bq-select--gap];
+  @apply ms-[--bq-select--gap] transition-transform duration-300 ease-in-out;
 }
 
 /* -------------------------------------------------------------------------- */

From d9ac34aff431be6da5ccffa584238c08c41687a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 15:03:02 +0300
Subject: [PATCH 13/23] fix(Option): avoid bubbling for focus and blur events

---
 packages/bee-q/src/components/option/bq-option.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bee-q/src/components/option/bq-option.tsx b/packages/bee-q/src/components/option/bq-option.tsx
index 92bf222dd..0d301a5a3 100644
--- a/packages/bee-q/src/components/option/bq-option.tsx
+++ b/packages/bee-q/src/components/option/bq-option.tsx
@@ -52,10 +52,10 @@ export class BqOption {
   // ==============================================
 
   /** Handler to be called when item loses focus */
-  @Event() bqBlur: EventEmitter<HTMLBqOptionElement>;
+  @Event({ bubbles: false }) bqBlur: EventEmitter<HTMLBqOptionElement>;
 
   /** Handler to be called when item is focused */
-  @Event() bqFocus: EventEmitter<HTMLBqOptionElement>;
+  @Event({ bubbles: false }) bqFocus: EventEmitter<HTMLBqOptionElement>;
 
   /** Handler to be called when item is clicked */
   @Event() bqClick: EventEmitter<HTMLBqOptionElement>;

From 2dfb9c33e73c7ab2cf68edb7179f012d57b0f629 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 15:09:45 +0300
Subject: [PATCH 14/23] feat(Angular): include `bq-select` in the Angular Value
 Accessor Bindings

---
 packages/bee-q/src/tools/angular-value-accessor-config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bee-q/src/tools/angular-value-accessor-config.ts b/packages/bee-q/src/tools/angular-value-accessor-config.ts
index a2ed6d5c8..859108f7c 100644
--- a/packages/bee-q/src/tools/angular-value-accessor-config.ts
+++ b/packages/bee-q/src/tools/angular-value-accessor-config.ts
@@ -8,7 +8,7 @@ export const angularValueAccessorBindings: ValueAccessorConfig[] = [
     type: 'boolean',
   },
   {
-    elementSelectors: ['bq-input', 'bq-radio-group', 'bq-slider'],
+    elementSelectors: ['bq-input', 'bq-radio-group', 'bq-select', 'bq-slider'],
     event: 'bqChange',
     targetAttr: 'value',
     type: 'text',

From 82ad890411536e155d5fb993378fe6ae8318b6b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Tue, 15 Aug 2023 15:10:37 +0300
Subject: [PATCH 15/23] docs(Select): update Storybook examples and .mdx docs

---
 .../select/_storybook/bq-select.mdx           |  24 ++
 .../select/_storybook/bq-select.stories.tsx   | 219 ++++++++++++++++++
 2 files changed, 243 insertions(+)
 create mode 100644 packages/bee-q/src/components/select/_storybook/bq-select.mdx
 create mode 100644 packages/bee-q/src/components/select/_storybook/bq-select.stories.tsx

diff --git a/packages/bee-q/src/components/select/_storybook/bq-select.mdx b/packages/bee-q/src/components/select/_storybook/bq-select.mdx
new file mode 100644
index 000000000..ef0b6f63e
--- /dev/null
+++ b/packages/bee-q/src/components/select/_storybook/bq-select.mdx
@@ -0,0 +1,24 @@
+import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';
+
+<Title>Select</Title>
+
+The Select Component is a UI element used to allow users to select from a list of options.
+Select components are commonly used in forms and other applications to provide a convenient way for users to select a value from a list of options.
+
+<Subtitle>Usage</Subtitle>
+
+- Allowing users to select from a list of options, such as a list of countries, a list of colors, or a list of dates.
+- Filtering or narrowing down a list of options, such as by searching or selecting a category, to make it easier for users to find the option they need.
+- Providing a compact and efficient way to select a value from a large list of options, without taking up too much space on the screen.
+
+<Subtitle>👍 When to use</Subtitle>
+
+Use the Select component when:
+
+- Choosing from a predefined list: Select components are ideal for situations where users need to choose a single option from a predetermined list of options.
+- Consistent option selection: If the options available are consistent across users or use cases, a select component provides a standardized and familiar interface for users to make their selections.
+- Limited screen space: If screen real estate is limited, a select component can be a space-efficient way of presenting a list of options without cluttering the interface.
+
+<Title>Properties</Title>
+
+<ArgTypes of="bq-select" />
diff --git a/packages/bee-q/src/components/select/_storybook/bq-select.stories.tsx b/packages/bee-q/src/components/select/_storybook/bq-select.stories.tsx
new file mode 100644
index 000000000..1d303ad2a
--- /dev/null
+++ b/packages/bee-q/src/components/select/_storybook/bq-select.stories.tsx
@@ -0,0 +1,219 @@
+import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { html, nothing } from 'lit-html';
+
+import mdx from './bq-select.mdx';
+import { INPUT_VALIDATION } from '../../input/bq-input.types';
+
+const meta: Meta = {
+  title: 'Components/Select',
+  component: 'bq-select',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+  argTypes: {
+    autofocus: { control: 'boolean' },
+    'clear-button-label': { control: 'text' },
+    'disable-clear': { control: 'boolean' },
+    distance: { control: 'number' },
+    disabled: { control: 'boolean' },
+    form: { control: 'text' },
+    'keep-open-on-select': { control: 'boolean' },
+    name: { control: 'text' },
+    open: { control: 'boolean' },
+    'panel-height': { control: 'text' },
+    placement: {
+      control: 'select',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'right',
+        'right-start',
+        'right-end',
+        'left',
+        'left-start',
+        'left-end',
+      ],
+    },
+    placeholder: { control: 'text' },
+    readonly: { control: 'boolean' },
+    required: { control: 'boolean' },
+    'same-width': { control: 'boolean' },
+    skidding: { control: 'number' },
+    strategy: { control: 'select', options: ['fixed', 'absolute'] },
+    'validation-status': { control: 'select', options: [...INPUT_VALIDATION] },
+    value: { control: 'text' },
+    // Events
+    bqBlur: { action: 'bqBlur' },
+    bqClear: { action: 'bqClear' },
+    bqFocus: { action: 'bqFocus' },
+    bqSelect: { action: 'bqSelect' },
+    // Not part of the public API, so we don't want to expose it in the docs
+    noLabel: { control: 'bolean', table: { disable: true } },
+    hasLabelTooltip: { control: 'bolean', table: { disable: true } },
+    noHelperText: { control: 'bolean', table: { disable: true } },
+    optionalLabel: { control: 'bolean', table: { disable: true } },
+    prefix: { control: 'bolean', table: { disable: true } },
+    suffix: { control: 'bolean', table: { disable: true } },
+    options: { control: 'text', table: { disable: true } },
+  },
+  args: {
+    autofocus: false,
+    'clear-button-label': 'Clear value',
+    'disable-clear': false,
+    distance: 8,
+    disabled: false,
+    form: undefined,
+    'keep-open-on-select': false,
+    name: 'bq-select',
+    open: false,
+    'panel-height': undefined,
+    placement: 'bottom',
+    placeholder: 'Placeholder',
+    'same-width': false,
+    skidding: 0,
+    strategy: 'absolute',
+    readonly: false,
+    required: false,
+    'validation-status': 'none',
+    value: undefined,
+    // Not part of the public API, so we don't want to expose it in the docs
+    options: html`
+      <bq-option value="1">Option 1</bq-option>
+      <bq-option value="2">Option 2</bq-option>
+      <bq-option value="3">Option 3</bq-option>
+      <bq-option value="4">Option 4</bq-option>
+      <bq-option value="5">Option 5</bq-option>
+    `,
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+const Template = (args: Args) => {
+  const tooltipTemplate = args.hasLabelTooltip
+    ? html`
+        <bq-tooltip class="ms-xs">
+          <bq-icon name="info" slot="trigger"></bq-icon>
+          You can provide more context detail by adding a tooltip to the label.
+        </bq-tooltip>
+      `
+    : nothing;
+  const labelTemplate = html`
+    <label class="flex flex-grow items-center" slot=${ifDefined(!args.optionalLabel ? 'label' : null)}>
+      Select label ${tooltipTemplate}
+    </label>
+  `;
+  const label = !args.optionalLabel
+    ? labelTemplate
+    : html`
+        <div slot="label" class="flex flex-1">
+          ${labelTemplate}
+          <span class="text-text-secondary">Optional</span>
+        </div>
+      `;
+  const style = args.hasLabelTooltip
+    ? html`
+        <style>
+          bq-select {
+            width: 75vw;
+          }
+        </style>
+      `
+    : nothing;
+
+  return html`
+    ${style}
+    <bq-select
+      ?autofocus=${args.autofocus}
+      clear-button-label=${args['clear-button-label']}
+      distance=${args.distance}
+      ?disable-clear=${args['disable-clear']}
+      ?disabled=${args.disabled}
+      form=${ifDefined(args.form)}
+      ?keep-open-on-select=${args['keep-open-on-select']}
+      name=${ifDefined(args.name)}
+      ?open=${args.open}
+      panel-height=${args['panel-height']}
+      placeholder=${args.placeholder}
+      placement=${args.placement}
+      ?readonly=${args.readonly}
+      ?required=${args.required}
+      ?same-width=${args['same-width']}
+      skidding=${args.skidding}
+      strategy=${args.strategy}
+      validation-status=${args['validation-status']}
+      value=${ifDefined(args.value)}
+      @bqBlur=${args.bqBlur}
+      @bqSelect=${args.bqSelect}
+      @bqClear=${args.bqClear}
+      @bqFocus=${args.bqFocus}
+    >
+      ${!args.noLabel ? label : nothing}
+      ${args.prefix ? html`<bq-icon name="user-circle" slot="prefix"></bq-icon>` : nothing}
+      ${args.suffix ? html`<bq-icon name="caret-circle-down" slot="suffix"></bq-icon>` : nothing}
+      ${!args.noHelperText
+        ? html`
+            <span class="flex items-center gap-xs" slot="helper-text">
+              <bq-icon name="star"></bq-icon>
+              Helper text
+            </span>
+          `
+        : nothing}
+      ${args.options}
+    </bq-select>
+  `;
+};
+
+export const Default: Story = {
+  render: Template,
+};
+
+export const Open: Story = {
+  render: Template,
+  args: {
+    autofocus: true,
+    open: true,
+  },
+};
+
+export const InitialValue: Story = {
+  render: Template,
+  args: {
+    value: '2',
+  },
+};
+
+export const Validation: Story = {
+  render: (args) => html`
+    <div class="grid grid-cols-1 gap-m sm:grid-cols-3">
+      <!-- Error -->
+      ${Template({ ...args, 'validation-status': 'error', value: 1 })}
+      <!-- Warning -->
+      ${Template({ ...args, 'validation-status': 'warning', value: 3 })}
+      <!-- Success -->
+      ${Template({ ...args, 'validation-status': 'success', value: 5 })}
+    </div>
+  `,
+};
+
+export const Tooltip: Story = {
+  name: 'Label with "Info tooltip"',
+  render: Template,
+  args: {
+    hasLabelTooltip: true,
+    optionalLabel: true,
+    prefix: true,
+    suffix: true,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};

From 8fa887e836f51187bb885fbb86c7e022cc33b8dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Wed, 16 Aug 2023 12:31:13 +0300
Subject: [PATCH 16/23] test(Select): add e2e tests

---
 .../option/__tests__/bq-option.e2e.ts         |  70 +++++----
 .../select/__tests__/bq-select.e2e.ts         | 141 ++++++++++++++++++
 2 files changed, 175 insertions(+), 36 deletions(-)
 create mode 100644 packages/bee-q/src/components/select/__tests__/bq-select.e2e.ts

diff --git a/packages/bee-q/src/components/option/__tests__/bq-option.e2e.ts b/packages/bee-q/src/components/option/__tests__/bq-option.e2e.ts
index 730d5dd4a..1fb0f0164 100644
--- a/packages/bee-q/src/components/option/__tests__/bq-option.e2e.ts
+++ b/packages/bee-q/src/components/option/__tests__/bq-option.e2e.ts
@@ -2,42 +2,43 @@ import { newE2EPage } from '@stencil/core/testing';
 
 describe('bq-option', () => {
   it('should render', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-option></bq-option>');
-
+    const page = await newE2EPage({
+      html: '<bq-option>Option label</bq-option>',
+    });
     const element = await page.find('bq-option');
 
     expect(element).toHaveClass('hydrated');
   });
 
   it('should have shadow root', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-option></bq-option>');
-
+    const page = await newE2EPage({
+      html: '<bq-option>Option label</bq-option>',
+    });
     const element = await page.find('bq-option');
 
     expect(element.shadowRoot).not.toBeNull();
   });
 
   it('should display text', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-option>Option 1</bq-option>');
-
+    const text = 'Option label';
+    const page = await newE2EPage({
+      html: `<bq-option>${text}</bq-option>`,
+    });
     const element = await page.find('bq-option');
 
-    expect(element).toEqualText('Option 1');
+    expect(element).toEqualText(text);
   });
 
   it('should trigger bqClick', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-option>Menu item label</bq-option>');
+    const page = await newE2EPage({
+      html: '<bq-option>Option label</bq-option>',
+    });
 
     const bqFocus = await page.spyOnEvent('bqFocus');
     const bqBlur = await page.spyOnEvent('bqBlur');
     const bqClick = await page.spyOnEvent('bqClick');
 
     const element = await page.find('bq-option');
-
     await element.click();
 
     expect(bqFocus).toHaveReceivedEventTimes(1);
@@ -46,14 +47,9 @@ describe('bq-option', () => {
   });
 
   it('should be keyboard accessible', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <bq-option value="option1">
-        <bq-icon name="user" size="16" slot="prefix"></bq-icon>
-        <span>Option 1</span>
-        <bq-icon name="gear" size="16" slot="suffix"></bq-icon>
-      </bq-option>
-    `);
+    const page = await newE2EPage({
+      html: '<bq-option>Option label</bq-option>',
+    });
 
     const bqFocus = await page.spyOnEvent('bqFocus');
     const bqBlur = await page.spyOnEvent('bqBlur');
@@ -66,8 +62,9 @@ describe('bq-option', () => {
   });
 
   it('should handle Enter', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-option>Option 1</bq-option>');
+    const page = await newE2EPage({
+      html: '<bq-option>Option label</bq-option>',
+    });
 
     const bqFocus = await page.spyOnEvent('bqFocus');
     const bqBlur = await page.spyOnEvent('bqBlur');
@@ -84,15 +81,14 @@ describe('bq-option', () => {
   });
 
   it('should handle `disabled` property', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-option disabled="true">Option 1</bq-option>');
-
+    const page = await newE2EPage({
+      html: '<bq-option disabled="true">Option label</bq-option>',
+    });
     const bqFocus = await page.spyOnEvent('bqFocus');
     const bqBlur = await page.spyOnEvent('bqBlur');
     const bqClick = await page.spyOnEvent('bqClick');
 
     const element = await page.find('bq-option');
-
     element.click();
 
     await page.waitForChanges();
@@ -122,13 +118,14 @@ describe('bq-option', () => {
   });
 
   it('should render suffix element', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <bq-option value="option1">
-        <span>Option label</span>
-        <span slot="suffix">Suffix</span> 
-      </bq-option>
-    `);
+    const page = await newE2EPage({
+      html: `
+        <bq-option value="option1">
+          <span>Option label</span>
+          <span slot="suffix">Suffix</span>
+        </bq-option>
+      `,
+    });
 
     const suffixText = await page.$eval('bq-option', (element) => {
       const slotElement = element.shadowRoot.querySelector('slot[name="suffix"]');
@@ -141,8 +138,9 @@ describe('bq-option', () => {
   });
 
   it('should handle `selected` property', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-option selected="true">Option 1</bq-option>');
+    const page = await newE2EPage({
+      html: '<bq-option selected="true">Option 1</bq-option>',
+    });
 
     const bqOption = await page.find('bq-option >>> div');
 
diff --git a/packages/bee-q/src/components/select/__tests__/bq-select.e2e.ts b/packages/bee-q/src/components/select/__tests__/bq-select.e2e.ts
new file mode 100644
index 000000000..60b92a2e9
--- /dev/null
+++ b/packages/bee-q/src/components/select/__tests__/bq-select.e2e.ts
@@ -0,0 +1,141 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('bq-select', () => {
+  it('should render', async () => {
+    const page = await newE2EPage({
+      html: `<bq-select></bq-select>`,
+    });
+    const element = await page.find('bq-select');
+
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should have shadow root', async () => {
+    const page = await newE2EPage({
+      html: `<bq-select></bq-select>`,
+    });
+    const element = await page.find('bq-select');
+
+    expect(element.shadowRoot).not.toBeNull();
+  });
+
+  it('should render with default suffix icon', async () => {
+    const page = await newE2EPage({
+      html: `<bq-select></bq-select>`,
+    });
+    const suffixIconElem = await page.find('bq-select >>> bq-icon[name="caret-down"]');
+
+    expect(suffixIconElem).not.toBeNull();
+  });
+
+  it('should render with prefix icon', async () => {
+    const page = await newE2EPage({
+      html: `
+        <bq-select>
+          <bq-icon name="user-circle" slot="prefix"></bq-icon>
+        </bq-select>
+      `,
+    });
+    const prefixContainerElem = await page.find('bq-select >>> .bq-select--control__prefix');
+    expect(prefixContainerElem).not.toHaveClass('hidden');
+  });
+
+  it('should render with label content', async () => {
+    const page = await newE2EPage({
+      html: `
+        <bq-select>
+          <label slot="label">Select label</label>
+        </bq-select>
+      `,
+    });
+    const labelContainerElem = await page.find('bq-select >>> .bq-select--label');
+
+    expect(labelContainerElem).not.toHaveClass('hidden');
+  });
+
+  it('should render with helper content', async () => {
+    const page = await newE2EPage({
+      html: `
+        <bq-select>
+          <span slot="helper-text">Helper text</span>
+        </bq-select>
+      `,
+    });
+    const helperContainerElem = await page.find('bq-select >>> .bq-select--helper-text');
+
+    expect(helperContainerElem).not.toHaveClass('hidden');
+  });
+
+  it('should render with options', async () => {
+    const page = await newE2EPage({
+      html: `
+        <bq-select>
+          <bq-option value="1">Option 1</bq-option>
+          <bq-option value="2">Option 2</bq-option>
+          <bq-option value="3">Option 3</bq-option>
+        </bq-select>
+      `,
+    });
+    const optionElems = await page.findAll('bq-select > bq-option');
+
+    expect(optionElems.length).toEqual(3);
+  });
+
+  it('should render with panel options opened', async () => {
+    const page = await newE2EPage({
+      html: `
+        <bq-select open>
+          <bq-option value="1">Option 1</bq-option>
+          <bq-option value="2">Option 2</bq-option>
+          <bq-option value="3">Option 3</bq-option>
+        </bq-select>
+      `,
+    });
+    const selectPanelElem = await page.find('bq-select >>> .bq-select__dropdown >>> .bq-dropdown__panel');
+
+    expect(selectPanelElem).toHaveAttribute('open');
+  });
+
+  it('should render with selected option', async () => {
+    const selectedValue = 1;
+    const page = await newE2EPage({
+      html: `
+        <bq-select value="${selectedValue}">
+          <bq-option value="1">Option 1</bq-option>
+          <bq-option value="2">Option 2</bq-option>
+          <bq-option value="3">Option 3</bq-option>
+        </bq-select>
+      `,
+    });
+    const selectValueElem = await page.find(`bq-select bq-option[value="${selectedValue}"]`);
+
+    expect(selectValueElem).toHaveAttribute('selected');
+  });
+
+  it('should select an option and emit Select event', async () => {
+    const value = 2;
+    const page = await newE2EPage({
+      html: `
+        <bq-select>
+          <bq-option value="1">Option 1</bq-option>
+          <bq-option value="2">Option 2</bq-option>
+          <bq-option value="3">Option 3</bq-option>
+        </bq-select>
+      `,
+    });
+    const eventEmitter = await page.spyOnEvent('bqSelect');
+
+    const selectElem = await page.find('bq-select');
+    await selectElem.click();
+    await page.waitForChanges();
+
+    const selectOptionElem = await page.find(`bq-option[value="${value}"]`);
+    expect(selectOptionElem).not.toHaveAttribute('selected');
+
+    await selectOptionElem.click();
+    await page.waitForChanges();
+
+    expect(selectOptionElem).toHaveAttribute('selected');
+    expect(eventEmitter).toHaveReceivedEventTimes(1);
+  });
+});

From 05517e344583a030ba43ceedfad84403a6dd6855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Wed, 16 Aug 2023 13:54:16 +0300
Subject: [PATCH 17/23] fix(Select): stop focus and blur event propagation from
 bq-option(s)

---
 packages/bee-q/src/components/option/bq-option.tsx |  4 ++--
 packages/bee-q/src/components/select/bq-select.tsx | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/bee-q/src/components/option/bq-option.tsx b/packages/bee-q/src/components/option/bq-option.tsx
index 0d301a5a3..92bf222dd 100644
--- a/packages/bee-q/src/components/option/bq-option.tsx
+++ b/packages/bee-q/src/components/option/bq-option.tsx
@@ -52,10 +52,10 @@ export class BqOption {
   // ==============================================
 
   /** Handler to be called when item loses focus */
-  @Event({ bubbles: false }) bqBlur: EventEmitter<HTMLBqOptionElement>;
+  @Event() bqBlur: EventEmitter<HTMLBqOptionElement>;
 
   /** Handler to be called when item is focused */
-  @Event({ bubbles: false }) bqFocus: EventEmitter<HTMLBqOptionElement>;
+  @Event() bqFocus: EventEmitter<HTMLBqOptionElement>;
 
   /** Handler to be called when item is clicked */
   @Event() bqClick: EventEmitter<HTMLBqOptionElement>;
diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
index c9145010c..cc4aa92d3 100644
--- a/packages/bee-q/src/components/select/bq-select.tsx
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';
 
 import { FloatingUIPlacement } from '../../services/interfaces';
-import { getTextContent, hasSlotContent, isDefined } from '../../shared/utils';
+import { getTextContent, hasSlotContent, isDefined, isHTMLElement } from '../../shared/utils';
 import { TInputValidation, TInputValue } from '../input/bq-input.types';
 
 /**
@@ -172,6 +172,15 @@ export class BqSelect {
     this.open = ev.detail.open;
   }
 
+  @Listen('bqFocus', { capture: true })
+  @Listen('bqBlur', { capture: true })
+  stopOptionFocusBlurPropagation(ev: CustomEvent) {
+    // Stop propagation of focus and blur events coming from the `bq-option` elements
+    if (isHTMLElement(ev.target, 'bq-select')) return;
+
+    ev.stopPropagation();
+  }
+
   // Public methods API
   // These methods are exposed on the host element.
   // Always use two lines.

From 16e214f6d1da5c039bcbc4e8d7d5b3240ff30dd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Wed, 16 Aug 2023 14:03:38 +0300
Subject: [PATCH 18/23] style(Select): refactor CSS classes to use BEM

---
 .../bee-q/src/components/select/bq-select.tsx | 14 ++++----
 .../src/components/select/scss/bq-select.scss | 34 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
index cc4aa92d3..bca222de9 100644
--- a/packages/bee-q/src/components/select/bq-select.tsx
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -274,7 +274,7 @@ export class BqSelect {
         {/* Label */}
         <label
           id={labelId}
-          class={{ 'bq-select--label': true, hidden: !this.hasLabel }}
+          class={{ 'bq-select__label': true, hidden: !this.hasLabel }}
           htmlFor={this.name || this.fallbackInputId}
           ref={(labelElem) => (this.labelElem = labelElem)}
           part="label"
@@ -298,7 +298,7 @@ export class BqSelect {
           {/* Input control group */}
           <div
             class={{
-              'bq-select--control': true,
+              'bq-select__control': true,
               [`validation-${this.validationStatus}`]: true,
               disabled: this.disabled,
             }}
@@ -307,7 +307,7 @@ export class BqSelect {
           >
             {/* Prefix */}
             <span
-              class={{ 'bq-select--control__prefix': true, hidden: !this.hasPrefix }}
+              class={{ 'bq-select__control--prefix': true, hidden: !this.hasPrefix }}
               ref={(spanElem) => (this.prefixElem = spanElem)}
               part="prefix"
             >
@@ -316,7 +316,7 @@ export class BqSelect {
             {/* HTML Input */}
             <input
               id={this.name || this.fallbackInputId}
-              class="bq-select--control__input"
+              class="bq-select__control--input"
               autoComplete="off"
               autoCapitalize="off"
               autoFocus={this.autofocus}
@@ -344,7 +344,7 @@ export class BqSelect {
               // The clear button will be visible as long as the input has a value
               // and the parent group is hovered or has focus-within
               <bq-button
-                class="bq-select--control__clear ms-[--bq-select--gap] hidden"
+                class="bq-select__control--clear ms-[--bq-select--gap] hidden"
                 appearance="text"
                 aria-label={this.clearButtonLabel}
                 size="small"
@@ -359,7 +359,7 @@ export class BqSelect {
             )}
             {/* Suffix */}
             <span
-              class={{ 'bq-select--control__suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}
+              class={{ 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}
               ref={(spanElem) => (this.suffixElem = spanElem)}
               part="suffix"
             >
@@ -374,7 +374,7 @@ export class BqSelect {
         </bq-dropdown>
         {/* Helper text */}
         <div
-          class={{ [`bq-select--helper-text validation-${this.validationStatus}`]: true, hidden: !this.hasHelperText }}
+          class={{ [`bq-select__helper-text validation-${this.validationStatus}`]: true, hidden: !this.hasHelperText }}
           ref={(divElem) => (this.helperTextElem = divElem)}
           part="helper-text"
         >
diff --git a/packages/bee-q/src/components/select/scss/bq-select.scss b/packages/bee-q/src/components/select/scss/bq-select.scss
index 0a8ce98d5..0b5f40b71 100644
--- a/packages/bee-q/src/components/select/scss/bq-select.scss
+++ b/packages/bee-q/src/components/select/scss/bq-select.scss
@@ -12,24 +12,24 @@
 /*                            Label and Helper text                           */
 /* -------------------------------------------------------------------------- */
 
-.bq-select--label {
+.bq-select__label {
   @apply mb-[--bq-select--label-margin-bottom] flex flex-grow items-center gap-[--var(--bq-select--gap-label)];
   @apply text-[length:--bq-select--label-text-size] text-[color:--bq-select--label-text-color];
 }
 
-.bq-select--helper-text {
+.bq-select__helper-text {
   @apply mt-[--bq-select--helper-margin-top] text-[length:--bq-select--helper-text-size] text-[color:--bq-select--helper-text-color];
 }
 
-.bq-select--helper-text.validation-error {
+.bq-select__helper-text.validation-error {
   @apply text-text-danger;
 }
 
-.bq-select--helper-text.validation-success {
+.bq-select__helper-text.validation-success {
   @apply text-text-success;
 }
 
-.bq-select--helper-text.validation-warning {
+.bq-select__helper-text.validation-warning {
   @apply text-text-warning;
 }
 
@@ -37,7 +37,7 @@
 /*                         Select input group control                         */
 /* -------------------------------------------------------------------------- */
 
-.bq-select--control {
+.bq-select__control {
   @apply flex w-full items-center transition-[border-color,box-shadow];
   // Border
   @apply rounded-[--bq-select--border-radius] border-[length:--bq-select--border-width] border-[color:--bq-select--border-color];
@@ -62,19 +62,19 @@
   // Enable clear button whenever the input group control is hovered or has focus
   &:not(.disabled):hover,
   &:not(.disabled):focus-within {
-    .bq-select--control__clear {
+    .bq-select__control--clear {
       @apply inline-block;
     }
   }
 }
 
-.bq-select--control.disabled {
+.bq-select__control.disabled {
   @apply cursor-not-allowed border-[color:--bq-stroke--tertiary-disabled] bg-ui-secondary-disabled;
 }
 
 /* ------------------------------- Validation ------------------------------- */
 
-.bq-select--control.validation-error {
+.bq-select__control.validation-error {
   @apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-stroke-danger-hover;
 
   &:not(.disabled):focus-within {
@@ -83,7 +83,7 @@
   }
 }
 
-.bq-select--control.validation-success {
+.bq-select__control.validation-success {
   @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-stroke-success-hover;
 
   &:not(.disabled):focus-within {
@@ -92,7 +92,7 @@
   }
 }
 
-.bq-select--control.validation-warning {
+.bq-select__control.validation-warning {
   @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-stroke-warning-hover;
 
   &:not(.disabled):focus-within {
@@ -105,7 +105,7 @@
 /*                              Native HTML Input                             */
 /* -------------------------------------------------------------------------- */
 
-.bq-select--control__input {
+.bq-select__control--input {
   @apply flex-auto cursor-[inherit] select-none appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];
   @apply m-0 min-h-[--bq-select--icon-size] min-w-[0] border-none p-0 focus:outline-none focus-visible:outline-none;
 
@@ -117,7 +117,7 @@
 /*                                Clear button                                */
 /* -------------------------------------------------------------------------- */
 
-.bq-select--control__clear::part(button) {
+.bq-select__control--clear::part(button) {
   // Since the clear button is inside the input group control,
   // we need to reset the focus ring styles
   --bq-ring-width: initial;
@@ -131,16 +131,16 @@
 /*                              Prefix and suffix                             */
 /* -------------------------------------------------------------------------- */
 
-.bq-select--control__prefix,
-.bq-select--control__suffix {
+.bq-select__control--prefix,
+.bq-select__control--suffix {
   @apply pointer-events-none flex items-center text-[color:var(--bq-select--text-color)];
 }
 
-.bq-select--control__prefix {
+.bq-select__control--prefix {
   @apply me-[--bq-select--gap];
 }
 
-.bq-select--control__suffix {
+.bq-select__control--suffix {
   @apply ms-[--bq-select--gap] transition-transform duration-300 ease-in-out;
 }
 

From cc711fb71683a1fdf66abd66ee712367196ef0c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Wed, 16 Aug 2023 14:12:40 +0300
Subject: [PATCH 19/23] docs(Select): add more Storybook examples

---
 .../select/_storybook/bq-select.stories.tsx   | 64 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 2 deletions(-)

diff --git a/packages/bee-q/src/components/select/_storybook/bq-select.stories.tsx b/packages/bee-q/src/components/select/_storybook/bq-select.stories.tsx
index 1d303ad2a..aea04c146 100644
--- a/packages/bee-q/src/components/select/_storybook/bq-select.stories.tsx
+++ b/packages/bee-q/src/components/select/_storybook/bq-select.stories.tsx
@@ -158,7 +158,7 @@ const Template = (args: Args) => {
     >
       ${!args.noLabel ? label : nothing}
       ${args.prefix ? html`<bq-icon name="user-circle" slot="prefix"></bq-icon>` : nothing}
-      ${args.suffix ? html`<bq-icon name="caret-circle-down" slot="suffix"></bq-icon>` : nothing}
+      ${args.suffix ? html`<bq-icon name="arrow-down" slot="suffix"></bq-icon>` : nothing}
       ${!args.noHelperText
         ? html`
             <span class="flex items-center gap-xs" slot="helper-text">
@@ -191,6 +191,27 @@ export const InitialValue: Story = {
   },
 };
 
+export const Disabled: Story = {
+  render: Template,
+  args: {
+    disabled: true,
+  },
+};
+
+export const Prefix: Story = {
+  render: Template,
+  args: {
+    prefix: true,
+  },
+};
+
+export const Suffix: Story = {
+  render: Template,
+  args: {
+    suffix: true,
+  },
+};
+
 export const Validation: Story = {
   render: (args) => html`
     <div class="grid grid-cols-1 gap-m sm:grid-cols-3">
@@ -204,6 +225,15 @@ export const Validation: Story = {
   `,
 };
 
+export const Optional: Story = {
+  name: 'Label with "Optional"',
+  render: Template,
+  args: {
+    optionalLabel: true,
+    prefix: true,
+  },
+};
+
 export const Tooltip: Story = {
   name: 'Label with "Info tooltip"',
   render: Template,
@@ -211,9 +241,39 @@ export const Tooltip: Story = {
     hasLabelTooltip: true,
     optionalLabel: true,
     prefix: true,
-    suffix: true,
   },
   parameters: {
     layout: 'centered',
   },
 };
+
+export const Placement: Story = {
+  name: 'Panel placement',
+  render: Template,
+  args: {
+    hasLabelTooltip: true,
+    placement: 'top',
+    prefix: true,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const NoLabel: Story = {
+  name: 'With no Label',
+  render: Template,
+  args: {
+    noLabel: true,
+    prefix: true,
+  },
+};
+
+export const NoHelperText: Story = {
+  name: 'With no Helper Text',
+  render: Template,
+  args: {
+    noHelperText: true,
+    prefix: true,
+  },
+};

From 7e4867883c6e66225ca67795aaed354c004b3202 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Wed, 16 Aug 2023 14:14:10 +0300
Subject: [PATCH 20/23] chore(deps): sync package-lock.json

---
 package-lock.json | 2314 ++++++++++++---------------------------------
 1 file changed, 628 insertions(+), 1686 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8777519a5..1bd3a6d10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -145,9 +145,9 @@
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz",
-      "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.0.tgz",
+      "integrity": "sha512-+RNNcQvw2V1bmnBTPAtOLfW/9mhH2vC67+rUSi5T8EtEWt6lEnGNY2GuhZ1/YwbgikT1TkhvidCDmN5Q5YCo/w==",
       "dev": true
     },
     "node_modules/@alloc/quick-lru": {
@@ -1634,9 +1634,9 @@
       "dev": true
     },
     "node_modules/@angular-devkit/core": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-16.1.6.tgz",
-      "integrity": "sha512-3OjtrPWvsqVkMBwqPeE65ccCIw56FooNpVVAJ0XwhVQv5mA81pmbCzU7JsR6U449ZT7O4cQblzZMQvWvx74HCg==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-16.2.0.tgz",
+      "integrity": "sha512-l1k6Rqm3YM16BEn3CWyQKrk9xfu+2ux7Bw3oS+h1TO4/RoxO2PgHj8LLRh/WNrYVarhaqO7QZ5ePBkXNMkzJ1g==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -1668,15 +1668,15 @@
       "peer": true
     },
     "node_modules/@angular-devkit/schematics": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-16.1.6.tgz",
-      "integrity": "sha512-KA8P78gaS76HMHGBOM8JHJXWLOxCIShYVB2Un/Cu6z3jVODvXq+ILZUc1Y0RsAce/vsl2wf8qpoh5Lku9KJHUQ==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-16.2.0.tgz",
+      "integrity": "sha512-QMDJXPE0+YQJ9Ap3MMzb0v7rx6ZbBEokmHgpdIjN3eILYmbAdsSGE8HTV8NjS9nKmcyE9OGzFCMb7PFrDTlTAw==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@angular-devkit/core": "16.1.6",
+        "@angular-devkit/core": "16.2.0",
         "jsonc-parser": "3.2.0",
-        "magic-string": "0.30.0",
+        "magic-string": "0.30.1",
         "ora": "5.4.1",
         "rxjs": "7.8.1"
       },
@@ -2040,17 +2040,89 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
-      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+      "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
       "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.22.5"
+        "@babel/highlight": "^7.22.10",
+        "chalk": "^2.4.2"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/code-frame/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/compat-data": {
       "version": "7.22.9",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
@@ -2061,21 +2133,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.9.tgz",
-      "integrity": "sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.10.tgz",
+      "integrity": "sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.22.5",
-        "@babel/generator": "^7.22.9",
-        "@babel/helper-compilation-targets": "^7.22.9",
+        "@babel/code-frame": "^7.22.10",
+        "@babel/generator": "^7.22.10",
+        "@babel/helper-compilation-targets": "^7.22.10",
         "@babel/helper-module-transforms": "^7.22.9",
-        "@babel/helpers": "^7.22.6",
-        "@babel/parser": "^7.22.7",
+        "@babel/helpers": "^7.22.10",
+        "@babel/parser": "^7.22.10",
         "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.8",
-        "@babel/types": "^7.22.5",
+        "@babel/traverse": "^7.22.10",
+        "@babel/types": "^7.22.10",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -2091,12 +2163,12 @@
       }
     },
     "node_modules/@babel/core/node_modules/@babel/generator": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz",
-      "integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
+      "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.5",
+        "@babel/types": "^7.22.10",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -2183,12 +2255,12 @@
       }
     },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.5.tgz",
-      "integrity": "sha512-m1EP3lVOPptR+2DwD125gziZNcmoNSHGmJROKoy87loWUQyJaVXDgpmruWqDARZSmtYQ+Dl25okU8+qhVzuykw==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.10.tgz",
+      "integrity": "sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.22.10"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2220,9 +2292,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.9.tgz",
-      "integrity": "sha512-Pwyi89uO4YrGKxL/eNJ8lfEH55DnRloGPOseaA8NFNL6jAUnn+KccaISiFazCj5IolPPDjGSdzQzXVzODVRqUQ==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
+      "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
@@ -2549,14 +2621,14 @@
       }
     },
     "node_modules/@babel/helper-wrap-function": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.9.tgz",
-      "integrity": "sha512-sZ+QzfauuUEfxSEjKFmi3qDSHgLsTPK/pEpoD/qonZKOtTPTLbf59oabPQ4rKekt9lFcj/hTZaOhWwFYrgjk+Q==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.10.tgz",
+      "integrity": "sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-function-name": "^7.22.5",
         "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.22.10"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2577,14 +2649,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.6.tgz",
-      "integrity": "sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.10.tgz",
+      "integrity": "sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.6",
-        "@babel/types": "^7.22.5"
+        "@babel/traverse": "^7.22.10",
+        "@babel/types": "^7.22.10"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2605,13 +2677,13 @@
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
-      "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
+      "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.5",
-        "chalk": "^2.0.0",
+        "chalk": "^2.4.2",
         "js-tokens": "^4.0.0"
       },
       "engines": {
@@ -2690,9 +2762,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
-      "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -2785,16 +2857,16 @@
       }
     },
     "node_modules/@babel/plugin-proposal-decorators": {
-      "version": "7.22.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.22.7.tgz",
-      "integrity": "sha512-omXqPF7Onq4Bb7wHxXjM3jSMSJvUUbvDvmmds7KI5n9Cq6Ln5I05I1W2nRlRof1rGdiUxJrxwe285WF96XlBXQ==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.22.10.tgz",
+      "integrity": "sha512-KxN6TqZzcFi4uD3UifqXElBTBNLAEH1l3vzMQj6JwJZbL2sZlThxSViOKCYY+4Ah4V4JhQ95IVB7s/Y6SJSlMQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.22.6",
+        "@babel/helper-create-class-features-plugin": "^7.22.10",
         "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-replace-supers": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.9",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/plugin-syntax-decorators": "^7.22.5"
+        "@babel/plugin-syntax-decorators": "^7.22.10"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -3069,9 +3141,9 @@
       }
     },
     "node_modules/@babel/plugin-syntax-decorators": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.22.5.tgz",
-      "integrity": "sha512-avpUOBS7IU6al8MmF1XpAyj9QYeLPuSDJI5D4pVMSMdL7xQokKqJPYQC67RCT0aCTashUXPiGwMJ0DEXXCEmMA==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.22.10.tgz",
+      "integrity": "sha512-z1KTVemBjnz+kSEilAsI4lbkPOl5TvJH7YDSY1CTIzvLWJ+KHXp+mRe8VPmfnyvqOPqar1V2gid2PleKzRUstQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5"
@@ -4236,13 +4308,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.9.tgz",
-      "integrity": "sha512-BnVR1CpKiuD0iobHPaM1iLvcwPYN2uVFAqoLVSpEDKWuOikoCv5HbKLxclhKYUXlWkX86DoZGtqI4XhbOsyrMg==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.10.tgz",
+      "integrity": "sha512-7++c8I/ymsDo4QQBAgbraXLzIM6jmfao11KgIBEYZRReWzNWH9NtNgJcyrZiXsOPh523FQm6LfpLyy/U5fn46A==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-create-class-features-plugin": "^7.22.9",
+        "@babel/helper-create-class-features-plugin": "^7.22.10",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/plugin-syntax-typescript": "^7.22.5"
       },
@@ -4668,19 +4740,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.22.8",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.8.tgz",
-      "integrity": "sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz",
+      "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/generator": "^7.22.7",
+        "@babel/code-frame": "^7.22.10",
+        "@babel/generator": "^7.22.10",
         "@babel/helper-environment-visitor": "^7.22.5",
         "@babel/helper-function-name": "^7.22.5",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.22.7",
-        "@babel/types": "^7.22.5",
+        "@babel/parser": "^7.22.10",
+        "@babel/types": "^7.22.10",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -4689,12 +4761,12 @@
       }
     },
     "node_modules/@babel/traverse/node_modules/@babel/generator": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz",
-      "integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
+      "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.5",
+        "@babel/types": "^7.22.10",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -4873,13 +4945,13 @@
       }
     },
     "node_modules/@commitlint/is-ignored": {
-      "version": "17.6.7",
-      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-17.6.7.tgz",
-      "integrity": "sha512-vqyNRqtbq72P2JadaoWiuoLtXIs9SaAWDqdtef6G2zsoXqKFc7vqj1f+thzVgosXG3X/5K9jNp+iYijmvOfc/g==",
+      "version": "17.7.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-17.7.0.tgz",
+      "integrity": "sha512-043rA7m45tyEfW7Zv2vZHF++176MLHH9h70fnPoYlB1slKBeKl8BwNIlnPg4xBdRBVNPaCqvXxWswx2GR4c9Hw==",
       "dev": true,
       "dependencies": {
         "@commitlint/types": "^17.4.4",
-        "semver": "7.5.2"
+        "semver": "7.5.4"
       },
       "engines": {
         "node": ">=v14"
@@ -4898,9 +4970,9 @@
       }
     },
     "node_modules/@commitlint/is-ignored/node_modules/semver": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
-      "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4919,14 +4991,14 @@
       "dev": true
     },
     "node_modules/@commitlint/lint": {
-      "version": "17.6.7",
-      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-17.6.7.tgz",
-      "integrity": "sha512-TW+AozfuOFMrHn+jdwtz0IWu8REKFp0eryOvoBp2r8IXNc4KihKB1spAiUB6SFyHD6hVVeolz12aHnJ3Mb+xVQ==",
+      "version": "17.7.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-17.7.0.tgz",
+      "integrity": "sha512-TCQihm7/uszA5z1Ux1vw+Nf3yHTgicus/+9HiUQk+kRSQawByxZNESeQoX9ujfVd3r4Sa+3fn0JQAguG4xvvbA==",
       "dev": true,
       "dependencies": {
-        "@commitlint/is-ignored": "^17.6.7",
-        "@commitlint/parse": "^17.6.7",
-        "@commitlint/rules": "^17.6.7",
+        "@commitlint/is-ignored": "^17.7.0",
+        "@commitlint/parse": "^17.7.0",
+        "@commitlint/rules": "^17.7.0",
         "@commitlint/types": "^17.4.4"
       },
       "engines": {
@@ -4934,16 +5006,16 @@
       }
     },
     "node_modules/@commitlint/load": {
-      "version": "17.6.7",
-      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-17.6.7.tgz",
-      "integrity": "sha512-QZ2rJTbX55BQdYrCm/p6+hh/pFBgC9nTJxfsrK6xRPe2thiQzHN0AQDBqBwAirn6gIkHrjIbCbtAE6kiDYLjrw==",
+      "version": "17.7.1",
+      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-17.7.1.tgz",
+      "integrity": "sha512-S/QSOjE1ztdogYj61p6n3UbkUvweR17FQ0zDbNtoTLc+Hz7vvfS7ehoTMQ27hPSjVBpp7SzEcOQu081RLjKHJQ==",
       "dev": true,
       "dependencies": {
         "@commitlint/config-validator": "^17.6.7",
         "@commitlint/execute-rule": "^17.4.0",
         "@commitlint/resolve-extends": "^17.6.7",
         "@commitlint/types": "^17.4.4",
-        "@types/node": "*",
+        "@types/node": "20.4.7",
         "chalk": "^4.1.0",
         "cosmiconfig": "^8.0.0",
         "cosmiconfig-typescript-loader": "^4.0.0",
@@ -4958,6 +5030,12 @@
         "node": ">=v14"
       }
     },
+    "node_modules/@commitlint/load/node_modules/@types/node": {
+      "version": "20.4.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.7.tgz",
+      "integrity": "sha512-bUBrPjEry2QUTsnuEjzjbS7voGWCc30W0qzgMf90GPeDGFRakvrz47ju+oqDAKCXLUCe39u57/ORMl/O/04/9g==",
+      "dev": true
+    },
     "node_modules/@commitlint/message": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-17.4.2.tgz",
@@ -4968,14 +5046,14 @@
       }
     },
     "node_modules/@commitlint/parse": {
-      "version": "17.6.7",
-      "resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-17.6.7.tgz",
-      "integrity": "sha512-ibO03BgEns+JJpohpBZYD49mCdSNMg6fTv7vA5yqzEFWkBQk5NWhEBw2yG+Z1UClStIRkMkAYyI2HzoQG9tCQQ==",
+      "version": "17.7.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-17.7.0.tgz",
+      "integrity": "sha512-dIvFNUMCUHqq5Abv80mIEjLVfw8QNuA4DS7OWip4pcK/3h5wggmjVnlwGCDvDChkw2TjK1K6O+tAEV78oxjxag==",
       "dev": true,
       "dependencies": {
         "@commitlint/types": "^17.4.4",
-        "conventional-changelog-angular": "^5.0.11",
-        "conventional-commits-parser": "^3.2.2"
+        "conventional-changelog-angular": "^6.0.0",
+        "conventional-commits-parser": "^4.0.0"
       },
       "engines": {
         "node": ">=v14"
@@ -5015,9 +5093,9 @@
       }
     },
     "node_modules/@commitlint/rules": {
-      "version": "17.6.7",
-      "resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-17.6.7.tgz",
-      "integrity": "sha512-x/SDwDTN3w3Gr5xkhrIORu96rlKCc8ZLYEMXRqi9+MB33st2mKcGvKa5uJuigHlbl3xm75bAAubATrodVrjguQ==",
+      "version": "17.7.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-17.7.0.tgz",
+      "integrity": "sha512-J3qTh0+ilUE5folSaoK91ByOb8XeQjiGcdIdiB/8UT1/Rd1itKo0ju/eQVGyFzgTMYt8HrDJnGTmNWwcMR1rmA==",
       "dev": true,
       "dependencies": {
         "@commitlint/ensure": "^17.6.7",
@@ -5219,9 +5297,9 @@
       }
     },
     "node_modules/@csstools/media-query-list-parser": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.3.tgz",
-      "integrity": "sha512-ATul1u+pic4aVpstgueqxEv4MsObEbszAxfTXpx9LHaeD3LAh+wFqdCteyegWmjk0k5rkSCAvIOaJe9U3DD09w==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz",
+      "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==",
       "dev": true,
       "funding": [
         {
@@ -5555,9 +5633,9 @@
       }
     },
     "node_modules/@csstools/postcss-media-minmax": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.0.6.tgz",
-      "integrity": "sha512-BmwKkqEzzQz6D+5ctoacsiGrq4kVgd1PMEPwkwdR0qFaL2C2nguGsWG87xEw+HIts/2yxhIPTm7Jp3DQq+wn3Q==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.0.7.tgz",
+      "integrity": "sha512-5LGLdu8cJgRPmvkjUNqOPKIKeHbyQmoGKooB5Rh0mp5mLaNI9bl+IjFZ2keY0cztZYsriJsGf6Lu8R5XetuwoQ==",
       "dev": true,
       "funding": [
         {
@@ -5573,7 +5651,7 @@
         "@csstools/css-calc": "^1.1.3",
         "@csstools/css-parser-algorithms": "^2.3.1",
         "@csstools/css-tokenizer": "^2.2.0",
-        "@csstools/media-query-list-parser": "^2.1.3"
+        "@csstools/media-query-list-parser": "^2.1.4"
       },
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -5583,9 +5661,9 @@
       }
     },
     "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-2.0.1.tgz",
-      "integrity": "sha512-UvMYxXT3R011whbxzRwLx7d7eNGyVsnZo7waAmf10ZGnT34XidY+rsdFnk6OdFwuG6FYqw3/tptQEAZOmUgvLw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-2.0.2.tgz",
+      "integrity": "sha512-kQJR6NvTRidsaRjCdHGjra2+fLoFiDQOm5B2aZrhmXqng/hweXjruboKzB326rxQO2L0m0T+gCKbZgyuncyhLg==",
       "dev": true,
       "funding": [
         {
@@ -5600,7 +5678,7 @@
       "dependencies": {
         "@csstools/css-parser-algorithms": "^2.3.1",
         "@csstools/css-tokenizer": "^2.2.0",
-        "@csstools/media-query-list-parser": "^2.1.3"
+        "@csstools/media-query-list-parser": "^2.1.4"
       },
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -6306,9 +6384,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz",
-      "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
+      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -6361,9 +6439,9 @@
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "version": "13.21.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
+      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -6444,7 +6522,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
       "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
-      "dev": true,
       "dependencies": {
         "@floating-ui/core": "^1.4.1",
         "@floating-ui/utils": "^0.1.1"
@@ -7657,9 +7734,9 @@
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
-      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
       "dev": true,
       "engines": {
         "node": ">=6.0.0"
@@ -7705,21 +7782,15 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
-      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
+      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/resolve-uri": "3.1.0",
-        "@jridgewell/sourcemap-codec": "1.4.14"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-      "dev": true
-    },
     "node_modules/@jscutlery/semver": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jscutlery/semver/-/semver-3.1.0.tgz",
@@ -7786,9 +7857,9 @@
       "peer": true
     },
     "node_modules/@lit/reactive-element": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.2.tgz",
-      "integrity": "sha512-rDfl+QnCYjuIGf5xI2sVJWdYIi56CTCwWa+nidKYX6oIuBYwUbT/vX4qbUDlHiZKJ/3FRNQ/tWJui44p6/stSA==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -8115,54 +8186,14 @@
       }
     },
     "node_modules/@nrwl/devkit": {
-      "version": "15.9.4",
-      "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-15.9.4.tgz",
-      "integrity": "sha512-mUX1kXTuPMdTzFxIzH+MsSNvdppOmstPDOEtiGFZJTuJ625ki0HhNJILO3N2mJ7MeMrLqIlAiNdvelQaObxYsQ==",
-      "dev": true,
-      "dependencies": {
-        "ejs": "^3.1.7",
-        "ignore": "^5.0.4",
-        "semver": "7.3.4",
-        "tmp": "~0.2.1",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "nx": ">= 14.1 <= 16"
-      }
-    },
-    "node_modules/@nrwl/devkit/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@nrwl/devkit/node_modules/semver": {
-      "version": "7.3.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
-      "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+      "version": "16.6.0",
+      "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-16.6.0.tgz",
+      "integrity": "sha512-xZEN6wfA1uJwv+FVRQFOHsCcpvGvIYGx2zutbzungDodWkfzlJ3tzIGqYjIpPCBVT83erM6Gscnka2W46AuKfA==",
       "dev": true,
       "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
+        "@nx/devkit": "16.6.0"
       }
     },
-    "node_modules/@nrwl/devkit/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/@nrwl/eslint-plugin-nx": {
       "version": "16.6.0",
       "resolved": "https://registry.npmjs.org/@nrwl/eslint-plugin-nx/-/eslint-plugin-nx-16.6.0.tgz",
@@ -8442,42 +8473,6 @@
         "@nx/js": "16.3.0"
       }
     },
-    "node_modules/@nx/cypress/node_modules/@nrwl/linter": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nrwl/linter/-/linter-16.3.0.tgz",
-      "integrity": "sha512-n86MG2HaEiIs6ya9plokB3R3HR/7U1U00o6AhaJyAZoDn6zky5P6L7525HWPGbbeho7omjoz52S6ZROBYCHg7g==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@nx/linter": "16.3.0"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nrwl/tao": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-16.3.0.tgz",
-      "integrity": "sha512-STZSZ6AWNnOzaOA85bbXJ3QhSN7p4QwWEJ8DvQs2HUB4s/+JQ99kuePXbbpi3LdrC9qhQB4hzote8ahIsl/UAw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "nx": "16.3.0"
-      },
-      "bin": {
-        "tao": "index.js"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nrwl/workspace": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nrwl/workspace/-/workspace-16.3.0.tgz",
-      "integrity": "sha512-kbhTKMpzWBpVG96h3WWfYoJx8ROsE3XQ/L2HfHprGj1hWcBZmn4qlVktgtkenCIBlcqtHSvZoRxnWk8GDZdZJw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@nx/workspace": "16.3.0"
-      }
-    },
     "node_modules/@nx/cypress/node_modules/@nx/devkit": {
       "version": "16.3.0",
       "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-16.3.0.tgz",
@@ -8537,238 +8532,6 @@
         }
       }
     },
-    "node_modules/@nx/cypress/node_modules/@nx/linter": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/linter/-/linter-16.3.0.tgz",
-      "integrity": "sha512-4Rz6JYxUwiZXX0HGDEjMjCssPj+iSKJyDjVvxSt1cU/JyPd2uJmSMbdkj9JqwJGfCSGkr2KvYG/SewnYDkqmpg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@nrwl/linter": "16.3.0",
-        "@nx/devkit": "16.3.0",
-        "@nx/js": "16.3.0",
-        "@phenomnomnominal/tsquery": "~5.0.1",
-        "tmp": "~0.2.1",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "eslint": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "eslint": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-darwin-arm64": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-16.3.0.tgz",
-      "integrity": "sha512-xUHQqFPsqh2fRGrjAAeCVkf4K2ChZIxHbJVpxoQqQrDo8gxZ/FD/4Xn1v4K2fp9fbeE+IoV/AxnQ/PSl+Q/yhg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-darwin-x64": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-16.3.0.tgz",
-      "integrity": "sha512-lgBDe+gVa2plTmcf0iNynBVyvK/W1ttvBPzNo8mM28XaklF7awXjK6XkZOYZFpW7Aea9mfBp4Gx1jZVaqohyNg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-freebsd-x64": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-16.3.0.tgz",
-      "integrity": "sha512-HwDiWmXE8obCxtpBrJavIignutd40DyPLFp39lwN/foguedvGSmSx4tlDpn3MyulfE94AueDxtKDhx4e0AR6eQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-arm-gnueabihf": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-16.3.0.tgz",
-      "integrity": "sha512-bWt7hzngOzJfPKqIjzBFBi9EBQXMGiL5IOnTPAOzB5k+DaJCal/ocokTU852YIjlupEgJacVVR9EFEgHOzboBA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-arm64-gnu": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-16.3.0.tgz",
-      "integrity": "sha512-QmcXF2NjbAkc0yrN/EdRIFMiGM45dVh3y0H0TTShoKFF43UFBBlKvvARc8ylEZUlkviJsKkIw6vo2bzCCvY0Zg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-arm64-musl": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-16.3.0.tgz",
-      "integrity": "sha512-SXHvKjYva5JoXUhR+131fUVwTG/wNP1guJL82qPua8itcZsWuUY8P//pbn/fY+KtyQ2/luuSBu3qLHuQBlZ4QA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-x64-gnu": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-16.3.0.tgz",
-      "integrity": "sha512-CIjKaDkfnZ2ftgFNguURsj8fRpKgDa0E6o/rvSUK8RPHg6wjrFE0KPN/27vPcsfkV+1tCNrZ5Maq/oqvVNSTtg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-x64-musl": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-16.3.0.tgz",
-      "integrity": "sha512-vpqwI9pm8qk6NAi7teXsCRKdu6qa39/i1kySNc4q7nAmJT5iFmCE92m+8I40S91YYxUS4TkRbeKTSVsmMdI05Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-win32-arm64-msvc": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-16.3.0.tgz",
-      "integrity": "sha512-lvFuBsbUQVsjISmsJGcmeri0li/6BePDo6BCvm9XHfT3J5OBNdABC1YLbqilpxjrpajH+vD49Eq8nHBfIyDNPQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/nx-win32-x64-msvc": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-16.3.0.tgz",
-      "integrity": "sha512-TVk4pvoJMyiA57WuSEcNPZo+SHRsYml8PwDV/5syuen8i/aHbsErk7zwsa1E5sNJChrq5olYs11+IwRbkAvwEA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/@nx/workspace": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@nx/workspace/-/workspace-16.3.0.tgz",
-      "integrity": "sha512-1w8XvK9nRj9M1FT4AKvqeOAU+eIJl9FaP2+Jg93dXBRUpAltPsSLJbvNC/rNube9mpQHTHOTp7oXwm0S0ODaUA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@nrwl/workspace": "16.3.0",
-        "@nx/devkit": "16.3.0",
-        "@parcel/watcher": "2.0.4",
-        "chalk": "^4.1.0",
-        "chokidar": "^3.5.1",
-        "cli-cursor": "3.1.0",
-        "cli-spinners": "2.6.1",
-        "dotenv": "~10.0.0",
-        "figures": "3.2.0",
-        "flat": "^5.0.2",
-        "ignore": "^5.0.4",
-        "minimatch": "3.0.5",
-        "npm-run-path": "^4.0.1",
-        "nx": "16.3.0",
-        "open": "^8.4.0",
-        "rxjs": "^7.8.0",
-        "tmp": "~0.2.1",
-        "tslib": "^2.3.0",
-        "yargs": "^17.6.2",
-        "yargs-parser": "21.1.1"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@nx/cypress/node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8781,61 +8544,6 @@
         "concat-map": "0.0.1"
       }
     },
-    "node_modules/@nx/cypress/node_modules/enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-colors": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/glob": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
-      "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@nx/cypress/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -8864,78 +8572,6 @@
         "node": "*"
       }
     },
-    "node_modules/@nx/cypress/node_modules/nx": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/nx/-/nx-16.3.0.tgz",
-      "integrity": "sha512-D1gzsc7Cq+PweUiIsUjKyc0gldtDl95BF61kzXnGXIiAi/R19uaEBN3A24uD6lY/ngnWEBSV/u/T6Jb7PUZ2nw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@nrwl/tao": "16.3.0",
-        "@parcel/watcher": "2.0.4",
-        "@yarnpkg/lockfile": "^1.1.0",
-        "@yarnpkg/parsers": "^3.0.0-rc.18",
-        "@zkochan/js-yaml": "0.0.6",
-        "axios": "^1.0.0",
-        "chalk": "^4.1.0",
-        "cli-cursor": "3.1.0",
-        "cli-spinners": "2.6.1",
-        "cliui": "^7.0.2",
-        "dotenv": "~10.0.0",
-        "enquirer": "~2.3.6",
-        "fast-glob": "3.2.7",
-        "figures": "3.2.0",
-        "flat": "^5.0.2",
-        "fs-extra": "^11.1.0",
-        "glob": "7.1.4",
-        "ignore": "^5.0.4",
-        "js-yaml": "4.1.0",
-        "jsonc-parser": "3.2.0",
-        "lines-and-columns": "~2.0.3",
-        "minimatch": "3.0.5",
-        "npm-run-path": "^4.0.1",
-        "open": "^8.4.0",
-        "semver": "7.3.4",
-        "string-width": "^4.2.3",
-        "strong-log-transformer": "^2.1.0",
-        "tar-stream": "~2.2.0",
-        "tmp": "~0.2.1",
-        "tsconfig-paths": "^4.1.2",
-        "tslib": "^2.3.0",
-        "v8-compile-cache": "2.3.0",
-        "yargs": "^17.6.2",
-        "yargs-parser": "21.1.1"
-      },
-      "bin": {
-        "nx": "bin/nx.js"
-      },
-      "optionalDependencies": {
-        "@nx/nx-darwin-arm64": "16.3.0",
-        "@nx/nx-darwin-x64": "16.3.0",
-        "@nx/nx-freebsd-x64": "16.3.0",
-        "@nx/nx-linux-arm-gnueabihf": "16.3.0",
-        "@nx/nx-linux-arm64-gnu": "16.3.0",
-        "@nx/nx-linux-arm64-musl": "16.3.0",
-        "@nx/nx-linux-x64-gnu": "16.3.0",
-        "@nx/nx-linux-x64-musl": "16.3.0",
-        "@nx/nx-win32-arm64-msvc": "16.3.0",
-        "@nx/nx-win32-x64-msvc": "16.3.0"
-      },
-      "peerDependencies": {
-        "@swc-node/register": "^1.4.2",
-        "@swc/core": "^1.2.173"
-      },
-      "peerDependenciesMeta": {
-        "@swc-node/register": {
-          "optional": true
-        },
-        "@swc/core": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@nx/cypress/node_modules/semver": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
@@ -8976,24 +8612,6 @@
         "source-map": "^0.6.0"
       }
     },
-    "node_modules/@nx/cypress/node_modules/tar-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "bl": "^4.0.3",
-        "end-of-stream": "^1.4.1",
-        "fs-constants": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.1.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@nx/cypress/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -9002,42 +8620,6 @@
       "optional": true,
       "peer": true
     },
-    "node_modules/@nx/cypress/node_modules/yargs": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
-      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "cliui": "^8.0.1",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^21.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@nx/cypress/node_modules/yargs/node_modules/cliui": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
-      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@nx/devkit": {
       "version": "16.6.0",
       "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-16.6.0.tgz",
@@ -9055,15 +8637,6 @@
         "nx": ">= 15 <= 17"
       }
     },
-    "node_modules/@nx/devkit/node_modules/@nrwl/devkit": {
-      "version": "16.6.0",
-      "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-16.6.0.tgz",
-      "integrity": "sha512-xZEN6wfA1uJwv+FVRQFOHsCcpvGvIYGx2zutbzungDodWkfzlJ3tzIGqYjIpPCBVT83erM6Gscnka2W46AuKfA==",
-      "dev": true,
-      "dependencies": {
-        "@nx/devkit": "16.6.0"
-      }
-    },
     "node_modules/@nx/eslint-plugin": {
       "version": "16.6.0",
       "resolved": "https://registry.npmjs.org/@nx/eslint-plugin/-/eslint-plugin-16.6.0.tgz",
@@ -9201,16 +8774,16 @@
       }
     },
     "node_modules/@nx/js/node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.22.9.tgz",
-      "integrity": "sha512-9KjBH61AGJetCPYp/IEyLEp47SyybZb0nDRpBvmtEkm+rUIwxdlKpyNHI1TmsGkeuLclJdleQHRZ8XLBnnh8CQ==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.22.10.tgz",
+      "integrity": "sha512-RchI7HePu1eu0CYNKHHHQdfenZcM4nz8rew5B1VWqeRKdcwW5aQ5HeG9eTUbWiAS1UrmHVLmoxTWHt3iLD/NhA==",
       "dev": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.22.5",
         "@babel/helper-plugin-utils": "^7.22.5",
-        "babel-plugin-polyfill-corejs2": "^0.4.4",
-        "babel-plugin-polyfill-corejs3": "^0.8.2",
-        "babel-plugin-polyfill-regenerator": "^0.5.1",
+        "babel-plugin-polyfill-corejs2": "^0.4.5",
+        "babel-plugin-polyfill-corejs3": "^0.8.3",
+        "babel-plugin-polyfill-regenerator": "^0.5.2",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -9230,13 +8803,13 @@
       }
     },
     "node_modules/@nx/js/node_modules/@babel/preset-env": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.9.tgz",
-      "integrity": "sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.10.tgz",
+      "integrity": "sha512-riHpLb1drNkpLlocmSyEg4oYJIQFeXAK/d7rI6mbD0XsvoTOOweXDmQPG/ErxsEhWk3rl3Q/3F6RFQlVFS8m0A==",
       "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.22.9",
-        "@babel/helper-compilation-targets": "^7.22.9",
+        "@babel/helper-compilation-targets": "^7.22.10",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/helper-validator-option": "^7.22.5",
         "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.22.5",
@@ -9261,15 +8834,15 @@
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
         "@babel/plugin-transform-arrow-functions": "^7.22.5",
-        "@babel/plugin-transform-async-generator-functions": "^7.22.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.22.10",
         "@babel/plugin-transform-async-to-generator": "^7.22.5",
         "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
-        "@babel/plugin-transform-block-scoping": "^7.22.5",
+        "@babel/plugin-transform-block-scoping": "^7.22.10",
         "@babel/plugin-transform-class-properties": "^7.22.5",
         "@babel/plugin-transform-class-static-block": "^7.22.5",
         "@babel/plugin-transform-classes": "^7.22.6",
         "@babel/plugin-transform-computed-properties": "^7.22.5",
-        "@babel/plugin-transform-destructuring": "^7.22.5",
+        "@babel/plugin-transform-destructuring": "^7.22.10",
         "@babel/plugin-transform-dotall-regex": "^7.22.5",
         "@babel/plugin-transform-duplicate-keys": "^7.22.5",
         "@babel/plugin-transform-dynamic-import": "^7.22.5",
@@ -9292,27 +8865,27 @@
         "@babel/plugin-transform-object-rest-spread": "^7.22.5",
         "@babel/plugin-transform-object-super": "^7.22.5",
         "@babel/plugin-transform-optional-catch-binding": "^7.22.5",
-        "@babel/plugin-transform-optional-chaining": "^7.22.6",
+        "@babel/plugin-transform-optional-chaining": "^7.22.10",
         "@babel/plugin-transform-parameters": "^7.22.5",
         "@babel/plugin-transform-private-methods": "^7.22.5",
         "@babel/plugin-transform-private-property-in-object": "^7.22.5",
         "@babel/plugin-transform-property-literals": "^7.22.5",
-        "@babel/plugin-transform-regenerator": "^7.22.5",
+        "@babel/plugin-transform-regenerator": "^7.22.10",
         "@babel/plugin-transform-reserved-words": "^7.22.5",
         "@babel/plugin-transform-shorthand-properties": "^7.22.5",
         "@babel/plugin-transform-spread": "^7.22.5",
         "@babel/plugin-transform-sticky-regex": "^7.22.5",
         "@babel/plugin-transform-template-literals": "^7.22.5",
         "@babel/plugin-transform-typeof-symbol": "^7.22.5",
-        "@babel/plugin-transform-unicode-escapes": "^7.22.5",
+        "@babel/plugin-transform-unicode-escapes": "^7.22.10",
         "@babel/plugin-transform-unicode-property-regex": "^7.22.5",
         "@babel/plugin-transform-unicode-regex": "^7.22.5",
         "@babel/plugin-transform-unicode-sets-regex": "^7.22.5",
-        "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.22.5",
-        "babel-plugin-polyfill-corejs2": "^0.4.4",
-        "babel-plugin-polyfill-corejs3": "^0.8.2",
-        "babel-plugin-polyfill-regenerator": "^0.5.1",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "@babel/types": "^7.22.10",
+        "babel-plugin-polyfill-corejs2": "^0.4.5",
+        "babel-plugin-polyfill-corejs3": "^0.8.3",
+        "babel-plugin-polyfill-regenerator": "^0.5.2",
         "core-js-compat": "^3.31.0",
         "semver": "^6.3.1"
       },
@@ -9332,13 +8905,27 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/@nx/js/node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      }
+    },
     "node_modules/@nx/js/node_modules/@babel/runtime": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
+      "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
       "dev": true,
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -9414,6 +9001,12 @@
         "node": "*"
       }
     },
+    "node_modules/@nx/js/node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
+      "dev": true
+    },
     "node_modules/@nx/js/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -10382,6 +9975,10 @@
         "typescript": "^3 || ^4 || ^5"
       }
     },
+    "node_modules/@phosphor-icons/core": {
+      "resolved": "packages/bee-q-icons/temp/core-main",
+      "link": true
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -11206,9 +10803,9 @@
       }
     },
     "node_modules/@rollup/plugin-url/node_modules/@rollup/pluginutils": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
-      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.3.tgz",
+      "integrity": "sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==",
       "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -11257,14 +10854,14 @@
       "dev": true
     },
     "node_modules/@schematics/angular": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-16.1.6.tgz",
-      "integrity": "sha512-BxghkeLfnMgV0D4DZDcbfPpox/Orw1ismSVGoQMIV/Daj2pqfSK+n97NAu0r0EsQyR5agPxOX9khVft+otODhg==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-16.2.0.tgz",
+      "integrity": "sha512-Ib0/ZCkjWt7a5p3209JVwEWwf41v03K3ylvlxLIEo1ZGijAZAlrBj4GrA5YQ+TmPm2hRyt+owss7x91/x+i0Gw==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@angular-devkit/core": "16.1.6",
-        "@angular-devkit/schematics": "16.1.6",
+        "@angular-devkit/core": "16.2.0",
+        "@angular-devkit/schematics": "16.2.0",
         "jsonc-parser": "3.2.0"
       },
       "engines": {
@@ -11397,36 +10994,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-a11y/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addon-a11y/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-actions": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.2.3.tgz",
@@ -11467,36 +11034,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-actions/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addon-actions/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-actions/node_modules/uuid": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
@@ -11540,36 +11077,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-backgrounds/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addon-backgrounds/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-controls": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.2.3.tgz",
@@ -11606,36 +11113,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-controls/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addon-controls/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-docs": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.2.3.tgz",
@@ -11671,26 +11148,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/addon-docs/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-essentials": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.2.3.tgz",
@@ -11736,16 +11193,6 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/addon-highlight/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/addon-links": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.2.3.tgz",
@@ -11780,16 +11227,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-links/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/addon-measure": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.2.3.tgz",
@@ -11822,16 +11259,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-measure/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/addon-outline": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.2.3.tgz",
@@ -11864,16 +11291,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-outline/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/addon-toolbars": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.2.3.tgz",
@@ -11903,26 +11320,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-toolbars/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addon-viewport": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.2.3.tgz",
@@ -11956,159 +11353,16 @@
         }
       }
     },
-    "node_modules/@storybook/addon-viewport/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addon-viewport/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/addons": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.2.0.tgz",
-      "integrity": "sha512-T9sH/CJASBUR8RnirwyMU0zBqT4fvdq0sSmgZlbonuU5eKhOfguwZqd3Sx6xMoWeJuHnyk+wcWWTlkmJremV+w==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/manager-api": "7.2.0",
-        "@storybook/preview-api": "7.2.0",
-        "@storybook/types": "7.2.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@storybook/addons/node_modules/@storybook/channels": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.2.0.tgz",
-      "integrity": "sha512-2W0tnfmyPQc3TES1NgFOzrmnzVkxqEYGqWYOYQkwgumC+FIDIktW02eIP8JlxuStEx4oIMuB8YF3euRNZqHSgA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/channels": "7.2.0",
-        "@storybook/client-logger": "7.2.0",
-        "@storybook/core-events": "7.2.0",
-        "@storybook/global": "^5.0.0",
-        "qs": "^6.10.0",
-        "telejson": "^7.0.3",
-        "tiny-invariant": "^1.3.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addons/node_modules/@storybook/client-logger": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.2.0.tgz",
-      "integrity": "sha512-e31snLKvP2h/BBl+DXR/pM/CI8uvDU89BujHniK3ttJNynjOpJmHp0SgxOKnlRXpOaau9jKKoLVMegi/BgIYpA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/global": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addons/node_modules/@storybook/manager-api": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.2.0.tgz",
-      "integrity": "sha512-sKaG+VBS8wXGaT+vEihK/2VXJwShhFVOsvOd81vfaM97btik0IhCEHtV7VCNW2lDidIGw7u2DX7QO0tav/Qf1w==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/channels": "7.2.0",
-        "@storybook/client-logger": "7.2.0",
-        "@storybook/core-events": "7.2.0",
-        "@storybook/csf": "^0.1.0",
-        "@storybook/global": "^5.0.0",
-        "@storybook/router": "7.2.0",
-        "@storybook/theming": "7.2.0",
-        "@storybook/types": "7.2.0",
-        "dequal": "^2.0.2",
-        "lodash": "^4.17.21",
-        "memoizerific": "^1.11.3",
-        "semver": "^7.3.7",
-        "store2": "^2.14.2",
-        "telejson": "^7.0.3",
-        "ts-dedent": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@storybook/addons/node_modules/@storybook/preview-api": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.2.0.tgz",
-      "integrity": "sha512-mZ125UbIO27OrQe8/PjLL2IYAV/+sFjyqmo+HO1Lae3KocCVQQTfGWzuyxuXqntC85PaMr9L6ZkxeecET+Wdqw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/channels": "7.2.0",
-        "@storybook/client-logger": "7.2.0",
-        "@storybook/core-events": "7.2.0",
-        "@storybook/csf": "^0.1.0",
-        "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.2.0",
-        "@types/qs": "^6.9.5",
-        "dequal": "^2.0.2",
-        "lodash": "^4.17.21",
-        "memoizerific": "^1.11.3",
-        "qs": "^6.10.0",
-        "synchronous-promise": "^2.0.15",
-        "ts-dedent": "^2.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addons/node_modules/@storybook/router": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.2.0.tgz",
-      "integrity": "sha512-8QQ3qzNKy75QSVY4JhtYJI/EBLAepTkMpOcbdvgufFWOwTm/s9N5VlGpVctHYNf+vvNpX+YndVoMGAU7bdn8EQ==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.2.3.tgz",
+      "integrity": "sha512-l0RUwiXcA4NZawXB7+7SpPEUQ1ov4xjDLgqnURsC4IrzxpqhhzYyiXbNTe6vS3//xUhzd9B82f3UBSCsz3k+7Q==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@storybook/client-logger": "7.2.0",
-        "memoizerific": "^1.11.3",
-        "qs": "^6.10.0"
+        "@storybook/manager-api": "7.2.3",
+        "@storybook/preview-api": "7.2.3",
+        "@storybook/types": "7.2.3"
       },
       "funding": {
         "type": "opencollective",
@@ -12119,32 +11373,15 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/addons/node_modules/@storybook/types": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.2.0.tgz",
-      "integrity": "sha512-jwoA/TIp+U8Vz868aQT+XfoAw6qFrtn2HbZlTfwNWZsUhPFlMsGrwIVEpWqBWIoe6WITU/lNw3BuRmxul+wvAQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/channels": "7.2.0",
-        "@types/babel__core": "^7.0.0",
-        "@types/express": "^4.7.0",
-        "file-system-cache": "2.3.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/api": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.2.0.tgz",
-      "integrity": "sha512-VRH1JEtHpb1hObxQJHmfntFgbP4+YoxkalgLQC/yA25xdFnzcDREYu4MtG/oGZ8+bSAvJXUfCM5EbKxe48X8gw==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.2.3.tgz",
+      "integrity": "sha512-yoCP4zfvEBOpfHuhU65FVd4cqNvnzM3PmHXmTD4l/WaDvlkL1MrUq2Wtam0Uq3MPm33Mw54DHnfc4lNRg014jQ==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@storybook/client-logger": "7.2.0",
-        "@storybook/manager-api": "7.2.0"
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/manager-api": "7.2.3"
       },
       "funding": {
         "type": "opencollective",
@@ -12163,109 +11400,6 @@
         }
       }
     },
-    "node_modules/@storybook/api/node_modules/@storybook/channels": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.2.0.tgz",
-      "integrity": "sha512-2W0tnfmyPQc3TES1NgFOzrmnzVkxqEYGqWYOYQkwgumC+FIDIktW02eIP8JlxuStEx4oIMuB8YF3euRNZqHSgA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/channels": "7.2.0",
-        "@storybook/client-logger": "7.2.0",
-        "@storybook/core-events": "7.2.0",
-        "@storybook/global": "^5.0.0",
-        "qs": "^6.10.0",
-        "telejson": "^7.0.3",
-        "tiny-invariant": "^1.3.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/api/node_modules/@storybook/client-logger": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.2.0.tgz",
-      "integrity": "sha512-e31snLKvP2h/BBl+DXR/pM/CI8uvDU89BujHniK3ttJNynjOpJmHp0SgxOKnlRXpOaau9jKKoLVMegi/BgIYpA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/global": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/api/node_modules/@storybook/manager-api": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.2.0.tgz",
-      "integrity": "sha512-sKaG+VBS8wXGaT+vEihK/2VXJwShhFVOsvOd81vfaM97btik0IhCEHtV7VCNW2lDidIGw7u2DX7QO0tav/Qf1w==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/channels": "7.2.0",
-        "@storybook/client-logger": "7.2.0",
-        "@storybook/core-events": "7.2.0",
-        "@storybook/csf": "^0.1.0",
-        "@storybook/global": "^5.0.0",
-        "@storybook/router": "7.2.0",
-        "@storybook/theming": "7.2.0",
-        "@storybook/types": "7.2.0",
-        "dequal": "^2.0.2",
-        "lodash": "^4.17.21",
-        "memoizerific": "^1.11.3",
-        "semver": "^7.3.7",
-        "store2": "^2.14.2",
-        "telejson": "^7.0.3",
-        "ts-dedent": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@storybook/api/node_modules/@storybook/router": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.2.0.tgz",
-      "integrity": "sha512-8QQ3qzNKy75QSVY4JhtYJI/EBLAepTkMpOcbdvgufFWOwTm/s9N5VlGpVctHYNf+vvNpX+YndVoMGAU7bdn8EQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/client-logger": "7.2.0",
-        "memoizerific": "^1.11.3",
-        "qs": "^6.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@storybook/api/node_modules/@storybook/types": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.2.0.tgz",
-      "integrity": "sha512-jwoA/TIp+U8Vz868aQT+XfoAw6qFrtn2HbZlTfwNWZsUhPFlMsGrwIVEpWqBWIoe6WITU/lNw3BuRmxul+wvAQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/channels": "7.2.0",
-        "@types/babel__core": "^7.0.0",
-        "@types/express": "^4.7.0",
-        "file-system-cache": "2.3.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/blocks": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.2.3.tgz",
@@ -12305,36 +11439,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/blocks/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/blocks/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/builder-manager": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.2.3.tgz",
@@ -12818,16 +11922,6 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/channels/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/cli": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.2.3.tgz",
@@ -12930,13 +12024,13 @@
       }
     },
     "node_modules/@storybook/cli/node_modules/@babel/preset-env": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.9.tgz",
-      "integrity": "sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.10.tgz",
+      "integrity": "sha512-riHpLb1drNkpLlocmSyEg4oYJIQFeXAK/d7rI6mbD0XsvoTOOweXDmQPG/ErxsEhWk3rl3Q/3F6RFQlVFS8m0A==",
       "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.22.9",
-        "@babel/helper-compilation-targets": "^7.22.9",
+        "@babel/helper-compilation-targets": "^7.22.10",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/helper-validator-option": "^7.22.5",
         "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.22.5",
@@ -12961,15 +12055,15 @@
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
         "@babel/plugin-transform-arrow-functions": "^7.22.5",
-        "@babel/plugin-transform-async-generator-functions": "^7.22.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.22.10",
         "@babel/plugin-transform-async-to-generator": "^7.22.5",
         "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
-        "@babel/plugin-transform-block-scoping": "^7.22.5",
+        "@babel/plugin-transform-block-scoping": "^7.22.10",
         "@babel/plugin-transform-class-properties": "^7.22.5",
         "@babel/plugin-transform-class-static-block": "^7.22.5",
         "@babel/plugin-transform-classes": "^7.22.6",
         "@babel/plugin-transform-computed-properties": "^7.22.5",
-        "@babel/plugin-transform-destructuring": "^7.22.5",
+        "@babel/plugin-transform-destructuring": "^7.22.10",
         "@babel/plugin-transform-dotall-regex": "^7.22.5",
         "@babel/plugin-transform-duplicate-keys": "^7.22.5",
         "@babel/plugin-transform-dynamic-import": "^7.22.5",
@@ -12992,27 +12086,27 @@
         "@babel/plugin-transform-object-rest-spread": "^7.22.5",
         "@babel/plugin-transform-object-super": "^7.22.5",
         "@babel/plugin-transform-optional-catch-binding": "^7.22.5",
-        "@babel/plugin-transform-optional-chaining": "^7.22.6",
+        "@babel/plugin-transform-optional-chaining": "^7.22.10",
         "@babel/plugin-transform-parameters": "^7.22.5",
         "@babel/plugin-transform-private-methods": "^7.22.5",
         "@babel/plugin-transform-private-property-in-object": "^7.22.5",
         "@babel/plugin-transform-property-literals": "^7.22.5",
-        "@babel/plugin-transform-regenerator": "^7.22.5",
+        "@babel/plugin-transform-regenerator": "^7.22.10",
         "@babel/plugin-transform-reserved-words": "^7.22.5",
         "@babel/plugin-transform-shorthand-properties": "^7.22.5",
         "@babel/plugin-transform-spread": "^7.22.5",
         "@babel/plugin-transform-sticky-regex": "^7.22.5",
         "@babel/plugin-transform-template-literals": "^7.22.5",
         "@babel/plugin-transform-typeof-symbol": "^7.22.5",
-        "@babel/plugin-transform-unicode-escapes": "^7.22.5",
+        "@babel/plugin-transform-unicode-escapes": "^7.22.10",
         "@babel/plugin-transform-unicode-property-regex": "^7.22.5",
         "@babel/plugin-transform-unicode-regex": "^7.22.5",
         "@babel/plugin-transform-unicode-sets-regex": "^7.22.5",
-        "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.22.5",
-        "babel-plugin-polyfill-corejs2": "^0.4.4",
-        "babel-plugin-polyfill-corejs3": "^0.8.2",
-        "babel-plugin-polyfill-regenerator": "^0.5.1",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "@babel/types": "^7.22.10",
+        "babel-plugin-polyfill-corejs2": "^0.4.5",
+        "babel-plugin-polyfill-corejs3": "^0.8.3",
+        "babel-plugin-polyfill-regenerator": "^0.5.2",
         "core-js-compat": "^3.31.0",
         "semver": "^6.3.1"
       },
@@ -13032,6 +12126,20 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/@storybook/cli/node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      }
+    },
     "node_modules/@storybook/cli/node_modules/agent-base": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
@@ -13560,26 +12668,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/components/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/core-client": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.2.3.tgz",
@@ -14061,20 +13149,19 @@
       }
     },
     "node_modules/@storybook/core-common/node_modules/minipass": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.2.tgz",
-      "integrity": "sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
       "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/@storybook/core-events": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.0.tgz",
-      "integrity": "sha512-Y1o8vGBnbZ/bYsukPiK33CHURSob3tywg8WRtAuwWnDaZiM9IXgkEHbOK1zfkPTnz2gSXEX19KlpTmMxm0W//w==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
       "dev": true,
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -14134,16 +13221,6 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/core-server/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/core-server/node_modules/@types/node": {
       "version": "16.18.40",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
@@ -14307,36 +13384,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/manager-api/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/manager-api/node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@storybook/mdx2-csf": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-1.1.0.tgz",
@@ -14399,16 +13446,6 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/preview-api/node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/react-dom-shim": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.2.3.tgz",
@@ -14463,14 +13500,13 @@
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.0.tgz",
-      "integrity": "sha512-E/nFqZuHnR1HK/jXwlPzLnmbIDxWg4cbSkX3sfTbsDd1h7YhxbouheYSuSPqVDjk+3F87Tv2CP+cZUKDkPd3pQ==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.0",
+        "@storybook/client-logger": "7.2.3",
         "@storybook/global": "^5.0.0",
         "memoizerific": "^1.11.3"
       },
@@ -14483,20 +13519,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/theming/node_modules/@storybook/client-logger": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.2.0.tgz",
-      "integrity": "sha512-e31snLKvP2h/BBl+DXR/pM/CI8uvDU89BujHniK3ttJNynjOpJmHp0SgxOKnlRXpOaau9jKKoLVMegi/BgIYpA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/global": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/types": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.2.3.tgz",
@@ -14661,9 +13683,9 @@
       }
     },
     "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.0.0.tgz",
-      "integrity": "sha512-UKrY3860AQICgH7g+6h2zkoxeVEPLYwX/uAjmqo4PIq2FIHppwhIqZstIyTz0ZtlwreKR41O3W3BzsBBiJV2Aw==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
       "dev": true,
       "engines": {
         "node": ">=14"
@@ -14693,9 +13715,9 @@
       }
     },
     "node_modules/@svgr/babel-preset": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.0.0.tgz",
-      "integrity": "sha512-KLcjiZychInVrhs86OvcYPLTFu9L5XV2vj0XAaE1HwE3J3jLmIzRY8ttdeAg/iFyp8nhavJpafpDZTt+1LIpkQ==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
       "dev": true,
       "dependencies": {
         "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
@@ -14704,7 +13726,7 @@
         "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
         "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
         "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
-        "@svgr/babel-plugin-transform-react-native-svg": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
         "@svgr/babel-plugin-transform-svg-component": "8.0.0"
       },
       "engines": {
@@ -14719,13 +13741,13 @@
       }
     },
     "node_modules/@svgr/core": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.0.0.tgz",
-      "integrity": "sha512-aJKtc+Pie/rFYsVH/unSkDaZGvEeylNv/s2cP+ta9/rYWxRVvoV/S4Qw65Kmrtah4CBK5PM6ISH9qUH7IJQCng==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
-        "@svgr/babel-preset": "8.0.0",
+        "@svgr/babel-preset": "8.1.0",
         "camelcase": "^6.2.0",
         "cosmiconfig": "^8.1.3",
         "snake-case": "^3.0.4"
@@ -14756,13 +13778,13 @@
       }
     },
     "node_modules/@svgr/plugin-jsx": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.0.1.tgz",
-      "integrity": "sha512-bfCFb+4ZsM3UuKP2t7KmDwn6YV8qVn9HIQJmau6xeQb/iV65Rpi7NBNBWA2hcCd4GKoCqG8hpaaDk5FDR0eH+g==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
-        "@svgr/babel-preset": "8.0.0",
+        "@svgr/babel-preset": "8.1.0",
         "@svgr/hast-util-to-babel-ast": "8.0.0",
         "svg-parser": "^2.0.4"
       },
@@ -14778,9 +13800,9 @@
       }
     },
     "node_modules/@svgr/plugin-svgo": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.0.1.tgz",
-      "integrity": "sha512-29OJ1QmJgnohQHDAgAuY2h21xWD6TZiXji+hnx+W635RiXTAlHTbjrZDktfqzkN0bOeQEtNe+xgq73/XeWFfSg==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz",
+      "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==",
       "dev": true,
       "dependencies": {
         "cosmiconfig": "^8.1.3",
@@ -14799,9 +13821,9 @@
       }
     },
     "node_modules/@svgr/webpack": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.0.1.tgz",
-      "integrity": "sha512-zSoeKcbCmfMXjA11uDuCJb+1LWNb3vy6Qw/VHj0Nfcl3UuqwuoZWknHsBIhCWvi4wU9vPui3aq054qjVyZqY4A==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.1.0.tgz",
+      "integrity": "sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
@@ -14809,9 +13831,9 @@
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.21.0",
-        "@svgr/core": "8.0.0",
-        "@svgr/plugin-jsx": "8.0.1",
-        "@svgr/plugin-svgo": "8.0.1"
+        "@svgr/core": "8.1.0",
+        "@svgr/plugin-jsx": "8.1.0",
+        "@svgr/plugin-svgo": "8.1.0"
       },
       "engines": {
         "node": ">=14"
@@ -14867,13 +13889,13 @@
       }
     },
     "node_modules/@svgr/webpack/node_modules/@babel/preset-env": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.9.tgz",
-      "integrity": "sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.10.tgz",
+      "integrity": "sha512-riHpLb1drNkpLlocmSyEg4oYJIQFeXAK/d7rI6mbD0XsvoTOOweXDmQPG/ErxsEhWk3rl3Q/3F6RFQlVFS8m0A==",
       "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.22.9",
-        "@babel/helper-compilation-targets": "^7.22.9",
+        "@babel/helper-compilation-targets": "^7.22.10",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/helper-validator-option": "^7.22.5",
         "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.22.5",
@@ -14898,15 +13920,15 @@
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
         "@babel/plugin-transform-arrow-functions": "^7.22.5",
-        "@babel/plugin-transform-async-generator-functions": "^7.22.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.22.10",
         "@babel/plugin-transform-async-to-generator": "^7.22.5",
         "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
-        "@babel/plugin-transform-block-scoping": "^7.22.5",
+        "@babel/plugin-transform-block-scoping": "^7.22.10",
         "@babel/plugin-transform-class-properties": "^7.22.5",
         "@babel/plugin-transform-class-static-block": "^7.22.5",
         "@babel/plugin-transform-classes": "^7.22.6",
         "@babel/plugin-transform-computed-properties": "^7.22.5",
-        "@babel/plugin-transform-destructuring": "^7.22.5",
+        "@babel/plugin-transform-destructuring": "^7.22.10",
         "@babel/plugin-transform-dotall-regex": "^7.22.5",
         "@babel/plugin-transform-duplicate-keys": "^7.22.5",
         "@babel/plugin-transform-dynamic-import": "^7.22.5",
@@ -14929,27 +13951,27 @@
         "@babel/plugin-transform-object-rest-spread": "^7.22.5",
         "@babel/plugin-transform-object-super": "^7.22.5",
         "@babel/plugin-transform-optional-catch-binding": "^7.22.5",
-        "@babel/plugin-transform-optional-chaining": "^7.22.6",
+        "@babel/plugin-transform-optional-chaining": "^7.22.10",
         "@babel/plugin-transform-parameters": "^7.22.5",
         "@babel/plugin-transform-private-methods": "^7.22.5",
         "@babel/plugin-transform-private-property-in-object": "^7.22.5",
         "@babel/plugin-transform-property-literals": "^7.22.5",
-        "@babel/plugin-transform-regenerator": "^7.22.5",
+        "@babel/plugin-transform-regenerator": "^7.22.10",
         "@babel/plugin-transform-reserved-words": "^7.22.5",
         "@babel/plugin-transform-shorthand-properties": "^7.22.5",
         "@babel/plugin-transform-spread": "^7.22.5",
         "@babel/plugin-transform-sticky-regex": "^7.22.5",
         "@babel/plugin-transform-template-literals": "^7.22.5",
         "@babel/plugin-transform-typeof-symbol": "^7.22.5",
-        "@babel/plugin-transform-unicode-escapes": "^7.22.5",
+        "@babel/plugin-transform-unicode-escapes": "^7.22.10",
         "@babel/plugin-transform-unicode-property-regex": "^7.22.5",
         "@babel/plugin-transform-unicode-regex": "^7.22.5",
         "@babel/plugin-transform-unicode-sets-regex": "^7.22.5",
-        "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.22.5",
-        "babel-plugin-polyfill-corejs2": "^0.4.4",
-        "babel-plugin-polyfill-corejs3": "^0.8.2",
-        "babel-plugin-polyfill-regenerator": "^0.5.1",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "@babel/types": "^7.22.10",
+        "babel-plugin-polyfill-corejs2": "^0.4.5",
+        "babel-plugin-polyfill-corejs3": "^0.8.3",
+        "babel-plugin-polyfill-regenerator": "^0.5.2",
         "core-js-compat": "^3.31.0",
         "semver": "^6.3.1"
       },
@@ -14960,6 +13982,20 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@svgr/webpack/node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      }
+    },
     "node_modules/@svgr/webpack/node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
@@ -15532,9 +14568,9 @@
       "dev": true
     },
     "node_modules/@types/eslint": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.1.tgz",
-      "integrity": "sha512-XpNDc4Z5Tb4x+SW1MriMVeIsMoONHCkWFMkR/aPJbzEsxqHy+4Glu/BqTdPrApfDeMaXbtNh6bseNgl5KaWrSg==",
+      "version": "8.44.2",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz",
+      "integrity": "sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==",
       "dev": true,
       "dependencies": {
         "@types/estree": "*",
@@ -15728,9 +14764,9 @@
       }
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.196",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.196.tgz",
-      "integrity": "sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==",
+      "version": "4.14.197",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.197.tgz",
+      "integrity": "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==",
       "dev": true
     },
     "node_modules/@types/mdx": {
@@ -16841,13 +15877,11 @@
       }
     },
     "node_modules/agentkeepalive": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.3.0.tgz",
-      "integrity": "sha512-7Epl1Blf4Sy37j4v9f9FjICCh4+KAQOyXgHEwlyBiAQLbhKdq/i2QQU3amQalS/wPhdPzDXPL5DMR5bkn+YeWg==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz",
+      "integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==",
       "dev": true,
       "dependencies": {
-        "debug": "^4.1.0",
-        "depd": "^2.0.0",
         "humanize-ms": "^1.2.1"
       },
       "engines": {
@@ -17265,9 +16299,9 @@
       }
     },
     "node_modules/ast-types": {
-      "version": "0.16.1",
-      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
-      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.0.1"
@@ -18616,9 +17650,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001518",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001518.tgz",
-      "integrity": "sha512-rup09/e3I0BKjncL+FesTayKtPrdwKhUufQFd3riFw1hHg8JmIFoInYfB102cFcY/pPgGmdyl/iy+jgiDi2vdA==",
+      "version": "1.0.30001520",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
+      "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==",
       "dev": true,
       "funding": [
         {
@@ -19306,16 +18340,15 @@
       }
     },
     "node_modules/conventional-changelog-angular": {
-      "version": "5.0.13",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz",
-      "integrity": "sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-6.0.0.tgz",
+      "integrity": "sha512-6qLgrBF4gueoC7AFVHu51nHL9pF9FRjXrH+ceVf7WmAfH3gs+gEYOkvxhjMPjZu57I4AGUGoNTY8V7Hrgf1uqg==",
       "dev": true,
       "dependencies": {
-        "compare-func": "^2.0.0",
-        "q": "^1.5.1"
+        "compare-func": "^2.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
       }
     },
     "node_modules/conventional-changelog-atom": {
@@ -19372,24 +18405,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/conventional-changelog-core/node_modules/conventional-commits-parser": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-4.0.0.tgz",
-      "integrity": "sha512-WRv5j1FsVM5FISJkoYMR6tPk07fkKT0UodruX4je86V4owk451yjXAKzKAPOs9l7y59E2viHUS9eQ+dfUA9NSg==",
-      "dev": true,
-      "dependencies": {
-        "is-text-path": "^1.0.1",
-        "JSONStream": "^1.3.5",
-        "meow": "^8.1.2",
-        "split2": "^3.2.2"
-      },
-      "bin": {
-        "conventional-commits-parser": "cli.js"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/conventional-changelog-core/node_modules/find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -19565,18 +18580,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/conventional-changelog/node_modules/conventional-changelog-angular": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-6.0.0.tgz",
-      "integrity": "sha512-6qLgrBF4gueoC7AFVHu51nHL9pF9FRjXrH+ceVf7WmAfH3gs+gEYOkvxhjMPjZu57I4AGUGoNTY8V7Hrgf1uqg==",
-      "dev": true,
-      "dependencies": {
-        "compare-func": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/conventional-changelog/node_modules/conventional-changelog-conventionalcommits": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-6.1.0.tgz",
@@ -19603,23 +18606,21 @@
       }
     },
     "node_modules/conventional-commits-parser": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-3.2.4.tgz",
-      "integrity": "sha512-nK7sAtfi+QXbxHCYfhpZsfRtaitZLIA6889kFIouLvz6repszQDgxBu7wf2WbU+Dco7sAnNCJYERCwt54WPC2Q==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-4.0.0.tgz",
+      "integrity": "sha512-WRv5j1FsVM5FISJkoYMR6tPk07fkKT0UodruX4je86V4owk451yjXAKzKAPOs9l7y59E2viHUS9eQ+dfUA9NSg==",
       "dev": true,
       "dependencies": {
         "is-text-path": "^1.0.1",
-        "JSONStream": "^1.0.4",
-        "lodash": "^4.17.15",
-        "meow": "^8.0.0",
-        "split2": "^3.0.0",
-        "through2": "^4.0.0"
+        "JSONStream": "^1.3.5",
+        "meow": "^8.1.2",
+        "split2": "^3.2.2"
       },
       "bin": {
         "conventional-commits-parser": "cli.js"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
       }
     },
     "node_modules/conventional-recommended-bump": {
@@ -19643,24 +18644,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/conventional-recommended-bump/node_modules/conventional-commits-parser": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-4.0.0.tgz",
-      "integrity": "sha512-WRv5j1FsVM5FISJkoYMR6tPk07fkKT0UodruX4je86V4owk451yjXAKzKAPOs9l7y59E2viHUS9eQ+dfUA9NSg==",
-      "dev": true,
-      "dependencies": {
-        "is-text-path": "^1.0.1",
-        "JSONStream": "^1.3.5",
-        "meow": "^8.1.2",
-        "split2": "^3.2.2"
-      },
-      "bin": {
-        "conventional-commits-parser": "cli.js"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/conventional-recommended-bump/node_modules/git-raw-commits": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-3.0.0.tgz",
@@ -19874,12 +18857,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/copyfiles/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
-    },
     "node_modules/copyfiles/node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -19892,40 +18869,6 @@
         "node": "*"
       }
     },
-    "node_modules/copyfiles/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/copyfiles/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/copyfiles/node_modules/through2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-      "dev": true,
-      "dependencies": {
-        "readable-stream": "~2.3.6",
-        "xtend": "~4.0.1"
-      }
-    },
     "node_modules/copyfiles/node_modules/yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
@@ -21056,18 +19999,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/degenerator/node_modules/ast-types": {
-      "version": "0.13.4",
-      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
-      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/del": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
@@ -21549,9 +20480,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.479",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.479.tgz",
-      "integrity": "sha512-ABv1nHMIR8I5n3O3Een0gr6i0mfM+YcTZqjHy3pAYaOjgFG+BMquuKrSyfYf5CbEkLr9uM05RA3pOk4udNB/aQ==",
+      "version": "1.4.491",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.491.tgz",
+      "integrity": "sha512-ZzPqGKghdVzlQJ+qpfE+r6EB321zed7e5JsvHIlMM4zPFF8okXUkF5Of7h7F3l3cltPL0rG7YVmlp5Qro7RQLA==",
       "dev": true
     },
     "node_modules/emittery": {
@@ -22347,14 +21278,14 @@
       }
     },
     "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
-      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
       "dev": true,
       "dependencies": {
         "debug": "^3.2.7",
-        "is-core-module": "^2.11.0",
-        "resolve": "^1.22.1"
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
       }
     },
     "node_modules/eslint-import-resolver-node/node_modules/debug": {
@@ -22366,6 +21297,23 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/eslint-import-resolver-node/node_modules/resolve": {
+      "version": "1.22.4",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
+      "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/eslint-import-resolver-typescript": {
       "version": "3.5.5",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.5.tgz",
@@ -22630,12 +21578,12 @@
       }
     },
     "node_modules/eslint-plugin-jsx-a11y/node_modules/@babel/runtime": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
+      "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
       "dev": true,
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -22663,6 +21611,12 @@
         "node": "*"
       }
     },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
+      "dev": true
+    },
     "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -22844,9 +21798,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -24473,46 +23427,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/get-pkg-repo/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
-    },
-    "node_modules/get-pkg-repo/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/get-pkg-repo/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/get-pkg-repo/node_modules/through2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-      "dev": true,
-      "dependencies": {
-        "readable-stream": "~2.3.6",
-        "xtend": "~4.0.1"
-      }
-    },
     "node_modules/get-pkg-repo/node_modules/yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
@@ -24582,9 +23496,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.6.2.tgz",
-      "integrity": "sha512-E5XrT4CbbXcXWy+1jChlZmrmCwd5KGx502kDCXJJ7y898TtWW9FwoG5HfOLVRKmlmDGkWN2HM9Ho+/Y8F0sJDg==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.0.tgz",
+      "integrity": "sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==",
       "dev": true,
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
@@ -24677,6 +23591,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/git-raw-commits/node_modules/through2": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+      "dev": true,
+      "dependencies": {
+        "readable-stream": "3"
+      }
+    },
     "node_modules/git-remote-origin-url": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz",
@@ -24968,46 +23891,6 @@
         "gunzip-maybe": "bin.js"
       }
     },
-    "node_modules/gunzip-maybe/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
-    },
-    "node_modules/gunzip-maybe/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/gunzip-maybe/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/gunzip-maybe/node_modules/through2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-      "dev": true,
-      "dependencies": {
-        "readable-stream": "~2.3.6",
-        "xtend": "~4.0.1"
-      }
-    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -25015,13 +23898,13 @@
       "dev": true
     },
     "node_modules/handlebars": {
-      "version": "4.7.7",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
-      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
       "dev": true,
       "dependencies": {
         "minimist": "^1.2.5",
-        "neo-async": "^2.6.0",
+        "neo-async": "^2.6.2",
         "source-map": "^0.6.1",
         "wordwrap": "^1.0.0"
       },
@@ -25644,9 +24527,9 @@
       }
     },
     "node_modules/immutable": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.1.tgz",
-      "integrity": "sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+      "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
       "dev": true
     },
     "node_modules/import-cwd": {
@@ -26728,9 +25611,9 @@
       }
     },
     "node_modules/jackspeak": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.2.2.tgz",
-      "integrity": "sha512-mgNtVv4vUuaKA97yxUHoA3+FkuhtxkjdXEWOyB/N76fjy0FjezEt34oy3epBtvCvS+7DyKwqCFWx/oJLV5+kCg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.2.3.tgz",
+      "integrity": "sha512-pF0kfjmg8DJLxDrizHoCZGUFz4P4czQ3HyfW4BU0ffebYkzAVlBywp5zaxW/TM+r0sGbmrQdi8EQQVTJFxnGsQ==",
       "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -29806,27 +28689,37 @@
       }
     },
     "node_modules/lit": {
-      "version": "2.7.6",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.6.tgz",
-      "integrity": "sha512-1amFHA7t4VaaDe+vdQejSVBklwtH9svGoG6/dZi9JhxtJBBlqY5D1RV7iLUYY0trCqQc4NfhYYZilZiVHt7Hxg==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
       "dev": true,
       "peer": true,
       "dependencies": {
         "@lit/reactive-element": "^1.6.0",
         "lit-element": "^3.3.0",
-        "lit-html": "^2.7.0"
+        "lit-html": "^2.8.0"
       }
     },
     "node_modules/lit-element": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.2.tgz",
-      "integrity": "sha512-xXAeVWKGr4/njq0rGC9dethMnYCq5hpKYrgQZYTzawt9YQhMiXfD+T1RgrdY3NamOxwq2aXlb0vOI6e29CKgVQ==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
       "dev": true,
       "peer": true,
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.1.0",
         "@lit/reactive-element": "^1.3.0",
-        "lit-html": "^2.7.0"
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-element/node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
       }
     },
     "node_modules/lit-html": {
@@ -29838,6 +28731,16 @@
         "@types/trusted-types": "^2.0.2"
       }
     },
+    "node_modules/lit/node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -30150,12 +29053,12 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
-      "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
+      "version": "0.30.1",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
+      "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.13"
+        "@jridgewell/sourcemap-codec": "^1.4.15"
       },
       "engines": {
         "node": ">=12"
@@ -30239,16 +29142,16 @@
       }
     },
     "node_modules/make-fetch-happen/node_modules/cacache": {
-      "version": "17.1.3",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-17.1.3.tgz",
-      "integrity": "sha512-jAdjGxmPxZh0IipMdR7fK/4sDSrHMLUV0+GvVUsjwyGNKHsh79kW/otg+GkbXwl6Uzvy9wsvHOX4nUoWldeZMg==",
+      "version": "17.1.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-17.1.4.tgz",
+      "integrity": "sha512-/aJwG2l3ZMJ1xNAnqbMpA40of9dj/pIH3QfiuQSqjfPJF747VR0J/bHn+/KdNnHKc6XQcWt/AfRSBft82W1d2A==",
       "dev": true,
       "dependencies": {
         "@npmcli/fs": "^3.1.0",
         "fs-minipass": "^3.0.0",
         "glob": "^10.2.2",
         "lru-cache": "^7.7.1",
-        "minipass": "^5.0.0",
+        "minipass": "^7.0.3",
         "minipass-collect": "^1.0.2",
         "minipass-flush": "^1.0.5",
         "minipass-pipeline": "^1.2.4",
@@ -30261,18 +29164,36 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/make-fetch-happen/node_modules/cacache/node_modules/minipass": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/make-fetch-happen/node_modules/fs-minipass": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.2.tgz",
-      "integrity": "sha512-2GAfyfoaCDRrM6jaOS3UsBts8yJ55VioXdWcOL7dK9zdAuKT71+WBA4ifnNYqVjYv+4SsPxjK0JT4yIIn4cA/g==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+      "integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
       "dev": true,
       "dependencies": {
-        "minipass": "^5.0.0"
+        "minipass": "^7.0.3"
       },
       "engines": {
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/make-fetch-happen/node_modules/fs-minipass/node_modules/minipass": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/make-fetch-happen/node_modules/glob": {
       "version": "10.3.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.3.tgz",
@@ -30343,17 +29264,26 @@
       }
     },
     "node_modules/make-fetch-happen/node_modules/ssri": {
-      "version": "10.0.4",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.4.tgz",
-      "integrity": "sha512-12+IR2CB2C28MMAw0Ncqwj5QbTcs0nGIhgJzYWzDkb21vWmfNI83KS4f3Ci6GI98WreIfG7o9UXp3C0qbpA8nQ==",
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
+      "integrity": "sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==",
       "dev": true,
       "dependencies": {
-        "minipass": "^5.0.0"
+        "minipass": "^7.0.3"
       },
       "engines": {
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/make-fetch-happen/node_modules/ssri/node_modules/minipass": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/make-fetch-happen/node_modules/unique-filename": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
@@ -30427,9 +29357,9 @@
       "dev": true
     },
     "node_modules/markdown-to-jsx": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.1.tgz",
-      "integrity": "sha512-9HrdzBAo0+sFz9ZYAGT5fB8ilzTW+q6lPocRxrIesMO+aB40V9MgFfbfMXxlGjf22OpRy+IXlvVaQenicdpgbg==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.3.2.tgz",
+      "integrity": "sha512-B+28F5ucp83aQm+OxNrPkS8z0tMKaeHiy0lHJs3LqCyDQFtWuenaIrkaVTgAm1pf1AU85LXltva86hlaT17i8Q==",
       "dev": true,
       "engines": {
         "node": ">= 10"
@@ -30778,12 +29708,12 @@
       }
     },
     "node_modules/minipass-fetch": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-3.0.3.tgz",
-      "integrity": "sha512-n5ITsTkDqYkYJZjcRWzZt9qnZKCT7nKCosJhHoj7S7zD+BP4jVbWs+odsniw5TA3E0sLomhTKOKjF86wf11PuQ==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-3.0.4.tgz",
+      "integrity": "sha512-jHAqnA728uUpIaFm7NWsCnqKT6UqZz7GcI/bDpPATuwYyKwJwW0remxSCxUlKiEty+eopHGa3oc8WxgQ1FFJqg==",
       "dev": true,
       "dependencies": {
-        "minipass": "^5.0.0",
+        "minipass": "^7.0.3",
         "minipass-sized": "^1.0.3",
         "minizlib": "^2.1.2"
       },
@@ -30795,12 +29725,12 @@
       }
     },
     "node_modules/minipass-fetch/node_modules/minipass": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
       "dev": true,
       "engines": {
-        "node": ">=8"
+        "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/minipass-flush": {
@@ -34323,18 +33253,18 @@
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.0.tgz",
-      "integrity": "sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz",
+      "integrity": "sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==",
       "dev": true,
       "engines": {
         "node": "14 || >=16.14"
       }
     },
     "node_modules/path-scurry/node_modules/minipass": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.2.tgz",
-      "integrity": "sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
       "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -34385,46 +33315,6 @@
         "through2": "^2.0.3"
       }
     },
-    "node_modules/peek-stream/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
-    },
-    "node_modules/peek-stream/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/peek-stream/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/peek-stream/node_modules/through2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-      "dev": true,
-      "dependencies": {
-        "readable-stream": "~2.3.6",
-        "xtend": "~4.0.1"
-      }
-    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -35635,9 +34525,9 @@
       }
     },
     "node_modules/postcss-nesting": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.0.tgz",
-      "integrity": "sha512-knqwW65kxssmyIFadRSimaiRyLVRd0MdwfabesKw6XvGLwSOCJ+4zfvNQQCOOYij5obwpZzDpODuGRv2PCyiUw==",
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.1.tgz",
+      "integrity": "sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==",
       "dev": true,
       "funding": [
         {
@@ -37289,9 +36179,9 @@
       }
     },
     "node_modules/recast": {
-      "version": "0.23.3",
-      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.3.tgz",
-      "integrity": "sha512-HbCVFh2ANP6a09nzD4lx7XthsxMOJWKX5pIcUwtLrmeEIl3I0DwjCoVXDE0Aobk+7k/mS3H50FK4iuYArpcT6Q==",
+      "version": "0.23.4",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.4.tgz",
+      "integrity": "sha512-qtEDqIZGVcSZCHniWwZWbRy79Dc6Wp3kT/UmDA2RJKBPg7+7k51aQBZirHmUGn5uvHf2rg8DkjizrN26k61ATw==",
       "dev": true,
       "dependencies": {
         "assert": "^2.0.0",
@@ -37304,6 +36194,18 @@
         "node": ">= 4"
       }
     },
+    "node_modules/recast/node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/recast/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -37760,9 +36662,9 @@
       }
     },
     "node_modules/rimraf/node_modules/minipass": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.2.tgz",
-      "integrity": "sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
       "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -40343,9 +39245,9 @@
       "dev": true
     },
     "node_modules/streamx": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.0.tgz",
-      "integrity": "sha512-HcxY6ncGjjklGs1xsP1aR71INYcsXFJet5CU1CHqihQ2J5nOsbd4OjgjHO42w/4QNv9gZb3BueV+Vxok5pLEXg==",
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.1.tgz",
+      "integrity": "sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==",
       "dev": true,
       "dependencies": {
         "fast-fifo": "^1.1.0",
@@ -41632,12 +40534,12 @@
       }
     },
     "node_modules/tailwindcss/node_modules/resolve": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
-      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "version": "1.22.4",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
+      "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
       "dev": true,
       "dependencies": {
-        "is-core-module": "^2.11.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -42190,12 +41092,43 @@
       "dev": true
     },
     "node_modules/through2": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
-      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
       "dev": true,
       "dependencies": {
-        "readable-stream": "3"
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true
+    },
+    "node_modules/through2/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
       }
     },
     "node_modules/thunky": {
@@ -44584,10 +43517,28 @@
       "name": "@bee-q/icons",
       "version": "0.7.1"
     },
+    "packages/bee-q-icons/node_modules/@types/node": {
+      "version": "18.17.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.5.tgz",
+      "integrity": "sha512-xNbS75FxH6P4UXTPUJp/zNPq6/xsfdJKussCWNOnz4aULWIRwMgP1LgaB5RiBnMX1DPCYenuqGZfnIAx5mbFLA==",
+      "dev": true
+    },
+    "packages/bee-q-icons/node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "packages/bee-q-icons/temp/core-main": {
       "name": "@phosphor-icons/core",
       "version": "2.0.2",
-      "extraneous": true,
       "license": "MIT",
       "devDependencies": {
         "@types/node": "^18",
@@ -44607,15 +43558,6 @@
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0"
       }
-    },
-    "packages/bee-q/node_modules/@floating-ui/dom": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.0.tgz",
-      "integrity": "sha512-9jPin5dTlcEN+nXzBRhdreCzlJBIYWeMXpJJ5VnO1l9dLcP7uQNPbmwmIoHpHpH6GPYMYtQA7GfkvsSj/CQPwg==",
-      "dependencies": {
-        "@floating-ui/core": "^1.4.0",
-        "@floating-ui/utils": "^0.1.0"
-      }
     }
   }
 }

From 5c54de87744a378160adbe367fcac02e13b1083c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Wed, 16 Aug 2023 14:24:54 +0300
Subject: [PATCH 21/23] test(Select): update e2e tests after CSS classes rename

---
 .../bee-q/src/components/select/__tests__/bq-select.e2e.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/bee-q/src/components/select/__tests__/bq-select.e2e.ts b/packages/bee-q/src/components/select/__tests__/bq-select.e2e.ts
index 60b92a2e9..11c40bee2 100644
--- a/packages/bee-q/src/components/select/__tests__/bq-select.e2e.ts
+++ b/packages/bee-q/src/components/select/__tests__/bq-select.e2e.ts
@@ -36,7 +36,7 @@ describe('bq-select', () => {
         </bq-select>
       `,
     });
-    const prefixContainerElem = await page.find('bq-select >>> .bq-select--control__prefix');
+    const prefixContainerElem = await page.find('bq-select >>> .bq-select__control--prefix');
     expect(prefixContainerElem).not.toHaveClass('hidden');
   });
 
@@ -48,7 +48,7 @@ describe('bq-select', () => {
         </bq-select>
       `,
     });
-    const labelContainerElem = await page.find('bq-select >>> .bq-select--label');
+    const labelContainerElem = await page.find('bq-select >>> .bq-select__label');
 
     expect(labelContainerElem).not.toHaveClass('hidden');
   });
@@ -61,7 +61,7 @@ describe('bq-select', () => {
         </bq-select>
       `,
     });
-    const helperContainerElem = await page.find('bq-select >>> .bq-select--helper-text');
+    const helperContainerElem = await page.find('bq-select >>> .bq-select__helper-text');
 
     expect(helperContainerElem).not.toHaveClass('hidden');
   });

From 77aa12d61e820af5268c4a983924b19f5ac5c6ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Wed, 16 Aug 2023 14:38:03 +0300
Subject: [PATCH 22/23] chore(deps): sync package-lock.json after rebase

---
 package-lock.json                             | 1252 +++++++++++++++--
 .../bee-q/src/components/select/bq-select.tsx |   10 +-
 2 files changed, 1164 insertions(+), 98 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1bd3a6d10..e51c6bf42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -145,9 +145,9 @@
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.0.tgz",
-      "integrity": "sha512-+RNNcQvw2V1bmnBTPAtOLfW/9mhH2vC67+rUSi5T8EtEWt6lEnGNY2GuhZ1/YwbgikT1TkhvidCDmN5Q5YCo/w==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==",
       "dev": true
     },
     "node_modules/@alloc/quick-lru": {
@@ -10411,6 +10411,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz",
@@ -10455,6 +10488,31 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -10474,6 +10532,95 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.0.4.tgz",
+      "integrity": "sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-separator": "1.0.3",
+        "@radix-ui/react-toggle-group": "1.0.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -10994,6 +11141,62 @@
         }
       }
     },
+    "node_modules/@storybook/addon-a11y/node_modules/@storybook/components": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-a11y/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-a11y/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/addon-actions": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.2.3.tgz",
@@ -11034,6 +11237,62 @@
         }
       }
     },
+    "node_modules/@storybook/addon-actions/node_modules/@storybook/components": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-actions/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-actions/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/addon-actions/node_modules/uuid": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
@@ -11077,24 +11336,22 @@
         }
       }
     },
-    "node_modules/@storybook/addon-controls": {
+    "node_modules/@storybook/addon-backgrounds/node_modules/@storybook/components": {
       "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.2.3.tgz",
-      "integrity": "sha512-e0Yro238/MJP+0pV9sZ/M8BWjabX9lesr03dhvYKLAEwKSbrtcPRTszkRYKlcY9GyUxOc2xji8cgEgq0TtJWNg==",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
       "dev": true,
       "dependencies": {
-        "@storybook/blocks": "7.2.3",
+        "@radix-ui/react-select": "^1.2.2",
         "@storybook/client-logger": "7.2.3",
-        "@storybook/components": "7.2.3",
-        "@storybook/core-common": "7.2.3",
-        "@storybook/core-events": "7.2.3",
-        "@storybook/manager-api": "7.2.3",
-        "@storybook/node-logger": "7.2.3",
-        "@storybook/preview-api": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
         "@storybook/theming": "7.2.3",
         "@storybook/types": "7.2.3",
-        "lodash": "^4.17.21",
-        "ts-dedent": "^2.0.0"
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
       },
       "funding": {
         "type": "opencollective",
@@ -11103,9 +11360,67 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
+      }
+    },
+    "node_modules/@storybook/addon-backgrounds/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-backgrounds/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-controls": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.2.3.tgz",
+      "integrity": "sha512-e0Yro238/MJP+0pV9sZ/M8BWjabX9lesr03dhvYKLAEwKSbrtcPRTszkRYKlcY9GyUxOc2xji8cgEgq0TtJWNg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/blocks": "7.2.3",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/components": "7.2.3",
+        "@storybook/core-common": "7.2.3",
+        "@storybook/core-events": "7.2.3",
+        "@storybook/manager-api": "7.2.3",
+        "@storybook/node-logger": "7.2.3",
+        "@storybook/preview-api": "7.2.3",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "lodash": "^4.17.21",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
           "optional": true
         },
         "react-dom": {
@@ -11113,6 +11428,62 @@
         }
       }
     },
+    "node_modules/@storybook/addon-controls/node_modules/@storybook/components": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-controls/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-controls/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/addon-docs": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.2.3.tgz",
@@ -11148,6 +11519,52 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@storybook/addon-docs/node_modules/@storybook/components": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-docs/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/addon-essentials": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.2.3.tgz",
@@ -11193,6 +11610,16 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/addon-highlight/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/addon-links": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.2.3.tgz",
@@ -11227,6 +11654,16 @@
         }
       }
     },
+    "node_modules/@storybook/addon-links/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/addon-measure": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.2.3.tgz",
@@ -11259,6 +11696,62 @@
         }
       }
     },
+    "node_modules/@storybook/addon-measure/node_modules/@storybook/components": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-measure/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-measure/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/addon-outline": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.2.3.tgz",
@@ -11291,17 +11784,384 @@
         }
       }
     },
-    "node_modules/@storybook/addon-toolbars": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.2.3.tgz",
-      "integrity": "sha512-IEh5Zwo1yhB2ULKPu+DNb6csA7Jf/JxhCilNjgLTVcCvzQWtxoSadbI0ed9QTOSM/JRr4WJgm+4ZiC+22kXoVw==",
+    "node_modules/@storybook/addon-outline/node_modules/@storybook/components": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-outline/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-outline/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-toolbars": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.2.3.tgz",
+      "integrity": "sha512-IEh5Zwo1yhB2ULKPu+DNb6csA7Jf/JxhCilNjgLTVcCvzQWtxoSadbI0ed9QTOSM/JRr4WJgm+4ZiC+22kXoVw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/components": "7.2.3",
+        "@storybook/manager-api": "7.2.3",
+        "@storybook/preview-api": "7.2.3",
+        "@storybook/theming": "7.2.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-toolbars/node_modules/@storybook/components": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-toolbars/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-viewport": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.2.3.tgz",
+      "integrity": "sha512-F9qJIgp7j98Ox/BOQRj/0jIUZ4FlX9rCTynQiHpMI6tRQJyj33pPOclO96/08tUTuuqNSK1zr/XydQIJe+dTPA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/components": "7.2.3",
+        "@storybook/core-events": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.3",
+        "@storybook/preview-api": "7.2.3",
+        "@storybook/theming": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "prop-types": "^15.7.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-viewport/node_modules/@storybook/components": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-viewport/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-viewport/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addons": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.3.1.tgz",
+      "integrity": "sha512-NebVJI/E2Lw7XP0deazSpN9B5HUtgVgIo2wbdyzJsOzKYAHO7IY1gkgvRyJ84Xn9iVoszEOPIw/P/t0WUqX6dg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/manager-api": "7.3.1",
+        "@storybook/preview-api": "7.3.1",
+        "@storybook/types": "7.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addons/node_modules/@storybook/channels": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.3.1.tgz",
+      "integrity": "sha512-DHdUdwfnMOSmtYv55Ixysklo/ZeD3TiTEQvyBaxhnMR3G0j7nb+TxqyfAn4fb7bntOPRNVB1Vz3nZXkkjrPNgw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.3.1",
+        "@storybook/core-events": "7.3.1",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.0.3",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addons/node_modules/@storybook/client-logger": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.3.1.tgz",
+      "integrity": "sha512-VfKi8C5Z1hquaP6xtVn9ngKcnXZjHNV6+RAqLbUJyAoGeO8fFaMblYgbY+tF7Xyf3bZKMLBo4QqtegTh2QjdAA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addons/node_modules/@storybook/manager-api": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.3.1.tgz",
+      "integrity": "sha512-jFH0EfWasdwHW8X5DUzTbH5mpdCZBHU7lIEUj6lVMBcBxbTniqBiG7mkwbW9VLocqEbBZimLCb/2RtTpK1Ue3Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/channels": "7.3.1",
+        "@storybook/client-logger": "7.3.1",
+        "@storybook/core-events": "7.3.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/router": "7.3.1",
+        "@storybook/theming": "7.3.1",
+        "@storybook/types": "7.3.1",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "semver": "^7.3.7",
+        "store2": "^2.14.2",
+        "telejson": "^7.0.3",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addons/node_modules/@storybook/preview-api": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.3.1.tgz",
+      "integrity": "sha512-otFvUJBFxhg11O5XLiyqddTS1ge/tjIs4gA4Uli6M+a6PV+SdNuTE8OjpvvgjsFTFdhyciHKTimKSLAqvopcuw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/channels": "7.3.1",
+        "@storybook/client-logger": "7.3.1",
+        "@storybook/core-events": "7.3.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.3.1",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "synchronous-promise": "^2.0.15",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addons/node_modules/@storybook/router": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.3.1.tgz",
+      "integrity": "sha512-KY+Mo0oF2xcRUDCXPJjAB5xy7d8Hi2dh8VqLahGa14ZHwhsZ/RxqE2bypwLXXkRpEiyOpfMbSsG73+1ml3fIUg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.3.1",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addons/node_modules/@storybook/types": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.3.1.tgz",
+      "integrity": "sha512-QR714i/Stus/RYqJ8chTCfWNt3RY6/64xRXxaMLqkx75OIq5+rtsmes9I5iUqM4FuupvE7YdlZ5xKvxLYLYgJQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/channels": "7.3.1",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/api": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.3.1.tgz",
+      "integrity": "sha512-QYXX9NWV+Ud1nWVX3Tfjkmxb1Vi1bRxmSXlfIo3HYqhPm4rOwDlpN6nso21Kz3QyON4Hm9XqgQA5qUIZU19bVg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/components": "7.2.3",
-        "@storybook/manager-api": "7.2.3",
-        "@storybook/preview-api": "7.2.3",
-        "@storybook/theming": "7.2.3"
+        "@storybook/client-logger": "7.3.1",
+        "@storybook/manager-api": "7.3.1"
       },
       "funding": {
         "type": "opencollective",
@@ -11320,49 +12180,61 @@
         }
       }
     },
-    "node_modules/@storybook/addon-viewport": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.2.3.tgz",
-      "integrity": "sha512-F9qJIgp7j98Ox/BOQRj/0jIUZ4FlX9rCTynQiHpMI6tRQJyj33pPOclO96/08tUTuuqNSK1zr/XydQIJe+dTPA==",
+    "node_modules/@storybook/api/node_modules/@storybook/channels": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.3.1.tgz",
+      "integrity": "sha512-DHdUdwfnMOSmtYv55Ixysklo/ZeD3TiTEQvyBaxhnMR3G0j7nb+TxqyfAn4fb7bntOPRNVB1Vz3nZXkkjrPNgw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/components": "7.2.3",
-        "@storybook/core-events": "7.2.3",
+        "@storybook/client-logger": "7.3.1",
+        "@storybook/core-events": "7.3.1",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.2.3",
-        "@storybook/preview-api": "7.2.3",
-        "@storybook/theming": "7.2.3",
-        "memoizerific": "^1.11.3",
-        "prop-types": "^15.7.2"
+        "qs": "^6.10.0",
+        "telejson": "^7.0.3",
+        "tiny-invariant": "^1.3.1"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/api/node_modules/@storybook/client-logger": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.3.1.tgz",
+      "integrity": "sha512-VfKi8C5Z1hquaP6xtVn9ngKcnXZjHNV6+RAqLbUJyAoGeO8fFaMblYgbY+tF7Xyf3bZKMLBo4QqtegTh2QjdAA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
       },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/addons": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.2.3.tgz",
-      "integrity": "sha512-l0RUwiXcA4NZawXB7+7SpPEUQ1ov4xjDLgqnURsC4IrzxpqhhzYyiXbNTe6vS3//xUhzd9B82f3UBSCsz3k+7Q==",
+    "node_modules/@storybook/api/node_modules/@storybook/manager-api": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.3.1.tgz",
+      "integrity": "sha512-jFH0EfWasdwHW8X5DUzTbH5mpdCZBHU7lIEUj6lVMBcBxbTniqBiG7mkwbW9VLocqEbBZimLCb/2RtTpK1Ue3Q==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@storybook/manager-api": "7.2.3",
-        "@storybook/preview-api": "7.2.3",
-        "@storybook/types": "7.2.3"
+        "@storybook/channels": "7.3.1",
+        "@storybook/client-logger": "7.3.1",
+        "@storybook/core-events": "7.3.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/router": "7.3.1",
+        "@storybook/theming": "7.3.1",
+        "@storybook/types": "7.3.1",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "semver": "^7.3.7",
+        "store2": "^2.14.2",
+        "telejson": "^7.0.3",
+        "ts-dedent": "^2.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -11373,15 +12245,16 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/api": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.2.3.tgz",
-      "integrity": "sha512-yoCP4zfvEBOpfHuhU65FVd4cqNvnzM3PmHXmTD4l/WaDvlkL1MrUq2Wtam0Uq3MPm33Mw54DHnfc4lNRg014jQ==",
+    "node_modules/@storybook/api/node_modules/@storybook/router": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.3.1.tgz",
+      "integrity": "sha512-KY+Mo0oF2xcRUDCXPJjAB5xy7d8Hi2dh8VqLahGa14ZHwhsZ/RxqE2bypwLXXkRpEiyOpfMbSsG73+1ml3fIUg==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@storybook/client-logger": "7.2.3",
-        "@storybook/manager-api": "7.2.3"
+        "@storybook/client-logger": "7.3.1",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0"
       },
       "funding": {
         "type": "opencollective",
@@ -11390,14 +12263,23 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/api/node_modules/@storybook/types": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.3.1.tgz",
+      "integrity": "sha512-QR714i/Stus/RYqJ8chTCfWNt3RY6/64xRXxaMLqkx75OIq5+rtsmes9I5iUqM4FuupvE7YdlZ5xKvxLYLYgJQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/channels": "7.3.1",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
       },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/blocks": {
@@ -11439,6 +12321,62 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@storybook/blocks/node_modules/@storybook/components": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
+      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.3",
+        "@storybook/types": "7.2.3",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/blocks/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/blocks/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/builder-manager": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.2.3.tgz",
@@ -11922,6 +12860,16 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/channels/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/cli": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.2.3.tgz",
@@ -12643,18 +13591,20 @@
       }
     },
     "node_modules/@storybook/components": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.3.tgz",
-      "integrity": "sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.3.1.tgz",
+      "integrity": "sha512-8dk3WutobHvjxweVzA9Vqrp564vWOTQaV38JSi84ME8wzOdl20Xne9LoeMnqPHXFhnVZdm/Gkosfv4tqkDy4aw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@radix-ui/react-select": "^1.2.2",
-        "@storybook/client-logger": "7.2.3",
+        "@radix-ui/react-toolbar": "^1.0.4",
+        "@storybook/client-logger": "7.3.1",
         "@storybook/csf": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/icons": "^1.1.0",
-        "@storybook/theming": "7.2.3",
-        "@storybook/types": "7.2.3",
+        "@storybook/icons": "^1.1.6",
+        "@storybook/theming": "7.3.1",
+        "@storybook/types": "7.3.1",
         "memoizerific": "^1.11.3",
         "use-resize-observer": "^9.1.0",
         "util-deprecate": "^1.0.2"
@@ -12668,6 +13618,56 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@storybook/components/node_modules/@storybook/channels": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.3.1.tgz",
+      "integrity": "sha512-DHdUdwfnMOSmtYv55Ixysklo/ZeD3TiTEQvyBaxhnMR3G0j7nb+TxqyfAn4fb7bntOPRNVB1Vz3nZXkkjrPNgw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.3.1",
+        "@storybook/core-events": "7.3.1",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.0.3",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/components/node_modules/@storybook/client-logger": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.3.1.tgz",
+      "integrity": "sha512-VfKi8C5Z1hquaP6xtVn9ngKcnXZjHNV6+RAqLbUJyAoGeO8fFaMblYgbY+tF7Xyf3bZKMLBo4QqtegTh2QjdAA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/components/node_modules/@storybook/types": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.3.1.tgz",
+      "integrity": "sha512-QR714i/Stus/RYqJ8chTCfWNt3RY6/64xRXxaMLqkx75OIq5+rtsmes9I5iUqM4FuupvE7YdlZ5xKvxLYLYgJQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/channels": "7.3.1",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/core-client": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.2.3.tgz",
@@ -13158,10 +14158,11 @@
       }
     },
     "node_modules/@storybook/core-events": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
-      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.3.1.tgz",
+      "integrity": "sha512-7Pkgwmj/9B7Z3NNSn2swnviBrg9L1VeYSFw6JJKxtQskt8QoY8LxAsPzVMlHjqRmO6sO7lHo9FgpzIFxdmFaAA==",
       "dev": true,
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -13221,6 +14222,16 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/core-server/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/core-server/node_modules/@types/node": {
       "version": "16.18.40",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
@@ -13384,6 +14395,36 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@storybook/manager-api/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/manager-api/node_modules/@storybook/theming": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
+      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.3",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/mdx2-csf": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-1.1.0.tgz",
@@ -13446,6 +14487,16 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/preview-api/node_modules/@storybook/core-events": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.3.tgz",
+      "integrity": "sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/react-dom-shim": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.2.3.tgz",
@@ -13500,13 +14551,14 @@
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.3.tgz",
-      "integrity": "sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.3.1.tgz",
+      "integrity": "sha512-1CF6bT8o8pZcd/ptl1q4CiTGY4oLV19tE8Wnhd/TO934fdMp4fUx1FF4pFL6an98lxVeZT0JQ4uvkuaTvHJFRQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.2.3",
+        "@storybook/client-logger": "7.3.1",
         "@storybook/global": "^5.0.0",
         "memoizerific": "^1.11.3"
       },
@@ -13519,6 +14571,20 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@storybook/theming/node_modules/@storybook/client-logger": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.3.1.tgz",
+      "integrity": "sha512-VfKi8C5Z1hquaP6xtVn9ngKcnXZjHNV6+RAqLbUJyAoGeO8fFaMblYgbY+tF7Xyf3bZKMLBo4QqtegTh2QjdAA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/types": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.2.3.tgz",
@@ -17650,9 +18716,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001520",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
-      "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==",
+      "version": "1.0.30001521",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001521.tgz",
+      "integrity": "sha512-fnx1grfpEOvDGH+V17eccmNjucGUnCbP6KL+l5KqBIerp26WK/+RQ7CIDE37KGJjaPyqWXXlFUyKiWmvdNNKmQ==",
       "dev": true,
       "funding": [
         {
@@ -20480,9 +21546,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.491",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.491.tgz",
-      "integrity": "sha512-ZzPqGKghdVzlQJ+qpfE+r6EB321zed7e5JsvHIlMM4zPFF8okXUkF5Of7h7F3l3cltPL0rG7YVmlp5Qro7RQLA==",
+      "version": "1.4.492",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.492.tgz",
+      "integrity": "sha512-36K9b/6skMVwAIEsC7GiQ8I8N3soCALVSHqWHzNDtGemAcI9Xu8hP02cywWM0A794rTHm0b0zHPeLJHtgFVamQ==",
       "dev": true
     },
     "node_modules/emittery": {
@@ -25611,9 +26677,9 @@
       }
     },
     "node_modules/jackspeak": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.2.3.tgz",
-      "integrity": "sha512-pF0kfjmg8DJLxDrizHoCZGUFz4P4czQ3HyfW4BU0ffebYkzAVlBywp5zaxW/TM+r0sGbmrQdi8EQQVTJFxnGsQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.0.tgz",
+      "integrity": "sha512-uKmsITSsF4rUWQHzqaRUuyAir3fZfW3f202Ee34lz/gZCi970CPZwyQXLGNgWJvvZbvFyzeyGq0+4fcG/mBKZg==",
       "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
diff --git a/packages/bee-q/src/components/select/bq-select.tsx b/packages/bee-q/src/components/select/bq-select.tsx
index bca222de9..17ff861d9 100644
--- a/packages/bee-q/src/components/select/bq-select.tsx
+++ b/packages/bee-q/src/components/select/bq-select.tsx
@@ -276,7 +276,7 @@ export class BqSelect {
           id={labelId}
           class={{ 'bq-select__label': true, hidden: !this.hasLabel }}
           htmlFor={this.name || this.fallbackInputId}
-          ref={(labelElem) => (this.labelElem = labelElem)}
+          ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}
           part="label"
         >
           <slot name="label" onSlotchange={this.handleLabelSlotChange} />
@@ -308,7 +308,7 @@ export class BqSelect {
             {/* Prefix */}
             <span
               class={{ 'bq-select__control--prefix': true, hidden: !this.hasPrefix }}
-              ref={(spanElem) => (this.prefixElem = spanElem)}
+              ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}
               part="prefix"
             >
               <slot name="prefix" onSlotchange={this.handlePrefixSlotChange} />
@@ -328,7 +328,7 @@ export class BqSelect {
               form={this.form}
               name={this.name}
               placeholder={this.placeholder}
-              ref={(inputElem) => (this.inputElem = inputElem)}
+              ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}
               readOnly={true}
               required={this.required}
               spellcheck={false}
@@ -360,7 +360,7 @@ export class BqSelect {
             {/* Suffix */}
             <span
               class={{ 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}
-              ref={(spanElem) => (this.suffixElem = spanElem)}
+              ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}
               part="suffix"
             >
               <slot name="suffix" onSlotchange={this.handleSuffixSlotChange}>
@@ -375,7 +375,7 @@ export class BqSelect {
         {/* Helper text */}
         <div
           class={{ [`bq-select__helper-text validation-${this.validationStatus}`]: true, hidden: !this.hasHelperText }}
-          ref={(divElem) => (this.helperTextElem = divElem)}
+          ref={(divElem: HTMLDivElement) => (this.helperTextElem = divElem)}
           part="helper-text"
         >
           <slot name="helper-text" onSlotchange={this.handleHelperTextSlotChange} />

From c2810595b579d8b2f7ac5f949dfc30f22eabdb20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Wed, 16 Aug 2023 14:51:48 +0300
Subject: [PATCH 23/23] chore(Sonarclcloud): add `.sonarcloud.properties`
 config file

We have an Automatic analysis setup for Sonarcloud, so we need this config file as well:
https://docs.sonarcloud.io/advanced-setup/analysis-parameters/#setting-configuration-in-a-file
---
 .sonarcloud.properties   | 13 +++++++++++++
 sonar-project.properties |  7 ++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 .sonarcloud.properties

diff --git a/.sonarcloud.properties b/.sonarcloud.properties
new file mode 100644
index 000000000..1adc5f222
--- /dev/null
+++ b/.sonarcloud.properties
@@ -0,0 +1,13 @@
+sonar.organization=endava
+sonar.projectKey=Endava_bee-q
+
+# Path to sources
+sonar.exclusions=config/**/*
+
+# Path to tests
+sonar.test.inclusions=**/*.spec.*
+sonar.testExecutionReportPaths=packages/bee-q/test-report.xml
+sonar.javascript.lcov.reportPaths=packages/bee-q/coverage/lcov.info
+
+# Exclusions for copy-paste detection
+sonar.cpd.exclusions=config/**/*,packages/bee-q/src/components/**/*,packages/bee-q/src/shared/**/__test__/**/*
diff --git a/sonar-project.properties b/sonar-project.properties
index 61339b2f0..1adc5f222 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -1,8 +1,13 @@
 sonar.organization=endava
 sonar.projectKey=Endava_bee-q
 
-sonar.cpd.exclusions=config/**/*,packages/bee-q/src/components/**/*,packages/bee-q/src/shared/**/__test__/**/*
+# Path to sources
 sonar.exclusions=config/**/*
+
+# Path to tests
 sonar.test.inclusions=**/*.spec.*
 sonar.testExecutionReportPaths=packages/bee-q/test-report.xml
 sonar.javascript.lcov.reportPaths=packages/bee-q/coverage/lcov.info
+
+# Exclusions for copy-paste detection
+sonar.cpd.exclusions=config/**/*,packages/bee-q/src/components/**/*,packages/bee-q/src/shared/**/__test__/**/*