@vector-im/compound-web 9.0.1 → 9.1.0

package/dist/components/Menu/MenuContext.d.ts

@@ -8,11 +8,33 @@ export interface MenuItemWrapperProps {
     onSelect: (e: Event) => void;
     children: ReactNode;
 }
+export interface SubMenuWrapperProps {
+    /**
+     * The trigger element that opens the submenu (typically a MenuItem).
+     */
+    trigger: ReactNode;
+    /**
+     * The submenu contents.
+     */
+    children: ReactNode;
+    /**
+     * Whether the submenu is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the submenu changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+}
 export interface MenuData {
     /**
      * A component that wraps interactive menu items.
      */
     MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;
+    /**
+     * A component that wraps submenus.
+     */
+    SubMenuWrapper: ComponentType<SubMenuWrapperProps> | null;
     /**
      * Event handler called when the open state of the menu changes.
      */

package/dist/components/Menu/MenuContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;IAC5D;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,0CAAuC,CAAC"}
+{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;IAC5D;;OAEG;IACH,cAAc,EAAE,aAAa,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAC;IAC1D;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,0CAAuC,CAAC"}

package/dist/components/Menu/MenuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContext.js","names":[],"sources":["../../../src/components/Menu/MenuContext.tsx"],"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\nimport { type ComponentType, type ReactNode, createContext } from \"react\";\n\nexport interface MenuItemWrapperProps {\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  onSelect: (e: Event) => void;\n  children: ReactNode;\n}\n\nexport interface MenuData {\n  /**\n   * A component that wraps interactive menu items.\n   */\n  MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange: (open: boolean) => void;\n}\n\n/**\n * A React context providing information about the menu in which a given\n * component resides.\n */\nexport const MenuContext = createContext<MenuData | null>(null);\n"],"mappings":";;;;;;AAkCA,IAAa,cAAc,cAA+B,KAAK"}
+{"version":3,"file":"MenuContext.js","names":[],"sources":["../../../src/components/Menu/MenuContext.tsx"],"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\nimport { type ComponentType, type ReactNode, createContext } from \"react\";\n\nexport interface MenuItemWrapperProps {\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  onSelect: (e: Event) => void;\n  children: ReactNode;\n}\n\nexport interface SubMenuWrapperProps {\n  /**\n   * The trigger element that opens the submenu (typically a MenuItem).\n   */\n  trigger: ReactNode;\n  /**\n   * The submenu contents.\n   */\n  children: ReactNode;\n  /**\n   * Whether the submenu is open (controlled).\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the submenu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface MenuData {\n  /**\n   * A component that wraps interactive menu items.\n   */\n  MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;\n  /**\n   * A component that wraps submenus.\n   */\n  SubMenuWrapper: ComponentType<SubMenuWrapperProps> | null;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange: (open: boolean) => void;\n}\n\n/**\n * A React context providing information about the menu in which a given\n * component resides.\n */\nexport const MenuContext = createContext<MenuData | null>(null);\n"],"mappings":";;;;;;AAyDA,IAAa,cAAc,cAA+B,KAAK"}

package/dist/components/Menu/MenuItem.module.cjs

@@ -1,17 +1,17 @@
 //#region src/components/Menu/MenuItem.module.css
-var item = "_item_lqfwq_8";
-var interactive = "_interactive_lqfwq_26";
-var label = "_label_lqfwq_34";
-var icon = "_icon_lqfwq_50";
-var disabled = "_disabled_lqfwq_118";
+var item = "_item_bym9p_8";
+var interactive = "_interactive_bym9p_26";
+var label = "_label_bym9p_35";
+var icon = "_icon_bym9p_51";
+var disabled = "_disabled_bym9p_140";
 var MenuItem_module_default = {
 	item,
 	interactive,
-	"no-label": "_no-label_lqfwq_30",
+	"no-label": "_no-label_bym9p_31",
 	label,
-	"no-icon": "_no-icon_lqfwq_41",
+	"no-icon": "_no-icon_bym9p_42",
 	icon,
-	"nav-hint": "_nav-hint_lqfwq_59",
+	"nav-hint": "_nav-hint_bym9p_60",
 	disabled
 };
 //#endregion

