@vector-im/compound-web 8.3.6 → 9.0.0

package/dist/components/ReleaseAnnouncement/useReleaseAnnouncement.js

@@ -1,64 +1,53 @@
-import { useId, useFloating, offset, shift, arrow, autoUpdate, limitShift, useRole, useInteractions } from "@floating-ui/react";
-import { useRef, useMemo } from "react";
-function useReleaseAnnouncement({
-  open,
-  header,
-  description,
-  closeLabel,
-  placement,
-  onClick,
-  displayArrow
-}) {
-  const labelId = useId();
-  const descriptionId = useId();
-  const arrowRef = useRef(null);
-  const data = useFloating({
-    placement,
-    open,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      // arrow height 12px + 4px padding
-      offset(16),
-      shift({ limiter: limitShift({ offset: 50 }) }),
-      // add the little arrow along with the floating content
-      displayArrow && arrow({
-        element: arrowRef
-      })
-    ]
-  });
-  const role = useRole(data.context);
-  const interactions = useInteractions([role]);
-  return useMemo(
-    () => ({
-      open,
-      ...data,
-      ...interactions,
-      labelId,
-      descriptionId,
-      header,
-      description,
-      closeLabel,
-      onClick,
-      displayArrow,
-      arrowRef
-    }),
-    [
-      open,
-      role,
-      interactions,
-      data,
-      labelId,
-      descriptionId,
-      header,
-      description,
-      closeLabel,
-      onClick,
-      displayArrow,
-      arrowRef
-    ]
-  );
+import { useMemo, useRef } from "react";
+import { arrow, autoUpdate, limitShift, offset, shift, useFloating, useId as useId$1, useInteractions, useRole } from "@floating-ui/react";
+//#region src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx
+/**
+* This hook provides the necessary props to create a release announcement.
+*/
+function useReleaseAnnouncement({ open, header, description, closeLabel, placement, onClick, displayArrow }) {
+	const labelId = useId$1();
+	const descriptionId = useId$1();
+	const arrowRef = useRef(null);
+	const data = useFloating({
+		placement,
+		open,
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(16),
+			shift({ limiter: limitShift({ offset: 50 }) }),
+			displayArrow && arrow({ element: arrowRef })
+		]
+	});
+	const role = useRole(data.context);
+	const interactions = useInteractions([role]);
+	return useMemo(() => ({
+		open,
+		...data,
+		...interactions,
+		labelId,
+		descriptionId,
+		header,
+		description,
+		closeLabel,
+		onClick,
+		displayArrow,
+		arrowRef
+	}), [
+		open,
+		role,
+		interactions,
+		data,
+		labelId,
+		descriptionId,
+		header,
+		description,
+		closeLabel,
+		onClick,
+		displayArrow,
+		arrowRef
+	]);
 }
-export {
-  useReleaseAnnouncement
-};
-//# sourceMappingURL=useReleaseAnnouncement.js.map
+//#endregion
+export { useReleaseAnnouncement };
+
+//# sourceMappingURL=useReleaseAnnouncement.js.map

