@rulab/adminjs-components 0.0.7 → 0.0.9

package/dist/index.js

@@ -1,7 +1,119 @@
+// src/components/ColorStatus/ColorStatusEdit.tsx
+import React, { useState, useEffect } from "react";
+import Select from "react-select";
+import chroma from "chroma-js";
+
+// src/components/ColorStatus/styles.ts
+import { styled } from "@adminjs/design-system/styled-components";
+var ColorStatusWrapper = styled.div`
+  margin-bottom: 24px;
+`;
+var Label = styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+var ShowLabel = styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  color: rgb(137, 138, 154);
+`;
+var ColorStatusBadgeWrapper = styled.div`
+  margin-bottom: 20px;
+`;
+var ColorStatusBadge = styled.div`
+  background-color: ${(props) => props.color};
+  width: fit-content;
+  padding: 5px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  color: white;
+  white-space: nowrap;
+`;
+
+// src/components/ColorStatus/ColorStatusEdit.tsx
+var dot = (color = "transparent") => ({
+  alignItems: "center",
+  display: "flex",
+  ":before": {
+    backgroundColor: color,
+    borderRadius: 10,
+    content: '" "',
+    display: "block",
+    marginRight: 8,
+    height: 10,
+    width: 10
+  }
+});
+var colorStyles = {
+  control: (styles) => ({ ...styles, backgroundColor: "white" }),
+  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
+    const color = chroma(data.color);
+    return {
+      ...styles,
+      backgroundColor: isSelected ? data.color : isFocused ? color.alpha(0.1).css() : void 0,
+      color: isSelected ? chroma.contrast(color, "white") > 2 ? "white" : "black" : data.color,
+      ":active": {
+        ...styles[":active"],
+        backgroundColor: isSelected ? data.color : color.alpha(0.3).css()
+      }
+    };
+  },
+  input: (styles) => ({ ...styles, ...dot() }),
+  placeholder: (styles) => ({ ...styles, ...dot("#ccc") }),
+  singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) })
+};
+var ColorStatus = ({ property, record, onChange }) => {
+  const availableValues = property.availableValues;
+  const currentOption = availableValues.find(
+    (item) => item.value === record.params.colorStatus
+  );
+  const [selectOption, setCurrentOption] = useState(currentOption);
+  const handleSelectChange = (option) => {
+    setCurrentOption(option);
+  };
+  useEffect(() => {
+    onChange(property.path, selectOption?.value);
+  }, [selectOption]);
+  return /* @__PURE__ */ React.createElement(ColorStatusWrapper, null, /* @__PURE__ */ React.createElement(Label, null, property.path), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      className: "basic-single",
+      classNamePrefix: "select",
+      defaultValue: selectOption ?? availableValues[0],
+      onChange: handleSelectChange,
+      isClearable: true,
+      name: "color",
+      options: availableValues,
+      styles: colorStyles
+    }
+  ));
+};
+var ColorStatusEdit_default = ColorStatus;
+
+// src/components/ColorStatus/ColorStatusShow.tsx
+import React2 from "react";
+var ColorStatusShow = ({ property, record }) => {
+  const currentOption = property.availableValues?.find(
+    (item) => item.value === record.params.colorStatus
+  );
+  return /* @__PURE__ */ React2.createElement(ColorStatusBadgeWrapper, null, /* @__PURE__ */ React2.createElement(ShowLabel, null, property.path), /* @__PURE__ */ React2.createElement(ColorStatusBadge, { color: currentOption.color }, record.params.colorStatus));
+};
+var ColorStatusShow_default = ColorStatusShow;
+
+// src/components/ColorStatus/ColorStatusList.tsx
+import React3 from "react";
+var ColorStatusList = ({ property, record }) => {
+  const currentOption = property.availableValues?.find(
+    (item) => item.value === record.params.colorStatus
+  );
+  return /* @__PURE__ */ React3.createElement(ColorStatusBadge, { color: currentOption.color }, record.params.colorStatus);
+};
+var ColorStatusList_default = ColorStatusList;
+
 // src/components/CustomSlug/CustomSlug.tsx
-import React, {
-  useEffect,
-  useState
+import React4, {
+  useEffect as useEffect2,
+  useState as useState2
 } from "react";
 import { ThemeProvider } from "styled-components";
 import { theme } from "@adminjs/design-system";
@@ -22,20 +134,20 @@ var slugifyTitle = (title) => {
 };
 
 // src/components/CustomSlug/styles.ts
-import { styled } from "@adminjs/design-system/styled-components";
+import { styled as styled2 } from "@adminjs/design-system/styled-components";
 import { Box, Button, Input } from "@adminjs/design-system";
-var StyledInputWrapper = styled(Box)`
+var StyledInputWrapper = styled2(Box)`
   display: flex;
   margin-bottom: 40px;
 `;
-var StyledCustomInput = styled(Input)`
+var StyledCustomInput = styled2(Input)`
   width: 100%;
   margin-right: 10px;
 `;
-var StyledGenerateButton = styled(Button)`
+var StyledGenerateButton = styled2(Button)`
   white-space: nowrap;
 `;
-var StyledLabel = styled.div`
+var StyledLabel = styled2.div`
   font-size: 12px;
   margin-bottom: 8px;
   text-transform: capitalize;
@@ -43,11 +155,11 @@ var StyledLabel = styled.div`
 
 // src/components/CustomSlug/CustomSlug.tsx
 var CustomSlug = ({ property, record, onChange }) => {
-  const [inputValue, setInputValue] = useState(record.params.slug);
-  useEffect(() => {
+  const [inputValue, setInputValue] = useState2(record.params.slug);
+  useEffect2(() => {
     onChange(property.path, inputValue);
   }, [inputValue]);
-  return /* @__PURE__ */ React.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path), /* @__PURE__ */ React.createElement(StyledInputWrapper, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React4.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React4.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path), /* @__PURE__ */ React4.createElement(StyledInputWrapper, null, /* @__PURE__ */ React4.createElement(
     StyledCustomInput,
     {
       id: property.path,
@@ -55,7 +167,7 @@ var CustomSlug = ({ property, record, onChange }) => {
       value: inputValue,
       onChange: handleInput
     }
-  ), /* @__PURE__ */ React.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
+  ), /* @__PURE__ */ React4.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
   function handleInput(e) {
     setInputValue(e.target.value);
   }
@@ -69,51 +181,246 @@ var CustomSlug = ({ property, record, onChange }) => {
 };
 var CustomSlug_default = CustomSlug;
 
+// src/components/Editor/Editor.jsx
+import React5, { memo, useState as useState3, useEffect as useEffect3, useRef } from "react";
+import { ThemeProvider as ThemeProvider2 } from "styled-components";
+import EditorJS from "@editorjs/editorjs";
+import { theme as theme2 } from "@adminjs/design-system";
+
+// src/components/Editor/styles.ts
+import { Box as Box2 } from "@adminjs/design-system";
+import { styled as styled3 } from "@adminjs/design-system/styled-components";
+var StyledLabel2 = styled3.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;
+var StyledShowLabel = styled3(StyledLabel2)`
+  color: rgb(137, 138, 154);
+  font-weight: 300;
+`;
+var StyledEditorWrapper = styled3(Box2)`
+  padding: 12px;
+  margin-bottom: 24px;
+  border: 1px solid rgb(187, 195, 203);
+`;
+var StyledEditorViewWrapper = styled3(Box2)`
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3 {
+    font-size: 14px;
+  }
+
+  p {
+    margin-bottom: 8px;
+  }
+
+  ol,
+  ul {
+    margin-left: 20px;
+    margin-bottom: 8px;
+  }
+
+  ol {
+    list-style: auto;
+  }
+
+  ul {
+    list-style: inherit;
+  }
+`;
+var StyledEditorShowWrapper = styled3(StyledEditorViewWrapper)`
+  margin-bottom: 24px;
+`;
+var StyledEditor = styled3.div`
+  .cdx-block,
+  .ce-header {
+    padding-left: 58px;
+  }
+
+  .cdx-list {
+    padding-left: 85px;
+  }
+
+  .ce-block__content {
+    width: 100%;
+    max-width: none;
+  }
+
+  .ce-toolbar__content {
+    max-width: none;
+    left: 0;
+  }
+
+  .ce-toolbar__actions {
+    left: 0;
+  }
+
+  h1.ce-header {
+    font-size: 22px;
+    font-weight: bold;
+  }
+
+  h2.ce-header {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  h3.ce-header {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  h4.ce-header {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  h5.ce-header {
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  h6.ce-header {
+    font-size: 14px;
+    font-weight: bold;
+  }
+`;
+
+// src/components/Editor/config.ts
+import Header from "@editorjs/header";
+import Paragraph from "@editorjs/paragraph";
+import List from "@editorjs/list";
+var EDITOR_TOOLS = {
+  paragraph: {
+    class: Paragraph,
+    inlineToolbar: true
+  },
+  list: List,
+  header: Header
+};
+
+// src/components/Editor/Editor.jsx
+var Editor = ({ property, record, onChangeAdmin, editorId }) => {
+  const [jsonData, setJsonData] = useState3();
+  const isSavedData = Boolean(record.params[property.path]);
+  const ref = useRef();
+  useEffect3(() => {
+    onChangeAdmin(property.path, jsonData);
+  }, [jsonData]);
+  useEffect3(() => {
+    if (!ref.current) {
+      const editor = new EditorJS({
+        holder: editorId,
+        tools: EDITOR_TOOLS,
+        data: isSavedData ? JSON.parse(record.params[property.path]) : "",
+        async onChange(api, event) {
+          const data = await api.saver.save();
+          setJsonData(JSON.stringify(data));
+        }
+      });
+      ref.current = editor;
+    }
+    return () => {
+      ref?.current?.destroy?.();
+    };
+  }, []);
+  return /* @__PURE__ */ React5.createElement(ThemeProvider2, { theme: theme2 }, /* @__PURE__ */ React5.createElement(StyledLabel2, null, property.path), /* @__PURE__ */ React5.createElement(StyledEditorWrapper, null, /* @__PURE__ */ React5.createElement(StyledEditor, { id: editorId })));
+};
+var Editor_default = Editor;
+
+// src/components/Editor/EditorList.jsx
+import React6 from "react";
+import { ThemeProvider as ThemeProvider3 } from "styled-components";
+import { theme as theme3 } from "@adminjs/design-system";
+
+// src/utils/parseHtml.ts
+import edjsHTML from "editorjs-html";
+var parseHtml = (jsonData) => {
+  const edjsParser = edjsHTML();
+  try {
+    const data = edjsParser.parse(JSON.parse(String(jsonData)));
+    return String(data).replace(/>,</g, "><");
+  } catch (e) {
+    return;
+  }
+};
+
+// src/components/Editor/EditorList.jsx
+var EditorList = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+  return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ React6.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
+};
+var EditorList_default = EditorList;
+
+// src/components/Editor/EditorShow.jsx
+import React7 from "react";
+import { ThemeProvider as ThemeProvider4 } from "styled-components";
+import { theme as theme4 } from "@adminjs/design-system";
+var EditorShow = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+  return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(StyledEditorShowWrapper, null, /* @__PURE__ */ React7.createElement(StyledShowLabel, null, property.path), htmlContent && /* @__PURE__ */ React7.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
+};
+var EditorShow_default = EditorShow;
+
 // src/components/StringList/StringList.tsx
-import { Button as Button3, Input as Input3, theme as theme2 } from "@adminjs/design-system";
-import React5, {
-  useEffect as useEffect2,
-  useState as useState3
+import { Button as Button3, Input as Input3, theme as theme5 } from "@adminjs/design-system";
+import React11, {
+  useEffect as useEffect4,
+  useState as useState5
 } from "react";
-import { ThemeProvider as ThemeProvider2 } from "styled-components";
+import { ThemeProvider as ThemeProvider5 } from "styled-components";
 
 // src/components/StringList/styles.ts
-import { Box as Box2, Input as Input2 } from "@adminjs/design-system";
-import { styled as styled2 } from "@adminjs/design-system/styled-components";
-var StyledWrapper = styled2(Box2)`
+import { Box as Box3, Input as Input2 } from "@adminjs/design-system";
+import { styled as styled4 } from "@adminjs/design-system/styled-components";
+var StyledWrapper = styled4(Box3)`
   display: flex;
   flex-direction: column;
   margin-bottom: 45px;
 `;
-var StyledCustomInput2 = styled2(Input2)`
+var StyledCustomInput2 = styled4(Input2)`
   width: 100%;
   margin-right: 10px;
 `;
-var StyledInputWrapper2 = styled2(Box2)`
+var StyledInputWrapper2 = styled4(Box3)`
   display: flex;
 `;
-var StyledListWrapper = styled2(Box2)`
+var StyledListWrapper = styled4(Box3)`
   margin-bottom: 15px;
 `;
-var StyledLabel2 = styled2.div`
+var StyledLabel3 = styled4.div`
   font-size: 12px;
   margin-bottom: 8px;
   text-transform: capitalize;
 `;
-var StyledShowLabel = styled2(StyledLabel2)`
+var StyledShowLabel2 = styled4(StyledLabel3)`
   line-height: 16px;
   color: rgb(137, 138, 154);
   font-weight: 300;
 `;
-var StyledShowWrapper = styled2(Box2)`
+var StyledShowWrapper = styled4(Box3)`
   margin-bottom: 35px;
 `;
-var StyledListItem = styled2.li`
+var StyledListItem = styled4.li`
   margin-bottom: 5px;
 `;
 
 // src/components/StringList/SortableList/SortableList.tsx
-import React4, { Fragment, useMemo as useMemo2, useState as useState2 } from "react";
+import React10, { Fragment, useMemo as useMemo2, useState as useState4 } from "react";
 import {
   DndContext,
   KeyboardSensor,
@@ -131,16 +438,16 @@ import {
 } from "@dnd-kit/sortable";
 
 // src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
-import React3, { createContext, useMemo } from "react";
+import React9, { createContext, useMemo } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { Button as Button2, Icon } from "@adminjs/design-system";
 
 // src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
-import React2, { useContext } from "react";
+import React8, { useContext } from "react";
 
 // src/components/StringList/SortableList/components/SortableItem/styles.ts
-import { styled as styled3 } from "@adminjs/design-system/styled-components";
-var StyledListItem2 = styled3.li`
+import { styled as styled5 } from "@adminjs/design-system/styled-components";
+var StyledListItem2 = styled5.li`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -152,7 +459,7 @@ var StyledListItem2 = styled3.li`
   border-radius: 5px;
   list-style: none;
 `;
-var StyledDragButton = styled3.button`
+var StyledDragButton = styled5.button`
   padding: 3px;
   margin-right: 15px;
   cursor: move;
@@ -163,7 +470,7 @@ var StyledDragButton = styled3.button`
 // src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
 var DragHandle = ({ context }) => {
   const { attributes, listeners, ref } = useContext(context);
-  return /* @__PURE__ */ React2.createElement(StyledDragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ React2.createElement("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" })));
+  return /* @__PURE__ */ React8.createElement(StyledDragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ React8.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ React8.createElement("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" })));
 };
 
 // src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
