@reykjavik/hanna-react 0.10.53

package/lib/TextButton.cjs

@@ -0,0 +1,55 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextButton_exports = {};
+__export(TextButton_exports, {
+  default: () => TextButton_default
+});
+module.exports = __toCommonJS(TextButton_exports);
+var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("./_abstract/Button"));
+const TextButton = (props) => {
+  if ("disabled" in props) {
+    props = __spreadProps(__spreadValues({}, props), { disabled: void 0 });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_Button.default, __spreadValues({
+    bem: "TextButton"
+  }, props));
+};
+var TextButton_default = TextButton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/TextButton.mjs

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React from "react";
+import Button from "./_abstract/Button";
+const TextButton = (props) => {
+  if ("disabled" in props) {
+    props = __spreadProps(__spreadValues({}, props), { disabled: void 0 });
+  }
+  return /* @__PURE__ */ React.createElement(Button, __spreadValues({
+    bem: "TextButton"
+  }, props));
+};
+var TextButton_default = TextButton;
+export {
+  TextButton_default as default
+};

package/lib/TextInput.cjs

@@ -0,0 +1,136 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextInput_exports = {};
+__export(TextInput_exports, {
+  default: () => TextInput_default
+});
+module.exports = __toCommonJS(TextInput_exports);
+var import_react = __toESM(require("react"));
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_FormField = __toESM(require("./FormField"));
+const TextInput = (props) => {
+  const _a = props, {
+    className,
+    label,
+    assistText,
+    hideLabel,
+    disabled,
+    readOnly,
+    invalid,
+    errorMessage,
+    required,
+    reqText,
+    id,
+    onChange,
+    small,
+    type,
+    ssr,
+    inputRef
+  } = _a, inputElementProps = __objRest(_a, [
+    "className",
+    "label",
+    "assistText",
+    "hideLabel",
+    "disabled",
+    "readOnly",
+    "invalid",
+    "errorMessage",
+    "required",
+    "reqText",
+    "id",
+    "onChange",
+    "small",
+    "type",
+    "ssr",
+    "inputRef"
+  ]);
+  const { value, defaultValue, placeholder } = inputElementProps;
+  const [hasValue, setHasValue] = (0, import_react.useState)(void 0);
+  const filled = !!(value ?? hasValue ?? !!defaultValue);
+  const empty = !filled && !placeholder;
+  const multiline = type === "textarea";
+  const modifiers = [multiline && "multiline"];
+  const _onChange = value != null ? onChange : (e) => {
+    setHasValue(!!e.target.value);
+    onChange && onChange(e);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_FormField.default, {
+    className: (0, import_getBemClass.default)("TextInput", modifiers, className),
+    ssr,
+    small,
+    label,
+    empty,
+    filled,
+    assistText,
+    hideLabel,
+    disabled,
+    readOnly,
+    invalid,
+    errorMessage,
+    required,
+    reqText,
+    id,
+    renderInput: (className2, inputProps, addFocusProps) => multiline ? /* @__PURE__ */ import_react.default.createElement("textarea", __spreadProps(__spreadValues(__spreadValues({
+      className: className2.input,
+      onChange: _onChange
+    }, inputProps), addFocusProps(inputElementProps)), {
+      ref: inputRef
+    })) : /* @__PURE__ */ import_react.default.createElement("input", __spreadProps(__spreadValues(__spreadValues({
+      className: className2.input,
+      onChange: _onChange,
+      type
+    }, inputProps), addFocusProps(inputElementProps)), {
+      ref: inputRef
+    }))
+  });
+};
+var TextInput_default = TextInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/TextInput.mjs

