@evance/evance-ui 1.0.2 → 1.0.3

package/dist/cjs/EvImg.vue_vue_type_script_setup_true_lang-BUUYLyoS.cjs

@@ -0,0 +1,372 @@
+"use strict";
+/*! Evance UI v1.0.2 | MIT License */
+const vue = require("vue");
+const props = require("./props-vH_8_4_9.cjs");
+const component = require("./component-B8YXIj1A.cjs");
+const EvResponsive_vue_vue_type_script_setup_true_lang = require("./EvResponsive.vue_vue_type_script_setup_true_lang-Bah18JOc.cjs");
+const EvTransition = require("./EvTransition-D2_Ri5Sn.cjs");
+const helpers = require("./helpers-1oxCWS4Q.cjs");
+const isFunctions = require("./is-functions-Bf6pQOyz.cjs");
+const units = require("./units-BT6K5u5C.cjs");
+const makeEvImgProps = props.propsFactory(
+  {
+    alt: String,
+    cover: Boolean,
+    crossorigin: String,
+    draggable: {
+      type: [Boolean, String],
+      default: void 0
+    },
+    eager: Boolean,
+    gradient: String,
+    lazySrc: String,
+    options: {
+      type: Object,
+      // For more information on types, navigate to:
+      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+      default: () => ({
+        root: void 0,
+        rootMargin: void 0,
+        threshold: void 0
+      })
+    },
+    position: String,
+    referrerpolicy: String,
+    sizes: String,
+    src: {
+      type: [String, Object],
+      default: ""
+    },
+    srcset: String,
+    ...EvResponsive_vue_vue_type_script_setup_true_lang.makeEvResponsiveProps(),
+    ...component.makeComponentProps(),
+    ...EvTransition.makeEvTransitionProps()
+  },
+  "EvImg"
+);
+const _hoisted_1 = {
+  key: 0,
+  class: "ev-img--picture"
+};
+const _hoisted_2 = ["src", "alt", "crossorigin", "referrerpolicy", "draggable"];
+const _hoisted_3 = {
+  key: 0,
+  class: "ev-img--placeholder"
+};
+const _hoisted_4 = { class: "ev-img--error" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvImg",
+  props: {
+    ...makeEvImgProps()
+  },
+  emits: ["loadstart", "load", "error"],
+  setup(__props, { emit }) {
+    const props2 = __props;
+    const slots = vue.useSlots();
+    const currentSrc = vue.shallowRef("");
+    const image = vue.ref();
+    const state = vue.shallowRef(
+      props2.eager ? "loading" : "idle"
+    );
+    const naturalWidth = vue.shallowRef();
+    const naturalHeight = vue.shallowRef();
+    const transition = EvTransition.useEvTransition(props2);
+    const normalisedSrc = vue.computed(() => {
+      const imgSrc = props2;
+      return isFunctions.isObject(imgSrc.src) ? {
+        src: imgSrc.src.src,
+        srcset: props2.srcset || imgSrc.src.srcset,
+        lazySrc: props2.lazySrc || imgSrc.src.lazySrc,
+        aspect: props2.aspectRatio || imgSrc.src.aspect || 0
+      } : {
+        src: props2.src,
+        srcset: props2.srcset,
+        lazySrc: props2.lazySrc,
+        aspect: props2.aspectRatio || 0
+      };
+    });
+    const aspectRatio = vue.computed(() => {
+      return normalisedSrc.value.aspect || naturalWidth.value / naturalHeight.value || 0;
+    });
+    const objectFitClasses = vue.computed(() => {
+      return {
+        "is-object-cover": props2.cover,
+        "is-object-contain": !props2.cover
+      };
+    });
+    function getSrc() {
+      const img = image.value;
+      if (img) {
+        currentSrc.value = img.currentSrc || img.src;
+      }
+    }
+    function init(isIntersecting) {
+      if (props2.eager && isIntersecting) {
+        return;
+      }
+      if (helpers.Browser.supportsIntersection && !isIntersecting && !props2.eager) {
+        return;
+      }
+      state.value = "loading";
+      if (normalisedSrc.value.lazySrc) {
+        const lazyImg = new Image();
+        lazyImg.src = normalisedSrc.value.lazySrc;
+        pollForSize(lazyImg, null);
+      }
+      if (!normalisedSrc.value.src) {
+        return;
+      }
+      vue.nextTick(() => {
+        var _a;
+        emit("loadstart", ((_a = image.value) == null ? void 0 : _a.currentSrc) || normalisedSrc.value.src);
+        setTimeout(() => {
+          var _a2;
+          if ((_a2 = image.value) == null ? void 0 : _a2.complete) {
+            if (!image.value.naturalWidth) {
+              onError();
+            }
+            if (state.value === "error") {
+              return;
+            }
+            if (!aspectRatio.value) {
+              pollForSize(image.value, null);
+            }
+            if (state.value === "loading") {
+              onLoad();
+            }
+          } else {
+            if (!aspectRatio.value) {
+              pollForSize(image.value);
+            }
+            getSrc();
+          }
+        });
+      });
+    }
+    function onError() {
+      var _a;
+      state.value = "error";
+      emit("error", ((_a = image.value) == null ? void 0 : _a.currentSrc) || normalisedSrc.value.src);
+    }
+    function onLoad() {
+      var _a;
+      getSrc();
+      pollForSize(image.value);
+      state.value = "loaded";
+      emit("load", ((_a = image.value) == null ? void 0 : _a.currentSrc) || normalisedSrc.value.src);
+    }
+    let timer = -1;
+    function pollForSize(img, timeout = 100) {
+      const poll = () => {
+        clearTimeout(timer);
+        if (!img) {
+          return;
+        }
+        if (!(img == null ? void 0 : img.complete) && state.value === "loading" && timeout != null) {
+          timer = window.setTimeout(poll, timeout);
+          return;
+        }
+        const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img;
+        if (imgHeight || imgWidth) {
+          naturalWidth.value = imgWidth;
+          naturalHeight.value = imgHeight;
+        } else if (img.currentSrc.endsWith(".svg") || img.currentSrc.startsWith("data:image/svg+xml")) {
+          naturalWidth.value = 1;
+          naturalHeight.value = 1;
+        }
+      };
+      poll();
+    }
+    vue.watch(
+      () => props2.src,
+      () => {
+        if (state.value !== "idle") {
+          state.value = "idle";
+          vue.nextTick(() => {
+            init(true);
+          });
+        }
+      }
+    );
+    vue.watch(aspectRatio, (val, oldVal) => {
+      if (!val && oldVal && image.value) {
+        pollForSize(image.value);
+      }
+    });
+    vue.onBeforeMount(() => init());
+    if (helpers.Browser.hasWindow) {
+      const windowWidth = vue.ref(window.innerWidth);
+      const onWindowResize = () => {
+        windowWidth.value = window.innerWidth;
+      };
+      vue.onMounted(() => {
+        window.addEventListener("resize", onWindowResize);
+        onWindowResize();
+      });
+      vue.onBeforeUnmount(() => {
+        window.removeEventListener("resize", onWindowResize);
+      });
+      vue.watch(windowWidth, (newWidth, oldWidth) => {
+        if (newWidth != oldWidth) {
+          getSrc();
+        }
+      });
+    }
+    const isBooted = vue.shallowRef(false);
+    {
+      const stop = vue.watch(aspectRatio, (val) => {
+        if (val) {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              isBooted.value = true;
+            });
+          });
+          stop();
+        }
+      });
+    }
+    const isLoaded = vue.computed(() => {
+      return state.value === "loaded";
+    });
+    const responsiveProps = vue.computed(
+      () => helpers.filterComponentProps(EvResponsive_vue_vue_type_script_setup_true_lang._sfc_main, props2)
+    );
+    const imgProps = vue.computed(() => ({
+      src: normalisedSrc.value.src,
+      srcset: normalisedSrc.value.srcset,
+      alt: props2.alt,
+      crossorigin: props2.crossorigin,
+      referrerpolicy: props2.referrerpolicy,
+      draggable: props2.draggable,
+      sizes: props2.sizes
+    }));
+    return (_ctx, _cache) => {
+      const _directive_intersect = vue.resolveDirective("intersect");
+      return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(EvResponsive_vue_vue_type_script_setup_true_lang._sfc_main), vue.mergeProps({
+        class: [
+          "ev-img",
+          {
+            "is-booting": !isBooted.value
+          },
+          props2.class
+        ],
+        style: [
+          {
+            width: vue.unref(units.toWebUnit)(
+              props2.width === "auto" ? naturalWidth.value : props2.width
+            )
+          },
+          props2.style
+        ]
+      }, responsiveProps.value, {
+        "aria-label": props2.alt,
+        "aspect-ratio": aspectRatio.value,
+        role: props2.alt ? "img" : void 0
+      }), {
+        additional: vue.withCtx(() => [
+          normalisedSrc.value.src && state.value !== "idle" ? (vue.openBlock(), vue.createBlock(vue.unref(EvTransition.EvTransition), {
+            key: 0,
+            transition: vue.unref(transition),
+            appear: ""
+          }, {
+            default: vue.withCtx(() => [
+              vue.unref(slots).sources ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("picture", _hoisted_1, [
+                vue.renderSlot(_ctx.$slots, "sources"),
+                vue.createElementVNode("img", vue.mergeProps({
+                  ref_key: "image",
+                  ref: image,
+                  class: ["ev-img--img", objectFitClasses.value],
+                  style: { objectPosition: props2.position }
+                }, imgProps.value, {
+                  onLoad,
+                  onError
+                }), null, 16)
+              ], 512)), [
+                [vue.vShow, isLoaded.value]
+              ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
+                key: 1,
+                ref_key: "image",
+                ref: image,
+                class: ["ev-img--img", objectFitClasses.value],
+                style: { objectPosition: props2.position }
+              }, imgProps.value, {
+                onLoad,
+                onError
+              }), null, 16)), [
+                [vue.vShow, isLoaded.value]
+              ])
+            ]),
+            _: 3
+          }, 8, ["transition"])) : vue.createCommentVNode("", true),
+          vue.createVNode(vue.unref(EvTransition.EvTransition), { transition: vue.unref(transition) }, {
+            default: vue.withCtx(() => [
+              normalisedSrc.value.lazySrc && state.value !== "loaded" ? (vue.openBlock(), vue.createElementBlock("img", {
+                key: 0,
+                class: vue.normalizeClass([
+                  "ev-img--img",
+                  "ev-img--preload",
+                  objectFitClasses.value
+                ]),
+                style: vue.normalizeStyle({ objectPosition: props2.position }),
+                src: normalisedSrc.value.lazySrc,
+                alt: props2.alt,
+                crossorigin: props2.crossorigin,
+                referrerpolicy: props2.referrerpolicy,
+                draggable: props2.draggable
+              }, null, 14, _hoisted_2)) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["transition"]),
+          props2.gradient ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "ev-img--gradient",
+            style: vue.normalizeStyle({
+              backgroundImage: `linear-gradient(${props2.gradient})`
+            })
+          }, null, 4)) : vue.createCommentVNode("", true),
+          vue.unref(slots).placeholder ? (vue.openBlock(), vue.createBlock(vue.unref(EvTransition.EvTransition), {
+            key: 2,
+            transition: vue.unref(transition),
+            appear: ""
+          }, {
+            default: vue.withCtx(() => [
+              state.value === "loading" || state.value === "error" && !vue.unref(slots).error ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                vue.renderSlot(_ctx.$slots, "placeholder")
+              ])) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["transition"])) : vue.createCommentVNode("", true),
+          vue.unref(slots).error ? (vue.openBlock(), vue.createBlock(vue.unref(EvTransition.EvTransition), {
+            key: 3,
+            transition: vue.unref(transition),
+            appear: ""
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_4, [
+                vue.renderSlot(_ctx.$slots, "error")
+              ])
+            ]),
+            _: 3
+          }, 8, ["transition"])) : vue.createCommentVNode("", true)
+        ]),
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class", "style", "aria-label", "aspect-ratio", "role"])), [
+        [
+          _directive_intersect,
+          {
+            handler: init,
+            options: props2.options
+          },
+          void 0,
+          { once: true }
+        ]
+      ]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.makeEvImgProps = makeEvImgProps;
+//# sourceMappingURL=EvImg.vue_vue_type_script_setup_true_lang-BUUYLyoS.cjs.map

