From f61e4f08a414fce74caf9471ae08a35dbc579743 Mon Sep 17 00:00:00 2001
From: louistiti <louis.grenard@gmail.com>
Date: Thu, 29 Jun 2023 22:18:46 +0800
Subject: [PATCH] feat(web app): import Aurora

---
 app/src/js/aurora/button.tsx                  |   9 --
 .../js/aurora/components/button/button.sass   |  61 ++++++++
 .../js/aurora/components/button/button.tsx    |  85 +++++++++++
 app/src/js/aurora/components/button/index.ts  |   1 +
 app/src/js/aurora/components/card/card.sass   |  12 ++
 app/src/js/aurora/components/card/card.tsx    |  21 +++
 app/src/js/aurora/components/card/index.ts    |   1 +
 .../aurora/components/checkbox/checkbox.sass  |  40 +++++
 .../aurora/components/checkbox/checkbox.tsx   |  53 +++++++
 .../js/aurora/components/checkbox/index.ts    |   1 +
 .../circular-progress/circular-progress.sass  |  28 ++++
 .../circular-progress/circular-progress.tsx   |  35 +++++
 .../components/circular-progress/index.ts     |   1 +
 .../js/aurora/components/flexbox/flexbox.sass |  92 ++++++++++++
 .../js/aurora/components/flexbox/flexbox.tsx  |  63 ++++++++
 app/src/js/aurora/components/flexbox/index.ts |   1 +
 .../components/icon-button/icon-button.sass   |  70 +++++++++
 .../components/icon-button/icon-button.tsx    |  82 +++++++++++
 .../js/aurora/components/icon-button/index.ts |   1 +
 app/src/js/aurora/components/icon/icon.sass   | 115 +++++++++++++++
 app/src/js/aurora/components/icon/icon.tsx    |  68 +++++++++
 app/src/js/aurora/components/icon/index.ts    |   1 +
 app/src/js/aurora/components/image/image.sass |  76 ++++++++++
 app/src/js/aurora/components/image/image.tsx  |  52 +++++++
 app/src/js/aurora/components/image/index.ts   |   1 +
 app/src/js/aurora/components/index.ts         |  22 +++
 app/src/js/aurora/components/input/index.ts   |   1 +
 .../aurora/components/input/text-input.sass   |  83 +++++++++++
 .../js/aurora/components/input/text-input.tsx | 105 +++++++++++++
 app/src/js/aurora/components/link/index.ts    |   1 +
 app/src/js/aurora/components/link/link.sass   |  14 ++
 app/src/js/aurora/components/link/link.tsx    |  21 +++
 app/src/js/aurora/components/lists/index.ts   |   3 +
 .../components/lists/list-header/index.ts     |   1 +
 .../lists/list-header/list-header.tsx         |  21 +++
 .../components/lists/list-item/index.ts       |   1 +
 .../components/lists/list-item/list-item.tsx  |  39 +++++
 .../js/aurora/components/lists/list/index.ts  |   1 +
 .../js/aurora/components/lists/list/list.sass |  54 +++++++
 .../js/aurora/components/lists/list/list.tsx  |  11 ++
 app/src/js/aurora/components/loader/index.ts  |   1 +
 .../js/aurora/components/loader/loader.sass   |  29 ++++
 .../js/aurora/components/loader/loader.tsx    |  20 +++
 .../js/aurora/components/progress/index.ts    |   1 +
 .../aurora/components/progress/progress.sass  |  34 +++++
 .../aurora/components/progress/progress.tsx   |  32 ++++
 app/src/js/aurora/components/radios/index.ts  |   2 +
 .../components/radios/radio-group/index.ts    |   1 +
 .../radios/radio-group/radio-group.sass       |  50 +++++++
 .../radios/radio-group/radio-group.tsx        |  32 ++++
 .../aurora/components/radios/radio/index.ts   |   1 +
 .../aurora/components/radios/radio/radio.tsx  |  22 +++
 .../components/scroll-container/index.ts      |   1 +
 .../scroll-container/scroll-container.sass    |  31 ++++
 .../scroll-container/scroll-container.tsx     |  34 +++++
 app/src/js/aurora/components/selects/index.ts |   2 +
 .../components/selects/select-option/index.ts |   1 +
 .../selects/select-option/select-option.tsx   |  19 +++
 .../aurora/components/selects/select/index.ts |   1 +
 .../components/selects/select/select.sass     |  78 ++++++++++
 .../components/selects/select/select.tsx      |  72 +++++++++
 app/src/js/aurora/components/slider/index.ts  |   1 +
 .../js/aurora/components/slider/slider.sass   |  70 +++++++++
 .../js/aurora/components/slider/slider.tsx    |  89 +++++++++++
 app/src/js/aurora/components/status/index.ts  |   1 +
 .../js/aurora/components/status/status.sass   |  62 ++++++++
 .../js/aurora/components/status/status.tsx    |  43 ++++++
 app/src/js/aurora/components/switch/index.ts  |   1 +
 .../js/aurora/components/switch/switch.sass   |  48 ++++++
 .../js/aurora/components/switch/switch.tsx    |  44 ++++++
 app/src/js/aurora/components/tabs/index.ts    |   4 +
 .../components/tabs/tab-content/index.ts      |   1 +
 .../tabs/tab-content/tab-content.tsx          |  15 ++
 .../aurora/components/tabs/tab-group/index.ts |   1 +
 .../components/tabs/tab-group/tab-group.sass  |  38 +++++
 .../components/tabs/tab-group/tab-group.tsx   |  25 ++++
 .../aurora/components/tabs/tab-list/index.ts  |   1 +
 .../components/tabs/tab-list/tab-list.tsx     |  19 +++
 .../js/aurora/components/tabs/tab/index.ts    |   1 +
 app/src/js/aurora/components/tabs/tab/tab.tsx |  13 ++
 app/src/js/aurora/components/text/index.ts    |   1 +
 app/src/js/aurora/components/text/text.sass   |  42 ++++++
 app/src/js/aurora/components/text/text.tsx    |  47 ++++++
 .../aurora/components/widget-wrapper/index.ts |   1 +
 .../widget-wrapper/widget-wrapper.sass        |  23 +++
 .../widget-wrapper/widget-wrapper.tsx         |  36 +++++
 app/src/js/aurora/index.ts                    |   3 +
 app/src/js/aurora/lib/types.ts                |  20 +++
 app/src/js/aurora/lib/utils.ts                |   0
 .../aurora/styles/_includes/animations.sass   |   5 +
 .../js/aurora/styles/_includes/variables.sass | 139 ++++++++++++++++++
 app/src/js/aurora/styles/main.sass            |  21 +++
 app/src/js/client.js                          |   2 +-
 core/skills-endpoints.json                    | 101 +++++++------
 package.json                                  |   3 +
 .../widget-playground/src/actions/run.ts      |  12 +-
 96 files changed, 2681 insertions(+), 64 deletions(-)
 delete mode 100644 app/src/js/aurora/button.tsx
 create mode 100644 app/src/js/aurora/components/button/button.sass
 create mode 100644 app/src/js/aurora/components/button/button.tsx
 create mode 100644 app/src/js/aurora/components/button/index.ts
 create mode 100644 app/src/js/aurora/components/card/card.sass
 create mode 100644 app/src/js/aurora/components/card/card.tsx
 create mode 100644 app/src/js/aurora/components/card/index.ts
 create mode 100644 app/src/js/aurora/components/checkbox/checkbox.sass
 create mode 100644 app/src/js/aurora/components/checkbox/checkbox.tsx
 create mode 100644 app/src/js/aurora/components/checkbox/index.ts
 create mode 100644 app/src/js/aurora/components/circular-progress/circular-progress.sass
 create mode 100644 app/src/js/aurora/components/circular-progress/circular-progress.tsx
 create mode 100644 app/src/js/aurora/components/circular-progress/index.ts
 create mode 100644 app/src/js/aurora/components/flexbox/flexbox.sass
 create mode 100644 app/src/js/aurora/components/flexbox/flexbox.tsx
 create mode 100644 app/src/js/aurora/components/flexbox/index.ts
 create mode 100644 app/src/js/aurora/components/icon-button/icon-button.sass
 create mode 100644 app/src/js/aurora/components/icon-button/icon-button.tsx
 create mode 100644 app/src/js/aurora/components/icon-button/index.ts
 create mode 100644 app/src/js/aurora/components/icon/icon.sass
 create mode 100644 app/src/js/aurora/components/icon/icon.tsx
 create mode 100644 app/src/js/aurora/components/icon/index.ts
 create mode 100644 app/src/js/aurora/components/image/image.sass
 create mode 100644 app/src/js/aurora/components/image/image.tsx
 create mode 100644 app/src/js/aurora/components/image/index.ts
 create mode 100644 app/src/js/aurora/components/index.ts
 create mode 100644 app/src/js/aurora/components/input/index.ts
 create mode 100644 app/src/js/aurora/components/input/text-input.sass
 create mode 100644 app/src/js/aurora/components/input/text-input.tsx
 create mode 100644 app/src/js/aurora/components/link/index.ts
 create mode 100644 app/src/js/aurora/components/link/link.sass
 create mode 100644 app/src/js/aurora/components/link/link.tsx
 create mode 100644 app/src/js/aurora/components/lists/index.ts
 create mode 100644 app/src/js/aurora/components/lists/list-header/index.ts
 create mode 100644 app/src/js/aurora/components/lists/list-header/list-header.tsx
 create mode 100644 app/src/js/aurora/components/lists/list-item/index.ts
 create mode 100644 app/src/js/aurora/components/lists/list-item/list-item.tsx
 create mode 100644 app/src/js/aurora/components/lists/list/index.ts
 create mode 100644 app/src/js/aurora/components/lists/list/list.sass
 create mode 100644 app/src/js/aurora/components/lists/list/list.tsx
 create mode 100644 app/src/js/aurora/components/loader/index.ts
 create mode 100644 app/src/js/aurora/components/loader/loader.sass
 create mode 100644 app/src/js/aurora/components/loader/loader.tsx
 create mode 100644 app/src/js/aurora/components/progress/index.ts
 create mode 100644 app/src/js/aurora/components/progress/progress.sass
 create mode 100644 app/src/js/aurora/components/progress/progress.tsx
 create mode 100644 app/src/js/aurora/components/radios/index.ts
 create mode 100644 app/src/js/aurora/components/radios/radio-group/index.ts
 create mode 100644 app/src/js/aurora/components/radios/radio-group/radio-group.sass
 create mode 100644 app/src/js/aurora/components/radios/radio-group/radio-group.tsx
 create mode 100644 app/src/js/aurora/components/radios/radio/index.ts
 create mode 100644 app/src/js/aurora/components/radios/radio/radio.tsx
 create mode 100644 app/src/js/aurora/components/scroll-container/index.ts
 create mode 100644 app/src/js/aurora/components/scroll-container/scroll-container.sass
 create mode 100644 app/src/js/aurora/components/scroll-container/scroll-container.tsx
 create mode 100644 app/src/js/aurora/components/selects/index.ts
 create mode 100644 app/src/js/aurora/components/selects/select-option/index.ts
 create mode 100644 app/src/js/aurora/components/selects/select-option/select-option.tsx
 create mode 100644 app/src/js/aurora/components/selects/select/index.ts
 create mode 100644 app/src/js/aurora/components/selects/select/select.sass
 create mode 100644 app/src/js/aurora/components/selects/select/select.tsx
 create mode 100644 app/src/js/aurora/components/slider/index.ts
 create mode 100644 app/src/js/aurora/components/slider/slider.sass
 create mode 100644 app/src/js/aurora/components/slider/slider.tsx
 create mode 100644 app/src/js/aurora/components/status/index.ts
 create mode 100644 app/src/js/aurora/components/status/status.sass
 create mode 100644 app/src/js/aurora/components/status/status.tsx
 create mode 100644 app/src/js/aurora/components/switch/index.ts
 create mode 100644 app/src/js/aurora/components/switch/switch.sass
 create mode 100644 app/src/js/aurora/components/switch/switch.tsx
 create mode 100644 app/src/js/aurora/components/tabs/index.ts
 create mode 100644 app/src/js/aurora/components/tabs/tab-content/index.ts
 create mode 100644 app/src/js/aurora/components/tabs/tab-content/tab-content.tsx
 create mode 100644 app/src/js/aurora/components/tabs/tab-group/index.ts
 create mode 100644 app/src/js/aurora/components/tabs/tab-group/tab-group.sass
 create mode 100644 app/src/js/aurora/components/tabs/tab-group/tab-group.tsx
 create mode 100644 app/src/js/aurora/components/tabs/tab-list/index.ts
 create mode 100644 app/src/js/aurora/components/tabs/tab-list/tab-list.tsx
 create mode 100644 app/src/js/aurora/components/tabs/tab/index.ts
 create mode 100644 app/src/js/aurora/components/tabs/tab/tab.tsx
 create mode 100644 app/src/js/aurora/components/text/index.ts
 create mode 100644 app/src/js/aurora/components/text/text.sass
 create mode 100644 app/src/js/aurora/components/text/text.tsx
 create mode 100644 app/src/js/aurora/components/widget-wrapper/index.ts
 create mode 100644 app/src/js/aurora/components/widget-wrapper/widget-wrapper.sass
 create mode 100644 app/src/js/aurora/components/widget-wrapper/widget-wrapper.tsx
 create mode 100644 app/src/js/aurora/index.ts
 create mode 100644 app/src/js/aurora/lib/types.ts
 create mode 100644 app/src/js/aurora/lib/utils.ts
 create mode 100644 app/src/js/aurora/styles/_includes/animations.sass
 create mode 100644 app/src/js/aurora/styles/_includes/variables.sass
 create mode 100644 app/src/js/aurora/styles/main.sass