package/dist/components/ReleaseAnnouncement/useReleaseAnnouncement.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReleaseAnnouncement.js","sources":["../../../src/components/ReleaseAnnouncement/useReleaseAnnouncement.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 {\n  arrow,\n  autoUpdate,\n  limitShift,\n  offset,\n  type Placement,\n  shift,\n  useFloating,\n  useId,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { type MouseEventHandler, useMemo, useRef } from \"react\";\n\ninterface UseReleaseAnnouncementProps {\n  /**\n   * Whether the release announcement is open.\n   */\n  open: boolean;\n  /**\n   * The header of the release announcement.\n   */\n  header: string;\n  /**\n   * The description of the release announcement.\n   */\n  description: string;\n  /**\n   * The label of the close button.\n   */\n  closeLabel: string;\n  /**\n   * The placement of the release announcement.\n   */\n  placement: Placement;\n  /**\n   * The event handler for the close button.\n   */\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Whether to display an arrow.\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * This hook provides the necessary props to create a release announcement.\n */\nexport function useReleaseAnnouncement({\n  open,\n  header,\n  description,\n  closeLabel,\n  placement,\n  onClick,\n  displayArrow,\n}: UseReleaseAnnouncementProps) {\n  // Set on `aria-labelledby` attribute\n  const labelId = useId();\n  // Set on `aria-describedby` attribute\n  const descriptionId = useId();\n  const arrowRef = useRef(null);\n\n  const data = useFloating({\n    placement,\n    open,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      // arrow height 12px + 4px padding\n      offset(16),\n      shift({ limiter: limitShift({ offset: 50 }) }),\n      // add the little arrow along with the floating content\n      displayArrow &&\n        arrow({\n          element: arrowRef,\n        }),\n    ],\n  });\n\n  // The role is used to determine the correct aria role for the floating content.\n  const role = useRole(data.context);\n  const interactions = useInteractions([role]);\n\n  // Put in the context all the useful data and interactions\n  return useMemo(\n    () => ({\n      open,\n      ...data,\n      ...interactions,\n      labelId,\n      descriptionId,\n      header,\n      description,\n      closeLabel,\n      onClick,\n      displayArrow,\n      arrowRef,\n    }),\n    [\n      open,\n      role,\n      interactions,\n      data,\n      labelId,\n      descriptionId,\n      header,\n      description,\n      closeLabel,\n      onClick,\n      displayArrow,\n      arrowRef,\n    ],\n  );\n}\n"],"names":[],"mappings":";;AAuDO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAE9B,QAAM,UAAU,MAAA;AAEhB,QAAM,gBAAgB,MAAA;AACtB,QAAM,WAAW,OAAO,IAAI;AAE5B,QAAM,OAAO,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,YAAY;AAAA;AAAA,MAEV,OAAO,EAAE;AAAA,MACT,MAAM,EAAE,SAAS,WAAW,EAAE,QAAQ,GAAA,CAAI,GAAG;AAAA;AAAA,MAE7C,gBACE,MAAM;AAAA,QACJ,SAAS;AAAA,MAAA,CACV;AAAA,IAAA;AAAA,EACL,CACD;AAGD,QAAM,OAAO,QAAQ,KAAK,OAAO;AACjC,QAAM,eAAe,gBAAgB,CAAC,IAAI,CAAC;AAG3C,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"useReleaseAnnouncement.js","names":[],"sources":["../../../src/components/ReleaseAnnouncement/useReleaseAnnouncement.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 {\n  arrow,\n  autoUpdate,\n  limitShift,\n  offset,\n  type Placement,\n  shift,\n  useFloating,\n  useId,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { type MouseEventHandler, useMemo, useRef } from \"react\";\n\ninterface UseReleaseAnnouncementProps {\n  /**\n   * Whether the release announcement is open.\n   */\n  open: boolean;\n  /**\n   * The header of the release announcement.\n   */\n  header: string;\n  /**\n   * The description of the release announcement.\n   */\n  description: string;\n  /**\n   * The label of the close button.\n   */\n  closeLabel: string;\n  /**\n   * The placement of the release announcement.\n   */\n  placement: Placement;\n  /**\n   * The event handler for the close button.\n   */\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Whether to display an arrow.\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * This hook provides the necessary props to create a release announcement.\n */\nexport function useReleaseAnnouncement({\n  open,\n  header,\n  description,\n  closeLabel,\n  placement,\n  onClick,\n  displayArrow,\n}: UseReleaseAnnouncementProps) {\n  // Set on `aria-labelledby` attribute\n  const labelId = useId();\n  // Set on `aria-describedby` attribute\n  const descriptionId = useId();\n  const arrowRef = useRef(null);\n\n  const data = useFloating({\n    placement,\n    open,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      // arrow height 12px + 4px padding\n      offset(16),\n      shift({ limiter: limitShift({ offset: 50 }) }),\n      // add the little arrow along with the floating content\n      displayArrow &&\n        arrow({\n          element: arrowRef,\n        }),\n    ],\n  });\n\n  // The role is used to determine the correct aria role for the floating content.\n  const role = useRole(data.context);\n  const interactions = useInteractions([role]);\n\n  // Put in the context all the useful data and interactions\n  return useMemo(\n    () => ({\n      open,\n      ...data,\n      ...interactions,\n      labelId,\n      descriptionId,\n      header,\n      description,\n      closeLabel,\n      onClick,\n      displayArrow,\n      arrowRef,\n    }),\n    [\n      open,\n      role,\n      interactions,\n      data,\n      labelId,\n      descriptionId,\n      header,\n      description,\n      closeLabel,\n      onClick,\n      displayArrow,\n      arrowRef,\n    ],\n  );\n}\n"],"mappings":";;;;;;AAuDA,SAAgB,uBAAuB,EACrC,MACA,QACA,aACA,YACA,WACA,SACA,gBAC8B;CAE9B,MAAM,UAAU,SAAO;CAEvB,MAAM,gBAAgB,SAAO;CAC7B,MAAM,WAAW,OAAO,KAAK;CAE7B,MAAM,OAAO,YAAY;EACvB;EACA;EACA,sBAAsB;EACtB,YAAY;GAEV,OAAO,GAAG;GACV,MAAM,EAAE,SAAS,WAAW,EAAE,QAAQ,IAAI,CAAC,EAAE,CAAC;GAE9C,gBACE,MAAM,EACJ,SAAS,UACV,CAAC;GACL;EACF,CAAC;CAGF,MAAM,OAAO,QAAQ,KAAK,QAAQ;CAClC,MAAM,eAAe,gBAAgB,CAAC,KAAK,CAAC;AAG5C,QAAO,eACE;EACL;EACA,GAAG;EACH,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}

package/dist/components/Search/Search.cjs

@@ -1,38 +1,45 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const Search_module = require("./Search.module.css.cjs");
-const SearchIcon = require("@vector-im/compound-design-tokens/assets/web/icons/search");
-const Field = require("../Form/Field.cjs");
-const Label = require("../Form/Label.cjs");
-const Search = React.forwardRef(function Search2({
-  className,
-  onChange,
-  // TODO: i18n needs to be setup
-  placeholder = "Search…",
-  name,
-  ...props
-}, ref) {
-  const classes = classNames(Search_module.default.search, className);
-  const id = React.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(Field.Field, { name, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Label.Label, { className: classes, htmlFor: id, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: Search_module.default.icon, width: 20, height: 20 }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref,
-        ...props,
-        id,
-        name,
-        type: "search",
-        placeholder,
-        onChange,
-        className: Search_module.default.input
-      }
-    )
-  ] }) });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Label = require("../Form/Label.cjs");
+const require_Field = require("../Form/Field.cjs");
+const require_Search_module = require("./Search.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _vector_im_compound_design_tokens_assets_web_icons_search = require("@vector-im/compound-design-tokens/assets/web/icons/search");
+_vector_im_compound_design_tokens_assets_web_icons_search = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_search);
+//#region src/components/Search/Search.tsx
+/**
+* A standalone search component
+*/
+var Search = (0, react.forwardRef)(function Search({ className, onChange, placeholder = "Search…", name, ...props }, ref) {
+	const classes = (0, classnames.default)(require_Search_module.default.search, className);
+	const id = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Field.Field, {
+		name,
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Label.Label, {
+			className: classes,
+			htmlFor: id,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_search.default, {
+				className: require_Search_module.default.icon,
+				width: 20,
+				height: 20
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref,
+				...props,
+				id,
+				name,
+				type: "search",
+				placeholder,
+				onChange,
+				className: require_Search_module.default.input
+			})]
+		})
+	});
 });
