@vector-im/compound-web 8.4.0 → 9.0.0

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,58 +1,56 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import Chevron from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
-import styles from "./Breadcrumb.module.css.js";
+import { IconButton } from "../Button/IconButton/IconButton.js";
 import { Link } from "../Link/Link.js";
+import Breadcrumb_module_default from "./Breadcrumb.module.js";
 import classNames from "classnames";
-import { IconButton } from "../Button/IconButton/IconButton.js";
-function Breadcrumb({
-  backLabel,
-  onBackClick,
-  pages,
-  onPageClick,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs("nav", { className: classNames(styles.breadcrumb, className), ...props, children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        kind: "secondary",
-        size: "28px",
-        "aria-label": backLabel,
-        onClick: onBackClick,
-        children: /* @__PURE__ */ jsx(Chevron, {})
-      }
-    ),
-    /* @__PURE__ */ jsx("ol", { className: styles.pages, children: pages.map((page, index) => /* @__PURE__ */ jsx(
-      Page,
-      {
-        page,
-        isLastPage: index === pages.length - 1,
-        onClick: () => onPageClick(page, index)
-      },
-      index
-    )) })
-  ] });
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Chevron from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
+//#region src/components/Breadcrumb/Breadcrumb.tsx
+/**
+* A breadcrumb component.
+*/
+function Breadcrumb({ backLabel, onBackClick, pages, onPageClick, className, ...props }) {
+	return /* @__PURE__ */ jsxs("nav", {
+		className: classNames(Breadcrumb_module_default.breadcrumb, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(IconButton, {
+			kind: "secondary",
+			size: "28px",
+			"aria-label": backLabel,
+			onClick: onBackClick,
+			children: /* @__PURE__ */ jsx(Chevron, {})
+		}), /* @__PURE__ */ jsx("ol", {
+			className: Breadcrumb_module_default.pages,
+			children: pages.map((page, index) => /* @__PURE__ */ jsx(Page, {
+				page,
+				isLastPage: index === pages.length - 1,
+				onClick: () => onPageClick(page, index)
+			}, index))
+		})]
+	});
 }
+/**
+* A breadcrumb page.
+* If not the last page, the page is displayed in a link.
+*/
 function Page({ page, isLastPage, onClick }) {
-  const onKeyDown = (event) => {
-    if (event.key === " ") {
-      onClick();
-    }
-  };
-  return /* @__PURE__ */ jsx("li", { children: isLastPage ? /* @__PURE__ */ jsx("span", { className: styles["last-page"], "aria-current": "page", children: page }) : /* @__PURE__ */ jsx(
-    Link,
-    {
-      size: "small",
-      role: "button",
-      onClick,
-      onKeyDown,
-      tabIndex: 0,
-      children: page
-    }
-  ) });
+	const onKeyDown = (event) => {
+		if (event.key === " ") onClick();
+	};
+	return /* @__PURE__ */ jsx("li", { children: isLastPage ? /* @__PURE__ */ jsx("span", {
+		className: Breadcrumb_module_default["last-page"],
+		"aria-current": "page",
+		children: page
+	}) : /* @__PURE__ */ jsx(Link, {
+		size: "sm",
+		role: "button",
+		onClick,
+		onKeyDown,
+		tabIndex: 0,
+		children: page
+	}) });
 }
