@leaflink/stash 48.16.0 → 48.16.2

package/dist/TextEditor.vue.d.ts

@@ -1,12 +1,11 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
+import { PublicProps } from 'vue';
 import Quill from 'quill';
 import Toolbar from 'quill/modules/toolbar';
-import { VNodeProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -29,7 +28,7 @@ declare type __VLS_WithDefaults<P, D> = {
     }> : P[K];
 };
 
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
     modelValue: string;
     placeholder: string;
     isReadOnly: boolean;
@@ -42,11 +41,11 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     showOptionalInLabel: boolean;
     controls: () => never[];
     handlers: () => {};
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     blur: (editor: Quill) => void;
     focus: (editor: Quill) => void;
     "update:model-value": (value: string) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
     modelValue: string;
     placeholder: string;
     isReadOnly: boolean;
@@ -59,14 +58,13 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     showOptionalInLabel: boolean;
     controls: () => never[];
     handlers: () => {};
-}>>> & {
-    onFocus?: ((editor: Quill) => any) | undefined;
+}>>> & Readonly<{
     onBlur?: ((editor: Quill) => any) | undefined;
+    onFocus?: ((editor: Quill) => any) | undefined;
     "onUpdate:model-value"?: ((value: string) => any) | undefined;
-}, {
+}>, {
     label: string;
     id: string;
-    placeholder: string;
     controls: TextEditorControls;
     isRequired: boolean;
     addBottomSpace: boolean;
@@ -74,18 +72,19 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     hintText: string;
     isReadOnly: boolean;
     showOptionalInLabel: boolean;
+    placeholder: string;
     modelValue: string;
     handlers: TextEditorControlHandlerMap;
-}, {}>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
-declare type IconName = typeof iconNames[number];
+declare type IconName = (typeof iconNames)[number];
 
 declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
 
 declare const TEXT_EDITOR_ALLOWED_CONTROLS: readonly ["bold", "italic", "underline", "link", "divider", "list"];
 
-export declare type TextEditorAllowedControlName = typeof TEXT_EDITOR_ALLOWED_CONTROLS[number];
+export declare type TextEditorAllowedControlName = (typeof TEXT_EDITOR_ALLOWED_CONTROLS)[number];
 
 export declare type TextEditorControl = (TextEditorAllowedControlName | TextEditorControlObject)[];
 

package/dist/Textarea.js

@@ -1,11 +1,11 @@
-import { defineComponent as R, useAttrs as M, useSlots as S, useCssModule as k, ref as x, computed as H, watch as O, onMounted as A, nextTick as I, onBeforeUnmount as P, openBlock as V, createBlock as $, mergeProps as _, unref as c, createSlots as q, withCtx as g, createElementVNode as j, renderSlot as D } from "vue";
-import F from "lodash-es/uniqueId";
-import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
-import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as M, useAttrs as S, useSlots as k, useCssModule as H, ref as x, computed as O, watch as A, onMounted as I, nextTick as P, onBeforeUnmount as V, openBlock as $, createBlock as q, mergeProps as _, unref as c, createSlots as j, withCtx as g, createElementVNode as D, renderSlot as F } from "vue";
+import L from "lodash-es/uniqueId";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
+import { _ as U } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";
 import "lodash-es/get";
-const U = ["id", "value"], W = /* @__PURE__ */ R({
+const W = ["id", "value"], Y = /* @__PURE__ */ M({
   name: "ll-textarea",
   __name: "Textarea",
   props: {
@@ -19,29 +19,29 @@ const U = ["id", "value"], W = /* @__PURE__ */ R({
   },
   emits: ["update:model-value"],
   setup(w, { emit: b }) {
-    const s = w, y = F("textarea-"), p = M(), z = S(), m = k(), d = x(), l = x(), T = H(() => {
+    const y = L("textarea-"), p = S(), z = k(), m = H(), s = w, T = b, d = x(), l = x(), B = O(() => {
       const e = { ...p };
       return delete e["data-test"], delete e.class, e;
     });
-    O(
+    A(
       () => s.resize,
       (e) => {
         var t;
         e ? v() : (t = l.value) == null || t.disconnect();
       }
     );
-    const B = (e) => {
-      b("update:model-value", e.target.value);
+    const C = (e) => {
+      T("update:model-value", e.target.value);
     }, v = () => {
       l.value || !d.value || (l.value = new ResizeObserver(([e]) => {
         const { target: t } = e, o = h(d.value) || document.documentElement, { scrollTop: a } = o;
         let n = 0;
         if (o === document.documentElement) {
-          const { top: r, height: i } = C(t), { innerHeight: u } = window;
+          const { top: r, height: i } = E(t), { innerHeight: u } = window;
           n = Math.max(r + i - (u + a), 0);
         } else {
-          const { top: r, height: i } = t.getBoundingClientRect(), { top: u } = o.getBoundingClientRect(), { offsetHeight: f } = o, E = r - u;
-          n = Math.max(E + i - f, 0);
+          const { top: r, height: i } = t.getBoundingClientRect(), { top: u } = o.getBoundingClientRect(), { offsetHeight: f } = o, R = r - u;
+          n = Math.max(R + i - f, 0);
         }
         n && requestAnimationFrame(() => {
           o.scrollTop = a + n;
@@ -53,7 +53,7 @@ const U = ["id", "value"], W = /* @__PURE__ */ R({
         return null;
       const { overflowY: o } = getComputedStyle(t);
       return o !== "visible" ? t : t === document.body ? document.documentElement : h(t);
-    }, C = (e) => {
+    }, E = (e) => {
       const { offsetWidth: t, offsetHeight: o } = e;
       let a = 0, n = 0;
       const r = function({ offsetLeft: i, offsetTop: u, offsetParent: f }) {
@@ -66,23 +66,23 @@ const U = ["id", "value"], W = /* @__PURE__ */ R({
         height: o
       };
     };
-    return A(async () => {
+    return I(async () => {
       var e;
       if (s.value !== null)
         throw new Error("ll-input: use :model-value or v-model instead of :value.");
       if (p.onInput)
         throw new Error("ll-input: use the @update:model-value event instead of @input");
-      (typeof s.resize == "boolean" && s.resize || (e = s.resize) != null && e.forceBrowserScroll) && (await I(), v());
-    }), P(() => {
+      (typeof s.resize == "boolean" && s.resize || (e = s.resize) != null && e.forceBrowserScroll) && (await P(), v());
+    }), V(() => {
       var e;
       (e = l.value) == null || e.disconnect();
-    }), (e, t) => (V(), $(L, _(s, {
+    }), (e, t) => ($(), q(N, _(s, {
       id: c(y),
       class: ["stash-textarea", [c(m).root, c(p).class]],
       "data-test": "stash-textarea"
-    }), q({
+    }), j({
       default: g(({ fieldId: o, hasError: a }) => [
-        j("textarea", _({
+        D("textarea", _({
           id: o,
           ref_key: "textareaRef",
           ref: d,
@@ -92,27 +92,27 @@ const U = ["id", "value"], W = /* @__PURE__ */ R({
           ],
           value: s.modelValue,
           "data-test": "stash-textarea|textarea"
-        }, T.value, { onInput: B }), null, 16, U)
+        }, B.value, { onInput: C }), null, 16, W)
       ]),
       _: 2
     }, [
       c(z).hint ? {
         name: "hint",
         fn: g(() => [
-          D(e.$slots, "hint")
+          F(e.$slots, "hint")
         ]),
         key: "0"
       } : void 0
     ]), 1040, ["id", "class"]));
   }
-}), Y = "_root_1bv4v_2", G = "_textarea_1bv4v_7", J = {
-  root: Y,
-  textarea: G,
+}), G = "_root_1bv4v_2", J = "_textarea_1bv4v_7", K = {
+  root: G,
+  textarea: J,
   "stash-textarea--error": "_stash-textarea--error_1bv4v_28"
-}, K = {
-  $style: J
-}, ae = /* @__PURE__ */ N(W, [["__cssModules", K]]);
+}, Q = {
+  $style: K
+}, ne = /* @__PURE__ */ U(Y, [["__cssModules", Q]]);
 export {
-  ae as default
+  ne as default
 };
 //# sourceMappingURL=Textarea.js.map

package/dist/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps {\n    /**\n     * Label text for the textarea element.\n     */\n    label?: string;\n\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Error text for the textarea element.\n     */\n    errorText?: string;\n\n    /**\n     * Hint text for the textarea element.\n     */\n    hintText?: string;\n\n    /**\n     * Render \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  /**\n   * Unique ID for the textarea, required for accessibility purposes\n   */\n  const id = uniqueId('textarea-');\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    label: ' ',\n    modelValue: '',\n    value: null,\n    errorText: '',\n    hintText: '',\n    showOptionalInLabel: false,\n    resize: false,\n  });\n\n  const emits =\n    defineEmits<{\n      /**\n       * Emitted when the model value changes.\n       */\n      (e: 'update:model-value', value: string): void;\n    }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      v ? setupResizeObserver() : observer.value?.disconnect();\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver(([entry]) => {\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" :id=\"id\" class=\"stash-textarea\" :class=\"[classes.root, attrs.class]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :class=\"[\n          classes.textarea,\n          { 'stash-textarea--error': hasError, 'tw-resize-y': props.resize, 'tw-resize-none': !props.resize },\n        ]\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        v-bind=\"inputAttrs\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    width: 100%;\n  }\n\n  .textarea {\n    background: var(--color-white);\n    border: 1px solid;\n    border-color: var(--color-ice-500);\n    border-radius: theme('borderRadius.DEFAULT');\n    color: var(--color-ice-700);\n    display: block;\n    min-height: 100px;\n    outline: none;\n    padding: theme('spacing[1.5]');\n    width: 100%;\n\n    &:hover {\n      border-color: var(--color-ice-500);\n    }\n\n    &:focus,\n    &:active {\n      border-color: var(--color-blue-500);\n    }\n\n    &.stash-textarea--error {\n      border-color: var(--color-red-500);\n      color: var(--color-red-500);\n    }\n\n    &::placeholder {\n      color: var(--color-ice-500);\n      opacity: 1;\n    }\n\n    &[disabled],\n    &[readonly] {\n      background-color: var(--color-ice-200);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-700);\n      pointer-events: none;\n    }\n\n    &[disabled]:active,\n    &[readonly]:active,\n    &[disabled]:focus,\n    &[readonly]:focus {\n      box-shadow: none;\n    }\n\n    &[disabled]::placeholder,\n    &[readonly]::placeholder {\n      text-transform: none;\n    }\n  }\n</style>\n"],"names":["id","uniqueId","attrs","useAttrs","slots","useSlots","classes","useCssModule","textareaRef","ref","observer","inputAttrs","computed","allAttrs","watch","props","v","setupResizeObserver","_a","onInput","event","emits","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps {\n    /**\n     * Label text for the textarea element.\n     */\n    label?: string;\n\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Error text for the textarea element.\n     */\n    errorText?: string;\n\n    /**\n     * Hint text for the textarea element.\n     */\n    hintText?: string;\n\n    /**\n     * Render \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  /**\n   * Unique ID for the textarea, required for accessibility purposes\n   */\n  const id = uniqueId('textarea-');\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    label: ' ',\n    modelValue: '',\n    value: null,\n    errorText: '',\n    hintText: '',\n    showOptionalInLabel: false,\n    resize: false,\n  });\n\n  const emits = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', value: string): void;\n  }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      v ? setupResizeObserver() : observer.value?.disconnect();\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver(([entry]) => {\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" :id=\"id\" class=\"stash-textarea\" :class=\"[classes.root, attrs.class]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :class=\"[\n          classes.textarea,\n          { 'stash-textarea--error': hasError, 'tw-resize-y': props.resize, 'tw-resize-none': !props.resize },\n        ]\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        v-bind=\"inputAttrs\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    width: 100%;\n  }\n\n  .textarea {\n    background: var(--color-white);\n    border: 1px solid;\n    border-color: var(--color-ice-500);\n    border-radius: theme('borderRadius.DEFAULT');\n    color: var(--color-ice-700);\n    display: block;\n    min-height: 100px;\n    outline: none;\n    padding: theme('spacing[1.5]');\n    width: 100%;\n\n    &:hover {\n      border-color: var(--color-ice-500);\n    }\n\n    &:focus,\n    &:active {\n      border-color: var(--color-blue-500);\n    }\n\n    &.stash-textarea--error {\n      border-color: var(--color-red-500);\n      color: var(--color-red-500);\n    }\n\n    &::placeholder {\n      color: var(--color-ice-500);\n      opacity: 1;\n    }\n\n    &[disabled],\n    &[readonly] {\n      background-color: var(--color-ice-200);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-700);\n      pointer-events: none;\n    }\n\n    &[disabled]:active,\n    &[readonly]:active,\n    &[disabled]:focus,\n    &[readonly]:focus {\n      box-shadow: none;\n    }\n\n    &[disabled]::placeholder,\n    &[readonly]::placeholder {\n      text-transform: none;\n    }\n  }\n</style>\n"],"names":["id","uniqueId","attrs","useAttrs","slots","useSlots","classes","useCssModule","props","__props","emits","__emit","textareaRef","ref","observer","inputAttrs","computed","allAttrs","watch","v","setupResizeObserver","_a","onInput","event","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}

package/dist/Textarea.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -33,7 +32,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextAreaProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextAreaProps>, {
     label: string;
     modelValue: string;
     value: null;
@@ -41,9 +40,9 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     hintText: string;
     showOptionalInLabel: boolean;
     resize: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:model-value": (value: string) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextAreaProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextAreaProps>, {
     label: string;
     modelValue: string;
     value: null;
@@ -51,17 +50,17 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     hintText: string;
     showOptionalInLabel: boolean;
     resize: boolean;
-}>>> & {
+}>>> & Readonly<{
     "onUpdate:model-value"?: ((value: string) => any) | undefined;
-}, {
-    label: string;
+}>, {
     resize: boolean | TextareaResizeOptions;
-    value: string | number | null;
+    label: string;
     errorText: string;
     hintText: string;
     showOptionalInLabel: boolean;
     modelValue: string;
-}, {}>, {
+    value: string | number | null;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     hint?(_: {}): any;
 }>;
 export default _default;

package/dist/Timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.js","sources":["../src/components/Timeline/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { SpacingDensities } from 'types';\n  import { computed, provide } from 'vue';\n\n  import { TIMELINE_INJECTION } from './keys';\n\n  export interface TimelineProps {\n    /**\n     * Sets which side of the timeline the main and opposed content is going to be displayed.\n     */\n    side?: 'start' | 'end';\n\n    /**\n     * Sets the size of each timeline item.\n     */\n    density?: SpacingDensities;\n  }\n\n  const props = withDefaults(defineProps<TimelineProps>(), {\n    side: 'end',\n    density: 'comfortable',\n  });\n\n  provide(TIMELINE_INJECTION.key, {\n    side: computed(() => props.side),\n    density: computed(() => props.density),\n  });\n</script>\n\n<template>\n  <ol\n    class=\"stash-timeline tw-grid tw-grid-flow-dense tw-items-start tw-justify-center tw-gap-x-3 tw-gap-y-1.5\"\n    :class=\"[`stash-timeline--${props.side}`, `stash-timeline--${props.density}`]\"\n    data-test=\"stash-timeline\"\n  >\n    <slot></slot>\n  </ol>\n</template>\n\n<style scoped>\n  .stash-timeline {\n    grid-template-columns: auto min-content auto;\n  }\n</style>\n"],"names":["provide","TIMELINE_INJECTION","computed","props"],"mappings":";;;;;;;;;;;AAuBE,WAAAA,EAAQC,EAAmB,KAAK;AAAA,MAC9B,MAAMC,EAAS,MAAMC,EAAM,IAAI;AAAA,MAC/B,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,IAAA,CACtC;;;;;;;;;"}
+{"version":3,"file":"Timeline.js","sources":["../src/components/Timeline/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { SpacingDensities } from 'types';\n  import { computed, provide } from 'vue';\n\n  import { TIMELINE_INJECTION } from './keys';\n\n  export interface TimelineProps {\n    /**\n     * Sets which side of the timeline the main and opposed content is going to be displayed.\n     */\n    side?: 'start' | 'end';\n\n    /**\n     * Sets the size of each timeline item.\n     */\n    density?: SpacingDensities;\n  }\n\n  const props = withDefaults(defineProps<TimelineProps>(), {\n    side: 'end',\n    density: 'comfortable',\n  });\n\n  provide(TIMELINE_INJECTION.key, {\n    side: computed(() => props.side),\n    density: computed(() => props.density),\n  });\n</script>\n\n<template>\n  <ol\n    class=\"stash-timeline tw-grid tw-grid-flow-dense tw-items-start tw-justify-center tw-gap-x-3 tw-gap-y-1.5\"\n    :class=\"[`stash-timeline--${props.side}`, `stash-timeline--${props.density}`]\"\n    data-test=\"stash-timeline\"\n  >\n    <slot></slot>\n  </ol>\n</template>\n\n<style scoped>\n  .stash-timeline {\n    grid-template-columns: auto min-content auto;\n  }\n</style>\n"],"names":["props","__props","provide","TIMELINE_INJECTION","computed"],"mappings":";;;;;;;;;;AAkBE,UAAMA,IAAQC;AAKd,WAAAC,EAAQC,EAAmB,KAAK;AAAA,MAC9B,MAAMC,EAAS,MAAMJ,EAAM,IAAI;AAAA,MAC/B,SAASI,EAAS,MAAMJ,EAAM,OAAO;AAAA,IAAA,CACtC;;;;;;;;;"}

package/dist/Timeline.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -33,16 +32,16 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TimelineProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TimelineProps>, {
     side: string;
     density: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TimelineProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TimelineProps>, {
     side: string;
     density: string;
-}>>>, {
+}>>> & Readonly<{}>, {
     side: "start" | "end";
     density: "compact" | "comfortable";
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/TimelineItem.js

@@ -1,21 +1,15 @@
-import { defineComponent as u, useSlots as w, inject as h, computed as l, openBlock as c, createElementBlock as m, createElementVNode as e, normalizeClass as r, renderSlot as p, unref as f, createCommentVNode as v } from "vue";
+import { defineComponent as w, useSlots as v, inject as f, computed as m, openBlock as c, createElementBlock as r, createElementVNode as e, normalizeClass as p, renderSlot as d, createCommentVNode as h } from "vue";
 import { T as _ } from "./keys-241d03b7.js";
 const I = {
   class: "stash-timeline-item group tw-contents tw-list-none",
   "data-test": "stash-timeline-item"
-}, T = /* @__PURE__ */ e("div", {
-  class: "stash-timeline-separator tw-col-start-2 tw-col-end-3 tw-flex tw-h-full tw-flex-col tw-items-center",
-  "data-test": "stash-timeline-separator"
-}, [
-  /* @__PURE__ */ e("div", { class: "tw-mt-[5px] tw-rounded-full tw-bg-ice-500 tw-p-1.5" }),
-  /* @__PURE__ */ e("div", { class: "tw-w-[2px] tw-flex-1 tw-bg-ice-500" })
-], -1), N = /* @__PURE__ */ u({
+}, x = /* @__PURE__ */ w({
   __name: "TimelineItem",
-  setup(b) {
-    const d = w(), s = h(_.key);
+  setup(T) {
+    const u = v(), s = f(_.key);
     if (!s)
       throw Error("The TimelineItem component must be a child of the Timeline component.");
-    const { density: o, side: t } = s, n = l(() => ({
+    const { density: o, side: t } = s, n = m(() => ({
       main: {
         "tw-col-start-3": t.value === "end",
         "tw-col-end-2": t.value === "start"
@@ -24,29 +18,35 @@ const I = {
         "tw-col-end-2": t.value === "end",
         "tw-col-start-3": t.value === "start"
       }
-    })), i = l(() => ({
+    })), i = m(() => ({
       "tw-mb-3": o.value === "compact",
       "tw-mb-6": o.value === "comfortable"
     }));
-    return (a, E) => (c(), m("li", I, [
+    return (l, a) => (c(), r("li", I, [
       e("div", {
-        class: r(["stash-timeline-item__main-content", [n.value.main, i.value]]),
+        class: p(["stash-timeline-item__main-content", [n.value.main, i.value]]),
         "data-test": "stash-timeline-item|content"
       }, [
-        p(a.$slots, "default")
+        d(l.$slots, "default")
       ], 2),
-      T,
-      f(d).opposite ? (c(), m("div", {
+      a[0] || (a[0] = e("div", {
+        class: "stash-timeline-separator tw-col-start-2 tw-col-end-3 tw-flex tw-h-full tw-flex-col tw-items-center",
+        "data-test": "stash-timeline-separator"
+      }, [
+        e("div", { class: "tw-mt-[5px] tw-rounded-full tw-bg-ice-500 tw-p-1.5" }),
+        e("div", { class: "tw-w-[2px] tw-flex-1 tw-bg-ice-500" })
+      ], -1)),
+      u.opposite ? (c(), r("div", {
         key: 0,
-        class: r(["stash-timeline-item__opposite-content", [n.value.opposite, i.value]]),
+        class: p(["stash-timeline-item__opposite-content", [n.value.opposite, i.value]]),
         "data-test": "stash-timeline-item|opposite-content"
       }, [
-        p(a.$slots, "opposite")
-      ], 2)) : v("", !0)
+        d(l.$slots, "opposite")
+      ], 2)) : h("", !0)
     ]));
   }
 });
 export {
-  N as default
+  x as default
 };
 //# sourceMappingURL=TimelineItem.js.map

package/dist/TimelineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.js","sources":["../src/components/TimelineItem/TimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject } from 'vue';\n\n  import { TIMELINE_INJECTION } from '../Timeline/keys';\n\n  const slots =\n    defineSlots<{\n      /**\n       * The opposite content of the timeline item.\n       */\n      opposite?: Record<string, never>;\n\n      /**\n       * The default content of the timeline item.\n       */\n      default: Record<string, never>;\n    }>();\n\n  const timelineInjection = inject(TIMELINE_INJECTION.key);\n\n  if (!timelineInjection) {\n    throw Error('The TimelineItem component must be a child of the Timeline component.');\n  }\n\n  const { density, side } = timelineInjection;\n\n  const sideClasses = computed(() => {\n    return {\n      main: {\n        'tw-col-start-3': side.value === 'end',\n        'tw-col-end-2': side.value === 'start',\n      },\n      opposite: {\n        'tw-col-end-2': side.value === 'end',\n        'tw-col-start-3': side.value === 'start',\n      },\n    };\n  });\n\n  const contentDensity = computed(() => ({\n    'tw-mb-3': density.value === 'compact',\n    'tw-mb-6': density.value === 'comfortable',\n  }));\n</script>\n\n<template>\n  <li class=\"stash-timeline-item group tw-contents tw-list-none\" data-test=\"stash-timeline-item\">\n    <div\n      class=\"stash-timeline-item__main-content\"\n      :class=\"[sideClasses.main, contentDensity]\"\n      data-test=\"stash-timeline-item|content\"\n    >\n      <slot></slot>\n    </div>\n\n    <div\n      class=\"stash-timeline-separator tw-col-start-2 tw-col-end-3 tw-flex tw-h-full tw-flex-col tw-items-center\"\n      data-test=\"stash-timeline-separator\"\n    >\n      <div class=\"tw-mt-[5px] tw-rounded-full tw-bg-ice-500 tw-p-1.5\"></div>\n      <div class=\"tw-w-[2px] tw-flex-1 tw-bg-ice-500\"></div>\n    </div>\n\n    <div\n      v-if=\"slots.opposite\"\n      class=\"stash-timeline-item__opposite-content\"\n      :class=\"[sideClasses.opposite, contentDensity]\"\n      data-test=\"stash-timeline-item|opposite-content\"\n    >\n      <slot name=\"opposite\"></slot>\n    </div>\n  </li>\n</template>\n"],"names":["slots","_useSlots","timelineInjection","inject","TIMELINE_INJECTION","density","side","sideClasses","computed","contentDensity"],"mappings":";;;;;;;;;;;;;;AAKE,UAAMA,IACJC,KAYIC,IAAoBC,EAAOC,EAAmB,GAAG;AAEvD,QAAI,CAACF;AACH,YAAM,MAAM,uEAAuE;AAG/E,UAAA,EAAE,SAAAG,GAAS,MAAAC,EAAS,IAAAJ,GAEpBK,IAAcC,EAAS,OACpB;AAAA,MACL,MAAM;AAAA,QACJ,kBAAkBF,EAAK,UAAU;AAAA,QACjC,gBAAgBA,EAAK,UAAU;AAAA,MACjC;AAAA,MACA,UAAU;AAAA,QACR,gBAAgBA,EAAK,UAAU;AAAA,QAC/B,kBAAkBA,EAAK,UAAU;AAAA,MACnC;AAAA,IAAA,EAEH,GAEKG,IAAiBD,EAAS,OAAO;AAAA,MACrC,WAAWH,EAAQ,UAAU;AAAA,MAC7B,WAAWA,EAAQ,UAAU;AAAA,IAC7B,EAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TimelineItem.js","sources":["../src/components/TimelineItem/TimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject } from 'vue';\n\n  import { TIMELINE_INJECTION } from '../Timeline/keys';\n\n  const slots = defineSlots<{\n    /**\n     * The opposite content of the timeline item.\n     */\n    opposite?: Record<string, never>;\n\n    /**\n     * The default content of the timeline item.\n     */\n    default: Record<string, never>;\n  }>();\n\n  const timelineInjection = inject(TIMELINE_INJECTION.key);\n\n  if (!timelineInjection) {\n    throw Error('The TimelineItem component must be a child of the Timeline component.');\n  }\n\n  const { density, side } = timelineInjection;\n\n  const sideClasses = computed(() => {\n    return {\n      main: {\n        'tw-col-start-3': side.value === 'end',\n        'tw-col-end-2': side.value === 'start',\n      },\n      opposite: {\n        'tw-col-end-2': side.value === 'end',\n        'tw-col-start-3': side.value === 'start',\n      },\n    };\n  });\n\n  const contentDensity = computed(() => ({\n    'tw-mb-3': density.value === 'compact',\n    'tw-mb-6': density.value === 'comfortable',\n  }));\n</script>\n\n<template>\n  <li class=\"stash-timeline-item group tw-contents tw-list-none\" data-test=\"stash-timeline-item\">\n    <div\n      class=\"stash-timeline-item__main-content\"\n      :class=\"[sideClasses.main, contentDensity]\"\n      data-test=\"stash-timeline-item|content\"\n    >\n      <slot></slot>\n    </div>\n\n    <div\n      class=\"stash-timeline-separator tw-col-start-2 tw-col-end-3 tw-flex tw-h-full tw-flex-col tw-items-center\"\n      data-test=\"stash-timeline-separator\"\n    >\n      <div class=\"tw-mt-[5px] tw-rounded-full tw-bg-ice-500 tw-p-1.5\"></div>\n      <div class=\"tw-w-[2px] tw-flex-1 tw-bg-ice-500\"></div>\n    </div>\n\n    <div\n      v-if=\"slots.opposite\"\n      class=\"stash-timeline-item__opposite-content\"\n      :class=\"[sideClasses.opposite, contentDensity]\"\n      data-test=\"stash-timeline-item|opposite-content\"\n    >\n      <slot name=\"opposite\"></slot>\n    </div>\n  </li>\n</template>\n"],"names":["slots","_useSlots","timelineInjection","inject","TIMELINE_INJECTION","density","side","sideClasses","computed","contentDensity"],"mappings":";;;;;;;;AAKE,UAAMA,IAAQC,KAYRC,IAAoBC,EAAOC,EAAmB,GAAG;AAEvD,QAAI,CAACF;AACH,YAAM,MAAM,uEAAuE;AAG/E,UAAA,EAAE,SAAAG,GAAS,MAAAC,EAAS,IAAAJ,GAEpBK,IAAcC,EAAS,OACpB;AAAA,MACL,MAAM;AAAA,QACJ,kBAAkBF,EAAK,UAAU;AAAA,QACjC,gBAAgBA,EAAK,UAAU;AAAA,MACjC;AAAA,MACA,UAAU;AAAA,QACR,gBAAgBA,EAAK,UAAU;AAAA,QAC/B,kBAAkBA,EAAK,UAAU;AAAA,MACnC;AAAA,IAAA,EAEH,GAEKG,IAAiBD,EAAS,OAAO;AAAA,MACrC,WAAWH,EAAQ,UAAU;AAAA,MAC7B,WAAWA,EAAQ,UAAU;AAAA,IAC7B,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TimelineItem.vue.d.ts

@@ -1,9 +1,7 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -11,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>, Readonly<{
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, Readonly<{
     /**
      * The opposite content of the timeline item.
      */
@@ -20,7 +18,16 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {},
      * The default content of the timeline item.
      */
     default: Record<string, never>;
-}>>;
+}> & {
+    /**
+     * The opposite content of the timeline item.
+     */
+    opposite?: Record<string, never> | undefined;
+    /**
+     * The default content of the timeline item.
+     */
+    default: Record<string, never>;
+}>;
 export default _default;
 
 export { }