@edifice.io/react 2.0.0-develop-rc.4 → 2.0.0-develop-rc.10

package/dist/components/Tabs/TabsContext.js

@@ -1,12 +1,13 @@
-import { createContext, useContext } from "react";
-const TabsContext = /* @__PURE__ */ createContext(null);
-function useTabsContext() {
-  const context = useContext(TabsContext);
-  if (!context)
+import { createContext as o, useContext as e } from "react";
+const n = /* @__PURE__ */ o(null);
+function s() {
+  const t = e(n);
+  if (!t)
     throw new Error("Tabs compound components cannot be rendered outside the Tabs component");
-  return context;
+  return t;
 }
 export {
-  TabsContext,
-  useTabsContext
+  n as TabsContext,
+  s as useTabsContext
 };
+//# sourceMappingURL=TabsContext.js.map

package/dist/components/Tabs/TabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.js","sources":["../../../src/components/Tabs/TabsContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { TabsItemProps } from './TabsItem';\n\nexport interface TabsContextProps {\n  activeTab?: string;\n  items: TabsItemProps[];\n  setSelectedTab: (key: string) => void;\n  tabsRef: React.MutableRefObject<(HTMLButtonElement | null)[]>;\n  tabUnderlineLeft: number;\n  tabUnderlineWidth: number;\n  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null!);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      `Tabs compound components cannot be rendered outside the Tabs component`,\n    );\n  }\n  return context;\n}\n"],"names":["TabsContext","useTabsContext","context","useContext","Error"],"mappings":";AAcaA,MAAAA,sBAAqD,IAAK;AAEhE,SAASC,IAAiB;AACzBC,QAAAA,IAAUC,EAAWH,CAAW;AACtC,MAAI,CAACE;AACG,UAAA,IAAIE,MACR,wEACF;AAEKF,SAAAA;AACT;"}

package/dist/components/Tabs/TabsItem.js

@@ -1,26 +1,27 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { useTabsContext } from "./TabsContext.js";
-const TabsItem = ({
-  icon,
-  label,
-  id,
-  order
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import p from "clsx";
+import { useTranslation as x } from "react-i18next";
+import { useTabsContext as u } from "./TabsContext.js";
+const v = ({
+  icon: s,
+  label: o,
+  id: e,
+  order: r
 }) => {
   const {
-    activeTab,
-    setSelectedTab,
-    onKeyDown,
-    tabsRef
-  } = useTabsContext(), {
-    t
-  } = useTranslation(), classes = clsx("nav-link d-inline-flex gap-8 border-0", activeTab === id ? "selected" : "");
-  return /* @__PURE__ */ jsx("li", { className: "nav-item flex-shrink-0", role: "presentation", children: /* @__PURE__ */ jsxs("button", { ref: (el) => tabsRef.current[order] = el, type: "button", id: `tab-${id}`, className: classes, onClick: () => setSelectedTab(id), onKeyDown: (event) => onKeyDown(event), role: "tab", "aria-controls": `tabpanel-${id}`, "aria-selected": activeTab === id, tabIndex: activeTab === id ? 0 : -1, children: [
-    icon,
-    /* @__PURE__ */ jsx("small", { children: t(label) })
+    activeTab: t,
+    setSelectedTab: l,
+    onKeyDown: c,
+    tabsRef: i
+  } = u(), {
+    t: m
+  } = x(), b = p("nav-link d-inline-flex gap-8 border-0", t === e ? "selected" : "");
+  return /* @__PURE__ */ a("li", { className: "nav-item flex-shrink-0", role: "presentation", children: /* @__PURE__ */ f("button", { ref: (n) => i.current[r] = n, type: "button", id: `tab-${e}`, className: b, onClick: () => l(e), onKeyDown: (n) => c(n), role: "tab", "aria-controls": `tabpanel-${e}`, "aria-selected": t === e, tabIndex: t === e ? 0 : -1, children: [
+    s,
+    /* @__PURE__ */ a("small", { children: m(o) })
   ] }) });
 };
 export {
-  TabsItem as default
+  v as default
 };
+//# sourceMappingURL=TabsItem.js.map

package/dist/components/Tabs/TabsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsItem.js","sources":["../../../src/components/Tabs/TabsItem.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\n\nimport { useTabsContext } from './TabsContext';\n\nexport interface TabsItemProps {\n  /**\n   * Item identifier\n   */\n  id: string;\n  /**\n   * Item icon\n   */\n  icon: ReactNode;\n  /**\n   * Item label\n   */\n  label: string;\n  /**\n   * Item content, to be displayed in the panel when selected.\n   */\n  content: ReactNode;\n}\n\nconst TabsItem = ({\n  icon,\n  label,\n  id,\n  order,\n}: TabsItemProps & { order: number }) => {\n  const { activeTab, setSelectedTab, onKeyDown, tabsRef } = useTabsContext();\n  const { t } = useTranslation();\n\n  const classes = clsx(\n    'nav-link d-inline-flex gap-8 border-0',\n    activeTab === id ? 'selected' : '',\n  );\n\n  return (\n    <li className=\"nav-item flex-shrink-0\" role=\"presentation\">\n      <button\n        ref={(el) => (tabsRef.current[order] = el)}\n        type=\"button\"\n        id={`tab-${id}`}\n        className={classes}\n        onClick={() => setSelectedTab(id)}\n        onKeyDown={(event) => onKeyDown(event)}\n        role=\"tab\"\n        aria-controls={`tabpanel-${id}`}\n        aria-selected={activeTab === id}\n        tabIndex={activeTab === id ? 0 : -1}\n      >\n        {icon}\n        <small>{t(label)}</small>\n      </button>\n    </li>\n  );\n};\n\nTabsItem.displayName = 'Tabs.Item';\n\nexport default TabsItem;\n"],"names":["TabsItem","icon","label","id","order","activeTab","setSelectedTab","onKeyDown","tabsRef","useTabsContext","t","useTranslation","classes","clsx","jsx","jsxs","el","current","event"],"mappings":";;;;AA0BA,MAAMA,IAAWA,CAAC;AAAA,EAChBC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,OAAAA;AACiC,MAAM;AACjC,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,gBAAAA;AAAAA,IAAgBC,WAAAA;AAAAA,IAAWC,SAAAA;AAAAA,MAAYC,EAAe,GACnE;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GAEvBC,IAAUC,EACd,yCACAR,MAAcF,IAAK,aAAa,EAClC;AAGE,SAAA,gBAAAW,EAAC,QAAG,WAAU,0BAAyB,MAAK,gBAC1C,UAAA,gBAAAC,EAAC,YACC,KAAMC,CAAAA,MAAQR,EAAQS,QAAQb,CAAK,IAAIY,GACvC,MAAK,UACL,IAAI,OAAOb,CAAE,IACb,WAAWS,GACX,SAAS,MAAMN,EAAeH,CAAE,GAChC,WAAYe,OAAUX,EAAUW,CAAK,GACrC,MAAK,OACL,iBAAe,YAAYf,CAAE,IAC7B,iBAAeE,MAAcF,GAC7B,UAAUE,MAAcF,IAAK,IAAI,IAEhCF,UAAAA;AAAAA,IAAAA;AAAAA,IACA,gBAAAa,EAAA,SAAA,EAAOJ,UAAER,EAAAA,CAAK,EAAE,CAAA;AAAA,EAAA,EACnB,CAAA,EACF,CAAA;AAEJ;"}

package/dist/components/Tabs/TabsList.js

@@ -1,24 +1,25 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { Tabs } from "./Tabs.js";
-import { useTabsContext } from "./TabsContext.js";
-const TabsList = (props) => {
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import d from "clsx";
+import { Tabs as f } from "./Tabs.js";
+import { useTabsContext as p } from "./TabsContext.js";
+const h = (e) => {
   const {
-    items,
-    tabUnderlineLeft,
-    tabUnderlineWidth
-  } = useTabsContext(), {
-    className,
-    ...restProps
-  } = props, tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
-  return /* @__PURE__ */ jsxs("div", { className: tabslist, ...restProps, children: [
-    /* @__PURE__ */ jsx("ul", { className: "nav nav-tabs flex-nowrap", role: "tablist", children: items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)) }),
-    /* @__PURE__ */ jsx("span", { className: "nav-slide", style: {
-      left: tabUnderlineLeft,
-      width: tabUnderlineWidth
+    items: a,
+    tabUnderlineLeft: r,
+    tabUnderlineWidth: o
+  } = p(), {
+    className: l,
+    ...i
+  } = e, n = d("position-relative flex-shrink-0 overflow-x-auto", l);
+  return /* @__PURE__ */ c("div", { className: n, ...i, children: [
+    /* @__PURE__ */ s("ul", { className: "nav nav-tabs flex-nowrap", role: "tablist", children: a.map((t, m) => /* @__PURE__ */ s(f.Item, { order: m, ...t }, t.id)) }),
+    /* @__PURE__ */ s("span", { className: "nav-slide", style: {
+      left: r,
+      width: o
     } })
   ] });
 };
 export {
-  TabsList as default
+  h as default
 };
+//# sourceMappingURL=TabsList.js.map

package/dist/components/Tabs/TabsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.js","sources":["../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport Tabs from './Tabs';\nimport { useTabsContext } from './TabsContext';\n\nconst TabsList = (props: ComponentPropsWithoutRef<'div'>) => {\n  const { items, tabUnderlineLeft, tabUnderlineWidth } = useTabsContext();\n  const { className, ...restProps } = props;\n\n  const tabslist = clsx(\n    'position-relative flex-shrink-0 overflow-x-auto',\n    className,\n  );\n  return (\n    <div className={tabslist} {...restProps}>\n      <ul className=\"nav nav-tabs flex-nowrap\" role=\"tablist\">\n        {items.map((item, order) => {\n          return <Tabs.Item key={item.id} order={order} {...item}></Tabs.Item>;\n        })}\n      </ul>\n      <span\n        className=\"nav-slide\"\n        style={{ left: tabUnderlineLeft, width: tabUnderlineWidth }}\n      />\n    </div>\n  );\n};\n\nTabsList.displayName = 'Tabs.List';\n\nexport default TabsList;\n"],"names":["TabsList","props","items","tabUnderlineLeft","tabUnderlineWidth","useTabsContext","className","restProps","tabslist","clsx","jsxs","jsx","map","item","order","Tabs","id","left","width"],"mappings":";;;;AAOMA,MAAAA,IAAWA,CAACC,MAA2C;AACrD,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,kBAAAA;AAAAA,IAAkBC,mBAAAA;AAAAA,MAAsBC,EAAe,GAChE;AAAA,IAAEC,WAAAA;AAAAA,IAAW,GAAGC;AAAAA,EAAcN,IAAAA,GAE9BO,IAAWC,EACf,mDACAH,CACF;AACA,SACG,gBAAAI,EAAA,OAAA,EAAI,WAAWF,GAAcD,GAAAA,GAC5B,UAAA;AAAA,IAAC,gBAAAI,EAAA,MAAA,EAAG,WAAU,4BAA2B,MAAK,WAC3CT,UAAMU,EAAAA,IAAI,CAACC,GAAMC,MACT,gBAAAH,EAACI,EAAK,MAAL,EAAwB,OAAAD,GAAkBD,GAAAA,EAAAA,GAA3BA,EAAKG,EAA4B,CACzD,GACH;AAAA,IACC,gBAAAL,EAAA,QAAA,EACC,WAAU,aACV,OAAO;AAAA,MAAEM,MAAMd;AAAAA,MAAkBe,OAAOd;AAAAA,IAAAA,GAAoB;AAAA,EAEhE,EAAA,CAAA;AAEJ;"}

package/dist/components/Tabs/TabsPanel.js

@@ -1,14 +1,15 @@
-import { jsx } from "react/jsx-runtime";
-import { useTabsContext } from "./TabsContext.js";
-const TabsPanel = ({
-  children,
-  currentItem
+import { jsx as l } from "react/jsx-runtime";
+import { useTabsContext as s } from "./TabsContext.js";
+const f = ({
+  children: i,
+  currentItem: a
 }) => {
   const {
-    activeTab
-  } = useTabsContext();
-  return /* @__PURE__ */ jsx("div", { className: "tab-content d-flex flex-fill w-100", children: /* @__PURE__ */ jsx("div", { className: `tab-pane flex-fill w-100 fade ${activeTab === (currentItem == null ? void 0 : currentItem.id) ? "show active" : ""}`, id: `tabpanel-${currentItem == null ? void 0 : currentItem.id}`, role: "tabpanel", "aria-labelledby": `tab-${currentItem == null ? void 0 : currentItem.id}`, tabIndex: 0, children }) });
+    activeTab: d
+  } = s();
+  return /* @__PURE__ */ l("div", { className: "tab-content d-flex flex-fill w-100", children: /* @__PURE__ */ l("div", { className: `tab-pane flex-fill w-100 fade ${d === (a == null ? void 0 : a.id) ? "show active" : ""}`, id: `tabpanel-${a == null ? void 0 : a.id}`, role: "tabpanel", "aria-labelledby": `tab-${a == null ? void 0 : a.id}`, tabIndex: 0, children: i }) });
 };
 export {
-  TabsPanel as default
+  f as default
 };
+//# sourceMappingURL=TabsPanel.js.map

package/dist/components/Tabs/TabsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsPanel.js","sources":["../../../src/components/Tabs/TabsPanel.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { useTabsContext } from './TabsContext';\nimport { TabsItemProps } from './TabsItem';\n\nexport interface TabsPanelProps {\n  /**\n   * Content of the item\n   */\n  children: ReactNode;\n  /**\n   * Current Item\n   */\n  currentItem: TabsItemProps | undefined;\n}\n\nconst TabsPanel = ({ children, currentItem }: TabsPanelProps) => {\n  const { activeTab } = useTabsContext();\n\n  return (\n    <div className=\"tab-content d-flex flex-fill w-100\">\n      <div\n        className={`tab-pane flex-fill w-100 fade ${\n          activeTab === currentItem?.id ? 'show active' : ''\n        }`}\n        id={`tabpanel-${currentItem?.id}`}\n        role=\"tabpanel\"\n        aria-labelledby={`tab-${currentItem?.id}`}\n        tabIndex={0}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nTabsPanel.displayName = 'Tabs.Panel';\n\nexport default TabsPanel;\n"],"names":["TabsPanel","children","currentItem","activeTab","useTabsContext","jsx","id"],"mappings":";;AAgBA,MAAMA,IAAYA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,aAAAA;AAA4B,MAAM;AACzD,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAe;AAErC,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAU,sCACb,UAAC,gBAAAA,EAAA,OAAA,EACC,WAAW,iCACTF,OAAcD,KAAAA,gBAAAA,EAAaI,MAAK,gBAAgB,EAAE,IAEpD,IAAI,YAAYJ,KAAAA,gBAAAA,EAAaI,EAAE,IAC/B,MAAK,YACL,mBAAiB,OAAOJ,KAAAA,gBAAAA,EAAaI,EAAE,IACvC,UAAU,GAETL,UAAAA,GACH,EACF,CAAA;AAEJ;"}

package/dist/components/TextArea/TextArea.js

@@ -1,35 +1,36 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import clsx from "clsx";
-import { useFormControl } from "../Form/FormContext.js";
-const TextArea = /* @__PURE__ */ forwardRef(({
-  noValidationIcon,
-  placeholder,
-  size = "md",
-  height = "md",
-  className,
-  ...restProps
-}, ref) => {
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import p from "clsx";
+import { useFormControl as u } from "../Form/FormContext.js";
+const q = /* @__PURE__ */ x(({
+  noValidationIcon: e,
+  placeholder: m,
+  size: t = "md",
+  height: r = "md",
+  className: i,
+  ...l
+}, s) => {
   const {
-    id,
-    isRequired,
-    isReadOnly,
-    status
-  } = useFormControl(), classes = clsx({
-    "form-control": !isReadOnly,
-    "form-control-lg": size === "lg",
-    "form-control-sm": size === "sm",
-    "textarea-height-lg": height === "lg",
-    "textarea-height-md": height === "md",
-    "textarea-height-sm": height === "sm",
-    "is-invalid": status === "invalid",
-    "is-valid": status === "valid",
-    "form-control-plaintext": isReadOnly,
-    "no-validation-icon": noValidationIcon
-  }, className);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("textarea", { ref, id, className: classes, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps }) });
+    id: n,
+    isRequired: d,
+    isReadOnly: o,
+    status: a
+  } = u(), c = p({
+    "form-control": !o,
+    "form-control-lg": t === "lg",
+    "form-control-sm": t === "sm",
+    "textarea-height-lg": r === "lg",
+    "textarea-height-md": r === "md",
+    "textarea-height-sm": r === "sm",
+    "is-invalid": a === "invalid",
+    "is-valid": a === "valid",
+    "form-control-plaintext": o,
+    "no-validation-icon": e
+  }, i);
+  return /* @__PURE__ */ f("textarea", { ref: s, id: n, className: c, placeholder: m, required: d, readOnly: o, ...l });
 });
 export {
-  TextArea,
-  TextArea as default
+  q as TextArea,
+  q as default
 };
+//# sourceMappingURL=TextArea.js.map

package/dist/components/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react';\n\nimport clsx from 'clsx';\n\nimport { Size } from '../../types';\nimport { useFormControl } from '../Form/FormContext';\n\nexport type OmitTextAreaProps =\n  | 'disabled'\n  | 'required'\n  | 'size'\n  | 'id'\n  | 'readOnly';\n\nexport interface TextAreaProps\n  extends Omit<React.ComponentPropsWithRef<'textarea'>, OmitTextAreaProps> {\n  /**\n   * Control size of TextArea\n   */\n  size: Size;\n  /**\n   * Control maxHeight of TextArea\n   */\n  height?: Size;\n  /**\n   * Change text of placeholder\n   */\n  placeholder?: string;\n  /**\n   * Disabled status\n   */\n  disabled?: boolean;\n  /**\n   * Remove validation icon\n   */\n  noValidationIcon?: boolean;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\n/**\n * TextArea Form Component\n */\n\nexport const TextArea = forwardRef(\n  (\n    {\n      noValidationIcon,\n      placeholder,\n      size = 'md',\n      height = 'md',\n      className,\n      ...restProps\n    }: TextAreaProps,\n    ref: Ref<HTMLTextAreaElement>,\n  ) => {\n    const { id, isRequired, isReadOnly, status } = useFormControl();\n\n    const classes = clsx(\n      {\n        'form-control': !isReadOnly,\n        'form-control-lg': size === 'lg',\n        'form-control-sm': size === 'sm',\n        'textarea-height-lg': height === 'lg',\n        'textarea-height-md': height === 'md',\n        'textarea-height-sm': height === 'sm',\n        'is-invalid': status === 'invalid',\n        'is-valid': status === 'valid',\n        'form-control-plaintext': isReadOnly,\n        'no-validation-icon': noValidationIcon,\n      },\n      className,\n    );\n\n    return (\n      <textarea\n        ref={ref}\n        id={id}\n        className={classes}\n        placeholder={placeholder}\n        required={isRequired}\n        readOnly={isReadOnly}\n        {...restProps}\n      />\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"names":["TextArea","noValidationIcon","placeholder","size","height","className","restProps","ref","id","isRequired","isReadOnly","status","useFormControl","classes","clsx","jsx"],"mappings":";;;;AA8CaA,MAAAA,sBACX,CACE;AAAA,EACEC,kBAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,QAAAA,IAAS;AAAA,EACTC,WAAAA;AAAAA,EACA,GAAGC;AACU,GACfC,MACG;AACG,QAAA;AAAA,IAAEC,IAAAA;AAAAA,IAAIC,YAAAA;AAAAA,IAAYC,YAAAA;AAAAA,IAAYC,QAAAA;AAAAA,MAAWC,EAAe,GAExDC,IAAUC,EACd;AAAA,IACE,gBAAgB,CAACJ;AAAAA,IACjB,mBAAmBP,MAAS;AAAA,IAC5B,mBAAmBA,MAAS;AAAA,IAC5B,sBAAsBC,MAAW;AAAA,IACjC,sBAAsBA,MAAW;AAAA,IACjC,sBAAsBA,MAAW;AAAA,IACjC,cAAcO,MAAW;AAAA,IACzB,YAAYA,MAAW;AAAA,IACvB,0BAA0BD;AAAAA,IAC1B,sBAAsBT;AAAAA,KAExBI,CACF;AAEA,SACG,gBAAAU,EAAA,YAAA,EACC,KAAAR,GACA,IAAAC,GACA,WAAWK,GACX,aAAAX,GACA,UAAUO,GACV,UAAUC,GACNJ,GAAAA,EACJ,CAAA;AAEN,CACF;"}

package/dist/components/TextArea/TextareaCounter.js

@@ -1,8 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-const TextareaCounter = ({
-  content,
-  maxLength
-}) => /* @__PURE__ */ jsx("p", { className: "small text-gray-700 p-2 text-end", children: content ? `${content.length} / ${maxLength}` : "" });
+import { jsx as t } from "react/jsx-runtime";
+const l = ({
+  content: e,
+  maxLength: r
+}) => /* @__PURE__ */ t("p", { className: "small text-gray-700 p-2 text-end", children: e ? `${e.length} / ${r}` : "" });
 export {
-  TextareaCounter
+  l as TextareaCounter
 };
+//# sourceMappingURL=TextareaCounter.js.map

package/dist/components/TextArea/TextareaCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaCounter.js","sources":["../../../src/components/TextArea/TextareaCounter.tsx"],"sourcesContent":["export const TextareaCounter = ({\n  content,\n  maxLength,\n}: {\n  content: string;\n  maxLength: number;\n}) => {\n  return (\n    <p className=\"small text-gray-700 p-2 text-end\">\n      {content ? `${content.length} / ${maxLength}` : ''}\n    </p>\n  );\n};\n"],"names":["TextareaCounter","content","maxLength","jsx","length"],"mappings":";AAAO,MAAMA,IAAkBA,CAAC;AAAA,EAC9BC,SAAAA;AAAAA,EACAC,WAAAA;AAIF,MAEI,gBAAAC,EAAC,KAAE,EAAA,WAAU,oCACVF,UAAAA,IAAU,GAAGA,EAAQG,MAAM,MAAMF,CAAS,KAAK,GAClD,CAAA;"}

package/dist/components/Toolbar/Toolbar.js

@@ -1,78 +1,79 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect, createElement } from "react";
-import clsx from "clsx";
-import { mergeRefs } from "../../utils/ref.js";
-import { Tooltip } from "../Tooltip/Tooltip.js";
-import { Button } from "../Button/Button.js";
-import { Dropdown } from "../Dropdown/Dropdown.js";
-import { IconButton } from "../Button/IconButton.js";
-const Toolbar = /* @__PURE__ */ forwardRef(({
-  items,
-  variant = "default",
-  align = "space",
-  isBlock = !1,
-  ariaControls,
-  className
-}, ref) => {
-  const [firstFocusableItemIndex, setFirstFocusableItemIndex] = useState(0), [a11yNavigationItems, setA11yNavigationItems] = useState([]), [firstA11yNavigationItem, setFirstA11yNavigationItem] = useState(), [lastA11yNavigationItem, setA11yNavigationLastItem] = useState(), divToolbarRef = useRef(), classes = clsx("toolbar z-1000 bg-white", className, {
-    default: variant === "default",
-    "no-shadow": variant === "no-shadow",
-    "d-flex": isBlock,
-    "d-inline-flex": !isBlock,
-    "overflow-x-auto": isBlock,
-    "justify-content-start": align === "left",
-    "justify-content-between": align === "space",
-    "justify-content-center": align === "center",
-    "justify-content-end": align === "right"
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as k, useState as f, useRef as E, useEffect as S, createElement as h } from "react";
+import B from "clsx";
+import { mergeRefs as q } from "../../utils/ref.js";
+import { Tooltip as w } from "../Tooltip/Tooltip.js";
+import { Button as m } from "../Button/Button.js";
+import { Dropdown as z } from "../Dropdown/Dropdown.js";
+import { IconButton as H } from "../Button/IconButton.js";
+const V = /* @__PURE__ */ k(({
+  items: u,
+  variant: v = "default",
+  align: a = "space",
+  isBlock: d = !1,
+  ariaControls: T,
+  className: x
+}, F) => {
+  const [i, D] = f(0), [y, j] = f([]), [c, K] = f(), [l, R] = f(), I = E(), A = B("toolbar z-1000 bg-white", x, {
+    default: v === "default",
+    "no-shadow": v === "no-shadow",
+    "d-flex": d,
+    "d-inline-flex": !d,
+    "overflow-x-auto": d,
+    "justify-content-start": a === "left",
+    "justify-content-between": a === "space",
+    "justify-content-center": a === "center",
+    "justify-content-end": a === "right"
   });
-  useEffect(() => {
-    var _a;
-    const buttons = (_a = divToolbarRef.current) == null ? void 0 : _a.querySelectorAll("button"), enabledItems = [];
-    let isfirstItemSet = !1;
-    buttons == null || buttons.forEach((item) => {
-      item.disabled || (isfirstItemSet || (setFirstA11yNavigationItem(item), isfirstItemSet = !0), setA11yNavigationLastItem(item), enabledItems.push(item));
-    }), setA11yNavigationItems(enabledItems), setFirstFocusableItemIndex(items.findIndex((item) => (item.type === "button" || item.type === "icon") && !item.props.disabled));
-  }, [items]);
-  const handleFocus = (event) => {
-    event.target.classList.add("focus");
-  }, handleBlur = (event) => {
-    event.target.classList.remove("focus");
-  }, handleKeyDown = (event) => {
-    var _a, _b;
-    const index = a11yNavigationItems.indexOf(event.currentTarget);
-    switch (event.code) {
+  S(() => {
+    var n;
+    const o = (n = I.current) == null ? void 0 : n.querySelectorAll("button"), r = [];
+    let s = !1;
+    o == null || o.forEach((e) => {
+      e.disabled || (s || (K(e), s = !0), R(e), r.push(e));
+    }), j(r), D(u.findIndex((e) => (e.type === "button" || e.type === "icon") && !e.props.disabled));
+  }, [u]);
+  const L = (o) => {
+    o.target.classList.add("focus");
+  }, N = (o) => {
+    o.target.classList.remove("focus");
+  }, p = (o) => {
+    var s, n;
+    const r = y.indexOf(o.currentTarget);
+    switch (o.code) {
       case "ArrowLeft":
-        event.currentTarget === firstA11yNavigationItem ? lastA11yNavigationItem == null || lastA11yNavigationItem.focus() : (_a = a11yNavigationItems[index - 1]) == null || _a.focus();
+        o.currentTarget === c ? l == null || l.focus() : (s = y[r - 1]) == null || s.focus();
         break;
       case "ArrowRight":
-        event.currentTarget === lastA11yNavigationItem ? firstA11yNavigationItem == null || firstA11yNavigationItem.focus() : (_b = a11yNavigationItems[index + 1]) == null || _b.focus();
+        o.currentTarget === l ? c == null || c.focus() : (n = y[r + 1]) == null || n.focus();
         break;
     }
-  }, renderTooltipMessage = (item) => {
-    var _a;
-    return typeof item.tooltip == "string" ? item.tooltip : (_a = item.tooltip) == null ? void 0 : _a.message;
-  }, renderTooltipPosition = (item) => {
-    var _a;
-    return typeof item.tooltip != "string" ? (_a = item.tooltip) == null ? void 0 : _a.position : "top";
+  }, b = (o) => {
+    var r;
+    return typeof o.tooltip == "string" ? o.tooltip : (r = o.tooltip) == null ? void 0 : r.message;
+  }, g = (o) => {
+    var r;
+    return typeof o.tooltip != "string" ? (r = o.tooltip) == null ? void 0 : r.position : "top";
   };
-  return /* @__PURE__ */ jsx("div", { ref: mergeRefs(ref, divToolbarRef), className: classes, role: "toolbar", "aria-label": "Text Formatting", "aria-controls": ariaControls, onFocus: handleFocus, onBlur: handleBlur, children: items.map((item, index) => {
-    if (item.visibility === "hide") return null;
-    switch (item.type) {
+  return /* @__PURE__ */ t("div", { ref: q(F, I), className: A, role: "toolbar", "aria-label": "Text Formatting", "aria-controls": T, onFocus: L, onBlur: N, children: u.map((o, r) => {
+    if (o.visibility === "hide") return null;
+    switch (o.type) {
       case "divider":
-        return /* @__PURE__ */ jsx("div", { className: "toolbar-divider" }, item.name ?? index);
+        return /* @__PURE__ */ t("div", { className: "toolbar-divider" }, o.name ?? r);
       case "button":
-        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+        return /* @__PURE__ */ t(w, { message: b(o), placement: g(o), children: /* @__PURE__ */ h(m, { ...o.props, key: o.name ?? r, color: o.props.color ? o.props.color : "tertiary", variant: "ghost", tabIndex: r === i ? 0 : -1, onKeyDown: p }) }, o.name ?? r);
       case "icon":
-        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(IconButton, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: item.props.variant ? item.props.variant : "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+        return /* @__PURE__ */ t(w, { message: b(o), placement: g(o), children: /* @__PURE__ */ h(H, { ...o.props, key: o.name ?? r, color: o.props.color ? o.props.color : "tertiary", variant: o.props.variant ? o.props.variant : "ghost", tabIndex: r === i ? 0 : -1, onKeyDown: p }) }, o.name ?? r);
       case "dropdown":
-        return /* @__PURE__ */ createElement(Dropdown, { ...item.props, key: item.name ?? index, extraTriggerKeyDownHandler: handleKeyDown, overflow: item.overflow });
+        return /* @__PURE__ */ h(z, { ...o.props, key: o.name ?? r, extraTriggerKeyDownHandler: p, overflow: o.overflow });
       case "primary":
-        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ jsx(Button, { ...item.props, variant: "filled", color: "primary", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+        return /* @__PURE__ */ t(w, { message: b(o), placement: g(o), children: /* @__PURE__ */ t(m, { ...o.props, variant: "filled", color: "primary", tabIndex: r === i ? 0 : -1, onKeyDown: p }) }, o.name ?? r);
     }
     return null;
   }) });
 });
 export {
-  Toolbar,
-  Toolbar as default
+  V as Toolbar,
+  V as default
 };
+//# sourceMappingURL=Toolbar.js.map

package/dist/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport {\n  FocusEvent,\n  ReactNode,\n  Ref,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport clsx from 'clsx';\n\nimport { mergeRefs } from '../../utils';\nimport { Button, ButtonProps, IconButton, IconButtonProps } from '../Button';\nimport { Dropdown, DropdownProps } from '../Dropdown';\nimport { Placement, Tooltip } from '../Tooltip';\n\ninterface Item {\n  /** Object type */\n  type: string;\n  /** Items should be named, except for dividers */\n  name?: string;\n  /** Set to \"hide\" to hide this item. Defaults to \"show\" when undefined. */\n  visibility?: 'show' | 'hide';\n}\n\ninterface ToolbarTooltip {\n  tooltip?:\n    | string\n    | {\n        message: string;\n        position?: Placement;\n      };\n}\n\ninterface ButtonItem extends Item, ToolbarTooltip {\n  type: 'button';\n  name: string;\n  props: ButtonProps;\n}\ninterface IconButtonItem extends Item, ToolbarTooltip {\n  type: 'icon';\n  name: string;\n  props: IconButtonProps;\n}\ninterface DropdownItem extends Item {\n  type: 'dropdown';\n  props: DropdownProps;\n  overflow?: boolean;\n}\ninterface PrimaryItem extends Item, ToolbarTooltip {\n  type: 'primary';\n  props: ButtonProps;\n}\ninterface DividerItem extends Item {\n  type: 'divider';\n}\n\nexport type ToolbarRef = HTMLDivElement;\nexport type ToolbarVariant = 'default' | 'no-shadow';\nexport type ToolbarAlign = 'left' | 'center' | 'space' | 'right';\nexport type ToolbarItem =\n  | ButtonItem\n  | IconButtonItem\n  | DropdownItem\n  | PrimaryItem\n  | DividerItem;\n\nexport interface ToolbarProps extends React.ComponentPropsWithRef<'div'> {\n  /**\n   * Toolbar data items\n   */\n  items: ToolbarItem[];\n  /**\n   * Toolbar variant\n   */\n  variant?: ToolbarVariant;\n  /**\n   * Buttons alignement when isBlock is true\n   */\n  align?: ToolbarAlign;\n  /**\n   * Toolbar has width 100%\n   */\n  isBlock?: boolean;\n  /**\n   * Editor container ID for a11y purpose\n   */\n  ariaControls?: string;\n  /**\n   * Additional CSS classes.\n   */\n  className?: string;\n  /**\n   * Accept optional children\n   */\n  children?: ReactNode;\n}\n\nexport const Toolbar = forwardRef(\n  (\n    {\n      items,\n      variant = 'default',\n      align = 'space',\n      isBlock = false,\n      ariaControls,\n      className,\n    }: ToolbarProps,\n    ref: Ref<ToolbarRef>,\n  ) => {\n    const [firstFocusableItemIndex, setFirstFocusableItemIndex] =\n      useState<number>(0);\n    const [a11yNavigationItems, setA11yNavigationItems] = useState<\n      Array<HTMLElement>\n    >([]);\n    const [firstA11yNavigationItem, setFirstA11yNavigationItem] =\n      useState<HTMLElement>();\n    const [lastA11yNavigationItem, setA11yNavigationLastItem] =\n      useState<HTMLElement>();\n\n    const divToolbarRef = useRef<HTMLDivElement>();\n\n    const classes = clsx('toolbar z-1000 bg-white', className, {\n      default: variant === 'default',\n      'no-shadow': variant === 'no-shadow',\n      'd-flex': isBlock,\n      'd-inline-flex': !isBlock,\n      'overflow-x-auto': isBlock,\n      'justify-content-start': align === 'left',\n      'justify-content-between': align === 'space',\n      'justify-content-center': align === 'center',\n      'justify-content-end': align === 'right',\n    });\n\n    useEffect(() => {\n      // a11y: set first and last item for keyboard arrow navigation\n      const buttons: NodeListOf<HTMLButtonElement> | undefined =\n        divToolbarRef.current?.querySelectorAll('button');\n      const enabledItems: Array<HTMLElement> = [];\n      let isfirstItemSet = false;\n\n      buttons?.forEach((item) => {\n        if (!item.disabled) {\n          if (!isfirstItemSet) {\n            setFirstA11yNavigationItem(item);\n            isfirstItemSet = true;\n          }\n          setA11yNavigationLastItem(item);\n          enabledItems.push(item);\n        }\n      });\n\n      setA11yNavigationItems(enabledItems);\n\n      // a11y: set first element to focus with tab keyboard\n      setFirstFocusableItemIndex(\n        items.findIndex(\n          (item) =>\n            (item.type === 'button' || item.type === 'icon') &&\n            !item.props.disabled,\n        ),\n      );\n    }, [items]);\n\n    const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n      // focused button\n      event.target.classList.add('focus');\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      // focused button\n      event.target.classList.remove('focus');\n    };\n\n    /**\n     * Handle a11y toolbar navigation with Arrow keys.\n     */\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      const index = a11yNavigationItems.indexOf(event.currentTarget);\n      switch (event.code) {\n        case 'ArrowLeft':\n          // switch to previous item\n          if (event.currentTarget === firstA11yNavigationItem) {\n            lastA11yNavigationItem?.focus();\n          } else {\n            a11yNavigationItems[index - 1]?.focus();\n          }\n          break;\n        case 'ArrowRight':\n          // switch to next item\n          if (event.currentTarget === lastA11yNavigationItem) {\n            firstA11yNavigationItem?.focus();\n          } else {\n            a11yNavigationItems[index + 1]?.focus();\n          }\n          break;\n        default:\n          break;\n      }\n    };\n\n    const renderTooltipMessage = (\n      item: Exclude<ToolbarItem, DropdownItem | DividerItem>,\n    ) => {\n      return typeof item.tooltip === 'string'\n        ? item.tooltip\n        : item.tooltip?.message;\n    };\n\n    const renderTooltipPosition = (\n      item: Exclude<ToolbarItem, DropdownItem | DividerItem>,\n    ) => {\n      return typeof item.tooltip !== 'string' ? item.tooltip?.position : 'top';\n    };\n\n    return (\n      <div\n        ref={mergeRefs(ref, divToolbarRef)}\n        className={classes}\n        role=\"toolbar\"\n        aria-label=\"Text Formatting\"\n        aria-controls={ariaControls}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      >\n        {items.map((item, index) => {\n          if (item.visibility === 'hide') return null;\n\n          switch (item.type) {\n            case 'divider':\n              return (\n                <div key={item.name ?? index} className=\"toolbar-divider\"></div>\n              );\n\n            case 'button':\n              return (\n                <Tooltip\n                  key={item.name ?? index}\n                  message={renderTooltipMessage(item)}\n                  placement={renderTooltipPosition(item)}\n                >\n                  <Button\n                    {...item.props}\n                    key={item.name ?? index}\n                    color={item.props.color ? item.props.color : 'tertiary'}\n                    variant=\"ghost\"\n                    tabIndex={index === firstFocusableItemIndex ? 0 : -1}\n                    onKeyDown={handleKeyDown}\n                  />\n                </Tooltip>\n              );\n\n            case 'icon':\n              return (\n                <Tooltip\n                  key={item.name ?? index}\n                  message={renderTooltipMessage(item)}\n                  placement={renderTooltipPosition(item)}\n                >\n                  <IconButton\n                    {...item.props}\n                    key={item.name ?? index}\n                    color={item.props.color ? item.props.color : 'tertiary'}\n                    variant={item.props.variant ? item.props.variant : 'ghost'}\n                    tabIndex={index === firstFocusableItemIndex ? 0 : -1}\n                    onKeyDown={handleKeyDown}\n                  />\n                </Tooltip>\n              );\n\n            case 'dropdown':\n              return (\n                <Dropdown\n                  {...item.props}\n                  key={item.name ?? index}\n                  extraTriggerKeyDownHandler={handleKeyDown}\n                  overflow={item.overflow}\n                >\n                  {/* Set the children through props */}\n                </Dropdown>\n              );\n\n            case 'primary':\n              return (\n                <Tooltip\n                  key={item.name ?? index}\n                  message={renderTooltipMessage(item)}\n                  placement={renderTooltipPosition(item)}\n                >\n                  <Button\n                    {...item.props}\n                    variant=\"filled\"\n                    color=\"primary\"\n                    tabIndex={index === firstFocusableItemIndex ? 0 : -1}\n                    onKeyDown={handleKeyDown}\n                  />\n                </Tooltip>\n              );\n\n            default:\n              break;\n          }\n          return null;\n        })}\n      </div>\n    );\n  },\n);\n\nToolbar.displayName = 'Toolbar';\n\nexport default Toolbar;\n"],"names":["Toolbar","items","variant","align","isBlock","ariaControls","className","ref","firstFocusableItemIndex","setFirstFocusableItemIndex","useState","a11yNavigationItems","setA11yNavigationItems","firstA11yNavigationItem","setFirstA11yNavigationItem","lastA11yNavigationItem","setA11yNavigationLastItem","divToolbarRef","useRef","classes","clsx","default","useEffect","buttons","current","querySelectorAll","enabledItems","isfirstItemSet","forEach","item","disabled","push","findIndex","type","props","handleFocus","event","target","classList","add","handleBlur","remove","handleKeyDown","index","indexOf","currentTarget","code","focus","renderTooltipMessage","tooltip","message","renderTooltipPosition","position","jsx","mergeRefs","map","visibility","name","Tooltip","Button","color","IconButton","createElement","Dropdown","overflow"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,41 +1,42 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import clsx from "clsx";
-import { usePopper } from "react-popper";
-const Tooltip = ({
-  children,
-  message,
-  icon = null,
-  placement = "auto"
+import { jsxs as t, Fragment as h, jsx as o } from "react/jsx-runtime";
+import { useState as e } from "react";
+import w from "clsx";
+import { usePopper as E } from "react-popper";
+const j = ({
+  children: i,
+  message: r,
+  icon: l = null,
+  placement: a = "auto"
 }) => {
-  const [referenceElement, setReferenceElement] = useState(null), [popperElement, setPopperElement] = useState(null), [arrowElement, setArrowElement] = useState(null), {
-    styles,
-    attributes
-  } = usePopper(referenceElement, popperElement, {
-    placement,
+  const [p, m] = e(null), [c, d] = e(null), [f, u] = e(null), {
+    styles: s,
+    attributes: v
+  } = E(p, c, {
+    placement: a,
     modifiers: [{
       name: "arrow",
       options: {
-        element: arrowElement
+        element: f
       }
     }]
-  }), [visible, setVisible] = useState(!1);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "d-inline-block position-relative z-2", ref: setReferenceElement, onMouseEnter: () => {
-      setVisible(!0);
+  }), [b, n] = e(!1);
+  return /* @__PURE__ */ t(h, { children: [
+    /* @__PURE__ */ o("div", { className: "d-inline-block position-relative z-2", ref: m, onMouseEnter: () => {
+      n(!0);
     }, onMouseLeave: () => {
-      setVisible(!1);
-    }, children }),
-    visible && message && /* @__PURE__ */ jsxs("div", { className: clsx("tooltip d-block show mb-12", "bs-tooltip-auto"), ref: setPopperElement, style: styles.popper, ...attributes.popper, children: [
-      /* @__PURE__ */ jsxs("div", { className: "tooltip-inner shadow-hover d-flex gap-8 align-items-center", children: [
-        icon && icon,
-        /* @__PURE__ */ jsx("div", { children: message })
+      n(!1);
+    }, children: i }),
+    b && r && /* @__PURE__ */ t("div", { className: w("tooltip d-block show mb-12", "bs-tooltip-auto"), ref: d, style: s.popper, ...v.popper, children: [
+      /* @__PURE__ */ t("div", { className: "tooltip-inner shadow-hover d-flex gap-8 align-items-center", children: [
+        l && l,
+        /* @__PURE__ */ o("div", { children: r })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "tooltip-arrow", ref: setArrowElement, style: styles.arrow })
+      /* @__PURE__ */ o("div", { className: "tooltip-arrow", ref: u, style: s.arrow })
     ] })
   ] });
 };
 export {
-  Tooltip,
-  Tooltip as default
+  j as Tooltip,
+  j as default
 };
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { ReactNode, useState } from 'react';\n\nimport clsx from 'clsx';\nimport { usePopper } from 'react-popper';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\nexport interface TooltipProps {\n  /**\n   * Text to display inside tooltip\n   */\n  message: string | undefined;\n  /**\n   * Element to be wrapped as Tooltip trigger\n   */\n  children: React.ReactNode;\n  /**\n   * Tooltip position\n   */\n  placement?: Placement;\n  /**\n   * Tooltip left icon\n   */\n  icon?: ReactNode;\n}\n\nexport const Tooltip = ({\n  children,\n  message,\n  icon = null,\n  placement = 'auto',\n}: TooltipProps) => {\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(\n    null,\n  );\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(\n    null,\n  );\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n  const { styles, attributes } = usePopper(referenceElement, popperElement, {\n    placement,\n    modifiers: [\n      {\n        name: 'arrow',\n        options: {\n          element: arrowElement,\n        },\n      },\n    ],\n  });\n\n  const [visible, setVisible] = useState<boolean>(false);\n\n  return (\n    <>\n      <div\n        className=\"d-inline-block position-relative z-2\"\n        ref={setReferenceElement}\n        onMouseEnter={() => {\n          setVisible(true);\n        }}\n        onMouseLeave={() => {\n          setVisible(false);\n        }}\n      >\n        {children}\n      </div>\n      {visible && message && (\n        <div\n          className={clsx('tooltip d-block show mb-12', `bs-tooltip-auto`)}\n          ref={setPopperElement}\n          style={styles.popper}\n          {...attributes.popper}\n        >\n          <div className=\"tooltip-inner shadow-hover d-flex gap-8 align-items-center\">\n            {icon && icon}\n            <div>{message}</div>\n          </div>\n          <div\n            className=\"tooltip-arrow\"\n            ref={setArrowElement}\n            style={styles.arrow}\n          ></div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","children","message","icon","placement","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","arrowElement","setArrowElement","styles","attributes","usePopper","modifiers","name","options","element","visible","setVisible","jsxs","Fragment","jsx","clsx","popper","arrow"],"mappings":";;;;AAyCO,MAAMA,IAAUA,CAAC;AAAA,EACtBC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,WAAAA,IAAY;AACA,MAAM;AAClB,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAC9C,IACF,GACM,CAACC,GAAeC,CAAgB,IAAIF,EACxC,IACF,GACM,CAACG,GAAcC,CAAe,IAAIJ,EAAgC,IAAI,GAEtE;AAAA,IAAEK,QAAAA;AAAAA,IAAQC,YAAAA;AAAAA,EAAAA,IAAeC,EAAUT,GAAkBG,GAAe;AAAA,IACxEJ,WAAAA;AAAAA,IACAW,WAAW,CACT;AAAA,MACEC,MAAM;AAAA,MACNC,SAAS;AAAA,QACPC,SAASR;AAAAA,MACX;AAAA,IAAA,CACD;AAAA,EAAA,CAEJ,GAEK,CAACS,GAASC,CAAU,IAAIb,EAAkB,EAAK;AAErD,SAEI,gBAAAc,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAAC,SACC,WAAU,wCACV,KAAKjB,GACL,cAAc,MAAM;AAClBc,MAAAA,EAAW,EAAI;AAAA,IACjB,GACA,cAAc,MAAM;AAClBA,MAAAA,EAAW,EAAK;AAAA,OAGjBnB,UAAAA,EACH,CAAA;AAAA,IACCkB,KAAWjB,KACV,gBAAAmB,EAAC,OACC,EAAA,WAAWG,EAAK,8BAA8B,iBAAiB,GAC/D,KAAKf,GACL,OAAOG,EAAOa,WACVZ,EAAWY,QAEf,UAAA;AAAA,MAAC,gBAAAJ,EAAA,OAAA,EAAI,WAAU,8DACZlB,UAAAA;AAAAA,QAAQA,KAAAA;AAAAA,QACT,gBAAAoB,EAAC,SAAKrB,UAAQA,EAAA,CAAA;AAAA,MAAA,GAChB;AAAA,MACA,gBAAAqB,EAAC,SACC,WAAU,iBACV,KAAKZ,GACL,OAAOC,EAAOc,OACf;AAAA,IAAA,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}