-export {
-  Breadcrumb
-};
-//# sourceMappingURL=Breadcrumb.js.map
+//#endregion
+export { Breadcrumb };
+
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.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 React, {\n  type HTMLProps,\n  type JSX,\n  type MouseEventHandler,\n  type KeyboardEvent,\n} from \"react\";\nimport { IconButton } from \"../Button\";\nimport Chevron from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-left\";\nimport styles from \"./Breadcrumb.module.css\";\nimport { Link } from \"../Link/Link.tsx\";\nimport classNames from \"classnames\";\n\ninterface BreadcrumbProps extends HTMLProps<HTMLElement> {\n  /**\n   * The label for the back button.\n   */\n  backLabel: string;\n  /**\n   * The click handler for the back button.\n   */\n  onBackClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The pages to display in the breadcrumb.\n   * All the pages except the last one are displayed as links.\n   */\n  pages: string[];\n  /**\n   * The click handler for a page.\n   * @param page - The page that was clicked.\n   * @param index - The index of the page that was clicked.\n   */\n  onPageClick: (page: string, index: number) => void;\n}\n\n/**\n * A breadcrumb component.\n */\nexport function Breadcrumb({\n  backLabel,\n  onBackClick,\n  pages,\n  onPageClick,\n  className,\n  ...props\n}: BreadcrumbProps): JSX.Element {\n  return (\n    <nav className={classNames(styles.breadcrumb, className)} {...props}>\n      <IconButton\n        kind=\"secondary\"\n        size=\"28px\"\n        aria-label={backLabel}\n        onClick={onBackClick}\n      >\n        <Chevron />\n      </IconButton>\n      <ol className={styles.pages}>\n        {pages.map((page, index) => (\n          <Page\n            key={index}\n            page={page}\n            isLastPage={index === pages.length - 1}\n            onClick={() => onPageClick(page, index)}\n          />\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\ninterface PageProps {\n  /**\n   * The page to display.\n   */\n  page: string;\n  /**\n   * Whether this is the last page in the breadcrumb.\n   */\n  isLastPage: boolean;\n  /**\n   * The click handler for the page, ignore for last page.\n   */\n  onClick: () => void;\n}\n\n/**\n * A breadcrumb page.\n * If not the last page, the page is displayed in a link.\n */\nfunction Page({ page, isLastPage, onClick }: PageProps): JSX.Element {\n  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <li>\n      {isLastPage ? (\n        <span className={styles[\"last-page\"]} aria-current=\"page\">\n          {page}\n        </span>\n      ) : (\n        <Link\n          size=\"small\"\n          role=\"button\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n        >\n          {page}\n        </Link>\n      )}\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA4CO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACE,qBAAC,SAAI,WAAW,WAAW,OAAO,YAAY,SAAS,GAAI,GAAG,OAC5D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,SAAS;AAAA,QAET,8BAAC,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX,oBAAC,QAAG,WAAW,OAAO,OACnB,UAAA,MAAM,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,YAAY,UAAU,MAAM,SAAS;AAAA,QACrC,SAAS,MAAM,YAAY,MAAM,KAAK;AAAA,MAAA;AAAA,MAHjC;AAAA,IAAA,CAKR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAqBA,SAAS,KAAK,EAAE,MAAM,YAAY,WAAmC;AACnE,QAAM,YAAY,CAAC,UAA4C;AAC7D,QAAI,MAAM,QAAQ,KAAK;AACrB,cAAA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,MAAA,EACE,UAAA,aACC,oBAAC,QAAA,EAAK,WAAW,OAAO,WAAW,GAAG,gBAAa,QAChD,UAAA,KAAA,CACH,IAEA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MAET,UAAA;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;"}
+{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../../src/components/Breadcrumb/Breadcrumb.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 React, {\n  type HTMLProps,\n  type JSX,\n  type MouseEventHandler,\n  type KeyboardEvent,\n} from \"react\";\nimport { IconButton } from \"../Button\";\nimport Chevron from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-left\";\nimport styles from \"./Breadcrumb.module.css\";\nimport { Link } from \"../Link/Link.tsx\";\nimport classNames from \"classnames\";\n\ninterface BreadcrumbProps extends HTMLProps<HTMLElement> {\n  /**\n   * The label for the back button.\n   */\n  backLabel: string;\n  /**\n   * The click handler for the back button.\n   */\n  onBackClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The pages to display in the breadcrumb.\n   * All the pages except the last one are displayed as links.\n   */\n  pages: string[];\n  /**\n   * The click handler for a page.\n   * @param page - The page that was clicked.\n   * @param index - The index of the page that was clicked.\n   */\n  onPageClick: (page: string, index: number) => void;\n}\n\n/**\n * A breadcrumb component.\n */\nexport function Breadcrumb({\n  backLabel,\n  onBackClick,\n  pages,\n  onPageClick,\n  className,\n  ...props\n}: BreadcrumbProps): JSX.Element {\n  return (\n    <nav className={classNames(styles.breadcrumb, className)} {...props}>\n      <IconButton\n        kind=\"secondary\"\n        size=\"28px\"\n        aria-label={backLabel}\n        onClick={onBackClick}\n      >\n        <Chevron />\n      </IconButton>\n      <ol className={styles.pages}>\n        {pages.map((page, index) => (\n          <Page\n            key={index}\n            page={page}\n            isLastPage={index === pages.length - 1}\n            onClick={() => onPageClick(page, index)}\n          />\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\ninterface PageProps {\n  /**\n   * The page to display.\n   */\n  page: string;\n  /**\n   * Whether this is the last page in the breadcrumb.\n   */\n  isLastPage: boolean;\n  /**\n   * The click handler for the page, ignore for last page.\n   */\n  onClick: () => void;\n}\n\n/**\n * A breadcrumb page.\n * If not the last page, the page is displayed in a link.\n */\nfunction Page({ page, isLastPage, onClick }: PageProps): JSX.Element {\n  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <li>\n      {isLastPage ? (\n        <span className={styles[\"last-page\"]} aria-current=\"page\">\n          {page}\n        </span>\n      ) : (\n        <Link\n          size=\"sm\"\n          role=\"button\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n        >\n          {page}\n        </Link>\n      )}\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA4CA,SAAgB,WAAW,EACzB,WACA,aACA,OACA,aACA,WACA,GAAG,SAC4B;AAC/B,QACE,qBAAC,OAAD;EAAK,WAAW,WAAW,0BAAO,YAAY,UAAU;EAAE,GAAI;YAA9D,CACE,oBAAC,YAAD;GACE,MAAK;GACL,MAAK;GACL,cAAY;GACZ,SAAS;aAET,oBAAC,SAAD,EAAW,CAAA;GACA,CAAA,EACb,oBAAC,MAAD;GAAI,WAAW,0BAAO;aACnB,MAAM,KAAK,MAAM,UAChB,oBAAC,MAAD;IAEQ;IACN,YAAY,UAAU,MAAM,SAAS;IACrC,eAAe,YAAY,MAAM,MAAM;IACvC,EAJK,MAIL,CACF;GACC,CAAA,CACD;;;;;;;AAuBV,SAAS,KAAK,EAAE,MAAM,YAAY,WAAmC;CACnE,MAAM,aAAa,UAA4C;AAC7D,MAAI,MAAM,QAAQ,IAChB,UAAS;;AAIb,QACE,oBAAC,MAAD,EAAA,UACG,aACC,oBAAC,QAAD;EAAM,WAAW,0BAAO;EAAc,gBAAa;YAChD;EACI,CAAA,GAEP,oBAAC,MAAD;EACE,MAAK;EACL,MAAK;EACI;EACE;EACX,UAAU;YAET;EACI,CAAA,EAEN,CAAA"}

package/dist/components/Breadcrumb/Breadcrumb.module.cjs

@@ -0,0 +1,9 @@
+var Breadcrumb_module_default = {
+	breadcrumb: "_breadcrumb_t96w3_8",
+	pages: "_pages_t96w3_17",
+	"last-page": "_last-page_t96w3_30"
+};
+//#endregion
+exports.default = Breadcrumb_module_default;
+
+//# sourceMappingURL=Breadcrumb.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.module.cjs","names":[],"sources":["../../../src/components/Breadcrumb/Breadcrumb.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.breadcrumb {\n  display: flex;\n  align-items: center;\n  block-size: 40px;\n  gap: var(--cpd-space-3x);\n  padding-block-end: var(--cpd-space-3x);\n  border-block-end: 1px solid var(--cpd-color-alpha-gray-400);\n  box-sizing: border-box;\n\n  .pages {\n    display: flex;\n    gap: var(--cpd-space-1x);\n\n    /* override list styles */\n    list-style-type: \"\";\n    margin: 0;\n    padding: 0;\n\n    a {\n      cursor: pointer;\n    }\n\n    .last-page {\n      font: var(--cpd-font-body-sm-regular);\n      color: var(--cpd-color-text-secondary);\n    }\n\n    /*\n     * Breadcrumb separator\n     * We want this separator to be only visual and to not be in the accessibility tree.\n     * The nav html element already provides an accessible way to separate the links.\n     */\n    li + li::before {\n      display: inline-block;\n      margin: 0 0.3em 0 0.25em;\n      transform: rotate(15deg);\n      border-inline-end: 1px solid var(--cpd-color-text-secondary);\n      block-size: var(--cpd-space-3x);\n      content: \"\";\n    }\n\n    /* Last page */\n    :last-child {\n      span {\n        padding-inline-start: var(--cpd-space-1x);\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/components/Breadcrumb/Breadcrumb.module.js

