@wix/editor-react-components 1.2774.0 → 1.2776.0

package/dist/site/components/TimePicker/component.js

@@ -1,557 +1,135 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import * as React from "react";
-import React__default, { useContext, useState, useMemo, useRef, useEffect, forwardRef, createContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Button.js";
-import { $ as $72abaeab4d80592f$export$9fc1347d4195ccb3, a as $f11fb0bcf1b2687a$export$61c6a8c84e605fb6, b as $d3f049242431219c$export$45fda7c47f93fd48, c as $b3526bc71400be8d$export$d39e1813b3bdd0e1, d as $d3f049242431219c$export$6d3443f2c48bfc20, e as $44f671af83e7d9e0$export$2de4954e8ae13b9f, f as $58246871e4652552$export$c9698ec7f05a07e1, g as $40825cdb76e74f70$export$7edc06cf1783b30f, h as $40825cdb76e74f70$export$336ab7fa954c4b5f, i as $40825cdb76e74f70$export$5eaee2322dd727eb } from "../chunks/DateField.js";
+import { $ as $58246871e4652552$export$c9698ec7f05a07e1, a as $40825cdb76e74f70$export$7edc06cf1783b30f, b as $40825cdb76e74f70$export$336ab7fa954c4b5f, c as $40825cdb76e74f70$export$5eaee2322dd727eb } from "../chunks/DateField.js";
 import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6, a as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/Input.js";
-import { $ as $e969f22b6713ca4a$export$ae780daf29e6d456, a as $bbaa08b3cd72f041$export$9d1611c77c2fe928, b as $390e54f620492c70$export$f680877a34711e37, c as $d1116acdf220c2da$export$4c014de7c8940b4c, d as $8f5a2122b0992be3$export$630ff653c5ada6a9, e as $8f5a2122b0992be3$export$b9b3dfddab17db27, f as $d1116acdf220c2da$export$13f3202a3e5ddd5, g as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, h as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
-import { $ as $c7eafbbe1ea5834e$export$535bd6ca7f90a273, a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, b as $64fa3d84918910a7$export$2881499e37b75b9a, c as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$4d86445c2cf5e3, e as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../chunks/filterDOMProps.js";
-import __rspack_external_react_dom_7136dc57__default from "react-dom";
+import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, a as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
 import { $ as $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 } from "../chunks/I18nProvider.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { T as TranslationsDefinition } from "../chunks/index4.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { g as getTranslation } from "../chunks/getTranslation.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { E as EMPTY_VALUE, s as selectors, T as TestIds, a as TRANSLATIONS_NAMESPACE, d as defaultValues, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys, V as VALUE_MISSING_MESSAGE } from "../chunks/constants2.js";
-import { u as useValidatedField, R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
-const $c07df45195231803$var$Context = /* @__PURE__ */ React__default.createContext(null);
-function $c07df45195231803$export$178405afcd8c5eb(props) {
-  let { children } = props;
-  let parent = useContext($c07df45195231803$var$Context);
-  let [modalCount, setModalCount] = useState(0);
-  let context = useMemo(() => ({
-    parent,
-    modalCount,
-    addModal() {
-      setModalCount((count) => count + 1);
-      if (parent) parent.addModal();
-    },
-    removeModal() {
-      setModalCount((count) => count - 1);
-      if (parent) parent.removeModal();
-    }
-  }), [
-    parent,
-    modalCount
-  ]);
-  return /* @__PURE__ */ React__default.createElement($c07df45195231803$var$Context.Provider, {
-    value: context
-  }, children);
-}
-function $c07df45195231803$export$d9aaed4c3ece1bc0() {
-  let context = useContext($c07df45195231803$var$Context);
-  return {
-    modalProviderProps: {
-      "aria-hidden": context && context.modalCount > 0 ? true : void 0
-    }
-  };
-}
-function $c07df45195231803$var$OverlayContainerDOM(props) {
-  let { modalProviderProps } = $c07df45195231803$export$d9aaed4c3ece1bc0();
-  return /* @__PURE__ */ React__default.createElement("div", {
-    "data-overlay-container": true,
-    ...props,
-    ...modalProviderProps
-  });
-}
-function $c07df45195231803$export$bf688221f59024e5(props) {
-  return /* @__PURE__ */ React__default.createElement($c07df45195231803$export$178405afcd8c5eb, null, /* @__PURE__ */ React__default.createElement($c07df45195231803$var$OverlayContainerDOM, props));
-}
-function $c07df45195231803$export$b47c3594eab58386(props) {
-  let isSSR = $c7eafbbe1ea5834e$export$535bd6ca7f90a273();
-  let { portalContainer = isSSR ? null : document.body, ...rest } = props;
-  let { getContainer } = $72abaeab4d80592f$export$9fc1347d4195ccb3();
-  if (!props.portalContainer && getContainer) portalContainer = getContainer();
-  React__default.useEffect(() => {
-    if (portalContainer == null ? void 0 : portalContainer.closest("[data-overlay-container]")) throw new Error("An OverlayContainer must not be inside another container. Please change the portalContainer prop.");
-  }, [
-    portalContainer
-  ]);
-  if (!portalContainer) return null;
-  let contents = /* @__PURE__ */ React__default.createElement($c07df45195231803$export$bf688221f59024e5, rest);
-  return /* @__PURE__ */ __rspack_external_react_dom_7136dc57__default.createPortal(contents, portalContainer);
-}
-function $8c383cffc84c9982$export$1c4b08e0eca38426(props, state) {
-  let domProps = $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props, {
-    labelable: true
-  });
-  let { hoverProps } = $e969f22b6713ca4a$export$ae780daf29e6d456({
-    onHoverStart: () => state == null ? void 0 : state.open(true),
-    onHoverEnd: () => state == null ? void 0 : state.close()
-  });
-  return {
-    tooltipProps: $bbaa08b3cd72f041$export$9d1611c77c2fe928(domProps, hoverProps, {
-      role: "tooltip"
-    })
-  };
-}
-function $85908aa8a35f0fac$export$a6da6c504e4bba8b(props, state, ref) {
-  let { isDisabled, trigger, shouldCloseOnPress = true } = props;
-  let tooltipId = $390e54f620492c70$export$f680877a34711e37();
-  let isHovered = useRef(false);
-  let isFocused = useRef(false);
-  let handleShow = () => {
-    if (isHovered.current || isFocused.current) state.open(isFocused.current);
-  };
-  let handleHide = (immediate) => {
-    if (!isHovered.current && !isFocused.current) state.close(immediate);
-  };
-  useEffect(() => {
-    let onKeyDown = (e) => {
-      if (ref && ref.current) {
-        if (e.key === "Escape") {
-          e.stopPropagation();
-          state.close(true);
-        }
-      }
-    };
-    if (state.isOpen) {
-      document.addEventListener("keydown", onKeyDown, true);
-      return () => {
-        document.removeEventListener("keydown", onKeyDown, true);
-      };
-    }
-  }, [
-    ref,
-    state
-  ]);
-  let onHoverStart = () => {
-    if (trigger === "focus") return;
-    if ($8f5a2122b0992be3$export$630ff653c5ada6a9() === "pointer") isHovered.current = true;
-    else isHovered.current = false;
-    handleShow();
-  };
-  let onHoverEnd = () => {
-    if (trigger === "focus") return;
-    isFocused.current = false;
-    isHovered.current = false;
-    handleHide();
-  };
-  let onPressStart = () => {
-    if (!shouldCloseOnPress) return;
-    isFocused.current = false;
-    isHovered.current = false;
-    handleHide(true);
-  };
-  let onFocus = () => {
-    let isVisible = $8f5a2122b0992be3$export$b9b3dfddab17db27();
-    if (isVisible) {
-      isFocused.current = true;
-      handleShow();
-    }
-  };
-  let onBlur = () => {
-    isFocused.current = false;
-    isHovered.current = false;
-    handleHide(true);
-  };
-  let { hoverProps } = $e969f22b6713ca4a$export$ae780daf29e6d456({
-    isDisabled,
-    onHoverStart,
-    onHoverEnd
-  });
-  let { focusableProps } = $d1116acdf220c2da$export$4c014de7c8940b4c({
-    isDisabled,
-    onFocus,
-    onBlur
-  }, ref);
-  return {
-    triggerProps: {
-      "aria-describedby": state.isOpen ? tooltipId : void 0,
-      ...$bbaa08b3cd72f041$export$9d1611c77c2fe928(focusableProps, hoverProps, {
-        onPointerDown: onPressStart,
-        onKeyDown: onPressStart
-      }),
-      tabIndex: void 0
-    },
-    tooltipProps: {
-      id: tooltipId
-    }
-  };
-}
-const $3834487504f4fc00$var$TOOLTIP_DELAY = 1500;
-const $3834487504f4fc00$var$TOOLTIP_COOLDOWN = 500;
-let $3834487504f4fc00$var$tooltips = {};
-let $3834487504f4fc00$var$tooltipId = 0;
-let $3834487504f4fc00$var$globalWarmedUp = false;
-let $3834487504f4fc00$var$globalWarmUpTimeout = null;
-let $3834487504f4fc00$var$globalCooldownTimeout = null;
-function $3834487504f4fc00$export$4d40659c25ecb50b(props = {}) {
-  let { delay = $3834487504f4fc00$var$TOOLTIP_DELAY, closeDelay = $3834487504f4fc00$var$TOOLTIP_COOLDOWN } = props;
-  let { isOpen, open, close } = $f11fb0bcf1b2687a$export$61c6a8c84e605fb6(props);
-  let id = useMemo(() => `${++$3834487504f4fc00$var$tooltipId}`, []);
-  let closeTimeout = useRef(null);
-  let closeCallback = useRef(close);
-  let ensureTooltipEntry = () => {
-    $3834487504f4fc00$var$tooltips[id] = hideTooltip;
-  };
-  let closeOpenTooltips = () => {
-    for (let hideTooltipId in $3834487504f4fc00$var$tooltips) if (hideTooltipId !== id) {
-      $3834487504f4fc00$var$tooltips[hideTooltipId](true);
-      delete $3834487504f4fc00$var$tooltips[hideTooltipId];
-    }
-  };
-  let showTooltip = () => {
-    if (closeTimeout.current) clearTimeout(closeTimeout.current);
-    closeTimeout.current = null;
-    closeOpenTooltips();
-    ensureTooltipEntry();
-    $3834487504f4fc00$var$globalWarmedUp = true;
-    open();
-    if ($3834487504f4fc00$var$globalWarmUpTimeout) {
-      clearTimeout($3834487504f4fc00$var$globalWarmUpTimeout);
-      $3834487504f4fc00$var$globalWarmUpTimeout = null;
-    }
-    if ($3834487504f4fc00$var$globalCooldownTimeout) {
-      clearTimeout($3834487504f4fc00$var$globalCooldownTimeout);
-      $3834487504f4fc00$var$globalCooldownTimeout = null;
-    }
-  };
-  let hideTooltip = (immediate) => {
-    if (immediate || closeDelay <= 0) {
-      if (closeTimeout.current) clearTimeout(closeTimeout.current);
-      closeTimeout.current = null;
-      closeCallback.current();
-    } else if (!closeTimeout.current) closeTimeout.current = setTimeout(() => {
-      closeTimeout.current = null;
-      closeCallback.current();
-    }, closeDelay);
-    if ($3834487504f4fc00$var$globalWarmUpTimeout) {
-      clearTimeout($3834487504f4fc00$var$globalWarmUpTimeout);
-      $3834487504f4fc00$var$globalWarmUpTimeout = null;
-    }
-    if ($3834487504f4fc00$var$globalWarmedUp) {
-      if ($3834487504f4fc00$var$globalCooldownTimeout) clearTimeout($3834487504f4fc00$var$globalCooldownTimeout);
-      $3834487504f4fc00$var$globalCooldownTimeout = setTimeout(() => {
-        delete $3834487504f4fc00$var$tooltips[id];
-        $3834487504f4fc00$var$globalCooldownTimeout = null;
-        $3834487504f4fc00$var$globalWarmedUp = false;
-      }, Math.max($3834487504f4fc00$var$TOOLTIP_COOLDOWN, closeDelay));
-    }
-  };
-  let warmupTooltip = () => {
-    closeOpenTooltips();
-    ensureTooltipEntry();
-    if (!isOpen && !$3834487504f4fc00$var$globalWarmedUp) {
-      if ($3834487504f4fc00$var$globalWarmUpTimeout) clearTimeout($3834487504f4fc00$var$globalWarmUpTimeout);
-      $3834487504f4fc00$var$globalWarmUpTimeout = setTimeout(() => {
-        $3834487504f4fc00$var$globalWarmUpTimeout = null;
-        $3834487504f4fc00$var$globalWarmedUp = true;
-        showTooltip();
-      }, delay);
-    } else if (!isOpen) showTooltip();
-  };
-  useEffect(() => {
-    closeCallback.current = close;
-  }, [
-    close
-  ]);
-  useEffect(() => {
-    return () => {
-      if (closeTimeout.current) clearTimeout(closeTimeout.current);
-      let tooltip2 = $3834487504f4fc00$var$tooltips[id];
-      if (tooltip2) delete $3834487504f4fc00$var$tooltips[id];
-    };
-  }, [
-    id
-  ]);
-  return {
-    isOpen,
-    open: (immediate) => {
-      if (!immediate && delay > 0 && !closeTimeout.current) warmupTooltip();
-      else showTooltip();
-    },
-    close: hideTooltip
-  };
-}
-const $4e3b923658d69c60$export$7a7623236eec67fa = /* @__PURE__ */ createContext(null);
-const $4e3b923658d69c60$export$39ae08fa83328b12 = /* @__PURE__ */ createContext(null);
-function $4e3b923658d69c60$export$8c610744efcf8a1d(props) {
-  let state = $3834487504f4fc00$export$4d40659c25ecb50b(props);
-  let ref = useRef(null);
-  let { triggerProps, tooltipProps } = $85908aa8a35f0fac$export$a6da6c504e4bba8b(props, state, ref);
-  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $4e3b923658d69c60$export$7a7623236eec67fa,
-        state
-      ],
-      [
-        $4e3b923658d69c60$export$39ae08fa83328b12,
-        {
-          ...tooltipProps,
-          triggerRef: ref
-        }
-      ]
-    ]
-  }, /* @__PURE__ */ React__default.createElement($d1116acdf220c2da$export$13f3202a3e5ddd5, {
-    ...triggerProps,
-    ref
-  }, props.children));
-}
-const $4e3b923658d69c60$export$28c660c63b792dea = /* @__PURE__ */ forwardRef(function Tooltip({ UNSTABLE_portalContainer, ...props }, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e3b923658d69c60$export$39ae08fa83328b12);
-  let contextState = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
-  let localState = $3834487504f4fc00$export$4d40659c25ecb50b(props);
-  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-  let isExiting = $d3f049242431219c$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
-  if (!state.isOpen && !isExiting) return null;
-  return /* @__PURE__ */ React__default.createElement($c07df45195231803$export$b47c3594eab58386, {
-    portalContainer: UNSTABLE_portalContainer
-  }, /* @__PURE__ */ React__default.createElement($4e3b923658d69c60$var$TooltipInner, {
-    ...props,
-    tooltipRef: ref,
-    isExiting
-  }));
-});
-function $4e3b923658d69c60$var$TooltipInner(props) {
-  let state = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
-  let arrowRef = useRef(null);
-  let { overlayProps, arrowProps, placement, triggerAnchorPoint } = $b3526bc71400be8d$export$d39e1813b3bdd0e1({
-    placement: props.placement || "top",
-    targetRef: props.triggerRef,
-    overlayRef: props.tooltipRef,
-    arrowRef,
-    offset: props.offset,
-    crossOffset: props.crossOffset,
-    isOpen: state.isOpen,
-    arrowBoundaryOffset: props.arrowBoundaryOffset,
-    shouldFlip: props.shouldFlip,
-    containerPadding: props.containerPadding,
-    onClose: () => state.close(true)
-  });
-  let isEntering = $d3f049242431219c$export$6d3443f2c48bfc20(props.tooltipRef, !!placement) || props.isEntering || false;
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultClassName: "react-aria-Tooltip",
-    values: {
-      placement,
-      isEntering,
-      isExiting: props.isExiting,
-      state
-    }
-  });
-  props = $bbaa08b3cd72f041$export$9d1611c77c2fe928(props, overlayProps);
-  let { tooltipProps } = $8c383cffc84c9982$export$1c4b08e0eca38426(props, state);
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  return /* @__PURE__ */ React__default.createElement("div", {
-    ...$bbaa08b3cd72f041$export$9d1611c77c2fe928(DOMProps, renderProps, tooltipProps),
-    ref: props.tooltipRef,
-    style: {
-      ...overlayProps.style,
-      "--trigger-anchor-point": triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : void 0,
-      ...renderProps.style
-    },
-    "data-placement": placement !== null && placement !== void 0 ? placement : void 0,
-    "data-entering": isEntering || void 0,
-    "data-exiting": props.isExiting || void 0
-  }, /* @__PURE__ */ React__default.createElement($44f671af83e7d9e0$export$2de4954e8ae13b9f.Provider, {
-    value: {
-      ...arrowProps,
-      placement,
-      ref: arrowRef
-    }
-  }, renderProps.children));
-}
-const DismissSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M8.43933983,9.5 L6,7.06066017 C5.70710678,6.76776695 5.70710678,6.29289322 6,6 C6.29289322,5.70710678 6.76776695,5.70710678 7.06066017,6 L9.5,8.43933983 L11.9393398,6 C12.232233,5.70710678 12.7071068,5.70710678 13,6 C13.2928932,6.29289322 13.2928932,6.76776695 13,7.06066017 L10.5606602,9.5 L13,11.9393398 C13.2928932,12.232233 13.2928932,12.7071068 13,13 C12.7071068,13.2928932 12.232233,13.2928932 11.9393398,13 L9.5,10.5606602 L7.06066017,13 C6.76776695,13.2928932 6.29289322,13.2928932 6,13 C5.70710678,12.7071068 5.70710678,12.232233 6,11.9393398 L8.43933983,9.5 Z" }));
-DismissSmall.displayName = "DismissSmall";
-var DismissSmall_default = DismissSmall;
+import { s as selectors, T as TestIds, D as DesignStates, a as DEFAULT_LOCALE, A as AriaLabels } from "../chunks/constants2.js";
 const root = "root__dzkbY";
 const timePicker = "timePicker__j78My";
-const labelRow = "labelRow__qoC8g";
 const label = "label__THO5j";
-const tooltipButton = "tooltipButton__ISWIR";
-const tooltip = "tooltip__FTZhM";
-const group = "group__6HZy7";
-const field = "field__mnQwh";
 const description = "description__ePprf";
 const errorMessage = "errorMessage__zxbOJ";
+const group = "group__6HZy7";
+const field = "field__mnQwh";
 const segment = "segment__OtazP";
-const clearButton = "clearButton__Bto7s";
-const clearIcon = "clearIcon__x11eI";
 const styles = {
   root,
   timePicker,
-  labelRow,
   label,
-  tooltipButton,
-  tooltip,
-  group,
-  field,
   description,
   errorMessage,
-  segment,
-  clearButton,
-  clearIcon
+  group,
+  field,
+  segment
 };
-const readString = (prop) => typeof prop === "string" ? prop : EMPTY_VALUE;
+const readText = (prop, fallback) => typeof prop === "string" ? prop : fallback;
 const readBool = (prop, fallback) => typeof prop === "boolean" ? prop : fallback;
-const toTimeValue = (iso) => {
-  if (!iso) {
+const toTimeValue = (localTime) => {
+  if (!localTime) {
     return null;
   }
   try {
-    return $58246871e4652552$export$c9698ec7f05a07e1(iso);
+    return $58246871e4652552$export$c9698ec7f05a07e1(localTime.replace(/Z$/, ""));
   } catch {
     return null;
   }
 };
 const pad = (n) => String(n).padStart(2, "0");
-const toIso = (time, granularity) => {
+const toLocalTime = (time) => {
   if (!time) {
-    return EMPTY_VALUE;
+    return void 0;
   }
   const hoursAndMinutes = `${pad(time.hour)}:${pad(time.minute)}`;
-  return granularity === "second" ? `${hoursAndMinutes}:${pad(time.second)}` : hoursAndMinutes;
+  return hoursAndMinutes;
 };
 const useTimePickerValue = (params) => {
-  const { value, onChange, granularity } = params;
-  const valueStr = readString(value);
-  const [timeValue, setTimeValue] = useState(
-    () => toTimeValue(valueStr)
-  );
-  const syncSignature = `${valueStr}::${granularity}`;
-  const [prevSignature, setPrevSignature] = useState(syncSignature);
-  if (prevSignature !== syncSignature) {
-    setPrevSignature(syncSignature);
-    setTimeValue(toTimeValue(valueStr));
-  }
+  const { value, onValueChange } = params;
+  const timeValue = toTimeValue(value);
   const handleChange = (next) => {
-    setTimeValue(next);
-    onChange(toIso(next, granularity));
+    onValueChange(toLocalTime(next));
   };
   return {
     timeValue,
-    handleChange,
-    // Key off the live parsed value, not the raw prop — a standalone picker
-    // updates `timeValue` internally while `props.value` may stay stale, so a
-    // prop-based check would keep the clear control / required error out of sync.
-    hasValue: Boolean(timeValue)
+    handleChange
   };
 };
-const useTimeConstraints = (params) => {
-  const minTimeStr = readString(params.minTime);
-  const maxTimeStr = readString(params.maxTime);
-  return useMemo(
-    () => ({
-      minValue: toTimeValue(minTimeStr) ?? void 0,
-      maxValue: toTimeValue(maxTimeStr) ?? void 0
-    }),
-    [minTimeStr, maxTimeStr]
-  );
-};
 const TimePickerField = ({
-  clearButton: clearButton2,
   elementProps
 }) => {
-  var _a, _b;
+  var _a;
   const segmentClassName = clsx(
     styles.segment,
     selectors.segment,
     (_a = elementProps == null ? void 0 : elementProps.segment) == null ? void 0 : _a.className
   );
-  const renderSegments = (seg) => /* @__PURE__ */ jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { segment: seg, className: segmentClassName });
-  return /* @__PURE__ */ jsxs(
+  const renderSegments = (seg) => /* @__PURE__ */ jsx(
+    $40825cdb76e74f70$export$336ab7fa954c4b5f,
+    {
+      segment: seg,
+      className: ({ isFocused }) => clsx(segmentClassName, {
+        [DesignStates.segment.focus.className]: isFocused
+      })
+    }
+  );
+  return /* @__PURE__ */ jsx(
     $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
     {
-      className: clsx(
-        styles.group,
-        selectors.group,
-        (_b = elementProps == null ? void 0 : elementProps.timeInput) == null ? void 0 : _b.className
-      ),
+      className: ({ isHovered, isFocusWithin, isInvalid, isDisabled }) => {
+        var _a2;
+        return clsx(
+          styles.group,
+          selectors.group,
+          (_a2 = elementProps == null ? void 0 : elementProps.timeInput) == null ? void 0 : _a2.className,
+          {
+            [DesignStates.timeInput.hover.className]: isHovered && !isDisabled,
+            [DesignStates.timeInput.focus.className]: isFocusWithin,
+            [DesignStates.timeInput.error.className]: isInvalid,
+            [DesignStates.timeInput.disabled.className]: isDisabled
+          }
+        );
+      },
       "data-testid": TestIds.group,
-      children: [
-        /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments }),
-        clearButton2
-      ]
+      children: /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments })
     }
   );
 };
 const noop = () => {
 };
 function TimePicker(props) {
-  var _a, _b;
+  var _a, _b, _c;
   const environmentService = useService(EnvironmentDefinition);
   const { translate } = useService(TranslationsDefinition);
-  const translateByKey = translate(TRANSLATIONS_NAMESPACE);
-  const t = (key) => getTranslation(translateByKey, key, TranslationKeys, DefaultTranslations);
+  const locale = environmentService.language || DEFAULT_LOCALE;
   const {
     id,
     className = "",
-    granularity = defaultValues.granularity,
-    hourCycle = defaultValues.hourCycle,
-    shouldForceLeadingZeros = defaultValues.shouldForceLeadingZeros,
-    readOnly = defaultValues.readOnly,
-    clearable = defaultValues.clearable,
+    readOnly = false,
     direction,
     a11y,
-    onChange = noop,
-    onFocus = noop,
-    onBlur = noop,
-    fieldValidity,
-    showValidityIndication,
-    onValidate,
-    onValidityChange,
+    onValueChange = noop,
     wix,
     elementProps
   } = props;
-  const label2 = readString(props.label);
-  const description2 = readString(props.description);
-  const tooltip2 = readString(props.tooltip);
-  const isDisabled = readBool(props.isDisabled, false);
-  const isRequired = readBool(props.required, defaultValues.required);
-  const isControlled = props.value !== void 0;
-  const sourceValue = isControlled ? props.value : props.defaultValue;
-  const { timeValue, handleChange, hasValue } = useTimePickerValue({
-    value: sourceValue,
-    onChange,
-    granularity
-  });
-  const intrinsic = isRequired && !hasValue ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : { valid: true, validationMessage: "" };
-  const {
-    validity,
-    showValidityIndication: showIndication,
-    handleBlur: validateOnBlur
-  } = useValidatedField({
-    value: readString(props.value),
-    intrinsic,
-    fieldValidity,
-    showValidityIndication,
-    onValidate,
-    onValidityChange
+  const label2 = readText(props.label, "");
+  const helperText = readText(props.helperText, "");
+  const errorMessage2 = readText(props.errorMessage, "");
+  const disabled = readBool(props.disabled, false);
+  const { timeValue, handleChange } = useTimePickerValue({
+    value: props.value,
+    onValueChange
   });
-  const isInvalid = showIndication && !validity.valid;
-  const handleBlur = (event) => {
-    onBlur(event);
-    validateOnBlur();
-  };
-  const { minValue, maxValue } = useTimeConstraints({
-    minTime: props.minTime,
-    maxTime: props.maxTime
-  });
-  const [portalContainer, setPortalContainer] = useState(
-    null
-  );
-  const locale = environmentService.language || "en-US";
-  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || label2 || t("ariaLabel");
-  const showClear = clearable && hasValue && !isDisabled && !readOnly;
-  const clearButton2 = showClear ? /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: styles.clearButton,
-      "data-testid": TestIds.clearButton,
-      "aria-label": t("clearButton"),
-      onClick: () => handleChange(null),
-      children: /* @__PURE__ */ jsx(DismissSmall_default, { "aria-hidden": true, className: styles.clearIcon })
-    }
-  ) : null;
+  const isInvalid = Boolean(errorMessage2);
+  let ariaLabel = a11y == null ? void 0 : a11y.ariaLabel;
+  if (!ariaLabel && !label2) {
+    ariaLabel = translate("ariaLabels")(AriaLabels.root.key) || AriaLabels.root.default;
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -561,7 +139,6 @@ function TimePicker(props) {
         "div",
         {
           id,
-          ref: setPortalContainer,
           ...getDataAttributes(props),
           className: clsx(
             className,
@@ -578,89 +155,46 @@ function TimePicker(props) {
               className: styles.timePicker,
               value: timeValue,
               onChange: handleChange,
-              granularity,
-              hourCycle: hourCycle === HourCycleValues.Auto ? void 0 : Number(hourCycle),
-              shouldForceLeadingZeros: shouldForceLeadingZeros || void 0,
-              minValue,
-              maxValue,
-              isDisabled,
+              granularity: "minute",
+              isDisabled: disabled,
               isReadOnly: readOnly,
-              isRequired,
               isInvalid,
               "aria-label": ariaLabel,
-              onFocus,
-              onBlur: handleBlur,
               children: [
-                label2 || tooltip2 ? /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
-                  label2 ? /* @__PURE__ */ jsxs(
-                    $01b77f81d0f07f68$export$b04be29aa201d4f5,
-                    {
-                      className: clsx(
-                        styles.label,
-                        selectors.label,
-                        (_a = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _a.className
-                      ),
-                      children: [
-                        label2,
-                        isRequired && /* @__PURE__ */ jsx(
-                          RequiredIndicator,
-                          {
-                            className: selectors.requiredIndicator,
-                            "data-testid": TestIds.requiredIndicator
-                          }
-                        )
-                      ]
-                    }
-                  ) : null,
-                  tooltip2 ? /* @__PURE__ */ jsxs($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, children: [
-                    /* @__PURE__ */ jsx(
-                      $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                      {
-                        className: styles.tooltipButton,
-                        "data-testid": TestIds.tooltipButton,
-                        "aria-label": tooltip2,
-                        children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": "true" })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      $4e3b923658d69c60$export$28c660c63b792dea,
-                      {
-                        className: styles.tooltip,
-                        offset: 6,
-                        UNSTABLE_portalContainer: portalContainer ?? void 0,
-                        children: tooltip2
-                      }
-                    )
-                  ] }) : null
-                ] }) : null,
-                /* @__PURE__ */ jsx(
-                  TimePickerField,
+                label2 ? /* @__PURE__ */ jsx(
+                  $01b77f81d0f07f68$export$b04be29aa201d4f5,
                   {
-                    clearButton: clearButton2,
-                    elementProps
+                    className: clsx(
+                      styles.label,
+                      selectors.label,
+                      (_a = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _a.className
+                    ),
+                    children: label2
                   }
-                ),
-                description2 ? /* @__PURE__ */ jsx(
+                ) : null,
+                /* @__PURE__ */ jsx(TimePickerField, { elementProps }),
+                helperText ? /* @__PURE__ */ jsx(
                   $514c0188e459b4c0$export$5f1af8db9871e1d6,
                   {
                     slot: "description",
                     className: clsx(
                       styles.description,
                       selectors.description,
-                      (_b = elementProps == null ? void 0 : elementProps.description) == null ? void 0 : _b.className
+                      (_b = elementProps == null ? void 0 : elementProps.helperText) == null ? void 0 : _b.className
                     ),
-                    children: description2
+                    children: helperText
                   }
                 ) : null,
-                isInvalid && validity.validationMessage ? /* @__PURE__ */ jsx(
+                errorMessage2 ? /* @__PURE__ */ jsx(
                   $ee014567cb39d3f0$export$f551688fc98f2e09,
                   {
                     className: clsx(
                       styles.errorMessage,
-                      selectors.errorMessage
+                      selectors.errorMessage,
+                      (_c = elementProps == null ? void 0 : elementProps.errorMessage) == null ? void 0 : _c.className
                     ),
                     "data-testid": TestIds.errorMessage,
-                    children: validity.validationMessage
+                    children: errorMessage2
                   }
                 ) : null
               ]