diff --git a/README.md b/README.md
index e41c10b..9f1f242 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,34 @@
-# shared-components
-Lib of independent components that can be utilised by sophisticated ones in @armco/components
+# @armco/shared-components
+
+Reusable React components and styles used across Armco apps.
+
+## Global stylesheet
+
+The library ships a canonical global stylesheet (variables, mixins, animations, resets, utility classes).
+
+Default behavior:
+- Importing anything from `@armco/shared-components` now automatically includes the global CSS (side‑effect import in `src/index.ts`). No extra step needed for host apps.
+
+Optional explicit usage patterns:
+- Explicit import (for clarity or code‑splitting boundaries):
+  `import "@armco/shared-components/global"`
+- Obtain URL to inject manually (e.g. server‑side rendering or HTML preload):
+  `import cssUrl from "@armco/shared-components/global?url"`
+  then: `<link rel="stylesheet" href={cssUrl} />`
+
+Why both?
+- Automatic inclusion removes friction for most consumers.
+- Explicit entry allows advanced setups (manual ordering, conditional loading, asset preloading).
+
+Notes:
+- Avoid importing both the base package and `./global` separately just to prevent duplicate inclusion; one is enough.
+- Component-level scoped styles are still included where needed via the build pipeline.
+- If you need to opt OUT of global styles, create a deep import path that bypasses `index.ts` (e.g. import specific components directly) and do not import `./global`; this is an advanced scenario.
+
+## Components
+
+Import the components you need:
+
+	import { Button, Modal } from "@armco/shared-components"
+
+Peer deps: react >= 16.8
diff --git a/package.json b/package.json
index 1517ab4..ee2d4ac 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@armco/shared-components",
   "description": "React Component Lib of independent components that can be utilised by sophisticated ones in @armco/components",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "type": "module",
   "author": "Armco (@restruct-corporate-advantage)",
   "types": "build/types/index.d.ts",
diff --git a/src/index.ts b/src/index.ts
index 9626d4f..9f2de03 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import "./styles/_global.scss"
+import "./styles/global"
 
 /* PLOP_INJECT_IMPORT */
 export { default as Avatar } from "./Avatar"
@@ -140,3 +140,7 @@ export { default as UserOptions } from "./UserOptions"
 export { default as Users } from "./Users"
 export { default as Wizard } from "./Wizard"
 export { default as WizardModal } from "./WizardModal"
