@wipco/sdui 0.2.0 → 0.3.0

package/dist/{chunk-QJHD6HVQ.js → chunk-ZUCI34QY.js}

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
+import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components.tsx
@@ -1172,403 +1172,119 @@ function Dialog({ title, subtitle, icon, tone = "brand", size = "md", footer, on
     footer ? /* @__PURE__ */ jsx("div", { className: "wp-dialog__foot", children: footer }) : null
   ] }) });
 }
-function HoistedStyle({ id, css }) {
-  return /* @__PURE__ */ jsx("style", { href: id, precedence: "medium", children: css });
-}
-var YMD_RE = /^\d{4}-\d{2}-\d{2}$/;
-function parseYmd(value) {
-  if (typeof value !== "string" || !YMD_RE.test(value)) return void 0;
-  const y = Number(value.slice(0, 4));
-  const m = Number(value.slice(5, 7));
-  const d = Number(value.slice(8, 10));
-  const date = new Date(y, m - 1, d, 12, 0, 0, 0);
-  if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d) return void 0;
-  return date;
-}
-function formatYmd(date) {
-  const y = String(date.getFullYear()).padStart(4, "0");
-  const m = String(date.getMonth() + 1).padStart(2, "0");
-  const d = String(date.getDate()).padStart(2, "0");
-  return `${y}-${m}-${d}`;
-}
-function addDays(date, days) {
-  const next = new Date(date);
-  next.setDate(next.getDate() + days);
-  return next;
-}
-function addMonths(date, months) {
-  const next = new Date(date.getFullYear(), date.getMonth() + months, 1, 12, 0, 0, 0);
-  const lastDay = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate();
-  next.setDate(Math.min(date.getDate(), lastDay));
-  return next;
-}
-function clampDate(date, min, max) {
-  if (min && date.getTime() < min.getTime()) return min;
-  if (max && date.getTime() > max.getTime()) return max;
-  return date;
-}
-function monthIndex(date) {
-  return date.getFullYear() * 12 + date.getMonth();
-}
-function monthStart(index) {
-  return new Date(Math.floor(index / 12), index % 12, 1, 12, 0, 0, 0);
-}
-function isSameDay(a, b) {
-  return a !== void 0 && b !== void 0 && formatYmd(a) === formatYmd(b);
-}
-var WEEKDAYS_KO = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
-var WEEKS_PER_MONTH = 6;
-function buildMonthCells(index, min, max) {
-  const first = monthStart(index);
-  const gridStart = addDays(first, -first.getDay());
-  const weeks = [];
-  for (let w = 0; w < WEEKS_PER_MONTH; w += 1) {
-    const row = [];
-    for (let d = 0; d < 7; d += 1) {
-      const date = addDays(gridStart, w * 7 + d);
-      row.push({
-        date,
-        ymd: formatYmd(date),
-        outside: monthIndex(date) !== index,
-        disabled: min !== void 0 && date.getTime() < min.getTime() || max !== void 0 && date.getTime() > max.getTime()
-      });
-    }
-    weeks.push(row);
-  }
-  return weeks;
+function SegmentedControl({ items = [], value, onChange, size = "md", className = "", ...rest }) {
+  const classes = ["wp-seg"];
+  if (size === "lg") classes.push("wp-seg--lg");
+  if (className) classes.push(className);
+  return /* @__PURE__ */ jsx("div", { className: classes.join(" "), role: "tablist", ...rest, children: items.map((it) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      className: "wp-seg__item",
+      "aria-selected": value === it.value,
+      onClick: onChange ? () => onChange(it.value) : void 0,
+      children: [
+        it.icon ? /* @__PURE__ */ jsx(Icon, { name: it.icon, size: 14 }) : null,
+        it.label
+      ]
+    },
+    it.value
+  )) });
 }
