diff --git a/app/app.js b/app/app.js
index c4a7471..7bb1d8f 100644
--- a/app/app.js
+++ b/app/app.js
@@ -3,6 +3,19 @@ import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'text2stl/config/environment';
 
+import '@esri/calcite-components/dist/components/calcite-button';
+import '@esri/calcite-components/dist/components/calcite-shell';
+import '@esri/calcite-components/dist/components/calcite-shell-panel';
+import '@esri/calcite-components/dist/components/calcite-action-bar';
+import '@esri/calcite-components/dist/components/calcite-block';
+import '@esri/calcite-components/dist/components/calcite-panel';
+import '@esri/calcite-components/dist/components/calcite-loader';
+import '@esri/calcite-components/dist/components/calcite-notice';
+import '@esri/calcite-components/dist/components/calcite-modal';
+import '@esri/calcite-components/dist/components/calcite-text-area';
+import '@esri/calcite-components/dist/components/calcite-label';
+import '@esri/calcite-components/dist/components/calcite-switch';
+
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
diff --git a/app/components/save-modal.hbs b/app/components/save-modal.hbs
index 2a14d61..fd850b9 100644
--- a/app/components/save-modal.hbs
+++ b/app/components/save-modal.hbs
@@ -1,14 +1,26 @@
-<Ui::Modal @onHide={{@onHide}}>
-  <h2 class="uk-modal-title" for="current-url">
+<calcite-modal
+  aria-labelledby="modal-title"
+  resize="vertical"
+  open
+  {{on "calciteModalClose" @onHide}}
+>
+  <div slot="header" id="modal-title">
     {{t "save_modal.title"}}
-  </h2>
-  <p>
-    {{t "save_modal.info" currentUrl=@currentUrl htmlSafe=true}}
-  </p>
+  </div>
+  <div slot="content">
+    <p>
+      {{t "save_modal.info" currentUrl=@currentUrl htmlSafe=true}}
+    </p>
 
-  <Ui::TextArea {{on "click" this.selectAll}} rows="15" id="current-url" readonly @value={{@currentUrl}} />
-
-  <button class="uk-button uk-button-primary uk-align-center uk-modal-close" type="button">
+    <calcite-text-area
+      label={{t "save_modal.title"}}
+      {{on "click" this.selectAll}}
+      value={{@currentUrl}}
+      rows="10"
+      read-only
+    />
+  </div>
+  <calcite-button {{on "click" @onHide}} slot="primary" width="full">
     {{t "save_modal.close"}}
