From 3c52f34213ff75c5408bba20a38f65a4e07e2cb0 Mon Sep 17 00:00:00 2001
From: Woolim Park <woolim@getluko.com>
Date: Tue, 21 Nov 2023 11:44:47 +0100
Subject: [PATCH] WSelect

---
 components/WInput/WInput.story.vue         |  47 +++++----
 components/WInput/WInput.vue               |  58 +++++++----
 components/WSelect/WSelect.story.vue       |  38 ++++++++
 components/WSelect/WSelect.vue             | 106 +++++++++++++++++++++
 components/WSelect/index.ts                |   1 +
 components/WTextField/WTextField.story.vue |  36 +++++++
 components/WTextField/WTextField.vue       |  41 ++++++++
 components/WTextField/index.ts             |   1 +
 components/index.ts                        |   1 +
 composables/useDropdown.ts                 |  36 +++++++
 package.json                               |   4 +
 styles/tailwind.css                        |   1 +
 tsconfig.json                              |   3 +-
 tsconfig.node.json                         |  10 --
 types/index.ts                             |   6 +-
 yarn.lock                                  |  55 ++++++++++-
 16 files changed, 392 insertions(+), 52 deletions(-)
 create mode 100644 components/WSelect/WSelect.story.vue
 create mode 100644 components/WSelect/WSelect.vue
 create mode 100644 components/WSelect/index.ts
 create mode 100644 components/WTextField/WTextField.story.vue
 create mode 100644 components/WTextField/WTextField.vue
 create mode 100644 components/WTextField/index.ts
 create mode 100644 composables/useDropdown.ts
 delete mode 100644 tsconfig.node.json

diff --git a/components/WInput/WInput.story.vue b/components/WInput/WInput.story.vue
index aacc19b..837d5b1 100644
--- a/components/WInput/WInput.story.vue
+++ b/components/WInput/WInput.story.vue
@@ -1,38 +1,49 @@
-<script setup>
+<script setup lang="ts">
 import WInput from "./WInput.vue";
 import { InputType } from "@/types";
 import { reactive } from "vue";
+import { CurrencyEuroIcon } from "@heroicons/vue/24/outline";
 
 const state = reactive({
   type: InputType.TEXT,
   value: "",
   label: "What are you looking for?",
 });
+const onInput = (e: InputEvent) => {
+  const target = e.target as HTMLInputElement;
+  state.value = target?.value;
+};
 </script>
 
 <template>
-  <Story title="WInput" :layout="{ type: 'grid', width: 300 }">
+  <Story title="Form/WInput" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
-      <WInput
-        placeholder="Type here..."
-        v-model="state.value"
-        :disabled="state.disabled"
-        :type="state.type"
-        :label="state.label"
-      />
+      <WInput placeholder="Type here..." :value="state.value" @input="onInput" :type="state.type" />
     </Variant>
     <Variant title="error">
-      <WInput
-        :label="state.label"
-        placeholder="Type here..."
-        v-model="state.value"
-        error
-        :type="state.type"
-        error-message="Error message"
-      />
+      <WInput placeholder="Type here..." :value="state.value" @input="onInput" error :type="state.type" />
     </Variant>
     <Variant title="disabled">
-      <WInput :label="state.label" placeholder="Type here..." v-model="state.value" disabled :type="state.type" />
+      <WInput placeholder="Type here..." :value="state.value" @input="onInput" disabled :type="state.type" />
+    </Variant>
+    <Variant title="icon">
+      <WInput placeholder="Type here..." :value="state.value" @input="onInput" :type="state.type">
+        <template #append>
+          <CurrencyEuroIcon />
+        </template>
+      </WInput>
+    </Variant>
+    <Variant title="append text">
+      <WInput placeholder="Type here..." :value="state.value" @input="onInput" :type="state.type">
+        <template #append> € </template>
+      </WInput>
+    </Variant>
+    <Variant title="disabled with icon">
+      <WInput placeholder="Type here..." disabled :value="state.value" @input="onInput" :type="state.type">
+        <template #append>
+          <CurrencyEuroIcon />
+        </template>
+      </WInput>
     </Variant>
   </Story>
 </template>
diff --git a/components/WInput/WInput.vue b/components/WInput/WInput.vue
index ec33060..8c5a3c3 100644
--- a/components/WInput/WInput.vue
+++ b/components/WInput/WInput.vue
@@ -2,51 +2,69 @@
 import WSheep from "@/components/WSheep";
 import { InputType } from "@/types";
 import { useMeh } from "@/composables/useMeh";
-import { toRef, PropType, onUnmounted } from "vue";
+import { ref, toRef, PropType, onUnmounted } from "vue";
 import { useIds } from "@/composables/useIds";
-import WLabel from "@/components/WLabel";
-import WError from "@/components/WError";
 
 const props = defineProps({
   label: { type: String, default: "" },
-  modelValue: { type: String, default: "" },
+  value: { type: [String, Number], default: "" },
   type: { type: String as PropType<InputType>, default: InputType.TEXT },
   disabled: { type: Boolean, default: false },
   placeholder: { type: String, default: undefined },
   error: { type: Boolean, default: false },
   errorMessage: { type: String, default: "" },
 });
-const emit = defineEmits(["update:modelValue"]);
 const id = useIds().get();
 const { isPlaying, playMeh, deletePlaying } = useMeh({ disabled: toRef(props, "disabled"), id });
-const onInput = (e: Event) => {
-  const { target } = e;
-  if (target) {
-    emit("update:modelValue", (target as HTMLInputElement).value);
-  }
+const emit = defineEmits(["click", "click:prepend"]);
+const onClick = (e: Event) => {
+  if (props.disabled) return;
+  emit("click", e);
+  playMeh();
+};
+const onPrependClick = (e: Event) => {
+  if (props.disabled) return;
+  emit("click", e);
+  emit("click:prepend", e);
+  playMeh();
 };
 onUnmounted(() => {
   deletePlaying();
 });
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 <template>
-  <div>
-    <WLabel :for="id" v-if="label" :disabled="disabled"> {{ label }}</WLabel>
-    <div class="ml-[20px] my-1 mr-1 relative">
-      <WSheep class="absolute left-[-20px] top-[50%] -translate-y-1/2" :disabled="disabled" :meh="isPlaying" />
+  <div class="ml-[20px] my-1 mr-1 relative">
+    <WSheep class="absolute left-[-20px] top-[50%] -translate-y-1/2" :disabled="disabled" :meh="isPlaying" />
+    <div
+      class="flex cursor-pointer items-center justify-between focus-within:wc-focus wc-rounded wc-bg wc-border wc-text"
+      :class="{
+        ['wc-error-border']: error || errorMessage,
+        ['wc-disabled-text wc-disabled-bg wc-disabled-border cursor-not-allowed']: disabled,
+      }"
+    >
       <input
+        ref="input"
+        class="w-full cursor-pointer bg-inherit py-3 pl-6 pr-3 wc-rounded outline-none disabled:cursor-not-allowed"
+        :class="{ ['pr-1']: $slots.append }"
         :id="id"
         v-bind="$attrs"
         :type="type"
-        class="py-3 w-full focus:wc-focus pl-6 pr-3 wc-bg wc-border wc-rounded disabled:wc-disabled-text disabled:wc-disabled-bg disabled:wc-disabled-border disabled:cursor-not-allowed wc-text"
-        :class="{ ['wc-error-border']: error || errorMessage }"
         :placeholder="placeholder"
         :disabled="disabled"
-        :value="modelValue"
-        @input="onInput"
-        @focus="playMeh"
+        :value="value"
+        @click="onClick"
       />
+
+      <span
+        v-if="$slots.append"
+        @click="onPrependClick"
+        class="w-[30px] mx-1 h-[30px] text-[16px] flex justify-center items-center"
+      >
+        <slot name="append"> </slot>
+      </span>
     </div>
-    <WError :error-message="errorMessage" />
   </div>
 </template>
