@epilot/zenith-react 0.1.0 → 0.2.0-next.0

package/README.md

@@ -48,6 +48,40 @@ Use `AppearanceBoundary` for a scoped appearance that must also reach portalled
 content — a theme or surface attribute on a subtree does not follow a Dialog,
 Popover, Select, Tooltip or menu into `document.body`.
 
+## Lay your own screens out
+
+Zenith ships components, not a layout system: there is no `Grid`, `Stack`,
+`Box` or `Spacer`, and there never will be. The space between components is
+yours.
+
+`makeZenithStyles` is **public API for that purpose**, exported from the
+package root alongside `mergeClasses` and `shorthands`. It is the same Griffel
+API Zenith's own components use, so your layout ships its CSS with your
+components and depends on no stylesheet loaded from somewhere else.
+
+```tsx
+import { makeZenithStyles, shorthands } from "@epilot/zenith-react"
+import { spacingLayout1, containerXl } from "@epilot/zenith-react/tokens"
+
+const useStyles = makeZenithStyles({
+  page: {
+    display: "flex",
+    flexDirection: "column",
+    maxWidth: containerXl,
+    ...shorthands.gap(spacingLayout1),
+  },
+})
+```
+
+Take every value from `@epilot/zenith-react/tokens`. A literal hex, a utility
+class from another stylesheet, or a raw pixel value is how a screen drifts away
+from the system and stops following a token change.
+
+A utility-class framework works too, but understand what you are depending on:
+those classes come from a stylesheet your component does not ship, so what your
+screen looks like is decided by whichever version of that stylesheet is
+deployed beside it.
+
 ## Validate the host
 
 - Exercise the application under its real content-security policy.

package/dist/components/alert-dialog/alert-dialog.js

@@ -1,13 +1,13 @@
-import { jsx as r, jsxs as D, Fragment as x } from "react/jsx-runtime";
+import { jsx as r, jsxs as x, Fragment as h } from "react/jsx-runtime";
 import * as i from "react";
-import { Root as h, Action as b, Cancel as R, Content as T, Description as w, Overlay as C, Portal as v, Title as S, Trigger as N } from "../../vendor/.bun/@radix-ui_react-alert-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-alert-dialog/dist/index.js";
-import { SLOT_ATTR as n, mergeClasses as d, shorthands as c } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as z } from "../appearance-boundary/appearance-boundary.js";
+import { Root as b, Action as R, Cancel as T, Content as w, Description as C, Overlay as v, Portal as S, Title as N, Trigger as z } from "../../vendor/.bun/@radix-ui_react-alert-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-alert-dialog/dist/index.js";
+import { SLOT_ATTR as n, mergeClasses as g, shorthands as d } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as y } from "../appearance-boundary/appearance-boundary.js";
 import { useDensity as F } from "../density-provider/density-provider.js";
 import { makeZenithStyles as W } from "../../styles/make-styles.js";
 import { grayA11 as O, leadingSm as H, textSm as P, grayA12 as X, fontWeightSemibold as j, leadingXl as k, textXl as _, containerXl as I, containerLg as L, containerMd as B, containerSm as E, body as G, spacingElement2 as p, spacingGroup2 as u, grayA1 as M, radiusXl as Z } from "../../tokens/index.js";
