@awenovations/aura 0.0.1

package/dist/input/input.svelte

@@ -0,0 +1,112 @@
+<script>import Button from "../button/button.svelte";
+import FormItem, {} from "../form-item/form-item.svelte";
+import Icon from "../icon/icon.svelte";
+import { createEventDispatcher } from "svelte";
+export let type = "text";
+export let value = "";
+export let required = false;
+export let disabled = false;
+export let size = "normal";
+export let showErrors = false;
+export let mode = void 0;
+export let width = void 0;
+export let height = void 0;
+const dispatch = createEventDispatcher();
+function forwardEvent(e) {
+  const event = e;
+  dispatch(e.type, {
+    value,
+    valueAsDate: event.target.valueAsDate,
+    valueAsNumber: event.target.valueAsNumber,
+    innerEvent: event
+  });
+}
+const pickerIcons = {
+  date: "calendar",
+  time: "clock"
+};
+let input = void 0;
+let hasErrorsInternal = false;
+function onInput(e) {
+  value = e.currentTarget["value"];
+  hasErrorsInternal = required && !value || !input?.checkValidity();
+}
+</script>
+
+<FormItem
+	bind:required
+	bind:disabled
+	{width}
+	{height}
+	{size}
+	{mode}
+	error={($$slots.errors || hasErrorsInternal) && showErrors}
+>
+	<slot name="left-icon" slot="left-icon" />
+	<div class="input-container">
+		<input
+			{...$$restProps}
+			class={`aura-input ${$$restProps.class}`}
+			{disabled}
+			{type}
+			{value}
+			bind:this={input}
+			on:change={forwardEvent}
+			on:input={onInput}
+			on:input={forwardEvent}
+			on:focus={forwardEvent}
+			on:blur={forwardEvent}
+			on:keydown={forwardEvent}
+			on:keypress={forwardEvent}
+			on:keyup={forwardEvent}
+			on:focusin={forwardEvent}
+			on:focusout={forwardEvent}
+		/>
+		<div class="extra">
+			<slot name="extra" />
+		</div>
+	</div>
+	<slot name="right-icon" slot="right-icon">
+		{#if pickerIcons[type]}
+			<Button kind="plain-faint" on:click={() => input?.showPicker()}>
+				<Icon name={pickerIcons[type]} />
+			</Button>
+		{/if}
+	</slot>
+	<slot slot="label" />
+</FormItem>
+{#if showErrors}
+	<div class="errors-text">
+		<slot name="errors" />
+	</div>
+{/if}
+
+<style>.aura-input {
+  all: unset;
+  width: 100%;
+  text-align: initial;
+}
+
+.aura-input::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  flex: 1;
+}
+
+.input-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  cursor: text;
+}
+
+.extra {
+  color: var(--aura-color-text-secondary);
+}
+
+.errors-text {
+  font: var(--aura-button-small);
+  color: var(--aura-form-item-error-text-color);
+  font-weight: 300;
+  margin-top: 3px;
+}</style>

package/dist/input/input.svelte.d.ts

