@adriansteffan/reactive 0.0.11 → 0.0.12

package/dist/preset.css

@@ -0,0 +1,134 @@
+@import 'tailwindcss';
+
+@source '../dist/**/*.{js,ts,jsx,tsx}';
+
+@theme {
+  --font-*: initial;
+  --font-sans: Atkinson Hyperlegible, sans-serif;
+  --font-atkinson: Atkinson Hyperlegible, sans-serif;
+
+  --animate-slide-down: slideDown 0.8s ease-out forwards;
+  --animate-fade-in: fadeIn 0.5s ease-out forwards;
+
+  @keyframes slideDown {
+    0% {
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+:root {
+  --font-atkinson: 'Atkinson Hyperlegible', system-ui, sans-serif;
+}
+
+* {
+  -webkit-touch-callout: none;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+/* customization for the surveyjs elements - a bit hacky and broken*/
+.sd-root-modern {
+  background-color: white !important;
+  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
+  background-size: 16px 16px;
+  position: relative; /* Make sure position is set for proper rendering */
+  font-family: 'Atkinson Hyperlegible', sans-serif; /* Added this line */
+}
+
+.sd-root-modern * {
+  font-family: 'Atkinson Hyperlegible', sans-serif;
+}
+
+/* for the rating group panel, maybe we can move that into the component at some point*/
+.sd-row,
+.sd-clearfix {
+  padding-bottom: 20px !important;
+}
+
+/* fix pet peeve in surveyjs */
+@media (max-width: 639px) {
+  .sd-imagepicker__item--inline {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10px;
+  }
+}

package/dist/reactive.es.js

@@ -658,21 +658,21 @@ function x0({
     /* @__PURE__ */ Pe.jsx(
       "article",
       {
-        className: `prose prose-2xl prose-slate text-xl prose-a:text-blue-600 prose-a:underline prose-h1:text-5xl prose-h1:mb-10 prose-h1:font-bold prose-p:mb-4 prose-strong:font-bold text-black leading-relaxed
-            ${m ? "animate-slideDown opacity-0" : ""}`,
+        className: `prose prose-2xl prose-slate text-xl prose-a:text-blue-600 prose-a:underline prose-h1:text-4xl prose-h1:mb-10 prose-h1:font-bold prose-p:mb-4 prose-strong:font-bold text-black leading-relaxed
+            ${m ? "animate-slide-down opacity-0" : ""}`,
         children: d
       }
     ),
     h && /* @__PURE__ */ Pe.jsx(
       "div",
       {
-        className: `mt-16 flex justify-center ${m ? "animate-fadeIn opacity-0" : ""}`,
+        className: `mt-16 flex justify-center ${m ? "animate-fade-in opacity-0" : ""}`,
         style: m ? { animationDelay: "1s" } : {},
         children: /* @__PURE__ */ Pe.jsx(
           "button",
           {
             onClick: x,
-            className: "bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none",
+            className: "bg-white cursor-pointer px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none",
             children: h
           }
         )
@@ -858,7 +858,7 @@ const D0 = ({ stream: d }) => {
       ref: h,
       width: 300,
       height: 60,
-      className: "mx-auto rounded-lg bg-white shadow-sm"
+      className: "mx-auto rounded-lg bg-white shadow-xs"
     }
   );
 }, Hh = ({
@@ -70388,7 +70388,7 @@ function J2({
         "button",
         {
           onClick: R,
-          className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors",
+          className: "px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors",
           children: "Try Again"
         }
       )