@nayhoo/ui 0.17.0 → 0.19.0

package/dist/patterns/index.mjs

@@ -1,14 +1,20 @@
+import {
+  Container
+} from "../chunk-IKDQWTMS.mjs";
 import {
   sprinkles
-} from "../chunk-Z6RQ453R.mjs";
+} from "../chunk-VMWZ4AUH.mjs";
+import "../chunk-Y6BNWBLR.mjs";
 import "../chunk-O62XWWJU.mjs";
+import "../chunk-P3OUEGR4.mjs";
 import "../chunk-KH7OG63I.mjs";
 import "../chunk-C4NLMHMQ.mjs";
+import "../chunk-P3KR7WP5.mjs";
 import "../chunk-DXKT5AFF.mjs";
-import "../chunk-Y6BNWBLR.mjs";
+import "../chunk-DOHVBMXO.mjs";
 import "../chunk-NOIOHUNH.mjs";
 import "../chunk-JGZLOTH3.mjs";
-import "../chunk-P3OUEGR4.mjs";
+import "../chunk-PUW3KNR3.mjs";
 import "../chunk-5WJ4KGIE.mjs";
 import "../chunk-WUVNL3DI.mjs";
 import "../chunk-S6KKPOPH.mjs";
@@ -16,7 +22,7 @@ import "../chunk-AXOHCT5Q.mjs";
 import "../chunk-KE7EIF6L.mjs";
 import "../chunk-JZBPCPSP.mjs";
 import "../chunk-HNVVD3WS.mjs";
