@indielayer/ui 1.18.1 → 2.0.0

package/lib/components/toggle/theme/Toggle.base.theme.js

@@ -1,29 +1,24 @@
-const i = {
-  classes: {
-    wrapper: "",
-    label: ({ props: t }) => {
-      const e = "font-medium text-secondary-800 dark:text-secondary-200";
-      return t.size === "xs" ? e + " text-xs" : t.size === "sm" ? e + " text-sm" : t.size === "lg" ? e + " text-lg" : t.size === "xl" ? e + " text-xl" : e + " text-sm";
-    },
-    buttonWrapper: ({ props: t }) => {
-      let e = "relative shrink-0";
-      return t.size === "sm" || t.size === "xs" ? e += " w-6" : t.size === "lg" ? e += " w-10" : t.size === "xl" ? e += " w-12" : e += " w-8", e;
-    },
-    button: ({ props: t }) => {
-      let e = "rounded-full shadow transform transition duration-150 shrink-0";
-      return t.size === "sm" || t.size === "xs" ? e += " h-3 w-3" : t.size === "lg" ? e += " h-5 w-5" : t.size === "xl" ? e += " h-6 w-6" : e += " h-4 w-4", e;
-    }
-  },
-  styles: ({ colors: t, props: e, css: l }) => {
-    const s = t.getPalette(e.color);
-    return l.variables({
-      bg: s[500],
-      dark: {
-        bg: s[600]
-      }
-    });
-  }
-}, r = i;
-export {
-  r as default
+//#region src/components/toggle/theme/Toggle.base.theme.ts
+var e = {
+	classes: {
+		wrapper: "",
+		label: ({ props: e }) => e.size === "xs" ? "font-medium text-secondary-800 dark:text-secondary-200 text-xs" : e.size === "sm" ? "font-medium text-secondary-800 dark:text-secondary-200 text-sm" : e.size === "lg" ? "font-medium text-secondary-800 dark:text-secondary-200 text-lg" : e.size === "xl" ? "font-medium text-secondary-800 dark:text-secondary-200 text-xl" : "font-medium text-secondary-800 dark:text-secondary-200 text-sm",
+		buttonWrapper: ({ props: e }) => {
+			let t = "relative shrink-0";
+			return e.size === "sm" || e.size === "xs" ? t += " w-6" : e.size === "lg" ? t += " w-10" : e.size === "xl" ? t += " w-12" : t += " w-8", t;
+		},
+		button: ({ props: e }) => {
+			let t = "rounded-full shadow transform transition duration-150 shrink-0";
+			return e.size === "sm" || e.size === "xs" ? t += " h-3 w-3" : e.size === "lg" ? t += " h-5 w-5" : e.size === "xl" ? t += " h-6 w-6" : t += " h-4 w-4", t;
+		}
+	},
+	styles: ({ colors: e, props: t, css: n }) => {
+		let r = e.getPalette(t.color);
+		return n.variables({
+			bg: r[500],
+			dark: { bg: r[600] }
+		});
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/toggle/theme/Toggle.carbon.theme.js

@@ -1,5 +1,5 @@
 import e from "./Toggle.base.theme.js";
-const t = e, o = t;
-export {
-  o as default
-};
+//#region src/components/toggle/theme/Toggle.carbon.theme.ts
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/tooltip/ToggleTip.js

@@ -0,0 +1,5 @@
+import e from "./ToggleTip.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tooltip/ToggleTip.vue
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/tooltip/ToggleTip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import e from "../icon/Icon.js";
+import "../../common/icons.js";
+import t from "./Tooltip.js";
+import { computed as n, createBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, openBlock as s, withCtx as c } from "vue";
+//#region src/components/tooltip/ToggleTip.vue?vue&type=script&setup=true&lang.ts
+var l = ["innerHTML"], u = /* @__PURE__ */ o({
+	name: "XToggleTip",
+	props: {
+		content: String,
+		icon: String
+	},
+	setup(o) {
+		let u = o, d = n(() => u.icon || "<path d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />");
+		return (n, o) => (s(), r(t, { position: "right" }, {
+			tooltip: c(() => [i("div", { innerHTML: n.content }, null, 8, l)]),
+			default: c(() => [a(e, {
+				icon: d.value,
+				class: "text-secondary-500 dark:text-secondary-300 cursor-pointer"
+			}, null, 8, ["icon"])]),
+			_: 1
+		}));
+	}
+});
+//#endregion
+export { u as default };

package/lib/components/tooltip/Tooltip.js

@@ -0,0 +1,5 @@
+import e from "./Tooltip.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tooltip/Tooltip.vue
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/tooltip/Tooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,105 @@
+import { useTheme as e } from "../../composables/useTheme.js";
+import { Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useSlots as y, withCtx as b } from "vue";
+//#region src/components/tooltip/Tooltip.vue?vue&type=script&setup=true&lang.ts
+var x = /* @__PURE__ */ u({
+	name: "XTooltip",
+	props: {
+		tag: {
+			type: String,
+			default: "div"
+		},
+		tooltip: String,
+		disabled: Boolean,
+		position: {
+			type: String,
+			default: "bottom"
+		}
+	},
+	setup(u) {
+		let x = u, S = m(null), C = m(null), w = m(!1), T = m({}), E = m(x.position), D = y(), O = r(() => x.tooltip || D.tooltip), k = r(() => x.disabled || !O.value), A = r(() => k.value ? "" : {
+			top: "-bottom-2.5 w-3.5",
+			bottom: "-top-2.5 w-3.5",
+			left: "-right-2.5 h-3.5",
+			right: "-left-2.5 h-3.5"
+		}[E.value]), j = r(() => k.value ? "" : {
+			top: "-rotate-45 origin-top-left",
+			bottom: "rotate-45 origin-bottom-left",
+			left: "rotate-45 origin-top-left",
+			right: "-rotate-45 origin-top-right"
+		}[E.value]), M = r(() => k.value ? "" : {
+			top: "origin-bottom",
+			bottom: "origin-top",
+			left: "origin-right",
+			right: "origin-left"
+		}[E.value]), N = () => {
+			if (!S.value || !C.value) return;
+			let e = S.value.getBoundingClientRect(), t = C.value.getBoundingClientRect(), n = window.innerWidth, r = window.innerHeight, i = x.position, a = 0, o = 0;
+			switch (i) {
+				case "top":
+					a = e.top - t.height - 8, o = e.left + e.width / 2 - t.width / 2, a < 0 && (i = "bottom", a = e.bottom + 8);
+					break;
+				case "bottom":
+					a = e.bottom + 8, o = e.left + e.width / 2 - t.width / 2, a + t.height > r && (i = "top", a = e.top - t.height - 8);
+					break;
+				case "left":
+					a = e.top + e.height / 2 - t.height / 2, o = e.left - t.width - 8, o < 0 && (i = "right", o = e.right + 8);
+					break;
+				case "right":
+					a = e.top + e.height / 2 - t.height / 2, o = e.right + 8, o + t.width > n && (i = "left", o = e.left - t.width - 8);
+					break;
+			}
+			(i === "top" || i === "bottom") && (o < 0 && (o = 8), o + t.width > n && (o = n - t.width - 8)), (i === "left" || i === "right") && (a < 0 && (a = 8), a + t.height > r && (a = r - t.height - 8));
+			let s = {};
+			i === "top" || i === "bottom" ? s.left = `${e.left + e.width / 2 - o}px` : (i === "left" || i === "right") && (s.top = `${e.top + e.height / 2 - a}px`), E.value = i, T.value = {
+				top: `${a}px`,
+				left: `${o}px`,
+				"--arrow-offset-x": s.left || "0px",
+				"--arrow-offset-y": s.top || "0px"
+			};
+		}, P = () => {
+			k.value || (w.value = !0, setTimeout(N, 0));
+		}, F = () => {
+			k.value || (w.value = !1);
+		}, { classes: I, className: L } = e("Tooltip", {}, x);
+		return (e, r) => (p(), i(g(e.tag), {
+			ref_key: "triggerRef",
+			ref: S,
+			class: d([v(L), { "inline-block": !e.$attrs.class }]),
+			onMouseenter: P,
+			onMouseleave: F
+		}, {
+			default: b(() => [h(e.$slots, "default"), k.value ? a("", !0) : (p(), i(t, {
+				key: 0,
+				to: "body"
+			}, [l(n, {
+				"enter-active-class": "transition-opacity duration-150 ease-out",
+				"leave-active-class": "transition-opacity duration-150 ease-in",
+				"enter-from-class": "opacity-0",
+				"enter-to-class": "opacity-100",
+				"leave-from-class": "opacity-100",
+				"leave-to-class": "opacity-0"
+			}, {
+				default: b(() => [w.value ? (p(), o("div", {
+					key: 0,
+					ref_key: "tooltipRef",
+					ref: C,
+					style: f(T.value),
+					class: d(["fixed z-[10001] pointer-events-none", [v(I).tooltip, M.value]])
+				}, [h(e.$slots, "tooltip", {}, () => [c(_(e.tooltip), 1)]), s("div", {
+					class: d(["absolute overflow-hidden shadow-lg z-10", A.value]),
+					style: f(E.value === "top" || E.value === "bottom" ? {
+						left: "var(--arrow-offset-x)",
+						transform: "translateX(-50%)"
+					} : {
+						top: "var(--arrow-offset-y)",
+						transform: "translateY(-50%)"
+					})
+				}, [s("div", { class: d(["h-2.5 w-2.5 bg-secondary-700 transform border border-secondary-800", j.value]) }, null, 2)], 6)], 6)) : a("", !0)]),
+				_: 3
+			})]))]),
+			_: 3
+		}, 40, ["class"]));
+	}
+});
+//#endregion
+export { x as default };

package/lib/components/tooltip/theme/Tooltip.base.theme.js

@@ -1,8 +1,4 @@
-const e = {
-  classes: {
-    tooltip: "bg-secondary-700 shadow-lg rounded-md border border-secondary-800 p-2 text-white text-xs w-max max-w-sm"
-  }
-}, s = e;
-export {
-  s as default
-};
+//#region src/components/tooltip/theme/Tooltip.base.theme.ts
+var e = { classes: { tooltip: "bg-secondary-700 shadow-lg rounded-md border border-secondary-800 p-2 text-white text-xs w-max max-w-sm" } };
+//#endregion
+export { e as default };

package/lib/components/tooltip/theme/Tooltip.carbon.theme.js

@@ -1,5 +1,5 @@
 import e from "./Tooltip.base.theme.js";
-const t = e, o = t;
-export {
-  o as default
-};
+//#region src/components/tooltip/theme/Tooltip.carbon.theme.ts
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/upload/Upload.js

@@ -0,0 +1,5 @@
+import e from "./Upload.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/upload/Upload.vue
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/upload/Upload.vue.d.ts

@@ -7,7 +7,7 @@ declare const validators: {
 declare const uploadProps: {
     placeholder: StringConstructor;
     accept: StringConstructor;
-    multiple: BooleanConstructor;
+    multiple: import("vue").Prop<boolean | undefined>;
     maxFiles: (StringConstructor | NumberConstructor)[];
     maxFileSize: (StringConstructor | NumberConstructor)[];
     variant: {
@@ -20,7 +20,7 @@ declare const uploadProps: {
         type: PropType<"POST" | "PUT">;
         default: string;
     };
-    withCredentials: BooleanConstructor;
+    withCredentials: import("vue").Prop<boolean | undefined>;
     fileFormDataName: {
         type: StringConstructor;
         default: string;
@@ -70,7 +70,7 @@ export interface UploadTheme extends ThemeComponent<UploadProps, InternalClasses
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     placeholder: StringConstructor;
     accept: StringConstructor;
-    multiple: BooleanConstructor;
+    multiple: import("vue").Prop<boolean | undefined>;
     maxFiles: (StringConstructor | NumberConstructor)[];
     maxFileSize: (StringConstructor | NumberConstructor)[];
     variant: {
@@ -83,7 +83,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: PropType<"POST" | "PUT">;
         default: string;
     };
-    withCredentials: BooleanConstructor;
+    withCredentials: import("vue").Prop<boolean | undefined>;
     fileFormDataName: {
         type: StringConstructor;
         default: string;
@@ -126,7 +126,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     placeholder: StringConstructor;
     accept: StringConstructor;
-    multiple: BooleanConstructor;
+    multiple: import("vue").Prop<boolean | undefined>;
     maxFiles: (StringConstructor | NumberConstructor)[];
     maxFileSize: (StringConstructor | NumberConstructor)[];
     variant: {
@@ -139,7 +139,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: PropType<"POST" | "PUT">;
         default: string;
     };
-    withCredentials: BooleanConstructor;
+    withCredentials: import("vue").Prop<boolean | undefined>;
     fileFormDataName: {
         type: StringConstructor;
         default: string;
@@ -187,16 +187,30 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     rules: unknown[];
     skipFormRegistry: boolean;
     variant: "box";
-    multiple: boolean;
     method: "POST" | "PUT";
-    withCredentials: boolean;
     fileFormDataName: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     box?(_: {
         isOver: boolean;
     }): any;
     files?(_: {
-        files: (string | number | boolean | object | any[] | undefined) & UploadFile[];
+        files: (string | number | boolean | object | any[] | undefined) & {
+            file: {
+                readonly lastModified: number;
+                readonly name: string;
+                readonly webkitRelativePath: string;
+                readonly size: number;
+                readonly type: string;
+                arrayBuffer: () => Promise<ArrayBuffer>;
+                slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob;
+                stream: () => ReadableStream<Uint8Array>;
+                text: () => Promise<string>;
+            };
+            completed: boolean;
+            response?: any;
+            progress: number;
+            error: string;
+        }[];
     }): any;
     removeIcon?(_: {}): any;
 }>;

package/lib/components/upload/Upload.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,261 @@
+import { useTheme as e } from "../../composables/useTheme.js";
+import { optionalBooleanProp as t } from "../../common/props.js";
+import { useCommon as n } from "../../composables/useCommon.js";
+import r from "../icon/Icon.js";
+import { closeIcon as i, fileIcon as a, uploadIcon as o } from "../../common/icons.js";
+import { useInteractive as s } from "../../composables/useInteractive.js";
+import { useInputtable as c } from "../../composables/useInputtable.js";
+import l from "../inputFooter/InputFooter.js";
+import { useDropZone as u } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import ee from "../label/Label.js";
+import te from "../progress/Progress.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, mergeProps as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as S, openBlock as C, ref as w, renderList as T, renderSlot as E, toDisplayString as D, toHandlers as ne, unref as O, watch as re, withCtx as ie } from "vue";
+//#region src/components/upload/Upload.vue?vue&type=script&setup=true&lang.ts
+var ae = [
+	"id",
+	"disabled",
+	"name",
+	"accept",
+	"multiple",
+	"readonly"
+], oe = { class: "text-secondary-500 dark:text-secondary-400" }, se = { class: "flex items-center" }, k = ["src"], A = { class: "truncate flex-1 pr-2" }, j = { class: "font-medium truncate" }, M = { class: "text-xs text-secondary-500" }, N = ["onClick"], P = /* @__PURE__ */ v({
+	name: "XUpload",
+	validators: {
+		...n.validators(),
+		variant: ["box"]
+	},
+	props: {
+		...s.props(),
+		...c.props(),
+		placeholder: String,
+		accept: String,
+		multiple: t(),
+		maxFiles: [Number, String],
+		maxFileSize: [Number, String],
+		variant: {
+			type: String,
+			default: "box"
+		},
+		action: String,
+		headers: Object,
+		method: {
+			type: String,
+			default: "POST"
+		},
+		withCredentials: t(),
+		fileFormDataName: {
+			type: String,
+			default: "file"
+		}
+	},
+	emits: [
+		...c.emits(),
+		"upload",
+		"remove"
+	],
+	setup(t, { expose: n, emit: v }) {
+		let P = t, F = v, I = w(null), L = f(() => !!P.action), R = w([]);
+		re(R, (e) => {
+			F("update:modelValue", e);
+		}, {
+			deep: !0,
+			immediate: !0
+		});
+		let { focus: z, blur: B } = s(I);
+		function V(e) {
+			if (!e) return !1;
+			if (!P.multiple && e.length > 1 || P.maxFiles && e.length > Number(P.maxFiles)) return Y.value = "Too many files", !1;
+			if (P.maxFileSize) {
+				for (let t = 0; t < e.length; t++) if (e[t].size > Number(P.maxFileSize)) return Y.value = "File size is too large", !1;
+			}
+			if (P.accept) {
+				let t = P.accept.split(",").map((e) => e.trim());
+				for (let n = 0; n < e.length; n++) {
+					let r = e[n];
+					if (!t.some((e) => r.type === e || r.name.endsWith(e))) return Y.value = "Invalid file type", !1;
+				}
+			}
+			return !0;
+		}
+		function H(e) {
+			let t = e.target.files;
+			V(t) && F("change", e);
+		}
+		function U(e) {
+			let t = e.target.files;
+			V(t) && (K(t), P.validateOnInput && !Z.value && Q(R.value), F("input", e));
+		}
+		let W = w(null);
+		function ce(e) {
+			V(e) && K(e);
+		}
+		let { isOverDropZone: G } = u(W, {
+			onDrop: ce,
+			multiple: P.multiple,
+			preventDefaultForUnhandled: !1
+		});
+		function K(e) {
+			R.value = e ? Array.from(e).map((e) => ({
+				file: e,
+				completed: !L.value,
+				progress: L.value ? 0 : 100,
+				error: ""
+			})) : [], L.value && pe();
+		}
+		function le(e) {
+			let t = R.value.findIndex((t) => t.file === e);
+			t !== -1 && (F("remove", R.value[t]), R.value.splice(t, 1));
+		}
+		function q(e) {
+			return e.type.startsWith("image") || [
+				"jpg",
+				"jpeg",
+				"png",
+				"gif",
+				"webp",
+				"svg"
+			].some((t) => e.name.endsWith(t));
+		}
+		let J = [];
+		function ue(e) {
+			let t = URL.createObjectURL(e);
+			return J.push(t), t;
+		}
+		S(() => {
+			J.forEach((e) => URL.revokeObjectURL(e));
+		});
+		function de(e) {
+			return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : e < 1024 * 1024 * 1024 ? `${(e / 1024 / 1024).toFixed(2)} MB` : `${(e / 1024 / 1024 / 1024).toFixed(2)} GB`;
+		}
+		async function fe(e) {
+			return new Promise((t, n) => {
+				if (!P.action) n(/* @__PURE__ */ Error("No action provided"));
+				else {
+					let r = new XMLHttpRequest(), i = new FormData();
+					i.append(P.fileFormDataName, e.file), r.open(P.method, P.action, !0), P.headers && typeof P.headers == "object" && Object.keys(P.headers).forEach((e) => {
+						r.setRequestHeader(e, P.headers[e]);
+					}), r.upload.addEventListener("progress", (t) => {
+						t.lengthComputable && (e.progress = t.loaded / t.total * 100);
+					}), r.addEventListener("load", () => {
+						if (r.status >= 200 && r.status < 300) {
+							e.completed = !0;
+							try {
+								e.response = JSON.parse(r.responseText);
+							} catch {
+								e.response = r.responseText;
+							}
+							t(r.responseText);
+						} else {
+							let t = `Upload failed. Status: ${r.status}`;
+							e.error = t, n(Error(t));
+						}
+					}), r.addEventListener("error", () => {
+						e.error = "An error occurred during the upload.", n(/* @__PURE__ */ Error("An error occurred during the upload."));
+					}), r.send(i);
+				}
+			});
+		}
+		async function pe() {
+			if (!P.action && !R.value) return;
+			let e = [];
+			for (let t = 0; t < R.value.length; t++) e.push(fe(R.value[t]));
+			await Promise.all(e), Q(R.value);
+		}
+		function me() {
+			Y.value = "", Z.value = !0, R.value = [], I.value && (I.value.value = "");
+		}
+		let { errorInternal: Y, hideFooterInternal: he, isInsideForm: ge, isInsideInputGroup: X, inputListeners: _e, isFirstValidation: Z, validate: Q, setError: ve } = c(P, {
+			focus: z,
+			emit: F
+		}), { styles: ye, classes: $, className: be } = e("Upload", {}, P);
+		return n({
+			focus: z,
+			blur: B,
+			reset: me,
+			validate: Q,
+			setError: ve
+		}), (e, t) => (C(), h("div", { class: b([O(be), O($).wrapper]) }, [_(ee, {
+			style: x(O(ye)),
+			disabled: e.disabled,
+			required: e.required,
+			"is-inside-form": O(ge),
+			"is-inside-input-group": O(X),
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: ie(() => [
+				g("input", y({
+					id: e.id,
+					ref_key: "elRef",
+					ref: I,
+					type: "file",
+					class: ["sr-only", O($).input],
+					disabled: e.disabled,
+					name: e.name,
+					accept: e.accept,
+					multiple: e.multiple,
+					readonly: e.readonly
+				}, ne({
+					...O(_e),
+					input: U,
+					change: H
+				}, !0)), null, 16, ae),
+				E(e.$slots, "box", { isOver: O(G) }, () => [g("div", {
+					ref_key: "dropZoneRef",
+					ref: W,
+					class: b(["border border-dashed rounded-md flex items-center justify-center gap-2 p-4 cursor-pointer transition-colors duration-500 hover:border-primary-500 dark:hover:border-primary-400", { "border-primary-500 dark:border-primary-400": O(G) }])
+				}, [
+					_(r, { icon: O(o) }, null, 8, ["icon"]),
+					g("span", oe, D(e.placeholder), 1),
+					t[0] ||= g("span", { class: "text-xs text-secondary-400 dark:text-secondary-500" }, "or drag and drop", -1)
+				], 2)]),
+				O(he) ? m("", !0) : (C(), p(l, {
+					key: 0,
+					error: O(Y),
+					helper: e.helper
+				}, null, 8, ["error", "helper"]))
+			]),
+			_: 3
+		}, 8, [
+			"style",
+			"disabled",
+			"required",
+			"is-inside-form",
+			"is-inside-input-group",
+			"label",
+			"tooltip"
+		]), E(e.$slots, "files", { files: R.value }, () => [(C(!0), h(d, null, T(R.value, (t, n) => (C(), h("div", {
+			key: n,
+			class: "border rounded-md p-2 bg-secondary-100 my-2"
+		}, [
+			g("div", se, [
+				g("div", { class: b(["rounded-md w-9 h-9 flex items-center justify-center mr-2 border", { "p-2 bg-white": !q(t.file) }]) }, [q(t.file) ? (C(), h("img", {
+					key: 0,
+					src: ue(t.file),
+					class: "w-full h-full object-cover rounded-md"
+				}, null, 8, k)) : (C(), p(r, {
+					key: 1,
+					icon: O(a)
+				}, null, 8, ["icon"]))], 2),
+				g("div", A, [g("div", j, D(t.file.name), 1), g("div", M, D(de(t.file.size)), 1)]),
+				g("button", {
+					type: "button",
+					class: "shrink-0",
+					onClick: (e) => le(t.file)
+				}, [E(e.$slots, "removeIcon", {}, () => [_(r, { icon: O(i) }, null, 8, ["icon"])])], 8, N)
+			]),
+			L.value ? (C(), p(te, {
+				key: 0,
+				percentage: t.progress,
+				class: "mt-1",
+				color: t.error ? "warning" : "success"
+			}, null, 8, ["percentage", "color"])) : m("", !0),
+			t.error ? (C(), p(l, {
+				key: 1,
+				error: t.error
+			}, null, 8, ["error"])) : m("", !0)
+		]))), 128))])], 2));
+	}
+});
+//#endregion
+export { P as default };

package/lib/components/upload/theme/Upload.base.theme.js

@@ -1,8 +1,4 @@
-const e = {
-  classes: {
-    wrapper: ""
-  }
-}, s = e;
-export {
-  s as default
-};
+//#region src/components/upload/theme/Upload.base.theme.ts
+var e = { classes: { wrapper: "" } };
+//#endregion
+export { e as default };

package/lib/components/upload/theme/Upload.carbon.theme.js

@@ -1,5 +1,5 @@
 import e from "./Upload.base.theme.js";
-const t = e, o = t;
-export {
-  o as default
-};
+//#region src/components/upload/theme/Upload.carbon.theme.ts
+var t = e;
+//#endregion
+export { t as default };

package/lib/composables/index.d.ts

@@ -1,4 +1,5 @@
 export * from './keys';
+export * from './resolveComponentDefaults';
 export * from './useCommon';
 export * from './useColors';
 export * from './useCSS';

package/lib/composables/keys.d.ts

@@ -5,6 +5,7 @@ import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue'
 import type { NotificationInjection } from '../components/notifications/Notifications.vue';
 import type { IconInjection } from '../components/icon/Icon.vue';
 import type { FormGroupInjection } from '../components/formGroup';
+import type { InputGroupInjection } from '../components/inputGroup';
 import type { AccordionInjection } from '../components/accordion';
 import type { UIOptions } from '../create';
 import type { UITheme } from '../theme';
@@ -13,6 +14,7 @@ export declare const injectThemeKey: InjectionKey<MaybeRef<UITheme>>;
 export declare const injectTabGroupKey: InjectionKey<TabGroupInjection>;
 export declare const injectFormKey: InjectionKey<FormInjection>;
 export declare const injectFormGroupKey: InjectionKey<FormGroupInjection>;
+export declare const injectInputGroupKey: InjectionKey<InputGroupInjection>;
 export declare const injectIconsKey: InjectionKey<IconInjection>;
 export declare const injectButtonGroupKey: InjectionKey<ButtonGroupInjection>;
 export declare const injectNotificationKey: InjectionKey<NotificationInjection>;

package/lib/composables/keys.js

@@ -1,12 +1,4 @@
-const o = Symbol(), t = Symbol(), n = Symbol(), c = Symbol(), e = Symbol(), y = Symbol(), i = Symbol(), m = Symbol(), s = Symbol();
-export {
-  s as injectAccordionKey,
-  i as injectButtonGroupKey,
-  e as injectFormGroupKey,
-  c as injectFormKey,
-  y as injectIconsKey,
-  m as injectNotificationKey,
-  o as injectOptionsKey,
-  n as injectTabGroupKey,
-  t as injectThemeKey
-};
+//#region src/composables/keys.ts
+var e = Symbol(), t = Symbol(), n = Symbol(), r = Symbol(), i = Symbol(), a = Symbol(), o = Symbol(), s = Symbol(), c = Symbol(), l = Symbol();
+//#endregion
+export { l as injectAccordionKey, s as injectButtonGroupKey, i as injectFormGroupKey, r as injectFormKey, o as injectIconsKey, a as injectInputGroupKey, c as injectNotificationKey, e as injectOptionsKey, n as injectTabGroupKey, t as injectThemeKey };

package/lib/composables/resolveComponentDefaults.d.ts

@@ -0,0 +1,4 @@
+import { type ComputedRef, type MaybeRef } from 'vue';
+import type { ComponentThemes } from '../theme';
+export declare function resolvePropsWithDefaults<P extends object>(props: P, configured?: Partial<P>): P;
+export declare function useResolvedComponentProps<P extends object>(namespace: keyof ComponentThemes, props: MaybeRef<P>): ComputedRef<P>;