@vector-im/compound-web 9.0.1 → 9.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.module.js","names":[],"sources":["../../../src/components/Progress/Progress.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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\n.progress-bar {\n  position: relative;\n  background-color: var(--cpd-color-gray-200);\n  border: 1px solid var(--cpd-color-gray-400);\n  border-radius: var(--cpd-radius-pill-effect);\n  overflow: hidden;\n\n  &[data-size=\"sm\"] {\n    block-size: var(--cpd-space-2x);\n  }\n\n  &[data-size=\"lg\"] {\n    block-size: var(--cpd-space-4x);\n  }\n}\n\n.progress-bar-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-1x);\n\n  --cpd-progress-bar-main: var(--cpd-color-text-secondary);\n  --cpd-progress-bar-muted: var(--cpd-color-gray-800);\n\n  &[data-tint=\"green\"] {\n    --cpd-progress-bar-main: var(--cpd-color-text-success-primary);\n    --cpd-progress-bar-muted: var(--cpd-color-green-800);\n  }\n\n  &[data-tint=\"lime\"] {\n    --cpd-progress-bar-main: var(--cpd-color-lime-900);\n    --cpd-progress-bar-muted: var(--cpd-color-lime-800);\n  }\n\n  &[data-tint=\"orange\"] {\n    --cpd-progress-bar-main: var(--cpd-color-orange-900);\n    --cpd-progress-bar-muted: var(--cpd-color-orange-800);\n  }\n\n  &[data-tint=\"red\"] {\n    --cpd-progress-bar-main: var(--cpd-color-text-critical-primary);\n    --cpd-progress-bar-muted: var(--cpd-color-red-800);\n  }\n}\n\n.progress-bar-label {\n  font: var(--cpd-font-body-sm-medium);\n  letter-spacing: var(--cpd-font-letter-spacing-body-sm);\n  color: var(--cpd-progress-bar-main);\n}\n\n.progress-bar-indicator {\n  position: absolute;\n  inset: 0;\n  transition: transform 0.2s ease-in-out;\n  background-image: linear-gradient(\n    135deg,\n    var(--cpd-progress-bar-muted) 0%,\n    var(--cpd-progress-bar-muted) 25%,\n    var(--cpd-progress-bar-main) 25%,\n    var(--cpd-progress-bar-main) 50%,\n    var(--cpd-progress-bar-muted) 50%,\n    var(--cpd-progress-bar-muted) 75%,\n    var(--cpd-progress-bar-main) 75%,\n    var(--cpd-progress-bar-main) 100%,\n    var(--cpd-progress-bar-muted) 100%\n  );\n\n  /* sqrt(number of stripes * 2 * (stripe width)^2) = sqrt(4 * 2 * 2^2) = sqrt(32) */\n  background-size: 5.6569px 5.6569px;\n}\n\n@media (forced-colors: active) {\n  .progress-bar-indicator {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Progress.module.js","names":[],"sources":["../../../src/components/Progress/Progress.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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\n.progress-bar {\n  position: relative;\n  background-color: var(--cpd-color-gray-200);\n  border: 1px solid var(--cpd-color-gray-400);\n  border-radius: var(--cpd-radius-pill-effect);\n  overflow: hidden;\n\n  &[data-size=\"sm\"] {\n    block-size: var(--cpd-space-2x);\n  }\n\n  &[data-size=\"lg\"] {\n    block-size: var(--cpd-space-4x);\n  }\n}\n\n.progress-bar-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-1x);\n\n  --cpd-progress-bar-main: var(--cpd-color-text-secondary);\n  --cpd-progress-bar-muted: var(--cpd-color-gray-800);\n\n  &[data-tint=\"green\"] {\n    --cpd-progress-bar-main: var(--cpd-color-text-success-primary);\n    --cpd-progress-bar-muted: var(--cpd-color-green-800);\n  }\n\n  &[data-tint=\"lime\"] {\n    --cpd-progress-bar-main: var(--cpd-color-lime-900);\n    --cpd-progress-bar-muted: var(--cpd-color-lime-800);\n  }\n\n  &[data-tint=\"orange\"] {\n    --cpd-progress-bar-main: var(--cpd-color-orange-900);\n    --cpd-progress-bar-muted: var(--cpd-color-orange-800);\n  }\n\n  &[data-tint=\"red\"] {\n    --cpd-progress-bar-main: var(--cpd-color-text-critical-primary);\n    --cpd-progress-bar-muted: var(--cpd-color-red-800);\n  }\n}\n\n.progress-bar-label {\n  font: var(--cpd-font-body-sm-medium);\n  letter-spacing: var(--cpd-font-letter-spacing-body-sm);\n  color: var(--cpd-progress-bar-main);\n}\n\n.progress-bar-indicator {\n  position: absolute;\n  inset: 0;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: transform 0.2s ease-in-out;\n  }\n\n  background-image: linear-gradient(\n    135deg,\n    var(--cpd-progress-bar-muted) 0%,\n    var(--cpd-progress-bar-muted) 25%,\n    var(--cpd-progress-bar-main) 25%,\n    var(--cpd-progress-bar-main) 50%,\n    var(--cpd-progress-bar-muted) 50%,\n    var(--cpd-progress-bar-muted) 75%,\n    var(--cpd-progress-bar-main) 75%,\n    var(--cpd-progress-bar-main) 100%,\n    var(--cpd-progress-bar-muted) 100%\n  );\n\n  /* sqrt(number of stripes * 2 * (stripe width)^2) = sqrt(4 * 2 * 2^2) = sqrt(32) */\n  background-size: 5.6569px 5.6569px;\n}\n\n@media (forced-colors: active) {\n  .progress-bar-indicator {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.cjs

@@ -5,7 +5,7 @@ const require_ReleaseAnnouncement_module = require("./ReleaseAnnouncement.module
 const require_useReleaseAnnouncement = require("./useReleaseAnnouncement.cjs");
 const require_ReleaseAnnouncementContext = require("./ReleaseAnnouncementContext.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _floating_ui_react = require("@floating-ui/react");
 //#region src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx

package/dist/components/Search/Search.cjs

@@ -3,12 +3,12 @@ const require_Label = require("../Form/Label.cjs");
 const require_Field = require("../Form/Field.cjs");
 const require_Search_module = require("./Search.module.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _vector_im_compound_design_tokens_assets_web_icons_search = require("@vector-im/compound-design-tokens/assets/web/icons/search");
-_vector_im_compound_design_tokens_assets_web_icons_search = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_search);
+_vector_im_compound_design_tokens_assets_web_icons_search = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_search, 1);
 //#region src/components/Search/Search.tsx
 /**
 * A standalone search component

package/dist/components/Search/Search.module.cjs

@@ -1,7 +1,7 @@
 var Search_module_default = {
-	search: "_search_b2pjl_8",
-	icon: "_icon_b2pjl_37",
-	input: "_input_b2pjl_52"
+	search: "_search_1lktl_8",
+	icon: "_icon_1lktl_37",
+	input: "_input_1lktl_52"
 };
 //#endregion
 exports.default = Search_module_default;

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

@@ -1 +1 @@
-{"version":3,"file":"Search.module.cjs","names":[],"sources":["../../../src/components/Search/Search.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\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\n.search {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n  border-radius: 9999px;\n  block-size: 36px;\n  box-sizing: border-box;\n  color: var(--cpd-color-text-primary);\n  display: flex;\n\n  /* !important to override Field's default flex settings */\n  flex-direction: row !important;\n  gap: var(--cpd-space-2x) !important;\n  align-items: center;\n  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);\n}\n\n@media (hover) {\n  .search:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n  }\n}\n\n.search:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.search:focus-within {\n  border-color: currentcolor;\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  flex-shrink: 0;\n}\n\n@media (hover) {\n  .search:hover .icon {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.search:active .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.input {\n  border: 0;\n  background: inherit;\n  outline: 0;\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.input::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n.input:focus::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n@media (hover) {\n  .search:hover .input::placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Search.module.cjs","names":[],"sources":["../../../src/components/Search/Search.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\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\n.search {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n  border-radius: 9999px;\n  block-size: 36px;\n  box-sizing: border-box;\n  color: var(--cpd-color-text-primary);\n  display: flex;\n\n  /* !important to override Field's default flex settings */\n  flex-direction: row !important;\n  gap: var(--cpd-space-2x) !important;\n  align-items: center;\n  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);\n}\n\n@media (hover) {\n  .search:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n  }\n}\n\n.search:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.search:focus-within {\n  border-color: currentcolor;\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  flex-shrink: 0;\n}\n\n@media (hover) {\n  .search:hover .icon {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.search:active .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.input {\n  border: 0;\n  background: inherit;\n  outline: 0;\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.input::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n/* stylelint-disable-next-line defensive-css/require-focus-visible */\n.input:focus::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n@media (hover) {\n  .search:hover .input::placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n}\n"],"mappings":""}

package/dist/components/Search/Search.module.js

@@ -1,7 +1,7 @@
 var Search_module_default = {
-	search: "_search_b2pjl_8",
-	icon: "_icon_b2pjl_37",
-	input: "_input_b2pjl_52"
+	search: "_search_1lktl_8",
+	icon: "_icon_1lktl_37",
+	input: "_input_1lktl_52"
 };
 //#endregion
 export { Search_module_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Search.module.js","names":[],"sources":["../../../src/components/Search/Search.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\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\n.search {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n  border-radius: 9999px;\n  block-size: 36px;\n  box-sizing: border-box;\n  color: var(--cpd-color-text-primary);\n  display: flex;\n\n  /* !important to override Field's default flex settings */\n  flex-direction: row !important;\n  gap: var(--cpd-space-2x) !important;\n  align-items: center;\n  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);\n}\n\n@media (hover) {\n  .search:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n  }\n}\n\n.search:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.search:focus-within {\n  border-color: currentcolor;\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  flex-shrink: 0;\n}\n\n@media (hover) {\n  .search:hover .icon {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.search:active .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.input {\n  border: 0;\n  background: inherit;\n  outline: 0;\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.input::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n.input:focus::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n@media (hover) {\n  .search:hover .input::placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Search.module.js","names":[],"sources":["../../../src/components/Search/Search.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\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\n.search {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n  border-radius: 9999px;\n  block-size: 36px;\n  box-sizing: border-box;\n  color: var(--cpd-color-text-primary);\n  display: flex;\n\n  /* !important to override Field's default flex settings */\n  flex-direction: row !important;\n  gap: var(--cpd-space-2x) !important;\n  align-items: center;\n  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);\n}\n\n@media (hover) {\n  .search:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n  }\n}\n\n.search:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.search:focus-within {\n  border-color: currentcolor;\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  flex-shrink: 0;\n}\n\n@media (hover) {\n  .search:hover .icon {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.search:active .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.input {\n  border: 0;\n  background: inherit;\n  outline: 0;\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.input::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n/* stylelint-disable-next-line defensive-css/require-focus-visible */\n.input:focus::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n@media (hover) {\n  .search:hover .input::placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n}\n"],"mappings":""}

package/dist/components/Separator/Separator.cjs

@@ -1,13 +1,13 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Separator_module = require("./Separator.module.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _floating_ui_react = require("@floating-ui/react");
 let _radix_ui_react_separator = require("@radix-ui/react-separator");
-_radix_ui_react_separator = require_runtime.__toESM(_radix_ui_react_separator);
+_radix_ui_react_separator = require_runtime.__toESM(_radix_ui_react_separator, 1);
 //#region src/components/Separator/Separator.tsx
 var SPACING_CUSTOM_PROP = "--cpd-separator-spacing";
 /**

package/dist/components/Toast/Toast.cjs

@@ -1,18 +1,43 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Text = require("../Typography/Text.cjs");
+const require_IconButton = require("../Button/IconButton/IconButton.cjs");
 const require_Toast_module = require("./Toast.module.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
+let _vector_im_compound_design_tokens_assets_web_icons_close = require("@vector-im/compound-design-tokens/assets/web/icons/close");
+_vector_im_compound_design_tokens_assets_web_icons_close = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_close, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Toast/Toast.tsx
-var Toast = (0, react.forwardRef)(function Toast({ children, className, ...props }, ref) {
-	const classes = (0, classnames.default)(require_Toast_module.default["toast-container"], className);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+var Toast = (0, react.forwardRef)(function Toast({ children, className, Icon, onClose, tooltip, ...props }, ref) {
+	const hasCloseButton = Boolean(onClose);
+	const classes = (0, classnames.default)(require_Toast_module.default["toast-container"], className, { [require_Toast_module.default["has-close"]]: hasCloseButton });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
 		...props,
+		as: "div",
+		size: "sm",
+		weight: "medium",
 		className: classes,
 		ref,
-		children
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_Toast_module.default.content,
+			children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				className: require_Toast_module.default.icon,
+				width: 20,
+				height: 20,
+				"aria-hidden": true
+			}), children]
+		}), hasCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+			size: "24px",
+			kind: "secondary",
+			noBackground: true,
+			tooltip,
+			tooltipPlacement: "right",
+			className: require_Toast_module.default.close,
+			onClick: onClose,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_close.default, {})
+		})]
 	});
 });
 //#endregion

package/dist/components/Toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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 classnames from \"classnames\";\nimport React, { forwardRef, type PropsWithChildren } from \"react\";\nimport styles from \"./Toast.module.css\";\n\ntype ToastProps = {\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { children, className, ...props }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const classes = classnames(styles[\"toast-container\"], className);\n  return (\n    <div {...props} className={classes} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AAeA,IAAa,SAAA,GAAA,MAAA,YAA+C,SAAS,MACnE,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,WAAA,GAAA,WAAA,SAAqB,qBAAA,QAAO,oBAAoB,UAAU;AAChE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAO,WAAW;EAAc;EACtC;EACG,CAAA;EAER"}
+{"version":3,"file":"Toast.cjs","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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 classnames from \"classnames\";\nimport React, {\n  forwardRef,\n  type ComponentType,\n  type MouseEventHandler,\n  type PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toast.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport { IconButton } from \"../Button\";\nimport CloseIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\ntype ToastProps = {\n  className?: string;\n  /**\n   * An icon to display within the button.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n  /**\n   * Whether to show the action button. If true, an action button will be shown on the right side of the toast.\n   */\n  onClose?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to show on the close button. This is only used if `onClose` is provided.\n   */\n  tooltip?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  {\n    children,\n    className,\n    Icon,\n    onClose,\n    tooltip,\n    ...props\n  }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const hasCloseButton = Boolean(onClose);\n\n  const classes = classnames(styles[\"toast-container\"], className, {\n    [styles[\"has-close\"]]: hasCloseButton,\n  });\n\n  return (\n    <Text\n      {...props}\n      as=\"div\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      ref={ref}\n    >\n      <div className={styles.content}>\n        {Icon && (\n          <Icon\n            className={styles.icon}\n            width={20}\n            height={20}\n            aria-hidden={true}\n          />\n        )}\n        {children}\n      </div>\n      {hasCloseButton && (\n        <IconButton\n          size=\"24px\"\n          kind=\"secondary\"\n          noBackground={true}\n          tooltip={tooltip}\n          tooltipPlacement=\"right\"\n          className={styles.close}\n          onClick={onClose}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Text>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAmCA,IAAa,SAAA,GAAA,MAAA,YAA+C,SAAS,MACnE,EACE,UACA,WACA,MACA,SACA,SACA,GAAG,SAEL,KACA;CACA,MAAM,iBAAiB,QAAQ,QAAQ;CAEvC,MAAM,WAAA,GAAA,WAAA,SAAqB,qBAAA,QAAO,oBAAoB,WAAW,GAC9D,qBAAA,QAAO,eAAe,gBACxB,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,aAAA,MAAD;EACE,GAAI;EACJ,IAAG;EACH,MAAK;EACL,QAAO;EACP,WAAW;EACN;YANP,CAQE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAW,qBAAA,QAAO;aAAvB,CACG,QACC,iBAAA,GAAA,kBAAA,KAAC,MAAD;IACE,WAAW,qBAAA,QAAO;IAClB,OAAO;IACP,QAAQ;IACR,eAAa;IACb,CAAA,EAEH,SACG;MACL,kBACC,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;GACE,MAAK;GACL,MAAK;GACL,cAAc;GACL;GACT,kBAAiB;GACjB,WAAW,qBAAA,QAAO;GAClB,SAAS;aAET,iBAAA,GAAA,kBAAA,KAAC,yDAAA,SAAD,EAAa,CAAA;GACF,CAAA,CAEV;;EAET"}

package/dist/components/Toast/Toast.d.ts

@@ -1,5 +1,17 @@
-import { default as React } from 'react';
+import { default as React, ComponentType, MouseEventHandler } from 'react';
 export declare const Toast: React.ForwardRefExoticComponent<{
     className?: string;
+    /**
+     * An icon to display within the button.
+     */
+    Icon?: ComponentType<React.SVGAttributes<SVGElement>>;
+    /**
+     * Whether to show the action button. If true, an action button will be shown on the right side of the toast.
+     */
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The tooltip to show on the close button. This is only used if `onClose` is provided.
+     */
+    tooltip?: string;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Toast.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAOlE,eAAO,MAAM,KAAK;gBAHJ,MAAM;+EAalB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAEZ,KAAK,aAAa,EAClB,KAAK,iBAAiB,EAEvB,MAAM,OAAO,CAAC;AAsBf,eAAO,MAAM,KAAK;gBAfJ,MAAM;IAClB;;OAEG;WACI,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACrD;;OAEG;cACO,iBAAiB,CAAC,iBAAiB,CAAC;IAC9C;;OAEG;cACO,MAAM;+EAuDhB,CAAC"}

package/dist/components/Toast/Toast.js

@@ -1,15 +1,39 @@
+import { Text } from "../Typography/Text.js";
+import { IconButton } from "../Button/IconButton/IconButton.js";
 import Toast_module_default from "./Toast.module.js";
 import classNames from "classnames";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Toast/Toast.tsx
-var Toast = forwardRef(function Toast({ children, className, ...props }, ref) {
-	const classes = classNames(Toast_module_default["toast-container"], className);
-	return /* @__PURE__ */ jsx("div", {
+var Toast = forwardRef(function Toast({ children, className, Icon, onClose, tooltip, ...props }, ref) {
+	const hasCloseButton = Boolean(onClose);
+	const classes = classNames(Toast_module_default["toast-container"], className, { [Toast_module_default["has-close"]]: hasCloseButton });
+	return /* @__PURE__ */ jsxs(Text, {
 		...props,
+		as: "div",
+		size: "sm",
+		weight: "medium",
 		className: classes,
 		ref,
-		children
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: Toast_module_default.content,
+			children: [Icon && /* @__PURE__ */ jsx(Icon, {
+				className: Toast_module_default.icon,
+				width: 20,
+				height: 20,
+				"aria-hidden": true
+			}), children]
+		}), hasCloseButton && /* @__PURE__ */ jsx(IconButton, {
+			size: "24px",
+			kind: "secondary",
+			noBackground: true,
+			tooltip,
+			tooltipPlacement: "right",
+			className: Toast_module_default.close,
+			onClick: onClose,
+			children: /* @__PURE__ */ jsx(CloseIcon, {})
+		})]
 	});
 });
 //#endregion

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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 classnames from \"classnames\";\nimport React, { forwardRef, type PropsWithChildren } from \"react\";\nimport styles from \"./Toast.module.css\";\n\ntype ToastProps = {\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { children, className, ...props }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const classes = classnames(styles[\"toast-container\"], className);\n  return (\n    <div {...props} className={classes} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;AAeA,IAAa,QAAQ,WAAuC,SAAS,MACnE,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,UAAU,WAAW,qBAAO,oBAAoB,UAAU;AAChE,QACE,oBAAC,OAAD;EAAK,GAAI;EAAO,WAAW;EAAc;EACtC;EACG,CAAA;EAER"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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 classnames from \"classnames\";\nimport React, {\n  forwardRef,\n  type ComponentType,\n  type MouseEventHandler,\n  type PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toast.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport { IconButton } from \"../Button\";\nimport CloseIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\ntype ToastProps = {\n  className?: string;\n  /**\n   * An icon to display within the button.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n  /**\n   * Whether to show the action button. If true, an action button will be shown on the right side of the toast.\n   */\n  onClose?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to show on the close button. This is only used if `onClose` is provided.\n   */\n  tooltip?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  {\n    children,\n    className,\n    Icon,\n    onClose,\n    tooltip,\n    ...props\n  }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const hasCloseButton = Boolean(onClose);\n\n  const classes = classnames(styles[\"toast-container\"], className, {\n    [styles[\"has-close\"]]: hasCloseButton,\n  });\n\n  return (\n    <Text\n      {...props}\n      as=\"div\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      ref={ref}\n    >\n      <div className={styles.content}>\n        {Icon && (\n          <Icon\n            className={styles.icon}\n            width={20}\n            height={20}\n            aria-hidden={true}\n          />\n        )}\n        {children}\n      </div>\n      {hasCloseButton && (\n        <IconButton\n          size=\"24px\"\n          kind=\"secondary\"\n          noBackground={true}\n          tooltip={tooltip}\n          tooltipPlacement=\"right\"\n          className={styles.close}\n          onClick={onClose}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Text>\n  );\n});\n"],"mappings":";;;;;;;;AAmCA,IAAa,QAAQ,WAAuC,SAAS,MACnE,EACE,UACA,WACA,MACA,SACA,SACA,GAAG,SAEL,KACA;CACA,MAAM,iBAAiB,QAAQ,QAAQ;CAEvC,MAAM,UAAU,WAAW,qBAAO,oBAAoB,WAAW,GAC9D,qBAAO,eAAe,gBACxB,CAAC;AAEF,QACE,qBAAC,MAAD;EACE,GAAI;EACJ,IAAG;EACH,MAAK;EACL,QAAO;EACP,WAAW;EACN;YANP,CAQE,qBAAC,OAAD;GAAK,WAAW,qBAAO;aAAvB,CACG,QACC,oBAAC,MAAD;IACE,WAAW,qBAAO;IAClB,OAAO;IACP,QAAQ;IACR,eAAa;IACb,CAAA,EAEH,SACG;MACL,kBACC,oBAAC,YAAD;GACE,MAAK;GACL,MAAK;GACL,cAAc;GACL;GACT,kBAAiB;GACjB,WAAW,qBAAO;GAClB,SAAS;aAET,oBAAC,WAAD,EAAa,CAAA;GACF,CAAA,CAEV;;EAET"}

package/dist/components/Toast/Toast.module.cjs

@@ -1,5 +1,10 @@
-//#region src/components/Toast/Toast.module.css
-var Toast_module_default = { "toast-container": "_toast-container_1xofk_8" };
+var Toast_module_default = {
+	"toast-container": "_toast-container_1ysb3_8",
+	icon: "_icon_1ysb3_26",
+	"has-close": "_has-close_1ysb3_30",
+	content: "_content_1ysb3_34",
+	close: "_close_1ysb3_41"
+};
 //#endregion
 exports.default = Toast_module_default;
 

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.module.cjs","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-alpha-gray-1300);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  font-size: var(--cpd-font-body-sm-medium);\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Toast.module.cjs","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-bg-action-primary-rest);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--cpd-space-2x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n\n.icon {\n  flex-shrink: 0;\n}\n\n.has-close {\n  gap: var(--cpd-space-3x);\n}\n\n.content {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: flex-start;\n  gap: var(--cpd-space-2x);\n}\n\n.close {\n  align-self: flex-start;\n  padding: var(--cpd-space-0-5x) !important;\n\n  &:not(:hover, :focus-visible) {\n    * {\n      /* Override default color of icon button. The container background is different than the default canvas color */\n      color: var(--cpd-color-icon-on-solid-primary) !important;\n    }\n  }\n}\n"],"mappings":""}

package/dist/components/Toast/Toast.module.js

@@ -1,5 +1,10 @@
-//#region src/components/Toast/Toast.module.css
-var Toast_module_default = { "toast-container": "_toast-container_1xofk_8" };
+var Toast_module_default = {
+	"toast-container": "_toast-container_1ysb3_8",
+	icon: "_icon_1ysb3_26",
+	"has-close": "_has-close_1ysb3_30",
+	content: "_content_1ysb3_34",
+	close: "_close_1ysb3_41"
+};
 //#endregion
 export { Toast_module_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.module.js","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-alpha-gray-1300);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  font-size: var(--cpd-font-body-sm-medium);\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Toast.module.js","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\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\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-bg-action-primary-rest);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--cpd-space-2x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n\n.icon {\n  flex-shrink: 0;\n}\n\n.has-close {\n  gap: var(--cpd-space-3x);\n}\n\n.content {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: flex-start;\n  gap: var(--cpd-space-2x);\n}\n\n.close {\n  align-self: flex-start;\n  padding: var(--cpd-space-0-5x) !important;\n\n  &:not(:hover, :focus-visible) {\n    * {\n      /* Override default color of icon button. The container background is different than the default canvas color */\n      color: var(--cpd-color-icon-on-solid-primary) !important;\n    }\n  }\n}\n"],"mappings":""}

package/dist/components/Tooltip/Tooltip.cjs

@@ -3,9 +3,9 @@ const require_useTooltip = require("./useTooltip.cjs");
 const require_TooltipContext = require("./TooltipContext.cjs");
 const require_Tooltip_module = require("./Tooltip.module.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _floating_ui_react = require("@floating-ui/react");
 //#region src/components/Tooltip/Tooltip.tsx

package/dist/components/Tooltip/TooltipProvider.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _floating_ui_react = require("@floating-ui/react");
 //#region src/components/Tooltip/TooltipProvider.tsx

package/dist/components/Typography/Body.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Text = require("./Text.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Typography/Body.tsx
 /**

package/dist/components/Typography/Heading.cjs

@@ -2,7 +2,7 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Typography = require("./Typography.cjs");
 const require_Text = require("./Text.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Typography/Heading.tsx
 /**

package/dist/components/Typography/Text.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Typography = require("./Typography.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Typography/Text.tsx
 /**

package/dist/components/Typography/Typography.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Typography_module = require("./Typography.module.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Typography/Typography.tsx
 var Typography = ({ as, children, type = "body", weight = "regular", size = "md", className, ...restProps }) => {

package/dist/components/Typography/Typography.module.cjs

@@ -1,5 +1,3 @@
-//#region src/components/Typography/Typography.module.css
-var typography = "_typography_6v6n8_153";
 var Typography_module_default = {
 	"font-body-xs-regular": "_font-body-xs-regular_6v6n8_12",
 	"font-body-xs-semibold": "_font-body-xs-semibold_6v6n8_17",
@@ -22,7 +20,7 @@ var Typography_module_default = {
 	"font-heading-lg-semibold": "_font-heading-lg-semibold_6v6n8_126",
 	"font-heading-xl-regular": "_font-heading-xl-regular_6v6n8_135",
 	"font-heading-xl-semibold": "_font-heading-xl-semibold_6v6n8_140",
-	typography
+	typography: "_typography_6v6n8_153"
 };
 //#endregion
 exports.default = Typography_module_default;

package/dist/components/Typography/Typography.module.js

@@ -1,5 +1,3 @@
-//#region src/components/Typography/Typography.module.css
-var typography = "_typography_6v6n8_153";
 var Typography_module_default = {
 	"font-body-xs-regular": "_font-body-xs-regular_6v6n8_12",
 	"font-body-xs-semibold": "_font-body-xs-semibold_6v6n8_17",
@@ -22,7 +20,7 @@ var Typography_module_default = {
 	"font-heading-lg-semibold": "_font-heading-lg-semibold_6v6n8_126",
 	"font-heading-xl-regular": "_font-heading-xl-regular_6v6n8_135",
 	"font-heading-xl-semibold": "_font-heading-xl-semibold_6v6n8_140",
-	typography
+	typography: "_typography_6v6n8_153"
 };
 //#endregion
 export { Typography_module_default as default };

package/dist/components/VisualList/VisualList.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_VisualList_module = require("./VisualList.module.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/VisualList/VisualList.tsx
 /**

package/dist/components/VisualList/VisualListItem.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_VisualListItem_module = require("./VisualListItem.module.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/VisualList/VisualListItem.tsx
 /**

package/dist/index.cjs

@@ -23,6 +23,7 @@ const require_NavBar = require("./components/Nav/NavBar.cjs");
 const require_NavItem = require("./components/Nav/NavItem.cjs");
 const require_Menu = require("./components/Menu/Menu.cjs");
 const require_MenuItem = require("./components/Menu/MenuItem.cjs");
+const require_SubMenu = require("./components/Menu/SubMenu.cjs");
 const require_Text$1 = require("./components/Form/Controls/Text/Text.cjs");
 const require_Action = require("./components/Form/Controls/Action/Action.cjs");
 const require_Password = require("./components/Form/Controls/Password/Password.cjs");
@@ -56,6 +57,7 @@ const require_ChatFilter = require("./components/ChatFilter/ChatFilter.cjs");
 const require_UnreadCounter = require("./components/ActivityMarker/UnreadCounter.cjs");
 const require_Pill = require("./components/ActivityMarker/Pill.cjs");
 const require_Unread = require("./components/ActivityMarker/Unread.cjs");
+const require_PageHeader = require("./components/PageHeader/PageHeader.cjs");
 ;/* empty css                */
 let _radix_ui_react_form = require("@radix-ui/react-form");
 exports.ActionControl = require_Action.ActionControl;
@@ -113,6 +115,7 @@ Object.defineProperty(exports, "Message", {
 });
 exports.NavBar = require_NavBar.NavBar;
 exports.NavItem = require_NavItem.NavItem;
+exports.PageHeader = require_PageHeader.PageHeader;
 exports.PasswordControl = require_Password.PasswordControl;
 exports.PasswordInput = require_Password.PasswordInput;
 exports.Pill = require_Pill.Pill;
@@ -127,6 +130,7 @@ exports.Search = require_Search.Search;
 exports.Separator = require_Separator.Separator;
 exports.SettingsToggleControl = require_SettingsToggle.SettingsToggleControl;
 exports.SettingsToggleInput = require_SettingsToggle.SettingsToggleInput;
+exports.SubMenu = require_SubMenu.SubMenu;
 exports.Submit = require_Submit.Submit;
 exports.Text = require_Text.Text;
 exports.TextControl = require_Text$1.TextControl;

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { NavBar, NavItem } from './components/Nav';
 export { Menu } from './components/Menu/Menu';
 export { MenuItem } from './components/Menu/MenuItem';
 export { MenuTitle } from './components/Menu/MenuTitle';
+export { SubMenu } from './components/Menu/SubMenu';
 export { RadioMenuItem } from './components/Menu/RadioMenuItem';
 export { Progress } from './components/Progress/Progress';
 export { Search } from './components/Search/Search';
@@ -34,6 +35,7 @@ export { Breadcrumb } from './components/Breadcrumb';
 export { VisualList, VisualListItem } from './components/VisualList';
 export { ChatFilter } from './components/ChatFilter';
 export { UnreadCounter, Pill, Unread } from './components/ActivityMarker';
+export { PageHeader } from './components/PageHeader/PageHeader';
 export { TextControl, TextControl as Control, TextInput, ActionControl, ActionInput, PasswordControl, PasswordInput, MFAControl, MFAInput, CheckboxControl, CheckboxInput, CheckboxInput as Checkbox, RadioControl, RadioInput, RadioInput as Radio, ToggleControl, ToggleInput, ToggleInput as Toggle, Root, Submit, Message, ErrorMessage, HelpMessage, ValidityState, Field, InlineField, Label, EditInPlace, SettingsToggleInput, SettingsToggleControl, } from './components/Form';
 export * as Form from './components/Form';
 /**

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -21,6 +21,7 @@ import { NavBar } from "./components/Nav/NavBar.js";
 import { NavItem } from "./components/Nav/NavItem.js";
 import { Menu } from "./components/Menu/Menu.js";
 import { MenuItem } from "./components/Menu/MenuItem.js";
+import { SubMenu } from "./components/Menu/SubMenu.js";
 import { TextControl, TextInput } from "./components/Form/Controls/Text/Text.js";
 import { ActionControl, ActionInput } from "./components/Form/Controls/Action/Action.js";
 import { PasswordControl, PasswordInput } from "./components/Form/Controls/Password/Password.js";
@@ -54,5 +55,6 @@ import { ChatFilter } from "./components/ChatFilter/ChatFilter.js";
 import { UnreadCounter } from "./components/ActivityMarker/UnreadCounter.js";
 import { Pill } from "./components/ActivityMarker/Pill.js";
 import { Unread } from "./components/ActivityMarker/Unread.js";
+import { PageHeader } from "./components/PageHeader/PageHeader.js";
 /* empty css              */
-export { ActionControl, ActionInput, Alert, Avatar, AvatarStack, Badge, BigIcon, Body, Breadcrumb, Button, ChatFilter, CheckboxInput as Checkbox, CheckboxControl, CheckboxInput, CheckboxMenuItem, ContextMenu, TextControl as Control, Dropdown, EditInPlace, ErrorMessage, Field, Form_exports as Form, Glass, H1, H2, H3, H4, H5, H6, Heading, HelpMessage, IconButton, IndicatorIcon, InlineField, InlineSpinner, Label, Link, MFAControl, MFAInput, Menu, MenuItem, MenuTitle, Message, NavBar, NavItem, PasswordControl, PasswordInput, Pill, Progress, RadioInput as Radio, RadioControl, RadioInput, RadioMenuItem, ReleaseAnnouncement, Root, Search, Separator, SettingsToggleControl, SettingsToggleInput, Submit, Text, TextControl, TextInput, Toast, ToggleInput as Toggle, ToggleControl, ToggleInput, ToggleMenuItem, Tooltip, TooltipProvider, Unread, UnreadCounter, ValidityState, VisualList, VisualListItem, getInitialLetter, useIdColorHash };
+export { ActionControl, ActionInput, Alert, Avatar, AvatarStack, Badge, BigIcon, Body, Breadcrumb, Button, ChatFilter, CheckboxInput as Checkbox, CheckboxControl, CheckboxInput, CheckboxMenuItem, ContextMenu, TextControl as Control, Dropdown, EditInPlace, ErrorMessage, Field, Form_exports as Form, Glass, H1, H2, H3, H4, H5, H6, Heading, HelpMessage, IconButton, IndicatorIcon, InlineField, InlineSpinner, Label, Link, MFAControl, MFAInput, Menu, MenuItem, MenuTitle, Message, NavBar, NavItem, PageHeader, PasswordControl, PasswordInput, Pill, Progress, RadioInput as Radio, RadioControl, RadioInput, RadioMenuItem, ReleaseAnnouncement, Root, Search, Separator, SettingsToggleControl, SettingsToggleInput, SubMenu, Submit, Text, TextControl, TextInput, Toast, ToggleInput as Toggle, ToggleControl, ToggleInput, ToggleMenuItem, Tooltip, TooltipProvider, Unread, UnreadCounter, ValidityState, VisualList, VisualListItem, getInitialLetter, useIdColorHash };