@reykjavik/hanna-react 0.10.53

package/lib/Skeleton.mjs

@@ -0,0 +1,39 @@
+import React from "react";
+import range from "@hugsmidjan/qj/range";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+const makeRenderSkeleton = (props) => (key) => /* @__PURE__ */ React.createElement("span", {
+  key,
+  className: getBemClass("Skeleton", [
+    props.text && "text",
+    props.height && "height--" + props.height,
+    props.gap && "gap--" + props.gap
+  ])
+});
+const minmax = (num = 0, max = 100, min = 1) => {
+  num = Math.min(Math.max(Math.round(num), min), max);
+  return num > min ? num : void 0;
+};
+const Skeleton = (props) => {
+  const height = minmax(props.height, 40);
+  const renderSkeleton = makeRenderSkeleton({
+    height,
+    text: props.text,
+    gap: minmax(props.gap, 5, 0)
+  });
+  const items = minmax(props.items, 20) || 1;
+  if (items > 1) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, range(1, items).map(renderSkeleton));
+  }
+  return renderSkeleton();
+};
+var Skeleton_default = Skeleton;
+Skeleton.block = (height) => /* @__PURE__ */ React.createElement(Skeleton, {
+  height
+});
+Skeleton.text = (height) => /* @__PURE__ */ React.createElement(Skeleton, {
+  text: true,
+  height
+});
+export {
+  Skeleton_default as default
+};

package/lib/SubHeading.cjs

@@ -0,0 +1,43 @@
+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 SubHeading_exports = {};
+__export(SubHeading_exports, {
+  default: () => SubHeading_default
+});
+module.exports = __toCommonJS(SubHeading_exports);
+var import_react = __toESM(require("react"));
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_seenEffect = require("./utils/seenEffect");
+const SubHeading = (props) => {
+  const { small, Tag = "h2", children, align, wide, startSeen } = props;
+  const [ref] = (0, import_seenEffect.useSeenEffect)(startSeen);
+  return /* @__PURE__ */ import_react.default.createElement(Tag, {
+    className: (0, import_getBemClass.default)("SubHeading", [
+      small && "small",
+      align === "right" && "align--" + align,
+      !align && wide && "wide"
+    ]),
+    ref
+  }, children);
+};
+var SubHeading_default = SubHeading;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/SubHeading.mjs

@@ -0,0 +1,19 @@
+import React from "react";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+import { useSeenEffect } from "./utils/seenEffect";
+const SubHeading = (props) => {
+  const { small, Tag = "h2", children, align, wide, startSeen } = props;
+  const [ref] = useSeenEffect(startSeen);
+  return /* @__PURE__ */ React.createElement(Tag, {
+    className: getBemClass("SubHeading", [
+      small && "small",
+      align === "right" && "align--" + align,
+      !align && wide && "wide"
+    ]),
+    ref
+  }, children);
+};
+var SubHeading_default = SubHeading;
+export {
+  SubHeading_default as default
+};

package/lib/Tabs.cjs