package/dist/components/Menu/MenuItem.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.module.cjs","names":[],"sources":["../../../src/components/Menu/MenuItem.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.item {\n  display: grid;\n  grid-template: \"icon label .\" auto \"empty1 label empty2\" auto / auto auto minmax(\n      /* Reserve space for the chevron so that the layout doesn't shift on\n      hover */\n      var(--cpd-space-2x),\n      1fr\n    );\n  place-items: center end;\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-4x);\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-inline-size: 200px;\n  color: var(--cpd-color-text-secondary);\n  background: var(--cpd-color-bg-action-secondary-rest);\n}\n\n.item.interactive {\n  cursor: pointer;\n}\n\n.item.no-label {\n  grid-template: \"icon .\" auto / auto 1fr;\n}\n\n.label {\n  grid-area: label;\n  margin-inline-end: var(--cpd-space-4x);\n  text-align: start;\n  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */\n}\n\n.item.no-icon {\n  grid-template: \"label .\" auto / auto 1fr;\n\n  .label {\n    /* Without icon, the height changes when hovered */\n    min-block-size: 24px;\n  }\n}\n\n.icon {\n  grid-area: icon;\n  margin-inline-end: var(--cpd-space-3x);\n}\n\n.item.no-label .icon {\n  margin-inline-end: var(--cpd-space-4x);\n}\n\n.nav-hint {\n  /* Hidden until the item is hovered over */\n  display: none;\n  flex-shrink: 0;\n}\n\nbutton.item {\n  appearance: none;\n  border: none;\n}\n\n.item[data-kind=\"primary\"] > .label {\n  color: var(--cpd-color-text-primary);\n}\n\n.item[data-kind=\"primary\"] > .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.item[data-kind=\"primary\"] > .nav-hint {\n  color: var(--cpd-color-icon-tertiary);\n}\n\n.item[data-kind=\"critical\"] > .label {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.item[data-kind=\"critical\"] > .icon,\n.item[data-kind=\"critical\"] > .nav-hint {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n@media (hover) {\n  .item.interactive[data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-secondary-hovered);\n  }\n\n  .item.interactive[data-kind=\"critical\"]:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n\n  /* Replace the children with the navigation hint on hover */\n  .item.interactive:hover > .nav-hint {\n    display: initial;\n  }\n\n  .item.interactive:hover > .nav-hint ~ * {\n    display: none;\n  }\n}\n\n.item.interactive[data-kind=\"primary\"]:active {\n  background: var(--cpd-color-bg-action-secondary-pressed);\n}\n\n.item.interactive[data-kind=\"critical\"]:active {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.item[data-kind].disabled {\n  pointer-events: none;\n}\n\n.item[data-kind].disabled > .label,\n.item[data-kind].disabled > .icon,\n.item[data-kind].disabled > .nav-hint {\n  color: var(--cpd-color-text-disabled);\n}\n"],"mappings":""}
+{"version":3,"file":"MenuItem.module.cjs","names":[],"sources":["../../../src/components/Menu/MenuItem.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.item {\n  display: grid;\n  grid-template: \"icon label .\" auto \"empty1 label empty2\" auto / auto auto minmax(\n      /* Reserve space for the chevron so that the layout doesn't shift on\n      hover */\n      var(--cpd-space-2x),\n      1fr\n    );\n  place-items: center end;\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-4x);\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-inline-size: 200px;\n  color: var(--cpd-color-text-secondary);\n  background: var(--cpd-color-bg-action-secondary-rest);\n}\n\n.item.interactive,\n.item[data-state] {\n  cursor: pointer;\n}\n\n.item.no-label {\n  grid-template: \"icon .\" auto / auto 1fr;\n}\n\n.label {\n  grid-area: label;\n  margin-inline-end: var(--cpd-space-4x);\n  text-align: start;\n  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */\n}\n\n.item.no-icon {\n  grid-template: \"label .\" auto / auto 1fr;\n\n  .label {\n    /* Without icon, the height changes when hovered */\n    min-block-size: 24px;\n  }\n}\n\n.icon {\n  grid-area: icon;\n  margin-inline-end: var(--cpd-space-3x);\n}\n\n.item.no-label .icon {\n  margin-inline-end: var(--cpd-space-4x);\n}\n\n.nav-hint {\n  /* Hidden until the item is hovered over */\n  display: none;\n  flex-shrink: 0;\n}\n\nbutton.item {\n  appearance: none;\n  border: none;\n}\n\n.item[data-kind=\"primary\"] > .label {\n  color: var(--cpd-color-text-primary);\n}\n\n.item[data-kind=\"primary\"] > .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.item[data-kind=\"primary\"] > .nav-hint {\n  color: var(--cpd-color-icon-tertiary);\n}\n\n.item[data-kind=\"critical\"] > .label {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.item[data-kind=\"critical\"] > .icon,\n.item[data-kind=\"critical\"] > .nav-hint {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n/* Submenu triggers: always show the chevron and apply hover style when open */\n.item[data-state] > .nav-hint {\n  display: initial;\n}\n\n.item[data-state] > .nav-hint ~ * {\n  display: none;\n}\n\n.item[data-state=\"open\"][data-kind=\"primary\"] {\n  background: var(--cpd-color-bg-action-secondary-hovered);\n}\n\n.item[data-state=\"open\"][data-kind=\"critical\"] {\n  background: var(--cpd-color-bg-critical-subtle);\n}\n\n@media (hover) {\n  .item.interactive[data-kind=\"primary\"]:hover,\n  .item[data-state][data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-secondary-hovered);\n  }\n\n  .item.interactive[data-kind=\"critical\"]:hover,\n  .item[data-state][data-kind=\"critical\"]:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n\n  /* Replace the children with the navigation hint on hover */\n  .item.interactive:hover > .nav-hint {\n    display: initial;\n  }\n\n  .item.interactive:hover > .nav-hint ~ * {\n    display: none;\n  }\n}\n\n.item.interactive[data-kind=\"primary\"]:active,\n.item[data-state][data-kind=\"primary\"]:active {\n  background: var(--cpd-color-bg-action-secondary-pressed);\n}\n\n.item.interactive[data-kind=\"critical\"]:active,\n.item[data-state][data-kind=\"critical\"]:active {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.item[data-kind].disabled {\n  pointer-events: none;\n}\n\n.item[data-kind].disabled > .label,\n.item[data-kind].disabled > .icon,\n.item[data-kind].disabled > .nav-hint {\n  color: var(--cpd-color-text-disabled);\n}\n"],"mappings":""}

