@midas-ds/components 1.0.3 → 1.1.0

package/index80.js

@@ -1,723 +1,389 @@
-import { jsx as v, jsxs as C } from "react/jsx-runtime";
-import { a as ne, $ as de } from "./Button-B4vMZbC6.js";
-import { a as se, c as X, d as N, n as Y, e as Z, A as z, i as ee, b as ce, D as L } from "./useFocusRing-BKGhL91C.js";
-import { d as fe, a as ue } from "./Dialog-Cb6toyXO.js";
-import { a as pe } from "./Form-BQQs3jUk.js";
-import { $ as be } from "./RSPContexts-EOiWkKOf.js";
-import { $ as me, a as ge, b as V, c as $e, d as ye } from "./Collection-COLWgm24.js";
-import { $ as M, a as ve, b as xe, c as De } from "./DragAndDrop-B0T3WgjL.js";
-import { $ as _ } from "./ListBox-BKWkIIm6.js";
-import { $ as he } from "./Text-CQPW6xs7.js";
-import * as H from "react";
-import c, { useState as Se, useMemo as te, forwardRef as re, useContext as E, useRef as P, useEffect as F, createContext as Pe } from "react";
-import { $ as we } from "./useListState-DKnP5TB5.js";
-import { $ as ke, a as J } from "./ListKeyboardDelegate-BH-K5hyq.js";
-import { $ as Ie } from "./context-Bnqknrce.js";
-import { $ as Ee, b as Ke, c as Te, a as He, T as Ae } from "./Tag--W5TgxmK.js";
-import { $ as Be } from "./useGridSelectionCheckbox-CVEvUCJL.js";
-import { a as Re } from "./FocusScope-C8i7CH6y.js";
-import { $ as G } from "./VisuallyHidden-CFx06Bae.js";
-import { I as Ce } from "./TextField-DeK_yiK-.js";
-import { C as Me } from "./Checkbox-DnKWanep.js";
-import { C as Le } from "./chevron-down-Cd1bkzXT.js";
-import './MultiSelect.css';function Ve(n, a) {
-  let { key: l } = n;
-  const { checkboxProps: e } = Be(n, a);
+import { jsxs as B, jsx as F } from "react/jsx-runtime";
+import * as S from "react";
+import f, { useMemo as w, useRef as H, useEffect as O, forwardRef as M, useContext as p, createContext as T } from "react";
+import { $ as z, a as _, b as N, f as q, c as W, d as j } from "./Collection-KMFfVuzU.js";
+import { o as g, q as U, e as m, k as G, a as J, c as E, d as K, B as R, y as Q, i as C, b as X } from "./useFocusRing-9PXyKy2A.js";
+import { $ as Y } from "./Hidden-CVlUgUJM.js";
+import { $ as Z } from "./useSingleSelectListState-DPkaL0la.js";
+import { $ as k } from "./useLabels-9zaZ9oa0.js";
+import { $ as ee } from "./context-BpJLnOuu.js";
+import { d as te, e as ie } from "./SelectionManager-BfXUE1qg.js";
+import { $ as ae } from "./useHasTabbableChild-D6DwR81L.js";
+import './Tabs.css';const V = /* @__PURE__ */ new WeakMap();
+function P(t, e, i) {
+  return t ? (typeof e == "string" && (e = e.replace(/\s+/g, "")), `${V.get(t)}-${i}-${e}`) : "";
+}
+function ne(t, e, i) {
+  let { key: a, isDisabled: n, shouldSelectOnPressUp: l } = t, { selectionManager: s, selectedKey: r } = e, d = a === r, o = n || e.isDisabled || e.selectionManager.isDisabled(a), { itemProps: c, isPressed: u } = te({
+    selectionManager: s,
+    key: a,
+    ref: i,
+    isDisabled: o,
+    shouldSelectOnPressUp: l,
+    linkBehavior: "selection"
+  }), $ = P(e, a, "tab"), y = P(e, a, "tabpanel"), { tabIndex: D } = c, b = e.collection.getItem(a), L = g(b == null ? void 0 : b.props, {
+    labelable: !0
+  });
+  delete L.id;
+  let A = U(b == null ? void 0 : b.props);
   return {
-    checkboxProps: {
-      ...e,
-      "aria-labelledby": `${e.id} ${Ee(a, l)}`
-    }
+    tabProps: m(L, A, c, {
+      id: $,
+      "aria-selected": d,
+      "aria-disabled": o || void 0,
+      "aria-controls": d ? y : void 0,
+      tabIndex: o ? void 0 : D,
+      role: "tab"
+    }),
+    isSelected: d,
+    isDisabled: o,
+    isPressed: u
   };
 }
-function _e(n) {
-  let { initialItems: a = [], initialSelectedKeys: l, getKey: e = (f) => {
-    var d;
-    return (d = f.id) !== null && d !== void 0 ? d : f.key;
-  }, filter: o, initialFilterText: t = "" } = n, [r, i] = Se({
-    items: a,
-    selectedKeys: l === "all" ? "all" : new Set(l || []),
-    filterText: t
-  }), s = te(() => o ? r.items.filter((f) => o(f, r.filterText)) : r.items, [
-    r.items,
-    r.filterText,
-    o
-  ]);
+function se(t, e, i) {
+  let a = ae(i) ? void 0 : 0;
+  var n;
+  const l = P(e, (n = t.id) !== null && n !== void 0 ? n : e == null ? void 0 : e.selectedKey, "tabpanel"), s = k({
+    ...t,
+    id: l,
+    "aria-labelledby": P(e, e == null ? void 0 : e.selectedKey, "tab")
+  });
   return {
-    ...r,
-    items: s,
-    ...Fe({
-      getKey: e
-    }, i),
-    getItem(f) {
-      return r.items.find((d) => e(d) === f);
-    }
+    tabPanelProps: m(s, {
+      tabIndex: a,
+      role: "tabpanel",
+      "aria-describedby": t["aria-describedby"],
+      "aria-details": t["aria-details"]
+    })
   };
 }
-function Fe(n, a) {
-  let { cursor: l, getKey: e } = n;
+class de {
+  getKeyLeftOf(e) {
+    return this.flipDirection ? this.getNextKey(e) : this.getPreviousKey(e);
+  }
+  getKeyRightOf(e) {
+    return this.flipDirection ? this.getPreviousKey(e) : this.getNextKey(e);
+  }
+  isDisabled(e) {
+    var i, a;
+    return this.disabledKeys.has(e) || !!(!((a = this.collection.getItem(e)) === null || a === void 0 || (i = a.props) === null || i === void 0) && i.isDisabled);
+  }
+  getFirstKey() {
+    let e = this.collection.getFirstKey();
+    return e != null && this.isDisabled(e) && (e = this.getNextKey(e)), e;
+  }
+  getLastKey() {
+    let e = this.collection.getLastKey();
+    return e != null && this.isDisabled(e) && (e = this.getPreviousKey(e)), e;
+  }
+  getKeyAbove(e) {
+    return this.tabDirection ? null : this.getPreviousKey(e);
+  }
+  getKeyBelow(e) {
+    return this.tabDirection ? null : this.getNextKey(e);
+  }
+  getNextKey(e) {
+    do
+      e = this.collection.getKeyAfter(e), e == null && (e = this.collection.getFirstKey());
+    while (this.isDisabled(e));
+    return e;
+  }
+  getPreviousKey(e) {
+    do
+      e = this.collection.getKeyBefore(e), e == null && (e = this.collection.getLastKey());
+    while (this.isDisabled(e));
+    return e;
+  }
+  constructor(e, i, a, n = /* @__PURE__ */ new Set()) {
+    this.collection = e, this.flipDirection = i === "rtl" && a === "horizontal", this.disabledKeys = n, this.tabDirection = a === "horizontal";
+  }
+}
+function le(t, e, i) {
+  let { orientation: a = "horizontal", keyboardActivation: n = "automatic" } = t, { collection: l, selectionManager: s, disabledKeys: r } = e, { direction: d } = ee(), o = w(() => new de(l, d, a, r), [
+    l,
+    r,
+    a,
+    d
+  ]), { collectionProps: c } = ie({
+    ref: i,
+    selectionManager: s,
+    keyboardDelegate: o,
+    selectOnFocus: n === "automatic",
+    disallowEmptySelection: !0,
+    scrollRef: i,
+    linkBehavior: "selection"
+  }), u = G();
+  V.set(e, u);
+  let $ = k({
+    ...t,
+    id: u
+  });
   return {
-    setSelectedKeys(o) {
-      a((t) => ({
-        ...t,
-        selectedKeys: o
-      }));
-    },
-    setFilterText(o) {
-      a((t) => ({
-        ...t,
-        filterText: o
-      }));
-    },
-    insert(o, ...t) {
-      a((r) => A(r, o, ...t));
-    },
-    insertBefore(o, ...t) {
-      a((r) => {
-        let i = r.items.findIndex((s) => (e == null ? void 0 : e(s)) === o);
-        if (i === -1)
-          if (r.items.length === 0) i = 0;
-          else return r;
-        return A(r, i, ...t);
-      });
-    },
-    insertAfter(o, ...t) {
-      a((r) => {
-        let i = r.items.findIndex((s) => (e == null ? void 0 : e(s)) === o);
-        if (i === -1)
-          if (r.items.length === 0) i = 0;
-          else return r;
-        return A(r, i + 1, ...t);
-      });
-    },
-    prepend(...o) {
-      a((t) => A(t, 0, ...o));
-    },
-    append(...o) {
-      a((t) => A(t, t.items.length, ...o));
-    },
-    remove(...o) {
-      a((t) => {
-        let r = new Set(o), i = t.items.filter((f) => !r.has(e(f))), s = "all";
-        if (t.selectedKeys !== "all") {
-          s = new Set(t.selectedKeys);
-          for (let f of o) s.delete(f);
-        }
-        return l == null && i.length === 0 && (s = /* @__PURE__ */ new Set()), {
-          ...t,
-          items: i,
-          selectedKeys: s
-        };
-      });
-    },
-    removeSelectedItems() {
-      a((o) => {
-        if (o.selectedKeys === "all") return {
-          ...o,
-          items: [],
-          selectedKeys: /* @__PURE__ */ new Set()
-        };
-        let t = o.selectedKeys, r = o.items.filter((i) => !t.has(e(i)));
-        return {
-          ...o,
-          items: r,
-          selectedKeys: /* @__PURE__ */ new Set()
-        };
-      });
-    },
-    move(o, t) {
-      a((r) => {
-        let i = r.items.findIndex((d) => e(d) === o);
-        if (i === -1) return r;
-        let s = r.items.slice(), [f] = s.splice(i, 1);
-        return s.splice(t, 0, f), {
-          ...r,
-          items: s
-        };
-      });
-    },
-    moveBefore(o, t) {
-      a((r) => {
-        let i = r.items.findIndex((d) => e(d) === o);
-        if (i === -1) return r;
-        let f = (Array.isArray(t) ? t : [
-          ...t
-        ]).map((d) => r.items.findIndex((m) => e(m) === d)).sort((d, m) => d - m);
-        return Q(r, f, i);
-      });
-    },
-    moveAfter(o, t) {
-      a((r) => {
-        let i = r.items.findIndex((d) => e(d) === o);
-        if (i === -1) return r;
-        let f = (Array.isArray(t) ? t : [
-          ...t
-        ]).map((d) => r.items.findIndex((m) => e(m) === d)).sort((d, m) => d - m);
-        return Q(r, f, i + 1);
-      });
-    },
-    update(o, t) {
-      a((r) => {
-        let i = r.items.findIndex((s) => e(s) === o);
-        return i === -1 ? r : {
-          ...r,
-          items: [
-            ...r.items.slice(0, i),
-            t,
-            ...r.items.slice(i + 1)
-          ]
-        };
-      });
+    tabListProps: {
+      ...m(c, $),
+      role: "tablist",
+      "aria-orientation": a,
+      tabIndex: void 0
     }
   };
 }
-function A(n, a, ...l) {
-  return {
-    ...n,
-    items: [
-      ...n.items.slice(0, a),
-      ...l,
-      ...n.items.slice(a)
-    ]
+function re(t) {
+  var e, i;
+  let a = Z({
+    ...t,
+    suppressTextValueWarning: !0,
+    defaultSelectedKey: (i = (e = t.defaultSelectedKey) !== null && e !== void 0 ? e : I(t.collection, t.disabledKeys ? new Set(t.disabledKeys) : /* @__PURE__ */ new Set())) !== null && i !== void 0 ? i : void 0
+  }), { selectionManager: n, collection: l, selectedKey: s } = a, r = H(s);
+  return O(() => {
+    let d = s;
+    (n.isEmpty || d == null || !l.getItem(d)) && (d = I(l, a.disabledKeys), d != null && n.setSelectedKeys([
+      d
+    ])), (d != null && n.focusedKey == null || !n.isFocused && d !== r.current) && n.setFocusedKey(d), r.current = d;
+  }), {
+    ...a,
+    isDisabled: t.isDisabled || !1
   };
 }
-function Q(n, a, l) {
-  l -= a.filter((t) => t < l).length;
-  let e = a.map((t) => ({
-    from: t,
-    to: l++
-  }));
-  for (let t = 0; t < e.length; t++) {
-    let r = e[t].from;
-    for (let i = t; i < e.length; i++)
-      e[i].from > r && e[i].from--;
-  }
-  for (let t = 0; t < e.length; t++) {
-    let r = e[t];
-    for (let i = e.length - 1; i > t; i--) {
-      let s = e[i];
-      s.from < r.to ? r.to++ : s.from++;
-    }
-  }
-  let o = n.items.slice();
-  for (let t of e) {
-    let [r] = o.splice(t.from, 1);
-    o.splice(t.to, 0, r);
+function I(t, e) {
+  let i = null;
+  if (t) {
+    var a, n, l, s;
+    for (i = t.getFirstKey(); i != null && (e.has(i) || !((n = t.getItem(i)) === null || n === void 0 || (a = n.props) === null || a === void 0) && a.isDisabled) && i !== t.getLastKey(); ) i = t.getKeyAfter(i);
+    i != null && (e.has(i) || !((s = t.getItem(i)) === null || s === void 0 || (l = s.props) === null || l === void 0) && l.isDisabled) && i === t.getLastKey() && (i = t.getFirstKey());
   }
-  return {
-    ...n,
-    items: o
-  };
+  return i;
 }
-const Ne = /* @__PURE__ */ Pe(null), ze = /* @__PURE__ */ re(function(a, l) {
-  return [a, l] = se(a, l, Ne), /* @__PURE__ */ c.createElement(me, {
-    content: /* @__PURE__ */ c.createElement(ge, a)
-  }, (e) => /* @__PURE__ */ c.createElement(Ge, {
-    props: a,
-    collection: e,
-    gridListRef: l
+const v = /* @__PURE__ */ T(null), h = /* @__PURE__ */ T(null), oe = /* @__PURE__ */ M(function(e, i) {
+  [e, i] = J(e, i, v);
+  let { children: a, orientation: n = "horizontal" } = e;
+  return a = w(() => typeof a == "function" ? a({
+    orientation: n,
+    defaultChildren: null
+  }) : a, [
+    a,
+    n
+  ]), /* @__PURE__ */ f.createElement(z, {
+    content: a
+  }, (l) => /* @__PURE__ */ f.createElement(ce, {
+    props: e,
+    collection: l,
+    tabsRef: i
   }));
 });
-function Ge({ props: n, collection: a, gridListRef: l }) {
-  let { dragAndDropHooks: e, keyboardNavigationBehavior: o = "arrow", layout: t = "stack" } = n, { CollectionRoot: r, isVirtualized: i, layoutDelegate: s, dropTargetDelegate: f } = E(V), d = we({
-    ...n,
-    collection: a,
-    children: void 0,
-    layoutDelegate: s
-  }), m = ke({
-    usage: "search",
-    sensitivity: "base"
-  }), { disabledBehavior: b, disabledKeys: $ } = d.selectionManager, { direction: u } = Ie(), p = te(() => new J({
-    collection: a,
-    collator: m,
-    ref: l,
-    disabledKeys: $,
-    disabledBehavior: b,
-    layoutDelegate: s,
-    layout: t,
-    direction: u
+function ce({ props: t, tabsRef: e, collection: i }) {
+  let { orientation: a = "horizontal" } = t, n = re({
+    ...t,
+    collection: i,
+    children: void 0
+  }), { focusProps: l, isFocused: s, isFocusVisible: r } = E({
+    within: !0
+  }), d = w(() => ({
+    orientation: a,
+    isFocusWithin: s,
+    isFocusVisible: r
   }), [
     a,
-    l,
-    t,
-    $,
-    b,
     s,
-    m,
-    u
-  ]), { gridProps: R } = Ke({
-    ...n,
-    keyboardDelegate: p,
-    // Only tab navigation is supported in grid layout.
-    keyboardNavigationBehavior: t === "grid" ? "tab" : o,
-    isVirtualized: i
-  }, d, l), D = d.selectionManager, w = !!(e != null && e.useDraggableCollectionState), h = !!(e != null && e.useDroppableCollectionState), y = P(w), g = P(h);
-  F(() => {
-    y.current !== w && console.warn("Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior."), g.current !== h && console.warn("Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.");
-  }, [
-    w,
-    h
-  ]);
-  let k, x, S, I = !1, K = null, W = P(null);
-  if (w && e) {
-    k = e.useDraggableCollectionState({
-      collection: a,
-      selectionManager: D,
-      preview: e.renderDragPreview ? W : void 0
-    }), e.useDraggableCollection({}, k, l);
-    let T = e.DragPreview;
-    K = e.renderDragPreview ? /* @__PURE__ */ c.createElement(T, {
-      ref: W
-    }, e.renderDragPreview) : null;
-  }
-  if (h && e) {
-    x = e.useDroppableCollectionState({
-      collection: a,
-      selectionManager: D
-    });
-    let T = new J({
-      collection: a,
-      disabledKeys: D.disabledKeys,
-      disabledBehavior: D.disabledBehavior,
-      ref: l
-    }), le = e.dropTargetDelegate || f || new e.ListDropTargetDelegate(a, l, {
-      layout: t,
-      direction: u
-    });
-    S = e.useDroppableCollection({
-      keyboardDelegate: T,
-      dropTargetDelegate: le
-    }, x, l), I = x.isDropTarget({
-      type: "root"
-    });
-  }
-  let { focusProps: oe, isFocused: j, isFocusVisible: O } = X(), U = {
-    isDropTarget: I,
-    isEmpty: d.collection.size === 0,
-    isFocused: j,
-    isFocusVisible: O,
-    layout: t,
-    state: d
-  }, ae = N({
-    className: n.className,
-    style: n.style,
-    defaultClassName: "react-aria-GridList",
-    values: U
-  }), q = null, ie = null;
-  if (d.collection.size === 0 && n.renderEmptyState) {
-    let T = n.renderEmptyState(U);
-    q = /* @__PURE__ */ c.createElement("div", {
-      role: "row",
-      style: {
-        display: "contents"
-      }
-    }, /* @__PURE__ */ c.createElement("div", {
-      role: "gridcell",
-      style: {
-        display: "contents"
-      }
-    }, T));
-  }
-  return /* @__PURE__ */ c.createElement(Re, null, /* @__PURE__ */ c.createElement("div", {
-    ...Y(n),
-    ...ae,
-    ...Z(R, oe, S == null ? void 0 : S.collectionProps, ie),
-    ref: l,
-    slot: n.slot || void 0,
-    onScroll: n.onScroll,
-    "data-drop-target": I || void 0,
-    "data-empty": d.collection.size === 0 || void 0,
-    "data-focused": j || void 0,
-    "data-focus-visible": O || void 0,
-    "data-layout": t
-  }, /* @__PURE__ */ c.createElement(z, {
+    r
+  ]), o = K({
+    ...t,
+    defaultClassName: "react-aria-Tabs",
+    values: d
+  });
+  return /* @__PURE__ */ f.createElement("div", {
+    ...g(t),
+    ...l,
+    ...o,
+    ref: e,
+    slot: t.slot || void 0,
+    "data-focused": s || void 0,
+    "data-orientation": a,
+    "data-focus-visible": r || void 0,
+    "data-disabled": n.isDisabled || void 0
+  }, /* @__PURE__ */ f.createElement(R, {
     values: [
       [
-        _,
-        d
-      ],
-      [
-        M,
-        {
-          dragAndDropHooks: e,
-          dragState: k,
-          dropState: x
-        }
+        v,
+        t
       ],
       [
-        ve,
-        {
-          render: je
-        }
+        h,
+        n
       ]
     ]
-  }, h && /* @__PURE__ */ c.createElement(qe, null), /* @__PURE__ */ c.createElement(r, {
-    collection: a,
-    scrollRef: l,
-    persistedKeys: xe(D, e, x),
-    renderDropIndicator: De(e, x)
-  })), q, K));
+  }, o.children));
 }
-const We = /* @__PURE__ */ $e("item", function(a, l, e) {
-  let o = E(_), { dragAndDropHooks: t, dragState: r, dropState: i } = E(M), s = ee(l), { isVirtualized: f } = E(V), { rowProps: d, gridCellProps: m, descriptionProps: b, ...$ } = Te({
-    node: e,
-    shouldSelectOnPressUp: !!r,
-    isVirtualized: f
-  }, o, s), { hoverProps: u, isHovered: p } = ce({
-    isDisabled: !$.allowsSelection && !$.hasAction,
-    onHoverStart: e.props.onHoverStart,
-    onHoverChange: e.props.onHoverChange,
-    onHoverEnd: e.props.onHoverEnd
-  }), { isFocusVisible: R, focusProps: D } = X(), { checkboxProps: w } = Ve({
-    key: e.key
-  }, o), h = o.selectionManager.disabledBehavior === "all" && $.isDisabled ? {
-    isDisabled: !0
-  } : {}, y = null;
-  r && t && (y = t.useDraggableItem({
-    key: e.key,
-    hasDragButton: !0
-  }, r));
-  let g = null, k = P(null), { visuallyHiddenProps: x } = G();
-  i && t && (g = t.useDropIndicator({
-    target: {
-      type: "item",
-      key: e.key,
-      dropPosition: "on"
+const fe = /* @__PURE__ */ M(function(e, i) {
+  return p(h) ? /* @__PURE__ */ f.createElement(ue, {
+    props: e,
+    forwardedRef: i
+  }) : /* @__PURE__ */ f.createElement(_, e);
+});
+function ue({ props: t, forwardedRef: e }) {
+  let i = p(h), { CollectionRoot: a } = p(N), { orientation: n = "horizontal", keyboardActivation: l = "automatic" } = Q(v), s = C(e), { tabListProps: r } = le({
+    ...t,
+    orientation: n,
+    keyboardActivation: l
+  }, i, s), d = K({
+    ...t,
+    children: null,
+    defaultClassName: "react-aria-TabList",
+    values: {
+      orientation: n,
+      state: i
     }
-  }, i, k));
-  let S = r && r.isDragging(e.key), I = N({
-    ...a,
+  }), o = g(t);
+  return delete o.id, /* @__PURE__ */ f.createElement("div", {
+    ...o,
+    ...r,
+    ref: s,
+    ...d,
+    "data-orientation": n || void 0
+  }, /* @__PURE__ */ f.createElement(a, {
+    collection: i.collection,
+    persistedKeys: q(i.selectionManager.focusedKey)
+  }));
+}
+const be = /* @__PURE__ */ W("item", (t, e, i) => {
+  let a = p(h), n = C(e), { tabProps: l, isSelected: s, isDisabled: r, isPressed: d } = ne({
+    key: i.key,
+    ...t
+  }, a, n), { focusProps: o, isFocused: c, isFocusVisible: u } = E(), { hoverProps: $, isHovered: y } = X({
+    isDisabled: r,
+    onHoverStart: t.onHoverStart,
+    onHoverEnd: t.onHoverEnd,
+    onHoverChange: t.onHoverChange
+  }), D = K({
+    ...t,
     id: void 0,
-    children: e.rendered,
-    defaultClassName: "react-aria-GridListItem",
+    defaultClassName: "react-aria-Tab",
     values: {
-      ...$,
-      isHovered: p,
-      isFocusVisible: R,
-      selectionMode: o.selectionManager.selectionMode,
-      selectionBehavior: o.selectionManager.selectionBehavior,
-      allowsDragging: !!r,
-      isDragging: S,
-      isDropTarget: g == null ? void 0 : g.isDropTarget
+      isSelected: s,
+      isDisabled: r,
+      isFocused: c,
+      isFocusVisible: u,
+      isPressed: d,
+      isHovered: y
     }
-  }), K = P(null);
-  return F(() => {
-    r && !K.current && console.warn('Draggable items in a GridList must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
-  }, []), F(() => {
-    e.textValue || console.warn("A `textValue` prop is required for <GridListItem> elements with non-plain text children in order to support accessibility features such as type to select.");
-  }, [
-    e.textValue
-  ]), /* @__PURE__ */ c.createElement(c.Fragment, null, g && !g.isHidden && /* @__PURE__ */ c.createElement("div", {
-    role: "row",
-    style: {
-      position: "absolute"
-    }
-  }, /* @__PURE__ */ c.createElement("div", {
-    role: "gridcell"
-  }, /* @__PURE__ */ c.createElement("div", {
-    role: "button",
-    ...x,
-    ...g == null ? void 0 : g.dropIndicatorProps,
-    ref: k
-  }))), /* @__PURE__ */ c.createElement("div", {
-    ...Z(Y(a), d, D, u, y == null ? void 0 : y.dragProps),
-    ...I,
-    ref: s,
-    "data-selected": $.isSelected || void 0,
-    "data-disabled": $.isDisabled || void 0,
-    "data-hovered": p || void 0,
-    "data-focused": $.isFocused || void 0,
-    "data-focus-visible": R || void 0,
-    "data-pressed": $.isPressed || void 0,
-    "data-allows-dragging": !!r || void 0,
-    "data-dragging": S || void 0,
-    "data-drop-target": (g == null ? void 0 : g.isDropTarget) || void 0,
-    "data-selection-mode": o.selectionManager.selectionMode === "none" ? void 0 : o.selectionManager.selectionMode
-  }, /* @__PURE__ */ c.createElement("div", {
-    ...m,
-    style: {
-      display: "contents"
+  }), b = i.props.href ? "a" : "div";
+  return /* @__PURE__ */ f.createElement(b, {
+    ...m(l, o, $, D),
+    ref: n,
+    "data-selected": s || void 0,
+    "data-disabled": r || void 0,
+    "data-focused": c || void 0,
+    "data-focus-visible": u || void 0,
+    "data-pressed": d || void 0,
+    "data-hovered": y || void 0
+  });
+}), $e = /* @__PURE__ */ Y(function(e, i) {
+  const a = p(h);
+  let n = C(i), { tabPanelProps: l } = se(e, a, n), { focusProps: s, isFocused: r, isFocusVisible: d } = E(), o = a.selectedKey === e.id, c = K({
+    ...e,
+    defaultClassName: "react-aria-TabPanel",
+    values: {
+      isFocused: r,
+      isFocusVisible: d,
+      isInert: !o,
+      state: a
     }
-  }, /* @__PURE__ */ c.createElement(z, {
+  });
+  if (!o && !e.shouldForceMount) return null;
+  let u = g(e);
+  delete u.id;
+  let $ = o ? m(u, l, s, c) : c;
+  return /* @__PURE__ */ f.createElement("div", {
+    ...$,
+    ref: n,
+    "data-focused": r || void 0,
+    "data-focus-visible": d || void 0,
+    // @ts-ignore
+    inert: o ? void 0 : "true",
+    "data-inert": o ? void 0 : "true"
+  }, /* @__PURE__ */ f.createElement(R, {
     values: [
       [
-        be,
-        {
-          slots: {
-            [L]: {},
-            selection: w
-          }
-        }
-      ],
-      [
-        ne,
-        {
-          slots: {
-            [L]: h,
-            drag: {
-              ...y == null ? void 0 : y.dragButtonProps,
-              ref: K,
-              style: {
-                pointerEvents: "none"
-              }
-            }
-          }
-        }
-      ],
-      [
-        he,
-        {
-          slots: {
-            [L]: {},
-            description: b
-          }
-        }
-      ],
-      [
-        V,
-        ye
+        v,
+        null
       ],
       [
-        _,
+        h,
         null
       ]
     ]
-  }, I.children))));
-});
-function je(n, a) {
-  a = ee(a);
-  let { dragAndDropHooks: l, dropState: e } = E(M), o = P(null), { dropIndicatorProps: t, isHidden: r, isDropTarget: i } = l.useDropIndicator(n, e, o);
-  return r ? null : /* @__PURE__ */ c.createElement(Ue, {
-    ...n,
-    dropIndicatorProps: t,
-    isDropTarget: i,
-    buttonRef: o,
-    ref: a
-  });
-}
-function Oe(n, a) {
-  let { dropIndicatorProps: l, isDropTarget: e, buttonRef: o, ...t } = n, { visuallyHiddenProps: r } = G(), i = N({
-    ...t,
-    defaultClassName: "react-aria-DropIndicator",
-    values: {
-      isDropTarget: e
-    }
-  });
-  return /* @__PURE__ */ c.createElement("div", {
-    ...i,
-    role: "row",
-    ref: a,
-    "data-drop-target": e || void 0
-  }, /* @__PURE__ */ c.createElement("div", {
-    role: "gridcell"
-  }, /* @__PURE__ */ c.createElement("div", {
-    ...r,
-    role: "button",
-    ...l,
-    ref: o
-  }), i.children));
-}
-const Ue = /* @__PURE__ */ re(Oe);
-function qe() {
-  let { dragAndDropHooks: n, dropState: a } = E(M), l = P(null), { dropIndicatorProps: e } = n.useDropIndicator({
-    target: {
-      type: "root"
-    }
-  }, a, l), o = a.isDropTarget({
-    type: "root"
-  }), { visuallyHiddenProps: t } = G();
-  return !o && e["aria-hidden"] ? null : /* @__PURE__ */ c.createElement("div", {
-    role: "row",
-    "aria-hidden": e["aria-hidden"],
-    style: {
-      position: "absolute"
-    }
-  }, /* @__PURE__ */ c.createElement("div", {
-    role: "gridcell"
-  }, /* @__PURE__ */ c.createElement("div", {
-    role: "button",
-    ...t,
-    ...e,
-    ref: l
-  })));
-}
-const Je = '"../theme/tokens.css"', Qe = '"Inter", sans-serif', Xe = "#000000", Ye = "#b31b1b", Ze = "(max-width: 767px)", et = "#bfbfbf", tt = "#e6e6e6", rt = "#f2f2f2", ot = "_button_1eb3v_4", at = "_icon_1eb3v_19", it = "_multiSelect_1eb3v_44", lt = "_popover_1eb3v_60", nt = "_listBoxItem_1eb3v_73", B = {
-  tokens: Je,
-  display: Qe,
-  black: Xe,
-  signalRed130: Ye,
-  smBreakpoint: Ze,
-  gray50: et,
-  gray20: tt,
-  backgroundSecondary: rt,
-  button: ot,
-  icon: at,
-  multiSelect: it,
-  popover: lt,
-  listBoxItem: nt
-}, Kt = ({
-  label: n,
-  description: a,
-  items: l,
-  onSelectionChange: e,
-  selectedKeys: o,
-  defaultSelectedKeys: t,
-  isDisabled: r,
-  isInvalid: i,
-  errorMessage: s
+  }, /* @__PURE__ */ f.createElement(N.Provider, {
+    value: j
+  }, c.children)));
+}), he = '"../theme/tokens.css"', pe = '"Inter", sans-serif', me = "#bfbfbf", ye = "600", xe = "#25607f", Pe = "0 0 0 2px #ffffff, 0 0 0 4px #000000", ge = "(max-width: 767px)", Ke = "_container_a0kqi_4", ve = "_list_a0kqi_8", De = "_listItem_a0kqi_14", Fe = "_panel_a0kqi_42", x = {
+  tokens: he,
+  display: pe,
+  gray50: me,
+  semiBoldWeight: ye,
+  blue130: xe,
+  focus: Pe,
+  smBreakpoint: ge,
+  container: Ke,
+  list: ve,
+  listItem: De,
+  panel: Fe
+}, ke = ({
+  tabs: t,
+  label: e,
+  defaultSelected: i,
+  children: a
 }) => {
-  const f = H.useRef(null), [d, m] = H.useState(
-    void 0
-  ), b = _e({
-    initialItems: l,
-    initialSelectedKeys: t
-  });
-  H.useEffect(() => {
-    const u = () => {
-      f.current && m(f.current.offsetWidth - 2);
-    };
-    return u(), window.addEventListener("resize", u), () => {
-      window.removeEventListener("resize", u);
-    };
-  }, []), H.useEffect(() => {
-    e && e(new Set(b.selectedKeys));
-  }, [b.selectedKeys, e]), H.useEffect(() => {
-    o && b.setSelectedKeys(new Set(o));
-  }, [o]);
-  const $ = b.selectedKeys === "all" ? new Set(
-    b.items.map((u) => u.id)
-  ) : b.selectedKeys;
-  return /* @__PURE__ */ v(
-    "div",
+  const n = S.Children.toArray(a);
+  if (n.length !== t.length)
+    throw new Error(
+      `The number of children must match the number of tabs. Children: ${n.length} Tabs: ${t.length}`
+    );
+  const l = n.reduce(
+    (s, r, d) => {
+      var o;
+      if (S.isValidElement(r)) {
+        const c = (o = t[d]) == null ? void 0 : o.toLowerCase();
+        c && (s[c] = S.cloneElement(r, { id: c }));
+      }
+      return s;
+    },
+    {}
+  );
+  return /* @__PURE__ */ B(
+    oe,
     {
-      className: B.multiSelect,
-      "data-disabled": r,
-      "data-invalid": i,
-      children: /* @__PURE__ */ C(
-        z,
-        {
-          values: [
-            [
-              // we should maybe add more here
-              // [LabelContext, {...labelProps, ref: labelRef}],
-              // [InputContext, {...inputProps, ref: inputOrTextAreaRef}],
-              // [TextAreaContext, {...inputProps, ref: inputOrTextAreaRef}],
-              // [TextContext, {
-              //   slots: {
-              //     description: descriptionProps,
-              //     errorMessage: errorMessageProps
-              //   }
-              // }],
-              pe,
-              {
-                isInvalid: i || !1,
-                validationErrors: [],
-                validationDetails: {
-                  customError: i || !1,
-                  badInput: !1,
-                  patternMismatch: !1,
-                  rangeOverflow: !1,
-                  rangeUnderflow: !1,
-                  stepMismatch: !1,
-                  tooLong: !1,
-                  tooShort: !1,
-                  typeMismatch: !1,
-                  valid: !1,
-                  valueMissing: !1
-                }
-              }
-            ]
-          ],
-          children: [
-            /* @__PURE__ */ v(
-              Ce,
+      orientation: "vertical",
+      defaultSelectedKey: i && i.toLowerCase(),
+      className: x.container,
+      children: [
+        /* @__PURE__ */ F(
+          fe,
+          {
+            "aria-label": e,
+            className: x.list,
+            children: t.map((s) => /* @__PURE__ */ F(
+              be,
               {
-                label: n,
-                description: a,
-                errorMessage: s,
-                children: /* @__PURE__ */ C(fe, { children: [
-                  /* @__PURE__ */ C(
-                    de,
-                    {
-                      className: B.button,
-                      ref: f,
-                      isDisabled: r,
-                      children: [
-                        "Välj",
-                        /* @__PURE__ */ v(
-                          "div",
-                          {
-                            className: B.icon,
-                            "aria-hidden": "true",
-                            children: /* @__PURE__ */ v(Le, { size: 20 })
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ v(
-                    ue,
-                    {
-                      className: B.popover,
-                      style: { width: d },
-                      offset: 0,
-                      UNSTABLE_portalContainer: f.current || void 0,
-                      children: /* @__PURE__ */ v(
-                        ze,
-                        {
-                          "aria-label": n,
-                          selectionMode: "multiple",
-                          selectedKeys: b.selectedKeys,
-                          onSelectionChange: b.setSelectedKeys,
-                          children: b.items.map((u) => /* @__PURE__ */ C(
-                            We,
-                            {
-                              id: u.id,
-                              textValue: u.name,
-                              className: B.listBoxItem,
-                              children: [
-                                /* @__PURE__ */ v(Me, { slot: "selection" }),
-                                u.name
-                              ]
-                            },
-                            u.id
-                          ))
-                        }
-                      )
-                    }
-                  )
-                ] })
-              }
-            ),
-            /* @__PURE__ */ v(
-              He,
-              {
-                "aria-label": "Valda",
-                onRemove: (u) => {
-                  b.setSelectedKeys(new Set(Array.from(b.selectedKeys).filter((p) => !u.has(p))));
-                },
-                children: Array.from($).map((u) => {
-                  const p = b.getItem(u);
-                  return /* @__PURE__ */ v(
-                    Ae,
-                    {
-                      id: p == null ? void 0 : p.id,
-                      textValue: p == null ? void 0 : p.name,
-                      isDisabled: r,
-                      dismissable: !0,
-                      children: p == null ? void 0 : p.name
-                    },
-                    p == null ? void 0 : p.id
-                  );
-                })
-              }
-            )
-          ]
-        }
-      )
+                id: s.toLowerCase(),
+                className: x.listItem,
+                children: s
+              },
+              s
+            ))
+          }
+        ),
+        t.map((s) => /* @__PURE__ */ F(
+          $e,
+          {
+            id: s.toLowerCase(),
+            className: x.panel,
+            children: l[s.toLowerCase()]
+          },
+          s
+        ))
+      ]
     }
   );
 };
 export {
-  Kt as MultiSelect
+  ke as Tabs
 };