@grazziotin/react-components 1.0.3 → 1.0.4

package/dist/theme.css

@@ -7,10 +7,17 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-blue-200: oklch(88.2% 0.059 254.128);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
@@ -18,21 +25,31 @@
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --font-weight-semibold: 600;
+    --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --radius: 10px;
     --color-grzprimary: #00b2a6;
     --color-grzsecondary: #00a095;
     --color-system-100: #cadcee;
     --color-system-700: #435c75;
     --color-system-900: #233446;
-    --spacing-15: 3.75rem;
+    --shadow-3-strong: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.08);
+    --spacing-14: 3.5rem;
     --spacing-2: 0.5rem;
     --spacing-3: 0.75rem;
     --spacing-4: 1rem;
+    --spacing-6: 1.5rem;
+    --spacing-8: 2rem;
     --spacing-10: 2.5rem;
+    --spacing-16: 4rem;
   }
 }
 @layer base {
@@ -184,229 +201,1008 @@
   }
 }
 @layer utilities {
+  .\@container {
+    container-type: inline-size !important;
+  }
+  .collapse {
+    visibility: collapse !important;
+  }
+  .invisible {
+    visibility: hidden !important;
+  }
+  .visible {
+    visibility: visible !important;
+  }
+  .sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border-width: 0 !important;
+  }
+  .not-sr-only {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: visible !important;
+    clip-path: none !important;
+    white-space: normal !important;
+  }
+  .absolute {
+    position: absolute !important;
+  }
+  .fixed {
+    position: fixed !important;
+  }
+  .relative {
+    position: relative !important;
+  }
+  .static {
+    position: static !important;
+  }
+  .sticky {
+    position: sticky !important;
+  }
+  .isolate {
+    isolation: isolate !important;
+  }
+  .isolation-auto {
+    isolation: auto !important;
+  }
+  .col-1 {
+    grid-column: 1 !important;
+  }
+  .row-1 {
+    grid-row: 1 !important;
+  }
+  .float-left {
+    float: left !important;
+  }
+  .float-right {
+    float: right !important;
+  }
   .container {
-    width: 100%;
+    width: 100% !important;
     @media (width >= 40rem) {
-      max-width: 40rem;
+      max-width: 40rem !important;
     }
     @media (width >= 48rem) {
-      max-width: 48rem;
+      max-width: 48rem !important;
     }
     @media (width >= 64rem) {
-      max-width: 64rem;
+      max-width: 64rem !important;
     }
     @media (width >= 80rem) {
-      max-width: 80rem;
+      max-width: 80rem !important;
     }
     @media (width >= 87.5rem) {
-      max-width: 87.5rem;
+      max-width: 87.5rem !important;
     }
   }
+  .mt-2 {
+    margin-top: var(--spacing-2) !important;
+  }
+  .mt-3 {
+    margin-top: var(--spacing-3) !important;
+  }
+  .mt-4 {
+    margin-top: var(--spacing-4) !important;
+  }
+  .mr-4 {
+    margin-right: var(--spacing-4) !important;
+  }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1) !important;
+  }
   .mb-2 {
-    margin-bottom: var(--spacing-2);
+    margin-bottom: var(--spacing-2) !important;
+  }
+  .mb-4 {
+    margin-bottom: var(--spacing-4) !important;
+  }
+  .block {
+    display: block !important;
   }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
+  .contents {
+    display: contents !important;
   }
   .flex {
-    display: flex;
+    display: flex !important;
+  }
+  .flow-root {
+    display: flow-root !important;
+  }
+  .grid {
+    display: grid !important;
   }
   .hidden {
-    display: none;
+    display: none !important;
+  }
+  .inline {
+    display: inline !important;
+  }
+  .inline-block {
+    display: inline-block !important;
+  }
+  .inline-flex {
+    display: inline-flex !important;
+  }
+  .inline-grid {
+    display: inline-grid !important;
+  }
+  .inline-table {
+    display: inline-table !important;
+  }
+  .list-item {
+    display: list-item !important;
+  }
+  .table {
+    display: table !important;
+  }
+  .table-caption {
+    display: table-caption !important;
+  }
+  .table-cell {
+    display: table-cell !important;
+  }
+  .table-column {
+    display: table-column !important;
+  }
+  .table-column-group {
+    display: table-column-group !important;
+  }
+  .table-footer-group {
+    display: table-footer-group !important;
+  }
+  .table-header-group {
+    display: table-header-group !important;
+  }
+  .table-row {
+    display: table-row !important;
+  }
+  .table-row-group {
+    display: table-row-group !important;
+  }
+  .size-1 {
+    width: calc(var(--spacing) * 1) !important;
+    height: calc(var(--spacing) * 1) !important;
+  }
+  .h-5 {
+    height: calc(var(--spacing) * 5) !important;
+  }
+  .h-6 {
+    height: var(--spacing-6) !important;
   }
   .h-7 {
-    height: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7) !important;
   }