package/dist/components/Menu/MenuItem.module.js

@@ -1,17 +1,17 @@
 //#region src/components/Menu/MenuItem.module.css
-var item = "_item_lqfwq_8";
-var interactive = "_interactive_lqfwq_26";
-var label = "_label_lqfwq_34";
-var icon = "_icon_lqfwq_50";
-var disabled = "_disabled_lqfwq_118";
+var item = "_item_bym9p_8";
+var interactive = "_interactive_bym9p_26";
+var label = "_label_bym9p_35";
+var icon = "_icon_bym9p_51";
+var disabled = "_disabled_bym9p_140";
 var MenuItem_module_default = {
 	item,
 	interactive,
-	"no-label": "_no-label_lqfwq_30",
+	"no-label": "_no-label_bym9p_31",
 	label,
-	"no-icon": "_no-icon_lqfwq_41",
+	"no-icon": "_no-icon_bym9p_42",
 	icon,
-	"nav-hint": "_nav-hint_lqfwq_59",
+	"nav-hint": "_nav-hint_bym9p_60",
 	disabled
 };
 //#endregion

package/dist/components/Menu/MenuItem.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.module.js","names":[],"sources":["../../../src/components/Menu/MenuItem.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.item {\n  display: grid;\n  grid-template: \"icon label .\" auto \"empty1 label empty2\" auto / auto auto minmax(\n      /* Reserve space for the chevron so that the layout doesn't shift on\n      hover */\n      var(--cpd-space-2x),\n      1fr\n    );\n  place-items: center end;\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-4x);\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-inline-size: 200px;\n  color: var(--cpd-color-text-secondary);\n  background: var(--cpd-color-bg-action-secondary-rest);\n}\n\n.item.interactive {\n  cursor: pointer;\n}\n\n.item.no-label {\n  grid-template: \"icon .\" auto / auto 1fr;\n}\n\n.label {\n  grid-area: label;\n  margin-inline-end: var(--cpd-space-4x);\n  text-align: start;\n  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */\n}\n\n.item.no-icon {\n  grid-template: \"label .\" auto / auto 1fr;\n\n  .label {\n    /* Without icon, the height changes when hovered */\n    min-block-size: 24px;\n  }\n}\n\n.icon {\n  grid-area: icon;\n  margin-inline-end: var(--cpd-space-3x);\n}\n\n.item.no-label .icon {\n  margin-inline-end: var(--cpd-space-4x);\n}\n\n.nav-hint {\n  /* Hidden until the item is hovered over */\n  display: none;\n  flex-shrink: 0;\n}\n\nbutton.item {\n  appearance: none;\n  border: none;\n}\n\n.item[data-kind=\"primary\"] > .label {\n  color: var(--cpd-color-text-primary);\n}\n\n.item[data-kind=\"primary\"] > .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.item[data-kind=\"primary\"] > .nav-hint {\n  color: var(--cpd-color-icon-tertiary);\n}\n\n.item[data-kind=\"critical\"] > .label {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.item[data-kind=\"critical\"] > .icon,\n.item[data-kind=\"critical\"] > .nav-hint {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n@media (hover) {\n  .item.interactive[data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-secondary-hovered);\n  }\n\n  .item.interactive[data-kind=\"critical\"]:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n\n  /* Replace the children with the navigation hint on hover */\n  .item.interactive:hover > .nav-hint {\n    display: initial;\n  }\n\n  .item.interactive:hover > .nav-hint ~ * {\n    display: none;\n  }\n}\n\n.item.interactive[data-kind=\"primary\"]:active {\n  background: var(--cpd-color-bg-action-secondary-pressed);\n}\n\n.item.interactive[data-kind=\"critical\"]:active {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.item[data-kind].disabled {\n  pointer-events: none;\n}\n\n.item[data-kind].disabled > .label,\n.item[data-kind].disabled > .icon,\n.item[data-kind].disabled > .nav-hint {\n  color: var(--cpd-color-text-disabled);\n}\n"],"mappings":""}
+{"version":3,"file":"MenuItem.module.js","names":[],"sources":["../../../src/components/Menu/MenuItem.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.item {\n  display: grid;\n  grid-template: \"icon label .\" auto \"empty1 label empty2\" auto / auto auto minmax(\n      /* Reserve space for the chevron so that the layout doesn't shift on\n      hover */\n      var(--cpd-space-2x),\n      1fr\n    );\n  place-items: center end;\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-4x);\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-inline-size: 200px;\n  color: var(--cpd-color-text-secondary);\n  background: var(--cpd-color-bg-action-secondary-rest);\n}\n\n.item.interactive,\n.item[data-state] {\n  cursor: pointer;\n}\n\n.item.no-label {\n  grid-template: \"icon .\" auto / auto 1fr;\n}\n\n.label {\n  grid-area: label;\n  margin-inline-end: var(--cpd-space-4x);\n  text-align: start;\n  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */\n}\n\n.item.no-icon {\n  grid-template: \"label .\" auto / auto 1fr;\n\n  .label {\n    /* Without icon, the height changes when hovered */\n    min-block-size: 24px;\n  }\n}\n\n.icon {\n  grid-area: icon;\n  margin-inline-end: var(--cpd-space-3x);\n}\n\n.item.no-label .icon {\n  margin-inline-end: var(--cpd-space-4x);\n}\n\n.nav-hint {\n  /* Hidden until the item is hovered over */\n  display: none;\n  flex-shrink: 0;\n}\n\nbutton.item {\n  appearance: none;\n  border: none;\n}\n\n.item[data-kind=\"primary\"] > .label {\n  color: var(--cpd-color-text-primary);\n}\n\n.item[data-kind=\"primary\"] > .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.item[data-kind=\"primary\"] > .nav-hint {\n  color: var(--cpd-color-icon-tertiary);\n}\n\n.item[data-kind=\"critical\"] > .label {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.item[data-kind=\"critical\"] > .icon,\n.item[data-kind=\"critical\"] > .nav-hint {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n/* Submenu triggers: always show the chevron and apply hover style when open */\n.item[data-state] > .nav-hint {\n  display: initial;\n}\n\n.item[data-state] > .nav-hint ~ * {\n  display: none;\n}\n\n.item[data-state=\"open\"][data-kind=\"primary\"] {\n  background: var(--cpd-color-bg-action-secondary-hovered);\n}\n\n.item[data-state=\"open\"][data-kind=\"critical\"] {\n  background: var(--cpd-color-bg-critical-subtle);\n}\n\n@media (hover) {\n  .item.interactive[data-kind=\"primary\"]:hover,\n  .item[data-state][data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-secondary-hovered);\n  }\n\n  .item.interactive[data-kind=\"critical\"]:hover,\n  .item[data-state][data-kind=\"critical\"]:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n\n  /* Replace the children with the navigation hint on hover */\n  .item.interactive:hover > .nav-hint {\n    display: initial;\n  }\n\n  .item.interactive:hover > .nav-hint ~ * {\n    display: none;\n  }\n}\n\n.item.interactive[data-kind=\"primary\"]:active,\n.item[data-state][data-kind=\"primary\"]:active {\n  background: var(--cpd-color-bg-action-secondary-pressed);\n}\n\n.item.interactive[data-kind=\"critical\"]:active,\n.item[data-state][data-kind=\"critical\"]:active {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.item[data-kind].disabled {\n  pointer-events: none;\n}\n\n.item[data-kind].disabled > .label,\n.item[data-kind].disabled > .icon,\n.item[data-kind].disabled > .nav-hint {\n  color: var(--cpd-color-text-disabled);\n}\n"],"mappings":""}

