@profiq/ui 0.1.0

package/dist/index.css

@@ -0,0 +1,571 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+:root {
+  --breakpoint-xs: 400px;
+  --breakpoint-sm: 600px;
+
+  --radius: 0.625rem;
+
+  --brand-blue: #002c62;
+  --brand-green: #8ec549;
+  --brand-grey: #c3c6c8;
+  --brand-teal: #006986;
+  --brand-gradient: linear-gradient(
+    30deg,
+    var(--brand-teal),
+    var(--brand-blue)
+  );
+  --brand-grey: #c3c6c8;
+  --brand-teal: #006986;
+  --brand-gradient: linear-gradient(
+    30deg,
+    var(--brand-teal),
+    var(--brand-blue)
+  );
+
+  --font: "Roboto Slab";
+  --font-alt: "Franklin Gothic";
+
+  --background: #ffffff;
+  --foreground: var(--brand-blue);
+
+  --card: #ffffff;
+  --card-foreground: var(--brand-blue);
+
+  --popover: #ffffff;
+  --popover-foreground: var(--brand-blue);
+
+  --primary: var(--brand-green);
+  --primary-foreground: var(--brand-blue);
+
+  --secondary: var(--brand-grey);
+  --secondary-foreground: var(--brand-blue);
+
+  --muted: color-mix(in srgb, var(--brand-grey) 35%, white);
+  --muted-foreground: color-mix(in srgb, #ffffff 70%, black);
+
+  --input: var(--brand-gray);
+  --accent: var(--brand-green);
+  --accent-foreground: #002000;
+
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+
+  --sidebar: #ffffff;
+  --sidebar-foreground: var(--brand-blue);
+  --sidebar-primary: var(--brand-blue);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: color-mix(in srgb, var(--brand-green) 18%, white);
+  --sidebar-accent-foreground: var(--brand-blue);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+.profiq {
+  --background: #ffffff;
+  --foreground: var(--brand-blue);
+
+  --card: #ffffff;
+  --card-foreground: var(--brand-blue);
+
+  --popover: #ffffff;
+  --popover-foreground: var(--brand-blue);
+
+  --primary: var(--brand-green);
+  --primary-foreground: var(--brand-blue);
+
+  --secondary: var(--brand-grey);
+  --secondary-foreground: var(--brand-blue);
+
+  --muted: color-mix(in srgb, var(--brand-grey) 35%, white);
+  --muted-foreground: color-mix(in srgb, #ffffff 70%, black);
+
+  --input: var(--brand-gray);
+  --accent: var(--brand-green);
+  --accent-foreground: #002000;
+
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+
+  --sidebar: #ffffff;
+  --sidebar-foreground: var(--brand-blue);
+  --sidebar-primary: var(--brand-blue);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: color-mix(in srgb, var(--brand-green) 18%, white);
+  --sidebar-accent-foreground: var(--brand-blue);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+.shadcn {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.profiq-dark {
+  --background: var(--brand-gradient);
+  --foreground: #ffffff;
+  --card: #0f172a;
+  --card-foreground: #ffffff;
+  --popover: #0f172a;
+  --popover-foreground: #ffffff;
+  --primary: var(--brand-green);
+  --primary-foreground: #ffffff;
+  --secondary: color-mix(in srgb, var(--brand-grey) 25%, #0f172a);
+  --secondary-foreground: #ffffff;
+  --muted: #111827;
+  --muted-foreground: color-mix(in srgb, white 75%, var(--brand-grey));
+  --accent: color-mix(in srgb, var(--brand-green) 70%, #0b1220);
+  --accent-foreground: #ffffff;
+  --destructive: #ef4444;
+  --destructive-foreground: #0b1220;
+  --border: color-mix(in srgb, white 12%, #0f172a);
+  --input: color-mix(in srgb, white 14%, #0f172a);
+  --ring: color-mix(in srgb, var(--brand-green) 45%, white);
+  --sidebar: #0f172a;
+  --sidebar-foreground: #ffffff;
+  --sidebar-primary: var(--brand-green);
+  --sidebar-primary-foreground: #0b1220;
+  --sidebar-accent: #111827;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+.shadcn-dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+.lightGreen {
+  --background: oklch(0.9892 0.0054 117.9205);
+  --foreground: oklch(0.2077 0.0398 265.7549);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2077 0.0398 265.7549);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2077 0.0398 265.7549);
+  --primary: oklch(0.8871 0.2122 128.5041);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.3717 0.0392 257.287);
+  --secondary-foreground: oklch(0.9842 0.0034 247.8575);
+  --muted: oklch(0.9683 0.0069 247.8956);
+  --muted-foreground: oklch(0.5544 0.0407 257.4166);
+  --accent: oklch(0.9819 0.0181 155.8263);
+  --accent-foreground: oklch(0.4479 0.1083 151.3277);
+  --destructive: oklch(0.6368 0.2078 25.3313);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.9288 0.0126 255.5078);
+  --input: oklch(0.9288 0.0126 255.5078);
+  --ring: oklch(0.8871 0.2122 128.5041);
+  --chart-1: oklch(0.8871 0.2122 128.5041);
+  --chart-2: oklch(0.3717 0.0392 257.287);
+  --chart-3: oklch(0.7227 0.192 149.5793);
+  --chart-4: oklch(0.5544 0.0407 257.4166);
+  --chart-5: oklch(0.7107 0.0351 256.7878);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.2077 0.0398 265.7549);
+  --sidebar-primary: oklch(0.8871 0.2122 128.5041);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.9842 0.0034 247.8575);
+  --sidebar-accent-foreground: oklch(0.2077 0.0398 265.7549);
+  --sidebar-border: oklch(0.9683 0.0069 247.8956);
+  --sidebar-ring: oklch(0.8871 0.2122 128.5041);
+  --font-sans: Inter, system-ui, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 1rem;
+  --shadow-x: 0px;
+  --shadow-y: 8px;
+  --shadow-blur: 20px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.05;
+  --shadow-color: #000000;
+  --shadow-2xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
+  --shadow-xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
+  --shadow-sm:
+    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+  --shadow:
+    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+  --shadow-md:
+    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
+  --shadow-lg:
+    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xl:
+    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
+  --shadow-2xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.13);
+  --tracking-normal: -0.01em;
+  --spacing: 0.25rem;
+}
+
+.lightGreen-dark {
+  --background: oklch(0.1288 0.0406 264.6952);
+  --foreground: oklch(0.9842 0.0034 247.8575);
+  --card: oklch(0.2077 0.0398 265.7549);
+  --card-foreground: oklch(0.9842 0.0034 247.8575);
+  --popover: oklch(0.2077 0.0398 265.7549);
+  --popover-foreground: oklch(0.9842 0.0034 247.8575);
+  --primary: oklch(0.8871 0.2122 128.5041);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.2795 0.0368 260.031);
+  --secondary-foreground: oklch(0.9842 0.0034 247.8575);
+  --muted: oklch(0.2795 0.0368 260.031);
+  --muted-foreground: oklch(0.7107 0.0351 256.7878);
+  --accent: oklch(0.3925 0.0896 152.5353);
+  --accent-foreground: oklch(0.8871 0.2122 128.5041);
+  --destructive: oklch(0.4437 0.1613 26.8994);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.2795 0.0368 260.031);
+  --input: oklch(0.2795 0.0368 260.031);
+  --ring: oklch(0.8871 0.2122 128.5041);
+  --chart-1: oklch(0.8871 0.2122 128.5041);
+  --chart-2: oklch(0.6231 0.188 259.8145);
+  --chart-3: oklch(0.7227 0.192 149.5793);
+  --chart-4: oklch(0.6268 0.2325 303.9004);
+  --chart-5: oklch(0.7686 0.1647 70.0804);
+  --sidebar: oklch(0.1288 0.0406 264.6952);
+  --sidebar-foreground: oklch(0.9842 0.0034 247.8575);
+  --sidebar-primary: oklch(0.8871 0.2122 128.5041);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.2795 0.0368 260.031);
+  --sidebar-accent-foreground: oklch(0.9842 0.0034 247.8575);
+  --sidebar-border: oklch(0.2795 0.0368 260.031);
+  --sidebar-ring: oklch(0.8871 0.2122 128.5041);
+  --font-sans: Inter, system-ui, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 1rem;
+  --shadow-x: 0px;
+  --shadow-y: 10px;
+  --shadow-blur: 25px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.4;
+  --shadow-color: #000000;
+  --shadow-2xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
+  --shadow-xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
+  --shadow-sm:
+    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
+  --shadow:
+    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
+  --shadow-md:
+    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
+  --shadow-lg:
+    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
+  --shadow-xl:
+    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
+  --shadow-2xl: 0px 10px 25px 0px hsl(0 0% 0% / 1);
+}
+
+.alpine {
+  --background: oklch(0.9761 0.0079 357.7954);
+  --foreground: oklch(0.2151 0.0518 259.4035);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2151 0.0518 259.4035);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2151 0.0518 259.4035);
+  --primary: oklch(0.4284 0.172 259.7023);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.6785 0.2131 14.7192);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.9365 0.0158 266.2758);
+  --muted-foreground: oklch(0.4474 0.0343 261.3244);
+  --accent: oklch(0.8422 0.09 7.0366);
+  --accent-foreground: oklch(0.2151 0.0518 259.4035);
+  --destructive: oklch(0.5858 0.222 17.5846);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.869 0.0198 252.8943);
+  --input: oklch(1 0 0);
+  --ring: oklch(0.4284 0.172 259.7023);
+  --chart-1: oklch(0.4284 0.172 259.7023);
+  --chart-2: oklch(0.6785 0.2131 14.7192);
+  --chart-3: oklch(0.7909 0.125 39.5147);
+  --chart-4: oklch(0.2853 0.1242 261.1229);
+  --chart-5: oklch(0.7325 0.169 10.5065);
+  --sidebar: oklch(0.2151 0.0518 259.4035);
+  --sidebar-foreground: oklch(0.9842 0.0034 247.8575);
+  --sidebar-primary: oklch(0.4284 0.172 259.7023);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.2795 0.0368 260.031);
+  --sidebar-accent-foreground: oklch(0.9842 0.0034 247.8575);
+  --sidebar-border: oklch(0.2795 0.0368 260.031);
+  --sidebar-ring: oklch(0.4284 0.172 259.7023);
+  --font-sans: "Montserrat", sans-serif;
+  --font-serif: "Playfair Display", serif;
+  --font-mono: "Fira Code", monospace;
+  --radius: 0.75rem;
+  --shadow-x: 0px;
+  --shadow-y: 4px;
+  --shadow-blur: 10px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.05;
+  --shadow-color: #000000;
+  --shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
+  --shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
+  --shadow-sm:
+    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+  --shadow:
+    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+  --shadow-md:
+    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
+  --shadow-lg:
+    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xl:
+    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
+  --shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.13);
+  --tracking-normal: 0.02em;
+  --spacing: 0.25rem;
+}
+
+.alpine-dark {
+  --background: oklch(0.1107 0.0274 244.1227);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.1728 0.0527 252.6119);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.1107 0.0274 244.1227);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(0.7222 0.1514 248.5089);
+  --primary-foreground: oklch(0.1107 0.0274 244.1227);
+  --secondary: oklch(0.6785 0.2131 14.7192);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.2254 0.08 257.0037);
+  --muted-foreground: oklch(0.869 0.0198 252.8943);
+  --accent: oklch(0.5673 0.1955 16.2602);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0.6489 0.237 26.9728);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.2364 0.084 258.6542);
+  --input: oklch(0.2254 0.08 257.0037);
+  --ring: oklch(0.7222 0.1514 248.5089);
+  --chart-1: oklch(0.7222 0.1514 248.5089);
+  --chart-2: oklch(0.6785 0.2131 14.7192);
+  --chart-3: oklch(0.8422 0.09 7.0366);
+  --chart-4: oklch(0.787 0.1124 249.7946);
+  --chart-5: oklch(0.6307 0.2549 23.6145);
+  --sidebar: oklch(0.0812 0.0193 242.2089);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(0.7222 0.1514 248.5089);
+  --sidebar-primary-foreground: oklch(0.1107 0.0274 244.1227);
+  --sidebar-accent: oklch(0.2254 0.08 257.0037);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(0.3233 0.1025 253.8852);
+  --sidebar-ring: oklch(0.7222 0.1514 248.5089);
+  --font-sans: "Montserrat", sans-serif;
+  --font-serif: "Playfair Display", serif;
+  --font-mono: "Fira Code", monospace;
+  --radius: 0.75rem;
+  --shadow-x: 0px;
+  --shadow-y: 12px;
+  --shadow-blur: 25px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.6;
+  --shadow-color: #000000;
+  --shadow-2xs: 0px 12px 25px 0px hsl(0 0% 0% / 0.3);
+  --shadow-xs: 0px 12px 25px 0px hsl(0 0% 0% / 0.3);
+  --shadow-sm:
+    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 1px 2px -1px hsl(0 0% 0% / 0.6);
+  --shadow:
+    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 1px 2px -1px hsl(0 0% 0% / 0.6);
+  --shadow-md:
+    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 2px 4px -1px hsl(0 0% 0% / 0.6);
+  --shadow-lg:
+    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 4px 6px -1px hsl(0 0% 0% / 0.6);
+  --shadow-xl:
+    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 8px 10px -1px hsl(0 0% 0% / 0.6);
+  --shadow-2xl: 0px 12px 25px 0px hsl(0 0% 0% / 1.5);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.clickable {
+  @apply cursor-pointer;
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  html {
+    font-family: var(--font);
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply text-foreground;
+    font-family: var(--font);
+    font-weight: 700;
+
+    margin: 0;
+  }
+
+  h1 {
+    @apply text-4xl sm:text-5xl text-[800];
+  }
+
+  h2 {
+    @apply text-3xl sm:text-4xl text-[var(--secondary)];
+  }
+
+  h3 {
+    @apply text-2xl sm:text-3xl;
+  }
+
+  h4 {
+    @apply text-xl sm:text-2xl;
+  }
+
+  h5 {
+    @apply text-lg sm:text-xl;
+  }
+
+  h6 {
+    @apply text-base sm:text-lg;
+  }
+}
+
+@font-face {
+  font-family: "Roboto Slab";
+  src: url("/fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf")
+    format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Franklin Gothic";
+  src: url("/fonts/Franklin_Gothic/FranklinGothic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Franklin Gothic";
+  src: url("./assets/fonts/Franklin_Gothic/FranklinGothicITALIC.ttf")
+    format("truetype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}

package/dist/index.js

@@ -0,0 +1,11 @@
+import { themes as o } from "./lib/baseProps.js";
+import { useMakeTestId as t } from "./lib/hooks/useMakeTestId.js";
+import { cn as f } from "./lib/utils.js";
+import { sizeClasses as x, weightClasses as a } from "./lib/text.types.js";
+export {
+  f as cn,
+  x as sizeClasses,
+  o as themes,
+  t as useMakeTestId,
+  a as weightClasses
+};

package/dist/lib/baseProps.d.ts

@@ -0,0 +1,9 @@
+export type BaseProps = {
+    dataTestId?: string;
+    theme?: Theme;
+    ariaLabel?: string;
+    className?: string;
+};
+export type Theme = "profiq" | "profiq-dark" | "shadcn" | "shadcn-dark" | "lightGreen" | "lightGreen-dark" | "alpine" | "alpine-dark";
+export declare const themes: readonly ["profiq", "profiq-dark", "shadcn", "shadcn-dark", "lightGreen", "lightGreen-dark", "alpine", "alpine-dark"];
+//# sourceMappingURL=baseProps.d.ts.map

package/dist/lib/baseProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseProps.d.ts","sourceRoot":"","sources":["../../src/lib/baseProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,KAAK,GACb,QAAQ,GACR,aAAa,GACb,QAAQ,GACR,aAAa,GACb,YAAY,GACZ,iBAAiB,GACjB,QAAQ,GACR,aAAa,CAAC;AAElB,eAAO,MAAM,MAAM,uHASkB,CAAC"}

package/dist/lib/baseProps.js

@@ -0,0 +1,13 @@
+const e = [
+  "profiq",
+  "profiq-dark",
+  "shadcn",
+  "shadcn-dark",
+  "lightGreen",
+  "lightGreen-dark",
+  "alpine",
+  "alpine-dark"
+];
+export {
+  e as themes
+};

package/dist/lib/buttonVariants.d.ts

@@ -0,0 +1,3 @@
+export type types = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+export type sizes = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+//# sourceMappingURL=buttonVariants.d.ts.map

package/dist/lib/buttonVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../src/lib/buttonVariants.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GACb,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,MAAM,KAAK,GACb,SAAS,GACT,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,SAAS,GACT,SAAS,GACT,SAAS,CAAC"}

package/dist/lib/hooks/useMakeTestId.d.ts

@@ -0,0 +1,34 @@
+export type MakeTestId = (suffix?: string) => string;
+/**
+ * Config options for useMakeTestId
+ */
+type Options = {
+    /**
+     * String used to join the base and suffixes
+     * @defaultValue "-"
+     */
+    separator?: string;
+    /**
+     * Boolean whether or not to normalize the individual segments
+     * Normalization just trims whitespaces and removes empty segments
+     * @defaultValue true
+     */
+    normalize?: boolean;
+};
+/**
+ * A hook that generates a "data-testid" string from provided base and optional suffixes.
+ * WIf no suffix is provided, it returns the base test id.
+ * If a suffix is provided, it is appended using the configured separator in Options.
+ *
+ * The hook creates a stable base test id from the scope and optional parent data-testid, then returns a helper function for appending suffixes
+ * The function is preserved across re-renders with useMemo
+ *
+ * @param scope - Local scope name for the component
+ * @param dataTestId - Optional parent data-testid used as prefix to the scope
+ * @param options - Optional config
+ *
+ * @returns Function that generates "data-testid strings, optionally suffixed further"
+ */
+export declare function useMakeTestId(scope: string, dataTestId?: string, options?: Options): MakeTestId;
+export {};
+//# sourceMappingURL=useMakeTestId.d.ts.map

package/dist/lib/hooks/useMakeTestId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMakeTestId.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/useMakeTestId.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;AAErD;;GAEG;AAEH,KAAK,OAAO,GAAG;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAWF;;;;;;;;;;;;;GAaG;AAEH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,UAAU,CAAC,EAAE,MAAM,EACnB,OAAO,CAAC,EAAE,OAAO,GAChB,UAAU,CAyBZ"}

package/dist/lib/hooks/useMakeTestId.js

@@ -0,0 +1,26 @@
+import { useMemo as c, useCallback as f } from "react";
+const m = {
+  separator: "-",
+  normalize: !0
+};
+function u(r) {
+  return r.trim();
+}
+function z(r, s, l) {
+  const { separator: t, normalize: e } = { ...m, ...l }, n = c(() => {
+    const o = [s, r].filter(Boolean);
+    return (e ? o.map(u).filter(Boolean) : o).join(t);
+  }, [s, r, t, e]);
+  return f(
+    (o) => {
+      const a = o ?? "";
+      if (!a) return n;
+      const i = e ? u(a) : a;
+      return i ? `${n}${t}${i}` : n;
+    },
+    [n, t, e]
+  );
+}
+export {
+  z as useMakeTestId
+};

package/dist/lib/index.d.ts

@@ -0,0 +1,6 @@
+export { type Theme, themes } from './baseProps';
+export { type types, type sizes } from './buttonVariants';
+export { useMakeTestId } from './hooks/useMakeTestId';
+export { cn } from './utils';
+export { type TextAs, type TextSize, type TextWeight, sizeClasses, weightClasses, } from './text.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EACL,KAAK,MAAM,EACX,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,WAAW,EACX,aAAa,GACd,MAAM,kBAAkB,CAAC"}