@sps-woodland/buttons 8.0.0-rc1

package/lib/index.es.js

@@ -0,0 +1,1601 @@
+import * as d from "react";
+import U, { useRef as W, useCallback as R, useEffect as ie, useContext as Ke, useState as je, useMemo as ze } from "react";
+import { I18nContext as Ye, Icon as qe, Spinner as Xe, cl as Je, Metadata as Qe } from "@sps-woodland/core";
+import { code as m } from "@spscommerce/utils";
+function Ie(e) {
+  var t, n, r = "";
+  if (typeof e == "string" || typeof e == "number")
+    r += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e))
+      for (t = 0; t < e.length; t++)
+        e[t] && (n = Ie(e[t])) && (r && (r += " "), r += n);
+    else
+      for (t in e)
+        e[t] && (r && (r += " "), r += t);
+  return r;
+}
+function Me() {
+  for (var e, t, n = 0, r = ""; n < arguments.length; )
+    (e = arguments[n++]) && (t = Ie(e)) && (r && (r += " "), r += t);
+  return r;
+}
+typeof window < "u" && U.useLayoutEffect;
+let pe = /* @__PURE__ */ new Map();
+function Ze(e, t) {
+  if (e === t)
+    return e;
+  let n = pe.get(e);
+  if (n)
+    return n(t), t;
+  let r = pe.get(t);
+  return r ? (r(e), e) : t;
+}
+function et(...e) {
+  return (...t) => {
+    for (let n of e)
+      typeof n == "function" && n(...t);
+  };
+}
+function me(...e) {
+  let t = {
+    ...e[0]
+  };
+  for (let n = 1; n < e.length; n++) {
+    let r = e[n];
+    for (let s in r) {
+      let l = t[s], u = r[s];
+      typeof l == "function" && typeof u == "function" && s[0] === "o" && s[1] === "n" && s.charCodeAt(2) >= 65 && s.charCodeAt(2) <= 90 ? t[s] = et(l, u) : (s === "className" || s === "UNSAFE_className") && typeof l == "string" && typeof u == "string" ? t[s] = Me(l, u) : s === "id" && l && u ? t.id = Ze(l, u) : t[s] = u !== void 0 ? u : l;
+    }
+  }
+  return t;
+}
+const tt = /* @__PURE__ */ new Set([
+  "id"
+]), nt = /* @__PURE__ */ new Set([
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-details"
+]), rt = /^(data-.*)$/;
+function ot(e, t = {}) {
+  let { labelable: n, propNames: r } = t, s = {};
+  for (const l in e)
+    Object.prototype.hasOwnProperty.call(e, l) && (tt.has(l) || n && nt.has(l) || (r == null ? void 0 : r.has(l)) || rt.test(l)) && (s[l] = e[l]);
+  return s;
+}
+let G = /* @__PURE__ */ new Map(), be = /* @__PURE__ */ new Set();
+function ge() {
+  if (typeof window > "u")
+    return;
+  let e = (n) => {
+    let r = G.get(n.target);
+    r || (r = /* @__PURE__ */ new Set(), G.set(n.target, r), n.target.addEventListener("transitioncancel", t)), r.add(n.propertyName);
+  }, t = (n) => {
+    let r = G.get(n.target);
+    if (!!r && (r.delete(n.propertyName), r.size === 0 && (n.target.removeEventListener("transitioncancel", t), G.delete(n.target)), G.size === 0)) {
+      for (let s of be)
+        s();
+      be.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", e), document.body.addEventListener("transitionend", t);
+}
+typeof document < "u" && (document.readyState !== "loading" ? ge() : document.addEventListener("DOMContentLoaded", ge));
+const st = typeof window < "u" ? U.useLayoutEffect : () => {
+};
+let ye = /* @__PURE__ */ new Map();
+function at(e, t) {
+  if (e === t)
+    return e;
+  let n = ye.get(e);
+  if (n)
+    return n(t), t;
+  let r = ye.get(t);
+  return r ? (r(e), e) : t;
+}
+function it(...e) {
+  return (...t) => {
+    for (let n of e)
+      typeof n == "function" && n(...t);
+  };
+}
+function Q(...e) {
+  let t = {
+    ...e[0]
+  };
+  for (let n = 1; n < e.length; n++) {
+    let r = e[n];
+    for (let s in r) {
+      let l = t[s], u = r[s];
+      typeof l == "function" && typeof u == "function" && s[0] === "o" && s[1] === "n" && s.charCodeAt(2) >= 65 && s.charCodeAt(2) <= 90 ? t[s] = it(l, u) : (s === "className" || s === "UNSAFE_className") && typeof l == "string" && typeof u == "string" ? t[s] = Me(l, u) : s === "id" && l && u ? t.id = at(l, u) : t[s] = u !== void 0 ? u : l;
+    }
+  }
+  return t;
+}
+function F(e) {
+  if (lt())
+    e.focus({
+      preventScroll: !0
+    });
+  else {
+    let t = ct(e);
+    e.focus(), ut(t);
+  }
+}
+let q = null;
+function lt() {
+  if (q == null) {
+    q = !1;
+    try {
+      var e = document.createElement("div");
+      e.focus({
+        get preventScroll() {
+          return q = !0, !0;
+        }
+      });
+    } catch {
+    }
+  }
+  return q;
+}
+function ct(e) {
+  for (var t = e.parentNode, n = [], r = document.scrollingElement || document.documentElement; t instanceof HTMLElement && t !== r; )
+    (t.offsetHeight < t.scrollHeight || t.offsetWidth < t.scrollWidth) && n.push({
+      element: t,
+      scrollTop: t.scrollTop,
+      scrollLeft: t.scrollLeft
+    }), t = t.parentNode;
+  return r instanceof HTMLElement && n.push({
+    element: r,
+    scrollTop: r.scrollTop,
+    scrollLeft: r.scrollLeft
+  }), n;
+}
+function ut(e) {
+  for (let { element: t, scrollTop: n, scrollLeft: r } of e)
+    t.scrollTop = n, t.scrollLeft = r;
+}
+let A = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Set();
+function $e() {
+  if (typeof window > "u")
+    return;
+  let e = (n) => {
+    let r = A.get(n.target);
+    r || (r = /* @__PURE__ */ new Set(), A.set(n.target, r), n.target.addEventListener("transitioncancel", t)), r.add(n.propertyName);
+  }, t = (n) => {
+    let r = A.get(n.target);
+    if (!!r && (r.delete(n.propertyName), r.size === 0 && (n.target.removeEventListener("transitioncancel", t), A.delete(n.target)), A.size === 0)) {
+      for (let s of te)
+        s();
+      te.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", e), document.body.addEventListener("transitionend", t);
+}
+typeof document < "u" && (document.readyState !== "loading" ? $e() : document.addEventListener("DOMContentLoaded", $e));
+function Ae(e) {
+  requestAnimationFrame(() => {
+    A.size === 0 ? e() : te.add(e);
+  });
+}
+function dt() {
+  let e = W(/* @__PURE__ */ new Map()), t = R((s, l, u, p) => {
+    let f = p != null && p.once ? (...b) => {
+      e.current.delete(u), u(...b);
+    } : u;
+    e.current.set(u, {
+      type: l,
+      eventTarget: s,
+      fn: f,
+      options: p
+    }), s.addEventListener(l, u, p);
+  }, []), n = R((s, l, u, p) => {
+    var f;
+    let b = ((f = e.current.get(u)) === null || f === void 0 ? void 0 : f.fn) || u;
+    s.removeEventListener(l, b, p), e.current.delete(u);
+  }, []), r = R(() => {
+    e.current.forEach((s, l) => {
+      n(s.eventTarget, s.type, l, s.options);
+    });
+  }, [
+    n
+  ]);
+  return ie(() => r, [
+    r
+  ]), {
+    addGlobalListener: t,
+    removeGlobalListener: n,
+    removeAllGlobalListeners: r
+  };
+}
+function Fe(e, t) {
+  st(() => {
+    if (e && e.ref && t)
+      return e.ref.current = t.current, () => {
+        e.ref.current = null;
+      };
+  }, [
+    e,
+    t
+  ]);
+}
+function le(e) {
+  var t;
+  return typeof window < "u" && window.navigator != null ? e.test(((t = window.navigator.userAgentData) === null || t === void 0 ? void 0 : t.platform) || window.navigator.platform) : !1;
+}
+function _e() {
+  return le(/^Mac/i);
+}
+function ft() {
+  return le(/^iPhone/i);
+}
+function pt() {
+  return le(/^iPad/i) || _e() && navigator.maxTouchPoints > 1;
+}
+function Re() {
+  return ft() || pt();
+}
+const mt = typeof window < "u" ? U.useLayoutEffect : () => {
+};
+let H = /* @__PURE__ */ new Map(), ve = /* @__PURE__ */ new Set();
+function he() {
+  if (typeof window > "u")
+    return;
+  let e = (n) => {
+    let r = H.get(n.target);
+    r || (r = /* @__PURE__ */ new Set(), H.set(n.target, r), n.target.addEventListener("transitioncancel", t)), r.add(n.propertyName);
+  }, t = (n) => {
+    let r = H.get(n.target);
+    if (!!r && (r.delete(n.propertyName), r.size === 0 && (n.target.removeEventListener("transitioncancel", t), H.delete(n.target)), H.size === 0)) {
+      for (let s of ve)
+        s();
+      ve.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", e), document.body.addEventListener("transitionend", t);
+}
+typeof document < "u" && (document.readyState !== "loading" ? he() : document.addEventListener("DOMContentLoaded", he));
+function bt(e) {
+  var t;
+  return typeof window > "u" || window.navigator == null ? !1 : ((t = window.navigator.userAgentData) === null || t === void 0 ? void 0 : t.brands.some((n) => e.test(n.brand))) || e.test(window.navigator.userAgent);
+}
+function gt(e) {
+  var t;
+  return typeof window < "u" && window.navigator != null ? e.test(((t = window.navigator.userAgentData) === null || t === void 0 ? void 0 : t.platform) || window.navigator.platform) : !1;
+}
+function yt() {
+  return gt(/^Mac/i);
+}
+function $t() {
+  return bt(/Android/i);
+}
+function vt(e) {
+  return e.mozInputSource === 0 && e.isTrusted ? !0 : $t() && e.pointerType ? e.type === "click" && e.buttons === 1 : e.detail === 0 && !e.pointerType;
+}
+const ht = U.createContext(null);
+ht.displayName = "PressResponderContext";
+class kt {
+  isDefaultPrevented() {
+    return this.nativeEvent.defaultPrevented;
+  }
+  preventDefault() {
+    this.defaultPrevented = !0, this.nativeEvent.preventDefault();
+  }
+  stopPropagation() {
+    this.nativeEvent.stopPropagation(), this.isPropagationStopped = () => !0;
+  }
+  isPropagationStopped() {
+    return !1;
+  }
+  persist() {
+  }
+  constructor(t, n) {
+    this.nativeEvent = n, this.target = n.target, this.currentTarget = n.currentTarget, this.relatedTarget = n.relatedTarget, this.bubbles = n.bubbles, this.cancelable = n.cancelable, this.defaultPrevented = n.defaultPrevented, this.eventPhase = n.eventPhase, this.isTrusted = n.isTrusted, this.timeStamp = n.timeStamp, this.type = t;
+  }
+}
+function wt(e) {
+  let t = W({
+    isFocused: !1,
+    onBlur: e,
+    observer: null
+  });
+  return t.current.onBlur = e, mt(() => {
+    const n = t.current;
+    return () => {
+      n.observer && (n.observer.disconnect(), n.observer = null);
+    };
+  }, []), R((n) => {
+    if (n.target instanceof HTMLButtonElement || n.target instanceof HTMLInputElement || n.target instanceof HTMLTextAreaElement || n.target instanceof HTMLSelectElement) {
+      t.current.isFocused = !0;
+      let r = n.target, s = (l) => {
+        var u, p;
+        t.current.isFocused = !1, r.disabled && ((p = (u = t.current).onBlur) === null || p === void 0 || p.call(u, new kt("blur", l))), t.current.observer && (t.current.observer.disconnect(), t.current.observer = null);
+      };
+      r.addEventListener("focusout", s, {
+        once: !0
+      }), t.current.observer = new MutationObserver(() => {
+        t.current.isFocused && r.disabled && (t.current.observer.disconnect(), r.dispatchEvent(new FocusEvent("blur")), r.dispatchEvent(new FocusEvent("focusout", {
+          bubbles: !0
+        })));
+      }), t.current.observer.observe(r, {
+        attributes: !0,
+        attributeFilter: [
+          "disabled"
+        ]
+      });
+    }
+  }, []);
+}
+function Bt(e) {
+  let { isDisabled: t, onFocus: n, onBlur: r, onFocusChange: s } = e;
+  const l = R((f) => {
+    if (f.target === f.currentTarget)
+      return r && r(f), s && s(!1), !0;
+  }, [
+    r,
+    s
+  ]), u = wt(l), p = R((f) => {
+    f.target === f.currentTarget && (n && n(f), s && s(!0), u(f));
+  }, [
+    s,
+    n,
+    u
+  ]);
+  return {
+    focusProps: {
+      onFocus: !t && (n || s || r) ? p : void 0,
+      onBlur: !t && (r || s) ? l : null
+    }
+  };
+}
+let j = null, Et = /* @__PURE__ */ new Set(), ke = !1, D = !1, ne = !1;
+function ce(e, t) {
+  for (let n of Et)
+    n(e, t);
+}
+function Pt(e) {
+  return !(e.metaKey || !yt() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+}
+function we(e) {
+  D = !0, Pt(e) && (j = "keyboard", ce("keyboard", e));
+}
+function K(e) {
+  j = "pointer", (e.type === "mousedown" || e.type === "pointerdown") && (D = !0, ce("pointer", e));
+}
+function Tt(e) {
+  vt(e) && (D = !0, j = "virtual");
+}
+function xt(e) {
+  e.target === window || e.target === document || (!D && !ne && (j = "virtual", ce("virtual", e)), D = !1, ne = !1);
+}
+function St() {
+  D = !1, ne = !0;
+}
+function Be() {
+  if (typeof window > "u" || ke)
+    return;
+  let e = HTMLElement.prototype.focus;
+  HTMLElement.prototype.focus = function() {
+    D = !0, e.apply(this, arguments);
+  }, document.addEventListener("keydown", we, !0), document.addEventListener("keyup", we, !0), document.addEventListener("click", Tt, !0), window.addEventListener("focus", xt, !0), window.addEventListener("blur", St, !1), typeof PointerEvent < "u" ? (document.addEventListener("pointerdown", K, !0), document.addEventListener("pointermove", K, !0), document.addEventListener("pointerup", K, !0)) : (document.addEventListener("mousedown", K, !0), document.addEventListener("mousemove", K, !0), document.addEventListener("mouseup", K, !0)), ke = !0;
+}
+typeof document < "u" && (document.readyState !== "loading" ? Be() : document.addEventListener("DOMContentLoaded", Be));
+function Nt() {
+  return j;
+}
+function Ee(e) {
+  if (!e)
+    return;
+  let t = !0;
+  return (n) => {
+    let r = {
+      ...n,
+      preventDefault() {
+        n.preventDefault();
+      },
+      isDefaultPrevented() {
+        return n.isDefaultPrevented();
+      },
+      stopPropagation() {
+        console.error("stopPropagation is now the default behavior for events in React Spectrum. You can use continuePropagation() to revert this behavior.");
+      },
+      continuePropagation() {
+        t = !1;
+      }
+    };
+    e(r), t && n.stopPropagation();
+  };
+}
+function Dt(e) {
+  return {
+    keyboardProps: e.isDisabled ? {} : {
+      onKeyDown: Ee(e.onKeyDown),
+      onKeyUp: Ee(e.onKeyUp)
+    }
+  };
+}
+function Ct(e) {
+  if (Nt() === "virtual") {
+    let t = document.activeElement;
+    Ae(() => {
+      document.activeElement === t && document.contains(e) && F(e);
+    });
+  } else
+    F(e);
+}
+function Ot(e, t) {
+  return t.some(
+    (n) => n.contains(e)
+  );
+}
+class ue {
+  get size() {
+    return this.fastMap.size;
+  }
+  getTreeNode(t) {
+    return this.fastMap.get(t);
+  }
+  addTreeNode(t, n, r) {
+    let s = this.fastMap.get(n != null ? n : null), l = new Pe({
+      scopeRef: t
+    });
+    s.addChild(l), l.parent = s, this.fastMap.set(t, l), r && (l.nodeToRestore = r);
+  }
+  removeTreeNode(t) {
+    if (t === null)
+      return;
+    let n = this.fastMap.get(t), r = n.parent;
+    for (let l of this.traverse())
+      l !== n && n.nodeToRestore && l.nodeToRestore && n.scopeRef.current && Ot(l.nodeToRestore, n.scopeRef.current) && (l.nodeToRestore = n.nodeToRestore);
+    let s = n.children;
+    r.removeChild(n), s.length > 0 && s.forEach(
+      (l) => r.addChild(l)
+    ), this.fastMap.delete(n.scopeRef);
+  }
+  *traverse(t = this.root) {
+    if (t.scopeRef != null && (yield t), t.children.length > 0)
+      for (let n of t.children)
+        yield* this.traverse(n);
+  }
+  clone() {
+    let t = new ue();
+    for (let n of this.traverse())
+      t.addTreeNode(n.scopeRef, n.parent.scopeRef, n.nodeToRestore);
+    return t;
+  }
+  constructor() {
+    this.fastMap = /* @__PURE__ */ new Map(), this.root = new Pe({
+      scopeRef: null
+    }), this.fastMap.set(null, this.root);
+  }
+}
+class Pe {
+  addChild(t) {
+    this.children.push(t), t.parent = this;
+  }
+  removeChild(t) {
+    this.children.splice(this.children.indexOf(t), 1), t.parent = void 0;
+  }
+  constructor(t) {
+    this.children = [], this.contain = !1, this.scopeRef = t.scopeRef;
+  }
+}
+new ue();
+let Lt = /* @__PURE__ */ U.createContext(null);
+function Kt(e) {
+  let t = Ke(Lt) || {};
+  Fe(t, e);
+  let { ref: n, ...r } = t;
+  return r;
+}
+function It(e, t) {
+  let { focusProps: n } = Bt(e), { keyboardProps: r } = Dt(e), s = Q(n, r), l = Kt(t), u = e.isDisabled ? {} : l, p = W(e.autoFocus);
+  return ie(() => {
+    p.current && t.current && Ct(t.current), p.current = !1;
+  }, [
+    t
+  ]), {
+    focusableProps: Q({
+      ...s,
+      tabIndex: e.excludeFromTabOrder && !e.isDisabled ? -1 : void 0
+    }, u)
+  };
+}
+let _ = "default", re = "", J = /* @__PURE__ */ new WeakMap();
+function Te(e) {
+  Re() ? (_ === "default" && (re = document.documentElement.style.webkitUserSelect, document.documentElement.style.webkitUserSelect = "none"), _ = "disabled") : (e instanceof HTMLElement || e instanceof SVGElement) && (J.set(e, e.style.userSelect), e.style.userSelect = "none");
+}
+function X(e) {
+  if (Re()) {
+    if (_ !== "disabled")
+      return;
+    _ = "restoring", setTimeout(() => {
+      Ae(() => {
+        _ === "restoring" && (document.documentElement.style.webkitUserSelect === "none" && (document.documentElement.style.webkitUserSelect = re || ""), re = "", _ = "default");
+      });
+    }, 300);
+  } else if ((e instanceof HTMLElement || e instanceof SVGElement) && e && J.has(e)) {
+    let t = J.get(e);
+    e.style.userSelect === "none" && (e.style.userSelect = t), e.getAttribute("style") === "" && e.removeAttribute("style"), J.delete(e);
+  }
+}
+function oe(e) {
+  return e.mozInputSource === 0 && e.isTrusted ? !0 : e.detail === 0 && !e.pointerType;
+}
+const Ue = U.createContext(null);
+Ue.displayName = "PressResponderContext";
+function Mt(e) {
+  let t = Ke(Ue);
+  if (t) {
+    let { register: n, ...r } = t;
+    e = Q(r, e), n();
+  }
+  return Fe(t, e.ref), e;
+}
+function At(e) {
+  let {
+    onPress: t,
+    onPressChange: n,
+    onPressStart: r,
+    onPressEnd: s,
+    onPressUp: l,
+    isDisabled: u,
+    isPressed: p,
+    preventFocusOnPress: f,
+    shouldCancelOnPointerExit: b,
+    allowTextSelectionOnPress: g,
+    ref: O,
+    ...x
+  } = Mt(e), k = W(null);
+  k.current = {
+    onPress: t,
+    onPressChange: n,
+    onPressStart: r,
+    onPressEnd: s,
+    onPressUp: l,
+    isDisabled: u,
+    shouldCancelOnPointerExit: b
+  };
+  let [S, E] = je(!1), L = W({
+    isPressed: !1,
+    ignoreEmulatedMouseEvents: !1,
+    ignoreClickAfterPress: !1,
+    didFirePressStart: !1,
+    activePointerId: null,
+    target: null,
+    isOverTarget: !1,
+    pointerType: null
+  }), { addGlobalListener: w, removeAllGlobalListeners: $ } = dt(), N = ze(() => {
+    let o = L.current, B = (i, v) => {
+      let { onPressStart: a, onPressChange: c, isDisabled: Y } = k.current;
+      Y || o.didFirePressStart || (a && a({
+        type: "pressstart",
+        pointerType: v,
+        target: i.currentTarget,
+        shiftKey: i.shiftKey,
+        metaKey: i.metaKey,
+        ctrlKey: i.ctrlKey,
+        altKey: i.altKey
+      }), c && c(!0), o.didFirePressStart = !0, E(!0));
+    }, h = (i, v, a = !0) => {
+      let { onPressEnd: c, onPressChange: Y, onPress: fe, isDisabled: We } = k.current;
+      !o.didFirePressStart || (o.ignoreClickAfterPress = !0, o.didFirePressStart = !1, c && c({
+        type: "pressend",
+        pointerType: v,
+        target: i.currentTarget,
+        shiftKey: i.shiftKey,
+        metaKey: i.metaKey,
+        ctrlKey: i.ctrlKey,
+        altKey: i.altKey
+      }), Y && Y(!1), E(!1), fe && a && !We && fe({
+        type: "press",
+        pointerType: v,
+        target: i.currentTarget,
+        shiftKey: i.shiftKey,
+        metaKey: i.metaKey,
+        ctrlKey: i.ctrlKey,
+        altKey: i.altKey
+      }));
+    }, V = (i, v) => {
+      let { onPressUp: a, isDisabled: c } = k.current;
+      c || a && a({
+        type: "pressup",
+        pointerType: v,
+        target: i.currentTarget,
+        shiftKey: i.shiftKey,
+        metaKey: i.metaKey,
+        ctrlKey: i.ctrlKey,
+        altKey: i.altKey
+      });
+    }, T = (i) => {
+      o.isPressed && (o.isOverTarget && h(P(o.target, i), o.pointerType, !1), o.isPressed = !1, o.isOverTarget = !1, o.activePointerId = null, o.pointerType = null, $(), g || X(o.target));
+    }, y = {
+      onKeyDown(i) {
+        Z(i.nativeEvent, i.currentTarget) && i.currentTarget.contains(i.target) ? (Se(i.target, i.key) && i.preventDefault(), i.stopPropagation(), !o.isPressed && !i.repeat && (o.target = i.currentTarget, o.isPressed = !0, B(i, "keyboard"), w(document, "keyup", He, !1))) : i.key === "Enter" && se(i.currentTarget) && i.stopPropagation();
+      },
+      onKeyUp(i) {
+        Z(i.nativeEvent, i.currentTarget) && !i.repeat && i.currentTarget.contains(i.target) && V(P(o.target, i), "keyboard");
+      },
+      onClick(i) {
+        i && !i.currentTarget.contains(i.target) || i && i.button === 0 && (i.stopPropagation(), u && i.preventDefault(), !o.ignoreClickAfterPress && !o.ignoreEmulatedMouseEvents && (o.pointerType === "virtual" || oe(i.nativeEvent)) && (!u && !f && F(i.currentTarget), B(i, "virtual"), V(i, "virtual"), h(i, "virtual")), o.ignoreEmulatedMouseEvents = !1, o.ignoreClickAfterPress = !1);
+      }
+    }, He = (i) => {
+      if (o.isPressed && Z(i, o.target)) {
+        Se(i.target, i.key) && i.preventDefault(), i.stopPropagation(), o.isPressed = !1;
+        let v = i.target;
+        h(P(o.target, i), "keyboard", o.target.contains(v)), $(), o.target instanceof HTMLElement && o.target.contains(v) && (se(o.target) || o.target.getAttribute("role") === "link") && o.target.click();
+      }
+    };
+    if (typeof PointerEvent < "u") {
+      y.onPointerDown = (c) => {
+        if (!(c.button !== 0 || !c.currentTarget.contains(c.target))) {
+          if (Vt(c.nativeEvent)) {
+            o.pointerType = "virtual";
+            return;
+          }
+          ee(c.currentTarget) && c.preventDefault(), o.pointerType = c.pointerType, c.stopPropagation(), o.isPressed || (o.isPressed = !0, o.isOverTarget = !0, o.activePointerId = c.pointerId, o.target = c.currentTarget, !u && !f && F(c.currentTarget), g || Te(o.target), B(c, o.pointerType), w(document, "pointermove", i, !1), w(document, "pointerup", v, !1), w(document, "pointercancel", a, !1));
+        }
+      }, y.onMouseDown = (c) => {
+        !c.currentTarget.contains(c.target) || c.button === 0 && (ee(c.currentTarget) && c.preventDefault(), c.stopPropagation());
+      }, y.onPointerUp = (c) => {
+        !c.currentTarget.contains(c.target) || o.pointerType === "virtual" || c.button === 0 && I(c, c.currentTarget) && V(c, o.pointerType || c.pointerType);
+      };
+      let i = (c) => {
+        c.pointerId === o.activePointerId && (I(c, o.target) ? o.isOverTarget || (o.isOverTarget = !0, B(P(o.target, c), o.pointerType)) : o.isOverTarget && (o.isOverTarget = !1, h(P(o.target, c), o.pointerType, !1), k.current.shouldCancelOnPointerExit && T(c)));
+      }, v = (c) => {
+        c.pointerId === o.activePointerId && o.isPressed && c.button === 0 && (I(c, o.target) ? h(P(o.target, c), o.pointerType) : o.isOverTarget && h(P(o.target, c), o.pointerType, !1), o.isPressed = !1, o.isOverTarget = !1, o.activePointerId = null, o.pointerType = null, $(), g || X(o.target));
+      }, a = (c) => {
+        T(c);
+      };
+      y.onDragStart = (c) => {
+        !c.currentTarget.contains(c.target) || T(c);
+      };
+    } else {
+      y.onMouseDown = (a) => {
+        a.button !== 0 || !a.currentTarget.contains(a.target) || (ee(a.currentTarget) && a.preventDefault(), a.stopPropagation(), !o.ignoreEmulatedMouseEvents && (o.isPressed = !0, o.isOverTarget = !0, o.target = a.currentTarget, o.pointerType = oe(a.nativeEvent) ? "virtual" : "mouse", !u && !f && F(a.currentTarget), B(a, o.pointerType), w(document, "mouseup", i, !1)));
+      }, y.onMouseEnter = (a) => {
+        !a.currentTarget.contains(a.target) || (a.stopPropagation(), o.isPressed && !o.ignoreEmulatedMouseEvents && (o.isOverTarget = !0, B(a, o.pointerType)));
+      }, y.onMouseLeave = (a) => {
+        !a.currentTarget.contains(a.target) || (a.stopPropagation(), o.isPressed && !o.ignoreEmulatedMouseEvents && (o.isOverTarget = !1, h(a, o.pointerType, !1), k.current.shouldCancelOnPointerExit && T(a)));
+      }, y.onMouseUp = (a) => {
+        !a.currentTarget.contains(a.target) || !o.ignoreEmulatedMouseEvents && a.button === 0 && V(a, o.pointerType);
+      };
+      let i = (a) => {
+        if (a.button === 0) {
+          if (o.isPressed = !1, $(), o.ignoreEmulatedMouseEvents) {
+            o.ignoreEmulatedMouseEvents = !1;
+            return;
+          }
+          I(a, o.target) ? h(P(o.target, a), o.pointerType) : o.isOverTarget && h(P(o.target, a), o.pointerType, !1), o.isOverTarget = !1;
+        }
+      };
+      y.onTouchStart = (a) => {
+        if (!a.currentTarget.contains(a.target))
+          return;
+        a.stopPropagation();
+        let c = Ft(a.nativeEvent);
+        !c || (o.activePointerId = c.identifier, o.ignoreEmulatedMouseEvents = !0, o.isOverTarget = !0, o.isPressed = !0, o.target = a.currentTarget, o.pointerType = "touch", !u && !f && F(a.currentTarget), g || Te(o.target), B(a, o.pointerType), w(window, "scroll", v, !0));
+      }, y.onTouchMove = (a) => {
+        if (!a.currentTarget.contains(a.target) || (a.stopPropagation(), !o.isPressed))
+          return;
+        let c = xe(a.nativeEvent, o.activePointerId);
+        c && I(c, a.currentTarget) ? o.isOverTarget || (o.isOverTarget = !0, B(a, o.pointerType)) : o.isOverTarget && (o.isOverTarget = !1, h(a, o.pointerType, !1), k.current.shouldCancelOnPointerExit && T(a));
+      }, y.onTouchEnd = (a) => {
+        if (!a.currentTarget.contains(a.target) || (a.stopPropagation(), !o.isPressed))
+          return;
+        let c = xe(a.nativeEvent, o.activePointerId);
+        c && I(c, a.currentTarget) ? (V(a, o.pointerType), h(a, o.pointerType)) : o.isOverTarget && h(a, o.pointerType, !1), o.isPressed = !1, o.activePointerId = null, o.isOverTarget = !1, o.ignoreEmulatedMouseEvents = !0, g || X(o.target), $();
+      }, y.onTouchCancel = (a) => {
+        !a.currentTarget.contains(a.target) || (a.stopPropagation(), o.isPressed && T(a));
+      };
+      let v = (a) => {
+        o.isPressed && a.target.contains(o.target) && T({
+          currentTarget: o.target,
+          shiftKey: !1,
+          ctrlKey: !1,
+          metaKey: !1,
+          altKey: !1
+        });
+      };
+      y.onDragStart = (a) => {
+        !a.currentTarget.contains(a.target) || T(a);
+      };
+    }
+    return y;
+  }, [
+    w,
+    u,
+    f,
+    $,
+    g
+  ]);
+  return ie(() => () => {
+    g || X(L.current.target);
+  }, [
+    g
+  ]), {
+    isPressed: p || S,
+    pressProps: Q(x, N)
+  };
+}
+function se(e) {
+  return e.tagName === "A" && e.hasAttribute("href");
+}
+function Z(e, t) {
+  const { key: n, code: r } = e, s = t, l = s.getAttribute("role");
+  return (n === "Enter" || n === " " || n === "Spacebar" || r === "Space") && !(s instanceof HTMLInputElement && !Ve(s, n) || s instanceof HTMLTextAreaElement || s.isContentEditable) && (!se(s) || l === "button" && n !== "Enter") && !(l === "link" && n !== "Enter");
+}
+function Ft(e) {
+  const { targetTouches: t } = e;
+  return t.length > 0 ? t[0] : null;
+}
+function xe(e, t) {
+  const n = e.changedTouches;
+  for (let r = 0; r < n.length; r++) {
+    const s = n[r];
+    if (s.identifier === t)
+      return s;
+  }
+  return null;
+}
+function P(e, t) {
+  return {
+    currentTarget: e,
+    shiftKey: t.shiftKey,
+    ctrlKey: t.ctrlKey,
+    metaKey: t.metaKey,
+    altKey: t.altKey
+  };
+}
+function _t(e) {
+  let t = e.width / 2 || e.radiusX || 0, n = e.height / 2 || e.radiusY || 0;
+  return {
+    top: e.clientY - n,
+    right: e.clientX + t,
+    bottom: e.clientY + n,
+    left: e.clientX - t
+  };
+}
+function Rt(e, t) {
+  return !(e.left > t.right || t.left > e.right || e.top > t.bottom || t.top > e.bottom);
+}
+function I(e, t) {
+  let n = t.getBoundingClientRect(), r = _t(e);
+  return Rt(n, r);
+}
+function ee(e) {
+  return !(e instanceof HTMLElement) || !e.draggable;
+}
+function Se(e, t) {
+  return e instanceof HTMLInputElement ? !Ve(e, t) : e instanceof HTMLButtonElement ? e.type !== "submit" : !0;
+}
+const Ut = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset"
+]);
+function Ve(e, t) {
+  return e.type === "checkbox" || e.type === "radio" ? t === " " : Ut.has(e.type);
+}
+function Vt(e) {
+  return e.width === 0 && e.height === 0 || e.width === 1 && e.height === 1 && e.pressure === 0 && e.detail === 0 && e.pointerType === "mouse";
+}
+let Gt = /* @__PURE__ */ new Set(), Ne = !1, C = !1, ae = !1;
+function de(e, t) {
+  for (let n of Gt)
+    n(e, t);
+}
+function Ht(e) {
+  return !(e.metaKey || !_e() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+}
+function De(e) {
+  C = !0, Ht(e) && de("keyboard", e);
+}
+function M(e) {
+  (e.type === "mousedown" || e.type === "pointerdown") && (C = !0, de("pointer", e));
+}
+function Wt(e) {
+  oe(e) && (C = !0);
+}
+function jt(e) {
+  e.target === window || e.target === document || (!C && !ae && de("virtual", e), C = !1, ae = !1);
+}
+function zt() {
+  C = !1, ae = !0;
+}
+function Ce() {
+  if (typeof window > "u" || Ne)
+    return;
+  let e = HTMLElement.prototype.focus;
+  HTMLElement.prototype.focus = function() {
+    C = !0, e.apply(this, arguments);
+  }, document.addEventListener("keydown", De, !0), document.addEventListener("keyup", De, !0), document.addEventListener("click", Wt, !0), window.addEventListener("focus", jt, !0), window.addEventListener("blur", zt, !1), typeof PointerEvent < "u" ? (document.addEventListener("pointerdown", M, !0), document.addEventListener("pointermove", M, !0), document.addEventListener("pointerup", M, !0)) : (document.addEventListener("mousedown", M, !0), document.addEventListener("mousemove", M, !0), document.addEventListener("mouseup", M, !0)), Ne = !0;
+}
+typeof document < "u" && (document.readyState !== "loading" ? Ce() : document.addEventListener("DOMContentLoaded", Ce));
+function Yt(e, t) {
+  let {
+    elementType: n = "button",
+    isDisabled: r,
+    onPress: s,
+    onPressStart: l,
+    onPressEnd: u,
+    onPressChange: p,
+    preventFocusOnPress: f,
+    allowFocusWhenDisabled: b,
+    onClick: g,
+    href: O,
+    target: x,
+    rel: k,
+    type: S = "button"
+  } = e, E;
+  n === "button" ? E = {
+    type: S,
+    disabled: r
+  } : E = {
+    role: "button",
+    tabIndex: r ? void 0 : 0,
+    href: n === "a" && r ? void 0 : O,
+    target: n === "a" ? x : void 0,
+    type: n === "input" ? S : void 0,
+    disabled: n === "input" ? r : void 0,
+    "aria-disabled": !r || n === "input" ? void 0 : r,
+    rel: n === "a" ? k : void 0
+  };
+  let { pressProps: L, isPressed: w } = At({
+    onPressStart: l,
+    onPressEnd: u,
+    onPressChange: p,
+    onPress: s,
+    isDisabled: r,
+    preventFocusOnPress: f,
+    ref: t
+  }), { focusableProps: $ } = It(e, t);
+  b && ($.tabIndex = r ? -1 : $.tabIndex);
+  let N = me($, L, ot(e, {
+    labelable: !0
+  }));
+  return {
+    isPressed: w,
+    buttonProps: me(E, N, {
+      "aria-haspopup": e["aria-haspopup"],
+      "aria-expanded": e["aria-expanded"],
+      "aria-controls": e["aria-controls"],
+      "aria-pressed": e["aria-pressed"],
+      onClick: (o) => {
+        g && (g(o), console.warn("onClick is deprecated, please use onPress"));
+      }
+    })
+  };
+}
+function qt(e, t, n) {
+  return t in e ? Object.defineProperty(e, t, {
+    value: n,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[t] = n, e;
+}
+function Oe(e, t) {
+  var n = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var r = Object.getOwnPropertySymbols(e);
+    t && (r = r.filter(function(s) {
+      return Object.getOwnPropertyDescriptor(e, s).enumerable;
+    })), n.push.apply(n, r);
+  }
+  return n;
+}
+function Le(e) {
+  for (var t = 1; t < arguments.length; t++) {
+    var n = arguments[t] != null ? arguments[t] : {};
+    t % 2 ? Oe(Object(n), !0).forEach(function(r) {
+      qt(e, r, n[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Oe(Object(n)).forEach(function(r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
+    });
+  }
+  return e;
+}
+var Xt = (e, t, n) => {
+  for (var r of Object.keys(e)) {
+    var s;
+    if (e[r] !== ((s = t[r]) !== null && s !== void 0 ? s : n[r]))
+      return !1;
+  }
+  return !0;
+}, z = (e) => (t) => {
+  var n = e.defaultClassName, r = Le(Le({}, e.defaultVariants), t);
+  for (var s in r) {
+    var l, u = (l = r[s]) !== null && l !== void 0 ? l : e.defaultVariants[s];
+    if (u != null) {
+      var p = u;
+      typeof p == "boolean" && (p = p === !0 ? "true" : "false");
+      var f = e.variantClassNames[s][p];
+      f && (n += " " + f);
+    }
+  }
+  for (var [b, g] of e.compoundVariants)
+    Xt(b, r, e.defaultVariants) && (n += " " + g);
+  return n;
+}, Jt = z({ defaultClassName: "_125pcxy0", variantClassNames: { disabled: { true: "_125pcxy1", false: "_125pcxy2" }, kind: { default: "_125pcxy3", link: "_125pcxy4", confirm: "_125pcxy5", delete: "_125pcxy6", key: "_125pcxy7", icon: "_125pcxy8" }, spinning: { true: "_125pcxy9", false: "_125pcxya" } }, defaultVariants: { disabled: !1, kind: "default", spinning: !1 }, compoundVariants: [[{ kind: "icon", spinning: !0 }, "_125pcxyb"], [{ kind: "default", spinning: !0 }, "_125pcxyc"], [{ kind: "confirm", spinning: !0 }, "_125pcxyd"], [{ kind: "delete", spinning: !0 }, "_125pcxye"], [{ kind: "key", spinning: !0 }, "_125pcxyf"], [{ disabled: !0, spinning: !1 }, "_125pcxyg"]] }), Qt = z({ defaultClassName: "_125pcxyh", variantClassNames: { disabled: { true: "_125pcxyi", false: "_125pcxyj" }, kind: { icon: "_125pcxyk", default: "_125pcxyl", delete: "_125pcxym", key: "_125pcxyn", confirm: "_125pcxyo", link: "_125pcxyp" }, spinning: { true: "_125pcxyq", false: "_125pcxyr" } }, defaultVariants: { disabled: !1, kind: "default", spinning: !1 }, compoundVariants: [] }), Zt = z({ defaultClassName: "_125pcxyv", variantClassNames: { kind: { icon: "_125pcxyw", default: "_125pcxyx", key: "_125pcxyy", delete: "_125pcxyz", confirm: "_125pcxy10", link: "_125pcxy11" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), en = z({ defaultClassName: "_125pcxy12", variantClassNames: { spinning: { true: "_125pcxy13", false: "_125pcxy14" } }, defaultVariants: { spinning: !1 }, compoundVariants: [] }), tn = z({ defaultClassName: "_125pcxys", variantClassNames: { spinning: { true: "_125pcxyt", false: "_125pcxyu" } }, defaultVariants: { spinning: !1 }, compoundVariants: [] });
+const Ge = d.forwardRef(
+  ({
+    onClick: e,
+    onPress: t,
+    children: n,
+    className: r,
+    isDisabled: s,
+    disabled: l,
+    href: u,
+    icon: p,
+    kind: f = "default",
+    spinning: b,
+    spinningTitle: g,
+    ...O
+  }, x) => {
+    var B;
+    const k = {
+      onPress: t != null ? t : e,
+      isDisabled: (B = l != null ? l : s) != null ? B : b,
+      ...O
+    }, { "data-testid": S } = O, E = x != null ? x : d.useRef(null), { buttonProps: L } = Yt(k, E), { t: w } = d.useContext(Ye), $ = p && /* @__PURE__ */ d.createElement(qe, {
+      className: Zt({ kind: f }),
+      icon: p,
+      "aria-hidden": "true",
+      "data-testid": `${S}__${p}-icon`
+    });
+    let N;
+    f === "default" || f === "icon" || f === "link" ? N = "dark" : N = "light";
+    const o = b && /* @__PURE__ */ d.createElement(Xe, {
+      color: N,
+      className: en({ spinning: b }),
+      title: g || w("design-system:button.spinningTitle"),
+      "data-testid": `${S}__spinner`
+    });
+    return /* @__PURE__ */ d.createElement("div", {
+      className: Je(Jt({ disabled: s || l, kind: f, spinning: b }), r)
+    }, u ? /* @__PURE__ */ d.createElement("a", {
+      className: tn({ spinning: b }),
+      ...O,
+      href: u
+    }, $, n, o) : /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("button", {
+      className: Qt({ disabled: s || l, kind: f, spinning: b }),
+      disabled: s,
+      ...L,
+      ref: E
+    }, $, n, o)));
+  }
+);
+Qe.set(Ge, {
+  name: "Buttons",
+  props: {
+    disabled: "boolean",
+    href: "string",
+    icon: "IconName",
+    kind: {
+      type: '"default" | "link" | "icon" | "confirm" | "delete" | "key"',
+      default: '"default"'
+    },
+    spinning: "boolean",
+    spinningTitle: "string",
+    type: { type: '"button" | "submit"', default: '"button"' }
+  }
+});
+const nn = {
+  components: [Ge],
+  description: () => /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("div", {
+    className: "sps-body-14"
+  }, "Buttons are used to initiate events or actions. The labels and/or icons describe what the button will do."), /* @__PURE__ */ d.createElement("br", null), /* @__PURE__ */ d.createElement("h5", null, "Variants"), /* @__PURE__ */ d.createElement("div", {
+    className: "sps-body-14"
+  }, /* @__PURE__ */ d.createElement("span", {
+    className: "sps-text-semibold"
+  }, "Default: "), "For tertiary actions or actions of lower importance on a page."), /* @__PURE__ */ d.createElement("div", {
+    className: "sps-body-14"
+  }, /* @__PURE__ */ d.createElement("span", {
+    className: "sps-text-semibold"
+  }, "Key: "), "For primary or important actions on a page."), /* @__PURE__ */ d.createElement("div", {
+    className: "sps-body-14"
+  }, /* @__PURE__ */ d.createElement("span", {
+    className: "sps-text-semibold"
+  }, "Confirm: "), "For the main call to action on a page. There should only be one Confirm button per screen."), /* @__PURE__ */ d.createElement("div", {
+    className: "sps-body-14"
+  }, /* @__PURE__ */ d.createElement("span", {
+    className: "sps-text-semibold"
+  }, "Delete: "), "For deleting information or another destructive action. These should always be paired with a Delete Confirmation Modal."), /* @__PURE__ */ d.createElement("div", {
+    className: "sps-body-14"
+  }, /* @__PURE__ */ d.createElement("span", {
+    className: "sps-text-semibold"
+  }, "Disabled: "), "For actions that are not permitted in a particular state. These can be accompanied by a Tooltip on hover describing why it\u2019s disabled."), /* @__PURE__ */ d.createElement("div", {
+    className: "sps-body-14"
+  }, /* @__PURE__ */ d.createElement("span", {
+    className: "sps-text-semibold"
+  }, "With an Icon: "), "For further illustrating the action. Example: Pencil icon in an Edit button. There can also be Icon Buttons without text.")),
+  examples: {
+    basic: {
+      label: "Basic Buttons",
+      description: ({ NavigateTo: e }) => /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("p", null, "The most common type of button that can be used in most cases. Example: Basic Buttons in a ", /* @__PURE__ */ d.createElement(e, {
+        to: "modals"
+      }, "Modal"), ".")),
+      examples: {
+        withoutIcons: {
+          description: "Without Icons",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })}>Default</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Key</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="confirm">Confirm</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="delete">Delete</Button>
+                  <Button disabled>Disabled</Button>
+                </>
+              )
+            }
+          `
+        },
+        withIcons: {
+          description: "With Icons",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} icon="download-cloud">Default</Button>
+                  <Button className={sprinkles({ mr: "xs" })} icon="key" kind="key">Key</Button>
+                  <Button className={sprinkles({ mr: "xs" })} icon="download-cloud" kind="confirm">Confirm</Button>
+                  <Button className={sprinkles({ mr: "xs" })} icon="trash" kind="delete">Delete</Button>
+                  <Button icon="download-cloud" disabled>Disabled</Button>
+                </>
+              )
+            }
+          `
+        },
+        spinning: {
+          description: "Spinning",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} spinning>Default</Button>
+                  <Button className={sprinkles({ mr: "xs" })} spinning kind="key">Key</Button>
+                  <Button className={sprinkles({ mr: "xs" })} spinning kind="confirm">Confirm</Button>
+                  <Button spinning kind="delete">Delete</Button>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    dropdown: {
+      label: "Dropdown Buttons",
+      description: "Use these for actions that need to select an option to proceed. Example: Download button with optiosn related to the file format (PDF, PPT, etc.).",
+      examples: {
+        withoutIcons: {
+          description: "Without Icons",
+          react: m`
+            import { SpsDropdown } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      label="Default"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      kind={ButtonKind.KEY}
+                      label="Key"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      kind={ButtonKind.CONFIRM}
+                      label="Confirm"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      kind={ButtonKind.DELETE}
+                      label="Delete"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      disabled
+                      label="Disabled"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                </>
+              )
+            }
+          `
+        },
+        withIcons: {
+          description: "With Icons",
+          react: m`
+            import { SpsDropdown } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.DOWNLOAD_CLOUD}
+                      label="Default"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.DOWNLOAD_CLOUD}
+                      kind={ButtonKind.KEY}
+                      label="Key"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.DOWNLOAD_CLOUD}
+                      kind={ButtonKind.CONFIRM}
+                      label="Confirm"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.TRASH}
+                      kind={ButtonKind.DELETE}
+                      label="Delete"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.DOWNLOAD_CLOUD}
+                      disabled
+                      label="Disabled"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                </>
+              )
+            }
+          `
+        },
+        spinning: {
+          description: "Spinning",
+          react: m`
+            import { SpsDropdown } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsDropdown
+                    spinning
+                    className="mr-1 mb-1"
+                    label="Default"
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                    spinning
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.KEY}
+                    label="Key"
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                    spinning
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.CONFIRM}
+                    label="Confirm"
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                    spinning
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.DELETE}
+                    label="Delete"
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    splitButtons: {
+      label: "Split Buttons",
+      description: "Use when there is 1 primary action and other related actions can be taken.",
+      examples: {
+        withoutIcons: {
+          description: "Without Icons",
+          react: m`
+            import { SpsSplitButton } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsSplitButton className="mr-1 mb-1" label="Default" />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.KEY}
+                    label="Key"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.CONFIRM}
+                    label="Confirm"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.DELETE}
+                    label="Delete"
+                  />
+                  <SpsSplitButton className="mr-1 mb-1" disabled label="Disabled" />
+                </>
+              )
+            }
+          `
+        },
+        withIcons: {
+          description: "With Icons",
+          react: m`
+            import { SpsSplitButton } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    label="Default"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    kind={ButtonKind.KEY}
+                    label="Key"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    kind={ButtonKind.CONFIRM}
+                    label="Confirm"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    kind={ButtonKind.DELETE}
+                    label="Delete"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    disabled
+                    label="Disabled"
+                  />
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    iconButtons: {
+      label: "Icon Buttons",
+      description: ({ NavigateTo: e, Link: t }) => /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("p", null, "Use these for quick actions that can clearly be articulated by the use of an icon. Example: A Print button in the", " ", /* @__PURE__ */ d.createElement(e, {
+        to: "list-action-bar"
+      }, "List Action Bar"), ". Do not use an icon that doesn't have a universally understood meaning; instead use a Basic Button or a Basic Button with an icon. ", /* @__PURE__ */ d.createElement(t, {
+        to: "/style-and-layout/icons/"
+      }, "View All Icons"))),
+      examples: {
+        standard: {
+          description: "Standard Icon Buttons",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="printer" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="pencil" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="x" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="trash" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="gear" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="download-cloud" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="search" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="plus-sign" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="minus" />
+                </>
+              )
+            }
+          `
+        },
+        dropdown: {
+          description: ({ NavigateTo: e }) => /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("h5", null, "Dropdown Icon Buttons"), /* @__PURE__ */ d.createElement("p", null, "Use these when there are several options available for action. Example: Dropdown Icon Button in a ", /* @__PURE__ */ d.createElement(e, {
+            to: "content-rows"
+          }, "Content Row"), ".")),
+          react: m`
+            import { SpsDropdown } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsDropdown
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.ICON}
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                </>
+              )
+            }
+          `
+        },
+        spinner: {
+          description: "Spinner",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="icon" icon="download-cloud" spinning />
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    textButtons: {
+      label: "Text Buttons",
+      description: ({ NavigateTo: e }) => /* @__PURE__ */ d.createElement("p", null, "Use for less important actions, or ones that aren't taken as frequently. They should not appear inline with other copy. Example: Advanced Search button in the", " ", /* @__PURE__ */ d.createElement(e, {
+        to: "list-toolbar"
+      }, "List Toolbar")),
+      examples: {
+        withoutIcons: {
+          description: "Without Icons",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "sm" })} kind="link">Default</Button>
+                  <Button className={sprinkles({ mr: "sm", color: "red-medium" })} kind="link">Delete</Button>
+                  <Button className={sprinkles({ mr: "sm" })} kind="link" disabled>Disabled</Button>
+                </>
+              )
+            }
+          `
+        },
+        withIcons: {
+          description: "With Icons",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "sm" })} kind="link" icon="download-cloud">Default</Button>
+                  <Button className={sprinkles({ mr: "sm", color: "red-medium" })} kind="link" icon="trash">Delete</Button>
+                  <Button className={sprinkles({ mr: "sm" })} kind="link" icon="gear" disabled>Disabled</Button>
+                </>
+              )
+            }
+          `
+        },
+        spinner: {
+          description: "Spinner",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="link" spinning>Default</Button>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    submitButtons: {
+      label: "Submit Buttons",
+      description: ({ NavigateTo: e }) => /* @__PURE__ */ d.createElement("p", null, "Use to submit a form. There can be a number of visual variations, for example a", " ", /* @__PURE__ */ d.createElement(e, {
+        to: "modals"
+      }, "Modal"), " uses Basic Button (Key) as its Submit Button."),
+      examples: {
+        basic: {
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formMeta, formValue, updateForm } = useSpsForm({});
+
+              function alertOnSubmit() {
+                window.alert("Form submitted");
+              }
+
+              return (
+                <SpsForm formMeta={formMeta} onSubmit={alertOnSubmit}>
+                {/* Use only one Submit button in your form */}
+                  <Button className={sprinkles({ mr: "xs" })} type="submit" kind="key">Key</Button>
+                  <Button type="submit" kind="confirm">Confirm</Button>
+                </SpsForm>
+              )
+            }
+          `
+        }
+      }
+    },
+    link: {
+      label: "Button as a Link",
+      description: "Used to link to another page, such as an external website. They may open in the same window or in a new one. It should only be used when a Text Button doesn't provide enough visual emphasis.",
+      examples: {
+        basic: {
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="default" href="https://google.com">
+                    Button Text
+                  </Button>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    buttonGroups: {
+      label: "Button Groups",
+      description: ({ NavigateTo: e }) => /* @__PURE__ */ d.createElement("p", null, "Use button groups when there are a number of actions that can be taken in a view. When there are multiple button types in a group, they are separated using dividers. Example: Button groups in ", /* @__PURE__ */ d.createElement(e, {
+        to: "List Action Bar"
+      }, "List Action Bar"), "."),
+      examples: {
+        basic: {
+          description: "Basic Button Groups",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })}>Cancel</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Save</Button>
+                </>
+              )
+            }
+          `
+        },
+        icon: {
+          description: "Icon Button Groups",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="icon" icon="pencil" />
+                  <Button kind="icon" icon="trash" />
+                </>
+              )
+            }
+          `
+        },
+        textAndIcons: {
+          description: "Text Buttons + Icon Buttons Group",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+            import { VericalRule } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} kind="link">Text Button</Button>
+                  <VerticalRule />
+                  <Button kind="icon" icon="download-cloud" />
+                  <Button kind="icon" icon="printer" />
+                </>
+              )
+            }
+          `
+        },
+        textAndBasic: {
+          description: "Text Buttons + Basic Buttons Group",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+            import { VericalRule } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} kind="link">Text Button</Button>
+                  <VerticalRule />
+                  <Button className={sprinkles({ ml: "xs", mr: "xs" })} kind="default">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="confirm">Button</Button>
+                </>
+              )
+            }
+          `
+        },
+        iconsAndBasic: {
+          description: "Icon Buttons + Basic Buttons Group",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+            import { VericalRule } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="icon" icon="download-cloud" />
+                  <Button kind="icon" icon="printer" />
+                  <VerticalRule />
+                  <Button className={sprinkles({ ml: "xs", mr: "xs" })} kind="default">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="confirm">Button</Button>
+                </>
+              )
+            }
+          `
+        },
+        textIconsAndBasic: {
+          description: "Text Buttons + Icon Buttons + Basic Buttons Group",
+          react: m`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+            import { VericalRule } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} kind="link">Text Button</Button>
+                  <VerticalRule />
+                  <Button kind="icon" icon="download-cloud" />
+                  <Button kind="icon" icon="printer" />
+                  <VerticalRule />
+                  <Button className={sprinkles({ ml: "xs", mr: "xs" })} kind="default">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="confirm">Button</Button>
+                </>
+              )
+            }
+          `
+        }
+      }
+    }
+  }
+}, an = {
+  Buttons: nn
+};
+export {
+  Ge as Button,
+  an as MANIFEST
+};