@epilot/spark-ui 1.0.0-alpha.0

package/README.md

@@ -0,0 +1,137 @@
+# @epilot/spark-ui
+
+React UI component library for Spark SDK.
+
+## Installation
+
+```bash
+npm install @epilot/spark-ui
+# or
+bun add @epilot/spark-ui
+```
+
+## Styles (required)
+
+Import the UI package styles once (e.g. in your app entry). This ships:
+
+- Radix color tokens as CSS variables (e.g. `--slate-1`, `--mauve-a8`, …)
+- Default Spark brand tokens as CSS variables (e.g. `--spark-9`, `--spark-a3`, …)
+- Precompiled Tailwind utilities used by the components (e.g. `bg-spark-10`)
+
+Theme selectors follow the same convention as the portal:
+`:root, .light, .light-theme` and `.dark, .dark-theme`.
+
+```ts
+import '@epilot/spark-ui/styles'
+```
+
+---
+
+## Button
+
+Displays a button or a component that looks like a button.
+
+### Usage
+
+```tsx
+import { Button } from '@epilot/spark-ui'
+```
+
+```tsx
+<Button variant="primary">Button</Button>
+```
+
+### Examples
+
+#### Primary
+
+```tsx
+import { Button } from '@epilot/spark-ui'
+
+export function ButtonPrimary() {
+  return <Button variant="primary">Primary</Button>
+}
+```
+
+#### Secondary
+
+```tsx
+import { Button } from '@epilot/spark-ui'
+
+export function ButtonSecondary() {
+  return <Button variant="secondary">Secondary</Button>
+}
+```
+
+#### Tertiary
+
+```tsx
+import { Button } from '@epilot/spark-ui'
+
+export function ButtonTertiary() {
+  return <Button variant="tertiary">Tertiary</Button>
+}
+```
+
+#### Icon
+
+```tsx
+import { Button } from '@epilot/spark-ui'
+import { SearchIcon } from 'lucide-react'
+
+export function ButtonIcon() {
+  return (
+    <Button variant="icon" aria-label="Search">
+      <SearchIcon />
+    </Button>
+  )
+}
+```
+
+#### Size
+
+Use the `size` prop to change the size of the button.
+
+```tsx
+import { Button } from '@epilot/spark-ui'
+
+export function ButtonSizes() {
+  return (
+    <div className="flex items-center gap-2">
+      <Button size="small">Small</Button>
+      <Button size="default">Default</Button>
+      <Button size="medium">Medium</Button>
+    </div>
+  )
+}
+```
+
+#### As Child
+
+Use the `asChild` prop to render another component as a button. This is useful for rendering links that look like buttons.
+
+```tsx
+import Link from 'next/link'
+import { Button } from '@epilot/spark-ui'
+
+export function ButtonAsChild() {
+  return (
+    <Button asChild>
+      <Link href="/login">Login</Link>
+    </Button>
+  )
+}
+```
+
+### API Reference
+
+#### Button
+
+The `Button` component is a wrapper around the `button` element that adds styling and functionality.
+
+| Prop    | Type                                                                 | Default     |
+| ------- | -------------------------------------------------------------------- | ----------- |
+| variant | `"primary"` \| `"secondary"` \| `"tertiary"` \| `"bare"` \| `"icon"` | `"primary"` |
+| size    | `"small"` \| `"default"` \| `"medium"`                               | `"default"` |
+| shape   | `"default"`                                                          | `"default"` |
+| asChild | `boolean`                                                            | `false`     |

package/dist/index.cjs

