achery-ui 0.5.9 → 0.6.0

package/dist/index.cjs

@@ -241,6 +241,13 @@ function Mark(props) {
     /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "56,50 47,58 47,52", stroke: "none" })
   ] });
 }
+function Menu(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "7", x2: "21", y2: "7" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "17", x2: "21", y2: "17" })
+  ] });
+}
 function Mercury(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "9", r: "5" }),
@@ -282,6 +289,9 @@ function Sigil(props) {
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "3" })
   ] });
 }
+function Spinner(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3a9 9 0 1 0 9 9" }) });
+}
 function Sprig(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v18" }),
@@ -332,13 +342,6 @@ function Wordmark(props) {
     /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(82,72)", fontFamily: "'Space Grotesk', sansSerif", fontWeight: "600", fontSize: "10", letterSpacing: "6", stroke: "none", children: /* @__PURE__ */ jsxRuntime.jsx("text", { x: "2", y: "0", children: "\u2014 W O R K S H O P \u2014" }) })
   ] });
 }
-function Menu(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "7", x2: "21", y2: "7" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "17", x2: "21", y2: "17" })
-  ] });
-}
 var glyphMap = {
   "arrow-right": ArrowRight,
   "arrow-up": ArrowUp,
@@ -365,6 +368,7 @@ var glyphMap = {
   "salt": Salt,
   "scroll": Scroll,
   "sigil": Sigil,
+  "spinner": Spinner,
   "sprig": Sprig,
   "square": Square,
   "star": Star,
@@ -473,45 +477,56 @@ function Badge({
     }
   );
 }
-var button = createRuntimeFn.createRuntimeFn({ defaultClassName: "Button_button__1torrqc0", variantClassNames: { variant: { primary: "Button_button_variant_primary__1torrqc1", secondary: "Button_button_variant_secondary__1torrqc2", accent: "Button_button_variant_accent__1torrqc3", ghost: "Button_button_variant_ghost__1torrqc4", danger: "Button_button_variant_danger__1torrqc5" }, size: { sm: "Button_button_size_sm__1torrqc6", md: "Button_button_size_md__1torrqc7" } }, defaultVariants: { variant: "secondary", size: "md" }, compoundVariants: [] });
-var kbdHint = "Button_kbdHint__1torrqc8";
+var button = createRuntimeFn.createRuntimeFn({ defaultClassName: "Button_button__1torrqc2", variantClassNames: { variant: { primary: "Button_button_variant_primary__1torrqc3", secondary: "Button_button_variant_secondary__1torrqc4", accent: "Button_button_variant_accent__1torrqc5", ghost: "Button_button_variant_ghost__1torrqc6", danger: "Button_button_variant_danger__1torrqc7" }, size: { sm: "Button_button_size_sm__1torrqc8", md: "Button_button_size_md__1torrqc9" } }, defaultVariants: { variant: "secondary", size: "md" }, compoundVariants: [] });
+var kbdHint = "Button_kbdHint__1torrqca";
+var spinner = "Button_spinner__1torrqc1";
 function Button({
   variant = "secondary",
   size = "md",
   glyph: glyph2,
   glyphPosition = "start",
   kbd,
+  loading = false,
+  loadingLabel = "Loading\u2026",
   children,
   className,
   ...props
 }) {
   const glyphSize = size === "sm" ? 12 : 14;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       className: [button({ variant, size }), className].filter(Boolean).join(" "),
+      disabled: loading || props.disabled,
+      "aria-busy": loading || void 0,
       ...props,
-      children: [
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: spinner, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "spinner", size: glyphSize }) }),
+        loadingLabel
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         glyph2 && glyphPosition === "start" && /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: glyph2, size: glyphSize, "aria-hidden": "true" }),
         children,
         glyph2 && glyphPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: glyph2, size: glyphSize, "aria-hidden": "true" }),
         kbd && /* @__PURE__ */ jsxRuntime.jsx("span", { className: kbdHint, children: kbd })
-      ]
+      ] })
     }
   );
 }
 
 // src/components/Toggle/Toggle.css.ts