package/dist/cjs/EvImg.vue_vue_type_script_setup_true_lang-BUUYLyoS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvImg.vue_vue_type_script_setup_true_lang-BUUYLyoS.cjs","sources":["../../src/components/EvImg/EvImg.ts","../../src/components/EvImg/EvImg.vue"],"sourcesContent":["import { propsFactory } from \"@/util\";\nimport { makeComponentProps } from \"@/composables/component.ts\";\nimport { makeEvResponsiveProps } from \"@/components/EvResponsive/EvResponsive.ts\";\nimport { makeEvTransitionProps } from \"@/components/EvTransition\";\nimport { PropType } from \"vue\";\n\nexport const makeEvImgProps = propsFactory(\n    {\n        alt: String,\n        cover: Boolean,\n        crossorigin: String as PropType<\"\" | \"anonymous\" | \"use-credentials\">,\n        draggable: {\n            type: [Boolean, String] as PropType<boolean | \"true\" | \"false\">,\n            default: undefined,\n        },\n        eager: Boolean,\n        gradient: String,\n        lazySrc: String,\n        options: {\n            type: Object as PropType<IntersectionObserverInit>,\n            // For more information on types, navigate to:\n            // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n            default: () => ({\n                root: undefined,\n                rootMargin: undefined,\n                threshold: undefined,\n            }),\n        },\n        position: String,\n        referrerpolicy: String as PropType<\n            | \"no-referrer\"\n            | \"no-referrer-when-downgrade\"\n            | \"origin\"\n            | \"origin-when-cross-origin\"\n            | \"same-origin\"\n            | \"strict-origin\"\n            | \"strict-origin-when-cross-origin\"\n            | \"unsafe-url\"\n        >,\n        sizes: String,\n        src: {\n            type: [String, Object] as PropType<string | EvImgSrcObject>,\n            default: \"\",\n        },\n        srcset: String,\n\n        ...makeEvResponsiveProps(),\n        ...makeComponentProps(),\n        ...makeEvTransitionProps(),\n    },\n    \"EvImg\",\n);\n\nexport interface EvImgSrcObject {\n    src?: string;\n    srcset?: string;\n    lazySrc?: string;\n    aspect?: string | number;\n}\n\nexport type EvImgSlots = {\n    default: never;\n    placeholder: never;\n    error: never;\n    sources: never;\n};\n","<script setup lang=\"ts\">\r\n/**\r\n * `<ev-img>`\r\n */\r\nimport \"./EvImg.scss\";\r\nimport { makeEvImgProps, EvImgSrcObject } from \"./EvImg.ts\";\r\nimport { EvResponsive } from \"@/components/EvResponsive\";\r\nimport { EvTransition, useEvTransition } from \"@/components/EvTransition\";\r\nimport {\r\n    computed,\r\n    ComputedRef,\r\n    nextTick,\r\n    onBeforeMount,\r\n    onBeforeUnmount,\r\n    onMounted,\r\n    ref,\r\n    shallowRef,\r\n    watch,\r\n} from \"vue\";\r\nimport { Browser, filterComponentProps, isObject, toWebUnit } from \"@/util\";\r\n\r\nconst props = defineProps({\r\n    ...makeEvImgProps(),\r\n});\r\nconst slots = defineSlots<{\r\n    default(): never;\r\n    error(): never;\r\n    placeholder(): never;\r\n    sources(): never;\r\n}>();\r\nconst emit = defineEmits([\"loadstart\", \"load\", \"error\"]);\r\n\r\nconst currentSrc = shallowRef(\"\");\r\nconst image = ref<HTMLImageElement>();\r\nconst state = shallowRef<\"idle\" | \"loading\" | \"loaded\" | \"error\">(\r\n    props.eager ? \"loading\" : \"idle\",\r\n);\r\nconst naturalWidth = shallowRef<number>();\r\nconst naturalHeight = shallowRef<number>();\r\nconst transition = useEvTransition(props);\r\n\r\nconst normalisedSrc: ComputedRef<EvImgSrcObject> = computed(() => {\r\n    const imgSrc = props as EvImgSrcObject | { src: EvImgSrcObject };\r\n\r\n    return isObject(imgSrc.src)\r\n        ? {\r\n              src: imgSrc.src.src,\r\n              srcset: props.srcset || imgSrc.src.srcset,\r\n              lazySrc: props.lazySrc || imgSrc.src.lazySrc,\r\n              aspect: props.aspectRatio || imgSrc.src.aspect || 0,\r\n          }\r\n        : {\r\n              src: props.src,\r\n              srcset: props.srcset,\r\n              lazySrc: props.lazySrc,\r\n              aspect: props.aspectRatio || 0,\r\n          };\r\n});\r\n\r\nconst aspectRatio = computed(() => {\r\n    return (\r\n        normalisedSrc.value.aspect ||\r\n        naturalWidth.value! / naturalHeight.value! ||\r\n        0\r\n    );\r\n});\r\n\r\nconst objectFitClasses = computed(() => {\r\n    return {\r\n        \"is-object-cover\": props.cover,\r\n        \"is-object-contain\": !props.cover,\r\n    };\r\n});\r\n\r\n/**\r\n * ## getSrc\r\n */\r\nfunction getSrc() {\r\n    const img = image.value;\r\n    if (img) {\r\n        currentSrc.value = img.currentSrc || img.src;\r\n    }\r\n}\r\n\r\n/**\r\n * ## init\r\n *\r\n * @param isIntersecting\r\n */\r\nfunction init(isIntersecting?: boolean) {\r\n    if (props.eager && isIntersecting) {\r\n        return;\r\n    }\r\n    if (Browser.supportsIntersection && !isIntersecting && !props.eager) {\r\n        return;\r\n    }\r\n    state.value = \"loading\";\r\n\r\n    if (normalisedSrc.value.lazySrc) {\r\n        const lazyImg = new Image();\r\n        lazyImg.src = normalisedSrc.value.lazySrc;\r\n        pollForSize(lazyImg, null);\r\n    }\r\n\r\n    if (!normalisedSrc.value.src) {\r\n        return;\r\n    }\r\n\r\n    nextTick(() => {\r\n        emit(\"loadstart\", image.value?.currentSrc || normalisedSrc.value.src);\r\n        setTimeout(() => {\r\n            if (image.value?.complete) {\r\n                if (!image.value.naturalWidth) {\r\n                    onError();\r\n                }\r\n                if (state.value === \"error\") {\r\n                    return;\r\n                }\r\n                if (!aspectRatio.value) {\r\n                    pollForSize(image.value, null);\r\n                }\r\n                if (state.value === \"loading\") {\r\n                    onLoad();\r\n                }\r\n            } else {\r\n                if (!aspectRatio.value) {\r\n                    pollForSize(image.value!);\r\n                }\r\n                getSrc();\r\n            }\r\n        });\r\n    });\r\n}\r\n\r\n/**\r\n * ## onError\r\n */\r\nfunction onError() {\r\n    state.value = \"error\";\r\n    emit(\"error\", image.value?.currentSrc || normalisedSrc.value.src);\r\n}\r\n\r\n/**\r\n * ## onLoad\r\n */\r\nfunction onLoad() {\r\n    getSrc();\r\n    pollForSize(image.value!);\r\n    state.value = \"loaded\";\r\n    emit(\"load\", image.value?.currentSrc || normalisedSrc.value.src);\r\n}\r\n\r\nlet timer = -1;\r\nfunction pollForSize(img: HTMLImageElement, timeout: number | null = 100) {\r\n    const poll = () => {\r\n        clearTimeout(timer);\r\n        if (!img) {\r\n            return;\r\n        }\r\n        if (!img?.complete && state.value === \"loading\" && timeout != null) {\r\n            timer = window.setTimeout(poll, timeout);\r\n            return;\r\n        }\r\n        const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img;\r\n        if (imgHeight || imgWidth) {\r\n            naturalWidth.value = imgWidth;\r\n            naturalHeight.value = imgHeight;\r\n        } else if (\r\n            img.currentSrc.endsWith(\".svg\") ||\r\n            img.currentSrc.startsWith(\"data:image/svg+xml\")\r\n        ) {\r\n            naturalWidth.value = 1;\r\n            naturalHeight.value = 1;\r\n        }\r\n    };\r\n    poll();\r\n}\r\n\r\nwatch(\r\n    () => props.src,\r\n    () => {\r\n        if (state.value !== \"idle\") {\r\n            state.value = \"idle\";\r\n            nextTick(() => {\r\n                init(true);\r\n            });\r\n        }\r\n    },\r\n);\r\n\r\nwatch(aspectRatio, (val, oldVal) => {\r\n    if (!val && oldVal && image.value) {\r\n        pollForSize(image.value);\r\n    }\r\n});\r\n\r\nonBeforeMount(() => init());\r\n\r\nif (Browser.hasWindow) {\r\n    const windowWidth = ref(window.innerWidth);\r\n    const onWindowResize = () => {\r\n        windowWidth.value = window.innerWidth;\r\n    };\r\n    onMounted(() => {\r\n        window.addEventListener(\"resize\", onWindowResize);\r\n        onWindowResize();\r\n    });\r\n\r\n    onBeforeUnmount(() => {\r\n        window.removeEventListener(\"resize\", onWindowResize);\r\n    });\r\n\r\n    watch(windowWidth, (newWidth, oldWidth) => {\r\n        if (newWidth != oldWidth) {\r\n            getSrc();\r\n        }\r\n    });\r\n}\r\n\r\nconst isBooted = shallowRef(false);\r\n{\r\n    const stop = watch(aspectRatio, (val) => {\r\n        if (val) {\r\n            // Doesn't work with nextTick, idk why\r\n            requestAnimationFrame(() => {\r\n                requestAnimationFrame(() => {\r\n                    isBooted.value = true;\r\n                });\r\n            });\r\n            stop();\r\n        }\r\n    });\r\n}\r\n\r\nconst isLoaded = computed(() => {\r\n    return state.value === \"loaded\";\r\n});\r\n\r\nconst responsiveProps = computed(() =>\r\n    filterComponentProps(EvResponsive, props),\r\n);\r\n\r\nconst imgProps = computed(() => ({\r\n    src: normalisedSrc.value.src,\r\n    srcset: normalisedSrc.value.srcset,\r\n    alt: props.alt,\r\n    crossorigin: props.crossorigin,\r\n    referrerpolicy: props.referrerpolicy,\r\n    draggable: props.draggable,\r\n    sizes: props.sizes,\r\n}));\r\n</script>\r\n\r\n<template>\r\n    <ev-responsive\r\n        v-intersect.once=\"{\r\n            handler: init,\r\n            options: props.options,\r\n        }\"\r\n        :class=\"[\r\n            'ev-img',\r\n            {\r\n                'is-booting': !isBooted,\r\n            },\r\n            props.class,\r\n        ]\"\r\n        :style=\"[\r\n            {\r\n                width: toWebUnit(\r\n                    props.width === 'auto' ? naturalWidth : props.width,\r\n                ),\r\n            },\r\n            props.style,\r\n        ]\"\r\n        v-bind=\"responsiveProps\"\r\n        :aria-label=\"props.alt\"\r\n        :aspect-ratio=\"aspectRatio\"\r\n        :role=\"props.alt ? 'img' : undefined\">\r\n        <template #additional>\r\n            <ev-transition\r\n                v-if=\"normalisedSrc.src && state !== 'idle'\"\r\n                :transition=\"transition\"\r\n                appear>\r\n                <picture\r\n                    v-if=\"slots.sources\"\r\n                    v-show=\"isLoaded\"\r\n                    class=\"ev-img--picture\">\r\n                    <slot name=\"sources\" />\r\n                    <img\r\n                        ref=\"image\"\r\n                        :class=\"['ev-img--img', objectFitClasses]\"\r\n                        :style=\"{ objectPosition: props.position }\"\r\n                        v-bind=\"imgProps\"\r\n                        @load=\"onLoad\"\r\n                        @error=\"onError\" />\r\n                </picture>\r\n                <img\r\n                    v-else\r\n                    v-show=\"isLoaded\"\r\n                    ref=\"image\"\r\n                    :class=\"['ev-img--img', objectFitClasses]\"\r\n                    :style=\"{ objectPosition: props.position }\"\r\n                    v-bind=\"imgProps\"\r\n                    @load=\"onLoad\"\r\n                    @error=\"onError\" />\r\n            </ev-transition>\r\n\r\n            <ev-transition :transition=\"transition\">\r\n                <img\r\n                    v-if=\"normalisedSrc.lazySrc && state !== 'loaded'\"\r\n                    :class=\"[\r\n                        'ev-img--img',\r\n                        'ev-img--preload',\r\n                        objectFitClasses,\r\n                    ]\"\r\n                    :style=\"{ objectPosition: props.position }\"\r\n                    :src=\"normalisedSrc.lazySrc\"\r\n                    :alt=\"props.alt\"\r\n                    :crossorigin=\"props.crossorigin\"\r\n                    :referrerpolicy=\"props.referrerpolicy\"\r\n                    :draggable=\"props.draggable\" />\r\n            </ev-transition>\r\n\r\n            <div\r\n                v-if=\"props.gradient\"\r\n                class=\"ev-img--gradient\"\r\n                :style=\"{\r\n                    backgroundImage: `linear-gradient(${props.gradient})`,\r\n                }\"></div>\r\n\r\n            <ev-transition\r\n                v-if=\"slots.placeholder\"\r\n                :transition=\"transition\"\r\n                appear>\r\n                <div\r\n                    v-if=\"\r\n                        state === 'loading' ||\r\n                        (state === 'error' && !slots.error)\r\n                    \"\r\n                    class=\"ev-img--placeholder\">\r\n                    <slot name=\"placeholder\" />\r\n                </div>\r\n            </ev-transition>\r\n\r\n            <ev-transition v-if=\"slots.error\" :transition=\"transition\" appear>\r\n                <div class=\"ev-img--error\">\r\n                    <slot name=\"error\" />\r\n                </div>\r\n            </ev-transition>\r\n        </template>\r\n        <template #default>\r\n            <slot name=\"default\" />\r\n        </template>\r\n    </ev-responsive>\r\n</template>\r\n"],"names":["propsFactory","makeEvResponsiveProps","makeComponentProps","makeEvTransitionProps","_useSlots","shallowRef","ref","props","useEvTransition","computed","isObject","Browser","nextTick","_a","watch","onBeforeMount","onMounted","onBeforeUnmount","filterComponentProps","EvResponsive"],"mappings":"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"}

