@vector-im/compound-web 8.4.0 → 9.0.1

package/dist/components/Button/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/Button/IconButton/IconButton.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 React, { type PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"names":["forwardRef","IconButton","classnames","styles","jsx","UnstyledButton","IndicatorIcon","Tooltip"],"mappings":";;;;;;;;;AA2DO,MAAM,aAAaA,MAAAA,WAGxB,SAASC,YACT;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAUC,WAAWC,kBAAAA,QAAO,aAAa,GAAG,WAAW;AAAA,IAC3D,CAACA,kBAAAA,QAAO,WAAW,GAAG;AAAA,IACtB,CAACA,kBAAAA,QAAO,eAAe,CAAC,GAAG;AAAA,EAAA,CAC5B;AAED,QAAM,SACJC,2BAAAA;AAAAA,IAACC,eAAAA;AAAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX,OACE;AAAA,QACE,0BAA0B;AAAA,QAC1B,GAAG;AAAA,MAAA;AAAA,MAGP;AAAA,MACC,GAAG;AAAA,MACJ,kBAAgB;AAAA,MAChB,aAAW;AAAA,MAEX,UAAAD,2BAAAA;AAAAA,QAACE,cAAAA;AAAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAQ,WAAW,mCAAmC;AAAA,UAErD,UAAA,MAAM,SAAS,KAAK,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,EAAA;AAIJ,SAAO,UAAUF,+BAACG,QAAAA,SAAA,EAAQ,OAAO,SAAU,kBAAO,IAAa;AACjE,CAAC;;"}
+{"version":3,"file":"IconButton.cjs","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.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 React, { type PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"mappings":";;;;;;;;;;;;;;AA2DA,IAAa,cAAA,GAAA,MAAA,YAGX,SAAS,WACT,EACE,OAAO,WACP,UACA,WACA,WACA,OAAO,QACP,OACA,UACA,aACA,SACA,eAAe,OACf,GAAG,SAEL,KACA;CAMA,MAAM,SACJ,iBAAA,GAAA,kBAAA,KAAC,uBAAA,gBAAD;EACE,IAAG;EACE;EACL,YAAA,GAAA,WAAA,SATuB,0BAAA,QAAO,gBAAgB,WAAW;IAC1D,0BAAA,QAAO,cAAc;IACrB,0BAAA,QAAO,mBAAmB;GAC5B,CAAC;EAOE,OACE;GACE,0BAA0B;GAC1B,GAAG;GACJ;EAEO;EACV,GAAI;EACJ,kBAAgB;EAChB,aAAW;YAEX,iBAAA,GAAA,kBAAA,KAAC,sBAAA,eAAD;GACa;GACX,QAAQ,WAAW,mCAAmC,KAAA;aAErD,MAAA,QAAM,SAAS,KAAK,SAAS;GAChB,CAAA;EACD,CAAA;AAGnB,QAAO,UAAU,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;EAAS,OAAO;YAAU;EAAiB,CAAA,GAAG;EAC/D"}

package/dist/components/Button/IconButton/IconButton.js

@@ -1,54 +1,42 @@
-import { jsx } from "react/jsx-runtime";
-import React, { forwardRef } from "react";
-import classNames from "classnames";
-import styles from "./IconButton.module.css.js";
 import { UnstyledButton } from "../UnstyledButton.js";
+import IconButton_module_default from "./IconButton.module.js";
 import { IndicatorIcon } from "../../Icon/IndicatorIcon/IndicatorIcon.js";
 import { Tooltip } from "../../Tooltip/Tooltip.js";
-const IconButton = forwardRef(function IconButton2({
-  kind = "primary",
-  children,
-  className,
-  indicator,
-  size = "32px",
-  style,
-  disabled,
-  destructive,
-  tooltip,
-  noBackground = false,
-  ...props
-}, ref) {
-  const classes = classNames(styles["icon-button"], className, {
-    [styles.destructive]: destructive,
-    [styles["no-background"]]: noBackground
-  });
-  const button = /* @__PURE__ */ jsx(
-    UnstyledButton,
-    {
-      as: "button",
-      ref,
-      className: classes,
-      style: {
-        "--cpd-icon-button-size": size,
-        ...style
-      },
-      disabled,
-      ...props,
-      "data-indicator": indicator,
-      "data-kind": kind,
-      children: /* @__PURE__ */ jsx(
-        IndicatorIcon,
-        {
-          indicator,
-          colour: disabled ? "var(--cpd-color-icon-disabled)" : void 0,
-          children: React.Children.only(children)
-        }
-      )
-    }
-  );
-  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { label: tooltip, children: button }) : button;
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Button/IconButton/IconButton.tsx
+/**
+* Display an icon as a button. Can render an indicator
+*/
+var IconButton = forwardRef(function IconButton({ kind = "primary", children, className, indicator, size = "32px", style, disabled, destructive, tooltip, noBackground = false, ...props }, ref) {
+	const button = /* @__PURE__ */ jsx(UnstyledButton, {
+		as: "button",
+		ref,
+		className: classNames(IconButton_module_default["icon-button"], className, {
+			[IconButton_module_default.destructive]: destructive,
+			[IconButton_module_default["no-background"]]: noBackground
+		}),
+		style: {
+			"--cpd-icon-button-size": size,
+			...style
+		},
+		disabled,
+		...props,
+		"data-indicator": indicator,
+		"data-kind": kind,
+		children: /* @__PURE__ */ jsx(IndicatorIcon, {
+			indicator,
+			colour: disabled ? "var(--cpd-color-icon-disabled)" : void 0,
+			children: React.Children.only(children)
+		})
+	});
+	return tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+		label: tooltip,
+		children: button
+	}) : button;
 });
