mertani-web-toolkit 0.1.40 → 0.1.41

package/dist/components/Table/Table.svelte

@@ -23,7 +23,8 @@
 		onPageChange,
 		onItemsPerPageChange,
 		defaultBadgeStatusMappings,
-		emptyMessage = 'Tidak ada data'
+		emptyMessage = 'Tidak ada data',
+		showCellHover = false
 	}: {
 		columns?: Column[];
 		data?: any[];
@@ -40,11 +41,13 @@
 		onItemsPerPageChange?: (itemsPerPage: number) => void;
 		defaultBadgeStatusMappings?: BadgeStatusMapping[];
 		emptyMessage?: string;
+		showCellHover?: boolean;
 	} = $props();
 
 	let scrollContainer: HTMLElement | null = $state(null);
 	let internalHasHorizontalScroll = $state(false);
 	let isMobile = $state(false);
+	let hoveredColumnIndex: number | null = $state(null);
 
 	$effect(() => {
 		if (typeof window === 'undefined') return;
@@ -127,6 +130,41 @@
 	const flatColumns = $derived(flattenColumns(columns, false));
 	const totalColumnCount = $derived(getTotalColumnCount(columns));
 
+	// ========== COLUMN HOVER UTILITIES ==========
+	function getFlatColumnIndex(parentIndex: number, childIndex: number, columns: Column[]): number {
+		let flatIndex = 0;
+		for (let i = 0; i < parentIndex; i++) {
+			const col = columns[i];
+			if (col && col.children && col.children.length > 0) {
+				flatIndex += col.children.length;
+			} else {
+				flatIndex += 1;
+			}
+		}
+		return flatIndex + childIndex;
+	}
+
+	function handleColumnHoverEnter(columnIndex: number) {
+		if (showCellHover) {
+			hoveredColumnIndex = columnIndex;
+		}
+	}
+
+	function handleColumnHoverLeave() {
+		if (showCellHover) {
+			hoveredColumnIndex = null;
+		}
+	}
+
+	function getCellHoverClasses(columnIndex: number): string {
+		if (!showCellHover) return '';
+		const classes = ['cell-hover'];
+		if (hoveredColumnIndex === columnIndex) {
+			classes.push('column-hovered');
+		}
+		return classes.join(' ');
+	}
+
 	// ========== STICKY COLUMN UTILITIES ==========
 	function parseWidth(width: string | undefined): number {
 		if (!width) return 160;
@@ -281,7 +319,7 @@
 	style="margin: 0 1rem; overflow-x: auto; overflow-y: auto; height: {height}; min-height: {minHeight};"
 	bind:this={scrollContainer}
 >
-	<table style="width: 100%; border-collapse: collapse;">
+	<table class:cell-hover-enabled={showCellHover} style="width: 100%; border-collapse: collapse;">
 		<thead style="position: sticky; top: 0; z-index: 30;">
 			{#if hasNestedColumns}
 				<!-- Parent header row -->
@@ -308,7 +346,7 @@
 				</tr>
 				<!-- Sub-header row -->
 				<tr>
-					{#each columns as column}
+					{#each columns as column, parentIndex}
 						{#if column.children && column.children.length > 0}
 							{#each column.children as childColumn, childIndex}
 								{@const isLastChild = childIndex === column.children.length - 1}
@@ -378,8 +416,12 @@
 					>
 						{#each flatColumns as column, colIndex}
 							<td
-								class={column.cellClass || ''}
+								class="table-cell {column.cellClass || ''} {getCellHoverClasses(colIndex)}"
 								data-shadow={getCellShadow(column)}
+								data-cell-hover={showCellHover}
+								data-column-index={colIndex}
+								onmouseenter={() => handleColumnHoverEnter(colIndex)}
+								onmouseleave={() => handleColumnHoverLeave()}
 								style="{getCellStyle(column)} {getColumnStyles(column)} {getStickyStyle(
 									column,
 									colIndex,

package/dist/components/Table/Table.svelte.d.ts

@@ -16,6 +16,7 @@ type $$ComponentProps = {
     onItemsPerPageChange?: (itemsPerPage: number) => void;
     defaultBadgeStatusMappings?: BadgeStatusMapping[];
     emptyMessage?: string;
+    showCellHover?: boolean;
 };
 declare const Table: import("svelte").Component<$$ComponentProps, {
     Column: typeof Column;

package/dist/components/Table/table.css

@@ -52,6 +52,91 @@
   background-color: var(--color-bg-surface-subtle) !important;
 }
 
+/* ========== TABLE CELL HOVER ========== */
+/* CSS Variables for hover styles */
+:root {
+  --table-cell-hover-bg: var(--color-bg-surface-subtle);
+  --table-cell-hover-column-bg: var(--color-bg-surface-subtle);
+  --table-cell-hover-border-color: var(--color-bg-surface-subtle);
+  --table-cell-hover-border-width: 3px;
+  --table-cell-hover-transition: background-color 0.15s ease;
+  --table-cell-hover-z-index: 5;
+  --table-cell-hover-z-index-column: 4;
+  --table-cell-hover-z-index-border: 7;
+}
+
+/* Base cell hover styles */
+[data-cell-hover="true"].table-cell,
+.cell-hover-enabled .table-cell.cell-hover,
+.table-cell.cell-hover {
+  position: relative;
+  transition: var(--table-cell-hover-transition);
+}
+
+/* Individual cell hover */
+[data-cell-hover="true"].table-cell:hover,
+.cell-hover-enabled .table-cell.cell-hover:hover,
+.table-cell.cell-hover:hover {
+  background-color: var(--table-cell-hover-bg) !important;
+  z-index: var(--table-cell-hover-z-index);
+}
+
+/* Vertical column hover - all cells in same column */
+[data-cell-hover="true"].table-cell.column-hovered,
+.cell-hover-enabled .table-cell.cell-hover.column-hovered,
+.table-cell.cell-hover.column-hovered {
+  background-color: var(--table-cell-hover-column-bg) !important;
+  z-index: var(--table-cell-hover-z-index-column);
+}
+
+/* Horizontal border indicators (top & bottom) */
+[data-cell-hover="true"].table-cell:hover::before,
+.cell-hover-enabled .table-cell.cell-hover:hover::before,
+.table-cell.cell-hover:hover::before,
+[data-cell-hover="true"].table-cell.column-hovered::before,
+.cell-hover-enabled .table-cell.cell-hover.column-hovered::before,
+.table-cell.cell-hover.column-hovered::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--table-cell-hover-border-width);
+  background-color: var(--table-cell-hover-border-color);
+  z-index: var(--table-cell-hover-z-index-border);
+  pointer-events: none;
+}
+
+[data-cell-hover="true"].table-cell:hover::after,
+.cell-hover-enabled .table-cell.cell-hover:hover::after,
+.table-cell.cell-hover:hover::after,
+[data-cell-hover="true"].table-cell.column-hovered::after,
+.cell-hover-enabled .table-cell.cell-hover.column-hovered::after,
+.table-cell.cell-hover.column-hovered::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--table-cell-hover-border-width);
+  background-color: var(--table-cell-hover-border-color);
+  z-index: var(--table-cell-hover-z-index-border);
+  pointer-events: none;
+}
+
+/* Row hover interactions */
+[data-cell-hover="true"].table-row:hover .table-cell:hover,
+.cell-hover-enabled .table-row:hover .table-cell.cell-hover:hover,
+.table-row:hover .table-cell.cell-hover:hover {
+  background-color: var(--table-cell-hover-bg) !important;
+}
+
+[data-cell-hover="true"].table-row .table-cell.column-hovered,
+.cell-hover-enabled .table-row .table-cell.cell-hover.column-hovered,
+.table-row .table-cell.cell-hover.column-hovered {
+  background-color: var(--color-bg-surface-subtle) !important;
+}
+
 /* ========== SHIMMER SKELETON ========== */
 .shimmer-skeleton {
   position: relative;

package/dist/components/inputs/Toggle/Toggle.css

@@ -0,0 +1,74 @@
+.toggle-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.toggle-container.toggle-side {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.toggle-container.toggle-side .toggle-label {
+  margin-bottom: 0;
+}
+
+.toggle-label {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-primary);
+  margin-bottom: 4px;
+  display: block;
+}
+
+.label-subLabel {
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+  margin-left: 4px;
+}
+
+.label-required {
+  color: var(--color-text-error-ti);
+  margin-left: 4px;
+}
+
+.toggle-switch {
+  position: relative;
+  width: 48px;
+  height: 24px;
+  background-color: var(--color-bg-disabled);
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  transition: background-color 0.2s;
+}
+
+.toggle-switch.enabled {
+  background-color: var(--color-bg-act-primary);
+}
+
+.toggle-switch.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.toggle-handle {
+  width: 20px;
+  height: 20px;
+  background-color: var(--color-bg-surface);
+  border-radius: 50%;
+  transition: transform 0.2s;
+  transform: translateX(0);
+}
+
+.toggle-switch.enabled .toggle-handle {
+  transform: translateX(24px);
+}
+
+.error-message {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-text-error-ti);
+}

package/dist/components/inputs/Toggle/Toggle.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import './Toggle.css';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'value' | 'onchange'> {
+		// ===Styles===
+		// Label
+		labelColor?: string;
+		aligment?: 'side' | 'top';
+		position?: 'left' | 'right';
+
+		// Toggle
+		backgroundColor?: string;
+		enabledBackgroundColor?: string;
+		handleColor?: string;
+		errorColor?: string;
+
+		// ===Properties===
+		// Data
+		id?: string;
+		label?: string;
+		subLabel?: string;
+		value?: boolean;
+		ariaLabel?: string;
+
+		// Events
+		onclick?: (event: MouseEvent) => void;
+		onchange?: (value: boolean) => void;
+
+		// Validation
+		isMandatory?: boolean;
+		customValidation?: (value: boolean) => string | null;
+
+		// Additional Actions
+		isLoading?: boolean;
+		isShow?: boolean;
+		disabled?: boolean;
+		tooltip?: string;
+
+		// Any
+		class?: string;
+		style?: string;
+	}
+
+	const {
+		// ===Styles===
+		// Label
+		labelColor = 'var(--color-text-primary)',
+		aligment = 'top',
+		position = 'left',
+
+		// Toggle
+		backgroundColor = 'var(--color-bg-disabled)',
+		enabledBackgroundColor = 'var(--color-bg-act-primary)',
+		handleColor = 'var(--color-bg-surface)',
+		errorColor = 'var(--color-text-error-ti)',
+
+		// ===Properties===
+		// Data
+		id = '',
+		label = '',
+		subLabel = '',
+		value = false,
+		ariaLabel = 'Toggle',
+
+		// Events
+		onclick,
+		onchange,
+
+		// Validation
+		isMandatory = false,
+		customValidation,
+
+		// Additional Actions
+		isLoading = false,
+		isShow = true,
+		disabled = false,
+		tooltip = '',
+
+		class: className = '',
+		style: customStyle = '',
+		...props
+	}: Props = $props();
+
+	// ===== State =====
+	let toggleValue = $state(value);
+	let errorMessage = $state('');
+
+	// Update toggleValue when value prop changes
+	$effect(() => {
+		toggleValue = value;
+	});
+
+	// ===== Validation =====
+	function validateInput(val: boolean): string {
+		if (customValidation) {
+			const customError = customValidation(val);
+			if (customError) return customError;
+		}
+		if (isMandatory && !val) {
+			return 'Field ini wajib diisi';
+		}
+		return '';
+	}
+
+	// Validate on value changes
+	$effect(() => {
+		errorMessage = validateInput(toggleValue);
+	});
+
+	// ===== Event Handlers =====
+	function handleToggle(event: MouseEvent) {
+		if (disabled || isLoading) return;
+
+		toggleValue = !toggleValue;
+		errorMessage = validateInput(toggleValue);
+		onchange?.(toggleValue);
+		onclick?.(event);
+	}
+
+	// ===== Styles =====
+	const labelStyles = $derived(() => {
+		const styles: string[] = [];
+		styles.push(`font-size: 14px;`);
+		if (labelColor) styles.push(`color: ${labelColor};`);
+		return styles.join(' ');
+	});
+
+	const toggleStyles = $derived(() => {
+		const styles: string[] = [];
+		if (toggleValue && enabledBackgroundColor) {
+			styles.push(`background-color: ${enabledBackgroundColor};`);
+		} else if (!toggleValue && backgroundColor) {
+			styles.push(`background-color: ${backgroundColor};`);
+		}
+		if (customStyle) {
+			styles.push(customStyle);
+		}
+		return styles.join(' ');
+	});
+
+	const containerClasses = $derived(() => {
+		let classes = 'toggle-container';
+		if (aligment === 'side') {
+			classes += ' toggle-side';
+		}
+		if (className) {
+			classes += ` ${className}`;
+		}
+		return classes;
+	});
+</script>
+
+{#if isShow}
+	<div class={containerClasses()}>
+		{#if label && !(aligment === 'side' && position === 'right')}
+			<label for={id} class="toggle-label" style={labelStyles()}>
+				{label}
+				{#if subLabel}
+					<span class="label-subLabel">{subLabel}</span>
+				{/if}
+				{#if isMandatory}
+					<span class="label-required">*</span>
+				{/if}
+			</label>
+		{/if}
+		<button
+			{id}
+			class="toggle-switch"
+			class:enabled={toggleValue}
+			class:disabled={disabled || isLoading}
+			style={toggleStyles()}
+			onclick={handleToggle}
+			aria-label={ariaLabel}
+			disabled={disabled || isLoading}
+			title={tooltip || ''}
+			{...props}
+		>
+			<div
+				class="toggle-handle"
+				style={handleColor ? `background-color: ${handleColor};` : ''}
+			></div>
+		</button>
+		{#if label && aligment === 'side' && position === 'right'}
+			<label for={id} class="toggle-label" style={labelStyles()}>
+				{label}
+				{#if subLabel}
+					<span class="label-subLabel">{subLabel}</span>
+				{/if}
+				{#if isMandatory}
+					<span class="label-required">*</span>
+				{/if}
+			</label>
+		{/if}
+		{#if errorMessage}
+			<p class="error-message" style={errorColor ? `color: ${errorColor};` : ''}>
+				{errorMessage}
+			</p>
+		{/if}
+	</div>
+{/if}

package/dist/components/inputs/Toggle/Toggle.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import './Toggle.css';
+interface Props extends Omit<HTMLButtonAttributes, 'value' | 'onchange'> {
+    labelColor?: string;
+    aligment?: 'side' | 'top';
+    position?: 'left' | 'right';
+    backgroundColor?: string;
+    enabledBackgroundColor?: string;
+    handleColor?: string;
+    errorColor?: string;
+    id?: string;
+    label?: string;
+    subLabel?: string;
+    value?: boolean;
+    ariaLabel?: string;
+    onclick?: (event: MouseEvent) => void;
+    onchange?: (value: boolean) => void;
+    isMandatory?: boolean;
+    customValidation?: (value: boolean) => string | null;
+    isLoading?: boolean;
+    isShow?: boolean;
+    disabled?: boolean;
+    tooltip?: string;
+    class?: string;
+    style?: string;
+}
+declare const Toggle: import("svelte").Component<Props, {}, "">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/icons/Asap.svelte

@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24.5" cy="11.2585" r="8" fill="#57534D"/>
+<circle cx="8" cy="16.2585" r="8" fill="#57534D"/>
+<circle cx="32" cy="17.2585" r="8" fill="#57534D"/>
+<rect y="13.2585" width="34" height="16" rx="8" fill="#A6A09B"/>
+<circle cx="19" cy="14.7585" r="8" fill="#A6A09B"/>
+<path d="M7.94672 25.6331C7.13079 28.4567 6.3302 32.0928 7.89008 35.0022C8.05293 35.3243 8.2285 35.615 8.42817 35.9124C8.35108 35.5626 8.29746 35.2342 8.25336 34.8899C7.83807 31.812 9.03604 29.1794 9.87543 26.1614C10.7838 23.2038 10.8201 19.4588 9.02973 16.7786C8.83973 16.4714 8.64609 16.1998 8.42817 15.9124C8.52685 16.2593 8.60226 16.5794 8.67719 16.9221C9.37366 19.9704 8.78333 22.7323 7.94672 25.6331Z" fill="#57534D"/>
+<path d="M13.9467 25.6331C13.1308 28.4567 12.3302 32.0928 13.8901 35.0022C14.0529 35.3243 14.2285 35.615 14.4282 35.9124C14.3511 35.5626 14.2975 35.2342 14.2534 34.8899C13.8381 31.812 15.036 29.1794 15.8754 26.1614C16.7838 23.2038 16.8201 19.4588 15.0297 16.7786C14.8397 16.4714 14.6461 16.1998 14.4282 15.9124C14.5269 16.2593 14.6023 16.5794 14.6772 16.9221C15.3737 19.9704 14.7833 22.7323 13.9467 25.6331Z" fill="#57534D"/>
+<path d="M19.9467 25.6331C19.1308 28.4567 18.3302 32.0928 19.8901 35.0022C20.0529 35.3243 20.2285 35.615 20.4282 35.9124C20.3511 35.5626 20.2975 35.2342 20.2534 34.8899C19.8381 31.812 21.036 29.1794 21.8754 26.1614C22.7838 23.2038 22.8201 19.4588 21.0297 16.7786C20.8397 16.4714 20.6461 16.1998 20.4282 15.9124C20.5269 16.2593 20.6023 16.5794 20.6772 16.9221C21.3737 19.9704 20.7833 22.7323 19.9467 25.6331Z" fill="#57534D"/>
+<path d="M25.9467 25.6331C25.1308 28.4567 24.3302 32.0928 25.8901 35.0022C26.0529 35.3243 26.2285 35.615 26.4282 35.9124C26.3511 35.5626 26.2975 35.2342 26.2534 34.8899C25.8381 31.812 27.036 29.1794 27.8754 26.1614C28.7838 23.2038 28.8201 19.4588 27.0297 16.7786C26.8397 16.4714 26.6461 16.1998 26.4282 15.9124C26.5269 16.2593 26.6023 16.5794 26.6772 16.9221C27.3737 19.9704 26.7833 22.7323 25.9467 25.6331Z" fill="#57534D"/>
+</svg>

package/dist/icons/Asap.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Asap;
+type Asap = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Asap: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/Berawan.svelte

@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="24.4998" cy="15.0001" rx="8.00007" ry="8.00007" fill="#74D4FF"/>
+<ellipse cx="31.9998" cy="21.0001" rx="8.00007" ry="8.00007" fill="#74D4FF"/>
+<rect x="-0.00012207" y="16.9999" width="34.0003" height="16.0001" rx="8.00007" fill="#DFF2FE"/>
+<ellipse cx="19.0001" cy="18.4998" rx="8.00007" ry="8.00007" fill="#DFF2FE"/>
+</svg>

package/dist/icons/Berawan.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Berawan;
+type Berawan = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Berawan: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/BerawanTebal.svelte

@@ -0,0 +1,7 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="24.4998" cy="15" rx="8.00007" ry="8.00007" fill="#74D4FF"/>
+<circle cx="9.49988" cy="18.1579" r="9.5" fill="#74D4FF"/>
+<ellipse cx="31.9998" cy="20.9999" rx="8.00007" ry="8.00007" fill="#74D4FF"/>
+<rect x="-0.00012207" y="16.9999" width="34.0003" height="16.0001" rx="8.00007" fill="#DFF2FE"/>
+<ellipse cx="19.0001" cy="18.4998" rx="8.00007" ry="8.00007" fill="#DFF2FE"/>
+</svg>

package/dist/icons/BerawanTebal.svelte.d.ts

@@ -0,0 +1,26 @@
+export default BerawanTebal;
+type BerawanTebal = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BerawanTebal: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/BsArrowDown.svelte

@@ -0,0 +1,15 @@
+<svg
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M12 5V19M12 19L19 12M12 19L5 12"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/dist/icons/BsArrowDown.svelte.d.ts

@@ -0,0 +1,26 @@
+export default BsArrowDown;
+type BsArrowDown = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BsArrowDown: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/BsArrowUp.svelte

@@ -0,0 +1,15 @@
+<svg
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M12 19V5M12 5L5 12M12 5L19 12"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>