package/dist/cjs/EvKbd.cjs

@@ -1,7 +1,7 @@
 "use strict";
-/*! Evance UI v1.0.1 | MIT License */
+/*! Evance UI v1.0.2 | MIT License */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EvKbd_vue_vue_type_script_setup_true_lang = require("./EvKbd.vue_vue_type_script_setup_true_lang-CxPr7C8d.cjs");
+const EvKbd_vue_vue_type_script_setup_true_lang = require("./EvKbd.vue_vue_type_script_setup_true_lang-BFNATXX2.cjs");
 exports.EvKbd = EvKbd_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.makeEvKbdProps = EvKbd_vue_vue_type_script_setup_true_lang.makeEvKbdProps;
 //# sourceMappingURL=EvKbd.cjs.map

package/dist/cjs/EvKbd.vue_vue_type_script_setup_true_lang-BFNATXX2.cjs

@@ -0,0 +1,41 @@
+"use strict";
+/*! Evance UI v1.0.2 | MIT License */
+const vue = require("vue");
+const props = require("./props-vH_8_4_9.cjs");
+const component = require("./component-B8YXIj1A.cjs");
+const appearance = require("./appearance-CPAMTWgu.cjs");
+const modifiers = require("./modifiers-CNRhMVDD.cjs");
+const makeEvKbdProps = props.propsFactory(
+  {
+    value: String,
+    size: String,
+    ...component.makeComponentProps()
+  },
+  "EvKbd"
+);
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvKbd",
+  props: {
+    ...makeEvKbdProps()
+  },
+  setup(__props) {
+    const props2 = __props;
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("kbd", {
+        class: vue.normalizeClass([
+          "ev-kbd",
+          props2.class,
+          vue.unref(modifiers.sizeModifier)(props2.size, [vue.unref(appearance.InputSize).default])
+        ]),
+        style: vue.normalizeStyle(props2.style)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          vue.createTextVNode(vue.toDisplayString(props2.value), 1)
+        ])
+      ], 6);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.makeEvKbdProps = makeEvKbdProps;
+//# sourceMappingURL=EvKbd.vue_vue_type_script_setup_true_lang-BFNATXX2.cjs.map

package/dist/cjs/EvKbd.vue_vue_type_script_setup_true_lang-BFNATXX2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvKbd.vue_vue_type_script_setup_true_lang-BFNATXX2.cjs","sources":["../../src/components/EvKbd/EvKbd.ts"],"sourcesContent":["import { InputSizeProp, propsFactory } from \"@/util\";\nimport { makeComponentProps } from \"@/composables/component.ts\";\nimport { PropType } from \"vue\";\n\nexport const makeEvKbdProps = propsFactory(\n    {\n        value: String,\n        size: String as PropType<InputSizeProp>,\n\n        ...makeComponentProps(),\n    },\n    \"EvKbd\",\n);\n"],"names":["propsFactory","makeComponentProps"],"mappings":";;;;;;;AAIO,MAAM,iBAAiBA,MAAA;AAAA,EAC1B;AAAA,IACI,OAAO;AAAA,IACP,MAAM;AAAA,IAEN,GAAGC,6BAAmB;AAAA,EAC1B;AAAA,EACA;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/EvLabel.cjs

@@ -1,7 +1,8 @@
 "use strict";
-/*! Evance UI v1.0.1 | MIT License */
+/*! Evance UI v1.0.2 | MIT License */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EvLabel_vue_vue_type_script_setup_true_lang = require("./EvLabel.vue_vue_type_script_setup_true_lang-BZ-aMwju.cjs");
+const EvLabel_vue_vue_type_script_setup_true_lang = require("./EvLabel.vue_vue_type_script_setup_true_lang-hRerJGRe.cjs");
 exports.EvLabel = EvLabel_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.makeEvLabelProps = EvLabel_vue_vue_type_script_setup_true_lang.makeEvLabelProps;
