@pingux/astro 2.121.1-alpha.3 → 2.122.0-alpha.0

package/lib/cjs/components/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CodeEditorProps } from '../../types';
+declare const CodeEditor: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLElement>>;
+export default CodeEditor;

package/lib/cjs/components/CodeEditor/CodeEditor.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireDefault(require("@monaco-editor/react"));
+var _index = require("../../index");
+var _react3 = require("@emotion/react");
+var _excluded = ["value", "language", "onChange", "onValidate", "height"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var CodeEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var value = props.value,
+    language = props.language,
+    onChange = props.onChange,
+    onValidate = props.onValidate,
+    height = props.height,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var editorRef = (0, _react.useRef)(null);
+  return (0, _react3.jsx)(_index.Box, (0, _extends2["default"])({}, others, {
+    ref: ref
+  }), (0, _react3.jsx)(_index.Box, {
+    variant: "codeEditor.wrapper",
+    ref: editorRef,
+    height: height
+  }, (0, _react3.jsx)(_react2["default"], {
+    height: "100%",
+    language: language,
+    value: value,
+    theme: "vs-light",
+    onChange: onChange,
+    onValidate: onValidate,
+    options: {
+      fontSize: 14,
+      automaticLayout: true,
+      minimap: {
+        enabled: true
+      },
+      stickyScroll: {
+        enabled: false
+      }
+    }
+  })));
+});
+var _default = CodeEditor;
+exports["default"] = _default;

package/lib/cjs/components/CodeEditor/CodeEditor.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/CodeEditor/CodeEditor" />
+
+# CodeEditor
+
+The Code Editor component is a tool for editing and displaying code snippets in an application. 
+It provides syntax highlighting, shows line numbers, and validates errors in the code.
+In addition, it supports standard IDE keyboard interactions like tab-to-indent.
+
+The CodeEditor component should be used for complex use cases that require an interactive environment, support for various programming languages, functionalities like linting, keyboard interactions, and real-time updates. 
+When code snippets need to be presented in a read-only format, use [CodeView](./?path=/docs/components-codeview--docs).
+
+Languages
+supported languages are categorized into two groups: those with rich IntelliSense and validation capabilities, and those that provide only basic syntax highlighting. Check the list at [monaco-editor](https://github.com/suren-atoyan/monaco-react#:~:text=It%27s%20important%20to%20mention%20that%20according%20to%20monaco%2Deditor%2C%20the%20whole%20supported%20languages%20are%20divided%20into%20two%20groups%3A)
+
+### Required Components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Enter | Inserts a new line of code |
+| Arrow keys | Move the cursor within the code in the set direction |
+
+#### Screen Readers
+
+The **`aria-live`** attribute is used to announce content changes in a live region.
+

package/lib/cjs/components/CodeEditor/CodeEditor.stories.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { CodeEditorProps } from '../../types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLElement>>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            source: {
+                type: string;
+            };
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const TypescriptEditor: StoryFn<CodeEditorProps>;
+export declare const JavascriptEditor: StoryFn<CodeEditorProps>;
+export declare const JsonEditor: StoryFn<CodeEditorProps>;

package/lib/cjs/components/CodeEditor/CodeEditor.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TypescriptEditor = exports.JsonEditor = exports.JavascriptEditor = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _CodeEditor = _interopRequireDefault(require("./CodeEditor.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/CodeEditor',
+  component: _index.CodeEditor,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CodeEditor["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
+      source: {
+        type: 'code'
+      }
+    },
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }, {
+          id: 'aria-roledescription',
+          enabled: false
+        }]
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var jsonCode = "{\n  \"name\": \"Luke Skywalker\", \n  \"height\": \"172\", \n  \"mass\": \"77\", \n  \"hair_color\": \"blond\", \n  \"skin_color\": \"fair\", \n  \"eye_color\": \"blue\", \n  \"birth_year\": \"19BBY\", \n  \"gender\": \"male\", \n  \"homeworld\": \"https://swapi.dev/api/planets/1/\", \n  \"films\": [\n      \"https://swapi.dev/api/films/1/\", \n      \"https://swapi.dev/api/films/2/\", \n      \"https://swapi.dev/api/films/3/\", \n      \"https://swapi.dev/api/films/6/\"\n  ],\n  \"starships\": [\n      \"https://swapi.dev/api/starships/12/\", \n      \"https://swapi.dev/api/starships/22/\"\n  ]\n}";
+var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number) {\n  return integer + 1;\n}\n\naddOne('I am a string');\n";
+var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
+var TypescriptEditor = function TypescriptEditor() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    value: tsCode,
+    language: "typescript",
+    height: "200px"
+  });
+};
+exports.TypescriptEditor = TypescriptEditor;
+var JavascriptEditor = function JavascriptEditor() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    value: jsCode,
+    language: "javascript",
+    height: "200px"
+  });
+};
+exports.JavascriptEditor = JavascriptEditor;
+var JsonEditor = function JsonEditor() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    value: jsonCode,
+    language: "json",
+    height: "200px"
+  });
+};
+exports.JsonEditor = JsonEditor;