+export * from "./enums"
+export * from "./types"
+export * from "./entity"
+export * from "./utils"
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
deleted file mode 100644
index 71d9730..0000000
--- a/src/styles/_global.scss
+++ /dev/null
@@ -1,545 +0,0 @@
-@use "./variables";
-@import "./mixins";
-@import "./animations";
-
-html {
-  font-size: 16px;
-  color: var(--ar-color-font);
-  @media screen and (max-width: 576px) {
-    --ar-height-footer: 3rem !important;
-  }
-}
-
-html, body, #root {
-	height: 100%;
-	width: 100%;
-}
-
-body {
-  @include drawer-header-footer-layout;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans Chakma' 'Segoe UI', 'Roboto', 'Oxygen'
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: var(--ar-color-font);
-  line-height: 1rem;
-}
-
-#root {
-  background-color: var(--ar-bg);
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-.label {
-  margin-bottom: 0.5rem;
-  font-weight: bold;
-
-  &.light {
-    color: var(--ar-color-label);
-  }
-}
-
-.form-component {
-  border: var(--ar-border);
-  border-radius: 0.125rem;
-  &:focus-visible {
-    border-bottom: var(--ar-border-bottom-focus-visible);
-    background-color: var(--ar-bg-hover);
-    outline: none;
-  }
-}
-
-label.required:after {
-  content: "*";
-  color: red;
-  margin-left: 0.25rem;
-}
-
-.form-label {
-  font-size: 0.75rem;
-  color: var(--ar-color-primary);
-}
-
-.flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.inline-flex-center {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flex-v-center {
-  display: flex;
-  align-items: center;
-}
-
-.flex-h-center {
-  display: flex;
-  justify-content: center;
-}
-
-.h-0 {
-  height: 0 !important;
-  min-height: 0 !important;
-  padding: 0 !important;
-  border: none !important;
-}
-
-.border {
-  border: var(--ar-border) !important;
-}
-
-.obscure-border {
-  border: var(--ar-obscure-border) !important;
-}
-
-.dotted-border {
-  border: var(--ar-dotted-border) !important;
-}
-
-.dashed-border {
-  border: var(--ar-dashed-border) !important;
-}
-
-.border-radius-l1 {
-  border-radius: 0.50rem;
-}
-
-.border-radius-l2 {
-  border-radius: 0.25rem;
-}
-
-.border-radius-prominent {
-  border-radius: 1.5rem;
-}
-
-.border-radius {
-  border-radius: 0.75rem;
-  &.l1 {
-    border-radius: 0.50rem;
-  }
-  
-  &.l2 {
-    border-radius: 0.25rem;
-  }
-  &.prominent {
-    border-radius: 1.5rem;
-  }
-}
-
-.border-radius-50 {
-  border-radius: 50% !important;
-}
-
-.border-radius-6px {
-  border-radius: 6px;
-}
-
-.border-left-radius {
-  border-top-left-radius: 0.75rem;
-  border-bottom-left-radius: 0.75rem;
-  &.l1 {
-    border-top-left-radius: 0.50rem;
-    border-bottom-left-radius: 0.50rem;
-  }
-  &.l2 {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-  }
-}
-
-.border-right-radius {
-  border-top-right-radius: 0.75rem;
-  border-bottom-right-radius: 0.75rem;
-  &.l1 {
-    border-top-right-radius: 0.50rem;
-    border-bottom-right-radius: 0.50rem;
-  }
-  &.l2 {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-  }
-}
-
-.border-top-radius {
-  border-top-left-radius: 0.75rem;
-  border-top-right-radius: 0.75rem;
-  &.l1 {
-    border-top-left-radius: 0.50rem;
-    border-top-right-radius: 0.50rem;
-  }
-  &.l2 {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-  }
-}
-
-.border-bottom-radius {
-  border-bottom-left-radius: 0.75rem;
-  border-bottom-right-radius: 0.75rem;
-  &.l1 {
-    border-bottom-left-radius: 0.50rem;
-    border-bottom-right-radius: 0.50rem;
-  }
-  &.l2 {
-    border-bottom-left-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-  }
-}
-
-.border-top {
-  border-top: var(--ar-border) !important;
-}
-
-.border-right {
-  border-right: var(--ar-border);
-}
-
-.border-left {
-  border-left: var(--ar-border);
-}
-
-.border-bottom {
-  border-bottom: var(--ar-border) !important;
-}
-
-.border-right-0 {
-  border-right: 0 !important;
-}
-
-.bold-stroke {
-  stroke-width: 1px;
-}
-
-.stroke-color {
-  stroke: var(--ar-color-font);
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.w-unset {
-  width: unset !important;
-}
-
-.h-unset {
-  height: unset !important;
-}
-
-.f1 {
-  font-size: 0.25rem !important;
-}
-
-.f2 {
-  font-size: 0.5rem !important;
-}
-
-.f25 {
-  font-size: 0.625rem !important;
-}
-
-.f3 {
-  font-size: 0.75rem !important;
-}
-
-.f35 {
-  font-size: 0.875rem !important;
-}
-
-.f4 {
-  font-size: 1rem !important;
-}
-
-.ar-NameSpaceModal__body, .ar-OrgModal__body {
-  max-width: 30vw;
-
-  .ar-help-text {
-    line-height: 1rem;
-    color: var(--ar-color-secondary);
-  }
-}
-
-.mx-8 {
-  margin-left: 8rem;
-  margin-right: 8rem;
-}
-
-.mx-12 {
-  margin-left: 12rem;
-  margin-right: 12rem;
-}
-
-.bg {
-  background-color: var(--ar-bg);
-}
-
-.top-1 {
-  top: 1rem;
-}
-
-.end-1 {
-  right: 1rem;
-}
-
-.end-2 {
-  right: 2rem;
-}
-
-.top-point5 {
-  top: 0.5rem;
-}
-
-.top-point25 {
-  top: 0.25rem;
-}
-
-.end-point5 {
-  right: 0.5rem;
-}
-
-.end-2point5 {
-  right: 2.5rem;
-}
-
-.end-3point5 {
-  right: 3.5rem;
-}
-
-.z-1 {
-  z-index: 1 !important;
-}
-
-.z-minus-1 {
-  z-index: -1 !important;
-}
-
-.z-2000 {
-  z-index: 2000;
-}
-
-.z-3000 {
-  z-index: 3000;
-}
-
-.lh-1-5 {
-  line-height: 1.5rem !important;
-}
-
-.lh-2 {
-  line-height: 2rem !important;
-}
-
-.high-shadow {
-  box-shadow: 0 30px 40px 0 rgba(16, 36, 94, .7);
-}
-
-.shadow {
-  box-shadow: 0px 4px 8px var(--ar-shadow);
-}
-
-.low-shadow {
-  box-shadow: 0px 2px 4px var(--ar-shadow);
-}
-
-.low-shadow-dark {
-  box-shadow: 0 1px 5px rgba(100, 100, 100, 0.5);
-}
-
-.hover-shadow {
-  box-shadow: none;
-  transition: box-shadow 0.5s;
-  &:hover {
-    box-shadow: 0px 4px 8px var(--ar-shadow);
-  }
-}
-
-.hover-shadow-dark {
-  box-shadow: none;
-  transition: box-shadow 0.5s;
-  :hover {
-    box-shadow: 0px 4px 8px rgba(100, 100, 100, 0.5);
-  }
-}
-
-.hover-low-shadow {
-  box-shadow: none;
-  transition: box-shadow 0.5s;
-  &:hover {
-    box-shadow: 0px 2px 4px var(--ar-shadow);
-  }
-}
-
-.hover-bg {
-  transition: background-color 0.3s;
-  &:hover {
-    background-color: var(--ar-bg-hover);
-
-    &.dark {
-      background-color: var(--ar-bg-hover-2);
-    }
-
-    &.dark2 {
-      background-color: var(--ar-bg-hover-5);
-    }
-  }
-}
-
-.start-n100 {
-  left: -100%;
-}
-
-.min-width-100 {
-  min-width: 100%;
-}
-
-.mxw-50 {
-  max-width: 50%;
-}
-
-.stubborn-effect {
-  transform: scale(1.05);
-}
-
-.mx-05 {
-  margin-left: 2px !important;
-  margin-right: 2px !important;
-}
-
-.m-05 {
-  margin: 2px !important;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-.pointer-events-none {
-  pointer-events: none;
-}
-
-.hover-underline:hover {
-  text-decoration: underline;
-}
-
-.mih-2 {
-  min-height: 2rem;
-}
-
-.miw-2 {
-  min-width: 2rem;
-}
-
-
-.miw-20 {
-  min-width: 20rem;
-}
-
-.miw-25 {
-  min-width: 25rem;
-}
-
-
-.miw-30 {
-  min-width: 30rem;
-}
-
-.mxh-20 {
-  max-height: 20rem;
-}
-
-.mxw-20 {
-  max-width: 20rem;
-}
-
-.mxw-80pct {
-  max-width: 80%;
-}
-
-.mxw-65pct {
-  max-width: 65%;
-}
-
-.max-vh-100 {
-  max-height: 100vh;
-}
-
-.max-vw-100 {
-  max-width: 100vw;
-}
-
-.w-0 {
-  width: 0;
-}
-
-.hover-border {
-  border: 1px solid transparent;
-  &:hover {
-    border: var(--ar-border);
-  }
-}
-
-.overflow-ellipsis {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.hover-scroll-text:hover {
-  white-space: nowrap;
-  text-overflow: unset;
-  animation: scrollText 5s linear infinite;
-  will-change: transform;
-}
-
-.custom-scrollbar {
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  /* Track */
-  &::-webkit-scrollbar-track {
-    background: #f1f1f1;
-  }
-
-  /* Handle */
-  &::-webkit-scrollbar-thumb {
-    background: #bbb;
-    border-radius: 2px;
-    &:hover {
-      background: #888;
-    }
-  }
-}
-
-.rotate {
-  animation: rotating 0.5s linear infinite;
-}
-
-.error {
-  color: red;
-  border-color: red;
-}
-
-// p {
-//   margin-bottom: 0;
-// }
-
-.invert-bg {
-  background-color: var(--ar-bg-invert-1) !important;
-}
\ No newline at end of file
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000..c619036
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,543 @@
+@use "./variables";
+@use "./mixins" as *;
+@use "./animations";
+
+html {
+	font-size: 16px;
+	color: var(--ar-color-font);
+	@media screen and (max-width: 576px) {
+		--ar-height-footer: 3rem !important;
+	}
+}
+
+html, body, #root {
+	height: 100%;
+	width: 100%;
+}
+
+body {
+	@include drawer-header-footer-layout;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans Chakma' 'Segoe UI', 'Roboto', 'Oxygen'
+		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	color: var(--ar-color-font);
+	line-height: 1rem;
+}
+
+#root {
+	background-color: var(--ar-bg);
+}
+
+code {
+	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+		monospace;
+}
+
+.label {
+	margin-bottom: 0.5rem;
+	font-weight: bold;
+
+	&.light {
+		color: var(--ar-color-label);
+	}
+}
+
+.form-component {
+	border: var(--ar-border);
+	border-radius: 0.125rem;
+	&:focus-visible {
+		border-bottom: var(--ar-border-bottom-focus-visible);
+		background-color: var(--ar-bg-hover);
+		outline: none;
+	}
+}
+
+label.required:after {
+	content: "*";
+	color: red;
+	margin-left: 0.25rem;
+}
+
+.form-label {
+	font-size: 0.75rem;
+	color: var(--ar-color-primary);
+}
+
+.flex-center {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.flex-1 {
+	flex: 1;
+}
+
+.inline-flex-center {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.flex-v-center {
+	display: flex;
+	align-items: center;
+}
+
+.flex-h-center {
+	display: flex;
+	justify-content: center;
+}
+
+.h-0 {
+	height: 0 !important;
+	min-height: 0 !important;
+	padding: 0 !important;
+	border: none !important;
+}
+
+.border {
+	border: var(--ar-border) !important;
+}
+
+.obscure-border {
+	border: var(--ar-obscure-border) !important;
+}
+
+.dotted-border {
+	border: var(--ar-dotted-border) !important;
+}
+
+.dashed-border {
+	border: var(--ar-dashed-border) !important;
+}
+
+.border-radius-l1 {
+	border-radius: 0.50rem;
+}
+
+.border-radius-l2 {
+	border-radius: 0.25rem;
+}
+
+.border-radius-prominent {
+	border-radius: 1.5rem;
+}
+
+.border-radius {
+	border-radius: 0.75rem;
+	&.l1 {
+		border-radius: 0.50rem;
+	}
+  
+	&.l2 {
+		border-radius: 0.25rem;
+	}
+	&.prominent {
+		border-radius: 1.5rem;
+	}
+}
+
+.border-radius-50 {
+	border-radius: 50% !important;
+}
+
+.border-radius-6px {
+	border-radius: 6px;
+}
+
+.border-left-radius {
+	border-top-left-radius: 0.75rem;
+	border-bottom-left-radius: 0.75rem;
+	&.l1 {
+		border-top-left-radius: 0.50rem;
+		border-bottom-left-radius: 0.50rem;
+	}
+	&.l2 {
+		border-top-left-radius: 0.25rem;
+		border-bottom-left-radius: 0.25rem;
+	}
+}
+
+.border-right-radius {
+	border-top-right-radius: 0.75rem;
+	border-bottom-right-radius: 0.75rem;
+	&.l1 {
+		border-top-right-radius: 0.50rem;
+		border-bottom-right-radius: 0.50rem;
+	}
+	&.l2 {
+		border-top-right-radius: 0.25rem;
+		border-bottom-right-radius: 0.25rem;
+	}
+}
+
+.border-top-radius {
+	border-top-left-radius: 0.75rem;
+	border-top-right-radius: 0.75rem;
+	&.l1 {
+		border-top-left-radius: 0.50rem;
+		border-top-right-radius: 0.50rem;
+	}
+	&.l2 {
+		border-top-left-radius: 0.25rem;
+		border-top-right-radius: 0.25rem;
+	}
+}
+
+.border-bottom-radius {
+	border-bottom-left-radius: 0.75rem;
+	border-bottom-right-radius: 0.75rem;
+	&.l1 {
+		border-bottom-left-radius: 0.50rem;
+		border-bottom-right-radius: 0.50rem;
+	}
+	&.l2 {
+		border-bottom-left-radius: 0.25rem;
+		border-bottom-right-radius: 0.25rem;
+	}
+}
+
+.border-top {
+	border-top: var(--ar-border) !important;
+}
+
+.border-right {
+	border-right: var(--ar-border);
+}
+
+.border-left {
+	border-left: var(--ar-border);
+}
+
+.border-bottom {
+	border-bottom: var(--ar-border) !important;
+}
+
+.border-right-0 {
+	border-right: 0 !important;
+}
+
+.bold-stroke {
+	stroke-width: 1px;
+}
+
+.stroke-color {
+	stroke: var(--ar-color-font);
+}
+
+.cursor-pointer {
+	cursor: pointer;
+}
+
+.w-unset {
+	width: unset !important;
+}
+
+.h-unset {
+	height: unset !important;
+}
+
+.f1 {
+	font-size: 0.25rem !important;
+}
+
+.f2 {
+	font-size: 0.5rem !important;
+}
+
+.f25 {
+	font-size: 0.625rem !important;
+}
+
+.f3 {
+	font-size: 0.75rem !important;
+}
+
+.f35 {
+	font-size: 0.875rem !important;
+}
+
+.f4 {
+	font-size: 1rem !important;
+}
+
+.ar-NameSpaceModal__body, .ar-OrgModal__body {
+	max-width: 30vw;
+
+	.ar-help-text {
+		line-height: 1rem;
+		color: var(--ar-color-secondary);
+	}
+}
+
+.mx-8 {
+	margin-left: 8rem;
+	margin-right: 8rem;
+}
+
+.mx-12 {
+	margin-left: 12rem;
+	margin-right: 12rem;
+}
+
+.bg {
+	background-color: var(--ar-bg);
+}
+
+.top-1 {
+	top: 1rem;
+}
+
+.end-1 {
+	right: 1rem;
+}
+
+.end-2 {
+	right: 2rem;
+}
+
+.top-point5 {
+	top: 0.5rem;
+}
+
+.top-point25 {
+	top: 0.25rem;
+}
+
+.end-point5 {
+	right: 0.5rem;
+}
+
+.end-2point5 {
+	right: 2.5rem;
+}
+
+.end-3point5 {
+	right: 3.5rem;
+}
+
+.z-1 {
+	z-index: 1 !important;
+}
+
+.z-minus-1 {
+	z-index: -1 !important;
+}
+
+.z-2000 {
+	z-index: 2000;
+}
+
+.z-3000 {
+	z-index: 3000;
+}
+
+.lh-1-5 {
+	line-height: 1.5rem !important;
+}
+
+.lh-2 {
+	line-height: 2rem !important;
+}
+
+.high-shadow {
+	box-shadow: 0 30px 40px 0 rgba(16, 36, 94, .7);
+}
+
+.shadow {
+	box-shadow: 0px 4px 8px var(--ar-shadow);
+}
+
+.low-shadow {
+	box-shadow: 0px 2px 4px var(--ar-shadow);
+}
+
+.low-shadow-dark {
+	box-shadow: 0 1px 5px rgba(100, 100, 100, 0.5);
+}
+
+.hover-shadow {
+	box-shadow: none;
+	transition: box-shadow 0.5s;
+	&:hover {
+		box-shadow: 0px 4px 8px var(--ar-shadow);
+	}
+}
+
+.hover-shadow-dark {
+	box-shadow: none;
+	transition: box-shadow 0.5s;
+	:hover {
+		box-shadow: 0px 4px 8px rgba(100, 100, 100, 0.5);
+	}
+}
+
+.hover-low-shadow {
+	box-shadow: none;
+	transition: box-shadow 0.5s;
+	&:hover {
+		box-shadow: 0px 2px 4px var(--ar-shadow);
+	}
+}
+
+.hover-bg {
+	transition: background-color 0.3s;
+	&:hover {
+		background-color: var(--ar-bg-hover);
+
+		&.dark {
+			background-color: var(--ar-bg-hover-2);
+		}
+
+		&.dark2 {
+			background-color: var(--ar-bg-hover-5);
+		}
+	}
+}
+
+.start-n100 {
+	left: -100%;
+}
+
+.min-width-100 {
+	min-width: 100%;
+}
+
+.mxw-50 {
+	max-width: 50%;
+}
+
+.stubborn-effect {
+	transform: scale(1.05);
+}
+
+.mx-05 {
+	margin-left: 2px !important;
+	margin-right: 2px !important;
+}
+
+.m-05 {
+	margin: 2px !important;
+}
+
+.invisible {
+	visibility: hidden;
+}
+
+.pointer-events-none {
+	pointer-events: none;
+}
+
+.hover-underline:hover {
+	text-decoration: underline;
+}
+
+.mih-2 {
+	min-height: 2rem;
+}
+
+.miw-2 {
+	min-width: 2rem;
+}
+
+.miw-20 {
+	min-width: 20rem;
+}
+
+.miw-25 {
+	min-width: 25rem;
+}
+
+.miw-30 {
+	min-width: 30rem;
+}
+
+.mxh-20 {
+	max-height: 20rem;
+}
+
+.mxw-20 {
+	max-width: 20rem;
+}
+
+.mxw-80pct {
+	max-width: 80%;
+}
+
+.mxw-65pct {
+	max-width: 65%;
+}
+
+.max-vh-100 {
+	max-height: 100vh;
+}
+
+.max-vw-100 {
+	max-width: 100vw;
+}
+
+.w-0 {
+	width: 0;
+}
+
+.hover-border {
+	border: 1px solid transparent;
+	&:hover {
+		border: var(--ar-border);
+	}
+}
+
+.overflow-ellipsis {
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.hover-scroll-text:hover {
+	white-space: nowrap;
+	text-overflow: unset;
+	animation: scrollText 5s linear infinite;
+	will-change: transform;
+}
+
+.custom-scrollbar {
+	&::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	/* Track */
+	&::-webkit-scrollbar-track {
+		background: #f1f1f1;
+	}
+
+	/* Handle */
+	&::-webkit-scrollbar-thumb {
+		background: #bbb;
+		border-radius: 2px;
+		&:hover {
+			background: #888;
+		}
+	}
+}
+
+.rotate {
+	animation: rotating 0.5s linear infinite;
+}
+
+.error {
+	color: red;
+	border-color: red;
+}
+
+// p {
+//   margin-bottom: 0;
+// }
+
+.invert-bg {
+	background-color: var(--ar-bg-invert-1) !important;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 24e7f49..b7bffad 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -54,8 +54,6 @@ export default defineConfig({
       treeshake: true,
       external: [
         new RegExp("^react.*"),
-        new RegExp("^highcharts.*"),
-        "d3",
       ],
       output: [
         {