-import "../chunk-DOHVBMXO.mjs";
+import "../chunk-TCGR6PEH.mjs";
 import "../chunk-P2VEMZGS.mjs";
 import "../chunk-EXKRRQYL.mjs";
 import {
@@ -32,10 +38,6 @@ import "../chunk-47YGQSLM.mjs";
 import "../chunk-6RSPMV3B.mjs";
 import "../chunk-IFN22XIN.mjs";
 import "../chunk-5ZOT2LOO.mjs";
-import {
-  Container
-} from "../chunk-IKDQWTMS.mjs";
-import "../chunk-PUW3KNR3.mjs";
 import "../chunk-UPZYS6TE.mjs";
 import "../chunk-7EGQM3ZL.mjs";
 

package/dist/patterns/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/patterns/nav.tsx"],"sourcesContent":["import { Box } from \"@/components/box\";\nimport { Container } from \"@/components/container\";\nimport { sprinkles, theme } from \"@/theme\";\nimport { useScrollPosition } from \"@nayhoo/hooks\";\n\n/** Common Nav component for Nayhoo apps */\nexport const Nav = ({\n  children,\n  variant = \"fixed\",\n  fullWidth = false,\n  compact = false,\n}: {\n  children: React.ReactNode;\n  variant?: \"fixed\" | \"sticky\";\n  fullWidth?: boolean;\n  compact?: boolean;\n}) => {\n  const scrollPosition = useScrollPosition();\n\n  const isScrolled = scrollPosition > 24;\n\n  return (\n    <Box\n      asChild\n      className={sprinkles({\n        paddingY: {\n          initial: undefined,\n          xs: isScrolled || compact ? undefined : 2,\n        },\n      })}\n      style={{\n        borderBottom: \"1px solid\",\n        borderColor:\n          isScrolled || compact ? theme.semanticColors.line : \"transparent\",\n        position: variant,\n        top: 0,\n        transition: \"border-color 0.4s, padding 0.4s\",\n        width: \"100%\",\n        zIndex: theme.zIndices[1],\n        backgroundColor: `color-mix(in srgb, ${theme.semanticColors.background}, transparent 40%)`,\n        backdropFilter: \"blur(10px)\",\n      }}\n    >\n      <nav>\n        <Container\n          size={fullWidth ? \"4\" : \"3\"}\n          style={{\n            padding: theme.space[2],\n            width: \"100%\",\n          }}\n        >\n          {children}\n        </Container>\n      </nav>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,yBAAyB;AAyC1B;AAtCD,IAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AACZ,MAKM;AACJ,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,aAAa,iBAAiB;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAO;AAAA,MACP,WAAW,UAAU;AAAA,QACnB,UAAU;AAAA,UACR,SAAS;AAAA,UACT,IAAI,cAAc,UAAU,SAAY;AAAA,QAC1C;AAAA,MACF,CAAC;AAAA,MACD,OAAO;AAAA,QACL,cAAc;AAAA,QACd,aACE,cAAc,UAAU,MAAM,eAAe,OAAO;AAAA,QACtD,UAAU;AAAA,QACV,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ,MAAM,SAAS,CAAC;AAAA,QACxB,iBAAiB,sBAAsB,MAAM,eAAe,UAAU;AAAA,QACtE,gBAAgB;AAAA,MAClB;AAAA,MAEA,8BAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,YAAY,MAAM;AAAA,UACxB,OAAO;AAAA,YACL,SAAS,MAAM,MAAM,CAAC;AAAA,YACtB,OAAO;AAAA,UACT;AAAA,UAEC;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/patterns/nav.tsx"],"sourcesContent":["import { Box } from \"@/components/box\";\nimport { Container } from \"@/components/container\";\nimport { sprinkles, theme } from \"@/theme\";\nimport { useScrollPosition } from \"@nayhoo/hooks\";\n\n/** Common Nav component for Nayhoo apps */\nexport const Nav = ({\n  children,\n  variant = \"fixed\",\n  fullWidth = false,\n  compact = false,\n}: {\n  children: React.ReactNode;\n  variant?: \"fixed\" | \"sticky\";\n  fullWidth?: boolean;\n  compact?: boolean;\n}) => {\n  const scrollPosition = useScrollPosition();\n\n  const isScrolled = scrollPosition > 24;\n\n  return (\n    <Box\n      asChild\n      className={sprinkles({\n        paddingY: {\n          initial: undefined,\n          xs: isScrolled || compact ? undefined : 2,\n        },\n      })}\n      style={{\n        borderBottom: \"1px solid\",\n        borderColor:\n          isScrolled || compact ? theme.semanticColors.line : \"transparent\",\n        position: variant,\n        top: 0,\n        transition: \"border-color 0.4s, padding 0.4s\",\n        width: \"100%\",\n        zIndex: theme.zIndices[1],\n        backgroundColor: `color-mix(in srgb, ${theme.semanticColors.background}, transparent 40%)`,\n        backdropFilter: \"blur(10px)\",\n      }}\n    >\n      <nav>\n        <Container\n          size={fullWidth ? \"4\" : \"3\"}\n          style={{\n            padding: theme.space[2],\n            width: \"100%\",\n          }}\n        >\n          {children}\n        </Container>\n      </nav>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,yBAAyB;AAyC1B;AAtCD,IAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AACZ,MAKM;AACJ,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,aAAa,iBAAiB;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAO;AAAA,MACP,WAAW,UAAU;AAAA,QACnB,UAAU;AAAA,UACR,SAAS;AAAA,UACT,IAAI,cAAc,UAAU,SAAY;AAAA,QAC1C;AAAA,MACF,CAAC;AAAA,MACD,OAAO;AAAA,QACL,cAAc;AAAA,QACd,aACE,cAAc,UAAU,MAAM,eAAe,OAAO;AAAA,QACtD,UAAU;AAAA,QACV,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ,MAAM,SAAS,CAAC;AAAA,QACxB,iBAAiB,sBAAsB,MAAM,eAAe,UAAU;AAAA,QACtE,gBAAgB;AAAA,MAClB;AAAA,MAEA,8BAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,YAAY,MAAM;AAAA,UACxB,OAAO;AAAA,YACL,SAAS,MAAM,MAAM,CAAC;AAAA,YACtB,OAAO;AAAA,UACT;AAAA,UAEC;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/text-area.css-cTlj2yii.d.mts

@@ -0,0 +1,75 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const textAreaRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        "2": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        "3": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+    };
+    error: {
+        true: {
+            boxShadow: `inset 0px 0px 0px 1px var(--${string}) !important` | `inset 0px 0px 0px 1px var(--${string}, ${string}) !important`;
+        };
+    };
+    cursor: {
+        default: {
+            cursor: "default";
+            selectors: {
+                "&:focus": {
+                    cursor: "text";
+                };
+            };
+        };
+        text: {
+            cursor: "text";
+        };
+    };
+    variant: {
+        outline: {
+            boxShadow: `inset 0px 0px 0px 1px var(--${string})` | `inset 0px 0px 0px 1px var(--${string}, ${string})`;
+        };
+        ghost: {
+            boxShadow: "none";
+        };
+    };
+}>;
+type TextAreaVariants = NonNullable<RecipeVariants<typeof textAreaRecipe>>;
+
+export { type TextAreaVariants as T, textAreaRecipe as t };

