@onereach/ui-components 10.0.2 → 10.1.0-beta.4242.0

package/dist/esm/v2/index.js

@@ -10,12 +10,12 @@ export { _ as OrButtonV3 } from './OrButton-e4e85817.js';
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant } from './OrButton.vue_rollup-plugin-vue_script-199bb600.js';
 export { _ as OrCard } from './OrCard-c44d9783.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-3e5e57aa.js';
-export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-dae2f81d.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-cd033a01.js';
 export { C as CardPadding, _ as OrCardV3 } from './OrCard-42359715.js';
 export { _ as OrCheckbox } from './OrCheckbox-3337d903.js';
-export { _ as OrCheckboxGroupV3 } from './OrCheckboxGroup-4c3c1418.js';
-export { _ as OrCheckboxTreeV3 } from './OrCheckboxTree-9613ade5.js';
-export { _ as OrCheckboxV3 } from './OrCheckbox-2e14d995.js';
+export { _ as OrCheckboxGroupV3 } from './OrCheckboxGroup-4a817c00.js';
+export { _ as OrCheckboxTreeV3 } from './OrCheckboxTree-338b5ff4.js';
+export { _ as OrCheckboxV3 } from './OrCheckbox-8cdfdc56.js';
 export { _ as OrChip } from './OrChip-289730fb.js';
 export { _ as OrChips } from './OrChips-0bb33a9f.js';
 export { _ as OrCode, O as OrCodeLanguages } from './OrCode-20467892.js';
@@ -24,23 +24,24 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-bab23c65.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-06a15a0c.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 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-af6eb211.js';
-export { _ as OrCombinedInputV3 } from './OrCombinedInput-e3f4498e.js';
+export { _ as OrCombinedInputV3 } from './OrCombinedInput-79d57e49.js';
 export { _ as OrConfirm } from './OrConfirm-680e049e.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-4561fd88.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-121af86c.js';
 export { _ as OrContextMenuV3 } from './OrContextMenu-3548361c.js';
