@stackframe/stack-ui 2.8.60 → 2.8.62

package/dist/components/browser-frame/index.js

@@ -1,13 +1,68 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BrowserFrame = ({ url, padding, transparentBackground, children, className }) => (_jsxs("div", { className: `rounded-xl overflow-hidden shadow-2xl ${className}`, children: [_jsxs("div", { className: "bg-gray-200 dark:bg-gray-800 h-10 flex items-center py-2 px-4 box-border", children: [_jsx("div", { className: "w-3 h-3 bg-red-500 rounded-full mr-1.5 flex-shrink-0" }), _jsx("div", { className: "w-3 h-3 bg-yellow-500 rounded-full mr-1.5 flex-shrink-0" }), _jsx("div", { className: "w-3 h-3 bg-green-500 rounded-full mr-2 flex-shrink-0" }), url && (_jsx("div", { className: "text-left bg-white dark:bg-gray-700 h-6 rounded-full leading-6 text-sm text-gray-700 dark:text-gray-300 flex-grow ml-2 mr-4 px-4 whitespace-nowrap overflow-hidden overflow-ellipsis", "aria-hidden": true, children: url })), _jsxs("div", { className: "w-4 h-4 ml-auto flex flex-col justify-evenly items-stretch flex-shrink-0", children: [_jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }), _jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }), _jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" })] })] }), _jsx("div", { className: `flex grow flex-col p-4 rounded-b-md ${padding ? padding : ""} ${transparentBackground
-                ? ""
-                : "bg-white dark:bg-black"}`, style: transparentBackground ? {
-                backgroundImage: `
+"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/browser-frame/index.tsx
+var browser_frame_exports = {};
+__export(browser_frame_exports, {
+  BrowserFrame: () => BrowserFrame
+});
+module.exports = __toCommonJS(browser_frame_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var BrowserFrame = ({ url, padding, transparentBackground, children, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `rounded-xl overflow-hidden shadow-2xl ${className}`, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-gray-200 dark:bg-gray-800 h-10 flex items-center py-2 px-4 box-border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-3 h-3 bg-red-500 rounded-full mr-1.5 flex-shrink-0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-3 h-3 bg-yellow-500 rounded-full mr-1.5 flex-shrink-0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-3 h-3 bg-green-500 rounded-full mr-2 flex-shrink-0" }),
+    url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "text-left bg-white dark:bg-gray-700 h-6 rounded-full leading-6 text-sm text-gray-700 dark:text-gray-300 flex-grow ml-2 mr-4 px-4 whitespace-nowrap overflow-hidden overflow-ellipsis",
+        "aria-hidden": true,
+        children: url
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-4 h-4 ml-auto flex flex-col justify-evenly items-stretch flex-shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" })
+    ] })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `flex grow flex-col p-4 rounded-b-md ${padding ? padding : ""} ${transparentBackground ? "" : "bg-white dark:bg-black"}`,
+      style: transparentBackground ? {
+        backgroundImage: `
           linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
           linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
           linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
           linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)
         `,
-                backgroundSize: '20px 20px',
-                backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px'
-            } : {}, children: children })] }));
+        backgroundSize: "20px 20px",
+        backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px"
+      } : {},
+      children
+    }
+  )
+] });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BrowserFrame
+});
+//# sourceMappingURL=index.js.map

package/dist/components/browser-frame/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/browser-frame/index.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type Props = {\n  url?: string,\n  padding?: string,\n  transparentBackground?: boolean,\n  children: React.ReactNode,\n  className?: string,\n};\n\nexport const BrowserFrame = ({ url, padding, transparentBackground, children, className }: Props) => (\n  <div className={`rounded-xl overflow-hidden shadow-2xl ${className}`}>\n    <div className=\"bg-gray-200 dark:bg-gray-800 h-10 flex items-center py-2 px-4 box-border\">\n      <div className=\"w-3 h-3 bg-red-500 rounded-full mr-1.5 flex-shrink-0\" />\n      <div className=\"w-3 h-3 bg-yellow-500 rounded-full mr-1.5 flex-shrink-0\" />\n      <div className=\"w-3 h-3 bg-green-500 rounded-full mr-2 flex-shrink-0\" />\n      {url && (\n        <div\n          className=\"text-left bg-white dark:bg-gray-700 h-6 rounded-full leading-6 text-sm text-gray-700 dark:text-gray-300 flex-grow ml-2 mr-4 px-4 whitespace-nowrap overflow-hidden overflow-ellipsis\"\n          aria-hidden\n        >\n          {url}\n        </div>\n      )}\n      <div className=\"w-4 h-4 ml-auto flex flex-col justify-evenly items-stretch flex-shrink-0\">\n        <span className=\"h-0.5 bg-gray-400 dark:bg-gray-500\" />\n        <span className=\"h-0.5 bg-gray-400 dark:bg-gray-500\" />\n        <span className=\"h-0.5 bg-gray-400 dark:bg-gray-500\" />\n      </div>\n    </div>\n    <div\n      className={`flex grow flex-col p-4 rounded-b-md ${padding ? padding : \"\"} ${\n        transparentBackground\n          ? \"\"\n          : \"bg-white dark:bg-black\"\n      }`}\n      style={transparentBackground ? {\n        backgroundImage: `\n          linear-gradient(45deg, #f0f0f0 25%, transparent 25%), \n          linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), \n          linear-gradient(45deg, transparent 75%, #f0f0f0 75%), \n          linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)\n        `,\n        backgroundSize: '20px 20px',\n        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px'\n      } : {}}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM;AAHC,IAAM,eAAe,CAAC,EAAE,KAAK,SAAS,uBAAuB,UAAU,UAAU,MACtF,6CAAC,SAAI,WAAW,yCAAyC,SAAS,IAChE;AAAA,+CAAC,SAAI,WAAU,4EACb;AAAA,gDAAC,SAAI,WAAU,wDAAuD;AAAA,IACtE,4CAAC,SAAI,WAAU,2DAA0D;AAAA,IACzE,4CAAC,SAAI,WAAU,wDAAuD;AAAA,IACrE,OACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,IAEF,6CAAC,SAAI,WAAU,4EACb;AAAA,kDAAC,UAAK,WAAU,sCAAqC;AAAA,MACrD,4CAAC,UAAK,WAAU,sCAAqC;AAAA,MACrD,4CAAC,UAAK,WAAU,sCAAqC;AAAA,OACvD;AAAA,KACF;AAAA,EACA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,uCAAuC,UAAU,UAAU,EAAE,IACtE,wBACI,KACA,wBACN;AAAA,MACA,OAAO,wBAAwB;AAAA,QAC7B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjB,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB,IAAI,CAAC;AAAA,MAEJ;AAAA;AAAA,EACH;AAAA,GACF;","names":[]}

package/dist/components/copy-button.js

@@ -1,20 +1,59 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
-import { Copy } from "lucide-react";
-import { Button, cn, useToast } from "..";
-const CopyButton = forwardRefIfNeeded((props, ref) => {
-    const { toast } = useToast();
-    return (_jsx(Button, { variant: "secondary", ...props, className: cn("h-6 w-6 p-1", props.className), ref: ref, onClick: async (...args) => {
-            await props.onClick?.(...args);
-            try {
-                await navigator.clipboard.writeText(props.content);
-                toast({ description: 'Copied to clipboard!', variant: 'success' });
-            }
-            catch (e) {
-                toast({ description: 'Failed to copy to clipboard', variant: 'destructive' });
-            }
-        }, children: _jsx(Copy, {}) }));
+"use strict";
+"use client";
+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/copy-button.tsx
+var copy_button_exports = {};
+__export(copy_button_exports, {
+  CopyButton: () => CopyButton
+});
+module.exports = __toCommonJS(copy_button_exports);
+var import_react = require("@stackframe/stack-shared/dist/utils/react");
+var import_lucide_react = require("lucide-react");
+var import__ = require("../index.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CopyButton = (0, import_react.forwardRefIfNeeded)((props, ref) => {
+  const { toast } = (0, import__.useToast)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.Button,
+    {
+      variant: "secondary",
+      ...props,
+      className: (0, import__.cn)("h-6 w-6 p-1", props.className),
+      ref,
+      onClick: async (...args) => {
+        await props.onClick?.(...args);
+        try {
+          await navigator.clipboard.writeText(props.content);
+          toast({ description: "Copied to clipboard!", variant: "success" });
+        } catch (e) {
+          toast({ description: "Failed to copy to clipboard", variant: "destructive" });
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, {})
+    }
+  );
 });
 CopyButton.displayName = "CopyButton";
-export { CopyButton };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CopyButton
+});
+//# sourceMappingURL=copy-button.js.map