package/lib/cjs/components/CodeEditor/CodeEditor.styles.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    wrapper: {
+        borderColor: string;
+        borderRadius: string;
+        borderStyle: string;
+        borderWidth: string;
+        width: string;
+    };
+};
+export default _default;

package/lib/cjs/components/CodeEditor/CodeEditor.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Input = require("../Input/Input.styles");
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var wrapper = _objectSpread(_objectSpread({}, _Input.input.fieldControlWrapper), {}, {
+  borderColor: 'neutral.80',
+  borderRadius: '3px 4px 4px 3px',
+  borderStyle: 'solid',
+  borderWidth: '1px 1px 1px 0px',
+  width: '100%'
+});
+var _default = {
+  wrapper: wrapper
+};
+exports["default"] = _default;

package/lib/cjs/components/CodeEditor/CodeEditor.test.d.ts

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

package/lib/cjs/components/CodeEditor/CodeEditor.test.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/json/stringify"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../index");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _react2 = require("@emotion/react");
+var testId = 'test-code-sample';
+var defaultProps = {
+  'data-testid': testId
+};
+var jsCode = "\n  function helloWorld() {\n    console.log(\"Hello, World!\");\n  }\n";
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  rules: {
+    'color-contrast': {
+      enabled: false
+    }
+  },
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, defaultProps, props, {
+      value: jsCode,
+      language: "javascript"
+    }));
+  }
+});
+jest.mock('@monaco-editor/react', function () {
+  return {
+    __esModule: true,
+    "default": function _default(_ref) {
+      var _context;
+      var language = _ref.language,
+        value = _ref.value,
+        _onChange = _ref.onChange;
+      return (0, _react2.jsx)("textarea", {
+        "data-testid": "mock-monaco-editor",
+        onChange: function onChange(e) {
+          return _onChange(e.target.value);
+        },
+        value: (0, _concat["default"])(_context = "Editor Language: ".concat(language, ", Code:")).call(_context, value),
+        "aria-label": "Code editor"
+      });
+    }
+  };
+});
+describe('CodeEditor', function () {
+  it('renders with initial value', function () {
+    var value = 'console.log("Hello, World!");';
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
+      language: "javascript",
+      value: value
+    }));
+    expect(_testWrapper.screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByText('Editor Language: javascript, Code:console.log("Hello, World!");')).toBeInTheDocument();
+  });
+  it('calls onChange when code changes', function () {
+    var value = 'console.log("Hello, World!");';
+    var mockOnChange = jest.fn();
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
+      language: "javascript",
+      value: value,
+      onChange: mockOnChange
+    }));
+    var editor = _testWrapper.screen.getByTestId('mock-monaco-editor');
+    var newValue = (0, _stringify["default"])([{
+      key: false
+    }]);
+    (0, _testWrapper.act)(function () {
+      _testWrapper.fireEvent.change(editor, {
+        target: {
+          value: newValue
+        }
+      });
+    });
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+});

package/lib/cjs/components/CodeEditor/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CodeEditor';

package/lib/cjs/components/CodeEditor/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _CodeEditor["default"];
+  }
+});
+var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));

package/lib/cjs/components/CodeView/CodeView.mdx

@@ -5,7 +5,10 @@ import { Meta } from '@storybook/addon-docs';
 # CodeView
 
 This component is used for code syntax highlighting and is built on [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
-It should contain the language title and be formatted with indentations, line breaks, and comments, and should not contain complex code snippets.
+It should contain the language title and be formatted with indentations, line breaks, and comments, and should not contain complex code snippets. 
+
+The CodeView component should be used for code snippets that need to be presented in a read-only format. 
+For more complex use cases that require an interactive environment, support for various programming languages, functionalities like linting, keyboard interactions, and real-time updates, use [CodeEditor](./?path=/docs/experimental-codeeditor--docs).
 
 ### Required Components
 

package/lib/cjs/index.d.ts

@@ -59,6 +59,7 @@ export { default as Checkbox } from './components/Checkbox';
 export * from './components/Checkbox';
 export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
+export { default as CodeEditor } from './components/CodeEditor';
 export { default as CodeView } from './components/CodeView';
 export { default as CollapsiblePanel } from './components/CollapsiblePanel';
 export * from './components/CollapsiblePanel';

package/lib/cjs/index.js

@@ -54,6 +54,7 @@ var _exportNames = {
   Card: true,
   Checkbox: true,
   CheckboxField: true,
+  CodeEditor: true,
   CodeView: true,
   CollapsiblePanel: true,
   CollapsiblePanelContainer: true,
@@ -313,6 +314,12 @@ _Object$defineProperty(exports, "CheckboxField", {
     return _CheckboxField["default"];
   }
 });
+_Object$defineProperty(exports, "CodeEditor", {
+  enumerable: true,
+  get: function get() {
+    return _CodeEditor["default"];
+  }
+});
 _Object$defineProperty(exports, "CodeView", {
   enumerable: true,
   get: function get() {
@@ -1312,6 +1319,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_CheckboxField)).call(_contex
     }
   });
 });
+var _CodeEditor = _interopRequireDefault(require("./components/CodeEditor"));
 var _CodeView = _interopRequireDefault(require("./components/CodeView"));
 var _CollapsiblePanel = _interopRequireWildcard(require("./components/CollapsiblePanel"));
 _forEachInstanceProperty(_context20 = _Object$keys(_CollapsiblePanel)).call(_context20, function (key) {

package/lib/cjs/styles/variants/variants.js

@@ -24,6 +24,7 @@ var _Breadcrumb = _interopRequireDefault(require("../../components/Breadcrumbs/B
 var _ButtonBar = _interopRequireDefault(require("../../components/ButtonBar/ButtonBar.styles"));
 var _Calendar = _interopRequireDefault(require("../../components/Calendar/Calendar.styles"));
 var _Callout = _interopRequireDefault(require("../../components/Callout/Callout.styles"));
+var _CodeEditor = _interopRequireDefault(require("../../components/CodeEditor/CodeEditor.styles"));
 var _CodeView = _interopRequireDefault(require("../../components/CodeView/CodeView.styles"));
 var _CollapsiblePanel = _interopRequireDefault(require("../../components/CollapsiblePanel/CollapsiblePanel.styles"));
 var _CopyText = _interopRequireDefault(require("../../components/CopyText/CopyText.styles"));
@@ -77,6 +78,7 @@ var _default = _objectSpread({
   calendar: _Calendar["default"],
   rangeCalendar: _RangeCalendar["default"],
   callout: _Callout["default"],
+  codeEditor: _CodeEditor["default"],
   codeView: _CodeView["default"],
   collapsiblePanel: _CollapsiblePanel["default"],
   copyText: _CopyText["default"],

package/lib/cjs/types/codeEditor.d.ts

@@ -0,0 +1,15 @@
+import { type editor } from 'monaco-editor';
+import * as monaco from 'monaco-editor';
+import { DOMAttributes, StyleProps } from './shared';
+import { FocusableElement } from '.';
+export interface CodeEditorProps extends Omit<DOMAttributes<FocusableElement>, 'onChange'>, StyleProps {
+    value?: string;
+    language?: string;
+    onChange?: (value: string | undefined) => void;
+    onValidate?: (markers: editor.IMarker[]) => void;
+}
+export interface CustomEditorOptions extends monaco.editor.IStandaloneEditorConstructionOptions {
+    stickyScroll?: {
+        enabled: boolean;
+    };
+}

package/lib/cjs/types/codeEditor.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -9,6 +9,7 @@ export * from './buttonBar';
 export * from './calendar';
 export * from './card';
 export * from './checkboxField';
+export * from './codeEditor';
 export * from './collapsiblePanel';
 export * from './colorField';
 export * from './copyText';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -128,8 +128,19 @@ _forEachInstanceProperty(_context11 = _Object$keys(_checkboxField)).call(_contex
     }
   });
 });
+var _codeEditor = require("./codeEditor");
+_forEachInstanceProperty(_context12 = _Object$keys(_codeEditor)).call(_context12, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _codeEditor[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _codeEditor[key];
+    }
+  });
+});
 var _collapsiblePanel = require("./collapsiblePanel");
-_forEachInstanceProperty(_context12 = _Object$keys(_collapsiblePanel)).call(_context12, function (key) {
+_forEachInstanceProperty(_context13 = _Object$keys(_collapsiblePanel)).call(_context13, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _collapsiblePanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -140,7 +151,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_collapsiblePanel)).call(_con
   });
 });
 var _colorField = require("./colorField");