@@ -0,0 +1,166 @@
+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 Tabs_exports = {};
+__export(Tabs_exports, {
+  default: () => Tabs_default
+});
+module.exports = __toCommonJS(Tabs_exports);
+var import_react = __toESM(require("react"));
+var import_frag = require("@hugsmidjan/qj/frag");
+var import_hooks = require("@hugsmidjan/react/hooks");
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_seenEffect = require("./utils/seenEffect");
+const navKeyEffects = {
+  ArrowUp: -1,
+  ArrowLeft: -1,
+  ArrowDown: 1,
+  ArrowRight: 1
+};
+const renderTab = (tabProps, index, listProps) => {
+  const { label, badge, href, type, longLabel } = tabProps;
+  const {
+    activeIdx,
+    activateTab,
+    focusedIdx,
+    setFocusedIdx,
+    tabRole,
+    listAriaControls,
+    isBrowser
+  } = listProps;
+  const handleClick = isBrowser && ((e) => {
+    e.preventDefault();
+    activateTab(index);
+    e.currentTarget.focus();
+  });
+  const handleFocus = isBrowser && (() => setFocusedIdx(index));
+  const isActive = activeIdx === index || void 0;
+  const Tag = href && !tabRole ? "a" : "button";
+  const tagProps = Tag === "button" ? {
+    role: tabRole,
+    type: type || "button",
+    tabIndex: tabRole ? focusedIdx === index ? 0 : -1 : void 0,
+    "aria-controls": tabProps["aria-controls"] || tabRole && (0, import_frag.getFrag)(href) || listAriaControls
+  } : { href };
+  return [
+    /* @__PURE__ */ import_react.default.createElement(Tag, __spreadProps(__spreadValues({
+      key: index,
+      className: "Tabs__tab",
+      "data-active": isActive
+    }, tagProps), {
+      onClick: handleClick,
+      onFocus: handleFocus,
+      "aria-label": longLabel,
+      title: longLabel
+    }), label, " ", badge != null && /* @__PURE__ */ import_react.default.createElement("small", {
+      className: "Tabs__tab__badge"
+    }, "(", badge, ")")),
+    " "
+  ];
+};
+const Tabs = (props) => {
+  const {
+    tabs,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-controls": listAriaControls,
+    id,
+    activeIdx,
+    onSetActive,
+    activateOnFocus,
+    ssr,
+    startSeen,
+    vertical,
+    subTabs
+  } = props;
+  const isBrowser = (0, import_hooks.useIsBrowserSide)(ssr);
+  const [focusedIdx, setFocusedIdx] = (0, import_react.useState)(activeIdx || 0);
+  const tabRole = isBrowser && role === "tablist" ? "tab" : void 0;
+  const activateTab = (index) => {
+    const tab = tabs[index];
+    if (index === activeIdx || !tab) {
+      return;
+    }
+    const ret = tab.onActivated && tab.onActivated.call(null);
+    if (onSetActive && ret !== false) {
+      onSetActive(index, tab);
+    }
+  };
+  const handleKeydown = tabRole && ((e) => {
+    var _a;
+    const delta = navKeyEffects[e.key];
+    if (delta) {
+      e.stopPropagation();
+      let nextIdx = (focusedIdx || 0) + delta;
+      const maxIdx = tabs.length - 1;
+      nextIdx = nextIdx < 0 ? maxIdx : nextIdx > maxIdx ? 0 : nextIdx;
+      (_a = e.currentTarget.querySelectorAll(".Tabs__tab")[nextIdx]) == null ? void 0 : _a.focus();
+      activateOnFocus && activateTab(nextIdx);
+    }
+  });
+  const [ref] = (0, import_seenEffect.useSeenEffect)(startSeen);
+  const listProps = {
+    activeIdx,
+    activateTab,
+    focusedIdx,
+    setFocusedIdx,
+    tabRole,
+    listAriaControls,
+    isBrowser
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    className: (0, import_getBemClass.default)("Tabs", vertical && "vertical"),
+    role: tabRole && role,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    onKeyDown: handleKeydown,
+    "data-sprinkled": isBrowser,
+    ref
+  }, tabs.map((tabProps, index) => renderTab(tabProps, index, listProps)), subTabs && /* @__PURE__ */ import_react.default.createElement(Tabs, __spreadProps(__spreadValues({}, subTabs), {
+    role: "role" in subTabs ? subTabs.role : role,
+    activateOnFocus: subTabs.activateOnFocus ?? activateOnFocus,
+    ssr: subTabs.ssr ?? ssr,
+    startSeen: true,
+    vertical: void 0,
+    subTabs: void 0
+  })));
+};
+var Tabs_default = Tabs;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Tabs.mjs