package/dist/components/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@stackframe/stack-shared/dist/utils/react\";\nimport { Copy } from \"lucide-react\";\nimport React from \"react\";\nimport { Button, cn, useToast } from \"..\";\n\nconst CopyButton = forwardRefIfNeeded<\n  React.ElementRef<typeof Button>,\n  React.ComponentProps<typeof Button> & { content: string }\n>((props, ref) => {\n  const { toast } = useToast();\n\n  return (\n    <Button\n      variant=\"secondary\"\n      {...props}\n      className={cn(\"h-6 w-6 p-1\", props.className)}\n      ref={ref}\n      onClick={async (...args) => {\n        await props.onClick?.(...args);\n        try {\n          await navigator.clipboard.writeText(props.content);\n          toast({ description: 'Copied to clipboard!', variant: 'success' });\n        } catch (e) {\n          toast({ description: 'Failed to copy to clipboard', variant: 'destructive' });\n        }\n      }}\n    >\n      <Copy />\n    </Button>\n  );\n});\nCopyButton.displayName = \"CopyButton\";\n\nexport { CopyButton };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAmC;AACnC,0BAAqB;AAErB,eAAqC;AAwB/B;AAtBN,IAAM,iBAAa,iCAGjB,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,MAAM,QAAI,mBAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACP,GAAG;AAAA,MACJ,eAAW,aAAG,eAAe,MAAM,SAAS;AAAA,MAC5C;AAAA,MACA,SAAS,UAAU,SAAS;AAC1B,cAAM,MAAM,UAAU,GAAG,IAAI;AAC7B,YAAI;AACF,gBAAM,UAAU,UAAU,UAAU,MAAM,OAAO;AACjD,gBAAM,EAAE,aAAa,wBAAwB,SAAS,UAAU,CAAC;AAAA,QACnE,SAAS,GAAG;AACV,gBAAM,EAAE,aAAa,+BAA+B,SAAS,cAAc,CAAC;AAAA,QAC9E;AAAA,MACF;AAAA,MAEA,sDAAC,4BAAK;AAAA;AAAA,EACR;AAEJ,CAAC;AACD,WAAW,cAAc;","names":[]}

package/dist/components/copy-field.js

@@ -1,13 +1,69 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input, Label, SimpleTooltip, Textarea } from "..";
-import { CopyButton } from "./copy-button";
-export function CopyField(props) {
-    return (_jsxs("div", { children: [props.label && (_jsxs(Label, { className: "flex items-center gap-2 mb-2", children: [props.label, props.helper && _jsx(SimpleTooltip, { type: "info", tooltip: props.helper })] })), props.type === "textarea" ? (_jsxs("div", { className: "relative pr-2", children: [_jsx(Textarea, { readOnly: true, value: props.value, style: {
-                            height: props.height,
-                            fontFamily: props.monospace ? "ui-monospace, monospace" : "inherit",
-                            whiteSpace: props.monospace ? "pre" : "normal",
-                            resize: props.fixedSize ? "none" : "vertical"
-                        } }), _jsx(CopyButton, { content: props.value, className: "absolute right-4 top-2" })] })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { readOnly: true, value: props.value, style: {
-                            fontFamily: props.monospace ? "ui-monospace, monospace" : "inherit",
-                        } }), _jsx(CopyButton, { content: props.value })] }))] }));
+"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/copy-field.tsx
+var copy_field_exports = {};
+__export(copy_field_exports, {
+  CopyField: () => CopyField
+});
+module.exports = __toCommonJS(copy_field_exports);
+var import__ = require("../index.js");
+var import_copy_button = require("./copy-button.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+function CopyField(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Label, { className: "flex items-center gap-2 mb-2", children: [
+      props.label,
+      props.helper && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.SimpleTooltip, { type: "info", tooltip: props.helper })
+    ] }),
+    props.type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative pr-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import__.Textarea,
+        {
+          readOnly: true,
+          value: props.value,
+          style: {
+            height: props.height,
+            fontFamily: props.monospace ? "ui-monospace, monospace" : "inherit",
+            whiteSpace: props.monospace ? "pre" : "normal",
+            resize: props.fixedSize ? "none" : "vertical"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_copy_button.CopyButton, { content: props.value, className: "absolute right-4 top-2" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import__.Input,
+        {
+          readOnly: true,
+          value: props.value,
+          style: {
+            fontFamily: props.monospace ? "ui-monospace, monospace" : "inherit"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_copy_button.CopyButton, { content: props.value })
+    ] })
+  ] });
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CopyField
+});
+//# sourceMappingURL=copy-field.js.map

package/dist/components/copy-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/copy-field.tsx"],"sourcesContent":["import { Input, Label, SimpleTooltip, Textarea } from \"..\";\nimport { CopyButton } from \"./copy-button\";\n\nexport function CopyField(props: {\n  value: string,\n  label?: React.ReactNode,\n  helper?: React.ReactNode,\n  monospace?: boolean,\n  fixedSize?: boolean,\n} & ({\n  type: \"textarea\",\n  height?: number,\n} | {\n  type: \"input\",\n})) {\n  return (\n    <div>\n      {props.label && (\n        <Label className=\"flex items-center gap-2 mb-2\">\n          {props.label}\n          {props.helper && <SimpleTooltip type=\"info\" tooltip={props.helper} />}\n        </Label>\n      )}\n      {props.type === \"textarea\" ? (\n        <div className=\"relative pr-2\">\n          <Textarea\n            readOnly\n            value={props.value}\n            style={{\n              height: props.height,\n              fontFamily: props.monospace ? \"ui-monospace, monospace\" : \"inherit\",\n              whiteSpace: props.monospace ? \"pre\" : \"normal\",\n              resize: props.fixedSize ? \"none\" : \"vertical\"\n            }}\n          />\n          <CopyButton content={props.value} className=\"absolute right-4 top-2\" />\n        </div>\n      ) : (\n        <div className=\"flex items-center gap-2\">\n          <Input\n            readOnly\n            value={props.value}\n            style={{\n              fontFamily: props.monospace ? \"ui-monospace, monospace\" : \"inherit\",\n            }}\n          />\n          <CopyButton content={props.value} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAAsD;AACtD,yBAA2B;AAiBnB;AAfD,SAAS,UAAU,OAWtB;AACF,SACE,6CAAC,SACE;AAAA,UAAM,SACL,6CAAC,kBAAM,WAAU,gCACd;AAAA,YAAM;AAAA,MACN,MAAM,UAAU,4CAAC,0BAAc,MAAK,QAAO,SAAS,MAAM,QAAQ;AAAA,OACrE;AAAA,IAED,MAAM,SAAS,aACd,6CAAC,SAAI,WAAU,iBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAQ;AAAA,UACR,OAAO,MAAM;AAAA,UACb,OAAO;AAAA,YACL,QAAQ,MAAM;AAAA,YACd,YAAY,MAAM,YAAY,4BAA4B;AAAA,YAC1D,YAAY,MAAM,YAAY,QAAQ;AAAA,YACtC,QAAQ,MAAM,YAAY,SAAS;AAAA,UACrC;AAAA;AAAA,MACF;AAAA,MACA,4CAAC,iCAAW,SAAS,MAAM,OAAO,WAAU,0BAAyB;AAAA,OACvE,IAEA,6CAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAQ;AAAA,UACR,OAAO,MAAM;AAAA,UACb,OAAO;AAAA,YACL,YAAY,MAAM,YAAY,4BAA4B;AAAA,UAC5D;AAAA;AAAA,MACF;AAAA,MACA,4CAAC,iCAAW,SAAS,MAAM,OAAO;AAAA,OACpC;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/data-table/cells.js

