@onereach/ui-components 8.26.1 → 8.26.2-beta.4180.0

package/dist/esm/v3/index.js

@@ -8,10 +8,10 @@ export { s as OrButtonV2 } from './OrButton-37738450.js';
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrIconButton, s as OrIconButtonV2 } from './OrIconButton-7755b11a.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a2ba0b3e.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-0d91ca80.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-bd548f75.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-1e84e107.js';
 export { s as OrCheckbox } from './OrCheckbox-42ed332c.js';
-export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-b802d08c.js';
+export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-9dd78c1d.js';
 export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-0bb3e284.js';
 export { s as OrCheckboxV3 } from './OrCheckbox-11bad915.js';
 export { s as OrChip } from './OrChip-2e26629d.js';
@@ -22,25 +22,25 @@ 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, s as OrCodeV3 } from './OrCode-905f9fca.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-48a5af04.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';
 export { s 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-7e1067a0.js';
-export { s as OrCombinedInputV3 } from './OrCombinedInput-556ac0f1.js';
+export { s as OrCombinedInputV3 } from './OrCombinedInput-725af45c.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from './OrInputBox-be83fe16.js';
 export { s as OrConfirm } from './OrConfirm-c63285a6.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-a1550dde.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-617ec8a9.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-269f2840.js';
 export { s as OrMenuV3 } from './OrMenu-f73c0256.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-d8067ed8.js';
 export { i as isPrevented } from './isPrevented-6994b101.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-f21984de.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-126b2c45.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-7dce28b2.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-91da6494.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-94259126.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-d3686806.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-b98d7ae4.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-98bbd64c.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-45bc8bd3.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-c3048d3f.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-c9e2c1ae.js';
 export { s 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-dfbab9bd.js';
 export { D as DateTimePickerTimeFormat, D as TimePickerFormat, D as TimeRangePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-8a7ffc20.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
@@ -55,7 +55,7 @@ export { s as OrErrorV3 } from './OrError-39d69994.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-92163662.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-744901cf.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-c875c590.js';
-export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-44b0ba75.js';
+export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-d14969dc.js';
 export { s as OrHint } from './OrHint-8822005b.js';
 export { s as OrHintV3 } from './OrHint-a3c8c79e.js';
 export { s as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-eb0a5aa2.js';
@@ -66,13 +66,13 @@ export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-454a
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-0306b1b8.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-c56dcd96.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-2ccc8f4c.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-d4a0f9ad.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-6c83afe4.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-f39ddaba.js';
 export { s as OrList } from './OrList-59f4430e.js';
 export { s as OrListOfInputs } from './OrListOfInputs-c557cd79.js';
-export { s as OrListV3 } from './OrList-57249ba3.js';
+export { s as OrListV3 } from './OrList-6ed449f8.js';
 export { s as OrListItem } from './OrListItem-2ed9a12f.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-0b463089.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-b7d415dd.js';
@@ -91,18 +91,18 @@ export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-59100c74.js';
 export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
-export { s as OrRadioGroupV3 } from './OrRadioGroup-cb6e81cb.js';
+export { s as OrRadioGroupV3 } from './OrRadioGroup-b1d155fe.js';
 export { s as OrRadioV3 } from './OrRadio-c6f7ba23.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-f2d27996.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-3ddd12d5.js';
 export { s as OrRatingV3 } from './OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-35e64b58.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-9e55fd0c.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-7d0b7804.js';
 export { s as OrSearch } from './OrSearch-54a642d3.js';
-export { s as OrSearchV3 } from './OrSearch-c2ab03b7.js';
+export { s as OrSearchV3 } from './OrSearch-31b69d05.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-08992fc7.js';
 export { s as OrSelect } from './OrSelect-c87b9c23.js';
-export { s as OrSelectV3 } from './OrSelect-2420cbd5.js';
+export { s as OrSelectV3 } from './OrSelect-52113871.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
 export { S as OrSidebarPlacement, s as OrSidebarV3, S as SidebarPlacement } from './OrSidebar-4cff84a1.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -124,18 +124,18 @@ export { s as OrTabV3 } from './OrTab-42be32d1.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-2f5a014e.js';
 export { s as OrTag } from './OrTag-04abf6a7.js';
-export { s as OrTagInputV3 } from './OrTagInput-b127ae4f.js';
+export { s as OrTagInputV3 } from './OrTagInput-84e7ae52.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-3358c962.js';
 export { s as OrTagsV3, T as TagsOverflow } from './OrTags-278c3292.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-bf77eed4.js';
 export { s as OrTextV3 } from './OrText-d54c951d.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
-export { s as OrTextareaV3 } from './OrTextarea-28bf12ac.js';
+export { s as OrTextareaV3 } from './OrTextarea-18b03b0f.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-9524352e.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-4a141a50.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-6a4bc657.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-427cea8e.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-53822f46.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-bfbcb2cf.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-8e11bf76.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-71ba538b.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, s as OrToastV3, t as TypesV3 } from './types-b01c07e5.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.26.1",
+  "version": "8.26.2-beta.4180.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -177,6 +177,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "643975f98f7862cc8732e4146af8a8368ffac6ec"
+  }
 }

package/src/components/or-code-v3/OrCode.vue

@@ -12,6 +12,11 @@
       :disabled="disabled"
       :readonly="readonly"
     >
+      <template v-slot:label>
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </template>
       <template v-slot:addon>
         <div :class="['layout-row', 'gap-xs']">
           <slot name="addon" />
@@ -23,6 +28,11 @@
           />
         </div>
       </template>
+      <template v-slot:hint>
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </template>
     </OrCodeControl>
 
     <OrModal
@@ -31,7 +41,9 @@
       :size="'l'"
     >
       <template v-slot:header>
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
       </template>
 
       <OrCodeControl

package/src/components/or-code-v3/partials/OrCodeControl.vue

@@ -9,7 +9,9 @@
       :required="required"
       :disabled="disabled"
     >
-      {{ label }}
+      <slot name="label">
+        {{ label }}
+      </slot>
 
       <template v-slot:addon>
         <slot name="addon" />
@@ -33,9 +35,11 @@
       v-show="!error"
       :class="['contents']"
     >
-      <template v-if="hint">
+      <template v-if="$slots.hint || hint">
         <OrHint :disabled="disabled">
-          {{ hint }}
+          <slot name="hint">
+            {{ hint }}
+          </slot>
         </OrHint>
       </template>
     </div>

package/src/components/or-combined-input-v3/OrCombinedInput.vue

@@ -3,13 +3,15 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -32,9 +34,11 @@
       v-show="!error"
       :class="['contents']"
     >
-      <template v-if="hint">
+      <template v-if="$slots.hint || hint">
         <OrHint :disabled="disabled">
-          {{ hint }}
+          <slot name="hint">
+            {{ hint }}
+          </slot>
         </OrHint>
       </template>
     </div>
@@ -51,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, h, PropType, ref } from 'vue-demi';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';

package/src/components/or-date-picker-v3/OrDatePicker.vue

@@ -3,13 +3,15 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -98,9 +100,11 @@
     </OrInputBox>
 
     <template v-if="!error">
-      <template v-if="hint">
+      <template v-if="$slots.hint || hint">
         <OrHint :disabled="disabled">
-          {{ hint }}
+          <slot name="hint">
+            {{ hint }}
+          </slot>
         </OrHint>
       </template>
     </template>

package/src/components/or-date-range-picker-v3/OrDateRangePicker.vue

@@ -3,13 +3,15 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -142,9 +144,11 @@
     </OrInputBox>
 
     <template v-if="!error">
-      <template v-if="hint">
+      <template v-if="$slots.hint || hint">
         <OrHint :disabled="disabled">
-          {{ hint }}
+          <slot name="hint">
+            {{ hint }}
+          </slot>
         </OrHint>
       </template>
     </template>

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -3,13 +3,15 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -144,7 +146,7 @@
     </OrInputBox>
 
     <template v-if="!error">
-      <template v-if="hint">
+      <template v-if="$slots.hint || hint">
         <OrHint :disabled="disabled">
           {{ hint }}
         </OrHint>

package/src/components/or-form-group-v3/OrFormGroup.vue

@@ -6,13 +6,15 @@
     <div class="layout-row">
       <slot name="label">
         <OrLabel
-          v-if="label"
+          v-if="$slots.label || $slots.addon || label"
           :class="labelStyles"
           :invalid="invalid"
           :required="required"
           :disabled="disabled"
         >
-          {{ label }}
+          <slot name="label">
+            {{ label }}
+          </slot>
 
           <template v-slot:addon>
             <slot name="addon" />
@@ -24,9 +26,11 @@
       <slot />
     </div>
 
-    <template v-if="hint && !error">
+    <template v-if="($slots.hint || hint) && !error">
       <OrHint :disabled="disabled">
-        {{ hint }}
+        <slot name="hint">
+          {{ hint }}
+        </slot>
       </OrHint>
     </template>
 

package/src/components/or-input-v3/OrInput.vue

@@ -3,14 +3,16 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :control-id="controlAttributes.id"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -91,10 +93,11 @@
       v-show="!error"
       :class="['contents']"
     >
-      <template v-if="hint || maxLength">
+      <template v-if="$slots.hint || hint || maxLength">
         <OrHint :disabled="disabled">
-          {{ hint }}
-
+          <slot name="hint">
+            {{ hint }}
+          </slot>
           <template
             v-if="maxLength"
             v-slot:addon

package/src/components/or-list-v3/OrList.vue

@@ -13,7 +13,9 @@
       }"
     >
       <OrLabel :disabled="disabled">
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="label-addon" />

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -3,9 +3,19 @@
     ref="root"
     :class="rootStyles"
   >
-    <or-label>
-      {{ description }}
-    </or-label>
+    <template v-if="$slots.label || $slots.addon || label">
+      <OrLabel
+        :variant="'input'"
+      >
+        <slot name="label">
+          {{ label }}
+        </slot>
+
+        <template v-slot:addon>
+          <slot name="addon" />
+        </template>
+      </OrLabel>
+    </template>
     <div
       ref="containerRef"
       :class="containerStyles"
@@ -217,30 +227,42 @@ export default defineComponent({
   },
 
   props: {
+
     modelValue: {
       type: String,
       default: undefined,
     },
+
     toolbar: {
       type: Array as PropType<Tools>,
       default: () => [],
     },
+
+    label: {
+      type: String,
+      default: undefined,
+    },
+
     description: {
       type: String,
       default: '',
     },
+
     placeholder: {
       type: String,
       default: '',
     },
+
     autofocus: {
       type: Boolean,
       default: false,
     },
+
     format: {
       type: String as PropType<`${Formats}`>,
       default: () => Formats.Markup,
     },
+
     fullHeight: {
       type: Boolean,
       default: false,
@@ -266,7 +288,7 @@ export default defineComponent({
     const textareaRef = ref<HTMLTextAreaElement>();
     const containerRef = ref<ComponentPublicInstance<HTMLInputElement>>();
     const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
-    const moreButtonRef = ref<HTMLDivElement>();
+    const moreButtonRef = ref <InstanceType<typeof OrIconButton>>();
     const moreRef = ref<HTMLDivElement>();
     const toolbarButtonRef = ref<InstanceType<typeof OrIconButton>>();
     const menuRef = ref<InstanceType<typeof OrMenu>>();

package/src/components/or-select-v3/OrSelect.vue

@@ -3,14 +3,16 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :control-id="controlId"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -236,9 +238,11 @@
       v-show="!error"
       :class="['contents']"
     >
-      <template v-if="hint">
+      <template v-if="$slots.hint || hint">
         <OrHint :disabled="disabled">
-          {{ hint }}
+          <slot name="hint">
+            {{ hint }}
+          </slot>
         </OrHint>
       </template>
     </div>

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -3,14 +3,16 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :control-id="controlAttributes.id"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -92,9 +94,11 @@
       v-show="!error"
       :class="['contents']"
     >
-      <template v-if="hint || maxLength">
+      <template v-if="$slots.hint || hint || maxLength">
         <OrHint :disabled="disabled">
-          {{ hint }}
+          <slot name="hint">
+            {{ hint }}
+          </slot>
 
           <template
             v-if="maxLength"

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -3,14 +3,16 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :control-id="controlAttributes.id"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -44,9 +46,11 @@
       v-show="!error"
       :class="['contents']"
     >
-      <template v-if="hint || maxLength">
+      <template v-if="$slots.hint || hint || maxLength">
         <OrHint :disabled="disabled">
-          {{ hint }}
+          <slot name="hint">
+            {{ hint }}
+          </slot>
 
           <template
             v-if="maxLength"

package/src/components/or-time-picker-v3/OrTimePicker.vue

@@ -3,13 +3,15 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -95,9 +97,11 @@
     </OrInputBox>
 
     <template v-if="!error">
-      <template v-if="hint">
+      <template v-if="$slots.hint || hint">
         <OrHint :disabled="disabled">
-          {{ hint }}
+          <slot name="hint">
+            {{ hint }}
+          </slot>
         </OrHint>
       </template>
     </template>

package/src/components/or-time-range-picker-v3/OrTimeRangePicker.vue

@@ -3,13 +3,15 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="label">
+    <template v-if="$slots.label || $slots.addon || label">
       <OrLabel
         :variant="'input'"
         :required="required"
         :disabled="disabled"
       >
-        {{ label }}
+        <slot name="label">
+          {{ label }}
+        </slot>
 
         <template v-slot:addon>
           <slot name="addon" />
@@ -132,9 +134,11 @@
     </OrInputBox>
 
     <template v-if="!error">
-      <template v-if="hint">
+      <template v-if="$slots.hint || hint">
         <OrHint :disabled="disabled">
-          {{ hint }}
+          <slot name="hint">
+            {{ hint }}
+          </slot>
         </OrHint>
       </template>
     </template>