@synerise/ds-code-area 1.3.1 → 1.3.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.3.2...@synerise/ds-code-area@1.3.3) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-code-area
+
+## [1.3.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.3.1...@synerise/ds-code-area@1.3.2) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-code-area
+
 ## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.3.0...@synerise/ds-code-area@1.3.1) (2026-03-09)
 
 ### Bug Fixes

package/README.md

@@ -55,7 +55,7 @@ const syntaxOptions = [
 | allowFullscreen             | renders fullscreen mode button                                 | `boolean`                                               | -       |
 | readOnly                    | renders readOnly mode                                          | `boolean`                                               | -       |
 | tooltip                     | tooltip text displayed next to label                           | `ReactNode`                                             | -       |
-| tooltipProps                | tooltip properties (see @synerise/ds-tooltip)                  | `TooltipExtendedProps & TooltipProps`                   | -       |
+| tooltipProps                | tooltip properties (see @synerise/ds-tooltip)                  | `TooltipProps`                                          | -       |
 | style                       | custom style added to outermost div                            | `CSSProperties`                                         | -       |
 | className                   | class name to add to outermost div                             | `string`                                                | -       |
 | renderFooterContent         | renders custom content in footer bar                           | `(CodeAreaStateProps) => ReactNode`                     | -       |
@@ -66,6 +66,8 @@ const syntaxOptions = [
 | getPopupContainer           | customise where fullscreen layer is rendered into              | getPopupContainer (@synerise/ds-utils)                  | -       |
 | placeholder                 | placeholder content                                            | `ReactNode`                                             | -       |
 | noBorder                    | remove border from wrapper                                     | `boolean`                                               | -       |
+| height                      | height of the editor wrapper                                   | `string \| number`                                      | `295px` |
+| zIndex                      | z-index of the fullscreen overlay                              | `string \| number`                                      | `zindex-modal` token |
 
 ### CodeAreaTexts
 

package/dist/CodeArea.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type CodeAreaProps } from './CodeArea.types';
+import { default as React } from 'react';
+import { CodeAreaProps } from './CodeArea.types';
 declare const CodeArea: ({ getPopupContainer, onFullscreenChange, ...codeAreaProps }: CodeAreaProps) => React.JSX.Element;
 export default CodeArea;

package/dist/CodeArea.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/CodeArea.figma.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import CodeArea from "./CodeArea.js";
+const FIGMA_URL = "https://www.figma.com/design/fsSZONXpVvtrDsCgtu01Jb/Synerise-Design-System?node-id=3143:21126&m=dev";
+figma.connect(CodeArea, FIGMA_URL, {
+  variant: {
+    State: "Default",
+    Label: "True",
+    Border: "True"
+  },
+  example: () => /* @__PURE__ */ jsx(CodeArea, { label: "Label", description: "Description", currentSyntax: "json", value: "" })
+});
+figma.connect(CodeArea, FIGMA_URL, {
+  variant: {
+    State: "Default",
+    Label: "False",
+    Border: "True"
+  },
+  example: () => /* @__PURE__ */ jsx(CodeArea, { currentSyntax: "json", value: "" })
+});
+figma.connect(CodeArea, FIGMA_URL, {
+  variant: {
+    State: "Default",
+    Label: "False",
+    Border: "False"
+  },
+  example: () => /* @__PURE__ */ jsx(CodeArea, { currentSyntax: "json", value: "", noBorder: true })
+});
+figma.connect(CodeArea, FIGMA_URL, {
+  variant: {
+    State: "Validated",
+    Label: "True",
+    Border: "True"
+  },
+  example: () => /* @__PURE__ */ jsx(CodeArea, { label: "Label", description: "Description", currentSyntax: "json", value: "", errorText: "Fill Code area" })
+});
+figma.connect(CodeArea, FIGMA_URL, {
+  variant: {
+    State: "Validated",
+    Label: "False",
+    Border: "True"
+  },
+  example: () => /* @__PURE__ */ jsx(CodeArea, { currentSyntax: "json", value: "", errorText: "Fill Code area" })
+});
+figma.connect(CodeArea, FIGMA_URL, {
+  variant: {
+    State: "Validated",
+    Label: "False",
+    Border: "False"
+  },
+  example: () => /* @__PURE__ */ jsx(CodeArea, { currentSyntax: "json", value: "", errorText: "Fill Code area", noBorder: true })
+});
+figma.connect(CodeArea, FIGMA_URL, {
+  variant: {
+    State: "Read only",
+    Label: "False",
+    Border: "True"
+  },
+  example: () => /* @__PURE__ */ jsx(CodeArea, { currentSyntax: "json", value: "", readOnly: true })
+});
+figma.connect(CodeArea, FIGMA_URL, {
+  variant: {
+    State: "Read only",
+    Label: "False",
+    Border: "False"
+  },
+  example: () => /* @__PURE__ */ jsx(CodeArea, { currentSyntax: "json", value: "", readOnly: true, noBorder: true })
+});

package/dist/CodeArea.js

@@ -1,32 +1,34 @@
-var _excluded = ["getPopupContainer", "onFullscreenChange"];
-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, { useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { getPopupContainer as defaultGetPopupContainer } from '@synerise/ds-utils';
-import { CodeAreaEditor } from './components';
-var CodeArea = function CodeArea(_ref) {
-  var _ref$getPopupContaine = _ref.getPopupContainer,
-    getPopupContainer = _ref$getPopupContaine === void 0 ? defaultGetPopupContainer : _ref$getPopupContaine,
-    onFullscreenChange = _ref.onFullscreenChange,
-    codeAreaProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(false),
-    isFullscreen = _useState[0],
-    setIsFullscreen = _useState[1];
-  var wrapperRef = useRef(null);
-  var toggleFullscreen = function toggleFullscreen() {
-    setIsFullscreen(function (prevState) {
-      return !prevState;
-    });
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { createPortal } from "react-dom";
+import { getPopupContainer } from "@synerise/ds-utils";
+import "styled-components";
+import "@synerise/ds-typography";
+import "./components/ContentBelow.js";
+import "@synerise/ds-button";
+import "@synerise/ds-icon";
+import "@monaco-editor/react";
+import "@synerise/ds-inline-edit";
+import "@synerise/ds-loader";
+import "./constants.js";
+import "react-intl";
+import { CodeAreaEditor } from "./components/CodeAreaEditor.js";
+const CodeArea = ({
+  getPopupContainer: getPopupContainer$1 = getPopupContainer,
+  onFullscreenChange,
+  ...codeAreaProps
+}) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const wrapperRef = useRef(null);
+  const toggleFullscreen = () => {
+    setIsFullscreen((prevState) => !prevState);
     onFullscreenChange && onFullscreenChange(isFullscreen);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
-    toggleFullscreen: toggleFullscreen,
-    isFullscreen: false,
-    ref: wrapperRef
-  })), wrapperRef.current && isFullscreen && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
-    toggleFullscreen: toggleFullscreen,
-    isFullscreen: isFullscreen
-  })), getPopupContainer(wrapperRef.current)));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CodeAreaEditor, { ...codeAreaProps, toggleFullscreen, isFullscreen: false, ref: wrapperRef }),
+    wrapperRef.current && isFullscreen && createPortal(/* @__PURE__ */ jsx(CodeAreaEditor, { ...codeAreaProps, toggleFullscreen, isFullscreen }), getPopupContainer$1(wrapperRef.current))
+  ] });
+};
+export {
+  CodeArea as default
 };
