@intlayer/design-system 2.0.13 → 3.0.0

package/dist/components/Headers/index.cjs

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const utils_cn = require("../../utils/cn.cjs");
+const styledHeading = `relative scroll-m-8 scroll-p-8`;
+const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
+const StyledH1 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("h1", { className: utils_cn.cn("mt-5 text-2xl font-bold", className), ...props })
+);
+const StyledH2 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    "h2",
+    {
+      className: utils_cn.cn("mt-5 text-2xl font-bold", styledHeading, className),
+      ...props
+    }
+  )
+);
+const StyledH3 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    "h3",
+    {
+      className: utils_cn.cn("mt-3 text-xl font-bold", styledHeading, className),
+      ...props
+    }
+  )
+);
+const StyledH4 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    "h4",
+    {
+      className: utils_cn.cn("mt-3 text-lg font-bold", styledHeading, className),
+      ...props
+    }
+  )
+);
+const StyledH5 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    "h5",
+    {
+      className: utils_cn.cn("mt-3 text-base font-bold", styledHeading, className),
+      ...props
+    }
+  )
+);
+const getId = (children) => String(children).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").toLowerCase();
+const scrollToHash = (id) => {
+  const element = document.getElementById(id);
+  const offset = 150;
+  const y = (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;
+  window.scrollTo({ top: y, behavior: "smooth" });
+};
+const afterClick = (parentElem, e) => {
+  const parentLeft = parentElem.getBoundingClientRect().left, parentTop = parentElem.getBoundingClientRect().top;
+  const after = window.getComputedStyle(parentElem, ":after");
+  const afterStart = parentLeft + parseInt(after.getPropertyValue("left"), 10), afterEnd = afterStart + parseInt(after.width, 10);
+  const afterYStart = parentTop + parseInt(after.getPropertyValue("top"), 10), afterYEnd = afterYStart + parseInt(after.height, 10);
+  const mouseX = e.clientX, mouseY = e.clientY;
+  const isAfterClicked = mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd;
+  return isAfterClicked;
+};
+const HeadingWrapper = ({
+  H,
+  children,
+  className,
+  isClickable,
+  ...props
+}) => {
+  const id = typeof children === "string" ? getId(children) : void 0;
+  const onClick = (e) => {
+    const { id: id2 } = e.currentTarget;
+    const isAfterClicker = afterClick(e.currentTarget, e);
+    if (isAfterClicker && typeof id2 === "string") {
+      const urlWithoutHash = window.location.href.split("#")[0];
+      const url = `${urlWithoutHash}#${id2}`;
+      navigator.clipboard.writeText(url);
+      scrollToHash(id2);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    H,
+    {
+      id,
+      onClick: isClickable ? onClick : void 0,
+      "aria-label": isClickable ? `Click to scroll to section ${id} and copy the link to the clipboard` : void 0,
+      className: utils_cn.cn(isClickable && styledAfter, className),
+      ...props,
+      children
+    }
+  );
+};
+const H1 = ({ isClickable: _, ...props }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledH1, { ...props });
+const H2 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HeadingWrapper, { H: StyledH2, isClickable, ...props });
+const H3 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HeadingWrapper, { H: StyledH3, isClickable, ...props });
+const H4 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HeadingWrapper, { H: StyledH4, isClickable, ...props });
+const H5 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HeadingWrapper, { H: StyledH5, isClickable, ...props });
+exports.H1 = H1;
+exports.H2 = H2;
+exports.H3 = H3;
+exports.H4 = H4;
+exports.H5 = H5;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Headers/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-m-8 scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","cn","id"],"mappings":"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"}

package/dist/components/Headers/index.d.ts

@@ -1,7 +1,12 @@
-import { HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
-export declare const H1: import('twin.macro').TwComponent<"h1">;
-export declare const H2: (props: HTMLAttributes<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const H3: (props: HTMLAttributes<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const H4: (props: HTMLAttributes<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const H5: (props: HTMLAttributes<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
+type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
+    isClickable?: boolean;
+};
+export declare const H1: FC<HeadingProps>;
+export declare const H2: FC<HeadingProps>;
+export declare const H3: FC<HeadingProps>;
+export declare const H4: FC<HeadingProps>;
+export declare const H5: FC<HeadingProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Headers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Headers/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AA0D5D,KAAK,YAAY,GAAG,cAAc,CAAC,kBAAkB,CAAC,GAAG;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA0FF,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AAEF,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AACF,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AACF,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AACF,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC"}

package/dist/components/Headers/index.mjs

@@ -0,0 +1,122 @@
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { cn } from "../../utils/cn.mjs";
+const styledHeading = `relative scroll-m-8 scroll-p-8`;
+const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
+const StyledH1 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: cn("mt-5 text-2xl font-bold", className), ...props })
+);
+const StyledH2 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "h2",
+    {
+      className: cn("mt-5 text-2xl font-bold", styledHeading, className),
+      ...props
+    }
+  )
+);
+const StyledH3 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "h3",
+    {
+      className: cn("mt-3 text-xl font-bold", styledHeading, className),
+      ...props
+    }
+  )
+);
+const StyledH4 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "h4",
+    {
+      className: cn("mt-3 text-lg font-bold", styledHeading, className),
+      ...props
+    }
+  )
+);
+const StyledH5 = ({
+  className,
+  ...props
+}) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "h5",
+    {
+      className: cn("mt-3 text-base font-bold", styledHeading, className),
+      ...props
+    }
+  )
+);
+const getId = (children) => String(children).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").toLowerCase();
+const scrollToHash = (id) => {
+  const element = document.getElementById(id);
+  const offset = 150;
+  const y = (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;
+  window.scrollTo({ top: y, behavior: "smooth" });
+};
+const afterClick = (parentElem, e) => {
+  const parentLeft = parentElem.getBoundingClientRect().left, parentTop = parentElem.getBoundingClientRect().top;
+  const after = window.getComputedStyle(parentElem, ":after");
+  const afterStart = parentLeft + parseInt(after.getPropertyValue("left"), 10), afterEnd = afterStart + parseInt(after.width, 10);
+  const afterYStart = parentTop + parseInt(after.getPropertyValue("top"), 10), afterYEnd = afterYStart + parseInt(after.height, 10);
+  const mouseX = e.clientX, mouseY = e.clientY;
+  const isAfterClicked = mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd;
+  return isAfterClicked;
+};
+const HeadingWrapper = ({
+  H,
+  children,
+  className,
+  isClickable,
+  ...props
+}) => {
+  const id = typeof children === "string" ? getId(children) : void 0;
+  const onClick = (e) => {
+    const { id: id2 } = e.currentTarget;
+    const isAfterClicker = afterClick(e.currentTarget, e);
+    if (isAfterClicker && typeof id2 === "string") {
+      const urlWithoutHash = window.location.href.split("#")[0];
+      const url = `${urlWithoutHash}#${id2}`;
+      navigator.clipboard.writeText(url);
+      scrollToHash(id2);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    H,
+    {
+      id,
+      onClick: isClickable ? onClick : void 0,
+      "aria-label": isClickable ? `Click to scroll to section ${id} and copy the link to the clipboard` : void 0,
+      className: cn(isClickable && styledAfter, className),
+      ...props,
+      children
+    }
+  );
+};
+const H1 = ({ isClickable: _, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(StyledH1, { ...props });
+const H2 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(HeadingWrapper, { H: StyledH2, isClickable, ...props });
+const H3 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(HeadingWrapper, { H: StyledH3, isClickable, ...props });
+const H4 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(HeadingWrapper, { H: StyledH4, isClickable, ...props });
+const H5 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(HeadingWrapper, { H: StyledH5, isClickable, ...props });
+export {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5
+};
+//# sourceMappingURL=index.mjs.map

package/dist/components/Headers/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-m-8 scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","id"],"mappings":"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"}