@stamcat/craftsman 0.0.27-alpha.9 → 0.0.28

package/src/components/DatePicker/ReactCalendar.scss

@@ -0,0 +1,158 @@
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+
+@layer craftsman-base {
+    .react-calendar,
+    .react-calendar *,
+    .react-calendar *:before,
+    .react-calendar *:after {
+        @extend %border-box;
+    }
+
+    .react-calendar {
+        width: 350px;
+        max-width: 100%;
+        background: white;
+        border: 1px solid #a0a096;
+        line-height: 1.125em;
+    }
+
+    .react-calendar--doubleView {
+        width: 700px;
+    }
+
+    .react-calendar--doubleView .react-calendar__viewContainer {
+        display: flex;
+        margin: -0.5em;
+    }
+
+    .react-calendar--doubleView .react-calendar__viewContainer > * {
+        width: 50%;
+        margin: 0.5em;
+    }
+    .react-calendar button {
+        margin: 0;
+        border: 0;
+        outline: none;
+    }
+
+    .react-calendar button:enabled:hover {
+        cursor: pointer;
+    }
+
+    .react-calendar__navigation {
+        display: flex;
+        height: 44px;
+        margin-bottom: 1em;
+    }
+
+    .react-calendar__navigation button {
+        min-width: 44px;
+        background: none;
+    }
+
+    .react-calendar__navigation button:disabled {
+        background-color: #f0f0f0;
+    }
+
+    .react-calendar__navigation button:enabled:hover,
+    .react-calendar__navigation button:enabled:focus {
+        background-color: #e6e6e6;
+    }
+
+    .react-calendar__month-view__weekdays {
+        text-align: center;
+        text-transform: uppercase;
+        font: inherit;
+        font-size: 0.75em;
+        font-weight: bold;
+    }
+
+    .react-calendar__month-view__weekdays__weekday {
+        padding: 0.5em;
+    }
+
+    .react-calendar__month-view__weekNumbers .react-calendar__tile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font: inherit;
+        font-size: 0.75em;
+        font-weight: bold;
+    }
+
+    .react-calendar__month-view__days__day--weekend {
+        color: #d10000;
+    }
+
+    .react-calendar__month-view__days__day--neighboringMonth,
+    .react-calendar__decade-view__years__year--neighboringDecade,
+    .react-calendar__century-view__decades__decade--neighboringCentury {
+        color: #757575;
+    }
+    .react-calendar__tile:disabled {
+        background-color: #f0f0f0;
+        color: #ababab;
+    }
+
+    .react-calendar__month-view__days__day--neighboringMonth:disabled,
+    .react-calendar__decade-view__years__year--neighboringDecade:disabled,
+    .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+        color: #cdcdcd;
+    }
+
+    .react-calendar__tile:enabled:hover,
+    .react-calendar__tile:enabled:focus {
+        background-color: #e6e6e6;
+    }
+
+    .react-calendar__tile--now {
+        background: #ffff76;
+    }
+
+    .react-calendar__tile--now:enabled:hover,
+    .react-calendar__tile--now:enabled:focus {
+        background: #ffffa9;
+    }
+
+    .react-calendar__tile--hasActive {
+        background: #76baff;
+    }
+
+    .react-calendar__tile--hasActive:enabled:hover,
+    .react-calendar__tile--hasActive:enabled:focus {
+        background: #a9d4ff;
+    }
+
+    .react-calendar__tile--active {
+        background: #006edc;
+        color: white;
+    }
+
+    .react-calendar__tile--active:enabled:hover,
+    .react-calendar__tile--active:enabled:focus {
+        background: #1087ff;
+    }
+
+    .react-calendar--selectRange .react-calendar__tile--hover {
+        background-color: #e6e6e6;
+    }
+    .react-calendar {
+        border-color: #{u.color("gray400")};
+    }
+    .react-calendar button {
+        justify-content: center;
+    }
+    .react-calendar {
+        button {
+            border-radius: unset;
+            padding: 12px 0px;
+        }
+    }
+    .react-calendar__year-view, .react-calendar__decade-view, .react-calendar__century-view {
+        button {
+            padding: 18px 0px;
+        }
+    }
+
+}

