@weni/unnnic-system 3.12.3-alpha.0 → 3.12.3-alpha.1

package/src/components/MultiSelect/MultiSelect.vue

@@ -1,297 +0,0 @@
-<template>
-  <div
-    :class="expand ? 'expand-multiselect' : 'normal-multiselect'"
-    tabindex="-1"
-  >
-    <span
-      v-if="label"
-      class="select-permission-label"
-      >{{ label }}</span
-    >
-    <div
-      class="select-permission"
-      tabindex="0"
-      @keypress="handleIsOpenKeyboard"
-      @click="active = !active"
-    >
-      <h6 class="title noselect">{{ inputTitle }}</h6>
-      <UnnnicIcon
-        :icon="active ? 'arrow-button-up-1' : 'arrow-button-down-1'"
-        size="sm"
-        scheme="neutral-dark"
-      />
-    </div>
-    <div
-      v-if="active"
-      v-on-click-outside="onClickOutside"
-      class="select-content"
-      tabindex="0"
-    >
-      <div>
-        <template
-          v-for="(group, indexGroup) in modelValue"
-          :key="`group-${indexGroup}`"
-        >
-          <h6
-            v-if="!hideGroupTitle"
-            :key="`title-${indexGroup}`"
-            class="title"
-          >
-            {{ group.title }}
-          </h6>
-          <section>
-            <template
-              v-for="(item, indexItem) in group.items"
-              :key="`item-${indexItem}`"
-            >
-              <div
-                v-if="hideRadio"
-                :key="indexItem + 'input'"
-                class="unnnic-radio-container unnnic-radio-container--sm"
-                style="cursor: pointer"
-                @click="change(indexGroup, indexItem)"
-              >
-                <strong>{{ item.title }}</strong>
-                <span>{{ item.description }}</span>
-              </div>
-              <UnnnicRadio
-                v-else
-                id=""
-                :key="'else' + indexItem + 'input'"
-                name=""
-                :modelValue="group.selected"
-                :value="indexItem"
-                size="sm"
-                class=""
-                @update:model-value="change(indexGroup, $event)"
-              >
-                <strong>{{ item.title }}</strong>
-                <span>{{ item.description }}</span>
-              </UnnnicRadio>
-            </template>
-          </section>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { vOnClickOutside } from '@vueuse/components';
-import UnnnicIcon from '../Icon.vue';
-import UnnnicRadio from '../Radio/Radio.vue';
-
-export default {
-  name: 'UnnnicMultiSelect',
-  components: {
-    UnnnicIcon,
-    UnnnicRadio,
-  },
-  directives: {
-    onClickOutside: vOnClickOutside,
-  },
-  props: {
-    isOpen: {
-      default: false,
-    },
-    expand: {
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    inputTitle: {
-      type: String,
-      default: 'Teste',
-    },
-    hideRadio: {
-      type: Boolean,
-      default: false,
-    },
-    hideGroupTitle: {
-      type: Boolean,
-      default: false,
-    },
-    unselectable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      active: false,
-    };
-  },
-
-  watch: {
-    isOpen() {
-      this.active = this.open;
-    },
-  },
-  methods: {
-    handleIsOpenKeyboard(event) {
-      if (
-        document.querySelector('.select-permission:focus-visible') &&
-        event.keyCode === 32
-      ) {
-        this.active = !this.active;
-      }
-    },
-
-    onClickOutside() {
-      if (!this.active) return;
-      this.active = false;
-    },
-
-    change(indexGroup, indexSelected) {
-      this.$emit(
-        'update:model-value',
-        this.modelValue.map((item, index) => {
-          if (index === indexGroup) {
-            let selected = indexSelected;
-            if (this.unselectable && item.selected === indexSelected) {
-              selected = -1;
-            }
-            return { ...item, selected };
-          }
-
-          return item;
-        }),
-      );
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.normal-multiselect,
-.expand-multiselect {
-  user-select: none;
-}
-
-.normal-multiselect {
-  position: relative;
-  max-width: 319px;
-
-  .select-content {
-    max-width: 319px;
-  }
-}
-
-.expand-multiselect {
-  position: relative;
-  width: 100%;
-
-  .select-content {
-    width: 100%;
-  }
-}
-
-.noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Old versions of Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-}
-
-.select-permission,
-.select-content > div {
-  padding: $unnnic-squish-xs;
-  background-color: $unnnic-color-neutral-snow;
-
-  border-radius: $unnnic-border-radius-sm;
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-}
-.select-permission {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-
-  cursor: pointer;
-  .icon {
-    margin-left: $unnnic-spacing-inline-xs;
-  }
-}
-.select-permission-label {
-  display: block;
-
-  color: $unnnic-color-neutral-cloudy;
-  margin-bottom: $unnnic-spacing-stack-xs;
-
-  font-family: $unnnic-font-family-secondary;
-  font-size: $unnnic-font-size-body-gt;
-  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-}
-
-.title {
-  font-family: $unnnic-font-family-secondary;
-  font-size: $unnnic-font-size-body-gt;
-  margin: 0;
-  font-weight: $unnnic-font-weight-regular;
-  color: $unnnic-color-neutral-dark;
-}
-
-.select-content {
-  position: absolute;
-  margin-top: $unnnic-spacing-stack-xs;
-
-  > div {
-    box-shadow: $unnnic-shadow-level-near;
-    .title {
-      margin-bottom: $unnnic-spacing-stack-sm;
-    }
-
-    & section {
-      display: flex;
-      flex-direction: column;
-
-      & + h6 {
-        margin-top: $unnnic-spacing-stack-sm;
-        padding-top: $unnnic-spacing-stack-sm;
-        border-top: $unnnic-border-width-thinner solid
-          $unnnic-color-neutral-darkest;
-      }
-
-      strong,
-      span {
-        display: block;
-        font-family: $unnnic-font-family-secondary;
-        font-size: $unnnic-font-size-body-gt;
-      }
-
-      strong {
-        font-weight: $unnnic-font-weight-regular;
-      }
-      span {
-        font-weight: $unnnic-font-weight-light;
-      }
-
-      .unnnic-radio-container {
-        & + .unnnic-radio-container {
-          margin-top: $unnnic-spacing-stack-sm;
-          padding-top: $unnnic-spacing-stack-sm;
-          border-top: $unnnic-border-width-thinner solid
-            $unnnic-color-neutral-lightest;
-        }
-
-        :deep(.unnnic-icon) {
-          margin-right: $unnnic-inline-xs;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/MultiSelectV2/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -1,121 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with default props 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with disabled state 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="" disabled="">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with multiple selected values 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="Option 1, Option 2">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with search enabled 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with selected values 1`] = `
-"<div data-v-de5c711a="" class="unnnic-multi-select">
-  <section data-v-5a3125ac="" data-v-de5c711a="" class="unnnic-popover">
-    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
-      <div data-v-d890ad85="" data-v-de5c711a="" class="unnnic-form md unnnic-multi-select__input">
-        <!--v-if-->
-        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="Option 1">
-          <!--v-if-->
-          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
-        </div>
-        <section data-v-d890ad85="" class="unnnic-form__hints-container">
-          <section data-v-d890ad85="" class="unnnic-form__message-container">
-            <!--v-if-->
-            <!--v-if-->
-          </section>
-          <!--v-if-->
-        </section>
-      </div>
-    </div>
-    <!--v-if-->
-  </section>
-</div>"
-`;

package/src/components/MultiSelectV2/__tests__/__snapshots__/MultiSelectOption.spec.js.snap

@@ -1,51 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with active state 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox" checked="">
-      <p data-v-18939422="" class="unnnic-checkbox__label" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with both active and disabled states 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox" disabled="" checked="">
-      <p data-v-18939422="" class="unnnic-checkbox__label unnnic-checkbox__label--disabled" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with default props 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox">
-      <p data-v-18939422="" class="unnnic-checkbox__label" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with disabled state 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox" disabled="">
-      <p data-v-18939422="" class="unnnic-checkbox__label unnnic-checkbox__label--disabled" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;
-
-exports[`MultiSelectOption.vue > snapshot testing > matches snapshot with focused state 1`] = `
-"<div data-v-72fb6e0d="" class="unnnic-multi-select-option">
-  <section data-v-18939422="" data-v-72fb6e0d="" class="unnnic-checkbox-wrapper"><label data-v-18939422=""><input data-v-18939422="" class="unnnic-checkbox" type="checkbox">
-      <p data-v-18939422="" class="unnnic-checkbox__label" data-testid="checkbox-text-right">Test Option</p>
-    </label>
-    <!--v-if-->
-  </section>
-</div>"
-`;

package/src/stories/MultiSelectV2.stories.js

@@ -1,158 +0,0 @@
-import UnnnicMultiSelect from '../components/MultiSelectV2/index.vue';
-
-const options = [
-  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
-  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
-  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
-  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
-  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
-  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
-  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
-  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
-  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
-  { label: 'Option 10', value: 'option10', disabled: true },
-];
-
-export default {
-  title: 'Form/MultiSelectV2',
-  component: UnnnicMultiSelect,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'MultiSelect is designed to solve common problems related to multiple option selection.',
-      },
-    },
-  },
-  argTypes: {
-    options: {
-      description:
-        'List of items to be displayed in the options. If an item has a `disabled` key set to `true`, that item will be disabled. By default, the component looks for the `label` and `value` keys to display and update the model, but these are not required if you wish to customize them using the `itemLabel` and `itemValue` props, respectively.',
-    },
-    placeholder: {
-      description: 'Text to be displayed in the placeholder.',
-    },
-    label: {
-      description: 'Text to be displayed in the label.',
-    },
-    modelValue: {
-      description:
-        'Model variable. Its type will always match a list of the return type of the key specified by `itemValue`, or the entire options object when the `returnObject` property is set to `true`.',
-    },
-    returnObject: {
-      description:
-        'Prop to indicate that the full option object should be returned in the v-model.',
-    },
-    itemLabel: {
-      description:
-        'Field of the option item that should be used to render the option label.',
-    },
-    itemValue: {
-      description:
-        'Field of the option item that should be used to return value to v-model.',
-    },
-    type: {
-      description: 'Select state type',
-    },
-    errors: {
-      description:
-        "Error message or messages. When it's an array, the messages will be separated by commas.",
-    },
-    message: {
-      description: 'Help or hint message.',
-    },
-    size: {
-      description: 'Select size',
-    },
-    optionsLines: {
-      description:
-        'Number of options to display at most; if exceeded, scrolling will be enabled.',
-    },
-    enableSearch: {
-      description:
-        'If true, enables a search field displayed inside the options popover. The `update:search` event is emitted on each input.',
-    },
-    search: {
-      description: 'Search value.',
-    },
-    locale: {
-      description: 'Locale for i18n translations.',
-    },
-    disabled: {
-      description: 'Disable the select.',
-    },
-  },
-  render: (args) => ({
-    components: { UnnnicMultiSelect },
-    setup() {
-      const handleSearch = (value) => {
-        args.search = value;
-      };
-      return { args, handleSearch };
-    },
-    data() {
-      return {
-        exampleValue: [],
-      };
-    },
-    template: `
-      <p>modelValue: {{ exampleValue }}</p>
-      <unnnic-multi-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
-    `,
-  }),
-};
-
-export const Default = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const ReturnObject = {
-  args: {
-    returnObject: true,
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const AlternativeValueKey = {
-  args: {
-    itemValue: 'altValue',
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const AlternativeValueLabel = {
-  args: {
-    itemLabel: 'altValue',
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const Disabled = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-    disabled: true,
-  },
-};
-
-export const WithSearch = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-    enableSearch: true,
-    search: '',
-  },
-};