@iit/precision-ui 0.1.0

package/dist/styles.css

@@ -0,0 +1,730 @@
+
+  :root {
+    /* TODO: check all colors from Figma */
+    /* init */
+    --foreground-rgb: 0, 0, 0;
+    --background-start-rgb: 214, 219, 220;
+    --background-end-rgb: 255, 255, 255;
+    /* shad */
+    --precision-ui-tw-background: 0 0% 100%;
+    --precision-ui-tw-foreground: 222.2 84% 4.9%;
+
+    --precision-ui-tw-muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --precision-ui-tw-popover: 0 0% 100%;
+    --precision-ui-tw-popover-foreground: 222.2 84% 4.9%;
+
+    --precision-ui-tw-border: 214.3 31.8% 91.4%;
+    --precision-ui-tw-input: 214.3 31.8% 91.4%;
+
+    --precision-ui-tw-card: 0 0% 100%;
+    --precision-ui-tw-card-foreground: 222.2 84% 4.9%;
+
+    --precision-ui-tw-navy: 219, 98%, 24%;
+    --precision-ui-tw-navy-opacity-4: 219, 98%, 24%, 0.04;
+    --precision-ui-tw-navy-opacity-4-absolute: 216, 12%, 92%;
+    --precision-ui-tw-navy-opacity-8: 219, 98%, 24%, 0.08;
+    /* above not in Figma, just for inputs */
+    --precision-ui-tw-navy-opacity-16: 219, 98%, 24%, 0.16;
+    --precision-ui-tw-navy-opacity-32: 219, 98%, 24%, 0.32;
+    --precision-ui-tw-navy-opacity-40: 219, 98%, 24%, 0.4;
+    --precision-ui-tw-navy-opacity-60: 219, 98%, 24%, 0.6;
+    --precision-ui-tw-navy-opacity-80: 219, 98%, 24%, 0.8;
+    /* above not in Figma, for checked checkbox hover */
+
+    --precision-ui-tw-article-verylight: 225, 95%, 59%;
+    --precision-ui-tw-article-ultramarine: 235, 88%, 69%;
+
+    --precision-ui-tw-sapphire: 219, 98%, 44%;
+    --precision-ui-tw-sapphire-hover: 219, 78%, 62%;
+    --precision-ui-tw-turquoise: 181, 100%, 41%;
+    --precision-ui-tw-turquoise-opacity-16: 181, 100%, 41%, 0.16;
+    --precision-ui-tw-turquoise-opacity-20: 181, 100%, 41%, 0.2;
+    /* for advantages card */
+
+    --precision-ui-tw-whitish: 0, 0%, 100%;
+    --precision-ui-tw-whitish-opacity-8: 0, 0%, 100%, 0.08;
+    --precision-ui-tw-whitish-opacity-16: 0, 0%, 100%, 0.16;
+    --precision-ui-tw-whitish-opacity-24: 0, 0%, 100%, 0.24;
+    --precision-ui-tw-whitish-opacity-32: 0, 0%, 100%, 0.32;
+    --precision-ui-tw-whitish-opacity-40: 0, 0%, 100%, 0.4;
+    /* above slider pagination element */
+    --precision-ui-tw-whitish-opacity-60: 0, 0%, 100%, 0.6;
+    --precision-ui-tw-whitish-opacity-80: 0, 0%, 100%, 0.8;
+    /* above not in Figma, for checked checkbox hover */
+
+    --precision-ui-tw-grey-1: 0, 0%, 95%;
+    --precision-ui-tw-grey-2: 0, 0%, 97%;
+
+    --precision-ui-tw-danger: 1, 88%, 50%;
+
+    --precision-ui-tw-primary: 222.2 47.4% 11.2%;
+    --precision-ui-tw-primary-foreground: 210 40% 98%;
+
+    --precision-ui-tw-secondary: 210 40% 96.1%;
+    --precision-ui-tw-secondary-foreground: 222.2 47.4% 11.2%;
+
+    --precision-ui-tw-accent: 210 40% 96.1%;
+    --precision-ui-tw-accent-foreground: 222.2 47.4% 11.2%;
+
+    --precision-ui-tw-destructive: 0 84.2% 60.2%;
+    --precision-ui-tw-destructive-foreground: 210 40% 98%;
+
+    --precision-ui-tw-ring: 222.2 84% 4.9%;
+
+    --precision-ui-tw-radius: 0.5rem;
+  }
+
+  .dark {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --precision-ui-tw-background: 0 0% 0%;
+    --precision-ui-tw-foreground: 210 40% 98%;
+    --precision-ui-tw-muted: 210 40% 10%;
+    --muted-foreground: 215.4 16.3% 80%;
+    --precision-ui-tw-popover: 0 0% 0%;
+    --precision-ui-tw-popover-foreground: 210 40% 98%;
+    --precision-ui-tw-border: 214.3 31.8% 10%;
+    --precision-ui-tw-input: 214.3 31.8% 10%;
+    --precision-ui-tw-card: 0 0% 0%;
+    --precision-ui-tw-card-foreground: 210 40% 98%;
+    --precision-ui-tw-navy: 219, 98%, 80%;
+    --precision-ui-tw-navy-opacity-4: 219, 98%, 80%, 0.04;
+    --precision-ui-tw-navy-opacity-4-absolute: 216, 12%, 10%;
+    --precision-ui-tw-navy-opacity-8: 219, 98%, 80%, 0.08;
+    --precision-ui-tw-navy-opacity-16: 219, 98%, 80%, 0.16;
+    --precision-ui-tw-navy-opacity-32: 219, 98%, 80%, 0.32;
+    --precision-ui-tw-navy-opacity-40: 219, 98%, 80%, 0.4;
+    --precision-ui-tw-navy-opacity-60: 219, 98%, 80%, 0.6;
+    --precision-ui-tw-navy-opacity-80: 219, 98%, 80%, 0.8;
+    --precision-ui-tw-article-verylight: 225, 95%, 80%;
+    --precision-ui-tw-article-ultramarine: 235, 88%, 80%;
+    --precision-ui-tw-sapphire: 219, 98%, 80%;
+    --precision-ui-tw-sapphire-hover: 219, 78%, 80%;
+    --precision-ui-tw-turquoise: 181, 100%, 80%;
+    --precision-ui-tw-turquoise-opacity-16: 181, 100%, 80%, 0.16;
+    --precision-ui-tw-turquoise-opacity-20: 181, 100%, 80%, 0.2;
+    --precision-ui-tw-whitish: 0, 0%, 0%;
+    --precision-ui-tw-whitish-opacity-8: 0, 0%, 0%, 0.08;
+    --precision-ui-tw-whitish-opacity-16: 0, 0%, 0%, 0.16;
+    --precision-ui-tw-whitish-opacity-24: 0, 0%, 0%, 0.24;
+    --precision-ui-tw-whitish-opacity-32: 0, 0%, 0%, 0.32;
+    --precision-ui-tw-whitish-opacity-40: 0, 0%, 0%, 0.4;
+    --precision-ui-tw-whitish-opacity-60: 0, 0%, 0%, 0.6;
+    --precision-ui-tw-whitish-opacity-80: 0, 0%, 0%, 0.8;
+    --precision-ui-tw-grey-1: 0, 0%, 10%;
+    --precision-ui-tw-grey-2: 0, 0%, 5%;
+    --precision-ui-tw-danger: 1, 88%, 80%;
+    --precision-ui-tw-primary: 222.2 47.4% 90%;
+    --precision-ui-tw-primary-foreground: 210 40% 10%;
+    --precision-ui-tw-secondary: 210 40% 10%;
+    --precision-ui-tw-secondary-foreground: 222.2 47.4% 90%;
+    --precision-ui-tw-accent: 210 40% 10%;
+    --precision-ui-tw-accent-foreground: 222.2 47.4% 90%;
+    --precision-ui-tw-destructive: 0 84.2% 80%;
+    --precision-ui-tw-destructive-foreground: 210 40% 10%;
+    --precision-ui-tw-ring: 210 40% 98%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --foreground-rgb: 255, 255, 255;
+      --background-start-rgb: 0, 0, 0;
+      --background-end-rgb: 0, 0, 0;
+    }
+  }
+  * {
+    border-color: hsl(var(--precision-ui-tw-border));
+}
+  body {
+    background-color: hsl(var(--precision-ui-tw-background));
+    color: hsl(var(--precision-ui-tw-foreground));
+    font-feature-settings: 'rlig' 1, 'calt' 1;
+}
+
+:root {
+    --precision-ui-tw-border-spacing-x: 0;
+    --precision-ui-tw-border-spacing-y: 0;
+    --precision-ui-tw-translate-x: 0;
+    --precision-ui-tw-translate-y: 0;
+    --precision-ui-tw-rotate: 0;
+    --precision-ui-tw-skew-x: 0;
+    --precision-ui-tw-skew-y: 0;
+    --precision-ui-tw-scale-x: 1;
+    --precision-ui-tw-scale-y: 1;
+    --precision-ui-tw-pan-x:  ;
+    --precision-ui-tw-pan-y:  ;
+    --precision-ui-tw-pinch-zoom:  ;
+    --precision-ui-tw-scroll-snap-strictness: proximity;
+    --precision-ui-tw-gradient-from-position:  ;
+    --precision-ui-tw-gradient-via-position:  ;
+    --precision-ui-tw-gradient-to-position:  ;
+    --precision-ui-tw-ordinal:  ;
+    --precision-ui-tw-slashed-zero:  ;
+    --precision-ui-tw-numeric-figure:  ;
+    --precision-ui-tw-numeric-spacing:  ;
+    --precision-ui-tw-numeric-fraction:  ;
+    --precision-ui-tw-ring-inset:  ;
+    --precision-ui-tw-ring-offset-width: 0px;
+    --precision-ui-tw-ring-offset-color: #fff;
+    --precision-ui-tw-ring-color: rgb(59 130 246 / 0.5);
+    --precision-ui-tw-ring-offset-shadow: 0 0 #0000;
+    --precision-ui-tw-ring-shadow: 0 0 #0000;
+    --precision-ui-tw-shadow: 0 0 #0000;
+    --precision-ui-tw-shadow-colored: 0 0 #0000;
+    --precision-ui-tw-blur:  ;
+    --precision-ui-tw-brightness:  ;
+    --precision-ui-tw-contrast:  ;
+    --precision-ui-tw-grayscale:  ;
+    --precision-ui-tw-hue-rotate:  ;
+    --precision-ui-tw-invert:  ;
+    --precision-ui-tw-saturate:  ;
+    --precision-ui-tw-sepia:  ;
+    --precision-ui-tw-drop-shadow:  ;
+    --precision-ui-tw-backdrop-blur:  ;
+    --precision-ui-tw-backdrop-brightness:  ;
+    --precision-ui-tw-backdrop-contrast:  ;
+    --precision-ui-tw-backdrop-grayscale:  ;
+    --precision-ui-tw-backdrop-hue-rotate:  ;
+    --precision-ui-tw-backdrop-invert:  ;
+    --precision-ui-tw-backdrop-opacity:  ;
+    --precision-ui-tw-backdrop-saturate:  ;
+    --precision-ui-tw-backdrop-sepia:  ;
+    --precision-ui-tw-contain-size:  ;
+    --precision-ui-tw-contain-layout:  ;
+    --precision-ui-tw-contain-paint:  ;
+    --precision-ui-tw-contain-style:  ;
+}
+
+::backdrop {
+    --precision-ui-tw-border-spacing-x: 0;
+    --precision-ui-tw-border-spacing-y: 0;
+    --precision-ui-tw-translate-x: 0;
+    --precision-ui-tw-translate-y: 0;
+    --precision-ui-tw-rotate: 0;
+    --precision-ui-tw-skew-x: 0;
+    --precision-ui-tw-skew-y: 0;
+    --precision-ui-tw-scale-x: 1;
+    --precision-ui-tw-scale-y: 1;
+    --precision-ui-tw-pan-x:  ;
+    --precision-ui-tw-pan-y:  ;
+    --precision-ui-tw-pinch-zoom:  ;
+    --precision-ui-tw-scroll-snap-strictness: proximity;
+    --precision-ui-tw-gradient-from-position:  ;
+    --precision-ui-tw-gradient-via-position:  ;
+    --precision-ui-tw-gradient-to-position:  ;
+    --precision-ui-tw-ordinal:  ;
+    --precision-ui-tw-slashed-zero:  ;
+    --precision-ui-tw-numeric-figure:  ;
+    --precision-ui-tw-numeric-spacing:  ;
+    --precision-ui-tw-numeric-fraction:  ;
+    --precision-ui-tw-ring-inset:  ;
+    --precision-ui-tw-ring-offset-width: 0px;
+    --precision-ui-tw-ring-offset-color: #fff;
+    --precision-ui-tw-ring-color: rgb(59 130 246 / 0.5);
+    --precision-ui-tw-ring-offset-shadow: 0 0 #0000;
+    --precision-ui-tw-ring-shadow: 0 0 #0000;
+    --precision-ui-tw-shadow: 0 0 #0000;
+    --precision-ui-tw-shadow-colored: 0 0 #0000;
+    --precision-ui-tw-blur:  ;
+    --precision-ui-tw-brightness:  ;
+    --precision-ui-tw-contrast:  ;
+    --precision-ui-tw-grayscale:  ;
+    --precision-ui-tw-hue-rotate:  ;
+    --precision-ui-tw-invert:  ;
+    --precision-ui-tw-saturate:  ;
+    --precision-ui-tw-sepia:  ;
+    --precision-ui-tw-drop-shadow:  ;
+    --precision-ui-tw-backdrop-blur:  ;
+    --precision-ui-tw-backdrop-brightness:  ;
+    --precision-ui-tw-backdrop-contrast:  ;
+    --precision-ui-tw-backdrop-grayscale:  ;
+    --precision-ui-tw-backdrop-hue-rotate:  ;
+    --precision-ui-tw-backdrop-invert:  ;
+    --precision-ui-tw-backdrop-opacity:  ;
+    --precision-ui-tw-backdrop-saturate:  ;
+    --precision-ui-tw-backdrop-sepia:  ;
+    --precision-ui-tw-contain-size:  ;
+    --precision-ui-tw-contain-layout:  ;
+    --precision-ui-tw-contain-paint:  ;
+    --precision-ui-tw-contain-style:  ;
+}
+.bg-link-gradient:hover::before {
+    background-color: hsl(var(--precision-ui-tw-navy));
+  }
+.link_white:hover::before {
+    background-color: hsl(var(--precision-ui-tw-whitish));
+  }
+.bg-link-gradient-container {
+    &:hover {
+      .bg-link-gradient::before {
+        background-color: hsl(var(--precision-ui-tw-navy));
+      }
+
+      .bg-link-white-gradient::before {
+        background-color: white;
+      }
+    }
+  }
+.relative {
+    position: relative;
+}
+.mb-1 {
+    margin-bottom: 0.25rem;
+}
+.flex {
+    display: flex;
+}
+.inline-flex {
+    display: inline-flex;
+}
+.table {
+    display: table;
+}
+.grid {
+    display: grid;
+}
+.contents {
+    display: contents;
+}
+.h-10 {
+    height: 2.5rem;
+}
+.h-11 {
+    height: 2.75rem;
+}
+.h-14 {
+    height: 3.5rem;
+}
+.h-9 {
+    height: 2.25rem;
+}
+.w-10 {
+    width: 2.5rem;
+}
+.w-full {
+    width: 100%;
+}
+.rotate-90 {
+    --precision-ui-tw-rotate: 90deg;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.cursor-pointer {
+    cursor: pointer;
+}
+.items-center {
+    align-items: center;
+}
+.justify-center {
+    justify-content: center;
+}
+.justify-between {
+    justify-content: space-between;
+}
+.gap-2 {
+    gap: 0.5rem;
+}
+.gap-8 {
+    gap: 2rem;
+}
+.whitespace-nowrap {
+    white-space: nowrap;
+}
+.rounded-full {
+    border-radius: 9999px;
+}
+.rounded-lg {
+    border-radius: var(--precision-ui-tw-radius);
+}
+.rounded-md {
+    border-radius: calc(var(--precision-ui-tw-radius) - 2px);
+}
+.border {
+    border-width: 1px;
+}
+.border-solid {
+    border-style: solid;
+}
+.border-none {
+    border-style: none;
+}
+.border-destructive\/50 {
+    border-color: hsl(var(--precision-ui-tw-destructive) / 0.5);
+}
+.border-input {
+    border-color: hsl(var(--precision-ui-tw-input));
+}
+.border-navy-opacity-32 {
+    border-color: hsl(var(--precision-ui-tw-navy-opacity-32));
+}
+.border-whitish-opacity-32 {
+    border-color: hsl(var(--precision-ui-tw-whitish-opacity-32));
+}
+.bg-background {
+    background-color: hsl(var(--precision-ui-tw-background));
+}
+.bg-destructive {
+    background-color: hsl(var(--precision-ui-tw-destructive));
+}
+.bg-navy {
+    background-color: hsl(var(--precision-ui-tw-navy));
+}
+.bg-navy-opacity-4 {
+    background-color: hsl(var(--precision-ui-tw-navy-opacity-4));
+}
+.bg-red-500 {
+    --precision-ui-tw-bg-opacity: 1;
+    background-color: rgb(239 68 68 / var(--precision-ui-tw-bg-opacity));
+}
+.bg-sapphire {
+    background-color: hsl(var(--precision-ui-tw-sapphire));
+}
+.bg-transparent {
+    background-color: transparent;
+}
+.bg-white {
+    --precision-ui-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--precision-ui-tw-bg-opacity));
+}
+.bg-whitish-opacity-16 {
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-16));
+}
+.bg-whitish-opacity-32 {
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-32));
+}
+.bg-whitish-opacity-8 {
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-8));
+}
+.p-4 {
+    padding: 1rem;
+}
+.p-\[10px\] {
+    padding: 10px;
+}
+.p-\[5px\] {
+    padding: 5px;
+}
+.px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+.px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+.px-\[13\.5px\] {
+    padding-left: 13.5px;
+    padding-right: 13.5px;
+}
+.px-\[18px\] {
+    padding-left: 18px;
+    padding-right: 18px;
+}
+.py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+.py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+.py-\[11px\] {
+    padding-top: 11px;
+    padding-bottom: 11px;
+}
+.py-\[15px\] {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+.pr-2 {
+    padding-right: 0.5rem;
+}
+.text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+.font-medium {
+    font-weight: 500;
+}
+.leading-none {
+    line-height: 1;
+}
+.tracking-tight {
+    letter-spacing: -0.025em;
+}
+.text-destructive {
+    color: hsl(var(--precision-ui-tw-destructive));
+}
+.text-destructive-foreground {
+    color: hsl(var(--precision-ui-tw-destructive-foreground));
+}
+.text-foreground {
+    color: hsl(var(--precision-ui-tw-foreground));
+}
+.text-navy {
+    color: hsl(var(--precision-ui-tw-navy));
+}
+.text-primary {
+    color: hsl(var(--precision-ui-tw-primary));
+}
+.text-turquoise {
+    color: hsl(var(--precision-ui-tw-turquoise));
+}
+.text-white {
+    --precision-ui-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--precision-ui-tw-text-opacity));
+}
+.underline-offset-4 {
+    text-underline-offset: 4px;
+}
+.outline {
+    outline-style: solid;
+}
+.ring-offset-background {
+    --precision-ui-tw-ring-offset-color: hsl(var(--precision-ui-tw-background));
+}
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+.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 {
+    transition-duration: 200ms;
+}
+@keyframes enter {
+
+    from {
+        opacity: var(--precision-ui-tw-enter-opacity, 1);
+        transform: translate3d(var(--precision-ui-tw-enter-translate-x, 0), var(--precision-ui-tw-enter-translate-y, 0), 0) scale3d(var(--precision-ui-tw-enter-scale, 1), var(--precision-ui-tw-enter-scale, 1), var(--precision-ui-tw-enter-scale, 1)) rotate(var(--precision-ui-tw-enter-rotate, 0));
+    }
+}
+@keyframes exit {
+
+    to {
+        opacity: var(--precision-ui-tw-exit-opacity, 1);
+        transform: translate3d(var(--precision-ui-tw-exit-translate-x, 0), var(--precision-ui-tw-exit-translate-y, 0), 0) scale3d(var(--precision-ui-tw-exit-scale, 1), var(--precision-ui-tw-exit-scale, 1), var(--precision-ui-tw-exit-scale, 1)) rotate(var(--precision-ui-tw-exit-rotate, 0));
+    }
+}
+.duration-200 {
+    animation-duration: 200ms;
+}
+@import 'media.scss';
+@import 'typography.scss';
+
+html {
+  font-size: 16px;
+  /* FIXME: it was 20, explore and fix if needed */
+}
+
+body {
+  font-family: 'TT Commons', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  /* font-feature-settings: "rlig" 1, "calt" 1; */
+}
+
+.bg-link-gradient {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: linear-gradient(to top, transparent 1px, transparent 1px);
+    /* background-image: linear-gradient(to top, rgba(255,137,106,.3) 1px, transparent 1px); */
+    background-repeat: repeat-x;
+    /* background-position: 0 -3px; */
+    height: 1px;
+    width: 100%;
+    transition: all ease 0.3s;
+  }
+}
+
+.bg-link-white-gradient,
+.link_navy,
+.link_white {
+  @extend .bg-link-gradient;
+}
+
+.link,
+.link_navy,
+.link_white {
+  transition: all ease 0.25s;
+  background-image: linear-gradient(
+    to top,
+    rgba(0, 85, 144, 0) 1px,
+    transparent 1px
+  );
+  background-repeat: repeat-x;
+  background-position: 0 0px;
+  text-decoration: none;
+}
+
+.hover\:cursor-pointer:hover {
+    cursor: pointer;
+}
+
+.hover\:rounded-\[24px\]:hover {
+    border-radius: 24px;
+}
+
+.hover\:bg-accent:hover {
+    background-color: hsl(var(--precision-ui-tw-accent));
+}
+
+.hover\:bg-destructive\/90:hover {
+    background-color: hsl(var(--precision-ui-tw-destructive) / 0.9);
+}
+
+.hover\:bg-navy-opacity-4:hover {
+    background-color: hsl(var(--precision-ui-tw-navy-opacity-4));
+}
+
+.hover\:bg-sapphire-hover:hover {
+    background-color: hsl(var(--precision-ui-tw-sapphire-hover));
+}
+
+.hover\:bg-white:hover {
+    --precision-ui-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--precision-ui-tw-bg-opacity));
+}
+
+.hover\:bg-whitish-opacity-16:hover {
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-16));
+}
+
+.hover\:bg-whitish-opacity-24:hover {
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-24));
+}
+
+.hover\:bg-whitish-opacity-80:hover {
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-80));
+}
+
+.hover\:text-accent-foreground:hover {
+    color: hsl(var(--precision-ui-tw-accent-foreground));
+}
+
+.hover\:text-navy:hover {
+    color: hsl(var(--precision-ui-tw-navy));
+}
+
+.hover\:underline:hover {
+    text-decoration-line: underline;
+}
+
+.focus-visible\:outline-none:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+.focus-visible\:ring-2:focus-visible {
+    --precision-ui-tw-ring-offset-shadow: var(--precision-ui-tw-ring-inset) 0 0 0 var(--precision-ui-tw-ring-offset-width) var(--precision-ui-tw-ring-offset-color);
+    --precision-ui-tw-ring-shadow: var(--precision-ui-tw-ring-inset) 0 0 0 calc(2px + var(--precision-ui-tw-ring-offset-width)) var(--precision-ui-tw-ring-color);
+    box-shadow: var(--precision-ui-tw-ring-offset-shadow), var(--precision-ui-tw-ring-shadow), var(--precision-ui-tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-ring:focus-visible {
+    --precision-ui-tw-ring-color: hsl(var(--precision-ui-tw-ring));
+}
+
+.focus-visible\:ring-offset-2:focus-visible {
+    --precision-ui-tw-ring-offset-width: 2px;
+}
+
+.disabled\:pointer-events-none:disabled {
+    pointer-events: none;
+}
+
+.disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+}
+
+.disabled\:opacity-50:disabled {
+    opacity: 0.5;
+}
+
+.group:hover .group-hover\:scale-125 {
+    --precision-ui-tw-scale-x: 1.25;
+    --precision-ui-tw-scale-y: 1.25;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+
+.group:hover .group-hover\:transform {
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+
+.group:hover .group-hover\:bg-transparent {
+    background-color: transparent;
+}
+
+.dark\:border-destructive:is([data-mode="dark"] *) {
+    border-color: hsl(var(--precision-ui-tw-destructive));
+}
+
+@media (min-width: 640px) {
+
+    .sm\:max-w-xs {
+        max-width: 20rem;
+    }
+}
+
+@media (min-width: 990px) {
+
+    .lg\:max-w-sm {
+        max-width: 24rem;
+    }
+}
+
+@media (min-width: 1280px) {
+
+    .xl\:max-w-md {
+        max-width: 28rem;
+    }
+}
+
+.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
+    --precision-ui-tw-translate-y: -3px;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+
+.\[\&\>svg\]\:absolute>svg {
+    position: absolute;
+}
+
+.\[\&\>svg\]\:left-4>svg {
+    left: 1rem;
+}
+
+.\[\&\>svg\]\:top-4>svg {
+    top: 1rem;
+}
+
+.\[\&\>svg\]\:text-destructive>svg {
+    color: hsl(var(--precision-ui-tw-destructive));
+}
+
+.\[\&\>svg\]\:text-foreground>svg {
+    color: hsl(var(--precision-ui-tw-foreground));
+}
+
+.\[\&\>svg\~\*\]\:pl-7>svg~* {
+    padding-left: 1.75rem;
+}
+
+.\[\&_p\]\:leading-relaxed p {
+    line-height: 1.625;
+}