@rulab/adminjs-components 0.0.7 → 0.0.9

package/dist/index.cjs

@@ -30,17 +30,133 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ColorStatusEdit: () => ColorStatusEdit_default,
+  ColorStatusList: () => ColorStatusList_default,
+  ColorStatusShow: () => ColorStatusShow_default,
   CustomSlug: () => CustomSlug_default,
   Editor: () => Editor_default,
+  EditorList: () => EditorList_default,
   EditorShow: () => EditorShow_default,
   StringList: () => StringList_default,
   StringListShow: () => StringListShow_default
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/CustomSlug/CustomSlug.tsx
+// src/components/ColorStatus/ColorStatusEdit.tsx
 var import_react = __toESM(require("react"), 1);
-var import_styled_components2 = require("styled-components");
+var import_react_select = __toESM(require("react-select"), 1);
+var import_chroma_js = __toESM(require("chroma-js"), 1);
+
+// src/components/ColorStatus/styles.ts
+var import_styled_components = require("@adminjs/design-system/styled-components");
+var ColorStatusWrapper = import_styled_components.styled.div`
+  margin-bottom: 24px;
+`;
+var Label = import_styled_components.styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+var ShowLabel = import_styled_components.styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  color: rgb(137, 138, 154);
+`;
+var ColorStatusBadgeWrapper = import_styled_components.styled.div`
+  margin-bottom: 20px;
+`;
+var ColorStatusBadge = import_styled_components.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 = (0, import_chroma_js.default)(data.color);
+    return {
+      ...styles,
+      backgroundColor: isSelected ? data.color : isFocused ? color.alpha(0.1).css() : void 0,
+      color: isSelected ? import_chroma_js.default.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] = (0, import_react.useState)(currentOption);
+  const handleSelectChange = (option) => {
+    setCurrentOption(option);
+  };
+  (0, import_react.useEffect)(() => {
+    onChange(property.path, selectOption?.value);
+  }, [selectOption]);
+  return /* @__PURE__ */ import_react.default.createElement(ColorStatusWrapper, null, /* @__PURE__ */ import_react.default.createElement(Label, null, property.path), /* @__PURE__ */ import_react.default.createElement(
+    import_react_select.default,
+    {
+      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
+var import_react2 = __toESM(require("react"), 1);
+var ColorStatusShow = ({ property, record }) => {
+  const currentOption = property.availableValues?.find(
+    (item) => item.value === record.params.colorStatus
+  );
+  return /* @__PURE__ */ import_react2.default.createElement(ColorStatusBadgeWrapper, null, /* @__PURE__ */ import_react2.default.createElement(ShowLabel, null, property.path), /* @__PURE__ */ import_react2.default.createElement(ColorStatusBadge, { color: currentOption.color }, record.params.colorStatus));
+};
+var ColorStatusShow_default = ColorStatusShow;
+
+// src/components/ColorStatus/ColorStatusList.tsx
+var import_react3 = __toESM(require("react"), 1);
+var ColorStatusList = ({ property, record }) => {
+  const currentOption = property.availableValues?.find(
+    (item) => item.value === record.params.colorStatus
+  );
+  return /* @__PURE__ */ import_react3.default.createElement(ColorStatusBadge, { color: currentOption.color }, record.params.colorStatus);
+};
+var ColorStatusList_default = ColorStatusList;
+
+// src/components/CustomSlug/CustomSlug.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_styled_components3 = require("styled-components");
 var import_design_system2 = require("@adminjs/design-system");
 
 // src/utils/slugifyImport.ts
@@ -59,20 +175,20 @@ var slugifyTitle = (title) => {
 };
 
 // src/components/CustomSlug/styles.ts
-var import_styled_components = require("@adminjs/design-system/styled-components");
+var import_styled_components2 = require("@adminjs/design-system/styled-components");
 var import_design_system = require("@adminjs/design-system");
-var StyledInputWrapper = (0, import_styled_components.styled)(import_design_system.Box)`
+var StyledInputWrapper = (0, import_styled_components2.styled)(import_design_system.Box)`
   display: flex;
   margin-bottom: 40px;
 `;
-var StyledCustomInput = (0, import_styled_components.styled)(import_design_system.Input)`
+var StyledCustomInput = (0, import_styled_components2.styled)(import_design_system.Input)`
   width: 100%;
   margin-right: 10px;
 `;
-var StyledGenerateButton = (0, import_styled_components.styled)(import_design_system.Button)`
+var StyledGenerateButton = (0, import_styled_components2.styled)(import_design_system.Button)`
   white-space: nowrap;
 `;
-var StyledLabel = import_styled_components.styled.div`
+var StyledLabel = import_styled_components2.styled.div`
   font-size: 12px;
   margin-bottom: 8px;
   text-transform: capitalize;
@@ -80,11 +196,11 @@ var StyledLabel = import_styled_components.styled.div`
 
 // src/components/CustomSlug/CustomSlug.tsx
 var CustomSlug = ({ property, record, onChange }) => {
-  const [inputValue, setInputValue] = (0, import_react.useState)(record.params.slug);
-  (0, import_react.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react4.useState)(record.params.slug);
+  (0, import_react4.useEffect)(() => {
     onChange(property.path, inputValue);
   }, [inputValue]);
-  return /* @__PURE__ */ import_react.default.createElement(import_styled_components2.ThemeProvider, { theme: import_design_system2.theme }, /* @__PURE__ */ import_react.default.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path), /* @__PURE__ */ import_react.default.createElement(StyledInputWrapper, null, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(import_styled_components3.ThemeProvider, { theme: import_design_system2.theme }, /* @__PURE__ */ import_react4.default.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path), /* @__PURE__ */ import_react4.default.createElement(StyledInputWrapper, null, /* @__PURE__ */ import_react4.default.createElement(
     StyledCustomInput,
     {
       id: property.path,
@@ -92,7 +208,7 @@ var CustomSlug = ({ property, record, onChange }) => {
       value: inputValue,
       onChange: handleInput
     }
-  ), /* @__PURE__ */ import_react.default.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
+  ), /* @__PURE__ */ import_react4.default.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
   function handleInput(e) {
     setInputValue(e.target.value);
   }
@@ -106,62 +222,257 @@ var CustomSlug = ({ property, record, onChange }) => {
 };
 var CustomSlug_default = CustomSlug;
 
-// src/components/StringList/StringList.tsx
-var import_design_system5 = require("@adminjs/design-system");
+// src/components/Editor/Editor.jsx
 var import_react5 = __toESM(require("react"), 1);
+var import_styled_components5 = require("styled-components");
+var import_editorjs = __toESM(require("@editorjs/editorjs"), 1);
+var import_design_system4 = require("@adminjs/design-system");
+
+// src/components/Editor/styles.ts
+var import_design_system3 = require("@adminjs/design-system");
+var import_styled_components4 = require("@adminjs/design-system/styled-components");
+var StyledLabel2 = import_styled_components4.styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;
+var StyledShowLabel = (0, import_styled_components4.styled)(StyledLabel2)`
+  color: rgb(137, 138, 154);
+  font-weight: 300;
+`;
+var StyledEditorWrapper = (0, import_styled_components4.styled)(import_design_system3.Box)`
+  padding: 12px;
+  margin-bottom: 24px;
+  border: 1px solid rgb(187, 195, 203);
+`;
+var StyledEditorViewWrapper = (0, import_styled_components4.styled)(import_design_system3.Box)`
+  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 = (0, import_styled_components4.styled)(StyledEditorViewWrapper)`
+  margin-bottom: 24px;
+`;
+var StyledEditor = import_styled_components4.styled.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
+var import_header = __toESM(require("@editorjs/header"), 1);
+var import_paragraph = __toESM(require("@editorjs/paragraph"), 1);
+var import_list = __toESM(require("@editorjs/list"), 1);
+var EDITOR_TOOLS = {
+  paragraph: {
+    class: import_paragraph.default,
+    inlineToolbar: true
+  },
+  list: import_list.default,
+  header: import_header.default
+};
+
+// src/components/Editor/Editor.jsx
+var Editor = ({ property, record, onChangeAdmin, editorId }) => {
+  const [jsonData, setJsonData] = (0, import_react5.useState)();
+  const isSavedData = Boolean(record.params[property.path]);
+  const ref = (0, import_react5.useRef)();
+  (0, import_react5.useEffect)(() => {
+    onChangeAdmin(property.path, jsonData);
+  }, [jsonData]);
+  (0, import_react5.useEffect)(() => {
+    if (!ref.current) {
+      const editor = new import_editorjs.default({
+        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__ */ import_react5.default.createElement(import_styled_components5.ThemeProvider, { theme: import_design_system4.theme }, /* @__PURE__ */ import_react5.default.createElement(StyledLabel2, null, property.path), /* @__PURE__ */ import_react5.default.createElement(StyledEditorWrapper, null, /* @__PURE__ */ import_react5.default.createElement(StyledEditor, { id: editorId })));
+};
+var Editor_default = Editor;
+
+// src/components/Editor/EditorList.jsx
+var import_react6 = __toESM(require("react"), 1);
 var import_styled_components6 = require("styled-components");
+var import_design_system5 = require("@adminjs/design-system");
+
+// src/utils/parseHtml.ts
+var import_editorjs_html = __toESM(require("editorjs-html"), 1);
+var parseHtml = (jsonData) => {
+  const edjsParser = (0, import_editorjs_html.default)();
+  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__ */ import_react6.default.createElement(import_styled_components6.ThemeProvider, { theme: import_design_system5.theme }, /* @__PURE__ */ import_react6.default.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ import_react6.default.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
+};
+var EditorList_default = EditorList;
+
+// src/components/Editor/EditorShow.jsx
+var import_react7 = __toESM(require("react"), 1);
+var import_styled_components7 = require("styled-components");
+var import_design_system6 = require("@adminjs/design-system");
+var EditorShow = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+  return /* @__PURE__ */ import_react7.default.createElement(import_styled_components7.ThemeProvider, { theme: import_design_system6.theme }, /* @__PURE__ */ import_react7.default.createElement(StyledEditorShowWrapper, null, /* @__PURE__ */ import_react7.default.createElement(StyledShowLabel, null, property.path), htmlContent && /* @__PURE__ */ import_react7.default.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
+};
+var EditorShow_default = EditorShow;
+
+// src/components/StringList/StringList.tsx
+var import_design_system9 = require("@adminjs/design-system");
+var import_react11 = __toESM(require("react"), 1);
+var import_styled_components11 = require("styled-components");
 
 // src/components/StringList/styles.ts
-var import_design_system3 = require("@adminjs/design-system");
-var import_styled_components3 = require("@adminjs/design-system/styled-components");
-var StyledWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
+var import_design_system7 = require("@adminjs/design-system");
+var import_styled_components8 = require("@adminjs/design-system/styled-components");
+var StyledWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
   display: flex;
   flex-direction: column;
   margin-bottom: 45px;
 `;
-var StyledCustomInput2 = (0, import_styled_components3.styled)(import_design_system3.Input)`
+var StyledCustomInput2 = (0, import_styled_components8.styled)(import_design_system7.Input)`
   width: 100%;
   margin-right: 10px;
 `;
-var StyledInputWrapper2 = (0, import_styled_components3.styled)(import_design_system3.Box)`
+var StyledInputWrapper2 = (0, import_styled_components8.styled)(import_design_system7.Box)`
   display: flex;
 `;
-var StyledListWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
+var StyledListWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
   margin-bottom: 15px;
 `;
-var StyledLabel2 = import_styled_components3.styled.div`
+var StyledLabel3 = import_styled_components8.styled.div`
   font-size: 12px;
   margin-bottom: 8px;
   text-transform: capitalize;
 `;
-var StyledShowLabel = (0, import_styled_components3.styled)(StyledLabel2)`
+var StyledShowLabel2 = (0, import_styled_components8.styled)(StyledLabel3)`
   line-height: 16px;
   color: rgb(137, 138, 154);
   font-weight: 300;
 `;
-var StyledShowWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
+var StyledShowWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
   margin-bottom: 35px;
 `;
-var StyledListItem = import_styled_components3.styled.li`
+var StyledListItem = import_styled_components8.styled.li`
   margin-bottom: 5px;
 `;
 
 // src/components/StringList/SortableList/SortableList.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_core = require("@dnd-kit/core");
 var import_sortable2 = require("@dnd-kit/sortable");
 
 // src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_sortable = require("@dnd-kit/sortable");
-var import_design_system4 = require("@adminjs/design-system");
+var import_design_system8 = require("@adminjs/design-system");
 
 // src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 
 // src/components/StringList/SortableList/components/SortableItem/styles.ts
-var import_styled_components4 = require("@adminjs/design-system/styled-components");
-var StyledListItem2 = import_styled_components4.styled.li`
+var import_styled_components9 = require("@adminjs/design-system/styled-components");
+var StyledListItem2 = import_styled_components9.styled.li`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -173,7 +484,7 @@ var StyledListItem2 = import_styled_components4.styled.li`
   border-radius: 5px;
   list-style: none;
 `;
-var StyledDragButton = import_styled_components4.styled.button`
+var StyledDragButton = import_styled_components9.styled.button`
   padding: 3px;
   margin-right: 15px;
   cursor: move;
@@ -183,12 +494,12 @@ var StyledDragButton = import_styled_components4.styled.button`
 
 // src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
 var DragHandle = ({ context }) => {
-  const { attributes, listeners, ref } = (0, import_react2.useContext)(context);
-  return /* @__PURE__ */ import_react2.default.createElement(StyledDragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ import_react2.default.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ import_react2.default.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" })));
+  const { attributes, listeners, ref } = (0, import_react8.useContext)(context);
+  return /* @__PURE__ */ import_react8.default.createElement(StyledDragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ import_react8.default.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ import_react8.default.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
-var SortableItemContext = (0, import_react3.createContext)({
+var SortableItemContext = (0, import_react9.createContext)({
   attributes: {},
   listeners: void 0,
   ref() {
@@ -200,7 +511,7 @@ function SortableItem({
   onDelete
 }) {
   const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } = (0, import_sortable.useSortable)({ id });
-  const context = (0, import_react3.useMemo)(
+  const context = (0, import_react9.useMemo)(
     () => ({
       attributes,
       listeners,
@@ -211,21 +522,21 @@ function SortableItem({
   const style = {
     opacity: isDragging ? 0.4 : void 0
   };
-  return /* @__PURE__ */ import_react3.default.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ import_react3.default.createElement(StyledListItem2, { ref: setNodeRef, style }, /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ import_react3.default.createElement(
-    import_design_system4.Button,
+  return /* @__PURE__ */ import_react9.default.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ import_react9.default.createElement(StyledListItem2, { ref: setNodeRef, style }, /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ import_react9.default.createElement(
+    import_design_system8.Button,
     {
       variant: "outlined",
       color: "danger",
       size: "icon",
       onClick: (e) => onDelete(e, id)
     },
-    /* @__PURE__ */ import_react3.default.createElement(import_design_system4.Icon, { icon: "X", color: "red" })
+    /* @__PURE__ */ import_react9.default.createElement(import_design_system8.Icon, { icon: "X", color: "red" })
   )));
 }
 
 // src/components/StringList/SortableList/styles.ts
-var import_styled_components5 = require("@adminjs/design-system/styled-components");
-var StyledListWrapper2 = import_styled_components5.styled.ul`
+var import_styled_components10 = require("@adminjs/design-system/styled-components");
+var StyledListWrapper2 = import_styled_components10.styled.ul`
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -248,8 +559,8 @@ function SortableList({
   onChange,
   renderItem
 }) {
-  const [active, setActive] = (0, import_react4.useState)(null);
-  const activeItem = (0, import_react4.useMemo)(
+  const [active, setActive] = (0, import_react10.useState)(null);
+  const activeItem = (0, import_react10.useMemo)(
     () => items.find((item) => item.id === active?.id),
     [active, items]
   );
@@ -259,7 +570,7 @@ function SortableList({
       coordinateGetter: import_sortable2.sortableKeyboardCoordinates
     })
   );
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(
     import_core.DndContext,
     {
       sensors,
@@ -278,8 +589,8 @@ function SortableList({
         setActive(null);
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement(import_sortable2.SortableContext, { items, strategy: import_sortable2.verticalListSortingStrategy }, /* @__PURE__ */ import_react4.default.createElement(StyledListWrapper2, { role: "application" }, items.map((item, index) => /* @__PURE__ */ import_react4.default.createElement(import_react4.Fragment, { key: index }, renderItem(item))))),
-    /* @__PURE__ */ import_react4.default.createElement(import_core.DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)
+    /* @__PURE__ */ import_react10.default.createElement(import_sortable2.SortableContext, { items, strategy: import_sortable2.verticalListSortingStrategy }, /* @__PURE__ */ import_react10.default.createElement(StyledListWrapper2, { role: "application" }, items.map((item, index) => /* @__PURE__ */ import_react10.default.createElement(import_react10.Fragment, { key: index }, renderItem(item))))),
+    /* @__PURE__ */ import_react10.default.createElement(import_core.DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)
   );
 }
 SortableList.Item = SortableItem;
@@ -296,28 +607,28 @@ var StringList = ({
 }) => {
   const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
   const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
-  const [inputValue, setInputValue] = (0, import_react5.useState)("");
-  const [list, setList] = (0, import_react5.useState)(initialList);
+  const [inputValue, setInputValue] = (0, import_react11.useState)("");
+  const [list, setList] = (0, import_react11.useState)(initialList);
   const serializedData = prepareDataForDatabase(list);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     onChange(property.path, serializedData);
   }, [serializedData]);
-  return /* @__PURE__ */ import_react5.default.createElement(import_styled_components6.ThemeProvider, { theme: import_design_system5.theme }, /* @__PURE__ */ import_react5.default.createElement(StyledLabel2, { htmlFor: "custom" }, property.path), /* @__PURE__ */ import_react5.default.createElement(StyledWrapper, null, /* @__PURE__ */ import_react5.default.createElement(StyledListWrapper, null, /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(import_styled_components11.ThemeProvider, { theme: import_design_system9.theme }, /* @__PURE__ */ import_react11.default.createElement(StyledLabel3, { htmlFor: "custom" }, property.path), /* @__PURE__ */ import_react11.default.createElement(StyledWrapper, null, /* @__PURE__ */ import_react11.default.createElement(StyledListWrapper, null, /* @__PURE__ */ import_react11.default.createElement(
     SortableList,
     {
       items: list,
       onChange: setList,
-      renderItem: (item) => /* @__PURE__ */ import_react5.default.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
+      renderItem: (item) => /* @__PURE__ */ import_react11.default.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
     }
-  )), /* @__PURE__ */ import_react5.default.createElement(StyledInputWrapper2, null, /* @__PURE__ */ import_react5.default.createElement(
-    import_design_system5.Input,
+  )), /* @__PURE__ */ import_react11.default.createElement(StyledInputWrapper2, null, /* @__PURE__ */ import_react11.default.createElement(
+    import_design_system9.Input,
     {
       id: "stringList",
       name: property.path,
       value: serializedData,
       hidden: true
     }
-  ), /* @__PURE__ */ import_react5.default.createElement(
+  ), /* @__PURE__ */ import_react11.default.createElement(
     StyledCustomInput2,
     {
       id: "custom",
@@ -326,7 +637,7 @@ var StringList = ({
       onChange: handleInput,
       onKeyPress: handleEnterPress
     }
-  ), /* @__PURE__ */ import_react5.default.createElement(import_design_system5.Button, { variant: "outlined", onClick: handleAddButton }, "Add"))));
+  ), /* @__PURE__ */ import_react11.default.createElement(import_design_system9.Button, { variant: "outlined", onClick: handleAddButton }, "Add"))));
   function handleInput(e) {
     setInputValue(e.target.value);
   }
@@ -363,205 +674,25 @@ var StringList = ({
 var StringList_default = StringList;
 
 // src/components/StringList/StringListShow.tsx
-var import_react6 = __toESM(require("react"), 1);
-var import_styled_components7 = require("styled-components");
-var import_design_system6 = require("@adminjs/design-system");
+var import_react12 = __toESM(require("react"), 1);
+var import_styled_components12 = require("styled-components");
+var import_design_system10 = require("@adminjs/design-system");
 var StringListShow = ({
   property,
   record,
   stringListSeparator = separator
 }) => {
-  return /* @__PURE__ */ import_react6.default.createElement(import_styled_components7.ThemeProvider, { theme: import_design_system6.theme }, /* @__PURE__ */ import_react6.default.createElement(StyledShowWrapper, null, /* @__PURE__ */ import_react6.default.createElement(StyledShowLabel, null, property.path), record.params.facts && /* @__PURE__ */ import_react6.default.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ import_react6.default.createElement(StyledListItem, { key: index }, `- ${item}`)))));
+  return /* @__PURE__ */ import_react12.default.createElement(import_styled_components12.ThemeProvider, { theme: import_design_system10.theme }, /* @__PURE__ */ import_react12.default.createElement(StyledShowWrapper, null, /* @__PURE__ */ import_react12.default.createElement(StyledShowLabel2, null, property.path), record.params.facts && /* @__PURE__ */ import_react12.default.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ import_react12.default.createElement(StyledListItem, { key: index }, `- ${item}`)))));
 };
 var StringListShow_default = StringListShow;
-
-// src/components/Editor/Editor.jsx
-var import_react7 = __toESM(require("react"), 1);
-var import_styled_components9 = require("styled-components");
-var import_editorjs = __toESM(require("@editorjs/editorjs"), 1);
-var import_design_system8 = require("@adminjs/design-system");
-
-// src/components/Editor/styles.ts
-var import_design_system7 = require("@adminjs/design-system");
-var import_styled_components8 = require("@adminjs/design-system/styled-components");
-var StyledLabel3 = import_styled_components8.styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
-var StyledShowLabel2 = (0, import_styled_components8.styled)(StyledLabel3)`
-  color: rgb(137, 138, 154);
-  font-weight: 300;
-`;
-var StyledEditorWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
-  padding: 12px;
-  margin-bottom: 24px;
-  border: 1px solid rgb(187, 195, 203);
-`;
-var StyledEditorShowWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
-  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 = import_styled_components8.styled.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
-var import_header = __toESM(require("@editorjs/header"), 1);
-var import_paragraph = __toESM(require("@editorjs/paragraph"), 1);
-var import_list = __toESM(require("@editorjs/list"), 1);
-var EDITOR_TOOLS = {
-  paragraph: {
-    class: import_paragraph.default,
-    inlineToolbar: true
-  },
-  list: import_list.default,
-  header: import_header.default
-};
-
-// src/components/Editor/Editor.jsx
-var Editor = ({ property, record, onChangeAdmin, editorId }) => {
-  const [jsonData, setJsonData] = (0, import_react7.useState)();
-  const isSavedData = Boolean(record.params[property.path]);
-  const ref = (0, import_react7.useRef)();
-  (0, import_react7.useEffect)(() => {
-    onChangeAdmin(property.path, jsonData);
-  }, [jsonData]);
-  (0, import_react7.useEffect)(() => {
-    if (!ref.current) {
-      const editor = new import_editorjs.default({
-        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__ */ import_react7.default.createElement(import_styled_components9.ThemeProvider, { theme: import_design_system8.theme }, /* @__PURE__ */ import_react7.default.createElement(StyledLabel3, null, property.path), /* @__PURE__ */ import_react7.default.createElement(StyledEditorWrapper, null, /* @__PURE__ */ import_react7.default.createElement(StyledEditor, { id: editorId })));
-};
-var Editor_default = Editor;
-
-// src/components/Editor/EditorShow.jsx
-var import_react8 = __toESM(require("react"), 1);
-var import_styled_components10 = require("styled-components");
-var import_design_system9 = require("@adminjs/design-system");
-
-// src/utils/parseHtml.ts
-var import_editorjs_html = __toESM(require("editorjs-html"), 1);
-var parseHtml = (jsonData) => {
-  const edjsParser = (0, import_editorjs_html.default)();
-  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__ */ import_react8.default.createElement(import_styled_components10.ThemeProvider, { theme: import_design_system9.theme }, /* @__PURE__ */ import_react8.default.createElement(StyledEditorShowWrapper, null, /* @__PURE__ */ import_react8.default.createElement(StyledShowLabel2, null, property.path), htmlContent && /* @__PURE__ */ import_react8.default.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
-};
-var EditorShow_default = EditorShow;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ColorStatusEdit,
+  ColorStatusList,
+  ColorStatusShow,
   CustomSlug,
   Editor,
+  EditorList,
   EditorShow,
   StringList,
   StringListShow