package/dist/components/Menu/SubMenu.cjs

@@ -0,0 +1,24 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_MenuContext = require("./MenuContext.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Menu/SubMenu.tsx
+/**
+* A submenu within a Menu or ContextMenu. The trigger should be a MenuItem
+* component and the children are the submenu items.
+*/
+var SubMenu = ({ trigger, open, onOpenChange, children }) => {
+	const context = (0, react.useContext)(require_MenuContext.MenuContext);
+	if (context?.SubMenuWrapper == null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [trigger, children] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(context.SubMenuWrapper, {
+		trigger,
+		open,
+		onOpenChange,
+		children
+	});
+};
+//#endregion
+exports.SubMenu = SubMenu;
+
+//# sourceMappingURL=SubMenu.cjs.map

package/dist/components/Menu/SubMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.cjs","names":[],"sources":["../../../src/components/Menu/SubMenu.tsx"],"sourcesContent":["/*\nCopyright 2026 Element Creations 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 React, { type FC, type ReactNode, useContext } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\n\ninterface Props {\n  /**\n   * The trigger element that opens the submenu. This should be a MenuItem.\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the submenu is open (controlled).\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the submenu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The submenu contents (typically MenuItem elements).\n   */\n  children: ReactNode;\n}\n\n/**\n * A submenu within a Menu or ContextMenu. The trigger should be a MenuItem\n * component and the children are the submenu items.\n */\nexport const SubMenu: FC<Props> = ({\n  trigger,\n  open,\n  onOpenChange,\n  children,\n}) => {\n  const context = useContext(MenuContext);\n\n  // When there's no SubMenuWrapper (e.g. drawer on mobile), flatten the\n  // submenu items inline — nested flyouts don't work well in drawers.\n  if (context?.SubMenuWrapper == null) {\n    return (\n      <>\n        {trigger}\n        {children}\n      </>\n    );\n  }\n\n  return (\n    <context.SubMenuWrapper\n      trigger={trigger}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      {children}\n    </context.SubMenuWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;AAiCA,IAAa,WAAsB,EACjC,SACA,MACA,cACA,eACI;CACJ,MAAM,WAAA,GAAA,MAAA,YAAqB,oBAAA,YAAY;AAIvC,KAAI,SAAS,kBAAkB,KAC7B,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,SACA,SACA,EAAA,CAAA;AAIP,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAQ,gBAAT;EACW;EACH;EACQ;EAEb;EACsB,CAAA"}

package/dist/components/Menu/SubMenu.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+interface Props {
+    /**
+     * The trigger element that opens the submenu. This should be a MenuItem.
+     */
+    trigger: ReactNode;
+    /**
+     * Whether the submenu is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the submenu changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The submenu contents (typically MenuItem elements).
+     */
+    children: ReactNode;
+}
+/**
+ * A submenu within a Menu or ContextMenu. The trigger should be a MenuItem
+ * component and the children are the submenu items.
+ */
+export declare const SubMenu: FC<Props>;
+export {};
+//# sourceMappingURL=SubMenu.d.ts.map

package/dist/components/Menu/SubMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/SubMenu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAGnE,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,KAAK,CA4B7B,CAAC"}

package/dist/components/Menu/SubMenu.js

@@ -0,0 +1,22 @@
+import { MenuContext } from "./MenuContext.js";
+import { useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Menu/SubMenu.tsx
+/**
+* A submenu within a Menu or ContextMenu. The trigger should be a MenuItem
+* component and the children are the submenu items.
+*/
+var SubMenu = ({ trigger, open, onOpenChange, children }) => {
+	const context = useContext(MenuContext);
+	if (context?.SubMenuWrapper == null) return /* @__PURE__ */ jsxs(Fragment, { children: [trigger, children] });
+	return /* @__PURE__ */ jsx(context.SubMenuWrapper, {
+		trigger,
+		open,
+		onOpenChange,
+		children
+	});
+};
+//#endregion
+export { SubMenu };
+
+//# sourceMappingURL=SubMenu.js.map

package/dist/components/Menu/SubMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.js","names":[],"sources":["../../../src/components/Menu/SubMenu.tsx"],"sourcesContent":["/*\nCopyright 2026 Element Creations 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 React, { type FC, type ReactNode, useContext } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\n\ninterface Props {\n  /**\n   * The trigger element that opens the submenu. This should be a MenuItem.\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the submenu is open (controlled).\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the submenu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The submenu contents (typically MenuItem elements).\n   */\n  children: ReactNode;\n}\n\n/**\n * A submenu within a Menu or ContextMenu. The trigger should be a MenuItem\n * component and the children are the submenu items.\n */\nexport const SubMenu: FC<Props> = ({\n  trigger,\n  open,\n  onOpenChange,\n  children,\n}) => {\n  const context = useContext(MenuContext);\n\n  // When there's no SubMenuWrapper (e.g. drawer on mobile), flatten the\n  // submenu items inline — nested flyouts don't work well in drawers.\n  if (context?.SubMenuWrapper == null) {\n    return (\n      <>\n        {trigger}\n        {children}\n      </>\n    );\n  }\n\n  return (\n    <context.SubMenuWrapper\n      trigger={trigger}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      {children}\n    </context.SubMenuWrapper>\n  );\n};\n"],"mappings":";;;;;;;;AAiCA,IAAa,WAAsB,EACjC,SACA,MACA,cACA,eACI;CACJ,MAAM,UAAU,WAAW,YAAY;AAIvC,KAAI,SAAS,kBAAkB,KAC7B,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACA,SACA,EAAA,CAAA;AAIP,QACE,oBAAC,QAAQ,gBAAT;EACW;EACH;EACQ;EAEb;EACsB,CAAA"}

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);
 let react = require("react");
 react = require_runtime.__toESM(react);
+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);
 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,14 @@
 //#region src/components/Toast/Toast.module.css
-var Toast_module_default = { "toast-container": "_toast-container_1xofk_8" };
+var icon = "_icon_1ysb3_26";
+var content = "_content_1ysb3_34";
+var close = "_close_1ysb3_41";
+var Toast_module_default = {
+	"toast-container": "_toast-container_1ysb3_8",
+	icon,
+	"has-close": "_has-close_1ysb3_30",
+	content,
+	close
+};
 //#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,14 @@
 //#region src/components/Toast/Toast.module.css
-var Toast_module_default = { "toast-container": "_toast-container_1xofk_8" };
+var icon = "_icon_1ysb3_26";
+var content = "_content_1ysb3_34";
+var close = "_close_1ysb3_41";
+var Toast_module_default = {
+	"toast-container": "_toast-container_1ysb3_8",
+	icon,
+	"has-close": "_has-close_1ysb3_30",
+	content,
+	close
+};
 //#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/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");
@@ -127,6 +128,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';

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";
@@ -55,4 +56,4 @@ import { UnreadCounter } from "./components/ActivityMarker/UnreadCounter.js";
 import { Pill } from "./components/ActivityMarker/Pill.js";
 import { Unread } from "./components/ActivityMarker/Unread.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, 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 };