@wipco/sdui 1.5.0 → 1.6.0

package/dist/{chunk-YVTV4ZV6.js → chunk-NWYYNE3Q.js}

@@ -1,4 +1,4 @@
-import { Spinner, EmptyState } from './chunk-RNOUXUBO.js';
+import { Spinner, EmptyState } from './chunk-BLFJMMBW.js';
 import { useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-DKVSM5HX.js → chunk-OUEJWC2Z.js}

@@ -1,9 +1,9 @@
-import { TagMultiSelect } from './chunk-I5SD7XRA.js';
-import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-MPT7WJG2.js';
-import { orderCircleStyle, unwrapRows, uid } from './chunk-Q4SWUINA.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { TagMultiSelect } from './chunk-6TI4WF5Y.js';
+import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-IQXLNICY.js';
+import { orderCircleStyle, unwrapRows, uid } from './chunk-LKQJJSVJ.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-YNEEJCSZ.js';
+import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-DOL57OOP.js → chunk-OYDJHQNZ.js}

@@ -1,7 +1,7 @@
 import { fetchAllJobPositions } from './chunk-XRHR452N.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Select, Button } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-YNEEJCSZ.js';
+import { Select, Button } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useState, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-YWUDBLO6.js → chunk-QVS6K4FP.js}

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

package/dist/{chunk-N5RKM6IC.js → chunk-RU5U2YMT.js}

@@ -1,7 +1,7 @@
-import { ImageLightbox } from './chunk-VY7MVBSE.js';
-import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-KO6OEY3G.js';
-import { Spinner, Icon, IconButton } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { ImageLightbox } from './chunk-KZ6U6FKB.js';
+import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-YNEEJCSZ.js';
+import { Spinner, Icon, IconButton } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-A6LAIGUS.js → chunk-V7BWMOHO.js}