-var label = "Toggle_label__trpmwc3";
-var thumb = "Toggle_thumb__trpmwc1";
-var track = "Toggle_track__trpmwc0";
-var wrapper = "Toggle_wrapper__trpmwc2";
+var label = "Toggle_label__trpmwc4";
+var statusIndicator = "Toggle_statusIndicator__trpmwc5";
+var statusIndicatorVariants = { saving: "Toggle_statusIndicatorVariants_saving__trpmwc6", saved: "Toggle_statusIndicatorVariants_saved__trpmwc7", error: "Toggle_statusIndicatorVariants_error__trpmwc8" };
+var thumb = "Toggle_thumb__trpmwc2";
+var track = "Toggle_track__trpmwc1";
+var wrapper = "Toggle_wrapper__trpmwc3";
 function Toggle({
   pressed,
   defaultPressed,
   onPressedChange,
   disabled,
   label: label4,
+  status,
   className,
   "aria-label": ariaLabel
 }) {
@@ -528,7 +543,8 @@ function Toggle({
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: thumb })
       }
     ),
-    label4 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: label, children: label4 })
+    label4 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: label, children: label4 }),
+    status && status !== "idle" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIndicator, statusIndicatorVariants[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
   ] });
 }
 
@@ -554,17 +570,24 @@ function Marginalia({
 }
 
 // src/components/Input/Input.css.ts
-var errorText = "Input_errorText__6w3tie3";
-var fieldRoot = "Input_fieldRoot__6w3tie0";
-var hint = "Input_hint__6w3tie2";
-var inputBase = "Input_inputBase__6w3tie4";
-var inputError = "Input_inputError__6w3tie5";
-var label2 = "Input_label__6w3tie1";
-var searchIcon = "Input_searchIcon__6w3tie9";
-var searchInput = "Input_searchInput__6w3tiea Input_inputBase__6w3tie4";
-var searchWrapper = "Input_searchWrapper__6w3tie8";
-var selectInput = "Input_selectInput__6w3tie7 Input_inputBase__6w3tie4";
-var textarea = "Input_textarea__6w3tie6 Input_inputBase__6w3tie4";
+var errorText = "Input_errorText__6w3tie4";
+var fieldRoot = "Input_fieldRoot__6w3tie1";
+var hint = "Input_hint__6w3tie3";
+var inputBase = "Input_inputBase__6w3tie5";
+var inputError = "Input_inputError__6w3tie6";
+var inputWithStatus = "Input_inputWithStatus__6w3tiea Input_inputBase__6w3tie5";
+var inputWrapper = "Input_inputWrapper__6w3tie9";
+var label2 = "Input_label__6w3tie2";
+var searchIcon = "Input_searchIcon__6w3tiej";
+var searchInput = "Input_searchInput__6w3tiek Input_inputBase__6w3tie5";
+var searchWrapper = "Input_searchWrapper__6w3tiei";
+var selectInput = "Input_selectInput__6w3tie8 Input_inputBase__6w3tie5";
+var selectWithStatus = "Input_selectWithStatus__6w3tiec";
+var statusIcon = "Input_statusIcon__6w3tied";
+var statusIconTextarea = "Input_statusIconTextarea__6w3tiee Input_statusIcon__6w3tied";
+var statusIconVariants = { saving: "Input_statusIconVariants_saving__6w3tief", saved: "Input_statusIconVariants_saved__6w3tieg", error: "Input_statusIconVariants_error__6w3tieh" };
+var textarea = "Input_textarea__6w3tie7 Input_inputBase__6w3tie5";
+var textareaWithStatus = "Input_textareaWithStatus__6w3tieb";
 function Field({ label: label4, hint: hint2, error, children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [fieldRoot, className].filter(Boolean).join(" "), children: [
     label4 && /* @__PURE__ */ jsxRuntime.jsx("label", { className: label2, children: label4 }),
@@ -573,33 +596,73 @@ function Field({ label: label4, hint: hint2, error, children, className }) {
     !error && hint2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: hint, children: hint2 })
   ] });
 }
-function Input({ error, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      className: [inputBase, error && inputError, className].filter(Boolean).join(" "),
-      ...props
-    }
-  );
+function Input({ error, status, className, ...props }) {
+  const hasStatus = status && status !== "idle";
+  if (!hasStatus) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: [inputBase, error && inputError, className].filter(Boolean).join(" "),
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [inputWrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: [inputBase, inputWithStatus, error && inputError].filter(Boolean).join(" "),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIcon, statusIconVariants[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
+  ] });
 }