@@ -190,7 +497,7 @@ function SortableItem({
   const style = {
     opacity: isDragging ? 0.4 : void 0
   };
-  return /* @__PURE__ */ React3.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ React3.createElement(StyledListItem2, { ref: setNodeRef, style }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React9.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ React9.createElement(StyledListItem2, { ref: setNodeRef, style }, /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ React9.createElement(
     Button2,
     {
       variant: "outlined",
@@ -198,13 +505,13 @@ function SortableItem({
       size: "icon",
       onClick: (e) => onDelete(e, id)
     },
-    /* @__PURE__ */ React3.createElement(Icon, { icon: "X", color: "red" })
+    /* @__PURE__ */ React9.createElement(Icon, { icon: "X", color: "red" })
   )));
 }
 
 // src/components/StringList/SortableList/styles.ts
-import { styled as styled4 } from "@adminjs/design-system/styled-components";
-var StyledListWrapper2 = styled4.ul`
+import { styled as styled6 } from "@adminjs/design-system/styled-components";
+var StyledListWrapper2 = styled6.ul`
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -227,7 +534,7 @@ function SortableList({
   onChange,
   renderItem
 }) {
-  const [active, setActive] = useState2(null);
+  const [active, setActive] = useState4(null);
   const activeItem = useMemo2(
     () => items.find((item) => item.id === active?.id),
     [active, items]
@@ -238,7 +545,7 @@ function SortableList({
       coordinateGetter: sortableKeyboardCoordinates
     })
   );
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React10.createElement(
     DndContext,
     {
       sensors,
@@ -257,8 +564,8 @@ function SortableList({
         setActive(null);
       }
     },
-    /* @__PURE__ */ React4.createElement(SortableContext, { items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React4.createElement(StyledListWrapper2, { role: "application" }, items.map((item, index) => /* @__PURE__ */ React4.createElement(Fragment, { key: index }, renderItem(item))))),
-    /* @__PURE__ */ React4.createElement(DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)
+    /* @__PURE__ */ React10.createElement(SortableContext, { items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React10.createElement(StyledListWrapper2, { role: "application" }, items.map((item, index) => /* @__PURE__ */ React10.createElement(Fragment, { key: index }, renderItem(item))))),
+    /* @__PURE__ */ React10.createElement(DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)
   );
 }
 SortableList.Item = SortableItem;
@@ -275,20 +582,20 @@ var StringList = ({
 }) => {
   const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
   const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
-  const [inputValue, setInputValue] = useState3("");
-  const [list, setList] = useState3(initialList);
+  const [inputValue, setInputValue] = useState5("");
+  const [list, setList] = useState5(initialList);
   const serializedData = prepareDataForDatabase(list);
-  useEffect2(() => {
+  useEffect4(() => {
     onChange(property.path, serializedData);
   }, [serializedData]);
-  return /* @__PURE__ */ React5.createElement(ThemeProvider2, { theme: theme2 }, /* @__PURE__ */ React5.createElement(StyledLabel2, { htmlFor: "custom" }, property.path), /* @__PURE__ */ React5.createElement(StyledWrapper, null, /* @__PURE__ */ React5.createElement(StyledListWrapper, null, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React11.createElement(ThemeProvider5, { theme: theme5 }, /* @__PURE__ */ React11.createElement(StyledLabel3, { htmlFor: "custom" }, property.path), /* @__PURE__ */ React11.createElement(StyledWrapper, null, /* @__PURE__ */ React11.createElement(StyledListWrapper, null, /* @__PURE__ */ React11.createElement(
     SortableList,
     {
       items: list,
       onChange: setList,
-      renderItem: (item) => /* @__PURE__ */ React5.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
+      renderItem: (item) => /* @__PURE__ */ React11.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
     }
-  )), /* @__PURE__ */ React5.createElement(StyledInputWrapper2, null, /* @__PURE__ */ React5.createElement(
+  )), /* @__PURE__ */ React11.createElement(StyledInputWrapper2, null, /* @__PURE__ */ React11.createElement(
     Input3,
     {
       id: "stringList",
@@ -296,7 +603,7 @@ var StringList = ({
       value: serializedData,
       hidden: true
     }
-  ), /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     StyledCustomInput2,
     {
       id: "custom",
@@ -305,7 +612,7 @@ var StringList = ({
       onChange: handleInput,
       onKeyPress: handleEnterPress
     }
-  ), /* @__PURE__ */ React5.createElement(Button3, { variant: "outlined", onClick: handleAddButton }, "Add"))));
+  ), /* @__PURE__ */ React11.createElement(Button3, { variant: "outlined", onClick: handleAddButton }, "Add"))));
   function handleInput(e) {
     setInputValue(e.target.value);
   }
@@ -342,204 +649,24 @@ var StringList = ({
 var StringList_default = StringList;
 
 // src/components/StringList/StringListShow.tsx
-import React6 from "react";
-import { ThemeProvider as ThemeProvider3 } from "styled-components";
-import { theme as theme3 } from "@adminjs/design-system";
+import React12 from "react";
+import { ThemeProvider as ThemeProvider6 } from "styled-components";
+import { theme as theme6 } from "@adminjs/design-system";
 var StringListShow = ({
   property,
   record,
   stringListSeparator = separator
 }) => {
-  return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(StyledShowWrapper, null, /* @__PURE__ */ React6.createElement(StyledShowLabel, null, property.path), record.params.facts && /* @__PURE__ */ React6.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ React6.createElement(StyledListItem, { key: index }, `- ${item}`)))));
+  return /* @__PURE__ */ React12.createElement(ThemeProvider6, { theme: theme6 }, /* @__PURE__ */ React12.createElement(StyledShowWrapper, null, /* @__PURE__ */ React12.createElement(StyledShowLabel2, null, property.path), record.params.facts && /* @__PURE__ */ React12.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ React12.createElement(StyledListItem, { key: index }, `- ${item}`)))));
 };
 var StringListShow_default = StringListShow;
-
-// src/components/Editor/Editor.jsx
-import React7, { memo as memo2, useState as useState5, useEffect as useEffect4, useRef as useRef2 } from "react";
-import { ThemeProvider as ThemeProvider4 } from "styled-components";
-import EditorJS from "@editorjs/editorjs";
-import { theme as theme4 } from "@adminjs/design-system";
-
-// src/components/Editor/styles.ts
-import { Box as Box3 } from "@adminjs/design-system";
-import { styled as styled5 } from "@adminjs/design-system/styled-components";
-var StyledLabel3 = styled5.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
-var StyledShowLabel2 = styled5(StyledLabel3)`
-  color: rgb(137, 138, 154);
-  font-weight: 300;
-`;
-var StyledEditorWrapper = styled5(Box3)`
-  padding: 12px;
-  margin-bottom: 24px;
-  border: 1px solid rgb(187, 195, 203);
-`;
-var StyledEditorShowWrapper = styled5(Box3)`
-  margin-bottom: 24px;
-
-  h1,
-  h2,
-  h3 {
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-
-  h1 {
-    font-size: 18px;
-  }
-
-  h2 {
-    font-size: 16px;
-  }
-
-  h3 {
-    font-size: 14px;
-  }
-
-  p {
-    margin-bottom: 8px;
-  }
-
-  ol,
-  ul {
-    margin-left: 20px;
-    margin-bottom: 8px;
-  }
-
-  ol {
-    list-style: auto;
-  }
-
-  ul {
-    list-style: inherit;
-  }
-`;
-var StyledEditor = styled5.div`
-  .cdx-block,
-  .ce-header {
-    padding-left: 58px;
-  }
-
-  .cdx-list {
-    padding-left: 85px;
-  }
-
-  .ce-block__content {
-    width: 100%;
-    max-width: none;
-  }
-
-  .ce-toolbar__content {
-    max-width: none;
-    left: 0;
-  }
-
-  .ce-toolbar__actions {
-    left: 0;
-  }
-
-  h1.ce-header {
-    font-size: 22px;
-    font-weight: bold;
-  }
-
-  h2.ce-header {
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  h3.ce-header {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  h4.ce-header {
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  h5.ce-header {
-    font-size: 15px;
-    font-weight: bold;
-  }
-
-  h6.ce-header {
-    font-size: 14px;
-    font-weight: bold;
-  }
-`;
-
-// src/components/Editor/config.ts
-import Header from "@editorjs/header";
-import Paragraph from "@editorjs/paragraph";
-import List from "@editorjs/list";
-var EDITOR_TOOLS = {
-  paragraph: {
-    class: Paragraph,
-    inlineToolbar: true
-  },
-  list: List,
-  header: Header
-};
-
-// src/components/Editor/Editor.jsx
-var Editor = ({ property, record, onChangeAdmin, editorId }) => {
-  const [jsonData, setJsonData] = useState5();
-  const isSavedData = Boolean(record.params[property.path]);
-  const ref = useRef2();
-  useEffect4(() => {
-    onChangeAdmin(property.path, jsonData);
-  }, [jsonData]);
-  useEffect4(() => {
-    if (!ref.current) {
-      const editor = new EditorJS({
-        holder: editorId,
-        tools: EDITOR_TOOLS,
-        data: isSavedData ? JSON.parse(record.params[property.path]) : "",
-        async onChange(api, event) {
-          const data = await api.saver.save();
-          setJsonData(JSON.stringify(data));
-        }
-      });
-      ref.current = editor;
-    }
-    return () => {
-      ref?.current?.destroy?.();
-    };
-  }, []);
-  return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(StyledLabel3, null, property.path), /* @__PURE__ */ React7.createElement(StyledEditorWrapper, null, /* @__PURE__ */ React7.createElement(StyledEditor, { id: editorId })));
-};
-var Editor_default = Editor;
-
-// src/components/Editor/EditorShow.jsx
-import React8, { memo as memo3, useState as useState6, useEffect as useEffect5, useRef as useRef3 } from "react";
-import { ThemeProvider as ThemeProvider5 } from "styled-components";
-import { theme as theme5 } from "@adminjs/design-system";
-
-// src/utils/parseHtml.ts
-import edjsHTML from "editorjs-html";
-var parseHtml = (jsonData) => {
-  const edjsParser = edjsHTML();
-  try {
-    const data = edjsParser.parse(JSON.parse(String(jsonData)));
-    return String(data).replace(/>,</g, "><");
-  } catch (e) {
-    return;
-  }
-};
-
-// src/components/Editor/EditorShow.jsx
-var EditorShow = ({ property, record }) => {
-  const htmlContent = parseHtml(record.params[property.path]);
-  return /* @__PURE__ */ React8.createElement(ThemeProvider5, { theme: theme5 }, /* @__PURE__ */ React8.createElement(StyledEditorShowWrapper, null, /* @__PURE__ */ React8.createElement(StyledShowLabel2, null, property.path), htmlContent && /* @__PURE__ */ React8.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
-};
-var EditorShow_default = EditorShow;
 export {
+  ColorStatusEdit_default as ColorStatusEdit,
+  ColorStatusList_default as ColorStatusList,
+  ColorStatusShow_default as ColorStatusShow,
   CustomSlug_default as CustomSlug,
   Editor_default as Editor,
+  EditorList_default as EditorList,
   EditorShow_default as EditorShow,
   StringList_default as StringList,
   StringListShow_default as StringListShow