@placeholderco/placeholder-ui 1.0.3 → 1.0.6

package/dist/form/TimePicker.svelte

@@ -1,267 +1,267 @@
-<script lang="ts">
-	import dayjs from 'dayjs';
-	import Button from '../ui/Button.svelte';
-	import Number from './Number.svelte';
-	import { themeState } from '../theme.svelte.js';
-	import customParseFormat from 'dayjs/plugin/customParseFormat.js';
-
-	interface Props {
-		label?: string;
-		disabled?: boolean;
-		required?: boolean;
-		containerClass?: string;
-		value?: string | undefined;
-		rounded?: boolean;
-		minDate?: string | undefined;
-		maxDate?: string | undefined;
-		selectedDate?: string | undefined;
-		onchange?: (date: string | undefined) => void;
-	}
-
-	let {
-		label,
-		disabled,
-		required,
-		containerClass,
-		value = $bindable(undefined),
-		onchange,
-		rounded,
-		minDate,
-		maxDate,
-		selectedDate
-	}: Props = $props();
-
-	dayjs.extend(customParseFormat);
-	let time: dayjs.Dayjs = $derived(value ? dayjs(value, ['HH:mm:ss', 'HH:mm']) : dayjs());
-
-	let amPm: 'am' | 'pm' = $derived(time.hour() >= 12 ? 'pm' : 'am');
-	let hours: number = $derived(time.hour() % 12 == 0 ? 12 : time.hour() % 12);
-	let minutes: number = $derived(time.minute());
-
-	// Calculate time constraints based on selected date
-	const isMinDateSelected = $derived(selectedDate && minDate && dayjs(selectedDate).isSame(dayjs(minDate), 'day'));
-	const isMaxDateSelected = $derived(selectedDate && maxDate && dayjs(selectedDate).isSame(dayjs(maxDate), 'day'));
-
-	const minHour = $derived.by(() => {
-		if (!isMinDateSelected || !minDate) return 1;
-		const minTime = dayjs(minDate);
-		const minHour24 = minTime.hour();
-		const isPM = amPm === 'pm';
-
-		if (isPM) {
-			// PM: min hour is 12 (noon) or later
-			return minHour24 >= 12 ? (minHour24 === 12 ? 12 : minHour24 - 12) : 1;
-		} else {
-			// AM: min hour is before noon
-			return minHour24 < 12 ? (minHour24 === 0 ? 12 : minHour24) : 12;
-		}
-	});
-
-	const maxHour = $derived.by(() => {
-		if (!isMaxDateSelected || !maxDate) return 12;
-		const maxTime = dayjs(maxDate);
-		const maxHour24 = maxTime.hour();
-		const isPM = amPm === 'pm';
-
-		if (isPM) {
-			// PM: max hour is noon or later
-			return maxHour24 >= 12 ? (maxHour24 === 12 ? 12 : maxHour24 - 12) : 1;
-		} else {
-			// AM: max hour is before noon
-			return maxHour24 < 12 ? (maxHour24 === 0 ? 12 : maxHour24) : 12;
-		}
-	});
-
-	const minMinute = $derived.by(() => {
-		if (!isMinDateSelected || !minDate) return 0;
-		const minTime = dayjs(minDate);
-		const minHour24 = minTime.hour();
-		const currentHour24 = amPm === 'pm' ? (hours === 12 ? 12 : hours + 12) : (hours === 12 ? 0 : hours);
-
-		// Only apply minute constraint if we're on the same hour
-		return minHour24 === currentHour24 ? minTime.minute() : 0;
-	});
-
-	const maxMinute = $derived.by(() => {
-		if (!isMaxDateSelected || !maxDate) return 59;
-		const maxTime = dayjs(maxDate);
-		const maxHour24 = maxTime.hour();
-		const currentHour24 = amPm === 'pm' ? (hours === 12 ? 12 : hours + 12) : (hours === 12 ? 0 : hours);
-
-		// Only apply minute constraint if we're on the same hour
-		return maxHour24 === currentHour24 ? maxTime.minute() : 59;
-	});
-
-	// Check if AM/PM switch should be disabled
-	const isAmPmDisabled = $derived.by(() => {
-		if (disabled) return true;
-
-		// If min date is selected, check if switching to AM would be invalid
-		if (isMinDateSelected && minDate) {
-			const minTime = dayjs(minDate);
-			const minHour24 = minTime.hour();
-
-			// If min time is PM and we're currently on PM, can't switch to AM
-			if (amPm === 'pm' && minHour24 >= 12) {
-				return true;
-			}
-		}
-
-		// If max date is selected, check if switching to PM would be invalid
-		if (isMaxDateSelected && maxDate) {
-			const maxTime = dayjs(maxDate);
-			const maxHour24 = maxTime.hour();
-
-			// If max time is AM and we're currently on AM, can't switch to PM
-			if (amPm === 'am' && maxHour24 < 12) {
-				return true;
-			}
-		}
-
-		return false;
-	});
-
-	let UpdateTime = () => {
-		if (hours && minutes !== undefined) {
-			let hour24 = hours;
-			if (amPm === 'pm' && hours !== 12) {
-				hour24 += 12;
-			} else if (amPm === 'am' && hours === 12) {
-				hour24 = 0;
-			}
-
-			const timeString = `${hour24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
-			onchange?.(timeString);
-			value = timeString;
-			return;
-		}
-		value = dayjs().format('HH:mm');
-	};
-
-	if (value === undefined) {
-		UpdateTime();
-	}
-</script>
-
-<div class="element-container {rounded && 'rounded'} {containerClass}">
-	<div class="time-label">{label}</div>
-	<div class="time-wrapper">
-		<div class="time-container">
-			<Number
-				{disabled}
-				bind:value={hours}
-				min={minHour}
-				max={maxHour}
-				onchange={() => {
-					UpdateTime();
-				}}
-			/>
-			:
-			<Number
-				{disabled}
-				bind:value={minutes}
-				min={minMinute}
-				max={maxMinute}
-				onchange={() => {
-					UpdateTime();
-				}}
-			/>
-		</div>
-		<div class="am-pm-container">
-			<Button
-				disabled={isAmPmDisabled}
-				onclick={() => {
-					amPm = amPm === 'am' ? 'pm' : 'am';
-					UpdateTime();
-				}}
-				variant={themeState.isDarkMode ? 'secondary' : 'primary'}
-			>
-				{amPm.toUpperCase()}
-			</Button>
-		</div>
-	</div>
-</div>
-
-<style>
-	.time-label {
-		margin-bottom: var(--pui-spacing-1);
-	}
-
-	.time-wrapper {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.time-picker-container {
-		border-radius: var(--pui-radius-lg);
-		overflow: hidden;
-	}
-
-	.time-container {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		flex-grow: 1;
-		gap: var(--pui-spacing-1);
-		background-color: var(--pui-color-gray-100);
-		border: 1px solid var(--pui-border-default);
-		border-top-left-radius: var(--pui-radius-md);
-		border-bottom-left-radius: var(--pui-radius-md);
-
-		:global(.number-container) {
-			flex-grow: 1;
-
-			:global(.number-input input) {
-				text-align: center;
-				background-color: var(--pui-color-gray-100);
-			}
-		}
-	}
-
-	.time-container :global(.number) {
-		border-radius: 0;
-		border: none !important;
-	}
-
-	.time-container :global(.number-container:first-child .number:hover) {
-		border-right: 1px solid var(--pui-border-default) !important;
-		background-color: var(--pui-bg-hover) !important;
-	}
-
-	.time-container :global(.number-container:last-child .number:hover) {
-		border-left: 1px solid var(--pui-border-default) !important;
-		background-color: var(--pui-bg-hover) !important;
-	}
-
-	.time-container :global(.number-container:first-child .number) {
-		border-top-left-radius: var(--pui-radius-md);
-		border-bottom-left-radius: var(--pui-radius-md);
-	}
-
-	.am-pm-container :global(.pui-button) {
-		border-radius: 0;
-		border-top-right-radius: var(--pui-radius-md);
-		border-bottom-right-radius: var(--pui-radius-md);
-	}
-
-	:global(.dark) {
-		.time-container {
-			background-color: var(--pui-color-dark-200);
-
-			:global(.number-container) {
-				:global(.number-input input) {
-					background-color: var(--pui-color-dark-200);
-				}
-			}
-		}
-
-		.time-container :global(.number-container:first-child .number:hover) {
-			background-color: var(--pui-bg-hover) !important;
-		}
-
-		.time-container :global(.number-container:last-child .number:hover) {
-			background-color: var(--pui-bg-hover) !important;
-		}
-	}
-</style>
+<script lang="ts">
+	import dayjs from 'dayjs';
+	import Button from '../ui/Button.svelte';
+	import Number from './Number.svelte';
+	import { themeState } from '../theme.svelte.js';
+	import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+
+	interface Props {
+		label?: string;
+		disabled?: boolean;
+		required?: boolean;
+		containerClass?: string;
+		value?: string | undefined;
+		rounded?: boolean;
+		minDate?: string | undefined;
+		maxDate?: string | undefined;
+		selectedDate?: string | undefined;
+		onchange?: (date: string | undefined) => void;
+	}
+
+	let {
+		label,
+		disabled,
+		required,
+		containerClass,
+		value = $bindable(undefined),
+		onchange,
+		rounded,
+		minDate,
+		maxDate,
+		selectedDate
+	}: Props = $props();
+
+	dayjs.extend(customParseFormat);
+	let time: dayjs.Dayjs = $derived(value ? dayjs(value, ['HH:mm:ss', 'HH:mm']) : dayjs());
+
+	let amPm: 'am' | 'pm' = $derived(time.hour() >= 12 ? 'pm' : 'am');
+	let hours: number = $derived(time.hour() % 12 == 0 ? 12 : time.hour() % 12);
+	let minutes: number = $derived(time.minute());
+
+	// Calculate time constraints based on selected date
+	const isMinDateSelected = $derived(selectedDate && minDate && dayjs(selectedDate).isSame(dayjs(minDate), 'day'));
+	const isMaxDateSelected = $derived(selectedDate && maxDate && dayjs(selectedDate).isSame(dayjs(maxDate), 'day'));
+
+	const minHour = $derived.by(() => {
+		if (!isMinDateSelected || !minDate) return 1;
+		const minTime = dayjs(minDate);
+		const minHour24 = minTime.hour();
+		const isPM = amPm === 'pm';
+
+		if (isPM) {
+			// PM: min hour is 12 (noon) or later
+			return minHour24 >= 12 ? (minHour24 === 12 ? 12 : minHour24 - 12) : 1;
+		} else {
+			// AM: min hour is before noon
+			return minHour24 < 12 ? (minHour24 === 0 ? 12 : minHour24) : 12;
+		}
+	});
+
+	const maxHour = $derived.by(() => {
+		if (!isMaxDateSelected || !maxDate) return 12;
+		const maxTime = dayjs(maxDate);
+		const maxHour24 = maxTime.hour();
+		const isPM = amPm === 'pm';
+
+		if (isPM) {
+			// PM: max hour is noon or later
+			return maxHour24 >= 12 ? (maxHour24 === 12 ? 12 : maxHour24 - 12) : 1;
+		} else {
+			// AM: max hour is before noon
+			return maxHour24 < 12 ? (maxHour24 === 0 ? 12 : maxHour24) : 12;
+		}
+	});
+
+	const minMinute = $derived.by(() => {
+		if (!isMinDateSelected || !minDate) return 0;
+		const minTime = dayjs(minDate);
+		const minHour24 = minTime.hour();
+		const currentHour24 = amPm === 'pm' ? (hours === 12 ? 12 : hours + 12) : (hours === 12 ? 0 : hours);
+
+		// Only apply minute constraint if we're on the same hour
+		return minHour24 === currentHour24 ? minTime.minute() : 0;
+	});
+
+	const maxMinute = $derived.by(() => {
+		if (!isMaxDateSelected || !maxDate) return 59;
+		const maxTime = dayjs(maxDate);
+		const maxHour24 = maxTime.hour();
+		const currentHour24 = amPm === 'pm' ? (hours === 12 ? 12 : hours + 12) : (hours === 12 ? 0 : hours);
+
+		// Only apply minute constraint if we're on the same hour
+		return maxHour24 === currentHour24 ? maxTime.minute() : 59;
+	});
+
+	// Check if AM/PM switch should be disabled
+	const isAmPmDisabled = $derived.by(() => {
+		if (disabled) return true;
+
+		// If min date is selected, check if switching to AM would be invalid
+		if (isMinDateSelected && minDate) {
+			const minTime = dayjs(minDate);
+			const minHour24 = minTime.hour();
+
+			// If min time is PM and we're currently on PM, can't switch to AM
+			if (amPm === 'pm' && minHour24 >= 12) {
+				return true;
+			}
+		}
+
+		// If max date is selected, check if switching to PM would be invalid
+		if (isMaxDateSelected && maxDate) {
+			const maxTime = dayjs(maxDate);
+			const maxHour24 = maxTime.hour();
+
+			// If max time is AM and we're currently on AM, can't switch to PM
+			if (amPm === 'am' && maxHour24 < 12) {
+				return true;
+			}
+		}
+
+		return false;
+	});
+
+	let UpdateTime = () => {
+		if (hours && minutes !== undefined) {
+			let hour24 = hours;
+			if (amPm === 'pm' && hours !== 12) {
+				hour24 += 12;
+			} else if (amPm === 'am' && hours === 12) {
+				hour24 = 0;
+			}
+
+			const timeString = `${hour24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
+			onchange?.(timeString);
+			value = timeString;
+			return;
+		}
+		value = dayjs().format('HH:mm');
+	};
+
+	if (value === undefined) {
+		UpdateTime();
+	}
+</script>
+
+<div class="element-container {rounded && 'rounded'} {containerClass}">
+	<div class="time-label">{label}</div>
+	<div class="time-wrapper">
+		<div class="time-container">
+			<Number
+				{disabled}
+				bind:value={hours}
+				min={minHour}
+				max={maxHour}
+				onchange={() => {
+					UpdateTime();
+				}}
+			/>
+			:
+			<Number
+				{disabled}
+				bind:value={minutes}
+				min={minMinute}
+				max={maxMinute}
+				onchange={() => {
+					UpdateTime();
+				}}
+			/>
+		</div>
+		<div class="am-pm-container">
+			<Button
+				disabled={isAmPmDisabled}
+				onclick={() => {
+					amPm = amPm === 'am' ? 'pm' : 'am';
+					UpdateTime();
+				}}
+				variant={themeState.isDarkMode ? 'secondary' : 'primary'}
+			>
+				{amPm.toUpperCase()}
+			</Button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.time-label {
+		margin-bottom: var(--pui-spacing-1);
+	}
+
+	.time-wrapper {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.time-picker-container {
+		border-radius: var(--pui-radius-lg);
+		overflow: hidden;
+	}
+
+	.time-container {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-grow: 1;
+		gap: var(--pui-spacing-1);
+		background-color: var(--pui-color-gray-100);
+		border: 1px solid var(--pui-border-default);
+		border-top-left-radius: var(--pui-radius-md);
+		border-bottom-left-radius: var(--pui-radius-md);
+
+		:global(.number-container) {
+			flex-grow: 1;
+
+			:global(.number-input input) {
+				text-align: center;
+				background-color: var(--pui-color-gray-100);
+			}
+		}
+	}
+
+	.time-container :global(.number) {
+		border-radius: 0;
+		border: none !important;
+	}
+
+	.time-container :global(.number-container:first-child .number:hover) {
+		border-right: 1px solid var(--pui-border-default) !important;
+		background-color: var(--pui-bg-hover) !important;
+	}
+
+	.time-container :global(.number-container:last-child .number:hover) {
+		border-left: 1px solid var(--pui-border-default) !important;
+		background-color: var(--pui-bg-hover) !important;
+	}
+
+	.time-container :global(.number-container:first-child .number) {
+		border-top-left-radius: var(--pui-radius-md);
+		border-bottom-left-radius: var(--pui-radius-md);
+	}
+
+	.am-pm-container :global(.pui-button) {
+		border-radius: 0;
+		border-top-right-radius: var(--pui-radius-md);
+		border-bottom-right-radius: var(--pui-radius-md);
+	}
+
+	:global(.dark) {
+		.time-container {
+			background-color: var(--pui-color-dark-200);
+
+			:global(.number-container) {
+				:global(.number-input input) {
+					background-color: var(--pui-color-dark-200);
+				}
+			}
+		}
+
+		.time-container :global(.number-container:first-child .number:hover) {
+			background-color: var(--pui-bg-hover) !important;
+		}
+
+		.time-container :global(.number-container:last-child .number:hover) {
+			background-color: var(--pui-bg-hover) !important;
+		}
+	}
+</style>

package/dist/icon/Icon.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-	/** Raw HTML. Do NOT retrieve this from external sources; it will be executed in the browser */
-	interface Props {
-		svg: string;
-		stroke?: string;
-		fill?: string;
-		size?: string;
-		flip?: boolean;
-		class?: string;
-	}
-
-	let {
-		svg,
-		stroke = 'currentColor',
-		fill = 'none',
-		size = '',
-		flip = false,
-		class: classes = ''
-	}: Props = $props();
-
-	let sizeStyle = $derived(size ? `width:${size};height:${size};` : '');
-</script>
-
-<span style="--svg-stroke: {stroke}; --svg-fill: {fill}; {sizeStyle}" class:flip class="cu-icon {classes}">
-	{@html svg}
-</span>
-
-<style>
-	.cu-icon {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.cu-icon :global(svg) {
-		width: 100%;
-		height: 100%;
-	}
-
-	.cu-icon :global(svg:not(.icons-tabler-filled)) {
-		stroke: var(--svg-stroke);
-		fill: var(--svg-fill);
-	}
-
-	.flip {
-		transform: scale(-1, 1);
-	}
-
-	.text-accent {
-		stroke: var(--accent-color);
-	}
-</style>
+<script lang="ts">
+	/** Raw HTML. Do NOT retrieve this from external sources; it will be executed in the browser */
+	interface Props {
+		svg: string;
+		stroke?: string;
+		fill?: string;
+		size?: string;
+		flip?: boolean;
+		class?: string;
+	}
+
+	let {
+		svg,
+		stroke = 'currentColor',
+		fill = 'none',
+		size = '',
+		flip = false,
+		class: classes = ''
+	}: Props = $props();
+
+	let sizeStyle = $derived(size ? `width:${size};height:${size};` : '');
+</script>
+
+<span style="--svg-stroke: {stroke}; --svg-fill: {fill}; {sizeStyle}" class:flip class="cu-icon {classes}">
+	{@html svg}
+</span>
+
+<style>
+	.cu-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.cu-icon :global(svg) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.cu-icon :global(svg:not(.icons-tabler-filled)) {
+		stroke: var(--svg-stroke);
+		fill: var(--svg-fill);
+	}
+
+	.flip {
+		transform: scale(-1, 1);
+	}
+
+	.text-accent {
+		stroke: var(--accent-color);
+	}
+</style>

package/dist/icon/alert-octagon.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-alert-octagon">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z" />
-    <path d="M12 8v4" />
-    <path d="M12 16h.01" />
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-alert-octagon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z" />
+    <path d="M12 8v4" />
+    <path d="M12 16h.01" />
 </svg>

package/dist/icon/alert-triangle.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M12 9v4" />
-    <path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" />
-    <path d="M12 16h.01" />
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 9v4" />
+    <path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" />
+    <path d="M12 16h.01" />
 </svg>

package/dist/icon/archive.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-archive"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" /><path d="M10 12l4 0" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-archive"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" /><path d="M10 12l4 0" /></svg>