@onereach/ui-components 9.0.0 → 9.0.1-beta.4187.0

package/dist/esm/v3/components/or-tag-input-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTagInputV3 } from '../../OrTagInput-2258e489.js';
+export { s as OrTagInputV3 } from '../../OrTagInput-85bb35a5.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';

package/dist/esm/v3/components/or-textarea-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTextareaV3 } from '../../OrTextarea-31993c4c.js';
+export { s as OrTextareaV3 } from '../../OrTextarea-72acd2de.js';
 import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';

package/dist/esm/v3/components/or-time-format-v3/index.js

@@ -1,6 +1,6 @@
-export { s as OrTimeFormatV3 } from '../../OrTimeFormat-a818056b.js';
+export { s as OrTimeFormatV3 } from '../../OrTimeFormat-0dc51078.js';
 import 'vue-demi';
-import '../../OrDateTimePicker-28018aea.js';
+import '../../OrDateTimePicker-cb148e54.js';
 import '../../dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';

package/dist/esm/v3/components/or-time-picker-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTimePickerV3 } from '../../OrTimePicker-0e197489.js';
+export { s as OrTimePickerV3 } from '../../OrTimePicker-5097684d.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
 import '@vueuse/core';
@@ -8,7 +8,7 @@ import 'lodash/get';
 import '../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrDateTimePicker-28018aea.js';
+import '../../OrDateTimePicker-cb148e54.js';
 import '../../OrError-331220bc.js';
 import 'vue';
 import '../../OrHint-262c8217.js';

package/dist/esm/v3/components/or-time-range-picker-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-c2cdde8f.js';
+export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-4d4c6e61.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
 import '@vueuse/core';
@@ -9,7 +9,7 @@ import '../../useProxyModelValue-940010d2.js';
 import '../../useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrDateTimePicker-28018aea.js';
+import '../../OrDateTimePicker-cb148e54.js';
 import '../../OrError-331220bc.js';
 import 'vue';
 import '../../OrHint-262c8217.js';

package/dist/esm/v3/index.js

@@ -8,10 +8,10 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-c95aef65.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-bad0b25e.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-aeb3825f.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-c2ef331b.js';
 export { s as OrCheckbox } from './OrCheckbox-42ed332c.js';
-export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-4436e802.js';
+export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-11a7b74e.js';
 export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-7693bcda.js';
 export { s as OrCheckboxV3 } from './OrCheckbox-abe46de1.js';
 export { s as OrChip } from './OrChip-2e26629d.js';
@@ -22,21 +22,21 @@ 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-a111fca1.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-842bcdcd.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-25a954ce.js';
+export { s as OrCombinedInputV3 } from './OrCombinedInput-b42c2ead.js';
 export { s as OrConfirm } from './OrConfirm-c63285a6.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-500628e6.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-de93af99.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-78d02563.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-ff3245df.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-6479bf29.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-872d67d5.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-43f8033f.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-c5e1a18a.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-3221f4f8.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-af4ad584.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-48e04e67.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-28018aea.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-cb148e54.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-2771249a.js';
 export { D as DateTimePickerTimeFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-a1d75821.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
@@ -51,7 +51,7 @@ export { s as OrErrorV3 } from './OrError-331220bc.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-3281fa33.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-3d860eef.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-c875c590.js';
-export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-25d0a2da.js';
+export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-11ed3699.js';
 export { s as OrHint } from './OrHint-8822005b.js';
 export { s as OrHintV3 } from './OrHint-262c8217.js';
 export { s as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-eb0a5aa2.js';
@@ -63,13 +63,13 @@ export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInli
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-7321d8d3.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
 export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from './OrInputBox-287f97ba.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-2c4b97ed.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-79cce73c.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-f1a581d8.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-c83a51b2.js';
 export { s as OrList } from './OrList-59f4430e.js';
 export { s as OrListOfInputs } from './OrListOfInputs-c557cd79.js';
-export { s as OrListV3 } from './OrList-decc6768.js';
+export { s as OrListV3 } from './OrList-8e43f5cd.js';
 export { s as OrListItem } from './OrListItem-12e21bc6.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-5e2f359b.js';
@@ -91,17 +91,17 @@ export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-0939955c.js';
 export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
-export { s as OrRadioGroupV3 } from './OrRadioGroup-01871290.js';
+export { s as OrRadioGroupV3 } from './OrRadioGroup-0c1bcc17.js';
 export { s as OrRadioV3 } from './OrRadio-b4ab913e.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-1284dce6.js';
 export { s as OrRatingV3 } from './OrRating-640f9e87.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-e107f883.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-9f45f9d8.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-866dae43.js';
 export { s as OrSearch } from './OrSearch-54a642d3.js';
-export { s as OrSearchV3 } from './OrSearch-eed1ea7b.js';
+export { s as OrSearchV3 } from './OrSearch-d71cd69e.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-4b163ea9.js';
 export { s as OrSelect } from './OrSelect-4f2ea2f2.js';
-export { s as OrSelectV3 } from './OrSelect-8e2b6f05.js';
+export { s as OrSelectV3 } from './OrSelect-edcb0db9.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
 export { s as OrSidebarV3, S as SidebarPlacement } from './props-3212cd17.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -124,18 +124,18 @@ export { s as OrTabV3 } from './OrTab-74a9bd5b.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-f9958f65.js';
 export { s as OrTag } from './OrTag-04abf6a7.js';
-export { s as OrTagInputV3 } from './OrTagInput-2258e489.js';
+export { s as OrTagInputV3 } from './OrTagInput-85bb35a5.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-a29c2113.js';
 export { s as OrTagsV3, T as TagsOverflow } from './OrTags-215da9e7.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-ea114c19.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
-export { s as OrTextareaV3 } from './OrTextarea-31993c4c.js';
+export { s as OrTextareaV3 } from './OrTextarea-72acd2de.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-9524352e.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-a818056b.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-0e197489.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-c2cdde8f.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-0dc51078.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-5097684d.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-4d4c6e61.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-bd194714.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "9.0.0",
+  "version": "9.0.1-beta.4187.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": "908a707f0e57c52f47842380f4d10bc4ab8de920"
+  }
 }

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 { InputBoxSize } from '../or-input-box-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-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" />
@@ -48,9 +50,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>