-_forEachInstanceProperty(_context13 = _Object$keys(_colorField)).call(_context13, function (key) {
+_forEachInstanceProperty(_context14 = _Object$keys(_colorField)).call(_context14, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _colorField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -151,7 +162,7 @@ _forEachInstanceProperty(_context13 = _Object$keys(_colorField)).call(_context13
   });
 });
 var _copyText = require("./copyText");
-_forEachInstanceProperty(_context14 = _Object$keys(_copyText)).call(_context14, function (key) {
+_forEachInstanceProperty(_context15 = _Object$keys(_copyText)).call(_context15, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _copyText[key]) return;
   _Object$defineProperty(exports, key, {
@@ -162,7 +173,7 @@ _forEachInstanceProperty(_context14 = _Object$keys(_copyText)).call(_context14,
   });
 });
 var _dataTable = require("./dataTable");
-_forEachInstanceProperty(_context15 = _Object$keys(_dataTable)).call(_context15, function (key) {
+_forEachInstanceProperty(_context16 = _Object$keys(_dataTable)).call(_context16, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _dataTable[key]) return;
   _Object$defineProperty(exports, key, {
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_dataTable)).call(_context15,
   });
 });
 var _environmentBreadcrumb = require("./environmentBreadcrumb");
-_forEachInstanceProperty(_context16 = _Object$keys(_environmentBreadcrumb)).call(_context16, function (key) {
+_forEachInstanceProperty(_context17 = _Object$keys(_environmentBreadcrumb)).call(_context17, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _environmentBreadcrumb[key]) return;
   _Object$defineProperty(exports, key, {
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_environmentBreadcrumb)).call
   });
 });
 var _fieldHelperText = require("./fieldHelperText");
-_forEachInstanceProperty(_context17 = _Object$keys(_fieldHelperText)).call(_context17, function (key) {
+_forEachInstanceProperty(_context18 = _Object$keys(_fieldHelperText)).call(_context18, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _fieldHelperText[key]) return;
   _Object$defineProperty(exports, key, {
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_fieldHelperText)).call(_cont
   });
 });
 var _footer = require("./footer");
-_forEachInstanceProperty(_context18 = _Object$keys(_footer)).call(_context18, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_footer)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _footer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_footer)).call(_context18, fu
   });
 });
 var _grid = require("./grid");
-_forEachInstanceProperty(_context19 = _Object$keys(_grid)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_grid)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _grid[key]) return;
   _Object$defineProperty(exports, key, {
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_grid)).call(_context19, func
   });
 });
 var _helpHint = require("./helpHint");
-_forEachInstanceProperty(_context20 = _Object$keys(_helpHint)).call(_context20, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_helpHint)).call(_context21, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _helpHint[key]) return;
   _Object$defineProperty(exports, key, {
@@ -228,7 +239,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_helpHint)).call(_context20,
   });
 });
 var _icon = require("./icon");
-_forEachInstanceProperty(_context21 = _Object$keys(_icon)).call(_context21, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_icon)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _icon[key]) return;
   _Object$defineProperty(exports, key, {
@@ -239,7 +250,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_icon)).call(_context21, func
   });
 });
 var _iconBadge = require("./iconBadge");
-_forEachInstanceProperty(_context22 = _Object$keys(_iconBadge)).call(_context22, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_iconBadge)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconBadge[key]) return;
   _Object$defineProperty(exports, key, {
@@ -250,7 +261,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_iconBadge)).call(_context22,
   });
 });
 var _iconButton = require("./iconButton");
-_forEachInstanceProperty(_context23 = _Object$keys(_iconButton)).call(_context23, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_iconButton)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconButton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -261,7 +272,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_iconButton)).call(_context23
   });
 });
 var _iconButtonToggle = require("./iconButtonToggle");
-_forEachInstanceProperty(_context24 = _Object$keys(_iconButtonToggle)).call(_context24, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_iconButtonToggle)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconButtonToggle[key]) return;
   _Object$defineProperty(exports, key, {
@@ -272,7 +283,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_iconButtonToggle)).call(_con
   });
 });
 var _iconWrapper = require("./iconWrapper");
-_forEachInstanceProperty(_context25 = _Object$keys(_iconWrapper)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_iconWrapper)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconWrapper[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_iconWrapper)).call(_context2
   });
 });
 var _input = require("./input");