@@ -0,0 +1,144 @@
+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, { useState } from "react";
+import { getFrag } from "@hugsmidjan/qj/frag";
+import { useIsBrowserSide } from "@hugsmidjan/react/hooks";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+import { useSeenEffect } from "./utils/seenEffect";
+const navKeyEffects = {
+  ArrowUp: -1,
+  ArrowLeft: -1,
+  ArrowDown: 1,
+  ArrowRight: 1
+};
+const renderTab = (tabProps, index, listProps) => {
+  const { label, badge, href, type, longLabel } = tabProps;
+  const {
+    activeIdx,
+    activateTab,
+    focusedIdx,
+    setFocusedIdx,
+    tabRole,
+    listAriaControls,
+    isBrowser
+  } = listProps;
+  const handleClick = isBrowser && ((e) => {
+    e.preventDefault();
+    activateTab(index);
+    e.currentTarget.focus();
+  });
+  const handleFocus = isBrowser && (() => setFocusedIdx(index));
+  const isActive = activeIdx === index || void 0;
+  const Tag = href && !tabRole ? "a" : "button";
+  const tagProps = Tag === "button" ? {
+    role: tabRole,
+    type: type || "button",
+    tabIndex: tabRole ? focusedIdx === index ? 0 : -1 : void 0,
+    "aria-controls": tabProps["aria-controls"] || tabRole && getFrag(href) || listAriaControls
+  } : { href };
+  return [
+    /* @__PURE__ */ React.createElement(Tag, __spreadProps(__spreadValues({
+      key: index,
+      className: "Tabs__tab",
+      "data-active": isActive
+    }, tagProps), {
+      onClick: handleClick,
+      onFocus: handleFocus,
+      "aria-label": longLabel,
+      title: longLabel
+    }), label, " ", badge != null && /* @__PURE__ */ React.createElement("small", {
+      className: "Tabs__tab__badge"
+    }, "(", badge, ")")),
+    " "
+  ];
+};
+const Tabs = (props) => {
+  const {
+    tabs,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-controls": listAriaControls,
+    id,
+    activeIdx,
+    onSetActive,
+    activateOnFocus,
+    ssr,
+    startSeen,
+    vertical,
+    subTabs
+  } = props;
+  const isBrowser = useIsBrowserSide(ssr);
+  const [focusedIdx, setFocusedIdx] = useState(activeIdx || 0);
+  const tabRole = isBrowser && role === "tablist" ? "tab" : void 0;
+  const activateTab = (index) => {
+    const tab = tabs[index];
+    if (index === activeIdx || !tab) {
+      return;
+    }
+    const ret = tab.onActivated && tab.onActivated.call(null);
+    if (onSetActive && ret !== false) {
+      onSetActive(index, tab);
+    }
+  };
+  const handleKeydown = tabRole && ((e) => {
+    var _a;
+    const delta = navKeyEffects[e.key];
+    if (delta) {
+      e.stopPropagation();
+      let nextIdx = (focusedIdx || 0) + delta;
+      const maxIdx = tabs.length - 1;
+      nextIdx = nextIdx < 0 ? maxIdx : nextIdx > maxIdx ? 0 : nextIdx;
+      (_a = e.currentTarget.querySelectorAll(".Tabs__tab")[nextIdx]) == null ? void 0 : _a.focus();
+      activateOnFocus && activateTab(nextIdx);
+    }
+  });
+  const [ref] = useSeenEffect(startSeen);
+  const listProps = {
+    activeIdx,
+    activateTab,
+    focusedIdx,
+    setFocusedIdx,
+    tabRole,
+    listAriaControls,
+    isBrowser
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: getBemClass("Tabs", vertical && "vertical"),
+    role: tabRole && role,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    onKeyDown: handleKeydown,
+    "data-sprinkled": isBrowser,
+    ref
+  }, tabs.map((tabProps, index) => renderTab(tabProps, index, listProps)), subTabs && /* @__PURE__ */ React.createElement(Tabs, __spreadProps(__spreadValues({}, subTabs), {
+    role: "role" in subTabs ? subTabs.role : role,
+    activateOnFocus: subTabs.activateOnFocus ?? activateOnFocus,
+    ssr: subTabs.ssr ?? ssr,
+    startSeen: true,
+    vertical: void 0,
+    subTabs: void 0
+  })));
+};
+var Tabs_default = Tabs;
+export {
+  Tabs_default as default
+};

package/lib/TagPill.cjs

@@ -0,0 +1,113 @@
+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 TagPill_exports = {};
+__export(TagPill_exports, {
+  default: () => TagPill_default
+});
+module.exports = __toCommonJS(TagPill_exports);
+var import_react = __toESM(require("react"));
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_Button = __toESM(require("./_abstract/Button"));
+const colors = {
+  normal: "",
+  green: "color--green",
+  yellow: "color--yellow",
+  orange: "color--orange",
+  red: "color--red"
+};
+const TagPill = (props) => {
+  const _a = props, {
+    modifier,
+    large,
+    removable,
+    onRemove,
+    children,
+    color = "normal",
+    label = children,
+    removeLabel = "x",
+    removeLabelLong = removeLabel
+  } = _a, buttonProps = __objRest(_a, [
+    "modifier",
+    "large",
+    "removable",
+    "onRemove",
+    "children",
+    "color",
+    "label",
+    "removeLabel",
+    "removeLabelLong"
+  ]);
+  const isStatic = !("href" in props || "type" in props || props.onClick);
+  process.env.NODE_ENV !== "production" && removable && isStatic && !onRemove && console.warn("static (non-button) `TagPill`s must not be removable");
+  const modifiers = [modifier, large && "large", colors[color]];
+  const removeBtn = removable && /* @__PURE__ */ import_react.default.createElement("button", {
+    className: "TagPill__remove",
+    onClick: onRemove && (() => onRemove()),
+    "aria-label": removeLabelLong,
+    type: "button"
+  }, removeLabel);
+  return isStatic ? /* @__PURE__ */ import_react.default.createElement("span", {
+    className: (0, import_getBemClass.default)("TagPill", modifiers)
+  }, label, " ", removeBtn) : onRemove ? /* @__PURE__ */ import_react.default.createElement("span", {
+    className: (0, import_getBemClass.default)("TagPill", modifiers)
+  }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, __spreadValues({
+    bem: "TagPill__button"
+  }, buttonProps), label), " ", removeBtn) : /* @__PURE__ */ import_react.default.createElement(import_Button.default, __spreadProps(__spreadValues({
+    bem: "TagPill"
+  }, buttonProps), {
+    modifier: modifiers
+  }), label, " ", removable && /* @__PURE__ */ import_react.default.createElement("span", {
+    className: "TagPill__remove",
+    "aria-label": removeLabelLong
+  }, removeLabel));
+};
+var TagPill_default = TagPill;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/TagPill.mjs

