@nayhoo/ui 0.14.1 → 0.16.0

package/dist/components/dialog.mjs

@@ -0,0 +1,129 @@
+import {
+  dialogContentRecipe,
+  dialogDescription,
+  dialogFooter,
+  dialogHeader,
+  dialogOverlayRecipe,
+  dialogTitle
+} from "../chunk-Z6RQ453R.mjs";
+import "../chunk-KH7OG63I.mjs";
+import "../chunk-C4NLMHMQ.mjs";
+import "../chunk-DXKT5AFF.mjs";
+import "../chunk-Y6BNWBLR.mjs";
+import "../chunk-JMSIWH37.mjs";
+import "../chunk-NOIOHUNH.mjs";
+import "../chunk-JGZLOTH3.mjs";
+import "../chunk-HGLO5LDS.mjs";
+import "../chunk-P3OUEGR4.mjs";
+import "../chunk-5WJ4KGIE.mjs";
+import "../chunk-WUVNL3DI.mjs";
+import {
+  Flex
+} from "../chunk-M7HASIMW.mjs";
+import "../chunk-S6KKPOPH.mjs";
+import "../chunk-AXOHCT5Q.mjs";
+import "../chunk-KE7EIF6L.mjs";
+import "../chunk-JZBPCPSP.mjs";
+import "../chunk-HNVVD3WS.mjs";
+import "../chunk-DOHVBMXO.mjs";
+import "../chunk-P2VEMZGS.mjs";
+import "../chunk-EXKRRQYL.mjs";
+import {
+  theme
+} from "../chunk-N535ABFC.mjs";
+import "../chunk-GHCXVMQR.mjs";
+import {
+  Box
+} from "../chunk-LSB5JVS2.mjs";
+import "../chunk-OI24WXH6.mjs";
+import "../chunk-4A7WL3BM.mjs";
+import "../chunk-47YGQSLM.mjs";
+import "../chunk-6RSPMV3B.mjs";
+import "../chunk-IFN22XIN.mjs";
+import "../chunk-5ZOT2LOO.mjs";
+import "../chunk-PUW3KNR3.mjs";
+import {
+  extractVariantsFromProps
+} from "../chunk-UPZYS6TE.mjs";
+import {
+  mergeClasses
+} from "../chunk-7EGQM3ZL.mjs";
+
+// src/components/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogClose = DialogPrimitive.Close;
+var DialogContent = ({
+  children,
+  components,
+  disableOverlayBlur = false,
+  ...props
+}) => {
+  const dialogOverlay = dialogOverlayRecipe({ disableOverlayBlur });
+  const [variants, rest] = extractVariantsFromProps(
+    props,
+    ...dialogContentRecipe.variants()
+  );
+  const dialogContent = dialogContentRecipe(variants);
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: dialogOverlay }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ...rest,
+        className: mergeClasses(dialogContent, rest.className),
+        children: [
+          components?.Header,
+          /* @__PURE__ */ jsx(Box, { style: { padding: theme.space[5] }, children }),
+          components?.Footer
+        ]
+      }
+    )
+  ] });
+};
+var DialogDescription = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      ...props,
+      className: mergeClasses(dialogDescription, props.className)
+    }
+  );
+};
+var DialogFooter = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      className: dialogFooter,
+      direction: { initial: "column", sm: "row" },
+      gap: "2",
+      justify: "end",
+      children
+    }
+  );
+};
+var DialogHeader = ({ children }) => {
+  return /* @__PURE__ */ jsx(Flex, { className: dialogHeader, children });
+};
+var DialogTitle = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      ...props,
+      className: mergeClasses(dialogTitle, props.className)
+    }
+  );
+};
+var DialogTrigger = DialogPrimitive.Trigger;
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+};
+//# sourceMappingURL=dialog.mjs.map