-_forEachInstanceProperty(_context26 = _Object$keys(_input)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_input)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _input[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_input)).call(_context26, fun
   });
 });
 var _item = require("./item");
-_forEachInstanceProperty(_context27 = _Object$keys(_item)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_item)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _item[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_item)).call(_context27, func
   });
 });
 var _label = require("./label");
-_forEachInstanceProperty(_context28 = _Object$keys(_label)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_label)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _label[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_label)).call(_context28, fun
   });
 });
 var _link = require("./link");
-_forEachInstanceProperty(_context29 = _Object$keys(_link)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_link)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _link[key]) return;
   _Object$defineProperty(exports, key, {
@@ -327,7 +338,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_link)).call(_context29, func
   });
 });
 var _listBox = require("./listBox");
-_forEachInstanceProperty(_context30 = _Object$keys(_listBox)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_listBox)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -338,7 +349,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_listBox)).call(_context30, f
   });
 });
 var _listItem = require("./listItem");
-_forEachInstanceProperty(_context31 = _Object$keys(_listItem)).call(_context31, function (key) {
+_forEachInstanceProperty(_context32 = _Object$keys(_listItem)).call(_context32, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -349,7 +360,7 @@ _forEachInstanceProperty(_context31 = _Object$keys(_listItem)).call(_context31,
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context32 = _Object$keys(_loader)).call(_context32, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_loader)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -360,7 +371,7 @@ _forEachInstanceProperty(_context32 = _Object$keys(_loader)).call(_context32, fu
   });
 });
 var _menu = require("./menu");
-_forEachInstanceProperty(_context33 = _Object$keys(_menu)).call(_context33, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_menu)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -371,7 +382,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_menu)).call(_context33, func
   });
 });
 var _menuItem = require("./menuItem");
-_forEachInstanceProperty(_context34 = _Object$keys(_menuItem)).call(_context34, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_menuItem)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -382,7 +393,7 @@ _forEachInstanceProperty(_context34 = _Object$keys(_menuItem)).call(_context34,
   });
 });
 var _menuSection = require("./menuSection");
-_forEachInstanceProperty(_context35 = _Object$keys(_menuSection)).call(_context35, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_menuSection)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuSection[key]) return;
   _Object$defineProperty(exports, key, {
@@ -393,7 +404,7 @@ _forEachInstanceProperty(_context35 = _Object$keys(_menuSection)).call(_context3
   });
 });
 var _messages = require("./messages");
-_forEachInstanceProperty(_context36 = _Object$keys(_messages)).call(_context36, function (key) {
+_forEachInstanceProperty(_context37 = _Object$keys(_messages)).call(_context37, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _messages[key]) return;
   _Object$defineProperty(exports, key, {
@@ -404,7 +415,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_messages)).call(_context36,
   });
 });
 var _Modal = require("./Modal");
-_forEachInstanceProperty(_context37 = _Object$keys(_Modal)).call(_context37, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_Modal)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Modal[key]) return;
   _Object$defineProperty(exports, key, {
@@ -415,7 +426,7 @@ _forEachInstanceProperty(_context37 = _Object$keys(_Modal)).call(_context37, fun
   });
 });
 var _navBar = require("./navBar");
-_forEachInstanceProperty(_context38 = _Object$keys(_navBar)).call(_context38, function (key) {
+_forEachInstanceProperty(_context39 = _Object$keys(_navBar)).call(_context39, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _navBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -426,7 +437,7 @@ _forEachInstanceProperty(_context38 = _Object$keys(_navBar)).call(_context38, fu
   });
 });
 var _navSideBar = require("./navSideBar");
