@indielayer/ui 0.2.4 → 1.0.0-alpha.0

package/lib/umd/index.js

@@ -1,4361 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.IndieUI = {}, global.Vue));
-})(this, (function (exports, vue) { 'use strict';
-
-  const validator$c = {
-    variant: [
-      'rounded',
-      'squared',
-    ],
-  };
-
-  var script$F = {
-    name: 'XAvatar',
-
-    validator: validator$c,
-
-    props: {
-      alt: {
-        type: String,
-        default: null,
-      },
-
-      color: {
-        type: String,
-        default: 'primary',
-      },
-
-      name: {
-        type: String,
-        default: null,
-      },
-
-      size: {
-        type: String,
-        default: null,
-      },
-
-      outlined: {
-        type: Boolean,
-        default: false,
-      },
-
-      src: {
-        type: String,
-        default: null,
-      },
-
-      tag: {
-        type: String,
-        default: 'span',
-      },
-
-      squared: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    data() {
-      return {
-        source: null,
-      }
-    },
-
-    computed: {
-      initials() {
-        if (this.name) {
-          const initials = this.name.match(/\b\w/g) || [];
-
-          return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
-        }
-
-        return ''
-      },
-    },
-
-    mounted() {
-      if (this.src) {
-        const img = new Image();
-
-        img.onload = () => { this.source = this.src; };
-        img.onerror = () => { };
-        img.src = this.src;
-      }
-    },
-  };
-
-  const _hoisted_1$q = {
-    key: 0,
-    class: "leading-none"
-  };
-  const _hoisted_2$h = ["alt", "src"];
-
-  function render$D(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
-      class: vue.normalizeClass(["inline-flex items-center justify-center overflow-hidden", [
-        // color
-        { [`bg-${$props.color}-500 text-${$props.color}-50`]: !$data.source && !$props.outlined },
-        {
-          // border
-          'border border-gray-400 dark:border-gray-500': !$data.source && $props.outlined,
-
-          // size
-          'h-6 w-6 text-xs': $props.size === 'xs',
-          'h-7 w-7 text-sm': $props.size === 'sm',
-          'h-10 w-10': !['xs', 'sm', 'lg', 'xl'].includes($props.size),
-          'h-12 w-12 text-lg': $props.size === 'lg',
-          'h-20 w-20 text-2xl': $props.size === 'xl',
-          'h-36 w-36 text-2xl': $props.size === '2xl',
-        },
-        $props.squared ? 'rounded-md' : 'rounded-full'
-      ]])
-    }, {
-      default: vue.withCtx(() => [
-        (!$data.source && $props.name)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$q, vue.toDisplayString($options.initials), 1 /* TEXT */))
-          : vue.createCommentVNode("v-if", true),
-        ($data.source)
-          ? (vue.openBlock(), vue.createElementBlock("img", {
-              key: 1,
-              alt: $props.alt,
-              src: $props.src,
-              class: "h-full w-full"
-            }, null, 8 /* PROPS */, _hoisted_2$h))
-          : vue.createCommentVNode("v-if", true)
-      ]),
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["class"]))
-  }
-
-  script$F.render = render$D;
-  script$F.__file = "src/components/avatar/Avatar.vue";
-
-  const validator$b = {
-    size: ['auto', 'xs', 'sm', 'md', 'lg', 'xl'],
-  };
-
-  const withProps$2 = () => ({
-    size: {
-      type: String,
-      default: null,
-      validator: (value) => validator$b.size.includes(value),
-    },
-    color: {
-      type: String,
-      default: 'primary',
-    },
-    flat: {
-      type: Boolean,
-      default: false,
-    },
-  });
-
-  const withValidator$2 = () => validator$b;
-
-  const validator$a = {
-    ...withValidator$2(),
-  };
-
-  const withProps$1 = () => ({
-    ...withProps$2(),
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-  });
-
-  const withValidator$1 = () => validator$a;
-
-  const useInteractive = () => {
-    const focusRef = vue.ref(null);
-
-    const focus = () => {
-      if (focusRef.value) focusRef.value.focus();
-    };
-
-    return {
-      focusRef,
-      focus,
-    }
-  };
-
-  var script$E = {
-    name: 'XSpinner',
-
-    props: {
-      size: {
-        type: String,
-        default: null,
-      },
-    },
-  };
-
-  const _hoisted_1$p = /*#__PURE__*/vue.createStaticVNode("<g fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(1 1)\" stroke-width=\"2\"><circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\"></circle><path d=\"M36 18c0-9.94-8.06-18-18-18\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 18 18\" to=\"360 18 18\" dur=\"0.5s\" repeatCount=\"indefinite\"></animateTransform></path></g></g>", 1);
-  const _hoisted_2$g = [
-    _hoisted_1$p
-  ];
-
-  function render$C(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("svg", {
-      class: vue.normalizeClass([
-        {
-          'h-3 w-3': $props.size === 'xs',
-          'h-4 w-4': $props.size === 'sm',
-          'h-5 w-5': !['xs', 'sm', 'xl'].includes($props.size),
-          'h-6 w-6': $props.size === 'xl',
-        },
-
-      ]),
-      viewBox: "0 0 38 38",
-      xmlns: "http://www.w3.org/2000/svg",
-      style: {"stroke":"currentColor"}
-    }, _hoisted_2$g, 2 /* CLASS */))
-  }
-
-  script$E.render = render$C;
-  script$E.__file = "src/components/spinner/Spinner.vue";
-
-  var script$D = {
-    name: 'XIcon',
-
-    validator: withValidator$2(),
-
-    props: {
-      ...withProps$2(),
-
-      icon: {
-        type: String,
-        required: true,
-      },
-    },
-
-    computed: {
-      icons() {
-        return this.$icons ? this.$icons : {}
-      },
-    },
-  };
-
-  const _hoisted_1$o = ["innerHTML"];
-
-  function render$B(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("svg", {
-      class: vue.normalizeClass(["stroke-2 inline-block", [
-        {
-          'h-3 w-3': _ctx.size === 'xs',
-          'h-4 w-4': _ctx.size === 'sm',
-          'h-5 w-5': !['xs', 'sm', 'xl'].includes(_ctx.size),
-          'h-6 w-6': _ctx.size === 'xl',
-        },
-      ]]),
-      fill: "none",
-      stroke: "currentColor",
-      viewBox: "0 0 24 24",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, [
-      vue.createElementVNode("g", {
-        innerHTML: $options.icons[$props.icon] ? $options.icons[$props.icon] : $props.icon
-      }, null, 8 /* PROPS */, _hoisted_1$o)
-    ], 2 /* CLASS */))
-  }
-
-  script$D.render = render$B;
-  script$D.__file = "src/components/icon/Icon.vue";
-
-  const validator$9 = {
-    group: [false, true, '', 'first', 'last'],
-  };
-
-  var script$C = {
-    name: 'XButton',
-    components: {
-      XSpinner: script$E,
-      XIcon: script$D,
-    },
-
-    validator: {
-      ...withValidator$1(),
-      ...validator$9,
-    },
-
-    props: {
-      ...withProps$1(),
-
-      group: {
-        default: false,
-        type: [String, Boolean],
-        validator: (value) => validator$9.group.includes(value),
-      },
-
-      icon: {
-        type: String,
-        default: null,
-      },
-
-      iconRight: {
-        type: Boolean,
-        default: false,
-      },
-
-      to: {
-        type: String,
-        default: undefined,
-      },
-
-      tag: {
-        type: String,
-        default: 'button',
-      },
-
-      type: {
-        type: String,
-        default: 'button',
-      },
-
-      outlined: {
-        type: Boolean,
-        default: false,
-      },
-
-      rounded: {
-        type: Boolean,
-        default: false,
-      },
-
-      glow: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    setup() {
-      return {
-        ...useInteractive(),
-      }
-    },
-  };
-
-  function render$A(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_x_spinner = vue.resolveComponent("x-spinner");
-    const _component_x_icon = vue.resolveComponent("x-icon");
-
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.to ? 'router-link' : $props.tag), {
-      ref: "focusRef",
-      to: $props.to,
-      class: vue.normalizeClass(["relative leading-tight transition-colors duration-150 cursor-pointer focus:outline-none inline-block items-center justify-center font-medium", [
-        {
-          'shadow': !_ctx.flat && !$props.glow,
-          [`shadow-lg shadow-${_ctx.color}-500/50`]: !_ctx.flat && $props.glow,
-        },
-        _ctx.disabled ?
-          // disabled
-          'border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 cursor-not-allowed'
-          : {
-            // not disabled
-            [`border border-${_ctx.color}-500 text-${_ctx.color}-500`]: $props.outlined,
-
-            // colors
-            [`border border-transparent text-${_ctx.color}-50 bg-${_ctx.color}-500`]: !$props.outlined,
-
-            // colors hovers | actives
-            'hover:bg-dark-image active:bg-darker-image active:shadow-none': !_ctx.loading && !$props.outlined,
-            [`hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:hover:active:bg-gray-600`]: !_ctx.loading && $props.outlined,
-          },
-        _ctx.$slots.default ? {
-          // size
-          'py-1': _ctx.size === 'auto',
-          'px-2 py-1 text-xs': _ctx.size === 'xs',
-          'px-2 py-1 text-sm': _ctx.size === 'sm',
-          'px-4 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
-          'px-6 py-3 text-lg': _ctx.size === 'lg',
-          'px-10 py-6 text-xl': _ctx.size === 'xl',
-        } : 'px-3 py-2',
-        {
-          // icon
-          'inline-flex items-center': $props.icon,
-
-          // group
-          'rounded-button': $props.group === false,
-          'rounded-l-button': $props.group === 'first',
-          'rounded-r-button': $props.group === 'last',
-
-          '!rounded-full': $props.rounded,
-
-          // loading
-          'cursor-default': _ctx.loading,
-
-          // content
-          'flex items-center justify-center': _ctx.loading,
-          'flex-row-reverse': $props.icon && $props.iconRight
-        },
-
-      ]]),
-      "aria-busy": _ctx.loading ? 'true' : null,
-      "aria-disabled": $props.tag !== 'button' && _ctx.disabled ? 'true' : null,
-      disabled: _ctx.disabled || _ctx.loading,
-      type: $props.tag === 'button' ? $props.type : null
-    }, {
-      default: vue.withCtx(() => [
-        (_ctx.loading)
-          ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
-              key: 0,
-              size: _ctx.size,
-              class: "absolute"
-            }, null, 8 /* PROPS */, ["size"]))
-          : vue.createCommentVNode("v-if", true),
-        ($props.icon)
-          ? (vue.openBlock(), vue.createElementBlock("span", {
-              key: 1,
-              class: vue.normalizeClass(["flex", [{
-          'mr-2': _ctx.$slots.default && !$props.iconRight,
-          'ml-2': _ctx.$slots.default && $props.iconRight,
-          'invisible': _ctx.loading
-        }]])
-            }, [
-              vue.createVNode(_component_x_icon, {
-                size: _ctx.size,
-                icon: $props.icon
-              }, null, 8 /* PROPS */, ["size", "icon"])
-            ], 2 /* CLASS */))
-          : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("span", {
-          class: vue.normalizeClass({ 'invisible': _ctx.loading })
-        }, [
-          vue.renderSlot(_ctx.$slots, "default")
-        ], 2 /* CLASS */)
-      ]),
-      _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["to", "class", "aria-busy", "aria-disabled", "disabled", "type"]))
-  }
-
-  script$C.render = render$A;
-  script$C.__file = "src/components/button/Button.vue";
-
-  var script$B = {
-    name: 'XCard',
-    props: {
-      flat: {
-        type: Boolean,
-        default: false,
-      },
-
-      tag: {
-        type: String,
-        default: 'div',
-      },
-    },
-  };
-
-  function render$z(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
-      class: vue.normalizeClass(["rounded bg-white dark:bg-gray-800", [
-        {
-          'shadow': !$props.flat,
-        },
-      ]])
-    }, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["class"]))
-  }
-
-  script$B.render = render$z;
-  script$B.__file = "src/components/card/Card.vue";
-
-  const validator$8 = {
-    ...withValidator$1(),
-  };
-
-  const withProps = () => ({
-    ...withProps$1(),
-    name: {
-      type: String,
-      default: null,
-    },
-    modelValue: {
-      type: [String, Number, Boolean, Function, Object, Array],
-      default: null,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    validateOnInput: {
-      type: Boolean,
-      default: true,
-    },
-    error: {
-      type: String,
-      default: '',
-    },
-    rules: {
-      type: Array,
-      default: () => [],
-    },
-  });
-
-  const withValidator = () => validator$8;
-
-  const withEmits = (useListeners = true) => {
-    const emits = ['update:modelValue'];
-
-    if (!useListeners) return emits
-
-    return emits.concat(['blur', 'focus', 'input', 'change'])
-  };
-
-  const useInputtable = (props, { attrs, emit, useListeners = true } = {}) => {
-    const interactive = useInteractive();
-
-    const isFirstValidation = vue.ref(true);
-    const errorInternal = vue.ref(props.error);
-
-    const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7);
-    const nameInternal = vue.ref(name);
-
-    vue.watch(() => props.error, (val) => { errorInternal.value = val; });
-    vue.watch(() => props.name, (val) => { if (val) nameInternal.value = val; });
-
-    const form = vue.inject('form', {
-      registerInput: () => {},
-      unregisterInput: () => {},
-    });
-
-    const reset = () => {
-      errorInternal.value = '';
-      isFirstValidation.value = true;
-      emit('update:modelValue', '');
-    };
-
-    const setError = (val) => {
-      errorInternal.value = val;
-    };
-
-    const validate = (val) => {
-      val = val || props.modelValue;
-
-      isFirstValidation.value = false;
-
-      for (let i = 0; i < props.rules.length; i++) {
-        const item = props.rules[i];
-
-        let isValid = true;
-
-        // Direct Function
-        if (typeof item === 'function') {
-          const rule = item;
-
-          isValid = rule(val);
-        } else if (Array.isArray(item) && item.length === 2) {
-          // Rule array [function, options]
-          const { 0: rule, 1: options } = item;
-
-          isValid = rule(val, options);
-        } else {
-          // Rule object { fn, options }
-          const rule = item.fn;
-          const { options } = item;
-
-          isValid = rule(val, options);
-        }
-
-        if (isValid !== true) {
-          errorInternal.value = isValid;
-
-          return false
-        }
-      }
-
-      errorInternal.value = '';
-
-      return true
-    };
-
-    const inputListeners = useListeners ? vue.computed(() => {
-      return {
-        attrs,
-        blur: (event) => emit('blur', event),
-        focus: (event) => emit('focus', event),
-        input: (event) => {
-          if (props.validateOnInput && !isFirstValidation.value) validate(event.target.value);
-          emit('update:modelValue', event.target.value);
-        },
-        change: (event) => emit('change', event),
-      }
-    }) : vue.ref({});
-
-    vue.onMounted(() => {
-      form.registerInput(nameInternal.value, { focus: interactive.focus, validate, setError });
-    });
-
-    vue.onUnmounted(() => {
-      form.unregisterInput(nameInternal.value);
-    });
-
-    return {
-      ...interactive,
-
-      // data
-      isFirstValidation,
-      errorInternal,
-
-      // computed
-      inputListeners,
-
-      // methods
-      reset,
-      validate,
-      setError,
-    }
-  };
-
-  var script$A = {
-    name: 'XCheckbox',
-    components: {
-      XSpinner: script$E,
-    },
-
-    validator: {
-      ...withValidator(),
-    },
-
-    props: {
-      ...withProps(),
-
-      label: {
-        type: String,
-        default: null,
-      },
-
-      glow: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    emits: withEmits(false),
-
-    setup(props, { attrs, emit }) {
-      return {
-        ...useInputtable(props, { attrs, emit, useListeners: false }),
-      }
-    },
-
-    computed: {
-      checked: {
-        get() {
-          return this.modelValue
-        },
-
-        set(val) {
-          this.$emit('update:modelValue', val);
-        },
-      },
-    },
-
-    methods: {
-      toggle() {
-        this.$emit('update:modelValue', !this.modelValue);
-      },
-    },
-  };
-
-  const _hoisted_1$n = { class: "inline-block mb-1 relative cursor-pointer pb-2" };
-  const _hoisted_2$f = ["aria-checked", "aria-disabled", "disabled", "name", "required", "value"];
-  const _hoisted_3$c = /*#__PURE__*/vue.createElementVNode("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1 /* HOISTED */);
-  const _hoisted_4$a = [
-    _hoisted_3$c
-  ];
-  const _hoisted_5$6 = ["textContent"];
-  const _hoisted_6$5 = ["textContent"];
-
-  function render$y(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_x_spinner = vue.resolveComponent("x-spinner");
-
-    return (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$n, [
-      vue.createElementVNode("div", {
-        ref: "focusRef",
-        class: vue.normalizeClass(["flex items-center", { 'cursor-not-allowed': _ctx.disabled }]),
-        tabindex: 0,
-        onKeypress: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => ($options.toggle && $options.toggle(...args)), ["prevent","stop"]), ["enter","space"]))
-      }, [
-        vue.withDirectives(vue.createElementVNode("input", {
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.checked) = $event)),
-          "aria-checked": $options.checked ? 'true' : 'false',
-          "aria-disabled": _ctx.disabled ? 'true' : null,
-          type: "checkbox",
-          class: "invisible absolute",
-          disabled: _ctx.disabled || _ctx.loading,
-          name: _ctx.name,
-          required: _ctx.required,
-          value: _ctx.modelValue
-        }, null, 8 /* PROPS */, _hoisted_2$f), [
-          [vue.vModelCheckbox, $options.checked]
-        ]),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["rounded flex justify-center items-center flex-shrink-0", [
-            {
-              'shadow': !_ctx.flat && !_ctx.loading,
-              [`shadow-lg shadow-${_ctx.color}-500/50`]: !_ctx.flat && $props.glow && _ctx.modelValue,
-
-              'h-4 w-4': _ctx.size === 'sm' || _ctx.size === 'xs',
-              'h-5 w-5': !['xs', 'sm', 'xl'].includes(_ctx.size),
-              'h-6 w-6': _ctx.size === 'xl',
-            },
-            _ctx.disabled ? {
-              'bg-gray-500 border-gray-600 dark:border-gray-400': _ctx.modelValue,
-              'bg-gray-200 border-gray-300 dark:border-gray-700': !_ctx.modelValue,
-            } :
-            {
-              [`bg-${_ctx.color}-500 border-${_ctx.color}-500`]: _ctx.modelValue && !_ctx.loading,
-              'border bg-white dark:bg-gray-900 border-gray-300 hover:border-gray-900 dark:border-gray-700': !_ctx.modelValue && !_ctx.loading,
-            }
-          ]])
-        }, [
-          (_ctx.loading)
-            ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
-                key: 0,
-                size: _ctx.size,
-                class: "absolute"
-              }, null, 8 /* PROPS */, ["size"]))
-            : (vue.openBlock(), vue.createElementBlock("svg", {
-                key: 1,
-                class: vue.normalizeClass(["fill-current text-gray-100", {
-              'opacity-0': !_ctx.modelValue,
-              'h-2 w-2': _ctx.size === 'sm' || _ctx.size === 'xs',
-              'h-3 w-3': !['xs', 'sm', 'xl'].includes(_ctx.size),
-              'h-4 w-4': _ctx.size === 'xl',
-            }]),
-                viewBox: "0 0 20 20"
-              }, _hoisted_4$a, 2 /* CLASS */))
-        ], 2 /* CLASS */),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["inline-block font-medium text-gray-800 dark:text-gray-200 pl-2", {
-            'text-xs': _ctx.size === 'xs',
-            'text-sm': _ctx.size === 'sm',
-            'text-lg': _ctx.size === 'lg',
-            'text-xl': _ctx.size === 'xl',
-          }])
-        }, [
-          ($props.label)
-            ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 0,
-                textContent: vue.toDisplayString($props.label)
-              }, null, 8 /* PROPS */, _hoisted_5$6))
-            : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
-        ], 2 /* CLASS */)
-      ], 34 /* CLASS, HYDRATE_EVENTS */),
-      (_ctx.errorInternal)
-        ? (vue.openBlock(), vue.createElementBlock("p", {
-            key: 0,
-            class: "text-sm text-error-500 mt-1",
-            textContent: vue.toDisplayString(_ctx.errorInternal)
-          }, null, 8 /* PROPS */, _hoisted_6$5))
-        : vue.createCommentVNode("v-if", true)
-    ]))
-  }
-
-  script$A.render = render$y;
-  script$A.__file = "src/components/checkbox/Checkbox.vue";
-
-  var script$z = {
-    name: 'XCollapse',
-
-    props: {
-      disabled: {
-        default: false,
-        type: Boolean,
-      },
-
-      expanded: {
-        default: false,
-        type: Boolean,
-      },
-
-      iconLeft: {
-        default: false,
-        type: Boolean,
-      },
-
-      tag: {
-        default: 'div',
-        type: String,
-      },
-    },
-
-    data() {
-      return {
-        collapsed: !this.expanded,
-        maxHeight: !this.expanded ? 0 : 'auto',
-        observer: null,
-      }
-    },
-
-    beforeMount() {
-      window.addEventListener('resize', this.onResize);
-    },
-
-    beforeUnmount() {
-      this.observer.disconnect();
-      window.removeEventListener('resize', this.onResize);
-    },
-
-    mounted() {
-      this.observer = new ResizeObserver(this.onResize);
-      this.observer.observe(this.$refs.content);
-    },
-
-    methods: {
-      toggleExpand() {
-        if (this.disabled) return
-
-        this.collapsed = !this.collapsed;
-        this.$emit('toggle', this.collapsed);
-        this.onResize();
-      },
-
-      onResize() {
-        if (this.collapsed) {
-          this.maxHeight = 0;
-        } else {
-          this.maxHeight = this.$refs.content.offsetHeight;
-        }
-      },
-    },
-  };
-
-  const _hoisted_1$m = { class: "flex-1" };
-  const _hoisted_2$e = { class: "absolute top-1/2 transform -translate-y-1/2 right-2" };
-  const _hoisted_3$b = /*#__PURE__*/vue.createElementVNode("polyline", { points: "6 9 12 15 18 9" }, null, -1 /* HOISTED */);
-  const _hoisted_4$9 = [
-    _hoisted_3$b
-  ];
-  const _hoisted_5$5 = { ref: "content" };
-
-  function render$x(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
-      "aria-disabled": $props.disabled,
-      "aria-expanded": $data.collapsed ? 'false' : 'true'
-    }, {
-      default: vue.withCtx(() => [
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["flex items-center relative", {
-          'cursor-pointer' : !$props.disabled,
-          'flex-row-reverse': $props.iconLeft,
-        }]),
-          onClick: _cache[0] || (_cache[0] = $event => ($options.toggleExpand()))
-        }, [
-          vue.createElementVNode("div", _hoisted_1$m, [
-            vue.renderSlot(_ctx.$slots, "default", { collapsed: $data.collapsed })
-          ]),
-          vue.createElementVNode("div", _hoisted_2$e, [
-            (vue.openBlock(), vue.createElementBlock("svg", {
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              "stroke-linejoin": "round",
-              "stroke-linecap": "round",
-              fill: "none",
-              role: "presentation",
-              class: vue.normalizeClass(["stroke-2 w-5 h-5 transform transition-transform duration-200", [
-              $props.iconLeft ? 'mr-2' : 'ml-2',
-              { 'rotate-180': !$data.collapsed }
-            ]])
-            }, _hoisted_4$9, 2 /* CLASS */))
-          ])
-        ], 2 /* CLASS */),
-        (_ctx.$slots.summary)
-          ? vue.renderSlot(_ctx.$slots, "summary", { key: 0 })
-          : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("div", {
-          class: "overflow-y-hidden transition-all duration-300 ease-in-out",
-          style: vue.normalizeStyle({ maxHeight: $data.maxHeight + 'px' })
-        }, [
-          vue.createElementVNode("div", _hoisted_5$5, [
-            vue.renderSlot(_ctx.$slots, "content")
-          ], 512 /* NEED_PATCH */)
-        ], 4 /* STYLE */)
-      ]),
-      _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["aria-disabled", "aria-expanded"]))
-  }
-
-  script$z.render = render$x;
-  script$z.__file = "src/components/collapse/Collapse.vue";
-
-  var script$y = {
-    name: 'XContainer',
-
-    props: {
-      tag: {
-        type: String,
-        default: 'div',
-      },
-    },
-  };
-
-  function render$w(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "container mx-auto px-4" }, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3 /* FORWARDED */
-    }))
-  }
-
-  script$y.render = render$w;
-  script$y.__file = "src/components/container/Container.vue";
-
-  var script$x = {
-    name: 'XDivider',
-
-    props: {
-      label: {
-        type: String,
-        default: '',
-      },
-      vertical: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-
-  const _hoisted_1$l = ["textContent"];
-
-  function render$v(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("div", {
-      class: vue.normalizeClass([[
-        {
-          'h-full flex-col': $props.vertical,
-          'w-full': !$props.vertical
-        },
-      ], "flex justify-center items-center"])
-    }, [
-      vue.createElementVNode("div", {
-        class: "bg-gray-200 dark:bg-gray-600 flex-grow",
-        style: vue.normalizeStyle([
-          {
-            width: $props.vertical ? '1px' : 'auto',
-            height: !$props.vertical ? '1px' : 'auto'
-          }
-        ])
-      }, null, 4 /* STYLE */),
-      ($props.label)
-        ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: vue.normalizeClass(["font-medium text-sm text-gray-600 dark:text-gray-300", [{
-          'my-2': $props.vertical,
-          'mx-4': !$props.vertical
-        }]]),
-            textContent: vue.toDisplayString($props.label)
-          }, null, 10 /* CLASS, PROPS */, _hoisted_1$l))
-        : vue.createCommentVNode("v-if", true),
-      vue.createElementVNode("div", {
-        class: "bg-gray-200 dark:bg-gray-600 flex-grow",
-        style: vue.normalizeStyle([
-          {
-            width: $props.vertical ? '1px' : 'auto',
-            height: !$props.vertical ? '1px' : 'auto'
-          }
-        ])
-      }, null, 4 /* STYLE */)
-    ], 2 /* CLASS */))
-  }
-
-  script$x.render = render$v;
-  script$x.__file = "src/components/divider/Divider.vue";
-
-  var script$w = {
-    name: 'XForm',
-    inheritAttrs: false,
-    props: {
-      autoValidate: {
-        type: Boolean,
-        default: true,
-      },
-      autoFocus: {
-        type: Boolean,
-        default: true,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      errors: {
-        type: Array,
-        default: () => [],
-      },
-    },
-
-    setup(props, { emit }) {
-      const inputs = [];
-
-      vue.provide('form', {
-        registerInput: (name, { focus, validate, setError }) => {
-          const exists = inputs.find((i) => i.name === name);
-
-          if (exists) {
-            exists.focus = focus;
-            exists.validate = validate;
-            exists.setError = setError;
-          }
-          else inputs.push({ name, focus, validate, setError });
-        },
-        unregisterInput: (name) => {
-          const index = inputs.findIndex((i) => i.name === name);
-
-          inputs.splice(index, 1);
-        },
-      });
-
-      vue.onMounted(() => {
-        if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus();
-      });
-
-      vue.watch(() => props.errors, (errors) => {
-        vue.nextTick(() => {
-          errors.forEach((error) => {
-            const input = inputs.find((i) => i.name === error.field);
-
-            if (input) input.setError(error.msg);
-          });
-        });
-      });
-
-      const validate = () => {
-        let isFormValid = true;
-
-        inputs.forEach((input) => {
-          const isInputValid = input.validate();
-
-          if (!isInputValid && isFormValid) {
-            isFormValid = false;
-
-            // focus on input error
-            if (input.focus) input.focus();
-          }
-        });
-
-        return isFormValid
-      };
-
-      const submit = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const isFormValid = props.autoValidate ? validate() : true;
-
-        emit('submit', isFormValid);
-      };
-
-      return {
-        validate,
-        submit,
-      }
-    },
-  };
-
-  const _hoisted_1$k = ["disabled"];
-
-  function render$u(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("form", {
-      onSubmit: _cache[0] || (_cache[0] = (...args) => ($setup.submit && $setup.submit(...args))),
-      onKeypress: _cache[1] || (_cache[1] = vue.withKeys((...args) => ($setup.submit && $setup.submit(...args)), ["enter"]))
-    }, [
-      vue.createElementVNode("fieldset", { disabled: $props.disabled }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 8 /* PROPS */, _hoisted_1$k)
-    ], 32 /* HYDRATE_EVENTS */))
-  }
-
-  script$w.render = render$u;
-  script$w.__file = "src/components/form/Form.vue";
-
-  const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
-
-  var script$v = {
-    props: {
-      src: {
-        type: String,
-        default: '',
-      },
-    },
-
-    data() {
-      return {
-        source: fallback,
-      }
-    },
-
-    mounted() {
-      const img = new Image();
-
-      img.onload = () => { this.source = this.src; };
-      img.onerror = () => { };
-      img.src = this.src;
-    },
-  };
-
-  const _hoisted_1$j = ["src"];
-
-  function render$t(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("img", { src: $data.source }, null, 8 /* PROPS */, _hoisted_1$j))
-  }
-
-  script$v.render = render$t;
-  script$v.__file = "src/components/image/Image.vue";
-
-  var script$u = {
-    name: 'XInput',
-
-    validator: withValidator(),
-
-    props: {
-      ...withProps(),
-
-      showPasswordToggle: {
-        type: Boolean,
-        default: true,
-      },
-
-      label: {
-        type: String,
-        default: '',
-      },
-
-      iconRight: {
-        type: Boolean,
-        default: false,
-      },
-
-      dir: {
-        type: String,
-        default: 'ltr',
-      },
-
-      max: {
-        type: Number,
-        default: null,
-      },
-
-      maxlength: {
-        type: Number,
-        default: null,
-      },
-
-      min: {
-        type: Number,
-        default: null,
-      },
-
-      minlength: {
-        type: Number,
-        default: null,
-      },
-
-      placeholder: {
-        type: String,
-        default: null,
-      },
-
-      type: {
-        type: String,
-        default: 'text',
-      },
-
-      inputClass: {
-        type: String,
-        default: '',
-      },
-    },
-
-    emits: withEmits(),
-
-    setup(props, { attrs, emit }) {
-      return {
-        ...useInputtable(props, { attrs, emit }),
-      }
-    },
-
-    data() {
-      return {
-        currentType: this.type,
-      }
-    },
-
-    methods: {
-      onChange(e) {
-        if (this.type === 'number') {
-          if (this.min !== null) {
-            if (e.target.value < this.min) e.target.value = this.min;
-          }
-
-          if (this.max !== null) {
-            if (e.target.value > this.max) e.target.value = this.max;
-          }
-        }
-      },
-      togglePasswordVisibility() {
-        this.currentType = this.currentType === 'password' ? 'text' : 'password';
-      },
-    },
-  };
-
-  const _hoisted_1$i = { class: "inline-block mb-1 relative" };
-  const _hoisted_2$d = ["textContent"];
-  const _hoisted_3$a = { class: "relative" };
-  const _hoisted_4$8 = ["disabled", "max", "maxlength", "min", "dir", "minlength", "name", "placeholder", "readonly", "type", "value"];
-  const _hoisted_5$4 = /*#__PURE__*/vue.createElementVNode("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }, null, -1 /* HOISTED */);
-  const _hoisted_6$4 = /*#__PURE__*/vue.createElementVNode("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_7$2 = /*#__PURE__*/vue.createElementVNode("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }, null, -1 /* HOISTED */);
-  const _hoisted_8$2 = /*#__PURE__*/vue.createElementVNode("line", {
-    x1: "1",
-    y1: "1",
-    x2: "23",
-    y2: "23"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_9$2 = ["textContent"];
-
-  function render$s(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$i, [
-      ($props.label)
-        ? (vue.openBlock(), vue.createElementBlock("p", {
-            key: 0,
-            class: vue.normalizeClass(["font-medium text-gray-800 dark:text-gray-200 mb-1", {
-          'text-xs': _ctx.size === 'xs',
-          'text-sm': _ctx.size === 'sm',
-          'text-lg': _ctx.size === 'lg',
-          'text-xl': _ctx.size === 'xl',
-        }]),
-            textContent: vue.toDisplayString($props.label)
-          }, null, 10 /* CLASS, PROPS */, _hoisted_2$d))
-        : vue.createCommentVNode("v-if", true),
-      vue.createElementVNode("div", _hoisted_3$a, [
-        (_ctx.$slots.icon)
-          ? (vue.openBlock(), vue.createElementBlock("span", {
-              key: 0,
-              class: vue.normalizeClass(["flex items-center w-5 h-5 text-gray-500 absolute my-auto inset-y-0", [{
-            'ml-2 left-0': _ctx.$slots.icon && !$props.iconRight,
-            'mr-2 right-0': _ctx.$slots.icon && $props.iconRight,
-          }]])
-            }, [
-              vue.renderSlot(_ctx.$slots, "icon")
-            ], 2 /* CLASS */))
-          : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("input", vue.mergeProps({
-          ref: "focusRef",
-          class: ["appearance-none block w-full text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 rounded-form leading-tight focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700", [
-            _ctx.disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
-            $props.type === 'password' ? 'pr-9' : (_ctx.flat ? '' : 'pr-4'),
-            _ctx.flat ? 'p-0 bg-transparent' : {
-              // shadow
-              'border shadow': true,
-
-              // size
-              'py-1': _ctx.size === 'auto',
-              'px-2 py-1 text-xs': _ctx.size === 'xs',
-              'px-2 py-1 text-sm': _ctx.size === 'sm',
-              'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
-              'px-4 py-3 text-lg': _ctx.size === 'lg',
-              'px-6 py-6 text-xl': _ctx.size === 'xl',
-            },
-            {
-              '!pl-9': _ctx.$slots.icon && !$props.iconRight,
-              '!pr-9': _ctx.$slots.icon && $props.iconRight,
-              // error
-              'border-error-500 focus:border-error-500 dark:focus:border-error-500': _ctx.errorInternal,
-            },
-            $props.inputClass,
-          ]],
-          disabled: _ctx.disabled,
-          max: $props.max,
-          maxlength: $props.maxlength,
-          min: $props.min,
-          dir: $props.dir,
-          minlength: $props.minlength,
-          name: _ctx.name,
-          placeholder: $props.placeholder,
-          readonly: _ctx.readonly,
-          type: $data.currentType,
-          value: _ctx.modelValue
-        }, vue.toHandlers(_ctx.inputListeners), {
-          onChange: _cache[0] || (_cache[0] = (...args) => ($options.onChange && $options.onChange(...args)))
-        }), null, 16 /* FULL_PROPS */, _hoisted_4$8),
-        ($props.type === 'password' && $props.showPasswordToggle)
-          ? (vue.openBlock(), vue.createElementBlock("svg", {
-              key: 1,
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              "stroke-linejoin": "round",
-              "stroke-linecap": "round",
-              fill: "none",
-              class: "text-gray-700 dark:text-gray-300 stroke-2 w-4 h-4 absolute my-auto mr-2 inset-y-0 right-1 cursor-pointer",
-              onClick: _cache[1] || (_cache[1] = $event => ($options.togglePasswordVisibility()))
-            }, [
-              ($data.currentType === 'password')
-                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                    _hoisted_5$4,
-                    _hoisted_6$4
-                  ], 64 /* STABLE_FRAGMENT */))
-                : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                    _hoisted_7$2,
-                    _hoisted_8$2
-                  ], 64 /* STABLE_FRAGMENT */))
-            ]))
-          : vue.createCommentVNode("v-if", true)
-      ]),
-      (_ctx.errorInternal)
-        ? (vue.openBlock(), vue.createElementBlock("p", {
-            key: 1,
-            class: "text-sm text-error-500 mt-1",
-            textContent: vue.toDisplayString(_ctx.errorInternal)
-          }, null, 8 /* PROPS */, _hoisted_9$2))
-        : vue.createCommentVNode("v-if", true)
-    ]))
-  }
-
-  script$u.render = render$s;
-  script$u.__file = "src/components/input/Input.vue";
-
-  const validator$7 = {
-    color: [
-      'error',
-      'gray',
-      'primary',
-      'success',
-      'warning',
-    ],
-  };
-
-  var script$t = {
-    name: 'XLink',
-
-    validator: validator$7,
-
-    props: {
-      color: {
-        default: 'gray',
-        type: String,
-        validator: (value) => validator$7.color.includes(value),
-      },
-
-      external: {
-        default: false,
-        type: Boolean,
-      },
-
-      tag: {
-        default: 'a',
-        type: String,
-      },
-
-      to: {
-        type: String,
-        default: undefined,
-      },
-
-      underline: {
-        default: false,
-        type: Boolean,
-      },
-    },
-  };
-
-  const _hoisted_1$h = {
-    key: 0,
-    class: "inline-flex items-center"
-  };
-  const _hoisted_2$c = /*#__PURE__*/vue.createElementVNode("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    "stroke-linejoin": "round",
-    "stroke-linecap": "round",
-    fill: "none",
-    role: "presentation",
-    class: "stroke-2 w-4 h-4 ml"
-  }, [
-    /*#__PURE__*/vue.createElementVNode("line", {
-      x1: "7",
-      y1: "17",
-      x2: "17",
-      y2: "7"
-    }),
-    /*#__PURE__*/vue.createElementVNode("polyline", { points: "7 7 17 7 17 17" })
-  ], -1 /* HOISTED */);
-
-  function render$r(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.to ? 'router-link' : $props.tag), {
-      to: $props.to,
-      class: vue.normalizeClass(["transition-colors duration-150 ease-in-out cursor-pointer", [
-        {
-          // color
-          'hover:text-gray-600 dark:hover:text-gray-300': $props.color === 'gray',
-          'text-primary-500 hover:text-primary-600': $props.color === 'primary',
-          'text-error-500 hover:text-error-600': $props.color === 'error',
-          'text-warning-500 hover:text-warning-600': $props.color === 'warning',
-          'text-success-500 hover:text-success-600': $props.color === 'success',
-          // underline
-          'underline': $props.underline
-        },
-      ]])
-    }, {
-      default: vue.withCtx(() => [
-        ($props.external)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$h, [
-              vue.renderSlot(_ctx.$slots, "default"),
-              _hoisted_2$c
-            ]))
-          : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
-      ]),
-      _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["to", "class"]))
-  }
-
-  script$t.render = render$r;
-  script$t.__file = "src/components/link/Link.vue";
-
-  var script$s = {
-    name: 'XModal',
-
-    props: {
-      size: {
-        type: String,
-        default: null,
-      },
-      showClose: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    data() {
-      return {
-        isOpen: false,
-      }
-    },
-
-    beforeMount() {
-      document.addEventListener('keydown', this.onKeydown);
-    },
-
-    beforeUnmount() {
-      document.removeEventListener('keydown', this.onKeydown);
-    },
-
-    methods: {
-      close() {
-        this.isOpen = false;
-        this.$emit('close');
-      },
-
-      onKeydown(event) {
-        if (event.keyCode === 27 && this.isOpen) {
-          this.close();
-        }
-      },
-
-      open() {
-        this.isOpen = true;
-        this.$emit('open');
-      },
-
-      toggle() {
-        this.isOpen = !this.isOpen;
-        this.$emit('toggle', this.isOpen);
-      },
-    },
-  };
-
-  const _hoisted_1$g = { class: "flex items-end sm:items-center justify-center min-h-full p-4 sm:p-6" };
-  const _hoisted_2$b = /*#__PURE__*/vue.createElementVNode("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    "stroke-linejoin": "round",
-    "stroke-linecap": "round",
-    fill: "none",
-    role: "presentation",
-    class: "stroke-2 w-4 h-4"
-  }, [
-    /*#__PURE__*/vue.createElementVNode("line", {
-      x1: "18",
-      y1: "6",
-      x2: "6",
-      y2: "18"
-    }),
-    /*#__PURE__*/vue.createElementVNode("line", {
-      x1: "6",
-      y1: "6",
-      x2: "18",
-      y2: "18"
-    })
-  ], -1 /* HOISTED */);
-  const _hoisted_3$9 = [
-    _hoisted_2$b
-  ];
-
-  function render$q(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("div", {
-      class: vue.normalizeClass(["fixed z-40 inset-0 overflow-y-auto transition-all", [
-        $data.isOpen ? 'visible' : 'invisible ease-in duration-100'
-      ]])
-    }, [
-      vue.createElementVNode("div", {
-        class: vue.normalizeClass(["fixed inset-0 bg-gray-500 dark:bg-gray-600 transition-opacity", [
-          $data.isOpen ? 'ease-out duration-200 opacity-75' : 'ease-in duration-100 opacity-0',
-        ]]),
-        onClick: _cache[0] || (_cache[0] = vue.withModifiers($event => ($options.close()), ["self"]))
-      }, null, 2 /* CLASS */),
-      vue.createElementVNode("div", _hoisted_1$g, [
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["relative inline-block bg-white dark:bg-gray-900 rounded-lg shadow-xl transform transition-all", [
-            {
-              'w-full': $props.size === 'auto',
-              'sm:max-w-xs w-full': $props.size === 'xs',
-              'sm:max-w-sm w-full': $props.size === 'sm',
-              'sm:max-w-lg w-full': !['auto', 'full', 'xs', 'sm', 'lg', 'xl'].includes($props.size),
-              'sm:max-w-xl w-full': $props.size === 'lg',
-              'sm:max-w-3xl w-full': $props.size === 'xl',
-              'w-full': $props.size === 'full',
-            },
-            $data.isOpen ?
-              'ease-out duration-200 opacity-100 translate-y-0 sm:scale-100'
-              : 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-          ]]),
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": "modal-headline"
-        }, [
-          vue.renderSlot(_ctx.$slots, "default"),
-          ($props.showClose)
-            ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 0,
-                class: "absolute rounded-md bg-white -top-4 -right-2 w-8 h-8 shadow-md flex items-center justify-center cursor-pointer",
-                onClick: _cache[1] || (_cache[1] = $event => ($options.close()))
-              }, _hoisted_3$9))
-            : vue.createCommentVNode("v-if", true)
-        ], 2 /* CLASS */)
-      ])
-    ], 2 /* CLASS */))
-  }
-
-  script$s.render = render$q;
-  script$s.__file = "src/components/modal/Modal.vue";
-
-  var script$r = {
-    name: 'XNote',
-
-    props: {
-      filled: {
-        type: Boolean,
-        default: false,
-      },
-
-      tag: {
-        type: String,
-        default: 'div',
-      },
-
-      color: {
-        type: String,
-        default: 'primary',
-      },
-    },
-  };
-
-  const _hoisted_1$f = {
-    key: 0,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    "stroke-linejoin": "round",
-    "stroke-linecap": "round",
-    fill: "none",
-    role: "presentation",
-    class: "flex-none stroke-2 w-4 h-4 mt-1 mr-2"
-  };
-  const _hoisted_2$a = /*#__PURE__*/vue.createElementVNode("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_3$8 = /*#__PURE__*/vue.createElementVNode("line", {
-    x1: "12",
-    y1: "8",
-    x2: "12",
-    y2: "12"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_4$7 = /*#__PURE__*/vue.createElementVNode("line", {
-    x1: "12",
-    y1: "16",
-    x2: "12",
-    y2: "16"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_5$3 = /*#__PURE__*/vue.createElementVNode("path", { d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" }, null, -1 /* HOISTED */);
-  const _hoisted_6$3 = /*#__PURE__*/vue.createElementVNode("path", { d: "M16 10L10.5 15L8 12.7273" }, null, -1 /* HOISTED */);
-  const _hoisted_7$1 = /*#__PURE__*/vue.createElementVNode("path", { d: "M7.86 2H16.14L22 7.86V16.14L16.14 22H7.86L2 16.14V7.86L7.86 2Z" }, null, -1 /* HOISTED */);
-  const _hoisted_8$1 = /*#__PURE__*/vue.createElementVNode("path", { d: "M9 9L15 15" }, null, -1 /* HOISTED */);
-  const _hoisted_9$1 = /*#__PURE__*/vue.createElementVNode("path", { d: "M15 9L9 15" }, null, -1 /* HOISTED */);
-  const _hoisted_10$1 = /*#__PURE__*/vue.createElementVNode("path", {
-    stroke: "none",
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_11$1 = /*#__PURE__*/vue.createElementVNode("path", { d: "M12 9v2m0 4v.01" }, null, -1 /* HOISTED */);
-  const _hoisted_12 = /*#__PURE__*/vue.createElementVNode("path", { d: "M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" }, null, -1 /* HOISTED */);
-  const _hoisted_13 = {
-    key: 1,
-    class: "flex-none pr-2"
-  };
-
-  function render$p(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
-      class: vue.normalizeClass(["flex rounded-md p-2", $props.filled ? [`bg-${$props.color}-500 text-${$props.color}-50`] : [`border text-${$props.color}-500 border-${$props.color}-500`]])
-    }, {
-      default: vue.withCtx(() => [
-        (!_ctx.$slots.icon)
-          ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$f, [
-              ($props.color === 'primary')
-                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                    _hoisted_2$a,
-                    _hoisted_3$8,
-                    _hoisted_4$7
-                  ], 64 /* STABLE_FRAGMENT */))
-                : vue.createCommentVNode("v-if", true),
-              ($props.color === 'success')
-                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                    _hoisted_5$3,
-                    _hoisted_6$3
-                  ], 64 /* STABLE_FRAGMENT */))
-                : vue.createCommentVNode("v-if", true),
-              ($props.color === 'error')
-                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-                    _hoisted_7$1,
-                    _hoisted_8$1,
-                    _hoisted_9$1
-                  ], 64 /* STABLE_FRAGMENT */))
-                : vue.createCommentVNode("v-if", true),
-              ($props.color === 'warning')
-                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
-                    _hoisted_10$1,
-                    _hoisted_11$1,
-                    _hoisted_12
-                  ], 64 /* STABLE_FRAGMENT */))
-                : vue.createCommentVNode("v-if", true)
-            ]))
-          : vue.createCommentVNode("v-if", true),
-        (_ctx.$slots.icon)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
-              vue.renderSlot(_ctx.$slots, "icon")
-            ]))
-          : vue.createCommentVNode("v-if", true),
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["class"]))
-  }
-
-  script$r.render = render$p;
-  script$r.__file = "src/components/note/Note.vue";
-
-  var script$q = {
-    props: {
-      value: {
-        type: Number,
-        default: 0,
-      },
-      selected: {
-        type: Boolean,
-        default: false,
-      },
-      size: {
-        type: String,
-        default: null,
-      },
-      links: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-
-  function render$o(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_x_button = vue.resolveComponent("x-button");
-
-    return (vue.openBlock(), vue.createElementBlock("li", null, [
-      vue.createVNode(_component_x_button, {
-        to: $props.links ? `?page=${$props.value}` : null,
-        size: $props.size,
-        class: "mx-1 min-w-[32px]",
-        outlined: !$props.selected,
-        color: $props.selected ? 'primary' : 'none',
-        onClick: _cache[0] || (_cache[0] = $event => (!$props.selected ? _ctx.$emit('input', $props.value) : null))
-      }, {
-        default: vue.withCtx(() => [
-          vue.createTextVNode(vue.toDisplayString($props.value), 1 /* TEXT */)
-        ]),
-        _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["to", "size", "outlined", "color"])
-    ]))
-  }
-
-  script$q.render = render$o;
-  script$q.__file = "src/components/pagination/PaginationItem.vue";
-
-  var script$p = {
-    components: {
-      XPaginationItem: script$q,
-    },
-    props: {
-      totalPages: {
-        type: Number,
-        default: 1,
-      },
-      modelValue: {
-        type: Number,
-        default: 1,
-      },
-      size: {
-        type: String,
-        default: null,
-      },
-      links: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    computed: {
-      pages() {
-        if (this.totalPages === 3) return [2]
-        if (this.totalPages > 2) {
-          if (this.modelValue === 1 || this.modelValue === 2) return [2, 3]
-          if (this.modelValue === this.totalPages || this.modelValue === this.totalPages - 1) return [this.totalPages - 2, this.totalPages - 1]
-
-          return [this.modelValue - 1, this.modelValue, this.modelValue + 1]
-        }
-
-        return []
-      },
-    },
-  };
-
-  const _hoisted_1$e = { class: "flex items-end" };
-  const _hoisted_2$9 = { key: 0 };
-  const _hoisted_3$7 = { key: 1 };
-
-  function render$n(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_x_pagination_item = vue.resolveComponent("x-pagination-item");
-
-    return (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$e, [
-      vue.createVNode(_component_x_pagination_item, {
-        value: 1,
-        links: $props.links,
-        size: $props.size,
-        selected: $props.modelValue === 1,
-        class: "mr-1",
-        onInput: _cache[0] || (_cache[0] = (value) => _ctx.$emit('update:modelValue', value))
-      }, null, 8 /* PROPS */, ["links", "size", "selected"]),
-      ($props.totalPages > 3 && $props.modelValue > 3)
-        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$9, "..."))
-        : vue.createCommentVNode("v-if", true),
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.pages, (i) => {
-        return (vue.openBlock(), vue.createBlock(_component_x_pagination_item, {
-          key: i,
-          class: "mx-1",
-          value: i,
-          links: $props.links,
-          size: $props.size,
-          selected: $props.modelValue === i,
-          onInput: _cache[1] || (_cache[1] = (value) => _ctx.$emit('update:modelValue', value))
-        }, null, 8 /* PROPS */, ["value", "links", "size", "selected"]))
-      }), 128 /* KEYED_FRAGMENT */)),
-      ($props.totalPages > 3 && $props.modelValue < $props.totalPages - 2)
-        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$7, "..."))
-        : vue.createCommentVNode("v-if", true),
-      ($props.totalPages > 1)
-        ? (vue.openBlock(), vue.createBlock(_component_x_pagination_item, {
-            key: 2,
-            value: $props.totalPages,
-            links: $props.links,
-            size: $props.size,
-            class: "ml-1",
-            selected: $props.modelValue === $props.totalPages,
-            onInput: _cache[2] || (_cache[2] = (value) => _ctx.$emit('update:modelValue', value))
-          }, null, 8 /* PROPS */, ["value", "links", "size", "selected"]))
-        : vue.createCommentVNode("v-if", true)
-    ]))
-  }
-
-  script$p.render = render$n;
-  script$p.__file = "src/components/pagination/Pagination.vue";
-
-  const validator$6 = {
-    align: [
-      'bottom',
-      'center',
-      'left',
-      'right',
-      'top',
-    ],
-    position: [
-      'bottom',
-      'left',
-      'right',
-      'top',
-    ],
-  };
-
-  var script$o = {
-    name: 'XPopover',
-
-    validator: validator$6,
-
-    props: {
-      align: {
-        type: String,
-        default: 'center',
-        validator: (value) => validator$6.align.includes(value),
-      },
-
-      hover: {
-        type: Boolean,
-        default: false,
-      },
-
-      dismissible: {
-        type: Boolean,
-        default: true,
-      },
-
-      position: {
-        default: 'bottom',
-        type: String,
-        validator: (value) => validator$6.position.includes(value),
-      },
-    },
-
-    data() {
-      return {
-        isOpen: false,
-      }
-    },
-
-    methods: {
-      close() {
-        this.isOpen = false;
-        this.$emit('close');
-      },
-
-      open() {
-        this.isOpen = true;
-        this.$emit('open');
-      },
-
-      toggle() {
-        this.isOpen = !this.isOpen;
-        this.$emit('toggle', this.isOpen);
-      },
-    },
-  };
-
-  function render$m(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("div", {
-      class: vue.normalizeClass(["inline-block relative xpopover", [
-        { 'hover': $props.hover,
-          'is-open': $data.isOpen,
-        },
-        _ctx.$attrs.class,
-        _ctx.$attrs.staticClass,
-      ]])
-    }, [
-      vue.createElementVNode("div", {
-        class: "flex",
-        onClick: _cache[0] || (_cache[0] = $event => (!$props.hover ? $options.toggle() : null))
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      (!$props.hover)
-        ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: vue.normalizeClass(["fixed inset-0 opacity-0 z-40", [$data.isOpen ? 'visible' : 'invisible']]),
-            onClick: _cache[1] || (_cache[1] = vue.withModifiers($event => ($options.close()), ["self"]))
-          }, null, 2 /* CLASS */))
-        : vue.createCommentVNode("v-if", true),
-      vue.createElementVNode("div", {
-        class: vue.normalizeClass(["absolute w-fit bottom-0 left-0 right-0 sm:p-0 transform transition-transform z-50 xpopover-content whitespace-nowrap max-w-xs", [
-          {
-            // align-left
-            'left-0 right-auto': $props.align === 'left' && ['bottom', 'top'].includes($props.position),
-            // align-center
-            'left-1/2 right-auto -translate-x-1/2': $props.align === 'center' && ['bottom', 'top'].includes($props.position),
-            // align-right
-            'right-0 left-auto': $props.align === 'right' && ['bottom', 'top'].includes($props.position),
-            // align-top
-            'top-0 bottom-auto': $props.align === 'top' && ['left', 'right'].includes($props.position),
-            // align-middle
-            '-translate-y-1/2 top-1/2 bottom-auto': $props.align === 'center' && ['left', 'right'].includes($props.position),
-            // align-bottom
-            'bottom-0': $props.align === 'bottom' && ['left', 'right'].includes($props.position),
-
-            // position-top
-            'xpopover-top bottom-full pb-2': $props.position === 'top',
-            // position-right
-            'xpopover-right left-full pl-2': $props.position === 'right',
-            // position-bottom
-            'xpopover-bottom top-full bottom-0': $props.position === 'bottom',
-            // position-left
-            'xpopover-left right-full left-auto pr-2': $props.position === 'left',
-          }
-        ]]),
-        onClick: _cache[2] || (_cache[2] = $event => ($props.dismissible ? $options.close() : null))
-      }, [
-        vue.renderSlot(_ctx.$slots, "content")
-      ], 2 /* CLASS */)
-    ], 2 /* CLASS */))
-  }
-
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) ref = {};
-    var insertAt = ref.insertAt;
-
-    if (!css || typeof document === 'undefined') { return; }
-
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-      } else {
-        head.appendChild(style);
-      }
-    } else {
-      head.appendChild(style);
-    }
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
-
-  var css_248z = "\n.xpopover-content {\n  visibility: hidden;\n  transition-duration: .1s;\n  transition-timing-function: cubic-bezier(.4,0,1,1);\n}\n.xpopover-top {\n  --tw-translate-y: 0.5rem;\n}\n.xpopover-right {\n  --tw-translate-x: -0.5rem;\n}\n.xpopover-bottom {\n  --tw-translate-y: -0.25rem;\n}\n.xpopover-left {\n  --tw-translate-x: 0.5rem;\n}\n.xpopover.hover:hover .xpopover-content,\n.xpopover.is-open .xpopover-content {\n  visibility: visible;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(0,0,.2,1);\n}\n.xpopover.hover:hover .xpopover-top,\n.xpopover.is-open .xpopover-top {\n  --tw-translate-y: 0.25rem;\n}\n.xpopover.hover:hover .xpopover-right,\n.xpopover.is-open .xpopover-right {\n  --tw-translate-x: 0px;\n}\n.xpopover.hover:hover .xpopover-bottom,\n.xpopover.is-open .xpopover-bottom {\n  --tw-translate-y: 0.25rem;\n}\n.xpopover.hover:hover .xpopover-left,\n.xpopover.is-open .xpopover-left {\n  --tw-translate-x: 0px;\n}\n";
-  styleInject(css_248z);
-
-  script$o.render = render$m;
-  script$o.__file = "src/components/popover/Popover.vue";
-
-  var script$n = {
-    name: 'XPopoverContainer',
-
-    props: {
-      tag: {
-        default: 'div',
-        type: String,
-      },
-    },
-
-    created() {
-      if (this.$parent.$options.name !== 'XPopover') {
-        this.$destroy();
-        throw new Error('PopoverContainer must be wrap with Popover')
-      }
-    },
-  };
-
-  function render$l(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "inline-block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border-t border border-gray-200 dark:border-gray-800" }, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3 /* FORWARDED */
-    }))
-  }
-
-  script$n.render = render$l;
-  script$n.__file = "src/components/popover/PopoverContainer.vue";
-
-  const validator$5 = {
-    variant: [
-      'base',
-      'error',
-    ],
-  };
-
-  var script$m = {
-    name: 'XPopoverItem',
-
-    validator: validator$5,
-
-    props: {
-      disabled: {
-        default: false,
-        type: Boolean,
-      },
-
-      variant: {
-        default: 'base',
-        type: String,
-        validator: (value) => validator$5.variant.includes(value),
-      },
-
-      tag: {
-        default: 'div',
-        type: String,
-      },
-    },
-  };
-
-  const _hoisted_1$d = {
-    key: 0,
-    class: "inline-flex items-center mr-2"
-  };
-  const _hoisted_2$8 = {
-    key: 1,
-    class: "inline-flex items-center ml-1"
-  };
-
-  function render$k(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
-      class: vue.normalizeClass(["px-2 py-1 block rounded transition-colors duration-100 ease-in-out whitespace-nowrap", [
-        {
-          'flex items-center': _ctx.$slots.prefix || _ctx.$slots.suffix,
-          'hover:bg-gray-100 dark:hover:bg-gray-800': $props.variant === 'base' && !$props.disabled,
-          'hover:text-error-500 hover:bg-error-50': $props.variant === 'error' && !$props.disabled,
-          'opacity-70': $props.disabled,
-          'cursor-pointer': !$props.disabled,
-        },
-
-      ]])
-    }, {
-      default: vue.withCtx(() => [
-        (_ctx.$slots.prefix)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$d, [
-              vue.renderSlot(_ctx.$slots, "prefix")
-            ]))
-          : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("span", {
-          class: vue.normalizeClass({ 'flex-1': _ctx.$slots.prefix || _ctx.$slots.suffix })
-        }, [
-          vue.renderSlot(_ctx.$slots, "default")
-        ], 2 /* CLASS */),
-        (_ctx.$slots.suffix)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$8, [
-              vue.renderSlot(_ctx.$slots, "suffix")
-            ]))
-          : vue.createCommentVNode("v-if", true)
-      ]),
-      _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["class"]))
-  }
-
-  script$m.render = render$k;
-  script$m.__file = "src/components/popover/PopoverItem.vue";
-
-  const validator$4 = {
-    variant: [
-      'bar',
-      'circle',
-      'score',
-    ],
-  };
-
-  var script$l = {
-    name: 'XProgress',
-
-    validator: validator$4,
-
-    props: {
-      color: {
-        type: String,
-        default: 'primary',
-      },
-
-      percentage: {
-        type: Number,
-        default: 0,
-        validator: (val) => val >= 0 && val <= 100,
-      },
-
-      scoreLength: {
-        type: Number,
-        default: 3,
-      },
-
-      tag: {
-        type: String,
-        default: 'div',
-      },
-
-      variant: {
-        type: String,
-        default: 'bar',
-        validator: (value) => validator$4.variant.includes(value),
-      },
-    },
-
-    computed: {
-      circleProgress() {
-        const progressLimit = 251;
-
-        return (progressLimit / 100) * this.percentage
-      },
-    },
-
-    methods: {
-      isScoreActive(item) {
-        if (this.percentage > (item - 1) * (100 / this.scoreLength)) return true
-
-        return false
-      },
-    },
-  };
-
-  const _hoisted_1$c = {
-    key: 0,
-    class: "rounded-lg bg-gray-200 dark:bg-gray-700 overflow-hidden"
-  };
-  const _hoisted_2$7 = {
-    key: 1,
-    class: "transform -rotate-90",
-    viewBox: "0 0 100 100"
-  };
-  const _hoisted_3$6 = /*#__PURE__*/vue.createElementVNode("circle", {
-    class: "text-gray-200 dark:text-gray-700",
-    stroke: "currentColor",
-    "stroke-linejoin": "round",
-    "stroke-linecap": "round",
-    "stroke-width": "4",
-    fill: "none",
-    cx: "50",
-    cy: "50",
-    r: "40"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_4$6 = {
-    key: 2,
-    class: "space-x-1 inline-block"
-  };
-
-  function render$j(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "w-full" }, {
-      default: vue.withCtx(() => [
-        ($props.variant === 'bar')
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-              vue.createElementVNode("div", {
-                class: vue.normalizeClass(["h-2 rounded-lg transition-all duration-200", [`bg-${$props.color}-500`]]),
-                style: vue.normalizeStyle({
-            width: `${$props.percentage}%`,
-          })
-              }, null, 6 /* CLASS, STYLE */)
-            ]))
-          : vue.createCommentVNode("v-if", true),
-        ($props.variant === 'circle')
-          ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$7, [
-              _hoisted_3$6,
-              vue.createElementVNode("circle", {
-                class: vue.normalizeClass(["transition-all duration-200", [`text-${$props.color}-500`]]),
-                style: vue.normalizeStyle({ strokeDasharray: `${$options.circleProgress} 252` }),
-                stroke: "currentColor",
-                "stroke-linejoin": "round",
-                "stroke-linecap": "round",
-                "stroke-width": "4",
-                fill: "none",
-                cx: "50",
-                cy: "50",
-                r: "40"
-              }, null, 6 /* CLASS, STYLE */)
-            ]))
-          : vue.createCommentVNode("v-if", true),
-        ($props.variant === 'score')
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.scoreLength, (index) => {
-                return (vue.openBlock(), vue.createElementBlock("div", {
-                  key: index,
-                  class: vue.normalizeClass(["rounded-sm h-2 w-3 inline-block", $options.isScoreActive(index) ? [`bg-${$props.color}-500`]: ['bg-gray-200 dark:bg-gray-700']])
-                }, null, 2 /* CLASS */))
-              }), 128 /* KEYED_FRAGMENT */))
-            ]))
-          : vue.createCommentVNode("v-if", true)
-      ]),
-      _: 1 /* STABLE */
-    }))
-  }
-
-  script$l.render = render$j;
-  script$l.__file = "src/components/progress/Progress.vue";
-
-  var script$k = {
-    name: 'XRadio',
-    components: {
-      XSpinner: script$E,
-    },
-
-    validator: {
-      ...withValidator(),
-    },
-
-    props: {
-      ...withProps(),
-      bordered: {
-        type: Boolean,
-        default: false,
-      },
-
-      value: {
-        type: [String, Number, Boolean, Function, Object, Array],
-        default: null,
-      },
-
-      label: {
-        type: String,
-        default: null,
-      },
-
-      glow: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    emits: withEmits(false),
-
-    setup(props, { attrs, emit }) {
-      return {
-        ...useInputtable(props, { attrs, emit, useListeners: false }),
-      }
-    },
-
-    computed: {
-      selected: {
-        get() {
-          return this.value === this.modelValue
-        },
-
-        set() {
-          this.$emit('update:modelValue', this.value);
-        },
-      },
-    },
-  };
-
-  const _hoisted_1$b = ["aria-checked", "aria-disabled"];
-  const _hoisted_2$6 = ["disabled", "name", "required", "value"];
-  const _hoisted_3$5 = /*#__PURE__*/vue.createElementVNode("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1 /* HOISTED */);
-  const _hoisted_4$5 = [
-    _hoisted_3$5
-  ];
-  const _hoisted_5$2 = ["textContent"];
-  const _hoisted_6$2 = ["textContent"];
-
-  function render$i(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_x_spinner = vue.resolveComponent("x-spinner");
-
-    return (vue.openBlock(), vue.createElementBlock("label", {
-      ref: "focusRef",
-      class: vue.normalizeClass(["inline-block mb-1 relative cursor-pointer focus:outline-none", {
-        ['rounded border p-2 hover:border-gray-500 dark:hover:border-gray-500 transition-colors duration-150 ease-in-out']: $props.bordered,
-        [`border-gray-300 dark:border-gray-700`]: $props.bordered && !$options.selected,
-        [`border-${_ctx.color}-500 dark:border-${_ctx.color}-500`]: $props.bordered && $options.selected && !_ctx.disabled,
-      }]),
-      "aria-checked": $options.selected ? 'true' : 'false',
-      "aria-disabled": _ctx.disabled ? 'true' : null,
-      tabindex: 0,
-      onKeypress: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers($event => (_ctx.$emit('update:modelValue', $props.value)), ["prevent","stop"]), ["enter","space"]))
-    }, [
-      vue.createElementVNode("div", {
-        class: vue.normalizeClass(["flex items-center", { 'cursor-not-allowed': _ctx.disabled }])
-      }, [
-        vue.withDirectives(vue.createElementVNode("input", {
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.selected) = $event)),
-          type: "radio",
-          class: "invisible absolute",
-          disabled: _ctx.disabled || _ctx.loading,
-          name: _ctx.name,
-          required: _ctx.required,
-          value: _ctx.modelValue
-        }, null, 8 /* PROPS */, _hoisted_2$6), [
-          [vue.vModelRadio, $options.selected]
-        ]),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["rounded-full flex justify-center items-center flex-shrink-0", [
-            {
-              // shadow
-              'shadow': !_ctx.flat && !_ctx.loading,
-              [`shadow-lg shadow-${_ctx.color}-500/50`]: !_ctx.flat && $props.glow && $options.selected,
-
-              'h-4 w-4': _ctx.size === 'sm' || _ctx.size === 'xs',
-              'h-5 w-5': !['xs', 'sm', 'xl'].includes(_ctx.size),
-              'h-6 w-6': _ctx.size === 'xl',
-            },
-            _ctx.disabled ? {
-              'bg-gray-500 border-gray-600 dark:border-gray-400': $options.selected,
-              'bg-gray-200 border-gray-300 dark:border-gray-700': !$options.selected,
-            } :
-            {
-              [`bg-${_ctx.color}-500 border-${_ctx.color}-500`]: $options.selected && !_ctx.loading,
-              'border bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700': !$options.selected && !_ctx.loading,
-            }
-          ]])
-        }, [
-          (_ctx.loading)
-            ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
-                key: 0,
-                size: _ctx.size,
-                class: "absolute"
-              }, null, 8 /* PROPS */, ["size"]))
-            : (vue.openBlock(), vue.createElementBlock("svg", {
-                key: 1,
-                class: vue.normalizeClass(["fill-current text-gray-100", {
-              'opacity-0': !$options.selected,
-              'h-2 w-2': _ctx.size === 'sm' || _ctx.size === 'xs',
-              'h-3 w-3': !['xs', 'sm', 'xl'].includes(_ctx.size),
-              'h-4 w-4': _ctx.size === 'xl',
-            }]),
-                viewBox: "0 0 20 20"
-              }, _hoisted_4$5, 2 /* CLASS */))
-        ], 2 /* CLASS */),
-        ($props.label)
-          ? (vue.openBlock(), vue.createElementBlock("span", {
-              key: 0,
-              class: vue.normalizeClass(["font-medium text-gray-800 dark:text-gray-200 pl-2", {
-            'text-xs': _ctx.size === 'xs',
-            'text-sm': _ctx.size === 'sm',
-            'text-lg': _ctx.size === 'lg',
-            'text-xl': _ctx.size === 'xl',
-          }]),
-              textContent: vue.toDisplayString($props.label)
-            }, null, 10 /* CLASS, PROPS */, _hoisted_5$2))
-          : vue.createCommentVNode("v-if", true)
-      ], 2 /* CLASS */),
-      (_ctx.$slots.default)
-        ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: vue.normalizeClass({
-          'text-xs pl-6': _ctx.size === 'xs',
-          'text-sm pl-6': _ctx.size === 'sm',
-          'pl-7': !['xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
-          'text-lg pl-7': _ctx.size === 'lg',
-          'text-lg pl-8': _ctx.size === 'xl',
-        })
-          }, [
-            vue.renderSlot(_ctx.$slots, "default")
-          ], 2 /* CLASS */))
-        : vue.createCommentVNode("v-if", true),
-      (_ctx.errorInternal)
-        ? (vue.openBlock(), vue.createElementBlock("p", {
-            key: 1,
-            class: "text-sm text-error-500 mt-1",
-            textContent: vue.toDisplayString(_ctx.errorInternal)
-          }, null, 8 /* PROPS */, _hoisted_6$2))
-        : vue.createCommentVNode("v-if", true)
-    ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1$b))
-  }
-
-  script$k.render = render$i;
-  script$k.__file = "src/components/radio/Radio.vue";
-
-  var script$j = {
-    name: 'XSelect',
-    components: {
-      XSpinner: script$E,
-    },
-
-    validator: {
-      ...withValidator(),
-    },
-
-    props: {
-      ...withProps(),
-
-      placeholder: {
-        type: String,
-        default: null,
-      },
-
-      flat: {
-        type: Boolean,
-        default: false,
-      },
-
-      label: {
-        type: String,
-        default: null,
-      },
-
-      options: {
-        type: Array,
-        default: null,
-      },
-    },
-
-    emits: withEmits(false),
-
-    setup(props, { attrs, emit }) {
-      return {
-        ...useInputtable(props, { attrs, emit, useListeners: false }),
-      }
-    },
-
-    computed: {
-      selected: {
-        get() {
-          return this.modelValue
-        },
-
-        set(val) {
-          this.$emit('update:modelValue', val);
-        },
-      },
-    },
-  };
-
-  const _hoisted_1$a = { class: "inline-block mb-1 relative pb-2" };
-  const _hoisted_2$5 = ["textContent"];
-  const _hoisted_3$4 = { class: "relative" };
-  const _hoisted_4$4 = ["disabled", "name", "readonly", "value"];
-  const _hoisted_5$1 = {
-    key: 0,
-    disabled: "",
-    value: ""
-  };
-  const _hoisted_6$1 = ["value", "disabled"];
-  const _hoisted_7 = { class: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2" };
-  const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("path", { d: "M18 8L12 2L6 8" }, null, -1 /* HOISTED */);
-  const _hoisted_9 = /*#__PURE__*/vue.createElementVNode("path", { d: "M18 16L12 22L6 16" }, null, -1 /* HOISTED */);
-  const _hoisted_10 = [
-    _hoisted_8,
-    _hoisted_9
-  ];
-  const _hoisted_11 = ["textContent"];
-
-  function render$h(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_x_spinner = vue.resolveComponent("x-spinner");
-
-    return (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$a, [
-      ($props.label)
-        ? (vue.openBlock(), vue.createElementBlock("p", {
-            key: 0,
-            class: vue.normalizeClass(["font-medium text-gray-800 dark:text-gray-200 mb-1", {
-          'text-xs': _ctx.size === 'xs',
-          'text-sm': _ctx.size === 'sm',
-          'text-lg': _ctx.size === 'lg',
-          'text-xl': _ctx.size === 'xl',
-        }]),
-            textContent: vue.toDisplayString($props.label)
-          }, null, 10 /* CLASS, PROPS */, _hoisted_2$5))
-        : vue.createCommentVNode("v-if", true),
-      vue.createElementVNode("div", _hoisted_3$4, [
-        vue.withDirectives(vue.createElementVNode("select", vue.mergeProps({
-          ref: "focusRef",
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.selected) = $event)),
-          class: ["block appearance-none w-full border border-gray-300 dark:border-gray-700 pr-8 rounded-form leading-tight focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out", [
-            _ctx.disabled
-              ? 'bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 cursor-not-allowed'
-              : 'bg-white dark:bg-gray-900',
-            {
-              // shadow
-              'shadow': !$props.flat,
-
-              // size
-              'py-1': _ctx.size === 'auto',
-              'px-2 py-1 text-xs': _ctx.size === 'xs',
-              'px-2 py-1 text-sm': _ctx.size === 'sm',
-              'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
-              'px-4 py-3 text-lg': _ctx.size === 'lg',
-              'px-6 py-6 text-xl': _ctx.size === 'xl',
-            },
-            {
-              'text-gray-400 dark:text-gray-500': _ctx.modelValue === '' || _ctx.modelValue === null,
-
-              // error
-              'border-error-500 focus:border-error-500 dark:focus:border-error-500': _ctx.errorInternal,
-            },
-          ]],
-          disabled: _ctx.disabled || _ctx.loading,
-          name: _ctx.name,
-          readonly: _ctx.readonly,
-          value: _ctx.modelValue
-        }, vue.toHandlers(_ctx.inputListeners)), [
-          ($props.placeholder)
-            ? (vue.openBlock(), vue.createElementBlock("option", _hoisted_5$1, vue.toDisplayString($props.placeholder), 1 /* TEXT */))
-            : vue.createCommentVNode("v-if", true),
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.options, (option, index) => {
-            return (vue.openBlock(), vue.createElementBlock("option", {
-              key: index,
-              value: option.value,
-              disabled: option.disabled
-            }, vue.toDisplayString(option.label), 9 /* TEXT, PROPS */, _hoisted_6$1))
-          }), 128 /* KEYED_FRAGMENT */)),
-          vue.renderSlot(_ctx.$slots, "default")
-        ], 16 /* FULL_PROPS */, _hoisted_4$4), [
-          [vue.vModelSelect, $options.selected]
-        ]),
-        vue.createElementVNode("div", _hoisted_7, [
-          (_ctx.loading)
-            ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
-                key: 0,
-                size: _ctx.size
-              }, null, 8 /* PROPS */, ["size"]))
-            : (vue.openBlock(), vue.createElementBlock("svg", {
-                key: 1,
-                class: vue.normalizeClass(["stroke-2", [
-              _ctx.disabled ? 'text-gray-600 dark:text-gray-400': 'text-gray-700 dark:text-gray-300',
-              {
-                'h-3 w-3': _ctx.size === 'sm' || _ctx.size === 'xs',
-                'h-4 w-4': !['xs', 'sm', 'xl'].includes(_ctx.size),
-                'h-5 w-5': _ctx.size === 'xl',
-              }
-            ]]),
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                "stroke-linejoin": "round",
-                "stroke-linecap": "round",
-                fill: "none"
-              }, _hoisted_10, 2 /* CLASS */))
-        ])
-      ]),
-      (_ctx.errorInternal)
-        ? (vue.openBlock(), vue.createElementBlock("p", {
-            key: 1,
-            class: "text-sm text-error-500 mt-1",
-            textContent: vue.toDisplayString(_ctx.errorInternal)
-          }, null, 8 /* PROPS */, _hoisted_11))
-        : vue.createCommentVNode("v-if", true)
-    ]))
-  }
-
-  script$j.render = render$h;
-  script$j.__file = "src/components/select/Select.vue";
-
-  const _hoisted_1$9 = { class: "flex-grow" };
-
-  function render$g(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9))
-  }
-
-  const script$h = {};
-
-
-  script$h.render = render$g;
-  script$h.__file = "src/components/spacer/Spacer.vue";
-  var script$i = script$h;
-
-  var script$g = {
-    name: 'XSkeleton',
-
-    props: {
-      tag: {
-        type: String,
-        default: 'div',
-      },
-    },
-  };
-
-  const _hoisted_1$8 = /*#__PURE__*/vue.createTextVNode(" ​ ");
-
-  function render$f(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md" }, {
-      default: vue.withCtx(() => [
-        _hoisted_1$8
-      ]),
-      _: 1 /* STABLE */
-    }))
-  }
-
-  script$g.render = render$f;
-  script$g.__file = "src/components/skeleton/Skeleton.vue";
-
-  var script$f = {
-    name: 'XStatusDot',
-
-    props: {
-      animate: {
-        type: Boolean,
-        default: false,
-      },
-
-      color: {
-        type: String,
-        default: 'primary',
-      },
-
-      tag: {
-        type: String,
-        default: 'div',
-      },
-    },
-  };
-
-  function render$e(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "inline-block relative" }, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default"),
-        ($props.animate)
-          ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: vue.normalizeClass(["animate-ping opacity-75 absolute -top-0.5 -right-0.5 rounded-full h-3 w-3 z-10", [`bg-${$props.color}-500`]])
-            }, null, 2 /* CLASS */))
-          : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["absolute -top-0.5 -right-0.5 rounded-full h-3 w-3 z-10", [`bg-${$props.color}-500`]])
-        }, null, 2 /* CLASS */)
-      ]),
-      _: 3 /* FORWARDED */
-    }))
-  }
-
-  script$f.render = render$e;
-  script$f.__file = "src/components/status/StatusDot.vue";
-
-  var script$e = {
-    name: 'XTableHead',
-  };
-
-  const _hoisted_1$7 = { class: "align-bottom" };
-  const _hoisted_2$4 = { class: "text-sm text-gray-700 dark:text-gray-400" };
-
-  function render$d(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1$7, [
-      vue.createElementVNode("tr", _hoisted_2$4, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ])
-    ]))
-  }
-
-  script$e.render = render$d;
-  script$e.__file = "src/components/table/TableHead.vue";
-
-  const validator$3 = {
-    sort: [
-      null,
-      1,
-      -1,
-    ],
-    textAlign: [
-      null,
-      'left',
-      'center',
-      'right',
-      'justify',
-    ],
-  };
-
-  var script$d = {
-    name: 'XTableHeader',
-
-    validator: validator$3,
-
-    props: {
-      sort: {
-        type: [Number, Boolean],
-        default: null,
-        validator: (value) => validator$3.sort.includes(value),
-      },
-
-      sortable: {
-        type: Boolean,
-        default: false,
-      },
-
-      textAlign: {
-        type: String,
-        default: 'left',
-        validator: (value) => validator$3.textAlign.includes(value),
-      },
-
-      stickyHeader: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-
-  const _hoisted_1$6 = {
-    key: 0,
-    class: "flex items-center"
-  };
-  const _hoisted_2$3 = {
-    key: 0,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    "stroke-linejoin": "round",
-    "stroke-linecap": "round",
-    fill: "none",
-    role: "presentation",
-    class: "inline-block stroke-2 w-3 h-3 ml-0.5"
-  };
-  const _hoisted_3$3 = /*#__PURE__*/vue.createElementVNode("line", {
-    x1: "12",
-    y1: "5",
-    x2: "12",
-    y2: "19"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_4$3 = /*#__PURE__*/vue.createElementVNode("polyline", { points: "19 12 12 19 5 12" }, null, -1 /* HOISTED */);
-  const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("line", {
-    x1: "12",
-    y1: "19",
-    x2: "12",
-    y2: "5"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("polyline", { points: "5 12 12 5 19 12" }, null, -1 /* HOISTED */);
-
-  function render$c(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("th", {
-      class: vue.normalizeClass(["py-2 bg-gray-50 dark:bg-gray-800 font-medium tracking-wide uppercase text-xs pr-1 last:pr-0", [
-        {
-          //sort
-          'cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out': $props.sortable,
-          //stickyHeader
-          'sticky top-0': $props.stickyHeader,
-          // textAlign
-          'text-left': $props.textAlign === 'left',
-          'text-center': $props.textAlign === 'center',
-          'text-right': $props.textAlign === 'right',
-          'text-justify': $props.textAlign === 'justify',
-        },
-      ]])
-    }, [
-      ($props.sortable)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-            vue.renderSlot(_ctx.$slots, "default"),
-            ([1, -1].includes($props.sort))
-              ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$3, [
-                  ($props.sort === -1)
-                    ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                        _hoisted_3$3,
-                        _hoisted_4$3
-                      ], 64 /* STABLE_FRAGMENT */))
-                    : vue.createCommentVNode("v-if", true),
-                  ($props.sort === 1)
-                    ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                        _hoisted_5,
-                        _hoisted_6
-                      ], 64 /* STABLE_FRAGMENT */))
-                    : vue.createCommentVNode("v-if", true)
-                ]))
-              : vue.createCommentVNode("v-if", true)
-          ]))
-        : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
-    ], 2 /* CLASS */))
-  }
-
-  script$d.render = render$c;
-  script$d.__file = "src/components/table/TableHeader.vue";
-
-  var script$c = {
-    name: 'XTableBody',
-  };
-
-  function render$b(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("tbody", null, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ]))
-  }
-
-  script$c.render = render$b;
-  script$c.__file = "src/components/table/TableBody.vue";
-
-  const validator$2 = {
-    verticalAlign: [
-      'baseline',
-      'bottom',
-      'middle',
-      'text-bottom',
-      'text-top',
-      'top',
-    ],
-  };
-
-  var script$b = {
-    name: 'XTableRow',
-
-    validator: validator$2,
-
-    props: {
-      clickable: {
-        type: Boolean,
-        default: false,
-      },
-
-      verticalAlign: {
-        type: String,
-        default: 'top',
-        validator: (value) => validator$2.verticalAlign.includes(value),
-      },
-    },
-  };
-
-  function render$a(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("tr", {
-      class: vue.normalizeClass(["border-b border-gray-200 dark:border-gray-700", [
-        {
-          'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': $props.clickable,
-          // vertical-align
-          'align-baseline': $props.verticalAlign === 'baseline',
-          'align-bottom': $props.verticalAlign === 'bottom',
-          'align-middle': $props.verticalAlign === 'middle',
-          'align-text-bottom': $props.verticalAlign === 'text-bottom',
-          'align-text-top': $props.verticalAlign === 'text-top',
-          'align-top': $props.verticalAlign === 'top',
-        },
-      ]])
-    }, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ], 2 /* CLASS */))
-  }
-
-  script$b.render = render$a;
-  script$b.__file = "src/components/table/TableRow.vue";
-
-  const validator$1 = {
-    textAlign: [
-      null,
-      'left',
-      'center',
-      'right',
-      'justify',
-    ],
-    verticalAlign: [
-      null,
-      'baseline',
-      'bottom',
-      'middle',
-      'text-bottom',
-      'text-top',
-      'top',
-    ],
-  };
-
-  var script$a = {
-    name: 'XTableCell',
-
-    validator: validator$1,
-
-    props: {
-      textAlign: {
-        default: null,
-        type: String,
-        validator: (value) => validator$1.textAlign.includes(value),
-      },
-
-      truncate: {
-        default: false,
-        type: Boolean,
-      },
-
-      dense: {
-        default: false,
-        type: Boolean,
-      },
-
-      fixed: {
-        default: false,
-        type: Boolean,
-      },
-
-      verticalAlign: {
-        default: null,
-        type: String,
-        validator: (value) => validator$1.verticalAlign.includes(value),
-      },
-    },
-
-    created() {
-      if (this.truncate && !this.fixed) {
-        console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property');
-      }
-    },
-  };
-
-  function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("td", {
-      class: vue.normalizeClass(["last:pr-0", [
-        {
-          // density
-          'py-1 pr-2': $props.dense,
-          'py-2 pr-4': !$props.dense,
-          // text-align
-          'text-left': $props.textAlign === 'left',
-          'text-center': $props.textAlign === 'center',
-          'text-right': $props.textAlign === 'right',
-          'text-justify': $props.textAlign === 'justify',
-          // vertical-align
-          'align-baseline': $props.verticalAlign === 'baseline',
-          'align-bottom': $props.verticalAlign === 'bottom',
-          'align-middle': $props.verticalAlign === 'middle',
-          'align-text-bottom': $props.verticalAlign === 'text-bottom',
-          'align-text-top': $props.verticalAlign === 'text-top',
-          'align-top': $props.verticalAlign === 'top',
-          // truncate
-          'truncate': $props.truncate && $props.fixed,
-        },
-      ]])
-    }, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ], 2 /* CLASS */))
-  }
-
-  script$a.render = render$9;
-  script$a.__file = "src/components/table/TableCell.vue";
-
-  var script$9 = {
-    name: 'XTable',
-
-    components: {
-      TableHead: script$e,
-      TableHeader: script$d,
-      TableBody: script$c,
-      TableRow: script$b,
-      TableCell: script$a,
-      XSpinner: script$E,
-    },
-
-    props: {
-      loading: {
-        type: Boolean,
-        default: false,
-      },
-
-      headers: {
-        type: Array,
-        default: () => [],
-      },
-
-      items: {
-        type: Array,
-        default: () => [],
-      },
-
-      sort: {
-        type: Array,
-        default: () => [],
-      },
-
-      dense: {
-        type: Boolean,
-        default: false,
-      },
-
-      fixed: {
-        type: Boolean,
-        default: false,
-      },
-
-      scrollable: {
-        type: Boolean,
-        default: true,
-      },
-
-      stickyHeader: {
-        type: Boolean,
-        default: true,
-      },
-    },
-
-    methods: {
-      getSort(headerValue, sort) {
-        for (let i = 0; i < sort.length; i++) {
-          const { 0: value, 1: order } = sort[i].split(',');
-
-          if (headerValue === value) return parseInt(order)
-        }
-
-        return null
-      },
-      sortHeader(header) {
-        // update sort array
-        const sort = this.sort.slice(0);
-        let exists = false;
-
-        for (let i = 0; i < sort.length; i++) {
-          const { 0: value, 1: order } = sort[i].split(',');
-
-          if (value === header.value) {
-            exists = true;
-
-            if (order === '-1') {
-              // update position to 1
-              sort.splice(i, 1, `${header.value},1`);
-              break
-            } else if (order === '1') {
-              // delete position
-              sort.splice(i, 1);
-              break
-            }
-          }
-        }
-
-        if (!exists) sort.push(`${header.value},-1`);
-
-        this.$emit('update:sort', sort);
-      },
-      getPath(obj, path, defValue) {
-        if (!path) return undefined
-        const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
-        const result = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj);
-
-        return result === undefined ? defValue : result
-      },
-    },
-  };
-
-  const _hoisted_1$5 = {
-    key: 0,
-    class: "absolute inset-0 flex items-center justify-center z-40 bg-gray-300 rounded opacity-50"
-  };
-
-  function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_table_header = vue.resolveComponent("table-header");
-    const _component_table_head = vue.resolveComponent("table-head");
-    const _component_table_cell = vue.resolveComponent("table-cell");
-    const _component_table_row = vue.resolveComponent("table-row");
-    const _component_table_body = vue.resolveComponent("table-body");
-    const _component_x_spinner = vue.resolveComponent("x-spinner");
-
-    return (vue.openBlock(), vue.createElementBlock("table", {
-      class: vue.normalizeClass(["w-full relative", [
-        {
-          'overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table': $props.scrollable,
-          'relative': $props.stickyHeader,
-          'table-fixed': $props.fixed,
-        }
-      ]])
-    }, [
-      vue.createVNode(_component_table_head, null, {
-        default: vue.withCtx(() => [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.headers, (header, index) => {
-            return (vue.openBlock(), vue.createBlock(_component_table_header, {
-              key: index,
-              "sticky-header": $props.stickyHeader,
-              "text-align": header.align,
-              sort: $options.getSort(header.value, $props.sort),
-              sortable: header.sortable,
-              onClick: $event => (header.sortable ? $options.sortHeader(header) : null)
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode(vue.toDisplayString(header.text), 1 /* TEXT */)
-              ]),
-              _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["sticky-header", "text-align", "sort", "sortable", "onClick"]))
-          }), 128 /* KEYED_FRAGMENT */))
-        ]),
-        _: 1 /* STABLE */
-      }),
-      vue.createVNode(_component_table_body, null, {
-        default: vue.withCtx(() => [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (item, index) => {
-            return (vue.openBlock(), vue.createBlock(_component_table_row, {
-              key: index,
-              clickable: "",
-              onClick: $event => (_ctx.$emit('click-row', item))
-            }, {
-              default: vue.withCtx(() => [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.headers, (header, index2) => {
-                  return (vue.openBlock(), vue.createBlock(_component_table_cell, {
-                    key: index2,
-                    "text-align": header.align,
-                    dense: $props.dense,
-                    fixed: $props.fixed
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, `item-${header.value}`, { item: item }, () => [
-                        vue.createTextVNode(vue.toDisplayString($options.getPath(item, header.value)), 1 /* TEXT */)
-                      ])
-                    ]),
-                    _: 2 /* DYNAMIC */
-                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["text-align", "dense", "fixed"]))
-                }), 128 /* KEYED_FRAGMENT */))
-              ]),
-              _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
-          }), 128 /* KEYED_FRAGMENT */))
-        ]),
-        _: 3 /* FORWARDED */
-      }),
-      ($props.loading)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-            vue.createVNode(_component_x_spinner, { size: "lg" })
-          ]))
-        : vue.createCommentVNode("v-if", true)
-    ], 2 /* CLASS */))
-  }
-
-  script$9.render = render$8;
-  script$9.__file = "src/components/table/Table.vue";
-
-  var script$8 = {
-    name: 'XTab',
-
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-
-      value: {
-        type: [String, Number],
-        default: null,
-      },
-
-      color: {
-        type: String,
-        default: 'primary',
-      },
-
-      tag: {
-        type: String,
-        default: 'li',
-      },
-
-      to: {
-        type: String,
-        default: undefined,
-      },
-    },
-
-    setup(props) {
-      const tabs = vue.inject(
-        'tabs',
-        {
-          state: vue.reactive({
-            active: null,
-          }),
-          activateTab: () => {},
-        },
-      );
-
-      const state = vue.reactive({
-        selected: vue.computed(() => tabs.state.active === props.value),
-      });
-
-      function onClickTab() {
-        tabs.activateTab(props.value);
-      }
-
-      return {
-        ...vue.toRefs(state),
-        tabs,
-        onClickTab,
-      }
-    },
-  };
-
-  function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.to ? 'router-link' : $props.tag), {
-      to: $props.to,
-      class: vue.normalizeClass(["pb-2 transition-colors duration-150 ease-in-out", [
-        {
-          [`border-b-2 border-${$props.color}-500 text-${$props.color}-500`]: _ctx.selected,
-          'cursor-pointer': !$props.disabled,
-          'cursor-not-allowed': $props.disabled,
-          'cursor-not-allowed text-gray-500': $props.disabled && !_ctx.selected,
-        },
-      ]]),
-      "aria-disabled": $props.disabled ? 'true' : null,
-      "aria-selected": _ctx.selected ? 'true' : 'false',
-      onClick: $setup.onClickTab
-    }, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["to", "class", "aria-disabled", "aria-selected", "onClick"]))
-  }
-
-  script$8.render = render$7;
-  script$8.__file = "src/components/tabs/Tab.vue";
-
-  var script$7 = {
-    name: 'XTabs',
-
-    props: {
-      modelValue: {
-        type: [String, Number],
-        default: null,
-      },
-      tag: {
-        type: String,
-        default: 'ul',
-      },
-    },
-
-    emits: ['update:modelValue'],
-
-    setup(props, { emit }) {
-      const state = vue.reactive({
-        active: vue.computed(() => props.modelValue),
-      });
-
-      vue.provide('tabs', {
-        state,
-        activateTab,
-      });
-
-      function activateTab(tab) {
-        emit('update:modelValue', tab);
-      }
-    },
-  };
-
-  function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "flex border-b border-gray-200 dark:border-gray-700 space-x-4" }, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3 /* FORWARDED */
-    }))
-  }
-
-  script$7.render = render$6;
-  script$7.__file = "src/components/tabs/Tabs.vue";
-
-  var script$6 = {
-    name: 'XTag',
-
-    props: {
-      color: {
-        type: String,
-        default: 'gray',
-      },
-
-      radius: {
-        type: String,
-        default: 'full',
-      },
-
-      removable: {
-        type: Boolean,
-        default: false,
-      },
-
-      size: {
-        type: String,
-        default: null,
-      },
-
-      tag: {
-        type: String,
-        default: 'span',
-      },
-
-      outlined: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-
-  const _hoisted_1$4 = {
-    key: 0,
-    class: "flex items-center"
-  };
-  const _hoisted_2$2 = /*#__PURE__*/vue.createElementVNode("line", {
-    x1: "18",
-    y1: "6",
-    x2: "6",
-    y2: "18"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_3$2 = /*#__PURE__*/vue.createElementVNode("line", {
-    x1: "6",
-    y1: "6",
-    x2: "18",
-    y2: "18"
-  }, null, -1 /* HOISTED */);
-  const _hoisted_4$2 = [
-    _hoisted_2$2,
-    _hoisted_3$2
-  ];
-
-  function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
-      class: vue.normalizeClass(["inline-block leading-none", 
-        [
-          [`bg-${$props.color}-200 text-${$props.color}-900 border-${$props.color}-900`],
-          {
-            // variant
-            '!bg-transparent border': $props.outlined,
-
-            // size
-            'py-1': $props.size === 'auto',
-            'px-2 py-1 text-xs': $props.size === 'xs',
-            'px-2 py-1 text-sm': $props.size === 'sm',
-            'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes($props.size),
-            'px-4 py-3 text-lg': $props.size === 'lg',
-            'px-6 py-6 text-xl': $props.size === 'xl',
-
-            // radius
-            'rounded-full': $props.radius === 'full',
-            'rounded-lg': $props.radius === 'lg',
-            'rounded-md': $props.radius === 'md',
-            'rounded-sm': $props.radius === 'sm',
-            'rounded': $props.radius === 'rounded',
-          },
-        ]])
-    }, {
-      default: vue.withCtx(() => [
-        ($props.removable)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$4, [
-              vue.renderSlot(_ctx.$slots, "default"),
-              (vue.openBlock(), vue.createElementBlock("svg", {
-                width: "24",
-                height: "24",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                "stroke-linejoin": "round",
-                "stroke-linecap": "round",
-                fill: "none",
-                role: "presentation",
-                class: "stroke-2 w-4 h-4 ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150 ease-in-out flex-shrink-0",
-                onClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('remove')))
-              }, _hoisted_4$2))
-            ]))
-          : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
-      ]),
-      _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["class"]))
-  }
-
-  script$6.render = render$5;
-  script$6.__file = "src/components/tag/Tag.vue";
-
-  var script$5 = {
-    name: 'XTextarea',
-
-    validator: withValidator(),
-
-    props: {
-      ...withProps(),
-
-      label: {
-        type: String,
-        default: '',
-      },
-
-      dir: {
-        type: String,
-        default: 'ltr',
-      },
-
-      max: {
-        type: Number,
-        default: null,
-      },
-
-      maxlength: {
-        type: Number,
-        default: null,
-      },
-
-      min: {
-        type: Number,
-        default: null,
-      },
-
-      minlength: {
-        type: Number,
-        default: null,
-      },
-
-      placeholder: {
-        type: String,
-        default: null,
-      },
-
-      adjustToText: {
-        type: Boolean,
-        default: true,
-      },
-
-      preventEnter: {
-        type: Boolean,
-        default: false,
-      },
-
-      inputClass: {
-        type: String,
-        default: '',
-      },
-    },
-
-    emits: withEmits(),
-
-    setup(props, { attrs, emit }) {
-      return {
-        ...useInputtable(props, { attrs, emit }),
-      }
-    },
-
-    data() {
-      return {
-        observer: null,
-      }
-    },
-
-    watch: {
-      modelValue() {
-        setTimeout(this.resize);
-      },
-      size() {
-        setTimeout(this.resize);
-      },
-    },
-
-    mounted() {
-      this.observer = new ResizeObserver(this.resize);
-      this.observer.observe(this.$refs.focusRef);
-
-      window.addEventListener('resize', this.resize);
-    },
-
-    beforeUnmount() {
-      this.observer.disconnect();
-      window.removeEventListener('resize', this.resize);
-    },
-
-    methods: {
-      onInput() {
-        this.resize();
-      },
-      onKeyDown(e) {
-        if (this.preventEnter && e.keyCode === 13) {
-          e.preventDefault();
-          e.stopPropagation();
-
-          return
-        }
-      },
-      resize() {
-        if (this.adjustToText) {
-          const { focusRef } = this.$refs;
-
-          focusRef.style.height = '1px';
-          focusRef.style.height = (2 + focusRef.scrollHeight) + 'px';
-        }
-      },
-    },
-  };
-
-  const _hoisted_1$3 = { class: "inline-block mb-1 relative" };
-  const _hoisted_2$1 = ["textContent"];
-  const _hoisted_3$1 = ["disabled", "max", "maxlength", "min", "dir", "minlength", "name", "placeholder", "readonly", "value"];
-  const _hoisted_4$1 = ["textContent"];
-
-  function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$3, [
-      ($props.label)
-        ? (vue.openBlock(), vue.createElementBlock("p", {
-            key: 0,
-            class: vue.normalizeClass(["font-medium text-gray-800 dark:text-gray-200 mb-1", {
-          'text-xs': _ctx.size === 'xs',
-          'text-sm': _ctx.size === 'sm',
-          'text-lg': _ctx.size === 'lg',
-          'text-xl': _ctx.size === 'xl',
-        }]),
-            textContent: vue.toDisplayString($props.label)
-          }, null, 10 /* CLASS, PROPS */, _hoisted_2$1))
-        : vue.createCommentVNode("v-if", true),
-      vue.createElementVNode("textarea", vue.mergeProps({
-        ref: "focusRef",
-        class: ["appearance-none block w-full text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 rounded-form leading-tight focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700 resize-none overflow-hidden", [
-          _ctx.disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
-          {
-            // size
-            'py-1': _ctx.size === 'auto',
-            'px-2 py-1 text-xs': _ctx.size === 'xs',
-            'px-2 py-1 text-sm': _ctx.size === 'sm',
-            'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
-            'px-4 py-3 text-lg': _ctx.size === 'lg',
-            'px-6 py-6 text-xl': _ctx.size === 'xl',
-          },
-          _ctx.flat ? '!p-0 !bg-transparent' : 'border shadow',
-          {
-            // error
-            'border-error-500 focus:border-error-500 dark:focus:border-error-500': _ctx.errorInternal,
-          },
-          $props.inputClass,
-        ]],
-        disabled: _ctx.disabled,
-        max: $props.max,
-        maxlength: $props.maxlength,
-        min: $props.min,
-        dir: $props.dir,
-        minlength: $props.minlength,
-        name: _ctx.name,
-        placeholder: $props.placeholder,
-        readonly: _ctx.readonly,
-        value: _ctx.modelValue
-      }, vue.toHandlers(_ctx.inputListeners), {
-        onKeydown: _cache[0] || (_cache[0] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
-        onInput: _cache[1] || (_cache[1] = (...args) => ($options.onInput && $options.onInput(...args)))
-      }), null, 16 /* FULL_PROPS */, _hoisted_3$1),
-      (_ctx.errorInternal)
-        ? (vue.openBlock(), vue.createElementBlock("p", {
-            key: 1,
-            class: "text-sm text-error-500 mt-1",
-            textContent: vue.toDisplayString(_ctx.errorInternal)
-          }, null, 8 /* PROPS */, _hoisted_4$1))
-        : vue.createCommentVNode("v-if", true)
-    ]))
-  }
-
-  script$5.render = render$4;
-  script$5.__file = "src/components/textarea/Textarea.vue";
-
-  const validator = {
-    align: [
-      'left',
-      'right',
-    ],
-    position: [
-      'bottom',
-      'top',
-    ],
-  };
-
-  var script$4 = {
-    name: 'XToast',
-
-    validator,
-
-    props: {
-      align: {
-        type: String,
-        default: 'right',
-        validator: (value) => validator.align.includes(value),
-      },
-
-      position: {
-        default: 'bottom',
-        type: String,
-        validator: (value) => validator.position.includes(value),
-      },
-
-      timeout: {
-        type: Number,
-        default: 3500,
-      },
-    },
-
-    data() {
-      return {
-        events: [],
-      }
-    },
-
-    methods: {
-      log(content) {
-        this.add(content);
-      },
-
-      success(content) {
-        this.add(content, 'success');
-      },
-
-      warn(content) {
-        this.add(content, 'warn');
-      },
-
-      error(content) {
-        this.add(content, 'error');
-      },
-
-      add(content, type = null) {
-        const event = {
-          id: Date.now(),
-          content,
-          type,
-        };
-
-        this.events.push(event);
-        this.setTimer(event);
-      },
-
-      remove(event) {
-        this.events = this.events.filter((e) => e.id !== event.id);
-      },
-
-      setTimer(event) {
-        setTimeout(
-          () => {
-            this.remove(event);
-          },
-          this.timeout,
-        );
-      },
-    },
-  };
-
-  const _hoisted_1$2 = ["onClick"];
-
-  function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("div", {
-      class: vue.normalizeClass(["fixed z-40 w-full sm:w-96", {
-        // align
-        'left-0': $props.align === 'left',
-        'right-0': $props.align === 'right',
-        // position
-        'bottom-0': $props.position === 'bottom',
-        'top-0': $props.position === 'top',
-      }])
-    }, [
-      vue.createVNode(vue.TransitionGroup, {
-        tag: "ul",
-        "enter-active-class": "transition ease-out duration-500",
-        "leave-active-class": "transition ease-out duration-500",
-        "enter-class": "transform translate-y-2 opacity-0",
-        "enter-to-class": "transform translate-y-0 opacity-100",
-        "leave-class": "transform translate-y-0 opacity-100",
-        "leave-to-class": "transform translate-y-2 opacity-0",
-        "move-class": "ease-in-out duration-200"
-      }, {
-        default: vue.withCtx(() => [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.events, (event) => {
-            return (vue.openBlock(), vue.createElementBlock("li", {
-              key: event.id,
-              class: vue.normalizeClass([
-            'px-4',
-            {
-              'pb-2': $props.position === 'bottom',
-              'pt-2': $props.position === 'top',
-            }
-          ])
-            }, [
-              vue.createElementVNode("div", {
-                class: vue.normalizeClass([
-              'rounded px-4 py-3 cursor-pointer w-full',
-              {
-                // type
-                'bg-gray-900 dark:bg-white text-white dark:text-gray-900 border border-gray-700 dark:border-gray-200':
-                  !event.type || (event.type && !['success', 'error', 'warn'].includes(event.type)),
-                'bg-success-500 text-success-50': event.type && event.type === 'success',
-                'bg-error-500 text-error-50': event.type && event.type === 'error',
-                'bg-warning-500 text-warning-50': event.type && event.type === 'warn',
-              }
-            ]),
-                onClick: $event => ($options.remove(event))
-              }, vue.toDisplayString(event.content), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$2)
-            ], 2 /* CLASS */))
-          }), 128 /* KEYED_FRAGMENT */))
-        ]),
-        _: 1 /* STABLE */
-      })
-    ], 2 /* CLASS */))
-  }
-
-  script$4.render = render$3;
-  script$4.__file = "src/components/toast/Toast.vue";
-
-  var script$3 = {
-    name: 'XToggle',
-
-    components: {
-      XSpinner: script$E,
-    },
-
-    validator: {
-      ...withValidator(),
-    },
-
-    props: {
-      ...withProps(),
-
-      id: {
-        type: String,
-        default: null,
-      },
-
-      label: {
-        type: String,
-        default: null,
-      },
-
-      glow: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    emits: withEmits(false),
-
-    setup(props, { attrs, emit }) {
-      return {
-        ...useInputtable(props, { attrs, emit, useListeners: false }),
-      }
-    },
-
-    computed: {
-      checked: {
-        get() {
-          return this.modelValue
-        },
-
-        set(val) {
-          this.$emit('update:modelValue', val);
-        },
-      },
-    },
-  };
-
-  const _hoisted_1$1 = { class: "flex items-center" };
-  const _hoisted_2 = ["id", "aria-checked", "aria-disabled", "disabled", "name", "required", "value"];
-  const _hoisted_3 = ["textContent"];
-  const _hoisted_4 = ["textContent"];
-
-  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_x_spinner = vue.resolveComponent("x-spinner");
-
-    return (vue.openBlock(), vue.createElementBlock("label", {
-      class: vue.normalizeClass(["inline-block mb-1 relative pb-2", [!_ctx.disabled ? 'cursor-pointer' : 'cursor-not-allowed']])
-    }, [
-      vue.createElementVNode("div", _hoisted_1$1, [
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["rounded-full transition-colors duration-300", [
-            {
-              // shadow
-              'border shadow': !_ctx.flat,
-              [`shadow-lg shadow-${_ctx.color}-500/50`]: !_ctx.flat && $props.glow && _ctx.modelValue,
-
-              'w-8': _ctx.size === 'sm' || _ctx.size === 'xs',
-              'w-10': !['xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
-              'w-12': _ctx.size === 'lg',
-              'w-14': _ctx.size === 'xl',
-              'bg-gray-300 dark:bg-gray-600': _ctx.disabled && !$options.checked,
-              'bg-gray-400 dark:bg-gray-400': _ctx.disabled && $options.checked,
-              'bg-gray-200 dark:bg-gray-600': !_ctx.disabled && !$options.checked,
-              [`bg-${_ctx.color}-200  border-${_ctx.color}-200`]: !_ctx.disabled && $options.checked,
-            }
-          ]])
-        }, [
-          vue.withDirectives(vue.createElementVNode("input", {
-            id: $props.id,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.checked) = $event)),
-            "aria-checked": $options.checked ? 'true' : 'false',
-            "aria-disabled": _ctx.disabled ? 'true' : null,
-            type: "checkbox",
-            class: "hidden",
-            disabled: _ctx.disabled || _ctx.loading,
-            name: _ctx.name,
-            required: _ctx.required,
-            value: _ctx.modelValue
-          }, null, 8 /* PROPS */, _hoisted_2), [
-            [vue.vModelCheckbox, $options.checked]
-          ]),
-          (_ctx.loading)
-            ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
-                key: 0,
-                size: _ctx.size,
-                class: vue.normalizeClass({'translate-x-full': $options.checked})
-              }, null, 8 /* PROPS */, ["size", "class"]))
-            : (vue.openBlock(), vue.createElementBlock("div", {
-                key: 1,
-                class: vue.normalizeClass(["rounded-full shadow transform transition duration-300 flex-shrink-0", [
-              {
-                'h-4 w-4': _ctx.size === 'sm' || _ctx.size === 'xs',
-                'h-5 w-5': !['xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
-                'h-6 w-6': _ctx.size === 'lg',
-                'h-7 w-7': _ctx.size === 'xl',
-                'translate-x-full': $options.checked,
-                'bg-gray-200 dark:bg-gray-200': _ctx.disabled,
-                'bg-white': !_ctx.disabled && !$options.checked,
-                [`bg-${_ctx.color}-500`]: !_ctx.disabled && $options.checked,
-              },
-            ]])
-              }, null, 2 /* CLASS */))
-        ], 2 /* CLASS */),
-        ($props.label)
-          ? (vue.openBlock(), vue.createElementBlock("span", {
-              key: 0,
-              class: vue.normalizeClass(["pl-2 font-medium text-gray-800 dark:text-gray-200", {
-            'text-xs': _ctx.size === 'xs',
-            'text-sm': _ctx.size === 'sm',
-            'text-lg': _ctx.size === 'lg',
-            'text-xl': _ctx.size === 'xl',
-          }]),
-              textContent: vue.toDisplayString($props.label)
-            }, null, 10 /* CLASS, PROPS */, _hoisted_3))
-          : vue.createCommentVNode("v-if", true)
-      ]),
-      (_ctx.errorInternal)
-        ? (vue.openBlock(), vue.createElementBlock("p", {
-            key: 0,
-            class: "text-sm text-error-500 mt-1",
-            textContent: vue.toDisplayString(_ctx.errorInternal)
-          }, null, 8 /* PROPS */, _hoisted_4))
-        : vue.createCommentVNode("v-if", true)
-    ], 2 /* CLASS */))
-  }
-
-  script$3.render = render$2;
-  script$3.__file = "src/components/toggle/Toggle.vue";
-
-  var script$2 = {
-    components: {
-      XPopover: script$o,
-      XPopoverContainer: script$n,
-    },
-  };
-
-  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_x_popover_container = vue.resolveComponent("x-popover-container");
-    const _component_x_popover = vue.resolveComponent("x-popover");
-
-    return (vue.openBlock(), vue.createBlock(_component_x_popover, vue.mergeProps({
-      hover: "",
-      class: "dark"
-    }, _ctx.$attrs), {
-      content: vue.withCtx(() => [
-        vue.createVNode(_component_x_popover_container, { class: "p-2 text-gray-300 text-sm" }, {
-          default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "tooltip")
-          ]),
-          _: 3 /* FORWARDED */
-        })
-      ]),
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3 /* FORWARDED */
-    }, 16 /* FULL_PROPS */))
-  }
-
-  script$2.render = render$1;
-  script$2.__file = "src/components/tooltip/Tooltip.vue";
-
-  const _hoisted_1 = {
-    class: /*#__PURE__*/vue.normalizeClass([
-        'bg-primary-50',
-        'bg-primary-200',
-        'bg-primary-500',
-        'bg-primary-600',
-        'bg-primary-800',
-        'border-primary-200',
-        'border-primary-500',
-        'border-primary-600',
-        'border-primary-700',
-        'border-primary-900',
-        'text-primary-50',
-        'text-primary-500',
-        'text-primary-600',
-        'text-primary-900',
-        'shadow-primary-500/50',
-        'bg-secondary-50',
-        'bg-secondary-200',
-        'bg-secondary-500',
-        'bg-secondary-600',
-        'bg-secondary-800',
-        'border-secondary-200',
-        'border-secondary-500',
-        'border-secondary-600',
-        'border-secondary-700',
-        'border-secondary-900',
-        'text-secondary-50',
-        'text-secondary-500',
-        'text-secondary-600',
-        'text-secondary-900',
-        'shadow-secondary-500/50',
-        'bg-error-50',
-        'bg-error-200',
-        'bg-error-500',
-        'bg-error-600',
-        'bg-error-800',
-        'border-error-200',
-        'border-error-500',
-        'border-error-600',
-        'border-error-700',
-        'border-error-900',
-        'text-error-50',
-        'text-error-500',
-        'text-error-600',
-        'text-error-900',
-        'shadow-error-500/50',
-        'bg-warning-50',
-        'bg-warning-200',
-        'bg-warning-500',
-        'bg-warning-600',
-        'bg-warning-800',
-        'border-warning-200',
-        'border-warning-500',
-        'border-warning-600',
-        'border-warning-700',
-        'border-warning-900',
-        'text-warning-50',
-        'text-warning-500',
-        'text-warning-600',
-        'text-warning-900',
-        'shadow-warning-500/50',
-        'bg-success-50',
-        'bg-success-200',
-        'bg-success-500',
-        'bg-success-600',
-        'bg-success-800',
-        'border-success-200',
-        'border-success-500',
-        'border-success-600',
-        'border-success-700',
-        'border-success-900',
-        'text-success-50',
-        'text-success-500',
-        'text-success-600',
-        'text-success-900',
-        'shadow-success-500/50',
-        'bg-rose-50',
-        'bg-rose-200',
-        'bg-rose-500',
-        'bg-rose-600',
-        'bg-rose-800',
-        'border-rose-200',
-        'border-rose-500',
-        'border-rose-600',
-        'border-rose-700',
-        'border-rose-900',
-        'text-rose-50',
-        'text-rose-500',
-        'text-rose-600',
-        'text-rose-900',
-        'shadow-rose-500/50',
-        'bg-zinc-50',
-        'bg-zinc-200',
-        'bg-zinc-500',
-        'bg-zinc-600',
-        'bg-zinc-800',
-        'border-zinc-200',
-        'border-zinc-500',
-        'border-zinc-600',
-        'border-zinc-700',
-        'border-zinc-900',
-        'text-zinc-50',
-        'text-zinc-500',
-        'text-zinc-600',
-        'text-zinc-900',
-        'shadow-zinc-500/50',
-        'bg-neutral-50',
-        'bg-neutral-200',
-        'bg-neutral-500',
-        'bg-neutral-600',
-        'bg-neutral-800',
-        'border-neutral-200',
-        'border-neutral-500',
-        'border-neutral-600',
-        'border-neutral-700',
-        'border-neutral-900',
-        'text-neutral-50',
-        'text-neutral-500',
-        'text-neutral-600',
-        'text-neutral-900',
-        'shadow-neutral-500/50',
-        'bg-stone-50',
-        'bg-stone-200',
-        'bg-stone-500',
-        'bg-stone-600',
-        'bg-stone-800',
-        'border-stone-200',
-        'border-stone-500',
-        'border-stone-600',
-        'border-stone-700',
-        'border-stone-900',
-        'text-stone-50',
-        'text-stone-500',
-        'text-stone-600',
-        'text-stone-900',
-        'shadow-stone-500/50',
-        'bg-pink-50',
-        'bg-pink-200',
-        'bg-pink-500',
-        'bg-pink-600',
-        'bg-pink-800',
-        'border-pink-200',
-        'border-pink-500',
-        'border-pink-600',
-        'border-pink-700',
-        'border-pink-900',
-        'text-pink-50',
-        'text-pink-500',
-        'text-pink-600',
-        'text-pink-900',
-        'shadow-pink-500/50',
-        'bg-fuchsia-50',
-        'bg-fuchsia-200',
-        'bg-fuchsia-500',
-        'bg-fuchsia-600',
-        'bg-fuchsia-800',
-        'border-fuchsia-200',
-        'border-fuchsia-500',
-        'border-fuchsia-600',
-        'border-fuchsia-700',
-        'border-fuchsia-900',
-        'text-fuchsia-50',
-        'text-fuchsia-500',
-        'text-fuchsia-600',
-        'text-fuchsia-900',
-        'shadow-fuchsia-500/50',
-        'bg-purple-50',
-        'bg-purple-200',
-        'bg-purple-500',
-        'bg-purple-600',
-        'bg-purple-800',
-        'border-purple-200',
-        'border-purple-500',
-        'border-purple-600',
-        'border-purple-700',
-        'border-purple-900',
-        'text-purple-50',
-        'text-purple-500',
-        'text-purple-600',
-        'text-purple-900',
-        'shadow-purple-500/50',
-        'bg-violet-50',
-        'bg-violet-200',
-        'bg-violet-500',
-        'bg-violet-600',
-        'bg-violet-800',
-        'border-violet-200',
-        'border-violet-500',
-        'border-violet-600',
-        'border-violet-700',
-        'border-violet-900',
-        'text-violet-50',
-        'text-violet-500',
-        'text-violet-600',
-        'text-violet-900',
-        'shadow-violet-500/50',
-        'bg-indigo-50',
-        'bg-indigo-200',
-        'bg-indigo-500',
-        'bg-indigo-600',
-        'bg-indigo-800',
-        'border-indigo-200',
-        'border-indigo-500',
-        'border-indigo-600',
-        'border-indigo-700',
-        'border-indigo-900',
-        'text-indigo-50',
-        'text-indigo-500',
-        'text-indigo-600',
-        'text-indigo-900',
-        'shadow-indigo-500/50',
-        'bg-blue-50',
-        'bg-blue-200',
-        'bg-blue-500',
-        'bg-blue-600',
-        'bg-blue-800',
-        'border-blue-200',
-        'border-blue-500',
-        'border-blue-600',
-        'border-blue-700',
-        'border-blue-900',
-        'text-blue-50',
-        'text-blue-500',
-        'text-blue-600',
-        'text-blue-900',
-        'shadow-blue-500/50',
-        'bg-sky-50',
-        'bg-sky-200',
-        'bg-sky-500',
-        'bg-sky-600',
-        'bg-sky-800',
-        'border-sky-200',
-        'border-sky-500',
-        'border-sky-600',
-        'border-sky-700',
-        'border-sky-900',
-        'text-sky-50',
-        'text-sky-500',
-        'text-sky-600',
-        'text-sky-900',
-        'shadow-sky-500/50',
-        'bg-cyan-50',
-        'bg-cyan-200',
-        'bg-cyan-500',
-        'bg-cyan-600',
-        'bg-cyan-800',
-        'border-cyan-200',
-        'border-cyan-500',
-        'border-cyan-600',
-        'border-cyan-700',
-        'border-cyan-900',
-        'text-cyan-50',
-        'text-cyan-500',
-        'text-cyan-600',
-        'text-cyan-900',
-        'shadow-cyan-500/50',
-        'bg-teal-50',
-        'bg-teal-200',
-        'bg-teal-500',
-        'bg-teal-600',
-        'bg-teal-800',
-        'border-teal-200',
-        'border-teal-500',
-        'border-teal-600',
-        'border-teal-700',
-        'border-teal-900',
-        'text-teal-50',
-        'text-teal-500',
-        'text-teal-600',
-        'text-teal-900',
-        'shadow-teal-500/50',
-        'bg-emerald-50',
-        'bg-emerald-200',
-        'bg-emerald-500',
-        'bg-emerald-600',
-        'bg-emerald-800',
-        'border-emerald-200',
-        'border-emerald-500',
-        'border-emerald-600',
-        'border-emerald-700',
-        'border-emerald-900',
-        'text-emerald-50',
-        'text-emerald-500',
-        'text-emerald-600',
-        'text-emerald-900',
-        'shadow-emerald-500/50',
-        'bg-green-50',
-        'bg-green-200',
-        'bg-green-500',
-        'bg-green-600',
-        'bg-green-800',
-        'border-green-200',
-        'border-green-500',
-        'border-green-600',
-        'border-green-700',
-        'border-green-900',
-        'text-green-50',
-        'text-green-500',
-        'text-green-600',
-        'text-green-900',
-        'shadow-green-500/50',
-        'bg-lime-50',
-        'bg-lime-200',
-        'bg-lime-500',
-        'bg-lime-600',
-        'bg-lime-800',
-        'border-lime-200',
-        'border-lime-500',
-        'border-lime-600',
-        'border-lime-700',
-        'border-lime-900',
-        'text-lime-50',
-        'text-lime-500',
-        'text-lime-600',
-        'text-lime-900',
-        'shadow-lime-500/50',
-        'bg-yellow-50',
-        'bg-yellow-200',
-        'bg-yellow-500',
-        'bg-yellow-600',
-        'bg-yellow-800',
-        'border-yellow-200',
-        'border-yellow-500',
-        'border-yellow-600',
-        'border-yellow-700',
-        'border-yellow-900',
-        'text-yellow-50',
-        'text-yellow-500',
-        'text-yellow-600',
-        'text-yellow-900',
-        'shadow-yellow-500/50',
-        'bg-amber-50',
-        'bg-amber-200',
-        'bg-amber-500',
-        'bg-amber-600',
-        'bg-amber-800',
-        'border-amber-200',
-        'border-amber-500',
-        'border-amber-600',
-        'border-amber-700',
-        'border-amber-900',
-        'text-amber-50',
-        'text-amber-500',
-        'text-amber-600',
-        'text-amber-900',
-        'shadow-amber-500/50',
-        'bg-orange-50',
-        'bg-orange-200',
-        'bg-orange-500',
-        'bg-orange-600',
-        'bg-orange-800',
-        'border-orange-200',
-        'border-orange-500',
-        'border-orange-600',
-        'border-orange-700',
-        'border-orange-900',
-        'text-orange-50',
-        'text-orange-500',
-        'text-orange-600',
-        'text-orange-900',
-        'shadow-orange-500/50',
-        'bg-red-50',
-        'bg-red-200',
-        'bg-red-500',
-        'bg-red-600',
-        'bg-red-800',
-        'border-red-200',
-        'border-red-500',
-        'border-red-600',
-        'border-red-700',
-        'border-red-900',
-        'text-red-50',
-        'text-red-500',
-        'text-red-600',
-        'text-red-900',
-        'shadow-red-500/50',
-        'bg-gray-50',
-        'bg-gray-200',
-        'bg-gray-500',
-        'bg-gray-600',
-        'bg-gray-800',
-        'border-gray-200',
-        'border-gray-500',
-        'border-gray-600',
-        'border-gray-700',
-        'border-gray-900',
-        'text-gray-50',
-        'text-gray-500',
-        'text-gray-600',
-        'text-gray-900',
-        'shadow-gray-500/50',
-      ])
-  };
-
-  function render(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1))
-  }
-
-  const script = {};
-
-
-  script.render = render;
-  script.__file = "src/components/colors.vue";
-  var script$1 = script;
-
-  var components = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Avatar: script$F,
-    Button: script$C,
-    Card: script$B,
-    Checkbox: script$A,
-    Collapse: script$z,
-    Container: script$y,
-    Divider: script$x,
-    Form: script$w,
-    Icon: script$D,
-    Image: script$v,
-    Input: script$u,
-    Link: script$t,
-    Modal: script$s,
-    Note: script$r,
-    Pagination: script$p,
-    PaginationItem: script$q,
-    Popover: script$o,
-    PopoverContainer: script$n,
-    PopoverItem: script$m,
-    Progress: script$l,
-    Radio: script$k,
-    Select: script$j,
-    Spacer: script$i,
-    Spinner: script$E,
-    Skeleton: script$g,
-    StatusDot: script$f,
-    Table: script$9,
-    TableBody: script$c,
-    TableCell: script$a,
-    TableHead: script$e,
-    TableHeader: script$d,
-    TableRow: script$b,
-    Tab: script$8,
-    Tabs: script$7,
-    Tag: script$6,
-    Textarea: script$5,
-    Toast: script$4,
-    Toggle: script$3,
-    Tooltip: script$2,
-    Colors: script$1
-  });
-
-  const install = (Vue, config = {}) => {
-    Object.entries(components).forEach(([name, component]) => {
-      const prefix = config.prefix ? config.prefix : 'X';
-
-      Vue.component(`${prefix}${name}`, component);
-    });
-  };
-
-  if (typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
-  }
-
-  exports.Avatar = script$F;
-  exports.Button = script$C;
-  exports.Card = script$B;
-  exports.Checkbox = script$A;
-  exports.Collapse = script$z;
-  exports.Colors = script$1;
-  exports.Container = script$y;
-  exports.Divider = script$x;
-  exports.Form = script$w;
-  exports.Icon = script$D;
-  exports.Image = script$v;
-  exports.Input = script$u;
-  exports.Link = script$t;
-  exports.Modal = script$s;
-  exports.Note = script$r;
-  exports.Pagination = script$p;
-  exports.PaginationItem = script$q;
-  exports.Popover = script$o;
-  exports.PopoverContainer = script$n;
-  exports.PopoverItem = script$m;
-  exports.Progress = script$l;
-  exports.Radio = script$k;
-  exports.Select = script$j;
-  exports.Skeleton = script$g;
-  exports.Spacer = script$i;
-  exports.Spinner = script$E;
-  exports.StatusDot = script$f;
-  exports.Tab = script$8;
-  exports.Table = script$9;
-  exports.TableBody = script$c;
-  exports.TableCell = script$a;
-  exports.TableHead = script$e;
-  exports.TableHeader = script$d;
-  exports.TableRow = script$b;
-  exports.Tabs = script$7;
-  exports.Tag = script$6;
-  exports.Textarea = script$5;
-  exports.Toast = script$4;
-  exports.Toggle = script$3;
-  exports.Tooltip = script$2;
-  exports["default"] = install;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-}));