@onereach/ui-components 4.18.1 → 4.18.2-beta.3104.0

package/dist/esm/v2/{OrAvatar-d1c82ab9.js → OrAvatar-dd0e1e3b.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,50 +112,43 @@ 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
     };
   }
 });
@@ -153,18 +165,18 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles
   }, [_vm._t("default", function () {
-    return [_vm.src ? _c('img', {
-      class: _vm.imageStyles,
+    return [_vm.src ? [_c('img', {
+      class: ['w-full', 'h-full', 'object-cover'],
       attrs: {
         "src": _vm.src,
         "alt": ''
       }
-    }) : _vm.icon ? _c('or-icon', {
+    })] : _vm.icon ? [_c('OrIcon', {
       attrs: {
         "icon": _vm.icon,
-        "size": "inherit"
+        "size": 'inherit'
       }
-    }) : _vm._e()];
+    })] : _vm._e()];
   })], 2);
 };
 var __vue_staticRenderFns__ = [];

package/dist/esm/v2/{OrBottomSheet-67e6d85e.js → OrBottomSheet-71ec1799.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 { _ as __vue_component__$1 } from './OrOverlay-948346df.js';
+import { _ as __vue_component__$1 } from './OrOverlay-86a35726.js';
 import { u as useTheme } from './useTheme-e23d13c8.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -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,52 @@ function useBottomSheetSwipeState(root, content, fullscreen, variant, close) {
   };
 }
 
+const BottomSheet = [
+// Position
+'fixed', 'left-none', 'right-none', 'bottom-none',
+// Layout
+'layout-column',
+// Overflow
+'overflow-hidden',
+// Interactivity
+'interactivity-none',
+// 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 +146,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 +182,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,
@@ -217,7 +220,7 @@ var __vue_render__ = function () {
     class: _vm.headerStyles
   }, [_vm._t("header")], 2), _vm._v(" "), _c('div', {
     ref: "content",
-    class: _vm.contentStyles
+    class: ['grow', _vm.fullscreen || _vm.variant === 'basic' ? 'overflow-y-auto' : 'overflow-hidden']
   }, [_vm._t("default")], 2)], 2)]) : _vm._e();
 };
 var __vue_staticRenderFns__ = [];