-  .h-10 {
-    height: var(--spacing-10);
+  .h-9 {
+    height: calc(var(--spacing) * 9) !important;
   }
-  .h-15 {
-    height: var(--spacing-15);
+  .h-16 {
+    height: var(--spacing-16) !important;
   }
-  .h-full {
-    height: 100%;
+  .min-h-14 {
+    min-height: var(--spacing-14) !important;
   }
-  .min-h-10 {
-    min-height: var(--spacing-10);
+  .min-h-\[210px\] {
+    min-height: 210px !important;
   }
   .w-2 {
-    width: var(--spacing-2);
+    width: var(--spacing-2) !important;
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5) !important;
   }
   .w-7 {
-    width: calc(var(--spacing) * 7);
+    width: calc(var(--spacing) * 7) !important;
   }
   .w-10 {
-    width: var(--spacing-10);
+    width: var(--spacing-10) !important;
+  }
+  .w-80 {
+    width: calc(var(--spacing) * 80) !important;
   }
   .w-full {
-    width: 100%;
+    width: 100% !important;
+  }
+  .max-w-full {
+    max-width: 100% !important;
   }
   .min-w-10 {
-    min-width: var(--spacing-10);
+    min-width: var(--spacing-10) !important;
+  }
+  .flex-shrink {
+    flex-shrink: 1 !important;
   }
   .shrink {
-    flex-shrink: 1;
+    flex-shrink: 1 !important;
+  }
+  .flex-grow {
+    flex-grow: 1 !important;
+  }
+  .grow {
+    flex-grow: 1 !important;
+  }
+  .border-collapse {
+    border-collapse: collapse !important;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important;
+  }
+  .transform\! {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important;
+  }
+  .animate-spin {
+    animation: var(--animate-spin) !important;
+  }
+  .cursor-pointer {
+    cursor: pointer !important;
+  }
+  .touch-pinch-zoom {
+    --tw-pinch-zoom: pinch-zoom !important;
+    touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,) !important;
   }
   .resize {
-    resize: both;
+    resize: both !important;
+  }
+  .list-inside {
+    list-style-position: inside !important;
+  }
+  .list-disc {
+    list-style-type: disc !important;
   }
   .flex-col {
-    flex-direction: column;
+    flex-direction: column !important;
+  }
+  .flex-row {
+    flex-direction: row !important;
+  }
+  .flex-wrap {
+    flex-wrap: wrap !important;
   }
   .items-center {
-    align-items: center;
+    align-items: center !important;
   }
   .justify-between {
-    justify-content: space-between;
+    justify-content: space-between !important;
   }
   .justify-center {
-    justify-content: center;
+    justify-content: center !important;
   }
   .justify-end {
-    justify-content: flex-end;
+    justify-content: flex-end !important;
+  }
+  .gap-3 {
+    gap: var(--spacing-3) !important;
   }
   .gap-4 {
-    gap: var(--spacing-4);
+    gap: var(--spacing-4) !important;
+  }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0 !important;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)) !important;
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))) !important;
+    }
+  }
+  .space-y-reverse {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 1 !important;
+    }
+  }
+  .space-x-reverse {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 1 !important;
+    }
+  }
+  .divide-x {
+    :where(& > :not(:last-child)) {
+      --tw-divide-x-reverse: 0 !important;
+      border-inline-style: var(--tw-border-style) !important;
+      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)) !important;
+      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))) !important;
+    }
+  }
+  .divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0 !important;
+      border-bottom-style: var(--tw-border-style) !important;
+      border-top-style: var(--tw-border-style) !important;
+      border-top-width: calc(1px * var(--tw-divide-y-reverse)) !important;
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
+    }
+  }
+  .divide-y-reverse {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 1 !important;
+    }
+  }
+  .truncate {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
   }
   .overflow-hidden {
-    overflow: hidden;
+    overflow: hidden !important;
+  }
+  .rounded {
+    border-radius: var(--radius) !important;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg) !important;
   }
   .rounded-md {
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md) !important;
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm) !important;
+  }
+  .rounded-s {
+    border-start-start-radius: var(--radius) !important;
+    border-end-start-radius: var(--radius) !important;
+  }
+  .rounded-ss {
+    border-start-start-radius: var(--radius) !important;
+  }
+  .rounded-e {
+    border-start-end-radius: var(--radius) !important;
+    border-end-end-radius: var(--radius) !important;
   }
