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

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

@@ -0,0 +1,16 @@
+const HSL_LIMITS = {
+  h: {
+    min: 0,
+    max: 360
+  },
+  s: {
+    min: 50,
+    max: 75
+  },
+  l: {
+    min: 60,
+    max: 80
+  }
+};
+
+export { HSL_LIMITS };

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

@@ -0,0 +1,16 @@
+const CODE_BACKSPACE = 8;
+const CODE_BREAK = 19;
+const CODE_DELETE = 46;
+const CODE_DOWN = 40;
+const CODE_END = 35;
+const CODE_ENTER = 13;
+const CODE_ESC = 27;
+const CODE_HOME = 36;
+const CODE_LEFT = 37;
+const CODE_PAGEDOWN = 34;
+const CODE_PAGEUP = 33;
+const CODE_RIGHT = 39;
+const CODE_SPACE = 32;
+const CODE_UP = 38;
+
+export { CODE_BACKSPACE, CODE_BREAK, CODE_DELETE, CODE_DOWN, CODE_END, CODE_ENTER, CODE_ESC, CODE_HOME, CODE_LEFT, CODE_PAGEDOWN, CODE_PAGEUP, CODE_RIGHT, CODE_SPACE, CODE_UP };

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

@@ -0,0 +1,10 @@
+const PLACEMENT_TOP_START = 'top-start';
+const PLACEMENT_TOP_END = 'top-end';
+const PLACEMENT_BOTTOM_START = 'bottom-start';
+const PLACEMENT_BOTTOM_END = 'bottom-end';
+const PLACEMENT_RIGHT_START = 'right-start';
+const PLACEMENT_RIGHT_END = 'right-end';
+const PLACEMENT_LEFT_START = 'left-start';
+const PLACEMENT_LEFT_END = 'left-end';
+
+export { PLACEMENT_BOTTOM_END, PLACEMENT_BOTTOM_START, PLACEMENT_LEFT_END, PLACEMENT_LEFT_START, PLACEMENT_RIGHT_END, PLACEMENT_RIGHT_START, PLACEMENT_TOP_END, PLACEMENT_TOP_START };

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

@@ -0,0 +1,49 @@
+/**
+ *  Generic
+ */
+const RX_ARRAY_NOTATION = /\[(\d+)]/g;
+const RX_BV_PREFIX = /^(BV?)/;
+const RX_DIGITS = /^\d+$/;
+const RX_EXTENSION = /^\..+/;
+const RX_HASH = /^#/;
+const RX_HASH_ID = /^#[A-Za-z]+[\w\-:.]*$/;
+const RX_HTML_TAGS = /(<([^>]+)>)/gi;
+const RX_HYPHENATE = /\B([A-Z])/g;
+const RX_LOWER_UPPER = /([a-z])([A-Z])/g;
+const RX_NUMBER = /^[0-9]*\.?[0-9]+$/;
+const RX_PLUS = /\+/g;
+const RX_REGEXP_REPLACE = /[-/\\^$*+?.()|[\]{}]/g;
+const RX_SPACES = /[\s\uFEFF\xA0]+/g;
+const RX_SPACE_SPLIT = /\s+/;
+const RX_STAR = /\/\*$/;
+const RX_START_SPACE_WORD = /(\s|^)(\w)/g;
+const RX_TRIM_LEFT = /^\s+/;
+const RX_TRIM_RIGHT = /\s+$/;
+const RX_UNDERSCORE = /_/g;
+const RX_UN_KEBAB = /-(\w)/g;
+const RX_ABBREVIATION_FROM_STRING = /[\p{Alpha}\p{Nd}]+/gu;
+/**
+ *  Date
+ */
+// Loose YYYY-MM-DD matching, ignores any appended time inforation
+// Matches '1999-12-20', '1999-1-1', '1999-01-20T22:51:49.118Z', '1999-01-02 13:00:00'
+const RX_DATE = /^\d+-\d\d?-\d\d?(?:\s|T|$)/;
+// Used to split off the date parts of the YYYY-MM-DD string
+const RX_DATE_SPLIT = /-|\s|T/;
+// Time string RegEx (optional seconds)
+const RX_TIME = /^([0-1]?[0-9]|2[0-3]):[0-5]?[0-9](:[0-5]?[0-9])?$/;
+/**
+ *  URL
+ */
+// HREFs must end with a hash followed by at least one non-hash character
+const RX_HREF = /^.*(#[^#]+)$/;
+const RX_ENCODED_COMMA = /%2C/g;
+const RX_ENCODE_REVERSE = /[!'()*]/g;
+const RX_QUERY_START = /^(\?|#|&)/;
+/**
+ *  Color
+ */
+const RX_SHORT_COLOR = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+const RX_LONG_COLOR = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+
+export { RX_ABBREVIATION_FROM_STRING, RX_ARRAY_NOTATION, RX_BV_PREFIX, RX_DATE, RX_DATE_SPLIT, RX_DIGITS, RX_ENCODED_COMMA, RX_ENCODE_REVERSE, RX_EXTENSION, RX_HASH, RX_HASH_ID, RX_HREF, RX_HTML_TAGS, RX_HYPHENATE, RX_LONG_COLOR, RX_LOWER_UPPER, RX_NUMBER, RX_PLUS, RX_QUERY_START, RX_REGEXP_REPLACE, RX_SHORT_COLOR, RX_SPACES, RX_SPACE_SPLIT, RX_STAR, RX_START_SPACE_WORD, RX_TIME, RX_TRIM_LEFT, RX_TRIM_RIGHT, RX_UNDERSCORE, RX_UN_KEBAB };

package/dist/bundled/v3/{color-1f348774.js → utils/functions/color.js}

@@ -1,34 +1,6 @@
-/**
- *  Generic
- */
-const RX_ABBREVIATION_FROM_STRING = /[\p{Alpha}\p{Nd}]+/gu;
-/**
- *  Color
- */
-const RX_SHORT_COLOR = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-const RX_LONG_COLOR = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
-
-function getHashOfString(str) {
-  return Math.abs(str.split('').reduce((hash, char) => char.charCodeAt(0) + ((hash << 5) - hash), 0));
-}
-function normalize(hash, min, max) {
-  return Math.floor(hash % (max - min) + min);
-}
-
-const HSL_LIMITS = {
-  h: {
-    min: 0,
-    max: 360
-  },
-  s: {
-    min: 50,
-    max: 75
-  },
-  l: {
-    min: 60,
-    max: 80
-  }
-};
+import { RX_SHORT_COLOR, RX_LONG_COLOR } from '../constants/regex.js';
+import { getHashOfString, normalize } from './hash.js';
+import { HSL_LIMITS } from '../constants/color.js';
 
 function hexToRgb(hex) {
   hex = hex.replace(RX_SHORT_COLOR, (m, r, g, b) => r + r + g + g + b + b);
@@ -39,6 +11,13 @@ function hexToRgb(hex) {
     b: parseInt(result[3], 16)
   } : null;
 }
+function componentToHex(c) {
+  const hex = c.toString(16);
+  return hex.length == 1 ? '0' + hex : hex;
+}
+function rgbToHex(r, g, b) {
+  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
 function generateHslFromString(str, limits = HSL_LIMITS) {
   const hRange = (limits === null || limits === void 0 ? void 0 : limits.h) ? [limits.h.min, limits.h.max] : [0, 360];
   const sRange = (limits === null || limits === void 0 ? void 0 : limits.s) ? [limits.s.min, limits.s.max] : [0, 100];
@@ -57,4 +36,4 @@ function hslToColorString(hsl) {
   return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
 }
 
-export { RX_ABBREVIATION_FROM_STRING as R, hexToRgb as a, generateHslFromString as g, hslToColorString as h };
+export { generateHslFromString, hexToRgb, hslToColorString, rgbToHex };

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

@@ -0,0 +1,167 @@
+import _ from 'lodash';
+
+var _a, _b, _c, _d, _e, _f, _g;
+const WINDOW = typeof window !== 'undefined' ? window : null;
+const MutationObs = (WINDOW === null || WINDOW === void 0 ? void 0 : WINDOW.MutationObserver) || ((_a = WINDOW) === null || _a === void 0 ? void 0 : _a.WebKitMutationObserver) || ((_b = WINDOW) === null || _b === void 0 ? void 0 : _b.MozMutationObserver) || null;
+const requestAF = ((WINDOW === null || WINDOW === void 0 ? void 0 : WINDOW.requestAnimationFrame) || ((_c = WINDOW) === null || _c === void 0 ? void 0 : _c.webkitRequestAnimationFrame) || ((_d = WINDOW) === null || _d === void 0 ? void 0 : _d.mozRequestAnimationFrame) || ((_e = WINDOW) === null || _e === void 0 ? void 0 : _e.msRequestAnimationFrame) || ((_f = WINDOW) === null || _f === void 0 ? void 0 : _f.oRequestAnimationFrame) || (
+// Fallback, but not a true polyfill
+// Only needed for Opera Mini
+cb => setTimeout(cb, 16))).bind(WINDOW);
+const cancelAF = ((WINDOW === null || WINDOW === void 0 ? void 0 : WINDOW.cancelAnimationFrame) || ((_g = WINDOW) === null || _g === void 0 ? void 0 : _g.mozCancelAnimationFrame)).bind(WINDOW);
+// Remove a node from DOM
+const removeNode = el => {
+  el && el.parentNode && el.parentNode.removeChild(el);
+};
+// Determine if an HTML element is visible - Faster than CSS check
+const isVisible = el => {
+  if (!_.isElement(el) || !el.parentNode || !contains(document.body, el)) {
+    // Note this can fail for shadow dom elements since they
+    // are not a direct descendant of document.body
+    return false;
+  }
+  if (getStyle(el, 'display') === 'none') {
+    // We do this check to help with vue-test-utils when using v-show
+    return false;
+  }
+  // All browsers support getBoundingClientRect(), except JSDOM as it returns all 0's for values :(
+  // So any tests that need isVisible will fail in JSDOM
+  // Except when we override the getBCR prototype in some tests
+  const bcr = getBCR(el);
+  return !!(bcr && bcr.height > 0 && bcr.width > 0);
+};
+// Cause/wait-for an element to reflow its content (adjusting its height/width)
+const reflow = el => {
+  // Requesting an elements offsetHeight will trigger a reflow of the element content
+  return _.get(el, ['offsetHeight'], null);
+};
+// Select all elements matching selector. Returns `[]` if none found
+const selectAll = (selector, root) => [...(root && _.isElement(root) ? root : document).querySelectorAll(selector)];
+// Select a single element, returns `null` if not found
+const select = (selector, root) => (root && _.isElement(root) ? root : document).querySelector(selector) || null;
+// Returns true if the parent element contains the child element
+const contains = (parent, child) => parent && _.isFunction(parent.contains) ? parent.contains(child) : false;
+// Get an element given an ID
+const getById = id => document.getElementById(/^#/.test(id) ? id.slice(1) : id) || null;
+// Add a class to an element
+const addClass = (el, className) => {
+  // We are checking for `el.classList` existence here since IE 11
+  // returns `undefined` for some elements (e.g. SVG elements)
+  if (className && _.isElement(el) && el.classList) {
+    el.classList.add(className);
+  }
+};
+// Remove a class from an element
+const removeClass = (el, className) => {
+  // We are checking for `el.classList` existence here since IE 11
+  // returns `undefined` for some elements (e.g. SVG elements)
+  if (className && _.isElement(el) && el.classList) el.classList.remove(className);
+};
+// Test if an element has a class
+const hasClass = (el, className) => {
+  // We are checking for `el.classList` existence here since IE 11
+  // returns `undefined` for some elements (e.g. SVG elements)
+  if (className && _.isElement(el) && el.classList) return el.classList.contains(className);
+  return false;
+};
+// Set an attribute on an element
+const setAttr = (el, attr, value) => {
+  if (attr && _.isElement(el)) {
+    el.setAttribute(attr, value);
+  }
+};
+// Remove an attribute from an element
+const removeAttr = (el, attr) => {
+  if (attr && _.isElement(el)) {
+    el.removeAttribute(attr);
+  }
+};
+// Get an attribute value from an element
+const getAttr = (el, attr) => attr && _.isElement(el) ? el.getAttribute(attr) : null;
+// Determine if an attribute exists on an element
+// Returns `true` or `false`, or `null` if element not found
+const hasAttr = (el, attr) => attr && _.isElement(el) ? el.hasAttribute(attr) : null;
+// Set an style property on an element
+const setStyle = (el, prop, value) => {
+  if (prop && _.isElement(el)) {
+    el.style[prop] = value;
+  }
+};
+// Remove an style property from an element
+const removeStyle = (el, prop) => {
+  if (prop && _.isElement(el)) {
+    el.style[prop] = '';
+  }
+};
+// Get an style property value from an element
+// Returns `null` if not found
+const getStyle = (el, prop) => prop && _.isElement(el) ? el.style[prop] || null : null;
+// Return the Bounding Client Rect of an element
+const getBCR = el => _.isElement(el) ? el.getBoundingClientRect() : null;
+// Get computed style object for an element
+const getCS = el => _.get(WINDOW, 'getComputedStyle', null) && _.isElement(el) ? getComputedStyle(el) : {};
+// Return an element's offset with respect to document element
+const offset = el => {
+  const _offset = {
+    top: 0,
+    left: 0
+  };
+  if (!_.isElement(el) || el.getClientRects().length === 0) {
+    return _offset;
+  }
+  const bcr = getBCR(el);
+  if (bcr) {
+    const win = el.ownerDocument.defaultView;
+    _offset.top = bcr.top + _.get(win, 'pageYOffset', 0);
+    _offset.left = bcr.left + _.get(win, 'pageXOffset', 0);
+  }
+  return _offset;
+};
+// Return an element's offset with respect to to its offsetParent
+const position = el => {
+  let _offset = {
+    top: 0,
+    left: 0
+  };
+  if (!_.isElement(el)) {
+    return _offset;
+  }
+  let parentOffset = {
+    top: 0,
+    left: 0
+  };
+  const elStyles = getCS(el);
+  if (elStyles.position === 'fixed') {
+    _offset = getBCR(el) || _offset;
+  } else {
+    _offset = offset(el);
+    const doc = el.ownerDocument;
+    let offsetParent = el.offsetParent || doc.documentElement;
+    while (offsetParent && (offsetParent === doc.body || offsetParent === doc.documentElement) && getCS(offsetParent).position === 'static') {
+      offsetParent = offsetParent.parentNode;
+    }
+    if (offsetParent && offsetParent !== el && offsetParent.nodeType === Node.ELEMENT_NODE) {
+      parentOffset = offset(offsetParent);
+      const offsetParentStyles = getCS(offsetParent);
+      parentOffset.top += parseFloat(offsetParentStyles.borderTopWidth);
+      parentOffset.left += parseFloat(offsetParentStyles.borderLeftWidth);
+    }
+  }
+  return {
+    top: _offset.top - parentOffset.top - parseFloat(elStyles.marginTop),
+    left: _offset.left - parentOffset.left - parseFloat(elStyles.marginLeft)
+  };
+};
+const getMaxZIndex = element => {
+  let maxZIndex = 0;
+  while (element) {
+    const cs = getCS(element);
+    const zIndex = cs.zIndex;
+    if (zIndex !== 'auto') {
+      maxZIndex = +zIndex > maxZIndex ? +zIndex : maxZIndex;
+    }
+    element = element.parentElement;
+  }
+  return maxZIndex;
+};
+
+export { MutationObs, addClass, cancelAF, contains, getAttr, getBCR, getById, getCS, getMaxZIndex, getStyle, hasAttr, hasClass, isVisible, offset, position, reflow, removeAttr, removeClass, removeNode, removeStyle, requestAF, select, selectAll, setAttr, setStyle };

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

@@ -0,0 +1,8 @@
+function getHashOfString(str) {
+  return Math.abs(str.split('').reduce((hash, char) => char.charCodeAt(0) + ((hash << 5) - hash), 0));
+}
+function normalize(hash, min, max) {
+  return Math.floor(hash % (max - min) + min);
+}
+
+export { getHashOfString, normalize };

package/dist/bundled/v3/{px-to-rem-0b26b83e.js → utils/functions/px-to-rem.js}

@@ -1,3 +1,3 @@
 const pxToRem = value => value === 0 ? '0' : `${value / 16}rem`;
 
-export { pxToRem as p };
+export { pxToRem };

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

@@ -0,0 +1,9 @@
+import { RX_ABBREVIATION_FROM_STRING } from '../constants/regex.js';
+
+function getAbbreviation(text, limit) {
+  var _a;
+  if (typeof text != 'string' || !text) return '';
+  return ((_a = text.match(RX_ABBREVIATION_FROM_STRING)) !== null && _a !== void 0 ? _a : []).reduce((previous, next) => previous + (+next === 0 || parseInt(next) ? parseInt(next) : next[0] || ''), '').toUpperCase().substring(0, limit);
+}
+
+export { getAbbreviation };

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

@@ -0,0 +1,5 @@
+function isVisible(element) {
+  return !(element.offsetParent === null);
+}
+
+export { isVisible as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.70.0-beta.2185.0",
+  "version": "2.70.0-beta.2206.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@babel/preset-env": "7.18.10",
-    "@onereach/rollup-vue-lib-config": "1.1.1-beta.53.0",
+    "@onereach/rollup-vue-lib-config": "1.1.1-beta.54.0",
     "@rollup/plugin-replace": "4.0.0",
     "@rollup/plugin-url": "^8.0.1",
     "@storybook/addon-actions": "6.5.15",

package/dist/bundled/v2/OrAvatar-6268adbf.js

@@ -1,116 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import _ from 'lodash';
-import { _ as __vue_component__$1 } from './OrIcon-d69f7e66.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { c as createInjector } from './browser-82dea9ed.js';
-
-var OR_AVATAR_SIZE;
-(function (OR_AVATAR_SIZE) {
-  OR_AVATAR_SIZE["SMALL"] = "small";
-  OR_AVATAR_SIZE["MEDIUM"] = "medium";
-  OR_AVATAR_SIZE["LARGE"] = "large";
-})(OR_AVATAR_SIZE || (OR_AVATAR_SIZE = {}));
-
-var script = defineComponent({
-  name: 'OrAvatar',
-  components: {
-    OrIcon: __vue_component__$1
-  },
-  props: {
-    src: {
-      type: String,
-      default: '',
-      required: false
-    },
-    size: {
-      type: String,
-      default: OR_AVATAR_SIZE.MEDIUM,
-      required: false,
-      validator: value => _.includes(_.values(OR_AVATAR_SIZE), value)
-    },
-    icon: {
-      type: String,
-      default: 'account_circle',
-      required: false
-    }
-  },
-  data(props) {
-    return {
-      showImg: !!props.src
-    };
-  },
-  computed: {
-    avatarClasses() {
-      return ['or-avatar', {
-        [`is-${this.size}-size`]: !!this.size
-      }];
-    }
-  },
-  watch: {
-    src(val) {
-      this.showImg = !!val;
-    }
-  },
-  methods: {
-    showImage() {
-      this.showImg = true;
-    },
-    hideImage() {
-      this.showImg = false;
-    }
-  }
-});
-
-/* 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', {
-    class: _vm.avatarClasses
-  }, [_vm.showImg ? _c('img', {
-    staticClass: "image",
-    attrs: {
-      "src": _vm.src,
-      "alt": "avatar"
-    },
-    on: {
-      "load": _vm.showImage,
-      "error": _vm.hideImage
-    }
-  }) : _c('or-icon', {
-    attrs: {
-      "icon": _vm.icon
-    }
-  })], 1);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = function (inject) {
-  if (!inject) return;
-  inject("data-v-3fcd748d_0", {
-    source: "@keyframes spinAround-data-v-3fcd748d{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-3fcd748d{from{opacity:1}to{opacity:0}}.or-avatar[data-v-3fcd748d],.or-avatar>.image[data-v-3fcd748d]{border-radius:9999px;object-fit:cover}.or-avatar.is-small-size[data-v-3fcd748d],.or-avatar.is-small-size>.image[data-v-3fcd748d]{width:32px;height:32px}.or-avatar.is-small-size[data-v-3fcd748d]  .or-icon{font-size:2rem;line-height:2rem}.or-avatar.is-medium-size[data-v-3fcd748d],.or-avatar.is-medium-size>.image[data-v-3fcd748d]{width:40px;height:40px}.or-avatar.is-medium-size[data-v-3fcd748d]  .or-icon{font-size:2.5rem;line-height:2.5rem}.or-avatar.is-large-size[data-v-3fcd748d],.or-avatar.is-large-size>.image[data-v-3fcd748d]{width:80px;height:80px}.or-avatar.is-large-size[data-v-3fcd748d]  .or-icon{font-size:5rem;line-height:5rem}",
-    map: undefined,
-    media: undefined
-  });
-};
-/* scoped */
-const __vue_scope_id__ = "data-v-3fcd748d";
-/* 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_AVATAR_SIZE as O, __vue_component__ as _ };

package/dist/bundled/v2/OrAvatar-bf65f9a9.js

@@ -1,194 +0,0 @@
-import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
-import { h as hslToColorString, g as generateHslFromString } from './color-1f348774.js';
-import { _ as __vue_component__$1 } from './OrIcon-7e3098b7.js';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-var AvatarSize;
-(function (AvatarSize) {
-  AvatarSize["XL"] = "xl";
-  AvatarSize["L"] = "l";
-  AvatarSize["M"] = "m";
-  AvatarSize["S"] = "s";
-  AvatarSize["XS"] = "xs";
-})(AvatarSize || (AvatarSize = {}));
-var AvatarColor;
-(function (AvatarColor) {
-  AvatarColor["blue"] = "blue";
-  AvatarColor["yellow"] = "yellow";
-  AvatarColor["red"] = "red";
-  AvatarColor["green"] = "green";
-  AvatarColor["grey"] = "grey";
-  AvatarColor["auto"] = "auto";
-})(AvatarColor || (AvatarColor = {}));
-
-const AvatarRoot = [
-// Layout
-'flex', 'items-center', 'justify-center', 'overflow-hidden',
-// Box
-'rounded-full',
-// Interactivity
-'interactivity-none'];
-const AvatarImage = [
-// Box
-'w-full', 'h-full', 'object-cover'];
-const AvatarRootSizes = {
-  'xl': [
-  // Box
-  'w-[80px]', 'h-[80px]'],
-  'l': [
-  // Box
-  'w-[64px]', 'h-[64px]'],
-  'm': [
-  // Box
-  'w-[40px]', 'h-[40px]'],
-  's': [
-  // Box
-  'w-[32px]', 'h-[32px]'],
-  'xs': [
-  // Box
-  'w-[24px]', 'h-[24px]']
-};
-const AvatarRootColors = {
-  [AvatarColor.blue]: [
-  // Theme
-  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
-  [AvatarColor.yellow]: [
-  // Theme
-  'theme-preset-1-warning', 'dark:theme-preset-1-warning-dark'],
-  [AvatarColor.red]: [
-  // Theme
-  'theme-preset-1-error', 'dark:theme-preset-1-error-dark'],
-  [AvatarColor.green]: [
-  // Theme
-  'theme-preset-1-success', 'dark:theme-preset-1-success-dark'],
-  [AvatarColor.grey]: [
-  // Theme
-  'theme-preset-1-secondary', 'dark:theme-preset-1-secondary-dark'],
-  [AvatarColor.auto]: [
-  // Theme
-  'text-white', 'dark:text-overlay-dark']
-};
-const AvatarRootAbbreviationSizes = {
-  'xl': ['typography-headline-1'],
-  'l': ['typography-headline-1'],
-  'm': ['typography-body-1-bold'],
-  's': ['typography-body-1-bold'],
-  'xs': ['typography-caption-semibold']
-};
-const AvatarRootIconSizes = {
-  'xl': ['text-[40px]'],
-  'l': ['text-[32px]'],
-  'm': ['text-[20px]'],
-  's': ['text-[16px]'],
-  'xs': ['text-[16px]']
-};
-
-var script = defineComponent({
-  name: 'OrAvatar',
-  components: {
-    OrIcon: __vue_component__$1
-  },
-  inheritAttrs: false,
-  props: {
-    src: {
-      type: String,
-      default: undefined
-    },
-    size: {
-      type: String,
-      default: AvatarSize.M
-    },
-    icon: {
-      type: String,
-      default: undefined
-    },
-    color: {
-      type: String,
-      default: AvatarColor.auto,
-      required: false
-    },
-    colorSalt: {
-      type: String,
-      default: undefined,
-      required: false
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    const isIcon = computed(() => {
-      return !props.icon;
-    });
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], ...(isIcon.value ? AvatarRootAbbreviationSizes[props.size] : AvatarRootIconSizes[props.size]), classAttribute.value]);
-    const imageStyles = computed(() => [...AvatarImage]);
-    // Effects
-    watchPostEffect(() => {
-      var _a;
-      const rootElement = root.value;
-      if (rootElement && !props.src && props.color === AvatarColor.auto) {
-        Object.assign(rootElement.style, {
-          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : '')),
-          color: props.color
-        });
-      }
-    });
-    return {
-      root,
-      rootStyles,
-      imageStyles
-    };
-  }
-});
-
-/* 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), [_vm._t("default", function () {
-    return [_vm.src ? _c('img', {
-      class: _vm.imageStyles,
-      attrs: {
-        "src": _vm.src,
-        "alt": ''
-      }
-    }) : _vm.icon ? _c('or-icon', {
-      attrs: {
-        "icon": _vm.icon,
-        "size": "inherit"
-      }
-    }) : _vm._e()];
-  })], 2);
-};
-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 { AvatarSize as A, __vue_component__ as _, AvatarColor as a };