@@ -0,0 +1,9 @@
+var Breadcrumb_module_default = {
+	breadcrumb: "_breadcrumb_t96w3_8",
+	pages: "_pages_t96w3_17",
+	"last-page": "_last-page_t96w3_30"
+};
+//#endregion
+export { Breadcrumb_module_default as default };
+
+//# sourceMappingURL=Breadcrumb.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.module.js","names":[],"sources":["../../../src/components/Breadcrumb/Breadcrumb.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.breadcrumb {\n  display: flex;\n  align-items: center;\n  block-size: 40px;\n  gap: var(--cpd-space-3x);\n  padding-block-end: var(--cpd-space-3x);\n  border-block-end: 1px solid var(--cpd-color-alpha-gray-400);\n  box-sizing: border-box;\n\n  .pages {\n    display: flex;\n    gap: var(--cpd-space-1x);\n\n    /* override list styles */\n    list-style-type: \"\";\n    margin: 0;\n    padding: 0;\n\n    a {\n      cursor: pointer;\n    }\n\n    .last-page {\n      font: var(--cpd-font-body-sm-regular);\n      color: var(--cpd-color-text-secondary);\n    }\n\n    /*\n     * Breadcrumb separator\n     * We want this separator to be only visual and to not be in the accessibility tree.\n     * The nav html element already provides an accessible way to separate the links.\n     */\n    li + li::before {\n      display: inline-block;\n      margin: 0 0.3em 0 0.25em;\n      transform: rotate(15deg);\n      border-inline-end: 1px solid var(--cpd-color-text-secondary);\n      block-size: var(--cpd-space-3x);\n      content: \"\";\n    }\n\n    /* Last page */\n    :last-child {\n      span {\n        padding-inline-start: var(--cpd-space-1x);\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/components/Button/Button.cjs

@@ -1,54 +1,42 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const Button_module = require("./Button.module.css.cjs");
-const UnstyledButton = require("./UnstyledButton.cjs");
-const Button = React.forwardRef(function Button2({
-  as,
-  kind: kindProp = "primary",
-  size = "lg",
-  children,
-  className,
-  iconOnly,
-  Icon,
-  destructive: destructiveProp,
-  disabled,
-  ...props
-}, ref) {
-  const [kind, destructive] = kindProp === "destructive" ? ["secondary", true] : [kindProp, destructiveProp];
-  const classes = classNames(Button_module.default.button, className, {
-    [Button_module.default["has-icon"]]: Icon,
-    [Button_module.default["icon-only"]]: iconOnly,
-    [Button_module.default.destructive]: destructive
-  });
-  const iconSize = iconOnly && size === "lg" ? 24 : 20;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    UnstyledButton.UnstyledButton,
-    {
-      ...props,
-      as: as || "button",
-      ref,
-      className: classes,
-      "data-size": size,
-      "data-kind": kind,
-      tabIndex: 0,
-      disabled,
-      children: [
-        Icon && /* @__PURE__ */ jsxRuntime.jsx(
-          Icon,
-          {
-            width: iconSize,
-            height: iconSize,
-            className: Button_module.default.icon,
-            "aria-hidden": true
-          }
-        ),
-        children
-      ]
-    }
-  );
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Button_module = require("./Button.module.cjs");
+const require_UnstyledButton = require("./UnstyledButton.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Button/Button.tsx
+/**
+* A button component that can be transformed into a link, but keep the button
+* styling using the `as` property.
+*/
+var Button = (0, react.forwardRef)(function Button({ as, kind: kindProp = "primary", size = "lg", children, className, iconOnly, Icon, destructive: destructiveProp, disabled, ...props }, ref) {
+	const [kind, destructive] = kindProp === "destructive" ? ["secondary", true] : [kindProp, destructiveProp];
+	const classes = (0, classnames.default)(require_Button_module.default.button, className, {
+		[require_Button_module.default["has-icon"]]: Icon,
+		[require_Button_module.default["icon-only"]]: iconOnly,
+		[require_Button_module.default.destructive]: destructive
+	});
+	const iconSize = iconOnly && size === "lg" ? 24 : 20;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_UnstyledButton.UnstyledButton, {
+		...props,
+		as: as || "button",
+		ref,
+		className: classes,
+		"data-size": size,
+		"data-kind": kind,
+		tabIndex: 0,
+		disabled,
+		children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			width: iconSize,
+			height: iconSize,
+			className: require_Button_module.default.icon,
+			"aria-hidden": true
+		}), children]
+	});
 });
+//#endregion
 exports.Button = Button;
