@local-civics/hub-ui 0.1.249 → 0.1.251

package/dist/index.mjs

@@ -3966,7 +3966,7 @@ const MonthSelection = (props) => {
   const month = props.month;
   const previousMonth = () => props.setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1));
   const nextMonth = () => props.setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1));
-  return /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React__default.createElement("div", { className: "grow" }, /* @__PURE__ */ React__default.createElement("span", { className: "font-semibold text-md text-slate-300" }, formatDate$1(month, { month: "long" })), /* @__PURE__ */ React__default.createElement("span", { className: "text-md ml-1 text-slate-300" }, formatDate$1(month, { year: "numeric" }))), /* @__PURE__ */ React__default.createElement("div", { onClick: previousMonth, className: "cursor-pointer w-3 h-3 min-w-3 text-slate-300 hover:text-slate-500" }, /* @__PURE__ */ React__default.createElement(Icon$1, { name: "leftArrow" })), /* @__PURE__ */ React__default.createElement("div", { onClick: nextMonth, className: "cursor-pointer ml-2 w-3 h-3 min-w-3 text-slate-300 hover:text-slate-500" }, /* @__PURE__ */ React__default.createElement(Icon$1, { name: "rightArrow" })));
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React__default.createElement("div", { className: "grow" }, /* @__PURE__ */ React__default.createElement("span", { className: "font-semibold text-md text-slate-300" }, formatDate$2(month, { month: "long" })), /* @__PURE__ */ React__default.createElement("span", { className: "text-md ml-1 text-slate-300" }, formatDate$2(month, { year: "numeric" }))), /* @__PURE__ */ React__default.createElement("div", { onClick: previousMonth, className: "cursor-pointer w-3 h-3 min-w-3 text-slate-300 hover:text-slate-500" }, /* @__PURE__ */ React__default.createElement(Icon$1, { name: "leftArrow" })), /* @__PURE__ */ React__default.createElement("div", { onClick: nextMonth, className: "cursor-pointer ml-2 w-3 h-3 min-w-3 text-slate-300 hover:text-slate-500" }, /* @__PURE__ */ React__default.createElement(Icon$1, { name: "rightArrow" })));
 };
 const DaySelection = (props) => {
   const today = new Date();
@@ -4011,7 +4011,7 @@ const calend = (date) => {
 const isSameDate = (left, right) => {
   return left === right || !!(left && right) && left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
 };
-const formatDate$1 = (date, options) => {
+const formatDate$2 = (date, options) => {
   return Intl.DateTimeFormat("en-US", options).format(date);
 };
 const nextDate$1 = (date) => {
@@ -4058,9 +4058,9 @@ const EventList = (props) => {
   return /* @__PURE__ */ React__default.createElement(Widget, null, /* @__PURE__ */ React__default.createElement(WidgetHeader, { divide: true }, /* @__PURE__ */ React__default.createElement(WidgetTitle, null, /* @__PURE__ */ React__default.createElement(DateTitle, null, date)), /* @__PURE__ */ React__default.createElement(WidgetHeaderLink, { onClick: () => props.onSetDate(previousDate(date)), display: !!props.date }, /* @__PURE__ */ React__default.createElement(Icon$1, { name: "leftArrow" })), /* @__PURE__ */ React__default.createElement(WidgetHeaderLink, { onClick: () => props.onSetDate(nextDate(date)), display: !!props.date }, /* @__PURE__ */ React__default.createElement(Icon$1, { name: "rightArrow" }))), /* @__PURE__ */ React__default.createElement(WidgetBody, null, /* @__PURE__ */ React__default.createElement(Loader, { isLoading: props.isLoading }, hasChildren && /* @__PURE__ */ React__default.createElement("div", { className: "grid grid-cols-1 max-h-[30rem] overflow-auto gap-2" }, props.children), !hasChildren && /* @__PURE__ */ React__default.createElement("div", { className: "grid justify-items-center content-center h-[16rem] lg:h-[22rem]" }, /* @__PURE__ */ React__default.createElement("p", { className: "text-sm text-center align-middle leading-6 font-semibold text-slate-300" }, "No events for the day.")))));
 };
 const DateTitle = (props) => {
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", { className: "font-semibold text-3xl text-slate-600" }, formatDate(props.children, { month: "long" })), /* @__PURE__ */ React__default.createElement("span", { className: "font-semibold ml-2 text-3xl text-slate-600" }, ordNumber(props.children.getDate())), /* @__PURE__ */ React__default.createElement("span", { className: "text-3xl ml-2 text-slate-600" }, formatDate(props.children, { year: "numeric" })));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", { className: "font-semibold text-3xl text-slate-600" }, formatDate$1(props.children, { month: "long" })), /* @__PURE__ */ React__default.createElement("span", { className: "font-semibold ml-2 text-3xl text-slate-600" }, ordNumber(props.children.getDate())), /* @__PURE__ */ React__default.createElement("span", { className: "text-3xl ml-2 text-slate-600" }, formatDate$1(props.children, { year: "numeric" })));
 };
-const formatDate = (date, options) => {
+const formatDate$1 = (date, options) => {
   return Intl.DateTimeFormat("en-US", options).format(date);
 };
 const previousDate = (date) => {
@@ -7236,6 +7236,12 @@ const Comments = (props) => {
     }
   ))));
 };