@@ -0,0 +1,114 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useState } from "react";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+import FormField from "./FormField";
+const TextInput = (props) => {
+  const _a = props, {
+    className,
+    label,
+    assistText,
+    hideLabel,
+    disabled,
+    readOnly,
+    invalid,
+    errorMessage,
+    required,
+    reqText,
+    id,
+    onChange,
+    small,
+    type,
+    ssr,
+    inputRef
+  } = _a, inputElementProps = __objRest(_a, [
+    "className",
+    "label",
+    "assistText",
+    "hideLabel",
+    "disabled",
+    "readOnly",
+    "invalid",
+    "errorMessage",
+    "required",
+    "reqText",
+    "id",
+    "onChange",
+    "small",
+    "type",
+    "ssr",
+    "inputRef"
+  ]);
+  const { value, defaultValue, placeholder } = inputElementProps;
+  const [hasValue, setHasValue] = useState(void 0);
+  const filled = !!(value ?? hasValue ?? !!defaultValue);
+  const empty = !filled && !placeholder;
+  const multiline = type === "textarea";
+  const modifiers = [multiline && "multiline"];
+  const _onChange = value != null ? onChange : (e) => {
+    setHasValue(!!e.target.value);
+    onChange && onChange(e);
+  };
+  return /* @__PURE__ */ React.createElement(FormField, {
+    className: getBemClass("TextInput", modifiers, className),
+    ssr,
+    small,
+    label,
+    empty,
+    filled,
+    assistText,
+    hideLabel,
+    disabled,
+    readOnly,
+    invalid,
+    errorMessage,
+    required,
+    reqText,
+    id,
+    renderInput: (className2, inputProps, addFocusProps) => multiline ? /* @__PURE__ */ React.createElement("textarea", __spreadProps(__spreadValues(__spreadValues({
+      className: className2.input,
+      onChange: _onChange
+    }, inputProps), addFocusProps(inputElementProps)), {
+      ref: inputRef
+    })) : /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues(__spreadValues({
+      className: className2.input,
+      onChange: _onChange,
+      type
+    }, inputProps), addFocusProps(inputElementProps)), {
+      ref: inputRef
+    }))
+  });
+};
+var TextInput_default = TextInput;
+export {
+  TextInput_default as default
+};

package/lib/VSpacer.cjs

@@ -0,0 +1,70 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var VSpacer_exports = {};
+__export(VSpacer_exports, {
+  default: () => VSpacer_default
+});
+module.exports = __toCommonJS(VSpacer_exports);
+var import_react = __toESM(require("react"));
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+const sizes = {
+  none: "none",
+  small: "small",
+  default: "",
+  medium: "",
+  large: "large",
+  xlarge: "xlarge"
+};
+const hasChildren = (children) => children && !(Array.isArray(children) && !children.length) || void 0;
+const normalizeProp = (value, exclude) => value && value !== exclude ? sizes[value] : void 0;
+const VSpacer = (props) => {
+  const { size, top, bottom, children } = props;
+  const isWrapper = hasChildren(children);
+  let topVal = normalizeProp(isWrapper && top);
+  let bottomVal = normalizeProp(isWrapper && bottom);
+  let sizeVal = !(topVal && bottomVal) && normalizeProp(size, "none");
+  if (!sizeVal && topVal === bottomVal && topVal !== "none") {
+    sizeVal = topVal;
+    topVal = bottomVal = void 0;
+  } else if (sizeVal) {
+    if (sizeVal === topVal) {
+      sizeVal = topVal;
+      topVal = void 0;
+    }
+    if (sizeVal === bottomVal) {
+      sizeVal = bottomVal;
+      bottomVal = void 0;
+    }
+  }
+  const className = (0, import_getBemClass.default)("VSpacer", [
+    sizeVal,
+    topVal && "top--" + topVal,
+    bottomVal && "bottom--" + bottomVal
+  ]);
+  return isWrapper ? /* @__PURE__ */ import_react.default.createElement("div", {
+    className
+  }, children) : /* @__PURE__ */ import_react.default.createElement("hr", {
+    className
+  });
+};
+var VSpacer_default = VSpacer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/VSpacer.mjs