-_forEachInstanceProperty(_context39 = _Object$keys(_navSideBar)).call(_context39, function (key) {
+_forEachInstanceProperty(_context40 = _Object$keys(_navSideBar)).call(_context40, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _navSideBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -437,7 +448,7 @@ _forEachInstanceProperty(_context39 = _Object$keys(_navSideBar)).call(_context39
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context40 = _Object$keys(_overlayPanel)).call(_context40, function (key) {
+_forEachInstanceProperty(_context41 = _Object$keys(_overlayPanel)).call(_context41, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -448,7 +459,7 @@ _forEachInstanceProperty(_context40 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _passwordField = require("./passwordField");
-_forEachInstanceProperty(_context41 = _Object$keys(_passwordField)).call(_context41, function (key) {
+_forEachInstanceProperty(_context42 = _Object$keys(_passwordField)).call(_context42, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _passwordField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -459,7 +470,7 @@ _forEachInstanceProperty(_context41 = _Object$keys(_passwordField)).call(_contex
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context42 = _Object$keys(_popoverContainer)).call(_context42, function (key) {
+_forEachInstanceProperty(_context43 = _Object$keys(_popoverContainer)).call(_context43, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -470,7 +481,7 @@ _forEachInstanceProperty(_context42 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context43 = _Object$keys(_popoverMenu)).call(_context43, function (key) {
+_forEachInstanceProperty(_context44 = _Object$keys(_popoverMenu)).call(_context44, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -481,7 +492,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_popoverMenu)).call(_context4
   });
 });
 var _progressBar = require("./progressBar");
-_forEachInstanceProperty(_context44 = _Object$keys(_progressBar)).call(_context44, function (key) {
+_forEachInstanceProperty(_context45 = _Object$keys(_progressBar)).call(_context45, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _progressBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -492,7 +503,7 @@ _forEachInstanceProperty(_context44 = _Object$keys(_progressBar)).call(_context4
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context45 = _Object$keys(_requirementsList)).call(_context45, function (key) {
+_forEachInstanceProperty(_context46 = _Object$keys(_requirementsList)).call(_context46, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -503,7 +514,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context46 = _Object$keys(_rockerButtonGroup)).call(_context46, function (key) {
+_forEachInstanceProperty(_context47 = _Object$keys(_rockerButtonGroup)).call(_context47, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -514,7 +525,7 @@ _forEachInstanceProperty(_context46 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context47 = _Object$keys(_scrollBox)).call(_context47, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_scrollBox)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -525,7 +536,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_scrollBox)).call(_context47,
   });
 });
 var _searchField = require("./searchField");
-_forEachInstanceProperty(_context48 = _Object$keys(_searchField)).call(_context48, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_searchField)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _searchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -536,7 +547,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_searchField)).call(_context4
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context49 = _Object$keys(_separator)).call(_context49, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_separator)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -547,7 +558,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_separator)).call(_context49,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context50 = _Object$keys(_shared)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_shared)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -558,7 +569,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_shared)).call(_context50, fu
   });
 });
 var _skeleton = require("./skeleton");
-_forEachInstanceProperty(_context51 = _Object$keys(_skeleton)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_skeleton)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _skeleton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -569,7 +580,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_skeleton)).call(_context51,
   });
 });
 var _switchField = require("./switchField");
-_forEachInstanceProperty(_context52 = _Object$keys(_switchField)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_switchField)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _switchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_switchField)).call(_context5
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context53 = _Object$keys(_tab)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_tab)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -591,7 +602,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_tab)).call(_context53, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context54 = _Object$keys(_table)).call(_context54, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_table)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -602,7 +613,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_table)).call(_context54, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context55 = _Object$keys(_tabs)).call(_context55, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_tabs)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -613,7 +624,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_tabs)).call(_context55, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context56 = _Object$keys(_text)).call(_context56, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_text)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -624,7 +635,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_text)).call(_context56, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context57 = _Object$keys(_textField)).call(_context57, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_textField)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -635,7 +646,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_textField)).call(_context57,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context58 = _Object$keys(_timefield)).call(_context58, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_timefield)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -646,7 +657,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_timefield)).call(_context58,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context59 = _Object$keys(_tooltipTrigger)).call(_context59, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_tooltipTrigger)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/components/CodeEditor/CodeEditor.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "language", "onChange", "onValidate", "height"];
+import React, { forwardRef, useRef } from 'react';
+import Editor from '@monaco-editor/react';
+import { Box } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var CodeEditor = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    language = props.language,
+    onChange = props.onChange,
+    onValidate = props.onValidate,
+    height = props.height,
+    others = _objectWithoutProperties(props, _excluded);
+  var editorRef = useRef(null);
+  return ___EmotionJSX(Box, _extends({}, others, {
+    ref: ref
+  }), ___EmotionJSX(Box, {
+    variant: "codeEditor.wrapper",
+    ref: editorRef,
+    height: height
+  }, ___EmotionJSX(Editor, {
+    height: "100%",
+    language: language,
+    value: value,
+    theme: "vs-light",
+    onChange: onChange,
+    onValidate: onValidate,
+    options: {
+      fontSize: 14,
+      automaticLayout: true,
+      minimap: {
+        enabled: true
+      },
+      stickyScroll: {
+        enabled: false
+      }
+    }
+  })));
+});
+export default CodeEditor;

