@joyautomation/salt 0.0.29 → 0.1.1

package/dist/components/forms/SearchableSelect.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+	import ChevronDown from '../icons/outline/ChevronDown.svelte'
+
+	type Option = {
+		value: string
+		label: string
+		sublabel?: string
+	}
+
+	type Props = {
+		options: Option[]
+		placeholder?: string
+		onSelect: (option: Option) => void
+		disabled?: boolean
+	}
+
+	let { options, placeholder = 'Select...', onSelect, disabled = false }: Props = $props()
+
+	let isOpen = $state(false)
+	let searchQuery = $state('')
+	let highlightedIndex = $state(-1)
+	let inputRef: HTMLInputElement | undefined = $state()
+	let dropdownRef: HTMLDivElement | undefined = $state()
+
+	let filteredOptions = $derived(
+		searchQuery.trim() === ''
+			? options
+			: options.filter((opt) => {
+					const query = searchQuery.toLowerCase()
+					return (
+						opt.label.toLowerCase().includes(query) ||
+						(opt.sublabel && opt.sublabel.toLowerCase().includes(query))
+					)
+				})
+	)
+
+	function openDropdown() {
+		if (disabled) return
+		isOpen = true
+		highlightedIndex = -1
+		setTimeout(() => inputRef?.focus(), 0)
+	}
+
+	function closeDropdown() {
+		isOpen = false
+		searchQuery = ''
+		highlightedIndex = -1
+	}
+
+	function selectOption(option: Option) {
+		onSelect(option)
+		closeDropdown()
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!isOpen) {
+			if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+				e.preventDefault()
+				openDropdown()
+			}
+			return
+		}
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault()
+				highlightedIndex = Math.min(highlightedIndex + 1, filteredOptions.length - 1)
+				scrollToHighlighted()
+				break
+			case 'ArrowUp':
+				e.preventDefault()
+				highlightedIndex = Math.max(highlightedIndex - 1, 0)
+				scrollToHighlighted()
+				break
+			case 'Enter':
+				e.preventDefault()
+				if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+					selectOption(filteredOptions[highlightedIndex])
+				}
+				break
+			case 'Escape':
+				e.preventDefault()
+				closeDropdown()
+				break
+			case 'Tab':
+				closeDropdown()
+				break
+		}
+	}
+
+	function scrollToHighlighted() {
+		if (!dropdownRef || highlightedIndex < 0) return
+		const items = dropdownRef.querySelectorAll('.searchable-select__option')
+		const item = items[highlightedIndex] as HTMLElement
+		if (item) {
+			item.scrollIntoView({ block: 'nearest' })
+		}
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		const target = e.target as Node
+		if (dropdownRef && !dropdownRef.contains(target)) {
+			closeDropdown()
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			document.addEventListener('click', handleClickOutside, true)
+			return () => document.removeEventListener('click', handleClickOutside, true)
+		}
+	})
+
+	$effect(() => {
+		if (searchQuery) {
+			highlightedIndex = filteredOptions.length > 0 ? 0 : -1
+		}
+	})
+</script>
+
+<div class="searchable-select" class:searchable-select--disabled={disabled}>
+	<button
+		type="button"
+		class="searchable-select__trigger"
+		onclick={openDropdown}
+		onkeydown={handleKeydown}
+		{disabled}
+		aria-haspopup="listbox"
+		aria-expanded={isOpen}
+	>
+		<span class="searchable-select__placeholder">{placeholder}</span>
+		<span class="searchable-select__chevron" class:searchable-select__chevron--open={isOpen}>
+			<ChevronDown size="1rem" />
+		</span>
+	</button>
+
+	{#if isOpen}
+		<div class="searchable-select__dropdown" bind:this={dropdownRef}>
+			<div class="searchable-select__search">
+				<input
+					bind:this={inputRef}
+					type="text"
+					class="searchable-select__input"
+					placeholder="Search..."
+					bind:value={searchQuery}
+					onkeydown={handleKeydown}
+				/>
+			</div>
+			<div class="searchable-select__options" role="listbox">
+				{#if filteredOptions.length === 0}
+					<div class="searchable-select__empty">No matches found</div>
+				{:else}
+					{#each filteredOptions as option, i}
+						<button
+							type="button"
+							class="searchable-select__option"
+							class:searchable-select__option--highlighted={i === highlightedIndex}
+							onclick={() => selectOption(option)}
+							onmouseenter={() => (highlightedIndex = i)}
+							role="option"
+							aria-selected={i === highlightedIndex}
+						>
+							<span class="searchable-select__option-label">{option.label}</span>
+							{#if option.sublabel}
+								<span class="searchable-select__option-sublabel">{option.sublabel}</span>
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>.searchable-select {
+  position: relative;
+  width: 100%;
+}
+
+.searchable-select--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.searchable-select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 40px;
+  padding: 0 calc(var(--spacing-unit) * 2);
+  border: 1px solid var(--theme-neutral-300);
+  border-radius: var(--rounded-sm);
+  background-color: var(--theme-neutral-200);
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+.searchable-select__trigger:hover:not(:disabled) {
+  border-color: var(--theme-neutral-400);
+}
+.searchable-select__trigger:focus {
+  outline: none;
+  border-color: var(--theme-primary);
+}
+
+.searchable-select__placeholder {
+  color: var(--theme-neutral-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.searchable-select__chevron {
+  display: flex;
+  align-items: center;
+  color: var(--theme-neutral-500);
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+  margin-left: calc(var(--spacing-unit) * 1);
+}
+
+.searchable-select__chevron--open {
+  transform: rotate(-180deg);
+}
+
+.searchable-select__dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 100;
+  border: 1px solid var(--theme-neutral-300);
+  border-radius: var(--rounded-md, var(--rounded-sm));
+  background-color: var(--theme-neutral-100);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.searchable-select__search {
+  padding: calc(var(--spacing-unit) * 1.5);
+  border-bottom: 1px solid var(--theme-neutral-200);
+}
+
+.searchable-select__input {
+  width: 100%;
+  height: 32px;
+  padding: 0 calc(var(--spacing-unit) * 1.5);
+  border: 1px solid var(--theme-neutral-300);
+  border-radius: var(--rounded-sm);
+  background-color: var(--theme-neutral-50, var(--theme-neutral-100));
+  color: var(--theme-text);
+  font-size: var(--text-sm);
+}
+.searchable-select__input::placeholder {
+  color: var(--theme-neutral-400);
+}
+.searchable-select__input:focus {
+  outline: none;
+  border-color: var(--theme-primary);
+}
+
+.searchable-select__options {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.searchable-select__option {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
+  border: none;
+  background: transparent;
+  color: var(--theme-text);
+  font-size: var(--text-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.searchable-select__option:hover, .searchable-select__option.searchable-select__option--highlighted {
+  background-color: var(--theme-neutral-200);
+}
+
+.searchable-select__option-label {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.searchable-select__option-sublabel {
+  font-size: var(--text-xs);
+  color: var(--theme-neutral-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.searchable-select__empty {
+  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
+  text-align: center;
+  color: var(--theme-neutral-500);
+  font-size: var(--text-sm);
+}</style>

package/dist/components/forms/SearchableSelect.svelte.d.ts

@@ -0,0 +1,14 @@
+type Option = {
+    value: string;
+    label: string;
+    sublabel?: string;
+};
+type Props = {
+    options: Option[];
+    placeholder?: string;
+    onSelect: (option: Option) => void;
+    disabled?: boolean;
+};
+declare const SearchableSelect: import("svelte").Component<Props, {}, "">;
+type SearchableSelect = ReturnType<typeof SearchableSelect>;
+export default SearchableSelect;

package/dist/components/forms/Select.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition'
+	import type { FormInputs, InputProps } from './types.js'
+
+	let {
+		id,
+		name,
+		label,
+		value = $bindable(''),
+		validations,
+		inputs,
+		options
+	}: InputProps & { inputs?: FormInputs; options: { value: string; label: string }[] } = $props()
+	const validationResult = $derived(
+		validations.find(([validation]) => {
+			return validation(value, inputs ?? [])
+		})?.[1] || null
+	)
+</script>
+
+<div class="select-field" class:select-field--invalid={validationResult != null}>
+	{#if label != null}
+		<label for={id}>{label}</label>
+	{/if}
+	<select {id} {name} bind:value>
+		{#each options as option}
+			<option value={option.value}>{option.label}</option>
+		{/each}
+	</select>
+	{#if validationResult != null}<div transition:slide class="select-field__validation">
+			{validationResult}
+		</div>{/if}
+</div>
+
+<style>.select-field {
+  display: flex;
+  flex-direction: column;
+}
+.select-field > .select-field__validation {
+  color: var(--theme-error-400, var(--red-400));
+  font-size: var(--text-xs);
+  line-height: var(--text-xs-lh);
+}
+.select-field > label {
+  color: var(--theme-text);
+  font-family: var(--theme-font-basic, inherit);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm-lh);
+  text-transform: capitalize;
+}
+.select-field > * {
+  margin-top: var(--spacing-unit);
+}
+.select-field > select {
+  background-color: var(--theme-neutral-200);
+  border: solid 1px var(--theme-neutral-300);
+  color: var(--theme-text);
+  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
+  border-radius: var(--rounded-sm);
+  font-size: var(--text-base);
+}
+.select-field > select:focus {
+  outline: none;
+  border-color: var(--theme-primary);
+}
+
+.select-field--invalid > select {
+  border: solid 1px var(--theme-error-400, var(--red-400));
+}</style>

package/dist/components/forms/Select.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FormInputs, InputProps } from './types.js';
+type $$ComponentProps = InputProps & {
+    inputs?: FormInputs;
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/forms/index.d.ts

@@ -1 +1,5 @@
-export {};
+export { default as Form } from './Form.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Select } from './Select.svelte';
+export { default as SearchableSelect } from './SearchableSelect.svelte';
+export type { InputProps, FormInputs, FormInputsPartial } from './types.js';

package/dist/components/forms/index.js

@@ -1 +1,4 @@
-"use strict";
+export { default as Form } from './Form.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Select } from './Select.svelte';
+export { default as SearchableSelect } from './SearchableSelect.svelte';

package/dist/components/forms/types.d.ts

@@ -1,8 +1,15 @@
 export type InputProps = {
     id: string;
     name: string;
-    label: string;
+    label?: string;
     type: HTMLInputElement['type'];
-    value: string;
-    validation: (value: string) => string | null;
+    step?: HTMLInputElement['step'];
+    value: HTMLInputElement['value'];
+    validations: [(value: string, inputs: FormInputs) => boolean, string][];
+    options?: {
+        value: string;
+        label: string;
+    }[];
 };
+export type FormInputs = InputProps[][];
+export type FormInputsPartial = (Pick<InputProps, 'name'> & Partial<InputProps>)[][];

package/dist/components/icons/index.d.ts

@@ -1,21 +1 @@
-export { default as ArrowPath } from './ArrowPath.svelte';
-export { default as ChevronRight } from './ChevronRight.svelte';
-export { default as ChevronDown } from './ChevronDown.svelte';
-export { default as ChevronUpDown } from './ChevronUpDown.svelte';
-export { default as DocumentMinus } from './DocumentMinus.svelte';
-export { default as DocumentPlus } from './DocumentPlus.svelte';
-export { default as Link } from './Link.svelte';
-export { default as Moon } from './Moon.svelte';
-export { default as PauseCircle } from './PauseCircle.svelte';
-export { default as Pencil } from './Pencil.svelte';
-export { default as PlayCircle } from './PlayCircle.svelte';
-export { default as Plus } from './Plus.svelte';
-export { default as Sun } from './Sun.svelte';
-export { default as Trash } from './Trash.svelte';
-export { default as WrenchScrewdriver } from './WrenchScrewdriver.svelte';
-export { default as Xmark } from './Xmark.svelte';
-export { default as Minus } from './Minus.svelte';
-export { default as ShoppingCart } from './ShoppingCart.svelte';
-export { default as Bars } from './Bars.svelte';
-export { default as CheckCircle } from './CheckCircle.svelte';
-export { default as Xcircle } from './Xcircle.svelte';
+export * from './outline/index.js';

package/dist/components/icons/index.js

@@ -1,21 +1,5 @@
-export { default as ArrowPath } from './ArrowPath.svelte';
-export { default as ChevronRight } from './ChevronRight.svelte';
-export { default as ChevronDown } from './ChevronDown.svelte';
-export { default as ChevronUpDown } from './ChevronUpDown.svelte';
-export { default as DocumentMinus } from './DocumentMinus.svelte';
-export { default as DocumentPlus } from './DocumentPlus.svelte';
-export { default as Link } from './Link.svelte';
-export { default as Moon } from './Moon.svelte';
-export { default as PauseCircle } from './PauseCircle.svelte';
-export { default as Pencil } from './Pencil.svelte';
-export { default as PlayCircle } from './PlayCircle.svelte';
-export { default as Plus } from './Plus.svelte';
-export { default as Sun } from './Sun.svelte';
-export { default as Trash } from './Trash.svelte';
-export { default as WrenchScrewdriver } from './WrenchScrewdriver.svelte';
-export { default as Xmark } from './Xmark.svelte';
-export { default as Minus } from './Minus.svelte';
-export { default as ShoppingCart } from './ShoppingCart.svelte';
-export { default as Bars } from './Bars.svelte';
-export { default as CheckCircle } from './CheckCircle.svelte';
-export { default as Xcircle } from './Xcircle.svelte';
+// Outline icons (default)
+export * from './outline/index.js';
+// For style-specific imports:
+//   import { AcademicCap } from '@joyautomation/salt/icons/outline';
+//   import { AcademicCap } from '@joyautomation/salt/icons/solid';

package/dist/components/icons/outline/AcademicCap.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { size = '1.5rem' }: { size?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	style:height={size}
+	style:width={size} viewBox="0 0 24 24" fill="none">
+<path d="M4.25933 10.1466C3.98688 12.2307 3.82139 14.3483 3.76853 16.494C6.66451 17.703 9.41893 19.1835 12 20.9036C14.5811 19.1835 17.3355 17.703 20.2315 16.494C20.1786 14.3484 20.0131 12.2307 19.7407 10.1467M4.25933 10.1466C3.38362 9.8523 2.49729 9.58107 1.60107 9.3337C4.84646 7.05887 8.32741 5.0972 12 3.49255C15.6727 5.0972 19.1536 7.05888 22.399 9.33371C21.5028 9.58109 20.6164 9.85233 19.7407 10.1467M4.25933 10.1466C6.94656 11.0499 9.5338 12.1709 12.0001 13.4886C14.4663 12.1709 17.0535 11.0499 19.7407 10.1467M6.75 15C7.16421 15 7.5 14.6642 7.5 14.25C7.5 13.8358 7.16421 13.5 6.75 13.5C6.33579 13.5 6 13.8358 6 14.25C6 14.6642 6.33579 15 6.75 15ZM6.75 15V11.3245C8.44147 10.2735 10.1936 9.31094 12 8.44329M4.99264 19.9926C6.16421 18.8211 6.75 17.2855 6.75 15.75V14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/icons/outline/AcademicCap.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    size?: string;
+};
+declare const AcademicCap: import("svelte").Component<$$ComponentProps, {}, "">;
+type AcademicCap = ReturnType<typeof AcademicCap>;
+export default AcademicCap;

package/dist/components/icons/outline/AdjustmentsHorizontal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { size = '1.5rem' }: { size?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	style:height={size}
+	style:width={size} viewBox="0 0 24 24" fill="none">
+<path d="M10.5 6L20.25 6M10.5 6C10.5 6.82843 9.82843 7.5 9 7.5C8.17157 7.5 7.5 6.82843 7.5 6M10.5 6C10.5 5.17157 9.82843 4.5 9 4.5C8.17157 4.5 7.5 5.17157 7.5 6M3.75 6H7.5M10.5 18H20.25M10.5 18C10.5 18.8284 9.82843 19.5 9 19.5C8.17157 19.5 7.5 18.8284 7.5 18M10.5 18C10.5 17.1716 9.82843 16.5 9 16.5C8.17157 16.5 7.5 17.1716 7.5 18M3.75 18L7.5 18M16.5 12L20.25 12M16.5 12C16.5 12.8284 15.8284 13.5 15 13.5C14.1716 13.5 13.5 12.8284 13.5 12M16.5 12C16.5 11.1716 15.8284 10.5 15 10.5C14.1716 10.5 13.5 11.1716 13.5 12M3.75 12H13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/icons/outline/AdjustmentsHorizontal.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    size?: string;
+};
+declare const AdjustmentsHorizontal: import("svelte").Component<$$ComponentProps, {}, "">;
+type AdjustmentsHorizontal = ReturnType<typeof AdjustmentsHorizontal>;
+export default AdjustmentsHorizontal;

package/dist/components/icons/outline/AdjustmentsVertical.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { size = '1.5rem' }: { size?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	style:height={size}
+	style:width={size} viewBox="0 0 24 24" fill="none">
+<path d="M6 13.5L6 3.75M6 13.5C6.82843 13.5 7.5 14.1716 7.5 15C7.5 15.8284 6.82843 16.5 6 16.5M6 13.5C5.17157 13.5 4.5 14.1716 4.5 15C4.5 15.8284 5.17157 16.5 6 16.5M6 20.25L6 16.5M18 13.5V3.75M18 13.5C18.8284 13.5 19.5 14.1716 19.5 15C19.5 15.8284 18.8284 16.5 18 16.5M18 13.5C17.1716 13.5 16.5 14.1716 16.5 15C16.5 15.8284 17.1716 16.5 18 16.5M18 20.25L18 16.5M12 7.5V3.75M12 7.5C12.8284 7.5 13.5 8.17157 13.5 9C13.5 9.82843 12.8284 10.5 12 10.5M12 7.5C11.1716 7.5 10.5 8.17157 10.5 9C10.5 9.82843 11.1716 10.5 12 10.5M12 20.25V10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/icons/outline/AdjustmentsVertical.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    size?: string;
+};
+declare const AdjustmentsVertical: import("svelte").Component<$$ComponentProps, {}, "">;
+type AdjustmentsVertical = ReturnType<typeof AdjustmentsVertical>;
+export default AdjustmentsVertical;

package/dist/components/icons/outline/ArchiveBox.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { size = '1.5rem' }: { size?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	style:height={size}
+	style:width={size} viewBox="0 0 24 24" fill="none">
+<path d="M20.25 7.5L19.6246 18.1321C19.5546 19.3214 18.5698 20.25 17.3785 20.25H6.62154C5.43022 20.25 4.44538 19.3214 4.37542 18.1321L3.75 7.5M9.99976 11.25H13.9998M3.375 7.5H20.625C21.2463 7.5 21.75 6.99632 21.75 6.375V4.875C21.75 4.25368 21.2463 3.75 20.625 3.75H3.375C2.75368 3.75 2.25 4.25368 2.25 4.875V6.375C2.25 6.99632 2.75368 7.5 3.375 7.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/icons/outline/ArchiveBox.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    size?: string;
+};
+declare const ArchiveBox: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArchiveBox = ReturnType<typeof ArchiveBox>;
+export default ArchiveBox;

package/dist/components/icons/outline/ArchiveBoxArrowDown.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { size = '1.5rem' }: { size?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	style:height={size}
+	style:width={size} viewBox="0 0 24 24" fill="none">
+<path d="M20.25 7.5L19.6246 18.1321C19.5546 19.3214 18.5698 20.25 17.3785 20.25H6.62154C5.43022 20.25 4.44538 19.3214 4.37542 18.1321L3.75 7.5M12 10.5V17.25M12 17.25L9 14.25M12 17.25L15 14.25M3.375 7.5H20.625C21.2463 7.5 21.75 6.99632 21.75 6.375V4.875C21.75 4.25368 21.2463 3.75 20.625 3.75H3.375C2.75368 3.75 2.25 4.25368 2.25 4.875V6.375C2.25 6.99632 2.75368 7.5 3.375 7.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/icons/outline/ArchiveBoxArrowDown.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    size?: string;
+};
+declare const ArchiveBoxArrowDown: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArchiveBoxArrowDown = ReturnType<typeof ArchiveBoxArrowDown>;
+export default ArchiveBoxArrowDown;

package/dist/components/icons/outline/ArchiveBoxXMark.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { size = '1.5rem' }: { size?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	style:height={size}
+	style:width={size} viewBox="0 0 24 24" fill="none">
+<path d="M20.25 7.5L19.6246 18.1321C19.5546 19.3214 18.5698 20.25 17.3785 20.25H6.62154C5.43022 20.25 4.44538 19.3214 4.37542 18.1321L3.75 7.5M9.75 11.625L12 13.875M12 13.875L14.25 16.125M12 13.875L14.25 11.625M12 13.875L9.75 16.125M3.375 7.5H20.625C21.2463 7.5 21.75 6.99632 21.75 6.375V4.875C21.75 4.25368 21.2463 3.75 20.625 3.75H3.375C2.75368 3.75 2.25 4.25368 2.25 4.875V6.375C2.25 6.99632 2.75368 7.5 3.375 7.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/icons/outline/ArchiveBoxXMark.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    size?: string;
+};
+declare const ArchiveBoxXMark: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArchiveBoxXMark = ReturnType<typeof ArchiveBoxXMark>;
+export default ArchiveBoxXMark;

package/dist/components/icons/outline/ArrowDown.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { size = '1.5rem' }: { size?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	style:height={size}
+	style:width={size} viewBox="0 0 24 24" fill="none">
+<path d="M19.5 13.5L12 21M12 21L4.5 13.5M12 21L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/icons/outline/ArrowDown.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    size?: string;
+};
+declare const ArrowDown: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArrowDown = ReturnType<typeof ArrowDown>;
+export default ArrowDown;

package/dist/components/icons/outline/ArrowDownCircle.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { size = '1.5rem' }: { size?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	style:height={size}
+	style:width={size} viewBox="0 0 24 24" fill="none">
+<path d="M9 12.75L12 15.75M12 15.75L15 12.75M12 15.75L12 8.25M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/icons/outline/ArrowDownCircle.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    size?: string;
+};
+declare const ArrowDownCircle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArrowDownCircle = ReturnType<typeof ArrowDownCircle>;
+export default ArrowDownCircle;

package/dist/components/icons/outline/ArrowDownLeft.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { size = '1.5rem' }: { size?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	style:height={size}
+	style:width={size} viewBox="0 0 24 24" fill="none">
+<path d="M19.5 4.5L4.5 19.5M4.5 19.5L15.75 19.5M4.5 19.5L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>