@stamcat/craftsman 0.0.27-alpha.9 → 0.0.28

package/src/utilities/types.d.ts

@@ -52,6 +52,8 @@ export type TextInputExclusions = z.infer<typeof zTextInputExclusions>;
 export declare const zTextInputTypes: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week", "radio", "checkbox"];
 export declare const zTextInputType: z.ZodEnum<{
     number: "number";
+    search: "search";
+    month: "month";
     text: "text";
     checkbox: "checkbox";
     radio: "radio";
@@ -62,11 +64,9 @@ export declare const zTextInputType: z.ZodEnum<{
     file: "file";
     hidden: "hidden";
     image: "image";
-    month: "month";
     password: "password";
     range: "range";
     reset: "reset";
-    search: "search";
     submit: "submit";
     tel: "tel";
     time: "time";
@@ -83,6 +83,18 @@ export declare const zLabelPosition: z.ZodEnum<{
     inside: "inside";
 }>;
 export type LabelPosition = z.infer<typeof zLabelPosition>;
+export declare const zCheckboxLabelPosition: z.ZodEnum<{
+    top: "top";
+    left: "left";
+    bottom: "bottom";
+    right: "right";
+}>;
+export type CheckboxLabelPosition = z.infer<typeof zCheckboxLabelPosition>;
+export declare const zRadioLabelPosition: z.ZodEnum<{
+    left: "left";
+    right: "right";
+}>;
+export type RadioLabelPosition = z.infer<typeof zRadioLabelPosition>;
 export declare const ButtonType: z.ZodEnum<{
     text: "text";
     primary: "primary";
@@ -109,10 +121,23 @@ export declare const TextType: z.ZodEnum<{
 }>;
 export type TextType = z.infer<typeof TextType>;
 export declare const TextSize: z.ZodEnum<{
+    small: "small";
     xlarge: "xlarge";
     large: "large";
     medium: "medium";
-    small: "small";
     xsmall: "xsmall";
 }>;
 export type TextSize = z.infer<typeof TextSize>;
+export declare const CarouselPageType: z.ZodEnum<{
+    dots: "dots";
+    numbers: "numbers";
+}>;
+export type CarouselPageType = z.infer<typeof CarouselPageType>;
+export declare const NoticeType: z.ZodEnum<{
+    help: "help";
+    info: "info";
+    success: "success";
+    error: "error";
+    none: "none";
+}>;
+export type NoticeType = z.infer<typeof NoticeType>;

package/src/utilities/types.esm.js

@@ -49,11 +49,11 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	"right",
 	"inside",
 	"hidden"
-]), u = e.enum([
+]), u = l.exclude(["inside", "hidden"]), d = l.extract(["left", "right"]), f = e.enum([
 	"primary",
 	"default",
 	"text"
-]), d = e.enum([
+]), p = e.enum([
 	"h1",
 	"h2",
 	"h3",
@@ -62,18 +62,24 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	"p",
 	"span",
 	"div"
-]), f = e.enum([
+]), m = e.enum([
 	"display",
 	"heading",
 	"paragraph",
 	"caption",
 	"small-title"
-]), p = e.enum([
+]), h = e.enum([
 	"xlarge",
 	"large",
 	"medium",
 	"small",
 	"xsmall"
+]), g = e.enum(["dots", "numbers"]), _ = e.enum([
+	"help",
+	"info",
+	"success",
+	"error",
+	"none"
 ]);
 //#endregion
-export { t as BaseWidthSchema, i as BreakpointSchema, u as ButtonType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema, p as TextSize, d as TextTags, f as TextType, l as zLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };
+export { t as BaseWidthSchema, i as BreakpointSchema, f as ButtonType, g as CarouselPageType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, _ as NoticeType, n as ScreenWidthSchema, h as TextSize, p as TextTags, m as TextType, u as zCheckboxLabelPosition, l as zLabelPosition, d as zRadioLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };

package/src/utilities/validations.d.ts

@@ -1,2 +1,7 @@
+import { DateTimePickerProps } from 'react-datetime-picker';
 export declare function isEmpty(value: unknown): boolean;
 export declare function validateEmail(value: string): boolean;
+export declare const getUnitLabel: (locale: Intl.LocalesArgument, unit: Intl.NumberFormatOptions["unit"], override?: string) => string;
+export declare const is24HourFormat: (locale: Intl.LocalesArgument) => boolean;
+export declare const getAmPmLabels: (locale: Intl.LocalesArgument) => [string, string];
+export declare const formatTime: (value: DateTimePickerProps["value"], locale: Intl.LocalesArgument) => string;

package/src/utilities/validations.esm.js

@@ -5,5 +5,23 @@ function e(e) {
 function t(e) {
 	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
+var n = (e, t, n) => n ?? new Intl.NumberFormat(e, {
+	style: "unit",
+	unit: t,
+	unitDisplay: "long"
+}).formatToParts(1).find((e) => e.type === "unit")?.value ?? String(t), r = (e) => {
+	let t = new Intl.DateTimeFormat(e, { hour: "numeric" }).resolvedOptions();
+	return t.hourCycle === "h23" || t.hourCycle === "h24";
+}, i = (e) => {
+	let t = new Intl.DateTimeFormat(e, {
+		hour: "numeric",
+		hour12: !0
+	});
+	return [t.formatToParts(new Date(2e3, 0, 1, 9)).find((e) => e.type === "dayPeriod")?.value ?? "AM", t.formatToParts(new Date(2e3, 0, 1, 21)).find((e) => e.type === "dayPeriod")?.value ?? "PM"];
+}, a = (e, t) => e instanceof Date ? new Intl.DateTimeFormat(t, {
+	hour: "2-digit",
+	minute: "2-digit",
+	hour12: !1
+}).format(e) : "--:--";
 //#endregion
-export { e as isEmpty, t as validateEmail };
+export { a as formatTime, i as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, e as isEmpty, t as validateEmail };

package/src/components/Input/Checkbox.d.ts

@@ -1,7 +0,0 @@
-import { InputProps } from './Input';
-type CheckboxProps = InputProps & {
-    type?: "checkbox";
-    labelPosition?: "left" | "right" | "top" | "bottom";
-};
-export declare const Checkbox: React.FC<CheckboxProps>;
-export {};

package/src/components/Input/Checkbox.esm.js

@@ -1,11 +0,0 @@
-"use client";
-import { Input as e } from "./Input2.esm.js";
-import { jsx as t } from "react/jsx-runtime";
-//#region src/components/Input/Checkbox.tsx
-var n = ({ type: n = "checkbox", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
-	type: n,
-	labelPosition: r,
-	...i
-});
-//#endregion
-export { n as Checkbox };

package/src/components/Input/DatePicker.d.ts

@@ -1,8 +0,0 @@
-import { default as React } from 'react';
-import { LabeledInput } from './InputWrapper';
-import { DatePickerProps } from 'react-date-picker';
-export type InputProps = DatePickerProps & LabeledInput & {
-    id?: string;
-    style?: React.CSSProperties;
-};
-export declare const DatePicker: React.FC<InputProps>;

package/src/components/Input/DatePicker.esm.js

@@ -1,24 +0,0 @@
-"use client";
-import { InputWrapper as e } from "./InputWrapper.esm.js";
-import '../../styles/global/components/_reactCalendar.css';import '../../styles/global/components/_reactDatePicker.css';/* empty css                                                  */
-/* empty css                                                */
-import t from "clsx";
-import { jsx as n } from "react/jsx-runtime";
-import { useId as r } from "react";
-import { DatePicker as i } from "react-date-picker";
-//#region src/components/Input/DatePicker.tsx
-var a = ({ label: a, id: o, labelPosition: s = "top", required: c = !1, error: l, style: u, className: d, ...f }) => {
-	let p = r();
-	return /* @__PURE__ */ n(e, {
-		id: o || p,
-		className: t(d),
-		label: a,
-		labelPosition: s,
-		error: l,
-		required: c,
-		style: u,
-		children: /* @__PURE__ */ n(i, { ...f })
-	});
-};
-//#endregion
-export { a as DatePicker };

package/src/components/Input/InputPassword.esm.js

@@ -1,28 +0,0 @@
-"use client";
-import { Button as e } from "../Button/Button.esm.js";
-import { Input as t } from "./Input2.esm.js";
-import { jsx as n } from "react/jsx-runtime";
-import { useState as r } from "react";
-import { ImEye as i, ImEyeBlocked as a } from "react-icons/im";
-//#region src/components/Input/InputPassword.tsx
-var o = ({ visible: t, onToggle: r }) => /* @__PURE__ */ n(e, {
-	type: "button",
-	variant: "text",
-	onClick: r,
-	"aria-label": t ? "Hide password" : "Show password",
-	"aria-pressed": t,
-	className: "input-view-toggle",
-	children: n(t ? i : a, { size: 16 })
-}), s = ({ type: e = "password", ...i }) => {
-	let [a, s] = r(!1), c = a ? "text" : e;
-	return /* @__PURE__ */ n(t, {
-		...i,
-		type: c,
-		endAdornment: /* @__PURE__ */ n(o, {
-			visible: a,
-			onToggle: () => s((e) => !e)
-		})
-	});
-};
-//#endregion
-export { s as InputPassword };

package/src/components/Input/RadioButton.d.ts

@@ -1,7 +0,0 @@
-import { InputProps } from './Input';
-type RadioButtonProps = InputProps & {
-    type?: "radio";
-    labelPosition?: "left" | "right";
-};
-export declare const RadioButton: React.FC<RadioButtonProps>;
-export {};

package/src/components/Input/RadioButton.esm.js

@@ -1,11 +0,0 @@
-"use client";
-import { Input as e } from "./Input2.esm.js";
-import { jsx as t } from "react/jsx-runtime";
-//#region src/components/Input/RadioButton.tsx
-var n = ({ type: n = "radio", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
-	type: n,
-	labelPosition: r,
-	...i
-});
-//#endregion
-export { n as RadioButton };

package/src/components/Input/Textarea.esm.js

@@ -1,24 +0,0 @@
-"use client";
-import { InputWrapper as e } from "./InputWrapper.esm.js";
-import t from "clsx";
-import { jsx as n } from "react/jsx-runtime";
-import { useId as r } from "react";
-//#region src/components/Input/Textarea.tsx
-var i = ({ labelPosition: i = "top", id: a, label: o, error: s, required: c, className: l, style: u, ...d }) => {
-	let f = r(), p = a || f;
-	return /* @__PURE__ */ n(e, {
-		label: o,
-		className: t("textarea", l),
-		labelPosition: i,
-		error: s,
-		required: c,
-		style: u,
-		children: /* @__PURE__ */ n("textarea", {
-			id: p,
-			className: "input",
-			...d
-		})
-	});
-};
-//#endregion
-export { i as Textarea };

package/src/components/Modal/Modal.esm.js

@@ -1,53 +0,0 @@
-"use client";
-import { color as e } from "../../styles/utilities/color.esm.js";
-import { Button as t } from "../Button/Button.esm.js";
-import n from "./Modal.module.esm.js";
-import r from "clsx";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "react";
-import { LuX as c } from "react-icons/lu";
-//#region src/components/Modal/Modal.tsx
-var l = class extends s.PureComponent {
-	state = { isClosing: !1 };
-	onDismiss = () => {
-		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
-			this.props.onDismiss && this.props.onDismiss(), this.setState({ isClosing: !1 });
-		}, 280));
-	};
-	onClickBackground = () => {
-		(this.props.backgroundDismiss ?? !0) === !0 && this.onDismiss();
-	};
-	render() {
-		let s = this.props.type || "dialog";
-		return this.props.visible ? /* @__PURE__ */ o("div", {
-			className: r([n.wrapper, this.props.className]),
-			style: this.props.style,
-			children: [/* @__PURE__ */ o("div", {
-				className: r(n.content, n[s]),
-				"data-is-closing": this.state.isClosing,
-				children: [
-					/* @__PURE__ */ o("header", { children: [this.props.header && /* @__PURE__ */ a(i, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ a(t, {
-						variant: "primary",
-						className: n.closeModal,
-						onClick: this.onDismiss,
-						children: /* @__PURE__ */ a(c, {
-							fill: e("white"),
-							size: 18
-						})
-					})] }),
-					/* @__PURE__ */ a("section", { children: this.props.children }),
-					this.props.footer && /* @__PURE__ */ a("footer", {
-						className: n.actionContainer,
-						children: this.props.footer
-					})
-				]
-			}), /* @__PURE__ */ a("div", {
-				className: n.background,
-				"data-is-closing": this.state.isClosing,
-				onClick: this.onClickBackground
-			})]
-		}) : /* @__PURE__ */ a(i, {});
-	}
-};
-//#endregion
-export { l as Modal };

package/src/components/Modal/Modal.module.css

@@ -1 +0,0 @@
-._wrapper_3m995_1,._background_3m995_1{width:100%;height:100%;position:fixed;inset:0}@keyframes _fadeIn_3m995_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_3m995_1{0%{opacity:1}to{opacity:0}}@keyframes _slideIn_3m995_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slideOut_3m995_1{0%{transform:translateY(0)}to{transform:translateY(100%)}}._wrapper_3m995_1{z-index:1000;justify-content:center;align-items:center;display:flex}._background_3m995_1{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}._background_3m995_1[data-is-closing=true]{animation:.3s ease-in-out _fadeOut_3m995_1}._background_3m995_1[data-is-closing=false]{animation:.3s ease-in-out _fadeIn_3m995_1}._content_3m995_62{padding:var(--w-gutter);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}._content_3m995_62[data-is-closing=true]{animation:.3s ease-in-out _slideOut_3m995_1}._content_3m995_62[data-is-closing=false]{animation:.3s ease-in-out _slideIn_3m995_1}._content_3m995_62._panel_3m995_78{height:100%;position:fixed;top:0;right:0}._content_3m995_62._dialog_3m995_84{border-radius:8px}._content_3m995_62>header{width:100%;margin-bottom:calc(var(--w-gutter) * .5);justify-content:space-between;display:inline-flex}._content_3m995_62>header>button:only-child{margin-left:auto}._actionContainer_3m995_97{margin-top:calc(var(--w-gutter) * 2);background-color:var(--white);gap:var(--w-gutter);height:fit-content;display:flex}._closeModal_3m995_105{border-radius:50%;justify-content:center;width:30px;height:30px;padding:0;text-decoration:none;display:inline-flex}@media (width>=0) and (width<=660px){._content_3m995_62._panel_3m995_78,._content_3m995_62._dialog_3m995_84{width:100%;height:100%}}@media (width>=660px){._content_3m995_62._panel_3m995_78{width:calc((var(--w-column) * 4) + (var(--w-gutter) * 3))}._content_3m995_62._dialog_3m995_84{width:calc((var(--w-column) * 6) + (var(--w-gutter) * 5))}}@media (width>=1040px){._content_3m995_62._dialog_3m995_84{width:calc((var(--w-column) * 8) + (var(--w-gutter) * 7))}}

package/src/components/Modal/Modal.module.esm.js

@@ -1,16 +0,0 @@
-import './Modal.module.css';//#region src/components/Modal/Modal.module.scss
-var e = "_wrapper_3m995_1", t = "_background_3m995_1", n = "_fadeOut_3m995_1", r = "_fadeIn_3m995_1", i = "_content_3m995_62", a = "_slideOut_3m995_1", o = "_slideIn_3m995_1", s = "_panel_3m995_78", c = "_dialog_3m995_84", l = "_actionContainer_3m995_97", u = "_closeModal_3m995_105", d = {
-	wrapper: e,
-	background: t,
-	fadeOut: n,
-	fadeIn: r,
-	content: i,
-	slideOut: a,
-	slideIn: o,
-	panel: s,
-	dialog: c,
-	actionContainer: l,
-	closeModal: u
-};
-//#endregion
-export { l as actionContainer, t as background, u as closeModal, i as content, d as default, c as dialog, r as fadeIn, n as fadeOut, s as panel, o as slideIn, a as slideOut, e as wrapper };

package/src/components/Modal/Modal.module.scss

@@ -1,147 +0,0 @@
-@use "../../styles/global/components/modal";
-@use "../../styles/utilities/functions" as u;
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideOut {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(100%);
-  }
-}
-
-.wrapper {
-  @extend %modal-overlay;
-  z-index: 1000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.background {
-  @extend %modal-overlay;
-  z-index: 1001;
-  background-color: rgba(0, 0, 0, 0.5);
-  animation-fill-mode: forwards;
-
-  &[data-is-closing="true"] {
-    animation: fadeOut 0.3s ease-in-out;
-  }
-
-  &[data-is-closing="false"] {
-    animation: fadeIn 0.3s ease-in-out;
-  }
-}
-
-.content {
-  padding: #{u.width("gutter")};
-  z-index: 1002;
-  background-color: var(--white);
-  max-height: 80vh;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  touch-action: pan-y;
-  animation-fill-mode: forwards;
-
-  &[data-is-closing="true"] {
-    animation: slideOut 0.3s ease-in-out;
-  }
-
-  &[data-is-closing="false"] {
-    animation: slideIn 0.3s ease-in-out;
-  }
-
-  &.panel {
-    position: fixed;
-    top: 0;
-    right: 0;
-    height: 100%;
-  }
-
-  &.dialog {
-    border-radius: 8px;
-  }
-
-  > header {
-    display: inline-flex;
-    width: 100%;
-    justify-content: space-between;
-    margin-bottom: #{u.width("gutter", 0.5)};
-
-    > button:only-child {
-      margin-left: auto;
-    }
-  }
-}
-
-.actionContainer {
-  margin-top: #{u.width("gutter", 2)};
-  background-color: var(--white);
-  height: fit-content;
-  display: flex;
-  gap: #{u.width("gutter")};
-}
-.closeModal {
-    text-decoration: none;
-    height: 30px;
-    width: 30px;
-    border-radius: 50%;
-    padding: 0;
-    display: inline-flex;
-    justify-content: center;
-};
-
-@include u.breakpoint(mobileOnly) {
-  .content.panel,
-  .content.dialog {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@include u.breakpoint(tablet) {
-  .content.panel {
-    width: #{u.width("column", 4)};
-  }
-
-  .content.dialog {
-    width: #{u.width("column", 6)};
-  }
-}
-
-@include u.breakpoint(desktop) {
-  .content.dialog {
-    width: #{u.width("column", 8)};
-  }
-}

package/src/styles/global/components/_reactCalendar.css

@@ -1 +0,0 @@
-.react-calendar{background:#fff;border:1px solid #a0a096;width:350px;max-width:100%;font-family:Arial,Helvetica,sans-serif;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{margin:-.5em;display:flex}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar,.react-calendar *,.react-calendar :before,.react-calendar :after{box-sizing:border-box}.react-calendar button{border:0;outline:none;margin:0}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{height:44px;margin-bottom:1em;display:flex}.react-calendar__navigation button{background:0 0;min-width:44px}.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:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{font:inherit;justify-content:center;align-items:center;font-size:.75em;font-weight:700;display:flex}.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__year-view .react-calendar__tile,.react-calendar__decade-view .react-calendar__tile,.react-calendar__century-view .react-calendar__tile{padding:2em .5em}.react-calendar__tile{text-align:center;max-width:100%;font:inherit;background:0 0;padding:10px 6.6667px;font-size:.833em}.react-calendar__tile:disabled{color:#ababab;background-color:#f0f0f0}.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{color:#fff;background:#006edc}.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:var(--gray400)}.react-calendar button{justify-content:center}.react-calendar__month-view__days button.react-calendar__tile{height:50px}.react-calendar__month-view__days button.react-calendar__tile:hover,.react-calendar__month-view__days button.react-calendar__tile--active,.react-calendar__month-view__days button.react-calendar__tile--now{border-radius:50%}.react-datetime-picker button{color:unset}.react-datetime-picker button.react-calendar__tile--active{background-color:var(--blue500);color:var(--white)}.react-datetime-picker button.react-calendar__tile--active:hover{background-color:var(--blue500)}.react-datetime-picker button.react-calendar__tile--now{border:1px solid var(--text)}.react-datetime-picker button.react-calendar__tile--now:hover{background-color:var(--gray100)}.react-datetime-picker button.react-calendar__tile--hasActive{background:var(--blue500)}.react-datetime-picker button.react-calendar__tile--hasActive:hover{background:var(--blue300)}.react-datetime-picker button:hover{background-color:unset}.react-datetime-picker input[type=number]{appearance:textfield}.react-datetime-picker input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.react-datetime-picker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datetime-picker input{background-color:unset;border:unset;box-sizing:unset;border-radius:unset}.react-datetime-picker input:focus,.react-datetime-picker input:focus-visible{border:unset;color:unset;background:unset;outline:none}