-  .rounded-tl-md {
-    border-top-left-radius: var(--radius-md);
+  .rounded-se {
+    border-start-end-radius: var(--radius) !important;
   }
-  .rounded-bl-md {
-    border-bottom-left-radius: var(--radius-md);
+  .rounded-ee {
+    border-end-end-radius: var(--radius) !important;
+  }
+  .rounded-es {
+    border-end-start-radius: var(--radius) !important;
+  }
+  .rounded-t {
+    border-top-left-radius: var(--radius) !important;
+    border-top-right-radius: var(--radius) !important;
+  }
+  .rounded-l {
+    border-top-left-radius: var(--radius) !important;
+    border-bottom-left-radius: var(--radius) !important;
+  }
+  .rounded-tl {
+    border-top-left-radius: var(--radius) !important;
+  }
+  .rounded-tl-sm {
+    border-top-left-radius: var(--radius-sm) !important;
+  }
+  .rounded-r {
+    border-top-right-radius: var(--radius) !important;
+    border-bottom-right-radius: var(--radius) !important;
+  }
+  .rounded-tr {
+    border-top-right-radius: var(--radius) !important;
+  }
+  .rounded-b {
+    border-bottom-right-radius: var(--radius) !important;
+    border-bottom-left-radius: var(--radius) !important;
+  }
+  .rounded-br {
+    border-bottom-right-radius: var(--radius) !important;
+  }
+  .rounded-bl {
+    border-bottom-left-radius: var(--radius) !important;
+  }
+  .rounded-bl-sm {
+    border-bottom-left-radius: var(--radius-sm) !important;
+  }
+  .\!border {
+    border-style: var(--tw-border-style) !important;
+    border-width: 1px !important;
+  }
+  .border {
+    border-style: var(--tw-border-style) !important;
+    border-width: 1px !important;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style) !important;
+    border-width: 2px !important;
+  }
+  .border-x {
+    border-inline-style: var(--tw-border-style) !important;
+    border-inline-width: 1px !important;
+  }
+  .border-y {
+    border-block-style: var(--tw-border-style) !important;
+    border-block-width: 1px !important;
+  }
+  .border-s {
+    border-inline-start-style: var(--tw-border-style) !important;
+    border-inline-start-width: 1px !important;
+  }
+  .border-e {
+    border-inline-end-style: var(--tw-border-style) !important;
+    border-inline-end-width: 1px !important;
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style) !important;
+    border-top-width: 1px !important;
+  }
+  .border-r {
+    border-right-style: var(--tw-border-style) !important;
+    border-right-width: 1px !important;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style) !important;
+    border-bottom-width: 1px !important;
+  }
+  .border-l {
+    border-left-style: var(--tw-border-style) !important;
+    border-left-width: 1px !important;
+  }
+  .border-dashed {
+    --tw-border-style: dashed !important;
+    border-style: dashed !important;
+  }
+  .border-blue-200 {
+    border-color: var(--color-blue-200) !important;
+  }
+  .border-blue-300 {
+    border-color: var(--color-blue-300) !important;
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200) !important;
   }
   .bg-grzprimary {
-    background-color: var(--color-grzprimary);
+    background-color: var(--color-grzprimary) !important;
+  }
+  .bg-grzsecondary {
+    background-color: var(--color-grzsecondary) !important;
   }
   .bg-system-100 {
-    background-color: var(--color-system-100);
+    background-color: var(--color-system-100) !important;
   }
   .bg-white {
-    background-color: var(--color-white);
+    background-color: var(--color-white) !important;
+  }
+  .bg-repeat {
+    background-repeat: repeat !important;
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0) !important;
+  }
+  .p-2 {
+    padding: var(--spacing-2) !important;
   }
   .p-3 {
-    padding: var(--spacing-3);
+    padding: var(--spacing-3) !important;
+  }
+  .p-4 {
+    padding: var(--spacing-4) !important;
+  }
+  .px-4 {
+    padding-inline: var(--spacing-4) !important;
+  }
+  .py-3 {
+    padding-block: var(--spacing-3) !important;
   }
   .py-4 {
-    padding-block: var(--spacing-4);
+    padding-block: var(--spacing-4) !important;
   }
   .pt-1 {
-    padding-top: calc(var(--spacing) * 1);
+    padding-top: calc(var(--spacing) * 1) !important;
   }
   .pt-4 {
-    padding-top: var(--spacing-4);
+    padding-top: var(--spacing-4) !important;
   }
   .pr-4 {
-    padding-right: var(--spacing-4);
+    padding-right: var(--spacing-4) !important;
+  }
+  .pb-3 {
+    padding-bottom: var(--spacing-3) !important;
   }
   .pb-5 {
-    padding-bottom: calc(var(--spacing) * 5);
+    padding-bottom: calc(var(--spacing) * 5) !important;
+  }
+  .pb-8 {
+    padding-bottom: var(--spacing-8) !important;
   }
   .pl-5 {
-    padding-left: calc(var(--spacing) * 5);
+    padding-left: calc(var(--spacing) * 5) !important;
+  }
+  .text-center {
+    text-align: center !important;
+  }
+  .text-left {
+    text-align: left !important;
   }
   .text-base {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
+    font-size: var(--text-base) !important;
+    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
   }
   .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