-  </button>
-</Ui::Modal>
\ No newline at end of file
+  </calcite-button>
+</calcite-modal>
\ No newline at end of file
diff --git a/app/components/settings-form.hbs b/app/components/settings-form.hbs
index 7fa212f..9ae1bd1 100644
--- a/app/components/settings-form.hbs
+++ b/app/components/settings-form.hbs
@@ -1,18 +1,16 @@
-<ul uk-tab animation='uk-animation-fade'>
-  {{#each this.tabs as |tab|}}
-    <li class={{if (eq this.activeTab tab) 'uk-active'}} data-tab-item={{tab}}>
-      <a href='#' {{on 'click' (fn (mut this.currentTab) tab)}}>
-        {{t (concat 'settings_form.tabs.' tab)}}
-      </a>
-    </li>
-  {{/each}}
-</ul>
-<div>
-  {{#if (eq this.activeTab 'settings')}}
-    <SettingsForm::Settings @model={{@model}} />
-  {{else if (eq this.activeTab 'font')}}
-    <SettingsForm::Font @model={{@model}} />
-  {{else if (eq this.activeTab 'advanced')}}
+<calcite-block collapsible open heading={{t 'settings_form.tabs.settings.heading'}} description={{t 'settings_form.tabs.settings.description'}}>
+  <calcite-icon scale="s" slot="icon" icon="sliders"></calcite-icon>
+  <SettingsForm::Settings @model={{@model}} />
+</calcite-block>
+
+<calcite-block collapsible heading={{t 'settings_form.tabs.font.heading'}} description={{t 'settings_form.tabs.font.description'}}>
+  <calcite-icon scale="s" slot="icon" icon="description"></calcite-icon>
+  <SettingsForm::Font @model={{@model}} />
+</calcite-block>
+
+{{#if this.showAdvancedSettings}}
+  <calcite-block collapsible heading={{t 'settings_form.tabs.advanced.heading'}} description={{t 'settings_form.tabs.advanced.description'}}>
+    <calcite-icon scale="s" slot="icon" icon="plus"></calcite-icon>
     <SettingsForm::AdvancedSettings @model={{@model}} />
-  {{/if}}
-</div>
\ No newline at end of file
+  </calcite-block>
+{{/if}}
\ No newline at end of file
diff --git a/app/components/settings-form.ts b/app/components/settings-form.ts
index a4dbf98..2dd6f9f 100644
--- a/app/components/settings-form.ts
+++ b/app/components/settings-form.ts
@@ -1,29 +1,12 @@
 import Component from '@glimmer/component';
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import { ModelType } from 'text2stl/services/text-maker';
-import { tracked } from '@glimmer/tracking';
 
 interface SettingsFormTextSettingsArgs {
   model: TextMakerSettings;
 }
 
-type Tab = 'settings' | 'font' | 'advanced';
-
 export default class SettingsFormSettings extends Component<SettingsFormTextSettingsArgs> {
-  @tracked currentTab: Tab = 'settings';
-
-  get activeTab() {
-    return !this.showAdvancedSettings && this.currentTab === 'advanced'
-      ? 'settings'
-      : this.currentTab;
-  }
-
-  get tabs(): Tab[] {
-    const tabs: Tab[] = ['settings', 'font'];
-
-    return this.showAdvancedSettings ? [...tabs, 'advanced'] : tabs;
-  }
-
   get showAdvancedSettings() {
     return this.args.model.type !== ModelType.TextOnly;
   }
diff --git a/app/components/three-preview.hbs b/app/components/three-preview.hbs
index 5fed588..d257c2e 100644
--- a/app/components/three-preview.hbs
+++ b/app/components/three-preview.hbs
@@ -1,6 +1,7 @@
 {{yield (hash
   renderer=(component 'three-preview/renderer'
     mesh=@mesh
+    parentSize=@parentSize
   )
   size=(component 'three-preview/size'
     mesh=@mesh
diff --git a/app/components/three-preview/renderer.hbs b/app/components/three-preview/renderer.hbs
index ba9f1c1..88e643e 100644
--- a/app/components/three-preview/renderer.hbs
+++ b/app/components/three-preview/renderer.hbs
@@ -1,5 +1,5 @@
-<div
+<canvas
   ...attributes
   {{three-renderer @mesh parentSize=@parentSize nearCamera=@nearCamera}}
 >
-</div>
\ No newline at end of file
+</canvas>
\ No newline at end of file
diff --git a/app/components/three-preview/size.hbs b/app/components/three-preview/size.hbs
index 5f1b1cc..2088352 100644
--- a/app/components/three-preview/size.hbs
+++ b/app/components/three-preview/size.hbs
@@ -1,9 +1,7 @@
 {{#if this.meshSize}}
-  <p ...attributes>
-    {{t "three_preview.size"
-      x=(float-to-fixed this.meshSize.x 1)
-      y=(float-to-fixed this.meshSize.y 1)
-      z=(float-to-fixed this.meshSize.z 1)
-    }}     
-  </p>
+  {{t "three_preview.size"
+    x=(float-to-fixed this.meshSize.x 1)
+    y=(float-to-fixed this.meshSize.y 1)
+    z=(float-to-fixed this.meshSize.z 1)
+  }}
 {{/if}}
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 91af812..51451fb 100644
--- a/app/index.html
+++ b/app/index.html
@@ -12,7 +12,7 @@
         <link integrity="" rel="stylesheet" href="{{rootURL}}assets/text2stl.css">
         {{content-for "head-footer"}}
     </head>
-    <body>
+    <body class="calcite-mode-auto">
         {{content-for "loader"}}
         {{content-for "body"}}
         <script src="{{rootURL}}assets/vendor.js"></script>
diff --git a/app/initializers/calcite-components.ts b/app/initializers/calcite-components.ts
new file mode 100644
index 0000000..54b4121
--- /dev/null
+++ b/app/initializers/calcite-components.ts
@@ -0,0 +1,16 @@
+import { setAssetPath } from '@esri/calcite-components/dist/components';
+
+import config from 'text2stl/config/environment';
+const { rootURL, environment } = config;
+
+setAssetPath(
+  environment === 'development'
+    ? `${window.location.origin}${rootURL}assets/calcite/`
+    : `${rootURL}assets/calcite/`,
+);
+
+export function initialize(/* application */) {}
+
+export default {
+  initialize,
+};
diff --git a/app/modifiers/three-renderer.ts b/app/modifiers/three-renderer.ts
index d1139a5..ebd0b09 100644
--- a/app/modifiers/three-renderer.ts
+++ b/app/modifiers/three-renderer.ts
@@ -25,9 +25,9 @@ interface ThreeRendererModifierSignature {
 }
 
 export default class ThreeRendererModifier extends Modifier<ThreeRendererModifierSignature> {
-  scene: THREE.Scene;
-  camera: THREE.PerspectiveCamera;
-  renderer: THREE.WebGLRenderer;
+  scene?: THREE.Scene;
+  camera?: THREE.PerspectiveCamera;
+  renderer?: THREE.WebGLRenderer;
   mesh?: THREE.Mesh;
 
   controls?: OrbitControls;
@@ -37,7 +37,7 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
 
   rendererSize: { width: number; height: number } = { width: 0, height: 0 };
 
-  container?: HTMLDivElement;
+  canvas?: HTMLCanvasElement;
   namedArgs: namedArgs;
   animationFrameRequestID?: number;
 
@@ -45,6 +45,11 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
     super(owner, args);
 
     this.namedArgs = args.named;
+
+    registerDestructor(this, this.cleanup);
+  }
+
+  private initPreview() {
     this.scene = new THREE.Scene();
     this.scene.background = new THREE.Color(threePreviewSettings.backgroundColor);
 
@@ -69,17 +74,17 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
 
     // WebGL renderer
     this.renderer = new THREE.WebGLRenderer({
+      canvas: this.canvas,
       antialias: true,
       preserveDrawingBuffer: true, // use this to allow creation of image from canvas
     });
     this.renderer.setPixelRatio(window.devicePixelRatio);
     this.renderer.setSize(
+      // for parent sizing set size to 1x1 & let the renderFrame adapt the size accordingly later...
       this.namedArgs.parentSize ? 1 : 1024,
       this.namedArgs.parentSize ? 1 : 768,
     );
     this.renderer.setClearColor(0xffffff, 1);
-
-    registerDestructor(this, this.cleanup);
   }
 
   @action
@@ -88,16 +93,24 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
       cancelAnimationFrame(this.animationFrameRequestID);
     }
 
-    this.container = undefined;
+    this.canvas = undefined;
   }
 
   private addLight(x: number, y: number, z: number) {
+    if (!this.scene) {
+      return;
+    }
+
     const l = new THREE.PointLight(0xffffff, 0.7, 0);
     l.position.set(x, y, z);
     this.scene.add(l);
   }
 
   private addDecorators() {
+    if (!this.scene) {
+      return;
+    }
+
     const ground = new THREE.Mesh(
       new THREE.PlaneGeometry(2000, 2000),
       new THREE.MeshPhongMaterial({ color: threePreviewSettings.groundColor, depthWrite: false }),
@@ -115,13 +128,11 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
     this.scene.add(grid);
   }
 
-  private initContainer() {
-    if (!this.container) {
+  private initControl() {
+    if (!this.camera || !this.renderer) {
       return;
     }
 
-    this.container.appendChild(this.renderer.domElement);
-
     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
 
     this.controls.maxPolarAngle = Math.PI * 1;
@@ -161,15 +172,15 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
   }
 
   private renderFrame() {
-    if (!this.container) {
+    if (!this.canvas || !this.camera || !this.renderer || !this.scene) {
       return;
     }
 
     this.animationFrameRequestID = requestAnimationFrame(() => this.renderFrame());
 
     const { offsetWidth: width, offsetHeight: height } = this.namedArgs.parentSize
-      ? this.container?.parentElement ?? this.container
-      : this.container;
+      ? this.canvas?.parentElement ?? this.canvas
+      : this.canvas;
 
     if (this.rendererSize.width !== width || this.rendererSize.height !== height) {
       this.renderer.setSize(width, height);
@@ -187,15 +198,16 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
   }
 
   modify(
-    element: HTMLDivElement,
+    element: HTMLCanvasElement,
     [mesh]: [THREE.Mesh | undefined],
     { parentSize, nearCamera }: namedArgs,
   ) {
     this.namedArgs = { parentSize, nearCamera };
 
-    if (!this.container) {
-      this.container = element;
-      this.initContainer();
+    if (!this.canvas) {
+      this.canvas = element;
+      this.initPreview();
+      this.initControl();
       this.renderFrame();
     }
 
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 47f4922..f529310 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -101,3 +101,35 @@
     }
   }
 }
+
+
+
+// CALCITE
+#header-title {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+#header {
+  display: flex;
+  padding: 0 1rem;
+  background-color: var(--calcite-ui-foreground-1);
+}
+
+#header-controls {
+  display: flex;
+  margin-inline-start: auto;
+  align-self: center;
+}
+
+.label-wrapper {
+  display: flex;
+  margin-inline: 1rem;
+  padding: 0.5rem;
+  border: 1px solid var(--calcite-ui-border-1);
+  cursor: pointer;
+}
+
+calcite-switch {
+  margin: 0 0.5rem;
+}
diff --git a/app/templates/app/generator.hbs b/app/templates/app/generator.hbs
index 1bff11e..0803f2d 100644
--- a/app/templates/app/generator.hbs
+++ b/app/templates/app/generator.hbs
@@ -1,52 +1,56 @@
-<div uk-grid='' margin='' class='uk-grid-divider uk-grid'>
-
-  <div class='uk-width-1-1 uk-width-1-3@m'>
-    <SettingsForm @model={{this.model}} />
-
+<calcite-shell-panel slot="panel-start">
+  <calcite-panel heading="Settings">
+      <calcite-action-bar slot="action-bar" expand-disabled>
+        <calcite-action-group>
+            <calcite-action
+              text={{t 'save'}}
+              icon="save"
+              {{on 'click' this.showSaveModal}}
+            />
+        </calcite-action-group>
+        <calcite-action-group>
+            <calcite-action text="Undo" icon="undo"></calcite-action>
+            <calcite-action text="Redo" icon="redo"></calcite-action>
+        </calcite-action-group>
+        <calcite-action-group>
+            <calcite-action text="Reset" icon="reset"></calcite-action>
+        </calcite-action-group>
+      </calcite-action-bar>
+
+
+      <div slot="footer">
+        {{#if this.counter}}
+          <calcite-notice open icon="information">
+            <div slot="message">
+              {{t 'stl_counter' count=this.counter}}
+            </div>
+          </calcite-notice>
+        {{/if}}
 
-      <button
-        type='button'
-        class='uk-button uk-button-primary uk-align-center'
-        disabled={{this.exportDisabled}}
-        {{on 'click' this.exportSTL}}
-      >
-        {{#if this.meshGenerating}}
-          <div uk-spinner></div>
-        {{else}}
+        <calcite-button
+          width="full"
+          disabled={{this.exportDisabled}}
+          loading={{this.meshGenerating}}
+          {{on 'click' this.exportSTL}}
+        >
           {{t 'export_stl'}}
-        {{/if}}
-      </button>
+        </calcite-button>
+      </div>
 
-      <button
-        type='button'
-        class='uk-button uk-align-center'
-        {{on 'click' this.showSaveModal}}
-      >
-        {{t 'save'}}
-      </button>
+      <SettingsForm @model={{this.model}} />
+  </calcite-panel>
+</calcite-shell-panel>
 
 
+<calcite-panel>
+  <ThreePreview @mesh={{this.mesh.value}} @parentSize={{true}}  as |preview|>
+    <preview.renderer />
+    <div slot='footer'>
+      <preview.size />
+    </div>
+</ThreePreview>
 
-    {{#if this.counter}}
-      <div class='uk-text-small uk-text-muted uk-text-center'>
-        {{t 'stl_counter' count=this.counter}}
-      </div>
-    {{/if}}
-  </div>
-
-  <div class='uk-width-1-1 uk-width-2-3@m'>
-    <ThreePreview @mesh={{this.mesh.value}} as |preview|>
-      <div class='uk-card uk-card-hover uk-card-small'>
-        <div class='uk-card-media-top'>
-          <preview.renderer />
-        </div>
-        <div class='uk-card-footer'>
-          <preview.size class='uk-text-small uk-text-muted uk-text-center' />
-        </div>
-      </div>
-    </ThreePreview>
-  </div>
-</div>
+</calcite-panel>
 
 {{#if this.saveModalVisible}}
   <SaveModal @onHide={{this.hideSaveModal}} @currentUrl={{this.currentUrl}} />
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index a194d9f..5beff7c 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,10 +1,33 @@
 {{page-title (concat (t "app_name") " - " (t "app_title"))}}
-<div class="uk-container" uk-height-viewport="expand: true">
+
+<calcite-shell >
+  <div slot="header" id="header">
+
+    <h2 id="header-title">
+      <LinkTo @route="app.index">{{t "app_name"}}</LinkTo>
+    </h2>
+
+    <h3 id="header-sub-title">{{t "app_subtitle"}}</h3>
+
+    <div id="header-controls">
+      <calcite-label layout="inline" class="label-wrapper">
+        Dark mode: Off
+        <calcite-switch></calcite-switch>
+        On
+      </calcite-label>
+
+      <LangSwitcher />
+    </div>
+  </div>
+
+  {{outlet}}
+</calcite-shell>
+
+{{!-- <div class="uk-container" uk-height-viewport="expand: true">
   <div class="uk-flex uk-flex-column" uk-height-viewport="expand: true">
-    
-    {{!-- HEADER --}}
+
     <div class="uk-flex-none">
-      <div uk-grid margin="" class="uk-grid">     
+      <div uk-grid margin="" class="uk-grid">
         <div class="uk-width-1-1 uk-width-1-4@m uk-first-column">
           <h1 class="uk-text-primary uk-text-center">
             <LinkTo @route="app.index">{{t "app_name"}}</LinkTo>
@@ -14,7 +37,7 @@
         <div class="uk-width-1-1 uk-width-3-4@m uk-flex uk-flex-middle">
           <div uk-grid="" class="uk-grid uk-width-expand">
             <div class="uk-width-1-1 uk-width-1-2@m uk-width-3-4@l uk-flex uk-flex-center uk-flex-middle">
-              <h4 class="uk-text-muted uk-margin-remove-top">{{t "app_subtitle"}}</h4>
+
             </div>
             <div class="uk-width-1-1 uk-width-1-2@m uk-width-1-4@l uk-flex uk-flex-center uk-flex-right@m uk-flex-middle">
               <LangSwitcher />
@@ -25,12 +48,10 @@
 
     </div>
 
-    {{!-- MAIN CONTENT --}}
     <div class="uk-flex-1 uk-padding uk-padding-small">
       {{outlet}}
     </div>
 
-    {{!-- FOOTER --}}
     <div class="uk-flex-none">
       <div class="uk-text-small uk-text-muted uk-text-center app-footer">
         {{t "footer.made_by"
@@ -46,8 +67,8 @@
         |
         <a href="https://github.com/romgere/text2stl/issues/new" target="_blank" rel="noopener noreferrer">
           {{t "footer.issue"}}
-        </a>        
+        </a>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div> --}}
\ No newline at end of file
diff --git a/ember-cli-build.js b/ember-cli-build.js
index e42a952..ceb84e3 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -2,6 +2,7 @@
 
 // eslint-ignore-newt-line @typescript-eslint/no-var-requires
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+const { Funnel } = require('broccoli-funnel');
 
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
@@ -14,5 +15,15 @@ module.exports = function (defaults) {
     },
   });
 
-  return app.toTree();
+  // Import the calcite CSS into the app CSS
+  app.import('node_modules/@esri/calcite-components/dist/calcite/calcite.css');
+
+  // Funnel the calcite static assets into the build assets directory
+  let calciteAssetsTree = new Funnel('./node_modules/@esri/calcite-components/dist', {
+    srcDir: '/',
+    include: ['calcite/assets/**'],
+    destDir: '/assets',
+  });
+
+  return app.toTree([calciteAssetsTree]);
 };
diff --git a/package.json b/package.json
index 9aeaf2c..2a902aa 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "@types/opentype.js": "^1.3.1",
     "@types/qunit": "^2.11.1",
     "@types/rsvp": "^4.0.3",
+    "@types/sortablejs": "^1.15.3",
     "@types/three": "~0.137.0",
     "@types/uikit": "^3.14.1",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
@@ -127,11 +128,15 @@
     "edition": "octane"
   },
   "dependencies": {
+    "@esri/calcite-components": "^1.9.1",
     "@samuelmeuli/font-manager": "^1.4.0",
     "font-picker": "^3.5.1",
     "matter-js": "^0.17.1",
     "opentype.js": "^1.3.3",
     "poly-decomp": "^0.3.0",
     "three": "^0.137.4"
+  },
+  "volta": {
+    "node": "18.18.1"
   }
 }
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 33b2db4..f745dcb 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -28,10 +28,17 @@ language: Language
 mm_unit: mm
 settings_form:
   tabs:
-    settings: Settings
-    font: Font
-    advanced: More...
+    settings:
+      heading: Settings
+      description: Text, size, alignment...
+    font:
+      heading: Font
+      description: Choose google font or custom font file
+    advanced:
+      heading: More...
+      description: Lorem ipsum dolor sit amet consectetur
 export_stl: Export STL
+generating_stl: Export STL
 stl_counter: '{count} STL files have been generated'
 footer:
   made_by: Made with ♥ By {author} with {ember} & {three}
diff --git a/yarn.lock b/yarn.lock
index 2771305..9a787eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1284,6 +1284,43 @@
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
   integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==
 
+"@esri/calcite-components@^1.9.1":
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/@esri/calcite-components/-/calcite-components-1.9.1.tgz#ae7c2c7bdbdc5f5081a861feece6c6c8390110c1"
+  integrity sha512-dgBkb/3tOFsuvJ1Z9a7iWEkUb3ft9HzbigM36dok3Eg3lC9rcGcYpiO4ZJivPKQkJQahunqf9wZEfVzwzarVEw==
+  dependencies:
+    "@floating-ui/dom" "1.5.3"
+    "@stencil/core" "2.22.3"
+    "@types/color" "3.0.4"
+    color "4.2.3"
+    composed-offset-position "0.0.4"
+    dayjs "1.11.10"
+    focus-trap "7.5.2"
+    form-request-submit-polyfill "2.0.0"
+    lodash-es "4.17.21"
+    sortablejs "1.15.0"
+    timezone-groups "0.6.0"
+
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+  dependencies:
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/dom@1.5.3":
+  version "1.5.3"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+  dependencies:
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/utils@^0.1.3":
+  version "0.1.6"
+  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+
 "@formatjs/ecma402-abstract@1.11.0":
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.0.tgz#7e91e6cc7cfebdc07171e00a3288719705e0108c"
@@ -1658,6 +1695,11 @@
   resolved "https://registry.yarnpkg.com/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#568d9beae00b0d835f4f8c53fd55714986492e61"
   integrity sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==
 
+"@stencil/core@2.22.3":
+  version "2.22.3"
+  resolved "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz#83987e20bba855c450f6d6780e3a20192603f13f"
+  integrity sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -1710,6 +1752,25 @@
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.0.tgz#23509ebc1fa32f1b4d50d6a66c4032d5b8eaabdc"
   integrity sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==
 
+"@types/color-convert@*":
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.1.tgz#45216f0d8289c6ae32d139ed08c205a9c55bb5d0"
+  integrity sha512-GwXanrvq/tBHJtudbl1lSy9Ybt7KS9+rA+YY3bcuIIM+d6jSHUr+5yjO83gtiRpuaPiBccwFjSnAK2qSrIPA7w==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
+"@types/color@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/@types/color/-/color-3.0.4.tgz#53ceca0946660c7779442948878172c6ace13777"
+  integrity sha512-OpisS4bqJJwbkkQRrMvURf3DOxBoAg9mysHYI7WgrWpSYHqHGKYBULHdz4ih77SILcLDo/zyHGFyfIl9yb8NZQ==
+  dependencies:
+    "@types/color-convert" "*"
+
 "@types/component-emitter@^1.2.10":
   version "1.2.11"
   resolved "https://registry.yarnpkg.com/@types/component-emitter/-/component-emitter-1.2.11.tgz#50d47d42b347253817a39709fef03ce66a108506"
@@ -2085,6 +2146,11 @@
     "@types/mime" "^1"
     "@types/node" "*"
 
+"@types/sortablejs@^1.15.3":
+  version "1.15.3"
+  resolved "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.3.tgz#b9c0e2740100ae94919c9f138a38600c8f8124ea"
+  integrity sha512-v+zh6TZP/cLeMUK0MDx1onp8e7Jk2/4iTQ7sb/n80rTAvBm14yJkpOEfJdrTCkHiF7IZbPjxGX2NRJfogRoYIg==
+
 "@types/symlink-or-copy@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@types/symlink-or-copy/-/symlink-or-copy-1.2.0.tgz#4151a81b4052c80bc2becbae09f3a9ec010a9c7a"
@@ -4527,16 +4593,32 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color-support@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
+color@4.2.3:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 colord@^2.9.3:
   version "2.9.3"
   resolved "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
@@ -4608,6 +4690,11 @@ component-emitter@^1.2.1, component-emitter@~1.3.0:
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
+composed-offset-position@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.npmjs.org/composed-offset-position/-/composed-offset-position-0.0.4.tgz#ca8854abf15e3c235ecf4df125a27fe88af76ea4"
+  integrity sha512-vMlvu1RuNegVE0YsCDSV/X4X10j56mq7PCIyOKK74FxkXzGLwhOUmdkJLSdOBOMwWycobGUMgft2lp+YgTe8hw==
+
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -4978,6 +5065,11 @@ date-time@^2.1.0:
   dependencies:
     time-zone "^1.0.0"
 
+dayjs@1.11.10:
+  version "1.11.10"
+  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 debug@2.6.9, debug@^2.1.0, debug@^2.1.1, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -7157,6 +7249,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-trap@7.5.2:
+  version "7.5.2"
+  resolved "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz#e5ee678d10a18651f2591ffb66c949fb098d57cf"
+  integrity sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==
+  dependencies:
+    tabbable "^6.2.0"
+
 follow-redirects@^1.0.0:
   version "1.14.8"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
@@ -7197,6 +7296,11 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-request-submit-polyfill@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/form-request-submit-polyfill/-/form-request-submit-polyfill-2.0.0.tgz#2557c9c2385989954461e327e81619993b5bce96"
+  integrity sha512-p0+M92y2gFnP0AuuL8VJ0GYVzAT0bYp3GsSkmPFhvUopdnfDLP/9xplQTBBc4w8qOjKRzdK7GaFcdL9IhlXdTQ==
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -8306,6 +8410,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -9077,6 +9186,11 @@ locate-path@^7.1.0:
   dependencies:
     p-locate "^6.0.0"
 
+lodash-es@4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash._arraycopy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz#76e7b7c1f1fb92547374878a562ed06a3e50f6e1"
@@ -11759,6 +11873,13 @@ simple-html-tokenizer@^0.5.11, simple-html-tokenizer@^0.5.8:
   resolved "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.5.11.tgz#4c5186083c164ba22a7b477b7687ac056ad6b1d9"
   integrity sha512-C2WEK/Z3HoSFbYq8tI7ni3eOo/NneSPRoPpcM7WdLjFOArFuyXEjAoCdOC3DgMfRyziZQ1hCNR4mrNdWEvD0og==
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@@ -11864,6 +11985,11 @@ sort-package-json@^1.57.0:
     is-plain-obj "2.1.0"
     sort-object-keys "^1.1.3"
 
+sortablejs@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a"
+  integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==
+
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -12384,6 +12510,11 @@ sync-disk-cache@^2.0.0:
     rimraf "^3.0.0"
     username-sync "^1.0.2"
 
+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 table@^6.8.1:
   version "6.8.1"
   resolved "https://registry.npmjs.org/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
@@ -12550,6 +12681,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+timezone-groups@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.npmjs.org/timezone-groups/-/timezone-groups-0.6.0.tgz#cf719b86b7943833436c53afc69a0f7246e752d7"
+  integrity sha512-fh083ECJPWzYB9KVc2AsWoQr3D+3KdAnE0/swgVKt1VGEqj2yW0e9LionmH3U/rpJ98t+C1O0SgY0f0aJtTeOQ==
+
 tiny-glob@0.2.9:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2"