@vector-im/compound-web 8.4.0 → 9.0.1

package/dist/components/Nav/Nav.module.cjs

@@ -0,0 +1,11 @@
+//#region src/components/Nav/Nav.module.css
+var Nav_module_default = {
+	"nav-bar": "_nav-bar_1e9qm_8",
+	"nav-bar-items": "_nav-bar-items_1e9qm_14",
+	"nav-tab": "_nav-tab_1e9qm_25",
+	"nav-item": "_nav-item_1e9qm_47"
+};
+//#endregion
+exports.default = Nav_module_default;
+
+//# sourceMappingURL=Nav.module.cjs.map

package/dist/components/Nav/Nav.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Nav.module.cjs","names":[],"sources":["../../../src/components/Nav/Nav.module.css"],"sourcesContent":["/* Copyright 2025 New Vector Ltd.\n * Copyright 2023 The Matrix.org Foundation C.I.C.\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\n.nav-bar {\n  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);\n  margin: var(--cpd-space-6x) 0;\n  padding: 0;\n}\n\n.nav-bar-items {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--cpd-space-3x);\n  list-style-type: \"\";\n  padding: 0;\n  margin: 0;\n}\n\n.nav-tab {\n  padding: var(--cpd-space-4x) 0;\n  position: relative;\n}\n\n/* Underline effect */\n.nav-tab::before {\n  content: \"\";\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  block-size: 0;\n  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;\n  background-color: var(--cpd-color-bg-action-primary-rest);\n  transition: height 0.1s ease-in-out;\n}\n\n.nav-tab[data-current]::before {\n  /* This is not exactly right: designs says 3px, but there are no variables for that */\n  block-size: var(--cpd-border-width-4);\n}\n\n.nav-item {\n  padding-block: var(--cpd-space-1x);\n  padding-inline: var(--cpd-space-2x);\n  border-radius: var(--cpd-radius-pill-effect);\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--cpd-space-2x);\n  box-sizing: border-box;\n  background: transparent;\n  border: 0;\n  font: var(--cpd-font-body-md-medium);\n  color: var(--cpd-color-text-secondary);\n  text-decoration: none;\n}\n\n@media (hover) {\n  .nav-item:not([disabled]):hover {\n    color: var(--cpd-color-text-primary);\n    background-color: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.nav-item:focus-visible {\n  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;\n}\n\n.nav-item:not([disabled]):active {\n  color: var(--cpd-color-text-primary);\n  background-color: var(--cpd-color-bg-subtle-primary);\n}\n\n.nav-item[aria-current],\n.nav-item[aria-selected=\"true\"] {\n  color: var(--cpd-color-text-primary);\n}\n\n.nav-item[disabled] {\n  cursor: not-allowed;\n\n  /* Enable pointer events for svgs even with fill=none */\n  pointer-events: all !important;\n  color: var(--cpd-color-text-disabled);\n}\n\n@media (forced-colors: active) {\n  .nav-tab[data-current]::before {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Nav/Nav.module.js

@@ -0,0 +1,11 @@
+//#region src/components/Nav/Nav.module.css
+var Nav_module_default = {
+	"nav-bar": "_nav-bar_1e9qm_8",
+	"nav-bar-items": "_nav-bar-items_1e9qm_14",
+	"nav-tab": "_nav-tab_1e9qm_25",
+	"nav-item": "_nav-item_1e9qm_47"
+};
+//#endregion
+export { Nav_module_default as default };
+
+//# sourceMappingURL=Nav.module.js.map

package/dist/components/Nav/Nav.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Nav.module.js","names":[],"sources":["../../../src/components/Nav/Nav.module.css"],"sourcesContent":["/* Copyright 2025 New Vector Ltd.\n * Copyright 2023 The Matrix.org Foundation C.I.C.\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\n.nav-bar {\n  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);\n  margin: var(--cpd-space-6x) 0;\n  padding: 0;\n}\n\n.nav-bar-items {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--cpd-space-3x);\n  list-style-type: \"\";\n  padding: 0;\n  margin: 0;\n}\n\n.nav-tab {\n  padding: var(--cpd-space-4x) 0;\n  position: relative;\n}\n\n/* Underline effect */\n.nav-tab::before {\n  content: \"\";\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  block-size: 0;\n  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;\n  background-color: var(--cpd-color-bg-action-primary-rest);\n  transition: height 0.1s ease-in-out;\n}\n\n.nav-tab[data-current]::before {\n  /* This is not exactly right: designs says 3px, but there are no variables for that */\n  block-size: var(--cpd-border-width-4);\n}\n\n.nav-item {\n  padding-block: var(--cpd-space-1x);\n  padding-inline: var(--cpd-space-2x);\n  border-radius: var(--cpd-radius-pill-effect);\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--cpd-space-2x);\n  box-sizing: border-box;\n  background: transparent;\n  border: 0;\n  font: var(--cpd-font-body-md-medium);\n  color: var(--cpd-color-text-secondary);\n  text-decoration: none;\n}\n\n@media (hover) {\n  .nav-item:not([disabled]):hover {\n    color: var(--cpd-color-text-primary);\n    background-color: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.nav-item:focus-visible {\n  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;\n}\n\n.nav-item:not([disabled]):active {\n  color: var(--cpd-color-text-primary);\n  background-color: var(--cpd-color-bg-subtle-primary);\n}\n\n.nav-item[aria-current],\n.nav-item[aria-selected=\"true\"] {\n  color: var(--cpd-color-text-primary);\n}\n\n.nav-item[disabled] {\n  cursor: not-allowed;\n\n  /* Enable pointer events for svgs even with fill=none */\n  pointer-events: all !important;\n  color: var(--cpd-color-text-disabled);\n}\n\n@media (forced-colors: active) {\n  .nav-tab[data-current]::before {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Nav/NavBar.cjs

@@ -1,30 +1,49 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const Nav_module = require("./Nav.module.css.cjs");
-const NavBar = ({
-  children,
-  className,
-  role,
-  "aria-label": ariaLabel,
-  ...rest
-}) => {
-  const classes = classNames(className, Nav_module.default["nav-bar"]);
-  const a11yAttributesForNav = role !== "tablist" ? (
-    /**
-     * If role isn't tablist, default to navigation.
-     */
-    { role: "navigation", "aria-label": ariaLabel }
-  ) : (
-    /**
-     * If role is tablist, give nav presentation role to remove
-     * any semantic meaning.
-     */
-    { role: "presentation" }
-  );
-  const a11yAttributesForUl = role === "tablist" ? { role: "tablist", "aria-label": ariaLabel } : {};
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ...a11yAttributesForNav, ...rest, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { ...a11yAttributesForUl, className: Nav_module.default["nav-bar-items"], children }) });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Nav_module = require("./Nav.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Nav/NavBar.tsx
+/**
+* A navigation bar component
+*/
+var NavBar = ({ children, className, role, "aria-label": ariaLabel, ...rest }) => {
+	const classes = (0, classnames.default)(className, require_Nav_module.default["nav-bar"]);
+	/**
+	* We sometimes want to use this NavBar for tabs.
+	* This is done by passing `role=tablist` to this component.
+	* By default, this component is used as a navigation bar.
+	*
+	* Depending on this role, a different set of accessibility
+	* attributes need to be applied to the nav/ul element.
+	*/
+	const a11yAttributesForNav = role !== "tablist" ? {
+		role: "navigation",
+		"aria-label": ariaLabel
+	} : { role: "presentation" };
+	/**
+	* When used as tabs, the tablist role must be applied to ul.
+	* When used as navigation, no special accessibility attribute
+	* is needed for the ul element.
+	*/
+	const a11yAttributesForUl = role === "tablist" ? {
+		role: "tablist",
+		"aria-label": ariaLabel
+	} : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		...a11yAttributesForNav,
+		...rest,
+		className: classes,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			...a11yAttributesForUl,
+			className: require_Nav_module.default["nav-bar-items"],
+			children
+		})
+	});
 };
