@still-forest/canopy 0.45.1 → 0.46.0

package/dist/index.d.ts

@@ -43,23 +43,27 @@ declare type AccordionTriggerProps = React.ComponentProps<typeof AccordionTrigge
 export declare const Alert: ({ type, title, message, className, children }: AlertProps) => JSX.Element;
 
 export declare interface AlertProps {
-    type: "info" | "success" | "warning" | "error";
+    type: AlertVariant;
     title?: string;
     message?: string;
     className?: string;
     children?: React.ReactNode;
 }
 
+declare type AlertVariant = "info" | "success" | "warning" | "error";
+
 export declare const Badge: ({ label, onClick, className, variant, color }: BadgeProps) => JSX.Element;
 
 export declare interface BadgeProps {
-    variant?: "default" | "secondary" | "destructive" | "outline";
+    variant?: BadgeVariant;
     color?: TailwindColor;
     label: string;
     onClick?: () => void;
     className?: string;
 }
 
+declare type BadgeVariant = AlertVariant | "default" | "secondary" | "destructive" | "outline";
+
 export declare type BaseButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "unstyled";
 
 export declare type BaseButtonVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "unstyled" | "error" | "info" | "success" | "warning";
@@ -309,7 +313,7 @@ declare interface ErrorFallbackProps extends ErrorOverlayProps {
     onRetry?: () => void;
 }
 
-export declare const ErrorOverlay: ({ message, children, ...props }: ErrorOverlayProps) => JSX.Element;
+export declare const ErrorOverlay: ({ headline, message, children, ...props }: ErrorOverlayProps) => JSX.Element;
 
 export declare interface ErrorOverlayProps extends InterstitialProps {
 }
@@ -505,12 +509,16 @@ export declare interface InputProps extends TextInputProps {
     step?: string;
 }
 
-export declare const Interstitial: ({ variant, iconComponent, message, children, iconSize, iconClassName, fullScreen, containerClassName, }: InterstitialProps) => JSX.Element;
+export declare const Interstitial: ({ variant, iconComponent, headline, headlineLevel, headlineWeight, message, messageClassName, children, iconSize, iconClassName, fullScreen, containerClassName, }: InterstitialProps) => JSX.Element;
 
 export declare interface InterstitialProps {
-    variant?: "error" | "info" | "success" | "warning";
+    variant?: AlertVariant;
     iconComponent?: default_2.ElementType;
+    headline?: string;
+    headlineLevel?: HeadingSize;
+    headlineWeight?: FontWeight;
     message?: string;
+    messageClassName?: string;
     iconSize?: LoaderProps["size"];
     iconClassName?: string;
     children?: default_2.ReactNode;
@@ -644,7 +652,7 @@ export declare const PageLoader: ({ iconComponent, message, iconSize, iconClassN
 declare interface PageLoaderProps extends InterstitialProps {
 }
 
-export declare const PageNotFound: ({ onBack, message, backIcon, backLabel, ...props }: PageNotFoundProps) => JSX.Element;
+export declare const PageNotFound: ({ onBack, headline, message, backIcon, backLabel, ...props }: PageNotFoundProps) => JSX.Element;
 
 declare interface PageNotFoundProps extends InterstitialProps {
     backIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;

package/dist/index.js

@@ -53,7 +53,7 @@ function Eu(e, t) {
   }
   return [r, o];
 }
-function je(e, t = []) {
+function De(e, t = []) {
   let n = [];
   function r(a, s) {
     const i = m.createContext(s), c = n.length;
@@ -175,7 +175,7 @@ function Tu(e) {
   return n ? e.ref : (t = Object.getOwnPropertyDescriptor(e, "ref")?.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
 }
 function oa(e) {
-  const t = e + "CollectionProvider", [n, r] = je(t), [o, a] = n(
+  const t = e + "CollectionProvider", [n, r] = De(t), [o, a] = n(
     t,
     { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
   ), s = (g) => {
@@ -368,7 +368,7 @@ function Ne(e) {
     n((r) => r ?? String(zu++));
   }, [e]), e || (t ? `radix-${t}` : "");
 }
-var wr = "Collapsible", [Hu, ai] = je(wr), [Vu, aa] = Hu(wr), si = m.forwardRef(
+var wr = "Collapsible", [Hu, ai] = De(wr), [Vu, aa] = Hu(wr), si = m.forwardRef(
   (e, t) => {
     const {
       __scopeCollapsible: n,
@@ -473,7 +473,7 @@ function Tn(e) {
   const t = m.useContext(qu);
   return e || t || "ltr";
 }
-var ze = "Accordion", Ku = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [da, Zu, Xu] = oa(ze), [kr, EC] = je(ze, [
+var ze = "Accordion", Ku = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [da, Zu, Xu] = oa(ze), [kr, EC] = De(ze, [
   Xu,
   ai
 ]), ua = ai(), ci = E.forwardRef(
@@ -1537,7 +1537,7 @@ const ve = (e) => {
     x,
     B,
     L
-  ], ie = () => ["none", oe, B, L], xe = () => ["none", oe, B, L], Ee = () => [oe, B, L], $e = () => [zt, "full", ...M()];
+  ], ie = () => ["none", oe, B, L], xe = () => ["none", oe, B, L], Me = () => [oe, B, L], $e = () => [zt, "full", ...M()];
   return {
     cacheSize: 500,
     theme: {
@@ -3545,21 +3545,21 @@ const ve = (e) => {
        * @see https://tailwindcss.com/docs/skew
        */
       skew: [{
-        skew: Ee()
+        skew: Me()
       }],
       /**
        * Skew X
        * @see https://tailwindcss.com/docs/skew
        */
       "skew-x": [{
-        "skew-x": Ee()
+        "skew-x": Me()
       }],
       /**
        * Skew Y
        * @see https://tailwindcss.com/docs/skew
        */
       "skew-y": [{
-        "skew-y": Ee()
+        "skew-y": Me()
       }],
       /**
        * Transform
@@ -4104,7 +4104,11 @@ const hp = {
         default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        info: "border-info bg-info text-info-foreground [a&]:hover:bg-info/90 focus-visible:ring-info/20 dark:focus-visible:ring-info/40 dark:bg-info/60",
+        success: "border-success bg-success text-success-foreground [a&]:hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/60",
+        warning: "border-warning bg-warning text-warning-foreground [a&]:hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/60",
+        error: "border-destructive bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
       }
     },
     defaultVariants: {
@@ -4122,7 +4126,7 @@ function vp({
   return /* @__PURE__ */ l.jsx(o, { className: C(gp({ variant: t }), e), "data-slot": "badge", ...r });
 }
 const bp = ut(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       color: {
@@ -4155,7 +4159,11 @@ const bp = ut(
         default: "border-transparent",
         secondary: "border-transparent",
         destructive: "border-transparent",
-        outline: ""
+        outline: "",
+        info: "border-transparent",
+        success: "border-transparent",
+        warning: "border-transparent",
+        error: "border-transparent"
       }
     },
     compoundVariants: [
@@ -4364,7 +4372,7 @@ const Sp = ({ to: e, label: t }) => /* @__PURE__ */ l.jsx(Fi, { className: "font
     ] }),
     c < e.length - 1 && /* @__PURE__ */ l.jsx(Cp, {})
   ] }, i)) }) });
-}, OC = ({ children: e, className: t, as: n = "p", ...r }) => /* @__PURE__ */ l.jsx(De, { as: n, className: C("mb-4", t), ...r, children: e }), De = E.forwardRef(
+}, OC = ({ children: e, className: t, as: n = "p", ...r }) => /* @__PURE__ */ l.jsx(Ee, { as: n, className: C("mb-4", t), ...r, children: e }), Ee = E.forwardRef(
   ({
     className: e,
     as: t,
@@ -4491,8 +4499,8 @@ const Sp = ({ to: e, label: t }) => /* @__PURE__ */ l.jsx(Fi, { className: "font
     );
   }
 );
-De.displayName = "Text";
-const Ep = ({ children: e, ...t }) => /* @__PURE__ */ l.jsx(De, { className: "inline-block w-fit rounded bg-accent px-2", family: "mono", size: "sm", variant: "accent", ...t, children: e }), Nr = E.forwardRef(
+Ee.displayName = "Text";
+const Ep = ({ children: e, ...t }) => /* @__PURE__ */ l.jsx(Ee, { className: "inline-block w-fit rounded bg-accent px-2", family: "mono", size: "sm", variant: "accent", ...t, children: e }), Nr = E.forwardRef(
   ({
     className: e,
     variant: t = "default",
@@ -4625,7 +4633,7 @@ const Ep = ({ children: e, ...t }) => /* @__PURE__ */ l.jsx(De, { className: "in
   }
 );
 Nr.displayName = "Heading";
-const Mp = ({ children: e, className: t, ...n }) => /* @__PURE__ */ l.jsx("ul", { className: C("list-disc flex flex-col gap-2 ml-4", t), ...n, children: e }), jp = ({ children: e, ...t }) => /* @__PURE__ */ l.jsx(De, { as: "li", ...t, children: e });
+const Mp = ({ children: e, className: t, ...n }) => /* @__PURE__ */ l.jsx("ul", { className: C("list-disc flex flex-col gap-2 ml-4", t), ...n, children: e }), jp = ({ children: e, ...t }) => /* @__PURE__ */ l.jsx(Ee, { as: "li", ...t, children: e });
 Mp.Item = jp;
 function Dp({ className: e, ...t }) {
   return /* @__PURE__ */ l.jsx(
@@ -4754,7 +4762,7 @@ function Hp({ className: e, ...t }) {
   );
 }
 const Pn = ({ children: e, ...t }) => /* @__PURE__ */ l.jsx(Wp, { ...t, children: e }), Vp = ({ children: e, ...t }) => /* @__PURE__ */ l.jsx(Nr, { "data-slot": "empty-title", level: "3", weight: "medium", ...t, children: e }), Gp = ({ children: e, className: t, ...n }) => /* @__PURE__ */ l.jsx(
-  De,
+  Ee,
   {
     className: C(
       "text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
@@ -6252,7 +6260,7 @@ function _n(e) {
       n(void 0);
   }, [e]), t;
 }
-var ka = "Popper", [el, Rr] = je(ka), [fg, tl] = el(ka), nl = (e) => {
+var ka = "Popper", [el, Rr] = De(ka), [fg, tl] = el(ka), nl = (e) => {
   const { __scopePopper: t, children: n } = e, [r, o] = m.useState(null);
   return /* @__PURE__ */ l.jsx(fg, { scope: t, anchor: r, onAnchorChange: o, children: n });
 };
@@ -6311,8 +6319,8 @@ var Ca = "PopperContent", [mg, pg] = el(Ca), al = m.forwardRef(
         ig({
           ...T,
           apply: ({ elements: U, rects: ue, availableWidth: ie, availableHeight: xe }) => {
-            const { width: Ee, height: $e } = ue.reference, nt = U.floating.style;
-            nt.setProperty("--radix-popper-available-width", `${ie}px`), nt.setProperty("--radix-popper-available-height", `${xe}px`), nt.setProperty("--radix-popper-anchor-width", `${Ee}px`), nt.setProperty("--radix-popper-anchor-height", `${$e}px`);
+            const { width: Me, height: $e } = ue.reference, nt = U.floating.style;
+            nt.setProperty("--radix-popper-available-width", `${ie}px`), nt.setProperty("--radix-popper-available-height", `${xe}px`), nt.setProperty("--radix-popper-anchor-width", `${Me}px`), nt.setProperty("--radix-popper-anchor-height", `${$e}px`);
           }
         }),
         y && cg({ element: y, padding: i }),
@@ -6478,7 +6486,7 @@ var xg = Object.freeze({
   )
 );
 fl.displayName = yg;
-var wg = fl, [Pr, RC] = je("Tooltip", [
+var wg = fl, [Pr, RC] = De("Tooltip", [
   Rr
 ]), Ar = Rr(), ml = "TooltipProvider", kg = 700, Vo = "tooltip.open", [Cg, Na] = Pr(ml), pl = (e) => {
   const {
@@ -6820,7 +6828,7 @@ function Sl({
     }
   ) });
 }
-const Me = ({ children: e, open: t, onOpenChange: n }) => /* @__PURE__ */ l.jsx(Ma, { children: /* @__PURE__ */ l.jsx(kl, { onOpenChange: n, open: t, children: e }) }), Hg = ({ children: e, cursor: t = "pointer", className: n }) => /* @__PURE__ */ l.jsx(
+const je = ({ children: e, open: t, onOpenChange: n }) => /* @__PURE__ */ l.jsx(Ma, { children: /* @__PURE__ */ l.jsx(kl, { onOpenChange: n, open: t, children: e }) }), Hg = ({ children: e, cursor: t = "pointer", className: n }) => /* @__PURE__ */ l.jsx(
   Cl,
   {
     asChild: !0,
@@ -6834,11 +6842,11 @@ const Me = ({ children: e, open: t, onOpenChange: n }) => /* @__PURE__ */ l.jsx(
     children: e
   }
 ), Vg = ({ className: e, children: t }) => /* @__PURE__ */ l.jsx(Sl, { className: e, children: t });
-Me.Trigger = Hg;
-Me.Content = Vg;
-const Gg = ({ children: e, content: t }) => /* @__PURE__ */ l.jsxs(Me, { children: [
-  /* @__PURE__ */ l.jsx(Me.Trigger, { children: typeof e == "string" ? /* @__PURE__ */ l.jsx("span", { children: e }) : e }),
-  /* @__PURE__ */ l.jsx(Me.Content, { children: t })
+je.Trigger = Hg;
+je.Content = Vg;
+const Gg = ({ children: e, content: t }) => /* @__PURE__ */ l.jsxs(je, { children: [
+  /* @__PURE__ */ l.jsx(je.Trigger, { children: typeof e == "string" ? /* @__PURE__ */ l.jsx("span", { children: e }) : e }),
+  /* @__PURE__ */ l.jsx(je.Content, { children: t })
 ] }), cn = ({ content: e, className: t }) => /* @__PURE__ */ l.jsx(Gg, { content: e, children: /* @__PURE__ */ l.jsx(Tf, { className: C("size-4 text-muted-foreground stroke-1", t) }) });
 var Yg = "Separator", xs = "horizontal", Ug = ["horizontal", "vertical"], Nl = m.forwardRef((e, t) => {
   const { decorative: n, orientation: r = xs, ...o } = e, a = qg(r) ? r : xs, i = n ? { role: "none" } : { "aria-orientation": a === "vertical" ? a : void 0, role: "separator" };
@@ -7696,7 +7704,7 @@ var Kv = function(e) {
   return o ? (r.push.apply(r, Array.from(o.querySelectorAll("[aria-live], script"))), Xv(r, o, n, "aria-hidden")) : function() {
     return null;
   };
-}, Ir = "Dialog", [Wl, PC] = je(Ir), [Qv, He] = Wl(Ir), Ll = (e) => {
+}, Ir = "Dialog", [Wl, PC] = De(Ir), [Qv, He] = Wl(Ir), Ll = (e) => {
   const {
     __scopeDialog: t,
     children: n,
@@ -8233,7 +8241,7 @@ const IC = ({ pageCount: e, currentPage: t, onChange: n }) => {
     ) })
   ] }) });
 };
-var Br = "Popover", [ac, $C] = je(Br, [
+var Br = "Popover", [ac, $C] = De(Br, [
   Rr
 ]), $n = Rr(), [bb, St] = ac(Br), sc = (e) => {
   const {
@@ -8581,7 +8589,7 @@ dn.Cell = $b;
 dn.Head = Ib;
 dn.Header = Pb;
 dn.Row = _b;
-var wo = "rovingFocusGroup.onEntryFocus", Wb = { bubbles: !1, cancelable: !0 }, Fn = "RovingFocusGroup", [Uo, gc, Lb] = oa(Fn), [Bb, zr] = je(
+var wo = "rovingFocusGroup.onEntryFocus", Wb = { bubbles: !1, cancelable: !0 }, Fn = "RovingFocusGroup", [Uo, gc, Lb] = oa(Fn), [Bb, zr] = De(
   Fn,
   [Lb]
 ), [zb, Hb] = Bb(Fn), vc = m.forwardRef(
@@ -8745,7 +8753,7 @@ function yc(e, t = !1) {
 function qb(e, t) {
   return e.map((n, r) => e[(t + r) % e.length]);
 }
-var wc = vc, kc = xc, Hr = "Tabs", [Kb, LC] = je(Hr, [
+var wc = vc, kc = xc, Hr = "Tabs", [Kb, LC] = De(Hr, [
   zr
 ]), Cc = zr(), [Zb, $a] = Kb(Hr), Sc = m.forwardRef(
   (e, t) => {
@@ -9600,7 +9608,7 @@ function Vr(e) {
   const t = m.useRef({ value: e, previous: e });
   return m.useMemo(() => (t.current.value !== e && (t.current.previous = t.current.value, t.current.value = e), t.current.previous), [e]);
 }
-var Gr = "Checkbox", [dx, qC] = je(Gr), [ux, La] = dx(Gr);
+var Gr = "Checkbox", [dx, qC] = De(Gr), [ux, La] = dx(Gr);
 function fx(e) {
   const {
     __scopeCheckbox: t,
@@ -9887,7 +9895,7 @@ const KC = ({
       c && /* @__PURE__ */ l.jsx(cn, { content: c })
     ] }),
     (a || s) && /* @__PURE__ */ l.jsxs(le, { className: "ml-6", direction: "col", gap: "2", children: [
-      a && /* @__PURE__ */ l.jsx(De, { size: "sm", variant: "muted", children: a }),
+      a && /* @__PURE__ */ l.jsx(Ee, { size: "sm", variant: "muted", children: a }),
       s && /* @__PURE__ */ l.jsx(Nt, { message: s })
     ] })
   ] });
@@ -12464,7 +12472,7 @@ function g0(e) {
     t.formatters,
     t.labels,
     t.classNames
-  ]), { captionLayout: c, mode: d, navLayout: f, numberOfMonths: u = 1, onDayBlur: p, onDayClick: h, onDayFocus: x, onDayKeyDown: g, onDayMouseEnter: b, onDayMouseLeave: v, onNextClick: k, onPrevClick: w, showWeekNumber: y, styles: N } = t, { formatCaption: j, formatDay: S, formatMonthDropdown: M, formatWeekNumber: R, formatWeekNumberHeader: _, formatWeekdayName: P, formatYearDropdown: z } = r, T = a0(t, a), { days: G, months: Y, navStart: F, navEnd: H, previousMonth: D, nextMonth: Q, goToMonth: se } = T, we = xw(G, t, F, H, a), { isSelected: O, select: A, selected: V } = h0(t, a) ?? {}, { blur: W, focused: ne, isFocusTarget: U, moveFocus: ue, setFocused: ie } = l0(t, T, we, O ?? (() => !1), a), { labelDayButton: xe, labelGridcell: Ee, labelGrid: $e, labelMonthDropdown: nt, labelNav: ee, labelPrevious: Vn, labelNext: Gn, labelWeekday: pn, labelWeekNumber: Qr, labelWeekNumberHeader: Jr, labelYearDropdown: mt } = o, Yn = Rt(() => _w(a, t.ISOWeek), [a, t.ISOWeek]), Un = d !== void 0 || h !== void 0, rt = Ae(() => {
+  ]), { captionLayout: c, mode: d, navLayout: f, numberOfMonths: u = 1, onDayBlur: p, onDayClick: h, onDayFocus: x, onDayKeyDown: g, onDayMouseEnter: b, onDayMouseLeave: v, onNextClick: k, onPrevClick: w, showWeekNumber: y, styles: N } = t, { formatCaption: j, formatDay: S, formatMonthDropdown: M, formatWeekNumber: R, formatWeekNumberHeader: _, formatWeekdayName: P, formatYearDropdown: z } = r, T = a0(t, a), { days: G, months: Y, navStart: F, navEnd: H, previousMonth: D, nextMonth: Q, goToMonth: se } = T, we = xw(G, t, F, H, a), { isSelected: O, select: A, selected: V } = h0(t, a) ?? {}, { blur: W, focused: ne, isFocusTarget: U, moveFocus: ue, setFocused: ie } = l0(t, T, we, O ?? (() => !1), a), { labelDayButton: xe, labelGridcell: Me, labelGrid: $e, labelMonthDropdown: nt, labelNav: ee, labelPrevious: Vn, labelNext: Gn, labelWeekday: pn, labelWeekNumber: Qr, labelWeekNumberHeader: Jr, labelYearDropdown: mt } = o, Yn = Rt(() => _w(a, t.ISOWeek), [a, t.ISOWeek]), Un = d !== void 0 || h !== void 0, rt = Ae(() => {
     D && (se(D), w?.(D));
   }, [D, se, w]), hn = Ae(() => {
     Q && (se(Q), k?.(Q));
@@ -12610,7 +12618,7 @@ function g0(e) {
                   const { from: Se, to: Fe } = V;
                   Z[We.range_start] = !!(Se && Fe && a.isSameDay(J, Se)), Z[We.range_end] = !!(Se && Fe && a.isSameDay(J, Fe)), Z[We.range_middle] = at(V, J, !0, a);
                 }
-                const ke = Aw(Z, N, t.modifiersStyles), ye = yw(Z, i, t.modifiersClassNames), Ve = !Un && !Z.hidden ? Ee(J, Z, a.options, a) : void 0;
+                const ke = Aw(Z, N, t.modifiersStyles), ye = yw(Z, i, t.modifiersClassNames), Ve = !Un && !Z.hidden ? Me(J, Z, a.options, a) : void 0;
                 return (
                   // biome-ignore lint/a11y/useSemanticElements: react component
                   E.createElement(n.Day, { key: `${a.format(J, "yyyy-MM-dd")}_${a.format(K.displayMonth, "yyyy-MM")}`, day: K, modifiers: Z, className: ye.join(" "), style: ke, role: "gridcell", "aria-selected": Z.selected || void 0, "aria-label": Ve, "data-day": a.format(J, "yyyy-MM-dd"), "data-month": K.outside ? a.format(J, "yyyy-MM") : void 0, "data-selected": Z.selected || void 0, "data-disabled": Z.disabled || void 0, "data-hidden": Z.hidden || void 0, "data-outside": K.outside || void 0, "data-focused": Z.focused || void 0, "data-today": Z.today || void 0 }, !Z.hidden && Un ? E.createElement(n.DayButton, { className: i[q.DayButton], style: N?.[q.DayButton], type: "button", day: K, modifiers: Z, disabled: Z.disabled || void 0, tabIndex: U(K) ? 0 : -1, "aria-label": xe(J, Z, a.options, a), onClick: qn(K, Z), onBlur: to(K, Z), onFocus: eo(K, Z), onKeyDown: Bt(K, Z), onMouseEnter: no(K, Z), onMouseLeave: Kn(K, Z) }, S(J, a.options, a)) : !Z.hidden && S(K.date, a.options, a))
@@ -12947,10 +12955,10 @@ const XC = ({ onDateSelection: e, initialValue: t, className: n, size: r = "defa
         ...u
       }
     ),
-    i && /* @__PURE__ */ l.jsx(De, { size: "sm", variant: "muted", children: i }),
+    i && /* @__PURE__ */ l.jsx(Ee, { size: "sm", variant: "muted", children: i }),
     f && /* @__PURE__ */ l.jsx(Nt, { message: f })
   ] });
-}, w0 = ({ type: e = "text", step: t, ...n }) => e === "number" ? /* @__PURE__ */ l.jsx(_0, { ...n, step: t ?? ".01" }) : e === "date" ? /* @__PURE__ */ l.jsx(hx, { ...n }) : /* @__PURE__ */ l.jsx(Ha, { type: e, ...n }), Nt = ({ id: e, message: t }) => /* @__PURE__ */ l.jsx(De, { id: e, size: "xs", variant: "destructive", children: t });
+}, w0 = ({ type: e = "text", step: t, ...n }) => e === "number" ? /* @__PURE__ */ l.jsx(_0, { ...n, step: t ?? ".01" }) : e === "date" ? /* @__PURE__ */ l.jsx(hx, { ...n }) : /* @__PURE__ */ l.jsx(Ha, { type: e, ...n }), Nt = ({ id: e, message: t }) => /* @__PURE__ */ l.jsx(Ee, { id: e, size: "xs", variant: "destructive", children: t });
 function k0({ className: e, ...t }) {
   return /* @__PURE__ */ l.jsx(
     "textarea",
@@ -13178,11 +13186,11 @@ const Je = ({ htmlFor: e, value: t, children: n, size: r = "md", className: o =
         }
       ) })
     ] }),
-    o && /* @__PURE__ */ l.jsx(De, { size: "sm", variant: "muted", children: o }),
+    o && /* @__PURE__ */ l.jsx(Ee, { size: "sm", variant: "muted", children: o }),
     a && /* @__PURE__ */ l.jsx(Nt, { message: a })
   ] });
 };
-var Va = "Radio", [I0, bd] = je(Va), [$0, F0] = I0(Va), xd = m.forwardRef(
+var Va = "Radio", [I0, bd] = De(Va), [$0, F0] = I0(Va), xd = m.forwardRef(
   (e, t) => {
     const {
       __scopeRadio: n,
@@ -13291,7 +13299,7 @@ kd.displayName = W0;
 function Cd(e) {
   return e ? "checked" : "unchecked";
 }
-var L0 = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], Ur = "RadioGroup", [B0, JC] = je(Ur, [
+var L0 = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], Ur = "RadioGroup", [B0, JC] = De(Ur, [
   zr,
   bd
 ]), Sd = zr(), Nd = bd(), [z0, H0] = B0(Ur), Ed = m.forwardRef(
@@ -13496,7 +13504,7 @@ const tS = ({
     f?.(w.target.value);
   };
   return /* @__PURE__ */ l.jsxs(le, { className: "w-full", direction: "col", gap: "2", children: [
-    /* @__PURE__ */ l.jsxs(le, { align: "center", direction: "row", gap: "1", children: [
+    (r || s) && /* @__PURE__ */ l.jsxs(le, { align: "center", direction: "row", gap: "1", children: [
       r && /* @__PURE__ */ l.jsx(Je, { className: o, htmlFor: g, children: r }),
       s && /* @__PURE__ */ l.jsx(cn, { content: s })
     ] }),
@@ -13518,7 +13526,7 @@ const tS = ({
         ]
       }
     ),
-    i && /* @__PURE__ */ l.jsx(De, { size: "sm", variant: "muted", children: i }),
+    i && /* @__PURE__ */ l.jsx(Ee, { size: "sm", variant: "muted", children: i }),
     u && /* @__PURE__ */ l.jsx(Nt, { id: `${g}-error`, message: u })
   ] });
 }, Mo = 768;
@@ -14127,7 +14135,7 @@ function k1({ open: e, onOpenChange: t, children: n, onDrag: r, onRelease: o, sn
         document.body.style.pointerEvents = "auto";
       }), I || (document.body.style.pointerEvents = "auto");
     }
-  }), [H, D] = E.useState(!1), [Q, se] = E.useState(!1), [we, O] = E.useState(!1), A = E.useRef(null), V = E.useRef(null), W = E.useRef(null), ne = E.useRef(null), U = E.useRef(null), ue = E.useRef(!1), ie = E.useRef(null), xe = E.useRef(0), Ee = E.useRef(!1), $e = E.useRef(!N), nt = E.useRef(0), ee = E.useRef(null), Vn = E.useRef(((T = ee.current) == null ? void 0 : T.getBoundingClientRect().height) || 0), Gn = E.useRef(((G = ee.current) == null ? void 0 : G.getBoundingClientRect().width) || 0), pn = E.useRef(0), Qr = E.useCallback((I) => {
+  }), [H, D] = E.useState(!1), [Q, se] = E.useState(!1), [we, O] = E.useState(!1), A = E.useRef(null), V = E.useRef(null), W = E.useRef(null), ne = E.useRef(null), U = E.useRef(null), ue = E.useRef(!1), ie = E.useRef(null), xe = E.useRef(0), Me = E.useRef(!1), $e = E.useRef(!N), nt = E.useRef(0), ee = E.useRef(null), Vn = E.useRef(((T = ee.current) == null ? void 0 : T.getBoundingClientRect().height) || 0), Gn = E.useRef(((G = ee.current) == null ? void 0 : G.getBoundingClientRect().width) || 0), pn = E.useRef(0), Qr = E.useCallback((I) => {
     a && I === rt.length - 1 && (V.current = /* @__PURE__ */ new Date());
   }, []), { activeSnapPoint: Jr, activeSnapPointIndex: mt, setActiveSnapPoint: Yn, onRelease: Un, snapPointsOffset: rt, onDrag: hn, shouldFade: qn, getPercentageDragged: eo } = b1({
     snapPoints: a,
@@ -14238,23 +14246,23 @@ function k1({ open: e, onOpenChange: t, children: n, onDrag: r, onRelease: o, sn
     function $() {
       if (!ee.current || !R) return;
       const K = document.activeElement;
-      if (Ko(K) || Ee.current) {
+      if (Ko(K) || Me.current) {
         var J;
         const Z = ((J = window.visualViewport) == null ? void 0 : J.height) || 0, ke = window.innerHeight;
         let ye = ke - Z;
         const Ve = ee.current.getBoundingClientRect().height || 0, Se = Ve > ke * 0.8;
         pn.current || (pn.current = Ve);
         const Fe = ee.current.getBoundingClientRect().top;
-        if (Math.abs(nt.current - ye) > 60 && (Ee.current = !Ee.current), a && a.length > 0 && rt && mt) {
+        if (Math.abs(nt.current - ye) > 60 && (Me.current = !Me.current), a && a.length > 0 && rt && mt) {
           const pt = rt[mt] || 0;
           ye += pt;
         }
-        if (nt.current = ye, Ve > Z || Ee.current) {
+        if (nt.current = ye, Ve > Z || Me.current) {
           const pt = ee.current.getBoundingClientRect().height;
           let Ge = pt;
           pt > Z && (Ge = Z - (Se ? Fe : Zo)), g ? ee.current.style.height = `${pt - Math.max(ye, 0)}px` : ee.current.style.height = `${Math.max(Ge, Z - Fe)}px`;
         } else e1() || (ee.current.style.height = `${pn.current}px`);
-        a && a.length > 0 && !Ee.current ? ee.current.style.bottom = "0px" : ee.current.style.bottom = `${Math.max(ye, 0)}px`;
+        a && a.length > 0 && !Me.current ? ee.current.style.bottom = "0px" : ee.current.style.bottom = `${Math.max(ye, 0)}px`;
       }
     }
     return (I = window.visualViewport) == null || I.addEventListener("resize", $), () => {
@@ -14401,7 +14409,7 @@ function k1({ open: e, onOpenChange: t, children: n, onDrag: r, onRelease: o, sn
       onNestedDrag: so,
       onNestedOpenChange: Xn,
       onNestedRelease: re,
-      keyboardIsOpen: Ee,
+      keyboardIsOpen: Me,
       modal: b,
       snapPointsOffset: rt,
       activeSnapPointIndex: mt,
@@ -15095,7 +15103,7 @@ const ck = ({ label: e, options: t, onSelect: n, selectedValue: r }) => /* @__PU
         )
       }
     ),
-    d && /* @__PURE__ */ l.jsx(De, { size: "sm", variant: "muted", children: d }),
+    d && /* @__PURE__ */ l.jsx(Ee, { size: "sm", variant: "muted", children: d }),
     f && /* @__PURE__ */ l.jsx(Nt, { message: f })
   ] });
 };
@@ -15107,7 +15115,7 @@ var Xd = ["PageUp", "PageDown"], Qd = ["ArrowUp", "ArrowDown", "ArrowLeft", "Arr
   "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
   "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
   "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
-}, mn = "Slider", [Jo, dk, uk] = oa(mn), [eu, rS] = je(mn, [
+}, mn = "Slider", [Jo, dk, uk] = oa(mn), [eu, rS] = De(mn, [
   uk
 ]), [fk, Kr] = eu(mn), tu = m.forwardRef(
   (e, t) => {
@@ -15608,7 +15616,7 @@ const oS = ({ size: e = "md", thumbClassName: t, trackClassName: n, value: r, de
     }
   );
 };
-var Zr = "Switch", [Ok, aS] = je(Zr), [Rk, Tk] = Ok(Zr), uu = m.forwardRef(
+var Zr = "Switch", [Ok, aS] = De(Zr), [Rk, Tk] = Ok(Zr), uu = m.forwardRef(
   (e, t) => {
     const {
       __scopeSwitch: n,
@@ -15821,7 +15829,7 @@ function $k({
         ...c
       }
     ),
-    n && /* @__PURE__ */ l.jsx(De, { size: "sm", variant: "muted", children: n }),
+    n && /* @__PURE__ */ l.jsx(Ee, { size: "sm", variant: "muted", children: n }),
     a && /* @__PURE__ */ l.jsx(Nt, { message: a })
   ] });
 }
@@ -15854,7 +15862,7 @@ const Js = [
   }, i = Js.find((d) => d.theme === e)?.icon, c = Js.find((d) => d.theme === e)?.label;
   return /* @__PURE__ */ l.jsx("span", { className: C(r), ...a, children: /* @__PURE__ */ l.jsxs(ft, { className: C("p-1 w-full", o), onClick: s, variant: "unstyled", children: [
     i,
-    /* @__PURE__ */ l.jsx(De, { className: n, size: "base", truncate: !0, children: c })
+    /* @__PURE__ */ l.jsx(Ee, { className: n, size: "base", truncate: !0, children: c })
   ] }) });
 }, Wk = ({
   variant: e = "horizontal",
@@ -15877,8 +15885,8 @@ const Js = [
       ...s
     }
   ) : /* @__PURE__ */ l.jsxs(le, { className: o, gap: "4", children: [
-    /* @__PURE__ */ l.jsxs(Me, { children: [
-      /* @__PURE__ */ l.jsx(Me.Trigger, { children: /* @__PURE__ */ l.jsx(
+    /* @__PURE__ */ l.jsxs(je, { children: [
+      /* @__PURE__ */ l.jsx(je.Trigger, { children: /* @__PURE__ */ l.jsx(
         om,
         {
           className: C(i("system"), a),
@@ -15886,15 +15894,15 @@ const Js = [
           size: 32
         }
       ) }),
-      /* @__PURE__ */ l.jsx(Me.Content, { children: "Use system theme" })
+      /* @__PURE__ */ l.jsx(je.Content, { children: "Use system theme" })
     ] }),
-    /* @__PURE__ */ l.jsxs(Me, { children: [
-      /* @__PURE__ */ l.jsx(Me.Trigger, { children: /* @__PURE__ */ l.jsx(Si, { className: C(i("light"), a), onClick: () => n("light"), size: 32 }) }),
-      /* @__PURE__ */ l.jsx(Me.Content, { children: "Use light theme" })
+    /* @__PURE__ */ l.jsxs(je, { children: [
+      /* @__PURE__ */ l.jsx(je.Trigger, { children: /* @__PURE__ */ l.jsx(Si, { className: C(i("light"), a), onClick: () => n("light"), size: 32 }) }),
+      /* @__PURE__ */ l.jsx(je.Content, { children: "Use light theme" })
     ] }),
-    /* @__PURE__ */ l.jsxs(Me, { children: [
-      /* @__PURE__ */ l.jsx(Me.Trigger, { children: /* @__PURE__ */ l.jsx(Ci, { className: C(i("dark"), a), onClick: () => n("dark"), size: 32 }) }),
-      /* @__PURE__ */ l.jsx(Me.Content, { children: "Use dark theme" })
+    /* @__PURE__ */ l.jsxs(je, { children: [
+      /* @__PURE__ */ l.jsx(je.Trigger, { children: /* @__PURE__ */ l.jsx(Ci, { className: C(i("dark"), a), onClick: () => n("dark"), size: 32 }) }),
+      /* @__PURE__ */ l.jsx(je.Content, { children: "Use dark theme" })
     ] })
   ] });
 }, gu = m.createContext(void 0), Lk = () => {
@@ -16005,90 +16013,98 @@ Lt.Content = zk;
 const qa = ({
   variant: e,
   iconComponent: t,
-  message: n,
-  children: r,
-  iconSize: o = "10xl",
-  iconClassName: a,
-  fullScreen: s = !1,
-  containerClassName: i
+  headline: n,
+  headlineLevel: r = "2",
+  headlineWeight: o = "bold",
+  message: a,
+  messageClassName: s,
+  children: i,
+  iconSize: c = "10xl",
+  iconClassName: d,
+  fullScreen: f = !1,
+  containerClassName: u
 }) => {
-  if (!t && !n && !r)
+  if (!t && !a && !i)
     return /* @__PURE__ */ l.jsx(le, { align: "center", className: "h-full w-full", justify: "center", children: "Content missing" });
-  const c = t || null;
+  const p = t || null;
   return /* @__PURE__ */ l.jsx(
     le,
     {
       align: "center",
-      className: C("w-full", !s && "h-full", s && "h-screen", i),
+      className: C("w-full", !f && "h-full", f && "h-screen", u),
       justify: "center",
       children: /* @__PURE__ */ l.jsxs(le, { direction: "col", justify: "center", children: [
-        c && /* @__PURE__ */ l.jsx(le, { align: "center", className: "my-6", gapX: "4", justify: "center", children: /* @__PURE__ */ l.jsx(
-          c,
+        p && /* @__PURE__ */ l.jsx(le, { align: "center", className: "my-6", gapX: "4", justify: "center", children: /* @__PURE__ */ l.jsx(
+          p,
           {
-            "aria-hidden": !!n,
-            "aria-label": n ? void 0 : `${e || "info"} icon`,
+            "aria-hidden": !!a,
+            "aria-label": a ? void 0 : `${e || "info"} icon`,
             className: C(
               e === "error" && "text-destructive",
               e === "success" && "text-success",
               e === "warning" && "text-warning",
               e === "info" && "text-info",
-              o === "xs" && "size-2",
-              o === "sm" && "size-3",
-              o === "md" && "size-4",
-              o === "lg" && "size-5",
-              o === "xl" && "size-6",
-              o === "2xl" && "size-7",
-              o === "3xl" && "size-8",
-              o === "4xl" && "size-10",
-              o === "5xl" && "size-12",
-              o === "6xl" && "size-14",
-              o === "7xl" && "size-16",
-              o === "8xl" && "size-20",
-              o === "9xl" && "size-28",
-              o === "10xl" && "size-32",
-              a
+              c === "xs" && "size-2",
+              c === "sm" && "size-3",
+              c === "md" && "size-4",
+              c === "lg" && "size-5",
+              c === "xl" && "size-6",
+              c === "2xl" && "size-7",
+              c === "3xl" && "size-8",
+              c === "4xl" && "size-10",
+              c === "5xl" && "size-12",
+              c === "6xl" && "size-14",
+              c === "7xl" && "size-16",
+              c === "8xl" && "size-20",
+              c === "9xl" && "size-28",
+              c === "10xl" && "size-32",
+              d
             ),
             "data-testid": "icon",
-            role: n ? void 0 : "img"
+            role: a ? void 0 : "img"
           }
         ) }),
-        /* @__PURE__ */ l.jsxs(le, { className: "max-w-[500px]", direction: "col", justify: "center", children: [
-          n ? /* @__PURE__ */ l.jsx(Nr, { align: "center", level: "4", weight: "normal", children: n }) : null,
-          r
+        /* @__PURE__ */ l.jsxs(le, { className: "max-w-[500px]", direction: "col", gap: "4", justify: "center", children: [
+          n ? /* @__PURE__ */ l.jsx(Nr, { align: "center", level: r, weight: o, children: n }) : null,
+          a ? /* @__PURE__ */ l.jsx(Ee, { align: "center", className: s, children: a }) : null,
+          i
         ] })
       ] })
     }
   );
-}, Kk = ({ message: e = "Something went wrong.", children: t, ...n }) => /* @__PURE__ */ l.jsx(qa, { iconComponent: Af, message: e, variant: "error", ...n, children: t }), Zk = () => {
+}, Kk = ({ headline: e = "Something went wrong", message: t, children: n, ...r }) => /* @__PURE__ */ l.jsx(qa, { headline: e, iconComponent: Af, message: t, variant: "error", ...r, children: n }), Zk = () => {
   try {
     window.location.reload();
   } catch {
     console.warn("Page reload prevented in test environment");
   }
-}, iS = ({ error: e, onRetry: t = Zk, ...n }) => /* @__PURE__ */ l.jsx(Kk, { ...n, children: /* @__PURE__ */ l.jsxs(le, { align: "center", className: "mt-8", direction: "col", children: [
-  /* @__PURE__ */ l.jsx(Fa, { className: "mb-8 p-4", variant: "muted", width: "full", children: /* @__PURE__ */ l.jsx(Ep, { align: "center", size: "xs", variant: "inherit", children: e.message || "Unknown error occurred" }) }),
+}, iS = ({ error: e, onRetry: t = Zk, ...n }) => /* @__PURE__ */ l.jsx(Kk, { ...n, children: /* @__PURE__ */ l.jsxs(le, { align: "center", direction: "col", gap: "8", children: [
+  /* @__PURE__ */ l.jsx(Fa, { className: "p-4", variant: "muted", width: "full", children: /* @__PURE__ */ l.jsx(Ep, { align: "center", size: "xs", variant: "inherit", children: e.message || "Unknown error occurred" }) }),
   /* @__PURE__ */ l.jsx(ft, { icon: /* @__PURE__ */ l.jsx(mm, {}), onClick: t, variant: "primary", children: "Reload" })
 ] }) }), Xk = (e) => /* @__PURE__ */ l.jsx(Ml, { className: "text-info", "data-testid": "icon", ...e }), lS = ({ iconComponent: e, message: t, iconSize: n = "5xl", iconClassName: r, ...o }) => {
   const a = e || Xk;
   return /* @__PURE__ */ l.jsx(
     qa,
     {
+      headline: t,
+      headlineLevel: "4",
+      headlineWeight: "normal",
       iconClassName: C("text-info", r),
       iconComponent: a,
       iconSize: n,
-      message: t,
       ...o
     }
   );
 }, cS = ({
   onBack: e,
-  message: t = "404: Not found",
-  backIcon: n = Of,
-  backLabel: r = "Back",
-  ...o
+  headline: t = "Page not found",
+  message: n = "The page you are looking for does not exist.",
+  backIcon: r = Of,
+  backLabel: o = "Back",
+  ...a
 }) => {
-  const a = n;
-  return /* @__PURE__ */ l.jsx(qa, { iconComponent: Zf, message: t, variant: "warning", ...o, children: /* @__PURE__ */ l.jsx(le, { align: "center", className: "mt-8", direction: "col", children: e && /* @__PURE__ */ l.jsx(ft, { icon: /* @__PURE__ */ l.jsx(a, {}), onClick: e, variant: "primary", children: r }) }) });
+  const s = r;
+  return /* @__PURE__ */ l.jsx(qa, { headline: t, iconComponent: Zf, message: n, variant: "warning", ...a, children: /* @__PURE__ */ l.jsx(le, { align: "center", className: "mt-8", direction: "col", children: e && /* @__PURE__ */ l.jsx(ft, { icon: /* @__PURE__ */ l.jsx(s, {}), onClick: e, variant: "primary", children: o }) }) });
 };
 function Qk({ ...e }) {
   return /* @__PURE__ */ l.jsx($r, { "data-slot": "sheet", ...e });
@@ -16503,7 +16519,7 @@ function mr({
     /* @__PURE__ */ l.jsx(Sl, { align: "center", hidden: d !== "collapsed" || c, side: "right", ...o })
   ] })) : f;
 }
-const xu = ({ children: e }) => /* @__PURE__ */ l.jsx(De, { size: "base", truncate: !0, children: e }), kC = ({ itemSet: e, activeSlug: t }) => /* @__PURE__ */ l.jsx(l.Fragment, { children: e.links.map((n) => /* @__PURE__ */ l.jsx(fr, { className: "hover:cursor-pointer", onClick: n.onClick, children: /* @__PURE__ */ l.jsx(mr, { asChild: !0, isActive: t === n.slug, children: /* @__PURE__ */ l.jsxs("span", { children: [
+const xu = ({ children: e }) => /* @__PURE__ */ l.jsx(Ee, { size: "base", truncate: !0, children: e }), kC = ({ itemSet: e, activeSlug: t }) => /* @__PURE__ */ l.jsx(l.Fragment, { children: e.links.map((n) => /* @__PURE__ */ l.jsx(fr, { className: "hover:cursor-pointer", onClick: n.onClick, children: /* @__PURE__ */ l.jsx(mr, { asChild: !0, isActive: t === n.slug, children: /* @__PURE__ */ l.jsxs("span", { children: [
   /* @__PURE__ */ l.jsx(n.icon, {}),
   /* @__PURE__ */ l.jsx(xu, { children: n.title }),
   n.external && /* @__PURE__ */ l.jsx(le, { children: /* @__PURE__ */ l.jsx(ym, { size: 12, strokeWidth: 1.5 }) })
@@ -16612,12 +16628,12 @@ export {
   VC as TabsContent,
   zC as TabsList,
   HC as TabsTrigger,
-  De as Text,
+  Ee as Text,
   Ha as TextInput,
   tx as TextList,
   $k as Textarea,
   Wk as ThemeSelector,
   Lt as Timeline,
-  Me as Tooltip,
+  je as Tooltip,
   C as cn
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@still-forest/canopy",
-  "version": "0.45.1",
+  "version": "0.46.0",
   "author": "John Szymanowski",
   "license": "MIT",
   "description": "React components, built with Tailwind CSS, Shadcn, and VisX",