@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/composed/rich-text-editor.js

@@ -2,7 +2,7 @@
 import { jsx as t, jsxs as b } from "react/jsx-runtime";
 import * as l from "react";
 import { N as Y, R as Z, m as ee, a as te, E as se, S as re, u as B, U as P, T as z, b as U, P as ne, H as K, c as $, d as M, L as q, I as O, M as V, e as F } from "../_chunks/tiptap.js";
-import { IconFile as ie, IconDownload as ae, IconBold as ce, IconItalic as oe, IconUnderline as le, IconStrikethrough as ue, IconHighlight as de, IconH2 as fe, IconH3 as me, IconBlockquote as he, IconList as ge, IconListNumbers as be, IconListCheck as pe, IconCode as ke, IconPhoto as xe, IconPaperclip as ve, IconLineDashed as we, IconAlignLeft as ye, IconAlignCenter as Ae, IconAlignRight as _e, IconMoodSmile as Ne, IconArrowBackUp as Ie, IconArrowForwardUp as Le, IconLink as Ce } from "@tabler/icons-react";
+import { IconFile as ie, IconDownload as ae, IconBold as oe, IconItalic as ce, IconUnderline as le, IconStrikethrough as ue, IconHighlight as de, IconH2 as fe, IconH3 as me, IconBlockquote as he, IconList as ge, IconListNumbers as be, IconListCheck as pe, IconCode as ke, IconPhoto as xe, IconPaperclip as ve, IconLineDashed as we, IconAlignLeft as ye, IconAlignCenter as Ae, IconAlignRight as _e, IconMoodSmile as Ne, IconArrowBackUp as Ie, IconArrowForwardUp as Le, IconLink as Ce } from "@tabler/icons-react";
 import { createRoot as W } from "react-dom/client";
 import { cn as p } from "../ui/lib/utils.js";
 import { useColorMode as Ee } from "../hooks/use-color-mode.js";
