@instincthub/react-ui 0.0.3 → 0.0.5

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

@@ -1,93 +0,0 @@
-# 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/src/assets/css/readme/width-height-padding.md

@@ -1,342 +0,0 @@
-# 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/src/components/forms/SubmitBtn.js

@@ -1,2 +0,0 @@
-import{jsx as t,jsxs as i}from"react/jsx-runtime";import s from"@mui/icons-material/ChevronRight";function e(e){return t("div",{className:"ihub-react-button ihub-no-icon",children:i("button",{type:"submit",id:"SubmitBtn",className:"ihub-submit-btn ihub-important-btn ihub-anime-button-chevron",disabled:!(0!==e.status&&!e.disableds),children:[0===e.status&&t("svg",{className:"ihub-bt-spinner",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",children:t("path",{d:"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"})}),t("span",{children:e.labels}),t(s,{style:{color:"#ffffff"},id:"animate",width:"16",height:"16"})]})})}export{e as default};
-//# sourceMappingURL=SubmitBtn.js.map

package/dist/src/components/forms/SubmitBtn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SubmitBtn.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/src/components/lib/modals.js

@@ -1,2 +0,0 @@
-var n=function(n){if(!n||n.length<3)return!1;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n)},e=function(n){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return new Promise((function(t){var o=document.getElementById("confirmModal");o||((o=document.createElement("div")).id="confirmModal");var i='\n      <section id="myModal" class="modal">\n        <div class="modal-content">\n          <span class="close" onclick="window.handleCancel()">×</span>\n          <p class="'.concat(e?"something_bad_flagged":"something_bad",'">\n            ').concat(e?"Unexpected things will happen if you don’t read this!":"You are about to submit!","\n          </p>\n          <p>").concat(n||"Carefully read the instructions before making a decision. Ready? Hit the continue button!",'</p>\n          <div class="mt-4">\n            <button type="button" class="danger-btn d-inline-block" onclick="window.handleCancel()">Cancel</button>\n            <button type="button" class="important-btn confirm-btn" onclick="window.handleConfirm()">Ok</button>\n          </div>\n        </div>\n      </section>\n    ');o.innerHTML=i,document.body.appendChild(o);var d=function(){var n;null===(n=o)||void 0===n||n.remove()};window.handleCancel=function(){d(),t(!1),console.log("")},window.handleConfirm=function(){d(),t(!0)},o.addEventListener("click",(function(n){var e=n.target;"myModal"!==e.id&&"confirmModal"!==e.id||d()}))}))},t=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:200,t=200===e||201===e?"Awesome! The update was made.":500===e?"Sorry, the server can't process your request":"Hmmm..., Something went wrong. Try again",o=200===e||201===e?'<svg viewBox="0 0 24 24" style="color: var(--ViridianGreen); width:24px; height:24px;"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>':'<svg viewBox="0 0 24 24" style="color: var(--Danger); width:24px; height:24px;"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>',i=document.getElementById("openToast");i||((i=document.createElement("div")).id="openToast");var d='\n    <div class="toast-wrapper">\n      <div class="slide-in-top">\n        <div class="align-text">\n          <div class="valid_btn">\n            '.concat(o,'\n            <p class="').concat(200===e||201===e?"isDone":"isError",'">\n              ').concat(n||t,'\n            </p>\n          </div>\n        </div>\n        <svg width="800px" height="800px" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" \n          class="close-btn" onclick="window.cleanupToast()">\n          <path d="M3 21.32L21 3.32001" stroke="var(--Gunmetal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n          <path d="M3 3.32001L21 21.32" stroke="var(--Gunmetal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n        </svg>\n      </div>\n    </div>\n  ');i.innerHTML=d,document.body.appendChild(i),window.cleanupToast=function(){var n;null===(n=i)||void 0===n||n.remove()},setTimeout((function(){window.cleanupToast()}),1e4)},o=function(e){return new Promise((function(o){var i,d=document.getElementById("confirmModal");d||((d=document.createElement("div")).id="confirmModal");var a='\n      <section id="myModal" class="modal">\n        <div class="modal-content">\n          <svg width="800px" height="800px" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" \n            class="ih_get_user_email_modal_close_btn" onclick="window.handleCleanUpInput()">\n            <path d="M3 21.32L21 3.32001" stroke="var(--Gunmetal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n            <path d="M3 3.32001L21 21.32" stroke="var(--Gunmetal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n          </svg>\n          <h4>Enrol for '.concat(e,'</h4>\n          <p>Enter a valid Email Address</p>\n          <input type="email" name="email" id="userInput" oninput="window.handleInput(this)" />\n          <div class="action_btn">\n            <button type="button" disabled id="proceedBtn" class="delete_btn important-btn" onclick="window.handleConfirm()">Proceed</button>\n          </div>\n        </div>\n      </section>\n    ');d.innerHTML=a,document.body.appendChild(d);var l=document.getElementById("proceedBtn");window.handleInput=function(e){n(e.value)?(l&&(l.disabled=!1),i=e.value):(l&&(l.disabled=!0),i=void 0)};var r=function(){var n;null===(n=d)||void 0===n||n.remove()};window.handleConfirm=function(){n(i)?(r(),o(i)):t("You need to enter a valid email!",400)},window.handleCleanUpInput=function(){r(),o(void 0)}}))};export{o as getUserEmailInputModal,e as openConfirmModal,t as openToast};
-//# sourceMappingURL=modals.js.map

package/dist/src/components/lib/modals.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modals.js","sources":["../../../../src/components/lib/modals.ts"],"sourcesContent":["// Type for status codes\r\ntype StatusCode = 200 | 201 | 400 | 500 | number;\r\n\r\n// Utility function to validate email\r\nconst isValidEmail = (input: string | undefined): boolean => {\r\n  if (!input || input.length < 3) {\r\n    return false;\r\n  }\r\n  const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n  return emailRegex.test(input);\r\n};\r\n\r\n// Declare global window interface extensions for event handlers\r\ndeclare global {\r\n  interface Window {\r\n    handleCancel: () => void;\r\n    handleConfirm: () => void;\r\n    cleanupToast: () => void;\r\n    handleInput: (e: HTMLInputElement) => void;\r\n    handleCleanUpInput: () => void;\r\n  }\r\n}\r\n\r\n// Open a confirmation modal\r\nexport const openConfirmModal = (\r\n  message: string,\r\n  flag: boolean = false\r\n): Promise<boolean> => {\r\n  return new Promise((resolve) => {\r\n    let modalContainer = document.getElementById(\r\n      \"confirmModal\"\r\n    ) as HTMLDivElement | null;\r\n    if (!modalContainer) {\r\n      modalContainer = document.createElement(\"div\");\r\n      modalContainer.id = \"confirmModal\";\r\n    }\r\n\r\n    const modalContent = `\r\n      <section id=\"myModal\" class=\"modal\">\r\n        <div class=\"modal-content\">\r\n          <span class=\"close\" onclick=\"window.handleCancel()\">×</span>\r\n          <p class=\"${flag ? \"something_bad_flagged\" : \"something_bad\"}\">\r\n            ${\r\n              flag\r\n                ? \"Unexpected things will happen if you don’t read this!\"\r\n                : \"You are about to submit!\"\r\n            }\r\n          </p>\r\n          <p>${\r\n            message ||\r\n            \"Carefully read the instructions before making a decision. Ready? Hit the continue button!\"\r\n          }</p>\r\n          <div class=\"mt-4\">\r\n            <button type=\"button\" class=\"danger-btn d-inline-block\" onclick=\"window.handleCancel()\">Cancel</button>\r\n            <button type=\"button\" class=\"important-btn confirm-btn\" onclick=\"window.handleConfirm()\">Ok</button>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    `;\r\n\r\n    modalContainer.innerHTML = modalContent;\r\n    document.body.appendChild(modalContainer);\r\n\r\n    const cleanup = () => {\r\n      modalContainer?.remove();\r\n    };\r\n\r\n    window.handleCancel = () => {\r\n      cleanup();\r\n      resolve(false);\r\n      console.log(\"\");\r\n    };\r\n\r\n    window.handleConfirm = () => {\r\n      cleanup();\r\n      resolve(true);\r\n    };\r\n\r\n    modalContainer.addEventListener(\"click\", (e: MouseEvent) => {\r\n      const target = e.target as HTMLElement;\r\n      if (target.id === \"myModal\" || target.id === \"confirmModal\") {\r\n        cleanup();\r\n      }\r\n    });\r\n  });\r\n};\r\n\r\n// Open a toast notification\r\nexport const openToast = (\r\n  message: string = \"\",\r\n  status: StatusCode = 200\r\n): void => {\r\n  const msg =\r\n    status === 200 || status === 201\r\n      ? \"Awesome! The update was made.\"\r\n      : status === 500\r\n      ? \"Sorry, the server can't process your request\"\r\n      : \"Hmmm..., Something went wrong. Try again\";\r\n\r\n  const iconSvg =\r\n    status === 200 || status === 201\r\n      ? '<svg viewBox=\"0 0 24 24\" style=\"color: var(--ViridianGreen); width:24px; height:24px;\"><path fill=\"currentColor\" d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>'\r\n      : '<svg viewBox=\"0 0 24 24\" style=\"color: var(--Danger); width:24px; height:24px;\"><path fill=\"currentColor\" d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>';\r\n\r\n  let modalContainer = document.getElementById(\r\n    \"openToast\"\r\n  ) as HTMLDivElement | null;\r\n  if (!modalContainer) {\r\n    modalContainer = document.createElement(\"div\");\r\n    modalContainer.id = \"openToast\";\r\n  }\r\n\r\n  const modalContent = `\r\n    <div class=\"toast-wrapper\">\r\n      <div class=\"slide-in-top\">\r\n        <div class=\"align-text\">\r\n          <div class=\"valid_btn\">\r\n            ${iconSvg}\r\n            <p class=\"${\r\n              status === 200 || status === 201 ? \"isDone\" : \"isError\"\r\n            }\">\r\n              ${message || msg}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <svg width=\"800px\" height=\"800px\" viewBox=\"-0.5 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" \r\n          class=\"close-btn\" onclick=\"window.cleanupToast()\">\r\n          <path d=\"M3 21.32L21 3.32001\" stroke=\"var(--Gunmetal)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M3 3.32001L21 21.32\" stroke=\"var(--Gunmetal)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n  `;\r\n\r\n  modalContainer.innerHTML = modalContent;\r\n  document.body.appendChild(modalContainer);\r\n\r\n  window.cleanupToast = () => {\r\n    modalContainer?.remove();\r\n  };\r\n\r\n  setTimeout(() => {\r\n    window.cleanupToast();\r\n  }, 10000);\r\n};\r\n\r\n// Open a modal to get user email input\r\nexport const getUserEmailInputModal = (\r\n  title: string\r\n): Promise<string | undefined> => {\r\n  return new Promise((resolve) => {\r\n    let modalContainer = document.getElementById(\r\n      \"confirmModal\"\r\n    ) as HTMLDivElement | null;\r\n    if (!modalContainer) {\r\n      modalContainer = document.createElement(\"div\");\r\n      modalContainer.id = \"confirmModal\";\r\n    }\r\n    let emailValue: string | undefined;\r\n\r\n    const modalContent = `\r\n      <section id=\"myModal\" class=\"modal\">\r\n        <div class=\"modal-content\">\r\n          <svg width=\"800px\" height=\"800px\" viewBox=\"-0.5 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" \r\n            class=\"ih_get_user_email_modal_close_btn\" onclick=\"window.handleCleanUpInput()\">\r\n            <path d=\"M3 21.32L21 3.32001\" stroke=\"var(--Gunmetal)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M3 3.32001L21 21.32\" stroke=\"var(--Gunmetal)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n          <h4>Enrol for ${title}</h4>\r\n          <p>Enter a valid Email Address</p>\r\n          <input type=\"email\" name=\"email\" id=\"userInput\" oninput=\"window.handleInput(this)\" />\r\n          <div class=\"action_btn\">\r\n            <button type=\"button\" disabled id=\"proceedBtn\" class=\"delete_btn important-btn\" onclick=\"window.handleConfirm()\">Proceed</button>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    `;\r\n\r\n    modalContainer.innerHTML = modalContent;\r\n    document.body.appendChild(modalContainer);\r\n\r\n    const proceedBtn = document.getElementById(\r\n      \"proceedBtn\"\r\n    ) as HTMLButtonElement | null;\r\n\r\n    window.handleInput = (e: HTMLInputElement) => {\r\n      if (isValidEmail(e.value)) {\r\n        if (proceedBtn) proceedBtn.disabled = false;\r\n        emailValue = e.value;\r\n      } else {\r\n        if (proceedBtn) proceedBtn.disabled = true;\r\n        emailValue = undefined;\r\n      }\r\n    };\r\n\r\n    const cleanup = () => {\r\n      modalContainer?.remove();\r\n    };\r\n\r\n    window.handleConfirm = () => {\r\n      if (isValidEmail(emailValue)) {\r\n        cleanup();\r\n        resolve(emailValue);\r\n      } else {\r\n        openToast(\"You need to enter a valid email!\", 400);\r\n      }\r\n    };\r\n\r\n    window.handleCleanUpInput = () => {\r\n      cleanup();\r\n      resolve(undefined);\r\n    };\r\n  });\r\n};\r\n"],"names":["isValidEmail","input","length","test","openConfirmModal","message","flag","arguments","undefined","Promise","resolve","modalContainer","document","getElementById","createElement","id","modalContent","concat","innerHTML","body","appendChild","cleanup","_modalContainer","remove","window","handleCancel","console","log","handleConfirm","addEventListener","e","target","openToast","status","msg","iconSvg","cleanupToast","_modalContainer2","setTimeout","getUserEmailInputModal","title","emailValue","proceedBtn","handleInput","value","disabled","_modalContainer3","handleCleanUpInput"],"mappings":"AAIA,IAAMA,EAAe,SAACC,GACpB,IAAKA,GAASA,EAAMC,OAAS,EAC3B,OAAO,EAGT,MADmB,6BACDC,KAAKF,EACzB,EAcaG,EAAmB,SAC9BC,GAEoB,IADpBC,EAAAC,UAAAL,OAAA,QAAAM,IAAAD,UAAA,IAAAA,UAAA,GAEA,OAAO,IAAIE,SAAQ,SAACC,GAClB,IAAIC,EAAiBC,SAASC,eAC5B,gBAEGF,KACHA,EAAiBC,SAASE,cAAc,QACzBC,GAAK,gBAGtB,IAAMC,oLAAYC,OAIAX,EAAO,wBAA0B,gBAAeW,oBAAAA,OAExDX,EACI,wDACA,2BACN,mCAAAW,OAGAZ,GACA,4FAQP,uUAEDM,EAAeO,UAAYF,EAC3BJ,SAASO,KAAKC,YAAYT,GAE1B,IAAMU,EAAU,WAAK,IAAAC,EACLA,QAAdA,EAAAX,aAAcW,GAAdA,EAAgBC,UAGlBC,OAAOC,aAAe,WACpBJ,IACAX,GAAQ,GACRgB,QAAQC,IAAI,KAGdH,OAAOI,cAAgB,WACrBP,IACAX,GAAQ,IAGVC,EAAekB,iBAAiB,SAAS,SAACC,GACxC,IAAMC,EAASD,EAAEC,OACC,YAAdA,EAAOhB,IAAkC,iBAAdgB,EAAOhB,IACpCM,GAEJ,GACF,GACF,EAGaW,EAAY,WAGf,IAFR3B,EAAkBE,UAAAL,OAAA,QAAAM,IAAAD,UAAA,GAAAA,UAAA,GAAA,GAClB0B,EAAA1B,UAAAL,OAAA,QAAAM,IAAAD,UAAA,GAAAA,UAAA,GAAqB,IAEf2B,EACO,MAAXD,GAA6B,MAAXA,EACd,gCACW,MAAXA,EACA,+CACA,2CAEAE,EACO,MAAXF,GAA6B,MAAXA,EACd,qPACA,wSAEFtB,EAAiBC,SAASC,eAC5B,aAEGF,KACHA,EAAiBC,SAASE,cAAc,QACzBC,GAAK,aAGtB,IAAMC,EAAYC,yJAAAA,OAKNkB,8BAAOlB,OAEI,MAAXgB,GAA6B,MAAXA,EAAiB,SAAW,UAChDhB,sBAAAA,OACIZ,GAAW6B,EAWxB,kiBAEDvB,EAAeO,UAAYF,EAC3BJ,SAASO,KAAKC,YAAYT,GAE1Ba,OAAOY,aAAe,WAAK,IAAAC,EACXA,QAAdA,EAAA1B,aAAc0B,GAAdA,EAAgBd,UAGlBe,YAAW,WACTd,OAAOY,cACR,GAAE,IACL,EAGaG,EAAyB,SACpCC,GAEA,OAAO,IAAI/B,SAAQ,SAACC,GAClB,IAOI+B,EAPA9B,EAAiBC,SAASC,eAC5B,gBAEGF,KACHA,EAAiBC,SAASE,cAAc,QACzBC,GAAK,gBAItB,IAAMC,EAAY,kmBAAAC,OAQIuB,EAQrB,qYAED7B,EAAeO,UAAYF,EAC3BJ,SAASO,KAAKC,YAAYT,GAE1B,IAAM+B,EAAa9B,SAASC,eAC1B,cAGFW,OAAOmB,YAAc,SAACb,GAChB9B,EAAa8B,EAAEc,QACbF,IAAYA,EAAWG,UAAW,GACtCJ,EAAaX,EAAEc,QAEXF,IAAYA,EAAWG,UAAW,GACtCJ,OAAajC,IAIjB,IAAMa,EAAU,WAAK,IAAAyB,EACLA,QAAdA,EAAAnC,aAAcmC,GAAdA,EAAgBvB,UAGlBC,OAAOI,cAAgB,WACjB5B,EAAayC,IACfpB,IACAX,EAAQ+B,IAERT,EAAU,mCAAoC,MAIlDR,OAAOuB,mBAAqB,WAC1B1B,IACAX,OAAQF,GAEZ,GACF"}

package/dist/src/components/status/TimeTracker.js

@@ -1,2 +0,0 @@
-import{slicedToArray as e,asyncToGenerator as t,regeneratorRuntime as n,objectSpread2 as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useRef as s,useState as a,useEffect as o}from"react";import{IN_DEV_MODE as i,API_HOST_URL as c,reqOptions as u}from"../lib/helpFunction.js";var l=function(l){var d=l.channel_username,v=l.IPAdress,f=l.session,p=l.selectIPAdress,m=l.useDispatch,h=l.useSelector,w=m(),b=h(p),x=s(new Date),g=s(null),S=a(),y=e(S,2),k=y[0],T=y[1],_=d,j=function(){var e;T(null===(e=document)||void 0===e?void 0:e.visibilityState),"hidden"===document.visibilityState?g.current=new Date:(x.current=new Date,g.current=null)},D=function(){g.current=new Date};return o((function(){return x.current=new Date,document.addEventListener("visibilitychange",j),document.addEventListener("idle",D),function(){document.removeEventListener("visibilitychange",j),document.removeEventListener("idle",D)}}),[]),o((function(){if(null==b||!b.ip_address){var e=function(){var e=t(n().mark((function e(){var t,r;return n().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,fetch("/api/user-ip-address");case 3:if((t=e.sent).ok){e.next=6;break}throw new Error("HTTP error! Status: ".concat(t.status));case 6:return e.next=8,t.json();case 8:r=e.sent,w(v.actions.set(r)),e.next=15;break;case 12:e.prev=12,e.t0=e.catch(0),console.error("Error fetching IP address:",e.t0);case 15:case"end":return e.stop()}}),e,null,[[0,12]])})));return function(){return e.apply(this,arguments)}}();e()}}),[w,null==b?void 0:b.ip_address]),o((function(){var e=function(){var e=t(n().mark((function e(){var t,s,a,o,l,d,v;return n().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!x.current||!g.current){e.next=23;break}if(s=Math.round((g.current.getTime()-x.current.getTime())/1e3),a=r(r({},b),{},{seconds:s,url:window.location.href,datetime_start:x.current.toISOString(),datetime_end:g.current.toISOString(),user:(null==f||null===(t=f.user)||void 0===t||null===(t=t.name)||void 0===t?void 0:t.id)||""}),e.prev=3,o=JSON.stringify(a),l=u("POST",o,null,"json"),_){e.next=9;break}return console.warn("Cannot send time data: handle is undefined"),e.abrupt("return");case 9:return e.next=11,fetch("".concat(c,"history/").concat(_,"/timespent/"),l);case 11:if(201===(d=e.sent).status?console.log("Time spent sent to server successfully!"):console.error("Server responded with status: ".concat(d.status)),!i){e.next=18;break}return e.next=16,d.json();case 16:v=e.sent,console.log(v);case 18:e.next=23;break;case 20:e.prev=20,e.t0=e.catch(3),console.error("Couldn't send time data:",e.t0);case 23:case"end":return e.stop()}}),e,null,[[3,20]])})));return function(){return e.apply(this,arguments)}}();e()}),[g.current,x.current,k,f,b,_]),null};export{l as default};
-//# sourceMappingURL=TimeTracker.js.map

