@wix/editor-react-components 1.2309.0 → 1.2311.0

package/dist/site/components/Image3/css.css

@@ -59,5 +59,7 @@
 }
 
 .linkLayer__hoVt- {
-  display: inline;
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
 }

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

@@ -4,7 +4,7 @@ var __publicField = (obj, key2, value2) => __defNormalProp(obj, typeof key2 !==
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
-import { B as Button } from "../chunks/Button.js";
+import { B as Button } from "../chunks/Button2.js";
 import { s as semanticSelectors, r as rootDataDefaults, d as displayPropertyToObserve, a as ariaLabels, t as testIds, p as pauseIconSvg, b as playIconSvg, c as showButtonOnHoverDefaults } from "../chunks/constants27.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import React__default, { useEffect, useState, useRef, useMemo } from "react";

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

@@ -15,7 +15,7 @@ import { i as isEmptyObject, a as getDataAttributes } from "../chunks/dataUtils.
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
-import { B as Button } from "../chunks/Button.js";
+import { B as Button } from "../chunks/Button2.js";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 const AnchorsDefinition = defineService("@wix/viewer-service-anchors");
 const EMPTY_ANCHOR_URL = "#";

package/dist/site/components/SiteLogo/css.css

@@ -1,3 +1,9 @@
+.link__UCcRC {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 .svgImageSource__g-ESq {
   fill-opacity: var(--opacity, 1);
 }
@@ -133,5 +139,7 @@
 }
 
 .linkLayer__hoVt- {
-  display: inline;
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
 }

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { M as MOVEMENT_DIRECTION, A as AUTOPLAY_STATE, s as slideshowDataDefaults, a as semanticClassNames, S as SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT } from "../chunks/Slideshow.semanticClassNames.js";
-import { B as Button } from "../chunks/Button.js";
+import { B as Button } from "../chunks/Button2.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { useService } from "@wix/services-manager-react";

package/dist/site/components/SvgImage/css.css

@@ -1,3 +1,9 @@
+.link__UCcRC {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 .svgImageSource__g-ESq {
   fill-opacity: var(--opacity, 1);
 }

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

@@ -8,10 +8,9 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { s as selectors } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index5.js";
-import { $ as $fd2148440a13ec26$export$fc1a364ae1f3ff10, a as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, b as $860f7da480e22816$export$b8473d3665f3a75a, c as $d3e0e05bdfcf66bd$export$c24727297075ec6a, d as $3985021b0ad6602f$export$37fb8590cf2c088c, e as $514c0188e459b4c0$export$9afb8bc826b033ea, f as $ee014567cb39d3f0$export$ff05c3ac10437e03, g as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Input.js";
-import { a as $3e6197669829fe11$export$40bfa8c7b0832715, b as $3274bf1495747a7b$export$5add1d006293d136, c as $bbaa08b3cd72f041$export$9d1611c77c2fe928, d as $23f2114a1b82827e$export$e58f029f0fbfdb29, e as $01b77f81d0f07f68$export$75b6ee27786ba447, f as $a049562f99e7db0e$export$f9c6924e160136d1, g as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
+import { a as $fd2148440a13ec26$export$fc1a364ae1f3ff10, b as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, c as $860f7da480e22816$export$b8473d3665f3a75a, d as $d3e0e05bdfcf66bd$export$c24727297075ec6a, e as $3985021b0ad6602f$export$37fb8590cf2c088c, f as $514c0188e459b4c0$export$9afb8bc826b033ea, g as $ee014567cb39d3f0$export$ff05c3ac10437e03, h as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Input.js";
+import { b as $3e6197669829fe11$export$40bfa8c7b0832715, c as $d1116acdf220c2da$export$4c014de7c8940b4c, d as $3274bf1495747a7b$export$5add1d006293d136, e as $bbaa08b3cd72f041$export$9d1611c77c2fe928, f as $23f2114a1b82827e$export$e58f029f0fbfdb29, g as $01b77f81d0f07f68$export$75b6ee27786ba447, h as $a049562f99e7db0e$export$f9c6924e160136d1, a as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
 import { $ as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, a as $f39a9eba43920ace$export$86427a43e3e48ebb, b as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$fabf2dc03a41866e, d as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, e as $64fa3d84918910a7$export$ef03459518577ad4, f as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
-import { $ as $d1116acdf220c2da$export$4c014de7c8940b4c } from "../chunks/useFocusable.js";
 import { S as SdkStateDefinition } from "../chunks/index6.js";
 const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
 function $054f71d2330da2e3$export$712718f7aec83d5(props, ref) {

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

@@ -5,6 +5,12 @@ import { c as clsx } from "../chunks/clsx.js";
 import { L as Link } from "../chunks/Link.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { p as parseSvg } from "../chunks/parseSvg.js";
+const PauseSmall = ({ 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: "M7.5,5 C8.32842712,5 9,5.67157288 9,6.5 L9,11.5 C9,12.3284271 8.32842712,13 7.5,13 C6.67157288,13 6,12.3284271 6,11.5 L6,6.5 C6,5.67157288 6.67157288,5 7.5,5 Z M11.5,5 C12.3284271,5 13,5.67157288 13,6.5 L13,11.5 C13,12.3284271 12.3284271,13 11.5,13 C10.6715729,13 10,12.3284271 10,11.5 L10,6.5 C10,5.67157288 10.6715729,5 11.5,5 Z M7.5,6 C7.22385763,6 7,6.22385763 7,6.5 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,6.5 C8,6.22385763 7.77614237,6 7.5,6 Z M11.5,6 C11.2238576,6 11,6.22385763 11,6.5 L11,11.5 C11,11.7761424 11.2238576,12 11.5,12 C11.7761424,12 12,11.7761424 12,11.5 L12,6.5 C12,6.22385763 11.7761424,6 11.5,6 Z" }));
+PauseSmall.displayName = "PauseSmall";
+var PauseSmall_default = PauseSmall;
+const PlaySmall = ({ 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: "M6.87468837,5.45041947 L12.7318793,8.46657119 C13.20163,8.68731241 13.20163,9.26940918 12.7318793,9.53342881 L6.87468837,12.5495805 C6.58008377,12.7012867 6.00070071,12.5801226 6,12.0161517 L6,5.98384828 C6,5.65247743 6.35266876,5.20682168 6.87468837,5.45041947 Z M7,11.3602529 L11.5834735,9 L7,6.63974714 L7,11.3602529 Z" }));
+PlaySmall.displayName = "PlaySmall";
+var PlaySmall_default = PlaySmall;
 const semanticClassNames = {
   root: "text-marquee",
   text: "text-marquee__text"
@@ -47,12 +53,6 @@ const TestIds = {
   marqueeUnit: "marquee-unit",
   headingTag: "heading-tag"
 };
-const PauseSmall = ({ 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: "M7.5,5 C8.32842712,5 9,5.67157288 9,6.5 L9,11.5 C9,12.3284271 8.32842712,13 7.5,13 C6.67157288,13 6,12.3284271 6,11.5 L6,6.5 C6,5.67157288 6.67157288,5 7.5,5 Z M11.5,5 C12.3284271,5 13,5.67157288 13,6.5 L13,11.5 C13,12.3284271 12.3284271,13 11.5,13 C10.6715729,13 10,12.3284271 10,11.5 L10,6.5 C10,5.67157288 10.6715729,5 11.5,5 Z M7.5,6 C7.22385763,6 7,6.22385763 7,6.5 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,6.5 C8,6.22385763 7.77614237,6 7.5,6 Z M11.5,6 C11.2238576,6 11,6.22385763 11,6.5 L11,11.5 C11,11.7761424 11.2238576,12 11.5,12 C11.7761424,12 12,11.7761424 12,11.5 L12,6.5 C12,6.22385763 11.7761424,6 11.5,6 Z" }));
-PauseSmall.displayName = "PauseSmall";
-var PauseSmall_default = PauseSmall;
-const PlaySmall = ({ 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: "M6.87468837,5.45041947 L12.7318793,8.46657119 C13.20163,8.68731241 13.20163,9.26940918 12.7318793,9.53342881 L6.87468837,12.5495805 C6.58008377,12.7012867 6.00070071,12.5801226 6,12.0161517 L6,5.98384828 C6,5.65247743 6.35266876,5.20682168 6.87468837,5.45041947 Z M7,11.3602529 L11.5834735,9 L7,6.63974714 L7,11.3602529 Z" }));
-PlaySmall.displayName = "PlaySmall";
-var PlaySmall_default = PlaySmall;
 const PlayPauseButton = ({
   isPlaying,
   onToggle,

package/dist/site/components/TimePicker/TimePicker.types.d.ts

@@ -5,6 +5,8 @@ import { TranslationKeys } from './constants';
 export type TranslationKey = keyof typeof TranslationKeys;
 /** Smallest editable time unit (React Aria `granularity`). */
 export type TimePickerGranularity = 'hour' | 'minute' | 'second';
+/** `auto` defers to the locale; `12`/`24` force the hour cycle. */
+export type TimePickerHourCycle = 'auto' | '12' | '24';
 export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & {
     /** Fires with the selected ISO time string (`HH:MM[:SS]`), or `''` when cleared. */
     onChange?: (value: string) => void;
@@ -12,11 +14,40 @@ export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & Sdk
     id: string;
     /** Appended to the root `.timePicker`. Use this for CSS-variable and per-element overrides. */
     className: string;
+    /** Smallest editable unit: hour-only, hour+minute, or hour+minute+second segments. */
+    granularity?: TimePickerGranularity;
+    /** Forces a 12- or 24-hour clock; `auto` follows the locale. */
+    hourCycle?: TimePickerHourCycle;
+    /** Pads single-digit segments with a leading zero (locale default when off). */
+    shouldForceLeadingZeros?: boolean;
     /**
      * The selected time as an ISO 24h `HH:MM[:SS]` string. The empty string
      * means no time is selected.
      */
     value: string;
+    /** Optional text label rendered above the field. */
+    label: string;
+    /**
+     * ISO `HH:MM` time that seeds the empty field (React Aria `placeholderValue`
+     * — e.g. which hour the segments start at).
+     */
+    placeholder: string;
+    /** Site-facing helper text rendered under the field. */
+    description?: string;
+    /** Hint text revealed from an info icon next to the label. */
+    tooltip?: string;
+    /** Earliest selectable time as an ISO `HH:MM` string. */
+    minTime?: string;
+    /** Latest selectable time as an ISO `HH:MM` string. */
+    maxTime?: string;
+    /** Marks the field required for form submission. */
+    required?: boolean;
+    /** Shows the time but blocks editing. */
+    readOnly?: boolean;
+    /** Renders a clear (✕) control that empties the value. */
+    clearable?: boolean;
+    /** Disables interaction with the time picker. */
+    isDisabled?: boolean;
     /** Writing direction applied to the root. */
     direction?: Direction;
     /** Accessibility attributes. `ariaLabel` labels the time picker for assistive tech. */

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

@@ -1,6 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
 import { c as clsx } from "../chunks/clsx.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 $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Button.js";
+import { $ as $58246871e4652552$export$c9698ec7f05a07e1, a as $40825cdb76e74f70$export$7edc06cf1783b30f, b as $40825cdb76e74f70$export$336ab7fa954c4b5f, c as $40825cdb76e74f70$export$5eaee2322dd727eb, d as $4e3b923658d69c60$export$8c610744efcf8a1d, e as $4e3b923658d69c60$export$28c660c63b792dea } from "../chunks/Tooltip.js";
+import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, a as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../chunks/Input.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";
@@ -8,9 +12,9 @@ import { T as TranslationsDefinition } from "../chunks/index5.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
-import { useState } from "react";
-import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../chunks/Group.js";
+import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, d as defaultValues, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
+import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const getTranslation = (translate, key, translationKeys, defaultTranslations) => {
   const translationKey = translationKeys[key];
   const translated = translate(translationKey);
@@ -18,17 +22,32 @@ const getTranslation = (translate, key, translationKeys, defaultTranslations) =>
 };
 const timePicker = "timePicker__j78My";
 const root = "root__dzkbY";
+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 segment = "segment__OtazP";
+const clearButton = "clearButton__Bto7s";
+const clearIcon = "clearIcon__x11eI";
 const styles = {
   timePicker,
   root,
+  labelRow,
+  label,
+  tooltipButton,
+  tooltip,
   group,
   field,
-  segment
+  description,
+  segment,
+  clearButton,
+  clearIcon
 };
 const readString = (prop) => typeof prop === "string" ? prop : EMPTY_VALUE;
+const readBool = (prop, fallback) => typeof prop === "boolean" ? prop : fallback;
 const toTimeValue = (iso) => {
   if (!iso) {
     return null;
@@ -48,19 +67,20 @@ const toIso = (time, granularity) => {
   return granularity === "second" ? `${hoursAndMinutes}:${pad(time.second)}` : hoursAndMinutes;
 };
 const useTimePickerValue = (params) => {
-  const { value, onChange } = params;
+  const { value, onChange, granularity } = params;
   const valueStr = readString(value);
   const [timeValue, setTimeValue] = useState(
     () => toTimeValue(valueStr)
   );
-  const [prevValueStr, setPrevValueStr] = useState(valueStr);
-  if (prevValueStr !== valueStr) {
-    setPrevValueStr(valueStr);
+  const syncSignature = `${valueStr}::${granularity}`;
+  const [prevSignature, setPrevSignature] = useState(syncSignature);
+  if (prevSignature !== syncSignature) {
+    setPrevSignature(syncSignature);
     setTimeValue(toTimeValue(valueStr));
   }
   const handleChange = (next) => {
     setTimeValue(next);
-    onChange(toIso(next, "minute"));
+    onChange(toIso(next, granularity));
   };
   return {
     timeValue,
@@ -68,9 +88,20 @@ const useTimePickerValue = (params) => {
     hasValue: Boolean(valueStr)
   };
 };
+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 renderSegments = (segment2) => /* @__PURE__ */ jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { segment: segment2, className: styles.segment });
 const TimePickerField = ({
-  clearButton
+  clearButton: clearButton2
 }) => /* @__PURE__ */ jsxs(
   $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
   {
@@ -78,7 +109,7 @@ const TimePickerField = ({
     "data-testid": TestIds.group,
     children: [
       /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments }),
-      clearButton
+      clearButton2
     ]
   }
 );
@@ -92,6 +123,11 @@ function TimePicker(props) {
   const {
     id,
     className = "",
+    granularity = defaultValues.granularity,
+    hourCycle = defaultValues.hourCycle,
+    shouldForceLeadingZeros = defaultValues.shouldForceLeadingZeros,
+    readOnly = defaultValues.readOnly,
+    clearable = defaultValues.clearable,
     direction,
     a11y,
     onChange = noop,
@@ -99,12 +135,42 @@ function TimePicker(props) {
     onBlur = noop,
     wix
   } = props;
-  const { timeValue, handleChange } = useTimePickerValue({
+  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 placeholderStr = readString(props.placeholder);
+  const placeholderValue = useMemo(
+    () => toTimeValue(placeholderStr) ?? void 0,
+    [placeholderStr]
+  );
+  const { timeValue, handleChange, hasValue } = useTimePickerValue({
     value: props.value,
-    onChange
+    onChange,
+    granularity
+  });
+  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) || t("ariaLabel");
+  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;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -114,6 +180,7 @@ function TimePicker(props) {
         "div",
         {
           id,
+          ref: setPortalContainer,
           ...getDataAttributes(props),
           className: clsx(
             className,
@@ -124,16 +191,51 @@ function TimePicker(props) {
           dir: direction || void 0,
           lang: environmentService.language,
           "data-testid": TestIds.root,
-          children: /* @__PURE__ */ jsx($2eb8e6d23f3d0cb0$export$a54013f0d02a8f82, { locale, children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx($2eb8e6d23f3d0cb0$export$a54013f0d02a8f82, { locale, children: /* @__PURE__ */ jsxs(
             $40825cdb76e74f70$export$5eaee2322dd727eb,
             {
               className: styles.timePicker,
               value: timeValue,
               onChange: handleChange,
+              granularity,
+              hourCycle: hourCycle === HourCycleValues.Auto ? void 0 : Number(hourCycle),
+              shouldForceLeadingZeros: shouldForceLeadingZeros || void 0,
+              minValue,
+              maxValue,
+              placeholderValue,
+              isDisabled,
+              isReadOnly: readOnly,
+              isRequired,
               "aria-label": ariaLabel,
               onFocus,
               onBlur,
-              children: /* @__PURE__ */ jsx(TimePickerField, { clearButton: null })
+              children: [
+                label2 || tooltip2 ? /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
+                  label2 ? /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: clsx(styles.label, selectors.label), children: label2 }) : 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, { clearButton: clearButton2 }),
+                description2 ? /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: styles.description, children: description2 }) : null
+              ]
             }
           ) })
         }

package/dist/site/components/TimePicker/constants.d.ts

@@ -3,30 +3,92 @@ export declare const DisplayNames: {
         elementDisplayName: string;
         data: {
             value: string;
+            granularity: {
+                displayName: string;
+                options: {
+                    hour: string;
+                    minute: string;
+                    second: string;
+                };
+            };
+            hourCycle: {
+                displayName: string;
+                options: {
+                    auto: string;
+                    h12: string;
+                    h24: string;
+                };
+            };
+            shouldForceLeadingZeros: string;
+            tooltip: string;
+            label: string;
+            placeholder: string;
+            description: string;
+            minTime: string;
+            maxTime: string;
+            required: string;
+            readOnly: string;
+            disabled: string;
+            clearable: string;
         };
         elements: {
+            label: string;
             timeInput: string;
         };
-        cssCustomProperties: {};
+        cssCustomProperties: {
+            labelSpacing: string;
+            segmentFocusBackgroundColor: string;
+            segmentFocusTextColor: string;
+        };
     };
 };
+export declare const defaultValues: {
+    readonly granularity: "minute";
+    readonly hourCycle: "auto";
+    readonly shouldForceLeadingZeros: false;
+    readonly tooltip: "";
+    readonly label: "";
+    readonly placeholder: "";
+    readonly description: "";
+    readonly required: false;
+    readonly readOnly: false;
+    readonly disabled: false;
+    readonly clearable: false;
+};
+/** React Aria `granularity`: the smallest editable time unit. */
+export declare const enum GranularityValues {
+    Hour = "hour",
+    Minute = "minute",
+    Second = "second"
+}
+/** `auto` defers to the locale; `12`/`24` force the hour cycle. */
+export declare const enum HourCycleValues {
+    Auto = "auto",
+    H12 = "12",
+    H24 = "24"
+}
 /** The value that represents "no time selected". */
 export declare const EMPTY_VALUE = "";
 export declare const TRANSLATIONS_NAMESPACE = "timePicker";
 /** Viewer-facing string keys (translated via the Translations service). */
 export declare const TranslationKeys: {
     readonly ariaLabel: "timePicker_aria_label";
+    readonly clearButton: "timePicker_clear_button";
 };
 /** English fallbacks used when a translation is missing. */
 export declare const DefaultTranslations: {
     readonly ariaLabel: "Time picker";
+    readonly clearButton: "Clear";
 };
 export declare const TestIds: {
     readonly root: "timepicker-root";
     readonly group: "timepicker-group";
     readonly field: "timepicker-field";
+    readonly clearButton: "timepicker-clear-button";
+    readonly tooltipButton: "timepicker-tooltip-button";
 };
 export declare const selectors: {
     readonly root: "timePicker";
+    readonly label: "timePicker__label";
     readonly group: "timePicker__group";
 };

package/dist/site/components/TimePicker/css.css

@@ -1,4 +1,14 @@
 .timePicker__j78My {
+  --labelFont: var(
+    --wst-paragraph-2-font,
+    normal normal normal 14px/1.4em madefor-text,
+    helveticaneuew01-45ligh,
+    helveticaneuew02-45ligh,
+    helveticaneuew10-45ligh,
+    sans-serif
+  );
+  --label-text-color: var(--wst-paragraph-2-color, #2b2b2b);
+
   --field-background-color: var(--wst-primary-background-color, #ffffff);
   --borderColor: var(--wst-system-line-1-color, #dfe5eb);
   --borderWidth: 1px;
@@ -6,6 +16,24 @@
   --borderStartEndRadius: 6px;
   --borderEndStartRadius: 6px;
   --borderEndEndRadius: 6px;
+
+  --label-spacing: 6px;
+
+  --segment-focus-background-color: var(--wst-links-and-actions-color, #116dff);
+  --segment-focus-text-color: var(--wst-primary-background-color, #ffffff);
+
+  --accent-color: var(--segment-focus-background-color);
+
+  --tooltip-font: var(
+    --wst-paragraph-2-font,
+    normal normal normal 12px/1.4em madefor-text,
+    helveticaneuew01-45ligh,
+    helveticaneuew02-45ligh,
+    helveticaneuew10-45ligh,
+    sans-serif
+  );
+  --tooltip-text-color: var(--wst-primary-background-color, #ffffff);
+  --tooltip-background-color: var(--wst-paragraph-2-color, #2b2b2b);
 }
 .root__dzkbY {
   box-sizing: border-box;
@@ -21,6 +49,53 @@
   display: flex;
   flex-direction: column;
 }
+.labelRow__qoC8g {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 var(--label-spacing);
+}
+.label__THO5j {
+  margin: 0;
+  font: var(--labelFont);
+  color: var(--label-text-color);
+}
+.tooltipButton__ISWIR {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--label-text-color);
+  cursor: pointer;
+  opacity: 0.65;
+}
+.tooltipButton__ISWIR[data-hovered], .tooltipButton__ISWIR[data-focus-visible] {
+  opacity: 1;
+}
+.tooltipButton__ISWIR[data-focus-visible] {
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--accent-color);
+}
+.tooltipButton__ISWIR svg {
+  width: 16px;
+  height: 16px;
+}
+.tooltip__FTZhM {
+  max-width: 220px;
+  padding: 6px 10px;
+  font: var(--tooltip-font);
+  color: var(--tooltip-text-color);
+  background: var(--tooltip-background-color);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}
 .group__6HZy7 {
   box-sizing: border-box;
   display: flex;
@@ -40,6 +115,17 @@
   border-end-end-radius: var(--borderEndEndRadius);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
+.group__6HZy7:focus-within {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 1px var(--accent-color);
+}
+.group__6HZy7:hover:not(:focus-within) {
+  border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
+}
+.timePicker__j78My[data-disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
 .field__mnQwh {
   display: inline-flex;
   flex: 1;
@@ -49,6 +135,11 @@
   color: inherit;
   white-space: nowrap;
 }
+.description__ePprf {
+  margin-top: 4px;
+  font-size: 12px;
+  opacity: 0.7;
+}
 .segment__OtazP {
   padding: 0 2px;
   border-radius: 3px;
@@ -56,6 +147,41 @@
   text-align: center;
   outline: none;
 }
+.segment__OtazP[data-type=literal] {
+  padding: 0;
+  opacity: 0.5;
+}
+.segment__OtazP[data-placeholder] {
+  color: color-mix(in srgb, currentColor 45%, transparent);
+}
+.segment__OtazP[data-focused] {
+  background: var(--accent-color);
+  color: var(--segment-focus-text-color);
+}
+.clearButton__Bto7s {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.clearButton__Bto7s:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.clearIcon__x11eI {
+  width: 18px;
+  height: 18px;
+}
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);
 }

package/dist/site/components/TimePicker/hooks/useTimeConstraints.d.ts

@@ -0,0 +1,8 @@
+import { TimePickerProps } from '../TimePicker.types';
+export declare const useTimeConstraints: (params: {
+    minTime: TimePickerProps["minTime"];
+    maxTime: TimePickerProps["maxTime"];
+}) => {
+    minValue: import('react-aria').TimeValue | undefined;
+    maxValue: import('react-aria').TimeValue | undefined;
+};