+//#endregion
 exports.Search = Search;
-//# sourceMappingURL=Search.cjs.map
+
+//# sourceMappingURL=Search.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.cjs","sources":["../../../src/components/Search/Search.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 classnames from \"classnames\";\nimport React, { type ComponentProps, forwardRef, useId } from \"react\";\nimport styles from \"./Search.module.css\";\nimport { Field, Label } from \"../Form\";\n\nimport SearchIcon from \"@vector-im/compound-design-tokens/assets/web/icons/search\";\n\ntype SearchProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n  /**\n   * The input placeholder.\n   * @default \"Search…\"\n   */\n  placeholder?: string;\n  /**\n   * The field name.\n   */\n  name: React.ComponentProps<typeof Field>[\"name\"];\n} & Omit<ComponentProps<\"input\">, \"id\" | \"type\">;\n\n/**\n * A standalone search component\n */\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n  {\n    className,\n    onChange,\n    // TODO: i18n needs to be setup\n    placeholder = \"Search…\",\n    name,\n    ...props\n  }: SearchProps,\n  ref,\n) {\n  const classes = classnames(styles.search, className);\n  const id = useId();\n  return (\n    <Field name={name} asChild>\n      <Label className={classes} htmlFor={id}>\n        <SearchIcon className={styles.icon} width={20} height={20} />\n        <input\n          ref={ref}\n          {...props}\n          id={id}\n          name={name}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={onChange}\n          className={styles.input}\n        />\n      </Label>\n    </Field>\n  );\n});\n"],"names":["forwardRef","Search","classnames","styles","useId","jsx","Field","Label"],"mappings":";;;;;;;;;AAiCO,MAAM,SAASA,MAAAA,WAA0C,SAASC,QACvE;AAAA,EACE;AAAA,EACA;AAAA;AAAA,EAEA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAUC,WAAWC,sBAAO,QAAQ,SAAS;AACnD,QAAM,KAAKC,MAAAA,MAAA;AACX,SACEC,2BAAAA,IAACC,MAAAA,OAAA,EAAM,MAAY,SAAO,MACxB,0CAACC,MAAAA,OAAA,EAAM,WAAW,SAAS,SAAS,IAClC,UAAA;AAAA,IAAAF,+BAAC,cAAW,WAAWF,cAAAA,QAAO,MAAM,OAAO,IAAI,QAAQ,IAAI;AAAA,IAC3DE,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,WAAWF,cAAAA,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACpB,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;;"}
+{"version":3,"file":"Search.cjs","names":[],"sources":["../../../src/components/Search/Search.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 classnames from \"classnames\";\nimport React, { type ComponentProps, forwardRef, useId } from \"react\";\nimport styles from \"./Search.module.css\";\nimport { Field, Label } from \"../Form\";\n\nimport SearchIcon from \"@vector-im/compound-design-tokens/assets/web/icons/search\";\n\ntype SearchProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n  /**\n   * The input placeholder.\n   * @default \"Search…\"\n   */\n  placeholder?: string;\n  /**\n   * The field name.\n   */\n  name: React.ComponentProps<typeof Field>[\"name\"];\n} & Omit<ComponentProps<\"input\">, \"id\" | \"type\">;\n\n/**\n * A standalone search component\n */\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n  {\n    className,\n    onChange,\n    // TODO: i18n needs to be setup\n    placeholder = \"Search…\",\n    name,\n    ...props\n  }: SearchProps,\n  ref,\n) {\n  const classes = classnames(styles.search, className);\n  const id = useId();\n  return (\n    <Field name={name} asChild>\n      <Label className={classes} htmlFor={id}>\n        <SearchIcon className={styles.icon} width={20} height={20} />\n        <input\n          ref={ref}\n          {...props}\n          id={id}\n          name={name}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={onChange}\n          className={styles.input}\n        />\n      </Label>\n    </Field>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,IAAa,UAAA,GAAA,MAAA,YAAmD,SAAS,OACvE,EACE,WACA,UAEA,cAAc,WACd,MACA,GAAG,SAEL,KACA;CACA,MAAM,WAAA,GAAA,WAAA,SAAqB,sBAAA,QAAO,QAAQ,UAAU;CACpD,MAAM,MAAA,GAAA,MAAA,QAAY;AAClB,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAD;EAAa;EAAM,SAAA;YACjB,iBAAA,GAAA,kBAAA,MAAC,cAAA,OAAD;GAAO,WAAW;GAAS,SAAS;aAApC,CACE,iBAAA,GAAA,kBAAA,KAAC,0DAAA,SAAD;IAAY,WAAW,sBAAA,QAAO;IAAM,OAAO;IAAI,QAAQ;IAAM,CAAA,EAC7D,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACO;IACL,GAAI;IACA;IACE;IACN,MAAK;IACQ;IACH;IACV,WAAW,sBAAA,QAAO;IAClB,CAAA,CACI;;EACF,CAAA;EAEV"}

package/dist/components/Search/Search.js

@@ -1,38 +1,41 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Label } from "../Form/Label.js";
+import { Field } from "../Form/Field.js";
+import Search_module_default from "./Search.module.js";
 import classNames from "classnames";
 import { forwardRef, useId } from "react";
