@stamcat/craftsman 0.0.27-alpha.7 → 0.0.27-alpha.9

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

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

package/src/components/Select/Select.d.ts

@@ -0,0 +1,14 @@
+import { LabeledInput } from '../Input/InputWrapper';
+export type SelectOption = {
+    value: string;
+    selected?: boolean;
+    disabled?: boolean;
+    label: string;
+};
+export type SelectProps = React.ComponentProps<"select"> & LabeledInput & {
+    options?: {
+        label: string;
+        value: string;
+    }[];
+};
+export declare const Select: React.FC<SelectProps>;

package/src/components/Select/Select.esm.js

@@ -0,0 +1,26 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useId as n } from "react";
+//#region src/components/Select/Select.tsx
+var r = ({ label: r, id: i, labelPosition: a = "top", required: o = !1, error: s, options: c = [], className: l, style: u, ...d }) => {
+	let f = n(), p = i || f;
+	return /* @__PURE__ */ t(e, {
+		label: r,
+		labelPosition: a,
+		error: s,
+		required: o,
+		className: l,
+		style: u,
+		children: /* @__PURE__ */ t("select", {
+			id: p,
+			...d,
+			children: c.map((e, n) => /* @__PURE__ */ t("option", {
+				value: e.value,
+				children: e.label
+			}, `${p}-opt-${n}`))
+		})
+	});
+};
+//#endregion
+export { r as Select };

package/src/components/index.d.ts

@@ -1,4 +1,4 @@
-export { Button } from './Button';
+export { Button } from './Button/Button';
 export { Input } from './Input/Input';
 export { InputPassword } from './Input/InputPassword';
 export { Loader } from './Loader/Loader';
@@ -7,3 +7,6 @@ export { Checkbox } from './Input/Checkbox';
 export { Textarea } from './Input/Textarea';
 export { Text } from './Text/Text';
 export { Modal } from './Modal/Modal';
+export { Select } from './Select/Select';
+export { DatePicker } from './Input/DatePicker';
+export { InputPhone } from './Input/InputPhone';

package/src/styles/global/components/_input.scss

@@ -1,12 +1,6 @@
 @use "../../utilities/functions" as u;
 
 @layer craftsman-base {
-  %inside-input-label-base {
-    --react-international-phone-height: 50px;
-    --react-international-phone-border-radius: 8px;
-    --react-international-phone-border-color: #c0c0c0ff;
-    position: relative;
-  }
 
   %interactive-focus-reset {
     &:focus {

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

@@ -0,0 +1 @@
+.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}

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

@@ -0,0 +1,237 @@
+@use "../../utilities/functions" as u;
+
+.react-calendar {
+    width: 350px;
+    max-width: 100%;
+    background: white;
+    border: 1px solid #a0a096;
+    font-family: "Arial", "Helvetica", sans-serif;
+    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,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.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__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+    padding: 2em 0.5em;
+}
+
+.react-calendar__tile {
+    max-width: 100%;
+    padding: 10px 6.6667px;
+    background: none;
+    text-align: center;
+    font: inherit;
+    font-size: 0.833em;
+}
+
+.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__month-view__days {
+    button {
+        &.react-calendar__tile {
+            height: 50px;
+            &:hover {
+                border-radius: 50%;
+            }
+            &--active {
+                border-radius: 50%;
+            }
+            &--now {
+                border-radius: 50%;
+            }
+        }
+    }
+}
+
+// .react-calendar__month-view__days__day--weekend {
+//     color: unset;
+// }
+.react-datetime-picker {
+    button {
+        color: unset;
+        &.react-calendar__tile {
+            &--active {
+                background-color: #{u.color("blue500")};
+                color: #{u.color("white")};
+                &:hover {
+                    background-color: #{u.color("blue500")};
+                }
+            }
+            &--now {
+                // background-color: unset;
+                border: 1px solid #{u.color("text")};
+                &:hover {
+                    background-color: #{u.color("gray100")};
+                }
+            }
+            &--hasActive {
+                background: #{u.color("blue500")};
+                &:hover {
+                    background: #{u.color("blue300")};
+                }
+            }
+        }
+        &:hover {
+            background-color: unset;
+        }
+    }
+    input {
+        /* Disable spinner/flipper buttons */
+        &[type="number"] {
+            -webkit-appearance: textfield;
+            -moz-appearance: textfield;
+            appearance: textfield;
+        }
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        background-color: unset;
+        border: unset;
+        box-sizing: unset;
+        border-radius: unset;
+        &:focus,
+        &:focus-visible {
+            border: unset;
+            color: unset;
+            background: unset;
+            outline: none;
+        }
+    }
+}

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

@@ -0,0 +1 @@
+@layer craftsman-base{.react-date-picker__wrapper:focus,.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper,.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:3px}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-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-date-picker__wrapper,[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.react-datetime-picker__wrapper:disabled,.disabled.react-date-picker__wrapper,.disabled.react-datetime-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after,.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}.react-date-picker,.react-datetime-picker{display:inline-flex;position:relative}.react-date-picker--disabled,.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper,.react-datetime-picker__wrapper{border:1px solid var(--gray400);border-radius:3px;flex-grow:1;flex-shrink:0;padding:2px;display:flex}.react-date-picker__inputGroup,.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider,.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero,.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input,.react-datetime-picker__inputGroup__input{color:currentColor;min-width:.54em;height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.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-date-picker__inputGroup__input--hasLeadingZero,.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button,.react-datetime-picker__button{background:0 0;border:0;padding:4px 6px}.react-date-picker__button :enabled,.react-datetime-picker__button :enabled{cursor:pointer}.react-date-picker__button :enabled:hover .react-date-picker__button__icon,.react-date-picker__button :enabled:hover .react-datetime-picker__button__icon,.react-date-picker__button :enabled:focus .react-date-picker__button__icon,.react-date-picker__button :enabled:focus .react-datetime-picker__button__icon,.react-datetime-picker__button :enabled:hover .react-date-picker__button__icon,.react-datetime-picker__button :enabled:hover .react-datetime-picker__button__icon,.react-datetime-picker__button :enabled:focus .react-date-picker__button__icon,.react-datetime-picker__button :enabled:focus .react-datetime-picker__button__icon{stroke:#0078d7}.react-date-picker__button :disabled .react-date-picker__button__icon,.react-date-picker__button :disabled .react-datetime-picker__button__icon,.react-datetime-picker__button :disabled .react-date-picker__button__icon,.react-datetime-picker__button :disabled .react-datetime-picker__button__icon{stroke:#6d6d6d}.react-date-picker__button svg,.react-datetime-picker__button svg{display:inherit}.react-date-picker__calendar--closed,.react-date-picker__clock--closed,.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.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-datetime-picker__clock{background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}

package/src/styles/global/components/_reactDatePicker.scss

@@ -0,0 +1,152 @@
+@use "../components/input";
+@use "../../utilities/functions" as u;
+
+.react-date-picker,
+    .react-date-picker *,
+    .react-date-picker *:before,
+    .react-date-picker *:after,
+    .react-datetime-picker,
+    .react-datetime-picker *,
+    .react-datetime-picker *:before,
+    .react-datetime-picker *:after {
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+    }
+
+    .react-date-picker,
+    .react-datetime-picker {
+        display: inline-flex;
+        position: relative;
+
+        &--disabled {
+            background-color: #f0f0f0;
+            color: #6d6d6d;
+        }
+        &__wrapper {
+            display: flex;
+            flex-grow: 1;
+            flex-shrink: 0;
+            border-radius: 3px;
+            padding: 2px;
+            border: 1px solid var(--gray400);
+        }
+        &__inputGroup {
+            // min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);
+            flex-grow: 1;
+            padding: 0 2px;
+            box-sizing: content-box;
+        }
+        &__inputGroup__divider {
+            padding: 1px 0;
+            white-space: pre;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            display: inline-block;
+            font: inherit;
+        }
+        &__inputGroup__input {
+            min-width: 0.54em;
+            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;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            margin: 0;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            margin-left: -0.54em;
+            padding-left: calc(1px + 0.54em);
+        }
+        &__button {
+            border: 0;
+            background: transparent;
+            padding: 4px 6px;
+            :enabled {
+                cursor: pointer;
+                &:hover, &:focus {
+                    .react-date-picker, .react-datetime-picker {
+                        &__button__icon {
+                            stroke: #0078d7;
+                        }
+                    }
+                }
+            }
+            :disabled {
+                .react-date-picker, .react-datetime-picker {
+                    &__button__icon {
+                        stroke: #6d6d6d;
+                    }
+                }
+            }
+            svg {
+                display: inherit;
+            }
+        }
+        &__calendar--closed, &__clock--closed {
+            display: none;
+        }
+
+    }
+
+    .react-date-picker__calendar {
+        width: 350px;
+        max-width: 100vw;
+        z-index: 1;
+    }
+    .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-datetime-picker__clock {
+        width: 200px;
+        height: 200px;
+        max-width: 100vw;
+        padding: 25px;
+        background-color: white;
+        border: thin solid #a0a096;
+    }
+
+    .react-date-picker__calendar .react-calendar {
+        border-width: thin;
+    }
+    .react-date-picker__wrapper, .react-datetime-picker__wrapper {
+        // padding: 16px;
+        @extend %input-base;
+    }
+    .react-date-picker__inputGroup__input:invalid, .react-datetime-picker__inputGroup__input:invalid {
+        background: unset;
+    }

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

@@ -0,0 +1 @@
+@layer craftsman-base;.input-phone[data-label-position=inside] .input-label{top:15px;left:50px}.input-phone .react-international-phone-country-selector{position:relative}.input-phone .react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width,24px);height:var(--react-international-phone-flag-height,24px);box-sizing:border-box}.input-phone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.input-phone .react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover,whitesmoke)}.input-phone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.input-phone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.input-phone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.input-phone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.input-phone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.input-phone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.input-phone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.input-phone .react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size,4px) solid var(--react-international-phone-country-selector-arrow-color,#777);border-right:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.input-phone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.input-phone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.input-phone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.input-phone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin,0);background:var(--react-international-phone-dropdown-preferred-list-divider-color,var(--react-international-phone-border-color,gainsboro));border:none}.input-phone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.input-phone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.input-phone .react-international-phone-country-selector-dropdown__list-item--selected,.input-phone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color,var(--react-international-phone-text-color,#222))}.input-phone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.input-phone .react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color,var(--react-international-phone-dropdown-item-dial-code-color,gray))}.input-phone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.input-phone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.input-phone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.input-phone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.input-phone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));background-color:var(--react-international-phone-dial-code-preview-background-color,var(--react-international-phone-background-color,white));color:var(--react-international-phone-dial-code-preview-text-color,var(--react-international-phone-text-color,#222));font-size:var(--react-international-phone-dial-code-preview-font-size,var(--react-international-phone-font-size,13px));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.input-phone .react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color,var(--react-international-phone-disabled-text-color,#666))}.input-phone .react-international-phone-input-container{display:flex}.input-phone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.input-phone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.input-phone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.input-phone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}