+const formatDate = (iso) => {
+  const d = new Date(iso);
+  if (isNaN(d.getTime()))
+    return "";
+  return d.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+};
 const CommentCard = (props) => {
   const { comment } = props;
   const target = comment.badgeId ? {
@@ -7249,7 +7255,7 @@ const CommentCard = (props) => {
   } : { label: "General", kind: "general", onClick: void 0 };
   const needsAttention = comment.requireValidation && !comment.resolvedAt;
   const actionLabel = needsAttention && target.kind === "badge" ? "Resubmit this badge" : target.kind === "badge" ? "View this badge" : target.kind === "lesson" ? "View this lesson" : void 0;
-  return /* @__PURE__ */ React.createElement("div", { className: `rounded-2xl border bg-white p-4 ${needsAttention ? "border-gold-400/40" : "border-slate-200"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-extrabold text-dark-blue-400" }, target.label), comment.authorName && /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-[11px] text-slate-400" }, "from ", comment.authorName)), comment.requireValidation && (comment.resolvedAt ? /* @__PURE__ */ React.createElement("span", { className: "flex shrink-0 items-center gap-1 rounded-full bg-mint-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, /* @__PURE__ */ React.createElement(IconCheck, { size: 11, stroke: 3, className: "text-mint-400" }), "Resolved") : /* @__PURE__ */ React.createElement("span", { className: "shrink-0 rounded-full bg-gold-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Needs attention"))), /* @__PURE__ */ React.createElement("p", { className: "mt-2.5 text-xs text-slate-600" }, comment.commentText), actionLabel && target.onClick && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: `rounded-2xl border bg-white p-4 ${needsAttention ? "border-gold-400/40" : "border-slate-200"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-extrabold text-dark-blue-400" }, target.label), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-400" }, comment.commenterName && /* @__PURE__ */ React.createElement("span", null, "Commenter: ", comment.commenterName), comment.commenterName && comment.createdAt && /* @__PURE__ */ React.createElement("span", null, "\xB7"), comment.createdAt && /* @__PURE__ */ React.createElement("span", null, formatDate(comment.createdAt)))), comment.requireValidation && (!comment.resolvedAt ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 rounded-full bg-gold-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Needs attention") : comment.needsSubmission ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 rounded-full bg-sky-blue-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Needs submission") : /* @__PURE__ */ React.createElement("span", { className: "flex shrink-0 items-center gap-1 rounded-full bg-mint-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, /* @__PURE__ */ React.createElement(IconCheck, { size: 11, stroke: 3, className: "text-mint-400" }), "Resolved"))), /* @__PURE__ */ React.createElement("p", { className: "mt-2.5 text-xs text-slate-600" }, comment.commentText), actionLabel && target.onClick && /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",