react-core-ts 4.0.1 → 4.0.3

package/dist/react-core-ts.css

@@ -1,791 +1,907 @@
-.container {
-    width: 100%
-}
-@media (min-width: 640px) {
-    .container {
-        max-width: 640px
-    }
-}
-@media (min-width: 768px) {
-    .container {
-        max-width: 768px
-    }
-}
-@media (min-width: 1024px) {
-    .container {
-        max-width: 1024px
-    }
-}
-@media (min-width: 1280px) {
-    .container {
-        max-width: 1280px
-    }
-}
-@media (min-width: 1536px) {
-    .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 {
+.qbs-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 {
+.placeholder\:qbs-normal-case::-moz-placeholder {
     text-transform: none
 }
-.placeholder\:normal-case::placeholder {
+.placeholder\:qbs-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;
+/**
+ * Self-contained modern TextField / Autocomplete input styles.
+ * These used to live in host apps; the library must ship them for Vite / local preview.
+ */
+
+/* Base peer input (height + border) */
+input.qbs-peer,
+.qbs-textfield input[class*='qbs-h-'] {
+  box-sizing: border-box !important;
+  display: block;
+  width: 100%;
+  height: 2.5rem !important;
+  min-height: 2.5rem !important;
+  margin: 0;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #d0d5dd;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #111827;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
 }
-: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;
+
+input.qbs-peer.qbs-h-\[34px\],
+.qbs-textfield input.qbs-h-\[34px\] {
+  height: 34px !important;
+  min-height: 34px !important;
+}
+
+input.qbs-peer.qbs-h-\[25px\],
+.qbs-textfield input.qbs-h-\[25px\] {
+  height: 25px !important;
+  min-height: 25px !important;
+  font-size: 0.75rem;
+}
+
+input.qbs-peer:focus {
+  border-color: #001f3f;
+}
+
+input.qbs-peer:disabled {
+  color: #98a2b3;
+  background-color: #f2f4f7;
+  cursor: not-allowed;
+}
+
+/* Host-token fallbacks (prefixed utilities that are not in default Tailwind theme) */
+.qbs-border-input-light {
+  border-color: #d0d5dd;
+}
+.qbs-text-input-text {
+  color: #111827;
+}
+.qbs-text-input-disabled,
+.disabled\:qbs-text-input-disabled:disabled {
+  color: #98a2b3;
+}
+.qbs-bg-disabled,
+.disabled\:qbs-bg-disabled:disabled {
+  background-color: #f2f4f7;
+}
+.qbs-text-grey-dark {
+  color: #344054;
+}
+.qbs-text-error-light {
+  color: #f04438;
+}
+.qbs-text-grey-medium {
+  color: #667085;
+}
+.qbs-bg-bodyBG {
+  background-color: #f9fafb;
+}
+.qbs-text-xxs {
+  font-size: 0.625rem;
+  line-height: 0.875rem;
+}
+.qbs-input-outline {
+  outline: none;
+}
+.text-common {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #101828;
+}
+.text-error {
+  color: #f04438;
+}
+.text-grey-secondary {
+  color: #667085;
+}
+.text-text-primary {
+  color: #101828;
+}
+
+/* Floating label: hide native placeholder when modern label is used */
+.placeholder-transparent::placeholder {
+  color: transparent !important;
+}
+.placeholder-transparent::-webkit-input-placeholder {
+  color: transparent !important;
 }
+.focus\:placeholder-grey-secondary:focus::placeholder {
+  color: #98a2b3;
+}
+
+.modern-input-label-truncate {
+  max-width: calc(100% - 1.75rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  background-color: transparent;
+}
+
+.modern-input-label-size {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.modern-input-peer-focus-label-size,
+.peer-focus\:modern-input-peer-focus-label-size {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+/* When peer has value / is focused, shrink label (Tailwind peer-focus variant class name) */
+.qbs-peer:focus ~ .peer-focus\:modern-input-peer-focus-label-size,
+.qbs-peer:not(:placeholder-shown) ~ .modern-input-peer-focus-label-size,
+.qbs-peer:not(:placeholder-shown) ~ label.modern-input-label-truncate {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.active-input-label-bg {
+  background-color: #fff;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.disabled-input-label-bg {
+  background-color: #f2f4f7;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+/* Ensure bordered utility actually draws a border */
+.qbs-border {
+  border-style: solid;
+}
+
+
+/* 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;
+}
+
+/*
+ * Scoped border-box so TextField / Autocomplete heights match pre-4.0.2 behavior.
+ * (Removing global body * broke height because padding+border were added outside h-*).
+ */
+.qbs-textfield,
+.qbs-textfield *,
+.qbs-autocomplete-selected-comp,
+.qbs-autocomplete-selected-comp *,
+.qbs-autocomplete-suggestions,
+.qbs-autocomplete-suggestions *,
+.autocomplete-suggections,
+.autocomplete-suggections *,
+.qbs-expandable-container,
+.qbs-expandable-container *,
+.tooltip-container,
+.tooltip-container *,
+.react-core-ts-search-container,
+.react-core-ts-search-container *,
+.qbs-autocomplete-container-table-view,
+.qbs-autocomplete-container-table-view * {
+  box-sizing: border-box;
+}
+
+/* Explicit TextField size heights — reliable even if utility order fights other CSS */
+.qbs-textfield input.qbs-h-10,
+input.qbs-peer.qbs-h-10 {
+  height: 2.5rem;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+}
+.qbs-textfield input.qbs-h-\[25px\],
+input.qbs-peer.qbs-h-\[25px\] {
+  height: 25px;
+  min-height: 25px;
+  box-sizing: border-box;
+}
+.qbs-textfield input.qbs-h-\[34px\],
+input.qbs-peer.qbs-h-\[34px\] {
+  height: 34px;
+  min-height: 34px;
+  box-sizing: border-box;
 }
 
 .custom-spinner {
@@ -1165,7 +1281,8 @@ ul {
   position: absolute;
   right: 25px;
   z-index: 99;
-  top: 18px;
+  top: 50%;
+  transform: translateY(-50%);
   flex-wrap: wrap;
 }
 
@@ -1191,7 +1308,8 @@ ul {
   position: absolute;
   right: 8px;
   z-index: 99;
-  top: 6.5px;
+  top: 50%;
+  transform: translateY(-50%);
   flex-wrap: wrap;
 }
 
@@ -1590,22 +1708,93 @@ span.dropdown-search-icon {
 
 /* TextField Inner Search Button */
 .inner-search-button {
+  position: absolute;
   background: #f8f8f8;
-  border-radius: 6px;
-  padding: 0px 8px;
+  border: none;
+  border-radius: 0 3px 3px 0;
+  padding: 0 8px;
   display: flex;
   align-items: center;
-  justify-content: center;  
+  justify-content: center;
   cursor: pointer;
-  height: 38px;
+  height: calc(100% - 2px);
   width: 38px;
   top: 1px;
-  right: 2px;
+  right: 1px;
+  z-index: 2;
+  box-sizing: border-box;
 }
 .search-btn-input {
   padding-right: 38px;
 }
 
+/*
+ * Keep end icons inside the input border.
+ * (Sibling flex + qbs-w-full previously pushed icons outside the bordered input.)
+ */
+.qbs-autocomplete-adorement-wrapper,
+.qbs-input-adorement-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  z-index: 2;
+  pointer-events: none;
+}
+.qbs-autocomplete-adorement-wrapper > *,
+.qbs-input-adorement-wrapper > * {
+  pointer-events: auto;
+}
+
+.qbs-autocomplete-adorement-wrapper .adorement,
+.qbs-autocomplete-adorement-wrapper .qbs-autocomplete-adorement,
+.qbs-input-adorement-wrapper .adorement {
+  position: relative !important;
+  right: auto !important;
+  top: auto !important;
+  height: 100%;
+  padding-right: 4px;
+  box-sizing: border-box;
+}
+
+/* Avoid Tailwind `container` utility collision (prefix makes it `.qbs-container`) */
+.qbs-selected-comp-normal {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: none;
+}
+
+.qbs-autocomplete-selected-comp {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.qbs-autocomplete-selected-comp > .qbs-textfield-expandable.qbs-normal,
+.qbs-autocomplete-selected-comp > .qbs-textfield-expandable.qbs-normal .qbs-textfield-default {
+  display: block;
+  width: 100%;
+}
+
+/* Tools icon should sit inside the field, vertically centered */
+.qbs-tools-drop-btn {
+  position: absolute !important;
+  right: 8px !important;
+  top: 50% !important;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
 .qbs-tree-list-container {
   display: flex;
   flex-direction: column;