package/dist/esm/v2/{OrButton-9622e713.js → OrButton-a23ee9f0.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,

package/dist/esm/v2/{OrCardCollection-ca6d1e3c.js → OrCardCollection-fd20eb66.js}

@@ -1,15 +1,36 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
-import { _ as __vue_component__$2 } from './OrIconButton-85a6de2c.js';
-import { _ as __vue_component__$4 } from './OrSearch-7ad39657.js';
+import { _ as __vue_component__$2 } from './OrIconButton-26b42bb2.js';
+import { _ as __vue_component__$4 } from './OrSearch-45b9f2aa.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$3 } from './OrSorting-c61855a7.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { _ as __vue_component__$3 } from './OrSorting-ef99ef70.js';
 
-const CardCollectionRoot = [
+var CardCollectionView;
+(function (CardCollectionView) {
+  CardCollectionView["Grid"] = "grid";
+  CardCollectionView["List"] = "list";
+})(CardCollectionView || (CardCollectionView = {}));
+const gridView = {
+  view: CardCollectionView.Grid,
+  icon: 'grid_view'
+};
+const listView = {
+  view: CardCollectionView.List,
+  icon: 'view_agenda'
+};
+const defaultViewModes = [gridView, listView];
+
+const CardCollection = [
 // Layout
 'layout-column',
+// Overflow
+'overflow-hidden',
+// Interactivity
+'interactivity-none',
+// Box
+'max-h-full',
 // Spacing
-'gap-md', 'max-h-full'];
+'gap-md'];
 const CardCollectionToolbar = [
 // Layout
 'layout-row justify-between',
@@ -25,15 +46,19 @@ const CardCollectionToolbarPanel = [
 const CardCollectionContent = [
 // Layout
 'grid',
-// Spacing
-'gap-sm md:gap-md',
 // Overflow
-'overflow-y-auto', 'p-xs*', '-m-xs*', '-mr-[7px]'];
+'overflow-y-auto',
+// Interactivity
+'interactivity-none',
+// Spacing
+'-mx-sm', '-my-sm', '-mr-[calc(theme(spacing.sm) * 2)]', 'px-sm', 'py-sm', 'gap-sm md:gap-md'];
 const CardCollectionContentViews = {
-  'grid': [
+  [CardCollectionView.Grid]: [
   // Layout
-  'grid-cols-1', 'md:grid-cols-5'],
-  'list': ['grid-cols-1']
+  'grid-cols-1 md:grid-cols-5'],
+  [CardCollectionView.List]: [
+  // Layout
+  'grid-cols-1']
 };
 
 var script$1 = defineComponent({
@@ -49,9 +74,10 @@ var script$1 = defineComponent({
     }
   },
   setup(props) {
-    const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
+    // Styles
+    const rootStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
     return {
-      contentStyles
+      rootStyles
     };
   }
 });
@@ -65,7 +91,7 @@ var __vue_render__$1 = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('div', {
-    class: _vm.contentStyles
+    class: _vm.rootStyles
   }, [_vm._l(_vm.items, function (item) {
     return _vm._t("item", function () {
       return [_vm._v("\n    " + _vm._s(item.key) + "\n  ")];
@@ -96,21 +122,6 @@ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$1
 }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
 
-var DefaultCardCollectionViews;
-(function (DefaultCardCollectionViews) {
-  DefaultCardCollectionViews["Grid"] = "grid";
-  DefaultCardCollectionViews["List"] = "list";
-})(DefaultCardCollectionViews || (DefaultCardCollectionViews = {}));
-const gridView = {
-  view: DefaultCardCollectionViews.Grid,
-  icon: 'grid_view'
-};
-const listView = {
-  view: DefaultCardCollectionViews.List,
-  icon: 'view_agenda'
-};
-const defaultViewModes = [gridView, listView];
-
 var script = defineComponent({
   name: 'OrCardCollection',
   components: {
@@ -159,7 +170,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-card-collection-v3', ...CardCollectionRoot]);
+    const rootStyles = computed(() => ['or-card-collection-v3', ...CardCollection]);
     const toolbarStyles = computed(() => [...CardCollectionToolbar]);
     const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
     // State
@@ -298,4 +309,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 
-export { DefaultCardCollectionViews as D, __vue_component__ as _, defaultViewModes as d, gridView as g, listView as l };
+export { CardCollectionView as C, __vue_component__ as _, defaultViewModes as d, gridView as g, listView as l };

package/dist/esm/v2/{OrCheckboxGroup-eda833b1.js → OrCheckboxGroup-a04f27fe.js}

@@ -3,7 +3,7 @@ import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$1 } from './OrCheckboxTree-231ba2b1.js';
+import { _ as __vue_component__$1 } from './OrCheckboxTree-f48db82f.js';
 import { _ as __vue_component__$2, F as FormGroupDirection } from './OrFormGroup-29a514db.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrCheckboxTree-231ba2b1.js → OrCheckboxTree-f48db82f.js}

@@ -3,7 +3,7 @@ import { defineComponent, computed, toRef, watch } from 'vue-demi';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$3 } from './OrButton-9622e713.js';
+import { _ as __vue_component__$3 } from './OrButton-a23ee9f0.js';
 import { _ as __vue_component__$2 } from './OrCheckbox-db66b4ea.js';
 import { _ as __vue_component__$1 } from './OrIcon-d35a84d8.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrCode-996daa11.js → OrCode-83585e00.js}

@@ -15,11 +15,11 @@ import { u as useTheme } from './useTheme-e23d13c8.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$3 } from './OrIconButton-85a6de2c.js';
+import { _ as __vue_component__$3 } from './OrIconButton-26b42bb2.js';
 import { _ as __vue_component__$4 } from './OrInputBox-7dc5b9e9.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { _ as __vue_component__$5 } from './OrLabel-63380256.js';
-import { _ as __vue_component__$6 } from './OrModal-5626eeee.js';
+import { _ as __vue_component__$6 } from './OrModal-e3b0e84b.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var CodeLanguage;

package/dist/esm/v2/{OrConfirm-e4f8c958.js → OrConfirm-57b5f6e2.js}

@@ -4,9 +4,9 @@ import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-9622e713.js';
-import { _ as __vue_component__$3 } from './OrInput-a7e317b8.js';
-import { _ as __vue_component__$1 } from './OrOverlay-948346df.js';
+import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-a23ee9f0.js';
+import { _ as __vue_component__$3 } from './OrInput-ff29d8d3.js';
+import { _ as __vue_component__$1 } from './OrOverlay-86a35726.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var ConfirmType;
@@ -15,23 +15,23 @@ var ConfirmType;
   ConfirmType["C"] = "c";
 })(ConfirmType || (ConfirmType = {}));
 
-const ConfirmRoot = [
+const Confirm = [
 // Position
 'fixed md:static', 'left-none', 'right-none', 'bottom-none',
 // Layout
 'layout-column',
 // Box
 'w-full md:w-[320px]',
-// Shape
-'rounded-0 md:rounded-md',
 // Spacing
 'px-lg', 'py-lg', 'gap-md',
+// Shape
+'md:rounded-md',
+// Elevation
+'shadow-modal', 'dark:shadow-modal-dark',
 // Typography
 'typography-body-2-regular',
 // Theme
-'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark',
-// Elevation
-'shadow-modal', 'dark:shadow-modal-dark'];
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
 const ConfirmHeader = [
 // Layout
 'layout-row justify-between',
@@ -55,7 +55,7 @@ const ConfirmFooterTypes = {
 };
 const ConfirmFooterButtons = [
 // Layout
-'!grow',
+'block !grow',
 // Box
 'w-auto md:w-[128px]'];
 
@@ -177,7 +177,7 @@ var script = defineComponent({
     });
     whenever(logicAnd(enter, isInputActive), () => confirm());
     // Styles
-    const rootStyles = computed(() => ['or-confirm-v3', ...ConfirmRoot]);
+    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
     const headerStyles = computed(() => [...ConfirmHeader]);
     const inputBoxStyles = computed(() => [...ConfirmInput]);
     const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);

package/dist/esm/v2/{OrDatePicker-20d1ed3e.js → OrDatePicker-4b34a841.js}

@@ -4,15 +4,15 @@ import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$1, a as __vue_component__$2, b as __vue_component__$3, c as __vue_component__$4, d as __vue_component__$5, e as __vue_component__$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-dd9de00f.js';
+import { _ as __vue_component__$1, a as __vue_component__$2, b as __vue_component__$3, c as __vue_component__$4, d as __vue_component__$5, e as __vue_component__$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-4341ea98.js';
 import { _ as __vue_component__$7 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$8 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$a } from './OrIconButton-85a6de2c.js';
+import { _ as __vue_component__$a } from './OrIconButton-26b42bb2.js';
 import { _ as __vue_component__$9 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$b } from './OrInputBox-7dc5b9e9.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { _ as __vue_component__$c } from './OrLabel-63380256.js';
-import { _ as __vue_component__$d } from './OrPopover-c511273a.js';
+import { _ as __vue_component__$d } from './OrPopover-334d1fbd.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const DatePicker = [