package/dist/components/dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Box } from \"@/components/box\";\nimport { Flex } from \"@/components/flex\";\nimport { theme } from \"@/theme\";\nimport {\n  DialogContentVariants,\n  dialogContentRecipe,\n  dialogOverlayRecipe,\n} from \"@/theme/recipes/dialog.css\";\nimport {\n  dialogDescription,\n  dialogFooter,\n  dialogHeader,\n  dialogTitle,\n} from \"@/theme/styles/dialog.css\";\nimport { extractVariantsFromProps, mergeClasses } from \"@/utils\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\n\nexport type DialogProps = DialogPrimitive.DialogProps;\n\n/**\n * @see https://github.com/nayhoo/ui/blob/main/apps/react-cosmos/src/dialog.fixture.tsx\n */\nexport const Dialog = DialogPrimitive.Root;\n\nexport type DialogCloseProps = DialogPrimitive.DialogCloseProps;\n\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogContentProps = DialogPrimitive.DialogContentProps &\n  DialogContentVariants & {\n    components?: { Footer?: React.ReactNode; Header?: React.ReactNode };\n    disableOverlayBlur?: boolean;\n  };\n\nexport const DialogContent = ({\n  children,\n  components,\n  disableOverlayBlur = false,\n  ...props\n}: DialogContentProps) => {\n  const dialogOverlay = dialogOverlayRecipe({ disableOverlayBlur });\n  const [variants, rest] = extractVariantsFromProps(\n    props,\n    ...dialogContentRecipe.variants(),\n  );\n  const dialogContent = dialogContentRecipe(variants);\n\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay className={dialogOverlay} />\n      <DialogPrimitive.Content\n        {...rest}\n        className={mergeClasses(dialogContent, rest.className)}\n      >\n        {components?.Header}\n\n        <Box style={{ padding: theme.space[5] }}>{children}</Box>\n\n        {components?.Footer}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n};\n\nexport type DialogDescriptionProps = DialogPrimitive.DialogDescriptionProps;\n\nexport const DialogDescription = ({ ...props }: DialogDescriptionProps) => {\n  return (\n    <DialogPrimitive.Description\n      {...props}\n      className={mergeClasses(dialogDescription, props.className)}\n    />\n  );\n};\n\nexport type DialogFooterProps = { children: React.ReactNode };\n\nexport const DialogFooter = ({ children }: DialogFooterProps) => {\n  return (\n    <Flex\n      className={dialogFooter}\n      direction={{ initial: \"column\", sm: \"row\" }}\n      gap=\"2\"\n      justify=\"end\"\n    >\n      {children}\n    </Flex>\n  );\n};\n\nexport type DialogHeaderProps = { children: React.ReactNode };\n\nexport const DialogHeader = ({ children }: DialogHeaderProps) => {\n  return <Flex className={dialogHeader}>{children}</Flex>;\n};\n\nexport type DialogTitleProps = DialogPrimitive.DialogTitleProps;\n\nexport const DialogTitle = ({ ...props }: DialogTitleProps) => {\n  return (\n    <DialogPrimitive.Title\n      {...props}\n      className={mergeClasses(dialogTitle, props.className)}\n    />\n  );\n};\n\nexport type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;\n\nexport const DialogTrigger = DialogPrimitive.Trigger;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,YAAY,qBAAqB;AAkC3B,cACA,YADA;AA3BC,IAAM,SAAyB;AAI/B,IAAM,cAA8B;AAQpC,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,GAAG;AACL,MAA0B;AACxB,QAAM,gBAAgB,oBAAoB,EAAE,mBAAmB,CAAC;AAChE,QAAM,CAAC,UAAU,IAAI,IAAI;AAAA,IACvB;AAAA,IACA,GAAG,oBAAoB,SAAS;AAAA,EAClC;AACA,QAAM,gBAAgB,oBAAoB,QAAQ;AAElD,SACE,qBAAiB,wBAAhB,EACC;AAAA,wBAAiB,yBAAhB,EAAwB,WAAW,eAAe;AAAA,IACnD;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,aAAa,eAAe,KAAK,SAAS;AAAA,QAEpD;AAAA,sBAAY;AAAA,UAEb,oBAAC,OAAI,OAAO,EAAE,SAAS,MAAM,MAAM,CAAC,EAAE,GAAI,UAAS;AAAA,UAElD,YAAY;AAAA;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAIO,IAAM,oBAAoB,CAAC,EAAE,GAAG,MAAM,MAA8B;AACzE,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,aAAa,mBAAmB,MAAM,SAAS;AAAA;AAAA,EAC5D;AAEJ;AAIO,IAAM,eAAe,CAAC,EAAE,SAAS,MAAyB;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,WAAW,EAAE,SAAS,UAAU,IAAI,MAAM;AAAA,MAC1C,KAAI;AAAA,MACJ,SAAQ;AAAA,MAEP;AAAA;AAAA,EACH;AAEJ;AAIO,IAAM,eAAe,CAAC,EAAE,SAAS,MAAyB;AAC/D,SAAO,oBAAC,QAAK,WAAW,cAAe,UAAS;AAClD;AAIO,IAAM,cAAc,CAAC,EAAE,GAAG,MAAM,MAAwB;AAC7D,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,aAAa,aAAa,MAAM,SAAS;AAAA;AAAA,EACtD;AAEJ;AAIO,IAAM,gBAAgC;","names":[]}