-export {
-  IconButton
-};
-//# sourceMappingURL=IconButton.js.map
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/components/Button/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/Button/IconButton/IconButton.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 React, { type PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"names":["IconButton","classnames"],"mappings":";;;;;;;AA2DO,MAAM,aAAa,WAGxB,SAASA,YACT;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAUC,WAAW,OAAO,aAAa,GAAG,WAAW;AAAA,IAC3D,CAAC,OAAO,WAAW,GAAG;AAAA,IACtB,CAAC,OAAO,eAAe,CAAC,GAAG;AAAA,EAAA,CAC5B;AAED,QAAM,SACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX,OACE;AAAA,QACE,0BAA0B;AAAA,QAC1B,GAAG;AAAA,MAAA;AAAA,MAGP;AAAA,MACC,GAAG;AAAA,MACJ,kBAAgB;AAAA,MAChB,aAAW;AAAA,MAEX,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAQ,WAAW,mCAAmC;AAAA,UAErD,UAAA,MAAM,SAAS,KAAK,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,EAAA;AAIJ,SAAO,UAAU,oBAAC,SAAA,EAAQ,OAAO,SAAU,kBAAO,IAAa;AACjE,CAAC;"}
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.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 React, { type PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"mappings":";;;;;;;;;;;AA2DA,IAAa,aAAa,WAGxB,SAAS,WACT,EACE,OAAO,WACP,UACA,WACA,WACA,OAAO,QACP,OACA,UACA,aACA,SACA,eAAe,OACf,GAAG,SAEL,KACA;CAMA,MAAM,SACJ,oBAAC,gBAAD;EACE,IAAG;EACE;EACL,WATY,WAAW,0BAAO,gBAAgB,WAAW;IAC1D,0BAAO,cAAc;IACrB,0BAAO,mBAAmB;GAC5B,CAAC;EAOE,OACE;GACE,0BAA0B;GAC1B,GAAG;GACJ;EAEO;EACV,GAAI;EACJ,kBAAgB;EAChB,aAAW;YAEX,oBAAC,eAAD;GACa;GACX,QAAQ,WAAW,mCAAmC,KAAA;aAErD,MAAM,SAAS,KAAK,SAAS;GAChB,CAAA;EACD,CAAA;AAGnB,QAAO,UAAU,oBAAC,SAAD;EAAS,OAAO;YAAU;EAAiB,CAAA,GAAG;EAC/D"}

package/dist/components/Button/IconButton/IconButton.module.cjs

@@ -0,0 +1,11 @@
+//#region src/components/Button/IconButton/IconButton.module.css
+var destructive = "_destructive_1215g_95";
+var IconButton_module_default = {
+	"icon-button": "_icon-button_1215g_8",
+	"no-background": "_no-background_1215g_42",
+	destructive
+};
+//#endregion
+exports.default = IconButton_module_default;
+
+//# sourceMappingURL=IconButton.module.cjs.map

package/dist/components/Button/IconButton/IconButton.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.module.cjs","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.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.icon-button {\n  --cpd-icon-button-indicator-border-size: calc(\n    var(--cpd-icon-button-size) * 0.0625\n  );\n\n  inline-size: var(--cpd-icon-button-size);\n  block-size: var(--cpd-icon-button-size);\n\n  /* the icon is 0.75 the size of the button, so add padding to put it in the middle */\n  padding: calc(var(--cpd-icon-button-size) * 0.125);\n  aspect-ratio: 1 / 1;\n  border: 0;\n  appearance: none;\n  cursor: pointer;\n  border-radius: 50%;\n  position: relative;\n  background: transparent;\n  line-height: 0px;\n}\n\n.icon-button[data-kind=\"primary\"] {\n  * {\n    color: var(--cpd-color-icon-secondary);\n  }\n}\n\n.icon-button[data-kind=\"secondary\"] {\n  background: var(--cpd-color-bg-subtle-secondary);\n\n  * {\n    color: var(--cpd-color-icon-secondary);\n  }\n}\n\n.no-background[data-kind=\"secondary\"] {\n  background: transparent;\n}\n\n.icon-button[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n\n  * {\n    color: var(--cpd-color-icon-disabled);\n  }\n}\n\n/**\n * Hover state\n */\n\n@media (hover) {\n  .icon-button:not([aria-disabled=\"true\"]):hover {\n    background: var(--cpd-color-bg-subtle-primary);\n\n    * {\n      color: var(--cpd-color-icon-primary);\n    }\n  }\n}\n\n.icon-button:not([aria-disabled=\"true\"]):active {\n  background: var(--cpd-color-bg-subtle-primary);\n\n  * {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n@media (hover) {\n  .icon-button:not([aria-disabled=\"true\"])[data-indicator]:is(:hover)::before {\n    /* Same colour as the background */\n    border: var(--cpd-icon-button-indicator-border-size) solid\n      var(--cpd-color-bg-subtle-primary);\n    inset-block-start: 0;\n    inset-inline-end: 0;\n  }\n}\n\n.icon-button:not([aria-disabled=\"true\"])[data-indicator]:is(:active)::before {\n  /* Same colour as the background */\n  border: var(--cpd-icon-button-indicator-border-size) solid\n    var(--cpd-color-bg-subtle-primary);\n  inset-block-start: 0;\n  inset-inline-end: 0;\n}\n\n@media (hover) {\n  .icon-button:not([aria-disabled=\"true\"]).destructive:hover {\n    background: var(--cpd-color-bg-critical-subtle-hovered);\n    outline: 1px solid var(--cpd-color-border-critical-subtle);\n  }\n}\n\n.icon-button:not([aria-disabled=\"true\"]).destructive {\n  * {\n    color: var(--cpd-color-icon-critical-primary);\n  }\n}\n"],"mappings":""}

