@skbkontur/react-ui 6.1.4-ff219.0 → 6.2.0-beta.0

package/internal/TimeInput/TimeFragments.styles.js

@@ -0,0 +1,43 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    "], ["\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    "])));
+        },
+        selected: function (t) {
+            var getSelection = function (background, color) {
+                return (background || color) &&
+                    "& ::selection {\n        background: ".concat(background, ";\n        color: ").concat(color, ";\n      }");
+            };
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      cursor: text;\n      ", "\n    "], ["\n      cursor: text;\n      ", "\n    "])), getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor));
+        },
+        mask: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.timePickerMaskColor);
+        },
+        segment: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: inline;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    "], ["\n      display: inline;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    "])));
+        },
+        separator: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: inline;\n      position: relative;\n    "], ["\n      display: inline;\n      position: relative;\n    "])));
+        },
+        separatorSmall: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.timePickerSeparatorOffsetTopSmall, t.timePickerSeparatorPaddingXSmall, t.timePickerSeparatorPaddingXSmall);
+        },
+        separatorMedium: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.timePickerSeparatorOffsetTopMedium, t.timePickerSeparatorPaddingXMedium, t.timePickerSeparatorPaddingXMedium);
+        },
+        separatorLarge: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.timePickerSeparatorOffsetTopLarge, t.timePickerSeparatorPaddingXLarge, t.timePickerSeparatorPaddingXLarge);
+        },
+        separatorFilled: function () {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: inherit;\n    "], ["\n      color: inherit;\n    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+//# sourceMappingURL=TimeFragments.styles.js.map

package/internal/TimeInput/TimeFragments.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFragments.styles.js","sourceRoot":"","sources":["TimeFragments.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,QAAQ,YAAC,CAAQ;YACf,IAAM,YAAY,GAAG,UAAC,UAAkB,EAAE,KAAa;gBACrD,OAAA,CAAC,UAAU,IAAI,KAAK,CAAC;oBACrB,+CACgB,UAAU,+BACf,KAAK,eACd;YAJF,CAIE,CAAC;YAEL,OAAO,GAAG,4GAAA,+BAEN,EAAwE,QAC3E,KADG,YAAY,CAAC,CAAC,CAAC,yBAAyB,EAAE,CAAC,CAAC,2BAA2B,CAAC,EAC1E;QACJ,CAAC;QAED,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,+FAAA,iBACC,EAAqB,SAC/B,KADU,CAAC,CAAC,mBAAmB,EAC9B;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,8HAAA,2DAGT,KAAC;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,oJAAA,eACD,EAAmC,yBAC1B,EAAkC,0BACjC,EAAkC,SACpD,KAHQ,CAAC,CAAC,iCAAiC,EAC1B,CAAC,CAAC,gCAAgC,EACjC,CAAC,CAAC,gCAAgC,EACnD;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,oJAAA,eACD,EAAoC,yBAC3B,EAAmC,0BAClC,EAAmC,SACrD,KAHQ,CAAC,CAAC,kCAAkC,EAC3B,CAAC,CAAC,iCAAiC,EAClC,CAAC,CAAC,iCAAiC,EACpD;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,oJAAA,eACD,EAAmC,yBAC1B,EAAkC,0BACjC,EAAkC,SACpD,KAHQ,CAAC,CAAC,iCAAiC,EAC1B,CAAC,CAAC,gCAAgC,EACjC,CAAC,CAAC,gCAAgC,EACnD;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;KACF,CAAC;AAzE8D,CAyE9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    `;\n  },\n\n  selected(t: Theme) {\n    const getSelection = (background: string, color: string) =>\n      (background || color) &&\n      `& ::selection {\n        background: ${background};\n        color: ${color};\n      }`;\n\n    return css`\n      cursor: text;\n      ${getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor)}\n    `;\n  },\n\n  mask(t: Theme) {\n    return css`\n      color: ${t.timePickerMaskColor};\n    `;\n  },\n\n  segment() {\n    return css`\n      display: inline;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    `;\n  },\n\n  separator() {\n    return css`\n      display: inline;\n      position: relative;\n    `;\n  },\n\n  separatorSmall(t: Theme) {\n    return css`\n      top: ${t.timePickerSeparatorOffsetTopSmall};\n      padding-left: ${t.timePickerSeparatorPaddingXSmall};\n      padding-right: ${t.timePickerSeparatorPaddingXSmall};\n    `;\n  },\n\n  separatorMedium(t: Theme) {\n    return css`\n      top: ${t.timePickerSeparatorOffsetTopMedium};\n      padding-left: ${t.timePickerSeparatorPaddingXMedium};\n      padding-right: ${t.timePickerSeparatorPaddingXMedium};\n    `;\n  },\n\n  separatorLarge(t: Theme) {\n    return css`\n      top: ${t.timePickerSeparatorOffsetTopLarge};\n      padding-left: ${t.timePickerSeparatorPaddingXLarge};\n      padding-right: ${t.timePickerSeparatorPaddingXLarge};\n    `;\n  },\n\n  separatorFilled() {\n    return css`\n      color: inherit;\n    `;\n  },\n}));\n"]}

package/internal/TimeInput/TimeInput.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { InputProps } from '../../components/Input/index.js';
+import { type TimeFormat, type TimeSegment } from '../../components/TimePicker/helpers/TimePicker.shared.js';
+export interface TimeInputRef {
+    focus(): void;
+    blur(): void;
+    blink(): void;
+    isFragment(el: HTMLElement | EventTarget | null): boolean;
+    isAllSelected(): boolean;
+    getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
+    selectSegment(segment: TimeSegment): void;
+    selectAll(): void;
+    getNode(): HTMLElement | null;
+}
+export interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'inputMode'> {
+    hasDropdown?: boolean;
+    format: TimeFormat;
+    value: string;
+    'aria-placeholder'?: string;
+    onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;
+}
+export declare const TimeInput: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimeInputRef, TimeInputProps> & Record<never, never>;

package/internal/TimeInput/TimeInput.js

@@ -0,0 +1,103 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';
+import { getTimePickerInputMinWidth, getTimePickerSuffixMargin, } from '../../components/TimePicker/helpers/TimePicker.layout.js';
+import { getTimeSegments, } from '../../components/TimePicker/helpers/TimePicker.shared.js';
+import { TimeClockIcon } from '../../components/TimePicker/TimeClockIcon.js';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { InputLikeText } from '../InputLikeText/index.js';
+import { TimeFragments } from './TimeFragments.js';
+import { getStyles } from './TimeInput.styles.js';
+export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
+    var _a;
+    var _b = props.hasDropdown, hasDropdown = _b === void 0 ? false : _b, _c = props.size, size = _c === void 0 ? 'small' : _c, disabled = props.disabled, autoFocus = props.autoFocus, suffix = props.suffix, style = props.style, width = props.width, corners = props.corners, rightIcon = props.rightIcon, format = props.format, value = props.value, onSelectSegment = props.onSelectSegment, rest = __rest(props, ["hasDropdown", "size", "disabled", "autoFocus", "suffix", "style", "width", "corners", "rightIcon", "format", "value", "onSelectSegment"]);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var inputLikeTextRef = useRef(null);
+    var fragmentsRef = useRef(null);
+    useImperativeHandle(ref, function () { return ({
+        focus: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        blink: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blink(); },
+        getNode: function () { var _a, _b; return (_b = (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.getNode()) !== null && _b !== void 0 ? _b : null; },
+        isFragment: function (el) { var _a, _b; return (_b = (_a = fragmentsRef.current) === null || _a === void 0 ? void 0 : _a.isFragment(el)) !== null && _b !== void 0 ? _b : false; },
+        getSegment: function (el) { var _a, _b; return (_b = (_a = fragmentsRef.current) === null || _a === void 0 ? void 0 : _a.getSegment(el)) !== null && _b !== void 0 ? _b : null; },
+        selectAll: function () {
+            var _a, _b, _c;
+            var rootNode = (_b = (_a = fragmentsRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
+            if (!rootNode) {
+                return;
+            }
+            (_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, 0, rootNode.childNodes.length);
+        },
+        isAllSelected: function () {
+            var _a, _b, _c, _d, _e;
+            var rootNode = (_b = (_a = fragmentsRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
+            if (!rootNode) {
+                return false;
+            }
+            var selection = (_d = (_c = rootNode.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.getSelection()) !== null && _d !== void 0 ? _d : null;
+            if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+                return false;
+            }
+            var range = selection.getRangeAt(0);
+            var text = (_e = rootNode.textContent) !== null && _e !== void 0 ? _e : '';
+            return (range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer));
+        },
+        selectSegment: function (segment) {
+            var _a, _b, _c;
+            var rootNode = (_b = (_a = fragmentsRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
+            if (!rootNode) {
+                return;
+            }
+            var segmentIndex = getTimeSegments(format).indexOf(segment);
+            var start = segmentIndex < 0 ? 0 : segmentIndex * 2;
+            var end = start + 1;
+            (_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, start, end);
+        },
+    }); }, [format]);
+    useEffect(function () {
+        if (!autoFocus || disabled) {
+            return;
+        }
+        var timer = setTimeout(function () {
+            var _a;
+            (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+        return function () {
+            clearTimeout(timer);
+        };
+    }, []);
+    var resolvedRightIcon = rightIcon === undefined ? (React.createElement("span", { className: cx(styles.rightIcon(), styles.rightIconDefault(theme), (_a = {},
+            _a[styles.rightIconInteractive()] = hasDropdown && !disabled,
+            _a)) },
+        React.createElement(TimeClockIcon, { size: size }))) : (rightIcon);
+    var suffixMarginLeft = getTimePickerSuffixMargin(size, theme);
+    var inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);
+    return (React.createElement(InputLikeText, __assign({ ref: inputLikeTextRef }, rest, { takeContentWidth: true, disabled: disabled, size: size, inputMode: 'numeric', width: width !== null && width !== void 0 ? width : 'auto', suffix: suffix && React.createElement("span", { style: { marginLeft: suffixMarginLeft } }, suffix), style: __assign(__assign(__assign({}, style), { minWidth: inputMinWidth }), corners), rightIcon: resolvedRightIcon, value: value }),
+        React.createElement(TimeFragments, { ref: fragmentsRef, format: format, size: size, value: value, onSelectSegment: onSelectSegment })));
+});
+//# sourceMappingURL=TimeInput.js.map

package/internal/TimeInput/TimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["TimeInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGlF,OAAO,EACL,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,0DAA0D,CAAC;AAClE,OAAO,EACL,eAAe,GAGhB,MAAM,0DAA0D,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAsBlD,MAAM,CAAC,IAAM,SAAS,GAAG,iBAAiB,CAA+B,WAAW,EAAE,UAAC,KAAK,EAAE,GAAG;;IAE7F,IAAA,KAaE,KAAK,YAbY,EAAnB,WAAW,mBAAG,KAAK,KAAA,EACnB,KAYE,KAAK,KAZO,EAAd,IAAI,mBAAG,OAAO,KAAA,EACd,QAAQ,GAWN,KAAK,SAXC,EACR,SAAS,GAUP,KAAK,UAVE,EACT,MAAM,GASJ,KAAK,OATD,EACN,KAAK,GAQH,KAAK,MARF,EACL,KAAK,GAOH,KAAK,MAPF,EACL,OAAO,GAML,KAAK,QANA,EACP,SAAS,GAKP,KAAK,UALE,EACT,MAAM,GAIJ,KAAK,OAJD,EACN,KAAK,GAGH,KAAK,MAHF,EACL,eAAe,GAEb,KAAK,gBAFQ,EACZ,IAAI,UACL,KAAK,EAdH,0IAcL,CADQ,CACC;IAEV,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAE/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAE5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,IAAM,gBAAgB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IACrD,IAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,mBAAmB,CACjB,GAAG,EACH,cAAM,OAAA,CAAC;QACL,KAAK,EAAE,sBAAM,OAAA,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;QAC9C,IAAI,EAAE,sBAAM,OAAA,MAAA,gBAAgB,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAA,EAAA;QAC5C,KAAK,EAAE,sBAAM,OAAA,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;QAC9C,OAAO,EAAE,0BAAM,OAAA,MAAA,MAAA,gBAAgB,CAAC,OAAO,0CAAE,OAAO,EAAE,mCAAI,IAAI,CAAA,EAAA;QAC1D,UAAU,EAAE,UAAC,EAAE,gBAAK,OAAA,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,UAAU,CAAC,EAAE,CAAC,mCAAI,KAAK,CAAA,EAAA;QACjE,UAAU,EAAE,UAAC,EAAE,gBAAK,OAAA,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,UAAU,CAAC,EAAE,CAAC,mCAAI,IAAI,CAAA,EAAA;QAChE,SAAS,EAAE;;YACT,IAAM,QAAQ,GAAG,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,WAAW,EAAE,mCAAI,IAAI,CAAC;YAE7D,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO;YACT,CAAC;YAED,MAAA,gBAAgB,CAAC,OAAO,0CAAE,eAAe,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACrF,CAAC;QAED,aAAa,EAAE;;YACb,IAAM,QAAQ,GAAG,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,WAAW,EAAE,mCAAI,IAAI,CAAC;YAE7D,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO,KAAK,CAAC;YACf,CAAC;YAED,IAAM,SAAS,GAAG,MAAA,MAAA,QAAQ,CAAC,aAAa,CAAC,WAAW,0CAAE,YAAY,EAAE,mCAAI,IAAI,CAAC;YAE7E,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,KAAK,CAAC,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC;gBACtE,OAAO,KAAK,CAAC;YACf,CAAC;YAED,IAAM,KAAK,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACtC,IAAM,IAAI,GAAG,MAAA,QAAQ,CAAC,WAAW,mCAAI,EAAE,CAAC;YAExC,OAAO,CACL,KAAK,CAAC,QAAQ,EAAE,KAAK,IAAI,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAC9G,CAAC;QACJ,CAAC;QAED,aAAa,EAAE,UAAC,OAAO;;YACrB,IAAM,QAAQ,GAAG,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,WAAW,EAAE,mCAAI,IAAI,CAAC;YAE7D,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO;YACT,CAAC;YAED,IAAM,YAAY,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC9D,IAAM,KAAK,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC;YACtD,IAAM,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC;YAEtB,MAAA,gBAAgB,CAAC,OAAO,0CAAE,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QAClE,CAAC;KACF,CAAC,EAnDI,CAmDJ,EACF,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,SAAS,CAAC;QACR,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAM,KAAK,GAAG,UAAU,CAAC;;YACvB,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QACpC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO;YACL,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,iBAAiB,GACrB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,8BACE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAC9D,GAAC,MAAM,CAAC,oBAAoB,EAAE,IAAG,WAAW,IAAI,CAAC,QAAQ;gBACzD;QAEF,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,CACxB,CACR,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IACJ,IAAM,gBAAgB,GAAG,yBAAyB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChE,IAAM,aAAa,GAAG,0BAA0B,CAAC,IAAI,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,EAAE,KAAK,CAAC,CAAC;IAElG,OAAO,CACL,oBAAC,aAAa,aACZ,GAAG,EAAE,gBAAgB,IACjB,IAAI,IACR,gBAAgB,QAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,MAAM,EACtB,MAAM,EAAE,MAAM,IAAI,8BAAM,KAAK,EAAE,EAAE,UAAU,EAAE,gBAAgB,EAAE,IAAG,MAAM,CAAQ,EAChF,KAAK,iCAAO,KAAK,KAAE,QAAQ,EAAE,aAAa,KAAK,OAAO,GACtD,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,KAAK;QAEZ,oBAAC,aAAa,IAAC,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,eAAe,GAAI,CAClG,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport type { InputProps } from '../../components/Input/index.js';\nimport {\n  getTimePickerInputMinWidth,\n  getTimePickerSuffixMargin,\n} from '../../components/TimePicker/helpers/TimePicker.layout.js';\nimport {\n  getTimeSegments,\n  type TimeFormat,\n  type TimeSegment,\n} from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from '../../components/TimePicker/TimeClockIcon.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { InputLikeText } from '../InputLikeText/index.js';\nimport type { TimeFragmentsRef } from './TimeFragments.js';\nimport { TimeFragments } from './TimeFragments.js';\nimport { getStyles } from './TimeInput.styles.js';\n\nexport interface TimeInputRef {\n  focus(): void;\n  blur(): void;\n  blink(): void;\n  isFragment(el: HTMLElement | EventTarget | null): boolean;\n  isAllSelected(): boolean;\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n  selectSegment(segment: TimeSegment): void;\n  selectAll(): void;\n  getNode(): HTMLElement | null;\n}\n\nexport interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'inputMode'> {\n  hasDropdown?: boolean;\n  format: TimeFormat;\n  value: string;\n  'aria-placeholder'?: string;\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n  const {\n    hasDropdown = false,\n    size = 'small',\n    disabled,\n    autoFocus,\n    suffix,\n    style,\n    width,\n    corners,\n    rightIcon,\n    format,\n    value,\n    onSelectSegment,\n    ...rest\n  } = props;\n\n  const theme = useContext(ThemeContext);\n\n  const { cx } = useEmotion();\n\n  const styles = useStyles(getStyles);\n\n  const inputLikeTextRef = useRef<InputLikeText>(null);\n  const fragmentsRef = useRef<TimeFragmentsRef>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      focus: () => inputLikeTextRef.current?.focus(),\n      blur: () => inputLikeTextRef.current?.blur(),\n      blink: () => inputLikeTextRef.current?.blink(),\n      getNode: () => inputLikeTextRef.current?.getNode() ?? null,\n      isFragment: (el) => fragmentsRef.current?.isFragment(el) ?? false,\n      getSegment: (el) => fragmentsRef.current?.getSegment(el) ?? null,\n      selectAll: () => {\n        const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        inputLikeTextRef.current?.selectInnerNode(rootNode, 0, rootNode.childNodes.length);\n      },\n\n      isAllSelected: () => {\n        const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return false;\n        }\n\n        const selection = rootNode.ownerDocument.defaultView?.getSelection() ?? null;\n\n        if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {\n          return false;\n        }\n\n        const range = selection.getRangeAt(0);\n        const text = rootNode.textContent ?? '';\n\n        return (\n          range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer)\n        );\n      },\n\n      selectSegment: (segment) => {\n        const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        const segmentIndex = getTimeSegments(format).indexOf(segment);\n        const start = segmentIndex < 0 ? 0 : segmentIndex * 2;\n        const end = start + 1;\n\n        inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n      },\n    }),\n    [format],\n  );\n\n  useEffect(() => {\n    if (!autoFocus || disabled) {\n      return;\n    }\n\n    const timer = setTimeout(() => {\n      inputLikeTextRef.current?.focus();\n    }, 0);\n\n    return () => {\n      clearTimeout(timer);\n    };\n  }, []);\n\n  const resolvedRightIcon =\n    rightIcon === undefined ? (\n      <span\n        className={cx(styles.rightIcon(), styles.rightIconDefault(theme), {\n          [styles.rightIconInteractive()]: hasDropdown && !disabled,\n        })}\n      >\n        <TimeClockIcon size={size} />\n      </span>\n    ) : (\n      rightIcon\n    );\n  const suffixMarginLeft = getTimePickerSuffixMargin(size, theme);\n  const inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);\n\n  return (\n    <InputLikeText\n      ref={inputLikeTextRef}\n      {...rest}\n      takeContentWidth\n      disabled={disabled}\n      size={size}\n      inputMode={'numeric'}\n      width={width ?? 'auto'}\n      suffix={suffix && <span style={{ marginLeft: suffixMarginLeft }}>{suffix}</span>}\n      style={{ ...style, minWidth: inputMinWidth, ...corners }}\n      rightIcon={resolvedRightIcon}\n      value={value}\n    >\n      <TimeFragments ref={fragmentsRef} format={format} size={size} value={value} onSelectSegment={onSelectSegment} />\n    </InputLikeText>\n  );\n});\n"]}

package/{components/MaskedInputV2/MaskedInputV2.styles.d.ts → internal/TimeInput/TimeInput.styles.d.ts}

@@ -1,7 +1,6 @@
 import type { Theme } from '../../lib/theming/Theme.js';
-export declare const globalClasses: {
-    root: string;
-};
 export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
-    root(t: Theme): string;
+    rightIcon(): string;
+    rightIconInteractive(): string;
+    rightIconDefault(t: Theme): string;
 }>;

package/internal/TimeInput/TimeInput.styles.js

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        rightIcon: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      user-select: none;\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      user-select: none;\n    "])));
+        },
+        rightIconInteractive: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      cursor: pointer;\n    "], ["\n      cursor: pointer;\n    "])));
+        },
+        rightIconDefault: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.textColorDefault);
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=TimeInput.styles.js.map

package/internal/TimeInput/TimeInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.styles.js","sourceRoot":"","sources":["TimeInput.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,SAAS;YACP,OAAO,GAAG,kNAAA,+IAMT,KAAC;QACJ,CAAC;QAED,oBAAoB;YAClB,OAAO,GAAG,mGAAA,gCAET,KAAC;QACJ,CAAC;QAED,gBAAgB,YAAC,CAAQ;YACvB,OAAO,GAAG,+FAAA,iBACC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;QACJ,CAAC;KACF,CAAC;AAtB8D,CAsB9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  rightIcon() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      user-select: none;\n    `;\n  },\n\n  rightIconInteractive() {\n    return css`\n      cursor: pointer;\n    `;\n  },\n\n  rightIconDefault(t: Theme) {\n    return css`\n      color: ${t.textColorDefault};\n    `;\n  },\n}));\n"]}