package/dist/components/image.css

@@ -0,0 +1,6 @@
+/* vanilla-extract-css-ns:src/theme/styles/image.css.ts.vanilla.css?source=LmltYWdlX2ltYWdlX18xZThubXhkMCB7CiAgbWF4LXdpZHRoOiAxMDAlOwogIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7Cn0= */
+.image_image__1e8nmxd0 {
+  max-width: 100%;
+  vertical-align: middle;
+}
+/*# sourceMappingURL=image.css.map */

package/dist/components/image.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["vanilla-extract-css-ns:src/theme/styles/image.css.ts.vanilla.css?source=LmltYWdlX2ltYWdlX18xZThubXhkMCB7CiAgbWF4LXdpZHRoOiAxMDAlOwogIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7Cn0="],"sourcesContent":[".image_image__1e8nmxd0 {\n  max-width: 100%;\n  vertical-align: middle;\n}"],"mappings":";AAAA,CAAC;AACC,aAAW;AACX,kBAAgB;AAClB;","names":[]}

package/dist/components/image.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as ComponentProps } from '../component-props-BHzinuRX.mjs';
+
+declare const defaultElement = "img";
+type ImageProps = ComponentProps<typeof defaultElement>;
+/**
+ * @see https://github.com/nayhoo/ui/blob/main/apps/storybook/src/components/Image.stories.tsx
+ */
+declare const Image: ({ asChild, ...props }: ImageProps) => react_jsx_runtime.JSX.Element;
+
+export { Image, type ImageProps };

package/dist/components/image.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as ComponentProps } from '../component-props-BHzinuRX.js';
+
+declare const defaultElement = "img";
+type ImageProps = ComponentProps<typeof defaultElement>;
+/**
+ * @see https://github.com/nayhoo/ui/blob/main/apps/storybook/src/components/Image.stories.tsx
+ */
+declare const Image: ({ asChild, ...props }: ImageProps) => react_jsx_runtime.JSX.Element;
+
+export { Image, type ImageProps };

package/dist/components/image.js

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/image.tsx
+var image_exports = {};
+__export(image_exports, {
+  Image: () => Image
+});
+module.exports = __toCommonJS(image_exports);
+
+// src/theme/styles/image.css.ts
+var image = "image_image__1e8nmxd0";
+
+// src/utils/merge-classes.ts
+function mergeClasses(...classes) {
+  return classes.filter((cls) => Boolean(cls)).join(" ");
+}
+
+// src/components/image.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultElement = "img";
+var Image = ({ asChild, ...props }) => {
+  const Comp = asChild ? import_react_slot.Slot : defaultElement;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...props, className: mergeClasses(image, props.className), children: props.children });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Image
+});
+//# sourceMappingURL=image.js.map

package/dist/components/image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/image.tsx","../../src/theme/styles/image.css.ts","../../src/utils/merge-classes.ts"],"sourcesContent":["import { image } from \"@/theme/styles/image.css\";\nimport { ComponentProps } from \"@/types/component-props\";\nimport { mergeClasses } from \"@/utils/merge-classes\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nconst defaultElement = \"img\";\n\nexport type ImageProps = ComponentProps<typeof defaultElement>;\n\n/**\n * @see https://github.com/nayhoo/ui/blob/main/apps/storybook/src/components/Image.stories.tsx\n */\nexport const Image = ({ asChild, ...props }: ImageProps) => {\n  const Comp = asChild ? Slot : defaultElement;\n\n  return (\n    <Comp {...props} className={mergeClasses(image, props.className)}>\n      {props.children}\n    </Comp>\n  );\n};\n","import 'src/theme/styles/image.css.ts.vanilla.css?source=LmltYWdlX2ltYWdlX18xZThubXhkMCB7CiAgbWF4LXdpZHRoOiAxMDAlOwogIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7Cn0=';\nexport var image = 'image_image__1e8nmxd0';","export function mergeClasses(...classes: (string | undefined)[]): string {\n  return classes.filter((cls): cls is string => Boolean(cls)).join(\" \");\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCO,IAAI,QAAQ;;;ACDZ,SAAS,gBAAgB,SAAyC;AACvE,SAAO,QAAQ,OAAO,CAAC,QAAuB,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG;AACtE;;;AFCA,wBAAqB;AAajB;AAXJ,IAAM,iBAAiB;AAOhB,IAAM,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,MAAkB;AAC1D,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE,4CAAC,QAAM,GAAG,OAAO,WAAW,aAAa,OAAO,MAAM,SAAS,GAC5D,gBAAM,UACT;AAEJ;","names":[]}