@@ -0,0 +1,46 @@
+import React from "react";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+const sizes = {
+  none: "none",
+  small: "small",
+  default: "",
+  medium: "",
+  large: "large",
+  xlarge: "xlarge"
+};
+const hasChildren = (children) => children && !(Array.isArray(children) && !children.length) || void 0;
+const normalizeProp = (value, exclude) => value && value !== exclude ? sizes[value] : void 0;
+const VSpacer = (props) => {
+  const { size, top, bottom, children } = props;
+  const isWrapper = hasChildren(children);
+  let topVal = normalizeProp(isWrapper && top);
+  let bottomVal = normalizeProp(isWrapper && bottom);
+  let sizeVal = !(topVal && bottomVal) && normalizeProp(size, "none");
+  if (!sizeVal && topVal === bottomVal && topVal !== "none") {
+    sizeVal = topVal;
+    topVal = bottomVal = void 0;
+  } else if (sizeVal) {
+    if (sizeVal === topVal) {
+      sizeVal = topVal;
+      topVal = void 0;
+    }
+    if (sizeVal === bottomVal) {
+      sizeVal = bottomVal;
+      bottomVal = void 0;
+    }
+  }
+  const className = getBemClass("VSpacer", [
+    sizeVal,
+    topVal && "top--" + topVal,
+    bottomVal && "bottom--" + bottomVal
+  ]);
+  return isWrapper ? /* @__PURE__ */ React.createElement("div", {
+    className
+  }, children) : /* @__PURE__ */ React.createElement("hr", {
+    className
+  });
+};
+var VSpacer_default = VSpacer;
+export {
+  VSpacer_default as default
+};

package/lib/VerticalTabsTOC.cjs

@@ -0,0 +1,123 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var VerticalTabsTOC_exports = {};
+__export(VerticalTabsTOC_exports, {
+  default: () => VerticalTabsTOC_default
+});
+module.exports = __toCommonJS(VerticalTabsTOC_exports);
+var import_react = __toESM(require("react"));
+var import_frag = require("@hugsmidjan/qj/frag");
+var import_hooks = require("@hugsmidjan/react/hooks");
+var import_Tabs = __toESM(require("./Tabs"));
+const getId = (url) => url && decodeURIComponent(url.split("#")[1] || "") || "";
+const getItemId = (item) => getId(item && item.href);
+const mapToItemsById = (items, domid) => {
+  const updatedItems = items.map((item) => {
+    return __spreadProps(__spreadValues({}, item), {
+      "aria-controls": item["aria-controls"] || domid
+    });
+  });
+  const itemsById = {};
+  updatedItems.forEach((topItem, activeIdx) => {
+    const subItems = topItem.items;
+    if (!subItems) {
+      const itemId = getItemId(topItem);
+      itemsById[itemId] = { activeIdx };
+      return;
+    }
+    subItems.forEach((subItem, idx) => {
+      itemsById[getItemId(subItem)] = {
+        activeIdx,
+        subTabs: {
+          activeIdx: idx,
+          "aria-label": topItem.longLabel || topItem.label,
+          id: topItem["aria-controls"],
+          tabs: subItems,
+          onSetActive: (_, item) => {
+            const newId = getItemId(item);
+            (0, import_frag.setFrag)(newId);
+          }
+        }
+      };
+      if (idx === 0) {
+        topItem.href = topItem.href || "#" + getItemId(subItem);
+      }
+    });
+  });
+  return { itemsById, updatedItems };
+};
+const VerticalTabsTOC = (props) => {
+  const { onItemSelect, items } = props;
+  const _domid = (0, import_hooks.useDomid)();
+  const domid = props.id || _domid;
+  const { itemsById, updatedItems } = (0, import_react.useMemo)(() => mapToItemsById(items, domid), [items, domid]);
+  const [state, setState] = (0, import_react.useState)(() => {
+    const initialId = typeof location !== "undefined" ? getId(location.hash) : "";
+    return itemsById[initialId] || itemsById[getItemId(updatedItems[0])] || {};
+  });
+  (0, import_react.useEffect)(() => {
+    const handleHash = () => {
+      const newId = getId(location.href);
+      const newState = itemsById[newId];
+      if (newState) {
+        setState(newState);
+        onItemSelect(newId);
+      }
+    };
+    window.addEventListener("hashchange", handleHash);
+    return () => window.removeEventListener("hashchange", handleHash);
+  }, [itemsById, onItemSelect]);
+  return /* @__PURE__ */ import_react.default.createElement(import_Tabs.default, {
+    id: domid,
+    vertical: true,
+    "aria-label": props["aria-label"],
+    onSetActive: (_, item) => {
+      var _a;
+      const itemId = getItemId(item);
+      const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) == null ? void 0 : _a.tabs[0]);
+      (0, import_frag.setFrag)(newId);
+    },
+    tabs: updatedItems,
+    role: "tablist",
+    activeIdx: state.activeIdx,
+    subTabs: state.subTabs
+  });
+};
+var VerticalTabsTOC_default = VerticalTabsTOC;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/VerticalTabsTOC.mjs