package/dist/text-area.css-cTlj2yii.d.ts

@@ -0,0 +1,75 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const textAreaRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        "2": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        "3": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+    };
+    error: {
+        true: {
+            boxShadow: `inset 0px 0px 0px 1px var(--${string}) !important` | `inset 0px 0px 0px 1px var(--${string}, ${string}) !important`;
+        };
+    };
+    cursor: {
+        default: {
+            cursor: "default";
+            selectors: {
+                "&:focus": {
+                    cursor: "text";
+                };
+            };
+        };
+        text: {
+            cursor: "text";
+        };
+    };
+    variant: {
+        outline: {
+            boxShadow: `inset 0px 0px 0px 1px var(--${string})` | `inset 0px 0px 0px 1px var(--${string}, ${string})`;
+        };
+        ghost: {
+            boxShadow: "none";
+        };
+    };
+}>;
+type TextAreaVariants = NonNullable<RecipeVariants<typeof textAreaRecipe>>;
+
+export { type TextAreaVariants as T, textAreaRecipe as t };

package/dist/theme/index.css

@@ -2415,6 +2415,102 @@
   transform: translateX(18px);
 }
 
+/* vanilla-extract-css-ns:src/theme/recipes/text-area.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7VWTW/bMAy951d4GAY0wFTE6dq07qnYpcdhOw6DQVu0rVWRDEpO0gz774Pkz6xNnCxdjDgxRb1HPVK0Li1uLANCiN2/B0L4iqkoMY7DVb4I1c0s+DUJAihLBAKVYhQorfB+EgSJJo7E1oLbIgpmtWnDjNgKlUftcKI3biTTyrIMlkI+R4FQBZKwzr4EyoVqpuvKSqEGFCVw7sH8cMMUzmYf3CNbY/IkLLNQskLkhRR5YVmqpaYooDyBi9lHf019aJA+5aQrxVsXS6BMCYTKR9JYB7H5mFdAApRlqloiiTQKLCSVBHIG47wIjdhiFKyQrEhB3k9+Ty7HZY0KvULy4r4MbQV0wZjBJSgr0s/OaNgg3kc3N47DO5XgLZ9n2fRY1ggy29LuSdaRQAlmmvANkLgwkEjkB7VIaw2MBIv1fd6tP3z+Oe2qrwCu1y6NBm0w81dYbl5BeWh+Fj3Oti6VEeLbAXFZT6jIuBlKWwZS6jVyX71aKIvEcIXKmraqjxMl02llvCLdpnDLMFoKHryf+c+xWITAmVby+UyFj2L7zsECE2oFUvAffXns5qXcdN8+O3/VOxJpqu93fa3j/LRISgkpFlpypDqag1sMN/ZLP2Gww/gIq+sBcdiRh83C/V4g4KIyLaV7EizssfPCF1GBrn91gYktGnY98EqnXU9qGo53dIZv3rmHvJsOmieTmPWwJaTIBond8aSdCF51daXIjgn1FLGitpVDZXUmpIyiTJCxzLF5JY9e9ijtvKOdj+VoPliSGFP/qnNO9gnlTI/eYtjNoLZWe/M/8Mr5SFL7AOZjSd11PUWyszK1K9Eo7VVHe/WmmfrUOaeHS3oxQMW9OXrptT9HPfXVWI52XU8R66wc7YpziNY35thS1bfcT/+l3QfvxLLUZMGd0w5FVL+GY44ZVNJ2UV3Xbb95Rzej/4Y0eC23eG7mUWDO2iHdnIjRnELj5jDQ4SzOUbxBatsQjiS8jSEvtOlXcvsiguaY8wcYbtOsWwwAAA== */
+.text-area_textAreaRecipe__1vg71n60 {
+  appearance: none;
+  border-width: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  width: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  background-color: transparent;
+  color: inherit;
+  font-variant-numeric: tabular-nums;
+  resize: vertical;
+}
+.text-area_textAreaRecipe__1vg71n60:hover {
+  background-color: var(--semanticColors-transparentHover__19nbe8d2ff);
+}
+.text-area_textAreaRecipe__1vg71n60::after {
+  box-sizing: border-box;
+}
+.text-area_textAreaRecipe__1vg71n60::before {
+  box-sizing: border-box;
+}
+.text-area_textAreaRecipe__1vg71n60:disabled {
+  background-color: var(--colors-slate-slate2__19nbe8d1yj);
+  box-shadow: inset 0 0 0 1px var(--colors-slateA-slateA7__19nbe8d1z0);
+  color: var(--colors-slate-slate8__19nbe8d1yp);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.text-area_textAreaRecipe__1vg71n60:focus {
+  outline: 1px solid #000000;
+}
+.text-area_textAreaRecipe__1vg71n60:read-only {
+  background-color: var(--colors-slate-slate2__19nbe8d1yj);
+}
+.text-area_textAreaRecipe__1vg71n60[data-invalid] {
+  box-shadow: inset 0px 0px 0px 1px var(--semanticColors-error-error9__19nbe8d2e2);
+}
+.text-area_textAreaRecipe__1vg71n60[data-placeholder] {
+  color: var(--semanticColors-textPlaceholder__19nbe8d2fd);
+}
+.text-area_textAreaRecipe_size_1__1vg71n61 {
+  border-radius: var(--radii-1__19nbe8d2gh);
+  height: var(--sizes-5__19nbe8d2gc);
+  font-size: var(--fontSizes-1__19nbe8d9);
+  padding-left: var(--space-2__19nbe8d1);
+  padding-right: var(--space-2__19nbe8d1);
+  line-height: var(--sizes-5__19nbe8d2gc);
+}
+.text-area_textAreaRecipe_size_1__1vg71n61:-webkit-autofill::first-line {
+  font-size: var(--fontSizes-1__19nbe8d9);
+}
+.text-area_textAreaRecipe_size_2__1vg71n62 {
+  border-radius: var(--radii-2__19nbe8d2gi);
+  font-size: var(--fontSizes-3__19nbe8db);
+  line-height: var(--lineHeights-6__19nbe8d2fv);
+  height: var(--sizes-6__19nbe8d2gd);
+  padding-left: var(--space-3__19nbe8d2);
+  padding-right: var(--space-3__19nbe8d2);
+}
+.text-area_textAreaRecipe_size_2__1vg71n62:-webkit-autofill::first-line {
+  font-size: var(--fontSizes-3__19nbe8db);
+}
+.text-area_textAreaRecipe_size_3__1vg71n63 {
+  border-radius: var(--radii-2__19nbe8d2gi);
+  font-size: var(--fontSizes-4__19nbe8dc);
+  line-height: var(--sizes-7__19nbe8d2ge);
+  height: var(--sizes-7__19nbe8d2ge);
+  padding-left: var(--space-4__19nbe8d3);
+  padding-right: var(--space-4__19nbe8d3);
+}
+.text-area_textAreaRecipe_size_3__1vg71n63:-webkit-autofill::first-line {
+  font-size: var(--fontSizes-4__19nbe8dc);
+}
+.text-area_textAreaRecipe_error_true__1vg71n64 {
+  box-shadow: inset 0px 0px 0px 1px var(--semanticColors-error-error9__19nbe8d2e2) !important;
+}
+.text-area_textAreaRecipe_cursor_default__1vg71n65 {
+  cursor: default;
+}
+.text-area_textAreaRecipe_cursor_default__1vg71n65:focus {
+  cursor: text;
+}
+.text-area_textAreaRecipe_cursor_text__1vg71n66 {
+  cursor: text;
+}
+.text-area_textAreaRecipe_variant_outline__1vg71n67 {
+  box-shadow: inset 0px 0px 0px 1px var(--semanticColors-line__19nbe8d2fe);
+}
+.text-area_textAreaRecipe_variant_ghost__1vg71n68 {
+  box-shadow: none;
+}
+
 /* vanilla-extract-css-ns:src/theme/recipes/text-field.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7VW247TMBB971cEIaSthFdpy96yTwgJ7SOCR4SiSTxJzLp2ZDttt4h/R3biXNhtk9KlUdN0PD5nfGY88aXBnSEZQ05j+/jZPn3FlJUYxyws6BbC4NcsCKAsERSIFKNASIH3syBIpKKoyJZRU0RBWJt2RLM9E3nkhxO5syOZFIZksGb8KQqYKFAxY+1rUDkTzXRZGc5Ej6IESh2YG26YFmH4zv4lW0wemSEGSlKwvOAsLwxJJZcqClSewEX43l1zFxqkj7mSlaDexSgQugSFwkXSWHuxuZg3oBgIQ0S1RsXSKDCQVByUNej72e/Z5QQNo0JuUDkln8exAXVBiMY1CMPST9aoSS+4Bzs3jhd3IsFbusyy+WTaCDLjeQ+kZipSgplU+BpQlGlIONKjcqS1DJqDwfq+bCVYPP2ct9VWAJVbmzaNJgjdtSh3L6B8bH5uOpx9XRojxLc94rKeUCltZwhpCHAut0hdtUomDCqCGxRG+yqeqEom00o7SdpdYNehJWc0eBu6z2QwhUCJFPzpTI2n0X2nYIAwsQHO6I+uRIapKXftt0vQX1WPSklV3++6isfliaGUHFIsJKeo6nCO7jTcmS/dhN5Go6O0mu0xXnj2RbN0tyMUUFZpz2n/MbLowPPCVVKBtmm1kbE9anLV80rnbSOyg97RGr455w7ybt7rmIRj1sGWkCLp5XbgqQYRvOhqy5FMCfUktSLfwKEyMmOcR1HGlDbE0jkpJ697Au/S8y7HsrTsLYqN6b9qnZNDUlnTg7Noct0rr83BCuh55XQkrV0Ay7G0Dl1P0uysXA01msC78ryrV83Vh9Y5PV7WNz1UPJil516Hs9RRr8ayNHQ9Sa2zsjRU5ziv69CxUVXbeT/8l7YfvGHrUioD9oh2PKT6nRxTzKDixod1Vbf/5n3dDP4jVO8V7QHtzIlo1uyhrk8GaU6hcXM28EA356heA7XtCEez7oPIC6nbtdw+C6E59vwBDpIHZFwMAAA= */
 .text-field_textFieldRecipe__i0hdwa0 {
   appearance: none;
@@ -3996,6 +4092,85 @@
   }
 }
 