package/dist/src/components/status/TimeTracker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimeTracker.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/src/index-types.js

@@ -1,2 +0,0 @@
-var r=!0;export{r as __keepIndexTypes};
-//# sourceMappingURL=index-types.js.map

package/dist/src/index-types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-types.js","sources":["../../src/index-types.ts"],"sourcesContent":["import type { S3UploadResponseType } from \"./components/forms/uploads/IhubFileUploader\";\r\n\r\nexport { S3UploadResponseType };\r\n\r\nexport const __keepIndexTypes = true; // Prevents removal\r\n"],"names":["__keepIndexTypes"],"mappings":"AAIaA,IAAAA,GAAmB"}

package/dist/src/types/components/forms/SubmitBtn.d.ts

@@ -1,7 +0,0 @@
-interface SubmitBtnProps {
-    labels: string;
-    status?: number;
-    disableds?: boolean;
-}
-declare function SubmitBtn(props: SubmitBtnProps): import("react/jsx-runtime").JSX.Element;
-export default SubmitBtn;

package/dist/src/types/components/status/TimeTracker.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { SessionUser } from "../theme/signout/SessionExpiresLogout";
-interface IPAddressData {
-    ip_address?: string;
-    [key: string]: any;
-}
-interface TimeTrackerProps {
-    channel_username?: string;
-    IPAdress: IPAddressData;
-    session: SessionUser;
-    selectIPAdress: any;
-    useDispatch: any;
-    useSelector: any;
-}
-declare const TimeTracker: React.FC<TimeTrackerProps>;
-export default TimeTracker;

package/dist/src/types/index-types.d.ts

@@ -1,3 +0,0 @@
-import type { S3UploadResponseType } from "./components/forms/uploads/IhubFileUploader";
-export { S3UploadResponseType };
-export declare const __keepIndexTypes = true;

package/dist/src/types/styles.d.ts

@@ -1,2 +0,0 @@
-import "./assets/css/styles.css";
-export declare const __styles__ = true;