+    font-size: var(--text-lg) !important;
+    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;
   }
   .text-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
+    font-size: var(--text-sm) !important;
+    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
+  }
+  .text-xs {
+    font-size: var(--text-xs) !important;
+    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
   }
   .font-semibold {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
+    --tw-font-weight: var(--font-weight-semibold) !important;
+    font-weight: var(--font-weight-semibold) !important;
+  }
+  .text-wrap {
+    text-wrap: wrap !important;
+  }
+  .text-clip {
+    text-overflow: clip !important;
   }
   .text-ellipsis {
-    text-overflow: ellipsis;
+    text-overflow: ellipsis !important;
   }
   .whitespace-nowrap {
-    white-space: nowrap;
+    white-space: nowrap !important;
   }
   .text-black {
-    color: var(--color-black);
+    color: var(--color-black) !important;
   }
   .text-black\/80 {
-    color: color-mix(in srgb, #000 80%, transparent);
+    color: color-mix(in srgb, #000 80%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-black) 80%, transparent);
+      color: color-mix(in oklab, var(--color-black) 80%, transparent) !important;
     }
   }
+  .text-blue-700 {
+    color: var(--color-blue-700) !important;
+  }
+  .text-gray-500 {
+    color: var(--color-gray-500) !important;
+  }
+  .text-gray-600 {
+    color: var(--color-gray-600) !important;
+  }
+  .text-grzprimary {
+    color: var(--color-grzprimary) !important;
+  }
   .text-system-700 {
-    color: var(--color-system-700);
+    color: var(--color-system-700) !important;
   }
   .text-system-900 {
-    color: var(--color-system-900);
+    color: var(--color-system-900) !important;
   }
   .text-white {
-    color: var(--color-white);
+    color: var(--color-white) !important;
   }
-  .shadow-full {
-    --tw-shadow: 0rem 0.15rem 1.25rem var(--tw-shadow-color, rgba(0, 0, 0, 0.16));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .capitalize {
+    text-transform: capitalize !important;
   }
-  .shadow-md {
-    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .lowercase {
+    text-transform: lowercase !important;
   }
-  .shadow-gray-900\/10 {
-    --tw-shadow-color: color-mix(in srgb, oklch(21% 0.034 264.665) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-900) 10%, transparent) var(--tw-shadow-alpha), transparent);
-    }
+  .normal-case {
+    text-transform: none !important;
+  }
+  .uppercase {
+    text-transform: uppercase !important;
+  }
+  .italic {
+    font-style: italic !important;
+  }
+  .not-italic {
+    font-style: normal !important;
+  }
+  .diagonal-fractions {
+    --tw-numeric-fraction: diagonal-fractions !important;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,) !important;
+  }
+  .lining-nums {
+    --tw-numeric-figure: lining-nums !important;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,) !important;
+  }
+  .oldstyle-nums {
+    --tw-numeric-figure: oldstyle-nums !important;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,) !important;
+  }
+  .ordinal {
+    --tw-ordinal: ordinal !important;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,) !important;
+  }
+  .proportional-nums {
+    --tw-numeric-spacing: proportional-nums !important;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,) !important;
+  }
+  .slashed-zero {
+    --tw-slashed-zero: slashed-zero !important;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,) !important;
+  }
+  .stacked-fractions {
+    --tw-numeric-fraction: stacked-fractions !important;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,) !important;
+  }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums !important;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,) !important;
+  }
+  .normal-nums {
+    font-variant-numeric: normal !important;
+  }
+  .line-through {
+    text-decoration-line: line-through !important;
+  }
+  .no-underline {
+    text-decoration-line: none !important;
+  }
+  .overline {
+    text-decoration-line: overline !important;
+  }
+  .underline {
+    text-decoration-line: underline !important;
+  }
+  .antialiased {
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+  }
+  .subpixel-antialiased {
+    -webkit-font-smoothing: auto !important;
+    -moz-osx-font-smoothing: auto !important;
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .shadow-\(--shadow-3-strong\) {
+    --tw-shadow: var(--shadow-3-strong) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .shadow-3-strong {
+    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(15, 23, 42, 0.06)), 0 8px 20px var(--tw-shadow-color, rgba(15, 23, 42, 0.08)) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style) !important;
+    outline-width: 1px !important;
+  }
+  .blur {
+    --tw-blur: blur(8px) !important;
+    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,) !important;
+  }
+  .drop-shadow {
+    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06))) !important;
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06)) !important;
+    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,) !important;
+  }
+  .grayscale {
+    --tw-grayscale: grayscale(100%) !important;
+    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,) !important;
+  }
+  .invert {
+    --tw-invert: invert(100%) !important;
+    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,) !important;
+  }
+  .sepia {
+    --tw-sepia: sepia(100%) !important;
+    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,) !important;
+  }
+  .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,) !important;
+  }
+  .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,) !important;
+  }
+  .backdrop-blur {
+    --tw-backdrop-blur: blur(8px) !important;
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+  }
+  .backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%) !important;
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+  }
+  .backdrop-invert {
+    --tw-backdrop-invert: invert(100%) !important;
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+  }
+  .backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%) !important;
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+  }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events !important;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
+    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
   }
   .transition-all {
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    transition-property: all !important;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
+    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
+  }
+  .transition-shadow {
+    transition-property: box-shadow !important;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
+    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
+  }
+  .duration-200 {
+    --tw-duration: 200ms !important;
+    transition-duration: 200ms !important;
   }
