react-core-ts 4.0.0 → 4.0.2

package/dist/react-core-ts.css

@@ -1,791 +1,722 @@
-.container {
+.qbs-container {
     width: 100%
 }
 @media (min-width: 640px) {
-    .container {
+    .qbs-container {
         max-width: 640px
     }
 }
 @media (min-width: 768px) {
-    .container {
+    .qbs-container {
         max-width: 768px
     }
 }
 @media (min-width: 1024px) {
-    .container {
+    .qbs-container {
         max-width: 1024px
     }
 }
 @media (min-width: 1280px) {
-    .container {
+    .qbs-container {
         max-width: 1280px
     }
 }
 @media (min-width: 1536px) {
-    .container {
+    .qbs-container {
         max-width: 1536px
     }
 }
-.\!visible {
-    visibility: visible !important
-}
-.visible {
+.qbs-visible {
     visibility: visible
 }
-.invisible {
+.qbs-invisible {
     visibility: hidden
 }
-.static {
-    position: static
-}
-.fixed {
-    position: fixed
-}
-.absolute {
+.qbs-absolute {
     position: absolute
 }
-.relative {
+.qbs-relative {
     position: relative
 }
-.sticky {
+.qbs-sticky {
     position: sticky
 }
-.left-0 {
+.qbs-bottom-0 {
+    bottom: 0px
+}
+.qbs-left-0 {
     left: 0px
 }
-.right-0 {
+.qbs-right-0 {
     right: 0px
 }
-.right-1 {
-    right: 0.25rem
-}
-.right-2 {
+.qbs-right-2 {
     right: 0.5rem
 }
-.right-\[1px\] {
+.qbs-right-\[1px\] {
     right: 1px
 }
-.start-\[14px\] {
+.qbs-start-\[14px\] {
     inset-inline-start: 14px
 }
-.top-0 {
+.qbs-top-0 {
     top: 0px
 }
-.top-1 {
+.qbs-top-1 {
     top: 0.25rem
 }
-.top-1\.5 {
+.qbs-top-1\.5 {
     top: 0.375rem
 }
-.top-2 {
+.qbs-top-2 {
     top: 0.5rem
 }
-.top-6 {
+.qbs-top-6 {
     top: 1.5rem
 }
-.z-10 {
+.qbs-z-10 {
     z-index: 10
 }
-.z-50 {
+.qbs-z-50 {
     z-index: 50
 }
-.m-0 {
+.qbs-m-0 {
     margin: 0px
 }
-.mb-2 {
+.-qbs-mt-2 {
+    margin-top: -0.5rem
+}
+.qbs-mb-2 {
     margin-bottom: 0.5rem
 }
-.mb-3 {
+.qbs-mb-3 {
     margin-bottom: 0.75rem
 }
-.me-2 {
+.qbs-me-2 {
     margin-inline-end: 0.5rem
 }
-.ml-2 {
+.qbs-ml-2 {
     margin-left: 0.5rem
 }
-.ml-4 {
-    margin-left: 1rem
-}
-.ml-7 {
-    margin-left: 1.75rem
-}
-.mr-0 {
+.qbs-mr-0 {
     margin-right: 0px
 }
-.mr-1 {
+.qbs-mr-1 {
     margin-right: 0.25rem
 }
-.mr-2 {
+.qbs-mr-2 {
     margin-right: 0.5rem
 }
-.mr-\[1px\] {
+.qbs-mr-\[1px\] {
     margin-right: 1px
 }
-.ms-2 {
-    margin-inline-start: 0.5rem
-}
-.mt-1 {
-    margin-top: 0.25rem
-}
-.mt-2 {
-    margin-top: 0.5rem
-}
-.mt-9 {
+.qbs-mt-9 {
     margin-top: 2.25rem
 }
-.mt-\[1px\] {
+.qbs-mt-\[1px\] {
     margin-top: 1px
 }
-.block {
+.qbs-block {
     display: block
 }
-.inline {
-    display: inline
+.qbs-inline-block {
+    display: inline-block
 }
-.flex {
+.qbs-flex {
     display: flex
 }
-.inline-flex {
+.qbs-inline-flex {
     display: inline-flex
 }
-.contents {
-    display: contents
-}
-.hidden {
+.qbs-hidden {
     display: none
 }
-.h-10 {
+.qbs-h-10 {
     height: 2.5rem
 }
-.h-4 {
+.qbs-h-4 {
     height: 1rem
 }
-.h-5 {
+.qbs-h-5 {
     height: 1.25rem
 }
-.h-6 {
+.qbs-h-6 {
     height: 1.5rem
 }
-.h-\[20px\] {
+.qbs-h-\[20px\] {
     height: 20px
 }
-.h-\[25px\] {
+.qbs-h-\[25px\] {
     height: 25px
 }
-.h-\[34px\] {
+.qbs-h-\[34px\] {
     height: 34px
 }
-.h-auto {
+.qbs-h-auto {
     height: auto
 }
-.max-h-40 {
+.qbs-max-h-40 {
     max-height: 10rem
 }
-.min-h-\[28px\] {
+.qbs-min-h-6 {
+    min-height: 1.5rem
+}
+.qbs-min-h-\[28px\] {
     min-height: 28px
 }
-.w-4 {
+.qbs-w-4 {
     width: 1rem
 }
-.w-5 {
+.qbs-w-5 {
     width: 1.25rem
 }
-.w-6 {
+.qbs-w-6 {
     width: 1.5rem
 }
-.w-\[54px\] {
+.qbs-w-\[54px\] {
     width: 54px
 }
-.w-auto {
+.qbs-w-auto {
     width: auto
 }
-.w-fit {
+.qbs-w-fit {
     width: -moz-fit-content;
     width: fit-content
 }
-.w-full {
+.qbs-w-full {
     width: 100%
 }
-.min-w-0 {
+.qbs-min-w-0 {
     min-width: 0px
 }
-.min-w-\[20px\] {
+.qbs-min-w-6 {
+    min-width: 1.5rem
+}
+.qbs-min-w-\[20px\] {
     min-width: 20px
 }
-.min-w-\[28px\] {
+.qbs-min-w-\[28px\] {
     min-width: 28px
 }
-.flex-1 {
+.qbs-flex-1 {
     flex: 1 1 0%
 }
-.flex-shrink {
-    flex-shrink: 1
-}
-.flex-shrink-0 {
+.qbs-flex-shrink-0 {
     flex-shrink: 0
 }
-.flex-grow {
+.qbs-flex-grow {
     flex-grow: 1
 }
-.origin-\[0\] {
+.qbs-origin-\[0\] {
     transform-origin: 0
 }
-.-translate-y-1 {
+.-qbs-translate-y-1 {
     --tw-translate-y: -0.25rem;
     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))
 }
-.-translate-y-4 {
+.-qbs-translate-y-4 {
     --tw-translate-y: -1rem;
     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))
 }
-.translate-x-1 {
+.qbs-translate-x-1 {
     --tw-translate-x: 0.25rem;
     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))
 }
-.translate-y-0 {
+.qbs-translate-y-0 {
     --tw-translate-y: 0px;
     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))
 }
-.translate-y-2 {
+.qbs-translate-y-2 {
     --tw-translate-y: 0.5rem;
     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))
 }
-.rotate-180 {
+.qbs-rotate-180 {
     --tw-rotate: 180deg;
     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))
 }
-.rotate-90 {
-    --tw-rotate: 90deg;
+.qbs-transform {
     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))
 }
-.transform {
-    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))
-}
-@keyframes spin {
+@keyframes qbs-spin {
     to {
         transform: rotate(360deg)
     }
 }
-.animate-spin {
-    animation: spin 1s linear infinite
+.qbs-animate-spin {
+    animation: qbs-spin 1s linear infinite
 }
-.cursor-default {
+.qbs-cursor-default {
     cursor: default
 }
-.cursor-not-allowed {
+.qbs-cursor-not-allowed {
     cursor: not-allowed
 }
-.cursor-pointer {
+.qbs-cursor-pointer {
     cursor: pointer
 }
-.cursor-text {
+.qbs-cursor-text {
     cursor: text
 }
-.select-all {
-    -webkit-user-select: all;
-       -moz-user-select: all;
-            user-select: all
-}
-.resize-none {
+.qbs-resize-none {
     resize: none
 }
-.resize {
-    resize: both
-}
-.list-none {
+.qbs-list-none {
     list-style-type: none
 }
-.appearance-none {
+.qbs-appearance-none {
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none
 }
-.flex-row {
-    flex-direction: row
-}
-.flex-col {
+.qbs-flex-col {
     flex-direction: column
 }
-.flex-wrap {
+.qbs-flex-wrap {
     flex-wrap: wrap
 }
-.items-center {
+.qbs-items-center {
     align-items: center
 }
-.items-stretch {
+.qbs-items-stretch {
     align-items: stretch
 }
-.justify-start {
+.qbs-justify-start {
     justify-content: flex-start
 }
-.justify-center {
+.qbs-justify-end {
+    justify-content: flex-end
+}
+.qbs-justify-center {
     justify-content: center
 }
-.justify-between {
+.qbs-justify-between {
     justify-content: space-between
 }
-.gap-0 {
+.qbs-gap-0 {
     gap: 0px
 }
-.gap-1 {
+.qbs-gap-1 {
     gap: 0.25rem
 }
-.gap-2 {
+.qbs-gap-2 {
     gap: 0.5rem
 }
-.gap-x-5 {
+.qbs-gap-x-5 {
     -moz-column-gap: 1.25rem;
          column-gap: 1.25rem
 }
-.overflow-auto {
+.qbs-overflow-auto {
     overflow: auto
 }
-.overflow-x-auto {
+.qbs-overflow-x-auto {
     overflow-x: auto
 }
-.overflow-y-auto {
+.qbs-overflow-y-auto {
     overflow-y: auto
 }
-.truncate {
+.qbs-truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap
 }
-.whitespace-normal {
+.qbs-whitespace-normal {
     white-space: normal
 }
-.break-words {
+.qbs-break-words {
     overflow-wrap: break-word
 }
-.rounded-\[4px\] {
+.qbs-rounded-\[4px\] {
     border-radius: 4px
 }
-.rounded-full {
+.qbs-rounded-full {
     border-radius: 9999px
 }
-.rounded-sm {
+.qbs-rounded-sm {
     border-radius: 0.125rem
 }
-.border {
+.qbs-border {
     border-width: 1px
 }
-.border-b {
+.qbs-border-b {
     border-bottom-width: 1px
 }
-.border-r {
+.qbs-border-b-2 {
+    border-bottom-width: 2px
+}
+.qbs-border-r {
     border-right-width: 1px
 }
-.border-none {
+.qbs-border-none {
     border-style: none
 }
-.border-\[\#D0D5DD\] {
+.qbs-border-\[\#D0D5DD\] {
     --tw-border-opacity: 1;
     border-color: rgb(208 213 221 / var(--tw-border-opacity))
 }
-.border-\[\#FDA29B\] {
+.qbs-border-\[\#FDA29B\] {
     --tw-border-opacity: 1;
     border-color: rgb(253 162 155 / var(--tw-border-opacity))
 }
-.bg-blue-navy {
-    --tw-bg-opacity: 1;
-    background-color: rgb(0 31 63 / var(--tw-bg-opacity))
-}
-.bg-gray-100 {
+.qbs-bg-gray-100 {
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity))
 }
-.bg-green-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(187 247 208 / var(--tw-bg-opacity))
-}
-.bg-orange-500 {
+.qbs-bg-orange-500 {
     --tw-bg-opacity: 1;
     background-color: rgb(249 115 22 / var(--tw-bg-opacity))
 }
-.bg-transparent {
+.qbs-bg-transparent {
     background-color: transparent
 }
-.bg-white {
+.qbs-bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
-.fill-blue-navy {
+.qbs-fill-blue-navy {
     fill: #001f3f
 }
-.p-0 {
+.qbs-p-0 {
     padding: 0px
 }
-.p-0\.5 {
+.qbs-p-0\.5 {
     padding: 0.125rem
 }
-.p-1 {
+.qbs-p-1 {
     padding: 0.25rem
 }
-.p-1\.5 {
-    padding: 0.375rem
-}
-.p-2 {
-    padding: 0.5rem
-}
-.px-0 {
+.qbs-px-0 {
     padding-left: 0px;
     padding-right: 0px
 }
-.px-1 {
+.qbs-px-1 {
     padding-left: 0.25rem;
     padding-right: 0.25rem
 }
-.px-1\.5 {
+.qbs-px-1\.5 {
     padding-left: 0.375rem;
     padding-right: 0.375rem
 }
-.px-2 {
+.qbs-px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem
 }
-.px-2\.5 {
+.qbs-px-2\.5 {
     padding-left: 0.625rem;
     padding-right: 0.625rem
 }
-.px-3 {
+.qbs-px-3 {
     padding-left: 0.75rem;
     padding-right: 0.75rem
 }
-.px-3\.5 {
+.qbs-px-3\.5 {
     padding-left: 0.875rem;
     padding-right: 0.875rem
 }
-.py-0 {
+.qbs-py-0 {
     padding-top: 0px;
     padding-bottom: 0px
 }
-.py-0\.5 {
+.qbs-py-0\.5 {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem
 }
-.py-1 {
+.qbs-py-1 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem
 }
-.py-1\.5 {
+.qbs-py-1\.5 {
     padding-top: 0.375rem;
     padding-bottom: 0.375rem
 }
-.py-2 {
+.qbs-py-2 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem
 }
-.py-4 {
+.qbs-py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem
 }
-.\!pl-\[45px\] {
+.\!qbs-pl-\[45px\] {
     padding-left: 45px !important
 }
-.\!pt-\[10px\] {
+.\!qbs-pt-\[10px\] {
     padding-top: 10px !important
 }
-.pl-2 {
+.qbs-pl-2 {
     padding-left: 0.5rem
 }
-.pl-\[10px\] {
+.qbs-pl-\[10px\] {
     padding-left: 10px
 }
-.pr-8 {
-    padding-right: 2rem
-}
-.ps-3 {
+.qbs-ps-3 {
     padding-inline-start: 0.75rem
 }
-.ps-3\.5 {
+.qbs-ps-3\.5 {
     padding-inline-start: 0.875rem
 }
-.pt-3 {
+.qbs-pt-16 {
+    padding-top: 4rem
+}
+.qbs-pt-3 {
     padding-top: 0.75rem
 }
-.text-center {
+.qbs-text-center {
     text-align: center
 }
-.text-\[10px\] {
+.qbs-text-right {
+    text-align: right
+}
+.qbs-align-middle {
+    vertical-align: middle
+}
+.qbs-text-\[10px\] {
     font-size: 10px
 }
-.text-\[11px\] {
+.qbs-text-\[11px\] {
     font-size: 11px
 }
-.text-base {
+.qbs-text-base {
     font-size: 1rem;
     line-height: 1.5rem
 }
-.text-lg {
+.qbs-text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem
 }
-.text-sm {
+.qbs-text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem
 }
-.text-xs {
+.qbs-text-xs {
     font-size: 0.75rem;
     line-height: 1rem
 }
-.font-medium {
+.qbs-font-medium {
     font-weight: 500
 }
-.font-normal {
+.qbs-font-normal {
     font-weight: 400
 }
-.font-semibold {
+.qbs-font-semibold {
     font-weight: 600
 }
-.uppercase {
-    text-transform: uppercase
-}
-.leading-\[18px\] {
-    line-height: 18px
+.qbs-leading-none {
+    line-height: 1
 }
-.text-\[\#003C71\] {
+.qbs-text-\[\#003C71\] {
     --tw-text-opacity: 1;
     color: rgb(0 60 113 / var(--tw-text-opacity))
 }
-.text-\[\#28B440\] {
+.qbs-text-\[\#28B440\] {
     --tw-text-opacity: 1;
     color: rgb(40 180 64 / var(--tw-text-opacity))
 }
-.text-\[\#475467\] {
+.qbs-text-\[\#475467\] {
     --tw-text-opacity: 1;
     color: rgb(71 84 103 / var(--tw-text-opacity))
 }
-.text-\[\#667085\] {
+.qbs-text-\[\#667085\] {
     --tw-text-opacity: 1;
     color: rgb(102 112 133 / var(--tw-text-opacity))
 }
-.text-\[\#F94110\] {
+.qbs-text-\[\#F94110\] {
     --tw-text-opacity: 1;
     color: rgb(249 65 16 / var(--tw-text-opacity))
 }
-.text-blue-navy {
+.qbs-text-blue-navy {
     --tw-text-opacity: 1;
     color: rgb(0 31 63 / var(--tw-text-opacity))
 }
-.text-gray-500 {
+.qbs-text-gray-500 {
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity))
 }
-.text-gray-700 {
+.qbs-text-gray-700 {
     --tw-text-opacity: 1;
     color: rgb(55 65 81 / var(--tw-text-opacity))
 }
-.text-gray-900 {
+.qbs-text-gray-900 {
     --tw-text-opacity: 1;
     color: rgb(17 24 39 / var(--tw-text-opacity))
 }
-.text-green-500 {
+.qbs-text-green-500 {
     --tw-text-opacity: 1;
     color: rgb(34 197 94 / var(--tw-text-opacity))
 }
-.text-table-hover {
+.qbs-text-table-hover {
     --tw-text-opacity: 1;
     color: rgb(248 248 248 / var(--tw-text-opacity))
 }
-.text-white {
+.qbs-text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity))
 }
-.text-zinc-500 {
+.qbs-text-zinc-500 {
     --tw-text-opacity: 1;
     color: rgb(113 113 122 / var(--tw-text-opacity))
 }
-.placeholder-transparent::-moz-placeholder {
-    color: transparent
-}
-.placeholder-transparent::placeholder {
-    color: transparent
-}
-.opacity-70 {
+.qbs-opacity-70 {
     opacity: 0.7
 }
-.shadow-md {
+.qbs-shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
-.shadow-gray-300 {
+.qbs-shadow-gray-300 {
     --tw-shadow-color: #d1d5db;
     --tw-shadow: var(--tw-shadow-colored)
 }
-.outline-none {
+.qbs-outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px
 }
-.outline {
-    outline-style: solid
-}
-.blur {
-    --tw-blur: blur(8px);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
-}
-.filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
-}
-.transition {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms
-}
-.transition-colors {
+.qbs-transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms
 }
-.duration-200 {
+.qbs-duration-200 {
     transition-duration: 200ms
 }
-.duration-300 {
+.qbs-duration-300 {
     transition-duration: 300ms
 }
-.ease-in-out {
+.qbs-ease-in-out {
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
 }
-.placeholder\:normal-case::-moz-placeholder {
-    text-transform: none
-}
-.placeholder\:normal-case::placeholder {
-    text-transform: none
-}
-.last\:border-b-0:last-child {
+.last\:qbs-border-b-0:last-child {
     border-bottom-width: 0px
 }
-.hover\:bg-table-hover:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
-}
-.focus\:border-\[\#667085\]:focus {
+.focus\:qbs-border-\[\#667085\]:focus {
     --tw-border-opacity: 1;
     border-color: rgb(102 112 133 / var(--tw-border-opacity))
 }
-.focus\:border-blue-navy:focus {
+.focus\:qbs-border-blue-navy:focus {
     --tw-border-opacity: 1;
     border-color: rgb(0 31 63 / var(--tw-border-opacity))
 }
-.focus\:outline-none:focus {
+.focus\:qbs-outline-none:focus {
     outline: 2px solid transparent;
     outline-offset: 2px
 }
-.focus\:outline-\[\#FDA29B\]:focus {
+.focus\:qbs-outline-\[\#FDA29B\]:focus {
     outline-color: #FDA29B
 }
-.focus\:ring-0:focus {
+.focus\:qbs-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)
 }
-.focus\:ring-\[\#FDA29B\]:focus {
+.focus\:qbs-ring-\[\#FDA29B\]:focus {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(253 162 155 / var(--tw-ring-opacity))
 }
-.focus-visible\:outline-slate-100:focus-visible {
+.focus-visible\:qbs-outline-slate-100:focus-visible {
     outline-color: #f1f5f9
 }
-.disabled\:opacity-70:disabled {
+.disabled\:qbs-opacity-70:disabled {
     opacity: 0.7
 }
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-1\/2 {
+.qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-top-1\/2 {
     top: 50%
 }
-.peer:placeholder-shown ~ .peer-placeholder-shown\:top-1\/2 {
+.qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-top-1\/2 {
     top: 50%
 }
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-\[2px\] {
+.qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-top-\[2px\] {
     top: 2px
 }
-.peer:placeholder-shown ~ .peer-placeholder-shown\:top-\[2px\] {
+.qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-top-\[2px\] {
     top: 2px
 }
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-\[60\%\] {
+.qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-top-\[60\%\] {
     top: 60%
 }
-.peer:placeholder-shown ~ .peer-placeholder-shown\:top-\[60\%\] {
+.qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-top-\[60\%\] {
     top: 60%
 }
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:-translate-y-1\/2 {
+.qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:-qbs-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))
 }
-.peer:placeholder-shown ~ .peer-placeholder-shown\:-translate-y-1\/2 {
+.qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:-qbs-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))
 }
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-y-0 {
+.qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-translate-y-0 {
     --tw-translate-y: 0px;
     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))
 }
-.peer:placeholder-shown ~ .peer-placeholder-shown\:translate-y-0 {
+.qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-translate-y-0 {
     --tw-translate-y: 0px;
     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))
 }
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-y-2 {
+.qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-translate-y-2 {
     --tw-translate-y: 0.5rem;
     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))
 }
-.peer:placeholder-shown ~ .peer-placeholder-shown\:translate-y-2 {
+.qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-translate-y-2 {
     --tw-translate-y: 0.5rem;
     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))
 }
-.peer:focus ~ .peer-focus\:top-1\.5 {
+.qbs-peer:focus ~ .peer-focus\:qbs-top-1\.5 {
     top: 0.375rem
 }
-.peer:focus ~ .peer-focus\:top-2 {
+.qbs-peer:focus ~ .peer-focus\:qbs-top-2 {
     top: 0.5rem
 }
-.peer:focus ~ .peer-focus\:-translate-y-4 {
+.qbs-peer:focus ~ .peer-focus\:-qbs-translate-y-4 {
     --tw-translate-y: -1rem;
     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))
 }
-.peer:focus ~ .peer-focus\:cursor-pointer {
+.qbs-peer:focus ~ .peer-focus\:qbs-cursor-pointer {
     cursor: pointer
 }
-.peer:focus ~ .peer-focus\:text-blue-navy {
+.qbs-peer:focus ~ .peer-focus\:qbs-text-blue-navy {
     --tw-text-opacity: 1;
     color: rgb(0 31 63 / var(--tw-text-opacity))
 }
-.peer:focus ~ .rtl\:peer-focus\:left-auto:where([dir="rtl"], [dir="rtl"] *) {
+.qbs-peer:focus ~ .rtl\:peer-focus\:qbs-left-auto:where([dir="rtl"], [dir="rtl"] *) {
     left: auto
 }
-.peer:focus ~ .rtl\:peer-focus\:translate-x-1\/4:where([dir="rtl"], [dir="rtl"] *) {
+.qbs-peer:focus ~ .rtl\:peer-focus\:qbs-translate-x-1\/4:where([dir="rtl"], [dir="rtl"] *) {
     --tw-translate-x: 25%;
     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))
 }
-.\[\&_svg\]\:mr-0 svg {
+.\[\&_svg\]\:qbs-mr-0 svg {
     margin-right: 0px
 }
-.\[\&_svg\]\:h-5 svg {
+.\[\&_svg\]\:qbs-h-5 svg {
     height: 1.25rem
 }
-.\[\&_svg\]\:w-5 svg {
+.\[\&_svg\]\:qbs-w-5 svg {
     width: 1.25rem
 }
 
 
-body * {
-  box-sizing: border-box;
-}
-:root {
-  --grey-dark: #4a4a4a;
-  --grey-light: #d3d3d3;
-  --blue-navy: #001f3f;
-  --input-disabled: #a9a9a9;
-  --error-light: #f08080;
-  --error-extra-light: #fddede;
-  --success: #28a745;
-  --success-light: #d4edda;
-  --blue-light: #add8e6;
-}
+/* Intentionally no global `body *` reset — avoids conflicting with consumer apps. */
 :root {
-  --blue-navy: #001f3f;
-  --table-hover: #your-hover-color; /* Replace with your actual color code */
+  --rcts-grey-dark: #4a4a4a;
+  --rcts-grey-light: #d3d3d3;
+  --rcts-blue-navy: #001f3f;
+  --rcts-input-disabled: #a9a9a9;
+  --rcts-error-light: #f08080;
+  --rcts-error-extra-light: #fddede;
+  --rcts-success: #28a745;
+  --rcts-success-light: #d4edda;
+  --rcts-blue-light: #add8e6;
+  /* Back-compat aliases */
+  --grey-dark: var(--rcts-grey-dark);
+  --grey-light: var(--rcts-grey-light);
+  --blue-navy: var(--rcts-blue-navy);
+  --input-disabled: var(--rcts-input-disabled);
+  --error-light: var(--rcts-error-light);
+  --error-extra-light: var(--rcts-error-extra-light);
+  --success: var(--rcts-success);
+  --success-light: var(--rcts-success-light);
+  --blue-light: var(--rcts-blue-light);
+  --table-hover: #f8f8f8;
 }
 
 .custom-spinner {