-export default CodeArea;

package/dist/CodeArea.styles.d.ts

@@ -1,42 +1,42 @@
-export declare const AriaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EditorPlaceholder: import("styled-components").StyledComponent<"div", any, {
+export declare const AriaContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const EditorPlaceholder: import('styled-components').StyledComponent<"div", any, {
     shouldShowPlaceholder?: boolean;
 }, never>;
-export declare const EditorInnerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CodeAreaContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EditorWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const EditorInnerWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CodeAreaContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const EditorWrapper: import('styled-components').StyledComponent<"div", any, {
     hasError: boolean;
     noBorder?: boolean;
 }, never>;
-export declare const FullscreenHeaderTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => React.JSX.Element, any, {}, never>;
-export declare const FullscreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CodeAreaWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const FullscreenHeaderTitle: import('styled-components').StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import('@synerise/ds-typography/dist/Title.types').Props) => React.JSX.Element, any, {}, never>;
+export declare const FullscreenHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CodeAreaWrapper: import('styled-components').StyledComponent<"div", any, {
     readOnly: boolean;
     isFullscreen: boolean;
     requiredSpace: number;
     customHeight?: number | string;
     zIndex?: number | string;
 }, never>;
-export declare const AdditionalDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentBelow: import("styled-components").StyledComponent<"div", any, {
+export declare const AdditionalDescription: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ContentBelow: import('styled-components').StyledComponent<"div", any, {
     isEmpty?: boolean;
 }, never>;
-export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SyntaxTitle: import("styled-components").StyledComponent<({ size, className, children, ellipsis, style, }: {
-    size?: import("@synerise/ds-typography").TextSize;
-    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps;
-    children?: import("react").ReactNode;
+export declare const ContentAbove: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SyntaxTitle: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
+    size?: import('@synerise/ds-typography').TextSize;
+    ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
+    children?: import('react').ReactNode;
     className?: string;
-    style?: import("react").CSSProperties;
+    style?: import('react').CSSProperties;
 }) => React.JSX.Element, any, {}, never>;
-export declare const BottomBar: import("styled-components").StyledComponent<"div", any, {
+export declare const BottomBar: import('styled-components').StyledComponent<"div", any, {
     noBorder?: boolean;
     hasError?: boolean;
 }, never>;
-export declare const LeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SyntaxSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BottomBarElement: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Counter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftSide: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const RightSide: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SyntaxSelect: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const BottomBarElement: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Description: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Counter: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ErrorText: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/CodeArea.styles.js

@@ -1,114 +1,121 @@
-import styled, { css } from 'styled-components';
-import { Text, Title } from '@synerise/ds-typography';
-var FlexRow = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import { Title, Text } from "@synerise/ds-typography";
+const FlexRow = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__FlexRow",
   componentId: "sc-svoej2-0"
 })(["display:flex;justify-content:space-between;align-items:center;"]);