package/dist/components/image.mjs

@@ -0,0 +1,19 @@
+import {
+  image
+} from "../chunk-DOHVBMXO.mjs";
+import {
+  mergeClasses
+} from "../chunk-7EGQM3ZL.mjs";
+
+// src/components/image.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var defaultElement = "img";
+var Image = ({ asChild, ...props }) => {
+  const Comp = asChild ? Slot : defaultElement;
+  return /* @__PURE__ */ jsx(Comp, { ...props, className: mergeClasses(image, props.className), children: props.children });
+};
+export {
+  Image
+};
+//# sourceMappingURL=image.mjs.map

package/dist/components/image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/image.tsx"],"sourcesContent":["import { image } from \"@/theme/styles/image.css\";\nimport { ComponentProps } from \"@/types/component-props\";\nimport { mergeClasses } from \"@/utils/merge-classes\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nconst defaultElement = \"img\";\n\nexport type ImageProps = ComponentProps<typeof defaultElement>;\n\n/**\n * @see https://github.com/nayhoo/ui/blob/main/apps/storybook/src/components/Image.stories.tsx\n */\nexport const Image = ({ asChild, ...props }: ImageProps) => {\n  const Comp = asChild ? Slot : defaultElement;\n\n  return (\n    <Comp {...props} className={mergeClasses(image, props.className)}>\n      {props.children}\n    </Comp>\n  );\n};\n"],"mappings":";;;;;;;;AAGA,SAAS,YAAY;AAajB;AAXJ,IAAM,iBAAiB;AAOhB,IAAM,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,MAAkB;AAC1D,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE,oBAAC,QAAM,GAAG,OAAO,WAAW,aAAa,OAAO,MAAM,SAAS,GAC5D,gBAAM,UACT;AAEJ;","names":[]}

package/dist/components/select.mjs

@@ -1,9 +1,3 @@
-import {
-  Button
-} from "../chunk-ZSB4NTM3.mjs";
-import "../chunk-4A7WL3BM.mjs";
-import "../chunk-67WEB6LY.mjs";
-import "../chunk-47YGQSLM.mjs";
 import {
   menu,
   menuItem,
@@ -13,6 +7,12 @@ import {
 import {
   panel
 } from "../chunk-WUVNL3DI.mjs";
+import {
+  Button
+} from "../chunk-ZSB4NTM3.mjs";
+import "../chunk-4A7WL3BM.mjs";
+import "../chunk-67WEB6LY.mjs";
+import "../chunk-47YGQSLM.mjs";
 import "../chunk-IFN22XIN.mjs";
 import "../chunk-UPZYS6TE.mjs";
 import {

package/dist/dialog.css-noIN2HKB.d.mts

@@ -0,0 +1,35 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const dialogContentRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    fullWidth: {
+        true: {
+            width: "100%";
+        };
+    };
+    size: {
+        "1": {
+            maxWidth: "430px";
+        };
+        "2": {
+            maxWidth: "715px";
+        };
+        "3": {
+            maxWidth: "1145px";
+        };
+        "4": {
+            maxWidth: "none";
+        };
+    };
+}>;
+type DialogContentVariants = RecipeVariants<typeof dialogContentRecipe>;
+declare const dialogOverlayRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    disableOverlayBlur: {
+        true: {
+            backdropFilter: "blur(0px)";
+        };
+    };
+}>;
+type DialogOverlayVariants = RecipeVariants<typeof dialogOverlayRecipe>;
+
+export { type DialogContentVariants as D, dialogOverlayRecipe as a, type DialogOverlayVariants as b, dialogContentRecipe as d };

package/dist/dialog.css-noIN2HKB.d.ts

@@ -0,0 +1,35 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const dialogContentRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    fullWidth: {
+        true: {
+            width: "100%";
+        };
+    };
+    size: {
+        "1": {
+            maxWidth: "430px";
+        };
+        "2": {
+            maxWidth: "715px";
+        };
+        "3": {
+            maxWidth: "1145px";
+        };
+        "4": {
+            maxWidth: "none";
+        };
+    };
+}>;
+type DialogContentVariants = RecipeVariants<typeof dialogContentRecipe>;
+declare const dialogOverlayRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    disableOverlayBlur: {
+        true: {
+            backdropFilter: "blur(0px)";
+        };
+    };
+}>;
+type DialogOverlayVariants = RecipeVariants<typeof dialogOverlayRecipe>;
+
+export { type DialogContentVariants as D, dialogOverlayRecipe as a, type DialogOverlayVariants as b, dialogContentRecipe as d };

