noph-ui 0.44.0 → 0.45.0

package/dist/fab/Fab.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+	import '../internal/focus-ring.css'
+	import { pressMorph } from '../press.svelte.js'
+	import Ripple from '../ripple/Ripple.svelte'
+	import Tooltip from '../tooltip/Tooltip.svelte'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
+	import type { FabProps } from './types.js'
+
+	let {
+		variant = 'primary-container',
+		size = 's',
+		shape = 'round',
+		lowered = false,
+		disabled = false,
+		icon,
+		label,
+		element = $bindable(),
+		...attributes
+	}: FabProps = $props()
+
+	const uid = $props.id()
+
+	const isLink = $derived(attributes.href != null && !disabled)
+	const tooltipId = $derived(label && !disabled ? uid : undefined)
+
+	const morph = pressMorph()
+	morph.supersededBy(() => shape)
+
+	const handlePress = () => {
+		if (disabled) return
+		morph.press()
+	}
+
+	const classes = $derived([
+		'np-fab',
+		'np-focus-ring',
+		`np-fab-${variant}`,
+		size,
+		shape,
+		lowered && 'np-fab-lowered',
+		morph.pressed && 'pressed',
+		attributes.class,
+	])
+</script>
+
+{#snippet content()}
+	{#if !disabled}
+		<Ripple forElement={element} />
+	{/if}
+	{#if icon}
+		<span class="np-fab-icon">{@render icon()}</span>
+	{/if}
+{/snippet}
+
+{#if isLink}
+	<a
+		{...attributes}
+		onclick={(event) => {
+			handlePress()
+			attributes.onclick?.(event)
+		}}
+		bind:this={element}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
+		aria-label={label || attributes['aria-label']}
+		class={classes}
+	>
+		{@render content()}
+	</a>
+{:else}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		onclick={(event) => {
+			handlePress()
+			attributes.onclick?.(event)
+		}}
+		bind:this={element}
+		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		interestfor={tooltipId ?? attributes['interestfor']}
+		aria-label={label || attributes['aria-label']}
+		type={(attributes['type'] as HTMLButtonAttributes['type']) ?? 'button'}
+		{disabled}
+		class={classes}
+	>
+		{@render content()}
+	</button>
+{/if}
+
+{#if tooltipId}
+	<Tooltip id={tooltipId}>{label}</Tooltip>
+{/if}
+
+<style>
+	.np-fab {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		border-width: 0;
+		cursor: pointer;
+		font: inherit;
+		text-decoration: none;
+		-webkit-tap-highlight-color: transparent;
+		box-shadow: var(--np-fab-elevation, var(--np-elevation-3));
+		background-color: var(--np-fab-container-color, var(--_container-color));
+		color: var(--np-fab-icon-color, var(--_icon-color));
+		--np-ripple-hover-color: var(--np-fab-icon-color, var(--_icon-color));
+		--np-ripple-pressed-color: var(--np-fab-icon-color, var(--_icon-color));
+	}
+
+	/*
+	 * `round` is fully rounded and `square` is the smaller radius, the same way Button reads.
+	 * The FAB box is always square, so `50%` renders identically to `--np-shape-corner-full`
+	 * (9999px) at rest. It matters for the pressed transition below: animating `border-radius`
+	 * from a huge fixed value spends nearly the whole transition on radii that still render as
+	 * fully round, so the morph never becomes visible during a normal, brief click.
+	 */
+	.round {
+		border-radius: var(--np-fab-shape, 50%);
+	}
+	.square {
+		border-radius: var(--np-fab-shape, var(--_square-radius));
+	}
+
+	/*
+	 * A press morphs the corner towards the other shape. `:active` alone drops the moment the
+	 * pointer lifts, which on a normal click is long before the morph has played, so the short
+	 * `pressed` class holds the shape until the whole round trip is visible, the way Button does
+	 * it. Both are gated on the motion preference, since without the transition below this is
+	 * only an instant snap.
+	 */
+	@media (prefers-reduced-motion: no-preference) {
+		.round:not(:disabled):is(:active, .pressed) {
+			border-radius: var(--np-fab-pressed-shape, var(--_square-radius));
+		}
+		.square:not(:disabled):is(:active, .pressed) {
+			border-radius: var(--np-fab-pressed-shape, 50%);
+		}
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-fab {
+			transition:
+				border-radius var(--np-motion-expressive-default-spatial),
+				box-shadow var(--np-motion-expressive-fast-effects),
+				background-color var(--np-motion-expressive-fast-effects);
+		}
+	}
+
+	/*
+	 * M3's three recommended sizes, matching the extended FAB's. The 40px FAB it used to also
+	 * define is gone: M3 Expressive no longer recommends it. Each square radius is the shape token
+	 * that goes with the size, large, large-increased and extra-large.
+	 */
+	.s {
+		width: 3.5rem;
+		height: 3.5rem;
+		--_square-radius: 1rem;
+		--np-icon-size: 1.5rem;
+	}
+	.m {
+		width: 5rem;
+		height: 5rem;
+		--_square-radius: 1.25rem;
+		--np-icon-size: 1.75rem;
+	}
+	.l {
+		width: 6rem;
+		height: 6rem;
+		--_square-radius: 1.75rem;
+		--np-icon-size: 2.25rem;
+	}
+
+	/*
+	 * M3's colour styles, named after the tokens they map to. The tone styles are the stronger
+	 * pair, the container styles the softer one. The surface style M3 Expressive dropped is gone.
+	 */
+	.np-fab-primary {
+		--_container-color: var(--np-color-primary);
+		--_icon-color: var(--np-color-on-primary);
+	}
+	.np-fab-secondary {
+		--_container-color: var(--np-color-secondary);
+		--_icon-color: var(--np-color-on-secondary);
+	}
+	.np-fab-tertiary {
+		--_container-color: var(--np-color-tertiary);
+		--_icon-color: var(--np-color-on-tertiary);
+	}
+	.np-fab-primary-container {
+		--_container-color: var(--np-color-primary-container);
+		--_icon-color: var(--np-color-on-primary-container);
+	}
+	.np-fab-secondary-container {
+		--_container-color: var(--np-color-secondary-container);
+		--_icon-color: var(--np-color-on-secondary-container);
+	}
+	.np-fab-tertiary-container {
+		--_container-color: var(--np-color-tertiary-container);
+		--_icon-color: var(--np-color-on-tertiary-container);
+	}
+
+	.np-fab-lowered {
+		box-shadow: var(--np-fab-elevation, var(--np-elevation-1));
+	}
+
+	@media (hover: hover) {
+		.np-fab:not(:disabled):hover {
+			box-shadow: var(--np-fab-elevation, var(--np-elevation-3));
+			background-color: color-mix(
+				in srgb,
+				var(--np-fab-icon-color, var(--_icon-color)) 8%,
+				var(--np-fab-container-color, var(--_container-color))
+			);
+		}
+		.np-fab-lowered:not(:disabled):hover {
+			box-shadow: var(--np-fab-elevation, var(--np-elevation-2));
+		}
+	}
+
+	.np-fab:disabled {
+		cursor: default;
+		box-shadow: none;
+		background-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
+		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
+	}
+
+	/*
+	 * The icon is never a hit target, matching `Button`'s. Otherwise swapping it out from under
+	 * the pointer, which `FabMenu`'s trigger does when it opens, moves the pointer to a different
+	 * element; the browser hands the button fresh interest on the way and reopens its tooltip.
+	 */
+	.np-fab-icon {
+		display: flex;
+		fill: currentColor;
+		pointer-events: none;
+	}
+</style>

package/dist/fab/Fab.svelte.d.ts

@@ -0,0 +1,5 @@
+import '../internal/focus-ring.css';
+import type { FabProps } from './types.ts';
+declare const Fab: import("svelte").Component<FabProps, {}, "element">;
+type Fab = ReturnType<typeof Fab>;
+export default Fab;

package/dist/fab/FabMenu.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+	import CloseIcon from '../icons/CloseIcon.svelte'
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
+	import { PRESS_DURATION } from '../press.svelte.js'
+	import { onMount } from 'svelte'
+	import { MediaQuery } from 'svelte/reactivity'
+	import Fab from './Fab.svelte'
+	import type { FabMenuProps } from './types.js'
+
+	let {
+		label = 'Actions',
+		icon,
+		closeIcon,
+		children,
+		variant = 'primary-container',
+		size = 's',
+		placement = 'block-start',
+		closeOnSelect = true,
+		open = $bindable(false),
+		element = $bindable(),
+		...attributes
+	}: FabMenuProps = $props()
+
+	const uid = $props.id()
+	const menuId = `np-fab-menu-${uid}`
+	/*
+	 * One anchor name per instance. A fixed name in the stylesheet is shared by every FabMenu on
+	 * the page, and a duplicated anchor name resolves to the last one in tree order, so every menu
+	 * would open on the last trigger.
+	 */
+	const anchorName = `--np-fab-menu-${uid}`
+
+	let menuElement: HTMLDivElement | undefined = $state()
+	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
+
+	// Declaring `role="menu"` means owing the keyboard model that goes with it: one tab stop, the
+	// arrows moving between actions. The same attachments the toolbar and the bars use.
+	const ITEMS = 'button, a[href], [role="menuitem"]'
+	const attach = rovingTabindex(ITEMS)
+	const arrowHandler = $derived(
+		arrowKeyNav(ITEMS, placement.startsWith('inline') ? 'horizontal' : 'vertical'),
+	)
+
+	const controller = popoverController(() => menuElement)
+
+	export const show = () => controller.show()
+
+	export const close = () => {
+		clearTimeout(closeTimeout)
+		controller.close()
+	}
+
+	/*
+	 * An item runs its own press animation on click, the corner morph a Button or a FAB does. The
+	 * menu is a popover, so closing it means `display: none`, which would cut that off before a
+	 * frame of it is seen. Holding the close for the length of the press lets the item finish.
+	 * Matched to Button's own timer, and skipped entirely when there is no animation to wait for.
+	 */
+	let closeTimeout: ReturnType<typeof setTimeout>
+
+	const closeAfterPress = () => {
+		if (reducedMotion.current) {
+			close()
+			return
+		}
+		clearTimeout(closeTimeout)
+		closeTimeout = setTimeout(close, PRESS_DURATION)
+	}
+
+	onMount(() => {
+		return () => {
+			clearTimeout(closeTimeout)
+		}
+	})
+
+	syncOpenEffect(
+		() => menuElement,
+		() => open,
+		show,
+		close,
+	)
+</script>
+
+<!--
+	Both icons stay mounted and turn into each other. Swapping one for the other cannot animate:
+	the icon arriving has no previous state to move from, so it can only appear.
+-->
+{#snippet triggerIcon()}
+	<span class="np-fab-menu-icons" aria-hidden="true">
+		<span class="np-fab-menu-icon" class:np-fab-menu-icon-away={open}>
+			{#if icon}{@render icon()}{/if}
+		</span>
+		<span class="np-fab-menu-icon" class:np-fab-menu-icon-away={!open}>
+			{#if closeIcon}{@render closeIcon()}{:else}<CloseIcon />{/if}
+		</span>
+	</span>
+{/snippet}
+
+<div
+	{...attributes}
+	bind:this={element}
+	style="anchor-name: {anchorName}; {attributes.style ?? ''}"
+	class={['np-fab-menu', `np-fab-menu-${placement}`, attributes.class]}
+>
+	<!--
+		The tooltip is dropped while the menu is open, and the name given directly instead. A
+		tooltip is a `hint` popover, which the browser closes when the menu's `auto` popover opens,
+		and the trigger still holds interest at that point, so it would come straight back and sit
+		over the open menu. There is nothing to hint at anyway once the actions are on screen.
+	-->
+	<Fab
+		{variant}
+		{size}
+		{label}
+		shape={open ? 'square' : 'round'}
+		command="toggle-popover"
+		commandfor={menuId}
+		aria-haspopup="menu"
+		aria-expanded={open}
+		class="np-fab-menu-trigger"
+		icon={triggerIcon}
+	/>
+
+	<div
+		bind:this={menuElement}
+		id={menuId}
+		style="position-anchor: {anchorName}"
+		popover="auto"
+		role="menu"
+		tabindex="-1"
+		aria-label={label}
+		class="np-fab-menu-list"
+		{@attach attach}
+		onkeydown={arrowHandler}
+		onclick={(event) => {
+			// Picking an action closes the menu. `closeOnSelect={false}` keeps it open for a menu
+			// whose items toggle something instead of navigating away.
+			if (!closeOnSelect) return
+			const target = event.target as HTMLElement
+			if (target.closest(ITEMS)) closeAfterPress()
+		}}
+		ontoggle={(event) => {
+			open = event.newState === 'open'
+		}}
+	>
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+	.np-fab-menu {
+		position: relative;
+		display: inline-flex;
+	}
+
+	/* One grid cell holds both icons, so they sit on top of each other rather than side by side. */
+	.np-fab-menu-icons {
+		display: grid;
+	}
+	.np-fab-menu-icon {
+		grid-area: 1 / 1;
+		display: flex;
+	}
+	.np-fab-menu-icon-away {
+		opacity: 0;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-fab-menu-icon {
+			transition:
+				opacity var(--np-motion-expressive-fast-effects),
+				rotate var(--np-motion-expressive-default-spatial);
+		}
+		/*
+		 * Both turn the same way, so the pair reads as one icon rotating rather than two crossing
+		 * over. The close icon spends its hidden time at -45deg, where an X sits square like the
+		 * plus it replaces, so opening rotates the plus away and the X into place behind it.
+		 */
+		.np-fab-menu-icon-away {
+			rotate: -45deg;
+		}
+	}
+
+	.np-fab-menu-list {
+		position: absolute;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: none;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 0.5rem;
+		overflow: visible;
+	}
+
+	/*
+	 * `display` only while open. Setting it on the base rule would beat the user agent's
+	 * `display: none` for a closed popover, because author styles win over user agent styles
+	 * whatever the specificity, leaving an invisible sheet over the page that swallows clicks.
+	 */
+	.np-fab-menu-list:popover-open {
+		display: flex;
+	}
+
+	/* Which side the items fan out to, and which end they stack from. */
+	.np-fab-menu-block-start .np-fab-menu-list {
+		position-area: block-start;
+		margin-block-end: 0.75rem;
+		flex-direction: column-reverse;
+	}
+	.np-fab-menu-block-end .np-fab-menu-list {
+		position-area: block-end;
+		margin-block-start: 0.75rem;
+	}
+	.np-fab-menu-inline-start .np-fab-menu-list {
+		position-area: inline-start;
+		margin-inline-end: 0.75rem;
+		flex-direction: row-reverse;
+		align-items: center;
+	}
+	.np-fab-menu-inline-end .np-fab-menu-list {
+		position-area: inline-end;
+		margin-inline-start: 0.75rem;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	/*
+	 * The items rise into place one after another. Keyframes rather than a transition: a popover
+	 * goes from `display: none` to shown in one step, and a transition has no start value to run
+	 * from, so the items would simply appear. An animation runs when the element becomes displayed.
+	 *
+	 * The whole stagger fits one window, `--_stagger-window`, however many actions there are. That
+	 * is what `sibling-count()` buys over a fixed step: eight actions land in the same time two do,
+	 * each one just following the last a little sooner, rather than the menu taking four times as
+	 * long to finish arriving. Item one starts at 0ms, so the action nearest the trigger moves
+	 * first, and the last one starts as the window closes.
+	 */
+	@media (prefers-reduced-motion: no-preference) {
+		.np-fab-menu-list:popover-open > :global(*) {
+			--_stagger-window: 210ms;
+			--_delay: calc((sibling-index() - 1) / sibling-count() * var(--_stagger-window));
+			animation: np-fab-menu-item-in var(--np-motion-expressive-default-spatial) both;
+			animation-delay: var(--_delay);
+		}
+	}
+
+	@keyframes np-fab-menu-item-in {
+		from {
+			opacity: 0;
+			translate: 0 0.5rem;
+		}
+	}
+</style>

package/dist/fab/FabMenu.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { FabMenuProps } from './types.ts';
+declare const FabMenu: import("svelte").Component<FabMenuProps, {
+    show: () => void;
+    close: () => void;
+}, "element" | "open">;
+type FabMenu = ReturnType<typeof FabMenu>;
+export default FabMenu;

package/dist/fab/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ExtendedFab } from './ExtendedFab.svelte';
+export { default as Fab } from './Fab.svelte';
+export { default as FabMenu } from './FabMenu.svelte';

package/dist/fab/index.js

@@ -0,0 +1,3 @@
+export { default as ExtendedFab } from './ExtendedFab.svelte';
+export { default as Fab } from './Fab.svelte';
+export { default as FabMenu } from './FabMenu.svelte';

package/dist/fab/types.d.ts

@@ -0,0 +1,58 @@
+import type { ButtonElement } from '../button/types.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export type FabElement = ButtonElement;
+interface BaseFabProps extends HTMLAttributes<FabElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+    element?: FabElement;
+    /**
+     * Colour style, named after the tokens it maps to. The three tone styles are the stronger
+     * pair, the three container styles the softer one. M3 Expressive no longer recommends a
+     * surface-coloured FAB, so there is no `surface`.
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container';
+    /**
+     * 56, 80 and 96 pixels, the same three `Fab` and `ExtendedFab` share. `s` is M3's baseline FAB
+     * and the default. The 40 pixel FAB is not here: M3 Expressive no longer recommends it.
+     */
+    size?: 's' | 'm' | 'l';
+    shape?: 'round' | 'square';
+    lowered?: boolean;
+    disabled?: boolean | null;
+    type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
+}
+export interface FabProps extends BaseFabProps {
+    icon?: Snippet;
+    /**
+     * A FAB shows no text, so its accessible name has to come from somewhere. Sets both
+     * `aria-label` and a plain tooltip, the way `Button` treats `title`.
+     */
+    label?: string;
+}
+export interface ExtendedFabProps extends BaseFabProps {
+    icon?: Snippet;
+    /** Visible text. An extended FAB is named by it, so it needs no `aria-label`. */
+    label?: string;
+    /**
+     * Collapses to an icon-only FAB, animating the width. Drive it from a scroll or a media query
+     * to get M3's collapsing FAB.
+     */
+    collapsed?: boolean;
+}
+export interface FabMenuProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the trigger and the menu. The trigger shows no text. */
+    label?: string;
+    /** Trigger icon while the menu is closed. */
+    icon?: Snippet;
+    /** Trigger icon while the menu is open. Defaults to a close icon. */
+    closeIcon?: Snippet;
+    variant?: FabProps['variant'];
+    size?: FabProps['size'];
+    /** Which side the items fan out to. */
+    placement?: 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
+    /** Bindable. Whether the menu is open. */
+    open?: boolean;
+    /** Closes the menu when an action is picked, which is what M3 does. */
+    closeOnSelect?: boolean;
+    element?: HTMLDivElement;
+}
+export {};

package/dist/fab/types.js

@@ -0,0 +1 @@
+export {};

package/dist/icons/ArrowBackIcon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	let {
+		height = 24,
+		width = 24,
+	}: {
+		height?: number
+		width?: number
+	} = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {height} viewBox="0 -960 960 960" {width}
+	><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" /></svg
+>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    height?: number;
+    width?: number;
+};
+declare const ArrowBackIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArrowBackIcon = ReturnType<typeof ArrowBackIcon>;
+export default ArrowBackIcon;

package/dist/icons/ChevronDownIcon.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
+	><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" /></svg
+>

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

@@ -0,0 +1,26 @@
+export default ChevronDownIcon;
+type ChevronDownIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ChevronDownIcon: $$__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/SearchIcon.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	let {
+		height = 24,
+		width = 24,
+	}: {
+		height?: number
+		width?: number
+	} = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {height} viewBox="0 -960 960 960" {width}
+	><path
+		d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"
+	/></svg
+>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    height?: number;
+    width?: number;
+};
+declare const SearchIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchIcon = ReturnType<typeof SearchIcon>;
+export default SearchIcon;

package/dist/icons/index.d.ts

@@ -1,8 +1,11 @@
+export { default as ArrowBackIcon } from './ArrowBackIcon.svelte';
 export { default as ArrowDropDownIcon } from './ArrowDropDownIcon.svelte';
 export { default as CalendarToday } from './CalendarToday.svelte';
 export { default as CheckIcon } from './CheckIcon.svelte';
+export { default as ChevronDownIcon } from './ChevronDownIcon.svelte';
 export { default as ChevronLeftIcon } from './ChevronLeftIcon.svelte';
 export { default as ChevronRightIcon } from './ChevronRightIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as SearchIcon } from './SearchIcon.svelte';

package/dist/icons/index.js

@@ -1,8 +1,11 @@
+export { default as ArrowBackIcon } from './ArrowBackIcon.svelte';
 export { default as ArrowDropDownIcon } from './ArrowDropDownIcon.svelte';
 export { default as CalendarToday } from './CalendarToday.svelte';
 export { default as CheckIcon } from './CheckIcon.svelte';
+export { default as ChevronDownIcon } from './ChevronDownIcon.svelte';
 export { default as ChevronLeftIcon } from './ChevronLeftIcon.svelte';
 export { default as ChevronRightIcon } from './ChevronRightIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as SearchIcon } from './SearchIcon.svelte';