+/* vanilla-extract-css-ns:src/theme/styles/accordion.css.ts.vanilla.css?source=#H4sIAAAAAAAAA61Vy27bMBC8+ysWOSVAGEh20rgMCgRID+m56akoDEpcSdtQpEDSzyL/XpCyZDWxU7voSYTs2Zkdzq7un3FdWFGjA5HnxkoyeuYUSfxslno2S28Xcr0QE/g1AiisqeMBoEIqK88huRsBvIwAvHn1y0LYc8askLRifWmWG+1Re9b+66JFv4zuD8r41vQirg+JOIFqj9CkE3G1o96dOvIkojJjJdpINXdDYmLj2Sz9qDOcynFJkW1J0lccJknSrO4O1P/ise450shRC1uSZt40HNKABDALtIUySw4VSYn6uGq8IOs8yytScqjem4YpLPzeNtJBG1VsY4CywbEjYcM2kiMFK7FPb2a8N/U/SN4Cj1d9nKsmnzu2JF+RjjIb48iT0RwsKuFpgUHDhpGWuOKQvqqbV7iwg2SNYxFvhe7KxHNhbB2yUzvI5xnlLMMNoT1Prqa3l5BcQnKVTi4hjbK/S+EFc154/GQa1D/gOMJAwsGaADxPp4nE8qAND+089WVu2nE02jNHG+ycDS++0gYdm/TuZhenpPgN0bC7s9De2Y/ILTTVorXs/eV1rI2nq8mVcSj/quePLfYf1DzhaqfoQ5tCISXpkkN606xg/M7OeUQh0fbw21a7Uhzm2qEPVyXJNUqsORQKD9Z5slSWg0LTPYWEolIz8lg7DjlqjzYOqMifS2vmWrLcKGO3mW+ERe3bCV4xVwkZ0pKENQjJNl8Oa6E95Q8B55gijbspLvBij3yIzziJ28AWoia15kC6Qkv+7rQgd1+O65t2Pf+cO0/FuvvicHCNyJFl6JcYYg4QVLIOFmX015W8e1dvPOZVGKN2Pb4xca9DA2cfA3bgVhFy9hvpHNAJAwgAAA== */
+@keyframes accordion_slideDown__17vdyva3 {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes accordion_slideUp__17vdyva4 {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.accordion_accordion__17vdyva0 {
+  border-radius: var(--radii-2__19nbe8d2gi);
+  width: 300px;
+}
+.accordion_accordionItem__17vdyva1 {
+  margin-top: 1px;
+  overflow: hidden;
+}
+.accordion_accordionItem__17vdyva1:first-child {
+  border-top-left-radius: var(--radii-1__19nbe8d2gh);
+  border-top-right-radius: var(--radii-1__19nbe8d2gh);
+  margin-top: 0;
+}
+.accordion_accordionItem__17vdyva1:last-child {
+  border-bottom-left-radius: var(--radii-1__19nbe8d2gh);
+  border-bottom-right-radius: var(--radii-1__19nbe8d2gh);
+}
+.accordion_accordionItem__17vdyva1:focus-within {
+  position: relative;
+  z-index: 1;
+}
+.accordion_chevron__17vdyva2 {
+  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+[data-state=open] .accordion_chevron__17vdyva2 {
+  transform: rotate(180deg);
+}
+.accordion_accordionContent__17vdyva5 {
+  font-size: var(--fontSizes-3__19nbe8db);
+  overflow: hidden;
+}
+.accordion_accordionContent__17vdyva5[data-state=open] {
+  animation: accordion_slideDown__17vdyva3 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.accordion_accordionContent__17vdyva5[data-state=closed] {
+  animation: accordion_slideUp__17vdyva4 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.accordion_accordionContentText__17vdyva6 {
+  padding: 15px 20px;
+}
+.accordion_accordionHeader__17vdyva7 {
+  all: unset;
+  display: flex;
+}
+.accordion_accordionTrigger__17vdyva8 {
+  all: unset;
+  align-items: center;
+  background-color: transparent;
+  box-shadow: 0 1px 0 var(--semanticColors-line__19nbe8d2fe);
+  display: flex;
+  flex: 1;
+  font-family: inherit;
+  font-size: var(--fontSizes-3__19nbe8db);
+  height: 45px;
+  justify-content: space-between;
+  line-height: 1;
+  padding: 0 20px;
+}
+.accordion_accordionTrigger__17vdyva8:hover {
+  background-color: var(--semanticColors-transparentHover__19nbe8d2ff);
+}
+
 /* vanilla-extract-css-ns:src/theme/styles/avatar.css.ts.vanilla.css?source=LmF2YXRhcl9hdmF0YXJJbWFnZV9fbjljc3VjMCB7CiAgZGlzcGxheTogZmxleDsKICBvYmplY3QtZml0OiBjb3ZlcjsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGhlaWdodDogMTAwJTsKICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOwogIHdpZHRoOiAxMDAlOwp9 */
 .avatar_avatarImage__n9csuc0 {
   display: flex;