package/src/components/DatePicker/_DatePicker.scss

@@ -0,0 +1,73 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+
+@layer craftsman-component {
+    %date-picker-styles {
+        display: inline-flex;
+        position: relative;
+    }
+    %date-picker-disabled {
+        background-color: #f0f0f0;
+        color: #6d6d6d;
+    }
+    %date-picker-wrapper {
+        display: flex;
+        flex-grow: 1;
+        flex-shrink: 0;
+        @extend %input-base;
+        padding: 6px 8px;
+    }
+    %date-picker-input-group {
+        // min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);
+        flex-grow: 1;
+        padding: 0 2px;
+        box-sizing: content-box;
+    }
+    %date-picker-divider {
+        padding: 1px 0;
+        white-space: pre;
+    }
+    %date-picker-leading-zero-divider {
+        display: inline-block;
+        font: inherit;
+    }
+    %date-picker-group-input {
+        min-width: calc(2ch + 1px);
+        text-align: center;
+        height: calc(100% - 2px);
+        position: relative;
+        padding: 1px;
+        border: 0;
+        background: none;
+        color: currentColor;
+        font: inherit;
+        box-sizing: content-box;
+        -webkit-appearance: textfield;
+        -moz-appearance: textfield;
+        appearance: textfield;
+        &[name="year"] {
+            min-width: calc(4ch + 2px);
+        }
+        &:disabled {
+            background-color: unset;
+        }
+    }
+    %date-picker-input-spinner {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        margin: 0;
+    }
+    %date-picker-input-leading-zero {
+        margin-left: -0.54em;
+        padding-left: calc(1px + 0.54em);
+    }
+    %date-picker-button {
+        border: 0;
+        padding: 4px 4px 4px 7px;
+        &:hover {
+            background: transparent;
+        }
+    }
+}

package/src/components/DateRangePicker/AGENTS.md

@@ -0,0 +1,38 @@
+# DateRangePicker — Agent Usage Notes
+
+Import:
+
+```tsx
+import { DateRangePicker } from "@stamcat/craftsman/DateRangePicker";
+```
+
+Props:
+
+- Extends `DateRangePickerProps` from `@wojtekmaj/react-daterange-picker`.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `id?: string`
+- `style?: React.CSSProperties`
+- `value?` / `onChange?` — from the underlying library; `value` is typically a `[Date, Date] | null` tuple.
+
+Behavior notes:
+
+- This component directly wraps `react-daterange-picker`; consult that library's docs for range-selection edge cases.
+- `calendarIcon` and `clearIcon` default to `FaRegCalendar` / `FaX` but can be overridden since consumer props are spread after the defaults.
+- Controlled component — parent owns `value` and `onChange`.
+- Calendar flyout renders below the input; ensure the container has enough vertical space.
+
+Example:
+
+```tsx
+const [range, setRange] = useState<[Date, Date] | null>(null);
+
+<DateRangePicker
+  label="Stay Dates"
+  value={range}
+  onChange={setRange}
+  required
+/>
+```

package/src/components/DateRangePicker/DateRangePicker.css

@@ -0,0 +1 @@
+@layer craftsman-base{.react-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.react-daterange-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}[type=number].react-daterange-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper{appearance:textfield}.react-daterange-picker__wrapper:disabled,.disabled.react-daterange-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-daterange-picker,.react-daterange-picker *,.react-daterange-picker :before,.react-daterange-picker :after{box-sizing:border-box}@layer craftsman-component{.react-daterange-picker{display:inline-flex;position:relative}.react-daterange-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-daterange-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-daterange-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-daterange-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-daterange-picker__inputGroup__divider,.react-daterange-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-daterange-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-daterange-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-daterange-picker__inputGroup__input:disabled{background-color:unset}.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-daterange-picker__button{border:0;padding:4px 4px 4px 7px}.react-daterange-picker__button:hover{background:0 0}.react-daterange-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-daterange-picker__calendar .react-calendar{border-width:thin}.react-daterange-picker__calendar--closed,.react-daterange-picker__clock--closed{display:none}.react-daterange-picker__calendar .react-daterange-picker__inputGroup__input:invalid{background:unset}}