-//# sourceMappingURL=Button.cjs.map
+
+//# sourceMappingURL=Button.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\nCopyright 2023, 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  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  type ForwardedRef,\n  type Ref,\n} from \"react\";\nimport styles from \"./Button.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"./UnstyledButton\";\n\ninterface ButtonComponent {\n  // With the explicit `as` prop\n  <C extends React.ElementType>(\n    props: { as: C } & ButtonPropsFor<C>,\n  ): React.ReactElement;\n  // Without the explicit `as` prop, defaulting to a <button>\n  (props: ButtonPropsFor<\"button\">): React.ReactElement;\n}\n\ntype ButtonOwnProps = PropsWithChildren<{\n  /**\n   * The type of button.\n   * Note: \"destructive\" is deprecated, please use the destructive prop in\n   * conjunction with another button kind.\n   */\n  kind?: \"primary\" | \"secondary\" | \"tertiary\" | \"destructive\";\n  /**\n   * The t-shirt size of the button.\n   */\n  size?: \"sm\" | \"lg\";\n\n  /**\n   * Whether the button is an icon only button.\n   */\n  iconOnly?: boolean;\n\n  /**\n   * An icon to display within the button.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n}>;\n\ntype ButtonPropsFor<C extends React.ElementType> = ButtonOwnProps &\n  UnstyledButtonPropsFor<C>;\n\n/**\n * A button component that can be transformed into a link, but keep the button\n * styling using the `as` property.\n */\nexport const Button = forwardRef(function Button<\n  C extends React.ElementType = \"button\",\n>(\n  {\n    as,\n    kind: kindProp = \"primary\",\n    size = \"lg\",\n    children,\n    className,\n    iconOnly,\n    Icon,\n    destructive: destructiveProp,\n    disabled,\n    ...props\n  }: ButtonPropsFor<C> & { as?: C },\n  ref: ForwardedRef<C>,\n): React.ReactElement {\n  // Fallback for the deprecated \"destructive\" kind\n  const [kind, destructive] =\n    kindProp === \"destructive\"\n      ? [\"secondary\", true]\n      : [kindProp, destructiveProp];\n\n  const classes = classNames(styles.button, className, {\n    [styles[\"has-icon\"]]: Icon,\n    [styles[\"icon-only\"]]: iconOnly,\n    [styles.destructive]: destructive,\n  });\n\n  const iconSize = iconOnly && size === \"lg\" ? 24 : 20;\n\n  return (\n    <UnstyledButton\n      {...props}\n      as={as || (\"button\" as const)}\n      ref={ref as Ref<C>}\n      className={classes}\n      data-size={size}\n      data-kind={kind}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {Icon && (\n        <Icon\n          width={iconSize}\n          height={iconSize}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n      {children}\n    </UnstyledButton>\n  );\n}) as ButtonComponent;\n"],"names":["forwardRef","Button","styles","jsxs","UnstyledButton","jsx"],"mappings":";;;;;;;AA8DO,MAAM,SAASA,MAAAA,WAAW,SAASC,QAGxC;AAAA,EACE;AAAA,EACA,MAAM,WAAW;AAAA,EACjB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GACA,KACoB;AAEpB,QAAM,CAAC,MAAM,WAAW,IACtB,aAAa,gBACT,CAAC,aAAa,IAAI,IAClB,CAAC,UAAU,eAAe;AAEhC,QAAM,UAAU,WAAWC,sBAAO,QAAQ,WAAW;AAAA,IACnD,CAACA,cAAAA,QAAO,UAAU,CAAC,GAAG;AAAA,IACtB,CAACA,cAAAA,QAAO,WAAW,CAAC,GAAG;AAAA,IACvB,CAACA,cAAAA,QAAO,WAAW,GAAG;AAAA,EAAA,CACvB;AAED,QAAM,WAAW,YAAY,SAAS,OAAO,KAAK;AAElD,SACEC,2BAAAA;AAAAA,IAACC,eAAAA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI,MAAO;AAAA,MACX;AAAA,MACA,WAAW;AAAA,MACX,aAAW;AAAA,MACX,aAAW;AAAA,MACX,UAAU;AAAA,MACV;AAAA,MAEC,UAAA;AAAA,QAAA,QACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWH,cAAAA,QAAO;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;"}
+{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\nCopyright 2023, 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  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  type ForwardedRef,\n  type Ref,\n} from \"react\";\nimport styles from \"./Button.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"./UnstyledButton\";\nimport type { Size } from \"../../utils/size\";\n\ninterface ButtonComponent {\n  // With the explicit `as` prop\n  <C extends React.ElementType>(\n    props: { as: C } & ButtonPropsFor<C>,\n  ): React.ReactElement;\n  // Without the explicit `as` prop, defaulting to a <button>\n  (props: ButtonPropsFor<\"button\">): React.ReactElement;\n}\n\ntype ButtonOwnProps = PropsWithChildren<{\n  /**\n   * The type of button.\n   * Note: \"destructive\" is deprecated, please use the destructive prop in\n   * conjunction with another button kind.\n   */\n  kind?: \"primary\" | \"secondary\" | \"tertiary\" | \"destructive\";\n  /**\n   * The t-shirt size of the button.\n   */\n  size?: Size & (\"sm\" | \"lg\");\n\n  /**\n   * Whether the button is an icon only button.\n   */\n  iconOnly?: boolean;\n\n  /**\n   * An icon to display within the button.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n}>;\n\ntype ButtonPropsFor<C extends React.ElementType> = ButtonOwnProps &\n  UnstyledButtonPropsFor<C>;\n\n/**\n * A button component that can be transformed into a link, but keep the button\n * styling using the `as` property.\n */\nexport const Button = forwardRef(function Button<\n  C extends React.ElementType = \"button\",\n>(\n  {\n    as,\n    kind: kindProp = \"primary\",\n    size = \"lg\",\n    children,\n    className,\n    iconOnly,\n    Icon,\n    destructive: destructiveProp,\n    disabled,\n    ...props\n  }: ButtonPropsFor<C> & { as?: C },\n  ref: ForwardedRef<C>,\n): React.ReactElement {\n  // Fallback for the deprecated \"destructive\" kind\n  const [kind, destructive] =\n    kindProp === \"destructive\"\n      ? [\"secondary\", true]\n      : [kindProp, destructiveProp];\n\n  const classes = classNames(styles.button, className, {\n    [styles[\"has-icon\"]]: Icon,\n    [styles[\"icon-only\"]]: iconOnly,\n    [styles.destructive]: destructive,\n  });\n\n  const iconSize = iconOnly && size === \"lg\" ? 24 : 20;\n\n  return (\n    <UnstyledButton\n      {...props}\n      as={as || (\"button\" as const)}\n      ref={ref as Ref<C>}\n      className={classes}\n      data-size={size}\n      data-kind={kind}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {Icon && (\n        <Icon\n          width={iconSize}\n          height={iconSize}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n      {children}\n    </UnstyledButton>\n  );\n}) as ButtonComponent;\n"],"mappings":";;;;;;;;;;;;;AA+DA,IAAa,UAAA,GAAA,MAAA,YAAoB,SAAS,OAGxC,EACE,IACA,MAAM,WAAW,WACjB,OAAO,MACP,UACA,WACA,UACA,MACA,aAAa,iBACb,UACA,GAAG,SAEL,KACoB;CAEpB,MAAM,CAAC,MAAM,eACX,aAAa,gBACT,CAAC,aAAa,KAAK,GACnB,CAAC,UAAU,gBAAgB;CAEjC,MAAM,WAAA,GAAA,WAAA,SAAqB,sBAAA,QAAO,QAAQ,WAAW;GAClD,sBAAA,QAAO,cAAc;GACrB,sBAAA,QAAO,eAAe;GACtB,sBAAA,QAAO,cAAc;EACvB,CAAC;CAEF,MAAM,WAAW,YAAY,SAAS,OAAO,KAAK;AAElD,QACE,iBAAA,GAAA,kBAAA,MAAC,uBAAA,gBAAD;EACE,GAAI;EACJ,IAAI,MAAO;EACN;EACL,WAAW;EACX,aAAW;EACX,aAAW;EACX,UAAU;EACA;YARZ,CAUG,QACC,iBAAA,GAAA,kBAAA,KAAC,MAAD;GACE,OAAO;GACP,QAAQ;GACR,WAAW,sBAAA,QAAO;GAClB,eAAa;GACb,CAAA,EAEH,SACc;;EAEnB"}

