@instincthub/react-ui 0.0.1 → 0.0.2

package/dist/assets/css/react-video-player.css

@@ -0,0 +1,81 @@
+/* CSS for custom play button */
+.custom-play-button button {
+	background-color: #0077ff !important;
+	border: none;
+	color: #fff;
+	padding: 8px;
+	border-radius: 50%;
+	cursor: pointer;
+}
+
+/* CSS for custom progress bar */
+.custom-progress-bar {
+	height: 8px;
+	background-color: #ccc;
+	border-radius: 4px;
+}
+
+.custom-progress-bar .video-react-progress-holder {
+	height: 100%;
+	background-color: #0077ff;
+	border-radius: 4px;
+}
+
+/* Progress bar */
+.vjs-progress-control .vjs-play-progress,
+.vjs-progress-control .vjs-load-progress {
+	background-color: #ff7f00;
+}
+
+.vjs-progress-control .vjs-mouse-display {
+	background-color: #ff7f00;
+}
+
+.vjs-progress-control .vjs-mouse-display:before {
+	border-color: transparent #ff7f00 transparent transparent;
+}
+
+/* Play/Pause button */
+.vjs-play-control:before {
+	content: "\f04b";
+	font-family: "Font Awesome 5 Free";
+	font-weight: 400;
+}
+
+.vjs-paused .vjs-play-control:before {
+	content: "\f04c";
+}
+
+/* Volume button */
+.vjs-volume-menu-button:before {
+	content: "\f027";
+	font-family: "Font Awesome 5 Free";
+	font-weight: 400;
+}
+
+.vjs-mute:before,
+.vjs-volume-level:before {
+	font-family: "Font Awesome 5 Free";
+	font-weight: 400;
+}
+
+.vjs-mute:before {
+	content: "\f6a9";
+}
+
+.vjs-volume-level:before {
+	content: "\f028";
+}
+
+/* Fullscreen button */
+.vjs-fullscreen-control:before {
+	content: "\f065";
+	font-family: "Font Awesome 5 Free";
+	font-weight: 400;
+}
+
+.vjs-fullscreen-exit-control:before {
+	content: "\f066";
+	font-family: "Font Awesome 5 Free";
+	font-weight: 400;
+}

package/dist/assets/css/readme/overflow.md

@@ -0,0 +1,93 @@
+# InstinctHub CSS Overflow Utilities
+
+This document outlines the custom overflow utilities for InstinctHub's CSS framework, designed to provide consistent overflow behavior across the platform.
+
+## General Overflow Utilities
+
+These utilities control the overflow behavior in both directions (horizontal and vertical).
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-overflow-auto` | Adds scrollbars only when content overflows |
+| `.ihub-overflow-hidden` | Clips content that overflows the element's box |
+| `.ihub-overflow-visible` | Content is not clipped when it overflows |
+| `.ihub-overflow-scroll` | Always displays scrollbars, even when content doesn't overflow |
+
+## Axis-Specific Overflow
+
+These utilities allow you to control overflow behavior on a specific axis.
+
+### Horizontal Overflow
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-overflow-x-auto` | Adds horizontal scrollbar only when content overflows horizontally |
+| `.ihub-overflow-x-hidden` | Clips content that overflows horizontally |
+| `.ihub-overflow-x-scroll` | Always displays horizontal scrollbar |
+
+### Vertical Overflow
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-overflow-y-auto` | Adds vertical scrollbar only when content overflows vertically |
+| `.ihub-overflow-y-hidden` | Clips content that overflows vertically |
+| `.ihub-overflow-y-scroll` | Always displays vertical scrollbar |
+
+## Scrollbar Styling
+
+Custom scrollbar styling for elements with overflow.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-scrollbar-thin` | Displays thin scrollbars (4px) with InstinctHub brand colors |
+| `.ihub-scrollbar-hidden` | Hides scrollbars while maintaining scroll functionality |
+
+## Usage Examples
+
+### Basic Container with Auto Overflow
+
+```html
+<div class="ihub-overflow-auto" style="max-height: 300px">
+  <!-- Content that might overflow -->
+</div>
+```
+
+### Horizontal Scrolling Container
+
+```html
+<div class="ihub-overflow-x-auto ihub-overflow-y-hidden">
+  <!-- Horizontally scrollable content -->
+</div>
+```
+
+### Custom Scrollbar Styling
+
+```html
+<div class="ihub-overflow-auto ihub-scrollbar-thin">
+  <!-- Content with custom-styled scrollbars -->
+</div>
+```
+
+### Hidden Scrollbars
+
+```html
+<div class="ihub-overflow-auto ihub-scrollbar-hidden">
+  <!-- Content with functional but invisible scrollbars -->
+</div>
+```
+
+## Implementation Notes
+
+- These utilities use CSS variables from InstinctHub's main theme
+- Compatible with all modern browsers
+- For Internet Explorer support, use polyfills or fallbacks
+- Follows the `ihub-` prefix convention for InstinctHub's component library
+
+## Integration with Existing Components
+
+When using these utilities with existing InstinctHub components, follow these guidelines:
+
+1. Apply overflow utilities to container elements rather than directly to components
+2. Use `ihub-overflow-hidden` on parent containers to prevent layout shifts
+3. For long content areas like course descriptions or lesson content, use `ihub-overflow-y-auto` with a defined height
+4. When creating horizontally scrolling galleries or carousels, use `ihub-overflow-x-auto ihub-overflow-y-hidden`