+//#endregion
 exports.NavBar = NavBar;
-//# sourceMappingURL=NavBar.cjs.map
+
+//# sourceMappingURL=NavBar.cjs.map

package/dist/components/Nav/NavBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.cjs","sources":["../../../src/components/Nav/NavBar.tsx"],"sourcesContent":["// Copyright 2025 New Vector Ltd.\n// Copyright 2023 The Matrix.org Foundation C.I.C.\n//\n// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n// Please see LICENSE files in the repository root for full details.\n\nimport React from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavBarProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n\n  /**\n   * Require a label for navigation landmarks\n   */\n  \"aria-label\": string;\n\n  /**\n   * Accessibility role that defaults to navigation.\n   *\n   * If you pass tablist you must also pass `aria-controls` as prop to your NavItem and must\n   * ensure that the conditions stated in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   * are met.\n   */\n  role?: \"navigation\" | \"tablist\";\n};\n\n/**\n * A navigation bar component\n */\nexport const NavBar = ({\n  children,\n  className,\n  role,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: React.PropsWithChildren<NavBarProps>) => {\n  const classes = classNames(className, styles[\"nav-bar\"]);\n  /**\n   * We sometimes want to use this NavBar for tabs.\n   * This is done by passing `role=tablist` to this component.\n   * By default, this component is used as a navigation bar.\n   *\n   * Depending on this role, a different set of accessibility\n   * attributes need to be applied to the nav/ul element.\n   */\n  const a11yAttributesForNav =\n    role !== \"tablist\"\n      ? /**\n         * If role isn't tablist, default to navigation.\n         */\n        { role: \"navigation\", \"aria-label\": ariaLabel }\n      : /**\n         * If role is tablist, give nav presentation role to remove\n         * any semantic meaning.\n         */\n        { role: \"presentation\" };\n\n  /**\n   * When used as tabs, the tablist role must be applied to ul.\n   * When used as navigation, no special accessibility attribute\n   * is needed for the ul element.\n   */\n  const a11yAttributesForUl =\n    role === \"tablist\" ? { role: \"tablist\", \"aria-label\": ariaLabel } : {};\n\n  return (\n    <nav {...a11yAttributesForNav} {...rest} className={classes}>\n      <ul {...a11yAttributesForUl} className={styles[\"nav-bar-items\"]}>\n        {children}\n      </ul>\n    </nav>\n  );\n};\n"],"names":["styles","jsx"],"mappings":";;;;;AAmCO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,MAA4C;AAC1C,QAAM,UAAU,WAAW,WAAWA,WAAAA,QAAO,SAAS,CAAC;AASvD,QAAM,uBACJ,SAAS;AAAA;AAAA;AAAA;AAAA,IAIL,EAAE,MAAM,cAAc,cAAc,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,EAAE,MAAM,eAAA;AAAA;AAOd,QAAM,sBACJ,SAAS,YAAY,EAAE,MAAM,WAAW,cAAc,UAAA,IAAc,CAAA;AAEtE,wCACG,OAAA,EAAK,GAAG,sBAAuB,GAAG,MAAM,WAAW,SAClD,UAAAC,2BAAAA,IAAC,MAAA,EAAI,GAAG,qBAAqB,WAAWD,WAAAA,QAAO,eAAe,GAC3D,UACH,GACF;AAEJ;;"}
+{"version":3,"file":"NavBar.cjs","names":[],"sources":["../../../src/components/Nav/NavBar.tsx"],"sourcesContent":["// Copyright 2025 New Vector Ltd.\n// Copyright 2023 The Matrix.org Foundation C.I.C.\n//\n// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n// Please see LICENSE files in the repository root for full details.\n\nimport React from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavBarProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n\n  /**\n   * Require a label for navigation landmarks\n   */\n  \"aria-label\": string;\n\n  /**\n   * Accessibility role that defaults to navigation.\n   *\n   * If you pass tablist you must also pass `aria-controls` as prop to your NavItem and must\n   * ensure that the conditions stated in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   * are met.\n   */\n  role?: \"navigation\" | \"tablist\";\n};\n\n/**\n * A navigation bar component\n */\nexport const NavBar = ({\n  children,\n  className,\n  role,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: React.PropsWithChildren<NavBarProps>) => {\n  const classes = classNames(className, styles[\"nav-bar\"]);\n  /**\n   * We sometimes want to use this NavBar for tabs.\n   * This is done by passing `role=tablist` to this component.\n   * By default, this component is used as a navigation bar.\n   *\n   * Depending on this role, a different set of accessibility\n   * attributes need to be applied to the nav/ul element.\n   */\n  const a11yAttributesForNav =\n    role !== \"tablist\"\n      ? /**\n         * If role isn't tablist, default to navigation.\n         */\n        { role: \"navigation\", \"aria-label\": ariaLabel }\n      : /**\n         * If role is tablist, give nav presentation role to remove\n         * any semantic meaning.\n         */\n        { role: \"presentation\" };\n\n  /**\n   * When used as tabs, the tablist role must be applied to ul.\n   * When used as navigation, no special accessibility attribute\n   * is needed for the ul element.\n   */\n  const a11yAttributesForUl =\n    role === \"tablist\" ? { role: \"tablist\", \"aria-label\": ariaLabel } : {};\n\n  return (\n    <nav {...a11yAttributesForNav} {...rest} className={classes}>\n      <ul {...a11yAttributesForUl} className={styles[\"nav-bar-items\"]}>\n        {children}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmCA,IAAa,UAAU,EACrB,UACA,WACA,MACA,cAAc,WACd,GAAG,WACuC;CAC1C,MAAM,WAAA,GAAA,WAAA,SAAqB,WAAW,mBAAA,QAAO,WAAW;;;;;;;;;CASxD,MAAM,uBACJ,SAAS,YAIL;EAAE,MAAM;EAAc,cAAc;EAAW,GAK/C,EAAE,MAAM,gBAAgB;;;;;;CAO9B,MAAM,sBACJ,SAAS,YAAY;EAAE,MAAM;EAAW,cAAc;EAAW,GAAG,EAAE;AAExE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAsB,GAAI;EAAM,WAAW;YAClD,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,GAAI;GAAqB,WAAW,mBAAA,QAAO;GAC5C;GACE,CAAA;EACD,CAAA"}

package/dist/components/Nav/NavBar.js

@@ -1,30 +1,46 @@
-import { jsx } from "react/jsx-runtime";
+import Nav_module_default from "./Nav.module.js";
 import classNames from "classnames";
-import styles from "./Nav.module.css.js";
-const NavBar = ({
-  children,
-  className,
-  role,
-  "aria-label": ariaLabel,
-  ...rest
-}) => {
-  const classes = classNames(className, styles["nav-bar"]);
-  const a11yAttributesForNav = role !== "tablist" ? (
-    /**
-     * If role isn't tablist, default to navigation.
-     */
-    { role: "navigation", "aria-label": ariaLabel }
-  ) : (
-    /**
-     * If role is tablist, give nav presentation role to remove
-     * any semantic meaning.
-     */
-    { role: "presentation" }
-  );
-  const a11yAttributesForUl = role === "tablist" ? { role: "tablist", "aria-label": ariaLabel } : {};
-  return /* @__PURE__ */ jsx("nav", { ...a11yAttributesForNav, ...rest, className: classes, children: /* @__PURE__ */ jsx("ul", { ...a11yAttributesForUl, className: styles["nav-bar-items"], children }) });
-};
-export {
-  NavBar
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Nav/NavBar.tsx
+/**
+* A navigation bar component
+*/
+var NavBar = ({ children, className, role, "aria-label": ariaLabel, ...rest }) => {
+	const classes = classNames(className, Nav_module_default["nav-bar"]);
+	/**
+	* We sometimes want to use this NavBar for tabs.
+	* This is done by passing `role=tablist` to this component.
+	* By default, this component is used as a navigation bar.
+	*
+	* Depending on this role, a different set of accessibility
+	* attributes need to be applied to the nav/ul element.
+	*/
+	const a11yAttributesForNav = role !== "tablist" ? {
+		role: "navigation",
+		"aria-label": ariaLabel
+	} : { role: "presentation" };
+	/**
+	* When used as tabs, the tablist role must be applied to ul.
+	* When used as navigation, no special accessibility attribute
+	* is needed for the ul element.
+	*/
+	const a11yAttributesForUl = role === "tablist" ? {
+		role: "tablist",
+		"aria-label": ariaLabel
+	} : {};
+	return /* @__PURE__ */ jsx("nav", {
+		...a11yAttributesForNav,
+		...rest,
+		className: classes,
+		children: /* @__PURE__ */ jsx("ul", {
+			...a11yAttributesForUl,
+			className: Nav_module_default["nav-bar-items"],
+			children
+		})
+	});
 };
-//# sourceMappingURL=NavBar.js.map
+//#endregion
+export { NavBar };
+
+//# sourceMappingURL=NavBar.js.map

package/dist/components/Nav/NavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","sources":["../../../src/components/Nav/NavBar.tsx"],"sourcesContent":["// Copyright 2025 New Vector Ltd.\n// Copyright 2023 The Matrix.org Foundation C.I.C.\n//\n// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n// Please see LICENSE files in the repository root for full details.\n\nimport React from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavBarProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n\n  /**\n   * Require a label for navigation landmarks\n   */\n  \"aria-label\": string;\n\n  /**\n   * Accessibility role that defaults to navigation.\n   *\n   * If you pass tablist you must also pass `aria-controls` as prop to your NavItem and must\n   * ensure that the conditions stated in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   * are met.\n   */\n  role?: \"navigation\" | \"tablist\";\n};\n\n/**\n * A navigation bar component\n */\nexport const NavBar = ({\n  children,\n  className,\n  role,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: React.PropsWithChildren<NavBarProps>) => {\n  const classes = classNames(className, styles[\"nav-bar\"]);\n  /**\n   * We sometimes want to use this NavBar for tabs.\n   * This is done by passing `role=tablist` to this component.\n   * By default, this component is used as a navigation bar.\n   *\n   * Depending on this role, a different set of accessibility\n   * attributes need to be applied to the nav/ul element.\n   */\n  const a11yAttributesForNav =\n    role !== \"tablist\"\n      ? /**\n         * If role isn't tablist, default to navigation.\n         */\n        { role: \"navigation\", \"aria-label\": ariaLabel }\n      : /**\n         * If role is tablist, give nav presentation role to remove\n         * any semantic meaning.\n         */\n        { role: \"presentation\" };\n\n  /**\n   * When used as tabs, the tablist role must be applied to ul.\n   * When used as navigation, no special accessibility attribute\n   * is needed for the ul element.\n   */\n  const a11yAttributesForUl =\n    role === \"tablist\" ? { role: \"tablist\", \"aria-label\": ariaLabel } : {};\n\n  return (\n    <nav {...a11yAttributesForNav} {...rest} className={classes}>\n      <ul {...a11yAttributesForUl} className={styles[\"nav-bar-items\"]}>\n        {children}\n      </ul>\n    </nav>\n  );\n};\n"],"names":[],"mappings":";;;AAmCO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,MAA4C;AAC1C,QAAM,UAAU,WAAW,WAAW,OAAO,SAAS,CAAC;AASvD,QAAM,uBACJ,SAAS;AAAA;AAAA;AAAA;AAAA,IAIL,EAAE,MAAM,cAAc,cAAc,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,EAAE,MAAM,eAAA;AAAA;AAOd,QAAM,sBACJ,SAAS,YAAY,EAAE,MAAM,WAAW,cAAc,UAAA,IAAc,CAAA;AAEtE,6BACG,OAAA,EAAK,GAAG,sBAAuB,GAAG,MAAM,WAAW,SAClD,UAAA,oBAAC,MAAA,EAAI,GAAG,qBAAqB,WAAW,OAAO,eAAe,GAC3D,UACH,GACF;AAEJ;"}
+{"version":3,"file":"NavBar.js","names":[],"sources":["../../../src/components/Nav/NavBar.tsx"],"sourcesContent":["// Copyright 2025 New Vector Ltd.\n// Copyright 2023 The Matrix.org Foundation C.I.C.\n//\n// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n// Please see LICENSE files in the repository root for full details.\n\nimport React from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavBarProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n\n  /**\n   * Require a label for navigation landmarks\n   */\n  \"aria-label\": string;\n\n  /**\n   * Accessibility role that defaults to navigation.\n   *\n   * If you pass tablist you must also pass `aria-controls` as prop to your NavItem and must\n   * ensure that the conditions stated in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   * are met.\n   */\n  role?: \"navigation\" | \"tablist\";\n};\n\n/**\n * A navigation bar component\n */\nexport const NavBar = ({\n  children,\n  className,\n  role,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: React.PropsWithChildren<NavBarProps>) => {\n  const classes = classNames(className, styles[\"nav-bar\"]);\n  /**\n   * We sometimes want to use this NavBar for tabs.\n   * This is done by passing `role=tablist` to this component.\n   * By default, this component is used as a navigation bar.\n   *\n   * Depending on this role, a different set of accessibility\n   * attributes need to be applied to the nav/ul element.\n   */\n  const a11yAttributesForNav =\n    role !== \"tablist\"\n      ? /**\n         * If role isn't tablist, default to navigation.\n         */\n        { role: \"navigation\", \"aria-label\": ariaLabel }\n      : /**\n         * If role is tablist, give nav presentation role to remove\n         * any semantic meaning.\n         */\n        { role: \"presentation\" };\n\n  /**\n   * When used as tabs, the tablist role must be applied to ul.\n   * When used as navigation, no special accessibility attribute\n   * is needed for the ul element.\n   */\n  const a11yAttributesForUl =\n    role === \"tablist\" ? { role: \"tablist\", \"aria-label\": ariaLabel } : {};\n\n  return (\n    <nav {...a11yAttributesForNav} {...rest} className={classes}>\n      <ul {...a11yAttributesForUl} className={styles[\"nav-bar-items\"]}>\n        {children}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;AAmCA,IAAa,UAAU,EACrB,UACA,WACA,MACA,cAAc,WACd,GAAG,WACuC;CAC1C,MAAM,UAAU,WAAW,WAAW,mBAAO,WAAW;;;;;;;;;CASxD,MAAM,uBACJ,SAAS,YAIL;EAAE,MAAM;EAAc,cAAc;EAAW,GAK/C,EAAE,MAAM,gBAAgB;;;;;;CAO9B,MAAM,sBACJ,SAAS,YAAY;EAAE,MAAM;EAAW,cAAc;EAAW,GAAG,EAAE;AAExE,QACE,oBAAC,OAAD;EAAK,GAAI;EAAsB,GAAI;EAAM,WAAW;YAClD,oBAAC,MAAD;GAAI,GAAI;GAAqB,WAAW,mBAAO;GAC5C;GACE,CAAA;EACD,CAAA"}

package/dist/components/Nav/NavItem.cjs

@@ -1,76 +1,74 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const Nav_module = require("./Nav.module.css.cjs");
-const NavItemLink = React.forwardRef(function NavItemLink2({
-  children,
-  href,
-  onClick,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "a",
-    {
-      href,
-      onClick,
-      className: Nav_module.default["nav-item"],
-      ...rest,
-      ref,
-      children
-    }
-  );
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Nav_module = require("./Nav.module.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Nav/NavItem.tsx
+var NavItemLink = (0, react.forwardRef)(function NavItemLink({ children, href, onClick, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href,
+		onClick,
+		className: require_Nav_module.default["nav-item"],
+		...rest,
+		ref,
+		children
+	});
 });
-const NavItemButton = React.forwardRef(function NavItemButton2({
-  children,
-  disabled,
-  onClick,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      onClick,
-      className: Nav_module.default["nav-item"],
-      disabled,
-      ref,
-      ...rest,
-      children
-    }
-  );
+var NavItemButton = (0, react.forwardRef)(function NavItemButton({ children, disabled, onClick, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		onClick,
+		className: require_Nav_module.default["nav-item"],
+		disabled,
+		ref,
+		...rest,
+		children
+	});
 });
-const renderAsLink = (props) => "href" in props && !!props.href;
-const NavItem = React.forwardRef(function NavItem2(props, ref) {
-  const ariaControls = props["aria-controls"];
-  const isUsedAsTabs = !!ariaControls;
-  const a11yAttributes = isUsedAsTabs ? {
-    // when used as tabs
-    "aria-controls": ariaControls,
-    role: "tab",
-    "aria-selected": props.active
-  } : {
-    // when used as navigation elements
-    "aria-current": props.active ? true : void 0
-  };
-  const propsForChild = { ...props };
-  delete propsForChild["active"];
-  let navItem;
-  if (renderAsLink(propsForChild)) {
-    const buttonRef = ref;
-    navItem = /* @__PURE__ */ jsxRuntime.jsx(NavItemLink, { ...propsForChild, ...a11yAttributes, ref: buttonRef });
-  } else {
-    const buttonRef = ref;
-    navItem = /* @__PURE__ */ jsxRuntime.jsx(NavItemButton, { ...propsForChild, ...a11yAttributes, ref: buttonRef });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      className: Nav_module.default["nav-tab"],
-      "data-current": props.active ? true : void 0,
-      role: "presentation",
-      children: navItem
-    }
-  );
+var renderAsLink = (props) => "href" in props && !!props.href;
+/**
+* A navigation item component to be used with a navigation bar.
+* Will render an anchor when href is provided, otherwise a button element.
+*/
+var NavItem = (0, react.forwardRef)(function NavItem(props, ref) {
+	/**
+	* For accessibility rules related to tabs,
+	* see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties
+	*
+	* For accessibility rules related to navigation,
+	* see https://www.digitala11y.com/navigation-role/
+	*/
+	const ariaControls = props["aria-controls"];
+	const a11yAttributes = !!ariaControls ? {
+		"aria-controls": ariaControls,
+		role: "tab",
+		"aria-selected": props.active
+	} : { "aria-current": props.active ? true : void 0 };
+	const propsForChild = { ...props };
+	delete propsForChild["active"];
+	let navItem;
+	if (renderAsLink(propsForChild)) {
+		const buttonRef = ref;
+		navItem = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavItemLink, {
+			...propsForChild,
+			...a11yAttributes,
+			ref: buttonRef
+		});
+	} else {
+		const buttonRef = ref;
+		navItem = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavItemButton, {
+			...propsForChild,
+			...a11yAttributes,
+			ref: buttonRef
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		className: require_Nav_module.default["nav-tab"],
+		"data-current": props.active ? true : void 0,
+		role: "presentation",
+		children: navItem
+	});
 });
+//#endregion
 exports.NavItem = NavItem;
-//# sourceMappingURL=NavItem.cjs.map
+
+//# sourceMappingURL=NavItem.cjs.map

package/dist/components/Nav/NavItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.cjs","sources":["../../../src/components/Nav/NavItem.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\nCopyright 2022 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ForwardedRef,\n  type MouseEventHandler,\n  forwardRef,\n} from \"react\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavItemProps = {\n  active?: boolean;\n  \"aria-controls\"?: string;\n};\n\ntype NavItemLinkProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"style\" | \"className\"\n> & {\n  href: string;\n} & NavItemProps;\n\ntype NavItemButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"style\" | \"className\"\n> & {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n} & NavItemProps;\n\nconst NavItemLink = forwardRef(function NavItemLink(\n  {\n    children,\n    href,\n    onClick,\n    ...rest\n  }: React.PropsWithChildren<NavItemLinkProps>,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <a\n      href={href}\n      onClick={onClick}\n      className={styles[\"nav-item\"]}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </a>\n  );\n});\n\nconst NavItemButton = forwardRef(function NavItemButton(\n  {\n    children,\n    disabled,\n    onClick,\n    ...rest\n  }: React.PropsWithChildren<NavItemButtonProps>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <button\n      onClick={onClick}\n      className={styles[\"nav-item\"]}\n      disabled={disabled}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n\nconst renderAsLink = (\n  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,\n): props is React.PropsWithChildren<NavItemLinkProps> =>\n  \"href\" in props && !!props.href;\n\n/**\n * A navigation item component to be used with a navigation bar.\n * Will render an anchor when href is provided, otherwise a button element.\n */\nexport const NavItem = forwardRef(function NavItem(\n  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,\n  ref:\n    | ForwardedRef<HTMLButtonElement | null>\n    | ForwardedRef<HTMLAnchorElement | null>,\n) {\n  /**\n   * For accessibility rules related to tabs,\n   * see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   *\n   * For accessibility rules related to navigation,\n   * see https://www.digitala11y.com/navigation-role/\n   */\n  const ariaControls = props[\"aria-controls\"];\n  const isUsedAsTabs = !!ariaControls;\n  const a11yAttributes = isUsedAsTabs\n    ? {\n        // when used as tabs\n        \"aria-controls\": ariaControls,\n        role: \"tab\",\n        \"aria-selected\": props.active,\n      }\n    : {\n        // when used as navigation elements\n        \"aria-current\": props.active ? true : undefined,\n      };\n\n  // All the attributes except `active` can be passed to the button/a element.\n  const propsForChild = { ...props };\n  delete propsForChild[\"active\"];\n\n  // Depending on whether `href` is in props, we render link/button\n  let navItem: React.ReactNode;\n  if (renderAsLink(propsForChild)) {\n    const buttonRef = ref as ForwardedRef<HTMLAnchorElement | null>;\n    navItem = (\n      <NavItemLink {...propsForChild} {...a11yAttributes} ref={buttonRef} />\n    );\n  } else {\n    const buttonRef = ref as ForwardedRef<HTMLButtonElement | null>;\n    navItem = (\n      <NavItemButton {...propsForChild} {...a11yAttributes} ref={buttonRef} />\n    );\n  }\n\n  return (\n    <li\n      className={styles[\"nav-tab\"]}\n      data-current={props.active ? true : undefined}\n      role=\"presentation\"\n    >\n      {navItem}\n    </li>\n  );\n});\n"],"names":["forwardRef","NavItemLink","jsx","styles","NavItemButton","NavItem"],"mappings":";;;;;AAqCA,MAAM,cAAcA,MAAAA,WAAW,SAASC,aACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAWC,WAAAA,QAAO,UAAU;AAAA,MAC3B,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAED,MAAM,gBAAgBH,MAAAA,WAAW,SAASI,eACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SACEF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,WAAAA,QAAO,UAAU;AAAA,MAC5B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAED,MAAM,eAAe,CACnB,UAEA,UAAU,SAAS,CAAC,CAAC,MAAM;AAMtB,MAAM,UAAUH,MAAAA,WAAW,SAASK,SACzC,OACA,KAGA;AAQA,QAAM,eAAe,MAAM,eAAe;AAC1C,QAAM,eAAe,CAAC,CAAC;AACvB,QAAM,iBAAiB,eACnB;AAAA;AAAA,IAEE,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,iBAAiB,MAAM;AAAA,EAAA,IAEzB;AAAA;AAAA,IAEE,gBAAgB,MAAM,SAAS,OAAO;AAAA,EAAA;AAI5C,QAAM,gBAAgB,EAAE,GAAG,MAAA;AAC3B,SAAO,cAAc,QAAQ;AAG7B,MAAI;AACJ,MAAI,aAAa,aAAa,GAAG;AAC/B,UAAM,YAAY;AAClB,6CACG,aAAA,EAAa,GAAG,eAAgB,GAAG,gBAAgB,KAAK,WAAW;AAAA,EAExE,OAAO;AACL,UAAM,YAAY;AAClB,6CACG,eAAA,EAAe,GAAG,eAAgB,GAAG,gBAAgB,KAAK,WAAW;AAAA,EAE1E;AAEA,SACEH,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,WAAAA,QAAO,SAAS;AAAA,MAC3B,gBAAc,MAAM,SAAS,OAAO;AAAA,MACpC,MAAK;AAAA,MAEJ,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;"}
+{"version":3,"file":"NavItem.cjs","names":[],"sources":["../../../src/components/Nav/NavItem.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\nCopyright 2022 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ForwardedRef,\n  type MouseEventHandler,\n  forwardRef,\n} from \"react\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavItemProps = {\n  active?: boolean;\n  \"aria-controls\"?: string;\n};\n\ntype NavItemLinkProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"style\" | \"className\"\n> & {\n  href: string;\n} & NavItemProps;\n\ntype NavItemButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"style\" | \"className\"\n> & {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n} & NavItemProps;\n\nconst NavItemLink = forwardRef(function NavItemLink(\n  {\n    children,\n    href,\n    onClick,\n    ...rest\n  }: React.PropsWithChildren<NavItemLinkProps>,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <a\n      href={href}\n      onClick={onClick}\n      className={styles[\"nav-item\"]}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </a>\n  );\n});\n\nconst NavItemButton = forwardRef(function NavItemButton(\n  {\n    children,\n    disabled,\n    onClick,\n    ...rest\n  }: React.PropsWithChildren<NavItemButtonProps>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <button\n      onClick={onClick}\n      className={styles[\"nav-item\"]}\n      disabled={disabled}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n\nconst renderAsLink = (\n  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,\n): props is React.PropsWithChildren<NavItemLinkProps> =>\n  \"href\" in props && !!props.href;\n\n/**\n * A navigation item component to be used with a navigation bar.\n * Will render an anchor when href is provided, otherwise a button element.\n */\nexport const NavItem = forwardRef(function NavItem(\n  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,\n  ref:\n    | ForwardedRef<HTMLButtonElement | null>\n    | ForwardedRef<HTMLAnchorElement | null>,\n) {\n  /**\n   * For accessibility rules related to tabs,\n   * see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   *\n   * For accessibility rules related to navigation,\n   * see https://www.digitala11y.com/navigation-role/\n   */\n  const ariaControls = props[\"aria-controls\"];\n  const isUsedAsTabs = !!ariaControls;\n  const a11yAttributes = isUsedAsTabs\n    ? {\n        // when used as tabs\n        \"aria-controls\": ariaControls,\n        role: \"tab\",\n        \"aria-selected\": props.active,\n      }\n    : {\n        // when used as navigation elements\n        \"aria-current\": props.active ? true : undefined,\n      };\n\n  // All the attributes except `active` can be passed to the button/a element.\n  const propsForChild = { ...props };\n  delete propsForChild[\"active\"];\n\n  // Depending on whether `href` is in props, we render link/button\n  let navItem: React.ReactNode;\n  if (renderAsLink(propsForChild)) {\n    const buttonRef = ref as ForwardedRef<HTMLAnchorElement | null>;\n    navItem = (\n      <NavItemLink {...propsForChild} {...a11yAttributes} ref={buttonRef} />\n    );\n  } else {\n    const buttonRef = ref as ForwardedRef<HTMLButtonElement | null>;\n    navItem = (\n      <NavItemButton {...propsForChild} {...a11yAttributes} ref={buttonRef} />\n    );\n  }\n\n  return (\n    <li\n      className={styles[\"nav-tab\"]}\n      data-current={props.active ? true : undefined}\n      role=\"presentation\"\n    >\n      {navItem}\n    </li>\n  );\n});\n"],"mappings":";;;;;;AAqCA,IAAM,eAAA,GAAA,MAAA,YAAyB,SAAS,YACtC,EACE,UACA,MACA,SACA,GAAG,QAEL,KACA;AACA,QACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACQ;EACG;EACT,WAAW,mBAAA,QAAO;EAClB,GAAI;EACC;EAEJ;EACC,CAAA;EAEN;AAEF,IAAM,iBAAA,GAAA,MAAA,YAA2B,SAAS,cACxC,EACE,UACA,UACA,SACA,GAAG,QAEL,KACA;AACA,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACW;EACT,WAAW,mBAAA,QAAO;EACR;EACL;EACL,GAAI;EAEH;EACM,CAAA;EAEX;AAEF,IAAM,gBACJ,UAEA,UAAU,SAAS,CAAC,CAAC,MAAM;;;;;AAM7B,IAAa,WAAA,GAAA,MAAA,YAAqB,SAAS,QACzC,OACA,KAGA;;;;;;;;CAQA,MAAM,eAAe,MAAM;CAE3B,MAAM,iBADe,CAAC,CAAC,eAEnB;EAEE,iBAAiB;EACjB,MAAM;EACN,iBAAiB,MAAM;EACxB,GACD,EAEE,gBAAgB,MAAM,SAAS,OAAO,KAAA,GACvC;CAGL,MAAM,gBAAgB,EAAE,GAAG,OAAO;AAClC,QAAO,cAAc;CAGrB,IAAI;AACJ,KAAI,aAAa,cAAc,EAAE;EAC/B,MAAM,YAAY;AAClB,YACE,iBAAA,GAAA,kBAAA,KAAC,aAAD;GAAa,GAAI;GAAe,GAAI;GAAgB,KAAK;GAAa,CAAA;QAEnE;EACL,MAAM,YAAY;AAClB,YACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;GAAe,GAAI;GAAe,GAAI;GAAgB,KAAK;GAAa,CAAA;;AAI5E,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,WAAW,mBAAA,QAAO;EAClB,gBAAc,MAAM,SAAS,OAAO,KAAA;EACpC,MAAK;YAEJ;EACE,CAAA;EAEP"}

package/dist/components/Nav/NavItem.js

@@ -1,76 +1,72 @@
-import { jsx } from "react/jsx-runtime";
+import Nav_module_default from "./Nav.module.js";
 import { forwardRef } from "react";
-import styles from "./Nav.module.css.js";
-const NavItemLink = forwardRef(function NavItemLink2({
-  children,
-  href,
-  onClick,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      onClick,
-      className: styles["nav-item"],
-      ...rest,
-      ref,
-      children
-    }
-  );
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Nav/NavItem.tsx
+var NavItemLink = forwardRef(function NavItemLink({ children, href, onClick, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		onClick,
+		className: Nav_module_default["nav-item"],
+		...rest,
+		ref,
+		children
+	});
 });
-const NavItemButton = forwardRef(function NavItemButton2({
-  children,
-  disabled,
-  onClick,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick,
-      className: styles["nav-item"],
-      disabled,
-      ref,
-      ...rest,
-      children
-    }
-  );
+var NavItemButton = forwardRef(function NavItemButton({ children, disabled, onClick, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		onClick,
+		className: Nav_module_default["nav-item"],
+		disabled,
+		ref,
+		...rest,
+		children
+	});
 });
-const renderAsLink = (props) => "href" in props && !!props.href;
-const NavItem = forwardRef(function NavItem2(props, ref) {
-  const ariaControls = props["aria-controls"];
-  const isUsedAsTabs = !!ariaControls;
-  const a11yAttributes = isUsedAsTabs ? {
-    // when used as tabs
-    "aria-controls": ariaControls,
-    role: "tab",
-    "aria-selected": props.active
-  } : {
-    // when used as navigation elements
-    "aria-current": props.active ? true : void 0
-  };
-  const propsForChild = { ...props };
-  delete propsForChild["active"];
-  let navItem;
-  if (renderAsLink(propsForChild)) {
-    const buttonRef = ref;
-    navItem = /* @__PURE__ */ jsx(NavItemLink, { ...propsForChild, ...a11yAttributes, ref: buttonRef });
-  } else {
-    const buttonRef = ref;
-    navItem = /* @__PURE__ */ jsx(NavItemButton, { ...propsForChild, ...a11yAttributes, ref: buttonRef });
-  }
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      className: styles["nav-tab"],
-      "data-current": props.active ? true : void 0,
-      role: "presentation",
-      children: navItem
-    }
-  );
+var renderAsLink = (props) => "href" in props && !!props.href;
+/**
+* A navigation item component to be used with a navigation bar.
+* Will render an anchor when href is provided, otherwise a button element.
+*/
+var NavItem = forwardRef(function NavItem(props, ref) {
+	/**
+	* For accessibility rules related to tabs,
+	* see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties
+	*
+	* For accessibility rules related to navigation,
+	* see https://www.digitala11y.com/navigation-role/
+	*/
+	const ariaControls = props["aria-controls"];
+	const a11yAttributes = !!ariaControls ? {
+		"aria-controls": ariaControls,
+		role: "tab",
+		"aria-selected": props.active
+	} : { "aria-current": props.active ? true : void 0 };
+	const propsForChild = { ...props };
+	delete propsForChild["active"];
+	let navItem;
+	if (renderAsLink(propsForChild)) {
+		const buttonRef = ref;
+		navItem = /* @__PURE__ */ jsx(NavItemLink, {
+			...propsForChild,
+			...a11yAttributes,
+			ref: buttonRef
+		});
+	} else {
+		const buttonRef = ref;
+		navItem = /* @__PURE__ */ jsx(NavItemButton, {
+			...propsForChild,
+			...a11yAttributes,
+			ref: buttonRef
+		});
+	}
+	return /* @__PURE__ */ jsx("li", {
+		className: Nav_module_default["nav-tab"],
+		"data-current": props.active ? true : void 0,
+		role: "presentation",
+		children: navItem
+	});
 });
-export {
-  NavItem
-};
-//# sourceMappingURL=NavItem.js.map
+//#endregion
+export { NavItem };
+
+//# sourceMappingURL=NavItem.js.map

package/dist/components/Nav/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../../../src/components/Nav/NavItem.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\nCopyright 2022 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ForwardedRef,\n  type MouseEventHandler,\n  forwardRef,\n} from \"react\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavItemProps = {\n  active?: boolean;\n  \"aria-controls\"?: string;\n};\n\ntype NavItemLinkProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"style\" | \"className\"\n> & {\n  href: string;\n} & NavItemProps;\n\ntype NavItemButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"style\" | \"className\"\n> & {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n} & NavItemProps;\n\nconst NavItemLink = forwardRef(function NavItemLink(\n  {\n    children,\n    href,\n    onClick,\n    ...rest\n  }: React.PropsWithChildren<NavItemLinkProps>,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <a\n      href={href}\n      onClick={onClick}\n      className={styles[\"nav-item\"]}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </a>\n  );\n});\n\nconst NavItemButton = forwardRef(function NavItemButton(\n  {\n    children,\n    disabled,\n    onClick,\n    ...rest\n  }: React.PropsWithChildren<NavItemButtonProps>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <button\n      onClick={onClick}\n      className={styles[\"nav-item\"]}\n      disabled={disabled}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n\nconst renderAsLink = (\n  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,\n): props is React.PropsWithChildren<NavItemLinkProps> =>\n  \"href\" in props && !!props.href;\n\n/**\n * A navigation item component to be used with a navigation bar.\n * Will render an anchor when href is provided, otherwise a button element.\n */\nexport const NavItem = forwardRef(function NavItem(\n  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,\n  ref:\n    | ForwardedRef<HTMLButtonElement | null>\n    | ForwardedRef<HTMLAnchorElement | null>,\n) {\n  /**\n   * For accessibility rules related to tabs,\n   * see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   *\n   * For accessibility rules related to navigation,\n   * see https://www.digitala11y.com/navigation-role/\n   */\n  const ariaControls = props[\"aria-controls\"];\n  const isUsedAsTabs = !!ariaControls;\n  const a11yAttributes = isUsedAsTabs\n    ? {\n        // when used as tabs\n        \"aria-controls\": ariaControls,\n        role: \"tab\",\n        \"aria-selected\": props.active,\n      }\n    : {\n        // when used as navigation elements\n        \"aria-current\": props.active ? true : undefined,\n      };\n\n  // All the attributes except `active` can be passed to the button/a element.\n  const propsForChild = { ...props };\n  delete propsForChild[\"active\"];\n\n  // Depending on whether `href` is in props, we render link/button\n  let navItem: React.ReactNode;\n  if (renderAsLink(propsForChild)) {\n    const buttonRef = ref as ForwardedRef<HTMLAnchorElement | null>;\n    navItem = (\n      <NavItemLink {...propsForChild} {...a11yAttributes} ref={buttonRef} />\n    );\n  } else {\n    const buttonRef = ref as ForwardedRef<HTMLButtonElement | null>;\n    navItem = (\n      <NavItemButton {...propsForChild} {...a11yAttributes} ref={buttonRef} />\n    );\n  }\n\n  return (\n    <li\n      className={styles[\"nav-tab\"]}\n      data-current={props.active ? true : undefined}\n      role=\"presentation\"\n    >\n      {navItem}\n    </li>\n  );\n});\n"],"names":["NavItemLink","NavItemButton","NavItem"],"mappings":";;;AAqCA,MAAM,cAAc,WAAW,SAASA,aACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,OAAO,UAAU;AAAA,MAC3B,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAED,MAAM,gBAAgB,WAAW,SAASC,eACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,OAAO,UAAU;AAAA,MAC5B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAED,MAAM,eAAe,CACnB,UAEA,UAAU,SAAS,CAAC,CAAC,MAAM;AAMtB,MAAM,UAAU,WAAW,SAASC,SACzC,OACA,KAGA;AAQA,QAAM,eAAe,MAAM,eAAe;AAC1C,QAAM,eAAe,CAAC,CAAC;AACvB,QAAM,iBAAiB,eACnB;AAAA;AAAA,IAEE,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,iBAAiB,MAAM;AAAA,EAAA,IAEzB;AAAA;AAAA,IAEE,gBAAgB,MAAM,SAAS,OAAO;AAAA,EAAA;AAI5C,QAAM,gBAAgB,EAAE,GAAG,MAAA;AAC3B,SAAO,cAAc,QAAQ;AAG7B,MAAI;AACJ,MAAI,aAAa,aAAa,GAAG;AAC/B,UAAM,YAAY;AAClB,kCACG,aAAA,EAAa,GAAG,eAAgB,GAAG,gBAAgB,KAAK,WAAW;AAAA,EAExE,OAAO;AACL,UAAM,YAAY;AAClB,kCACG,eAAA,EAAe,GAAG,eAAgB,GAAG,gBAAgB,KAAK,WAAW;AAAA,EAE1E;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,OAAO,SAAS;AAAA,MAC3B,gBAAc,MAAM,SAAS,OAAO;AAAA,MACpC,MAAK;AAAA,MAEJ,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"NavItem.js","names":[],"sources":["../../../src/components/Nav/NavItem.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\nCopyright 2022 The Matrix.org Foundation C.I.C.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ForwardedRef,\n  type MouseEventHandler,\n  forwardRef,\n} from \"react\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavItemProps = {\n  active?: boolean;\n  \"aria-controls\"?: string;\n};\n\ntype NavItemLinkProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"style\" | \"className\"\n> & {\n  href: string;\n} & NavItemProps;\n\ntype NavItemButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"style\" | \"className\"\n> & {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n} & NavItemProps;\n\nconst NavItemLink = forwardRef(function NavItemLink(\n  {\n    children,\n    href,\n    onClick,\n    ...rest\n  }: React.PropsWithChildren<NavItemLinkProps>,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <a\n      href={href}\n      onClick={onClick}\n      className={styles[\"nav-item\"]}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </a>\n  );\n});\n\nconst NavItemButton = forwardRef(function NavItemButton(\n  {\n    children,\n    disabled,\n    onClick,\n    ...rest\n  }: React.PropsWithChildren<NavItemButtonProps>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <button\n      onClick={onClick}\n      className={styles[\"nav-item\"]}\n      disabled={disabled}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n\nconst renderAsLink = (\n  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,\n): props is React.PropsWithChildren<NavItemLinkProps> =>\n  \"href\" in props && !!props.href;\n\n/**\n * A navigation item component to be used with a navigation bar.\n * Will render an anchor when href is provided, otherwise a button element.\n */\nexport const NavItem = forwardRef(function NavItem(\n  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,\n  ref:\n    | ForwardedRef<HTMLButtonElement | null>\n    | ForwardedRef<HTMLAnchorElement | null>,\n) {\n  /**\n   * For accessibility rules related to tabs,\n   * see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   *\n   * For accessibility rules related to navigation,\n   * see https://www.digitala11y.com/navigation-role/\n   */\n  const ariaControls = props[\"aria-controls\"];\n  const isUsedAsTabs = !!ariaControls;\n  const a11yAttributes = isUsedAsTabs\n    ? {\n        // when used as tabs\n        \"aria-controls\": ariaControls,\n        role: \"tab\",\n        \"aria-selected\": props.active,\n      }\n    : {\n        // when used as navigation elements\n        \"aria-current\": props.active ? true : undefined,\n      };\n\n  // All the attributes except `active` can be passed to the button/a element.\n  const propsForChild = { ...props };\n  delete propsForChild[\"active\"];\n\n  // Depending on whether `href` is in props, we render link/button\n  let navItem: React.ReactNode;\n  if (renderAsLink(propsForChild)) {\n    const buttonRef = ref as ForwardedRef<HTMLAnchorElement | null>;\n    navItem = (\n      <NavItemLink {...propsForChild} {...a11yAttributes} ref={buttonRef} />\n    );\n  } else {\n    const buttonRef = ref as ForwardedRef<HTMLButtonElement | null>;\n    navItem = (\n      <NavItemButton {...propsForChild} {...a11yAttributes} ref={buttonRef} />\n    );\n  }\n\n  return (\n    <li\n      className={styles[\"nav-tab\"]}\n      data-current={props.active ? true : undefined}\n      role=\"presentation\"\n    >\n      {navItem}\n    </li>\n  );\n});\n"],"mappings":";;;;AAqCA,IAAM,cAAc,WAAW,SAAS,YACtC,EACE,UACA,MACA,SACA,GAAG,QAEL,KACA;AACA,QACE,oBAAC,KAAD;EACQ;EACG;EACT,WAAW,mBAAO;EAClB,GAAI;EACC;EAEJ;EACC,CAAA;EAEN;AAEF,IAAM,gBAAgB,WAAW,SAAS,cACxC,EACE,UACA,UACA,SACA,GAAG,QAEL,KACA;AACA,QACE,oBAAC,UAAD;EACW;EACT,WAAW,mBAAO;EACR;EACL;EACL,GAAI;EAEH;EACM,CAAA;EAEX;AAEF,IAAM,gBACJ,UAEA,UAAU,SAAS,CAAC,CAAC,MAAM;;;;;AAM7B,IAAa,UAAU,WAAW,SAAS,QACzC,OACA,KAGA;;;;;;;;CAQA,MAAM,eAAe,MAAM;CAE3B,MAAM,iBADe,CAAC,CAAC,eAEnB;EAEE,iBAAiB;EACjB,MAAM;EACN,iBAAiB,MAAM;EACxB,GACD,EAEE,gBAAgB,MAAM,SAAS,OAAO,KAAA,GACvC;CAGL,MAAM,gBAAgB,EAAE,GAAG,OAAO;AAClC,QAAO,cAAc;CAGrB,IAAI;AACJ,KAAI,aAAa,cAAc,EAAE;EAC/B,MAAM,YAAY;AAClB,YACE,oBAAC,aAAD;GAAa,GAAI;GAAe,GAAI;GAAgB,KAAK;GAAa,CAAA;QAEnE;EACL,MAAM,YAAY;AAClB,YACE,oBAAC,eAAD;GAAe,GAAI;GAAe,GAAI;GAAgB,KAAK;GAAa,CAAA;;AAI5E,QACE,oBAAC,MAAD;EACE,WAAW,mBAAO;EAClB,gBAAc,MAAM,SAAS,OAAO,KAAA;EACpC,MAAK;YAEJ;EACE,CAAA;EAEP"}

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,19 @@
+import { default as React, ComponentType, ReactNode, SVGAttributes } from 'react';
+export declare const PageHeader: React.ForwardRefExoticComponent<{
+    Icon: ComponentType<SVGAttributes<SVGElement>>;
+    /**
+     * The heading text.
+     */
+    heading: string;
+    /**
+     * The t-shirt size of the header.
+     * @default "lg"
+     */
+    size?: "md" | "lg";
+    /**
+     * The contents of the header. At a minimum, this should include a description
+     * wrapped in a `<p>` element.
+     */
+    children: ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist/components/PageHeader/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAEZ,KAAK,aAAa,EAElB,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAuBf,eAAO,MAAM,UAAU;UAjBf,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC9C;;OAEG;aACM,MAAM;IACf;;;OAGG;WACI,IAAI,GAAG,IAAI;IAClB;;;OAGG;cACO,SAAS;+EAgCpB,CAAC"}