-function Textarea({ error, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      className: [textarea, error && inputError, className].filter(Boolean).join(" "),
-      ...props
-    }
-  );
+function Textarea({ error, status, className, ...props }) {
+  const hasStatus = status && status !== "idle";
+  if (!hasStatus) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        className: [textarea, error && inputError, className].filter(Boolean).join(" "),
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [inputWrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        className: [textarea, textareaWithStatus, error && inputError].filter(Boolean).join(" "),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIconTextarea, statusIconVariants[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
+  ] });
 }
-function Select({ error, children, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "select",
-    {
-      className: [selectInput, error && inputError, className].filter(Boolean).join(" "),
-      ...props,
-      children
-    }
-  );
+function Select({ error, status, children, className, ...props }) {
+  const hasStatus = status && status !== "idle";
+  if (!hasStatus) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        className: [selectInput, error && inputError, className].filter(Boolean).join(" "),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [inputWrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        className: [selectInput, selectWithStatus, error && inputError].filter(Boolean).join(" "),
+        ...props,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIcon, statusIconVariants[status]].join(" "), "aria-hidden": "true", style: { right: "28px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
+  ] });
 }
 function SearchInput({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [searchWrapper, className].filter(Boolean).join(" "), children: [
@@ -861,12 +924,66 @@ function NavItem({ item: item2, active, onClick, renderLink, collapsed }) {
   );
 }
 
+// src/components/Skeleton/Skeleton.css.ts
+var block = "Skeleton_block__112laiw3 Skeleton_skeleton__112laiw1";
+var line = "Skeleton_line__112laiw2 Skeleton_skeleton__112laiw1";
+var Skeleton = ({ lines = 1, width = "100%", block: block2 = false, height, style, className }) => {
+  if (block2) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: [block, className].filter(Boolean).join(" "),
+        style: height ? { height, ...style } : style,
+        "aria-hidden": "true"
+      }
+    );
+  }
+  const widths = Array.isArray(width) ? width : Array.from({ length: lines }, () => width);
+  if (lines === 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: [line, className].filter(Boolean).join(" "),
+        style: widths[0] !== "100%" ? { width: widths[0], ...style } : style,
+        "aria-hidden": "true"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      style: { display: "flex", flexDirection: "column", gap: "6px", width: "100%" },
+      "aria-hidden": "true",
+      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: line,
+          style: widths[i] !== "100%" ? { width: widths[i] } : void 0
+        },
+        i
+      ))
+    }
+  );
+};
+
 // src/components/ProgressBar/ProgressBar.css.ts
 var fill = "ProgressBar_fill__1686i1k3";
 var fillTone = { neutral: "ProgressBar_fillTone_neutral__1686i1k4", accent: "ProgressBar_fillTone_accent__1686i1k5" };
 var track2 = "ProgressBar_track__1686i1k0";
 var trackSize = { sm: "ProgressBar_trackSize_sm__1686i1k1", md: "ProgressBar_trackSize_md__1686i1k2" };
-function ProgressBar({ value: value2, size = "md", tone = "neutral", className }) {
+var trackHeightPx = { sm: "4px", md: "8px" };
+function ProgressBar({ value: value2, size = "md", tone = "neutral", loading = false, className }) {
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        block: true,
+        height: trackHeightPx[size],
+        className,
+        style: { borderRadius: 0 }
+      }
+    );
+  }
   const pct = Math.min(100, Math.max(0, value2));
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -888,7 +1005,20 @@ function ProgressBar({ value: value2, size = "md", tone = "neutral", className }
 }
 var avatar = createRuntimeFn.createRuntimeFn({ defaultClassName: "Avatar_avatar__16f6qlf0", variantClassNames: { size: { sm: "Avatar_avatar_size_sm__16f6qlf1", md: "Avatar_avatar_size_md__16f6qlf2", lg: "Avatar_avatar_size_lg__16f6qlf3" }, tone: { moss: "Avatar_avatar_tone_moss__16f6qlf4", neutral: "Avatar_avatar_tone_neutral__16f6qlf5" } }, defaultVariants: { size: "md", tone: "neutral" }, compoundVariants: [] });
 var initials = "Avatar_initials__16f6qlf6";