@@ -0,0 +1,91 @@
+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 from "react";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+import Button from "./_abstract/Button";
+const colors = {
+  normal: "",
+  green: "color--green",
+  yellow: "color--yellow",
+  orange: "color--orange",
+  red: "color--red"
+};
+const TagPill = (props) => {
+  const _a = props, {
+    modifier,
+    large,
+    removable,
+    onRemove,
+    children,
+    color = "normal",
+    label = children,
+    removeLabel = "x",
+    removeLabelLong = removeLabel
+  } = _a, buttonProps = __objRest(_a, [
+    "modifier",
+    "large",
+    "removable",
+    "onRemove",
+    "children",
+    "color",
+    "label",
+    "removeLabel",
+    "removeLabelLong"
+  ]);
+  const isStatic = !("href" in props || "type" in props || props.onClick);
+  process.env.NODE_ENV !== "production" && removable && isStatic && !onRemove && console.warn("static (non-button) `TagPill`s must not be removable");
+  const modifiers = [modifier, large && "large", colors[color]];
+  const removeBtn = removable && /* @__PURE__ */ React.createElement("button", {
+    className: "TagPill__remove",
+    onClick: onRemove && (() => onRemove()),
+    "aria-label": removeLabelLong,
+    type: "button"
+  }, removeLabel);
+  return isStatic ? /* @__PURE__ */ React.createElement("span", {
+    className: getBemClass("TagPill", modifiers)
+  }, label, " ", removeBtn) : onRemove ? /* @__PURE__ */ React.createElement("span", {
+    className: getBemClass("TagPill", modifiers)
+  }, /* @__PURE__ */ React.createElement(Button, __spreadValues({
+    bem: "TagPill__button"
+  }, buttonProps), label), " ", removeBtn) : /* @__PURE__ */ React.createElement(Button, __spreadProps(__spreadValues({
+    bem: "TagPill"
+  }, buttonProps), {
+    modifier: modifiers
+  }), label, " ", removable && /* @__PURE__ */ React.createElement("span", {
+    className: "TagPill__remove",
+    "aria-label": removeLabelLong
+  }, removeLabel));
+};
+var TagPill_default = TagPill;
+export {
+  TagPill_default as default
+};

package/lib/TextBlock.cjs

@@ -0,0 +1,45 @@
+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 TextBlock_exports = {};
+__export(TextBlock_exports, {
+  default: () => TextBlock_default
+});
+module.exports = __toCommonJS(TextBlock_exports);
+var import_react = __toESM(require("react"));
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_seenEffect = require("./utils/seenEffect");
+const TextBlock = (props) => {
+  const { children, align, labelled, wide, small, startSeen } = props;
+  const rightAligned = align === "right" || labelled;
+  const [ref] = (0, import_seenEffect.useSeenEffect)(startSeen);
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    className: (0, import_getBemClass.default)("TextBlock", [
+      labelled && "labelled",
+      rightAligned && "align--right",
+      wide && !rightAligned && "wide",
+      small && !labelled && "small"
+    ]),
+    ref
+  }, children);
+};
+var TextBlock_default = TextBlock;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/TextBlock.mjs

@@ -0,0 +1,21 @@
+import React from "react";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+import { useSeenEffect } from "./utils/seenEffect";
+const TextBlock = (props) => {
+  const { children, align, labelled, wide, small, startSeen } = props;
+  const rightAligned = align === "right" || labelled;
+  const [ref] = useSeenEffect(startSeen);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: getBemClass("TextBlock", [
+      labelled && "labelled",
+      rightAligned && "align--right",
+      wide && !rightAligned && "wide",
+      small && !labelled && "small"
+    ]),
+    ref
+  }, children);
+};
+var TextBlock_default = TextBlock;
+export {
+  TextBlock_default as default
+};