package/dist/components/Button/Button.js

@@ -1,54 +1,39 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import Button_module_default from "./Button.module.js";
+import { UnstyledButton } from "./UnstyledButton.js";
 import classNames from "classnames";
 import { forwardRef } from "react";
-import styles from "./Button.module.css.js";
-import { UnstyledButton } from "./UnstyledButton.js";
-const Button = forwardRef(function Button2({
-  as,
-  kind: kindProp = "primary",
-  size = "lg",
-  children,
-  className,
-  iconOnly,
-  Icon,
-  destructive: destructiveProp,
-  disabled,
-  ...props
-}, ref) {
-  const [kind, destructive] = kindProp === "destructive" ? ["secondary", true] : [kindProp, destructiveProp];
-  const classes = classNames(styles.button, className, {
-    [styles["has-icon"]]: Icon,
-    [styles["icon-only"]]: iconOnly,
-    [styles.destructive]: destructive
-  });
-  const iconSize = iconOnly && size === "lg" ? 24 : 20;
-  return /* @__PURE__ */ jsxs(
-    UnstyledButton,
-    {
-      ...props,
-      as: as || "button",
-      ref,
-      className: classes,
-      "data-size": size,
-      "data-kind": kind,
-      tabIndex: 0,
-      disabled,
-      children: [
-        Icon && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            width: iconSize,
-            height: iconSize,
-            className: styles.icon,
-            "aria-hidden": true
-          }
-        ),
-        children
-      ]
-    }
-  );
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Button/Button.tsx
+/**
+* A button component that can be transformed into a link, but keep the button
+* styling using the `as` property.
+*/
+var Button = forwardRef(function Button({ as, kind: kindProp = "primary", size = "lg", children, className, iconOnly, Icon, destructive: destructiveProp, disabled, ...props }, ref) {
+	const [kind, destructive] = kindProp === "destructive" ? ["secondary", true] : [kindProp, destructiveProp];
+	const classes = classNames(Button_module_default.button, className, {
+		[Button_module_default["has-icon"]]: Icon,
+		[Button_module_default["icon-only"]]: iconOnly,
+		[Button_module_default.destructive]: destructive
+	});
+	const iconSize = iconOnly && size === "lg" ? 24 : 20;
+	return /* @__PURE__ */ jsxs(UnstyledButton, {
+		...props,
+		as: as || "button",
+		ref,
+		className: classes,
+		"data-size": size,
+		"data-kind": kind,
+		tabIndex: 0,
+		disabled,
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			width: iconSize,
+			height: iconSize,
+			className: Button_module_default.icon,
+			"aria-hidden": true
+		}), children]
+	});
 });