-import { Button as y } from "../button/button.js";
-const g = W({
+import { Button as A } from "../button/button.js";
+const m = W({
   overlay: {
     position: "fixed",
     top: 0,
@@ -43,10 +43,10 @@ const g = W({
     display: "grid",
     width: "100%",
     maxWidth: "calc(100% - 2rem)",
-    ...c.gap(u),
-    ...c.borderRadius(Z),
-    ...c.border("1px", "solid", M),
-    ...c.padding(u),
+    ...d.gap(u),
+    ...d.borderRadius(Z),
+    ...d.border("1px", "solid", M),
+    ...d.padding(u),
     // v1 shadow-lg
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
     outlineStyle: "none",
@@ -96,12 +96,12 @@ const g = W({
   header: {
     display: "flex",
     flexDirection: "column",
-    ...c.gap(p),
+    ...d.gap(p),
     textAlign: "left"
   },
   footer: {
     display: "flex",
-    ...c.gap(p),
+    ...d.gap(p),
     justifyContent: "flex-end"
   },
   title: {
@@ -117,11 +117,11 @@ const g = W({
   }
 }), at = i.forwardRef(
   function(t, a) {
-    return /* @__PURE__ */ r(h, { "data-slot": "alert-dialog", ...t });
+    return /* @__PURE__ */ r(b, { "data-slot": "alert-dialog", ...t });
   }
 ), ot = i.forwardRef(function({ className: t, ...a }, o) {
   return /* @__PURE__ */ r(
-    N,
+    z,
     {
       ref: o,
       "data-slot": "alert-dialog-trigger",
@@ -132,7 +132,7 @@ const g = W({
   );
 }), et = i.forwardRef(function(t, a) {
   return /* @__PURE__ */ r(
-    v,
+    S,
     {
       "data-slot": "alert-dialog-portal",
       [n]: "alert-dialog-portal",
@@ -140,80 +140,81 @@ const g = W({
     }
   );
 }), q = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m(), s = y();
   return /* @__PURE__ */ r(
-    C,
+    v,
     {
       ref: o,
       "data-slot": "alert-dialog-overlay",
       [n]: "alert-dialog-overlay",
-      className: d(e.overlay, t),
+      ...s,
+      className: g(e.overlay, t),
       ...a
     }
   );
-}), rt = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, m) {
-  const s = g(), f = F(), A = z();
-  return /* @__PURE__ */ D(x, { children: [
+}), rt = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, s) {
+  const c = m(), f = F(), D = y();
+  return /* @__PURE__ */ x(h, { children: [
     /* @__PURE__ */ r(q, {}),
     /* @__PURE__ */ r(
-      T,
+      w,
       {
-        ref: m,
+        ref: s,
         "data-slot": "alert-dialog-content",
         [n]: "alert-dialog-content",
         ...f !== void 0 ? { "data-density": f } : {},
-        ...A,
-        className: d(s.content, s[a], t),
+        ...D,
+        className: g(c.content, c[a], t),
         ...e,
         children: o
       }
     )
   ] });
 }), it = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m();
   return /* @__PURE__ */ r(
     "div",
     {
       ref: o,
       "data-slot": "alert-dialog-header",
       [n]: "alert-dialog-header",
-      className: d(e.header, t),
+      className: g(e.header, t),
       ...a
     }
   );
 }), lt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m();
   return /* @__PURE__ */ r(
     "div",
     {
       ref: o,
       "data-slot": "alert-dialog-footer",
       [n]: "alert-dialog-footer",
-      className: d(e.footer, t),
+      className: g(e.footer, t),
       ...a
     }
   );
 }), nt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m();
   return /* @__PURE__ */ r(
-    S,
+    N,
     {
       ref: o,
       "data-slot": "alert-dialog-title",
       [n]: "alert-dialog-title",
-      className: d(e.title, t),
+      className: g(e.title, t),
       ...a
     }
   );
 }), st = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+  const e = m();
   return /* @__PURE__ */ r(
-    w,
+    C,
     {
       ref: o,
       "data-slot": "alert-dialog-description",
       [n]: "alert-dialog-description",
-      className: d(e.description, t),
+      className: g(e.description, t),
       ...a
     }
   );
@@ -222,19 +223,19 @@ const g = W({
   size: a = "base",
   destructive: o = !1,
   className: e,
-  ...m
-}, s) {
-  return /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
-    y,
+  ...s
+}, c) {
+  return /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
+    A,
     {
-      ref: s,
+      ref: c,
       "data-slot": "alert-dialog-action",
       [n]: "alert-dialog-action",
       variant: t,
       size: a,
       destructive: o,
       className: e,
-      ...m
+      ...s
     }
   ) });
 }), dt = i.forwardRef(function({
@@ -242,19 +243,19 @@ const g = W({
   size: a = "base",
   destructive: o = !1,
   className: e,
-  ...m
-}, s) {
-  return /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
-    y,
+  ...s
+}, c) {
+  return /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
+    A,
     {
-      ref: s,
+      ref: c,
       "data-slot": "alert-dialog-cancel",
       [n]: "alert-dialog-cancel",
       variant: t,
       size: a,
       destructive: o,
       className: e,
-      ...m
+      ...s
     }
   ) });
 });

