@optiaxiom/react 1.9.14 → 1.9.16

package/dist/esm/packages/react/src/proteus-document/ProteusImage.js

@@ -1,8 +1,6 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
-import { ActionsContent } from '../actions/ActionsContent.js';
-import { ActionsRoot } from '../actions/ActionsRoot.js';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -16,22 +14,15 @@ import { DialogFooter } from '../dialog/DialogFooter.js';
 import '../dialog/DialogForm.js';
 import { DialogHeader } from '../dialog/DialogHeader.js';
 import { DialogTrigger } from '../dialog/DialogTrigger.js';
-import { Group } from '../group/Group.js';
-import { IconArrowsDiagonal } from '../icons/IconArrowsDiagonal.js';
-import { IconCheck } from '../icons/IconCheck.js';
-import { IconCopy } from '../icons/IconCopy.js';
-import { IconDownload } from '../icons/IconDownload.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { downloadFile } from './downloadFile.js';
-import { root, actions } from './ProteusImage-css.js';
 
 function ProteusImage(props) {
-  const [isCopied, setIsCopied] = useState(false);
+  const [open, setOpen] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const imgRef = useRef(null);
-  const timerRef = useRef();
-  return /* @__PURE__ */ jsxs(ActionsRoot, { ...root(), children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     !isLoaded && /* @__PURE__ */ jsx(
       Box,
       {
@@ -42,106 +33,70 @@ function ProteusImage(props) {
         p: "24",
         rounded: "md",
         style: { aspectRatio: "16 / 9" },
-        children: /* @__PURE__ */ jsx(Spinner, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        display: isLoaded ? "block" : "none",
-        objectFit: "cover",
+        w: "full",
         ...props,
-        children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            alt: props.alt,
-            onLoad: () => setIsLoaded(true),
-            ref: imgRef,
-            src: props.src
-          }
-        )
+        children: /* @__PURE__ */ jsx(Spinner, {})
       }
     ),
-    isLoaded && /* @__PURE__ */ jsx(ActionsContent, { ...actions(), children: /* @__PURE__ */ jsxs(Group, { bg: "bg.default", gap: "4", p: "4", rounded: "md", children: [
-      /* @__PURE__ */ jsx(
-        Button,
+    /* @__PURE__ */ jsxs(Dialog, { onOpenChange: setOpen, open, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { "aria-label": "Expand", asChild: true, children: /* @__PURE__ */ jsx(Box, { asChild: true, display: isLoaded ? "block" : "none", ...props, children: /* @__PURE__ */ jsx(
+        "a",
         {
-          appearance: "subtle",
-          "aria-label": "Copy",
-          icon: isCopied ? /* @__PURE__ */ jsx(IconCheck, { pointerEvents: "none" }) : /* @__PURE__ */ jsx(IconCopy, { pointerEvents: "none" }),
-          onClick: async () => {
-            if (!imgRef.current) {
-              return;
-            }
-            setIsCopied(true);
-            const canvas = document.createElement("canvas");
-            canvas.width = imgRef.current.naturalWidth;
-            canvas.height = imgRef.current.naturalHeight;
-            canvas.getContext("2d")?.drawImage(imgRef.current, 0, 0);
-            const blob = await new Promise((resolve) => {
-              try {
-                canvas.toBlob(resolve, "image/png");
-              } catch {
-                resolve(null);
-              }
-            });
-            if (blob) {
-              await navigator.clipboard.write([
-                new ClipboardItem({ "image/png": blob })
-              ]);
-            } else {
-              await navigator.clipboard.writeText(String(props.src));
-            }
-            clearTimeout(timerRef.current);
-            timerRef.current = window.setTimeout(() => {
-              setIsCopied(false);
-            }, 2e3);
-          },
-          size: "sm"
-        }
-      ),
-      /* @__PURE__ */ jsxs(Dialog, { children: [
-        /* @__PURE__ */ jsx(
-          DialogTrigger,
-          {
-            appearance: "subtle",
-            "aria-label": "Expand",
-            icon: /* @__PURE__ */ jsx(IconArrowsDiagonal, {}),
-            size: "sm"
-          }
-        ),
-        /* @__PURE__ */ jsxs(DialogContent, { size: "lg", children: [
-          /* @__PURE__ */ jsx(DialogHeader, { children: props.alt }),
-          /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", ...props, children: /* @__PURE__ */ jsx("img", { alt: props.alt, src: props.src }) }) }),
-          /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(DialogClose, { children: "Close" }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          appearance: "subtle",
-          "aria-label": "Download",
-          asChild: true,
-          icon: /* @__PURE__ */ jsx(IconDownload, {}),
-          loading: isDownloading,
-          onClick: async (event) => {
+          href: props.src,
+          onClick: (event) => {
             event.preventDefault();
-            if (isDownloading) {
-              return;
-            }
-            setIsDownloading(true);
-            try {
-              await downloadFile(String(props.src));
-            } finally {
-              setIsDownloading(false);
-            }
+            setOpen(true);
           },
-          size: "sm",
-          children: /* @__PURE__ */ jsx("a", { download: true, href: props.src })
+          type: "",
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              asChild: true,
+              objectFit: "cover",
+              overflow: "hidden",
+              rounded: "inherit",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  alt: props.alt,
+                  onLoad: () => setIsLoaded(true),
+                  ref: imgRef,
+                  src: props.src
+                }
+              )
+            }
+          )
         }
-      )
-    ] }) })
+      ) }) }),
+      /* @__PURE__ */ jsxs(DialogContent, { size: "lg", children: [
+        /* @__PURE__ */ jsx(DialogHeader, { lineClamp: "1", children: props.alt }),
+        /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", children: /* @__PURE__ */ jsx("img", { alt: props.alt, src: props.src }) }) }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(DialogClose, { children: "Close" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              asChild: true,
+              loading: isDownloading,
+              onClick: async (event) => {
+                event.preventDefault();
+                if (isDownloading) {
+                  return;
+                }
+                setIsDownloading(true);
+                try {
+                  await downloadFile(String(props.src));
+                } finally {
+                  setIsDownloading(false);
+                }
+              },
+              children: /* @__PURE__ */ jsx("a", { download: true, href: props.src, children: "Download" })
+            }
+          )
+        ] })
+      ] })
+    ] })
   ] });
 }
 ProteusImage.displayName = "@optiaxiom/react/ProteusImage";