+exports.makeLabelProps = EvLabel_vue_vue_type_script_setup_true_lang.makeLabelProps;
 //# sourceMappingURL=EvLabel.cjs.map

package/dist/cjs/EvLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EvLabel.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"EvLabel.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/cjs/EvLabel.vue_vue_type_script_setup_true_lang-hRerJGRe.cjs

@@ -0,0 +1,60 @@
+"use strict";
+/*! Evance UI v1.0.2 | MIT License */
+const vue = require("vue");
+const props = require("./props-vH_8_4_9.cjs");
+const component = require("./component-B8YXIj1A.cjs");
+const makeLabelProps = props.propsFactory(
+  {
+    label: String,
+    hint: String
+  },
+  "Label"
+);
+const makeEvLabelProps = props.propsFactory(
+  {
+    title: String,
+    hint: String,
+    clickable: Boolean,
+    ...component.makeComponentProps()
+  },
+  "EvLabel"
+);
+const _hoisted_1 = {
+  key: 0,
+  class: "ev-label--title"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "ev-label--hint"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvLabel",
+  props: {
+    ...makeEvLabelProps()
+  },
+  setup(__props) {
+    const props2 = __props;
+    vue.useSlots();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("label", {
+        class: vue.normalizeClass([
+          "ev-label",
+          {
+            "is-clickable": props2.clickable
+          },
+          props2.class
+        ]),
+        style: vue.normalizeStyle(props2.style)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          props2.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(props2.title), 1)) : vue.createCommentVNode("", true),
+          props2.hint ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(props2.hint), 1)) : vue.createCommentVNode("", true)
+        ])
+      ], 6);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.makeEvLabelProps = makeEvLabelProps;
+exports.makeLabelProps = makeLabelProps;
+//# sourceMappingURL=EvLabel.vue_vue_type_script_setup_true_lang-hRerJGRe.cjs.map