@@ -1,55 +1,126 @@
-'use client';
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DotsHorizontalIcon } from "@radix-ui/react-icons";
-import React, { useEffect, useRef, useState } from "react";
-import { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, SimpleTooltip, cn } from "../..";
-export function TextCell(props) {
-    const textRef = useRef(null);
-    const [isOverflowing, setIsOverflowing] = useState(false);
-    const overflowStyle = "text-ellipsis text-nowrap overflow-x-hidden";
-    useEffect(() => {
-        const checkOverflow = () => {
-            if (textRef.current) {
-                const isOverflowing = textRef.current.scrollWidth > textRef.current.clientWidth;
-                setIsOverflowing(isOverflowing);
-            }
-        };
-        checkOverflow();
-        window.addEventListener('resize', checkOverflow);
-        return () => {
-            window.removeEventListener('resize', checkOverflow);
-        };
-    }, []);
-    return (_jsx("div", { className: "relative", style: { minWidth: props.size }, children: _jsxs("div", { className: "flex items-center gap-2 absolute inset-0", children: [_jsx("div", { className: overflowStyle, ref: textRef, children: isOverflowing ? (_jsx(SimpleTooltip, { tooltip: props.children, children: _jsx("div", { className: overflowStyle, children: props.children }) })) : props.children }), props.icon && _jsx("div", { children: props.icon })] }) }));
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/data-table/cells.tsx
+var cells_exports = {};
+__export(cells_exports, {
+  ActionCell: () => ActionCell,
+  AvatarCell: () => AvatarCell,
+  BadgeCell: () => BadgeCell,
+  DateCell: () => DateCell,
+  TextCell: () => TextCell
+});
+module.exports = __toCommonJS(cells_exports);
+var import_react_icons = require("@radix-ui/react-icons");
+var import_react = __toESM(require("react"));
+var import__ = require("../../index.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react2 = require("react");
+function TextCell(props) {
+  const textRef = (0, import_react.useRef)(null);
+  const [isOverflowing, setIsOverflowing] = (0, import_react.useState)(false);
+  const overflowStyle = "text-ellipsis text-nowrap overflow-x-hidden";
+  (0, import_react.useEffect)(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const isOverflowing2 = textRef.current.scrollWidth > textRef.current.clientWidth;
+        setIsOverflowing(isOverflowing2);
+      }
+    };
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => {
+      window.removeEventListener("resize", checkOverflow);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative", style: { minWidth: props.size }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 absolute inset-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: overflowStyle, ref: textRef, children: isOverflowing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.SimpleTooltip, { tooltip: props.children, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: overflowStyle, children: props.children }) }) : props.children }),
+    props.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: props.icon })
+  ] }) });
 }
-export function AvatarCell(props) {
-    return (_jsxs(Avatar, { className: "h-6 w-6", children: [_jsx(AvatarImage, { src: props.src }), _jsx(AvatarFallback, { children: props.fallback })] }));
+function AvatarCell(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Avatar, { className: "h-6 w-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarImage, { src: props.src }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarFallback, { children: props.fallback })
+  ] });
 }
-export function DateCell(props) {
-    const ignore = !!props.ignoreAfterYears && new Date(new Date().setFullYear(new Date().getFullYear() + props.ignoreAfterYears)) < props.date;
-    const timeString = props.date.toLocaleTimeString([], { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });
-    return (_jsx(TextCell, { size: 140, children: ignore ? 'Never' : timeString }));
+function DateCell(props) {
+  const ignore = !!props.ignoreAfterYears && new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() + props.ignoreAfterYears)) < props.date;
+  const timeString = props.date.toLocaleTimeString([], { year: "numeric", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextCell, { size: 140, children: ignore ? "Never" : timeString });
 }