package/dist/esm/packages/react/src/proteus-document/ProteusInput.js

@@ -15,7 +15,7 @@ function ProteusInput(props) {
   const { path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/react/ProteusInput"
   );
-  const value = useProteusValue(props.name ?? "");
+  const value = useProteusValue({ path: props.name ?? "" });
   return /* @__PURE__ */ jsx(
     Input,
     {

package/dist/esm/packages/react/src/proteus-document/ProteusMap.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useProteusDocumentPathContext, ProteusDocumentPathProvider } from './ProteusDocumentPathContext.js';
-import { ProteusElement } from './ProteusElement.js';
 import { useProteusValue } from './useProteusValue.js';
 
 function ProteusMap({
@@ -11,7 +10,7 @@ function ProteusMap({
   const { path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/react/ProteusMap"
   );
-  const array = useProteusValue(path);
+  const array = useProteusValue({ path });
   if (!Array.isArray(array)) {
     return null;
   }
@@ -19,7 +18,7 @@ function ProteusMap({
     ProteusDocumentPathProvider,
     {
       path: `${path.startsWith("/") ? path : `${parentPath}/${path}`}/${index}`,
-      children: /* @__PURE__ */ jsx(ProteusElement, { element: children })
+      children
     },
     index
   )) });

package/dist/esm/packages/react/src/proteus-document/ProteusSelect.js

@@ -6,7 +6,6 @@ import '../select/SelectContent.js';
 import '../select/SelectTrigger.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
-import { ProteusElement } from './ProteusElement.js';
 import { useProteusValue } from './useProteusValue.js';
 
 function ProteusSelect({
@@ -22,7 +21,7 @@ function ProteusSelect({
   );
   const optionsRef = useRef(options);
   optionsRef.current = options;
-  const resolved = useProteusValue(props.name ?? "");
+  const resolved = useProteusValue({ path: props.name ?? "" });
   const value = props.name ? String(resolved ?? options[0]?.value ?? "") : options[0]?.value ?? "";
   return /* @__PURE__ */ jsx(
     Select,
@@ -38,7 +37,7 @@ function ProteusSelect({
       },
       options,
       value,
-      children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children })
+      children
     }
   );
 }

package/dist/esm/packages/react/src/proteus-document/ProteusShow.js

@@ -1,8 +1,7 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
-import { ProteusElement } from './ProteusElement.js';
 import { resolveProteusValue } from './resolveProteusValue.js';
 
 function ProteusShow({
@@ -20,7 +19,7 @@ function ProteusShow({
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ProteusElement, { element: children });
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function evaluateCondition(condition, data, parentPath) {
   if (!condition) {

package/dist/esm/packages/react/src/proteus-document/ProteusTextarea.js

@@ -12,7 +12,7 @@ function ProteusTextarea(props) {
   const { path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/react/ProteusTextarea"
   );
-  const value = useProteusValue(props.name ?? "");
+  const value = useProteusValue({ path: props.name ?? "" });
   return /* @__PURE__ */ jsx(
     Textarea,
     {

package/dist/esm/packages/react/src/proteus-document/ProteusValue.js

@@ -1,8 +1,8 @@
 "use client";
 import { useProteusValue } from './useProteusValue.js';
 
-function ProteusValue({ path }) {
-  return useProteusValue(path);
+function ProteusValue(element) {
+  return useProteusValue(element);
 }
 ProteusValue.displayName = "@optiaxiom/react/ProteusValue";
 

package/dist/esm/packages/react/src/proteus-document/getProteusValue.js

@@ -1,11 +1,48 @@
 import { get } from 'jsonpointer';
 
-function getProteusValue(data, path, parentPath) {
+function getProteusValue(data, element, parentPath) {
   try {
-    return get(data, path.startsWith("/") ? path : `${parentPath}/${path}`);
+    const value = get(
+      data,
+      element.path.startsWith("/") ? element.path : element.path ? `${parentPath}/${element.path}` : parentPath
+    );
+    if (element.formatter) {
+      return applyFormatter(value, element.formatter);
+    }
+    return value;
   } catch (error) {
     return null;
   }
 }
+const formatters = {
+  DateTime: (value, options) => {
+    if (typeof value === "number" || typeof value === "string") {
+      return new Intl.DateTimeFormat(void 0, {
+        day: "numeric",
+        month: "short",
+        ...options
+      }).format(new Date(value));
+    }
+    return value;
+  },
+  Number: (value, options) => {
+    if (typeof value === "number") {
+      return new Intl.NumberFormat(void 0, options).format(value);
+    }
+    return value;
+  }
+};
+function applyFormatter(value, formatter) {
+  const key = typeof formatter === "string" ? formatter : formatter.type;
+  const fn = formatters[key];
+  if (!fn) {
+    return value;
+  }
+  const options = typeof formatter === "string" ? void 0 : formatter.options;
+  if (Array.isArray(value)) {
+    return value.map((v) => fn(v, options));
+  }
+  return fn(value, options);
+}
 
 export { getProteusValue };

package/dist/esm/packages/react/src/proteus-document/proteus-document-spec.json.js

@@ -2792,6 +2792,52 @@ var definitions = {
 		],
 		description: "A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)"
 	},
+	ProteusZip: {
+		description: "Zips multiple parallel arrays into an array of objects. Each key in 'sources' becomes a property in the resulting row objects.",
+		examples: [
+			{
+				$type: "Zip",
+				sources: {
+					date: {
+						$type: "Value",
+						path: "/upserts/0/i"
+					},
+					measure0: {
+						$type: "Value",
+						path: "/upserts/1/i"
+					}
+				}
+			}
+		],
+		properties: {
+			$type: {
+				"const": "Zip"
+			},
+			sources: {
+				description: "Map of output property names to array sources. Each source should resolve to an array of the same length.",
+				patternProperties: {
+					".*": {
+						anyOf: [
+							{
+								$ref: "#/definitions/ProteusValue"
+							},
+							{
+								items: {
+								},
+								type: "array"
+							}
+						]
+					}
+				},
+				type: "object"
+			}
+		},
+		required: [
+			"$type",
+			"sources"
+		],
+		type: "object"
+	},
 	ProteusAction: {
 		examples: [
 			{
@@ -3466,26 +3512,21 @@ var definitions = {
 					},
 					{
 						$ref: "#/definitions/ProteusValue"
+					},
+					{
+						$ref: "#/definitions/ProteusZip"
 					}
 				],
-				description: "Chart data records, either inline or a ProteusValue reference"
+				description: "Chart data records, either inline, a ProteusValue reference, or a ProteusZip transformation"
 			},
 			series: {
 				description: "Data series configuration",
 				items: {
 					properties: {
-						color: {
-							description: "Series color",
-							type: "string"
-						},
 						dataKey: {
 							description: "Key in data records for this series",
 							type: "string"
 						},
-						labelKey: {
-							description: "Key in data records for pre-formatted labels displayed above bars",
-							type: "string"
-						},
 						name: {
 							description: "Display name for legend",
 							type: "string"
@@ -3499,7 +3540,14 @@ var definitions = {
 				type: "array"
 			},
 			type: {
-				"const": "bar",
+				anyOf: [
+					{
+						"const": "bar"
+					},
+					{
+						"const": "line"
+					}
+				],
 				description: "Chart type"
 			},
 			xAxisKey: {
@@ -3565,6 +3613,9 @@ var definitions = {
 					},
 					{
 						$ref: "#/definitions/ProteusValue"
+					},
+					{
+						$ref: "#/definitions/ProteusZip"
 					}
 				]
 			}
@@ -6607,6 +6658,40 @@ var definitions = {
 			$type: {
 				"const": "Value"
 			},
+			formatter: {
+				anyOf: [
+					{
+						description: "Shorthand formatter name. 'DateTime' formats timestamps using Intl.DateTimeFormat (default: month short, day numeric). 'Number' formats numbers using Intl.NumberFormat.",
+						"enum": [
+							"DateTime",
+							"Number"
+						],
+						type: "string"
+					},
+					{
+						description: "Formatter with custom Intl options. 'type' selects the formatter, 'options' are passed to the Intl constructor.",
+						properties: {
+							options: {
+								description: "Options passed to the Intl formatter constructor (e.g., Intl.DateTimeFormatOptions or Intl.NumberFormatOptions)",
+								type: "object"
+							},
+							type: {
+								description: "Formatter type",
+								"enum": [
+									"DateTime",
+									"Number"
+								],
+								type: "string"
+							}
+						},
+						required: [
+							"type"
+						],
+						type: "object"
+					}
+				],
+				description: "Optional formatter to apply to the resolved value. Can be a string shorthand or an object with type and options for Intl formatters."
+			},
 			path: {
 				description: "Path to a value in the data. Absolute paths start with '/' and resolve from the root (e.g., '/title', '/options/0/label'). Inside a Map template, paths without a leading '/' are relative to the current item (e.g., 'title' resolves to each item's 'title' field).",
 				type: "string"

package/dist/esm/packages/react/src/proteus-document/resolveProteusValue.js

@@ -1,8 +1,34 @@
 import { getProteusValue } from './getProteusValue.js';
 
 function resolveProteusValue(value, data, parentPath) {
-  if (typeof value === "object" && value !== null && "$type" in value && value.$type === "Value" && "path" in value && typeof value.path === "string") {
-    return getProteusValue(data, value.path, parentPath);
+  if (typeof value !== "object" || value === null || !("$type" in value)) {
+    return value;
+  }
+  if (value.$type === "Value" && "path" in value && typeof value.path === "string") {
+    return getProteusValue(
+      data,
+      value,
+      parentPath
+    );
+  }
+  if (value.$type === "Zip" && "sources" in value) {
+    const sources = value.sources;
+    const resolved = {};
+    let length = 0;
+    for (const [k, v] of Object.entries(sources)) {
+      const arr = resolveProteusValue(v, data, parentPath);
+      if (Array.isArray(arr)) {
+        resolved[k] = arr;
+        length = Math.max(length, arr.length);
+      }
+    }
+    return Array.from({ length }, (_, i) => {
+      const row = {};
+      for (const [k, arr] of Object.entries(resolved)) {
+        row[k] = arr[i];
+      }
+      return row;
+    });
   }
   return value;
 }

package/dist/esm/packages/react/src/proteus-document/useProteusValue.js

@@ -2,14 +2,14 @@ import { getProteusValue } from './getProteusValue.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
 
-function useProteusValue(path) {
+function useProteusValue(element) {
   const { data } = useProteusDocumentContext(
     "@optiaxiom/react/useProteusValue"
   );
   const { path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/react/useProteusValue"
   );
-  return getProteusValue(data, path, parentPath);
+  return getProteusValue(data, element, parentPath);
 }
 
 export { useProteusValue };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BqhFg_d9.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DQx410Ns.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-C-S5wvye.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-DCSBDjlJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CSarMspk.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BHgmuhkd.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BbipBfdW.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-h0mXk89-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'jhm1po'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1vhbpx4']});
-var input = recipeRuntime({base:'_1fiwekx'});
-var radio = recipeRuntime({base:'_119i4fw'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1sek24v'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1jq4xsp']});
+var input = recipeRuntime({base:'_1c60e39'});
+var radio = recipeRuntime({base:'_1tnb398'});
 
 export { control, indicator, input, radio };

package/dist/esm/packages/react/src/range/Range-css.js

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BqhFg_d9.css';
-import './../../../../assets/src/range/Range.css.ts.vanilla-NICO9cBE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CSarMspk.css';
+import './../../../../assets/src/range/Range.css.ts.vanilla-BcoXzjcb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'transparent'},'_1buohqn']});
-var fillValue = 'var(--_11qnjw2)';
-var mark = recipeRuntime({base:[{transition:'colors'},'_4jsnle'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
-var markValue = 'var(--ocrxj1)';
-var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'fpgmcp']});
-var root = recipeRuntime({base:['_1l17qs1',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'dk0uk6'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
-var thumb = recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'hs9dga']});
-var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'_14xrv65']});
+var control = recipeRuntime({base:[{bg:'transparent'},'_1i042th']});
+var fillValue = 'var(--_1vd5xzv)';
+var mark = recipeRuntime({base:[{transition:'colors'},'_1po2558'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
+var markValue = 'var(--_13m9co4)';
+var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'g8p5mu']});
+var root = recipeRuntime({base:['kbbjkg',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'_1psnfih'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
+var thumb = recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'_1w7ykv4']});
+var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'_1vq5xts']});
 
 export { control, fillValue, mark, markValue, range, root, thumb, track };

package/dist/esm/packages/react/src/resizable/ResizableHandle-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BqhFg_d9.css';
-import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-4bidMKnS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CSarMspk.css';
+import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-C_6-3LsE.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_1t8iuev']});
-var root = recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'_8d8nf4']});
+var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_111at8']});
+var root = recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'e87528']});
 
 export { handle, root };

package/dist/esm/packages/react/src/search-input/SearchInput-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BqhFg_d9.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-clhfVofz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CSarMspk.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-C-6dR6zI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'pxssbn']});
-var input = recipeRuntime({base:'kldmqa'});
-var search = recipeRuntime({base:'i9pefv'});
+var clear = recipeRuntime({base:[{size:'sm'},'hh0d25']});
+var input = recipeRuntime({base:'q6uirx'});
+var search = recipeRuntime({base:'_1s9lun5'});
 
 export { clear, input, search };

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BqhFg_d9.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-CZgkKodY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CSarMspk.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-D9vo1ok5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createAtomsFn as createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.5_patch_hash_530004842e1937cf2ffe2728e2a18629c5dd638aa44_ff29e2a63cc347b263901e6ac2d561ef/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1ajdk1w',md:'vomst1',base:'e8eomg'},defaultClass:'e8eomg'},vertical:{conditions:{sm:'_131fz70',md:'_9t49a7',base:'foy3c1'},defaultClass:'foy3c1'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'k9do0v',md:'_1dwy8hl',base:'ma61ta'},defaultClass:'ma61ta'},vertical:{conditions:{sm:'_1wzhjhe',md:'_2llg8o',base:'_18uku6r'},defaultClass:'_18uku6r'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };