@payloadcms/ui 3.0.0-canary.95fcd13 → 3.0.0-canary.9beaa28

package/dist/elements/Button/index.scss

@@ -4,8 +4,99 @@ a.btn {
   display: inline-block;
 }
 
+.btn--withPopup {
+  margin-block: 24px;
+  .btn {
+    margin: 0;
+  }
+}
+
+.btn {
+  // colors
+  &--style-primary {
+    --color: var(--theme-elevation-0);
+    --bg-color: var(--theme-elevation-800);
+    --box-shadow: none;
+    --hover-bg: var(--theme-elevation-600);
+    --hover-color: var(--color);
+
+    &.btn--disabled {
+      --bg-color: var(--theme-elevation-200);
+      --color: var(--theme-elevation-800);
+      --hover-bg: var(--bg-color);
+      --hover-color: var(--color);
+    }
+  }
+
+  &--style-secondary {
+    --color: var(--theme-text);
+    --bg-color: transparent;
+    --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
+    --hover-color: var(--theme-elevation-600);
+    --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
+
+    &.btn--disabled {
+      --color: var(--theme-elevation-200);
+      --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+      --hover-color: var(--color);
+    }
+  }
+
+  &--style-pill {
+    --bg-color: var(--theme-elevation-150);
+    --color: var(--theme-elevation-800);
+    --hover-color: var(--color);
+    --hover-bg: var(--theme-elevation-100);
+
+    &.btn--disabled {
+      --color: var(--theme-elevation-600);
+      --hover-bg: var(--bg-color);
+      --hover-color: var(--color);
+    }
+  }
+}
+
+.btn--withPopup {
+  .popup-button {
+    color: var(--color, inherit);
+    background-color: var(--bg-color);
+    box-shadow: var(--box-shadow);
+    border-radius: $style-radius-m;
+    border-left: 1px solid var(--theme-bg);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    align-items: center;
+
+    &:hover,
+    &:focus-visible,
+    &:focus,
+    &:active {
+      background-color: var(--hover-bg);
+      color: var(--hover-color);
+      box-shadow: var(--hover-box-shadow);
+    }
+  }
+}
+
+.btn,
+.btn--withPopup .btn {
+  &:hover,
+  &:focus-visible,
+  &:focus,
+  &:active {
+    color: var(--hover-color);
+    box-shadow: var(--hover-box-shadow);
+    background-color: var(--hover-bg);
+  }
+}
+
+.btn--disabled,
+.btn--disabled .btn {
+  cursor: not-allowed;
+}
+
 .btn {
-  background: transparent;
   border-radius: $style-radius-s;
   font-size: var(--base-body-size);
   margin-block: base(1.2);
@@ -14,11 +105,20 @@ a.btn {
   cursor: pointer;
   font-weight: normal;
   text-decoration: none;
-  color: inherit;
   transition-property: border, color, box-shadow, background;
   transition-duration: 100ms;
   transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
+  color: var(--color, inherit);
+  background-color: var(--bg-color, transparent);
+  box-shadow: var(--box-shadow, none);
+
+  .icon {
+    @include color-svg(var(--color, currentColor));
+    width: 100%;
+    height: 100%;
+  }
+
   &__content {
     display: flex;
     align-items: center;
@@ -33,7 +133,6 @@ a.btn {
     justify-content: center;
     border: 1px solid;
     border-radius: 100%;
-    @include color-svg(currentColor);
     padding: base(0.1);
     color: inherit;
 
@@ -47,6 +146,10 @@ a.btn {
     }
   }
 
+  &--withPopup {
+    display: flex;
+  }
+
   &--has-tooltip {
     position: relative;
   }
@@ -127,46 +230,9 @@ a.btn {
     }
   }
 
-  &--style-primary {
-    background: var(--theme-elevation-800);
-    color: var(--theme-elevation-0);
-
-    &.btn--disabled {
-      background: var(--theme-elevation-200);
-    }
-
-    &:not(.btn--disabled) {
-      &:hover,
-      &:focus-visible,
-      &:focus,
-      &:active {
-        background: var(--theme-elevation-600);
-      }
-    }
-
-    .icon {
-      @include color-svg(var(--theme-elevation-0));
-    }
-  }
-
-  &--style-secondary {
-    box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
-    color: var(--theme-text);
-
-    &.btn--disabled {
-      color: var(--theme-elevation-200);
-      box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
-    }
-
-    &:not(.btn--disabled) {
-      &:hover,
-      &:focus-visible,
-      &:focus,
-      &:active {
-        color: var(--theme-elevation-600);
-        box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
-      }
-    }
+  &--withPopup .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   &--style-icon-label,

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

@@ -2,9 +2,10 @@ import type { ElementType, MouseEvent } from 'react';
 import type React from 'react';
 export type Props = {
     Link?: React.ElementType;
+    SubMenuPopupContent?: React.ReactNode;
     'aria-label'?: string;
     buttonId?: string;
-    buttonStyle?: 'error' | 'icon-label' | 'none' | 'primary' | 'secondary' | 'transparent';
+    buttonStyle?: 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'transparent';
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAA;IACvF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAA;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}

package/dist/elements/Button/types.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\nexport type Props = {\n  Link?: React.ElementType\n  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?: 'error' | 'icon-label' | 'none' | 'primary' | 'secondary' | 'transparent'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  iconStyle?: 'none' | 'with-border' | 'without-border'\n  id?: string\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  round?: boolean\n  size?: 'large' | 'medium' | 'small'\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"names":[],"mappings":"AAGA,WAqBC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\nexport type Props = {\n  Link?: React.ElementType\n  SubMenuPopupContent?: React.ReactNode\n  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?: 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'transparent'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  iconStyle?: 'none' | 'with-border' | 'without-border'\n  id?: string\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  round?: boolean\n  size?: 'large' | 'medium' | 'small'\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"mappings":"AAGA","ignoreList":[]}

package/dist/elements/Card/index.js

@@ -1,40 +1,41 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Button } from '../Button/index.js';
 import './index.scss';
 const baseClass = 'card';
-export const Card = (props)=>{
-    const { id, Link, actions, buttonAriaLabel, href, onClick, title, titleAs } = props;
-    const classes = [
-        baseClass,
-        id,
-        (onClick || href) && `${baseClass}--has-onclick`
-    ].filter(Boolean).join(' ');
-    const Tag = titleAs ?? 'div';
-    return /*#__PURE__*/ _jsxs("div", {
-        className: classes,
-        id: id,
-        children: [
-            /*#__PURE__*/ _jsx(Tag, {
-                className: `${baseClass}__title`,
-                children: title
-            }),
-            actions && /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__actions`,
-                children: actions
-            }),
-            (onClick || href) && /*#__PURE__*/ _jsx(Button, {
-                Link: Link,
-                "aria-label": buttonAriaLabel,
-                buttonStyle: "none",
-                className: `${baseClass}__click`,
-                el: "link",
-                onClick: onClick,
-                to: href
-            })
-        ]
-    });
+export const Card = props => {
+  const {
+    id,
+    Link,
+    actions,
+    buttonAriaLabel,
+    href,
+    onClick,
+    title,
+    titleAs
+  } = props;
+  const classes = [baseClass, id, (onClick || href) && `${baseClass}--has-onclick`].filter(Boolean).join(' ');
+  const Tag = titleAs ?? 'div';
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes,
+    id: id,
+    children: [/*#__PURE__*/_jsx(Tag, {
+      className: `${baseClass}__title`,
+      children: title
+    }), actions && /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__actions`,
+      children: actions
+    }), (onClick || href) && /*#__PURE__*/_jsx(Button, {
+      Link: Link,
+      "aria-label": buttonAriaLabel,
+      buttonStyle: "none",
+      className: `${baseClass}__click`,
+      el: "link",
+      onClick: onClick,
+      to: href
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Card/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType } from 'react'\n\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nexport type Props = {\n  Link?: ElementType\n  actions?: React.ReactNode\n  buttonAriaLabel?: string\n  href?: string\n  id?: string\n  onClick?: () => void\n  title: string\n  titleAs?: ElementType\n}\n\nconst baseClass = 'card'\n\nexport const Card: React.FC<Props> = (props) => {\n  const { id, Link, actions, buttonAriaLabel, href, onClick, title, titleAs } = props\n\n  const classes = [baseClass, id, (onClick || href) && `${baseClass}--has-onclick`]\n    .filter(Boolean)\n    .join(' ')\n\n  const Tag = titleAs ?? 'div'\n\n  return (\n    <div className={classes} id={id}>\n      <Tag className={`${baseClass}__title`}>{title}</Tag>\n      {actions && <div className={`${baseClass}__actions`}>{actions}</div>}\n      {(onClick || href) && (\n        <Button\n          Link={Link}\n          aria-label={buttonAriaLabel}\n          buttonStyle=\"none\"\n          className={`${baseClass}__click`}\n          el=\"link\"\n          onClick={onClick}\n          to={href}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":["React","Button","baseClass","Card","props","id","Link","actions","buttonAriaLabel","href","onClick","title","titleAs","classes","filter","Boolean","join","Tag","div","className","aria-label","buttonStyle","el","to"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAarB,MAAMC,YAAY;AAElB,OAAO,MAAMC,OAAwB,CAACC;IACpC,MAAM,EAAEC,EAAE,EAAEC,IAAI,EAAEC,OAAO,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGR;IAE9E,MAAMS,UAAU;QAACX;QAAWG;QAAKK,CAAAA,WAAWD,IAAG,KAAM,CAAC,EAAEP,UAAU,aAAa,CAAC;KAAC,CAC9EY,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,MAAMC,MAAML,WAAW;IAEvB,qBACE,MAACM;QAAIC,WAAWN;QAASR,IAAIA;;0BAC3B,KAACY;gBAAIE,WAAW,CAAC,EAAEjB,UAAU,OAAO,CAAC;0BAAGS;;YACvCJ,yBAAW,KAACW;gBAAIC,WAAW,CAAC,EAAEjB,UAAU,SAAS,CAAC;0BAAGK;;YACpDG,CAAAA,WAAWD,IAAG,mBACd,KAACR;gBACCK,MAAMA;gBACNc,cAAYZ;gBACZa,aAAY;gBACZF,WAAW,CAAC,EAAEjB,UAAU,OAAO,CAAC;gBAChCoB,IAAG;gBACHZ,SAASA;gBACTa,IAAId;;;;AAKd,EAAC"}
+{"version":3,"file":"index.js","names":["React","Button","baseClass","Card","props","id","Link","actions","buttonAriaLabel","href","onClick","title","titleAs","classes","filter","Boolean","join","Tag","_jsxs","className","_jsx","buttonStyle","el","to"],"sources":["../../../src/elements/Card/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType } from 'react'\n\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nexport type Props = {\n  Link?: ElementType\n  actions?: React.ReactNode\n  buttonAriaLabel?: string\n  href?: string\n  id?: string\n  onClick?: () => void\n  title: string\n  titleAs?: ElementType\n}\n\nconst baseClass = 'card'\n\nexport const Card: React.FC<Props> = (props) => {\n  const { id, Link, actions, buttonAriaLabel, href, onClick, title, titleAs } = props\n\n  const classes = [baseClass, id, (onClick || href) && `${baseClass}--has-onclick`]\n    .filter(Boolean)\n    .join(' ')\n\n  const Tag = titleAs ?? 'div'\n\n  return (\n    <div className={classes} id={id}>\n      <Tag className={`${baseClass}__title`}>{title}</Tag>\n      {actions && <div className={`${baseClass}__actions`}>{actions}</div>}\n      {(onClick || href) && (\n        <Button\n          Link={Link}\n          aria-label={buttonAriaLabel}\n          buttonStyle=\"none\"\n          className={`${baseClass}__click`}\n          el=\"link\"\n          onClick={onClick}\n          to={href}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAaP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,IAAA,GAAyBC,KAAA;EACpC,MAAM;IAAEC,EAAE;IAAEC,IAAI;IAAEC,OAAO;IAAEC,eAAe;IAAEC,IAAI;IAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAO,CAAE,GAAGR,KAAA;EAE9E,MAAMS,OAAA,GAAU,CAACX,SAAA,EAAWG,EAAA,EAAK,CAAAK,OAAA,IAAWD,IAAG,KAAM,GAAGP,SAAA,eAAwB,CAAC,CAC9EY,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,GAAA,GAAML,OAAA,IAAW;EAEvB,oBACEM,KAAA,CAAC;IAAIC,SAAA,EAAWN,OAAA;IAASR,EAAA,EAAIA,EAAA;4BAC3Be,IAAA,CAACH,GAAA;MAAIE,SAAA,EAAW,GAAGjB,SAAA,SAAkB;gBAAGS;QACvCJ,OAAA,iBAAWa,IAAA,CAAC;MAAID,SAAA,EAAW,GAAGjB,SAAA,WAAoB;gBAAGK;QACpD,CAAAG,OAAA,IAAWD,IAAG,kBACdW,IAAA,CAACnB,MAAA;MACCK,IAAA,EAAMA,IAAA;MACN,cAAYE,eAAA;MACZa,WAAA,EAAY;MACZF,SAAA,EAAW,GAAGjB,SAAA,SAAkB;MAChCoB,EAAA,EAAG;MACHZ,OAAA,EAASA,OAAA;MACTa,EAAA,EAAId;;;AAKd","ignoreList":[]}

package/dist/elements/Card/index.scss

@@ -17,12 +17,12 @@
   gap: base(0.8);
 
   &__title {
-    @extend %h4;
+    @extend %h5;
     letter-spacing: 0;
     font-weight: 600;
-    line-height: base(1.2);
+    line-height: base(0.8);
     width: 100%;
-    margin: 0;
+    margin: base(0.1) 0;
   }
 
   &__actions {

package/dist/elements/CodeEditor/CodeEditor.js

@@ -1,4 +1,6 @@
 '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';
@@ -7,37 +9,84 @@ 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(17);
+  let rest;
+  let readOnly;
+  let className;
+  let height;
+  let options;
+  if ($[0] !== props) {
+    ({
+      className,
+      height,
+      options,
+      readOnly,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = rest;
+    $[2] = readOnly;
+    $[3] = className;
+    $[4] = height;
+    $[5] = options;
+  } else {
+    rest = $[1];
+    readOnly = $[2];
+    className = $[3];
+    height = $[4];
+    options = $[5];
+  }
+  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] !== height || $[11] !== readOnly || $[12] !== options || $[13] !== theme || $[14] !== classes || $[15] !== rest) {
+    t3 = _jsx(Editor, {
+      className: classes,
+      height,
+      loading: _jsx(ShimmerEffect, {
+        height
+      }),
+      options: {
+        detectIndentation: true,
+        minimap: {
+          enabled: false
         },
-        theme: theme === 'dark' ? 'vs-dark' : 'vs',
-        ...rest
+        readOnly: Boolean(readOnly),
+        scrollBeyondLastLine: false,
+        tabSize: 2,
+        wordWrap: "on",
+        ...options
+      },
+      theme: theme === "dark" ? "vs-dark" : "vs",
+      ...rest
     });
+    $[10] = height;
+    $[11] = readOnly;
+    $[12] = options;
+    $[13] = theme;
+    $[14] = classes;
+    $[15] = rest;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  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","useTheme","ShimmerEffect","Editor","default","baseClass","CodeEditor","props","$","rest","readOnly","className","height","options","theme","t0","defaultLanguage","t1","t2","filter","Boolean","classes","join","t3","_jsx","loading","scrollBeyondLastLine","tabSize","wordWrap"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,YAAA,MAAkB;AACzB,OAAOC,KAAA,MAAW;AAIlB,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,OAAO;AAEP,MAAMC,MAAA,GAAUJ,YAAA,CAAaK,OAAO,IAAIL,YAAA;AAExC,MAAMM,SAAA,GAAY;AAElB,MAAMC,UAAA,GAA8BC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAA,IAAAW,IAAA;EAAA,IAAAC,QAAA;EAAA,IAAAC,SAAA;EAAA,IAAAC,MAAA;EAAA,IAAAC,OAAA;EAAA,IAAAL,CAAA,QAAAD,KAAA;IAClC;MAAAI,SAAA;MAAAC,MAAA;MAAAC,OAAA;MAAAH,QAAA;MAAA,GAAAD;IAAA,IAA0DF,KAAA;IAAAC,CAAA,MAAAD,KAAA;IAAAC,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAI,MAAA;IAAAJ,CAAA,MAAAK,OAAA;EAAA;IAAAJ,IAAA,GAAAD,CAAA;IAAAE,QAAA,GAAAF,CAAA;IAAAG,SAAA,GAAAH,CAAA;IAAAI,MAAA,GAAAJ,CAAA;IAAAK,OAAA,GAAAL,CAAA;EAAA;EAE1D;IAAAM;EAAA,IAAkBb,QAAA;EAKhB,MAAAc,EAAA,GAAAN,IAAA,EAAAO,eAAA,GAAwB,aAAaP,IAAA,CAAAO,eAAA,EAAsB,GAAG;EAC9D,MAAAC,EAAA,GAAAP,QAAA,IAAY;EAAA,IAAAQ,EAAA;EAAA,IAAAV,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAO,EAAA,IAAAP,CAAA,QAAAS,EAAA;IAJEC,EAAA,IAAAb,SAAA,EAEdM,SAAA,EACAI,EAA8D,EAC9DE,EAAY,EAAAE,MAAA,CAAAC,OAEJ;IAAAZ,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EANV,MAAAa,OAAA,GAAgBH,EAMN,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,SAAAI,MAAA,IAAAJ,CAAA,SAAAE,QAAA,IAAAF,CAAA,SAAAK,OAAA,IAAAL,CAAA,SAAAM,KAAA,IAAAN,CAAA,SAAAa,OAAA,IAAAb,CAAA,SAAAC,IAAA;IAGNc,EAAA,GAAAC,IAAA,CAAArB,MAAA;MAAAQ,SAAA,EACaU,OAAA;MAAAT,MAAA;MAAAa,OAAA,EAEFD,IAAA,CAAAtB,aAAA;QAAAU;MAAA,C;;;;;;kBAMGQ,OAAA,CAAQV,QAAA;QAAAgB,oBAAA;QAAAC,OAAA;QAAAC,QAAA,EAGR;QAAA,GACPf;MAAO;MAAAC,KAAA,EAELA,KAAA,KAAU,SAAS,YAAY;MAAA,GAClCL;IAAI,C;;;;;;;;;;;SAhBVc,E;CAmBJ;AAEA;AACA,eAAejB,UAAA","ignoreList":[]}

package/dist/elements/CodeEditor/index.js

@@ -1,19 +1,21 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { Suspense, lazy } 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 => {
+  const {
+    height = '35vh'
+  } = props;
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: /*#__PURE__*/_jsx(ShimmerEffect, {
+      height: height
+    }),
+    children: /*#__PURE__*/_jsx(LazyEditor, {
+      ...props,
+      height: height
+    })
+  });
 };
-
 //# 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","Suspense","lazy","ShimmerEffect","LazyEditor","CodeEditor","props","height","_jsx","fallback"],"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"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,QAAQ,EAAEC,IAAI,QAAQ;AAItC,SAASC,aAAa,QAAQ;AAE9B,MAAMC,UAAA,gBAAaF,IAAA,CAAK,MAAM,MAAM,CAAC;AAIrC,OAAO,MAAMG,UAAA,GAA+BC,KAAA;EAC1C,MAAM;IAAEC,MAAA,GAAS;EAAM,CAAE,GAAGD,KAAA;EAE5B,oBACEE,IAAA,CAACP,QAAA;IAASQ,QAAA,eAAUD,IAAA,CAACL,aAAA;MAAcI,MAAA,EAAQA;;cACzC,aAAAC,IAAA,CAACJ,UAAA;MAAY,GAAGE,KAAK;MAAEC,MAAA,EAAQA;;;AAGrC","ignoreList":[]}

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  readOnly?: boolean\n} & EditorProps\n"],"mappings":"AAEA","ignoreList":[]}