@@ -0,0 +1,108 @@
+import { SvelteComponent } from "svelte";
+import { type Mode } from '../form-item/form-item.svelte';
+declare const __propDef: {
+    props: Omit<import("svelte/elements").HTMLInputAttributes, "size" | "class" | "value" | `on:${string}` | "type"> & {
+        type?: "number" | "search" | "time" | "text" | "range" | "file" | "color" | "date" | "datetime-local" | "email" | "hidden" | "month" | "password" | "tel" | "url" | "week";
+        value?: string | number | boolean;
+        size?: any;
+        showErrors?: boolean;
+        mode?: Mode | undefined;
+    };
+    events: {
+        change: CustomEvent<{
+            innerEvent: Event & {
+                target: HTMLInputElement;
+            };
+            value: string;
+            valueAsNumber: number;
+            valueAsDate: number;
+        }>;
+        input: CustomEvent<{
+            innerEvent: Event & {
+                target: HTMLInputElement;
+            };
+            value: string;
+            valueAsNumber: number;
+            valueAsDate: number;
+        }>;
+        focus: CustomEvent<{
+            innerEvent: Event & {
+                target: HTMLInputElement;
+            };
+            value: string;
+            valueAsNumber: number;
+            valueAsDate: number;
+        }>;
+        blur: CustomEvent<{
+            innerEvent: Event & {
+                target: HTMLInputElement;
+            };
+            value: string;
+            valueAsNumber: number;
+            valueAsDate: number;
+        }>;
+        keydown: CustomEvent<{
+            innerEvent: Event & {
+                target: HTMLInputElement;
+            };
+            value: string;
+            valueAsNumber: number;
+            valueAsDate: number;
+        }>;
+        keyup: CustomEvent<{
+            innerEvent: Event & {
+                target: HTMLInputElement;
+            };
+            value: string;
+            valueAsNumber: number;
+            valueAsDate: number;
+        }>;
+        keypress: CustomEvent<{
+            innerEvent: Event & {
+                target: HTMLInputElement;
+            };
+            value: string;
+            valueAsNumber: number;
+            valueAsDate: number;
+        }>;
+        focusin: CustomEvent<{
+            innerEvent: Event & {
+                target: HTMLInputElement;
+            };
+            value: string;
+            valueAsNumber: number;
+            valueAsDate: number;
+        }>;
+        focusout: CustomEvent<{
+            innerEvent: Event & {
+                target: HTMLInputElement;
+            };
+            value: string;
+            valueAsNumber: number;
+            valueAsDate: number;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'left-icon': {
+            slot: string;
+        };
+        extra: {};
+        'right-icon': {
+            slot: string;
+        };
+        default: {
+            slot: string;
+        };
+        errors: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/dist/progress/progress-ring.stories.svelte

@@ -0,0 +1,27 @@
+<script context="module">import "../../app.scss";
+import { progressVariants } from "./props.ts";
+import ProgressRing from "./progress-ring.svelte";
+export const meta = {
+  title: "AURA/Progress Ring",
+  component: ProgressRing,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: progressVariants }
+  }
+};
+</script>
+
+<script>import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+	<ProgressRing {...args} />
+</Template>
+
+<Story name="Default Progress Ring" />
+
+<Story name="Primary Progress Ring" args={{ variant: 'primary' }} />
+
+<Story name="Secondary Progress Ring" args={{ variant: 'secondary' }} />
+
+<Story name="Tertiary Progress Ring" args={{ variant: 'tertiary' }} />

package/dist/progress/progress-ring.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import '../../app.scss';
+export declare const meta: {
+    title: string;
+    component: typeof ProgressRing;
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: string;
+            options: readonly ["primary", "secondary", "tertiary"];
+        };
+    };
+};
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ProgressRingProps = typeof __propDef.props;
+export type ProgressRingEvents = typeof __propDef.events;
+export type ProgressRingSlots = typeof __propDef.slots;
+export default class ProgressRing extends SvelteComponent<ProgressRingProps, ProgressRingEvents, ProgressRingSlots> {
+}
+export {};

package/dist/progress/progress-ring.svelte