@@ -17,7 +17,7 @@ function Te({ node: e }) {
       href: s,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: "inline-flex items-center gap-ds-03 rounded-ds-md border border-surface-border-strong bg-surface-2 px-ds-04 py-ds-03 text-ds-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-3",
+      className: "inline-flex items-center gap-ds-03 rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-04 py-ds-03 text-ds-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-raised-hover",
       contentEditable: !1,
       children: [
         /* @__PURE__ */ t(ie, { className: "h-ico-sm w-ico-sm shrink-0 text-surface-fg-subtle" }),
@@ -56,17 +56,17 @@ const G = Y.create({
   ({ items: e, command: s }, r) => {
     const [n, a] = l.useState(0);
     return l.useEffect(() => a(0), [e]), l.useImperativeHandle(r, () => ({
-      onKeyDown: ({ event: i }) => i.key === "ArrowUp" ? (a((o) => (o + e.length - 1) % e.length), !0) : i.key === "ArrowDown" ? (a((o) => (o + 1) % e.length), !0) : i.key === "Enter" ? (e[n] && s(e[n]), !0) : !1
-    })), e.length ? /* @__PURE__ */ t("div", { role: "listbox", "aria-label": "Mention suggestions", className: "z-popover overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-1 shadow-02", children: e.map((i, o) => /* @__PURE__ */ b(
+      onKeyDown: ({ event: i }) => i.key === "ArrowUp" ? (a((c) => (c + e.length - 1) % e.length), !0) : i.key === "ArrowDown" ? (a((c) => (c + 1) % e.length), !0) : i.key === "Enter" ? (e[n] && s(e[n]), !0) : !1
+    })), e.length ? /* @__PURE__ */ t("div", { role: "listbox", "aria-label": "Mention suggestions", className: "z-popover overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: e.map((i, c) => /* @__PURE__ */ b(
       "button",
       {
         type: "button",
         role: "option",
-        "aria-selected": o === n,
+        "aria-selected": c === n,
         onClick: () => s(i),
         className: p(
           "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
-          o === n ? "bg-surface-2 text-surface-fg" : "text-surface-fg-muted hover:bg-surface-2"
+          c === n ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
         ),
         children: [
           i.avatar ? /* @__PURE__ */ t("img", { src: i.avatar, alt: "", className: "h-ico-md w-ico-md rounded-ds-full object-cover" }) : /* @__PURE__ */ t("span", { className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-accent-2 text-[10px] font-semibold text-accent-11", children: i.label.charAt(0).toUpperCase() }),
@@ -83,9 +83,9 @@ function He(e) {
     let s = null, r = null, n = null;
     return {
       onStart: (a) => {
-        var o;
+        var c;
         r = document.createElement("div"), r.style.position = "absolute", r.style.zIndex = "1400";
-        const i = (o = a.clientRect) == null ? void 0 : o.call(a);
+        const i = (c = a.clientRect) == null ? void 0 : c.call(a);
         i && (r.style.left = `${i.left}px`, r.style.top = `${i.bottom + 4}px`), document.body.appendChild(r), s = W(r), s.render(
           /* @__PURE__ */ t(
             T,
@@ -102,9 +102,9 @@ function He(e) {
         );
       },
       onUpdate: (a) => {
-        var o;
+        var c;
         if (!s || !r) return;
-        const i = (o = a.clientRect) == null ? void 0 : o.call(a);
+        const i = (c = a.clientRect) == null ? void 0 : c.call(a);
         i && (r.style.left = `${i.left}px`, r.style.top = `${i.bottom + 4}px`), s.render(
           /* @__PURE__ */ t(
             T,
@@ -144,17 +144,17 @@ const H = l.forwardRef(
   ({ items: e, command: s }, r) => {
     const [n, a] = l.useState(0);
     return l.useEffect(() => a(0), [e]), l.useImperativeHandle(r, () => ({
-      onKeyDown: ({ event: i }) => i.key === "ArrowUp" ? (a((o) => (o + e.length - 1) % e.length), !0) : i.key === "ArrowDown" ? (a((o) => (o + 1) % e.length), !0) : i.key === "Enter" ? (e[n] && s(e[n]), !0) : !1
-    })), e.length ? /* @__PURE__ */ t("div", { role: "listbox", "aria-label": "Emoji suggestions", className: "z-popover max-h-[200px] overflow-x-hidden overflow-y-auto rounded-ds-md border border-surface-border-strong bg-surface-1 shadow-02", children: e.map((i, o) => /* @__PURE__ */ b(
+      onKeyDown: ({ event: i }) => i.key === "ArrowUp" ? (a((c) => (c + e.length - 1) % e.length), !0) : i.key === "ArrowDown" ? (a((c) => (c + 1) % e.length), !0) : i.key === "Enter" ? (e[n] && s(e[n]), !0) : !1
+    })), e.length ? /* @__PURE__ */ t("div", { role: "listbox", "aria-label": "Emoji suggestions", className: "z-popover max-h-[200px] overflow-x-hidden overflow-y-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: e.map((i, c) => /* @__PURE__ */ b(
       "button",
       {
         type: "button",
         role: "option",
-        "aria-selected": o === n,
+        "aria-selected": c === n,
         onClick: () => s(i),
         className: p(
           "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
-          o === n ? "bg-surface-2 text-surface-fg" : "text-surface-fg-muted hover:bg-surface-2"
+          c === n ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
         ),
         children: [
           /* @__PURE__ */ t("span", { className: "text-ds-base", children: i.native }),
@@ -182,11 +182,11 @@ function je() {
           /* @__PURE__ */ t(
             H,
             {
-              ref: (o) => {
-                r = o;
+              ref: (c) => {
+                r = c;
               },
               items: n.items,
-              command: (o) => n.command(o)
+              command: (c) => n.command(c)
             }
           )
         );
@@ -199,11 +199,11 @@ function je() {
           /* @__PURE__ */ t(
             H,
             {
-              ref: (o) => {
-                r = o;
+              ref: (c) => {
+                r = c;
               },
               items: n.items,
-              command: (o) => n.command(o)
+              command: (c) => n.command(c)
             }
           )
         );
@@ -243,8 +243,8 @@ const De = se.create({
   "[&_p]:mb-ds-02b [&_p]:text-surface-fg-muted",
   "[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal",
   "[&_li]:text-surface-fg-muted",
-  "[&_code]:rounded [&_code]:bg-surface-2 [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-accent-11",
-  "[&_pre]:rounded-ds-lg [&_pre]:bg-surface-2 [&_pre]:p-ds-04",
+  "[&_code]:rounded [&_code]:bg-surface-raised [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-accent-11",
+  "[&_pre]:rounded-ds-lg [&_pre]:bg-surface-raised [&_pre]:p-ds-04",
   "[&_strong]:font-semibold [&_strong]:text-surface-fg",
   "[&_blockquote]:border-l-[3px] [&_blockquote]:border-accent-6 [&_blockquote]:pl-ds-04 [&_blockquote]:italic [&_blockquote]:text-surface-fg-subtle",
   "[&_mark]:rounded-sm [&_mark]:bg-warning-3 [&_mark]:px-[2px]",
@@ -271,16 +271,16 @@ function d({
       "aria-pressed": s,
       className: p(
         "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md transition-colors duration-fast-01 ease-productive-standard",
-        "hover:bg-surface-3",
+        "hover:bg-surface-raised-hover",
         "disabled:pointer-events-none disabled:opacity-action-disabled",
-        s ? "bg-surface-3 text-accent-11" : "text-surface-fg-subtle"
+        s ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle"
       ),
       children: a
     }
   );
 }
 function Be({ editor: e }) {
-  const [s, r] = l.useState(!1), [n, a] = l.useState(""), i = l.useRef(null), o = () => {
+  const [s, r] = l.useState(!1), [n, a] = l.useState(""), i = l.useRef(null), c = () => {
     if (e.isActive("link")) {
       e.chain().focus().unsetLink().run();
       return;
@@ -296,13 +296,13 @@ function Be({ editor: e }) {
     h.key === "Escape" && (r(!1), a(""), e.commands.focus());
   };
   return /* @__PURE__ */ b("div", { className: "relative", children: [
-    /* @__PURE__ */ t(d, { onClick: o, isActive: e.isActive("link"), title: "Link", children: /* @__PURE__ */ t(Ce, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ t(d, { onClick: c, isActive: e.isActive("link"), title: "Link", children: /* @__PURE__ */ t(Ce, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
     s && /* @__PURE__ */ b(
       "form",
       {
         onSubmit: m,
         "aria-label": "Edit link URL",
-        className: "absolute left-0 top-full z-popover mt-ds-01 flex items-center gap-ds-02 rounded-ds-md border border-surface-border-strong bg-surface-1 p-ds-02 shadow-02",
+        className: "absolute left-0 top-full z-popover mt-ds-01 flex items-center gap-ds-02 rounded-ds-md border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-raised-hover",
         children: [
           /* @__PURE__ */ t(
             "input",
@@ -313,7 +313,7 @@ function Be({ editor: e }) {
               onChange: (h) => a(h.target.value),
               onKeyDown: k,
               placeholder: "https://...",
-              className: "h-ds-sm w-[240px] rounded-ds-sm border border-surface-border-strong bg-surface-1 px-ds-03 text-ds-sm text-surface-fg focus:border-accent-7 focus:outline-none"
+              className: "h-ds-sm w-[240px] rounded-ds-sm border border-surface-border-strong bg-surface-overlay px-ds-03 text-ds-sm text-surface-fg focus:border-accent-7 focus:outline-none"
             }
           ),
           /* @__PURE__ */ t("button", { type: "submit", className: "h-ds-sm rounded-ds-sm bg-accent-9 px-ds-03 text-ds-sm text-accent-fg hover:bg-accent-10", children: "Apply" })
@@ -327,8 +327,8 @@ function x() {
 }
 function Pe({ editor: e, onImageClick: s, onFileClick: r, onEmojiClick: n }) {
   return /* @__PURE__ */ b("div", { className: "flex flex-wrap items-center gap-ds-01 border-b border-surface-border-strong px-ds-04 py-ds-02b", children: [
-    /* @__PURE__ */ t(d, { onClick: () => e.chain().focus().toggleBold().run(), isActive: e.isActive("bold"), title: "Bold", children: /* @__PURE__ */ t(ce, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
-    /* @__PURE__ */ t(d, { onClick: () => e.chain().focus().toggleItalic().run(), isActive: e.isActive("italic"), title: "Italic", children: /* @__PURE__ */ t(oe, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ t(d, { onClick: () => e.chain().focus().toggleBold().run(), isActive: e.isActive("bold"), title: "Bold", children: /* @__PURE__ */ t(oe, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ t(d, { onClick: () => e.chain().focus().toggleItalic().run(), isActive: e.isActive("italic"), title: "Italic", children: /* @__PURE__ */ t(ce, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
     /* @__PURE__ */ t(d, { onClick: () => e.chain().focus().toggleUnderline().run(), isActive: e.isActive("underline"), title: "Underline", children: /* @__PURE__ */ t(le, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
     /* @__PURE__ */ t(d, { onClick: () => e.chain().focus().toggleStrike().run(), isActive: e.isActive("strike"), title: "Strikethrough", children: /* @__PURE__ */ t(ue, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
     /* @__PURE__ */ t(d, { onClick: () => e.chain().focus().toggleHighlight().run(), isActive: e.isActive("highlight"), title: "Highlight", children: /* @__PURE__ */ t(de, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
@@ -362,7 +362,7 @@ function Ue({ onSelect: e }) {
   l.useEffect(() => {
     import("@emoji-mart/data").then((i) => r(i.default));
   }, []);
-  const a = /* @__PURE__ */ t("div", { className: "flex h-[350px] w-[352px] items-center justify-center rounded-ds-lg border border-surface-border-strong bg-surface-1 shadow-02", children: /* @__PURE__ */ t("span", { className: "text-ds-sm text-surface-fg-subtle", children: "Loading..." }) });
+  const a = /* @__PURE__ */ t("div", { className: "flex h-[350px] w-[352px] items-center justify-center rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: /* @__PURE__ */ t("span", { className: "text-ds-sm text-surface-fg-subtle", children: "Loading..." }) });
   return s ? /* @__PURE__ */ t(l.Suspense, { fallback: a, children: /* @__PURE__ */ t(
     ze,
     {
@@ -381,29 +381,29 @@ const Ke = l.forwardRef(
     onChange: n,
     className: a,
     editable: i = !0,
-    onImageUpload: o,
+    onImageUpload: c,
     onFileUpload: m,
     mentions: k,
     onMentionSearch: h,
     onMentionSelect: v,
     ...Q
   }, X) {
-    const N = l.useRef(null), I = l.useRef(!1), [L, w] = l.useState(!1), C = l.useRef(null), S = l.useRef(null), j = l.useRef(null), E = async (c) => {
+    const N = l.useRef(null), I = l.useRef(!1), [L, w] = l.useState(!1), C = l.useRef(null), S = l.useRef(null), j = l.useRef(null), E = async (o) => {
       const f = N.current;
       if (f)
-        if (o) {
-          const u = await o(c);
+        if (c) {
+          const u = await c(o);
           u && /^https?:\/\//i.test(u) && f.chain().focus().setImage({ src: u }).run();
         } else {
           const u = new FileReader();
           u.onload = () => {
             f.chain().focus().setImage({ src: u.result }).run();
-          }, u.readAsDataURL(c);
+          }, u.readAsDataURL(o);
         }
-    }, R = async (c) => {
+    }, R = async (o) => {
       const f = N.current;
       if (!f || !m) return;
-      const u = await m(c);
+      const u = await m(o);
       f.chain().focus().insertContent({
         type: "fileAttachment",
         attrs: { url: u.url, name: u.name, size: u.size }
@@ -425,7 +425,7 @@ const Ke = l.forwardRef(
         q.configure({
           openOnClick: !1,
           protocols: ["http", "https", "mailto"],
-          validate: (c) => /^(https?:\/\/|mailto:)/i.test(c),
+          validate: (o) => /^(https?:\/\/|mailto:)/i.test(o),
           HTMLAttributes: {
             rel: "noopener noreferrer",
             target: "_blank"
@@ -442,7 +442,7 @@ const Ke = l.forwardRef(
           V.configure({
             HTMLAttributes: { class: "mention" },
             suggestion: {
-              items: async ({ query: c }) => h ? await h(c) : k ? k.filter((f) => f.label.toLowerCase().includes(c.toLowerCase())).slice(0, 8) : [],
+              items: async ({ query: o }) => h ? await h(o) : k ? k.filter((f) => f.label.toLowerCase().includes(o.toLowerCase())).slice(0, 8) : [],
               render: He(v)
             }
           })
@@ -452,13 +452,13 @@ const Ke = l.forwardRef(
       content: s,
       editable: i,
       editorProps: {
-        handleDrop: (c, f, u, y) => {
+        handleDrop: (o, f, u, y) => {
           var D;
           if (y || !((D = f.dataTransfer) != null && D.files.length)) return !1;
           const A = f.dataTransfer.files[0];
           return A ? A.type.startsWith("image/") ? (E(A), !0) : m ? (R(A), !0) : !1 : !1;
         },
-        handlePaste: (c, f) => {
+        handlePaste: (o, f) => {
           var y;
           const u = (y = f.clipboardData) == null ? void 0 : y.files[0];
           return u ? u.type.startsWith("image/") ? (E(u), !0) : m ? (R(u), !0) : !1 : !1;
@@ -471,8 +471,8 @@ const Ke = l.forwardRef(
           )
         }
       },
-      onUpdate: ({ editor: c }) => {
-        I.current = !0, n == null || n(c.getHTML()), queueMicrotask(() => {
+      onUpdate: ({ editor: o }) => {
+        I.current = !0, n == null || n(o.getHTML()), queueMicrotask(() => {
           I.current = !1;
         });
       }
@@ -481,10 +481,10 @@ const Ke = l.forwardRef(
       N.current = g;
     }, [g]), l.useEffect(() => {
       if (!L) return;
-      const c = (f) => {
+      const o = (f) => {
         C.current && !C.current.contains(f.target) && w(!1);
       };
-      return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
+      return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
     }, [L]), l.useEffect(() => {
       I.current || g && s !== g.getHTML() && g.commands.setContent(s, !1);
     }, [g, s]), g ? /* @__PURE__ */ b("div", { ref: X, ...Q, className: p("relative", a), children: [
@@ -493,14 +493,14 @@ const Ke = l.forwardRef(
         {
           ref: C,
           className: "absolute bottom-full right-0 z-popover mb-ds-02",
-          onKeyDown: (c) => {
-            c.key === "Escape" && (c.stopPropagation(), w(!1));
+          onKeyDown: (o) => {
+            o.key === "Escape" && (o.stopPropagation(), w(!1));
           },
           children: /* @__PURE__ */ t(
             Ue,
             {
-              onSelect: (c) => {
-                g.chain().focus().insertContent(c).run(), w(!1);
+              onSelect: (o) => {
+                g.chain().focus().insertContent(o).run(), w(!1);
               }
             }
           )
@@ -510,7 +510,7 @@ const Ke = l.forwardRef(
         "div",
         {
           className: p(
-            "overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-2",
+            "overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-raised",
             "transition-colors ease-productive-standard focus-within:border-surface-border-strong"
           ),
           children: [
@@ -522,10 +522,10 @@ const Ke = l.forwardRef(
                 accept: "image/*",
                 "aria-label": "Upload image",
                 className: "hidden",
-                onChange: (c) => {
+                onChange: (o) => {
                   var u;
-                  const f = (u = c.target.files) == null ? void 0 : u[0];
-                  f && E(f), c.target.value = "";
+                  const f = (u = o.target.files) == null ? void 0 : u[0];
+                  f && E(f), o.target.value = "";
                 }
               }
             ),
@@ -536,10 +536,10 @@ const Ke = l.forwardRef(
                 type: "file",
                 "aria-label": "Upload file",
                 className: "hidden",
-                onChange: (c) => {
+                onChange: (o) => {
                   var u;
-                  const f = (u = c.target.files) == null ? void 0 : u[0];
-                  f && R(f), c.target.value = "";
+                  const f = (u = o.target.files) == null ? void 0 : u[0];
+                  f && R(f), o.target.value = "";
                 }
               }
             ),
@@ -548,14 +548,14 @@ const Ke = l.forwardRef(
               {
                 editor: g,
                 onImageClick: () => {
-                  var c;
-                  return (c = S.current) == null ? void 0 : c.click();
+                  var o;
+                  return (o = S.current) == null ? void 0 : o.click();
                 },
                 onFileClick: m ? () => {
-                  var c;
-                  return (c = j.current) == null ? void 0 : c.click();
+                  var o;
+                  return (o = j.current) == null ? void 0 : o.click();
                 } : void 0,
-                onEmojiClick: () => w((c) => !c)
+                onEmojiClick: () => w((o) => !o)
               }
             ),
             /* @__PURE__ */ t(F, { editor: g })
@@ -581,7 +581,7 @@ const $e = l.forwardRef(
         q.configure({
           openOnClick: !0,
           protocols: ["http", "https", "mailto"],
-          validate: (o) => /^(https?:\/\/|mailto:)/i.test(o),
+          validate: (c) => /^(https?:\/\/|mailto:)/i.test(c),
           HTMLAttributes: {
             rel: "noopener noreferrer",
             target: "_blank"

package/dist/composed/schedule-view.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as w, jsx as a } from "react/jsx-runtime";
+import { jsxs as w, jsx as n } from "react/jsx-runtime";
 import * as $ from "react";
 import { startOfWeek as S, addDays as E, format as u, isSameDay as I, isToday as D, getHours as N, getMinutes as v, differenceInMinutes as A } from "date-fns";
 import { cn as x } from "../ui/lib/utils.js";
@@ -10,7 +10,7 @@ const P = {
   warning: "bg-warning-3 border-warning-7 text-warning-11",
   error: "bg-error-3 border-error-7 text-error-11",
   info: "bg-info-3 border-info-7 text-info-11",
-  neutral: "bg-surface-2 border-surface-border-strong text-surface-fg-muted"
+  neutral: "bg-surface-raised border-surface-border-strong text-surface-fg-muted"
 };
 function T(r) {
   return r === 0 ? "12 AM" : r < 12 ? `${r} AM` : r === 12 ? "12 PM" : `${r - 12} PM`;
@@ -27,12 +27,12 @@ function j({ startHour: r, endHour: s }) {
   for (let t = r; t < s; t++)
     o.push(t);
   const d = 100 / (s - r);
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ n(
     "div",
     {
       className: "relative shrink-0 w-[60px] border-r border-surface-border-strong",
       "aria-hidden": "true",
-      children: o.map((t) => /* @__PURE__ */ a(
+      children: o.map((t) => /* @__PURE__ */ n(
         "div",
         {
           className: "text-ds-xs text-surface-fg-muted pr-ds-02 text-right",
@@ -56,72 +56,72 @@ function R({
 }) {
   const y = s.filter((e) => I(e.start, r)), p = (d - o) * 60, h = p / t, b = [];
   for (let e = 0; e < h; e++) {
-    const n = new Date(r);
-    n.setHours(o, e * t, 0, 0);
-    const f = new Date(n);
-    f.setMinutes(f.getMinutes() + t), b.push({ start: n, end: f });
+    const a = new Date(r);
+    a.setHours(o, e * t, 0, 0);
+    const f = new Date(a);
+    f.setMinutes(f.getMinutes() + t), b.push({ start: a, end: f });
   }
   const l = D(r);
   let g = null;
   if (l) {
-    const e = /* @__PURE__ */ new Date(), n = N(e), f = v(e);
-    n >= o && n < d && (g = ((n - o) * 60 + f) / p * 100);
+    const e = /* @__PURE__ */ new Date(), a = N(e), f = v(e);
+    a >= o && a < d && (g = ((a - o) * 60 + f) / p * 100);
   }
   return /* @__PURE__ */ w("div", { className: "flex flex-1 flex-col min-w-[80px]", children: [
-    m && /* @__PURE__ */ a(
+    m && /* @__PURE__ */ n(
       "div",
       {
         className: x(
           "text-center text-ds-sm font-semibold py-ds-02 border-b border-surface-border-strong",
-          l ? "text-accent-11 bg-accent-2" : "text-surface-fg bg-surface-2"
+          l ? "text-accent-11 bg-accent-2" : "text-surface-fg bg-surface-raised"
         ),
         children: u(r, "EEE d")
       }
     ),
     /* @__PURE__ */ w("div", { className: "relative flex-1", children: [
-      b.map((e, n) => /* @__PURE__ */ a(
+      b.map((e, a) => /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           className: x(
-            "block w-full border-b border-surface-border hover:bg-surface-3 transition-colors ease-productive-standard",
-            n % 2 === 0 ? "border-surface-border-strong" : "border-surface-3"
+            "block w-full border-b border-surface-border hover:bg-surface-raised-hover transition-colors ease-productive-standard",
+            a % 2 === 0 ? "border-surface-border-strong" : "border-surface-border-subtle"
           ),
           style: { height: `${100 / h}%` },
           onClick: () => c == null ? void 0 : c(e.start, e.end),
           "aria-label": `${u(e.start, "h:mm a")} to ${u(e.end, "h:mm a")}`
         },
-        n
+        a
       )),
       y.map((e) => {
-        const n = V(e, o, d), f = P[e.color ?? "primary"];
-        return /* @__PURE__ */ a(
+        const a = V(e, o, d), f = P[e.color ?? "primary"];
+        return /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             className: x(
               "absolute left-ds-01 right-ds-01 rounded-ds-sm border-l-[3px] px-ds-02 py-ds-01",
               "text-left text-ds-xs font-medium overflow-hidden cursor-pointer",
-              "hover:shadow-01 hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard",
+              "hover:shadow-raised hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard",
               f
             ),
-            style: n,
+            style: a,
             onClick: (M) => {
               M.stopPropagation(), i == null || i(e);
             },
             "aria-label": `${e.title}, ${u(e.start, "h:mm a")} to ${u(e.end, "h:mm a")}`,
-            children: /* @__PURE__ */ a("span", { className: "line-clamp-2", children: e.title })
+            children: /* @__PURE__ */ n("span", { className: "line-clamp-2", children: e.title })
           },
           e.id
         );
       }),
-      g != null && /* @__PURE__ */ a(
+      g != null && /* @__PURE__ */ n(
         "div",
         {
           className: "absolute left-0 right-0 h-[2px] bg-error-9 z-10 pointer-events-none",
           style: { top: `${g}%` },
           "aria-hidden": "true",
-          children: /* @__PURE__ */ a(
+          children: /* @__PURE__ */ n(
             O.span,
             {
               className: "absolute -left-[5px] -top-[4px] h-[10px] w-[10px] rounded-ds-full bg-error-9",
@@ -159,14 +159,14 @@ const W = $.forwardRef(
         role: "region",
         "aria-label": r === "day" ? `Schedule for ${u(s, "EEEE, MMMM d, yyyy")}` : `Week schedule starting ${u(b[0], "MMMM d, yyyy")}`,
         className: x(
-          "flex rounded-ds-md border border-surface-border-strong bg-surface-2 overflow-hidden",
+          "flex rounded-ds-md border border-surface-border-strong bg-surface-raised overflow-hidden",
           "h-[480px]",
           y
         ),
         ...p,
         children: [
-          /* @__PURE__ */ a(j, { startHour: i, endHour: c }),
-          /* @__PURE__ */ a("div", { className: "flex flex-1 divide-x divide-surface-border overflow-x-auto", children: b.map((l) => /* @__PURE__ */ a(
+          /* @__PURE__ */ n(j, { startHour: i, endHour: c }),
+          /* @__PURE__ */ n("div", { className: "flex flex-1 divide-x divide-surface-border overflow-x-auto", children: b.map((l) => /* @__PURE__ */ n(
             R,
             {
               date: l,

package/dist/composed/status-badge.js

@@ -16,15 +16,15 @@ const b = C(
         rejected: "bg-error-3 text-error-11",
         completed: "bg-success-3 text-success-11",
         blocked: "bg-error-3 text-error-11",
-        cancelled: "bg-surface-2 text-surface-fg-subtle",
-        draft: "bg-surface-2 text-surface-fg-subtle"
+        cancelled: "bg-surface-raised text-surface-fg-subtle",
+        draft: "bg-surface-raised text-surface-fg-subtle"
       },
       color: {
         success: "bg-success-3 text-success-11",
         warning: "bg-warning-3 text-warning-11",
         error: "bg-error-3 text-error-11",
         info: "bg-info-3 text-info-11",
-        neutral: "bg-surface-2 text-surface-fg-subtle"
+        neutral: "bg-surface-raised text-surface-fg-subtle"
       },
       size: {
         sm: "px-ds-03 py-ds-01 text-ds-xs font-semibold",
@@ -51,7 +51,7 @@ const b = C(
   info: "bg-info-9",
   neutral: "bg-surface-fg-subtle"
 }, f = { duration: 0.3, ease: "easeOut" }, A = v.forwardRef(
-  ({ status: m, color: s, size: t, label: n, hideDot: c = !1, className: o, ...i }, d) => {
+  ({ status: m, color: s, size: t, label: n, hideDot: c = !1, className: i, ...o }, d) => {
     if (s != null) {
       const h = n ?? s.charAt(0).toUpperCase() + s.slice(1), y = k[s];
       return /* @__PURE__ */ a(l, { mode: "wait", children: /* @__PURE__ */ u(
@@ -64,9 +64,9 @@ const b = C(
           transition: f,
           className: r(
             b({ color: s, size: t }),
-            o
+            i
           ),
-          ...g(i),
+          ...g(o),
           children: [
             !c && /* @__PURE__ */ a(
               "span",
@@ -96,9 +96,9 @@ const b = C(
         transition: f,
         className: r(
           b({ status: e, size: t }),
-          o
+          i
         ),
-        ...g(i),
+        ...g(o),
         children: [
           !c && /* @__PURE__ */ a(
             "span",

package/dist/shell/bottom-navbar.js

@@ -86,7 +86,7 @@ const L = w.forwardRef(
                 animate: { y: 0 },
                 exit: { y: "100%" },
                 transition: d.smooth,
-                className: "absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-surface-border-strong bg-surface-2 p-ds-05 pb-ds-03",
+                className: "absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-surface-border-strong bg-surface-overlay p-ds-05 pb-ds-03",
                 onClick: (e) => e.stopPropagation(),
                 onKeyDown: (e) => e.stopPropagation(),
                 children: [
@@ -97,7 +97,7 @@ const L = w.forwardRef(
                       {
                         onClick: () => f(!1),
                         "aria-label": "Close more menu",
-                        className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-surface-3",
+                        className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-surface-raised-hover",
                         children: /* @__PURE__ */ s(k, { className: "h-ico-sm w-ico-sm text-surface-fg-muted", "aria-hidden": "true" })
                       }
                     )
@@ -109,7 +109,7 @@ const L = w.forwardRef(
                       onClick: () => f(!1),
                       className: l(
                         "flex flex-col items-center gap-ds-02b rounded-ds-xl p-ds-04 text-ds-sm transition-colors ease-productive-standard",
-                        m(e.href, e.exact) ? "bg-surface-3 text-accent-11" : "text-surface-fg-subtle hover:bg-surface-3"
+                        m(e.href, e.exact) ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle hover:bg-surface-raised-hover"
                       ),
                       children: [
                         /* @__PURE__ */ s("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md", children: e.icon }),
@@ -131,7 +131,7 @@ const L = w.forwardRef(
           ref: b,
           "aria-label": "Mobile navigation",
           className: l(
-            "fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-2 px-ds-05 pb-ds-05b pt-0 md:hidden",
+            "fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-sunken px-ds-05 pb-ds-05b pt-0 md:hidden",
             h
           ),
           children: [