package/dist/components/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonSize,\n  type ButtonVariant,\n} from \"../button/button\"\n\nconst useStyles = makeZenithStyles({\n  overlay: {\n    position: \"fixed\",\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 50,\n    backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  content: {\n    backgroundColor: tokens.body,\n    position: \"fixed\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%, -50%)\",\n    zIndex: 50,\n    display: \"grid\",\n    width: \"100%\",\n    maxWidth: \"calc(100% - 2rem)\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    ...shorthands.padding(tokens.spacingGroup2),\n    // v1 shadow-lg\n    boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n    outlineStyle: \"none\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n        to: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n        to: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  sm: {\n    maxWidth: tokens.containerSm,\n  },\n  md: {\n    maxWidth: tokens.containerMd,\n  },\n  lg: {\n    maxWidth: tokens.containerLg,\n  },\n  xl: {\n    \"@media (min-width: 640px)\": {\n      maxWidth: tokens.containerXl,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    textAlign: \"left\",\n  },\n  footer: {\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement2),\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    fontSize: tokens.textXl,\n    lineHeight: tokens.leadingXl,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA12,\n  },\n  description: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AlertDialogProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Root\n>\n\nexport type AlertDialogTriggerProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Trigger\n>\n\nexport type AlertDialogPortalProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Portal\n>\n\nexport type AlertDialogOverlayProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Overlay\n>\n\nexport type AlertDialogSize = \"xl\" | \"lg\" | \"md\" | \"sm\"\n\nexport type AlertDialogContentProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Content\n> & {\n  size?: AlertDialogSize\n}\n\nexport type AlertDialogHeaderProps = React.ComponentProps<\"div\">\nexport type AlertDialogFooterProps = React.ComponentProps<\"div\">\n\nexport type AlertDialogTitleProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Title\n>\n\nexport type AlertDialogDescriptionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Description\n>\n\nexport type AlertDialogActionProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport type AlertDialogCancelProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport const AlertDialog = React.forwardRef<HTMLElement, AlertDialogProps>(\n  function AlertDialog(props, _ref) {\n    return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n  }\n)\n\nexport const AlertDialogTrigger = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,\n  AlertDialogTriggerProps\n>(function AlertDialogTrigger({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"alert-dialog-trigger\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogPortal = React.forwardRef<\n  HTMLElement,\n  AlertDialogPortalProps\n>(function AlertDialogPortal(props, _ref) {\n  return (\n    <AlertDialogPrimitive.Portal\n      data-slot=\"alert-dialog-portal\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-portal\" }}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  AlertDialogOverlayProps\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-overlay\" }}\n      className={mergeClasses(styles.overlay, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(function AlertDialogContent(\n  { className, size = \"xl\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment.\n  const override = useDensity()\n  // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n  // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n  // none, leaving live shell inheritance in place.\n  const appearance = useAppearanceAttributes()\n\n  return (\n    <>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-content\" }}\n        {...(override !== undefined ? { \"data-density\": override } : {})}\n        {...appearance}\n        className={mergeClasses(styles.content, styles[size], className)}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </>\n  )\n})\n\nexport const AlertDialogHeader = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogHeaderProps\n>(function AlertDialogHeader({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-header\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-header\" }}\n      className={mergeClasses(styles.header, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogFooter = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogFooterProps\n>(function AlertDialogFooter({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-footer\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-footer\" }}\n      className={mergeClasses(styles.footer, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  AlertDialogTitleProps\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  AlertDialogDescriptionProps\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogAction = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogActionProps\n>(function AlertDialogAction(\n  {\n    variant = \"primary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Action asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-action\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-action\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Action>\n  )\n})\n\nexport const AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogCancelProps\n>(function AlertDialogCancel(\n  {\n    variant = \"secondary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Cancel asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-cancel\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-cancel\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Cancel>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.body","shorthands","tokens.spacingGroup2","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.spacingElement2","tokens.textXl","tokens.leadingXl","tokens.fontWeightSemibold","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","AlertDialog","React","props","_ref","AlertDialogPrimitive.Root","AlertDialogTrigger","className","ref","jsx","AlertDialogPrimitive.Trigger","SLOT_ATTR","AlertDialogPortal","AlertDialogPrimitive.Portal","AlertDialogOverlay","styles","AlertDialogPrimitive.Overlay","mergeClasses","AlertDialogContent","size","children","override","useDensity","appearance","useAppearanceAttributes","jsxs","Fragment","AlertDialogPrimitive.Content","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogPrimitive.Title","AlertDialogDescription","AlertDialogPrimitive.Description","AlertDialogAction","variant","destructive","AlertDialogPrimitive.Action","Button","AlertDialogCancel","AlertDialogPrimitive.Cancel"],"mappings":"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"}
+{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonSize,\n  type ButtonVariant,\n} from \"../button/button\"\n\nconst useStyles = makeZenithStyles({\n  overlay: {\n    position: \"fixed\",\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 50,\n    backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  content: {\n    backgroundColor: tokens.body,\n    position: \"fixed\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%, -50%)\",\n    zIndex: 50,\n    display: \"grid\",\n    width: \"100%\",\n    maxWidth: \"calc(100% - 2rem)\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    ...shorthands.padding(tokens.spacingGroup2),\n    // v1 shadow-lg\n    boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n    outlineStyle: \"none\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n        to: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n        to: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  sm: {\n    maxWidth: tokens.containerSm,\n  },\n  md: {\n    maxWidth: tokens.containerMd,\n  },\n  lg: {\n    maxWidth: tokens.containerLg,\n  },\n  xl: {\n    \"@media (min-width: 640px)\": {\n      maxWidth: tokens.containerXl,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    textAlign: \"left\",\n  },\n  footer: {\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement2),\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    fontSize: tokens.textXl,\n    lineHeight: tokens.leadingXl,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA12,\n  },\n  description: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AlertDialogProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Root\n>\n\nexport type AlertDialogTriggerProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Trigger\n>\n\nexport type AlertDialogPortalProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Portal\n>\n\nexport type AlertDialogOverlayProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Overlay\n>\n\nexport type AlertDialogSize = \"xl\" | \"lg\" | \"md\" | \"sm\"\n\nexport type AlertDialogContentProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Content\n> & {\n  size?: AlertDialogSize\n}\n\nexport type AlertDialogHeaderProps = React.ComponentProps<\"div\">\nexport type AlertDialogFooterProps = React.ComponentProps<\"div\">\n\nexport type AlertDialogTitleProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Title\n>\n\nexport type AlertDialogDescriptionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Description\n>\n\nexport type AlertDialogActionProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport type AlertDialogCancelProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport const AlertDialog = React.forwardRef<HTMLElement, AlertDialogProps>(\n  function AlertDialog(props, _ref) {\n    return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n  }\n)\n\nexport const AlertDialogTrigger = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,\n  AlertDialogTriggerProps\n>(function AlertDialogTrigger({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"alert-dialog-trigger\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogPortal = React.forwardRef<\n  HTMLElement,\n  AlertDialogPortalProps\n>(function AlertDialogPortal(props, _ref) {\n  return (\n    <AlertDialogPrimitive.Portal\n      data-slot=\"alert-dialog-portal\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-portal\" }}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  AlertDialogOverlayProps\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  const styles = useStyles()\n  // The overlay is portalled too, so it re-stamps the boundary's appearance like the content (#8).\n  const appearance = useAppearanceAttributes()\n\n  return (\n    <AlertDialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-overlay\" }}\n      {...appearance}\n      className={mergeClasses(styles.overlay, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(function AlertDialogContent(\n  { className, size = \"xl\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment.\n  const override = useDensity()\n  // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n  // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n  // none, leaving live shell inheritance in place.\n  const appearance = useAppearanceAttributes()\n\n  return (\n    <>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-content\" }}\n        {...(override !== undefined ? { \"data-density\": override } : {})}\n        {...appearance}\n        className={mergeClasses(styles.content, styles[size], className)}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </>\n  )\n})\n\nexport const AlertDialogHeader = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogHeaderProps\n>(function AlertDialogHeader({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-header\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-header\" }}\n      className={mergeClasses(styles.header, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogFooter = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogFooterProps\n>(function AlertDialogFooter({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-footer\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-footer\" }}\n      className={mergeClasses(styles.footer, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  AlertDialogTitleProps\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  AlertDialogDescriptionProps\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogAction = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogActionProps\n>(function AlertDialogAction(\n  {\n    variant = \"primary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Action asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-action\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-action\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Action>\n  )\n})\n\nexport const AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogCancelProps\n>(function AlertDialogCancel(\n  {\n    variant = \"secondary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Cancel asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-cancel\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-cancel\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Cancel>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.body","shorthands","tokens.spacingGroup2","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.spacingElement2","tokens.textXl","tokens.leadingXl","tokens.fontWeightSemibold","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","AlertDialog","React","props","_ref","AlertDialogPrimitive.Root","AlertDialogTrigger","className","ref","jsx","AlertDialogPrimitive.Trigger","SLOT_ATTR","AlertDialogPortal","AlertDialogPrimitive.Portal","AlertDialogOverlay","styles","appearance","useAppearanceAttributes","AlertDialogPrimitive.Overlay","mergeClasses","AlertDialogContent","size","children","override","useDensity","jsxs","Fragment","AlertDialogPrimitive.Content","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogPrimitive.Title","AlertDialogDescription","AlertDialogPrimitive.Description","AlertDialogAction","variant","destructive","AlertDialogPrimitive.Action","Button","AlertDialogCancel","AlertDialogPrimitive.Cancel"],"mappings":"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"}

package/dist/components/callout/callout.js

@@ -1,12 +1,12 @@
 import { jsx as n, jsxs as k } from "react/jsx-runtime";
 import * as a from "react";
-import { mergeClasses as m, SLOT_ATTR as s, shorthands as I } from "@epilot/zenith-runtime/v1";
+import { mergeClasses as m, SLOT_ATTR as C, shorthands as w } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as V } from "../../styles/make-styles.js";
-import { spacingGroup2 as w, spacingLayout1 as y, spacingElement2 as v, spacingLayout2 as E, leadingSm as S, textSm as R, fontWeightSemibold as N, leadingBase as $, textBase as j, spacingElement3 as c, spacingElement1 as z } from "../../tokens/index.js";
-import { ClearButton as G } from "../../lib/clear-button.js";
-import { CloseIcon as H } from "../../lib/icons.js";
-import { NS as W } from "../../tokens/core.meta.generated.js";
-const A = a.forwardRef(
+import { spacingGroup2 as v, spacingLayout1 as y, spacingElement2 as x, spacingLayout2 as E, leadingSm as S, textSm as R, fontWeightSemibold as N, leadingBase as $, textBase as j, spacingElement3 as c, spacingElement1 as z, radiusXl as G } from "../../tokens/index.js";
+import { ClearButton as H } from "../../lib/clear-button.js";
+import { CloseIcon as W } from "../../lib/icons.js";
+import { NS as A } from "../../tokens/core.meta.generated.js";
+const O = a.forwardRef(
   function(o, t) {
     return /* @__PURE__ */ n(
       "svg",
@@ -20,7 +20,7 @@ const A = a.forwardRef(
       }
     );
   }
-), O = a.forwardRef(function(o, t) {
+), _ = a.forwardRef(function(o, t) {
   return /* @__PURE__ */ n(
     "svg",
     {
@@ -32,7 +32,7 @@ const A = a.forwardRef(
       children: /* @__PURE__ */ n("path", { d: "M3.4255 20.5C3.256 20.5 3.10375 20.4586 2.96875 20.3757C2.83375 20.2929 2.72883 20.1837 2.654 20.048C2.576 19.9133 2.53308 19.7675 2.52525 19.6105C2.51742 19.4535 2.55975 19.298 2.65225 19.144L11.213 4.356C11.3057 4.202 11.4215 4.08817 11.5605 4.0145C11.6997 3.94083 11.8462 3.904 12 3.904C12.1538 3.904 12.3003 3.94083 12.4395 4.0145C12.5785 4.08817 12.6943 4.202 12.787 4.356L21.3477 19.144C21.4402 19.298 21.4826 19.4535 21.4747 19.6105C21.4669 19.7675 21.424 19.9133 21.346 20.048C21.2712 20.1837 21.1663 20.2929 21.0313 20.3757C20.8963 20.4586 20.744 20.5 20.5745 20.5H3.4255ZM12 17.8077C12.2288 17.8077 12.4207 17.7303 12.5755 17.5755C12.7303 17.4207 12.8078 17.2288 12.8078 17C12.8078 16.7712 12.7303 16.5793 12.5755 16.4245C12.4207 16.2697 12.2288 16.1923 12 16.1923C11.7712 16.1923 11.5793 16.2697 11.4245 16.4245C11.2697 16.5793 11.1923 16.7712 11.1923 17C11.1923 17.2288 11.2697 17.4207 11.4245 17.5755C11.5793 17.7303 11.7712 17.8077 12 17.8077ZM12.0003 15.1923C12.2129 15.1923 12.391 15.1204 12.5345 14.9768C12.6782 14.8329 12.75 14.6548 12.75 14.4423V10.9423C12.75 10.7298 12.6781 10.5517 12.5342 10.408C12.3904 10.2642 12.2122 10.1923 11.9997 10.1923C11.7871 10.1923 11.609 10.2642 11.4655 10.408C11.3218 10.5517 11.25 10.7298 11.25 10.9423V14.4423C11.25 14.6548 11.3219 14.8329 11.4658 14.9768C11.6096 15.1204 11.7878 15.1923 12.0003 15.1923Z" })
     }
   );
-}), _ = a.forwardRef(
+}), F = a.forwardRef(
   function(o, t) {
     return /* @__PURE__ */ n(
       "svg",
@@ -46,7 +46,7 @@ const A = a.forwardRef(
       }
     );
   }
-), F = a.forwardRef(
+), P = a.forwardRef(
   function(o, t) {
     return /* @__PURE__ */ n(
       "svg",
@@ -60,10 +60,10 @@ const A = a.forwardRef(
       }
     );
   }
-), x = a.createContext({
+), I = a.createContext({
   variant: "info",
   hideIcon: !1
-}), u = "--zenith-callout-bg", d = "--zenith-callout-fg", l = (i, o) => `var(--zenith-${W}-${i}-${o})`, P = {
+}), u = "--zenith-callout-bg", d = "--zenith-callout-fg", l = (i, o) => `var(--zenith-${A}-${i}-${o})`, X = {
   info: () => ({
     [u]: l("accent", "soft"),
     [d]: l("accent", "default")
@@ -88,6 +88,8 @@ const A = a.forwardRef(
   root: {
     position: "relative",
     width: "100%",
+    // v1 `rounded-xl`, the same radius as Card so the two agree side by side.
+    ...w.borderRadius(G),
     // p-3 — no token for 0.75rem.
     paddingTop: c,
     paddingRight: c,
@@ -111,13 +113,13 @@ const A = a.forwardRef(
         // gap-x-3 — no token for 0.75rem.
         columnGap: c
       },
-      [`&:has([${s}="callout-icon"])`]: {
+      [`&:has([${C}="callout-icon"])`]: {
         gridTemplateColumns: "1rem 1fr",
         columnGap: c
       }
     },
     // v1 `[&>[data-slot=callout-icon]]` — SLOT_ATTR, never data-slot (CONVENTIONS rule 4).
-    [`& > [${s}="callout-icon"]`]: {
+    [`& > [${C}="callout-icon"]`]: {
       // size-5 — no token for 1.25rem.
       width: "1.25rem",
       height: "1.25rem",
@@ -130,12 +132,12 @@ const A = a.forwardRef(
   },
   title: {
     gridColumnStart: 2,
-    ...I.overflow("hidden"),
+    ...w.overflow("hidden"),
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: 1,
     // min-h-4
-    minHeight: w,
+    minHeight: v,
     fontSize: j,
     lineHeight: $,
     fontWeight: N
@@ -144,7 +146,7 @@ const A = a.forwardRef(
     gridColumnStart: 2,
     display: "grid",
     justifyItems: "start",
-    ...I.gap(z),
+    ...w.gap(z),
     fontSize: R,
     lineHeight: S,
     "& p": {
@@ -157,7 +159,7 @@ const A = a.forwardRef(
     width: "100%",
     gridColumnEnd: "span 3",
     // mt-2
-    marginTop: v
+    marginTop: x
   },
   actionStart: {
     justifyContent: "flex-start"
@@ -173,36 +175,36 @@ const A = a.forwardRef(
   dismiss: {
     position: "absolute",
     // top-2 right-2
-    top: v,
-    right: v,
+    top: x,
+    right: x,
     // size-6 — the ClearButton itself supplies centering, rounding, hover and focus.
     width: y,
     height: y
   },
   dismissIcon: {
     // size-4
-    width: w,
-    height: w
+    width: v,
+    height: v
   }
-}), o1 = a.forwardRef(
+}), n1 = a.forwardRef(
   function({
     className: o,
     variant: t = "info",
     hideIcon: e = !1,
     customIcon: r,
     dismissible: f = !1,
-    onDismiss: C,
+    onDismiss: s,
     style: p,
     children: L,
     ...T
   }, Z) {
-    const [M, b] = a.useState(!0), g = h();
-    if (!M)
+    const [b, M] = a.useState(!0), g = h();
+    if (!b)
       return null;
     const B = () => {
-      b(!1), C == null || C();
+      M(!1), s == null || s();
     };
-    return /* @__PURE__ */ n(x.Provider, { value: { variant: t, hideIcon: e }, children: /* @__PURE__ */ k(
+    return /* @__PURE__ */ n(I.Provider, { value: { variant: t, hideIcon: e }, children: /* @__PURE__ */ k(
       "div",
       {
         ref: Z,
@@ -211,31 +213,31 @@ const A = a.forwardRef(
         "data-hide-icon": e ? "true" : "false",
         "data-dismissible": f ? "true" : "false",
         role: "alert",
-        [s]: "callout",
+        [C]: "callout",
         className: m(
           g.root,
           f && g.dismissible,
           o
         ),
-        style: { ...P[t](), ...p },
+        style: { ...X[t](), ...p },
         ...T,
         children: [
           !e && /* @__PURE__ */ n(D, { customIcon: r }),
           L,
           f && /* @__PURE__ */ n(
-            G,
+            H,
             {
               label: "Dismiss",
               onClick: B,
               className: g.dismiss,
-              children: /* @__PURE__ */ n(H, { className: g.dismissIcon })
+              children: /* @__PURE__ */ n(W, { className: g.dismissIcon })
             }
           )
         ]
       }
     ) });
   }
-), n1 = a.forwardRef(
+), e1 = a.forwardRef(
   function({ className: o, ...t }, e) {
     const r = h();
     return /* @__PURE__ */ n(
@@ -243,50 +245,50 @@ const A = a.forwardRef(
       {
         ref: e,
         "data-slot": "callout-title",
-        [s]: "callout-title",
+        [C]: "callout-title",
         className: m(r.title, o),
         ...t
       }
     );
   }
-), e1 = a.forwardRef(function({ className: o, ...t }, e) {
+), a1 = a.forwardRef(function({ className: o, ...t }, e) {
   const r = h();
   return /* @__PURE__ */ n(
     "div",
     {
       ref: e,
       "data-slot": "callout-description",
-      [s]: "callout-description",
+      [C]: "callout-description",
       className: m(r.description, o),
       ...t
     }
   );
-}), a1 = a.forwardRef(function({ className: o, align: t = "start", ...e }, r) {
-  const { hideIcon: f } = a.useContext(x), C = h(), p = t === "end" ? C.actionEnd : f ? C.actionStart : C.actionStartIcon;
+}), i1 = a.forwardRef(function({ className: o, align: t = "start", ...e }, r) {
+  const { hideIcon: f } = a.useContext(I), s = h(), p = t === "end" ? s.actionEnd : f ? s.actionStart : s.actionStartIcon;
   return /* @__PURE__ */ n(
     "div",
     {
       ref: r,
       "data-slot": "callout-action",
       "data-align": t,
-      [s]: "callout-action",
-      className: m(C.action, p, o),
+      [C]: "callout-action",
+      className: m(s.action, p, o),
       ...e
     }
   );
 }), q = a.forwardRef(function({ customIcon: o, ...t }, e) {
-  const { variant: r } = a.useContext(x);
+  const { variant: r } = a.useContext(I);
   if (o)
     return o;
   switch (r) {
     case "info":
-      return /* @__PURE__ */ n(A, { ref: e, ...t });
+      return /* @__PURE__ */ n(O, { ref: e, ...t });
     case "success":
-      return /* @__PURE__ */ n(_, { ref: e, ...t });
+      return /* @__PURE__ */ n(F, { ref: e, ...t });
     case "warning":
-      return /* @__PURE__ */ n(O, { ref: e, ...t });
+      return /* @__PURE__ */ n(_, { ref: e, ...t });
     case "destructive":
-      return /* @__PURE__ */ n(F, { ref: e, ...t });
+      return /* @__PURE__ */ n(P, { ref: e, ...t });
   }
   return null;
 }), D = a.forwardRef(
@@ -296,7 +298,7 @@ const A = a.forwardRef(
       {
         ref: r,
         "data-slot": "callout-icon",
-        [s]: "callout-icon",
+        [C]: "callout-icon",
         customIcon: t,
         className: o,
         ...e
@@ -305,9 +307,9 @@ const A = a.forwardRef(
   }
 );
 export {
-  o1 as Callout,
-  a1 as CalloutAction,
-  e1 as CalloutDescription,
-  n1 as CalloutTitle
+  n1 as Callout,
+  i1 as CalloutAction,
+  a1 as CalloutDescription,
+  e1 as CalloutTitle
 };
 //# sourceMappingURL=callout.js.map