diff --git a/components/WSelect/WSelect.story.vue b/components/WSelect/WSelect.story.vue
new file mode 100644
index 0000000..40e5074
--- /dev/null
+++ b/components/WSelect/WSelect.story.vue
@@ -0,0 +1,38 @@
+<script setup>
+import WSelect from "./WSelect.vue";
+import { reactive } from "vue";
+
+const state = reactive({
+  modelValue: undefined,
+  options: [
+    { text: "Option 1", value: 1 },
+    { text: "Option 2", value: 2 },
+    { text: "Option 3", value: 3 },
+    { text: "Option 4", value: 4 },
+    { text: "Option 5", value: 5 },
+    { text: "Option 6", value: 6 },
+  ],
+  label: "Select an option",
+  placeholder: "Any option?",
+});
+</script>
+
+<template>
+  <Story title="Form/WSelect" :layout="{ type: 'grid', width: 300 }">
+    <Variant title="default">
+      <WSelect v-model="state.value" :label="state.label" :options="state.options" :placeholder="state.placeholder" />
+    </Variant>
+    <Variant title="disabled">
+      <WSelect
+        v-model="state.value"
+        :label="state.label"
+        :options="state.options"
+        :placeholder="state.placeholder"
+        disabled
+      />
+    </Variant>
+    <Variant title="bottom">
+      <WSelect v-model="state.value" :label="state.label" :options="state.options" :placeholder="state.placeholder" />
+    </Variant>
+  </Story>
+</template>
diff --git a/components/WSelect/WSelect.vue b/components/WSelect/WSelect.vue
new file mode 100644
index 0000000..37458ec
--- /dev/null
+++ b/components/WSelect/WSelect.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import WLabel from "@/components/WLabel";
+import { useIds } from "@/composables/useIds";
+import { IOption } from "@/types";
+import { PropType, ref } from "vue";
+import WInput from "@/components/WInput";
+import { ChevronDownIcon } from "@heroicons/vue/24/outline";
+import { vOnClickOutside } from "@vueuse/components";
+import { useDropdown } from "@/composables/useDropdown";
+
+const props = defineProps({
+  label: { type: String, default: "" },
+  modelValue: { type: [String, Number], default: "" },
+  options: { type: Array as PropType<IOption[]>, required: true },
+  placeholder: { type: String, default: "" },
+  disabled: { type: Boolean, default: false },
+});
+const emit = defineEmits(["update:modelValue"]);
+const id = useIds().get();
+const active = ref(false);
+
+const onToggle = () => {
+  if (props.disabled) return;
+
+  active.value = !active.value;
+};
+const onSelect = (value: number | string) => {
+  if (props.disabled) return;
+
+  emit("update:modelValue", value);
+  active.value = false;
+};
+const input = ref<HTMLElement>();
+const dropdown = ref<HTMLElement>();
+const { isDirectionUpwards, dropdownBottom, dropdownLeft, dropdownTop, dropdownWidth } = useDropdown({
+  rootEl: input,
+  dropdownEl: dropdown,
+  show: active,
+});
+</script>
+<template>
+  <div v-on-click-outside="() => (active = false)">
+    <WLabel :for="id" :disabled="disabled">{{ label }}</WLabel>
+    <WInput
+      @click="onToggle"
+      ref="input"
+      :value="modelValue"
+      :id="id"
+      :placeholder="placeholder"
+      readonly
+      :disabled="disabled"
+    >
+      <template #append>
+        <ChevronDownIcon
+          class="transition-transform duration-200 w-[30px] h-[30px]"
+          :class="{ ['rotate-180']: active }"
+        />
+      </template>
+    </WInput>
+
+    <ul
+      ref="dropdown"
+      v-show="active"
+      :id="id"
+      class="wc-rounded z-[1] max-h-[196px] overflow-y-auto wc-border flex flex-col p-1 gap-2 bg-white"
+      :class="$style.dropdown"
+    >
+      <li v-for="o in options">
+        <button
+          @click="onSelect(o.value)"
+          :class="{ ['!text-sky-600 font-[500]']: o.value === modelValue }"
+          class="bg-white w-full rounded-[8px] text-left focus:wc-focus focus:wc-hover-bg hover:wc-hover-bg !border-none px-3 py-2 wc-text"
+        >
+          {{ o.text }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+<style module>
+.dropdown {
+  position: fixed;
+  bottom: v-bind("isDirectionUpwards ? dropdownBottom : dropdownTop");
+  left: v-bind("dropdownLeft");
+  width: v-bind("dropdownWidth");
+  min-width: 0;
+
+  /* width */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    @apply shadow-gray-50;
+    box-shadow: inset 0 0 1px;
+    border-radius: 20px;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: black;
+    border-radius: 20px;
+  }
+}
+</style>
diff --git a/components/WSelect/index.ts b/components/WSelect/index.ts
new file mode 100644
index 0000000..6b6ac38
--- /dev/null
+++ b/components/WSelect/index.ts
@@ -0,0 +1 @@
+export { default } from "./WSelect.vue";
diff --git a/components/WTextField/WTextField.story.vue b/components/WTextField/WTextField.story.vue
new file mode 100644
index 0000000..cd3d78d
--- /dev/null
+++ b/components/WTextField/WTextField.story.vue
@@ -0,0 +1,36 @@
+<script setup>
+import WTextField from "./WTextField.vue";
+import { reactive } from "vue";
+
+const state = reactive({
+  value: "",
+  label: "What are you looking for?",
+});
+</script>
+
+<template>
+  <Story title="Form/WTextField" :layout="{ type: 'grid', width: 300 }">
+    <Variant title="default">
+      <WTextField placeholder="Type here..." v-model="state.value" :disabled="state.disabled" :label="state.label" />
+    </Variant>
+    <Variant title="disabled">
+      <WTextField
+        placeholder="Type here..."
+        disabled
+        v-model="state.value"
+        :disabled="state.disabled"
+        :label="state.label"
+      />
+    </Variant>
+    <Variant title="error">
+      <WTextField
+        placeholder="Type here..."
+        error
+        error-message="Some error happens"
+        v-model="state.value"
+        :disabled="state.disabled"
+        :label="state.label"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/components/WTextField/WTextField.vue b/components/WTextField/WTextField.vue
new file mode 100644
index 0000000..d75c26e
--- /dev/null
+++ b/components/WTextField/WTextField.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import WSheep from "@/components/WSheep";
+import { InputType } from "@/types";
+import { useMeh } from "@/composables/useMeh";
+import { toRef, PropType, onUnmounted, computed } from "vue";
+import { useIds } from "@/composables/useIds";
+import WLabel from "@/components/WLabel";
+import WError from "@/components/WError";
+import WInput from "@/components/WInput";
+
+const props = defineProps({
+  label: { type: String, default: "" },
+  modelValue: { type: String, default: "" },
+  type: { type: String as PropType<InputType>, default: InputType.TEXT },
+  disabled: { type: Boolean, default: false },
+  placeholder: { type: String, default: undefined },
+  error: { type: Boolean, default: false },
+  errorMessage: { type: String, default: "" },
+});
+const emit = defineEmits(["update:modelValue"]);
+const id = useIds().get();
+const onInput = (e: InputEvent) => {
+  const target = e.target;
+  emit("update:modelValue", target.value);
+};
+</script>
+
+<template>
+  <div>
+    <WLabel :for="id" v-if="label" :disabled="disabled"> {{ label }}</WLabel>
+    <WInput
+      :value="modelValue"
+      :id="id"
+      @input="onInput"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :error="error"
+    />
+    <WError v-if="errorMessage" :error-message="errorMessage" />
+  </div>
+</template>
diff --git a/components/WTextField/index.ts b/components/WTextField/index.ts
new file mode 100644
index 0000000..0e410c4
--- /dev/null
+++ b/components/WTextField/index.ts
@@ -0,0 +1 @@
+export { default } from "./WTextField.vue";
diff --git a/components/index.ts b/components/index.ts
index 9ed86d2..33baff5 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -9,3 +9,4 @@ export { default as WRadioGroup } from "./WRadioGroup";
 export { default as WLabel } from "./WLabel";
 export { default as WError } from "./WError";
 export { default as WNavbar } from "./WNavbar";
+export { default as WTextField } from "./WTextField";
diff --git a/composables/useDropdown.ts b/composables/useDropdown.ts
new file mode 100644
index 0000000..2e1fd33
--- /dev/null
+++ b/composables/useDropdown.ts
@@ -0,0 +1,36 @@
+import { useElementBounding } from "@vueuse/core";
+import { Ref, computed } from "vue";
+
+export const useDropdown = ({
+  rootEl,
+  dropdownEl,
+  show,
+}: {
+  rootEl: Ref<HTMLElement | undefined>;
+  dropdownEl: Ref<HTMLElement | undefined>;
+  show: Ref<boolean>;
+}) => {
+  const r = useElementBounding(rootEl);
+  const d = useElementBounding(dropdownEl);
+  const isDirectionUpwards = computed(() => {
+    if (!show.value) return false;
+    const distanceFromBottom = window.innerHeight - r.bottom.value;
+    const distanceFromTop = r.top.value;
+    const dropdownHeight = d.height.value;
+    return distanceFromBottom < dropdownHeight + 8 && distanceFromTop > dropdownHeight + 8;
+  });
+  const dropdownBottom = computed(() => (show.value ? `${window.innerHeight - r.top.value + 8}px` : ""));
+  const dropdownLeft = computed(() => (show.value ? `${r.left.value}px` : ""));
+  const dropdownWidth = computed(() => (show.value ? `${r.width.value - 4}px` : ""));
+  const dropdownTop = computed(() =>
+    show.value ? `${window.innerHeight - r.bottom.value - d.height.value - 8}px` : "",
+  );
+
+  return {
+    isDirectionUpwards,
+    dropdownBottom,
+    dropdownLeft,
+    dropdownTop,
+    dropdownWidth,
+  };
+};
diff --git a/package.json b/package.json
index c1b735c..865ae13 100644
--- a/package.json
+++ b/package.json
@@ -17,10 +17,14 @@
     "preview": "histoire preview"
   },
   "dependencies": {
+    "@formatjs/intl-displaynames": "^6.6.4",
+    "@formatjs/intl-getcanonicallocales": "^2.3.0",
+    "@formatjs/intl-locale": "^3.4.3",
     "@heroicons/vue": "^2.0.18",
     "@vueuse/components": "^10.6.1",
     "@vueuse/core": "^10.6.1",
     "color": "^4.2.3",
+    "libphonenumber-js": "^1.10.49",
     "lodash-es": "^4.17.21",
     "vue": "^3.3.4"
   },