diff --git a/app/src/js/aurora/button.tsx b/app/src/js/aurora/button.tsx
deleted file mode 100644
index 8e428e55..00000000
--- a/app/src/js/aurora/button.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type React from 'react'
-
-interface Props {
-  children: React.ReactNode
-}
-
-export function Button({ children }: Props) {
-  return <button>{children}</button>
-}
diff --git a/app/src/js/aurora/components/button/button.sass b/app/src/js/aurora/components/button/button.sass
new file mode 100644
index 00000000..9cb907e9
--- /dev/null
+++ b/app/src/js/aurora/components/button/button.sass
@@ -0,0 +1,61 @@
+@import '../../styles/main.sass'
+
+.aurora-button
+  position: relative
+  display: inline-block
+  font-size: var(--a-font-size-md)
+  line-height: var(--a-line-height-md)
+  font-weight: var(--a-font-weight-semi-bold)
+  border-radius: var(--a-border-radius-md)
+  height: var(--a-button-size-md)
+  border: none
+  cursor: pointer
+  padding: 0 var(--a-space-lg)
+  box-shadow: 0 0 10px 2px transparent
+  transition: opacity var(--a-transition-duration-main) var(--a-transition-timing-main), transform var(--a-transition-duration-main), background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main), color var(--a-transition-duration-main) var(--a-transition-timing-main), box-shadow var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &:hover:not(&--disabled, &--loading)
+    transform: scale3d(1.01, 1.01, 1.01)
+  &:active:not(&--disabled, &--loading)
+    transform: scale3d(.96, .96, .96)
+
+  &--primary
+    color: var(--a-color-text)
+    background-color: var(--a-color-accent)
+    &:hover:not(.aurora-button--disabled, .aurora-button--loading)
+      background-color: var(--a-color-accent-hover)
+
+  &--secondary
+    background-color: transparent
+    color: var(--a-color-accent)
+    border: 1px solid var(--a-color-accent)
+    &:hover:not(.aurora-button--disabled, .aurora-button--loading), &:hover:not(.aurora-button--disabled, .aurora-button--loading) .aurora-icon
+      border-color: var(--a-color-accent-hover)
+      color: var(--a-color-accent-hover)
+    .aurora-icon
+      color: var(--a-color-accent)
+
+  &--danger
+    background-color: var(--a-color-background-danger)
+    color: var(--a-color-text-danger)
+    &:hover:not(.aurora-button--disabled, .aurora-button--loading)
+      background-color: var(--a-color-danger-hover)
+
+  &--light
+    background-color: transparent
+    color: var(--a-color-accent)
+    &:hover:not(.aurora-button--disabled, .aurora-button--loading), &:hover:not(.aurora-button--disabled, .aurora-button--loading) .aurora-icon
+      color: var(--a-color-accent-hover)
+    .aurora-icon
+      color: var(--a-color-accent)
+
+  &--disabled
+    opacity: var(--a-opacity-disabled)
+    cursor: not-allowed
+
+  &--loading
+    opacity: var(--a-opacity-disabled)
+    cursor: wait
+
+  .aurora-loader
+    &::before, &::after
+      background-color: var(--a-color-white)
diff --git a/app/src/js/aurora/components/button/button.tsx b/app/src/js/aurora/components/button/button.tsx
new file mode 100644
index 00000000..8b113e54
--- /dev/null
+++ b/app/src/js/aurora/components/button/button.tsx
@@ -0,0 +1,85 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import { Flexbox, Icon, Loader } from '..'
+
+import './button.sass'
+
+interface Props {
+  children?: React.ReactNode
+  type?: 'button' | 'submit' | 'reset'
+  iconName?: string
+  iconPosition?: 'left' | 'right'
+  secondary?: boolean
+  danger?: boolean
+  light?: boolean
+  disabled?: boolean
+  loading?: boolean
+  onClick?: () => void
+}
+
+export function Button({
+  children,
+  type = 'button',
+  iconName,
+  iconPosition = 'left',
+  secondary,
+  danger,
+  light,
+  disabled,
+  loading,
+  onClick
+}: Props) {
+  let variant = 'primary'
+
+  if (secondary) {
+    variant = 'secondary'
+  } else if (danger) {
+    variant = 'danger'
+  } else if (light) {
+    variant = 'light'
+  }
+
+  return (
+    <button
+      type={type}
+      className={classNames('aurora-button', {
+        'aurora-button--disabled': disabled,
+        'aurora-button--loading': loading,
+        [`aurora-button--${variant}`]: variant
+      })}
+      disabled={disabled || loading}
+      onClick={onClick}
+    >
+      {loading ? (
+        <Loader />
+      ) : (
+        <>
+          {iconName && iconPosition === 'left' && (
+            <Flexbox
+              flexDirection="row"
+              justifyContent="center"
+              alignItems="center"
+              gap="xs"
+            >
+              <Icon name={iconName} type="line" />
+              {children}
+            </Flexbox>
+          )}
+          {iconName && iconPosition === 'right' && (
+            <Flexbox
+              flexDirection="row"
+              justifyContent="center"
+              alignItems="center"
+              gap="xs"
+            >
+              {children}
+              <Icon name={iconName} type="line" />
+            </Flexbox>
+          )}
+          {!iconName && children}
+        </>
+      )}
+    </button>
+  )
+}
diff --git a/app/src/js/aurora/components/button/index.ts b/app/src/js/aurora/components/button/index.ts
new file mode 100644
index 00000000..14757e72
--- /dev/null
+++ b/app/src/js/aurora/components/button/index.ts
@@ -0,0 +1 @@
+export * from './button'
diff --git a/app/src/js/aurora/components/card/card.sass b/app/src/js/aurora/components/card/card.sass
new file mode 100644
index 00000000..c870f935
--- /dev/null
+++ b/app/src/js/aurora/components/card/card.sass
@@ -0,0 +1,12 @@
+@import '../../styles/main.sass'
+
+.aurora-card
+  position: relative
+  display: inline-block
+  width: auto
+  padding: var(--a-space-md)
+  background-color: var(--a-color-background-surface-secondary)
+  border-radius: var(--a-border-radius-md)
+
+  &--full-width
+    width: 100%
diff --git a/app/src/js/aurora/components/card/card.tsx b/app/src/js/aurora/components/card/card.tsx
new file mode 100644
index 00000000..52ac1435
--- /dev/null
+++ b/app/src/js/aurora/components/card/card.tsx
@@ -0,0 +1,21 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import './card.sass'
+
+interface Props {
+  children: React.ReactNode
+  fullWidth?: boolean
+}
+
+export function Card({ children, fullWidth }: Props) {
+  return (
+    <div
+      className={classNames('aurora-card', {
+        'aurora-card--full-width': fullWidth
+      })}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/card/index.ts b/app/src/js/aurora/components/card/index.ts
new file mode 100644
index 00000000..efb32937
--- /dev/null
+++ b/app/src/js/aurora/components/card/index.ts
@@ -0,0 +1 @@
+export * from './card'
diff --git a/app/src/js/aurora/components/checkbox/checkbox.sass b/app/src/js/aurora/components/checkbox/checkbox.sass
new file mode 100644
index 00000000..d2cc89d7
--- /dev/null
+++ b/app/src/js/aurora/components/checkbox/checkbox.sass
@@ -0,0 +1,40 @@
+@import '../../styles/main.sass'
+
+.aurora-checkbox
+  display: flex
+  align-items: center
+  gap: var(--a-space-sm)
+  cursor: pointer
+  &[data-disabled]
+    cursor: not-allowed
+
+.aurora-checkbox-placeholder
+  width: var(--a-checkbox-radio-size)
+  height: var(--a-checkbox-radio-size)
+
+.aurora-checkbox-control
+  display: flex
+  justify-content: center
+  align-items: center
+  width: var(--a-checkbox-radio-size)
+  height: var(--a-checkbox-radio-size)
+  border-radius: var(--a-border-radius-xs)
+  border: 1px solid var(--a-color-input-border)
+  background-color: var(--a-color-input-background)
+  transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+
+  &[data-hover]:not([data-checked])
+    border-color: var(--a-color-input-border-hover)
+    background-color: var(--a-color-input-background-hover)
+  &[data-checked]
+    border-color: transparent
+    background-color: var(--a-color-input-border-focus)
+  &[data-disabled]
+    opacity: var(--a-opacity-disabled)
+
+.aurora-checkbox-label
+  color: var(--a-color-text)
+  font-size: var(--a-font-size-md)
+  &[data-disabled]
+    opacity: var(--a-opacity-disabled)
+    color: inherit
diff --git a/app/src/js/aurora/components/checkbox/checkbox.tsx b/app/src/js/aurora/components/checkbox/checkbox.tsx
new file mode 100644
index 00000000..143a1ffd
--- /dev/null
+++ b/app/src/js/aurora/components/checkbox/checkbox.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import {
+  Checkbox as ArkCheckbox,
+  CheckboxLabel,
+  CheckboxInput,
+  CheckboxControl,
+  type CheckboxProps
+} from '@ark-ui/react'
+
+import { Icon } from '../icon'
+
+import './checkbox.sass'
+
+interface Props
+  extends Pick<CheckboxProps, 'value' | 'checked' | 'disabled' | 'onChange'> {
+  label?: string
+}
+
+export function Checkbox({ label, checked, value, disabled, onChange }: Props) {
+  const [isChecked, setIsChecked] = useState(checked)
+
+  return (
+    <ArkCheckbox
+      className="aurora-checkbox"
+      value={value}
+      checked={isChecked}
+      disabled={disabled}
+      onChange={(e) => {
+        setIsChecked(e.checked)
+
+        if (onChange) {
+          onChange(e)
+        }
+      }}
+    >
+      {(state) => (
+        <>
+          <CheckboxInput />
+          <CheckboxControl className="aurora-checkbox-control">
+            {state.isChecked ? (
+              <Icon name="check" size="sm" animated />
+            ) : (
+              <div className="aurora-checkbox-placeholder" />
+            )}
+          </CheckboxControl>
+          <CheckboxLabel className="aurora-checkbox-label">
+            {label}
+          </CheckboxLabel>
+        </>
+      )}
+    </ArkCheckbox>
+  )
+}
diff --git a/app/src/js/aurora/components/checkbox/index.ts b/app/src/js/aurora/components/checkbox/index.ts
new file mode 100644
index 00000000..31d76895
--- /dev/null
+++ b/app/src/js/aurora/components/checkbox/index.ts
@@ -0,0 +1 @@
+export * from './checkbox'
diff --git a/app/src/js/aurora/components/circular-progress/circular-progress.sass b/app/src/js/aurora/components/circular-progress/circular-progress.sass
new file mode 100644
index 00000000..cc7b82fb
--- /dev/null
+++ b/app/src/js/aurora/components/circular-progress/circular-progress.sass
@@ -0,0 +1,28 @@
+.aurora-circular-progress
+  position: relative
+
+  &--sm
+    width: 64px
+    height: 64px
+  &--md
+    width: 128px
+    height: 128px
+  &--lg
+    width: 256px
+    height: 256px
+
+  path
+    transition: stroke-dashoffset var(--a-transition-duration-main) var(--a-transition-timing-main)
+    &:nth-child(1)
+      stroke: var(--a-color-background-surface-secondary)
+      stroke-width: 32px
+    &:nth-child(2)
+      stroke: var(--a-color-accent)
+      stroke-width: 12px
+      stroke-linecap: round
+
+.aurora-circular-progress-content
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
diff --git a/app/src/js/aurora/components/circular-progress/circular-progress.tsx b/app/src/js/aurora/components/circular-progress/circular-progress.tsx
new file mode 100644
index 00000000..1dcb9dc6
--- /dev/null
+++ b/app/src/js/aurora/components/circular-progress/circular-progress.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import { type Size } from '../../lib/types'
+
+import './circular-progress.sass'
+
+interface Props {
+  value: number
+  children?: React.ReactNode
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function CircularProgress({ value, children, size = 'md' }: Props) {
+  const total = 100
+
+  return (
+    <div
+      className={classNames('aurora-circular-progress', {
+        [`aurora-circular-progress--${size}`]: size
+      })}
+    >
+      <svg viewBox="0 0 276 276" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M138 16C154.021 16 169.886 19.1556 184.687 25.2867C199.489 31.4178 212.938 40.4042 224.267 51.733C235.596 63.0617 244.582 76.5109 250.713 91.3126C256.844 106.114 260 121.979 260 138C260 154.021 256.844 169.886 250.713 184.687C244.582 199.489 235.596 212.938 224.267 224.267C212.938 235.596 199.489 244.582 184.687 250.713C169.886 256.844 154.021 260 138 260C121.979 260 106.114 256.844 91.3126 250.713C76.5109 244.582 63.0617 235.596 51.7329 224.267C40.4042 212.938 31.4177 199.489 25.2867 184.687C19.1556 169.886 16 154.021 16 138C16 121.979 19.1556 106.114 25.2867 91.3126C31.4178 76.5108 40.4043 63.0617 51.733 51.7329C63.0618 40.4042 76.511 31.4177 91.3127 25.2867C106.114 19.1556 121.979 16 138 16L138 16Z" />
+        <path
+          pathLength={total}
+          strokeDasharray={total}
+          strokeDashoffset={total - value}
+          d="M138 16C154.021 16 169.886 19.1556 184.687 25.2867C199.489 31.4178 212.938 40.4042 224.267 51.733C235.596 63.0617 244.582 76.5109 250.713 91.3126C256.844 106.114 260 121.979 260 138C260 154.021 256.844 169.886 250.713 184.687C244.582 199.489 235.596 212.938 224.267 224.267C212.938 235.596 199.489 244.582 184.687 250.713C169.886 256.844 154.021 260 138 260C121.979 260 106.114 256.844 91.3126 250.713C76.5109 244.582 63.0617 235.596 51.7329 224.267C40.4042 212.938 31.4177 199.489 25.2867 184.687C19.1556 169.886 16 154.021 16 138C16 121.979 19.1556 106.114 25.2867 91.3126C31.4178 76.5108 40.4043 63.0617 51.733 51.7329C63.0618 40.4042 76.511 31.4177 91.3127 25.2867C106.114 19.1556 121.979 16 138 16L138 16Z"
+        />
+      </svg>
+      <div className="aurora-circular-progress-content">{children}</div>
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/circular-progress/index.ts b/app/src/js/aurora/components/circular-progress/index.ts
new file mode 100644
index 00000000..985e8a5d
--- /dev/null
+++ b/app/src/js/aurora/components/circular-progress/index.ts
@@ -0,0 +1 @@
+export * from './circular-progress'
diff --git a/app/src/js/aurora/components/flexbox/flexbox.sass b/app/src/js/aurora/components/flexbox/flexbox.sass
new file mode 100644
index 00000000..872e3a21
--- /dev/null
+++ b/app/src/js/aurora/components/flexbox/flexbox.sass
@@ -0,0 +1,92 @@
+@import '../../styles/main.sass'
+
+.aurora-flexbox
+  position: relative
+  display: flex
+  flex-direction: column
+  height: 100%
+
+  &--padding
+    padding: var(--a-space-xl) var(--a-space-md)
+  &--padding-x
+    padding-left: var(--a-space-md)
+    padding-right: var(--a-space-md)
+  &--padding-y
+    padding-top: var(--a-space-xl)
+    padding-bottom: var(--a-space-xl)
+
+  &--full-width
+    width: 100%
+
+  &--flex
+    display: flex
+  &--inline-flex
+    display: inline-flex
+
+  &--row
+    flex-direction: row
+  &--row-reverse
+    flex-direction: row-reverse
+  &--column
+    flex-direction: column
+  &--column-reverse
+    flex-direction: column-reverse
+
+  &--align-flex-start
+    align-items: flex-start
+  &--align-center
+    align-items: center
+  &--align-flex-end
+    align-items: flex-end
+  &--align-stretch
+    align-items: stretch
+  &--align-baseline
+    align-items: baseline
+
+  &--justify-flex-start
+    justify-content: flex-start
+  &--justify-center
+    justify-content: center
+  &--justify-flex-end
+    justify-content: flex-end
+  &--justify-space-between
+    justify-content: space-between
+  &--justify-space-around
+    justify-content: space-around
+  &--justify-space-evenly
+    justify-content: space-evenly
+  &--justify-stretch
+    justify-content: stretch
+
+  &--gap-xs
+    gap: var(--a-space-xs)
+  &--gap-sm
+    gap: var(--a-space-sm)
+  &--gap-md
+    gap: var(--a-space-md)
+  &--gap-lg
+    gap: var(--a-space-lg)
+  &--gap-xl
+    gap: var(--a-space-xl)
+
+  &--row-gap-xs
+    row-gap: var(--a-space-xs)
+  &--row-gap-sm
+    row-gap: var(--a-space-sm)
+  &--row-gap-md
+    row-gap: var(--a-space-md)
+  &--row-gap-lg
+    row-gap: var(--a-space-lg)
+  &--row-gap-xl
+    row-gap: var(--a-space-xl)
+
+  &--column-gap-xs
+    column-gap: var(--a-space-xs)
+  &--column-gap-sm
+    column-gap: var(--a-space-sm)
+  &--column-gap-md
+    column-gap: var(--a-space-md)
+  &--column-gap-lg
+    column-gap: var(--a-space-lg)
+  &--column-gap-xl
+    column-gap: var(--a-space-xl)
diff --git a/app/src/js/aurora/components/flexbox/flexbox.tsx b/app/src/js/aurora/components/flexbox/flexbox.tsx
new file mode 100644
index 00000000..a04413b5
--- /dev/null
+++ b/app/src/js/aurora/components/flexbox/flexbox.tsx
@@ -0,0 +1,63 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import { type Size } from '../../lib/types'
+
+import './flexbox.sass'
+
+interface Props {
+  children: React.ReactNode
+  fullWidth?: boolean
+  display?: 'flex' | 'inline-flex'
+  alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch'
+  justifyContent?:
+    | 'center'
+    | 'flex-start'
+    | 'flex-end'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+    | 'stretch'
+  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
+  gap?: Size
+  rowGap?: Size
+  columnGap?: Size
+  padding?: boolean
+  paddingX?: boolean
+  paddingY?: boolean
+}
+
+export function Flexbox({
+  children,
+  fullWidth,
+  display,
+  alignItems,
+  justifyContent,
+  flexDirection,
+  gap,
+  rowGap,
+  columnGap,
+  padding,
+  paddingX,
+  paddingY
+}: Props) {
+  return (
+    <div
+      className={classNames('aurora-flexbox', {
+        'aurora-flexbox--full-width': fullWidth,
+        'aurora-flexbox--padding': padding,
+        'aurora-flexbox--padding-x': paddingX,
+        'aurora-flexbox--padding-y': paddingY,
+        [`aurora-flexbox--${display}`]: display,
+        [`aurora-flexbox--align-${alignItems}`]: alignItems,
+        [`aurora-flexbox--justify-${justifyContent}`]: justifyContent,
+        [`aurora-flexbox--${flexDirection}`]: flexDirection,
+        [`aurora-flexbox--gap-${gap}`]: gap,
+        [`aurora-flexbox--row-gap-${rowGap}`]: rowGap,
+        [`aurora-flexbox--column-gap-${columnGap}`]: columnGap
+      })}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/flexbox/index.ts b/app/src/js/aurora/components/flexbox/index.ts
new file mode 100644
index 00000000..b258a661
--- /dev/null
+++ b/app/src/js/aurora/components/flexbox/index.ts
@@ -0,0 +1 @@
+export * from './flexbox'
diff --git a/app/src/js/aurora/components/icon-button/icon-button.sass b/app/src/js/aurora/components/icon-button/icon-button.sass
new file mode 100644
index 00000000..de439191
--- /dev/null
+++ b/app/src/js/aurora/components/icon-button/icon-button.sass
@@ -0,0 +1,70 @@
+@import '../../styles/main.sass'
+
+.aurora-icon-button
+  position: relative
+  width: var(--a-button-size-md)
+  height: var(--a-button-size-md)
+  display: flex
+  align-items: center
+  justify-content: center
+  padding: 0
+  text-align: center
+  &.aurora-button:hover:not(.aurora-button--disabled, .aurora-button--loading)
+    transform: scale3d(1.03, 1.03, 1.03)
+  &.aurora-button:active:not(.aurora-button--disabled, .aurora-button--loading)
+    transform: scale3d(.96, .96, .96)
+  &.aurora-button.aurora-button--light:hover:not(.aurora-button--disabled, .aurora-button--loading)
+    transform: scale3d(1.06, 1.06, 1.06)
+  &.aurora-button.aurora-button--light:active:not(.aurora-button--disabled, .aurora-button--loading)
+    transform: scale3d(.96, .96, .96)
+
+  &--square
+    width: var(--a-button-size-md)
+    height: var(--a-button-size-md)
+    border-radius: var(--a-border-radius-md)
+  &--circle
+    width: var(--a-button-size-md)
+    height: var(--a-button-size-md)
+    border-radius: 50%
+
+  &--xs
+    width: 22px
+    height: 22px
+  &--sm
+    width: 30px
+    height: 30px
+  &--md
+    width: var(--a-button-size-md)
+    height: var(--a-button-size-md)
+  &--lg
+    width: 56px
+    height: 56px
+  &--xl
+    width: 96px
+    height: 96px
+  &--xxl
+    width: 164px
+    height: 164px
+
+  &.aurora-button--light .aurora-icon
+    color: var(--a-color-text)
+
+  &.aurora-button--secondary:hover, &.aurora-button--light:hover
+    background-color: transparent
+
+
+  &.aurora-button--light:hover .aurora-icon
+    color: var(--a-color-text)
+
+  &.aurora-button--light.aurora-button--secondary
+    background-color: transparent
+    border: none
+    .aurora-icon
+      color: var(--a-color-white-secondary)
+    &:hover:not(.aurora-button--disabled, .aurora-button--loading) .aurora-icon
+      color: var(--a-color-text)
+    &:hover.aurora-icon-button--activated .aurora-icon
+      color: var(--a-color-accent)
+
+  &.aurora-button--light.aurora-icon-button--activated .aurora-icon
+    color: var(--a-color-accent)
diff --git a/app/src/js/aurora/components/icon-button/icon-button.tsx b/app/src/js/aurora/components/icon-button/icon-button.tsx
new file mode 100644
index 00000000..69030edc
--- /dev/null
+++ b/app/src/js/aurora/components/icon-button/icon-button.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+
+import { Icon, Loader } from '..'
+import { type Props as IconProps } from '../icon'
+
+import './icon-button.sass'
+
+interface Props {
+  name: string
+  type?: 'button' | 'submit' | 'reset'
+  iconType?: IconProps['type']
+  size?: IconProps['size']
+  shape?: IconProps['bgShape']
+  activated?: boolean
+  secondary?: boolean
+  danger?: boolean
+  light?: boolean
+  disabled?: boolean
+  loading?: boolean
+  onClick?: (isActivated: boolean) => void
+}
+
+export function IconButton({
+  name,
+  type = 'button',
+  iconType = 'line',
+  size,
+  shape,
+  activated,
+  secondary,
+  danger,
+  light,
+  disabled,
+  loading,
+  onClick
+}: Props) {
+  const [isActivated, setIsActivated] = useState(activated || false)
+
+  let variant = 'primary'
+
+  if (danger) {
+    variant = 'danger'
+  }
+
+  return (
+    <button
+      type={type}
+      className={classNames('aurora-icon-button aurora-button', {
+        'aurora-button--secondary': secondary,
+        'aurora-button--light': light,
+        'aurora-button--disabled': disabled,
+        'aurora-button--loading': loading,
+        'aurora-icon-button--activated': isActivated,
+        [`aurora-button--${variant}`]: variant,
+        [`aurora-icon-button--${size}`]: size,
+        [`aurora-icon-button--${shape}`]: shape
+      })}
+      disabled={disabled || loading}
+      onClick={() => {
+        if (onClick) {
+          if (typeof activated === 'undefined') {
+            onClick(false)
+          } else {
+            const newActivatedState = !isActivated
+
+            setIsActivated(newActivatedState)
+            onClick(newActivatedState)
+          }
+        }
+      }}
+    >
+      {loading ? (
+        <Loader />
+      ) : (
+        <>
+          <Icon type={iconType} name={name} size={size} />
+        </>
+      )}
+    </button>
+  )
+}
diff --git a/app/src/js/aurora/components/icon-button/index.ts b/app/src/js/aurora/components/icon-button/index.ts
new file mode 100644
index 00000000..876ec6f0
--- /dev/null
+++ b/app/src/js/aurora/components/icon-button/index.ts
@@ -0,0 +1 @@
+export * from './icon-button'
diff --git a/app/src/js/aurora/components/icon/icon.sass b/app/src/js/aurora/components/icon/icon.sass
new file mode 100644
index 00000000..29c30297
--- /dev/null
+++ b/app/src/js/aurora/components/icon/icon.sass
@@ -0,0 +1,115 @@
+@import '../../styles/main.sass'
+
+.aurora-icon
+  position: relative
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  border-radius: var(--a-border-radius-xs)
+  color: var(--a-color-white)
+  font-size: var(--a-font-size-md)
+  background-color: transparent
+  padding: var(--a-space-xs)
+  transition: opacity var(--a-transition-duration-main) var(--a-transition-timing-main), color var(--a-transition-duration-main) var(--a-transition-timing-main), background-color var(--a-transition-duration-main) var(--a-transition-timing-main), transform var(--a-transition-duration-main) var(--a-transition-timing-main)
+
+  &--animated
+    opacity: 0
+    animation: aurora-animation-fade-in var(--a-transition-duration-main) var(--a-transition-timing-main) var(--a-transition-duration-main) forwards
+
+  &--xs
+    width: 12px
+    height: 12px
+    font-size: var(--a-font-size-xs)
+    border-radius: var(--a-border-radius-xs)
+  &--sm
+    width: 20px
+    height: 20px
+    font-size: var(--a-font-size-sm)
+    border-radius: var(--a-border-radius-xs)
+  &--md
+    width: 28px
+    height: 28px
+    font-size: var(--a-font-size-md)
+    border-radius: var(--a-border-radius-xs)
+  &--lg
+    width: 56px
+    height: 56px
+    font-size: var(--a-font-size-lg)
+    border-radius: var(--a-border-radius-md)
+  &--xl
+    width: 96px
+    height: 96px
+    font-size: var(--a-font-size-xl)
+    border-radius: var(--a-border-radius-md)
+  &--xxl
+    width: 128px
+    height: 128px
+    font-size: var(--a-font-size-xxl)
+    border-radius: var(--a-border-radius-md)
+
+  &--square
+    border-radius: var(--a-border-radius-xs)
+  &--circle
+    border-radius: var(--a-border-radius-circle)
+
+  &--white
+    color: var(--a-color-white)
+  &--transparent-white
+    color: var(--a-color-transparent-white)
+  &--black
+    color: var(--a-color-black)
+  &--blue
+    color: var(--a-color-blue)
+  &--secondary-blue
+    color: var(--a-color-secondary-blue)
+  &--transparent-blue
+    color: var(--a-color-transparent-blue)
+  &--red
+    color: var(--a-color-red)
+  &--secondary-red
+    color: var(--a-color-secondary-red)
+  &--transparent-red
+    color: var(--a-color-transparent-red)
+  &--green
+    color: var(--a-color-green)
+  &--secondary-green
+    color: var(--a-color-secondary-green)
+  &--transparent-green
+    color: var(--a-color-transparent-green)
+  &--yellow
+    color: var(--a-color-yellow)
+  &--secondary-yellow
+    color: var(--a-color-secondary-yellow)
+  &--transparent-yellow
+    color: var(--a-color-transparent-yellow)
+
+  &--bg-white
+    background-color: var(--a-color-white)
+  &--bg-transparent-white
+    background-color: var(--a-color-transparent-white)
+  &--bg-black
+    background-color: var(--a-color-black)
+  &--bg-blue
+    background-color: var(--a-color-blue)
+  &--bg-secondary-blue
+    background-color: var(--a-color-secondary-blue)
+  &--bg-transparent-blue
+    background-color: var(--a-color-transparent-blue)
+  &--bg-red
+    background-color: var(--a-color-red)
+  &--bg-secondary-red
+    background-color: var(--a-color-secondary-red)
+  &--bg-transparent-red
+    background-color: var(--a-color-transparent-red)
+  &--bg-green
+    background-color: var(--a-color-green)
+  &--bg-secondary-green
+    background-color: var(--a-color-secondary-green)
+  &--bg-transparent-green
+    background-color: var(--a-color-transparent-green)
+  &--bg-yellow
+    background-color: var(--a-color-yellow)
+  &--bg-secondary-yellow
+    background-color: var(--a-color-secondary-yellow)
+  &--bg-transparent-yellow
+    background-color: var(--a-color-transparent-yellow)
diff --git a/app/src/js/aurora/components/icon/icon.tsx b/app/src/js/aurora/components/icon/icon.tsx
new file mode 100644
index 00000000..e2c3f785
--- /dev/null
+++ b/app/src/js/aurora/components/icon/icon.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import type { Color, Size, IconType } from '../../lib/types'
+
+import './icon.sass'
+
+export interface Props {
+  name?: string
+  svg?: React.ReactNode
+  type?: IconType
+  color?: Color
+  size?: Size | 'xxl'
+  bgShape?: 'square' | 'circle'
+  bgColor?: Color
+  animated?: boolean
+}
+
+const REMIX_SIZE_MAPPING = {
+  xs: 'xs',
+  sm: 'sm',
+  md: '1x',
+  lg: 'lg',
+  xl: 'xl',
+  xxl: '2x'
+}
+
+/**
+ * @see https://remixicon.com/
+ */
+export function Icon({
+  name,
+  svg,
+  type = 'line',
+  color,
+  size = 'md',
+  bgShape,
+  bgColor,
+  animated
+}: Props) {
+  let iconClassName = `ri-${name}`
+
+  if (type) {
+    iconClassName = `${iconClassName}-${type}`
+  }
+
+  return (
+    <div
+      className={classNames('aurora-icon', {
+        [`aurora-icon--${size}`]: size,
+        [`aurora-icon--${bgShape}`]: bgShape,
+        [`aurora-icon--bg-${bgColor}`]: bgColor,
+        [`aurora-icon--${color}`]: color,
+        'aurora-icon--animated': animated
+      })}
+    >
+      {svg ? (
+        svg
+      ) : (
+        <i
+          className={classNames(iconClassName, {
+            [`ri-${REMIX_SIZE_MAPPING[size]}`]: size
+          })}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/icon/index.ts b/app/src/js/aurora/components/icon/index.ts
new file mode 100644
index 00000000..0af80388
--- /dev/null
+++ b/app/src/js/aurora/components/icon/index.ts
@@ -0,0 +1 @@
+export * from './icon'
diff --git a/app/src/js/aurora/components/image/image.sass b/app/src/js/aurora/components/image/image.sass
new file mode 100644
index 00000000..9a8b87d8
--- /dev/null
+++ b/app/src/js/aurora/components/image/image.sass
@@ -0,0 +1,76 @@
+@import '../../styles/main.sass'
+
+.aurora-image
+  position: relative
+  border-radius: var(--a-border-radius-md)
+  background-repeat: no-repeat
+  background-size: cover
+  background-position: center center
+
+  &--overlay
+    &::before
+      content: ''
+      position: absolute
+      width: 100%
+      height: 100%
+      background-color: rgba(0, 0, 0, .2)
+      transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+    &:hover
+      &::before
+        background-color: rgba(0, 0, 0, 0)
+
+  &--gradient
+    &::after
+      content: ''
+      position: absolute
+      top: auto
+      bottom: 0
+      width: 100%
+      height: 64px
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--a-color-background-surface))
+  &--gradient-top
+    &::after
+      top: 0
+      bottom: auto
+      background-image: linear-gradient(to top, rgba(0, 0, 0, 0), var(--a-color-background-surface))
+  &--gradient-bottom
+    &::after
+      top: auto
+      bottom: 0
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--a-color-background-surface))
+  &--gradient-left
+    &::after
+      left: 0
+      top: 0
+      bottom: 0
+      width: 64px
+      height: 100%
+      background-image: linear-gradient(to left, rgba(0, 0, 0, 0), var(--a-color-background-surface))
+  &--gradient-right
+    &::after
+      right: 0
+      top: 0
+      bottom: 0
+      width: 64px
+      height: 100%
+      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--a-color-background-surface))
+
+  &--cover
+    background-size: cover
+  &--contain
+    background-size: contain
+
+  &--square
+    border-radius: var(--a-border-radius-md)
+  &--circle
+    border-radius: var(--a-border-radius-circle)
+
+  &--blue-border
+    border: 1px solid var(--a-color-blue)
+  &--white-border
+    border: 1px solid var(--a-color-white)
+
+  &--radius-top
+    border-radius: var(--a-border-radius-md) var(--a-border-radius-md) 0 0
+  &--radius-bottom
+    border-radius: 0 0 var(--a-border-radius-md) var(--a-border-radius-md)
diff --git a/app/src/js/aurora/components/image/image.tsx b/app/src/js/aurora/components/image/image.tsx
new file mode 100644
index 00000000..d9825e19
--- /dev/null
+++ b/app/src/js/aurora/components/image/image.tsx
@@ -0,0 +1,52 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import './image.sass'
+
+interface Props {
+  src: string
+  width?: number | string
+  height?: number | string
+  shape?: 'circle' | 'square'
+  borderColor?: 'white' | 'blue'
+  backgroundSize?: 'cover' | 'contain'
+  radiusTop?: boolean
+  radiusBottom?: boolean
+  overlay?: boolean
+  gradient?: boolean
+  gradientPosition?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+export function Image({
+  src,
+  width,
+  height,
+  shape,
+  borderColor,
+  backgroundSize,
+  radiusTop,
+  radiusBottom,
+  overlay,
+  gradient,
+  gradientPosition
+}: Props) {
+  return (
+    <div
+      className={classNames('aurora-image', {
+        [`aurora-image--${shape}`]: shape,
+        [`aurora-image--${borderColor}-border`]: borderColor,
+        [`aurora-image--${backgroundSize}`]: backgroundSize,
+        [`aurora-image--gradient-${gradientPosition}`]: gradientPosition,
+        'aurora-image--radius-top': radiusTop,
+        'aurora-image--radius-bottom': radiusBottom,
+        'aurora-image--overlay': overlay,
+        'aurora-image--gradient': gradient
+      })}
+      style={{
+        width,
+        height,
+        backgroundImage: `url(${src})`
+      }}
+    />
+  )
+}
diff --git a/app/src/js/aurora/components/image/index.ts b/app/src/js/aurora/components/image/index.ts
new file mode 100644
index 00000000..556dbfdf
--- /dev/null
+++ b/app/src/js/aurora/components/image/index.ts
@@ -0,0 +1 @@
+export * from './image'
diff --git a/app/src/js/aurora/components/index.ts b/app/src/js/aurora/components/index.ts
new file mode 100644
index 00000000..7e50d008
--- /dev/null
+++ b/app/src/js/aurora/components/index.ts
@@ -0,0 +1,22 @@
+export * from './button'
+export * from './card'
+export * from './checkbox'
+export * from './circular-progress'
+export * from './flexbox'
+export * from './icon'
+export * from './icon-button'
+export * from './image'
+export * from './link'
+export * from './lists'
+export * from './loader'
+export * from './input'
+export * from './progress'
+export * from './radios'
+export * from './scroll-container'
+export * from './selects'
+export * from './slider'
+export * from './status'
+export * from './switch'
+export * from './tabs'
+export * from './text'
+export * from './widget-wrapper'
diff --git a/app/src/js/aurora/components/input/index.ts b/app/src/js/aurora/components/input/index.ts
new file mode 100644
index 00000000..e0612dd1
--- /dev/null
+++ b/app/src/js/aurora/components/input/index.ts
@@ -0,0 +1 @@
+export * from './text-input'
diff --git a/app/src/js/aurora/components/input/text-input.sass b/app/src/js/aurora/components/input/text-input.sass
new file mode 100644
index 00000000..ad0e0d60
--- /dev/null
+++ b/app/src/js/aurora/components/input/text-input.sass
@@ -0,0 +1,83 @@
+@import '../../styles/main.sass'
+
+.aurora-text-input-container
+  --a-icon-container-width: calc(var(--a-input-size-md) + var(--a-space-sm))
+
+  position: relative
+  display: flex
+  flex-direction: column
+
+.aurora-text-input
+  position: relative
+  display: inline-block
+  color: var(--a-color-text)
+  background-color: var(--a-color-input-background)
+  font-size: var(--a-font-size-md)
+  border: 1px solid var(--a-color-input-border)
+  border-radius: var(--a-border-radius-md)
+  height: var(--a-input-size-md)
+  padding: 0 var(--a-space-md)
+  width: 100%
+  outline: none
+  transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &:hover
+    border-color: var(--a-color-input-border-hover)
+    background-color: var(--a-color-input-background-hover)
+  &:hover:not([disabled]) ~ .aurora-text-input-icon-container
+    border-color: var(--a-color-input-border-hover)
+  &:focus
+    border-color: var(--a-color-input-border-focus)
+    background-color: var(--a-color-input-background-hover)
+    &:focus:not([disabled])
+      &~ .aurora-text-input-icon-container
+        border-color: var(--a-color-input-border-focus)
+        i
+          color: var(--a-color-accent)
+  &:placeholder-shown ~ .aurora-text-input-icon-container i
+    color: var(--color-secondary-white)
+
+  &--multiline
+    height: calc(var(--a-input-size-md) * 2)
+    padding: var(--a-space-sm) var(--a-space-md)
+    resize: vertical
+    min-height: calc(var(--a-input-size-md) * 2)
+    max-height: 512px
+    &~ .aurora-text-input-icon-container
+      height: 100%
+
+  &--disabled, &--disabled:hover
+    opacity: var(--a-opacity-disabled)
+    color: inherit
+    background-color: var(--a-color-input-background)
+    border-color: var(--a-color-input-border)
+    cursor: not-allowed
+  &--disabled ~ .aurora-text-input-icon-container
+    opacity: var(--a-opacity-disabled)
+    i
+      color: inherit
+      opacity: var(--a-opacity-disabled)
+
+  &--with-icon
+    padding-left: calc(var(--a-icon-container-width) + var(--a-space-md))
+
+.aurora-text-input-icon-container
+  position: absolute
+  left: 0
+  top: 0
+  bottom: 0
+  display: flex
+  align-items: center
+  justify-content: center
+  color: var(--a-color-text)
+  pointer-events: none
+  border-right: 1px solid var(--a-color-input-border)
+  width: var(--a-icon-container-width)
+  height: var(--a-input-size-md)
+  transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  i
+    color: var(--a-color-text)
+    transition: color var(--a-transition-duration-main) var(--a-transition-timing-main)
+
+.aurora-text-input-hint-container
+  padding-left: var(--a-space-md)
+  margin-top: var(--a-space-xs)
diff --git a/app/src/js/aurora/components/input/text-input.tsx b/app/src/js/aurora/components/input/text-input.tsx
new file mode 100644
index 00000000..61bf7c90
--- /dev/null
+++ b/app/src/js/aurora/components/input/text-input.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+
+import { Text, Icon } from '..'
+
+import './text-input.sass'
+
+interface Props {
+  placeholder: string
+  value?: string
+  type?: 'text' | 'password' | 'email' | 'tel' | 'url'
+  iconName?: string
+  hint?: string
+  disabled?: boolean
+  height?: number | 'auto'
+  maxLength?: number
+  multiline?: boolean
+  autofocus?: boolean
+  onChange?: (value: string) => void
+}
+
+export function TextInput({
+  placeholder,
+  type = 'text',
+  iconName,
+  hint,
+  value,
+  disabled,
+  height = 'auto',
+  maxLength,
+  multiline,
+  autofocus,
+  onChange
+}: Props) {
+  const [inputValue, setInputValue] = useState(value || '')
+
+  if (!multiline) {
+    if (!maxLength) {
+      maxLength = 64
+    }
+
+    if (height !== 'auto') {
+      height = 'auto'
+    }
+  }
+
+  return (
+    <div className="aurora-text-input-container">
+      {multiline ? (
+        <textarea
+          placeholder={placeholder}
+          value={inputValue}
+          disabled={disabled}
+          autoFocus={autofocus}
+          maxLength={maxLength}
+          onChange={(e) => {
+            setInputValue(e.target.value)
+
+            if (onChange) {
+              onChange(e.target.value)
+            }
+          }}
+          style={{ height }}
+          className={classNames('aurora-text-input', {
+            'aurora-text-input--multiline': true,
+            'aurora-text-input--disabled': disabled,
+            'aurora-text-input--with-icon': !!iconName
+          })}
+        />
+      ) : (
+        <input
+          type={type}
+          placeholder={placeholder}
+          value={inputValue}
+          disabled={disabled}
+          autoFocus={autofocus}
+          maxLength={maxLength}
+          onChange={(e) => {
+            setInputValue(e.target.value)
+
+            if (onChange) {
+              onChange(e.target.value)
+            }
+          }}
+          className={classNames('aurora-text-input', {
+            'aurora-text-input--disabled': disabled,
+            'aurora-text-input--with-icon': !!iconName
+          })}
+        />
+      )}
+      {iconName && (
+        <div className="aurora-text-input-icon-container">
+          <Icon name={iconName} type="fill" />
+        </div>
+      )}
+      {hint && (
+        <div className="aurora-text-input-hint-container">
+          <Text fontSize="xs" tertiary>
+            {hint}
+          </Text>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/link/index.ts b/app/src/js/aurora/components/link/index.ts
new file mode 100644
index 00000000..6bbafd20
--- /dev/null
+++ b/app/src/js/aurora/components/link/index.ts
@@ -0,0 +1 @@
+export * from './link'
diff --git a/app/src/js/aurora/components/link/link.sass b/app/src/js/aurora/components/link/link.sass
new file mode 100644
index 00000000..108b7d56
--- /dev/null
+++ b/app/src/js/aurora/components/link/link.sass
@@ -0,0 +1,14 @@
+@import '../../styles/main.sass'
+
+.aurora-link
+  display: inline-block
+  position: relative
+  text-decoration: none
+  transition: color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &:hover
+    text-decoration: 1px underline var(--a-color-accent)
+    .aurora-text, .aurora-icon
+      color: var(--a-color-accent-hover)
+
+  .aurora-text, .aurora-icon
+    color: var(--a-color-accent)
diff --git a/app/src/js/aurora/components/link/link.tsx b/app/src/js/aurora/components/link/link.tsx
new file mode 100644
index 00000000..67ab3213
--- /dev/null
+++ b/app/src/js/aurora/components/link/link.tsx
@@ -0,0 +1,21 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import { Text } from '..'
+import { type Size } from '../../lib/types'
+
+import './link.sass'
+
+interface Props {
+  href: string
+  children: React.ReactNode
+  fontSize?: Size
+}
+
+export function Link({ href, children, fontSize }: Props) {
+  return (
+    <a className={classNames('aurora-link')} href={href} target="_blank">
+      <Text fontSize={fontSize}>{children}</Text>
+    </a>
+  )
+}
diff --git a/app/src/js/aurora/components/lists/index.ts b/app/src/js/aurora/components/lists/index.ts
new file mode 100644
index 00000000..43276951
--- /dev/null
+++ b/app/src/js/aurora/components/lists/index.ts
@@ -0,0 +1,3 @@
+export * from './list'
+export * from './list-header'
+export * from './list-item'
diff --git a/app/src/js/aurora/components/lists/list-header/index.ts b/app/src/js/aurora/components/lists/list-header/index.ts
new file mode 100644
index 00000000..7b2097ad
--- /dev/null
+++ b/app/src/js/aurora/components/lists/list-header/index.ts
@@ -0,0 +1 @@
+export * from './list-header'
diff --git a/app/src/js/aurora/components/lists/list-header/list-header.tsx b/app/src/js/aurora/components/lists/list-header/list-header.tsx
new file mode 100644
index 00000000..2019a7a1
--- /dev/null
+++ b/app/src/js/aurora/components/lists/list-header/list-header.tsx
@@ -0,0 +1,21 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import { Text } from '../..'
+
+interface Props {
+  children: React.ReactNode
+  align?: 'left' | 'center'
+}
+
+export function ListHeader({ children, align }: Props) {
+  return (
+    <div
+      className={classNames('aurora-list-header', {
+        [`aurora-list-header--${align}`]: align
+      })}
+    >
+      <Text fontWeight="semi-bold">{children}</Text>
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/lists/list-item/index.ts b/app/src/js/aurora/components/lists/list-item/index.ts
new file mode 100644
index 00000000..d2fa9e91
--- /dev/null
+++ b/app/src/js/aurora/components/lists/list-item/index.ts
@@ -0,0 +1 @@
+export * from './list-item'
diff --git a/app/src/js/aurora/components/lists/list-item/list-item.tsx b/app/src/js/aurora/components/lists/list-item/list-item.tsx
new file mode 100644
index 00000000..a883004c
--- /dev/null
+++ b/app/src/js/aurora/components/lists/list-item/list-item.tsx
@@ -0,0 +1,39 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import { Icon } from '../..'
+
+interface Props {
+  children: React.ReactNode
+  align?: 'left' | 'center'
+  onClick?: () => void
+}
+
+export function ListItem({ children, align, onClick }: Props) {
+  let isClickable = false
+
+  if (onClick) {
+    isClickable = true
+  }
+
+  return (
+    <li
+      className={classNames('aurora-list-item', {
+        'aurora-list-item--clickable': isClickable,
+        [`aurora-list-item--${align}`]: align
+      })}
+      onClick={isClickable ? onClick : undefined}
+    >
+      {isClickable ? (
+        <>
+          {children}
+          <div className="aurora-list-item-clickable-icon">
+            <Icon name="arrow-right-double" />
+          </div>
+        </>
+      ) : (
+        children
+      )}
+    </li>
+  )
+}
diff --git a/app/src/js/aurora/components/lists/list/index.ts b/app/src/js/aurora/components/lists/list/index.ts
new file mode 100644
index 00000000..c1edf1e2
--- /dev/null
+++ b/app/src/js/aurora/components/lists/list/index.ts
@@ -0,0 +1 @@
+export * from './list'
diff --git a/app/src/js/aurora/components/lists/list/list.sass b/app/src/js/aurora/components/lists/list/list.sass
new file mode 100644
index 00000000..e8f4032e
--- /dev/null
+++ b/app/src/js/aurora/components/lists/list/list.sass
@@ -0,0 +1,54 @@
+@import '../../../styles/main.sass'
+
+.aurora-list
+  position: relative
+  display: flex
+  flex-direction: column
+  .aurora-list-item:last-child
+    border-bottom: none
+
+.aurora-list-header
+  position: relative
+  display: flex
+  align-items: center
+  justify-content: flex-start
+  width: 100%
+  text-align: left
+  padding: var(--a-space-lg) var(--a-space-md)
+  border-bottom: 1px solid var(--a-color-separator)
+
+  &--left
+    justify-content: flex-start
+  &--center
+    justify-content: center
+
+.aurora-list-item
+  position: relative
+  display: flex
+  justify-content: flex-start
+  padding: var(--a-space-md)
+  border-bottom: 1px solid var(--a-color-separator)
+  background-color: transparent
+  transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &:hover
+    background-color: var(--a-color-black)
+
+  &--left
+    justify-content: flex-start
+  &--center
+    justify-content: center
+
+  &--clickable
+    cursor: pointer
+    &:hover .aurora-list-item-clickable-icon .aurora-icon
+      color: var(--a-color-accent)
+
+  .aurora-list-item-clickable-icon
+    align-self: center
+    position: absolute
+    right: var(--a-space-md)
+    cursor: pointer
+    z-index: 1
+    .aurora-icon
+      color: var(--a-color-grey-blue)
+
diff --git a/app/src/js/aurora/components/lists/list/list.tsx b/app/src/js/aurora/components/lists/list/list.tsx
new file mode 100644
index 00000000..8e7f6388
--- /dev/null
+++ b/app/src/js/aurora/components/lists/list/list.tsx
@@ -0,0 +1,11 @@
+import type React from 'react'
+
+import './list.sass'
+
+interface Props {
+  children: React.ReactNode
+}
+
+export function List({ children }: Props) {
+  return <ul className="aurora-list">{children}</ul>
+}
diff --git a/app/src/js/aurora/components/loader/index.ts b/app/src/js/aurora/components/loader/index.ts
new file mode 100644
index 00000000..893f8c8d
--- /dev/null
+++ b/app/src/js/aurora/components/loader/index.ts
@@ -0,0 +1 @@
+export * from './loader'
diff --git a/app/src/js/aurora/components/loader/loader.sass b/app/src/js/aurora/components/loader/loader.sass
new file mode 100644
index 00000000..a1defab0
--- /dev/null
+++ b/app/src/js/aurora/components/loader/loader.sass
@@ -0,0 +1,29 @@
+@import '../../styles/main.sass'
+
+.aurora-loader
+  width: var(--a-loader-size-md)
+  height: var(--a-loader-size-md)
+  display: inline-block
+  position: relative
+  &::before, &::after
+    content: ''
+    box-sizing: border-box
+    width: var(--a-loader-size-md)
+    height: var(--a-loader-size-md)
+    border-radius: 50%
+    background-color: var(--a-color-accent)
+    position: absolute
+    left: 0
+    top: 0
+    animation: aurora-animation-loader 1s linear infinite
+  &::after
+    opacity: 0
+    animation-delay: .4s
+
+@keyframes aurora-animation-loader
+  0%
+    transform: scale(0)
+    opacity: 1
+  100%
+    transform: scale(1)
+    opacity: 0
diff --git a/app/src/js/aurora/components/loader/loader.tsx b/app/src/js/aurora/components/loader/loader.tsx
new file mode 100644
index 00000000..aae06cf1
--- /dev/null
+++ b/app/src/js/aurora/components/loader/loader.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+// import classNames from 'classnames'
+
+import './loader.sass'
+
+interface Props {
+  // size?: 'sm' | 'md'
+}
+
+export function Loader({}: // size
+Props) {
+  return (
+    <span className="aurora-loader" />
+    /*<span
+      className={classNames('aurora-loader', {
+        [`aurora-loader--${size}`]: size
+      })}
+    />*/
+  )
+}
diff --git a/app/src/js/aurora/components/progress/index.ts b/app/src/js/aurora/components/progress/index.ts
new file mode 100644
index 00000000..d9e366b6
--- /dev/null
+++ b/app/src/js/aurora/components/progress/index.ts
@@ -0,0 +1 @@
+export * from './progress'
diff --git a/app/src/js/aurora/components/progress/progress.sass b/app/src/js/aurora/components/progress/progress.sass
new file mode 100644
index 00000000..080a8ad0
--- /dev/null
+++ b/app/src/js/aurora/components/progress/progress.sass
@@ -0,0 +1,34 @@
+@import '../../styles/main.sass'
+
+.aurora-progress
+  position: relative
+  display: flex
+  align-items: flex-end
+  border-radius: var(--a-border-radius-pill)
+  background-color: var(--a-color-background-surface-secondary)
+
+  &--horizontal
+    width: 100%
+    &.aurora-progress--sm
+      height: 9px
+    &.aurora-progress--md
+      height: 18px
+    &.aurora-progress--lg
+      height: 24px
+    .aurora-progress-value
+      height: 100%
+
+  &--vertical
+    height: 100%
+    &.aurora-progress--sm
+      width: 9px
+    &.aurora-progress--md
+      width: 18px
+    &.aurora-progress--lg
+      width: 24px
+    .aurora-progress-value
+      width: 100%
+
+  .aurora-progress-value
+    border-radius: var(--a-border-radius-pill)
+    background-color: var(--a-color-accent)
diff --git a/app/src/js/aurora/components/progress/progress.tsx b/app/src/js/aurora/components/progress/progress.tsx
new file mode 100644
index 00000000..55a05f9a
--- /dev/null
+++ b/app/src/js/aurora/components/progress/progress.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import './progress.sass'
+
+interface Props {
+  value: number
+  orientation?: 'horizontal' | 'vertical'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Progress({
+  value,
+  orientation = 'horizontal',
+  size = 'md'
+}: Props) {
+  return (
+    <div
+      className={classNames('aurora-progress', {
+        [`aurora-progress--${orientation}`]: orientation,
+        [`aurora-progress--${size}`]: size
+      })}
+    >
+      <div
+        className="aurora-progress-value"
+        style={{
+          [orientation === 'horizontal' ? 'width' : 'height']: `${value}%`
+        }}
+      />
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/radios/index.ts b/app/src/js/aurora/components/radios/index.ts
new file mode 100644
index 00000000..f45c810e
--- /dev/null
+++ b/app/src/js/aurora/components/radios/index.ts
@@ -0,0 +1,2 @@
+export * from './radio'
+export * from './radio-group'
diff --git a/app/src/js/aurora/components/radios/radio-group/index.ts b/app/src/js/aurora/components/radios/radio-group/index.ts
new file mode 100644
index 00000000..0ccbf3be
--- /dev/null
+++ b/app/src/js/aurora/components/radios/radio-group/index.ts
@@ -0,0 +1 @@
+export * from './radio-group'
diff --git a/app/src/js/aurora/components/radios/radio-group/radio-group.sass b/app/src/js/aurora/components/radios/radio-group/radio-group.sass
new file mode 100644
index 00000000..60a60442
--- /dev/null
+++ b/app/src/js/aurora/components/radios/radio-group/radio-group.sass
@@ -0,0 +1,50 @@
+@import '../../../styles/main.sass'
+
+.aurora-radio-group
+  &[data-disabled]
+    cursor: not-allowed
+
+.aurora-radio
+  display: flex
+  align-items: center
+  gap: var(--a-space-sm)
+  cursor: pointer
+  &[data-disabled]
+    cursor: not-allowed
+
+.aurora-radio-control
+  display: flex
+  justify-content: center
+  align-items: center
+  width: var(--a-checkbox-radio-size)
+  height: var(--a-checkbox-radio-size)
+  border-radius: var(--a-border-radius-circle)
+  border: 1px solid var(--a-color-input-border)
+  background-color: var(--a-color-input-background)
+  transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &[data-hover]:not([data-checked])
+    border-color: var(--a-color-input-border-hover)
+    background-color: var(--a-color-input-background-hover)
+  &[data-checked]
+    border-color: transparent
+    background-color: var(--a-color-input-border-focus)
+    &::after
+      opacity: 1
+      transform: scale3d(.5, .5, .5)
+  &::after
+    content: ''
+    width: 16px
+    height: 16px
+    border-radius: var(--a-border-radius-circle)
+    background-color: var(--a-color-white)
+    opacity: 0
+    transition: opacity .3s var(--a-transition-timing-main), transform .3s var(--a-transition-timing-main)
+  &[data-disabled]
+    opacity: var(--a-opacity-disabled)
+
+.aurora-radio-label
+  color: var(--a-color-text)
+  font-size: var(--a-font-size-md)
+  &[data-disabled]
+    opacity: var(--a-opacity-disabled)
+    color: inherit
diff --git a/app/src/js/aurora/components/radios/radio-group/radio-group.tsx b/app/src/js/aurora/components/radios/radio-group/radio-group.tsx
new file mode 100644
index 00000000..16f6e2fa
--- /dev/null
+++ b/app/src/js/aurora/components/radios/radio-group/radio-group.tsx
@@ -0,0 +1,32 @@
+import type React from 'react'
+import {
+  RadioGroup as ArkRadioGroup,
+  type RadioGroupProps
+} from '@ark-ui/react'
+
+import './radio-group.sass'
+
+interface Props
+  extends Pick<
+    RadioGroupProps,
+    'children' | 'defaultValue' | 'disabled' | 'onChange'
+  > {}
+
+export function RadioGroup({
+  children,
+  defaultValue,
+  disabled,
+  onChange
+}: Props) {
+  return (
+    <ArkRadioGroup
+      className="aurora-radio-group"
+      defaultValue={defaultValue}
+      disabled={disabled}
+      onChange={onChange}
+      orientation="horizontal"
+    >
+      {children}
+    </ArkRadioGroup>
+  )
+}
diff --git a/app/src/js/aurora/components/radios/radio/index.ts b/app/src/js/aurora/components/radios/radio/index.ts
new file mode 100644
index 00000000..91aa9530
--- /dev/null
+++ b/app/src/js/aurora/components/radios/radio/index.ts
@@ -0,0 +1 @@
+export * from './radio'
diff --git a/app/src/js/aurora/components/radios/radio/radio.tsx b/app/src/js/aurora/components/radios/radio/radio.tsx
new file mode 100644
index 00000000..6d90415f
--- /dev/null
+++ b/app/src/js/aurora/components/radios/radio/radio.tsx
@@ -0,0 +1,22 @@
+import type React from 'react'
+import {
+  Radio as ArkRadio,
+  RadioLabel,
+  RadioInput,
+  RadioControl,
+  type RadioProps
+} from '@ark-ui/react'
+
+interface Props extends Pick<RadioProps, 'value' | 'disabled'> {
+  label: string
+}
+
+export function Radio({ label, value, disabled }: Props) {
+  return (
+    <ArkRadio className="aurora-radio" value={value} disabled={disabled}>
+      <RadioInput />
+      <RadioControl className="aurora-radio-control" />
+      <RadioLabel className="aurora-radio-label">{label}</RadioLabel>
+    </ArkRadio>
+  )
+}
diff --git a/app/src/js/aurora/components/scroll-container/index.ts b/app/src/js/aurora/components/scroll-container/index.ts
new file mode 100644
index 00000000..ad954fd2
--- /dev/null
+++ b/app/src/js/aurora/components/scroll-container/index.ts
@@ -0,0 +1 @@
+export * from './scroll-container'
diff --git a/app/src/js/aurora/components/scroll-container/scroll-container.sass b/app/src/js/aurora/components/scroll-container/scroll-container.sass
new file mode 100644
index 00000000..ca6b63dc
--- /dev/null
+++ b/app/src/js/aurora/components/scroll-container/scroll-container.sass
@@ -0,0 +1,31 @@
+@import '../../styles/main.sass'
+
+.aurora-scroll-container
+  position: relative
+  width: 100%
+  padding: var(--a-space-sm) 0
+
+  .aurora-scroll-container-mask
+    position: absolute
+    pointer-events: none
+
+  &--horizontal .aurora-scroll-container-mask
+    top: 0
+    right: 0
+    width: 50px
+    height: 100%
+    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3), var(--a-color-background-surface))
+  &--vertical .aurora-scroll-container-mask
+    position: absolute
+    content: ''
+    bottom: 0
+    left: 0
+    right: 0
+    width: 100%
+    height: 50px
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3), var(--a-color-background-surface))
+
+.aurora-scroll-container-scrollview
+  height: 100%
+  overflow-y: auto
+  overflow-x: auto
diff --git a/app/src/js/aurora/components/scroll-container/scroll-container.tsx b/app/src/js/aurora/components/scroll-container/scroll-container.tsx
new file mode 100644
index 00000000..0573b96e
--- /dev/null
+++ b/app/src/js/aurora/components/scroll-container/scroll-container.tsx
@@ -0,0 +1,34 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import './scroll-container.sass'
+
+interface Props {
+  children: React.ReactNode
+  orientation?: 'vertical' | 'horizontal'
+  width?: number | string
+  height?: number | string
+}
+
+export function ScrollContainer({
+  children,
+  orientation = 'horizontal',
+  width,
+  height
+}: Props) {
+  return (
+    <div
+      className={classNames(
+        'aurora-scroll-container',
+        `aurora-scroll-container--${orientation}`
+      )}
+      style={{
+        width,
+        height
+      }}
+    >
+      <div className="aurora-scroll-container-scrollview">{children}</div>
+      <div className="aurora-scroll-container-mask" />
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/selects/index.ts b/app/src/js/aurora/components/selects/index.ts
new file mode 100644
index 00000000..20f49f34
--- /dev/null
+++ b/app/src/js/aurora/components/selects/index.ts
@@ -0,0 +1,2 @@
+export * from './select'
+export * from './select-option'
diff --git a/app/src/js/aurora/components/selects/select-option/index.ts b/app/src/js/aurora/components/selects/select-option/index.ts
new file mode 100644
index 00000000..b437d9a3
--- /dev/null
+++ b/app/src/js/aurora/components/selects/select-option/index.ts
@@ -0,0 +1 @@
+export * from './select-option'
diff --git a/app/src/js/aurora/components/selects/select-option/select-option.tsx b/app/src/js/aurora/components/selects/select-option/select-option.tsx
new file mode 100644
index 00000000..43dda60d
--- /dev/null
+++ b/app/src/js/aurora/components/selects/select-option/select-option.tsx
@@ -0,0 +1,19 @@
+import type React from 'react'
+import {
+  SelectOption as ArkSelectOption,
+  type SelectOptionProps
+} from '@ark-ui/react'
+
+interface Props
+  extends Pick<SelectOptionProps, 'label' | 'value' | 'disabled'> {}
+
+export function SelectOption({ label, value, disabled }: Props) {
+  return (
+    <ArkSelectOption
+      className="aurora-select-option"
+      label={label}
+      value={value}
+      disabled={disabled}
+    />
+  )
+}
diff --git a/app/src/js/aurora/components/selects/select/index.ts b/app/src/js/aurora/components/selects/select/index.ts
new file mode 100644
index 00000000..211358f5
--- /dev/null
+++ b/app/src/js/aurora/components/selects/select/index.ts
@@ -0,0 +1 @@
+export * from './select'
diff --git a/app/src/js/aurora/components/selects/select/select.sass b/app/src/js/aurora/components/selects/select/select.sass
new file mode 100644
index 00000000..fdb3e6af
--- /dev/null
+++ b/app/src/js/aurora/components/selects/select/select.sass
@@ -0,0 +1,78 @@
+@import '../../../styles/main.sass'
+
+.aurora-select-trigger
+  position: relative
+  display: inline-block
+  cursor: pointer
+  color: var(--a-color-text-placeholder)
+  text-align: left
+  background-color: var(--a-color-input-background)
+  font-size: var(--a-font-size-md)
+  border: 1px solid var(--a-color-input-border)
+  border-radius: var(--a-border-radius-md)
+  height: var(--a-input-size-md)
+  padding: 0 var(--a-space-md)
+  padding-right: 0
+  width: 100%
+  outline: none
+  transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &:hover
+    border-color: var(--a-color-input-border-hover)
+    background-color: var(--a-color-input-background-hover)
+  &--selected
+    color: var(--a-color-text)
+  &[data-expanded]
+    border-color: var(--a-color-input-border-focus)
+    background-color: var(--a-color-input-background-hover)
+    &:not([disabled])
+      .aurora-icon
+        color: var(--a-color-accent)
+        transform: rotate(-180deg)
+  &[disabled], &[disabled]:hover
+    border-color: inherit
+    background-color: inherit
+    opacity: var(--a-opacity-disabled)
+    cursor: not-allowed
+  &-placeholder-container
+    position: relative
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis
+    width: 100%
+  &-icon-container
+    display: flex
+    align-items: center
+    justify-content: center
+    width: 50px
+
+  .aurora-icon
+    color: var(--color-secondary-white)
+
+.aurora-select-content
+  position: relative
+  width: var(--reference-width)
+  background-color: var(--a-color-background-surface)
+  border: 1px solid var(--a-color-separator)
+  border-radius: var(--a-border-radius-md)
+  cursor: pointer
+
+.aurora-select-option
+  font-size: var(--a-font-size-md)
+  line-height: var(--a-line-height-md)
+  color: var(--a-color-text-secondary)
+  padding: var(--a-space-md)
+  border-bottom: 1px solid var(--a-color-separator)
+  background-color: transparent
+  transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &:hover
+    background-color: var(--a-color-black)
+  &[data-disabled]
+    color: rgba(245, 245, 247, var(--a-opacity-disabled))
+    cursor: not-allowed
+    &:hover
+      background-color: inherit
+  &[data-selected]
+    color: var(--a-color-text)
+  &:last-child
+    border-bottom: none
+
diff --git a/app/src/js/aurora/components/selects/select/select.tsx b/app/src/js/aurora/components/selects/select/select.tsx
new file mode 100644
index 00000000..6da7cc0b
--- /dev/null
+++ b/app/src/js/aurora/components/selects/select/select.tsx
@@ -0,0 +1,72 @@
+import type React from 'react'
+import {
+  Select as ArkSelect,
+  SelectContent,
+  SelectPositioner,
+  SelectTrigger,
+  Portal,
+  type SelectProps
+} from '@ark-ui/react'
+import classNames from 'classnames'
+
+import { Flexbox, Icon } from '../..'
+
+import './select.sass'
+
+interface Props
+  extends Pick<
+    SelectProps,
+    'defaultValue' | 'selectedOption' | 'disabled' | 'onChange'
+  > {
+  placeholder: string
+  children: React.ReactNode
+}
+
+export function Select({
+  placeholder,
+  children,
+  selectedOption,
+  defaultValue,
+  disabled,
+  onChange
+}: Props) {
+  return (
+    <ArkSelect
+      closeOnSelect
+      selectedOption={selectedOption}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      onChange={onChange}
+    >
+      {({ selectedOption }) => (
+        <>
+          <SelectTrigger
+            className={classNames('aurora-select-trigger', {
+              'aurora-select-trigger--selected': selectedOption
+            })}
+          >
+            <Flexbox
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <div className="aurora-select-trigger-placeholder-container">
+                {selectedOption ? selectedOption.label : placeholder}
+              </div>
+              <div className="aurora-select-trigger-icon-container">
+                <Icon name="arrow-down-s" />
+              </div>
+            </Flexbox>
+          </SelectTrigger>
+          <Portal>
+            <SelectPositioner>
+              <SelectContent className="aurora-select-content">
+                {children}
+              </SelectContent>
+            </SelectPositioner>
+          </Portal>
+        </>
+      )}
+    </ArkSelect>
+  )
+}
diff --git a/app/src/js/aurora/components/slider/index.ts b/app/src/js/aurora/components/slider/index.ts
new file mode 100644
index 00000000..6d0e3395
--- /dev/null
+++ b/app/src/js/aurora/components/slider/index.ts
@@ -0,0 +1 @@
+export * from './slider'
diff --git a/app/src/js/aurora/components/slider/slider.sass b/app/src/js/aurora/components/slider/slider.sass
new file mode 100644
index 00000000..039bc8c1
--- /dev/null
+++ b/app/src/js/aurora/components/slider/slider.sass
@@ -0,0 +1,70 @@
+@import '../../styles/main.sass'
+
+.aurora-slider
+  --a-track-height: 10px
+
+  .aurora-slider-control
+    display: flex
+    align-items: center
+    cursor: pointer
+    width: 100%
+    &[data-disabled]
+      cursor: not-allowed
+      opacity: var(--a-opacity-disabled)
+    &:hover:not([data-disabled])
+      .aurora-slider-thumb
+        width: calc(var(--a-track-height) * 2.3)
+        height: calc(var(--a-track-height) * 2.3)
+      .aurora-slider-track
+        background-color: var(--a-color-background-surface-secondary-hover)
+
+  .aurora-slider-track
+    background-color: var(--a-color-background-surface-secondary)
+    border-radius: var(--a-border-radius-pill)
+    transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+
+  .aurora-slider-range
+    background-color: var(--a-color-accent)
+    border-radius: var(--a-border-radius-pill)
+
+  .aurora-slider-thumb
+    position: relative
+    outline: none
+    width: calc(var(--a-track-height) * 2)
+    height: calc(var(--a-track-height) * 2)
+    border-radius: var(--a-border-radius-circle)
+    background-color: var(--a-color-accent)
+    transition: width var(--a-transition-duration-main) var(--a-transition-timing-main), height var(--a-transition-duration-main) var(--a-transition-timing-main)
+
+  &--hidden-thumb
+    &:hover .aurora-slider-thumb
+      opacity: 1
+    .aurora-slider-thumb
+      opacity: 0
+
+  &[data-orientation="horizontal"]
+    .aurora-slider-control
+      flex-direction: row
+      width: 100%
+      height: var(--a-track-height)
+    .aurora-slider-range
+      height: var(--a-track-height)
+    .aurora-slider-track
+      width: 100%
+      height: var(--a-track-height)
+    .aurora-slider-thumb
+      margin-top: 1px
+
+  &[data-orientation="vertical"]
+    height: 100%
+    .aurora-slider-control
+      flex-direction: column
+      width: var(--a-track-height)
+      height: 100%
+    .aurora-slider-range
+      width: var(--a-track-height)
+    .aurora-slider-track
+      width: var(--a-track-height)
+      height: 100%
+    .aurora-slider-thumb
+      margin-left: 1px
diff --git a/app/src/js/aurora/components/slider/slider.tsx b/app/src/js/aurora/components/slider/slider.tsx
new file mode 100644
index 00000000..cce87375
--- /dev/null
+++ b/app/src/js/aurora/components/slider/slider.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+import {
+  Slider as ArkSlider,
+  SliderControl,
+  SliderRange,
+  SliderThumb,
+  SliderTrack,
+  type SliderProps
+} from '@ark-ui/react'
+
+import './slider.sass'
+
+interface Props
+  extends Pick<
+    SliderProps,
+    | 'value'
+    | 'defaultValue'
+    | 'max'
+    | 'min'
+    | 'step'
+    | 'disabled'
+    | 'orientation'
+    | 'onChange'
+  > {
+  width?: number | string
+  height?: number | string
+  hiddenThumb?: boolean
+}
+
+export function Slider({
+  width,
+  height,
+  value,
+  defaultValue,
+  max = 100,
+  min = 0,
+  step = 1,
+  disabled,
+  orientation = 'horizontal',
+  hiddenThumb,
+  onChange
+}: Props) {
+  const [newValue, setNewValue] = useState(value)
+  const valueInPercent =
+    Number(((Number(newValue) - min) / (max - min)).toFixed(2)) * 100
+
+  return (
+    <div
+      className="aurora-slider-container"
+      style={{
+        width,
+        height
+      }}
+    >
+      <ArkSlider
+        className={classNames('aurora-slider', {
+          'aurora-slider--hidden-thumb': hiddenThumb
+        })}
+        value={newValue}
+        defaultValue={defaultValue}
+        max={max}
+        min={min}
+        step={step}
+        disabled={disabled}
+        orientation={orientation}
+        onChange={(details) => {
+          setNewValue(details.value)
+
+          onChange?.(details)
+        }}
+      >
+        <SliderControl className="aurora-slider-control">
+          <SliderTrack className="aurora-slider-track">
+            <SliderRange
+              className="aurora-slider-range"
+              style={{
+                [orientation === 'horizontal'
+                  ? 'width'
+                  : 'height']: `${valueInPercent}%`
+              }}
+            />
+          </SliderTrack>
+          <SliderThumb className="aurora-slider-thumb" />
+        </SliderControl>
+      </ArkSlider>
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/status/index.ts b/app/src/js/aurora/components/status/index.ts
new file mode 100644
index 00000000..77cec485
--- /dev/null
+++ b/app/src/js/aurora/components/status/index.ts
@@ -0,0 +1 @@
+export * from './status'
diff --git a/app/src/js/aurora/components/status/status.sass b/app/src/js/aurora/components/status/status.sass
new file mode 100644
index 00000000..79f6c307
--- /dev/null
+++ b/app/src/js/aurora/components/status/status.sass
@@ -0,0 +1,62 @@
+@import '../../styles/main.sass'
+
+.aurora-status
+  position: relative
+  display: inline-block
+  border-radius: var(--a-border-radius-pill)
+  font-size: var(--a-font-size-xs)
+  padding: var(--a-space-xs) var(--a-space-sm)
+  cursor: default
+  color: var(--a-color-text)
+  background-color: var(--a-color-transparent-white)
+  border: 1px solid var(--a-color-transparent-white)
+  transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &:hover
+    background-color: var(--a-color-transparent-white-hover)
+    border-color: var(--a-color-transparent-white-hover)
+
+  *
+    cursor: default
+
+  .aurora-icon
+    width: auto
+    height: auto
+    padding: 0
+
+  &--blue
+    color: var(--a-color-blue)
+    background-color: var(--a-color-transparent-blue)
+    border-color: var(--a-color-transparent-blue)
+    &:hover
+      background-color: var(--a-color-transparent-blue-hover)
+      border-color: var(--a-color-transparent-blue-hover)
+    .aurora-icon
+      color: var(--a-color-blue)
+  &--green
+    color: var(--a-color-green)
+    background-color: var(--a-color-transparent-green)
+    border-color: var(--a-color-transparent-green)
+    &:hover
+      background-color: var(--a-color-transparent-green-hover)
+      border-color: var(--a-color-transparent-green-hover)
+    .aurora-icon
+      color: var(--a-color-green)
+  &--yellow
+    color: var(--a-color-yellow)
+    background-color: var(--a-color-transparent-yellow)
+    border-color: var(--a-color-transparent-yellow)
+    &:hover
+      background-color: var(--a-color-transparent-yellow-hover)
+      border-color: var(--a-color-transparent-yellow-hover)
+    .aurora-icon
+      color: var(--a-color-yellow)
+  &--red
+    color: var(--a-color-red)
+    background-color: var(--a-color-transparent-red)
+    border-color: var(--a-color-transparent-red)
+    &:hover
+      background-color: var(--a-color-transparent-red-hover)
+      border-color: var(--a-color-transparent-red-hover)
+    .aurora-icon
+      color: var(--a-color-red)
+
diff --git a/app/src/js/aurora/components/status/status.tsx b/app/src/js/aurora/components/status/status.tsx
new file mode 100644
index 00000000..a779a0e3
--- /dev/null
+++ b/app/src/js/aurora/components/status/status.tsx
@@ -0,0 +1,43 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import type { IconType } from '../../lib/types'
+import { Icon, Flexbox } from '../index'
+
+import './status.sass'
+
+interface Props {
+  children: React.ReactNode
+  color?: 'blue' | 'green' | 'red' | 'yellow'
+  iconName?: string
+  iconType?: IconType
+}
+
+export function Status({
+  children,
+  color,
+  iconName,
+  iconType = 'line'
+}: Props) {
+  return (
+    <div
+      className={classNames('aurora-status', {
+        [`aurora-status--${color}`]: color
+      })}
+    >
+      {iconName ? (
+        <Flexbox
+          alignItems="center"
+          justifyContent="center"
+          flexDirection="row"
+          gap="xs"
+        >
+          <Icon name={iconName} type={iconType} size="sm" />
+          <i>{children}</i>
+        </Flexbox>
+      ) : (
+        children
+      )}
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/components/switch/index.ts b/app/src/js/aurora/components/switch/index.ts
new file mode 100644
index 00000000..ccfa3133
--- /dev/null
+++ b/app/src/js/aurora/components/switch/index.ts
@@ -0,0 +1 @@
+export * from './switch'
diff --git a/app/src/js/aurora/components/switch/switch.sass b/app/src/js/aurora/components/switch/switch.sass
new file mode 100644
index 00000000..f3a1c21e
--- /dev/null
+++ b/app/src/js/aurora/components/switch/switch.sass
@@ -0,0 +1,48 @@
+@import '../../styles/main.sass'
+
+.aurora-switch
+  --a-switch-width: 44px
+  --a-thumb-size: 20px
+
+  position: relative
+  display: flex
+  align-items: center
+  gap: var(--a-space-sm)
+  cursor: pointer
+  &[data-disabled]
+    cursor: not-allowed
+    opacity: var(--a-opacity-disabled)
+  &:hover:not([data-checked], [data-disabled]) .aurora-switch-control
+    background-color: var(--a-color-background-surface-secondary-hover)
+
+.aurora-switch-control
+  position: relative
+  display: flex
+  align-items: center
+  border-radius: var(--a-border-radius-pill)
+  background-color: var(--a-color-background-surface-secondary)
+  width: var(--a-switch-width)
+  height: 22px
+  transition: background-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &[data-checked]
+    background-color: var(--a-color-accent)
+
+.aurora-switch-thumb
+  display: block
+  position: relative
+  left: 2px
+  width: var(--a-thumb-size)
+  height: var(--a-thumb-size)
+  border-radius: var(--a-border-radius-circle)
+  border: 1px solid var(--a-color-input-border)
+  background-color: var(--a-color-background-surface)
+  transition: transform var(--a-transition-duration-main) var(--a-transition-timing-main), border-color var(--a-transition-duration-main) var(--a-transition-timing-main)
+  &[data-checked]
+    border-color: transparent
+    transform: translateX(calc(var(--a-switch-width) - var(--a-thumb-size) - 4px))
+
+.aurora-switch-label
+  color: var(--a-color-text)
+  font-size: var(--a-font-size-md)
+  &[data-disabled]
+    color: inherit
diff --git a/app/src/js/aurora/components/switch/switch.tsx b/app/src/js/aurora/components/switch/switch.tsx
new file mode 100644
index 00000000..ba28e21a
--- /dev/null
+++ b/app/src/js/aurora/components/switch/switch.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import {
+  Switch as ArkSwitch,
+  SwitchLabel,
+  SwitchInput,
+  SwitchControl,
+  SwitchThumb,
+  type SwitchProps
+} from '@ark-ui/react'
+
+import './switch.sass'
+
+interface Props
+  extends Pick<SwitchProps, 'value' | 'checked' | 'disabled' | 'onChange'> {
+  label?: string
+}
+
+export function Switch({ label, checked, value, disabled, onChange }: Props) {
+  const [isChecked, setIsChecked] = useState(checked)
+
+  return (
+    <ArkSwitch
+      className="aurora-switch"
+      value={value}
+      checked={isChecked}
+      disabled={disabled}
+      onChange={(e) => {
+        setIsChecked(e.checked)
+
+        if (onChange) {
+          onChange(e)
+        }
+      }}
+    >
+      <>
+        <SwitchInput />
+        <SwitchControl className="aurora-switch-control">
+          <SwitchThumb className="aurora-switch-thumb" />
+        </SwitchControl>
+        <SwitchLabel className="aurora-switch-label">{label}</SwitchLabel>
+      </>
+    </ArkSwitch>
+  )
+}
diff --git a/app/src/js/aurora/components/tabs/index.ts b/app/src/js/aurora/components/tabs/index.ts
new file mode 100644
index 00000000..d7edd28e
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/index.ts
@@ -0,0 +1,4 @@
+export * from './tab'
+export * from './tab-content'
+export * from './tab-group'
+export * from './tab-list'
diff --git a/app/src/js/aurora/components/tabs/tab-content/index.ts b/app/src/js/aurora/components/tabs/tab-content/index.ts
new file mode 100644
index 00000000..8e0a4e10
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/tab-content/index.ts
@@ -0,0 +1 @@
+export * from './tab-content'
diff --git a/app/src/js/aurora/components/tabs/tab-content/tab-content.tsx b/app/src/js/aurora/components/tabs/tab-content/tab-content.tsx
new file mode 100644
index 00000000..8faa36b0
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/tab-content/tab-content.tsx
@@ -0,0 +1,15 @@
+import type React from 'react'
+import {
+  TabContent as ArkTabContent,
+  type TabContentProps
+} from '@ark-ui/react'
+
+interface Props extends Pick<TabContentProps, 'children' | 'value'> {}
+
+export function TabContent({ children, value }: Props) {
+  return (
+    <ArkTabContent className="aurora-tab-content" value={value}>
+      {children}
+    </ArkTabContent>
+  )
+}
diff --git a/app/src/js/aurora/components/tabs/tab-group/index.ts b/app/src/js/aurora/components/tabs/tab-group/index.ts
new file mode 100644
index 00000000..be71156f
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/tab-group/index.ts
@@ -0,0 +1 @@
+export * from './tab-group'
diff --git a/app/src/js/aurora/components/tabs/tab-group/tab-group.sass b/app/src/js/aurora/components/tabs/tab-group/tab-group.sass
new file mode 100644
index 00000000..821c157e
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/tab-group/tab-group.sass
@@ -0,0 +1,38 @@
+@import '../../../styles/main.sass'
+
+.aurora-tab-group
+  .aurora-tab
+    color: var(--a-color-text)
+    font-size: var(--a-font-size-md)
+    cursor: pointer
+    background-color: transparent
+    border: none
+    margin-right: var(--a-space-md)
+    padding: 0
+    padding-bottom: var(--a-space-xs)
+    transition: color var(--a-transition-duration-main) var(--a-transition-timing-main)
+    &:hover, &[data-selected]
+      color: var(--a-color-accent)
+    &[disabled]
+      opacity: var(--a-opacity-disabled)
+      cursor: not-allowed
+      color: inherit
+  &--sm .aurora-tab
+    font-size: var(--a-font-size-sm)
+  &--md .aurora-tab
+    font-size: var(--a-font-size-md)
+  &--lg .aurora-tab
+    font-size: var(--a-font-size-lg)
+
+.aurora-tab-indicator-container
+  display: grid
+
+.aurora-tab-indicator
+  justify-self: center
+  width: 6px
+  height: 6px
+  border-radius: var(--a-border-radius-circle)
+  background-color: var(--a-color-accent)
+
+.aurora-tab-content
+  margin-top: var(--a-space-md)
diff --git a/app/src/js/aurora/components/tabs/tab-group/tab-group.tsx b/app/src/js/aurora/components/tabs/tab-group/tab-group.tsx
new file mode 100644
index 00000000..07c17652
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/tab-group/tab-group.tsx
@@ -0,0 +1,25 @@
+import type React from 'react'
+import classNames from 'classnames'
+import { Tabs, type TabsProps } from '@ark-ui/react'
+
+import './tab-group.sass'
+
+interface Props
+  extends Pick<TabsProps, 'children' | 'defaultValue' | 'onChange'> {
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function TabGroup({ children, defaultValue, onChange, size }: Props) {
+  return (
+    <Tabs
+      className={classNames('aurora-tab-group', {
+        [`aurora-tab-group--${size}`]: size
+      })}
+      defaultValue={defaultValue}
+      onChange={onChange}
+      orientation="horizontal"
+    >
+      {children}
+    </Tabs>
+  )
+}
diff --git a/app/src/js/aurora/components/tabs/tab-list/index.ts b/app/src/js/aurora/components/tabs/tab-list/index.ts
new file mode 100644
index 00000000..61ec2cde
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/tab-list/index.ts
@@ -0,0 +1 @@
+export * from './tab-list'
diff --git a/app/src/js/aurora/components/tabs/tab-list/tab-list.tsx b/app/src/js/aurora/components/tabs/tab-list/tab-list.tsx
new file mode 100644
index 00000000..0ef640b9
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/tab-list/tab-list.tsx
@@ -0,0 +1,19 @@
+import type React from 'react'
+import {
+  TabIndicator,
+  TabList as ArkTabList,
+  type TabListProps
+} from '@ark-ui/react'
+
+interface Props extends Pick<TabListProps, 'children'> {}
+
+export function TabList({ children }: Props) {
+  return (
+    <ArkTabList className="aurora-tab-list">
+      {children}
+      <TabIndicator className="aurora-tab-indicator-container">
+        <div className="aurora-tab-indicator" />
+      </TabIndicator>
+    </ArkTabList>
+  )
+}
diff --git a/app/src/js/aurora/components/tabs/tab/index.ts b/app/src/js/aurora/components/tabs/tab/index.ts
new file mode 100644
index 00000000..4becea9c
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/tab/index.ts
@@ -0,0 +1 @@
+export * from './tab'
diff --git a/app/src/js/aurora/components/tabs/tab/tab.tsx b/app/src/js/aurora/components/tabs/tab/tab.tsx
new file mode 100644
index 00000000..d0453ca0
--- /dev/null
+++ b/app/src/js/aurora/components/tabs/tab/tab.tsx
@@ -0,0 +1,13 @@
+import type React from 'react'
+import { TabTrigger, type TabTriggerProps } from '@ark-ui/react'
+
+interface Props
+  extends Pick<TabTriggerProps, 'children' | 'value' | 'disabled'> {}
+
+export function Tab({ children, value, disabled }: Props) {
+  return (
+    <TabTrigger className="aurora-tab" value={value} disabled={disabled}>
+      {children}
+    </TabTrigger>
+  )
+}
diff --git a/app/src/js/aurora/components/text/index.ts b/app/src/js/aurora/components/text/index.ts
new file mode 100644
index 00000000..1693b580
--- /dev/null
+++ b/app/src/js/aurora/components/text/index.ts
@@ -0,0 +1 @@
+export * from './text'
diff --git a/app/src/js/aurora/components/text/text.sass b/app/src/js/aurora/components/text/text.sass
new file mode 100644
index 00000000..6ae09ad7
--- /dev/null
+++ b/app/src/js/aurora/components/text/text.sass
@@ -0,0 +1,42 @@
+@import '../../styles/main.sass'
+
+.aurora-text
+  font-size: var(--a-font-size-md)
+  font-weight: var(--a-font-weight-regular)
+  line-height: var(--a-line-height-md)
+  color: var(--a-color-text)
+  text-align: left
+  transition: color var(--a-transition-duration-main) var(--a-transition-timing-main)
+
+  &--left
+    text-align: left
+  &--center
+    text-align: center
+  &--right
+    text-align: right
+
+  &--secondary
+    color: var(--a-color-text-secondary)
+  &--tertiary
+    color: var(--a-color-text-tertiary)
+
+  &--xs
+    font-size: var(--a-font-size-xs)
+    line-height: var(--a-line-height-xs)
+  &--sm
+    font-size: var(--a-font-size-sm)
+    line-height: var(--a-line-height-sm)
+  &--md
+    font-size: var(--a-font-size-md)
+    line-height: var(--a-line-height-md)
+  &--lg
+    font-size: var(--a-font-size-lg)
+    line-height: var(--a-line-height-lg)
+  &--xl
+    font-size: var(--a-font-size-xl)
+    line-height: var(--a-line-height-xl)
+
+  &--regular
+    font-weight: var(--a-font-weight-regular)
+  &--semi-bold
+    font-weight: var(--a-font-weight-semi-bold)
diff --git a/app/src/js/aurora/components/text/text.tsx b/app/src/js/aurora/components/text/text.tsx
new file mode 100644
index 00000000..8c84f279
--- /dev/null
+++ b/app/src/js/aurora/components/text/text.tsx
@@ -0,0 +1,47 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import type { Size } from '../../lib/types'
+
+import './text.sass'
+
+/*const FONT_SIZES = {
+  XS: 'xs',
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg',
+  XL: 'xl'
+} as const*/
+
+interface Props {
+  children: React.ReactNode
+  // fontSize?: typeof FONT_SIZES[keyof typeof FONT_SIZES]
+  fontSize?: Size
+  fontWeight?: 'regular' | 'semi-bold'
+  secondary?: boolean
+  tertiary?: boolean
+  textAlign?: 'left' | 'center' | 'right'
+}
+
+export function Text({
+  children,
+  fontSize,
+  fontWeight,
+  secondary,
+  tertiary,
+  textAlign
+}: Props) {
+  return (
+    <p
+      className={classNames('aurora-text', {
+        'aurora-text--secondary': secondary,
+        'aurora-text--tertiary': tertiary,
+        [`aurora-text--${textAlign}`]: textAlign,
+        [`aurora-text--${fontSize}`]: fontSize,
+        [`aurora-text--${fontWeight}`]: fontWeight
+      })}
+    >
+      {children}
+    </p>
+  )
+}
diff --git a/app/src/js/aurora/components/widget-wrapper/index.ts b/app/src/js/aurora/components/widget-wrapper/index.ts
new file mode 100644
index 00000000..896cbd8e
--- /dev/null
+++ b/app/src/js/aurora/components/widget-wrapper/index.ts
@@ -0,0 +1 @@
+export * from './widget-wrapper'
diff --git a/app/src/js/aurora/components/widget-wrapper/widget-wrapper.sass b/app/src/js/aurora/components/widget-wrapper/widget-wrapper.sass
new file mode 100644
index 00000000..fb79d21a
--- /dev/null
+++ b/app/src/js/aurora/components/widget-wrapper/widget-wrapper.sass
@@ -0,0 +1,23 @@
+@import '../../styles/main.sass'
+
+.aurora-widget-wrapper
+  position: relative
+  display: inline-block
+  height: auto
+  border-radius: var(--a-border-radius-md)
+  padding: var(--a-space-xl) var(--a-space-md)
+  width: var(--a-widget-width)
+  background: linear-gradient(var(--a-color-background-surface), var(--a-color-background-surface)) padding-box, linear-gradient(135deg, rgba(28, 117, 219, 0.4) 0%, rgba(237, 41, 122, 0.2) 100%) border-box
+  border: 1px solid transparent
+  overflow-x: auto
+
+  &--no-padding
+    padding: 0
+  &--padding-top
+    padding-top: var(--a-space-xl)
+  &--padding-bottom
+    padding-bottom: var(--a-space-xl)
+  &--padding-left
+    padding-left: var(--a-space-md)
+  &--padding-right
+    padding-right: var(--a-space-md)
diff --git a/app/src/js/aurora/components/widget-wrapper/widget-wrapper.tsx b/app/src/js/aurora/components/widget-wrapper/widget-wrapper.tsx
new file mode 100644
index 00000000..9dc62c8b
--- /dev/null
+++ b/app/src/js/aurora/components/widget-wrapper/widget-wrapper.tsx
@@ -0,0 +1,36 @@
+import type React from 'react'
+import classNames from 'classnames'
+
+import './widget-wrapper.sass'
+
+interface Props {
+  children: React.ReactNode
+  noPadding?: boolean
+  paddingTop?: boolean
+  paddingBottom?: boolean
+  paddingLeft?: boolean
+  paddingRight?: boolean
+}
+
+export function WidgetWrapper({
+  children,
+  noPadding,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight
+}: Props) {
+  return (
+    <div
+      className={classNames('aurora-widget-wrapper', {
+        'aurora-widget-wrapper--no-padding': noPadding,
+        'aurora-widget-wrapper--padding-top': paddingTop,
+        'aurora-widget-wrapper--padding-bottom': paddingBottom,
+        'aurora-widget-wrapper--padding-left': paddingLeft,
+        'aurora-widget-wrapper--padding-right': paddingRight
+      })}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/app/src/js/aurora/index.ts b/app/src/js/aurora/index.ts
new file mode 100644
index 00000000..8e16c375
--- /dev/null
+++ b/app/src/js/aurora/index.ts
@@ -0,0 +1,3 @@
+'use client'
+
+export * from './components'
diff --git a/app/src/js/aurora/lib/types.ts b/app/src/js/aurora/lib/types.ts
new file mode 100644
index 00000000..08c5d270
--- /dev/null
+++ b/app/src/js/aurora/lib/types.ts
@@ -0,0 +1,20 @@
+export type Color =
+  | 'white'
+  | 'transparent-white'
+  | 'black'
+  | 'blue'
+  | 'secondary-blue'
+  | 'transparent-blue'
+  | 'red'
+  | 'secondary-red'
+  | 'transparent-red'
+  | 'green'
+  | 'secondary-green'
+  | 'transparent-green'
+  | 'yellow'
+  | 'secondary-yellow'
+  | 'transparent-yellow'
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type IconType = 'line' | 'fill'
diff --git a/app/src/js/aurora/lib/utils.ts b/app/src/js/aurora/lib/utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/app/src/js/aurora/styles/_includes/animations.sass b/app/src/js/aurora/styles/_includes/animations.sass
new file mode 100644
index 00000000..3ada5f2d
--- /dev/null
+++ b/app/src/js/aurora/styles/_includes/animations.sass
@@ -0,0 +1,5 @@
+@keyframes aurora-animation-fade-in
+  0%
+    opacity: 0
+  100%
+    opacity: 1
diff --git a/app/src/js/aurora/styles/_includes/variables.sass b/app/src/js/aurora/styles/_includes/variables.sass
new file mode 100644
index 00000000..627a01f8
--- /dev/null
+++ b/app/src/js/aurora/styles/_includes/variables.sass
@@ -0,0 +1,139 @@
+\:root
+
+  /**
+   * Colors
+   */
+
+  --a-color-white: #F5F5F7
+  --a-color-transparent-white: rgba(245, 245, 247, .1)
+  --a-color-transparent-white-hover: rgba(245, 245, 247, .2)
+  --a-color-white-secondary: #A7B3C8
+  --a-color-secondary-grey: #45515E
+  --a-color-black: #000
+  --a-color-black-light: #0B0C0B
+  --a-color-black-lighter-1: #0E0E0E
+  --a-color-black-lighter-2: #151515
+  --a-color-grey-blue: #292F36
+  --a-color-grey-blue-dark: #1B2025
+  --a-color-blue: #1C75DB
+  --a-color-secondary-blue: #91BDF0
+  --a-color-transparent-blue: rgba(28, 117, 219, .2)
+  --a-color-transparent-blue-hover: rgba(28, 117, 219, .3)
+  --a-color-pink: #ED297A
+  --a-color-red: #ac0a0a
+  --a-color-secondary-red: #F09191
+  --a-color-transparent-red: rgba(172, 10, 10, .2)
+  --a-color-transparent-red-hover: rgba(172, 10, 10, .3)
+  --a-color-green: #168604
+  --a-color-secondary-green: #91F095
+  --a-color-transparent-green: rgba(22, 134, 4, .2)
+  --a-color-transparent-green-hover: rgba(22, 134, 4, .3)
+  --a-color-yellow: #b08313
+  --a-color-secondary-yellow: #F0E791
+  --a-color-transparent-yellow: rgba(176, 131, 19, .2)
+  --a-color-transparent-yellow-hover: rgba(176, 131, 19, .3)
+
+  --a-color-background: var(--a-color-black)
+  --a-color-background-surface: var(--a-color-black-light)
+  --a-color-background-surface-secondary: var(--a-color-black-lighter-2)
+  --a-color-background-surface-hover: var(--a-color-black-lighter-1)
+  --a-color-background-surface-secondary-hover: #1A1A1A
+  --a-color-background-danger: var(--a-color-red)
+
+  --a-color-accent: var(--a-color-blue)
+  --a-color-accent-hover: #0060C7
+  --a-color-danger-hover: #990000
+
+  --a-color-text: var(--a-color-white)
+  --a-color-text-secondary: var(--a-color-white-secondary)
+  --a-color-text-tertiary: var(--a-color-secondary-grey)
+
+  --a-color-text-placeholder: var(--a-color-secondary-grey)
+  --a-color-text-danger: var(--a-color-text)
+
+  --a-color-separator: var(--a-color-grey-blue-dark)
+
+  --a-color-input-border: var(--a-color-grey-blue)
+  --a-color-input-border-hover: var(--a-color-secondary-grey)
+  --a-color-input-border-focus: var(--a-color-blue)
+  --a-color-input-background: var(--a-color-black)
+  --a-color-input-background-hover: var(--a-color-black-light)
+
+  /**
+   * Border radius
+   */
+
+  --a-border-radius-xs: 4px
+  --a-border-radius-md: 7px
+  --a-border-radius-pill: 999px
+  --a-border-radius-circle: 50%
+
+  /**
+   * Font sizes and line heights
+   */
+
+  --a-font-size-xs: 12px
+  --a-line-height-xs: 16px
+
+  --a-font-size-sm: 16px
+  --a-line-height-sm: 20px
+
+  --a-font-size-md: 20px
+  --a-line-height-md: 24px
+
+  --a-font-size-lg: 32px
+  --a-line-height-lg: 36px
+
+  --a-font-size-xl: 52px
+  --a-line-height-xl: 56px
+
+  --a-font-size-xxl: 72px
+  --a-line-height-xxl: 76px
+
+  /**
+   * Font weights
+   */
+
+  --a-font-weight-regular: 400
+  --a-font-weight-semi-bold: 600
+
+  /**
+   * Font family
+   */
+
+  --a-font-family: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
+
+  /**
+   * Spacing
+   */
+
+  --a-space-xs: 4px
+  --a-space-sm: 8px
+  --a-space-md: 16px
+  --a-space-lg: 24px
+  --a-space-xl: 32px
+
+  /**
+   * Sizing
+   */
+
+  --a-button-size-md: 42px
+
+  --a-input-size-md: 42px
+
+  --a-loader-size-md: 40px
+
+  /**
+   * Transitions
+   */
+
+  --a-transition-duration-main: .15s
+  --a-transition-timing-main: ease-in-out
+
+  /**
+   * Misc
+   */
+
+  --a-widget-width: 314px
+  --a-checkbox-radio-size: 20px
+  --a-opacity-disabled: .4
diff --git a/app/src/js/aurora/styles/main.sass b/app/src/js/aurora/styles/main.sass
new file mode 100644
index 00000000..0daed2db
--- /dev/null
+++ b/app/src/js/aurora/styles/main.sass
@@ -0,0 +1,21 @@
+@import '_includes/variables'
+@import '_includes/animations'
+
+[class^="aurora-"], [class^="aurora-"]:after, [class^="aurora-"]:before
+  scroll-behavior: smooth
+  box-sizing: border-box
+
+[class^="aurora-"], [class^="aurora-"] *
+  font-family: var(--a-font-family)
+  text-rendering: optimizeLegibility
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  -webkit-text-size-adjust: 100%
+
+[class^="aurora-"]::selection
+  background-color: var(--color-blue)
+  color: var(--color-white)
+
+[class^="aurora-"]::placeholder
+  color: var(--a-color-text-placeholder)
+  font-size: var(--a-font-size-md)
diff --git a/app/src/js/client.js b/app/src/js/client.js
index 6a9c13c9..2d017423 100644
--- a/app/src/js/client.js
+++ b/app/src/js/client.js
@@ -2,7 +2,7 @@ import { io } from 'socket.io-client'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 
-import { Button } from './aurora/button'
+import { Button } from './aurora'
 import Chatbot from './chatbot'
 import { INIT_MESSAGES } from './constants'
 
diff --git a/core/skills-endpoints.json b/core/skills-endpoints.json
index 642eb152..b5469965 100644
--- a/core/skills-endpoints.json
+++ b/core/skills-endpoints.json
@@ -68,56 +68,9 @@
       "route": "/api/action/social_communication/mbti/quiz",
       "params": []
     },
-    {
-      "method": "POST",
-      "route": "/api/action/games/akinator/choose_thematic",
-      "params": ["thematic"],
-      "entitiesType": "trim"
-    },
     {
       "method": "GET",
-      "route": "/api/action/games/akinator/setup",
-      "params": []
-    },
-    {
-      "method": "GET",
-      "route": "/api/action/games/akinator/guess",
-      "params": []
-    },
-    {
-      "method": "GET",
-      "route": "/api/action/games/akinator/retry",
-      "params": []
-    },
-    {
-      "method": "GET",
-      "route": "/api/action/games/guess_the_number/setup",
-      "params": []
-    },
-    {
-      "method": "GET",
-      "route": "/api/action/games/guess_the_number/guess",
-      "params": []
-    },
-    {
-      "method": "GET",
-      "route": "/api/action/games/guess_the_number/replay",
-      "params": []
-    },
-    {
-      "method": "GET",
-      "route": "/api/action/games/rochambeau/start",
-      "params": []
-    },
-    {
-      "method": "POST",
-      "route": "/api/action/games/rochambeau/play",
-      "params": ["handsign"],
-      "entitiesType": "trim"
-    },
-    {
-      "method": "GET",
-      "route": "/api/action/games/rochambeau/rematch",
+      "route": "/api/action/unknown/widget-playground/run",
       "params": []
     },
     {
@@ -190,6 +143,58 @@
       "route": "/api/action/leon/welcome/run",
       "params": []
     },
+    {
+      "method": "POST",
+      "route": "/api/action/games/akinator/choose_thematic",
+      "params": ["thematic"],
+      "entitiesType": "trim"
+    },
+    {
+      "method": "GET",
+      "route": "/api/action/games/akinator/setup",
+      "params": []
+    },
+    {
+      "method": "GET",
+      "route": "/api/action/games/akinator/guess",
+      "params": []
+    },
+    {
+      "method": "GET",
+      "route": "/api/action/games/akinator/retry",
+      "params": []
+    },
+    {
+      "method": "GET",
+      "route": "/api/action/games/guess_the_number/setup",
+      "params": []
+    },
+    {
+      "method": "GET",
+      "route": "/api/action/games/guess_the_number/guess",
+      "params": []
+    },
+    {
+      "method": "GET",
+      "route": "/api/action/games/guess_the_number/replay",
+      "params": []
+    },
+    {
+      "method": "GET",
+      "route": "/api/action/games/rochambeau/start",
+      "params": []
+    },
+    {
+      "method": "POST",
+      "route": "/api/action/games/rochambeau/play",
+      "params": ["handsign"],
+      "entitiesType": "trim"
+    },
+    {
+      "method": "GET",
+      "route": "/api/action/games/rochambeau/rematch",
+      "params": []
+    },
     {
       "method": "GET",
       "route": "/api/action/utilities/date_time/current_date_time",
diff --git a/package.json b/package.json
index 842edd20..db138d88 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "docker:check": "docker run --rm --interactive leon-ai/leon npm run check"
   },
   "dependencies": {
+    "@ark-ui/react": "0.5.0",
     "@aws-sdk/client-polly": "3.18.0",
     "@fastify/static": "6.9.0",
     "@ffmpeg-installer/ffmpeg": "1.1.0",
@@ -87,6 +88,7 @@
     "archiver": "5.3.1",
     "async": "3.2.4",
     "axios": "1.1.2",
+    "classnames": "2.3.2",
     "cross-env": "7.0.3",
     "dayjs": "1.11.5",
     "dotenv": "10.0.0",
@@ -141,6 +143,7 @@
     "nodemon": "2.0.19",
     "prettier": "2.8.7",
     "resolve-tspaths": "0.8.8",
+    "sass": "1.63.6",
     "semver": "7.3.5",
     "shx": "0.3.3",
     "ts-node": "10.9.1",
diff --git a/skills/unknown/widget-playground/src/actions/run.ts b/skills/unknown/widget-playground/src/actions/run.ts
index 021fae37..9935a66b 100644
--- a/skills/unknown/widget-playground/src/actions/run.ts
+++ b/skills/unknown/widget-playground/src/actions/run.ts
@@ -55,7 +55,7 @@ export const run: ActionFunction = async function () {
    * Forecast
    */
 
-  const forecast = new Container(
+  /*const forecast = new Container(
     [
       new Text({
         text: 'Paris',
@@ -188,9 +188,9 @@ export const run: ActionFunction = async function () {
     }
   )
 
-  /**
+  /!**
    * Select music provider
-   */
+   *!/
 
   const musicProviderList = new List({
     title: {
@@ -216,9 +216,9 @@ export const run: ActionFunction = async function () {
 
   await leon.answer({ widget: musicProviderList })
 
-  /**
+  /!**
    * Todo list
-   */
+   *!/
   const todoList = new List({
     title: {
       text: 'Shopping List',
@@ -245,7 +245,7 @@ export const run: ActionFunction = async function () {
   })
 
   await leon.answer({ widget: todoList })
-
+*/
   /**
    * Random number
    */