@frontify/fondue 12.0.0-beta.136 → 12.0.0-beta.138

package/dist/components/FieldsetHeader/FieldsetHeader.es.js

@@ -6,7 +6,7 @@ import { IconSize as d } from "../../foundation/Icon/IconSize.es.js";
 import D from "../../foundation/Icon/Generated/IconMinus.es.js";
 import k from "../../foundation/Icon/Generated/IconPlus.es.js";
 import A from "../../foundation/Icon/Generated/IconCaretDown.es.js";
-const g = "accordion-icon-container", M = "addremove-icon-container";
+const M = "accordion-icon-container", g = "addremove-icon-container";
 var v = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Medium = "Medium", t.Large = "Large", t))(v || {});
 const l = {
   Small: {
@@ -22,7 +22,7 @@ const l = {
   Large: {
     icon: d.Size20,
     text: "tw-text-l",
-    switch: w.Large
+    switch: w.Medium
   }
 };
 var O = /* @__PURE__ */ ((t) => (t.Default = "Default", t.Switch = "Switch", t.Accordion = "Accordion", t.AddRemove = "AddRemove", t))(O || {});
@@ -38,7 +38,7 @@ const R = (t, i, a, n, e) => {
       return /* @__PURE__ */ r.createElement("div", { "data-test-id": "fieldset-icon-wrapper" }, /* @__PURE__ */ r.createElement(
         "div",
         {
-          "data-test-id": g,
+          "data-test-id": M,
           className: m([
             "tw-transition-transform",
             n && "tw-rotate-180 tw-duration-300",
@@ -53,7 +53,7 @@ const R = (t, i, a, n, e) => {
       return /* @__PURE__ */ r.createElement("div", { "data-test-id": "fieldset-icon-wrapper" }, /* @__PURE__ */ r.createElement(
         "div",
         {
-          "data-test-id": M,
+          "data-test-id": g,
           className: m([
             n && !e && "tw-text-black",
             !n && !e && "tw-text-black-80",
@@ -114,8 +114,8 @@ const R = (t, i, a, n, e) => {
 };
 _.displayName = "FondueFieldsetHeader";
 export {
-  g as ACCORDION_ICON_CONTAINER_ID,
-  M as ADDREMOVE_ICON_CONTAINER_ID,
+  M as ACCORDION_ICON_CONTAINER_ID,
+  g as ADDREMOVE_ICON_CONTAINER_ID,
   _ as FieldsetHeader,
   v as FieldsetHeaderSize,
   O as FieldsetHeaderType,

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

@@ -1 +1 @@
-{"version":3,"file":"FieldsetHeader.es.js","sources":["../../../src/components/FieldsetHeader/FieldsetHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Switch, SwitchSize } from '@components/Switch/Switch';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\nimport { IconCaretDown, IconMinus, IconPlus } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconProps } from '@foundation/Icon';\n\nexport const ACCORDION_ICON_CONTAINER_ID = 'accordion-icon-container';\n\nexport const ADDREMOVE_ICON_CONTAINER_ID = 'addremove-icon-container';\n\nexport enum FieldsetHeaderSize {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nconst sizeMap: Record<FieldsetHeaderSize, { icon: IconSize; text: string; switch: SwitchSize }> = {\n    [FieldsetHeaderSize.Small]: {\n        icon: IconSize.Size12,\n        text: 'tw-text-s',\n        switch: SwitchSize.Small,\n    },\n    [FieldsetHeaderSize.Medium]: {\n        icon: IconSize.Size16,\n        text: 'tw-text-m',\n        switch: SwitchSize.Medium,\n    },\n    [FieldsetHeaderSize.Large]: {\n        icon: IconSize.Size20,\n        text: 'tw-text-l',\n        switch: SwitchSize.Large,\n    },\n};\n\nexport enum FieldsetHeaderType {\n    Default = 'Default',\n    Switch = 'Switch',\n    Accordion = 'Accordion',\n    AddRemove = 'AddRemove',\n}\n\nexport type FieldsetHeaderProps = {\n    size?: FieldsetHeaderSize;\n    active?: boolean;\n    decorator?: ReactNode;\n    type?: FieldsetHeaderType;\n    disabled?: boolean;\n    bold?: boolean;\n    children: string;\n    onClick?: () => void;\n    as?: keyof JSX.IntrinsicElements;\n    tabIndex?: number;\n};\n\nexport const renderFieldsetHeaderIconType = (\n    type: FieldsetHeaderType,\n    id: string,\n    size: FieldsetHeaderSize,\n    active: boolean,\n    disabled: boolean,\n) => {\n    const props = {\n        'aria-labelledby': id,\n        size: sizeMap[size].icon,\n    };\n\n    switch (type) {\n        case FieldsetHeaderType.Switch:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <Switch {...props} size={sizeMap[size].switch} on={active} disabled={disabled} />\n                </div>\n            );\n        case FieldsetHeaderType.Accordion:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <div\n                        data-test-id={ACCORDION_ICON_CONTAINER_ID}\n                        className={merge([\n                            'tw-transition-transform',\n                            active && 'tw-rotate-180 tw-duration-300',\n                            !disabled && active && 'tw-text-black',\n                            !disabled && !active && 'tw-text-black-80',\n                            disabled && 'tw-text-black-40',\n                        ])}\n                    >\n                        <IconCaretDown {...props} />\n                    </div>\n                </div>\n            );\n        case FieldsetHeaderType.AddRemove:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <div\n                        data-test-id={ADDREMOVE_ICON_CONTAINER_ID}\n                        className={merge([\n                            active && !disabled && 'tw-text-black',\n                            !active && !disabled && 'tw-text-black-80',\n                            disabled && 'tw-text-black-40',\n                        ])}\n                    >\n                        {active ? <IconMinus {...props} /> : <IconPlus {...props} />}\n                    </div>\n                </div>\n            );\n    }\n\n    return null;\n};\n\nexport const FieldsetHeader: FC<FieldsetHeaderProps> = ({\n    size = FieldsetHeaderSize.Large,\n    active = true,\n    decorator,\n    type = FieldsetHeaderType.Default,\n    disabled = false,\n    bold = true,\n    children,\n    onClick,\n    as: Heading = 'label',\n    tabIndex = -1,\n}) => {\n    const id = useMemoizedId();\n    const clickOnNotDisabled = () => !disabled && onClick && onClick();\n\n    let headingFontWeightClass = 'tw-font-normal';\n    if (bold) {\n        headingFontWeightClass = 'tw-font-bold';\n    } else if (size === FieldsetHeaderSize.Medium) {\n        headingFontWeightClass = 'tw-font-medium';\n    }\n\n    return (\n        <header\n            data-test-id=\"fieldset-header\"\n            role={onClick ? 'button' : undefined}\n            onClick={clickOnNotDisabled}\n            onKeyPress={clickOnNotDisabled}\n            className={merge([\n                'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n                disabled ? 'tw-text-black-40' : 'dark:tw-text-white',\n                !disabled && active ? 'tw-text-black' : 'tw-text-black-80',\n                !disabled && onClick ? 'hover:tw-cursor-pointer' : 'tw-pointer-events-none',\n            ])}\n            tabIndex={tabIndex}\n        >\n            {isValidElement(decorator) && (\n                <span className=\"tw-shrink-0\">\n                    {cloneElement(decorator as ReactElement<IconProps>, {\n                        size: sizeMap[size].icon,\n                    })}\n                </span>\n            )}\n            <Heading\n                id={id}\n                className={merge([\n                    'tw-text-left',\n                    sizeMap[size].text,\n                    headingFontWeightClass,\n                    onClick && 'hover:tw-cursor-pointer',\n                ])}\n            >\n                {children}\n            </Heading>\n            {type !== FieldsetHeaderType.Default && (\n                <span data-test-id=\"fieldset-icon-container\" className=\"tw-ml-auto tw-shrink-0\">\n                    {renderFieldsetHeaderIconType(type, id, size, active, disabled)}\n                </span>\n            )}\n        </header>\n    );\n};\nFieldsetHeader.displayName = 'FondueFieldsetHeader';\n"],"names":["ACCORDION_ICON_CONTAINER_ID","ADDREMOVE_ICON_CONTAINER_ID","FieldsetHeaderSize","sizeMap","IconSize","SwitchSize","FieldsetHeaderType","renderFieldsetHeaderIconType","type","id","size","active","disabled","props","React","Switch","merge","IconCaretDown","IconMinus","IconPlus","FieldsetHeader","decorator","bold","children","onClick","Heading","tabIndex","useMemoizedId","clickOnNotDisabled","headingFontWeightClass","isValidElement","cloneElement"],"mappings":"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"}
+{"version":3,"file":"FieldsetHeader.es.js","sources":["../../../src/components/FieldsetHeader/FieldsetHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Switch, SwitchSize } from '@components/Switch/Switch';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\nimport { IconCaretDown, IconMinus, IconPlus } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconProps } from '@foundation/Icon';\n\nexport const ACCORDION_ICON_CONTAINER_ID = 'accordion-icon-container';\n\nexport const ADDREMOVE_ICON_CONTAINER_ID = 'addremove-icon-container';\n\nexport enum FieldsetHeaderSize {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nconst sizeMap: Record<FieldsetHeaderSize, { icon: IconSize; text: string; switch: SwitchSize }> = {\n    [FieldsetHeaderSize.Small]: {\n        icon: IconSize.Size12,\n        text: 'tw-text-s',\n        switch: SwitchSize.Small,\n    },\n    [FieldsetHeaderSize.Medium]: {\n        icon: IconSize.Size16,\n        text: 'tw-text-m',\n        switch: SwitchSize.Medium,\n    },\n    [FieldsetHeaderSize.Large]: {\n        icon: IconSize.Size20,\n        text: 'tw-text-l',\n        switch: SwitchSize.Medium,\n    },\n};\n\nexport enum FieldsetHeaderType {\n    Default = 'Default',\n    Switch = 'Switch',\n    Accordion = 'Accordion',\n    AddRemove = 'AddRemove',\n}\n\nexport type FieldsetHeaderProps = {\n    size?: FieldsetHeaderSize;\n    active?: boolean;\n    decorator?: ReactNode;\n    type?: FieldsetHeaderType;\n    disabled?: boolean;\n    bold?: boolean;\n    children: string;\n    onClick?: () => void;\n    as?: keyof JSX.IntrinsicElements;\n    tabIndex?: number;\n};\n\nexport const renderFieldsetHeaderIconType = (\n    type: FieldsetHeaderType,\n    id: string,\n    size: FieldsetHeaderSize,\n    active: boolean,\n    disabled: boolean,\n) => {\n    const props = {\n        'aria-labelledby': id,\n        size: sizeMap[size].icon,\n    };\n\n    switch (type) {\n        case FieldsetHeaderType.Switch:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <Switch {...props} size={sizeMap[size].switch} on={active} disabled={disabled} />\n                </div>\n            );\n        case FieldsetHeaderType.Accordion:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <div\n                        data-test-id={ACCORDION_ICON_CONTAINER_ID}\n                        className={merge([\n                            'tw-transition-transform',\n                            active && 'tw-rotate-180 tw-duration-300',\n                            !disabled && active && 'tw-text-black',\n                            !disabled && !active && 'tw-text-black-80',\n                            disabled && 'tw-text-black-40',\n                        ])}\n                    >\n                        <IconCaretDown {...props} />\n                    </div>\n                </div>\n            );\n        case FieldsetHeaderType.AddRemove:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <div\n                        data-test-id={ADDREMOVE_ICON_CONTAINER_ID}\n                        className={merge([\n                            active && !disabled && 'tw-text-black',\n                            !active && !disabled && 'tw-text-black-80',\n                            disabled && 'tw-text-black-40',\n                        ])}\n                    >\n                        {active ? <IconMinus {...props} /> : <IconPlus {...props} />}\n                    </div>\n                </div>\n            );\n    }\n\n    return null;\n};\n\nexport const FieldsetHeader: FC<FieldsetHeaderProps> = ({\n    size = FieldsetHeaderSize.Large,\n    active = true,\n    decorator,\n    type = FieldsetHeaderType.Default,\n    disabled = false,\n    bold = true,\n    children,\n    onClick,\n    as: Heading = 'label',\n    tabIndex = -1,\n}) => {\n    const id = useMemoizedId();\n    const clickOnNotDisabled = () => !disabled && onClick && onClick();\n\n    let headingFontWeightClass = 'tw-font-normal';\n    if (bold) {\n        headingFontWeightClass = 'tw-font-bold';\n    } else if (size === FieldsetHeaderSize.Medium) {\n        headingFontWeightClass = 'tw-font-medium';\n    }\n\n    return (\n        <header\n            data-test-id=\"fieldset-header\"\n            role={onClick ? 'button' : undefined}\n            onClick={clickOnNotDisabled}\n            onKeyPress={clickOnNotDisabled}\n            className={merge([\n                'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n                disabled ? 'tw-text-black-40' : 'dark:tw-text-white',\n                !disabled && active ? 'tw-text-black' : 'tw-text-black-80',\n                !disabled && onClick ? 'hover:tw-cursor-pointer' : 'tw-pointer-events-none',\n            ])}\n            tabIndex={tabIndex}\n        >\n            {isValidElement(decorator) && (\n                <span className=\"tw-shrink-0\">\n                    {cloneElement(decorator as ReactElement<IconProps>, {\n                        size: sizeMap[size].icon,\n                    })}\n                </span>\n            )}\n            <Heading\n                id={id}\n                className={merge([\n                    'tw-text-left',\n                    sizeMap[size].text,\n                    headingFontWeightClass,\n                    onClick && 'hover:tw-cursor-pointer',\n                ])}\n            >\n                {children}\n            </Heading>\n            {type !== FieldsetHeaderType.Default && (\n                <span data-test-id=\"fieldset-icon-container\" className=\"tw-ml-auto tw-shrink-0\">\n                    {renderFieldsetHeaderIconType(type, id, size, active, disabled)}\n                </span>\n            )}\n        </header>\n    );\n};\nFieldsetHeader.displayName = 'FondueFieldsetHeader';\n"],"names":["ACCORDION_ICON_CONTAINER_ID","ADDREMOVE_ICON_CONTAINER_ID","FieldsetHeaderSize","sizeMap","IconSize","SwitchSize","FieldsetHeaderType","renderFieldsetHeaderIconType","type","id","size","active","disabled","props","React","Switch","merge","IconCaretDown","IconMinus","IconPlus","FieldsetHeader","decorator","bold","children","onClick","Heading","tabIndex","useMemoizedId","clickOnNotDisabled","headingFontWeightClass","isValidElement","cloneElement"],"mappings":"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"}

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignCenterPlugin/AlignCenterButton.es.js

@@ -1,9 +1,9 @@
 import { getTooltip as a } from "../../../helpers/getTooltip.es.js";
 import { usePlateEditorState as c, useEventPlateId as i, someNode as m, AlignToolbarButton as s } from "@udecode/plate";
 import e from "react";
-import { ButtonWrapper as p, IconStylingWrapper as u, buttonClassNames as g, buttonStyles as E } from "../../helper.es.js";
+import { ButtonWrapper as p, IconStylingWrapper as u, getButtonClassNames as g, buttonStyles as E } from "../../helper.es.js";
 import f from "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre16.es.js";
-const B = ({ id: n, editorId: o }) => {
+const C = ({ id: n, editorId: o }) => {
   const t = c(i(o)), r = !!(t != null && t.selection) && m(t, { match: (l) => l.align === "center" });
   return /* @__PURE__ */ e.createElement(p, { id: n }, /* @__PURE__ */ e.createElement(
     s,
@@ -12,13 +12,13 @@ const B = ({ id: n, editorId: o }) => {
       tooltip: a("Align center"),
       value: "center",
       icon: /* @__PURE__ */ e.createElement(u, { icon: /* @__PURE__ */ e.createElement(f, null) }),
-      classNames: g,
+      classNames: g(),
       styles: E,
       actionHandler: "onMouseDown"
     }
   ));
 };
 export {
-  B as AlignCenterButton
+  C as AlignCenterButton
 };
 //# sourceMappingURL=AlignCenterButton.es.js.map

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignCenterPlugin/AlignCenterButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlignCenterButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignCenterPlugin/AlignCenterButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { IconTextAlignmentCentre16 } from '@foundation/Icon/Generated';\nimport { AlignToolbarButton, someNode, useEventPlateId, usePlateEditorState } from '@udecode/plate';\nimport React from 'react';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../../helper';\nimport { PluginButtonProps } from '../../types';\n\nexport const AlignCenterButton = ({ id, editorId }: PluginButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(editorId));\n    const isActive = !!editor?.selection && someNode(editor, { match: (node) => node.align === 'center' });\n\n    return (\n        <ButtonWrapper id={id}>\n            <AlignToolbarButton\n                active={isActive}\n                tooltip={getTooltip('Align center')}\n                value=\"center\"\n                icon={<IconStylingWrapper icon={<IconTextAlignmentCentre16 />} />}\n                classNames={buttonClassNames}\n                styles={buttonStyles}\n                actionHandler=\"onMouseDown\"\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["AlignCenterButton","id","editorId","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","React","ButtonWrapper","AlignToolbarButton","getTooltip","IconStylingWrapper","IconTextAlignmentCentre16","buttonClassNames","buttonStyles"],"mappings":";;;;;AASO,MAAMA,IAAoB,CAAC,EAAE,IAAAC,GAAI,UAAAC,QAAkC;AACtE,QAAMC,IAASC,EAAoBC,EAAgBH,CAAQ,CAAC,GACtDI,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAaI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAASA,EAAK,UAAU,SAAU,CAAA;AAGjG,SAAA,gBAAAC,EAAA,cAACC,KAAc,IAAAT,EACX,GAAA,gBAAAQ,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,QAAQL;AAAA,MACR,SAASM,EAAW,cAAc;AAAA,MAClC,OAAM;AAAA,MACN,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAA0B,GAAI;AAAA,MAC/D,YAAYC;AAAA,MACZ,QAAQC;AAAA,MACR,eAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}
+{"version":3,"file":"AlignCenterButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignCenterPlugin/AlignCenterButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { IconTextAlignmentCentre16 } from '@foundation/Icon/Generated';\nimport { AlignToolbarButton, someNode, useEventPlateId, usePlateEditorState } from '@udecode/plate';\nimport React from 'react';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles, getButtonClassNames } from '../../helper';\nimport { PluginButtonProps } from '../../types';\n\nexport const AlignCenterButton = ({ id, editorId }: PluginButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(editorId));\n    const isActive = !!editor?.selection && someNode(editor, { match: (node) => node.align === 'center' });\n\n    return (\n        <ButtonWrapper id={id}>\n            <AlignToolbarButton\n                active={isActive}\n                tooltip={getTooltip('Align center')}\n                value=\"center\"\n                icon={<IconStylingWrapper icon={<IconTextAlignmentCentre16 />} />}\n                classNames={getButtonClassNames()}\n                styles={buttonStyles}\n                actionHandler=\"onMouseDown\"\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["AlignCenterButton","id","editorId","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","React","ButtonWrapper","AlignToolbarButton","getTooltip","IconStylingWrapper","IconTextAlignmentCentre16","getButtonClassNames","buttonStyles"],"mappings":";;;;;AASO,MAAMA,IAAoB,CAAC,EAAE,IAAAC,GAAI,UAAAC,QAAkC;AACtE,QAAMC,IAASC,EAAoBC,EAAgBH,CAAQ,CAAC,GACtDI,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAaI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAASA,EAAK,UAAU,SAAU,CAAA;AAGjG,SAAA,gBAAAC,EAAA,cAACC,KAAc,IAAAT,EACX,GAAA,gBAAAQ,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,QAAQL;AAAA,MACR,SAASM,EAAW,cAAc;AAAA,MAClC,OAAM;AAAA,MACN,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAA0B,GAAI;AAAA,MAC/D,YAAYC,EAAoB;AAAA,MAChC,QAAQC;AAAA,MACR,eAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignJustifyPlugin/AlignJustifyButton.es.js

@@ -1,9 +1,9 @@
 import e from "react";
 import { usePlateEditorState as r, useEventPlateId as s, someNode as a, AlignToolbarButton as m } from "@udecode/plate";
-import { ButtonWrapper as c, IconStylingWrapper as u, buttonClassNames as p, buttonStyles as f } from "../../helper.es.js";
+import { ButtonWrapper as c, IconStylingWrapper as u, getButtonClassNames as p, buttonStyles as f } from "../../helper.es.js";
 import { getTooltip as y } from "../../../helpers/getTooltip.es.js";
 import g from "../../../../../foundation/Icon/Generated/IconTextAlignmentJustify16.es.js";
-const B = ({ id: o, editorId: n }) => {
+const I = ({ id: o, editorId: n }) => {
   const t = r(s(n)), i = !!(t != null && t.selection) && a(t, { match: (l) => l.align === "justify" });
   return /* @__PURE__ */ e.createElement(c, { id: o }, /* @__PURE__ */ e.createElement(
     m,
@@ -12,13 +12,13 @@ const B = ({ id: o, editorId: n }) => {
       tooltip: y("Justify"),
       value: "justify",
       icon: /* @__PURE__ */ e.createElement(u, { icon: /* @__PURE__ */ e.createElement(g, null) }),
-      classNames: p,
+      classNames: p(),
       styles: f,
       actionHandler: "onMouseDown"
     }
   ));
 };
 export {
-  B as AlignJustifyButton
+  I as AlignJustifyButton
 };
 //# sourceMappingURL=AlignJustifyButton.es.js.map

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignJustifyPlugin/AlignJustifyButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlignJustifyButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignJustifyPlugin/AlignJustifyButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { AlignToolbarButton, someNode, useEventPlateId, usePlateEditorState } from '@udecode/plate';\nimport { IconTextAlignmentJustify16 } from '@foundation/Icon/Generated';\nimport { PluginButtonProps } from '../../types';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../../helper';\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\n\nexport const AlignJustifyButton = ({ id, editorId }: PluginButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(editorId));\n    const isActive = !!editor?.selection && someNode(editor, { match: (node) => node.align === 'justify' });\n    return (\n        <ButtonWrapper id={id}>\n            <AlignToolbarButton\n                active={isActive}\n                tooltip={getTooltip('Justify')}\n                value=\"justify\"\n                icon={<IconStylingWrapper icon={<IconTextAlignmentJustify16 />} />}\n                classNames={buttonClassNames}\n                styles={buttonStyles}\n                actionHandler=\"onMouseDown\"\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["AlignJustifyButton","id","editorId","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","React","ButtonWrapper","AlignToolbarButton","getTooltip","IconStylingWrapper","IconTextAlignmentJustify16","buttonClassNames","buttonStyles"],"mappings":";;;;;AASO,MAAMA,IAAqB,CAAC,EAAE,IAAAC,GAAI,UAAAC,QAAkC;AACvE,QAAMC,IAASC,EAAoBC,EAAgBH,CAAQ,CAAC,GACtDI,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAaI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAASA,EAAK,UAAU,UAAW,CAAA;AAElG,SAAA,gBAAAC,EAAA,cAACC,KAAc,IAAAT,EACX,GAAA,gBAAAQ,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,QAAQL;AAAA,MACR,SAASM,EAAW,SAAS;AAAA,MAC7B,OAAM;AAAA,MACN,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAA2B,GAAI;AAAA,MAChE,YAAYC;AAAA,MACZ,QAAQC;AAAA,MACR,eAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}
+{"version":3,"file":"AlignJustifyButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignJustifyPlugin/AlignJustifyButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { AlignToolbarButton, someNode, useEventPlateId, usePlateEditorState } from '@udecode/plate';\nimport { IconTextAlignmentJustify16 } from '@foundation/Icon/Generated';\nimport { PluginButtonProps } from '../../types';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles, getButtonClassNames } from '../../helper';\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\n\nexport const AlignJustifyButton = ({ id, editorId }: PluginButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(editorId));\n    const isActive = !!editor?.selection && someNode(editor, { match: (node) => node.align === 'justify' });\n    return (\n        <ButtonWrapper id={id}>\n            <AlignToolbarButton\n                active={isActive}\n                tooltip={getTooltip('Justify')}\n                value=\"justify\"\n                icon={<IconStylingWrapper icon={<IconTextAlignmentJustify16 />} />}\n                classNames={getButtonClassNames()}\n                styles={buttonStyles}\n                actionHandler=\"onMouseDown\"\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["AlignJustifyButton","id","editorId","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","React","ButtonWrapper","AlignToolbarButton","getTooltip","IconStylingWrapper","IconTextAlignmentJustify16","getButtonClassNames","buttonStyles"],"mappings":";;;;;AASO,MAAMA,IAAqB,CAAC,EAAE,IAAAC,GAAI,UAAAC,QAAkC;AACvE,QAAMC,IAASC,EAAoBC,EAAgBH,CAAQ,CAAC,GACtDI,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAaI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAASA,EAAK,UAAU,UAAW,CAAA;AAElG,SAAA,gBAAAC,EAAA,cAACC,KAAc,IAAAT,EACX,GAAA,gBAAAQ,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,QAAQL;AAAA,MACR,SAASM,EAAW,SAAS;AAAA,MAC7B,OAAM;AAAA,MACN,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAA2B,GAAI;AAAA,MAChE,YAAYC,EAAoB;AAAA,MAChC,QAAQC;AAAA,MACR,eAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignLeftPlugin/AlignLeftButton.es.js

@@ -1,9 +1,9 @@
 import { getTooltip as a } from "../../../helpers/getTooltip.es.js";
 import { usePlateEditorState as i, useEventPlateId as m, someNode as c, AlignToolbarButton as s } from "@udecode/plate";
 import e from "react";
-import { ButtonWrapper as p, IconStylingWrapper as u, buttonClassNames as f, buttonStyles as g } from "../../helper.es.js";
+import { ButtonWrapper as p, IconStylingWrapper as u, getButtonClassNames as f, buttonStyles as g } from "../../helper.es.js";
 import E from "../../../../../foundation/Icon/Generated/IconTextAlignmentLeft16.es.js";
-const B = ({ id: o, editorId: n }) => {
+const I = ({ id: o, editorId: n }) => {
   const t = i(m(n)), l = !!(t != null && t.selection) && !c(t, { match: (r) => !!r.align });
   return /* @__PURE__ */ e.createElement(p, { id: o }, /* @__PURE__ */ e.createElement(
     s,
@@ -12,13 +12,13 @@ const B = ({ id: o, editorId: n }) => {
       tooltip: a("Align left"),
       value: "left",
       icon: /* @__PURE__ */ e.createElement(u, { icon: /* @__PURE__ */ e.createElement(E, null) }),
-      classNames: f,
+      classNames: f(),
       styles: g,
       actionHandler: "onMouseDown"
     }
   ));
 };
 export {
-  B as AlignLeftButton
+  I as AlignLeftButton
 };
 //# sourceMappingURL=AlignLeftButton.es.js.map

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignLeftPlugin/AlignLeftButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlignLeftButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignLeftPlugin/AlignLeftButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { IconTextAlignmentLeft16 } from '@foundation/Icon/Generated';\nimport { AlignToolbarButton, someNode, useEventPlateId, usePlateEditorState } from '@udecode/plate';\nimport React from 'react';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../../helper';\nimport { PluginButtonProps } from '../../types';\n\nexport const AlignLeftButton = ({ id, editorId }: PluginButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(editorId));\n    const isActive = !!editor?.selection && !someNode(editor, { match: (node) => !!node.align });\n\n    return (\n        <ButtonWrapper id={id}>\n            <AlignToolbarButton\n                active={isActive}\n                tooltip={getTooltip('Align left')}\n                value=\"left\"\n                icon={<IconStylingWrapper icon={<IconTextAlignmentLeft16 />} />}\n                classNames={buttonClassNames}\n                styles={buttonStyles}\n                actionHandler=\"onMouseDown\"\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["AlignLeftButton","id","editorId","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","React","ButtonWrapper","AlignToolbarButton","getTooltip","IconStylingWrapper","IconTextAlignmentLeft16","buttonClassNames","buttonStyles"],"mappings":";;;;;AASO,MAAMA,IAAkB,CAAC,EAAE,IAAAC,GAAI,UAAAC,QAAkC;AACpE,QAAMC,IAASC,EAAoBC,EAAgBH,CAAQ,CAAC,GACtDI,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAa,CAACI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAAS,CAAC,CAACA,EAAK,MAAO,CAAA;AAGvF,SAAA,gBAAAC,EAAA,cAACC,KAAc,IAAAT,EACX,GAAA,gBAAAQ,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,QAAQL;AAAA,MACR,SAASM,EAAW,YAAY;AAAA,MAChC,OAAM;AAAA,MACN,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAAwB,GAAI;AAAA,MAC7D,YAAYC;AAAA,MACZ,QAAQC;AAAA,MACR,eAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}
+{"version":3,"file":"AlignLeftButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignLeftPlugin/AlignLeftButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { IconTextAlignmentLeft16 } from '@foundation/Icon/Generated';\nimport { AlignToolbarButton, someNode, useEventPlateId, usePlateEditorState } from '@udecode/plate';\nimport React from 'react';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles, getButtonClassNames } from '../../helper';\nimport { PluginButtonProps } from '../../types';\n\nexport const AlignLeftButton = ({ id, editorId }: PluginButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(editorId));\n    const isActive = !!editor?.selection && !someNode(editor, { match: (node) => !!node.align });\n\n    return (\n        <ButtonWrapper id={id}>\n            <AlignToolbarButton\n                active={isActive}\n                tooltip={getTooltip('Align left')}\n                value=\"left\"\n                icon={<IconStylingWrapper icon={<IconTextAlignmentLeft16 />} />}\n                classNames={getButtonClassNames()}\n                styles={buttonStyles}\n                actionHandler=\"onMouseDown\"\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["AlignLeftButton","id","editorId","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","React","ButtonWrapper","AlignToolbarButton","getTooltip","IconStylingWrapper","IconTextAlignmentLeft16","getButtonClassNames","buttonStyles"],"mappings":";;;;;AASO,MAAMA,IAAkB,CAAC,EAAE,IAAAC,GAAI,UAAAC,QAAkC;AACpE,QAAMC,IAASC,EAAoBC,EAAgBH,CAAQ,CAAC,GACtDI,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAa,CAACI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAAS,CAAC,CAACA,EAAK,MAAO,CAAA;AAGvF,SAAA,gBAAAC,EAAA,cAACC,KAAc,IAAAT,EACX,GAAA,gBAAAQ,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,QAAQL;AAAA,MACR,SAASM,EAAW,YAAY;AAAA,MAChC,OAAM;AAAA,MACN,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAAwB,GAAI;AAAA,MAC7D,YAAYC,EAAoB;AAAA,MAChC,QAAQC;AAAA,MACR,eAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignRightPlugin/AlignRightButton.es.js

@@ -1,7 +1,7 @@
 import { getTooltip as l } from "../../../helpers/getTooltip.es.js";
 import { usePlateEditorState as a, useEventPlateId as m, someNode as c, AlignToolbarButton as s } from "@udecode/plate";
 import e from "react";
-import { ButtonWrapper as g, IconStylingWrapper as p, buttonClassNames as u, buttonStyles as h } from "../../helper.es.js";
+import { ButtonWrapper as g, IconStylingWrapper as p, getButtonClassNames as u, buttonStyles as h } from "../../helper.es.js";
 import E from "../../../../../foundation/Icon/Generated/IconTextAlignmentRight16.es.js";
 const y = ({ id: o, editorId: n }) => {
   const t = a(m(n)), r = !!(t != null && t.selection) && c(t, { match: (i) => i.align === "right" });
@@ -12,7 +12,7 @@ const y = ({ id: o, editorId: n }) => {
       tooltip: l("Align right"),
       value: "right",
       icon: /* @__PURE__ */ e.createElement(p, { icon: /* @__PURE__ */ e.createElement(E, null) }),
-      classNames: u,
+      classNames: u(),
       styles: h,
       actionHandler: "onMouseDown"
     }

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignRightPlugin/AlignRightButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlignRightButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignRightPlugin/AlignRightButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { IconTextAlignmentRight16 } from '@foundation/Icon/Generated';\nimport { AlignToolbarButton, someNode, useEventPlateId, usePlateEditorState } from '@udecode/plate';\nimport React from 'react';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../../helper';\nimport { PluginButtonProps } from '../../types';\n\nexport const AlignRightButton = ({ id, editorId }: PluginButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(editorId));\n    const isActive = !!editor?.selection && someNode(editor, { match: (node) => node.align === 'right' });\n\n    return (\n        <ButtonWrapper id={id}>\n            <AlignToolbarButton\n                active={isActive}\n                tooltip={getTooltip('Align right')}\n                value=\"right\"\n                icon={<IconStylingWrapper icon={<IconTextAlignmentRight16 />} />}\n                classNames={buttonClassNames}\n                styles={buttonStyles}\n                actionHandler=\"onMouseDown\"\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["AlignRightButton","id","editorId","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","React","ButtonWrapper","AlignToolbarButton","getTooltip","IconStylingWrapper","IconTextAlignmentRight16","buttonClassNames","buttonStyles"],"mappings":";;;;;AASO,MAAMA,IAAmB,CAAC,EAAE,IAAAC,GAAI,UAAAC,QAAkC;AACrE,QAAMC,IAASC,EAAoBC,EAAgBH,CAAQ,CAAC,GACtDI,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAaI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAASA,EAAK,UAAU,QAAS,CAAA;AAGhG,SAAA,gBAAAC,EAAA,cAACC,KAAc,IAAAT,EACX,GAAA,gBAAAQ,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,QAAQL;AAAA,MACR,SAASM,EAAW,aAAa;AAAA,MACjC,OAAM;AAAA,MACN,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAAyB,GAAI;AAAA,MAC9D,YAAYC;AAAA,MACZ,QAAQC;AAAA,MACR,eAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}
+{"version":3,"file":"AlignRightButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignRightPlugin/AlignRightButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { IconTextAlignmentRight16 } from '@foundation/Icon/Generated';\nimport { AlignToolbarButton, someNode, useEventPlateId, usePlateEditorState } from '@udecode/plate';\nimport React from 'react';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles, getButtonClassNames } from '../../helper';\nimport { PluginButtonProps } from '../../types';\n\nexport const AlignRightButton = ({ id, editorId }: PluginButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(editorId));\n    const isActive = !!editor?.selection && someNode(editor, { match: (node) => node.align === 'right' });\n\n    return (\n        <ButtonWrapper id={id}>\n            <AlignToolbarButton\n                active={isActive}\n                tooltip={getTooltip('Align right')}\n                value=\"right\"\n                icon={<IconStylingWrapper icon={<IconTextAlignmentRight16 />} />}\n                classNames={getButtonClassNames()}\n                styles={buttonStyles}\n                actionHandler=\"onMouseDown\"\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["AlignRightButton","id","editorId","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","React","ButtonWrapper","AlignToolbarButton","getTooltip","IconStylingWrapper","IconTextAlignmentRight16","getButtonClassNames","buttonStyles"],"mappings":";;;;;AASO,MAAMA,IAAmB,CAAC,EAAE,IAAAC,GAAI,UAAAC,QAAkC;AACrE,QAAMC,IAASC,EAAoBC,EAAgBH,CAAQ,CAAC,GACtDI,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAaI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAASA,EAAK,UAAU,QAAS,CAAA;AAGhG,SAAA,gBAAAC,EAAA,cAACC,KAAc,IAAAT,EACX,GAAA,gBAAAQ,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,QAAQL;AAAA,MACR,SAASM,EAAW,aAAa;AAAA,MACjC,OAAM;AAAA,MACN,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAAyB,GAAI;AAAA,MAC9D,YAAYC,EAAoB;AAAA,MAChC,QAAQC;AAAA,MACR,eAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}

package/dist/components/RichTextEditor/Plugins/BoldPlugin/BoldButton.es.js

@@ -1,6 +1,6 @@
 import t from "react";
 import { MarkToolbarButton as r, getPluginType as l } from "@udecode/plate";
-import { ButtonWrapper as n, IconStylingWrapper as m, buttonClassNames as a, buttonStyles as p } from "../helper.es.js";
+import { ButtonWrapper as n, IconStylingWrapper as m, getButtonClassNames as a, buttonStyles as p } from "../helper.es.js";
 import { getTooltip as c } from "../../helpers/getTooltip.es.js";
 import { getHotkeyByPlatform as i } from "../../helpers/getHotkeyByPlatform.es.js";
 import s from "../../../../foundation/Icon/Generated/IconTextFormatBold16.es.js";
@@ -12,7 +12,7 @@ ${i("Ctrl+B")}`),
     key: o,
     type: l(e, o),
     icon: /* @__PURE__ */ t.createElement(m, { icon: /* @__PURE__ */ t.createElement(s, null) }),
-    classNames: a,
+    classNames: a(),
     styles: p,
     actionHandler: "onMouseDown"
   }

package/dist/components/RichTextEditor/Plugins/BoldPlugin/BoldButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoldButton.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/BoldPlugin/BoldButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { MarkToolbarButton, getPluginType } from '@udecode/plate';\nimport { IconTextFormatBold16 } from '@foundation/Icon/Generated';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../helper';\nimport { PluginButtonProps } from '../types';\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { getHotkeyByPlatform } from '@components/RichTextEditor/helpers/getHotkeyByPlatform';\n\nexport const BoldButton = ({ editor, id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <MarkToolbarButton\n            tooltip={getTooltip(`Bold\\n${getHotkeyByPlatform('Ctrl+B')}`)}\n            key={id}\n            type={getPluginType(editor, id)}\n            icon={<IconStylingWrapper icon={<IconTextFormatBold16 />} />}\n            classNames={buttonClassNames}\n            styles={buttonStyles}\n            actionHandler=\"onMouseDown\"\n        />\n    </ButtonWrapper>\n);\n"],"names":["BoldButton","editor","id","React","ButtonWrapper","MarkToolbarButton","getTooltip","getHotkeyByPlatform","getPluginType","IconStylingWrapper","IconTextFormatBold16","buttonClassNames","buttonStyles"],"mappings":";;;;;;AAUa,MAAAA,IAAa,CAAC,EAAE,QAAAC,GAAQ,IAAAC,QACjC,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,SAASC,EAAW;AAAA,EAASC,EAAoB,QAAQ,GAAG;AAAA,IAC5D,KAAKL;AAAA,IACL,MAAMM,EAAcP,GAAQC,CAAE;AAAA,IAC9B,MAAO,gBAAAC,EAAA,cAAAM,GAAA,EAAmB,MAAM,gBAAAN,EAAA,cAACO,OAAqB,GAAI;AAAA,IAC1D,YAAYC;AAAA,IACZ,QAAQC;AAAA,IACR,eAAc;AAAA,EAAA;AAClB,CACJ;"}
+{"version":3,"file":"BoldButton.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/BoldPlugin/BoldButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { MarkToolbarButton, getPluginType } from '@udecode/plate';\nimport { IconTextFormatBold16 } from '@foundation/Icon/Generated';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles, getButtonClassNames } from '../helper';\nimport { PluginButtonProps } from '../types';\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { getHotkeyByPlatform } from '@components/RichTextEditor/helpers/getHotkeyByPlatform';\n\nexport const BoldButton = ({ editor, id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <MarkToolbarButton\n            tooltip={getTooltip(`Bold\\n${getHotkeyByPlatform('Ctrl+B')}`)}\n            key={id}\n            type={getPluginType(editor, id)}\n            icon={<IconStylingWrapper icon={<IconTextFormatBold16 />} />}\n            classNames={getButtonClassNames()}\n            styles={buttonStyles}\n            actionHandler=\"onMouseDown\"\n        />\n    </ButtonWrapper>\n);\n"],"names":["BoldButton","editor","id","React","ButtonWrapper","MarkToolbarButton","getTooltip","getHotkeyByPlatform","getPluginType","IconStylingWrapper","IconTextFormatBold16","getButtonClassNames","buttonStyles"],"mappings":";;;;;;AAUa,MAAAA,IAAa,CAAC,EAAE,QAAAC,GAAQ,IAAAC,QACjC,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,SAASC,EAAW;AAAA,EAASC,EAAoB,QAAQ,GAAG;AAAA,IAC5D,KAAKL;AAAA,IACL,MAAMM,EAAcP,GAAQC,CAAE;AAAA,IAC9B,MAAO,gBAAAC,EAAA,cAAAM,GAAA,EAAmB,MAAM,gBAAAN,EAAA,cAACO,OAAqB,GAAI;AAAA,IAC1D,YAAYC,EAAoB;AAAA,IAChC,QAAQC;AAAA,IACR,eAAc;AAAA,EAAA;AAClB,CACJ;"}

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/components/ButtonButton.es.js

@@ -1,15 +1,14 @@
-import t from "react";
 import { getPluginType as r } from "@udecode/plate";
-import { ButtonWrapper as n, IconStylingWrapper as m, buttonClassNames as l, buttonStyles as p } from "../../helper.es.js";
-import { ButtonToolbarButton as a } from "./ButtonToolbarButton.es.js";
-import { ELEMENT_BUTTON as c } from "../createButtonPlugin.es.js";
+import t from "react";
+import { ButtonWrapper as n, IconStylingWrapper as m, buttonStyles as p } from "../../helper.es.js";
+import { ELEMENT_BUTTON as l } from "../createButtonPlugin.es.js";
+import { ButtonToolbarButton as c } from "./ButtonToolbarButton.es.js";
 import i from "../../../../../foundation/Icon/Generated/IconButton16.es.js";
 const T = ({ editor: o, id: e }) => /* @__PURE__ */ t.createElement(n, { id: e }, /* @__PURE__ */ t.createElement(
-  a,
+  c,
   {
-    type: r(o, c),
+    type: r(o, l),
     icon: /* @__PURE__ */ t.createElement(m, { icon: /* @__PURE__ */ t.createElement(i, null) }),
-    classNames: l,
     styles: p
   }
 ));

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/components/ButtonButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/ButtonButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { getPluginType } from '@udecode/plate';\nimport { IconButton16 } from '@foundation/Icon/Generated';\nimport { PluginButtonProps } from '../../types';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../../helper';\nimport { ButtonToolbarButton } from './ButtonToolbarButton';\nimport { ELEMENT_BUTTON } from '../createButtonPlugin';\n\nexport const ButtonButton = ({ editor, id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <ButtonToolbarButton\n            type={getPluginType(editor, ELEMENT_BUTTON)}\n            icon={<IconStylingWrapper icon={<IconButton16 />} />}\n            classNames={buttonClassNames}\n            styles={buttonStyles}\n        />\n    </ButtonWrapper>\n);\n"],"names":["ButtonButton","editor","id","React","ButtonWrapper","ButtonToolbarButton","getPluginType","ELEMENT_BUTTON","IconStylingWrapper","IconButton16","buttonClassNames","buttonStyles"],"mappings":";;;;;;AAUa,MAAAA,IAAe,CAAC,EAAE,QAAAC,GAAQ,IAAAC,QACnC,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,MAAMC,EAAcL,GAAQM,CAAc;AAAA,IAC1C,MAAO,gBAAAJ,EAAA,cAAAK,GAAA,EAAmB,MAAM,gBAAAL,EAAA,cAACM,OAAa,GAAI;AAAA,IAClD,YAAYC;AAAA,IACZ,QAAQC;AAAA,EAAA;AACZ,CACJ;"}
+{"version":3,"file":"ButtonButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/ButtonButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconButton16 } from '@foundation/Icon/Generated';\nimport { getPluginType } from '@udecode/plate';\nimport React from 'react';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles } from '../../helper';\nimport { PluginButtonProps } from '../../types';\nimport { ELEMENT_BUTTON } from '../createButtonPlugin';\nimport { ButtonToolbarButton } from './ButtonToolbarButton';\n\nexport const ButtonButton = ({ editor, id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <ButtonToolbarButton\n            type={getPluginType(editor, ELEMENT_BUTTON)}\n            icon={<IconStylingWrapper icon={<IconButton16 />} />}\n            styles={buttonStyles}\n        />\n    </ButtonWrapper>\n);\n"],"names":["ButtonButton","editor","id","React","ButtonWrapper","ButtonToolbarButton","getPluginType","ELEMENT_BUTTON","IconStylingWrapper","IconButton16","buttonStyles"],"mappings":";;;;;;AAUa,MAAAA,IAAe,CAAC,EAAE,QAAAC,GAAQ,IAAAC,QACnC,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,MAAMC,EAAcL,GAAQM,CAAc;AAAA,IAC1C,MAAO,gBAAAJ,EAAA,cAAAK,GAAA,EAAmB,MAAM,gBAAAL,EAAA,cAACM,OAAa,GAAI;AAAA,IAClD,QAAQC;AAAA,EAAA;AACZ,CACJ;"}

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/components/ButtonToolbarButton.es.js

@@ -1,22 +1,28 @@
 import a from "react";
-import { usePlateEditorState as m, useEventPlateId as s, someNode as u, ToolbarButton as l, focusEditor as c } from "@udecode/plate";
-import { getTooltip as p } from "../../../helpers/getTooltip.es.js";
-import { getHotkeyByPlatform as f } from "../../../helpers/getHotkeyByPlatform.es.js";
-import { triggerFloatingButton as g } from "../utils/triggerFloatingButton.es.js";
-const T = ({ id: e, type: r, ...i }) => {
-  const t = m(s(e)), n = !!(t != null && t.selection) && u(t, { match: { type: r } });
+import { usePlateEditorState as l, useEventPlateId as m, isRangeInSameBlock as c, someNode as u, ToolbarButton as f, focusEditor as p } from "@udecode/plate";
+import { getTooltip as g } from "../../../helpers/getTooltip.es.js";
+import { getHotkeyByPlatform as B } from "../../../helpers/getHotkeyByPlatform.es.js";
+import { getButtonClassNames as d } from "../../helper.es.js";
+import { triggerFloatingButton as b } from "../utils/triggerFloatingButton.es.js";
+const T = ({ id: n, type: r, ...s }) => {
+  const t = l(m(n)), o = !!c(t, {
+    at: t.selection
+  }), i = !!(t != null && t.selection) && u(t, { match: { type: r } });
   return /* @__PURE__ */ a.createElement(
-    l,
+    f,
     {
-      tooltip: p(`Button
-${f("Shift+Ctrl+k")}`),
-      active: n,
-      onMouseDown: async (o) => {
-        t && (o.preventDefault(), o.stopPropagation(), c(t, t.selection ?? t.prevSelection ?? void 0), setTimeout(() => {
-          g(t, { focused: !0 });
+      tooltip: g(
+        o ? `Button
+${B("Shift+Ctrl+k")}` : "Buttons can only be set for a single text block."
+      ),
+      classNames: d(o),
+      active: i,
+      onMouseDown: async (e) => {
+        t && (e.preventDefault(), e.stopPropagation(), p(t, t.selection ?? t.prevSelection ?? void 0), setTimeout(() => {
+          b(t, { focused: !0 });
         }, 0));
       },
-      ...i
+      ...s
     }
   );
 };

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/components/ButtonToolbarButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonToolbarButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/ButtonToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { ToolbarButton, focusEditor, someNode, useEventPlateId, usePlateEditorState } from '@udecode/plate';\nimport { triggerFloatingButton } from '../utils';\nimport { BlockToolbarButtonProps } from '@udecode/plate';\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { getHotkeyByPlatform } from '@components/RichTextEditor/helpers/getHotkeyByPlatform';\n\nexport interface LinkToolbarButtonProps extends BlockToolbarButtonProps {\n    /**\n     * Default onMouseDown is getting the link url by calling this promise before inserting the image.\n     */\n    getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;\n}\n\nexport const ButtonToolbarButton = ({ id, type, ...props }: LinkToolbarButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(id));\n\n    const isLink = !!editor?.selection && someNode(editor, { match: { type } });\n\n    return (\n        <ToolbarButton\n            tooltip={getTooltip(`Button\\n${getHotkeyByPlatform('Shift+Ctrl+k')}`)}\n            active={isLink}\n            onMouseDown={async (event) => {\n                if (!editor) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n\n                focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);\n\n                setTimeout(() => {\n                    triggerFloatingButton(editor, { focused: true });\n                }, 0);\n            }}\n            {...props}\n        />\n    );\n};\n"],"names":["ButtonToolbarButton","id","type","props","editor","usePlateEditorState","useEventPlateId","isLink","someNode","React","ToolbarButton","getTooltip","getHotkeyByPlatform","event","focusEditor","triggerFloatingButton"],"mappings":";;;;;AAgBO,MAAMA,IAAsB,CAAC,EAAE,IAAAC,GAAI,MAAAC,GAAM,GAAGC,QAAoC;AACnF,QAAMC,IAASC,EAAoBC,EAAgBL,CAAE,CAAC,GAEhDM,IAAS,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAaI,EAASJ,GAAQ,EAAE,OAAO,EAAE,MAAAF,EAAK,EAAG,CAAA;AAGtE,SAAA,gBAAAO,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASC,EAAW;AAAA,EAAWC,EAAoB,cAAc,GAAG;AAAA,MACpE,QAAQL;AAAA,MACR,aAAa,OAAOM,MAAU;AAC1B,QAAKT,MAILS,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GAEtBC,EAAYV,GAAQA,EAAO,aAAaA,EAAO,iBAAiB,MAAS,GAEzE,WAAW,MAAM;AACb,UAAAW,EAAsBX,GAAQ,EAAE,SAAS,GAAM,CAAA;AAAA,WAChD,CAAC;AAAA,MACR;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"ButtonToolbarButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/ButtonToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport {\n    ToolbarButton,\n    focusEditor,\n    isRangeInSameBlock,\n    someNode,\n    useEventPlateId,\n    usePlateEditorState,\n} from '@udecode/plate';\nimport { triggerFloatingButton } from '../utils';\nimport { BlockToolbarButtonProps } from '@udecode/plate';\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { getHotkeyByPlatform } from '@components/RichTextEditor/helpers/getHotkeyByPlatform';\nimport { getButtonClassNames } from '../../helper';\n\nexport interface LinkToolbarButtonProps extends BlockToolbarButtonProps {\n    /**\n     * Default onMouseDown is getting the link url by calling this promise before inserting the image.\n     */\n    getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;\n}\n\nexport const ButtonToolbarButton = ({ id, type, ...props }: LinkToolbarButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(id));\n    const isEnabled = !!isRangeInSameBlock(editor, {\n        at: editor.selection,\n    });\n\n    const isLink = !!editor?.selection && someNode(editor, { match: { type } });\n\n    return (\n        <ToolbarButton\n            tooltip={getTooltip(\n                isEnabled\n                    ? `Button\\n${getHotkeyByPlatform('Shift+Ctrl+k')}`\n                    : 'Buttons can only be set for a single text block.',\n            )}\n            classNames={getButtonClassNames(isEnabled)}\n            active={isLink}\n            onMouseDown={async (event) => {\n                if (!editor) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n\n                focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);\n\n                setTimeout(() => {\n                    triggerFloatingButton(editor, { focused: true });\n                }, 0);\n            }}\n            {...props}\n        />\n    );\n};\n"],"names":["ButtonToolbarButton","id","type","props","editor","usePlateEditorState","useEventPlateId","isEnabled","isRangeInSameBlock","isLink","someNode","React","ToolbarButton","getTooltip","getHotkeyByPlatform","getButtonClassNames","event","focusEditor","triggerFloatingButton"],"mappings":";;;;;;AAwBO,MAAMA,IAAsB,CAAC,EAAE,IAAAC,GAAI,MAAAC,GAAM,GAAGC,QAAoC;AACnF,QAAMC,IAASC,EAAoBC,EAAgBL,CAAE,CAAC,GAChDM,IAAY,CAAC,CAACC,EAAmBJ,GAAQ;AAAA,IAC3C,IAAIA,EAAO;AAAA,EAAA,CACd,GAEKK,IAAS,CAAC,EAACL,KAAA,QAAAA,EAAQ,cAAaM,EAASN,GAAQ,EAAE,OAAO,EAAE,MAAAF,EAAK,EAAG,CAAA;AAGtE,SAAA,gBAAAS,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASC;AAAA,QACLN,IACM;AAAA,EAAWO,EAAoB,cAAc,MAC7C;AAAA,MACV;AAAA,MACA,YAAYC,EAAoBR,CAAS;AAAA,MACzC,QAAQE;AAAA,MACR,aAAa,OAAOO,MAAU;AAC1B,QAAKZ,MAILY,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GAEtBC,EAAYb,GAAQA,EAAO,aAAaA,EAAO,iBAAiB,MAAS,GAEzE,WAAW,MAAM;AACb,UAAAc,EAAsBd,GAAQ,EAAE,SAAS,GAAM,CAAA;AAAA,WAChD,CAAC;AAAA,MACR;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/dist/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListButton/index.es.js

@@ -1,18 +1,18 @@
 import t from "react";
 import { getPluginType as r } from "@udecode/plate";
 import { CheckboxListToolbarButton as n } from "./CheckboxListToolbarButton.es.js";
-import { ButtonWrapper as m, IconStylingWrapper as c, buttonClassNames as l, buttonStyles as s } from "../../helper.es.js";
+import { ButtonWrapper as m, IconStylingWrapper as c, getButtonClassNames as l, buttonStyles as s } from "../../helper.es.js";
 import a from "../../../../../foundation/Icon/Generated/IconListCheck16.es.js";
-const y = ({ editor: o, id: e }) => /* @__PURE__ */ t.createElement(m, { id: e }, /* @__PURE__ */ t.createElement(
+const b = ({ editor: o, id: e }) => /* @__PURE__ */ t.createElement(m, { id: e }, /* @__PURE__ */ t.createElement(
   n,
   {
     type: r(o, e),
     icon: /* @__PURE__ */ t.createElement(c, { icon: /* @__PURE__ */ t.createElement(a, null) }),
-    classNames: l,
+    classNames: l(),
     styles: s
   }
 ));
 export {
-  y as CheckboxListButton
+  b as CheckboxListButton
 };
 //# sourceMappingURL=index.es.js.map

package/dist/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListButton/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListButton/index.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { getPluginType } from '@udecode/plate';\nimport { IconListCheck16 } from '@foundation/Icon/Generated';\nimport { CheckboxListToolbarButton } from './CheckboxListToolbarButton';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../../helper';\nimport { PluginButtonProps } from '../../types';\n\nexport const CheckboxListButton = ({ editor, id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <CheckboxListToolbarButton\n            type={getPluginType(editor, id)}\n            icon={<IconStylingWrapper icon={<IconListCheck16 />} />}\n            classNames={buttonClassNames}\n            styles={buttonStyles}\n        />\n    </ButtonWrapper>\n);\n"],"names":["CheckboxListButton","editor","id","React","ButtonWrapper","CheckboxListToolbarButton","getPluginType","IconStylingWrapper","IconListCheck16","buttonClassNames","buttonStyles"],"mappings":";;;;;AASa,MAAAA,IAAqB,CAAC,EAAE,QAAAC,GAAQ,IAAAC,QACzC,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,MAAMC,EAAcL,GAAQC,CAAE;AAAA,IAC9B,MAAO,gBAAAC,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAAgB,GAAI;AAAA,IACrD,YAAYC;AAAA,IACZ,QAAQC;AAAA,EAAA;AACZ,CACJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListButton/index.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { getPluginType } from '@udecode/plate';\nimport { IconListCheck16 } from '@foundation/Icon/Generated';\nimport { CheckboxListToolbarButton } from './CheckboxListToolbarButton';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles, getButtonClassNames } from '../../helper';\nimport { PluginButtonProps } from '../../types';\n\nexport const CheckboxListButton = ({ editor, id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <CheckboxListToolbarButton\n            type={getPluginType(editor, id)}\n            icon={<IconStylingWrapper icon={<IconListCheck16 />} />}\n            classNames={getButtonClassNames()}\n            styles={buttonStyles}\n        />\n    </ButtonWrapper>\n);\n"],"names":["CheckboxListButton","editor","id","React","ButtonWrapper","CheckboxListToolbarButton","getPluginType","IconStylingWrapper","IconListCheck16","getButtonClassNames","buttonStyles"],"mappings":";;;;;AASa,MAAAA,IAAqB,CAAC,EAAE,QAAAC,GAAQ,IAAAC,QACzC,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,MAAMC,EAAcL,GAAQC,CAAE;AAAA,IAC9B,MAAO,gBAAAC,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAAgB,GAAI;AAAA,IACrD,YAAYC,EAAoB;AAAA,IAChC,QAAQC;AAAA,EAAA;AACZ,CACJ;"}

package/dist/components/RichTextEditor/Plugins/CodePlugin/CodeButton.es.js

@@ -1,7 +1,7 @@
 import { getTooltip as r } from "../../helpers/getTooltip.es.js";
 import { MarkToolbarButton as n, getPluginType as a } from "@udecode/plate";
 import t from "react";
-import { ButtonWrapper as l, IconStylingWrapper as m, buttonClassNames as p, buttonStyles as c } from "../helper.es.js";
+import { ButtonWrapper as l, IconStylingWrapper as m, getButtonClassNames as p, buttonStyles as c } from "../helper.es.js";
 import s from "../../../../foundation/Icon/Generated/IconTextBrackets16.es.js";
 const B = ({ editor: o, id: e }) => /* @__PURE__ */ t.createElement(l, { id: e }, /* @__PURE__ */ t.createElement(
   n,
@@ -9,7 +9,7 @@ const B = ({ editor: o, id: e }) => /* @__PURE__ */ t.createElement(l, { id: e }
     tooltip: r("Code"),
     type: a(o, e),
     icon: /* @__PURE__ */ t.createElement(m, { icon: /* @__PURE__ */ t.createElement(s, null) }),
-    classNames: p,
+    classNames: p(),
     styles: c,
     actionHandler: "onMouseDown"
   }

package/dist/components/RichTextEditor/Plugins/CodePlugin/CodeButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeButton.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/CodePlugin/CodeButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { IconTextBrackets16 } from '@foundation/Icon/Generated';\nimport { MarkToolbarButton, getPluginType } from '@udecode/plate';\nimport React from 'react';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../helper';\nimport { PluginButtonProps } from '../types';\n\nexport const CodeButton = ({ editor, id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <MarkToolbarButton\n            tooltip={getTooltip('Code')}\n            type={getPluginType(editor, id)}\n            icon={<IconStylingWrapper icon={<IconTextBrackets16 />} />}\n            classNames={buttonClassNames}\n            styles={buttonStyles}\n            actionHandler=\"onMouseDown\"\n        />\n    </ButtonWrapper>\n);\n"],"names":["CodeButton","editor","id","React","ButtonWrapper","MarkToolbarButton","getTooltip","getPluginType","IconStylingWrapper","IconTextBrackets16","buttonClassNames","buttonStyles"],"mappings":";;;;;AASa,MAAAA,IAAa,CAAC,EAAE,QAAAC,GAAQ,IAAAC,QACjC,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,SAASC,EAAW,MAAM;AAAA,IAC1B,MAAMC,EAAcN,GAAQC,CAAE;AAAA,IAC9B,MAAO,gBAAAC,EAAA,cAAAK,GAAA,EAAmB,MAAM,gBAAAL,EAAA,cAACM,OAAmB,GAAI;AAAA,IACxD,YAAYC;AAAA,IACZ,QAAQC;AAAA,IACR,eAAc;AAAA,EAAA;AAClB,CACJ;"}
+{"version":3,"file":"CodeButton.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/CodePlugin/CodeButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport { IconTextBrackets16 } from '@foundation/Icon/Generated';\nimport { MarkToolbarButton, getPluginType } from '@udecode/plate';\nimport React from 'react';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles, getButtonClassNames } from '../helper';\nimport { PluginButtonProps } from '../types';\n\nexport const CodeButton = ({ editor, id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <MarkToolbarButton\n            tooltip={getTooltip('Code')}\n            type={getPluginType(editor, id)}\n            icon={<IconStylingWrapper icon={<IconTextBrackets16 />} />}\n            classNames={getButtonClassNames()}\n            styles={buttonStyles}\n            actionHandler=\"onMouseDown\"\n        />\n    </ButtonWrapper>\n);\n"],"names":["CodeButton","editor","id","React","ButtonWrapper","MarkToolbarButton","getTooltip","getPluginType","IconStylingWrapper","IconTextBrackets16","getButtonClassNames","buttonStyles"],"mappings":";;;;;AASa,MAAAA,IAAa,CAAC,EAAE,QAAAC,GAAQ,IAAAC,QACjC,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,SAASC,EAAW,MAAM;AAAA,IAC1B,MAAMC,EAAcN,GAAQC,CAAE;AAAA,IAC9B,MAAO,gBAAAC,EAAA,cAAAK,GAAA,EAAmB,MAAM,gBAAAL,EAAA,cAACM,OAAmB,GAAI;AAAA,IACxD,YAAYC,EAAoB;AAAA,IAChC,QAAQC;AAAA,IACR,eAAc;AAAA,EAAA;AAClB,CACJ;"}

package/dist/components/RichTextEditor/Plugins/ColumnBreakPlugin/ColumnBreakButton/ColumnBreakToolbarButton.es.js

@@ -1,31 +1,28 @@
 import { getTooltip as i } from "../../../helpers/getTooltip.es.js";
-import { usePlateEditorState as p, useEventPlateId as C, someNode as f, ToolbarButton as B } from "@udecode/plate";
+import { usePlateEditorState as C, useEventPlateId as p, someNode as f, ToolbarButton as B } from "@udecode/plate";
 import b from "react";
-import { buttonClassNames as u } from "../../helper.es.js";
-import { toggleColumnBreak as k } from "../onKeyDownColumnBreak.es.js";
-import { getColumnBreakCount as d } from "../utils/getColumnBreakCount.es.js";
-const T = ({ id: t, ...e }) => {
+import { getButtonClassNames as k } from "../../helper.es.js";
+import { toggleColumnBreak as g } from "../onKeyDownColumnBreak.es.js";
+import { getColumnBreakCount as N } from "../utils/getColumnBreakCount.es.js";
+const x = ({ id: t, ...e }) => {
   var l;
-  const o = p(C(t)), m = !!(o != null && o.selection) && f(o, { match: (r) => !!r.breakAfterColumn }), n = o.pluginsByKey.breakAfterColumn, c = (l = n == null ? void 0 : n.options) == null ? void 0 : l.columns, a = Number(c) || 1, s = v(o, a, m);
+  const o = C(p(t)), r = !!(o != null && o.selection) && f(o, { match: (m) => !!m.breakAfterColumn }), n = o.pluginsByKey.breakAfterColumn, u = (l = n == null ? void 0 : n.options) == null ? void 0 : l.columns, s = Number(u) || 1, a = d(o, s, r), c = k(a);
   return /* @__PURE__ */ b.createElement(
     B,
     {
-      active: m,
+      active: r,
       tooltip: i(
-        s ? `Column Break
+        a ? `Column Break
 Shift+Ctrl+Return` : "Already at maximum numbers of columns"
       ),
-      onMouseDown: (r) => k(o, a, r),
+      onMouseDown: (m) => g(o, s, m),
       ...e,
-      classNames: {
-        root: `${u.root} ${s ? "" : "!tw-cursor-not-allowed !tw-opacity-50"}`,
-        active: u.active
-      }
+      classNames: c
     }
   );
-}, v = (t, e, o) => d(t) + 1 < e || o;
+}, d = (t, e, o) => N(t) + 1 < e || o;
 export {
-  T as ColumnBreakToolbarButton,
-  v as isColumnBreakEnabled
+  x as ColumnBreakToolbarButton,
+  d as isColumnBreakEnabled
 };
 //# sourceMappingURL=ColumnBreakToolbarButton.es.js.map

package/dist/components/RichTextEditor/Plugins/ColumnBreakPlugin/ColumnBreakButton/ColumnBreakToolbarButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnBreakToolbarButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ColumnBreakPlugin/ColumnBreakButton/ColumnBreakToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport {\n    PlateEditor,\n    ToolbarButton,\n    ToolbarButtonProps,\n    someNode,\n    useEventPlateId,\n    usePlateEditorState,\n} from '@udecode/plate';\nimport React from 'react';\nimport { buttonClassNames } from '../../helper';\nimport { toggleColumnBreak } from '../onKeyDownColumnBreak';\nimport { getColumnBreakCount } from '../utils/getColumnBreakCount';\n\nexport const ColumnBreakToolbarButton = ({ id, ...props }: ToolbarButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(id));\n    const isActive = !!editor?.selection && someNode(editor, { match: (node) => !!node.breakAfterColumn });\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const breakAfterPlugin = editor.pluginsByKey['breakAfterColumn'] as any;\n    const columns = breakAfterPlugin?.options?.columns;\n\n    const columnCount = Number(columns) || 1;\n    const canBreakAfter = isColumnBreakEnabled(editor, columnCount, isActive);\n\n    return (\n        <ToolbarButton\n            active={isActive}\n            tooltip={getTooltip(\n                canBreakAfter ? 'Column Break\\nShift+Ctrl+Return' : 'Already at maximum numbers of columns',\n            )}\n            onMouseDown={(event) => toggleColumnBreak(editor, columnCount, event)}\n            {...props}\n            classNames={{\n                root: `${buttonClassNames.root} ${canBreakAfter ? '' : '!tw-cursor-not-allowed !tw-opacity-50'}`,\n                active: buttonClassNames.active,\n            }}\n        />\n    );\n};\n\nexport const isColumnBreakEnabled = (editor: PlateEditor, columnCount: number, isButtonActive: boolean): boolean =>\n    getColumnBreakCount(editor) + 1 < columnCount || isButtonActive;\n"],"names":["ColumnBreakToolbarButton","id","props","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","breakAfterPlugin","columns","_a","columnCount","canBreakAfter","isColumnBreakEnabled","React","ToolbarButton","getTooltip","event","toggleColumnBreak","buttonClassNames","isButtonActive","getColumnBreakCount"],"mappings":";;;;;;AAgBO,MAAMA,IAA2B,CAAC,EAAE,IAAAC,GAAI,GAAGC,QAAgC;;AAC9E,QAAMC,IAASC,EAAoBC,EAAgBJ,CAAE,CAAC,GAChDK,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAaI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAAS,CAAC,CAACA,EAAK,iBAAkB,CAAA,GAG/FC,IAAmBN,EAAO,aAAa,kBACvCO,KAAUC,IAAAF,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAE,EAA2B,SAErCC,IAAc,OAAOF,CAAO,KAAK,GACjCG,IAAgBC,EAAqBX,GAAQS,GAAaN,CAAQ;AAGpE,SAAA,gBAAAS,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,QAAQV;AAAA,MACR,SAASW;AAAA,QACLJ,IAAgB;AAAA,qBAAoC;AAAA,MACxD;AAAA,MACA,aAAa,CAACK,MAAUC,EAAkBhB,GAAQS,GAAaM,CAAK;AAAA,MACnE,GAAGhB;AAAA,MACJ,YAAY;AAAA,QACR,MAAM,GAAGkB,EAAiB,QAAQP,IAAgB,KAAK;AAAA,QACvD,QAAQO,EAAiB;AAAA,MAC7B;AAAA,IAAA;AAAA,EAAA;AAGZ,GAEaN,IAAuB,CAACX,GAAqBS,GAAqBS,MAC3EC,EAAoBnB,CAAM,IAAI,IAAIS,KAAeS;"}
+{"version":3,"file":"ColumnBreakToolbarButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ColumnBreakPlugin/ColumnBreakButton/ColumnBreakToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';\nimport {\n    PlateEditor,\n    ToolbarButton,\n    ToolbarButtonProps,\n    someNode,\n    useEventPlateId,\n    usePlateEditorState,\n} from '@udecode/plate';\nimport React from 'react';\nimport { getButtonClassNames } from '../../helper';\nimport { toggleColumnBreak } from '../onKeyDownColumnBreak';\nimport { getColumnBreakCount } from '../utils/getColumnBreakCount';\n\nexport const ColumnBreakToolbarButton = ({ id, ...props }: ToolbarButtonProps) => {\n    const editor = usePlateEditorState(useEventPlateId(id));\n    const isActive = !!editor?.selection && someNode(editor, { match: (node) => !!node.breakAfterColumn });\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const breakAfterPlugin = editor.pluginsByKey['breakAfterColumn'] as any;\n    const columns = breakAfterPlugin?.options?.columns;\n\n    const columnCount = Number(columns) || 1;\n    const canBreakAfter = isColumnBreakEnabled(editor, columnCount, isActive);\n    const buttonClassNames = getButtonClassNames(canBreakAfter);\n\n    return (\n        <ToolbarButton\n            active={isActive}\n            tooltip={getTooltip(\n                canBreakAfter ? 'Column Break\\nShift+Ctrl+Return' : 'Already at maximum numbers of columns',\n            )}\n            onMouseDown={(event) => toggleColumnBreak(editor, columnCount, event)}\n            {...props}\n            classNames={buttonClassNames}\n        />\n    );\n};\n\nexport const isColumnBreakEnabled = (editor: PlateEditor, columnCount: number, isButtonActive: boolean): boolean =>\n    getColumnBreakCount(editor) + 1 < columnCount || isButtonActive;\n"],"names":["ColumnBreakToolbarButton","id","props","editor","usePlateEditorState","useEventPlateId","isActive","someNode","node","breakAfterPlugin","columns","_a","columnCount","canBreakAfter","isColumnBreakEnabled","buttonClassNames","getButtonClassNames","React","ToolbarButton","getTooltip","event","toggleColumnBreak","isButtonActive","getColumnBreakCount"],"mappings":";;;;;;AAgBO,MAAMA,IAA2B,CAAC,EAAE,IAAAC,GAAI,GAAGC,QAAgC;;AAC9E,QAAMC,IAASC,EAAoBC,EAAgBJ,CAAE,CAAC,GAChDK,IAAW,CAAC,EAACH,KAAA,QAAAA,EAAQ,cAAaI,EAASJ,GAAQ,EAAE,OAAO,CAACK,MAAS,CAAC,CAACA,EAAK,iBAAkB,CAAA,GAG/FC,IAAmBN,EAAO,aAAa,kBACvCO,KAAUC,IAAAF,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAE,EAA2B,SAErCC,IAAc,OAAOF,CAAO,KAAK,GACjCG,IAAgBC,EAAqBX,GAAQS,GAAaN,CAAQ,GAClES,IAAmBC,EAAoBH,CAAa;AAGtD,SAAA,gBAAAI,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,QAAQZ;AAAA,MACR,SAASa;AAAA,QACLN,IAAgB;AAAA,qBAAoC;AAAA,MACxD;AAAA,MACA,aAAa,CAACO,MAAUC,EAAkBlB,GAAQS,GAAaQ,CAAK;AAAA,MACnE,GAAGlB;AAAA,MACJ,YAAYa;AAAA,IAAA;AAAA,EAAA;AAGxB,GAEaD,IAAuB,CAACX,GAAqBS,GAAqBU,MAC3EC,EAAoBpB,CAAM,IAAI,IAAIS,KAAeU;"}

package/dist/components/RichTextEditor/Plugins/ColumnBreakPlugin/ColumnBreakButton/index.es.js

@@ -1,12 +1,12 @@
 import t from "react";
-import { ButtonWrapper as o, IconStylingWrapper as r, buttonClassNames as n, buttonStyles as m } from "../../helper.es.js";
+import { ButtonWrapper as o, IconStylingWrapper as r, getButtonClassNames as n, buttonStyles as m } from "../../helper.es.js";
 import { ColumnBreakToolbarButton as a } from "./ColumnBreakToolbarButton.es.js";
 import l from "../../../../../foundation/Icon/Generated/IconTextColumnBreak16.es.js";
 const i = ({ id: e }) => /* @__PURE__ */ t.createElement(o, { id: e }, /* @__PURE__ */ t.createElement(
   a,
   {
     icon: /* @__PURE__ */ t.createElement(r, { icon: /* @__PURE__ */ t.createElement(l, null) }),
-    classNames: n,
+    classNames: n(),
     styles: m
   }
 ));

package/dist/components/RichTextEditor/Plugins/ColumnBreakPlugin/ColumnBreakButton/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ColumnBreakPlugin/ColumnBreakButton/index.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { IconTextColumnBreak16 } from '@foundation/Icon/Generated';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../../helper';\nimport { PluginButtonProps } from '../../types';\nimport { ColumnBreakToolbarButton } from './ColumnBreakToolbarButton';\n\nexport const ColumnBreakButton = ({ id }: PluginButtonProps) => {\n    return (\n        <ButtonWrapper id={id}>\n            <ColumnBreakToolbarButton\n                icon={<IconStylingWrapper icon={<IconTextColumnBreak16 />} />}\n                classNames={buttonClassNames}\n                styles={buttonStyles}\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["ColumnBreakButton","id","React","ButtonWrapper","ColumnBreakToolbarButton","IconStylingWrapper","IconTextColumnBreak16","buttonClassNames","buttonStyles"],"mappings":";;;;AAQO,MAAMA,IAAoB,CAAC,EAAE,IAAAC,QAE5B,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,MAAO,gBAAAF,EAAA,cAAAG,GAAA,EAAmB,MAAM,gBAAAH,EAAA,cAACI,OAAsB,GAAI;AAAA,IAC3D,YAAYC;AAAA,IACZ,QAAQC;AAAA,EAAA;AAAA,CAEhB;"}
+{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ColumnBreakPlugin/ColumnBreakButton/index.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { IconTextColumnBreak16 } from '@foundation/Icon/Generated';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles, getButtonClassNames } from '../../helper';\nimport { PluginButtonProps } from '../../types';\nimport { ColumnBreakToolbarButton } from './ColumnBreakToolbarButton';\n\nexport const ColumnBreakButton = ({ id }: PluginButtonProps) => {\n    return (\n        <ButtonWrapper id={id}>\n            <ColumnBreakToolbarButton\n                icon={<IconStylingWrapper icon={<IconTextColumnBreak16 />} />}\n                classNames={getButtonClassNames()}\n                styles={buttonStyles}\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["ColumnBreakButton","id","React","ButtonWrapper","ColumnBreakToolbarButton","IconStylingWrapper","IconTextColumnBreak16","getButtonClassNames","buttonStyles"],"mappings":";;;;AAQO,MAAMA,IAAoB,CAAC,EAAE,IAAAC,QAE5B,gBAAAC,EAAA,cAACC,KAAc,IAAAF,EACX,GAAA,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,MAAO,gBAAAF,EAAA,cAAAG,GAAA,EAAmB,MAAM,gBAAAH,EAAA,cAACI,OAAsB,GAAI;AAAA,IAC3D,YAAYC,EAAoB;AAAA,IAChC,QAAQC;AAAA,EAAA;AAAA,CAEhB;"}

package/dist/components/RichTextEditor/Plugins/EmojiPlugin/EmojiButton.es.js

@@ -1,15 +1,15 @@
-import o from "react";
+import e from "react";
 import { EmojiToolbarDropdown as t, KEY_EMOJI as r } from "@udecode/plate";
-import { ButtonWrapper as m, IconStylingWrapper as n, buttonStyles as i, buttonClassNames as p } from "../helper.es.js";
+import { ButtonWrapper as m, IconStylingWrapper as n, buttonStyles as i, getButtonClassNames as p } from "../helper.es.js";
 import a from "../../../../foundation/Icon/Generated/IconFaceHappy16.es.js";
 import { EmojiPicker as c } from "./EmojiPicker/EmojiPicker.es.js";
-const y = ({ id: e }) => /* @__PURE__ */ o.createElement(m, { id: e }, /* @__PURE__ */ o.createElement(
+const y = ({ id: o }) => /* @__PURE__ */ e.createElement(m, { id: o }, /* @__PURE__ */ e.createElement(
   t,
   {
     pluginKey: r,
-    icon: /* @__PURE__ */ o.createElement(n, { icon: /* @__PURE__ */ o.createElement(a, null) }),
+    icon: /* @__PURE__ */ e.createElement(n, { icon: /* @__PURE__ */ e.createElement(a, null) }),
     styles: i,
-    classNames: p,
+    classNames: p(),
     EmojiPickerComponent: c
   }
 ));

package/dist/components/RichTextEditor/Plugins/EmojiPlugin/EmojiButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiButton.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/EmojiPlugin/EmojiButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { EmojiToolbarDropdown, KEY_EMOJI } from '@udecode/plate';\nimport { IconFaceHappy16 } from '@foundation/Icon/Generated';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../helper';\nimport { PluginButtonProps } from '../types';\nimport { EmojiPicker } from './EmojiPicker';\n\nexport const EmojiButton = ({ id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <EmojiToolbarDropdown\n            pluginKey={KEY_EMOJI}\n            icon={<IconStylingWrapper icon={<IconFaceHappy16 />} />}\n            styles={buttonStyles}\n            classNames={buttonClassNames}\n            EmojiPickerComponent={EmojiPicker}\n        />\n    </ButtonWrapper>\n);\n"],"names":["EmojiButton","id","React","ButtonWrapper","EmojiToolbarDropdown","KEY_EMOJI","IconStylingWrapper","IconFaceHappy16","buttonStyles","buttonClassNames","EmojiPicker"],"mappings":";;;;;AASO,MAAMA,IAAc,CAAC,EAAE,IAAAC,QAC1B,gBAAAC,EAAA,cAACC,KAAc,IAAAF,KACX,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,WAAWC;AAAA,IACX,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAAgB,GAAI;AAAA,IACrD,QAAQC;AAAA,IACR,YAAYC;AAAA,IACZ,sBAAsBC;AAAA,EAAA;AAC1B,CACJ;"}
+{"version":3,"file":"EmojiButton.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/EmojiPlugin/EmojiButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { EmojiToolbarDropdown, KEY_EMOJI } from '@udecode/plate';\nimport { IconFaceHappy16 } from '@foundation/Icon/Generated';\nimport { ButtonWrapper, IconStylingWrapper, buttonStyles, getButtonClassNames } from '../helper';\nimport { PluginButtonProps } from '../types';\nimport { EmojiPicker } from './EmojiPicker';\n\nexport const EmojiButton = ({ id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <EmojiToolbarDropdown\n            pluginKey={KEY_EMOJI}\n            icon={<IconStylingWrapper icon={<IconFaceHappy16 />} />}\n            styles={buttonStyles}\n            classNames={getButtonClassNames()}\n            EmojiPickerComponent={EmojiPicker}\n        />\n    </ButtonWrapper>\n);\n"],"names":["EmojiButton","id","React","ButtonWrapper","EmojiToolbarDropdown","KEY_EMOJI","IconStylingWrapper","IconFaceHappy16","buttonStyles","getButtonClassNames","EmojiPicker"],"mappings":";;;;;AASO,MAAMA,IAAc,CAAC,EAAE,IAAAC,QAC1B,gBAAAC,EAAA,cAACC,KAAc,IAAAF,KACX,gBAAAC,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,WAAWC;AAAA,IACX,MAAO,gBAAAH,EAAA,cAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAAA,cAACK,OAAgB,GAAI;AAAA,IACrD,QAAQC;AAAA,IACR,YAAYC,EAAoB;AAAA,IAChC,sBAAsBC;AAAA,EAAA;AAC1B,CACJ;"}