@choco-vanille/ui 1.6.0 → 1.7.0

package/dist/components/forms/rich-text-editor/components/lists-group/ListsGroup.js

@@ -1,27 +1,29 @@
-import { jsx as e, jsxs as n, Fragment as f } from "react/jsx-runtime";
-import s from "../../../../actions/icon-button/IconButton.js";
+import { jsx as e, jsxs as s, Fragment as L } from "react/jsx-runtime";
+import l from "../../../../actions/icon-button/IconButton.js";
 import "../../../../actions/icon-button/styles/IconButton.css.js";
 import a from "../../../../overlay/tooltip/Tooltip.js";
 import "../../../../overlay/tooltip/components/tooltip-provider/TooltipProvider.js";
-import '../../../../../ui-kit30.css';import '../../../../../ui-kit.css';/* empty css                                               */
+import '../../../../../ui-kit50.css';import '../../../../../ui-kit.css';/* empty css                                               */
 /* empty css                                                            */
 import "../../../../overlay/dropdown-menu/index.js";
-import { useState as g } from "react";
-import { useRichTextEditorContext as b } from "../../context/RichTextEditor.context.js";
-import { LISTS_GROUP_STYLES as L } from "./styles/ListsGroup.css.js";
-import o from "../../../../overlay/dropdown-menu/DropdownMenu.js";
-const h = ({ presentation: u = "menu" }) => {
-  const { editor: i, disabled: r, labels: t } = b(), [c, d] = g(!1);
-  if (!i)
+import { useState as b } from "react";
+import { useRichTextEditorContext as h } from "../../context/RichTextEditor.context.js";
+import c from "../../../../../resources/asset/ListIcon.svg.js";
+import u from "../../../../../resources/asset/ListOrderedIcon.svg.js";
+import { LISTS_GROUP_STYLES as v } from "./styles/ListsGroup.css.js";
+import i from "../../../../overlay/dropdown-menu/DropdownMenu.js";
+const O = ({ presentation: m = "menu" }) => {
+  const { editor: o, disabled: r, labels: t } = h(), [p, d] = b(!1);
+  if (!o)
     return null;
-  const p = i.isActive("bulletList"), m = i.isActive("orderedList");
+  const f = o.isActive("bulletList"), g = o.isActive("orderedList");
   return /* @__PURE__ */ e(
     "div",
     {
-      className: L.root,
+      className: v.root,
       role: "group",
       "aria-label": t.listsGroup,
-      children: u === "inline" ? /* @__PURE__ */ n(f, { children: [
+      children: m === "inline" ? /* @__PURE__ */ s(L, { children: [
         /* @__PURE__ */ e(
           a,
           {
@@ -30,17 +32,17 @@ const h = ({ presentation: u = "menu" }) => {
             openOnFocus: !1,
             position: "top",
             children: /* @__PURE__ */ e(
-              s,
+              l,
               {
                 type: "button",
-                icon: "lucide:list",
+                icon: c,
                 "aria-label": t.bulletedList,
                 variant: "ghost",
                 color: "primary",
                 size: "sm",
                 disabled: r,
-                onMouseDown: (l) => l.preventDefault(),
-                onClick: () => i.chain().focus().toggleBulletList().run()
+                onMouseDown: (n) => n.preventDefault(),
+                onClick: () => o.chain().focus().toggleBulletList().run()
               }
             )
           }
@@ -53,26 +55,26 @@ const h = ({ presentation: u = "menu" }) => {
             openOnFocus: !1,
             position: "top",
             children: /* @__PURE__ */ e(
-              s,
+              l,
               {
                 type: "button",
-                icon: "lucide:list-ordered",
+                icon: u,
                 "aria-label": t.numberedList,
                 variant: "ghost",
                 color: "primary",
                 size: "sm",
                 disabled: r,
-                onMouseDown: (l) => l.preventDefault(),
-                onClick: () => i.chain().focus().toggleOrderedList().run()
+                onMouseDown: (n) => n.preventDefault(),
+                onClick: () => o.chain().focus().toggleOrderedList().run()
               }
             )
           }
         )
-      ] }) : /* @__PURE__ */ n(
-        o,
+      ] }) : /* @__PURE__ */ s(
+        i,
         {
           modal: !1,
-          open: c,
+          open: p,
           onOpenChange: d,
           children: [
             /* @__PURE__ */ e(
@@ -82,38 +84,38 @@ const h = ({ presentation: u = "menu" }) => {
                 delayDuration: 700,
                 openOnFocus: !1,
                 position: "top",
-                children: /* @__PURE__ */ e(o.Trigger, { children: /* @__PURE__ */ e(
-                  s,
+                children: /* @__PURE__ */ e(i.Trigger, { children: /* @__PURE__ */ e(
+                  l,
                   {
                     type: "button",
-                    icon: "lucide:list",
+                    icon: c,
                     "aria-label": t.listsTrigger,
                     variant: "ghost",
                     color: "primary",
                     size: "sm",
-                    active: c,
+                    active: p,
                     disabled: r
                   }
                 ) })
               }
             ),
-            /* @__PURE__ */ n(o.Content, { "aria-label": t.listOptions, children: [
+            /* @__PURE__ */ s(i.Content, { "aria-label": t.listOptions, children: [
               /* @__PURE__ */ e(
-                o.Item,
+                i.Item,
                 {
                   label: t.bulletedList,
-                  startIcon: "lucide:list",
-                  active: p,
-                  onClick: () => i.chain().focus().toggleBulletList().run()
+                  startIcon: c,
+                  active: f,
+                  onClick: () => o.chain().focus().toggleBulletList().run()
                 }
               ),
               /* @__PURE__ */ e(
-                o.Item,
+                i.Item,
                 {
                   label: t.numberedList,
-                  startIcon: "lucide:list-ordered",
-                  active: m,
-                  onClick: () => i.chain().focus().toggleOrderedList().run()
+                  startIcon: u,
+                  active: g,
+                  onClick: () => o.chain().focus().toggleOrderedList().run()
                 }
               )
             ] })
@@ -123,8 +125,8 @@ const h = ({ presentation: u = "menu" }) => {
     }
   );
 };
-h.displayName = "RichTextEditor.ListsGroup";
+O.displayName = "RichTextEditor.ListsGroup";
 export {
-  h as default
+  O as default
 };
 //# sourceMappingURL=ListsGroup.js.map

package/dist/components/forms/rich-text-editor/components/lists-group/ListsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListsGroup.js","sources":["../../../../../../src/components/forms/rich-text-editor/components/lists-group/ListsGroup.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport { Tooltip } from '@components/overlay/tooltip'\r\nimport { DropdownMenu } from '@components/overlay/dropdown-menu'\r\nimport { useState } from 'react'\r\n\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport { LISTS_GROUP_STYLES } from '@components/forms/rich-text-editor/components/lists-group/styles/ListsGroup.css.ts'\r\nimport type { ListsGroupProps } from '@components/forms/rich-text-editor/components/lists-group/types/ListsGroup.props.ts'\r\n\r\n/**\r\n * Toolbar group for list commands: bulleted and numbered lists. Use\r\n * `presentation=\"inline\"` for individual icon buttons or `\"menu\"` (default)\r\n * for a dropdown trigger.\r\n */\r\nconst ListsGroup = ({ presentation = 'menu' }: ListsGroupProps) => {\r\n    const { editor, disabled, labels } = useRichTextEditorContext()\r\n    const [listsOpen, setListsOpen] = useState(false)\r\n\r\n    if (!editor) {\r\n        return null\r\n    }\r\n\r\n    const isBulletList = editor.isActive('bulletList')\r\n    const isOrderedList = editor.isActive('orderedList')\r\n\r\n    return (\r\n        <div\r\n            className={LISTS_GROUP_STYLES.root}\r\n            role={'group'}\r\n            aria-label={labels.listsGroup}\r\n        >\r\n            {presentation === 'inline' ? (\r\n                <>\r\n                    <Tooltip\r\n                        content={labels.bulletedList}\r\n                        delayDuration={700}\r\n                        openOnFocus={false}\r\n                        position={'top'}\r\n                    >\r\n                        <IconButton\r\n                            type={'button'}\r\n                            icon={'lucide:list'}\r\n                            aria-label={labels.bulletedList}\r\n                            variant={'ghost'}\r\n                            color={'primary'}\r\n                            size={'sm'}\r\n                            disabled={disabled}\r\n                            onMouseDown={(event) => event.preventDefault()}\r\n                            onClick={() => editor.chain().focus().toggleBulletList().run()}\r\n                        />\r\n                    </Tooltip>\r\n                    <Tooltip\r\n                        content={labels.numberedList}\r\n                        delayDuration={700}\r\n                        openOnFocus={false}\r\n                        position={'top'}\r\n                    >\r\n                        <IconButton\r\n                            type={'button'}\r\n                            icon={'lucide:list-ordered'}\r\n                            aria-label={labels.numberedList}\r\n                            variant={'ghost'}\r\n                            color={'primary'}\r\n                            size={'sm'}\r\n                            disabled={disabled}\r\n                            onMouseDown={(event) => event.preventDefault()}\r\n                            onClick={() => editor.chain().focus().toggleOrderedList().run()}\r\n                        />\r\n                    </Tooltip>\r\n                </>\r\n            ) : (\r\n                <DropdownMenu\r\n                    modal={false}\r\n                    open={listsOpen}\r\n                    onOpenChange={setListsOpen}\r\n                >\r\n                    <Tooltip\r\n                        content={labels.listsTrigger}\r\n                        delayDuration={700}\r\n                        openOnFocus={false}\r\n                        position={'top'}\r\n                    >\r\n                        <DropdownMenu.Trigger>\r\n                            <IconButton\r\n                                type={'button'}\r\n                                icon={'lucide:list'}\r\n                                aria-label={labels.listsTrigger}\r\n                                variant={'ghost'}\r\n                                color={'primary'}\r\n                                size={'sm'}\r\n                                active={listsOpen}\r\n                                disabled={disabled}\r\n                            />\r\n                        </DropdownMenu.Trigger>\r\n                    </Tooltip>\r\n                    <DropdownMenu.Content aria-label={labels.listOptions}>\r\n                        <DropdownMenu.Item\r\n                            label={labels.bulletedList}\r\n                            startIcon={'lucide:list'}\r\n                            active={isBulletList}\r\n                            onClick={() => editor.chain().focus().toggleBulletList().run()}\r\n                        />\r\n                        <DropdownMenu.Item\r\n                            label={labels.numberedList}\r\n                            startIcon={'lucide:list-ordered'}\r\n                            active={isOrderedList}\r\n                            onClick={() => editor.chain().focus().toggleOrderedList().run()}\r\n                        />\r\n                    </DropdownMenu.Content>\r\n                </DropdownMenu>\r\n            )}\r\n        </div>\r\n    )\r\n}\r\n\r\nListsGroup.displayName = 'RichTextEditor.ListsGroup'\r\n\r\nexport default ListsGroup\r\n"],"names":["ListsGroup","presentation","editor","disabled","labels","useRichTextEditorContext","listsOpen","setListsOpen","useState","isBulletList","isOrderedList","jsx","LISTS_GROUP_STYLES","jsxs","Fragment","Tooltip","IconButton","event","DropdownMenu"],"mappings":"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"}
+{"version":3,"file":"ListsGroup.js","sources":["../../../../../../src/components/forms/rich-text-editor/components/lists-group/ListsGroup.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport { Tooltip } from '@components/overlay/tooltip'\r\nimport { DropdownMenu } from '@components/overlay/dropdown-menu'\r\nimport { useState } from 'react'\r\n\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport ListIcon from '@resources/asset/ListIcon.svg?react'\r\nimport ListOrderedIcon from '@resources/asset/ListOrderedIcon.svg?react'\r\nimport { LISTS_GROUP_STYLES } from '@components/forms/rich-text-editor/components/lists-group/styles/ListsGroup.css.ts'\r\nimport type { ListsGroupProps } from '@components/forms/rich-text-editor/components/lists-group/types/ListsGroup.props.ts'\r\n\r\n/**\r\n * Toolbar group for list commands: bulleted and numbered lists. Use\r\n * `presentation=\"inline\"` for individual icon buttons or `\"menu\"` (default)\r\n * for a dropdown trigger.\r\n */\r\nconst ListsGroup = ({ presentation = 'menu' }: ListsGroupProps) => {\r\n    const { editor, disabled, labels } = useRichTextEditorContext()\r\n    const [listsOpen, setListsOpen] = useState(false)\r\n\r\n    if (!editor) {\r\n        return null\r\n    }\r\n\r\n    const isBulletList = editor.isActive('bulletList')\r\n    const isOrderedList = editor.isActive('orderedList')\r\n\r\n    return (\r\n        <div\r\n            className={LISTS_GROUP_STYLES.root}\r\n            role={'group'}\r\n            aria-label={labels.listsGroup}\r\n        >\r\n            {presentation === 'inline' ? (\r\n                <>\r\n                    <Tooltip\r\n                        content={labels.bulletedList}\r\n                        delayDuration={700}\r\n                        openOnFocus={false}\r\n                        position={'top'}\r\n                    >\r\n                        <IconButton\r\n                            type={'button'}\r\n                            icon={ListIcon}\r\n                            aria-label={labels.bulletedList}\r\n                            variant={'ghost'}\r\n                            color={'primary'}\r\n                            size={'sm'}\r\n                            disabled={disabled}\r\n                            onMouseDown={(event) => event.preventDefault()}\r\n                            onClick={() => editor.chain().focus().toggleBulletList().run()}\r\n                        />\r\n                    </Tooltip>\r\n                    <Tooltip\r\n                        content={labels.numberedList}\r\n                        delayDuration={700}\r\n                        openOnFocus={false}\r\n                        position={'top'}\r\n                    >\r\n                        <IconButton\r\n                            type={'button'}\r\n                            icon={ListOrderedIcon}\r\n                            aria-label={labels.numberedList}\r\n                            variant={'ghost'}\r\n                            color={'primary'}\r\n                            size={'sm'}\r\n                            disabled={disabled}\r\n                            onMouseDown={(event) => event.preventDefault()}\r\n                            onClick={() => editor.chain().focus().toggleOrderedList().run()}\r\n                        />\r\n                    </Tooltip>\r\n                </>\r\n            ) : (\r\n                <DropdownMenu\r\n                    modal={false}\r\n                    open={listsOpen}\r\n                    onOpenChange={setListsOpen}\r\n                >\r\n                    <Tooltip\r\n                        content={labels.listsTrigger}\r\n                        delayDuration={700}\r\n                        openOnFocus={false}\r\n                        position={'top'}\r\n                    >\r\n                        <DropdownMenu.Trigger>\r\n                            <IconButton\r\n                                type={'button'}\r\n                                icon={ListIcon}\r\n                                aria-label={labels.listsTrigger}\r\n                                variant={'ghost'}\r\n                                color={'primary'}\r\n                                size={'sm'}\r\n                                active={listsOpen}\r\n                                disabled={disabled}\r\n                            />\r\n                        </DropdownMenu.Trigger>\r\n                    </Tooltip>\r\n                    <DropdownMenu.Content aria-label={labels.listOptions}>\r\n                        <DropdownMenu.Item\r\n                            label={labels.bulletedList}\r\n                            startIcon={ListIcon}\r\n                            active={isBulletList}\r\n                            onClick={() => editor.chain().focus().toggleBulletList().run()}\r\n                        />\r\n                        <DropdownMenu.Item\r\n                            label={labels.numberedList}\r\n                            startIcon={ListOrderedIcon}\r\n                            active={isOrderedList}\r\n                            onClick={() => editor.chain().focus().toggleOrderedList().run()}\r\n                        />\r\n                    </DropdownMenu.Content>\r\n                </DropdownMenu>\r\n            )}\r\n        </div>\r\n    )\r\n}\r\n\r\nListsGroup.displayName = 'RichTextEditor.ListsGroup'\r\n\r\nexport default ListsGroup\r\n"],"names":["ListsGroup","presentation","editor","disabled","labels","useRichTextEditorContext","listsOpen","setListsOpen","useState","isBulletList","isOrderedList","jsx","LISTS_GROUP_STYLES","jsxs","Fragment","Tooltip","IconButton","ListIcon","event","ListOrderedIcon","DropdownMenu"],"mappings":"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"}

package/dist/components/forms/rich-text-editor/components/lists-group/styles/ListsGroup.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit138.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                */var e={root:"_16yuy4e0"};exports.LISTS_GROUP_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit130.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                */var e={root:"_16yuy4e0"};exports.LISTS_GROUP_STYLES=e;
 //# sourceMappingURL=ListsGroup.css.cjs.map

package/dist/components/forms/rich-text-editor/components/lists-group/styles/ListsGroup.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit138.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit130.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                              */
 var t = { root: "_16yuy4e0" };
 export {

package/dist/components/forms/rich-text-editor/components/read-only-field/ReadOnlyField.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../../../ui-kit153.css');require('../../../../../ui-kit16.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),q=require("react"),R=require("../../../../data-display/rich-text-renderer/RichTextRenderer.cjs");;/* empty css                                                 */;/* empty css                                                                                       */const h=require("../rich-text-editor-form-field/RichTextEditorFormField.cjs");;/* empty css                                                                                 */const m=require("../../context/RichTextEditor.context.cjs"),l=q.memo(({className:d})=>{const{ariaLabel:n,ariaLabelledBy:s,error:i,helperText:o,label:t,labelId:u,helperId:c,name:a,disabled:x,renderedValue:b,editor:r}=m.useRichTextEditorContext();return r?e.jsxs(e.Fragment,{children:[e.jsx(R,{value:b,className:d,"aria-describedby":i||o?c:void 0,"aria-invalid":i?"true":void 0,"aria-label":n??t,"aria-labelledby":s??(t?u:void 0)}),a&&e.jsx(h,{name:a,value:r.isEmpty?"":JSON.stringify(r.getJSON()),disabled:x,required:!1})]}):null});l.displayName="RichTextEditor.ReadOnlyField";module.exports=l;
+"use strict";require('../../../../../ui-kit156.css');require('../../../../../ui-kit16.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),R=require("react"),q=require("../../../../data-display/rich-text-renderer/RichTextRenderer.cjs");;/* empty css                                                 */;/* empty css                                                                                       */const h=require("../rich-text-editor-form-field/RichTextEditorFormField.cjs");;/* empty css                                                                                 */const m=require("../../context/RichTextEditor.context.cjs"),l=R.memo(({className:d})=>{const{ariaLabel:n,ariaLabelledBy:s,error:i,helperText:o,label:t,labelId:u,helperId:c,name:a,disabled:x,renderedValue:b,editor:r}=m.useRichTextEditorContext();return r?e.jsxs(e.Fragment,{children:[e.jsx(q,{value:b,className:d,"aria-describedby":i||o?c:void 0,"aria-invalid":i?"true":void 0,"aria-label":n??t,"aria-labelledby":s??(t?u:void 0)}),a&&e.jsx(h,{name:a,value:r.isEmpty?"":JSON.stringify(r.getJSON()),disabled:x,required:!1})]}):null});l.displayName="RichTextEditor.ReadOnlyField";module.exports=l;
 //# sourceMappingURL=ReadOnlyField.cjs.map

package/dist/components/forms/rich-text-editor/components/read-only-field/ReadOnlyField.js

@@ -1,7 +1,7 @@
 import { jsxs as u, Fragment as f, jsx as l } from "react/jsx-runtime";
 import { memo as x } from "react";
 import c from "../../../../data-display/rich-text-renderer/RichTextRenderer.js";
-import '../../../../../ui-kit153.css';import '../../../../../ui-kit16.css';import '../../../../../ui-kit.css';/* empty css                                               */
+import '../../../../../ui-kit156.css';import '../../../../../ui-kit16.css';import '../../../../../ui-kit.css';/* empty css                                               */
 /* empty css                                                                                     */
 import y from "../rich-text-editor-form-field/RichTextEditorFormField.js";
 /* empty css                                                                               */

package/dist/components/forms/rich-text-editor/components/rich-text-editor-form-field/styles/RichTextEditorFormField.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit153.css');;/* empty css                                             */var _={root:"rsin5k0"};exports.RICH_TEXT_EDITOR_FORM_FIELD_STYLES=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit156.css');;/* empty css                                             */var _={root:"rsin5k0"};exports.RICH_TEXT_EDITOR_FORM_FIELD_STYLES=_;
 //# sourceMappingURL=RichTextEditorFormField.css.cjs.map

package/dist/components/forms/rich-text-editor/components/rich-text-editor-form-field/styles/RichTextEditorFormField.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit153.css';/* empty css                                           */
+import '../../../../../../ui-kit156.css';/* empty css                                           */
 var _ = { root: "rsin5k0" };
 export {
   _ as RICH_TEXT_EDITOR_FORM_FIELD_STYLES

package/dist/components/forms/rich-text-editor/components/rich-text-editor-label/RichTextEditorLabel.cjs

@@ -1,2 +1,2 @@
-"use strict";const d=require("react/jsx-runtime"),e=require("react"),a=require("./styles/RichTextEditorLabel.css.cjs"),n=require("../../context/RichTextEditor.context.cjs"),t=e.memo(({id:o,disabled:i,children:r})=>{const s=e.useContext(n.RichTextEditorContext),c=o??s?.labelId;return d.jsx("label",{id:c,className:a.RICH_TEXT_EDITOR_LABEL_STYLES.root,"data-disabled":i?"":void 0,children:r})});t.displayName="RichTextEditor.Label";module.exports=t;
+"use strict";const d=require("react/jsx-runtime"),e=require("react"),a=require("./styles/RichTextEditorLabel.css.cjs"),n=require("../../context/RichTextEditor.context.cjs"),t=e.memo(({id:o,disabled:i,children:s})=>{const r=e.useContext(n.RichTextEditorContext),c=o??r?.labelId;return d.jsx("label",{id:c,className:a.RICH_TEXT_EDITOR_LABEL_STYLES.root,"data-disabled":i?"":void 0,children:s})});t.displayName="RichTextEditor.Label";module.exports=t;
 //# sourceMappingURL=RichTextEditorLabel.cjs.map

package/dist/components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../../../ui-kit94.css');require('../../../../../ui-kit6.css');require('../../../../../ui-kit14.css');require('../../../../../ui-kit13.css');require('../../../../../ui-kit12.css');require('../../../../../ui-kit4.css');require('../../../../../ui-kit10.css');require('../../../../../ui-kit11.css');require('../../../../../ui-kit8.css');require('../../../../../ui-kit3.css');require('../../../../../ui-kit7.css');require('../../../../../ui-kit9.css');require('../../../../../ui-kit5.css');require('../../../../../ui-kit30.css');require('../../../../../ui-kit.css');const r=require("react/jsx-runtime"),O=require("../../../../actions/icon-button/IconButton.cjs");require("../../../../actions/icon-button/styles/IconButton.css.cjs");const f=require("../../../../overlay/tooltip/Tooltip.cjs");require("../../../../overlay/tooltip/components/tooltip-provider/TooltipProvider.cjs");;/* empty css                                                 */;/* empty css                                                              */const S=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const T=require("../../../../overlay/popover/Popover.cjs");;/* empty css                                                                   */;/* empty css                                                                    */;/* empty css                                                                            */;/* empty css                                                                         */;/* empty css                                                                          */;/* empty css                                                                       */;/* empty css                                                                        */;/* empty css                                                                          */;/* empty css                                                                           */;/* empty css                                                                         */;/* empty css                                                                          */;/* empty css                                                                          */;/* empty css                                                                                        */const C=require("../../constants/richTextColorPalettes.const.cjs"),L=require("../../context/RichTextEditor.context.cjs"),n=require("./styles/TextColorMenu.css.cjs"),R=require("../../../../../theme/contract.css.cjs"),c=require("react"),x=()=>{const d=c.useRef([]),[E,_]=c.useState(!1),{editor:u,disabled:m,labels:l}=L.useRichTextEditorContext(),h=c.useCallback((e,o)=>{d.current[e*3+o]?.focus()},[]),p=c.useCallback((e,o,s)=>{let t=o,i=s;if(e.key==="ArrowRight")t=Math.min(o+1,C.RICH_TEXT_COLOR_PALETTES.length-1);else if(e.key==="ArrowLeft")t=Math.max(o-1,0);else if(e.key==="ArrowDown")i=Math.min(s+1,2);else if(e.key==="ArrowUp")i=Math.max(s-1,0);else if(e.key==="Home")t=0;else if(e.key==="End")t=C.RICH_TEXT_COLOR_PALETTES.length-1;else return;e.preventDefault(),h(t,i)},[h]);if(!u)return null;const q=u.getAttributes("textStyle").color??R.vars.editorColors.neutral.dark;return r.jsxs(T,{open:E,onOpenChange:_,children:[r.jsx(f,{content:l.textColorTrigger,delayDuration:700,openOnFocus:!1,position:"top",children:r.jsx(T.Trigger,{children:r.jsx(O,{type:"button","aria-label":l.textColorTrigger,variant:"ghost",color:"primary",size:"sm",active:E,disabled:m,onMouseDown:e=>e.preventDefault(),children:r.jsx("span",{className:n.TEXT_COLOR_MENU_STYLES.selectedColor,style:{backgroundColor:q}})})})}),r.jsx(T.Content,{"aria-label":l.textColorPalette,side:"bottom",align:"start",children:r.jsx("div",{className:n.TEXT_COLOR_MENU_STYLES.colorPicker,children:r.jsx("div",{className:n.TEXT_COLOR_MENU_STYLES.paletteGrid,children:C.RICH_TEXT_COLOR_PALETTES.map((e,o)=>r.jsx("div",{className:n.TEXT_COLOR_MENU_STYLES.paletteColumn,role:"group","aria-label":l.textColorGroup(e.name),children:e.colors.map((s,t)=>{const i=q===s;return r.jsx("button",{ref:a=>{d.current[o*3+t]=a},type:"button",className:n.TEXT_COLOR_MENU_STYLES.colorSwatch,style:{backgroundColor:s},"aria-label":l.textColorSwatch(e.name,t),"aria-pressed":i,"data-selected":i||void 0,tabIndex:o===0&&t===0?0:-1,onKeyDown:a=>p(a,o,t),onMouseDown:a=>a.preventDefault(),onClick:()=>{u.chain().focus().setColor(s).run(),_(!1)},children:i&&r.jsx("span",{className:n.TEXT_COLOR_MENU_STYLES.colorCheck,children:r.jsx(S,{icon:"lucide:check",size:"sm"})})},s)})},e.name))})})})]})};x.displayName="RichTextEditor.TextAppearanceGroup.TextColorMenu";module.exports=x;
+"use strict";require('../../../../../ui-kit94.css');require('../../../../../ui-kit12.css');require('../../../../../ui-kit13.css');require('../../../../../ui-kit14.css');require('../../../../../ui-kit3.css');require('../../../../../ui-kit5.css');require('../../../../../ui-kit11.css');require('../../../../../ui-kit6.css');require('../../../../../ui-kit4.css');require('../../../../../ui-kit8.css');require('../../../../../ui-kit9.css');require('../../../../../ui-kit10.css');require('../../../../../ui-kit7.css');require('../../../../../ui-kit50.css');require('../../../../../ui-kit.css');const r=require("react/jsx-runtime"),O=require("../../../../actions/icon-button/IconButton.cjs");require("../../../../actions/icon-button/styles/IconButton.css.cjs");const f=require("../../../../overlay/tooltip/Tooltip.cjs");require("../../../../overlay/tooltip/components/tooltip-provider/TooltipProvider.cjs");;/* empty css                                                 */;/* empty css                                                              */const R=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const T=require("../../../../overlay/popover/Popover.cjs");;/* empty css                                                                   */;/* empty css                                                                    */;/* empty css                                                                            */;/* empty css                                                                         */;/* empty css                                                                          */;/* empty css                                                                       */;/* empty css                                                                        */;/* empty css                                                                          */;/* empty css                                                                           */;/* empty css                                                                         */;/* empty css                                                                          */;/* empty css                                                                          */;/* empty css                                                                                        */const C=require("../../constants/richTextColorPalettes.const.cjs"),S=require("../../context/RichTextEditor.context.cjs"),L=require("../../../../../resources/asset/CheckIcon.svg.cjs"),n=require("./styles/TextColorMenu.css.cjs"),b=require("../../../../../theme/contract.css.cjs"),c=require("react"),x=()=>{const E=c.useRef([]),[_,d]=c.useState(!1),{editor:u,disabled:m,labels:l}=S.useRichTextEditorContext(),h=c.useCallback((e,o)=>{E.current[e*3+o]?.focus()},[]),p=c.useCallback((e,o,s)=>{let t=o,i=s;if(e.key==="ArrowRight")t=Math.min(o+1,C.RICH_TEXT_COLOR_PALETTES.length-1);else if(e.key==="ArrowLeft")t=Math.max(o-1,0);else if(e.key==="ArrowDown")i=Math.min(s+1,2);else if(e.key==="ArrowUp")i=Math.max(s-1,0);else if(e.key==="Home")t=0;else if(e.key==="End")t=C.RICH_TEXT_COLOR_PALETTES.length-1;else return;e.preventDefault(),h(t,i)},[h]);if(!u)return null;const q=u.getAttributes("textStyle").color??b.vars.editorColors.neutral.dark;return r.jsxs(T,{open:_,onOpenChange:d,children:[r.jsx(f,{content:l.textColorTrigger,delayDuration:700,openOnFocus:!1,position:"top",children:r.jsx(T.Trigger,{children:r.jsx(O,{type:"button","aria-label":l.textColorTrigger,variant:"ghost",color:"primary",size:"sm",active:_,disabled:m,onMouseDown:e=>e.preventDefault(),children:r.jsx("span",{className:n.TEXT_COLOR_MENU_STYLES.selectedColor,style:{backgroundColor:q}})})})}),r.jsx(T.Content,{"aria-label":l.textColorPalette,side:"bottom",align:"start",children:r.jsx("div",{className:n.TEXT_COLOR_MENU_STYLES.colorPicker,children:r.jsx("div",{className:n.TEXT_COLOR_MENU_STYLES.paletteGrid,children:C.RICH_TEXT_COLOR_PALETTES.map((e,o)=>r.jsx("div",{className:n.TEXT_COLOR_MENU_STYLES.paletteColumn,role:"group","aria-label":l.textColorGroup(e.name),children:e.colors.map((s,t)=>{const i=q===s;return r.jsx("button",{ref:a=>{E.current[o*3+t]=a},type:"button",className:n.TEXT_COLOR_MENU_STYLES.colorSwatch,style:{backgroundColor:s},"aria-label":l.textColorSwatch(e.name,t),"aria-pressed":i,"data-selected":i||void 0,tabIndex:o===0&&t===0?0:-1,onKeyDown:a=>p(a,o,t),onMouseDown:a=>a.preventDefault(),onClick:()=>{u.chain().focus().setColor(s).run(),d(!1)},children:i&&r.jsx("span",{className:n.TEXT_COLOR_MENU_STYLES.colorCheck,children:r.jsx(R,{icon:L,size:"sm"})})},s)})},e.name))})})})]})};x.displayName="RichTextEditor.TextAppearanceGroup.TextColorMenu";module.exports=x;
 //# sourceMappingURL=TextColorMenu.cjs.map

package/dist/components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextColorMenu.cjs","sources":["../../../../../../src/components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport { Tooltip } from '@components/overlay/tooltip'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Popover } from '@components/overlay/popover'\r\nimport { RICH_TEXT_COLOR_PALETTES } from '@components/forms/rich-text-editor/constants/richTextColorPalettes.const.ts'\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport { TEXT_COLOR_MENU_STYLES } from '@components/forms/rich-text-editor/components/text-appearance-group/styles/TextColorMenu.css.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { useCallback, useRef, useState, type KeyboardEvent } from 'react'\r\n\r\n/**\r\n * Color picker toolbar control for `TextAppearanceGroup`. Opens a\r\n * `Popover` with a palette grid. Uses keyboard arrow navigation within\r\n * the color swatches and applies the selected color as a TipTap\r\n * `textStyle` mark.\r\n */\r\nconst TextColorMenu = () => {\r\n    const colorButtonRefs = useRef<Array<HTMLButtonElement | null>>([])\r\n    const [open, setOpen] = useState(false)\r\n    const { editor, disabled, labels } = useRichTextEditorContext()\r\n    const focusColor = useCallback((paletteIndex: number, colorIndex: number) => {\r\n        colorButtonRefs.current[paletteIndex * 3 + colorIndex]?.focus()\r\n    }, [])\r\n    const handleColorKeyDown = useCallback(\r\n        (\r\n            event: KeyboardEvent<HTMLButtonElement>,\r\n            paletteIndex: number,\r\n            colorIndex: number,\r\n        ) => {\r\n            let nextPaletteIndex = paletteIndex\r\n            let nextColorIndex = colorIndex\r\n            if (event.key === 'ArrowRight') {\r\n                nextPaletteIndex = Math.min(\r\n                    paletteIndex + 1,\r\n                    RICH_TEXT_COLOR_PALETTES.length - 1,\r\n                )\r\n            } else if (event.key === 'ArrowLeft') {\r\n                nextPaletteIndex = Math.max(paletteIndex - 1, 0)\r\n            } else if (event.key === 'ArrowDown') {\r\n                nextColorIndex = Math.min(colorIndex + 1, 2)\r\n            } else if (event.key === 'ArrowUp') {\r\n                nextColorIndex = Math.max(colorIndex - 1, 0)\r\n            } else if (event.key === 'Home') {\r\n                nextPaletteIndex = 0\r\n            } else if (event.key === 'End') {\r\n                nextPaletteIndex = RICH_TEXT_COLOR_PALETTES.length - 1\r\n            } else {\r\n                return\r\n            }\r\n            event.preventDefault()\r\n            focusColor(nextPaletteIndex, nextColorIndex)\r\n        },\r\n        [focusColor],\r\n    )\r\n\r\n    if (!editor) {\r\n        return null\r\n    }\r\n\r\n    const selectedColor =\r\n    editor.getAttributes('textStyle').color ?? vars.editorColors.neutral.dark\r\n    return (\r\n        <Popover\r\n            open={open}\r\n            onOpenChange={setOpen}\r\n        >\r\n            <Tooltip\r\n                content={labels.textColorTrigger}\r\n                delayDuration={700}\r\n                openOnFocus={false}\r\n                position={'top'}\r\n            >\r\n                <Popover.Trigger>\r\n                    <IconButton\r\n                        type={'button'}\r\n                        aria-label={labels.textColorTrigger}\r\n                        variant={'ghost'}\r\n                        color={'primary'}\r\n                        size={'sm'}\r\n                        active={open}\r\n                        disabled={disabled}\r\n                        onMouseDown={(event) => event.preventDefault()}\r\n                    >\r\n                        <span\r\n                            className={TEXT_COLOR_MENU_STYLES.selectedColor}\r\n                            style={{ backgroundColor: selectedColor }}\r\n                        />\r\n                    </IconButton>\r\n                </Popover.Trigger>\r\n            </Tooltip>\r\n            <Popover.Content\r\n                aria-label={labels.textColorPalette}\r\n                side={'bottom'}\r\n                align={'start'}\r\n            >\r\n                <div className={TEXT_COLOR_MENU_STYLES.colorPicker}>\r\n                    <div className={TEXT_COLOR_MENU_STYLES.paletteGrid}>\r\n                        {RICH_TEXT_COLOR_PALETTES.map((palette, paletteIndex) => (\r\n                            <div\r\n                                key={palette.name}\r\n                                className={TEXT_COLOR_MENU_STYLES.paletteColumn}\r\n                                role={'group'}\r\n                                aria-label={labels.textColorGroup(palette.name)}\r\n                            >\r\n                                {palette.colors.map((color, colorIndex) => {\r\n                                    const isSelected = selectedColor === color\r\n                                    return (\r\n                                        <button\r\n                                            key={color}\r\n                                            ref={(element) => {\r\n                                                colorButtonRefs.current[paletteIndex * 3 + colorIndex] =\r\n                          element\r\n                                            }}\r\n                                            type={'button'}\r\n                                            className={TEXT_COLOR_MENU_STYLES.colorSwatch}\r\n                                            style={{ backgroundColor: color }}\r\n                                            aria-label={labels.textColorSwatch(palette.name, colorIndex)}\r\n                                            aria-pressed={isSelected}\r\n                                            data-selected={isSelected || undefined}\r\n                                            tabIndex={paletteIndex === 0 && colorIndex === 0 ? 0 : -1}\r\n                                            onKeyDown={(event) =>\r\n                                                handleColorKeyDown(event, paletteIndex, colorIndex)\r\n                                            }\r\n                                            onMouseDown={(event) => event.preventDefault()}\r\n                                            onClick={() => {\r\n                                                editor.chain().focus().setColor(color).run()\r\n                                                setOpen(false)\r\n                                            }}\r\n                                        >\r\n                                            {isSelected && (\r\n                                                <span className={TEXT_COLOR_MENU_STYLES.colorCheck}>\r\n                                                    <Icon\r\n                                                        icon={'lucide:check'}\r\n                                                        size={'sm'}\r\n                                                    />\r\n                                                </span>\r\n                                            )}\r\n                                        </button>\r\n                                    )\r\n                                })}\r\n                            </div>\r\n                        ))}\r\n                    </div>\r\n                </div>\r\n            </Popover.Content>\r\n        </Popover>\r\n    )\r\n}\r\n\r\nTextColorMenu.displayName = 'RichTextEditor.TextAppearanceGroup.TextColorMenu'\r\n\r\nexport default TextColorMenu\r\n"],"names":["TextColorMenu","colorButtonRefs","useRef","open","setOpen","useState","editor","disabled","labels","useRichTextEditorContext","focusColor","useCallback","paletteIndex","colorIndex","handleColorKeyDown","event","nextPaletteIndex","nextColorIndex","RICH_TEXT_COLOR_PALETTES","selectedColor","vars","jsxs","Popover","jsx","Tooltip","IconButton","TEXT_COLOR_MENU_STYLES","palette","color","isSelected","element","Icon"],"mappings":"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"}
+{"version":3,"file":"TextColorMenu.cjs","sources":["../../../../../../src/components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport { Tooltip } from '@components/overlay/tooltip'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Popover } from '@components/overlay/popover'\r\nimport { RICH_TEXT_COLOR_PALETTES } from '@components/forms/rich-text-editor/constants/richTextColorPalettes.const.ts'\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport CheckIcon from '@resources/asset/CheckIcon.svg?react'\r\nimport { TEXT_COLOR_MENU_STYLES } from '@components/forms/rich-text-editor/components/text-appearance-group/styles/TextColorMenu.css.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { useCallback, useRef, useState, type KeyboardEvent } from 'react'\r\n\r\n/**\r\n * Color picker toolbar control for `TextAppearanceGroup`. Opens a\r\n * `Popover` with a palette grid. Uses keyboard arrow navigation within\r\n * the color swatches and applies the selected color as a TipTap\r\n * `textStyle` mark.\r\n */\r\nconst TextColorMenu = () => {\r\n    const colorButtonRefs = useRef<Array<HTMLButtonElement | null>>([])\r\n    const [open, setOpen] = useState(false)\r\n    const { editor, disabled, labels } = useRichTextEditorContext()\r\n    const focusColor = useCallback((paletteIndex: number, colorIndex: number) => {\r\n        colorButtonRefs.current[paletteIndex * 3 + colorIndex]?.focus()\r\n    }, [])\r\n    const handleColorKeyDown = useCallback(\r\n        (\r\n            event: KeyboardEvent<HTMLButtonElement>,\r\n            paletteIndex: number,\r\n            colorIndex: number,\r\n        ) => {\r\n            let nextPaletteIndex = paletteIndex\r\n            let nextColorIndex = colorIndex\r\n            if (event.key === 'ArrowRight') {\r\n                nextPaletteIndex = Math.min(\r\n                    paletteIndex + 1,\r\n                    RICH_TEXT_COLOR_PALETTES.length - 1,\r\n                )\r\n            } else if (event.key === 'ArrowLeft') {\r\n                nextPaletteIndex = Math.max(paletteIndex - 1, 0)\r\n            } else if (event.key === 'ArrowDown') {\r\n                nextColorIndex = Math.min(colorIndex + 1, 2)\r\n            } else if (event.key === 'ArrowUp') {\r\n                nextColorIndex = Math.max(colorIndex - 1, 0)\r\n            } else if (event.key === 'Home') {\r\n                nextPaletteIndex = 0\r\n            } else if (event.key === 'End') {\r\n                nextPaletteIndex = RICH_TEXT_COLOR_PALETTES.length - 1\r\n            } else {\r\n                return\r\n            }\r\n            event.preventDefault()\r\n            focusColor(nextPaletteIndex, nextColorIndex)\r\n        },\r\n        [focusColor],\r\n    )\r\n\r\n    if (!editor) {\r\n        return null\r\n    }\r\n\r\n    const selectedColor =\r\n    editor.getAttributes('textStyle').color ?? vars.editorColors.neutral.dark\r\n    return (\r\n        <Popover\r\n            open={open}\r\n            onOpenChange={setOpen}\r\n        >\r\n            <Tooltip\r\n                content={labels.textColorTrigger}\r\n                delayDuration={700}\r\n                openOnFocus={false}\r\n                position={'top'}\r\n            >\r\n                <Popover.Trigger>\r\n                    <IconButton\r\n                        type={'button'}\r\n                        aria-label={labels.textColorTrigger}\r\n                        variant={'ghost'}\r\n                        color={'primary'}\r\n                        size={'sm'}\r\n                        active={open}\r\n                        disabled={disabled}\r\n                        onMouseDown={(event) => event.preventDefault()}\r\n                    >\r\n                        <span\r\n                            className={TEXT_COLOR_MENU_STYLES.selectedColor}\r\n                            style={{ backgroundColor: selectedColor }}\r\n                        />\r\n                    </IconButton>\r\n                </Popover.Trigger>\r\n            </Tooltip>\r\n            <Popover.Content\r\n                aria-label={labels.textColorPalette}\r\n                side={'bottom'}\r\n                align={'start'}\r\n            >\r\n                <div className={TEXT_COLOR_MENU_STYLES.colorPicker}>\r\n                    <div className={TEXT_COLOR_MENU_STYLES.paletteGrid}>\r\n                        {RICH_TEXT_COLOR_PALETTES.map((palette, paletteIndex) => (\r\n                            <div\r\n                                key={palette.name}\r\n                                className={TEXT_COLOR_MENU_STYLES.paletteColumn}\r\n                                role={'group'}\r\n                                aria-label={labels.textColorGroup(palette.name)}\r\n                            >\r\n                                {palette.colors.map((color, colorIndex) => {\r\n                                    const isSelected = selectedColor === color\r\n                                    return (\r\n                                        <button\r\n                                            key={color}\r\n                                            ref={(element) => {\r\n                                                colorButtonRefs.current[paletteIndex * 3 + colorIndex] =\r\n                          element\r\n                                            }}\r\n                                            type={'button'}\r\n                                            className={TEXT_COLOR_MENU_STYLES.colorSwatch}\r\n                                            style={{ backgroundColor: color }}\r\n                                            aria-label={labels.textColorSwatch(palette.name, colorIndex)}\r\n                                            aria-pressed={isSelected}\r\n                                            data-selected={isSelected || undefined}\r\n                                            tabIndex={paletteIndex === 0 && colorIndex === 0 ? 0 : -1}\r\n                                            onKeyDown={(event) =>\r\n                                                handleColorKeyDown(event, paletteIndex, colorIndex)\r\n                                            }\r\n                                            onMouseDown={(event) => event.preventDefault()}\r\n                                            onClick={() => {\r\n                                                editor.chain().focus().setColor(color).run()\r\n                                                setOpen(false)\r\n                                            }}\r\n                                        >\r\n                                            {isSelected && (\r\n                                                <span className={TEXT_COLOR_MENU_STYLES.colorCheck}>\r\n                                                    <Icon\r\n                                                        icon={CheckIcon}\r\n                                                        size={'sm'}\r\n                                                    />\r\n                                                </span>\r\n                                            )}\r\n                                        </button>\r\n                                    )\r\n                                })}\r\n                            </div>\r\n                        ))}\r\n                    </div>\r\n                </div>\r\n            </Popover.Content>\r\n        </Popover>\r\n    )\r\n}\r\n\r\nTextColorMenu.displayName = 'RichTextEditor.TextAppearanceGroup.TextColorMenu'\r\n\r\nexport default TextColorMenu\r\n"],"names":["TextColorMenu","colorButtonRefs","useRef","open","setOpen","useState","editor","disabled","labels","useRichTextEditorContext","focusColor","useCallback","paletteIndex","colorIndex","handleColorKeyDown","event","nextPaletteIndex","nextColorIndex","RICH_TEXT_COLOR_PALETTES","selectedColor","vars","jsxs","Popover","jsx","Tooltip","IconButton","TEXT_COLOR_MENU_STYLES","palette","color","isSelected","element","Icon","CheckIcon"],"mappings":"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"}

package/dist/components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.js

@@ -1,9 +1,9 @@
-import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
 import k from "../../../../actions/icon-button/IconButton.js";
 import "../../../../actions/icon-button/styles/IconButton.css.js";
 import x from "../../../../overlay/tooltip/Tooltip.js";
 import "../../../../overlay/tooltip/components/tooltip-provider/TooltipProvider.js";
-import '../../../../../ui-kit94.css';import '../../../../../ui-kit6.css';import '../../../../../ui-kit14.css';import '../../../../../ui-kit13.css';import '../../../../../ui-kit12.css';import '../../../../../ui-kit4.css';import '../../../../../ui-kit10.css';import '../../../../../ui-kit11.css';import '../../../../../ui-kit8.css';import '../../../../../ui-kit3.css';import '../../../../../ui-kit7.css';import '../../../../../ui-kit9.css';import '../../../../../ui-kit5.css';import '../../../../../ui-kit30.css';import '../../../../../ui-kit.css';/* empty css                                               */
+import '../../../../../ui-kit94.css';import '../../../../../ui-kit12.css';import '../../../../../ui-kit13.css';import '../../../../../ui-kit14.css';import '../../../../../ui-kit3.css';import '../../../../../ui-kit5.css';import '../../../../../ui-kit11.css';import '../../../../../ui-kit6.css';import '../../../../../ui-kit4.css';import '../../../../../ui-kit8.css';import '../../../../../ui-kit9.css';import '../../../../../ui-kit10.css';import '../../../../../ui-kit7.css';import '../../../../../ui-kit50.css';import '../../../../../ui-kit.css';/* empty css                                               */
 /* empty css                                                            */
 import w from "../../../../foundation/icon/Icon.js";
 import "../../../../foundation/icon/styles/Icon.css.js";
@@ -23,53 +23,54 @@ import c from "../../../../overlay/popover/Popover.js";
 /* empty css                                                                                      */
 import { RICH_TEXT_COLOR_PALETTES as p } from "../../constants/richTextColorPalettes.const.js";
 import { useRichTextEditorContext as D } from "../../context/RichTextEditor.context.js";
+import E from "../../../../../resources/asset/CheckIcon.svg.js";
 import { TEXT_COLOR_MENU_STYLES as a } from "./styles/TextColorMenu.css.js";
-import { vars as E } from "../../../../../theme/contract.css.js";
-import { useRef as M, useState as N, useCallback as g } from "react";
+import { vars as M } from "../../../../../theme/contract.css.js";
+import { useRef as S, useState as N, useCallback as g } from "react";
 const R = () => {
-  const u = M([]), [d, f] = N(!1), { editor: m, disabled: y, labels: n } = D(), h = g((o, t) => {
+  const u = S([]), [f, d] = N(!1), { editor: m, disabled: y, labels: n } = D(), h = g((o, t) => {
     u.current[o * 3 + t]?.focus();
   }, []), T = g(
     (o, t, i) => {
-      let r = t, l = i;
+      let e = t, l = i;
       if (o.key === "ArrowRight")
-        r = Math.min(
+        e = Math.min(
           t + 1,
           p.length - 1
         );
       else if (o.key === "ArrowLeft")
-        r = Math.max(t - 1, 0);
+        e = Math.max(t - 1, 0);
       else if (o.key === "ArrowDown")
         l = Math.min(i + 1, 2);
       else if (o.key === "ArrowUp")
         l = Math.max(i - 1, 0);
       else if (o.key === "Home")
-        r = 0;
+        e = 0;
       else if (o.key === "End")
-        r = p.length - 1;
+        e = p.length - 1;
       else
         return;
-      o.preventDefault(), h(r, l);
+      o.preventDefault(), h(e, l);
     },
     [h]
   );
   if (!m)
     return null;
-  const C = m.getAttributes("textStyle").color ?? E.editorColors.neutral.dark;
+  const C = m.getAttributes("textStyle").color ?? M.editorColors.neutral.dark;
   return /* @__PURE__ */ b(
     c,
     {
-      open: d,
-      onOpenChange: f,
+      open: f,
+      onOpenChange: d,
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r(
           x,
           {
             content: n.textColorTrigger,
             delayDuration: 700,
             openOnFocus: !1,
             position: "top",
-            children: /* @__PURE__ */ e(c.Trigger, { children: /* @__PURE__ */ e(
+            children: /* @__PURE__ */ r(c.Trigger, { children: /* @__PURE__ */ r(
               k,
               {
                 type: "button",
@@ -77,10 +78,10 @@ const R = () => {
                 variant: "ghost",
                 color: "primary",
                 size: "sm",
-                active: d,
+                active: f,
                 disabled: y,
                 onMouseDown: (o) => o.preventDefault(),
-                children: /* @__PURE__ */ e(
+                children: /* @__PURE__ */ r(
                   "span",
                   {
                     className: a.selectedColor,
@@ -91,42 +92,42 @@ const R = () => {
             ) })
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r(
           c.Content,
           {
             "aria-label": n.textColorPalette,
             side: "bottom",
             align: "start",
-            children: /* @__PURE__ */ e("div", { className: a.colorPicker, children: /* @__PURE__ */ e("div", { className: a.paletteGrid, children: p.map((o, t) => /* @__PURE__ */ e(
+            children: /* @__PURE__ */ r("div", { className: a.colorPicker, children: /* @__PURE__ */ r("div", { className: a.paletteGrid, children: p.map((o, t) => /* @__PURE__ */ r(
               "div",
               {
                 className: a.paletteColumn,
                 role: "group",
                 "aria-label": n.textColorGroup(o.name),
-                children: o.colors.map((i, r) => {
+                children: o.colors.map((i, e) => {
                   const l = C === i;
-                  return /* @__PURE__ */ e(
+                  return /* @__PURE__ */ r(
                     "button",
                     {
                       ref: (s) => {
-                        u.current[t * 3 + r] = s;
+                        u.current[t * 3 + e] = s;
                       },
                       type: "button",
                       className: a.colorSwatch,
                       style: { backgroundColor: i },
-                      "aria-label": n.textColorSwatch(o.name, r),
+                      "aria-label": n.textColorSwatch(o.name, e),
                       "aria-pressed": l,
                       "data-selected": l || void 0,
-                      tabIndex: t === 0 && r === 0 ? 0 : -1,
-                      onKeyDown: (s) => T(s, t, r),
+                      tabIndex: t === 0 && e === 0 ? 0 : -1,
+                      onKeyDown: (s) => T(s, t, e),
                       onMouseDown: (s) => s.preventDefault(),
                       onClick: () => {
-                        m.chain().focus().setColor(i).run(), f(!1);
+                        m.chain().focus().setColor(i).run(), d(!1);
                       },
-                      children: l && /* @__PURE__ */ e("span", { className: a.colorCheck, children: /* @__PURE__ */ e(
+                      children: l && /* @__PURE__ */ r("span", { className: a.colorCheck, children: /* @__PURE__ */ r(
                         w,
                         {
-                          icon: "lucide:check",
+                          icon: E,
                           size: "sm"
                         }
                       ) })

package/dist/components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextColorMenu.js","sources":["../../../../../../src/components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport { Tooltip } from '@components/overlay/tooltip'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Popover } from '@components/overlay/popover'\r\nimport { RICH_TEXT_COLOR_PALETTES } from '@components/forms/rich-text-editor/constants/richTextColorPalettes.const.ts'\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport { TEXT_COLOR_MENU_STYLES } from '@components/forms/rich-text-editor/components/text-appearance-group/styles/TextColorMenu.css.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { useCallback, useRef, useState, type KeyboardEvent } from 'react'\r\n\r\n/**\r\n * Color picker toolbar control for `TextAppearanceGroup`. Opens a\r\n * `Popover` with a palette grid. Uses keyboard arrow navigation within\r\n * the color swatches and applies the selected color as a TipTap\r\n * `textStyle` mark.\r\n */\r\nconst TextColorMenu = () => {\r\n    const colorButtonRefs = useRef<Array<HTMLButtonElement | null>>([])\r\n    const [open, setOpen] = useState(false)\r\n    const { editor, disabled, labels } = useRichTextEditorContext()\r\n    const focusColor = useCallback((paletteIndex: number, colorIndex: number) => {\r\n        colorButtonRefs.current[paletteIndex * 3 + colorIndex]?.focus()\r\n    }, [])\r\n    const handleColorKeyDown = useCallback(\r\n        (\r\n            event: KeyboardEvent<HTMLButtonElement>,\r\n            paletteIndex: number,\r\n            colorIndex: number,\r\n        ) => {\r\n            let nextPaletteIndex = paletteIndex\r\n            let nextColorIndex = colorIndex\r\n            if (event.key === 'ArrowRight') {\r\n                nextPaletteIndex = Math.min(\r\n                    paletteIndex + 1,\r\n                    RICH_TEXT_COLOR_PALETTES.length - 1,\r\n                )\r\n            } else if (event.key === 'ArrowLeft') {\r\n                nextPaletteIndex = Math.max(paletteIndex - 1, 0)\r\n            } else if (event.key === 'ArrowDown') {\r\n                nextColorIndex = Math.min(colorIndex + 1, 2)\r\n            } else if (event.key === 'ArrowUp') {\r\n                nextColorIndex = Math.max(colorIndex - 1, 0)\r\n            } else if (event.key === 'Home') {\r\n                nextPaletteIndex = 0\r\n            } else if (event.key === 'End') {\r\n                nextPaletteIndex = RICH_TEXT_COLOR_PALETTES.length - 1\r\n            } else {\r\n                return\r\n            }\r\n            event.preventDefault()\r\n            focusColor(nextPaletteIndex, nextColorIndex)\r\n        },\r\n        [focusColor],\r\n    )\r\n\r\n    if (!editor) {\r\n        return null\r\n    }\r\n\r\n    const selectedColor =\r\n    editor.getAttributes('textStyle').color ?? vars.editorColors.neutral.dark\r\n    return (\r\n        <Popover\r\n            open={open}\r\n            onOpenChange={setOpen}\r\n        >\r\n            <Tooltip\r\n                content={labels.textColorTrigger}\r\n                delayDuration={700}\r\n                openOnFocus={false}\r\n                position={'top'}\r\n            >\r\n                <Popover.Trigger>\r\n                    <IconButton\r\n                        type={'button'}\r\n                        aria-label={labels.textColorTrigger}\r\n                        variant={'ghost'}\r\n                        color={'primary'}\r\n                        size={'sm'}\r\n                        active={open}\r\n                        disabled={disabled}\r\n                        onMouseDown={(event) => event.preventDefault()}\r\n                    >\r\n                        <span\r\n                            className={TEXT_COLOR_MENU_STYLES.selectedColor}\r\n                            style={{ backgroundColor: selectedColor }}\r\n                        />\r\n                    </IconButton>\r\n                </Popover.Trigger>\r\n            </Tooltip>\r\n            <Popover.Content\r\n                aria-label={labels.textColorPalette}\r\n                side={'bottom'}\r\n                align={'start'}\r\n            >\r\n                <div className={TEXT_COLOR_MENU_STYLES.colorPicker}>\r\n                    <div className={TEXT_COLOR_MENU_STYLES.paletteGrid}>\r\n                        {RICH_TEXT_COLOR_PALETTES.map((palette, paletteIndex) => (\r\n                            <div\r\n                                key={palette.name}\r\n                                className={TEXT_COLOR_MENU_STYLES.paletteColumn}\r\n                                role={'group'}\r\n                                aria-label={labels.textColorGroup(palette.name)}\r\n                            >\r\n                                {palette.colors.map((color, colorIndex) => {\r\n                                    const isSelected = selectedColor === color\r\n                                    return (\r\n                                        <button\r\n                                            key={color}\r\n                                            ref={(element) => {\r\n                                                colorButtonRefs.current[paletteIndex * 3 + colorIndex] =\r\n                          element\r\n                                            }}\r\n                                            type={'button'}\r\n                                            className={TEXT_COLOR_MENU_STYLES.colorSwatch}\r\n                                            style={{ backgroundColor: color }}\r\n                                            aria-label={labels.textColorSwatch(palette.name, colorIndex)}\r\n                                            aria-pressed={isSelected}\r\n                                            data-selected={isSelected || undefined}\r\n                                            tabIndex={paletteIndex === 0 && colorIndex === 0 ? 0 : -1}\r\n                                            onKeyDown={(event) =>\r\n                                                handleColorKeyDown(event, paletteIndex, colorIndex)\r\n                                            }\r\n                                            onMouseDown={(event) => event.preventDefault()}\r\n                                            onClick={() => {\r\n                                                editor.chain().focus().setColor(color).run()\r\n                                                setOpen(false)\r\n                                            }}\r\n                                        >\r\n                                            {isSelected && (\r\n                                                <span className={TEXT_COLOR_MENU_STYLES.colorCheck}>\r\n                                                    <Icon\r\n                                                        icon={'lucide:check'}\r\n                                                        size={'sm'}\r\n                                                    />\r\n                                                </span>\r\n                                            )}\r\n                                        </button>\r\n                                    )\r\n                                })}\r\n                            </div>\r\n                        ))}\r\n                    </div>\r\n                </div>\r\n            </Popover.Content>\r\n        </Popover>\r\n    )\r\n}\r\n\r\nTextColorMenu.displayName = 'RichTextEditor.TextAppearanceGroup.TextColorMenu'\r\n\r\nexport default TextColorMenu\r\n"],"names":["TextColorMenu","colorButtonRefs","useRef","open","setOpen","useState","editor","disabled","labels","useRichTextEditorContext","focusColor","useCallback","paletteIndex","colorIndex","handleColorKeyDown","event","nextPaletteIndex","nextColorIndex","RICH_TEXT_COLOR_PALETTES","selectedColor","vars","jsxs","Popover","jsx","Tooltip","IconButton","TEXT_COLOR_MENU_STYLES","palette","color","isSelected","element","Icon"],"mappings":"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"}
+{"version":3,"file":"TextColorMenu.js","sources":["../../../../../../src/components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport { Tooltip } from '@components/overlay/tooltip'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Popover } from '@components/overlay/popover'\r\nimport { RICH_TEXT_COLOR_PALETTES } from '@components/forms/rich-text-editor/constants/richTextColorPalettes.const.ts'\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport CheckIcon from '@resources/asset/CheckIcon.svg?react'\r\nimport { TEXT_COLOR_MENU_STYLES } from '@components/forms/rich-text-editor/components/text-appearance-group/styles/TextColorMenu.css.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { useCallback, useRef, useState, type KeyboardEvent } from 'react'\r\n\r\n/**\r\n * Color picker toolbar control for `TextAppearanceGroup`. Opens a\r\n * `Popover` with a palette grid. Uses keyboard arrow navigation within\r\n * the color swatches and applies the selected color as a TipTap\r\n * `textStyle` mark.\r\n */\r\nconst TextColorMenu = () => {\r\n    const colorButtonRefs = useRef<Array<HTMLButtonElement | null>>([])\r\n    const [open, setOpen] = useState(false)\r\n    const { editor, disabled, labels } = useRichTextEditorContext()\r\n    const focusColor = useCallback((paletteIndex: number, colorIndex: number) => {\r\n        colorButtonRefs.current[paletteIndex * 3 + colorIndex]?.focus()\r\n    }, [])\r\n    const handleColorKeyDown = useCallback(\r\n        (\r\n            event: KeyboardEvent<HTMLButtonElement>,\r\n            paletteIndex: number,\r\n            colorIndex: number,\r\n        ) => {\r\n            let nextPaletteIndex = paletteIndex\r\n            let nextColorIndex = colorIndex\r\n            if (event.key === 'ArrowRight') {\r\n                nextPaletteIndex = Math.min(\r\n                    paletteIndex + 1,\r\n                    RICH_TEXT_COLOR_PALETTES.length - 1,\r\n                )\r\n            } else if (event.key === 'ArrowLeft') {\r\n                nextPaletteIndex = Math.max(paletteIndex - 1, 0)\r\n            } else if (event.key === 'ArrowDown') {\r\n                nextColorIndex = Math.min(colorIndex + 1, 2)\r\n            } else if (event.key === 'ArrowUp') {\r\n                nextColorIndex = Math.max(colorIndex - 1, 0)\r\n            } else if (event.key === 'Home') {\r\n                nextPaletteIndex = 0\r\n            } else if (event.key === 'End') {\r\n                nextPaletteIndex = RICH_TEXT_COLOR_PALETTES.length - 1\r\n            } else {\r\n                return\r\n            }\r\n            event.preventDefault()\r\n            focusColor(nextPaletteIndex, nextColorIndex)\r\n        },\r\n        [focusColor],\r\n    )\r\n\r\n    if (!editor) {\r\n        return null\r\n    }\r\n\r\n    const selectedColor =\r\n    editor.getAttributes('textStyle').color ?? vars.editorColors.neutral.dark\r\n    return (\r\n        <Popover\r\n            open={open}\r\n            onOpenChange={setOpen}\r\n        >\r\n            <Tooltip\r\n                content={labels.textColorTrigger}\r\n                delayDuration={700}\r\n                openOnFocus={false}\r\n                position={'top'}\r\n            >\r\n                <Popover.Trigger>\r\n                    <IconButton\r\n                        type={'button'}\r\n                        aria-label={labels.textColorTrigger}\r\n                        variant={'ghost'}\r\n                        color={'primary'}\r\n                        size={'sm'}\r\n                        active={open}\r\n                        disabled={disabled}\r\n                        onMouseDown={(event) => event.preventDefault()}\r\n                    >\r\n                        <span\r\n                            className={TEXT_COLOR_MENU_STYLES.selectedColor}\r\n                            style={{ backgroundColor: selectedColor }}\r\n                        />\r\n                    </IconButton>\r\n                </Popover.Trigger>\r\n            </Tooltip>\r\n            <Popover.Content\r\n                aria-label={labels.textColorPalette}\r\n                side={'bottom'}\r\n                align={'start'}\r\n            >\r\n                <div className={TEXT_COLOR_MENU_STYLES.colorPicker}>\r\n                    <div className={TEXT_COLOR_MENU_STYLES.paletteGrid}>\r\n                        {RICH_TEXT_COLOR_PALETTES.map((palette, paletteIndex) => (\r\n                            <div\r\n                                key={palette.name}\r\n                                className={TEXT_COLOR_MENU_STYLES.paletteColumn}\r\n                                role={'group'}\r\n                                aria-label={labels.textColorGroup(palette.name)}\r\n                            >\r\n                                {palette.colors.map((color, colorIndex) => {\r\n                                    const isSelected = selectedColor === color\r\n                                    return (\r\n                                        <button\r\n                                            key={color}\r\n                                            ref={(element) => {\r\n                                                colorButtonRefs.current[paletteIndex * 3 + colorIndex] =\r\n                          element\r\n                                            }}\r\n                                            type={'button'}\r\n                                            className={TEXT_COLOR_MENU_STYLES.colorSwatch}\r\n                                            style={{ backgroundColor: color }}\r\n                                            aria-label={labels.textColorSwatch(palette.name, colorIndex)}\r\n                                            aria-pressed={isSelected}\r\n                                            data-selected={isSelected || undefined}\r\n                                            tabIndex={paletteIndex === 0 && colorIndex === 0 ? 0 : -1}\r\n                                            onKeyDown={(event) =>\r\n                                                handleColorKeyDown(event, paletteIndex, colorIndex)\r\n                                            }\r\n                                            onMouseDown={(event) => event.preventDefault()}\r\n                                            onClick={() => {\r\n                                                editor.chain().focus().setColor(color).run()\r\n                                                setOpen(false)\r\n                                            }}\r\n                                        >\r\n                                            {isSelected && (\r\n                                                <span className={TEXT_COLOR_MENU_STYLES.colorCheck}>\r\n                                                    <Icon\r\n                                                        icon={CheckIcon}\r\n                                                        size={'sm'}\r\n                                                    />\r\n                                                </span>\r\n                                            )}\r\n                                        </button>\r\n                                    )\r\n                                })}\r\n                            </div>\r\n                        ))}\r\n                    </div>\r\n                </div>\r\n            </Popover.Content>\r\n        </Popover>\r\n    )\r\n}\r\n\r\nTextColorMenu.displayName = 'RichTextEditor.TextAppearanceGroup.TextColorMenu'\r\n\r\nexport default TextColorMenu\r\n"],"names":["TextColorMenu","colorButtonRefs","useRef","open","setOpen","useState","editor","disabled","labels","useRichTextEditorContext","focusColor","useCallback","paletteIndex","colorIndex","handleColorKeyDown","event","nextPaletteIndex","nextColorIndex","RICH_TEXT_COLOR_PALETTES","selectedColor","vars","jsxs","Popover","jsx","Tooltip","IconButton","TEXT_COLOR_MENU_STYLES","palette","color","isSelected","element","Icon","CheckIcon"],"mappings":"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"}

package/dist/components/forms/rich-text-editor/components/text-appearance-group/TextSizeMenu.cjs

@@ -1,2 +1,2 @@
-"use strict";const r=require("react/jsx-runtime"),d=require("../../../../actions/button/Button.cjs");require("../../../../actions/button/styles/Button.css.cjs");require("../../constants/richTextColorPalettes.const.cjs");const e=require("../../constants/richTextFontSizes.const.cjs"),x=require("../../../../actions/icon-button/IconButton.cjs");require("../../../../actions/icon-button/styles/IconButton.css.cjs");require("../../../../overlay/dropdown-menu/index.cjs");const I=require("../../context/RichTextEditor.context.cjs"),p=require("react"),b=require("./styles/TextSizeMenu.css.cjs"),i=require("../../../../overlay/dropdown-menu/DropdownMenu.cjs"),T=({presentation:l="select"})=>{const[n,u]=p.useState(!1),{editor:s,disabled:a,labels:o}=I.useRichTextEditorContext();if(!s)return null;const _=s.getAttributes("textStyle").fontSize??e.RICH_TEXT_FONT_SIZES.md,c=Object.keys(e.RICH_TEXT_FONT_SIZES).find(t=>e.RICH_TEXT_FONT_SIZES[t]===_),S=c?e.RICH_TEXT_FONT_SIZE_LABELS[c]:e.RICH_TEXT_FONT_SIZE_LABELS.md;return r.jsxs(i,{modal:!1,open:n,onOpenChange:u,children:[r.jsx(i.Trigger,{children:l==="select"?r.jsx(d,{type:"button",label:S,endIcon:"lucide:chevron-down","aria-label":o.textSizeTrigger,variant:"ghost",color:"primary",size:"sm",className:b.TEXT_SIZE_MENU_STYLES.trigger,active:n,disabled:a}):r.jsx(x,{type:"button",icon:"lucide:text-cursor-input","aria-label":o.textSizeTrigger,variant:"ghost",color:"primary",size:"sm",active:n,disabled:a})}),r.jsx(i.Content,{"aria-label":o.textSizeOptions,side:"bottom",align:"start",width:"6rem",children:Object.keys(e.RICH_TEXT_FONT_SIZES).map(t=>r.jsx(i.Item,{label:e.RICH_TEXT_FONT_SIZE_LABELS[t],active:t===c,onMouseDown:E=>E.preventDefault(),onClick:()=>s.chain().focus().setFontSize(e.RICH_TEXT_FONT_SIZES[t]).run()},t))})]})};T.displayName="RichTextEditor.TextAppearanceGroup.TextSizeMenu";module.exports=T;
+"use strict";const r=require("react/jsx-runtime"),x=require("../../../../actions/button/Button.cjs");require("../../../../actions/button/styles/Button.css.cjs");require("../../constants/richTextColorPalettes.const.cjs");const e=require("../../constants/richTextFontSizes.const.cjs"),I=require("../../../../actions/icon-button/IconButton.cjs");require("../../../../actions/icon-button/styles/IconButton.css.cjs");require("../../../../overlay/dropdown-menu/index.cjs");const d=require("../../context/RichTextEditor.context.cjs"),p=require("../../../../../resources/asset/ChevronDownIcon.svg.cjs"),b=require("../../../../../resources/asset/TextCursorInputIcon.svg.cjs"),m=require("react"),q=require("./styles/TextSizeMenu.css.cjs"),n=require("../../../../overlay/dropdown-menu/DropdownMenu.cjs"),T=({presentation:u="select"})=>{const[i,l]=m.useState(!1),{editor:s,disabled:a,labels:o}=d.useRichTextEditorContext();if(!s)return null;const _=s.getAttributes("textStyle").fontSize??e.RICH_TEXT_FONT_SIZES.md,c=Object.keys(e.RICH_TEXT_FONT_SIZES).find(t=>e.RICH_TEXT_FONT_SIZES[t]===_),S=c?e.RICH_TEXT_FONT_SIZE_LABELS[c]:e.RICH_TEXT_FONT_SIZE_LABELS.md;return r.jsxs(n,{modal:!1,open:i,onOpenChange:l,children:[r.jsx(n.Trigger,{children:u==="select"?r.jsx(x,{type:"button",label:S,endIcon:p,"aria-label":o.textSizeTrigger,variant:"ghost",color:"primary",size:"sm",className:q.TEXT_SIZE_MENU_STYLES.trigger,active:i,disabled:a}):r.jsx(I,{type:"button",icon:b,"aria-label":o.textSizeTrigger,variant:"ghost",color:"primary",size:"sm",active:i,disabled:a})}),r.jsx(n.Content,{"aria-label":o.textSizeOptions,side:"bottom",align:"start",width:"6rem",children:Object.keys(e.RICH_TEXT_FONT_SIZES).map(t=>r.jsx(n.Item,{label:e.RICH_TEXT_FONT_SIZE_LABELS[t],active:t===c,onMouseDown:E=>E.preventDefault(),onClick:()=>s.chain().focus().setFontSize(e.RICH_TEXT_FONT_SIZES[t]).run()},t))})]})};T.displayName="RichTextEditor.TextAppearanceGroup.TextSizeMenu";module.exports=T;
 //# sourceMappingURL=TextSizeMenu.cjs.map