@wipco/sdui 0.7.0 → 0.8.1

package/dist/DatePicker-BndreCPl.d.ts

@@ -0,0 +1,35 @@
+import { S as SduiBoxProps } from './layout-B1QrIBm6.js';
+import React__default from 'react';
+
+interface DatePickerProps {
+    /** 선택된 날짜 (YYYY-MM-DD). 주어지면 controlled로 동작. */
+    value?: string;
+    onChange?: (value: string) => void;
+    /** 선택 가능 최소 날짜 (YYYY-MM-DD, 포함). */
+    min?: string;
+    /** 선택 가능 최대 날짜 (YYYY-MM-DD, 포함). */
+    max?: string;
+    placeholder?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+interface DateRangeValue {
+    from?: string;
+    to?: string;
+}
+interface DateRangePickerProps {
+    /** 선택된 기간 (YYYY-MM-DD). 주어지면 controlled로 동작. */
+    value?: DateRangeValue;
+    onChange?: (value: DateRangeValue) => void;
+    min?: string;
+    max?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ./boxed.tsx}에 있다. */
+declare const DatePicker: React__default.FC<DatePickerProps & SduiBoxProps>;
+/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ./boxed.tsx}에 있다. */
+declare const DateRangePicker: React__default.FC<DateRangePickerProps & SduiBoxProps>;
+
+export { type DatePickerProps as D, type DateRangePickerProps as a, DatePicker as b, DateRangePicker as c, type DateRangeValue as d };

package/dist/{chunk-XY2JKFAV.js → chunk-3PYMVHL3.js}

@@ -1,4 +1,5 @@
-import { IconButton } from './chunk-CRSY67TZ.js';
+import { IconButton } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -11,7 +12,7 @@ var INITIAL_VIEW = { scale: 1, x: 0, y: 0 };
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
-function ImageLightbox({ src, alt, thumbClassName, thumbStyle, children }) {
+function ImageLightboxImpl({ src, alt, thumbClassName, thumbStyle, children }) {
   const [open, setOpen] = useState(false);
   const [view, setView] = useState(INITIAL_VIEW);
   const [dragging, setDragging] = useState(false);
@@ -305,5 +306,6 @@ function ImageLightbox({ src, alt, thumbClassName, thumbStyle, children }) {
     overlay
   ] });
 }
+var ImageLightbox = boxed(ImageLightboxImpl, "ImageLightbox");
 
 export { ImageLightbox };

package/dist/{chunk-562QK2G3.js → chunk-4CZJF5PR.js}

@@ -1,4 +1,5 @@
-import { Icon } from './chunk-CRSY67TZ.js';
+import { Icon } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -28,7 +29,7 @@ function overwriteClipboard() {
   } catch {
   }
 }
-function SecureScreen({ enabled = true, notice, children }) {
+function SecureScreenImpl({ enabled = true, notice, children }) {
   const hostRef = useRef(null);
   const [cover, setCover] = useState(null);
   const [prevEnabled, setPrevEnabled] = useState(enabled);
@@ -106,5 +107,6 @@ function SecureScreen({ enabled = true, notice, children }) {
     ] }) : null
   ] });
 }
+var SecureScreen = boxed(SecureScreenImpl, "SecureScreen");
 
 export { SecureScreen };

package/dist/{chunk-73ZMMJRX.js → chunk-4IRLQWQC.js}