package/lib/components/CodeEditor/CodeEditor.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/CodeEditor/CodeEditor" />
+
+# CodeEditor
+
+The Code Editor component is a tool for editing and displaying code snippets in an application. 
+It provides syntax highlighting, shows line numbers, and validates errors in the code.
+In addition, it supports standard IDE keyboard interactions like tab-to-indent.
+
+The CodeEditor component should be used for complex use cases that require an interactive environment, support for various programming languages, functionalities like linting, keyboard interactions, and real-time updates. 
+When code snippets need to be presented in a read-only format, use [CodeView](./?path=/docs/components-codeview--docs).
+
+Languages
+supported languages are categorized into two groups: those with rich IntelliSense and validation capabilities, and those that provide only basic syntax highlighting. Check the list at [monaco-editor](https://github.com/suren-atoyan/monaco-react#:~:text=It%27s%20important%20to%20mention%20that%20according%20to%20monaco%2Deditor%2C%20the%20whole%20supported%20languages%20are%20divided%20into%20two%20groups%3A)
+
+### Required Components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Enter | Inserts a new line of code |
+| Arrow keys | Move the cursor within the code in the set direction |
+
+#### Screen Readers
+
+The **`aria-live`** attribute is used to announce content changes in a live region.
+

package/lib/components/CodeEditor/CodeEditor.stories.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { CodeEditor } from '../../index';
+import CodeEditorReadme from './CodeEditor.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/CodeEditor',
+  component: CodeEditor,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeEditorReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
+      source: {
+        type: 'code'
+      }
+    },
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }, {
+          id: 'aria-roledescription',
+          enabled: false
+        }]
+      }
+    }
+  }
+};
+var jsonCode = "{\n  \"name\": \"Luke Skywalker\", \n  \"height\": \"172\", \n  \"mass\": \"77\", \n  \"hair_color\": \"blond\", \n  \"skin_color\": \"fair\", \n  \"eye_color\": \"blue\", \n  \"birth_year\": \"19BBY\", \n  \"gender\": \"male\", \n  \"homeworld\": \"https://swapi.dev/api/planets/1/\", \n  \"films\": [\n      \"https://swapi.dev/api/films/1/\", \n      \"https://swapi.dev/api/films/2/\", \n      \"https://swapi.dev/api/films/3/\", \n      \"https://swapi.dev/api/films/6/\"\n  ],\n  \"starships\": [\n      \"https://swapi.dev/api/starships/12/\", \n      \"https://swapi.dev/api/starships/22/\"\n  ]\n}";
+var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number) {\n  return integer + 1;\n}\n\naddOne('I am a string');\n";
+var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
+export var TypescriptEditor = function TypescriptEditor() {
+  return ___EmotionJSX(CodeEditor, {
+    value: tsCode,
+    language: "typescript",
+    height: "200px"
+  });
+};
+export var JavascriptEditor = function JavascriptEditor() {
+  return ___EmotionJSX(CodeEditor, {
+    value: jsCode,
+    language: "javascript",
+    height: "200px"
+  });
+};
+export var JsonEditor = function JsonEditor() {
+  return ___EmotionJSX(CodeEditor, {
+    value: jsonCode,
+    language: "json",
+    height: "200px"
+  });
+};

package/lib/components/CodeEditor/CodeEditor.styles.js

@@ -0,0 +1,22 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { input } from '../Input/Input.styles';
+var wrapper = _objectSpread(_objectSpread({}, input.fieldControlWrapper), {}, {
+  borderColor: 'neutral.80',
+  borderRadius: '3px 4px 4px 3px',
+  borderStyle: 'solid',
+  borderWidth: '1px 1px 1px 0px',
+  width: '100%'
+});
+export default {
+  wrapper: wrapper
+};