package/dist/providers/index.mjs

@@ -10,15 +10,15 @@ import {
   toastInner,
   toastRoot,
   toastViewport
-} from "../chunk-JCN2TBLD.mjs";
+} from "../chunk-JMSIWH37.mjs";
 import {
   Heading
 } from "../chunk-QKJFDJJP.mjs";
+import "../chunk-JZBPCPSP.mjs";
 import {
   IconButton
 } from "../chunk-OZ2DHFQP.mjs";
 import "../chunk-HNVVD3WS.mjs";
-import "../chunk-JZBPCPSP.mjs";
 import {
   Button
 } from "../chunk-ZSB4NTM3.mjs";

package/dist/theme/index.css

@@ -461,6 +461,61 @@
   max-width: none;
 }
 
+/* vanilla-extract-css-ns:src/theme/styles/panel.css.ts.vanilla.css?source=LnBhbmVsX3BhbmVsX19naDlzdXowIHsKICBjb2xvcjogdmFyKC0tc2VtYW50aWNDb2xvcnMtc3VyZmFjZVRleHRDb250cmFzdF9fMTluYmU4ZDJmOSk7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2VtYW50aWNDb2xvcnMtc3VyZmFjZV9fMTluYmU4ZDJmOCk7CiAgYm9yZGVyLXJhZGl1czogdmFyKC0tcmFkaWktM19fMTluYmU4ZDJnaik7CiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHZhcigtLXNlbWFudGljQ29sb3JzLWxpbmVfXzE5bmJlOGQyZmUpOwp9 */
+.panel_panel__gh9suz0 {
+  color: var(--semanticColors-surfaceTextContrast__19nbe8d2f9);
+  background-color: var(--semanticColors-surface__19nbe8d2f8);
+  border-radius: var(--radii-3__19nbe8d2gj);
+  box-shadow: inset 0 0 0 1px var(--semanticColors-line__19nbe8d2fe);
+}
+
+/* vanilla-extract-css-ns:src/theme/recipes/dialog.css.ts.vanilla.css?source=#H4sIAAAAAAAAA42Tz46bMBCH73kKX1ZKpHhlkpDd9d66D1Cplx6RwQNM13iQbRLaat+9MrCkZf80F2xGns/2j49bjcpQlY3DE9kANnyDAlvIsgRS/HG0gv1eMZaT0+AkS9qeeTKo2Um5NeceGmUDFk9kyHlu0MbOB5vDvd6VsHkcenvua6XpLJklC7FmoAySpeImvjTKVWh5oFYynp7qsdbzGrCqg2T3rzW0/Iw61JLthGj7WKMTuNJEtOoCxUpLHgOSlazEHnQsDeRps+CU9SW5Ro5TowKseSputiw+hxOf0Rhe1MpWIC8Nj6uX1e01icmSis4PuVEXYiavF/8cUHbGfI/3y4LrLrxkIE0XT0S8xuccj78gS+b+3dAfA50Yh/0Q3hWQ3QzZLyF3SXolZD9DDktIkhyupRxmSrqkvJ/t1xM4o34uPs5x1FkVz5WjzmpeRHMlGwbeYL9Gy7yr8u37hl86//L8uNmOmrTKgQ3sMHmUUwjUSCYuyosPFHWj6mLWdZjF3bSjlpdoQvz/ctO5dSLafjO7PJEWS6MojWdRPuXeOL1Y/L/wNHqVG5iKX0zn/jX0bg717WHHs778Ab8WluVrBAAA */
+.dialog_dialogContentRecipe__1e5ij6n0 {
+  border: 1px solid var(--semanticColors-line__19nbe8d2fe);
+  box-shadow: none;
+  left: 50%;
+  margin-top: -5vh;
+  max-height: 85vh;
+  min-width: 200px;
+  overflow: auto;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  will-change: transform;
+}
+.dialog_dialogContentRecipe__1e5ij6n0:focus {
+  outline: none;
+}
+.dialog_dialogContentRecipe_fullWidth_true__1e5ij6n1 {
+  width: 100%;
+}
+.dialog_dialogContentRecipe_size_1__1e5ij6n2 {
+  max-width: 430px;
+}
+.dialog_dialogContentRecipe_size_2__1e5ij6n3 {
+  max-width: 715px;
+}
+.dialog_dialogContentRecipe_size_3__1e5ij6n4 {
+  max-width: 1145px;
+}
+.dialog_dialogContentRecipe_size_4__1e5ij6n5 {
+  max-width: none;
+}
+.dialog_dialogOverlayRecipe__1e5ij6n6 {
+  background-color: color-mix(in srgb, var(--semanticColors-background__19nbe8d2f6), transparent 40%);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  backdrop-filter: blur(10px);
+  transition: backdrop-filter 100ms linear;
+  will-change: backdrop-filter;
+}
+.dialog_dialogOverlayRecipe_disableOverlayBlur_true__1e5ij6n7 {
+  backdrop-filter: blur(0px);
+}
+
 /* vanilla-extract-css-ns:src/theme/recipes/flex.css.ts.vanilla.css?source=#H4sIAAAAAAAAA63ZzXLiOBQF4H2ewsvuBV1IMn/pTT/DbGaZMkgYJ5JNLCeYTPW7T9mALF1JBt/KKov4HASI+1VJv/ZStC8vZM22Z/o2T/57SpJt1c508VWU+XOyrWou6tm2an8/JQkv9FFm5+ekS/1++vv0q49nssjLF91kdWOqSF/V/2dWNELpS2jWPwWjO1E2ojZZ6mcvT8CcKLkJscgLipL7K61FszuYaOpHr4/A5DbTQhalMNGFH709M2R5UYtdU1TlS12dTHTZR/s1mgeek7o6hYK7Sn6o0mRXwezlocjr/iM+Ra2Hla9jLz+rL0/GlwGrNiOr8dvy7PhCTDbrs3l2fE4+s/rHbKaP2U7Mugc25Vas+fynG6Umug1HqYkSEGUmugtHmYlSEE1NlIejqYkyEF2YqAhHFyaagujSRPfh6NJEFyC6MtE8HF2Z6BJE1yZ6CEfXJroC0Y2JFuHoxkTXVvT1QzfF/gxGyGtfcf3fbFeVjSib8Bi5FYBB8hZugMPklrbHiRx5cWek3MJb0ZyEGH6iKlxw+RiuDw8tpzo7vpTVv92fW0M5/Ky6fz8nZdX9BaGTHalgJBKAv+BjKGf/dP8owYss0btaiDLJSp78UEU5OxW8OTwnCzo/tj/7Dntathp8o+/9IyMsJMlfvwN8qXWo5PaVBgvs71VHl9B/q8E89KIJdRgxghUeHB+hjoEOu2QYv612BPm8dgQNiTYASk6RkhsmYyuB26iNL2jYTHcWBjvPo+sL13ajqNWWMl/XkjvOBDoGbsg8VuKKEygZ4CEkVuLaEygZCCI0VuIqFCgZMCIsVuJ6FCgZWCJprMSVKVAyAEUWsRLXqEDJQBVZxkpcrQIlA1pkFStx3bJLbvPfG3ZkfS0bFSxSBWYe2cS6QoPP6rFHH8lGF+TNP6sG4ka2sSrgm93X69NqyBzZ2b9wV7pQ3AGPcD88HoXzhYhwgztZ7gm4Wq5DAmoFN8V+OoFaedshn2agVu5GOExFsH8fLoKkmKigVr6C5BXDoFYOg+RtuoPdZ+o6SCQKwstavE2l8BKapXmlJZJCrSwKSYWzUCvbwiPOQq1sC99xFmplW1jjLNTKtlDjLNTKtrDBWaiVbeEHzkKtbAs/cRZqZVt4wlvoj70Wa2Fg+J0xFsIR+IWzsBtiwEI6x1qoFbSQkgkWauVaSOnDFl6jcMJQ9h0WkjlNQxgqDnYFTadjqLh3WriYhqHizk6gy6kY9u/DxZCuJmKouI8hXWMwVNzBkG6mY9h9pi6GNENheFmLt6u2eAzN0rzSHRJDxS0MKcdhqLiFIRU4DBW3MKR7HIaKWxjSHIeh4haG9IDDUHELQ1rgMFTcwpC+4jBU3MKQvuEwVNzCkEo8hv7YU1gMA8OvxGAIR2CFw7AbYhDDIxZDxT0M3ydgqDjAsH4Yw2vUmzD6WzCk6+DZqMzhrgieKo5jKHNvPwTPFeMYytzdCZ9TMezfB8DwNBFDmQcwbDEYytzFMHZ4OIJh95kCDL9QGF7WAncVm+MxNEvzSgkSQ5lbGLLoseI4hjK3MGTRY8VxDGVuYciix4rjGMrcwpBFjxXHMZS5hSGLHiuOYyhzC0MWPVYcx1DmFoZsjcNQ5haGbIPDUOYWhizDY+iNPRY9SbyHoT/82A6DIRiBjOMw7IYYwJAJLIYyhxiy/QQMZe5iyPKHMbxGvQlz+BYMl2n4olDCXRE8XBzHsJXefgieLo5cFUp3J7xNxbB/Hy6GTE7EsJU+hkxhMGylgyGLHR+OXRdKiCGrUBhe1uLtqiMeQ7M0r/QdiWErbQyj54p3rgyljWH0XPHOlaG0MYyeK965MpQ2htFzxTtXhtLGMHqueOfKUNoYRs8V71wZShvDFodhK20MzzgMW2ljGL1afuDKEI69NHqUeA9Df/ilBIMhGIEpxWHYDTGAYcqwGLYSYpimEzBspYthungYw2sUTph0+RCG/wPFhQKmXCkAAA== */
 .flex__183by2k0 {
   box-sizing: border-box;
@@ -3956,14 +4011,6 @@
   box-sizing: border-box;
 }
 
