@payloadcms/ui 3.0.0-canary.fb81f02 → 3.0.0

package/dist/elements/Card/index.scss

@@ -1,71 +1,73 @@
 @import '../../scss/styles';
 
-.card {
-  background: var(--theme-elevation-50);
-  padding: base(0.8);
-  width: 100%;
-  min-height: base(4);
-  position: relative;
-  border-radius: var(--style-radius-m);
-  border: 1px solid var(--theme-border-color);
-  transition-property: border, box-shadow, background;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-  display: flex;
-  justify-content: space-between;
-  align-self: start;
-  gap: base(0.8);
-
-  &__title {
-    @extend %h5;
-    letter-spacing: 0;
-    font-weight: 600;
-    line-height: base(0.8);
+@layer payload-default {
+  .card {
+    background: var(--theme-elevation-50);
+    padding: base(0.8);
     width: 100%;
-    margin: base(0.1) 0;
-  }
-
-  &__actions {
+    min-height: base(4);
     position: relative;
-    z-index: 2;
-    display: inline-flex;
-    .btn {
-      margin: 0;
-      flex-shrink: 0;
+    border-radius: var(--style-radius-m);
+    border: 1px solid var(--theme-border-color);
+    transition-property: border, box-shadow, background;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    display: flex;
+    justify-content: space-between;
+    align-self: start;
+    gap: base(0.8);
+
+    &__title {
+      @extend %h5;
+      letter-spacing: 0;
+      font-weight: 600;
+      line-height: base(0.8);
+      width: 100%;
+      margin: base(0.1) 0;
     }
 
-    .btn__icon {
-      border: 1px solid var(--theme-border-color);
-      transition-property: border, box-shadow, color, background;
-      transition-duration: 100ms;
-      transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    &__actions {
+      position: relative;
+      z-index: 2;
+      display: inline-flex;
+      .btn {
+        margin: 0;
+        flex-shrink: 0;
+      }
+
+      .btn__icon {
+        border: 1px solid var(--theme-border-color);
+        transition-property: border, box-shadow, color, background;
+        transition-duration: 100ms;
+        transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
-      &:hover {
-        border: 1px solid var(--theme-elevation-500);
-        background-color: var(--theme-elevation-0);
-        color: currentColor;
-        @include shadow-sm;
+        &:hover {
+          border: 1px solid var(--theme-elevation-500);
+          background-color: var(--theme-elevation-0);
+          color: currentColor;
+          @include shadow-sm;
+        }
       }
     }
-  }
 
-  &--has-onclick {
-    cursor: pointer;
+    &--has-onclick {
+      cursor: pointer;
 
-    &:hover {
-      background: var(--theme-elevation-50);
-      border: 1px solid var(--theme-elevation-250);
-      box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+      &:hover {
+        background: var(--theme-elevation-50);
+        border: 1px solid var(--theme-elevation-250);
+        box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+      }
     }
-  }
 
-  &__click {
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    margin: 0;
+    &__click {
+      z-index: 1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      margin: 0;
+    }
   }
 }

package/dist/elements/CodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAIvC,OAAO,cAAc,CAAA;AAMrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkC/B,CAAA;AAGD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAIvC,OAAO,cAAc,CAAA;AAMrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqD/B,CAAA;AAGD,eAAe,UAAU,CAAA"}

package/dist/elements/CodeEditor/CodeEditor.js

@@ -1,43 +1,123 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import EditorImport from '@monaco-editor/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTheme } from '../../providers/Theme/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
 import './index.scss';
 const Editor = EditorImport.default || EditorImport;
 const baseClass = 'code-editor';
-const CodeEditor = (props)=>{
-    const { className, height, options, readOnly, ...rest } = props;
-    const { theme } = useTheme();
-    const classes = [
-        baseClass,
-        className,
-        rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',
-        readOnly && 'read-only'
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ _jsx(Editor, {
-        className: classes,
-        height: height,
-        loading: /*#__PURE__*/ _jsx(ShimmerEffect, {
-            height: height
-        }),
-        options: {
-            detectIndentation: true,
-            minimap: {
-                enabled: false
-            },
-            readOnly: Boolean(readOnly),
-            scrollBeyondLastLine: false,
-            tabSize: 2,
-            wordWrap: 'on',
-            ...options
+const CodeEditor = props => {
+  const $ = _c(22);
+  let rest;
+  let readOnly;
+  let className;
+  let options;
+  let maxHeight;
+  if ($[0] !== props) {
+    ({
+      className,
+      maxHeight,
+      options,
+      readOnly,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = rest;
+    $[2] = readOnly;
+    $[3] = className;
+    $[4] = options;
+    $[5] = maxHeight;
+  } else {
+    rest = $[1];
+    readOnly = $[2];
+    className = $[3];
+    options = $[4];
+    maxHeight = $[5];
+  }
+  const [dynamicHeight, setDynamicHeight] = useState(20);
+  const {
+    theme
+  } = useTheme();
+  const t0 = rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : "";
+  const t1 = readOnly && "read-only";
+  let t2;
+  if ($[6] !== className || $[7] !== t0 || $[8] !== t1) {
+    t2 = [baseClass, className, t0, t1].filter(Boolean);
+    $[6] = className;
+    $[7] = t0;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const classes = t2.join(" ");
+  let t3;
+  if ($[10] !== dynamicHeight || $[11] !== readOnly || $[12] !== options || $[13] !== theme || $[14] !== maxHeight || $[15] !== rest || $[16] !== classes) {
+    let t4;
+    if ($[18] !== rest.onChange) {
+      t4 = (value, ev) => {
+        rest.onChange?.(value, ev);
+        setDynamicHeight(Math.max(56, value.split("\n").length * 18 + 2));
+      };
+      $[18] = rest.onChange;
+      $[19] = t4;
+    } else {
+      t4 = $[19];
+    }
+    let t5;
+    if ($[20] !== rest.onMount) {
+      t5 = (editor, monaco) => {
+        rest.onMount?.(editor, monaco);
+        setDynamicHeight(Math.max(56, editor.getValue().split("\n").length * 18 + 2));
+      };
+      $[20] = rest.onMount;
+      $[21] = t5;
+    } else {
+      t5 = $[21];
+    }
+    t3 = _jsx(Editor, {
+      className: classes,
+      loading: _jsx(ShimmerEffect, {
+        height: dynamicHeight
+      }),
+      options: {
+        detectIndentation: true,
+        hideCursorInOverviewRuler: true,
+        minimap: {
+          enabled: false
+        },
+        overviewRulerBorder: false,
+        readOnly: Boolean(readOnly),
+        scrollbar: {
+          alwaysConsumeMouseWheel: false
         },
-        theme: theme === 'dark' ? 'vs-dark' : 'vs',
-        ...rest
+        scrollBeyondLastLine: false,
+        tabSize: 2,
+        wordWrap: "on",
+        ...options
+      },
+      theme: theme === "dark" ? "vs-dark" : "vs",
+      ...rest,
+      height: maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight,
+      onChange: t4,
+      onMount: t5
     });
+    $[10] = dynamicHeight;
+    $[11] = readOnly;
+    $[12] = options;
+    $[13] = theme;
+    $[14] = maxHeight;
+    $[15] = rest;
+    $[16] = classes;
+    $[17] = t3;
+  } else {
+    t3 = $[17];
+  }
+  return t3;
 };
 // eslint-disable-next-line no-restricted-exports
 export default CodeEditor;
-
 //# sourceMappingURL=CodeEditor.js.map

package/dist/elements/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport EditorImport from '@monaco-editor/react'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nconst Editor = (EditorImport.default || EditorImport) as unknown as typeof EditorImport.default\n\nconst baseClass = 'code-editor'\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const { className, height, options, readOnly, ...rest } = props\n\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <Editor\n      className={classes}\n      height={height}\n      loading={<ShimmerEffect height={height} />}\n      options={{\n        detectIndentation: true,\n        minimap: {\n          enabled: false,\n        },\n        readOnly: Boolean(readOnly),\n        scrollBeyondLastLine: false,\n        tabSize: 2,\n        wordWrap: 'on',\n        ...options,\n      }}\n      theme={theme === 'dark' ? 'vs-dark' : 'vs'}\n      {...rest}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"names":["EditorImport","React","useTheme","ShimmerEffect","Editor","default","baseClass","CodeEditor","props","className","height","options","readOnly","rest","theme","classes","defaultLanguage","filter","Boolean","join","loading","detectIndentation","minimap","enabled","scrollBeyondLastLine","tabSize","wordWrap"],"mappings":"AAAA;;AACA,OAAOA,kBAAkB,uBAAsB;AAC/C,OAAOC,WAAW,QAAO;AAIzB,SAASC,QAAQ,QAAQ,iCAAgC;AACzD,SAASC,aAAa,QAAQ,4BAA2B;AACzD,OAAO,eAAc;AAErB,MAAMC,SAAUJ,aAAaK,OAAO,IAAIL;AAExC,MAAMM,YAAY;AAElB,MAAMC,aAA8B,CAACC;IACnC,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGL;IAE1D,MAAM,EAAEM,KAAK,EAAE,GAAGZ;IAElB,MAAMa,UAAU;QACdT;QACAG;QACAI,MAAMG,kBAAkB,CAAC,UAAU,EAAEH,KAAKG,eAAe,CAAC,CAAC,GAAG;QAC9DJ,YAAY;KACb,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,KAACf;QACCK,WAAWM;QACXL,QAAQA;QACRU,uBAAS,KAACjB;YAAcO,QAAQA;;QAChCC,SAAS;YACPU,mBAAmB;YACnBC,SAAS;gBACPC,SAAS;YACX;YACAX,UAAUM,QAAQN;YAClBY,sBAAsB;YACtBC,SAAS;YACTC,UAAU;YACV,GAAGf,OAAO;QACZ;QACAG,OAAOA,UAAU,SAAS,YAAY;QACrC,GAAGD,IAAI;;AAGd;AAEA,iDAAiD;AACjD,eAAeN,WAAU"}
+{"version":3,"file":"CodeEditor.js","names":["c","_c","EditorImport","React","useState","useTheme","ShimmerEffect","Editor","default","baseClass","CodeEditor","props","$","rest","readOnly","className","options","maxHeight","dynamicHeight","setDynamicHeight","theme","t0","defaultLanguage","t1","t2","filter","Boolean","classes","join","t3","t4","onChange","value","ev","Math","max","split","length","t5","onMount","editor","monaco","getValue","_jsx","loading","height","scrollbar","alwaysConsumeMouseWheel","scrollBeyondLastLine","tabSize","wordWrap","min"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport EditorImport from '@monaco-editor/react'\nimport React, { useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nconst Editor = (EditorImport.default || EditorImport) as unknown as typeof EditorImport.default\n\nconst baseClass = 'code-editor'\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const { className, maxHeight, options, readOnly, ...rest } = props\n  const [dynamicHeight, setDynamicHeight] = useState(20)\n  const { theme } = useTheme()\n\n  const MIN_HEIGHT = 56 // equivalent to 3 lines\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <Editor\n      className={classes}\n      loading={<ShimmerEffect height={dynamicHeight} />}\n      options={{\n        detectIndentation: true,\n        hideCursorInOverviewRuler: true,\n        minimap: {\n          enabled: false,\n        },\n        overviewRulerBorder: false,\n        readOnly: Boolean(readOnly),\n        scrollbar: {\n          alwaysConsumeMouseWheel: false,\n        },\n        scrollBeyondLastLine: false,\n        tabSize: 2,\n        wordWrap: 'on',\n        ...options,\n      }}\n      theme={theme === 'dark' ? 'vs-dark' : 'vs'}\n      {...rest}\n      // Since we are not building an IDE and the container\n      // can already have scrolling, we want the height of the\n      // editor to fit its content.\n      // See: https://github.com/microsoft/monaco-editor/discussions/3677\n      height={maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight}\n      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(Math.max(MIN_HEIGHT, value.split('\\n').length * 18 + 2))\n      }}\n      onMount={(editor, monaco) => {\n        rest.onMount?.(editor, monaco)\n        setDynamicHeight(Math.max(MIN_HEIGHT, editor.getValue().split('\\n').length * 18 + 2))\n      }}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/CodeEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,YAAY,EAAE,KAAK,EAAE,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,YAAY,EAAE,KAAK,EAAE,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMtC,CAAA"}

package/dist/elements/CodeEditor/index.js

@@ -1,19 +1,15 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Suspense, lazy } from 'react';
+import React, { lazy, Suspense } from 'react';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
-const LazyEditor = /*#__PURE__*/ lazy(()=>import('./CodeEditor.js'));
-export const CodeEditor = (props)=>{
-    const { height = '35vh' } = props;
-    return /*#__PURE__*/ _jsx(Suspense, {
-        fallback: /*#__PURE__*/ _jsx(ShimmerEffect, {
-            height: height
-        }),
-        children: /*#__PURE__*/ _jsx(LazyEditor, {
-            ...props,
-            height: height
-        })
-    });
+const LazyEditor = /*#__PURE__*/lazy(() => import('./CodeEditor.js'));
+export const CodeEditor = props => {
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: /*#__PURE__*/_jsx(ShimmerEffect, {}),
+    children: /*#__PURE__*/_jsx(LazyEditor, {
+      ...props
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/CodeEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/CodeEditor/index.tsx"],"sourcesContent":["'use client'\nimport React, { Suspense, lazy } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nconst LazyEditor = lazy(() => import('./CodeEditor.js'))\n\nexport type { Props }\n\nexport const CodeEditor: React.FC<Props> = (props) => {\n  const { height = '35vh' } = props\n\n  return (\n    <Suspense fallback={<ShimmerEffect height={height} />}>\n      <LazyEditor {...props} height={height} />\n    </Suspense>\n  )\n}\n"],"names":["React","Suspense","lazy","ShimmerEffect","LazyEditor","CodeEditor","props","height","fallback"],"mappings":"AAAA;;AACA,OAAOA,SAASC,QAAQ,EAAEC,IAAI,QAAQ,QAAO;AAI7C,SAASC,aAAa,QAAQ,4BAA2B;AAEzD,MAAMC,2BAAaF,KAAK,IAAM,MAAM,CAAC;AAIrC,OAAO,MAAMG,aAA8B,CAACC;IAC1C,MAAM,EAAEC,SAAS,MAAM,EAAE,GAAGD;IAE5B,qBACE,KAACL;QAASO,wBAAU,KAACL;YAAcI,QAAQA;;kBACzC,cAAA,KAACH;YAAY,GAAGE,KAAK;YAAEC,QAAQA;;;AAGrC,EAAC"}
+{"version":3,"file":"index.js","names":["React","lazy","Suspense","ShimmerEffect","LazyEditor","CodeEditor","props","_jsx","fallback"],"sources":["../../../src/elements/CodeEditor/index.tsx"],"sourcesContent":["'use client'\nimport React, { lazy, Suspense } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nconst LazyEditor = lazy(() => import('./CodeEditor.js'))\n\nexport type { Props }\n\nexport const CodeEditor: React.FC<Props> = (props) => {\n  return (\n    <Suspense fallback={<ShimmerEffect />}>\n      <LazyEditor {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,IAAI,EAAEC,QAAQ,QAAQ;AAItC,SAASC,aAAa,QAAQ;AAE9B,MAAMC,UAAA,gBAAaH,IAAA,CAAK,MAAM,MAAM,CAAC;AAIrC,OAAO,MAAMI,UAAA,GAA+BC,KAAA;EAC1C,oBACEC,IAAA,CAACL,QAAA;IAASM,QAAA,eAAUD,IAAA,CAACJ,aAAA;cACnB,aAAAI,IAAA,CAACH,UAAA;MAAY,GAAGE;;;AAGtB","ignoreList":[]}

package/dist/elements/CodeEditor/index.scss

@@ -1,21 +1,23 @@
 @import '../../scss/styles';
 
-.code-editor {
-  direction: ltr;
-  @include formInput;
-  height: auto;
-  padding: 0;
+@layer payload-default {
+  .code-editor {
+    direction: ltr;
+    @include formInput;
+    height: auto;
+    padding: 0;
 
-  .monaco-editor {
-    .view-overlays .current-line {
-      max-width: calc(100% - 14px);
-      border-width: 0px;
-    }
-
-    &:focus-within {
+    .monaco-editor {
       .view-overlays .current-line {
-        border-right: 0;
-        border-width: 1px;
+        max-width: calc(100% - 14px);
+        border-width: 0px;
+      }
+
+      &:focus-within {
+        .view-overlays .current-line {
+          border-right: 0;
+          border-width: 1px;
+        }
       }
     }
   }

package/dist/elements/CodeEditor/types.d.ts

@@ -1,5 +1,6 @@
 import type { EditorProps } from '@monaco-editor/react';
 export type Props = {
+    maxHeight?: number;
     readOnly?: boolean;
 } & EditorProps;
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/CodeEditor/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,WAAW,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,WAAW,CAAA"}

package/dist/elements/CodeEditor/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/elements/CodeEditor/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/CodeEditor/types.ts"],"sourcesContent":["import type { EditorProps } from '@monaco-editor/react'\n\nexport type Props = {\n  readOnly?: boolean\n} & EditorProps\n"],"names":[],"mappings":"AAEA,WAEe"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/CodeEditor/types.ts"],"sourcesContent":["import type { EditorProps } from '@monaco-editor/react'\n\nexport type Props = {\n  maxHeight?: number\n  readOnly?: boolean\n} & EditorProps\n"],"mappings":"AAEA","ignoreList":[]}

package/dist/elements/Collapsible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAQ1F,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyFvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAQ1F,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2FvC,CAAA"}