@dgshahr/ui-kit 0.0.4 → 0.0.6

package/dist/assets/styles.css

@@ -499,7 +499,7 @@ video {
 [hidden] {
   display: none;
 }
-.container {
+.dgs-ui-kit-container {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
@@ -508,13 +508,13 @@ video {
 }
 @media (min-width: 640px) {
 
-  .container {
+  .dgs-ui-kit-container {
     max-width: 640px;
   }
 }
 @media (min-width: 768px) {
 
-  .container {
+  .dgs-ui-kit-container {
     max-width: 768px;
     padding-right: 1.5rem;
     padding-left: 1.5rem;
@@ -522,1090 +522,1128 @@ video {
 }
 @media (min-width: 1024px) {
 
-  .container {
+  .dgs-ui-kit-container {
     max-width: 1024px;
   }
 }
 @media (min-width: 1280px) {
 
-  .container {
+  .dgs-ui-kit-container {
     max-width: 1280px;
   }
 }
 @media (min-width: 1536px) {
 
-  .container {
+  .dgs-ui-kit-container {
     max-width: 1536px;
   }
 }
-.absolute {
+.dgs-ui-kit-fixed {
+  position: fixed;
+}
+.dgs-ui-kit-absolute {
   position: absolute;
 }
-.relative {
+.dgs-ui-kit-relative {
   position: relative;
 }
-.bottom-0 {
+.dgs-ui-kit-bottom-0 {
   bottom: 0px;
 }
-.bottom-4 {
+.dgs-ui-kit-bottom-4 {
   bottom: 1rem;
 }
-.left-0 {
+.dgs-ui-kit-left-0 {
   left: 0px;
 }
-.left-\[5\.5\%\] {
+.dgs-ui-kit-left-\[5\.5\%\] {
   left: 5.5%;
 }
-.top-0 {
+.dgs-ui-kit-top-0 {
   top: 0px;
 }
-.my-\[2px\] {
+.dgs-ui-kit-top-1\/2 {
+  top: 50%;
+}
+.dgs-ui-kit-my-\[2px\] {
   margin-top: 2px;
   margin-bottom: 2px;
 }
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-.mb-2 {
+.dgs-ui-kit-mb-2 {
   margin-bottom: 0.5rem;
 }
-.ml-2 {
+.dgs-ui-kit-ml-2 {
   margin-left: 0.5rem;
 }
-.mr-2 {
+.dgs-ui-kit-mr-2 {
   margin-right: 0.5rem;
 }
-.ms-2 {
+.dgs-ui-kit-ms-2 {
   margin-inline-start: 0.5rem;
 }
-.mt-1 {
+.dgs-ui-kit-mt-1 {
   margin-top: 0.25rem;
 }
-.mt-2 {
+.dgs-ui-kit-mt-2 {
   margin-top: 0.5rem;
 }
-.mt-3 {
+.dgs-ui-kit-mt-3 {
   margin-top: 0.75rem;
 }
-.mt-4 {
+.dgs-ui-kit-mt-4 {
   margin-top: 1rem;
 }
-.block {
+.dgs-ui-kit-block {
   display: block;
 }
-.flex {
+.dgs-ui-kit-flex {
   display: flex;
 }
-.inline-flex {
+.dgs-ui-kit-inline-flex {
   display: inline-flex;
 }
-.table {
-  display: table;
-}
-.grid {
+.dgs-ui-kit-grid {
   display: grid;
 }
-.h-1 {
+.dgs-ui-kit-h-1 {
   height: 0.25rem;
 }
-.h-2 {
+.dgs-ui-kit-h-2 {
   height: 0.5rem;
 }
-.h-3 {
+.dgs-ui-kit-h-3 {
   height: 0.75rem;
 }
-.h-4 {
+.dgs-ui-kit-h-4 {
   height: 1rem;
 }
-.h-9 {
+.dgs-ui-kit-h-9 {
   height: 2.25rem;
 }
-.h-\[14px\] {
+.dgs-ui-kit-h-\[14px\] {
   height: 14px;
 }
-.h-\[18px\] {
+.dgs-ui-kit-h-\[18px\] {
   height: 18px;
 }
-.h-\[1px\] {
+.dgs-ui-kit-h-\[1px\] {
   height: 1px;
 }
-.h-\[6px\] {
+.dgs-ui-kit-h-\[200px\] {
+  height: 200px;
+}
+.dgs-ui-kit-h-\[6px\] {
   height: 6px;
 }
-.h-auto {
+.dgs-ui-kit-h-auto {
   height: auto;
 }
-.h-fit {
+.dgs-ui-kit-h-fit {
   height: -moz-fit-content;
   height: fit-content;
 }
-.h-full {
+.dgs-ui-kit-h-full {
   height: 100%;
 }
-.w-1 {
+.dgs-ui-kit-w-1 {
   width: 0.25rem;
 }
-.w-2 {
+.dgs-ui-kit-w-2 {
   width: 0.5rem;
 }
-.w-3 {
+.dgs-ui-kit-w-3 {
   width: 0.75rem;
 }
-.w-4 {
+.dgs-ui-kit-w-4 {
   width: 1rem;
 }
-.w-9 {
+.dgs-ui-kit-w-9 {
   width: 2.25rem;
 }
-.w-\[14px\] {
+.dgs-ui-kit-w-\[14px\] {
   width: 14px;
 }
-.w-\[18px\] {
+.dgs-ui-kit-w-\[18px\] {
   width: 18px;
 }
-.w-\[1px\] {
+.dgs-ui-kit-w-\[1px\] {
   width: 1px;
 }
-.w-\[22px\] {
+.dgs-ui-kit-w-\[22px\] {
   width: 22px;
 }
-.w-\[6px\] {
+.dgs-ui-kit-w-\[400px\] {
+  width: 400px;
+}
+.dgs-ui-kit-w-\[6px\] {
   width: 6px;
 }
-.w-auto {
+.dgs-ui-kit-w-auto {
   width: auto;
 }
-.w-fit {
+.dgs-ui-kit-w-fit {
   width: -moz-fit-content;
   width: fit-content;
 }
-.w-full {
+.dgs-ui-kit-w-full {
   width: 100%;
 }
-.min-w-5 {
+.dgs-ui-kit-min-w-5 {
   min-width: 1.25rem;
 }
-.min-w-6 {
+.dgs-ui-kit-min-w-6 {
   min-width: 1.5rem;
 }
-.min-w-8 {
+.dgs-ui-kit-min-w-8 {
   min-width: 2rem;
 }
-.min-w-max {
+.dgs-ui-kit-min-w-max {
   min-width: -moz-max-content;
   min-width: max-content;
 }
-.flex-1 {
+.dgs-ui-kit-flex-1 {
   flex: 1 1 0%;
 }
-.shrink-0 {
+.dgs-ui-kit-shrink-0 {
   flex-shrink: 0;
 }
-.rotate-180 {
+.-dgs-ui-kit-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));
+}
+.dgs-ui-kit-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));
 }
-.cursor-text {
+.dgs-ui-kit-cursor-text {
   cursor: text;
 }
-.resize-none {
+.dgs-ui-kit-resize-none {
   resize: none;
 }
-.snap-x {
+.dgs-ui-kit-snap-x {
   scroll-snap-type: x var(--tw-scroll-snap-strictness);
 }
-.snap-mandatory {
+.dgs-ui-kit-snap-mandatory {
   --tw-scroll-snap-strictness: mandatory;
 }
-.appearance-none {
+.dgs-ui-kit-snap-always {
+  scroll-snap-stop: always;
+}
+.dgs-ui-kit-appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
 }
-.grid-rows-\[0fr\] {
+.dgs-ui-kit-grid-rows-\[0fr\] {
   grid-template-rows: 0fr;
 }
-.grid-rows-\[1fr\] {
+.dgs-ui-kit-grid-rows-\[1fr\] {
   grid-template-rows: 1fr;
 }
-.flex-col {
+.dgs-ui-kit-flex-col {
   flex-direction: column;
 }
-.items-start {
+.dgs-ui-kit-items-start {
   align-items: flex-start;
 }
-.items-center {
+.dgs-ui-kit-items-center {
   align-items: center;
 }
-.justify-start {
+.dgs-ui-kit-justify-start {
   justify-content: flex-start;
 }
-.justify-end {
+.dgs-ui-kit-justify-end {
   justify-content: flex-end;
 }
-.justify-center {
+.dgs-ui-kit-justify-center {
   justify-content: center;
 }
-.justify-between {
+.dgs-ui-kit-justify-between {
   justify-content: space-between;
 }
-.gap-1 {
+.dgs-ui-kit-gap-1 {
   gap: 0.25rem;
 }
-.gap-2 {
+.dgs-ui-kit-gap-2 {
   gap: 0.5rem;
 }
-.gap-3 {
+.dgs-ui-kit-gap-3 {
   gap: 0.75rem;
 }
-.gap-\[2px\] {
+.dgs-ui-kit-gap-\[2px\] {
   gap: 2px;
 }
-.gap-\[6px\] {
+.dgs-ui-kit-gap-\[6px\] {
   gap: 6px;
 }
-.gap-x-1 {
+.dgs-ui-kit-gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
 }
-.gap-x-2 {
+.dgs-ui-kit-gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
-.gap-x-3 {
+.dgs-ui-kit-gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
 }
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+.dgs-ui-kit-space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+.dgs-ui-kit-space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
-.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
+.dgs-ui-kit-space-x-reverse > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 1;
 }
-.overflow-hidden {
+.dgs-ui-kit-overflow-hidden {
   overflow: hidden;
 }
-.overflow-x-hidden {
+.dgs-ui-kit-overflow-x-auto {
+  overflow-x: auto;
+}
+.dgs-ui-kit-overflow-x-hidden {
   overflow-x: hidden;
 }
-.rounded {
+.dgs-ui-kit-rounded {
   border-radius: 0.25rem;
 }
-.rounded-\[20px\] {
+.dgs-ui-kit-rounded-\[20px\] {
   border-radius: 20px;
 }
-.rounded-full {
+.dgs-ui-kit-rounded-full {
   border-radius: 9999px;
 }
-.rounded-lg {
+.dgs-ui-kit-rounded-lg {
   border-radius: 0.5rem;
 }
-.rounded-xl {
+.dgs-ui-kit-rounded-xl {
   border-radius: 0.75rem;
 }
-.border {
+.dgs-ui-kit-border {
   border-width: 1px;
 }
-.border-solid {
+.dgs-ui-kit-border-solid {
   border-style: solid;
 }
-.\!border-error-500 {
+.\!dgs-ui-kit-border-error-500 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(213 28 41 / var(--tw-border-opacity)) !important;
 }
-.border-error-200 {
+.dgs-ui-kit-border-error-200 {
   --tw-border-opacity: 1;
   border-color: rgb(237 161 166 / var(--tw-border-opacity));
 }
-.border-error-500 {
+.dgs-ui-kit-border-error-500 {
   --tw-border-opacity: 1;
   border-color: rgb(213 28 41 / var(--tw-border-opacity));
 }
-.border-gray-200 {
+.dgs-ui-kit-border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-border-opacity));
 }
-.border-gray-300 {
+.dgs-ui-kit-border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(203 213 225 / var(--tw-border-opacity));
 }
-.border-gray-500 {
+.dgs-ui-kit-border-gray-500 {
   --tw-border-opacity: 1;
   border-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
-.border-primary-100 {
+.dgs-ui-kit-border-primary-100 {
   --tw-border-opacity: 1;
   border-color: rgb(200 211 247 / var(--tw-border-opacity));
 }
-.border-primary-300 {
+.dgs-ui-kit-border-primary-300 {
   --tw-border-opacity: 1;
   border-color: rgb(117 144 235 / var(--tw-border-opacity));
 }
-.border-success-200 {
+.dgs-ui-kit-border-success-200 {
   --tw-border-opacity: 1;
   border-color: rgb(167 243 224 / var(--tw-border-opacity));
 }
-.border-success-500 {
+.dgs-ui-kit-border-success-500 {
   --tw-border-opacity: 1;
   border-color: rgb(16 185 143 / var(--tw-border-opacity));
 }
-.border-transparent {
+.dgs-ui-kit-border-transparent {
   border-color: transparent;
 }
-.border-warning-200 {
+.dgs-ui-kit-border-warning-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 222 142 / var(--tw-border-opacity));
 }
-.border-warning-500 {
+.dgs-ui-kit-border-warning-500 {
   --tw-border-opacity: 1;
   border-color: rgb(253 187 19 / var(--tw-border-opacity));
 }
-.bg-error-100 {
+.dgs-ui-kit-bg-error-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 209 212 / var(--tw-bg-opacity));
 }
-.bg-error-50 {
+.dgs-ui-kit-bg-error-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 235 236 / var(--tw-bg-opacity));
 }
-.bg-error-500 {
+.dgs-ui-kit-bg-error-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(213 28 41 / var(--tw-bg-opacity));
 }
-.bg-gray-100 {
+.dgs-ui-kit-bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
-.bg-gray-200 {
+.dgs-ui-kit-bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
-.bg-gray-50 {
+.dgs-ui-kit-bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
-.bg-gray-500 {
+.dgs-ui-kit-bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }
-.bg-gray-500\/50 {
+.dgs-ui-kit-bg-gray-500\/50 {
   background-color: rgb(100 116 139 / 0.5);
 }
-.bg-gray-600 {
+.dgs-ui-kit-bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
-.bg-gray-700 {
+.dgs-ui-kit-bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / var(--tw-bg-opacity));
 }
-.bg-primary-50 {
+.dgs-ui-kit-bg-primary-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(240 243 255 / var(--tw-bg-opacity));
 }
-.bg-primary-500 {
+.dgs-ui-kit-bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(40 82 228 / var(--tw-bg-opacity));
 }
-.bg-secondary-100 {
+.dgs-ui-kit-bg-secondary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(226 243 243 / var(--tw-bg-opacity));
 }
-.bg-secondary-600 {
+.dgs-ui-kit-bg-secondary-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 155 157 / var(--tw-bg-opacity));
 }
-.bg-success-100 {
+.dgs-ui-kit-bg-success-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(209 250 240 / var(--tw-bg-opacity));
 }
-.bg-success-50 {
+.dgs-ui-kit-bg-success-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(236 253 249 / var(--tw-bg-opacity));
 }
-.bg-success-500 {
+.dgs-ui-kit-bg-success-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 143 / var(--tw-bg-opacity));
 }
-.bg-success-600 {
+.dgs-ui-kit-bg-success-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(5 150 114 / var(--tw-bg-opacity));
 }
-.bg-transparent {
+.dgs-ui-kit-bg-transparent {
   background-color: transparent;
 }
-.bg-warning-100 {
+.dgs-ui-kit-bg-warning-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 233 178 / var(--tw-bg-opacity));
 }
-.bg-warning-50 {
+.dgs-ui-kit-bg-warning-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 246 224 / var(--tw-bg-opacity));
 }
-.bg-warning-500 {
+.dgs-ui-kit-bg-warning-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(253 187 19 / var(--tw-bg-opacity));
 }
-.bg-white {
+.dgs-ui-kit-bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.p-3 {
+.dgs-ui-kit-p-3 {
   padding: 0.75rem;
 }
-.p-4 {
+.dgs-ui-kit-p-4 {
   padding: 1rem;
 }
-.p-\[10px\] {
+.dgs-ui-kit-p-\[10px\] {
   padding: 10px;
 }
-.p-\[1px\] {
+.dgs-ui-kit-p-\[1px\] {
   padding: 1px;
 }
-.px-0 {
+.dgs-ui-kit-px-0 {
   padding-left: 0px;
   padding-right: 0px;
 }
-.px-2 {
+.dgs-ui-kit-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-4 {
+.dgs-ui-kit-px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.px-5 {
+.dgs-ui-kit-px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
-.px-6 {
+.dgs-ui-kit-px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.px-\[10px\] {
+.dgs-ui-kit-px-\[10px\] {
   padding-left: 10px;
   padding-right: 10px;
 }
-.px-\[6px\] {
+.dgs-ui-kit-px-\[5\.5\%\] {
+  padding-left: 5.5%;
+  padding-right: 5.5%;
+}
+.dgs-ui-kit-px-\[6px\] {
   padding-left: 6px;
   padding-right: 6px;
 }
-.py-1 {
+.dgs-ui-kit-py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-.py-2 {
+.dgs-ui-kit-py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-2\.5 {
+.dgs-ui-kit-py-2\.5 {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
-.py-3 {
+.dgs-ui-kit-py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.py-\[2px\] {
+.dgs-ui-kit-py-\[2px\] {
   padding-top: 2px;
   padding-bottom: 2px;
 }
-.pt-4 {
+.dgs-ui-kit-pt-4 {
   padding-top: 1rem;
 }
-.\!text-left {
+.\!dgs-ui-kit-text-left {
   text-align: left !important;
 }
-.text-right {
+.dgs-ui-kit-text-right {
   text-align: right;
 }
-.text-sm {
+.dgs-ui-kit-text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.font-bold {
+.dgs-ui-kit-font-bold {
   font-weight: 700;
 }
-.text-black {
+.dgs-ui-kit-text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
-.text-error-500 {
+.dgs-ui-kit-text-error-500 {
   --tw-text-opacity: 1;
   color: rgb(213 28 41 / var(--tw-text-opacity));
 }
-.text-error-600 {
+.dgs-ui-kit-text-error-600 {
   --tw-text-opacity: 1;
   color: rgb(167 5 16 / var(--tw-text-opacity));
 }
-.text-error-700 {
+.dgs-ui-kit-text-error-700 {
   --tw-text-opacity: 1;
   color: rgb(117 0 8 / var(--tw-text-opacity));
 }
-.text-gray-400 {
+.dgs-ui-kit-text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
-.text-gray-500 {
+.dgs-ui-kit-text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity));
 }
-.text-gray-600 {
+.dgs-ui-kit-text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity));
 }
-.text-gray-700 {
+.dgs-ui-kit-text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(51 65 85 / var(--tw-text-opacity));
 }
-.text-gray-800 {
+.dgs-ui-kit-text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
-.text-gray-900 {
+.dgs-ui-kit-text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-.text-primary-400 {
+.dgs-ui-kit-text-primary-400 {
   --tw-text-opacity: 1;
   color: rgb(76 110 229 / var(--tw-text-opacity));
 }
-.text-primary-500 {
+.dgs-ui-kit-text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(40 82 228 / var(--tw-text-opacity));
 }
-.text-primary-600 {
+.dgs-ui-kit-text-primary-600 {
   --tw-text-opacity: 1;
   color: rgb(21 59 191 / var(--tw-text-opacity));
 }
-.text-primary-700 {
+.dgs-ui-kit-text-primary-700 {
   --tw-text-opacity: 1;
   color: rgb(16 44 143 / var(--tw-text-opacity));
 }
-.text-secondary-700 {
+.dgs-ui-kit-text-secondary-700 {
   --tw-text-opacity: 1;
   color: rgb(0 124 125 / var(--tw-text-opacity));
 }
-.text-success-600 {
+.dgs-ui-kit-text-success-600 {
   --tw-text-opacity: 1;
   color: rgb(5 150 114 / var(--tw-text-opacity));
 }
-.text-success-700 {
+.dgs-ui-kit-text-success-700 {
   --tw-text-opacity: 1;
   color: rgb(4 120 91 / var(--tw-text-opacity));
 }
-.text-success-800 {
+.dgs-ui-kit-text-success-800 {
   --tw-text-opacity: 1;
   color: rgb(6 95 73 / var(--tw-text-opacity));
 }
-.text-warning-600 {
+.dgs-ui-kit-text-warning-600 {
   --tw-text-opacity: 1;
   color: rgb(216 158 13 / var(--tw-text-opacity));
 }
-.text-warning-700 {
+.dgs-ui-kit-text-warning-700 {
   --tw-text-opacity: 1;
   color: rgb(162 119 6 / var(--tw-text-opacity));
 }
-.text-warning-800 {
+.dgs-ui-kit-text-warning-800 {
   --tw-text-opacity: 1;
   color: rgb(108 78 2 / var(--tw-text-opacity));
 }
-.text-white {
+.dgs-ui-kit-text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.opacity-0 {
+.dgs-ui-kit-opacity-0 {
   opacity: 0;
 }
-.opacity-100 {
+.dgs-ui-kit-opacity-100 {
   opacity: 1;
 }
-.outline {
-  outline-style: solid;
-}
-.ring-4 {
+.dgs-ui-kit-ring-4 {
   --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(4px + 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);
 }
-.ring-transparent {
+.dgs-ui-kit-ring-transparent {
   --tw-ring-color: transparent;
 }
-.ring-offset-white {
+.dgs-ui-kit-ring-offset-white {
   --tw-ring-offset-color: #fff;
 }
-.transition {
+.dgs-ui-kit-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-all {
+.dgs-ui-kit-transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-opacity {
+.dgs-ui-kit-transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.duration-300 {
+.dgs-ui-kit-duration-300 {
   transition-duration: 300ms;
 }
-.ease-in-out {
+.dgs-ui-kit-ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.font-h5-bold {
+.dgs-ui-kit-font-h5-bold {
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 28px;
 }
-.font-h6-bold {
+.dgs-ui-kit-font-h6-bold {
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
   line-height: 24px;
 }
-.font-p1-regular {
+.dgs-ui-kit-font-p1-regular {
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 28px;
 }
-.font-p1-medium {
+.dgs-ui-kit-font-p1-medium {
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 28px;
 }
-.font-p2-regular {
+.dgs-ui-kit-font-p2-regular {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
 }
-.font-p2-medium {
+.dgs-ui-kit-font-p2-medium {
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
 }
-.font-p3-regular {
+.dgs-ui-kit-font-p3-regular {
   font-size: 13px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
 }
-.font-p3-medium {
+.dgs-ui-kit-font-p3-medium {
   font-size: 13px;
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
 }
-.font-button-large {
+.dgs-ui-kit-font-button-large {
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 24px;
 }
-.font-button-medium {
+.dgs-ui-kit-font-button-medium {
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
   line-height: 24px;
 }
-.font-button-small {
+.dgs-ui-kit-font-button-small {
   font-size: 13px;
   font-style: normal;
   font-weight: 600;
   line-height: 20px;
 }
-.font-caption-regular {
+.dgs-ui-kit-font-caption-regular {
   font-size: 11px;
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
 }
-.font-caption-demibold {
+.dgs-ui-kit-font-caption-demibold {
   font-size: 11px;
   font-style: normal;
   font-weight: 600;
   line-height: 16px;
 }
-.font-oveline-demibold {
+.dgs-ui-kit-font-oveline-demibold {
   font-size: 10px;
   font-style: normal;
   font-weight: 600;
   line-height: 12px;
 }
-.placeholder\:text-left::-moz-placeholder {
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+.ss02 {
+    font-feature-settings: 'ss02';
+  }
+.placeholder\:dgs-ui-kit-text-left::-moz-placeholder {
   text-align: left;
 }
-.placeholder\:text-left::placeholder {
+.placeholder\:dgs-ui-kit-text-left::placeholder {
   text-align: left;
 }
-.placeholder\:text-right::-moz-placeholder {
+.placeholder\:dgs-ui-kit-text-right::-moz-placeholder {
   text-align: right;
 }
-.placeholder\:text-right::placeholder {
+.placeholder\:dgs-ui-kit-text-right::placeholder {
   text-align: right;
 }
-.checked\:border-transparent:checked {
+.checked\:dgs-ui-kit-border-transparent:checked {
   border-color: transparent;
 }
-.checked\:bg-primary-500:checked {
+.checked\:dgs-ui-kit-bg-primary-500:checked {
   --tw-bg-opacity: 1;
   background-color: rgb(40 82 228 / var(--tw-bg-opacity));
 }
-.hover\:border-error-400:hover {
+.hover\:dgs-ui-kit-border-error-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(219 87 96 / var(--tw-border-opacity));
 }
-.hover\:border-gray-300:hover {
+.hover\:dgs-ui-kit-border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(203 213 225 / var(--tw-border-opacity));
 }
-.hover\:border-gray-400:hover {
+.hover\:dgs-ui-kit-border-gray-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
-.hover\:border-primary-200:hover {
+.hover\:dgs-ui-kit-border-primary-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(158 176 240 / var(--tw-border-opacity));
 }
-.hover\:border-success-400:hover {
+.hover\:dgs-ui-kit-border-success-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(52 211 171 / var(--tw-border-opacity));
 }
-.hover\:border-warning-400:hover {
+.hover\:dgs-ui-kit-border-warning-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(253 199 63 / var(--tw-border-opacity));
 }
-.hover\:bg-error-300:hover {
+.hover\:dgs-ui-kit-bg-error-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(227 120 127 / var(--tw-bg-opacity));
 }
-.hover\:bg-error-50:hover {
+.hover\:dgs-ui-kit-bg-error-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 235 236 / var(--tw-bg-opacity));
 }
-.hover\:bg-gray-300:hover {
+.hover\:dgs-ui-kit-bg-gray-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
 }
-.hover\:bg-gray-50:hover {
+.hover\:dgs-ui-kit-bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
-.hover\:bg-gray-500\/80:hover {
+.hover\:dgs-ui-kit-bg-gray-500\/80:hover {
   background-color: rgb(100 116 139 / 0.8);
 }
-.hover\:bg-primary-300:hover {
+.hover\:dgs-ui-kit-bg-primary-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(117 144 235 / var(--tw-bg-opacity));
 }
-.hover\:bg-success-300:hover {
+.hover\:dgs-ui-kit-bg-success-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(110 231 201 / var(--tw-bg-opacity));
 }
-.hover\:bg-success-50:hover {
+.hover\:dgs-ui-kit-bg-success-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 253 249 / var(--tw-bg-opacity));
 }
-.hover\:bg-warning-300:hover {
+.hover\:dgs-ui-kit-bg-warning-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(254 212 107 / var(--tw-bg-opacity));
 }
-.hover\:bg-warning-50:hover {
+.hover\:dgs-ui-kit-bg-warning-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 246 224 / var(--tw-bg-opacity));
 }
-.hover\:text-error-400:hover {
+.hover\:dgs-ui-kit-text-error-400:hover {
   --tw-text-opacity: 1;
   color: rgb(219 87 96 / var(--tw-text-opacity));
 }
-.hover\:text-error-600:hover {
+.hover\:dgs-ui-kit-text-error-600:hover {
   --tw-text-opacity: 1;
   color: rgb(167 5 16 / var(--tw-text-opacity));
 }
-.hover\:text-gray-400:hover {
+.hover\:dgs-ui-kit-text-gray-400:hover {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
-.hover\:text-gray-600:hover {
+.hover\:dgs-ui-kit-text-gray-600:hover {
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity));
 }
-.hover\:text-primary-300:hover {
+.hover\:dgs-ui-kit-text-primary-300:hover {
   --tw-text-opacity: 1;
   color: rgb(117 144 235 / var(--tw-text-opacity));
 }
-.hover\:text-primary-500:hover {
+.hover\:dgs-ui-kit-text-primary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(40 82 228 / var(--tw-text-opacity));
 }
-.hover\:text-success-400:hover {
+.hover\:dgs-ui-kit-text-success-400:hover {
   --tw-text-opacity: 1;
   color: rgb(52 211 171 / var(--tw-text-opacity));
 }
-.hover\:text-success-600:hover {
+.hover\:dgs-ui-kit-text-success-600:hover {
   --tw-text-opacity: 1;
   color: rgb(5 150 114 / var(--tw-text-opacity));
 }
-.hover\:text-warning-400:hover {
+.hover\:dgs-ui-kit-text-warning-400:hover {
   --tw-text-opacity: 1;
   color: rgb(253 199 63 / var(--tw-text-opacity));
 }
-.hover\:text-warning-600:hover {
+.hover\:dgs-ui-kit-text-warning-600:hover {
   --tw-text-opacity: 1;
   color: rgb(216 158 13 / var(--tw-text-opacity));
 }
-.hover\:ring-4:hover {
+.hover\:dgs-ui-kit-ring-4:hover {
   --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(4px + 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);
 }
-.hover\:ring-error-50:hover {
+.hover\:dgs-ui-kit-ring-error-50:hover {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 235 236 / var(--tw-ring-opacity));
 }
-.hover\:ring-gray-100:hover {
+.hover\:dgs-ui-kit-ring-gray-100:hover {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity));
 }
-.hover\:ring-gray-50:hover {
+.hover\:dgs-ui-kit-ring-gray-50:hover {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(248 250 252 / var(--tw-ring-opacity));
 }
-.focus\:outline-none:focus {
+.focus\:dgs-ui-kit-outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.focus\:\!ring:focus {
+.focus\:\!dgs-ui-kit-ring:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
 }
-.focus\:\!ring-error-300:focus {
+.focus\:\!dgs-ui-kit-ring-error-300:focus {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(227 120 127 / var(--tw-ring-opacity)) !important;
 }
-.focus\:\!ring-primary-300:focus {
+.focus\:\!dgs-ui-kit-ring-primary-300:focus {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(117 144 235 / var(--tw-ring-opacity)) !important;
 }
-.focus\:ring-offset-1:focus {
+.focus\:dgs-ui-kit-ring-offset-1:focus {
   --tw-ring-offset-width: 1px;
 }
-.focus\:ring-offset-white:focus {
+.focus\:dgs-ui-kit-ring-offset-white:focus {
   --tw-ring-offset-color: #fff;
 }
-.active\:border-error-600:active {
+.active\:dgs-ui-kit-border-error-600:active {
   --tw-border-opacity: 1;
   border-color: rgb(167 5 16 / var(--tw-border-opacity));
 }
-.active\:border-gray-600:active {
+.active\:dgs-ui-kit-border-gray-600:active {
   --tw-border-opacity: 1;
   border-color: rgb(71 85 105 / var(--tw-border-opacity));
 }
-.active\:border-primary-600:active {
+.active\:dgs-ui-kit-border-primary-600:active {
   --tw-border-opacity: 1;
   border-color: rgb(21 59 191 / var(--tw-border-opacity));
 }
-.active\:border-success-600:active {
+.active\:dgs-ui-kit-border-success-600:active {
   --tw-border-opacity: 1;
   border-color: rgb(5 150 114 / var(--tw-border-opacity));
 }
-.active\:border-warning-600:active {
+.active\:dgs-ui-kit-border-warning-600:active {
   --tw-border-opacity: 1;
   border-color: rgb(216 158 13 / var(--tw-border-opacity));
 }
-.active\:bg-error-200:active {
+.active\:dgs-ui-kit-bg-error-200:active {
   --tw-bg-opacity: 1;
   background-color: rgb(237 161 166 / var(--tw-bg-opacity));
 }
-.active\:bg-error-600:active {
+.active\:dgs-ui-kit-bg-error-600:active {
   --tw-bg-opacity: 1;
   background-color: rgb(167 5 16 / var(--tw-bg-opacity));
 }
-.active\:bg-gray-200:active {
+.active\:dgs-ui-kit-bg-gray-200:active {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
-.active\:bg-gray-600:active {
+.active\:dgs-ui-kit-bg-gray-600:active {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
-.active\:bg-primary-600:active {
+.active\:dgs-ui-kit-bg-primary-600:active {
   --tw-bg-opacity: 1;
   background-color: rgb(21 59 191 / var(--tw-bg-opacity));
 }
-.active\:bg-success-200:active {
+.active\:dgs-ui-kit-bg-success-200:active {
   --tw-bg-opacity: 1;
   background-color: rgb(167 243 224 / var(--tw-bg-opacity));
 }
-.active\:bg-success-600:active {
+.active\:dgs-ui-kit-bg-success-600:active {
   --tw-bg-opacity: 1;
   background-color: rgb(5 150 114 / var(--tw-bg-opacity));
 }
-.active\:bg-warning-200:active {
+.active\:dgs-ui-kit-bg-warning-200:active {
   --tw-bg-opacity: 1;
   background-color: rgb(254 222 142 / var(--tw-bg-opacity));
 }
-.active\:bg-warning-600:active {
+.active\:dgs-ui-kit-bg-warning-600:active {
   --tw-bg-opacity: 1;
   background-color: rgb(216 158 13 / var(--tw-bg-opacity));
 }
-.active\:text-error-800:active {
+.active\:dgs-ui-kit-text-error-800:active {
   --tw-text-opacity: 1;
   color: rgb(87 0 6 / var(--tw-text-opacity));
 }
-.active\:text-gray-800:active {
+.active\:dgs-ui-kit-text-gray-800:active {
   --tw-text-opacity: 1;
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
-.active\:text-primary-600:active {
+.active\:dgs-ui-kit-text-primary-600:active {
   --tw-text-opacity: 1;
   color: rgb(21 59 191 / var(--tw-text-opacity));
 }
-.active\:text-primary-700:active {
+.active\:dgs-ui-kit-text-primary-700:active {
   --tw-text-opacity: 1;
   color: rgb(16 44 143 / var(--tw-text-opacity));
 }
-.active\:text-success-800:active {
+.active\:dgs-ui-kit-text-success-800:active {
   --tw-text-opacity: 1;
   color: rgb(6 95 73 / var(--tw-text-opacity));
 }
-.active\:text-warning-800:active {
+.active\:dgs-ui-kit-text-warning-800:active {
   --tw-text-opacity: 1;
   color: rgb(108 78 2 / var(--tw-text-opacity));
 }
-.disabled\:cursor-not-allowed:disabled {
+.disabled\:dgs-ui-kit-cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
-.disabled\:bg-error-100:disabled {
+.disabled\:dgs-ui-kit-bg-error-100:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(250 209 212 / var(--tw-bg-opacity));
 }
-.disabled\:bg-gray-100:disabled {
+.disabled\:dgs-ui-kit-bg-gray-100:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
-.disabled\:bg-gray-200:disabled {
+.disabled\:dgs-ui-kit-bg-gray-200:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
-.disabled\:bg-success-100:disabled {
+.disabled\:dgs-ui-kit-bg-success-100:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(209 250 240 / var(--tw-bg-opacity));
 }
-.disabled\:bg-warning-100:disabled {
+.disabled\:dgs-ui-kit-bg-warning-100:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(254 233 178 / var(--tw-bg-opacity));
 }
-.disabled\:opacity-40:disabled {
+.disabled\:dgs-ui-kit-opacity-40:disabled {
   opacity: 0.4;
 }
-.group:checked .group-checked\:text-primary-500 {
+.dgs-ui-kit-group:checked .group-checked\:dgs-ui-kit-text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(40 82 228 / var(--tw-text-opacity));
 }
-.group:hover .group-hover\:border-primary-500 {
+.dgs-ui-kit-group:hover .group-hover\:dgs-ui-kit-border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(40 82 228 / var(--tw-border-opacity));
 }
-.group:hover .group-hover\:text-primary-500 {
+.dgs-ui-kit-group:hover .group-hover\:dgs-ui-kit-text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(40 82 228 / var(--tw-text-opacity));
 }
-.group:hover .group-hover\:opacity-100 {
+.dgs-ui-kit-group:hover .group-hover\:dgs-ui-kit-opacity-100 {
   opacity: 1;
 }
-.group:hover .group-hover\:ring-4 {
+.dgs-ui-kit-group:hover .group-hover\:dgs-ui-kit-ring-4 {
   --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(4px + 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);
 }
-.group:hover .group-hover\:ring-error-50 {
+.dgs-ui-kit-group:hover .group-hover\:dgs-ui-kit-ring-error-50 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 235 236 / var(--tw-ring-opacity));
 }
-.group:hover .group-hover\:ring-gray-100 {
+.dgs-ui-kit-group:hover .group-hover\:dgs-ui-kit-ring-gray-100 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity));
 }
-.peer:checked ~ .peer-checked\:opacity-100 {
+.dgs-ui-kit-peer:checked ~ .peer-checked\:dgs-ui-kit-opacity-100 {
   opacity: 1;
 }
-.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled) {
+.has-\[\:disabled\]\:dgs-ui-kit-cursor-not-allowed:has(:disabled) {
   cursor: not-allowed;
 }
-.has-\[\:checked\]\:border-primary-500:has(:checked) {
+.has-\[\:checked\]\:dgs-ui-kit-border-primary-500:has(:checked) {
   --tw-border-opacity: 1;
   border-color: rgb(40 82 228 / var(--tw-border-opacity));
 }
-.has-\[\:focus\]\:border-primary-500:has(:focus) {
+.has-\[\:focus\]\:dgs-ui-kit-border-primary-500:has(:focus) {
   --tw-border-opacity: 1;
   border-color: rgb(40 82 228 / var(--tw-border-opacity));
 }
-.has-\[\:checked\]\:bg-primary-50:has(:checked) {
+.has-\[\:checked\]\:dgs-ui-kit-bg-primary-50:has(:checked) {
   --tw-bg-opacity: 1;
   background-color: rgb(240 243 255 / var(--tw-bg-opacity));
 }
-.has-\[\:focus\]\:bg-white:has(:focus) {
+.has-\[\:focus\]\:dgs-ui-kit-bg-white:has(:focus) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.has-\[\:disabled\]\:opacity-40:has(:disabled) {
+.has-\[\:disabled\]\:dgs-ui-kit-opacity-40:has(:disabled) {
   opacity: 0.4;
 }
-.has-\[\:focus\]\:ring:has(: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(3px + 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);
-}
-.has-\[\:focus\]\:ring-error-300:has(:focus) {
+.has-\[\:focus\]\:dgs-ui-kit-ring-error-300:has(:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(227 120 127 / var(--tw-ring-opacity));
 }
-.has-\[\:focus\]\:ring-error-50:has(:focus) {
+.has-\[\:focus\]\:dgs-ui-kit-ring-error-50:has(:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 235 236 / var(--tw-ring-opacity));
 }
-.has-\[\:focus\]\:ring-primary-300:has(:focus) {
+.has-\[\:focus\]\:dgs-ui-kit-ring-primary-300:has(:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(117 144 235 / var(--tw-ring-opacity));
 }
-.has-\[\:focus\]\:ring-primary-50:has(:focus) {
+.has-\[\:focus\]\:dgs-ui-kit-ring-primary-50:has(:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(240 243 255 / var(--tw-ring-opacity));
 }
-.has-\[\:focus\]\:ring-offset-1:has(:focus) {
+.has-\[\:focus\]\:dgs-ui-kit-ring-offset-1:has(:focus) {
   --tw-ring-offset-width: 1px;
 }
-.has-\[\:focus\]\:ring-offset-white:has(:focus) {
+.has-\[\:focus\]\:dgs-ui-kit-ring-offset-white:has(:focus) {
   --tw-ring-offset-color: #fff;
 }
 @media (min-width: 768px) {
 
-  .md\:mx-0 {
+  .md\:dgs-ui-kit-mx-0 {
     margin-left: 0px;
     margin-right: 0px;
   }
-}
-.\[\&\>\*\]\:snap-start>* {
-  scroll-snap-align: start;
-}
-.\[\&\>\*\]\:snap-always>* {
-  scroll-snap-stop: always;
+
+  .md\:dgs-ui-kit-h-11 {
+    height: 2.75rem;
+  }
+
+  .md\:dgs-ui-kit-w-11 {
+    width: 2.75rem;
+  }
+
+  .md\:dgs-ui-kit-gap-x-4 {
+    -moz-column-gap: 1rem;
+         column-gap: 1rem;
+  }
+
+  .md\:dgs-ui-kit-font-h5-bold {
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px;
+  }
 }