@openpawlabs/diy-guides-ui 1.5.5 → 1.6.1

package/dist/diy-guides-ui.js

@@ -3,7 +3,7 @@ var Jo = (t) => {
 };
 var Qo = (t, e, n) => e.has(t) || Jo("Cannot " + n);
 var ei = (t, e, n) => (Qo(t, e, "read from private field"), n ? n.call(t) : e.get(t)), ti = (t, e, n) => e.has(t) ? Jo("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), pr = (t, e, n, r) => (Qo(t, e, "write to private field"), r ? r.call(t, n) : e.set(t, n), n);
-import { jsx as b, Fragment as lt, jsxs as U } from "react/jsx-runtime";
+import { jsx as b, Fragment as lt, jsxs as z } from "react/jsx-runtime";
 import P, { useContext as _, createContext as q, useState as G, useRef as A, useCallback as Z, useEffect as Y, useMemo as Q, forwardRef as Ee, useReducer as Dl, cloneElement as pt, isValidElement as vt, useLayoutEffect as Nl, Children as Nt, useId as Jc } from "react";
 import Qc, { flushSync as mo, createPortal as eu } from "react-dom";
 const rt = {
@@ -1630,7 +1630,7 @@ const id = (t, e) => {
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   Td.test(t) && !Md.test(t)
-), ts = () => !1, Rd = (t) => Dd.test(t), Kd = (t) => Nd.test(t), Ad = (t) => !z(t) && !H(t), Od = (t) => At(t, os, ts), z = (t) => Ql.test(t), dt = (t) => At(t, is, Ld), xr = (t) => At(t, zd, oe), hi = (t) => At(t, ns, ts), Fd = (t) => At(t, rs, Kd), gn = (t) => At(t, ls, Rd), H = (t) => es.test(t), Vt = (t) => Ot(t, is), _d = (t) => Ot(t, Hd), pi = (t) => Ot(t, ns), Bd = (t) => Ot(t, os), Vd = (t) => Ot(t, rs), yn = (t) => Ot(t, ls, !0), At = (t, e, n) => {
+), ts = () => !1, Rd = (t) => Dd.test(t), Kd = (t) => Nd.test(t), Ad = (t) => !H(t) && !U(t), Od = (t) => At(t, os, ts), H = (t) => Ql.test(t), dt = (t) => At(t, is, Ld), xr = (t) => At(t, zd, oe), hi = (t) => At(t, ns, ts), Fd = (t) => At(t, rs, Kd), gn = (t) => At(t, ls, Rd), U = (t) => es.test(t), Vt = (t) => Ot(t, is), _d = (t) => Ot(t, Hd), pi = (t) => Ot(t, ns), Bd = (t) => Ot(t, os), Vd = (t) => Ot(t, rs), yn = (t) => Ot(t, ls, !0), At = (t, e, n) => {
   const r = Ql.exec(t);
   return r ? r[1] ? e(r[1]) : n(r[2]) : !1;
 }, Ot = (t, e, n = !1) => {
@@ -1655,30 +1655,30 @@ const id = (t, e) => {
     "bottom-left",
     // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
     "left-bottom"
-  ], D = () => [...T(), H, z], K = () => ["auto", "hidden", "clip", "visible", "scroll"], M = () => ["auto", "contain", "none"], I = () => [H, z, a], F = () => [wt, "full", "auto", ...I()], k = () => [Je, "none", "subgrid", H, z], O = () => ["auto", {
-    span: ["full", Je, H, z]
-  }, Je, H, z], W = () => [Je, "auto", H, z], V = () => ["auto", "min", "max", "fr", H, z], p = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], w = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], L = () => ["auto", ...I()], E = () => [wt, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...I()], N = () => [t, H, z], $ = () => [...T(), pi, hi, {
-    position: [H, z]
+  ], D = () => [...T(), U, H], K = () => ["auto", "hidden", "clip", "visible", "scroll"], M = () => ["auto", "contain", "none"], I = () => [U, H, a], F = () => [wt, "full", "auto", ...I()], k = () => [Je, "none", "subgrid", U, H], O = () => ["auto", {
+    span: ["full", Je, U, H]
+  }, Je, U, H], W = () => [Je, "auto", U, H], V = () => ["auto", "min", "max", "fr", U, H], p = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], w = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], L = () => ["auto", ...I()], E = () => [wt, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...I()], N = () => [t, U, H], $ = () => [...T(), pi, hi, {
+    position: [U, H]
   }], S = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
   }], R = () => ["auto", "cover", "contain", Bd, Od, {
-    size: [H, z]
+    size: [U, H]
   }], J = () => [$r, Vt, dt], ee = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
     "full",
     c,
-    H,
-    z
+    U,
+    H
   ], te = () => ["", oe, Vt, dt], ae = () => ["solid", "dashed", "dotted", "double"], pe = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], ie = () => [oe, $r, pi, hi], Se = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
     m,
-    H,
-    z
-  ], ze = () => ["none", oe, H, z], j = () => ["none", oe, H, z], De = () => [oe, H, z], Pe = () => [wt, "full", ...I()];
+    U,
+    H
+  ], ze = () => ["none", oe, U, H], j = () => ["none", oe, U, H], De = () => [oe, U, H], Pe = () => [wt, "full", ...I()];
   return {
     cacheSize: 500,
     theme: {
@@ -1711,7 +1711,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/aspect-ratio
        */
       aspect: [{
-        aspect: ["auto", "square", wt, z, H, y]
+        aspect: ["auto", "square", wt, H, U, y]
       }],
       /**
        * Container
@@ -1724,7 +1724,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/columns
        */
       columns: [{
-        columns: [oe, z, H, s]
+        columns: [oe, H, U, s]
       }],
       /**
        * Break After
@@ -1924,7 +1924,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/z-index
        */
       z: [{
-        z: [Je, "auto", H, z]
+        z: [Je, "auto", U, H]
       }],
       // ------------------------
       // --- Flexbox and Grid ---
@@ -1955,28 +1955,28 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/flex
        */
       flex: [{
-        flex: [oe, wt, "auto", "initial", "none", z]
+        flex: [oe, wt, "auto", "initial", "none", H]
       }],
       /**
        * Flex Grow
        * @see https://tailwindcss.com/docs/flex-grow
        */
       grow: [{
-        grow: ["", oe, H, z]
+        grow: ["", oe, U, H]
       }],
       /**
        * Flex Shrink
        * @see https://tailwindcss.com/docs/flex-shrink
        */
       shrink: [{
-        shrink: ["", oe, H, z]
+        shrink: ["", oe, U, H]
       }],
       /**
        * Order
        * @see https://tailwindcss.com/docs/order
        */
       order: [{
-        order: [Je, "first", "last", "none", H, z]
+        order: [Je, "first", "last", "none", U, H]
       }],
       /**
        * Grid Template Columns
@@ -2388,21 +2388,21 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/font-weight
        */
       "font-weight": [{
-        font: [r, H, xr]
+        font: [r, U, xr]
       }],
       /**
        * Font Stretch
        * @see https://tailwindcss.com/docs/font-stretch
        */
       "font-stretch": [{
-        "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", $r, z]
+        "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", $r, H]
       }],
       /**
        * Font Family
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [_d, z, e]
+        font: [_d, H, e]
       }],
       /**
        * Font Variant Numeric
@@ -2439,14 +2439,14 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/letter-spacing
        */
       tracking: [{
-        tracking: [o, H, z]
+        tracking: [o, U, H]
       }],
       /**
        * Line Clamp
        * @see https://tailwindcss.com/docs/line-clamp
        */
       "line-clamp": [{
-        "line-clamp": [oe, "none", H, xr]
+        "line-clamp": [oe, "none", U, xr]
       }],
       /**
        * Line Height
@@ -2464,7 +2464,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/list-style-image
        */
       "list-image": [{
-        "list-image": ["none", H, z]
+        "list-image": ["none", U, H]
       }],
       /**
        * List Style Position
@@ -2478,7 +2478,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/list-style-type
        */
       "list-style-type": [{
-        list: ["disc", "decimal", "none", H, z]
+        list: ["disc", "decimal", "none", U, H]
       }],
       /**
        * Text Alignment
@@ -2519,7 +2519,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/text-decoration-thickness
        */
       "text-decoration-thickness": [{
-        decoration: [oe, "from-font", "auto", H, dt]
+        decoration: [oe, "from-font", "auto", U, dt]
       }],
       /**
        * Text Decoration Color
@@ -2533,7 +2533,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/text-underline-offset
        */
       "underline-offset": [{
-        "underline-offset": [oe, "auto", H, z]
+        "underline-offset": [oe, "auto", U, H]
       }],
       /**
        * Text Transform
@@ -2564,7 +2564,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/vertical-align
        */
       "vertical-align": [{
-        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", H, z]
+        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", U, H]
       }],
       /**
        * Whitespace
@@ -2599,7 +2599,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/content
        */
       content: [{
-        content: ["none", H, z]
+        content: ["none", U, H]
       }],
       // -------------------
       // --- Backgrounds ---
@@ -2654,9 +2654,9 @@ const id = (t, e) => {
         bg: ["none", {
           linear: [{
             to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
-          }, Je, H, z],
-          radial: ["", H, z],
-          conic: [Je, H, z]
+          }, Je, U, H],
+          radial: ["", U, H],
+          conic: [Je, U, H]
         }, Vd, Fd]
       }],
       /**
@@ -2999,7 +2999,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/outline-offset
        */
       "outline-offset": [{
-        "outline-offset": [oe, H, z]
+        "outline-offset": [oe, U, H]
       }],
       /**
        * Outline Width
@@ -3125,7 +3125,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/opacity
        */
       opacity: [{
-        opacity: [oe, H, z]
+        opacity: [oe, U, H]
       }],
       /**
        * Mix Blend Mode
@@ -3247,7 +3247,7 @@ const id = (t, e) => {
         "mask-y-to": N()
       }],
       "mask-image-radial": [{
-        "mask-radial": [H, z]
+        "mask-radial": [U, H]
       }],
       "mask-image-radial-from-pos": [{
         "mask-radial-from": ie()
@@ -3335,7 +3335,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/mask-image
        */
       "mask-image": [{
-        mask: ["none", H, z]
+        mask: ["none", U, H]
       }],
       // ---------------
       // --- Filters ---
@@ -3349,8 +3349,8 @@ const id = (t, e) => {
           // Deprecated since Tailwind CSS v3.0.0
           "",
           "none",
-          H,
-          z
+          U,
+          H
         ]
       }],
       /**
@@ -3365,14 +3365,14 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/brightness
        */
       brightness: [{
-        brightness: [oe, H, z]
+        brightness: [oe, U, H]
       }],
       /**
        * Contrast
        * @see https://tailwindcss.com/docs/contrast
        */
       contrast: [{
-        contrast: [oe, H, z]
+        contrast: [oe, U, H]
       }],
       /**
        * Drop Shadow
@@ -3400,35 +3400,35 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/grayscale
        */
       grayscale: [{
-        grayscale: ["", oe, H, z]
+        grayscale: ["", oe, U, H]
       }],
       /**
        * Hue Rotate
        * @see https://tailwindcss.com/docs/hue-rotate
        */
       "hue-rotate": [{
-        "hue-rotate": [oe, H, z]
+        "hue-rotate": [oe, U, H]
       }],
       /**
        * Invert
        * @see https://tailwindcss.com/docs/invert
        */
       invert: [{
-        invert: ["", oe, H, z]
+        invert: ["", oe, U, H]
       }],
       /**
        * Saturate
        * @see https://tailwindcss.com/docs/saturate
        */
       saturate: [{
-        saturate: [oe, H, z]
+        saturate: [oe, U, H]
       }],
       /**
        * Sepia
        * @see https://tailwindcss.com/docs/sepia
        */
       sepia: [{
-        sepia: ["", oe, H, z]
+        sepia: ["", oe, U, H]
       }],
       /**
        * Backdrop Filter
@@ -3439,8 +3439,8 @@ const id = (t, e) => {
           // Deprecated since Tailwind CSS v3.0.0
           "",
           "none",
-          H,
-          z
+          U,
+          H
         ]
       }],
       /**
@@ -3455,56 +3455,56 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/backdrop-brightness
        */
       "backdrop-brightness": [{
-        "backdrop-brightness": [oe, H, z]
+        "backdrop-brightness": [oe, U, H]
       }],
       /**
        * Backdrop Contrast
        * @see https://tailwindcss.com/docs/backdrop-contrast
        */
       "backdrop-contrast": [{
-        "backdrop-contrast": [oe, H, z]
+        "backdrop-contrast": [oe, U, H]
       }],
       /**
        * Backdrop Grayscale
        * @see https://tailwindcss.com/docs/backdrop-grayscale
        */
       "backdrop-grayscale": [{
-        "backdrop-grayscale": ["", oe, H, z]
+        "backdrop-grayscale": ["", oe, U, H]
       }],
       /**
        * Backdrop Hue Rotate
        * @see https://tailwindcss.com/docs/backdrop-hue-rotate
        */
       "backdrop-hue-rotate": [{
-        "backdrop-hue-rotate": [oe, H, z]
+        "backdrop-hue-rotate": [oe, U, H]
       }],
       /**
        * Backdrop Invert
        * @see https://tailwindcss.com/docs/backdrop-invert
        */
       "backdrop-invert": [{
-        "backdrop-invert": ["", oe, H, z]
+        "backdrop-invert": ["", oe, U, H]
       }],
       /**
        * Backdrop Opacity
        * @see https://tailwindcss.com/docs/backdrop-opacity
        */
       "backdrop-opacity": [{
-        "backdrop-opacity": [oe, H, z]
+        "backdrop-opacity": [oe, U, H]
       }],
       /**
        * Backdrop Saturate
        * @see https://tailwindcss.com/docs/backdrop-saturate
        */
       "backdrop-saturate": [{
-        "backdrop-saturate": [oe, H, z]
+        "backdrop-saturate": [oe, U, H]
       }],
       /**
        * Backdrop Sepia
        * @see https://tailwindcss.com/docs/backdrop-sepia
        */
       "backdrop-sepia": [{
-        "backdrop-sepia": ["", oe, H, z]
+        "backdrop-sepia": ["", oe, U, H]
       }],
       // --------------
       // --- Tables ---
@@ -3559,7 +3559,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/transition-property
        */
       transition: [{
-        transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", H, z]
+        transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", U, H]
       }],
       /**
        * Transition Behavior
@@ -3573,28 +3573,28 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/transition-duration
        */
       duration: [{
-        duration: [oe, "initial", H, z]
+        duration: [oe, "initial", U, H]
       }],
       /**
        * Transition Timing Function
        * @see https://tailwindcss.com/docs/transition-timing-function
        */
       ease: [{
-        ease: ["linear", "initial", x, H, z]
+        ease: ["linear", "initial", x, U, H]
       }],
       /**
        * Transition Delay
        * @see https://tailwindcss.com/docs/transition-delay
        */
       delay: [{
-        delay: [oe, H, z]
+        delay: [oe, U, H]
       }],
       /**
        * Animation
        * @see https://tailwindcss.com/docs/animation
        */
       animate: [{
-        animate: ["none", v, H, z]
+        animate: ["none", v, U, H]
       }],
       // ------------------
       // --- Transforms ---
@@ -3611,7 +3611,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/perspective
        */
       perspective: [{
-        perspective: [g, H, z]
+        perspective: [g, U, H]
       }],
       /**
        * Perspective Origin
@@ -3707,7 +3707,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/transform
        */
       transform: [{
-        transform: [H, z, "", "none", "gpu", "cpu"]
+        transform: [U, H, "", "none", "gpu", "cpu"]
       }],
       /**
        * Transform Origin
@@ -3792,7 +3792,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/cursor
        */
       cursor: [{
-        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", H, z]
+        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", U, H]
       }],
       /**
        * Field Sizing
@@ -4014,7 +4014,7 @@ const id = (t, e) => {
        * @see https://tailwindcss.com/docs/will-change
        */
       "will-change": [{
-        "will-change": ["auto", "scroll", "contents", "transform", H, z]
+        "will-change": ["auto", "scroll", "contents", "transform", U, H]
       }],
       // -----------
       // --- SVG ---
@@ -12500,7 +12500,7 @@ const om = (t) => /* @__PURE__ */ b(Zb, {
       c.stopPropagation(), r == null || r(c);
     },
     ...i,
-    children: (c) => /* @__PURE__ */ U(Ne, {
+    children: (c) => /* @__PURE__ */ z(Ne, {
       value: a,
       children: [typeof t == "function" ? t(c) : t, " "]
     })
@@ -12662,7 +12662,7 @@ const om = (t) => /* @__PURE__ */ b(Zb, {
   difficult: "Difficult"
 };
 function xm() {
-  return /* @__PURE__ */ U(
+  return /* @__PURE__ */ z(
     "svg",
     {
       "aria-hidden": "true",
@@ -12689,7 +12689,7 @@ function wm({
   className: o
 }) {
   const i = rt[vm[t]];
-  return /* @__PURE__ */ U(
+  return /* @__PURE__ */ z(
     Xn,
     {
       variant: "soft",
@@ -12706,10 +12706,10 @@ function wm({
     }
   );
 }
-const $l = /* @__PURE__ */ b("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0ZM12 9v4M12 17h.01" }), xl = /* @__PURE__ */ U(lt, { children: [
+const $l = /* @__PURE__ */ b("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0ZM12 9v4M12 17h.01" }), xl = /* @__PURE__ */ z(lt, { children: [
   /* @__PURE__ */ b("circle", { cx: "12", cy: "12", r: "9" }),
   /* @__PURE__ */ b("path", { d: "M12 16v-4M12 8h.01" })
-] }), Em = /* @__PURE__ */ U(lt, { children: [
+] }), Em = /* @__PURE__ */ z(lt, { children: [
   /* @__PURE__ */ b("circle", { cx: "12", cy: "12", r: "9" }),
   /* @__PURE__ */ b("path", { d: "m8.5 12 2.5 2.5 4.5-5" })
 ] }), Sm = {
@@ -12735,7 +12735,7 @@ function Pm({ type: t }) {
     }
   );
 }
-function Rg({
+function Ag({
   type: t = "caution",
   title: e,
   icon: n,
@@ -12743,7 +12743,7 @@ function Rg({
   className: o
 }) {
   const i = e === void 0 ? Kr[t] : e, l = nu(t);
-  return /* @__PURE__ */ U(
+  return /* @__PURE__ */ z(
     Ht,
     {
       className: ne("border", o),
@@ -12753,7 +12753,7 @@ function Rg({
       },
       children: [
         /* @__PURE__ */ b(Ht.Indicator, { style: { color: l }, children: n ?? /* @__PURE__ */ b(Pm, { type: t }) }),
-        /* @__PURE__ */ U(Ht.Content, { children: [
+        /* @__PURE__ */ z(Ht.Content, { children: [
           i != null && /* @__PURE__ */ b(Ht.Title, { children: i }),
           /* @__PURE__ */ b(Ht.Description, { children: r })
         ] })
@@ -13029,10 +13029,10 @@ function Vo({
   };
   return Y(() => {
     f(null);
-  }, [e]), n === "model" ? /* @__PURE__ */ U("div", { ref: c, className: ne("@container relative overflow-hidden", t), children: [
+  }, [e]), n === "model" ? /* @__PURE__ */ z("div", { ref: c, className: ne("@container relative overflow-hidden", t), children: [
     /* @__PURE__ */ b(Km, { src: e, modelFileName: o }),
     s
-  ] }) : /* @__PURE__ */ U("div", { ref: c, className: ne("@container relative overflow-hidden", t), children: [
+  ] }) : /* @__PURE__ */ z("div", { ref: c, className: ne("@container relative overflow-hidden", t), children: [
     n === "video" ? /* @__PURE__ */ b(
       "video",
       {
@@ -13198,7 +13198,7 @@ function Hm({
   }, F = (k, O, W) => {
     const V = W && O === o, p = rt[k.color ?? "GREY"], w = W ? "pointer-events-auto cursor-move" : "pointer-events-none", L = W ? (E) => D(E, O, k) : void 0;
     if (Bc(k))
-      return /* @__PURE__ */ U("div", { children: [
+      return /* @__PURE__ */ z("div", { children: [
         /* @__PURE__ */ b(
           "div",
           {
@@ -13239,7 +13239,7 @@ function Hm({
         { corner: "sw", x: E, y: N + S, cursor: "nesw-resize" },
         { corner: "se", x: E + $, y: N + S, cursor: "nwse-resize" }
       ];
-      return /* @__PURE__ */ U("div", { children: [
+      return /* @__PURE__ */ z("div", { children: [
         /* @__PURE__ */ b(
           "div",
           {
@@ -13296,7 +13296,7 @@ function Hm({
       O
     );
   };
-  return /* @__PURE__ */ U(
+  return /* @__PURE__ */ z(
     "div",
     {
       ref: c,
@@ -13332,7 +13332,7 @@ function zo({
   layoutSettleKey: s,
   className: a
 }) {
-  const c = "@container relative aspect-[4/3] overflow-hidden rounded-lg border border-default bg-default-soft", u = /* @__PURE__ */ U(lt, { children: [
+  const c = "@container relative aspect-[4/3] overflow-hidden rounded-lg border border-default bg-default-soft", u = /* @__PURE__ */ z(lt, { children: [
     /* @__PURE__ */ b(
       Om,
       {
@@ -13351,7 +13351,7 @@ function zo({
       }
     ) : /* @__PURE__ */ b(fo, { annotations: r })
   ] });
-  return /* @__PURE__ */ b("figure", { className: ne("flex flex-col gap-2", a), children: i && e === "image" && !l ? /* @__PURE__ */ U(St, { children: [
+  return /* @__PURE__ */ b("figure", { className: ne("flex flex-col gap-2", a), children: i && e === "image" && !l ? /* @__PURE__ */ z(St, { children: [
     /* @__PURE__ */ b(
       St.Trigger,
       {
@@ -13360,7 +13360,7 @@ function zo({
         children: u
       }
     ),
-    /* @__PURE__ */ b(St.Backdrop, { variant: "blur", children: /* @__PURE__ */ b(St.Container, { placement: "center", children: /* @__PURE__ */ U(
+    /* @__PURE__ */ b(St.Backdrop, { variant: "blur", children: /* @__PURE__ */ b(St.Container, { placement: "center", children: /* @__PURE__ */ z(
       St.Dialog,
       {
         "aria-label": "Full size image",
@@ -13446,7 +13446,7 @@ function Xm(t, e, n, r, o) {
     o
   );
 }
-function Kg({
+function Og({
   src: t,
   region: e,
   onChange: n,
@@ -13491,7 +13491,7 @@ function Kg({
     width: h.width / i.width * 100,
     height: Kt(h.width) / i.height * 100
   } : null;
-  return /* @__PURE__ */ U(
+  return /* @__PURE__ */ z(
     "div",
     {
       ref: o,
@@ -13560,7 +13560,7 @@ function Zm({
   children: i,
   className: l
 }) {
-  return /* @__PURE__ */ U(
+  return /* @__PURE__ */ z(
     "li",
     {
       className: ne(
@@ -13576,11 +13576,11 @@ function Zm({
             className: "size-12 shrink-0 rounded-md border border-default object-cover"
           }
         ),
-        /* @__PURE__ */ U("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ z("div", { className: "flex min-w-0 flex-1 flex-col", children: [
           n ? /* @__PURE__ */ b(_o, { href: n, className: "font-medium", children: t }) : /* @__PURE__ */ b("span", { className: "font-medium", children: t }),
           i != null && /* @__PURE__ */ b("span", { className: "text-sm text-default-500", children: i })
         ] }),
-        r != null && /* @__PURE__ */ U("span", { className: "shrink-0 text-sm text-default-500", children: [
+        r != null && /* @__PURE__ */ z("span", { className: "shrink-0 text-sm text-default-500", children: [
           "×",
           r
         ] }),
@@ -13594,12 +13594,12 @@ function Jm({
   children: e,
   className: n
 }) {
-  return /* @__PURE__ */ U(Xt, { className: ne("w-full", n), children: [
+  return /* @__PURE__ */ z(Xt, { className: ne("w-full", n), children: [
     t != null && /* @__PURE__ */ b(Xt.Header, { children: /* @__PURE__ */ b(Xt.Title, { children: t }) }),
     /* @__PURE__ */ b(Xt.Content, { children: /* @__PURE__ */ b("ul", { className: "flex flex-col divide-y divide-default", children: e }) })
   ] });
 }
-const Ag = Object.assign(Jm, { Item: Zm });
+const Fg = Object.assign(Jm, { Item: Zm });
 function Hc(t) {
   return null;
 }
@@ -13671,7 +13671,7 @@ function tg() {
   );
 }
 function ng() {
-  return /* @__PURE__ */ U(
+  return /* @__PURE__ */ z(
     "svg",
     {
       "aria-hidden": "true",
@@ -13689,15 +13689,30 @@ function ng() {
     }
   );
 }
+function rg(t) {
+  var r;
+  if (!t || t === "#" || t.startsWith("blob:"))
+    return;
+  const n = (((r = t.replaceAll("\\", "/").split("?")[0]) == null ? void 0 : r.split("#")[0]) ?? "").split("/").pop();
+  if (!(!n || n === "." || n === ".."))
+    try {
+      return decodeURIComponent(n);
+    } catch {
+      return n;
+    }
+}
+function og(t, e) {
+  return e === void 0 || e === !1 ? e : typeof e == "string" ? e || void 0 : rg(t) ?? !0;
+}
 function po(t) {
   const { href: e, download: n, external: r } = t.props;
   return {
     href: e,
-    download: n,
+    download: og(e, n),
     ...r ? { target: "_blank", rel: "noreferrer noopener" } : {}
   };
 }
-function rg(t, e, n, r) {
+function ig(t, e, n, r) {
   return ne(
     nt({ variant: t, size: e, fullWidth: !0 }),
     "!min-h-0 !justify-center !rounded-none",
@@ -13715,7 +13730,7 @@ function bo() {
     }
   );
 }
-function og({
+function lg({
   variant: t = "primary",
   size: e = "md",
   icon: n,
@@ -13727,7 +13742,7 @@ function og({
   const s = Nt.toArray(i).filter(Qm);
   if (o)
     return /* @__PURE__ */ b(
-      lg,
+      ag,
       {
         items: s,
         variant: t,
@@ -13742,14 +13757,14 @@ function og({
     return null;
   const [a, ...c] = s;
   if (c.length === 0) {
-    const u = nt({ variant: "secondary", size: e });
-    return /* @__PURE__ */ U(_o, { ...po(a), className: ne(u, l), children: [
+    const u = nt({ variant: "primary", size: e });
+    return /* @__PURE__ */ z(_o, { ...po(a), className: ne(u, l), children: [
       n,
       a.props.children
     ] });
   }
   return /* @__PURE__ */ b(
-    ig,
+    sg,
     {
       items: s,
       variant: t,
@@ -13760,7 +13775,7 @@ function og({
     }
   );
 }
-function ig({
+function sg({
   items: t,
   variant: e,
   size: n,
@@ -13777,7 +13792,7 @@ function ig({
     h();
     const f = new ResizeObserver(h);
     return f.observe(d), () => f.disconnect();
-  }, [t, e, n]), /* @__PURE__ */ U(
+  }, [t, e, n]), /* @__PURE__ */ z(
     "div",
     {
       ref: l,
@@ -13786,12 +13801,12 @@ function ig({
         i
       ),
       children: [
-        /* @__PURE__ */ U(_o, { ...po(c), className: u, children: [
+        /* @__PURE__ */ z(_o, { ...po(c), className: u, children: [
           r,
           c.props.children
         ] }),
-        /* @__PURE__ */ U(Ut, { children: [
-          /* @__PURE__ */ U(
+        /* @__PURE__ */ z(Ut, { children: [
+          /* @__PURE__ */ z(
             Ut.Trigger,
             {
               "aria-label": o,
@@ -13813,11 +13828,11 @@ function ig({
               triggerRef: l,
               className: "!max-w-none !p-0",
               style: s ? { minWidth: s } : void 0,
-              children: /* @__PURE__ */ b(Ut.Menu, { className: "!gap-0 !p-0", children: t.map((d, h) => /* @__PURE__ */ U(
+              children: /* @__PURE__ */ b(Ut.Menu, { className: "!gap-0 !p-0", children: t.map((d, h) => /* @__PURE__ */ z(
                 Ut.Item,
                 {
                   ...po(d),
-                  className: rg(
+                  className: ig(
                     "secondary",
                     n,
                     h === t.length - 1,
@@ -13837,7 +13852,7 @@ function ig({
     }
   );
 }
-function lg({
+function ag({
   items: t,
   variant: e,
   size: n,
@@ -13851,13 +13866,13 @@ function lg({
   }, K = (M) => {
     c != null && c !== M && (g == null || g(c, M)), D();
   };
-  return /* @__PURE__ */ U("div", { className: ne("relative inline-flex flex-col items-start", l), children: [
-    /* @__PURE__ */ U("div", { className: Co({ orientation: "horizontal" }).base(), children: [
-      /* @__PURE__ */ U("span", { className: ne(C, "cursor-text"), children: [
+  return /* @__PURE__ */ z("div", { className: ne("relative inline-flex flex-col items-start", l), children: [
+    /* @__PURE__ */ z("div", { className: Co({ orientation: "horizontal" }).base(), children: [
+      /* @__PURE__ */ z("span", { className: ne(C, "cursor-text"), children: [
         r,
         x ? x.props.children : /* @__PURE__ */ b("span", { className: "opacity-60", children: "Add a link" })
       ] }),
-      x && y && /* @__PURE__ */ U(
+      x && y && /* @__PURE__ */ z(
         "button",
         {
           type: "button",
@@ -13870,7 +13885,7 @@ function lg({
           ]
         }
       ),
-      /* @__PURE__ */ U(
+      /* @__PURE__ */ z(
         "button",
         {
           type: "button",
@@ -13885,7 +13900,7 @@ function lg({
         }
       )
     ] }),
-    s && /* @__PURE__ */ U(lt, { children: [
+    s && /* @__PURE__ */ z(lt, { children: [
       /* @__PURE__ */ b(
         "div",
         {
@@ -13894,10 +13909,10 @@ function lg({
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ U("div", { className: "absolute left-0 top-full z-50 mt-2 w-64 rounded-lg border border-default-200 bg-background p-2 shadow-lg", children: [
+      /* @__PURE__ */ z("div", { className: "absolute left-0 top-full z-50 mt-2 w-64 rounded-lg border border-default-200 bg-background p-2 shadow-lg", children: [
         v.length > 0 ? /* @__PURE__ */ b("ul", { className: "flex flex-col gap-0.5", children: v.map((M, I) => {
           const F = I + 1;
-          return /* @__PURE__ */ U(
+          return /* @__PURE__ */ z(
             "li",
             {
               draggable: T || void 0,
@@ -13966,8 +13981,8 @@ function lg({
     ] })
   ] });
 }
-const Og = Object.assign(og, { Item: Hc });
-function sg(t, e, n) {
+const _g = Object.assign(lg, { Item: Hc });
+function cg(t, e, n) {
   const [r, o] = G(e), i = t !== void 0, l = i ? t : r, s = Z(
     (a) => {
       i || o(a), n == null || n(a);
@@ -13976,12 +13991,12 @@ function sg(t, e, n) {
   );
   return [l, s];
 }
-const Wc = 3, ag = "#3ABF84", cg = "#34B07A", ug = "#0B7A47", dg = {
+const Wc = 3, ug = "#3ABF84", dg = "#34B07A", fg = "#0B7A47", hg = {
   caution: Kr.caution,
   reminder: "Reminder",
   note: Kr.note
 };
-function fg() {
+function pg() {
   return /* @__PURE__ */ b(
     "svg",
     {
@@ -13997,8 +14012,8 @@ function fg() {
     }
   );
 }
-function hg() {
-  return /* @__PURE__ */ U(
+function bg() {
+  return /* @__PURE__ */ z(
     "svg",
     {
       "aria-hidden": "true",
@@ -14016,7 +14031,7 @@ function hg() {
     }
   );
 }
-function pg() {
+function mg() {
   return /* @__PURE__ */ b(
     "span",
     {
@@ -14034,7 +14049,7 @@ function pg() {
     }
   );
 }
-function bg() {
+function gg() {
   return /* @__PURE__ */ b(
     "svg",
     {
@@ -14066,7 +14081,7 @@ function Gc() {
     }
   );
 }
-function mg() {
+function yg() {
   return /* @__PURE__ */ b(
     "svg",
     {
@@ -14082,7 +14097,7 @@ function mg() {
     }
   );
 }
-function gg() {
+function vg() {
   return /* @__PURE__ */ b(
     "svg",
     {
@@ -14098,8 +14113,8 @@ function gg() {
     }
   );
 }
-function yg() {
-  return /* @__PURE__ */ U(
+function $g() {
+  return /* @__PURE__ */ z(
     "svg",
     {
       "aria-hidden": "true",
@@ -14117,7 +14132,7 @@ function yg() {
     }
   );
 }
-function vg(t) {
+function xg(t) {
   return vt(t) ? t.type === zo ? !0 : typeof t.type == "function" && t.type[zc] === !0 : !1;
 }
 function Ml(t, e) {
@@ -14135,15 +14150,15 @@ function Ml(t, e) {
 function jc(t) {
   return vt(t) && t.type === Xc;
 }
-function $g(t) {
+function wg(t) {
   return vt(t) ? Nt.toArray(t.props.children).filter(jc).length : 0;
 }
-function xg(t, e = !1) {
+function Eg(t, e = !1) {
   let n = null, r = null;
   for (const i of Nt.toArray(t))
     vt(i) && (i.type === qc && (n = i.props.children), i.type === Yc && (r = i));
-  const o = Nt.toArray(n).filter(vg);
-  return $g(r), {
+  const o = Nt.toArray(n).filter(xg);
+  return wg(r), {
     figures: o.slice(0, Wc),
     bullets: r
   };
@@ -14164,7 +14179,7 @@ function Yc({
   }, m = (g) => {
     r != null && r !== g && (c == null || c(r, g)), f();
   };
-  return /* @__PURE__ */ U("ul", { className: ne("flex flex-col gap-2", e), children: [
+  return /* @__PURE__ */ z("ul", { className: ne("flex flex-col gap-2", e), children: [
     u.map(
       (g, y) => pt(g, {
         key: g.key ?? y,
@@ -14232,7 +14247,7 @@ function Xc(t) {
       }
     ) : null, f = /* @__PURE__ */ b("div", { className: "min-w-0 flex-1", children: s });
   else {
-    const C = r ?? dg[e], T = e === "caution" ? /* @__PURE__ */ b(fg, {}) : e === "reminder" ? /* @__PURE__ */ b(pg, {}) : /* @__PURE__ */ b(hg, {});
+    const C = r ?? hg[e], T = e === "caution" ? /* @__PURE__ */ b(pg, {}) : e === "reminder" ? /* @__PURE__ */ b(mg, {}) : /* @__PURE__ */ b(bg, {});
     h = i ? /* @__PURE__ */ b(
       "button",
       {
@@ -14242,9 +14257,9 @@ function Xc(t) {
         className: "shrink-0 cursor-pointer rounded outline-none transition hover:opacity-70 focus-visible:ring-2 focus-visible:ring-accent",
         children: T
       }
-    ) : T, f = /* @__PURE__ */ U("span", { className: "flex-1", children: [
-      !o && /* @__PURE__ */ U(lt, { children: [
-        /* @__PURE__ */ U("span", { className: "font-semibold", children: [
+    ) : T, f = /* @__PURE__ */ z("span", { className: "flex-1", children: [
+      !o && /* @__PURE__ */ z(lt, { children: [
+        /* @__PURE__ */ z("span", { className: "font-semibold", children: [
           C,
           ":"
         ] }),
@@ -14260,12 +14275,12 @@ function Xc(t) {
     a
   );
   if (!c)
-    return /* @__PURE__ */ U("li", { className: m, children: [
+    return /* @__PURE__ */ z("li", { className: m, children: [
       h,
       f
     ] });
   const { canReorder: g, isDragging: y, isOver: x, onRemove: v } = c;
-  return /* @__PURE__ */ U(
+  return /* @__PURE__ */ z(
     "li",
     {
       className: ne(
@@ -14295,7 +14310,7 @@ function Xc(t) {
             onPointerDown: () => d(!0),
             onPointerUp: () => d(!1),
             className: "mt-1 shrink-0 cursor-grab text-default-400 transition hover:text-default-500",
-            children: /* @__PURE__ */ b(yg, {})
+            children: /* @__PURE__ */ b($g, {})
           }
         ),
         h,
@@ -14314,7 +14329,7 @@ function Xc(t) {
     }
   );
 }
-function wg() {
+function Sg() {
   return /* @__PURE__ */ b(
     "svg",
     {
@@ -14330,7 +14345,7 @@ function wg() {
     }
   );
 }
-function Eg({
+function Pg({
   figures: t,
   bullets: e,
   mediaEditing: n
@@ -14344,14 +14359,14 @@ function Eg({
     var K;
     l != null && l !== D && ((K = n == null ? void 0 : n.onReorderImage) == null || K.call(n, l, D)), y();
   }, v = r && ((n == null ? void 0 : n.canAddImage) ?? !0) && t.length >= 1 && t.length < Wc, C = r ? t.length >= 1 : t.length > 1, T = "aspect-[4/3] w-28 sm:w-26 lg:w-30";
-  return /* @__PURE__ */ U("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
-    /* @__PURE__ */ b("div", { className: "min-w-0", children: d ? r ? /* @__PURE__ */ U("div", { className: "group relative", children: [
+  return /* @__PURE__ */ z("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
+    /* @__PURE__ */ b("div", { className: "min-w-0", children: d ? r ? /* @__PURE__ */ z("div", { className: "group relative", children: [
       pt(d, {
         className: ne("w-full", d.props.className),
         zoomable: !1
       }),
-      /* @__PURE__ */ U("div", { className: "absolute inset-0 flex items-center justify-center gap-2 rounded-lg opacity-0 transition group-hover:bg-foreground/40 group-hover:opacity-100 focus-within:bg-foreground/40 focus-within:opacity-100", children: [
-        f && /* @__PURE__ */ U(
+      /* @__PURE__ */ z("div", { className: "absolute inset-0 flex items-center justify-center gap-2 rounded-lg opacity-0 transition group-hover:bg-foreground/40 group-hover:opacity-100 focus-within:bg-foreground/40 focus-within:opacity-100", children: [
+        f && /* @__PURE__ */ z(
           "button",
           {
             type: "button",
@@ -14361,12 +14376,12 @@ function Eg({
             },
             className: "flex items-center gap-1.5 rounded-md bg-background/90 px-2.5 py-1.5 text-sm font-semibold text-foreground shadow transition hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
             children: [
-              /* @__PURE__ */ b(mg, {}),
+              /* @__PURE__ */ b(yg, {}),
               "Edit annotations"
             ]
           }
         ),
-        f && (n == null ? void 0 : n.onEditCrop) && /* @__PURE__ */ U(
+        f && (n == null ? void 0 : n.onEditCrop) && /* @__PURE__ */ z(
           "button",
           {
             type: "button",
@@ -14376,7 +14391,7 @@ function Eg({
             },
             className: "flex items-center gap-1.5 rounded-md bg-background/90 px-2.5 py-1.5 text-sm font-semibold text-foreground shadow transition hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
             children: [
-              /* @__PURE__ */ b(gg, {}),
+              /* @__PURE__ */ b(vg, {}),
               "Adjust crop"
             ]
           }
@@ -14384,7 +14399,7 @@ function Eg({
       ] })
     ] }) : pt(d, {
       className: ne("w-full", d.props.className)
-    }) : r && /* @__PURE__ */ U(
+    }) : r && /* @__PURE__ */ z(
       "button",
       {
         type: "button",
@@ -14394,13 +14409,13 @@ function Eg({
         },
         className: "flex aspect-[4/3] w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-default bg-default-soft text-default-500 transition hover:border-accent hover:text-accent focus-visible:border-accent focus-visible:text-accent focus-visible:outline-none",
         children: [
-          /* @__PURE__ */ b(bg, {}),
+          /* @__PURE__ */ b(gg, {}),
           /* @__PURE__ */ b("span", { className: "text-sm font-medium", children: "Add image" })
         ]
       }
     ) }),
-    /* @__PURE__ */ U("div", { className: "flex min-w-0 flex-col gap-4", children: [
-      (C || v) && /* @__PURE__ */ U(
+    /* @__PURE__ */ z("div", { className: "flex min-w-0 flex-col gap-4", children: [
+      (C || v) && /* @__PURE__ */ z(
         "div",
         {
           className: "flex flex-wrap gap-2",
@@ -14408,7 +14423,7 @@ function Eg({
           "aria-label": "Step images",
           children: [
             t.map(
-              (D, K) => r ? /* @__PURE__ */ U(
+              (D, K) => r ? /* @__PURE__ */ z(
                 "div",
                 {
                   className: ne(
@@ -14509,7 +14524,7 @@ function Eg({
     ] })
   ] });
 }
-function Sg({
+function Cg({
   number: t,
   title: e,
   isCompleted: n,
@@ -14520,12 +14535,12 @@ function Sg({
   children: s,
   className: a
 }) {
-  const [c, u] = sg(
+  const [c, u] = cg(
     n,
     r,
     o
-  ), d = Jc(), { figures: h, bullets: f } = xg(s, l != null);
-  return /* @__PURE__ */ U(
+  ), d = Jc(), { figures: h, bullets: f } = Eg(s, l != null);
+  return /* @__PURE__ */ z(
     "section",
     {
       "aria-labelledby": e != null ? d : void 0,
@@ -14536,8 +14551,8 @@ function Sg({
         a
       ),
       children: [
-        /* @__PURE__ */ U("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center", children: [
-          /* @__PURE__ */ U("div", { className: "flex min-w-0 items-center gap-3 sm:flex-1", children: [
+        /* @__PURE__ */ z("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center", children: [
+          /* @__PURE__ */ z("div", { className: "flex min-w-0 items-center gap-3 sm:flex-1", children: [
             t != null && /* @__PURE__ */ b(
               "span",
               {
@@ -14545,7 +14560,7 @@ function Sg({
                   "flex size-8 shrink-0 items-center justify-center rounded-md text-sm font-bold tabular-nums",
                   c ? "bg-success text-success-foreground" : "bg-foreground text-background"
                 ),
-                children: c ? /* @__PURE__ */ b(wg, {}) : t
+                children: c ? /* @__PURE__ */ b(Sg, {}) : t
               }
             ),
             e != null && /* @__PURE__ */ b(
@@ -14569,9 +14584,9 @@ function Sg({
                 c && "guide-step-complete-button"
               ),
               style: c ? {
-                "--guide-step-complete-bg": ag,
-                "--guide-step-complete-bg-hover": cg,
-                "--guide-step-complete-checkbox": ug
+                "--guide-step-complete-bg": ug,
+                "--guide-step-complete-bg-hover": dg,
+                "--guide-step-complete-checkbox": fg
               } : void 0,
               children: /* @__PURE__ */ b(
                 Tn,
@@ -14580,7 +14595,7 @@ function Sg({
                   isReadOnly: !0,
                   "aria-hidden": !0,
                   className: "pointer-events-none gap-2 text-inherit",
-                  children: /* @__PURE__ */ U(Tn.Content, { className: "flex items-center gap-2 whitespace-nowrap", children: [
+                  children: /* @__PURE__ */ z(Tn.Content, { className: "flex items-center gap-2 whitespace-nowrap", children: [
                     /* @__PURE__ */ b(Tn.Control, { children: /* @__PURE__ */ b(Tn.Indicator, {}) }),
                     "Mark complete"
                   ] })
@@ -14590,7 +14605,7 @@ function Sg({
           )
         ] }),
         /* @__PURE__ */ b(
-          Eg,
+          Pg,
           {
             figures: h,
             bullets: f,
@@ -14601,21 +14616,21 @@ function Sg({
     }
   );
 }
-const Fg = Object.assign(Sg, {
+const Bg = Object.assign(Cg, {
   Media: qc,
   Bullets: Yc,
   Bullet: Xc
 });
-function Pg(t) {
+function kg(t) {
   return vt(t);
 }
-function _g({
+function Vg({
   children: t,
   showProgress: e = !0,
   onProgressChange: n,
   className: r
 }) {
-  const o = Nt.toArray(t).filter(Pg), i = o.length, [l, s] = G(
+  const o = Nt.toArray(t).filter(kg), i = o.length, [l, s] = G(
     () => Object.fromEntries(
       o.map((c, u) => [
         c.props.number ?? u + 1,
@@ -14625,8 +14640,8 @@ function _g({
   ), a = Object.values(l).filter(Boolean).length;
   return Y(() => {
     n == null || n({ completed: a, total: i });
-  }, [a, i, n]), /* @__PURE__ */ U("div", { className: ne("flex flex-col gap-8", r), children: [
-    e && i > 0 && /* @__PURE__ */ b("div", { className: "sticky top-2 mx-2 z-10", children: /* @__PURE__ */ b(Xt, { className: "w-full px-6 py-4", children: /* @__PURE__ */ U(
+  }, [a, i, n]), /* @__PURE__ */ z("div", { className: ne("flex flex-col gap-8", r), children: [
+    e && i > 0 && /* @__PURE__ */ b("div", { className: "sticky top-2 mx-2 z-10", children: /* @__PURE__ */ b(Xt, { className: "w-full px-6 py-4", children: /* @__PURE__ */ z(
       Mn,
       {
         value: a,
@@ -14634,9 +14649,9 @@ function _g({
         "aria-label": "Guide progress",
         className: "flex flex-col gap-1.5",
         children: [
-          /* @__PURE__ */ U("div", { className: "flex items-center justify-between text-sm text-default-500", children: [
+          /* @__PURE__ */ z("div", { className: "flex items-center justify-between text-sm text-default-500", children: [
             /* @__PURE__ */ b("span", { children: "Guide Progress" }),
-            /* @__PURE__ */ U(Mn.Output, { children: [
+            /* @__PURE__ */ z(Mn.Output, { children: [
               a,
               " / ",
               i,
@@ -14649,7 +14664,7 @@ function _g({
     ) }) }),
     /* @__PURE__ */ b("ol", { className: "flex flex-col", children: o.map((c, u) => {
       const d = c.props.number ?? u + 1;
-      return /* @__PURE__ */ U("li", { children: [
+      return /* @__PURE__ */ z("li", { children: [
         pt(c, {
           number: d,
           isCompleted: l[d] ?? !1,
@@ -14663,50 +14678,63 @@ function _g({
     }) })
   ] });
 }
-function Cg({
+function Tg({
   title: t,
-  difficulty: e,
-  timeEstimate: n,
-  meta: r,
-  className: o
+  heroImage: e,
+  heroImageAlt: n,
+  difficulty: r,
+  timeEstimate: o,
+  meta: i,
+  className: l
 }) {
-  const i = e != null || n != null;
-  return /* @__PURE__ */ U(
+  const s = r != null || o != null, a = e != null;
+  return /* @__PURE__ */ z(
     "header",
     {
       className: ne(
         "flex flex-col gap-4 border-b border-default pb-6 md:[grid-area:header]",
-        o
+        a && "sm:flex-row sm:items-center sm:gap-6",
+        l
       ),
       children: [
-        /* @__PURE__ */ U("div", { className: "flex flex-col gap-1.5", children: [
-          /* @__PURE__ */ b("h1", { className: "text-3xl font-bold tracking-tight", children: t }),
-          r != null && /* @__PURE__ */ b("div", { className: "text-sm text-default-500", children: r })
-        ] }),
-        i && /* @__PURE__ */ U("div", { className: "flex flex-wrap items-center gap-2", children: [
-          e != null && /* @__PURE__ */ b(wm, { difficulty: e }),
-          n != null && /* @__PURE__ */ b(Xn, { variant: "soft", color: "default", children: /* @__PURE__ */ b(Xn.Label, { children: n }) })
+        a && /* @__PURE__ */ b("div", { className: "aspect-[4/3] h-32 shrink-0 overflow-hidden rounded-lg border border-default bg-default-100", children: /* @__PURE__ */ b(
+          "img",
+          {
+            src: e,
+            alt: n ?? "",
+            className: "size-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ z("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
+          /* @__PURE__ */ z("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ b("h1", { className: "text-3xl font-bold tracking-tight", children: t }),
+            i != null && /* @__PURE__ */ b("div", { className: "text-sm text-default-500", children: i })
+          ] }),
+          s && /* @__PURE__ */ z("div", { className: "flex flex-wrap items-center gap-2", children: [
+            r != null && /* @__PURE__ */ b(wm, { difficulty: r }),
+            o != null && /* @__PURE__ */ b(Xn, { variant: "soft", color: "default", children: /* @__PURE__ */ b(Xn.Label, { children: o }) })
+          ] })
         ] })
       ]
     }
   );
 }
-function kg({ children: t, className: e }) {
+function Mg({ children: t, className: e }) {
   return /* @__PURE__ */ b("div", { className: ne("min-w-0 md:[grid-area:intro]", e), children: /* @__PURE__ */ b("div", { className: "max-w-prose text-default-700", children: t }) });
 }
-function Tg({
+function Dg({
   children: t,
   className: e
 }) {
   return /* @__PURE__ */ b("aside", { className: ne("min-w-0 md:[grid-area:sidebar]", e), children: /* @__PURE__ */ b("div", { className: "flex flex-col gap-4", children: t }) });
 }
-function Mg({
+function Ng({
   children: t,
   className: e
 }) {
   return /* @__PURE__ */ b("main", { className: ne("min-w-0 w-full md:[grid-area:main]", e), children: t });
 }
-const Bg = Object.assign(
+const zg = Object.assign(
   function({ children: e, className: n }) {
     return /* @__PURE__ */ b(
       "div",
@@ -14720,26 +14748,26 @@ const Bg = Object.assign(
     );
   },
   {
-    Header: Cg,
-    Intro: kg,
-    Sidebar: Tg,
-    Content: Mg
+    Header: Tg,
+    Intro: Mg,
+    Sidebar: Dg,
+    Content: Ng
   }
 );
 export {
   rt as COLORS,
-  Rg as Callout,
+  Ag as Callout,
   ho as DISPLAY_REGION_ASPECT,
   wm as DifficultyBadge,
-  Bg as GuideLayout,
-  Fg as GuideStep,
-  _g as GuideStepList,
-  Og as LinkButton,
+  zg as GuideLayout,
+  Bg as GuideStep,
+  Vg as GuideStepList,
+  _g as LinkButton,
   _c as MIN_REGION_WIDTH,
-  Kg as MediaCropEditor,
+  Og as MediaCropEditor,
   zo as MediaFigure,
   Gm as MediaFigureThumbnail,
-  Ag as ToolList,
+  Fg as ToolList,
   tu as calloutTypeColor,
   nu as calloutTypeHex,
   Kr as calloutTypeLabel,