package/src/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { LabeledInput } from '../Input/InputWrapper';
+import { DateRangePickerProps as ReactDateRangePickerProps } from '@wojtekmaj/react-daterange-picker';
+export type DateRangePickerProps = ReactDateRangePickerProps & LabeledInput & {
+    id?: string;
+    style?: React.CSSProperties;
+};
+export declare const DateRangePicker: React.FC<DateRangePickerProps>;

package/src/components/DateRangePicker/DateRangePicker.scss

@@ -0,0 +1,62 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+@use "../DatePicker/_DatePicker";
+@layer craftsman-component {
+    .react-daterange-picker,
+    .react-daterange-picker *,
+    .react-daterange-picker *:before,
+    .react-daterange-picker *:after {
+        @extend %border-box;
+    }
+
+    .react-daterange-picker {
+        @extend %date-picker-styles;
+        &--disabled {
+            @extend %date-picker-disabled;
+        }
+        &__wrapper {
+            @extend %date-picker-wrapper;
+        }
+        &__inputGroup {
+            @extend %date-picker-input-group;
+        }
+        &__inputGroup__divider {
+            @extend %date-picker-divider;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            @extend %date-picker-leading-zero-divider;
+        }
+        &__inputGroup__input {
+            @extend %date-picker-group-input;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            @extend %date-picker-input-spinner;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            @extend %date-picker-input-leading-zero;
+        }
+        &__button {
+            @extend %date-picker-button;
+        }
+        &__calendar {
+            width: 350px;
+            max-width: 100vw;
+            z-index: 1;
+            .react-calendar {
+                    border-width: thin;
+            }
+        }
+        &__calendar--closed, &__clock--closed {
+            display: none;
+        }
+
+    }
+    .react-daterange-picker__calendar 
+    .react-daterange-picker__inputGroup__input:invalid {
+        background: unset;
+    }
+
+}

package/src/components/DateRangePicker/DateRangePicker2.esm.js

@@ -0,0 +1,29 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import './DateRangePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css                              */
+/* empty css                    */
+import t from "../../../node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.esm.js";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+import { useId as i } from "react";
+import { FaRegCalendar as a, FaX as o } from "react-icons/fa6";
+//#region src/components/DateRangePicker/DateRangePicker.tsx
+var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
+	let h = i();
+	return /* @__PURE__ */ r(e, {
+		id: c || h,
+		className: n("dateRangePicker", p),
+		label: s,
+		labelPosition: l,
+		error: d,
+		required: u,
+		style: f,
+		children: /* @__PURE__ */ r(t, {
+			calendarIcon: /* @__PURE__ */ r(a, { size: 16 }),
+			clearIcon: /* @__PURE__ */ r(o, { size: 14 }),
+			...m
+		})
+	});
+};
+//#endregion
+export { s as DateRangePicker };

package/src/components/DateTimePicker/AGENTS.md