package/dist/components/Button/IconButton/IconButton.module.js

@@ -0,0 +1,11 @@
+//#region src/components/Button/IconButton/IconButton.module.css
+var destructive = "_destructive_1215g_95";
+var IconButton_module_default = {
+	"icon-button": "_icon-button_1215g_8",
+	"no-background": "_no-background_1215g_42",
+	destructive
+};
+//#endregion
+export { IconButton_module_default as default };
+
+//# sourceMappingURL=IconButton.module.js.map

package/dist/components/Button/IconButton/IconButton.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.module.js","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.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.icon-button {\n  --cpd-icon-button-indicator-border-size: calc(\n    var(--cpd-icon-button-size) * 0.0625\n  );\n\n  inline-size: var(--cpd-icon-button-size);\n  block-size: var(--cpd-icon-button-size);\n\n  /* the icon is 0.75 the size of the button, so add padding to put it in the middle */\n  padding: calc(var(--cpd-icon-button-size) * 0.125);\n  aspect-ratio: 1 / 1;\n  border: 0;\n  appearance: none;\n  cursor: pointer;\n  border-radius: 50%;\n  position: relative;\n  background: transparent;\n  line-height: 0px;\n}\n\n.icon-button[data-kind=\"primary\"] {\n  * {\n    color: var(--cpd-color-icon-secondary);\n  }\n}\n\n.icon-button[data-kind=\"secondary\"] {\n  background: var(--cpd-color-bg-subtle-secondary);\n\n  * {\n    color: var(--cpd-color-icon-secondary);\n  }\n}\n\n.no-background[data-kind=\"secondary\"] {\n  background: transparent;\n}\n\n.icon-button[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n\n  * {\n    color: var(--cpd-color-icon-disabled);\n  }\n}\n\n/**\n * Hover state\n */\n\n@media (hover) {\n  .icon-button:not([aria-disabled=\"true\"]):hover {\n    background: var(--cpd-color-bg-subtle-primary);\n\n    * {\n      color: var(--cpd-color-icon-primary);\n    }\n  }\n}\n\n.icon-button:not([aria-disabled=\"true\"]):active {\n  background: var(--cpd-color-bg-subtle-primary);\n\n  * {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n@media (hover) {\n  .icon-button:not([aria-disabled=\"true\"])[data-indicator]:is(:hover)::before {\n    /* Same colour as the background */\n    border: var(--cpd-icon-button-indicator-border-size) solid\n      var(--cpd-color-bg-subtle-primary);\n    inset-block-start: 0;\n    inset-inline-end: 0;\n  }\n}\n\n.icon-button:not([aria-disabled=\"true\"])[data-indicator]:is(:active)::before {\n  /* Same colour as the background */\n  border: var(--cpd-icon-button-indicator-border-size) solid\n    var(--cpd-color-bg-subtle-primary);\n  inset-block-start: 0;\n  inset-inline-end: 0;\n}\n\n@media (hover) {\n  .icon-button:not([aria-disabled=\"true\"]).destructive:hover {\n    background: var(--cpd-color-bg-critical-subtle-hovered);\n    outline: 1px solid var(--cpd-color-border-critical-subtle);\n  }\n}\n\n.icon-button:not([aria-disabled=\"true\"]).destructive {\n  * {\n    color: var(--cpd-color-icon-critical-primary);\n  }\n}\n"],"mappings":""}

package/dist/components/Button/UnstyledButton.cjs

@@ -1,47 +1,38 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const UnstyledButton = React.forwardRef(function UnstyledButton2({
-  as,
-  children,
-  className,
-  disabled,
-  ...props
-}, ref) {
-  const Component = as || "button";
-  const {
-    onClick,
-    onSubmit,
-    onPointerDown,
-    onPointerUp,
-    onKeyDown,
-    onKeyUp,
-    onKeyPress,
-    ...restProps
-  } = props;
-  const eventHandlers = disabled ? {} : {
-    onClick,
-    onSubmit,
-    onPointerDown,
-    onPointerUp,
-    onKeyDown,
-    onKeyUp,
-    onKeyPress
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      ref,
-      className,
-      role: as === "a" ? "link" : "button",
-      tabIndex: 0,
-      "aria-disabled": disabled,
-      ...restProps,
-      ...eventHandlers,
-      children
-    }
-  );
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Button/UnstyledButton.tsx
+/**
+* Unstyled button component. Can be disabled and optionally rendered as an anchor.
+* Intended to be wrapped with styles and exported as new button type - eg `IconButton` or `Button`.
+*
+* Not to be used externally.
+*/
+var UnstyledButton = (0, react.forwardRef)(function UnstyledButton({ as, children, className, disabled, ...props }, ref) {
+	const Component = as || "button";
+	const { onClick, onSubmit, onPointerDown, onPointerUp, onKeyDown, onKeyUp, onKeyPress, ...restProps } = props;
+	const eventHandlers = disabled ? {} : {
+		onClick,
+		onSubmit,
+		onPointerDown,
+		onPointerUp,
+		onKeyDown,
+		onKeyUp,
+		onKeyPress
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref,
+		className,
+		role: as === "a" ? "link" : "button",
+		tabIndex: 0,
+		"aria-disabled": disabled,
+		...restProps,
+		...eventHandlers,
+		children
+	});
 });
