@frontify/fondue 12.0.0-beta.394 → 12.0.0-beta.396

package/dist/components/LegacyOrderableList/LegacyCollectionItem.es.js

@@ -1,38 +1,36 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useFocusRing as d } from "@react-aria/focus";
-import { useId as p } from "@react-aria/utils";
-import { FOCUS_STYLE as u } from "../../utilities/focusStyle.es.js";
+import { useFocusRing as s } from "@react-aria/focus";
+import { FOCUS_STYLE as d } from "../../utilities/focusStyle.es.js";
 import { merge as a } from "../../utilities/merge.es.js";
 import { LegacyItemDragState as i } from "./types.es.js";
-import { useDrag as f } from "react-dnd";
-const y = ({
+import { useDrag as p } from "react-dnd";
+const u = ({
   item: t,
-  renderContent: m,
+  renderContent: n,
   dragDisabled: o,
-  listId: n
+  listId: m
 }) => {
-  const { isFocusVisible: e } = d(), [{ componentDragState: c }, l] = f({
+  const { isFocusVisible: e } = s(), [{ componentDragState: c }, g] = p({
     item: { ...t },
-    collect: (g) => ({
-      componentDragState: g.isDragging() ? i.Dragging : i.Idle
+    collect: (l) => ({
+      componentDragState: l.isDragging() ? i.Dragging : i.Idle
     }),
-    type: n,
+    type: m,
     canDrag: !o
-  }), s = p();
+  });
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: l,
+      ref: g,
       className: a(["tw-relative tw-outline-none", e ? "tw-z-30" : "tw-z-0"]),
-      "aria-labelledby": s,
       "data-test-id": "draggable-item",
       "aria-disabled": o,
-      children: /* @__PURE__ */ r("div", { className: a(["tw-outline-none", e && u]), children: m(t, { componentDragState: c, isFocusVisible: e }) })
+      children: /* @__PURE__ */ r("div", { className: a(["tw-outline-none", e && d]), children: n(t, { componentDragState: c, isFocusVisible: e }) })
     }
   );
 };
-y.displayName = "FondueLegacyCollectionItem";
+u.displayName = "FondueLegacyCollectionItem";
 export {
-  y as LegacyCollectionItem
+  u as LegacyCollectionItem
 };
 //# sourceMappingURL=LegacyCollectionItem.es.js.map

package/dist/components/LegacyOrderableList/LegacyCollectionItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyCollectionItem.es.js","sources":["../../../src/components/LegacyOrderableList/LegacyCollectionItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { useId } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { LegacyCollectionItemProps, LegacyItemDragState } from './types';\nimport { useDrag } from 'react-dnd';\n\nexport const LegacyCollectionItem = <T extends object>({\n    item,\n    renderContent,\n    dragDisabled,\n    listId,\n}: LegacyCollectionItemProps<T>) => {\n    const { isFocusVisible } = useFocusRing();\n    const [{ componentDragState }, drag] = useDrag({\n        item: { ...item },\n        collect: (monitor) => ({\n            componentDragState: monitor.isDragging() ? LegacyItemDragState.Dragging : LegacyItemDragState.Idle,\n        }),\n        type: listId,\n        canDrag: !dragDisabled,\n    });\n    const id = useId();\n\n    return (\n        <div\n            ref={drag}\n            className={merge(['tw-relative tw-outline-none', isFocusVisible ? 'tw-z-30' : 'tw-z-0'])}\n            aria-labelledby={id}\n            data-test-id=\"draggable-item\"\n            aria-disabled={dragDisabled}\n        >\n            <div className={merge(['tw-outline-none', isFocusVisible && FOCUS_STYLE])}>\n                {renderContent(item, { componentDragState, isFocusVisible })}\n            </div>\n        </div>\n    );\n};\nLegacyCollectionItem.displayName = 'FondueLegacyCollectionItem';\n"],"names":["LegacyCollectionItem","item","renderContent","dragDisabled","listId","isFocusVisible","useFocusRing","componentDragState","drag","useDrag","monitor","LegacyItemDragState","id","useId","jsx","merge","FOCUS_STYLE"],"mappings":";;;;;;;AASO,MAAMA,IAAuB,CAAmB;AAAA,EACnD,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AACJ,MAAoC;AAC1B,QAAA,EAAE,gBAAAC,MAAmBC,KACrB,CAAC,EAAE,oBAAAC,EAAA,GAAsBC,CAAI,IAAIC,EAAQ;AAAA,IAC3C,MAAM,EAAE,GAAGR,EAAK;AAAA,IAChB,SAAS,CAACS,OAAa;AAAA,MACnB,oBAAoBA,EAAQ,WAAA,IAAeC,EAAoB,WAAWA,EAAoB;AAAA,IAAA;AAAA,IAElG,MAAMP;AAAA,IACN,SAAS,CAACD;AAAA,EAAA,CACb,GACKS,IAAKC;AAGP,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKN;AAAA,MACL,WAAWO,EAAM,CAAC,+BAA+BV,IAAiB,YAAY,QAAQ,CAAC;AAAA,MACvF,mBAAiBO;AAAA,MACjB,gBAAa;AAAA,MACb,iBAAeT;AAAA,MAEf,4BAAC,OAAI,EAAA,WAAWY,EAAM,CAAC,mBAAmBV,KAAkBW,CAAW,CAAC,GACnE,YAAcf,GAAM,EAAE,oBAAAM,GAAoB,gBAAAF,EAAgB,CAAA,GAC/D;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAL,EAAqB,cAAc;"}
+{"version":3,"file":"LegacyCollectionItem.es.js","sources":["../../../src/components/LegacyOrderableList/LegacyCollectionItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { LegacyCollectionItemProps, LegacyItemDragState } from './types';\nimport { useDrag } from 'react-dnd';\n\nexport const LegacyCollectionItem = <T extends object>({\n    item,\n    renderContent,\n    dragDisabled,\n    listId,\n}: LegacyCollectionItemProps<T>) => {\n    const { isFocusVisible } = useFocusRing();\n    const [{ componentDragState }, drag] = useDrag({\n        item: { ...item },\n        collect: (monitor) => ({\n            componentDragState: monitor.isDragging() ? LegacyItemDragState.Dragging : LegacyItemDragState.Idle,\n        }),\n        type: listId,\n        canDrag: !dragDisabled,\n    });\n\n    return (\n        <div\n            ref={drag}\n            className={merge(['tw-relative tw-outline-none', isFocusVisible ? 'tw-z-30' : 'tw-z-0'])}\n            data-test-id=\"draggable-item\"\n            aria-disabled={dragDisabled}\n        >\n            <div className={merge(['tw-outline-none', isFocusVisible && FOCUS_STYLE])}>\n                {renderContent(item, { componentDragState, isFocusVisible })}\n            </div>\n        </div>\n    );\n};\nLegacyCollectionItem.displayName = 'FondueLegacyCollectionItem';\n"],"names":["LegacyCollectionItem","item","renderContent","dragDisabled","listId","isFocusVisible","useFocusRing","componentDragState","drag","useDrag","monitor","LegacyItemDragState","jsx","merge","FOCUS_STYLE"],"mappings":";;;;;;AAQO,MAAMA,IAAuB,CAAmB;AAAA,EACnD,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AACJ,MAAoC;AAC1B,QAAA,EAAE,gBAAAC,MAAmBC,KACrB,CAAC,EAAE,oBAAAC,EAAA,GAAsBC,CAAI,IAAIC,EAAQ;AAAA,IAC3C,MAAM,EAAE,GAAGR,EAAK;AAAA,IAChB,SAAS,CAACS,OAAa;AAAA,MACnB,oBAAoBA,EAAQ,WAAA,IAAeC,EAAoB,WAAWA,EAAoB;AAAA,IAAA;AAAA,IAElG,MAAMP;AAAA,IACN,SAAS,CAACD;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKJ;AAAA,MACL,WAAWK,EAAM,CAAC,+BAA+BR,IAAiB,YAAY,QAAQ,CAAC;AAAA,MACvF,gBAAa;AAAA,MACb,iBAAeF;AAAA,MAEf,4BAAC,OAAI,EAAA,WAAWU,EAAM,CAAC,mBAAmBR,KAAkBS,CAAW,CAAC,GACnE,YAAcb,GAAM,EAAE,oBAAAM,GAAoB,gBAAAF,EAAgB,CAAA,GAC/D;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAL,EAAqB,cAAc;"}

package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningBottom.es.js

@@ -3,7 +3,7 @@ const r = ({ children: t }) => /* @__PURE__ */ e(
   "div",
   {
     "data-test-id": "toolbar-bottom",
-    className: "tw-relative tw-rounded-b tw-min-h-12 tw-border-t tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap",
+    className: "tw-relative tw-rounded-b tw-border-t tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap",
     children: t
   }
 );

package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningBottom.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarWrapperPositioningBottom.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningBottom.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningBottom = ({ children }: ToolbarWrapperProps) => {\n    return (\n        <div\n            data-test-id=\"toolbar-bottom\"\n            className=\"tw-relative tw-rounded-b tw-min-h-12 tw-border-t tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap\"\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":["ToolbarWrapperPositioningBottom","children","jsx"],"mappings":";AAIO,MAAMA,IAAkC,CAAC,EAAE,UAAAC,QAE1C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAAD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"ToolbarWrapperPositioningBottom.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningBottom.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningBottom = ({ children }: ToolbarWrapperProps) => {\n    return (\n        <div\n            data-test-id=\"toolbar-bottom\"\n            className=\"tw-relative tw-rounded-b tw-border-t tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap\"\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":["ToolbarWrapperPositioningBottom","children","jsx"],"mappings":";AAIO,MAAMA,IAAkC,CAAC,EAAE,UAAAC,QAE1C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAAD;AAAA,EAAA;AAAA;"}

package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningFloating.es.js

@@ -7,25 +7,25 @@ const W = ({
   children: l,
   editorWidth: d,
   toolbarButtonGroups: o = [],
-  toolbarWidth: i
+  toolbarWidth: r
 }) => {
-  const [f, a] = w(), r = h();
+  const [f, a] = w(), i = h();
   c(() => {
-    if (i)
-      a(i);
+    if (r)
+      a(r);
     else {
       const e = E(o);
       e > 0 && a(e + o.length + F);
     }
-  }, [d, i, o]), c(() => {
+  }, [d, r, o]), c(() => {
     const e = () => {
-      const t = window.getSelection(), n = (t == null ? void 0 : t.rangeCount) ?? 0, m = n > 0 && (t == null ? void 0 : t.getRangeAt(0).startOffset), u = n > 0 && (t == null ? void 0 : t.getRangeAt(0).endOffset);
-      !(!!t && m !== u && n > 0) && r.current && r.current();
+      const t = window.getSelection(), n = (t == null ? void 0 : t.rangeCount) ?? 0, u = n > 0 && (t == null ? void 0 : t.getRangeAt(0).startOffset), m = n > 0 && (t == null ? void 0 : t.getRangeAt(0).endOffset);
+      !(!!t && u !== m && n > 0) && i.current && i.current();
     };
     return document.addEventListener("selectionchange", e), () => document.removeEventListener("selectionchange", e);
   }, []);
   const g = (e, t, n) => {
-    r.current = S(e, t, n);
+    i.current = S(e, t, n);
   };
   return /* @__PURE__ */ s(
     p,
@@ -40,7 +40,7 @@ const W = ({
         {
           "data-selector": "toolbar-floating",
           "data-test-id": "toolbar-floating",
-          className: "tw-rounded tw-min-h-12 tw-border tw-border-line tw-shadow-lg tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap",
+          className: "tw-rounded tw-border tw-border-line tw-shadow-lg tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap",
           children: l
         }
       )

package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningFloating.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarWrapperPositioningFloating.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningFloating.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef, useState } from 'react';\nimport { BalloonToolbar, ReferenceType, autoUpdate, flip, shift } from '@udecode/plate';\nimport { OFFSET_IN_PX, calculateToolbarWidth } from '@components/RichTextEditor/utils';\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningFloating = ({\n    children,\n    editorWidth,\n    toolbarButtonGroups = [],\n    toolbarWidth,\n}: ToolbarWrapperProps) => {\n    const [width, setWidth] = useState<number | undefined>();\n    const cleanupFunction = useRef<() => void | undefined>();\n\n    useEffect(() => {\n        if (toolbarWidth) {\n            setWidth(toolbarWidth);\n        } else {\n            const toolbarWidthSum = calculateToolbarWidth(toolbarButtonGroups);\n            if (toolbarWidthSum > 0) {\n                setWidth(toolbarWidthSum + toolbarButtonGroups.length + OFFSET_IN_PX);\n            }\n        }\n    }, [editorWidth, toolbarWidth, toolbarButtonGroups]);\n\n    useEffect(() => {\n        const handleSelectionChange = () => {\n            const selection = window.getSelection();\n            const rangeCount = selection?.rangeCount ?? 0;\n\n            const selectionFrom = rangeCount > 0 && selection?.getRangeAt(0).startOffset;\n            const selectionTo = rangeCount > 0 && selection?.getRangeAt(0).endOffset;\n            const hasActiveSelection = !!selection && selectionFrom !== selectionTo && rangeCount > 0;\n\n            if (!hasActiveSelection && cleanupFunction.current) {\n                cleanupFunction.current();\n            }\n        };\n\n        document.addEventListener('selectionchange', handleSelectionChange);\n        return () => document.removeEventListener('selectionchange', handleSelectionChange);\n    }, []);\n\n    const autoUpdateWithCleanup = (reference: ReferenceType, floating: HTMLElement, update: () => void) => {\n        cleanupFunction.current = autoUpdate(reference, floating, update);\n    };\n\n    return (\n        <BalloonToolbar\n            floatingOptions={{\n                middleware: [flip(), shift()],\n                whileElementsMounted: autoUpdateWithCleanup,\n            }}\n            styles={{ root: { border: 'none', background: '#ffffff', width, transitionDuration: '0s' } }}\n        >\n            <div\n                data-selector=\"toolbar-floating\"\n                data-test-id=\"toolbar-floating\"\n                className=\"tw-rounded tw-min-h-12 tw-border tw-border-line tw-shadow-lg tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap\"\n            >\n                {children}\n            </div>\n        </BalloonToolbar>\n    );\n};\n"],"names":["ToolbarWrapperPositioningFloating","children","editorWidth","toolbarButtonGroups","toolbarWidth","width","setWidth","useState","cleanupFunction","useRef","useEffect","toolbarWidthSum","calculateToolbarWidth","OFFSET_IN_PX","handleSelectionChange","selection","rangeCount","selectionFrom","selectionTo","autoUpdateWithCleanup","reference","floating","update","autoUpdate","jsx","BalloonToolbar","flip","shift"],"mappings":";;;;;AAOO,MAAMA,IAAoC,CAAC;AAAA,EAC9C,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,qBAAAC,IAAsB,CAAC;AAAA,EACvB,cAAAC;AACJ,MAA2B;AACvB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA6B,GACjDC,IAAkBC;AAExB,EAAAC,EAAU,MAAM;AACZ,QAAIN;AACA,MAAAE,EAASF,CAAY;AAAA,SAClB;AACG,YAAAO,IAAkBC,EAAsBT,CAAmB;AACjE,MAAIQ,IAAkB,KACTL,EAAAK,IAAkBR,EAAoB,SAASU,CAAY;AAAA,IAE5E;AAAA,EACD,GAAA,CAACX,GAAaE,GAAcD,CAAmB,CAAC,GAEnDO,EAAU,MAAM;AACZ,UAAMI,IAAwB,MAAM;AAC1B,YAAAC,IAAY,OAAO,gBACnBC,KAAaD,KAAA,gBAAAA,EAAW,eAAc,GAEtCE,IAAgBD,IAAa,MAAKD,KAAA,gBAAAA,EAAW,WAAW,GAAG,cAC3DG,IAAcF,IAAa,MAAKD,KAAA,gBAAAA,EAAW,WAAW,GAAG;AAG3D,MAAA,EAFuB,CAAC,CAACA,KAAaE,MAAkBC,KAAeF,IAAa,MAE7DR,EAAgB,WACvCA,EAAgB,QAAQ;AAAA,IAC5B;AAGK,oBAAA,iBAAiB,mBAAmBM,CAAqB,GAC3D,MAAM,SAAS,oBAAoB,mBAAmBA,CAAqB;AAAA,EACtF,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAwB,CAACC,GAA0BC,GAAuBC,MAAuB;AACnG,IAAAd,EAAgB,UAAUe,EAAWH,GAAWC,GAAUC,CAAM;AAAA,EAAA;AAIhE,SAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,iBAAiB;AAAA,QACb,YAAY,CAACC,KAAQC,GAAO;AAAA,QAC5B,sBAAsBR;AAAA,MAC1B;AAAA,MACA,QAAQ,EAAE,MAAM,EAAE,QAAQ,QAAQ,YAAY,WAAW,OAAAd,GAAO,oBAAoB,OAAO;AAAA,MAE3F,UAAA,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,iBAAc;AAAA,UACd,gBAAa;AAAA,UACb,WAAU;AAAA,UAET,UAAAvB;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"ToolbarWrapperPositioningFloating.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningFloating.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef, useState } from 'react';\nimport { BalloonToolbar, ReferenceType, autoUpdate, flip, shift } from '@udecode/plate';\nimport { OFFSET_IN_PX, calculateToolbarWidth } from '@components/RichTextEditor/utils';\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningFloating = ({\n    children,\n    editorWidth,\n    toolbarButtonGroups = [],\n    toolbarWidth,\n}: ToolbarWrapperProps) => {\n    const [width, setWidth] = useState<number | undefined>();\n    const cleanupFunction = useRef<() => void | undefined>();\n\n    useEffect(() => {\n        if (toolbarWidth) {\n            setWidth(toolbarWidth);\n        } else {\n            const toolbarWidthSum = calculateToolbarWidth(toolbarButtonGroups);\n            if (toolbarWidthSum > 0) {\n                setWidth(toolbarWidthSum + toolbarButtonGroups.length + OFFSET_IN_PX);\n            }\n        }\n    }, [editorWidth, toolbarWidth, toolbarButtonGroups]);\n\n    useEffect(() => {\n        const handleSelectionChange = () => {\n            const selection = window.getSelection();\n            const rangeCount = selection?.rangeCount ?? 0;\n\n            const selectionFrom = rangeCount > 0 && selection?.getRangeAt(0).startOffset;\n            const selectionTo = rangeCount > 0 && selection?.getRangeAt(0).endOffset;\n            const hasActiveSelection = !!selection && selectionFrom !== selectionTo && rangeCount > 0;\n\n            if (!hasActiveSelection && cleanupFunction.current) {\n                cleanupFunction.current();\n            }\n        };\n\n        document.addEventListener('selectionchange', handleSelectionChange);\n        return () => document.removeEventListener('selectionchange', handleSelectionChange);\n    }, []);\n\n    const autoUpdateWithCleanup = (reference: ReferenceType, floating: HTMLElement, update: () => void) => {\n        cleanupFunction.current = autoUpdate(reference, floating, update);\n    };\n\n    return (\n        <BalloonToolbar\n            floatingOptions={{\n                middleware: [flip(), shift()],\n                whileElementsMounted: autoUpdateWithCleanup,\n            }}\n            styles={{ root: { border: 'none', background: '#ffffff', width, transitionDuration: '0s' } }}\n        >\n            <div\n                data-selector=\"toolbar-floating\"\n                data-test-id=\"toolbar-floating\"\n                className=\"tw-rounded tw-border tw-border-line tw-shadow-lg tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap\"\n            >\n                {children}\n            </div>\n        </BalloonToolbar>\n    );\n};\n"],"names":["ToolbarWrapperPositioningFloating","children","editorWidth","toolbarButtonGroups","toolbarWidth","width","setWidth","useState","cleanupFunction","useRef","useEffect","toolbarWidthSum","calculateToolbarWidth","OFFSET_IN_PX","handleSelectionChange","selection","rangeCount","selectionFrom","selectionTo","autoUpdateWithCleanup","reference","floating","update","autoUpdate","jsx","BalloonToolbar","flip","shift"],"mappings":";;;;;AAOO,MAAMA,IAAoC,CAAC;AAAA,EAC9C,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,qBAAAC,IAAsB,CAAC;AAAA,EACvB,cAAAC;AACJ,MAA2B;AACvB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA6B,GACjDC,IAAkBC;AAExB,EAAAC,EAAU,MAAM;AACZ,QAAIN;AACA,MAAAE,EAASF,CAAY;AAAA,SAClB;AACG,YAAAO,IAAkBC,EAAsBT,CAAmB;AACjE,MAAIQ,IAAkB,KACTL,EAAAK,IAAkBR,EAAoB,SAASU,CAAY;AAAA,IAE5E;AAAA,EACD,GAAA,CAACX,GAAaE,GAAcD,CAAmB,CAAC,GAEnDO,EAAU,MAAM;AACZ,UAAMI,IAAwB,MAAM;AAC1B,YAAAC,IAAY,OAAO,gBACnBC,KAAaD,KAAA,gBAAAA,EAAW,eAAc,GAEtCE,IAAgBD,IAAa,MAAKD,KAAA,gBAAAA,EAAW,WAAW,GAAG,cAC3DG,IAAcF,IAAa,MAAKD,KAAA,gBAAAA,EAAW,WAAW,GAAG;AAG3D,MAAA,EAFuB,CAAC,CAACA,KAAaE,MAAkBC,KAAeF,IAAa,MAE7DR,EAAgB,WACvCA,EAAgB,QAAQ;AAAA,IAC5B;AAGK,oBAAA,iBAAiB,mBAAmBM,CAAqB,GAC3D,MAAM,SAAS,oBAAoB,mBAAmBA,CAAqB;AAAA,EACtF,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAwB,CAACC,GAA0BC,GAAuBC,MAAuB;AACnG,IAAAd,EAAgB,UAAUe,EAAWH,GAAWC,GAAUC,CAAM;AAAA,EAAA;AAIhE,SAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,iBAAiB;AAAA,QACb,YAAY,CAACC,KAAQC,GAAO;AAAA,QAC5B,sBAAsBR;AAAA,MAC1B;AAAA,MACA,QAAQ,EAAE,MAAM,EAAE,QAAQ,QAAQ,YAAY,WAAW,OAAAd,GAAO,oBAAoB,OAAO;AAAA,MAE3F,UAAA,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,iBAAc;AAAA,UACd,gBAAa;AAAA,UACb,WAAU;AAAA,UAET,UAAAvB;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningTop.es.js

@@ -3,7 +3,7 @@ const o = ({ children: t }) => /* @__PURE__ */ e(
   "div",
   {
     "data-test-id": "toolbar-top",
-    className: "tw-relative tw-min-h-12 tw-rounded-t tw-border-b tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap",
+    className: "tw-relative tw-rounded-t tw-border-b tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap",
     children: t
   }
 );

package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningTop.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarWrapperPositioningTop.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningTop.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningTop = ({ children }: ToolbarWrapperProps) => {\n    return (\n        <div\n            data-test-id=\"toolbar-top\"\n            className=\"tw-relative tw-min-h-12 tw-rounded-t tw-border-b tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap\"\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":["ToolbarWrapperPositioningTop","children","jsx"],"mappings":";AAIO,MAAMA,IAA+B,CAAC,EAAE,UAAAC,QAEvC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAAD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"ToolbarWrapperPositioningTop.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningTop.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningTop = ({ children }: ToolbarWrapperProps) => {\n    return (\n        <div\n            data-test-id=\"toolbar-top\"\n            className=\"tw-relative tw-rounded-t tw-border-b tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap\"\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":["ToolbarWrapperPositioningTop","children","jsx"],"mappings":";AAIO,MAAMA,IAA+B,CAAC,EAAE,UAAAC,QAEvC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAAD;AAAA,EAAA;AAAA;"}

package/dist/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.es.js

@@ -1,47 +1,51 @@
-import { jsxs as w, jsx as c } from "react/jsx-runtime";
-import { ReactEditor as f } from "slate-react";
-import { getRootProps as x, setNodes as E } from "@udecode/plate";
-import { merge as i } from "../../../../utilities/merge.es.js";
-import { MarkupElement as u } from "../MarkupElement.es.js";
-import { ELEMENT_CHECK_ITEM as C } from "./id.es.js";
-import { justifyClassNames as k } from "../helper.es.js";
-import { useRichTextEditorContext as g } from "../../context/RichTextEditorContext.es.js";
-const N = (t, e) => t[e.children[0].textStyle], S = "tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center", b = "focus:tw-outline-none tw-w-auto tw-min-w-[10px]", y = (t) => {
-  const { attributes: e, children: s, nodeProps: m, element: o, editor: n } = t, l = x(t), r = o.checked, a = o.align ?? "left", { styles: d } = g();
-  return /* @__PURE__ */ w("div", { ...e, ...l, className: i([S, k[a]]), children: [
-    /* @__PURE__ */ c("div", { contentEditable: !1, className: "tw-flex tw-items-center tw-justify-center tw-select-none", children: /* @__PURE__ */ c(
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { useId as x } from "react";
+import { ReactEditor as C } from "slate-react";
+import { getRootProps as u, setNodes as E } from "@udecode/plate";
+import { merge as m } from "../../../../utilities/merge.es.js";
+import { MarkupElement as k } from "../MarkupElement.es.js";
+import { ELEMENT_CHECK_ITEM as b } from "./id.es.js";
+import { justifyClassNames as g } from "../helper.es.js";
+import { useRichTextEditorContext as S } from "../../context/RichTextEditorContext.es.js";
+const N = (t, e) => t[e.children[0].textStyle], y = "tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center", L = "focus:tw-outline-none tw-w-auto tw-min-w-[10px]", _ = (t) => {
+  const { attributes: e, children: s, nodeProps: l, element: o, editor: c } = t, a = u(t), r = o.checked, d = o.align ?? "left", { styles: h } = S(), i = x();
+  return /* @__PURE__ */ f("div", { ...e, ...a, className: m([y, g[d]]), children: [
+    /* @__PURE__ */ n(
       "input",
       {
         "data-test-id": "checkbox-input",
         className: "tw-w-4 tw-h-4 tw-m-0",
         type: "checkbox",
         checked: !!r,
-        onChange: (h) => {
-          const p = f.findPath(n, o);
-          E(n, { checked: h.target.checked }, { at: p });
+        title: "Checklist item",
+        "aria-labelledby": i,
+        onChange: (p) => {
+          const w = C.findPath(c, o);
+          E(c, { checked: p.target.checked }, { at: w });
         },
-        ...m
+        ...l
       }
-    ) }),
-    /* @__PURE__ */ c(
+    ),
+    /* @__PURE__ */ n(
       "span",
       {
-        style: N(d, o),
-        className: i([b, r && "!tw-line-through"]),
+        style: N(h, o),
+        id: i,
+        className: m([L, r && "!tw-line-through"]),
         children: s
       }
     )
   ] });
 };
-class R extends u {
-  constructor(e = C, s = y) {
+class B extends k {
+  constructor(e = b, s = _) {
     super(e, s);
   }
 }
 export {
-  S as CHECKBOX_DIV_CLASSES,
-  b as CHECKBOX_SPAN_CLASSES,
-  R as CheckboxListElement,
-  y as CheckboxListElementNode
+  y as CHECKBOX_DIV_CLASSES,
+  L as CHECKBOX_SPAN_CLASSES,
+  B as CheckboxListElement,
+  _ as CheckboxListElementNode
 };
 //# sourceMappingURL=CheckboxListElement.es.js.map

package/dist/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxListElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties } from 'react';\nimport { ReactEditor } from 'slate-react';\nimport { PlateRenderElementProps, TElement, TTodoListItemElement, getRootProps, setNodes } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { MarkupElement } from '../MarkupElement';\nimport { ELEMENT_CHECK_ITEM } from './id';\nimport { justifyClassNames } from '../helper';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context';\n\nconst getCheckboxListStyles = (styles: Record<string, CSSProperties>, element: TElement): CSSProperties =>\n    styles[element.children[0].textStyle as string];\n\nexport const CHECKBOX_DIV_CLASSES = 'tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center';\nexport const CHECKBOX_SPAN_CLASSES = 'focus:tw-outline-none tw-w-auto tw-min-w-[10px]';\n\nexport const CheckboxListElementNode = (props: PlateRenderElementProps) => {\n    const { attributes, children, nodeProps, element, editor } = props;\n    const rootProps = getRootProps(props);\n    const checked = element.checked as boolean;\n    const align = (element.align as string) ?? 'left';\n    const { styles } = useRichTextEditorContext();\n\n    return (\n        <div {...attributes} {...rootProps} className={merge([CHECKBOX_DIV_CLASSES, justifyClassNames[align]])}>\n            <div contentEditable={false} className=\"tw-flex tw-items-center tw-justify-center tw-select-none\">\n                <input\n                    data-test-id=\"checkbox-input\"\n                    className=\"tw-w-4 tw-h-4 tw-m-0\"\n                    type=\"checkbox\"\n                    checked={!!checked}\n                    onChange={(e) => {\n                        const path = ReactEditor.findPath(editor as ReactEditor, element);\n                        setNodes<TTodoListItemElement>(editor, { checked: e.target.checked }, { at: path });\n                    }}\n                    {...nodeProps}\n                />\n            </div>\n            <span\n                style={getCheckboxListStyles(styles, element)}\n                className={merge([CHECKBOX_SPAN_CLASSES, checked && '!tw-line-through'])}\n            >\n                {children}\n            </span>\n        </div>\n    );\n};\n\nexport class CheckboxListElement extends MarkupElement {\n    constructor(id = ELEMENT_CHECK_ITEM, node = CheckboxListElementNode) {\n        super(id, node);\n    }\n}\n"],"names":["getCheckboxListStyles","styles","element","CHECKBOX_DIV_CLASSES","CHECKBOX_SPAN_CLASSES","CheckboxListElementNode","props","attributes","children","nodeProps","editor","rootProps","getRootProps","checked","align","useRichTextEditorContext","jsxs","merge","justifyClassNames","jsx","e","path","ReactEditor","setNodes","CheckboxListElement","MarkupElement","id","ELEMENT_CHECK_ITEM","node"],"mappings":";;;;;;;;AAWA,MAAMA,IAAwB,CAACC,GAAuCC,MAClED,EAAOC,EAAQ,SAAS,CAAC,EAAE,SAAmB,GAErCC,IAAuB,0DACvBC,IAAwB,mDAExBC,IAA0B,CAACC,MAAmC;AACvE,QAAM,EAAE,YAAAC,GAAY,UAAAC,GAAU,WAAAC,GAAW,SAAAP,GAAS,QAAAQ,EAAW,IAAAJ,GACvDK,IAAYC,EAAaN,CAAK,GAC9BO,IAAUX,EAAQ,SAClBY,IAASZ,EAAQ,SAAoB,QACrC,EAAE,QAAAD,MAAWc;AAEnB,SACK,gBAAAC,EAAA,OAAA,EAAK,GAAGT,GAAa,GAAGI,GAAW,WAAWM,EAAM,CAACd,GAAsBe,EAAkBJ,CAAK,CAAC,CAAC,GACjG,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAI,EAAA,iBAAiB,IAAO,WAAU,4DACnC,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAS,CAAC,CAACN;AAAA,QACX,UAAU,CAACO,MAAM;AACb,gBAAMC,IAAOC,EAAY,SAASZ,GAAuBR,CAAO;AACjC,UAAAqB,EAAAb,GAAQ,EAAE,SAASU,EAAE,OAAO,WAAW,EAAE,IAAIC,EAAA,CAAM;AAAA,QACtF;AAAA,QACC,GAAGZ;AAAA,MAAA;AAAA,IAAA,GAEZ;AAAA,IACA,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAOnB,EAAsBC,GAAQC,CAAO;AAAA,QAC5C,WAAWe,EAAM,CAACb,GAAuBS,KAAW,kBAAkB,CAAC;AAAA,QAEtE,UAAAL;AAAA,MAAA;AAAA,IACL;AAAA,EACJ,EAAA,CAAA;AAER;AAEO,MAAMgB,UAA4BC,EAAc;AAAA,EACnD,YAAYC,IAAKC,GAAoBC,IAAOvB,GAAyB;AACjE,UAAMqB,GAAIE,CAAI;AAAA,EAClB;AACJ;"}
+{"version":3,"file":"CheckboxListElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties, useId } from 'react';\nimport { ReactEditor } from 'slate-react';\nimport { PlateRenderElementProps, TElement, TTodoListItemElement, getRootProps, setNodes } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { MarkupElement } from '../MarkupElement';\nimport { ELEMENT_CHECK_ITEM } from './id';\nimport { justifyClassNames } from '../helper';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context';\n\nconst getCheckboxListStyles = (styles: Record<string, CSSProperties>, element: TElement): CSSProperties =>\n    styles[element.children[0].textStyle as string];\n\nexport const CHECKBOX_DIV_CLASSES = 'tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center';\nexport const CHECKBOX_SPAN_CLASSES = 'focus:tw-outline-none tw-w-auto tw-min-w-[10px]';\n\nexport const CheckboxListElementNode = (props: PlateRenderElementProps) => {\n    const { attributes, children, nodeProps, element, editor } = props;\n    const rootProps = getRootProps(props);\n    const checked = element.checked as boolean;\n    const align = (element.align as string) ?? 'left';\n    const { styles } = useRichTextEditorContext();\n    const id = useId();\n\n    return (\n        <div {...attributes} {...rootProps} className={merge([CHECKBOX_DIV_CLASSES, justifyClassNames[align]])}>\n            <input\n                data-test-id=\"checkbox-input\"\n                className=\"tw-w-4 tw-h-4 tw-m-0\"\n                type=\"checkbox\"\n                checked={!!checked}\n                title=\"Checklist item\"\n                aria-labelledby={id}\n                onChange={(e) => {\n                    const path = ReactEditor.findPath(editor as ReactEditor, element);\n                    setNodes<TTodoListItemElement>(editor, { checked: e.target.checked }, { at: path });\n                }}\n                {...nodeProps}\n            />\n            <span\n                style={getCheckboxListStyles(styles, element)}\n                id={id}\n                className={merge([CHECKBOX_SPAN_CLASSES, checked && '!tw-line-through'])}\n            >\n                {children}\n            </span>\n        </div>\n    );\n};\n\nexport class CheckboxListElement extends MarkupElement {\n    constructor(id = ELEMENT_CHECK_ITEM, node = CheckboxListElementNode) {\n        super(id, node);\n    }\n}\n"],"names":["getCheckboxListStyles","styles","element","CHECKBOX_DIV_CLASSES","CHECKBOX_SPAN_CLASSES","CheckboxListElementNode","props","attributes","children","nodeProps","editor","rootProps","getRootProps","checked","align","useRichTextEditorContext","id","useId","jsxs","merge","justifyClassNames","jsx","e","path","ReactEditor","setNodes","CheckboxListElement","MarkupElement","ELEMENT_CHECK_ITEM","node"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAwB,CAACC,GAAuCC,MAClED,EAAOC,EAAQ,SAAS,CAAC,EAAE,SAAmB,GAErCC,IAAuB,0DACvBC,IAAwB,mDAExBC,IAA0B,CAACC,MAAmC;AACvE,QAAM,EAAE,YAAAC,GAAY,UAAAC,GAAU,WAAAC,GAAW,SAAAP,GAAS,QAAAQ,EAAW,IAAAJ,GACvDK,IAAYC,EAAaN,CAAK,GAC9BO,IAAUX,EAAQ,SAClBY,IAASZ,EAAQ,SAAoB,QACrC,EAAE,QAAAD,MAAWc,KACbC,IAAKC;AAEX,SACK,gBAAAC,EAAA,OAAA,EAAK,GAAGX,GAAa,GAAGI,GAAW,WAAWQ,EAAM,CAAChB,GAAsBiB,EAAkBN,CAAK,CAAC,CAAC,GACjG,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAS,CAAC,CAACR;AAAA,QACX,OAAM;AAAA,QACN,mBAAiBG;AAAA,QACjB,UAAU,CAACM,MAAM;AACb,gBAAMC,IAAOC,EAAY,SAASd,GAAuBR,CAAO;AACjC,UAAAuB,EAAAf,GAAQ,EAAE,SAASY,EAAE,OAAO,WAAW,EAAE,IAAIC,EAAA,CAAM;AAAA,QACtF;AAAA,QACC,GAAGd;AAAA,MAAA;AAAA,IACR;AAAA,IACA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAOrB,EAAsBC,GAAQC,CAAO;AAAA,QAC5C,IAAAc;AAAA,QACA,WAAWG,EAAM,CAACf,GAAuBS,KAAW,kBAAkB,CAAC;AAAA,QAEtE,UAAAL;AAAA,MAAA;AAAA,IACL;AAAA,EACJ,EAAA,CAAA;AAER;AAEO,MAAMkB,UAA4BC,EAAc;AAAA,EACnD,YAAYX,IAAKY,GAAoBC,IAAOxB,GAAyB;AACjE,UAAMW,GAAIa,CAAI;AAAA,EAClB;AACJ;"}

package/dist/components/RichTextEditor/RichTextEditor.es.js

@@ -7,58 +7,59 @@ import { defaultPlugins as K } from "./Plugins/index.es.js";
 import { PaddingSizes as z } from "./types.es.js";
 import { BlurObserver as D } from "./BlurObserver.es.js";
 import { useEditorState as M } from "./hooks/useEditorState.es.js";
-import { KEY_ELEMENT_BREAK_AFTER_COLUMN as j, GAP_DEFAULT as v } from "./Plugins/ColumnBreakPlugin/createColumnBreakPlugin.es.js";
+import { KEY_ELEMENT_BREAK_AFTER_COLUMN as b, GAP_DEFAULT as j } from "./Plugins/ColumnBreakPlugin/createColumnBreakPlugin.es.js";
 import { Position as f } from "./EditorPositioningWrapper/types.es.js";
-import { forceToFocusNextElement as B } from "./helpers/forceToFocusElement.es.js";
-import { parseRawValue as U } from "./utils/parseRawValue.es.js";
-const Y = {
+import { forceToFocusNextElement as v } from "./helpers/forceToFocusElement.es.js";
+import { parseRawValue as B } from "./utils/parseRawValue.es.js";
+const U = {
   position: "relative",
   height: "0"
-}, b = ({
+}, Y = ({
   id: u,
-  value: s,
+  value: l,
   placeholder: E = "",
   readonly: y = !1,
   onTextChange: T,
-  onBlur: l,
+  onBlur: s,
   padding: h = z.None,
   position: m = f.FLOATING,
   plugins: n = K,
   updateValueOnChange: N = !1,
-  onValueChanged: L,
-  border: O = !0,
-  toolbarWidth: R,
-  hideExternalFloatingModals: x
+  onValueChanged: R,
+  border: x = !0,
+  toolbarWidth: L,
+  hideExternalFloatingModals: O
 }) => {
   var c, d;
   const t = I(u), { localValue: F, onChange: P, memoizedValue: S, config: r } = M({
     editorId: t,
-    initialValue: s,
+    initialValue: l,
     onTextChange: T,
     plugins: n,
-    onValueChanged: L
-  }), e = n.plugins.find((o) => o.key === j), V = ((c = e == null ? void 0 : e.options) == null ? void 0 : c.columns) ?? 1, _ = ((d = e == null ? void 0 : e.options) == null ? void 0 : d.gap) ?? v, a = {
+    onValueChanged: R
+  }), e = n.plugins.find((o) => o.key === b), V = ((c = e == null ? void 0 : e.options) == null ? void 0 : c.columns) ?? 1, _ = ((d = e == null ? void 0 : e.options) == null ? void 0 : d.gap) ?? j, a = {
     placeholder: E,
     renderPlaceholder: ({ children: o, attributes: p }) => {
       const g = {
         ...p,
         style: {
           ...p.style,
-          ...Y
+          ...U
         }
       };
       return /* @__PURE__ */ i("span", { ...g, children: o });
     },
     readOnly: y,
-    onBlur: () => l && l(JSON.stringify(F.current)),
+    onBlur: () => s && s(JSON.stringify(F.current)),
     className: `${h}`,
+    "aria-label": "Rich Text Editor",
     style: {
       columns: V,
       columnGap: _,
       outline: "none"
     },
     onKeyDown: (o) => {
-      o.code === "Tab" && B(o, !o.shiftKey);
+      o.code === "Tab" && v(o, !o.shiftKey);
     },
     scrollSelectionIntoView: () => {
     }
@@ -69,7 +70,7 @@ const Y = {
       value: {
         styles: r.styles(),
         position: m,
-        border: O,
+        border: x,
         editorId: t
       },
       children: /* @__PURE__ */ A(
@@ -81,18 +82,18 @@ const Y = {
           plugins: r.create(),
           initialValue: S,
           children: [
-            !a.readOnly && r.toolbar(R),
+            !a.readOnly && r.toolbar(L),
             r.inline(),
-            N && /* @__PURE__ */ i(C, { value: U({ editorId: t, raw: s, plugins: n }) }),
-            m === f.FLOATING && /* @__PURE__ */ i(D, { hideExternalFloatingModals: x })
+            N && /* @__PURE__ */ i(C, { value: B({ editorId: t, raw: l, plugins: n }) }),
+            m === f.FLOATING && /* @__PURE__ */ i(D, { hideExternalFloatingModals: O })
           ]
         }
       )
     }
   );
 };
-b.displayName = "FondueRichTextEditor";
+Y.displayName = "FondueRichTextEditor";
 export {
-  b as RichTextEditor
+  Y as RichTextEditor
 };
 //# sourceMappingURL=RichTextEditor.es.js.map

package/dist/components/RichTextEditor/RichTextEditor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Plate, TEditableProps } from '@udecode/plate';\nimport { RenderPlaceholderProps } from 'slate-react';\nimport { ContentReplacement } from './ContentReplacement';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { Position } from './EditorPositioningWrapper';\nimport { forceToFocusNextElement } from './helpers';\nimport { useEditorState } from './hooks';\nimport { GAP_DEFAULT, KEY_ELEMENT_BREAK_AFTER_COLUMN, PluginComposer, defaultPlugins } from './Plugins';\nimport { PaddingSizes, TreeOfNodes } from './types';\nimport { parseRawValue } from './utils';\nimport { BlurObserver } from '@components/RichTextEditor/BlurObserver';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n    position: 'relative',\n    height: '0',\n};\n\nexport type RichTextEditorProps = {\n    id?: string;\n    placeholder?: string;\n    value?: string;\n    onTextChange?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    readonly?: boolean;\n    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n    onValueChanged?: (value: TreeOfNodes | null) => void;\n    border?: boolean;\n    updateValueOnChange?: boolean; // Only set to true when you are sure that performance isn't an issue\n    toolbarWidth?: number;\n    hideExternalFloatingModals?: (editorId: string) => void;\n};\n\nexport const RichTextEditor = ({\n    id,\n    value,\n    placeholder = '',\n    readonly = false,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins = defaultPlugins,\n    updateValueOnChange = false,\n    onValueChanged,\n    border = true,\n    toolbarWidth,\n    hideExternalFloatingModals,\n}: RichTextEditorProps) => {\n    const editorId = useMemoizedId(id);\n    const { localValue, onChange, memoizedValue, config } = useEditorState({\n        editorId,\n        initialValue: value,\n        onTextChange,\n        plugins,\n        onValueChanged,\n    });\n\n    const breakAfterPlugin = plugins.plugins.find((plugin) => plugin.key === KEY_ELEMENT_BREAK_AFTER_COLUMN);\n    const columns = breakAfterPlugin?.options?.columns ?? 1;\n    const columnGap = breakAfterPlugin?.options?.gap ?? GAP_DEFAULT;\n\n    const editableProps: TEditableProps = {\n        placeholder,\n        renderPlaceholder: ({ children, attributes }) => {\n            const mergedAttributes = {\n                ...attributes,\n                style: {\n                    ...attributes.style,\n                    ...PLACEHOLDER_STYLES,\n                },\n            };\n            return <span {...mergedAttributes}>{children}</span>;\n        },\n        readOnly: readonly,\n        onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n        className: `${padding}`,\n        style: {\n            columns,\n            columnGap,\n            outline: 'none',\n        },\n        onKeyDown: (event) => {\n            if (event.code === 'Tab') {\n                forceToFocusNextElement(event, !event.shiftKey);\n            }\n        },\n        scrollSelectionIntoView: () => {\n            // We pass in an empty function here because we don't want the default scroll behaviour\n        },\n    };\n\n    return (\n        <RichTextEditorProvider\n            value={{\n                styles: config.styles(),\n                position,\n                border,\n                editorId,\n            }}\n        >\n            <Plate\n                id={editorId}\n                onChange={onChange}\n                editableProps={editableProps}\n                plugins={config.create()}\n                initialValue={memoizedValue}\n            >\n                {!editableProps.readOnly && config.toolbar(toolbarWidth)}\n                {config.inline()}\n                {updateValueOnChange && <ContentReplacement value={parseRawValue({ editorId, raw: value, plugins })} />}\n                {position === Position.FLOATING && (\n                    <BlurObserver hideExternalFloatingModals={hideExternalFloatingModals} />\n                )}\n            </Plate>\n        </RichTextEditorProvider>\n    );\n};\nRichTextEditor.displayName = 'FondueRichTextEditor';\n"],"names":["PLACEHOLDER_STYLES","RichTextEditor","id","value","placeholder","readonly","onTextChange","onBlur","padding","PaddingSizes","position","Position","plugins","defaultPlugins","updateValueOnChange","onValueChanged","border","toolbarWidth","hideExternalFloatingModals","editorId","useMemoizedId","localValue","onChange","memoizedValue","config","useEditorState","breakAfterPlugin","plugin","KEY_ELEMENT_BREAK_AFTER_COLUMN","columns","_a","columnGap","_b","GAP_DEFAULT","editableProps","children","attributes","mergedAttributes","jsx","event","forceToFocusNextElement","RichTextEditorProvider","jsxs","Plate","ContentReplacement","parseRawValue","BlurObserver"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,IAAoE;AAAA,EACtE,UAAU;AAAA,EACV,QAAQ;AACZ,GAmBaC,IAAiB,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAUC,EAAa;AAAA,EACvB,UAAAC,IAAWC,EAAS;AAAA,EACpB,SAAAC,IAAUC;AAAA,EACV,qBAAAC,IAAsB;AAAA,EACtB,gBAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,4BAAAC;AACJ,MAA2B;;AACjB,QAAAC,IAAWC,EAAclB,CAAE,GAC3B,EAAE,YAAAmB,GAAY,UAAAC,GAAU,eAAAC,GAAe,QAAAC,EAAA,IAAWC,EAAe;AAAA,IACnE,UAAAN;AAAA,IACA,cAAchB;AAAA,IACd,cAAAG;AAAA,IACA,SAAAM;AAAA,IACA,gBAAAG;AAAA,EAAA,CACH,GAEKW,IAAmBd,EAAQ,QAAQ,KAAK,CAACe,MAAWA,EAAO,QAAQC,CAA8B,GACjGC,MAAUC,IAAAJ,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAI,EAA2B,YAAW,GAChDC,MAAYC,IAAAN,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAM,EAA2B,QAAOC,GAE9CC,IAAgC;AAAA,IAClC,aAAA9B;AAAA,IACA,mBAAmB,CAAC,EAAE,UAAA+B,GAAU,YAAAC,QAAiB;AAC7C,YAAMC,IAAmB;AAAA,QACrB,GAAGD;AAAA,QACH,OAAO;AAAA,UACH,GAAGA,EAAW;AAAA,UACd,GAAGpC;AAAA,QACP;AAAA,MAAA;AAEJ,aAAQ,gBAAAsC,EAAA,QAAA,EAAM,GAAGD,GAAmB,UAAAF,EAAS,CAAA;AAAA,IACjD;AAAA,IACA,UAAU9B;AAAA,IACV,QAAQ,MAAME,KAAUA,EAAO,KAAK,UAAUc,EAAW,OAAO,CAAC;AAAA,IACjE,WAAW,GAAGb,CAAO;AAAA,IACrB,OAAO;AAAA,MACH,SAAAqB;AAAA,MACA,WAAAE;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IACA,WAAW,CAACQ,MAAU;AACd,MAAAA,EAAM,SAAS,SACSC,EAAAD,GAAO,CAACA,EAAM,QAAQ;AAAA,IAEtD;AAAA,IACA,yBAAyB,MAAM;AAAA,IAE/B;AAAA,EAAA;AAIA,SAAA,gBAAAD;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,QAAQjB,EAAO,OAAO;AAAA,QACtB,UAAAd;AAAA,QACA,QAAAM;AAAA,QACA,UAAAG;AAAA,MACJ;AAAA,MAEA,UAAA,gBAAAuB;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,IAAIxB;AAAA,UACJ,UAAAG;AAAA,UACA,eAAAY;AAAA,UACA,SAASV,EAAO,OAAO;AAAA,UACvB,cAAcD;AAAA,UAEb,UAAA;AAAA,YAAA,CAACW,EAAc,YAAYV,EAAO,QAAQP,CAAY;AAAA,YACtDO,EAAO,OAAO;AAAA,YACdV,KAAwB,gBAAAwB,EAAAM,GAAA,EAAmB,OAAOC,EAAc,EAAE,UAAA1B,GAAU,KAAKhB,GAAO,SAAAS,EAAQ,CAAC,EAAG,CAAA;AAAA,YACpGF,MAAaC,EAAS,YACnB,gBAAA2B,EAACQ,KAAa,4BAAA5B,GAAwD;AAAA,UAAA;AAAA,QAAA;AAAA,MAE9E;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAjB,EAAe,cAAc;"}
+{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Plate, TEditableProps } from '@udecode/plate';\nimport { RenderPlaceholderProps } from 'slate-react';\nimport { ContentReplacement } from './ContentReplacement';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { Position } from './EditorPositioningWrapper';\nimport { forceToFocusNextElement } from './helpers';\nimport { useEditorState } from './hooks';\nimport { GAP_DEFAULT, KEY_ELEMENT_BREAK_AFTER_COLUMN, PluginComposer, defaultPlugins } from './Plugins';\nimport { PaddingSizes, TreeOfNodes } from './types';\nimport { parseRawValue } from './utils';\nimport { BlurObserver } from '@components/RichTextEditor/BlurObserver';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n    position: 'relative',\n    height: '0',\n};\n\nexport type RichTextEditorProps = {\n    id?: string;\n    placeholder?: string;\n    value?: string;\n    onTextChange?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    readonly?: boolean;\n    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n    onValueChanged?: (value: TreeOfNodes | null) => void;\n    border?: boolean;\n    updateValueOnChange?: boolean; // Only set to true when you are sure that performance isn't an issue\n    toolbarWidth?: number;\n    hideExternalFloatingModals?: (editorId: string) => void;\n};\n\nexport const RichTextEditor = ({\n    id,\n    value,\n    placeholder = '',\n    readonly = false,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins = defaultPlugins,\n    updateValueOnChange = false,\n    onValueChanged,\n    border = true,\n    toolbarWidth,\n    hideExternalFloatingModals,\n}: RichTextEditorProps) => {\n    const editorId = useMemoizedId(id);\n    const { localValue, onChange, memoizedValue, config } = useEditorState({\n        editorId,\n        initialValue: value,\n        onTextChange,\n        plugins,\n        onValueChanged,\n    });\n\n    const breakAfterPlugin = plugins.plugins.find((plugin) => plugin.key === KEY_ELEMENT_BREAK_AFTER_COLUMN);\n    const columns = breakAfterPlugin?.options?.columns ?? 1;\n    const columnGap = breakAfterPlugin?.options?.gap ?? GAP_DEFAULT;\n\n    const editableProps: TEditableProps = {\n        placeholder,\n        renderPlaceholder: ({ children, attributes }) => {\n            const mergedAttributes = {\n                ...attributes,\n                style: {\n                    ...attributes.style,\n                    ...PLACEHOLDER_STYLES,\n                },\n            };\n            return <span {...mergedAttributes}>{children}</span>;\n        },\n        readOnly: readonly,\n        onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n        className: `${padding}`,\n        'aria-label': 'Rich Text Editor',\n        style: {\n            columns,\n            columnGap,\n            outline: 'none',\n        },\n        onKeyDown: (event) => {\n            if (event.code === 'Tab') {\n                forceToFocusNextElement(event, !event.shiftKey);\n            }\n        },\n        scrollSelectionIntoView: () => {\n            // We pass in an empty function here because we don't want the default scroll behaviour\n        },\n    };\n\n    return (\n        <RichTextEditorProvider\n            value={{\n                styles: config.styles(),\n                position,\n                border,\n                editorId,\n            }}\n        >\n            <Plate\n                id={editorId}\n                onChange={onChange}\n                editableProps={editableProps}\n                plugins={config.create()}\n                initialValue={memoizedValue}\n            >\n                {!editableProps.readOnly && config.toolbar(toolbarWidth)}\n                {config.inline()}\n                {updateValueOnChange && <ContentReplacement value={parseRawValue({ editorId, raw: value, plugins })} />}\n                {position === Position.FLOATING && (\n                    <BlurObserver hideExternalFloatingModals={hideExternalFloatingModals} />\n                )}\n            </Plate>\n        </RichTextEditorProvider>\n    );\n};\nRichTextEditor.displayName = 'FondueRichTextEditor';\n"],"names":["PLACEHOLDER_STYLES","RichTextEditor","id","value","placeholder","readonly","onTextChange","onBlur","padding","PaddingSizes","position","Position","plugins","defaultPlugins","updateValueOnChange","onValueChanged","border","toolbarWidth","hideExternalFloatingModals","editorId","useMemoizedId","localValue","onChange","memoizedValue","config","useEditorState","breakAfterPlugin","plugin","KEY_ELEMENT_BREAK_AFTER_COLUMN","columns","_a","columnGap","_b","GAP_DEFAULT","editableProps","children","attributes","mergedAttributes","jsx","event","forceToFocusNextElement","RichTextEditorProvider","jsxs","Plate","ContentReplacement","parseRawValue","BlurObserver"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,IAAoE;AAAA,EACtE,UAAU;AAAA,EACV,QAAQ;AACZ,GAmBaC,IAAiB,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAUC,EAAa;AAAA,EACvB,UAAAC,IAAWC,EAAS;AAAA,EACpB,SAAAC,IAAUC;AAAA,EACV,qBAAAC,IAAsB;AAAA,EACtB,gBAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,4BAAAC;AACJ,MAA2B;;AACjB,QAAAC,IAAWC,EAAclB,CAAE,GAC3B,EAAE,YAAAmB,GAAY,UAAAC,GAAU,eAAAC,GAAe,QAAAC,EAAA,IAAWC,EAAe;AAAA,IACnE,UAAAN;AAAA,IACA,cAAchB;AAAA,IACd,cAAAG;AAAA,IACA,SAAAM;AAAA,IACA,gBAAAG;AAAA,EAAA,CACH,GAEKW,IAAmBd,EAAQ,QAAQ,KAAK,CAACe,MAAWA,EAAO,QAAQC,CAA8B,GACjGC,MAAUC,IAAAJ,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAI,EAA2B,YAAW,GAChDC,MAAYC,IAAAN,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAM,EAA2B,QAAOC,GAE9CC,IAAgC;AAAA,IAClC,aAAA9B;AAAA,IACA,mBAAmB,CAAC,EAAE,UAAA+B,GAAU,YAAAC,QAAiB;AAC7C,YAAMC,IAAmB;AAAA,QACrB,GAAGD;AAAA,QACH,OAAO;AAAA,UACH,GAAGA,EAAW;AAAA,UACd,GAAGpC;AAAA,QACP;AAAA,MAAA;AAEJ,aAAQ,gBAAAsC,EAAA,QAAA,EAAM,GAAGD,GAAmB,UAAAF,EAAS,CAAA;AAAA,IACjD;AAAA,IACA,UAAU9B;AAAA,IACV,QAAQ,MAAME,KAAUA,EAAO,KAAK,UAAUc,EAAW,OAAO,CAAC;AAAA,IACjE,WAAW,GAAGb,CAAO;AAAA,IACrB,cAAc;AAAA,IACd,OAAO;AAAA,MACH,SAAAqB;AAAA,MACA,WAAAE;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IACA,WAAW,CAACQ,MAAU;AACd,MAAAA,EAAM,SAAS,SACSC,EAAAD,GAAO,CAACA,EAAM,QAAQ;AAAA,IAEtD;AAAA,IACA,yBAAyB,MAAM;AAAA,IAE/B;AAAA,EAAA;AAIA,SAAA,gBAAAD;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,QAAQjB,EAAO,OAAO;AAAA,QACtB,UAAAd;AAAA,QACA,QAAAM;AAAA,QACA,UAAAG;AAAA,MACJ;AAAA,MAEA,UAAA,gBAAAuB;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,IAAIxB;AAAA,UACJ,UAAAG;AAAA,UACA,eAAAY;AAAA,UACA,SAASV,EAAO,OAAO;AAAA,UACvB,cAAcD;AAAA,UAEb,UAAA;AAAA,YAAA,CAACW,EAAc,YAAYV,EAAO,QAAQP,CAAY;AAAA,YACtDO,EAAO,OAAO;AAAA,YACdV,KAAwB,gBAAAwB,EAAAM,GAAA,EAAmB,OAAOC,EAAc,EAAE,UAAA1B,GAAU,KAAKhB,GAAO,SAAAS,EAAQ,CAAC,EAAG,CAAA;AAAA,YACpGF,MAAaC,EAAS,YACnB,gBAAA2B,EAACQ,KAAa,4BAAA5B,GAAwD;AAAA,UAAA;AAAA,QAAA;AAAA,MAE9E;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAjB,EAAe,cAAc;"}

package/dist/components/TextInput/TextInput.es.js

@@ -61,13 +61,13 @@ const mt = ({ extraAction: r, disabled: l }, b) => {
   onFocus: E,
   size: $,
   spellcheck: V,
-  readonly: v,
+  readonly: I,
   focusOnMount: C,
   selectable: K = !1,
-  extraActions: F,
+  extraActions: v,
   ...U
 }) => {
-  const { isFocusVisible: Y, focusProps: n } = d(), { isFocusVisible: j, focusProps: _ } = d(), { isFocusVisible: B, focusProps: q } = d(), { isFocusVisible: P, focusProps: G } = d(), { copy: H, status: I } = Z(), f = rt(null), [x, L] = ot(
+  const { isFocusVisible: Y, focusProps: n } = d({ isTextInput: !0 }), { isFocusVisible: j, focusProps: _ } = d(), { isFocusVisible: B, focusProps: q } = d(), { isFocusVisible: P, focusProps: G } = d(), { copy: H, status: F } = Z(), f = rt(null), [x, T] = ot(
     typeof p == "boolean" ? p : l === "password"
     /* Password */
   );
@@ -77,7 +77,7 @@ const mt = ({ extraAction: r, disabled: l }, b) => {
       C && ((t = f.current) == null || t.focus());
     }, 0);
   }, [C]), O(() => {
-    typeof p == "boolean" && L(p);
+    typeof p == "boolean" && T(p);
   }, [p]);
   const J = (t) => {
     t.key === "Enter" && N && N(t);
@@ -89,7 +89,7 @@ const mt = ({ extraAction: r, disabled: l }, b) => {
       className: i([
         "tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-body-small tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent",
         M ? "tw-border-dashed" : "tw-border-solid",
-        o || v ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : i([
+        o || I ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : i([
           "focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong hover:tw-border-line-x-strong",
           tt[c],
           Y && !j && !B && !P && m
@@ -116,7 +116,7 @@ const mt = ({ extraAction: r, disabled: l }, b) => {
             ref: f,
             className: i([
               "tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows",
-              o || v ? "tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
+              o || I ? "tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
             ]),
             onClick: () => {
               var t;
@@ -132,7 +132,7 @@ const mt = ({ extraAction: r, disabled: l }, b) => {
             value: g,
             type: Q(),
             required: z,
-            readOnly: v,
+            readOnly: I,
             disabled: o,
             onFocus: (t) => {
               var s;
@@ -144,16 +144,16 @@ const mt = ({ extraAction: r, disabled: l }, b) => {
             ...X
           }
         ),
-        F && F.length > 0 && F.map((t, s) => {
-          const T = `text-input-extra-action-${s}`;
+        v && v.length > 0 && v.map((t, s) => {
+          const L = `text-input-extra-action-${s}`;
           return t.tooltip ? /* @__PURE__ */ e(
             st,
             {
               ...t.tooltip,
               triggerElement: /* @__PURE__ */ e(R, { extraAction: t, disabled: o })
             },
-            T
-          ) : /* @__PURE__ */ e(R, { extraAction: t, disabled: o }, T);
+            L
+          ) : /* @__PURE__ */ e(R, { extraAction: t, disabled: o }, L);
         }),
         `${g}`.length > 0 && k && /* @__PURE__ */ e(
           "button",
@@ -184,7 +184,7 @@ const mt = ({ extraAction: r, disabled: l }, b) => {
               o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
               B && m
             ]),
-            onClick: () => L(!x),
+            onClick: () => T(!x),
             "data-test-id": "visibility-icon",
             title: "Toggle text visibility",
             type: "button",
@@ -222,9 +222,9 @@ const mt = ({ extraAction: r, disabled: l }, b) => {
             type: "button",
             ...G,
             children: [
-              I === "error" && /* @__PURE__ */ e("span", { className: "tw-text-box-negative-strong", children: /* @__PURE__ */ e(at, {}) }),
-              I === "idle" && /* @__PURE__ */ e(wt, {}),
-              I === "success" && /* @__PURE__ */ e("span", { className: "tw-text-box-positive-strong", children: /* @__PURE__ */ e(ut, {}) })
+              F === "error" && /* @__PURE__ */ e("span", { className: "tw-text-box-negative-strong", children: /* @__PURE__ */ e(at, {}) }),
+              F === "idle" && /* @__PURE__ */ e(wt, {}),
+              F === "success" && /* @__PURE__ */ e("span", { className: "tw-text-box-positive-strong", children: /* @__PURE__ */ e(ut, {}) })
             ]
           }
         )