@dtlvmw/react 0.0.1

package/dist/index.js

@@ -0,0 +1,772 @@
+import { jsxs as u, jsx as l, Fragment as V } from "react/jsx-runtime";
+import $, { forwardRef as n, useMemo as W, useState as H, useEffect as y, useRef as L, useCallback as w } from "react";
+function o(...e) {
+  return e.filter(Boolean).join(" ");
+}
+const _ = n(
+  ({ btnType: e = "primary", btnStyle: s = "solid", size: a, block: r, loading: c, disabled: i, className: m, children: d, ...t }, p) => {
+    const N = o(
+      "btn",
+      s === "outline" && `btn-${e}-outline`,
+      s === "link" && "btn-link",
+      s === "link" && e !== "primary" && `btn-link-${e}`,
+      s === "solid" && `btn-${e}`,
+      a === "sm" && "btn-sm",
+      r && "btn-block",
+      c && "btn-loading",
+      m
+    );
+    return /* @__PURE__ */ u("button", { ref: p, className: N, disabled: i || c, ...t, children: [
+      c && /* @__PURE__ */ l("span", { className: "spinner spinner-inline" }),
+      d
+    ] });
+  }
+);
+_.displayName = "Button";
+const I = {
+  up: "0deg",
+  down: "180deg",
+  right: "90deg",
+  left: "270deg"
+}, J = {
+  success: "var(--cds-alias-status-success, #2f8400)",
+  danger: "var(--cds-alias-status-danger, #c92100)",
+  warning: "var(--cds-alias-status-warning-dark, #c47d00)",
+  info: "var(--cds-alias-status-info, #0072a3)",
+  neutral: "var(--cds-alias-status-neutral, #6d7884)"
+}, Y = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+  xxl: 32
+};
+function j(e, s) {
+  var c, i;
+  const a = (i = (c = window.CDS) == null ? void 0 : c._state) == null ? void 0 : i.iconRegistry;
+  if (!a) return "";
+  const r = a[e] ?? a.unknown;
+  return r ? typeof r == "string" ? r : s && r.solid ? r.solid : r.outline ?? "" : "";
+}
+const k = n(
+  ({ shape: e, size: s, direction: a, status: r, solid: c, className: i, role: m, ...d }, t) => {
+    const p = W(() => j(e, c), [e, c]), N = s ? Y[s] ?? (parseInt(s, 10) || void 0) : void 0, v = N ? `${N}px` : void 0, f = {
+      display: "inline-block",
+      width: v ?? "1rem",
+      height: v ?? "1rem",
+      minWidth: v ?? "1rem",
+      minHeight: v ?? "1rem",
+      verticalAlign: "middle",
+      fill: r ? J[r] : "currentColor",
+      color: r ? J[r] : "currentColor",
+      contain: "strict",
+      cursor: "inherit",
+      transform: a ? `rotate(${I[a]})` : void 0
+    };
+    return /* @__PURE__ */ l("span", { ref: t, className: o("cds-icon-react", i), style: f, role: m, ...d, children: /* @__PURE__ */ l(
+      "svg",
+      {
+        viewBox: "0 0 36 36",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        style: { display: "block", width: "100%", height: "100%" },
+        dangerouslySetInnerHTML: { __html: p }
+      }
+    ) });
+  }
+);
+k.displayName = "CdsIcon";
+const F = {
+  info: "info-circle",
+  warning: "exclamation-triangle",
+  danger: "exclamation-circle",
+  success: "check-circle"
+}, U = n(
+  ({ alertType: e = "info", closable: s = !0, small: a, lightweight: r, appLevel: c, onClose: i, className: m, children: d, ...t }, p) => {
+    const [N, v] = H(!1);
+    if (N) return null;
+    const f = o(
+      "alert",
+      `alert-${e}`,
+      a && "alert-sm",
+      r && "alert-lightweight",
+      c && "alert-app-level",
+      m
+    );
+    return /* @__PURE__ */ u("div", { ref: p, className: f, ...t, children: [
+      /* @__PURE__ */ l("div", { className: "alert-items", children: /* @__PURE__ */ u("div", { className: "alert-item static", children: [
+        /* @__PURE__ */ l("div", { className: "alert-icon-wrapper", children: /* @__PURE__ */ l(k, { className: "alert-icon", shape: F[e] }) }),
+        /* @__PURE__ */ l("div", { className: "alert-text", children: d })
+      ] }) }),
+      s && /* @__PURE__ */ l("button", { type: "button", className: "close", onClick: () => {
+        v(!0), i == null || i();
+      }, children: /* @__PURE__ */ l(k, { shape: "times" }) })
+    ] });
+  }
+);
+U.displayName = "Alert";
+const X = n(
+  ({ color: e, className: s, children: a, ...r }, c) => /* @__PURE__ */ l("span", { ref: c, className: o("badge", e && `badge-${e}`, s), ...r, children: a })
+);
+X.displayName = "Badge";
+const Z = n(
+  ({ color: e, labelType: s, clickable: a, disabled: r, text: c, badgeText: i, className: m, children: d, ...t }, p) => {
+    const N = o(
+      "label",
+      e && `label-${e}`,
+      s === "solid" && "solid",
+      a && "clickable",
+      r && "disabled",
+      m
+    );
+    return /* @__PURE__ */ u("span", { ref: p, className: N, ...t, children: [
+      c && /* @__PURE__ */ l("span", { className: "text", children: c }),
+      d,
+      i && /* @__PURE__ */ l("span", { className: "badge", children: i })
+    ] });
+  }
+);
+Z.displayName = "Label";
+const q = n(
+  ({ clickable: e, className: s, children: a, ...r }, c) => /* @__PURE__ */ l("div", { ref: c, className: o("card", e && "clickable", s), ...r, children: a })
+);
+q.displayName = "Card";
+const G = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("card-header", e), ...a, children: s })
+);
+G.displayName = "CardHeader";
+const K = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("card-block", e), ...a, children: s })
+);
+K.displayName = "CardBlock";
+const Q = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("card-title", e), ...a, children: s })
+);
+Q.displayName = "CardTitle";
+const C = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("card-text", e), ...a, children: s })
+);
+C.displayName = "CardText";
+const ee = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("card-footer", e), ...a, children: s })
+);
+ee.displayName = "CardFooter";
+const ae = n(
+  ({ open: e, closable: s = !0, size: a = "md", staticBackdrop: r = !0, onClose: c, className: i, children: m, ...d }, t) => (y(() => {
+    if (!e) return;
+    const p = (N) => {
+      N.key === "Escape" && s && !r && (c == null || c());
+    };
+    return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
+  }, [e, s, r, c]), e ? /* @__PURE__ */ u("div", { ref: t, className: o("modal", i), ...d, children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: o("modal-dialog", a === "sm" && "modal-sm", a === "lg" && "modal-lg", a === "xl" && "modal-xl", a === "full-screen" && "modal-full-screen"),
+        role: "dialog",
+        "aria-modal": "true",
+        children: /* @__PURE__ */ l("div", { className: "modal-content-wrapper", children: /* @__PURE__ */ u("div", { className: "modal-content", children: [
+          m,
+          s && /* @__PURE__ */ l("div", { className: "modal-header--accessible", children: /* @__PURE__ */ l("button", { type: "button", className: "close", onClick: c, children: /* @__PURE__ */ l(k, { shape: "window-close" }) }) })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: "modal-backdrop", "aria-hidden": "true", onClick: () => {
+      r || c == null || c();
+    } })
+  ] }) : null)
+);
+ae.displayName = "Modal";
+const re = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("modal-header", e), ...a, children: s })
+);
+re.displayName = "ModalHeader";
+const se = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("modal-body", e), ...a, children: s })
+);
+se.displayName = "ModalBody";
+const le = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("modal-footer", e), ...a, children: s })
+);
+le.displayName = "ModalFooter";
+const ce = n(
+  ({ label: e, state: s, helperText: a, errorText: r, successText: c, className: i, ...m }, d) => /* @__PURE__ */ u("div", { className: o("clr-form-control", s === "error" && "clr-error", s === "success" && "clr-success"), children: [
+    e && /* @__PURE__ */ l("label", { className: "clr-control-label", children: e }),
+    /* @__PURE__ */ u("div", { className: "clr-control-container", children: [
+      /* @__PURE__ */ l("div", { className: "clr-input-wrapper", children: /* @__PURE__ */ l("input", { ref: d, className: o("clr-input", i), ...m }) }),
+      a && s !== "error" && s !== "success" && /* @__PURE__ */ l("span", { className: "clr-subtext", children: a }),
+      r && s === "error" && /* @__PURE__ */ l("span", { className: "clr-subtext", children: r }),
+      c && s === "success" && /* @__PURE__ */ l("span", { className: "clr-subtext", children: c })
+    ] })
+  ] })
+);
+ce.displayName = "Input";
+const ie = n(
+  ({ label: e, state: s, helperText: a, errorText: r, className: c, children: i, ...m }, d) => /* @__PURE__ */ u("div", { className: o("clr-form-control", s === "error" && "clr-error"), children: [
+    e && /* @__PURE__ */ l("label", { className: "clr-control-label", children: e }),
+    /* @__PURE__ */ u("div", { className: "clr-control-container", children: [
+      /* @__PURE__ */ l("div", { className: "clr-select-wrapper", children: /* @__PURE__ */ l("select", { ref: d, className: o("clr-select", c), ...m, children: i }) }),
+      a && s !== "error" && /* @__PURE__ */ l("span", { className: "clr-subtext", children: a }),
+      r && s === "error" && /* @__PURE__ */ l("span", { className: "clr-subtext", children: r })
+    ] })
+  ] })
+);
+ie.displayName = "Select";
+const ne = n(
+  ({ label: e, inline: s, state: a, helperText: r, errorText: c, successText: i, className: m, ...d }, t) => /* @__PURE__ */ l("div", { className: o("clr-form-control", a === "error" && "clr-error", a === "success" && "clr-success"), children: /* @__PURE__ */ u("div", { className: o("clr-control-container", s && "clr-control-inline"), children: [
+    /* @__PURE__ */ u("div", { className: "clr-checkbox-wrapper", children: [
+      /* @__PURE__ */ l("input", { ref: t, type: "checkbox", className: o("clr-checkbox", m), ...d }),
+      e && /* @__PURE__ */ l("label", { className: "clr-control-label", children: e })
+    ] }),
+    r && a !== "error" && a !== "success" && /* @__PURE__ */ l("span", { className: "clr-subtext", children: r }),
+    c && a === "error" && /* @__PURE__ */ l("span", { className: "clr-subtext", children: c }),
+    i && a === "success" && /* @__PURE__ */ l("span", { className: "clr-subtext", children: i })
+  ] }) })
+);
+ne.displayName = "Checkbox";
+const te = n(
+  ({ label: e, className: s, ...a }, r) => /* @__PURE__ */ l("div", { className: "clr-form-control", children: /* @__PURE__ */ l("div", { className: "clr-control-container", children: /* @__PURE__ */ u("div", { className: "clr-toggle-wrapper", children: [
+    /* @__PURE__ */ l("input", { ref: r, type: "checkbox", className: o("clr-toggle", s), ...a }),
+    e && /* @__PURE__ */ l("label", { className: "clr-control-label", children: e })
+  ] }) }) })
+);
+te.displayName = "Toggle";
+const de = n(
+  ({ vertical: e, className: s, children: a, ...r }, c) => /* @__PURE__ */ l("div", { ref: c, className: o(e && "nav-tabs-vertical", s), ...r, children: a })
+);
+de.displayName = "Tabs";
+const oe = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("ul", { ref: r, className: o("nav", e), role: "tablist", ...a, children: s })
+);
+oe.displayName = "TabList";
+const me = n(
+  ({ active: e, disabled: s, className: a, children: r, ...c }, i) => /* @__PURE__ */ l("li", { role: "presentation", className: "nav-item", children: /* @__PURE__ */ l("button", { ref: i, className: o("btn btn-link nav-link", e && "active", a), disabled: s, role: "tab", "aria-selected": e, ...c, children: r }) })
+);
+me.displayName = "Tab";
+const pe = n(
+  ({ active: e, className: s, children: a, ...r }, c) => e ? /* @__PURE__ */ l("section", { ref: c, className: o("tab-content active", s), role: "tabpanel", ...r, children: a }) : null
+);
+pe.displayName = "TabPanel";
+const Ne = n(
+  ({ open: e, position: s = "bottom-left", onOpenChange: a, className: r, children: c, ...i }, m) => {
+    const d = L(null), t = m || d;
+    return y(() => {
+      if (!e) return;
+      const p = (N) => {
+        t.current && !t.current.contains(N.target) && (a == null || a(!1));
+      };
+      return document.addEventListener("click", p), () => document.removeEventListener("click", p);
+    }, [e, a, t]), /* @__PURE__ */ l("div", { ref: t, className: o("dropdown", e && "open", s && s, r), ...i, children: c });
+  }
+);
+Ne.displayName = "Dropdown";
+const ue = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ u("button", { ref: r, className: o("dropdown-toggle btn btn-link", e), ...a, children: [
+    s,
+    /* @__PURE__ */ l(k, { shape: "angle", direction: "down" })
+  ] })
+);
+ue.displayName = "DropdownTrigger";
+const ve = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("dropdown-menu", e), ...a, children: s })
+);
+ve.displayName = "DropdownMenu";
+const be = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("button", { ref: r, type: "button", className: o("dropdown-item", e), ...a, children: s })
+);
+be.displayName = "DropdownItem";
+const he = () => /* @__PURE__ */ l("div", { className: "dropdown-divider" });
+he.displayName = "DropdownDivider";
+const ge = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("dropdown-header", e), ...a, children: s })
+);
+ge.displayName = "DropdownHeader";
+const we = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("clr-accordion", e), ...a, children: s })
+);
+we.displayName = "Accordion";
+const ye = n(
+  ({ panelOpen: e, disabled: s, title: a, onToggle: r, className: c, children: i, ...m }, d) => /* @__PURE__ */ l("div", { ref: d, className: o("clr-accordion-panel", s && "clr-accordion-panel-disabled", c), ...m, children: /* @__PURE__ */ u("div", { className: e ? "clr-accordion-panel-open" : "clr-accordion-panel-closed", children: [
+    /* @__PURE__ */ l("div", { className: "clr-accordion-header", children: /* @__PURE__ */ u("button", { type: "button", className: "clr-accordion-header-button", disabled: s, "aria-expanded": e, onClick: r, children: [
+      /* @__PURE__ */ l("span", { className: "clr-accordion-status", children: /* @__PURE__ */ l(k, { shape: "angle", direction: "right", className: "clr-accordion-angle" }) }),
+      a && /* @__PURE__ */ l("span", { className: "clr-accordion-title", children: a })
+    ] }) }),
+    e && /* @__PURE__ */ l("div", { role: "region", className: "clr-accordion-content-region", children: /* @__PURE__ */ l("div", { className: "clr-accordion-content", children: /* @__PURE__ */ l("div", { className: "clr-accordion-inner-content", children: i }) }) })
+  ] }) })
+);
+ye.displayName = "AccordionPanel";
+const fe = n(
+  ({ size: e, inline: s, inverse: a, className: r, children: c, ...i }, m) => /* @__PURE__ */ l(
+    "span",
+    {
+      ref: m,
+      className: o("spinner", e === "sm" && "spinner-sm", e === "md" && "spinner-md", s && "spinner-inline", a && "spinner-inverse", r),
+      "aria-busy": "true",
+      ...i,
+      children: c
+    }
+  )
+);
+fe.displayName = "Spinner";
+const ke = n(
+  ({ value: e = 0, max: s = 100, color: a, labeled: r, compact: c, loop: i, fade: m, className: d, ...t }, p) => {
+    const N = `${e}%`;
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: p,
+        className: o("progress", c && "compact", r && "labeled", i && "loop", m && "progress-fade", a === "success" && "success", a === "warning" && "warning", a === "danger" && "danger", d),
+        ...t,
+        children: [
+          /* @__PURE__ */ l("progress", { max: s, value: e, "data-displayval": N }),
+          r && /* @__PURE__ */ l("span", { children: N })
+        ]
+      }
+    );
+  }
+);
+ke.displayName = "ProgressBar";
+const Le = n(
+  ({ vertical: e, className: s, children: a, ...r }, c) => /* @__PURE__ */ l("div", { ref: c, className: o("clr-timeline", e && "clr-timeline-vertical", s), role: "list", ...r, children: a })
+);
+Le.displayName = "Timeline";
+const xe = {
+  "not-started": { shape: "circle" },
+  current: { shape: "dot-circle", status: "info" },
+  processing: { shape: "dot-circle", status: "info" },
+  success: { shape: "success-standard", status: "success" },
+  error: { shape: "error-standard", status: "danger" }
+}, Ee = n(
+  ({ state: e = "not-started", header: s, title: a, description: r, className: c, children: i, ...m }, d) => {
+    const t = xe[e];
+    return /* @__PURE__ */ u("div", { ref: d, className: o("clr-timeline-step", c), role: "listitem", ...m, children: [
+      s && /* @__PURE__ */ l("div", { className: "clr-timeline-step-header", children: s }),
+      e === "processing" ? /* @__PURE__ */ l("span", { className: "spinner spinner-md", "aria-label": "In progress" }) : /* @__PURE__ */ l(k, { shape: t.shape, status: t.status }),
+      /* @__PURE__ */ u("div", { className: "clr-timeline-step-body", children: [
+        a && /* @__PURE__ */ l("div", { className: "clr-timeline-step-title", children: a }),
+        r && /* @__PURE__ */ l("div", { className: "clr-timeline-step-description", children: r }),
+        i
+      ] })
+    ] });
+  }
+);
+Ee.displayName = "TimelineStep";
+const ze = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("stack-view", e), ...a, children: s })
+);
+ze.displayName = "StackView";
+const De = n(
+  ({ expandable: e, expanded: s, onToggle: a, label: r, content: c, className: i, children: m, ...d }, t) => /* @__PURE__ */ u("div", { ref: t, className: o("stack-block", e && "stack-block-expandable", s && "stack-block-expanded", i), ...d, children: [
+    /* @__PURE__ */ l("div", { className: "stack-block-label", onClick: e ? a : void 0, style: e ? { cursor: "pointer" } : void 0, children: r }),
+    c && /* @__PURE__ */ l("div", { className: "stack-block-content", children: c }),
+    s && m
+  ] })
+);
+De.displayName = "StackBlock";
+const Re = n(
+  ({ color: e, className: s, children: a, ...r }, c) => /* @__PURE__ */ l("header", { ref: c, className: o("header", e && `header-${e}`, s), ...r, children: a })
+);
+Re.displayName = "Header";
+const Se = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("branding", e), ...a, children: s })
+);
+Se.displayName = "HeaderBranding";
+const Te = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("header-nav", e), ...a, children: s })
+);
+Te.displayName = "HeaderNav";
+const Pe = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("header-actions", e), ...a, children: s })
+);
+Pe.displayName = "HeaderActions";
+const Be = n(
+  ({ compact: e, vertical: s, noBorder: a, className: r, children: c, ...i }, m) => /* @__PURE__ */ l(
+    "table",
+    {
+      ref: m,
+      className: o("table", e && "table-compact", s && "table-vertical", a && "table-noborder", r),
+      ...i,
+      children: c
+    }
+  )
+);
+Be.displayName = "Table";
+const He = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("login-wrapper", e), ...a, children: s })
+);
+He.displayName = "LoginWrapper";
+const Me = n(
+  ({ className: e, children: s, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: o("login", e), ...a, children: s })
+);
+Me.displayName = "Login";
+const O = ({ children: e }) => /* @__PURE__ */ l(V, { children: e });
+O.displayName = "WizardPage";
+const Ae = n(
+  ({ open: e, title: s = "Wizard", size: a = "lg", closable: r = !0, onFinish: c, onCancel: i, className: m, children: d }, t) => {
+    var g, M;
+    const [p, N] = H(0), [v, f] = H(/* @__PURE__ */ new Set()), x = W(() => {
+      const h = [];
+      return $.Children.forEach(d, (b) => {
+        $.isValidElement(b) && b.type === O && h.push({
+          title: b.props.title || "",
+          nextDisabled: !!b.props.nextDisabled,
+          children: b.props.children
+        });
+      }), h;
+    }, [d]), R = p === 0, z = p === x.length - 1;
+    y(() => {
+      e && (N(0), f(/* @__PURE__ */ new Set()));
+    }, [e]), y(() => {
+      if (!e) return;
+      const h = (b) => {
+        b.key === "Escape" && r && (i == null || i());
+      };
+      return document.addEventListener("keydown", h), () => document.removeEventListener("keydown", h);
+    }, [e, r, i]);
+    const D = w(() => {
+      z ? c == null || c() : (f((h) => new Set(h).add(p)), N((h) => h + 1));
+    }, [p, z, c]), S = w(() => {
+      R || N((h) => h - 1);
+    }, [R]), T = w((h) => {
+      (h === 0 || v.has(h - 1) || h <= p) && N(h);
+    }, [v, p]);
+    if (!e || x.length === 0) return null;
+    const E = (g = x[p]) == null ? void 0 : g.nextDisabled;
+    return /* @__PURE__ */ l("div", { ref: t, className: o("clr-wizard", `wizard-${a}`, m), children: /* @__PURE__ */ u("div", { className: "modal", children: [
+      /* @__PURE__ */ l("div", { className: o("modal-dialog", a === "md" && "modal-md", a === "lg" && "modal-lg", a === "xl" && "modal-xl"), role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ u("div", { className: "modal-content-wrapper", children: [
+        /* @__PURE__ */ u("div", { className: "modal-nav clr-wizard-stepnav-wrapper", role: "region", children: [
+          /* @__PURE__ */ l("div", { className: "clr-wizard-title", role: "heading", "aria-level": 1, children: s }),
+          /* @__PURE__ */ l("div", { className: "clr-wizard-stepnav", children: /* @__PURE__ */ l("nav", { "aria-label": "Wizard steps", children: /* @__PURE__ */ l("ol", { className: "clr-wizard-stepnav-list", children: x.map((h, b) => {
+            const P = b === p, B = v.has(b), A = !P && !B && b > 0 && !v.has(b - 1);
+            return /* @__PURE__ */ l(
+              "li",
+              {
+                className: o(
+                  "clr-wizard-stepnav-item",
+                  P && "active",
+                  B && "complete",
+                  A && "disabled"
+                ),
+                "aria-current": P ? "step" : void 0,
+                children: /* @__PURE__ */ u(
+                  "button",
+                  {
+                    type: "button",
+                    className: "btn btn-link clr-wizard-stepnav-link",
+                    disabled: A,
+                    onClick: () => T(b),
+                    children: [
+                      /* @__PURE__ */ u("div", { className: "clr-wizard-stepnav-link-icon", children: [
+                        P && /* @__PURE__ */ l(k, { shape: "dot-circle", role: "img", "aria-label": "Current" }),
+                        B && !P && /* @__PURE__ */ l(k, { shape: "success-standard", role: "img", "aria-label": "Completed" })
+                      ] }),
+                      /* @__PURE__ */ l("span", { className: "clr-sr-only", children: "Step" }),
+                      /* @__PURE__ */ l("div", { className: "clr-wizard-stepnav-link-page-number", children: b + 1 }),
+                      /* @__PURE__ */ l("span", { className: "clr-wizard-stepnav-link-title", children: h.title })
+                    ]
+                  }
+                )
+              },
+              b
+            );
+          }) }) }) })
+        ] }),
+        /* @__PURE__ */ u("div", { className: "modal-content", children: [
+          /* @__PURE__ */ u("div", { className: "modal-header--accessible", children: [
+            /* @__PURE__ */ l("div", { className: "modal-title-wrapper", tabIndex: -1, children: /* @__PURE__ */ l("div", { className: "modal-title", role: "heading", "aria-level": 2, children: /* @__PURE__ */ l("span", { tabIndex: -1, className: "modal-title-text", children: (M = x[p]) == null ? void 0 : M.title }) }) }),
+            r && /* @__PURE__ */ l("button", { type: "button", className: "close", "aria-label": "Close", onClick: () => i == null ? void 0 : i(), children: /* @__PURE__ */ l(k, { shape: "window-close" }) })
+          ] }),
+          /* @__PURE__ */ l("div", { className: "modal-body-wrapper", children: /* @__PURE__ */ l("div", { className: "modal-body", children: /* @__PURE__ */ l("main", { className: "clr-wizard-content", children: x.map((h, b) => /* @__PURE__ */ l(
+            "div",
+            {
+              className: o("clr-wizard-page", b === p && "active"),
+              "aria-hidden": b !== p,
+              style: b !== p ? { display: "none" } : void 0,
+              children: h.children
+            },
+            b
+          )) }) }) }),
+          /* @__PURE__ */ l("div", { className: "modal-footer clr-wizard-footer", children: /* @__PURE__ */ l("div", { className: "clr-wizard-footer-buttons", children: /* @__PURE__ */ u("div", { className: "clr-wizard-footer-buttons-wrapper", children: [
+            /* @__PURE__ */ l("div", { className: "clr-wizard-btn-wrapper", children: /* @__PURE__ */ l("button", { type: "button", className: "btn clr-wizard-btn btn-link clr-wizard-btn--tertiary", onClick: () => i == null ? void 0 : i(), children: "Cancel" }) }),
+            !R && /* @__PURE__ */ l("div", { className: "clr-wizard-btn-wrapper", children: /* @__PURE__ */ l("button", { type: "button", className: "btn clr-wizard-btn btn-outline clr-wizard-btn--secondary", onClick: S, children: "Back" }) }),
+            !z && /* @__PURE__ */ l("div", { className: "clr-wizard-btn-wrapper", children: /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                className: o("btn clr-wizard-btn btn-primary clr-wizard-btn--primary", E && "disabled"),
+                disabled: E,
+                onClick: D,
+                children: "Next"
+              }
+            ) }),
+            z && /* @__PURE__ */ l("div", { className: "clr-wizard-btn-wrapper", children: /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                className: o("btn clr-wizard-btn btn-success clr-wizard-btn--primary", E && "disabled"),
+                disabled: E,
+                onClick: D,
+                children: "Finish"
+              }
+            ) })
+          ] }) }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ l("div", { className: "modal-backdrop", "aria-hidden": "true" })
+    ] }) });
+  }
+);
+Ae.displayName = "Wizard";
+const $e = n(
+  ({ items: e, maxItems: s, onItemClick: a, className: r }, c) => {
+    const i = L(null), m = c || i, d = w((t) => a == null ? void 0 : a(t.detail), [a]);
+    return y(() => {
+      const t = m.current;
+      if (t)
+        return t.addEventListener("breadcrumbClick", d), () => t.removeEventListener("breadcrumbClick", d);
+    }, [m, d]), /* @__PURE__ */ l(
+      "clr-wc-breadcrumbs",
+      {
+        ref: m,
+        items: JSON.stringify(e),
+        maxItems: s,
+        class: r
+      }
+    );
+  }
+);
+$e.displayName = "Breadcrumbs";
+const Je = n(
+  ({ columns: e, data: s, loading: a, paginate: r, pageSize: c = 10, selectable: i, expandable: m, showDetailPane: d, showRowActions: t, rowActions: p, onRefresh: N, onSelectedChange: v, onRowAction: f, className: x }, R) => {
+    const z = L(null), D = R || z, S = w((g) => N == null ? void 0 : N(g.detail), [N]), T = w((g) => v == null ? void 0 : v(g.detail), [v]), E = w((g) => f == null ? void 0 : f(g.detail), [f]);
+    return y(() => {
+      const g = D.current;
+      if (g)
+        return g.addEventListener("dgRefresh", S), g.addEventListener("dgSelectedChange", T), g.addEventListener("dgRowAction", E), () => {
+          g.removeEventListener("dgRefresh", S), g.removeEventListener("dgSelectedChange", T), g.removeEventListener("dgRowAction", E);
+        };
+    }, [D, S, T, E]), /* @__PURE__ */ l(
+      "clr-wc-datagrid",
+      {
+        ref: D,
+        columns: JSON.stringify(e),
+        data: JSON.stringify(s),
+        loading: a || void 0,
+        paginate: r || void 0,
+        pageSize: c,
+        selectable: i || void 0,
+        expandable: m || void 0,
+        showDetailPane: d || void 0,
+        showRowActions: t || void 0,
+        rowActions: p ? JSON.stringify(p) : void 0,
+        class: x
+      }
+    );
+  }
+);
+Je.displayName = "Datagrid";
+const We = n(
+  ({ nodes: e, selectable: s, className: a }, r) => /* @__PURE__ */ l(
+    "clr-wc-tree",
+    {
+      ref: r,
+      nodes: JSON.stringify(e),
+      selectable: s || void 0,
+      class: a
+    }
+  )
+);
+We.displayName = "TreeView";
+const Oe = n(
+  ({ steps: e, onSubmit: s, className: a }, r) => {
+    const c = L(null), i = r || c, m = w(() => s == null ? void 0 : s(), [s]);
+    return y(() => {
+      const d = i.current;
+      if (d)
+        return d.addEventListener("onSubmit", m), () => d.removeEventListener("onSubmit", m);
+    }, [i, m]), /* @__PURE__ */ l(
+      "clr-wc-stepper",
+      {
+        ref: i,
+        steps: JSON.stringify(e),
+        class: a
+      }
+    );
+  }
+);
+Oe.displayName = "Stepper";
+const Ve = n(
+  ({ label: e, value: s, placeholder: a = "MM/DD/YYYY", onChange: r, className: c }, i) => {
+    const m = L(null), d = i || m, t = w((p) => r == null ? void 0 : r(p.detail), [r]);
+    return y(() => {
+      const p = d.current;
+      if (p)
+        return p.addEventListener("valueChange", t), () => p.removeEventListener("valueChange", t);
+    }, [d, t]), /* @__PURE__ */ l(
+      "clr-wc-datepicker",
+      {
+        ref: d,
+        label: e,
+        value: s,
+        placeholder: a,
+        class: c
+      }
+    );
+  }
+);
+Ve.displayName = "Datepicker";
+const _e = n(
+  ({ label: e, startDate: s, endDate: a, onStartDateChange: r, onEndDateChange: c, className: i }, m) => {
+    const d = L(null), t = m || d, p = w((v) => r == null ? void 0 : r(v.detail), [r]), N = w((v) => c == null ? void 0 : c(v.detail), [c]);
+    return y(() => {
+      const v = t.current;
+      if (v)
+        return v.addEventListener("startDateChange", p), v.addEventListener("endDateChange", N), () => {
+          v.removeEventListener("startDateChange", p), v.removeEventListener("endDateChange", N);
+        };
+    }, [t, p, N]), /* @__PURE__ */ l(
+      "clr-wc-date-range-picker",
+      {
+        ref: t,
+        label: e,
+        startDate: s,
+        endDate: a,
+        class: i
+      }
+    );
+  }
+);
+_e.displayName = "DateRangePicker";
+const Ie = n(
+  ({ label: e, placeholder: s, options: a, selected: r, onSelectionChange: c, className: i }, m) => {
+    const d = L(null), t = m || d, p = w((N) => c == null ? void 0 : c(N.detail), [c]);
+    return y(() => {
+      const N = t.current;
+      if (N)
+        return N.addEventListener("selectionChange", p), () => N.removeEventListener("selectionChange", p);
+    }, [t, p]), /* @__PURE__ */ l(
+      "clr-wc-combobox",
+      {
+        ref: t,
+        label: e,
+        placeholder: s,
+        options: JSON.stringify(a),
+        selected: r,
+        class: i
+      }
+    );
+  }
+);
+Ie.displayName = "Combobox";
+const Ye = n(
+  ({ position: e = "right-middle", className: s, children: a }, r) => /* @__PURE__ */ l("clr-wc-signpost", { ref: r, position: e, class: s, children: a })
+);
+Ye.displayName = "Signpost";
+const je = n(
+  ({ tooltipText: e, position: s = "right", size: a = "sm", className: r, children: c }, i) => /* @__PURE__ */ l("clr-wc-tooltip", { ref: i, tooltipText: e, position: s, size: a, class: r, children: c })
+);
+je.displayName = "Tooltip";
+const Fe = n(
+  ({ triggerLabel: e = "Dropdown", items: s, onItemClick: a, className: r }, c) => {
+    const i = L(null), m = c || i, d = w((t) => a == null ? void 0 : a(t.detail), [a]);
+    return y(() => {
+      const t = m.current;
+      if (t)
+        return t.addEventListener("itemClick", d), () => t.removeEventListener("itemClick", d);
+    }, [m, d]), /* @__PURE__ */ l(
+      "clr-wc-dropdown-angular",
+      {
+        ref: m,
+        triggerLabel: e,
+        items: JSON.stringify(s),
+        class: r
+      }
+    );
+  }
+);
+Fe.displayName = "DropdownAngular";
+const Ue = n(
+  ({ items: e, collapsible: s, collapsed: a, onNavItemClick: r, className: c }, i) => {
+    const m = L(null), d = i || m, t = w((p) => r == null ? void 0 : r(p.detail), [r]);
+    return y(() => {
+      const p = d.current;
+      if (p)
+        return p.addEventListener("navItemClick", t), () => p.removeEventListener("navItemClick", t);
+    }, [d, t]), /* @__PURE__ */ l(
+      "clr-wc-vertical-nav",
+      {
+        ref: d,
+        items: JSON.stringify(e),
+        collapsible: s || void 0,
+        collapsed: a || void 0,
+        class: c
+      }
+    );
+  }
+);
+Ue.displayName = "VerticalNav";
+const Xe = n(
+  ({ badge: e, ...s }, a) => /* @__PURE__ */ l(k, { ref: a, ...s })
+);
+Xe.displayName = "Icon";
+export {
+  we as Accordion,
+  ye as AccordionPanel,
+  U as Alert,
+  X as Badge,
+  $e as Breadcrumbs,
+  _ as Button,
+  q as Card,
+  K as CardBlock,
+  ee as CardFooter,
+  G as CardHeader,
+  C as CardText,
+  Q as CardTitle,
+  k as CdsIcon,
+  ne as Checkbox,
+  Ie as Combobox,
+  Je as Datagrid,
+  _e as DateRangePicker,
+  Ve as Datepicker,
+  Ne as Dropdown,
+  Fe as DropdownAngular,
+  he as DropdownDivider,
+  ge as DropdownHeader,
+  be as DropdownItem,
+  ve as DropdownMenu,
+  ue as DropdownTrigger,
+  Re as Header,
+  Pe as HeaderActions,
+  Se as HeaderBranding,
+  Te as HeaderNav,
+  Xe as Icon,
+  ce as Input,
+  Z as Label,
+  Me as Login,
+  He as LoginWrapper,
+  ae as Modal,
+  se as ModalBody,
+  le as ModalFooter,
+  re as ModalHeader,
+  ke as ProgressBar,
+  ie as Select,
+  Ye as Signpost,
+  fe as Spinner,
+  De as StackBlock,
+  ze as StackView,
+  Oe as Stepper,
+  me as Tab,
+  oe as TabList,
+  pe as TabPanel,
+  Be as Table,
+  de as Tabs,
+  Le as Timeline,
+  Ee as TimelineStep,
+  te as Toggle,
+  je as Tooltip,
+  We as TreeView,
+  Ue as VerticalNav,
+  Ae as Wizard,
+  O as WizardPage
+};