-export var AriaContainer = styled.div.withConfig({
+const AriaContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__AriaContainer",
   componentId: "sc-svoej2-1"
 })(["flex:0 0 0;"]);
-export var EditorPlaceholder = styled.div.withConfig({
+const EditorPlaceholder = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__EditorPlaceholder",
   componentId: "sc-svoej2-2"
-})(["pointer-events:none;position:absolute;left:62px;right:0;top:0;bottom:0;display:", ";"], function (props) {
-  return props.shouldShowPlaceholder ? 'block' : 'none';
-});
-export var EditorInnerWrapper = styled.div.withConfig({
+})(["pointer-events:none;position:absolute;left:62px;right:0;top:0;bottom:0;display:", ";"], (props) => props.shouldShowPlaceholder ? "block" : "none");
+const EditorInnerWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__EditorInnerWrapper",
   componentId: "sc-svoej2-3"
 })(["position:relative;"]);
-export var CodeAreaContent = styled.div.withConfig({
+const CodeAreaContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__CodeAreaContent",
   componentId: "sc-svoej2-4"
 })(["flex:1 1 100%;display:flex;min-height:0;flex-direction:column;"]);
-export var EditorWrapper = styled.div.withConfig({
+const EditorWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__EditorWrapper",
   componentId: "sc-svoej2-5"
-})(["border:", ";border-radius:3px;display:flex;flex-direction:column;flex:1 1 100%;min-height:0;padding-top:12px;", ";canvas{opacity:0;}"], function (props) {
-  return props.noBorder ? 'none' : "solid 1px " + (props.hasError ? props.theme.palette['red-600'] : props.theme.palette['grey-200']);
-}, function (props) {
-  return props.hasError && css(["background:", ";box-shadow:", ";"], props.theme.palette['red-050'], props.noBorder ? 'none' : "inset 0 0 0 1px " + props.theme.palette['red-600']);
-});
-export var FullscreenHeaderTitle = styled(Title).withConfig({
+})(["border:", ";border-radius:3px;display:flex;flex-direction:column;flex:1 1 100%;min-height:0;padding-top:12px;", ";canvas{opacity:0;}"], (props) => props.noBorder ? "none" : `solid 1px ${props.hasError ? props.theme.palette["red-600"] : props.theme.palette["grey-200"]}`, (props) => props.hasError && css(["background:", ";box-shadow:", ";"], props.theme.palette["red-050"], props.noBorder ? "none" : `inset 0 0 0 1px ${props.theme.palette["red-600"]}`));
+const FullscreenHeaderTitle = /* @__PURE__ */ styled(Title).withConfig({
   displayName: "CodeAreastyles__FullscreenHeaderTitle",
   componentId: "sc-svoej2-6"
 })(["display:flex;gap:16px;align-items:center;margin-bottom:0;"]);