+//#endregion
 exports.UnstyledButton = UnstyledButton;
-//# sourceMappingURL=UnstyledButton.cjs.map
+
+//# sourceMappingURL=UnstyledButton.cjs.map

package/dist/components/Button/UnstyledButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UnstyledButton.cjs","sources":["../../../src/components/Button/UnstyledButton.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 React, {\n  type PropsWithChildren,\n  forwardRef,\n  type ForwardedRef,\n  type Ref,\n} from \"react\";\n\ninterface ButtonComponent {\n  // With the explicit `as` prop\n  <C extends React.ElementType>(\n    props: { as: C } & UnstyledButtonPropsFor<C>,\n  ): React.ReactElement;\n  // Without the explicit `as` prop, defaulting to a <button>\n  (props: UnstyledButtonPropsFor<\"button\">): React.ReactElement;\n}\n\ntype UnstyledButtonProps = PropsWithChildren<{\n  /**\n   * Note that disabled attribute is not added to buttons, so that disabled buttons are discoverable by keyboard.\n   * `aria-disabled` attribute is used to indicate button is disabled.\n   * Event handlers are not passed to disabled buttons (onClick, onSubmit, etc.)\n   */\n  disabled?: boolean;\n}>;\n\nexport type UnstyledButtonPropsFor<C extends React.ElementType> =\n  UnstyledButtonProps &\n    Omit<\n      React.ComponentPropsWithoutRef<C>,\n      keyof UnstyledButtonProps | \"as\"\n    > & {\n      ref?: React.Ref<React.ComponentRef<C>>;\n    };\n\n/**\n * Unstyled button component. Can be disabled and optionally rendered as an anchor.\n * Intended to be wrapped with styles and exported as new button type - eg `IconButton` or `Button`.\n *\n * Not to be used externally.\n */\nexport const UnstyledButton = forwardRef(function UnstyledButton<\n  C extends React.ElementType = \"button\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled,\n    ...props\n  }: UnstyledButtonPropsFor<C> & { as?: C },\n  ref: ForwardedRef<C>,\n): React.ReactElement {\n  const Component = as || (\"button\" as const);\n\n  const {\n    onClick,\n    onSubmit,\n    onPointerDown,\n    onPointerUp,\n    onKeyDown,\n    onKeyUp,\n    onKeyPress,\n    ...restProps\n  } = props;\n  const eventHandlers = disabled\n    ? {}\n    : {\n        onClick,\n        onSubmit,\n        onPointerDown,\n        onPointerUp,\n        onKeyDown,\n        onKeyUp,\n        onKeyPress,\n      };\n\n  return (\n    <Component\n      ref={ref as Ref<C>}\n      className={className}\n      // The elements roles should be set to button default, or link in the case of anchors.\n      // This should be overridable by props, say for example if you want to use a button as an option within a listbox.\n      // Hence it taking precedence over restProps.\n      role={as === \"a\" ? \"link\" : \"button\"}\n      tabIndex={0}\n      aria-disabled={disabled}\n      {...restProps}\n      {...eventHandlers}\n    >\n      {children}\n    </Component>\n  );\n}) as ButtonComponent;\n"],"names":["forwardRef","UnstyledButton","jsx"],"mappings":";;;;AA+CO,MAAM,iBAAiBA,MAAAA,WAAW,SAASC,gBAGhD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACoB;AACpB,QAAM,YAAY,MAAO;AAEzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,gBAAgB,WAClB,KACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGN,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MAIA,MAAM,OAAO,MAAM,SAAS;AAAA,MAC5B,UAAU;AAAA,MACV,iBAAe;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;"}
+{"version":3,"file":"UnstyledButton.cjs","names":[],"sources":["../../../src/components/Button/UnstyledButton.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 React, {\n  type PropsWithChildren,\n  forwardRef,\n  type ForwardedRef,\n  type Ref,\n} from \"react\";\n\ninterface ButtonComponent {\n  // With the explicit `as` prop\n  <C extends React.ElementType>(\n    props: { as: C } & UnstyledButtonPropsFor<C>,\n  ): React.ReactElement;\n  // Without the explicit `as` prop, defaulting to a <button>\n  (props: UnstyledButtonPropsFor<\"button\">): React.ReactElement;\n}\n\ntype UnstyledButtonProps = PropsWithChildren<{\n  /**\n   * Note that disabled attribute is not added to buttons, so that disabled buttons are discoverable by keyboard.\n   * `aria-disabled` attribute is used to indicate button is disabled.\n   * Event handlers are not passed to disabled buttons (onClick, onSubmit, etc.)\n   */\n  disabled?: boolean;\n}>;\n\nexport type UnstyledButtonPropsFor<C extends React.ElementType> =\n  UnstyledButtonProps &\n    Omit<\n      React.ComponentPropsWithoutRef<C>,\n      keyof UnstyledButtonProps | \"as\"\n    > & {\n      ref?: React.Ref<React.ComponentRef<C>>;\n    };\n\n/**\n * Unstyled button component. Can be disabled and optionally rendered as an anchor.\n * Intended to be wrapped with styles and exported as new button type - eg `IconButton` or `Button`.\n *\n * Not to be used externally.\n */\nexport const UnstyledButton = forwardRef(function UnstyledButton<\n  C extends React.ElementType = \"button\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled,\n    ...props\n  }: UnstyledButtonPropsFor<C> & { as?: C },\n  ref: ForwardedRef<C>,\n): React.ReactElement {\n  const Component = as || (\"button\" as const);\n\n  const {\n    onClick,\n    onSubmit,\n    onPointerDown,\n    onPointerUp,\n    onKeyDown,\n    onKeyUp,\n    onKeyPress,\n    ...restProps\n  } = props;\n  const eventHandlers = disabled\n    ? {}\n    : {\n        onClick,\n        onSubmit,\n        onPointerDown,\n        onPointerUp,\n        onKeyDown,\n        onKeyUp,\n        onKeyPress,\n      };\n\n  return (\n    <Component\n      ref={ref as Ref<C>}\n      className={className}\n      // The elements roles should be set to button default, or link in the case of anchors.\n      // This should be overridable by props, say for example if you want to use a button as an option within a listbox.\n      // Hence it taking precedence over restProps.\n      role={as === \"a\" ? \"link\" : \"button\"}\n      tabIndex={0}\n      aria-disabled={disabled}\n      {...restProps}\n      {...eventHandlers}\n    >\n      {children}\n    </Component>\n  );\n}) as ButtonComponent;\n"],"mappings":";;;;;;;;;;;AA+CA,IAAa,kBAAA,GAAA,MAAA,YAA4B,SAAS,eAGhD,EACE,IACA,UACA,WACA,UACA,GAAG,SAEL,KACoB;CACpB,MAAM,YAAY,MAAO;CAEzB,MAAM,EACJ,SACA,UACA,eACA,aACA,WACA,SACA,YACA,GAAG,cACD;CACJ,MAAM,gBAAgB,WAClB,EAAE,GACF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAEL,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACM;EAIX,MAAM,OAAO,MAAM,SAAS;EAC5B,UAAU;EACV,iBAAe;EACf,GAAI;EACJ,GAAI;EAEH;EACS,CAAA;EAEd"}