-function Calendar({
-  monthCount,
-  minDate,
-  maxDate,
-  dayState,
-  onPick,
-  focusDate,
-  onFocusDateChange
-}) {
-  const focusIdx = monthIndex(focusDate);
-  const [viewIdx, setViewIdx] = useState(focusIdx);
-  const gridRef = useRef(null);
-  const focusYmd = formatYmd(focusDate);
-  const visibleIdx = focusIdx < viewIdx ? focusIdx : focusIdx > viewIdx + monthCount - 1 ? focusIdx - monthCount + 1 : viewIdx;
-  if (visibleIdx !== viewIdx) setViewIdx(visibleIdx);
-  useLayoutEffect(() => {
-    gridRef.current?.querySelector('[tabindex="0"]')?.focus();
-  }, [focusYmd]);
-  const todayYmd = formatYmd(/* @__PURE__ */ new Date());
-  const minIdx = minDate ? monthIndex(minDate) : -Infinity;
-  const maxIdx = maxDate ? monthIndex(maxDate) : Infinity;
-  const prevDisabled = visibleIdx <= minIdx;
-  const nextDisabled = visibleIdx + monthCount - 1 >= maxIdx;
-  const moveFocus = (next) => {
-    onFocusDateChange(clampDate(next, minDate, maxDate));
-  };
-  const handleKeyDown = (event) => {
-    const deltaDays = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" ? -7 : event.key === "ArrowDown" ? 7 : 0;
-    if (deltaDays !== 0) {
-      event.preventDefault();
-      moveFocus(addDays(focusDate, deltaDays));
-      return;
-    }
-    if (event.key === "Home" || event.key === "End") {
-      event.preventDefault();
-      const offset = event.key === "Home" ? -focusDate.getDay() : 6 - focusDate.getDay();
-      moveFocus(addDays(focusDate, offset));
-      return;
-    }
-    if (event.key === "PageUp" || event.key === "PageDown") {
-      event.preventDefault();
-      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: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "wp-dp__navbtn",
-          "aria-label": "\uC774\uC804 \uB2EC",
-          "aria-disabled": prevDisabled || void 0,
-          disabled: prevDisabled,
-          onClick: () => setViewIdx(visibleIdx - 1),
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "wp-dp__navbtn",
-          "aria-label": "\uB2E4\uC74C \uB2EC",
-          "aria-disabled": nextDisabled || void 0,
-          disabled: nextDisabled,
-          onClick: () => setViewIdx(visibleIdx + 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);
-      const caption = `${first.getFullYear()}\uB144 ${first.getMonth() + 1}\uC6D4`;
-      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: WEEKDAYS_KO.map((name) => /* @__PURE__ */ jsx("th", { scope: "col", className: "wp-dp__weekday", abbr: name, children: name }, name)) }) }),
-          /* @__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);
-    })
-  ] }) });
+function Avatar({ name = "", src, shape = "hex", size = "md", tone = "brand", className = "", ...rest }) {
+  const classes = ["wp-avatar", "wp-avatar--" + shape];
+  if (size !== "md") classes.push("wp-avatar--" + size);
+  if (tone !== "brand") classes.push("wp-avatar--" + tone);
+  if (className) classes.push(className);
+  const initials = name.trim().slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsx("span", { className: classes.join(" "), title: name || void 0, ...rest, children: src ? /* @__PURE__ */ jsx("img", { src, alt: name }) : initials });
 }
-function useDismiss(open, hostRef, onDismiss) {
-  useEffect(() => {
-    if (!open) return;
-    const handlePointerDown = (event) => {
-      if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
-      onDismiss("outside");
-    };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") onDismiss("escape");
-    };
-    document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [open, hostRef, onDismiss]);
+function Breadcrumb({ items = [], className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("nav", { className: ("wp-crumbs " + className).trim(), "aria-label": "\uC704\uCE58", ...rest, children: items.map((it, i) => {
+    const last = i === items.length - 1;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      last ? /* @__PURE__ */ jsx("span", { className: "wp-crumbs__current", "aria-current": "page", children: it.label }) : /* @__PURE__ */ jsxs("a", { className: "wp-crumbs__item", href: it.href || "#", onClick: (e) => {
+        if (!it.href) e.preventDefault();
+        if (it.onClick) it.onClick();
+      }, children: [
+        it.icon ? /* @__PURE__ */ jsx(Icon, { name: it.icon, size: 13 }) : null,
+        it.label
+      ] }),
+      last ? null : /* @__PURE__ */ jsx("span", { className: "wp-crumbs__sep", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12 }) })
+    ] }, `${it.label}${i}`);
+  }) });
 }