-import styles from "./Search.module.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import SearchIcon from "@vector-im/compound-design-tokens/assets/web/icons/search";
-import { Field } from "../Form/Field.js";
-import { Label } from "../Form/Label.js";
-const Search = forwardRef(function Search2({
-  className,
-  onChange,
-  // TODO: i18n needs to be setup
-  placeholder = "Search…",
-  name,
-  ...props
-}, ref) {
-  const classes = classNames(styles.search, className);
-  const id = useId();
-  return /* @__PURE__ */ jsx(Field, { name, asChild: true, children: /* @__PURE__ */ jsxs(Label, { className: classes, htmlFor: id, children: [
-    /* @__PURE__ */ jsx(SearchIcon, { className: styles.icon, width: 20, height: 20 }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        ...props,
-        id,
-        name,
-        type: "search",
-        placeholder,
-        onChange,
-        className: styles.input
-      }
-    )
-  ] }) });
+//#region src/components/Search/Search.tsx
+/**
+* A standalone search component
+*/
+var Search = forwardRef(function Search({ className, onChange, placeholder = "Search…", name, ...props }, ref) {
+	const classes = classNames(Search_module_default.search, className);
+	const id = useId();
+	return /* @__PURE__ */ jsx(Field, {
+		name,
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Label, {
+			className: classes,
+			htmlFor: id,
+			children: [/* @__PURE__ */ jsx(SearchIcon, {
+				className: Search_module_default.icon,
+				width: 20,
+				height: 20
+			}), /* @__PURE__ */ jsx("input", {
+				ref,
+				...props,
+				id,
+				name,
+				type: "search",
+				placeholder,
+				onChange,
+				className: Search_module_default.input
+			})]
+		})
+	});
 });
-export {
-  Search
-};
-//# sourceMappingURL=Search.js.map
+//#endregion
+export { Search };
+
+//# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../src/components/Search/Search.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 classnames from \"classnames\";\nimport React, { type ComponentProps, forwardRef, useId } from \"react\";\nimport styles from \"./Search.module.css\";\nimport { Field, Label } from \"../Form\";\n\nimport SearchIcon from \"@vector-im/compound-design-tokens/assets/web/icons/search\";\n\ntype SearchProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n  /**\n   * The input placeholder.\n   * @default \"Search…\"\n   */\n  placeholder?: string;\n  /**\n   * The field name.\n   */\n  name: React.ComponentProps<typeof Field>[\"name\"];\n} & Omit<ComponentProps<\"input\">, \"id\" | \"type\">;\n\n/**\n * A standalone search component\n */\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n  {\n    className,\n    onChange,\n    // TODO: i18n needs to be setup\n    placeholder = \"Search…\",\n    name,\n    ...props\n  }: SearchProps,\n  ref,\n) {\n  const classes = classnames(styles.search, className);\n  const id = useId();\n  return (\n    <Field name={name} asChild>\n      <Label className={classes} htmlFor={id}>\n        <SearchIcon className={styles.icon} width={20} height={20} />\n        <input\n          ref={ref}\n          {...props}\n          id={id}\n          name={name}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={onChange}\n          className={styles.input}\n        />\n      </Label>\n    </Field>\n  );\n});\n"],"names":["Search","classnames"],"mappings":";;;;;;;AAiCO,MAAM,SAAS,WAA0C,SAASA,QACvE;AAAA,EACE;AAAA,EACA;AAAA;AAAA,EAEA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAUC,WAAW,OAAO,QAAQ,SAAS;AACnD,QAAM,KAAK,MAAA;AACX,SACE,oBAAC,OAAA,EAAM,MAAY,SAAO,MACxB,+BAAC,OAAA,EAAM,WAAW,SAAS,SAAS,IAClC,UAAA;AAAA,IAAA,oBAAC,cAAW,WAAW,OAAO,MAAM,OAAO,IAAI,QAAQ,IAAI;AAAA,IAC3D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,WAAW,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACpB,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}
+{"version":3,"file":"Search.js","names":[],"sources":["../../../src/components/Search/Search.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 classnames from \"classnames\";\nimport React, { type ComponentProps, forwardRef, useId } from \"react\";\nimport styles from \"./Search.module.css\";\nimport { Field, Label } from \"../Form\";\n\nimport SearchIcon from \"@vector-im/compound-design-tokens/assets/web/icons/search\";\n\ntype SearchProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n  /**\n   * The input placeholder.\n   * @default \"Search…\"\n   */\n  placeholder?: string;\n  /**\n   * The field name.\n   */\n  name: React.ComponentProps<typeof Field>[\"name\"];\n} & Omit<ComponentProps<\"input\">, \"id\" | \"type\">;\n\n/**\n * A standalone search component\n */\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n  {\n    className,\n    onChange,\n    // TODO: i18n needs to be setup\n    placeholder = \"Search…\",\n    name,\n    ...props\n  }: SearchProps,\n  ref,\n) {\n  const classes = classnames(styles.search, className);\n  const id = useId();\n  return (\n    <Field name={name} asChild>\n      <Label className={classes} htmlFor={id}>\n        <SearchIcon className={styles.icon} width={20} height={20} />\n        <input\n          ref={ref}\n          {...props}\n          id={id}\n          name={name}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={onChange}\n          className={styles.input}\n        />\n      </Label>\n    </Field>\n  );\n});\n"],"mappings":";;;;;;;;;;;AAiCA,IAAa,SAAS,WAA0C,SAAS,OACvE,EACE,WACA,UAEA,cAAc,WACd,MACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,WAAW,sBAAO,QAAQ,UAAU;CACpD,MAAM,KAAK,OAAO;AAClB,QACE,oBAAC,OAAD;EAAa;EAAM,SAAA;YACjB,qBAAC,OAAD;GAAO,WAAW;GAAS,SAAS;aAApC,CACE,oBAAC,YAAD;IAAY,WAAW,sBAAO;IAAM,OAAO;IAAI,QAAQ;IAAM,CAAA,EAC7D,oBAAC,SAAD;IACO;IACL,GAAI;IACA;IACE;IACN,MAAK;IACQ;IACH;IACV,WAAW,sBAAO;IAClB,CAAA,CACI;;EACF,CAAA;EAEV"}

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

