@rulab/adminjs-components 0.0.13 → 0.1.0-alpha.10

package/dist/index.cjs

@@ -1,784 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// 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,
-  parseHtml: () => parseHtml
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/components/ColorStatus/ColorStatusEdit.tsx
-var import_react = __toESM(require("react"), 1);
-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[property.path]
-  );
-  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[property.path]
-  );
-  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[property.path]));
-};
-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[property.path]
-  );
-  return /* @__PURE__ */ import_react3.default.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]);
-};
-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/parseHtml.ts
-var import_editorjs_html = __toESM(require("editorjs-html"), 1);
-var tableParser = (block) => {
-  const rows = block.data.content.map((row, index) => {
-    const tableHtml = [];
-    if (block.data.withHeadings && index === 0) {
-      tableHtml.push(`<tr>${row.map((cell) => `<th>${cell}</th>`)}</tr>`);
-    } else {
-      tableHtml.push(`<tr>${row.map((cell) => `<td>${cell}</td>`)}</tr>`);
-    }
-    return tableHtml;
-  });
-  if (block.data.withHeadings) {
-    const heading = rows[0];
-    const [, ...content] = rows;
-    return `<table><thead>${heading.join("")}</thead><tbody>${content.join("")}</tbody></table>`;
-  } else {
-    return `<table><tbody>${rows.join("")}</tbody></table>`;
-  }
-};
-var audioPlayerParser = (block) => {
-  return `<audio controls src={${block.data.src}} />`;
-};
-var parseHtml = (jsonData) => {
-  const edjsParser = (0, import_editorjs_html.default)({
-    table: tableParser,
-    audioPlayer: audioPlayerParser
-  });
-  try {
-    const data = edjsParser.parse(JSON.parse(jsonData));
-    return String(data).replace(/>,</g, "><");
-  } catch (e) {
-    console.log("error", e);
-  }
-};
-
-// src/utils/slugifyImport.ts
-var import_slugify = __toESM(require("slugify"), 1);
-var slugifyImport_default = import_slugify.default;
-
-// src/utils/slugifyTitle.ts
-var slugifyTitle = (title) => {
-  return slugifyImport_default(title, {
-    replacement: "-",
-    remove: /[*+~.()'"!:@]/g,
-    lower: true,
-    locale: "vi",
-    trim: true
-  });
-};
-
-// src/components/CustomSlug/styles.ts
-var import_styled_components2 = require("@adminjs/design-system/styled-components");
-var import_design_system = require("@adminjs/design-system");
-var StyledInputWrapper = (0, import_styled_components2.styled)(import_design_system.Box)`
-  display: flex;
-  margin-bottom: 40px;
-`;
-var StyledCustomInput = (0, import_styled_components2.styled)(import_design_system.Input)`
-  width: 100%;
-  margin-right: 10px;
-`;
-var StyledGenerateButton = (0, import_styled_components2.styled)(import_design_system.Button)`
-  white-space: nowrap;
-`;
-var StyledLabel = import_styled_components2.styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
-
-// src/components/CustomSlug/CustomSlug.tsx
-var CustomSlug = ({
-  property,
-  record,
-  resource,
-  onChange
-}) => {
-  const [inputValue, setInputValue] = (0, import_react4.useState)(record.params.slug);
-  (0, import_react4.useEffect)(() => {
-    onChange(property.path, inputValue);
-  }, [inputValue]);
-  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,
-      name: property.path,
-      value: inputValue,
-      onChange: handleInput
-    }
-  ), /* @__PURE__ */ import_react4.default.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
-  function handleInput(e) {
-    setInputValue(e.target.value);
-  }
-  function generateSlug(e) {
-    e.preventDefault();
-    const slugSource = record.params[property.props.sourceField ?? resource.titleProperty.name];
-    if (slugSource) {
-      setInputValue(slugifyTitle(slugSource));
-    }
-  }
-};
-var CustomSlug_default = CustomSlug;
-
-// 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;
-  }
-
-  table,
-  audio {
-    margin: 16px 0;
-  }
-
-  table,
-  th,
-  td {
-    border: 1px solid;
-  }
-
-  th {
-    font-weight: bold;
-  }
-
-  th,
-  td {
-    padding: 4px;
-  }
-
-  blockquote {
-    display: block;
-    padding: 5px 8px;
-    width: fit-content;
-    border-radius: 4px;
-    background-color: #e6e6e6;
-  }
-`;
-var StyledEditorShowWrapper = (0, import_styled_components4.styled)(StyledEditorViewWrapper)`
-  margin-bottom: 24px;
-`;
-var StyledEditor = import_styled_components4.styled.div`
-  audio,
-  .cdx-block,
-  .ce-header {
-    padding-left: 58px;
-  }
-
-  input {
-    margin-left: 58px;
-    width: auto;
-  }
-
-  .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_list = __toESM(require("@editorjs/list"), 1);
-var import_paragraph = __toESM(require("@editorjs/paragraph"), 1);
-var import_quote = __toESM(require("@editorjs/quote"), 1);
-var import_table = __toESM(require("@editorjs/table"), 1);
-var import_editorjs_audio_player = __toESM(require("editorjs-audio-player"), 1);
-var EDITOR_TOOLS = {
-  paragraph: {
-    class: import_paragraph.default,
-    inlineToolbar: true
-  },
-  list: {
-    class: import_list.default,
-    inlineToolbar: true
-  },
-  header: {
-    class: import_header.default,
-    config: {
-      placeholder: "Enter a header",
-      levels: [2, 3, 4],
-      defaultLevel: 2
-    }
-  },
-  table: {
-    class: import_table.default,
-    inlineToolbar: true
-  },
-  quote: {
-    class: import_quote.default,
-    inlineToolbar: true
-  },
-  audioPlayer: import_editorjs_audio_player.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_design_system5 = require("@adminjs/design-system");
-var import_styled_components6 = require("styled-components");
-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_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_components8.styled)(import_design_system7.Input)`
-  width: 100%;
-  margin-right: 10px;
-`;
-var StyledInputWrapper2 = (0, import_styled_components8.styled)(import_design_system7.Box)`
-  display: flex;
-`;
-var StyledListWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
-  margin-bottom: 15px;
-`;
-var StyledLabel3 = import_styled_components8.styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
-var StyledShowLabel2 = (0, import_styled_components8.styled)(StyledLabel3)`
-  line-height: 16px;
-  color: rgb(137, 138, 154);
-  font-weight: 300;
-`;
-var StyledShowWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
-  margin-bottom: 35px;
-`;
-var StyledListItem = import_styled_components8.styled.li`
-  margin-bottom: 5px;
-`;
-
-// src/components/StringList/SortableList/SortableList.tsx
-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_react9 = __toESM(require("react"), 1);
-var import_sortable = require("@dnd-kit/sortable");
-var import_design_system8 = require("@adminjs/design-system");
-
-// src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
-var import_react8 = __toESM(require("react"), 1);
-
-// src/components/StringList/SortableList/components/SortableItem/styles.ts
-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;
-  background-color: #fff;
-  padding: 10px 20px 10px 15px;
-  box-shadow:
-    0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
-    0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-  border-radius: 5px;
-  list-style: none;
-`;
-var StyledDragButton = import_styled_components9.styled.button`
-  padding: 3px;
-  margin-right: 15px;
-  cursor: move;
-  background: none;
-  border: none;
-`;
-
-// src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
-var DragHandle = ({ context }) => {
-  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_react9.createContext)({
-  attributes: {},
-  listeners: void 0,
-  ref() {
-  }
-});
-function SortableItem({
-  children,
-  id,
-  onDelete
-}) {
-  const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } = (0, import_sortable.useSortable)({ id });
-  const context = (0, import_react9.useMemo)(
-    () => ({
-      attributes,
-      listeners,
-      ref: setActivatorNodeRef
-    }),
-    [attributes, listeners, setActivatorNodeRef]
-  );
-  const style = {
-    opacity: isDragging ? 0.4 : void 0
-  };
-  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_react9.default.createElement(import_design_system8.Icon, { icon: "X", color: "red" })
-  )));
-}
-
-// src/components/StringList/SortableList/styles.ts
-var import_styled_components10 = require("@adminjs/design-system/styled-components");
-var StyledListWrapper2 = import_styled_components10.styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0;
-  list-style: none;
-`;
-
-// src/components/StringList/SortableList/SortableList.tsx
-var dropAnimationConfig = {
-  sideEffects: (0, import_core.defaultDropAnimationSideEffects)({
-    styles: {
-      active: {
-        opacity: "0.4"
-      }
-    }
-  })
-};
-function SortableList({
-  items,
-  onChange,
-  renderItem
-}) {
-  const [active, setActive] = (0, import_react10.useState)(null);
-  const activeItem = (0, import_react10.useMemo)(
-    () => items.find((item) => item.id === active?.id),
-    [active, items]
-  );
-  const sensors = (0, import_core.useSensors)(
-    (0, import_core.useSensor)(import_core.PointerSensor),
-    (0, import_core.useSensor)(import_core.KeyboardSensor, {
-      coordinateGetter: import_sortable2.sortableKeyboardCoordinates
-    })
-  );
-  return /* @__PURE__ */ import_react10.default.createElement(
-    import_core.DndContext,
-    {
-      sensors,
-      onDragStart: ({ active: active2 }) => {
-        setActive(active2);
-      },
-      onDragEnd: ({ active: active2, over }) => {
-        if (over && active2.id !== over?.id) {
-          const activeIndex = items.findIndex(({ id }) => id === active2.id);
-          const overIndex = items.findIndex(({ id }) => id === over.id);
-          onChange((0, import_sortable2.arrayMove)(items, activeIndex, overIndex));
-        }
-        setActive(null);
-      },
-      onDragCancel: () => {
-        setActive(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;
-
-// src/components/StringList/constants.ts
-var separator = "|";
-
-// src/components/StringList/StringList.tsx
-var StringList = ({
-  record,
-  onChange,
-  property,
-  stringListSeparator = separator
-}) => {
-  const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
-  const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
-  const [inputValue, setInputValue] = (0, import_react11.useState)("");
-  const [list, setList] = (0, import_react11.useState)(initialList);
-  const serializedData = prepareDataForDatabase(list);
-  (0, import_react11.useEffect)(() => {
-    onChange(property.path, serializedData);
-  }, [serializedData]);
-  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_react11.default.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
-    }
-  )), /* @__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_react11.default.createElement(
-    StyledCustomInput2,
-    {
-      id: "custom",
-      name: "customInput",
-      value: inputValue,
-      onChange: handleInput,
-      onKeyPress: handleEnterPress
-    }
-  ), /* @__PURE__ */ import_react11.default.createElement(import_design_system9.Button, { variant: "outlined", onClick: handleAddButton }, "Add"))));
-  function handleInput(e) {
-    setInputValue(e.target.value);
-  }
-  function handleEnterPress(e) {
-    if (e.key === "Enter") {
-      handleAddButton(e);
-    }
-  }
-  function handleAddButton(e) {
-    e.preventDefault();
-    if (Boolean(inputValue)) {
-      setList([...list, createListObject(inputValue)]);
-      setInputValue("");
-    }
-  }
-  function handleDeleteButton(e, id) {
-    e.preventDefault();
-    const newData = list.filter((item) => item.id !== id);
-    setList(newData);
-  }
-  function prepareDataForDatabase(list2) {
-    return list2.map(({ value }) => value).join(stringListSeparator);
-  }
-  function prepareDataForList(str) {
-    return str.split(stringListSeparator).map((item) => createListObject(item));
-  }
-  function createListObject(value) {
-    return {
-      id: `${Date.now()}-${Math.floor(Math.random() * 1e3)}`,
-      value
-    };
-  }
-};
-var StringList_default = StringList;
-
-// src/components/StringList/StringListShow.tsx
-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_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;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ColorStatusEdit,
-  ColorStatusList,
-  ColorStatusShow,
-  CustomSlug,
-  Editor,
-  EditorList,
-  EditorShow,
-  StringList,
-  StringListShow,
-  parseHtml
-});