-export var FullscreenHeader = styled(FlexRow).withConfig({
+const FullscreenHeader = /* @__PURE__ */ styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__FullscreenHeader",
   componentId: "sc-svoej2-7"
 })(["padding:16px 24px;"]);
-export var CodeAreaWrapper = styled.div.withConfig({
+const CodeAreaWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__CodeAreaWrapper",
   componentId: "sc-svoej2-8"
-})(["", " ", "{", ";}"], function (props) {
+})(["", " ", "{", ";}"], (props) => {
   if (props.isFullscreen) {
-    return css(["position:fixed;width:100vw;height:100vh;z-index:", ";left:0;top:0;background:", ";", "{height:calc(100vh - ", "px);}", "{margin:0 24px;}"], props.zIndex !== undefined ? props.zIndex : props.theme.variables['zindex-modal'], props.theme.palette.white, EditorInnerWrapper, props.requiredSpace, CodeAreaContent);
+    return css(["position:fixed;width:100vw;height:100vh;z-index:", ";left:0;top:0;background:", ";", "{height:calc(100vh - ", "px);}", "{margin:0 24px;}"], props.zIndex !== void 0 ? props.zIndex : props.theme.variables["zindex-modal"], props.theme.palette.white, EditorInnerWrapper, props.requiredSpace, CodeAreaContent);
   }
-  return css(["", " display:flex;flex-direction:column;margin-bottom:12px;"], props.customHeight ? css(["", "{flex:1 1 100%;min-height:0;}height:", ";"], EditorInnerWrapper, typeof props.customHeight === 'number' ? props.customHeight + "px" : props.customHeight) : css(["", "{height:295px;}"], EditorInnerWrapper));
-}, EditorWrapper, function (props) {
-  return props.readOnly && css(["background:", ";.monaco-editor .cursors-layer > .cursor{display:none !important;}"], props.theme.palette['grey-050']);
-});
-export var AdditionalDescription = styled.div.withConfig({
+  return css(["", " display:flex;flex-direction:column;margin-bottom:12px;"], props.customHeight ? css(["", "{flex:1 1 100%;min-height:0;}height:", ";"], EditorInnerWrapper, typeof props.customHeight === "number" ? `${props.customHeight}px` : props.customHeight) : css(["", "{height:295px;}"], EditorInnerWrapper));
+}, EditorWrapper, (props) => props.readOnly && css(["background:", ";.monaco-editor .cursors-layer > .cursor{display:none !important;}"], props.theme.palette["grey-050"]));
+const AdditionalDescription = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__AdditionalDescription",
   componentId: "sc-svoej2-9"
 })(["margin-bottom:8px;"]);
-export var ContentBelow = styled(FlexRow).withConfig({
+const ContentBelow = /* @__PURE__ */ styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__ContentBelow",
   componentId: "sc-svoej2-10"
-})(["", " align-items:flex-start;"], function (props) {
-  return !props.isEmpty && "margin-top: 8px;";
-});
-export var ContentAbove = styled(FlexRow).withConfig({
+})(["", " align-items:flex-start;"], (props) => !props.isEmpty && `margin-top: 8px;`);
+const ContentAbove = /* @__PURE__ */ styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__ContentAbove",
   componentId: "sc-svoej2-11"
 })(["margin-bottom:8px;flex:0 0 auto;"]);
-export var SyntaxTitle = styled(Text).withConfig({
+const SyntaxTitle = /* @__PURE__ */ styled(Text).withConfig({
   displayName: "CodeAreastyles__SyntaxTitle",
   componentId: "sc-svoej2-12"
 })([""]);
-export var BottomBar = styled(FlexRow).withConfig({
+const BottomBar = /* @__PURE__ */ styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__BottomBar",
   componentId: "sc-svoej2-13"
-})(["padding:8px;flex:0 0 auto;background:", ";border-top:solid 1px ", ";", ""], function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette['white'];
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette['grey-200'];
-}, function (_ref3) {
-  var hasError = _ref3.hasError,
-    noBorder = _ref3.noBorder,
-    theme = _ref3.theme;
-  return hasError && css(["background:", ";", ""], theme.palette['red-050'], noBorder ? css(["border:none;border-top:solid 1px ", ";"], theme.palette['grey-200']) : css(["border:solid 1px ", ";border-top-color:", ";"], theme.palette['red-600'], theme.palette['grey-200']));
-});
-export var LeftSide = styled.div.withConfig({
+})(["padding:8px;flex:0 0 auto;background:", ";border-top:solid 1px ", ";", ""], ({
+  theme
+}) => theme.palette["white"], ({
+  theme
+}) => theme.palette["grey-200"], ({
+  hasError,
+  noBorder,
+  theme
+}) => hasError && css(["background:", ";", ""], theme.palette["red-050"], noBorder ? css(["border:none;border-top:solid 1px ", ";"], theme.palette["grey-200"]) : css(["border:solid 1px ", ";border-top-color:", ";"], theme.palette["red-600"], theme.palette["grey-200"])));
+const LeftSide = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__LeftSide",
   componentId: "sc-svoej2-14"
 })([""]);
-export var RightSide = styled.div.withConfig({
+const RightSide = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__RightSide",
   componentId: "sc-svoej2-15"
 })(["margin-left:auto;display:flex;gap:8px;"]);
-export var SyntaxSelect = styled(LeftSide).withConfig({
+const SyntaxSelect = /* @__PURE__ */ styled(LeftSide).withConfig({
   displayName: "CodeAreastyles__SyntaxSelect",
   componentId: "sc-svoej2-16"
 })(["padding-left:8px;"]);
-export var BottomBarElement = styled.div.withConfig({
+const BottomBarElement = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__BottomBarElement",
   componentId: "sc-svoej2-17"
 })([""]);
-export var Description = styled.div.withConfig({
+const Description = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__Description",
   componentId: "sc-svoej2-18"
 })([""]);
-export var Counter = styled.div.withConfig({
+const Counter = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__Counter",
   componentId: "sc-svoej2-19"
 })(["font-weight:500;"]);
-export var ErrorText = styled.div.withConfig({
+const ErrorText = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CodeAreastyles__ErrorText",
   componentId: "sc-svoej2-20"
-})(["color:", ";margin-bottom:4px;"], function (props) {
-  return props.theme.palette['red-600'];
-});
+})(["color:", ";margin-bottom:4px;"], (props) => props.theme.palette["red-600"]);
+export {
+  AdditionalDescription,
+  AriaContainer,
+  BottomBar,
+  BottomBarElement,
+  CodeAreaContent,
+  CodeAreaWrapper,
+  ContentAbove,
+  ContentBelow,
+  Counter,
+  Description,
+  EditorInnerWrapper,
+  EditorPlaceholder,
+  EditorWrapper,
+  ErrorText,
+  FullscreenHeader,
+  FullscreenHeaderTitle,
+  LeftSide,
+  RightSide,
+  SyntaxSelect,
+  SyntaxTitle
+};

package/dist/CodeArea.types.d.ts