package/dist/components/Button/UnstyledButton.js

@@ -1,47 +1,36 @@
-import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-const UnstyledButton = forwardRef(function UnstyledButton2({
-  as,
-  children,
-  className,
-  disabled,
-  ...props
-}, ref) {
-  const Component = as || "button";
-  const {
-    onClick,
-    onSubmit,
-    onPointerDown,
-    onPointerUp,
-    onKeyDown,
-    onKeyUp,
-    onKeyPress,
-    ...restProps
-  } = props;
-  const eventHandlers = disabled ? {} : {
-    onClick,
-    onSubmit,
-    onPointerDown,
-    onPointerUp,
-    onKeyDown,
-    onKeyUp,
-    onKeyPress
-  };
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      className,
-      role: as === "a" ? "link" : "button",
-      tabIndex: 0,
-      "aria-disabled": disabled,
-      ...restProps,
-      ...eventHandlers,
-      children
-    }
-  );
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Button/UnstyledButton.tsx
+/**
+* Unstyled button component. Can be disabled and optionally rendered as an anchor.
+* Intended to be wrapped with styles and exported as new button type - eg `IconButton` or `Button`.
+*
+* Not to be used externally.
+*/
+var UnstyledButton = forwardRef(function UnstyledButton({ as, children, className, disabled, ...props }, ref) {
+	const Component = as || "button";
+	const { onClick, onSubmit, onPointerDown, onPointerUp, onKeyDown, onKeyUp, onKeyPress, ...restProps } = props;
+	const eventHandlers = disabled ? {} : {
+		onClick,
+		onSubmit,
+		onPointerDown,
+		onPointerUp,
+		onKeyDown,
+		onKeyUp,
+		onKeyPress
+	};
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className,
+		role: as === "a" ? "link" : "button",
+		tabIndex: 0,
+		"aria-disabled": disabled,
+		...restProps,
+		...eventHandlers,
+		children
+	});
 });
-export {
-  UnstyledButton
-};
-//# sourceMappingURL=UnstyledButton.js.map
+//#endregion
+export { UnstyledButton };
+
+//# sourceMappingURL=UnstyledButton.js.map