-export function ActionCell(props) {
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: cn("flex h-8 w-8 p-0 data-[state=open]:bg-muted", props.invisible && "invisible"), children: [_jsx(DotsHorizontalIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Open menu" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-[150px] max-w-[300px] stack-scope", children: props.items?.map((item, index) => {
-                    if (item === '-') {
-                        return _jsx(DropdownMenuSeparator, {}, index);
-                    }
-                    const menuItemProps = {
-                        onClick: item.onClick,
-                        className: cn(item.danger ? "text-destructive" : ""),
-                        disabled: item.disabled
-                    };
-                    const menuItem = (_createElement(DropdownMenuItem, { ...menuItemProps, key: index }, item.item));
-                    if (item.disabled && item.disabledTooltip) {
-                        return (_jsx(SimpleTooltip, { tooltip: item.disabledTooltip, children: React.cloneElement(menuItem, {
-                                className: cn(menuItemProps.className, "opacity-50 cursor-not-allowed")
-                            }) }, index));
-                    }
-                    return menuItem;
-                }) })] }));
+function ActionCell(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import__.Button,
+      {
+        variant: "ghost",
+        className: (0, import__.cn)(
+          "flex h-8 w-8 p-0 data-[state=open]:bg-muted",
+          props.invisible && "invisible"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Open menu" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuContent, { align: "end", className: "min-w-[150px] max-w-[300px] stack-scope", children: props.items?.map((item, index) => {
+      if (item === "-") {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuSeparator, {}, index);
+      }
+      const menuItemProps = {
+        onClick: item.onClick,
+        className: (0, import__.cn)(item.danger ? "text-destructive" : ""),
+        disabled: item.disabled
+      };
+      const menuItem = /* @__PURE__ */ (0, import_react2.createElement)(import__.DropdownMenuItem, { ...menuItemProps, key: index }, item.item);
+      if (item.disabled && item.disabledTooltip) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.SimpleTooltip, { tooltip: item.disabledTooltip, children: import_react.default.cloneElement(menuItem, {
+          className: (0, import__.cn)(menuItemProps.className, "opacity-50 cursor-not-allowed")
+        }) }, index);
+      }
+      return menuItem;
+    }) })
+  ] });
 }
-export function BadgeCell(props) {
-    return (_jsx("div", { className: "flex items-center gap-1 flex-wrap", children: props.badges.map((badge, index) => (_jsx(Badge, { variant: "secondary", children: badge }, index))) }));
+function BadgeCell(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-1 flex-wrap", children: props.badges.map((badge, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Badge, { variant: "secondary", children: badge }, index)) });
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActionCell,
+  AvatarCell,
+  BadgeCell,
+  DateCell,
+  TextCell
+});
+//# sourceMappingURL=cells.js.map

