@seeqdev/qomponents 0.0.0 → 0.0.1

package/dist/styles.css

@@ -1,6 +1,1084 @@
+@font-face {
+    font-family: 'fontCustom';
+    src: url('FontCustom.woff2') format('woff2'),
+    url('FontCustom.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.fc {
+    font: normal normal normal 14px/1 fontCustom;
+    font-family: fontCustom !important;
+    speak: none;
+    text-transform: none;
+    display: inline-block;
+
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.fa-1x {
+    font-size: 1em;
+}
+
+.fa-2x {
+    font-size: 2em;
+}
+
+.fa-3x {
+    font-size: 3em;
+}
+
+.fa-4x {
+    font-size: 4em;
+}
+
+.fa-5x {
+    font-size: 5em;
+}
+
+.fa-6x {
+    font-size: 6em;
+}
+
+.fa-7x {
+    font-size: 7em;
+}
+
+.fa-8x {
+    font-size: 8em;
+}
+
+.fa-9x {
+    font-size: 9em;
+}
+
+.fa-10x {
+    font-size: 10em;
+}
+
+.fa-2xs {
+    font-size: 0.625em;
+    line-height: 0.1em;
+    vertical-align: 0.225em;
+}
+
+.fa-xs {
+    font-size: 0.75em;
+    line-height: 0.08333em;
+    vertical-align: 0.125em;
+}
+
+.fa-sm {
+    font-size: 0.875em;
+    line-height: 0.07143em;
+    vertical-align: 0.05357em;
+}
+
+.fa-lg {
+    font-size: 1.25em;
+    line-height: 0.05em;
+    vertical-align: -0.075em;
+}
+
+.fa-xl {
+    font-size: 1.5em;
+    line-height: 0.04167em;
+    vertical-align: -0.125em;
+}
+
+.fa-2xl {
+    font-size: 2em;
+    line-height: 0.03125em;
+    vertical-align: -0.1875em;
+}
+
+.fa-fw {
+    text-align: center;
+    width: 1.25em;
+}
+
+.fc-bell-regular:before {
+  content: '\e9a0';
+}
+
+.fc-bell-solid:before {
+  content: '\e99f';
+}
+
+.fc-copy-date-2:before {
+  content: '\e99e';
+}
+
+.fc-copy-date:before {
+  content: '\e99d';
+}
+
+.fc-bell-cog:before {
+  content: '\e99c';
+}
+
+.fc-announcements:before {
+  content: '\e99b';
+}
+
+.fc-sun:before {
+  content: '\e99a';
+}
+
+.fc-marker:before {
+  content: '\a961';
+}
+
+.fc-display-range-unused:before {
+  content: '\a96e';
+}
+
+.fc-series-new:before {
+  content: '\a979';
+}
+
+.fc-scatterplot-line:before {
+  content: '\e900';
+}
+
+.fc-annotate:before {
+  content: '\e901';
+}
+
+.fc-capsule:before {
+  content: '\e902';
+}
+
+.fc-search-limit:before {
+  content: '\e903';
+}
+
+.fc-search-logic:before {
+  content: '\e904';
+}
+
+.fc-search-pattern:before {
+  content: '\e905';
+}
+
+.fc-search-power:before {
+  content: '\e906';
+}
+
+.fc-home:before {
+  content: '\e907';
+}
+
+.fc-capsule-set:before {
+  content: '\e908';
+}
+
+.fc-scatterplot:before {
+  content: '\e909';
+}
+
+.fc-series:before {
+  content: '\e90a';
+}
+
+.fc-group:before {
+  content: '\e90b';
+}
+
+.fc-boundary-alert:before {
+  content: '\e90c';
+}
+
+.fc-chart-alert:before {
+  content: '\e90d';
+}
+
+.fc-seeq-datalab:before {
+  content: '\e90e';
+}
+
+.fc-seeq-datalab-lock:before {
+  content: '\e90f';
+}
+
+.fc-all-items:before {
+  content: '\e910';
+}
+
+.fc-asset-tree:before {
+  content: '\e911';
+}
+
+.fc-trend:before {
+  content: '\e912';
+}
+
+.fc-flag:before {
+  content: '\e913';
+}
+
+.fc-capsules:before {
+  content: '\e914';
+}
+
+.fc-connect:before {
+  content: '\e915';
+}
+
+.fc-display-range:before {
+  content: '\e916';
+}
+
+.fc-statistics:before {
+  content: '\e917';
+}
+
+.fc-eye:before {
+  content: '\e918';
+}
+
+.fc-eye-o:before {
+  content: '\e919';
+}
+
+.fc-data-file:before {
+  content: '\e91a';
+}
+
+.fc-gridline:before {
+  content: '\e91b';
+}
+
+.fc-model-and-predict:before {
+  content: '\e91c';
+}
+
+.fc-cleanse:before {
+  content: '\e91d';
+}
+
+.fc-identify:before {
+  content: '\e91e';
+}
+
+.fc-quantify:before {
+  content: '\e91f';
+}
+
+.fc-treemap:before {
+  content: '\e920';
+}
+
+.fc-series-dim:before {
+  content: '\e921';
+}
+
+.fc-series-gen:before {
+  content: '\e922';
+}
+
+.fc-formula:before {
+  content: '\e923';
+}
+
+.fc-alignment:before {
+  content: '\e924';
+}
+
+.fc-delete:before {
+  content: '\e925';
+}
+
+.fc-list:before {
+  content: '\e926';
+}
+
+.fc-tile:before {
+  content: '\e927';
+}
+
+.fc-arrow_down:before {
+  content: '\e928';
+}
+
+.fc-arrow_up:before {
+  content: '\e929';
+}
+
+.fc-user-community:before {
+  content: '\e92a';
+}
+
+.fc-certificate:before {
+  content: '\e92b';
+}
+
+.fc-training:before {
+  content: '\e92c';
+}
+
+.fc-knowledge-base:before {
+  content: '\e92d';
+}
+
+.fc-causality:before {
+  content: '\e92e';
+}
+
+.fc-parallel-coordinate:before {
+  content: '\e92f';
+}
+
+.fc-arrow_updown:before {
+  content: '\e930';
+}
+
+.fc-circle_warning:before {
+  content: '\e931';
+}
+
+.fc-circle_info:before {
+  content: '\e932';
+}
+
+.fc-warning:before {
+  content: '\e933';
+}
+
+.fc-grab-window:before {
+  content: '\e934';
+}
+
+.fc-magnify:before {
+  content: '\e935';
+}
+
+.fc-box-empty:before {
+  content: '\e936';
+}
+
+.fc-box-check:before {
+  content: '\e937';
+}
+
+.fc-circle-empty:before {
+  content: '\e938';
+}
+
+.fc-circle-check:before {
+  content: '\e939';
+}
+
+.fc-q_search:before {
+  content: '\e93a';
+}
+
+.fc-scatterplot-select:before {
+  content: '\e93b';
+}
+
+.fc-redo:before {
+  content: '\e93c';
+}
+
+.fc-digital-filter:before {
+  content: '\e93d';
+}
+
+.fc-support:before {
+  content: '\e93e';
+}
+
+.fc-binoculars:before {
+  content: '\e93f';
+}
+
+.fc-check:before {
+  content: '\e940';
+}
+
+.fc-filter:before {
+  content: '\e941';
+}
+
+.fc-trash:before {
+  content: '\e942';
+}
+
+.fc-gear:before {
+  content: '\e943';
+}
+
+.fc-lock:before {
+  content: '\e944';
+}
+
+.fc-lock-open:before {
+  content: '\e945';
+}
+
+.fc-arrow-dropdown:before {
+  content: '\e946';
+}
+
+.fc-mag-glass-empty:before {
+  content: '\e947';
+}
+
+.fc-globe:before {
+  content: '\e948';
+}
+
+.fc-edit:before {
+  content: '\e949';
+}
+
+.fc-add-column:before {
+  content: '\e94a';
+}
+
+.fc-add-row:before {
+  content: '\e94b';
+}
+
+.fc-border-style:before {
+  content: '\e94c';
+}
+
+.fc-clock-density:before {
+  content: '\e94d';
+}
+
+.fc-plus-assets:before {
+  content: '\e94e';
+}
+
+.fc-plus-selected:before {
+  content: '\e94f';
+}
+
+.fc-comment:before {
+  content: '\e950';
+}
+
+.fc-user:before {
+  content: '\e951';
+}
+
+.fc-engineer:before {
+  content: '\e952';
+}
+
+.fc-pricing:before {
+  content: '\e953';
+}
+
+.fc-free-trial:before {
+  content: '\e954';
+}
+
+.fc-partners:before {
+  content: '\e955';
+}
+
+.fc-meter:before {
+  content: '\e956';
+}
+
+.fc-beaker:before {
+  content: '\e957';
+}
+
+.fc-lightbulb:before {
+  content: '\e958';
+}
+
+.fc-pdf:before {
+  content: '\e959';
+}
+
+.fc-add-column-2:before {
+  content: '\e95a';
+}
+
+.fc-add-row-2:before {
+  content: '\e95b';
+}
+
+.fc-eraser:before {
+  content: '\e95c';
+}
+
+.fc-paintbrush:before {
+  content: '\e95d';
+}
+
+.fc-rows:before {
+  content: '\e95e';
+}
+
+.fc-quick-start:before {
+  content: '\e95f';
+}
+
+.fc-video:before {
+  content: '\e960';
+}
+
+.fc-wireless2:before {
+  content: '\e961';
+}
+
+.fc-wireless:before {
+  content: '\e962';
+}
+
+.fc-mag-glass:before {
+  content: '\e963';
+}
+
+.fc-data:before {
+  content: '\e964';
+}
+
+.fc-annotation:before {
+  content: '\e965';
+}
+
+.fc-briefcase:before {
+  content: '\e966';
+}
+
+.fc-investigate:before {
+  content: '\e967';
+}
+
+.fc-monitor:before {
+  content: '\e968';
+}
+
+.fc-clipboard:before {
+  content: '\e969';
+}
+
+.fc-share-access:before {
+  content: '\e96a';
+}
+
+.fc-bar-chart-horizontal:before {
+  content: '\e96b';
+}
+
+.fc-stacked-bar-chart:before {
+  content: '\e96c';
+}
+
+.fc-stacked-bar-horizontal:before {
+  content: '\e96d';
+}
+
+.fc-excel:before {
+  content: '\e96e';
+}
+
+.fc-Asset1:before {
+  content: '\e96f';
+}
+
+.fc-gears-2:before {
+  content: '\e970';
+}
+
+.fc-pharma:before {
+  content: '\e971';
+}
+
+.fc-water:before {
+  content: '\e972';
+}
+
+.fc-chemical:before {
+  content: '\e973';
+}
+
+.fc-oil:before {
+  content: '\e974';
+}
+
+.fc-beverage:before {
+  content: '\e975';
+}
+
+.fc-utilities:before {
+  content: '\e976';
+}
+
+.fc-manufacturing:before {
+  content: '\e977';
+}
+
+.fc-industry:before {
+  content: '\e978';
+}
+
+.fc-viz-normal:before {
+  content: '\e979';
+}
+
+.fc-compare:before {
+  content: '\e97a';
+}
+
+.fc-diamond:before {
+  content: '\e97b';
+}
+
+.fc-square:before {
+  content: '\e97c';
+}
+
+.fc-triangle:before {
+  content: '\e97d';
+}
+
+.fc-rectangle:before {
+  content: '\e97e';
+}
+
+.fc-strip:before {
+  content: '\e97f';
+}
+
+.fc-viz-overlay:before {
+  content: '\e980';
+}
+
+.fc-viz-chain:before {
+  content: '\e981';
+}
+
+.fc-graph:before {
+  content: '\e982';
+}
+
+.fc-pin:before {
+  content: '\e983';
+}
+
+.fc-y-axis:before {
+  content: '\e984';
+}
+
+.fc-capsule-bar:before {
+  content: '\e985';
+}
+
+.fc-copy:before {
+  content: '\e986';
+}
+
+.fc-link:before {
+  content: '\e987';
+}
+
+.fc-unlink:before {
+  content: '\e988';
+}
+
+.fc-step-back-full:before {
+  content: '\e989';
+}
+
+.fc-displays:before {
+  content: '\e98a';
+}
+
+.fc-overwrite:before {
+  content: '\e98b';
+}
+
+.fc-rename:before {
+  content: '\e98c';
+}
+
+.fc-parallel-boundary:before {
+  content: '\e98d';
+}
+
+.fc-loading-notch:before {
+  content: '\e98e';
+}
+
+.fc-skill-explorer:before {
+  content: '\e98f';
+}
+
+.fc-step-fore-full:before {
+  content: '\e990';
+}
+
+.fc-step-back-half:before {
+  content: '\e991';
+}
+
+.fc-step-fore-half:before {
+  content: '\e992';
+}
+
+.fc-arrow-down:before {
+  content: '\e993';
+}
+
+.fc-arrow-up:before {
+  content: '\e994';
+}
+
+.fc-expand-close:before {
+  content: '\e995';
+}
+
+.fc-expand-open:before {
+  content: '\e996';
+}
+
+.fc-axis:before {
+  content: '\e997';
+}
+
+.fc-axis-o:before {
+  content: '\e998';
+}
+
+.fc-solid:before {
+  content: '\e999';
+}
+
+.fc-short-dash:before {
+  content: '\f901';
+}
+
+.fc-short-dot:before {
+  content: '\f902';
+}
+
+.fc-short-dash-dot:before {
+  content: '\f903';
+}
+
+.fc-short-dash-dot-dot:before {
+  content: '\f904';
+}
+
+.fc-dot:before {
+  content: '\f905';
+}
+
+.fc-dash:before {
+  content: '\f906';
+}
+
+.fc-long-dash:before {
+  content: '\f907';
+}
+
+.fc-dash-dot:before {
+  content: '\f908';
+}
+
+.fc-long-dash-dot:before {
+  content: '\f909';
+}
+
+.fc-long-dash-dot-dot:before {
+  content: '\f910';
+}
+
+.fc-scalar:before {
+  content: '\f911';
+}
+
+.fc-detail-columns:before {
+  content: '\f912';
+}
+
+.fc-workbook:before {
+  content: '\f913';
+}
+
+.fc-workbook-user:before {
+  content: '\f914';
+}
+
+.fc-workbook-lock:before {
+  content: '\f915';
+}
+
+.fc-workbook-globe:before {
+  content: '\f916';
+}
+
+.fc-arrow-circle:before {
+  content: '\f917';
+}
+
+.fc-condition-define:before {
+  content: '\f918';
+}
+
+.fc-condition-combine:before {
+  content: '\f919';
+}
+
+.fc-series-modify:before {
+  content: '\f920';
+}
+
+.fc-boundary:before {
+  content: '\f923';
+}
+
+.fc-condition-digital:before {
+  content: '\f924';
+}
+
+.fc-timing:before {
+  content: '\f925';
+}
+
+.fc-series-properties:before {
+  content: '\f926';
+}
+
+.fc-import:before {
+  content: '\f927';
+}
+
+.fc-export:before {
+  content: '\f928';
+}
+
+.fc-pivision:before {
+  content: '\f929';
+}
+
+.fc-samples-and-line:before {
+  content: '\f930';
+}
+
+.fc-samples-only:before {
+  content: '\f931';
+}
+
+.fc-prediction:before {
+  content: '\f932';
+}
+
+.fc-lowpass:before {
+  content: '\f933';
+}
+
+.fc-bar-chart:before {
+  content: '\f934';
+}
+
+.fc-ancillaries:before {
+  content: '\f935';
+}
+
+.fc-deviation:before {
+  content: '\f936';
+}
+
+.fc-journal:before {
+  content: '\f937';
+}
+
+.fc-journal-edit:before {
+  content: '\f938';
+}
+
+.fc-line-bars:before {
+  content: '\f939';
+}
+
+.fc-reference:before {
+  content: '\f940';
+}
+
+.fc-powerpoint:before {
+  content: '\f941';
+}
+
+.fc-link-seeq:before {
+  content: '\f942';
+}
+
+.fc-journal-blank:before {
+  content: '\f943';
+}
+
+.fc-more:before {
+  content: '\f944';
+}
+
+.fc-share:before {
+  content: '\f945';
+}
+
+.fc-periodic-condition:before {
+  content: '\f946';
+}
+
+.fc-report:before {
+  content: '\f947';
+}
+
+.fc-seeq-content:before {
+  content: '\f948';
+}
+
+.fc-table:before {
+  content: '\f949';
+}
+
+.fc-unit:before {
+  content: '\f950';
+}
+
+.fc-metric:before {
+  content: '\f951';
+}
+
+.fc-pdf-export:before {
+  content: '\f952';
+}
+
+.fc-x-circle:before {
+  content: '\f953';
+}
+
+.fc-stop:before {
+  content: '\f954';
+}
+
+.fc-report-lock:before {
+  content: '\f955';
+}
+
+.fc-analysis:before {
+  content: '\f956';
+}
+
+.fc-analysis-lock:before {
+  content: '\f957';
+}
+
+.fc-requests:before {
+  content: '\f958';
+}
+
+.fc-folder:before {
+  content: '\f959';
+}
+
+.fc-folder-move:before {
+  content: '\f960';
+}
+
+.fc-folder-new:before {
+  content: '\f961';
+}
+
+.fc-folder-lock:before {
+  content: '\f962';
+}
+
+.fc-pin-o:before {
+  content: '\f963';
+}
+
+.fc-refresh:before {
+  content: '\f964';
+}
+
+.fc-arrow-right-right:before {
+  content: '\f965';
+}
+
+.fc-arrow-left-left:before {
+  content: '\f966';
+}
+
+.fc-refresh-on:before {
+  content: '\f967';
+}
+
+.fc-refresh-off:before {
+  content: '\f968';
+}
+
+.fc-box-plus:before {
+  content: '\f969';
+}
+
+.fc-box-minus:before {
+  content: '\f970';
+}
+
+.fc-circle_plus:before {
+  content: '\f971';
+}
+
+.fc-circle_minus:before {
+  content: '\f972';
+}
+
+.fc-page-break:before {
+  content: '\f973';
+}
+
+.fc-restore:before {
+  content: '\f974';
+}
+
+.fc-subscription:before {
+  content: '\f975';
+}
+
+.fc-jobs:before {
+  content: '\f976';
+}
+
+.fc-trash_info:before {
+  content: '\f977';
+}
+
+.fc-trash_info2:before {
+  content: '\f978';
+}
+
+.fc-bell-curve:before {
+  content: '\f979';
+}
+
+.fc-facebook:before {
+  content: '\ea90';
+}
+
+.fc-facebook2:before {
+  content: '\ea91';
+}
+
+.fc-youtube:before {
+  content: '\ea9d';
+}
+
+/* ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com */
+
 /*
-! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
-*//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
@@ -338,6 +1416,7 @@ button,
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
+
 :disabled {
   cursor: default;
 }
@@ -371,10 +1450,12 @@ video {
 }
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
+
 [hidden] {
   display: none;
 }
-    :root {
+
+:root {
         --sq-color-dark: 42, 92, 132;
         --sq-white: 255, 255, 255;
         --sq-color-highlight: 4, 145, 194;
@@ -382,212 +1463,571 @@ video {
         --sq-disabled-gray: 221, 225, 227;
         --sq-light-gray: 241, 245, 247;
         --sq-dark-gray: 226, 226, 226;
+        --sq-fairly-dark-gray: 96, 96, 97;
+        --sq-darkish-gray: 183, 183, 183;
         --sq-danger-color: 217, 83, 79;
+        --sq-warning-color: 240, 173, 78;
+        --sq-success-color: 114, 192, 44;
         --sq-icon: 4, 145, 194;
         --sq-link: 42, 92, 132;
     }
 
-    .color_topic {
+.color_topic {
         --sq-color-dark: 42, 92, 132;
+        --sq-color-light: 237, 247, 246;
         --sq-color-highlight: 4, 145, 194;
         --sq-icon: 4, 145, 194;
         --sq-link: 42, 92, 132;
     }
 
-    .color_analysis {
-        --sq-color-dark: 66, 124, 99;
-        --sq-color-highlight: 66, 124, 99;
-        --sq-icon: 4, 145, 194;
+.color_analysis {
+        --sq-color-dark: 0, 121, 96;
+        --sq-color-light: 237, 247, 246;
+        --sq-color-highlight: 0, 153, 100;
+        --sq-icon: 0, 160, 89;
         --sq-link: 0, 121, 96;
     }
 
+.color_datalab {
+        --sq-color-dark: 242, 103, 34;
+        --sq-color-light: 237, 247, 246;
+        --sq-color-highlight: 244, 123, 62;
+        --sq-icon: 242, 103, 34;
+        --sq-link: 242, 103, 34;
+    }
+
 *, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
 }
 
 ::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-}
-.rounded-sm {
-  border-radius: 0.125rem;
-}
-.border {
-  border-width: 1px;
-}
-.border-solid {
-  border-style: solid;
-}
-.border-sq-disabled-gray {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--sq-disabled-gray), var(--tw-border-opacity));
-}
-.bg-sq-color-dark {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--sq-color-dark), var(--tw-bg-opacity));
-}
-.bg-sq-danger-color {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--sq-danger-color), var(--tw-bg-opacity));
-}
-.bg-sq-icon {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--sq-icon), var(--tw-bg-opacity));
-}
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-.text-sq-text-color {
-  --tw-text-opacity: 1;
-  color: rgba(var(--sq-text-color), var(--tw-text-opacity));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-.outline {
-  outline-style: solid;
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
+}
+
+.tw-absolute {
+    position: absolute;
+}
+
+.tw-relative {
+    position: relative;
+}
+
+.-tw-bottom-2 {
+    bottom: -0.5rem;
+}
+
+.-tw-left-3 {
+    left: -0.75rem;
+}
+
+.-tw-right-3 {
+    right: -0.75rem;
+}
+
+.-tw-top-2 {
+    top: -0.5rem;
+}
+
+.tw-left-1\/2 {
+    left: 50%;
+}
+
+.tw-top-1\/2 {
+    top: 50%;
+}
+
+.tw-z-50 {
+    z-index: 50;
+}
+
+.tw-mr-1 {
+    margin-right: 0.25rem;
+}
+
+.tw-inline-block {
+    display: inline-block;
+}
+
+.tw-grid {
+    display: grid;
+}
+
+.tw-hidden {
+    display: none;
+}
+
+.-tw-translate-x-1\/2 {
+    --tw-translate-x: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-tw-translate-x-full {
+    --tw-translate-x: -100%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-tw-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-tw-translate-y-full {
+    --tw-translate-y: -100%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.tw-translate-x-full {
+    --tw-translate-x: 100%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.tw-translate-y-full {
+    --tw-translate-y: 100%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.tw-grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.tw-grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.tw-gap-4 {
+    gap: 1rem;
+}
+
+.tw-whitespace-nowrap {
+    white-space: nowrap;
+}
+
+.tw-rounded {
+    border-radius: 0.25rem;
+}
+
+.tw-rounded-sm {
+    border-radius: 3px;
+}
+
+.tw-border {
+    border-width: 1px;
+}
+
+.tw-border-solid {
+    border-style: solid;
+}
+
+.tw-border-sq-disabled-gray {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--sq-disabled-gray), var(--tw-border-opacity));
+}
+
+.tw-bg-black {
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.tw-bg-sq-color-dark {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-color-dark), var(--tw-bg-opacity));
+}
+
+.tw-bg-sq-danger-color {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-danger-color), var(--tw-bg-opacity));
+}
+
+.tw-bg-sq-icon {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-icon), var(--tw-bg-opacity));
+}
+
+.tw-bg-sq-warning-color {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-warning-color), var(--tw-bg-opacity));
+}
+
+.tw-p-1 {
+    padding: 0.25rem;
+}
+
+.tw-p-2 {
+    padding: 0.5rem;
+}
+
+.tw-p-4 {
+    padding: 1rem;
+}
+
+.tw-px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.tw-px-2\.5 {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+}
+
+.tw-px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+
+.tw-py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+.tw-text-center {
+    text-align: center;
+}
+
+.tw-text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+.tw-text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+}
+
+.tw-text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+}
+
+.tw-leading-normal {
+    line-height: 1.5;
+}
+
+.tw-text-sq-color-dark {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-color-dark), var(--tw-text-opacity));
+}
+
+.tw-text-sq-color-light {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-color-light), var(--tw-text-opacity));
+}
+
+.tw-text-sq-danger-color {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-danger-color), var(--tw-text-opacity));
+}
+
+.tw-text-sq-darkish-gray {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-darkish-gray), var(--tw-text-opacity));
+}
+
+.tw-text-sq-disabled-gray {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-disabled-gray), var(--tw-text-opacity));
+}
+
+.tw-text-sq-fairly-dark-gray {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-fairly-dark-gray), var(--tw-text-opacity));
+}
+
+.tw-text-sq-link {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-link), var(--tw-text-opacity));
+}
+
+.tw-text-sq-success-color {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-success-color), var(--tw-text-opacity));
+}
+
+.tw-text-sq-text-color {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-text-color), var(--tw-text-opacity));
+}
+
+.tw-text-sq-warning-color {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-warning-color), var(--tw-text-opacity));
+}
+
+.tw-text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.tw-opacity-0 {
+    opacity: 0;
+}
+
+.tw-outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
 }