@@ -1,4 +1,5 @@
-import { Icon, Badge } from './chunk-CRSY67TZ.js';
+import { Icon, Badge } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -16,7 +17,7 @@ var DIFF_CSS = `
 function DiffStyles() {
   return /* @__PURE__ */ jsx("style", { href: "erp-diffview", precedence: "medium", children: DIFF_CSS });
 }
-function DiffView({ fields, lists }) {
+function DiffViewImpl({ fields, lists }) {
   const hasFields = fields !== void 0 && fields.length > 0;
   const hasLists = lists !== void 0 && lists.length > 0;
   if (!hasFields && !hasLists) {
@@ -68,5 +69,6 @@ function DiffView({ fields, lists }) {
     }) }) : null
   ] });
 }
+var DiffView = boxed(DiffViewImpl, "DiffView");
 
 export { DiffView };

package/dist/{chunk-KAXPN6KT.js → chunk-5A7BWIGN.js}

@@ -1,6 +1,7 @@
-import { Icon } from './chunk-CRSY67TZ.js';
-import { createContext, useContext, useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { Icon } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { createContext, useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/env.ts
 var DEV = (() => {
@@ -297,7 +298,7 @@ function triggerClassName(size, invalid) {
   if (invalid) classes.push("wp-input--invalid");
   return classes.join(" ");
 }
-function DatePicker({
+function DatePickerImpl({
   value,
   onChange,
   min,
@@ -366,7 +367,7 @@ function DatePicker({
     ) }) }) : null
   ] });
 }
-function DateRangePicker({
+function DateRangePickerImpl({
   value,
   onChange,
   min,
@@ -493,5 +494,7 @@ var DP_CSS = `
 .wp-dp__day--range-start .wp-dp__day-btn,.wp-dp__day--range-end .wp-dp__day-btn{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
 .wp-dp__day--range-start.wp-dp__day--today .wp-dp__day-btn,.wp-dp__day--range-end.wp-dp__day--today .wp-dp__day-btn{box-shadow:none}
 `;
+var DatePicker = boxed(DatePickerImpl, "DatePicker");
+var DateRangePicker = boxed(DateRangePickerImpl, "DateRangePicker");
 
 export { DEV, DatePicker, DateRangePicker, HoistedStyle, SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };

package/dist/{chunk-B4A4KY4K.js → chunk-7AHNAX6T.js}

@@ -1,4 +1,5 @@
-import { IconButton, Input } from './chunk-CRSY67TZ.js';
+import { IconButton, Input } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -20,7 +21,7 @@ function saveErrorMessage(err) {
   if (err instanceof Error && err.message) return err.message;
   return "\uC800\uC7A5\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.";
 }
-function InlineEdit({
+function InlineEditImpl({
   value,
   onSave,
   type = "text",
@@ -155,5 +156,6 @@ function InlineEdit({
     saveError !== null ? /* @__PURE__ */ jsx("span", { className: "wp-field__error", role: "alert", children: saveError }) : null
   ] });
 }
+var InlineEdit = boxed(InlineEditImpl, "InlineEdit");
 
 export { InlineEdit };

package/dist/{chunk-CRSY67TZ.js → chunk-B5JTXYDB.js}

@@ -1,8 +1,7 @@
+import { mergeStyle, containerLayoutStyle, joinClass } from './chunk-SAN4IX6N.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/components.tsx
-
 // src/icons.ts
 var ICON_NODES = {
   "activity": [
@@ -697,9 +696,6 @@ function warnOnce(key, message, level = "error") {
   if (level === "warn") console.warn(message);
   else console.error(message);
 }
-function cx(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
 function Icon({ name, size = 18, strokeWidth = 1.5, className = "", style, title, ...rest }) {
   const nodes = Object.hasOwn(ICON_NODES, name) ? ICON_NODES[name] : void 0;
   if (!nodes) return null;
@@ -734,8 +730,10 @@ function Button({
   block = false,
   disabled = false,
   as = "button",
+  justify,
   children,
   className = "",
+  style,
   ...rest
 }) {
   const Tag2 = as;
@@ -749,6 +747,7 @@ function Button({
     Tag2,
     {
       className: classes.join(" "),
+      style: mergeStyle(containerLayoutStyle({ justify }), style),
       disabled: Tag2 === "button" ? disabled || loading : void 0,
       "aria-disabled": disabled || void 0,
       ...rest,
@@ -813,7 +812,7 @@ function Textarea({ invalid = false, rows = 3, className = "", ...rest }) {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
-      className: cx("wp-textarea", invalid && "wp-textarea--invalid", className),
+      className: joinClass("wp-textarea", invalid && "wp-textarea--invalid", className),
       rows,
       "aria-invalid": invalid || void 0,
       ...rest
@@ -872,7 +871,7 @@ function Checkbox({ label, description, indeterminate = false, disabled = false,
   React.useEffect(() => {
     if (ref.current) ref.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ jsxs("label", { className: cx("wp-check", disabled && "wp-check--disabled", className), children: [
+  return /* @__PURE__ */ jsxs("label", { className: joinClass("wp-check", disabled && "wp-check--disabled", className), children: [
     /* @__PURE__ */ jsx("input", { ref, type: "checkbox", disabled, ...rest }),
     /* @__PURE__ */ jsx("span", { className: "wp-check__box", children: /* @__PURE__ */ jsx(Icon, { name: indeterminate ? "minus" : "check", size: 12, strokeWidth: 2.5 }) }),
     label || description ? /* @__PURE__ */ jsxs("span", { className: "wp-check__text", children: [
@@ -882,14 +881,14 @@ function Checkbox({ label, description, indeterminate = false, disabled = false,
   ] });
 }
 function Switch({ label, size = "md", disabled = false, className = "", ...rest }) {
-  return /* @__PURE__ */ jsxs("label", { className: cx("wp-switch", size === "sm" && "wp-switch--sm", className), children: [
+  return /* @__PURE__ */ jsxs("label", { className: joinClass("wp-switch", size === "sm" && "wp-switch--sm", className), children: [
     /* @__PURE__ */ jsx("input", { type: "checkbox", role: "switch", disabled, ...rest }),
     /* @__PURE__ */ jsx("span", { className: "wp-switch__track" }),
     label ? /* @__PURE__ */ jsx("span", { children: label }) : null
   ] });
 }
 function Field({ label, hint, error, required = false, htmlFor, layout = "stacked", children, className = "", ...rest }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("wp-field", layout === "horizontal" && "wp-field--horizontal", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: joinClass("wp-field", layout === "horizontal" && "wp-field--horizontal", className), ...rest, children: [
     label ? /* @__PURE__ */ jsxs("label", { className: "wp-field__label", htmlFor, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "wp-field__req", "aria-hidden": "true", children: "*" }) : null
@@ -938,14 +937,14 @@ function Badge({ tone = "neutral", dot = false, size = "md", children, className
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cx("wp-badge", `wp-badge--${tone}`, dot && "wp-badge--dot", size === "lg" && "wp-badge--lg", className),
+      className: joinClass("wp-badge", `wp-badge--${tone}`, dot && "wp-badge--dot", size === "lg" && "wp-badge--lg", className),
       ...rest,
       children
     }
   );
 }
 function Tag({ color, filled = false, onRemove, children, className = "", ...rest }) {
-  return /* @__PURE__ */ jsxs("span", { className: cx("wp-tag", filled && "wp-tag--filled", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs("span", { className: joinClass("wp-tag", filled && "wp-tag--filled", className), ...rest, children: [
     color ? /* @__PURE__ */ jsx("span", { className: "wp-tag__dot", style: { background: color } }) : null,
     children,
     onRemove ? /* @__PURE__ */ jsx("span", { className: "wp-tag__x", role: "button", "aria-label": "\uC81C\uAC70", onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 10, strokeWidth: 2 }) }) : null
@@ -962,7 +961,7 @@ function Alert({ tone = "info", title, children, actions, onClose, bar = false,
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx("wp-alert", `wp-alert--${tone}`, bar && "wp-alert--bar", className),
+      className: joinClass("wp-alert", `wp-alert--${tone}`, bar && "wp-alert--bar", className),
       role: tone === "danger" ? "alert" : "status",
       ...rest,
       children: [
@@ -978,7 +977,7 @@ function Alert({ tone = "info", title, children, actions, onClose, bar = false,
   );
 }
 function Toast({ tone = "info", title, children, action, onClose, className = "", ...rest }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("wp-toast", `wp-toast--${tone}`, className), role: "status", ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: joinClass("wp-toast", `wp-toast--${tone}`, className), role: "status", ...rest, children: [
     /* @__PURE__ */ jsx("span", { className: "wp-toast__icon", children: /* @__PURE__ */ jsx(Icon, { name: TONE_ICONS[tone] ?? "info", size: 16 }) }),
     /* @__PURE__ */ jsxs("div", { className: "wp-toast__body", children: [
       title ? /* @__PURE__ */ jsx("span", { className: "wp-toast__title", children: title }) : null,
@@ -992,7 +991,7 @@ function Tabs({ items = [], value, onChange, size = "md", onChrome = false, clas
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx("wp-tabs", size === "lg" && "wp-tabs--lg", onChrome && "wp-tabs--onchrome", className),
+      className: joinClass("wp-tabs", size === "lg" && "wp-tabs--lg", onChrome && "wp-tabs--onchrome", className),
       role: "tablist",
       ...rest,
       children: items.map((item) => /* @__PURE__ */ jsxs(
@@ -1077,7 +1076,7 @@ function Table({
 }
 function StatCard({ label, value, unit, delta, trend = "flat", icon, footer, size = "md", className = "", ...rest }) {
   const arrow = trend === "up" ? "arrow-up-right" : trend === "down" ? "arrow-down" : "minus";
-  return /* @__PURE__ */ jsx("div", { className: cx("wp-card", className), ...rest, children: /* @__PURE__ */ jsx("div", { className: "wp-card__body", children: /* @__PURE__ */ jsxs("div", { className: size === "sm" ? "wp-stat wp-stat--sm" : "wp-stat", children: [
+  return /* @__PURE__ */ jsx("div", { className: joinClass("wp-card", className), ...rest, children: /* @__PURE__ */ jsx("div", { className: "wp-card__body", children: /* @__PURE__ */ jsxs("div", { className: size === "sm" ? "wp-stat wp-stat--sm" : "wp-stat", children: [
     /* @__PURE__ */ jsxs("div", { className: "wp-stat__label", children: [
       icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 14 }) : null,
       label
@@ -1094,7 +1093,7 @@ function StatCard({ label, value, unit, delta, trend = "flat", icon, footer, siz
   ] }) }) });
 }
 function EmptyState({ icon = "square-dashed", title, children, actions, tight = false, className = "", ...rest }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("wp-empty", tight && "wp-empty--tight", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: joinClass("wp-empty", tight && "wp-empty--tight", className), ...rest, children: [
     /* @__PURE__ */ jsx("span", { className: "wp-empty__mark", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20 }) }),
     title ? /* @__PURE__ */ jsx("div", { className: "wp-empty__title", children: title }) : null,
     children ? /* @__PURE__ */ jsx("div", { className: "wp-empty__text", children }) : null,
@@ -1105,7 +1104,7 @@ function Spinner({ size = "md", inverse = false, label, className = "", ...rest
   const el = /* @__PURE__ */ jsx(
     "span",
     {
-      className: cx("wp-spinner", size !== "md" && `wp-spinner--${size}`, inverse && "wp-spinner--inverse", className),
+      className: joinClass("wp-spinner", size !== "md" && `wp-spinner--${size}`, inverse && "wp-spinner--inverse", className),
       role: "status",
       "aria-label": label || "\uB85C\uB529 \uC911",
       ...rest
@@ -1149,7 +1148,7 @@ function ProgressBar({
   if (!showValue && !label) {
     return /* @__PURE__ */ jsx("div", { className, ...rest, children: bar });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cx("wp-col", className), style: { gap: 5 }, ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: joinClass("wp-col", className), style: { gap: 5 }, ...rest, children: [
     label ? /* @__PURE__ */ jsxs("div", { className: "wp-row wp-row--between", children: [
       /* @__PURE__ */ jsx("span", { className: "wp-caption", children: label }),
       showValue ? /* @__PURE__ */ jsxs("span", { className: "wp-caption wp-num", children: [
@@ -1182,7 +1181,7 @@ function pageItems(page, total) {
 function Pagination({ page = 1, pageCount = 1, total, pageSize, onChange, className = "", ...rest }) {
   const from = total != null && pageSize ? (page - 1) * pageSize + 1 : null;
   const to = total != null && pageSize ? Math.min(total, page * pageSize) : null;
-  return /* @__PURE__ */ jsxs("div", { className: cx("wp-pager", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: joinClass("wp-pager", className), ...rest, children: [
     from != null ? /* @__PURE__ */ jsxs("span", { className: "wp-num", children: [
       from,
       "\u2013",
@@ -1309,11 +1308,10 @@ function Tooltip({ label, shortcut, placement = "top", wrap = false, children, c
   }[placement];
   const classes = ["wp-tooltip", "wp-tooltip--" + placement];
   if (wrap) classes.push("wp-tooltip--wrap");
-  if (className) classes.push(className);
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: "wp-tooltip-host",
+      className: joinClass("wp-tooltip-host", className),
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
       onFocus: () => setOpen(true),

package/dist/{chunk-7Y4J7EOK.js → chunk-BMZKZGJF.js}

@@ -1,6 +1,6 @@
+import { boxed } from './chunk-SAN4IX6N.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/widgets/StackedMeter.tsx
 var resolveColor = (color, index) => {
   if (!color) return `var(--wp-series-${index % 8 + 1})`;
   if (/^[1-8]$/.test(color)) return `var(--wp-series-${color})`;
@@ -15,7 +15,7 @@ var dotStyle = (color) => ({
   background: color,
   flexShrink: 0
 });
-function StackedMeter({
+function StackedMeterImpl({
   segments,
   showLegend = true,
   height = 10
@@ -111,5 +111,6 @@ function StackedMeter({
     )
   ] });
 }
+var StackedMeter = boxed(StackedMeterImpl, "StackedMeter");
 
 export { StackedMeter };

package/dist/{chunk-63U54JAG.js → chunk-BT4HC3WR.js}

@@ -1,4 +1,5 @@
-import { IconButton, Badge } from './chunk-CRSY67TZ.js';
+import { IconButton, Badge } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -101,7 +102,7 @@ var nodeCardStyle = (selected) => ({
   cursor: "pointer",
   transition: "box-shadow var(--wp-duration-fast), border-color var(--wp-duration-fast)"
 });
-function OrgChart({
+function OrgChartImpl({
   root,
   onNodeClick,
   selectedId,
@@ -429,5 +430,6 @@ function OrgChart({
     }
   );
 }
+var OrgChart = boxed(OrgChartImpl, "OrgChart");
 
 export { OrgChart };

package/dist/{chunk-L4ORCIVN.js → chunk-JONNWN6N.js}

@@ -1,4 +1,5 @@
-import { Textarea, Icon } from './chunk-CRSY67TZ.js';
+import { Textarea, Icon } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -41,7 +42,7 @@ function describeParseError(err, text) {
   }
   return `JSON \uAD6C\uBB38 \uC624\uB958: ${message}`;
 }
-function JsonField({
+function JsonFieldImpl({
   value,
   onChange,
   rows = 6,
@@ -115,5 +116,6 @@ function JsonField({
     }
   );
 }
+var JsonField = boxed(JsonFieldImpl, "JsonField");
 
 export { JsonField };

package/dist/{chunk-5O6PFLFJ.js → chunk-JWYBFODH.js}

@@ -1,4 +1,5 @@
-import { Button } from './chunk-CRSY67TZ.js';
+import { Button } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -18,7 +19,7 @@ var PRINT_CSS = `
 function PrintStyles() {
   return /* @__PURE__ */ jsx("style", { href: "erp-print", precedence: "medium", children: PRINT_CSS });
 }
-function PrintSheet({ title, children, autoPrint = false }) {
+function PrintSheetImpl({ title, children, autoPrint = false }) {
   useEffect(() => {
     if (!autoPrint || !window.opener) return;
     const timer = window.setTimeout(() => window.print(), 500);
@@ -36,5 +37,6 @@ function PrintSheet({ title, children, autoPrint = false }) {
     ] })
   ] });
 }
