@onereach/ui-components 2.70.0-beta.2185.0 → 2.70.0-beta.2206.0

package/dist/bundled/v2/OrModal-cc607462.js

@@ -1,169 +0,0 @@
-import { defineComponent, ref, computed, watch } from 'vue-demi';
-import __vue_component__$1 from './components/OrOverlayV3/OrOverlayV3.js';
-import { _ as __vue_component__$2 } from './OrIconButton-69a3f0e3.js';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-var ModalSize;
-(function (ModalSize) {
-  ModalSize["L"] = "l";
-  ModalSize["M"] = "m";
-  ModalSize["S"] = "s";
-})(ModalSize || (ModalSize = {}));
-
-const ModalRoot = [
-// Layout
-'layout-column',
-// Box
-'w-full', 'h-full',
-// Shape
-'md:rounded-md',
-// Spacing
-'px-lg', 'py-lg', 'gap-md md:gap-lg',
-// Typography
-'typography-body-2-regular',
-// Theme
-'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark',
-// Elevation
-'shadow-modal', 'dark:shadow-modal-dark'];
-const ModalRootSizes = {
-  'l': [
-  // Box
-  'md:w-[1050px]', 'md:h-auto'],
-  'm': [
-  // Box
-  'md:w-[700px]', 'md:h-auto'],
-  's': [
-  // Box
-  'md:w-[480px]', 'md:h-auto']
-};
-const ModalHeader = [
-// Layouot
-'layout-row',
-// Typography
-'typography-headline-2'];
-const ModalCloseButton = [
-// Layout
-'contents',
-// Theme
-'text-outline', 'dark:text-outline-dark'];
-
-var script = defineComponent({
-  name: 'OrModal',
-  components: {
-    OrOverlay: __vue_component__$1,
-    OrIconButton: __vue_component__$2
-  },
-  inheritAttrs: false,
-  props: {
-    size: {
-      type: String,
-      default: ModalSize.M
-    },
-    isOpen: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['open', 'close'],
-  expose: ['root', 'isActive', 'open', 'close'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-modal', ...ModalRoot, ...ModalRootSizes[props.size], classAttribute.value]);
-    const headerStyles = computed(() => [...ModalHeader]);
-    const closeButtonStyles = computed(() => [...ModalCloseButton]);
-    // State
-    const isActive = ref(false);
-    // Events
-    watch(isActive, value => {
-      context.emit(value ? 'open' : 'close');
-    });
-    watch(() => props.isOpen, newIsOpen => {
-      if (newIsOpen) {
-        open();
-      } else {
-        close();
-      }
-    }, {
-      immediate: true
-    });
-    // Methods
-    function open() {
-      isActive.value = true;
-    }
-    function close() {
-      isActive.value = false;
-    }
-    return {
-      root,
-      rootStyles,
-      headerStyles,
-      closeButtonStyles,
-      isActive,
-      open,
-      close
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.isActive ? _c('OrOverlay', {
-    attrs: {
-      "fullscreen": true
-    }
-  }, [_c('div', _vm._b({
-    ref: "root",
-    class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), [_c('div', {
-    class: _vm.headerStyles
-  }, [_c('div', {
-    class: ['grow']
-  }, [_vm._t("header")], 2), _vm._v(" "), _c('div', {
-    class: _vm.closeButtonStyles
-  }, [_c('OrIconButton', {
-    attrs: {
-      "icon": 'close',
-      "size": 'l'
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.close.apply(null, arguments);
-      }
-    }
-  })], 1)]), _vm._v(" "), _c('div', {
-    class: ['grow', 'overflow-y-auto']
-  }, [_vm._t("default")], 2), _vm._v(" "), _vm._t("footer")], 2)]) : _vm._e();
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { ModalSize as M, __vue_component__ as _ };

package/dist/bundled/v2/OrNotification-648598db.js

@@ -1,173 +0,0 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrIcon-7e3098b7.js';
-import { _ as __vue_component__$2 } from './OrIconButton-69a3f0e3.js';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-var NotificationVariant;
-(function (NotificationVariant) {
-  NotificationVariant["Success"] = "success";
-  NotificationVariant["Warning"] = "warning";
-  NotificationVariant["Error"] = "error";
-  NotificationVariant["Info"] = "info";
-})(NotificationVariant || (NotificationVariant = {}));
-
-const NotificationRoot = [
-// Layout
-'layout-row !items-start',
-// Shape
-'rounded-md',
-// Spacing
-'px-md', 'py-md', 'gap-md',
-// Typography
-'typography-body-2-regular',
-// Typography (links)
-'links:typography-body-2-bold',
-// Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark',
-// Elevation
-'shadow-contextual', 'dark:shadow-contextual-dark'];
-const NotificationRootVariants = {
-  'success': [
-  // Theme
-  'theme-background-success-container', 'dark:theme-background-success-container-dark',
-  // Theme (links)
-  'links:theme-foreground-success', 'dark:links:theme-foreground-success-dark'],
-  'warning': [
-  // Theme
-  'theme-background-warning-container', 'dark:theme-background-warning-container-dark',
-  // Theme (links)
-  'links:theme-foreground-warning', 'dark:links:theme-foreground-warning-dark'],
-  'error': [
-  // Theme
-  'theme-background-error-container', 'dark:theme-background-error-container-dark',
-  // Theme (links)
-  'links:theme-foreground-error', 'dark:links:theme-foreground-error-dark'],
-  'info': [
-  // Theme
-  'theme-background-primary-container', 'dark:theme-background-primary-container-dark',
-  // Theme (links)
-  'links:theme-foreground-primary', 'dark:links:theme-foreground-primary-dark']
-};
-const NotificationIcon = [];
-const NotificationIconVariants = {
-  'success': [
-  // Theme
-  'theme-foreground-success', 'dark:theme-foreground-success-dark'],
-  'warning': [
-  // Theme
-  'theme-foreground-warning', 'dark:theme-foreground-warning-dark'],
-  'error': [
-  // Theme
-  'theme-foreground-error', 'dark:theme-foreground-error-dark'],
-  'info': [
-  // Theme
-  'theme-foreground-primary', 'dark:theme-foreground-primary-dark']
-};
-const NotificationAction = [
-// Layout
-'contents',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-
-var script = defineComponent({
-  name: 'OrNotification',
-  components: {
-    OrIcon: __vue_component__$1,
-    OrIconButton: __vue_component__$2
-  },
-  inheritAttrs: false,
-  props: {
-    variant: {
-      type: String,
-      default: NotificationVariant.Info
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-notification', ...NotificationRoot, ...NotificationRootVariants[props.variant], classAttribute.value]);
-    const iconStyles = computed(() => [...NotificationIcon, ...NotificationIconVariants[props.variant]]);
-    const actionStyles = computed(() => [...NotificationAction]);
-    // State
-    const icon = computed(() => {
-      switch (props.variant) {
-        case 'success':
-          return 'check_circle';
-        case 'warning':
-          return 'warning';
-        case 'error':
-          return 'error';
-        case 'info':
-          return 'info';
-      }
-    });
-    return {
-      root,
-      rootStyles,
-      iconStyles,
-      actionStyles,
-      icon
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', _vm._b({
-    ref: "root",
-    class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), [_c('div', {
-    class: _vm.iconStyles
-  }, [_c('OrIcon', {
-    attrs: {
-      "icon": _vm.icon,
-      "variant": 'filled-bold'
-    }
-  })], 1), _vm._v(" "), _c('div', {
-    class: ['grow', 'my-[-2px] md:my-[-3px]']
-  }, [_vm._t("default")], 2), _vm._v(" "), _c('div', {
-    class: _vm.actionStyles
-  }, [_c('OrIconButton', {
-    attrs: {
-      "icon": 'close'
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.$emit('close');
-      }
-    }
-  })], 1)]);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { NotificationVariant as N, __vue_component__ as _ };

package/dist/bundled/v2/OrNotification-9b05b5b8.js

@@ -1,143 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrIcon-d69f7e66.js';
-import __vue_component__$2 from './components/OrIconButtonV2/OrIconButtonV2.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { c as createInjector } from './browser-82dea9ed.js';
-
-var OR_NOTIFICATION_TYPE;
-(function (OR_NOTIFICATION_TYPE) {
-  OR_NOTIFICATION_TYPE["INFO"] = "info";
-  OR_NOTIFICATION_TYPE["ERROR"] = "error";
-  OR_NOTIFICATION_TYPE["WARNING"] = "warning";
-  OR_NOTIFICATION_TYPE["SUCCESS"] = "success";
-})(OR_NOTIFICATION_TYPE || (OR_NOTIFICATION_TYPE = {}));
-var OR_NOTIFICATION_SIZE;
-(function (OR_NOTIFICATION_SIZE) {
-  OR_NOTIFICATION_SIZE["DEFAULT"] = "default";
-  OR_NOTIFICATION_SIZE["INLINE"] = "inline";
-})(OR_NOTIFICATION_SIZE || (OR_NOTIFICATION_SIZE = {}));
-
-/** HTML links are styled by default to match notification type */
-var script = defineComponent({
-  name: 'OrNotification',
-  components: {
-    OrIcon: __vue_component__$1,
-    OrIconButton: __vue_component__$2
-  },
-  props: {
-    /** A simple text content can be provided as a prop */
-    content: {
-      type: String,
-      default: ''
-    },
-    /** Icon can be overridden with prop or slot regardless of notification type */
-    icon: {
-      type: String,
-      default: ''
-    },
-    /** Type can be a blank value, for black and white notification */
-    type: {
-      type: String,
-      default: OR_NOTIFICATION_TYPE.INFO
-    },
-    size: {
-      type: String,
-      default: OR_NOTIFICATION_SIZE.DEFAULT
-    },
-    canDelete: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['close'],
-  computed: {
-    states() {
-      /* This type has no styles but is present on the element for user customization */
-      const BLANK_TYPE = 'blank';
-      return [`is-type-${this.type || BLANK_TYPE}`, `is-size-${this.size}`];
-    },
-    iconByType() {
-      const DEFAULT_ICON = 'info';
-      const TYPE_TO_ICON_MAP = {
-        [OR_NOTIFICATION_TYPE.INFO]: 'info',
-        [OR_NOTIFICATION_TYPE.ERROR]: 'error',
-        [OR_NOTIFICATION_TYPE.WARNING]: 'warning',
-        [OR_NOTIFICATION_TYPE.SUCCESS]: 'check_circle'
-      };
-      return this.icon || TYPE_TO_ICON_MAP[this.type] || DEFAULT_ICON;
-    },
-    iconColorByType() {
-      const DEFAULT_COLOR = 'black';
-      const COLOR_TO_ICON_MAP = {
-        [OR_NOTIFICATION_TYPE.INFO]: 'primary',
-        [OR_NOTIFICATION_TYPE.ERROR]: 'error',
-        [OR_NOTIFICATION_TYPE.WARNING]: 'warning',
-        [OR_NOTIFICATION_TYPE.SUCCESS]: 'success'
-      };
-      return COLOR_TO_ICON_MAP[this.type] || DEFAULT_COLOR;
-    }
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    staticClass: "or-notification",
-    class: _vm.states
-  }, [_c('div', {
-    staticClass: "or-notification--icon"
-  }, [_vm._t("icon", function () {
-    return [_c('or-icon', {
-      attrs: {
-        "icon": _vm.iconByType,
-        "color": _vm.iconColorByType
-      }
-    })];
-  })], 2), _vm._v(" "), _c('div', {
-    staticClass: "or-notification--content"
-  }, [_vm._t("default"), _vm._v(" "), !_vm.$slots.default ? [_vm._v("\n      " + _vm._s(_vm.content) + "\n    ")] : _vm._e()], 2), _vm._v(" "), _vm.canDelete ? _c('or-icon-button', {
-    staticClass: "or-notification--close",
-    attrs: {
-      "icon": "close",
-      "icon-color": "neutral-6"
-    },
-    on: {
-      "click": function ($event) {
-        return _vm.$emit('close');
-      }
-    }
-  }) : _vm._e()], 1);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = function (inject) {
-  if (!inject) return;
-  inject("data-v-7bc0e6b5_0", {
-    source: "@keyframes spinAround-data-v-7bc0e6b5{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-7bc0e6b5{from{opacity:1}to{opacity:0}}.or-notification[data-v-7bc0e6b5]{--alignment-height:var(--lh-1);display:flex;align-items:flex-start;width:100%;padding:var(--s-4);background-color:var(--c-white);border-radius:.25rem;box-shadow:0 .0625rem .25rem .0625rem rgba(0,0,0,.08);transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:background-color}.or-notification.is-size-default[data-v-7bc0e6b5]{max-width:48rem}.or-notification.is-size-inline[data-v-7bc0e6b5]{max-width:27.875rem}.or-notification a[data-v-7bc0e6b5]{font-weight:var(--fw-2);color:var(--c-black)}.or-notification--icon[data-v-7bc0e6b5]{display:flex;align-items:center;min-height:var(--alignment-height);margin-right:var(--s-4)}.or-notification--icon[data-v-7bc0e6b5]  .or-icon{font-size:1rem}.or-notification--content[data-v-7bc0e6b5]{flex:1 1 100%;word-break:break-word}.or-notification--close[data-v-7bc0e6b5]{display:flex;height:var(--alignment-height);margin-left:1rem}.or-notification--close[data-v-7bc0e6b5]  .or-icon{font-size:1rem!important}.or-notification.is-type-info[data-v-7bc0e6b5]{background-color:var(--c-primary-lighten-45)}.or-notification.is-type-info a[data-v-7bc0e6b5]{color:var(--c-primary)}.or-notification.is-type-error[data-v-7bc0e6b5]{background-color:var(--c-error-lighten-45)}.or-notification.is-type-error a[data-v-7bc0e6b5]{color:var(--c-error)}.or-notification.is-type-warning[data-v-7bc0e6b5]{background-color:var(--c-warning-lighten-45)}.or-notification.is-type-warning a[data-v-7bc0e6b5]{color:var(--c-warning)}.or-notification.is-type-success[data-v-7bc0e6b5]{background-color:var(--c-success-lighten-45)}.or-notification.is-type-success a[data-v-7bc0e6b5]{color:var(--c-success)}",
-    map: undefined,
-    media: undefined
-  });
-};
-/* scoped */
-const __vue_scope_id__ = "data-v-7bc0e6b5";
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
-
-export { OR_NOTIFICATION_TYPE as O, __vue_component__ as _, OR_NOTIFICATION_SIZE as a };