package/dist/cjs/EvLabel.vue_vue_type_script_setup_true_lang-hRerJGRe.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvLabel.vue_vue_type_script_setup_true_lang-hRerJGRe.cjs","sources":["../../src/components/EvLabel/EvLabel.ts","../../src/components/EvLabel/EvLabel.vue"],"sourcesContent":["import { propsFactory } from \"@/util\";\nimport { makeComponentProps } from \"@/composables/component.ts\";\n\nexport const makeLabelProps = propsFactory(\n    {\n        label: String,\n        hint: String,\n    },\n    \"Label\",\n);\n\nexport const makeEvLabelProps = propsFactory(\n    {\n        title: String,\n        hint: String,\n        clickable: Boolean,\n\n        ...makeComponentProps(),\n    },\n    \"EvLabel\",\n);\n","<script setup lang=\"ts\">\n/**\n * # `<ev-label>`\n */\nimport \"./EvLabel.scss\";\nimport { makeEvLabelProps } from \"./EvLabel.ts\";\n\nconst props = defineProps({\n    ...makeEvLabelProps(),\n});\n\nconst slots = defineSlots<{\n    default(): never;\n}>();\n</script>\n\n<template>\n    <label\n        :class=\"[\n            'ev-label',\n            {\n                'is-clickable': props.clickable,\n            },\n            props.class,\n        ]\"\n        :style=\"props.style\">\n        <slot name=\"default\">\n            <div v-if=\"props.title\" class=\"ev-label--title\">\n                {{ props.title }}\n            </div>\n            <div v-if=\"props.hint\" class=\"ev-label--hint\">\n                {{ props.hint }}\n            </div>\n        </slot>\n    </label>\n</template>\n"],"names":["propsFactory","makeComponentProps","_useSlots"],"mappings":";;;;;AAGO,MAAM,iBAAiBA,MAAA;AAAA,EAC1B;AAAA,IACI,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA;AACJ;AAEO,MAAM,mBAAmBA,MAAA;AAAA,EAC5B;AAAA,IACI,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IAEX,GAAGC,6BAAmB;AAAA,EAC1B;AAAA,EACA;AACJ;;;;;;;;;;;;;;;;ACTcC;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/EvLayout.cjs

@@ -1,7 +1,7 @@
 "use strict";