package/internal/TimeInput/index.d.ts

@@ -0,0 +1 @@
+export * from './TimeInput.js';

package/internal/TimeInput/index.js

@@ -0,0 +1,2 @@
+export * from './TimeInput.js';
+//# sourceMappingURL=index.js.map

package/internal/TimeInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './TimeInput.js';\n"]}

package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../BaseIcon.js';
+export declare const TimeClockIcon16Light: import("../../../lib/forwardRefAndName.js").ReactUIComponentWithRef<SVGSVGElement, IconProps> & Record<never, never>;

package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { forwardRefAndName } from '../../../lib/forwardRefAndName.js';
+import { BaseIcon } from '../BaseIcon.js';
+export var TimeClockIcon16Light = forwardRefAndName('TimeClockIcon16Light', function (props, ref) {
+    return (React.createElement(BaseIcon, __assign({ ref: ref }, props),
+        React.createElement("path", { d: "M8 4.40234C8 4.1262 7.77614 3.90234 7.5 3.90234C7.22386 3.90234 7 4.1262 7 4.40234V6.7274C7 7.39025 7.3745 7.99621 7.96738 8.29265L10.2764 9.44716C10.5234 9.57065 10.8237 9.47054 10.9472 9.22355C11.0707 8.97656 10.9706 8.67623 10.7236 8.55273L8.41459 7.39822C8.1605 7.27118 8 7.01148 8 6.7274V4.40234Z" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.5 1C3.91015 1 1 3.91015 1 7.5C1 11.0899 3.91015 14 7.5 14C11.0899 14 14 11.0899 14 7.5C14 3.91015 11.0899 1 7.5 1ZM2 7.5C2 4.46243 4.46243 2 7.5 2C10.5376 2 13 4.46243 13 7.5C13 10.5376 10.5376 13 7.5 13C4.46243 13 2 10.5376 2 7.5Z" })));
+});
+//# sourceMappingURL=TimeClockIcon16Light.js.map

package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeClockIcon16Light.js","sourceRoot":"","sources":["TimeClockIcon16Light.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,CAAC,IAAM,oBAAoB,GAAG,iBAAiB,CACnD,sBAAsB,EACtB,UAAC,KAAK,EAAE,GAAG;IACT,OAAO,CACL,oBAAC,QAAQ,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK;QAC3B,8BAAM,CAAC,EAAC,+SAA+S,GAAG;QAC1T,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4OAA4O,GAC9O,CACO,CACZ,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport type { IconProps } from '../BaseIcon.js';\nimport { BaseIcon } from '../BaseIcon.js';\n\nexport const TimeClockIcon16Light = forwardRefAndName<SVGSVGElement, IconProps>(\n  'TimeClockIcon16Light',\n  (props, ref) => {\n    return (\n      <BaseIcon ref={ref} {...props}>\n        <path d=\"M8 4.40234C8 4.1262 7.77614 3.90234 7.5 3.90234C7.22386 3.90234 7 4.1262 7 4.40234V6.7274C7 7.39025 7.3745 7.99621 7.96738 8.29265L10.2764 9.44716C10.5234 9.57065 10.8237 9.47054 10.9472 9.22355C11.0707 8.97656 10.9706 8.67623 10.7236 8.55273L8.41459 7.39822C8.1605 7.27118 8 7.01148 8 6.7274V4.40234Z\" />\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M7.5 1C3.91015 1 1 3.91015 1 7.5C1 11.0899 3.91015 14 7.5 14C11.0899 14 14 11.0899 14 7.5C14 3.91015 11.0899 1 7.5 1ZM2 7.5C2 4.46243 4.46243 2 7.5 2C10.5376 2 13 4.46243 13 7.5C13 10.5376 10.5376 13 7.5 13C4.46243 13 2 10.5376 2 7.5Z\"\n        />\n      </BaseIcon>\n    );\n  },\n);\n"]}

package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../BaseIcon.js';
+export declare const TimeClockIcon20Light: import("../../../lib/forwardRefAndName.js").ReactUIComponentWithRef<SVGSVGElement, IconProps> & Record<never, never>;

package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { forwardRefAndName } from '../../../lib/forwardRefAndName.js';
+import { BaseIcon } from '../BaseIcon.js';
+export var TimeClockIcon20Light = forwardRefAndName('TimeClockIcon20Light', function (props, ref) {
+    return (React.createElement(BaseIcon, __assign({ ref: ref, viewBoxSize: 20 }, props),
+        React.createElement("path", { d: "M10.0033 6.50463C10.0033 6.22849 9.77943 6.00464 9.50329 6.00464C9.22715 6.00464 9.00329 6.2285 9.0033 6.50464L9.00332 9.47699C9.00332 10.1394 9.3774 10.7451 9.96974 11.0417L12.7761 12.4471C13.023 12.5707 13.3234 12.4708 13.4471 12.2239C13.5707 11.977 13.4708 11.6766 13.2239 11.5529L10.4175 10.1476C10.1636 10.0205 10.0033 9.76089 10.0033 9.47698L10.0033 6.50463Z" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z" })));
+});
+//# sourceMappingURL=TimeClockIcon20Light.js.map

package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeClockIcon20Light.js","sourceRoot":"","sources":["TimeClockIcon20Light.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,CAAC,IAAM,oBAAoB,GAAG,iBAAiB,CACnD,sBAAsB,EACtB,UAAC,KAAK,EAAE,GAAG;IACT,OAAO,CACL,oBAAC,QAAQ,aAAC,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,EAAE,IAAM,KAAK;QAC5C,8BAAM,CAAC,EAAC,8WAA8W,GAAG;QACzX,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,8NAA8N,GAChO,CACO,CACZ,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport type { IconProps } from '../BaseIcon.js';\nimport { BaseIcon } from '../BaseIcon.js';\n\nexport const TimeClockIcon20Light = forwardRefAndName<SVGSVGElement, IconProps>(\n  'TimeClockIcon20Light',\n  (props, ref) => {\n    return (\n      <BaseIcon ref={ref} viewBoxSize={20} {...props}>\n        <path d=\"M10.0033 6.50463C10.0033 6.22849 9.77943 6.00464 9.50329 6.00464C9.22715 6.00464 9.00329 6.2285 9.0033 6.50464L9.00332 9.47699C9.00332 10.1394 9.3774 10.7451 9.96974 11.0417L12.7761 12.4471C13.023 12.5707 13.3234 12.4708 13.4471 12.2239C13.5707 11.977 13.4708 11.6766 13.2239 11.5529L10.4175 10.1476C10.1636 10.0205 10.0033 9.76089 10.0033 9.47698L10.0033 6.50463Z\" />\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z\"\n        />\n      </BaseIcon>\n    );\n  },\n);\n"]}

package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../BaseIcon.js';
+export declare const TimeClockIcon24Regular: import("../../../lib/forwardRefAndName.js").ReactUIComponentWithRef<SVGSVGElement, IconProps> & Record<never, never>;

package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { forwardRefAndName } from '../../../lib/forwardRefAndName.js';
+import { BaseIcon } from '../BaseIcon.js';
+export var TimeClockIcon24Regular = forwardRefAndName('TimeClockIcon24Regular', function (props, ref) {
+    return (React.createElement(BaseIcon, __assign({ ref: ref, viewBoxSize: 24 }, props),
+        React.createElement("path", { d: "M12.5 7.3125C12.5 6.89829 12.1642 6.5625 11.75 6.5625C11.3358 6.5625 11 6.89829 11 7.3125V11.2604C11 12.1127 11.4815 12.8918 12.2438 13.2729L15.5396 14.9208C15.9101 15.1061 16.3606 14.9559 16.5458 14.5854C16.7311 14.2149 16.5809 13.7644 16.2104 13.5792L12.9146 11.9313C12.6605 11.8042 12.5 11.5445 12.5 11.2604V7.3125Z" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12Z" })));
+});
+//# sourceMappingURL=TimeClockIcon24Regular.js.map

package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeClockIcon24Regular.js","sourceRoot":"","sources":["TimeClockIcon24Regular.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,CAAC,IAAM,sBAAsB,GAAG,iBAAiB,CACrD,wBAAwB,EACxB,UAAC,KAAK,EAAE,GAAG;IACT,OAAO,CACL,oBAAC,QAAQ,aAAC,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,EAAE,IAAM,KAAK;QAC5C,8BAAM,CAAC,EAAC,gUAAgU,GAAG;QAC3U,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gTAAgT,GAClT,CACO,CACZ,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport type { IconProps } from '../BaseIcon.js';\nimport { BaseIcon } from '../BaseIcon.js';\n\nexport const TimeClockIcon24Regular = forwardRefAndName<SVGSVGElement, IconProps>(\n  'TimeClockIcon24Regular',\n  (props, ref) => {\n    return (\n      <BaseIcon ref={ref} viewBoxSize={24} {...props}>\n        <path d=\"M12.5 7.3125C12.5 6.89829 12.1642 6.5625 11.75 6.5625C11.3358 6.5625 11 6.89829 11 7.3125V11.2604C11 12.1127 11.4815 12.8918 12.2438 13.2729L15.5396 14.9208C15.9101 15.1061 16.3606 14.9559 16.5458 14.5854C16.7311 14.2149 16.5809 13.7644 16.2104 13.5792L12.9146 11.9313C12.6605 11.8042 12.5 11.5445 12.5 11.2604V7.3125Z\" />\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12Z\"\n        />\n      </BaseIcon>\n    );\n  },\n);\n"]}

package/internal/themes/BasicTheme.d.ts

@@ -595,6 +595,40 @@ export declare class BasicThemeClass {
     static mobileCalendarCellFontSize: string;
     static mobileCalendarGridRowSpacing: string;
     static mobileCalendarWrapperHeight: string;
+    static timePickerItemGapSmall: string;
+    static timePickerItemGapMedium: string;
+    static timePickerItemGapLarge: string;
+    static timePickerSuffixGapSmall: string;
+    static timePickerSuffixGapMedium: string;
+    static timePickerSuffixGapLarge: string;
+    static timePickerInputMinWidthSmall: string;
+    static timePickerInputMinWidthMedium: string;
+    static timePickerInputMinWidthLarge: string;
+    static timePickerInputMinWidthWithSecondsSmall: string;
+    static timePickerInputMinWidthWithSecondsMedium: string;
+    static timePickerInputMinWidthWithSecondsLarge: string;
+    static timePickerInputMinWidthWithIconSmall: string;
+    static timePickerInputMinWidthWithIconMedium: string;
+    static timePickerInputMinWidthWithIconLarge: string;
+    static timePickerInputMinWidthWithIconAndSecondsSmall: string;
+    static timePickerInputMinWidthWithIconAndSecondsMedium: string;
+    static timePickerInputMinWidthWithIconAndSecondsLarge: string;
+    static timePickerSeparatorOffsetTopSmall: string;
+    static timePickerSeparatorOffsetTopMedium: string;
+    static timePickerSeparatorOffsetTopLarge: string;
+    static timePickerSeparatorPaddingXSmall: string;
+    static timePickerSeparatorPaddingXMedium: string;
+    static timePickerSeparatorPaddingXLarge: string;
+    static get timePickerPopupBg(): string;
+    static get timePickerPopupBorderRadius(): string;
+    static get timePickerPopupShadow(): string;
+    static get timePickerMaskColor(): string;
+    static timePickerSelectedBgColor: string;
+    static timePickerSelectedTextColor: string;
+    static get timePickerMenuOffsetY(): string;
+    static get timePickerMenuMaxHeightSmall(): string;
+    static get timePickerMenuMaxHeightMedium(): string;
+    static get timePickerMenuMaxHeightLarge(): string;
     static rangeCalendarCellBg: string;
     static rangeCalendarCellEndBg: string;
     static rangeCalendarCellEndColor: string;

package/internal/themes/BasicTheme.js

@@ -1277,6 +1277,74 @@ var BasicThemeClass = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(BasicThemeClass, "timePickerPopupBg", {
+        get: function () {
+            return this.bgSecondary;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BasicThemeClass, "timePickerPopupBorderRadius", {
+        get: function () {
+            return this.menuBorderRadius;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BasicThemeClass, "timePickerPopupShadow", {
+        get: function () {
+            return this.menuShadow;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BasicThemeClass, "timePickerMaskColor", {
+        get: function () {
+            return this.placeholderColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BasicThemeClass, "timePickerMenuOffsetY", {
+        get: function () {
+            return "".concat(parseInt(this.menuOffsetY) - 1, "px");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BasicThemeClass, "timePickerMenuMaxHeightSmall", {
+        get: function () {
+            var timePickerVisibleItemsCount = 8;
+            var timePickerVisibleItemsGapCount = timePickerVisibleItemsCount - 1;
+            return "".concat((parseInt(this.menuItemLineHeightSmall) + parseInt(this.menuItemPaddingYSmall) * 2) *
+                timePickerVisibleItemsCount +
+                parseInt(this.menuItemGap) * timePickerVisibleItemsGapCount, "px");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BasicThemeClass, "timePickerMenuMaxHeightMedium", {
+        get: function () {
+            var timePickerVisibleItemsCount = 8;
+            var timePickerVisibleItemsGapCount = timePickerVisibleItemsCount - 1;
+            return "".concat((parseInt(this.menuItemLineHeightMedium) + parseInt(this.menuItemPaddingYMedium) * 2) *
+                timePickerVisibleItemsCount +
+                parseInt(this.menuItemGap) * timePickerVisibleItemsGapCount, "px");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BasicThemeClass, "timePickerMenuMaxHeightLarge", {
+        get: function () {
+            var timePickerVisibleItemsCount = 8;
+            var timePickerVisibleItemsGapCount = timePickerVisibleItemsCount - 1;
+            return "".concat((parseInt(this.menuItemLineHeightLarge) + parseInt(this.menuItemPaddingYLarge) * 2) *
+                timePickerVisibleItemsCount +
+                parseInt(this.menuItemGap) * timePickerVisibleItemsGapCount, "px");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(BasicThemeClass, "dateSelectMenuBg", {
         //#endregion
         //#region DateSelect
@@ -4151,6 +4219,34 @@ var BasicThemeClass = /** @class */ (function () {
     BasicThemeClass.mobileCalendarGridRowSpacing = '8px';
     BasicThemeClass.mobileCalendarWrapperHeight = '304px';
     //#endregion DatePicker
+    //#region TimePicker
+    BasicThemeClass.timePickerItemGapSmall = '8px';
+    BasicThemeClass.timePickerItemGapMedium = '8px';
+    BasicThemeClass.timePickerItemGapLarge = '8px';
+    BasicThemeClass.timePickerSuffixGapSmall = '4px';
+    BasicThemeClass.timePickerSuffixGapMedium = '6px';
+    BasicThemeClass.timePickerSuffixGapLarge = '8px';
+    BasicThemeClass.timePickerInputMinWidthSmall = '60px';
+    BasicThemeClass.timePickerInputMinWidthMedium = '74px';
+    BasicThemeClass.timePickerInputMinWidthLarge = '88px';
+    BasicThemeClass.timePickerInputMinWidthWithSecondsSmall = '86px';
+    BasicThemeClass.timePickerInputMinWidthWithSecondsMedium = '102px';
+    BasicThemeClass.timePickerInputMinWidthWithSecondsLarge = '120px';
+    BasicThemeClass.timePickerInputMinWidthWithIconSmall = '80px';
+    BasicThemeClass.timePickerInputMinWidthWithIconMedium = '100px';
+    BasicThemeClass.timePickerInputMinWidthWithIconLarge = '120px';
+    BasicThemeClass.timePickerInputMinWidthWithIconAndSecondsSmall = '106px';
+    BasicThemeClass.timePickerInputMinWidthWithIconAndSecondsMedium = '128px';
+    BasicThemeClass.timePickerInputMinWidthWithIconAndSecondsLarge = '152px';
+    BasicThemeClass.timePickerSeparatorOffsetTopSmall = '-1px';
+    BasicThemeClass.timePickerSeparatorOffsetTopMedium = '-1px';
+    BasicThemeClass.timePickerSeparatorOffsetTopLarge = '-2px';
+    BasicThemeClass.timePickerSeparatorPaddingXSmall = '1px';
+    BasicThemeClass.timePickerSeparatorPaddingXMedium = '2px';
+    BasicThemeClass.timePickerSeparatorPaddingXLarge = '2px';
+    BasicThemeClass.timePickerSelectedBgColor = '';
+    BasicThemeClass.timePickerSelectedTextColor = '';
+    //#endregion TimePicker
     //#region DateRangePicker
     BasicThemeClass.rangeCalendarCellBg = colors.shapeFaintNeutralAlpha;
     BasicThemeClass.rangeCalendarCellEndBg = colors.shapeBoldAccent;