@@ -0,0 +1,9 @@
+var Search_module_default = {
+	search: "_search_b2pjl_8",
+	icon: "_icon_b2pjl_37",
+	input: "_input_b2pjl_52"
+};
+//#endregion
+exports.default = Search_module_default;
+
+//# sourceMappingURL=Search.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.module.cjs","names":[],"sources":["../../../src/components/Search/Search.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.search {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n  border-radius: 9999px;\n  block-size: 36px;\n  box-sizing: border-box;\n  color: var(--cpd-color-text-primary);\n  display: flex;\n\n  /* !important to override Field's default flex settings */\n  flex-direction: row !important;\n  gap: var(--cpd-space-2x) !important;\n  align-items: center;\n  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);\n}\n\n@media (hover) {\n  .search:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n  }\n}\n\n.search:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.search:focus-within {\n  border-color: currentcolor;\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  flex-shrink: 0;\n}\n\n@media (hover) {\n  .search:hover .icon {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.search:active .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.input {\n  border: 0;\n  background: inherit;\n  outline: 0;\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.input::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n.input:focus::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n@media (hover) {\n  .search:hover .input::placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,9 @@
+var Search_module_default = {
+	search: "_search_b2pjl_8",
+	icon: "_icon_b2pjl_37",
+	input: "_input_b2pjl_52"
+};
+//#endregion
+export { Search_module_default as default };
+
+//# sourceMappingURL=Search.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.module.js","names":[],"sources":["../../../src/components/Search/Search.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.search {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n  border-radius: 9999px;\n  block-size: 36px;\n  box-sizing: border-box;\n  color: var(--cpd-color-text-primary);\n  display: flex;\n\n  /* !important to override Field's default flex settings */\n  flex-direction: row !important;\n  gap: var(--cpd-space-2x) !important;\n  align-items: center;\n  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);\n}\n\n@media (hover) {\n  .search:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n  }\n}\n\n.search:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.search:focus-within {\n  border-color: currentcolor;\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  flex-shrink: 0;\n}\n\n@media (hover) {\n  .search:hover .icon {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.search:active .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.input {\n  border: 0;\n  background: inherit;\n  outline: 0;\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.input::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n.input:focus::placeholder {\n  color: var(--cpd-color-text-secondary);\n}\n\n@media (hover) {\n  .search:hover .input::placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n}\n"],"mappings":""}

package/dist/components/Separator/Separator.cjs

@@ -1,59 +1,36 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const RadixSeparator = require("@radix-ui/react-separator");
-const React = require("react");
-const Separator_module = require("./Separator.module.css.cjs");
-const react = require("@floating-ui/react");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const RadixSeparator__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixSeparator);
-const SPACING_CUSTOM_PROP = "--cpd-separator-spacing";
-const Separator = React.forwardRef(
-  ({
-    className,
-    spacing,
-    // Default provided via global.css
-    kind = "primary",
-    ...props
-  }, theirRef) => {
-    const classes = classNames(Separator_module.default.separator, className);
-    const ourRef = React.useRef(null);
-    const ref = react.useMergeRefs([ourRef, theirRef]);
-    React.useEffect(() => {
-      const style = ourRef.current?.style;
-      if (spacing) {
-        style?.setProperty(SPACING_CUSTOM_PROP, spacing);
-      } else {
-        style?.removeProperty(SPACING_CUSTOM_PROP);
-      }
-    }, [spacing]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSeparator__namespace.Root,
-      {
-        ...props,
-        className: classes,
-        ref,
-        "data-kind": kind
-      }
-    );
-  }
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Separator_module = require("./Separator.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _floating_ui_react = require("@floating-ui/react");
+let _radix_ui_react_separator = require("@radix-ui/react-separator");
+_radix_ui_react_separator = require_runtime.__toESM(_radix_ui_react_separator);
+//#region src/components/Separator/Separator.tsx
+var SPACING_CUSTOM_PROP = "--cpd-separator-spacing";
+/**
+* A separator component.
+*/
+var Separator = (0, react.forwardRef)(({ className, spacing, kind = "primary", ...props }, theirRef) => {
+	const classes = (0, classnames.default)(require_Separator_module.default.separator, className);
+	const ourRef = (0, react.useRef)(null);
+	const ref = (0, _floating_ui_react.useMergeRefs)([ourRef, theirRef]);
+	(0, react.useEffect)(() => {
+		const style = ourRef.current?.style;
+		if (spacing) style?.setProperty(SPACING_CUSTOM_PROP, spacing);
+		else style?.removeProperty(SPACING_CUSTOM_PROP);
+	}, [spacing]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_separator.Root, {
+		...props,
+		className: classes,
+		ref,
+		"data-kind": kind
+	});
+});
 Separator.displayName = "Separator";
+//#endregion
 exports.Separator = Separator;
-//# sourceMappingURL=Separator.cjs.map
+
+//# sourceMappingURL=Separator.cjs.map

package/dist/components/Separator/Separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.cjs","sources":["../../../src/components/Separator/Separator.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 * as RadixSeparator from \"@radix-ui/react-separator\";\nimport React, {\n  type ComponentProps,\n  type PropsWithoutRef,\n  type Ref,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport styles from \"./Separator.module.css\";\nimport { useMergeRefs } from \"@floating-ui/react\";\n\ntype SeparatorProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The spacing on either side of the separator.\n   * @default var(--cpd-space-2x)\n   */\n  spacing?: string;\n  /**\n   * The style of separator.\n   * @default primary\n   */\n  kind?: \"primary\" | \"secondary\" | \"section\";\n} & ComponentProps<typeof RadixSeparator.Root>;\n\nconst SPACING_CUSTOM_PROP = \"--cpd-separator-spacing\";\n\n/**\n * A separator component.\n */\nexport const Separator = forwardRef(\n  (\n    {\n      className,\n      spacing, // Default provided via global.css\n      kind = \"primary\",\n      ...props\n    }: PropsWithoutRef<SeparatorProps>,\n    theirRef?: Ref<HTMLDivElement>,\n  ) => {\n    const classes = classnames(styles.separator, className);\n    const ourRef = useRef<HTMLDivElement | null>(null);\n    const ref = useMergeRefs([ourRef, theirRef]);\n\n    useEffect(() => {\n      const style = ourRef.current?.style;\n      if (spacing) {\n        style?.setProperty(SPACING_CUSTOM_PROP, spacing);\n      } else {\n        style?.removeProperty(SPACING_CUSTOM_PROP);\n      }\n    }, [spacing]);\n\n    return (\n      <RadixSeparator.Root\n        {...props}\n        className={classes}\n        ref={ref}\n        data-kind={kind}\n      />\n    );\n  },\n);\n\nSeparator.displayName = \"Separator\";\n"],"names":["forwardRef","classnames","styles","useRef","useMergeRefs","useEffect","jsx","RadixSeparator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,sBAAsB;AAKrB,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,GAEL,aACG;AACH,UAAM,UAAUC,WAAWC,yBAAO,WAAW,SAAS;AACtD,UAAM,SAASC,MAAAA,OAA8B,IAAI;AACjD,UAAM,MAAMC,MAAAA,aAAa,CAAC,QAAQ,QAAQ,CAAC;AAE3CC,UAAAA,UAAU,MAAM;AACd,YAAM,QAAQ,OAAO,SAAS;AAC9B,UAAI,SAAS;AACX,eAAO,YAAY,qBAAqB,OAAO;AAAA,MACjD,OAAO;AACL,eAAO,eAAe,mBAAmB;AAAA,MAC3C;AAAA,IACF,GAAG,CAAC,OAAO,CAAC;AAEZ,WACEC,2BAAAA;AAAAA,MAACC,0BAAe;AAAA,MAAf;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX;AAAA,QACA,aAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AACF;AAEA,UAAU,cAAc;;"}
+{"version":3,"file":"Separator.cjs","names":[],"sources":["../../../src/components/Separator/Separator.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 * as RadixSeparator from \"@radix-ui/react-separator\";\nimport React, {\n  type ComponentProps,\n  type PropsWithoutRef,\n  type Ref,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport styles from \"./Separator.module.css\";\nimport { useMergeRefs } from \"@floating-ui/react\";\n\ntype SeparatorProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The spacing on either side of the separator.\n   * @default var(--cpd-space-2x)\n   */\n  spacing?: string;\n  /**\n   * The style of separator.\n   * @default primary\n   */\n  kind?: \"primary\" | \"secondary\" | \"section\";\n} & ComponentProps<typeof RadixSeparator.Root>;\n\nconst SPACING_CUSTOM_PROP = \"--cpd-separator-spacing\";\n\n/**\n * A separator component.\n */\nexport const Separator = forwardRef(\n  (\n    {\n      className,\n      spacing, // Default provided via global.css\n      kind = \"primary\",\n      ...props\n    }: PropsWithoutRef<SeparatorProps>,\n    theirRef?: Ref<HTMLDivElement>,\n  ) => {\n    const classes = classnames(styles.separator, className);\n    const ourRef = useRef<HTMLDivElement | null>(null);\n    const ref = useMergeRefs([ourRef, theirRef]);\n\n    useEffect(() => {\n      const style = ourRef.current?.style;\n      if (spacing) {\n        style?.setProperty(SPACING_CUSTOM_PROP, spacing);\n      } else {\n        style?.removeProperty(SPACING_CUSTOM_PROP);\n      }\n    }, [spacing]);\n\n    return (\n      <RadixSeparator.Root\n        {...props}\n        className={classes}\n        ref={ref}\n        data-kind={kind}\n      />\n    );\n  },\n);\n\nSeparator.displayName = \"Separator\";\n"],"mappings":";;;;;;;;;;;AAqCA,IAAM,sBAAsB;;;;AAK5B,IAAa,aAAA,GAAA,MAAA,aAET,EACE,WACA,SACA,OAAO,WACP,GAAG,SAEL,aACG;CACH,MAAM,WAAA,GAAA,WAAA,SAAqB,yBAAA,QAAO,WAAW,UAAU;CACvD,MAAM,UAAA,GAAA,MAAA,QAAuC,KAAK;CAClD,MAAM,OAAA,GAAA,mBAAA,cAAmB,CAAC,QAAQ,SAAS,CAAC;AAE5C,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,QAAQ,OAAO,SAAS;AAC9B,MAAI,QACF,QAAO,YAAY,qBAAqB,QAAQ;MAEhD,QAAO,eAAe,oBAAoB;IAE3C,CAAC,QAAQ,CAAC;AAEb,QACE,iBAAA,GAAA,kBAAA,KAAC,0BAAe,MAAhB;EACE,GAAI;EACJ,WAAW;EACN;EACL,aAAW;EACX,CAAA;EAGP;AAED,UAAU,cAAc"}

package/dist/components/Separator/Separator.js

@@ -1,42 +1,32 @@
-import { jsx } from "react/jsx-runtime";
+import Separator_module_default from "./Separator.module.js";
 import classNames from "classnames";
-import * as RadixSeparator from "@radix-ui/react-separator";
-import { forwardRef, useRef, useEffect } from "react";
-import styles from "./Separator.module.css.js";
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { useMergeRefs } from "@floating-ui/react";
-const SPACING_CUSTOM_PROP = "--cpd-separator-spacing";
-const Separator = forwardRef(
-  ({
-    className,
-    spacing,
-    // Default provided via global.css
-    kind = "primary",
-    ...props
-  }, theirRef) => {
-    const classes = classNames(styles.separator, className);
-    const ourRef = useRef(null);
-    const ref = useMergeRefs([ourRef, theirRef]);
-    useEffect(() => {
-      const style = ourRef.current?.style;
-      if (spacing) {
-        style?.setProperty(SPACING_CUSTOM_PROP, spacing);
-      } else {
-        style?.removeProperty(SPACING_CUSTOM_PROP);
-      }
-    }, [spacing]);
-    return /* @__PURE__ */ jsx(
-      RadixSeparator.Root,
-      {
-        ...props,
-        className: classes,
-        ref,
-        "data-kind": kind
-      }
-    );
-  }
-);
+import * as RadixSeparator from "@radix-ui/react-separator";
+//#region src/components/Separator/Separator.tsx
+var SPACING_CUSTOM_PROP = "--cpd-separator-spacing";
+/**
+* A separator component.
+*/
+var Separator = forwardRef(({ className, spacing, kind = "primary", ...props }, theirRef) => {
+	const classes = classNames(Separator_module_default.separator, className);
+	const ourRef = useRef(null);
+	const ref = useMergeRefs([ourRef, theirRef]);
+	useEffect(() => {
+		const style = ourRef.current?.style;
+		if (spacing) style?.setProperty(SPACING_CUSTOM_PROP, spacing);
+		else style?.removeProperty(SPACING_CUSTOM_PROP);
+	}, [spacing]);
+	return /* @__PURE__ */ jsx(RadixSeparator.Root, {
+		...props,
+		className: classes,
+		ref,
+		"data-kind": kind
+	});
+});
 Separator.displayName = "Separator";
-export {
-  Separator
-};
-//# sourceMappingURL=Separator.js.map
+//#endregion
+export { Separator };
+
+//# sourceMappingURL=Separator.js.map

package/dist/components/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sources":["../../../src/components/Separator/Separator.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 * as RadixSeparator from \"@radix-ui/react-separator\";\nimport React, {\n  type ComponentProps,\n  type PropsWithoutRef,\n  type Ref,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport styles from \"./Separator.module.css\";\nimport { useMergeRefs } from \"@floating-ui/react\";\n\ntype SeparatorProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The spacing on either side of the separator.\n   * @default var(--cpd-space-2x)\n   */\n  spacing?: string;\n  /**\n   * The style of separator.\n   * @default primary\n   */\n  kind?: \"primary\" | \"secondary\" | \"section\";\n} & ComponentProps<typeof RadixSeparator.Root>;\n\nconst SPACING_CUSTOM_PROP = \"--cpd-separator-spacing\";\n\n/**\n * A separator component.\n */\nexport const Separator = forwardRef(\n  (\n    {\n      className,\n      spacing, // Default provided via global.css\n      kind = \"primary\",\n      ...props\n    }: PropsWithoutRef<SeparatorProps>,\n    theirRef?: Ref<HTMLDivElement>,\n  ) => {\n    const classes = classnames(styles.separator, className);\n    const ourRef = useRef<HTMLDivElement | null>(null);\n    const ref = useMergeRefs([ourRef, theirRef]);\n\n    useEffect(() => {\n      const style = ourRef.current?.style;\n      if (spacing) {\n        style?.setProperty(SPACING_CUSTOM_PROP, spacing);\n      } else {\n        style?.removeProperty(SPACING_CUSTOM_PROP);\n      }\n    }, [spacing]);\n\n    return (\n      <RadixSeparator.Root\n        {...props}\n        className={classes}\n        ref={ref}\n        data-kind={kind}\n      />\n    );\n  },\n);\n\nSeparator.displayName = \"Separator\";\n"],"names":["classnames"],"mappings":";;;;;;AAqCA,MAAM,sBAAsB;AAKrB,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,GAEL,aACG;AACH,UAAM,UAAUA,WAAW,OAAO,WAAW,SAAS;AACtD,UAAM,SAAS,OAA8B,IAAI;AACjD,UAAM,MAAM,aAAa,CAAC,QAAQ,QAAQ,CAAC;AAE3C,cAAU,MAAM;AACd,YAAM,QAAQ,OAAO,SAAS;AAC9B,UAAI,SAAS;AACX,eAAO,YAAY,qBAAqB,OAAO;AAAA,MACjD,OAAO;AACL,eAAO,eAAe,mBAAmB;AAAA,MAC3C;AAAA,IACF,GAAG,CAAC,OAAO,CAAC;AAEZ,WACE;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX;AAAA,QACA,aAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AACF;AAEA,UAAU,cAAc;"}
+{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.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 * as RadixSeparator from \"@radix-ui/react-separator\";\nimport React, {\n  type ComponentProps,\n  type PropsWithoutRef,\n  type Ref,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport styles from \"./Separator.module.css\";\nimport { useMergeRefs } from \"@floating-ui/react\";\n\ntype SeparatorProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The spacing on either side of the separator.\n   * @default var(--cpd-space-2x)\n   */\n  spacing?: string;\n  /**\n   * The style of separator.\n   * @default primary\n   */\n  kind?: \"primary\" | \"secondary\" | \"section\";\n} & ComponentProps<typeof RadixSeparator.Root>;\n\nconst SPACING_CUSTOM_PROP = \"--cpd-separator-spacing\";\n\n/**\n * A separator component.\n */\nexport const Separator = forwardRef(\n  (\n    {\n      className,\n      spacing, // Default provided via global.css\n      kind = \"primary\",\n      ...props\n    }: PropsWithoutRef<SeparatorProps>,\n    theirRef?: Ref<HTMLDivElement>,\n  ) => {\n    const classes = classnames(styles.separator, className);\n    const ourRef = useRef<HTMLDivElement | null>(null);\n    const ref = useMergeRefs([ourRef, theirRef]);\n\n    useEffect(() => {\n      const style = ourRef.current?.style;\n      if (spacing) {\n        style?.setProperty(SPACING_CUSTOM_PROP, spacing);\n      } else {\n        style?.removeProperty(SPACING_CUSTOM_PROP);\n      }\n    }, [spacing]);\n\n    return (\n      <RadixSeparator.Root\n        {...props}\n        className={classes}\n        ref={ref}\n        data-kind={kind}\n      />\n    );\n  },\n);\n\nSeparator.displayName = \"Separator\";\n"],"mappings":";;;;;;;AAqCA,IAAM,sBAAsB;;;;AAK5B,IAAa,YAAY,YAErB,EACE,WACA,SACA,OAAO,WACP,GAAG,SAEL,aACG;CACH,MAAM,UAAU,WAAW,yBAAO,WAAW,UAAU;CACvD,MAAM,SAAS,OAA8B,KAAK;CAClD,MAAM,MAAM,aAAa,CAAC,QAAQ,SAAS,CAAC;AAE5C,iBAAgB;EACd,MAAM,QAAQ,OAAO,SAAS;AAC9B,MAAI,QACF,QAAO,YAAY,qBAAqB,QAAQ;MAEhD,QAAO,eAAe,oBAAoB;IAE3C,CAAC,QAAQ,CAAC;AAEb,QACE,oBAAC,eAAe,MAAhB;EACE,GAAI;EACJ,WAAW;EACN;EACL,aAAW;EACX,CAAA;EAGP;AAED,UAAU,cAAc"}

package/dist/components/Separator/Separator.module.cjs

@@ -0,0 +1,5 @@
+var Separator_module_default = { separator: "_separator_13qwf_8" };
+//#endregion
+exports.default = Separator_module_default;
+
+//# sourceMappingURL=Separator.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.module.cjs","names":[],"sources":["../../../src/components/Separator/Separator.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.separator {\n  --cpd-separator-color: var(--cpd-color-separator-primary);\n  --cpd-separator-size: 1px;\n\n  background-color: var(--cpd-separator-color);\n}\n\n.separator[data-kind=\"secondary\"] {\n  --cpd-separator-color: var(--cpd-color-separator-secondary);\n}\n\n.separator[data-kind=\"section\"] {\n  --cpd-separator-size: 2px;\n}\n\n.separator[data-orientation=\"horizontal\"] {\n  margin-block: var(--cpd-separator-spacing);\n  margin-inline: var(--cpd-separator-inset);\n  block-size: var(--cpd-separator-size);\n}\n\n.separator[data-orientation=\"vertical\"] {\n  margin-inline: var(--cpd-separator-spacing);\n  margin-block: var(--cpd-separator-inset);\n  inline-size: var(--cpd-separator-size);\n}\n\n@media (forced-colors: active) {\n  .separator {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Separator/Separator.module.js

@@ -0,0 +1,5 @@
+var Separator_module_default = { separator: "_separator_13qwf_8" };
+//#endregion
+export { Separator_module_default as default };
+
+//# sourceMappingURL=Separator.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.module.js","names":[],"sources":["../../../src/components/Separator/Separator.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.separator {\n  --cpd-separator-color: var(--cpd-color-separator-primary);\n  --cpd-separator-size: 1px;\n\n  background-color: var(--cpd-separator-color);\n}\n\n.separator[data-kind=\"secondary\"] {\n  --cpd-separator-color: var(--cpd-color-separator-secondary);\n}\n\n.separator[data-kind=\"section\"] {\n  --cpd-separator-size: 2px;\n}\n\n.separator[data-orientation=\"horizontal\"] {\n  margin-block: var(--cpd-separator-spacing);\n  margin-inline: var(--cpd-separator-inset);\n  block-size: var(--cpd-separator-size);\n}\n\n.separator[data-orientation=\"vertical\"] {\n  margin-inline: var(--cpd-separator-spacing);\n  margin-block: var(--cpd-separator-inset);\n  inline-size: var(--cpd-separator-size);\n}\n\n@media (forced-colors: active) {\n  .separator {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}