@@ -0,0 +1,303 @@
+'use strict';
+
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var React2 = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer text-base font-medium transition-colors focus-visible:outline-hidden focus-visible:ring focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0`,
+  {
+    variants: {
+      variant: {
+        primary: "bg-spark-10 text-accent-contrast focus-visible:bg-spark-9 disabled:bg-spark-a3 disabled:text-spark-a7 hover:bg-spark-9",
+        secondary: "bg-spark-a3 text-spark-a12 focus-visible:bg-spark-a4 disabled:bg-slate-a3 disabled:text-spark-a7 hover:bg-spark-a4",
+        tertiary: "bg-transparent text-spark-a11 focus-visible:bg-slate-a3 disabled:bg-transparent disabled:text-spark-a7 hover:bg-slate-a3",
+        bare: "rounded-none! text-gray outline-hidden!",
+        icon: "rounded-md text-spark-a11 focus-visible:bg-slate-a3 hover:bg-slate-a3"
+      },
+      shape: {
+        default: "rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]"
+      },
+      size: {
+        small: "min-w-9 px-3 max-sm:h-10 md:h-9",
+        default: "h-11 min-w-10 px-3 max-sm:h-12",
+        medium: "h-12 min-w-12 px-4"
+      }
+    },
+    defaultVariants: {
+      shape: "default",
+      variant: "primary",
+      size: "default"
+    }
+  }
+);
+var Button = React2__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+Button.displayName = "Button";
+var Card = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("relative flex w-full flex-col gap-1 rounded-2xl bg-slate-a3 p-4", className),
+      ref,
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-4", className), ref, ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardIcon = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex shrink-0 items-center justify-center text-slate-11", className),
+      ref,
+      ...props
+    }
+  )
+);
+CardIcon.displayName = "CardIcon";
+var CardTitle = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
+    {
+      className: cn("text-base font-medium leading-5 text-slate-12", className),
+      ref,
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm leading-5 text-slate-11", className), ref, ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", className), ref, ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end gap-2 pt-2", className),
+      ref,
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var CardSkeleton = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex w-full items-center gap-4 rounded-2xl bg-slate-a3 p-4 opacity-80",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-10 shrink-0 animate-pulse rounded-full bg-slate-a5" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-slate-a5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-slate-a5" })
+        ] })
+      ]
+    }
+  )
+);
+CardSkeleton.displayName = "CardSkeleton";
+var Dialog = DialogPrimitive__namespace.Root;
+var DialogTrigger = DialogPrimitive__namespace.Trigger;
+var DialogPortal = DialogPrimitive__namespace.Portal;
+var DialogClose = DialogPrimitive__namespace.Close;
+var DialogOverlay = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black-a6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-black-a8",
+      className
+    ),
+    "data-overlay": "true",
+    ref,
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+var onInteractOutsideHandler = (event) => {
+  const target = event.target;
+  const isOverlay = target.dataset.overlay === "true";
+  if (!isOverlay) event.preventDefault();
+};
+var DialogContent = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Content,
+    {
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-[90%] min-w-80 max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-slate-2 p-6 text-gray shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-top-48% dark:bg-gray-2 sm:w-1/2",
+        className
+      ),
+      onInteractOutside: onInteractOutsideHandler,
+      ref,
+      ...props,
+      children
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    className: cn("text-lg font-bold text-gray", className),
+    ref,
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+var DialogDescription = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    className: cn("text-md text-gray", className),
+    ref,
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+var DisplayField = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "relative flex min-h-12 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+DisplayField.displayName = "DisplayField";
+var DisplayFieldLabel = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "text-sm font-medium leading-5 text-slate-11 [overflow-wrap:break-word]",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+DisplayFieldLabel.displayName = "DisplayFieldLabel";
+var DisplayFieldValue = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "min-h-5 w-full whitespace-pre-wrap text-base tabular-nums leading-5 text-slate-12",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+DisplayFieldValue.displayName = "DisplayFieldValue";
+var DisplayFieldContent = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", className), ref, ...props })
+);
+DisplayFieldContent.displayName = "DisplayFieldContent";
+var DisplayFieldSkeleton = React2__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex h-20 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4 opacity-80",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-1/2 max-w-52 animate-pulse rounded-md bg-slate-a5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-3/4 max-w-72 animate-pulse rounded-md bg-slate-a5" })
+      ]
+    }
+  )
+);
+DisplayFieldSkeleton.displayName = "DisplayFieldSkeleton";
+
+exports.Button = Button;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardIcon = CardIcon;
+exports.CardSkeleton = CardSkeleton;
+exports.CardTitle = CardTitle;
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.DisplayField = DisplayField;
+exports.DisplayFieldContent = DisplayFieldContent;
+exports.DisplayFieldLabel = DisplayFieldLabel;
+exports.DisplayFieldSkeleton = DisplayFieldSkeleton;
+exports.DisplayFieldValue = DisplayFieldValue;
+exports.buttonVariants = buttonVariants;
+exports.cn = cn;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts","../src/components/button/button.tsx","../src/components/card/card.tsx","../src/components/dialog/dialog.tsx","../src/components/display-field/display-field.tsx"],"names":["twMerge","clsx","cva","React","Slot","jsx","React2","jsxs","DialogPrimitive","React3","Fragment","React4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,IAAM,cAAA,GAAiBC,0BAAA;AAAA,EACrB,CAAA,2RAAA,CAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,wHAAA;AAAA,QACF,SAAA,EACE,oHAAA;AAAA,QACF,QAAA,EACE,0HAAA;AAAA,QACF,IAAA,EAAM,yCAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,OAAA,EAAS;AAAA,OACX;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,KAAA,EAAO,iCAAA;AAAA,QACP,OAAA,EAAS,gCAAA;AAAA,QACT,MAAA,EAAQ;AAAA;AACV,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,KAAA,EAAO,SAAA;AAAA,MACP,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAOA,IAAM,MAAA,GAAeC,iBAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,UAAU,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAChE,IAAA,MAAM,IAAA,GAA0B,UAAUC,cAAA,GAAO,QAAA;AAEjD,IAAA,uBACEC,cAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,eAAe,EAAE,OAAA,EAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA,EAAG,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAAA,EAE5F;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AChDrB,IAAM,IAAA,GAAaC,iBAAA,CAAA,UAAA;AAAA,EACjB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACxBD,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,iEAAA,EAAmE,SAAS,CAAA;AAAA,MAC1F,GAAA;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;AAEnB,IAAM,UAAA,GAAmBC,iBAAA,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxBD,cAAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,KAAA,EAAO;AAEnF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAEzB,IAAM,QAAA,GAAiBC,iBAAA,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACxBD,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,yDAAA,EAA2D,SAAS,CAAA;AAAA,MAClF,GAAA;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AAEvB,IAAM,SAAA,GAAkBC,iBAAA,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACxBD,cAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,+CAAA,EAAiD,SAAS,CAAA;AAAA,MACxE,GAAA;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AAExB,IAAM,eAAA,GAAwBC,6BAG5B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1BD,eAAC,GAAA,EAAA,EAAE,SAAA,EAAW,GAAG,iCAAA,EAAmC,SAAS,GAAG,GAAA,EAAW,GAAG,OAAO,CACtF;AAED,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAE9B,IAAM,WAAA,GAAoBC,iBAAA,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBAAQD,cAAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,EAAA,EAAI,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,KAAA,EAAO;AAC5F;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;AAE1B,IAAM,UAAA,GAAmBC,iBAAA,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACxBD,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,0CAAA,EAA4C,SAAS,CAAA;AAAA,MACnE,GAAA;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAEzB,IAAM,YAAA,GAAqBC,iBAAA,CAAA,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxBC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,gFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAF,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EAA0D,CAAA;AAAA,wBACzEE,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACb,QAAA,EAAA;AAAA,0BAAAF,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EAA0D,CAAA;AAAA,0BACzEA,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EAA0D;AAAA,SAAA,EAC3E;AAAA;AAAA;AAAA;AAGN;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;ACzF3B,IAAM,MAAA,GAAyBG,0BAAA,CAAA;AAE/B,IAAM,aAAA,GAAgCA,0BAAA,CAAA;AAEtC,IAAM,YAAA,GAA+BA,0BAAA,CAAA;AAErC,IAAM,WAAA,GAA8BA,0BAAA,CAAA;AAEpC,IAAM,aAAA,GAAsBC,6BAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BJ,cAAAA;AAAA,EAAiBG,0BAAA,CAAA,OAAA;AAAA,EAAhB;AAAA,IACC,SAAA,EAAW,EAAA;AAAA,MACT,yKAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,cAAA,EAAa,MAAA;AAAA,IACb,GAAA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,aAAA,CAAc,cAA8BA,0BAAA,CAAA,OAAA,CAAQ,WAAA;AAEpD,IAAM,wBAAA,GAA2B,CAAC,KAAA,KAAuB;AACvD,EAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,OAAA,CAAQ,OAAA,KAAY,MAAA;AAK7C,EAAA,IAAI,CAAC,SAAA,EAAW,KAAA,CAAM,cAAA,EAAe;AACvC,CAAA;AAEA,IAAM,aAAA,GAAsBC,iBAAA,CAAA,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACpCF,eAAAA,CAAAG,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,kBAAAL,eAAC,aAAA,EAAA,EAAc,CAAA;AAAA,kBACfA,cAAAA;AAAA,IAAiBG,0BAAA,CAAA,OAAA;AAAA,IAAhB;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,gfAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,iBAAA,EAAmB,wBAAA;AAAA,MACnB,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA;AACH,CAAA,EACF,CACD;AAED,aAAA,CAAc,cAA8BA,0BAAA,CAAA,OAAA,CAAQ,WAAA;AAEpD,IAAM,eAAe,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,qBAC1CH,cAAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,EAAA,EAAI,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO;AAGhD,YAAA,CAAa,WAAA,GAAc,cAAA;AAE3B,IAAM,eAAe,CAAC,EAAE,WAAW,GAAG,KAAA,uBACpCA,cAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAW,EAAA,CAAG,+DAAA,EAAiE,SAAS,CAAA;AAAA,IACvF,GAAG;AAAA;AACN;AAGF,YAAA,CAAa,WAAA,GAAc,cAAA;AAE3B,IAAM,WAAA,GAAoBI,6BAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BJ,cAAAA;AAAA,EAAiBG,0BAAA,CAAA,KAAA;AAAA,EAAhB;AAAA,IACC,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,IACtD,GAAA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,WAAA,CAAY,cAA8BA,0BAAA,CAAA,KAAA,CAAM,WAAA;AAEhD,IAAM,iBAAA,GAA0BC,6BAG9B,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1BJ,cAAAA;AAAA,EAAiBG,0BAAA,CAAA,WAAA;AAAA,EAAhB;AAAA,IACC,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,SAAS,CAAA;AAAA,IAC5C,GAAA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,iBAAA,CAAkB,cAA8BA,0BAAA,CAAA,WAAA,CAAY,WAAA;ACxF5D,IAAM,YAAA,GAAqBG,iBAAA,CAAA,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACxBN,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4EAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;AAK3B,IAAM,iBAAA,GAA0BM,iBAAA,CAAA,UAAA;AAAA,EAC9B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACxBN,cAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,wEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;AAKhC,IAAM,iBAAA,GAA0BM,iBAAA,CAAA,UAAA;AAAA,EAC9B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACxBN,cAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,mFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;AAKhC,IAAM,mBAAA,GAA4BM,iBAAA,CAAA,UAAA;AAAA,EAChC,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBAAQN,cAAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,EAAA,EAAI,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,KAAA,EAAO;AAC5F;AAEA,mBAAA,CAAoB,WAAA,GAAc,qBAAA;AAKlC,IAAM,oBAAA,GAA6BM,iBAAA,CAAA,UAAA;AAAA,EACjC,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACxBJ,eAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,mFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAF,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EAA0D,CAAA;AAAA,wBACzEA,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EAA0D;AAAA;AAAA;AAAA;AAG/E;AAEA,oBAAA,CAAqB,WAAA,GAAc,sBAAA","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../utils/cn'\n\nconst buttonVariants = cva(\n  `inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer text-base font-medium transition-colors focus-visible:outline-hidden focus-visible:ring focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-spark-10 text-accent-contrast focus-visible:bg-spark-9 disabled:bg-spark-a3 disabled:text-spark-a7 hover:bg-spark-9',\n        secondary:\n          'bg-spark-a3 text-spark-a12 focus-visible:bg-spark-a4 disabled:bg-slate-a3 disabled:text-spark-a7 hover:bg-spark-a4',\n        tertiary:\n          'bg-transparent text-spark-a11 focus-visible:bg-slate-a3 disabled:bg-transparent disabled:text-spark-a7 hover:bg-slate-a3',\n        bare: 'rounded-none! text-gray outline-hidden!',\n        icon: 'rounded-md text-spark-a11 focus-visible:bg-slate-a3 hover:bg-slate-a3',\n      },\n      shape: {\n        default: 'rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n      },\n      size: {\n        small: 'min-w-9 px-3 max-sm:h-10 md:h-9',\n        default: 'h-11 min-w-10 px-3 max-sm:h-12',\n        medium: 'h-12 min-w-12 px-4',\n      },\n    },\n    defaultVariants: {\n      shape: 'default',\n      variant: 'primary',\n      size: 'default',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp: React.ElementType = asChild ? Slot : 'button'\n\n    return (\n      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />\n    )\n  }\n) as React.FC<ButtonProps & { ref?: React.Ref<HTMLButtonElement> }>\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n","import * as React from 'react'\n\nimport { cn } from '../../utils/cn'\n\nconst Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn('relative flex w-full flex-col gap-1 rounded-2xl bg-slate-a3 p-4', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div className={cn('flex items-center gap-4', className)} ref={ref} {...props} />\n  )\n)\n\nCardHeader.displayName = 'CardHeader'\n\nconst CardIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn('flex shrink-0 items-center justify-center text-slate-11', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nCardIcon.displayName = 'CardIcon'\n\nconst CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => (\n    <h3\n      className={cn('text-base font-medium leading-5 text-slate-12', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p className={cn('text-sm leading-5 text-slate-11', className)} ref={ref} {...props} />\n))\n\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => <div className={cn('', className)} ref={ref} {...props} />\n)\n\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn('flex items-center justify-end gap-2 pt-2', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nCardFooter.displayName = 'CardFooter'\n\nconst CardSkeleton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn(\n        'relative flex w-full items-center gap-4 rounded-2xl bg-slate-a3 p-4 opacity-80',\n        className\n      )}\n      ref={ref}\n      {...props}\n    >\n      <div className=\"size-10 shrink-0 animate-pulse rounded-full bg-slate-a5\" />\n      <div className=\"flex flex-1 flex-col gap-y-2\">\n        <div className=\"h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-slate-a5\" />\n        <div className=\"h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-slate-a5\" />\n      </div>\n    </div>\n  )\n)\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport {\n  Card,\n  CardHeader,\n  CardIcon,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardSkeleton,\n}\n","import * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { cn } from '../../utils/cn'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    className={cn(\n      'fixed inset-0 z-50 bg-black-a6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-black-a8',\n      className\n    )}\n    data-overlay=\"true\"\n    ref={ref}\n    {...props}\n  />\n))\n\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst onInteractOutsideHandler = (event: CustomEvent) => {\n  const target = event.target as HTMLElement\n  const isOverlay = target.dataset.overlay === 'true'\n\n  // Our dialogs contain interactive elements that are mounted outside of the drawer\n  // Browser extensions like password managers or grammar checkers are also mounted outside\n  // We still dismiss on a click/tap outside\n  if (!isOverlay) event.preventDefault()\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      className={cn(\n        'fixed left-[50%] top-[50%] z-50 grid w-[90%] min-w-80 max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-slate-2 p-6 text-gray shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-top-48% dark:bg-gray-2 sm:w-1/2',\n        className\n      )}\n      onInteractOutside={onInteractOutsideHandler}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Content>\n  </>\n))\n\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('', className)} {...props} />\n)\n\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n    {...props}\n  />\n)\n\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    className={cn('text-lg font-bold text-gray', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    className={cn('text-md text-gray', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n","import * as React from 'react'\n\nimport { cn } from '../../utils/cn'\n\n/**\n * DisplayField - Root container for displaying read-only label-value pairs\n *\n * @example\n * <DisplayField>\n *   <DisplayFieldLabel>Email</DisplayFieldLabel>\n *   <DisplayFieldValue>john@example.com</DisplayFieldValue>\n * </DisplayField>\n */\nconst DisplayField = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn(\n        'relative flex min-h-12 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4',\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nDisplayField.displayName = 'DisplayField'\n\n/**\n * DisplayFieldLabel - Label/title for the field (maps to \"Title\" pattern)\n */\nconst DisplayFieldLabel = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(\n  ({ className, ...props }, ref) => (\n    <span\n      className={cn(\n        'text-sm font-medium leading-5 text-slate-11 [overflow-wrap:break-word]',\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nDisplayFieldLabel.displayName = 'DisplayFieldLabel'\n\n/**\n * DisplayFieldValue - Primary value display (maps to \"Description\" pattern)\n */\nconst DisplayFieldValue = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(\n  ({ className, ...props }, ref) => (\n    <span\n      className={cn(\n        'min-h-5 w-full whitespace-pre-wrap text-base tabular-nums leading-5 text-slate-12',\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nDisplayFieldValue.displayName = 'DisplayFieldValue'\n\n/**\n * DisplayFieldContent - Container for custom content within the field\n */\nconst DisplayFieldContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => <div className={cn('', className)} ref={ref} {...props} />\n)\n\nDisplayFieldContent.displayName = 'DisplayFieldContent'\n\n/**\n * DisplayFieldSkeleton - Loading placeholder with animated skeleton\n */\nconst DisplayFieldSkeleton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn(\n        'relative flex h-20 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4 opacity-80',\n        className\n      )}\n      ref={ref}\n      {...props}\n    >\n      <div className=\"h-5 w-1/2 max-w-52 animate-pulse rounded-md bg-slate-a5\" />\n      <div className=\"h-5 w-3/4 max-w-72 animate-pulse rounded-md bg-slate-a5\" />\n    </div>\n  )\n)\n\nDisplayFieldSkeleton.displayName = 'DisplayFieldSkeleton'\n\nexport {\n  DisplayField,\n  DisplayFieldLabel,\n  DisplayFieldValue,\n  DisplayFieldContent,\n  DisplayFieldSkeleton,\n}\n"]}

