<commit_before><template>
  <div data-backstop="selects">
    <cdr-text
      tag="h2"
      modifier="heading-400 heading-500@md heading-500@lg"
      space="cdr-my-space-two-x"
    >
      Selects
    </cdr-text>
    <hr class="icon-hr">

    <!-- Default Example -->
    <cdr-select
      label="Default"
      v-model="selectedA"
      prompt="Choose one"
      space="cdr-my-space-two-x"
    >
      <option value="1">
        1
      </option>
      <option value="2">
        2
      </option>
      <option value="3">
        3
      </option>
      <option value="4">
        4
      </option>
    </cdr-select>
    <cdr-text>Selected Value: {{ selectedA }}</cdr-text>
    <hr class="icon-hr">

    <!-- Disabled Select -->
    <cdr-select
      label="Disabled select"
      v-model="selectedDisabled"
      disabled
      space="cdr-my-space-two-x"
    >
      <option value="1">
        1
      </option>
    </cdr-select>
    <cdr-text>Selected: {{ selectedDisabled }}</cdr-text>
    <hr class="icon-hr">

    <!-- Required with Prompt Example -->
    <cdr-select
      label="Required with Prompt"
      v-model="selectedB"
      prompt="Choose one"
      required
      space="cdr-my-space-two-x"
    >
      <option value="1">
        1
      </option>
      <option value="2">
        2
      </option>
      <option value="3">
        3
      </option>
      <option value="4">
        4
      </option>
    </cdr-select>
    <cdr-text>Selected Value: {{ selectedB }}</cdr-text>
    <hr class="icon-hr">

    <!-- Hidden Label Example -->
    <cdr-select
      label="Hidden label text"
      hide-label
      v-model="selectedC"
      prompt="Hidden label"
      space="cdr-my-space-two-x"
    >
      <option value="1">
        1
      </option>
      <option value="2">
        2
      </option>
      <option value="3">
        3
      </option>
      <option value="4">
        4
      </option>
    </cdr-select>
    <cdr-text>Selected Value: {{ selectedC }}</cdr-text>
    <hr class="icon-hr">

    <!-- No Prompt Example -->
    <cdr-select
      label="No Prompt"
      space="cdr-my-space-two-x"
      v-model="selectedD"
    >
      <option value="1">
        1
      </option>
      <option value="2">
        2
      </option>
      <option value="3">
        3
      </option>
      <option value="REALLY REALLY LONG VALUE REALLY REALLY LONG VALUE">
        REALLY REALLY LONG VALUE REALLY REALLY LONG VALUE
      </option>
    </cdr-select>
    <cdr-text>Selected Value: {{ selectedD }}</cdr-text>
    <hr class="icon-hr">

    <!-- Dynamic Data Example -->
    <cdr-select
      label="Dynamic"
      v-model="dynamic"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    />
    <cdr-text>Selected: {{ dynamic }}</cdr-text>
    <hr class="icon-hr">

    <!-- Helper Text Example -->
    <cdr-select
      label="Example with Helper Text"
      v-model="helperTextModel"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    >
      <template slot="helper-text">
        This is helper text.
      </template>
    </cdr-select>
    <cdr-text>Selected Value: {{ helperTextModel }}</cdr-text>
    <hr class="icon-hr">

    <!-- Info Link Example -->
    <cdr-select
      label="Example with Info Link"
      v-model="infoLinkModel"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    >
      <template slot="info">
        <cdr-link href="#/selects">
          Info Link/Icon
        </cdr-link>
      </template>
    </cdr-select>
    <cdr-text>Selected: {{ infoLinkModel }}</cdr-text>
    <hr class="icon-hr">

    <!-- Info Icon Example -->
    <cdr-select
      label="Example with Info Icon"
      v-model="infoIconModel"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    >
      <template slot="info">
        <icon-information-fill />
      </template>
    </cdr-select>
    <cdr-text>Selected Value: {{ infoIconModel }}</cdr-text>
    <hr class="icon-hr">

    <!-- Large Select Example -->
    <cdr-select
      label="Size = Large"
      v-model="dynamic"
      size="large"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    />
    <cdr-text>Selected Value: {{ dynamic }}</cdr-text>
    <hr class="icon-hr">


    <cdr-text class="cdr-my-space-two-x">
      UNMODIFIED SELECT ELEMENT FOR COMPARISON
    </cdr-text>
    <select
      class="cdr-mb-space-four-x standard-select"
    >
      <option
        value="1"
      >
        1
      </option>
      <option value="2">
        2
      </option>
      <option
        value="3"
      >
        3
      </option>
      <option value="4">
        4
      </option>
    </select>
    <hr class="icon-hr">

    <!-- DEPRECATED MULTIPLE SELECT EXAMPLES -->
    <cdr-text class="cdr-my-space-two-x">
      DEPRECATED Multiple Select
    </cdr-text><commit_msg>refactor(select): removed non cedar select element in kitchen sink<commit_after><template>
  <div data-backstop="selects">
    <cdr-text
      tag="h2"
      modifier="heading-400 heading-500@md heading-500@lg"
      space="cdr-my-space-two-x"
    >
      Selects
    </cdr-text>
    <hr class="icon-hr">

    <!-- Default Example -->
    <cdr-select
      label="Default"
      v-model="selectedA"
      prompt="Choose one"
      space="cdr-my-space-two-x"
    >
      <option value="1">
        1
      </option>
      <option value="2">
        2
      </option>
      <option value="3">
        3
      </option>
      <option value="4">
        4
      </option>
    </cdr-select>
    <cdr-text>Selected Value: {{ selectedA }}</cdr-text>
    <hr class="icon-hr">

    <!-- Disabled Select -->
    <cdr-select
      label="Disabled select"
      v-model="selectedDisabled"
      disabled
      space="cdr-my-space-two-x"
    >
      <option value="1">
        1
      </option>
    </cdr-select>
    <cdr-text>Selected: {{ selectedDisabled }}</cdr-text>
    <hr class="icon-hr">

    <!-- Required with Prompt Example -->
    <cdr-select
      label="Required with Prompt"
      v-model="selectedB"
      prompt="Choose one"
      required
      space="cdr-my-space-two-x"
    >
      <option value="1">
        1
      </option>
      <option value="2">
        2
      </option>
      <option value="3">
        3
      </option>
      <option value="4">
        4
      </option>
    </cdr-select>
    <cdr-text>Selected Value: {{ selectedB }}</cdr-text>
    <hr class="icon-hr">

    <!-- Hidden Label Example -->
    <cdr-select
      label="Hidden label text"
      hide-label
      v-model="selectedC"
      prompt="Hidden label"
      space="cdr-my-space-two-x"
    >
      <option value="1">
        1
      </option>
      <option value="2">
        2
      </option>
      <option value="3">
        3
      </option>
      <option value="4">
        4
      </option>
    </cdr-select>
    <cdr-text>Selected Value: {{ selectedC }}</cdr-text>
    <hr class="icon-hr">

    <!-- No Prompt Example -->
    <cdr-select
      label="No Prompt"
      space="cdr-my-space-two-x"
      v-model="selectedD"
    >
      <option value="1">
        1
      </option>
      <option value="2">
        2
      </option>
      <option value="3">
        3
      </option>
      <option value="REALLY REALLY LONG VALUE REALLY REALLY LONG VALUE">
        REALLY REALLY LONG VALUE REALLY REALLY LONG VALUE
      </option>
    </cdr-select>
    <cdr-text>Selected Value: {{ selectedD }}</cdr-text>
    <hr class="icon-hr">

    <!-- Dynamic Data Example -->
    <cdr-select
      label="Dynamic"
      v-model="dynamic"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    />
    <cdr-text>Selected: {{ dynamic }}</cdr-text>
    <hr class="icon-hr">

    <!-- Helper Text Example -->
    <cdr-select
      label="Example with Helper Text"
      v-model="helperTextModel"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    >
      <template slot="helper-text">
        This is helper text.
      </template>
    </cdr-select>
    <cdr-text>Selected Value: {{ helperTextModel }}</cdr-text>
    <hr class="icon-hr">

    <!-- Info Link Example -->
    <cdr-select
      label="Example with Info Link"
      v-model="infoLinkModel"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    >
      <template slot="info">
        <cdr-link href="#/selects">
          Info Link/Icon
        </cdr-link>
      </template>
    </cdr-select>
    <cdr-text>Selected: {{ infoLinkModel }}</cdr-text>
    <hr class="icon-hr">

    <!-- Info Icon Example -->
    <cdr-select
      label="Example with Info Icon"
      v-model="infoIconModel"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    >
      <template slot="info">
        <icon-information-fill />
      </template>
    </cdr-select>
    <cdr-text>Selected Value: {{ infoIconModel }}</cdr-text>
    <hr class="icon-hr">

    <!-- Large Select Example -->
    <cdr-select
      label="Size = Large"
      v-model="dynamic"
      size="large"
      :options="dynamicData"
      space="cdr-my-space-two-x"
      prompt="Choose One"
    />
    <cdr-text>Selected Value: {{ dynamic }}</cdr-text>
    <hr class="icon-hr">

    <!-- DEPRECATED MULTIPLE SELECT EXAMPLES -->
    <cdr-text class="cdr-my-space-two-x">
      DEPRECATED Multiple Select
    </cdr-text>
{'fraction_non_alphanumeric': 0.16408961817608078, 'fraction_numerical': 0.009677080046281688, 'mean_word_length': 1.8621312462372066, 'pattern_counts': {'":': 0, '<': 234, '<?xml version=': 0, '>': 234, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5205760', 'n_tokens_mistral': 3269, 'n_tokens_neox': 3174, 'n_words': 635}