-export { _ as OrDateFormatV3 } from './OrDateFormat-7b761b0f.js';
-export { _ as OrDatePickerV3 } from './OrDatePicker-847e9db1.js';
-export { _ as OrDateRangePickerV3 } from './OrDateRangePicker-01c5a09c.js';
-export { _ as OrDateTimeFormatV3 } from './OrDateTimeFormat-80ff6397.js';
+export { _ as OrDateFormatV3 } from './OrDateFormat-a17b5b23.js';
+export { _ as OrDatePickerV3 } from './OrDatePicker-67c281d7.js';
+export { _ as OrDateRangePickerV3 } from './OrDateRangePicker-4d776fe2.js';
+export { _ as OrDateTimeFormatV3 } from './OrDateTimeFormat-70e61dd6.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-464f84bd.js';
-export { _ as OrDateTimePickerV3 } from './OrDateTimePicker-c68aacf9.js';
-export { _ as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-2f7efc41.js';
-export { D as DateTimePickerTimeFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-a1d75821.js';
+export { _ as OrDateTimePickerV3 } from './OrDateTimePicker-cb46a36b.js';
+export { _ as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-3fa9a7c7.js';
+export { D as DateFormat, L as Locale, T as TimeFormat } from './OrDateTimePicker.vue_rollup-plugin-vue_script-b7ca34e8.js';
+export { D as DateTimePickerDateFormat, a as DateTimePickerTimeFormat, f as formatDate, b as formatTime, g as getDatePlaceholder, c as getTimePlaceholder } from './getTimePlaceholder-9d18b5ac.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
 export { D as DropAreaSize, _ as OrDropAreaV3 } from './OrDropArea-a2977bb0.js';
@@ -53,7 +54,7 @@ export { _ as OrErrorV3 } from './OrError-b25d782d.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-c76c70e4.js';
 export { F as FabColor, _ as OrFabV3 } from './OrFab-90795cdb.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-448fdc12.js';
-export { F as FormGroupDirection, _ as OrFormGroupV3 } from './OrFormGroup-d8b290f4.js';
+export { F as FormGroupDirection, _ as OrFormGroupV3 } from './OrFormGroup-936aa0ff.js';
 export { _ as OrHint } from './OrHint-7eadc91e.js';
 export { _ as OrHintV3 } from './OrHint-2fe1157b.js';
 export { _ as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-69c5cadc.js';
@@ -66,13 +67,13 @@ export { _ as OrInlineTextareaV3 } from './OrInlineTextarea-0f10c3db.js';
 export { _ as OrInput } from './OrInput-7a12709e.js';
 export { _ as OrInputBoxV3 } from './OrInputBox-1a8fda9b.js';
 export { a as InputBoxSize, I as InputBoxVariant } from './OrInputBox.vue_rollup-plugin-vue_script-8c39b9ca.js';
-export { I as InputType, _ as OrInputV3 } from './OrInput-43f90e4a.js';
+export { I as InputType, _ as OrInputV3 } from './OrInput-431ae55a.js';
 export { _ as OrLabel } from './OrLabel-fcceec1b.js';
-export { L as LabelVariant, _ as OrLabelV3 } from './OrLabel-113eae8d.js';
+export { L as LabelVariant, _ as OrLabelV3 } from './OrLabel-b0805497.js';
 export { L as LinkColor, _ as OrLinkV3 } from './OrLink-30283089.js';
 export { _ as OrList } from './OrList-34f50cb3.js';
 export { _ as OrListOfInputs } from './OrListOfInputs-c019852c.js';
-export { _ as OrListV3 } from './OrList-aae21920.js';
+export { _ as OrListV3 } from './OrList-3078c5cd.js';
 export { _ as OrListItem } from './OrListItem-9654fe5b.js';
 export { L as LoaderViews, _ as OrLoader } from './OrLoader-3eea4889.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, _ as OrLoaderV3 } from './OrLoader-4ac49224.js';
@@ -94,17 +95,17 @@ export { _ as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './
 export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-9d0cbafa.js';
 export { _ as OrRadio } from './OrRadio-811ad5a4.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
-export { _ as OrRadioGroupV3 } from './OrRadioGroup-038ad285.js';
-export { _ as OrRadioV3 } from './OrRadio-c6aec5c3.js';
+export { _ as OrRadioGroupV3 } from './OrRadioGroup-c4135a8f.js';
+export { _ as OrRadioV3 } from './OrRadio-fd1fbde2.js';
 export { _ as OrRangeSliderV3 } from './OrRangeSlider-5828b1fa.js';
 export { _ as OrRatingV3 } from './OrRating-1d0088f6.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-a3cbaa60.js';
-export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditor-6a2785c0.js';
+export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditor-85f52908.js';
 export { _ as OrSearch } from './OrSearch-525e988d.js';
-export { _ as OrSearchV3 } from './OrSearch-5dd1820f.js';
+export { _ as OrSearchV3 } from './OrSearch-493eb34d.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-c51c8768.js';
 export { _ as OrSelect } from './OrSelect-6dafd1bc.js';
-export { _ as OrSelectV3 } from './OrSelect-bf279168.js';
+export { _ as OrSelectV3 } from './OrSelect-8acf0bfe.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-054b26c6.js';
 export { _ as OrSidebarV3, S as SidebarPlacement } from './props-334acbec.js';
 export { _ as OrSkeletonCircle } from './OrSkeletonCircle-c4bf0e34.js';
@@ -121,25 +122,25 @@ export { _ as OrSortingV3 } from './OrSorting-9f4cab5c.js';
 export { _ as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatus-d723d9ae.js';
 export { _ as OrStepper } from './OrStepper-bee99dd2.js';
 export { _ as OrSwitch } from './OrSwitch-2bc20d60.js';
-export { _ as OrSwitchV3 } from './OrSwitch-b636a4e7.js';
+export { _ as OrSwitchV3 } from './OrSwitch-b1c4a235.js';
 export { _ as OrTab } from './OrTab-58821c9b.js';
 export { _ as OrTabHeaderItem } from './OrTabHeaderItem-424f2986.js';
 export { _ as OrTabV3 } from './OrTab-1b10597d.js';
 export { _ as OrTabs } from './OrTabs-62e7e478.js';
 export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-35c50102.js';
 export { _ as OrTag } from './OrTag-53599b71.js';
-export { _ as OrTagInputV3 } from './OrTagInput-dbd9096c.js';
+export { _ as OrTagInputV3 } from './OrTagInput-cc597ae0.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-5f3f948a.js';
 export { _ as OrTagsV3, T as TagsOverflow } from './OrTags-0ea04689.js';
 export { _ as OrTeleport } from './OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-424c7f33.js';
 export { _ as OrTextV3 } from './OrText-cab6adea.js';
 export { _ as OrTextarea } from './OrTextarea-9febab19.js';
-export { _ as OrTextareaV3 } from './OrTextarea-56e2159d.js';
+export { _ as OrTextareaV3 } from './OrTextarea-ba7551a4.js';
 export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-cca2d280.js';
-export { _ as OrTimeFormatV3 } from './OrTimeFormat-6e82fcd3.js';
-export { _ as OrTimePickerV3 } from './OrTimePicker-e18d9265.js';
-export { _ as OrTimeRangePickerV3 } from './OrTimeRangePicker-e46462b3.js';
+export { _ as OrTimeFormatV3 } from './OrTimeFormat-bd9582b8.js';
+export { _ as OrTimePickerV3 } from './OrTimePicker-7878d2c8.js';
+export { _ as OrTimeRangePickerV3 } from './OrTimeRangePicker-bee857dc.js';
 export { _ as OrToast, a as OrToastContainer } from './OrToastContainer-21eaead8.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-c6b7c601.js';
@@ -180,7 +181,6 @@ import '@codemirror/lang-markdown';
 import '@codemirror/language';
 import '@lezer/highlight';
 import '@vueuse/math';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-bd0836fd.js';
 import 'lodash/padStart';
 import './OrEditorTabsItem-af0b7110.js';
 import '@floating-ui/dom';

package/dist/esm/v3/{OrCardCollection-7eecfe1b.js → OrCardCollection-853aaa1c.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
 import { s as script$2 } from './OrIconButton-bc7ebce6.js';
 import { s as script$5 } from './OrLoader-5e2f359b.js';
-import { s as script$4 } from './OrSearch-42922cb7.js';
+import { s as script$4 } from './OrSearch-169317ea.js';
 import { s as script$3 } from './OrSorting-c8fa584a.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createElementVNode, createBlock, createCommentVNode, createVNode, normalizeProps, guardReactiveProps, withCtx } from 'vue';
 

package/dist/esm/v3/{OrCheckbox-91bc37d7.js → OrCheckbox-637049b9.js}

@@ -6,7 +6,7 @@ import { i as isVoid } from './isVoid-36a1480c.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { s as script$1, L as LabelVariant } from './OrLabel-02aa56ad.js';
+import { s as script$1, L as LabelVariant } from './OrLabel-59d09591.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrCheckboxGroup-ba429495.js → OrCheckboxGroup-4f9235bb.js}

@@ -4,8 +4,8 @@ import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { s as script$1 } from './OrCheckboxTree-e3b760d1.js';
-import { s as script$2, F as FormGroupDirection } from './OrFormGroup-17c3cc0a.js';
+import { s as script$1 } from './OrCheckboxTree-129603b3.js';
+import { s as script$2, F as FormGroupDirection } from './OrFormGroup-230f2015.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
 
 var script = defineComponent({

package/dist/esm/v3/{OrCheckboxTree-e3b760d1.js → OrCheckboxTree-129603b3.js}

@@ -5,7 +5,7 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$3 } from './OrButton-c95aef65.js';
-import { s as script$2 } from './OrCheckbox-91bc37d7.js';
+import { s as script$2 } from './OrCheckbox-637049b9.js';
 import { s as script$1 } from './OrIcon-c446d072.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, createElementVNode, createBlock, withCtx, createVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, renderList } from 'vue';
 

package/dist/esm/v3/{OrCode-590736cc.js → OrCode-79ec7fc2.js}

@@ -15,7 +15,7 @@ import { s as script$6 } from './OrModal-91ceee4d.js';
 import { s as script$2 } from './OrError-331220bc.js';
 import { s as script$3 } from './OrHint-262c8217.js';
 import { s as script$4 } from './OrInputBox-287f97ba.js';
-import { s as script$5 } from './OrLabel-02aa56ad.js';
+import { s as script$5 } from './OrLabel-59d09591.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString, createElementVNode, withDirectives, createBlock, createCommentVNode, vShow, withModifiers, createSlots } from 'vue';
 
 const Code = [

package/dist/esm/v3/{OrCombinedInput-1a22e413.js → OrCombinedInput-391b1de9.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed } from 'vue-demi';
 import { s as script$1 } from './OrError-331220bc.js';
 import { s as script$2 } from './OrHint-262c8217.js';
 import { a as InputBoxSize } from './OrInputBox-287f97ba.js';
-import { s as script$3 } from './OrLabel-02aa56ad.js';
+import { s as script$3 } from './OrLabel-59d09591.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, withDirectives, vShow, createVNode } from 'vue';
 
 const CombinedInput = [

package/dist/esm/v3/{OrConfirm-fdc47d05.js → OrConfirm-7333b2ff.js}

@@ -6,7 +6,7 @@ import { u as usePopoverState } from './usePopoverState-5033b9cb.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$2, a as ButtonColor } from './OrButton-c95aef65.js';
-import { s as script$3 } from './OrInput-89bb16d6.js';
+import { s as script$3 } from './OrInput-89162a71.js';
 import { s as script$1 } from './OrOverlay-19bd1352.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from 'vue';
 

package/dist/esm/v3/OrDateFormat-3ef8c5c3.js

@@ -0,0 +1,73 @@
+import { defineComponent, ref, computed, inject } from 'vue-demi';
+import { D as DateFormat$1, L as Locale } from './OrDateTimePicker-c3544059.js';
+import './OrDateTimePickerTimeSelect-62e04a6c.js';
+import { D as DateTimePickerDateFormat, f as formatDate } from './getTimePlaceholder-9d18b5ac.js';
+import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString } from 'vue';
+
+const DateFormat = [
+// Layout
+'inline'];
+
+var script = defineComponent({
+  name: 'OrDateFormat',
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-date-format-v3', ...DateFormat]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(DateFormat$1, DateTimePickerDateFormat.Short);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
+    return {
+      root,
+      rootStyles,
+      resolvedFormat,
+      resolvedLocale,
+      formatDate
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.modelValue ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [createTextVNode(toDisplayString(_ctx.formatDate(_ctx.modelValue, _ctx.resolvedFormat, _ctx.resolvedLocale)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-date-format-v3/OrDateFormat.vue";
+
+export { script as s };

package/dist/esm/v3/{OrDatePicker-a65e349c.js → OrDatePicker-1d21985d.js}

@@ -1,20 +1,20 @@
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import './OrDateTimePicker-b2749f72.js';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6 } from './OrDateTimePickerTimeSelect-c6ea3195.js';
-import './getTimePlaceholder-a1d75821.js';
+import { D as DateFormat, L as Locale } from './OrDateTimePicker-c3544059.js';
+import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6 } from './OrDateTimePickerTimeSelect-62e04a6c.js';
+import { D as DateTimePickerDateFormat } from './getTimePlaceholder-9d18b5ac.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { s as script$7 } from './OrError-331220bc.js';
 import { s as script$8 } from './OrHint-262c8217.js';
 import { s as script$a } from './OrIconButton-bc7ebce6.js';
 import { s as script$9 } from './OrIcon-c446d072.js';
 import { s as script$b, a as InputBoxSize } from './OrInputBox-287f97ba.js';
-import { s as script$c } from './OrLabel-02aa56ad.js';
+import { s as script$c } from './OrLabel-59d09591.js';
 import { s as script$d } from './OrPopover-93803a23.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 
@@ -54,7 +54,15 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
       default: undefined
     },
     yearFilter: {
@@ -106,8 +114,9 @@ var script = defineComponent({
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     var _a;
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -118,9 +127,16 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker]);
     const popoverStyles = computed(() => ['or-date-picker-popover-v3', ...DatePickerPopover]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     // State
     const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
     watch(() => props.modelValue, value => {
@@ -169,19 +185,21 @@ var script = defineComponent({
     }
     function formatDateAlt(value) {
       var _a;
-      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(resolvedLocale.value, {
         dateStyle: 'medium',
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+      resolvedFormat,
+      resolvedLocale,
       initialValue,
       proxyModelValue,
       draftModelValue,
@@ -251,11 +269,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       modelValue: _ctx.draftModelValue,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event),
       class: normalizeClass(['!border-0']),
+      format: _ctx.resolvedFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.popover && _ctx.popover.state === 'open',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.openPopover], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.openPopover], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
       ref: 'popover',
       class: normalizeClass(_ctx.popoverStyles),
       "custom-styles": _ctx.popoverStyles,
@@ -281,14 +301,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), createVNode(_component_OrDateTimePickerMonthSelect, {
         modelValue: _ctx.initialValue,
         "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.initialValue = $event),
+        locale: _ctx.resolvedLocale,
         "year-filter": _ctx.yearFilter,
         "month-filter": _ctx.monthFilter
-      }, null, 8 /* PROPS */, ["modelValue", "year-filter", "month-filter"]), createVNode(_component_OrDateTimePickerDateSelect, {
+      }, null, 8 /* PROPS */, ["modelValue", "locale", "year-filter", "month-filter"]), createVNode(_component_OrDateTimePickerDateSelect, {
         modelValue: _ctx.draftModelValue,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.draftModelValue = $event),
         "initial-value": _ctx.initialValue,
+        format: _ctx.resolvedFormat,
+        locale: _ctx.resolvedLocale,
         "date-filter": _ctx.dateFilter
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "date-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "locale", "date-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
         disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[3] || (_cache[3] = $event => {
           _ctx.apply();

package/dist/esm/v3/{OrDateRangePicker-06b39fc4.js → OrDateRangePicker-fb715f58.js}

@@ -1,13 +1,13 @@
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import { u as useResponsive } from './useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind.config.json';
-import './OrDateTimePicker-b2749f72.js';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6 } from './OrDateTimePickerTimeSelect-c6ea3195.js';
-import './getTimePlaceholder-a1d75821.js';
+import { D as DateFormat, L as Locale } from './OrDateTimePicker-c3544059.js';
+import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6 } from './OrDateTimePickerTimeSelect-62e04a6c.js';
+import { D as DateTimePickerDateFormat } from './getTimePlaceholder-9d18b5ac.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
 import { s as script$7 } from './OrError-331220bc.js';
@@ -15,7 +15,7 @@ import { s as script$8 } from './OrHint-262c8217.js';
 import { s as script$a } from './OrIconButton-bc7ebce6.js';
 import { s as script$9 } from './OrIcon-c446d072.js';
 import { s as script$b, a as InputBoxSize } from './OrInputBox-287f97ba.js';
-import { s as script$c } from './OrLabel-02aa56ad.js';
+import { s as script$c } from './OrLabel-59d09591.js';
 import { s as script$d } from './OrPopover-93803a23.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, createElementVNode, Fragment } from 'vue';
 
@@ -55,7 +55,15 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Object,
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
       default: undefined
     },
     size: {
@@ -95,8 +103,9 @@ var script = defineComponent({
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     var _a, _b, _c, _d, _e;
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-range-picker-v3', ...DateRangePicker]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -107,9 +116,16 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-range-picker-v3', ...DateRangePicker]);
     const popoverStyles = computed(() => ['or-date-range-picker-popover-v3', ...DateRangePickerPopover]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     // State
     const initialValueFrom = ref((_b = (_a = props.modelValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : getCurrentDate());
     const initialValueTo = ref((_d = (_c = props.modelValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : getNextMonthDate());
@@ -161,9 +177,6 @@ var script = defineComponent({
       return true;
     });
     // Methods
-    function switchSelectedControl() {
-      selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
-    }
     function apply() {
       proxyModelValue.value = draftModelValue.value;
     }
@@ -171,6 +184,9 @@ var script = defineComponent({
       var _a;
       draftModelValue.value = (_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : [undefined, undefined];
     }
+    function switchSelectedControl() {
+      selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
+    }
     function openPopover(control) {
       if (!props.readonly && !props.disabled) {
         const popoverInstance = popover.value;
@@ -188,7 +204,7 @@ var script = defineComponent({
     }
     function formatDateAlt(value) {
       var _a;
-      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(resolvedLocale.value, {
         dateStyle: 'medium',
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
@@ -200,12 +216,14 @@ var script = defineComponent({
     } = useResponsive();
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+      resolvedFormat,
+      resolvedLocale,
       initialValueFrom,
       initialValueTo,
       proxyModelValue,
@@ -215,9 +233,9 @@ var script = defineComponent({
       genericDraftModelValue,
       selectedControl,
       isInvalidDraftModelValue,
-      switchSelectedControl,
       apply,
       reset,
+      switchSelectedControl,
       openPopover,
       closePopover,
       formatDateAlt,
@@ -293,18 +311,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [withDirectives(createVNode(_component_OrDateTimePickerDateControl, {
       modelValue: _ctx.draftModelValueFrom,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValueFrom = $event),
+      format: _ctx.resolvedFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.popover && _ctx.popover.state === 'open' && _ctx.selectedControl === 'from',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, () => _ctx.openPopover('from')], [_directive_dropdown_close, _ctx.closePopover]]), createTextVNode(" - "), withDirectives(createVNode(_component_OrDateTimePickerDateControl, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, () => _ctx.openPopover('from')], [_directive_dropdown_close, _ctx.closePopover]]), createTextVNode(" - "), withDirectives(createVNode(_component_OrDateTimePickerDateControl, {
       modelValue: _ctx.draftModelValueTo,
       "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.draftModelValueTo = $event),
+      format: _ctx.resolvedFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.popover && _ctx.popover.state === 'open' && _ctx.selectedControl === 'to',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, () => _ctx.openPopover('to')], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, () => _ctx.openPopover('to')], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
       ref: 'popover',
       class: normalizeClass(_ctx.popoverStyles),
       "custom-styles": _ctx.popoverStyles,
@@ -337,23 +359,29 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1 /* STABLE */
       }), createElementVNode("div", _hoisted_1, [_ctx.isDesktop || _ctx.isMobile && _ctx.selectedControl === 'from' ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_OrDateTimePickerMonthSelect, {
         modelValue: _ctx.initialValueFrom,
-        "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.initialValueFrom = $event)
-      }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_OrDateTimePickerDateSelect, {
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.initialValueFrom = $event),
+        locale: _ctx.resolvedLocale
+      }, null, 8 /* PROPS */, ["modelValue", "locale"]), createVNode(_component_OrDateTimePickerDateSelect, {
         modelValue: _ctx.genericDraftModelValue,
         "onUpdate:modelValue": [_cache[5] || (_cache[5] = $event => _ctx.genericDraftModelValue = $event), _cache[6] || (_cache[6] = $event => _ctx.switchSelectedControl())],
         "initial-value": _ctx.initialValueFrom,
+        format: _ctx.resolvedFormat,
+        locale: _ctx.resolvedLocale,
         "range-start": _ctx.draftModelValueFrom || _ctx.initialValueFrom,
         "range-end": _ctx.draftModelValueTo || _ctx.initialValueTo
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "range-start", "range-end"])])) : createCommentVNode("v-if", true), _ctx.isDesktop || _ctx.isMobile && _ctx.selectedControl === 'to' ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(_component_OrDateTimePickerMonthSelect, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "locale", "range-start", "range-end"])])) : createCommentVNode("v-if", true), _ctx.isDesktop || _ctx.isMobile && _ctx.selectedControl === 'to' ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(_component_OrDateTimePickerMonthSelect, {
         modelValue: _ctx.initialValueTo,
-        "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.initialValueTo = $event)
-      }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_OrDateTimePickerDateSelect, {
+        "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.initialValueTo = $event),
+        locale: _ctx.resolvedLocale
+      }, null, 8 /* PROPS */, ["modelValue", "locale"]), createVNode(_component_OrDateTimePickerDateSelect, {
         modelValue: _ctx.genericDraftModelValue,
         "onUpdate:modelValue": [_cache[8] || (_cache[8] = $event => _ctx.genericDraftModelValue = $event), _cache[9] || (_cache[9] = $event => _ctx.switchSelectedControl())],
         "initial-value": _ctx.initialValueTo,
+        format: _ctx.resolvedFormat,
+        locale: _ctx.resolvedLocale,
         "range-start": _ctx.draftModelValueFrom || _ctx.initialValueFrom,
         "range-end": _ctx.draftModelValueTo || _ctx.initialValueTo
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "range-start", "range-end"])])) : createCommentVNode("v-if", true)]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "locale", "range-start", "range-end"])])) : createCommentVNode("v-if", true)]), createVNode(_component_OrDateTimePickerPopoverFooter, {
         disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[10] || (_cache[10] = $event => {
           _ctx.apply();