package/dist/index.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-space-x-reverse:0;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer base{:root,.light,.light-theme{--green-1:#fbfefc;--green-2:#f4fbf6;--green-3:#e6f6eb;--green-4:#d6f1df;--green-5:#c4e8d1;--green-6:#adddc0;--green-7:#8eceaa;--green-8:#5bb98b;--green-9:#30a46c;--green-10:#2b9a66;--green-11:#218358;--green-12:#193b2d}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--green-1:color(display-p3 .986 .996 .989);--green-2:color(display-p3 .963 .983 .967);--green-3:color(display-p3 .913 .964 .925);--green-4:color(display-p3 .859 .94 .879);--green-5:color(display-p3 .796 .907 .826);--green-6:color(display-p3 .718 .863 .761);--green-7:color(display-p3 .61 .801 .675);--green-8:color(display-p3 .451 .715 .559);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .308 .595 .417);--green-11:color(display-p3 .19 .5 .32);--green-12:color(display-p3 .132 .228 .18)}}}:root,.light,.light-theme{--blue-1:#fbfdff;--blue-2:#f4faff;--blue-3:#e6f4fe;--blue-4:#d5efff;--blue-5:#c2e5ff;--blue-6:#acd8fc;--blue-7:#8ec8f6;--blue-8:#5eb1ef;--blue-9:#0090ff;--blue-10:#0588f0;--blue-11:#0d74ce;--blue-12:#113264}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--blue-1:color(display-p3 .986 .992 .999);--blue-2:color(display-p3 .96 .979 .998);--blue-3:color(display-p3 .912 .956 .991);--blue-4:color(display-p3 .853 .932 1);--blue-5:color(display-p3 .788 .894 .998);--blue-6:color(display-p3 .709 .843 .976);--blue-7:color(display-p3 .606 .777 .947);--blue-8:color(display-p3 .451 .688 .917);--blue-9:color(display-p3 .247 .556 .969);--blue-10:color(display-p3 .234 .523 .912);--blue-11:color(display-p3 .15 .44 .84);--blue-12:color(display-p3 .102 .193 .379)}}}:root,.light,.light-theme{--red-1:#fffcfc;--red-2:#fff7f7;--red-3:#feebec;--red-4:#ffdbdc;--red-5:#ffcdce;--red-6:#fdbdbe;--red-7:#f4a9aa;--red-8:#eb8e90;--red-9:#e5484d;--red-10:#dc3e42;--red-11:#ce2c31;--red-12:#641723}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--red-1:color(display-p3 .998 .989 .988);--red-2:color(display-p3 .995 .971 .971);--red-3:color(display-p3 .985 .925 .925);--red-4:color(display-p3 .999 .866 .866);--red-5:color(display-p3 .984 .812 .811);--red-6:color(display-p3 .955 .751 .749);--red-7:color(display-p3 .915 .675 .672);--red-8:color(display-p3 .872 .575 .572);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .798 .294 .285);--red-11:color(display-p3 .744 .234 .222);--red-12:color(display-p3 .36 .115 .143)}}}:root,.light,.light-theme{--orange-1:#fefcfb;--orange-2:#fff7ed;--orange-3:#ffefd6;--orange-4:#ffdfb5;--orange-5:#ffd19a;--orange-6:#ffc182;--orange-7:#f5ae73;--orange-8:#ec9455;--orange-9:#f76b15;--orange-10:#ef5f00;--orange-11:#cc4e00;--orange-12:#582d1d}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--orange-1:color(display-p3 .995 .988 .985);--orange-2:color(display-p3 .994 .968 .934);--orange-3:color(display-p3 .989 .938 .85);--orange-4:color(display-p3 1 .874 .687);--orange-5:color(display-p3 1 .821 .583);--orange-6:color(display-p3 .975 .767 .545);--orange-7:color(display-p3 .919 .693 .486);--orange-8:color(display-p3 .877 .597 .379);--orange-9:color(display-p3 .9 .45 .2);--orange-10:color(display-p3 .87 .409 .164);--orange-11:color(display-p3 .76 .34 0);--orange-12:color(display-p3 .323 .185 .127)}}}:root,.light,.light-theme{--pink-1:#fffcfe;--pink-2:#fef7fb;--pink-3:#fee9f5;--pink-4:#fbdcef;--pink-5:#f6cee7;--pink-6:#efbfdd;--pink-7:#e7acd0;--pink-8:#dd93c2;--pink-9:#d6409f;--pink-10:#cf3897;--pink-11:#c2298a;--pink-12:#651249}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--pink-1:color(display-p3 .998 .989 .996);--pink-2:color(display-p3 .992 .97 .985);--pink-3:color(display-p3 .981 .917 .96);--pink-4:color(display-p3 .963 .867 .932);--pink-5:color(display-p3 .939 .815 .899);--pink-6:color(display-p3 .907 .756 .859);--pink-7:color(display-p3 .869 .683 .81);--pink-8:color(display-p3 .825 .59 .751);--pink-9:color(display-p3 .775 .297 .61);--pink-10:color(display-p3 .748 .27 .581);--pink-11:color(display-p3 .698 .219 .528);--pink-12:color(display-p3 .363 .101 .279)}}}:root,.light,.light-theme{--green-a1:#00c04004;--green-a2:#00a32f0b;--green-a3:#00a43319;--green-a4:#00a83829;--green-a5:#019c393b;--green-a6:#00963c52;--green-a7:#00914071;--green-a8:#00924ba4;--green-a9:#008f4acf;--green-a10:#008647d4;--green-a11:#00713fde;--green-a12:#002616e6}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--green-a1:color(display-p3 .024 .757 .267/.016);--green-a2:color(display-p3 .024 .565 .129/.036);--green-a3:color(display-p3 .012 .596 .145/.087);--green-a4:color(display-p3 .008 .588 .145/.142);--green-a5:color(display-p3 .004 .541 .157/.204);--green-a6:color(display-p3 .004 .518 .157/.283);--green-a7:color(display-p3 .004 .486 .165/.389);--green-a8:color(display-p3 0 .478 .2/.55);--green-a9:color(display-p3 0 .455 .165/.667);--green-a10:color(display-p3 0 .416 .153/.691);--green-a11:color(display-p3 .19 .5 .32);--green-a12:color(display-p3 .132 .228 .18)}}}:root,.light,.light-theme{--blue-a1:#0080ff04;--blue-a2:#008cff0b;--blue-a3:#008ff519;--blue-a4:#009eff2a;--blue-a5:#0093ff3d;--blue-a6:#0088f653;--blue-a7:#0083eb71;--blue-a8:#0084e6a1;--blue-a9:#0090ff;--blue-a10:#0086f0fa;--blue-a11:#006dcbf2;--blue-a12:#002359ee}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--blue-a1:color(display-p3 .024 .514 1/.016);--blue-a2:color(display-p3 .024 .514 .906/.04);--blue-a3:color(display-p3 .012 .506 .914/.087);--blue-a4:color(display-p3 .008 .545 1/.146);--blue-a5:color(display-p3 .004 .502 .984/.212);--blue-a6:color(display-p3 .004 .463 .922/.291);--blue-a7:color(display-p3 .004 .431 .863/.393);--blue-a8:color(display-p3 0 .427 .851/.55);--blue-a9:color(display-p3 0 .412 .961/.753);--blue-a10:color(display-p3 0 .376 .886/.765);--blue-a11:color(display-p3 .15 .44 .84);--blue-a12:color(display-p3 .102 .193 .379)}}}:root,.light,.light-theme{--red-a1:#ff000003;--red-a2:#ff000008;--red-a3:#f3000d14;--red-a4:#ff000824;--red-a5:#ff000632;--red-a6:#f8000442;--red-a7:#df000356;--red-a8:#d2000571;--red-a9:#db0007b7;--red-a10:#d10005c1;--red-a11:#c40006d3;--red-a12:#55000de8}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--red-a1:color(display-p3 .675 .024 .024/.012);--red-a2:color(display-p3 .863 .024 .024/.028);--red-a3:color(display-p3 .792 .008 .008/.075);--red-a4:color(display-p3 1 .008 .008/.134);--red-a5:color(display-p3 .918 .008 .008/.189);--red-a6:color(display-p3 .831 .02 .004/.251);--red-a7:color(display-p3 .741 .016 .004/.33);--red-a8:color(display-p3 .698 .012 .004/.428);--red-a9:color(display-p3 .749 .008 0/.675);--red-a10:color(display-p3 .714 .012 0/.714);--red-a11:color(display-p3 .744 .234 .222);--red-a12:color(display-p3 .36 .115 .143)}}}:root,.light,.light-theme{--orange-a1:#c0400004;--orange-a2:#ff8e0012;--orange-a3:#ff9c0029;--orange-a4:#ff91014a;--orange-a5:#ff8b0065;--orange-a6:#ff81007d;--orange-a7:#ed6c008c;--orange-a8:#e35f00aa;--orange-a9:#f65e00ea;--orange-a10:#ef5f00;--orange-a11:#cc4e00;--orange-a12:#431200e2}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--orange-a1:color(display-p3 .757 .267 .024/.016);--orange-a2:color(display-p3 .886 .533 .008/.067);--orange-a3:color(display-p3 .922 .584 .008/.15);--orange-a4:color(display-p3 1 .604 .004/.314);--orange-a5:color(display-p3 1 .569 .004/.416);--orange-a6:color(display-p3 .949 .494 .004/.455);--orange-a7:color(display-p3 .839 .408 0/.514);--orange-a8:color(display-p3 .804 .349 0/.62);--orange-a9:color(display-p3 .878 .314 0/.8);--orange-a10:color(display-p3 .843 .29 0/.836);--orange-a11:color(display-p3 .76 .34 0);--orange-a12:color(display-p3 .323 .185 .127)}}}:root,.light,.light-theme{--pink-a1:#ff00aa03;--pink-a2:#e0008008;--pink-a3:#f4008c16;--pink-a4:#e2008b23;--pink-a5:#d1008331;--pink-a6:#c0007840;--pink-a7:#b6006f53;--pink-a8:#af006f6c;--pink-a9:#c8007fbf;--pink-a10:#c2007ac7;--pink-a11:#b60074d6;--pink-a12:#59003bed}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--pink-a1:color(display-p3 .675 .024 .675/.012);--pink-a2:color(display-p3 .757 .02 .51/.032);--pink-a3:color(display-p3 .765 .008 .529/.083);--pink-a4:color(display-p3 .737 .008 .506/.134);--pink-a5:color(display-p3 .663 .004 .451/.185);--pink-a6:color(display-p3 .616 .004 .424/.244);--pink-a7:color(display-p3 .596 .004 .412/.318);--pink-a8:color(display-p3 .573 .004 .404/.412);--pink-a9:color(display-p3 .682 0 .447/.702);--pink-a10:color(display-p3 .655 0 .424/.73);--pink-a11:color(display-p3 .698 .219 .528);--pink-a12:color(display-p3 .363 .101 .279)}}}.dark,.dark-theme{--green-1:#0e1512;--green-2:#121b17;--green-3:#132d21;--green-4:#113b29;--green-5:#174933;--green-6:#20573e;--green-7:#28684a;--green-8:#2f7c57;--green-9:#30a46c;--green-10:#33b074;--green-11:#3dd68c;--green-12:#b1f1cb}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--green-1:color(display-p3 .062 .083 .071);--green-2:color(display-p3 .079 .106 .09);--green-3:color(display-p3 .1 .173 .133);--green-4:color(display-p3 .115 .229 .166);--green-5:color(display-p3 .147 .282 .206);--green-6:color(display-p3 .185 .338 .25);--green-7:color(display-p3 .227 .403 .298);--green-8:color(display-p3 .27 .479 .351);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .357 .682 .474);--green-11:color(display-p3 .434 .828 .573);--green-12:color(display-p3 .747 .938 .807)}}}.dark,.dark-theme{--blue-1:#0d1520;--blue-2:#111927;--blue-3:#0d2847;--blue-4:#003362;--blue-5:#004074;--blue-6:#104d87;--blue-7:#205d9e;--blue-8:#2870bd;--blue-9:#0090ff;--blue-10:#3b9eff;--blue-11:#70b8ff;--blue-12:#c2e6ff}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--blue-1:color(display-p3 .057 .081 .122);--blue-2:color(display-p3 .072 .098 .147);--blue-3:color(display-p3 .078 .154 .27);--blue-4:color(display-p3 .033 .197 .37);--blue-5:color(display-p3 .08 .245 .441);--blue-6:color(display-p3 .14 .298 .511);--blue-7:color(display-p3 .195 .361 .6);--blue-8:color(display-p3 .239 .434 .72);--blue-9:color(display-p3 .247 .556 .969);--blue-10:color(display-p3 .344 .612 .973);--blue-11:color(display-p3 .49 .72 1);--blue-12:color(display-p3 .788 .898 .99)}}}.dark,.dark-theme{--red-1:#191111;--red-2:#201314;--red-3:#3b1219;--red-4:#500f1c;--red-5:#611623;--red-6:#72232d;--red-7:#8c333a;--red-8:#b54548;--red-9:#e5484d;--red-10:#ec5d5e;--red-11:#ff9592;--red-12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--red-1:color(display-p3 .093 .068 .067);--red-2:color(display-p3 .118 .077 .079);--red-3:color(display-p3 .211 .081 .099);--red-4:color(display-p3 .287 .079 .113);--red-5:color(display-p3 .348 .11 .142);--red-6:color(display-p3 .414 .16 .183);--red-7:color(display-p3 .508 .224 .236);--red-8:color(display-p3 .659 .298 .297);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .861 .403 .387);--red-11:color(display-p3 1 .57 .55);--red-12:color(display-p3 .971 .826 .852)}}}.dark,.dark-theme{--orange-1:#17120e;--orange-2:#1e160f;--orange-3:#331e0b;--orange-4:#462100;--orange-5:#562800;--orange-6:#66350c;--orange-7:#7e451d;--orange-8:#a35829;--orange-9:#f76b15;--orange-10:#ff801f;--orange-11:#ffa057;--orange-12:#ffe0c2}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--orange-1:color(display-p3 .088 .07 .057);--orange-2:color(display-p3 .113 .089 .061);--orange-3:color(display-p3 .189 .12 .056);--orange-4:color(display-p3 .262 .132 0);--orange-5:color(display-p3 .315 .168 .016);--orange-6:color(display-p3 .376 .219 .088);--orange-7:color(display-p3 .465 .283 .147);--orange-8:color(display-p3 .601 .359 .201);--orange-9:color(display-p3 .9 .45 .2);--orange-10:color(display-p3 .98 .51 .23);--orange-11:color(display-p3 1 .63 .38);--orange-12:color(display-p3 .98 .883 .775)}}}.dark,.dark-theme{--pink-1:#191117;--pink-2:#21121d;--pink-3:#37172f;--pink-4:#4b143d;--pink-5:#591c47;--pink-6:#692955;--pink-7:#833869;--pink-8:#a84885;--pink-9:#d6409f;--pink-10:#de51a8;--pink-11:#ff8dcc;--pink-12:#fdd1ea}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--pink-1:color(display-p3 .093 .068 .089);--pink-2:color(display-p3 .121 .073 .11);--pink-3:color(display-p3 .198 .098 .179);--pink-4:color(display-p3 .271 .095 .231);--pink-5:color(display-p3 .32 .127 .273);--pink-6:color(display-p3 .382 .177 .326);--pink-7:color(display-p3 .477 .238 .405);--pink-8:color(display-p3 .612 .304 .51);--pink-9:color(display-p3 .775 .297 .61);--pink-10:color(display-p3 .808 .356 .645);--pink-11:color(display-p3 1 .535 .78);--pink-12:color(display-p3 .964 .826 .912)}}}.dark,.dark-theme{--green-a1:#00de4505;--green-a2:#29f99d0b;--green-a3:#22ff991e;--green-a4:#11ff992d;--green-a5:#2bffa23c;--green-a6:#44ffaa4b;--green-a7:#50fdac5e;--green-a8:#54ffad73;--green-a9:#44ffa49e;--green-a10:#43fea4ab;--green-a11:#46fea5d4;--green-a12:#bbffd7f0}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--green-a1:color(display-p3 0 .992 .298/.017);--green-a2:color(display-p3 .341 .98 .616/.043);--green-a3:color(display-p3 .376 .996 .655/.114);--green-a4:color(display-p3 .341 .996 .635/.173);--green-a5:color(display-p3 .408 1 .678/.232);--green-a6:color(display-p3 .475 1 .706/.29);--green-a7:color(display-p3 .514 1 .706/.362);--green-a8:color(display-p3 .529 1 .718/.442);--green-a9:color(display-p3 .502 .996 .682/.61);--green-a10:color(display-p3 .506 1 .682/.66);--green-a11:color(display-p3 .434 .828 .573);--green-a12:color(display-p3 .747 .938 .807)}}}.dark,.dark-theme{--blue-a1:#004df211;--blue-a2:#1166fb18;--blue-a3:#0077ff3a;--blue-a4:#0075ff57;--blue-a5:#0081fd6b;--blue-a6:#0f89fd7f;--blue-a7:#2a91fe98;--blue-a8:#3094feb9;--blue-a9:#0090ff;--blue-a10:#3b9eff;--blue-a11:#70b8ff;--blue-a12:#c2e6ff}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--blue-a1:color(display-p3 0 .333 1/.059);--blue-a2:color(display-p3 .114 .435 .988/.085);--blue-a3:color(display-p3 .122 .463 1/.219);--blue-a4:color(display-p3 0 .467 1/.324);--blue-a5:color(display-p3 .098 .51 1/.4);--blue-a6:color(display-p3 .224 .557 1/.475);--blue-a7:color(display-p3 .294 .584 1/.572);--blue-a8:color(display-p3 .314 .592 1/.702);--blue-a9:color(display-p3 .251 .573 .996/.967);--blue-a10:color(display-p3 .357 .631 1/.971);--blue-a11:color(display-p3 .49 .72 1);--blue-a12:color(display-p3 .788 .898 .99)}}}.dark,.dark-theme{--red-a1:#f4121209;--red-a2:#f22f3e11;--red-a3:#ff173f2d;--red-a4:#fe0a3b44;--red-a5:#ff204756;--red-a6:#ff3e5668;--red-a7:#ff536184;--red-a8:#ff5d61b0;--red-a9:#fe4e54e4;--red-a10:#ff6465eb;--red-a11:#ff9592;--red-a12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--red-a1:color(display-p3 .984 .071 .071/.03);--red-a2:color(display-p3 .996 .282 .282/.055);--red-a3:color(display-p3 1 .169 .271/.156);--red-a4:color(display-p3 1 .118 .267/.236);--red-a5:color(display-p3 1 .212 .314/.303);--red-a6:color(display-p3 1 .318 .38/.374);--red-a7:color(display-p3 1 .4 .424/.475);--red-a8:color(display-p3 1 .431 .431/.635);--red-a9:color(display-p3 1 .388 .384/.82);--red-a10:color(display-p3 1 .463 .447/.853);--red-a11:color(display-p3 1 .57 .55);--red-a12:color(display-p3 .971 .826 .852)}}}.dark,.dark-theme{--orange-a1:#ec360007;--orange-a2:#fe6d000e;--orange-a3:#fb6a0025;--orange-a4:#ff590039;--orange-a5:#ff61004a;--orange-a6:#fd75045c;--orange-a7:#ff832c75;--orange-a8:#fe84389d;--orange-a9:#fe6d15f7;--orange-a10:#ff801f;--orange-a11:#ffa057;--orange-a12:#ffe0c2}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--orange-a1:color(display-p3 .961 .247 0/.022);--orange-a2:color(display-p3 .992 .529 0/.051);--orange-a3:color(display-p3 .996 .486 0/.131);--orange-a4:color(display-p3 .996 .384 0/.211);--orange-a5:color(display-p3 1 .455 0/.265);--orange-a6:color(display-p3 1 .529 .129/.332);--orange-a7:color(display-p3 1 .569 .251/.429);--orange-a8:color(display-p3 1 .584 .302/.572);--orange-a9:color(display-p3 1 .494 .216/.895);--orange-a10:color(display-p3 1 .522 .235/.979);--orange-a11:color(display-p3 1 .63 .38);--orange-a12:color(display-p3 .98 .883 .775)}}}.dark,.dark-theme{--pink-a1:#f412bc09;--pink-a2:#f420bb12;--pink-a3:#fe37cc29;--pink-a4:#fc1ec43f;--pink-a5:#fd35c24e;--pink-a6:#fd51c75f;--pink-a7:#fd62c87b;--pink-a8:#ff68c8a2;--pink-a9:#fe49bcd4;--pink-a10:#ff5cc0dc;--pink-a11:#ff8dcc;--pink-a12:#ffd3ecfd}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--pink-a1:color(display-p3 .984 .071 .855/.03);--pink-a2:color(display-p3 1 .2 .8/.059);--pink-a3:color(display-p3 1 .294 .886/.139);--pink-a4:color(display-p3 1 .192 .82/.219);--pink-a5:color(display-p3 1 .282 .827/.274);--pink-a6:color(display-p3 1 .396 .835/.337);--pink-a7:color(display-p3 1 .459 .831/.442);--pink-a8:color(display-p3 1 .478 .827/.585);--pink-a9:color(display-p3 1 .373 .784/.761);--pink-a10:color(display-p3 1 .435 .792/.795);--pink-a11:color(display-p3 1 .535 .78);--pink-a12:color(display-p3 .964 .826 .912)}}}:root,.light,.light-theme{--gray-1:#fcfcfc;--gray-2:#f9f9f9;--gray-3:#f0f0f0;--gray-4:#e8e8e8;--gray-5:#e0e0e0;--gray-6:#d9d9d9;--gray-7:#cecece;--gray-8:#bbb;--gray-9:#8d8d8d;--gray-10:#838383;--gray-11:#646464;--gray-12:#202020}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--gray-1:color(display-p3 .988 .988 .988);--gray-2:color(display-p3 .975 .975 .975);--gray-3:color(display-p3 .939 .939 .939);--gray-4:color(display-p3 .908 .908 .908);--gray-5:color(display-p3 .88 .88 .88);--gray-6:color(display-p3 .849 .849 .849);--gray-7:color(display-p3 .807 .807 .807);--gray-8:color(display-p3 .732 .732 .732);--gray-9:color(display-p3 .553 .553 .553);--gray-10:color(display-p3 .512 .512 .512);--gray-11:color(display-p3 .392 .392 .392);--gray-12:color(display-p3 .125 .125 .125)}}}:root,.light,.light-theme{--mauve-1:#fdfcfd;--mauve-2:#faf9fb;--mauve-3:#f2eff3;--mauve-4:#eae7ec;--mauve-5:#e3dfe6;--mauve-6:#dbd8e0;--mauve-7:#d0cdd7;--mauve-8:#bcbac7;--mauve-9:#8e8c99;--mauve-10:#84828e;--mauve-11:#65636d;--mauve-12:#211f26}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--mauve-1:color(display-p3 .991 .988 .992);--mauve-2:color(display-p3 .98 .976 .984);--mauve-3:color(display-p3 .946 .938 .952);--mauve-4:color(display-p3 .915 .906 .925);--mauve-5:color(display-p3 .886 .876 .901);--mauve-6:color(display-p3 .856 .846 .875);--mauve-7:color(display-p3 .814 .804 .84);--mauve-8:color(display-p3 .735 .728 .777);--mauve-9:color(display-p3 .555 .549 .596);--mauve-10:color(display-p3 .514 .508 .552);--mauve-11:color(display-p3 .395 .388 .424);--mauve-12:color(display-p3 .128 .122 .147)}}}:root,.light,.light-theme{--slate-1:#fcfcfd;--slate-2:#f9f9fb;--slate-3:#f0f0f3;--slate-4:#e8e8ec;--slate-5:#e0e1e6;--slate-6:#d9d9e0;--slate-7:#cdced6;--slate-8:#b9bbc6;--slate-9:#8b8d98;--slate-10:#80838d;--slate-11:#60646c;--slate-12:#1c2024}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--slate-1:color(display-p3 .988 .988 .992);--slate-2:color(display-p3 .976 .976 .984);--slate-3:color(display-p3 .94 .941 .953);--slate-4:color(display-p3 .908 .909 .925);--slate-5:color(display-p3 .88 .881 .901);--slate-6:color(display-p3 .85 .852 .876);--slate-7:color(display-p3 .805 .808 .838);--slate-8:color(display-p3 .727 .733 .773);--slate-9:color(display-p3 .547 .553 .592);--slate-10:color(display-p3 .503 .512 .549);--slate-11:color(display-p3 .379 .392 .421);--slate-12:color(display-p3 .113 .125 .14)}}}:root,.light,.light-theme{--gray-a1:#00000003;--gray-a2:#00000006;--gray-a3:#0000000f;--gray-a4:#00000017;--gray-a5:#0000001f;--gray-a6:#00000026;--gray-a7:#00000031;--gray-a8:#0004;--gray-a9:#00000072;--gray-a10:#0000007c;--gray-a11:#0000009b;--gray-a12:#000000df}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--gray-a1:color(display-p3 0 0 0/.012);--gray-a2:color(display-p3 0 0 0/.024);--gray-a3:color(display-p3 0 0 0/.063);--gray-a4:color(display-p3 0 0 0/.09);--gray-a5:color(display-p3 0 0 0/.122);--gray-a6:color(display-p3 0 0 0/.153);--gray-a7:color(display-p3 0 0 0/.192);--gray-a8:color(display-p3 0 0 0/.267);--gray-a9:color(display-p3 0 0 0/.447);--gray-a10:color(display-p3 0 0 0/.486);--gray-a11:color(display-p3 0 0 0/.608);--gray-a12:color(display-p3 0 0 0/.875)}}}:root,.light,.light-theme{--mauve-a1:#55005503;--mauve-a2:#2b005506;--mauve-a3:#30004010;--mauve-a4:#20003618;--mauve-a5:#20003820;--mauve-a6:#14003527;--mauve-a7:#10003332;--mauve-a8:#08003145;--mauve-a9:#05001d73;--mauve-a10:#0500197d;--mauve-a11:#0400119c;--mauve-a12:#020008e0}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--mauve-a1:color(display-p3 .349 .024 .349/.012);--mauve-a2:color(display-p3 .184 .024 .349/.024);--mauve-a3:color(display-p3 .129 .008 .255/.063);--mauve-a4:color(display-p3 .094 .012 .216/.095);--mauve-a5:color(display-p3 .098 .008 .224/.126);--mauve-a6:color(display-p3 .055 .004 .18/.153);--mauve-a7:color(display-p3 .067 .008 .184/.197);--mauve-a8:color(display-p3 .02 .004 .176/.271);--mauve-a9:color(display-p3 .02 .004 .106/.451);--mauve-a10:color(display-p3 .012 .004 .09/.491);--mauve-a11:color(display-p3 .016 0 .059/.612);--mauve-a12:color(display-p3 .008 0 .027/.879)}}}:root,.light,.light-theme{--slate-a1:#00005503;--slate-a2:#00005506;--slate-a3:#0000330f;--slate-a4:#00002d17;--slate-a5:#0009321f;--slate-a6:#00002f26;--slate-a7:#00062e32;--slate-a8:#00083046;--slate-a9:#00051d74;--slate-a10:#00071b7f;--slate-a11:#0007149f;--slate-a12:#000509e3}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--slate-a1:color(display-p3 .024 .024 .349/.012);--slate-a2:color(display-p3 .024 .024 .349/.024);--slate-a3:color(display-p3 .004 .004 .204/.059);--slate-a4:color(display-p3 .012 .012 .184/.091);--slate-a5:color(display-p3 .004 .039 .2/.122);--slate-a6:color(display-p3 .008 .008 .165/.15);--slate-a7:color(display-p3 .008 .027 .184/.197);--slate-a8:color(display-p3 .004 .031 .176/.275);--slate-a9:color(display-p3 .004 .02 .106/.455);--slate-a10:color(display-p3 .004 .027 .098/.499);--slate-a11:color(display-p3 0 .02 .063/.62);--slate-a12:color(display-p3 0 .012 .031/.887)}}}.dark,.dark-theme{--gray-1:#111;--gray-2:#191919;--gray-3:#222;--gray-4:#2a2a2a;--gray-5:#313131;--gray-6:#3a3a3a;--gray-7:#484848;--gray-8:#606060;--gray-9:#6e6e6e;--gray-10:#7b7b7b;--gray-11:#b4b4b4;--gray-12:#eee}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--gray-1:color(display-p3 .067 .067 .067);--gray-2:color(display-p3 .098 .098 .098);--gray-3:color(display-p3 .135 .135 .135);--gray-4:color(display-p3 .163 .163 .163);--gray-5:color(display-p3 .192 .192 .192);--gray-6:color(display-p3 .228 .228 .228);--gray-7:color(display-p3 .283 .283 .283);--gray-8:color(display-p3 .375 .375 .375);--gray-9:color(display-p3 .431 .431 .431);--gray-10:color(display-p3 .484 .484 .484);--gray-11:color(display-p3 .706 .706 .706);--gray-12:color(display-p3 .933 .933 .933)}}}.dark,.dark-theme{--mauve-1:#121113;--mauve-2:#1a191b;--mauve-3:#232225;--mauve-4:#2b292d;--mauve-5:#323035;--mauve-6:#3c393f;--mauve-7:#49474e;--mauve-8:#625f69;--mauve-9:#6f6d78;--mauve-10:#7c7a85;--mauve-11:#b5b2bc;--mauve-12:#eeeef0}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--mauve-1:color(display-p3 .07 .067 .074);--mauve-2:color(display-p3 .101 .098 .105);--mauve-3:color(display-p3 .138 .134 .144);--mauve-4:color(display-p3 .167 .161 .175);--mauve-5:color(display-p3 .196 .189 .206);--mauve-6:color(display-p3 .232 .225 .245);--mauve-7:color(display-p3 .286 .277 .302);--mauve-8:color(display-p3 .383 .373 .408);--mauve-9:color(display-p3 .434 .428 .467);--mauve-10:color(display-p3 .487 .48 .519);--mauve-11:color(display-p3 .707 .7 .735);--mauve-12:color(display-p3 .933 .933 .94)}}}.dark,.dark-theme{--slate-1:#111113;--slate-2:#18191b;--slate-3:#212225;--slate-4:#272a2d;--slate-5:#2e3135;--slate-6:#363a3f;--slate-7:#43484e;--slate-8:#5a6169;--slate-9:#696e77;--slate-10:#777b84;--slate-11:#b0b4ba;--slate-12:#edeef0}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--slate-1:color(display-p3 .067 .067 .074);--slate-2:color(display-p3 .095 .098 .105);--slate-3:color(display-p3 .13 .135 .145);--slate-4:color(display-p3 .156 .163 .176);--slate-5:color(display-p3 .183 .191 .206);--slate-6:color(display-p3 .215 .226 .244);--slate-7:color(display-p3 .265 .28 .302);--slate-8:color(display-p3 .357 .381 .409);--slate-9:color(display-p3 .415 .431 .463);--slate-10:color(display-p3 .469 .483 .514);--slate-11:color(display-p3 .692 .704 .728);--slate-12:color(display-p3 .93 .933 .94)}}}.dark,.dark-theme{--gray-a1:#0000;--gray-a2:#ffffff09;--gray-a3:#ffffff12;--gray-a4:#ffffff1b;--gray-a5:#fff2;--gray-a6:#ffffff2c;--gray-a7:#ffffff3b;--gray-a8:#fff5;--gray-a9:#ffffff64;--gray-a10:#ffffff72;--gray-a11:#ffffffaf;--gray-a12:#ffffffed}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--gray-a1:color(display-p3 0 0 0/0);--gray-a2:color(display-p3 1 1 1/.034);--gray-a3:color(display-p3 1 1 1/.071);--gray-a4:color(display-p3 1 1 1/.105);--gray-a5:color(display-p3 1 1 1/.134);--gray-a6:color(display-p3 1 1 1/.172);--gray-a7:color(display-p3 1 1 1/.231);--gray-a8:color(display-p3 1 1 1/.332);--gray-a9:color(display-p3 1 1 1/.391);--gray-a10:color(display-p3 1 1 1/.445);--gray-a11:color(display-p3 1 1 1/.685);--gray-a12:color(display-p3 1 1 1/.929)}}}.dark,.dark-theme{--mauve-a1:#0000;--mauve-a2:#f5f4f609;--mauve-a3:#ebeaf814;--mauve-a4:#eee5f81d;--mauve-a5:#efe6fe25;--mauve-a6:#f1e6fd30;--mauve-a7:#eee9ff40;--mauve-a8:#eee7ff5d;--mauve-a9:#eae6fd6e;--mauve-a10:#ece9fd7c;--mauve-a11:#f5f1ffb7;--mauve-a12:#fdfdffef}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--mauve-a1:color(display-p3 0 0 0/0);--mauve-a2:color(display-p3 .996 .992 1/.034);--mauve-a3:color(display-p3 .937 .933 .992/.077);--mauve-a4:color(display-p3 .957 .918 .996/.111);--mauve-a5:color(display-p3 .937 .906 .996/.145);--mauve-a6:color(display-p3 .953 .925 .996/.183);--mauve-a7:color(display-p3 .945 .929 1/.246);--mauve-a8:color(display-p3 .937 .918 1/.361);--mauve-a9:color(display-p3 .933 .918 1/.424);--mauve-a10:color(display-p3 .941 .925 1/.479);--mauve-a11:color(display-p3 .965 .961 1/.712);--mauve-a12:color(display-p3 .992 .992 1/.937)}}}.dark,.dark-theme{--slate-a1:#0000;--slate-a2:#d8f4f609;--slate-a3:#ddeaf814;--slate-a4:#d3edf81d;--slate-a5:#d9edfe25;--slate-a6:#d6ebfd30;--slate-a7:#d9edff40;--slate-a8:#d9edff5d;--slate-a9:#dfebfd6d;--slate-a10:#e5edfd7b;--slate-a11:#f1f7feb5;--slate-a12:#fcfdffef}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--slate-a1:color(display-p3 0 0 0/0);--slate-a2:color(display-p3 .875 .992 1/.034);--slate-a3:color(display-p3 .882 .933 .992/.077);--slate-a4:color(display-p3 .882 .953 .996/.111);--slate-a5:color(display-p3 .878 .929 .996/.145);--slate-a6:color(display-p3 .882 .949 .996/.183);--slate-a7:color(display-p3 .882 .929 1/.246);--slate-a8:color(display-p3 .871 .937 1/.361);--slate-a9:color(display-p3 .898 .937 1/.42);--slate-a10:color(display-p3 .918 .945 1/.475);--slate-a11:color(display-p3 .949 .969 .996/.708);--slate-a12:color(display-p3 .988 .992 1/.937)}}}:root{--white-a1:#ffffff0d;--white-a2:#ffffff1a;--white-a3:#ffffff26;--white-a4:#fff3;--white-a5:#ffffff4d;--white-a6:#fff6;--white-a7:#ffffff80;--white-a8:#fff9;--white-a9:#ffffffb3;--white-a10:#fffc;--white-a11:#ffffffe6;--white-a12:#fffffff2}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root{--white-a1:color(display-p3 1 1 1/.05);--white-a2:color(display-p3 1 1 1/.1);--white-a3:color(display-p3 1 1 1/.15);--white-a4:color(display-p3 1 1 1/.2);--white-a5:color(display-p3 1 1 1/.3);--white-a6:color(display-p3 1 1 1/.4);--white-a7:color(display-p3 1 1 1/.5);--white-a8:color(display-p3 1 1 1/.6);--white-a9:color(display-p3 1 1 1/.7);--white-a10:color(display-p3 1 1 1/.8);--white-a11:color(display-p3 1 1 1/.9);--white-a12:color(display-p3 1 1 1/.95)}}}:root{--black-a1:#0000000d;--black-a2:#0000001a;--black-a3:#00000026;--black-a4:#0003;--black-a5:#0000004d;--black-a6:#0006;--black-a7:#00000080;--black-a8:#0009;--black-a9:#000000b3;--black-a10:#000c;--black-a11:#000000e6;--black-a12:#000000f2}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root{--black-a1:color(display-p3 0 0 0/.05);--black-a2:color(display-p3 0 0 0/.1);--black-a3:color(display-p3 0 0 0/.15);--black-a4:color(display-p3 0 0 0/.2);--black-a5:color(display-p3 0 0 0/.3);--black-a6:color(display-p3 0 0 0/.4);--black-a7:color(display-p3 0 0 0/.5);--black-a8:color(display-p3 0 0 0/.6);--black-a9:color(display-p3 0 0 0/.7);--black-a10:color(display-p3 0 0 0/.8);--black-a11:color(display-p3 0 0 0/.9);--black-a12:color(display-p3 0 0 0/.95)}}}@layer base{:root,.light,.light-theme{--spark-1:#fcfdfe;--spark-2:#f6fafe;--spark-3:#ebf3fd;--spark-4:#dcebfe;--spark-5:#cbe1fe;--spark-6:#b6d5fc;--spark-7:#9dc3f2;--spark-8:#7aabe7;--spark-9:#005eb4;--spark-10:#004fa3;--spark-11:#0f65bc;--spark-12:#113157;--spark-a1:#0055aa03;--spark-a2:#0072e309;--spark-a3:#0066e614;--spark-a4:#006ef823;--spark-a5:#006cfb34;--spark-a6:#006df549;--spark-a7:#0063de62;--spark-a8:#005ed185;--spark-a9:#005eb4;--spark-a10:#004fa3;--spark-a11:#005bb8f0;--spark-a12:#00224bee;--spark-contrast:#fff;--spark-surface:#f4f9fecc;--spark-background:#fff;--spark-indicator:#005eb4;--spark-track:#005eb4}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){:root,.light,.light-theme{--spark-1:oklch(99.4% .0013 254.2);--spark-2:oklch(98.3% .0072 254.2);--spark-3:oklch(96.1% .0155 254.2);--spark-4:oklch(93.5% .0304 254.2);--spark-5:oklch(90.3% .046 254.2);--spark-6:oklch(86.3% .0643 254.2);--spark-7:oklch(80.7% .0782 254.2);--spark-8:oklch(73% .102 254.2);--spark-9:oklch(48.6% .1556 254.2);--spark-10:oklch(43.5% .1556 254.2);--spark-11:oklch(51% .1556 254.2);--spark-12:oklch(31.3% .077 254.2);--spark-a1:color(display-p3 .0235 .349 .6745/.012);--spark-a2:color(display-p3 .0196 .3882 .8784/.032);--spark-a3:color(display-p3 .0078 .3725 .8431/.075);--spark-a4:color(display-p3 .0078 .3804 .9098/.126);--spark-a5:color(display-p3 .0078 .3569 .9176/.189);--spark-a6:color(display-p3 .0039 .3608 .898/.263);--spark-a7:color(display-p3 .0039 .3255 .8118/.353);--spark-a8:color(display-p3 .0039 .3098 .7647/.483);--spark-a9:color(display-p3 .2471 .6235/.848);--spark-a10:color(display-p3 .2118 .5608/.879);--spark-a11:color(display-p3 .2549 .651/.82);--spark-a12:color(display-p3 .098 .2549/.899);--spark-contrast:#fff;--spark-surface:color(display-p3 .9608 .9765 .9961/.8);--spark-background:#fff;--spark-indicator:oklch(48.6% .1556 254.2);--spark-track:oklch(48.6% .1556 254.2)}}}.dark,.dark-theme{--spark-1:#000;--spark-2:#051222;--spark-3:#00234c;--spark-4:#002d6d;--spark-5:#003a82;--spark-6:#004895;--spark-7:#0058ae;--spark-8:#0069cf;--spark-9:#005eb4;--spark-10:#00509d;--spark-11:#71b8ff;--spark-12:#c5e4ff;--spark-a1:#0000;--spark-a2:#2687ff22;--spark-a3:#0076ff4c;--spark-a4:#006aff6d;--spark-a5:#0072ff82;--spark-a6:#007cff95;--spark-a7:#0081ffae;--spark-a8:#0081ffcf;--spark-a9:#0085ffb4;--spark-a10:#0082ff9d;--spark-a11:#71b8ff;--spark-a12:#c5e4ff;--spark-contrast:#fff;--spark-surface:#0a244480;--spark-background:#000;--spark-indicator:#005eb4;--spark-track:#005eb4}@supports (color:color(display-p3 1 1 1)){@media(color-gamut:p3){.dark,.dark-theme{--spark-1:oklch(0% .0326 254.2);--spark-2:oklch(18% .0382 254.2);--spark-3:oklch(25.8% .0872 254.2);--spark-4:oklch(30.9% .126 254.2);--spark-5:oklch(35.9% .1378 254.2);--spark-6:oklch(41% .144 254.2);--spark-7:oklch(46.6% .1556 254.2);--spark-8:oklch(52.9% .1789 254.2);--spark-9:oklch(48.6% .1556 254.2);--spark-10:oklch(43.5% .144 254.2);--spark-11:oklch(77.1% .1674 254.2);--spark-12:oklch(90.8% .0614 254.2);--spark-a1:color(display-p3 0 0 0/0);--spark-a2:color(display-p3 .2431 .5451 .9961/.13);--spark-a3:color(display-p3 .1373 .4667 1/.287);--spark-a4:color(display-p3 .1451 .4196 1/.412);--spark-a5:color(display-p3 .1686 .4588 1/.491);--spark-a6:color(display-p3 .1961 .4941 1/.565);--spark-a7:color(display-p3 .2157 .5176 1/.659);--spark-a8:color(display-p3 .2196 .5137 1/.785);--spark-a9:color(display-p3 .2235 .5294 1/.683);--spark-a10:color(display-p3 .2118 .5216 1/.597);--spark-a11:color(display-p3 .5176 .7294 1/.977);--spark-a12:color(display-p3 .8039 .902 1/.989);--spark-contrast:#fff;--spark-surface:color(display-p3 .0627 .1412 .2588/.5);--spark-background:#000;--spark-indicator:oklch(48.6% .1556 254.2);--spark-track:oklch(48.6% .1556 254.2)}}}:root{--spark-rounded-factor:.75;--spark-rounded-sm:calc(3px*var(--spark-rounded-factor));--spark-rounded-md:calc(4px*var(--spark-rounded-factor));--spark-rounded-lg:calc(6px*var(--spark-rounded-factor));--spark-rounded-xl:calc(8px*var(--spark-rounded-factor));--spark-rounded-2xl:calc(12px*var(--spark-rounded-factor));--spark-rounded-3xl:calc(16px*var(--spark-rounded-factor));--spark-rounded-full:0px}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--container-lg:32rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-bold:700;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer components;@layer utilities{.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-\[50\%\]{top:50%}.left-\[50\%\]{left:50%}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-11{height:calc(var(--spacing)*11)}.h-12{height:calc(var(--spacing)*12)}.h-20{height:calc(var(--spacing)*20)}.min-h-5{min-height:calc(var(--spacing)*5)}.min-h-12{min-height:calc(var(--spacing)*12)}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-3\/4{width:75%}.w-\[90\%\]{width:90%}.w-full{width:100%}.max-w-32{max-width:calc(var(--spacing)*32)}.max-w-48{max-width:calc(var(--spacing)*48)}.max-w-52{max-width:calc(var(--spacing)*52)}.max-w-72{max-width:calc(var(--spacing)*72)}.max-w-lg{max-width:var(--container-lg)}.min-w-9{min-width:calc(var(--spacing)*9)}.min-w-10{min-width:calc(var(--spacing)*10)}.min-w-12{min-width:calc(var(--spacing)*12)}.min-w-80{min-width:calc(var(--spacing)*80)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-y-2{row-gap:calc(var(--spacing)*2)}.rounded-2xl{border-radius:var(--spark-rounded-2xl)}.rounded-\[max\(var\(--spark-rounded-md\)\,var\(--spark-rounded-full\)\)\]{border-radius:max(var(--spark-rounded-md),var(--spark-rounded-full))}.rounded-circle{border-radius:9999px}.rounded-full{border-radius:var(--spark-rounded-full)}.rounded-md{border-radius:var(--spark-rounded-md)}.rounded-none\!{border-radius:0!important}.border-accent{border-color:var(--spark-a6)}.border-accent-high-contrast{border-color:var(--spark-a11)}.border-accent-ui{border-color:var(--spark-a7)}.border-accent-ui-hover{border-color:var(--spark-a8)}.border-gray{border-color:var(--slate-a6)}.border-gray-high-contrast{border-color:var(--slate-a11)}.border-gray-ui{border-color:var(--slate-a7)}.border-gray-ui-hover{border-color:var(--slate-a8)}.border-info{border-color:var(--blue-a6)}.border-info-high-contrast{border-color:var(--blue-a11)}.border-info-ui{border-color:var(--blue-a7)}.border-info-ui-hover{border-color:var(--blue-a8)}.border-input{border-color:var(--spark-a7)}.border-input-active{border-color:var(--spark-a8)}.border-input-disabled{border-color:var(--slate-a8)}.border-input-invalid{border-color:var(--red-a7)}.border-input-valid{border-color:var(--green-a7)}.border-success{border-color:var(--green-a6)}.border-success-high-contrast{border-color:var(--green-a11)}.border-success-ui{border-color:var(--green-a7)}.border-success-ui-hover{border-color:var(--green-a8)}.bg-base-accent-skeleton{background-color:var(--spark-a5)}.bg-base-accent-soft{background-color:var(--spark-a3)}.bg-base-accent-solid{background-color:var(--spark-9)}.bg-base-accent-surface{background-color:var(--spark-background)}.bg-base-error-soft{background-color:var(--red-a3)}.bg-base-error-solid{background-color:var(--red-9)}.bg-base-error-surface{background-color:var(--spark-background)}.bg-base-gray-skeleton{background-color:var(--slate-a5)}.bg-base-gray-soft{background-color:var(--slate-a3)}.bg-base-gray-solid{background-color:var(--slate-9)}.bg-base-gray-surface{background-color:var(--slate-a2)}.bg-base-info-soft{background-color:var(--blue-a3)}.bg-base-info-solid{background-color:var(--blue-9)}.bg-base-info-surface{background-color:var(--spark-background)}.bg-base-success-soft{background-color:var(--green-a3)}.bg-base-success-solid{background-color:var(--green-9)}.bg-base-success-surface{background-color:var(--spark-background)}.bg-base-warning-soft{background-color:var(--orange-a3)}.bg-base-warning-solid{background-color:var(--orange-9)}.bg-base-warning-surface{background-color:var(--spark-background)}.bg-black-a6{background-color:var(--black-a6)}.bg-dropdown-base{background-color:var(--slate-2)}.bg-dropdown-item-hover,.bg-input-base{background-color:var(--spark-a3)}.bg-input-base-hover{background-color:var(--spark-a4)}.bg-slate-2{background-color:var(--slate-2)}.bg-slate-a3{background-color:var(--slate-a3)}.bg-slate-a5{background-color:var(--slate-a5)}.bg-spark-10{background-color:var(--spark-10)}.bg-spark-a3{background-color:var(--spark-a3)}.bg-transparent{background-color:#0000}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.pt-2{padding-top:calc(var(--spacing)*2)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\[overflow-wrap\:break-word\]{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent{color:var(--spark-a12)}.text-accent-active{color:var(--spark-a11)}.text-accent-contrast{color:#fff}.text-accent-focus,.text-accent-hover,.text-accent-light{color:var(--spark-a11)}.text-error{color:var(--red-a12)}.text-error-active{color:var(--red-a11)}.text-error-contrast{color:#fff}.text-error-disabled{color:var(--red-a8)}.text-error-focus,.text-error-hover,.text-error-light{color:var(--red-a11)}.text-gray{color:var(--slate-a12)}.text-gray-contrast{color:#fff}.text-gray-disabled{color:var(--slate-a8)}.text-gray-light{color:var(--slate-a11)}.text-info{color:var(--blue-a12)}.text-info-active{color:var(--blue-a11)}.text-info-contrast{color:#fff}.text-info-focus,.text-info-hover,.text-info-light{color:var(--blue-a11)}.text-slate-11{color:var(--slate-11)}.text-slate-12{color:var(--slate-12)}.text-spark-a11{color:var(--spark-a11)}.text-spark-a12{color:var(--spark-a12)}.text-success{color:var(--green-a12)}.text-success-active{color:var(--green-a11)}.text-success-contrast{color:#fff}.text-success-focus,.text-success-hover,.text-success-light{color:var(--green-a11)}.text-warning{color:var(--orange-a12)}.text-warning-active{color:var(--orange-a11)}.text-warning-contrast{color:#fff}.text-warning-focus,.text-warning-hover,.text-warning-light{color:var(--orange-a11)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.opacity-80{opacity:.8}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline-hidden\!{--tw-outline-style:none!important;outline-style:none!important}@media(forced-colors:active){.outline-hidden\!{outline-offset:2px!important;outline:2px solid #0000!important}}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media(hover:hover){.hover\:bg-slate-a3:hover{background-color:var(--slate-a3)}.hover\:bg-spark-9:hover{background-color:var(--spark-9)}.hover\:bg-spark-a4:hover{background-color:var(--spark-a4)}}.focus-visible\:bg-slate-a3:focus-visible{background-color:var(--slate-a3)}.focus-visible\:bg-spark-9:focus-visible{background-color:var(--spark-9)}.focus-visible\:bg-spark-a4:focus-visible{background-color:var(--spark-a4)}.focus-visible\:ring:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-hidden:focus-visible{--tw-outline-style:none;outline-style:none}@media(forced-colors:active){.focus-visible\:outline-hidden:focus-visible{outline-offset:2px;outline:2px solid #0000}}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:bg-slate-a3:disabled{background-color:var(--slate-a3)}.disabled\:bg-spark-a3:disabled{background-color:var(--spark-a3)}.disabled\:bg-transparent:disabled{background-color:#0000}.disabled\:text-spark-a7:disabled{color:var(--spark-a7)}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}@media not all and (min-width:40rem){.max-sm\:h-10{height:calc(var(--spacing)*10)}.max-sm\:h-12{height:calc(var(--spacing)*12)}}@media(min-width:40rem){.sm\:w-1\/2{width:50%}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}}@media(min-width:48rem){.md\:h-9{height:calc(var(--spacing)*9)}}.dark\:bg-black-a8:is(.dark *){background-color:var(--black-a8)}.dark\:bg-gray-2:is(.dark *){background-color:var(--slate-2)}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-6 svg{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}

package/dist/index.d.cts

@@ -0,0 +1,75 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { ClassValue } from 'clsx';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "bare" | "icon" | null | undefined;
+    shape?: "default" | null | undefined;
+    size?: "default" | "small" | "medium" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.FC<ButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}>;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardSkeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * DisplayField - Root container for displaying read-only label-value pairs
+ *
+ * @example
+ * <DisplayField>
+ *   <DisplayFieldLabel>Email</DisplayFieldLabel>
+ *   <DisplayFieldValue>john@example.com</DisplayFieldValue>
+ * </DisplayField>
+ */
+declare const DisplayField: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DisplayFieldLabel - Label/title for the field (maps to "Title" pattern)
+ */
+declare const DisplayFieldLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * DisplayFieldValue - Primary value display (maps to "Description" pattern)
+ */
+declare const DisplayFieldValue: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * DisplayFieldContent - Container for custom content within the field
+ */
+declare const DisplayFieldContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DisplayFieldSkeleton - Loading placeholder with animated skeleton
+ */
+declare const DisplayFieldSkeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, CardSkeleton, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayField, DisplayFieldContent, DisplayFieldLabel, DisplayFieldSkeleton, DisplayFieldValue, buttonVariants, cn };

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { ClassValue } from 'clsx';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "bare" | "icon" | null | undefined;
+    shape?: "default" | null | undefined;
+    size?: "default" | "small" | "medium" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.FC<ButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}>;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardSkeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * DisplayField - Root container for displaying read-only label-value pairs
+ *
+ * @example
+ * <DisplayField>
+ *   <DisplayFieldLabel>Email</DisplayFieldLabel>
+ *   <DisplayFieldValue>john@example.com</DisplayFieldValue>
+ * </DisplayField>
+ */
+declare const DisplayField: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DisplayFieldLabel - Label/title for the field (maps to "Title" pattern)
+ */
+declare const DisplayFieldLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * DisplayFieldValue - Primary value display (maps to "Description" pattern)
+ */
+declare const DisplayFieldValue: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * DisplayFieldContent - Container for custom content within the field
+ */
+declare const DisplayFieldContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DisplayFieldSkeleton - Loading placeholder with animated skeleton
+ */
+declare const DisplayFieldSkeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, CardSkeleton, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayField, DisplayFieldContent, DisplayFieldLabel, DisplayFieldSkeleton, DisplayFieldValue, buttonVariants, cn };