@@ -0,0 +1,101 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useEffect, useMemo, useState } from "react";
+import { setFrag } from "@hugsmidjan/qj/frag";
+import { useDomid } from "@hugsmidjan/react/hooks";
+import Tabs from "./Tabs";
+const getId = (url) => url && decodeURIComponent(url.split("#")[1] || "") || "";
+const getItemId = (item) => getId(item && item.href);
+const mapToItemsById = (items, domid) => {
+  const updatedItems = items.map((item) => {
+    return __spreadProps(__spreadValues({}, item), {
+      "aria-controls": item["aria-controls"] || domid
+    });
+  });
+  const itemsById = {};
+  updatedItems.forEach((topItem, activeIdx) => {
+    const subItems = topItem.items;
+    if (!subItems) {
+      const itemId = getItemId(topItem);
+      itemsById[itemId] = { activeIdx };
+      return;
+    }
+    subItems.forEach((subItem, idx) => {
+      itemsById[getItemId(subItem)] = {
+        activeIdx,
+        subTabs: {
+          activeIdx: idx,
+          "aria-label": topItem.longLabel || topItem.label,
+          id: topItem["aria-controls"],
+          tabs: subItems,
+          onSetActive: (_, item) => {
+            const newId = getItemId(item);
+            setFrag(newId);
+          }
+        }
+      };
+      if (idx === 0) {
+        topItem.href = topItem.href || "#" + getItemId(subItem);
+      }
+    });
+  });
+  return { itemsById, updatedItems };
+};
+const VerticalTabsTOC = (props) => {
+  const { onItemSelect, items } = props;
+  const _domid = useDomid();
+  const domid = props.id || _domid;
+  const { itemsById, updatedItems } = useMemo(() => mapToItemsById(items, domid), [items, domid]);
+  const [state, setState] = useState(() => {
+    const initialId = typeof location !== "undefined" ? getId(location.hash) : "";
+    return itemsById[initialId] || itemsById[getItemId(updatedItems[0])] || {};
+  });
+  useEffect(() => {
+    const handleHash = () => {
+      const newId = getId(location.href);
+      const newState = itemsById[newId];
+      if (newState) {
+        setState(newState);
+        onItemSelect(newId);
+      }
+    };
+    window.addEventListener("hashchange", handleHash);
+    return () => window.removeEventListener("hashchange", handleHash);
+  }, [itemsById, onItemSelect]);
+  return /* @__PURE__ */ React.createElement(Tabs, {
+    id: domid,
+    vertical: true,
+    "aria-label": props["aria-label"],
+    onSetActive: (_, item) => {
+      var _a;
+      const itemId = getItemId(item);
+      const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) == null ? void 0 : _a.tabs[0]);
+      setFrag(newId);
+    },
+    tabs: updatedItems,
+    role: "tablist",
+    activeIdx: state.activeIdx,
+    subTabs: state.subTabs
+  });
+};
+var VerticalTabsTOC_default = VerticalTabsTOC;
+export {
+  VerticalTabsTOC_default as default
+};