package/dist/assets/css/readme/width-height-padding.md

@@ -0,0 +1,342 @@
+# InstinctHub CSS Utilities Documentation
+
+This documentation covers the custom CSS utilities for width, height, and padding created specifically for InstinctHub's front-end framework.
+
+## Table of Contents
+
+1. [Width Utilities](#width-utilities)
+2. [Height Utilities](#height-utilities)
+3. [Padding Utilities](#padding-utilities)
+4. [Responsive Utilities](#responsive-utilities)
+5. [Usage Examples](#usage-examples)
+
+## Width Utilities
+
+Width utilities control the horizontal space an element occupies.
+
+### Fixed Widths
+
+Fixed width utilities set a specific pixel width to an element.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-w-1` | Sets width to 1px |
+| `.ihub-w-2` | Sets width to 2px |
+| `.ihub-w-4` | Sets width to 4px |
+| `.ihub-w-8` | Sets width to 8px |
+| `.ihub-w-16` | Sets width to 16px |
+| `.ihub-w-24` | Sets width to 24px |
+| `.ihub-w-32` | Sets width to 32px |
+| `.ihub-w-48` | Sets width to 48px |
+| `.ihub-w-64` | Sets width to 64px |
+| `.ihub-w-80` | Sets width to 80px |
+| `.ihub-w-96` | Sets width to 96px |
+| `.ihub-w-128` | Sets width to 128px |
+| `.ihub-w-200` | Sets width to 200px |
+| `.ihub-w-250` | Sets width to 250px |
+| `.ihub-w-300` | Sets width to 300px |
+| `.ihub-w-350` | Sets width to 350px |
+| `.ihub-w-400` | Sets width to 400px |
+| `.ihub-w-500` | Sets width to 500px |
+| `.ihub-w-600` | Sets width to 600px |
+| `.ihub-w-700` | Sets width to 700px |
+| `.ihub-w-800` | Sets width to 800px |
+
+### Percentage Widths
+
+Percentage-based width utilities set a width relative to the parent element.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-w-25` | Sets width to 25% |
+| `.ihub-w-33` | Sets width to 33.333333% |
+| `.ihub-w-50` | Sets width to 50% |
+| `.ihub-w-75` | Sets width to 75% |
+| `.ihub-w-100` | Sets width to 100% |
+| `.ihub-w-auto` | Sets width to auto |
+
+### Maximum Widths
+
+Maximum width utilities constrain an element's width to a maximum value.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-max-w-300` | Sets max-width to 300px |
+| `.ihub-max-w-400` | Sets max-width to 400px |
+| `.ihub-max-w-500` | Sets max-width to 500px |
+| `.ihub-max-w-600` | Sets max-width to 600px |
+| `.ihub-max-w-700` | Sets max-width to 700px |
+| `.ihub-max-w-800` | Sets max-width to 800px |
+| `.ihub-max-w-900` | Sets max-width to 900px |
+| `.ihub-max-w-1000` | Sets max-width to 1000px |
+| `.ihub-max-w-1200` | Sets max-width to 1200px |
+| `.ihub-max-w-1400` | Sets max-width to 1400px |
+| `.ihub-max-w-1600` | Sets max-width to 1600px |
+| `.ihub-max-w-full` | Sets max-width to 100% |
+| `.ihub-max-w-none` | Removes max-width constraint |
+
+## Height Utilities
+
+Height utilities control the vertical space an element occupies.
+
+### Fixed Heights
+
+Fixed height utilities set a specific pixel height to an element.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-h-1` | Sets height to 1px |
+| `.ihub-h-2` | Sets height to 2px |
+| `.ihub-h-4` | Sets height to 4px |
+| `.ihub-h-8` | Sets height to 8px |
+| `.ihub-h-16` | Sets height to 16px |
+| `.ihub-h-24` | Sets height to 24px |
+| `.ihub-h-32` | Sets height to 32px |
+| `.ihub-h-48` | Sets height to 48px |
+| `.ihub-h-64` | Sets height to 64px |
+| `.ihub-h-80` | Sets height to 80px |
+| `.ihub-h-96` | Sets height to 96px |
+| `.ihub-h-128` | Sets height to 128px |
+| `.ihub-h-200` | Sets height to 200px |
+| `.ihub-h-300` | Sets height to 300px |
+| `.ihub-h-400` | Sets height to 400px |
+| `.ihub-h-500` | Sets height to 500px |
+| `.ihub-h-600` | Sets height to 600px |
+
+### Percentage Heights
+
+Percentage-based height utilities set a height relative to the parent element.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-h-25` | Sets height to 25% |
+| `.ihub-h-33` | Sets height to 33.333333% |
+| `.ihub-h-50` | Sets height to 50% |
+| `.ihub-h-75` | Sets height to 75% |
+| `.ihub-h-100` | Sets height to 100% |
+| `.ihub-h-auto` | Sets height to auto |
+| `.ihub-h-screen` | Sets height to 100vh (full viewport height) |
+
+### Maximum Heights
+
+Maximum height utilities constrain an element's height to a maximum value.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-max-h-200` | Sets max-height to 200px |
+| `.ihub-max-h-300` | Sets max-height to 300px |
+| `.ihub-max-h-400` | Sets max-height to 400px |
+| `.ihub-max-h-500` | Sets max-height to 500px |
+| `.ihub-max-h-600` | Sets max-height to 600px |
+| `.ihub-max-h-full` | Sets max-height to 100% |
+| `.ihub-max-h-screen` | Sets max-height to 100vh |
+| `.ihub-max-h-none` | Removes max-height constraint |
+
+### Minimum Heights
+
+Minimum height utilities set a minimum height for an element.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-min-h-0` | Sets min-height to 0 |
+| `.ihub-min-h-100` | Sets min-height to 100px |
+| `.ihub-min-h-200` | Sets min-height to 200px |
+| `.ihub-min-h-300` | Sets min-height to 300px |
+| `.ihub-min-h-400` | Sets min-height to 400px |
+| `.ihub-min-h-500` | Sets min-height to 500px |
+| `.ihub-min-h-full` | Sets min-height to 100% |
+| `.ihub-min-h-screen` | Sets min-height to 100vh |
+
+## Padding Utilities
+
+Padding utilities control the space between an element's content and its border.
+
+### All-Side Padding
+
+These utilities apply padding to all sides of an element.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-p-0` | Sets padding to 0 |
+| `.ihub-p-1` | Sets padding to 4px |
+| `.ihub-p-2` | Sets padding to 8px |
+| `.ihub-p-3` | Sets padding to 12px |
+| `.ihub-p-4` | Sets padding to 16px |
+| `.ihub-p-5` | Sets padding to 20px |
+| `.ihub-p-6` | Sets padding to 24px |
+| `.ihub-p-8` | Sets padding to 32px |
+| `.ihub-p-10` | Sets padding to 40px |
+| `.ihub-p-12` | Sets padding to 48px |
+| `.ihub-p-16` | Sets padding to 64px |
+| `.ihub-p-20` | Sets padding to 80px |
+| `.ihub-p-24` | Sets padding to 96px |
+| `.ihub-p-32` | Sets padding to 128px |
+
+### Directional Padding
+
+These utilities apply padding to specific sides of an element.
+
+#### Top Padding
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-pt-0` | Sets padding-top to 0 |
+| `.ihub-pt-1` through `.ihub-pt-32` | Sets padding-top from 4px to 128px |
+
+#### Right Padding
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-pr-0` | Sets padding-right to 0 |
+| `.ihub-pr-1` through `.ihub-pr-32` | Sets padding-right from 4px to 128px |
+
+#### Bottom Padding
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-pb-0` | Sets padding-bottom to 0 |
+| `.ihub-pb-1` through `.ihub-pb-32` | Sets padding-bottom from 4px to 128px |
+
+#### Left Padding
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-pl-0` | Sets padding-left to 0 |
+| `.ihub-pl-1` through `.ihub-pl-32` | Sets padding-left from 4px to 128px |
+
+### Horizontal & Vertical Padding
+
+These utilities apply padding to horizontal (left and right) or vertical (top and bottom) sides simultaneously.
+
+#### Horizontal Padding
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-px-0` | Sets horizontal padding to 0 |
+| `.ihub-px-1` through `.ihub-px-32` | Sets horizontal padding from 4px to 128px |
+
+#### Vertical Padding
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-py-0` | Sets vertical padding to 0 |
+| `.ihub-py-1` through `.ihub-py-32` | Sets vertical padding from 4px to 128px |
+
+## Responsive Utilities
+
+These utilities apply different styles based on screen size.
+
+### Small Screen Utilities (max-width: 768px)
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-sm-w-100` | Sets width to 100% on small screens |
+| `.ihub-sm-h-auto` | Sets height to auto on small screens |
+| `.ihub-sm-p-2` | Sets padding to 8px on small screens |
+| `.ihub-sm-p-3` | Sets padding to 12px on small screens |
+| `.ihub-sm-p-4` | Sets padding to 16px on small screens |
+| `.ihub-sm-py-2` | Sets vertical padding to 8px on small screens |
+| `.ihub-sm-py-3` | Sets vertical padding to 12px on small screens |
+| `.ihub-sm-px-2` | Sets horizontal padding to 8px on small screens |
+| `.ihub-sm-px-3` | Sets horizontal padding to 12px on small screens |
+
+### Medium Screen Utilities (769px - 1024px)
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-md-w-50` | Sets width to 50% on medium screens |
+| `.ihub-md-w-75` | Sets width to 75% on medium screens |
+| `.ihub-md-w-100` | Sets width to 100% on medium screens |
+| `.ihub-md-p-4` | Sets padding to 16px on medium screens |
+| `.ihub-md-p-5` | Sets padding to 20px on medium screens |
+| `.ihub-md-py-4` | Sets vertical padding to 16px on medium screens |
+| `.ihub-md-py-5` | Sets vertical padding to 20px on medium screens |
+| `.ihub-md-px-4` | Sets horizontal padding to 16px on medium screens |
+| `.ihub-md-px-5` | Sets horizontal padding to 20px on medium screens |
+
+### Large Screen Utilities (min-width: 1025px)
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-lg-w-25` | Sets width to 25% on large screens |
+| `.ihub-lg-w-33` | Sets width to 33.333333% on large screens |
+| `.ihub-lg-w-50` | Sets width to 50% on large screens |
+| `.ihub-lg-w-75` | Sets width to 75% on large screens |
+| `.ihub-lg-p-6` | Sets padding to 24px on large screens |
+| `.ihub-lg-p-8` | Sets padding to 32px on large screens |
+| `.ihub-lg-py-6` | Sets vertical padding to 24px on large screens |
+| `.ihub-lg-py-8` | Sets vertical padding to 32px on large screens |
+| `.ihub-lg-px-6` | Sets horizontal padding to 24px on large screens |
+| `.ihub-lg-px-8` | Sets horizontal padding to 32px on large screens |
+
+## Usage Examples
+
+### Basic Layout Structure
+
+```html
+<div class="ihub-w-100 ihub-max-w-1200 ihub-p-4 ihub-md-p-6 ihub-lg-p-8">
+  <div class="ihub-w-100 ihub-lg-w-50 ihub-p-3">
+    <!-- Content here -->
+  </div>
+</div>
+```
+
+### Card Component
+
+```html
+<div class="ihub-w-300 ihub-sm-w-100 ihub-md-w-50 ihub-p-4 ihub-max-h-500">
+  <div class="ihub-w-100 ihub-h-200">
+    <img src="image.jpg" alt="Card image" class="ihub-w-100 ihub-h-100">
+  </div>
+  <div class="ihub-py-3 ihub-px-2">
+    <h3>Card Title</h3>
+    <p>Card description goes here</p>
+  </div>
+</div>
+```
+
+### Full-Height Layout
+
+```html
+<div class="ihub-w-100 ihub-h-screen">
+  <header class="ihub-w-100 ihub-h-64 ihub-px-4 ihub-py-2">
+    <!-- Header content -->
+  </header>
+  <main class="ihub-w-100 ihub-min-h-400 ihub-p-4">
+    <!-- Main content -->
+  </main>
+  <footer class="ihub-w-100 ihub-h-80 ihub-py-4 ihub-px-4">
+    <!-- Footer content -->
+  </footer>
+</div>
+```
+
+### Responsive Grid
+
+```html
+<div class="ihub-w-100 ihub-p-2 ihub-md-p-4">
+  <div class="ihub-w-100 ihub-lg-w-33 ihub-p-2">Column 1</div>
+  <div class="ihub-w-100 ihub-lg-w-33 ihub-p-2">Column 2</div>
+  <div class="ihub-w-100 ihub-lg-w-33 ihub-p-2">Column 3</div>
+</div>
+```
+
+### Dashboard Widget
+
+```html
+<div class="ihub-w-350 ihub-sm-w-100 ihub-md-w-50 ihub-p-4 ihub-max-h-300">
+  <div class="ihub-w-100 ihub-h-200 ihub-p-3">
+    <!-- Widget content -->
+  </div>
+  <div class="ihub-p-2">
+    <button class="ihub-w-100 ihub-p-2">View Details</button>
+  </div>
+</div>
+```
+
+## Implementation Notes
+
+- These utilities use a 4px base scale for consistency
+- Use responsive utilities to create mobile-first designs
+- Combine width and height utilities with `display: flex` for advanced layouts
+- When nesting elements with percentage-based widths, remember that percentages are relative to the parent container

package/dist/assets/css/readme/z-index.md

@@ -0,0 +1,80 @@
+## **Structuring Your `z-index` System Efficiently**
+
+Instead of using arbitrary large numbers, it's best to follow a **layered approach** where `z-index` values are assigned based on UI importance. Here's how you can do it:
+
+---
+
+### **1. Define Logical Layers**
+
+Break down your UI into layers from the lowest to the highest priority:
+
+| **Layer**       | **z-index Range** | **Examples**               |
+| --------------- | ----------------- | -------------------------- |
+| **Base Layer**  | `0` - `10`        | Background, body content   |
+| **Navigation**  | `10` - `100`      | Headers, sidebars          |
+| **Overlays**    | `100` - `1000`    | Dropdowns, modals          |
+| **Popups**      | `1000` - `5000`   | Toasts, notifications      |
+| **Critical UI** | `5000+`           | Fullscreen modals, loaders |
+
+---
+
+### **2. Use CSS Variables for Maintainability**
+
+Instead of hardcoding values, define them in a **CSS variables file**:
+
+```css
+:root {
+  --z-base: 0;
+  --z-navigation: 100;
+  --z-overlay: 500;
+  --z-popup: 1000;
+  --z-critical: 9999;
+}
+
+.header {
+  z-index: var(--z-navigation);
+}
+
+.modal {
+  z-index: var(--z-overlay);
+}
+
+.toast {
+  z-index: var(--z-popup);
+}
+```
+
+---
+
+### **3. Create Stacking Contexts Instead of High `z-index` Values**
+
+Every positioned (`relative`, `absolute`, `fixed`, `sticky`) element creates a **new stacking context**. Instead of using `z-index: 999999`, wrap elements in a `relative` container with controlled stacking inside it:
+
+```css
+.container {
+  position: relative; /* Creates stacking context */
+  z-index: 10;
+}
+
+.child {
+  position: absolute;
+  z-index: 5; /* Only relevant within .container */
+}
+```
+
+---
+
+### **4. Use `z-index` Only When Necessary**
+
+- Don't set `z-index` unless you **need** to override stacking.
+- Check if a stacking issue can be resolved by reordering HTML structure instead.
+
+---
+
+### **5. Debug Stacking Issues with DevTools**
+
+If `z-index` isn’t working, use Chrome DevTools:
+
+1. Right-click an element → **Inspect**
+2. Check `z-index` under **Computed Styles**
+3. Look for unexpected **stacking contexts**

package/dist/assets/css/root.css

@@ -0,0 +1,70 @@
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  text-decoration: none;
+  list-style-type: none;
+  overflow: -moz-scrollbars-vertical;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:root {
+  --DarkCyan: #00838f;
+  --TurkishRose: #bc658d;
+  --Gunmetal: #2c333a;
+  --ViridianGreen: #009ba2;
+  --White: #ffffff;
+  --Danger: #ea5f5e;
+  --FadeGlass: #ffffffe6;
+
+  --Rhythm: #69779b;
+  --CaribbeanGreen: #00c5a2;
+  --OldLavender: #756c83;
+  --AmericanPurple: #432160;
+  --ChineseBlue: #415b90;
+  --DarkSlateGray: #314a52;
+  --MaximumRedPurple: #a03c78;
+  --DarkLavender: #6f539b;
+  --MetallicBlue: #3c5186;
+  --TiffanyBlue: #0fabbc;
+  --PoliceBlue: #394a6d;
+  --Corn: #fbeb5b;
+  --LimeGreen: #4be133;
+  --OldRose: #394a6d;
+  --Magnolia: #f4f3fe;
+  --ChineseSilver: #cccccc;
+  --LavenderGray: #c5c0db;
+  --Main-Gradient: linear-gradient(79.85deg, #009ba2 -20.87%, #bc658d 87.74%);
+  --Dark-Gradient: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(33, 33, 33, 1) 35%,
+    rgba(79, 79, 79, 1) 100%
+  );
+  --blue: rgb(26, 57, 87);
+  --white: rgb(236, 236, 236);
+  --DeepGreen-CyanTurquoise: #206d62;
+  --Gray: #f4f4f4;
+  --filter: none;
+  --shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  --overlay: rgba(44, 51, 58, 0.2);
+  --lightShadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
+  --borderDefault: 1px solid rgba(44, 51, 58, 0.2);
+  --nesgBlue: #083e9e;
+  --nesgBlueOpacity: #083f9e9c;
+  --main-color: #f857a6;
+  --second-color: #ff5858;
+  --OpacityBackground: #7d7c7c20;
+
+  /* Fonts */
+  --Nunito: "Nunito", sans-serif;
+  --Montserat: "Montserrat", sans-serif;
+
+  /* Z-index more details on ./README.md */
+  --z-base: 0;
+  --z-navigation: 100;
+  --z-overlay: 500;
+  --z-popup: 1000;
+  --z-critical: 9999;
+}

package/dist/assets/css/styles.css

@@ -0,0 +1,23 @@
+/* Base Styles */
+@import url("./fonts.css");
+@import url("./root.css");
+@import url("./bootstrap.css");
+@import url("./tag-only-selectors.css");
+@import url("./main.css");
+@import url("./forms/input-fields.css");
+@import url("./modals.css");
+@import url("./tooltip.css");
+
+/* UI Styles */
+@import url("./ui/parent-list-styles.css");
+@import url("./ui/list-styles.css");
+@import url("./ui/editor.css");
+@import url("./ui/content-viewer.css");
+@import url("./ui/code-display.css");
+
+/* Third-party Framework Styles */
+@import url("./material-ui.css");
+@import url("./primereact.css");
+
+/* Overrides & Dark Mode: Last to ensure it overrides other styles */
+@import url("./darkmode.css");