@indielayer/ui 1.18.1 → 2.1.0

package/lib/virtual/core/useVirtualizer.js

@@ -1,171 +1,146 @@
-import { computed as t, isRef as w, ref as b, watch as N } from "vue";
-import { useResizeObserver as q, useEventListener as A } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { parseNumericStyleValue as $ } from "../utils/parseNumericStyleValue.js";
-import { adjustScrollOffsetForRtl as V } from "../utils/adjustScrollOffsetForRtl.js";
-import { shallowCompare as j } from "../utils/shallowCompare.js";
-import { getEstimatedSize as G } from "./getEstimatedSize.js";
-import { getOffsetForIndex as J } from "./getOffsetForIndex.js";
-import { getStartStopIndices as B } from "./getStartStopIndices.js";
-import { useCachedBounds as K } from "./useCachedBounds.js";
-import { useItemSize as Q } from "./useItemSize.js";
-function ie({
-  containerElement: u,
-  containerStyle: n,
-  defaultContainerSize: d = 0,
-  direction: i,
-  isRtl: p = !1,
-  itemCount: g,
-  itemProps: x,
-  itemSize: I,
-  onResize: T,
-  overscanCount: z
-}) {
-  const l = t(() => w(g) ? g.value : g), D = t(() => w(x) ? x.value : x), H = t(() => w(I) ? I.value : I), C = t(() => $(n == null ? void 0 : n.height)), M = t(() => $(n == null ? void 0 : n.width)), f = b({
-    height: i === "vertical" ? d : void 0,
-    width: i === "horizontal" ? d : void 0
-  }), R = t(
-    () => i === "vertical" && C.value !== void 0 || i === "horizontal" && M.value !== void 0
-  );
-  q(
-    u,
-    (e) => {
-      if (!R.value)
-        for (const s of e) {
-          const { contentRect: a } = s, o = f.value;
-          if (o.height === a.height && o.width === a.width)
-            return;
-          f.value = {
-            height: a.height,
-            width: a.width
-          };
-        }
-    }
-  );
-  const O = t(() => ({
-    height: C.value ?? f.value.height,
-    width: M.value ?? f.value.width
-  })), L = b({
-    height: 0,
-    width: 0
-  });
-  N(
-    O,
-    (e) => {
-      if (typeof T == "function") {
-        const s = L.value, a = e.height ?? 0, o = e.width ?? 0;
-        (s.height !== a || s.width !== o) && (T({ height: a, width: o }, { ...s }), L.value = { height: a, width: o });
-      }
-    },
-    { immediate: !0 }
-  );
-  const h = t(
-    () => i === "vertical" ? O.value.height ?? d : O.value.width ?? d
-  ), S = t(
-    () => Q({ containerSize: h.value, itemSize: H.value })
-  ), r = t(
-    () => K({
-      itemCount: l.value,
-      itemProps: D.value,
-      itemSize: S.value
-    }).value
-  ), W = (e) => r.value.get(e), v = b(
-    B({
-      cachedBounds: r.value,
-      containerScrollOffset: 0,
-      containerSize: h.value,
-      itemCount: l.value,
-      overscanCount: z
-    })
-  ), m = t(() => {
-    const e = v.value;
-    return {
-      startIndexVisible: Math.min(l.value - 1, e.startIndexVisible),
-      startIndexOverscan: Math.min(l.value - 1, e.startIndexOverscan),
-      stopIndexVisible: Math.min(l.value - 1, e.stopIndexVisible),
-      stopIndexOverscan: Math.min(l.value - 1, e.stopIndexOverscan)
-    };
-  }), k = t(
-    () => G({
-      cachedBounds: r.value,
-      itemCount: l.value,
-      itemSize: S.value
-    })
-  ), E = (e) => {
-    const s = V({
-      containerElement: u.value,
-      direction: i,
-      isRtl: p,
-      scrollOffset: e
-    });
-    return B({
-      cachedBounds: r.value,
-      containerScrollOffset: s,
-      containerSize: h.value,
-      itemCount: l.value,
-      overscanCount: z
-    });
-  };
-  return N(
-    [u, () => i, () => r.value],
-    ([e]) => {
-      const s = (i === "vertical" ? e == null ? void 0 : e.scrollTop : e == null ? void 0 : e.scrollLeft) ?? 0;
-      v.value = E(s);
-    },
-    { immediate: !0 }
-  ), A(u, "scroll", () => {
-    const e = u.value;
-    if (!e)
-      return;
-    const { scrollLeft: s, scrollTop: a } = e, o = V({
-      containerElement: e,
-      direction: i,
-      isRtl: p,
-      scrollOffset: i === "vertical" ? a : s
-    }), c = B({
-      cachedBounds: r.value,
-      containerScrollOffset: o,
-      containerSize: h.value,
-      itemCount: l.value,
-      overscanCount: z
-    });
-    j(c, v.value) || (v.value = c);
-  }), {
-    getCellBounds: W,
-    getEstimatedSize: k,
-    scrollToIndex: ({
-      align: e = "auto",
-      containerScrollOffset: s,
-      index: a
-    }) => {
-      let o = J({
-        align: e,
-        cachedBounds: r.value,
-        containerScrollOffset: s,
-        containerSize: h.value,
-        index: a,
-        itemCount: l.value,
-        itemSize: S.value
-      });
-      const c = u.value;
-      if (c) {
-        if (o = V({
-          containerElement: c,
-          direction: i,
-          isRtl: p,
-          scrollOffset: o
-        }), typeof c.scrollTo != "function") {
-          const F = E(o);
-          j(v.value, F) || (v.value = F);
-        }
-        return o;
-      }
-    },
-    startIndexOverscan: t(() => m.value.startIndexOverscan),
-    startIndexVisible: t(() => m.value.startIndexVisible),
-    stopIndexOverscan: t(() => m.value.stopIndexOverscan),
-    stopIndexVisible: t(() => m.value.stopIndexVisible)
-  };
+import { useEventListener as e, useResizeObserver as t } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { parseNumericStyleValue as n } from "../utils/parseNumericStyleValue.js";
+import { adjustScrollOffsetForRtl as r } from "../utils/adjustScrollOffsetForRtl.js";
+import { shallowCompare as i } from "../utils/shallowCompare.js";
+import { getEstimatedSize as a } from "./getEstimatedSize.js";
+import { getOffsetForIndex as o } from "./getOffsetForIndex.js";
+import { getStartStopIndices as s } from "./getStartStopIndices.js";
+import { useCachedBounds as c } from "./useCachedBounds.js";
+import { useItemSize as l } from "./useItemSize.js";
+import { computed as u, isRef as d, ref as f, watch as p } from "vue";
+//#region src/virtual/core/useVirtualizer.ts
+function m({ containerElement: m, containerStyle: h, defaultContainerSize: g = 0, direction: _, isRtl: v = !1, itemCount: y, itemProps: b, itemSize: x, onResize: S, overscanCount: C }) {
+	let w = u(() => d(y) ? y.value : y), T = u(() => d(b) ? b.value : b), E = u(() => d(x) ? x.value : x), D = u(() => n(h?.height)), O = u(() => n(h?.width)), k = f({
+		height: _ === "vertical" ? g : void 0,
+		width: _ === "horizontal" ? g : void 0
+	}), A = u(() => _ === "vertical" && D.value !== void 0 || _ === "horizontal" && O.value !== void 0);
+	t(m, (e) => {
+		if (!A.value) for (let t of e) {
+			let { contentRect: e } = t, n = k.value;
+			if (n.height === e.height && n.width === e.width) return;
+			k.value = {
+				height: e.height,
+				width: e.width
+			};
+		}
+	});
+	let j = u(() => ({
+		height: D.value ?? k.value.height,
+		width: O.value ?? k.value.width
+	})), M = f({
+		height: 0,
+		width: 0
+	});
+	p(j, (e) => {
+		if (typeof S == "function") {
+			let t = M.value, n = e.height ?? 0, r = e.width ?? 0;
+			(t.height !== n || t.width !== r) && (S({
+				height: n,
+				width: r
+			}, { ...t }), M.value = {
+				height: n,
+				width: r
+			});
+		}
+	}, { immediate: !0 });
+	let N = u(() => _ === "vertical" ? j.value.height ?? g : j.value.width ?? g), P = u(() => l({
+		containerSize: N.value,
+		itemSize: E.value
+	})), F = u(() => c({
+		itemCount: w.value,
+		itemProps: T.value,
+		itemSize: P.value
+	}).value), I = (e) => F.value.get(e), L = f(s({
+		cachedBounds: F.value,
+		containerScrollOffset: 0,
+		containerSize: N.value,
+		itemCount: w.value,
+		overscanCount: C
+	})), R = u(() => {
+		let e = L.value;
+		return {
+			startIndexVisible: Math.min(w.value - 1, e.startIndexVisible),
+			startIndexOverscan: Math.min(w.value - 1, e.startIndexOverscan),
+			stopIndexVisible: Math.min(w.value - 1, e.stopIndexVisible),
+			stopIndexOverscan: Math.min(w.value - 1, e.stopIndexOverscan)
+		};
+	}), z = u(() => a({
+		cachedBounds: F.value,
+		itemCount: w.value,
+		itemSize: P.value
+	})), B = (e) => {
+		let t = r({
+			containerElement: m.value,
+			direction: _,
+			isRtl: v,
+			scrollOffset: e
+		});
+		return s({
+			cachedBounds: F.value,
+			containerScrollOffset: t,
+			containerSize: N.value,
+			itemCount: w.value,
+			overscanCount: C
+		});
+	};
+	return p([
+		m,
+		N,
+		w,
+		() => C,
+		() => F.value
+	], () => {
+		let e = m.value;
+		if (!e) return;
+		let t = B((_ === "vertical" ? e.scrollTop : e.scrollLeft) ?? 0);
+		i(t, L.value) || (L.value = t);
+	}, { immediate: !0 }), e(m, "scroll", () => {
+		let e = m.value;
+		if (!e) return;
+		let { scrollLeft: t, scrollTop: n } = e, a = r({
+			containerElement: e,
+			direction: _,
+			isRtl: v,
+			scrollOffset: _ === "vertical" ? n : t
+		}), o = s({
+			cachedBounds: F.value,
+			containerScrollOffset: a,
+			containerSize: N.value,
+			itemCount: w.value,
+			overscanCount: C
+		});
+		i(o, L.value) || (L.value = o);
+	}), {
+		getCellBounds: I,
+		getEstimatedSize: z,
+		scrollToIndex: ({ align: e = "auto", containerScrollOffset: t, index: n }) => {
+			let a = o({
+				align: e,
+				cachedBounds: F.value,
+				containerScrollOffset: t,
+				containerSize: N.value,
+				index: n,
+				itemCount: w.value,
+				itemSize: P.value
+			}), s = m.value;
+			if (s) {
+				if (a = r({
+					containerElement: s,
+					direction: _,
+					isRtl: v,
+					scrollOffset: a
+				}), typeof s.scrollTo != "function") {
+					let e = B(a);
+					i(L.value, e) || (L.value = e);
+				}
+				return a;
+			}
+		},
+		startIndexOverscan: u(() => R.value.startIndexOverscan),
+		startIndexVisible: u(() => R.value.startIndexVisible),
+		stopIndexOverscan: u(() => R.value.stopIndexOverscan),
+		stopIndexVisible: u(() => R.value.stopIndexVisible)
+	};
 }
-export {
-  ie as useVirtualizer
-};
+//#endregion
+export { m as useVirtualizer };

package/lib/virtual/utils/adjustScrollOffsetForRtl.js

@@ -1,24 +1,16 @@
-import { getRTLOffsetType as f } from "./getRTLOffsetType.js";
-function l({
-  containerElement: t,
-  direction: i,
-  isRtl: r,
-  scrollOffset: e
-}) {
-  if (i === "horizontal" && r)
-    switch (f()) {
-      case "negative":
-        return -e;
-      case "positive-descending": {
-        if (t) {
-          const { clientWidth: o, scrollLeft: s, scrollWidth: c } = t;
-          return c - o - s;
-        }
-        break;
-      }
-    }
-  return e;
+import { getRTLOffsetType as e } from "./getRTLOffsetType.js";
+//#region src/virtual/utils/adjustScrollOffsetForRtl.ts
+function t({ containerElement: t, direction: n, isRtl: r, scrollOffset: i }) {
+	if (n === "horizontal" && r) switch (e()) {
+		case "negative": return -i;
+		case "positive-descending":
+			if (t) {
+				let { clientWidth: e, scrollLeft: n, scrollWidth: r } = t;
+				return r - e - n;
+			}
+			break;
+	}
+	return i;
 }
-export {
-  l as adjustScrollOffsetForRtl
-};
+//#endregion
+export { t as adjustScrollOffsetForRtl };

package/lib/virtual/utils/assert.js

@@ -1,7 +1,6 @@
-function t(o, r = "Assertion error") {
-  if (!o)
-    throw console.error(r), Error(r);
+//#region src/virtual/utils/assert.ts
+function e(e, t = "Assertion error") {
+	if (!e) throw console.error(t), Error(t);
 }
-export {
-  t as assert
-};
+//#endregion
+export { e as assert };

package/lib/virtual/utils/getRTLOffsetType.js

@@ -1,13 +1,13 @@
-let t = null;
-function c(o = !1) {
-  if (t === null || o) {
-    const e = document.createElement("div"), l = e.style;
-    l.width = "50px", l.height = "50px", l.overflow = "scroll", l.direction = "rtl";
-    const n = document.createElement("div"), i = n.style;
-    return i.width = "100px", i.height = "100px", e.appendChild(n), document.body.appendChild(e), e.scrollLeft > 0 ? t = "positive-descending" : (e.scrollLeft = 1, e.scrollLeft === 0 ? t = "negative" : t = "positive-ascending"), document.body.removeChild(e), t;
-  }
-  return t;
+//#region src/virtual/utils/getRTLOffsetType.ts
+var e = null;
+function t(t = !1) {
+	if (e === null || t) {
+		let t = document.createElement("div"), n = t.style;
+		n.width = "50px", n.height = "50px", n.overflow = "scroll", n.direction = "rtl";
+		let r = document.createElement("div"), i = r.style;
+		return i.width = "100px", i.height = "100px", t.appendChild(r), document.body.appendChild(t), t.scrollLeft > 0 ? e = "positive-descending" : (t.scrollLeft = 1, e = t.scrollLeft === 0 ? "negative" : "positive-ascending"), document.body.removeChild(t), e;
+	}
+	return e;
 }
-export {
-  c as getRTLOffsetType
-};
+//#endregion
+export { t as getRTLOffsetType };

package/lib/virtual/utils/getScrollbarSize.js

@@ -1,11 +1,11 @@
-let o = -1;
-function i(d = !1) {
-  if (o === -1 || d) {
-    const e = document.createElement("div"), t = e.style;
-    t.width = "50px", t.height = "50px", t.overflow = "scroll", document.body.appendChild(e), o = e.offsetWidth - e.clientWidth, document.body.removeChild(e);
-  }
-  return o;
+//#region src/virtual/utils/getScrollbarSize.ts
+var e = -1;
+function t(t = !1) {
+	if (e === -1 || t) {
+		let t = document.createElement("div"), n = t.style;
+		n.width = "50px", n.height = "50px", n.overflow = "scroll", document.body.appendChild(t), e = t.offsetWidth - t.clientWidth, document.body.removeChild(t);
+	}
+	return e;
 }
-export {
-  i as getScrollbarSize
-};
+//#endregion
+export { t as getScrollbarSize };

package/lib/virtual/utils/isRtl.js

@@ -1,12 +1,11 @@
-function t(r) {
-  let e = r;
-  for (; e; ) {
-    if (e.dir)
-      return e.dir === "rtl";
-    e = e.parentElement;
-  }
-  return !1;
+//#region src/virtual/utils/isRtl.ts
+function e(e) {
+	let t = e;
+	for (; t;) {
+		if (t.dir) return t.dir === "rtl";
+		t = t.parentElement;
+	}
+	return !1;
 }
-export {
-  t as isRtl
-};
+//#endregion
+export { e as isRtl };

package/lib/virtual/utils/parseNumericStyleValue.js

@@ -1,15 +1,11 @@
-function e(r) {
-  if (r !== void 0)
-    switch (typeof r) {
-      case "number":
-        return r;
-      case "string": {
-        if (r.endsWith("px"))
-          return parseFloat(r);
-        break;
-      }
-    }
+//#region src/virtual/utils/parseNumericStyleValue.ts
+function e(e) {
+	if (e !== void 0) switch (typeof e) {
+		case "number": return e;
+		case "string":
+			if (e.endsWith("px")) return parseFloat(e);
+			break;
+	}
 }
-export {
-  e as parseNumericStyleValue
-};
+//#endregion
+export { e as parseNumericStyleValue };

package/lib/virtual/utils/shallowCompare.js

@@ -1,14 +1,10 @@
-import { assert as n } from "./assert.js";
-function i(e, r) {
-  if (e === r)
-    return !0;
-  if (!!e != !!r || (n(e !== void 0), n(r !== void 0), Object.keys(e).length !== Object.keys(r).length))
-    return !1;
-  for (const t in e)
-    if (!Object.is(r[t], e[t]))
-      return !1;
-  return !0;
+import { assert as e } from "./assert.js";
+//#region src/virtual/utils/shallowCompare.ts
+function t(t, n) {
+	if (t === n) return !0;
+	if (!!t != !!n || (e(t !== void 0), e(n !== void 0), Object.keys(t).length !== Object.keys(n).length)) return !1;
+	for (let e in t) if (!Object.is(n[e], t[e])) return !1;
+	return !0;
 }
-export {
-  i as shallowCompare
-};
+//#endregion
+export { t as shallowCompare };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.18.1",
+  "version": "2.1.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -39,28 +39,28 @@
     "./nuxt": "./exports/nuxt.mjs",
     "./nuxt.plugin": "./exports/nuxt.plugin.js",
     "./nuxt.plugin.js": "./exports/nuxt.plugin.js",
-    "./tailwind.preset": "./exports/tailwind.preset.js",
-    "./tailwind.preset.js": "./exports/tailwind.preset.js"
+    "./tailwind.css": "./exports/tailwind.css"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./exports/tailwind.css"
+  ],
   "peerDependencies": {
-    "tailwindcss": "^3.0.0",
+    "tailwindcss": "^4.0.0",
     "vue": "^3.4.0"
   },
   "devDependencies": {
-    "@indielayer/stylelint-config": "^1.0.0",
     "@rushstack/eslint-patch": "^1.3.2",
-    "@unhead/vue": "^2.0.19",
-    "@tsconfig/node18": "^2.0.1",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tsconfig/node22": "^22.0.5",
     "@types/jsdom": "^21.1.1",
-    "@types/node": "^18.16.18",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@types/node": "^22.12.0",
+    "@unhead/vue": "^2.1.15",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.4.0",
     "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/core": "^11.1.0",
-    "autoprefixer": "^10.4.0",
     "c8": "^7.12.0",
     "clean-css": "^5.3.0",
     "eslint": "^8.43.0",
@@ -69,13 +69,14 @@
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",
-    "shiki": "^3.15.0",
-    "stylelint": "^14.16.1",
-    "tailwindcss": "^3.3.2",
+    "shiki": "^4.1.0",
+    "tailwindcss": "^4.3.0",
+    "tslib": "^2.8.1",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11",
-    "vitest": "^0.32.2",
-    "vue": "^3.5.0",
+    "vite": "^8.0.14",
+    "vite-ssg": "^28.3.0",
+    "vitest": "^4.1.7",
+    "vue": "^3.5.18",
     "vue-router": "^4.2.2",
     "vue-tsc": "^1.8.2"
   },
@@ -99,22 +100,21 @@
   "scripts": {
     "dev": "vite dev --mode docs --open",
     "build": "pnpm generate && vite build",
-    "build:docs": "pnpm build --mode docs",
+    "build:docs": "pnpm generate && vite-ssg build --mode docs",
     "build:prod": "pnpm build && pnpm gen:types",
     "build:watch": "pnpm generate && vite build --watch",
     "build:only": "vite build",
     "build:stats": "VITE_VISUALIZER=Y npm run build",
     "generate": "pnpm gen:version",
-    "gen:types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
+    "gen:types": "rm -rf lib/src lib/docs && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build-types.json",
     "gen:version": "node .scripts/gen-version.cjs",
     "gen:search": "node .scripts/gen-search.cjs",
     "gen:llms": "node .scripts/gen-llms.cjs",
+    "gen:llms-full": "node .scripts/gen-llms-full.cjs",
     "gen:sitemap": "node .scripts/gen-sitemap.cjs",
     "test": "pnpm test:unit",
     "test:ci": "vitest run --environment jsdom",
     "test:unit": "vitest --environment jsdom",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore",
-    "stylelint:fix": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore --fix"
+    "typecheck": "pnpm generate && vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   }
 }

package/src/common/__tests__/inputGroupRadius.spec.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest'
+import { inputGroupRadiusClasses } from '../inputGroupRadius'
+
+describe('inputGroupRadiusClasses', () => {
+  it('returns full radius for only', () => {
+    expect(inputGroupRadiusClasses('only')).toEqual(['rounded-md'])
+  })
+
+  it('returns joined radius for first and last', () => {
+    expect(inputGroupRadiusClasses('first')).toEqual(['rounded-l-md', 'rounded-r-none'])
+    expect(inputGroupRadiusClasses('last')).toEqual(['rounded-r-md', 'rounded-l-none'])
+    expect(inputGroupRadiusClasses('middle')).toEqual(['rounded-none'])
+  })
+})

package/src/common/buttonGroupRadius.ts

@@ -0,0 +1,16 @@
+import type { InputGroupPosition } from './inputGroupRadius'
+
+export type ButtonGroupPosition = InputGroupPosition
+
+export function buttonGroupRadiusClasses(
+  position?: ButtonGroupPosition | null,
+  pill = false,
+) {
+  if (!position) return []
+
+  if (position === 'only') return [pill ? 'rounded-full' : 'rounded-md']
+  if (position === 'first') return [pill ? 'rounded-s-full' : 'rounded-s-md']
+  if (position === 'last') return [pill ? 'rounded-e-full' : 'rounded-e-md']
+
+  return ['rounded-none']
+}

package/src/common/icons.ts

@@ -18,3 +18,4 @@ export const stepperIncompleteIcon = '<svg focusable="false" preserveAspectRatio
 export const chevronDownIcon = '<path d="M19 9l-7 7-7-7" />'
 export const uploadIcon = '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line>'
 export const fileIcon = '<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>'
+export const emptyIcon = '<path d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />'