@clubmed/trident-ui 2.0.0-beta.9 → 2.0.0

package/styles/ui/controls.css

@@ -33,8 +33,7 @@
     @apply border-black;
   }
   label > span > input[type='radio']:focus-visible + span {
-    @apply ring-8;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
+    @apply ring-4 ring-black ring-offset-2;
   }
   label > span > input[type='radio'] + span {
     @apply rounded-full;
@@ -86,66 +85,24 @@
     transform: scale(1);
   }
   label > input[type='checkbox'][data-name='Filter']:focus-visible + span {
-    @apply ring-8;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
+    @apply ring-4 ring-black ring-offset-2;
   }
   /* Switch */
-  label > span > input[type='checkbox'][role='switch'] + span {
-    @apply transition-all;
+  input[role='switch'][data-name='Switch'] + span {
     @apply relative flex items-center transition-colors duration-200;
     @apply ring-0;
     --tw-ring-color: color-mix(in oklab, var(--color-lavender) 0%, transparent);
-    background-color: var(--color-middleGrey);
-    border-radius: var(--radius-pill);
-  }
-  label > span > input[type='checkbox'][role='switch'] + span > svg {
-    transition: all var(--transition-duration-boop) var(--transition-fn-boop);
-    transform: translate(calc(0% + 4px));
-  }
-  label > span > input[type='checkbox'][role='switch'] + span > svg circle + circle {
-    opacity: 1;
-    transition: opacity var(--transition-duration-boop) var(--transition-fn-boop);
-  }
-  label > span > input[type='checkbox'][role='switch'] + span > svg path {
-    opacity: 0;
-    scale: 0;
-    transform-origin: center;
-    transition:
-      opacity var(--transition-duration-boop) var(--transition-fn-boop),
-      scale var(--transition-duration-boop) var(--transition-fn-boop);
-  }
-  label > span > input[type='checkbox'][role='switch']:checked + span {
-    background-color: var(--color-saffron);
-  }
-  label > span > input[type='checkbox'][role='switch']:checked + span > svg {
-    transform: translate(calc(100% + 4px));
-  }
-  label > span > input[type='checkbox'][role='switch']:checked + span > svg circle + circle {
-    opacity: 0;
-  }
-  label > span > input[type='checkbox'][role='switch']:checked + span > svg path {
-    scale: 1;
-    opacity: 1;
-  }
-  label > span > input[type='checkbox'][role='switch']:focus-visible + span {
-    @apply ring-8;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
   }
 
-  button[role='switch'][data-name='Switch'] {
-    @apply relative flex items-center transition-colors duration-200;
-    @apply ring-0;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 0%, transparent);
-  }
-  button[role='switch'][data-name='Switch'] svg {
+  input[role='switch'][data-name='Switch'] + span svg {
     transition: all var(--transition-duration-boop) var(--transition-fn-boop);
     transform: translate(calc(0%));
   }
-  button[role='switch'][data-name='Switch'] svg circle + circle {
+  input[role='switch'][data-name='Switch'] + span svg circle + circle {
     opacity: 1;
     transition: opacity var(--transition-duration-boop) var(--transition-fn-boop);
   }
-  button[role='switch'][data-name='Switch'] svg path {
+  input[role='switch'][data-name='Switch'] + span svg path {
     opacity: 0;
     scale: 0;
     transform-origin: center;
@@ -153,21 +110,17 @@
       opacity var(--transition-duration-boop) var(--transition-fn-boop),
       scale var(--transition-duration-boop) var(--transition-fn-boop);
   }
-  button[role='switch'][data-name='Switch'][aria-checked='true'] {
-    background-color: var(--color-saffron);
-  }
-  button[role='switch'][data-name='Switch'][aria-checked='true'] svg {
+  input[role='switch'][data-name='Switch']:checked + span svg {
     transform: translate(calc(100%));
   }
-  button[role='switch'][data-name='Switch'][aria-checked='true'] svg circle + circle {
+  input[role='switch'][data-name='Switch']:checked + span svg circle + circle {
     opacity: 0;
   }
-  button[role='switch'][data-name='Switch'][aria-checked='true'] svg path {
+  input[role='switch'][data-name='Switch']:checked + span svg path {
     scale: 1;
     opacity: 1;
   }
-  button[role='switch'][data-name='Switch']:focus-visible {
-    @apply ring-8;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
+  input[role='switch'][data-name='Switch']:focus-visible + span {
+    @apply ring-4 ring-black ring-offset-2;
   }
 }

package/styles/ui/range.css

@@ -54,6 +54,7 @@
     @apply m-0;
     @apply pointer-events-none;
     @apply appearance-none;
+    @apply outline-none;
 
     grid-column: 1 / span 2;
     grid-row: 3;
@@ -61,6 +62,10 @@
     --col: #000;
   }
 
+  .input-range:focus-visible {
+    @apply ring-4 ring-black ring-offset-2;
+  }
+
   .input-range-sliderThumb {
     @apply transform;
     @apply appearance-none;
@@ -159,7 +164,7 @@
     color: hsl(0deg 0% 0%);
     font-size: 0.75rem;
     line-height: 0.875rem;
-    @apply font-semibold;
+    font-weight: 600;
 
     left: calc(0.5 * var(--thumbWidth));
   }

package/styles/ui/tabs.css

@@ -1,19 +0,0 @@
-@layer components {
-  .tab-focus-pill {
-    transform: translateX(
-      calc(
-        var(--tab-index, 0) * -100% + var(--active-tab, 0) * 100% -
-          (var(--spacing) * 4 * (var(--tab-index) - var(--active-tab, 0)))
-      )
-    );
-  }
-
-  [dir='rtl'] .tab-focus-pill {
-    transform: translateX(
-      calc(
-        var(--tab-index) * 100% + var(--active-tab) * -100% +
-          (var(--spacing) * 4 * (var(--tab-index) - var(--active-tab)))
-      )
-    );
-  }
-}

package/ui/Accordion.d.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef, FunctionComponent, ReactNode } from 'react';
+export interface AccordionItem {
+    id?: string;
+    header: ReactNode;
+    content: ReactNode;
+}
+export interface AccordionProps extends ComponentPropsWithoutRef<'div'> {
+    items: AccordionItem[];
+    /**
+     * When true, multiple panels can be open simultaneously.
+     * @default false
+     */
+    allowMultiple?: boolean;
+    /**
+     * A render function that wraps each item's `header` inside the trigger `<button>`.
+     * Receives `item.header` as its argument and must return a ReactNode.
+     * Useful for providing a consistent layout (e.g. flex row with a chevron) across all items
+     * without repeating the markup in every `AccordionItem.header`.
+     *
+     * @example
+     * triggerWrapper={(children) => (
+     *   <span className="flex w-full items-center justify-between py-16 font-semibold">
+     *     {children}
+     *     <ChevronIcon />
+     *   </span>
+     * )}
+     */
+    triggerWrapper?: (children: ReactNode) => ReactNode;
+}
+export declare const Accordion: FunctionComponent<AccordionProps>;

package/ui/Accordion.js

@@ -0,0 +1,71 @@
+import { ElasticHeight as e } from "./ElasticHeight.js";
+import { useCallback as t, useEffect as n, useId as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region lib/ui/Accordion.tsx
+var c = ({ items: c, allowMultiple: l = !1, triggerWrapper: u, className: d, ...f }) => {
+	let p = r(), m = i([]), [h, g] = a(() => /* @__PURE__ */ new Set());
+	n(() => {
+		l || g((e) => {
+			if (e.size <= 1) return e;
+			let [t] = e;
+			return new Set([t]);
+		});
+	}, [l]);
+	let _ = t((e) => {
+		g((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : (l || n.clear(), n.add(e)), n;
+		});
+	}, [l]), v = t((e) => {
+		_(e.currentTarget.dataset.itemId);
+	}, [_]), y = t((e) => {
+		let t = c.length, n = Number(e.currentTarget.dataset.index), r = null;
+		switch (e.code) {
+			case "ArrowDown":
+				e.preventDefault(), r = (n + 1) % t;
+				break;
+			case "ArrowUp":
+				e.preventDefault(), r = (n - 1 + t) % t;
+				break;
+			case "Home":
+				e.preventDefault(), r = 0;
+				break;
+			case "End":
+				e.preventDefault(), r = t - 1;
+				break;
+		}
+		r !== null && m.current[r]?.focus();
+	}, [c.length]), b = i(/* @__PURE__ */ new Map()), x = t((e) => (b.current.has(e) || b.current.set(e, (t) => {
+		m.current[e] = t;
+	}), b.current.get(e)), []);
+	return /* @__PURE__ */ o("div", {
+		...f,
+		className: d,
+		children: c.map((t, n) => {
+			let r = t.id ?? `${p}-${n}`, i = h.has(r), a = `accordion-header-${p}-${n}`, c = `accordion-panel-${p}-${n}`;
+			return /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("button", {
+				id: a,
+				ref: x(n),
+				type: "button",
+				"aria-expanded": i,
+				"aria-controls": c,
+				"data-item-id": r,
+				"data-index": n,
+				onClick: v,
+				onKeyDown: y,
+				className: "outline-none focus-visible:ring-4 focus-visible:ring-black w-full rounded-pill",
+				children: u ? u(t.header) : t.header
+			}), /* @__PURE__ */ o(e, {
+				id: c,
+				role: "region",
+				"aria-labelledby": a,
+				isExpanded: i,
+				children: t.content
+			})] }, r);
+		})
+	});
+};
+//#endregion
+export { c as Accordion };
+
+//# sourceMappingURL=Accordion.js.map

package/ui/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":[],"sources":["../../lib/ui/Accordion.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { ElasticHeight } from './ElasticHeight';\n\nexport interface AccordionItem {\n  id?: string;\n  header: ReactNode;\n  content: ReactNode;\n}\n\nexport interface AccordionProps extends ComponentPropsWithoutRef<'div'> {\n  items: AccordionItem[];\n  /**\n   * When true, multiple panels can be open simultaneously.\n   * @default false\n   */\n  allowMultiple?: boolean;\n  /**\n   * A render function that wraps each item's `header` inside the trigger `<button>`.\n   * Receives `item.header` as its argument and must return a ReactNode.\n   * Useful for providing a consistent layout (e.g. flex row with a chevron) across all items\n   * without repeating the markup in every `AccordionItem.header`.\n   *\n   * @example\n   * triggerWrapper={(children) => (\n   *   <span className=\"flex w-full items-center justify-between py-16 font-semibold\">\n   *     {children}\n   *     <ChevronIcon />\n   *   </span>\n   * )}\n   */\n  triggerWrapper?: (children: ReactNode) => ReactNode;\n}\n\nexport const Accordion: FunctionComponent<AccordionProps> = ({\n  items,\n  allowMultiple = false,\n  triggerWrapper,\n  className,\n  ...attrs\n}) => {\n  const uid = useId();\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [openPanels, setOpenPanels] = useState<Set<string>>(() => new Set());\n\n  useEffect(() => {\n    if (!allowMultiple) {\n      setOpenPanels((prev) => {\n        if (prev.size <= 1) return prev;\n        const [first] = prev;\n        return new Set([first]);\n      });\n    }\n  }, [allowMultiple]);\n\n  const toggle = useCallback(\n    (id: string) => {\n      setOpenPanels((prev) => {\n        const next = new Set(prev);\n        if (next.has(id)) {\n          next.delete(id);\n        } else {\n          if (!allowMultiple) {\n            next.clear();\n          }\n          next.add(id);\n        }\n        return next;\n      });\n    },\n    [allowMultiple],\n  );\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      toggle(e.currentTarget.dataset.itemId!);\n    },\n    [toggle],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>) => {\n      const count = items.length;\n      const index = Number(event.currentTarget.dataset.index);\n      let targetIndex: number | null = null;\n\n      switch (event.code) {\n        case 'ArrowDown':\n          event.preventDefault();\n          targetIndex = (index + 1) % count;\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          targetIndex = (index - 1 + count) % count;\n          break;\n        case 'Home':\n          event.preventDefault();\n          targetIndex = 0;\n          break;\n        case 'End':\n          event.preventDefault();\n          targetIndex = count - 1;\n          break;\n      }\n\n      if (targetIndex !== null) {\n        buttonRefs.current[targetIndex]?.focus();\n      }\n    },\n    [items.length],\n  );\n\n  const refCallbacks = useRef(new Map<number, (el: HTMLButtonElement | null) => void>());\n  const getRefCallback = useCallback((index: number) => {\n    if (!refCallbacks.current.has(index)) {\n      refCallbacks.current.set(index, (el: HTMLButtonElement | null) => {\n        buttonRefs.current[index] = el;\n      });\n    }\n    return refCallbacks.current.get(index)!;\n  }, []);\n\n  return (\n    <div {...attrs} className={className}>\n      {items.map((item, index) => {\n        const resolvedId = item.id ?? `${uid}-${index}`;\n        const isOpen = openPanels.has(resolvedId);\n        const headerId = `accordion-header-${uid}-${index}`;\n        const panelId = `accordion-panel-${uid}-${index}`;\n\n        return (\n          <div key={resolvedId}>\n            <button\n              id={headerId}\n              ref={getRefCallback(index)}\n              type=\"button\"\n              aria-expanded={isOpen}\n              aria-controls={panelId}\n              data-item-id={resolvedId}\n              data-index={index}\n              onClick={handleClick}\n              onKeyDown={handleKeyDown}\n              className=\"outline-none focus-visible:ring-4 focus-visible:ring-black w-full rounded-pill\"\n            >\n              {triggerWrapper ? triggerWrapper(item.header) : item.header}\n            </button>\n            <ElasticHeight\n              id={panelId}\n              role=\"region\"\n              aria-labelledby={headerId}\n              isExpanded={isOpen}\n            >\n              {item.content}\n            </ElasticHeight>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;AA4CA,IAAa,KAAgD,EAC3D,UACA,mBAAgB,IAChB,mBACA,cACA,GAAG,QACC;CACJ,IAAM,IAAM,GAAO,EACb,IAAa,EAAqC,EAAE,CAAC,EACrD,CAAC,GAAY,KAAiB,wBAA4B,IAAI,KAAK,CAAC;AAE1E,SAAgB;AACd,EAAK,KACH,GAAe,MAAS;AACtB,OAAI,EAAK,QAAQ,EAAG,QAAO;GAC3B,IAAM,CAAC,KAAS;AAChB,UAAO,IAAI,IAAI,CAAC,EAAM,CAAC;IACvB;IAEH,CAAC,EAAc,CAAC;CAEnB,IAAM,IAAS,GACZ,MAAe;AACd,KAAe,MAAS;GACtB,IAAM,IAAO,IAAI,IAAI,EAAK;AAS1B,UARI,EAAK,IAAI,EAAG,GACd,EAAK,OAAO,EAAG,IAEV,KACH,EAAK,OAAO,EAEd,EAAK,IAAI,EAAG,GAEP;IACP;IAEJ,CAAC,EAAc,CAChB,EAEK,IAAc,GACjB,MAAqC;AACpC,IAAO,EAAE,cAAc,QAAQ,OAAQ;IAEzC,CAAC,EAAO,CACT,EAEK,IAAgB,GACnB,MAA4C;EAC3C,IAAM,IAAQ,EAAM,QACd,IAAQ,OAAO,EAAM,cAAc,QAAQ,MAAM,EACnD,IAA6B;AAEjC,UAAQ,EAAM,MAAd;GACE,KAAK;AAEH,IADA,EAAM,gBAAgB,EACtB,KAAe,IAAQ,KAAK;AAC5B;GACF,KAAK;AAEH,IADA,EAAM,gBAAgB,EACtB,KAAe,IAAQ,IAAI,KAAS;AACpC;GACF,KAAK;AAEH,IADA,EAAM,gBAAgB,EACtB,IAAc;AACd;GACF,KAAK;AAEH,IADA,EAAM,gBAAgB,EACtB,IAAc,IAAQ;AACtB;;AAGJ,EAAI,MAAgB,QAClB,EAAW,QAAQ,IAAc,OAAO;IAG5C,CAAC,EAAM,OAAO,CACf,EAEK,IAAe,kBAAO,IAAI,KAAqD,CAAC,EAChF,IAAiB,GAAa,OAC7B,EAAa,QAAQ,IAAI,EAAM,IAClC,EAAa,QAAQ,IAAI,IAAQ,MAAiC;AAChE,IAAW,QAAQ,KAAS;GAC5B,EAEG,EAAa,QAAQ,IAAI,EAAM,GACrC,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,GAAI;EAAkB;YACxB,EAAM,KAAK,GAAM,MAAU;GAC1B,IAAM,IAAa,EAAK,MAAM,GAAG,EAAI,GAAG,KAClC,IAAS,EAAW,IAAI,EAAW,EACnC,IAAW,oBAAoB,EAAI,GAAG,KACtC,IAAU,mBAAmB,EAAI,GAAG;AAE1C,UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;IACE,IAAI;IACJ,KAAK,EAAe,EAAM;IAC1B,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,gBAAc;IACd,cAAY;IACZ,SAAS;IACT,WAAW;IACX,WAAU;cAET,IAAiB,EAAe,EAAK,OAAO,GAAG,EAAK;IAC9C,CAAA,EACT,kBAAC,GAAD;IACE,IAAI;IACJ,MAAK;IACL,mBAAiB;IACjB,YAAY;cAEX,EAAK;IACQ,CAAA,CACZ,EAAA,EAvBI,EAuBJ;IAER;EACE,CAAA"}

package/ui/AdvancedToast.js

@@ -5,8 +5,8 @@ import { Colors as n, getBgColor as r, getBorderColor as i, getTextColor as a }
 import { useCountdown as o } from "./hooks/useCountdown.js";
 import s from "./hooks/useResizeObserver.js";
 import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
-import { Icon as f } from "@clubmed/trident-icons";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Icon as m } from "@clubmed/trident-icons";
 //#region lib/ui/AdvancedToast.tsx
 var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, children: x, accentColor: S = n.orange, duration: C = 1e4, onClose: w, toastId: T, updateHeight: E, ...D }) => {
 	let O = l(), [k, A] = d(!1), [j, M] = d(!1), N = u(null), { progress: P } = o({
@@ -23,7 +23,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 		onResize: () => {
 			N.current && E(T, N.current.offsetHeight);
 		}
-	}), /* @__PURE__ */ m("div", {
+	}), /* @__PURE__ */ p("div", {
 		ref: N,
 		...D,
 		className: e(y ? "animate-slide-right-enter" : "animate-slide-right-exit opacity-0", "relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden", i(S), h),
@@ -32,50 +32,53 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 		onMouseUp: I,
 		onMouseLeave: L,
 		children: [
-			/* @__PURE__ */ p(f, {
-				name: v,
-				width: "30px",
-				className: e("flex-shrink-0 pt-4", a(S))
+			/* @__PURE__ */ f("span", {
+				className: e("w-30 h-30 pt-4", a(S)),
+				children: /* @__PURE__ */ f(m, {
+					name: v,
+					width: "30px",
+					className: e("flex-shrink-0")
+				})
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ p("div", {
 				className: "flex flex-1 flex-col gap-12 pe-24 text-b4",
-				children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+				children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
 					className: " font-bold",
 					id: O,
 					children: g
-				}), /* @__PURE__ */ p("p", { children: _ })] }), x && /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("button", {
+				}), /* @__PURE__ */ f("p", { children: _ })] }), x && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("button", {
 					onClick: () => A(!k),
 					"aria-expanded": k,
-					className: "flex w-fit items-center gap-8 text-b5 font-normal",
+					className: "flex w-fit items-center gap-8 text-b5 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 					type: "button",
-					children: [/* @__PURE__ */ p("span", { children: b.details }), /* @__PURE__ */ p(f, {
+					children: [/* @__PURE__ */ f("span", { children: b.details }), /* @__PURE__ */ f(m, {
 						name: "ArrowDefaultDown",
 						width: "24px",
 						style: { rotate: k ? "180deg" : "0deg" },
 						className: "transition-all duration-300"
 					})]
-				}), /* @__PURE__ */ p(t, {
+				}), /* @__PURE__ */ f(t, {
 					isExpanded: k,
-					children: /* @__PURE__ */ p("div", {
+					children: /* @__PURE__ */ f("div", {
 						className: "pt-4",
 						children: x
 					})
 				})] })]
 			}),
-			w && /* @__PURE__ */ p("button", {
+			w && /* @__PURE__ */ f("button", {
 				"aria-describedby": O,
 				"aria-label": b.close,
-				className: "absolute end-0 top-0 mt-20 me-13 text-black",
+				className: "absolute end-0 top-0 mt-20 me-13 text-black outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 				onClick: w,
 				type: "button",
-				children: /* @__PURE__ */ p(f, {
+				children: /* @__PURE__ */ f(m, {
 					name: "CrossDefault",
 					width: "24px"
 				})
 			}),
-			C !== !1 && /* @__PURE__ */ p("div", {
+			C !== !1 && /* @__PURE__ */ f("div", {
 				className: "absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16",
-				children: /* @__PURE__ */ p("div", {
+				children: /* @__PURE__ */ f("div", {
 					className: r(S),
 					style: {
 						width: "100%",

package/ui/AdvancedToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Icon\n        name={icon}\n        width=\"30px\"\n        className={clsx('flex-shrink-0 pt-4', getTextColor(accentColor))}\n      />\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,GAAD;IACE,MAAM;IACN,OAAM;IACN,WAAW,EAAK,sBAAsB,EAAa,EAAY,CAAA;IAC/D,CAAA;GACF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}
+{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <span className={clsx('w-30 h-30 pt-4', getTextColor(accentColor))}>\n        <Icon name={icon} width=\"30px\" className={clsx('flex-shrink-0')} />\n      </span>\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,QAAD;IAAM,WAAW,EAAK,kBAAkB,EAAa,EAAY,CAAC;cAChE,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAO,WAAW,EAAK,gBAAA;KAAoB,CAAA;IAC9D,CAAA;GACP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}

package/ui/Avatar.js

@@ -9,7 +9,7 @@ function i({ alt: i, src: a, srcSet: o, style: s, children: c, className: l, ...
 			role: "figure",
 			"aria-label": i
 		} : {},
-		className: e("flex items-center justify-center relative overflow-hidden", {
+		className: e("flex items-center justify-center relative overflow-hidden outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", {
 			"rounded-full": !l?.includes("rounded-"),
 			"text-black": !l?.includes("text-"),
 			"bg-saffron": !l?.includes("bg-")

package/ui/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../lib/ui/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nconst initial = (text = '') => {\n  return text\n    .split(' ')\n    .map((text) => text.slice(0, 1))\n    .join('');\n};\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  src?: string | undefined;\n  srcSet?: string | undefined;\n}\n\nexport function Avatar({\n  alt,\n  src,\n  srcSet,\n  style,\n  children,\n  className,\n  ...props\n}: PropsWithChildren<AvatarProps>) {\n  return (\n    <div\n      {...props}\n      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}\n      className={clsx(\n        'flex items-center justify-center relative overflow-hidden',\n        {\n          'rounded-full': !className?.includes('rounded-'),\n          'text-black': !className?.includes('text-'),\n          'bg-saffron': !className?.includes('bg-'),\n        },\n        className,\n      )}\n      style={{\n        width: '48px',\n        height: '48px',\n        ...style,\n      }}\n    >\n      <span className=\"flex items-center justify-center font-bold uppercase text-h6 h-full\">\n        {src || srcSet ? (\n          <img\n            srcSet={srcSet}\n            src={src}\n            alt={alt}\n            className={'w-full h-full object-cover transparent indent-[1000px]'}\n          />\n        ) : (\n          initial(alt)\n        )}\n        {children}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,IAAM,KAAW,IAAO,OACf,EACJ,MAAM,IAAI,CACV,KAAK,MAAS,EAAK,MAAM,GAAG,EAAE,CAAC,CAC/B,KAAK,GAAG;AASb,SAAgB,EAAO,EACrB,QACA,QACA,WACA,UACA,aACA,cACA,GAAG,KAC8B;AACjC,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,GAAK,KAAO,IAAS;GAAE,MAAM;GAAU,cAAc;GAAK,GAAG,EAAE;EAC/D,WAAW,EACT,6DACA;GACE,gBAAgB,CAAC,GAAW,SAAS,WAAW;GAChD,cAAc,CAAC,GAAW,SAAS,QAAQ;GAC3C,cAAc,CAAC,GAAW,SAAS,MAAM;GAC1C,EACD,EACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;GACJ;YAED,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,KAAO,IACN,kBAAC,OAAD;IACU;IACH;IACA;IACL,WAAW;IACX,CAAA,GAEF,EAAQ,EAAI,EAEb,EACI;;EACH,CAAA"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../lib/ui/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nconst initial = (text = '') => {\n  return text\n    .split(' ')\n    .map((text) => text.slice(0, 1))\n    .join('');\n};\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  src?: string | undefined;\n  srcSet?: string | undefined;\n}\n\nexport function Avatar({\n  alt,\n  src,\n  srcSet,\n  style,\n  children,\n  className,\n  ...props\n}: PropsWithChildren<AvatarProps>) {\n  return (\n    <div\n      {...props}\n      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}\n      className={clsx(\n        'flex items-center justify-center relative overflow-hidden outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n        {\n          'rounded-full': !className?.includes('rounded-'),\n          'text-black': !className?.includes('text-'),\n          'bg-saffron': !className?.includes('bg-'),\n        },\n        className,\n      )}\n      style={{\n        width: '48px',\n        height: '48px',\n        ...style,\n      }}\n    >\n      <span className=\"flex items-center justify-center font-bold uppercase text-h6 h-full\">\n        {src || srcSet ? (\n          <img\n            srcSet={srcSet}\n            src={src}\n            alt={alt}\n            className={'w-full h-full object-cover transparent indent-[1000px]'}\n          />\n        ) : (\n          initial(alt)\n        )}\n        {children}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,IAAM,KAAW,IAAO,OACf,EACJ,MAAM,IAAI,CACV,KAAK,MAAS,EAAK,MAAM,GAAG,EAAE,CAAC,CAC/B,KAAK,GAAG;AASb,SAAgB,EAAO,EACrB,QACA,QACA,WACA,UACA,aACA,cACA,GAAG,KAC8B;AACjC,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,GAAK,KAAO,IAAS;GAAE,MAAM;GAAU,cAAc;GAAK,GAAG,EAAE;EAC/D,WAAW,EACT,oJACA;GACE,gBAAgB,CAAC,GAAW,SAAS,WAAW;GAChD,cAAc,CAAC,GAAW,SAAS,QAAQ;GAC3C,cAAc,CAAC,GAAW,SAAS,MAAM;GAC1C,EACD,EACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;GACJ;YAED,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,KAAO,IACN,kBAAC,OAAD;IACU;IACH;IACA;IACL,WAAW;IACX,CAAA,GAEF,EAAQ,EAAI,EAEb,EACI;;EACH,CAAA"}

package/ui/BasicToast.js

@@ -3,47 +3,47 @@ import { t as e } from "../chunks/clsx.js";
 import { getBgColor as t, getComplementaryTextColor as n, getThemeColor as r } from "./helpers/colors/colors.js";
 import { Link as i } from "./Link.js";
 import { useId as a } from "react";
-import { Icon as o } from "@clubmed/trident-icons";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Icon as c } from "@clubmed/trident-icons";
 //#region lib/ui/BasicToast.tsx
 function l({ className: l, description: u, href: d, icon: f, incentive: p, isVisible: m, labels: h, onClick: g, onClose: _, theme: v = "dark", title: y, children: b, ...x }) {
 	let S = r(v), C = a(), w = b ?? u;
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ s("div", {
 		...x,
 		className: e(m ? "animate-slide-right-enter" : "animate-slide-right-exit opacity-0", "relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300", t(S), n(S), l),
 		role: "note",
 		children: [
-			f && /* @__PURE__ */ s(o, {
+			f && /* @__PURE__ */ o(c, {
 				name: f,
 				width: "30px"
 			}),
-			/* @__PURE__ */ c("a", {
-				className: "group pe-44",
+			/* @__PURE__ */ s("a", {
+				className: "group pe-44 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill",
 				href: d,
 				onClick: g,
 				children: [
-					/* @__PURE__ */ s("p", {
+					/* @__PURE__ */ o("p", {
 						className: "mb-4 text-b3 font-bold",
 						id: C,
 						children: y
 					}),
-					w && /* @__PURE__ */ s("div", {
+					w && /* @__PURE__ */ o("div", {
 						className: "mb-12 text-b4",
 						children: w
 					}),
-					/* @__PURE__ */ s(i, {
+					/* @__PURE__ */ o(i, {
 						component: "span",
 						className: "text-b3 font-bold",
 						label: p
 					})
 				]
 			}),
-			_ && /* @__PURE__ */ s("button", {
+			_ && /* @__PURE__ */ o("button", {
 				"aria-describedby": C,
 				"aria-label": h.close,
-				className: e("absolute end-0 top-0 m-20", n(S)),
+				className: e("absolute end-0 top-0 m-20 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill", n(S)),
 				onClick: _,
-				children: /* @__PURE__ */ s(o, {
+				children: /* @__PURE__ */ o(c, {
 					name: "CrossDefault",
 					width: "24px"
 				})

package/ui/BasicToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicToast.js","names":[],"sources":["../../lib/ui/BasicToast.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, useId } from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { getBgColor, getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\nimport { Link } from './Link';\nimport type { Theme } from './types/Theme';\n\nexport interface BasicToastProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * @deprecated use children slot instead\n   */\n  description?: string;\n  href: string;\n  icon?: IconicNames;\n  incentive: string;\n  isVisible: boolean;\n  labels: { close: string };\n  onClick?: () => void;\n  onClose?: () => void;\n  theme: Theme;\n  title: string;\n}\n\nexport function BasicToast({\n  className,\n  description,\n  href,\n  icon,\n  incentive,\n  isVisible,\n  labels,\n  onClick,\n  onClose,\n  theme = 'dark',\n  title,\n  children,\n  ...attrs\n}: PropsWithChildren<BasicToastProps>) {\n  const color = getThemeColor(theme);\n  const id = useId();\n  const content = children ?? description;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300',\n        getBgColor(color),\n        getComplementaryTextColor(color),\n        className,\n      )}\n      role=\"note\"\n    >\n      {icon && <Icon name={icon} width=\"30px\" />}\n      <a className=\"group pe-44\" href={href} onClick={onClick}>\n        <p className=\"mb-4 text-b3 font-bold\" id={id}>\n          {title}\n        </p>\n        {content && <div className=\"mb-12 text-b4\">{content}</div>}\n        <Link component=\"span\" className=\"text-b3 font-bold\" label={incentive} />\n      </a>\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className={clsx('absolute end-0 top-0 m-20', getComplementaryTextColor(color))}\n          onClick={onClose}\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAyBA,SAAgB,EAAW,EACzB,cACA,gBACA,SACA,SACA,cACA,cACA,WACA,YACA,YACA,WAAQ,QACR,UACA,aACA,GAAG,KACkC;CACrC,IAAM,IAAQ,EAAc,EAAM,EAC5B,IAAK,GAAO,EACZ,IAAU,KAAY;AAE5B,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,kFACA,EAAW,EAAM,EACjB,EAA0B,EAAM,EAChC,EACD;EACD,MAAK;YATP;GAWG,KAAQ,kBAAC,GAAD;IAAM,MAAM;IAAM,OAAM;IAAS,CAAA;GAC1C,kBAAC,KAAD;IAAG,WAAU;IAAoB;IAAe;cAAhD;KACE,kBAAC,KAAD;MAAG,WAAU;MAA6B;gBACvC;MACC,CAAA;KACH,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAiB;MAAc,CAAA;KAC1D,kBAAC,GAAD;MAAM,WAAU;MAAO,WAAU;MAAoB,OAAO;MAAa,CAAA;;;GAE1E,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAW,EAAK,6BAA6B,EAA0B,EAAM,CAAC;IAC9E,SAAS;cAET,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA"}
+{"version":3,"file":"BasicToast.js","names":[],"sources":["../../lib/ui/BasicToast.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, useId } from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { getBgColor, getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\nimport { Link } from './Link';\nimport type { Theme } from './types/Theme';\n\nexport interface BasicToastProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * @deprecated use children slot instead\n   */\n  description?: string;\n  href: string;\n  icon?: IconicNames;\n  incentive: string;\n  isVisible: boolean;\n  labels: { close: string };\n  onClick?: () => void;\n  onClose?: () => void;\n  theme: Theme;\n  title: string;\n}\n\nexport function BasicToast({\n  className,\n  description,\n  href,\n  icon,\n  incentive,\n  isVisible,\n  labels,\n  onClick,\n  onClose,\n  theme = 'dark',\n  title,\n  children,\n  ...attrs\n}: PropsWithChildren<BasicToastProps>) {\n  const color = getThemeColor(theme);\n  const id = useId();\n  const content = children ?? description;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300',\n        getBgColor(color),\n        getComplementaryTextColor(color),\n        className,\n      )}\n      role=\"note\"\n    >\n      {icon && <Icon name={icon} width=\"30px\" />}\n      <a\n        className=\"group pe-44 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill\"\n        href={href}\n        onClick={onClick}\n      >\n        <p className=\"mb-4 text-b3 font-bold\" id={id}>\n          {title}\n        </p>\n        {content && <div className=\"mb-12 text-b4\">{content}</div>}\n        <Link component=\"span\" className=\"text-b3 font-bold\" label={incentive} />\n      </a>\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className={clsx(\n            'absolute end-0 top-0 m-20 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill',\n            getComplementaryTextColor(color),\n          )}\n          onClick={onClose}\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAyBA,SAAgB,EAAW,EACzB,cACA,gBACA,SACA,SACA,cACA,cACA,WACA,YACA,YACA,WAAQ,QACR,UACA,aACA,GAAG,KACkC;CACrC,IAAM,IAAQ,EAAc,EAAM,EAC5B,IAAK,GAAO,EACZ,IAAU,KAAY;AAE5B,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,kFACA,EAAW,EAAM,EACjB,EAA0B,EAAM,EAChC,EACD;EACD,MAAK;YATP;GAWG,KAAQ,kBAAC,GAAD;IAAM,MAAM;IAAM,OAAM;IAAS,CAAA;GAC1C,kBAAC,KAAD;IACE,WAAU;IACJ;IACG;cAHX;KAKE,kBAAC,KAAD;MAAG,WAAU;MAA6B;gBACvC;MACC,CAAA;KACH,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAiB;MAAc,CAAA;KAC1D,kBAAC,GAAD;MAAM,WAAU;MAAO,WAAU;MAAoB,OAAO;MAAa,CAAA;;;GAE1E,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAW,EACT,iIACA,EAA0B,EAAM,CACjC;IACD,SAAS;cAET,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA"}

package/ui/Breadcrumb.js

@@ -1,8 +1,8 @@
 import { t as e } from "../chunks/clsx.js";
 import { getComplementaryTextColor as t, getThemeColor as n } from "./helpers/colors/colors.js";
 import { createElement as r } from "react";
-import { Icon as i } from "@clubmed/trident-icons";
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
+import { Icon as a } from "@clubmed/trident-icons";
 //#region lib/ui/Breadcrumb.tsx
 var o = ({ className: o, items: s, theme: c = "light", ...l }) => {
 	if (s.length == 0) return null;
@@ -15,11 +15,11 @@ var o = ({ className: o, items: s, theme: c = "light", ...l }) => {
 		},
 		h
 	] : s;
-	return /* @__PURE__ */ a("nav", {
+	return /* @__PURE__ */ i("nav", {
 		"aria-label": "Breadcrumb",
 		...l,
 		className: e(o, "overflow-hidden"),
-		children: /* @__PURE__ */ a("ul", {
+		children: /* @__PURE__ */ i("ul", {
 			className: "scrollbar-hidden text-b4 flex items-center overflow-x-auto font-sans",
 			children: g.map(({ label: t, href: n }, o) => {
 				let s = o === g.length - 1, c = n && !s;
@@ -30,10 +30,11 @@ var o = ({ className: o, items: s, theme: c = "light", ...l }) => {
 						[u]: s
 					}),
 					key: t
-				}, c ? /* @__PURE__ */ a("a", {
+				}, c ? /* @__PURE__ */ i("a", {
 					href: n,
+					className: "rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 					children: t
-				}) : t, !s && /* @__PURE__ */ a(i, {
+				}) : t, !s && /* @__PURE__ */ i(a, {
 					className: "mx-4",
 					name: "Diamond",
 					width: "14px"

package/ui/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../lib/ui/Breadcrumb.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { Theme } from './types/Theme';\nimport { Icon } from '@clubmed/trident-icons';\nimport { getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  items: Array<{\n    href: string;\n    label: string;\n  }>;\n  theme?: Theme;\n}\n\nexport const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({\n  className,\n  items,\n  theme = 'light',\n  ...attrs\n}) => {\n  if (items.length == 0) {\n    return null;\n  }\n\n  const themeColor = getThemeColor(theme);\n  const accentColor = getComplementaryTextColor(themeColor);\n  const color = accentColor === 'text-white' ? accentColor : 'text-middleGrey';\n\n  const [first, second, , ...rest] = items;\n  const lastItem = rest.length ? rest[rest.length - 1] : items[items.length - 1];\n  const spacer = { label: '…', href: '' };\n  const itemsToRender = !rest.length ? items : [first, second, spacer, lastItem];\n\n  return (\n    <nav aria-label=\"Breadcrumb\" {...attrs} className={clsx(className, 'overflow-hidden')}>\n      <ul className=\"scrollbar-hidden text-b4 flex items-center overflow-x-auto font-sans\">\n        {itemsToRender.map(({ label, href }, index) => {\n          const isLast = index === itemsToRender.length - 1;\n          const isLink = href && !isLast;\n\n          return (\n            <li\n              {...(isLast && { 'aria-current': 'page' })}\n              className={clsx(\n                'flex shrink-0 items-center',\n                { [color]: !isLast },\n                {\n                  'font-bold': isLast,\n                  [accentColor]: isLast,\n                },\n              )}\n              key={label}\n            >\n              {isLink ? <a href={href}>{label}</a> : label}\n              {!isLast && <Icon className=\"mx-4\" name=\"Diamond\" width=\"14px\" />}\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;AAeA,IAAa,KAAkD,EAC7D,cACA,UACA,WAAQ,SACR,GAAG,QACC;AACJ,KAAI,EAAM,UAAU,EAClB,QAAO;CAIT,IAAM,IAAc,EADD,EAAc,EAAM,CACkB,EACnD,IAAQ,MAAgB,eAAe,IAAc,mBAErD,CAAC,GAAO,KAAU,GAAG,KAAQ,GAC7B,IAAW,EAAK,SAAS,EAAK,EAAK,SAAS,KAAK,EAAM,EAAM,SAAS,IAEtE,IAAiB,EAAK,SAAiB;EAAC;EAAO;EADtC;GAAE,OAAO;GAAK,MAAM;GAAI;EAC8B;EAAS,GAAzC;AAErC,QACE,kBAAC,OAAD;EAAK,cAAW;EAAa,GAAI;EAAO,WAAW,EAAK,GAAW,kBAAkB;YACnF,kBAAC,MAAD;GAAI,WAAU;aACX,EAAc,KAAK,EAAE,UAAO,WAAQ,MAAU;IAC7C,IAAM,IAAS,MAAU,EAAc,SAAS,GAC1C,IAAS,KAAQ,CAAC;AAExB,WACE,kBAAC,MAAD;KACE,GAAK,KAAU,EAAE,gBAAgB,QAAQ;KACzC,WAAW,EACT,8BACA,GAAG,IAAQ,CAAC,GAAQ,EACpB;MACE,aAAa;OACZ,IAAc;MAChB,CACF;KACD,KAAK;KAIF,EAFF,IAAS,kBAAC,KAAD;KAAS;eAAO;KAAU,CAAA,GAAG,GACtC,CAAC,KAAU,kBAAC,GAAD;KAAM,WAAU;KAAO,MAAK;KAAU,OAAM;KAAS,CAAA,CAC9D;KAEP;GACC,CAAA;EACD,CAAA"}
+{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../lib/ui/Breadcrumb.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { Theme } from './types/Theme';\nimport { Icon } from '@clubmed/trident-icons';\nimport { getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  items: Array<{\n    href: string;\n    label: string;\n  }>;\n  theme?: Theme;\n}\n\nexport const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({\n  className,\n  items,\n  theme = 'light',\n  ...attrs\n}) => {\n  if (items.length == 0) {\n    return null;\n  }\n\n  const themeColor = getThemeColor(theme);\n  const accentColor = getComplementaryTextColor(themeColor);\n  const color = accentColor === 'text-white' ? accentColor : 'text-middleGrey';\n\n  const [first, second, , ...rest] = items;\n  const lastItem = rest.length ? rest[rest.length - 1] : items[items.length - 1];\n  const spacer = { label: '…', href: '' };\n  const itemsToRender = !rest.length ? items : [first, second, spacer, lastItem];\n\n  return (\n    <nav aria-label=\"Breadcrumb\" {...attrs} className={clsx(className, 'overflow-hidden')}>\n      <ul className=\"scrollbar-hidden text-b4 flex items-center overflow-x-auto font-sans\">\n        {itemsToRender.map(({ label, href }, index) => {\n          const isLast = index === itemsToRender.length - 1;\n          const isLink = href && !isLast;\n\n          return (\n            <li\n              {...(isLast && { 'aria-current': 'page' })}\n              className={clsx(\n                'flex shrink-0 items-center',\n                { [color]: !isLast },\n                {\n                  'font-bold': isLast,\n                  [accentColor]: isLast,\n                },\n              )}\n              key={label}\n            >\n              {isLink ? (\n                <a\n                  href={href}\n                  className=\"rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n                >\n                  {label}\n                </a>\n              ) : (\n                label\n              )}\n              {!isLast && <Icon className=\"mx-4\" name=\"Diamond\" width=\"14px\" />}\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;AAeA,IAAa,KAAkD,EAC7D,cACA,UACA,WAAQ,SACR,GAAG,QACC;AACJ,KAAI,EAAM,UAAU,EAClB,QAAO;CAIT,IAAM,IAAc,EADD,EAAc,EAAM,CACkB,EACnD,IAAQ,MAAgB,eAAe,IAAc,mBAErD,CAAC,GAAO,KAAU,GAAG,KAAQ,GAC7B,IAAW,EAAK,SAAS,EAAK,EAAK,SAAS,KAAK,EAAM,EAAM,SAAS,IAEtE,IAAiB,EAAK,SAAiB;EAAC;EAAO;EADtC;GAAE,OAAO;GAAK,MAAM;GAAI;EAC8B;EAAS,GAAzC;AAErC,QACE,kBAAC,OAAD;EAAK,cAAW;EAAa,GAAI;EAAO,WAAW,EAAK,GAAW,kBAAkB;YACnF,kBAAC,MAAD;GAAI,WAAU;aACX,EAAc,KAAK,EAAE,UAAO,WAAQ,MAAU;IAC7C,IAAM,IAAS,MAAU,EAAc,SAAS,GAC1C,IAAS,KAAQ,CAAC;AAExB,WACE,kBAAC,MAAD;KACE,GAAK,KAAU,EAAE,gBAAgB,QAAQ;KACzC,WAAW,EACT,8BACA,GAAG,IAAQ,CAAC,GAAQ,EACpB;MACE,aAAa;OACZ,IAAc;MAChB,CACF;KACD,KAAK;KAaF,EAXF,IACC,kBAAC,KAAD;KACQ;KACN,WAAU;eAET;KACC,CAAA,GAEJ,GAED,CAAC,KAAU,kBAAC,GAAD;KAAM,WAAU;KAAO,MAAK;KAAU,OAAM;KAAS,CAAA,CAC9D;KAEP;GACC,CAAA;EACD,CAAA"}

package/ui/Chapters/Chapter.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+interface Props {
+    index: number;
+    setActiveChapter: (index: number) => void;
+}
+export declare const Chapter: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/ui/Chapters/Chapter.js

@@ -0,0 +1,36 @@
+"use client";
+import { useEffect as e, useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+var r = (() => {
+	let e = [];
+	for (let t = 0; t <= 1; t += .03) e.push(parseFloat(t.toFixed(2)));
+	return e;
+})(), i = (e) => {
+	let t = e.boundingClientRect.height <= window.innerHeight / 2 && e.intersectionRect.height > window.innerHeight / 3, n = e.boundingClientRect.height <= window.innerHeight / 2 && e.boundingClientRect.height === e.intersectionRect.height, r = e.boundingClientRect.height > window.innerHeight / 2 && e.intersectionRect.height > window.innerHeight / 2;
+	return t || n || r;
+}, a = ({ children: a, index: o, setActiveChapter: s }) => {
+	let c = t(null);
+	return e(() => {
+		let e = c.current;
+		if (e) {
+			let t = new IntersectionObserver(([e]) => {
+				i(e) && s(o);
+			}, {
+				threshold: r,
+				rootMargin: "0px 0px 0px 0px"
+			});
+			return t.observe(e), () => t.unobserve(e);
+		}
+	}, [
+		c,
+		o,
+		s
+	]), /* @__PURE__ */ n("section", {
+		ref: c,
+		children: a
+	});
+};
+//#endregion
+export { a as Chapter };
+
+//# sourceMappingURL=Chapter.js.map

package/ui/Chapters/Chapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chapter.js","names":[],"sources":["../../../lib/ui/Chapters/Chapter.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useRef, type FunctionComponent, type PropsWithChildren } from 'react';\n\ninterface Props {\n  index: number;\n  setActiveChapter: (index: number) => void;\n}\n\nconst generateThreshold = () => {\n  const threshold: number[] = [];\n\n  for (let i = 0; i <= 1; i += 0.03) {\n    threshold.push(parseFloat(i.toFixed(2)));\n  }\n\n  return threshold;\n};\n\nconst THRESHOLD = generateThreshold();\n\nconst isChapterActive = (entry: IntersectionObserverEntry) => {\n  const isHalfHeightAndOneThirdVisible =\n    entry.boundingClientRect.height <= window.innerHeight / 2 &&\n    entry.intersectionRect.height > window.innerHeight / 3;\n\n  const isHalfHeightAndFullyVisible =\n    entry.boundingClientRect.height <= window.innerHeight / 2 &&\n    entry.boundingClientRect.height === entry.intersectionRect.height;\n\n  const isMoreThanHalfHeightAndHalfVisible =\n    entry.boundingClientRect.height > window.innerHeight / 2 &&\n    entry.intersectionRect.height > window.innerHeight / 2;\n\n  return (\n    isHalfHeightAndOneThirdVisible ||\n    isHalfHeightAndFullyVisible ||\n    isMoreThanHalfHeightAndHalfVisible\n  );\n};\n\nexport const Chapter: FunctionComponent<PropsWithChildren<Props>> = ({\n  children,\n  index,\n  setActiveChapter,\n}) => {\n  const element = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const current = element.current;\n\n    if (current) {\n      const observer = new IntersectionObserver(\n        ([entry]) => {\n          if (isChapterActive(entry)) {\n            setActiveChapter(index);\n          }\n        },\n        {\n          threshold: THRESHOLD,\n          rootMargin: '0px 0px 0px 0px',\n        },\n      );\n\n      observer.observe(current);\n\n      return () => observer.unobserve(current);\n    }\n  }, [element, index, setActiveChapter]);\n\n  return <section ref={element}>{children}</section>;\n};\n"],"mappings":";;;AAkBA,IAAM,WAV0B;CAC9B,IAAM,IAAsB,EAAE;AAE9B,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK,IAC3B,GAAU,KAAK,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;AAG1C,QAAO;IAG4B,EAE/B,KAAmB,MAAqC;CAC5D,IAAM,IACJ,EAAM,mBAAmB,UAAU,OAAO,cAAc,KACxD,EAAM,iBAAiB,SAAS,OAAO,cAAc,GAEjD,IACJ,EAAM,mBAAmB,UAAU,OAAO,cAAc,KACxD,EAAM,mBAAmB,WAAW,EAAM,iBAAiB,QAEvD,IACJ,EAAM,mBAAmB,SAAS,OAAO,cAAc,KACvD,EAAM,iBAAiB,SAAS,OAAO,cAAc;AAEvD,QACE,KACA,KACA;GAIS,KAAwD,EACnE,aACA,UACA,0BACI;CACJ,IAAM,IAAU,EAAuB,KAAK;AAwB5C,QAtBA,QAAgB;EACd,IAAM,IAAU,EAAQ;AAExB,MAAI,GAAS;GACX,IAAM,IAAW,IAAI,sBAClB,CAAC,OAAW;AACX,IAAI,EAAgB,EAAM,IACxB,EAAiB,EAAM;MAG3B;IACE,WAAW;IACX,YAAY;IACb,CACF;AAID,UAFA,EAAS,QAAQ,EAAQ,QAEZ,EAAS,UAAU,EAAQ;;IAEzC;EAAC;EAAS;EAAO;EAAiB,CAAC,EAE/B,kBAAC,WAAD;EAAS,KAAK;EAAU;EAAmB,CAAA"}

package/ui/Chapters/ChapterTitle.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';
+import { Heading } from '../heading/Heading';
+import { Theme } from '../types/Theme';
+interface Props {
+    className?: string;
+    hasNext?: boolean;
+    hLevel?: ComponentProps<typeof Heading>['level'];
+    index: number;
+    isActive?: boolean;
+    onClick?: () => void;
+    theme?: Theme;
+}
+export declare const ChapterTitle: FunctionComponent<PropsWithChildren<Props>>;
+export {};