-function triggerClassName(size, invalid) {
-  const classes = ["wp-input", "wp-dp-trigger"];
-  if (size !== "md") classes.push(`wp-input--${size}`);
-  if (invalid) classes.push("wp-input--invalid");
-  return classes.join(" ");
+function Radio({ label, description, disabled = false, className = "", ...rest }) {
+  const classes = ["wp-check"];
+  if (disabled) classes.push("wp-check--disabled");
+  if (className) classes.push(className);
+  return /* @__PURE__ */ jsxs("label", { className: classes.join(" "), children: [
+    /* @__PURE__ */ jsx("input", { type: "radio", disabled, ...rest }),
+    /* @__PURE__ */ jsx("span", { className: "wp-check__box wp-check__box--radio" }),
+    label || description ? /* @__PURE__ */ jsxs("span", { className: "wp-check__text", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      description ? /* @__PURE__ */ jsx("span", { className: "wp-check__desc", children: description }) : null
+    ] }) : null
+  ] });
 }
-function DatePicker({
-  value,
-  onChange,
-  min,
-  max,
-  placeholder,
-  invalid = false,
-  disabled = false,
-  size = "md"
-}) {
-  const [open, setOpen] = useState(false);
-  const [innerValue, setInnerValue] = useState("");
-  const hostRef = useRef(null);
-  const triggerRef = useRef(null);
-  const isControlled = value !== void 0;
-  const currentValue = isControlled ? value : innerValue;
-  const selectedDate = useMemo(() => parseYmd(currentValue), [currentValue]);
-  const minDate = useMemo(() => parseYmd(min), [min]);
-  const maxDate = useMemo(() => parseYmd(max), [max]);
-  const [focusDate, setFocusDate] = useState(() => selectedDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
-  const dismiss = useCallback((reason) => {
-    setOpen(false);
-    if (reason === "escape") triggerRef.current?.focus();
-  }, []);
-  useDismiss(open, hostRef, dismiss);
-  const openCalendar = () => {
-    setFocusDate(selectedDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
-    setOpen(true);
-  };
-  const isInvalid = Boolean(invalid);
-  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host", children: [
-    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
-    /* @__PURE__ */ jsxs(
-      "button",
+function SidebarNav({ sections = [], value, onSelect, collapsed = false, light = false, className = "", ...rest }) {
+  const classes = ["wp-nav"];
+  if (collapsed) classes.push("wp-nav--collapsed");
+  if (light) classes.push("wp-nav--light");
+  if (className) classes.push(className);
+  return /* @__PURE__ */ jsx("nav", { className: classes.join(" "), ...rest, children: sections.map((s, si) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    s.label ? /* @__PURE__ */ jsx("div", { className: "wp-nav__section", children: s.label }) : null,
+    (s.items || []).map((it) => /* @__PURE__ */ jsxs(
+      "a",
       {
-        ref: triggerRef,
-        type: "button",
-        className: triggerClassName(size, isInvalid),
-        "aria-invalid": isInvalid || void 0,
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
-        disabled,
-        onClick: () => open ? setOpen(false) : openCalendar(),
+        href: it.href || "#",
+        className: "wp-nav__item",
+        "aria-current": value === it.value ? "page" : void 0,
+        title: collapsed ? it.label : void 0,
+        onClick: (e) => {
+          if (!it.href) e.preventDefault();
+          if (onSelect) onSelect(it.value);
+        },
         children: [
-          /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__icon", children: /* @__PURE__ */ jsx(Icon, { name: "calendar", size: size === "lg" ? 16 : 15 }) }),
-          currentValue ? /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__value", children: selectedDate ? formatYmd(selectedDate) : currentValue }) : /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__value wp-dp-trigger__value--placeholder", children: placeholder ?? "\uB0A0\uC9DC \uC120\uD0DD" })
+          it.icon ? /* @__PURE__ */ jsx("span", { className: "wp-nav__icon", children: /* @__PURE__ */ jsx(Icon, { name: it.icon, size: 17 }) }) : null,
+          /* @__PURE__ */ jsx("span", { className: "wp-nav__label", children: it.label }),
+          it.meta != null ? /* @__PURE__ */ jsx("span", { className: "wp-nav__meta", children: it.meta }) : null
         ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsx("div", { className: "wp-dp-pop", role: "dialog", "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
-      Calendar,
-      {
-        monthCount: 1,
-        minDate,
-        maxDate,
-        focusDate,
-        onFocusDateChange: setFocusDate,
-        dayState: (date) => ({ selected: isSameDay(date, selectedDate) }),
-        onPick: (date) => {
-          const next = formatYmd(date);
-          if (!isControlled) setInnerValue(next);
-          onChange?.(next);
-          setOpen(false);
-          triggerRef.current?.focus();
-        }
-      }
-    ) }) }) : null
-  ] });
+      },
+      it.value
+    ))
+  ] }, s.label ? String(s.label) : si)) });
 }