-export {
-  Button
-};
-//# sourceMappingURL=Button.js.map
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\nCopyright 2023, 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  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  type ForwardedRef,\n  type Ref,\n} from \"react\";\nimport styles from \"./Button.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"./UnstyledButton\";\n\ninterface ButtonComponent {\n  // With the explicit `as` prop\n  <C extends React.ElementType>(\n    props: { as: C } & ButtonPropsFor<C>,\n  ): React.ReactElement;\n  // Without the explicit `as` prop, defaulting to a <button>\n  (props: ButtonPropsFor<\"button\">): React.ReactElement;\n}\n\ntype ButtonOwnProps = PropsWithChildren<{\n  /**\n   * The type of button.\n   * Note: \"destructive\" is deprecated, please use the destructive prop in\n   * conjunction with another button kind.\n   */\n  kind?: \"primary\" | \"secondary\" | \"tertiary\" | \"destructive\";\n  /**\n   * The t-shirt size of the button.\n   */\n  size?: \"sm\" | \"lg\";\n\n  /**\n   * Whether the button is an icon only button.\n   */\n  iconOnly?: boolean;\n\n  /**\n   * An icon to display within the button.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n}>;\n\ntype ButtonPropsFor<C extends React.ElementType> = ButtonOwnProps &\n  UnstyledButtonPropsFor<C>;\n\n/**\n * A button component that can be transformed into a link, but keep the button\n * styling using the `as` property.\n */\nexport const Button = forwardRef(function Button<\n  C extends React.ElementType = \"button\",\n>(\n  {\n    as,\n    kind: kindProp = \"primary\",\n    size = \"lg\",\n    children,\n    className,\n    iconOnly,\n    Icon,\n    destructive: destructiveProp,\n    disabled,\n    ...props\n  }: ButtonPropsFor<C> & { as?: C },\n  ref: ForwardedRef<C>,\n): React.ReactElement {\n  // Fallback for the deprecated \"destructive\" kind\n  const [kind, destructive] =\n    kindProp === \"destructive\"\n      ? [\"secondary\", true]\n      : [kindProp, destructiveProp];\n\n  const classes = classNames(styles.button, className, {\n    [styles[\"has-icon\"]]: Icon,\n    [styles[\"icon-only\"]]: iconOnly,\n    [styles.destructive]: destructive,\n  });\n\n  const iconSize = iconOnly && size === \"lg\" ? 24 : 20;\n\n  return (\n    <UnstyledButton\n      {...props}\n      as={as || (\"button\" as const)}\n      ref={ref as Ref<C>}\n      className={classes}\n      data-size={size}\n      data-kind={kind}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {Icon && (\n        <Icon\n          width={iconSize}\n          height={iconSize}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n      {children}\n    </UnstyledButton>\n  );\n}) as ButtonComponent;\n"],"names":["Button"],"mappings":";;;;;AA8DO,MAAM,SAAS,WAAW,SAASA,QAGxC;AAAA,EACE;AAAA,EACA,MAAM,WAAW;AAAA,EACjB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GACA,KACoB;AAEpB,QAAM,CAAC,MAAM,WAAW,IACtB,aAAa,gBACT,CAAC,aAAa,IAAI,IAClB,CAAC,UAAU,eAAe;AAEhC,QAAM,UAAU,WAAW,OAAO,QAAQ,WAAW;AAAA,IACnD,CAAC,OAAO,UAAU,CAAC,GAAG;AAAA,IACtB,CAAC,OAAO,WAAW,CAAC,GAAG;AAAA,IACvB,CAAC,OAAO,WAAW,GAAG;AAAA,EAAA,CACvB;AAED,QAAM,WAAW,YAAY,SAAS,OAAO,KAAK;AAElD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI,MAAO;AAAA,MACX;AAAA,MACA,WAAW;AAAA,MACX,aAAW;AAAA,MACX,aAAW;AAAA,MACX,UAAU;AAAA,MACV;AAAA,MAEC,UAAA;AAAA,QAAA,QACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\nCopyright 2023, 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  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  type ForwardedRef,\n  type Ref,\n} from \"react\";\nimport styles from \"./Button.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"./UnstyledButton\";\nimport type { Size } from \"../../utils/size\";\n\ninterface ButtonComponent {\n  // With the explicit `as` prop\n  <C extends React.ElementType>(\n    props: { as: C } & ButtonPropsFor<C>,\n  ): React.ReactElement;\n  // Without the explicit `as` prop, defaulting to a <button>\n  (props: ButtonPropsFor<\"button\">): React.ReactElement;\n}\n\ntype ButtonOwnProps = PropsWithChildren<{\n  /**\n   * The type of button.\n   * Note: \"destructive\" is deprecated, please use the destructive prop in\n   * conjunction with another button kind.\n   */\n  kind?: \"primary\" | \"secondary\" | \"tertiary\" | \"destructive\";\n  /**\n   * The t-shirt size of the button.\n   */\n  size?: Size & (\"sm\" | \"lg\");\n\n  /**\n   * Whether the button is an icon only button.\n   */\n  iconOnly?: boolean;\n\n  /**\n   * An icon to display within the button.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n}>;\n\ntype ButtonPropsFor<C extends React.ElementType> = ButtonOwnProps &\n  UnstyledButtonPropsFor<C>;\n\n/**\n * A button component that can be transformed into a link, but keep the button\n * styling using the `as` property.\n */\nexport const Button = forwardRef(function Button<\n  C extends React.ElementType = \"button\",\n>(\n  {\n    as,\n    kind: kindProp = \"primary\",\n    size = \"lg\",\n    children,\n    className,\n    iconOnly,\n    Icon,\n    destructive: destructiveProp,\n    disabled,\n    ...props\n  }: ButtonPropsFor<C> & { as?: C },\n  ref: ForwardedRef<C>,\n): React.ReactElement {\n  // Fallback for the deprecated \"destructive\" kind\n  const [kind, destructive] =\n    kindProp === \"destructive\"\n      ? [\"secondary\", true]\n      : [kindProp, destructiveProp];\n\n  const classes = classNames(styles.button, className, {\n    [styles[\"has-icon\"]]: Icon,\n    [styles[\"icon-only\"]]: iconOnly,\n    [styles.destructive]: destructive,\n  });\n\n  const iconSize = iconOnly && size === \"lg\" ? 24 : 20;\n\n  return (\n    <UnstyledButton\n      {...props}\n      as={as || (\"button\" as const)}\n      ref={ref as Ref<C>}\n      className={classes}\n      data-size={size}\n      data-kind={kind}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {Icon && (\n        <Icon\n          width={iconSize}\n          height={iconSize}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n      {children}\n    </UnstyledButton>\n  );\n}) as ButtonComponent;\n"],"mappings":";;;;;;;;;;AA+DA,IAAa,SAAS,WAAW,SAAS,OAGxC,EACE,IACA,MAAM,WAAW,WACjB,OAAO,MACP,UACA,WACA,UACA,MACA,aAAa,iBACb,UACA,GAAG,SAEL,KACoB;CAEpB,MAAM,CAAC,MAAM,eACX,aAAa,gBACT,CAAC,aAAa,KAAK,GACnB,CAAC,UAAU,gBAAgB;CAEjC,MAAM,UAAU,WAAW,sBAAO,QAAQ,WAAW;GAClD,sBAAO,cAAc;GACrB,sBAAO,eAAe;GACtB,sBAAO,cAAc;EACvB,CAAC;CAEF,MAAM,WAAW,YAAY,SAAS,OAAO,KAAK;AAElD,QACE,qBAAC,gBAAD;EACE,GAAI;EACJ,IAAI,MAAO;EACN;EACL,WAAW;EACX,aAAW;EACX,aAAW;EACX,UAAU;EACA;YARZ,CAUG,QACC,oBAAC,MAAD;GACE,OAAO;GACP,QAAQ;GACR,WAAW,sBAAO;GAClB,eAAa;GACb,CAAA,EAEH,SACc;;EAEnB"}

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