@@ -0,0 +1,78 @@
+<script>export let variant;
+</script>
+
+<div
+	class="aura-progress-ring"
+	class:isPrimary={variant === 'primary'}
+	class:isSecondary={variant === 'secondary'}
+	class:isTertiary={variant === 'tertiary'}
+>
+	<svg viewBox="0 0 48 48">
+		<circle class="aura-progress-ring__arc" />
+		<circle class="aura-progress-ring__circle" />
+	</svg>
+</div>
+
+<style>@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.aura-progress-ring {
+  --diameter: var(--aura-progress-ring-diameter);
+  --stroke: var(--aura-progress-ring-stroke);
+  --circle-radius: 24px;
+  --radius-plus-border: calc(var(--circle-radius) - var(--stroke));
+  --circumference: calc(var(--radius-plus-border) * 2 * 3.141592);
+  --arc-size: calc(1 - var(--aura-progress-ring-arc-size));
+  --spin-rate: var(--aura-progress-ring-spin-rate);
+  --transition-time: var(--aura-progress-ring-transition-time);
+  position: relative;
+  width: var(--diameter);
+  height: var(--diameter);
+}
+.aura-progress-ring.isPrimary {
+  --arc-border-color: var(--aura-primary-20);
+  --circle-border-color: var(--aura-primary-50);
+}
+.aura-progress-ring.isSecondary {
+  --arc-border-color: var(--aura-secondary-20);
+  --circle-border-color: var(--aura-secondary-50);
+}
+.aura-progress-ring, .aura-progress-ring.isTertiary {
+  --arc-border-color: var(--aura-tertiary-20);
+  --circle-border-color: var(--aura-tertiary-50);
+}
+.aura-progress-ring svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  animation-duration: var(--spin-rate);
+  animation-name: spin;
+  animation-iteration-count: infinite;
+  animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
+}
+.aura-progress-ring circle {
+  transform: rotate(270deg);
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset var(--transition-time);
+  stroke-linecap: round;
+  r: var(--radius-plus-border);
+  cx: var(--circle-radius);
+  cy: var(--circle-radius);
+  stroke-width: var(--stroke);
+  fill: transparent;
+}
+.aura-progress-ring__arc {
+  stroke: var(--arc-border-color);
+}
+.aura-progress-ring__circle {
+  stroke-dasharray: var(--circumference) var(--circumference);
+  stroke-dashoffset: calc(var(--circumference) * var(--arc-size));
+  stroke: var(--circle-border-color);
+}</style>