package/dist/components/data-table/cells.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-table/cells.tsx"],"sourcesContent":["\n'use client';\nimport { DotsHorizontalIcon } from \"@radix-ui/react-icons\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, SimpleTooltip, cn } from \"../..\";\n\nexport function TextCell(props: { children: React.ReactNode, size?: number, icon?: React.ReactNode }) {\n  const textRef = useRef<HTMLDivElement>(null);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const overflowStyle = \"text-ellipsis text-nowrap overflow-x-hidden\";\n\n  useEffect(() => {\n    const checkOverflow = () => {\n      if (textRef.current) {\n        const isOverflowing = textRef.current.scrollWidth > textRef.current.clientWidth;\n        setIsOverflowing(isOverflowing);\n      }\n    };\n\n    checkOverflow();\n    window.addEventListener('resize', checkOverflow);\n    return () => {\n      window.removeEventListener('resize', checkOverflow);\n    };\n  }, []);\n\n  return (\n    <div className=\"relative\" style={{ minWidth: props.size }}>\n      <div className=\"flex items-center gap-2 absolute inset-0\">\n        <div className={overflowStyle} ref={textRef}>\n          {isOverflowing ? (\n            <SimpleTooltip tooltip={props.children}>\n              <div className={overflowStyle}>\n                {props.children}\n              </div>\n            </SimpleTooltip>\n          ) : props.children}\n        </div>\n        {props.icon && <div>{props.icon}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport function AvatarCell(props: { src?: string, fallback?: string }) {\n  return (\n    <Avatar className=\"h-6 w-6\">\n      <AvatarImage src={props.src} />\n      <AvatarFallback>{props.fallback}</AvatarFallback>\n    </Avatar>\n  );\n}\n\nexport function DateCell(props: { date: Date, ignoreAfterYears?: number }) {\n  const ignore = !!props.ignoreAfterYears && new Date(new Date().setFullYear(new Date().getFullYear() + props.ignoreAfterYears)) < props.date;\n  const timeString = props.date.toLocaleTimeString([], { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });\n  return (\n    <TextCell size={140}>\n      {ignore ? 'Never' : timeString}\n    </TextCell>\n  );\n}\n\ntype ActionItem = '-' | {\n  item: React.ReactNode,\n  onClick: (e: React.MouseEvent) => void | Promise<void>,\n  danger?: boolean,\n  disabled?: boolean,\n  disabledTooltip?: string,\n}\n\nexport function ActionCell(props: {\n  items?: ActionItem[],\n  invisible?: boolean,\n}) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          className={cn(\n            \"flex h-8 w-8 p-0 data-[state=open]:bg-muted\",\n            props.invisible && \"invisible\",\n          )}\n        >\n          <DotsHorizontalIcon className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Open menu</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"min-w-[150px] max-w-[300px] stack-scope\">\n        {props.items?.map((item, index) => {\n          if (item === '-') {\n            return <DropdownMenuSeparator key={index} />;\n          }\n\n          const menuItemProps = {\n            onClick: item.onClick,\n            className: cn(item.danger ? \"text-destructive\" : \"\"),\n            disabled: item.disabled\n          };\n\n          const menuItem = (\n            <DropdownMenuItem {...menuItemProps} key={index}>\n              {item.item}\n            </DropdownMenuItem>\n          );\n\n          if (item.disabled && item.disabledTooltip) {\n            return (\n              <SimpleTooltip tooltip={item.disabledTooltip} key={index}>\n                {React.cloneElement(menuItem, {\n                  className: cn(menuItemProps.className, \"opacity-50 cursor-not-allowed\")\n                })}\n              </SimpleTooltip>\n            );\n          }\n\n          return menuItem;\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport function BadgeCell(props: { badges: string[], size?: number }) {\n  return (\n    <div className=\"flex items-center gap-1 flex-wrap\">\n      {props.badges.map((badge, index) => (\n        <Badge key={index} variant=\"secondary\">{badge}</Badge>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_react","isOverflowing","React"]}

package/dist/components/data-table/column-header.js

@@ -1,10 +1,65 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@stackframe/stack-ui";
-import { ArrowDown, ArrowUp } from "lucide-react";
-import { cn } from "../../lib/utils";
+"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/data-table/column-header.tsx
+var column_header_exports = {};
+__export(column_header_exports, {
+  DataTableColumnHeader: () => DataTableColumnHeader
+});
+module.exports = __toCommonJS(column_header_exports);
+var import_button = require("../ui/button.js");
+var import_dropdown_menu = require("../ui/dropdown-menu.js");
+var import_lucide_react = require("lucide-react");
+var import_utils = require("../../lib/utils.js");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Item(props) {
-    return (_jsx(DropdownMenuItem, { onClick: props.onClick, children: _jsxs("div", { className: "flex items-center", children: [_jsx(props.icon, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }), props.children] }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenuItem, { onClick: props.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(props.icon, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+    props.children
+  ] }) });
 }
-export function DataTableColumnHeader({ column, columnTitle, className, }) {
-    return (_jsx("div", { className: cn("flex items-center space-x-2", className), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: cn("-ml-3 h-8 data-[state=open]:bg-accent", !column.getCanSort() && "pointer-events-none"), children: [_jsx("span", { children: columnTitle }), column.getIsSorted() === "desc" ? (_jsx(ArrowDown, { className: "ml-2 h-4 w-4" })) : column.getIsSorted() === "asc" ? (_jsx(ArrowUp, { className: "ml-2 h-4 w-4" })) : null] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "stack-scope", children: [_jsx(Item, { icon: ArrowUp, onClick: () => column.toggleSorting(false), children: "Asc" }), _jsx(Item, { icon: ArrowDown, onClick: () => column.toggleSorting(true), children: "Desc" })] })] }) }));
+function DataTableColumnHeader({
+  column,
+  columnTitle,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("flex items-center space-x-2", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_button.Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: (0, import_utils.cn)("-ml-3 h-8 data-[state=open]:bg-accent", !column.getCanSort() && "pointer-events-none"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: columnTitle }),
+          column.getIsSorted() === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowDown, { className: "ml-2 h-4 w-4" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUp, { className: "ml-2 h-4 w-4" }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenuContent, { align: "start", className: "stack-scope", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { icon: import_lucide_react.ArrowUp, onClick: () => column.toggleSorting(false), children: "Asc" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { icon: import_lucide_react.ArrowDown, onClick: () => column.toggleSorting(true), children: "Desc" })
+    ] })
+  ] }) });
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataTableColumnHeader
+});
+//# sourceMappingURL=column-header.js.map

