@onereach/ui-components 8.8.0 → 8.8.1-beta.3699.0

package/dist/bundled/v3/utils/constants/color.js

@@ -1 +1 @@
-export { H as HSL_LIMITS } from '../../components/OrAvatarV3-fad0711b.js';
+export { H as HSL_LIMITS } from '../../components/OrAvatarV3-234600c1.js';

package/dist/bundled/v3/utils/constants/key-codes.js

@@ -1 +1 @@
-export { am as CODE_BACKSPACE, an as CODE_BREAK, ao as CODE_DELETE, ap as CODE_DOWN, aq as CODE_END, ar as CODE_ENTER, as as CODE_ESC, at as CODE_HOME, au as CODE_LEFT, av as CODE_PAGEDOWN, aw as CODE_PAGEUP, ax as CODE_RIGHT, ay as CODE_SPACE, az as CODE_UP } from '../../components/OrBottomSheetV3-d9cb62e3.js';
+export { am as CODE_BACKSPACE, an as CODE_BREAK, ao as CODE_DELETE, ap as CODE_DOWN, aq as CODE_END, ar as CODE_ENTER, as as CODE_ESC, at as CODE_HOME, au as CODE_LEFT, av as CODE_PAGEDOWN, aw as CODE_PAGEUP, ax as CODE_RIGHT, ay as CODE_SPACE, az as CODE_UP } from '../../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/constants/poper.js

@@ -1 +1 @@
-export { aD as PLACEMENT_BOTTOM_END, aC as PLACEMENT_BOTTOM_START, aH as PLACEMENT_LEFT_END, aG as PLACEMENT_LEFT_START, aF as PLACEMENT_RIGHT_END, aE as PLACEMENT_RIGHT_START, aB as PLACEMENT_TOP_END, aA as PLACEMENT_TOP_START } from '../../components/OrBottomSheetV3-d9cb62e3.js';
+export { aD as PLACEMENT_BOTTOM_END, aC as PLACEMENT_BOTTOM_START, aH as PLACEMENT_LEFT_END, aG as PLACEMENT_LEFT_START, aF as PLACEMENT_RIGHT_END, aE as PLACEMENT_RIGHT_START, aB as PLACEMENT_TOP_END, aA as PLACEMENT_TOP_START } from '../../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/constants/regex.js

@@ -1 +1 @@
-export { R as RX_ABBREVIATION_FROM_STRING, a as RX_ARRAY_NOTATION, b as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, c as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, d as RX_EXTENSION, e as RX_HASH, f as RX_HASH_ID, x as RX_HREF, g as RX_HTML_TAGS, h as RX_HYPHENATE, C as RX_LONG_COLOR, i as RX_LOWER_UPPER, j as RX_NUMBER, k as RX_PLUS, A as RX_QUERY_START, l as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, m as RX_SPACES, n as RX_SPACE_SPLIT, o as RX_STAR, p as RX_START_SPACE_WORD, w as RX_TIME, q as RX_TRIM_LEFT, r as RX_TRIM_RIGHT, s as RX_UNDERSCORE, t as RX_UN_KEBAB } from '../../components/OrAvatarV3-fad0711b.js';
+export { R as RX_ABBREVIATION_FROM_STRING, a as RX_ARRAY_NOTATION, b as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, c as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, d as RX_EXTENSION, e as RX_HASH, f as RX_HASH_ID, x as RX_HREF, g as RX_HTML_TAGS, h as RX_HYPHENATE, C as RX_LONG_COLOR, i as RX_LOWER_UPPER, j as RX_NUMBER, k as RX_PLUS, A as RX_QUERY_START, l as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, m as RX_SPACES, n as RX_SPACE_SPLIT, o as RX_STAR, p as RX_START_SPACE_WORD, w as RX_TIME, q as RX_TRIM_LEFT, r as RX_TRIM_RIGHT, s as RX_UNDERSCORE, t as RX_UN_KEBAB } from '../../components/OrAvatarV3-234600c1.js';

package/dist/bundled/v3/utils/functions/color.js

@@ -1 +1 @@
-export { F as generateHslFromString, D as hexToRgb, G as hslToColorString, E as rgbToHex } from '../../components/OrAvatarV3-fad0711b.js';
+export { F as generateHslFromString, D as hexToRgb, G as hslToColorString, E as rgbToHex } from '../../components/OrAvatarV3-234600c1.js';

package/dist/bundled/v3/utils/functions/dom.js

@@ -1 +1 @@
-export { aI as MutationObs, ae as addClass, k as cancelAF, aN as contains, aS as getAttr, l as getBCR, aO as getById, A as getCS, B as getMaxZIndex, aU as getStyle, aT as hasAttr, aP as hasClass, aK as isVisible, aV as offset, aW as position, h as reflow, aR as removeAttr, af as removeClass, aJ as removeNode, j as removeStyle, r as requestAF, aM as select, aL as selectAll, aQ as setAttr, s as setStyle } from '../../components/OrBottomSheetV3-d9cb62e3.js';
+export { aI as MutationObs, ae as addClass, k as cancelAF, aN as contains, aS as getAttr, l as getBCR, aO as getById, A as getCS, B as getMaxZIndex, aU as getStyle, aT as hasAttr, aP as hasClass, aK as isVisible, aV as offset, aW as position, h as reflow, aR as removeAttr, af as removeClass, aJ as removeNode, j as removeStyle, r as requestAF, aM as select, aL as selectAll, aQ as setAttr, s as setStyle } from '../../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/functions/flattenDeep.js

@@ -1 +1 @@
-export { f as default } from '../../components/OrBottomSheetV3-d9cb62e3.js';
+export { f as default } from '../../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/functions/hash.js

@@ -1 +1 @@
-export { I as getHashOfString, J as normalize } from '../../components/OrAvatarV3-fad0711b.js';
+export { I as getHashOfString, J as normalize } from '../../components/OrAvatarV3-234600c1.js';

package/dist/bundled/v3/utils/functions/px-to-rem.js

@@ -1 +1 @@
-export { p as pxToRem } from '../../components/OrBottomSheetV3-d9cb62e3.js';
+export { p as pxToRem } from '../../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/functions/text.js

@@ -1,2 +1,2 @@
-import '../../components/OrAvatarV3-fad0711b.js';
-export { aX as getAbbreviation } from '../../components/OrBottomSheetV3-d9cb62e3.js';
+import '../../components/OrAvatarV3-234600c1.js';
+export { aX as getAbbreviation } from '../../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/index.js

@@ -1,2 +1,2 @@
-export { H as HSL_LIMITS, R as RX_ABBREVIATION_FROM_STRING, a as RX_ARRAY_NOTATION, b as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, c as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, d as RX_EXTENSION, e as RX_HASH, f as RX_HASH_ID, x as RX_HREF, g as RX_HTML_TAGS, h as RX_HYPHENATE, C as RX_LONG_COLOR, i as RX_LOWER_UPPER, j as RX_NUMBER, k as RX_PLUS, A as RX_QUERY_START, l as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, m as RX_SPACES, n as RX_SPACE_SPLIT, o as RX_STAR, p as RX_START_SPACE_WORD, w as RX_TIME, q as RX_TRIM_LEFT, r as RX_TRIM_RIGHT, s as RX_UNDERSCORE, t as RX_UN_KEBAB, F as generateHslFromString, I as getHashOfString, D as hexToRgb, G as hslToColorString, J as normalize, E as rgbToHex } from '../components/OrAvatarV3-fad0711b.js';
-export { am as CODE_BACKSPACE, an as CODE_BREAK, ao as CODE_DELETE, ap as CODE_DOWN, aq as CODE_END, ar as CODE_ENTER, as as CODE_ESC, at as CODE_HOME, au as CODE_LEFT, av as CODE_PAGEDOWN, aw as CODE_PAGEUP, ax as CODE_RIGHT, ay as CODE_SPACE, az as CODE_UP, aI as MutationObs, aD as PLACEMENT_BOTTOM_END, aC as PLACEMENT_BOTTOM_START, aH as PLACEMENT_LEFT_END, aG as PLACEMENT_LEFT_START, aF as PLACEMENT_RIGHT_END, aE as PLACEMENT_RIGHT_START, aB as PLACEMENT_TOP_END, aA as PLACEMENT_TOP_START, ae as addClass, k as cancelAF, aN as contains, aX as getAbbreviation, aS as getAttr, l as getBCR, aO as getById, A as getCS, B as getMaxZIndex, aU as getStyle, aT as hasAttr, aP as hasClass, S as isEmpty, i as isEmptyValue, ad as isEqualValue, aK as isVisible, aV as offset, aW as position, p as pxToRem, h as reflow, aR as removeAttr, af as removeClass, aJ as removeNode, j as removeStyle, r as requestAF, aM as select, aL as selectAll, aQ as setAttr, s as setStyle } from '../components/OrBottomSheetV3-d9cb62e3.js';
+export { H as HSL_LIMITS, R as RX_ABBREVIATION_FROM_STRING, a as RX_ARRAY_NOTATION, b as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, c as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, d as RX_EXTENSION, e as RX_HASH, f as RX_HASH_ID, x as RX_HREF, g as RX_HTML_TAGS, h as RX_HYPHENATE, C as RX_LONG_COLOR, i as RX_LOWER_UPPER, j as RX_NUMBER, k as RX_PLUS, A as RX_QUERY_START, l as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, m as RX_SPACES, n as RX_SPACE_SPLIT, o as RX_STAR, p as RX_START_SPACE_WORD, w as RX_TIME, q as RX_TRIM_LEFT, r as RX_TRIM_RIGHT, s as RX_UNDERSCORE, t as RX_UN_KEBAB, F as generateHslFromString, I as getHashOfString, D as hexToRgb, G as hslToColorString, J as normalize, E as rgbToHex } from '../components/OrAvatarV3-234600c1.js';
+export { am as CODE_BACKSPACE, an as CODE_BREAK, ao as CODE_DELETE, ap as CODE_DOWN, aq as CODE_END, ar as CODE_ENTER, as as CODE_ESC, at as CODE_HOME, au as CODE_LEFT, av as CODE_PAGEDOWN, aw as CODE_PAGEUP, ax as CODE_RIGHT, ay as CODE_SPACE, az as CODE_UP, aI as MutationObs, aD as PLACEMENT_BOTTOM_END, aC as PLACEMENT_BOTTOM_START, aH as PLACEMENT_LEFT_END, aG as PLACEMENT_LEFT_START, aF as PLACEMENT_RIGHT_END, aE as PLACEMENT_RIGHT_START, aB as PLACEMENT_TOP_END, aA as PLACEMENT_TOP_START, ae as addClass, k as cancelAF, aN as contains, aX as getAbbreviation, aS as getAttr, l as getBCR, aO as getById, A as getCS, B as getMaxZIndex, aU as getStyle, aT as hasAttr, aP as hasClass, S as isEmpty, i as isEmptyValue, ad as isEqualValue, aK as isVisible, aV as offset, aW as position, p as pxToRem, h as reflow, aR as removeAttr, af as removeClass, aJ as removeNode, j as removeStyle, r as requestAF, aM as select, aL as selectAll, aQ as setAttr, s as setStyle } from '../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/isEmpty.js

@@ -1 +1 @@
-export { S as isEmpty } from '../components/OrBottomSheetV3-d9cb62e3.js';
+export { S as isEmpty } from '../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/isEmptyValue.js

@@ -1 +1 @@
-export { i as isEmptyValue } from '../components/OrBottomSheetV3-d9cb62e3.js';
+export { i as isEmptyValue } from '../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/isEqualValue.js

@@ -1 +1 @@
-export { ad as isEqualValue } from '../components/OrBottomSheetV3-d9cb62e3.js';
+export { ad as isEqualValue } from '../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/bundled/v3/utils/isVisible.js

@@ -1 +1 @@
-export { aY as default } from '../components/OrBottomSheetV3-d9cb62e3.js';
+export { aY as default } from '../components/OrBottomSheetV3-0b5b36b0.js';

package/dist/esm/v2/{OrAvatar-db6a737d.js → OrAvatar-411e226e.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed } from 'vue-demi';
 import { G as hslToColorString, F as generateHslFromString } from './color-6b0fc765.js';
 import { _ as __vue_component__$1 } from './OrIcon-0343b3d8.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -133,22 +133,27 @@ var script = defineComponent({
   setup(props) {
     // Refs
     const root = ref();
+    // Props
+    const {
+      size,
+      icon,
+      color,
+      src,
+      colorSalt
+    } = toRefs(props);
     // Styles
-    const rootStyles = computed(() => ['or-avatar-v3', ...Avatar, ...AvatarSizes[props.size], ...(props.icon ? AvatarIconSizes[props.size] : AvatarTextSizes[props.size]), ...AvatarColors[props.color]]);
-    // Effects
-    watchPostEffect(() => {
+    const rootStyles = computed(() => ['or-avatar-v3', ...Avatar, ...AvatarSizes[size.value], ...(icon.value ? AvatarIconSizes[size.value] : AvatarTextSizes[size.value]), ...AvatarColors[color.value]]);
+    // Inline styles
+    const rootInlineStyles = computed(() => {
       var _a;
-      const rootElement = root.value;
-      if (rootElement && !props.src && props.color === AvatarColor.Auto) {
-        Object.assign(rootElement.style, {
-          color: props.color,
-          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : ''))
-        });
-      }
+      return {
+        background: color.value === AvatarColor.Auto && !src.value ? hslToColorString(generateHslFromString((_a = colorSalt.value) !== null && _a !== void 0 ? _a : '')) : undefined
+      };
     });
     return {
       root,
-      rootStyles
+      rootStyles,
+      rootInlineStyles
     };
   }
 });
@@ -163,7 +168,8 @@ var __vue_render__ = function () {
   var _c = _vm._self._c || _h;
   return _c('div', {
     ref: "root",
-    class: _vm.rootStyles
+    class: _vm.rootStyles,
+    style: _vm.rootInlineStyles
   }, [_vm._t("default", function () {
     return [_vm.src ? [_c('img', {
       class: ['w-full', 'h-full', 'object-cover'],

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

@@ -1,5 +1,5 @@
 export { O as OR_AVATAR_SIZE, _ as OrAvatar } from '../OrAvatar-2d73ca2c.js';
-export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-db6a737d.js';
+export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-411e226e.js';
 export { B as BottomSheetVariant, _ as OrBottomSheetV3 } from '../OrBottomSheet-54250194.js';
 export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from '../OrButton-dc23a0b5.js';
 export { _ as OrButtonGroupV3 } from '../OrButtonGroup-e8b5c31a.js';

package/dist/esm/v2/components/or-avatar-v3/OrAvatar.vue.d.ts

@@ -3,6 +3,9 @@ import { AvatarColor, AvatarSize } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    rootInlineStyles: import("@vue/composition-api").ComputedRef<{
+        background: string | undefined;
+    }>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     src: {
         type: StringConstructor;
@@ -54,6 +57,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    rootInlineStyles: import("@vue/composition-api").ComputedRef<{
+        background: string | undefined;
+    }>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
     src: string;
     icon: string;

package/dist/esm/v2/components/or-avatar-v3/index.js

@@ -1,4 +1,4 @@
-export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-db6a737d.js';
+export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-411e226e.js';
 import 'vue-demi';
 import '../../color-6b0fc765.js';
 import '../../OrIcon-0343b3d8.js';

package/dist/esm/v2/index.js

@@ -1,5 +1,5 @@
 export { O as OR_AVATAR_SIZE, _ as OrAvatar } from './OrAvatar-2d73ca2c.js';
-export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from './OrAvatar-db6a737d.js';
+export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from './OrAvatar-411e226e.js';
 export { B as BottomSheetVariant, _ as OrBottomSheetV3 } from './OrBottomSheet-54250194.js';
 export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-dc23a0b5.js';
 export { _ as OrButtonGroupV3 } from './OrButtonGroup-e8b5c31a.js';

package/dist/esm/v3/{OrAvatar-c2d6f463.js → OrAvatar-d3af4a3e.js}

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed } from 'vue-demi';
 import { G as hslToColorString, F as generateHslFromString } from './color-6b0fc765.js';
 import { s as script$1 } from './OrIcon-8f6c9c29.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createCommentVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createBlock, createCommentVNode } from 'vue';
 
 var AvatarSize;
 (function (AvatarSize) {
@@ -133,22 +133,27 @@ var script = defineComponent({
   setup(props) {
     // Refs
     const root = ref();
+    // Props
+    const {
+      size,
+      icon,
+      color,
+      src,
+      colorSalt
+    } = toRefs(props);
     // Styles
-    const rootStyles = computed(() => ['or-avatar-v3', ...Avatar, ...AvatarSizes[props.size], ...(props.icon ? AvatarIconSizes[props.size] : AvatarTextSizes[props.size]), ...AvatarColors[props.color]]);
-    // Effects
-    watchPostEffect(() => {
+    const rootStyles = computed(() => ['or-avatar-v3', ...Avatar, ...AvatarSizes[size.value], ...(icon.value ? AvatarIconSizes[size.value] : AvatarTextSizes[size.value]), ...AvatarColors[color.value]]);
+    // Inline styles
+    const rootInlineStyles = computed(() => {
       var _a;
-      const rootElement = root.value;
-      if (rootElement && !props.src && props.color === AvatarColor.Auto) {
-        Object.assign(rootElement.style, {
-          color: props.color,
-          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : ''))
-        });
-      }
+      return {
+        background: color.value === AvatarColor.Auto && !src.value ? hslToColorString(generateHslFromString((_a = colorSalt.value) !== null && _a !== void 0 ? _a : '')) : undefined
+      };
     });
     return {
       root,
-      rootStyles
+      rootStyles,
+      rootInlineStyles
     };
   }
 });
@@ -158,7 +163,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   return openBlock(), createElementBlock("div", {
     ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
+    class: normalizeClass(_ctx.rootStyles),
+    style: normalizeStyle(_ctx.rootInlineStyles)
   }, [renderSlot(_ctx.$slots, "default", {}, () => [_ctx.src ? (openBlock(), createElementBlock("img", {
     key: 0,
     class: normalizeClass(['w-full', 'h-full', 'object-cover']),
@@ -168,7 +174,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     key: 1,
     icon: _ctx.icon,
     size: 'inherit'
-  }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)])], 2 /* CLASS */);
+  }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)])], 6 /* CLASS, STYLE */);
 }
 
 script.render = render;

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

@@ -1,5 +1,5 @@
 export { O as OR_AVATAR_SIZE, s as OrAvatar } from '../OrAvatar-c1b2339e.js';
-export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from '../OrAvatar-c2d6f463.js';
+export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from '../OrAvatar-d3af4a3e.js';
 export { B as BottomSheetVariant, s as OrBottomSheetV3 } from '../OrBottomSheet-e6c0b05f.js';
 export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from '../OrButton-9118c20e.js';
 export { s as OrButtonGroupV3 } from '../OrButtonGroup-b01ebd70.js';

package/dist/esm/v3/components/or-avatar-v3/OrAvatar.vue.d.ts

@@ -24,6 +24,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
+    rootInlineStyles: import("vue-demi").ComputedRef<{
+        background: string | undefined;
+    }>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     src: {
         type: StringConstructor;

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

@@ -1,4 +1,4 @@
-export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from '../../OrAvatar-c2d6f463.js';
+export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from '../../OrAvatar-d3af4a3e.js';
 import 'vue-demi';
 import '../../color-6b0fc765.js';
 import '../../OrIcon-8f6c9c29.js';

package/dist/esm/v3/index.js

@@ -1,5 +1,5 @@
 export { O as OR_AVATAR_SIZE, s as OrAvatar } from './OrAvatar-c1b2339e.js';
-export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-c2d6f463.js';
+export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-d3af4a3e.js';
 export { B as BottomSheetVariant, s as OrBottomSheetV3 } from './OrBottomSheet-e6c0b05f.js';
 export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-9118c20e.js';
 export { s as OrButtonGroupV3 } from './OrButtonGroup-b01ebd70.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.8.0",
+  "version": "8.8.1-beta.3699.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -176,6 +176,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "726f238d821d6574f3f74f4bdd610d07842a343e"
+  }
 }

package/src/components/or-avatar-v3/OrAvatar.vue

@@ -2,6 +2,7 @@
   <div
     ref="root"
     :class="rootStyles"
+    :style="rootInlineStyles"
   >
     <slot>
       <template v-if="src">
@@ -23,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watchPostEffect } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRefs } from 'vue-demi';
 import { generateHslFromString, hslToColorString } from '../../utils/functions/color';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { AvatarColor, AvatarSize } from './props';
@@ -71,32 +72,30 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLElement>();
 
+    // Props
+    const { size, icon, color, src, colorSalt } = toRefs(props);
     // Styles
     const rootStyles = computed(() => [
       'or-avatar-v3',
       ...Avatar,
-      ...AvatarSizes[props.size],
-      ...props.icon
-        ? AvatarIconSizes[props.size]
-        : AvatarTextSizes[props.size],
-      ...AvatarColors[props.color],
+      ...AvatarSizes[size.value],
+      ...icon.value
+        ? AvatarIconSizes[size.value]
+        : AvatarTextSizes[size.value],
+      ...AvatarColors[color.value],
     ]);
 
-    // Effects
-    watchPostEffect(() => {
-      const rootElement = root.value;
-
-      if (rootElement && !props.src && props.color === AvatarColor.Auto) {
-        Object.assign(rootElement.style, {
-          color: props.color,
-          background: hslToColorString(generateHslFromString(props.colorSalt ?? '')),
-        });
-      }
-    });
+    // Inline styles
+    const rootInlineStyles = computed(() => ({
+      background: color.value === AvatarColor.Auto && !src.value
+        ? hslToColorString(generateHslFromString(colorSalt.value ?? ''))
+        : undefined,
+    }));
 
     return {
       root,
       rootStyles,
+      rootInlineStyles,
     };
   },
 });