@@ -1,7 +1,7 @@
-import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
-import type { CSSProperties, ReactNode } from 'react';
-import type { EditorProps, loader } from '@monaco-editor/react';
-import type { TooltipProps } from '@synerise/ds-tooltip';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import { CSSProperties, ReactNode } from 'react';
+import { EditorProps, loader } from '@monaco-editor/react';
+import { TooltipProps } from '@synerise/ds-tooltip';
 export type CodeAreaSyntax = 'json' | 'html' | 'css' | 'typescript' | 'javascript' | string;
 export type CodeAreaSyntaxOption<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = {
     language: SyntaxName;

package/dist/CodeArea.types.js

@@ -1 +1 @@
-export {};
+

package/dist/components/AriaContainer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export declare const AriaContainer: ({ element }: {
     element: HTMLElement;
 }) => React.JSX.Element;

package/dist/components/AriaContainer.js

@@ -1,17 +1,18 @@
-import React, { useEffect, useRef } from 'react';
-import * as S from '../CodeArea.styles';
-export var AriaContainer = function AriaContainer(_ref) {
-  var element = _ref.element;
-  var ariaContainerRef = useRef(null);
-  useEffect(function () {
-    var container = ariaContainerRef.current;
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { AriaContainer as AriaContainer$1 } from "../CodeArea.styles.js";
+const AriaContainer = ({
+  element
+}) => {
+  const ariaContainerRef = useRef(null);
+  useEffect(() => {
+    const container = ariaContainerRef.current;
     if (container && element.childNodes.length > 0) {
       container.appendChild(element);
     }
   }, [element]);
-  return /*#__PURE__*/React.createElement(S.AriaContainer, {
-    className: "monaco-aria-custom-container",
-    "data-testid": "monaco-aria-container",
-    ref: ariaContainerRef
-  });
-};
+  return /* @__PURE__ */ jsx(AriaContainer$1, { className: "monaco-aria-custom-container", "data-testid": "monaco-aria-container", ref: ariaContainerRef });
+};
+export {
+  AriaContainer
+};

package/dist/components/BottomBar.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 BottomBarProps = {
     texts: CodeAreaTexts;
     allowFullscreen?: boolean;

package/dist/components/BottomBar.js

@@ -1,28 +1,25 @@
-import React from 'react';
-import Button from '@synerise/ds-button';
-import Icon, { FullScreenM } from '@synerise/ds-icon';
-import * as S from '../CodeArea.styles';
-export var BottomBar = function BottomBar(_ref) {
-  var texts = _ref.texts,
-    syntaxSelect = _ref.syntaxSelect,
-    customFooterContent = _ref.customFooterContent,
-    allowFullscreen = _ref.allowFullscreen,
-    toggleFullscreen = _ref.toggleFullscreen,
-    noBorder = _ref.noBorder,
-    hasError = _ref.hasError;
-  var fullscreenButton = allowFullscreen && /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    mode: "icon-label",
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(FullScreenM, null)
-    }),
-    onClick: toggleFullscreen
-  }, texts.fullscreen);
-  return /*#__PURE__*/React.createElement(S.BottomBar, {
-    noBorder: noBorder,
-    hasError: hasError,
-    "data-testid": "code-area-bottombar"
-  }, syntaxSelect && /*#__PURE__*/React.createElement(S.SyntaxSelect, {
-    "data-testid": "code-area-syntaxoptions"
-  }, syntaxSelect), (customFooterContent || fullscreenButton) && /*#__PURE__*/React.createElement(S.RightSide, null, customFooterContent, fullscreenButton));
-};
+import { jsx, jsxs } from "react/jsx-runtime";
+import Button from "@synerise/ds-button";
+import Icon, { FullScreenM } from "@synerise/ds-icon";
+import { BottomBar as BottomBar$1, SyntaxSelect, RightSide } from "../CodeArea.styles.js";
+const BottomBar = ({
+  texts,
+  syntaxSelect,
+  customFooterContent,
+  allowFullscreen,
+  toggleFullscreen,
+  noBorder,
+  hasError
+}) => {
+  const fullscreenButton = allowFullscreen && /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "icon-label", icon: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(FullScreenM, {}) }), onClick: toggleFullscreen, children: texts.fullscreen });
+  return /* @__PURE__ */ jsxs(BottomBar$1, { noBorder, hasError, "data-testid": "code-area-bottombar", children: [
+    syntaxSelect && /* @__PURE__ */ jsx(SyntaxSelect, { "data-testid": "code-area-syntaxoptions", children: syntaxSelect }),
+    (customFooterContent || fullscreenButton) && /* @__PURE__ */ jsxs(RightSide, { children: [
+      customFooterContent,
+      fullscreenButton
+    ] })
+  ] });
+};
+export {
+  BottomBar
+};

package/dist/components/CodeAreaEditor.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-export declare const CodeAreaEditor: React.ForwardRefExoticComponent<Omit<import("@monaco-editor/react").EditorProps, "height" | "language"> & {
+import { default as React } from 'react';
+export declare const CodeAreaEditor: React.ForwardRefExoticComponent<Omit<import('@monaco-editor/react').EditorProps, "language" | "height"> & {
     label?: React.ReactNode;
     description?: React.ReactNode;
-    texts?: Partial<import("../CodeArea.types").CodeAreaTexts>;
+    texts?: Partial<import('../CodeArea.types').CodeAreaTexts>;
     counter?: {
         limit: number;
         placement?: "bottom" | "top";
     };
     errorText?: React.ReactNode;
-    syntaxOptions?: import("../CodeArea.types").CodeAreaSyntaxOption<string>[] | undefined;
+    syntaxOptions?: import('../CodeArea.types').CodeAreaSyntaxOption<string>[] | undefined;
     currentSyntax: string;
     allowFullscreen?: boolean;
     isFullscreen: boolean;
@@ -18,7 +18,7 @@ export declare const CodeAreaEditor: React.ForwardRefExoticComponent<Omit<import
     defaultValue?: string;
     readOnly?: boolean;
     tooltip?: React.ReactNode;
-    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
     style?: React.CSSProperties;
     zIndex?: string | number;
     noBorder?: boolean;