From 6602613fbdeb168be5ac6316f822752236856098 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sat, 18 Jan 2025 18:06:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=83=97=E3=83=AA=E3=82=BB=E3=83=83?=
 =?UTF-8?q?=E3=83=88=E7=AE=A1=E7=90=86=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD?=
 =?UTF-8?q?=E3=82=B0=E3=82=92=E7=B7=A8=E9=9B=86=E5=8F=AF=E8=83=BD=E3=81=AB?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=20(#2452)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
Co-authored-by: Hiroshiba Kazuyuki <kazuyuki_hiroshiba@dwango.co.jp>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 src/components/Base/BaseListItem.vue          |   1 +
 src/components/Base/BaseSlider.vue            |  56 +++-
 src/components/Base/BaseTextField.vue         |   7 +-
 src/components/Dialog/PresetManageDialog.vue  | 268 ++++++++++++------
 src/components/Talk/v2/ParameterSlider.vue    |  89 ++++++
 src/components/Talk/v2/README.md              |   4 +
 src/helpers/timer.ts                          |  15 +
 ...eslider--default-dark-storybook-win32.png" | Bin 685 -> 600 bytes
 ...slider--default-light-storybook-win32.png" | Bin 680 -> 582 bytes
 ...slider--disabled-dark-storybook-win32.png" | Bin 638 -> 558 bytes
 ...lider--disabled-light-storybook-win32.png" | Bin 629 -> 548 bytes
 ...field--has-error-dark-storybook-win32.png" | Bin 2314 -> 2312 bytes
 ...ield--has-error-light-storybook-win32.png" | Bin 2224 -> 2262 bytes
 13 files changed, 334 insertions(+), 106 deletions(-)
 create mode 100644 src/components/Talk/v2/ParameterSlider.vue
 create mode 100644 src/components/Talk/v2/README.md
 create mode 100644 src/helpers/timer.ts

diff --git a/src/components/Base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
index e81e50bf39..0371091ed3 100644
--- a/src/components/Base/BaseListItem.vue
+++ b/src/components/Base/BaseListItem.vue
@@ -36,6 +36,7 @@ defineEmits<{
   border: none;
   padding: vars.$padding-1 vars.$padding-2;
   border-radius: vars.$radius-1;
+  text-align: left;
 
   &:not(.selected):hover {
     background-color: colors.$clear-hovered;
diff --git a/src/components/Base/BaseSlider.vue b/src/components/Base/BaseSlider.vue
index 1c84e7fff1..ab19d9e53a 100644
--- a/src/components/Base/BaseSlider.vue
+++ b/src/components/Base/BaseSlider.vue
@@ -5,7 +5,7 @@
     :max
     :step
     :disabled
-    :modelValue="[model]"
+    :modelValue="[modelValue]"
     @update:modelValue="
       (value) => {
         if (value == undefined) {
@@ -14,6 +14,8 @@
         $emit('update:modelValue', value[0]);
       }
     "
+    @wheel="onWheel"
+    @valueCommit="$emit('valueCommit', $event[0])"
   >
     <SliderTrack class="SliderTrack">
       <SliderRange class="SliderRange" />
@@ -24,20 +26,52 @@
 
 <script setup lang="ts">
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "radix-vue";
+import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
+import { debounce } from "@/helpers/timer";
 
-defineProps<{
-  min?: number;
-  max?: number;
-  step?: number;
-  disabled?: boolean;
-  modelValue: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    min?: number;
+    max?: number;
+    step?: number;
+    scrollStep?: number;
+    disabled?: boolean;
+    modelValue: number;
+  }>(),
+  {
+    min: 0,
+    max: 100,
+    step: 1,
+    scrollStep: undefined,
+  },
+);
 
-defineEmits<{
+const emit = defineEmits<{
   "update:modelValue": [value: number];
+  valueCommit: [value: number];
 }>();
 
-const model = defineModel<number>({ required: true });
+const debounceEmitValueCommit = debounce(
+  (value: number) => emit("valueCommit", value),
+  300,
+);
+
+const onWheel = (event: WheelEvent) => {
+  if (props.disabled) return;
+  event.preventDefault();
+
+  const delta = event.deltaY > 0 ? -1 : 1;
+  const scrollStep =
+    props.scrollStep && !isOnCommandOrCtrlKeyDown(event)
+      ? props.scrollStep
+      : props.step;
+
+  const value = props.modelValue + scrollStep * delta;
+  const clampedValue = Math.min(props.max, Math.max(props.min, value));
+
+  emit("update:modelValue", clampedValue);
+  debounceEmitValueCommit(clampedValue);
+};
 </script>
 
 <style lang="scss">
@@ -49,7 +83,7 @@ const model = defineModel<number>({ required: true });
   position: relative;
   display: flex;
   align-items: center;
-  height: vars.$size-control;
+  height: vars.$size-indicator;
   cursor: grab;
 
   &:active {
diff --git a/src/components/Base/BaseTextField.vue b/src/components/Base/BaseTextField.vue
index 4d1842d524..d387313cfc 100644
--- a/src/components/Base/BaseTextField.vue
+++ b/src/components/Base/BaseTextField.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="wrapper">
     <input
+      :id
       v-model="model"
       type="text"
       class="input"
@@ -8,6 +9,7 @@
       :placeholder
       :readonly
       :disabled
+      @change="(payload) => $emit('change', payload)"
       @click="(payload) => $emit('click', payload)"
     />
     <div v-if="hasError" class="error-label">
@@ -22,9 +24,11 @@ defineProps<{
   hasError?: boolean;
   readonly?: boolean;
   disabled?: boolean;
+  id?: string;
 }>();
 
 defineEmits<{
+  change: [payload: Event];
   click: [payload: MouseEvent];
 }>();
 
@@ -66,7 +70,8 @@ const model = defineModel<string>();
 }
 
 .error {
-  border: 2px solid colors.$display-warning;
+  @include mixin.on-focus;
+  outline-color: colors.$display-warning !important;
 }
 
 .error-label {
diff --git a/src/components/Dialog/PresetManageDialog.vue b/src/components/Dialog/PresetManageDialog.vue
index 0c5da3ee16..d55abe77d7 100644
--- a/src/components/Dialog/PresetManageDialog.vue
+++ b/src/components/Dialog/PresetManageDialog.vue
@@ -7,7 +7,7 @@
     class="setting-dialog transparent-backdrop"
     @update:modelValue="updateOpenDialog"
   >
-    <QLayout container view="hHh Lpr lff" class="bg-background">
+    <QLayout container view="hHh Lpr lff">
       <QHeader class="q-py-sm">
         <QToolbar>
           <QToolbarTitle class="text-display">プリセットの管理</QToolbarTitle>
@@ -37,11 +37,13 @@
               >
                 <template #item="{ element: item }">
                   <BaseListItem
-                    :selected="selectedPresetKey === item.key"
-                    @click="selectedPresetKey = item.key"
+                    :selected="selected?.key === item.key"
+                    @click="selectPreset(item.key)"
                   >
                     <div class="listitem-content">
-                      {{ item.name }}
+                      <span class="listitem-name">
+                        {{ item.name }}
+                      </span>
                       <div class="listitem-icon">
                         <BaseIconButton
                           icon="delete_outline"
@@ -56,87 +58,90 @@
             </template>
             <div class="detail">
               <BaseScrollArea>
-                <div v-if="selectedPreset" class="inner">
+                <div v-if="selected" class="inner">
                   <div class="parameter-list">
-                    <h2 class="preset-name">{{ selectedPreset.name }}</h2>
+                    <h2 class="preset-name">
+                      {{ selected.preset.name }}
+                    </h2>
+                    <div class="preset-field">
+                      <label for="preset-name">プリセット名</label>
+                      <BaseTextField
+                        id="preset-name"
+                        :modelValue="selected.preset.name"
+                        :hasError="!selected.preset.name"
+                        @change="changePresetName"
+                      />
+                    </div>
                     <template
                       v-for="(value, sliderKey) in SLIDER_PARAMETERS"
                       :key="sliderKey"
                     >
-                      <div
+                      <ParameterSlider
                         v-if="sliderKey in parameterLabels"
-                        class="parameter"
-                      >
-                        <div class="parameter-header">
-                          <span>
-                            {{ parameterLabels[sliderKey as ParameterType] }}
-                          </span>
-                          <span>
-                            {{
-                              selectedPreset[
-                                sliderKey as ParameterType
-                              ].toFixed(2)
-                            }}
-                          </span>
-                        </div>
-                        <!-- NOTE: プルリクエスト分割のため、まずは動かないスライダーが実装されている。変更機能も実装予定。 -->
-                        <BaseSlider
-                          :min="value.min()"
-                          :max="value.max()"
-                          :step="value.step()"
-                          :modelValue="
-                            selectedPreset[sliderKey as ParameterType]
+                        v-model="selected.preset[sliderKey as ParameterType]"
+                        :sliderKey
+                        :min="value.min()"
+                        :max="value.max()"
+                        :step="value.step()"
+                        :scrollStep="value.scrollStep()"
+                        :label="parameterLabels[sliderKey as ParameterType]"
+                      />
+                    </template>
+                    <!-- NOTE: モーフィング無効時にキャラ選択解除するといきなり非表示になってしまうが、稀なケースなため無対策 -->
+                    <template
+                      v-if="shouldShowMorphing || selected.preset.morphingInfo"
+                    >
+                      <h3 class="parameter-headline">モーフィング</h3>
+                      <div class="mophing-style">
+                        <CharacterButton
+                          :selectedVoice="
+                            selected.preset.morphingInfo
+                              ? {
+                                  engineId:
+                                    selected.preset.morphingInfo.targetEngineId,
+                                  speakerId:
+                                    selected.preset.morphingInfo
+                                      .targetSpeakerId,
+                                  styleId:
+                                    selected.preset.morphingInfo.targetStyleId,
+                                }
+                              : undefined
                           "
+                          :characterInfos="morphingTargetCharacters"
+                          :showEngineInfo="morphingTargetEngines.length >= 2"
+                          :emptiable="true"
+                          :uiLocked="false"
+                          @update:selectedVoice="handleSelectedVoiceUpdate"
                         />
-                      </div>
-                    </template>
-                  </div>
-                  <div
-                    v-if="selectedPreset.morphingInfo"
-                    class="parameter-list"
-                  >
-                    <h3 class="parameter-headline">モーフィング</h3>
-                    <div class="mophing-style">
-                      <CharacterButton
-                        v-if="morphingTargetCharacterInfo"
-                        :selectedVoice="{
-                          engineId: selectedPreset.morphingInfo.targetEngineId,
-                          speakerId:
-                            selectedPreset.morphingInfo.targetSpeakerId,
-                          styleId: selectedPreset.morphingInfo.targetStyleId,
-                        }"
-                        :characterInfos="[morphingTargetCharacterInfo]"
-                        :showEngineInfo="morphingTargetEngines.length >= 2"
-                        :emptiable="true"
-                        :uiLocked="false"
-                      />
-                      <span v-if="morphingTargetCharacterInfo">
-                        {{ morphingTargetCharacterInfo.metas.speakerName }}
-                      </span>
-                      <span
-                        v-if="
-                          morphingTargetCharacterInfo &&
-                          morphingTargetCharacterInfo.metas.styles.length >= 2
-                        "
-                      >
-                        （{{ morphingTargetStyleInfo?.styleName }}）
-                      </span>
-                    </div>
-                    <div class="parameter">
-                      <div class="parameter-header">
-                        <span>割合</span>
                         <span>
-                          {{ selectedPreset.morphingInfo.rate.toFixed(2) }}
+                          {{
+                            morphingTargetCharacterInfo
+                              ? morphingTargetCharacterInfo.metas.speakerName
+                              : "未設定"
+                          }}
+                        </span>
+                        <span
+                          v-if="
+                            morphingTargetCharacterInfo &&
+                            morphingTargetCharacterInfo.metas.styles.length >= 2
+                          "
+                        >
+                          （{{ morphingTargetStyleInfo?.styleName }}）
                         </span>
                       </div>
-                      <!-- NOTE: プルリクエスト分割のため、まずは動かないスライダーが実装されている。変更機能も実装予定。 -->
-                      <BaseSlider
+                      <ParameterSlider
+                        v-if="selected.preset.morphingInfo"
+                        v-model="selected.preset.morphingInfo.rate"
+                        sliderKey="morphingRate"
+                        label="割合"
                         :min="SLIDER_PARAMETERS.morphingRate.min()"
                         :max="SLIDER_PARAMETERS.morphingRate.max()"
                         :step="SLIDER_PARAMETERS.morphingRate.step()"
-                        :modelValue="selectedPreset.morphingInfo.rate"
+                        :scrollStep="
+                          SLIDER_PARAMETERS.morphingRate.scrollStep()
+                        "
                       />
-                    </div>
+                    </template>
                   </div>
                 </div>
               </BaseScrollArea>
@@ -149,18 +154,28 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import Draggable from "vuedraggable";
 import { useStore } from "@/store";
 import BaseListItem from "@/components/Base/BaseListItem.vue";
 import BaseNavigationView from "@/components/Base/BaseNavigationView.vue";
 import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import BaseIconButton from "@/components/Base/BaseIconButton.vue";
-import BaseSlider from "@/components/Base/BaseSlider.vue";
+import BaseTextField from "@/components/Base/BaseTextField.vue";
 import CharacterButton from "@/components/CharacterButton.vue";
+import ParameterSlider from "@/components/Talk/v2/ParameterSlider.vue";
 import { useDefaultPreset } from "@/composables/useDefaultPreset";
-import { Preset, PresetKey, PresetSliderKey } from "@/type/preload";
+import {
+  CharacterInfo,
+  Preset,
+  PresetKey,
+  PresetSliderKey,
+  Voice,
+} from "@/type/preload";
 import { SLIDER_PARAMETERS } from "@/store/utility";
+import { cloneWithUnwrapProxy } from "@/helpers/cloneWithUnwrapProxy";
+import { debounce } from "@/helpers/timer";
+import { UnreachableError } from "@/type/utility";
 
 const props = defineProps<{
   openDialog: boolean;
@@ -202,15 +217,6 @@ const previewPresetList = computed(() =>
     : presetList.value,
 );
 
-const morphingTargetEngines = store.getters.MORPHING_SUPPORTED_ENGINES;
-
-const selectedPresetKey = ref();
-const selectedPreset = computed(() => {
-  return previewPresetList.value.find(
-    (preset) => preset.key === selectedPresetKey.value,
-  );
-});
-
 type ParameterType = Exclude<PresetSliderKey, "morphingRate">;
 const parameterLabels: Record<ParameterType, string> = {
   speedScale: "話速",
@@ -222,6 +228,41 @@ const parameterLabels: Record<ParameterType, string> = {
   postPhonemeLength: "終了無音",
 };
 
+const selected = ref<undefined | { key: PresetKey; preset: Preset }>();
+
+const selectPreset = (key: PresetKey | undefined) => {
+  if (key == undefined) {
+    selected.value = undefined;
+    return;
+  }
+  selected.value = {
+    key,
+    preset: cloneWithUnwrapProxy(presetItems.value[key]),
+  };
+};
+
+watch(
+  () => selected.value,
+  debounce((value) => {
+    if (value == undefined) {
+      throw new UnreachableError();
+    }
+    if (value.preset.name == "") return;
+
+    void store.actions.UPDATE_PRESET({
+      presetData: value.preset,
+      presetKey: value.key,
+    });
+  }, 300),
+  { deep: true },
+);
+
+const changePresetName = (event: Event) => {
+  if (event.target instanceof HTMLInputElement && selected.value) {
+    selected.value.preset.name = event.target.value;
+  }
+};
+
 const reorderPreset = (featurePresetList: (Preset & { key: PresetKey })[]) => {
   const newPresetKeys = featurePresetList.map((item) => item.key);
   previewPresetKeys.value = newPresetKeys;
@@ -251,19 +292,32 @@ const deletePreset = async (key: PresetKey) => {
   }
 };
 
+const shouldShowMorphing = computed(
+  () => store.state.experimentalSetting.enableMorphing,
+);
+
+const morphingTargetEngines = store.getters.MORPHING_SUPPORTED_ENGINES;
+
+const morphingTargetCharacters = computed<CharacterInfo[]>(() => {
+  const allCharacterInfos = store.getters.USER_ORDERED_CHARACTER_INFOS("talk");
+  if (allCharacterInfos == undefined)
+    throw new Error("USER_ORDERED_CHARACTER_INFOS == undefined");
+
+  return allCharacterInfos;
+});
+
 const morphingTargetCharacterInfo = computed(() =>
   store.getters
     .USER_ORDERED_CHARACTER_INFOS("talk")
     ?.find(
       (character) =>
         character.metas.speakerUuid ===
-        selectedPreset.value?.morphingInfo?.targetSpeakerId,
+        selected.value?.preset.morphingInfo?.targetSpeakerId,
     ),
 );
 
 const morphingTargetStyleInfo = computed(() => {
-  const morphingInfo = selectedPreset.value?.morphingInfo;
-
+  const morphingInfo = selected.value?.preset.morphingInfo;
   if (!morphingInfo) return;
 
   return morphingTargetCharacterInfo.value?.metas.styles.find(
@@ -272,10 +326,29 @@ const morphingTargetStyleInfo = computed(() => {
       style.styleId === morphingInfo.targetStyleId,
   );
 });
+
+const handleSelectedVoiceUpdate = (event: Voice | undefined) => {
+  if (selected.value == undefined) {
+    throw new Error("selectedPreset is undefined");
+  }
+
+  if (event == undefined) {
+    selected.value.preset.morphingInfo = undefined;
+    return;
+  }
+
+  selected.value.preset.morphingInfo = {
+    targetEngineId: event.engineId,
+    targetSpeakerId: event.speakerId,
+    targetStyleId: event.styleId,
+    rate: selected.value.preset.morphingInfo?.rate ?? 0.5,
+  };
+};
 </script>
 
 <style scoped lang="scss">
 @use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
 @use "@/styles/v2/mixin" as mixin;
 
 .q-layout-container > :deep(.absolute-full) {
@@ -300,7 +373,14 @@ const morphingTargetStyleInfo = computed(() => {
   justify-content: space-between;
   align-items: center;
   gap: vars.$gap-1;
-  width: 100%;
+  width: 320px;
+}
+
+.listitem-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  flex: 1;
 }
 
 .listitem-icon {
@@ -317,15 +397,22 @@ const morphingTargetStyleInfo = computed(() => {
 }
 
 .inner {
-  min-height: 100%;
   display: flex;
   flex-direction: column;
   padding: vars.$padding-2;
   gap: vars.$gap-2;
+  margin-inline: auto;
+  max-width: 480px;
 }
 
 .preset-name {
   @include mixin.headline-1;
+  word-break: break-all;
+}
+
+.preset-field {
+  display: flex;
+  flex-direction: column;
 }
 
 .parameter-headline {
@@ -333,19 +420,12 @@ const morphingTargetStyleInfo = computed(() => {
 }
 
 .parameter-list {
-  margin-inline: auto;
-  max-width: 480px;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: vars.$gap-2;
 }
 
-.parameter-header {
-  display: flex;
-  justify-content: space-between;
-}
-
 .mophing-style {
   display: flex;
   align-items: center;
diff --git a/src/components/Talk/v2/ParameterSlider.vue b/src/components/Talk/v2/ParameterSlider.vue
new file mode 100644
index 0000000000..7e3df1c898
--- /dev/null
+++ b/src/components/Talk/v2/ParameterSlider.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div class="parameter-header">
+      <label :for="`parameter-${sliderKey}`" class="parameter-label">
+        {{ label }}
+      </label>
+      <input
+        :id="`parameter-${sliderKey}`"
+        :value="innerValueFixed"
+        class="parameter-input"
+        type="text"
+        @change="handleInputChange"
+      />
+    </div>
+    <BaseSlider
+      v-model="innerValue"
+      :min
+      :max
+      :step
+      :scrollStep
+      @valueCommit="$emit('update:modelValue', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from "vue";
+import BaseSlider from "@/components/Base/BaseSlider.vue";
+
+const props = defineProps<{
+  sliderKey: string;
+  min: number;
+  max: number;
+  step: number;
+  scrollStep: number;
+  label: string;
+  modelValue: number;
+}>();
+
+const innerValue = ref(props.modelValue);
+watchEffect(() => {
+  innerValue.value = props.modelValue;
+});
+const innerValueFixed = computed(() => innerValue.value.toFixed(2));
+
+const emit = defineEmits<{
+  /** 値が確定したタイミングで実行される */
+  "update:modelValue": [value: number];
+}>();
+
+const handleInputChange = (event: Event) => {
+  if (!(event.target instanceof HTMLInputElement)) {
+    throw new Error("Event target is not an HTMLInputElement");
+  }
+
+  const rawValue = Number(event.target.value);
+  if (Number.isNaN(rawValue)) {
+    event.target.value = innerValueFixed.value;
+    return;
+  }
+
+  const value = Math.min(Math.max(rawValue, props.min), props.max);
+  emit("update:modelValue", value);
+};
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.parameter-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.parameter-input {
+  border: none;
+  width: 64px;
+  background-color: transparent;
+  text-align: right;
+  border-radius: vars.$radius-1;
+  color: colors.$display;
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+</style>
diff --git a/src/components/Talk/v2/README.md b/src/components/Talk/v2/README.md
new file mode 100644
index 0000000000..4abb5ea163
--- /dev/null
+++ b/src/components/Talk/v2/README.md
@@ -0,0 +1,4 @@
+# このディレクトリは
+
+[トークエディタのリデザインプロジェクト](https://github.com/VOICEVOX/voicevox_project/issues/40)移行のための中間ファイルを配置するディレクトリです。  
+デザイン的に合わないなどの問題がなければ、このディレクトリ内のファイルを使用しても問題ありません。
diff --git a/src/helpers/timer.ts b/src/helpers/timer.ts
new file mode 100644
index 0000000000..969dc4a21a
--- /dev/null
+++ b/src/helpers/timer.ts
@@ -0,0 +1,15 @@
+/**
+ * debounce関数を返す。
+ * 最後に呼び出されてから指定した時間が経過した後にコールバックが実行される。
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function debounce<T extends (...args: any[]) => unknown>(
+  callback: T,
+  delay: number,
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback(...args), delay);
+  };
+}
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseslider--default-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseslider--default-dark-storybook-win32.png"
index df4015cb8dc2279d6a75274737ce4c9cf2c430fc..26b8a6869a89e76d5788cc6b68717e34444bcac4 100644
GIT binary patch
literal 600
zcmeAS@N?(olHy`uVBq!ia0y~yV0i#!OK>m&$vfeq4nT^rILO_JVcj{ImkbO{LY^*;
zAr*7p-f{F6Nn|+waAsj)+2sjkJ}X~LkxXgiXk<UAFCZcNOXK23{!8XB9w}Ot2-{R>
zGF^6ly3pzL)~PJh??#r~Unj-7u|2JA-g67)!|#8k-<w&HR%XV;&{mZE@Y$p0r6*qp
z2a44GzjP}i_I~B(g)cN1R;-$sHcj*{1H)94;`i4MAMZbObcyh;$}9UX$jpw9%c#9&
ze<xdfE*rztDI&5!MIufSF_BiM`gg1Eb(G*aw4nNu^{IaG@M%sQuGbkIR3%q17%X{{
zHEsU0^z~2FE6Z{>?NDM^Va6=V&=w+}|L4;t6PJZ{VfyPh7*?HiU}a!fAi@&@3<s}+
zSU6eRr@udUcYc0Kvg>pPhp9Y%?De}!)ARKD9@o!iX1F@-`|q`X{~oadnG*5x#fzsa
zHQj3%85lHLQ(hmvowqx<gbir&|Mh$B+h=Uex}7~6h+K~|I2>&em}gV}>vr_}ZQE*^
zxfq-aj)*fbGz1w0fHboLor;B%;IY?Fzwg}NwdQ?~;+BWU2r`7sZUpMhdM~$R>z6lE
zw@lks&flfY)R1Kyz?k46z52EA%ZkNe{*P2TC%dh+o7k7XW}Wz5R)$d1OJ_DMl4e*i
ziSPTZ`(^w5;%Dah#jJ8)Y;PyOuj<>U$FIK!iX1KcBhJsjaPB8(+|?RjD(JHWdW6B#
L)z4*}Q$iB}X`J;g

literal 685
zcmeAS@N?(olHy`uVBq!ia0y~yV0i#!D{wFYNt3z>4M2*qILO_JVcj{ImkbO{>7Fi*
zAr*7p-Z}3T63B4;WAU<sl9wmUG17`kWs6jBdf@bdm1(hSzmRVAgnJ8myE8886+B$V
zaZ2oOWJrdk*`x&)<r^$>b-5l1&8>d<`DV-xalQR-r&|_3{&L0#XjQ`<sh#XV+Cg9i
zkPK;cU}a!fAT$do=Fl5EXaAOh;*VEaR|*`O-hX%N)T`y^?>&)YWhgDp*>w5jUPgwj
z%wNBrMwjO;7w-LA63}w+<H?OXm;QYBd+pq_aqlu20=)ZvFgZwSE^U2!^lsAo2OI2t
z4kt><$$TsC-U}3(67;SVsD??D!RytW*CO}37MFJ&UR3-qWS=WTKt4z~tH1x>m*h;Y
zmA2Q;ZRcQk<+}hFN&%ceDTW3wh>M#bE@sgJI)CbgJ)25$za6`ik*@Pyh+)O#hua^%
zmy4Y{x7YCBZA+k;M-wjGy_K~h7^wDBR&URod9#X+h=a_^SYuyPcj5MVTV^2df4HGU
zPWkS$;r?-Zsy-=wmta^ibIPT=?BDBtzIgg;*Z&1f4xB)b;dO~Z0ONus|LW}9<o8{Z
zc7F5z`)6IIhAQC|3;{v;$-A%S$nL$IwXI6}_D?ZJhrOI33>ulasilid?QZ3mCoL9~
zUVQeOOLk3es_Az<h83%mC(reJ#|sQ9>)CtHzqgxfS)Eq&D8;&`=I@5jKmIM=?jPSS
zkknKEfr;S(dtp_Y+IKdF6-%dFn&{o3*dlRNlVQrWGqwy2ue6TM2>P|s9VDOzbe@eR
j7eoETeicTLNA5G~8nmfTVo{R<h7E(KtDnm{r-UW|_go$p

diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseslider--default-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseslider--default-light-storybook-win32.png"
index cc59e3f5eb631d02677176489f9266490828e7ac..1eaa907fa255b31caeecc59d10822365038c8749 100644
GIT binary patch
delta 548
zcmV+<0^9wl1;zxB7k?NC0ssI2+*cJq00001b5ch_0Itp)=>Px%07*naRCt{2+d)s$
za2&_sb{!p-AVUaKPvV5ckYF&r1rNSHPreclz6B!DgqVm^PU;e1AUd+rKlQqUUV5-?
ze4gX4m+$qH{2O0~A_4#^8GZk<KYDw5If<fZZF%+C@agdGW`EtI0HCd6feHZC9DN<V
ze)s0~+Db3$MNu@H&VHO;ym<0_>;ACrX#mhlow^4AKr5AHxj#BsS?_1dS&}44l4Q%-
z%6fl)bWoOM-Rl6Ll>{mPR8f}Y<mcI9wm5(6-AX6FCIS@zsu8FFP(@jmc_`veJb&yY
zNnTtFQ~;<(pnn1Y0MG~m6#xK$Mi8g~001<CKm`B*pb-Qr0001u(ET_*`f&DX7Ugv>
z0f08S3E^*_4i68LB>A^<0HEE{G~L+P=%`Zw008Qh=lOU%_QV$e0Dwm5Jiha&7o~O2
z0002s|COfcU@+)z54N@kTXl~CfR+g%ygYvO$4@&uI|u$j1%L`X@sq&;8-D-*8bP1}
zKt*Y?a1+A(<tBtQS*ULj0JNJx1%QhBOa0kZK7W~A<^838eTx8~-2^HCR1wGV-sbMb
z$@%nh8bSy~m|jjVPR{o>cjGv&dmR9@QhXhXx;Fqo`;=u_6vgP<=Y!+-lj(UBMXOnV
m@4@cy-otLUt5E@<g5O@pjS)hTkAe{Z0000<MNUMnLSTZVG4h}Q

delta 646
zcmV;10(t$$1gHg&7k?lK0ssI2G=7kP00001b5ch_0Itp)=>Px%Vo5|nRCt{2+|6ne
zQ2>VF`AMfWr8c$Fs4Hu%AcacBTX5m^x$;U}cnig%Py}nVE484ewVIMNXO0U&ve3;S
z&I~@!^33MjzRa0PFTyMV004lxWpxh#004kQpaK8@&=dj{0Dl00M(ET%003HS`0?G|
z@cHMnQIaI<D{Bu1_XpQD>mCIFZI${-5&%?l_<s2G#k0%ntBc*mBuOUY$=A=PkM2F(
zx-qDG8UVDCE4~0wMT~K8xW9U}*Inu6d7kHaccr^}wYN9ik1^K04ggw7paMV@F~-ri
zFH7B}`NPFa#eeAgNT32hH3Ag?s)#X8!z|6x`NJ&Fr?U%z3INpzQ~&?~8bP1}007Vk
z0u=xNfJP9g0000qf<OfT0H6^%ua6I3eR(rUrgbj?fHo;Z_|v0<gM&QJ|Lq(AXt$y$
zHa0dgbqW9gK)t5Z>GAQgE4}~#05n2&_sZ?Xq^Nra04)Fj|F5Db`u%?APJio8f2-~>
z0MIfagvUoue*0*9d)qgt08oJ|z5oCKG=e~rn*ketsHn&n$`IyH$`Fctp}s``&~5@1
z04nM&_a^7l`IE`{w71-=ZxH~rn?MDCD$+FF-P}3-bTU30hY-RnjL*iWpH6l+chWSi
zdmR9@QhE_)b#DNG_K7jhX0zdkxBEvgN8^(uN!Gf(-J3gu>$f_cjz$H53Ir+uR8*E_
z2%#)Z%NXO&cdA*I<$0cEE+_#&6`i^V06<%1S(c`0jPX~X{#5ra0B9?L3INq9QULgi
g+(7~W0H6_m0QPU9U0*(PVgLXD07*qoM6N<$g0KA=i~s-t

diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseslider--disabled-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseslider--disabled-dark-storybook-win32.png"
index 58b784bc074d668d77d0810d58ae2d993cd81765..c4280dc1127390128fccb03a652a725931825148 100644
GIT binary patch
delta 546
zcmeyzvW{hfc)bJ%69WUoop4bHAjMc5<nF|<?wrg^Ap3=<i(^Q|oVRy<{jWGM9DjJO
zEF$Il^b?ard8BP64*n3e_@Vjd#ymqcwLLCp*<1>Cb8P7e7wSD|Yq8emd|}nk<=f+p
zd=Ga|*XL$PQ0zB%oBa0VgNqw9x_)MsZm2H!^wZ+I2E&V0^+ly7r}i>3SY>{Fd299D
z>nr8gb?wrdwc}EJ{l383)#vt~FZO3{@O$-Cj)5U|>rUI9EA(H#wpuzRXw~}H-M@;8
zt0z^9Gn7nqU~O<+GKGzwt#nns+_mdpA3QWzIwc<{GXp5YI`wbFpGk|J2F*<8Whj~N
zz{<d|K$Jxb=-;&p^#P0w3>mDATnr2j+8iN3u_(oLw$k=DZ*^#U@0`xyF#XTNc%#Q3
zE&kj#ED!w9$M{d%_wt#v&G#y@W9I@xZbD$>w8IZCh{l6-E;O(GztnF3DO+X+hKAj%
zGiR+@_2}ZgFB$o>s(Bbne7rKBzny*GZkFHjgW{7IK75b)$jVTUa0;eN92YPhXqvV9
z*|c_s1GzxQMO^r^rfYA-XO(Y{{;WB*or7VQFGvMn`S<C`_TQ2?6k7zU3oXC#mwzvQ
z&(yF^E8KnY9chLI)lM9rH&>P#N#B#_d$;z;qCbUI|32PrUq8RknL~Q#bw&sEzbrSc
W%I-%pv=#up!QkoY=d#Wzp$PyE&g@_S

literal 638
zcmeAS@N?(olHy`uVBq!ia0y~yV0i#!D{wFYNt3z>4M2*qILO_JVcj{ImkbO{7M?DS
zAr*7p-u3ktc4RpIaPGT+C0|v8f)09oNnm&!{@}s#56RWXX3Y2?WXjv65Y191$sgyT
z!q#0__O!C^vfRIyZ>Rf|AO5^`E69SP*H7hu6ho^6D+9v<T^21Md#yk*KSKjw^$w$`
zyAiTB5@N1~wrk3^m+{-xowMa)*tIG~rne}cp}{YzX3v+T&#AB4KQCI>t)};7`uw#a
z@vA52U%qphVZr2>kE{)nwl^be*PegXZMAet&?@~`mw&xEc`WN)EW?FRCQ*j8i9u3#
zq_3>pR}&F`rTO>aDM9;yGKnCWkZ;K!y}PCrr_M8FxKIleVQ2^wSOIk0mL{-EMIkO#
z2w-Gj$Y|a1rQ}aWt*YLcr*TXSv7cs_pX@pQ_(T5jJ8lQ_c|OEv&U*Ia#}4zj_^{<b
z6H-E^JuR>(IVuh^^M&udx>f$?iq8Wj9(>E1wQSX@9s6x>-k<kGj+sGra?q`szpqa9
zt4;R&!0*ZMqj=p9V4z*#!sng@x3iVSXPp@ySOJ}QCZj6kXxyF}q3Xh_kf+fs40qK6
z7!%y8qpd%0l&>~y5pe3*Ya#y|$lqDc=ny`&dvV}9UWN;{iY+fMZn3hEyC=){PUpy?
zKXnzK{+->eFK^c_P_&-8!H?_w^=sfL@Y0N})B_r6_EG9SBg486#xDBlt4vrMW&;DO
nKzWe}!#^>8PoSF@h}JQLXV+#~@K`bfy~^O}>gTe~DWM4fSh)Pj

diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseslider--disabled-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseslider--disabled-light-storybook-win32.png"
index d5dc4060ed85a8ad66a3ee693652ccf1bdc820ef..58758e8b7a3a98b78ab5b64e31252dee720da8ae 100644
GIT binary patch
delta 536
zcmey$vV>)Vc)bJ%69WUoop4bHAjMc5<nF|<?wrg^Ap4%Di(^Q|oVRz+`dtZNXnXk2
ztJ|50M>25wvETc7h4l~a5Se(u;gAP+?)k#UNj@cx$(O?Br&sR!x$XTEpV?*3^BEWx
z->KXGyQui0%~sDzSM*nHe{HU=-@jarmBD)|R|tc|^JjIx>tBBQ>=-MWI#0#(K5xJ8
z?|*;p{(4dJDwAP@$IUCu3<)dswoSj97%Dd<bK26#Fu5sL6H7Plol_;wpflBhwZSl{
z=WKBBl%xL=<DU3lKO(XGHY)?SS^#6h5=9=*S?}gAi8SLmT++>uaFay~=)KJf0gMa`
zGguqB7#I%daD)Jb>eCz-00Y2)`{>tq&vxDYc2S$1@quI#M}1XEY3bCzzslnOS;c>1
z{Bb;`vTjS1==HPP{I6&N^-bnHT(JN4&PUuJlTy;ZW=?z-d>$zN;Q!apUGHyZ)ozRO
zw`F4xQ#<zK;k(EA^0{WSuha)HKKL2)k(GfVK@8@edUOYY+;hOAa^7))Z~jRfmG2(s
zG8jw(dUfKfO>(~y|EIiY-?e6WGz-INus1(H_WgaKtUs1VvF(Cw*<0u8x;-;NffIU*
z_wN;HhJ=Yu9JlYjy?#4C_qv*A(A2B1Cx<UzJz3}TZ+(WIkIXI%4T7r{N9Z^J9nRqC
L>gTe~DWM4f0J!I%

literal 629
zcmeAS@N?(olHy`uVBq!ia0y~yV0i#!D{wFYNt3z>4M2*qILO_JVcj{ImkbO{`kpS1
zAr*7p-aYGgC4iyr;br@m4<;};yIooO@n8PoBi;sjt||r-8hjRBmJ^pSR@t>+(wwmQ
z>6K}pbMK$boW1p~8qh$8tjbr6Kw5xB3rHp_1^_t{twvuN7-noZ{XRTi&+poIUyj6Y
zi|Te)6n`kP|Ej?-W7Qe&Nel@yx?f*ie)+uh=3Q&L1P(2G`|jG=-;c|?_a44-nIU0P
z%tzLSM!&G-U-M$$hD6RwuZ(*e@-?q^la=pYZiZ!E3z!ZF7#{ojch?#@Tb<x3M|Z^@
zm$>|vsew~?1%pAr^>W42+x$1#yx*mFSBYVUStBq^4rp+M0A1+jxBwU&23$;{3=9o{
z0xN(*Jx-N%#fA6Qm|fInXMDh!bpQX$<(oHe{`2v6ZDrZMC(IxEPj)Be+v%UbzS=in
zIZ%Vj<?_2<&-QBX18c4`vDVqF^pyw5`4?}${)gOIare)zuM8Os3=NO*hs)RhzFf5P
zj7>8aga7j`eW0qv3gAFu#qKILtuCc+f4_OY`Mv1FM>7Tq51>~aHfLSS-Su{I-sQ8a
zB6qnm7~}$-&t`Qm-fX*X_4Q->`fKms+j=&)c+Y+xQ0Qo7@AiGg%V6MHdw+eN-u}3{
z>|1Ir0pVX?H;1=>ZnpXUU!Q>o7*PoecBr;Y$n~`4Wl&q`W6Qv>?A1b7`Bz`AdtQQC
n@vlpRwc+_AMM<Em-5#<()|j+sUH=tOm@#;|`njxgN@xNAy|e)R

diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-basetextfield--has-error-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-basetextfield--has-error-dark-storybook-win32.png"
index ef11809f80dfe991060a395a3c71d7a2df02ccd9..e778dbf9e844e3bef971de76f2a821d8e0de4a31 100644
GIT binary patch
literal 2312
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
NEX-`6m8KpK{|!W3D#ZW*

literal 2314
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

diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-basetextfield--has-error-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-basetextfield--has-error-light-storybook-win32.png"
index 5dafeb717b15e1c4eba49c4f5e3e880e983513e3..8fd349df8f6be9d7581cb040ca8a931f81190924 100644
GIT binary patch
delta 2122
zcmXX{c|6qX7shn8;O9;$xnpaHRF>Q%A$7@4X-Jf%l5JuvF$sOkz7D3$E!0qqG4_4Q
zSVJXb8|&Bx6N70QOlC%IU!ULm*Lk1kobx{CyyyMAWl#z<^$d_|W^~#1QPwKe<pF{&
z)y1Mq<L`CRkKT>t3&#E_UlkoJSl#Wqq%>M(yP9e|mTP8bQy@^_X4gMd<XC@{Dx98S
z>6tD(enL{jrz0vRwZS{W%3K>7BsMYN8-;6rHphP#Z)Pgrh3V4?4o*uwuJ|<<vXaK6
zEA{f4p8QZm8vqN9DTkGpoOSq9d1RE>IEMKvdOX2IIMC4A`oscfzW}&uGyl5!P2YaV
zGbM24oe?{q)Tf>QV{C>teeJ@I-_L<kj!J`j7-wShM=blmkIIS){*z{c*V39480#k<
z;G`{^(nVu+JK0Q6@7yN`x_$L;SASrO0X(SLz^WVB_EpeyTU*;d0V-g?%$lEcKAEiF
zALj2$M@isE5cRI{Eb?&Eg1DrlWFaYIZ4-187>w?s?H7*3nXo)%dC&hQp<DGhNEemU
zr!CR<K>q0xv8?RtFKz(JKaEs+QhYJ$QH3N(q#ns2M7uA1J7rHSaL_*1t}#Fr2XR-f
zrl>-C=DUXaJ+|Qf(gmrQ*%)_{iql|_KD7sg1PJO*BZwG$Ir+JU(B<c9LKlDt(q`A~
z5i2wdq@ONz2RT(65SIT9ont*}$P@%YOBV<P;%Hw>3Oiz@cyP&A7z8!KJ81qJ*Ymwc
z<QPi{gzE(lIS>$kiNSuFPwy@Hz}va@x}<yAWeSBvTA(dJ?srAS#a7`=lyB9o!%#*_
z5G#-lD5UKh#Dc5<I+@XsX6iQcC4})Y6h5~#rtZwxDO1_%146@^)bMHvSo6HIRtUR`
z&vq5~@pLeU5<9qDuA_pg_jdWuTYHbEXRsqZeviZEudPy<&?#xl(I%ec@+n!fg_x|#
ztQUQmYj1W-;>c@V%;v10?3V>NqbBi-SBFneXZ0{5QvifNwj{2ue~q&2RF3c%q$-2T
zT>m;_@$Z*ymdJQfYMkiap<}@l#~HLiN<4znl|Si;cFf!Zx=m(Q@o%#&5+QjONwK&`
z^j=v9xkJ}>4>XljI<{+Q3JD$teN&-lp=RThr-1%r8;)>eLtLB;GI>3?)99g#jemB_
zx|6}|Xn$e8?!g*UdG*jcqmBM^%<r)DYv*rb>3C0MSkD;`?(0^VWbFHZ2i>w0J~vtz
zP+j-X<Z_=6JRej`W&^7+E^basj35DC%Oxe7toa3;B)*xFUifWfM5sGrII~T#9CHJ3
znN)Yk3xQ*oFL-H(Y-<@f)Qw8$pl5kn)*<zTMAI+DC`+908}{dS$Dq*q@v?k!!(|*U
zlpRzKhlr86i=_HOIt&i4CF+<XsjqyPN>_~TMmk}zcvbkp6C&FI+tSQW?5h;fsEYKo
z_CJvBBewGoDX&9Hrkc^b#)#PkU~PJbSQ&`;gqvG)D&2hI86S7MUhi9voh20NL#^S-
zb-!l=&S1w{+`Qnu*`}24=93POX>X7nx$6a3Rq_9Y!;q7K{u4RhS~o)GL>*^~f-)0g
z2WD`d^Br==DQY6cnx!(uzEq?za{BZaDK+d$^Jv9tesM)$|FT|RG2o54Zp&(EIsi@U
zZ9u@_t>KxANmD@y5Uq(s5x1m>1isjY%zJ~n8d|>;e86F(8hEn#Yi~GwR<$(xiqZT)
zNq(qBjjDr{+8@6qKD9g>txGf>Gsh20Go_lJONKp28<c?RNK$3ANVQ412q<gMqWWl!
zO)%37Ka>2sY4?Gg>U3i|$^cnq^!OIKd9~m%LBkLBSqQ9n4WqJW$PHO3<2ctR)qHP5
z`^tJ=$AGPzI&t5T<cU5N@ghAfzqSnX9(8%WQtv!AHwV)R8R6npZXRw_y|O!Q=-6}X
z_gxu-_@ttA-#7M^-ko0=HH#Qy6C<oL=C<z2PoS`{#6W%msV&3Y7k|@+F(c?Pi>oiR
zWO&-jo)EYCj%XyQn4MC(J5{l$sKr4Y9bSEI0C=*)4b}A%@dv^;w%*vcJsbbLQZT&x
z1aimxF7=RpQGe<Z;c$EFPS{)cnfE0Mh3@nSY+8S9`A~dkomxQ&4YOr=$8O9rEeaTs
zIEDN3m8S;N&D(n5?WNT^U1B?TMWg{MXLh?Rw<YWQZeIDnz3`PT4ep-VHUX>eJ<$Au
zP-cchJ50e4TeP`M*M)tq=(ch>ack@QyqyY+BiBz1zpQtE3~$c{hS87gfmXtnos6m-
z3O#fqratlj*xelirO>^@0HSI@RA$-hC@22y-Ck#&YHdxEiO~`JpN1RcWbG*}tD18k
z)L!gu3Znt$C}+0F(pENG?A~JFefR#1$pjj?TKQ0Iz8aWs#`h&ZHP^LuT$A@Y21z@o
zmw1XFK;%@#MbXKPomAFxG{Kq9EeUE`<5Lu-WMJ)w^ge|S0vQO8YG$}X{T;-46C*{G
zQ=W5k;r6-@Q3T9cr+XG^D6+KuE>>~L!h_<g`Wf2u<%Uq_$BI(^{+%_5{o@-wAJ4qt
zKiFtS>$TT2j#NwQD<?A9FNz$hYU}d2d6hmfcN1=gN9I(tY`zY(h`Bo5xM)Ou6{9?T
zlqXS<vuFZzikfNSKN{3sWUl8l4PKr1>0yhi3gdd7+_C9~1=+ilzSQ|qC>)?qI0g!O
znv{FqjMHmdb8j1SP-7cSxB#LvvVnA=lb|Jl(Ad%??pl+V|Njjc%V+P7vt}D0U>D6Z
U#$$yIK@YPl)<z|ee_SK}15o%2r~m)}

delta 2093
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
b-}cRI*RS>NS~jncC{QqaSG$^v*Y5ovqa+Un