package/dist/components/Button/UnstyledButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnstyledButton.js","sources":["../../../src/components/Button/UnstyledButton.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 React, {\n  type PropsWithChildren,\n  forwardRef,\n  type ForwardedRef,\n  type Ref,\n} from \"react\";\n\ninterface ButtonComponent {\n  // With the explicit `as` prop\n  <C extends React.ElementType>(\n    props: { as: C } & UnstyledButtonPropsFor<C>,\n  ): React.ReactElement;\n  // Without the explicit `as` prop, defaulting to a <button>\n  (props: UnstyledButtonPropsFor<\"button\">): React.ReactElement;\n}\n\ntype UnstyledButtonProps = PropsWithChildren<{\n  /**\n   * Note that disabled attribute is not added to buttons, so that disabled buttons are discoverable by keyboard.\n   * `aria-disabled` attribute is used to indicate button is disabled.\n   * Event handlers are not passed to disabled buttons (onClick, onSubmit, etc.)\n   */\n  disabled?: boolean;\n}>;\n\nexport type UnstyledButtonPropsFor<C extends React.ElementType> =\n  UnstyledButtonProps &\n    Omit<\n      React.ComponentPropsWithoutRef<C>,\n      keyof UnstyledButtonProps | \"as\"\n    > & {\n      ref?: React.Ref<React.ComponentRef<C>>;\n    };\n\n/**\n * Unstyled button component. Can be disabled and optionally rendered as an anchor.\n * Intended to be wrapped with styles and exported as new button type - eg `IconButton` or `Button`.\n *\n * Not to be used externally.\n */\nexport const UnstyledButton = forwardRef(function UnstyledButton<\n  C extends React.ElementType = \"button\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled,\n    ...props\n  }: UnstyledButtonPropsFor<C> & { as?: C },\n  ref: ForwardedRef<C>,\n): React.ReactElement {\n  const Component = as || (\"button\" as const);\n\n  const {\n    onClick,\n    onSubmit,\n    onPointerDown,\n    onPointerUp,\n    onKeyDown,\n    onKeyUp,\n    onKeyPress,\n    ...restProps\n  } = props;\n  const eventHandlers = disabled\n    ? {}\n    : {\n        onClick,\n        onSubmit,\n        onPointerDown,\n        onPointerUp,\n        onKeyDown,\n        onKeyUp,\n        onKeyPress,\n      };\n\n  return (\n    <Component\n      ref={ref as Ref<C>}\n      className={className}\n      // The elements roles should be set to button default, or link in the case of anchors.\n      // This should be overridable by props, say for example if you want to use a button as an option within a listbox.\n      // Hence it taking precedence over restProps.\n      role={as === \"a\" ? \"link\" : \"button\"}\n      tabIndex={0}\n      aria-disabled={disabled}\n      {...restProps}\n      {...eventHandlers}\n    >\n      {children}\n    </Component>\n  );\n}) as ButtonComponent;\n"],"names":["UnstyledButton"],"mappings":";;AA+CO,MAAM,iBAAiB,WAAW,SAASA,gBAGhD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACoB;AACpB,QAAM,YAAY,MAAO;AAEzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,gBAAgB,WAClB,KACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGN,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MAIA,MAAM,OAAO,MAAM,SAAS;AAAA,MAC5B,UAAU;AAAA,MACV,iBAAe;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"UnstyledButton.js","names":[],"sources":["../../../src/components/Button/UnstyledButton.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 React, {\n  type PropsWithChildren,\n  forwardRef,\n  type ForwardedRef,\n  type Ref,\n} from \"react\";\n\ninterface ButtonComponent {\n  // With the explicit `as` prop\n  <C extends React.ElementType>(\n    props: { as: C } & UnstyledButtonPropsFor<C>,\n  ): React.ReactElement;\n  // Without the explicit `as` prop, defaulting to a <button>\n  (props: UnstyledButtonPropsFor<\"button\">): React.ReactElement;\n}\n\ntype UnstyledButtonProps = PropsWithChildren<{\n  /**\n   * Note that disabled attribute is not added to buttons, so that disabled buttons are discoverable by keyboard.\n   * `aria-disabled` attribute is used to indicate button is disabled.\n   * Event handlers are not passed to disabled buttons (onClick, onSubmit, etc.)\n   */\n  disabled?: boolean;\n}>;\n\nexport type UnstyledButtonPropsFor<C extends React.ElementType> =\n  UnstyledButtonProps &\n    Omit<\n      React.ComponentPropsWithoutRef<C>,\n      keyof UnstyledButtonProps | \"as\"\n    > & {\n      ref?: React.Ref<React.ComponentRef<C>>;\n    };\n\n/**\n * Unstyled button component. Can be disabled and optionally rendered as an anchor.\n * Intended to be wrapped with styles and exported as new button type - eg `IconButton` or `Button`.\n *\n * Not to be used externally.\n */\nexport const UnstyledButton = forwardRef(function UnstyledButton<\n  C extends React.ElementType = \"button\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled,\n    ...props\n  }: UnstyledButtonPropsFor<C> & { as?: C },\n  ref: ForwardedRef<C>,\n): React.ReactElement {\n  const Component = as || (\"button\" as const);\n\n  const {\n    onClick,\n    onSubmit,\n    onPointerDown,\n    onPointerUp,\n    onKeyDown,\n    onKeyUp,\n    onKeyPress,\n    ...restProps\n  } = props;\n  const eventHandlers = disabled\n    ? {}\n    : {\n        onClick,\n        onSubmit,\n        onPointerDown,\n        onPointerUp,\n        onKeyDown,\n        onKeyUp,\n        onKeyPress,\n      };\n\n  return (\n    <Component\n      ref={ref as Ref<C>}\n      className={className}\n      // The elements roles should be set to button default, or link in the case of anchors.\n      // This should be overridable by props, say for example if you want to use a button as an option within a listbox.\n      // Hence it taking precedence over restProps.\n      role={as === \"a\" ? \"link\" : \"button\"}\n      tabIndex={0}\n      aria-disabled={disabled}\n      {...restProps}\n      {...eventHandlers}\n    >\n      {children}\n    </Component>\n  );\n}) as ButtonComponent;\n"],"mappings":";;;;;;;;;AA+CA,IAAa,iBAAiB,WAAW,SAAS,eAGhD,EACE,IACA,UACA,WACA,UACA,GAAG,SAEL,KACoB;CACpB,MAAM,YAAY,MAAO;CAEzB,MAAM,EACJ,SACA,UACA,eACA,aACA,WACA,SACA,YACA,GAAG,cACD;CACJ,MAAM,gBAAgB,WAClB,EAAE,GACF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAEL,QACE,oBAAC,WAAD;EACO;EACM;EAIX,MAAM,OAAO,MAAM,SAAS;EAC5B,UAAU;EACV,iBAAe;EACf,GAAI;EACJ,GAAI;EAEH;EACS,CAAA;EAEd"}