-/* vanilla-extract-css-ns:src/theme/styles/panel.css.ts.vanilla.css?source=LnBhbmVsX3BhbmVsX19naDlzdXowIHsKICBjb2xvcjogdmFyKC0tc2VtYW50aWNDb2xvcnMtc3VyZmFjZVRleHRDb250cmFzdF9fMTluYmU4ZDJmOSk7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2VtYW50aWNDb2xvcnMtc3VyZmFjZV9fMTluYmU4ZDJmOCk7CiAgYm9yZGVyLXJhZGl1czogdmFyKC0tcmFkaWktM19fMTluYmU4ZDJnaik7CiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHZhcigtLXNlbWFudGljQ29sb3JzLWxpbmVfXzE5bmJlOGQyZmUpOwp9 */
-.panel_panel__gh9suz0 {
-  color: var(--semanticColors-surfaceTextContrast__19nbe8d2f9);
-  background-color: var(--semanticColors-surface__19nbe8d2f8);
-  border-radius: var(--radii-3__19nbe8d2gj);
-  box-shadow: inset 0 0 0 1px var(--semanticColors-line__19nbe8d2fe);
-}
-
 /* vanilla-extract-css-ns:src/theme/styles/card.css.ts.vanilla.css?source=LmNhcmRfY2FyZF9fMWs0OTIyMCB7CiAgcGFkZGluZzogdmFyKC0tc3BhY2UtNV9fMTluYmU4ZDQpIHZhcigtLXNwYWNlLTVfXzE5bmJlOGQ0KSB2YXIoLS1zcGFjZS02X18xOW5iZThkNSkgdmFyKC0tc3BhY2UtNV9fMTluYmU4ZDQpOwp9 */
 .card_card__1k49220 {
   padding: var(--space-5__19nbe8d4) var(--space-5__19nbe8d4) var(--space-6__19nbe8d5) var(--space-5__19nbe8d4);
@@ -3978,6 +4025,31 @@
   width: 100%;
 }
 