-  .duration-500 {
-    --tw-duration: 500ms;
-    transition-duration: 500ms;
+  .duration-300 {
+    --tw-duration: 300ms !important;
+    transition-duration: 300ms !important;
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out) !important;
+    transition-timing-function: var(--ease-in-out) !important;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out) !important;
+    transition-timing-function: var(--ease-out) !important;
   }
   .select-none {
-    -webkit-user-select: none;
-    user-select: none;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+  }
+  .divide-x-reverse {
+    :where(& > :not(:last-child)) {
+      --tw-divide-x-reverse: 1 !important;
+    }
+  }
+  .ring-inset {
+    --tw-ring-inset: inset !important;
   }
   .hover\:bg-grzsecondary {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-grzsecondary);
+        background-color: var(--color-grzsecondary) !important;
       }
     }
   }
-  .hover\:shadow-lg {
+  .hover\:shadow-full {
     &:hover {
       @media (hover: hover) {
-        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        --tw-shadow: 0rem 0.15rem 1.25rem var(--tw-shadow-color, rgba(0, 0, 0, 0.16)) !important;
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
       }
     }
   }
-  .hover\:shadow-gray-900\/20 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow-color: color-mix(in srgb, oklch(21% 0.034 264.665) 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
-        }
-      }
+  .\[\&_img\]\:h-5 {
+    & img {
+      height: calc(var(--spacing) * 5) !important;
     }
   }
+  .\[\&_img\]\:w-5 {
+    & img {
+      width: calc(var(--spacing) * 5) !important;
+    }
+  }
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-Thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-ThinItalic.ttf") format("truetype");
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-ExtraLight.ttf") format("truetype");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-ExtraLightItalic.ttf") format("truetype");
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-SemiBoldItalic.ttf") format("truetype");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-ExtraBold.ttf") format("truetype");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-ExtraBoldItalic.ttf") format("truetype");
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+body, #root, #storybook-root {
+  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pan-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pan-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pinch-zoom {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-divide-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -472,14 +1268,135 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-pan-x: initial;
+      --tw-pan-y: initial;
+      --tw-pinch-zoom: initial;
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
+      --tw-divide-x-reverse: 0;
+      --tw-border-style: solid;
+      --tw-divide-y-reverse: 0;
       --tw-font-weight: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -494,7 +1411,31 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }