@onereach/ui-components 2.74.16-beta.2375.0 → 2.75.0

package/dist/esm/v3/{OrCode-033d49f4.js → OrCode-fe49ca8e.js}

@@ -1,8 +1,8 @@
 import { EditorState } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
+import { EditorView, keymap } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
+import { basicSetup, EditorView as EditorView$1 } from 'codemirror';
 import { useElementHover } from '@vueuse/core';
-import { basicSetup, EditorView } from 'codemirror';
 import _ from 'lodash';
 import { defineComponent, ref } from 'vue-demi';
 import { a as script$1 } from './OrIconButton-b668558a.js';
@@ -16,6 +16,8 @@ import { css } from '@codemirror/lang-css';
 import { json } from '@codemirror/lang-json';
 import { javascript } from '@codemirror/lang-javascript';
 import { markdown } from '@codemirror/lang-markdown';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
 import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, renderSlot, createElementVNode, normalizeClass, createBlock, createCommentVNode, withDirectives, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -48,6 +50,173 @@ var languages = {
   [OrCodeLanguages.MD]: MD
 };
 
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+const chalky = 'var(--c-warning-darken-20)',
+  coral = 'var(--c-error)',
+  cyan = '#56b6c2',
+  invalid = 'var(--c-white)',
+  ivory = 'var(--c-neutral-6)',
+  stone = 'var(--c-neutral-5)',
+  // Brightened compared to original to increase contrast
+  malibu = '#61afef',
+  sage = 'var(--c-success)',
+  whiskey = 'var(--c-warning-darken-5)',
+  violet = '#c678dd',
+  darkBackground = 'var(--c-neutral-1)',
+  highlightBackground = 'var(--c-neutral-2)',
+  background = 'var(--c-neutral-1)',
+  tooltipBackground = 'var(--c-neutral-2)',
+  selection = 'var(--c-neutral-3)',
+  cursor = 'var(--c-primary)';
+/// The editor theme styles for One Dark.
+const orCodeTheme = EditorView.theme({
+  '&': {
+    color: ivory,
+    backgroundColor: background
+  },
+  '.cm-content': {
+    caretColor: cursor
+  },
+  '.cm-button': {
+    background: highlightBackground,
+    color: 'var(--c-neutral-6)',
+    border: 0,
+    borderRadius: 'var(--s-2)'
+  },
+  '.cm-panel.cm-search input[type=checkbox]': {
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  },
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeftColor: cursor
+  },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: selection
+  },
+  '.cm-panels': {
+    backgroundColor: darkBackground,
+    color: ivory
+  },
+  '.cm-panels.cm-panels-top': {
+    borderBottom: '2px solid var(--c-neutral-2)'
+  },
+  '.cm-panels.cm-panels-bottom': {
+    borderTop: '2px solid var(--c-neutral-2)'
+  },
+  '.cm-searchMatch': {
+    backgroundColor: 'var(--c-neutral-1)',
+    outline: '1px solid var(--c-neutral-2)'
+  },
+  '.cm-searchMatch.cm-searchMatch-selected': {
+    backgroundColor: '#6199ff2f'
+  },
+  '.cm-activeLine': {
+    backgroundColor: '#6699ff0b'
+  },
+  '.cm-selectionMatch': {
+    backgroundColor: '#aafe661a'
+  },
+  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+    backgroundColor: '#bad0f847'
+  },
+  '.cm-gutters': {
+    backgroundColor: background,
+    color: stone,
+    border: 'none'
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: highlightBackground
+  },
+  '.cm-foldPlaceholder': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: '#ddd'
+  },
+  '.cm-tooltip': {
+    border: 'none',
+    backgroundColor: tooltipBackground
+  },
+  '.cm-tooltip .cm-tooltip-arrow:before': {
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent'
+  },
+  '.cm-tooltip .cm-tooltip-arrow:after': {
+    borderTopColor: tooltipBackground,
+    borderBottomColor: tooltipBackground
+  },
+  '.cm-tooltip-autocomplete': {
+    '& > ul > li[aria-selected]': {
+      backgroundColor: highlightBackground,
+      color: ivory
+    }
+  },
+  '.cm-textfield': {
+    outline: 'none',
+    background: background,
+    color: 'var(--c-neutral-6)',
+    backgroundColor: 'var(--c-neutral-1)',
+    border: '1px solid var(--c-neutral-2)',
+    borderRadius: 'var(--s-2)'
+  }
+}, {
+  dark: true
+});
+/// The highlighting style for code in the One Dark theme.
+const orCodeHighlightStyle = HighlightStyle.define([{
+  tag: tags.keyword,
+  color: violet
+}, {
+  tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+  color: coral
+}, {
+  tag: [tags.function(tags.variableName), tags.labelName],
+  color: malibu
+}, {
+  tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)],
+  color: whiskey
+}, {
+  tag: [tags.definition(tags.name), tags.separator],
+  color: ivory
+}, {
+  tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
+  color: chalky
+}, {
+  tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, tags.special(tags.string)],
+  color: cyan
+}, {
+  tag: [tags.meta, tags.comment],
+  color: stone
+}, {
+  tag: tags.strong,
+  fontWeight: 'bold'
+}, {
+  tag: tags.emphasis,
+  fontStyle: 'italic'
+}, {
+  tag: tags.strikethrough,
+  textDecoration: 'line-through'
+}, {
+  tag: tags.link,
+  color: stone,
+  textDecoration: 'underline'
+}, {
+  tag: tags.heading,
+  fontWeight: 'bold',
+  color: coral
+}, {
+  tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
+  color: whiskey
+}, {
+  tag: [tags.processingInstruction, tags.string, tags.inserted],
+  color: sage
+}, {
+  tag: tags.invalid,
+  color: invalid
+}]);
+/// Extension to enable the One Dark theme (both the editor theme and
+/// the highlight style).
+const theme = [orCodeTheme, syntaxHighlighting(orCodeHighlightStyle)];
+
 //partially based on https://github.com/logue/vue-codemirror6/blob/master/src/components/CodeMirror.vue
 var script = defineComponent({
   name: 'OrCode',
@@ -131,11 +300,12 @@ var script = defineComponent({
   setup(props, {
     emit
   }) {
+    // editor config
     const root = ref();
     const target = ref();
     const fullscreenTarget = ref();
     const isHovered = useElementHover(root);
-    const editor = new EditorView({
+    const editor = new EditorView$1({
       state: EditorState.create({
         doc: props.modelValue
       }),
@@ -172,21 +342,19 @@ var script = defineComponent({
         allowPaste,
         lineWrapping
       } = this;
-      const ext = _.compact([
-      // Toggle light/dark mode
-      EditorView.baseTheme({}),
+      const ext = _.compact([theme, EditorView$1.baseTheme({}),
       // locale settings
       this.phrases ? EditorState.phrases.of(this.phrases) : undefined,
       // Parser language setting
       this.localLanguage,
       // Editable option
-      EditorView.editable.of(!this.isReadonly),
+      EditorView$1.editable.of(!this.isReadonly),
       // Focus and blur listener
-      EditorView.updateListener.of(viewUpdate => {
+      EditorView$1.updateListener.of(viewUpdate => {
         if (viewUpdate.focusChanged) {
           viewUpdate.view.hasFocus ? this.$emit('focus') : this.$emit('blur', viewUpdate.state.doc.toString());
         }
-      }), EditorView.domEventHandlers({
+      }), EditorView$1.domEventHandlers({
         drop(event) {
           if (!allowDrop) {
             event.preventDefault();
@@ -201,10 +369,8 @@ var script = defineComponent({
         }
       }),
       // line wrapping
-      lineWrapping ? EditorView.lineWrapping : undefined, keymap.of([indentWithTab])]);
-      // Append Extensions (such as basic-setup)
-      if (this.extensions.length !== 0) _.merge(ext, this.extensions);
-      return ext;
+      lineWrapping ? EditorView$1.lineWrapping : undefined, keymap.of([indentWithTab]), ...this.extensions]);
+      return [...ext];
     },
     isShowingError() {
       return !!this.error && this.isInvalid;
@@ -302,7 +468,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, () => [_ctx.isShowingFullscreen ? (openBlock(), createBlock(_component_or_icon_button, {
     key: 0,
     icon: "fullscreen",
-    "icon-color": "neutral-3",
+    "icon-color": "neutral-4",
     class: "fullscreen-button",
     onClick: _cache[0] || (_cache[0] = $event => _ctx.toggleFullscreen(true))
   })) : createCommentVNode("v-if", true)])], 2 /* CLASS */)])) : createCommentVNode("v-if", true), createElementVNode("div", {

package/dist/esm/v3/{OrModal-17c3a1cb.js → OrModal-f9f2279b.js}

@@ -14,7 +14,7 @@ const ModalRoot = [
 // Layout
 'layout-column',
 // Box
-'w-full', 'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
+'w-full', 'h-full',
 // Shape
 'md:rounded-md',
 // Spacing
@@ -28,13 +28,13 @@ const ModalRoot = [
 const ModalRootSizes = {
   'l': [
   // Box
-  'md:w-[1050px]'],
+  'md:w-[1050px]', 'md:h-auto'],
   'm': [
   // Box
-  'md:w-[700px]'],
+  'md:w-[700px]', 'md:h-auto'],
   's': [
   // Box
-  'md:w-[480px]']
+  'md:w-[480px]', 'md:h-auto']
 };
 const ModalHeader = [
 // Layouot

package/dist/esm/v3/{OrNotification-b90cf406.js → OrNotification-2d77aae4.js}

@@ -104,7 +104,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   })) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
-var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-2a8b1558 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2a8b1558 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-notification[data-v-2a8b1558] {\n  /** TODO: Override when mobile design is ready to guarantee alignment of icons with first text row */\n  --alignment-height: var(--lh-1);\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n  padding: var(--s-4);\n  background-color: var(--c-white);\n  border-radius: 0.25rem;\n  box-shadow: 0 0.0625rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.08);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: background-color;\n}\n.or-notification.is-size-default[data-v-2a8b1558] {\n  max-width: 48rem;\n}\n.or-notification.is-size-inline[data-v-2a8b1558] {\n  max-width: 27.875rem;\n}\n.or-notification a[data-v-2a8b1558] {\n  font-weight: var(--fw-2);\n  color: var(--c-black);\n}\n.or-notification--icon[data-v-2a8b1558] {\n  display: flex;\n  align-items: center;\n  min-height: var(--alignment-height);\n  margin-right: var(--s-4);\n}\n.or-notification--icon[data-v-2a8b1558] .or-icon {\n  font-size: 1rem;\n}\n.or-notification--content[data-v-2a8b1558] {\n  flex: 1 1 100%;\n  word-break: break-word;\n}\n.or-notification--close[data-v-2a8b1558] {\n  display: flex;\n  height: var(--alignment-height);\n  margin-left: 1rem;\n}\n.or-notification--close[data-v-2a8b1558] .or-icon {\n  font-size: 1rem !important;\n}\n.or-notification.is-type-info[data-v-2a8b1558] {\n  background-color: var(--c-primary-lighten-45);\n}\n.or-notification.is-type-info a[data-v-2a8b1558] {\n  color: var(--c-primary);\n}\n.or-notification.is-type-error[data-v-2a8b1558] {\n  background-color: var(--c-error-lighten-45);\n}\n.or-notification.is-type-error a[data-v-2a8b1558] {\n  color: var(--c-error);\n}\n.or-notification.is-type-warning[data-v-2a8b1558] {\n  background-color: var(--c-warning-lighten-45);\n}\n.or-notification.is-type-warning a[data-v-2a8b1558] {\n  color: var(--c-warning);\n}\n.or-notification.is-type-success[data-v-2a8b1558] {\n  background-color: var(--c-success-lighten-45);\n}\n.or-notification.is-type-success a[data-v-2a8b1558] {\n  color: var(--c-success);\n}";
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-2a8b1558 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2a8b1558 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-notification[data-v-2a8b1558] {\n  /** TODO: Override when mobile design is ready to guarantee alignment of icons with first text row */\n  --alignment-height: var(--lh-1);\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n  padding: var(--s-4);\n  background-color: var(--c-white);\n  border-radius: 0.25rem;\n  box-shadow: 0 0.0625rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.08);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: background-color;\n}\n.or-notification.is-size-default[data-v-2a8b1558] {\n  max-width: 48rem;\n}\n.or-notification.is-size-inline[data-v-2a8b1558] {\n  max-width: 27.875rem;\n}\n.or-notification a[data-v-2a8b1558] {\n  font-weight: var(--fw-2);\n  color: var(--c-black);\n}\n.or-notification--icon[data-v-2a8b1558] {\n  display: flex;\n  align-items: center;\n  min-height: var(--alignment-height);\n  margin-right: var(--s-4);\n}\n.or-notification--icon[data-v-2a8b1558] .or-icon {\n  font-size: 1rem;\n}\n.or-notification--content[data-v-2a8b1558] {\n  flex: 1 1 100%;\n  word-break: break-word;\n}\n.or-notification--close[data-v-2a8b1558] {\n  display: flex;\n  height: var(--alignment-height);\n  margin-left: 1rem;\n}\n.or-notification--close[data-v-2a8b1558] .or-icon {\n  font-size: 1rem !important;\n}\n.or-notification.is-type-info[data-v-2a8b1558] {\n  background-color: var(--c-primary-lighten-45);\n}\n.or-notification.is-type-info a[data-v-2a8b1558] {\n  color: var(--c-primary);\n}\n.or-notification.is-type-error[data-v-2a8b1558] {\n  background-color: var(--c-error-lighten-45);\n}\n.or-notification.is-type-error a[data-v-2a8b1558] {\n  color: var(--c-error);\n}\n.or-notification.is-type-warning[data-v-2a8b1558] {\n  background-color: var(--c-warning-lighten-45);\n}\n.or-notification.is-type-warning a[data-v-2a8b1558] {\n  color: var(--c-warning);\n}\n.or-notification.is-type-success[data-v-2a8b1558] {\n  background-color: var(--c-success-lighten-45);\n}\n.or-notification.is-type-success a[data-v-2a8b1558] {\n  color: var(--c-success);\n}\n[data-theme=dark] .or-notification .or-icon[data-v-2a8b1558] {\n  color: var(--c-neutral-1);\n}\n[data-theme=dark] .or-notification.is-type-info[data-v-2a8b1558] {\n  background-color: var(--c-primary-darken-45);\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-info a[data-v-2a8b1558] {\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-error[data-v-2a8b1558] {\n  background-color: var(--c-error-darken-45);\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-error a[data-v-2a8b1558] {\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-warning[data-v-2a8b1558] {\n  background-color: var(--c-warning-darken-45);\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-warning a[data-v-2a8b1558] {\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-success[data-v-2a8b1558] {\n  background-color: var(--c-success-darken-45);\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-success a[data-v-2a8b1558] {\n  color: var(--c-neutral-6);\n}";
 styleInject(css_248z);
 
 script.render = render;

package/dist/esm/v3/{OrSkeletonText-2b1610ce.js → OrSkeletonText-0546754d.js}

@@ -45,7 +45,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 6 /* CLASS, STYLE */);
 }
 
-var css_248z$2 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-374502f0 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-374502f0] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-374502f0]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-374502f0 1.5s linear 0.5s infinite;\n}\n.or-skeleton-circle[data-v-374502f0] {\n  border-radius: 9999px !important;\n}";
+var css_248z$2 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-374502f0 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-374502f0] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-374502f0]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-374502f0 1.5s linear 0.5s infinite;\n}\n[data-theme=dark] .or-skeleton[data-v-374502f0] {\n  background: var(--c-neutral-3);\n}\n[data-theme=dark] .or-skeleton.is-animated[data-v-374502f0]::before {\n  background: linear-gradient(90.14deg, var(--c-neutral-3) 0.1%, var(--c-neutral-2) 49.98%, var(--c-neutral-3) 99.06%);\n}\n.or-skeleton-circle[data-v-374502f0] {\n  border-radius: 9999px !important;\n}";
 styleInject(css_248z$2);
 
 script$2.render = render$2;
@@ -96,7 +96,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 6 /* CLASS, STYLE */);
 }
 
-var css_248z$1 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-043cb99c {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-043cb99c] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-043cb99c]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-043cb99c 1.5s linear 0.5s infinite;\n}\n.or-skeleton-rect[data-v-043cb99c] {\n  border-radius: var(--s-2);\n}";
+var css_248z$1 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-043cb99c {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-043cb99c] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-043cb99c]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-043cb99c 1.5s linear 0.5s infinite;\n}\n[data-theme=dark] .or-skeleton[data-v-043cb99c] {\n  background: var(--c-neutral-3);\n}\n[data-theme=dark] .or-skeleton.is-animated[data-v-043cb99c]::before {\n  background: linear-gradient(90.14deg, var(--c-neutral-3) 0.1%, var(--c-neutral-2) 49.98%, var(--c-neutral-3) 99.06%);\n}\n.or-skeleton-rect[data-v-043cb99c] {\n  border-radius: var(--s-2);\n}";
 styleInject(css_248z$1);
 
 script$1.render = render$1;
@@ -170,7 +170,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }), 128 /* KEYED_FRAGMENT */))], 4 /* STYLE */);
 }
 
-var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-10564f36 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-10564f36] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-10564f36]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-10564f36 1.5s linear 0.5s infinite;\n}\n.or-skeleton-text-root[data-v-10564f36] {\n  height: auto;\n  display: flex;\n  flex-direction: column;\n}\n.or-skeleton-text-root .or-skeleton-text[data-v-10564f36] {\n  border-radius: var(--s-2);\n  width: 100%;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-1[data-v-10564f36] {\n  height: 1.5rem;\n  margin: 0.145rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-2[data-v-10564f36] {\n  height: 1.25rem;\n  margin: 0.03125rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-3[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-1[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-2[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.21875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-button[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.1875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-caption[data-v-10564f36] {\n  height: 0.75rem;\n  margin: 0.1875rem 0;\n}";
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-10564f36 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-10564f36] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-10564f36]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-10564f36 1.5s linear 0.5s infinite;\n}\n[data-theme=dark] .or-skeleton[data-v-10564f36] {\n  background: var(--c-neutral-3);\n}\n[data-theme=dark] .or-skeleton.is-animated[data-v-10564f36]::before {\n  background: linear-gradient(90.14deg, var(--c-neutral-3) 0.1%, var(--c-neutral-2) 49.98%, var(--c-neutral-3) 99.06%);\n}\n.or-skeleton-text-root[data-v-10564f36] {\n  height: auto;\n  display: flex;\n  flex-direction: column;\n}\n.or-skeleton-text-root .or-skeleton-text[data-v-10564f36] {\n  border-radius: var(--s-2);\n  width: 100%;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-1[data-v-10564f36] {\n  height: 1.5rem;\n  margin: 0.145rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-2[data-v-10564f36] {\n  height: 1.25rem;\n  margin: 0.03125rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-3[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-1[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-2[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.21875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-button[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.1875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-caption[data-v-10564f36] {\n  height: 0.75rem;\n  margin: 0.1875rem 0;\n}";
 styleInject(css_248z);
 
 script.render = render;

package/dist/esm/v3/components/index.js

@@ -12,7 +12,7 @@ export { a as OrCarousel, s as OrCarouselItem } from '../OrCarouselItem-a3a855e8
 export { s as OrCheckbox } from '../OrCheckbox-8d8887ea.js';
 export { s as OrCheckboxV3 } from '../OrCheckbox-a8388252.js';
 export { s as OrChip, a as OrChips } from '../OrChips-d6227d21.js';
-export { s as OrCode, O as OrCodeLanguages } from '../OrCode-033d49f4.js';
+export { s as OrCode, O as OrCodeLanguages } from '../OrCode-fe49ca8e.js';
 export { s as OrCollapse } from '../OrCollapse-37a52e8f.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-9a149e6b.js';
 export { s as OrConfirm } from '../OrConfirm-45796889.js';
@@ -48,8 +48,8 @@ export { s as OrMenuItemV3 } from '../OrMenuItem-de91aded.js';
 export { s as OrMenuV3 } from '../OrMenu-b4e8136c.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-35ee1b1e.js';
 export { s as OrModal, O as OrModalSizes } from '../OrModal-153310f7.js';
-export { M as ModalSize, s as OrModalV3 } from '../OrModal-17c3a1cb.js';
-export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../OrNotification-b90cf406.js';
+export { M as ModalSize, s as OrModalV3 } from '../OrModal-f9f2279b.js';
+export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../OrNotification-2d77aae4.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from '../OrNotification-aab2e22a.js';
 export { s as OrNumberInput } from '../OrNumberInput-dca5e850.js';
 export { s as OrOverflowMenu } from '../OrOverflowMenu-775d380c.js';
@@ -70,7 +70,7 @@ export { s as OrSelectV3 } from '../OrSelect-96bf9b63.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from '../OrSidebar-64703ef6.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-506fc73c.js';
-export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-2b1610ce.js';
+export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-0546754d.js';
 export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-afd3d007.js';
 export { s as OrSlider } from '../OrSlider-858576e2.js';
 export { s as OrSortHeaderV3 } from '../OrSortHeader-f66dcb37.js';
@@ -113,6 +113,8 @@ import '@codemirror/lang-css';
 import '@codemirror/lang-json';
 import '@codemirror/lang-javascript';
 import '@codemirror/lang-markdown';
+import '@codemirror/language';
+import '@lezer/highlight';
 import '../px-to-rem-0b26b83e.js';
 import '../dom-7a41831b.js';
 import '@vueuse/math';

package/dist/esm/v3/components/or-code/index.js

@@ -1,9 +1,9 @@
-export { s as OrCode, O as OrCodeLanguages } from '../../OrCode-033d49f4.js';
+export { s as OrCode, O as OrCodeLanguages } from '../../OrCode-fe49ca8e.js';
 import '@codemirror/state';
 import '@codemirror/view';
 import '@codemirror/commands';
-import '@vueuse/core';
 import 'codemirror';
+import '@vueuse/core';
 import 'lodash';
 import 'vue-demi';
 import '../../OrIconButton-b668558a.js';
@@ -28,3 +28,5 @@ import '@codemirror/lang-css';
 import '@codemirror/lang-json';
 import '@codemirror/lang-javascript';
 import '@codemirror/lang-markdown';
+import '@codemirror/language';
+import '@lezer/highlight';

package/dist/esm/v3/components/or-code/theme.d.ts

@@ -0,0 +1,24 @@
+import { Extension } from '@codemirror/state';
+import { HighlightStyle } from '@codemirror/language';
+export declare const color: {
+    chalky: string;
+    coral: string;
+    cyan: string;
+    invalid: string;
+    ivory: string;
+    stone: string;
+    malibu: string;
+    sage: string;
+    whiskey: string;
+    violet: string;
+    darkBackground: string;
+    highlightBackground: string;
+    background: string;
+    tooltipBackground: string;
+    selection: string;
+    cursor: string;
+};
+export declare const orCodeTheme: Extension;
+export declare const orCodeHighlightStyle: HighlightStyle;
+declare const theme: Extension;
+export default theme;

package/dist/esm/v3/components/or-modal-v3/index.js

@@ -1,4 +1,4 @@
-export { M as ModalSize, s as OrModalV3 } from '../../OrModal-17c3a1cb.js';
+export { M as ModalSize, s as OrModalV3 } from '../../OrModal-f9f2279b.js';
 import 'vue-demi';
 import '../../OrIconButton-385e997c.js';
 import '../../OrIcon-ea40e58c.js';

package/dist/esm/v3/components/or-notification/index.js

@@ -1,4 +1,4 @@
-export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../../OrNotification-b90cf406.js';
+export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../../OrNotification-2d77aae4.js';
 import 'vue-demi';
 import '../../OrIcon-ed3e10b4.js';
 import 'lodash';

package/dist/esm/v3/components/or-skeleton/index.js

@@ -1,4 +1,4 @@
-export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../../OrSkeletonText-2b1610ce.js';
+export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../../OrSkeletonText-0546754d.js';
 import 'vue-demi';
 import '../../px-to-rem-0b26b83e.js';
 import 'lodash';

package/dist/esm/v3/index.js

@@ -12,7 +12,7 @@ export { a as OrCarousel, s as OrCarouselItem } from './OrCarouselItem-a3a855e8.
 export { s as OrCheckbox } from './OrCheckbox-8d8887ea.js';
 export { s as OrCheckboxV3 } from './OrCheckbox-a8388252.js';
 export { s as OrChip, a as OrChips } from './OrChips-d6227d21.js';
-export { s as OrCode, O as OrCodeLanguages } from './OrCode-033d49f4.js';
+export { s as OrCode, O as OrCodeLanguages } from './OrCode-fe49ca8e.js';
 export { s as OrCollapse } from './OrCollapse-37a52e8f.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-9a149e6b.js';
 export { s as OrConfirm } from './OrConfirm-45796889.js';
@@ -48,8 +48,8 @@ export { s as OrMenuItemV3 } from './OrMenuItem-de91aded.js';
 export { s as OrMenuV3 } from './OrMenu-b4e8136c.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-35ee1b1e.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-153310f7.js';
-export { M as ModalSize, s as OrModalV3 } from './OrModal-17c3a1cb.js';
-export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-b90cf406.js';
+export { M as ModalSize, s as OrModalV3 } from './OrModal-f9f2279b.js';
+export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-2d77aae4.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-aab2e22a.js';
 export { s as OrNumberInput } from './OrNumberInput-dca5e850.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-775d380c.js';
@@ -70,7 +70,7 @@ export { s as OrSelectV3 } from './OrSelect-96bf9b63.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from './OrSidebar-64703ef6.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-506fc73c.js';
-export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
+export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-0546754d.js';
 export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from './OrSkeletonText-afd3d007.js';
 export { s as OrSlider } from './OrSlider-858576e2.js';
 export { s as OrSortHeaderV3 } from './OrSortHeader-f66dcb37.js';
@@ -119,6 +119,8 @@ import '@codemirror/lang-css';
 import '@codemirror/lang-json';
 import '@codemirror/lang-javascript';
 import '@codemirror/lang-markdown';
+import '@codemirror/language';
+import '@lezer/highlight';
 import './px-to-rem-0b26b83e.js';
 import './dom-7a41831b.js';
 import '@vueuse/math';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.74.16-beta.2375.0",
+  "version": "2.75.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.35.2",
+    "@onereach/styles": "^2.36.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
@@ -124,5 +124,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "dc6ec1f1e93966eafc70213852eddc7aa4697608"
 }

package/src/components/or-code/OrCode.vue

@@ -24,7 +24,7 @@
           <or-icon-button
             v-if="isShowingFullscreen"
             icon="fullscreen"
-            icon-color="neutral-3"
+            icon-color="neutral-4"
             class="fullscreen-button"
             @click="toggleFullscreen(true)"
           />
@@ -85,8 +85,8 @@ import { Language, LanguageSupport } from '@codemirror/language';
 import { EditorState, Extension, Transaction } from '@codemirror/state';
 import { ViewUpdate, keymap } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
-import { useElementHover } from '@vueuse/core';
 import { basicSetup, EditorView } from 'codemirror';
+import { useElementHover } from '@vueuse/core';
 import _ from 'lodash';
 import { defineComponent, PropType, ref, Ref } from 'vue-demi';
 import { OrIconButton } from '../or-button-v2';
@@ -97,6 +97,7 @@ import { OrModal } from '../or-modal';
 import { OrTeleport } from '../or-teleport';
 import { OrCodeLanguages } from './constants';
 import languages from './lang';
+import orCodeTheme from './theme';
 
 //partially based on https://github.com/logue/vue-codemirror6/blob/master/src/components/CodeMirror.vue
 
@@ -185,6 +186,7 @@ export default defineComponent({
   emits: ['update:modelValue', 'focus', 'blur'],
 
   setup(props, { emit }) {
+    // editor config
     const root = ref<HTMLDivElement>();
     const target = ref<HTMLDivElement>();
     const fullscreenTarget = ref<HTMLDivElement>();
@@ -225,8 +227,9 @@ export default defineComponent({
     },
     localExtensions(): Extension[] {
       const { allowDrop, allowPaste, lineWrapping } = this;
+
       const ext = _.compact([
-        // Toggle light/dark mode
+        orCodeTheme,
         EditorView.baseTheme({}),
         // locale settings
         this.phrases ? EditorState.phrases.of(this.phrases) : undefined,
@@ -259,11 +262,10 @@ export default defineComponent({
         // line wrapping
         lineWrapping ? EditorView.lineWrapping : undefined,
         keymap.of([indentWithTab]),
+        ...this.extensions,
       ]) as Extension[];
 
-      // Append Extensions (such as basic-setup)
-      if (this.extensions.length !== 0) _.merge(ext, this.extensions);
-      return ext;
+      return [...ext];
     },
     isShowingError(): boolean {
       return !!this.error && this.isInvalid;