+/* vanilla-extract-css-ns:src/theme/styles/dialog.css.ts.vanilla.css?source=LmRpYWxvZ19kaWFsb2dEZXNjcmlwdGlvbl9fcjMwOXNjMCB7CiAgY29sb3I6IHZhcigtLXNlbWFudGljQ29sb3JzLXRleHRTdWJ0bGVfXzE5bmJlOGQyZmMpOwogIGZvbnQtc2l6ZTogdmFyKC0tZm9udFNpemVzLTNfXzE5bmJlOGRiKTsKICBtYXJnaW4tYm90dG9tOiB2YXIoLS1zcGFjZS00X18xOW5iZThkMyk7Cn0KLmRpYWxvZ19kaWFsb2dGb290ZXJfX3IzMDlzYzEgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXNlbWFudGljQ29sb3JzLXN1cmZhY2VfXzE5bmJlOGQyZjgpOwogIGJvcmRlci10b3A6IDFweCBzb2xpZCB2YXIoLS1zZW1hbnRpY0NvbG9ycy1saW5lX18xOW5iZThkMmZlKTsKICBib3R0b206IDA7CiAgcGFkZGluZzogdmFyKC0tc3BhY2UtMl9fMTluYmU4ZDEpIHZhcigtLXNwYWNlLTJfXzE5bmJlOGQxKTsKICBwb3NpdGlvbjogc3RpY2t5OwogIHotaW5kZXg6IHZhcigtLXpJbmRpY2VzLW1heF9fMTluYmU4ZDJneik7Cn0KLmRpYWxvZ19kaWFsb2dIZWFkZXJfX3IzMDlzYzIgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXNlbWFudGljQ29sb3JzLXN1cmZhY2VfXzE5bmJlOGQyZjgpOwogIHBhZGRpbmc6IHZhcigtLXNwYWNlLTFfXzE5bmJlOGQwKSB2YXIoLS1zcGFjZS0yX18xOW5iZThkMSk7CiAgcG9zaXRpb246IHN0aWNreTsKICB0b3A6IDA7CiAgei1pbmRleDogdmFyKC0tekluZGljZXMtbWF4X18xOW5iZThkMmd6KTsKfQouZGlhbG9nX2RpYWxvZ1RpdGxlX19yMzA5c2MzIHsKICBtYXJnaW4tYm90dG9tOiB2YXIoLS1zcGFjZS00X18xOW5iZThkMyk7Cn0= */
+.dialog_dialogDescription__r309sc0 {
+  color: var(--semanticColors-textSubtle__19nbe8d2fc);
+  font-size: var(--fontSizes-3__19nbe8db);
+  margin-bottom: var(--space-4__19nbe8d3);
+}
+.dialog_dialogFooter__r309sc1 {
+  background-color: var(--semanticColors-surface__19nbe8d2f8);
+  border-top: 1px solid var(--semanticColors-line__19nbe8d2fe);
+  bottom: 0;
+  padding: var(--space-2__19nbe8d1) var(--space-2__19nbe8d1);
+  position: sticky;
+  z-index: var(--zIndices-max__19nbe8d2gz);
+}
+.dialog_dialogHeader__r309sc2 {
+  background-color: var(--semanticColors-surface__19nbe8d2f8);
+  padding: var(--space-1__19nbe8d0) var(--space-2__19nbe8d1);
+  position: sticky;
+  top: 0;
+  z-index: var(--zIndices-max__19nbe8d2gz);
+}
+.dialog_dialogTitle__r309sc3 {
+  margin-bottom: var(--space-4__19nbe8d3);
+}
+
 /* vanilla-extract-css-ns:src/theme/styles/form.css.ts.vanilla.css?source=LmZvcm1fZm9ybUZpZWxkX18xOWduY2swMCB7CiAgZGlzcGxheTogZ3JpZDsKICBtYXJnaW4tYm90dG9tOiB2YXIoLS1zcGFjZS0yX18xOW5iZThkMSk7Cn0KLmZvcm1fZm9ybUxhYmVsX18xOWduY2swMSB7CiAgY29sb3I6IHZhcigtLXNlbWFudGljQ29sb3JzLXRleHRTdWJ0bGVfXzE5bmJlOGQyZmMpOwogIGZvbnQtc2l6ZTogdmFyKC0tZm9udFNpemVzLTNfXzE5bmJlOGRiKTsKICBmb250LXdlaWdodDogdmFyKC0tZm9udFdlaWdodHMtbWVkaXVtX18xOW5iZThkMmZvKTsKICBsaW5lLWhlaWdodDogdmFyKC0tbGluZUhlaWdodHMtNl9fMTluYmU4ZDJmdik7Cn0= */
 .form_formField__19gnck00 {
   display: grid;
@@ -4115,6 +4187,12 @@ body {
   color: var(--semanticColors-backgroundTextContrast__19nbe8d2f7);
 }
 
+/* vanilla-extract-css-ns:src/theme/styles/image.css.ts.vanilla.css?source=LmltYWdlX2ltYWdlX18xZThubXhkMCB7CiAgbWF4LXdpZHRoOiAxMDAlOwogIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7Cn0= */
+.image_image__1e8nmxd0 {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
 /* vanilla-extract-css-ns:src/theme/styles/label.css.ts.vanilla.css?source=LmxhYmVsX2xhYmVsX19yMW5rZ3EwIHsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTsKICBjdXJzb3I6IGRlZmF1bHQ7Cn0= */
 .label_label__r1nkgq0 {
   display: inline-block;