@@ -0,0 +1,41 @@
+# DateTimePicker — Agent Usage Notes
+
+> Not yet part of the documented public export surface (see `craftsman-component-usage` skill's Known Limitations). Source path only — do not assume `@stamcat/craftsman/DateTimePicker` is published until confirmed in `exports.ts`.
+
+Import (source-relative, once exported):
+
+```tsx
+import { DateTimePicker } from "@stamcat/craftsman/DateTimePicker";
+```
+
+Props:
+
+- Extends `react-datetime-picker`'s `DateTimePickerProps` plus `LabeledInput` (`label`, `labelPosition`, `error`, `required`).
+- `id?: string`
+- `style?: React.CSSProperties`
+- `format?: 24 | 12` — hour format used by the custom time wheel display.
+- `labels?: { hour?: string; minute?: string }` — labels passed through to the time wheel.
+- `value` / `onChange` — standard `Date` value and change callback.
+
+Behavior notes:
+
+- Directly wraps `react-datetime-picker`, but replaces its native clock UI with the custom `TimePickerDisplay` wheel (shared with `TimePicker`); `isClockOpen` is always forced `false` on the underlying component.
+- Clicking/focusing a time sub-field opens the custom wheel only if `value` is already a valid `Date`. If no date is selected yet, focus is redirected to the date field so the calendar opens instead of the time wheel.
+- Clicking outside the wrapper (`pointerdown`) closes the time wheel.
+- Opening the calendar (`onCalendarOpen`) closes the time wheel so both widgets are never open simultaneously.
+- `onChangeTime` builds the resulting `Date` from the existing `value` if present, otherwise from `new Date()` (today), then sets hours/minutes on it before calling `onChange`.
+
+Example:
+
+```tsx
+<DateTimePicker
+  label="Appointment"
+  value={value}
+  onChange={setValue}
+  format={12}
+/>
+```
+
+Implementation caution:
+
+- Relies on `react-datetime-picker`'s rendered sub-input `name` attributes (`day`/`month`/`year` vs `hour12`/`hour24`/`minute`/`second`/`amPm`) to distinguish date vs. time fields for the focus-redirect behavior. Upgrading `react-datetime-picker` may require re-verifying these names.

package/src/components/DateTimePicker/DateTimePicker.css

@@ -0,0 +1 @@
+@layer craftsman-base{.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer craftsman-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}

package/src/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { LabeledInput } from '../Input/InputWrapper';
+import { DateTimePickerProps as ReactDateTimePickerProps } from 'react-datetime-picker';
+export type DateTimePickerProps = ReactDateTimePickerProps & LabeledInput & {
+    id?: string;
+    style?: React.CSSProperties;
+    format?: 24 | 12;
+    labels?: {
+        hour?: string;
+        minute?: string;
+    };
+};
+export declare const DateTimePicker: React.FC<DateTimePickerProps>;

package/src/components/DateTimePicker/DateTimePicker.scss

@@ -0,0 +1,86 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+@use "../DatePicker/_DatePicker";
+@layer craftsman-component {
+    .react-datetime-picker,
+    .react-datetime-picker *,
+    .react-datetime-picker *:before,
+    .react-datetime-picker *:after {
+        @extend %border-box;
+    }
+    .react-datetime-picker {
+        @extend %date-picker-styles;
+        &--disabled {
+            @extend %date-picker-disabled;
+        }
+        &__wrapper {
+            @extend %date-picker-wrapper;
+        }
+        &__inputGroup {
+            @extend %date-picker-input-group;
+        }
+        &__inputGroup__divider {
+            @extend %date-picker-divider;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            @extend %date-picker-leading-zero-divider;
+        }
+        &__inputGroup__input {
+            @extend %date-picker-group-input;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            @extend %date-picker-input-spinner;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            @extend %date-picker-input-leading-zero;
+        }
+        &__button {
+            @extend %date-picker-button;
+        }
+        &__calendar--closed, &__clock--closed {
+            display: none;
+        }
+
+    }
+    .react-datetime-picker__calendar,
+    .react-datetime-picker__clock {
+        z-index: 1;
+    }
+
+    .react-datetime-picker__inputGroup__input:invalid {
+        background: rgba(255, 0, 0, 0.1);
+    }
+
+    .react-datetime-picker__inputGroup__amPm {
+        font: inherit;
+        -webkit-appearance: menulist;
+        -moz-appearance: menulist;
+        appearance: menulist;
+    }
+        .react-datetime-picker__calendar {
+        width: 350px;
+        max-width: 100vw;
+    }
+
+    .react-datetime-picker__calendar .react-calendar {
+        border-width: thin;
+    }
+    .react-date-picker__inputGroup__input:invalid, .react-datetime-picker__inputGroup__input:invalid {
+        background: unset;
+    }
+
+    .dateTimePicker {
+
+        &__time-display {
+            margin-top: 8px;
+            display: flex;
+        }
+    }
+
+    .dateTimePicker__wrapper {
+        display: inline-block;
+    }
+}

package/src/components/DateTimePicker/DateTimePicker2.esm.js

@@ -0,0 +1,82 @@
+"use client";
+import { formatTime as e } from "../../utilities/validations.esm.js";
+import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
+import './DateTimePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css                              */
+import { resolveLocale as n } from "../TimePicker/utilities.esm.js";
+import { TimePickerDisplay as r } from "../TimePicker/TimePickerDisplay.esm.js";
+import { require_lib as i } from "../../../node_modules/react-device-detect/dist/lib.esm.js";
+/* empty css                   */
+import a from "clsx";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { FaRegCalendar as f, FaX as p } from "react-icons/fa6";
+import { DateTimePicker as m } from "react-datetime-picker";
+//#region src/components/DateTimePicker/DateTimePicker.tsx
+var h = i(), g = ({ label: i, id: g, labelPosition: _ = "top", required: v = !1, error: y, style: b, className: x, locale: S, labels: C, format: w, value: T, onChange: E, ...D }) => {
+	let O = l(), k = g || O, A = u(null), [j, M] = d(!1), N = n(S);
+	c(() => {
+		if (!j) return;
+		let e = (e) => {
+			let t = e.target;
+			A.current?.contains(t) || M(!1);
+		};
+		return document.addEventListener("pointerdown", e, !0), () => {
+			document.removeEventListener("pointerdown", e, !0);
+		};
+	}, [j]);
+	let P = () => {
+		if (!h.isMobile && T instanceof Date) {
+			M(!0);
+			return;
+		}
+		(A.current?.querySelector("input[name=\"day\"]"))?.focus();
+	}, F = (e) => {
+		e.target instanceof HTMLInputElement && P();
+	}, I = (e) => {
+		h.isMobile && e.key === "Enter" && M(!1);
+	}, L = (e) => {
+		let [t, n] = e.split(":"), r = Number(t), i = Number(n);
+		if (Number.isNaN(r) || Number.isNaN(i)) return;
+		let a = T instanceof Date ? new Date(T) : /* @__PURE__ */ new Date();
+		a.setHours(r, i, 0, 0), E?.(a);
+	};
+	return /* @__PURE__ */ o("div", {
+		ref: A,
+		className: "dateTimePicker",
+		onKeyDown: I,
+		children: /* @__PURE__ */ s(t, {
+			id: k,
+			onFocus: F,
+			className: a(x, "dateTimePicker_wrapper"),
+			label: i,
+			labelPosition: _,
+			error: y,
+			required: v,
+			style: b,
+			value: T instanceof Date ? T.toISOString() : void 0,
+			children: [/* @__PURE__ */ o(m, {
+				isClockOpen: !1,
+				onClockOpen: P,
+				onClockClose: () => {},
+				onCalendarOpen: () => M(!1),
+				calendarIcon: /* @__PURE__ */ o(f, { size: 16 }),
+				clearIcon: /* @__PURE__ */ o(p, { size: 14 }),
+				value: T,
+				onChange: E,
+				...D
+			}), j && /* @__PURE__ */ o("div", {
+				className: "dateTimePicker__time-display",
+				children: /* @__PURE__ */ o(r, {
+					value: e(T, S),
+					onChange: L,
+					locale: N,
+					labels: C,
+					format: w,
+					visible: j
+				})
+			})]
+		})
+	});
+};
+//#endregion
+export { g as DateTimePicker };

package/src/components/Icons/IconAmazonPay.d.ts

@@ -0,0 +1,2 @@
+import { SVGIconProps } from './types';
+export declare const IconAmazonPay: ({ width, ...props }: SVGIconProps) => import("react").JSX.Element;