@@ -1,6 +1,6 @@
-import { usePanZoomCanvas, MIN_ZOOM, MAX_ZOOM } from './chunk-MMIGOPO5.js';
-import { IconButton, Badge } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { usePanZoomCanvas, MIN_ZOOM, MAX_ZOOM } from './chunk-CSZCWBOE.js';
+import { IconButton, Badge } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -112,6 +112,7 @@ function OrgChartImpl({
     setView,
     dragging,
     isFullscreen,
+    pseudoFullscreen,
     viewportCenter,
     zoomAt,
     toggleFullscreen,
@@ -161,7 +162,9 @@ function OrgChartImpl({
         cursor: dragging ? "grabbing" : "grab",
         touchAction: "none",
         overscrollBehavior: "contain",
-        userSelect: "none"
+        userSelect: "none",
+        // 요소 전체화면이 없는 브라우저(iPhone Safari)의 대체 — 화면을 덮는 고정 배치
+        ...pseudoFullscreen ? { position: "fixed", inset: 0, zIndex: "var(--wp-z-dialog)", height: "100dvh", borderRadius: 0 } : null
       },
       children: [
         /* @__PURE__ */ jsxs(

package/dist/{chunk-2HLXCKK7.js → chunk-VPOOIEKT.js}

@@ -1,5 +1,5 @@
-import { Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Icon } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useId, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-2YP5N4VV.js → chunk-VZOQRQAR.js}

@@ -1,4 +1,4 @@
-import { boxed } from './chunk-5WW4MBRO.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var SUMMARY_TABLE_CSS = `

package/dist/{chunk-GNA6SX2H.js → chunk-W4VA76QO.js}

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

package/dist/{chunk-BEM2YS7U.js → chunk-WEG3V7ZB.js}

@@ -1,6 +1,6 @@
-import { Text } from './chunk-WPSK2CB5.js';
-import { Switch, Field, Select, Input } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Text } from './chunk-LIZTK3HO.js';
+import { Switch, Field, Select, Input } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-XGFDY43I.js → chunk-WTIYILY3.js}

@@ -1,5 +1,5 @@
-import { Icon, Badge, Tooltip } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Icon, Badge, Tooltip } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -25,6 +25,14 @@ var STATUS_META = {
     border: "var(--wp-status-neutral-border)",
     fg: "var(--wp-status-neutral-fg)"
   },
+  // 취소 — 신청자가 거둬들인 문서의 단계. 반려(빨강 x)와 달리 회색이라 판정이 아닌 종료로 읽힌다.
+  cancelled: {
+    icon: "circle-x",
+    label: "\uCDE8\uC18C",
+    bg: "var(--wp-status-neutral-bg)",
+    border: "var(--wp-status-neutral-border)",
+    fg: "var(--wp-status-neutral-fg)"
+  },
   current: {
     icon: "circle-dot",
     label: "\uC9C4\uD589 \uC911",
@@ -40,6 +48,9 @@ var STATUS_META = {
     fg: "var(--wp-text-muted)"
   }
 };
+function normalizeStepStatus(status) {
+  return status && Object.prototype.hasOwnProperty.call(STATUS_META, status) ? status : "pending";
+}
 function stepTitle(step, index, typeLabels) {
   const name = step.name?.trim();
   if (name) return name;
@@ -84,6 +95,15 @@ var nodeTextStyle = {
   whiteSpace: "nowrap",
   textAlign: "center"
 };
+var noticeNodeStyle = { ...nodeStyle, maxWidth: 240 };
+var noticeTextStyle = {
+  display: "block",
+  maxWidth: "100%",
+  textAlign: "center",
+  whiteSpace: "normal",
+  wordBreak: "keep-all",
+  overflowWrap: "anywhere"
+};
 var connectorStyle = {
   flex: "none",
   width: "var(--wp-space-6)",
@@ -93,7 +113,7 @@ var connectorStyle = {
   marginTop: "calc(var(--wp-space-1) + 16px)"
 };
 function stepTooltip(step, index, typeLabels) {
-  const meta = STATUS_META[step.status ?? "pending"];
+  const meta = STATUS_META[normalizeStepStatus(step.status)];
   const lines = [`${stepTitle(step, index, typeLabels)} \u2014 ${meta.label}`];
   if (step.approver) lines.push(`\uCC98\uB9AC\uC790: ${step.approver}`);
   if (step.processedAt) lines.push(`\uCC98\uB9AC \uC77C\uC2DC: ${formatDateTime(step.processedAt)}`);
@@ -102,14 +122,53 @@ function stepTooltip(step, index, typeLabels) {
   }
   return /* @__PURE__ */ jsx(Fragment, { children: lines.map((line) => /* @__PURE__ */ jsx("span", { style: { display: "block" }, children: line }, line)) });
 }
+var OUTCOME_NOTICE = {
+  approved: {
+    tone: "success",
+    icon: "check-check",
+    badge: "\uC790\uB3D9 \uC2B9\uC778",
+    text: "\uACB0\uC7AC \uB2E8\uACC4 \uC5C6\uC774 \uC790\uB3D9 \uC2B9\uC778\uB418\uC5C8\uC2B5\uB2C8\uB2E4"
+  },
+  pending: {
+    tone: "success",
+    icon: "check-check",
+    badge: "\uC790\uB3D9 \uC2B9\uC778",
+    text: "\uACB0\uC7AC \uB2E8\uACC4\uAC00 \uC5C6\uC5B4 \uC62C\uB9AC\uB294 \uC989\uC2DC \uC2B9\uC778\uB429\uB2C8\uB2E4"
+  },
+  rejected: { tone: "danger", icon: "x", badge: "\uBC18\uB824", text: "\uACB0\uC7AC \uB2E8\uACC4 \uC5C6\uC774 \uBC18\uB824\uB418\uC5C8\uC2B5\uB2C8\uB2E4" },
+  cancelled: { tone: "neutral", icon: "circle-x", badge: "\uCDE8\uC18C", text: "\uACB0\uC7AC\uAC00 \uCDE8\uC18C\uB418\uC5C8\uC2B5\uB2C8\uB2E4" }
+};
+var OUTCOME_STATUS = {
+  approved: "approved",
+  pending: "pending",
+  rejected: "rejected",
+  cancelled: "cancelled"
+};
+function normalizeOutcome(outcome) {
+  return outcome && Object.prototype.hasOwnProperty.call(OUTCOME_NOTICE, outcome) ? outcome : "approved";
+}
 function ApprovalStepperImpl({
   requester,
   steps,
+  decidedBy,
+  decidedAt,
+  outcome,
   onStepClick,
   typeLabels
 }) {
-  const safeSteps = steps ?? [];
   const clickable = typeof onStepClick === "function";
+  const result = normalizeOutcome(outcome);
+  const decider = decidedBy?.trim();
+  if (steps === null || steps === void 0) return null;
+  const safeSteps = steps.length > 0 ? steps : decider ? [
+    {
+      id: "__decision",
+      name: "\uACB0\uC7AC",
+      status: OUTCOME_STATUS[result],
+      approver: decider,
+      processedAt: decidedAt?.trim() || void 0
+    }
+  ] : [];
   const requesterNode = requester ? /* @__PURE__ */ jsxs("div", { style: nodeStyle, children: [
     /* @__PURE__ */ jsx(
       "span",
@@ -127,17 +186,27 @@ function ApprovalStepperImpl({
     /* @__PURE__ */ jsx("span", { className: "wp-caption", style: nodeTextStyle, children: requester.sub?.trim() || "\uC2E0\uCCAD\uC790" })
   ] }) : null;
   if (safeSteps.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { overflowX: "auto", paddingBottom: "var(--wp-space-1)" }, children: [
-      requesterNode,
-      requesterNode ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: connectorStyle }) : null,
-      /* @__PURE__ */ jsxs("div", { style: nodeStyle, children: [
-        /* @__PURE__ */ jsxs(Badge, { tone: "success", size: "lg", children: [
-          /* @__PURE__ */ jsx(Icon, { name: "check-check", size: 14, style: { marginRight: "var(--wp-space-1)" } }),
-          "\uC790\uB3D9 \uC2B9\uC778"
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { textAlign: "center", whiteSpace: "nowrap" }, children: "\uACB0\uC7AC \uB2E8\uACC4\uAC00 \uC5C6\uC5B4 \uC790\uB3D9\uC73C\uB85C \uC2B9\uC778\uB429\uB2C8\uB2E4" })
-      ] })
-    ] });
+    const notice = OUTCOME_NOTICE[result];
+    const when = decidedAt?.trim();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "wp-row",
+        style: { alignItems: "flex-start", overflowX: "auto", paddingBottom: "var(--wp-space-1)" },
+        children: [
+          requesterNode,
+          requesterNode ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: connectorStyle }) : null,
+          /* @__PURE__ */ jsxs("div", { style: noticeNodeStyle, "data-outcome": result, children: [
+            /* @__PURE__ */ jsxs(Badge, { tone: notice.tone, size: "lg", children: [
+              /* @__PURE__ */ jsx(Icon, { name: notice.icon, size: 14, style: { marginRight: "var(--wp-space-1)" } }),
+              notice.badge
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "wp-caption", style: noticeTextStyle, children: notice.text }),
+            when ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { ...noticeTextStyle, color: "var(--wp-text-muted)" }, children: formatDateTime(when) }) : null
+          ] })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(
     "div",
@@ -154,8 +223,9 @@ function ApprovalStepperImpl({
       children: [
         requesterNode,
         safeSteps.map((step, index) => {
-          const status = step.status ?? "pending";
+          const status = normalizeStepStatus(step.status);
           const meta = STATUS_META[status];
+          const muted = status === "skipped" || status === "cancelled";
           const body = /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { style: circleStyle(meta.bg, meta.border, meta.fg, status === "current"), children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: 16 }) }),
             /* @__PURE__ */ jsx(
@@ -164,7 +234,7 @@ function ApprovalStepperImpl({
                 className: "wp-body-sm",
                 style: {
                   ...nodeTextStyle,
-                  color: status === "skipped" ? "var(--wp-text-muted)" : "var(--wp-text-strong)"
+                  color: muted ? "var(--wp-text-muted)" : "var(--wp-text-strong)"
                 },
                 children: stepTitle(step, index, typeLabels)
               }
@@ -208,4 +278,4 @@ function ApprovalStepperImpl({
 }
 var ApprovalStepper = boxed(ApprovalStepperImpl, "ApprovalStepper");
 
-export { ApprovalStepper };
+export { ApprovalStepper, normalizeStepStatus };

package/dist/{chunk-RWSH2MBU.js → chunk-X2NIRVLN.js}

@@ -1,25 +1,31 @@
+import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-BITS7UJY.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-XQPTSEJC.js';
-import { Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useIsMobile } from './chunk-GSM664TX.js';
+import { Icon } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ANCHOR_GAP = 8;
 var VIEWPORT_EDGE = 8;
-function anchorTo(host, height) {
-  if (!host || typeof window === "undefined") return null;
-  const rect = host.getBoundingClientRect();
-  const below = window.innerHeight - rect.bottom;
+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 ? window.innerHeight - rect.top + ANCHOR_GAP : void 0,
-    minWidth: rect.width
+    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(() => {
@@ -27,7 +33,7 @@ function usePopoverAnchor(open, hostRef, popRef, height) {
       setAnchor(null);
       return;
     }
-    const place = () => setAnchor(anchorTo(hostRef.current, height));
+    const place = () => setAnchor(anchorToHost(hostRef.current, height));
     place();
     window.addEventListener("scroll", place, true);
     window.addEventListener("resize", place);
@@ -57,7 +63,14 @@ var ANCHORED_POP_CSS = `
 `;
 function anchorStyle(anchor) {
   if (!anchor) return void 0;
-  return { left: anchor.left, top: anchor.top, bottom: anchor.bottom, minWidth: anchor.minWidth };
+  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);
@@ -279,7 +292,7 @@ function TimePickerImpl({
 var TP_CSS = `
 .wp-tp-host{position:relative}
 .wp-tp-input{padding-right:6px;min-width:calc(5ch + 36px)}
-.wp-tp-pop{padding:var(--wp-space-1);max-height:260px;overflow-y:auto;overscroll-behavior:contain}
+.wp-tp-pop{padding:var(--wp-space-1);max-height:min(260px,var(--wp-pop-avail,260px));overflow-y:auto;overscroll-behavior:contain}
 .wp-tp-opt{display:block;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-family:var(--wp-font-mono);font-size:12.5px;color:var(--wp-text-default);text-align:left;cursor:pointer}
 .wp-tp-opt:hover{background:var(--wp-surface-hover)}
 .wp-tp-opt:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:-2px}
@@ -360,6 +373,33 @@ function splitDateTime(value) {
   const [date = "", time = ""] = value.split(/[T ]/, 2);
   return [date, time.slice(0, 5)];
 }
+var ZONED_RE = /^(\d{4}-\d{2}-\d{2})[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?\s*(Z|[+-]\d{2}(?::?\d{2})?)$/i;
+function isZonedDateTime(value) {
+  return typeof value === "string" && ZONED_RE.test(value.trim());
+}
+function toLocalWallClock(value) {
+  const match = ZONED_RE.exec(value.trim());
+  if (!match) return value;
+  const [, date, hh, mm, ss = "00", zone] = match;
+  const offset = zone.toUpperCase() === "Z" ? "Z" : `${zone.slice(0, 3)}:${zone.length > 3 ? zone.slice(-2) : "00"}`;
+  const instant = /* @__PURE__ */ new Date(`${date}T${hh}:${mm}:${ss}${offset}`);
+  if (Number.isNaN(instant.getTime())) return value;
+  const h = String(instant.getHours()).padStart(2, "0");
+  const m = String(instant.getMinutes()).padStart(2, "0");
+  return `${formatYmd(instant)}T${h}:${m}`;
+}
+function withLocalOffset(wall) {
+  const [date, time] = splitDateTime(wall);
+  const day = parseYmd(date);
+  const minuteOfDay = parseHm(time);
+  if (!day || minuteOfDay === void 0) return wall;
+  const local = new Date(day.getFullYear(), day.getMonth(), day.getDate(), Math.floor(minuteOfDay / 60), minuteOfDay % 60, 0, 0);
+  const minutes = -local.getTimezoneOffset();
+  const sign = minutes >= 0 ? "+" : "-";
+  const abs = Math.abs(minutes);
+  const zone = `${sign}${String(Math.floor(abs / 60)).padStart(2, "0")}:${String(abs % 60).padStart(2, "0")}`;
+  return `${date}T${time}:00${zone}`;
+}
 function toFieldText(value, withTime) {
   if (!withTime) return splitDateTime(value)[0];
   const [date, time] = splitDateTime(value);
@@ -617,6 +657,7 @@ function DatePickerImpl({
   disabled = false,
   size = "md",
   withTime = false,
+  zoned,
   locale
 }) {
   const loc = resolveLocale(locale, KO_LOCALE.calendarLabel);
@@ -626,7 +667,10 @@ function DatePickerImpl({
   const popRef = useRef(null);
   const inputRef = useRef(null);
   const isControlled = value !== void 0;
-  const currentValue = (isControlled ? value : innerValue) ?? "";
+  const rawValue = (isControlled ? value : innerValue) ?? "";
+  const currentValue = useMemo(() => toLocalWallClock(String(rawValue)), [rawValue]);
+  const sawZone = useRef(false);
+  if (isZonedDateTime(rawValue)) sawZone.current = true;
   const fieldText = useMemo(() => toFieldText(currentValue, withTime), [currentValue, withTime]);
   const [text, setText] = useState(fieldText);
   useEffect(() => {
@@ -645,7 +689,9 @@ function DatePickerImpl({
   const anchor = usePopoverAnchor(open, hostRef, popRef, CALENDAR_HEIGHT);
   const portal = usePortalTo();
   const isInvalid = Boolean(invalid);
-  const commit = (next) => {
+  const commit = (wall) => {
+    const emitZone = withTime && wall !== "" && (zoned ?? sawZone.current);
+    const next = emitZone ? withLocalOffset(wall) : wall;
     if (!isControlled) setInnerValue(next);
     onChange?.(next);
   };
@@ -744,6 +790,10 @@ function DatePickerImpl({
     )
   ] });
 }
+function rangeEndText(value) {
+  if (typeof value !== "string") return "";
+  return isZonedDateTime(value) ? toLocalWallClock(value).slice(0, 10) : value;
+}
 function DateRangePickerImpl({
   value,
   onChange,
@@ -763,8 +813,10 @@ function DateRangePickerImpl({
   const toRef = useRef(null);
   const isControlled = value !== void 0;
   const currentRange = (isControlled ? value : innerRange) ?? {};
-  const fromValue = currentRange.from ?? "";
-  const toValue = currentRange.to ?? "";
+  const fromValue = rangeEndText(currentRange.from);
+  const toValue = rangeEndText(currentRange.to);
+  const isMobile = useIsMobile();
+  const monthCount = isMobile ? 1 : 2;
   const [fromText, setFromText] = useState(fromValue);
   const [toText, setToText] = useState(toValue);
   useEffect(() => {
@@ -915,14 +967,14 @@ function DateRangePickerImpl({
         "div",
         {
           ref: popRef,
-          className: "wp-anchored-pop wp-dp-pop wp-dp-pop--wide",
+          className: monthCount > 1 ? "wp-anchored-pop wp-dp-pop wp-dp-pop--wide" : "wp-anchored-pop wp-dp-pop",
           style: anchorStyle(anchor),
           role: "dialog",
           "aria-label": loc.calendarLabel,
           children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
             Calendar,
             {
-              monthCount: 2,
+              monthCount,
               minDate,
               maxDate,
               focusDate,
@@ -952,7 +1004,9 @@ function DateRangePickerImpl({
 var DP_CSS = `
 .wp-dp-host{position:relative}
 .wp-dp-pop--wide{max-width:min(92vw,720px)}
-.wp-dp-pop__body{padding:var(--wp-space-4);max-height:60vh;overflow:auto}
+/* \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}
 .wp-dp-range{display:flex;align-items:center;gap:var(--wp-space-1)}
 .wp-dp-range>*{flex:1 1 0;min-width:0}
 .wp-dp-range__sep{flex:none;color:var(--wp-text-subtle)}

package/dist/{chunk-AXGF4M57.js → chunk-XAXROQKB.js}

@@ -1,4 +1,4 @@
-import { boxed, containerLayoutStyle } from './chunk-5WW4MBRO.js';
+import { boxed, containerLayoutStyle } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-NIJUVTEW.js → chunk-XG22XKKD.js}

@@ -1,6 +1,6 @@
-import { DatePicker, TimePicker } from './chunk-RWSH2MBU.js';
-import { Field } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { DatePicker, TimePicker } from './chunk-X2NIRVLN.js';
+import { Field } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-A5XQOEVH.js → chunk-YN7X7BEO.js}

@@ -1,7 +1,7 @@
-import { fetchAllPages } from './chunk-Q4SWUINA.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { fetchAllPages } from './chunk-LKQJJSVJ.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-YNEEJCSZ.js';
+import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-BLFJMMBW.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-KO6OEY3G.js → chunk-YNEEJCSZ.js}

@@ -1,17 +1,7 @@
-import { warnOnce } from './chunk-RNOUXUBO.js';
+import { DEV } from './chunk-GSM664TX.js';
+import { warnOnce } from './chunk-BLFJMMBW.js';
 import { createContext, useContext } from 'react';
 
-// src/env.ts
-var DEV = (() => {
-  try {
-    const meta = import.meta;
-    return Boolean(meta.env?.DEV);
-  } catch {
-    return false;
-  }
-})();
-
-// src/adapter.ts
 function isSafeNavigationTarget(to) {
   if (typeof to !== "string") return false;
   const value = to.replace(/[\u0000-\u0020]/g, "");
@@ -115,4 +105,4 @@ function hostRawFetchOf(adapter) {
   };
 }
 
-export { DEV, SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, hostRawFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };
+export { SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, hostRawFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };

package/dist/{chunk-7P7N43JV.js → chunk-YZTTFEL4.js}

@@ -1,5 +1,5 @@
-import { IconButton, Input } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { IconButton, Input } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';