@wealthx/shadcn 1.5.32 → 1.5.34

package/dist/{chunk-KI57CBJR.mjs → chunk-DQNNP6I4.mjs}

@@ -131,31 +131,40 @@ function ClientSearch({
     ] }) })
   ] });
 }
+var FMT_CALL = {
+  value: "call",
+  label: "Call",
+  icon: /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" })
+};
+var FMT_ONLINE = {
+  value: "online",
+  label: "Online Meeting",
+  icon: /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" })
+};
+var FMT_GOOGLE_MEET = {
+  value: "google-meet",
+  label: "Google Meet",
+  icon: /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" })
+};
+var FMT_MS_TEAMS = {
+  value: "microsoft-teams",
+  label: "MS Teams",
+  icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" })
+};
+var FMT_OFFLINE = {
+  value: "offline",
+  label: "Offline Meeting",
+  icon: /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4" })
+};
 function getFormatOptions(platform) {
-  const call = {
-    value: "call",
-    label: "Call",
-    icon: /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" })
-  };
-  const googleMeet = {
-    value: "google-meet",
-    label: "Google Meet",
-    icon: /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" })
-  };
-  const msTeams = {
-    value: "microsoft-teams",
-    label: "MS Teams",
-    icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" })
-  };
-  const offline = {
-    value: "offline",
-    label: "Offline Meeting",
-    icon: /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4" })
-  };
-  if (platform === "google-meet") return [call, googleMeet, offline];
-  if (platform === "microsoft-teams") return [call, msTeams, offline];
-  if (platform === "any") return [call, googleMeet, msTeams, offline];
-  return [call, offline];
+  if (platform === "online") return [FMT_CALL, FMT_ONLINE, FMT_OFFLINE];
+  if (platform === "google-meet")
+    return [FMT_CALL, FMT_GOOGLE_MEET, FMT_OFFLINE];
+  if (platform === "microsoft-teams")
+    return [FMT_CALL, FMT_MS_TEAMS, FMT_OFFLINE];
+  if (platform === "any")
+    return [FMT_CALL, FMT_GOOGLE_MEET, FMT_MS_TEAMS, FMT_OFFLINE];
+  return [FMT_CALL, FMT_OFFLINE];
 }
 function MeetingFormatSection({
   format,

package/dist/{chunk-RSEVIQEO.mjs → chunk-E432NK23.mjs}

@@ -27,8 +27,8 @@ import {
   ChevronRight,
   Info,
   LogOut,
-  PanelLeftClose,
-  PanelLeftOpen
+  Pin,
+  PinOff
 } from "lucide-react";
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -230,42 +230,53 @@ function CollapsibleNavItem({
 function SidebarNav({
   items,
   userName = "Anonymous User",
-  collapsed = false,
   logo,
   logoCollapsed,
   metricsGroups,
   onNavigate,
   onLogout,
-  onCollapsedChange,
+  defaultLocked = false,
+  onLockedChange,
   className
 }) {
+  const [isLocked, setIsLocked] = React.useState(defaultLocked);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const isExpanded = isLocked || isHovered;
   const [userMenuOpen, setUserMenuOpen] = React.useState(false);
   const navScrollRef = React.useRef(null);
   const expandedScrollRef = React.useRef(0);
+  const handleLockToggle = () => {
+    const next = !isLocked;
+    setIsLocked(next);
+    onLockedChange == null ? void 0 : onLockedChange(next);
+  };
   React.useEffect(() => {
-    if (collapsed) setUserMenuOpen(false);
-  }, [collapsed]);
+    if (!isExpanded) setUserMenuOpen(false);
+  }, [isExpanded]);
   React.useLayoutEffect(() => {
     const nav = navScrollRef.current;
     if (!nav) return;
-    if (!collapsed) {
+    if (isExpanded) {
       nav.scrollTop = expandedScrollRef.current;
     }
     return () => {
-      if (!collapsed && nav) {
+      if (isExpanded && nav) {
         expandedScrollRef.current = nav.scrollTop;
       }
     };
-  }, [collapsed]);
+  }, [isExpanded]);
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
     "nav",
     {
       "data-slot": "sidebar-nav",
-      "data-collapsed": collapsed,
+      "data-expanded": isExpanded,
+      "data-locked": isLocked,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
       className: cn(
         "flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
         "transition-all duration-200 ease-in-out",
-        collapsed ? "w-14" : "w-[279px]",
+        isExpanded ? "w-[279px]" : "w-14",
         className
       ),
       children: [
@@ -277,7 +288,7 @@ function SidebarNav({
               alt: "Logo",
               className: cn(
                 "h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
-                collapsed ? "opacity-0" : "opacity-100"
+                !isExpanded ? "opacity-0" : "opacity-100"
               )
             }
           ),
@@ -288,7 +299,7 @@ function SidebarNav({
               alt: "Logo",
               className: cn(
                 "absolute inset-y-0 left-0 right-0 m-auto h-8 w-8 object-contain transition-opacity duration-200",
-                collapsed ? "opacity-100" : "opacity-0"
+                !isExpanded ? "opacity-100" : "opacity-0"
               )
             }
           )
@@ -298,7 +309,7 @@ function SidebarNav({
             "div",
             {
               className: cn(
-                collapsed ? "opacity-0 pointer-events-none" : "opacity-100"
+                !isExpanded ? "opacity-0 pointer-events-none" : "opacity-100"
               ),
               children: /* @__PURE__ */ jsx(
                 Accordion,
@@ -355,12 +366,12 @@ function SidebarNav({
               )
             }
           ),
-          /* @__PURE__ */ jsx(NavTooltip, { label: userName, collapsed, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(NavTooltip, { label: userName, collapsed: !isExpanded, children: /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
                 "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
-                collapsed ? "opacity-100" : "opacity-0 pointer-events-none"
+                !isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
               ),
               children: /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground", children: getInitials(userName) })
             }
@@ -369,7 +380,7 @@ function SidebarNav({
         !!(metricsGroups == null ? void 0 : metricsGroups.length) && /* @__PURE__ */ jsx(
           Accordion,
           {
-            value: !collapsed ? ["metrics"] : [],
+            value: isExpanded ? ["metrics"] : [],
             onValueChange: () => {
             },
             children: /* @__PURE__ */ jsx(AccordionItem, { className: "border-none", value: "metrics", children: /* @__PURE__ */ jsx(AccordionContent, { className: "p-0 text-inherit", children: metricsGroups.map((group, i) => /* @__PURE__ */ jsx(MetricsGroup, { group }, i)) }) })
@@ -380,7 +391,7 @@ function SidebarNav({
             CollapsibleNavItem,
             {
               item,
-              collapsed,
+              collapsed: !isExpanded,
               onNavigate
             },
             item.href
@@ -388,45 +399,39 @@ function SidebarNav({
             SidebarNavItemView,
             {
               item,
-              collapsed,
+              collapsed: !isExpanded,
               onNavigate
             },
             item.href
           )
         ) }),
-        onCollapsedChange && /* @__PURE__ */ jsx("div", { className: "mt-auto border-t border-white/15 bg-white/8", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "mt-auto border-t border-white/15 bg-white/10", children: /* @__PURE__ */ jsx(
           NavTooltip,
           {
-            label: collapsed ? "Expand" : "Collapse",
-            collapsed,
+            label: isLocked ? "Unpin sidebar" : "Pin sidebar open",
+            collapsed: !isExpanded,
             children: /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
                 variant: "ghost",
-                onClick: () => onCollapsedChange(!collapsed),
+                onClick: handleLockToggle,
                 className: cn(
-                  "h-12 w-full justify-start gap-3 px-3 py-3 transition-colors",
+                  "h-12 w-full items-center gap-3 py-3 transition-colors",
                   "text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
-                  collapsed && "justify-center px-2"
+                  isExpanded ? "justify-start px-3" : "justify-center px-2",
+                  isLocked && "text-primary"
                 ),
                 children: [
-                  collapsed ? /* @__PURE__ */ jsx(
-                    PanelLeftOpen,
+                  isLocked ? /* @__PURE__ */ jsx(Pin, { size: 24, strokeWidth: 1.75, className: "shrink-0" }) : /* @__PURE__ */ jsx(
+                    PinOff,
                     {
                       size: 24,
                       strokeWidth: 1.75,
-                      className: "shrink-0"
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    PanelLeftClose,
-                    {
-                      size: 24,
-                      strokeWidth: 1.75,
-                      className: "shrink-0"
+                      className: "shrink-0 opacity-60"
                     }
                   ),
-                  !collapsed && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Collapse" })
+                  isExpanded && /* @__PURE__ */ jsx("span", { className: "text-sm", children: isLocked ? "Pinned" : "Pin sidebar" })
                 ]
               }
             )

package/dist/{chunk-AE4JKISB.mjs → chunk-EEI4FLEE.mjs}

@@ -41,7 +41,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-HB5BKRMH.mjs";
+} from "./chunk-F3CU6KEI.mjs";
 import {
   ToggleGroup,
   ToggleGroupItem

package/dist/{chunk-IEQX4UVP.mjs → chunk-EY36WDCF.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-I4KVSZCH.mjs";
 import {
   ColorPicker
-} from "./chunk-IW33VLL5.mjs";
+} from "./chunk-X3VEDQPO.mjs";
 import {
   Field,
   FieldError,

package/dist/{chunk-HB5BKRMH.mjs → chunk-F3CU6KEI.mjs}

@@ -10,8 +10,16 @@ import {
 } from "./chunk-WNQUEZJF.mjs";
 
 // src/components/ui/popover.tsx
+import * as React from "react";
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { jsx } from "react/jsx-runtime";
+var PopoverPortalContext = React.createContext(void 0);
+function PopoverPortalProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsx(PopoverPortalContext.Provider, { value: container, children });
+}
 function Popover(_a) {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsx(PopoverPrimitive.Root, __spreadValues({ "data-slot": "popover" }, props));
@@ -33,7 +41,8 @@ function PopoverContent(_a) {
     "style"
   ]);
   const themeVars = useThemeVars();
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  const portalContainer = React.useContext(PopoverPortalContext);
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: portalContainer != null ? portalContainer : void 0, children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Positioner,
     {
       className: "z-[200]",
@@ -104,6 +113,7 @@ function PopoverDescription(_a) {
 }
 
 export {
+  PopoverPortalProvider,
   Popover,
   PopoverTrigger,
   PopoverContent,

package/dist/chunk-H65NB7KI.mjs

@@ -0,0 +1,182 @@
+import {
+  Separator
+} from "./chunk-2GIYVERS.mjs";
+import {
+  Badge
+} from "./chunk-X6RC5UWB.mjs";
+import {
+  Input
+} from "./chunk-LBTHZSBT.mjs";
+import {
+  Button
+} from "./chunk-NOOEKOWY.mjs";
+import {
+  cn
+} from "./chunk-AFML43VJ.mjs";
+
+// src/components/ui/appointment-gmail-connect.tsx
+import { Check, Copy, ExternalLink, Link2, Mail, Settings } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GmailIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "#EA4335",
+      d: "M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"
+    }
+  ) });
+}
+function OutlookIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "#0078D4",
+      d: "M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"
+    }
+  ) });
+}
+var PROVIDER_META = {
+  gmail: { label: "Gmail", iconBg: "bg-[#EA4335]/10", Icon: GmailIcon },
+  outlook: { label: "Outlook", iconBg: "bg-[#0078D4]/10", Icon: OutlookIcon }
+};
+var PERMISSIONS = [
+  "Read your calendar availability",
+  "Send appointment confirmation emails",
+  "Create calendar events on your behalf"
+];
+function AppointmentGmailConnect({
+  provider = "gmail",
+  connection,
+  calendarLink,
+  highlighted = false,
+  onCopyLink,
+  onGoToIntegrations
+}) {
+  const { label, iconBg, Icon } = PROVIDER_META[provider];
+  if (connection.connected) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col border bg-card",
+          highlighted ? "border-primary" : "border-border"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 px-5 py-4", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex h-10 w-10 shrink-0 items-center justify-center",
+                  iconBg
+                ),
+                children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-base font-semibold", children: [
+                label,
+                " Connected"
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: connection.email })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1.5", children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  className: "gap-1.5 text-muted-foreground",
+                  onClick: onGoToIntegrations,
+                  children: [
+                    /* @__PURE__ */ jsx(Settings, { className: "h-3.5 w-3.5" }),
+                    "Manage"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs(Badge, { variant: "success", children: [
+                  /* @__PURE__ */ jsx(Check, { size: 10 }),
+                  "Active"
+                ] }),
+                connection.connectedAt && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                  "Connected since ",
+                  connection.connectedAt
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-5 py-4", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Permissions granted" }),
+            PERMISSIONS.map((perm) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-success" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: perm })
+            ] }, perm))
+          ] }),
+          calendarLink && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 px-5 py-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Link2, { className: "h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Calendar Appointment Link" })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Share with clients so they can self-book." }),
+              /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "calendar-link",
+                    readOnly: true,
+                    value: calendarLink,
+                    className: "cursor-default select-all pr-10 text-muted-foreground"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    onClick: onCopyLink,
+                    className: "absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2",
+                    children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 border border-border bg-card px-6 py-8 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center bg-muted", children: /* @__PURE__ */ jsx(Mail, { className: "h-6 w-6 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-base font-semibold", children: [
+        label,
+        " not connected"
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "max-w-xs text-sm text-muted-foreground", children: [
+        "Connect your ",
+        label,
+        " account in Integrations to enable calendar booking and appointment confirmations."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xs flex-col gap-2 text-left", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Once connected, WealthX will be able to:" }),
+      PERMISSIONS.map((perm) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: perm })
+      ] }, perm))
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { onClick: onGoToIntegrations, className: "gap-2", children: [
+      /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }),
+      "Go to Integrations"
+    ] })
+  ] });
+}
+
+export {
+  AppointmentGmailConnect
+};