-function DateRangePicker({
-  value,
-  onChange,
-  min,
-  max,
-  invalid = false,
-  disabled = false
-}) {
-  const [open, setOpen] = useState(false);
-  const [innerRange, setInnerRange] = useState({});
-  const hostRef = useRef(null);
-  const triggerRef = useRef(null);
-  const isControlled = value !== void 0;
-  const currentRange = (isControlled ? value : innerRange) ?? {};
-  const fromDate = useMemo(() => parseYmd(currentRange.from), [currentRange.from]);
-  const toDate = useMemo(() => parseYmd(currentRange.to), [currentRange.to]);
-  const minDate = useMemo(() => parseYmd(min), [min]);
-  const maxDate = useMemo(() => parseYmd(max), [max]);
-  const [focusDate, setFocusDate] = useState(() => fromDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
-  const dismiss = useCallback((reason) => {
-    setOpen(false);
-    if (reason === "escape") triggerRef.current?.focus();
-  }, []);
-  useDismiss(open, hostRef, dismiss);
-  const hasValue = Boolean(currentRange.from || currentRange.to);
-  const label = hasValue ? `${currentRange.from ?? ""} ~ ${currentRange.to ?? ""}` : "\uAE30\uAC04 \uC120\uD0DD";
-  const isInvalid = Boolean(invalid);
-  const openCalendar = () => {
-    setFocusDate(fromDate ?? toDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
-    setOpen(true);
-  };
-  const commit = (next) => {
-    if (!isControlled) setInnerRange(next);
-    onChange?.(next);
-  };
-  const pick = (date) => {
-    const ymd = formatYmd(date);
-    const startingOver = fromDate === void 0 || toDate !== void 0 || date.getTime() < fromDate.getTime();
-    if (startingOver) {
-      commit({ from: ymd, to: void 0 });
-      return;
+function Tooltip({ label, shortcut, placement = "top", wrap = false, children, className = "", ...rest }) {
+  const [open, setOpen] = React.useState(false);
+  const pos = {
+    top: { bottom: "100%", left: "50%", transform: "translate(-50%,-7px)" },
+    bottom: { top: "100%", left: "50%", transform: "translate(-50%,7px)" },
+    left: { right: "100%", top: "50%", transform: "translate(-7px,-50%)" },
+    right: { left: "100%", top: "50%", transform: "translate(7px,-50%)" }
+  }[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",
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      ...rest,
+      children: [
+        children,
+        open ? /* @__PURE__ */ jsxs("span", { className: classes.join(" "), style: pos, role: "tooltip", children: [
+          label,
+          shortcut ? /* @__PURE__ */ jsx("kbd", { className: "wp-tooltip__key", children: shortcut }) : null
+        ] }) : null
+      ]
     }
-    commit({ from: currentRange.from, to: ymd });
-    setOpen(false);
-    triggerRef.current?.focus();
-  };
-  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host", children: [
-    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: triggerRef,
-        type: "button",
-        className: triggerClassName("md", isInvalid),
-        "aria-invalid": isInvalid || void 0,
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
-        disabled,
-        onClick: () => open ? setOpen(false) : openCalendar(),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__icon", children: /* @__PURE__ */ jsx(Icon, { name: "calendar", size: 15 }) }),
-          /* @__PURE__ */ jsx("span", { className: `wp-dp-trigger__value${hasValue ? "" : " wp-dp-trigger__value--placeholder"}`, children: label })
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsx("div", { className: "wp-dp-pop wp-dp-pop--wide", role: "dialog", "aria-label": "\uAE30\uAC04 \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
-      Calendar,
-      {
-        monthCount: 2,
-        minDate,
-        maxDate,
-        focusDate,
-        onFocusDateChange: setFocusDate,
-        dayState: (date) => {
-          const t = date.getTime();
-          const start = fromDate?.getTime();
-          const end = toDate?.getTime();
-          if (start !== void 0 && end !== void 0 && t > start && t < end) return { rangeMiddle: true };
-          return {
-            rangeStart: start !== void 0 && t === start && end !== void 0,
-            rangeEnd: end !== void 0 && t === end,
-            // 아직 시작만 고른 상태는 단일 선택처럼 보인다
-            selected: start !== void 0 && t === start && end === void 0 || void 0
-          };
-        },
-        onPick: pick
-      }
-    ) }) }) : null
-  ] });
+  );
 }