-/*! Evance UI v1.0.1 | MIT License */
+/*! Evance UI v1.0.2 | MIT License */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EvLayout_vue_vue_type_script_setup_true_lang = require("./EvLayout.vue_vue_type_script_setup_true_lang-DU06N43s.cjs");
+const EvLayout_vue_vue_type_script_setup_true_lang = require("./EvLayout.vue_vue_type_script_setup_true_lang-Br90Jq63.cjs");
 exports.EvLayout = EvLayout_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.makeEvLayoutProps = EvLayout_vue_vue_type_script_setup_true_lang.makeEvLayoutProps;
 //# sourceMappingURL=EvLayout.cjs.map

package/dist/cjs/EvLayout.vue_vue_type_script_setup_true_lang-Br90Jq63.cjs

@@ -0,0 +1,86 @@
+"use strict";
+/*! Evance UI v1.0.2 | MIT License */
+const vue = require("vue");
+const props = require("./props-vH_8_4_9.cjs");
+const component = require("./component-B8YXIj1A.cjs");
+const tag = require("./tag-DeOxLlrk.cjs");
+const display = require("./display-CDjf-uLs.cjs");
+const isFunctions = require("./is-functions-Bf6pQOyz.cjs");
+const makeEvLayoutProps = props.propsFactory(
+  {
+    align: [String, Object],
+    alignContent: [String, Object],
+    column: Boolean,
+    gutter: [String, Number, Object],
+    justify: [String, Object],
+    nowrap: Boolean,
+    hidden: [Boolean, String, Array],
+    height: [String, Number, Object],
+    width: [String, Number, Object],
+    ...component.makeComponentProps(),
+    ...tag.makeTagProps()
+  },
+  "EvLayout"
+);
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvLayout",
+  props: {
+    ...makeEvLayoutProps()
+  },
+  setup(__props) {
+    const props2 = __props;
+    const alignItemsClasses = display.useBreakpointClasses(props2, "align", "align");
+    const alignContentClasses = display.useBreakpointClasses(
+      props2,
+      "alignContent",
+      "align-content"
+    );
+    const justifyContentClasses = display.useBreakpointClasses(props2, "justify", "justify");
+    const gutterClasses = display.useBreakpointClasses(props2, "gutter", "gutter");
+    const hiddenClasses = display.useDisplayRuleClasses(props2, "hidden", "hidden");
+    const hiddenAttribute = vue.computed(() => {
+      return isFunctions.isBoolean(props2.hidden) && props2.hidden;
+    });
+    const heightStyles = vue.computed(() => {
+      const value = display.calculateDisplayRuleValue(props2.height);
+      if (isFunctions.isEmpty(value)) {
+        return void 0;
+      }
+      return { height: value };
+    });
+    const widthStyles = vue.computed(() => {
+      const value = display.calculateDisplayRuleValue(props2.width);
+      if (isFunctions.isEmpty(value)) {
+        return void 0;
+      }
+      return value === "grow" ? { flex: "1 0 auto", maxWidth: "100%", width: "100%" } : { flex: `0 0 ${value}`, maxWidth: value, width: value };
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props2.tag), {
+        class: vue.normalizeClass([
+          "ev-layout",
+          {
+            "is-column": props2.column,
+            "is-nowrap": props2.nowrap
+          },
+          ...vue.unref(alignItemsClasses),
+          ...vue.unref(alignContentClasses),
+          ...vue.unref(justifyContentClasses),
+          ...vue.unref(gutterClasses),
+          ...vue.unref(hiddenClasses),
+          props2.class
+        ]),
+        style: vue.normalizeStyle([props2.style, widthStyles.value, heightStyles.value]),
+        hidden: hiddenAttribute.value
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "style", "hidden"]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.makeEvLayoutProps = makeEvLayoutProps;
+//# sourceMappingURL=EvLayout.vue_vue_type_script_setup_true_lang-Br90Jq63.cjs.map

package/dist/cjs/EvLayout.vue_vue_type_script_setup_true_lang-Br90Jq63.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvLayout.vue_vue_type_script_setup_true_lang-Br90Jq63.cjs","sources":["../../src/components/EvGrid/EvLayout/EvLayout.ts","../../src/components/EvGrid/EvLayout/EvLayout.vue"],"sourcesContent":["import { propsFactory } from \"@/util\";\nimport { makeComponentProps } from \"@/composables/component.ts\";\nimport { makeTagProps } from \"@/composables/tag.ts\";\nimport {\n    DisplayBreakpoint,\n    DisplayRuleProp,\n    VisibilityRuleProp,\n} from \"@/composables/display.ts\";\nimport { PropType } from \"vue\";\n\n/** Align Items **/\nexport type AlignItemsValue =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"baseline\"\n    | \"stretch\";\nexport type AlignItemsObject = {\n    [key in DisplayBreakpoint]: AlignItemsValue;\n};\nexport type AlignItemsProp = AlignItemsValue | AlignItemsObject | undefined;\n\n/** Align Content **/\nexport type AlignContentValue =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"stretch\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\nexport type AlignContentObject = {\n    [key in DisplayBreakpoint]: AlignContentValue;\n};\nexport type AlignContentProp =\n    | AlignContentValue\n    | AlignContentObject\n    | undefined;\n\n/** Justify Content **/\nexport type JustifyContentValue =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\nexport type JustifyContentObject = {\n    [key in DisplayBreakpoint]: JustifyContentValue;\n};\nexport type JustifyContentProp =\n    | JustifyContentValue\n    | JustifyContentObject\n    | undefined;\n\n/** Spacers **/\nexport type SpacerValue = number | string | undefined;\nexport type SpacerObject = {\n    [key in DisplayBreakpoint]: SpacerValue;\n};\nexport type SpacerProp = SpacerValue | SpacerObject | undefined;\n\n/**\n * # makeEvLayoutProps\n */\nexport const makeEvLayoutProps = propsFactory(\n    {\n        align: [String, Object] as PropType<AlignItemsProp>,\n        alignContent: [String, Object] as PropType<AlignContentProp>,\n        column: Boolean,\n        gutter: [String, Number, Object] as PropType<SpacerProp>,\n        justify: [String, Object] as PropType<JustifyContentProp>,\n        nowrap: Boolean,\n        hidden: [Boolean, String, Array] as PropType<VisibilityRuleProp>,\n        height: [String, Number, Object] as PropType<DisplayRuleProp>,\n        width: [String, Number, Object] as PropType<DisplayRuleProp>,\n\n        ...makeComponentProps(),\n        ...makeTagProps(),\n    },\n    \"EvLayout\",\n);\n","<script setup lang=\"ts\">\nimport \"./EvLayout.scss\";\nimport { makeEvLayoutProps } from \"./EvLayout.ts\";\nimport {\n    calculateDisplayRuleValue,\n    useBreakpointClasses,\n    useDisplayRuleClasses,\n} from \"@/composables/display.ts\";\nimport { computed } from \"vue\";\nimport { isBoolean, isEmpty } from \"@/util\";\n\nconst props = defineProps({\n    ...makeEvLayoutProps(),\n});\n\nconst alignItemsClasses = useBreakpointClasses(props, \"align\", \"align\");\nconst alignContentClasses = useBreakpointClasses(\n    props,\n    \"alignContent\",\n    \"align-content\",\n);\nconst justifyContentClasses = useBreakpointClasses(props, \"justify\", \"justify\");\nconst gutterClasses = useBreakpointClasses(props, \"gutter\", \"gutter\");\n\n/**\n * Hidden\n */\nconst hiddenClasses = useDisplayRuleClasses(props, \"hidden\", \"hidden\");\nconst hiddenAttribute = computed(() => {\n    return isBoolean(props.hidden) && props.hidden;\n});\n\n/**\n * Height\n */\nconst heightStyles = computed(() => {\n    const value = calculateDisplayRuleValue(props.height);\n    if (isEmpty(value)) {\n        return undefined;\n    }\n    return { height: value };\n});\n\n/**\n * Width\n */\nconst widthStyles = computed(() => {\n    const value = calculateDisplayRuleValue(props.width);\n    if (isEmpty(value)) {\n        return undefined;\n    }\n    return value === \"grow\"\n        ? { flex: \"1 0 auto\", maxWidth: \"100%\", width: \"100%\" }\n        : { flex: `0 0 ${value}`, maxWidth: value, width: value };\n});\n</script>\n\n<template>\n    <component\n        :is=\"props.tag\"\n        :class=\"[\n            'ev-layout',\n            {\n                'is-column': props.column,\n                'is-nowrap': props.nowrap,\n            },\n            ...alignItemsClasses,\n            ...alignContentClasses,\n            ...justifyContentClasses,\n            ...gutterClasses,\n            ...hiddenClasses,\n            props.class,\n        ]\"\n        :style=\"[props.style, widthStyles, heightStyles]\"\n        :hidden=\"hiddenAttribute\">\n        <slot />\n    </component>\n</template>\n"],"names":["propsFactory","makeComponentProps","makeTagProps","useBreakpointClasses","props","useDisplayRuleClasses","computed","isBoolean","calculateDisplayRuleValue","isEmpty"],"mappings":";;;;;;;;AAiEO,MAAM,oBAAoBA,MAAA;AAAA,EAC7B;AAAA,IACI,OAAO,CAAC,QAAQ,MAAM;AAAA,IACtB,cAAc,CAAC,QAAQ,MAAM;AAAA,IAC7B,QAAQ;AAAA,IACR,QAAQ,CAAC,QAAQ,QAAQ,MAAM;AAAA,IAC/B,SAAS,CAAC,QAAQ,MAAM;AAAA,IACxB,QAAQ;AAAA,IACR,QAAQ,CAAC,SAAS,QAAQ,KAAK;AAAA,IAC/B,QAAQ,CAAC,QAAQ,QAAQ,MAAM;AAAA,IAC/B,OAAO,CAAC,QAAQ,QAAQ,MAAM;AAAA,IAE9B,GAAGC,6BAAmB;AAAA,IACtB,GAAGC,iBAAa;AAAA,EACpB;AAAA,EACA;AACJ;;;;;;;;AClEA,UAAM,oBAAoBC,QAAA,qBAAqBC,QAAO,SAAS,OAAO;AACtE,UAAM,sBAAsBD,QAAA;AAAA,MACxBC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAEJ,UAAM,wBAAwBD,QAAA,qBAAqBC,QAAO,WAAW,SAAS;AAC9E,UAAM,gBAAgBD,QAAA,qBAAqBC,QAAO,UAAU,QAAQ;AAKpE,UAAM,gBAAgBC,QAAA,sBAAsBD,QAAO,UAAU,QAAQ;AAC/D,UAAA,kBAAkBE,IAAAA,SAAS,MAAM;AACnC,aAAOC,YAAU,UAAAH,OAAM,MAAM,KAAKA,OAAM;AAAA,IAAA,CAC3C;AAKK,UAAA,eAAeE,IAAAA,SAAS,MAAM;AAC1B,YAAA,QAAQE,QAAAA,0BAA0BJ,OAAM,MAAM;AAChD,UAAAK,YAAAA,QAAQ,KAAK,GAAG;AACT,eAAA;AAAA,MACX;AACO,aAAA,EAAE,QAAQ;IAAM,CAC1B;AAKK,UAAA,cAAcH,IAAAA,SAAS,MAAM;AACzB,YAAA,QAAQE,QAAAA,0BAA0BJ,OAAM,KAAK;AAC/C,UAAAK,YAAAA,QAAQ,KAAK,GAAG;AACT,eAAA;AAAA,MACX;AACA,aAAO,UAAU,SACX,EAAE,MAAM,YAAY,UAAU,QAAQ,OAAO,OAAA,IAC7C,EAAE,MAAM,OAAO,KAAK,IAAI,UAAU,OAAO,OAAO;IAAM,CAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}