@wipco/sdui 1.6.1 → 1.7.1

package/dist/{chunk-FP32LNFK.js → chunk-KAQ2VZBM.js}

@@ -1,103 +1,11 @@
-import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-BITS7UJY.js';
+import { KO_CALENDAR_NAV_LOCALE, useDismiss, usePopoverAnchor, usePortalTo, usePanelPointer, AnchoredPopoverStyles, anchorStyle, focusStaysInside, resolveCalendarNavLocale, CalendarZoom, CalendarNav, clampIndex } from './chunk-QVNJMZUF.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { useIsMobile } from './chunk-GSM664TX.js';
-import { Icon } from './chunk-YYAGE733.js';
+import { useIsMobile } from './chunk-TAVKGYH5.js';
+import { Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
-import React, { useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
+import { useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var ANCHOR_GAP = 8;
-var VIEWPORT_EDGE = 8;
-function anchorTo(rect, viewportHeight, height) {
-  const below = viewportHeight - rect.bottom;
-  const up = below < height && rect.top > below;
-  const room = (up ? rect.top : below) - ANCHOR_GAP - VIEWPORT_EDGE;
-  return {
-    left: rect.left,
-    top: up ? void 0 : rect.bottom + ANCHOR_GAP,
-    bottom: up ? viewportHeight - rect.top + ANCHOR_GAP : void 0,
-    minWidth: rect.width,
-    available: Math.max(MIN_AVAILABLE, Math.floor(room))
-  };
-}
-var MIN_AVAILABLE = 120;
-function anchorToHost(host, height) {
-  if (!host || typeof window === "undefined") return null;
-  return anchorTo(host.getBoundingClientRect(), window.innerHeight, height);
-}
-function usePopoverAnchor(open, hostRef, popRef, height) {
-  const [anchor, setAnchor] = useState(null);
-  useLayoutEffect(() => {
-    if (!open) {
-      setAnchor(null);
-      return;
-    }
-    const place = () => setAnchor(anchorToHost(hostRef.current, height));
-    place();
-    window.addEventListener("scroll", place, true);
-    window.addEventListener("resize", place);
-    return () => {
-      window.removeEventListener("scroll", place, true);
-      window.removeEventListener("resize", place);
-    };
-  }, [open, hostRef, height]);
-  useLayoutEffect(() => {
-    const el = popRef.current;
-    if (!open || !el || !anchor) return;
-    const overflow = el.getBoundingClientRect().right - (window.innerWidth - VIEWPORT_EDGE);
-    if (overflow <= 1) return;
-    setAnchor((prev) => {
-      if (!prev) return prev;
-      const left = Math.max(VIEWPORT_EDGE, prev.left - overflow);
-      return Math.abs(left - prev.left) < 1 ? prev : { ...prev, left };
-    });
-  }, [open, anchor, popRef]);
-  return anchor;
-}
-function AnchoredPopoverStyles() {
-  return /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-anchored-pop", css: ANCHORED_POP_CSS });
-}
-var ANCHORED_POP_CSS = `
-.wp-anchored-pop{position:fixed;width:max-content;max-width:min(92vw,400px);background:var(--wp-surface-card);border:1px solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);z-index:var(--wp-z-dialog);pointer-events:auto}
-`;
-function anchorStyle(anchor) {
-  if (!anchor) return void 0;
-  const style = {
-    left: anchor.left,
-    top: anchor.top,
-    bottom: anchor.bottom,
-    minWidth: anchor.minWidth
-  };
-  if (anchor.available !== void 0) style["--wp-pop-avail"] = `${anchor.available}px`;
-  return style;
-}
-function usePortalTo() {
-  const container = React.useContext(OverlayContainerContext);
-  return (anchor, node) => {
-    if (!anchor) return null;
-    const root = container ?? getOverlayRoot();
-    return root ? createPortal(node, root) : node;
-  };
-}
-function useDismiss(open, hostRef, popRef, onDismiss) {
-  useEffect(() => {
-    if (!open) return;
-    const handlePointerDown = (event) => {
-      const target = event.target;
-      if (target instanceof Node && (hostRef.current?.contains(target) || popRef.current?.contains(target))) return;
-      onDismiss("outside");
-    };
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-    };
-  }, [open, hostRef, popRef, onDismiss]);
-  useOverlayLayer(open, () => onDismiss("escape"), hostRef);
-}
-function focusStaysInside(next, hostRef, popRef) {
-  return next instanceof Node && Boolean(hostRef.current?.contains(next) || popRef.current?.contains(next));
-}
 var HM_RE = /^\d{2}:\d{2}$/;
 var LIST_HEIGHT = 260;
 var MINUTES_PER_DAY = 24 * 60;
@@ -160,6 +68,7 @@ function TimePickerImpl({
   useDismiss(open, hostRef, popRef, dismiss);
   const anchor = usePopoverAnchor(open, hostRef, popRef, LIST_HEIGHT);
   const portal = usePortalTo();
+  const pointer = usePanelPointer(popRef);
   const isInvalid = Boolean(invalid);
   const commit = (next) => {
     if (!isControlled) setInnerValue(next);
@@ -225,7 +134,7 @@ function TimePickerImpl({
     inputRef.current?.focus();
   };
   const handleBlur = (event) => {
-    if (focusStaysInside(event.relatedTarget, hostRef, popRef)) return;
+    if (focusStaysInside(event.relatedTarget, hostRef, popRef, pointer)) return;
     if (text !== currentValue) setText(currentValue);
     setOpen(false);
   };
@@ -271,6 +180,7 @@ function TimePickerImpl({
           style: anchorStyle(anchor),
           role: "listbox",
           "aria-label": listLabel,
+          ...pointer.panelProps,
           children: options.map((option, index) => /* @__PURE__ */ jsx(
             "button",
             {
@@ -413,22 +323,18 @@ function toFieldValue(text, withTime) {
   return `${date}T${time}`;
 }
 var KO_LOCALE = {
+  ...KO_CALENDAR_NAV_LOCALE,
   weekdays: ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"],
   weekStartsOn: 0,
-  formatCaption: (year, month) => `${year}\uB144 ${month}\uC6D4`,
-  prevMonthLabel: "\uC774\uC804 \uB2EC",
-  nextMonthLabel: "\uB2E4\uC74C \uB2EC",
   calendarLabel: "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825",
   startLabel: "\uC2DC\uC791\uC77C",
   endLabel: "\uC885\uB8CC\uC77C"
 };
 function resolveLocale(locale, calendarLabel) {
   return {
+    ...resolveCalendarNavLocale(locale),
     weekdays: locale?.weekdays ?? KO_LOCALE.weekdays,
     weekStartsOn: locale?.weekStartsOn ?? KO_LOCALE.weekStartsOn,
-    formatCaption: locale?.formatCaption ?? KO_LOCALE.formatCaption,
-    prevMonthLabel: locale?.prevMonthLabel ?? KO_LOCALE.prevMonthLabel,
-    nextMonthLabel: locale?.nextMonthLabel ?? KO_LOCALE.nextMonthLabel,
     calendarLabel: locale?.calendarLabel ?? calendarLabel,
     startLabel: locale?.startLabel ?? KO_LOCALE.startLabel,
     endLabel: locale?.endLabel ?? KO_LOCALE.endLabel
@@ -454,6 +360,12 @@ function buildMonthCells(index, min, max, weekStartsOn = 0) {
   }
   return weeks;
 }
+function sameDayInMonth(date, index) {
+  const first = monthStart(index);
+  const lastDay = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
+  first.setDate(Math.min(date.getDate(), lastDay));
+  return first;
+}
 function clampViewToFocus(focusIdx, viewIdx, monthCount) {
   return focusIdx < viewIdx ? focusIdx : focusIdx > viewIdx + monthCount - 1 ? focusIdx - monthCount + 1 : viewIdx;
 }
@@ -466,15 +378,20 @@ function Calendar({
   focusDate,
   onFocusDateChange,
   autoFocus = false,
-  locale
+  locale,
+  selectedDates = []
 }) {
   const focusIdx = monthIndex(focusDate);
   const [viewIdx, setViewIdx] = useState(focusIdx);
+  const [zoom, setZoom] = useState(null);
   const gridRef = useRef(null);
   const focusYmd = formatYmd(focusDate);
   const visibleIdx = clampViewToFocus(focusIdx, viewIdx, monthCount);
   if (visibleIdx !== viewIdx) setViewIdx(visibleIdx);
-  const claimFocusRef = useRef(autoFocus);
+  const claimFocusRef = useRef(false);
+  useEffect(() => {
+    if (autoFocus) gridRef.current?.querySelector('[tabindex="0"]')?.focus();
+  }, []);
   useLayoutEffect(() => {
     const grid = gridRef.current;
     if (!grid) return;
@@ -489,17 +406,52 @@ function Calendar({
   const maxIdx = maxDate ? monthIndex(maxDate) : Infinity;
   const prevDisabled = visibleIdx <= minIdx;
   const nextDisabled = visibleIdx + monthCount - 1 >= maxIdx;
+  const lastViewIdx = Math.max(minIdx, maxIdx - monthCount + 1);
+  const clampView = (idx) => clampIndex(idx, minIdx, lastViewIdx);
   const moveFocus = (next) => {
     onFocusDateChange(clampDate(next, minDate, maxDate));
   };
   const moveView = (delta) => {
-    setViewIdx(visibleIdx + delta);
-    moveFocus(addMonths(focusDate, delta));
+    const target = clampView(visibleIdx + delta);
+    const actual = target - visibleIdx;
+    if (actual === 0) return;
+    setViewIdx(target);
+    moveFocus(addMonths(focusDate, actual));
+  };
+  const refocusDayRef = useRef(false);
+  useLayoutEffect(() => {
+    if (zoom !== null || !refocusDayRef.current) return;
+    refocusDayRef.current = false;
+    gridRef.current?.querySelector('.wp-dp__day-btn[tabindex="0"]')?.focus();
+  }, [zoom]);
+  const openZoom = (offset) => {
+    const months = Array.from(gridRef.current?.querySelectorAll(".wp-dp__month") ?? []);
+    let size;
+    if (months.length > 0) {
+      const rects = months.map((month) => month.getBoundingClientRect());
+      const width = rects[rects.length - 1].right - rects[0].left;
+      const height = Math.max(...rects.map((rect) => rect.height));
+      if (width > 0 && height > 0) size = { width, height };
+    }
+    setZoom({ offset, openedAt: focusYmd, followed: false, size });
+  };
+  useEffect(() => {
+    if (zoom && !zoom.followed && focusYmd !== zoom.openedAt) setZoom({ ...zoom, followed: true });
+  }, [focusYmd, zoom]);
+  const leaveZoom = (pickedIdx) => {
+    if (pickedIdx !== void 0 && zoom) {
+      setViewIdx(clampView(pickedIdx - zoom.offset));
+      moveFocus(sameDayInMonth(focusDate, pickedIdx));
+    }
+    refocusDayRef.current = true;
+    setZoom(null);
   };
   const handleKeyDown = (event) => {
     const deltaDays = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" ? -7 : event.key === "ArrowDown" ? 7 : 0;
+    const fromDay = event.target instanceof HTMLElement && event.target.classList.contains("wp-dp__day-btn");
     if (deltaDays !== 0) {
       event.preventDefault();
+      if (fromDay) claimFocusRef.current = true;
       moveFocus(addDays(focusDate, deltaDays));
       return;
     }
@@ -512,90 +464,102 @@ function Calendar({
     }
     if (event.key === "PageUp" || event.key === "PageDown") {
       event.preventDefault();
+      if (fromDay) claimFocusRef.current = true;
       moveFocus(addMonths(focusDate, event.key === "PageUp" ? -1 : 1));
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "wp-dp", children: /* @__PURE__ */ jsxs("div", { className: "wp-dp__months", ref: gridRef, onKeyDown: handleKeyDown, children: [
-    /* @__PURE__ */ jsxs("div", { className: "wp-dp__nav", children: [
+  if (zoom) {
+    return /* @__PURE__ */ jsx("div", { className: "wp-dp", children: /* @__PURE__ */ jsx("div", { className: "wp-dp__months", ref: gridRef, onKeyDown: handleKeyDown, children: /* @__PURE__ */ jsx(
+      CalendarZoom,
+      {
+        className: "wp-dp__zoom",
+        style: zoom.size ? { minWidth: zoom.size.width, minHeight: zoom.size.height } : void 0,
+        monthIndex: zoom.followed ? focusIdx : visibleIdx + zoom.offset,
+        selectedMonthIndexes: selectedDates.map(monthIndex),
+        minMonthIndex: minIdx,
+        maxMonthIndex: maxIdx,
+        onPick: leaveZoom,
+        onExit: () => leaveZoom(),
+        autoFocus: true,
+        locale
+      }
+    ) }) });
+  }
+  const navLabels = {
+    prevBig: locale.prevYearLabel,
+    prev: locale.prevMonthLabel,
+    next: locale.nextMonthLabel,
+    nextBig: locale.nextYearLabel
+  };
+  const navDisabled = { prevBig: prevDisabled, prev: prevDisabled, next: nextDisabled, nextBig: nextDisabled };
+  const step = (which) => moveView(which === "prevBig" ? -12 : which === "prev" ? -1 : which === "next" ? 1 : 12);
+  return /* @__PURE__ */ jsx("div", { className: "wp-dp", children: /* @__PURE__ */ jsx("div", { className: "wp-dp__months", ref: gridRef, onKeyDown: handleKeyDown, children: Array.from({ length: monthCount }, (_, offset) => {
+    const idx = visibleIdx + offset;
+    const first = monthStart(idx);
+    const weeks = buildMonthCells(idx, minDate, maxDate, locale.weekStartsOn);
+    const caption = locale.formatCaption(first.getFullYear(), first.getMonth() + 1);
+    const sides = monthCount === 1 ? "both" : offset === 0 ? "start" : offset === monthCount - 1 ? "end" : "none";
+    return /* @__PURE__ */ jsxs("div", { className: "wp-dp__month", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        CalendarNav,
         {
-          type: "button",
-          className: "wp-dp__navbtn",
-          "aria-label": locale.prevMonthLabel,
-          "aria-disabled": prevDisabled || void 0,
-          disabled: prevDisabled,
-          onClick: () => moveView(-1),
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
+          className: "wp-dp__nav",
+          size: "sm",
+          title: caption,
+          sides,
+          labels: navLabels,
+          disabled: navDisabled,
+          onStep: step,
+          onZoomOut: () => openZoom(offset),
+          zoomLabel: locale.zoomLabel
         }
       ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "wp-dp__navbtn",
-          "aria-label": locale.nextMonthLabel,
-          "aria-disabled": nextDisabled || void 0,
-          disabled: nextDisabled,
-          onClick: () => moveView(1),
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
-        }
-      )
-    ] }),
-    Array.from({ length: monthCount }, (_, offset) => {
-      const idx = visibleIdx + offset;
-      const first = monthStart(idx);
-      const weeks = buildMonthCells(idx, minDate, maxDate, locale.weekStartsOn);
-      const caption = locale.formatCaption(first.getFullYear(), first.getMonth() + 1);
-      return /* @__PURE__ */ jsxs("div", { className: "wp-dp__month", children: [
-        /* @__PURE__ */ jsx("div", { className: "wp-dp__caption", children: /* @__PURE__ */ jsx("span", { className: "wp-dp__caption-label", children: caption }) }),
-        /* @__PURE__ */ jsxs("table", { className: "wp-dp__grid", role: "grid", "aria-label": caption, children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "wp-dp__weekdays", children: Array.from({ length: 7 }, (_2, col) => {
-            const day = (locale.weekStartsOn + col) % 7;
-            const name = locale.weekdays[day] ?? "";
-            return /* @__PURE__ */ jsx(
-              "th",
-              {
-                scope: "col",
-                className: day === 0 ? "wp-dp__weekday wp-dp__weekday--sun" : "wp-dp__weekday",
-                abbr: name,
-                children: name
+      /* @__PURE__ */ jsxs("table", { className: "wp-dp__grid", role: "grid", "aria-label": caption, children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "wp-dp__weekdays", children: Array.from({ length: 7 }, (_2, col) => {
+          const day = (locale.weekStartsOn + col) % 7;
+          const name = locale.weekdays[day] ?? "";
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: day === 0 ? "wp-dp__weekday wp-dp__weekday--sun" : "wp-dp__weekday",
+              abbr: name,
+              children: name
+            },
+            day
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx("tbody", { className: "wp-dp__weeks", children: weeks.map((week, w) => /* @__PURE__ */ jsx("tr", { className: "wp-dp__week", children: week.map((cell) => {
+          const state = cell.disabled ? {} : dayState(cell.date);
+          const classes = ["wp-dp__day"];
+          if (cell.outside) classes.push("wp-dp__day--outside");
+          if (cell.disabled) classes.push("wp-dp__day--disabled");
+          if (cell.ymd === todayYmd) classes.push("wp-dp__day--today");
+          if (state.selected) classes.push("wp-dp__day--selected");
+          if (state.rangeStart) classes.push("wp-dp__day--range-start");
+          if (state.rangeMiddle) classes.push("wp-dp__day--range-middle");
+          if (state.rangeEnd) classes.push("wp-dp__day--range-end");
+          return /* @__PURE__ */ jsx("td", { className: classes.join(" "), children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "wp-dp__day-btn",
+              "data-ymd": cell.ymd,
+              tabIndex: cell.ymd === focusYmd && !cell.outside ? 0 : -1,
+              disabled: cell.disabled,
+              "aria-selected": state.selected || state.rangeStart || state.rangeEnd || void 0,
+              "aria-label": cell.ymd,
+              onClick: () => {
+                onFocusDateChange(cell.date);
+                onPick(cell.date);
               },
-              day
-            );
-          }) }) }),
-          /* @__PURE__ */ jsx("tbody", { className: "wp-dp__weeks", children: weeks.map((week, w) => /* @__PURE__ */ jsx("tr", { className: "wp-dp__week", children: week.map((cell) => {
-            const state = cell.disabled ? {} : dayState(cell.date);
-            const classes = ["wp-dp__day"];
-            if (cell.outside) classes.push("wp-dp__day--outside");
-            if (cell.disabled) classes.push("wp-dp__day--disabled");
-            if (cell.ymd === todayYmd) classes.push("wp-dp__day--today");
-            if (state.selected) classes.push("wp-dp__day--selected");
-            if (state.rangeStart) classes.push("wp-dp__day--range-start");
-            if (state.rangeMiddle) classes.push("wp-dp__day--range-middle");
-            if (state.rangeEnd) classes.push("wp-dp__day--range-end");
-            return /* @__PURE__ */ jsx("td", { className: classes.join(" "), children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "wp-dp__day-btn",
-                "data-ymd": cell.ymd,
-                tabIndex: cell.ymd === focusYmd && !cell.outside ? 0 : -1,
-                disabled: cell.disabled,
-                "aria-selected": state.selected || state.rangeStart || state.rangeEnd || void 0,
-                "aria-label": cell.ymd,
-                onClick: () => {
-                  onFocusDateChange(cell.date);
-                  onPick(cell.date);
-                },
-                children: cell.date.getDate()
-              }
-            ) }, cell.ymd);
-          }) }, w)) })
-        ] })
-      ] }, idx);
-    })
-  ] }) });
+              children: cell.date.getDate()
+            }
+          ) }, cell.ymd);
+        }) }, w)) })
+      ] })
+    ] }, offset);
+  }) }) });
 }
 var CALENDAR_HEIGHT = 340;
 function DateInput({
@@ -688,6 +652,7 @@ function DatePickerImpl({
   useDismiss(open, hostRef, popRef, dismiss);
   const anchor = usePopoverAnchor(open, hostRef, popRef, CALENDAR_HEIGHT);
   const portal = usePortalTo();
+  const pointer = usePanelPointer(popRef);
   const isInvalid = Boolean(invalid);
   const commit = (wall) => {
     const emitZone = withTime && wall !== "" && (zoned ?? sawZone.current);
@@ -727,7 +692,7 @@ function DatePickerImpl({
     }
   };
   const handleBlur = (event) => {
-    if (focusStaysInside(event.relatedTarget, hostRef, popRef)) return;
+    if (focusStaysInside(event.relatedTarget, hostRef, popRef, pointer)) return;
     if (text !== fieldText) setText(fieldText);
     setOpen(false);
   };
@@ -763,6 +728,7 @@ function DatePickerImpl({
           style: anchorStyle(anchor),
           role: "dialog",
           "aria-label": loc.calendarLabel,
+          ...pointer.panelProps,
           children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
             Calendar,
             {
@@ -773,6 +739,7 @@ function DatePickerImpl({
               onFocusDateChange: setFocusDate,
               autoFocus: grabFocus,
               locale: loc,
+              selectedDates: selectedDate ? [selectedDate] : [],
               dayState: (date) => ({ selected: isSameDay(date, selectedDate) }),
               onPick: (date) => {
                 const ymd = formatYmd(date);
@@ -839,6 +806,7 @@ function DateRangePickerImpl({
   useDismiss(open, hostRef, popRef, dismiss);
   const anchor = usePopoverAnchor(open, hostRef, popRef, CALENDAR_HEIGHT);
   const portal = usePortalTo();
+  const pointer = usePanelPointer(popRef);
   const isInvalid = Boolean(invalid);
   const commit = (nextFrom, nextTo) => {
     const next = { from: nextFrom || void 0, to: nextTo || void 0 };
@@ -889,7 +857,7 @@ function DateRangePickerImpl({
     }
   };
   const handleBlur = (event) => {
-    if (focusStaysInside(event.relatedTarget, hostRef, popRef)) return;
+    if (focusStaysInside(event.relatedTarget, hostRef, popRef, pointer)) return;
     if (fromText !== fromValue) setFromText(fromValue);
     if (toText !== toValue) setToText(toValue);
     setOpen(false);
@@ -971,6 +939,7 @@ function DateRangePickerImpl({
           style: anchorStyle(anchor),
           role: "dialog",
           "aria-label": loc.calendarLabel,
+          ...pointer.panelProps,
           children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
             Calendar,
             {
@@ -981,6 +950,7 @@ function DateRangePickerImpl({
               onFocusDateChange: setFocusDate,
               autoFocus: grabFocus,
               locale: loc,
+              selectedDates: [fromDate, toDate].filter((d) => d !== void 0),
               dayState: (date) => {
                 const t = date.getTime();
                 const start = fromDate?.getTime();
@@ -1003,7 +973,10 @@ function DateRangePickerImpl({
 }
 var DP_CSS = `
 .wp-dp-host{position:relative}
-.wp-dp-pop--wide{max-width:min(92vw,720px)}
+/* \uB450 \uB2EC\uC9DC\uB9AC \uD328\uB110\uC758 \uC0C1\uD55C. \uAECD\uB370\uAE30 \uADDC\uCE59(.wp-anchored-pop, max-width 400px)\uACFC \uAC19\uC740 \uBA85\uC2DC\uB3C4\uB85C \uB450\uBA74 \uC2DC\uD2B8\uAC00 \uC2E4\uB9B0
+   \uC21C\uC11C\uC5D0 \uB530\uB77C \uC9C0\uAC70\uB098 \uC774\uACBC\uB2E4 \u2014 \uCE78\uC774 \uC881\uC740 \uC790\uB9AC(\uD1B5\uACC4\uC758 \uAE30\uAC04 \uD544\uD130)\uC5D0\uC11C \uB450 \uB2EC\uC774 \uC138\uB85C\uB85C \uC313\uC600\uB2E4(\uC2E4\uCE21 1440). \uD074\uB798\uC2A4\uB97C
+   \uB458 \uACB9\uCCD0 \uC21C\uC11C\uC640 \uBB34\uAD00\uD558\uAC8C \uC774\uAE34\uB2E4. */
+.wp-anchored-pop.wp-dp-pop--wide{max-width:min(92vw,720px)}
 /* \uC0C1\uD55C\uC740 \uD654\uBA74 60% \uC640 **\uD3B8 \uCABD\uC5D0 \uB0A8\uC740 \uB192\uC774**(anchored-popover \uAC00 --wp-pop-avail \uB85C \uC2E3\uB294\uB2E4) \uC911
    \uC791\uC740 \uCABD \u2014 \uCE78\uC774 \uD654\uBA74 \uC544\uB798\uCABD\uC774\uBA74 \uD328\uB110\uC774 \uBDF0\uD3EC\uD2B8 \uBC16\uC73C\uB85C \uB118\uCE58\uC9C0 \uC54A\uACE0 \uC548\uC5D0\uC11C \uC2A4\uD06C\uB864\uD55C\uB2E4. */
 .wp-dp-pop__body{padding:var(--wp-space-4);max-height:min(60vh,calc(var(--wp-pop-avail,100vh) - 2px));overflow:auto}
@@ -1018,13 +991,13 @@ var DP_CSS = `
 .wp-inputwrap--lead .wp-dp-input--time.wp-dp-input--time{min-width:calc(16ch + 36px)}
 .wp-dp{font-family:inherit;font-size:13px;color:var(--wp-text-default)}
 .wp-dp__months{position:relative;display:flex;flex-wrap:wrap;gap:var(--wp-space-5)}
-.wp-dp__nav{position:absolute;top:0;right:0;display:flex;gap:var(--wp-space-1);z-index:1}
-.wp-dp__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--wp-radius-sm);color:var(--wp-text-muted);cursor:pointer;transition:background 0.12s,color 0.12s}
-.wp-dp__navbtn:hover:not(:disabled){background:var(--wp-surface-hover);color:var(--wp-text-strong)}
-.wp-dp__navbtn:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:1px}
-.wp-dp__navbtn:disabled{color:var(--wp-text-disabled);cursor:default;background:transparent}
-.wp-dp__caption{display:flex;align-items:center;height:28px;margin-bottom:var(--wp-space-2);padding-left:var(--wp-space-1)}
-.wp-dp__caption-label{font-size:13px;font-weight:600;color:var(--wp-text-strong)}
+/* \uBA38\uB9AC\uAE00(<< < \uC81C\uBAA9 > >>)\uC740 calendar-nav \uC758 \uACF5\uC6A9 \uBD80\uD488 \u2014 \uB2EC\uB9C8\uB2E4 \uD558\uB098, \uACA9\uC790\uC640 \uAC19\uC740 \uD3ED. */
+.wp-dp__nav{margin-bottom:var(--wp-space-2)}
+/* \uC6D4\xB7\uC5F0\uB3C4 \uBCF4\uAE30\uC758 **\uAE30\uBCF8** \uD06C\uAE30 \u2014 \uC77C \uBCF4\uAE30(\uBA38\uB9AC\uAE00 28 + 8 + \uC694\uC77C 28 + 6\uC8FC\xD730)\uC640 \uAC19\uC740 \uB192\uC774, \uB450 \uB2EC \uD328\uB110\uC5D0\uC11C\uB294 \uB450 \uB2EC \uD3ED
+   (224\xD72 + \uC0AC\uC774 \uAC04\uACA9). \uC2E4\uC81C\uB85C\uB294 \uB4E4\uC5B4\uAC08 \uB54C \uC7B0 \uC77C \uBCF4\uAE30 \uD06C\uAE30\uB97C \uC778\uB77C\uC778 min-width/min-height \uB85C \uC5B9\uC5B4(\uC18C\uBE44 \uC571\uC774 \uCE78\uC744 \uD0A4\uC6CC\uB3C4
+   \uB4E4\uC369\uC784 0) \uC774 \uAC12\uC740 \uB808\uC774\uC544\uC6C3\uC774 \uC5C6\uB294 \uD658\uACBD\uC758 \uD3F4\uBC31\uC774\uB2E4. */
+.wp-dp__zoom{min-height:244px}
+.wp-anchored-pop.wp-dp-pop--wide .wp-dp__zoom{width:calc(448px + var(--wp-space-5))}
 .wp-dp__grid{border-collapse:collapse}
 .wp-dp__weekday{width:32px;height:28px;padding:0;font-size:12px;font-weight:500;color:var(--wp-text-muted);text-align:center}
 .wp-dp__weekday--sun{color:var(--wp-text-danger)}

package/dist/{chunk-A57GKV5F.js → chunk-KXTQOP3E.js}

@@ -1,7 +1,7 @@
-import { DateRangePicker } from './chunk-FP32LNFK.js';
-import { useOverlayLayer } from './chunk-BITS7UJY.js';
+import { DateRangePicker } from './chunk-KAQ2VZBM.js';
+import { useOverlayLayer } from './chunk-R2ORCOTG.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-YYAGE733.js';
+import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-OWM7E55U.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-3PT5OBOU.js → chunk-L6ODTHTX.js}

@@ -1,4 +1,4 @@
-import { ImageViewer } from './chunk-UZZLMPRW.js';
+import { ImageViewer } from './chunk-JCG4575S.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

package/dist/{chunk-OQ7A3SFM.js → chunk-LKA43GYA.js}

@@ -1,5 +1,5 @@
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { Tag } from './chunk-YYAGE733.js';
+import { Tag } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-GSXD52XG.js → chunk-LKL3SCBJ.js}

@@ -1,5 +1,5 @@
-import { useSduiAdapter, hostFetchOf } from './chunk-JHFA5RDN.js';
-import { Badge, Tag } from './chunk-YYAGE733.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-ZBX2CAOO.js';
+import { Badge, Tag } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useEffect, useMemo, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-J7BZF4T4.js → chunk-MANONABB.js}

@@ -1,7 +1,7 @@
-import { ellipsisStyle, unwrapRows } from './chunk-VAXRTBJH.js';
-import { includesLooseSearch } from './chunk-A57GKV5F.js';
-import { useSduiAdapter, hostFetchOf } from './chunk-JHFA5RDN.js';
-import { Icon, Button, Input, Spinner } from './chunk-YYAGE733.js';
+import { ellipsisStyle, unwrapRows } from './chunk-63GM4S25.js';
+import { includesLooseSearch } from './chunk-KXTQOP3E.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-ZBX2CAOO.js';
+import { Icon, Button, Input, Spinner } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useId, useRef, useMemo, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-XFKNU6QN.js → chunk-NI3LMETK.js}

@@ -1,5 +1,5 @@
-import { useSduiAssetResolver } from './chunk-JHFA5RDN.js';
-import { Spinner, Icon } from './chunk-YYAGE733.js';
+import { useSduiAssetResolver } from './chunk-ZBX2CAOO.js';
+import { Spinner, Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-ESAFQXEU.js → chunk-NJTIJAFU.js}

@@ -1,5 +1,5 @@
-import { Text } from './chunk-UC725BGW.js';
-import { Field, Input, Select, IconButton, Button } from './chunk-YYAGE733.js';
+import { Text } from './chunk-5FZBH3T5.js';
+import { Field, Input, Select, IconButton, Button } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-PCFH74RD.js → chunk-NQDHGK7C.js}

@@ -1,6 +1,6 @@
-import { fetchAllPages } from './chunk-VAXRTBJH.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
-import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-YYAGE733.js';
+import { fetchAllPages } from './chunk-63GM4S25.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-ZBX2CAOO.js';
+import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-YYAGE733.js → chunk-OWM7E55U.js}

@@ -641,6 +641,14 @@ var ICON_NODES = {
   "chevron-up": [
     { t: "path", d: "m18 15-6-6-6 6" }
   ],
+  "chevrons-left": [
+    { t: "path", d: "m11 17-5-5 5-5" },
+    { t: "path", d: "m18 17-5-5 5-5" }
+  ],
+  "chevrons-right": [
+    { t: "path", d: "m6 17 5-5-5-5" },
+    { t: "path", d: "m13 17 5-5-5-5" }
+  ],
   "chevrons-up-down": [
     { t: "path", d: "m7 15 5 5 5-5" },
     { t: "path", d: "m7 9 5-5 5 5" }

package/dist/{chunk-OCYJ2ZOV.js → chunk-P62INTQ5.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-YYAGE733.js';
+import { Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useId, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-7G6J6QFC.js → chunk-Q56LZJFX.js}

@@ -1,4 +1,4 @@
-import { Badge, Checkbox, IconButton, Icon } from './chunk-YYAGE733.js';
+import { Badge, Checkbox, IconButton, Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-KDKRFWIF.js → chunk-QAGJ6FRE.js}

@@ -1,8 +1,8 @@
-import { TagMultiSelect } from './chunk-GSXD52XG.js';
-import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-USNPJEXH.js';
-import { orderCircleStyle, unwrapRows, uid } from './chunk-VAXRTBJH.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
-import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-YYAGE733.js';
+import { TagMultiSelect } from './chunk-LKL3SCBJ.js';
+import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-RJYPRWWS.js';
+import { orderCircleStyle, unwrapRows, uid } from './chunk-63GM4S25.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-ZBX2CAOO.js';
+import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React, { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';