-var DP_CSS = `
-.wp-dp-host{position:relative}
-.wp-dp-pop{position:absolute;top:calc(100% + var(--wp-space-2));left:0;min-width:100%;width:max-content;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:300}
-.wp-dp-pop--wide{max-width:min(640px,90vw)}
-.wp-dp-pop__body{padding:var(--wp-space-4);max-height:60vh;overflow:auto}
-.wp-dp-trigger{display:inline-flex;align-items:center;gap:var(--wp-space-2);text-align:left;cursor:pointer}
-.wp-dp-trigger:disabled{cursor:not-allowed}
-.wp-dp-trigger__icon{flex:none;display:inline-flex;color:var(--wp-text-muted)}
-.wp-dp-trigger:disabled .wp-dp-trigger__icon{color:var(--wp-text-disabled)}
-.wp-dp-trigger__value{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--wp-font-mono);font-size:12.5px;letter-spacing:-0.01em}
-.wp-dp-trigger__value--placeholder{font-family:inherit;font-size:13px;letter-spacing:normal;color:var(--wp-text-subtle)}
-.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)}
-.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:first-child{color:var(--wp-text-danger)}
-.wp-dp__day{padding:0;text-align:center}
-.wp-dp__day-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;padding:0;border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;transition:background 0.12s,color 0.12s}
-.wp-dp__day:not(.wp-dp__day--selected):not(.wp-dp__day--disabled) .wp-dp__day-btn:hover{background:var(--wp-surface-hover)}
-.wp-dp__day-btn:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:-1px}
-.wp-dp__day--today .wp-dp__day-btn{box-shadow:inset 0 0 0 1px var(--wp-border-focus)}
-.wp-dp__day--outside{color:var(--wp-text-subtle)}
-.wp-dp__day--disabled{color:var(--wp-text-disabled)}
-.wp-dp__day--disabled .wp-dp__day-btn{cursor:default}
-.wp-dp__day--selected .wp-dp__day-btn{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
-.wp-dp__day--selected.wp-dp__day--today .wp-dp__day-btn{box-shadow:none}
-.wp-dp__day--range-middle .wp-dp__day-btn{background:var(--wp-surface-selected);color:var(--wp-text-default);border-radius:0;font-weight:400}
-.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}
-`;
 
-export { Alert, Badge, Button, Card, Checkbox, DatePicker, DateRangePicker, Dialog, EmptyState, Field, HoistedStyle, Icon, IconButton, Input, Pagination, ProgressBar, Select, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast };
+export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip };