@seeqdev/qomponents 0.0.44 → 0.0.46

package/dist/styles.css

@@ -1568,6 +1568,42 @@ ol,
         padding: revert;
     }
 
+h1 {
+        font-size: 2.125rem !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+h2 {
+        font-size: 1.875rem !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+h3 {
+        font-size: 1.5rem !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+h4 {
+        font-size: 1.25rem !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+h5 {
+        font-size: 1.125rem !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+h6 {
+        font-size: 1rem !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
 *, ::before, ::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
@@ -1752,6 +1788,10 @@ ol,
     visibility: hidden;
 }
 
+.tw-fixed {
+    position: fixed;
+}
+
 .tw-absolute {
     position: absolute;
 }
@@ -1760,6 +1800,13 @@ ol,
     position: relative;
 }
 
+.tw-inset-0 {
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+}
+
 .-tw-bottom-2 {
     bottom: -0.5rem;
 }
@@ -1780,6 +1827,14 @@ ol,
     left: 50%;
 }
 
+.tw-left-\[50\%\] {
+    left: 50%;
+}
+
+.tw-top-0 {
+    top: 0px;
+}
+
 .tw-top-1\/2 {
     top: 50%;
 }
@@ -1800,6 +1855,10 @@ ol,
     z-index: 1000;
 }
 
+.tw-z-\[1001\] {
+    z-index: 1001;
+}
+
 .tw-z-\[9999\] {
     z-index: 9999;
 }
@@ -1816,6 +1875,11 @@ ol,
     margin: 1.25rem;
 }
 
+.tw-my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
 .tw--mt-0 {
     margin-top: -0px;
 }
@@ -1824,6 +1888,10 @@ ol,
     margin-top: -0.125rem;
 }
 
+.tw-mb-0 {
+    margin-bottom: 0px;
+}
+
 .tw-mb-5 {
     margin-bottom: 1.25rem;
 }
@@ -1840,6 +1908,10 @@ ol,
     margin-left: 0.375rem;
 }
 
+.tw-ml-4 {
+    margin-left: 1rem;
+}
+
 .tw-ml-\[3px\] {
     margin-left: 3px;
 }
@@ -1856,6 +1928,14 @@ ol,
     margin-right: 7px;
 }
 
+.tw-mt-1 {
+    margin-top: 0.25rem;
+}
+
+.tw-mt-1\.5 {
+    margin-top: 0.375rem;
+}
+
 .tw-inline-block {
     display: inline-block;
 }
@@ -1896,6 +1976,10 @@ ol,
     height: 34px;
 }
 
+.tw-w-24 {
+    width: 6rem;
+}
+
 .tw-w-3 {
     width: 0.75rem;
 }
@@ -1912,6 +1996,10 @@ ol,
     width: 200px;
 }
 
+.tw-w-full {
+    width: 100%;
+}
+
 .tw-min-w-\[300px\] {
     min-width: 300px;
 }
@@ -1921,6 +2009,46 @@ ol,
     min-width: fit-content;
 }
 
+.tw-max-w-2xl {
+    max-width: 42rem;
+}
+
+.tw-max-w-3xl {
+    max-width: 48rem;
+}
+
+.tw-max-w-4xl {
+    max-width: 56rem;
+}
+
+.tw-max-w-5xl {
+    max-width: 64rem;
+}
+
+.tw-max-w-6xl {
+    max-width: 72rem;
+}
+
+.tw-max-w-lg {
+    max-width: 32rem;
+}
+
+.tw-max-w-md {
+    max-width: 28rem;
+}
+
+.tw-max-w-sm {
+    max-width: 24rem;
+}
+
+.tw-max-w-xl {
+    max-width: 36rem;
+}
+
+.tw-max-w-xs {
+    max-width: 20rem;
+}
+
 .tw-flex-1 {
     flex: 1 1 0%;
 }
@@ -1945,6 +2073,11 @@ ol,
     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-\[-50\%\] {
+    --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));
@@ -1992,10 +2125,26 @@ ol,
     align-items: center;
 }
 
+.tw-justify-start {
+    justify-content: flex-start;
+}
+
+.tw-justify-end {
+    justify-content: flex-end;
+}
+
 .tw-justify-center {
     justify-content: center;
 }
 
+.tw-justify-between {
+    justify-content: space-between;
+}
+
+.\!tw-gap-0 {
+    gap: 0px !important;
+}
+
 .tw-gap-4 {
     gap: 1rem;
 }
@@ -2020,6 +2169,10 @@ ol,
     border-radius: 0.25rem;
 }
 
+.tw-rounded-lg {
+    border-radius: 0.5rem;
+}
+
 .tw-rounded-sm {
     border-radius: 3px;
 }
@@ -2056,6 +2209,14 @@ ol,
     border-width: 1px;
 }
 
+.tw-border-0 {
+    border-width: 0px;
+}
+
+.tw-border-b {
+    border-bottom-width: 1px;
+}
+
 .tw-border-b-\[1px\] {
     border-bottom-width: 1px;
 }
@@ -2188,6 +2349,10 @@ ol,
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.\!tw-p-0 {
+    padding: 0px !important;
+}
+
 .tw-p-0 {
     padding: 0px;
 }
@@ -2208,6 +2373,10 @@ ol,
     padding: 1.25rem;
 }
 
+.tw-p-6 {
+    padding: 1.5rem;
+}
+
 .tw-p-\[0\.5rem\] {
     padding: 0.5rem;
 }
@@ -2232,6 +2401,11 @@ ol,
     padding-right: 0.75rem;
 }
 
+.tw-px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+
 .tw-px-\[5px\] {
     padding-left: 5px;
     padding-right: 5px;
@@ -2252,6 +2426,11 @@ ol,
     padding-bottom: 0.25rem;
 }
 
+.tw-py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
 .tw-py-\[1px\] {
     padding-top: 1px;
     padding-bottom: 1px;
@@ -2262,6 +2441,14 @@ ol,
     padding-bottom: 3px;
 }
 
+.tw-pl-0 {
+    padding-left: 0px;
+}
+
+.tw-pl-0\.5 {
+    padding-left: 0.125rem;
+}
+
 .tw-pl-2 {
     padding-left: 0.5rem;
 }
@@ -2278,6 +2465,10 @@ ol,
     padding-right: 0.375rem;
 }
 
+.tw-text-left {
+    text-align: left;
+}
+
 .tw-text-center {
     text-align: center;
 }
@@ -2317,6 +2508,10 @@ ol,
     font-weight: 500;
 }
 
+.tw-italic {
+    font-style: italic;
+}
+
 .tw-leading-normal {
     line-height: 1.5;
 }
@@ -2404,11 +2599,31 @@ ol,
     opacity: 0.5;
 }
 
+.tw-opacity-70 {
+    opacity: 0.7;
+}
+
+.tw-shadow-lg {
+    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.tw-shadow-none {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .tw-outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px;
 }
 
+.tw-duration-200 {
+    transition-duration: 200ms;
+}
+
 /* 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 */
@@ -2451,6 +2666,23 @@ ol,
     animation: fadeIn 500ms;
 }
 
+.modal-header .close {
+    font-weight: 700;
+    text-shadow: 0 1px 0 #fff;
+}
+
+.modal-header .close:focus-visible {
+    outline: none;
+}
+
+.modalContent {
+    max-height: calc(100% - 3.5rem);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: #00000080 0 5px 15px;
+}
+
 .before\:tw-absolute::before {
     content: var(--tw-content);
     position: absolute;
@@ -2654,6 +2886,10 @@ ol,
     color: rgb(var(--sq-danger-color));
 }
 
+.hover\:tw-opacity-100:hover {
+    opacity: 1;
+}
+
 .checked\:hover\:tw-border-sq-color-dark:hover:checked {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-color-dark));
@@ -2974,4 +3210,4 @@ ol,
 .tw-dark .dark\:disabled\:tw-border-sq-fairly-dark-gray:disabled {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-fairly-dark-gray));
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.js",
@@ -72,6 +72,7 @@
     "@floating-ui/dom": "^1.5.1",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-popover": "1.0.7",
+    "@radix-ui/react-dialog": "1.0.5",
     "dompurify": "^3.0.5",
     "postcss": "8.4.21",
     "react-select": "5.7.3",