package/dist/components/ChatFilter/ChatFilter.cjs

@@ -1,22 +1,25 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const UnstyledButton = require("../Button/UnstyledButton.cjs");
-const ChatFilter_module = require("./ChatFilter.module.css.cjs");
-const ChatFilter = React.forwardRef(function ChatFilter2({ children, selected, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    UnstyledButton.UnstyledButton,
-    {
-      ...props,
-      className: ChatFilter_module.default["chat-filter"],
-      "aria-selected": selected,
-      as: "button",
-      ref,
-      tabIndex: 0,
-      children
-    }
-  );
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_UnstyledButton = require("../Button/UnstyledButton.cjs");
+const require_ChatFilter_module = require("./ChatFilter.module.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/ChatFilter/ChatFilter.tsx
+/**
+* A chat filter button.
+*/
+var ChatFilter = (0, react.forwardRef)(function ChatFilter({ children, selected, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UnstyledButton.UnstyledButton, {
+		...props,
+		className: require_ChatFilter_module.default["chat-filter"],
+		"aria-selected": selected,
+		as: "button",
+		ref,
+		tabIndex: 0,
+		children
+	});
 });
+//#endregion
 exports.ChatFilter = ChatFilter;
-//# sourceMappingURL=ChatFilter.cjs.map
+
+//# sourceMappingURL=ChatFilter.cjs.map

package/dist/components/ChatFilter/ChatFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatFilter.cjs","sources":["../../../src/components/ChatFilter/ChatFilter.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport {\n  UnstyledButton,\n  type UnstyledButtonPropsFor,\n} from \"../Button/UnstyledButton\";\nimport styles from \"./ChatFilter.module.css\";\n\ntype ChatFilterProps = Omit<UnstyledButtonPropsFor<\"button\">, \"disabled\"> & {\n  /**\n   * Whether the filter is selected.\n   */\n  selected?: boolean;\n};\n\n/**\n * A chat filter button.\n */\nexport const ChatFilter = forwardRef(function ChatFilter(\n  { children, selected, ...props }: ChatFilterProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  return (\n    <UnstyledButton\n      {...props}\n      className={styles[\"chat-filter\"]}\n      aria-selected={selected}\n      as=\"button\"\n      ref={ref}\n      tabIndex={0}\n    >\n      {children}\n    </UnstyledButton>\n  );\n});\n"],"names":["forwardRef","ChatFilter","jsx","UnstyledButton","styles"],"mappings":";;;;;;AAwBO,MAAM,aAAaA,MAAAA,WAAW,SAASC,YAC5C,EAAE,UAAU,UAAU,GAAG,MAAA,GACzB,KACoB;AACpB,SACEC,2BAAAA;AAAAA,IAACC,eAAAA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAWC,kBAAAA,QAAO,aAAa;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAG;AAAA,MACH;AAAA,MACA,UAAU;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;"}
+{"version":3,"file":"ChatFilter.cjs","names":[],"sources":["../../../src/components/ChatFilter/ChatFilter.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport {\n  UnstyledButton,\n  type UnstyledButtonPropsFor,\n} from \"../Button/UnstyledButton\";\nimport styles from \"./ChatFilter.module.css\";\n\ntype ChatFilterProps = Omit<UnstyledButtonPropsFor<\"button\">, \"disabled\"> & {\n  /**\n   * Whether the filter is selected.\n   */\n  selected?: boolean;\n};\n\n/**\n * A chat filter button.\n */\nexport const ChatFilter = forwardRef(function ChatFilter(\n  { children, selected, ...props }: ChatFilterProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  return (\n    <UnstyledButton\n      {...props}\n      className={styles[\"chat-filter\"]}\n      aria-selected={selected}\n      as=\"button\"\n      ref={ref}\n      tabIndex={0}\n    >\n      {children}\n    </UnstyledButton>\n  );\n});\n"],"mappings":";;;;;;;;;;AAwBA,IAAa,cAAA,GAAA,MAAA,YAAwB,SAAS,WAC5C,EAAE,UAAU,UAAU,GAAG,SACzB,KACoB;AACpB,QACE,iBAAA,GAAA,kBAAA,KAAC,uBAAA,gBAAD;EACE,GAAI;EACJ,WAAW,0BAAA,QAAO;EAClB,iBAAe;EACf,IAAG;EACE;EACL,UAAU;EAET;EACc,CAAA;EAEnB"}

package/dist/components/ChatFilter/ChatFilter.js

@@ -1,22 +1,23 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { UnstyledButton } from "../Button/UnstyledButton.js";
-import styles from "./ChatFilter.module.css.js";
-const ChatFilter = forwardRef(function ChatFilter2({ children, selected, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    UnstyledButton,
-    {
-      ...props,
-      className: styles["chat-filter"],
-      "aria-selected": selected,
-      as: "button",
-      ref,
-      tabIndex: 0,
-      children
-    }
-  );
+import ChatFilter_module_default from "./ChatFilter.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ChatFilter/ChatFilter.tsx
+/**
+* A chat filter button.
+*/
+var ChatFilter = forwardRef(function ChatFilter({ children, selected, ...props }, ref) {
+	return /* @__PURE__ */ jsx(UnstyledButton, {
+		...props,
+		className: ChatFilter_module_default["chat-filter"],
+		"aria-selected": selected,
+		as: "button",
+		ref,
+		tabIndex: 0,
+		children
+	});
 });
-export {
-  ChatFilter
-};
-//# sourceMappingURL=ChatFilter.js.map
+//#endregion
+export { ChatFilter };
+
+//# sourceMappingURL=ChatFilter.js.map

package/dist/components/ChatFilter/ChatFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatFilter.js","sources":["../../../src/components/ChatFilter/ChatFilter.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport {\n  UnstyledButton,\n  type UnstyledButtonPropsFor,\n} from \"../Button/UnstyledButton\";\nimport styles from \"./ChatFilter.module.css\";\n\ntype ChatFilterProps = Omit<UnstyledButtonPropsFor<\"button\">, \"disabled\"> & {\n  /**\n   * Whether the filter is selected.\n   */\n  selected?: boolean;\n};\n\n/**\n * A chat filter button.\n */\nexport const ChatFilter = forwardRef(function ChatFilter(\n  { children, selected, ...props }: ChatFilterProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  return (\n    <UnstyledButton\n      {...props}\n      className={styles[\"chat-filter\"]}\n      aria-selected={selected}\n      as=\"button\"\n      ref={ref}\n      tabIndex={0}\n    >\n      {children}\n    </UnstyledButton>\n  );\n});\n"],"names":["ChatFilter"],"mappings":";;;;AAwBO,MAAM,aAAa,WAAW,SAASA,YAC5C,EAAE,UAAU,UAAU,GAAG,MAAA,GACzB,KACoB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,OAAO,aAAa;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAG;AAAA,MACH;AAAA,MACA,UAAU;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"ChatFilter.js","names":[],"sources":["../../../src/components/ChatFilter/ChatFilter.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport {\n  UnstyledButton,\n  type UnstyledButtonPropsFor,\n} from \"../Button/UnstyledButton\";\nimport styles from \"./ChatFilter.module.css\";\n\ntype ChatFilterProps = Omit<UnstyledButtonPropsFor<\"button\">, \"disabled\"> & {\n  /**\n   * Whether the filter is selected.\n   */\n  selected?: boolean;\n};\n\n/**\n * A chat filter button.\n */\nexport const ChatFilter = forwardRef(function ChatFilter(\n  { children, selected, ...props }: ChatFilterProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  return (\n    <UnstyledButton\n      {...props}\n      className={styles[\"chat-filter\"]}\n      aria-selected={selected}\n      as=\"button\"\n      ref={ref}\n      tabIndex={0}\n    >\n      {children}\n    </UnstyledButton>\n  );\n});\n"],"mappings":";;;;;;;;AAwBA,IAAa,aAAa,WAAW,SAAS,WAC5C,EAAE,UAAU,UAAU,GAAG,SACzB,KACoB;AACpB,QACE,oBAAC,gBAAD;EACE,GAAI;EACJ,WAAW,0BAAO;EAClB,iBAAe;EACf,IAAG;EACE;EACL,UAAU;EAET;EACc,CAAA;EAEnB"}