-function Avatar({ initials: initials2, size = "md", tone = "neutral", className }) {
+var avatarPx = { sm: "24px", md: "32px", lg: "40px" };
+function Avatar({ initials: initials2, size = "md", tone = "neutral", loading = false, className }) {
+  if (loading) {
+    const px = avatarPx[size];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        block: true,
+        height: px,
+        className,
+        style: { width: px, borderRadius: "50%", flexShrink: 0 }
+      }
+    );
+  }
   const display2 = initials2.slice(0, 2).toUpperCase();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -1031,6 +1161,7 @@ var thSortable = "Table_thSortable__1a2tbys5 Table_th__1a2tbys4";
 var thead = "Table_thead__1a2tbys3";
 var toolbar = "Table_toolbar__1a2tbysa";
 var tr = "Table_tr__1a2tbys7";
+var skeletonWidths = ["75%", "90%", "65%", "85%", "70%", "95%", "60%", "80%"];
 function buildPageWindow(current, total, window2) {
   const pages = /* @__PURE__ */ new Set();
   pages.add(0);
@@ -1068,6 +1199,7 @@ function Table({
   height,
   toolbar: toolbar2,
   emptyState: emptyState2,
+  loading = false,
   className
 }) {
   const [internalSortKey, setInternalSortKey] = react.useState(defaultSortKey ?? null);
@@ -1128,7 +1260,7 @@ function Table({
                 },
                 col.key
               )) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: emptyState, children: emptyState2 ?? "No data." }) }) }) : sortedData.map((row) => {
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: pageSize ?? 10 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: tr, "aria-hidden": "true", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: col.mono ? tdMono : td, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: col.width ? "80%" : skeletonWidths[i % skeletonWidths.length] }) }, col.key)) }, i)) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: emptyState, children: emptyState2 ?? "No data." }) }) }) : sortedData.map((row) => {
                 const key = rowKey(row);
                 const isSelected = selectedKeys?.includes(key) ?? false;
                 return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1291,10 +1423,12 @@ function ToastProvider({ children }) {
 }
 
 // src/components/Checkbox/Checkbox.css.ts
-var indicator = "Checkbox_indicator__nnmycq2";
-var label3 = "Checkbox_label__nnmycq3";
-var root = "Checkbox_root__nnmycq1";
-var wrapper2 = "Checkbox_wrapper__nnmycq0";
+var indicator = "Checkbox_indicator__nnmycq3";
+var label3 = "Checkbox_label__nnmycq4";
+var root = "Checkbox_root__nnmycq2";
+var statusIndicator2 = "Checkbox_statusIndicator__nnmycq5";
+var statusIndicatorVariants2 = { saving: "Checkbox_statusIndicatorVariants_saving__nnmycq6", saved: "Checkbox_statusIndicatorVariants_saved__nnmycq7", error: "Checkbox_statusIndicatorVariants_error__nnmycq8" };
+var wrapper2 = "Checkbox_wrapper__nnmycq1";
 function Checkbox({
   checked,
   defaultChecked,
@@ -1302,6 +1436,7 @@ function Checkbox({
   disabled,
   label: label4,
   id,
+  status,
   className,
   "aria-label": ariaLabel
 }) {
@@ -1320,7 +1455,8 @@ function Checkbox({
         children: /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: indicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "2", rx: "1" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "1,4 4,7 9,1" }) }) })
       }
     ),
-    label4 && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: resolvedId, className: label3, style: { cursor: disabled ? "not-allowed" : "pointer" }, children: label4 })
+    label4 && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: resolvedId, className: label3, style: { cursor: disabled ? "not-allowed" : "pointer" }, children: label4 }),
+    status && status !== "idle" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIndicator2, statusIndicatorVariants2[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
   ] });
 }
 
