@semcore/time-picker 4.52.0 → 4.52.1

package/lib/esm/TimePicker.mjs

@@ -1,108 +1,150 @@
-import b from "@babel/runtime/helpers/esm/objectSpread2";
-import w from "@babel/runtime/helpers/esm/slicedToArray";
-import M from "@babel/runtime/helpers/esm/classCallCheck";
-import z from "@babel/runtime/helpers/esm/createClass";
-import m from "@babel/runtime/helpers/esm/assertThisInitialized";
-import H from "@babel/runtime/helpers/esm/inherits";
-import $ from "@babel/runtime/helpers/esm/createSuper";
-import p from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as D } from "@semcore/utils/lib/core/index";
-import q, { sstyled as N, assignProps as C, Component as R } from "@semcore/core";
-import g from "react";
-import B from "@semcore/input";
-import { Box as L } from "@semcore/flex-box";
-import { Hours as O, Minutes as j } from "./PickerInput.mjs";
-import Z from "./PickerFormat.mjs";
-import { localizedMessages as E } from "./translations/__intergalactic-dynamic-locales.mjs";
-import G from "@semcore/utils/lib/enhances/i18nEnhance";
-import J from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-var K = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
+import React from "react";
+import Input from "@semcore/input";
+import { Box } from "@semcore/flex-box";
+import { Hours, Minutes } from "./PickerInput.mjs";
+import TimePickerFormat from "./PickerFormat.mjs";
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+/*!__reshadow-styles__:"./style/time-picker.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (D.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    ".___STimePicker_6rpw6_gg_{position:relative;width:auto;outline:0}.___STimePicker_6rpw6_gg_.__keyboardFocused_6rpw6_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePicker_6rpw6_gg_.__disabled_6rpw6_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}.___SPickerInput_6rpw6_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___SPickerInput_6rpw6_gg_.__placeholder_6rpw6_gg_{text-overflow:initial}.___SPickerInput_6rpw6_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SPickerInput_6rpw6_gg_._size_l_6rpw6_gg_,.___SPickerInput_6rpw6_gg_._size_m_6rpw6_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_6rpw6_gg_._size_l_6rpw6_gg_{width:21px}.___SPickerFormat_6rpw6_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium, 500);line-height:normal;-webkit-text-decoration:none;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:0 var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}@media (hover:hover){.___SPickerFormat_6rpw6_gg_:hover{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SPickerFormat_6rpw6_gg_.__active_6rpw6_gg_,.___SPickerFormat_6rpw6_gg_:active{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active, #c4c7cf)}.___SPickerFormat_6rpw6_gg_:focus,.___SPickerFormat_6rpw6_gg_:focus-visible{outline:0}.___SPickerFormat_6rpw6_gg_._size_m_6rpw6_gg_{height:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px);margin:0-1px 0 0}.___SPickerFormat_6rpw6_gg_._size_m_6rpw6_gg_ .___SPickerFormatText_6rpw6_gg_{margin:0 var(--intergalactic-spacing-2x, 8px)}.___SPickerFormat_6rpw6_gg_._size_l_6rpw6_gg_{height:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px);margin:0 calc(-1*var(--intergalactic-spacing-1x, 4px))0 0}.___SPickerFormat_6rpw6_gg_._size_l_6rpw6_gg_ .___SPickerFormatText_6rpw6_gg_{margin:0 var(--intergalactic-spacing-3x, 12px)}.___SPickerFormat_6rpw6_gg_.__disabled_6rpw6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf)}.___SPickerFormat_6rpw6_gg_.__keyboardFocused_6rpw6_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePickerSeparator_6rpw6_gg_{color:var(--intergalactic-text-primary, #191b23)}.___STimePickerSeparator_6rpw6_gg_.__disabled_6rpw6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);pointer-events:none}",
-    "6rpw6_gg_"
-  ), {
-    __STimePicker: "___STimePicker_6rpw6_gg_",
-    _keyboardFocused: "__keyboardFocused_6rpw6_gg_",
-    _disabled: "__disabled_6rpw6_gg_",
-    __SPickerInput: "___SPickerInput_6rpw6_gg_",
-    _size_m: "_size_m_6rpw6_gg_",
-    _size_l: "_size_l_6rpw6_gg_",
-    __SPickerFormat: "___SPickerFormat_6rpw6_gg_",
-    __STimePickerSeparator: "___STimePickerSeparator_6rpw6_gg_",
-    _placeholder: "__placeholder_6rpw6_gg_",
-    _active: "__active_6rpw6_gg_",
-    __SPickerFormatText: "___SPickerFormatText_6rpw6_gg_"
+    ".___STimePicker_axv7r_gg_{position:relative;width:auto;outline:0}.___STimePicker_axv7r_gg_.__keyboardFocused_axv7r_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePicker_axv7r_gg_.__disabled_axv7r_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}.___SPickerInput_axv7r_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___SPickerInput_axv7r_gg_.__placeholder_axv7r_gg_{text-overflow:initial}.___SPickerInput_axv7r_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SPickerInput_axv7r_gg_._size_l_axv7r_gg_,.___SPickerInput_axv7r_gg_._size_m_axv7r_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_axv7r_gg_._size_l_axv7r_gg_{width:21px}.___SPickerFormat_axv7r_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium, 500);line-height:normal;-webkit-text-decoration:none;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:0 var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}@media (hover:hover){.___SPickerFormat_axv7r_gg_:hover{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SPickerFormat_axv7r_gg_.__active_axv7r_gg_,.___SPickerFormat_axv7r_gg_:active{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active, #c4c7cf)}.___SPickerFormat_axv7r_gg_:focus,.___SPickerFormat_axv7r_gg_:focus-visible{outline:0}.___SPickerFormat_axv7r_gg_._size_m_axv7r_gg_{height:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px);margin:0-1px 0 0}.___SPickerFormat_axv7r_gg_._size_m_axv7r_gg_ .___SPickerFormatText_axv7r_gg_{margin:0 var(--intergalactic-spacing-2x, 8px)}.___SPickerFormat_axv7r_gg_._size_l_axv7r_gg_{height:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px);margin:0 calc(-1*var(--intergalactic-spacing-1x, 4px))0 0}.___SPickerFormat_axv7r_gg_._size_l_axv7r_gg_ .___SPickerFormatText_axv7r_gg_{margin:0 var(--intergalactic-spacing-3x, 12px)}.___SPickerFormat_axv7r_gg_.__disabled_axv7r_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf)}.___SPickerFormat_axv7r_gg_.__keyboardFocused_axv7r_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePickerSeparator_axv7r_gg_{color:var(--intergalactic-text-primary, #191b23)}.___STimePickerSeparator_axv7r_gg_.__disabled_axv7r_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);pointer-events:none}",
+    /*__inner_css_end__*/
+    "axv7r_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__STimePicker": "___STimePicker_axv7r_gg_",
+    "_keyboardFocused": "__keyboardFocused_axv7r_gg_",
+    "_disabled": "__disabled_axv7r_gg_",
+    "__SPickerInput": "___SPickerInput_axv7r_gg_",
+    "_size_m": "_size_m_axv7r_gg_",
+    "_size_l": "_size_l_axv7r_gg_",
+    "__SPickerFormat": "___SPickerFormat_axv7r_gg_",
+    "__STimePickerSeparator": "___STimePickerSeparator_axv7r_gg_",
+    "_placeholder": "__placeholder_axv7r_gg_",
+    "_active": "__active_axv7r_gg_",
+    "__SPickerFormatText": "___SPickerFormatText_axv7r_gg_"
   })
-), Q = {
+);
+var MAP_MERIDIEM = {
   AM: "PM",
   PM: "AM"
-}, U = {
+};
+var MAP_FIELD_TO_TIME = {
   hours: 0,
   minutes: 1
 };
-function x(a) {
-  var c = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, s = Number.parseInt(a);
-  return Number.isNaN(s) ? c : s;
+function intOrDefault(value) {
+  var def = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+  var number = Number.parseInt(value);
+  return Number.isNaN(number) ? def : number;
 }
-function I(a) {
-  return a = String(a), a.length === 1 ? "0".concat(a) : String(a);
+function withLeadingZero(value) {
+  value = String(value);
+  if (value.length === 1) return "0".concat(value);
+  return String(value);
 }
-function W(a) {
-  return a >= 12 ? "PM" : "AM";
+function meridiemByHours(hours) {
+  return hours >= 12 ? "PM" : "AM";
 }
-function F(a) {
-  var c = x(a, NaN);
-  return Number.isNaN(c) ? a : c === 0 ? 12 : c > 12 ? c - 12 : a;
+function formatHoursTo12(hours) {
+  var nHours = intOrDefault(hours, NaN);
+  if (Number.isNaN(nHours)) return hours;
+  if (nHours === 0) return 12;
+  if (nHours > 12) return nHours - 12;
+  return hours;
 }
-function X(a, c) {
-  var s = x(a, NaN);
-  return Number.isNaN(s) ? a : c === "AM" && s === 12 ? 0 : c === "PM" && s < 12 ? s + 12 : a;
+function formatHoursTo24(hours, meridiem) {
+  var nHours = intOrDefault(hours, NaN);
+  if (Number.isNaN(nHours)) return hours;
+  if (meridiem === "AM") {
+    if (nHours === 12) return 0;
+  }
+  if (meridiem === "PM") {
+    if (nHours < 12) return nHours + 12;
+  }
+  return hours;
 }
-var S = /* @__PURE__ */ function(a) {
-  H(s, a);
-  var c = $(s);
-  function s() {
-    var e;
-    M(this, s);
-    for (var t = arguments.length, o = new Array(t), n = 0; n < t; n++)
-      o[n] = arguments[n];
-    return e = c.call.apply(c, [this].concat(o)), p(m(e), "hoursInputRef", /* @__PURE__ */ g.createRef()), p(m(e), "minutesInputRef", /* @__PURE__ */ g.createRef()), p(m(e), "_lastMeridiem", "AM"), p(m(e), "handleValueChange", function(r, _, i) {
-      var u = e.asProps.is12Hour, l = m(e), f = l.meridiem, d;
-      _ ? (d = e.value.split(":"), d[U[_]] = r) : d = r.split(":");
-      var k = d, v = w(k, 2), h = v[0], P = h === void 0 ? "" : h, T = v[1], V = T === void 0 ? "" : T;
-      u && (P = String(F(P))), r = e.timeToValue([P, V], f), e.handlers.value(r, i);
-    }), p(m(e), "handleMeridiemClick", function(r) {
-      var _ = e.asProps.is12Hour, i = m(e), u = i.value, l = i.meridiem, f = u.split(":"), d = w(f, 2), k = d[0], v = k === void 0 ? "" : k, h = d[1], P = h === void 0 ? "" : h;
-      _ && (v = String(F(v))), u = e.timeToValue([v, P], Q[l]), e.handlers.value(u, r);
-    }), p(m(e), "_getHoursAndMinutesProps", function() {
-      var r = e.asProps, _ = r.is12Hour, i = r.size, u = r.disabled, l = r.getI18nText, f = e.valueToTime(e.value);
+var TimePickerRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(TimePickerRoot2, _Component);
+  var _super = _createSuper(TimePickerRoot2);
+  function TimePickerRoot2() {
+    var _this;
+    _classCallCheck(this, TimePickerRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "hoursInputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "minutesInputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "_lastMeridiem", "AM");
+    _defineProperty(_assertThisInitialized(_this), "handleValueChange", function(value, field, event) {
+      var is12Hour = _this.asProps.is12Hour;
+      var _assertThisInitialize = _assertThisInitialized(_this), meridiem = _assertThisInitialize.meridiem;
+      var time;
+      if (field) {
+        time = _this.value.split(":");
+        time[MAP_FIELD_TO_TIME[field]] = value;
+      } else {
+        time = value.split(":");
+      }
+      var _time = time, _time2 = _slicedToArray(_time, 2), _time2$ = _time2[0], hours = _time2$ === void 0 ? "" : _time2$, _time2$2 = _time2[1], minutes = _time2$2 === void 0 ? "" : _time2$2;
+      if (is12Hour) hours = String(formatHoursTo12(hours));
+      value = _this.timeToValue([hours, minutes], meridiem);
+      _this.handlers.value(value, event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMeridiemClick", function(event) {
+      var is12Hour = _this.asProps.is12Hour;
+      var _assertThisInitialize2 = _assertThisInitialized(_this), value = _assertThisInitialize2.value, meridiem = _assertThisInitialize2.meridiem;
+      var _value$split = value.split(":"), _value$split2 = _slicedToArray(_value$split, 2), _value$split2$ = _value$split2[0], hours = _value$split2$ === void 0 ? "" : _value$split2$, _value$split2$2 = _value$split2[1], minutes = _value$split2$2 === void 0 ? "" : _value$split2$2;
+      if (is12Hour) hours = String(formatHoursTo12(hours));
+      value = _this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);
+      _this.handlers.value(value, event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "_getHoursAndMinutesProps", function() {
+      var _this$asProps = _this.asProps, is12Hour = _this$asProps.is12Hour, size = _this$asProps.size, disabled = _this$asProps.disabled, getI18nText = _this$asProps.getI18nText;
+      var time = _this.valueToTime(_this.value);
       return {
-        time: f,
-        size: i,
-        is12Hour: _,
-        disabled: u,
-        $onValueChange: e.handleValueChange,
-        minutesInputRef: e.minutesInputRef,
-        hoursInputRef: e.hoursInputRef,
-        _getI18nText: l
+        time,
+        size,
+        is12Hour,
+        disabled,
+        $onValueChange: _this.handleValueChange,
+        minutesInputRef: _this.minutesInputRef,
+        hoursInputRef: _this.hoursInputRef,
+        _getI18nText: getI18nText
       };
-    }), p(m(e), "getHoursProps", function() {
-      return b(b({}, e._getHoursAndMinutesProps()), {}, {
-        ref: e.hoursInputRef
+    });
+    _defineProperty(_assertThisInitialized(_this), "getHoursProps", function() {
+      return _objectSpread(_objectSpread({}, _this._getHoursAndMinutesProps()), {}, {
+        ref: _this.hoursInputRef
       });
-    }), p(m(e), "getMinutesProps", function() {
-      return b(b({}, e._getHoursAndMinutesProps()), {}, {
-        ref: e.minutesInputRef
+    });
+    _defineProperty(_assertThisInitialized(_this), "getMinutesProps", function() {
+      return _objectSpread(_objectSpread({}, _this._getHoursAndMinutesProps()), {}, {
+        ref: _this.minutesInputRef
       });
-    }), e;
+    });
+    return _this;
   }
-  return z(s, [{
+  _createClass(TimePickerRoot2, [{
     key: "uncontrolledProps",
     value: (
       // default AM
-      function() {
+      function uncontrolledProps() {
         return {
           value: null,
           title: null
@@ -111,37 +153,55 @@ var S = /* @__PURE__ */ function(a) {
     )
   }, {
     key: "componentDidMount",
-    value: function() {
-      var t, o = this.asProps, n = o.id, r = o["aria-describedby"], _ = "[for=".concat(n, "]"), i = (t = document.querySelector(_)) !== null && t !== void 0 ? t : document.querySelector("#".concat(r));
-      i && this.handlers.title(i.textContent);
+    value: function componentDidMount() {
+      var _document$querySelect;
+      var _this$asProps2 = this.asProps, id = _this$asProps2.id, ariaDescribedBy = _this$asProps2["aria-describedby"];
+      var selector = "[for=".concat(id, "]");
+      var titleElement = (_document$querySelect = document.querySelector(selector)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("#".concat(ariaDescribedBy));
+      if (titleElement) {
+        this.handlers.title(titleElement.textContent);
+      }
     }
   }, {
     key: "value",
-    get: function() {
-      var t = this.asProps.value;
-      return t ?? ":";
+    get: function get() {
+      var value = this.asProps.value;
+      return value === null || value === void 0 ? ":" : value;
     }
   }, {
     key: "meridiem",
-    get: function() {
-      var t = this.asProps.value, o = t.split(":"), n = w(o, 1), r = n[0], _ = r === void 0 ? "" : r, i = x(_, NaN);
-      return Number.isNaN(i) || (this._lastMeridiem = W(i)), this._lastMeridiem;
+    get: function get() {
+      var value = this.asProps.value;
+      var _value$split3 = value.split(":"), _value$split4 = _slicedToArray(_value$split3, 1), _value$split4$ = _value$split4[0], hours = _value$split4$ === void 0 ? "" : _value$split4$;
+      var nHours = intOrDefault(hours, NaN);
+      if (!Number.isNaN(nHours)) {
+        this._lastMeridiem = meridiemByHours(nHours);
+      }
+      return this._lastMeridiem;
     }
   }, {
     key: "valueToTime",
-    value: function(t) {
-      var o = this.asProps.is12Hour, n = t.split(":"), r = w(n, 2), _ = r[0], i = _ === void 0 ? "" : _, u = r[1], l = u === void 0 ? "" : u;
-      return o && (i = F(i)), i = I(i), l = I(l), [i, l];
+    value: function valueToTime(value) {
+      var is12Hour = this.asProps.is12Hour;
+      var _value$split5 = value.split(":"), _value$split6 = _slicedToArray(_value$split5, 2), _value$split6$ = _value$split6[0], hours = _value$split6$ === void 0 ? "" : _value$split6$, _value$split6$2 = _value$split6[1], minutes = _value$split6$2 === void 0 ? "" : _value$split6$2;
+      if (is12Hour) hours = formatHoursTo12(hours);
+      hours = withLeadingZero(hours);
+      minutes = withLeadingZero(minutes);
+      return [hours, minutes];
     }
   }, {
     key: "timeToValue",
-    value: function(t, o) {
-      var n = this.asProps.is12Hour, r = w(t, 2), _ = r[0], i = _ === void 0 ? "" : _, u = r[1], l = u === void 0 ? "" : u;
-      return i = x(i, i), l = x(l, l), n && (i = X(i, o)), "".concat(i, ":").concat(l);
+    value: function timeToValue(time, meridiem) {
+      var is12Hour = this.asProps.is12Hour;
+      var _time3 = _slicedToArray(time, 2), _time3$ = _time3[0], hours = _time3$ === void 0 ? "" : _time3$, _time3$2 = _time3[1], minutes = _time3$2 === void 0 ? "" : _time3$2;
+      hours = intOrDefault(hours, hours);
+      minutes = intOrDefault(minutes, minutes);
+      if (is12Hour) hours = formatHoursTo24(hours, meridiem);
+      return "".concat(hours, ":").concat(minutes);
     }
   }, {
     key: "getSeparatorProps",
-    value: function() {
+    value: function getSeparatorProps() {
       return {
         disabled: this.asProps.disabled,
         hoursInputRef: this.hoursInputRef
@@ -149,86 +209,97 @@ var S = /* @__PURE__ */ function(a) {
     }
   }, {
     key: "getFormatProps",
-    value: function() {
-      var t = this.asProps, o = t.size, n = t.disabled, r = t.disablePortal, _ = t.getI18nText;
+    value: function getFormatProps() {
+      var _this$asProps3 = this.asProps, size = _this$asProps3.size, disabled = _this$asProps3.disabled, disablePortal = _this$asProps3.disablePortal, getI18nText = _this$asProps3.getI18nText;
       return {
-        size: o,
-        disabled: n,
-        disablePortal: r,
+        size,
+        disabled,
+        disablePortal,
         meridiem: this.meridiem,
         onClick: this.handleMeridiemClick,
-        getI18nText: _
+        getI18nText
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var t = this.asProps, o, n = B, r = this.asProps, _ = r.styles, i = r.Children, u = r.value, l = r.is12Hour, f = r.getI18nText, d = r.title, k = this.valueToTime(this.value), v = w(k, 2), h = v[0], P = v[1], T = u ? "".concat(d, " ").concat(f("title", {
-        time: "".concat(h, ":").concat(I(P)),
-        meridiem: l ? this.meridiem : ""
-      })) : "".concat(d, " ").concat(f("titleEmpty"));
-      return o = N(_), /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(n, o.cn("STimePicker", b({}, C({
-        role: "group",
-        "aria-label": T,
-        __excludeProps: ["value", "title"]
-      }, t))), /* @__PURE__ */ g.createElement(i, o.cn("Children", {}))));
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var STimePicker = Input;
+      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, value = _this$asProps4.value, is12Hour = _this$asProps4.is12Hour, getI18nText = _this$asProps4.getI18nText, title = _this$asProps4.title;
+      var _this$valueToTime = this.valueToTime(this.value), _this$valueToTime2 = _slicedToArray(_this$valueToTime, 2), hours = _this$valueToTime2[0], minutes = _this$valueToTime2[1];
+      var label = value ? "".concat(title, " ").concat(getI18nText("title", {
+        time: "".concat(hours, ":").concat(withLeadingZero(minutes)),
+        meridiem: is12Hour ? this.meridiem : ""
+      })) : "".concat(title, " ").concat(getI18nText("titleEmpty"));
+      return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(STimePicker, _ref3.cn("STimePicker", _objectSpread({}, assignProps({
+        "role": "group",
+        "aria-label": label,
+        "__excludeProps": ["value", "title"]
+      }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))));
     }
-  }]), s;
-}(R);
-p(S, "displayName", "TimePicker");
-p(S, "style", K);
-p(S, "enhance", [G(E), J()]);
-p(S, "defaultProps", function(a) {
-  var c = a.is12Hour;
+  }]);
+  return TimePickerRoot2;
+}(Component);
+_defineProperty(TimePickerRoot, "displayName", "TimePicker");
+_defineProperty(TimePickerRoot, "style", style);
+_defineProperty(TimePickerRoot, "enhance", [i18nEnhance(localizedMessages), keyboardFocusEnhance()]);
+_defineProperty(TimePickerRoot, "defaultProps", function(_ref5) {
+  var is12Hour = _ref5.is12Hour;
   return {
     defaultValue: "",
     size: "m",
-    children: /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(y.Hours, null), /* @__PURE__ */ g.createElement(y.Separator, null), /* @__PURE__ */ g.createElement(y.Minutes, null), c && /* @__PURE__ */ g.createElement(y.Format, null)),
-    i18n: E,
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TimePicker.Hours, null), /* @__PURE__ */ React.createElement(TimePicker.Separator, null), /* @__PURE__ */ React.createElement(TimePicker.Minutes, null), is12Hour && /* @__PURE__ */ React.createElement(TimePicker.Format, null)),
+    i18n: localizedMessages,
     locale: "en",
     defaultTitle: ""
   };
 });
-var A = /* @__PURE__ */ function(a) {
-  H(s, a);
-  var c = $(s);
-  function s() {
-    var e;
-    M(this, s);
-    for (var t = arguments.length, o = new Array(t), n = 0; n < t; n++)
-      o[n] = arguments[n];
-    return e = c.call.apply(c, [this].concat(o)), p(m(e), "handlerClick", function() {
-      if (e.asProps.hoursInputRef.current) {
-        var r;
-        (r = e.asProps.hoursInputRef.current) === null || r === void 0 || r.focus();
+var Separator = /* @__PURE__ */ function(_Component2) {
+  _inherits(Separator2, _Component2);
+  var _super2 = _createSuper(Separator2);
+  function Separator2() {
+    var _this2;
+    _classCallCheck(this, Separator2);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "handlerClick", function() {
+      if (_this2.asProps.hoursInputRef.current) {
+        var _this2$asProps$hoursI;
+        (_this2$asProps$hoursI = _this2.asProps.hoursInputRef.current) === null || _this2$asProps$hoursI === void 0 ? void 0 : _this2$asProps$hoursI.focus();
       }
-    }), e;
+    });
+    return _this2;
   }
-  return z(s, [{
+  _createClass(Separator2, [{
     key: "render",
-    value: function() {
-      var t = this.asProps, o, n = L, r = this.asProps.styles;
-      return o = N(r), /* @__PURE__ */ g.createElement(n, o.cn("STimePickerSeparator", b({}, C({
-        onClick: this.handlerClick,
+    value: function render() {
+      var _ref2 = this.asProps, _ref4;
+      var STimePickerSeparator = Box;
+      var styles = this.asProps.styles;
+      return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STimePickerSeparator, _ref4.cn("STimePickerSeparator", _objectSpread({}, assignProps({
+        "onClick": this.handlerClick,
         "aria-hidden": "true"
-      }, t))));
+      }, _ref2))));
     }
-  }]), s;
-}(R);
-p(A, "defaultProps", {
+  }]);
+  return Separator2;
+}(Component);
+_defineProperty(Separator, "defaultProps", {
   children: ":"
 });
-var y = q(S, {
-  Hours: O,
-  Minutes: j,
-  Separator: A,
-  Format: Z
+var TimePicker = createComponent(TimePickerRoot, {
+  Hours,
+  Minutes,
+  Separator,
+  Format: TimePickerFormat
 });
 export {
-  y as default,
-  F as formatHoursTo12,
-  X as formatHoursTo24,
-  x as intOrDefault,
-  W as meridiemByHours,
-  I as withLeadingZero
+  TimePicker as default,
+  formatHoursTo12,
+  formatHoursTo24,
+  intOrDefault,
+  meridiemByHours,
+  withLeadingZero
 };

package/lib/esm/index.mjs

@@ -1,9 +1,9 @@
-import { default as e, formatHoursTo12 as t, formatHoursTo24 as a, intOrDefault as f, meridiemByHours as i, withLeadingZero as m } from "./TimePicker.mjs";
+import { default as default2, formatHoursTo12, formatHoursTo24, intOrDefault, meridiemByHours, withLeadingZero } from "./TimePicker.mjs";
 export {
-  e as default,
-  t as formatHoursTo12,
-  a as formatHoursTo24,
-  f as intOrDefault,
-  i as meridiemByHours,
-  m as withLeadingZero
+  default2 as default,
+  formatHoursTo12,
+  formatHoursTo24,
+  intOrDefault,
+  meridiemByHours,
+  withLeadingZero
 };

package/lib/esm/style/time-picker.shadow.css

@@ -0,0 +1,121 @@
+STimePicker {
+  position: relative;
+  width: auto;
+  outline: none;
+}
+
+STimePicker[keyboardFocused]:focus {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+}
+
+STimePicker[disabled] {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  cursor: default;
+}
+
+SPickerInput {
+  box-sizing: content-box;
+  text-align: center;
+  z-index: 1;
+  height: 1.5em;
+
+  &[placeholder] {
+    text-overflow: initial;
+  }
+  &:focus {
+    background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
+  }
+}
+
+SPickerInput[size='m'] {
+  width: 19px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}
+
+SPickerInput[size='l'] {
+  width: 21px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}
+
+SPickerFormat {
+  flex-shrink: 0;
+  position: relative;
+  display: inline-flex;
+  padding: 0;
+  white-space: nowrap;
+  font-family: inherit;
+  font-weight: var(--intergalactic-medium, 500);
+  line-height: normal;
+  text-decoration: none;
+  align-items: center;
+  border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
+  border-radius: 0 var(--intergalactic-control-rounded, 6px)
+    var(--intergalactic-control-rounded, 6px) 0;
+  outline: 0;
+  box-shadow: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: visible;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
+
+  &:hover {
+    color: var(--intergalactic-text-secondary, #6c6e79);
+    background-color: var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9);
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-secondary, #6c6e79);
+    background-color: var(--intergalactic-bg-secondary-neutral-active, #c4c7cf);
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+SPickerFormat[size='m'] {
+  height: var(--intergalactic-form-control-m, 28px);
+  font-size: var(--intergalactic-fs-200, 14px);
+  /* disable-tokens-validator */
+  margin: 0 -1px 0 0;
+  & SPickerFormatText {
+    margin: 0 var(--intergalactic-spacing-2x, 8px);
+  }
+}
+
+SPickerFormat[size='l'] {
+  height: var(--intergalactic-form-control-l, 40px);
+  font-size: var(--intergalactic-fs-300, 16px);
+  margin: 0 calc(-1 * var(--intergalactic-spacing-1x, 4px)) 0 0;
+  & SPickerFormatText {
+    margin: 0 var(--intergalactic-spacing-3x, 12px);
+  }
+}
+
+SPickerFormat[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  cursor: default;
+  pointer-events: none;
+  border-color: transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf);
+}
+
+SPickerFormat[keyboardFocused] {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+}
+
+STimePickerSeparator {
+  color: var(--intergalactic-text-primary, #191b23);
+}
+
+STimePickerSeparator[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  pointer-events: none;
+}