package/dist/index.js

@@ -0,0 +1,255 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer text-base font-medium transition-colors focus-visible:outline-hidden focus-visible:ring focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0`,
+  {
+    variants: {
+      variant: {
+        primary: "bg-spark-10 text-accent-contrast focus-visible:bg-spark-9 disabled:bg-spark-a3 disabled:text-spark-a7 hover:bg-spark-9",
+        secondary: "bg-spark-a3 text-spark-a12 focus-visible:bg-spark-a4 disabled:bg-slate-a3 disabled:text-spark-a7 hover:bg-spark-a4",
+        tertiary: "bg-transparent text-spark-a11 focus-visible:bg-slate-a3 disabled:bg-transparent disabled:text-spark-a7 hover:bg-slate-a3",
+        bare: "rounded-none! text-gray outline-hidden!",
+        icon: "rounded-md text-spark-a11 focus-visible:bg-slate-a3 hover:bg-slate-a3"
+      },
+      shape: {
+        default: "rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]"
+      },
+      size: {
+        small: "min-w-9 px-3 max-sm:h-10 md:h-9",
+        default: "h-11 min-w-10 px-3 max-sm:h-12",
+        medium: "h-12 min-w-12 px-4"
+      }
+    },
+    defaultVariants: {
+      shape: "default",
+      variant: "primary",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+Button.displayName = "Button";
+var Card = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative flex w-full flex-col gap-1 rounded-2xl bg-slate-a3 p-4", className),
+      ref,
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4", className), ref, ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardIcon = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex shrink-0 items-center justify-center text-slate-11", className),
+      ref,
+      ...props
+    }
+  )
+);
+CardIcon.displayName = "CardIcon";
+var CardTitle = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn("text-base font-medium leading-5 text-slate-12", className),
+      ref,
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-5 text-slate-11", className), ref, ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("", className), ref, ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end gap-2 pt-2", className),
+      ref,
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var CardSkeleton = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex w-full items-center gap-4 rounded-2xl bg-slate-a3 p-4 opacity-80",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "size-10 shrink-0 animate-pulse rounded-full bg-slate-a5" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-slate-a5" }),
+          /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-slate-a5" })
+        ] })
+      ]
+    }
+  )
+);
+CardSkeleton.displayName = "CardSkeleton";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black-a6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-black-a8",
+      className
+    ),
+    "data-overlay": "true",
+    ref,
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var onInteractOutsideHandler = (event) => {
+  const target = event.target;
+  const isOverlay = target.dataset.overlay === "true";
+  if (!isOverlay) event.preventDefault();
+};
+var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsx(
+    DialogPrimitive.Content,
+    {
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-[90%] min-w-80 max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-slate-2 p-6 text-gray shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-top-48% dark:bg-gray-2 sm:w-1/2",
+        className
+      ),
+      onInteractOutside: onInteractOutsideHandler,
+      ref,
+      ...props,
+      children
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    className: cn("text-lg font-bold text-gray", className),
+    ref,
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    className: cn("text-md text-gray", className),
+    ref,
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+var DisplayField = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative flex min-h-12 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+DisplayField.displayName = "DisplayField";
+var DisplayFieldLabel = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-sm font-medium leading-5 text-slate-11 [overflow-wrap:break-word]",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+DisplayFieldLabel.displayName = "DisplayFieldLabel";
+var DisplayFieldValue = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "min-h-5 w-full whitespace-pre-wrap text-base tabular-nums leading-5 text-slate-12",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+DisplayFieldValue.displayName = "DisplayFieldValue";
+var DisplayFieldContent = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("", className), ref, ...props })
+);
+DisplayFieldContent.displayName = "DisplayFieldContent";
+var DisplayFieldSkeleton = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex h-20 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4 opacity-80",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "h-5 w-1/2 max-w-52 animate-pulse rounded-md bg-slate-a5" }),
+        /* @__PURE__ */ jsx("div", { className: "h-5 w-3/4 max-w-72 animate-pulse rounded-md bg-slate-a5" })
+      ]
+    }
+  )
+);
+DisplayFieldSkeleton.displayName = "DisplayFieldSkeleton";
+
+export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, CardSkeleton, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayField, DisplayFieldContent, DisplayFieldLabel, DisplayFieldSkeleton, DisplayFieldValue, buttonVariants, cn };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts","../src/components/button/button.tsx","../src/components/card/card.tsx","../src/components/dialog/dialog.tsx","../src/components/display-field/display-field.tsx"],"names":["React","jsx","React3","jsxs","React4"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../utils/cn'\n\nconst buttonVariants = cva(\n  `inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer text-base font-medium transition-colors focus-visible:outline-hidden focus-visible:ring focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-spark-10 text-accent-contrast focus-visible:bg-spark-9 disabled:bg-spark-a3 disabled:text-spark-a7 hover:bg-spark-9',\n        secondary:\n          'bg-spark-a3 text-spark-a12 focus-visible:bg-spark-a4 disabled:bg-slate-a3 disabled:text-spark-a7 hover:bg-spark-a4',\n        tertiary:\n          'bg-transparent text-spark-a11 focus-visible:bg-slate-a3 disabled:bg-transparent disabled:text-spark-a7 hover:bg-slate-a3',\n        bare: 'rounded-none! text-gray outline-hidden!',\n        icon: 'rounded-md text-spark-a11 focus-visible:bg-slate-a3 hover:bg-slate-a3',\n      },\n      shape: {\n        default: 'rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n      },\n      size: {\n        small: 'min-w-9 px-3 max-sm:h-10 md:h-9',\n        default: 'h-11 min-w-10 px-3 max-sm:h-12',\n        medium: 'h-12 min-w-12 px-4',\n      },\n    },\n    defaultVariants: {\n      shape: 'default',\n      variant: 'primary',\n      size: 'default',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp: React.ElementType = asChild ? Slot : 'button'\n\n    return (\n      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />\n    )\n  }\n) as React.FC<ButtonProps & { ref?: React.Ref<HTMLButtonElement> }>\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n","import * as React from 'react'\n\nimport { cn } from '../../utils/cn'\n\nconst Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn('relative flex w-full flex-col gap-1 rounded-2xl bg-slate-a3 p-4', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div className={cn('flex items-center gap-4', className)} ref={ref} {...props} />\n  )\n)\n\nCardHeader.displayName = 'CardHeader'\n\nconst CardIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn('flex shrink-0 items-center justify-center text-slate-11', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nCardIcon.displayName = 'CardIcon'\n\nconst CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => (\n    <h3\n      className={cn('text-base font-medium leading-5 text-slate-12', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p className={cn('text-sm leading-5 text-slate-11', className)} ref={ref} {...props} />\n))\n\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => <div className={cn('', className)} ref={ref} {...props} />\n)\n\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn('flex items-center justify-end gap-2 pt-2', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nCardFooter.displayName = 'CardFooter'\n\nconst CardSkeleton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn(\n        'relative flex w-full items-center gap-4 rounded-2xl bg-slate-a3 p-4 opacity-80',\n        className\n      )}\n      ref={ref}\n      {...props}\n    >\n      <div className=\"size-10 shrink-0 animate-pulse rounded-full bg-slate-a5\" />\n      <div className=\"flex flex-1 flex-col gap-y-2\">\n        <div className=\"h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-slate-a5\" />\n        <div className=\"h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-slate-a5\" />\n      </div>\n    </div>\n  )\n)\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport {\n  Card,\n  CardHeader,\n  CardIcon,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardSkeleton,\n}\n","import * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { cn } from '../../utils/cn'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    className={cn(\n      'fixed inset-0 z-50 bg-black-a6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-black-a8',\n      className\n    )}\n    data-overlay=\"true\"\n    ref={ref}\n    {...props}\n  />\n))\n\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst onInteractOutsideHandler = (event: CustomEvent) => {\n  const target = event.target as HTMLElement\n  const isOverlay = target.dataset.overlay === 'true'\n\n  // Our dialogs contain interactive elements that are mounted outside of the drawer\n  // Browser extensions like password managers or grammar checkers are also mounted outside\n  // We still dismiss on a click/tap outside\n  if (!isOverlay) event.preventDefault()\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      className={cn(\n        'fixed left-[50%] top-[50%] z-50 grid w-[90%] min-w-80 max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-slate-2 p-6 text-gray shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-top-48% dark:bg-gray-2 sm:w-1/2',\n        className\n      )}\n      onInteractOutside={onInteractOutsideHandler}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Content>\n  </>\n))\n\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('', className)} {...props} />\n)\n\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n    {...props}\n  />\n)\n\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    className={cn('text-lg font-bold text-gray', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    className={cn('text-md text-gray', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n","import * as React from 'react'\n\nimport { cn } from '../../utils/cn'\n\n/**\n * DisplayField - Root container for displaying read-only label-value pairs\n *\n * @example\n * <DisplayField>\n *   <DisplayFieldLabel>Email</DisplayFieldLabel>\n *   <DisplayFieldValue>john@example.com</DisplayFieldValue>\n * </DisplayField>\n */\nconst DisplayField = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn(\n        'relative flex min-h-12 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4',\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nDisplayField.displayName = 'DisplayField'\n\n/**\n * DisplayFieldLabel - Label/title for the field (maps to \"Title\" pattern)\n */\nconst DisplayFieldLabel = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(\n  ({ className, ...props }, ref) => (\n    <span\n      className={cn(\n        'text-sm font-medium leading-5 text-slate-11 [overflow-wrap:break-word]',\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nDisplayFieldLabel.displayName = 'DisplayFieldLabel'\n\n/**\n * DisplayFieldValue - Primary value display (maps to \"Description\" pattern)\n */\nconst DisplayFieldValue = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(\n  ({ className, ...props }, ref) => (\n    <span\n      className={cn(\n        'min-h-5 w-full whitespace-pre-wrap text-base tabular-nums leading-5 text-slate-12',\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n)\n\nDisplayFieldValue.displayName = 'DisplayFieldValue'\n\n/**\n * DisplayFieldContent - Container for custom content within the field\n */\nconst DisplayFieldContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => <div className={cn('', className)} ref={ref} {...props} />\n)\n\nDisplayFieldContent.displayName = 'DisplayFieldContent'\n\n/**\n * DisplayFieldSkeleton - Loading placeholder with animated skeleton\n */\nconst DisplayFieldSkeleton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      className={cn(\n        'relative flex h-20 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4 opacity-80',\n        className\n      )}\n      ref={ref}\n      {...props}\n    >\n      <div className=\"h-5 w-1/2 max-w-52 animate-pulse rounded-md bg-slate-a5\" />\n      <div className=\"h-5 w-3/4 max-w-72 animate-pulse rounded-md bg-slate-a5\" />\n    </div>\n  )\n)\n\nDisplayFieldSkeleton.displayName = 'DisplayFieldSkeleton'\n\nexport {\n  DisplayField,\n  DisplayFieldLabel,\n  DisplayFieldValue,\n  DisplayFieldContent,\n  DisplayFieldSkeleton,\n}\n"]}

package/dist/styles.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@epilot/spark-ui",
+  "version": "1.0.0-alpha.0",
+  "description": "React UI component library from Spark SDK",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/index.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup && vite build",
+    "dev": "tsup --watch",
+    "test": "bun test",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "author": "epilot",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/epilot/spark-sdk.git",
+    "directory": "packages/ui"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": ">=4.0.0",
+    "tw-animate-css": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "postcss": "^8.5.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.0.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.3.0",
+    "vite": "^6.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  }
+}