@onereach/ui-components-vue2 19.4.0-beta.5067.0 → 19.4.1

package/dist/bundled/components/OrDrawerV3/OrDrawer.js

@@ -49,8 +49,14 @@ var script = defineComponent({
       }
     });
     // Effects
-    onClickOutside(root, () => {
-      close();
+    onClickOutside(root, event => {
+      const path = event.composedPath();
+      const ignoreClasses = ['or-popover-v3', 'or-bottom-sheet-v3', 'or-modal-v3'];
+      if (!path.some(({
+        classList
+      }) => ignoreClasses.some(ignoreClass => classList === null || classList === void 0 ? void 0 : classList.contains(ignoreClass)))) {
+        close();
+      }
     });
     useSwipe(root, {
       onSwipeEnd: (event, direction) => {

package/dist/bundled/components/OrNotificationV3/OrNotification.js

@@ -1,15 +1,14 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { NotificationVariant, VariantToIconName } from './props.js';
-import { Notification, NotificationVariants } from './styles.js';
-import __vue_component__$1 from '../OrIndicatorV3/OrIndicator.js';
+import { NotificationVariant } from './props.js';
+import { Notification, NotificationVariants, NotificationIcon, NotificationIconVariants } from './styles.js';
+import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import __vue_component__$2 from '../OrIconButtonV3/OrIconButton.js';
-import { IndicatorColor } from '../OrIndicatorV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 
 var script = defineComponent({
   name: 'OrNotification',
   components: {
-    OrIndicator: __vue_component__$1,
+    OrIcon: __vue_component__$1,
     OrIconButton: __vue_component__$2
   },
   props: {
@@ -28,26 +27,26 @@ var script = defineComponent({
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-notification-v3', ...Notification, ...NotificationVariants[props.variant]]);
-    const indicatorProps = computed(() => {
-      const VariantToIndicatorColor = {
-        [NotificationVariant.Success]: IndicatorColor.Success,
-        [NotificationVariant.Warning]: IndicatorColor.Warning,
-        [NotificationVariant.Error]: IndicatorColor.Error,
-        [NotificationVariant.Info]: IndicatorColor.Neutral
-      };
-      return {
-        icon: {
-          icon: VariantToIconName[props.variant],
-          variant: 'filled-bold'
-        },
-        color: VariantToIndicatorColor[props.variant],
-        size: 'm'
-      };
+    const iconStyles = computed(() => [...NotificationIcon, ...NotificationIconVariants[props.variant]]);
+    // State
+    // eslint-disable-next-line vue/return-in-computed-property
+    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,
-      indicatorProps
+      iconStyles,
+      icon
     };
   }
 });
@@ -65,7 +64,13 @@ var __vue_render__ = function () {
     class: _vm.rootStyles
   }, [_c('div', {
     class: ['mt-[2px] md:mt-[2.5px]']
-  }, [_c('OrIndicator', _vm._b({}, 'OrIndicator', _vm.indicatorProps, false))], 1), _vm._v(" "), _c('div', {
+  }, [_c('OrIcon', {
+    class: _vm.iconStyles,
+    attrs: {
+      "icon": _vm.icon,
+      "variant": 'filled-bold'
+    }
+  })], 1), _vm._v(" "), _c('div', {
     class: ['grow']
   }, [_vm._t("default")], 2), _vm._v(" "), _c('div', {
     class: ['mt-[2px] md:mt-[2.5px]']

package/dist/bundled/components/OrNotificationV3/index.js

@@ -1,2 +1,2 @@
 export { default as OrNotificationV3 } from './OrNotification.js';
-export { NotificationVariant, VariantToIconName } from './props.js';
+export { NotificationVariant } from './props.js';

package/dist/bundled/components/OrNotificationV3/props.d.ts

@@ -4,6 +4,3 @@ export declare enum NotificationVariant {
     Error = "error",
     Info = "info"
 }
-export declare const VariantToIconName: {
-    [key in NotificationVariant]: string;
-};

package/dist/bundled/components/OrNotificationV3/props.js

@@ -5,11 +5,5 @@ var NotificationVariant;
   NotificationVariant["Error"] = "error";
   NotificationVariant["Info"] = "info";
 })(NotificationVariant || (NotificationVariant = {}));
-const VariantToIconName = {
-  [NotificationVariant.Success]: 'check_circle',
-  [NotificationVariant.Warning]: 'warning',
-  [NotificationVariant.Error]: 'error',
-  [NotificationVariant.Info]: 'info'
-};
 
-export { NotificationVariant, VariantToIconName };
+export { NotificationVariant };

package/dist/bundled/components/OrNotificationV3/styles.d.ts

@@ -1,3 +1,5 @@
 import { NotificationVariant } from './props';
 export declare const Notification: string[];
 export declare const NotificationVariants: Record<NotificationVariant, string[]>;
+export declare const NotificationIcon: string[];
+export declare const NotificationIconVariants: Record<NotificationVariant, string[]>;

package/dist/bundled/components/OrNotificationV3/styles.js

@@ -37,5 +37,20 @@ const NotificationVariants = {
   // Theme (children)
   '[&_:any-link]:theme-foreground-primary', 'dark:[&_:any-link]:theme-foreground-primary-dark']
 };
+const NotificationIcon = [];
+const NotificationIconVariants = {
+  [NotificationVariant.Success]: [
+  // Theme
+  'theme-foreground-success', 'dark:theme-foreground-success-dark'],
+  [NotificationVariant.Warning]: [
+  // Theme
+  'theme-foreground-warning', 'dark:theme-foreground-warning-dark'],
+  [NotificationVariant.Error]: [
+  // Theme
+  'theme-foreground-error', 'dark:theme-foreground-error-dark'],
+  [NotificationVariant.Info]: [
+  // Theme
+  'theme-foreground-primary', 'dark:theme-foreground-primary-dark']
+};
 
-export { Notification, NotificationVariants };
+export { Notification, NotificationIcon, NotificationIconVariants, NotificationVariants };

package/dist/bundled/components/OrStatusV3/OrStatus.js

@@ -1,16 +1,11 @@
 import { g as formatTimeAgo } from '../../index-fe4d407a.js';
 import { defineComponent, ref, computed } from 'vue-demi';
 import { StatusVariant, StatusSize } from './props.js';
-import { Status, StatusVariants, StatusSizes, StatusTimestamp } from './styles.js';
-import __vue_component__$1 from '../OrIndicatorV3/OrIndicator.js';
-import { IndicatorColor, IndicatorSize } from '../OrIndicatorV3/props.js';
+import { Status, StatusVariants, StatusSizes, StatusIndicator, StatusIndicatorVariants, StatusTimestamp } from './styles.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 
 var script = defineComponent({
   name: 'OrStatus',
-  components: {
-    OrIndicator: __vue_component__$1
-  },
   props: {
     variant: {
       type: String,
@@ -31,34 +26,12 @@ var script = defineComponent({
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-status-v3', ...Status, ...StatusVariants[props.variant], ...StatusSizes[props.size]]);
+    const indicatorStyles = computed(() => [...StatusIndicator, ...StatusIndicatorVariants[props.variant]]);
     const timestampStyles = computed(() => [...StatusTimestamp]);
-    const indicatorProps = computed(() => {
-      let color;
-      switch (props.variant) {
-        case StatusVariant.Error:
-          color = IndicatorColor.Error;
-          break;
-        case StatusVariant.Success:
-          color = IndicatorColor.Success;
-          break;
-        case StatusVariant.Warning:
-          color = IndicatorColor.Warning;
-          break;
-        case StatusVariant.Disabled:
-          color = IndicatorColor.Outline;
-          break;
-        default:
-          color = IndicatorColor.Neutral;
-      }
-      return {
-        size: IndicatorSize.S,
-        color
-      };
-    });
     return {
       root,
       rootStyles,
-      indicatorProps,
+      indicatorStyles,
       timestampStyles,
       formatTimeAgo
     };
@@ -76,7 +49,9 @@ var __vue_render__ = function () {
   return _c('div', {
     ref: 'root',
     class: _vm.rootStyles
-  }, [_c('OrIndicator', _vm._b({}, 'OrIndicator', _vm.indicatorProps, false)), _vm._v(" "), _c('span', {
+  }, [_c('div', {
+    class: _vm.indicatorStyles
+  }), _vm._v(" "), _c('span', {
     class: ['truncate']
   }, [_vm._t("default")], 2), _vm._v(" "), _vm.timestamp ? [_c('span', {
     class: _vm.timestampStyles

package/dist/bundled/components/OrStatusV3/styles.d.ts

@@ -2,4 +2,6 @@ import { StatusSize, StatusVariant } from './props';
 export declare const Status: string[];
 export declare const StatusVariants: Record<StatusVariant, string[]>;
 export declare const StatusSizes: Record<StatusSize, string[]>;
+export declare const StatusIndicator: string[];
+export declare const StatusIndicatorVariants: Record<StatusVariant, string[]>;
 export declare const StatusTimestamp: string[];

package/dist/bundled/components/OrStatusV3/styles.js

@@ -30,10 +30,34 @@ const StatusSizes = {
   // Typography
   'typography-caption-regular']
 };
+const StatusIndicator = [
+// Layout
+'shrink-0',
+// Box
+'w-[10px] md:w-[8px]', 'h-[10px] md:h-[8px]',
+// Shape
+'rounded-full'];
+const StatusIndicatorVariants = {
+  [StatusVariant.Neutral]: [
+  // Theme
+  'theme-background-primary', 'dark:theme-background-primary-dark'],
+  [StatusVariant.Disabled]: [
+  // Theme
+  'theme-background-current', 'dark:theme-background-current-dark'],
+  [StatusVariant.Success]: [
+  // Theme
+  'theme-background-success-hover', 'dark:theme-background-success-hover-dark'],
+  [StatusVariant.Warning]: [
+  // Theme
+  'theme-background-warning-hover', 'dark:theme-background-warning-hover-dark'],
+  [StatusVariant.Error]: [
+  // Theme
+  'theme-background-error-hover', 'dark:theme-background-error-hover-dark']
+};
 const StatusTimestamp = [
 // Layout
 'shrink-0',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
-export { Status, StatusSizes, StatusTimestamp, StatusVariants };
+export { Status, StatusIndicator, StatusIndicatorVariants, StatusSizes, StatusTimestamp, StatusVariants };

package/dist/bundled/components/index.d.ts

@@ -50,7 +50,6 @@ export * from './or-icon';
 export * from './or-icon-button-v2';
 export * from './or-icon-button-v3';
 export * from './or-icon-v3';
-export * from './or-indicator-v3';
 export * from './or-inline-input-box-v3';
 export * from './or-inline-input-v3';
 export * from './or-inline-text-edit';

package/dist/bundled/components/index.js

@@ -93,8 +93,6 @@ export { default as OrIconButtonV3 } from './OrIconButtonV3/OrIconButton.js';
 export { IconButtonColor } from './OrIconButtonV3/props.js';
 export { default as OrIconV3 } from './OrIconV3/OrIcon.js';
 export { IconSize, IconVariant } from './OrIconV3/props.js';
-export { default as OrIndicatorV3 } from './OrIndicatorV3/OrIndicator.js';
-export { IndicatorColor, IndicatorSize } from './OrIndicatorV3/props.js';
 export { default as OrInlineInputBoxV3 } from './OrInlineInputBoxV3/OrInlineInputBox.js';
 export { InlineInputBoxSize } from './OrInlineInputBoxV3/props.js';
 export { InlineInputType, OrInlineInputV3 } from './OrInlineInputV3/index.js';
@@ -126,7 +124,7 @@ export { ModalSize } from './OrModalV3/props.js';
 export { default as OrNotification } from './OrNotification/OrNotification.js';
 export { OR_NOTIFICATION_SIZE, OR_NOTIFICATION_TYPE } from './OrNotification/constants.js';
 export { default as OrNotificationV3 } from './OrNotificationV3/OrNotification.js';
-export { NotificationVariant, VariantToIconName } from './OrNotificationV3/props.js';
+export { NotificationVariant } from './OrNotificationV3/props.js';
 export { default as OrNumberInput } from './OrNumberInput/OrNumberInput.js';
 export { default as OrOverflowMenu } from './OrOverflowMenu/OrOverflowMenu.js';
 export { default as OrOverlay } from './OrOverlay/OrOverlay.js';

package/dist/bundled/hooks/useTheme.js

@@ -611,24 +611,58 @@ var theme = {
 		white: "var(--or-c-white)",
 		black: "var(--or-c-black)",
 		primary: "var(--or-c-primary-light)",
+		"on-primary": "var(--or-c-on-primary-light)",
+		"on-primary-container": "var(--or-c-on-primary-container-light)",
 		secondary: "var(--or-c-secondary-light)",
+		"on-secondary": "var(--or-c-on-secondary-light)",
+		"on-secondary-container": "var(--or-c-on-secondary-container-light)",
 		tertiary: "var(--or-c-tertiary-light)",
+		"on-tertiary": "var(--or-c-on-tertiary-light)",
+		"on-tertiary-container": "var(--or-c-on-tertiary-container-light)",
 		error: "var(--or-c-error-light)",
+		"on-error": "var(--or-c-on-error-light)",
+		"on-error-container": "var(--or-c-on-error-container-light)",
 		success: "var(--or-c-success-light)",
+		"on-success": "var(--or-c-on-success-light)",
+		"on-success-container": "var(--or-c-on-success-container-light)",
 		warning: "var(--or-c-warning-light)",
+		"on-warning": "var(--or-c-on-warning-light)",
+		"on-warning-container": "var(--or-c-on-warning-container-light)",
+		"on-background": "var(--or-c-on-background-light)",
+		"on-surface": "var(--or-c-on-surface-light)",
+		"on-surface-variant": "var(--or-c-on-surface-variant-light)",
+		"inverse-on-surface": "var(--or-c-inverse-on-surface-light)",
 		"inverse-primary": "var(--or-c-inverse-primary-light)",
 		outline: "var(--or-c-outline-light)",
+		"on-disabled": "var(--or-c-on-disabled-light)",
 		"primary-opacity-0-08": "var(--or-c-primary-opacity-0-08-light)",
 		"primary-opacity-0-12": "var(--or-c-primary-opacity-0-12-light)",
 		"primary-opacity-0-16": "var(--or-c-primary-opacity-0-16-light)",
 		"primary-dark": "var(--or-c-primary-dark)",
+		"on-primary-dark": "var(--or-c-on-primary-dark)",
+		"on-primary-container-dark": "var(--or-c-on-primary-container-dark)",
 		"secondary-dark": "var(--or-c-secondary-dark)",
+		"on-secondary-dark": "var(--or-c-on-secondary-dark)",
+		"on-secondary-container-dark": "var(--or-c-on-secondary-container-dark)",
 		"tertiary-dark": "var(--or-c-tertiary-dark)",
+		"on-tertiary-dark": "var(--or-c-on-tertiary-dark)",
+		"on-tertiary-container-dark": "var(--or-c-on-tertiary-container-dark)",
 		"error-dark": "var(--or-c-error-dark)",
+		"on-error-dark": "var(--or-c-on-error-dark)",
+		"on-error-container-dark": "var(--or-c-on-error-container-dark)",
 		"success-dark": "var(--or-c-success-dark)",
+		"on-success-dark": "var(--or-c-on-success-dark)",
+		"on-success-container-dark": "var(--or-c-on-success-container-dark)",
 		"warning-dark": "var(--or-c-warning-dark)",
+		"on-warning-dark": "var(--or-c-on-warning-dark)",
+		"on-warning-container-dark": "var(--or-c-on-warning-container-dark)",
+		"on-background-dark": "var(--or-c-on-background-dark)",
+		"on-surface-dark": "var(--or-c-on-surface-dark)",
+		"on-surface-variant-dark": "var(--or-c-on-surface-variant-dark)",
+		"inverse-on-surface-dark": "var(--or-c-inverse-on-surface-dark)",
 		"inverse-primary-dark": "var(--or-c-inverse-primary-dark)",
 		"outline-dark": "var(--or-c-outline-dark)",
+		"on-disabled-dark": "var(--or-c-on-disabled-dark)",
 		"primary-opacity-0-08-dark": "var(--or-c-primary-opacity-0-08-dark)",
 		"primary-opacity-0-12-dark": "var(--or-c-primary-opacity-0-12-dark)",
 		"primary-opacity-0-16-dark": "var(--or-c-primary-opacity-0-16-dark)",
@@ -2353,24 +2387,58 @@ var theme = {
 		white: "var(--or-c-white)",
 		black: "var(--or-c-black)",
 		primary: "var(--or-c-primary-light)",
+		"on-primary": "var(--or-c-on-primary-light)",
+		"on-primary-container": "var(--or-c-on-primary-container-light)",
 		secondary: "var(--or-c-secondary-light)",
+		"on-secondary": "var(--or-c-on-secondary-light)",
+		"on-secondary-container": "var(--or-c-on-secondary-container-light)",
 		tertiary: "var(--or-c-tertiary-light)",
+		"on-tertiary": "var(--or-c-on-tertiary-light)",
+		"on-tertiary-container": "var(--or-c-on-tertiary-container-light)",
 		error: "var(--or-c-error-light)",
+		"on-error": "var(--or-c-on-error-light)",
+		"on-error-container": "var(--or-c-on-error-container-light)",
 		success: "var(--or-c-success-light)",
+		"on-success": "var(--or-c-on-success-light)",
+		"on-success-container": "var(--or-c-on-success-container-light)",
 		warning: "var(--or-c-warning-light)",
+		"on-warning": "var(--or-c-on-warning-light)",
+		"on-warning-container": "var(--or-c-on-warning-container-light)",
+		"on-background": "var(--or-c-on-background-light)",
+		"on-surface": "var(--or-c-on-surface-light)",
+		"on-surface-variant": "var(--or-c-on-surface-variant-light)",
+		"inverse-on-surface": "var(--or-c-inverse-on-surface-light)",
 		"inverse-primary": "var(--or-c-inverse-primary-light)",
 		outline: "var(--or-c-outline-light)",
+		"on-disabled": "var(--or-c-on-disabled-light)",
 		"primary-opacity-0-08": "var(--or-c-primary-opacity-0-08-light)",
 		"primary-opacity-0-12": "var(--or-c-primary-opacity-0-12-light)",
 		"primary-opacity-0-16": "var(--or-c-primary-opacity-0-16-light)",
 		"primary-dark": "var(--or-c-primary-dark)",
+		"on-primary-dark": "var(--or-c-on-primary-dark)",
+		"on-primary-container-dark": "var(--or-c-on-primary-container-dark)",
 		"secondary-dark": "var(--or-c-secondary-dark)",
+		"on-secondary-dark": "var(--or-c-on-secondary-dark)",
+		"on-secondary-container-dark": "var(--or-c-on-secondary-container-dark)",
 		"tertiary-dark": "var(--or-c-tertiary-dark)",
+		"on-tertiary-dark": "var(--or-c-on-tertiary-dark)",
+		"on-tertiary-container-dark": "var(--or-c-on-tertiary-container-dark)",
 		"error-dark": "var(--or-c-error-dark)",
+		"on-error-dark": "var(--or-c-on-error-dark)",
+		"on-error-container-dark": "var(--or-c-on-error-container-dark)",
 		"success-dark": "var(--or-c-success-dark)",
+		"on-success-dark": "var(--or-c-on-success-dark)",
+		"on-success-container-dark": "var(--or-c-on-success-container-dark)",
 		"warning-dark": "var(--or-c-warning-dark)",
+		"on-warning-dark": "var(--or-c-on-warning-dark)",
+		"on-warning-container-dark": "var(--or-c-on-warning-container-dark)",
+		"on-background-dark": "var(--or-c-on-background-dark)",
+		"on-surface-dark": "var(--or-c-on-surface-dark)",
+		"on-surface-variant-dark": "var(--or-c-on-surface-variant-dark)",
+		"inverse-on-surface-dark": "var(--or-c-inverse-on-surface-dark)",
 		"inverse-primary-dark": "var(--or-c-inverse-primary-dark)",
 		"outline-dark": "var(--or-c-outline-dark)",
+		"on-disabled-dark": "var(--or-c-on-disabled-dark)",
 		"primary-opacity-0-08-dark": "var(--or-c-primary-opacity-0-08-dark)",
 		"primary-opacity-0-12-dark": "var(--or-c-primary-opacity-0-12-dark)",
 		"primary-opacity-0-16-dark": "var(--or-c-primary-opacity-0-16-dark)",