@@ -0,0 +1,13 @@
+//#region src/components/Button/Button.module.css
+var button = "_button_13vu4_8";
+var destructive = "_destructive_13vu4_110";
+var Button_module_default = {
+	button,
+	"icon-only": "_icon-only_13vu4_53",
+	"has-icon": "_has-icon_13vu4_60",
+	destructive
+};
+//#endregion
+exports.default = Button_module_default;
+
+//# sourceMappingURL=Button.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":["/*\nCopyright 2023, 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.button {\n  border-radius: var(--cpd-radius-pill-effect);\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--cpd-space-2x);\n  box-sizing: border-box;\n  font: var(--cpd-font-body-md-semibold);\n  transition-duration: 0.1s;\n  transition-property: color, background-color, border-color;\n}\n\na.button {\n  /* Make the width match that of a real button */\n  inline-size: max-content;\n\n  /* Buttons should not be underlined */\n  text-decoration: none;\n}\n\n.button > svg {\n  transition: color 0.1s;\n}\n\n.button[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  pointer-events: all !important;\n  color: var(--cpd-color-text-disabled) !important;\n}\n\n.button[aria-disabled=\"true\"] > svg {\n  color: var(--cpd-color-icon-disabled) !important;\n}\n\n/**\n * SIZES\n */\n\n.button[data-size=\"lg\"] {\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-8x);\n  min-block-size: var(--cpd-space-12x);\n\n  &.icon-only {\n    padding-inline: var(--cpd-space-2x);\n    block-size: var(--cpd-space-12x);\n    inline-size: var(--cpd-space-12x);\n  }\n}\n\n.button[data-size=\"lg\"].has-icon:not(.icon-only) {\n  padding-inline-start: var(--cpd-space-7x);\n}\n\n.button[data-size=\"sm\"] {\n  padding-block: var(--cpd-space-1x);\n  padding-inline: var(--cpd-space-5x);\n  min-block-size: var(--cpd-space-9x);\n\n  &.icon-only {\n    padding-inline: var(--cpd-space-1x);\n    block-size: var(--cpd-space-9x);\n    inline-size: var(--cpd-space-9x);\n  }\n}\n\n.button[data-size=\"sm\"].has-icon:not(.icon-only) {\n  padding-inline-start: var(--cpd-space-4x);\n}\n\n/**\n * KINDS\n */\n\n.button[data-kind=\"primary\"] {\n  color: var(--cpd-color-text-on-solid-primary);\n  background: var(--cpd-color-bg-action-primary-rest);\n  border-width: 0;\n}\n\n.button[data-kind=\"primary\"] > svg {\n  color: var(--cpd-color-icon-on-solid-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-primary-hovered);\n  }\n}\n\n.button[data-kind=\"primary\"]:active,\n.button[data-kind=\"primary\"][aria-expanded=\"true\"] {\n  background: var(--cpd-color-bg-action-primary-pressed);\n}\n\n.button[data-kind=\"primary\"][aria-disabled=\"true\"] {\n  /* !important to override destructive background */\n  background: var(--cpd-color-bg-subtle-primary) !important;\n}\n\n.button[data-kind=\"primary\"].destructive {\n  background: var(--cpd-color-bg-critical-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"primary\"].destructive:hover {\n    background: var(--cpd-color-bg-critical-hovered);\n  }\n}\n\n.button[data-kind=\"primary\"].destructive:active,\n.button[data-kind=\"primary\"].destructive[aria-expanded=\"true\"] {\n  /* TODO: We're waiting for this value to be formalized as a semantic token */\n  background: var(--cpd-color-red-1100);\n}\n\n.button[data-kind=\"secondary\"] {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n  color: var(--cpd-color-text-primary);\n  background: var(--cpd-color-bg-canvas-default);\n}\n\n.button[data-kind=\"secondary\"] > svg {\n  color: var(--cpd-color-icon-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"secondary\"]:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n    background: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.button[data-kind=\"secondary\"]:active,\n.button[data-kind=\"secondary\"][aria-expanded=\"true\"] {\n  border-color: var(--cpd-color-border-interactive-hovered);\n  background: var(--cpd-color-bg-subtle-primary);\n}\n\n.button[data-kind=\"secondary\"][aria-disabled=\"true\"] {\n  /* !important to override destructive values */\n  border-color: var(--cpd-color-border-interactive-secondary) !important;\n  background: var(--cpd-color-bg-subtle-secondary) !important;\n}\n\n.button[data-kind=\"secondary\"].destructive {\n  border-color: var(--cpd-color-border-critical-subtle);\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.button[data-kind=\"secondary\"].destructive > svg {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"secondary\"].destructive:hover {\n    border-color: var(--cpd-color-border-critical-hovered);\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n}\n\n.button[data-kind=\"secondary\"].destructive:active,\n.button[data-kind=\"secondary\"].destructive[aria-expanded=\"true\"] {\n  border-color: var(--cpd-color-border-critical-hovered);\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.button[data-kind=\"tertiary\"] {\n  border: none;\n  color: var(--cpd-color-text-primary);\n  text-decoration: underline;\n  background: transparent;\n}\n\n@media (hover) {\n  .button[data-kind=\"tertiary\"]:hover {\n    background: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.button[data-kind=\"tertiary\"]:active,\n.button[data-kind=\"tertiary\"][aria-expanded=\"true\"] {\n  background: var(--cpd-color-bg-subtle-primary);\n}\n\n.button[data-kind=\"tertiary\"][aria-disabled=\"true\"] {\n  color: var(--cpd-color-text-disabled);\n\n  /* !important to override destructive background */\n  background: transparent !important;\n}\n\n.button[data-kind=\"tertiary\"].destructive {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"tertiary\"].destructive:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n}\n\n.button[data-kind=\"tertiary\"].destructive:active,\n.button[data-kind=\"tertiary\"].destructive[aria-expanded=\"true\"] {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n@media (forced-colors: active) {\n  .button[data-kind=\"primary\"] {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,13 @@
+//#region src/components/Button/Button.module.css
+var button = "_button_13vu4_8";
+var destructive = "_destructive_13vu4_110";
+var Button_module_default = {
+	button,
+	"icon-only": "_icon-only_13vu4_53",
+	"has-icon": "_has-icon_13vu4_60",
+	destructive
+};
+//#endregion
+export { Button_module_default as default };
+
+//# sourceMappingURL=Button.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module.js","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":["/*\nCopyright 2023, 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.button {\n  border-radius: var(--cpd-radius-pill-effect);\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--cpd-space-2x);\n  box-sizing: border-box;\n  font: var(--cpd-font-body-md-semibold);\n  transition-duration: 0.1s;\n  transition-property: color, background-color, border-color;\n}\n\na.button {\n  /* Make the width match that of a real button */\n  inline-size: max-content;\n\n  /* Buttons should not be underlined */\n  text-decoration: none;\n}\n\n.button > svg {\n  transition: color 0.1s;\n}\n\n.button[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  pointer-events: all !important;\n  color: var(--cpd-color-text-disabled) !important;\n}\n\n.button[aria-disabled=\"true\"] > svg {\n  color: var(--cpd-color-icon-disabled) !important;\n}\n\n/**\n * SIZES\n */\n\n.button[data-size=\"lg\"] {\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-8x);\n  min-block-size: var(--cpd-space-12x);\n\n  &.icon-only {\n    padding-inline: var(--cpd-space-2x);\n    block-size: var(--cpd-space-12x);\n    inline-size: var(--cpd-space-12x);\n  }\n}\n\n.button[data-size=\"lg\"].has-icon:not(.icon-only) {\n  padding-inline-start: var(--cpd-space-7x);\n}\n\n.button[data-size=\"sm\"] {\n  padding-block: var(--cpd-space-1x);\n  padding-inline: var(--cpd-space-5x);\n  min-block-size: var(--cpd-space-9x);\n\n  &.icon-only {\n    padding-inline: var(--cpd-space-1x);\n    block-size: var(--cpd-space-9x);\n    inline-size: var(--cpd-space-9x);\n  }\n}\n\n.button[data-size=\"sm\"].has-icon:not(.icon-only) {\n  padding-inline-start: var(--cpd-space-4x);\n}\n\n/**\n * KINDS\n */\n\n.button[data-kind=\"primary\"] {\n  color: var(--cpd-color-text-on-solid-primary);\n  background: var(--cpd-color-bg-action-primary-rest);\n  border-width: 0;\n}\n\n.button[data-kind=\"primary\"] > svg {\n  color: var(--cpd-color-icon-on-solid-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-primary-hovered);\n  }\n}\n\n.button[data-kind=\"primary\"]:active,\n.button[data-kind=\"primary\"][aria-expanded=\"true\"] {\n  background: var(--cpd-color-bg-action-primary-pressed);\n}\n\n.button[data-kind=\"primary\"][aria-disabled=\"true\"] {\n  /* !important to override destructive background */\n  background: var(--cpd-color-bg-subtle-primary) !important;\n}\n\n.button[data-kind=\"primary\"].destructive {\n  background: var(--cpd-color-bg-critical-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"primary\"].destructive:hover {\n    background: var(--cpd-color-bg-critical-hovered);\n  }\n}\n\n.button[data-kind=\"primary\"].destructive:active,\n.button[data-kind=\"primary\"].destructive[aria-expanded=\"true\"] {\n  /* TODO: We're waiting for this value to be formalized as a semantic token */\n  background: var(--cpd-color-red-1100);\n}\n\n.button[data-kind=\"secondary\"] {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n  color: var(--cpd-color-text-primary);\n  background: var(--cpd-color-bg-canvas-default);\n}\n\n.button[data-kind=\"secondary\"] > svg {\n  color: var(--cpd-color-icon-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"secondary\"]:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n    background: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.button[data-kind=\"secondary\"]:active,\n.button[data-kind=\"secondary\"][aria-expanded=\"true\"] {\n  border-color: var(--cpd-color-border-interactive-hovered);\n  background: var(--cpd-color-bg-subtle-primary);\n}\n\n.button[data-kind=\"secondary\"][aria-disabled=\"true\"] {\n  /* !important to override destructive values */\n  border-color: var(--cpd-color-border-interactive-secondary) !important;\n  background: var(--cpd-color-bg-subtle-secondary) !important;\n}\n\n.button[data-kind=\"secondary\"].destructive {\n  border-color: var(--cpd-color-border-critical-subtle);\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.button[data-kind=\"secondary\"].destructive > svg {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"secondary\"].destructive:hover {\n    border-color: var(--cpd-color-border-critical-hovered);\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n}\n\n.button[data-kind=\"secondary\"].destructive:active,\n.button[data-kind=\"secondary\"].destructive[aria-expanded=\"true\"] {\n  border-color: var(--cpd-color-border-critical-hovered);\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.button[data-kind=\"tertiary\"] {\n  border: none;\n  color: var(--cpd-color-text-primary);\n  text-decoration: underline;\n  background: transparent;\n}\n\n@media (hover) {\n  .button[data-kind=\"tertiary\"]:hover {\n    background: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.button[data-kind=\"tertiary\"]:active,\n.button[data-kind=\"tertiary\"][aria-expanded=\"true\"] {\n  background: var(--cpd-color-bg-subtle-primary);\n}\n\n.button[data-kind=\"tertiary\"][aria-disabled=\"true\"] {\n  color: var(--cpd-color-text-disabled);\n\n  /* !important to override destructive background */\n  background: transparent !important;\n}\n\n.button[data-kind=\"tertiary\"].destructive {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"tertiary\"].destructive:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n}\n\n.button[data-kind=\"tertiary\"].destructive:active,\n.button[data-kind=\"tertiary\"].destructive[aria-expanded=\"true\"] {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n@media (forced-colors: active) {\n  .button[data-kind=\"primary\"] {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

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