+
 /* Heads up! Before these colors can be used you must also add them to the tailwind.config.cjs! */
+
 /* Make sure to keep these colors in sync with the webserver/_custom_variables.scss values to ensure cohesive UIs */
-.hover\:bg-sq-color-highlight:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));
+
+.before\:tw-absolute::before {
+    content: var(--tw-content);
+    position: absolute;
+}
+
+.before\:-tw-bottom-4::before {
+    content: var(--tw-content);
+    bottom: -1rem;
+}
+
+.before\:-tw-top-4::before {
+    content: var(--tw-content);
+    top: -1rem;
+}
+
+.before\:tw-left-1\/2::before {
+    content: var(--tw-content);
+    left: 50%;
+}
+
+.before\:tw-left-\[100\%\]::before {
+    content: var(--tw-content);
+    left: 100%;
+}
+
+.before\:tw-right-\[100\%\]::before {
+    content: var(--tw-content);
+    right: 100%;
+}
+
+.before\:tw-top-1\/2::before {
+    content: var(--tw-content);
+    top: 50%;
+}
+
+.before\:-tw-translate-x-1\/2::before {
+    content: var(--tw-content);
+    --tw-translate-x: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.before\:-tw-translate-y-1\/2::before {
+    content: var(--tw-content);
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.before\:tw-border-8::before {
+    content: var(--tw-content);
+    border-width: 8px;
+}
+
+.before\:tw-border-y-transparent::before {
+    content: var(--tw-content);
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+}
+
+.before\:tw-border-b-black::before {
+    content: var(--tw-content);
+    --tw-border-opacity: 1;
+    border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.before\:tw-border-b-transparent::before {
+    content: var(--tw-content);
+    border-bottom-color: transparent;
+}
+
+.before\:tw-border-l-black::before {
+    content: var(--tw-content);
+    --tw-border-opacity: 1;
+    border-left-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
-.hover\:bg-sq-danger-color-hover:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(212 59 55 / var(--tw-bg-opacity));
+
+.before\:tw-border-l-transparent::before {
+    content: var(--tw-content);
+    border-left-color: transparent;
+}
+
+.before\:tw-border-r-black::before {
+    content: var(--tw-content);
+    --tw-border-opacity: 1;
+    border-right-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.before\:tw-border-r-transparent::before {
+    content: var(--tw-content);
+    border-right-color: transparent;
+}
+
+.before\:tw-border-t-black::before {
+    content: var(--tw-content);
+    --tw-border-opacity: 1;
+    border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.before\:tw-border-t-transparent::before {
+    content: var(--tw-content);
+    border-top-color: transparent;
+}
+
+.before\:tw-content-\[\'\'\]::before {
+    --tw-content: '';
+    content: var(--tw-content);
+}
+
+.hover\:tw-bg-sq-color-highlight:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));
+}
+
+.hover\:tw-bg-sq-danger-color-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(212 59 55 / var(--tw-bg-opacity));
+}
+
+.hover\:tw-bg-sq-light-gray:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-light-gray), var(--tw-bg-opacity));
+}
+
+.hover\:tw-bg-sq-link:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-link), var(--tw-bg-opacity));
+}
+
+.focus\:tw-border-sq-color-dark:focus {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
+}
+
+.focus\:tw-bg-sq-dark-gray:focus {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
 }
