@synerise/ds-code-area 1.3.1 → 1.3.3

package/dist/components/CodeAreaEditor.js

@@ -1,111 +1,88 @@
-var _excluded = ["renderAdditionalDescription", "description", "errorText", "style", "zIndex", "className", "counter", "fullscreenLabel", "tooltip", "label", "tooltipProps", "height", "noBorder"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FormFieldLabel } from '@synerise/ds-form-field';
-import { useResizeObserver } from '@synerise/ds-utils';
-import * as S from '../CodeArea.styles';
-import { calculateRequiredSpace } from '../utils/calculateRequiredSpace';
-import { getCharCount } from '../utils/getCharCount';
-import { getDefaultTexts } from '../utils/getDefaultTexts';
-import { CodeAreaEditorRaw } from './CodeAreaEditorRaw';
-import { ContentAbove } from './ContentAbove';
-import { ContentBelow } from './ContentBelow';
-import { FullscreenHeader } from './FullscreenHeader';
-export var CodeAreaEditor = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var renderAdditionalDescription = _ref.renderAdditionalDescription,
-    description = _ref.description,
-    errorText = _ref.errorText,
-    style = _ref.style,
-    zIndex = _ref.zIndex,
-    className = _ref.className,
-    counter = _ref.counter,
-    fullscreenLabel = _ref.fullscreenLabel,
-    tooltip = _ref.tooltip,
-    label = _ref.label,
-    tooltipProps = _ref.tooltipProps,
-    height = _ref.height,
-    noBorder = _ref.noBorder,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var allowFullscreen = props.allowFullscreen,
-    texts = props.texts,
-    isFullscreen = props.isFullscreen,
-    toggleFullscreen = props.toggleFullscreen,
-    syntaxOptions = props.syntaxOptions,
-    value = props.value,
-    renderFooterContent = props.renderFooterContent,
-    readOnly = props.readOnly,
-    defaultValue = props.defaultValue;
-  var _useState = useState(true),
-    isValid = _useState[0],
-    setIsValid = _useState[1];
-  var contentBelowRef = useRef(null);
-  var _useResizeObserver = useResizeObserver(contentBelowRef),
-    contentBelowHeight = _useResizeObserver.height;
-  var counterLimit = counter == null ? void 0 : counter.limit;
-  var count = getCharCount(value || defaultValue, counterLimit);
-  var renderCounter = useCallback(function (placement) {
-    return counterLimit && (!placement || (counter == null ? void 0 : counter.placement) === placement) && /*#__PURE__*/React.createElement(S.Counter, null, count, " / ", counter.limit);
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from "react";
+import { FormFieldLabel } from "@synerise/ds-form-field";
+import { useResizeObserver } from "@synerise/ds-utils";
+import { Counter, AdditionalDescription, CodeAreaWrapper, CodeAreaContent } from "../CodeArea.styles.js";
+import { calculateRequiredSpace } from "../utils/calculateRequiredSpace.js";
+import { getCharCount } from "../utils/getCharCount.js";
+import { getDefaultTexts } from "../utils/getDefaultTexts.js";
+import { CodeAreaEditorRaw } from "./CodeAreaEditorRaw.js";
+import { ContentAbove } from "./ContentAbove.js";
+import { ContentBelow } from "./ContentBelow.js";
+import { FullscreenHeader } from "./FullscreenHeader.js";
+const CodeAreaEditor = forwardRef(({
+  renderAdditionalDescription,
+  description,
+  errorText,
+  style,
+  zIndex,
+  className,
+  counter,
+  fullscreenLabel,
+  tooltip,
+  label,
+  tooltipProps,
+  height,
+  noBorder,
+  ...props
+}, forwardedRef) => {
+  const {
+    allowFullscreen,
+    texts,
+    isFullscreen,
+    toggleFullscreen,
+    syntaxOptions,
+    value,
+    renderFooterContent,
+    readOnly,
+    defaultValue
+  } = props;
+  const [isValid, setIsValid] = useState(true);
+  const contentBelowRef = useRef(null);
+  const {
+    height: contentBelowHeight
+  } = useResizeObserver(contentBelowRef);
+  const counterLimit = counter?.limit;
+  const count = getCharCount(value || defaultValue, counterLimit);
+  const renderCounter = useCallback((placement) => {
+    return counterLimit && (!placement || counter?.placement === placement) && /* @__PURE__ */ jsxs(Counter, { children: [
+      count,
+      " / ",
+      counter.limit
+    ] });
   }, [counterLimit, counter, count]);
-  var handleOnDidChangeMarkers = useCallback(function (markers) {
+  const handleOnDidChangeMarkers = useCallback((markers) => {
     setIsValid(!markers.length);
   }, []);
-  var labelWithTooltip = useMemo(function () {
-    return label && /*#__PURE__*/React.createElement(FormFieldLabel, {
-      label: label,
-      tooltip: tooltip,
-      tooltipConfig: tooltip || tooltipProps ? _extends({}, tooltipProps, {
-        placement: isFullscreen ? 'right' : undefined,
-        title: tooltip
-      }) : undefined
-    });
+  const labelWithTooltip = useMemo(() => {
+    return label && /* @__PURE__ */ jsx(FormFieldLabel, { label, tooltip, tooltipConfig: tooltip || tooltipProps ? {
+      ...tooltipProps,
+      placement: isFullscreen ? "right" : void 0,
+      title: tooltip
+    } : void 0 });
   }, [isFullscreen, tooltip, tooltipProps, label]);
-  var additionalDescription = useMemo(function () {
-    return renderAdditionalDescription && /*#__PURE__*/React.createElement(S.AdditionalDescription, null, renderAdditionalDescription({
-      isFullscreen: isFullscreen,
-      count: count,
-      isValid: isValid
-    }));
-  }, [count, isValid, isFullscreen, renderAdditionalDescription]);
-  useEffect(function () {
+  const additionalDescription = useMemo(() => renderAdditionalDescription && /* @__PURE__ */ jsx(AdditionalDescription, { children: renderAdditionalDescription({
+    isFullscreen,
+    count,
+    isValid
+  }) }), [count, isValid, isFullscreen, renderAdditionalDescription]);
+  useEffect(() => {
     setIsValid(!errorText);
   }, [errorText]);
-  var isSyntaxSelectVisible = syntaxOptions && syntaxOptions.length > 1 && !readOnly;
-  var isBottomBarShowing = Boolean(isSyntaxSelectVisible || allowFullscreen && !isFullscreen || renderFooterContent);
-  var requiredSpace = isFullscreen ? calculateRequiredSpace(isBottomBarShowing, contentBelowHeight) : 0;
-  var allTexts = getDefaultTexts(texts);
-  return /*#__PURE__*/React.createElement(S.CodeAreaWrapper, {
-    ref: forwardedRef,
-    readOnly: !!readOnly,
-    requiredSpace: requiredSpace,
-    className: className,
-    style: style,
-    isFullscreen: isFullscreen,
-    zIndex: zIndex,
-    customHeight: height
-  }, isFullscreen && /*#__PURE__*/React.createElement(FullscreenHeader, {
-    label: fullscreenLabel || labelWithTooltip,
-    texts: allTexts,
-    onClick: toggleFullscreen
-  }), !isFullscreen && /*#__PURE__*/React.createElement(ContentAbove, {
-    label: labelWithTooltip,
-    counter: renderCounter('top')
-  }), /*#__PURE__*/React.createElement(S.CodeAreaContent, null, /*#__PURE__*/React.createElement(CodeAreaEditorRaw, _extends({}, props, {
-    onDidChangeMarkers: handleOnDidChangeMarkers,
-    counter: counter,
-    errorText: errorText,
-    count: count,
-    counterLimit: counterLimit,
-    isBottomBarShowing: isBottomBarShowing,
-    isSyntaxSelectVisible: isSyntaxSelectVisible,
-    isValid: isValid,
-    noBorder: noBorder
-  })), /*#__PURE__*/React.createElement(ContentBelow, {
-    ref: contentBelowRef,
-    errorText: errorText,
-    description: description,
-    additionalDescription: additionalDescription,
-    counter: renderCounter(!isFullscreen ? 'bottom' : undefined)
-  })));
+  const isSyntaxSelectVisible = syntaxOptions && syntaxOptions.length > 1 && !readOnly;
+  const isBottomBarShowing = Boolean(isSyntaxSelectVisible || allowFullscreen && !isFullscreen || renderFooterContent);
+  const requiredSpace = isFullscreen ? calculateRequiredSpace(isBottomBarShowing, contentBelowHeight) : 0;
+  const allTexts = getDefaultTexts(texts);
+  return /* @__PURE__ */ jsxs(CodeAreaWrapper, { ref: forwardedRef, readOnly: !!readOnly, requiredSpace, className, style, isFullscreen, zIndex, customHeight: height, children: [
+    isFullscreen && /* @__PURE__ */ jsx(FullscreenHeader, { label: fullscreenLabel || labelWithTooltip, texts: allTexts, onClick: toggleFullscreen }),
+    !isFullscreen && /* @__PURE__ */ jsx(ContentAbove, { label: labelWithTooltip, counter: renderCounter("top") }),
+    /* @__PURE__ */ jsxs(CodeAreaContent, { children: [
+      /* @__PURE__ */ jsx(CodeAreaEditorRaw, { ...props, onDidChangeMarkers: handleOnDidChangeMarkers, counter, errorText, count, counterLimit, isBottomBarShowing, isSyntaxSelectVisible, isValid, noBorder }),
+      /* @__PURE__ */ jsx(ContentBelow, { ref: contentBelowRef, errorText, description, additionalDescription, counter: renderCounter(!isFullscreen ? "bottom" : void 0) })
+    ] })
+  ] });
 });
-export default CodeAreaEditor;
+export {
+  CodeAreaEditor,
+  CodeAreaEditor as default
+};

package/dist/components/CodeAreaEditorRaw.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type CodeAreaEditorRawProps } from '../CodeArea.types';
+import { default as React } from 'react';
+import { CodeAreaEditorRawProps } from '../CodeArea.types';
 export declare const CodeAreaEditorRaw: ({ onMount, beforeMount, options, errorText, texts, allowFullscreen, toggleFullscreen, renderFooterContent, isBottomBarShowing, isFullscreen, count, counterLimit, onChange, isValid, onDidChangeMarkers, isSyntaxSelectVisible, syntaxOptions, currentSyntax, readOnly, onSyntaxChange, loaderConfig, placeholder, value, defaultValue, noBorder, ...props }: CodeAreaEditorRawProps) => React.JSX.Element;
 export default CodeAreaEditorRaw;

package/dist/components/CodeAreaEditorRaw.js

@@ -1,88 +1,88 @@
-var _excluded = ["onMount", "beforeMount", "options", "errorText", "texts", "allowFullscreen", "toggleFullscreen", "renderFooterContent", "isBottomBarShowing", "isFullscreen", "count", "counterLimit", "onChange", "isValid", "onDidChangeMarkers", "isSyntaxSelectVisible", "syntaxOptions", "currentSyntax", "readOnly", "onSyntaxChange", "loaderConfig", "placeholder", "value", "defaultValue", "noBorder"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Editor, { loader } from '@monaco-editor/react';
-import { InlineSelect } from '@synerise/ds-inline-edit';
-import Loader from '@synerise/ds-loader';
-import { NOOP, useResizeObserver } from '@synerise/ds-utils';
-import * as S from '../CodeArea.styles';
-import { DS_MONACO_THEME, DS_MONACO_THEME_NAME, MONACO_DEFAULT_OPTIONS, TRIGGER_SOURCE } from '../constants';
-import { getDefaultTexts } from '../utils/getDefaultTexts';
-import { AriaContainer } from './AriaContainer';
-import { BottomBar } from './BottomBar';
-export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
-  var onMount = _ref.onMount,
-    beforeMount = _ref.beforeMount,
-    options = _ref.options,
-    errorText = _ref.errorText,
-    texts = _ref.texts,
-    allowFullscreen = _ref.allowFullscreen,
-    toggleFullscreen = _ref.toggleFullscreen,
-    renderFooterContent = _ref.renderFooterContent,
-    isBottomBarShowing = _ref.isBottomBarShowing,
-    isFullscreen = _ref.isFullscreen,
-    count = _ref.count,
-    counterLimit = _ref.counterLimit,
-    onChange = _ref.onChange,
-    isValid = _ref.isValid,
-    onDidChangeMarkers = _ref.onDidChangeMarkers,
-    isSyntaxSelectVisible = _ref.isSyntaxSelectVisible,
-    syntaxOptions = _ref.syntaxOptions,
-    currentSyntax = _ref.currentSyntax,
-    readOnly = _ref.readOnly,
-    onSyntaxChange = _ref.onSyntaxChange,
-    loaderConfig = _ref.loaderConfig,
-    placeholder = _ref.placeholder,
-    value = _ref.value,
-    defaultValue = _ref.defaultValue,
-    noBorder = _ref.noBorder,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var monacoRef = useRef(null);
-  var loaderConfigSet = useRef(false);
-  var editorRef = useRef(null);
-  var wrapperRef = useRef(null);
-  var _useState = useState(false),
-    isTouched = _useState[0],
-    setIsTouched = _useState[1];
-  var _useResizeObserver = useResizeObserver(wrapperRef),
-    height = _useResizeObserver.height,
-    width = _useResizeObserver.width;
-  var monacoAriaContainerElement = useMemo(function () {
-    return document.createElement('div');
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import Editor, { loader } from "@monaco-editor/react";
+import { InlineSelect } from "@synerise/ds-inline-edit";
+import Loader from "@synerise/ds-loader";
+import { useResizeObserver, NOOP } from "@synerise/ds-utils";
+import { SyntaxTitle, BottomBarElement, EditorWrapper, EditorInnerWrapper, EditorPlaceholder } from "../CodeArea.styles.js";
+import { MONACO_DEFAULT_OPTIONS, DS_MONACO_THEME_NAME, DS_MONACO_THEME, TRIGGER_SOURCE } from "../constants.js";
+import { getDefaultTexts } from "../utils/getDefaultTexts.js";
+import { AriaContainer } from "./AriaContainer.js";
+import { BottomBar } from "./BottomBar.js";
+const CodeAreaEditorRaw = ({
+  onMount,
+  beforeMount,
+  options,
+  errorText,
+  texts,
+  allowFullscreen,
+  toggleFullscreen,
+  renderFooterContent,
+  isBottomBarShowing,
+  isFullscreen,
+  count,
+  counterLimit,
+  onChange,
+  isValid,
+  onDidChangeMarkers,
+  isSyntaxSelectVisible,
+  syntaxOptions,
+  currentSyntax,
+  readOnly,
+  onSyntaxChange,
+  loaderConfig,
+  placeholder,
+  value,
+  defaultValue,
+  noBorder,
+  ...props
+}) => {
+  const monacoRef = useRef(null);
+  const loaderConfigSet = useRef(false);
+  const editorRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const [isTouched, setIsTouched] = useState(false);
+  const {
+    height,
+    width
+  } = useResizeObserver(wrapperRef);
+  const monacoAriaContainerElement = useMemo(() => {
+    return document.createElement("div");
   }, []);
   if (loaderConfig && !loaderConfigSet.current) {
     loader.config(loaderConfig);
     loaderConfigSet.current = true;
   }
-  var editorOptions = useMemo(function () {
-    return _extends({}, MONACO_DEFAULT_OPTIONS, options, {
-      readOnly: readOnly,
+  const editorOptions = useMemo(() => {
+    return {
+      ...MONACO_DEFAULT_OPTIONS,
+      ...options,
+      readOnly,
       domReadOnly: readOnly,
       ariaContainerElement: monacoAriaContainerElement
-    });
+    };
   }, [options, readOnly, monacoAriaContainerElement]);
-  var allTexts = useMemo(function () {
+  const allTexts = useMemo(() => {
     return getDefaultTexts(texts);
   }, [texts]);
-  var handleBeforeMount = useCallback(function (monacoInstance) {
+  const handleBeforeMount = useCallback((monacoInstance) => {
     monacoRef.current = monacoInstance;
     monacoInstance.editor.defineTheme(DS_MONACO_THEME_NAME, DS_MONACO_THEME);
     monacoInstance.editor.setTheme(DS_MONACO_THEME_NAME);
-    monacoInstance.editor.onDidChangeMarkers(function () {
-      var markers = monacoInstance.editor.getModelMarkers({});
+    monacoInstance.editor.onDidChangeMarkers(() => {
+      const markers = monacoInstance.editor.getModelMarkers({});
       onDidChangeMarkers && onDidChangeMarkers(markers);
     });
-    monacoInstance.editor.colorize('test', 'html', {});
+    monacoInstance.editor.colorize("test", "html", {});
     beforeMount && beforeMount(monacoInstance);
   }, [onDidChangeMarkers, beforeMount]);
-  var handleEditorDidMount = useCallback(function (monacoEditor, monacoInstance) {
+  const handleEditorDidMount = useCallback((monacoEditor, monacoInstance) => {
     editorRef.current = monacoEditor;
     onMount && onMount(monacoEditor, monacoInstance);
   }, [onMount]);
-  var handleChange = useCallback(function (newValue, event) {
+  const handleChange = useCallback((newValue, event) => {
     if (counterLimit && newValue && newValue.length > counterLimit) {
-      editorRef.current && editorRef.current.trigger(TRIGGER_SOURCE, 'undo', null);
+      editorRef.current && editorRef.current.trigger(TRIGGER_SOURCE, "undo", null);
       return;
     }
     if (editorRef.current) {
@@ -91,91 +91,67 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
     setIsTouched(true);
     onChange && onChange(newValue, event);
   }, [onChange, counterLimit]);
-  var _useMemo = useMemo(function () {
-      var source = syntaxOptions == null ? void 0 : syntaxOptions.map(function (item) {
-        var itemLabel = item.label,
-          language = item.language;
-        return {
-          key: language,
-          text: itemLabel || language
-        };
-      });
-      var currentItem = syntaxOptions == null ? void 0 : syntaxOptions.find(function (item) {
-        return item.language === currentSyntax;
-      });
+  const {
+    syntaxDataSource,
+    currentSyntaxItem
+  } = useMemo(() => {
+    const source = syntaxOptions?.map((item) => {
+      const {
+        label: itemLabel,
+        language
+      } = item;
       return {
-        syntaxDataSource: source,
-        currentSyntaxItem: currentItem || {
-          language: currentSyntax
-        }
+        key: language,
+        text: itemLabel || language
       };
-    }, [currentSyntax, syntaxOptions]),
-    syntaxDataSource = _useMemo.syntaxDataSource,
-    currentSyntaxItem = _useMemo.currentSyntaxItem;
-  var syntaxSelect = useMemo(function () {
-    return syntaxDataSource && syntaxDataSource.length > 1 && !readOnly ? /*#__PURE__*/React.createElement(InlineSelect, {
-      size: "small",
-      expanded: false,
-      input: {
-        name: 'syntax-select',
-        value: currentSyntaxItem.label || currentSyntaxItem.language,
-        onChange: NOOP
-      },
-      onValueChange: function onValueChange(item) {
-        item.key && onSyntaxChange && onSyntaxChange("" + item.key);
-      },
-      initialValue: currentSyntaxItem.label || currentSyntaxItem.language,
-      dataSource: syntaxDataSource
-    }) : /*#__PURE__*/React.createElement(S.SyntaxTitle, {
-      size: "small"
-    }, currentSyntaxItem.label || currentSyntaxItem.language);
+    });
+    const currentItem = syntaxOptions?.find((item) => {
+      return item.language === currentSyntax;
+    });
+    return {
+      syntaxDataSource: source,
+      currentSyntaxItem: currentItem || {
+        language: currentSyntax
+      }
+    };
+  }, [currentSyntax, syntaxOptions]);
+  const syntaxSelect = useMemo(() => {
+    return syntaxDataSource && syntaxDataSource.length > 1 && !readOnly ? /* @__PURE__ */ jsx(InlineSelect, { size: "small", expanded: false, input: {
+      name: "syntax-select",
+      value: currentSyntaxItem.label || currentSyntaxItem.language,
+      onChange: NOOP
+    }, onValueChange: (item) => {
+      item.key && onSyntaxChange && onSyntaxChange(`${item.key}`);
+    }, initialValue: currentSyntaxItem.label || currentSyntaxItem.language, dataSource: syntaxDataSource }) : /* @__PURE__ */ jsx(SyntaxTitle, { size: "small", children: currentSyntaxItem.label || currentSyntaxItem.language });
   }, [currentSyntaxItem.label, currentSyntaxItem.language, onSyntaxChange, readOnly, syntaxDataSource]);
-  var customFooterContent = useMemo(function () {
-    return renderFooterContent && /*#__PURE__*/React.createElement(S.BottomBarElement, null, renderFooterContent({
-      isFullscreen: isFullscreen,
-      count: count,
-      isValid: isValid
-    }));
+  const customFooterContent = useMemo(() => {
+    return renderFooterContent && /* @__PURE__ */ jsx(BottomBarElement, { children: renderFooterContent({
+      isFullscreen,
+      count,
+      isValid
+    }) });
   }, [renderFooterContent, isFullscreen, count, isValid]);
-  useEffect(function () {
+  useEffect(() => {
     if (editorRef.current) {
-      var _editorRef$current, _monacoRef$current;
-      var currentModel = (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.getModel();
-      currentModel && ((_monacoRef$current = monacoRef.current) == null ? void 0 : _monacoRef$current.editor.setModelLanguage(currentModel, currentSyntax));
+      const currentModel = editorRef.current?.getModel();
+      currentModel && monacoRef.current?.editor.setModelLanguage(currentModel, currentSyntax);
     }
   }, [currentSyntax]);
-  var shouldShowPlaceholder = useMemo(function () {
+  const shouldShowPlaceholder = useMemo(() => {
     return isTouched && !value || !value && !defaultValue;
   }, [defaultValue, isTouched, value]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.EditorWrapper, {
-    noBorder: noBorder,
-    hasError: Boolean(errorText)
-  }, /*#__PURE__*/React.createElement(S.EditorInnerWrapper, {
-    ref: wrapperRef
-  }, /*#__PURE__*/React.createElement(Editor, _extends({}, props, {
-    width: width,
-    value: value,
-    defaultValue: defaultValue,
-    height: height,
-    language: currentSyntax,
-    theme: DS_MONACO_THEME_NAME,
-    options: editorOptions,
-    onChange: handleChange,
-    beforeMount: handleBeforeMount,
-    onMount: handleEditorDidMount,
-    loading: /*#__PURE__*/React.createElement(Loader, null)
-  })), placeholder && /*#__PURE__*/React.createElement(S.EditorPlaceholder, {
-    shouldShowPlaceholder: shouldShowPlaceholder
-  }, placeholder)), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
-    texts: allTexts,
-    syntaxSelect: syntaxSelect,
-    allowFullscreen: allowFullscreen && !isFullscreen,
-    toggleFullscreen: toggleFullscreen,
-    customFooterContent: customFooterContent,
-    noBorder: noBorder,
-    hasError: Boolean(errorText)
-  })), /*#__PURE__*/React.createElement(AriaContainer, {
-    element: monacoAriaContainerElement
-  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(EditorWrapper, { noBorder, hasError: Boolean(errorText), children: [
+      /* @__PURE__ */ jsxs(EditorInnerWrapper, { ref: wrapperRef, children: [
+        /* @__PURE__ */ jsx(Editor, { ...props, width, value, defaultValue, height, language: currentSyntax, theme: DS_MONACO_THEME_NAME, options: editorOptions, onChange: handleChange, beforeMount: handleBeforeMount, onMount: handleEditorDidMount, loading: /* @__PURE__ */ jsx(Loader, {}) }),
+        placeholder && /* @__PURE__ */ jsx(EditorPlaceholder, { shouldShowPlaceholder, children: placeholder })
+      ] }),
+      isBottomBarShowing && /* @__PURE__ */ jsx(BottomBar, { texts: allTexts, syntaxSelect, allowFullscreen: allowFullscreen && !isFullscreen, toggleFullscreen, customFooterContent, noBorder, hasError: Boolean(errorText) })
+    ] }),
+    /* @__PURE__ */ jsx(AriaContainer, { element: monacoAriaContainerElement })
+  ] });
+};
+export {
+  CodeAreaEditorRaw,
+  CodeAreaEditorRaw as default
 };
-export default CodeAreaEditorRaw;

package/dist/components/ContentAbove.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 type ContentAboveProps = {
     label?: ReactNode;
     counter?: ReactNode;

package/dist/components/ContentAbove.js

@@ -1,11 +1,14 @@
-import React from 'react';
-import * as S from '../CodeArea.styles';
-export var ContentAbove = function ContentAbove(_ref) {
-  var label = _ref.label,
-    counter = _ref.counter;
-  return label || counter ? /*#__PURE__*/React.createElement(S.ContentAbove, null, label && /*#__PURE__*/React.createElement(S.LeftSide, {
-    "data-testid": "code-area-label"
-  }, label), counter && /*#__PURE__*/React.createElement(S.RightSide, {
-    "data-testid": "code-area-counter-top"
-  }, counter)) : /*#__PURE__*/React.createElement(React.Fragment, null);
-};
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { ContentAbove as ContentAbove$1, LeftSide, RightSide } from "../CodeArea.styles.js";
+const ContentAbove = ({
+  label,
+  counter
+}) => {
+  return label || counter ? /* @__PURE__ */ jsxs(ContentAbove$1, { children: [
+    label && /* @__PURE__ */ jsx(LeftSide, { "data-testid": "code-area-label", children: label }),
+    counter && /* @__PURE__ */ jsx(RightSide, { "data-testid": "code-area-counter-top", children: counter })
+  ] }) : /* @__PURE__ */ jsx(Fragment, {});
+};
+export {
+  ContentAbove
+};

package/dist/components/ContentBelow.d.ts

@@ -1,5 +1,5 @@
-import React, { type ReactNode } from 'react';
-import { type CodeAreaProps } from '../CodeArea.types';
+import { default as React, ReactNode } from 'react';
+import { CodeAreaProps } from '../CodeArea.types';
 export declare const ContentBelow: React.ForwardRefExoticComponent<Pick<CodeAreaProps, "description" | "errorText"> & {
     additionalDescription?: ReactNode;
     counter?: ReactNode;

package/dist/components/ContentBelow.js

@@ -1,20 +1,22 @@
-import React, { forwardRef } from 'react';
-import * as S from '../CodeArea.styles';
-export var ContentBelow = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var description = _ref.description,
-    additionalDescription = _ref.additionalDescription,
-    errorText = _ref.errorText,
-    counter = _ref.counter;
-  var isEmpty = !(description || additionalDescription || errorText || counter);
-  return /*#__PURE__*/React.createElement(S.ContentBelow, {
-    "data-testid": "code-area-below",
-    ref: ref,
-    isEmpty: isEmpty
-  }, (description || additionalDescription || errorText) && /*#__PURE__*/React.createElement(S.LeftSide, null, additionalDescription, errorText && /*#__PURE__*/React.createElement(S.ErrorText, {
-    "data-testid": "code-area-error"
-  }, errorText), description && /*#__PURE__*/React.createElement(S.Description, {
-    "data-testid": "code-area-description"
-  }, description)), counter && /*#__PURE__*/React.createElement(S.RightSide, {
-    "data-testid": "code-area-counter-bottom"
-  }, counter));
-});
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ContentBelow as ContentBelow$1, LeftSide, ErrorText, Description, RightSide } from "../CodeArea.styles.js";
+const ContentBelow = forwardRef(({
+  description,
+  additionalDescription,
+  errorText,
+  counter
+}, ref) => {
+  const isEmpty = !(description || additionalDescription || errorText || counter);
+  return /* @__PURE__ */ jsxs(ContentBelow$1, { "data-testid": "code-area-below", ref, isEmpty, children: [
+    (description || additionalDescription || errorText) && /* @__PURE__ */ jsxs(LeftSide, { children: [
+      additionalDescription,
+      errorText && /* @__PURE__ */ jsx(ErrorText, { "data-testid": "code-area-error", children: errorText }),
+      description && /* @__PURE__ */ jsx(Description, { "data-testid": "code-area-description", children: description })
+    ] }),
+    counter && /* @__PURE__ */ jsx(RightSide, { "data-testid": "code-area-counter-bottom", children: counter })
+  ] });
+});
+export {
+  ContentBelow
+};

package/dist/components/FullscreenHeader.d.ts

@@ -1,5 +1,5 @@
-import React, { type ReactNode } from 'react';
-import { type CodeAreaTexts } from '../CodeArea.types';
+import { default as React, ReactNode } from 'react';
+import { CodeAreaTexts } from '../CodeArea.types';
 type FullscreenHeaderProps = {
     label?: ReactNode;
     texts: CodeAreaTexts;