@choco-vanille/ui 1.1.2 → 1.3.0

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

@@ -0,0 +1,2 @@
+"use strict";const a=require("react/jsx-runtime"),c=require("react"),d=require("./styles/RichTextEditorFormField.css.cjs"),e=c.memo(({name:t,value:r,disabled:i,required:o})=>a.jsx("textarea",{name:t,value:r,disabled:i,required:o,onChange:s=>s.preventDefault(),tabIndex:-1,"aria-hidden":"true",className:d.RICH_TEXT_EDITOR_FORM_FIELD_STYLES.root}));e.displayName="RichTextEditor.FormField";module.exports=e;
+//# sourceMappingURL=RichTextEditorFormField.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditorFormField.cjs","sources":["../../../../../../src/components/forms/rich-text-editor/components/rich-text-editor-form-field/RichTextEditorFormField.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { RICH_TEXT_EDITOR_FORM_FIELD_STYLES } from '@components/forms/rich-text-editor/components/rich-text-editor-form-field/styles/RichTextEditorFormField.css.ts'\r\nimport type { RichTextEditorFormFieldProps } from '@components/forms/rich-text-editor/components/rich-text-editor-form-field/types/RichTextEditorFormField.props.ts'\r\n\r\nconst RichTextEditorFormField: FC<RichTextEditorFormFieldProps> = memo(({\r\n    name,\r\n    value,\r\n    disabled,\r\n    required,\r\n}) => (\r\n    <textarea\r\n        name={name}\r\n        value={value}\r\n        disabled={disabled}\r\n        required={required}\r\n        onChange={(event) => event.preventDefault()}\r\n        tabIndex={-1}\r\n        aria-hidden={'true'}\r\n        className={RICH_TEXT_EDITOR_FORM_FIELD_STYLES.root}\r\n    />\r\n))\r\n\r\nRichTextEditorFormField.displayName = 'RichTextEditor.FormField'\r\n\r\nexport default RichTextEditorFormField\r\n"],"names":["RichTextEditorFormField","memo","name","value","disabled","required","jsx","event","RICH_TEXT_EDITOR_FORM_FIELD_STYLES"],"mappings":"2HAKMA,EAA4DC,EAAAA,KAAK,CAAC,CACpE,KAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,CACJ,IACIC,EAAAA,IAAC,WAAA,CACG,KAAAJ,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAWE,GAAUA,EAAM,eAAA,EAC3B,SAAU,GACV,cAAa,OACb,UAAWC,EAAAA,mCAAmC,IAAA,CAClD,CACH,EAEDR,EAAwB,YAAc"}

package/dist/components/forms/rich-text-editor/components/rich-text-editor-form-field/RichTextEditorFormField.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { RichTextEditorFormFieldProps } from './types/RichTextEditorFormField.props.ts';
+declare const RichTextEditorFormField: FC<RichTextEditorFormFieldProps>;
+export default RichTextEditorFormField;

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

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import { memo as m } from "react";
+import { RICH_TEXT_EDITOR_FORM_FIELD_STYLES as d } from "./styles/RichTextEditorFormField.css.js";
+const l = m(({
+  name: e,
+  value: t,
+  disabled: o,
+  required: r
+}) => /* @__PURE__ */ i(
+  "textarea",
+  {
+    name: e,
+    value: t,
+    disabled: o,
+    required: r,
+    onChange: (a) => a.preventDefault(),
+    tabIndex: -1,
+    "aria-hidden": "true",
+    className: d.root
+  }
+));
+l.displayName = "RichTextEditor.FormField";
+export {
+  l as default
+};
+//# sourceMappingURL=RichTextEditorFormField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditorFormField.js","sources":["../../../../../../src/components/forms/rich-text-editor/components/rich-text-editor-form-field/RichTextEditorFormField.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { RICH_TEXT_EDITOR_FORM_FIELD_STYLES } from '@components/forms/rich-text-editor/components/rich-text-editor-form-field/styles/RichTextEditorFormField.css.ts'\r\nimport type { RichTextEditorFormFieldProps } from '@components/forms/rich-text-editor/components/rich-text-editor-form-field/types/RichTextEditorFormField.props.ts'\r\n\r\nconst RichTextEditorFormField: FC<RichTextEditorFormFieldProps> = memo(({\r\n    name,\r\n    value,\r\n    disabled,\r\n    required,\r\n}) => (\r\n    <textarea\r\n        name={name}\r\n        value={value}\r\n        disabled={disabled}\r\n        required={required}\r\n        onChange={(event) => event.preventDefault()}\r\n        tabIndex={-1}\r\n        aria-hidden={'true'}\r\n        className={RICH_TEXT_EDITOR_FORM_FIELD_STYLES.root}\r\n    />\r\n))\r\n\r\nRichTextEditorFormField.displayName = 'RichTextEditor.FormField'\r\n\r\nexport default RichTextEditorFormField\r\n"],"names":["RichTextEditorFormField","memo","name","value","disabled","required","jsx","event","RICH_TEXT_EDITOR_FORM_FIELD_STYLES"],"mappings":";;;AAKA,MAAMA,IAA4DC,EAAK,CAAC;AAAA,EACpE,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACJ,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,MAAAJ;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAU,CAACE,MAAUA,EAAM,eAAA;AAAA,IAC3B,UAAU;AAAA,IACV,eAAa;AAAA,IACb,WAAWC,EAAmC;AAAA,EAAA;AAClD,CACH;AAEDR,EAAwB,cAAc;"}

package/dist/components/forms/rich-text-editor/components/rich-text-editor-form-field/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RichTextEditorFormField } from './RichTextEditorFormField.tsx';
+export { RICH_TEXT_EDITOR_FORM_FIELD_STYLES } from './styles/RichTextEditorFormField.css.ts';
+export type { RichTextEditorFormFieldProps } from './types/RichTextEditorFormField.props.ts';

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* 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.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditorFormField.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,3 @@
+export declare const RICH_TEXT_EDITOR_FORM_FIELD_STYLES: {
+    root: string;
+};

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

@@ -0,0 +1,6 @@
+/* empty css                                           */
+var _ = { root: "rsin5k0" };
+export {
+  _ as RICH_TEXT_EDITOR_FORM_FIELD_STYLES
+};
+//# sourceMappingURL=RichTextEditorFormField.css.js.map

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

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

package/dist/components/forms/rich-text-editor/components/rich-text-editor-form-field/types/RichTextEditorFormField.props.d.ts

@@ -0,0 +1,6 @@
+export type RichTextEditorFormFieldProps = {
+    name: string;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+};

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

@@ -0,0 +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;
+//# sourceMappingURL=RichTextEditorLabel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditorLabel.cjs","sources":["../../../../../../src/components/forms/rich-text-editor/components/rich-text-editor-label/RichTextEditorLabel.tsx"],"sourcesContent":["import { memo, useContext, type FC } from 'react'\r\n\r\nimport { RICH_TEXT_EDITOR_LABEL_STYLES } from '@components/forms/rich-text-editor/components/rich-text-editor-label/styles/RichTextEditorLabel.css.ts'\r\nimport type { RichTextEditorLabelProps } from '@components/forms/rich-text-editor/components/rich-text-editor-label/types/RichTextEditorLabel.props.ts'\r\nimport { RichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\n\r\nconst RichTextEditorLabel: FC<RichTextEditorLabelProps> = memo(({ id, disabled, children }) => {\r\n    const context = useContext(RichTextEditorContext)\r\n    const resolvedId = id ?? context?.labelId\r\n\r\n    return (\r\n        <label\r\n            id={resolvedId}\r\n            className={RICH_TEXT_EDITOR_LABEL_STYLES.root}\r\n            data-disabled={disabled ? '' : undefined}\r\n        >\r\n            {children}\r\n        </label>\r\n    )\r\n})\r\n\r\nRichTextEditorLabel.displayName = 'RichTextEditor.Label'\r\n\r\nexport default RichTextEditorLabel\r\n"],"names":["RichTextEditorLabel","memo","id","disabled","children","context","useContext","RichTextEditorContext","resolvedId","jsx","RICH_TEXT_EDITOR_LABEL_STYLES"],"mappings":"6KAMMA,EAAoDC,EAAAA,KAAK,CAAC,CAAE,GAAAC,EAAI,SAAAC,EAAU,SAAAC,KAAe,CAC3F,MAAMC,EAAUC,EAAAA,WAAWC,uBAAqB,EAC1CC,EAAaN,GAAMG,GAAS,QAElC,OACII,EAAAA,IAAC,QAAA,CACG,GAAID,EACJ,UAAWE,EAAAA,8BAA8B,KACzC,gBAAeP,EAAW,GAAK,OAE9B,SAAAC,CAAA,CAAA,CAGb,CAAC,EAEDJ,EAAoB,YAAc"}

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { RichTextEditorLabelProps } from './types/RichTextEditorLabel.props.ts';
+declare const RichTextEditorLabel: FC<RichTextEditorLabelProps>;
+export default RichTextEditorLabel;

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

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import { memo as d, useContext as m } from "react";
+import { RICH_TEXT_EDITOR_LABEL_STYLES as l } from "./styles/RichTextEditorLabel.css.js";
+import { RichTextEditorContext as s } from "../../context/RichTextEditor.context.js";
+const c = d(({ id: t, disabled: o, children: e }) => {
+  const r = m(s), i = t ?? r?.labelId;
+  return /* @__PURE__ */ a(
+    "label",
+    {
+      id: i,
+      className: l.root,
+      "data-disabled": o ? "" : void 0,
+      children: e
+    }
+  );
+});
+c.displayName = "RichTextEditor.Label";
+export {
+  c as default
+};
+//# sourceMappingURL=RichTextEditorLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditorLabel.js","sources":["../../../../../../src/components/forms/rich-text-editor/components/rich-text-editor-label/RichTextEditorLabel.tsx"],"sourcesContent":["import { memo, useContext, type FC } from 'react'\r\n\r\nimport { RICH_TEXT_EDITOR_LABEL_STYLES } from '@components/forms/rich-text-editor/components/rich-text-editor-label/styles/RichTextEditorLabel.css.ts'\r\nimport type { RichTextEditorLabelProps } from '@components/forms/rich-text-editor/components/rich-text-editor-label/types/RichTextEditorLabel.props.ts'\r\nimport { RichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\n\r\nconst RichTextEditorLabel: FC<RichTextEditorLabelProps> = memo(({ id, disabled, children }) => {\r\n    const context = useContext(RichTextEditorContext)\r\n    const resolvedId = id ?? context?.labelId\r\n\r\n    return (\r\n        <label\r\n            id={resolvedId}\r\n            className={RICH_TEXT_EDITOR_LABEL_STYLES.root}\r\n            data-disabled={disabled ? '' : undefined}\r\n        >\r\n            {children}\r\n        </label>\r\n    )\r\n})\r\n\r\nRichTextEditorLabel.displayName = 'RichTextEditor.Label'\r\n\r\nexport default RichTextEditorLabel\r\n"],"names":["RichTextEditorLabel","memo","id","disabled","children","context","useContext","RichTextEditorContext","resolvedId","jsx","RICH_TEXT_EDITOR_LABEL_STYLES"],"mappings":";;;;AAMA,MAAMA,IAAoDC,EAAK,CAAC,EAAE,IAAAC,GAAI,UAAAC,GAAU,UAAAC,QAAe;AAC3F,QAAMC,IAAUC,EAAWC,CAAqB,GAC1CC,IAAaN,KAAMG,GAAS;AAElC,SACI,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAID;AAAA,MACJ,WAAWE,EAA8B;AAAA,MACzC,iBAAeP,IAAW,KAAK;AAAA,MAE9B,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAEDJ,EAAoB,cAAc;"}

