@onereach/ui-components 4.18.2 → 4.18.3-beta.3120.0

package/dist/esm/v2/index.js

@@ -1,34 +1,34 @@
 export { O as OR_AVATAR_SIZE, _ as OrAvatar } from './OrAvatar-2d73ca2c.js';
-export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from './OrAvatar-d1c82ab9.js';
-export { B as BottomSheetVariant, _ as OrBottomSheetV3 } from './OrBottomSheet-67e6d85e.js';
+export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from './OrAvatar-dd0e1e3b.js';
+export { B as BottomSheetVariant, _ as OrBottomSheetV3 } from './OrBottomSheet-a4ee4b0e.js';
 export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-dc23a0b5.js';
 export { _ as OrButtonV2 } from './OrButton-f189b59b.js';
 export { _ as OrIconButton, _ as OrIconButtonV2 } from './OrIconButton-257b38f2.js';
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE } from './OrIconButton.vue_rollup-plugin-vue_styles.0-91855f16.js';
-export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-9622e713.js';
+export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-a23ee9f0.js';
 export { _ as OrCard } from './OrCard-c44d9783.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-bea023f8.js';
-export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-ca6d1e3c.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-9aaa7a3c.js';
 export { _ as OrCardV3 } from './OrCard-0da13cbe.js';
 export { _ as OrCheckbox } from './OrCheckbox-fcd6b64c.js';
-export { _ as OrCheckboxGroupV3 } from './OrCheckboxGroup-eda833b1.js';
-export { _ as OrCheckboxTreeV3 } from './OrCheckboxTree-231ba2b1.js';
+export { _ as OrCheckboxGroupV3 } from './OrCheckboxGroup-a04f27fe.js';
+export { _ as OrCheckboxTreeV3 } from './OrCheckboxTree-f48db82f.js';
 export { _ as OrCheckboxV3 } from './OrCheckbox-db66b4ea.js';
 export { _ as OrChip } from './OrChip-6cae6dab.js';
 export { _ as OrChips } from './OrChips-dd82c2b6.js';
 export { _ as OrCode, O as OrCodeLanguages } from './OrCode-34234c09.js';
-export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-996daa11.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-dd915faf.js';
 export { _ as OrCollapse } from './OrCollapse-9d22b072.js';
 export { _ 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-7a4f2fcb.js';
 export { _ as OrCombinedInputV3 } from './OrCombinedInput-45187323.js';
 export { _ as OrInputBoxV3 } from './OrInputBox-7dc5b9e9.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 export { _ as OrConfirm } from './OrConfirm-807585ea.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-e4f8c958.js';
-export { _ as OrDatePickerV3 } from './OrDatePicker-20d1ed3e.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-a0875502.js';
+export { _ as OrDatePickerV3 } from './OrDatePicker-0b119ef4.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-7f4ecc89.js';
-export { _ as OrDateTimePickerV3 } from './OrDateTimePicker-42c99a26.js';
-export { D as DateTimePickerTimeFormat, D as TimePickerFormat } from './OrDateTimePicker.vue_rollup-plugin-vue_script-64817206.js';
+export { _ as OrDateTimePickerV3 } from './OrDateTimePicker-061c7472.js';
+export { D as DateTimePickerTimeFormat, D as TimePickerFormat } from './OrDateTimePicker.vue_rollup-plugin-vue_script-18dea32e.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-2d3fd68d.js';
 export { _ as OrError } from './OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-a55ae01a.js';
@@ -40,14 +40,14 @@ export { F as FormGroupDirection, _ as OrFormGroupV3 } from './OrFormGroup-29a51
 export { _ as OrHint } from './OrHint-7eadc91e.js';
 export { _ as OrHintV3 } from './OrHint-aa221198.js';
 export { _ as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-d26e8a1e.js';
-export { I as IconButtonColor, _ as OrIconButtonV3 } from './OrIconButton-85a6de2c.js';
+export { I as IconButtonColor, _ as OrIconButtonV3 } from './OrIconButton-311050dc.js';
 export { I as IconButtonSize, I as IconSize, a as IconVariant, _ as OrIconV3 } from './OrIcon-d35a84d8.js';
 export { I as InlineInputBoxSize, I as InlineInputSize, _ as OrInlineInputBoxV3 } from './OrInlineInputBox-19b49ee6.js';
-export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-2b7f5745.js';
+export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-410e6e7d.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, _ as OrInlineTextEdit } from './OrInlineTextEdit-2ec8a8b4.js';
-export { _ as OrInlineTextareaV3 } from './OrInlineTextarea-281064ab.js';
+export { _ as OrInlineTextareaV3 } from './OrInlineTextarea-be5970dd.js';
 export { _ as OrInput } from './OrInput-7a12709e.js';
-export { I as InputType, _ as OrInputV3 } from './OrInput-a7e317b8.js';
+export { I as InputType, _ as OrInputV3 } from './OrInput-99ccfff7.js';
 export { _ as OrLabel } from './OrLabel-fcceec1b.js';
 export { L as LabelVariant, _ as OrLabelV3 } from './OrLabel-63380256.js';
 export { L as LinkColor, _ as OrLinkV3 } from './OrLink-cf3a0091.js';
@@ -56,17 +56,17 @@ export { _ as OrListOfInputs } from './OrListOfInputs-1eaeb7e9.js';
 export { L as LoaderViews, _ as OrLoader } from './OrLoader-90406201.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, _ as OrLoaderV3 } from './OrLoader-b0c381f9.js';
 export { _ as OrMenuItemV3 } from './OrMenuItem-c1c97ebe.js';
-export { _ as OrMenuV3 } from './OrMenu-54d6a7a5.js';
-export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-c511273a.js';
+export { _ as OrMenuV3 } from './OrMenu-e2f557c8.js';
+export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-36e2fc9f.js';
 export { _ as OrModal, O as OrModalSizes } from './OrModal-d300f52f.js';
-export { M as ModalSize, _ as OrModalV3 } from './OrModal-5626eeee.js';
+export { M as ModalSize, _ as OrModalV3 } from './OrModal-3dafa3ce.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from './OrNotification-defc3f87.js';
-export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotification-b0fb0d4f.js';
+export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotification-6df1f6f6.js';
 export { _ as OrNumberInput } from './OrNumberInput-7f0d6f74.js';
 export { _ as OrOverflowMenu } from './OrOverflowMenu-6f60e864.js';
 export { _ as OrOverlay } from './OrOverlay-ccec2218.js';
-export { _ as OrOverlayV3 } from './OrOverlay-948346df.js';
-export { _ as OrPaginationV3 } from './OrPagination-11d363f2.js';
+export { _ as OrOverlayV3 } from './OrOverlay-f819eff9.js';
+export { _ as OrPaginationV3 } from './OrPagination-f1e7aaa7.js';
 export { _ as OrPassword } from './OrPassword-ab2acc85.js';
 export { _ as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-65968c24.js';
 export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-e079e857.js';
@@ -75,13 +75,13 @@ export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from './OrRadioGroup-d1c2e460.js';
 export { _ as OrRadioV3 } from './OrRadio-b32dfbfe.js';
 export { _ as OrSearch } from './OrSearch-ac542dd6.js';
-export { _ as OrSearchV3 } from './OrSearch-7ad39657.js';
+export { _ as OrSearchV3 } from './OrSearch-f49e5f70.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-d4e32f80.js';
 export { _ as OrSelect } from './OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from './OrSelect-0bd57cba.js';
+export { _ as OrSelectV3 } from './OrSelect-5e9508c9.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
-export { _ as OrSidebarV3 } from './OrSidebar-74f719fc.js';
-export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-07d12eb4.js';
+export { _ as OrSidebarV3 } from './OrSidebar-0539d572.js';
+export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-8474d9c3.js';
 export { _ as OrSkeletonCircle } from './OrSkeletonCircle-c4bf0e34.js';
 export { _ as OrSkeletonRect } from './OrSkeletonRect-79162a84.js';
 export { _ as OrSkeletonText } from './OrSkeletonText-bd5d97bb.js';
@@ -90,7 +90,7 @@ export { _ as OrSkeletonCircleV3 } from './OrSkeletonCircle-3419b04d.js';
 export { _ as OrSkeletonRectV3 } from './OrSkeletonRect-7057bc1c.js';
 export { _ as OrSkeletonTextV3 } from './OrSkeletonText-6c00f797.js';
 export { _ as OrSlider } from './OrSlider-c913a2b6.js';
-export { _ as OrSortingV3 } from './OrSorting-ef99ef70.js';
+export { _ as OrSortingV3 } from './OrSorting-fad7928f.js';
 export { _ as OrStepper } from './OrStepper-8dc4059a.js';
 export { _ as OrSwitch } from './OrSwitch-322328f7.js';
 export { _ as OrSwitchV3 } from './OrSwitch-e49ce2d8.js';
@@ -98,26 +98,26 @@ export { _ as OrTab } from './OrTab-58821c9b.js';
 export { _ as OrTabHeaderItem } from './OrTabHeaderItem-424f2986.js';
 export { _ as OrTabV3 } from './OrTab-88036fe9.js';
 export { _ as OrTabs } from './OrTabs-62e7e478.js';
-export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-b8a92669.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-0046e15b.js';
 export { _ as OrTag } from './OrTag-b5803a20.js';
-export { _ as OrTagInputV3 } from './OrTagInput-f2ddcc97.js';
-export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-b6125507.js';
-export { _ as OrTagsV3 } from './OrTags-b7d9e52c.js';
+export { _ as OrTagInputV3 } from './OrTagInput-5b1ac86e.js';
+export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-d21ee9c1.js';
+export { _ as OrTagsV3 } from './OrTags-c1a44ef7.js';
 export { _ as OrTeleport } from './OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-424c7f33.js';
 export { _ as OrTextV3 } from './OrText-44449e7b.js';
 export { _ as OrTextarea } from './OrTextarea-9febab19.js';
 export { _ as OrTextareaV3 } from './OrTextarea-824f7048.js';
 export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-cb15a62f.js';
-export { _ as OrTimePickerV3 } from './OrTimePicker-9312df72.js';
+export { _ as OrTimePickerV3 } from './OrTimePicker-d73ce31e.js';
 export { _ as OrToast, a as OrToastContainer } from './OrToastContainer-ecffc69f.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
-export { a as OrToastContainerV3, _ as OrToastV3, t as TypesV3 } from './types-6792dff8.js';
+export { a as OrToastContainerV3, _ as OrToastV3, t as TypesV3 } from './types-e481ff6f.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-5aa9dc05.js';
 export { _ as OrTooltip } from './OrTooltip-2f267924.js';
 export { _ as OrTooltipContent } from './OrTooltipContent-57a25502.js';
-export { _ as OrTooltipV3 } from './OrTooltip-7a9861a2.js';
-export { _ as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-dcacd695.js';
+export { _ as OrTooltipV3 } from './OrTooltip-ec00d3ee.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-dfc8a086.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-a50ec347.js';
@@ -154,7 +154,7 @@ import '@codemirror/lang-markdown';
 import '@codemirror/language';
 import '@lezer/highlight';
 import '@vueuse/math';
-import './OrDateTimePickerPopoverHeader-dd9de00f.js';
+import './OrDateTimePickerPopoverHeader-30ec0bf4.js';
 import 'lodash/padStart';
 import '@floating-ui/dom';
 import './OrTooltip.vue_rollup-plugin-vue_styles.0-0aca0c11.js';

package/dist/esm/v2/{types-6792dff8.js → types-e481ff6f.js}

@@ -5,7 +5,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { _ as __vue_component__$4 } from './OrTeleport.vue2-424c7f33.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-5aa9dc05.js';
-import { _ as __vue_component__$2 } from './OrIconButton-85a6de2c.js';
+import { _ as __vue_component__$2 } from './OrIconButton-311050dc.js';
 import { _ as __vue_component__$3 } from './OrLoader-b0c381f9.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -374,7 +374,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = ".or-toast--transition-slide-enter-active[data-v-9c5633de],.or-toast--transition-slide-leave-active[data-v-9c5633de]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-9c5633de],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-9c5633de]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-9c5633de],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-9c5633de]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-9c5633de],.or-toast--transition-fade-leave-active[data-v-9c5633de]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-9c5633de],.or-toast--transition-fade-leave-to[data-v-9c5633de]{opacity:0}";
+var css_248z = ".or-toast--transition-slide-enter-active[data-v-e920630e],.or-toast--transition-slide-leave-active[data-v-e920630e]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-e920630e],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-e920630e]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-e920630e],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-e920630e]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-e920630e],.or-toast--transition-fade-leave-active[data-v-e920630e]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-e920630e],.or-toast--transition-fade-leave-to[data-v-e920630e]{opacity:0}";
 styleInject(css_248z);
 
 /* script */
@@ -423,7 +423,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-9c5633de";
+const __vue_scope_id__ = "data-v-e920630e";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v3/{OrAvatar-07fe6686.js → OrAvatar-554347e6.js}

@@ -13,74 +13,93 @@ var AvatarSize;
 })(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["Auto"] = "auto";
+  AvatarColor["Blue"] = "blue";
+  AvatarColor["Grey"] = "grey";
+  AvatarColor["Green"] = "green";
+  AvatarColor["Yellow"] = "yellow";
+  AvatarColor["Red"] = "red";
 })(AvatarColor || (AvatarColor = {}));
 
-const AvatarRoot = [
+const Avatar = [
 // Layout
-'flex', 'items-center', 'justify-center', 'overflow-hidden',
-// Box
-'rounded-full',
+'layout-inline-row justify-center',
+// Overflow
+'overflow-hidden',
 // Interactivity
-'interactivity-none'];
-const AvatarImage = [
-// Box
-'w-full', 'h-full', 'object-cover'];
-const AvatarRootSizes = {
-  'xl': [
+'interactivity-none',
+// Shape
+'rounded-full'];
+const AvatarSizes = {
+  [AvatarSize.XL]: [
   // Box
   'w-[80px]', 'h-[80px]'],
-  'l': [
+  [AvatarSize.L]: [
   // Box
   'w-[64px]', 'h-[64px]'],
-  'm': [
+  [AvatarSize.M]: [
   // Box
   'w-[40px]', 'h-[40px]'],
-  's': [
+  [AvatarSize.S]: [
   // Box
   'w-[32px]', 'h-[32px]'],
-  'xs': [
+  [AvatarSize.XS]: [
   // Box
   'w-[24px]', 'h-[24px]']
 };
-const AvatarRootColors = {
-  [AvatarColor.blue]: [
+const AvatarIconSizes = {
+  [AvatarSize.XL]: [
+  // Typography
+  'text-[40px]'],
+  [AvatarSize.L]: [
+  // Typography
+  'text-[32px]'],
+  [AvatarSize.M]: [
+  // Typography
+  'text-[20px]'],
+  [AvatarSize.S]: [
+  // Typography
+  'text-[16px]'],
+  [AvatarSize.XS]: [
+  // Typography
+  'text-[16px]']
+};
+const AvatarTextSizes = {
+  [AvatarSize.XL]: [
+  // Typography
+  'typography-headline-1'],
+  [AvatarSize.L]: [
+  // Typography
+  'typography-headline-1'],
+  [AvatarSize.M]: [
+  // Typography
+  'typography-body-1-bold'],
+  [AvatarSize.S]: [
+  // Typography
+  'typography-body-1-bold'],
+  [AvatarSize.XS]: [
+  // Typography
+  'typography-caption-semibold']
+};
+const AvatarColors = {
+  [AvatarColor.Auto]: [
   // Theme
-  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
-  [AvatarColor.yellow]: [
+  'theme-foreground-base', 'dark:theme-foreground-base-dark'],
+  [AvatarColor.Blue]: [
   // Theme
-  'theme-preset-1-warning', 'dark:theme-preset-1-warning-dark'],
-  [AvatarColor.red]: [
+  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
+  [AvatarColor.Grey]: [
   // Theme
-  'theme-preset-1-error', 'dark:theme-preset-1-error-dark'],
-  [AvatarColor.green]: [
+  'theme-preset-1-secondary', 'dark:theme-preset-1-secondary-dark'],
+  [AvatarColor.Green]: [
   // Theme
   'theme-preset-1-success', 'dark:theme-preset-1-success-dark'],
-  [AvatarColor.grey]: [
+  [AvatarColor.Yellow]: [
   // Theme
-  'theme-preset-1-secondary', 'dark:theme-preset-1-secondary-dark'],
-  [AvatarColor.auto]: [
+  'theme-preset-1-warning', 'dark:theme-preset-1-warning-dark'],
+  [AvatarColor.Red]: [
   // 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]']
+  'theme-preset-1-error', 'dark:theme-preset-1-error-dark']
 };
 
 var script = defineComponent({
@@ -93,69 +112,62 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
-    size: {
-      type: String,
-      default: AvatarSize.M
-    },
     icon: {
       type: String,
       default: undefined
     },
+    size: {
+      type: String,
+      default: AvatarSize.M
+    },
     color: {
       type: String,
-      default: AvatarColor.auto,
-      required: false
+      default: AvatarColor.Auto
     },
     colorSalt: {
       type: String,
-      default: undefined,
-      required: false
+      default: undefined
     }
   },
   expose: ['root'],
   setup(props) {
     // Refs
     const root = ref();
-    const isIcon = computed(() => {
-      return !props.icon;
-    });
     // Styles
-    const rootStyles = computed(() => ['or-avatar-v3', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], ...(isIcon.value ? AvatarRootAbbreviationSizes[props.size] : AvatarRootIconSizes[props.size])]);
-    const imageStyles = computed(() => [...AvatarImage]);
+    const rootStyles = computed(() => ['or-avatar-v3', ...Avatar, ...AvatarSizes[props.size], ...(props.icon ? AvatarIconSizes[props.size] : AvatarTextSizes[props.size]), ...AvatarColors[props.color]]);
     // Effects
     watchPostEffect(() => {
       var _a;
       const rootElement = root.value;
-      if (rootElement && !props.src && props.color === AvatarColor.auto) {
+      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
+          color: props.color,
+          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : ''))
         });
       }
     });
     return {
       root,
-      rootStyles,
-      imageStyles
+      rootStyles
     };
   }
 });
 
 const _hoisted_1 = ["src"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_icon = resolveComponent("or-icon");
+  const _component_OrIcon = resolveComponent("OrIcon");
   return openBlock(), createElementBlock("div", {
     ref: "root",
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default", {}, () => [_ctx.src ? (openBlock(), createElementBlock("img", {
     key: 0,
-    class: normalizeClass(_ctx.imageStyles),
+    class: normalizeClass(['w-full', 'h-full', 'object-cover']),
     src: _ctx.src,
     alt: ''
-  }, null, 10 /* CLASS, PROPS */, _hoisted_1)) : _ctx.icon ? (openBlock(), createBlock(_component_or_icon, {
+  }, null, 8 /* PROPS */, _hoisted_1)) : _ctx.icon ? (openBlock(), createBlock(_component_OrIcon, {
     key: 1,
     icon: _ctx.icon,
-    size: "inherit"
+    size: 'inherit'
   }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)])], 2 /* CLASS */);
 }
 

package/dist/esm/v3/{OrBottomSheet-efca7190.js → OrBottomSheet-98aec82b.js}

@@ -3,7 +3,7 @@ import { ref, unref, computed, defineComponent, toRef, watch } from 'vue-demi';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { s as script$1 } from './OrOverlay-489fdf76.js';
+import { s as script$1 } from './OrOverlay-99e696e8.js';
 import { u as useTheme } from './useTheme-e23d13c8.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, createElementBlock, normalizeClass, createCommentVNode, renderSlot } from 'vue';
 
@@ -13,47 +13,6 @@ var BottomSheetVariant;
   BottomSheetVariant["Advanced"] = "advanced";
 })(BottomSheetVariant || (BottomSheetVariant = {}));
 
-const BottomSheet = [
-// Position
-'fixed', 'left-none', 'right-none', 'bottom-none',
-// Layout
-'layout-column',
-// Shape
-'rounded-t-lg',
-// Theme
-'theme-background-base', 'dark:theme-background-base-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark',
-// Elevation
-'shadow-contextual', 'dark:shadow-contextual-dark'];
-const BottomSheetVariants = {
-  'basic': [],
-  'advanced': [
-  // Box
-  'max-h-[50%]',
-  // Animation
-  'transition-[min-height]', 'transition-[max-height]']
-};
-const BottomSheetHandle = [
-// Layout
-'layout-row justify-center',
-// Box
-'after:w-2xl', 'after:h-xs',
-// Shape
-'after:rounded-full',
-// Spacing
-'px-sm', 'py-sm',
-// Interactivity
-'cursor-grab',
-// Theme
-'after:bg-outline', 'after:dark:bg-outline'];
-const BottomSheetHeader = [
-// Layout
-'empty:hidden',
-// Spacing
-'px-lg', 'py-md',
-// Typography
-'typography-headline-3'];
-const BottomSheetContent = ['grow'];
-
 function useBottomSheetSwipeState(root, content, fullscreen, variant, close) {
   const inlineSwipingStyles = ref({});
   const skipSwipe = ref(false);
@@ -119,6 +78,48 @@ function useBottomSheetSwipeState(root, content, fullscreen, variant, close) {
   };
 }
 
+const BottomSheet = [
+// Position
+'fixed', 'left-none', 'right-none', 'bottom-none',
+// Layout
+'layout-column',
+// Shape
+'rounded-t-lg',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-background-base', 'dark:theme-background-base-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const BottomSheetVariants = {
+  [BottomSheetVariant.Basic]: [],
+  [BottomSheetVariant.Advanced]: [
+  // Box
+  'max-h-[50%]',
+  // Transition
+  'transition-[min-height]', 'transition-[max-height]']
+};
+const BottomSheetHandle = [
+// Layout
+'layout-row justify-center',
+// Interactivity
+'interactivity-auto !cursor-grab',
+// Box
+'after:w-2xl', 'after:h-xs',
+// Spacing
+'px-sm', 'py-sm',
+// Shape
+'after:rounded-full',
+// Theme
+'after:bg-outline', 'after:dark:bg-outline'];
+const BottomSheetHeader = [
+// Layout (empty)
+'empty:hidden',
+// Spacing
+'px-lg', 'py-md',
+// Typography
+'typography-headline-3'];
+
 var script = defineComponent({
   name: 'OrBottomSheet',
   components: {
@@ -141,6 +142,10 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const content = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
+    const handleStyles = computed(() => [...BottomSheetHandle]);
+    const headerStyles = computed(() => [...BottomSheetHeader]);
     // State
     const {
       state,
@@ -173,17 +178,11 @@ var script = defineComponent({
       }
     });
     // #endregion
-    // Styles
-    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
-    const handleStyles = computed(() => [...BottomSheetHandle]);
-    const headerStyles = computed(() => [...BottomSheetHeader]);
-    const contentStyles = computed(() => [...BottomSheetContent, fullscreen.value || props.variant === BottomSheetVariant.Basic ? 'overflow-y-auto' : 'overflow-hidden']);
     return {
       root,
       content,
       rootStyles,
       rootInlineStyles,
-      contentStyles,
       handleStyles,
       headerStyles,
       state,
@@ -213,7 +212,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.headerStyles)
     }, [renderSlot(_ctx.$slots, "header")], 2 /* CLASS */), createElementVNode("div", {
       ref: "content",
-      class: normalizeClass(_ctx.contentStyles)
+      class: normalizeClass(['grow', _ctx.fullscreen || _ctx.variant === 'basic' ? 'overflow-y-auto' : 'overflow-hidden'])
     }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 16 /* FULL_PROPS */)]),
 
     _: 3 /* FORWARDED */

package/dist/esm/v3/{OrButton-c2b6aa9e.js → OrButton-4a3c3e7b.js}

@@ -22,38 +22,40 @@ var ButtonType;
   ButtonType["Reset"] = "reset";
 })(ButtonType || (ButtonType = {}));
 
-const ButtonRoot = [
+const Button = [
 // Layout
 'layout-inline-row justify-center',
-// Shape
-'rounded-md',
+// Overflow
+'overflow-hidden',
 // Interactivity
 'interactivity-auto',
+// Shape
+'rounded-md',
 // Typography
 'typography-button'];
-const ButtonRootVariants = {
-  'contained': [
+const ButtonVariants = {
+  [ButtonVariant.Contained]: [
   // Box
   'min-w-[96px]',
   // Spacing
   'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm',
-  // Theme
+  // Elevation (enabled)
   'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
-  'outlined': [
+  [ButtonVariant.Outlined]: [
   // Box
   'min-w-[96px]',
   // Spacing
   'px-md* md:px-md*', 'py-sm+* md:py-sm*', 'gap-sm+ md:gap-sm'],
-  'text': [
+  [ButtonVariant.Text]: [
   // Box
   'min-w-[96px]',
   // Spacing
   'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm'],
-  'link': [
+  [ButtonVariant.Link]: [
   // Spacing
   'gap-xs']
 };
-const ButtonRootColors = {
+const ButtonColors = {
   'primary-contained': [
   // Theme
   'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
@@ -133,7 +135,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-button-v3', ...ButtonRoot, ...ButtonRootVariants[props.variant], ...ButtonRootColors[`${props.color}-${props.variant}`], props.loading && 'interactivity-none']);
+    const rootStyles = computed(() => ['or-button-v3', ...Button, ...ButtonVariants[props.variant], ...ButtonColors[`${props.color}-${props.variant}`], props.loading && 'interactivity-none']);
     return {
       root,
       rootStyles,