package/dist/{chunk-TRM3KIHT.mjs → chunk-ICCPK3J2.mjs}

@@ -2,7 +2,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-HB5BKRMH.mjs";
+} from "./chunk-F3CU6KEI.mjs";
 import {
   Calendar
 } from "./chunk-FBNEIYSE.mjs";

package/dist/{chunk-KGVVK6OS.mjs → chunk-ORMC3TV3.mjs}

@@ -73,11 +73,13 @@ var MEETING_FORMAT_META = {
     icon: /* @__PURE__ */ jsx(Users, { className: ICON_CLASS }),
     label: "Microsoft Teams"
   },
+  online: { icon: /* @__PURE__ */ jsx(Video, { className: ICON_CLASS }), label: "Online Meeting" },
   offline: { icon: /* @__PURE__ */ jsx(MapPin, { className: ICON_CLASS }), label: "In Person" }
 };
 var ONLINE_FORMATS = /* @__PURE__ */ new Set([
   "google-meet",
-  "microsoft-teams"
+  "microsoft-teams",
+  "online"
 ]);
 function AppointmentDetailSheet({
   appointment,

package/dist/{chunk-HSXMTFIM.mjs → chunk-UD5UF5OC.mjs}

@@ -32,7 +32,7 @@ import {
 } from "./chunk-BS75ICOO.mjs";
 import {
   DatePicker
-} from "./chunk-TRM3KIHT.mjs";
+} from "./chunk-ICCPK3J2.mjs";
 import {
   ToggleGroup,
   ToggleGroupItem

package/dist/{chunk-IW33VLL5.mjs → chunk-X3VEDQPO.mjs}

@@ -2,7 +2,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-HB5BKRMH.mjs";
+} from "./chunk-F3CU6KEI.mjs";
 import {
   Input
 } from "./chunk-LBTHZSBT.mjs";
@@ -93,14 +93,18 @@ function ColorPickerContent({
   presets = COLOR_PICKER_PRESETS
 }) {
   const [hexInput, setHexInput] = React.useState(value);
+  const hexInputRef = React.useRef(hexInput);
+  hexInputRef.current = hexInput;
   React.useEffect(() => {
-    setHexInput(value);
+    if (value !== hexInputRef.current) {
+      setHexInput(value);
+    }
   }, [value]);
   function handleHexInputChange(e) {
     const raw = e.target.value;
     setHexInput(raw);
     const normalized = normalizeHex(raw);
-    if (isValidHex(normalized)) {
+    if (/^#[0-9A-Fa-f]{6}$/.test(normalized)) {
       onChange(normalized);
     }
   }

package/dist/{chunk-AAZSLTER.mjs → chunk-XGRSPFFC.mjs}

@@ -27,7 +27,7 @@ import {
 } from "./chunk-2GIYVERS.mjs";
 import {
   DatePicker
-} from "./chunk-TRM3KIHT.mjs";
+} from "./chunk-ICCPK3J2.mjs";
 import {
   formatDateWithWeekday
 } from "./chunk-LHWJQNLG.mjs";
@@ -262,7 +262,8 @@ function AppointmentAvailabilitySettings({
   blockedDates: blockedDatesProp,
   publicHolidays: publicHolidaysProp,
   onSave,
-  onBlockedDatesChange
+  onBlockedDatesChange,
+  onPrefsChange
 }) {
   var _a, _b, _c, _d, _e;
   const [schedule, setSchedule] = React.useState(initialSchedule);
@@ -319,6 +320,7 @@ function AppointmentAvailabilitySettings({
   );
   const saveGuard = React.useRef(false);
   const timeOffGuard = React.useRef(false);
+  const prefsChangeGuard = React.useRef(false);
   React.useEffect(() => {
     if (!saveGuard.current) {
       saveGuard.current = true;
@@ -326,6 +328,13 @@ function AppointmentAvailabilitySettings({
     }
     onSave == null ? void 0 : onSave(schedule, currentPrefs);
   }, [schedule, currentPrefs]);
+  React.useEffect(() => {
+    if (!prefsChangeGuard.current) {
+      prefsChangeGuard.current = true;
+      return;
+    }
+    onPrefsChange == null ? void 0 : onPrefsChange(currentPrefs);
+  }, [currentPrefs]);
   React.useEffect(() => {
     if (!timeOffGuard.current) {
       timeOffGuard.current = true;
@@ -436,7 +445,7 @@ function AppointmentAvailabilitySettings({
                 value: meetingDuration,
                 onValueChange: (v) => setMeetingDuration(v),
                 children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-40", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(MEETING_DURATION_OPTIONS, v) }) }),
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-64", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(MEETING_DURATION_OPTIONS, v) }) }),
                   /* @__PURE__ */ jsx(SelectContent, { children: MEETING_DURATION_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
                 ]
               }
@@ -454,7 +463,7 @@ function AppointmentAvailabilitySettings({
                 value: schedulingBuffer,
                 onValueChange: (v) => setSchedulingBuffer(v),
                 children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-40", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(SCHEDULING_BUFFER_OPTIONS, v) }) }),
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-64", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(SCHEDULING_BUFFER_OPTIONS, v) }) }),
                   /* @__PURE__ */ jsx(SelectContent, { children: SCHEDULING_BUFFER_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
                 ]
               }
@@ -472,7 +481,7 @@ function AppointmentAvailabilitySettings({
                 value: maxSlotsPerDay,
                 onValueChange: (v) => setMaxSlotsPerDay(v),
                 children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-40", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(MAX_SLOTS_OPTIONS, v) }) }),
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-64", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(MAX_SLOTS_OPTIONS, v) }) }),
                   /* @__PURE__ */ jsx(SelectContent, { children: MAX_SLOTS_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
                 ]
               }
@@ -490,7 +499,7 @@ function AppointmentAvailabilitySettings({
                 value: timezone,
                 onValueChange: (v) => setTimezone(v),
                 children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-56", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(TIMEZONE_OPTIONS, v) }) }),
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-64", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(TIMEZONE_OPTIONS, v) }) }),
                   /* @__PURE__ */ jsx(SelectContent, { children: TIMEZONE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
                 ]
               }
@@ -510,7 +519,7 @@ function AppointmentAvailabilitySettings({
                   v
                 ),
                 children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-48", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(MEETING_PLATFORM_OPTIONS, v) }) }),
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-64", children: /* @__PURE__ */ jsx(SelectValue, { children: (v) => selectLabel(MEETING_PLATFORM_OPTIONS, v) }) }),
                   /* @__PURE__ */ jsx(SelectContent, { children: MEETING_PLATFORM_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
                 ]
               }