-.hover\:bg-sq-light-gray:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--sq-light-gray), var(--tw-bg-opacity));
+
+.focus\:tw-ring-0:focus {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: r;
 }
-.hover\:bg-sq-link:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--sq-link), var(--tw-bg-opacity));
+
+.active\:tw-border-sq-color-dark:active {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
 }
-.focus\:border-sq-color-dark:focus {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
+
+.active\:tw-bg-sq-dark-gray:active {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
 }
-.focus\:bg-sq-dark-gray:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
+
+.disabled\:tw-pointer-events-none:disabled {
+    pointer-events: none;
 }
-.focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+
+.disabled\:tw-cursor-not-allowed:disabled {
+    cursor: not-allowed;
 }
-.active\:border-sq-color-dark:active {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
+
+.disabled\:tw-bg-opacity-50:disabled {
+    --tw-bg-opacity: 0.5;
 }
-.active\:bg-sq-dark-gray:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
+
+.tw-group:hover .group-hover\:tw-inline-block {
+    display: inline-block;
 }
-.disabled\:pointer-events-none:disabled {
-  pointer-events: none;
+
+.tw-group:hover .group-hover\:tw-opacity-100 {
+    opacity: 1;
 }
-.disabled\:bg-opacity-50:disabled {
-  --tw-bg-opacity: 0.5;
-}
+