diff --git a/styles/tailwind.css b/styles/tailwind.css
index 1b8e629..3295d80 100644
--- a/styles/tailwind.css
+++ b/styles/tailwind.css
@@ -3,4 +3,5 @@
 @tailwind utilities;
 * {
   -webkit-appearance: none;
+  font-size: 16px;
 }
diff --git a/tsconfig.json b/tsconfig.json
index 31c5636..ce22f54 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,6 +27,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["env.d.ts", "**/*.js", "**/*.ts", "**/*.vue", "**/*.d.ts", "**/*.tsx"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["env.d.ts", "**/*.js", "**/*.ts", "**/*.vue", "**/*.d.ts", "**/*.tsx"]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
deleted file mode 100644
index 42872c5..0000000
--- a/tsconfig.node.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/types/index.ts b/types/index.ts
index 7fcc829..3faca77 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -3,7 +3,6 @@ export enum InputType {
   CHECKBOX = "checkbox",
   COLOR = "color",
   DATE = "date",
-  DATETIME_LOCAL = "datetime-local",
   EMAIL = "email",
   FILE = "file",
   HIDDEN = "hidden",
@@ -22,3 +21,8 @@ export enum InputType {
   URL = "url",
   WEEK = "week",
 }
+
+export interface IOption {
+  text: string;
+  value: string | number;
+}
diff --git a/yarn.lock b/yarn.lock
index a4f9b60..02e78ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -190,6 +190,54 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
   integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
 
+"@formatjs/ecma402-abstract@1.18.0":
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.0.tgz#e2120e7101020140661b58430a7ff4262705a2f2"
+  integrity sha512-PEVLoa3zBevWSCZzPIM/lvPCi8P5l4G+NXQMc/CjEiaCWgyHieUoo0nM7Bs0n/NbuQ6JpXEolivQ9pKSBHaDlA==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.5.2"
+    tslib "^2.4.0"
+
+"@formatjs/intl-displaynames@^6.6.4":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.6.4.tgz#dd9ca9bb2d1f4b140cc8814667bc830802621674"
+  integrity sha512-ET8KQ+L9Q0K8x1SnJQa4DNssUcbATlMopWqYvGGR8yAvw5qwAQc1fv+DshCoZNIE9pbcue0IGC4kWNAkWqlFag==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.18.0"
+    "@formatjs/intl-localematcher" "0.5.2"
+    tslib "^2.4.0"
+
+"@formatjs/intl-enumerator@1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-enumerator/-/intl-enumerator-1.4.3.tgz#8d278c273485d7c6219916509fbd51ce3142064d"
+  integrity sha512-0NpTmAQnDokPoB5aVtXvOdtrUq/uEuPPhBUAr57TYYDjI5MwfFXt8F6JCm6s6CPI0inL8+nxPLjjqH0qyNnP4Q==
+  dependencies:
+    tslib "^2.4.0"
+
+"@formatjs/intl-getcanonicallocales@2.3.0", "@formatjs/intl-getcanonicallocales@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-2.3.0.tgz#b6c6fa1c664e30a61f27fa6399a76159d82a5842"
+  integrity sha512-BOXbLwqQ7nKua/l7tKqDLRN84WupDXFDhGJQMFvsMVA2dKuOdRaWTxWpL3cJ7qPkoNw11Jf+Xpj4OSPBBvW0eQ==
+  dependencies:
+    tslib "^2.4.0"
+
+"@formatjs/intl-locale@^3.4.3":
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-locale/-/intl-locale-3.4.3.tgz#fdd2a3978b03aa76965abbca86526bb1d02973b6"
+  integrity sha512-g/35yMikkkRmLYmqE4W74gvZyKa768oC9OmUFzfLmH3CVYF3v2kvAZI0WsxWLbxYj8TT7wBDeLIL3aIlRw4Osw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.18.0"
+    "@formatjs/intl-enumerator" "1.4.3"
+    "@formatjs/intl-getcanonicallocales" "2.3.0"
+    tslib "^2.4.0"
+
+"@formatjs/intl-localematcher@0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.2.tgz#5fcf029fd218905575e5080fa33facdcb623d532"
+  integrity sha512-txaaE2fiBMagLrR4jYhxzFO6wEdEG4TPMqrzBAcbr4HFUYzH/YC+lg6OIzKCHm8WgDdyQevxbAAV1OgcXctuGw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@heroicons/vue@^2.0.18":
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-2.0.18.tgz#cd55074dfb1915870b680e2757ca4dad6ab3326a"
@@ -1514,6 +1562,11 @@ launch-editor@^2.6.0:
     picocolors "^1.0.0"
     shell-quote "^1.8.1"
 
+libphonenumber-js@^1.10.49:
+  version "1.10.49"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.49.tgz#c871661c62452348d228c96425f75ddf7e10f05a"
+  integrity sha512-gvLtyC3tIuqfPzjvYLH9BmVdqzGDiSi4VjtWe2fAgSdBf0yt8yPmbNnRIHNbR5IdtVkm0ayGuzwQKTWmU0hdjQ==
+
 lilconfig@^2.0.5, lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
@@ -2239,7 +2292,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@^2.0.3:
+tslib@^2.0.3, tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==