package/lib/components/CodeEditor/CodeEditor.test.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
+import React from 'react';
+import { CodeEditor } from '../../index';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-code-sample';
+var defaultProps = {
+  'data-testid': testId
+};
+var jsCode = "\n  function helloWorld() {\n    console.log(\"Hello, World!\");\n  }\n";
+
+// Needs to be added to each components test file
+universalComponentTests({
+  rules: {
+    'color-contrast': {
+      enabled: false
+    }
+  },
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CodeEditor, _extends({}, defaultProps, props, {
+      value: jsCode,
+      language: "javascript"
+    }));
+  }
+});
+jest.mock('@monaco-editor/react', function () {
+  return {
+    __esModule: true,
+    "default": function _default(_ref) {
+      var _context;
+      var language = _ref.language,
+        value = _ref.value,
+        _onChange = _ref.onChange;
+      return ___EmotionJSX("textarea", {
+        "data-testid": "mock-monaco-editor",
+        onChange: function onChange(e) {
+          return _onChange(e.target.value);
+        },
+        value: _concatInstanceProperty(_context = "Editor Language: ".concat(language, ", Code:")).call(_context, value),
+        "aria-label": "Code editor"
+      });
+    }
+  };
+});
+describe('CodeEditor', function () {
+  it('renders with initial value', function () {
+    var value = 'console.log("Hello, World!");';
+    render(___EmotionJSX(CodeEditor, {
+      language: "javascript",
+      value: value
+    }));
+    expect(screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
+    expect(screen.getByText('Editor Language: javascript, Code:console.log("Hello, World!");')).toBeInTheDocument();
+  });
+  it('calls onChange when code changes', function () {
+    var value = 'console.log("Hello, World!");';
+    var mockOnChange = jest.fn();
+    render(___EmotionJSX(CodeEditor, {
+      language: "javascript",
+      value: value,
+      onChange: mockOnChange
+    }));
+    var editor = screen.getByTestId('mock-monaco-editor');
+    var newValue = _JSON$stringify([{
+      key: false
+    }]);
+    act(function () {
+      fireEvent.change(editor, {
+        target: {
+          value: newValue
+        }
+      });
+    });
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+});

package/lib/components/CodeEditor/index.js

@@ -0,0 +1 @@
+export { default } from './CodeEditor';

package/lib/components/CodeView/CodeView.mdx

@@ -5,7 +5,10 @@ import { Meta } from '@storybook/addon-docs';
 # CodeView
 
 This component is used for code syntax highlighting and is built on [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
-It should contain the language title and be formatted with indentations, line breaks, and comments, and should not contain complex code snippets.
+It should contain the language title and be formatted with indentations, line breaks, and comments, and should not contain complex code snippets. 
+
+The CodeView component should be used for code snippets that need to be presented in a read-only format. 
+For more complex use cases that require an interactive environment, support for various programming languages, functionalities like linting, keyboard interactions, and real-time updates, use [CodeEditor](./?path=/docs/experimental-codeeditor--docs).
 
 ### Required Components
 

package/lib/index.js

@@ -63,6 +63,7 @@ export { default as Checkbox } from './components/Checkbox';
 export * from './components/Checkbox';
 export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
+export { default as CodeEditor } from './components/CodeEditor';
 export { default as CodeView } from './components/CodeView';
 export { default as CollapsiblePanel } from './components/CollapsiblePanel';
 export * from './components/CollapsiblePanel';

package/lib/styles/variants/variants.js

@@ -17,6 +17,7 @@ import breadcrumb from '../../components/Breadcrumbs/Breadcrumb.styles';
 import buttonBar from '../../components/ButtonBar/ButtonBar.styles';
 import calendar from '../../components/Calendar/Calendar.styles';
 import callout from '../../components/Callout/Callout.styles';
+import codeEditor from '../../components/CodeEditor/CodeEditor.styles';
 import codeView from '../../components/CodeView/CodeView.styles';
 import collapsiblePanel from '../../components/CollapsiblePanel/CollapsiblePanel.styles';
 import copyText from '../../components/CopyText/CopyText.styles';
@@ -66,6 +67,7 @@ export default _objectSpread({
   calendar: calendar,
   rangeCalendar: rangeCalendar,
   callout: callout,
+  codeEditor: codeEditor,
   codeView: codeView,
   collapsiblePanel: collapsiblePanel,
   copyText: copyText,

package/lib/types/codeEditor.js

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

package/lib/types/index.js

@@ -9,6 +9,7 @@ export * from './buttonBar';
 export * from './calendar';
 export * from './card';
 export * from './checkboxField';
+export * from './codeEditor';
 export * from './collapsiblePanel';
 export * from './colorField';
 export * from './copyText';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.121.1-alpha.3",
+  "version": "2.122.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -49,6 +49,7 @@
     "@internationalized/date": "^3.5.3",
     "@internationalized/number": "^3.6.0",
     "@mdx-js/react": "^1.6.22",
+    "@monaco-editor/react": "4.4.0",
     "@pingux/mdi-react": "^1.2.0",
     "@react-aria/accordion": "~3.0.0-alpha.11",
     "@react-aria/breadcrumbs": "^3.1.4",
@@ -116,6 +117,7 @@
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.7.4",
     "moment": "^2.29.4",
+    "monaco-editor": "0.34.1",
     "pluralize": "^8.0.0",
     "prism-react-renderer": "1.2.1",
     "prismjs": "^1.27.0",