package/dist/components/forms/rich-text-editor/components/rich-text-editor-label/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RichTextEditorLabel } from './RichTextEditorLabel.tsx';
+export { RICH_TEXT_EDITOR_LABEL_STYLES } from './styles/RichTextEditorLabel.css.ts';
+export type { RichTextEditorLabelProps } from './types/RichTextEditorLabel.props.ts';

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                         */var e={root:"_9mb6yy0"};exports.RICH_TEXT_EDITOR_LABEL_STYLES=e;
+//# sourceMappingURL=RichTextEditorLabel.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditorLabel.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/rich-text-editor/components/rich-text-editor-label/styles/RichTextEditorLabel.css.d.ts

@@ -0,0 +1,3 @@
+export declare const RICH_TEXT_EDITOR_LABEL_STYLES: {
+    root: string;
+};

package/dist/components/forms/rich-text-editor/components/rich-text-editor-label/styles/RichTextEditorLabel.css.js

@@ -0,0 +1,8 @@
+/* empty css                                                  */
+/* empty css                                                      */
+/* empty css                                       */
+var _ = { root: "_9mb6yy0" };
+export {
+  _ as RICH_TEXT_EDITOR_LABEL_STYLES
+};
+//# sourceMappingURL=RichTextEditorLabel.css.js.map

package/dist/components/forms/rich-text-editor/components/rich-text-editor-label/styles/RichTextEditorLabel.css.js.map

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

package/dist/components/forms/rich-text-editor/components/rich-text-editor-label/types/RichTextEditorLabel.props.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type RichTextEditorLabelProps = {
+    /** Defaults to the label id shared through RichTextEditor's context. */
+    id?: string;
+    disabled?: boolean;
+    children: ReactNode;
+};

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

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),t=require("./TextColorMenu.cjs"),o=require("./TextSizeMenu.cjs"),n=require("./styles/TextAppearanceGroup.css.cjs"),c=require("../../context/RichTextEditor.context.cjs"),e=(()=>{const{labels:s}=c.useRichTextEditorContext();return r.jsxs("div",{className:n.TEXT_APPEARANCE_GROUP_STYLES.root,role:"group","aria-label":s.textAppearanceGroup,children:[r.jsx(t,{}),r.jsx(o,{})]})});e.displayName="RichTextEditor.TextAppearanceGroup";e.TextColorMenu=t;e.TextSizeMenu=o;module.exports=e;
+//# sourceMappingURL=TextAppearanceGroup.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextAppearanceGroup.cjs","sources":["../../../../../../src/components/forms/rich-text-editor/components/text-appearance-group/TextAppearanceGroup.tsx"],"sourcesContent":["import type { FC } from 'react'\r\n\r\nimport TextColorMenu from '@components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.tsx'\r\nimport TextSizeMenu from '@components/forms/rich-text-editor/components/text-appearance-group/TextSizeMenu.tsx'\r\nimport { TEXT_APPEARANCE_GROUP_STYLES } from '@components/forms/rich-text-editor/components/text-appearance-group/styles/TextAppearanceGroup.css.ts'\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport type { TextSizeMenuProps } from '@components/forms/rich-text-editor/components/text-appearance-group/types/TextSizeMenu.props.ts'\r\n\r\ntype TextAppearanceGroupCompound = FC & {\r\n    TextColorMenu: typeof TextColorMenu\r\n    TextSizeMenu: FC<TextSizeMenuProps>\r\n}\r\n\r\nconst TextAppearanceGroup = (() => {\r\n    const { labels } = useRichTextEditorContext()\r\n\r\n    return (\r\n        <div\r\n            className={TEXT_APPEARANCE_GROUP_STYLES.root}\r\n            role={'group'}\r\n            aria-label={labels.textAppearanceGroup}\r\n        >\r\n            <TextColorMenu />\r\n            <TextSizeMenu />\r\n        </div>\r\n    )\r\n}) as unknown as TextAppearanceGroupCompound\r\n\r\nTextAppearanceGroup.displayName = 'RichTextEditor.TextAppearanceGroup'\r\nTextAppearanceGroup.TextColorMenu = TextColorMenu\r\nTextAppearanceGroup.TextSizeMenu = TextSizeMenu\r\n\r\nexport default TextAppearanceGroup\r\nexport type { TextAppearanceGroupCompound }\r\n"],"names":["TextAppearanceGroup","labels","useRichTextEditorContext","jsxs","TEXT_APPEARANCE_GROUP_STYLES","jsx","TextColorMenu","TextSizeMenu"],"mappings":"2NAaMA,GAAuB,IAAM,CAC/B,KAAM,CAAE,OAAAC,CAAA,EAAWC,2BAAA,EAEnB,OACIC,EAAAA,KAAC,MAAA,CACG,UAAWC,EAAAA,6BAA6B,KACxC,KAAM,QACN,aAAYH,EAAO,oBAEnB,SAAA,CAAAI,EAAAA,IAACC,EAAA,EAAc,QACdC,EAAA,CAAA,CAAa,CAAA,CAAA,CAAA,CAG1B,GAEAP,EAAoB,YAAc,qCAClCA,EAAoB,cAAgBM,EACpCN,EAAoB,aAAeO"}

package/dist/components/forms/rich-text-editor/components/text-appearance-group/TextAppearanceGroup.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { default as TextColorMenu } from './TextColorMenu.tsx';
+import { TextSizeMenuProps } from './types/TextSizeMenu.props.ts';
+type TextAppearanceGroupCompound = FC & {
+    TextColorMenu: typeof TextColorMenu;
+    TextSizeMenu: FC<TextSizeMenuProps>;
+};
+declare const TextAppearanceGroup: TextAppearanceGroupCompound;
+export default TextAppearanceGroup;
+export type { TextAppearanceGroupCompound };

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

@@ -0,0 +1,27 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import o from "./TextColorMenu.js";
+import t from "./TextSizeMenu.js";
+import { TEXT_APPEARANCE_GROUP_STYLES as i } from "./styles/TextAppearanceGroup.css.js";
+import { useRichTextEditorContext as x } from "../../context/RichTextEditor.context.js";
+const e = (() => {
+  const { labels: p } = x();
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: i.root,
+      role: "group",
+      "aria-label": p.textAppearanceGroup,
+      children: [
+        /* @__PURE__ */ r(o, {}),
+        /* @__PURE__ */ r(t, {})
+      ]
+    }
+  );
+});
+e.displayName = "RichTextEditor.TextAppearanceGroup";
+e.TextColorMenu = o;
+e.TextSizeMenu = t;
+export {
+  e as default
+};
+//# sourceMappingURL=TextAppearanceGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextAppearanceGroup.js","sources":["../../../../../../src/components/forms/rich-text-editor/components/text-appearance-group/TextAppearanceGroup.tsx"],"sourcesContent":["import type { FC } from 'react'\r\n\r\nimport TextColorMenu from '@components/forms/rich-text-editor/components/text-appearance-group/TextColorMenu.tsx'\r\nimport TextSizeMenu from '@components/forms/rich-text-editor/components/text-appearance-group/TextSizeMenu.tsx'\r\nimport { TEXT_APPEARANCE_GROUP_STYLES } from '@components/forms/rich-text-editor/components/text-appearance-group/styles/TextAppearanceGroup.css.ts'\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport type { TextSizeMenuProps } from '@components/forms/rich-text-editor/components/text-appearance-group/types/TextSizeMenu.props.ts'\r\n\r\ntype TextAppearanceGroupCompound = FC & {\r\n    TextColorMenu: typeof TextColorMenu\r\n    TextSizeMenu: FC<TextSizeMenuProps>\r\n}\r\n\r\nconst TextAppearanceGroup = (() => {\r\n    const { labels } = useRichTextEditorContext()\r\n\r\n    return (\r\n        <div\r\n            className={TEXT_APPEARANCE_GROUP_STYLES.root}\r\n            role={'group'}\r\n            aria-label={labels.textAppearanceGroup}\r\n        >\r\n            <TextColorMenu />\r\n            <TextSizeMenu />\r\n        </div>\r\n    )\r\n}) as unknown as TextAppearanceGroupCompound\r\n\r\nTextAppearanceGroup.displayName = 'RichTextEditor.TextAppearanceGroup'\r\nTextAppearanceGroup.TextColorMenu = TextColorMenu\r\nTextAppearanceGroup.TextSizeMenu = TextSizeMenu\r\n\r\nexport default TextAppearanceGroup\r\nexport type { TextAppearanceGroupCompound }\r\n"],"names":["TextAppearanceGroup","labels","useRichTextEditorContext","jsxs","TEXT_APPEARANCE_GROUP_STYLES","jsx","TextColorMenu","TextSizeMenu"],"mappings":";;;;;AAaA,MAAMA,KAAuB,MAAM;AAC/B,QAAM,EAAE,QAAAC,EAAA,IAAWC,EAAA;AAEnB,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAA6B;AAAA,MACxC,MAAM;AAAA,MACN,cAAYH,EAAO;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAA,EAAc;AAAA,0BACdC,GAAA,CAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1B;AAEAP,EAAoB,cAAc;AAClCA,EAAoB,gBAAgBM;AACpCN,EAAoB,eAAeO;"}

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

@@ -0,0 +1,2 @@
+"use strict";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;
+//# sourceMappingURL=TextColorMenu.cjs.map

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

@@ -0,0 +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\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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"}

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

@@ -0,0 +1,5 @@
+declare const TextColorMenu: {
+    (): import("react").JSX.Element | null;
+    displayName: string;
+};
+export default TextColorMenu;

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

@@ -0,0 +1,150 @@
+import { jsxs as b, jsx as e } 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";
+/* empty css                                               */
+/* empty css                                                            */
+import w from "../../../../foundation/icon/Icon.js";
+import "../../../../foundation/icon/styles/Icon.css.js";
+import c from "../../../../overlay/popover/Popover.js";
+/* 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                                                                                      */
+import { RICH_TEXT_COLOR_PALETTES as p } from "../../constants/richTextColorPalettes.const.js";
+import { useRichTextEditorContext as D } from "../../context/RichTextEditor.context.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";
+const R = () => {
+  const u = M([]), [d, f] = 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;
+      if (o.key === "ArrowRight")
+        r = Math.min(
+          t + 1,
+          p.length - 1
+        );
+      else if (o.key === "ArrowLeft")
+        r = 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;
+      else if (o.key === "End")
+        r = p.length - 1;
+      else
+        return;
+      o.preventDefault(), h(r, l);
+    },
+    [h]
+  );
+  if (!m)
+    return null;
+  const C = m.getAttributes("textStyle").color ?? E.editorColors.neutral.dark;
+  return /* @__PURE__ */ b(
+    c,
+    {
+      open: d,
+      onOpenChange: f,
+      children: [
+        /* @__PURE__ */ e(
+          x,
+          {
+            content: n.textColorTrigger,
+            delayDuration: 700,
+            openOnFocus: !1,
+            position: "top",
+            children: /* @__PURE__ */ e(c.Trigger, { children: /* @__PURE__ */ e(
+              k,
+              {
+                type: "button",
+                "aria-label": n.textColorTrigger,
+                variant: "ghost",
+                color: "primary",
+                size: "sm",
+                active: d,
+                disabled: y,
+                onMouseDown: (o) => o.preventDefault(),
+                children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a.selectedColor,
+                    style: { backgroundColor: C }
+                  }
+                )
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ e(
+          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(
+              "div",
+              {
+                className: a.paletteColumn,
+                role: "group",
+                "aria-label": n.textColorGroup(o.name),
+                children: o.colors.map((i, r) => {
+                  const l = C === i;
+                  return /* @__PURE__ */ e(
+                    "button",
+                    {
+                      ref: (s) => {
+                        u.current[t * 3 + r] = s;
+                      },
+                      type: "button",
+                      className: a.colorSwatch,
+                      style: { backgroundColor: i },
+                      "aria-label": n.textColorSwatch(o.name, r),
+                      "aria-pressed": l,
+                      "data-selected": l || void 0,
+                      tabIndex: t === 0 && r === 0 ? 0 : -1,
+                      onKeyDown: (s) => T(s, t, r),
+                      onMouseDown: (s) => s.preventDefault(),
+                      onClick: () => {
+                        m.chain().focus().setColor(i).run(), f(!1);
+                      },
+                      children: l && /* @__PURE__ */ e("span", { className: a.colorCheck, children: /* @__PURE__ */ e(
+                        w,
+                        {
+                          icon: "lucide:check",
+                          size: "sm"
+                        }
+                      ) })
+                    },
+                    i
+                  );
+                })
+              },
+              o.name
+            )) }) })
+          }
+        )
+      ]
+    }
+  );
+};
+R.displayName = "RichTextEditor.TextAppearanceGroup.TextColorMenu";
+export {
+  R as default
+};
+//# sourceMappingURL=TextColorMenu.js.map

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

@@ -0,0 +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\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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"}

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

@@ -0,0 +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;
+//# sourceMappingURL=TextSizeMenu.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextSizeMenu.cjs","sources":["../../../../../../src/components/forms/rich-text-editor/components/text-appearance-group/TextSizeMenu.tsx"],"sourcesContent":["import { Button } from '@components/actions/button'\r\nimport { RICH_TEXT_FONT_SIZES } from '@components/forms/rich-text-editor/constants'\r\nimport { RICH_TEXT_FONT_SIZE_LABELS } from '@components/forms/rich-text-editor/constants/richTextFontSizes.const.ts'\r\nimport type { RichTextFontSize } from '@components/forms/rich-text-editor/types'\r\nimport { IconButton } from '@components/actions/icon-button'\r\nimport { DropdownMenu } from '@components/overlay/dropdown-menu'\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport { useState } from 'react'\r\nimport type { TextSizeMenuProps } from '@components/forms/rich-text-editor/components/text-appearance-group/types/TextSizeMenu.props.ts'\r\nimport { TEXT_SIZE_MENU_STYLES } from '@components/forms/rich-text-editor/components/text-appearance-group/styles/TextSizeMenu.css.ts'\r\n\r\nconst TextSizeMenu = ({ presentation = 'select' }: TextSizeMenuProps) => {\r\n    const [open, setOpen] = useState(false)\r\n    const { editor, disabled, labels } = useRichTextEditorContext()\r\n\r\n    if (!editor) {\r\n        return null\r\n    }\r\n\r\n    const selectedFontSize =\r\n    editor.getAttributes('textStyle').fontSize ?? RICH_TEXT_FONT_SIZES.md\r\n    const selectedFontSizeKey = (\r\n    Object.keys(RICH_TEXT_FONT_SIZES) as RichTextFontSize[]\r\n    ).find((fontSize) => RICH_TEXT_FONT_SIZES[fontSize] === selectedFontSize)\r\n\r\n    const selectedFontSizeLabel = selectedFontSizeKey\r\n        ? RICH_TEXT_FONT_SIZE_LABELS[selectedFontSizeKey]\r\n        : RICH_TEXT_FONT_SIZE_LABELS.md\r\n\r\n    return (\r\n        <DropdownMenu\r\n            modal={false}\r\n            open={open}\r\n            onOpenChange={setOpen}\r\n        >\r\n            <DropdownMenu.Trigger>\r\n                {presentation === 'select' ? (\r\n                    <Button\r\n                        type={'button'}\r\n                        label={selectedFontSizeLabel}\r\n                        endIcon={'lucide:chevron-down'}\r\n                        aria-label={labels.textSizeTrigger}\r\n                        variant={'ghost'}\r\n                        color={'primary'}\r\n                        size={'sm'}\r\n                        className={TEXT_SIZE_MENU_STYLES.trigger}\r\n                        active={open}\r\n                        disabled={disabled}\r\n                    />\r\n                ) : (\r\n                    <IconButton\r\n                        type={'button'}\r\n                        icon={'lucide:text-cursor-input'}\r\n                        aria-label={labels.textSizeTrigger}\r\n                        variant={'ghost'}\r\n                        color={'primary'}\r\n                        size={'sm'}\r\n                        active={open}\r\n                        disabled={disabled}\r\n                    />\r\n                )}\r\n            </DropdownMenu.Trigger>\r\n            <DropdownMenu.Content\r\n                aria-label={labels.textSizeOptions}\r\n                side={'bottom'}\r\n                align={'start'}\r\n                width={'6rem'}\r\n            >\r\n                {(Object.keys(RICH_TEXT_FONT_SIZES) as RichTextFontSize[]).map(\r\n                    (fontSize) => (\r\n                        <DropdownMenu.Item\r\n                            key={fontSize}\r\n                            label={RICH_TEXT_FONT_SIZE_LABELS[fontSize]}\r\n                            active={fontSize === selectedFontSizeKey}\r\n                            onMouseDown={(event) => event.preventDefault()}\r\n                            onClick={() =>\r\n                                editor\r\n                                    .chain()\r\n                                    .focus()\r\n                                    .setFontSize(RICH_TEXT_FONT_SIZES[fontSize])\r\n                                    .run()\r\n                            }\r\n                        />\r\n                    ),\r\n                )}\r\n            </DropdownMenu.Content>\r\n        </DropdownMenu>\r\n    )\r\n}\r\n\r\nTextSizeMenu.displayName = 'RichTextEditor.TextAppearanceGroup.TextSizeMenu'\r\n\r\nexport default TextSizeMenu\r\n"],"names":["TextSizeMenu","presentation","open","setOpen","useState","editor","disabled","labels","useRichTextEditorContext","selectedFontSize","RICH_TEXT_FONT_SIZES","selectedFontSizeKey","fontSize","selectedFontSizeLabel","RICH_TEXT_FONT_SIZE_LABELS","jsxs","DropdownMenu","jsx","Button","TEXT_SIZE_MENU_STYLES","IconButton","event"],"mappings":"6oBAWMA,EAAe,CAAC,CAAE,aAAAC,EAAe,YAAkC,CACrE,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAChC,CAAE,OAAAC,EAAQ,SAAAC,EAAU,OAAAC,CAAA,EAAWC,EAAAA,yBAAA,EAErC,GAAI,CAACH,EACD,OAAO,KAGX,MAAMI,EACNJ,EAAO,cAAc,WAAW,EAAE,UAAYK,EAAAA,qBAAqB,GAC7DC,EACN,OAAO,KAAKD,sBAAoB,EAC9B,KAAME,GAAaF,EAAAA,qBAAqBE,CAAQ,IAAMH,CAAgB,EAElEI,EAAwBF,EACxBG,EAAAA,2BAA2BH,CAAmB,EAC9CG,EAAAA,2BAA2B,GAEjC,OACIC,EAAAA,KAACC,EAAA,CACG,MAAO,GACP,KAAAd,EACA,aAAcC,EAEd,SAAA,CAAAc,EAAAA,IAACD,EAAa,QAAb,CACI,SAAAf,IAAiB,SACdgB,EAAAA,IAACC,EAAA,CACG,KAAM,SACN,MAAOL,EACP,QAAS,sBACT,aAAYN,EAAO,gBACnB,QAAS,QACT,MAAO,UACP,KAAM,KACN,UAAWY,EAAAA,sBAAsB,QACjC,OAAQjB,EACR,SAAAI,CAAA,CAAA,EAGJW,EAAAA,IAACG,EAAA,CACG,KAAM,SACN,KAAM,2BACN,aAAYb,EAAO,gBACnB,QAAS,QACT,MAAO,UACP,KAAM,KACN,OAAQL,EACR,SAAAI,CAAA,CAAA,EAGZ,EACAW,EAAAA,IAACD,EAAa,QAAb,CACG,aAAYT,EAAO,gBACnB,KAAM,SACN,MAAO,QACP,MAAO,OAEL,SAAA,OAAO,KAAKG,EAAAA,oBAAoB,EAAyB,IACtDE,GACGK,EAAAA,IAACD,EAAa,KAAb,CAEG,MAAOF,EAAAA,2BAA2BF,CAAQ,EAC1C,OAAQA,IAAaD,EACrB,YAAcU,GAAUA,EAAM,eAAA,EAC9B,QAAS,IACLhB,EACK,QACA,QACA,YAAYK,EAAAA,qBAAqBE,CAAQ,CAAC,EAC1C,IAAA,CAAI,EATRA,CAAA,CAWT,CAER,CAAA,CACJ,CAAA,CAAA,CAGZ,EAEAZ,EAAa,YAAc"}

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

@@ -0,0 +1,6 @@
+import { TextSizeMenuProps } from './types/TextSizeMenu.props.ts';
+declare const TextSizeMenu: {
+    ({ presentation }: TextSizeMenuProps): import("react").JSX.Element | null;
+    displayName: string;
+};
+export default TextSizeMenu;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextSizeMenu.js","sources":["../../../../../../src/components/forms/rich-text-editor/components/text-appearance-group/TextSizeMenu.tsx"],"sourcesContent":["import { Button } from '@components/actions/button'\r\nimport { RICH_TEXT_FONT_SIZES } from '@components/forms/rich-text-editor/constants'\r\nimport { RICH_TEXT_FONT_SIZE_LABELS } from '@components/forms/rich-text-editor/constants/richTextFontSizes.const.ts'\r\nimport type { RichTextFontSize } from '@components/forms/rich-text-editor/types'\r\nimport { IconButton } from '@components/actions/icon-button'\r\nimport { DropdownMenu } from '@components/overlay/dropdown-menu'\r\nimport { useRichTextEditorContext } from '@components/forms/rich-text-editor/context/RichTextEditor.context.ts'\r\nimport { useState } from 'react'\r\nimport type { TextSizeMenuProps } from '@components/forms/rich-text-editor/components/text-appearance-group/types/TextSizeMenu.props.ts'\r\nimport { TEXT_SIZE_MENU_STYLES } from '@components/forms/rich-text-editor/components/text-appearance-group/styles/TextSizeMenu.css.ts'\r\n\r\nconst TextSizeMenu = ({ presentation = 'select' }: TextSizeMenuProps) => {\r\n    const [open, setOpen] = useState(false)\r\n    const { editor, disabled, labels } = useRichTextEditorContext()\r\n\r\n    if (!editor) {\r\n        return null\r\n    }\r\n\r\n    const selectedFontSize =\r\n    editor.getAttributes('textStyle').fontSize ?? RICH_TEXT_FONT_SIZES.md\r\n    const selectedFontSizeKey = (\r\n    Object.keys(RICH_TEXT_FONT_SIZES) as RichTextFontSize[]\r\n    ).find((fontSize) => RICH_TEXT_FONT_SIZES[fontSize] === selectedFontSize)\r\n\r\n    const selectedFontSizeLabel = selectedFontSizeKey\r\n        ? RICH_TEXT_FONT_SIZE_LABELS[selectedFontSizeKey]\r\n        : RICH_TEXT_FONT_SIZE_LABELS.md\r\n\r\n    return (\r\n        <DropdownMenu\r\n            modal={false}\r\n            open={open}\r\n            onOpenChange={setOpen}\r\n        >\r\n            <DropdownMenu.Trigger>\r\n                {presentation === 'select' ? (\r\n                    <Button\r\n                        type={'button'}\r\n                        label={selectedFontSizeLabel}\r\n                        endIcon={'lucide:chevron-down'}\r\n                        aria-label={labels.textSizeTrigger}\r\n                        variant={'ghost'}\r\n                        color={'primary'}\r\n                        size={'sm'}\r\n                        className={TEXT_SIZE_MENU_STYLES.trigger}\r\n                        active={open}\r\n                        disabled={disabled}\r\n                    />\r\n                ) : (\r\n                    <IconButton\r\n                        type={'button'}\r\n                        icon={'lucide:text-cursor-input'}\r\n                        aria-label={labels.textSizeTrigger}\r\n                        variant={'ghost'}\r\n                        color={'primary'}\r\n                        size={'sm'}\r\n                        active={open}\r\n                        disabled={disabled}\r\n                    />\r\n                )}\r\n            </DropdownMenu.Trigger>\r\n            <DropdownMenu.Content\r\n                aria-label={labels.textSizeOptions}\r\n                side={'bottom'}\r\n                align={'start'}\r\n                width={'6rem'}\r\n            >\r\n                {(Object.keys(RICH_TEXT_FONT_SIZES) as RichTextFontSize[]).map(\r\n                    (fontSize) => (\r\n                        <DropdownMenu.Item\r\n                            key={fontSize}\r\n                            label={RICH_TEXT_FONT_SIZE_LABELS[fontSize]}\r\n                            active={fontSize === selectedFontSizeKey}\r\n                            onMouseDown={(event) => event.preventDefault()}\r\n                            onClick={() =>\r\n                                editor\r\n                                    .chain()\r\n                                    .focus()\r\n                                    .setFontSize(RICH_TEXT_FONT_SIZES[fontSize])\r\n                                    .run()\r\n                            }\r\n                        />\r\n                    ),\r\n                )}\r\n            </DropdownMenu.Content>\r\n        </DropdownMenu>\r\n    )\r\n}\r\n\r\nTextSizeMenu.displayName = 'RichTextEditor.TextAppearanceGroup.TextSizeMenu'\r\n\r\nexport default TextSizeMenu\r\n"],"names":["TextSizeMenu","presentation","open","setOpen","useState","editor","disabled","labels","useRichTextEditorContext","selectedFontSize","RICH_TEXT_FONT_SIZES","selectedFontSizeKey","fontSize","selectedFontSizeLabel","RICH_TEXT_FONT_SIZE_LABELS","jsxs","DropdownMenu","jsx","Button","TEXT_SIZE_MENU_STYLES","IconButton","event"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,IAAe,CAAC,EAAE,cAAAC,IAAe,eAAkC;AACrE,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,QAAAC,EAAA,IAAWC,EAAA;AAErC,MAAI,CAACH;AACD,WAAO;AAGX,QAAMI,IACNJ,EAAO,cAAc,WAAW,EAAE,YAAYK,EAAqB,IAC7DC,IACN,OAAO,KAAKD,CAAoB,EAC9B,KAAK,CAACE,MAAaF,EAAqBE,CAAQ,MAAMH,CAAgB,GAElEI,IAAwBF,IACxBG,EAA2BH,CAAmB,IAC9CG,EAA2B;AAEjC,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,MACP,MAAAd;AAAA,MACA,cAAcC;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAc,EAACD,EAAa,SAAb,EACI,UAAAf,MAAiB,WACd,gBAAAgB;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,OAAOL;AAAA,YACP,SAAS;AAAA,YACT,cAAYN,EAAO;AAAA,YACnB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,MAAM;AAAA,YACN,WAAWY,EAAsB;AAAA,YACjC,QAAQjB;AAAA,YACR,UAAAI;AAAA,UAAA;AAAA,QAAA,IAGJ,gBAAAW;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,MAAM;AAAA,YACN,cAAYb,EAAO;AAAA,YACnB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,MAAM;AAAA,YACN,QAAQL;AAAA,YACR,UAAAI;AAAA,UAAA;AAAA,QAAA,GAGZ;AAAA,QACA,gBAAAW;AAAA,UAACD,EAAa;AAAA,UAAb;AAAA,YACG,cAAYT,EAAO;AAAA,YACnB,MAAM;AAAA,YACN,OAAO;AAAA,YACP,OAAO;AAAA,YAEL,UAAA,OAAO,KAAKG,CAAoB,EAAyB;AAAA,cACvD,CAACE,MACG,gBAAAK;AAAA,gBAACD,EAAa;AAAA,gBAAb;AAAA,kBAEG,OAAOF,EAA2BF,CAAQ;AAAA,kBAC1C,QAAQA,MAAaD;AAAA,kBACrB,aAAa,CAACU,MAAUA,EAAM,eAAA;AAAA,kBAC9B,SAAS,MACLhB,EACK,QACA,QACA,YAAYK,EAAqBE,CAAQ,CAAC,EAC1C,IAAA;AAAA,gBAAI;AAAA,gBATRA;AAAA,cAAA;AAAA,YAWT;AAAA,UAER;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEAZ,EAAa,cAAc;"}

package/dist/components/forms/rich-text-editor/components/text-appearance-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TextAppearanceGroup } from './TextAppearanceGroup.tsx';
+export type { TextAppearanceGroupCompound } from './TextAppearanceGroup.tsx';
+export type { TextSizeMenuProps } from './types/TextSizeMenu.props.ts';

package/dist/components/forms/rich-text-editor/components/text-appearance-group/styles/TextAppearanceGroup.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                    */;/* empty css                                         */var e={root:"_1e8qzt90"};exports.TEXT_APPEARANCE_GROUP_STYLES=e;
+//# sourceMappingURL=TextAppearanceGroup.css.cjs.map