package/dist/components/ChatFilter/ChatFilter.module.cjs

@@ -0,0 +1,6 @@
+//#region src/components/ChatFilter/ChatFilter.module.css
+var ChatFilter_module_default = { "chat-filter": "_chat-filter_5qdp0_8" };
+//#endregion
+exports.default = ChatFilter_module_default;
+
+//# sourceMappingURL=ChatFilter.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.module.cjs","names":[],"sources":["../../../src/components/ChatFilter/ChatFilter.module.css"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\n.chat-filter {\n  font: var(--cpd-font-body-sm-medium);\n  color: var(--cpd-color-text-primary);\n  background-color: transparent;\n  border: var(--cpd-border-width-1) solid\n    var(--cpd-color-border-interactive-secondary);\n  border-radius: 99px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--cpd-space-1x) var(--cpd-space-2x);\n}\n\n@media (hover) {\n  .chat-filter:hover {\n    border-color: var(--cpd-color-border-interactive-primary);\n    background: var(--cpd-color-bg-subtle-primary);\n  }\n}\n\n.chat-filter[aria-selected=\"true\"] {\n  border-color: var(--cpd-color-bg-action-primary-rest);\n  background: var(--cpd-color-bg-action-primary-rest);\n  color: var(--cpd-color-text-on-solid-primary);\n}\n"],"mappings":""}

package/dist/components/ChatFilter/ChatFilter.module.js

@@ -0,0 +1,6 @@
+//#region src/components/ChatFilter/ChatFilter.module.css
+var ChatFilter_module_default = { "chat-filter": "_chat-filter_5qdp0_8" };
+//#endregion
+export { ChatFilter_module_default as default };
+
+//# sourceMappingURL=ChatFilter.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.module.js","names":[],"sources":["../../../src/components/ChatFilter/ChatFilter.module.css"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\n.chat-filter {\n  font: var(--cpd-font-body-sm-medium);\n  color: var(--cpd-color-text-primary);\n  background-color: transparent;\n  border: var(--cpd-border-width-1) solid\n    var(--cpd-color-border-interactive-secondary);\n  border-radius: 99px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--cpd-space-1x) var(--cpd-space-2x);\n}\n\n@media (hover) {\n  .chat-filter:hover {\n    border-color: var(--cpd-color-border-interactive-primary);\n    background: var(--cpd-color-bg-subtle-primary);\n  }\n}\n\n.chat-filter[aria-selected=\"true\"] {\n  border-color: var(--cpd-color-bg-action-primary-rest);\n  background: var(--cpd-color-bg-action-primary-rest);\n  color: var(--cpd-color-text-on-solid-primary);\n}\n"],"mappings":""}