@@ -1,54 +1,45 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const classNames = require("classnames");
-const IconButton_module = require("./IconButton.module.css.cjs");
-const UnstyledButton = require("../UnstyledButton.cjs");
-const IndicatorIcon = require("../../Icon/IndicatorIcon/IndicatorIcon.cjs");
-const Tooltip = require("../../Tooltip/Tooltip.cjs");
-const IconButton = React.forwardRef(function IconButton2({
-  kind = "primary",
-  children,
-  className,
-  indicator,
-  size = "32px",
-  style,
-  disabled,
-  destructive,
-  tooltip,
-  noBackground = false,
-  ...props
-}, ref) {
-  const classes = classNames(IconButton_module.default["icon-button"], className, {
-    [IconButton_module.default.destructive]: destructive,
-    [IconButton_module.default["no-background"]]: noBackground
-  });
-  const button = /* @__PURE__ */ jsxRuntime.jsx(
-    UnstyledButton.UnstyledButton,
-    {
-      as: "button",
-      ref,
-      className: classes,
-      style: {
-        "--cpd-icon-button-size": size,
-        ...style
-      },
-      disabled,
-      ...props,
-      "data-indicator": indicator,
-      "data-kind": kind,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        IndicatorIcon.IndicatorIcon,
-        {
-          indicator,
-          colour: disabled ? "var(--cpd-color-icon-disabled)" : void 0,
-          children: React.Children.only(children)
-        }
-      )
-    }
-  );
-  return tooltip ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { label: tooltip, children: button }) : button;
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_UnstyledButton = require("../UnstyledButton.cjs");
+const require_IconButton_module = require("./IconButton.module.cjs");
+const require_IndicatorIcon = require("../../Icon/IndicatorIcon/IndicatorIcon.cjs");
+const require_Tooltip = require("../../Tooltip/Tooltip.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Button/IconButton/IconButton.tsx
+/**
+* Display an icon as a button. Can render an indicator
+*/
+var IconButton = (0, react.forwardRef)(function IconButton({ kind = "primary", children, className, indicator, size = "32px", style, disabled, destructive, tooltip, noBackground = false, ...props }, ref) {
+	const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UnstyledButton.UnstyledButton, {
+		as: "button",
+		ref,
+		className: (0, classnames.default)(require_IconButton_module.default["icon-button"], className, {
+			[require_IconButton_module.default.destructive]: destructive,
+			[require_IconButton_module.default["no-background"]]: noBackground
+		}),
+		style: {
+			"--cpd-icon-button-size": size,
+			...style
+		},
+		disabled,
+		...props,
+		"data-indicator": indicator,
+		"data-kind": kind,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IndicatorIcon.IndicatorIcon, {
+			indicator,
+			colour: disabled ? "var(--cpd-color-icon-disabled)" : void 0,
+			children: react.default.Children.only(children)
+		})
+	});
+	return tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+		label: tooltip,
+		children: button
+	}) : button;
 });
+//#endregion
 exports.IconButton = IconButton;
-//# sourceMappingURL=IconButton.cjs.map
+
+//# sourceMappingURL=IconButton.cjs.map

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"}