package/dist/progress/progress-ring.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type * as Props from './props';
+declare const __propDef: {
+    props: {
+        variant: Props.ProgressVariant | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ProgressRingProps = typeof __propDef.props;
+export type ProgressRingEvents = typeof __propDef.events;
+export type ProgressRingSlots = typeof __propDef.slots;
+export default class ProgressRing extends SvelteComponent<ProgressRingProps, ProgressRingEvents, ProgressRingSlots> {
+}
+export {};

package/dist/progress/props.d.ts

@@ -0,0 +1,2 @@
+export declare const progressVariants: readonly ["primary", "secondary", "tertiary"];
+export type ProgressVariants = (typeof progressVariants)[number];

package/dist/progress/props.js

@@ -0,0 +1 @@
+export const progressVariants = ['primary', 'secondary', 'tertiary'];

package/dist/skeleton/skeleton.stories.svelte

@@ -0,0 +1,22 @@
+<script context="module">import "../../app.scss";
+import Skeleton from "./skeleton.svelte";
+export const meta = {
+  title: "AURA/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  argTypes: {
+    width: { control: "input:number" },
+    height: { control: "input:number" }
+  }
+};
+</script>
+
+<script>import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+	<Skeleton {...args} />
+</Template>
+
+<Story name="Default Skeleton" />
+<Story name="Custom Skeleton" args={{ width: '800px', height: '300px' }} />

package/dist/skeleton/skeleton.stories.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import '../../app.scss';
+export declare const meta: {
+    title: string;
+    component: typeof Skeleton;
+    tags: string[];
+    argTypes: {
+        width: {
+            control: string;
+        };
+        height: {
+            control: string;
+        };
+    };
+};
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SkeletonProps = typeof __propDef.props;
+export type SkeletonEvents = typeof __propDef.events;
+export type SkeletonSlots = typeof __propDef.slots;
+export default class Skeleton extends SvelteComponent<SkeletonProps, SkeletonEvents, SkeletonSlots> {
+}
+export {};

package/dist/skeleton/skeleton.svelte

@@ -0,0 +1,23 @@
+<script>export let width = "200px";
+export let height = "200px";
+</script>
+
+<div class="aura-skeleton" style={`--width:${width}; --height: ${height};`} />
+
+<style>.aura-skeleton {
+  width: var(--width);
+  height: var(--height);
+  border-radius: var(--aura-container-border-radius);
+  background-color: var(--aura-tertiary-40);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+  background-size: 40px 100%;
+  background-repeat: no-repeat;
+  background-position: left -40px top 0;
+  animation: shine 1s ease infinite;
+}
+
+@keyframes shine {
+  to {
+    background-position: right -40px top 0;
+  }
+}</style>

package/dist/skeleton/skeleton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: string;
+        height?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SkeletonProps = typeof __propDef.props;
+export type SkeletonEvents = typeof __propDef.events;
+export type SkeletonSlots = typeof __propDef.slots;
+export default class Skeleton extends SvelteComponent<SkeletonProps, SkeletonEvents, SkeletonSlots> {
+}
+export {};

package/dist/svgs/error-state-dark.svg

@@ -0,0 +1,26 @@
+<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#474A50"/>
+<path d="M76.25 44.25H156.75V88.5C156.75 89.1904 156.19 89.75 155.5 89.75H77.5C76.8096 89.75 76.25 89.1904 76.25 88.5V44.25Z" fill="#A3A4A7" stroke="black" stroke-width="2.5"/>
+<mask id="path-3-inside-1_441_74" fill="white">
+<path d="M75 32C75 30.3431 76.3431 29 78 29H155C156.657 29 158 30.3431 158 32V43H75V32Z"/>
+</mask>
+<path d="M75 32C75 30.3431 76.3431 29 78 29H155C156.657 29 158 30.3431 158 32V43H75V32Z" fill="#DFE0E1"/>
+<path d="M72.5 32C72.5 28.9624 74.9624 26.5 78 26.5H155C158.038 26.5 160.5 28.9624 160.5 32H155.5C155.5 31.7239 155.276 31.5 155 31.5H78C77.7239 31.5 77.5 31.7239 77.5 32H72.5ZM158 43H75H158ZM72.5 43V32C72.5 28.9624 74.9624 26.5 78 26.5V31.5C77.7239 31.5 77.5 31.7239 77.5 32V43H72.5ZM155 26.5C158.038 26.5 160.5 28.9624 160.5 32V43H155.5V32C155.5 31.7239 155.276 31.5 155 31.5V26.5Z" fill="black" mask="url(#path-3-inside-1_441_74)"/>
+<circle cx="83" cy="37" r="2.75" stroke="black" stroke-width="2.5"/>
+<circle cx="93" cy="37" r="2.75" stroke="black" stroke-width="2.5"/>
+<circle cx="103" cy="37" r="2.75" stroke="black" stroke-width="2.5"/>
+<path d="M97.25 74.25H177.75V118.5C177.75 119.19 177.19 119.75 176.5 119.75H98.5C97.8096 119.75 97.25 119.19 97.25 118.5V74.25Z" fill="#FF9797" stroke="black" stroke-width="2.5"/>
+<mask id="path-9-inside-2_441_74" fill="white">
+<path d="M96 62C96 60.3431 97.3431 59 99 59H176C177.657 59 179 60.3431 179 62V73H96V62Z"/>
+</mask>
+<path d="M96 62C96 60.3431 97.3431 59 99 59H176C177.657 59 179 60.3431 179 62V73H96V62Z" fill="#DFE0E1"/>
+<path d="M93.5 62C93.5 58.9624 95.9624 56.5 99 56.5H176C179.038 56.5 181.5 58.9624 181.5 62H176.5C176.5 61.7239 176.276 61.5 176 61.5H99C98.7239 61.5 98.5 61.7239 98.5 62H93.5ZM179 73H96H179ZM93.5 73V62C93.5 58.9624 95.9624 56.5 99 56.5V61.5C98.7239 61.5 98.5 61.7239 98.5 62V73H93.5ZM176 56.5C179.038 56.5 181.5 58.9624 181.5 62V73H176.5V62C176.5 61.7239 176.276 61.5 176 61.5V56.5Z" fill="black" mask="url(#path-9-inside-2_441_74)"/>
+<circle cx="104" cy="67" r="2.75" stroke="black" stroke-width="2.5"/>
+<circle cx="114" cy="67" r="2.75" stroke="black" stroke-width="2.5"/>
+<circle cx="124" cy="67" r="2.75" stroke="black" stroke-width="2.5"/>
+<path d="M114 85L122 93" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M114 93L122 85" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M154 85L162 93" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M154 93L162 85" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M131 109H145" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
+</svg>

package/dist/svgs/error-state-light.svg

@@ -0,0 +1,26 @@
+<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#C3CBCF"/>
+<path d="M76.25 44.25H156.75V88.5C156.75 89.1904 156.19 89.75 155.5 89.75H77.5C76.8096 89.75 76.25 89.1904 76.25 88.5V44.25Z" fill="#DFE0E1" stroke="#2D4B59" stroke-width="2.5"/>
+<mask id="path-3-inside-1_441_16" fill="white">
+<path d="M75 32C75 30.3431 76.3431 29 78 29H155C156.657 29 158 30.3431 158 32V43H75V32Z"/>
+</mask>
+<path d="M75 32C75 30.3431 76.3431 29 78 29H155C156.657 29 158 30.3431 158 32V43H75V32Z" fill="white"/>
+<path d="M72.5 32C72.5 28.9624 74.9624 26.5 78 26.5H155C158.038 26.5 160.5 28.9624 160.5 32H155.5C155.5 31.7239 155.276 31.5 155 31.5H78C77.7239 31.5 77.5 31.7239 77.5 32H72.5ZM158 43H75H158ZM72.5 43V32C72.5 28.9624 74.9624 26.5 78 26.5V31.5C77.7239 31.5 77.5 31.7239 77.5 32V43H72.5ZM155 26.5C158.038 26.5 160.5 28.9624 160.5 32V43H155.5V32C155.5 31.7239 155.276 31.5 155 31.5V26.5Z" fill="#2D4B59" mask="url(#path-3-inside-1_441_16)"/>
+<circle cx="83" cy="37" r="2.75" stroke="#2D4B59" stroke-width="2.5"/>
+<circle cx="93" cy="37" r="2.75" stroke="#2D4B59" stroke-width="2.5"/>
+<circle cx="103" cy="37" r="2.75" stroke="#2D4B59" stroke-width="2.5"/>
+<path d="M97.25 74.25H177.75V118.5C177.75 119.19 177.19 119.75 176.5 119.75H98.5C97.8096 119.75 97.25 119.19 97.25 118.5V74.25Z" fill="#FFC4C4" stroke="#2D4B59" stroke-width="2.5"/>
+<mask id="path-9-inside-2_441_16" fill="white">
+<path d="M96 62C96 60.3431 97.3431 59 99 59H176C177.657 59 179 60.3431 179 62V73H96V62Z"/>
+</mask>
+<path d="M96 62C96 60.3431 97.3431 59 99 59H176C177.657 59 179 60.3431 179 62V73H96V62Z" fill="white"/>
+<path d="M93.5 62C93.5 58.9624 95.9624 56.5 99 56.5H176C179.038 56.5 181.5 58.9624 181.5 62H176.5C176.5 61.7239 176.276 61.5 176 61.5H99C98.7239 61.5 98.5 61.7239 98.5 62H93.5ZM179 73H96H179ZM93.5 73V62C93.5 58.9624 95.9624 56.5 99 56.5V61.5C98.7239 61.5 98.5 61.7239 98.5 62V73H93.5ZM176 56.5C179.038 56.5 181.5 58.9624 181.5 62V73H176.5V62C176.5 61.7239 176.276 61.5 176 61.5V56.5Z" fill="#2D4B59" mask="url(#path-9-inside-2_441_16)"/>
+<circle cx="104" cy="67" r="2.75" stroke="#2D4B59" stroke-width="2.5"/>
+<circle cx="114" cy="67" r="2.75" stroke="#2D4B59" stroke-width="2.5"/>
+<circle cx="124" cy="67" r="2.75" stroke="#2D4B59" stroke-width="2.5"/>
+<path d="M114 85L122 93" stroke="#2D4B59" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M114 93L122 85" stroke="#2D4B59" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M154 85L162 93" stroke="#2D4B59" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M154 93L162 85" stroke="#2D4B59" stroke-width="2.5" stroke-linecap="round"/>
+<path d="M131 109H145" stroke="#2D4B59" stroke-width="2.5" stroke-linecap="round"/>
+</svg>

package/dist/svgs/zero-state-dark.svg

@@ -0,0 +1,9 @@
+<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#474A50"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.119 111.307C113.04 111.86 113 112.425 113 113C113 119.627 118.373 125 125 125C131.627 125 137 119.627 137 113C137 112.425 136.96 111.86 136.881 111.307H166V138C166 139.657 164.657 141 163 141H87C85.3431 141 84 139.657 84 138V111.307H113.119Z" fill="#DFE0E1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M138 112C138 119.18 132.18 125 125 125C117.82 125 112 119.18 112 112C112 111.767 112.006 111.536 112.018 111.307H84L93.5604 83.0389C93.9726 81.8202 95.1159 81 96.4023 81H153.598C154.884 81 156.027 81.8202 156.44 83.0389L166 111.307H137.982C137.994 111.536 138 111.767 138 112Z" fill="#DFE0E1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.098 112.955C137.098 118.502 131.129 124 125 124C118.871 124 112.902 118.502 112.902 112.955C112.902 112.775 112.918 112 112.918 111.419H93L101.161 91.5755C101.513 90.6338 102.489 90 103.587 90H146.413C147.511 90 148.487 90.6338 148.839 91.5755L157 111.419H137.082C137.092 111.596 137.098 112.775 137.098 112.955Z" fill="#84868A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M85.25 111.512V138C85.25 138.966 86.0335 139.75 87 139.75H163C163.966 139.75 164.75 138.966 164.75 138V111.512L155.255 83.4393C155.015 82.7285 154.348 82.25 153.598 82.25H96.4023C95.6519 82.25 94.985 82.7285 94.7446 83.4393L85.25 111.512Z" stroke="black" stroke-width="2.5"/>
+<path d="M98 111C101.937 111 106.185 111 110.745 111C112.621 111 112.621 112.319 112.621 113C112.621 119.627 118.117 125 124.897 125C131.677 125 137.173 119.627 137.173 113C137.173 112.319 137.173 111 139.05 111H164M90.5737 111H93H90.5737Z" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M150.1 58.3027L139 70.7559M124.1 54V70.7559V54ZM98 58.3027L109.1 70.7559L98 58.3027Z" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/svgs/zero-state-light.svg

@@ -0,0 +1,9 @@
+<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#C3CBCF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.119 111.307C113.04 111.86 113 112.425 113 113C113 119.627 118.373 125 125 125C131.627 125 137 119.627 137 113C137 112.425 136.96 111.86 136.881 111.307H166V138C166 139.657 164.657 141 163 141H87C85.3431 141 84 139.657 84 138V111.307H113.119Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M138 112C138 119.18 132.18 125 125 125C117.82 125 112 119.18 112 112C112 111.767 112.006 111.536 112.018 111.307H84L93.5604 83.0389C93.9726 81.8202 95.1159 81 96.4023 81H153.598C154.884 81 156.027 81.8202 156.44 83.0389L166 111.307H137.982C137.994 111.536 138 111.767 138 112Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.098 112.955C137.098 118.502 131.129 124 125 124C118.871 124 112.902 118.502 112.902 112.955C112.902 112.775 112.908 111.596 112.918 111.419H93L101.161 91.5755C101.513 90.6338 102.489 90 103.587 90H146.413C147.511 90 148.487 90.6338 148.839 91.5755L157 111.419H137.082C137.092 111.596 137.098 112.775 137.098 112.955Z" fill="#C3CBCF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M85.25 111.512V138C85.25 138.966 86.0335 139.75 87 139.75H163C163.966 139.75 164.75 138.966 164.75 138V111.512L155.255 83.4393C155.015 82.7285 154.348 82.25 153.598 82.25H96.4023C95.6519 82.25 94.985 82.7285 94.7446 83.4393L85.25 111.512Z" stroke="#2D4B59" stroke-width="2.5"/>
+<path d="M98 111C101.937 111 106.185 111 110.745 111C112.621 111 112.621 112.319 112.621 113C112.621 119.627 118.117 125 124.897 125C131.677 125 137.173 119.627 137.173 113C137.173 112.319 137.173 111 139.05 111H164M90.5737 111H93H90.5737Z" stroke="#2D4B59" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M150.1 58.3027L139 70.7559M124.1 54V70.7559V54ZM98 58.3027L109.1 70.7559L98 58.3027Z" stroke="#2D4B59" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>