+var PrintSheet = boxed(PrintSheetImpl, "PrintSheet");
 
 export { PrintSheet };

package/dist/{chunk-TKB7H5DB.js → chunk-NIRR6KSQ.js}

@@ -1,4 +1,4 @@
-import { Tag, Input, Button, IconButton, Field, Checkbox } from './chunk-CRSY67TZ.js';
+import { Tag, Input, Button, IconButton, Field, Checkbox } from './chunk-B5JTXYDB.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-USKRM22W.js → chunk-O4U7Y3XL.js}

@@ -1,6 +1,6 @@
+import { boxed } from './chunk-SAN4IX6N.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/widgets/SummaryTable.tsx
 var SUMMARY_TABLE_CSS = `
 .erp-sumtable tfoot td{height:var(--wp-row-h);padding:0 12px;background:var(--wp-surface-sunken);border-top:var(--wp-border-w) solid var(--wp-border-strong);color:var(--wp-text-strong);font-weight:var(--wp-weight-semibold);vertical-align:middle}
 .erp-sumtable.wp-table--dense tfoot td{height:var(--wp-row-h-dense)}
@@ -17,7 +17,7 @@ function cellClass(column) {
   if (column.strong) classes.push("wp-table__strong");
   return classes.length > 0 ? classes.join(" ") : void 0;
 }
-function SummaryTable({ columns, rows, footer, dense = false }) {
+function SummaryTableImpl({ columns, rows, footer, dense = false }) {
   const tableClass = dense ? "wp-table wp-table--dense erp-sumtable" : "wp-table erp-sumtable";
   return /* @__PURE__ */ jsxs("div", { className: "erp-sumtable__scroll", children: [
     /* @__PURE__ */ jsx(SummaryTableStyles, {}),
@@ -35,5 +35,6 @@ function SummaryTable({ columns, rows, footer, dense = false }) {
     ] })
   ] });
 }
+var SummaryTable = boxed(SummaryTableImpl, "SummaryTable");
 
 export { SummaryTable };

package/dist/{chunk-H32WQHB7.js → chunk-OINKP2BE.js}

@@ -1,9 +1,10 @@
-import { includesLooseSearch } from './chunk-TKB7H5DB.js';
-import { Button, Dialog, Input, Tag, Checkbox } from './chunk-CRSY67TZ.js';
+import { includesLooseSearch } from './chunk-NIRR6KSQ.js';
+import { Button, Dialog, Input, Tag, Checkbox } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import React, { useMemo, useState, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-function SearchableMultiPicker({
+function SearchableMultiPickerImpl({
   title,
   options,
   values,
@@ -182,5 +183,6 @@ function SearchableMultiPicker({
     ) : null
   ] });
 }
+var SearchableMultiPicker = boxed(SearchableMultiPickerImpl, "SearchableMultiPicker");
 
 export { SearchableMultiPicker };

package/dist/{chunk-QBIVW7E6.js → chunk-SAN4IX6N.js}

@@ -1,3 +1,5 @@
+import React from 'react';
+
 // src/layout.ts
 var GAP_CSS = {
   "2": "2px",
@@ -34,6 +36,19 @@ var TEXT_ALIGN_CSS = {
   right: "right"
 };
 var COLUMNS = /* @__PURE__ */ new Set([1, 2, 3, 4, 5, 6]);
+var SIZE_CSS = {
+  "96": "96px",
+  "128": "128px",
+  "160": "160px",
+  "192": "192px",
+  "224": "224px",
+  "256": "256px",
+  "288": "288px",
+  "320": "320px",
+  "384": "384px",
+  "480": "480px",
+  full: "100%"
+};
 function lookup(table, value) {
   if (value === void 0 || value === null) return void 0;
   return table[String(value)];
@@ -57,7 +72,13 @@ var CHILD_LAYOUT_PROPS = /* @__PURE__ */ new Set([
   "shrink",
   "span",
   "selfAlign",
-  "truncate"
+  "truncate",
+  "width",
+  "maxWidth",
+  "minWidth",
+  "marginTop",
+  "marginBottom",
+  "pushEnd"
 ]);
 function childLayoutFrom(props) {
   const style = {};
@@ -67,11 +88,31 @@ function childLayoutFrom(props) {
   if (Number.isInteger(span) && COLUMNS.has(span)) style.gridColumn = `span ${span}`;
   const alignSelf = lookup(ALIGN_CSS, props.selfAlign);
   if (alignSelf !== void 0) style.alignSelf = alignSelf;
+  const width = lookup(SIZE_CSS, props.width);
+  if (width !== void 0) style.width = width;
+  const maxWidth = lookup(SIZE_CSS, props.maxWidth);
+  if (maxWidth !== void 0) style.maxWidth = maxWidth;
+  const minWidth = lookup(SIZE_CSS, props.minWidth);
+  if (minWidth !== void 0) style.minWidth = minWidth;
+  const marginTop = lookup(GAP_CSS, props.marginTop);
+  if (marginTop !== void 0) style.marginTop = marginTop;
+  const marginBottom = lookup(GAP_CSS, props.marginBottom);
+  if (marginBottom !== void 0) style.marginBottom = marginBottom;
+  if (props.pushEnd === true) style.marginInlineStart = "auto";
   const className = props.truncate ? "wp-truncate" : void 0;
   const hasStyle = Object.keys(style).length > 0;
   if (!hasStyle && className === void 0) return void 0;
   return { style: hasStyle ? style : void 0, className };
 }
+function mergeStyle(own, given) {
+  if (!own) return given;
+  if (!given) return own;
+  return { ...own, ...given };
+}
+function joinClass(...parts) {
+  const kept = parts.filter((part) => typeof part === "string" && part.length > 0);
+  return kept.length > 0 ? kept.join(" ") : void 0;
+}
 function typographyStyle(props) {
   const fontWeight = lookup(WEIGHT_CSS, props.weight);
   const textAlign = lookup(TEXT_ALIGN_CSS, props.textAlign);
@@ -86,5 +127,39 @@ var LAYOUT_CSS = `
 @media (max-width:900px){.wp-grid--5,.wp-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media (max-width:600px){.wp-grid--5,.wp-grid--6{grid-template-columns:minmax(0,1fr)}}
 `;
+var BOXED = /* @__PURE__ */ Symbol.for("wipco.sdui.boxed");
+function apply(element, box) {
+  const own = element.props;
+  return React.cloneElement(element, {
+    className: joinClass(own.className, box.className),
+    style: mergeStyle(own.style, box.style)
+  });
+}
+function boxed(Inner, displayName) {
+  if (Inner[BOXED] === true) return Inner;
+  const plainFunction = typeof Inner === "function" && Inner.prototype?.isReactComponent === void 0;
+  if (!plainFunction) return Inner;
+  const render = Inner;
+  const Wrapped = (props) => {
+    const { style, className, ...rest } = props;
+    const element = render(rest);
+    if (style === void 0 && className === void 0) return element;
+    if (!React.isValidElement(element)) return element;
+    if (element.type === React.Fragment) {
+      const kids = React.Children.toArray(
+        element.props.children
+      );
+      const at = kids.findIndex((kid) => React.isValidElement(kid));
+      if (at < 0) return element;
+      const next = kids.slice();
+      next[at] = apply(kids[at], { style, className });
+      return React.createElement(React.Fragment, null, ...next);
+    }
+    return apply(element, { style, className });
+  };
+  Wrapped[BOXED] = true;
+  Wrapped.displayName = displayName ?? `boxed(${Inner.displayName ?? Inner.name ?? "Component"})`;
+  return Wrapped;
+}
 
-export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, childLayoutFrom, columnsClass, containerLayoutStyle, typographyStyle };
+export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, boxed, childLayoutFrom, columnsClass, containerLayoutStyle, joinClass, mergeStyle, typographyStyle };

package/dist/{chunk-57LLG32F.js → chunk-TBAIREB3.js}

@@ -1,5 +1,6 @@
-import { includesLooseSearch } from './chunk-TKB7H5DB.js';
-import { Icon, Button, Input, Spinner } from './chunk-CRSY67TZ.js';
+import { includesLooseSearch } from './chunk-NIRR6KSQ.js';
+import { Icon, Button, Input, Spinner } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useId, useRef, useState, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -31,7 +32,7 @@ var ellipsisStyle = {
 var statusRowStyle = {
   padding: "var(--wp-space-2) var(--wp-space-3)"
 };
-function AutocompleteField({
+function AutocompleteFieldImpl({
   search,
   options,
   labelKey = "label",
@@ -278,5 +279,6 @@ function AutocompleteField({
     ) }) : null
   ] });
 }
+var AutocompleteField = boxed(AutocompleteFieldImpl, "AutocompleteField");
 
 export { AutocompleteField, toAutocompleteOptions };

package/dist/{chunk-2ARNY7WZ.js → chunk-TMAVD3WL.js}

@@ -1,8 +1,9 @@
-import { Badge, Tag } from './chunk-CRSY67TZ.js';
+import { Badge, Tag } from './chunk-B5JTXYDB.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-function TagMultiSelect({
+function TagMultiSelectImpl({
   options,
   values,
   onChange,
@@ -55,5 +56,6 @@ function TagMultiSelect({
     );
   }) });
 }
+var TagMultiSelect = boxed(TagMultiSelectImpl, "TagMultiSelect");
 
 export { TagMultiSelect };