@uva-glass/component-library 1.0.0

package/dist/components/SelectListbox/components/SelectContainer.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+
+export declare const SelectContainer: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectListbox/components/SelectContainer.js

@@ -0,0 +1,22 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useRef as i, useCallback as u, useEffect as l } from "react";
+import { useSelect as m } from "../SelectProvider.js";
+import { s as f } from "../../../SelectListbox.module-wZfvJXBJ.js";
+const E = ({ children: o }) => {
+  const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
+    ({ target: s }) => {
+      !s || !t.current || t.current.contains(s) || n(!1);
+    },
+    [n]
+  );
+  return l(() => {
+    if (r)
+      return document.addEventListener("click", e, !0), document.addEventListener("scroll", e, !0), () => {
+        document.removeEventListener("click", e, !0), document.removeEventListener("scroll", e, !0);
+      };
+  }, [e, r]), /* @__PURE__ */ c("div", { className: f["select-listbox-container"], ref: t, children: o });
+};
+export {
+  E as SelectContainer
+};
+//# sourceMappingURL=SelectContainer.js.map

package/dist/components/SelectListbox/components/SelectContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContainer.js","sources":["../../../../src/components/SelectListbox/components/SelectContainer.tsx"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport const SelectContainer = ({ children }: PropsWithChildren) => {\n  const { isOpen, setIsOpen } = useSelect();\n  const listboxRef = useRef<HTMLDivElement>(null);\n\n  const onMouseEventOutside = useCallback(\n    ({ target }: Event | MouseEvent) => {\n      if (!target || !listboxRef.current) return;\n\n      if (!listboxRef.current.contains(target as Node)) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    document.addEventListener('click', onMouseEventOutside, true);\n    document.addEventListener('scroll', onMouseEventOutside, true);\n\n    return () => {\n      document.removeEventListener('click', onMouseEventOutside, true);\n      document.removeEventListener('scroll', onMouseEventOutside, true);\n    };\n  }, [onMouseEventOutside, isOpen]);\n\n  return (\n    <div className={styles['select-listbox-container']} ref={listboxRef}>\n      {children}\n    </div>\n  );\n};\n"],"names":["SelectContainer","children","isOpen","setIsOpen","useSelect","listboxRef","useRef","onMouseEventOutside","useCallback","target","useEffect","jsx","styles"],"mappings":";;;;AAOO,MAAMA,IAAkB,CAAC,EAAE,UAAAC,QAAkC;AAClE,QAAM,EAAE,QAAAC,GAAQ,WAAAC,EAAU,IAAIC,EAAU,GAClCC,IAAaC,EAAuB,IAAI,GAExCC,IAAsBC;AAAA,IAC1B,CAAC,EAAE,QAAAC,EAAA,MAAiC;AAC9B,MAAA,CAACA,KAAU,CAACJ,EAAW,WAEtBA,EAAW,QAAQ,SAASI,CAAc,KAC7CN,EAAU,EAAK;AAAA,IAEnB;AAAA,IACA,CAACA,CAAS;AAAA,EAAA;AAGZ,SAAAO,EAAU,MAAM;AACd,QAAKR;AAEI,sBAAA,iBAAiB,SAASK,GAAqB,EAAI,GACnD,SAAA,iBAAiB,UAAUA,GAAqB,EAAI,GAEtD,MAAM;AACF,iBAAA,oBAAoB,SAASA,GAAqB,EAAI,GACtD,SAAA,oBAAoB,UAAUA,GAAqB,EAAI;AAAA,MAAA;AAAA,EAClE,GACC,CAACA,GAAqBL,CAAM,CAAC,GAG9B,gBAAAS,EAAC,SAAI,WAAWC,EAAO,0BAA0B,GAAG,KAAKP,GACtD,UAAAJ,EACH,CAAA;AAEJ;"}

package/dist/components/SelectListbox/components/SelectOption.d.ts

@@ -0,0 +1,10 @@
+import { OptionValue } from 'components/SelectListbox/SelectProvider';
+import { ReactNode } from 'react';
+
+export interface SelectOptionProps {
+    option: OptionValue;
+    index: number;
+    key: string;
+    children: ReactNode;
+}
+export declare const SelectOption: ({ option, index, children }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectListbox/components/SelectOption.js

@@ -0,0 +1,55 @@
+import { jsx as d } from "react/jsx-runtime";
+import { c as v } from "../../../clsx-DB4S2d7J.js";
+import { useRef as D, useEffect as p } from "react";
+import { useSelect as y } from "../SelectProvider.js";
+import { s as b } from "../../../SelectListbox.module-wZfvJXBJ.js";
+const S = ({ option: s, index: l, children: m }) => {
+  const f = D(null), { isOpen: c, activeIndex: r, setActiveIndex: o, selectedValue: u, setSelectedValue: n, setIsOpen: i, options: t } = y(), w = (e) => {
+    n(t[e]), i(!1);
+  }, k = (e) => {
+    switch (e.key) {
+      case "Tab":
+        e.preventDefault(), c && i(!1);
+        break;
+      case "ArrowDown":
+      case "ArrowUp":
+        if (e.preventDefault(), !c)
+          return;
+        e.key === "ArrowDown" && r < t.length - 1 && o(Number((a) => a + 1)), e.key === "ArrowUp" && r > 0 && o(Number((a) => a - 1));
+        break;
+      case "Enter":
+        e.preventDefault(), t != null && t.length && r > -1 && !t[r].disabled && w(r);
+        break;
+      case "Escape":
+        c && (e.stopPropagation(), i(!1));
+        break;
+    }
+  };
+  return p(() => {
+    var e, a;
+    l === r && (c ? (e = f.current) == null || e.focus() : (a = f.current) == null || a.blur());
+  }, [r, l, c]), p(() => {
+    u.value === s.value && o(l);
+  }, [l, s.value, u.value, o]), /* @__PURE__ */ d(
+    "li",
+    {
+      className: v(b["select-listbox-option"], {
+        [b["select-listbox-option--active"]]: l === r
+      }),
+      ...!s.disabled && {
+        onClick: () => n(s),
+        onKeyDown: k,
+        tabIndex: 0,
+        role: "option",
+        "aria-selected": u.value === s.value
+      },
+      ref: f,
+      children: m
+    },
+    `${s.value}`
+  );
+};
+export {
+  S as SelectOption
+};
+//# sourceMappingURL=SelectOption.js.map

package/dist/components/SelectListbox/components/SelectOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(Number((previousIndex: number) => previousIndex + 1));\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(Number((previousIndex: number) => previousIndex - 1));\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <li\n      className={clsx(styles['select-listbox-option'], {\n        [styles['select-listbox-option--active']]: index === activeIndex,\n      })}\n      key={`${option.value}`}\n      {...(!option.disabled && {\n        onClick: () => setSelectedValue(option),\n        onKeyDown: onOptionKeyDown,\n        tabIndex: 0,\n        role: 'option',\n        'aria-selected': selectedValue.value === option.value,\n      })}\n      ref={selectOptionRef}\n    >\n      {children}\n    </li>\n  );\n};\n"],"names":["SelectOption","option","index","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","previousIndex","useEffect","_a","_b","jsx","clsx","styles"],"mappings":";;;;;AAgBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAkC;AACxE,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,MAAYC,KAE/FC,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EAAA,GAGXK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAe,OAAO,CAACU,MAA0BA,IAAgB,CAAC,CAAC,GAEjED,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAe,OAAO,CAACU,MAA0BA,IAAgB,CAAC,CAAC;AAErE;AAAA,MACF,KAAK;AACH,QAAAD,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAQ,EAAU,MAAM;;AACd,IAAIjB,MAAUK,MACZD,KAASc,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB,WAAUC,IAAAjB,EAAgB,YAAhB,QAAAiB,EAAyB;AAAA,EAEtE,GAAA,CAACd,GAAaL,GAAOI,CAAM,CAAC,GAE/Ba,EAAU,MAAM;AACV,IAAAV,EAAc,UAAUR,EAAO,SACjCO,EAAeN,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOQ,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,QAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGtB,MAAUK;AAAA,MAAA,CACtD;AAAA,MAEA,GAAI,CAACN,EAAO,YAAY;AAAA,QACvB,SAAS,MAAMS,EAAiBT,CAAM;AAAA,QACtC,WAAWe;AAAA,QACX,UAAU;AAAA,QACV,MAAM;AAAA,QACN,iBAAiBP,EAAc,UAAUR,EAAO;AAAA,MAClD;AAAA,MACA,KAAKG;AAAA,MAEJ,UAAAD;AAAA,IAAA;AAAA,IAVI,GAAGF,EAAO,KAAK;AAAA,EAAA;AAa1B;"}

package/dist/components/SelectListbox/components/SelectOptionBox.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface SelectOptionBoxProps {
+    optionPositionRight?: boolean;
+    maxOptionHeight?: string;
+    children: ReactNode;
+}
+export declare const SelectOptionBox: ({ optionPositionRight, maxOptionHeight, children }: SelectOptionBoxProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SelectListbox/components/SelectOptionBox.js

@@ -0,0 +1,33 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useRef as m } from "react";
+import { c as a } from "../../../clsx-DB4S2d7J.js";
+import { s } from "../../../SelectListbox.module-wZfvJXBJ.js";
+import { useSelect as f } from "../SelectProvider.js";
+const d = ({ optionPositionRight: t = !1, maxOptionHeight: e, children: r }) => {
+  const { listboxId: o, isOpen: i } = f(), c = m(null);
+  return i ? /* @__PURE__ */ l(
+    "div",
+    {
+      className: a(s["select-listbox__wrapper"], {
+        [s["select-listbox__wrapper--align-right"]]: t
+      }),
+      style: { maxHeight: e || "" },
+      children: /* @__PURE__ */ l(
+        "ul",
+        {
+          className: s["select-listbox"],
+          role: "listbox",
+          ref: c,
+          id: o,
+          tabIndex: -1,
+          style: { maxHeight: e || "" },
+          children: r
+        }
+      )
+    }
+  ) : null;
+};
+export {
+  d as SelectOptionBox
+};
+//# sourceMappingURL=SelectOptionBox.js.map

package/dist/components/SelectListbox/components/SelectOptionBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptionBox.js","sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n  optionPositionRight?: boolean;\n  maxOptionHeight?: string;\n  children: ReactNode;\n}\n\nexport const SelectOptionBox = ({ optionPositionRight = false, maxOptionHeight, children }: SelectOptionBoxProps) => {\n  const { listboxId, isOpen } = useSelect();\n  const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className={clsx(styles['select-listbox__wrapper'], {\n        [styles['select-listbox__wrapper--align-right']]: optionPositionRight,\n      })}\n      style={{ maxHeight: maxOptionHeight ? maxOptionHeight : '' }}\n    >\n      <ul\n        className={styles['select-listbox']}\n        role=\"listbox\"\n        ref={selectOptionBoxRef}\n        id={listboxId}\n        tabIndex={-1}\n        style={{ maxHeight: maxOptionHeight ? maxOptionHeight : '' }}\n      >\n        {children}\n      </ul>\n    </div>\n  );\n};\n"],"names":["SelectOptionBox","optionPositionRight","maxOptionHeight","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","clsx","styles"],"mappings":";;;;;AAcO,MAAMA,IAAkB,CAAC,EAAE,qBAAAC,IAAsB,IAAO,iBAAAC,GAAiB,UAAAC,QAAqC;AACnH,QAAM,EAAE,WAAAC,GAAW,QAAAC,EAAO,IAAIC,EAAU,GAClCC,IAAqBC,EAAyB,IAAI;AAExD,SAAKH,IAGH,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,yBAAyB,GAAG;AAAA,QACjD,CAACA,EAAO,sCAAsC,CAAC,GAAGV;AAAA,MAAA,CACnD;AAAA,MACD,OAAO,EAAE,WAAWC,KAAoC,GAAG;AAAA,MAE3D,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAO,gBAAgB;AAAA,UAClC,MAAK;AAAA,UACL,KAAKJ;AAAA,UACL,IAAIH;AAAA,UACJ,UAAU;AAAA,UACV,OAAO,EAAE,WAAWF,KAAoC,GAAG;AAAA,UAE1D,UAAAC;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA,IAlBgB;AAqBtB;"}

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

@@ -0,0 +1 @@
+export * from './SelectListbox';

package/dist/components/SelectListbox/index.js

@@ -0,0 +1,5 @@
+import { SelectListbox as t } from "./SelectListbox.js";
+export {
+  t as SelectListbox
+};
+//# sourceMappingURL=index.js.map

package/dist/components/SelectListbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Button';
+export * from './Card';
+export * from './Icon';
+export * from './IconButton';
+export * from './InfoMessage';
+export * from './SectionNotification';
+export * from './SelectListbox';

package/dist/components/index.js

@@ -0,0 +1,17 @@
+import { Button as r } from "./Button/Button.js";
+import { Card as f } from "./Card/Card.js";
+import { Icon as m } from "./Icon/Icon.js";
+import { IconButton as p } from "./IconButton/IconButton.js";
+import { InfoMessage as i } from "./InfoMessage/InfoMessage.js";
+import { SectionNotification as s } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as u } from "./SelectListbox/SelectListbox.js";
+export {
+  r as Button,
+  f as Card,
+  m as Icon,
+  p as IconButton,
+  i as InfoMessage,
+  s as SectionNotification,
+  u as SelectListbox
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/storyComponents/ClipboardButton/ClipboardButton.d.ts

@@ -0,0 +1,5 @@
+interface ClipboardButtonProps {
+    text: string;
+}
+export declare const ClipboardButton: ({ text }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/storyComponents/ClipboardButton/ClipboardButton.js

@@ -0,0 +1,46 @@
+import '../../../assets/ClipboardButton.css';
+import { jsx as e } from "react/jsx-runtime";
+import { useState as i } from "react";
+const C = {
+  "clipboard-button": "_clipboard-button_1ihmb_1"
+}, n = 2e3, c = ({ text: l }) => {
+  const [o, t] = i(!1);
+  return /* @__PURE__ */ e("div", { style: { position: "relative" }, children: /* @__PURE__ */ e("button", { onClick: () => {
+    o || navigator.clipboard.writeText(l).then(() => {
+      t(!0), setTimeout(() => {
+        t(!1);
+      }, n);
+    });
+  }, className: C["clipboard-button"], children: /* @__PURE__ */ e(
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "h-3 w-3",
+      children: o ? /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      ) : /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  ) }) });
+};
+export {
+  c as ClipboardButton
+};
+//# sourceMappingURL=ClipboardButton.js.map

package/dist/components/storyComponents/ClipboardButton/ClipboardButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClipboardButton.js","sources":["../../../../src/components/storyComponents/ClipboardButton/ClipboardButton.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport styles from './ClipboardButton.module.css';\n\ninterface ClipboardButtonProps {\n  text: string;\n}\n\nconst DELAY = 2000;\n\nexport const ClipboardButton = ({ text }: ClipboardButtonProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopyClick = () => {\n    if (!isCopied) {\n      void navigator.clipboard.writeText(text).then(() => {\n        setIsCopied(true);\n        setTimeout(() => {\n          setIsCopied(false);\n        }, DELAY);\n      });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <button onClick={handleCopyClick} className={styles['clipboard-button']}>\n        <svg\n          width=\"15\"\n          height=\"15\"\n          viewBox=\"0 0 15 15\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"h-3 w-3\"\n        >\n          {isCopied ? (\n            <path\n              d=\"M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          ) : (\n            <path\n              d=\"M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          )}\n        </svg>\n      </button>\n    </div>\n  );\n};\n"],"names":["DELAY","ClipboardButton","text","isCopied","setIsCopied","useState","jsx","styles"],"mappings":";;;;GAQMA,IAAQ,KAEDC,IAAkB,CAAC,EAAE,MAAAC,QAAiC;AACjE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAa9C,SACG,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,UAAU,WAAW,GACjC,UAAC,gBAAAA,EAAA,UAAA,EAAO,SAbY,MAAM;AAC5B,IAAKH,KACE,UAAU,UAAU,UAAUD,CAAI,EAAE,KAAK,MAAM;AAClD,MAAAE,EAAY,EAAI,GAChB,WAAW,MAAM;AACf,QAAAA,EAAY,EAAK;AAAA,SAChBJ,CAAK;AAAA,IAAA,CACT;AAAA,EACH,GAKoC,WAAWO,EAAO,kBAAkB,GACpE,UAAA,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,WAAU;AAAA,MAET,UACCH,IAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,UAAS;AAAA,UACT,UAAS;AAAA,QAAA;AAAA,MAAA,IAGX,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,UAAS;AAAA,UACT,UAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,EAGN,CAAA,EACF,CAAA;AAEJ;"}

package/dist/components/storyComponents/ClipboardButton/index.d.ts

@@ -0,0 +1 @@
+export * from './ClipboardButton';

package/dist/components/storyComponents/ClipboardButton/index.js

@@ -0,0 +1,5 @@
+import { ClipboardButton as t } from "./ClipboardButton.js";
+export {
+  t as ClipboardButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/storyComponents/ClipboardButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}