diff --git a/.gitignore b/.gitignore
index bf65c2d..aa17f13 100755
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,7 @@ yarn.lock
 node_modules
 dist
 analytics.txt
-package-lock.json
+*.tsbuildinfo
 
 /**/*/.DS_STORE
 /**/*/node_modules
diff --git a/common/position.ts b/common/position.ts
deleted file mode 100644
index e3788b5..0000000
--- a/common/position.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export type Placement = 'top' | 'bottom' | 'left' | 'right';
-
-export function calculate(triggerElement: HTMLElement, popoverElement: HTMLElement, scrollX: number = window.scrollX, scrollY: number = window.scrollY): { placement: Placement; position: { top: number; left: number } } {
-  let triggerRect;
-  let popoverRect;
-
-  if (triggerElement) {
-    triggerRect = triggerElement.getBoundingClientRect();
-  }
-
-  if (popoverElement) {
-    popoverRect = popoverElement.getBoundingClientRect();
-  }
-
-  const spaceAbove = triggerRect.top;
-  const spaceBelow = window.innerHeight - triggerRect.bottom;
-  const spaceLeft = triggerRect.left;
-  const spaceRight = window.innerWidth - triggerRect.right;
-
-  const viewportHeightThreshold = window.innerHeight * 0.4;
-  const viewportWidthThreshold = window.innerWidth * 0.4;
-
-  let placement: Placement = 'bottom';
-  let top = 0;
-  let left = 0;
-  if (!popoverRect) {
-    return { placement, position: { top: 0, left: 0 } };
-  }
-
-  if (spaceAbove >= viewportHeightThreshold && spaceAbove >= popoverRect.height) {
-    placement = 'top';
-    top = triggerRect.top + scrollY - popoverRect.height;
-    left = triggerRect.left + scrollX + (triggerRect.width - popoverRect.width) / 2;
-  } else if (spaceBelow >= viewportHeightThreshold && spaceBelow >= popoverRect.height) {
-    placement = 'bottom';
-    top = triggerRect.bottom + scrollY;
-    left = triggerRect.left + scrollX + (triggerRect.width - popoverRect.width) / 2;
-  } else if (spaceRight >= viewportWidthThreshold && spaceRight >= popoverRect.width) {
-    placement = 'right';
-    top = triggerRect.top + scrollY + (triggerRect.height - popoverRect.height) / 2;
-    left = triggerRect.right + scrollX;
-  } else if (spaceLeft >= viewportWidthThreshold && spaceLeft >= popoverRect.width) {
-    placement = 'left';
-    top = triggerRect.top + scrollY + (triggerRect.height - popoverRect.height) / 2;
-    left = triggerRect.left + scrollX - popoverRect.width;
-  } else {
-    placement = 'bottom';
-    top = triggerRect.bottom + scrollY;
-    left = triggerRect.left + scrollX + (triggerRect.width - popoverRect.width) / 2;
-  }
-
-  if (left < 0) left = 0;
-  else if (left + popoverRect.width > window.innerWidth) left = window.innerWidth - popoverRect.width;
-
-  if (top < 0) top = 0;
-  else if (top + popoverRect.height > window.innerHeight + scrollY) top = window.innerHeight + scrollY - popoverRect.height;
-
-  return { placement, position: { top, left } };
-}
diff --git a/common/utilities.ts b/common/utilities.ts
deleted file mode 100755
index 201a8da..0000000
--- a/common/utilities.ts
+++ /dev/null
@@ -1,382 +0,0 @@
-const hasOwn = {}.hasOwnProperty;
-const localhostDomainRE = /^localhost[\:?\d]*(?:[^\:?\d]\S*)?$/;
-const nonLocalhostDomainRE = /^[^\s\.]+\.\S{2,}$/;
-const protocolAndDomainRE = /^(?:\w+:)?\/\/(\S+)$/;
-
-export function noop() {
-  return null;
-}
-
-export function pluralize(text: string, count: number) {
-  return count > 1 || count === 0 ? `${text}s` : text;
-}
-
-export function getOrdinalNumber(n) {
-  return n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');
-}
-
-// NOTE(jimmylee)
-// Stolen from: https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/deepEqual.ts
-export function deepEqual(x: any, y: any): boolean {
-  //@ts-ignore
-  return x && y && typeof x === 'object' && typeof y === 'object'
-    ? Object.keys(x).length === Object.keys(y).length &&
-        //@ts-ignore
-        Object.keys(x).reduce((isEqual, key) => isEqual && deepEqual(x[key], y[key]), true)
-    : x === y;
-}
-
-export function getDomainFromEmailWithoutAnySubdomain(email: string): string {
-  const atIndex = email.lastIndexOf('@');
-  if (atIndex === -1) {
-    return '';
-  }
-
-  const domain = email.slice(atIndex + 1);
-  const domainParts = domain.split('.');
-
-  if (domainParts.length < 2) {
-    return '';
-  }
-
-  const mainDomain = domainParts.slice(-2).join('.');
-  return mainDomain;
-}
-
-export function onHandleThemeChange(className?: string) {
-  const body = document.body;
-
-  body.classList.forEach((existingClass) => {
-    if (existingClass.startsWith('theme-')) {
-      body.classList.remove(existingClass);
-    }
-  });
-
-  if (className) {
-    body.classList.add(className);
-  } else {
-    body.classList.add('theme-light');
-  }
-}
-
-export function onHandleFontChange(className?: string) {
-  const body = document.body;
-
-  if (className) {
-    body.classList.forEach((existingClass) => {
-      if (existingClass.startsWith('font-')) {
-        body.classList.remove(existingClass);
-      }
-    });
-
-    body.classList.add(className);
-    return;
-  }
-
-  body.classList.forEach((existingClass) => {
-    if (existingClass.startsWith('font-')) {
-      body.classList.remove(existingClass);
-    }
-  });
-}
-
-export function formatDollars(value: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(value);
-}
-
-export function calculatePositionWithGutter(rect, objectWidth, viewportWidth, gutter = 24) {
-  const right = viewportWidth - rect.right;
-  const top = rect.top + rect.height + gutter;
-  const side = right + objectWidth >= viewportWidth ? 'left' : 'right';
-  const adjustedRight = side === 'left' ? viewportWidth - objectWidth - gutter : right;
-  return { top, right: adjustedRight, side };
-}
-
-export function calculatePositionWithGutterById(id, objectWidth, viewportWidth, gutter?) {
-  let rect;
-  if (id) {
-    const el = document.getElementById(id);
-    if (el) {
-      rect = el.getBoundingClientRect();
-    }
-  }
-  return calculatePositionWithGutter(rect, objectWidth, viewportWidth, gutter);
-}
-
-export function leftPad(input, length) {
-  const zerosNeeded = length - input.length;
-  if (zerosNeeded <= 0) {
-    return input;
-  }
-
-  const zeros = '0'.repeat(zerosNeeded);
-
-  return zeros + input;
-}
-
-export function toDateISOString(data: string) {
-  const date = new Date(data);
-  const dayOfWeek = date.toLocaleDateString('en-US', {
-    weekday: 'long',
-  });
-  const month = date.toLocaleDateString('en-US', {
-    month: 'long',
-  });
-  const dayOfMonth = getOrdinalNumber(date.getDate());
-  const year = date.getFullYear();
-
-  const formattedDate = `${dayOfWeek}, ${month} ${dayOfMonth}, ${year}`;
-
-  return formattedDate;
-}
-
-export function elide(string, length = 140, emptyState = '...') {
-  if (isEmpty(string)) {
-    return emptyState;
-  }
-
-  if (string.length < length) {
-    return string.trim();
-  }
-
-  return `${string.substring(0, length)}...`;
-}
-
-export function bytesToSize(bytes: number, decimals: number = 2) {
-  if (bytes === 0) return '0 Bytes';
-
-  const k = 1000;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${(bytes / Math.pow(k, i)).toFixed(dm)} ${sizes[i]}`;
-}
-
-export function isEmpty(text: any) {
-  // NOTE(jimmylee):
-  // If a number gets passed in, it isn't considered empty for zero.
-  if (text === 0) {
-    return false;
-  }
-
-  if (!text) {
-    return true;
-  }
-
-  if (typeof text === 'object') {
-    return true;
-  }
-
-  if (text.length === 0) {
-    return true;
-  }
-
-  text = text.toString();
-
-  return Boolean(!text.trim());
-}
-
-export function createSlug(text: any) {
-  if (isEmpty(text)) {
-    return 'untitled';
-  }
-
-  const a = 'æøåàáäâèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;';
-  const b = 'aoaaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------';
-  const p = new RegExp(a.split('').join('|'), 'g');
-
-  return text
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, '-') // Replace spaces with -
-    .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special chars
-    .replace(/&/g, '-and-') // Replace & with 'and'
-    .replace(/[^\w\-]+/g, '') // Remove all non-word chars
-    .replace(/\-\-+/g, '-') // Replace multiple - with single -
-    .replace(/^-+/, '') // Trim - from start of text
-    .replace(/-+$/, ''); // Trim - from end of text
-}
-
-export function isUrl(string: any) {
-  if (typeof string !== 'string') {
-    return false;
-  }
-
-  let match = string.match(protocolAndDomainRE);
-  if (!match) {
-    return false;
-  }
-
-  let everythingAfterProtocol = match[1];
-  if (!everythingAfterProtocol) {
-    return false;
-  }
-
-  if (localhostDomainRE.test(everythingAfterProtocol) || nonLocalhostDomainRE.test(everythingAfterProtocol)) {
-    return true;
-  }
-
-  return false;
-}
-
-export function debounce<Args extends unknown[]>(fn: (...args: Args) => void, delay: number) {
-  let timeoutID: number | undefined;
-  let lastArgs: Args | undefined;
-
-  const run = () => {
-    if (lastArgs) {
-      fn(...lastArgs);
-      lastArgs = undefined;
-    }
-  };
-
-  const debounced = (...args: Args) => {
-    clearTimeout(timeoutID);
-    lastArgs = args;
-    timeoutID = window.setTimeout(run, delay);
-  };
-
-  debounced.flush = () => {
-    clearTimeout(timeoutID);
-  };
-
-  return debounced;
-}
-
-export function timeAgo(dateInput: Date | string | number): string {
-  const date = new Date(dateInput);
-  const now = new Date();
-  const secondsPast = (now.getTime() - date.getTime()) / 1000;
-
-  if (secondsPast < 0 || isNaN(secondsPast)) {
-    return '[INVALID]';
-  }
-
-  if (secondsPast < 60) {
-    return 'Just now';
-  } else if (secondsPast < 3600) {
-    const minutes = Math.floor(secondsPast / 60);
-    return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
-  } else if (secondsPast < 86400) {
-    const hours = Math.floor(secondsPast / 3600);
-    return `${hours} hour${hours > 1 ? 's' : ''} ago`;
-  } else if (secondsPast < 604800) {
-    const days = Math.floor(secondsPast / 86400);
-    return `${days} day${days > 1 ? 's' : ''} ago`;
-  }
-
-  const formattedDate = date.toLocaleDateString('en-US', {
-    month: '2-digit',
-    day: '2-digit',
-    year: 'numeric',
-  });
-
-  return formattedDate;
-}
-
-export function classNames(...args: any[]): string {
-  let classes: string[] = [];
-
-  for (let i = 0; i < arguments.length; i++) {
-    let arg = arguments[i];
-    if (!arg) continue;
-
-    let argType = typeof arg;
-
-    if (argType === 'string' || argType === 'number') {
-      classes.push(arg);
-    } else if (Array.isArray(arg)) {
-      if (arg.length) {
-        let inner = classNames.apply(null, arg);
-        if (inner) {
-          classes.push(inner);
-        }
-      }
-    } else if (argType === 'object') {
-      if (arg.toString !== Object.prototype.toString) {
-        classes.push(arg.toString());
-      } else {
-        for (let key in arg) {
-          if (hasOwn.call(arg, key) && arg[key]) {
-            classes.push(key);
-          }
-        }
-      }
-    }
-  }
-
-  return classes.join(' ');
-}
-
-export async function generateNonce() {
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  let result = '';
-  const charactersLength = characters.length;
-  for (let i = 0; i < 8; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
-
-export function filterUndefined(obj) {
-  const res = {};
-  Object.keys(obj)
-    .filter((k) => obj[k] !== undefined)
-    .forEach((k) => (res[k] = obj[k]));
-  return res;
-}
-
-export const isFocusableElement = (element: EventTarget | null): element is HTMLElement => {
-  if (!element || !(element instanceof HTMLElement)) {
-    return false;
-  }
-
-  const focusableSelectors = ['a[href]', 'button', 'input', 'select', 'textarea', '[tabindex]:not([tabindex="-1"])', '[contenteditable="true"]'];
-
-  return element.matches(focusableSelectors.join(', '));
-};
-
-export const findNextFocusable = (element: Element | null, direction: 'next' | 'previous' = 'next'): HTMLElement | null => {
-  if (!element) return null;
-
-  const focusableSelectors = ['a[href]', 'button', 'input', 'select', 'textarea', '[tabindex]:not([tabindex="-1"])', '[contenteditable="true"]'];
-
-  const focusableElements = Array.from(document.querySelectorAll<HTMLElement>(focusableSelectors.join(', ')));
-
-  const currentIndex = focusableElements.indexOf(element as HTMLElement);
-
-  if (currentIndex !== -1) {
-    const nextIndex = direction === 'next' ? (currentIndex + 1) % focusableElements.length : (currentIndex - 1 + focusableElements.length) % focusableElements.length;
-
-    return focusableElements[nextIndex];
-  }
-
-  return null;
-};
-
-export const findFocusableDescendant = (container: Element | null, currentFocused: Element | null = null, direction: 'next' | 'previous' = 'next'): HTMLElement | null => {
-  if (!container) return null;
-
-  const focusableElements = Array.from(container.querySelectorAll<HTMLElement>('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]'));
-
-  if (focusableElements.length === 0) return null;
-
-  let index = 0;
-  if (currentFocused) {
-    const currentIndex = focusableElements.indexOf(currentFocused as HTMLElement);
-    if (currentIndex !== -1) {
-      index = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
-    }
-  }
-
-  if (index >= 0 && index < focusableElements.length) {
-    return focusableElements[index];
-  }
-
-  return null;
-};
diff --git a/components/Accordion.tsx b/components/Accordion.tsx
deleted file mode 100644
index e3c4c8e..0000000
--- a/components/Accordion.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import styles from '@components/Accordion.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import Row from '@components/Row';
-
-interface AccordionProps {
-  defaultValue?: boolean;
-  title: string;
-  children?: React.ReactNode;
-}
-
-const Accordion: React.FC<AccordionProps> = ({ defaultValue = false, title, children }) => {
-  const [show, setShow] = React.useState<boolean>(defaultValue);
-  const accordionRef = React.useRef<HTMLDivElement | null>(null);
-
-  const toggleShow = (): void => {
-    setShow((prevShow) => !prevShow);
-  };
-
-  return (
-    <>
-      <Row ref={accordionRef} tabIndex={0} role="button" onClick={toggleShow} aria-expanded={show}>
-        <div className={Utilities.classNames(styles.flex, show ? styles.active : undefined)}>
-          <span className={styles.icon}>{show ? '▾' : '▸'}</span>
-          <span className={styles.content}>{title}</span>
-        </div>
-      </Row>
-      {show && <Row style={{ paddingLeft: '1ch' }}>{children}</Row>}
-    </>
-  );
-};
-
-export default Accordion;
diff --git a/components/ActionButton.tsx b/components/ActionButton.tsx
deleted file mode 100644
index 84a6018..0000000
--- a/components/ActionButton.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import styles from '@components/ActionButton.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-interface ActionButtonProps {
-  onClick?: () => void;
-  hotkey?: any;
-  children?: React.ReactNode;
-  style?: any;
-  rootStyle?: any;
-  isSelected?: boolean;
-}
-
-const ActionButton = React.forwardRef<HTMLDivElement, ActionButtonProps>(({ onClick, hotkey, children, style, rootStyle, isSelected }, ref) => {
-  return (
-    <div className={Utilities.classNames(styles.root, isSelected ? styles.selected : null)} style={rootStyle} onClick={onClick} tabIndex={0} ref={ref} role="button">
-      {Utilities.isEmpty(hotkey) ? null : <span className={styles.hotkey}>{hotkey}</span>}
-      <span className={styles.content} style={style}>
-        {children}
-      </span>
-    </div>
-  );
-});
-
-ActionButton.displayName = 'ActionButton';
-
-export default ActionButton;
diff --git a/components/AlertBanner.tsx b/components/AlertBanner.tsx
deleted file mode 100644
index fd46436..0000000
--- a/components/AlertBanner.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import styles from '@components/AlertBanner.module.scss';
-
-import * as React from 'react';
-
-interface AlertBannerProps {
-  style?: any;
-  children?: any;
-}
-
-const AlertBanner: React.FC<AlertBannerProps> = ({ style: propStyle, ...rest }) => {
-  let style: React.CSSProperties = { ...propStyle };
-
-  return <div className={styles.root} {...rest} style={style} />;
-};
-
-export default AlertBanner;
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
deleted file mode 100644
index ad03d2f..0000000
--- a/components/Avatar.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import styles from '@components/Avatar.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className' | 'children'> {
-  src?: string;
-  href?: string;
-  target?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-}
-
-const Avatar: React.FC<AvatarProps> = (props) => {
-  const { src, style: propStyle, href, target, children, ...rest } = props;
-
-  const backgroundStyle = src ? { backgroundImage: `url(${src})` } : {};
-
-  const combinedStyle = { ...propStyle, ...backgroundStyle };
-
-  let avatarElement: React.ReactElement;
-
-  if (href) {
-    avatarElement = <a className={Utilities.classNames(src ? styles.root : styles.placeholder)} style={combinedStyle} href={href} target={target} tabIndex={0} role="link" />;
-  } else {
-    avatarElement = <figure className={Utilities.classNames(src ? styles.root : styles.placeholder)} style={combinedStyle} />;
-  }
-
-  if (!children) {
-    return avatarElement;
-  }
-
-  return (
-    <div className={styles.parent} {...rest}>
-      {avatarElement}
-      <span className={styles.right}>{children}</span>
-    </div>
-  );
-};
-
-export default Avatar;
diff --git a/components/BlockLoader.tsx b/components/BlockLoader.tsx
deleted file mode 100644
index f167422..0000000
--- a/components/BlockLoader.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-
-import styles from '@components/BlockLoader.module.scss';
-
-import * as React from 'react';
-
-const SEQUENCES = [
-  ['⠁', '⠂', '⠄', '⡀', '⢀', '⠠', '⠐', '⠈'],
-  ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'],
-  ['▖', '▘', '▝', '▗'],
-  ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█', '▇', '▆', '▅', '▄', '▃', '▁'],
-  ['▉', '▊', '▋', '▌', '▍', '▎', '▏', '▎', '▍', '▌', '▋', '▊', '▉'],
-  ['←', '↖', '↑', '↗', '→', '↘', '↓', '↙'],
-  ['┤', '┘', '┴', '└', '├', '┌', '┬', '┐'],
-  ['◢', '◣', '◤', '◥'],
-  ['◰', '◳', '◲', '◱'],
-  ['◴', '◷', '◶', '◵'],
-  ['◐', '◓', '◑', '◒'],
-];
-
-interface BlockLoaderProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
-  mode?: number;
-}
-
-const BlockLoader: React.FC<BlockLoaderProps> = ({ mode = 0 }) => {
-  if (!SEQUENCES[mode]) {
-    return <span className={styles.block}>�</span>;
-  }
-
-  const [index, setIndex] = React.useState(0);
-  const intervalRef = React.useRef<number | null>(null);
-  const indexLength = SEQUENCES[mode].length;
-
-  React.useEffect(() => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-    }
-
-    intervalRef.current = window.setInterval(() => {
-      setIndex((prevIndex) => (prevIndex + 1) % indexLength);
-    }, 100);
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [indexLength]);
-
-  return <span className={styles.root}>{SEQUENCES[mode][index]}</span>;
-};
-
-export default BlockLoader;
diff --git a/components/BreadCrumbs.tsx b/components/BreadCrumbs.tsx
deleted file mode 100644
index 68f7c93..0000000
--- a/components/BreadCrumbs.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import styles from '@components/BreadCrumbs.module.scss';
-
-import * as React from 'react';
-
-interface BreadCrumbsItem {
-  url?: string;
-  name: string;
-}
-
-interface BreadCrumbsProps {
-  items: BreadCrumbsItem[];
-}
-
-const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ items }) => {
-  return (
-    <nav aria-label="breadcrumb" className={styles.root}>
-      {items.map((item, index) => {
-        const linkElement = (
-          <a className={styles.link} href={item.url} target="_blank" tabIndex={0} role="link">
-            {item.name}
-          </a>
-        );
-
-        return (
-          <span className={styles.line} key={index}>
-            {index === items.length - 1 ? <span>{linkElement}</span> : linkElement}
-            {index < items.length - 1 && <span className={styles.symbol}> ❯ </span>}
-          </span>
-        );
-      })}
-    </nav>
-  );
-};
-
-export default BreadCrumbs;
diff --git a/components/ButtonGroup.tsx b/components/ButtonGroup.tsx
deleted file mode 100644
index ae75ea0..0000000
--- a/components/ButtonGroup.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client';
-
-import styles from '@components/ButtonGroup.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import ActionButton from '@components/ActionButton';
-import DropdownMenuTrigger from '@components/DropdownMenuTrigger';
-
-const ButtonGroup = (props) => {
-  if (!props.items) {
-    return null;
-  }
-
-  return (
-    <div className={Utilities.classNames(styles.root, props.isFull ? styles.full : null)}>
-      {props.items.map((each) => {
-        if (each.items) {
-          return (
-            <DropdownMenuTrigger key={each.body} items={each.items} hotkey={each.openHotkey}>
-              <ActionButton hotkey={each.hotkey} isSelected={each.selected}>
-                {each.body}
-              </ActionButton>
-            </DropdownMenuTrigger>
-          );
-        }
-
-        return (
-          <ActionButton key={each.body} onClick={each.onClick} hotkey={each.hotkey} isSelected={each.selected}>
-            {each.body}
-          </ActionButton>
-        );
-      })}
-    </div>
-  );
-};
-
-export default ButtonGroup;
diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx
deleted file mode 100644
index f431cb9..0000000
--- a/components/CodeBlock.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client';
-
-import styles from '@components/CodeBlock.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
-  children?: React.ReactNode;
-}
-
-const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(({ children, ...rest }, ref) => {
-  return (
-    <pre className={styles.root} ref={ref} {...rest}>
-      {String(children)
-        .split('\n')
-        .map((line, index) => (
-          <div key={index} className={styles.line}>
-            <span className={styles.number}>{Utilities.leftPad(String(index + 1), 3)}</span>
-            <span className={styles.content}>{line}</span>
-          </div>
-        ))}
-    </pre>
-  );
-});
-
-CodeBlock.displayName = 'CodeBlock';
-
-export default CodeBlock;
diff --git a/components/ComboBox.tsx b/components/ComboBox.tsx
deleted file mode 100644
index 43c60f2..0000000
--- a/components/ComboBox.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-
-import styles from '@components/ComboBox.module.scss';
-
-import * as React from 'react';
-
-import AlertBanner from '@components/AlertBanner';
-import ButtonGroup from '@components/ButtonGroup';
-import CardDouble from '@components/CardDouble';
-import Input from '@components/Input';
-
-interface ComboBoxProps {
-  data: string[][];
-  label?: string;
-}
-
-function ComboBox({ data, label }: ComboBoxProps) {
-  const [searchTerm, setSearchTerm] = React.useState('');
-
-  const filtered = React.useMemo(() => {
-    const sliced = data.slice(1);
-    if (!searchTerm) return [];
-    return sliced.filter((entry) => entry[0].toLowerCase().includes(searchTerm.toLowerCase()));
-  }, [data, searchTerm]);
-
-  const displayed = React.useMemo(() => {
-    const sliced = data.slice(1);
-    if (filtered.length >= 5) return filtered.slice(0, 5);
-    if (filtered.length === 0 && searchTerm) return sliced.slice(0, 5);
-    if (filtered.length > 0 && filtered.length < 5) {
-      const needed = 5 - filtered.length;
-      const remainder = sliced.filter((entry) => !filtered.includes(entry));
-      return [...filtered, ...remainder.slice(0, needed)];
-    }
-    return sliced.slice(0, 5);
-  }, [filtered, data, searchTerm]);
-
-  const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
-  }, []);
-
-  return (
-    <>
-      <div className={styles.root}>
-        <Input autoComplete="off" isBlink label={label} name="input_test_blink" value={searchTerm} onChange={handleChange} />
-      </div>
-      {displayed.map((entry) => (
-        <CardDouble key={entry[0]} title={entry[0]}>
-          <AlertBanner>{entry[1]}</AlertBanner>
-          <br />
-          <ButtonGroup isFull items={[{ body: 'FAVORITE' }, { body: 'DONATE' }, { body: 'LEARN MORE' }]} />
-        </CardDouble>
-      ))}
-    </>
-  );
-}
-
-export default ComboBox;
diff --git a/components/ContentFluid.tsx b/components/ContentFluid.tsx
deleted file mode 100644
index 7218fb3..0000000
--- a/components/ContentFluid.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import styles from '@components/ContentFluid.module.scss';
-
-import * as React from 'react';
-
-interface ContentFluidProps extends React.HTMLAttributes<HTMLSpanElement> {
-  children?: React.ReactNode;
-}
-
-const ContentFluid: React.FC<ContentFluidProps> = ({ children, ...rest }) => {
-  return <div className={styles.root}>{children}</div>;
-};
-
-export default ContentFluid;
diff --git a/components/DropdownMenu.tsx b/components/DropdownMenu.tsx
deleted file mode 100644
index e6ae87a..0000000
--- a/components/DropdownMenu.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import styles from '@components/DropdownMenu.module.scss';
-
-import * as React from 'react';
-
-import ActionButton from '@components/ActionButton';
-import ActionListItem from '@components/ActionListItem';
-import ModalTrigger from '@components/ModalTrigger';
-
-import { useHotkeys } from '@modules/hotkeys';
-
-interface DropdownMenuItemProps {
-  children: React.ReactNode;
-  icon?: React.ReactNode;
-  href?: string;
-  target?: string;
-  onClick?: () => void;
-  modal?: any;
-  modalProps?: Record<string, unknown>;
-}
-
-interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClose?: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void;
-  items?: DropdownMenuItemProps[];
-}
-
-const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>((props, ref) => {
-  const { onClose, items, style, ...rest } = props;
-
-  const handleHotkey = () => {
-    if (onClose) onClose();
-  };
-
-  useHotkeys('space', handleHotkey);
-
-  return (
-    <div ref={ref} className={styles.root} style={style} {...rest}>
-      {items &&
-        items.map((each, index) => {
-          if (each.modal) {
-            return (
-              <ModalTrigger key={`action-items-${index}`} modal={each.modal} modalProps={each.modalProps}>
-                <ActionListItem children={each.children} icon={each.icon} />
-              </ModalTrigger>
-            );
-          }
-
-          return (
-            <ActionListItem
-              key={`action-items-${index}`}
-              children={each.children}
-              icon={each.icon}
-              href={each.href}
-              target={each.target}
-              onClick={() => {
-                if (each.onClick) {
-                  each.onClick();
-                }
-
-                if (onClose) {
-                  onClose();
-                }
-              }}
-            />
-          );
-        })}
-
-      <footer className={styles.footer}>
-        Press space to{' '}
-        <ActionButton
-          hotkey="␣"
-          onClick={() => {
-            if (onClose) onClose();
-          }}
-        >
-          Close
-        </ActionButton>
-      </footer>
-    </div>
-  );
-});
-
-DropdownMenu.displayName = 'DropdownMenu';
-
-export default DropdownMenu;
diff --git a/components/Input.tsx b/components/Input.tsx
deleted file mode 100644
index 3546219..0000000
--- a/components/Input.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import styles from '@components/Input.module.scss';
-
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  caretChars?: string | any;
-  label?: string | any;
-  isBlink?: boolean;
-};
-
-function Input({ caretChars, isBlink = true, label, placeholder, onChange, type, id, ...rest }: InputProps) {
-  const generatedId = React.useId();
-  const inputId = id || generatedId;
-
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
-  const [text, setText] = React.useState<string>(rest.defaultValue?.toString() || rest.value?.toString() || '');
-  const [isFocused, setIsFocused] = React.useState<boolean>(false);
-  const [selectionStart, setSelectionStart] = React.useState<number>(text.length);
-
-  const lastFocusDirectionRef = React.useRef<'up' | 'down' | null>(null);
-
-  React.useEffect(() => {
-    if (rest.value !== undefined) {
-      const val = rest.value.toString();
-      setText(val);
-      setSelectionStart(val.length);
-    }
-  }, [rest.value]);
-
-  const onHandleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setText(value);
-    if (onChange) {
-      onChange(e);
-    }
-    setSelectionStart(e.target.selectionStart ?? value.length);
-  };
-
-  const onHandleFocus = () => {
-    setIsFocused(true);
-    if (!inputRef.current) return;
-
-    if (lastFocusDirectionRef.current === 'down') {
-      setSelectionStart(text.length);
-      inputRef.current.setSelectionRange(text.length, text.length);
-    } else if (lastFocusDirectionRef.current === 'up') {
-      setSelectionStart(0);
-      inputRef.current.setSelectionRange(0, 0);
-    }
-  };
-
-  const onHandleBlur = () => {
-    setIsFocused(false);
-  };
-
-  const onHandleSelect = (e: React.SyntheticEvent<HTMLInputElement>) => {
-    const inputEl = e.currentTarget as HTMLInputElement;
-    setSelectionStart(inputEl.selectionStart ?? text.length);
-  };
-
-  const onHandleClick = (e: React.MouseEvent<HTMLInputElement>) => {
-    const inputEl = e.currentTarget as HTMLInputElement;
-    inputEl.focus();
-    setSelectionStart(inputEl.selectionStart ?? text.length);
-  };
-
-  const onHandleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      lastFocusDirectionRef.current = 'up';
-      const previousFocusable = Utilities.findNextFocusable(document.activeElement, 'previous');
-      previousFocusable?.focus();
-    } else if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      lastFocusDirectionRef.current = 'down';
-      const nextFocusable = Utilities.findNextFocusable(document.activeElement, 'next');
-      nextFocusable?.focus();
-    }
-  };
-
-  const isPlaceholderVisible = !text && placeholder;
-  const containerClasses = Utilities.classNames(styles.root, isFocused && styles.focused);
-
-  const maskText = (t: string) => (type === 'password' ? '•'.repeat(t.length) : t);
-
-  const beforeCaretText = isPlaceholderVisible ? placeholder ?? '' : maskText(text.substring(0, selectionStart));
-  const afterCaretText = isPlaceholderVisible ? '' : maskText(text.substring(selectionStart));
-
-  return (
-    <div className={containerClasses}>
-      {label && (
-        <label htmlFor={inputId} className={styles.label}>
-          {label}
-        </label>
-      )}
-      <div className={styles.inputContainer}>
-        <div className={Utilities.classNames(styles.displayed, isPlaceholderVisible && styles.placeholder)}>
-          {beforeCaretText}
-          {!isPlaceholderVisible && <span className={Utilities.classNames(styles.block, isBlink && styles.blink)}>{caretChars || ''}</span>}
-          {!isPlaceholderVisible && afterCaretText}
-        </div>
-        <input id={inputId} ref={inputRef} className={styles.hidden} value={text} aria-placeholder={placeholder} type={type} onFocus={onHandleFocus} onBlur={onHandleBlur} onChange={onHandleChange} onSelect={onHandleSelect} onClick={onHandleClick} onKeyDown={onHandleKeyDown} {...rest} />
-      </div>
-    </div>
-  );
-}
-
-export default Input;
diff --git a/components/ListItem.tsx b/components/ListItem.tsx
deleted file mode 100644
index f4da36c..0000000
--- a/components/ListItem.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client';
-
-import styles from '@components/ListItem.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-const ListItem = ({ children }) => {
-  const itemRef = React.useRef<HTMLLIElement>(null);
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLLIElement>) => {
-    switch (event.key) {
-      case 'Enter':
-        event.preventDefault();
-        itemRef.current?.click();
-        break;
-      case 'ArrowUp':
-      case 'ArrowLeft': {
-        event.preventDefault();
-        const previousFocusable = Utilities.findNextFocusable(document.activeElement, 'previous');
-        previousFocusable?.focus();
-        break;
-      }
-      case 'ArrowDown':
-      case 'ArrowRight': {
-        event.preventDefault();
-        const nextFocusable = Utilities.findNextFocusable(document.activeElement, 'next');
-        nextFocusable?.focus();
-        break;
-      }
-      default:
-        break;
-    }
-  };
-
-  return (
-    <li className={styles.root} tabIndex={0} ref={itemRef} onKeyDown={handleKeyDown}>
-      {children}
-    </li>
-  );
-};
-
-export default ListItem;
diff --git a/components/Popover.tsx b/components/Popover.tsx
deleted file mode 100644
index 8660b45..0000000
--- a/components/Popover.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import styles from '@components/Popover.module.scss';
-
-import * as React from 'react';
-
-interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(({ style: propStyle, ...rest }, ref) => {
-  const style: React.CSSProperties = { ...propStyle };
-
-  return <div ref={ref} className={styles.root} {...rest} style={style} />;
-});
-
-Popover.displayName = 'Popover';
-
-export default Popover;
diff --git a/components/Row.tsx b/components/Row.tsx
deleted file mode 100644
index 3964bf4..0000000
--- a/components/Row.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import styles from '@components/Row.module.scss';
-
-import * as React from 'react';
-
-type RowProps = React.HTMLAttributes<HTMLElement> & {
-  children?: React.ReactNode;
-};
-
-const Row = React.forwardRef<HTMLElement, RowProps>(({ children, ...rest }, ref) => {
-  return (
-    <section className={styles.row} ref={ref} {...rest}>
-      {children}
-    </section>
-  );
-});
-
-Row.displayName = 'Row';
-
-export default Row;
diff --git a/components/RowEllipsis.tsx b/components/RowEllipsis.tsx
deleted file mode 100644
index fd044f2..0000000
--- a/components/RowEllipsis.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import styles from '@components/RowEllipsis.module.scss';
-
-import * as React from 'react';
-
-type RowEllipsisProps = React.HTMLAttributes<HTMLElement> & {
-  children?: React.ReactNode;
-};
-
-const RowEllipsis = React.forwardRef<HTMLElement, RowEllipsisProps>(({ children, ...rest }, ref) => {
-  return (
-    <section className={styles.row} ref={ref} {...rest}>
-      {children}
-    </section>
-  );
-});
-
-RowEllipsis.displayName = 'RowEllipsis';
-
-export default RowEllipsis;
diff --git a/components/RowSpaceBetween.tsx b/components/RowSpaceBetween.tsx
deleted file mode 100644
index 8c7fcf5..0000000
--- a/components/RowSpaceBetween.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import styles from '@components/RowSpaceBetween.module.scss';
-
-import * as React from 'react';
-
-type RowSpaceBetweenProps = React.HTMLAttributes<HTMLElement> & {
-  children?: React.ReactNode;
-};
-
-const RowSpaceBetween = React.forwardRef<HTMLElement, RowSpaceBetweenProps>(({ children, ...rest }, ref) => {
-  return (
-    <section className={styles.row} ref={ref} {...rest}>
-      {children}
-    </section>
-  );
-});
-
-RowSpaceBetween.displayName = 'RowSpaceBetween';
-
-export default RowSpaceBetween;
diff --git a/components/TableColumn.tsx b/components/TableColumn.tsx
deleted file mode 100644
index cb65165..0000000
--- a/components/TableColumn.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import styles from '@components/TableColumn.module.scss';
-
-import * as React from 'react';
-
-type TableColumnProps = React.HTMLAttributes<HTMLTableCellElement> & {
-  children?: React.ReactNode;
-};
-
-const TableColumn: React.FC<TableColumnProps> = ({ children, ...rest }) => {
-  return (
-    <td className={styles.root} {...rest}>
-      {children}
-    </td>
-  );
-};
-
-TableColumn.displayName = 'TableColumn';
-
-export default TableColumn;
diff --git a/components/TableRow.tsx b/components/TableRow.tsx
deleted file mode 100644
index 11db551..0000000
--- a/components/TableRow.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import styles from '@components/TableRow.module.scss';
-
-import * as React from 'react';
-
-type TableRowProps = React.HTMLAttributes<HTMLElement> & {
-  children?: React.ReactNode;
-};
-
-const TableRow = ({ children, ...rest }) => {
-  return (
-    <tr className={styles.root} tabIndex={0} {...rest}>
-      {children}
-    </tr>
-  );
-};
-
-TableRow.displayName = 'TableRow';
-
-export default TableRow;
diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
deleted file mode 100644
index da411a6..0000000
--- a/components/Tooltip.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import styles from '@components/Tooltip.module.scss';
-
-import * as React from 'react';
-
-interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(({ style: propStyle, ...rest }, ref) => {
-  const style: React.CSSProperties = { ...propStyle };
-
-  return <div ref={ref} className={styles.root} {...rest} style={style} />;
-});
-
-Tooltip.displayName = 'Tooltip';
-
-export default Tooltip;
diff --git a/components/modals/ModalAlert.tsx b/components/modals/ModalAlert.tsx
deleted file mode 100644
index 5ad1eb3..0000000
--- a/components/modals/ModalAlert.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import styles from '@components/modals/ModalAlert.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import { useModals } from '@components/page/ModalContext';
-
-import Button from '@components/Button';
-import Card from '@components/Card';
-
-interface ModalAlertProps {
-  buttonText?: string | any;
-  message: string;
-}
-
-function ModalAlert({ message, buttonText }: ModalAlertProps) {
-  const { close } = useModals();
-
-  return (
-    <div className={styles.root}>
-      <Card title="ALERT">
-        {message}
-        <br />
-        <br />
-        <Button onClick={() => close()}>{Utilities.isEmpty(buttonText) ? 'Close' : buttonText}</Button>
-      </Card>
-    </div>
-  );
-}
-
-export default ModalAlert;
diff --git a/components/modals/ModalCanvasPlatformer.tsx b/components/modals/ModalCanvasPlatformer.tsx
deleted file mode 100644
index d34b476..0000000
--- a/components/modals/ModalCanvasPlatformer.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import styles from '@components/modals/ModalCanvasPlatformer.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import { useModals } from '@components/page/ModalContext';
-
-import Button from '@components/Button';
-import CanvasPlatformer from '@components/CanvasPlatformer';
-import Card from '@components/Card';
-
-interface ModalCanvasPlatformerProps {
-  buttonText?: string | any;
-}
-
-function ModalCanvasPlatformer({ buttonText }: ModalCanvasPlatformerProps) {
-  const { close } = useModals();
-
-  return (
-    <div className={styles.root}>
-      <Card title="ALERT">
-        <CanvasPlatformer rows={12} />
-        <br />
-        <br />
-        <Button onClick={() => close()}>{Utilities.isEmpty(buttonText) ? 'Close' : buttonText}</Button>
-      </Card>
-    </div>
-  );
-}
-
-export default ModalCanvasPlatformer;
diff --git a/components/modals/ModalCanvasSnake.tsx b/components/modals/ModalCanvasSnake.tsx
deleted file mode 100644
index 474a050..0000000
--- a/components/modals/ModalCanvasSnake.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import styles from '@components/modals/ModalCanvasSnake.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import { useModals } from '@components/page/ModalContext';
-
-import Button from '@components/Button';
-import CanvasSnake from '@components/CanvasSnake';
-import Card from '@components/Card';
-
-interface ModalCanvasSnakeProps {
-  buttonText?: string | any;
-}
-
-function ModalCanvasSnake({ buttonText }: ModalCanvasSnakeProps) {
-  const { close } = useModals();
-
-  return (
-    <div className={styles.root}>
-      <Card title="CANVAS PLATFORMER">
-        <CanvasSnake rows={12} />
-        <br />
-        <br />
-        <Button onClick={() => close()}>{Utilities.isEmpty(buttonText) ? 'Close' : buttonText}</Button>
-      </Card>
-    </div>
-  );
-}
-
-export default ModalCanvasSnake;
diff --git a/components/modals/ModalChess.tsx b/components/modals/ModalChess.tsx
deleted file mode 100644
index 32ed8fa..0000000
--- a/components/modals/ModalChess.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-
-import styles from '@components/modals/ModalChess.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import { useHotkeys } from '@modules/hotkeys';
-import { useModals } from '@components/page/ModalContext';
-
-import Button from '@components/Button';
-import CardDouble from '@components/CardDouble';
-import Chessboard from '@components/Chessboard';
-
-interface ModalErrorProps {
-  buttonText?: string | any;
-  board: string[][];
-  title?: string;
-}
-
-function ModalChess({ board, buttonText, title }: ModalErrorProps) {
-  const { close } = useModals();
-
-  useHotkeys('enter', () => close());
-
-  return (
-    <div className={styles.root}>
-      <CardDouble title={title} style={{ textAlign: 'center' }}>
-        <Chessboard board={board} />
-        <br />
-        <br />
-        <Button onClick={() => close()}>{Utilities.isEmpty(buttonText) ? 'CLOSE' : buttonText}</Button>
-      </CardDouble>
-    </div>
-  );
-}
-
-export default ModalChess;
diff --git a/components/modals/ModalCreateAccount.tsx b/components/modals/ModalCreateAccount.tsx
deleted file mode 100644
index 6ed806e..0000000
--- a/components/modals/ModalCreateAccount.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-
-import styles from '@components/modals/ModalAlert.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import { useModals } from '@components/page/ModalContext';
-
-import Button from '@components/Button';
-import CardDouble from '@components/CardDouble';
-import Checkbox from '@components/Checkbox';
-import Input from '@components/Input';
-import RadioButtonGroup from '@components/RadioButtonGroup';
-
-function ModalCreateAccount() {
-  const { close } = useModals();
-
-  return (
-    <div className={styles.root}>
-      <CardDouble title="NEW ACCOUNT">
-        Create a new MakeBelieve™ account, where anything is possible at your command line in the browser.
-        <br />
-        <br />
-        <RadioButtonGroup
-          defaultValue="modal_developer"
-          options={[
-            { value: 'modal_individual', label: 'I’m using this for personal use.' },
-            { value: 'modal_developer', label: 'I’m building or creating something for work.' },
-            { value: 'modal_company', label: 'We’re using this as a team or organization.' },
-          ]}
-        />
-        <br />
-        <Input autoComplete="off" label="USERNAME" placeholder="Choose a username (e.g., SurfGirl29)" name="modal_username" />
-        <Input autoComplete="off" label="PASSWORD" placeholder="Create a password (8+ characters)" type="password" name="modal_password" />
-        <Input autoComplete="off" label="CONFIRM" placeholder="Type it again" type="password" name="modal_confirm" />
-        <br />
-        <Checkbox name="modal_terms">I agree to the Terms of Service, Data Privacy Policy, and Acceptable Use Guidelines.</Checkbox>
-        <Checkbox name="modal_goodwill">I agree not to use this service for unlawful purposes.</Checkbox>
-        <br />
-        <Button onClick={() => close()}>Create an account</Button>
-      </CardDouble>
-    </div>
-  );
-}
-
-export default ModalCreateAccount;
diff --git a/components/modals/ModalDOMSnake.tsx b/components/modals/ModalDOMSnake.tsx
deleted file mode 100644
index 21523e0..0000000
--- a/components/modals/ModalDOMSnake.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import styles from '@components/modals/ModalCanvasSnake.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import { useModals } from '@components/page/ModalContext';
-
-import Button from '@components/Button';
-import Card from '@components/Card';
-import DOMSnake from '@components/DOMSnake';
-
-interface ModalDOMSnakeProps {
-  buttonText?: string | any;
-}
-
-function ModalDOMSnake({ buttonText }: ModalDOMSnakeProps) {
-  const { close } = useModals();
-
-  return (
-    <div className={styles.root}>
-      <Card title="DOM SNAKE">
-        <DOMSnake height={14} width={34} />
-        <br />
-        <br />
-        <Button onClick={() => close()}>{Utilities.isEmpty(buttonText) ? 'Close' : buttonText}</Button>
-      </Card>
-    </div>
-  );
-}
-
-export default ModalDOMSnake;
diff --git a/components/modals/ModalError.tsx b/components/modals/ModalError.tsx
deleted file mode 100644
index 991b43a..0000000
--- a/components/modals/ModalError.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import styles from '@components/modals/ModalError.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import { useHotkeys } from '@modules/hotkeys';
-import { useModals } from '@components/page/ModalContext';
-
-import ActionButton from '@components/ActionButton';
-import Button from '@components/Button';
-import CardDouble from '@components/CardDouble';
-import Grid from '@components/Grid';
-
-interface ModalErrorProps {
-  buttonText?: string | any;
-  message: string | any;
-  title?: string;
-}
-
-// TODO(jimmylee)
-// Enter doesn't always work for some reason.
-function ModalError({ message, buttonText, title }: ModalErrorProps) {
-  const { close } = useModals();
-
-  useHotkeys('enter', () => close());
-
-  return (
-    <div className={styles.root}>
-      <CardDouble title={title}>
-        <br />
-        {message}
-        <Grid>
-          <ul>
-            <li>
-              Press{' '}
-              <ActionButton hotkey="⏎" onClick={() => close()}>
-                ENTER
-              </ActionButton>{' '}
-              to continue.
-            </li>
-          </ul>
-        </Grid>
-      </CardDouble>
-    </div>
-  );
-}
-
-export default ModalError;
diff --git a/components/modals/ModalMatrixModes.tsx b/components/modals/ModalMatrixModes.tsx
deleted file mode 100644
index 72fb8ce..0000000
--- a/components/modals/ModalMatrixModes.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-
-import styles from '@components/modals/ModalMatrixModes.module.scss';
-
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
-
-import { useModals } from '@components/page/ModalContext';
-
-import Button from '@components/Button';
-import Card from '@components/Card';
-import MatrixLoader from '@components/MatrixLoader';
-
-interface ModalMatrixModesProps {
-  buttonText?: string | any;
-}
-
-function ModalMatrixModes({ buttonText }: ModalMatrixModesProps) {
-  const { close } = useModals();
-
-  return (
-    <div className={styles.root}>
-      <Card title="MATRIX MODES">
-        <Card title="KATAKANA DEFAULT">
-          <MatrixLoader rows={32} mode="katakana" />
-        </Card>
-        <Card title="GREEK LTR">
-          <MatrixLoader direction="left-to-right" rows={8} mode="greek" />
-        </Card>
-        <br />
-        <br />
-        <Button onClick={() => close()}>{Utilities.isEmpty(buttonText) ? 'Close' : buttonText}</Button>
-      </Card>
-    </div>
-  );
-}
-
-export default ModalMatrixModes;
diff --git a/modules/hotkeys/bound-hotkeys-proxy-provider.tsx b/modules/hotkeys/bound-hotkeys-proxy-provider.tsx
deleted file mode 100644
index 9b6d2bf..0000000
--- a/modules/hotkeys/bound-hotkeys-proxy-provider.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// NOTE(jimmylee)
-// Vendored from
-// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/BoundHotkeysProxyProvider.tsx
-
-import { createContext, ReactNode, useContext } from 'react'
-import { Hotkey } from '@modules/hotkeys/types'
-
-type BoundHotkeysProxyProviderType = {
-  addHotkey: (hotkey: Hotkey) => void
-  removeHotkey: (hotkey: Hotkey) => void
-}
-
-const BoundHotkeysProxyProvider = createContext<BoundHotkeysProxyProviderType | undefined>(undefined)
-
-export const useBoundHotkeysProxy = () => {
-  return useContext(BoundHotkeysProxyProvider)
-}
-
-interface Props {
-  children: ReactNode
-  addHotkey: (hotkey: Hotkey) => void
-  removeHotkey: (hotkey: Hotkey) => void
-}
-
-export default function BoundHotkeysProxyProviderProvider({ addHotkey, removeHotkey, children }: Props) {
-  return (
-    <BoundHotkeysProxyProvider.Provider value={{ addHotkey, removeHotkey }}>
-      {children}
-    </BoundHotkeysProxyProvider.Provider>
-  )
-}
\ No newline at end of file
diff --git a/modules/hotkeys/index.ts b/modules/hotkeys/index.ts
deleted file mode 100644
index 7700385..0000000
--- a/modules/hotkeys/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// NOTE(jimmylee)
-// Vendored from
-// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/index.ts
-
-import useHotkeys from '@modules/hotkeys/use-hotkeys'
-import type { Options, Keys, HotkeyCallback } from '@modules/hotkeys/types'
-import { HotkeysProvider, useHotkeysContext } from '@modules/hotkeys/hotkeys-provider'
-import { isHotkeyPressed } from '@modules/hotkeys/is-hotkey-pressed'
-import useRecordHotkeys from '@modules/hotkeys/use-record-hotkeys'
-
-export {
-  useHotkeys,
-  useRecordHotkeys,
-  useHotkeysContext,
-  isHotkeyPressed,
-  HotkeysProvider,
-  Options,
-  Keys,
-  HotkeyCallback,
-}
diff --git a/modules/hotkeys/parse-hotkeys.ts b/modules/hotkeys/parse-hotkeys.ts
deleted file mode 100644
index 80f7af7..0000000
--- a/modules/hotkeys/parse-hotkeys.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-// NOTE(jimmylee)
-// Vendored from
-// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/parseHotkeys.ts
-
-import { Hotkey, KeyboardModifiers } from '@modules/hotkeys/types'
-
-const reservedModifierKeywords = ['shift', 'alt', 'meta', 'mod', 'ctrl']
-
-const mappedKeys: Record<string, string> = {
-  esc: 'escape',
-  return: 'enter',
-  '.': 'period',
-  ',': 'comma',
-  '-': 'slash',
-  ' ': 'space',
-  '`': 'backquote',
-  '#': 'backslash',
-  '+': 'bracketright',
-  ShiftLeft: 'shift',
-  ShiftRight: 'shift',
-  AltLeft: 'alt',
-  AltRight: 'alt',
-  MetaLeft: 'meta',
-  MetaRight: 'meta',
-  OSLeft: 'meta',
-  OSRight: 'meta',
-  ControlLeft: 'ctrl',
-  ControlRight: 'ctrl',
-}
-
-export function mapKey(key?: string): string {
-  return ((key && mappedKeys[key]) || key || '')
-    .trim()
-    .toLowerCase()
-    .replace(/key|digit|numpad|arrow/, '')
-}
-
-export function isHotkeyModifier(key: string) {
-  return reservedModifierKeywords.includes(key)
-}
-
-export function parseKeysHookInput(keys: string, splitKey = ','): string[] {
-  return keys.split(splitKey)
-}
-
-export function parseHotkey(hotkey: string, combinationKey = '+', description?: string): Hotkey {
-  const keys = hotkey
-    .toLocaleLowerCase()
-    .split(combinationKey)
-    .map((k) => mapKey(k))
-
-  const modifiers: KeyboardModifiers = {
-    alt: keys.includes('alt'),
-    ctrl: keys.includes('ctrl') || keys.includes('control'),
-    shift: keys.includes('shift'),
-    meta: keys.includes('meta'),
-    mod: keys.includes('mod'),
-  }
-
-  const singleCharKeys = keys.filter((k) => !reservedModifierKeywords.includes(k))
-
-  return {
-    ...modifiers,
-    keys: singleCharKeys,
-    description,
-    hotkey,
-  }
-}
\ No newline at end of file
diff --git a/modules/hotkeys/use-deep-equal-memo.ts b/modules/hotkeys/use-deep-equal-memo.ts
deleted file mode 100644
index dec13e9..0000000
--- a/modules/hotkeys/use-deep-equal-memo.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useRef } from 'react'
-
-import * as Utilities from '@common/utilities';
-
-export default function useDeepEqualMemo<T>(value: T) {
-  const ref = useRef<T | undefined>(undefined)
-
-  if (!Utilities.deepEqual(ref.current, value)) {
-    ref.current = value
-  }
-
-  return ref.current
-}
\ No newline at end of file
diff --git a/modules/hotkeys/use-hotkeys.ts b/modules/hotkeys/use-hotkeys.ts
deleted file mode 100644
index fd3e1b0..0000000
--- a/modules/hotkeys/use-hotkeys.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-// NOTE(jimmylee)
-// Vendored from
-// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/useHotkeys.ts
-
-import { HotkeyCallback, Keys, Options, OptionsOrDependencyArray, RefType } from '@modules/hotkeys/types'
-import { DependencyList, RefCallback, useCallback, useEffect, useState, useLayoutEffect, useRef } from 'react'
-import { mapKey, parseHotkey, parseKeysHookInput } from '@modules/hotkeys/parse-hotkeys'
-import {
-  isHotkeyEnabled,
-  isHotkeyEnabledOnTag,
-  isHotkeyMatchingKeyboardEvent,
-  isKeyboardEventTriggeredByInput,
-  isScopeActive,
-  maybePreventDefault,
-} from '@modules/hotkeys/validators'
-import { useHotkeysContext } from '@modules/hotkeys/hotkeys-provider'
-import { useBoundHotkeysProxy } from '@modules/hotkeys/bound-hotkeys-proxy-provider'
-import useDeepEqualMemo from '@modules/hotkeys/use-deep-equal-memo'
-import { isReadonlyArray, pushToCurrentlyPressedKeys, removeFromCurrentlyPressedKeys } from '@modules/hotkeys/is-hotkey-pressed'
-
-const stopPropagation = (e: KeyboardEvent): void => {
-  e.stopPropagation()
-  e.preventDefault()
-  e.stopImmediatePropagation()
-}
-
-const useSafeLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
-export default function useHotkeys<T extends HTMLElement>(
-  keys: Keys,
-  callback: HotkeyCallback,
-  options?: OptionsOrDependencyArray,
-  dependencies?: OptionsOrDependencyArray
-) {
-  const [ref, setRef] = useState<RefType<T>>(null)
-  const hasTriggeredRef = useRef(false)
-
-  const _options: Options | undefined = !(options instanceof Array)
-    ? (options as Options)
-    : !(dependencies instanceof Array)
-    ? (dependencies as Options)
-    : undefined
-  const _keys: string = isReadonlyArray(keys) ? keys.join(_options?.splitKey) : keys
-  const _deps: DependencyList | undefined =
-    options instanceof Array ? options : dependencies instanceof Array ? dependencies : undefined
-
-  const memoisedCB = useCallback(callback, _deps ?? [])
-  const cbRef = useRef<HotkeyCallback>(memoisedCB)
-
-  if (_deps) {
-    cbRef.current = memoisedCB
-  } else {
-    cbRef.current = callback
-  }
-
-  const memoisedOptions = useDeepEqualMemo(_options)
-
-  const { enabledScopes } = useHotkeysContext()
-  const proxy = useBoundHotkeysProxy()
-
-  useSafeLayoutEffect(() => {
-    if (memoisedOptions?.enabled === false || !isScopeActive(enabledScopes, memoisedOptions?.scopes)) {
-      return
-    }
-
-    const listener = (e: KeyboardEvent, isKeyUp = false) => {
-      if (isKeyboardEventTriggeredByInput(e) && !isHotkeyEnabledOnTag(e, memoisedOptions?.enableOnFormTags)) {
-        return
-      }
-
-      // TODO: SINCE THE EVENT IS NOW ATTACHED TO THE REF, THE ACTIVE ELEMENT CAN NEVER BE INSIDE THE REF. THE HOTKEY ONLY TRIGGERS IF THE
-      // REF IS THE ACTIVE ELEMENT. THIS IS A PROBLEM SINCE FOCUSED SUB COMPONENTS WON'T TRIGGER THE HOTKEY.
-      if (ref !== null) {
-        const rootNode = ref.getRootNode()
-        if (
-          (rootNode instanceof Document || rootNode instanceof ShadowRoot) &&
-          rootNode.activeElement !== ref &&
-          !ref.contains(rootNode.activeElement)
-        ) {
-          stopPropagation(e)
-          return
-        }
-      }
-
-      if ((e.target as HTMLElement)?.isContentEditable && !memoisedOptions?.enableOnContentEditable) {
-        return
-      }
-
-      parseKeysHookInput(_keys, memoisedOptions?.splitKey).forEach((key) => {
-        const hotkey = parseHotkey(key, memoisedOptions?.combinationKey)
-
-        if (isHotkeyMatchingKeyboardEvent(e, hotkey, memoisedOptions?.ignoreModifiers) || hotkey.keys?.includes('*')) {
-          if (memoisedOptions?.ignoreEventWhen?.(e)) {
-            return
-          }
-
-          if (isKeyUp && hasTriggeredRef.current) {
-            return
-          }
-
-          maybePreventDefault(e, hotkey, memoisedOptions?.preventDefault)
-
-          if (!isHotkeyEnabled(e, hotkey, memoisedOptions?.enabled)) {
-            stopPropagation(e)
-
-            return
-          }
-
-          // Execute the user callback for that hotkey
-          cbRef.current(e, hotkey)
-
-          if (!isKeyUp) {
-            hasTriggeredRef.current = true
-          }
-        }
-      })
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === undefined) {
-        // Synthetic event (e.g., Chrome autofill).  Ignore.
-        return
-      }
-
-      pushToCurrentlyPressedKeys(mapKey(event.code))
-
-      if ((memoisedOptions?.keydown === undefined && memoisedOptions?.keyup !== true) || memoisedOptions?.keydown) {
-        listener(event)
-      }
-    }
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (event.key === undefined) {
-        // Synthetic event (e.g., Chrome autofill).  Ignore.
-        return
-      }
-
-      removeFromCurrentlyPressedKeys(mapKey(event.code))
-
-      hasTriggeredRef.current = false
-
-      if (memoisedOptions?.keyup) {
-        listener(event, true)
-      }
-    }
-
-    const domNode = ref || _options?.document || document
-
-    // @ts-ignore
-    domNode.addEventListener('keyup', handleKeyUp)
-    // @ts-ignore
-    domNode.addEventListener('keydown', handleKeyDown)
-
-    if (proxy) {
-      parseKeysHookInput(_keys, memoisedOptions?.splitKey).forEach((key) =>
-        proxy.addHotkey(parseHotkey(key, memoisedOptions?.combinationKey, memoisedOptions?.description))
-      )
-    }
-
-    return () => {
-      // @ts-ignore
-      domNode.removeEventListener('keyup', handleKeyUp)
-      // @ts-ignore
-      domNode.removeEventListener('keydown', handleKeyDown)
-
-      if (proxy) {
-        parseKeysHookInput(_keys, memoisedOptions?.splitKey).forEach((key) =>
-          proxy.removeHotkey(parseHotkey(key, memoisedOptions?.combinationKey, memoisedOptions?.description))
-        )
-      }
-    }
-  }, [ref, _keys, memoisedOptions, enabledScopes])
-
-  return setRef as RefCallback<T>
-}
\ No newline at end of file
diff --git a/modules/hotkeys/use-record-hotkeys.ts b/modules/hotkeys/use-record-hotkeys.ts
deleted file mode 100644
index 2f34862..0000000
--- a/modules/hotkeys/use-record-hotkeys.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useCallback, useState } from 'react'
-import { mapKey } from '@modules/hotkeys/parse-hotkeys'
-
-export default function useRecordHotkeys() {
-  const [keys, setKeys] = useState(new Set<string>())
-  const [isRecording, setIsRecording] = useState(false)
-
-  const handler = useCallback((event: KeyboardEvent) => {
-    if (event.key === undefined) {
-      // Synthetic event (e.g., Chrome autofill).  Ignore.
-      return
-    }
-
-    event.preventDefault()
-    event.stopPropagation()
-
-    setKeys((prev) => {
-      const newKeys = new Set(prev)
-
-      newKeys.add(mapKey(event.code))
-
-      return newKeys
-    })
-  }, [])
-
-  const stop = useCallback(() => {
-    if (typeof document !== 'undefined') {
-      document.removeEventListener('keydown', handler)
-
-      setIsRecording(false)
-    }
-  }, [handler])
-
-  const start = useCallback(() => {
-    setKeys(new Set<string>())
-
-    if (typeof document !== 'undefined') {
-      stop()
-
-      document.addEventListener('keydown', handler)
-
-      setIsRecording(true)
-    }
-  }, [handler, stop])
-
-  const resetKeys = useCallback(() => {
-    setKeys(new Set<string>())
-  }, [])
-
-  return [keys, { start, stop, resetKeys, isRecording }] as const
-}
diff --git a/modules/hotkeys/validators.ts b/modules/hotkeys/validators.ts
deleted file mode 100644
index 90c10ca..0000000
--- a/modules/hotkeys/validators.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-// NOTE(jimmylee)
-// Vendored from
-// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/validators.ts
-
-import { FormTags, Hotkey, Scopes, Trigger } from '@modules/hotkeys/types'
-import { isHotkeyPressed, isReadonlyArray } from '@modules/hotkeys/is-hotkey-pressed'
-import { mapKey } from '@modules/hotkeys/parse-hotkeys'
-
-export function maybePreventDefault(e: KeyboardEvent, hotkey: Hotkey, preventDefault?: Trigger): void {
-  if ((typeof preventDefault === 'function' && preventDefault(e, hotkey)) || preventDefault === true) {
-    e.preventDefault()
-  }
-}
-
-export function isHotkeyEnabled(e: KeyboardEvent, hotkey: Hotkey, enabled?: Trigger): boolean {
-  if (typeof enabled === 'function') {
-    return enabled(e, hotkey)
-  }
-
-  return enabled === true || enabled === undefined
-}
-
-export function isKeyboardEventTriggeredByInput(ev: KeyboardEvent): boolean {
-  return isHotkeyEnabledOnTag(ev, ['input', 'textarea', 'select'])
-}
-
-export function isHotkeyEnabledOnTag(
-  event: KeyboardEvent,
-  enabledOnTags: readonly FormTags[] | boolean = false
-): boolean {
-  const {target, composed} = event;
-
-  let targetTagName: string | null = null
-
-  if (isCustomElement(target as HTMLElement) && composed) {
-    targetTagName = event.composedPath()[0] && (event.composedPath()[0] as HTMLElement).tagName;
-  } else {
-    targetTagName = target && (target as HTMLElement).tagName;
-  }
-
-  if (isReadonlyArray(enabledOnTags)) {
-    return Boolean(
-      targetTagName && enabledOnTags && enabledOnTags.some((tag) => tag.toLowerCase() === targetTagName?.toLowerCase())
-    )
-  }
-
-  return Boolean(targetTagName && enabledOnTags && enabledOnTags)
-}
-
-export function isCustomElement(element: HTMLElement): boolean {
-  // We just do a basic check w/o any complex RegEx or validation against the list of legacy names containing a hyphen,
-  // as none of them is likely to be an event target, and it won't hurt anyway if we miss.
-  // see: https://html.spec.whatwg.org/multipage/custom-elements.html#prod-potentialcustomelementname
-  return !!element.tagName && !element.tagName.startsWith("-") && element.tagName.includes("-");
-}
-
-export function isScopeActive(activeScopes: string[], scopes?: Scopes): boolean {
-  if (activeScopes.length === 0 && scopes) {
-    console.warn(
-      'A hotkey has the "scopes" option set, however no active scopes were found. If you want to use the global scopes feature, you need to wrap your app in a <HotkeysProvider>'
-    )
-
-    return true
-  }
-
-  if (!scopes) {
-    return true
-  }
-
-  return activeScopes.some((scope) => scopes.includes(scope)) || activeScopes.includes('*')
-}
-
-export const isHotkeyMatchingKeyboardEvent = (e: KeyboardEvent, hotkey: Hotkey, ignoreModifiers = false): boolean => {
-  const { alt, meta, mod, shift, ctrl, keys } = hotkey
-  const { key: pressedKeyUppercase, code, ctrlKey, metaKey, shiftKey, altKey } = e
-
-  const keyCode = mapKey(code)
-  const pressedKey = pressedKeyUppercase.toLowerCase()
-
-  if (
-    !keys?.includes(keyCode) &&
-    !keys?.includes(pressedKey) &&
-    !['ctrl', 'control', 'unknown', 'meta', 'alt', 'shift', 'os'].includes(keyCode)
-  ) {
-    return false
-  }
-
-  if (!ignoreModifiers) {
-    // We check the pressed keys for compatibility with the keyup event. In keyup events the modifier flags are not set.
-    if (alt === !altKey && pressedKey !== 'alt') {
-      return false
-    }
-
-    if (shift === !shiftKey && pressedKey !== 'shift') {
-      return false
-    }
-
-    // Mod is a special key name that is checking for meta on macOS and ctrl on other platforms
-    if (mod) {
-      if (!metaKey && !ctrlKey) {
-        return false
-      }
-    } else {
-      if (meta === !metaKey && pressedKey !== 'meta' && pressedKey !== 'os') {
-        return false
-      }
-
-      if (ctrl === !ctrlKey && pressedKey !== 'ctrl' && pressedKey !== 'control') {
-        return false
-      }
-    }
-  }
-
-  // All modifiers are correct, now check the key
-  // If the key is set, we check for the key
-  if (keys && keys.length === 1 && (keys.includes(pressedKey) || keys.includes(keyCode))) {
-    return true
-  } else if (keys) {
-    // Check if all keys are present in pressedDownKeys set
-    return isHotkeyPressed(keys)
-  } else if (!keys) {
-    // If the key is not set, we only listen for modifiers, that check went alright, so we return true
-    return true
-  }
-
-  // There is nothing that matches.
-  return false
-}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..6618640
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6051 @@
+{
+  "name": "srcl-root",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "srcl-root",
+      "version": "1.0.0",
+      "workspaces": [
+        "packages/components",
+        "packages/www-sacred"
+      ],
+      "devDependencies": {
+        "npm-run-all": "^4.1.5",
+        "typescript": "^5.9.2"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
+      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
+      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.4"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
+      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.4.tgz",
+      "integrity": "sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.4.tgz",
+      "integrity": "sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.3.tgz",
+      "integrity": "sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.3.tgz",
+      "integrity": "sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.3.tgz",
+      "integrity": "sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.3.tgz",
+      "integrity": "sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.3.tgz",
+      "integrity": "sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.3.tgz",
+      "integrity": "sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.3.tgz",
+      "integrity": "sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.4.tgz",
+      "integrity": "sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.4.tgz",
+      "integrity": "sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.4.tgz",
+      "integrity": "sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.4.tgz",
+      "integrity": "sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.4.tgz",
+      "integrity": "sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.4.tgz",
+      "integrity": "sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.4.tgz",
+      "integrity": "sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.4.tgz",
+      "integrity": "sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.5.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.4.tgz",
+      "integrity": "sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.4.tgz",
+      "integrity": "sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.4.tgz",
+      "integrity": "sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.5.tgz",
+      "integrity": "sha512-TBr9Cf9onSAS2LQ2+QHx6XcC6h9+RIzJgbqG3++9TUZSH204AwEy5jg3BTQ0VATsyoGj4ee49tN/y6rvaOOtcg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@tybys/wasm-util": "^0.10.1"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.3.5.tgz",
+      "integrity": "sha512-7g06v8BUVtN2njAX/r8gheoVffhiKFVt4nx74Tt6G4Hqw9HCLYQVx/GkH2qHvPtAHZaUNZ0VXAa0pQP6v1wk7g==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.3.5.tgz",
+      "integrity": "sha512-lM/8tilIsqBq+2nq9kbTW19vfwFve0NR7MxfkuSUbRSgXlMQoJYg+31+++XwKVSXk4uT23G2eF/7BRIKdn8t8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.3.5.tgz",
+      "integrity": "sha512-WhwegPQJ5IfoUNZUVsI9TRAlKpjGVK0tpJTL6KeiC4cux9774NYE9Wu/iCfIkL/5J8rPAkqZpG7n+EfiAfidXA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.3.5.tgz",
+      "integrity": "sha512-LVD6uMOZ7XePg3KWYdGuzuvVboxujGjbcuP2jsPAN3MnLdLoZUXKRc6ixxfs03RH7qBdEHCZjyLP/jBdCJVRJQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.3.5.tgz",
+      "integrity": "sha512-k8aVScYZ++BnS2P69ClK7v4nOu702jcF9AIHKu6llhHEtBSmM2zkPGl9yoqbSU/657IIIb0QHpdxEr0iW9z53A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.3.5.tgz",
+      "integrity": "sha512-2xYU0DI9DGN/bAHzVwADid22ba5d/xrbrQlr2U+/Q5WkFUzeL0TDR963BdrtLS/4bMmKZGptLeg6282H/S2i8A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.3.5.tgz",
+      "integrity": "sha512-TRYIqAGf1KCbuAB0gjhdn5Ytd8fV+wJSM2Nh2is/xEqR8PZHxfQuaiNhoF50XfY90sNpaRMaGhF6E+qjV1b9Tg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.3.5.tgz",
+      "integrity": "sha512-h04/7iMEUSMY6fDGCvdanKqlO1qYvzNxntZlCzfE8i5P0uqzVQWQquU1TIhlz0VqGQGXLrFDuTJVONpqGqjGKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.3.5.tgz",
+      "integrity": "sha512-5fhH6fccXxnX2KhllnGhkYMndhOiLOLEiVGYjP2nizqeGWkN10sA9taATlXwake2E2XMvYZjjz0Uj7T0y+z1yw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.89.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.89.0.tgz",
+      "integrity": "sha512-yuo+ECPIW5Q9mSeNmCDC2im33bfKuwW18mwkaHMQh8KakHYDzj4ci/q7wxf2qS3dMlVVCIyrs3kFtH5LmnlYnw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@quansync/fs": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@quansync/fs/-/fs-0.1.5.tgz",
+      "integrity": "sha512-lNS9hL2aS2NZgNW7BBj+6EBl4rOf8l+tQ0eRY6JWCI8jI2kc53gSoqbjojU0OnAWhzoXiOjFyGsHcDGePB3lhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quansync": "^0.2.11"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-beta.38.tgz",
+      "integrity": "sha512-AE3HFQrjWCKLFZD1Vpiy+qsqTRwwoil1oM5WsKPSmfQ5fif/A+ZtOZetF32erZdsR7qyvns6qHEteEsF6g6rsQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-beta.38.tgz",
+      "integrity": "sha512-RaoWOKc0rrFsVmKOjQpebMY6c6/I7GR1FBc25v7L/R7NlM0166mUotwGEv7vxu7ruXH4SJcFeVrfADFUUXUmmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-beta.38.tgz",
+      "integrity": "sha512-Ymojqc2U35iUc8NFU2XX1WQPfBRRHN6xHcrxAf9WS8BFFBn8pDrH5QPvH1tYs3lDkw6UGGbanr1RGzARqdUp1g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-beta.38.tgz",
+      "integrity": "sha512-0ermTQ//WzSI0nOL3z/LUWMNiE9xeM5cLGxjewPFEexqxV/0uM8/lNp9QageQ8jfc/VO1OURsGw34HYO5PaL8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-beta.38.tgz",
+      "integrity": "sha512-GADxzVUTCTp6EWI52831A29Tt7PukFe94nhg/SUsfkI33oTiNQtPxyLIT/3oRegizGuPSZSlrdBurkjDwxyEUQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-beta.38.tgz",
+      "integrity": "sha512-SKO7Exl5Yem/OSNoA5uLHzyrptUQ8Hg70kHDxuwEaH0+GUg+SQe9/7PWmc4hFKBMrJGdQtii8WZ0uIz9Dofg5Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-beta.38.tgz",
+      "integrity": "sha512-SOo6+WqhXPBaShLxLT0eCgH17d3Yu1lMAe4mFP0M9Bvr/kfMSOPQXuLxBcbBU9IFM9w3N6qP9xWOHO+oUJvi8Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-beta.38.tgz",
+      "integrity": "sha512-yvsQ3CyrodOX+lcoi+lejZGCOvJZa9xTsNB8OzpMDmHeZq3QzJfpYjXSAS6vie70fOkLVJb77UqYO193Cl8XBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-beta.38.tgz",
+      "integrity": "sha512-84qzKMwUwikfYeOuJ4Kxm/3z15rt0nFGGQArHYIQQNSTiQdxGHxOkqXtzPFqrVfBJUdxBAf+jYzR1pttFJuWyg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-beta.38.tgz",
+      "integrity": "sha512-QrNiWlce01DYH0rL8K3yUBu+lNzY+B0DyCbIc2Atan6/S6flxOL0ow5DLQvMamOI/oKhrJ4xG+9MkMb9dDHbLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-beta.38.tgz",
+      "integrity": "sha512-fnLtHyjwEsG4/aNV3Uv3Qd1ZbdH+CopwJNoV0RgBqrcQB8V6/Qdikd5JKvnO23kb3QvIpP+dAMGZMv1c2PJMzw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-beta.38.tgz",
+      "integrity": "sha512-19cTfnGedem+RY+znA9J6ARBOCEFD4YSjnx0p5jiTm9tR6pHafRfFIfKlTXhun+NL0WWM/M0eb2IfPPYUa8+wg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-ia32-msvc": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.0.0-beta.38.tgz",
+      "integrity": "sha512-HcICm4YzFJZV+fI0O0bFLVVlsWvRNo/AB9EfUXvNYbtAxakCnQZ15oq22deFdz6sfi9Y4/SagH2kPU723dhCFA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-beta.38.tgz",
+      "integrity": "sha512-4Qx6cgEPXLb0XsCyLoQcUgYBpfL0sjugftob+zhUH0EOk/NVCAIT+h0NJhY+jn7pFpeKxhNMqhvTNx3AesxIAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.38.tgz",
+      "integrity": "sha512-N/ICGKleNhA5nc9XXQG/kkKHJ7S55u0x0XUJbbkmdCnFuoRkM1Il12q9q0eX19+M7KKUEPw/daUPIRnxhcxAIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+      "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "estree-walker": "^2.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@srcl/ui": {
+      "resolved": "packages/components",
+      "link": true
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
+      "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/cssnano": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/cssnano/-/cssnano-5.0.0.tgz",
+      "integrity": "sha512-z98V7ICNAojxj9YV9+Q8qV+F7fW0poLWJRjed9tu7KNdYzHwAvLOAsTMI8xWjkOY9yzO+HmMxRRixlIvRsZwXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss": "^8"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.5.2.tgz",
+      "integrity": "sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.12.0"
+      }
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.13",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
+      "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ansis": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansis/-/ansis-4.1.0.tgz",
+      "integrity": "sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-kit": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.1.2.tgz",
+      "integrity": "sha512-cl76xfBQM6pztbrFWRnxbrDm9EOqDr1BF6+qQnnDZG2Co2LjyUktkN9GTJfBAfdae+DbT2nJf2nCGAdDDN7W2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.0",
+        "pathe": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.6.tgz",
+      "integrity": "sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.5.0.tgz",
+      "integrity": "sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.26.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.2.tgz",
+      "integrity": "sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.8.3",
+        "caniuse-lite": "^1.0.30001741",
+        "electron-to-chromium": "^1.5.218",
+        "node-releases": "^2.0.21",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001743",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001743.tgz",
+      "integrity": "sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "engines": {
+        "node": ">=4.8"
+      }
+    },
+    "node_modules/cross-spawn/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssnano": {
+      "version": "5.1.15",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
+      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-preset-default": "^5.2.14",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "5.2.14",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-declaration-sorter": "^6.3.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-calc": "^8.2.3",
+        "postcss-colormin": "^5.3.1",
+        "postcss-convert-values": "^5.1.3",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-discard-duplicates": "^5.1.0",
+        "postcss-discard-empty": "^5.1.1",
+        "postcss-discard-overridden": "^5.1.0",
+        "postcss-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.4",
+        "postcss-minify-font-values": "^5.1.0",
+        "postcss-minify-gradients": "^5.1.1",
+        "postcss-minify-params": "^5.1.4",
+        "postcss-minify-selectors": "^5.2.1",
+        "postcss-normalize-charset": "^5.1.0",
+        "postcss-normalize-display-values": "^5.1.0",
+        "postcss-normalize-positions": "^5.1.1",
+        "postcss-normalize-repeat-style": "^5.1.1",
+        "postcss-normalize-string": "^5.1.0",
+        "postcss-normalize-timing-functions": "^5.1.0",
+        "postcss-normalize-unicode": "^5.1.1",
+        "postcss-normalize-url": "^5.1.0",
+        "postcss-normalize-whitespace": "^5.1.1",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.2",
+        "postcss-reduce-transforms": "^5.1.0",
+        "postcss-svgo": "^5.1.0",
+        "postcss-unique-selectors": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-default/node_modules/css-declaration-sorter": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano/node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/diff": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.2.tgz",
+      "integrity": "sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/dts-resolver": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/dts-resolver/-/dts-resolver-2.1.2.tgz",
+      "integrity": "sha512-xeXHBQkn2ISSXxbJWD828PFjtyg+/UrMDo7W4Ffcs7+YWCquxU8YjV1KoxuiL+eJ5pg3ll+bC6flVv61L3LKZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "oxc-resolver": ">=11.0.0"
+      },
+      "peerDependenciesMeta": {
+        "oxc-resolver": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.222",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.222.tgz",
+      "integrity": "sha512-gA7psSwSwQRE60CEoLz6JBCQPIxNeuzB2nL8vE03GK/OHxlvykbLyeiumQy1iH5C2f3YbRAZpGCMT12a/9ih9w==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/empathic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/empathic/-/empathic-2.0.0.tgz",
+      "integrity": "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jiti": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
+      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/load-json-file/node_modules/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.19",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/memorystream": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
+      "integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "15.3.5",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.3.5.tgz",
+      "integrity": "sha512-RkazLBMMDJSJ4XZQ81kolSpwiCt907l0xcgcpF4xC2Vml6QVcPNXW0NQRwQ80FFtSn7UM52XN0anaw8TEJXaiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.3.5",
+        "@swc/counter": "0.1.3",
+        "@swc/helpers": "0.5.15",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.3.5",
+        "@next/swc-darwin-x64": "15.3.5",
+        "@next/swc-linux-arm64-gnu": "15.3.5",
+        "@next/swc-linux-arm64-musl": "15.3.5",
+        "@next/swc-linux-x64-gnu": "15.3.5",
+        "@next/swc-linux-x64-musl": "15.3.5",
+        "@next/swc-win32-arm64-msvc": "15.3.5",
+        "@next/swc-win32-x64-msvc": "15.3.5",
+        "sharp": "^0.34.1"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
+      "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/normalize-package-data/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-all": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
+      "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "chalk": "^2.4.1",
+        "cross-spawn": "^6.0.5",
+        "memorystream": "^0.3.1",
+        "minimatch": "^3.0.4",
+        "pidtree": "^0.3.0",
+        "read-pkg": "^3.0.0",
+        "shell-quote": "^1.6.1",
+        "string.prototype.padend": "^3.0.0"
+      },
+      "bin": {
+        "npm-run-all": "bin/npm-run-all/index.js",
+        "run-p": "bin/run-p/index.js",
+        "run-s": "bin/run-s/index.js"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/p-queue": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
+      "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.4",
+        "p-timeout": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-finally": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pidtree": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
+      "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.2"
+      }
+    },
+    "node_modules/postcss-calc/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-rules/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
+      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
+      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "normalize-url": "^6.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^2.7.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/postcss-svgo/node_modules/svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-unique-selectors/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/query-string": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
+      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
+      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.1"
+      }
+    },
+    "node_modules/read-pkg": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+      "integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "load-json-file": "^4.0.0",
+        "normalize-package-data": "^2.3.2",
+        "path-type": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/read-pkg/node_modules/path-type": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-beta.38.tgz",
+      "integrity": "sha512-58frPNX55Je1YsyrtPJv9rOSR3G5efUZpRqok94Efsj0EUa8dnqJV3BldShyI7A+bVPleucOtzXHwVpJRcR0kQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.89.0",
+        "@rolldown/pluginutils": "1.0.0-beta.38",
+        "ansis": "^4.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-beta.38",
+        "@rolldown/binding-darwin-arm64": "1.0.0-beta.38",
+        "@rolldown/binding-darwin-x64": "1.0.0-beta.38",
+        "@rolldown/binding-freebsd-x64": "1.0.0-beta.38",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-beta.38",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-beta.38",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-beta.38",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-beta.38",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-beta.38",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-beta.38",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-beta.38",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-beta.38",
+        "@rolldown/binding-win32-ia32-msvc": "1.0.0-beta.38",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-beta.38"
+      }
+    },
+    "node_modules/rolldown-plugin-dts": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/rolldown-plugin-dts/-/rolldown-plugin-dts-0.16.7.tgz",
+      "integrity": "sha512-9iDzS4MHXMyieisFbWxuz96i/idGJNpvWILqCH06mrEZvn8Q2el3Q63xxjOt7HJjTOUNFhB1isvZFy4dA87lPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/generator": "^7.28.3",
+        "@babel/parser": "^7.28.4",
+        "@babel/types": "^7.28.4",
+        "ast-kit": "^2.1.2",
+        "birpc": "^2.5.0",
+        "debug": "^4.4.3",
+        "dts-resolver": "^2.1.2",
+        "get-tsconfig": "^4.10.1",
+        "magic-string": "^0.30.19"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@ts-macro/tsc": "^0.3.6",
+        "@typescript/native-preview": ">=7.0.0-dev.20250601.1",
+        "rolldown": "^1.0.0-beta.9",
+        "typescript": "^5.0.0",
+        "vue-tsc": "~3.0.3"
+      },
+      "peerDependenciesMeta": {
+        "@ts-macro/tsc": {
+          "optional": true
+        },
+        "@typescript/native-preview": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        },
+        "vue-tsc": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup": {
+      "version": "2.79.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
+      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup-plugin-scss": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-scss/-/rollup-plugin-scss-4.0.1.tgz",
+      "integrity": "sha512-3W3+3OzR+shkDl3hJ1XTAuGkP4AfiLgIjie2GtcoZ9pHfRiNqeDbtCu1EUnkjZ98EPIM6nnMIXkKlc7Sx5bRvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rollup-pluginutils": "^2.3.3"
+      }
+    },
+    "node_modules/rollup-plugin-styles": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-styles/-/rollup-plugin-styles-4.0.0.tgz",
+      "integrity": "sha512-A2K2sao84OsTmDxXG83JTCdXWrmgvQkkI38XDat46rdtpGMRm9tSYqeCdlwwGDJF4kKIafhV1mUidqu8MxUGig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^4.1.2",
+        "@types/cssnano": "^5.0.0",
+        "cosmiconfig": "^7.0.1",
+        "cssnano": "^5.0.15",
+        "fs-extra": "^10.0.0",
+        "icss-utils": "^5.1.0",
+        "mime-types": "^2.1.34",
+        "p-queue": "^6.6.2",
+        "postcss": "^8.4.5",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "query-string": "^7.1.0",
+        "resolve": "^1.21.0",
+        "source-map-js": "^1.0.1",
+        "tslib": "^2.3.1"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.63.0"
+      }
+    },
+    "node_modules/rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "estree-walker": "^0.6.1"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.92.1.tgz",
+      "integrity": "sha512-ffmsdbwqb3XeyR8jJR6KelIXARM9bFQe8A6Q3W4Klmwy5Ckd5gz7jgUNHo4UOqutU5Sk1DtKLbpDP0nLCg1xqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
+      "integrity": "sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.0",
+        "semver": "^7.7.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.4",
+        "@img/sharp-darwin-x64": "0.34.4",
+        "@img/sharp-libvips-darwin-arm64": "1.2.3",
+        "@img/sharp-libvips-darwin-x64": "1.2.3",
+        "@img/sharp-libvips-linux-arm": "1.2.3",
+        "@img/sharp-libvips-linux-arm64": "1.2.3",
+        "@img/sharp-libvips-linux-ppc64": "1.2.3",
+        "@img/sharp-libvips-linux-s390x": "1.2.3",
+        "@img/sharp-libvips-linux-x64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3",
+        "@img/sharp-linux-arm": "0.34.4",
+        "@img/sharp-linux-arm64": "0.34.4",
+        "@img/sharp-linux-ppc64": "0.34.4",
+        "@img/sharp-linux-s390x": "0.34.4",
+        "@img/sharp-linux-x64": "0.34.4",
+        "@img/sharp-linuxmusl-arm64": "0.34.4",
+        "@img/sharp-linuxmusl-x64": "0.34.4",
+        "@img/sharp-wasm32": "0.34.4",
+        "@img/sharp-win32-arm64": "0.34.4",
+        "@img/sharp-win32-ia32": "0.34.4",
+        "@img/sharp-win32-x64": "0.34.4"
+      }
+    },
+    "node_modules/sharp/node_modules/detect-libc": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
+      "integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
+      "dev": true,
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.22",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.22.tgz",
+      "integrity": "sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/string.prototype.padend": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.6.tgz",
+      "integrity": "sha512-XZpspuSB7vJWhvJc9DLSlrXl1mcA2BdoY5jjnS135ydXqLoqhs96JjDtCkjJEQHvfqZIp9hBuBMgI589peyx9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylehacks": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/stylehacks/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.1.tgz",
+      "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tsdown": {
+      "version": "0.15.4",
+      "resolved": "https://registry.npmjs.org/tsdown/-/tsdown-0.15.4.tgz",
+      "integrity": "sha512-aoFE8disBg8BgYcOgradr/5Yd+QDBRQ+6z8mXo/Ib7+GIaJwJsI5l/ppve05CZGcSDqwdhF4gdrA0HPHBtbBqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansis": "^4.1.0",
+        "cac": "^6.7.14",
+        "chokidar": "^4.0.3",
+        "debug": "^4.4.3",
+        "diff": "^8.0.2",
+        "empathic": "^2.0.0",
+        "hookable": "^5.5.3",
+        "rolldown": "latest",
+        "rolldown-plugin-dts": "^0.16.7",
+        "semver": "^7.7.2",
+        "tinyexec": "^1.0.1",
+        "tinyglobby": "^0.2.15",
+        "tree-kill": "^1.2.2",
+        "unconfig": "^7.3.3"
+      },
+      "bin": {
+        "tsdown": "dist/run.mjs"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@arethetypeswrong/core": "^0.18.1",
+        "publint": "^0.3.0",
+        "typescript": "^5.0.0",
+        "unplugin-lightningcss": "^0.4.0",
+        "unplugin-unused": "^0.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@arethetypeswrong/core": {
+          "optional": true
+        },
+        "publint": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        },
+        "unplugin-lightningcss": {
+          "optional": true
+        },
+        "unplugin-unused": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unconfig": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/unconfig/-/unconfig-7.3.3.tgz",
+      "integrity": "sha512-QCkQoOnJF8L107gxfHL0uavn7WD9b3dpBcFX6HtfQYmjw2YzWxGuFQ0N0J6tE9oguCBJn9KOvfqYDCMPHIZrBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@quansync/fs": "^0.1.5",
+        "defu": "^6.1.4",
+        "jiti": "^2.5.1",
+        "quansync": "^0.2.11"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.12.0.tgz",
+      "integrity": "sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/www-sacred": {
+      "resolved": "packages/www-sacred",
+      "link": true
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "packages/components": {
+      "name": "@srcl/ui",
+      "version": "1.1.7",
+      "devDependencies": {
+        "@types/node": "^24.5.1",
+        "@types/react": "^19.1.13",
+        "rollup-plugin-scss": "^4.0.1",
+        "rollup-plugin-styles": "^4.0.0",
+        "sass": "1.92.1",
+        "tsdown": "^0.15.2",
+        "typescript": "^5.9.2"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0"
+      }
+    },
+    "packages/example-app": {
+      "name": "@scrl/example",
+      "version": "0.1.0",
+      "extraneous": true,
+      "dependencies": {
+        "next": "15.3.5",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "sass": "1.92.1"
+      },
+      "devDependencies": {
+        "@types/node": "^24.5.1",
+        "@types/react": "^19.1.13",
+        "typescript": "^5.9.2"
+      }
+    },
+    "packages/www-sacred": {
+      "version": "1.1.7",
+      "license": "MIT",
+      "dependencies": {
+        "next": "15.3.5",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "sass": "1.92.1"
+      },
+      "devDependencies": {
+        "@types/node": "^24.5.1",
+        "@types/react": "^19.1.13",
+        "ts-node": "^10.9.2",
+        "typescript": "^5.9.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/www-sacred/node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "packages/www-sacred/node_modules/ts-node": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 98413f5..15571e4 100755
--- a/package.json
+++ b/package.json
@@ -1,27 +1,22 @@
 {
-  "name": "srcl",
-  "description": "SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics.",
-  "engines": {
-    "node": ">=18"
-  },
-  "license": "MIT",
-  "version": "1.1.7",
+  "name": "srcl-root",
+  "version": "1.0.0",
+  "private": true,
+  "workspaces": [
+    "packages/components",
+    "packages/www-sacred"
+  ],
   "scripts": {
-    "dev": "next -p 10000",
-    "build": "next build",
-    "start": "PORT=10000 next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "next": "15.3.5",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "sass": "1.92.1"
+    "dev": "run-p dev:lib dev:site",
+    "dev:lib": "npm run build:watch --workspace=@srcl/ui",
+    "dev:site": "npm run dev --workspace=www-sacred",
+    "build": "npm run build --workspaces",
+    "start": "npm run start --workspaces",
+    "lint": "npm run lint --workspaces",
+    "types": "npm run types --workspaces"
   },
   "devDependencies": {
-    "@types/node": "^24.5.1",
-    "@types/react": "^19.1.13",
-    "ts-node": "^10.9.2",
+    "npm-run-all": "^4.1.5",
     "typescript": "^5.9.2"
   }
 }
diff --git a/packages/components/.gitignore b/packages/components/.gitignore
new file mode 100755
index 0000000..bf65c2d
--- /dev/null
+++ b/packages/components/.gitignore
@@ -0,0 +1,20 @@
+.next
+.nova
+.env
+.env.local
+.env-custom-development
+.env-development
+.env-textile
+.env-production
+.DS_STORE
+DS_STORE
+yarn.lock
+node_modules
+dist
+analytics.txt
+package-lock.json
+
+/**/*/.DS_STORE
+/**/*/node_modules
+/**/*/.next
+/**/*/.data
\ No newline at end of file
diff --git a/packages/components/global.d.ts b/packages/components/global.d.ts
new file mode 100644
index 0000000..ff3d73f
--- /dev/null
+++ b/packages/components/global.d.ts
@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
diff --git a/packages/components/package.json b/packages/components/package.json
new file mode 100644
index 0000000..d9e1b93
--- /dev/null
+++ b/packages/components/package.json
@@ -0,0 +1,360 @@
+{
+  "name": "@srcl/ui",
+  "version": "1.1.7",
+  "description": "SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics.",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
+    "types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "sass": "1.92.1",
+    "rollup-plugin-styles": "^4.0.0",
+    "@types/node": "^24.5.1",
+    "@types/react": "^19.1.13",
+    "rollup-plugin-scss": "^4.0.1",
+    "tsdown": "^0.15.2",
+    "typescript": "^5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./Accordion": {
+      "import": "./dist/components/Accordion/index.js",
+      "require": "./dist/components/Accordion/index.cjs"
+    },
+    "./ActionBar": {
+      "import": "./dist/components/ActionBar/index.js",
+      "require": "./dist/components/ActionBar/index.cjs"
+    },
+    "./ActionButton": {
+      "import": "./dist/components/ActionButton/index.js",
+      "require": "./dist/components/ActionButton/index.cjs"
+    },
+    "./ActionListItem": {
+      "import": "./dist/components/ActionListItem/index.js",
+      "require": "./dist/components/ActionListItem/index.cjs"
+    },
+    "./AlertBanner": {
+      "import": "./dist/components/AlertBanner/index.js",
+      "require": "./dist/components/AlertBanner/index.cjs"
+    },
+    "./Avatar": {
+      "import": "./dist/components/Avatar/index.js",
+      "require": "./dist/components/Avatar/index.cjs"
+    },
+    "./Badge": {
+      "import": "./dist/components/Badge/index.js",
+      "require": "./dist/components/Badge/index.cjs"
+    },
+    "./BarLoader": {
+      "import": "./dist/components/BarLoader/index.js",
+      "require": "./dist/components/BarLoader/index.cjs"
+    },
+    "./BarProgress": {
+      "import": "./dist/components/BarProgress/index.js",
+      "require": "./dist/components/BarProgress/index.cjs"
+    },
+    "./Block": {
+      "import": "./dist/components/Block/index.js",
+      "require": "./dist/components/Block/index.cjs"
+    },
+    "./BlockLoader": {
+      "import": "./dist/components/BlockLoader/index.js",
+      "require": "./dist/components/BlockLoader/index.cjs"
+    },
+    "./BreadCrumbs": {
+      "import": "./dist/components/BreadCrumbs/index.js",
+      "require": "./dist/components/BreadCrumbs/index.cjs"
+    },
+    "./Button": {
+      "import": "./dist/components/Button/index.js",
+      "require": "./dist/components/Button/index.cjs"
+    },
+    "./ButtonGroup": {
+      "import": "./dist/components/ButtonGroup/index.js",
+      "require": "./dist/components/ButtonGroup/index.cjs"
+    },
+    "./CanvasPlatformer": {
+      "import": "./dist/components/CanvasPlatformer/index.js",
+      "require": "./dist/components/CanvasPlatformer/index.cjs"
+    },
+    "./CanvasSnake": {
+      "import": "./dist/components/CanvasSnake/index.js",
+      "require": "./dist/components/CanvasSnake/index.cjs"
+    },
+    "./Card": {
+      "import": "./dist/components/Card/index.js",
+      "require": "./dist/components/Card/index.cjs"
+    },
+    "./CardDouble": {
+      "import": "./dist/components/CardDouble/index.js",
+      "require": "./dist/components/CardDouble/index.cjs"
+    },
+    "./Checkbox": {
+      "import": "./dist/components/Checkbox/index.js",
+      "require": "./dist/components/Checkbox/index.cjs"
+    },
+    "./Chessboard": {
+      "import": "./dist/components/Chessboard/index.js",
+      "require": "./dist/components/Chessboard/index.cjs"
+    },
+    "./CodeBlock": {
+      "import": "./dist/components/CodeBlock/index.js",
+      "require": "./dist/components/CodeBlock/index.cjs"
+    },
+    "./ComboBox": {
+      "import": "./dist/components/ComboBox/index.js",
+      "require": "./dist/components/ComboBox/index.cjs"
+    },
+    "./ContentFluid": {
+      "import": "./dist/components/ContentFluid/index.js",
+      "require": "./dist/components/ContentFluid/index.cjs"
+    },
+    "./DataTable": {
+      "import": "./dist/components/DataTable/index.js",
+      "require": "./dist/components/DataTable/index.cjs"
+    },
+    "./DatePicker": {
+      "import": "./dist/components/DatePicker/index.js",
+      "require": "./dist/components/DatePicker/index.cjs"
+    },
+    "./DebugGrid": {
+      "import": "./dist/components/DebugGrid/index.js",
+      "require": "./dist/components/DebugGrid/index.cjs"
+    },
+    "./Dialog": {
+      "import": "./dist/components/Dialog/index.js",
+      "require": "./dist/components/Dialog/index.cjs"
+    },
+    "./Divider": {
+      "import": "./dist/components/Divider/index.js",
+      "require": "./dist/components/Divider/index.cjs"
+    },
+    "./DOMSnake": {
+      "import": "./dist/components/DOMSnake/index.js",
+      "require": "./dist/components/DOMSnake/index.cjs"
+    },
+    "./Drawer": {
+      "import": "./dist/components/Drawer/index.js",
+      "require": "./dist/components/Drawer/index.cjs"
+    },
+    "./DropdownMenu": {
+      "import": "./dist/components/DropdownMenu/index.js",
+      "require": "./dist/components/DropdownMenu/index.cjs"
+    },
+    "./DropdownMenuTrigger": {
+      "import": "./dist/components/DropdownMenuTrigger/index.js",
+      "require": "./dist/components/DropdownMenuTrigger/index.cjs"
+    },
+    "./Grid": {
+      "import": "./dist/components/Grid/index.js",
+      "require": "./dist/components/Grid/index.cjs"
+    },
+    "./HoverComponentTrigger": {
+      "import": "./dist/components/HoverComponentTrigger/index.js",
+      "require": "./dist/components/HoverComponentTrigger/index.cjs"
+    },
+    "./Indent": {
+      "import": "./dist/components/Indent/index.js",
+      "require": "./dist/components/Indent/index.cjs"
+    },
+    "./Input": {
+      "import": "./dist/components/Input/index.js",
+      "require": "./dist/components/Input/index.cjs"
+    },
+    "./ListItem": {
+      "import": "./dist/components/ListItem/index.js",
+      "require": "./dist/components/ListItem/index.cjs"
+    },
+    "./MatrixLoader": {
+      "import": "./dist/components/MatrixLoader/index.js",
+      "require": "./dist/components/MatrixLoader/index.cjs"
+    },
+    "./Message": {
+      "import": "./dist/components/Message/index.js",
+      "require": "./dist/components/Message/index.cjs"
+    },
+    "./MessageViewer": {
+      "import": "./dist/components/MessageViewer/index.js",
+      "require": "./dist/components/MessageViewer/index.cjs"
+    },
+    "./ModalAlert": {
+      "import": "./dist/components/ModalAlert/index.js",
+      "require": "./dist/components/ModalAlert/index.cjs"
+    },
+    "./ModalCanvasPlatformer": {
+      "import": "./dist/components/ModalCanvasPlatformer/index.js",
+      "require": "./dist/components/ModalCanvasPlatformer/index.cjs"
+    },
+    "./ModalCanvasSnake": {
+      "import": "./dist/components/ModalCanvasSnake/index.js",
+      "require": "./dist/components/ModalCanvasSnake/index.cjs"
+    },
+    "./ModalChess": {
+      "import": "./dist/components/ModalChess/index.js",
+      "require": "./dist/components/ModalChess/index.cjs"
+    },
+    "./ModalCreateAccount": {
+      "import": "./dist/components/ModalCreateAccount/index.js",
+      "require": "./dist/components/ModalCreateAccount/index.cjs"
+    },
+    "./ModalDOMSnake": {
+      "import": "./dist/components/ModalDOMSnake/index.js",
+      "require": "./dist/components/ModalDOMSnake/index.cjs"
+    },
+    "./ModalError": {
+      "import": "./dist/components/ModalError/index.js",
+      "require": "./dist/components/ModalError/index.cjs"
+    },
+    "./ModalMatrixModes": {
+      "import": "./dist/components/ModalMatrixModes/index.js",
+      "require": "./dist/components/ModalMatrixModes/index.cjs"
+    },
+    "./ModalStack": {
+      "import": "./dist/components/ModalStack/index.js",
+      "require": "./dist/components/ModalStack/index.cjs"
+    },
+    "./ModalTrigger": {
+      "import": "./dist/components/ModalTrigger/index.js",
+      "require": "./dist/components/ModalTrigger/index.cjs"
+    },
+    "./Navigation": {
+      "import": "./dist/components/Navigation/index.js",
+      "require": "./dist/components/Navigation/index.cjs"
+    },
+    "./NumberRangeSlider": {
+      "import": "./dist/components/NumberRangeSlider/index.js",
+      "require": "./dist/components/NumberRangeSlider/index.cjs"
+    },
+    "./OutsideElementEvent": {
+      "import": "./dist/components/OutsideElementEvent/index.js",
+      "require": "./dist/components/OutsideElementEvent/index.cjs"
+    },
+    "./Popover": {
+      "import": "./dist/components/Popover/index.js",
+      "require": "./dist/components/Popover/index.cjs"
+    },
+    "./RadioButton": {
+      "import": "./dist/components/RadioButton/index.js",
+      "require": "./dist/components/RadioButton/index.cjs"
+    },
+    "./Row": {
+      "import": "./dist/components/Row/index.js",
+      "require": "./dist/components/Row/index.cjs"
+    },
+    "./RowEllipsis": {
+      "import": "./dist/components/RowEllipsis/index.js",
+      "require": "./dist/components/RowEllipsis/index.cjs"
+    },
+    "./RowSpaceBetween": {
+      "import": "./dist/components/RowSpaceBetween/index.js",
+      "require": "./dist/components/RowSpaceBetween/index.cjs"
+    },
+    "./Select": {
+      "import": "./dist/components/Select/index.js",
+      "require": "./dist/components/Select/index.cjs"
+    },
+    "./SidebarLayout": {
+      "import": "./dist/components/SidebarLayout/index.js",
+      "require": "./dist/components/SidebarLayout/index.cjs"
+    },
+    "./Table": {
+      "import": "./dist/components/Table/index.js",
+      "require": "./dist/components/Table/index.cjs"
+    },
+    "./TableColumn": {
+      "import": "./dist/components/TableColumn/index.js",
+      "require": "./dist/components/TableColumn/index.cjs"
+    },
+    "./TableRow": {
+      "import": "./dist/components/TableRow/index.js",
+      "require": "./dist/components/TableRow/index.cjs"
+    },
+    "./Text": {
+      "import": "./dist/components/Text/index.js",
+      "require": "./dist/components/Text/index.cjs"
+    },
+    "./TextArea": {
+      "import": "./dist/components/TextArea/index.js",
+      "require": "./dist/components/TextArea/index.cjs"
+    },
+    "./Tooltip": {
+      "import": "./dist/components/Tooltip/index.js",
+      "require": "./dist/components/Tooltip/index.cjs"
+    },
+    "./TreeView": {
+      "import": "./dist/components/TreeView/index.js",
+      "require": "./dist/components/TreeView/index.cjs"
+    },
+    "./context": {
+      "import": "./dist/context/index.js",
+      "require": "./dist/context/index.cjs"
+    },
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.cjs"
+    },
+    "./modules/cors": {
+      "import": "./dist/modules/cors.js",
+      "require": "./dist/modules/cors.cjs"
+    },
+    "./modules/hotkeys": {
+      "import": "./dist/modules/hotkeys/index.js",
+      "require": "./dist/modules/hotkeys/index.cjs"
+    },
+    "./modules/hotkeys/is-hotkey-pressed": {
+      "import": "./dist/modules/hotkeys/is-hotkey-pressed.js",
+      "require": "./dist/modules/hotkeys/is-hotkey-pressed.cjs"
+    },
+    "./modules/hotkeys/parse-hotkeys": {
+      "import": "./dist/modules/hotkeys/parse-hotkeys.js",
+      "require": "./dist/modules/hotkeys/parse-hotkeys.cjs"
+    },
+    "./modules/hotkeys/types": {
+      "import": "./dist/modules/hotkeys/types.js",
+      "require": "./dist/modules/hotkeys/types.cjs"
+    },
+    "./modules/hotkeys/use-deep-equal-memo": {
+      "import": "./dist/modules/hotkeys/use-deep-equal-memo.js",
+      "require": "./dist/modules/hotkeys/use-deep-equal-memo.cjs"
+    },
+    "./modules/hotkeys/use-hotkeys": {
+      "import": "./dist/modules/hotkeys/use-hotkeys.js",
+      "require": "./dist/modules/hotkeys/use-hotkeys.cjs"
+    },
+    "./modules/hotkeys/use-record-hotkeys": {
+      "import": "./dist/modules/hotkeys/use-record-hotkeys.js",
+      "require": "./dist/modules/hotkeys/use-record-hotkeys.cjs"
+    },
+    "./modules/hotkeys/validators": {
+      "import": "./dist/modules/hotkeys/validators.js",
+      "require": "./dist/modules/hotkeys/validators.cjs"
+    },
+    "./modules/object-assign": {
+      "import": "./dist/modules/object-assign.js",
+      "require": "./dist/modules/object-assign.cjs"
+    },
+    "./modules/vary": {
+      "import": "./dist/modules/vary.js",
+      "require": "./dist/modules/vary.cjs"
+    },
+    "./utilities": {
+      "import": "./dist/utilities/index.js",
+      "require": "./dist/utilities/index.cjs"
+    },
+    "./package.json": "./package.json"
+  }
+}
diff --git a/components/Accordion.module.scss b/packages/components/src/components/Accordion/Accordion.module.scss
similarity index 100%
rename from components/Accordion.module.scss
rename to packages/components/src/components/Accordion/Accordion.module.scss
diff --git a/packages/components/src/components/Accordion/Accordion.tsx b/packages/components/src/components/Accordion/Accordion.tsx
new file mode 100644
index 0000000..7ec1fb2
--- /dev/null
+++ b/packages/components/src/components/Accordion/Accordion.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import styles from "./Accordion.module.scss";
+
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
+
+import { Row } from "@srcl/ui/components/Row";
+
+interface AccordionProps {
+  defaultValue?: boolean;
+  title: string;
+  children?: React.ReactNode;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  defaultValue = false,
+  title,
+  children,
+}) => {
+  const [show, setShow] = React.useState<boolean>(defaultValue);
+  const accordionRef = React.useRef<HTMLDivElement | null>(null);
+
+  const toggleShow = (): void => {
+    setShow((prevShow) => !prevShow);
+  };
+
+  return (
+    <>
+      <Row
+        ref={accordionRef}
+        tabIndex={0}
+        role="button"
+        onClick={toggleShow}
+        aria-expanded={show}
+      >
+        <div
+          className={Utilities.classNames(
+            styles.flex,
+            show ? styles.active : undefined
+          )}
+        >
+          <span className={styles.icon}>{show ? "▾" : "▸"}</span>
+          <span className={styles.content}>{title}</span>
+        </div>
+      </Row>
+      {show && <Row style={{ paddingLeft: "1ch" }}>{children}</Row>}
+    </>
+  );
+};
diff --git a/packages/components/src/components/Accordion/index.ts b/packages/components/src/components/Accordion/index.ts
new file mode 100644
index 0000000..924e91b
--- /dev/null
+++ b/packages/components/src/components/Accordion/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Accordion";
diff --git a/components/ActionBar.module.scss b/packages/components/src/components/ActionBar/ActionBar.module.scss
similarity index 100%
rename from components/ActionBar.module.scss
rename to packages/components/src/components/ActionBar/ActionBar.module.scss
diff --git a/components/ActionBar.tsx b/packages/components/src/components/ActionBar/ActionBar.tsx
similarity index 53%
rename from components/ActionBar.tsx
rename to packages/components/src/components/ActionBar/ActionBar.tsx
index bbd296f..0180cd7 100644
--- a/components/ActionBar.tsx
+++ b/packages/components/src/components/ActionBar/ActionBar.tsx
@@ -1,9 +1,8 @@
-import styles from '@components/ActionBar.module.scss';
+import styles from "./ActionBar.module.scss";
 
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as React from "react";
 
-import ButtonGroup from '@components/ButtonGroup';
+import { ButtonGroup } from "../ButtonGroup";
 
 interface ActionBarItem {
   hotkey?: string;
@@ -18,12 +17,10 @@ interface ActionBarProps {
   items: ActionBarItem[];
 }
 
-const ActionBar: React.FC<ActionBarProps> = ({ items }) => {
+export const ActionBar: React.FC<ActionBarProps> = ({ items }) => {
   return (
     <div className={styles.root}>
       <ButtonGroup items={items} />
     </div>
   );
 };
-
-export default ActionBar;
diff --git a/packages/components/src/components/ActionBar/index.ts b/packages/components/src/components/ActionBar/index.ts
new file mode 100644
index 0000000..69d6b68
--- /dev/null
+++ b/packages/components/src/components/ActionBar/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ActionBar";
diff --git a/components/ActionButton.module.scss b/packages/components/src/components/ActionButton/ActionButton.module.scss
similarity index 100%
rename from components/ActionButton.module.scss
rename to packages/components/src/components/ActionButton/ActionButton.module.scss
diff --git a/packages/components/src/components/ActionButton/ActionButton.tsx b/packages/components/src/components/ActionButton/ActionButton.tsx
new file mode 100644
index 0000000..628cf0a
--- /dev/null
+++ b/packages/components/src/components/ActionButton/ActionButton.tsx
@@ -0,0 +1,40 @@
+import styles from "./ActionButton.module.scss";
+
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
+
+interface ActionButtonProps {
+  onClick?: () => void;
+  hotkey?: any;
+  children?: React.ReactNode;
+  style?: any;
+  rootStyle?: any;
+  isSelected?: boolean;
+}
+
+export const ActionButton = React.forwardRef<HTMLDivElement, ActionButtonProps>(
+  ({ onClick, hotkey, children, style, rootStyle, isSelected }, ref) => {
+    return (
+      <div
+        className={Utilities.classNames(
+          styles.root,
+          isSelected ? styles.selected : null
+        )}
+        style={rootStyle}
+        onClick={onClick}
+        tabIndex={0}
+        ref={ref}
+        role="button"
+      >
+        {Utilities.isEmpty(hotkey) ? null : (
+          <span className={styles.hotkey}>{hotkey}</span>
+        )}
+        <span className={styles.content} style={style}>
+          {children}
+        </span>
+      </div>
+    );
+  }
+);
+
+ActionButton.displayName = "ActionButton";
diff --git a/packages/components/src/components/ActionButton/index.ts b/packages/components/src/components/ActionButton/index.ts
new file mode 100644
index 0000000..3a29bc6
--- /dev/null
+++ b/packages/components/src/components/ActionButton/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ActionButton";
diff --git a/components/ActionListItem.module.scss b/packages/components/src/components/ActionListItem/ActionListItem.module.scss
similarity index 100%
rename from components/ActionListItem.module.scss
rename to packages/components/src/components/ActionListItem/ActionListItem.module.scss
diff --git a/components/ActionListItem.tsx b/packages/components/src/components/ActionListItem/ActionListItem.tsx
similarity index 57%
rename from components/ActionListItem.tsx
rename to packages/components/src/components/ActionListItem/ActionListItem.tsx
index 6bee1f8..853bc31 100644
--- a/components/ActionListItem.tsx
+++ b/packages/components/src/components/ActionListItem/ActionListItem.tsx
@@ -1,6 +1,6 @@
-import styles from '@components/ActionListItem.module.scss';
+import styles from "./ActionListItem.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface ActionListItemProps {
   style?: React.CSSProperties;
@@ -11,12 +11,19 @@ interface ActionListItemProps {
   onClick?: React.MouseEventHandler<HTMLDivElement | HTMLAnchorElement>;
 }
 
-const ActionListItem: React.FC<ActionListItemProps> = (props) => {
+export const ActionListItem: React.FC<ActionListItemProps> = (props) => {
   const { href, target, onClick, children, icon, style } = props;
 
   if (href) {
     return (
-      <a className={styles.item} href={href} target={target} style={style} tabIndex={0} role="link">
+      <a
+        className={styles.item}
+        href={href}
+        target={target}
+        style={style}
+        tabIndex={0}
+        role="link"
+      >
         <figure className={styles.icon}>{icon}</figure>
         <span className={styles.text}>{children}</span>
       </a>
@@ -24,11 +31,15 @@ const ActionListItem: React.FC<ActionListItemProps> = (props) => {
   }
 
   return (
-    <div className={styles.item} onClick={onClick} style={style} tabIndex={0} role="button">
+    <div
+      className={styles.item}
+      onClick={onClick}
+      style={style}
+      tabIndex={0}
+      role="button"
+    >
       <figure className={styles.icon}>{icon}</figure>
       <span className={styles.text}>{children}</span>
     </div>
   );
 };
-
-export default ActionListItem;
diff --git a/packages/components/src/components/ActionListItem/index.ts b/packages/components/src/components/ActionListItem/index.ts
new file mode 100644
index 0000000..20af408
--- /dev/null
+++ b/packages/components/src/components/ActionListItem/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ActionListItem";
diff --git a/components/AlertBanner.module.scss b/packages/components/src/components/AlertBanner/AlertBanner.module.scss
similarity index 100%
rename from components/AlertBanner.module.scss
rename to packages/components/src/components/AlertBanner/AlertBanner.module.scss
diff --git a/packages/components/src/components/AlertBanner/AlertBanner.tsx b/packages/components/src/components/AlertBanner/AlertBanner.tsx
new file mode 100644
index 0000000..11c810a
--- /dev/null
+++ b/packages/components/src/components/AlertBanner/AlertBanner.tsx
@@ -0,0 +1,17 @@
+import styles from "./AlertBanner.module.scss";
+
+import * as React from "react";
+
+interface AlertBannerProps {
+  style?: any;
+  children?: any;
+}
+
+export const AlertBanner: React.FC<AlertBannerProps> = ({
+  style: propStyle,
+  ...rest
+}) => {
+  let style: React.CSSProperties = { ...propStyle };
+
+  return <div className={styles.root} {...rest} style={style} />;
+};
diff --git a/packages/components/src/components/AlertBanner/index.ts b/packages/components/src/components/AlertBanner/index.ts
new file mode 100644
index 0000000..46c07cc
--- /dev/null
+++ b/packages/components/src/components/AlertBanner/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./AlertBanner";
diff --git a/components/Avatar.module.scss b/packages/components/src/components/Avatar/Avatar.module.scss
similarity index 100%
rename from components/Avatar.module.scss
rename to packages/components/src/components/Avatar/Avatar.module.scss
diff --git a/packages/components/src/components/Avatar/Avatar.tsx b/packages/components/src/components/Avatar/Avatar.tsx
new file mode 100644
index 0000000..7aad33a
--- /dev/null
+++ b/packages/components/src/components/Avatar/Avatar.tsx
@@ -0,0 +1,57 @@
+import styles from "./Avatar.module.scss";
+
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
+
+interface AvatarProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "style" | "className" | "children"
+  > {
+  src?: string;
+  href?: string;
+  target?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export const Avatar: React.FC<AvatarProps> = (props) => {
+  const { src, style: propStyle, href, target, children, ...rest } = props;
+
+  const backgroundStyle = src ? { backgroundImage: `url(${src})` } : {};
+
+  const combinedStyle = { ...propStyle, ...backgroundStyle };
+
+  let avatarElement: React.ReactElement;
+
+  if (href) {
+    avatarElement = (
+      <a
+        className={Utilities.classNames(src ? styles.root : styles.placeholder)}
+        style={combinedStyle}
+        href={href}
+        target={target}
+        tabIndex={0}
+        role="link"
+      />
+    );
+  } else {
+    avatarElement = (
+      <figure
+        className={Utilities.classNames(src ? styles.root : styles.placeholder)}
+        style={combinedStyle}
+      />
+    );
+  }
+
+  if (!children) {
+    return avatarElement;
+  }
+
+  return (
+    <div className={styles.parent} {...rest}>
+      {avatarElement}
+      <span className={styles.right}>{children}</span>
+    </div>
+  );
+};
diff --git a/packages/components/src/components/Avatar/index.ts b/packages/components/src/components/Avatar/index.ts
new file mode 100644
index 0000000..175096b
--- /dev/null
+++ b/packages/components/src/components/Avatar/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Avatar";
diff --git a/components/Badge.module.scss b/packages/components/src/components/Badge/Badge.module.scss
similarity index 100%
rename from components/Badge.module.scss
rename to packages/components/src/components/Badge/Badge.module.scss
diff --git a/components/Badge.tsx b/packages/components/src/components/Badge/Badge.tsx
similarity index 51%
rename from components/Badge.tsx
rename to packages/components/src/components/Badge/Badge.tsx
index a8e078c..a34fb80 100644
--- a/components/Badge.tsx
+++ b/packages/components/src/components/Badge/Badge.tsx
@@ -1,19 +1,17 @@
-'use client';
+"use client";
 
-import styles from '@components/Badge.module.scss';
+import styles from "./Badge.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   children?: React.ReactNode;
 }
 
-const Badge: React.FC<BadgeProps> = ({ children, ...rest }) => {
+export const Badge: React.FC<BadgeProps> = ({ children, ...rest }) => {
   return (
     <span className={styles.root} {...rest}>
       {children}
     </span>
   );
 };
-
-export default Badge;
diff --git a/packages/components/src/components/Badge/index.ts b/packages/components/src/components/Badge/index.ts
new file mode 100644
index 0000000..168d456
--- /dev/null
+++ b/packages/components/src/components/Badge/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Badge";
diff --git a/components/BarLoader.module.scss b/packages/components/src/components/BarLoader/BarLoader.module.scss
similarity index 100%
rename from components/BarLoader.module.scss
rename to packages/components/src/components/BarLoader/BarLoader.module.scss
diff --git a/components/BarLoader.tsx b/packages/components/src/components/BarLoader/BarLoader.tsx
similarity index 75%
rename from components/BarLoader.tsx
rename to packages/components/src/components/BarLoader/BarLoader.tsx
index 007599c..4fe8ac5 100644
--- a/components/BarLoader.tsx
+++ b/packages/components/src/components/BarLoader/BarLoader.tsx
@@ -1,16 +1,21 @@
-'use client';
+"use client";
 
-import * as React from 'react';
+import * as React from "react";
 
-import styles from '@components/BarLoader.module.scss';
+import styles from "./BarLoader.module.scss";
 
 interface BarLoaderProps {
   intervalRate?: number;
   progress?: number;
 }
 
-const BarLoader: React.FC<BarLoaderProps> = ({ intervalRate, progress }) => {
-  const [currentProgress, setCurrentProgress] = React.useState<number>(progress || 0);
+export const BarLoader: React.FC<BarLoaderProps> = ({
+  intervalRate,
+  progress,
+}) => {
+  const [currentProgress, setCurrentProgress] = React.useState<number>(
+    progress || 0
+  );
 
   React.useEffect(() => {
     if (progress !== undefined) {
@@ -38,5 +43,3 @@ const BarLoader: React.FC<BarLoaderProps> = ({ intervalRate, progress }) => {
     </div>
   );
 };
-
-export default BarLoader;
diff --git a/packages/components/src/components/BarLoader/index.ts b/packages/components/src/components/BarLoader/index.ts
new file mode 100644
index 0000000..24d458c
--- /dev/null
+++ b/packages/components/src/components/BarLoader/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./BarLoader";
diff --git a/components/BarProgress.module.scss b/packages/components/src/components/BarProgress/BarProgress.module.scss
similarity index 100%
rename from components/BarProgress.module.scss
rename to packages/components/src/components/BarProgress/BarProgress.module.scss
diff --git a/components/BarProgress.tsx b/packages/components/src/components/BarProgress/BarProgress.tsx
similarity index 82%
rename from components/BarProgress.tsx
rename to packages/components/src/components/BarProgress/BarProgress.tsx
index b79ab0c..03aa5a7 100644
--- a/components/BarProgress.tsx
+++ b/packages/components/src/components/BarProgress/BarProgress.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import styles from '@components/BarProgress.module.scss';
+import styles from "./BarProgress.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface BarProgressProps {
   intervalRate?: number;
@@ -10,7 +10,11 @@ interface BarProgressProps {
   fillChar?: string;
 }
 
-const BarProgress: React.FC<BarProgressProps> = ({ intervalRate, progress, fillChar = '░' }) => {
+export const BarProgress: React.FC<BarProgressProps> = ({
+  intervalRate,
+  progress,
+  fillChar = "░",
+}) => {
   const [currentProgress, setCurrentProgress] = React.useState(progress ?? 0);
   const [containerWidth, setContainerWidth] = React.useState(0);
   const [charWidth, setCharWidth] = React.useState(0);
@@ -19,7 +23,7 @@ const BarProgress: React.FC<BarProgressProps> = ({ intervalRate, progress, fillC
   const measureRef = React.useRef<HTMLSpanElement>(null);
 
   React.useEffect(() => {
-    if (typeof progress === 'number') {
+    if (typeof progress === "number") {
       setCurrentProgress(progress);
       return;
     }
@@ -68,7 +72,14 @@ const BarProgress: React.FC<BarProgressProps> = ({ intervalRate, progress, fillC
   const barStr = fillChar.repeat(filledChars);
 
   return (
-    <div className={styles.root} ref={containerRef} aria-valuenow={cappedProgress} aria-valuemin={0} aria-valuemax={100} role="progressbar">
+    <div
+      className={styles.root}
+      ref={containerRef}
+      aria-valuenow={cappedProgress}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      role="progressbar"
+    >
       <span ref={measureRef} className={styles.measure}>
         {fillChar}
       </span>
@@ -76,5 +87,3 @@ const BarProgress: React.FC<BarProgressProps> = ({ intervalRate, progress, fillC
     </div>
   );
 };
-
-export default BarProgress;
diff --git a/packages/components/src/components/BarProgress/index.ts b/packages/components/src/components/BarProgress/index.ts
new file mode 100644
index 0000000..ebb05c7
--- /dev/null
+++ b/packages/components/src/components/BarProgress/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./BarProgress";
diff --git a/components/Block.module.scss b/packages/components/src/components/Block/Block.module.scss
similarity index 100%
rename from components/Block.module.scss
rename to packages/components/src/components/Block/Block.module.scss
diff --git a/components/Block.tsx b/packages/components/src/components/Block/Block.tsx
similarity index 53%
rename from components/Block.tsx
rename to packages/components/src/components/Block/Block.tsx
index 380fd34..19f444c 100644
--- a/components/Block.tsx
+++ b/packages/components/src/components/Block/Block.tsx
@@ -1,17 +1,15 @@
-import styles from '@components/Block.module.scss';
+import styles from "./Block.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface BlockProps extends React.HTMLAttributes<HTMLSpanElement> {
   children?: React.ReactNode;
 }
 
-const Block: React.FC<BlockProps> = ({ children, ...rest }) => {
+export const Block: React.FC<BlockProps> = ({ children, ...rest }) => {
   return (
     <span className={styles.block} {...rest}>
       {children}
     </span>
   );
 };
-
-export default Block;
diff --git a/packages/components/src/components/Block/index.ts b/packages/components/src/components/Block/index.ts
new file mode 100644
index 0000000..54854fc
--- /dev/null
+++ b/packages/components/src/components/Block/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Block";
diff --git a/components/BlockLoader.module.scss b/packages/components/src/components/BlockLoader/BlockLoader.module.scss
similarity index 100%
rename from components/BlockLoader.module.scss
rename to packages/components/src/components/BlockLoader/BlockLoader.module.scss
diff --git a/packages/components/src/components/BlockLoader/BlockLoader.tsx b/packages/components/src/components/BlockLoader/BlockLoader.tsx
new file mode 100644
index 0000000..8955ff1
--- /dev/null
+++ b/packages/components/src/components/BlockLoader/BlockLoader.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import styles from "./BlockLoader.module.scss";
+
+import * as React from "react";
+
+const SEQUENCES = [
+  ["⠁", "⠂", "⠄", "⡀", "⢀", "⠠", "⠐", "⠈"],
+  ["⣾", "⣽", "⣻", "⢿", "⡿", "⣟", "⣯", "⣷"],
+  ["▖", "▘", "▝", "▗"],
+  ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█", "▇", "▆", "▅", "▄", "▃", "▁"],
+  ["▉", "▊", "▋", "▌", "▍", "▎", "▏", "▎", "▍", "▌", "▋", "▊", "▉"],
+  ["←", "↖", "↑", "↗", "→", "↘", "↓", "↙"],
+  ["┤", "┘", "┴", "└", "├", "┌", "┬", "┐"],
+  ["◢", "◣", "◤", "◥"],
+  ["◰", "◳", "◲", "◱"],
+  ["◴", "◷", "◶", "◵"],
+  ["◐", "◓", "◑", "◒"],
+];
+
+interface BlockLoaderProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  mode?: number;
+}
+
+export const BlockLoader: React.FC<BlockLoaderProps> = ({ mode = 0 }) => {
+  if (!SEQUENCES[mode]) {
+    return <span className={styles.block}>�</span>;
+  }
+
+  const [index, setIndex] = React.useState(0);
+  const intervalRef = React.useRef<number | null>(null);
+  const indexLength = SEQUENCES[mode].length;
+
+  React.useEffect(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+
+    intervalRef.current = window.setInterval(() => {
+      setIndex((prevIndex) => (prevIndex + 1) % indexLength);
+    }, 100);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [indexLength]);
+
+  return <span className={styles.root}>{SEQUENCES[mode][index]}</span>;
+};
diff --git a/packages/components/src/components/BlockLoader/index.ts b/packages/components/src/components/BlockLoader/index.ts
new file mode 100644
index 0000000..ec4f39c
--- /dev/null
+++ b/packages/components/src/components/BlockLoader/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./BlockLoader";
diff --git a/components/BreadCrumbs.module.scss b/packages/components/src/components/BreadCrumbs/BreadCrumbs.module.scss
similarity index 100%
rename from components/BreadCrumbs.module.scss
rename to packages/components/src/components/BreadCrumbs/BreadCrumbs.module.scss
diff --git a/packages/components/src/components/BreadCrumbs/BreadCrumbs.tsx b/packages/components/src/components/BreadCrumbs/BreadCrumbs.tsx
new file mode 100644
index 0000000..1565e0f
--- /dev/null
+++ b/packages/components/src/components/BreadCrumbs/BreadCrumbs.tsx
@@ -0,0 +1,45 @@
+import styles from "./BreadCrumbs.module.scss";
+
+import * as React from "react";
+
+interface BreadCrumbsItem {
+  url?: string;
+  name: string;
+}
+
+interface BreadCrumbsProps {
+  items: BreadCrumbsItem[];
+}
+
+export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ items }) => {
+  return (
+    <nav aria-label="breadcrumb" className={styles.root}>
+      {items.map((item, index) => {
+        const linkElement = (
+          <a
+            className={styles.link}
+            href={item.url}
+            target="_blank"
+            tabIndex={0}
+            role="link"
+          >
+            {item.name}
+          </a>
+        );
+
+        return (
+          <span className={styles.line} key={index}>
+            {index === items.length - 1 ? (
+              <span>{linkElement}</span>
+            ) : (
+              linkElement
+            )}
+            {index < items.length - 1 && (
+              <span className={styles.symbol}> ❯ </span>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+};
diff --git a/packages/components/src/components/BreadCrumbs/index.ts b/packages/components/src/components/BreadCrumbs/index.ts
new file mode 100644
index 0000000..80eb2e1
--- /dev/null
+++ b/packages/components/src/components/BreadCrumbs/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./BreadCrumbs";
diff --git a/components/Button.module.scss b/packages/components/src/components/Button/Button.module.scss
similarity index 100%
rename from components/Button.module.scss
rename to packages/components/src/components/Button/Button.module.scss
diff --git a/components/Button.tsx b/packages/components/src/components/Button/Button.tsx
similarity index 52%
rename from components/Button.tsx
rename to packages/components/src/components/Button/Button.tsx
index 7d04b62..5286196 100644
--- a/components/Button.tsx
+++ b/packages/components/src/components/Button/Button.tsx
@@ -1,20 +1,25 @@
-'use client';
+"use client";
 
-import styles from '@components/Button.module.scss';
+import styles from "./Button.module.scss";
 
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  theme?: 'PRIMARY' | 'SECONDARY';
+  theme?: "PRIMARY" | "SECONDARY";
   isDisabled?: boolean;
   children?: React.ReactNode;
 }
 
-const Button: React.FC<ButtonProps> = ({ theme = 'PRIMARY', isDisabled, children, ...rest }) => {
+export const Button: React.FC<ButtonProps> = ({
+  theme = "PRIMARY",
+  isDisabled,
+  children,
+  ...rest
+}) => {
   let classNames = Utilities.classNames(styles.root, styles.primary);
 
-  if (theme === 'SECONDARY') {
+  if (theme === "SECONDARY") {
     classNames = Utilities.classNames(styles.root, styles.secondary);
   }
 
@@ -25,10 +30,14 @@ const Button: React.FC<ButtonProps> = ({ theme = 'PRIMARY', isDisabled, children
   }
 
   return (
-    <button className={classNames} role="button" tabIndex={0} disabled={isDisabled} {...rest}>
+    <button
+      className={classNames}
+      role="button"
+      tabIndex={0}
+      disabled={isDisabled}
+      {...rest}
+    >
       {children}
     </button>
   );
 };
-
-export default Button;
diff --git a/packages/components/src/components/Button/index.ts b/packages/components/src/components/Button/index.ts
new file mode 100644
index 0000000..4944f9f
--- /dev/null
+++ b/packages/components/src/components/Button/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Button";
diff --git a/components/ButtonGroup.module.scss b/packages/components/src/components/ButtonGroup/ButtonGroup.module.scss
similarity index 100%
rename from components/ButtonGroup.module.scss
rename to packages/components/src/components/ButtonGroup/ButtonGroup.module.scss
diff --git a/packages/components/src/components/ButtonGroup/ButtonGroup.tsx b/packages/components/src/components/ButtonGroup/ButtonGroup.tsx
new file mode 100644
index 0000000..9c9ebc0
--- /dev/null
+++ b/packages/components/src/components/ButtonGroup/ButtonGroup.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import styles from "./ButtonGroup.module.scss";
+
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
+
+import { ActionButton } from "../ActionButton";
+import { DropdownMenuTrigger } from "../DropdownMenuTrigger";
+
+export const ButtonGroup = (props) => {
+  if (!props.items) {
+    return null;
+  }
+
+  return (
+    <div
+      className={Utilities.classNames(
+        styles.root,
+        props.isFull ? styles.full : null
+      )}
+    >
+      {props.items.map((each) => {
+        if (each.items) {
+          return (
+            <DropdownMenuTrigger
+              key={each.body}
+              items={each.items}
+              hotkey={each.openHotkey}
+            >
+              <ActionButton hotkey={each.hotkey} isSelected={each.selected}>
+                {each.body}
+              </ActionButton>
+            </DropdownMenuTrigger>
+          );
+        }
+
+        return (
+          <ActionButton
+            key={each.body}
+            onClick={each.onClick}
+            hotkey={each.hotkey}
+            isSelected={each.selected}
+          >
+            {each.body}
+          </ActionButton>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/packages/components/src/components/ButtonGroup/index.ts b/packages/components/src/components/ButtonGroup/index.ts
new file mode 100644
index 0000000..617bac8
--- /dev/null
+++ b/packages/components/src/components/ButtonGroup/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ButtonGroup";
diff --git a/components/CanvasPlatformer.module.scss b/packages/components/src/components/CanvasPlatformer/CanvasPlatformer.module.scss
similarity index 100%
rename from components/CanvasPlatformer.module.scss
rename to packages/components/src/components/CanvasPlatformer/CanvasPlatformer.module.scss
diff --git a/components/CanvasPlatformer.tsx b/packages/components/src/components/CanvasPlatformer/CanvasPlatformer.tsx
similarity index 67%
rename from components/CanvasPlatformer.tsx
rename to packages/components/src/components/CanvasPlatformer/CanvasPlatformer.tsx
index 49431cb..f3ad6d6 100644
--- a/components/CanvasPlatformer.tsx
+++ b/packages/components/src/components/CanvasPlatformer/CanvasPlatformer.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import styles from '@components/CanvasPlatformer.module.scss';
+import styles from "./CanvasPlatformer.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
-import ActionButton from '@components/ActionButton';
+import { ActionButton } from "@srcl/ui/components/ActionButton";
 
 interface PlatformerProps {
   rows?: number;
@@ -37,13 +37,17 @@ interface Block {
   y: number;
 }
 
-const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
+export const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
   const [focused, setFocused] = React.useState(false);
 
   const positionRef = React.useRef<Position>({ x: 50, y: 0 });
   const velocityRef = React.useRef<Position>({ x: 0, y: 0 });
-  const keysRef = React.useRef<Keys>({ left: false, right: false, jump: false });
+  const keysRef = React.useRef<Keys>({
+    left: false,
+    right: false,
+    jump: false,
+  });
   const platformBlocksRef = React.useRef<Block[]>([]);
 
   React.useEffect(() => {
@@ -62,14 +66,17 @@ const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
       platformBlocksRef.current = [];
       const numBlocks = Math.floor(parentWidth / CHARACTER_WIDTH);
       for (let i = 0; i < numBlocks; i++) {
-        platformBlocksRef.current.push({ x: i * CHARACTER_WIDTH, y: platformY });
+        platformBlocksRef.current.push({
+          x: i * CHARACTER_WIDTH,
+          y: platformY,
+        });
       }
     };
 
     resizeCanvas();
-    window.addEventListener('resize', resizeCanvas);
+    window.addEventListener("resize", resizeCanvas);
     return () => {
-      window.removeEventListener('resize', resizeCanvas);
+      window.removeEventListener("resize", resizeCanvas);
     };
   }, [rows]);
 
@@ -84,12 +91,13 @@ const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
     };
 
     canvas.tabIndex = 0;
-    canvas.addEventListener('focus', handleFocus);
-    canvas.addEventListener('blur', handleBlur);
+    canvas.addEventListener("focus", handleFocus);
+    canvas.addEventListener("blur", handleBlur);
 
     const handleClick = (e: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
-      const x = Math.floor((e.clientX - rect.left) / CHARACTER_WIDTH) * CHARACTER_WIDTH;
+      const x =
+        Math.floor((e.clientX - rect.left) / CHARACTER_WIDTH) * CHARACTER_WIDTH;
       const y = Math.floor((e.clientY - rect.top) / LINE_HEIGHT) * LINE_HEIGHT;
       const blocks = platformBlocksRef.current;
       const existingIndex = blocks.findIndex((b) => b.x === x && b.y === y);
@@ -100,51 +108,59 @@ const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
       }
     };
 
-    canvas.addEventListener('click', handleClick);
+    canvas.addEventListener("click", handleClick);
 
     return () => {
-      canvas.removeEventListener('focus', handleFocus);
-      canvas.removeEventListener('blur', handleBlur);
-      canvas.removeEventListener('click', handleClick);
+      canvas.removeEventListener("focus", handleFocus);
+      canvas.removeEventListener("blur", handleBlur);
+      canvas.removeEventListener("click", handleClick);
     };
   }, []);
 
   React.useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!focused) return;
-      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.code === 'Space') {
+      if (
+        e.key === "ArrowLeft" ||
+        e.key === "ArrowRight" ||
+        e.code === "Space"
+      ) {
         e.preventDefault();
         e.stopPropagation();
       }
-      if (e.key === 'ArrowLeft') keysRef.current.left = true;
-      if (e.key === 'ArrowRight') keysRef.current.right = true;
-      if (e.code === 'Space') keysRef.current.jump = true;
+      if (e.key === "ArrowLeft") keysRef.current.left = true;
+      if (e.key === "ArrowRight") keysRef.current.right = true;
+      if (e.code === "Space") keysRef.current.jump = true;
     };
 
     const handleKeyUp = (e: KeyboardEvent) => {
       if (!focused) return;
-      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.code === 'Space') {
+      if (
+        e.key === "ArrowLeft" ||
+        e.key === "ArrowRight" ||
+        e.code === "Space"
+      ) {
         e.preventDefault();
         e.stopPropagation();
       }
-      if (e.key === 'ArrowLeft') keysRef.current.left = false;
-      if (e.key === 'ArrowRight') keysRef.current.right = false;
-      if (e.code === 'Space') keysRef.current.jump = false;
+      if (e.key === "ArrowLeft") keysRef.current.left = false;
+      if (e.key === "ArrowRight") keysRef.current.right = false;
+      if (e.code === "Space") keysRef.current.jump = false;
     };
 
-    window.addEventListener('keydown', handleKeyDown, { capture: true });
-    window.addEventListener('keyup', handleKeyUp, { capture: true });
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    window.addEventListener("keyup", handleKeyUp, { capture: true });
 
     return () => {
-      window.removeEventListener('keydown', handleKeyDown, { capture: true });
-      window.removeEventListener('keyup', handleKeyUp, { capture: true });
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+      window.removeEventListener("keyup", handleKeyUp, { capture: true });
     };
   }, [focused]);
 
   React.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
     const loop = () => {
@@ -157,8 +173,12 @@ const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
       const keys = keysRef.current;
       const blocks = platformBlocksRef.current;
 
-      const themeBorderColor = getComputedStyle(document.body).getPropertyValue('--theme-border').trim();
-      const themeTextColor = getComputedStyle(document.body).getPropertyValue('--theme-text').trim();
+      const themeBorderColor = getComputedStyle(document.body)
+        .getPropertyValue("--theme-border")
+        .trim();
+      const themeTextColor = getComputedStyle(document.body)
+        .getPropertyValue("--theme-text")
+        .trim();
 
       ctx.fillStyle = themeBorderColor;
       for (const b of blocks) {
@@ -182,8 +202,13 @@ const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
 
       let groundY = h;
       for (const b of blocks) {
-        const horizontallyOverlapping = pos.x + CHARACTER_WIDTH > b.x && pos.x < b.x + CHARACTER_WIDTH;
-        if (horizontallyOverlapping && oldY + LINE_HEIGHT <= b.y && pos.y + LINE_HEIGHT >= b.y) {
+        const horizontallyOverlapping =
+          pos.x + CHARACTER_WIDTH > b.x && pos.x < b.x + CHARACTER_WIDTH;
+        if (
+          horizontallyOverlapping &&
+          oldY + LINE_HEIGHT <= b.y &&
+          pos.y + LINE_HEIGHT >= b.y
+        ) {
           if (b.y < groundY) groundY = b.y;
         }
       }
@@ -212,7 +237,8 @@ const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
     let h = canvas.height;
     let groundY = h;
     for (const b of platformBlocksRef.current) {
-      const horizontallyOverlapping = pos.x + CHARACTER_WIDTH > b.x && pos.x < b.x + CHARACTER_WIDTH;
+      const horizontallyOverlapping =
+        pos.x + CHARACTER_WIDTH > b.x && pos.x < b.x + CHARACTER_WIDTH;
       if (horizontallyOverlapping && pos.y + LINE_HEIGHT <= b.y) {
         if (b.y < groundY) groundY = b.y;
       }
@@ -231,7 +257,8 @@ const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
     if (!canvas) return;
     const pos = positionRef.current;
     pos.x += CHARACTER_WIDTH;
-    if (pos.x > canvas.width - CHARACTER_WIDTH) pos.x = canvas.width - CHARACTER_WIDTH;
+    if (pos.x > canvas.width - CHARACTER_WIDTH)
+      pos.x = canvas.width - CHARACTER_WIDTH;
   };
 
   return (
@@ -251,5 +278,3 @@ const CanvasPlatformer: React.FC<PlatformerProps> = ({ rows = 25 }) => {
     </>
   );
 };
-
-export default CanvasPlatformer;
diff --git a/packages/components/src/components/CanvasPlatformer/index.ts b/packages/components/src/components/CanvasPlatformer/index.ts
new file mode 100644
index 0000000..264b866
--- /dev/null
+++ b/packages/components/src/components/CanvasPlatformer/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./CanvasPlatformer";
diff --git a/components/CanvasSnake.module.scss b/packages/components/src/components/CanvasSnake/CanvasSnake.module.scss
similarity index 100%
rename from components/CanvasSnake.module.scss
rename to packages/components/src/components/CanvasSnake/CanvasSnake.module.scss
diff --git a/components/CanvasSnake.tsx b/packages/components/src/components/CanvasSnake/CanvasSnake.tsx
similarity index 66%
rename from components/CanvasSnake.tsx
rename to packages/components/src/components/CanvasSnake/CanvasSnake.tsx
index 6cc569a..6a06b02 100644
--- a/components/CanvasSnake.tsx
+++ b/packages/components/src/components/CanvasSnake/CanvasSnake.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import styles from '@components/CanvasSnake.module.scss';
+import styles from "./CanvasSnake.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
-import ActionButton from '@components/ActionButton';
+import { ActionButton } from "@srcl/ui/components/ActionButton";
 
 interface SnakeProps {
   rows?: number;
@@ -22,12 +22,12 @@ interface Position {
   y: number;
 }
 
-type Direction = 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';
+type Direction = "UP" | "DOWN" | "LEFT" | "RIGHT";
 
-const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
+export const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
   const [focused, setFocused] = React.useState(false);
-  const directionRef = React.useRef<Direction>('RIGHT');
+  const directionRef = React.useRef<Direction>("RIGHT");
   const snakeRef = React.useRef<Position[]>([]);
   const fruitRef = React.useRef<Position>({ x: 0, y: 0 });
   const gridWidthRef = React.useRef<number>(0);
@@ -68,7 +68,7 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
       { x: startX, y: startY },
     ];
 
-    directionRef.current = 'RIGHT';
+    directionRef.current = "RIGHT";
 
     fruitRef.current = {
       x: Math.floor(Math.random() * gridWidth),
@@ -94,9 +94,9 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
     };
 
     onHandleResizeCanvas();
-    window.addEventListener('resize', onHandleResizeCanvas);
+    window.addEventListener("resize", onHandleResizeCanvas);
     return () => {
-      window.removeEventListener('resize', onHandleResizeCanvas);
+      window.removeEventListener("resize", onHandleResizeCanvas);
     };
   }, [rows, reset]);
 
@@ -112,32 +112,41 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
     };
 
     canvas.tabIndex = 0;
-    canvas.addEventListener('focus', onHandleFocus);
-    canvas.addEventListener('blur', onHandleBlur);
+    canvas.addEventListener("focus", onHandleFocus);
+    canvas.addEventListener("blur", onHandleBlur);
 
     return () => {
-      canvas.removeEventListener('focus', onHandleFocus);
-      canvas.removeEventListener('blur', onHandleBlur);
+      canvas.removeEventListener("focus", onHandleFocus);
+      canvas.removeEventListener("blur", onHandleBlur);
     };
   }, []);
 
   React.useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!focused) return;
-      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      if (
+        e.key === "ArrowLeft" ||
+        e.key === "ArrowRight" ||
+        e.key === "ArrowUp" ||
+        e.key === "ArrowDown"
+      ) {
         e.preventDefault();
         e.stopPropagation();
       }
       const currentDir = directionRef.current;
-      if (e.key === 'ArrowLeft' && currentDir !== 'RIGHT') directionRef.current = 'LEFT';
-      if (e.key === 'ArrowRight' && currentDir !== 'LEFT') directionRef.current = 'RIGHT';
-      if (e.key === 'ArrowUp' && currentDir !== 'DOWN') directionRef.current = 'UP';
-      if (e.key === 'ArrowDown' && currentDir !== 'UP') directionRef.current = 'DOWN';
+      if (e.key === "ArrowLeft" && currentDir !== "RIGHT")
+        directionRef.current = "LEFT";
+      if (e.key === "ArrowRight" && currentDir !== "LEFT")
+        directionRef.current = "RIGHT";
+      if (e.key === "ArrowUp" && currentDir !== "DOWN")
+        directionRef.current = "UP";
+      if (e.key === "ArrowDown" && currentDir !== "UP")
+        directionRef.current = "DOWN";
     };
 
-    window.addEventListener('keydown', handleKeyDown, { capture: true });
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
     return () => {
-      window.removeEventListener('keydown', handleKeyDown, { capture: true });
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
     };
   }, [focused]);
 
@@ -145,22 +154,31 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
 
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    const themeBorderColor = getComputedStyle(document.body).getPropertyValue('--theme-text').trim();
-    const themeTextColor = getComputedStyle(document.body).getPropertyValue('--theme-focused-foreground').trim();
+    const themeBorderColor = getComputedStyle(document.body)
+      .getPropertyValue("--theme-text")
+      .trim();
+    const themeTextColor = getComputedStyle(document.body)
+      .getPropertyValue("--theme-focused-foreground")
+      .trim();
 
     const moveSnake = () => {
       const snake = snakeRef.current;
       const dir = directionRef.current;
       const head = snake[snake.length - 1];
       let newHead: Position = { x: head.x, y: head.y };
-      if (dir === 'LEFT') newHead.x -= 1;
-      if (dir === 'RIGHT') newHead.x += 1;
-      if (dir === 'UP') newHead.y -= 1;
-      if (dir === 'DOWN') newHead.y += 1;
-      if (newHead.x < 0 || newHead.x >= gridWidthRef.current || newHead.y < 0 || newHead.y >= gridHeightRef.current) {
+      if (dir === "LEFT") newHead.x -= 1;
+      if (dir === "RIGHT") newHead.x += 1;
+      if (dir === "UP") newHead.y -= 1;
+      if (dir === "DOWN") newHead.y += 1;
+      if (
+        newHead.x < 0 ||
+        newHead.x >= gridWidthRef.current ||
+        newHead.y < 0 ||
+        newHead.y >= gridHeightRef.current
+      ) {
         reset();
         return;
       }
@@ -171,7 +189,10 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
         }
       }
       snake.push(newHead);
-      if (newHead.x === fruitRef.current.x && newHead.y === fruitRef.current.y) {
+      if (
+        newHead.x === fruitRef.current.x &&
+        newHead.y === fruitRef.current.y
+      ) {
         placeTarget();
       } else {
         snake.shift();
@@ -202,10 +223,20 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
 
       ctx.clearRect(0, 0, w, h);
       ctx.fillStyle = themeTextColor;
-      ctx.fillRect(fruitRef.current.x * CHARACTER_WIDTH, fruitRef.current.y * LINE_HEIGHT, CHARACTER_WIDTH, LINE_HEIGHT);
+      ctx.fillRect(
+        fruitRef.current.x * CHARACTER_WIDTH,
+        fruitRef.current.y * LINE_HEIGHT,
+        CHARACTER_WIDTH,
+        LINE_HEIGHT
+      );
       ctx.fillStyle = themeBorderColor;
       for (const segment of snakeRef.current) {
-        ctx.fillRect(segment.x * CHARACTER_WIDTH, segment.y * LINE_HEIGHT, CHARACTER_WIDTH, LINE_HEIGHT);
+        ctx.fillRect(
+          segment.x * CHARACTER_WIDTH,
+          segment.y * LINE_HEIGHT,
+          CHARACTER_WIDTH,
+          LINE_HEIGHT
+        );
       }
       if (time - lastMoveTimeRef.current > moveInterval) {
         moveSnake();
@@ -241,19 +272,33 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
         const canvas = canvasRef.current;
         if (!canvas) return;
 
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext("2d");
         if (!ctx) return;
 
-        const themeBorderColor = getComputedStyle(document.body).getPropertyValue('--theme-border').trim();
-        const themeTextColor = getComputedStyle(document.body).getPropertyValue('--theme-text').trim();
+        const themeBorderColor = getComputedStyle(document.body)
+          .getPropertyValue("--theme-border")
+          .trim();
+        const themeTextColor = getComputedStyle(document.body)
+          .getPropertyValue("--theme-text")
+          .trim();
 
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.fillStyle = themeBorderColor;
-        ctx.fillRect(fruitRef.current.x * CHARACTER_WIDTH, fruitRef.current.y * LINE_HEIGHT, CHARACTER_WIDTH, LINE_HEIGHT);
+        ctx.fillRect(
+          fruitRef.current.x * CHARACTER_WIDTH,
+          fruitRef.current.y * LINE_HEIGHT,
+          CHARACTER_WIDTH,
+          LINE_HEIGHT
+        );
         ctx.fillStyle = themeTextColor;
 
         for (const segment of snakeRef.current) {
-          ctx.fillRect(segment.x * CHARACTER_WIDTH, segment.y * LINE_HEIGHT, CHARACTER_WIDTH, LINE_HEIGHT);
+          ctx.fillRect(
+            segment.x * CHARACTER_WIDTH,
+            segment.y * LINE_HEIGHT,
+            CHARACTER_WIDTH,
+            LINE_HEIGHT
+          );
         }
 
         lastMoveTimeRef.current = time;
@@ -266,10 +311,20 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
 
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           ctx.fillStyle = themeBorderColor;
-          ctx.fillRect(fruitRef.current.x * CHARACTER_WIDTH, fruitRef.current.y * LINE_HEIGHT, CHARACTER_WIDTH, LINE_HEIGHT);
+          ctx.fillRect(
+            fruitRef.current.x * CHARACTER_WIDTH,
+            fruitRef.current.y * LINE_HEIGHT,
+            CHARACTER_WIDTH,
+            LINE_HEIGHT
+          );
           ctx.fillStyle = themeTextColor;
           for (const segment of snakeRef.current) {
-            ctx.fillRect(segment.x * CHARACTER_WIDTH, segment.y * LINE_HEIGHT, CHARACTER_WIDTH, LINE_HEIGHT);
+            ctx.fillRect(
+              segment.x * CHARACTER_WIDTH,
+              segment.y * LINE_HEIGHT,
+              CHARACTER_WIDTH,
+              LINE_HEIGHT
+            );
           }
           if (time - lastMoveTimeRef.current > moveInterval) {
             moveSnake();
@@ -283,11 +338,16 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
           const dir = directionRef.current;
           const head = snake[snake.length - 1];
           let newHead: Position = { x: head.x, y: head.y };
-          if (dir === 'LEFT') newHead.x -= 1;
-          if (dir === 'RIGHT') newHead.x += 1;
-          if (dir === 'UP') newHead.y -= 1;
-          if (dir === 'DOWN') newHead.y += 1;
-          if (newHead.x < 0 || newHead.x >= gridWidthRef.current || newHead.y < 0 || newHead.y >= gridHeightRef.current) {
+          if (dir === "LEFT") newHead.x -= 1;
+          if (dir === "RIGHT") newHead.x += 1;
+          if (dir === "UP") newHead.y -= 1;
+          if (dir === "DOWN") newHead.y += 1;
+          if (
+            newHead.x < 0 ||
+            newHead.x >= gridWidthRef.current ||
+            newHead.y < 0 ||
+            newHead.y >= gridHeightRef.current
+          ) {
             reset();
             return;
           }
@@ -300,7 +360,10 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
           }
 
           snake.push(newHead);
-          if (newHead.x === fruitRef.current.x && newHead.y === fruitRef.current.y) {
+          if (
+            newHead.x === fruitRef.current.x &&
+            newHead.y === fruitRef.current.y
+          ) {
             placeTarget();
           } else {
             snake.shift();
@@ -317,7 +380,8 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
               x: Math.floor(Math.random() * gridW),
               y: Math.floor(Math.random() * gridH),
             };
-            if (!snake.some((s) => s.x === fruitPos.x && s.y === fruitPos.y)) break;
+            if (!snake.some((s) => s.x === fruitPos.x && s.y === fruitPos.y))
+              break;
           }
           fruitRef.current = fruitPos;
         };
@@ -326,16 +390,16 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
   }, [focused, reset]);
 
   const onHandleClickUp = () => {
-    if (directionRef.current !== 'DOWN') directionRef.current = 'UP';
+    if (directionRef.current !== "DOWN") directionRef.current = "UP";
   };
   const onHandleClickDown = () => {
-    if (directionRef.current !== 'UP') directionRef.current = 'DOWN';
+    if (directionRef.current !== "UP") directionRef.current = "DOWN";
   };
   const onHandleClickLeft = () => {
-    if (directionRef.current !== 'RIGHT') directionRef.current = 'LEFT';
+    if (directionRef.current !== "RIGHT") directionRef.current = "LEFT";
   };
   const onHandleClickRight = () => {
-    if (directionRef.current !== 'LEFT') directionRef.current = 'RIGHT';
+    if (directionRef.current !== "LEFT") directionRef.current = "RIGHT";
   };
 
   return (
@@ -358,5 +422,3 @@ const CanvasSnake = ({ rows = 25 }: SnakeProps) => {
     </>
   );
 };
-
-export default CanvasSnake;
diff --git a/packages/components/src/components/CanvasSnake/index.ts b/packages/components/src/components/CanvasSnake/index.ts
new file mode 100644
index 0000000..0c08be8
--- /dev/null
+++ b/packages/components/src/components/CanvasSnake/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./CanvasSnake";
diff --git a/components/Card.module.scss b/packages/components/src/components/Card/Card.module.scss
similarity index 100%
rename from components/Card.module.scss
rename to packages/components/src/components/Card/Card.module.scss
diff --git a/components/Card.tsx b/packages/components/src/components/Card/Card.tsx
similarity index 79%
rename from components/Card.tsx
rename to packages/components/src/components/Card/Card.tsx
index b7c15c7..ae214ca 100644
--- a/components/Card.tsx
+++ b/packages/components/src/components/Card/Card.tsx
@@ -1,7 +1,7 @@
-import styles from '@components/Card.module.scss';
+import styles from "./Card.module.scss";
 
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -9,7 +9,13 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   mode?: string | any;
 }
 
-const Card: React.FC<CardProps> = ({ children, mode, title, style, ...rest }) => {
+export const Card: React.FC<CardProps> = ({
+  children,
+  mode,
+  title,
+  style,
+  ...rest
+}) => {
   let titleElement = (
     <header className={styles.action}>
       <div className={styles.left} aria-hidden="true"></div>
@@ -18,7 +24,7 @@ const Card: React.FC<CardProps> = ({ children, mode, title, style, ...rest }) =>
     </header>
   );
 
-  if (mode === 'left') {
+  if (mode === "left") {
     titleElement = (
       <header className={styles.action}>
         <div className={styles.leftCorner} aria-hidden="true"></div>
@@ -28,7 +34,7 @@ const Card: React.FC<CardProps> = ({ children, mode, title, style, ...rest }) =>
     );
   }
 
-  if (mode === 'right') {
+  if (mode === "right") {
     titleElement = (
       <header className={styles.action}>
         <div className={styles.left} aria-hidden="true"></div>
@@ -45,5 +51,3 @@ const Card: React.FC<CardProps> = ({ children, mode, title, style, ...rest }) =>
     </article>
   );
 };
-
-export default Card;
diff --git a/packages/components/src/components/Card/index.ts b/packages/components/src/components/Card/index.ts
new file mode 100644
index 0000000..3830024
--- /dev/null
+++ b/packages/components/src/components/Card/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Card";
diff --git a/components/CardDouble.module.scss b/packages/components/src/components/CardDouble/CardDouble.module.scss
similarity index 100%
rename from components/CardDouble.module.scss
rename to packages/components/src/components/CardDouble/CardDouble.module.scss
diff --git a/components/CardDouble.tsx b/packages/components/src/components/CardDouble/CardDouble.tsx
similarity index 80%
rename from components/CardDouble.tsx
rename to packages/components/src/components/CardDouble/CardDouble.tsx
index 89bf5bc..55e53ab 100644
--- a/components/CardDouble.tsx
+++ b/packages/components/src/components/CardDouble/CardDouble.tsx
@@ -1,7 +1,7 @@
-import styles from '@components/CardDouble.module.scss';
+import styles from "./CardDouble.module.scss";
 
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -10,7 +10,13 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   style?: any;
 }
 
-const CardDouble: React.FC<CardProps> = ({ children, mode, title, style, ...rest }) => {
+export const CardDouble: React.FC<CardProps> = ({
+  children,
+  mode,
+  title,
+  style,
+  ...rest
+}) => {
   let titleElement = (
     <header className={styles.action}>
       <div className={styles.left} aria-hidden="true"></div>
@@ -19,7 +25,7 @@ const CardDouble: React.FC<CardProps> = ({ children, mode, title, style, ...rest
     </header>
   );
 
-  if (mode === 'left') {
+  if (mode === "left") {
     titleElement = (
       <header className={styles.action}>
         <div className={styles.leftCorner} aria-hidden="true"></div>
@@ -29,7 +35,7 @@ const CardDouble: React.FC<CardProps> = ({ children, mode, title, style, ...rest
     );
   }
 
-  if (mode === 'right') {
+  if (mode === "right") {
     titleElement = (
       <header className={styles.action}>
         <div className={styles.left} aria-hidden="true"></div>
@@ -50,5 +56,3 @@ const CardDouble: React.FC<CardProps> = ({ children, mode, title, style, ...rest
     </article>
   );
 };
-
-export default CardDouble;
diff --git a/packages/components/src/components/CardDouble/index.ts b/packages/components/src/components/CardDouble/index.ts
new file mode 100644
index 0000000..738ea8f
--- /dev/null
+++ b/packages/components/src/components/CardDouble/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./CardDouble";
diff --git a/components/Checkbox.module.scss b/packages/components/src/components/Checkbox/Checkbox.module.scss
similarity index 100%
rename from components/Checkbox.module.scss
rename to packages/components/src/components/Checkbox/Checkbox.module.scss
diff --git a/components/Checkbox.tsx b/packages/components/src/components/Checkbox/Checkbox.tsx
similarity index 60%
rename from components/Checkbox.tsx
rename to packages/components/src/components/Checkbox/Checkbox.tsx
index cdabcbe..aba9d7b 100644
--- a/components/Checkbox.tsx
+++ b/packages/components/src/components/Checkbox/Checkbox.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import styles from '@components/Checkbox.module.scss';
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import styles from "./Checkbox.module.scss";
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
 
 interface CheckboxProps {
   style?: React.CSSProperties;
@@ -14,7 +14,13 @@ interface CheckboxProps {
   children?: React.ReactNode;
 }
 
-const Checkbox: React.FC<CheckboxProps> = ({ style, name, defaultChecked = false, onChange, children }) => {
+export const Checkbox: React.FC<CheckboxProps> = ({
+  style,
+  name,
+  defaultChecked = false,
+  onChange,
+  children,
+}) => {
   const checkboxId = `${name}-checkbox`;
   const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -23,21 +29,27 @@ const Checkbox: React.FC<CheckboxProps> = ({ style, name, defaultChecked = false
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     switch (event.key) {
-      case 'Enter':
+      case "Enter":
         event.preventDefault();
         inputRef.current?.click();
         break;
-      case 'ArrowUp':
-      case 'ArrowLeft': {
+      case "ArrowUp":
+      case "ArrowLeft": {
         event.preventDefault();
-        const previousFocusable = Utilities.findNextFocusable(document.activeElement, 'previous');
+        const previousFocusable = Utilities.findNextFocusable(
+          document.activeElement,
+          "previous"
+        );
         previousFocusable?.focus();
         break;
       }
-      case 'ArrowDown':
-      case 'ArrowRight': {
+      case "ArrowDown":
+      case "ArrowRight": {
         event.preventDefault();
-        const nextFocusable = Utilities.findNextFocusable(document.activeElement, 'next');
+        const nextFocusable = Utilities.findNextFocusable(
+          document.activeElement,
+          "next"
+        );
         nextFocusable?.focus();
         break;
       }
@@ -66,14 +78,24 @@ const Checkbox: React.FC<CheckboxProps> = ({ style, name, defaultChecked = false
       style={style}
     >
       <div className={styles.relative}>
-        <input className={styles.input} id={checkboxId} type="checkbox" name={name} defaultChecked={defaultChecked} onChange={handleChange} onKeyDown={handleKeyDown} onFocus={handleFocus} onBlur={handleBlur} tabIndex={0} ref={inputRef} />
+        <input
+          className={styles.input}
+          id={checkboxId}
+          type="checkbox"
+          name={name}
+          defaultChecked={defaultChecked}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          tabIndex={0}
+          ref={inputRef}
+        />
         <label className={styles.figure} htmlFor={checkboxId}>
-          {isChecked ? '╳' : '\u00A0'}
+          {isChecked ? "╳" : "\u00A0"}
         </label>
       </div>
       <div className={styles.right}>&nbsp;&nbsp;{children}</div>
     </div>
   );
 };
-
-export default Checkbox;
diff --git a/packages/components/src/components/Checkbox/index.ts b/packages/components/src/components/Checkbox/index.ts
new file mode 100644
index 0000000..e75d17a
--- /dev/null
+++ b/packages/components/src/components/Checkbox/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Checkbox";
diff --git a/components/Chessboard.module.scss b/packages/components/src/components/Chessboard/Chessboard.module.scss
similarity index 100%
rename from components/Chessboard.module.scss
rename to packages/components/src/components/Chessboard/Chessboard.module.scss
diff --git a/components/Chessboard.tsx b/packages/components/src/components/Chessboard/Chessboard.tsx
similarity index 54%
rename from components/Chessboard.tsx
rename to packages/components/src/components/Chessboard/Chessboard.tsx
index 3f63a2f..9ca469c 100644
--- a/components/Chessboard.tsx
+++ b/packages/components/src/components/Chessboard/Chessboard.tsx
@@ -1,36 +1,36 @@
-'use client';
+"use client";
 
-import styles from '@components/Chessboard.module.scss';
+import styles from "./Chessboard.module.scss";
 
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
 
-const FILE = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+const FILE = ["A", "B", "C", "D", "E", "F", "G", "H"];
 const RANK = [8, 7, 6, 5, 4, 3, 2, 1];
 
 const getPieceSymbol = (piece: string) => {
   const mapping: Record<string, string> = {
-    K: '♔',
-    Q: '♕',
-    R: '♖',
-    B: '♗',
-    N: '♘',
-    P: '♙',
-    k: '♚',
-    q: '♛',
-    r: '♜',
-    b: '♝',
-    n: '♞',
-    p: '♟',
+    K: "♔",
+    Q: "♕",
+    R: "♖",
+    B: "♗",
+    N: "♘",
+    P: "♙",
+    k: "♚",
+    q: "♛",
+    r: "♜",
+    b: "♝",
+    n: "♞",
+    p: "♟",
   };
-  return mapping[piece] || '';
+  return mapping[piece] || "";
 };
 
 interface ChessboardProps {
   board: string[][];
 }
 
-const Chessboard: React.FC<ChessboardProps> = ({ board }) => {
+export const Chessboard: React.FC<ChessboardProps> = ({ board }) => {
   return (
     <table className={styles.board}>
       <tbody>
@@ -49,8 +49,13 @@ const Chessboard: React.FC<ChessboardProps> = ({ board }) => {
               const isDark = (rowIndex + colIndex) % 2 === 0;
               const squareClass = isDark ? styles.dark : styles.light;
               return (
-                <td key={colIndex} className={Utilities.classNames(styles.square, squareClass)}>
-                  <span className={styles.symbol}>{getPieceSymbol(board[rowIndex][colIndex])}</span>
+                <td
+                  key={colIndex}
+                  className={Utilities.classNames(styles.square, squareClass)}
+                >
+                  <span className={styles.symbol}>
+                    {getPieceSymbol(board[rowIndex][colIndex])}
+                  </span>
                 </td>
               );
             })}
@@ -60,5 +65,3 @@ const Chessboard: React.FC<ChessboardProps> = ({ board }) => {
     </table>
   );
 };
-
-export default Chessboard;
diff --git a/packages/components/src/components/Chessboard/index.ts b/packages/components/src/components/Chessboard/index.ts
new file mode 100644
index 0000000..2848d8c
--- /dev/null
+++ b/packages/components/src/components/Chessboard/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Chessboard";
diff --git a/components/CodeBlock.module.scss b/packages/components/src/components/CodeBlock/CodeBlock.module.scss
similarity index 100%
rename from components/CodeBlock.module.scss
rename to packages/components/src/components/CodeBlock/CodeBlock.module.scss
diff --git a/packages/components/src/components/CodeBlock/CodeBlock.tsx b/packages/components/src/components/CodeBlock/CodeBlock.tsx
new file mode 100644
index 0000000..7950239
--- /dev/null
+++ b/packages/components/src/components/CodeBlock/CodeBlock.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import styles from "./CodeBlock.module.scss";
+
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
+
+interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+  children?: React.ReactNode;
+}
+
+export const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <pre className={styles.root} ref={ref} {...rest}>
+        {String(children)
+          .split("\n")
+          .map((line, index) => (
+            <div key={index} className={styles.line}>
+              <span className={styles.number}>
+                {Utilities.leftPad(String(index + 1), 3)}
+              </span>
+              <span className={styles.content}>{line}</span>
+            </div>
+          ))}
+      </pre>
+    );
+  }
+);
+
+CodeBlock.displayName = "CodeBlock";
diff --git a/packages/components/src/components/CodeBlock/index.ts b/packages/components/src/components/CodeBlock/index.ts
new file mode 100644
index 0000000..1132cb7
--- /dev/null
+++ b/packages/components/src/components/CodeBlock/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./CodeBlock";
diff --git a/components/ComboBox.module.scss b/packages/components/src/components/ComboBox/ComboBox.module.scss
similarity index 100%
rename from components/ComboBox.module.scss
rename to packages/components/src/components/ComboBox/ComboBox.module.scss
diff --git a/packages/components/src/components/ComboBox/ComboBox.tsx b/packages/components/src/components/ComboBox/ComboBox.tsx
new file mode 100644
index 0000000..0b1af82
--- /dev/null
+++ b/packages/components/src/components/ComboBox/ComboBox.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import styles from "./ComboBox.module.scss";
+
+import * as React from "react";
+
+import { AlertBanner } from "../AlertBanner";
+import { ButtonGroup } from "../ButtonGroup";
+import { CardDouble } from "../CardDouble";
+import { Input } from "../Input";
+
+interface ComboBoxProps {
+  data: string[][];
+  label?: string;
+}
+
+export const ComboBox = ({ data, label }: ComboBoxProps) => {
+  const [searchTerm, setSearchTerm] = React.useState("");
+
+  const filtered = React.useMemo(() => {
+    const sliced = data.slice(1);
+    if (!searchTerm) return [];
+    return sliced.filter((entry) =>
+      entry[0].toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [data, searchTerm]);
+
+  const displayed = React.useMemo(() => {
+    const sliced = data.slice(1);
+    if (filtered.length >= 5) return filtered.slice(0, 5);
+    if (filtered.length === 0 && searchTerm) return sliced.slice(0, 5);
+    if (filtered.length > 0 && filtered.length < 5) {
+      const needed = 5 - filtered.length;
+      const remainder = sliced.filter((entry) => !filtered.includes(entry));
+      return [...filtered, ...remainder.slice(0, needed)];
+    }
+    return sliced.slice(0, 5);
+  }, [filtered, data, searchTerm]);
+
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchTerm(e.target.value);
+    },
+    []
+  );
+
+  return (
+    <>
+      <div className={styles.root}>
+        <Input
+          autoComplete="off"
+          isBlink
+          label={label}
+          name="input_test_blink"
+          value={searchTerm}
+          onChange={handleChange}
+        />
+      </div>
+      {displayed.map((entry) => (
+        <CardDouble key={entry[0]} title={entry[0]}>
+          <AlertBanner>{entry[1]}</AlertBanner>
+          <br />
+          <ButtonGroup
+            isFull
+            items={[
+              { body: "FAVORITE" },
+              { body: "DONATE" },
+              { body: "LEARN MORE" },
+            ]}
+          />
+        </CardDouble>
+      ))}
+    </>
+  );
+};
diff --git a/packages/components/src/components/ComboBox/index.ts b/packages/components/src/components/ComboBox/index.ts
new file mode 100644
index 0000000..fce8083
--- /dev/null
+++ b/packages/components/src/components/ComboBox/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ComboBox";
diff --git a/components/ContentFluid.module.scss b/packages/components/src/components/ContentFluid/ContentFluid.module.scss
similarity index 100%
rename from components/ContentFluid.module.scss
rename to packages/components/src/components/ContentFluid/ContentFluid.module.scss
diff --git a/packages/components/src/components/ContentFluid/ContentFluid.tsx b/packages/components/src/components/ContentFluid/ContentFluid.tsx
new file mode 100644
index 0000000..acb0efc
--- /dev/null
+++ b/packages/components/src/components/ContentFluid/ContentFluid.tsx
@@ -0,0 +1,14 @@
+import styles from "./ContentFluid.module.scss";
+
+import * as React from "react";
+
+interface ContentFluidProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children?: React.ReactNode;
+}
+
+export const ContentFluid: React.FC<ContentFluidProps> = ({
+  children,
+  ...rest
+}) => {
+  return <div className={styles.root}>{children}</div>;
+};
diff --git a/packages/components/src/components/ContentFluid/index.ts b/packages/components/src/components/ContentFluid/index.ts
new file mode 100644
index 0000000..639b1e8
--- /dev/null
+++ b/packages/components/src/components/ContentFluid/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ContentFluid";
diff --git a/components/DOMSnake.module.scss b/packages/components/src/components/DOMSnake/DOMSnake.module.scss
similarity index 100%
rename from components/DOMSnake.module.scss
rename to packages/components/src/components/DOMSnake/DOMSnake.module.scss
diff --git a/components/DOMSnake.tsx b/packages/components/src/components/DOMSnake/DOMSnake.tsx
similarity index 97%
rename from components/DOMSnake.tsx
rename to packages/components/src/components/DOMSnake/DOMSnake.tsx
index d552a55..25aa045 100644
--- a/components/DOMSnake.tsx
+++ b/packages/components/src/components/DOMSnake/DOMSnake.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useRef } from 'react';
 import styles from './DOMSnake.module.scss';
-import ActionButton from './ActionButton';
+import { ActionButton } from '../ActionButton';
 
 interface SnakeGameProps {
   width?: number;
@@ -15,14 +15,14 @@ interface Position {
   y: number;
 }
 
-const DIRECTIONS: Record<string, Position> = {
+export const DIRECTIONS: Record<string, Position> = {
   ArrowUp: { x: 0, y: -1 },
   ArrowDown: { x: 0, y: 1 },
   ArrowLeft: { x: -1, y: 0 },
   ArrowRight: { x: 1, y: 0 },
 };
 
-export default function SnakeGame(props: SnakeGameProps) {
+export const DOMSnake = (props: SnakeGameProps) => {
   const GRID_WIDTH: number = props.width || 40;
   const GRID_HEIGHT: number = props.height || 20;
   const START_SPEED: number = props.startSpeed || 150;
@@ -166,4 +166,4 @@ export default function SnakeGame(props: SnakeGameProps) {
       </div>
     </div>
   );
-}
+};
diff --git a/packages/components/src/components/DOMSnake/index.ts b/packages/components/src/components/DOMSnake/index.ts
new file mode 100644
index 0000000..770182a
--- /dev/null
+++ b/packages/components/src/components/DOMSnake/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./DOMSnake";
diff --git a/components/DataTable.module.scss b/packages/components/src/components/DataTable/DataTable.module.scss
similarity index 100%
rename from components/DataTable.module.scss
rename to packages/components/src/components/DataTable/DataTable.module.scss
diff --git a/components/DataTable.tsx b/packages/components/src/components/DataTable/DataTable.tsx
similarity index 59%
rename from components/DataTable.tsx
rename to packages/components/src/components/DataTable/DataTable.tsx
index 78c8cef..d519614 100644
--- a/components/DataTable.tsx
+++ b/packages/components/src/components/DataTable/DataTable.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import styles from '@components/DataTable.module.scss';
+import styles from "./DataTable.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface TableProps {
   data: string[][];
@@ -15,11 +15,15 @@ interface RGBAColor {
   a: number;
 }
 
-const BASE_FOREGROUND_RGBA: RGBAColor = { r: 98, g: 98, b: 98, a: 0.5 };
+export const BASE_FOREGROUND_RGBA: RGBAColor = { r: 98, g: 98, b: 98, a: 0.5 };
 const BASE_BACKGROUND_RGBA: RGBAColor = { r: 168, g: 168, b: 168, a: 0.5 };
 const ALPHA = 0.45;
 
-function interpolateColor(color1: RGBAColor, color2: RGBAColor, factor: number): RGBAColor {
+function interpolateColor(
+  color1: RGBAColor,
+  color2: RGBAColor,
+  factor: number
+): RGBAColor {
   return {
     r: Math.round(color1.r + factor * (color2.r - color1.r)),
     g: Math.round(color1.g + factor * (color2.g - color1.g)),
@@ -28,14 +32,15 @@ function interpolateColor(color1: RGBAColor, color2: RGBAColor, factor: number):
   };
 }
 
-const DataTable: React.FC<TableProps> = ({ data }) => {
+export const DataTable: React.FC<TableProps> = ({ data }) => {
   const tableRef = React.useRef<HTMLTableElement>(null);
   const prevDataRef = React.useRef<string[][]>(data);
 
   React.useEffect(() => {
-    const rows = tableRef.current?.querySelectorAll<HTMLTableRowElement>('tr') || [];
+    const rows =
+      tableRef.current?.querySelectorAll<HTMLTableRowElement>("tr") || [];
     for (let i = 1; i < data.length; i++) {
-      const cells = rows[i]?.querySelectorAll<HTMLTableCellElement>('td');
+      const cells = rows[i]?.querySelectorAll("td");
       if (!cells) continue;
       for (let j = 0; j < data[i].length; j++) {
         const cell = cells[j];
@@ -54,24 +59,30 @@ const DataTable: React.FC<TableProps> = ({ data }) => {
     const activeElement = document.activeElement;
     if (!activeElement) return;
     switch (event.key) {
-      case 'Enter':
+      case "Enter":
         event.preventDefault();
         if (activeElement instanceof HTMLTableCellElement) {
           activeElement.click();
         }
         break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-      case 'ArrowLeft':
-      case 'ArrowRight':
+      case "ArrowUp":
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "ArrowRight":
         event.preventDefault();
         if (!(activeElement instanceof HTMLTableCellElement)) return;
-        const direction = event.key === 'ArrowUp' || event.key === 'ArrowLeft' ? 'previous' : 'next';
-        const allCells = Array.from(tableRef.current?.querySelectorAll<HTMLTableCellElement>('td') || []);
+        const direction =
+          event.key === "ArrowUp" || event.key === "ArrowLeft"
+            ? "previous"
+            : "next";
+        const allCells = Array.from(
+          tableRef.current?.querySelectorAll<HTMLTableCellElement>("td") || []
+        );
         const currentIndex = allCells.indexOf(activeElement);
         if (currentIndex === -1) return;
-        let nextIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
-        if (direction === 'previous') {
+        let nextIndex =
+          direction === "next" ? currentIndex + 1 : currentIndex - 1;
+        if (direction === "previous") {
           if (nextIndex < 0) nextIndex = allCells.length - 1;
         } else {
           if (nextIndex >= allCells.length) nextIndex = 0;
@@ -88,23 +99,45 @@ const DataTable: React.FC<TableProps> = ({ data }) => {
     <table className={styles.root} ref={tableRef} onKeyDown={handleKeyDown}>
       <tbody className={styles.body}>
         {data.map((row, rowIndex) => (
-          <tr key={rowIndex} className={styles.row} tabIndex={0} onClick={() => alert('testing')}>
+          <tr
+            key={rowIndex}
+            className={styles.row}
+            tabIndex={0}
+            onClick={() => alert("testing")}
+          >
             {row.map((cellContent, colIndex) => {
               let backgroundColor: string;
               if (rowIndex === 0) {
-                const lightnessFactor = row.length > 1 ? colIndex / (row.length - 1) : 0;
-                const newColor = interpolateColor(BASE_FOREGROUND_RGBA, targetColorHeader, lightnessFactor);
-                backgroundColor = `rgba(${newColor.r}, ${newColor.g}, ${newColor.b}, ${newColor.a.toFixed(2)})`;
+                const lightnessFactor =
+                  row.length > 1 ? colIndex / (row.length - 1) : 0;
+                const newColor = interpolateColor(
+                  BASE_FOREGROUND_RGBA,
+                  targetColorHeader,
+                  lightnessFactor
+                );
+                backgroundColor = `rgba(${newColor.r}, ${newColor.g}, ${
+                  newColor.b
+                }, ${newColor.a.toFixed(2)})`;
               } else {
                 const numRows = data.length - 1;
                 const maxIndexSum = numRows - 1 + (row.length - 1) || 1;
                 const indexSum = rowIndex - 1 + colIndex;
                 const lightnessFactor = indexSum / maxIndexSum;
-                const newColor = interpolateColor(BASE_BACKGROUND_RGBA, targetColorData, lightnessFactor);
-                backgroundColor = `rgba(${newColor.r}, ${newColor.g}, ${newColor.b}, ${newColor.a.toFixed(2)})`;
+                const newColor = interpolateColor(
+                  BASE_BACKGROUND_RGBA,
+                  targetColorData,
+                  lightnessFactor
+                );
+                backgroundColor = `rgba(${newColor.r}, ${newColor.g}, ${
+                  newColor.b
+                }, ${newColor.a.toFixed(2)})`;
               }
               return (
-                <td key={colIndex} className={styles.column} style={{ backgroundColor }}>
+                <td
+                  key={colIndex}
+                  className={styles.column}
+                  style={{ backgroundColor }}
+                >
                   {cellContent}
                 </td>
               );
@@ -115,5 +148,3 @@ const DataTable: React.FC<TableProps> = ({ data }) => {
     </table>
   );
 };
-
-export default DataTable;
diff --git a/packages/components/src/components/DataTable/index.ts b/packages/components/src/components/DataTable/index.ts
new file mode 100644
index 0000000..8060b54
--- /dev/null
+++ b/packages/components/src/components/DataTable/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./DataTable";
diff --git a/components/DatePicker.module.scss b/packages/components/src/components/DatePicker/DatePicker.module.scss
similarity index 100%
rename from components/DatePicker.module.scss
rename to packages/components/src/components/DatePicker/DatePicker.module.scss
diff --git a/components/DatePicker.tsx b/packages/components/src/components/DatePicker/DatePicker.tsx
similarity index 64%
rename from components/DatePicker.tsx
rename to packages/components/src/components/DatePicker/DatePicker.tsx
index 5cd0bfa..ef6062f 100644
--- a/components/DatePicker.tsx
+++ b/packages/components/src/components/DatePicker/DatePicker.tsx
@@ -1,27 +1,39 @@
-'use client';
+"use client";
 
-import styles from '@components/DatePicker.module.scss';
+import styles from "./DatePicker.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface DatePickerProps {
   year?: number;
   month?: number;
 }
 
-const WEEKDAYS = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
+export const WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 
 const MONTH_NAMES = [
-  'January', 'February', 'March', 'April', 'May', 'June',
-  'July', 'August', 'September', 'October', 'November', 'December'
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
 ];
 
 const MAX_CELLS = 42;
 
-const DatePicker: React.FC<DatePickerProps> = ({ year, month }) => {
+export const DatePicker: React.FC<DatePickerProps> = ({ year, month }) => {
   const today = new Date();
   const [currentYear, setYear] = React.useState(year || today.getFullYear());
-  const [currentMonth, setMonth] = React.useState(month || today.getMonth() + 1);
+  const [currentMonth, setMonth] = React.useState(
+    month || today.getMonth() + 1
+  );
 
   const first = new Date(currentYear, currentMonth - 1, 1);
   const startingWeekday = first.getDay();
@@ -34,13 +46,16 @@ const DatePicker: React.FC<DatePickerProps> = ({ year, month }) => {
   }
 
   for (let day = 1; day <= daysInMonth; day++) {
-    const presentationDay = String(day).padStart(2, '0');
+    const presentationDay = String(day).padStart(2, "0");
     cells.push(
       <div
         key={day}
         className={styles.cell}
         tabIndex={0}
-        aria-label={`${currentYear}-${String(currentMonth).padStart(2, '0')}-${presentationDay}`}
+        aria-label={`${currentYear}-${String(currentMonth).padStart(
+          2,
+          "0"
+        )}-${presentationDay}`}
       >
         {presentationDay}
       </div>
@@ -48,7 +63,9 @@ const DatePicker: React.FC<DatePickerProps> = ({ year, month }) => {
   }
 
   while (cells.length < MAX_CELLS) {
-    cells.push(<div key={`empty-end-${cells.length}`} className={styles.dayCell} />);
+    cells.push(
+      <div key={`empty-end-${cells.length}`} className={styles.dayCell} />
+    );
   }
 
   const onSwitchPreviousMonth = () => {
@@ -76,13 +93,23 @@ const DatePicker: React.FC<DatePickerProps> = ({ year, month }) => {
   return (
     <div className={styles.root}>
       <div className={styles.controls}>
-        <button type="button" className={styles.button} onClick={onSwitchPreviousMonth} aria-label="Previous month">
+        <button
+          type="button"
+          className={styles.button}
+          onClick={onSwitchPreviousMonth}
+          aria-label="Previous month"
+        >
           ▲
         </button>
         <div className={styles.date}>
           {currentYear} {MONTH_NAMES[currentMonth - 1].toUpperCase()}
         </div>
-        <button type="button" className={styles.button} onClick={onSwitchNextMonth} aria-label="Next month">
+        <button
+          type="button"
+          className={styles.button}
+          onClick={onSwitchNextMonth}
+          aria-label="Next month"
+        >
           ▼
         </button>
       </div>
@@ -97,5 +124,3 @@ const DatePicker: React.FC<DatePickerProps> = ({ year, month }) => {
     </div>
   );
 };
-
-export default DatePicker;
\ No newline at end of file
diff --git a/packages/components/src/components/DatePicker/index.ts b/packages/components/src/components/DatePicker/index.ts
new file mode 100644
index 0000000..36bb751
--- /dev/null
+++ b/packages/components/src/components/DatePicker/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./DatePicker";
diff --git a/components/DebugGrid.tsx b/packages/components/src/components/DebugGrid/DebugGrid.tsx
similarity index 96%
rename from components/DebugGrid.tsx
rename to packages/components/src/components/DebugGrid/DebugGrid.tsx
index 84b841b..5648456 100644
--- a/components/DebugGrid.tsx
+++ b/packages/components/src/components/DebugGrid/DebugGrid.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-const DebugGrid: React.FC = () => {
+export const DebugGrid: React.FC = () => {
   React.useEffect(() => {
     const debugGrid = document.createElement('div');
     let isVisible = false;
@@ -59,5 +59,3 @@ const DebugGrid: React.FC = () => {
 export const toggleDebugGrid = (): void => {
   window.dispatchEvent(new CustomEvent('debugGridToggle'));
 };
-
-export default DebugGrid;
diff --git a/packages/components/src/components/DebugGrid/index.ts b/packages/components/src/components/DebugGrid/index.ts
new file mode 100644
index 0000000..1119145
--- /dev/null
+++ b/packages/components/src/components/DebugGrid/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./DebugGrid";
diff --git a/components/Dialog.module.scss b/packages/components/src/components/Dialog/Dialog.module.scss
similarity index 100%
rename from components/Dialog.module.scss
rename to packages/components/src/components/Dialog/Dialog.module.scss
diff --git a/components/Dialog.tsx b/packages/components/src/components/Dialog/Dialog.tsx
similarity index 60%
rename from components/Dialog.tsx
rename to packages/components/src/components/Dialog/Dialog.tsx
index 60a6e23..e742e29 100644
--- a/components/Dialog.tsx
+++ b/packages/components/src/components/Dialog/Dialog.tsx
@@ -1,9 +1,9 @@
-import styles from '@components/Dialog.module.scss';
+import styles from "./Dialog.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
-import Block from '@components/Block';
-import Button from '@components/Button';
+import { Block } from "@srcl/ui/components/Block";
+import { Button } from "@srcl/ui/components/Button";
 
 interface DialogProps {
   title?: React.ReactNode;
@@ -13,12 +13,25 @@ interface DialogProps {
   onCancel?: () => void;
 }
 
-const Dialog: React.FC<DialogProps> = ({ title, children, style, onConfirm, onCancel }) => {
+export const Dialog: React.FC<DialogProps> = ({
+  title,
+  children,
+  style,
+  onConfirm,
+  onCancel,
+}) => {
   const titleId = React.useId();
   const descId = React.useId();
 
   return (
-    <div className={styles.root} style={style} role="dialog" aria-modal="true" aria-labelledby={titleId} aria-describedby={descId}>
+    <div
+      className={styles.root}
+      style={style}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      aria-describedby={descId}
+    >
       <header className={styles.header}>{title}</header>
       <br />
       <article className={styles.message} id={descId}>
@@ -38,5 +51,3 @@ const Dialog: React.FC<DialogProps> = ({ title, children, style, onConfirm, onCa
     </div>
   );
 };
-
-export default Dialog;
diff --git a/packages/components/src/components/Dialog/index.ts b/packages/components/src/components/Dialog/index.ts
new file mode 100644
index 0000000..fa69c51
--- /dev/null
+++ b/packages/components/src/components/Dialog/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Dialog";
diff --git a/components/Divider.module.scss b/packages/components/src/components/Divider/Divider.module.scss
similarity index 100%
rename from components/Divider.module.scss
rename to packages/components/src/components/Divider/Divider.module.scss
diff --git a/components/Divider.tsx b/packages/components/src/components/Divider/Divider.tsx
similarity index 68%
rename from components/Divider.tsx
rename to packages/components/src/components/Divider/Divider.tsx
index bb7d06d..86926d1 100644
--- a/components/Divider.tsx
+++ b/packages/components/src/components/Divider/Divider.tsx
@@ -1,6 +1,6 @@
-import styles from '@components/Divider.module.scss';
+import styles from "./Divider.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface DividerProps extends React.HTMLAttributes<HTMLSpanElement> {
   children?: React.ReactNode;
@@ -8,12 +8,12 @@ interface DividerProps extends React.HTMLAttributes<HTMLSpanElement> {
   style?: any;
 }
 
-const Divider: React.FC<DividerProps> = ({ children, style, type }) => {
-  if (type === 'GRADIENT') {
+export const Divider: React.FC<DividerProps> = ({ children, style, type }) => {
+  if (type === "GRADIENT") {
     return <div className={styles.gradient} style={style} />;
   }
 
-  if (type === 'DOUBLE') {
+  if (type === "DOUBLE") {
     return (
       <div className={styles.divider} style={style}>
         <div className={styles.line} style={{ marginBottom: `2px` }} />
@@ -28,5 +28,3 @@ const Divider: React.FC<DividerProps> = ({ children, style, type }) => {
     </div>
   );
 };
-
-export default Divider;
diff --git a/packages/components/src/components/Divider/index.ts b/packages/components/src/components/Divider/index.ts
new file mode 100644
index 0000000..03e9f32
--- /dev/null
+++ b/packages/components/src/components/Divider/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Divider";
diff --git a/components/Drawer.module.scss b/packages/components/src/components/Drawer/Drawer.module.scss
similarity index 100%
rename from components/Drawer.module.scss
rename to packages/components/src/components/Drawer/Drawer.module.scss
diff --git a/components/Drawer.tsx b/packages/components/src/components/Drawer/Drawer.tsx
similarity index 55%
rename from components/Drawer.tsx
rename to packages/components/src/components/Drawer/Drawer.tsx
index ab46a14..3b2529b 100644
--- a/components/Drawer.tsx
+++ b/packages/components/src/components/Drawer/Drawer.tsx
@@ -1,15 +1,20 @@
-'use client';
+"use client";
 
-import styles from '@components/Drawer.module.scss';
+import styles from "./Drawer.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
-interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+interface DrawerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   children?: React.ReactNode;
   defaultValue?: boolean;
 }
 
-const Drawer: React.FC<DrawerProps> = ({ children, defaultValue = false, ...rest }) => {
+export const Drawer: React.FC<DrawerProps> = ({
+  children,
+  defaultValue = false,
+  ...rest
+}) => {
   const [expand, setExpand] = React.useState<boolean>(defaultValue);
 
   return (
@@ -17,11 +22,9 @@ const Drawer: React.FC<DrawerProps> = ({ children, defaultValue = false, ...rest
       {expand ? <div className={styles.side}>{children}</div> : null}
       <div className={styles.right}>
         <button className={styles.action} onClick={() => setExpand(!expand)}>
-          {expand ? '⭠' : '⭢'}
+          {expand ? "⭠" : "⭢"}
         </button>
       </div>
     </div>
   );
 };
-
-export default Drawer;
diff --git a/packages/components/src/components/Drawer/index.ts b/packages/components/src/components/Drawer/index.ts
new file mode 100644
index 0000000..4997213
--- /dev/null
+++ b/packages/components/src/components/Drawer/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Drawer";
diff --git a/components/DropdownMenu.module.scss b/packages/components/src/components/DropdownMenu/DropdownMenu.module.scss
similarity index 100%
rename from components/DropdownMenu.module.scss
rename to packages/components/src/components/DropdownMenu/DropdownMenu.module.scss
diff --git a/packages/components/src/components/DropdownMenu/DropdownMenu.tsx b/packages/components/src/components/DropdownMenu/DropdownMenu.tsx
new file mode 100644
index 0000000..ec194b5
--- /dev/null
+++ b/packages/components/src/components/DropdownMenu/DropdownMenu.tsx
@@ -0,0 +1,88 @@
+import styles from "./DropdownMenu.module.scss";
+
+import * as React from "react";
+
+import { ActionButton } from "@srcl/ui/components/ActionButton";
+import { ActionListItem } from "@srcl/ui/components/ActionListItem";
+import { ModalTrigger } from "@srcl/ui/components/ModalTrigger";
+
+import { useHotkeys } from "@srcl/ui/hooks";
+
+interface DropdownMenuItemProps {
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  href?: string;
+  target?: string;
+  onClick?: () => void;
+  modal?: any;
+  modalProps?: Record<string, unknown>;
+}
+
+interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClose?: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void;
+  items?: DropdownMenuItemProps[];
+}
+
+export const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
+  (props, ref) => {
+    const { onClose, items, style, ...rest } = props;
+
+    const handleHotkey = () => {
+      if (onClose) onClose();
+    };
+
+    useHotkeys("space", handleHotkey);
+
+    return (
+      <div ref={ref} className={styles.root} style={style} {...rest}>
+        {items &&
+          items.map((each, index) => {
+            if (each.modal) {
+              return (
+                <ModalTrigger
+                  key={`action-items-${index}`}
+                  modal={each.modal}
+                  modalProps={each.modalProps}
+                >
+                  <ActionListItem children={each.children} icon={each.icon} />
+                </ModalTrigger>
+              );
+            }
+
+            return (
+              <ActionListItem
+                key={`action-items-${index}`}
+                children={each.children}
+                icon={each.icon}
+                href={each.href}
+                target={each.target}
+                onClick={() => {
+                  if (each.onClick) {
+                    each.onClick();
+                  }
+
+                  if (onClose) {
+                    onClose();
+                  }
+                }}
+              />
+            );
+          })}
+
+        <footer className={styles.footer}>
+          Press space to{" "}
+          <ActionButton
+            hotkey="␣"
+            onClick={() => {
+              if (onClose) onClose();
+            }}
+          >
+            Close
+          </ActionButton>
+        </footer>
+      </div>
+    );
+  }
+);
+
+DropdownMenu.displayName = "DropdownMenu";
diff --git a/packages/components/src/components/DropdownMenu/index.ts b/packages/components/src/components/DropdownMenu/index.ts
new file mode 100644
index 0000000..a7f1d22
--- /dev/null
+++ b/packages/components/src/components/DropdownMenu/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./DropdownMenu";
diff --git a/components/DropdownMenuTrigger.module.scss b/packages/components/src/components/DropdownMenuTrigger/DropdownMenuTrigger.module.scss
similarity index 100%
rename from components/DropdownMenuTrigger.module.scss
rename to packages/components/src/components/DropdownMenuTrigger/DropdownMenuTrigger.module.scss
diff --git a/components/DropdownMenuTrigger.tsx b/packages/components/src/components/DropdownMenuTrigger/DropdownMenuTrigger.tsx
similarity index 68%
rename from components/DropdownMenuTrigger.tsx
rename to packages/components/src/components/DropdownMenuTrigger/DropdownMenuTrigger.tsx
index 7fb60bf..00671f1 100644
--- a/components/DropdownMenuTrigger.tsx
+++ b/packages/components/src/components/DropdownMenuTrigger/DropdownMenuTrigger.tsx
@@ -1,16 +1,15 @@
-'use client';
+"use client";
 
-import styles from '@components/DropdownMenuTrigger.module.scss';
+import styles from "./DropdownMenuTrigger.module.scss";
 
-import * as Position from '@common/position';
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
 
-import DropdownMenu from '@components/DropdownMenu';
-import OutsideElementEvent from '@components/detectors/OutsideElementEvent';
+import { DropdownMenu } from "../DropdownMenu";
+import { OutsideElementEvent } from "../OutsideElementEvent";
 
-import { createPortal } from 'react-dom';
-import { useHotkeys } from '@modules/hotkeys';
+import { createPortal } from "react-dom";
+import { useHotkeys } from "@srcl/ui/hooks";
 
 interface DropdownMenuTriggerProps {
   children: React.ReactElement<React.HTMLAttributes<HTMLElement>>;
@@ -18,12 +17,19 @@ interface DropdownMenuTriggerProps {
   hotkey?: string;
 }
 
-function DropdownMenuTrigger({ children, items, hotkey }: DropdownMenuTriggerProps) {
+export const DropdownMenuTrigger = ({
+  children,
+  items,
+  hotkey,
+}: DropdownMenuTriggerProps) => {
   const [open, setOpen] = React.useState(false);
   const [focusChildren, setFocusChildren] = React.useState(false);
   const [willClose, setWillClose] = React.useState(false);
-  const [placement, setPlacement] = React.useState<Position.Placement>('bottom');
-  const [position, setPosition] = React.useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const [placement, setPlacement] =
+    React.useState<Utilities.Placement>("bottom");
+  const [position, setPosition] = React.useState<{ top: number; left: number }>(
+    { top: 0, left: 0 }
+  );
 
   const triggerRef = React.useRef<HTMLElement>(null);
   const elementRef = React.useRef<HTMLDivElement>(null);
@@ -68,7 +74,10 @@ function DropdownMenuTrigger({ children, items, hotkey }: DropdownMenuTriggerPro
     if (!open || !triggerRef.current || !elementRef.current) return;
 
     const updatePosition = () => {
-      const { placement, position } = Position.calculate(triggerRef.current!, elementRef.current!);
+      const { placement, position } = Utilities.calculatePosition(
+        triggerRef.current!,
+        elementRef.current!
+      );
       setPlacement(placement);
       setPosition(position);
     };
@@ -78,14 +87,18 @@ function DropdownMenuTrigger({ children, items, hotkey }: DropdownMenuTriggerPro
 
     const handleResizeOrScroll = () => updatePosition();
     const observer = new MutationObserver(() => updatePosition());
-    observer.observe(document.body, { attributes: true, childList: true, subtree: true });
+    observer.observe(document.body, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
 
-    window.addEventListener('resize', handleResizeOrScroll);
-    window.addEventListener('scroll', handleResizeOrScroll, true);
+    window.addEventListener("resize", handleResizeOrScroll);
+    window.addEventListener("scroll", handleResizeOrScroll, true);
 
     return () => {
-      window.removeEventListener('resize', handleResizeOrScroll);
-      window.removeEventListener('scroll', handleResizeOrScroll, true);
+      window.removeEventListener("resize", handleResizeOrScroll);
+      window.removeEventListener("scroll", handleResizeOrScroll, true);
       observer.disconnect();
     };
   }, [open]);
@@ -98,7 +111,7 @@ function DropdownMenuTrigger({ children, items, hotkey }: DropdownMenuTriggerPro
             ref={elementRef}
             items={items}
             style={{
-              position: 'absolute',
+              position: "absolute",
               top: `${position.top}px`,
               left: `${position.left}px`,
               zIndex: `var(--z-index-page-dropdown-menus)`,
@@ -122,6 +135,4 @@ function DropdownMenuTrigger({ children, items, hotkey }: DropdownMenuTriggerPro
       {element}
     </div>
   );
-}
-
-export default DropdownMenuTrigger;
+};
diff --git a/packages/components/src/components/DropdownMenuTrigger/index.ts b/packages/components/src/components/DropdownMenuTrigger/index.ts
new file mode 100644
index 0000000..9c28b51
--- /dev/null
+++ b/packages/components/src/components/DropdownMenuTrigger/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./DropdownMenuTrigger";
diff --git a/components/Grid.module.scss b/packages/components/src/components/Grid/Grid.module.scss
similarity index 100%
rename from components/Grid.module.scss
rename to packages/components/src/components/Grid/Grid.module.scss
diff --git a/components/Grid.tsx b/packages/components/src/components/Grid/Grid.tsx
similarity index 53%
rename from components/Grid.tsx
rename to packages/components/src/components/Grid/Grid.tsx
index f3a71e7..7fff88b 100644
--- a/components/Grid.tsx
+++ b/packages/components/src/components/Grid/Grid.tsx
@@ -1,17 +1,15 @@
-import styles from '@components/Grid.module.scss';
+import styles from "./Grid.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-const Grid: React.FC<GridProps> = ({ children, ...rest }) => {
+export const Grid: React.FC<GridProps> = ({ children, ...rest }) => {
   return (
     <div className={styles.grid} {...rest}>
       {children}
     </div>
   );
 };
-
-export default Grid;
diff --git a/packages/components/src/components/Grid/index.ts b/packages/components/src/components/Grid/index.ts
new file mode 100644
index 0000000..cfcce12
--- /dev/null
+++ b/packages/components/src/components/Grid/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Grid";
diff --git a/components/HoverComponentTrigger.module.scss b/packages/components/src/components/HoverComponentTrigger/HoverComponentTrigger.module.scss
similarity index 100%
rename from components/HoverComponentTrigger.module.scss
rename to packages/components/src/components/HoverComponentTrigger/HoverComponentTrigger.module.scss
diff --git a/components/HoverComponentTrigger.tsx b/packages/components/src/components/HoverComponentTrigger/HoverComponentTrigger.tsx
similarity index 50%
rename from components/HoverComponentTrigger.tsx
rename to packages/components/src/components/HoverComponentTrigger/HoverComponentTrigger.tsx
index a046b04..86e3f4f 100644
--- a/components/HoverComponentTrigger.tsx
+++ b/packages/components/src/components/HoverComponentTrigger/HoverComponentTrigger.tsx
@@ -1,26 +1,33 @@
-'use client';
+"use client";
 
-import styles from '@components/HoverComponentTrigger.module.scss';
+import styles from "./HoverComponentTrigger.module.scss";
 
-import * as React from 'react';
-import * as Position from '@common/position';
+import * as React from "react";
+import * as Utillities from "@srcl/ui/utilities";
 
-import OutsideElementEvent from '@components/detectors/OutsideElementEvent';
-import Popover from '@components/Popover';
-import Tooltip from '@components/Tooltip';
+import { Popover } from "@srcl/ui/components/Popover";
+import { Tooltip } from "@srcl/ui/components/Tooltip";
 
-import { createPortal } from 'react-dom';
+import { createPortal } from "react-dom";
+import { OutsideElementEvent } from "../OutsideElementEvent";
 
 interface HoverComponentTriggerProps {
   children: React.ReactElement<React.HTMLAttributes<HTMLElement>>;
   text: string;
-  component: 'popover' | 'tooltip';
+  component: "popover" | "tooltip";
 }
 
-function HoverComponentTrigger({ children, text, component }: HoverComponentTriggerProps) {
+export const HoverComponentTrigger = ({
+  children,
+  text,
+  component,
+}: HoverComponentTriggerProps) => {
   const [open, setOpen] = React.useState(false);
-  const [placement, setPlacement] = React.useState<Position.Placement>('bottom');
-  const [position, setPosition] = React.useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const [placement, setPlacement] =
+    React.useState<Utillities.Placement>("bottom");
+  const [position, setPosition] = React.useState<{ top: number; left: number }>(
+    { top: 0, left: 0 }
+  );
 
   const triggerRef = React.useRef<HTMLDivElement>(null);
   const popoverRef = React.useRef<HTMLDivElement>(null);
@@ -34,7 +41,10 @@ function HoverComponentTrigger({ children, text, component }: HoverComponentTrig
     if (!open || !triggerRef.current || !popoverRef.current) return;
 
     const updatePosition = () => {
-      const { placement, position } = Position.calculate(triggerRef.current!, popoverRef.current!);
+      const { placement, position } = Utillities.calculatePosition(
+        triggerRef.current!,
+        popoverRef.current!
+      );
       setPlacement(placement);
       setPosition(position);
     };
@@ -44,25 +54,29 @@ function HoverComponentTrigger({ children, text, component }: HoverComponentTrig
     const handleResizeOrScroll = () => updatePosition();
 
     const mutationObserver = new MutationObserver(() => updatePosition());
-    mutationObserver.observe(document.body, { attributes: true, childList: true, subtree: true });
+    mutationObserver.observe(document.body, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
 
-    window.addEventListener('resize', handleResizeOrScroll);
-    window.addEventListener('scroll', handleResizeOrScroll, true);
+    window.addEventListener("resize", handleResizeOrScroll);
+    window.addEventListener("scroll", handleResizeOrScroll, true);
 
     return () => {
-      window.removeEventListener('resize', handleResizeOrScroll);
-      window.removeEventListener('scroll', handleResizeOrScroll, true);
+      window.removeEventListener("resize", handleResizeOrScroll);
+      window.removeEventListener("scroll", handleResizeOrScroll, true);
       mutationObserver.disconnect();
     };
   }, [open]);
 
   const renderComponent = () => {
-    if (component === 'popover') {
+    if (component === "popover") {
       return (
         <Popover
           ref={popoverRef}
           style={{
-            position: 'absolute',
+            position: "absolute",
             top: `${position.top}px`,
             left: `${position.left}px`,
             zIndex: `var(--z-index-page-popover)`,
@@ -73,12 +87,12 @@ function HoverComponentTrigger({ children, text, component }: HoverComponentTrig
           {text}
         </Popover>
       );
-    } else if (component === 'tooltip') {
+    } else if (component === "tooltip") {
       return (
         <Tooltip
           ref={popoverRef}
           style={{
-            position: 'absolute',
+            position: "absolute",
             top: `${position.top}px`,
             left: `${position.left}px`,
             zIndex: `var(--z-index-page-tooltip)`,
@@ -91,16 +105,28 @@ function HoverComponentTrigger({ children, text, component }: HoverComponentTrig
     return null;
   };
 
-  const popoverElement = open ? createPortal(<OutsideElementEvent onOutsideEvent={onOutsideEvent}>{renderComponent()}</OutsideElementEvent>, document.body) : null;
+  const popoverElement = open
+    ? createPortal(
+        <OutsideElementEvent onOutsideEvent={onOutsideEvent}>
+          {renderComponent()}
+        </OutsideElementEvent>,
+        document.body
+      )
+    : null;
 
   return (
-    <div ref={triggerRef} className={styles.root} data-detector-ignore onMouseEnter={onMouseEnter} onClick={onClick} onFocus={onHandleFocus}>
+    <div
+      ref={triggerRef}
+      className={styles.root}
+      data-detector-ignore
+      onMouseEnter={onMouseEnter}
+      onClick={onClick}
+      onFocus={onHandleFocus}
+    >
       {React.cloneElement(children, {
         tabIndex: 0,
       })}
       {popoverElement}
     </div>
   );
-}
-
-export default HoverComponentTrigger;
+};
diff --git a/packages/components/src/components/HoverComponentTrigger/index.ts b/packages/components/src/components/HoverComponentTrigger/index.ts
new file mode 100644
index 0000000..b73b5e1
--- /dev/null
+++ b/packages/components/src/components/HoverComponentTrigger/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./HoverComponentTrigger";
diff --git a/components/Indent.module.scss b/packages/components/src/components/Indent/Indent.module.scss
similarity index 100%
rename from components/Indent.module.scss
rename to packages/components/src/components/Indent/Indent.module.scss
diff --git a/components/Indent.tsx b/packages/components/src/components/Indent/Indent.tsx
similarity index 52%
rename from components/Indent.tsx
rename to packages/components/src/components/Indent/Indent.tsx
index 58e7601..f938dc9 100644
--- a/components/Indent.tsx
+++ b/packages/components/src/components/Indent/Indent.tsx
@@ -1,17 +1,15 @@
-import styles from '@components/Indent.module.scss';
+import styles from "./Indent.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface IndentProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-const Indent: React.FC<IndentProps> = ({ children, ...rest }) => {
+export const Indent: React.FC<IndentProps> = ({ children, ...rest }) => {
   return (
     <div className={styles.root} {...rest}>
       {children}
     </div>
   );
 };
-
-export default Indent;
diff --git a/packages/components/src/components/Indent/index.ts b/packages/components/src/components/Indent/index.ts
new file mode 100644
index 0000000..6c54ac6
--- /dev/null
+++ b/packages/components/src/components/Indent/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Indent";
diff --git a/components/Input.module.scss b/packages/components/src/components/Input/Input.module.scss
similarity index 100%
rename from components/Input.module.scss
rename to packages/components/src/components/Input/Input.module.scss
diff --git a/packages/components/src/components/Input/Input.tsx b/packages/components/src/components/Input/Input.tsx
new file mode 100644
index 0000000..4de798f
--- /dev/null
+++ b/packages/components/src/components/Input/Input.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
+
+import styles from "./Input.module.scss";
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  caretChars?: string | any;
+  label?: string | any;
+  isBlink?: boolean;
+};
+
+export const Input = ({
+  caretChars,
+  isBlink = true,
+  label,
+  placeholder,
+  onChange,
+  type,
+  id,
+  ...rest
+}: InputProps) => {
+  const generatedId = React.useId();
+  const inputId = id || generatedId;
+
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const [text, setText] = React.useState<string>(
+    rest.defaultValue?.toString() || rest.value?.toString() || ""
+  );
+  const [isFocused, setIsFocused] = React.useState<boolean>(false);
+  const [selectionStart, setSelectionStart] = React.useState<number>(
+    text.length
+  );
+
+  const lastFocusDirectionRef = React.useRef<"up" | "down" | null>(null);
+
+  React.useEffect(() => {
+    if (rest.value !== undefined) {
+      const val = rest.value.toString();
+      setText(val);
+      setSelectionStart(val.length);
+    }
+  }, [rest.value]);
+
+  const onHandleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setText(value);
+    if (onChange) {
+      onChange(e);
+    }
+    setSelectionStart(e.target.selectionStart ?? value.length);
+  };
+
+  const onHandleFocus = () => {
+    setIsFocused(true);
+    if (!inputRef.current) return;
+
+    if (lastFocusDirectionRef.current === "down") {
+      setSelectionStart(text.length);
+      inputRef.current.setSelectionRange(text.length, text.length);
+    } else if (lastFocusDirectionRef.current === "up") {
+      setSelectionStart(0);
+      inputRef.current.setSelectionRange(0, 0);
+    }
+  };
+
+  const onHandleBlur = () => {
+    setIsFocused(false);
+  };
+
+  const onHandleSelect = (e: React.SyntheticEvent<HTMLInputElement>) => {
+    const inputEl = e.currentTarget as HTMLInputElement;
+    setSelectionStart(inputEl.selectionStart ?? text.length);
+  };
+
+  const onHandleClick = (e: React.MouseEvent<HTMLInputElement>) => {
+    const inputEl = e.currentTarget as HTMLInputElement;
+    inputEl.focus();
+    setSelectionStart(inputEl.selectionStart ?? text.length);
+  };
+
+  const onHandleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      lastFocusDirectionRef.current = "up";
+      const previousFocusable = Utilities.findNextFocusable(
+        document.activeElement,
+        "previous"
+      );
+      previousFocusable?.focus();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      lastFocusDirectionRef.current = "down";
+      const nextFocusable = Utilities.findNextFocusable(
+        document.activeElement,
+        "next"
+      );
+      nextFocusable?.focus();
+    }
+  };
+
+  const isPlaceholderVisible = !text && placeholder;
+  const containerClasses = Utilities.classNames(
+    styles.root,
+    isFocused && styles.focused
+  );
+
+  const maskText = (t: string) =>
+    type === "password" ? "•".repeat(t.length) : t;
+
+  const beforeCaretText = isPlaceholderVisible
+    ? placeholder ?? ""
+    : maskText(text.substring(0, selectionStart));
+  const afterCaretText = isPlaceholderVisible
+    ? ""
+    : maskText(text.substring(selectionStart));
+
+  return (
+    <div className={containerClasses}>
+      {label && (
+        <label htmlFor={inputId} className={styles.label}>
+          {label}
+        </label>
+      )}
+      <div className={styles.inputContainer}>
+        <div
+          className={Utilities.classNames(
+            styles.displayed,
+            isPlaceholderVisible && styles.placeholder
+          )}
+        >
+          {beforeCaretText}
+          {!isPlaceholderVisible && (
+            <span
+              className={Utilities.classNames(
+                styles.block,
+                isBlink && styles.blink
+              )}
+            >
+              {caretChars || ""}
+            </span>
+          )}
+          {!isPlaceholderVisible && afterCaretText}
+        </div>
+        <input
+          id={inputId}
+          ref={inputRef}
+          className={styles.hidden}
+          value={text}
+          aria-placeholder={placeholder}
+          type={type}
+          onFocus={onHandleFocus}
+          onBlur={onHandleBlur}
+          onChange={onHandleChange}
+          onSelect={onHandleSelect}
+          onClick={onHandleClick}
+          onKeyDown={onHandleKeyDown}
+          {...rest}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/components/Input/index.ts b/packages/components/src/components/Input/index.ts
new file mode 100644
index 0000000..7ef5815
--- /dev/null
+++ b/packages/components/src/components/Input/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Input";
diff --git a/components/ListItem.module.scss b/packages/components/src/components/ListItem/ListItem.module.scss
similarity index 100%
rename from components/ListItem.module.scss
rename to packages/components/src/components/ListItem/ListItem.module.scss
diff --git a/packages/components/src/components/ListItem/ListItem.tsx b/packages/components/src/components/ListItem/ListItem.tsx
new file mode 100644
index 0000000..b43be59
--- /dev/null
+++ b/packages/components/src/components/ListItem/ListItem.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import styles from "./ListItem.module.scss";
+
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
+
+export const ListItem = ({ children }) => {
+  const itemRef = React.useRef<HTMLLIElement>(null);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLLIElement>) => {
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        itemRef.current?.click();
+        break;
+      case "ArrowUp":
+      case "ArrowLeft": {
+        event.preventDefault();
+        const previousFocusable = Utilities.findNextFocusable(
+          document.activeElement,
+          "previous"
+        );
+        previousFocusable?.focus();
+        break;
+      }
+      case "ArrowDown":
+      case "ArrowRight": {
+        event.preventDefault();
+        const nextFocusable = Utilities.findNextFocusable(
+          document.activeElement,
+          "next"
+        );
+        nextFocusable?.focus();
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  return (
+    <li
+      className={styles.root}
+      tabIndex={0}
+      ref={itemRef}
+      onKeyDown={handleKeyDown}
+    >
+      {children}
+    </li>
+  );
+};
diff --git a/packages/components/src/components/ListItem/index.ts b/packages/components/src/components/ListItem/index.ts
new file mode 100644
index 0000000..bf72f2e
--- /dev/null
+++ b/packages/components/src/components/ListItem/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ListItem";
diff --git a/components/MatrixLoader.module.scss b/packages/components/src/components/MatrixLoader/MatrixLoader.module.scss
similarity index 100%
rename from components/MatrixLoader.module.scss
rename to packages/components/src/components/MatrixLoader/MatrixLoader.module.scss
diff --git a/components/MatrixLoader.tsx b/packages/components/src/components/MatrixLoader/MatrixLoader.tsx
similarity index 59%
rename from components/MatrixLoader.tsx
rename to packages/components/src/components/MatrixLoader/MatrixLoader.tsx
index c5d3dc4..2cdc74a 100644
--- a/components/MatrixLoader.tsx
+++ b/packages/components/src/components/MatrixLoader/MatrixLoader.tsx
@@ -1,13 +1,13 @@
-'use client';
+"use client";
 
-import styles from '@components/MatrixLoader.module.scss';
+import styles from "./MatrixLoader.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface MatrixLoaderProps {
   rows?: number;
-  direction?: undefined | 'top-to-bottom' | 'left-to-right';
-  mode?: undefined | 'greek' | 'katakana';
+  direction?: undefined | "top-to-bottom" | "left-to-right";
+  mode?: undefined | "greek" | "katakana";
 }
 
 // TODO(jimmylee)
@@ -17,26 +17,42 @@ interface MatrixLoaderProps {
 const LINE_HEIGHT = 20;
 const CHARACTER_WIDTH = 9.6;
 
-function onTextGeneration({ mode = 'greek' }) {
-  if (mode === 'greek') {
+function onTextGeneration({ mode = "greek" }) {
+  if (mode === "greek") {
     const isUppercase = Math.random() < 0.5;
 
-    return String.fromCharCode(isUppercase ? 0x0391 + Math.floor(Math.random() * (0x03a9 - 0x0391 + 1)) : 0x03b1 + Math.floor(Math.random() * (0x03c9 - 0x03b1 + 1)));
+    return String.fromCharCode(
+      isUppercase
+        ? 0x0391 + Math.floor(Math.random() * (0x03a9 - 0x0391 + 1))
+        : 0x03b1 + Math.floor(Math.random() * (0x03c9 - 0x03b1 + 1))
+    );
   }
 
-  if (mode === 'katakana') {
+  if (mode === "katakana") {
     const japaneseRanges = [{ start: 0x30a0, end: 0x30ff }];
 
-    const allJapaneseCharacters = japaneseRanges.flatMap((range) => Array.from({ length: range.end - range.start + 1 }, (_, i) => range.start + i));
-
-    const randomJapaneseCharacter = allJapaneseCharacters[Math.floor(Math.random() * allJapaneseCharacters.length)];
+    const allJapaneseCharacters = japaneseRanges.flatMap((range) =>
+      Array.from(
+        { length: range.end - range.start + 1 },
+        (_, i) => range.start + i
+      )
+    );
+
+    const randomJapaneseCharacter =
+      allJapaneseCharacters[
+        Math.floor(Math.random() * allJapaneseCharacters.length)
+      ];
     return String.fromCharCode(randomJapaneseCharacter);
   }
 
-  return '0';
+  return "0";
 }
 
-const MatrixLoader: React.FC<MatrixLoaderProps> = ({ rows = 25, direction = 'top-to-bottom', mode = 'greek' }) => {
+export const MatrixLoader: React.FC<MatrixLoaderProps> = ({
+  rows = 25,
+  direction = "top-to-bottom",
+  mode = "greek",
+}) => {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
 
   React.useEffect(() => {
@@ -52,12 +68,12 @@ const MatrixLoader: React.FC<MatrixLoaderProps> = ({ rows = 25, direction = 'top
 
       const dpr = window.devicePixelRatio || 1;
 
-      canvas.style.width = parentWidth + 'px';
-      canvas.style.height = parentHeight + 'px';
+      canvas.style.width = parentWidth + "px";
+      canvas.style.height = parentHeight + "px";
       canvas.width = Math.floor(parentWidth * dpr);
       canvas.height = Math.floor(parentHeight * dpr);
 
-      const ctx = canvas.getContext('2d');
+      const ctx = canvas.getContext("2d");
       if (ctx) {
         ctx.scale(dpr, dpr);
       }
@@ -65,17 +81,17 @@ const MatrixLoader: React.FC<MatrixLoaderProps> = ({ rows = 25, direction = 'top
 
     resizeCanvas();
 
-    window.addEventListener('resize', resizeCanvas);
+    window.addEventListener("resize", resizeCanvas);
 
     return () => {
-      window.removeEventListener('resize', resizeCanvas);
+      window.removeEventListener("resize", resizeCanvas);
     };
   }, [rows]);
 
   React.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
     let interval: number;
@@ -84,21 +100,25 @@ const MatrixLoader: React.FC<MatrixLoaderProps> = ({ rows = 25, direction = 'top
       const w = canvas.width;
       const h = canvas.height;
 
-      if (direction === 'top-to-bottom') {
+      if (direction === "top-to-bottom") {
         const cols = Math.floor(w / CHARACTER_WIDTH);
         const ypos: number[] = Array(cols).fill(0);
 
         const matrix = () => {
-          const themeTextColor = getComputedStyle(document.body).getPropertyValue('--theme-text').trim();
-          const fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family-mono').trim();
-
-          ctx.globalCompositeOperation = 'destination-out';
-          ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
+          const themeTextColor = getComputedStyle(document.body)
+            .getPropertyValue("--theme-text")
+            .trim();
+          const fontFamily = getComputedStyle(document.body)
+            .getPropertyValue("--font-family-mono")
+            .trim();
+
+          ctx.globalCompositeOperation = "destination-out";
+          ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
           ctx.fillRect(0, 0, w, h);
-          ctx.textBaseline = 'top';
+          ctx.textBaseline = "top";
           ctx.font = `16px ${fontFamily}`;
 
-          ctx.globalCompositeOperation = 'source-over';
+          ctx.globalCompositeOperation = "source-over";
 
           ypos.forEach((y, ind) => {
             const text = onTextGeneration({ mode });
@@ -116,21 +136,25 @@ const MatrixLoader: React.FC<MatrixLoaderProps> = ({ rows = 25, direction = 'top
         };
 
         interval = window.setInterval(matrix, 50);
-      } else if (direction === 'left-to-right') {
+      } else if (direction === "left-to-right") {
         const totalRows = rows; // Use rows directly for total rows
         const xpos: number[] = Array(totalRows).fill(0);
 
         const matrix = () => {
-          const themeTextColor = getComputedStyle(document.body).getPropertyValue('--theme-text').trim();
-          const fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family-mono').trim();
-
-          ctx.globalCompositeOperation = 'destination-out';
-          ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
+          const themeTextColor = getComputedStyle(document.body)
+            .getPropertyValue("--theme-text")
+            .trim();
+          const fontFamily = getComputedStyle(document.body)
+            .getPropertyValue("--font-family-mono")
+            .trim();
+
+          ctx.globalCompositeOperation = "destination-out";
+          ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
           ctx.fillRect(0, 0, w, h);
-          ctx.textBaseline = 'top';
+          ctx.textBaseline = "top";
           ctx.font = `16px ${fontFamily}`;
 
-          ctx.globalCompositeOperation = 'source-over';
+          ctx.globalCompositeOperation = "source-over";
 
           xpos.forEach((x, ind) => {
             const text = onTextGeneration({ mode });
@@ -164,5 +188,3 @@ const MatrixLoader: React.FC<MatrixLoaderProps> = ({ rows = 25, direction = 'top
     </div>
   );
 };
-
-export default MatrixLoader;
diff --git a/packages/components/src/components/MatrixLoader/index.ts b/packages/components/src/components/MatrixLoader/index.ts
new file mode 100644
index 0000000..cdde2dc
--- /dev/null
+++ b/packages/components/src/components/MatrixLoader/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./MatrixLoader";
diff --git a/components/Message.module.scss b/packages/components/src/components/Message/Message.module.scss
similarity index 100%
rename from components/Message.module.scss
rename to packages/components/src/components/Message/Message.module.scss
diff --git a/components/Message.tsx b/packages/components/src/components/Message/Message.tsx
similarity index 73%
rename from components/Message.tsx
rename to packages/components/src/components/Message/Message.tsx
index ddbe0e3..709305b 100644
--- a/components/Message.tsx
+++ b/packages/components/src/components/Message/Message.tsx
@@ -1,6 +1,6 @@
-import styles from '@components/Message.module.scss';
+import styles from "./Message.module.scss";
 
-export default function Message(props) {
+export const Message = (props) => {
   return (
     <div className={styles.message}>
       <div className={styles.left}>
@@ -11,4 +11,4 @@ export default function Message(props) {
       </div>
     </div>
   );
-}
+};
diff --git a/packages/components/src/components/Message/index.ts b/packages/components/src/components/Message/index.ts
new file mode 100644
index 0000000..f4a79a2
--- /dev/null
+++ b/packages/components/src/components/Message/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Message";
diff --git a/components/MessageViewer.module.scss b/packages/components/src/components/MessageViewer/MessageViewer.module.scss
similarity index 100%
rename from components/MessageViewer.module.scss
rename to packages/components/src/components/MessageViewer/MessageViewer.module.scss
diff --git a/components/MessageViewer.tsx b/packages/components/src/components/MessageViewer/MessageViewer.tsx
similarity index 71%
rename from components/MessageViewer.tsx
rename to packages/components/src/components/MessageViewer/MessageViewer.tsx
index 2d89d37..a151565 100644
--- a/components/MessageViewer.tsx
+++ b/packages/components/src/components/MessageViewer/MessageViewer.tsx
@@ -1,6 +1,6 @@
-import styles from '@components/MessageViewer.module.scss';
+import styles from "./MessageViewer.module.scss";
 
-export default function MessageViewer(props) {
+export const MessageViewer = (props) => {
   return (
     <div className={styles.message}>
       <div className={styles.left}>
@@ -11,4 +11,4 @@ export default function MessageViewer(props) {
       </div>
     </div>
   );
-}
+};
diff --git a/packages/components/src/components/MessageViewer/index.ts b/packages/components/src/components/MessageViewer/index.ts
new file mode 100644
index 0000000..8863c68
--- /dev/null
+++ b/packages/components/src/components/MessageViewer/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./MessageViewer";
diff --git a/components/modals/ModalAlert.module.scss b/packages/components/src/components/ModalAlert/ModalAlert.module.scss
similarity index 100%
rename from components/modals/ModalAlert.module.scss
rename to packages/components/src/components/ModalAlert/ModalAlert.module.scss
diff --git a/packages/components/src/components/ModalAlert/ModalAlert.tsx b/packages/components/src/components/ModalAlert/ModalAlert.tsx
new file mode 100644
index 0000000..41cf2b4
--- /dev/null
+++ b/packages/components/src/components/ModalAlert/ModalAlert.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import styles from "./ModalAlert.module.scss";
+
+import * as Utilities from "@srcl/ui/utilities";
+
+import { useModals } from "@srcl/ui/hooks";
+
+import { Button } from "@srcl/ui/components/Button";
+import { Card } from "@srcl/ui/components/Card";
+
+interface ModalAlertProps {
+  buttonText?: string | any;
+  message: string;
+}
+
+export const ModalAlert = ({ message, buttonText }: ModalAlertProps) => {
+  const { close } = useModals();
+
+  return (
+    <div className={styles.root}>
+      <Card title="ALERT">
+        {message}
+        <br />
+        <br />
+        <Button onClick={() => close()}>
+          {Utilities.isEmpty(buttonText) ? "Close" : buttonText}
+        </Button>
+      </Card>
+    </div>
+  );
+};
diff --git a/packages/components/src/components/ModalAlert/index.ts b/packages/components/src/components/ModalAlert/index.ts
new file mode 100644
index 0000000..159ab33
--- /dev/null
+++ b/packages/components/src/components/ModalAlert/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalAlert";
diff --git a/components/modals/ModalCanvasPlatformer.module.scss b/packages/components/src/components/ModalCanvasPlatformer/ModalCanvasPlatformer.module.scss
similarity index 100%
rename from components/modals/ModalCanvasPlatformer.module.scss
rename to packages/components/src/components/ModalCanvasPlatformer/ModalCanvasPlatformer.module.scss
diff --git a/packages/components/src/components/ModalCanvasPlatformer/ModalCanvasPlatformer.tsx b/packages/components/src/components/ModalCanvasPlatformer/ModalCanvasPlatformer.tsx
new file mode 100644
index 0000000..c62a520
--- /dev/null
+++ b/packages/components/src/components/ModalCanvasPlatformer/ModalCanvasPlatformer.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import styles from "./ModalCanvasPlatformer.module.scss";
+
+import * as Utilities from "@srcl/ui/utilities";
+
+import { useModals } from "@srcl/ui/hooks";
+
+import { Button } from "@srcl/ui/components/Button";
+import { CanvasPlatformer } from "@srcl/ui/components/CanvasPlatformer";
+import { Card } from "@srcl/ui/components/Card";
+
+interface ModalCanvasPlatformerProps {
+  buttonText?: string | any;
+}
+
+export function ModalCanvasPlatformer({
+  buttonText,
+}: ModalCanvasPlatformerProps) {
+  const { close } = useModals();
+
+  return (
+    <div className={styles.root}>
+      <Card title="ALERT">
+        <CanvasPlatformer rows={12} />
+        <br />
+        <br />
+        <Button onClick={() => close()}>
+          {Utilities.isEmpty(buttonText) ? "Close" : buttonText}
+        </Button>
+      </Card>
+    </div>
+  );
+}
diff --git a/packages/components/src/components/ModalCanvasPlatformer/index.ts b/packages/components/src/components/ModalCanvasPlatformer/index.ts
new file mode 100644
index 0000000..52032f3
--- /dev/null
+++ b/packages/components/src/components/ModalCanvasPlatformer/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalCanvasPlatformer";
diff --git a/components/modals/ModalCanvasSnake.module.scss b/packages/components/src/components/ModalCanvasSnake/ModalCanvasSnake.module.scss
similarity index 100%
rename from components/modals/ModalCanvasSnake.module.scss
rename to packages/components/src/components/ModalCanvasSnake/ModalCanvasSnake.module.scss
diff --git a/packages/components/src/components/ModalCanvasSnake/ModalCanvasSnake.tsx b/packages/components/src/components/ModalCanvasSnake/ModalCanvasSnake.tsx
new file mode 100644
index 0000000..b02c3aa
--- /dev/null
+++ b/packages/components/src/components/ModalCanvasSnake/ModalCanvasSnake.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import styles from "./ModalCanvasSnake.module.scss";
+
+import * as Utilities from "@srcl/ui/utilities";
+
+import { useModals } from "@srcl/ui/hooks";
+
+import { Button } from "@srcl/ui/components/Button";
+import { CanvasSnake } from "@srcl/ui/components/CanvasSnake";
+import { Card } from "@srcl/ui/components/Card";
+
+interface ModalCanvasSnakeProps {
+  buttonText?: string | any;
+}
+
+export const ModalCanvasSnake = ({ buttonText }: ModalCanvasSnakeProps) => {
+  const { close } = useModals();
+
+  return (
+    <div className={styles.root}>
+      <Card title="CANVAS PLATFORMER">
+        <CanvasSnake rows={12} />
+        <br />
+        <br />
+        <Button onClick={() => close()}>
+          {Utilities.isEmpty(buttonText) ? "Close" : buttonText}
+        </Button>
+      </Card>
+    </div>
+  );
+};
diff --git a/packages/components/src/components/ModalCanvasSnake/index.ts b/packages/components/src/components/ModalCanvasSnake/index.ts
new file mode 100644
index 0000000..6a8bfa3
--- /dev/null
+++ b/packages/components/src/components/ModalCanvasSnake/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalCanvasSnake";
diff --git a/components/modals/ModalChess.module.scss b/packages/components/src/components/ModalChess/ModalChess.module.scss
similarity index 100%
rename from components/modals/ModalChess.module.scss
rename to packages/components/src/components/ModalChess/ModalChess.module.scss
diff --git a/packages/components/src/components/ModalChess/ModalChess.tsx b/packages/components/src/components/ModalChess/ModalChess.tsx
new file mode 100644
index 0000000..4ea9fd7
--- /dev/null
+++ b/packages/components/src/components/ModalChess/ModalChess.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import styles from "./ModalChess.module.scss";
+
+import * as Utilities from "@srcl/ui/utilities";
+
+import { useHotkeys, useModals } from "@srcl/ui/hooks";
+
+import { Button } from "@srcl/ui/components/Button";
+import { CardDouble } from "@srcl/ui/components/CardDouble";
+import { Chessboard } from "@srcl/ui/components/Chessboard";
+
+interface ModalErrorProps {
+  buttonText?: string | any;
+  board: string[][];
+  title?: string;
+}
+
+export const ModalChess = ({ board, buttonText, title }: ModalErrorProps) => {
+  const { close } = useModals();
+
+  useHotkeys("enter", () => close());
+
+  return (
+    <div className={styles.root}>
+      <CardDouble title={title} style={{ textAlign: "center" }}>
+        <Chessboard board={board} />
+        <br />
+        <br />
+        <Button onClick={() => close()}>
+          {Utilities.isEmpty(buttonText) ? "CLOSE" : buttonText}
+        </Button>
+      </CardDouble>
+    </div>
+  );
+};
diff --git a/packages/components/src/components/ModalChess/index.ts b/packages/components/src/components/ModalChess/index.ts
new file mode 100644
index 0000000..19ec8a0
--- /dev/null
+++ b/packages/components/src/components/ModalChess/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalChess";
diff --git a/components/modals/ModalCreateAccount.module.scss b/packages/components/src/components/ModalCreateAccount/ModalCreateAccount.module.scss
similarity index 100%
rename from components/modals/ModalCreateAccount.module.scss
rename to packages/components/src/components/ModalCreateAccount/ModalCreateAccount.module.scss
diff --git a/packages/components/src/components/ModalCreateAccount/ModalCreateAccount.tsx b/packages/components/src/components/ModalCreateAccount/ModalCreateAccount.tsx
new file mode 100644
index 0000000..d8985b1
--- /dev/null
+++ b/packages/components/src/components/ModalCreateAccount/ModalCreateAccount.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import styles from "./ModalCreateAccount.module.scss";
+
+import { useModals } from "@srcl/ui/hooks";
+
+import { Button } from "@srcl/ui/components/Button";
+import { CardDouble } from "@srcl/ui/components/CardDouble";
+
+import { Checkbox } from "@srcl/ui/components/Checkbox";
+import { Input } from "@srcl/ui/components/Input";
+import { RadioButtonGroup } from "@srcl/ui/components/RadioButton/RadioButtonGroup";
+
+export const ModalCreateAccount = () => {
+  const { close } = useModals();
+
+  return (
+    <div className={styles.root}>
+      <CardDouble title="NEW ACCOUNT">
+        Create a new MakeBelieve™ account, where anything is possible at your
+        command line in the browser.
+        <br />
+        <br />
+        <RadioButtonGroup
+          defaultValue="modal_developer"
+          options={[
+            {
+              value: "modal_individual",
+              label: "I’m using this for personal use.",
+            },
+            {
+              value: "modal_developer",
+              label: "I’m building or creating something for work.",
+            },
+            {
+              value: "modal_company",
+              label: "We’re using this as a team or organization.",
+            },
+          ]}
+        />
+        <br />
+        <Input
+          autoComplete="off"
+          label="USERNAME"
+          placeholder="Choose a username (e.g., SurfGirl29)"
+          name="modal_username"
+        />
+        <Input
+          autoComplete="off"
+          label="PASSWORD"
+          placeholder="Create a password (8+ characters)"
+          type="password"
+          name="modal_password"
+        />
+        <Input
+          autoComplete="off"
+          label="CONFIRM"
+          placeholder="Type it again"
+          type="password"
+          name="modal_confirm"
+        />
+        <br />
+        <Checkbox name="modal_terms">
+          I agree to the Terms of Service, Data Privacy Policy, and Acceptable
+          Use Guidelines.
+        </Checkbox>
+        <Checkbox name="modal_goodwill">
+          I agree not to use this service for unlawful purposes.
+        </Checkbox>
+        <br />
+        <Button onClick={() => close()}>Create an account</Button>
+      </CardDouble>
+    </div>
+  );
+};
diff --git a/packages/components/src/components/ModalCreateAccount/index.ts b/packages/components/src/components/ModalCreateAccount/index.ts
new file mode 100644
index 0000000..34ca28b
--- /dev/null
+++ b/packages/components/src/components/ModalCreateAccount/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalCreateAccount";
diff --git a/packages/components/src/components/ModalDOMSnake/ModalDOMSnake.module.scss b/packages/components/src/components/ModalDOMSnake/ModalDOMSnake.module.scss
new file mode 100644
index 0000000..52df0e3
--- /dev/null
+++ b/packages/components/src/components/ModalDOMSnake/ModalDOMSnake.module.scss
@@ -0,0 +1,23 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(88px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+.root {
+  animation: fadeIn 0.3s ease-out;
+  background: var(--theme-background-modal);
+  box-shadow: 0 0 0 1ch var(--theme-border-subdued);
+  display: block;
+  font-weight: 400;
+  margin: 0 auto;
+  max-width: 64ch;
+  padding: calc(var(--font-size) * var(--theme-line-height-base)) 2ch calc(var(--font-size) * var(--theme-line-height-base)) 2ch;
+  user-select: none;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/packages/components/src/components/ModalDOMSnake/ModalDOMSnake.tsx b/packages/components/src/components/ModalDOMSnake/ModalDOMSnake.tsx
new file mode 100644
index 0000000..bedc9da
--- /dev/null
+++ b/packages/components/src/components/ModalDOMSnake/ModalDOMSnake.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import styles from "./ModalDOMSnake.module.scss";
+
+import * as Utilities from "@srcl/ui/utilities";
+
+import { useModals } from "@srcl/ui/hooks";
+
+import { Button } from "@srcl/ui/components/Button";
+import { Card } from "@srcl/ui/components/Card";
+
+import { DOMSnake } from "@srcl/ui/components/DOMSnake";
+
+interface ModalDOMSnakeProps {
+  buttonText?: string | any;
+}
+
+export const ModalDOMSnake = ({ buttonText }: ModalDOMSnakeProps) => {
+  const { close } = useModals();
+
+  return (
+    <div className={styles.root}>
+      <Card title="DOM SNAKE">
+        <DOMSnake height={14} width={34} />
+        <br />
+        <br />
+        <Button onClick={() => close()}>
+          {Utilities.isEmpty(buttonText) ? "Close" : buttonText}
+        </Button>
+      </Card>
+    </div>
+  );
+};
diff --git a/packages/components/src/components/ModalDOMSnake/index.ts b/packages/components/src/components/ModalDOMSnake/index.ts
new file mode 100644
index 0000000..83d2147
--- /dev/null
+++ b/packages/components/src/components/ModalDOMSnake/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalDOMSnake";
diff --git a/components/modals/ModalError.module.scss b/packages/components/src/components/ModalError/ModalError.module.scss
similarity index 100%
rename from components/modals/ModalError.module.scss
rename to packages/components/src/components/ModalError/ModalError.module.scss
diff --git a/packages/components/src/components/ModalError/ModalError.tsx b/packages/components/src/components/ModalError/ModalError.tsx
new file mode 100644
index 0000000..868282b
--- /dev/null
+++ b/packages/components/src/components/ModalError/ModalError.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import styles from "./ModalError.module.scss";
+
+import { useHotkeys, useModals } from "@srcl/ui/hooks";
+
+import { ActionButton } from "@srcl/ui/components/ActionButton";
+import { CardDouble } from "@srcl/ui/components/CardDouble";
+
+import { Grid } from "@srcl/ui/components/Grid";
+
+interface ModalErrorProps {
+  buttonText?: string | any;
+  message: string | any;
+  title?: string;
+}
+
+// TODO(jimmylee)
+// Enter doesn't always work for some reason.
+export const ModalError = ({ message, buttonText, title }: ModalErrorProps) => {
+  const { close } = useModals();
+
+  useHotkeys("enter", () => close());
+
+  return (
+    <div className={styles.root}>
+      <CardDouble title={title}>
+        <br />
+        {message}
+        <Grid>
+          <ul>
+            <li>
+              Press{" "}
+              <ActionButton hotkey="⏎" onClick={() => close()}>
+                ENTER
+              </ActionButton>{" "}
+              to continue.
+            </li>
+          </ul>
+        </Grid>
+      </CardDouble>
+    </div>
+  );
+};
diff --git a/packages/components/src/components/ModalError/index.ts b/packages/components/src/components/ModalError/index.ts
new file mode 100644
index 0000000..26573ec
--- /dev/null
+++ b/packages/components/src/components/ModalError/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalError";
diff --git a/components/modals/ModalMatrixModes.module.scss b/packages/components/src/components/ModalMatrixModes/ModalMatrixModes.module.scss
similarity index 100%
rename from components/modals/ModalMatrixModes.module.scss
rename to packages/components/src/components/ModalMatrixModes/ModalMatrixModes.module.scss
diff --git a/packages/components/src/components/ModalMatrixModes/ModalMatrixModes.tsx b/packages/components/src/components/ModalMatrixModes/ModalMatrixModes.tsx
new file mode 100644
index 0000000..a6a125d
--- /dev/null
+++ b/packages/components/src/components/ModalMatrixModes/ModalMatrixModes.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import styles from "./ModalMatrixModes.module.scss";
+
+import * as Utilities from "@srcl/ui/utilities";
+
+import { useModals } from "@srcl/ui/hooks";
+
+import { Button } from "@srcl/ui/components/Button";
+import { Card } from "@srcl/ui/components/Card";
+import { MatrixLoader } from "@srcl/ui/components/MatrixLoader";
+
+interface ModalMatrixModesProps {
+  buttonText?: string | any;
+}
+
+export const ModalMatrixModes = ({ buttonText }: ModalMatrixModesProps) => {
+  const { close } = useModals();
+
+  return (
+    <div className={styles.root}>
+      <Card title="MATRIX MODES">
+        <Card title="KATAKANA DEFAULT">
+          <MatrixLoader rows={32} mode="katakana" />
+        </Card>
+        <Card title="GREEK LTR">
+          <MatrixLoader direction="left-to-right" rows={8} mode="greek" />
+        </Card>
+        <br />
+        <br />
+        <Button onClick={() => close()}>
+          {Utilities.isEmpty(buttonText) ? "Close" : buttonText}
+        </Button>
+      </Card>
+    </div>
+  );
+};
diff --git a/packages/components/src/components/ModalMatrixModes/index.ts b/packages/components/src/components/ModalMatrixModes/index.ts
new file mode 100644
index 0000000..9728bb4
--- /dev/null
+++ b/packages/components/src/components/ModalMatrixModes/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalMatrixModes";
diff --git a/components/ModalStack.module.scss b/packages/components/src/components/ModalStack/ModalStack.module.scss
similarity index 100%
rename from components/ModalStack.module.scss
rename to packages/components/src/components/ModalStack/ModalStack.module.scss
diff --git a/components/ModalStack.tsx b/packages/components/src/components/ModalStack/ModalStack.tsx
similarity index 72%
rename from components/ModalStack.tsx
rename to packages/components/src/components/ModalStack/ModalStack.tsx
index d15a3ff..0a6ea4d 100644
--- a/components/ModalStack.tsx
+++ b/packages/components/src/components/ModalStack/ModalStack.tsx
@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import styles from '@components/ModalStack.module.scss';
+import styles from "./ModalStack.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
-import { useModals } from '@components/page/ModalContext';
+import { useModals } from "@srcl/ui/hooks";
 
 interface ModalStackProps {}
 
-const ModalStack: React.FC<ModalStackProps> = () => {
+export const ModalStack: React.FC<ModalStackProps> = () => {
   const { modalStack } = useModals();
 
   const totalModals = modalStack.length;
@@ -19,7 +19,9 @@ const ModalStack: React.FC<ModalStackProps> = () => {
         const { key, component: ModalComponent, props } = modalState;
 
         if (!ModalComponent) {
-          console.warn(`ModalComponent is undefined for modal with key: ${key}`);
+          console.warn(
+            `ModalComponent is undefined for modal with key: ${key}`
+          );
           return null;
         }
 
@@ -44,5 +46,3 @@ const ModalStack: React.FC<ModalStackProps> = () => {
     </div>
   );
 };
-
-export default ModalStack;
diff --git a/packages/components/src/components/ModalStack/index.ts b/packages/components/src/components/ModalStack/index.ts
new file mode 100644
index 0000000..e8606c3
--- /dev/null
+++ b/packages/components/src/components/ModalStack/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalStack";
diff --git a/components/ModalTrigger.tsx b/packages/components/src/components/ModalTrigger/ModalTrigger.tsx
similarity index 62%
rename from components/ModalTrigger.tsx
rename to packages/components/src/components/ModalTrigger/ModalTrigger.tsx
index 5d72a73..6325b1a 100644
--- a/components/ModalTrigger.tsx
+++ b/packages/components/src/components/ModalTrigger/ModalTrigger.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import * as React from 'react';
+import * as React from "react";
 
-import { useModals } from '@components/page/ModalContext';
+import { useModals } from "@srcl/ui/hooks";
 
 interface ModalTriggerProps {
   children: React.ReactElement<{ onClick?: React.MouseEventHandler }>;
@@ -10,7 +10,11 @@ interface ModalTriggerProps {
   modalProps?: Record<string, any>;
 }
 
-function ModalTrigger({ children, modal, modalProps = {} }: ModalTriggerProps) {
+export const ModalTrigger = ({
+  children,
+  modal,
+  modalProps = {},
+}: ModalTriggerProps) => {
   const { open } = useModals();
 
   const onHandleOpenModal = () => {
@@ -20,6 +24,4 @@ function ModalTrigger({ children, modal, modalProps = {} }: ModalTriggerProps) {
   return React.cloneElement(children, {
     onClick: onHandleOpenModal,
   });
-}
-
-export default ModalTrigger;
+};
diff --git a/packages/components/src/components/ModalTrigger/index.ts b/packages/components/src/components/ModalTrigger/index.ts
new file mode 100644
index 0000000..79945b1
--- /dev/null
+++ b/packages/components/src/components/ModalTrigger/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalTrigger";
diff --git a/components/Navigation.module.scss b/packages/components/src/components/Navigation/Navigation.module.scss
similarity index 100%
rename from components/Navigation.module.scss
rename to packages/components/src/components/Navigation/Navigation.module.scss
diff --git a/components/Navigation.tsx b/packages/components/src/components/Navigation/Navigation.tsx
similarity index 78%
rename from components/Navigation.tsx
rename to packages/components/src/components/Navigation/Navigation.tsx
index 397507a..747e951 100644
--- a/components/Navigation.tsx
+++ b/packages/components/src/components/Navigation/Navigation.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import styles from '@components/Navigation.module.scss';
+import styles from "./Navigation.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
@@ -14,7 +14,15 @@ interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
   right?: React.ReactNode;
 }
 
-const Navigation: React.FC<NavigationProps> = ({ children, logoHref, logoTarget, onClickLogo, logo, left, right }) => {
+export const Navigation: React.FC<NavigationProps> = ({
+  children,
+  logoHref,
+  logoTarget,
+  onClickLogo,
+  logo,
+  left,
+  right,
+}) => {
   let logoElement = <button className={styles.logo}>{logo}</button>;
 
   if (onClickLogo) {
@@ -42,5 +50,3 @@ const Navigation: React.FC<NavigationProps> = ({ children, logoHref, logoTarget,
     </nav>
   );
 };
-
-export default Navigation;
diff --git a/packages/components/src/components/Navigation/index.ts b/packages/components/src/components/Navigation/index.ts
new file mode 100644
index 0000000..25fcbc9
--- /dev/null
+++ b/packages/components/src/components/Navigation/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Navigation";
diff --git a/components/NumberRangeSlider.module.scss b/packages/components/src/components/NumberRangeSlider/NumberRangeSlider.module.scss
similarity index 100%
rename from components/NumberRangeSlider.module.scss
rename to packages/components/src/components/NumberRangeSlider/NumberRangeSlider.module.scss
diff --git a/components/NumberRangeSlider.tsx b/packages/components/src/components/NumberRangeSlider/NumberRangeSlider.tsx
similarity index 61%
rename from components/NumberRangeSlider.tsx
rename to packages/components/src/components/NumberRangeSlider/NumberRangeSlider.tsx
index 0d74b02..a584098 100644
--- a/components/NumberRangeSlider.tsx
+++ b/packages/components/src/components/NumberRangeSlider/NumberRangeSlider.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import styles from '@components/NumberRangeSlider.module.scss';
+import styles from "./NumberRangeSlider.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface RangerProps {
   defaultValue?: number;
@@ -11,14 +11,19 @@ interface RangerProps {
   step?: number;
 }
 
-const NumberRangeSlider: React.FC<RangerProps> = ({ defaultValue = 0, max = 5000, min = 0, step = 1 }) => {
+export const NumberRangeSlider: React.FC<RangerProps> = ({
+  defaultValue = 0,
+  max = 5000,
+  min = 0,
+  step = 1,
+}) => {
   const sliderRef = React.useRef<HTMLInputElement>(null);
   const [displayValue, setDisplayValue] = React.useState<number>(defaultValue);
 
   const maxDigits = max.toString().length;
 
   const padValue = (value: number): string => {
-    return value.toString().padStart(maxDigits, '0');
+    return value.toString().padStart(maxDigits, "0");
   };
 
   React.useEffect(() => {
@@ -38,9 +43,18 @@ const NumberRangeSlider: React.FC<RangerProps> = ({ defaultValue = 0, max = 5000
       <label className={styles.left}>
         <div className={styles.amount}>{padValue(displayValue)}</div>
       </label>
-      <input className={styles.slider} defaultValue={defaultValue} max={max} min={min} onChange={scrub} ref={sliderRef} role="slider" step={step} tabIndex={0} type="range" />
+      <input
+        className={styles.slider}
+        defaultValue={defaultValue}
+        max={max}
+        min={min}
+        onChange={scrub}
+        ref={sliderRef}
+        role="slider"
+        step={step}
+        tabIndex={0}
+        type="range"
+      />
     </div>
   );
 };
-
-export default NumberRangeSlider;
diff --git a/packages/components/src/components/NumberRangeSlider/index.ts b/packages/components/src/components/NumberRangeSlider/index.ts
new file mode 100644
index 0000000..9d023d8
--- /dev/null
+++ b/packages/components/src/components/NumberRangeSlider/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./NumberRangeSlider";
diff --git a/components/detectors/OutsideElementEvent.tsx b/packages/components/src/components/OutsideElementEvent/OutsideElementEvent.tsx
similarity index 87%
rename from components/detectors/OutsideElementEvent.tsx
rename to packages/components/src/components/OutsideElementEvent/OutsideElementEvent.tsx
index 421d6ab..bc86c43 100644
--- a/components/detectors/OutsideElementEvent.tsx
+++ b/packages/components/src/components/OutsideElementEvent/OutsideElementEvent.tsx
@@ -7,7 +7,7 @@ interface OutsideElementEventProps {
   style?: React.CSSProperties;
 }
 
-const OutsideElementEvent: React.FC<OutsideElementEventProps> = ({ className, children, onOutsideEvent, style }) => {
+export const OutsideElementEvent: React.FC<OutsideElementEventProps> = ({ className, children, onOutsideEvent, style }) => {
   const ref = React.useRef<HTMLDivElement>(null);
 
   const handleOutsideEvent = React.useCallback(
@@ -41,5 +41,3 @@ const OutsideElementEvent: React.FC<OutsideElementEventProps> = ({ className, ch
     </div>
   );
 };
-
-export default OutsideElementEvent;
diff --git a/packages/components/src/components/OutsideElementEvent/index.ts b/packages/components/src/components/OutsideElementEvent/index.ts
new file mode 100644
index 0000000..1d23f00
--- /dev/null
+++ b/packages/components/src/components/OutsideElementEvent/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./OutsideElementEvent";
diff --git a/components/Popover.module.scss b/packages/components/src/components/Popover/Popover.module.scss
similarity index 100%
rename from components/Popover.module.scss
rename to packages/components/src/components/Popover/Popover.module.scss
diff --git a/packages/components/src/components/Popover/Popover.tsx b/packages/components/src/components/Popover/Popover.tsx
new file mode 100644
index 0000000..f676bf0
--- /dev/null
+++ b/packages/components/src/components/Popover/Popover.tsx
@@ -0,0 +1,15 @@
+import styles from "./Popover.module.scss";
+
+import * as React from "react";
+
+interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
+  ({ style: propStyle, ...rest }, ref) => {
+    const style: React.CSSProperties = { ...propStyle };
+
+    return <div ref={ref} className={styles.root} {...rest} style={style} />;
+  }
+);
+
+Popover.displayName = "Popover";
diff --git a/packages/components/src/components/Popover/index.ts b/packages/components/src/components/Popover/index.ts
new file mode 100644
index 0000000..8624745
--- /dev/null
+++ b/packages/components/src/components/Popover/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Popover";
diff --git a/components/RadioButton.module.scss b/packages/components/src/components/RadioButton/RadioButton.module.scss
similarity index 100%
rename from components/RadioButton.module.scss
rename to packages/components/src/components/RadioButton/RadioButton.module.scss
diff --git a/components/RadioButton.tsx b/packages/components/src/components/RadioButton/RadioButton.tsx
similarity index 58%
rename from components/RadioButton.tsx
rename to packages/components/src/components/RadioButton/RadioButton.tsx
index e82a012..8b26b5e 100644
--- a/components/RadioButton.tsx
+++ b/packages/components/src/components/RadioButton/RadioButton.tsx
@@ -1,7 +1,7 @@
-import styles from '@components/RadioButton.module.scss';
+import styles from "./RadioButton.module.scss";
 
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
 
 interface RadioButtonProps {
   style?: React.CSSProperties;
@@ -12,7 +12,14 @@ interface RadioButtonProps {
   children?: React.ReactNode;
 }
 
-const RadioButton: React.FC<RadioButtonProps> = ({ style, name, value, selected = false, onSelect, children }) => {
+export const RadioButton: React.FC<RadioButtonProps> = ({
+  style,
+  name,
+  value,
+  selected = false,
+  onSelect,
+  children,
+}) => {
   const radioId = `${name}-${value}-radio`;
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -21,20 +28,23 @@ const RadioButton: React.FC<RadioButtonProps> = ({ style, name, value, selected
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     switch (event.key) {
-      case 'Enter':
+      case "Enter":
         event.preventDefault();
         onSelect?.(value);
         break;
-      case 'ArrowUp':
-      case 'ArrowLeft':
+      case "ArrowUp":
+      case "ArrowLeft":
         event.preventDefault();
-        Utilities.findNextFocusable(document.activeElement, 'previous')?.focus();
+        Utilities.findNextFocusable(
+          document.activeElement,
+          "previous"
+        )?.focus();
         break;
-      case 'Tab':
-      case 'ArrowDown':
-      case 'ArrowRight':
+      case "Tab":
+      case "ArrowDown":
+      case "ArrowRight":
         event.preventDefault();
-        Utilities.findNextFocusable(document.activeElement, 'next')?.focus();
+        Utilities.findNextFocusable(document.activeElement, "next")?.focus();
         break;
       default:
         break;
@@ -53,7 +63,18 @@ const RadioButton: React.FC<RadioButtonProps> = ({ style, name, value, selected
       })}
       style={style}
     >
-      <input className={styles.input} id={radioId} type="radio" name={name} value={value} checked={selected} onFocus={handleFocus} onBlur={handleBlur} onKeyDown={handleKeyDown} onChange={handleChange} />
+      <input
+        className={styles.input}
+        id={radioId}
+        type="radio"
+        name={name}
+        value={value}
+        checked={selected}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        onChange={handleChange}
+      />
       <div className={styles.relative}>
         <label className={styles.figure} htmlFor={radioId}>
           {selected ? <span aria-hidden="true" className={styles.dot} /> : null}
@@ -63,5 +84,3 @@ const RadioButton: React.FC<RadioButtonProps> = ({ style, name, value, selected
     </div>
   );
 };
-
-export default RadioButton;
diff --git a/components/RadioButtonGroup.tsx b/packages/components/src/components/RadioButton/RadioButtonGroup.tsx
similarity index 76%
rename from components/RadioButtonGroup.tsx
rename to packages/components/src/components/RadioButton/RadioButtonGroup.tsx
index e8a8d58..50065b7 100644
--- a/components/RadioButtonGroup.tsx
+++ b/packages/components/src/components/RadioButton/RadioButtonGroup.tsx
@@ -2,14 +2,14 @@
 
 import * as React from 'react';
 
-import RadioButton from '@components/RadioButton';
+import { RadioButton } from './RadioButton';
 
 interface RadioButtonGroupProps {
   options: { value: string; label: string }[];
   defaultValue?: string;
 }
 
-const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({ options, defaultValue = '' }) => {
+export const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({ options, defaultValue = '' }) => {
   const [selectedValue, setSelectedValue] = React.useState<string>(defaultValue);
 
   const handleSelect = (value: string) => {
@@ -26,5 +26,3 @@ const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({ options, defaultVal
     </>
   );
 };
-
-export default RadioButtonGroup;
diff --git a/packages/components/src/components/RadioButton/index.ts b/packages/components/src/components/RadioButton/index.ts
new file mode 100644
index 0000000..a22621d
--- /dev/null
+++ b/packages/components/src/components/RadioButton/index.ts
@@ -0,0 +1,4 @@
+"use client";
+export * from "./RadioButton";
+("use client");
+export * from "./RadioButtonGroup";
diff --git a/components/Row.module.scss b/packages/components/src/components/Row/Row.module.scss
similarity index 100%
rename from components/Row.module.scss
rename to packages/components/src/components/Row/Row.module.scss
diff --git a/packages/components/src/components/Row/Row.tsx b/packages/components/src/components/Row/Row.tsx
new file mode 100644
index 0000000..32aebb8
--- /dev/null
+++ b/packages/components/src/components/Row/Row.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import styles from "./Row.module.scss";
+
+import * as React from "react";
+
+type RowProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+};
+
+export const Row = React.forwardRef<HTMLElement, RowProps>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <section className={styles.row} ref={ref} {...rest}>
+        {children}
+      </section>
+    );
+  }
+);
+
+Row.displayName = "Row";
diff --git a/packages/components/src/components/Row/index.ts b/packages/components/src/components/Row/index.ts
new file mode 100644
index 0000000..21bb1f0
--- /dev/null
+++ b/packages/components/src/components/Row/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Row";
diff --git a/components/RowEllipsis.module.scss b/packages/components/src/components/RowEllipsis/RowEllipsis.module.scss
similarity index 100%
rename from components/RowEllipsis.module.scss
rename to packages/components/src/components/RowEllipsis/RowEllipsis.module.scss
diff --git a/packages/components/src/components/RowEllipsis/RowEllipsis.tsx b/packages/components/src/components/RowEllipsis/RowEllipsis.tsx
new file mode 100644
index 0000000..6ad0357
--- /dev/null
+++ b/packages/components/src/components/RowEllipsis/RowEllipsis.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import styles from "./RowEllipsis.module.scss";
+
+import * as React from "react";
+
+type RowEllipsisProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+};
+
+export const RowEllipsis = React.forwardRef<HTMLElement, RowEllipsisProps>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <section className={styles.row} ref={ref} {...rest}>
+        {children}
+      </section>
+    );
+  }
+);
+
+RowEllipsis.displayName = "RowEllipsis";
diff --git a/packages/components/src/components/RowEllipsis/index.ts b/packages/components/src/components/RowEllipsis/index.ts
new file mode 100644
index 0000000..9164449
--- /dev/null
+++ b/packages/components/src/components/RowEllipsis/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./RowEllipsis";
diff --git a/components/RowSpaceBetween.module.scss b/packages/components/src/components/RowSpaceBetween/RowSpaceBetween.module.scss
similarity index 100%
rename from components/RowSpaceBetween.module.scss
rename to packages/components/src/components/RowSpaceBetween/RowSpaceBetween.module.scss
diff --git a/packages/components/src/components/RowSpaceBetween/RowSpaceBetween.tsx b/packages/components/src/components/RowSpaceBetween/RowSpaceBetween.tsx
new file mode 100644
index 0000000..5737efc
--- /dev/null
+++ b/packages/components/src/components/RowSpaceBetween/RowSpaceBetween.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import styles from "./RowSpaceBetween.module.scss";
+
+import * as React from "react";
+
+type RowSpaceBetweenProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+};
+
+export const RowSpaceBetween = React.forwardRef<
+  HTMLElement,
+  RowSpaceBetweenProps
+>(({ children, ...rest }, ref) => {
+  return (
+    <section className={styles.row} ref={ref} {...rest}>
+      {children}
+    </section>
+  );
+});
+
+RowSpaceBetween.displayName = "RowSpaceBetween";
diff --git a/packages/components/src/components/RowSpaceBetween/index.ts b/packages/components/src/components/RowSpaceBetween/index.ts
new file mode 100644
index 0000000..af4711d
--- /dev/null
+++ b/packages/components/src/components/RowSpaceBetween/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./RowSpaceBetween";
diff --git a/components/Select.module.scss b/packages/components/src/components/Select/Select.module.scss
similarity index 100%
rename from components/Select.module.scss
rename to packages/components/src/components/Select/Select.module.scss
diff --git a/components/Select.tsx b/packages/components/src/components/Select/Select.tsx
similarity index 72%
rename from components/Select.tsx
rename to packages/components/src/components/Select/Select.tsx
index 776b2ae..24c3309 100644
--- a/components/Select.tsx
+++ b/packages/components/src/components/Select/Select.tsx
@@ -1,9 +1,9 @@
-'use client';
+"use client";
 
-import styles from '@components/Select.module.scss';
+import styles from "./Select.module.scss";
 
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
 
 interface SelectProps {
   name: string;
@@ -13,7 +13,13 @@ interface SelectProps {
   onChange?: (selectedValue: string) => void;
 }
 
-const Select: React.FC<SelectProps> = ({ name, options, placeholder, defaultValue = '', onChange }) => {
+export const Select: React.FC<SelectProps> = ({
+  name,
+  options,
+  placeholder,
+  defaultValue = "",
+  onChange,
+}) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [index, setIndex] = React.useState(-1);
   const [selectedValue, setSelectedValue] = React.useState(defaultValue);
@@ -45,7 +51,10 @@ const Select: React.FC<SelectProps> = ({ name, options, placeholder, defaultValu
     <>
       <section className={styles.select}>
         <figure
-          className={Utilities.classNames(isOpen ? styles.focused : null, styles.control)}
+          className={Utilities.classNames(
+            isOpen ? styles.focused : null,
+            styles.control
+          )}
           onClick={() => {
             isOpen ? handleClose() : handleOpen();
           }}
@@ -70,7 +79,13 @@ const Select: React.FC<SelectProps> = ({ name, options, placeholder, defaultValu
         <ul className={styles.menu} role="listbox">
           {options.map((option, idx) => {
             return (
-              <li key={option} role="option" tabIndex={0} className={Utilities.classNames(styles.item)} onClick={() => handleSelect(option)}>
+              <li
+                key={option}
+                role="option"
+                tabIndex={0}
+                className={Utilities.classNames(styles.item)}
+                onClick={() => handleSelect(option)}
+              >
                 {option}
               </li>
             );
@@ -80,5 +95,3 @@ const Select: React.FC<SelectProps> = ({ name, options, placeholder, defaultValu
     </>
   );
 };
-
-export default Select;
diff --git a/packages/components/src/components/Select/index.ts b/packages/components/src/components/Select/index.ts
new file mode 100644
index 0000000..7188532
--- /dev/null
+++ b/packages/components/src/components/Select/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Select";
diff --git a/components/SidebarLayout.module.scss b/packages/components/src/components/SidebarLayout/SidebarLayout.module.scss
similarity index 100%
rename from components/SidebarLayout.module.scss
rename to packages/components/src/components/SidebarLayout/SidebarLayout.module.scss
diff --git a/components/SidebarLayout.tsx b/packages/components/src/components/SidebarLayout/SidebarLayout.tsx
similarity index 64%
rename from components/SidebarLayout.tsx
rename to packages/components/src/components/SidebarLayout/SidebarLayout.tsx
index b8aceec..02862e0 100644
--- a/components/SidebarLayout.tsx
+++ b/packages/components/src/components/SidebarLayout/SidebarLayout.tsx
@@ -1,9 +1,10 @@
-'use client';
+"use client";
 
-import styles from '@components/SidebarLayout.module.scss';
-import * as React from 'react';
+import styles from "./SidebarLayout.module.scss";
+import * as React from "react";
 
-interface SidebarLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+interface SidebarLayoutProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   children?: React.ReactNode;
   sidebar?: React.ReactNode;
   defaultSidebarWidth?: number;
@@ -11,10 +12,17 @@ interface SidebarLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   isReversed?: boolean;
 }
 
-const LINE_HEIGHT = 20;
+export const LINE_HEIGHT = 20;
 const CHARACTER_WIDTH = 9.6;
 
-const SidebarLayout: React.FC<SidebarLayoutProps> = ({ defaultSidebarWidth = 20, children, sidebar, isShowingHandle = false, isReversed = false, ...rest }) => {
+export const SidebarLayout: React.FC<SidebarLayoutProps> = ({
+  defaultSidebarWidth = 20,
+  children,
+  sidebar,
+  isShowingHandle = false,
+  isReversed = false,
+  ...rest
+}) => {
   const [sidebarWidth, setSidebarWidth] = React.useState(defaultSidebarWidth);
   const handleRef = React.useRef<HTMLDivElement>(null);
 
@@ -29,12 +37,12 @@ const SidebarLayout: React.FC<SidebarLayoutProps> = ({ defaultSidebarWidth = 20,
     };
 
     const onMouseUp = () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
     };
 
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
   };
 
   if (isReversed) {
@@ -65,7 +73,14 @@ const SidebarLayout: React.FC<SidebarLayoutProps> = ({ defaultSidebarWidth = 20,
         {sidebar}
       </div>
       {isShowingHandle ? (
-        <div className={styles.handle} ref={handleRef} role="button" tabIndex={0} onMouseDown={handleMouseDown} style={isShowingHandle ? {} : { width: `0.5ch` }}>
+        <div
+          className={styles.handle}
+          ref={handleRef}
+          role="button"
+          tabIndex={0}
+          onMouseDown={handleMouseDown}
+          style={isShowingHandle ? {} : { width: `0.5ch` }}
+        >
           <>
             <div className={styles.line} />
             <div className={styles.line} />
@@ -76,5 +91,3 @@ const SidebarLayout: React.FC<SidebarLayoutProps> = ({ defaultSidebarWidth = 20,
     </div>
   );
 };
-
-export default SidebarLayout;
diff --git a/packages/components/src/components/SidebarLayout/index.ts b/packages/components/src/components/SidebarLayout/index.ts
new file mode 100644
index 0000000..e025dca
--- /dev/null
+++ b/packages/components/src/components/SidebarLayout/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./SidebarLayout";
diff --git a/components/Table.module.scss b/packages/components/src/components/Table/Table.module.scss
similarity index 100%
rename from components/Table.module.scss
rename to packages/components/src/components/Table/Table.module.scss
diff --git a/components/Table.tsx b/packages/components/src/components/Table/Table.tsx
similarity index 54%
rename from components/Table.tsx
rename to packages/components/src/components/Table/Table.tsx
index 4d7dee7..095ddb8 100644
--- a/components/Table.tsx
+++ b/packages/components/src/components/Table/Table.tsx
@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import styles from '@components/Table.module.scss';
+import styles from "./Table.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 type TableProps = React.HTMLAttributes<HTMLElement> & {
   children?: React.ReactNode;
 };
 
-const Table = ({ children, ...rest }) => {
+export const Table = ({ children, ...rest }) => {
   return (
     <table className={styles.root} {...rest}>
       <tbody className={styles.body}>{children}</tbody>
@@ -16,6 +16,4 @@ const Table = ({ children, ...rest }) => {
   );
 };
 
-Table.displayName = 'Table';
-
-export default Table;
+Table.displayName = "Table";
diff --git a/packages/components/src/components/Table/index.ts b/packages/components/src/components/Table/index.ts
new file mode 100644
index 0000000..7c5b6c1
--- /dev/null
+++ b/packages/components/src/components/Table/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Table";
diff --git a/components/TableColumn.module.scss b/packages/components/src/components/TableColumn/TableColumn.module.scss
similarity index 100%
rename from components/TableColumn.module.scss
rename to packages/components/src/components/TableColumn/TableColumn.module.scss
diff --git a/packages/components/src/components/TableColumn/TableColumn.tsx b/packages/components/src/components/TableColumn/TableColumn.tsx
new file mode 100644
index 0000000..a74ee7b
--- /dev/null
+++ b/packages/components/src/components/TableColumn/TableColumn.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import styles from "./TableColumn.module.scss";
+
+import * as React from "react";
+
+type TableColumnProps = React.HTMLAttributes<HTMLTableCellElement> & {
+  children?: React.ReactNode;
+};
+
+export const TableColumn: React.FC<TableColumnProps> = ({
+  children,
+  ...rest
+}) => {
+  return (
+    <td className={styles.root} {...rest}>
+      {children}
+    </td>
+  );
+};
+
+TableColumn.displayName = "TableColumn";
diff --git a/packages/components/src/components/TableColumn/index.ts b/packages/components/src/components/TableColumn/index.ts
new file mode 100644
index 0000000..edd206d
--- /dev/null
+++ b/packages/components/src/components/TableColumn/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./TableColumn";
diff --git a/components/TableRow.module.scss b/packages/components/src/components/TableRow/TableRow.module.scss
similarity index 100%
rename from components/TableRow.module.scss
rename to packages/components/src/components/TableRow/TableRow.module.scss
diff --git a/packages/components/src/components/TableRow/TableRow.tsx b/packages/components/src/components/TableRow/TableRow.tsx
new file mode 100644
index 0000000..a63fb38
--- /dev/null
+++ b/packages/components/src/components/TableRow/TableRow.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import styles from "./TableRow.module.scss";
+
+import * as React from "react";
+
+type TableRowProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+};
+
+export const TableRow = ({ children, ...rest }) => {
+  return (
+    <tr className={styles.root} tabIndex={0} {...rest}>
+      {children}
+    </tr>
+  );
+};
+
+TableRow.displayName = "TableRow";
diff --git a/packages/components/src/components/TableRow/index.ts b/packages/components/src/components/TableRow/index.ts
new file mode 100644
index 0000000..106a242
--- /dev/null
+++ b/packages/components/src/components/TableRow/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./TableRow";
diff --git a/components/Text.module.scss b/packages/components/src/components/Text/Text.module.scss
similarity index 100%
rename from components/Text.module.scss
rename to packages/components/src/components/Text/Text.module.scss
diff --git a/components/Text.tsx b/packages/components/src/components/Text/Text.tsx
similarity index 53%
rename from components/Text.tsx
rename to packages/components/src/components/Text/Text.tsx
index 3a703bd..1615bc1 100644
--- a/components/Text.tsx
+++ b/packages/components/src/components/Text/Text.tsx
@@ -1,17 +1,15 @@
-import styles from '@components/Text.module.scss';
+import styles from "./Text.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
   children?: React.ReactNode;
 }
 
-const Text: React.FC<TextProps> = ({ children, ...rest }) => {
+export const Text: React.FC<TextProps> = ({ children, ...rest }) => {
   return (
     <p className={styles.text} {...rest}>
       {children}
     </p>
   );
 };
-
-export default Text;
diff --git a/packages/components/src/components/Text/index.ts b/packages/components/src/components/Text/index.ts
new file mode 100644
index 0000000..8ca3d26
--- /dev/null
+++ b/packages/components/src/components/Text/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Text";
diff --git a/components/TextArea.module.scss b/packages/components/src/components/TextArea/TextArea.module.scss
similarity index 100%
rename from components/TextArea.module.scss
rename to packages/components/src/components/TextArea/TextArea.module.scss
diff --git a/components/TextArea.tsx b/packages/components/src/components/TextArea/TextArea.tsx
similarity index 68%
rename from components/TextArea.tsx
rename to packages/components/src/components/TextArea/TextArea.tsx
index 544dabb..8961714 100644
--- a/components/TextArea.tsx
+++ b/packages/components/src/components/TextArea/TextArea.tsx
@@ -1,20 +1,29 @@
-'use client';
+"use client";
 
-import styles from '@components/TextArea.module.scss';
+import styles from "./TextArea.module.scss";
 
-import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as React from "react";
+import * as Utilities from "@srcl/ui/utilities";
 
 type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   autoPlay?: string;
   autoPlaySpeedMS?: number;
   isBlink?: boolean;
 };
-function TextArea({ autoPlay, autoPlaySpeedMS = 40, isBlink, placeholder, onChange, ...rest }: TextAreaProps) {
+export const TextArea = ({
+  autoPlay,
+  autoPlaySpeedMS = 40,
+  isBlink,
+  placeholder,
+  onChange,
+  ...rest
+}: TextAreaProps) => {
   const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
   const measurementRef = React.useRef<HTMLDivElement | null>(null);
 
-  const [text, setText] = React.useState<string>(rest.defaultValue?.toString() || rest.value?.toString() || '');
+  const [text, setText] = React.useState<string>(
+    rest.defaultValue?.toString() || rest.value?.toString() || ""
+  );
   const [isAutoPlaying, setIsAutoPlaying] = React.useState<boolean>(!!autoPlay);
   const [isFocused, setIsFocused] = React.useState<boolean>(false);
   const [selectionStart, setSelectionStart] = React.useState<number>(0);
@@ -47,8 +56,9 @@ function TextArea({ autoPlay, autoPlaySpeedMS = 40, isBlink, placeholder, onChan
     if (autoPlay && !rest.value && !rest.defaultValue) {
       setIsAutoPlaying(true);
       autoPlayIndexRef.current = 0;
-      setText('');
-      if (autoPlayIntervalRef.current) clearInterval(autoPlayIntervalRef.current);
+      setText("");
+      if (autoPlayIntervalRef.current)
+        clearInterval(autoPlayIntervalRef.current);
 
       autoPlayIntervalRef.current = setInterval(() => {
         autoPlayIndexRef.current++;
@@ -65,20 +75,21 @@ function TextArea({ autoPlay, autoPlaySpeedMS = 40, isBlink, placeholder, onChan
     }
 
     return () => {
-      if (autoPlayIntervalRef.current) clearInterval(autoPlayIntervalRef.current);
+      if (autoPlayIntervalRef.current)
+        clearInterval(autoPlayIntervalRef.current);
     };
   }, [autoPlay, rest.value, rest.defaultValue]);
 
   const resizeTextArea = React.useCallback(() => {
     if (!textAreaRef.current) return;
-    textAreaRef.current.style.height = 'auto';
+    textAreaRef.current.style.height = "auto";
     textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
   }, []);
 
   React.useEffect(() => {
     resizeTextArea();
-    window.addEventListener('resize', resizeTextArea);
-    return () => window.removeEventListener('resize', resizeTextArea);
+    window.addEventListener("resize", resizeTextArea);
+    return () => window.removeEventListener("resize", resizeTextArea);
   }, [resizeTextArea]);
 
   const onHandleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -124,17 +135,17 @@ function TextArea({ autoPlay, autoPlaySpeedMS = 40, isBlink, placeholder, onChan
     const computedStyle = window.getComputedStyle(measurementEl);
     const lineHeightStr = computedStyle.lineHeight;
     let lineHeight = 20;
-    if (lineHeightStr.endsWith('px')) {
+    if (lineHeightStr.endsWith("px")) {
       lineHeight = parseFloat(lineHeightStr);
     }
 
     const countLines = (content: string) => {
-      measurementEl.textContent = content || '\u00A0';
+      measurementEl.textContent = content || "\u00A0";
       const height = measurementEl.offsetHeight;
       return Math.round(height / lineHeight);
     };
 
-    const displayString = text || placeholder || '';
+    const displayString = text || placeholder || "";
 
     const textBeforeCaret = text.substring(0, selectionStart);
     const textAfterCaret = text.substring(selectionStart);
@@ -147,34 +158,65 @@ function TextArea({ autoPlay, autoPlaySpeedMS = 40, isBlink, placeholder, onChan
   }, [text, selectionStart, placeholder]);
 
   const onHandleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'ArrowUp' && currentLineIndex === 0) {
+    if (e.key === "ArrowUp" && currentLineIndex === 0) {
       e.preventDefault();
-      const previousFocusable = Utilities.findNextFocusable(document.activeElement, 'previous');
+      const previousFocusable = Utilities.findNextFocusable(
+        document.activeElement,
+        "previous"
+      );
       previousFocusable?.focus();
-    } else if (e.key === 'ArrowDown' && currentLineIndex === totalLines) {
+    } else if (e.key === "ArrowDown" && currentLineIndex === totalLines) {
       e.preventDefault();
-      const nextFocusable = Utilities.findNextFocusable(document.activeElement, 'next');
+      const nextFocusable = Utilities.findNextFocusable(
+        document.activeElement,
+        "next"
+      );
       nextFocusable?.focus();
     }
   };
 
   const isPlaceholderVisible = !text && placeholder;
 
-  const containerClasses = Utilities.classNames(styles.root, isFocused && styles.focused);
+  const containerClasses = Utilities.classNames(
+    styles.root,
+    isFocused && styles.focused
+  );
 
   return (
     <div className={containerClasses}>
-      <div className={Utilities.classNames(styles.displayed, isPlaceholderVisible && styles.placeholder)}>
+      <div
+        className={Utilities.classNames(
+          styles.displayed,
+          isPlaceholderVisible && styles.placeholder
+        )}
+      >
         {isPlaceholderVisible ? placeholder : text.substring(0, selectionStart)}
-        {!isPlaceholderVisible && <span className={Utilities.classNames(styles.block, isBlink && styles.blink)}></span>}
+        {!isPlaceholderVisible && (
+          <span
+            className={Utilities.classNames(
+              styles.block,
+              isBlink && styles.blink
+            )}
+          ></span>
+        )}
         {!isPlaceholderVisible && text.substring(selectionStart)}
       </div>
 
       <div ref={measurementRef} className={styles.hidden}></div>
 
-      <textarea className={styles.hiddenElement} ref={textAreaRef} value={text} aria-placeholder={placeholder} onFocus={onHandleFocus} onBlur={onHandleBlur} onKeyDown={onHandleKeyDown} onChange={onHandleChange} onSelect={onHandleSelect} onClick={onHandleClick} {...rest} />
+      <textarea
+        className={styles.hiddenElement}
+        ref={textAreaRef}
+        value={text}
+        aria-placeholder={placeholder}
+        onFocus={onHandleFocus}
+        onBlur={onHandleBlur}
+        onKeyDown={onHandleKeyDown}
+        onChange={onHandleChange}
+        onSelect={onHandleSelect}
+        onClick={onHandleClick}
+        {...rest}
+      />
     </div>
   );
-}
-
-export default TextArea;
+};
diff --git a/packages/components/src/components/TextArea/index.ts b/packages/components/src/components/TextArea/index.ts
new file mode 100644
index 0000000..0782a35
--- /dev/null
+++ b/packages/components/src/components/TextArea/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./TextArea";
diff --git a/components/Tooltip.module.scss b/packages/components/src/components/Tooltip/Tooltip.module.scss
similarity index 100%
rename from components/Tooltip.module.scss
rename to packages/components/src/components/Tooltip/Tooltip.module.scss
diff --git a/packages/components/src/components/Tooltip/Tooltip.tsx b/packages/components/src/components/Tooltip/Tooltip.tsx
new file mode 100644
index 0000000..b5cb177
--- /dev/null
+++ b/packages/components/src/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,15 @@
+import styles from "./Tooltip.module.scss";
+
+import * as React from "react";
+
+interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  ({ style: propStyle, ...rest }, ref) => {
+    const style: React.CSSProperties = { ...propStyle };
+
+    return <div ref={ref} className={styles.root} {...rest} style={style} />;
+  }
+);
+
+Tooltip.displayName = "Tooltip";
diff --git a/packages/components/src/components/Tooltip/index.ts b/packages/components/src/components/Tooltip/index.ts
new file mode 100644
index 0000000..9f75f69
--- /dev/null
+++ b/packages/components/src/components/Tooltip/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./Tooltip";
diff --git a/components/TreeView.module.scss b/packages/components/src/components/TreeView/TreeView.module.scss
similarity index 100%
rename from components/TreeView.module.scss
rename to packages/components/src/components/TreeView/TreeView.module.scss
diff --git a/components/TreeView.tsx b/packages/components/src/components/TreeView/TreeView.tsx
similarity index 64%
rename from components/TreeView.tsx
rename to packages/components/src/components/TreeView/TreeView.tsx
index ad37a9c..6b55433 100644
--- a/components/TreeView.tsx
+++ b/packages/components/src/components/TreeView/TreeView.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import styles from '@components/TreeView.module.scss';
+import styles from "./TreeView.module.scss";
 
-import * as React from 'react';
+import * as React from "react";
 
 interface TreeViewProps {
   children?: React.ReactNode;
@@ -16,7 +16,17 @@ interface TreeViewProps {
   title: string;
 }
 
-const TreeView: React.FC<TreeViewProps> = ({ defaultValue = false, title, children, depth = 0, isFile = false, isRoot = false, isLastChild = false, style, parentLines = [] }) => {
+export const TreeView: React.FC<TreeViewProps> = ({
+  defaultValue = false,
+  title,
+  children,
+  depth = 0,
+  isFile = false,
+  isRoot = false,
+  isLastChild = false,
+  style,
+  parentLines = [],
+}) => {
   const [show, setShow] = React.useState<boolean>(defaultValue);
 
   const onToggleShow = (): void => {
@@ -26,16 +36,22 @@ const TreeView: React.FC<TreeViewProps> = ({ defaultValue = false, title, childr
   const hasChildren = React.Children.count(children) > 0;
   const isEmptyFolder = !isFile && !hasChildren;
 
-  const spacing = parentLines.map((line) => (line ? '│ . ' : '. . ')).join('');
-  const endPrefix = isLastChild ? '└───' : '├───';
+  const spacing = parentLines.map((line) => (line ? "│ . " : ". . ")).join("");
+  const endPrefix = isLastChild ? "└───" : "├───";
   const prefix = `${spacing}${endPrefix}`;
-  const icon = isFile ? ' ' : show ? '╦ ' : '╤ ';
+  const icon = isFile ? " " : show ? "╦ " : "╤ ";
 
   const updatedParentLines = [...parentLines, !isLastChild];
 
   return (
     <div className={styles.root} style={style}>
-      <div tabIndex={0} role="button" onClick={onToggleShow} className={styles.item} aria-expanded={show}>
+      <div
+        tabIndex={0}
+        role="button"
+        onClick={onToggleShow}
+        className={styles.item}
+        aria-expanded={show}
+      >
         {prefix}
         {icon}
         {title}
@@ -56,5 +72,3 @@ const TreeView: React.FC<TreeViewProps> = ({ defaultValue = false, title, childr
     </div>
   );
 };
-
-export default TreeView;
diff --git a/packages/components/src/components/TreeView/index.ts b/packages/components/src/components/TreeView/index.ts
new file mode 100644
index 0000000..8eaa580
--- /dev/null
+++ b/packages/components/src/components/TreeView/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export * from "./TreeView";
diff --git a/packages/components/src/context/index.ts b/packages/components/src/context/index.ts
new file mode 100644
index 0000000..77f67b2
--- /dev/null
+++ b/packages/components/src/context/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export { ModalProvider } from "@srcl/ui/modules/modals/ModalContext";
diff --git a/packages/components/src/hooks/index.ts b/packages/components/src/hooks/index.ts
new file mode 100644
index 0000000..4c577b4
--- /dev/null
+++ b/packages/components/src/hooks/index.ts
@@ -0,0 +1,4 @@
+"use client";
+export { useHotkeys } from "@srcl/ui/modules/hotkeys/use-hotkeys";
+export { useModals } from "@srcl/ui/modules/modals/ModalContext";
+export { useDebouncedCallback } from "./useDebouncedCallback";
diff --git a/common/hooks.ts b/packages/components/src/hooks/useDebouncedCallback.ts
old mode 100755
new mode 100644
similarity index 71%
rename from common/hooks.ts
rename to packages/components/src/hooks/useDebouncedCallback.ts
index bb37700..00edfa7
--- a/common/hooks.ts
+++ b/packages/components/src/hooks/useDebouncedCallback.ts
@@ -1,6 +1,11 @@
-import * as React from 'react';
+"use client";
+import * as React from "react";
 
-export function useDebouncedCallback<T>(ms: number, f: (...args: T[]) => void, deps: any[]): (...args: T[]) => void {
+export function useDebouncedCallback<T>(
+  ms: number,
+  f: (...args: T[]) => void,
+  deps: any[]
+): (...args: T[]) => void {
   let throttled = false;
   let latestArgs: T | null = null;
 
diff --git a/modules/cors.ts b/packages/components/src/modules/cors.ts
similarity index 77%
rename from modules/cors.ts
rename to packages/components/src/modules/cors.ts
index 7066206..6362baa 100755
--- a/modules/cors.ts
+++ b/packages/components/src/modules/cors.ts
@@ -1,19 +1,19 @@
 // @ts-nocheck
 
-'use strict';
+"use strict";
 
-import assign from '@modules/object-assign';
-import vary from '@modules/vary';
+import assign from "./object-assign";
+import vary from "./vary";
 
 var defaults = {
-  origin: '*',
-  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
+  origin: "*",
+  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
   preflightContinue: false,
   optionsSuccessStatus: 204,
 };
 
 function isString(s) {
-  return typeof s === 'string' || s instanceof String;
+  return typeof s === "string" || s instanceof String;
 }
 
 function isOriginAllowed(origin, allowedOrigin) {
@@ -38,26 +38,26 @@ function configureOrigin(options, req) {
     headers = [],
     isAllowed;
 
-  if (!options.origin || options.origin === '*') {
+  if (!options.origin || options.origin === "*") {
     // allow any origin
     headers.push([
       {
-        key: 'Access-Control-Allow-Origin',
-        value: '*',
+        key: "Access-Control-Allow-Origin",
+        value: "*",
       },
     ]);
   } else if (isString(options.origin)) {
     // fixed origin
     headers.push([
       {
-        key: 'Access-Control-Allow-Origin',
+        key: "Access-Control-Allow-Origin",
         value: options.origin,
       },
     ]);
     headers.push([
       {
-        key: 'Vary',
-        value: 'Origin',
+        key: "Vary",
+        value: "Origin",
       },
     ]);
   } else {
@@ -65,14 +65,14 @@ function configureOrigin(options, req) {
     // reflect origin
     headers.push([
       {
-        key: 'Access-Control-Allow-Origin',
+        key: "Access-Control-Allow-Origin",
         value: isAllowed ? requestOrigin : false,
       },
     ]);
     headers.push([
       {
-        key: 'Vary',
-        value: 'Origin',
+        key: "Vary",
+        value: "Origin",
       },
     ]);
   }
@@ -83,10 +83,10 @@ function configureOrigin(options, req) {
 function configureMethods(options) {
   var methods = options.methods;
   if (methods.join) {
-    methods = options.methods.join(','); // .methods is an array, so turn it into a string
+    methods = options.methods.join(","); // .methods is an array, so turn it into a string
   }
   return {
-    key: 'Access-Control-Allow-Methods',
+    key: "Access-Control-Allow-Methods",
     value: methods,
   };
 }
@@ -94,8 +94,8 @@ function configureMethods(options) {
 function configureCredentials(options) {
   if (options.credentials === true) {
     return {
-      key: 'Access-Control-Allow-Credentials',
-      value: 'true',
+      key: "Access-Control-Allow-Credentials",
+      value: "true",
     };
   }
   return null;
@@ -106,20 +106,20 @@ function configureAllowedHeaders(options, req) {
   var headers = [];
 
   if (!allowedHeaders) {
-    allowedHeaders = req.headers['access-control-request-headers']; // .headers wasn't specified, so reflect the request headers
+    allowedHeaders = req.headers["access-control-request-headers"]; // .headers wasn't specified, so reflect the request headers
     headers.push([
       {
-        key: 'Vary',
-        value: 'Access-Control-Request-Headers',
+        key: "Vary",
+        value: "Access-Control-Request-Headers",
       },
     ]);
   } else if (allowedHeaders.join) {
-    allowedHeaders = allowedHeaders.join(','); // .headers is an array, so turn it into a string
+    allowedHeaders = allowedHeaders.join(","); // .headers is an array, so turn it into a string
   }
   if (allowedHeaders && allowedHeaders.length) {
     headers.push([
       {
-        key: 'Access-Control-Allow-Headers',
+        key: "Access-Control-Allow-Headers",
         value: allowedHeaders,
       },
     ]);
@@ -133,11 +133,11 @@ function configureExposedHeaders(options) {
   if (!headers) {
     return null;
   } else if (headers.join) {
-    headers = headers.join(','); // .headers is an array, so turn it into a string
+    headers = headers.join(","); // .headers is an array, so turn it into a string
   }
   if (headers && headers.length) {
     return {
-      key: 'Access-Control-Expose-Headers',
+      key: "Access-Control-Expose-Headers",
       value: headers,
     };
   }
@@ -145,10 +145,12 @@ function configureExposedHeaders(options) {
 }
 
 function configureMaxAge(options) {
-  var maxAge = (typeof options.maxAge === 'number' || options.maxAge) && options.maxAge.toString();
+  var maxAge =
+    (typeof options.maxAge === "number" || options.maxAge) &&
+    options.maxAge.toString();
   if (maxAge && maxAge.length) {
     return {
-      key: 'Access-Control-Max-Age',
+      key: "Access-Control-Max-Age",
       value: maxAge,
     };
   }
@@ -161,7 +163,7 @@ function applyHeaders(headers, res) {
     if (header) {
       if (Array.isArray(header)) {
         applyHeaders(header, res);
-      } else if (header.key === 'Vary' && header.value) {
+      } else if (header.key === "Vary" && header.value) {
         vary(res, header.value);
       } else if (header.value) {
         res.setHeader(header.key, header.value);
@@ -174,7 +176,7 @@ function cors(options, req, res, next) {
   var headers = [],
     method = req.method && req.method.toUpperCase && req.method.toUpperCase();
 
-  if (method === 'OPTIONS') {
+  if (method === "OPTIONS") {
     // preflight
     headers.push(configureOrigin(options, req));
     headers.push(configureCredentials(options));
@@ -190,7 +192,7 @@ function cors(options, req, res, next) {
       // Safari (and potentially other browsers) need content-length 0,
       //   for 204 or they just hang waiting for a body
       res.statusCode = options.optionsSuccessStatus;
-      res.setHeader('Content-Length', '0');
+      res.setHeader("Content-Length", "0");
       res.end();
     }
   } else {
@@ -206,7 +208,7 @@ function cors(options, req, res, next) {
 function middlewareWrapper(o) {
   // if options are static (either via defaults or custom options passed in), wrap in a function
   var optionsCallback = null;
-  if (typeof o === 'function') {
+  if (typeof o === "function") {
     optionsCallback = o;
   } else {
     optionsCallback = function (req, cb) {
@@ -221,7 +223,7 @@ function middlewareWrapper(o) {
       } else {
         var corsOptions = assign({}, defaults, options);
         var originCallback = null;
-        if (corsOptions.origin && typeof corsOptions.origin === 'function') {
+        if (corsOptions.origin && typeof corsOptions.origin === "function") {
           originCallback = corsOptions.origin;
         } else if (corsOptions.origin) {
           originCallback = function (origin, cb) {
diff --git a/packages/components/src/modules/hotkeys/bound-hotkeys-proxy-provider.tsx b/packages/components/src/modules/hotkeys/bound-hotkeys-proxy-provider.tsx
new file mode 100644
index 0000000..7cb0458
--- /dev/null
+++ b/packages/components/src/modules/hotkeys/bound-hotkeys-proxy-provider.tsx
@@ -0,0 +1,37 @@
+// NOTE(jimmylee)
+// Vendored from
+// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/BoundHotkeysProxyProvider.tsx
+
+import { createContext, ReactNode, useContext } from "react";
+import { Hotkey } from "@srcl/ui/modules/hotkeys/types";
+
+type BoundHotkeysProxyProviderType = {
+  addHotkey: (hotkey: Hotkey) => void;
+  removeHotkey: (hotkey: Hotkey) => void;
+};
+
+export const BoundHotkeysProxyProvider = createContext<
+  BoundHotkeysProxyProviderType | undefined
+>(undefined);
+
+export const useBoundHotkeysProxy = () => {
+  return useContext(BoundHotkeysProxyProvider);
+};
+
+interface Props {
+  children: ReactNode;
+  addHotkey: (hotkey: Hotkey) => void;
+  removeHotkey: (hotkey: Hotkey) => void;
+}
+
+export default function BoundHotkeysProxyProviderProvider({
+  addHotkey,
+  removeHotkey,
+  children,
+}: Props) {
+  return (
+    <BoundHotkeysProxyProvider.Provider value={{ addHotkey, removeHotkey }}>
+      {children}
+    </BoundHotkeysProxyProvider.Provider>
+  );
+}
diff --git a/modules/hotkeys/hotkeys-provider.tsx b/packages/components/src/modules/hotkeys/hotkeys-provider.tsx
similarity index 50%
rename from modules/hotkeys/hotkeys-provider.tsx
rename to packages/components/src/modules/hotkeys/hotkeys-provider.tsx
index 65b788c..6b05781 100644
--- a/modules/hotkeys/hotkeys-provider.tsx
+++ b/packages/components/src/modules/hotkeys/hotkeys-provider.tsx
@@ -1,19 +1,25 @@
 // NOTE(jimmylee)
 // Vendored from
 // https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/HotkeysProvider.tsx
-import { Hotkey } from '@modules/hotkeys/types'
-import { createContext, ReactNode, useState, useContext, useCallback } from 'react'
-import BoundHotkeysProxyProviderProvider from '@modules/hotkeys/bound-hotkeys-proxy-provider'
+import { Hotkey } from "@srcl/ui/modules/hotkeys/types";
+import {
+  createContext,
+  ReactNode,
+  useState,
+  useContext,
+  useCallback,
+} from "react";
+import BoundHotkeysProxyProviderProvider from "@srcl/ui/modules/hotkeys/bound-hotkeys-proxy-provider";
 
-import * as Utilities from '@common/utilities';
+import * as Utilities from "@srcl/ui/utilities";
 
 export type HotkeysContextType = {
-  hotkeys: ReadonlyArray<Hotkey>
-  enabledScopes: string[]
-  toggleScope: (scope: string) => void
-  enableScope: (scope: string) => void
-  disableScope: (scope: string) => void
-}
+  hotkeys: ReadonlyArray<Hotkey>;
+  enabledScopes: string[];
+  toggleScope: (scope: string) => void;
+  enableScope: (scope: string) => void;
+  disableScope: (scope: string) => void;
+};
 
 // The context is only needed for special features like global scoping, so we use a graceful default fallback
 const HotkeysContext = createContext<HotkeysContextType>({
@@ -22,76 +28,90 @@ const HotkeysContext = createContext<HotkeysContextType>({
   toggleScope: () => {},
   enableScope: () => {},
   disableScope: () => {},
-})
+});
 
 export const useHotkeysContext = () => {
-  return useContext(HotkeysContext)
-}
+  return useContext(HotkeysContext);
+};
 
 interface Props {
-  initiallyActiveScopes?: string[]
-  children: ReactNode
+  initiallyActiveScopes?: string[];
+  children: ReactNode;
 }
 
-export const HotkeysProvider = ({ initiallyActiveScopes = ['*'], children }: Props) => {
+export const HotkeysProvider = ({
+  initiallyActiveScopes = ["*"],
+  children,
+}: Props) => {
   const [internalActiveScopes, setInternalActiveScopes] = useState(
-    initiallyActiveScopes?.length > 0 ? initiallyActiveScopes : ['*']
-  )
-  const [boundHotkeys, setBoundHotkeys] = useState<Hotkey[]>([])
+    initiallyActiveScopes?.length > 0 ? initiallyActiveScopes : ["*"]
+  );
+  const [boundHotkeys, setBoundHotkeys] = useState<Hotkey[]>([]);
 
   const enableScope = useCallback((scope: string) => {
     setInternalActiveScopes((prev) => {
-      if (prev.includes('*')) {
-        return [scope]
+      if (prev.includes("*")) {
+        return [scope];
       }
 
-      return Array.from(new Set([...prev, scope]))
-    })
-  }, [])
+      return Array.from(new Set([...prev, scope]));
+    });
+  }, []);
 
   const disableScope = useCallback((scope: string) => {
     setInternalActiveScopes((prev) => {
       if (prev.filter((s) => s !== scope).length === 0) {
-        return ['*']
+        return ["*"];
       } else {
-        return prev.filter((s) => s !== scope)
+        return prev.filter((s) => s !== scope);
       }
-    })
-  }, [])
+    });
+  }, []);
 
   const toggleScope = useCallback((scope: string) => {
     setInternalActiveScopes((prev) => {
       if (prev.includes(scope)) {
         if (prev.filter((s) => s !== scope).length === 0) {
-          return ['*']
+          return ["*"];
         } else {
-          return prev.filter((s) => s !== scope)
+          return prev.filter((s) => s !== scope);
         }
       } else {
-        if (prev.includes('*')) {
-          return [scope]
+        if (prev.includes("*")) {
+          return [scope];
         }
 
-        return Array.from(new Set([...prev, scope]))
+        return Array.from(new Set([...prev, scope]));
       }
-    })
-  }, [])
+    });
+  }, []);
 
   const addBoundHotkey = useCallback((hotkey: Hotkey) => {
-    setBoundHotkeys((prev) => [...prev, hotkey])
-  }, [])
+    setBoundHotkeys((prev) => [...prev, hotkey]);
+  }, []);
 
   const removeBoundHotkey = useCallback((hotkey: Hotkey) => {
-    setBoundHotkeys((prev) => prev.filter((h) => !Utilities.deepEqual(h, hotkey)))
-  }, [])
+    setBoundHotkeys((prev) =>
+      prev.filter((h) => !Utilities.deepEqual(h, hotkey))
+    );
+  }, []);
 
   return (
     <HotkeysContext.Provider
-      value={{ enabledScopes: internalActiveScopes, hotkeys: boundHotkeys, enableScope, disableScope, toggleScope }}
+      value={{
+        enabledScopes: internalActiveScopes,
+        hotkeys: boundHotkeys,
+        enableScope,
+        disableScope,
+        toggleScope,
+      }}
     >
-      <BoundHotkeysProxyProviderProvider addHotkey={addBoundHotkey} removeHotkey={removeBoundHotkey}>
+      <BoundHotkeysProxyProviderProvider
+        addHotkey={addBoundHotkey}
+        removeHotkey={removeBoundHotkey}
+      >
         {children}
       </BoundHotkeysProxyProviderProvider>
     </HotkeysContext.Provider>
-  )
-}
\ No newline at end of file
+  );
+};
diff --git a/packages/components/src/modules/hotkeys/index.ts b/packages/components/src/modules/hotkeys/index.ts
new file mode 100644
index 0000000..0bf001b
--- /dev/null
+++ b/packages/components/src/modules/hotkeys/index.ts
@@ -0,0 +1,27 @@
+// NOTE(jimmylee)
+// Vendored from
+// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/index.ts
+
+import { useHotkeys } from "@srcl/ui/hooks";
+import type {
+  Options,
+  Keys,
+  HotkeyCallback,
+} from "@srcl/ui/modules/hotkeys/types";
+import {
+  HotkeysProvider,
+  useHotkeysContext,
+} from "@srcl/ui/modules/hotkeys/hotkeys-provider";
+import { isHotkeyPressed } from "@srcl/ui/modules/hotkeys/is-hotkey-pressed";
+import useRecordHotkeys from "@srcl/ui/modules/hotkeys/use-record-hotkeys";
+
+export {
+  useHotkeys,
+  useRecordHotkeys,
+  useHotkeysContext,
+  isHotkeyPressed,
+  HotkeysProvider,
+  Options,
+  Keys,
+  HotkeyCallback,
+};
diff --git a/modules/hotkeys/is-hotkey-pressed.ts b/packages/components/src/modules/hotkeys/is-hotkey-pressed.ts
similarity index 55%
rename from modules/hotkeys/is-hotkey-pressed.ts
rename to packages/components/src/modules/hotkeys/is-hotkey-pressed.ts
index 1b58136..37121b9 100644
--- a/modules/hotkeys/is-hotkey-pressed.ts
+++ b/packages/components/src/modules/hotkeys/is-hotkey-pressed.ts
@@ -2,74 +2,89 @@
 // Vendored from
 // https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/isHotkeyPressed.ts
 
-import { isHotkeyModifier, mapKey } from '@modules/hotkeys/parse-hotkeys'
-;(() => {
-  if (typeof document !== 'undefined') {
-    document.addEventListener('keydown', (e) => {
+import {
+  isHotkeyModifier,
+  mapKey,
+} from "@srcl/ui/modules/hotkeys/parse-hotkeys";
+(() => {
+  if (typeof document !== "undefined") {
+    document.addEventListener("keydown", (e) => {
       if (e.key === undefined) {
         // Synthetic event (e.g., Chrome autofill).  Ignore.
-        return
+        return;
       }
 
-      pushToCurrentlyPressedKeys([mapKey(e.key), mapKey(e.code)])
-    })
+      pushToCurrentlyPressedKeys([mapKey(e.key), mapKey(e.code)]);
+    });
 
-    document.addEventListener('keyup', (e) => {
+    document.addEventListener("keyup", (e) => {
       if (e.key === undefined) {
         // Synthetic event (e.g., Chrome autofill).  Ignore.
-        return
+        return;
       }
 
-      removeFromCurrentlyPressedKeys([mapKey(e.key), mapKey(e.code)])
-    })
+      removeFromCurrentlyPressedKeys([mapKey(e.key), mapKey(e.code)]);
+    });
   }
 
-  if (typeof window !== 'undefined') {
-    window.addEventListener('blur', () => {
-      currentlyPressedKeys.clear()
-    })
+  if (typeof window !== "undefined") {
+    window.addEventListener("blur", () => {
+      currentlyPressedKeys.clear();
+    });
   }
-})()
+})();
 
-const currentlyPressedKeys: Set<string> = new Set<string>()
+const currentlyPressedKeys: Set<string> = new Set<string>();
 
 // https://github.com/microsoft/TypeScript/issues/17002
 export function isReadonlyArray(value: unknown): value is readonly unknown[] {
-  return Array.isArray(value)
+  return Array.isArray(value);
 }
 
-export function isHotkeyPressed(key: string | readonly string[], splitKey = ','): boolean {
-  const hotkeyArray = isReadonlyArray(key) ? key : key.split(splitKey)
+export function isHotkeyPressed(
+  key: string | readonly string[],
+  splitKey = ","
+): boolean {
+  const hotkeyArray = isReadonlyArray(key) ? key : key.split(splitKey);
 
-  return hotkeyArray.every((hotkey) => currentlyPressedKeys.has(hotkey.trim().toLowerCase()))
+  return hotkeyArray.every((hotkey) =>
+    currentlyPressedKeys.has(hotkey.trim().toLowerCase())
+  );
 }
 
 export function pushToCurrentlyPressedKeys(key: string | string[]): void {
-  const hotkeyArray = Array.isArray(key) ? key : [key]
+  const hotkeyArray = Array.isArray(key) ? key : [key];
 
   /*
   Due to a weird behavior on macOS we need to clear the set if the user pressed down the meta key and presses another key.
   https://stackoverflow.com/questions/11818637/why-does-javascript-drop-keyup-events-when-the-metakey-is-pressed-on-mac-browser
   Otherwise the set will hold all ever pressed keys while the meta key is down which leads to wrong results.
    */
-  if (currentlyPressedKeys.has('meta')) {
-    currentlyPressedKeys.forEach((key) => !isHotkeyModifier(key) && currentlyPressedKeys.delete(key.toLowerCase()))
+  if (currentlyPressedKeys.has("meta")) {
+    currentlyPressedKeys.forEach(
+      (key) =>
+        !isHotkeyModifier(key) && currentlyPressedKeys.delete(key.toLowerCase())
+    );
   }
 
-  hotkeyArray.forEach((hotkey) => currentlyPressedKeys.add(hotkey.toLowerCase()))
+  hotkeyArray.forEach((hotkey) =>
+    currentlyPressedKeys.add(hotkey.toLowerCase())
+  );
 }
 
 export function removeFromCurrentlyPressedKeys(key: string | string[]): void {
-  const hotkeyArray = Array.isArray(key) ? key : [key]
+  const hotkeyArray = Array.isArray(key) ? key : [key];
 
   /*
   Due to a weird behavior on macOS we need to clear the set if the user pressed down the meta key and presses another key.
   https://stackoverflow.com/questions/11818637/why-does-javascript-drop-keyup-events-when-the-metakey-is-pressed-on-mac-browser
   Otherwise the set will hold all ever pressed keys while the meta key is down which leads to wrong results.
    */
-  if (key === 'meta') {
-    currentlyPressedKeys.clear()
+  if (key === "meta") {
+    currentlyPressedKeys.clear();
   } else {
-    hotkeyArray.forEach((hotkey) => currentlyPressedKeys.delete(hotkey.toLowerCase()))
+    hotkeyArray.forEach((hotkey) =>
+      currentlyPressedKeys.delete(hotkey.toLowerCase())
+    );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/modules/hotkeys/parse-hotkeys.ts b/packages/components/src/modules/hotkeys/parse-hotkeys.ts
new file mode 100644
index 0000000..2e6894f
--- /dev/null
+++ b/packages/components/src/modules/hotkeys/parse-hotkeys.ts
@@ -0,0 +1,74 @@
+// NOTE(jimmylee)
+// Vendored from
+// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/parseHotkeys.ts
+
+import { Hotkey, KeyboardModifiers } from "@srcl/ui/modules/hotkeys/types";
+
+const reservedModifierKeywords = ["shift", "alt", "meta", "mod", "ctrl"];
+
+const mappedKeys: Record<string, string> = {
+  esc: "escape",
+  return: "enter",
+  ".": "period",
+  ",": "comma",
+  "-": "slash",
+  " ": "space",
+  "`": "backquote",
+  "#": "backslash",
+  "+": "bracketright",
+  ShiftLeft: "shift",
+  ShiftRight: "shift",
+  AltLeft: "alt",
+  AltRight: "alt",
+  MetaLeft: "meta",
+  MetaRight: "meta",
+  OSLeft: "meta",
+  OSRight: "meta",
+  ControlLeft: "ctrl",
+  ControlRight: "ctrl",
+};
+
+export function mapKey(key?: string): string {
+  return ((key && mappedKeys[key]) || key || "")
+    .trim()
+    .toLowerCase()
+    .replace(/key|digit|numpad|arrow/, "");
+}
+
+export function isHotkeyModifier(key: string) {
+  return reservedModifierKeywords.includes(key);
+}
+
+export function parseKeysHookInput(keys: string, splitKey = ","): string[] {
+  return keys.split(splitKey);
+}
+
+export function parseHotkey(
+  hotkey: string,
+  combinationKey = "+",
+  description?: string
+): Hotkey {
+  const keys = hotkey
+    .toLocaleLowerCase()
+    .split(combinationKey)
+    .map((k) => mapKey(k));
+
+  const modifiers: KeyboardModifiers = {
+    alt: keys.includes("alt"),
+    ctrl: keys.includes("ctrl") || keys.includes("control"),
+    shift: keys.includes("shift"),
+    meta: keys.includes("meta"),
+    mod: keys.includes("mod"),
+  };
+
+  const singleCharKeys = keys.filter(
+    (k) => !reservedModifierKeywords.includes(k)
+  );
+
+  return {
+    ...modifiers,
+    keys: singleCharKeys,
+    description,
+    hotkey,
+  };
+}
diff --git a/modules/hotkeys/types.ts b/packages/components/src/modules/hotkeys/types.ts
similarity index 100%
rename from modules/hotkeys/types.ts
rename to packages/components/src/modules/hotkeys/types.ts
diff --git a/packages/components/src/modules/hotkeys/use-deep-equal-memo.ts b/packages/components/src/modules/hotkeys/use-deep-equal-memo.ts
new file mode 100644
index 0000000..a11471a
--- /dev/null
+++ b/packages/components/src/modules/hotkeys/use-deep-equal-memo.ts
@@ -0,0 +1,13 @@
+import { useRef } from "react";
+
+import * as Utilities from "@srcl/ui/utilities";
+
+export default function useDeepEqualMemo<T>(value: T) {
+  const ref = useRef<T | undefined>(undefined);
+
+  if (!Utilities.deepEqual(ref.current, value)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}
diff --git a/packages/components/src/modules/hotkeys/use-hotkeys.ts b/packages/components/src/modules/hotkeys/use-hotkeys.ts
new file mode 100644
index 0000000..375ed8d
--- /dev/null
+++ b/packages/components/src/modules/hotkeys/use-hotkeys.ts
@@ -0,0 +1,236 @@
+// NOTE(jimmylee)
+// Vendored from
+// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/useHotkeys.ts
+
+import {
+  HotkeyCallback,
+  Keys,
+  Options,
+  OptionsOrDependencyArray,
+  RefType,
+} from "@srcl/ui/modules/hotkeys/types";
+import {
+  DependencyList,
+  RefCallback,
+  useCallback,
+  useEffect,
+  useState,
+  useLayoutEffect,
+  useRef,
+} from "react";
+import {
+  mapKey,
+  parseHotkey,
+  parseKeysHookInput,
+} from "@srcl/ui/modules/hotkeys/parse-hotkeys";
+import {
+  isHotkeyEnabled,
+  isHotkeyEnabledOnTag,
+  isHotkeyMatchingKeyboardEvent,
+  isKeyboardEventTriggeredByInput,
+  isScopeActive,
+  maybePreventDefault,
+} from "@srcl/ui/modules/hotkeys/validators";
+import { useHotkeysContext } from "@srcl/ui/modules/hotkeys/hotkeys-provider";
+import { useBoundHotkeysProxy } from "@srcl/ui/modules/hotkeys/bound-hotkeys-proxy-provider";
+import useDeepEqualMemo from "@srcl/ui/modules/hotkeys/use-deep-equal-memo";
+import {
+  isReadonlyArray,
+  pushToCurrentlyPressedKeys,
+  removeFromCurrentlyPressedKeys,
+} from "@srcl/ui/modules/hotkeys/is-hotkey-pressed";
+
+const stopPropagation = (e: KeyboardEvent): void => {
+  e.stopPropagation();
+  e.preventDefault();
+  e.stopImmediatePropagation();
+};
+
+export const useSafeLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export const useHotkeys = <T extends HTMLElement>(
+  keys: Keys,
+  callback: HotkeyCallback,
+  options?: OptionsOrDependencyArray,
+  dependencies?: OptionsOrDependencyArray
+) => {
+  const [ref, setRef] = useState<RefType<T>>(null);
+  const hasTriggeredRef = useRef(false);
+
+  const _options: Options | undefined = !(options instanceof Array)
+    ? (options as Options)
+    : !(dependencies instanceof Array)
+    ? (dependencies as Options)
+    : undefined;
+  const _keys: string = isReadonlyArray(keys)
+    ? keys.join(_options?.splitKey)
+    : keys;
+  const _deps: DependencyList | undefined =
+    options instanceof Array
+      ? options
+      : dependencies instanceof Array
+      ? dependencies
+      : undefined;
+
+  const memoisedCB = useCallback(callback, _deps ?? []);
+  const cbRef = useRef<HotkeyCallback>(memoisedCB);
+
+  if (_deps) {
+    cbRef.current = memoisedCB;
+  } else {
+    cbRef.current = callback;
+  }
+
+  const memoisedOptions = useDeepEqualMemo(_options);
+
+  const { enabledScopes } = useHotkeysContext();
+  const proxy = useBoundHotkeysProxy();
+
+  useSafeLayoutEffect(() => {
+    if (
+      memoisedOptions?.enabled === false ||
+      !isScopeActive(enabledScopes, memoisedOptions?.scopes)
+    ) {
+      return;
+    }
+
+    const listener = (e: KeyboardEvent, isKeyUp = false) => {
+      if (
+        isKeyboardEventTriggeredByInput(e) &&
+        !isHotkeyEnabledOnTag(e, memoisedOptions?.enableOnFormTags)
+      ) {
+        return;
+      }
+
+      // TODO: SINCE THE EVENT IS NOW ATTACHED TO THE REF, THE ACTIVE ELEMENT CAN NEVER BE INSIDE THE REF. THE HOTKEY ONLY TRIGGERS IF THE
+      // REF IS THE ACTIVE ELEMENT. THIS IS A PROBLEM SINCE FOCUSED SUB COMPONENTS WON'T TRIGGER THE HOTKEY.
+      if (ref !== null) {
+        const rootNode = ref.getRootNode();
+        if (
+          (rootNode instanceof Document || rootNode instanceof ShadowRoot) &&
+          rootNode.activeElement !== ref &&
+          !ref.contains(rootNode.activeElement)
+        ) {
+          stopPropagation(e);
+          return;
+        }
+      }
+
+      if (
+        (e.target as HTMLElement)?.isContentEditable &&
+        !memoisedOptions?.enableOnContentEditable
+      ) {
+        return;
+      }
+
+      parseKeysHookInput(_keys, memoisedOptions?.splitKey).forEach((key) => {
+        const hotkey = parseHotkey(key, memoisedOptions?.combinationKey);
+
+        if (
+          isHotkeyMatchingKeyboardEvent(
+            e,
+            hotkey,
+            memoisedOptions?.ignoreModifiers
+          ) ||
+          hotkey.keys?.includes("*")
+        ) {
+          if (memoisedOptions?.ignoreEventWhen?.(e)) {
+            return;
+          }
+
+          if (isKeyUp && hasTriggeredRef.current) {
+            return;
+          }
+
+          maybePreventDefault(e, hotkey, memoisedOptions?.preventDefault);
+
+          if (!isHotkeyEnabled(e, hotkey, memoisedOptions?.enabled)) {
+            stopPropagation(e);
+
+            return;
+          }
+
+          // Execute the user callback for that hotkey
+          cbRef.current(e, hotkey);
+
+          if (!isKeyUp) {
+            hasTriggeredRef.current = true;
+          }
+        }
+      });
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === undefined) {
+        // Synthetic event (e.g., Chrome autofill).  Ignore.
+        return;
+      }
+
+      pushToCurrentlyPressedKeys(mapKey(event.code));
+
+      if (
+        (memoisedOptions?.keydown === undefined &&
+          memoisedOptions?.keyup !== true) ||
+        memoisedOptions?.keydown
+      ) {
+        listener(event);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === undefined) {
+        // Synthetic event (e.g., Chrome autofill).  Ignore.
+        return;
+      }
+
+      removeFromCurrentlyPressedKeys(mapKey(event.code));
+
+      hasTriggeredRef.current = false;
+
+      if (memoisedOptions?.keyup) {
+        listener(event, true);
+      }
+    };
+
+    const domNode = ref || _options?.document || document;
+
+    // @ts-ignore
+    domNode.addEventListener("keyup", handleKeyUp);
+    // @ts-ignore
+    domNode.addEventListener("keydown", handleKeyDown);
+
+    if (proxy) {
+      parseKeysHookInput(_keys, memoisedOptions?.splitKey).forEach((key) =>
+        proxy.addHotkey(
+          parseHotkey(
+            key,
+            memoisedOptions?.combinationKey,
+            memoisedOptions?.description
+          )
+        )
+      );
+    }
+
+    return () => {
+      // @ts-ignore
+      domNode.removeEventListener("keyup", handleKeyUp);
+      // @ts-ignore
+      domNode.removeEventListener("keydown", handleKeyDown);
+
+      if (proxy) {
+        parseKeysHookInput(_keys, memoisedOptions?.splitKey).forEach((key) =>
+          proxy.removeHotkey(
+            parseHotkey(
+              key,
+              memoisedOptions?.combinationKey,
+              memoisedOptions?.description
+            )
+          )
+        );
+      }
+    };
+  }, [ref, _keys, memoisedOptions, enabledScopes]);
+
+  return setRef as RefCallback<T>;
+};
diff --git a/packages/components/src/modules/hotkeys/use-record-hotkeys.ts b/packages/components/src/modules/hotkeys/use-record-hotkeys.ts
new file mode 100644
index 0000000..4e97c96
--- /dev/null
+++ b/packages/components/src/modules/hotkeys/use-record-hotkeys.ts
@@ -0,0 +1,51 @@
+import { useCallback, useState } from "react";
+import { mapKey } from "@srcl/ui/modules/hotkeys/parse-hotkeys";
+
+export default function useRecordHotkeys() {
+  const [keys, setKeys] = useState(new Set<string>());
+  const [isRecording, setIsRecording] = useState(false);
+
+  const handler = useCallback((event: KeyboardEvent) => {
+    if (event.key === undefined) {
+      // Synthetic event (e.g., Chrome autofill).  Ignore.
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    setKeys((prev) => {
+      const newKeys = new Set(prev);
+
+      newKeys.add(mapKey(event.code));
+
+      return newKeys;
+    });
+  }, []);
+
+  const stop = useCallback(() => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("keydown", handler);
+
+      setIsRecording(false);
+    }
+  }, [handler]);
+
+  const start = useCallback(() => {
+    setKeys(new Set<string>());
+
+    if (typeof document !== "undefined") {
+      stop();
+
+      document.addEventListener("keydown", handler);
+
+      setIsRecording(true);
+    }
+  }, [handler, stop]);
+
+  const resetKeys = useCallback(() => {
+    setKeys(new Set<string>());
+  }, []);
+
+  return [keys, { start, stop, resetKeys, isRecording }] as const;
+}
diff --git a/packages/components/src/modules/hotkeys/validators.ts b/packages/components/src/modules/hotkeys/validators.ts
new file mode 100644
index 0000000..694ec98
--- /dev/null
+++ b/packages/components/src/modules/hotkeys/validators.ts
@@ -0,0 +1,184 @@
+// NOTE(jimmylee)
+// Vendored from
+// https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/validators.ts
+
+import {
+  FormTags,
+  Hotkey,
+  Scopes,
+  Trigger,
+} from "@srcl/ui/modules/hotkeys/types";
+import {
+  isHotkeyPressed,
+  isReadonlyArray,
+} from "@srcl/ui/modules/hotkeys/is-hotkey-pressed";
+import { mapKey } from "@srcl/ui/modules/hotkeys/parse-hotkeys";
+
+export function maybePreventDefault(
+  e: KeyboardEvent,
+  hotkey: Hotkey,
+  preventDefault?: Trigger
+): void {
+  if (
+    (typeof preventDefault === "function" && preventDefault(e, hotkey)) ||
+    preventDefault === true
+  ) {
+    e.preventDefault();
+  }
+}
+
+export function isHotkeyEnabled(
+  e: KeyboardEvent,
+  hotkey: Hotkey,
+  enabled?: Trigger
+): boolean {
+  if (typeof enabled === "function") {
+    return enabled(e, hotkey);
+  }
+
+  return enabled === true || enabled === undefined;
+}
+
+export function isKeyboardEventTriggeredByInput(ev: KeyboardEvent): boolean {
+  return isHotkeyEnabledOnTag(ev, ["input", "textarea", "select"]);
+}
+
+export function isHotkeyEnabledOnTag(
+  event: KeyboardEvent,
+  enabledOnTags: readonly FormTags[] | boolean = false
+): boolean {
+  const { target, composed } = event;
+
+  let targetTagName: string | null = null;
+
+  if (isCustomElement(target as HTMLElement) && composed) {
+    targetTagName =
+      event.composedPath()[0] &&
+      (event.composedPath()[0] as HTMLElement).tagName;
+  } else {
+    targetTagName = target && (target as HTMLElement).tagName;
+  }
+
+  if (isReadonlyArray(enabledOnTags)) {
+    return Boolean(
+      targetTagName &&
+        enabledOnTags &&
+        enabledOnTags.some(
+          (tag) => tag.toLowerCase() === targetTagName?.toLowerCase()
+        )
+    );
+  }
+
+  return Boolean(targetTagName && enabledOnTags && enabledOnTags);
+}
+
+export function isCustomElement(element: HTMLElement): boolean {
+  // We just do a basic check w/o any complex RegEx or validation against the list of legacy names containing a hyphen,
+  // as none of them is likely to be an event target, and it won't hurt anyway if we miss.
+  // see: https://html.spec.whatwg.org/multipage/custom-elements.html#prod-potentialcustomelementname
+  return (
+    !!element.tagName &&
+    !element.tagName.startsWith("-") &&
+    element.tagName.includes("-")
+  );
+}
+
+export function isScopeActive(
+  activeScopes: string[],
+  scopes?: Scopes
+): boolean {
+  if (activeScopes.length === 0 && scopes) {
+    console.warn(
+      'A hotkey has the "scopes" option set, however no active scopes were found. If you want to use the global scopes feature, you need to wrap your app in a <HotkeysProvider>'
+    );
+
+    return true;
+  }
+
+  if (!scopes) {
+    return true;
+  }
+
+  return (
+    activeScopes.some((scope) => scopes.includes(scope)) ||
+    activeScopes.includes("*")
+  );
+}
+
+export const isHotkeyMatchingKeyboardEvent = (
+  e: KeyboardEvent,
+  hotkey: Hotkey,
+  ignoreModifiers = false
+): boolean => {
+  const { alt, meta, mod, shift, ctrl, keys } = hotkey;
+  const {
+    key: pressedKeyUppercase,
+    code,
+    ctrlKey,
+    metaKey,
+    shiftKey,
+    altKey,
+  } = e;
+
+  const keyCode = mapKey(code);
+  const pressedKey = pressedKeyUppercase.toLowerCase();
+
+  if (
+    !keys?.includes(keyCode) &&
+    !keys?.includes(pressedKey) &&
+    !["ctrl", "control", "unknown", "meta", "alt", "shift", "os"].includes(
+      keyCode
+    )
+  ) {
+    return false;
+  }
+
+  if (!ignoreModifiers) {
+    // We check the pressed keys for compatibility with the keyup event. In keyup events the modifier flags are not set.
+    if (alt === !altKey && pressedKey !== "alt") {
+      return false;
+    }
+
+    if (shift === !shiftKey && pressedKey !== "shift") {
+      return false;
+    }
+
+    // Mod is a special key name that is checking for meta on macOS and ctrl on other platforms
+    if (mod) {
+      if (!metaKey && !ctrlKey) {
+        return false;
+      }
+    } else {
+      if (meta === !metaKey && pressedKey !== "meta" && pressedKey !== "os") {
+        return false;
+      }
+
+      if (
+        ctrl === !ctrlKey &&
+        pressedKey !== "ctrl" &&
+        pressedKey !== "control"
+      ) {
+        return false;
+      }
+    }
+  }
+
+  // All modifiers are correct, now check the key
+  // If the key is set, we check for the key
+  if (
+    keys &&
+    keys.length === 1 &&
+    (keys.includes(pressedKey) || keys.includes(keyCode))
+  ) {
+    return true;
+  } else if (keys) {
+    // Check if all keys are present in pressedDownKeys set
+    return isHotkeyPressed(keys);
+  } else if (!keys) {
+    // If the key is not set, we only listen for modifiers, that check went alright, so we return true
+    return true;
+  }
+
+  // There is nothing that matches.
+  return false;
+};
diff --git a/components/page/ModalContext.tsx b/packages/components/src/modules/modals/ModalContext.tsx
similarity index 95%
rename from components/page/ModalContext.tsx
rename to packages/components/src/modules/modals/ModalContext.tsx
index 1a97d8c..c120842 100644
--- a/components/page/ModalContext.tsx
+++ b/packages/components/src/modules/modals/ModalContext.tsx
@@ -14,7 +14,7 @@ interface ModalContextType {
   close: (key?: string) => void;
 }
 
-const ModalContext = React.createContext<ModalContextType | null>(null);
+export const ModalContext = React.createContext<ModalContextType | null>(null);
 
 export const ModalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [modalStack, setModalStack] = React.useState<ModalState<any>[]>([]);
@@ -24,7 +24,7 @@ export const ModalProvider: React.FC<{ children: React.ReactNode }> = ({ childre
       console.warn('Modal component is required - modal will not open');
       return '';
     }
-    
+
     if (typeof component !== 'function' && typeof component !== 'object') {
       console.warn('Modal component must be a valid React component - modal will not open');
       return '';
@@ -44,7 +44,7 @@ export const ModalProvider: React.FC<{ children: React.ReactNode }> = ({ childre
       if (prev.length === 0) {
         return prev;
       }
-      
+
       if (key) {
         if (typeof key !== 'string') {
           console.warn('Modal key must be a string');
@@ -52,7 +52,7 @@ export const ModalProvider: React.FC<{ children: React.ReactNode }> = ({ childre
         }
         return prev.filter((modal) => modal.key !== key);
       }
-      
+
       return prev.slice(0, -1);
     });
   };
@@ -72,7 +72,7 @@ export const useModals = (): ModalContextType => {
       },
       close: () => {
         console.warn('Modal close called outside of ModalProvider - modal will not close');
-      }
+      },
     };
   }
   return context;
diff --git a/modules/object-assign.ts b/packages/components/src/modules/object-assign.ts
similarity index 98%
rename from modules/object-assign.ts
rename to packages/components/src/modules/object-assign.ts
index 4a93fea..a3e7b49 100755
--- a/modules/object-assign.ts
+++ b/packages/components/src/modules/object-assign.ts
@@ -65,7 +65,7 @@ function shouldUseNative() {
   }
 }
 
-const assign = shouldUseNative()
+export const assign = shouldUseNative()
   ? Object.assign
   : function (target, source) {
       var from;
diff --git a/modules/vary.ts b/packages/components/src/modules/vary.ts
similarity index 79%
rename from modules/vary.ts
rename to packages/components/src/modules/vary.ts
index 8f3e5e0..929c95c 100755
--- a/modules/vary.ts
+++ b/packages/components/src/modules/vary.ts
@@ -6,7 +6,7 @@
  * MIT Licensed
  */
 
-'use strict';
+"use strict";
 
 /**
  * RegExp to match field-name in RFC 7230 sec 3.2
@@ -31,12 +31,12 @@ var FIELD_NAME_REGEXP = /^[!#$%&'*+\-.^_`|~0-9A-Za-z]+$/;
  */
 
 function append(header, field) {
-  if (typeof header !== 'string') {
-    throw new TypeError('header argument is required');
+  if (typeof header !== "string") {
+    throw new TypeError("header argument is required");
   }
 
   if (!field) {
-    throw new TypeError('field argument is required');
+    throw new TypeError("field argument is required");
   }
 
   // get fields array
@@ -45,12 +45,12 @@ function append(header, field) {
   // assert on invalid field names
   for (var j = 0; j < fields.length; j++) {
     if (!FIELD_NAME_REGEXP.test(fields[j])) {
-      throw new TypeError('field argument contains an invalid header name');
+      throw new TypeError("field argument contains an invalid header name");
     }
   }
 
   // existing, unspecified vary
-  if (header === '*') {
+  if (header === "*") {
     return header;
   }
 
@@ -59,8 +59,8 @@ function append(header, field) {
   var vals = parse(header.toLowerCase());
 
   // unspecified vary
-  if (fields.indexOf('*') !== -1 || vals.indexOf('*') !== -1) {
-    return '*';
+  if (fields.indexOf("*") !== -1 || vals.indexOf("*") !== -1) {
+    return "*";
   }
 
   for (var i = 0; i < fields.length; i++) {
@@ -69,7 +69,7 @@ function append(header, field) {
     // append value (case-preserving)
     if (vals.indexOf(fld) === -1) {
       vals.push(fld);
-      val = val ? val + ', ' + fields[i] : fields[i];
+      val = val ? val + ", " + fields[i] : fields[i];
     }
   }
 
@@ -124,16 +124,16 @@ function parse(header) {
 function vary(res, field) {
   if (!res || !res.getHeader || !res.setHeader) {
     // quack quack
-    throw new TypeError('res argument is required');
+    throw new TypeError("res argument is required");
   }
 
   // get existing header
-  var val = res.getHeader('Vary') || '';
-  var header = Array.isArray(val) ? val.join(', ') : String(val);
+  var val = res.getHeader("Vary") || "";
+  var header = Array.isArray(val) ? val.join(", ") : String(val);
 
   // set new header
   if ((val = append(header, field))) {
-    res.setHeader('Vary', val);
+    res.setHeader("Vary", val);
   }
 }
 
diff --git a/packages/components/src/utilities/index.ts b/packages/components/src/utilities/index.ts
new file mode 100644
index 0000000..4ec018c
--- /dev/null
+++ b/packages/components/src/utilities/index.ts
@@ -0,0 +1,529 @@
+const hasOwn = {}.hasOwnProperty;
+const localhostDomainRE = /^localhost[\:?\d]*(?:[^\:?\d]\S*)?$/;
+const nonLocalhostDomainRE = /^[^\s\.]+\.\S{2,}$/;
+const protocolAndDomainRE = /^(?:\w+:)?\/\/(\S+)$/;
+
+export function noop() {
+  return null;
+}
+
+export function pluralize(text: string, count: number) {
+  return count > 1 || count === 0 ? `${text}s` : text;
+}
+
+export function getOrdinalNumber(n) {
+  return (
+    n +
+    (n > 0
+      ? ["th", "st", "nd", "rd"][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10]
+      : "")
+  );
+}
+
+// NOTE(jimmylee)
+// Stolen from: https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/src/deepEqual.ts
+export function deepEqual(x: any, y: any): boolean {
+  //@ts-ignore
+  return x && y && typeof x === "object" && typeof y === "object"
+    ? Object.keys(x).length === Object.keys(y).length &&
+        //@ts-ignore
+        Object.keys(x).reduce(
+          (isEqual, key) => isEqual && deepEqual(x[key], y[key]),
+          true
+        )
+    : x === y;
+}
+
+export function getDomainFromEmailWithoutAnySubdomain(email: string): string {
+  const atIndex = email.lastIndexOf("@");
+  if (atIndex === -1) {
+    return "";
+  }
+
+  const domain = email.slice(atIndex + 1);
+  const domainParts = domain.split(".");
+
+  if (domainParts.length < 2) {
+    return "";
+  }
+
+  const mainDomain = domainParts.slice(-2).join(".");
+  return mainDomain;
+}
+
+export function onHandleThemeChange(className?: string) {
+  const body = document.body;
+
+  body.classList.forEach((existingClass) => {
+    if (existingClass.startsWith("theme-")) {
+      body.classList.remove(existingClass);
+    }
+  });
+
+  if (className) {
+    body.classList.add(className);
+  } else {
+    body.classList.add("theme-light");
+  }
+}
+
+export function onHandleFontChange(className?: string) {
+  const body = document.body;
+
+  if (className) {
+    body.classList.forEach((existingClass) => {
+      if (existingClass.startsWith("font-")) {
+        body.classList.remove(existingClass);
+      }
+    });
+
+    body.classList.add(className);
+    return;
+  }
+
+  body.classList.forEach((existingClass) => {
+    if (existingClass.startsWith("font-")) {
+      body.classList.remove(existingClass);
+    }
+  });
+}
+
+export function formatDollars(value: number): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(value);
+}
+
+export function calculatePositionWithGutter(
+  rect,
+  objectWidth,
+  viewportWidth,
+  gutter = 24
+) {
+  const right = viewportWidth - rect.right;
+  const top = rect.top + rect.height + gutter;
+  const side = right + objectWidth >= viewportWidth ? "left" : "right";
+  const adjustedRight =
+    side === "left" ? viewportWidth - objectWidth - gutter : right;
+  return { top, right: adjustedRight, side };
+}
+
+export function calculatePositionWithGutterById(
+  id,
+  objectWidth,
+  viewportWidth,
+  gutter?
+) {
+  let rect;
+  if (id) {
+    const el = document.getElementById(id);
+    if (el) {
+      rect = el.getBoundingClientRect();
+    }
+  }
+  return calculatePositionWithGutter(rect, objectWidth, viewportWidth, gutter);
+}
+
+export function leftPad(input, length) {
+  const zerosNeeded = length - input.length;
+  if (zerosNeeded <= 0) {
+    return input;
+  }
+
+  const zeros = "0".repeat(zerosNeeded);
+
+  return zeros + input;
+}
+
+export function toDateISOString(data: string) {
+  const date = new Date(data);
+  const dayOfWeek = date.toLocaleDateString("en-US", {
+    weekday: "long",
+  });
+  const month = date.toLocaleDateString("en-US", {
+    month: "long",
+  });
+  const dayOfMonth = getOrdinalNumber(date.getDate());
+  const year = date.getFullYear();
+
+  const formattedDate = `${dayOfWeek}, ${month} ${dayOfMonth}, ${year}`;
+
+  return formattedDate;
+}
+
+export function elide(string, length = 140, emptyState = "...") {
+  if (isEmpty(string)) {
+    return emptyState;
+  }
+
+  if (string.length < length) {
+    return string.trim();
+  }
+
+  return `${string.substring(0, length)}...`;
+}
+
+export function bytesToSize(bytes: number, decimals: number = 2) {
+  if (bytes === 0) return "0 Bytes";
+
+  const k = 1000;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${(bytes / Math.pow(k, i)).toFixed(dm)} ${sizes[i]}`;
+}
+
+export function isEmpty(text: any) {
+  // NOTE(jimmylee):
+  // If a number gets passed in, it isn't considered empty for zero.
+  if (text === 0) {
+    return false;
+  }
+
+  if (!text) {
+    return true;
+  }
+
+  if (typeof text === "object") {
+    return true;
+  }
+
+  if (text.length === 0) {
+    return true;
+  }
+
+  text = text.toString();
+
+  return Boolean(!text.trim());
+}
+
+export function createSlug(text: any) {
+  if (isEmpty(text)) {
+    return "untitled";
+  }
+
+  const a = "æøåàáäâèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;";
+  const b = "aoaaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------";
+  const p = new RegExp(a.split("").join("|"), "g");
+
+  return text
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, "-") // Replace spaces with -
+    .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special chars
+    .replace(/&/g, "-and-") // Replace & with 'and'
+    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
+    .replace(/\-\-+/g, "-") // Replace multiple - with single -
+    .replace(/^-+/, "") // Trim - from start of text
+    .replace(/-+$/, ""); // Trim - from end of text
+}
+
+export function isUrl(string: any) {
+  if (typeof string !== "string") {
+    return false;
+  }
+
+  let match = string.match(protocolAndDomainRE);
+  if (!match) {
+    return false;
+  }
+
+  let everythingAfterProtocol = match[1];
+  if (!everythingAfterProtocol) {
+    return false;
+  }
+
+  if (
+    localhostDomainRE.test(everythingAfterProtocol) ||
+    nonLocalhostDomainRE.test(everythingAfterProtocol)
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+export function debounce<Args extends unknown[]>(
+  fn: (...args: Args) => void,
+  delay: number
+) {
+  let timeoutID: number | undefined;
+  let lastArgs: Args | undefined;
+
+  const run = () => {
+    if (lastArgs) {
+      fn(...lastArgs);
+      lastArgs = undefined;
+    }
+  };
+
+  const debounced = (...args: Args) => {
+    clearTimeout(timeoutID);
+    lastArgs = args;
+    timeoutID = window.setTimeout(run, delay);
+  };
+
+  debounced.flush = () => {
+    clearTimeout(timeoutID);
+  };
+
+  return debounced;
+}
+
+export function timeAgo(dateInput: Date | string | number): string {
+  const date = new Date(dateInput);
+  const now = new Date();
+  const secondsPast = (now.getTime() - date.getTime()) / 1000;
+
+  if (secondsPast < 0 || isNaN(secondsPast)) {
+    return "[INVALID]";
+  }
+
+  if (secondsPast < 60) {
+    return "Just now";
+  } else if (secondsPast < 3600) {
+    const minutes = Math.floor(secondsPast / 60);
+    return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
+  } else if (secondsPast < 86400) {
+    const hours = Math.floor(secondsPast / 3600);
+    return `${hours} hour${hours > 1 ? "s" : ""} ago`;
+  } else if (secondsPast < 604800) {
+    const days = Math.floor(secondsPast / 86400);
+    return `${days} day${days > 1 ? "s" : ""} ago`;
+  }
+
+  const formattedDate = date.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "numeric",
+  });
+
+  return formattedDate;
+}
+
+export function classNames(...args: any[]): string {
+  let classes: string[] = [];
+
+  for (let i = 0; i < arguments.length; i++) {
+    let arg = arguments[i];
+    if (!arg) continue;
+
+    let argType = typeof arg;
+
+    if (argType === "string" || argType === "number") {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        let inner = classNames.apply(null, arg);
+        if (inner) {
+          classes.push(inner);
+        }
+      }
+    } else if (argType === "object") {
+      if (arg.toString !== Object.prototype.toString) {
+        classes.push(arg.toString());
+      } else {
+        for (let key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes.push(key);
+          }
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+export async function generateNonce() {
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  const charactersLength = characters.length;
+  for (let i = 0; i < 8; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
+export function filterUndefined(obj) {
+  const res = {};
+  Object.keys(obj)
+    .filter((k) => obj[k] !== undefined)
+    .forEach((k) => (res[k] = obj[k]));
+  return res;
+}
+
+export const isFocusableElement = (
+  element: EventTarget | null
+): element is HTMLElement => {
+  if (!element || !(element instanceof HTMLElement)) {
+    return false;
+  }
+
+  const focusableSelectors = [
+    "a[href]",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+  ];
+
+  return element.matches(focusableSelectors.join(", "));
+};
+
+export const findNextFocusable = (
+  element: Element | null,
+  direction: "next" | "previous" = "next"
+): HTMLElement | null => {
+  if (!element) return null;
+
+  const focusableSelectors = [
+    "a[href]",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+  ];
+
+  const focusableElements = Array.from(
+    document.querySelectorAll<HTMLElement>(focusableSelectors.join(", "))
+  );
+
+  const currentIndex = focusableElements.indexOf(element as HTMLElement);
+
+  if (currentIndex !== -1) {
+    const nextIndex =
+      direction === "next"
+        ? (currentIndex + 1) % focusableElements.length
+        : (currentIndex - 1 + focusableElements.length) %
+          focusableElements.length;
+
+    return focusableElements[nextIndex];
+  }
+
+  return null;
+};
+
+export const findFocusableDescendant = (
+  container: Element | null,
+  currentFocused: Element | null = null,
+  direction: "next" | "previous" = "next"
+): HTMLElement | null => {
+  if (!container) return null;
+
+  const focusableElements = Array.from(
+    container.querySelectorAll<HTMLElement>(
+      'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]'
+    )
+  );
+
+  if (focusableElements.length === 0) return null;
+
+  let index = 0;
+  if (currentFocused) {
+    const currentIndex = focusableElements.indexOf(
+      currentFocused as HTMLElement
+    );
+    if (currentIndex !== -1) {
+      index = direction === "next" ? currentIndex + 1 : currentIndex - 1;
+    }
+  }
+
+  if (index >= 0 && index < focusableElements.length) {
+    return focusableElements[index];
+  }
+
+  return null;
+};
+
+export type Placement = "top" | "bottom" | "left" | "right";
+
+export function calculatePosition(
+  triggerElement: HTMLElement,
+  popoverElement: HTMLElement,
+  scrollX: number = window.scrollX,
+  scrollY: number = window.scrollY
+): { placement: Placement; position: { top: number; left: number } } {
+  let triggerRect;
+  let popoverRect;
+
+  if (triggerElement) {
+    triggerRect = triggerElement.getBoundingClientRect();
+  }
+
+  if (popoverElement) {
+    popoverRect = popoverElement.getBoundingClientRect();
+  }
+
+  const spaceAbove = triggerRect.top;
+  const spaceBelow = window.innerHeight - triggerRect.bottom;
+  const spaceLeft = triggerRect.left;
+  const spaceRight = window.innerWidth - triggerRect.right;
+
+  const viewportHeightThreshold = window.innerHeight * 0.4;
+  const viewportWidthThreshold = window.innerWidth * 0.4;
+
+  let placement: Placement = "bottom";
+  let top = 0;
+  let left = 0;
+  if (!popoverRect) {
+    return { placement, position: { top: 0, left: 0 } };
+  }
+
+  if (
+    spaceAbove >= viewportHeightThreshold &&
+    spaceAbove >= popoverRect.height
+  ) {
+    placement = "top";
+    top = triggerRect.top + scrollY - popoverRect.height;
+    left =
+      triggerRect.left + scrollX + (triggerRect.width - popoverRect.width) / 2;
+  } else if (
+    spaceBelow >= viewportHeightThreshold &&
+    spaceBelow >= popoverRect.height
+  ) {
+    placement = "bottom";
+    top = triggerRect.bottom + scrollY;
+    left =
+      triggerRect.left + scrollX + (triggerRect.width - popoverRect.width) / 2;
+  } else if (
+    spaceRight >= viewportWidthThreshold &&
+    spaceRight >= popoverRect.width
+  ) {
+    placement = "right";
+    top =
+      triggerRect.top + scrollY + (triggerRect.height - popoverRect.height) / 2;
+    left = triggerRect.right + scrollX;
+  } else if (
+    spaceLeft >= viewportWidthThreshold &&
+    spaceLeft >= popoverRect.width
+  ) {
+    placement = "left";
+    top =
+      triggerRect.top + scrollY + (triggerRect.height - popoverRect.height) / 2;
+    left = triggerRect.left + scrollX - popoverRect.width;
+  } else {
+    placement = "bottom";
+    top = triggerRect.bottom + scrollY;
+    left =
+      triggerRect.left + scrollX + (triggerRect.width - popoverRect.width) / 2;
+  }
+
+  if (left < 0) left = 0;
+  else if (left + popoverRect.width > window.innerWidth)
+    left = window.innerWidth - popoverRect.width;
+
+  if (top < 0) top = 0;
+  else if (top + popoverRect.height > window.innerHeight + scrollY)
+    top = window.innerHeight + scrollY - popoverRect.height;
+
+  return { placement, position: { top, left } };
+}
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
new file mode 100644
index 0000000..377c179
--- /dev/null
+++ b/packages/components/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "preserve",
+    "moduleResolution": "Bundler",
+    "declaration": true,
+    "outDir": "./dist",
+    "types": ["node", "react"],
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "composite": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "rootDir": "./",
+    "paths": {
+      "@srcl/ui/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "global.d.ts", "tsdown.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/components/tsdown.config.ts b/packages/components/tsdown.config.ts
new file mode 100644
index 0000000..2fcca5d
--- /dev/null
+++ b/packages/components/tsdown.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from "tsdown";
+import styles from "rollup-plugin-styles";
+
+export default defineConfig([
+  {
+    entry: ["./src/**/index.ts", "./src/modules/**/*.ts"],
+    platform: "neutral",
+    format: ["esm", "cjs"],
+    dts: true,
+    target: "esnext",
+    exports: {
+      customExports(pkg, context) {
+        const newPkg = {};
+        // This makes it so anything in the /components folder have a top level import.
+        for (const key in pkg) {
+          if (key.includes("/components")) {
+            const newKey = key.replace("/components", "");
+            newPkg[newKey] = pkg[key];
+          } else {
+            newPkg[key] = pkg[key];
+          }
+        }
+        return newPkg;
+      },
+    },
+    outDir: "dist",
+    plugins: [styles({ modules: true })],
+  },
+]);
diff --git a/packages/www-sacred/.gitignore b/packages/www-sacred/.gitignore
new file mode 100755
index 0000000..bf65c2d
--- /dev/null
+++ b/packages/www-sacred/.gitignore
@@ -0,0 +1,20 @@
+.next
+.nova
+.env
+.env.local
+.env-custom-development
+.env-development
+.env-textile
+.env-production
+.DS_STORE
+DS_STORE
+yarn.lock
+node_modules
+dist
+analytics.txt
+package-lock.json
+
+/**/*/.DS_STORE
+/**/*/node_modules
+/**/*/.next
+/**/*/.data
\ No newline at end of file
diff --git a/.prettierrc b/packages/www-sacred/.prettierrc
similarity index 100%
rename from .prettierrc
rename to packages/www-sacred/.prettierrc
diff --git a/LICENSE.md b/packages/www-sacred/LICENSE.md
similarity index 100%
rename from LICENSE.md
rename to packages/www-sacred/LICENSE.md
diff --git a/components/DefaultMetaTags.tsx b/packages/www-sacred/app/DefaultMetaTags.tsx
similarity index 89%
rename from components/DefaultMetaTags.tsx
rename to packages/www-sacred/app/DefaultMetaTags.tsx
index b80920e..c94cc82 100755
--- a/components/DefaultMetaTags.tsx
+++ b/packages/www-sacred/app/DefaultMetaTags.tsx
@@ -1,4 +1,4 @@
-export default function DefaultMetaTags() {
+export const DefaultMetaTags = () => {
   return (
     <>
       <meta httpEquiv="content-language" content="en-us" />
@@ -8,4 +8,4 @@ export default function DefaultMetaTags() {
       <link rel="shortcut icon" href="/favicon.ico" />
     </>
   );
-}
+};
diff --git a/components/Providers.tsx b/packages/www-sacred/app/Providers.tsx
old mode 100755
new mode 100644
similarity index 75%
rename from components/Providers.tsx
rename to packages/www-sacred/app/Providers.tsx
index 51538e6..4a92bab
--- a/components/Providers.tsx
+++ b/packages/www-sacred/app/Providers.tsx
@@ -1,8 +1,6 @@
-'use client';
-
 import * as React from 'react';
 
-import { ModalProvider } from '@components/page/ModalContext';
+import { ModalProvider } from '@srcl/ui/context';
 
 interface ProvidersProps {
   children: React.ReactNode;
diff --git a/app/concept-1/head.tsx b/packages/www-sacred/app/concept-1/head.tsx
similarity index 64%
rename from app/concept-1/head.tsx
rename to packages/www-sacred/app/concept-1/head.tsx
index 8b6f8b6..fbf4ce9 100644
--- a/app/concept-1/head.tsx
+++ b/packages/www-sacred/app/concept-1/head.tsx
@@ -1,4 +1,4 @@
-import DefaultMetaTags from '@components/DefaultMetaTags';
+import { DefaultMetaTags } from '../DefaultMetaTags';
 
 export default async function Head({ params }) {
   return (
diff --git a/app/layout.tsx b/packages/www-sacred/app/concept-1/layout.tsx
old mode 100755
new mode 100644
similarity index 83%
rename from app/layout.tsx
rename to packages/www-sacred/app/concept-1/layout.tsx
index 69e1a66..e2bb9da
--- a/app/layout.tsx
+++ b/packages/www-sacred/app/concept-1/layout.tsx
@@ -1,4 +1,4 @@
-import Providers from '@components/Providers';
+import Providers from '../Providers';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/app/concept-1/page.tsx b/packages/www-sacred/app/concept-1/page.tsx
similarity index 78%
rename from app/concept-1/page.tsx
rename to packages/www-sacred/app/concept-1/page.tsx
index e236d7e..41035b5 100644
--- a/app/concept-1/page.tsx
+++ b/packages/www-sacred/app/concept-1/page.tsx
@@ -1,14 +1,10 @@
 import '@root/global.scss';
 
-import * as Constants from '@common/constants';
-import * as Utilities from '@common/utilities';
-
-import DefaultLayout from '@components/page/DefaultLayout';
-import DefaultActionBar from '@components/page/DefaultActionBar';
-import Package from '@root/package.json';
-import DebugGrid from '@components/DebugGrid';
-import ModalStack from '@components/ModalStack';
-import PageConceptOne from '@components/examples/PageConceptOne';
+import Package from '../../package.json';
+import { PageConceptOne } from '@root/examples/PageConceptOne';
+import { DebugGrid } from '@srcl/ui/DebugGrid';
+import { DefaultActionBar } from '@root/page/DefaultActionBar';
+import { ModalStack } from '@srcl/ui/ModalStack';
 
 export const dynamic = 'force-static';
 
diff --git a/app/head.tsx b/packages/www-sacred/app/concept-2/head.tsx
old mode 100755
new mode 100644
similarity index 64%
rename from app/head.tsx
rename to packages/www-sacred/app/concept-2/head.tsx
index 8b6f8b6..fbf4ce9
--- a/app/head.tsx
+++ b/packages/www-sacred/app/concept-2/head.tsx
@@ -1,4 +1,4 @@
-import DefaultMetaTags from '@components/DefaultMetaTags';
+import { DefaultMetaTags } from '../DefaultMetaTags';
 
 export default async function Head({ params }) {
   return (
diff --git a/app/concept-1/layout.tsx b/packages/www-sacred/app/concept-2/layout.tsx
similarity index 83%
rename from app/concept-1/layout.tsx
rename to packages/www-sacred/app/concept-2/layout.tsx
index 69e1a66..e2bb9da 100644
--- a/app/concept-1/layout.tsx
+++ b/packages/www-sacred/app/concept-2/layout.tsx
@@ -1,4 +1,4 @@
-import Providers from '@components/Providers';
+import Providers from '../Providers';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/app/concept-2/page.tsx b/packages/www-sacred/app/concept-2/page.tsx
similarity index 81%
rename from app/concept-2/page.tsx
rename to packages/www-sacred/app/concept-2/page.tsx
index 48dafe4..6f2650a 100644
--- a/app/concept-2/page.tsx
+++ b/packages/www-sacred/app/concept-2/page.tsx
@@ -1,14 +1,11 @@
+import { PageConceptTwo } from '@root/examples/PageConceptTwo';
 import '@root/global.scss';
 
-import * as Constants from '@common/constants';
-import * as Utilities from '@common/utilities';
-
-import DefaultLayout from '@components/page/DefaultLayout';
-import DefaultActionBar from '@components/page/DefaultActionBar';
 import Package from '@root/package.json';
-import DebugGrid from '@components/DebugGrid';
-import ModalStack from '@components/ModalStack';
-import PageConceptTwo from '@components/examples/PageConceptTwo';
+import { DefaultActionBar } from '@root/page/DefaultActionBar';
+
+import { DebugGrid } from '@srcl/ui/DebugGrid';
+import { ModalStack } from '@srcl/ui/ModalStack';
 
 export const dynamic = 'force-static';
 
diff --git a/app/concept-2/head.tsx b/packages/www-sacred/app/head.tsx
old mode 100644
new mode 100755
similarity index 64%
rename from app/concept-2/head.tsx
rename to packages/www-sacred/app/head.tsx
index 8b6f8b6..027f516
--- a/app/concept-2/head.tsx
+++ b/packages/www-sacred/app/head.tsx
@@ -1,4 +1,4 @@
-import DefaultMetaTags from '@components/DefaultMetaTags';
+import { DefaultMetaTags } from './DefaultMetaTags';
 
 export default async function Head({ params }) {
   return (
diff --git a/app/concept-2/layout.tsx b/packages/www-sacred/app/layout.tsx
old mode 100644
new mode 100755
similarity index 83%
rename from app/concept-2/layout.tsx
rename to packages/www-sacred/app/layout.tsx
index 69e1a66..b8cf553
--- a/app/concept-2/layout.tsx
+++ b/packages/www-sacred/app/layout.tsx
@@ -1,4 +1,4 @@
-import Providers from '@components/Providers';
+import Providers from '@root/app/Providers';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/app/manifest.ts b/packages/www-sacred/app/manifest.ts
similarity index 100%
rename from app/manifest.ts
rename to packages/www-sacred/app/manifest.ts
diff --git a/app/page.tsx b/packages/www-sacred/app/page.tsx
similarity index 95%
rename from app/page.tsx
rename to packages/www-sacred/app/page.tsx
index c40b452..640dbf0 100755
--- a/app/page.tsx
+++ b/packages/www-sacred/app/page.tsx
@@ -1,78 +1,79 @@
 import '@root/global.scss';
 
 import * as Constants from '@common/constants';
-import * as Utilities from '@common/utilities';
+import * as Utilities from '@srcl/ui/utilities';
 
 // NOTE(jimmylee): This is a kitchen sink of all components.
 // When forking or remixing, you'll likely only need a few.
-import Accordion from '@components/Accordion';
-import ActionBar from '@components/ActionBar';
-import ActionButton from '@components/ActionButton';
-import ActionListItem from '@components/ActionListItem';
-import AlertBanner from '@components/AlertBanner';
-import AS400 from '@components/examples/AS400';
-import Avatar from '@components/Avatar';
-import Badge from '@components/Badge';
-import BarLoader from '@components/BarLoader';
-import BarProgress from '@components/BarProgress';
-import Block from '@components/Block';
-import BlockLoader from '@components/BlockLoader';
-import Breadcrumbs from '@components/BreadCrumbs';
-import Button from '@components/Button';
-import ButtonGroup from '@components/ButtonGroup';
-import Card from '@components/Card';
-import CardDouble from '@components/CardDouble';
-import Checkbox from '@components/Checkbox';
-import Chessboard from '@components/Chessboard';
-import CodeBlock from '@components/CodeBlock';
-import ContentFluid from '@components/ContentFluid';
-import ComboBox from '@components/ComboBox';
-import DataTable from '@components/DataTable';
-import DatePicker from '@components/DatePicker';
-import DashboardRadar from '@components/examples/DashboardRadar';
-import DebugGrid from '@components/DebugGrid';
-import DefaultActionBar from '@components/page/DefaultActionBar';
-import DefaultLayout from '@components/page/DefaultLayout';
-import Denabase from '@components/examples/Denabase';
-import Dialog from '@components/Dialog';
-import Divider from '@components/Divider';
-import Drawer from '@components/Drawer';
-import DropdownMenuTrigger from '@components/DropdownMenuTrigger';
-import Grid from '@components/Grid';
-import HoverComponentTrigger from '@components/HoverComponentTrigger';
-import Indent from '@components/Indent';
-import Input from '@components/Input';
-import IntDevLogo from '@components/svg/IntDevLogo';
-import ListItem from '@components/ListItem';
-import Message from '@components/Message';
-import MessageViewer from '@components/MessageViewer';
-import MessagesInterface from '@components/examples/MessagesInterface';
-import ModalAlert from '@components/modals/ModalAlert';
-import ModalCanvasSnake from '@components/modals/ModalCanvasSnake';
-import ModalCanvasPlatformer from '@components/modals/ModalCanvasPlatformer';
-import ModalChess from '@components/modals/ModalChess';
-import ModalCreateAccount from '@components/modals/ModalCreateAccount';
-import ModalError from '@components/modals/ModalError';
-import ModalMatrixModes from '@components/modals/ModalMatrixModes';
-import ModalStack from '@components/ModalStack';
-import ModalTrigger from '@components/ModalTrigger';
-import Navigation from '@components/Navigation';
-import NumberRangeSlider from '@components/NumberRangeSlider';
+import { Accordion } from '@srcl/ui/Accordion';
+import { ActionBar } from '@srcl/ui/ActionBar';
+import { ActionButton } from '@srcl/ui/ActionButton';
+import { ActionListItem } from '@srcl/ui/ActionListItem';
+import { AlertBanner } from '@srcl/ui/AlertBanner';
+// import { AS400 } from '@examples/AS400';
+import { Avatar } from '@srcl/ui/Avatar';
+import { Badge } from '@srcl/ui/Badge';
+import { BarLoader } from '@srcl/ui/BarLoader';
+import { BarProgress } from '@srcl/ui/BarProgress';
+import { Block } from '@srcl/ui/Block';
+import { BlockLoader } from '@srcl/ui/BlockLoader';
+import { BreadCrumbs } from '@srcl/ui/BreadCrumbs';
+import { Button } from '@srcl/ui/Button';
+import { ButtonGroup } from '@srcl/ui/ButtonGroup';
+import { Card } from '@srcl/ui/Card';
+import { CardDouble } from '@srcl/ui/CardDouble';
+import { Checkbox } from '@srcl/ui/Checkbox';
+import { Chessboard } from '@srcl/ui/Chessboard';
+import { CodeBlock } from '@srcl/ui/CodeBlock';
+import { ContentFluid } from '@srcl/ui/ContentFluid';
+import { ComboBox } from '@srcl/ui/ComboBox';
+import { DataTable } from '@srcl/ui/DataTable';
+import { DatePicker } from '@srcl/ui/DatePicker';
+import { DashboardRadar } from '@root/examples/DashboardRadar';
+import { DebugGrid } from '@srcl/ui/DebugGrid';
+import { DefaultActionBar } from '@page/DefaultActionBar';
+import { DefaultLayout } from '@page/DefaultLayout';
+import { Denabase } from '@root/examples/Denabase';
+import { Dialog } from '@srcl/ui/Dialog';
+import { Divider } from '@srcl/ui/Divider';
+import { Drawer } from '@srcl/ui/Drawer';
+import { DropdownMenuTrigger } from '@srcl/ui/DropdownMenuTrigger';
+import { Grid } from '@srcl/ui/Grid';
+import { HoverComponentTrigger } from '@srcl/ui/HoverComponentTrigger';
+import { Indent } from '@srcl/ui/Indent';
+import { Input } from '@srcl/ui/Input';
+import { IntDevLogo } from '@svg/IntDevLogo';
+import { ListItem } from '@srcl/ui/ListItem';
+import { Message } from '@srcl/ui/Message';
+import { MessageViewer } from '@srcl/ui/MessageViewer';
+import { MessagesInterface } from '@root/examples/MessagesInterface';
+import { ModalAlert } from '@srcl/ui/ModalAlert';
+import { ModalCanvasSnake } from '@srcl/ui/ModalCanvasSnake';
+import { ModalCanvasPlatformer } from '@srcl/ui/ModalCanvasPlatformer';
+import { ModalChess } from '@srcl/ui/ModalChess';
+import { ModalCreateAccount } from '@srcl/ui/ModalCreateAccount';
+import { ModalError } from '@srcl/ui/ModalError';
+import { ModalMatrixModes } from '@srcl/ui/ModalMatrixModes';
+import { ModalStack } from '@srcl/ui/ModalStack';
+import { ModalTrigger } from '@srcl/ui/ModalTrigger';
+import { Navigation } from '@srcl/ui/Navigation';
+import { NumberRangeSlider } from '@srcl/ui/NumberRangeSlider';
 import Package from '@root/package.json';
-import RadioButtonGroup from '@components/RadioButtonGroup';
-import Row from '@components/Row';
-import RowSpaceBetween from '@components/RowSpaceBetween';
+import { RadioButtonGroup } from '@srcl/ui/RadioButton';
+import { Row } from '@srcl/ui/Row';
+import { RowSpaceBetween } from '@srcl/ui/RowSpaceBetween';
 import Script from 'next/script';
-import Select from '@components/Select';
-import SidebarLayout from '@components/SidebarLayout';
-import Table from '@components/Table';
-import TableRow from '@components/TableRow';
-import TableColumn from '@components/TableColumn';
-import Text from '@components/Text';
-import TextArea from '@components/TextArea';
-import TreeView from '@components/TreeView';
-import UpdatingDataTable from '@components/examples/UpdatingDataTable';
-import ModalDOMSnake from '@root/components/modals/ModalDOMSnake';
+import { Select } from '@srcl/ui/Select';
+import { SidebarLayout } from '@srcl/ui/SidebarLayout';
+import { Table } from '@srcl/ui/Table';
+import { TableRow } from '@srcl/ui/TableRow';
+import { TableColumn } from '@srcl/ui/TableColumn';
+import { Text } from '@srcl/ui/Text';
+import { TextArea } from '@srcl/ui/TextArea';
+import { TreeView } from '@srcl/ui/TreeView';
+import { UpdatingDataTable } from '@root/examples/UpdatingDataTable';
+import { ModalDOMSnake } from '@srcl/ui/ModalDOMSnake';
+import { AS400 } from '@root/examples/AS400';
 
 export const dynamic = 'force-static';
 
@@ -366,7 +367,7 @@ export default async function Page(props) {
           <br />
           <br />
           <CardDouble title="POST">
-            <Breadcrumbs
+            <BreadCrumbs
               items={[
                 {
                   name: `Christopher Alexander`,
@@ -424,7 +425,7 @@ export default async function Page(props) {
           <br />
           <br />
           <Card title="EXAMPLE">
-            <Breadcrumbs
+            <BreadCrumbs
               items={[
                 {
                   name: `Philosophical Taoism`,
@@ -442,7 +443,7 @@ export default async function Page(props) {
             />
             <br />
             <br />
-            <Breadcrumbs
+            <BreadCrumbs
               items={[
                 {
                   name: `161 AD`,
@@ -464,7 +465,7 @@ export default async function Page(props) {
             />
             <br />
             <br />
-            <Breadcrumbs
+            <BreadCrumbs
               items={[
                 {
                   name: `Orthos Logos`,
diff --git a/app/robots.ts b/packages/www-sacred/app/robots.ts
similarity index 100%
rename from app/robots.ts
rename to packages/www-sacred/app/robots.ts
diff --git a/app/sitemap.ts b/packages/www-sacred/app/sitemap.ts
similarity index 100%
rename from app/sitemap.ts
rename to packages/www-sacred/app/sitemap.ts
diff --git a/common/constants.ts b/packages/www-sacred/common/constants.ts
similarity index 100%
rename from common/constants.ts
rename to packages/www-sacred/common/constants.ts
diff --git a/common/queries.ts b/packages/www-sacred/common/queries.ts
similarity index 98%
rename from common/queries.ts
rename to packages/www-sacred/common/queries.ts
index d1d4dec..ebf0f91 100755
--- a/common/queries.ts
+++ b/packages/www-sacred/common/queries.ts
@@ -1,5 +1,4 @@
-import * as Constants from '@common/constants';
-import * as Utilities from '@common/utilities';
+import * as Constants from './constants';
 
 export async function getData({ route, key, body }, qualifier = 'data') {
   let result;
diff --git a/common/server.ts b/packages/www-sacred/common/server.ts
similarity index 93%
rename from common/server.ts
rename to packages/www-sacred/common/server.ts
index 5d799ca..75ba6ff 100755
--- a/common/server.ts
+++ b/packages/www-sacred/common/server.ts
@@ -1,6 +1,6 @@
-import * as Utilities from '@common/utilities';
+import * as Utilities from '@srcl/ui/utilities';
 
-import Cors from '@modules/cors';
+import Cors from '@srcl/ui/modules/cors';
 
 // NOTE(jimmylee)
 // import aesjs from 'aes-js';
@@ -68,7 +68,10 @@ export async function setup(context): Promise<{ sessionKey?: any; viewer?: Recor
     try {
       const response = await fetch('https://api.internet.dev/api/users/viewer', {
         method: 'PUT',
-        headers: { 'X-API-KEY': sessionKey, 'Content-Type': 'application/json' },
+        headers: {
+          'X-API-KEY': sessionKey,
+          'Content-Type': 'application/json',
+        },
       });
       const result = await response.json();
       if (result && result.viewer) {
diff --git a/components/examples/AS400.module.scss b/packages/www-sacred/examples/AS400.module.scss
similarity index 100%
rename from components/examples/AS400.module.scss
rename to packages/www-sacred/examples/AS400.module.scss
diff --git a/components/examples/AS400.tsx b/packages/www-sacred/examples/AS400.tsx
similarity index 95%
rename from components/examples/AS400.tsx
rename to packages/www-sacred/examples/AS400.tsx
index b95687b..3bb9625 100644
--- a/components/examples/AS400.tsx
+++ b/packages/www-sacred/examples/AS400.tsx
@@ -1,22 +1,16 @@
 'use client';
 
-import styles from '@components/AS400.module.scss';
-
 import * as React from 'react';
 
-import Card from '@components/Card';
-import Row from '@components/Row';
-import RowSpaceBetween from '@components/RowSpaceBetween';
-import Table from '@components/Table';
-import TableRow from '@components/TableRow';
-import TableColumn from '@components/TableColumn';
-import TextArea from '@components/TextArea';
+import { Card } from '@srcl/ui/Card';
 
-type AS400Props = React.HTMLAttributes<HTMLElement> & {
-  children?: React.ReactNode;
-};
+import { RowSpaceBetween } from '@srcl/ui/RowSpaceBetween';
+import { Table } from '@srcl/ui/Table';
+import { TableRow } from '@srcl/ui/TableRow';
+import { TableColumn } from '@srcl/ui/TableColumn';
+import { TextArea } from '@srcl/ui/TextArea';
 
-const AS400 = () => {
+export const AS400 = () => {
   return (
     <>
       <Card>
@@ -284,5 +278,3 @@ const AS400 = () => {
 };
 
 AS400.displayName = 'AS400';
-
-export default AS400;
diff --git a/components/examples/DashboardRadar.module.scss b/packages/www-sacred/examples/DashboardRadar.module.scss
similarity index 100%
rename from components/examples/DashboardRadar.module.scss
rename to packages/www-sacred/examples/DashboardRadar.module.scss
diff --git a/components/examples/DashboardRadar.tsx b/packages/www-sacred/examples/DashboardRadar.tsx
similarity index 87%
rename from components/examples/DashboardRadar.tsx
rename to packages/www-sacred/examples/DashboardRadar.tsx
index c0965c2..8430cab 100644
--- a/components/examples/DashboardRadar.tsx
+++ b/packages/www-sacred/examples/DashboardRadar.tsx
@@ -1,14 +1,16 @@
-import styles from '@components/examples/DashboardRadar.module.scss';
+import styles from './DashboardRadar.module.scss';
 
 import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as Utilities from '@srcl/ui/utilities';
 
-import ActionButton from '@components/ActionButton';
-import ButtonGroup from '@components/ButtonGroup';
-import Card from '@components/Card';
-import RowSpaceBetween from '@components/RowSpaceBetween';
-import SidebarLayout from '@components/SidebarLayout';
-import Sphere from '@components/svg/Sphere';
+import { ActionButton } from '@srcl/ui/ActionButton';
+import { ButtonGroup } from '@srcl/ui/ButtonGroup';
+
+import { Card } from '@srcl/ui/Card';
+
+import { RowSpaceBetween } from '@srcl/ui/RowSpaceBetween';
+import { SidebarLayout } from '@srcl/ui/SidebarLayout';
+import { Sphere } from '@root/svg/Sphere';
 
 const RadarMarker = (props) => {
   return (
@@ -25,7 +27,7 @@ const RadarMarker = (props) => {
   );
 };
 
-const DashboardRadar = (props) => {
+export const DashboardRadar = (props) => {
   return (
     <div className={styles.root}>
       <SidebarLayout
@@ -105,5 +107,3 @@ const DashboardRadar = (props) => {
     </div>
   );
 };
-
-export default DashboardRadar;
diff --git a/components/examples/Denabase.module.scss b/packages/www-sacred/examples/Denabase.module.scss
similarity index 100%
rename from components/examples/Denabase.module.scss
rename to packages/www-sacred/examples/Denabase.module.scss
diff --git a/components/examples/Denabase.tsx b/packages/www-sacred/examples/Denabase.tsx
similarity index 93%
rename from components/examples/Denabase.tsx
rename to packages/www-sacred/examples/Denabase.tsx
index c235d36..b668ed2 100644
--- a/components/examples/Denabase.tsx
+++ b/packages/www-sacred/examples/Denabase.tsx
@@ -1,17 +1,17 @@
 'use client';
 
-import styles from '@components/examples/Denabase.module.scss';
+import styles from './Denabase.module.scss';
 
 import * as React from 'react';
 
-import ActionButton from '@components/ActionButton';
-import Card from '@components/Card';
-import Divider from '@components/Divider';
-import Row from '@components/Row';
-import RowSpaceBetween from '@components/RowSpaceBetween';
-import SidebarLayout from '@components/SidebarLayout';
+import { ActionButton } from '@srcl/ui/ActionButton';
+import { Card } from '@srcl/ui/Card';
+import { Divider } from '@srcl/ui/Divider';
+import { Row } from '@srcl/ui/Row';
+import { RowSpaceBetween } from '@srcl/ui/RowSpaceBetween';
+import { SidebarLayout } from '@srcl/ui/SidebarLayout';
 
-const Denabase = (props) => {
+export const Denabase = (props) => {
   return (
     <>
       <Card style={{ overflowWrap: 'break-word' }}>
@@ -157,5 +157,3 @@ const Denabase = (props) => {
     </>
   );
 };
-
-export default Denabase;
diff --git a/components/examples/MessagesInterface.tsx b/packages/www-sacred/examples/MessagesInterface.tsx
similarity index 96%
rename from components/examples/MessagesInterface.tsx
rename to packages/www-sacred/examples/MessagesInterface.tsx
index beb86de..c4b1f2d 100644
--- a/components/examples/MessagesInterface.tsx
+++ b/packages/www-sacred/examples/MessagesInterface.tsx
@@ -1,25 +1,25 @@
-import Avatar from '@components/Avatar';
-import ActionButton from '@components/ActionButton';
-import Divider from '@components/Divider';
-import DropdownMenuTrigger from '@components/DropdownMenuTrigger';
-import Indent from '@components/Indent';
-import Input from '@components/Input';
-import Message from '@components/Message';
-import MessageViewer from '@components/MessageViewer';
-import ModalError from '@components/modals/ModalError';
-import Navigation from '@components/Navigation';
-import RowEllipsis from '@components/RowEllipsis';
-import SidebarLayout from '@components/SidebarLayout';
+import { Avatar } from '@srcl/ui/Avatar';
+import { ActionButton } from '@srcl/ui/ActionButton';
+import { Divider } from '@srcl/ui/Divider';
+import { DropdownMenuTrigger } from '@srcl/ui/DropdownMenuTrigger';
+import { Indent } from '@srcl/ui/Indent';
+import { Input } from '@srcl/ui/Input';
+import { Message } from '@srcl/ui/Message';
+import { MessageViewer } from '@srcl/ui/MessageViewer';
+import { ModalError } from '@srcl/ui/ModalError';
+import { Navigation } from '@srcl/ui/Navigation';
+import { RowEllipsis } from '@srcl/ui/RowEllipsis';
+import { SidebarLayout } from '@srcl/ui/SidebarLayout';
 
 import * as React from 'react';
 
 interface MessagesInterfaceProps extends React.HTMLAttributes<HTMLSpanElement> {}
 
-const ChatPreviewInline = (props) => {
+export const ChatPreviewInline = (props) => {
   return <RowEllipsis style={{ opacity: 0.5, marginBottom: `10px` }}>{props.children}</RowEllipsis>;
 };
 
-const MessagesInterface: React.FC<MessagesInterfaceProps> = () => {
+export const MessagesInterface: React.FC<MessagesInterfaceProps> = () => {
   return (
     <div style={{ minWidth: '28ch' }}>
       <Navigation
@@ -484,5 +484,3 @@ const MessagesInterface: React.FC<MessagesInterfaceProps> = () => {
     </div>
   );
 };
-
-export default MessagesInterface;
diff --git a/components/examples/PageConceptOne.module.scss b/packages/www-sacred/examples/PageConceptOne.module.scss
similarity index 100%
rename from components/examples/PageConceptOne.module.scss
rename to packages/www-sacred/examples/PageConceptOne.module.scss
diff --git a/components/examples/PageConceptOne.tsx b/packages/www-sacred/examples/PageConceptOne.tsx
similarity index 96%
rename from components/examples/PageConceptOne.tsx
rename to packages/www-sacred/examples/PageConceptOne.tsx
index e0d0947..91e9daa 100644
--- a/components/examples/PageConceptOne.tsx
+++ b/packages/www-sacred/examples/PageConceptOne.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import styles from '@components/examples/PageConceptOne.module.scss';
+import styles from './PageConceptOne.module.scss';
 
 import * as React from 'react';
 
-import Card from '@components/Card';
-import DataTable from '@components/DataTable';
-import Dialog from '@components/Dialog';
+import { Card } from '@srcl/ui/Card';
+import { DataTable } from '@srcl/ui/DataTable';
+import { Dialog } from '@srcl/ui/Dialog';
 
-const PageConceptOne = (props) => {
+export const PageConceptOne = (props) => {
   return (
     <div className={styles.root}>
       <div className={styles.top}>
@@ -220,5 +220,3 @@ const PageConceptOne = (props) => {
     </div>
   );
 };
-
-export default PageConceptOne;
diff --git a/components/examples/PageConceptTwo.module.scss b/packages/www-sacred/examples/PageConceptTwo.module.scss
similarity index 100%
rename from components/examples/PageConceptTwo.module.scss
rename to packages/www-sacred/examples/PageConceptTwo.module.scss
diff --git a/components/examples/PageConceptTwo.tsx b/packages/www-sacred/examples/PageConceptTwo.tsx
similarity index 93%
rename from components/examples/PageConceptTwo.tsx
rename to packages/www-sacred/examples/PageConceptTwo.tsx
index 2413393..0a0abd1 100644
--- a/components/examples/PageConceptTwo.tsx
+++ b/packages/www-sacred/examples/PageConceptTwo.tsx
@@ -1,15 +1,15 @@
 'use client';
 
-import styles from '@components/examples/PageConceptTwo.module.scss';
+import styles from './PageConceptTwo.module.scss';
 
 import * as React from 'react';
 
-import Card from '@components/Card';
-import DataTable from '@components/DataTable';
-import Dialog from '@components/Dialog';
-import MessagesInterface from '@components/examples/MessagesInterface';
+import { Card } from '@srcl/ui/Card';
+import { DataTable } from '@srcl/ui/DataTable';
+import { Dialog } from '@srcl/ui/Dialog';
+import { MessagesInterface } from '@root/examples/MessagesInterface';
 
-const PageConceptTwo = (props) => {
+export const PageConceptTwo = (props) => {
   return (
     <div className={styles.root}>
       <div className={styles.top}>
@@ -171,5 +171,3 @@ const PageConceptTwo = (props) => {
     </div>
   );
 };
-
-export default PageConceptTwo;
diff --git a/components/examples/UpdatingDataTable.tsx b/packages/www-sacred/examples/UpdatingDataTable.tsx
similarity index 91%
rename from components/examples/UpdatingDataTable.tsx
rename to packages/www-sacred/examples/UpdatingDataTable.tsx
index 460fe29..40326ab 100644
--- a/components/examples/UpdatingDataTable.tsx
+++ b/packages/www-sacred/examples/UpdatingDataTable.tsx
@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 
-import DataTable from '@components/DataTable';
+import { DataTable } from '@srcl/ui/DataTable';
 
-const UpdatingDataTable = (props) => {
+export const UpdatingDataTable = (props) => {
   const [tableData, setTableData] = React.useState(props.data);
 
   React.useEffect(() => {
@@ -43,5 +43,3 @@ const UpdatingDataTable = (props) => {
     </>
   );
 };
-
-export default UpdatingDataTable;
diff --git a/global.scss b/packages/www-sacred/global.scss
similarity index 100%
rename from global.scss
rename to packages/www-sacred/global.scss
diff --git a/next-env.d.ts b/packages/www-sacred/next-env.d.ts
similarity index 100%
rename from next-env.d.ts
rename to packages/www-sacred/next-env.d.ts
diff --git a/next.config.js b/packages/www-sacred/next.config.js
similarity index 100%
rename from next.config.js
rename to packages/www-sacred/next.config.js
diff --git a/packages/www-sacred/package.json b/packages/www-sacred/package.json
new file mode 100755
index 0000000..37cae7f
--- /dev/null
+++ b/packages/www-sacred/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "www-sacred",
+  "description": "SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics.",
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "MIT",
+  "version": "1.1.7",
+  "scripts": {
+    "dev": "next -p 10000",
+    "build": "next build",
+    "start": "PORT=10000 next start",
+    "lint": "next lint",
+    "types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "15.3.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sass": "1.92.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.5.1",
+    "@types/react": "^19.1.13",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.2"
+  }
+}
diff --git a/components/page/DefaultActionBar.module.scss b/packages/www-sacred/page/DefaultActionBar.module.scss
similarity index 100%
rename from components/page/DefaultActionBar.module.scss
rename to packages/www-sacred/page/DefaultActionBar.module.scss
diff --git a/components/page/DefaultActionBar.tsx b/packages/www-sacred/page/DefaultActionBar.tsx
similarity index 89%
rename from components/page/DefaultActionBar.tsx
rename to packages/www-sacred/page/DefaultActionBar.tsx
index 36c3264..55fafe3 100644
--- a/components/page/DefaultActionBar.tsx
+++ b/packages/www-sacred/page/DefaultActionBar.tsx
@@ -1,15 +1,13 @@
 'use client';
 
-import styles from '@components/page/DefaultActionBar.module.scss';
+import styles from './DefaultActionBar.module.scss';
 
 import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import * as Utilities from '@srcl/ui/utilities';
 
-import { toggleDebugGrid } from '@components/DebugGrid';
-import { useHotkeys } from '@modules/hotkeys';
-
-import ActionBar from '@components/ActionBar';
-import ButtonGroup from '@components/ButtonGroup';
+import { ActionBar } from '@srcl/ui/ActionBar';
+import { toggleDebugGrid } from '@srcl/ui/DebugGrid';
+import { useHotkeys } from '@srcl/ui/hooks';
 
 function isElement(target: EventTarget | null): target is Element {
   return target instanceof Element;
@@ -19,7 +17,7 @@ function isHTMLElement(target: EventTarget | null): target is HTMLElement {
   return target instanceof HTMLElement;
 }
 
-const findFocusableParent = (element: Element | null): Element | null => {
+export const findFocusableParent = (element: Element | null): Element | null => {
   while (element) {
     element = element.parentElement;
     if (element && Utilities.isFocusableElement(element)) {
@@ -29,7 +27,7 @@ const findFocusableParent = (element: Element | null): Element | null => {
   return null;
 };
 
-const findNextFocusableSibling = (element: Element, direction: 'next' | 'previous'): HTMLElement | null => {
+export const findNextFocusableSibling = (element: Element, direction: 'next' | 'previous'): HTMLElement | null => {
   let sibling = direction === 'next' ? element.nextElementSibling : element.previousElementSibling;
 
   while (sibling) {
@@ -48,7 +46,7 @@ const findNextFocusableSibling = (element: Element, direction: 'next' | 'previou
   return null;
 };
 
-const findNextFocusableAncestor = (element: Element, direction: 'next' | 'previous'): HTMLElement | null => {
+export const findNextFocusableAncestor = (element: Element, direction: 'next' | 'previous'): HTMLElement | null => {
   let ancestor = element.parentElement;
 
   while (ancestor) {
@@ -62,7 +60,7 @@ const findNextFocusableAncestor = (element: Element, direction: 'next' | 'previo
   return null;
 };
 
-const useGlobalNavigationHotkeys = () => {
+export const useGlobalNavigationHotkeys = () => {
   const onHandleSubmit = (event: KeyboardEvent) => {
     const target = event.target;
     if (Utilities.isFocusableElement(target)) {
@@ -114,7 +112,7 @@ interface DefaultActionBarProps {
   }[];
 }
 
-const DefaultActionBar: React.FC<DefaultActionBarProps> = ({ items = [] }) => {
+export const DefaultActionBar: React.FC<DefaultActionBarProps> = ({ items = [] }) => {
   const [isGrid, setGrid] = React.useState(false);
   useHotkeys('ctrl+g', () => toggleDebugGrid());
 
@@ -237,5 +235,3 @@ const DefaultActionBar: React.FC<DefaultActionBarProps> = ({ items = [] }) => {
     </div>
   );
 };
-
-export default DefaultActionBar;
diff --git a/components/page/DefaultLayout.module.scss b/packages/www-sacred/page/DefaultLayout.module.scss
similarity index 100%
rename from components/page/DefaultLayout.module.scss
rename to packages/www-sacred/page/DefaultLayout.module.scss
diff --git a/components/page/DefaultLayout.tsx b/packages/www-sacred/page/DefaultLayout.tsx
similarity index 59%
rename from components/page/DefaultLayout.tsx
rename to packages/www-sacred/page/DefaultLayout.tsx
index 44c2e74..32a84a3 100755
--- a/components/page/DefaultLayout.tsx
+++ b/packages/www-sacred/page/DefaultLayout.tsx
@@ -1,4 +1,4 @@
-import styles from '@components/page/DefaultLayout.module.scss';
+import styles from './DefaultLayout.module.scss';
 
 import * as React from 'react';
 
@@ -7,7 +7,7 @@ interface DefaultLayoutProps {
   children?: React.ReactNode;
 }
 
-const DefaultLayout: React.FC<DefaultLayoutProps> = ({ previewPixelSRC, children }) => {
+export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ previewPixelSRC, children }) => {
   return (
     <div className={styles.body}>
       <img className={styles.pixel} src={previewPixelSRC} alt="" />
@@ -15,5 +15,3 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = ({ previewPixelSRC, children
     </div>
   );
 };
-
-export default DefaultLayout;
\ No newline at end of file
diff --git a/pages/_app.tsx b/packages/www-sacred/pages/_app.tsx
similarity index 81%
rename from pages/_app.tsx
rename to packages/www-sacred/pages/_app.tsx
index 105dd10..ef698bf 100755
--- a/pages/_app.tsx
+++ b/packages/www-sacred/pages/_app.tsx
@@ -1,9 +1,8 @@
+import Providers from '@root/app/Providers';
 import '@root/global.scss';
 
 import * as React from 'react';
 
-import Providers from '@components/Providers';
-
 function MyApp({ Component, pageProps }) {
   return (
     <Providers>
diff --git a/pages/_document.tsx b/packages/www-sacred/pages/_document.tsx
similarity index 100%
rename from pages/_document.tsx
rename to packages/www-sacred/pages/_document.tsx
diff --git a/pages/api/index.ts b/packages/www-sacred/pages/api/index.ts
similarity index 62%
rename from pages/api/index.ts
rename to packages/www-sacred/pages/api/index.ts
index 9d0ee71..3185eb3 100755
--- a/pages/api/index.ts
+++ b/packages/www-sacred/pages/api/index.ts
@@ -1,5 +1,5 @@
-import * as Server from '@common/server';
-import * as Constants from '@common/constants';
+import * as Server from '../../common/server';
+import * as Constants from '../../common/server';
 
 export default async function apiIndex(req, res) {
   await Server.cors(req, res);
diff --git a/public/apple-touch-icon-precomposed.png b/packages/www-sacred/public/apple-touch-icon-precomposed.png
similarity index 100%
rename from public/apple-touch-icon-precomposed.png
rename to packages/www-sacred/public/apple-touch-icon-precomposed.png
diff --git a/public/apple-touch-icon.png b/packages/www-sacred/public/apple-touch-icon.png
similarity index 100%
rename from public/apple-touch-icon.png
rename to packages/www-sacred/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/packages/www-sacred/public/favicon-16x16.png
similarity index 100%
rename from public/favicon-16x16.png
rename to packages/www-sacred/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/packages/www-sacred/public/favicon-32x32.png
similarity index 100%
rename from public/favicon-32x32.png
rename to packages/www-sacred/public/favicon-32x32.png
diff --git a/public/favicon.ico b/packages/www-sacred/public/favicon.ico
similarity index 100%
rename from public/favicon.ico
rename to packages/www-sacred/public/favicon.ico
diff --git a/public/template-app-icon.png b/packages/www-sacred/public/template-app-icon.png
similarity index 100%
rename from public/template-app-icon.png
rename to packages/www-sacred/public/template-app-icon.png
diff --git a/components/svg/IntDevLogo.tsx b/packages/www-sacred/svg/IntDevLogo.tsx
similarity index 97%
rename from components/svg/IntDevLogo.tsx
rename to packages/www-sacred/svg/IntDevLogo.tsx
index f45fd6b..380b69f 100644
--- a/components/svg/IntDevLogo.tsx
+++ b/packages/www-sacred/svg/IntDevLogo.tsx
@@ -1,4 +1,4 @@
-export default function IntDevLogo(props) {
+export const IntDevLogo = (props) => {
   return (
     <svg viewBox="0 0 494.25 80.29" fill="currentColor" aria-hidden {...props}>
       <path d="m57.8,29.75h0c0,5.34,4.33,9.67,9.67,9.67h38.11c5.34,0,9.67,4.33,9.67,9.67v.54c0,5.34-4.33,9.67-9.67,9.67h-38.11c-5.34,0-9.67,4.33-9.67,9.67v.29c0,5.34-4.33,9.67-9.67,9.67H9.67c-5.34,0-9.67-4.33-9.67-9.67v-.54c0-5.34,4.33-9.67,9.67-9.67h38.11c5.34,0,9.67-4.33,9.67-9.67v-.02c0-5.34-4.33-9.67-9.67-9.67H9.67c-5.34,0-9.67-4.33-9.67-9.67v-.54c0-5.34,4.33-9.67,9.67-9.67h38.11c5.34,0,9.67-4.33,9.67-9.67v-.27c0-5.34,4.33-9.67,9.67-9.67h38.45c5.34,0,9.67,4.33,9.67,9.67v.55c0,5.34-4.33,9.67-9.67,9.67h-38.11c-5.34,0-9.67,4.33-9.67,9.67Z" />
@@ -12,4 +12,4 @@ export default function IntDevLogo(props) {
       </g>
     </svg>
   );
-}
+};
diff --git a/components/svg/Sphere.tsx b/packages/www-sacred/svg/Sphere.tsx
similarity index 94%
rename from components/svg/Sphere.tsx
rename to packages/www-sacred/svg/Sphere.tsx
index ae733a8..d2cd8a8 100644
--- a/components/svg/Sphere.tsx
+++ b/packages/www-sacred/svg/Sphere.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export default function Sphere(props: { size?: number; segments?: number; style?: React.CSSProperties }) {
+export const Sphere = (props: { size?: number; segments?: number; style?: React.CSSProperties }) => {
   const size = props.size || 500;
   const segments = props.segments || 6;
   const radius = size * 0.4;
@@ -55,4 +55,4 @@ export default function Sphere(props: { size?: number; segments?: number; style?
       </g>
     </svg>
   );
-}
+};
diff --git a/packages/www-sacred/tsconfig.json b/packages/www-sacred/tsconfig.json
new file mode 100755
index 0000000..fb9f7d4
--- /dev/null
+++ b/packages/www-sacred/tsconfig.json
@@ -0,0 +1,74 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "./",
+    "declaration": true,
+    "composite": true,
+    "paths": {
+      "@root/*": [
+        "./*"
+      ],
+      "@system/*": [
+        "./system/*"
+      ],
+      "@demos/*": [
+        "./demos/*"
+      ],
+      "@common/*": [
+        "./common/*"
+      ],
+      "@data/*": [
+        "./data/*"
+      ],
+      "@examples/*": [
+        "./examples/*"
+      ],
+      "@pages/*": [
+        "./pages/*"
+      ],
+      "@page/*": [
+        "./page/*"
+      ],
+      "@svg/*": [
+        "./svg/*"
+      ]
+    },
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "outDir": "./",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.spec.ts",
+    "dist"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "package.json"
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
old mode 100755
new mode 100644
index 315fb7a..648c758
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,65 +1,14 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@root/*": [
-        "./*"
-      ],
-      "@system/*": [
-        "./system/*"
-      ],
-      "@demos/*": [
-        "./demos/*"
-      ],
-      "@common/*": [
-        "./common/*"
-      ],
-      "@data/*": [
-        "./data/*"
-      ],
-      "@components/*": [
-        "./components/*"
-      ],
-      "@pages/*": [
-        "./pages/*"
-      ],
-      "@modules/*": [
-        "./modules/*"
-      ]
-    },
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "strictNullChecks": true
+    "composite": true,
+    "types": ["node", "react"],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "target": "es2022",
+    "outDir": "dist",
   },
-  "exclude": [
-    "node_modules",
-    "**/*.spec.ts"
+  "references": [
+    { "path": "./packages/components" }
   ],
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ]
+  "exclude": ["node_modules", "**/dist"]
 }