@@ -1365,7 +1501,10 @@ function Menu2({ trigger: trigger2, items, side = "bottom", align = "end", class
 }
 
 // src/components/DatePicker/DatePicker.css.ts
-var input = "DatePicker_input__1etdrw70";
+var input = "DatePicker_input__1etdrw71";
+var statusIcon2 = "DatePicker_statusIcon__1etdrw73";
+var statusIconVariants2 = { saving: "DatePicker_statusIconVariants_saving__1etdrw74", saved: "DatePicker_statusIconVariants_saved__1etdrw75", error: "DatePicker_statusIconVariants_error__1etdrw76" };
+var wrapper3 = "DatePicker_wrapper__1etdrw72";
 function DatePicker({
   type = "date",
   value: value2,
@@ -1374,11 +1513,13 @@ function DatePicker({
   max,
   disabled,
   error,
+  status,
   placeholder,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const hasStatus = status && status !== "idle";
+  const input3 = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       type,
@@ -1389,10 +1530,16 @@ function DatePicker({
       disabled,
       placeholder,
       "data-error": error || void 0,
-      className: [input, className].filter(Boolean).join(" "),
+      "data-has-status": hasStatus || void 0,
+      className: [input, !hasStatus && className].filter(Boolean).join(" "),
       ...rest
     }
   );
+  if (!hasStatus) return input3;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [wrapper3, className].filter(Boolean).join(" "), children: [
+    input3,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: [statusIcon2, statusIconVariants2[status]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: status === "saving" ? "spinner" : status === "saved" ? "tick" : "cross", size: 12 }) })
+  ] });
 }
 
 // src/components/Combobox/Combobox.css.ts
@@ -1403,7 +1550,7 @@ var option = "Combobox_option__1irfr5o7";
 var optionCheck = "Combobox_optionCheck__1irfr5o8";
 var popover = "Combobox_popover__1irfr5o6";
 var trigger = "Combobox_trigger__1irfr5o1";
-var wrapper3 = "Combobox_wrapper__1irfr5o0";
+var wrapper4 = "Combobox_wrapper__1irfr5o0";
 function Combobox({
   value: value2,
   onChange,
@@ -1473,7 +1620,7 @@ function Combobox({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: [wrapper3, className].filter(Boolean).join(" "),
+      className: [wrapper4, className].filter(Boolean).join(" "),
       onClick: () => {
         if (!disabled) inputRef.current?.focus();
       },
@@ -1621,7 +1768,7 @@ function SingleCombobox({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: [wrapper3, className].filter(Boolean).join(" "),
+      className: [wrapper4, className].filter(Boolean).join(" "),
       onClick: () => {
         if (!disabled) inputRef.current?.focus();
       },
@@ -1820,7 +1967,7 @@ function Sparkline({
 // src/components/KpiTile/KpiTile.css.ts
 var inner = "KpiTile_inner__1yi98c61";
 var value = "KpiTile_value__1yi98c62";
-var wrapper4 = "KpiTile_wrapper__1yi98c60";
+var wrapper5 = "KpiTile_wrapper__1yi98c60";
 var deltaToneToBadge = {
   positive: "saved",
   negative: "stopped",
@@ -1833,16 +1980,22 @@ function KpiTile({
   deltaTone = "neutral",
   sparkData,
   onClick,
+  loading = false,
   className
 }) {
   const inner2 = /* @__PURE__ */ jsxRuntime.jsx(Card, { variant: "stamp", padding: "md", ...className !== void 0 ? { className } : {}, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inner, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Eyebrow, { children: label4 }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: value, children: value2 }),
-    delta && /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: deltaToneToBadge[deltaTone], dot: true, children: delta }),
-    sparkData && sparkData.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: sparkData, tone: deltaTone, width: 80, height: 24 })
+    loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "55%" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "70%" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: value, children: value2 }),
+      delta && /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: deltaToneToBadge[deltaTone], dot: true, children: delta }),
+      sparkData && sparkData.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: sparkData, tone: deltaTone, width: 80, height: 24 })
+    ] })
   ] }) });
   if (onClick) {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: wrapper4, children: inner2 });
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: wrapper5, children: inner2 });
   }
   return inner2;
 }
@@ -1896,6 +2049,7 @@ exports.SearchInput = SearchInput;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.SingleCombobox = SingleCombobox;
+exports.Skeleton = Skeleton;
 exports.Sparkline = Sparkline;
 exports.StatePill = StatePill;
 exports.Table = Table;