@lets-events/react 12.6.4 → 12.7.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@12.6.4 build
+> @lets-events/react@12.7.1 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,11 +9,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist\index.js 404.29 KB
-CJS ⚡️ Build success in 200ms
-ESM dist\index.mjs 389.28 KB
+CJS dist\index.js 404.79 KB
+CJS ⚡️ Build success in 199ms
+ESM dist\index.mjs 389.70 KB
 ESM ⚡️ Build success in 201ms
 DTS Build start
-DTS ⚡️ Build success in 4558ms
-DTS dist\index.d.mts 402.87 KB
-DTS dist\index.d.ts  402.87 KB
+DTS ⚡️ Build success in 4529ms
+DTS dist\index.d.mts 403.02 KB
+DTS dist\index.d.ts  403.02 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.7.1
+
+### Patch Changes
+
+- fix
+
+## 12.7.0
+
+### Minor Changes
+
+- rich text presenter
+
 ## 12.6.4
 
 ### Patch Changes

package/dist/index.d.mts

@@ -15298,6 +15298,11 @@ interface RichEditorProps {
 }
 declare const RichEditor: (props: RichEditorProps) => react_jsx_runtime.JSX.Element | null;
 
+type Props = {
+    richText: string;
+};
+declare const RichTextPresenter: ({ richText }: Props) => react_jsx_runtime.JSX.Element;
+
 type RichEditorFormFieldProps = Omit<RichEditorProps, "value" | "onChange"> & {
     name: string;
     label?: string;
@@ -15400,4 +15405,4 @@ declare const useImageUpload: (options: UseImageUploadOptions) => {
     reset: () => void;
 };
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.d.ts

@@ -15298,6 +15298,11 @@ interface RichEditorProps {
 }
 declare const RichEditor: (props: RichEditorProps) => react_jsx_runtime.JSX.Element | null;
 
+type Props = {
+    richText: string;
+};
+declare const RichTextPresenter: ({ richText }: Props) => react_jsx_runtime.JSX.Element;
+
 type RichEditorFormFieldProps = Omit<RichEditorProps, "value" | "onChange"> & {
     name: string;
     label?: string;
@@ -15400,4 +15405,4 @@ declare const useImageUpload: (options: UseImageUploadOptions) => {
     reset: () => void;
 };
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.js

@@ -925,6 +925,7 @@ __export(index_exports, {
   RadioItem: () => RadioItem,
   RichEditor: () => RichEditor_default,
   RichEditorFormField: () => RichEditorFormField,
+  RichTextPresenter: () => RichTextPresenter_default,
   Section: () => Section,
   SectionStyled: () => SectionStyled,
   SelectFormField: () => SelectFormField,
@@ -11575,6 +11576,7 @@ var QuillContainer = styled("div", {
   flexDirection: "column"
 });
 var QuillEditor = styled("div", {
+  position: "relative",
   // Base container
   "& .ql-container": {
     boxSizing: "border-box",
@@ -11586,7 +11588,8 @@ var QuillEditor = styled("div", {
     border: "1px solid $neutral300",
     borderTop: "none",
     borderBottomLeftRadius: "$sm",
-    borderBottomRightRadius: "$sm"
+    borderBottomRightRadius: "$sm",
+    padding: "$12"
   },
   "& .ql-container.ql-disabled .ql-tooltip": {
     visibility: "hidden"
@@ -11614,7 +11617,6 @@ var QuillEditor = styled("div", {
     height: "100%",
     outline: "none",
     overflowY: "auto",
-    padding: "$12",
     tabSize: 4,
     MozTabSize: 4,
     textAlign: "left",
@@ -12758,7 +12760,7 @@ var QuillComponent = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showVideoModal, showLinkModal, handleVideoCancel, handleLinkCancel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuillContainer, { className, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(QuillEditor, { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuillContainer, { className, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(QuillEditor, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ref: quillRef }),
     showVideoModal && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "div",
@@ -12917,9 +12919,22 @@ var RichEditor = (props) => {
 };
 var RichEditor_default = RichEditor;
 
+// src/components/RichEditor/RichTextPresenter.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var RichTextPresenter = ({ richText }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(QuillEditor, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    "div",
+    {
+      className: "ql-editor",
+      dangerouslySetInnerHTML: { __html: richText }
+    }
+  ) });
+};
+var RichTextPresenter_default = RichTextPresenter;
+
 // src/components/FormFields/RichEditorFormField.tsx
 var import_react24 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12962,9 +12977,9 @@ var RichEditorFormField = (_a) => {
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex, { direction: "column", children: [
-    maxLength ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex, { direction: "row", justify: "between", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { direction: "column", children: [
+    maxLength ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { direction: "row", justify: "between", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         FormLabel,
         {
           name,
@@ -12973,8 +12988,8 @@ var RichEditorFormField = (_a) => {
           haveError
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Badge, { color: "grey", size: "xs", children: caracterQuantity })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Badge, { color: "grey", size: "xs", children: caracterQuantity })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       FormLabel,
       {
         name,
@@ -12983,7 +12998,7 @@ var RichEditorFormField = (_a) => {
         haveError
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       RichEditor_default,
       __spreadProps(__spreadValues({}, props), {
         value: field.value,
@@ -12995,14 +13010,14 @@ var RichEditorFormField = (_a) => {
         simpleVersion
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/CalendarFormField.tsx
 var import_react_hook_form13 = require("react-hook-form");
 var import_react25 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var CalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13051,8 +13066,8 @@ var CalendarFormField = (_a) => {
   const handleCalendarChange = (date) => {
     setSelected(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       FormLabel,
       {
         name,
@@ -13061,7 +13076,7 @@ var CalendarFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       Calendar,
       __spreadValues({
         selected,
@@ -13074,14 +13089,14 @@ var CalendarFormField = (_a) => {
         maxYearsFromNow
       }, calendarProps)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/DoubleCalendarFormField.tsx
 var import_react26 = require("react");
 var import_react_hook_form14 = require("react-hook-form");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var DoubleCalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13130,9 +13145,9 @@ var DoubleCalendarFormField = (_a) => {
   const handleCalendarChange = (range) => {
     setSelected(range);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FormLabel, { name, label, required, haveError }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormLabel, { name, label, required, haveError }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       DoubleCalendar,
       __spreadValues({
         selected,
@@ -13146,14 +13161,14 @@ var DoubleCalendarFormField = (_a) => {
         maxYearsFromNow
       }, calendarProps)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/TimePickerFormField.tsx
 var import_react_hook_form15 = require("react-hook-form");
 var import_react27 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var TimePickerFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13196,8 +13211,8 @@ var TimePickerFormField = (_a) => {
   const handleTimePickerChange = (time) => {
     setSelected(time);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       FormLabel,
       {
         name,
@@ -13206,7 +13221,7 @@ var TimePickerFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       TimePicker,
       __spreadValues({
         selected,
@@ -13217,7 +13232,7 @@ var TimePickerFormField = (_a) => {
         hasError: haveError
       }, timePickerProps)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
@@ -13385,6 +13400,7 @@ var useImageUpload = (options) => {
   RadioItem,
   RichEditor,
   RichEditorFormField,
+  RichTextPresenter,
   Section,
   SectionStyled,
   SelectFormField,

package/dist/index.mjs

@@ -11470,6 +11470,7 @@ var QuillContainer = styled("div", {
   flexDirection: "column"
 });
 var QuillEditor = styled("div", {
+  position: "relative",
   // Base container
   "& .ql-container": {
     boxSizing: "border-box",
@@ -11481,7 +11482,8 @@ var QuillEditor = styled("div", {
     border: "1px solid $neutral300",
     borderTop: "none",
     borderBottomLeftRadius: "$sm",
-    borderBottomRightRadius: "$sm"
+    borderBottomRightRadius: "$sm",
+    padding: "$12"
   },
   "& .ql-container.ql-disabled .ql-tooltip": {
     visibility: "hidden"
@@ -11509,7 +11511,6 @@ var QuillEditor = styled("div", {
     height: "100%",
     outline: "none",
     overflowY: "auto",
-    padding: "$12",
     tabSize: 4,
     MozTabSize: 4,
     textAlign: "left",
@@ -12653,7 +12654,7 @@ var QuillComponent = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showVideoModal, showLinkModal, handleVideoCancel, handleLinkCancel]);
-  return /* @__PURE__ */ jsx52(QuillContainer, { className, children: /* @__PURE__ */ jsxs28(QuillEditor, { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsx52(QuillContainer, { className, children: /* @__PURE__ */ jsxs28(QuillEditor, { children: [
     /* @__PURE__ */ jsx52("div", { ref: quillRef }),
     showVideoModal && /* @__PURE__ */ jsx52(
       "div",
@@ -12812,9 +12813,22 @@ var RichEditor = (props) => {
 };
 var RichEditor_default = RichEditor;
 
+// src/components/RichEditor/RichTextPresenter.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+var RichTextPresenter = ({ richText }) => {
+  return /* @__PURE__ */ jsx54(QuillEditor, { children: /* @__PURE__ */ jsx54(
+    "div",
+    {
+      className: "ql-editor",
+      dangerouslySetInnerHTML: { __html: richText }
+    }
+  ) });
+};
+var RichTextPresenter_default = RichTextPresenter;
+
 // src/components/FormFields/RichEditorFormField.tsx
 import { useState as useState12 } from "react";
-import { Fragment as Fragment5, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12859,7 +12873,7 @@ var RichEditorFormField = (_a) => {
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   return /* @__PURE__ */ jsxs29(Flex, { direction: "column", children: [
     maxLength ? /* @__PURE__ */ jsxs29(Flex, { direction: "row", justify: "between", children: [
-      label && /* @__PURE__ */ jsx54(
+      label && /* @__PURE__ */ jsx55(
         FormLabel,
         {
           name,
@@ -12868,8 +12882,8 @@ var RichEditorFormField = (_a) => {
           haveError
         }
       ),
-      /* @__PURE__ */ jsx54(Badge, { color: "grey", size: "xs", children: caracterQuantity })
-    ] }) : /* @__PURE__ */ jsx54(Fragment5, { children: label && /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsx55(Badge, { color: "grey", size: "xs", children: caracterQuantity })
+    ] }) : /* @__PURE__ */ jsx55(Fragment5, { children: label && /* @__PURE__ */ jsx55(
       FormLabel,
       {
         name,
@@ -12878,7 +12892,7 @@ var RichEditorFormField = (_a) => {
         haveError
       }
     ) }),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55(
       RichEditor_default,
       __spreadProps(__spreadValues({}, props), {
         value: field.value,
@@ -12890,14 +12904,14 @@ var RichEditorFormField = (_a) => {
         simpleVersion
       })
     ),
-    /* @__PURE__ */ jsx54(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx55(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/CalendarFormField.tsx
 import { useController as useController4 } from "react-hook-form";
 import { useCallback as useCallback5 } from "react";
-import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 var CalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12947,7 +12961,7 @@ var CalendarFormField = (_a) => {
     setSelected(date);
   };
   return /* @__PURE__ */ jsxs30(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ jsx55(
+    label && /* @__PURE__ */ jsx56(
       FormLabel,
       {
         name,
@@ -12956,7 +12970,7 @@ var CalendarFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       Calendar,
       __spreadValues({
         selected,
@@ -12969,14 +12983,14 @@ var CalendarFormField = (_a) => {
         maxYearsFromNow
       }, calendarProps)
     ),
-    /* @__PURE__ */ jsx55(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx56(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/DoubleCalendarFormField.tsx
 import { useCallback as useCallback6 } from "react";
 import { useController as useController5 } from "react-hook-form";
-import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var DoubleCalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13026,8 +13040,8 @@ var DoubleCalendarFormField = (_a) => {
     setSelected(range);
   };
   return /* @__PURE__ */ jsxs31(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ jsx56(FormLabel, { name, label, required, haveError }),
-    /* @__PURE__ */ jsx56(
+    label && /* @__PURE__ */ jsx57(FormLabel, { name, label, required, haveError }),
+    /* @__PURE__ */ jsx57(
       DoubleCalendar,
       __spreadValues({
         selected,
@@ -13041,14 +13055,14 @@ var DoubleCalendarFormField = (_a) => {
         maxYearsFromNow
       }, calendarProps)
     ),
-    /* @__PURE__ */ jsx56(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx57(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/TimePickerFormField.tsx
 import { useController as useController6 } from "react-hook-form";
 import { useCallback as useCallback7 } from "react";
-import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
 var TimePickerFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13092,7 +13106,7 @@ var TimePickerFormField = (_a) => {
     setSelected(time);
   };
   return /* @__PURE__ */ jsxs32(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ jsx57(
+    label && /* @__PURE__ */ jsx58(
       FormLabel,
       {
         name,
@@ -13101,7 +13115,7 @@ var TimePickerFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx58(
       TimePicker,
       __spreadValues({
         selected,
@@ -13112,7 +13126,7 @@ var TimePickerFormField = (_a) => {
         hasError: haveError
       }, timePickerProps)
     ),
-    /* @__PURE__ */ jsx57(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx58(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
@@ -13279,6 +13293,7 @@ export {
   RadioItem,
   RichEditor_default as RichEditor,
   RichEditorFormField,
+  RichTextPresenter_default as RichTextPresenter,
   Section,
   SectionStyled,
   SelectFormField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.6.4",
+  "version": "12.7.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/RichEditor/QuillComponent.tsx

@@ -327,7 +327,7 @@ const QuillComponent: React.FC<RichEditorProps> = ({
 
   return (
     <QuillContainer className={className}>
-      <QuillEditor style={{ position: "relative" }}>
+      <QuillEditor>
         <div ref={quillRef} />
 
         {/* Video Modal */}

package/src/components/RichEditor/RichTextPresenter.tsx

@@ -0,0 +1,18 @@
+import { QuillEditor } from "./styledComponents";
+
+type Props = {
+  richText: string;
+};
+
+const RichTextPresenter = ({ richText }: Props) => {
+  return (
+    <QuillEditor>
+      <div
+        className="ql-editor"
+        dangerouslySetInnerHTML={{ __html: richText }}
+      />
+    </QuillEditor>
+  );
+};
+
+export default RichTextPresenter;

package/src/components/RichEditor/index.ts

@@ -1,2 +1,3 @@
 export { default as RichEditor } from "./RichEditor";
 export type { RichEditorProps } from "./RichEditor";
+export { default as RichTextPresenter } from "./RichTextPresenter";

package/src/components/RichEditor/styledComponents.ts

@@ -6,6 +6,8 @@ export const QuillContainer = styled("div", {
 });
 
 export const QuillEditor = styled("div", {
+  position: "relative",
+
   // Base container
   "& .ql-container": {
     boxSizing: "border-box",
@@ -18,15 +20,17 @@ export const QuillEditor = styled("div", {
     borderTop: "none",
     borderBottomLeftRadius: "$sm",
     borderBottomRightRadius: "$sm",
+    padding: "$12",
   },
 
   "& .ql-container.ql-disabled .ql-tooltip": {
     visibility: "hidden",
   },
 
-  "& .ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui, & .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui": {
-    cursor: "pointer",
-  },
+  "& .ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui, & .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui":
+    {
+      cursor: "pointer",
+    },
 
   // Clipboard
   "& .ql-clipboard": {
@@ -45,12 +49,12 @@ export const QuillEditor = styled("div", {
   // Editor
   "& .ql-editor": {
     boxSizing: "border-box",
-    counterReset: "list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
+    counterReset:
+      "list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
     lineHeight: "1.42",
     height: "100%",
     outline: "none",
     overflowY: "auto",
-    padding: "$12",
     tabSize: 4,
     MozTabSize: 4,
     textAlign: "left",
@@ -89,7 +93,7 @@ export const QuillEditor = styled("div", {
 
     "& h1": {
       fontSize: "2em",
-      lineHeight: '2em!important',
+      lineHeight: "2em!important",
     },
 
     "& h2": {
@@ -704,9 +708,10 @@ export const QuillEditor = styled("div", {
       },
     },
 
-    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
-      borderColor: "#000",
-    },
+    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover":
+      {
+        borderColor: "#000",
+      },
   },
 
   "@media (pointer: coarse)": {
@@ -970,9 +975,10 @@ export const QuillEditor = styled("div", {
     width: "18px",
   },
 
-  "& .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before": {
-    content: "attr(data-label)",
-  },
+  "& .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before":
+    {
+      content: "attr(data-label)",
+    },
 
   // Header picker
   "& .ql-picker.ql-header": {
@@ -982,29 +988,35 @@ export const QuillEditor = styled("div", {
       content: "'Normal'",
     },
 
-    "& .ql-picker-label[data-value='1']::before, & .ql-picker-item[data-value='1']::before": {
-      content: "'Título 1'",
-    },
+    "& .ql-picker-label[data-value='1']::before, & .ql-picker-item[data-value='1']::before":
+      {
+        content: "'Título 1'",
+      },
 
-    "& .ql-picker-label[data-value='2']::before, & .ql-picker-item[data-value='2']::before": {
-      content: "'Título 2'",
-    },
+    "& .ql-picker-label[data-value='2']::before, & .ql-picker-item[data-value='2']::before":
+      {
+        content: "'Título 2'",
+      },
 
-    "& .ql-picker-label[data-value='3']::before, & .ql-picker-item[data-value='3']::before": {
-      content: "'Heading 3'",
-    },
+    "& .ql-picker-label[data-value='3']::before, & .ql-picker-item[data-value='3']::before":
+      {
+        content: "'Heading 3'",
+      },
 
-    "& .ql-picker-label[data-value='4']::before, & .ql-picker-item[data-value='4']::before": {
-      content: "'Heading 4'",
-    },
+    "& .ql-picker-label[data-value='4']::before, & .ql-picker-item[data-value='4']::before":
+      {
+        content: "'Heading 4'",
+      },
 
-    "& .ql-picker-label[data-value='5']::before, & .ql-picker-item[data-value='5']::before": {
-      content: "'Heading 5'",
-    },
+    "& .ql-picker-label[data-value='5']::before, & .ql-picker-item[data-value='5']::before":
+      {
+        content: "'Heading 5'",
+      },
 
-    "& .ql-picker-label[data-value='6']::before, & .ql-picker-item[data-value='6']::before": {
-      content: "'Heading 6'",
-    },
+    "& .ql-picker-label[data-value='6']::before, & .ql-picker-item[data-value='6']::before":
+      {
+        content: "'Heading 6'",
+      },
 
     "& .ql-picker-item[data-value='1']::before": {
       fontSize: "2em",
@@ -1039,13 +1051,15 @@ export const QuillEditor = styled("div", {
       content: "'Sans Serif'",
     },
 
-    "& .ql-picker-label[data-value=serif]::before, & .ql-picker-item[data-value=serif]::before": {
-      content: "'Serif'",
-    },
+    "& .ql-picker-label[data-value=serif]::before, & .ql-picker-item[data-value=serif]::before":
+      {
+        content: "'Serif'",
+      },
 
-    "& .ql-picker-label[data-value=monospace]::before, & .ql-picker-item[data-value=monospace]::before": {
-      content: "'Monospace'",
-    },
+    "& .ql-picker-label[data-value=monospace]::before, & .ql-picker-item[data-value=monospace]::before":
+      {
+        content: "'Monospace'",
+      },
 
     "& .ql-picker-item[data-value=serif]::before": {
       fontFamily: "Georgia, Times New Roman, serif",
@@ -1064,17 +1078,20 @@ export const QuillEditor = styled("div", {
       content: "'Normal'",
     },
 
-    "& .ql-picker-label[data-value=small]::before, & .ql-picker-item[data-value=small]::before": {
-      content: "'Small'",
-    },
+    "& .ql-picker-label[data-value=small]::before, & .ql-picker-item[data-value=small]::before":
+      {
+        content: "'Small'",
+      },
 
-    "& .ql-picker-label[data-value=large]::before, & .ql-picker-item[data-value=large]::before": {
-      content: "'Large'",
-    },
+    "& .ql-picker-label[data-value=large]::before, & .ql-picker-item[data-value=large]::before":
+      {
+        content: "'Large'",
+      },
 
-    "& .ql-picker-label[data-value=huge]::before, & .ql-picker-item[data-value=huge]::before": {
-      content: "'Huge'",
-    },
+    "& .ql-picker-label[data-value=huge]::before, & .ql-picker-item[data-value=huge]::before":
+      {
+        content: "'Huge'",
+      },
 
     "& .ql-picker-item[data-value=small]::before": {
       fontSize: "10px",
@@ -1136,9 +1153,10 @@ export const QuillEditor = styled("div", {
       borderColor: "#ccc",
     },
 
-    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
-      borderColor: "#000",
-    },
+    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover":
+      {
+        borderColor: "#000",
+      },
   },
 
   "& .ql-toolbar.ql-snow + .ql-container.ql-snow": {
@@ -1149,4 +1167,4 @@ export const QuillEditor = styled("div", {
   "& .ql-container.ql-snow": {
     border: "1px solid #ccc",
   },
-});
+});