package/dist/components/data-table/column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-table/column-header.tsx"],"sourcesContent":["import { Button } from \"../ui/button\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from \"../ui/dropdown-menu\";\nimport { Column } from \"@tanstack/react-table\";\nimport { ArrowDown, ArrowUp, LucideIcon } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\ntype DataTableColumnHeaderProps<TData, TValue> = {\n  column: Column<TData, TValue>,\n  columnTitle: React.ReactNode,\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction Item(props: { icon: LucideIcon, onClick: () => void, children: React.ReactNode }) {\n  return (\n    <DropdownMenuItem onClick={props.onClick}>\n      <div className=\"flex items-center\">\n        <props.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n        {props.children}\n      </div>\n    </DropdownMenuItem>\n  );\n}\n\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  columnTitle,\n  className,\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  return (\n    <div className={cn(\"flex items-center space-x-2\", className)}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className={cn(\"-ml-3 h-8 data-[state=open]:bg-accent\", !column.getCanSort() && \"pointer-events-none\")}\n          >\n            <span>{columnTitle}</span>\n            {column.getIsSorted() === \"desc\" ? (\n              <ArrowDown className=\"ml-2 h-4 w-4\" />\n            ) : column.getIsSorted() === \"asc\" ? (\n              <ArrowUp className=\"ml-2 h-4 w-4\" />\n            ) : null}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"stack-scope\">\n          <Item icon={ArrowUp} onClick={() => column.toggleSorting(false)}>Asc</Item>\n          <Item icon={ArrowDown} onClick={() => column.toggleSorting(true)}>Desc</Item>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,2BAAyF;AAEzF,0BAA+C;AAC/C,mBAAmB;AAUb;AAHN,SAAS,KAAK,OAA6E;AACzF,SACE,4CAAC,yCAAiB,SAAS,MAAM,SAC/B,uDAAC,SAAI,WAAU,qBACb;AAAA,gDAAC,MAAM,MAAN,EAAW,WAAU,6CAA4C;AAAA,IACjE,MAAM;AAAA,KACT,GACF;AAEJ;AAEO,SAAS,sBAAqC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AACF,GAA8C;AAC5C,SACE,4CAAC,SAAI,eAAW,iBAAG,+BAA+B,SAAS,GACzD,uDAAC,qCACC;AAAA,gDAAC,4CAAoB,SAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAW,iBAAG,yCAAyC,CAAC,OAAO,WAAW,KAAK,qBAAqB;AAAA,QAEpG;AAAA,sDAAC,UAAM,uBAAY;AAAA,UAClB,OAAO,YAAY,MAAM,SACxB,4CAAC,iCAAU,WAAU,gBAAe,IAClC,OAAO,YAAY,MAAM,QAC3B,4CAAC,+BAAQ,WAAU,gBAAe,IAChC;AAAA;AAAA;AAAA,IACN,GACF;AAAA,IACA,6CAAC,4CAAoB,OAAM,SAAQ,WAAU,eAC3C;AAAA,kDAAC,QAAK,MAAM,6BAAS,SAAS,MAAM,OAAO,cAAc,KAAK,GAAG,iBAAG;AAAA,MACpE,4CAAC,QAAK,MAAM,+BAAW,SAAS,MAAM,OAAO,cAAc,IAAI,GAAG,kBAAI;AAAA,OACxE;AAAA,KACF,GACF;AAEJ;","names":[]}