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

package/Components.esm.js

@@ -1,6 +1,6 @@
 import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
 import { Button as t } from "./src/components/Button/Button.esm.js";
-import { Input as n } from "./src/components/Input/Input.esm.js";
+import { Input as n } from "./src/components/Input/Input2.esm.js";
 import { InputPassword as r } from "./src/components/Input/InputPassword.esm.js";
 import { Loader as i } from "./src/components/Loader/Loader.esm.js";
 import { RadioButton as a } from "./src/components/Input/RadioButton.esm.js";
@@ -9,12 +9,16 @@ import { Textarea as s } from "./src/components/Input/Textarea.esm.js";
 import { Text as c } from "./src/components/Text/Text2.esm.js";
 import { Modal as l } from "./src/components/Modal/Modal.esm.js";
 import { Select as u } from "./src/components/Select/Select.esm.js";
+import { DatePicker as d } from "./src/components/Input/DatePicker.esm.js";
+import { InputPhone as f } from "./src/components/Input/InputPhone.esm.js";
 //#region src/components/index.ts
-var d = /* @__PURE__ */ e({
+var p = /* @__PURE__ */ e({
 	Button: () => t,
 	Checkbox: () => o,
+	DatePicker: () => d,
 	Input: () => n,
 	InputPassword: () => r,
+	InputPhone: () => f,
 	Loader: () => i,
 	Modal: () => l,
 	RadioButton: () => a,
@@ -23,4 +27,4 @@ var d = /* @__PURE__ */ e({
 	Textarea: () => s
 });
 //#endregion
-export { t as Button, o as Checkbox, n as Input, r as InputPassword, i as Loader, l as Modal, a as RadioButton, u as Select, c as Text, s as Textarea, d as components_exports };
+export { t as Button, o as Checkbox, d as DatePicker, n as Input, r as InputPassword, f as InputPhone, i as Loader, l as Modal, a as RadioButton, u as Select, c as Text, s as Textarea, p as components_exports };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.8",
+  "version": "0.0.27-alpha.9",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -99,6 +99,14 @@
     "./Select": {
       "types": "./src/components/Select.d.ts",
       "default": "./src/components/Select.esm.js"
+    },
+    "./DatePicker": {
+      "types": "./src/components/DatePicker.d.ts",
+      "default": "./src/components/DatePicker.esm.js"
+    },
+    "./InputPhone": {
+      "types": "./src/components/InputPhone.d.ts",
+      "default": "./src/components/InputPhone.esm.js"
     }
   }
 }

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

@@ -1,5 +1,5 @@
 "use client";
-import { Input as e } from "./Input.esm.js";
+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, {

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

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

@@ -0,0 +1,24 @@
+"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/Input.css

@@ -0,0 +1 @@
+@layer craftsman-base;.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .25);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .25);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] .input::placeholder{opacity:0;transition:opacity .2s}.input-wrapper .input-field{align-items:center;display:inline-flex;position:relative}.input-wrapper .input-field[data-has-end-adornment=true]>.input{width:100%;padding-right:calc(var(--w-gutter) * 1.5)}.input-wrapper .input-adornment{right:calc(var(--w-gutter) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper .input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-wrapper .input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}

package/src/components/Input/{Input.module.scss → Input.scss}

@@ -1,23 +1,22 @@
 @use "../../styles/global/components/input";
 @use "../../styles/utilities/functions" as u;
 
-
 @mixin inside-input-label-floating {
-top: -0.5rem;
-left: #{u.width("gutter", 0.125)};
-font-size: #{u.width("text", 0.75)};
+    top: -0.5rem;
+    left: #{u.width("gutter", 0.125)};
+    font-size: #{u.width("text", 0.75)};
 }
 
-.wrapper {
+.input-wrapper {
     label {
-        .inputLabel {
+        .input-label {
             margin-bottom: #{u.width("gutter", 0.25)};
         }
     }
 
     &[data-required="true"] {
         label {
-            .inputLabel {
+            .input-label {
                 &::after {
                     content: "*";
                     color: var(--red700);
@@ -31,7 +30,7 @@ font-size: #{u.width("text", 0.75)};
             display: inline-flex;
             align-items: center;
 
-            .inputLabel {
+            .input-label {
                 width: fit-content;
                 margin-right: #{u.width("gutter", 0.75)};
             }
@@ -49,7 +48,7 @@ font-size: #{u.width("text", 0.75)};
             flex-direction: column-reverse;
             align-items: flex-start;
 
-            .inputLabel {
+            .input-label {
                 margin-bottom: 0;
                 margin-top: #{u.width("gutter", 0.25)};
             }
@@ -62,7 +61,7 @@ font-size: #{u.width("text", 0.75)};
             flex-direction: row-reverse;
             align-items: baseline;
 
-            .inputLabel {
+            .input-label {
                 margin-left: #{u.width("gutter", 0.25)};
                 margin-bottom: 0;
             }
@@ -70,9 +69,12 @@ font-size: #{u.width("text", 0.75)};
     }
 
     &[data-label-position="inside"] {
-        @extend %inside-input-label-base;
+        --react-international-phone-height: 50px;
+        --react-international-phone-border-radius: 8px;
+        --react-international-phone-border-color: #c0c0c0ff;
+        position: relative;
 
-        .inputLabel {
+        .input-label {
             position: absolute;
             background-color: var(--white);
             z-index: 1;
@@ -88,13 +90,13 @@ font-size: #{u.width("text", 0.75)};
                 color 150ms ease;
         }
 
-        > label > .inputField > .input,
+        > label > .input-field > .input,
         > .input {
             transition: border-color 200ms ease;
         }
 
         &:focus-within {
-            .inputLabel {
+            .input-label {
                 @include inside-input-label-floating;
                 color: var(--blue500);
             }
@@ -108,10 +110,8 @@ font-size: #{u.width("text", 0.75)};
             }
         }
 
-        &:has(.input:not(:placeholder-shown)),
-        &:has(.input:-webkit-autofill),
         &[data-has-input="true"] {
-            .inputLabel {
+            .input-label {
                 @include inside-input-label-floating;
             }
         }
@@ -125,41 +125,39 @@ font-size: #{u.width("text", 0.75)};
             transition: opacity 200ms ease;
         }
     }
-
-}
-
-.inputField {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-
-    &[data-has-end-adornment="true"] {
-        > .input {
-            width: 100%;
-            padding-right: #{u.width("gutter", 1.5)};;
+    .input-field {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+
+        &[data-has-end-adornment="true"] {
+            > .input {
+                width: 100%;
+                padding-right: #{u.width("gutter", 1.5)};
+            }
         }
     }
-}
 
-.inputAdornment {
-    position: absolute;
-    right: #{u.width("gutter", 0.5)};;
-    top: 50%;
-    transform: translateY(-50%);
-    margin-top: 0;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-}
+    .input-adornment {
+        position: absolute;
+        right: #{u.width("gutter", 0.5)};
+        top: 50%;
+        transform: translateY(-50%);
+        margin-top: 0;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+    }
 
-.error {
-    margin-top: #{u.width("gutter", 0.25)};;
-    font-size: #{u.width("text", 0.75)};;
-    color: var(--red600);
+    .input-error {
+        margin-top: #{u.width("gutter", 0.25)};
+        font-size: #{u.width("text", 0.75)};
+        color: var(--red600);
+    }
+    .input-view-toggle {
+        padding: 0;
+        display: inline-flex;
+        align-items: "center";
+        line-height: 1;
+    }
 }
-.inputViewToggle {
-    padding: 0;
-    display: inline-flex;
-    align-items: "center";
-    line-height: 1;
-};

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

@@ -0,0 +1,33 @@
+"use client";
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import { InputWrapper as t } from "./InputWrapper.esm.js";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react";
+//#region src/components/Input/Input.tsx
+var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, type: u = "text", error: d, endAdornment: f, style: p, className: m, ...h }) => {
+	let g = a(), _ = s || g;
+	return /* @__PURE__ */ r(t, {
+		className: m,
+		label: o,
+		labelPosition: c,
+		error: d,
+		required: l,
+		style: p,
+		children: /* @__PURE__ */ i("span", {
+			className: "input-field",
+			"data-has-end-adornment": !e(f),
+			children: [/* @__PURE__ */ r("input", {
+				id: _,
+				type: u,
+				className: n("input", u),
+				...h
+			}), !e(f) && /* @__PURE__ */ r("span", {
+				className: "input-adornment",
+				children: f
+			})]
+		})
+	});
+};
+//#endregion
+export { o as Input };

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

@@ -1,29 +1,28 @@
 "use client";
 import { Button as e } from "../Button/Button.esm.js";
-import t from "./Input.module.esm.js";
-import { Input as n } from "./Input.esm.js";
-import { jsx as r } from "react/jsx-runtime";
-import { useState as i } from "react";
-import { ImEye as a, ImEyeBlocked as o } from "react-icons/im";
+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 s = ({ visible: n, onToggle: i }) => /* @__PURE__ */ r(e, {
+var o = ({ visible: t, onToggle: r }) => /* @__PURE__ */ n(e, {
 	type: "button",
 	variant: "text",
-	onClick: i,
-	"aria-label": n ? "Hide password" : "Show password",
-	"aria-pressed": n,
-	className: t.inputViewToggle,
-	children: r(n ? a : o, { size: 16 })
-}), c = ({ type: e = "password", ...t }) => {
-	let [a, o] = i(!1), c = a ? "text" : e;
-	return /* @__PURE__ */ r(n, {
-		...t,
+	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__ */ r(s, {
+		endAdornment: /* @__PURE__ */ n(o, {
 			visible: a,
-			onToggle: () => o((e) => !e)
+			onToggle: () => s((e) => !e)
 		})
 	});
 };
 //#endregion
-export { c as InputPassword };
+export { s as InputPassword };

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { LabeledInput } from './InputWrapper';
+import { PhoneInputProps } from 'react-international-phone';
+export type InputProps = PhoneInputProps & LabeledInput & {
+    id?: string;
+};
+export declare const InputPhone: React.FC<InputProps>;

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

@@ -0,0 +1,27 @@
+"use client";
+import { InputWrapper as e } from "./InputWrapper.esm.js";
+import '../../styles/global/components/_reactPhone.css';/* empty css                                             */
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import r, { useId as i } from "react";
+import { PhoneInput as a } from "react-international-phone";
+//#region src/components/Input/InputPhone.tsx
+var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, defaultCountry: u = "us", error: d, style: f, className: p, ...m }) => {
+	let h = i(), g = s || h, _ = r.useRef(null);
+	return /* @__PURE__ */ n(e, {
+		id: g,
+		className: t("input-phone", p),
+		label: o,
+		labelPosition: c,
+		error: d,
+		required: l,
+		style: f,
+		children: /* @__PURE__ */ n(a, {
+			defaultCountry: u,
+			...m,
+			ref: _
+		})
+	});
+};
+//#endregion
+export { o as InputPhone };

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

@@ -1,22 +1,22 @@
 "use client";
 import { isEmpty as e } from "../../utilities/validations.esm.js";
-import t from "./Input.module.esm.js";
-import n from "clsx";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import './Input.css';/* empty css          */
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Input/InputWrapper.tsx
-var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p }) => /* @__PURE__ */ i("div", {
-	"data-label-position": o,
-	"data-required": s,
-	"data-has-input": !e(f) || !e(p),
-	className: n(t.wrapper, l),
-	style: u,
-	children: [e(a) ? d : /* @__PURE__ */ i("label", { children: [o !== "hidden" && /* @__PURE__ */ r("div", {
-		className: t.inputLabel,
-		children: a
-	}), d] }), !e(c) && /* @__PURE__ */ r("div", {
-		className: t.error,
-		children: c
+var i = ({ label: i, labelPosition: a = "top", required: o = !1, error: s, className: c, style: l, children: u, value: d, defaultValue: f }) => /* @__PURE__ */ r("div", {
+	"data-label-position": a,
+	"data-required": o,
+	"data-has-input": !e(d) || !e(f),
+	className: t("input-wrapper", c),
+	style: l,
+	children: [e(i) ? u : /* @__PURE__ */ r("label", { children: [a !== "hidden" && /* @__PURE__ */ n("div", {
+		className: "input-label",
+		children: i
+	}), u] }), !e(s) && /* @__PURE__ */ n("div", {
+		className: "input-error",
+		children: s
 	})]
 });
 //#endregion
-export { a as InputWrapper };
+export { i as InputWrapper };

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

@@ -1,5 +1,5 @@
 "use client";
-import { Input as e } from "./Input.esm.js";
+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, {

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

@@ -1,25 +1,24 @@
 "use client";
-import e from "./Input.module.esm.js";
-import { InputWrapper as t } from "./InputWrapper.esm.js";
-import n from "clsx";
-import { jsx as r } from "react/jsx-runtime";
-import { useId as i } from "react";
+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 a = ({ labelPosition: a = "top", id: o, label: s, error: c, required: l, className: u, style: d, ...f }) => {
-	let p = i(), m = o || p;
-	return /* @__PURE__ */ r(t, {
-		label: s,
-		className: n(e.textarea, u),
-		labelPosition: a,
-		error: c,
-		required: l,
-		style: d,
-		children: /* @__PURE__ */ r("textarea", {
-			id: m,
-			className: n(e.input),
-			...f
+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 { a as Textarea };
+export { i as Textarea };

package/src/components/index.d.ts

@@ -8,3 +8,5 @@ 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)}

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

@@ -0,0 +1,265 @@
+@use "./input";
+@use "../../utilities/functions" as u;
+
+.input-phone {
+    &[data-label-position="inside"] {
+        .input-label {
+            top: 15px;
+            left: 50px;
+        }
+    }
+
+    .react-international-phone-country-selector {
+        position: relative;
+    }
+
+    .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;
+    }
+
+    .react-international-phone-country-selector-button {
+        display: flex;
+        height: var(--react-international-phone-height, 36px);
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: 1px solid
+            var(
+                --react-international-phone-country-selector-border-color,
+                var(--react-international-phone-border-color, gainsboro)
+            );
+        margin: 0;
+        appearance: button;
+        -webkit-appearance: button;
+        background-color: var(
+            --react-international-phone-country-selector-background-color,
+            var(--react-international-phone-background-color, white)
+        );
+        cursor: pointer;
+        text-transform: none;
+        user-select: none;
+
+        &:hover {
+            background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
+        }
+
+        &--hide-dropdown {
+            cursor: auto;
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        &--disabled {
+            background-color: var(
+                --react-international-phone-disabled-country-selector-background-color,
+                var(--react-international-phone-disabled-background-color, whitesmoke)
+            );
+            cursor: auto;
+
+            &:hover {
+                background-color: var(
+                    --react-international-phone-disabled-country-selector-background-color,
+                    var(--react-international-phone-disabled-background-color, whitesmoke)
+                );
+            }
+        }
+
+        &__button-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &__flag-emoji {
+            margin: 0 4px;
+
+            &--disabled {
+                opacity: 0.75;
+            }
+        }
+
+        &__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 0.1s ease-out;
+
+            &--active {
+                transform: rotateX(180deg);
+            }
+
+            &--disabled {
+                border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
+            }
+        }
+    }
+
+    .react-international-phone-country-selector-dropdown {
+        position: absolute;
+        z-index: 1000;
+        top: var(--react-international-phone-dropdown-top, 44px);
+        left: var(--react-international-phone-dropdown-left, 0);
+        display: flex;
+        width: 300px;
+        max-height: 200px;
+        flex-direction: column;
+        padding: 4px 0;
+        margin: 0;
+        background-color: var(
+            --react-international-phone-dropdown-item-background-color,
+            var(--react-international-phone-background-color, white)
+        );
+        box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, 0.25));
+        color: var(
+            --react-international-phone-dropdown-item-text-color,
+            var(--react-international-phone-text-color, #222)
+        );
+        list-style: none;
+        overflow-y: scroll;
+
+        &__preferred-list-divider {
+            height: 1px;
+            border: none;
+            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)
+            );
+        }
+
+        &__list-item {
+            display: flex;
+            min-height: var(--react-international-phone-dropdown-item-height, 28px);
+            box-sizing: border-box;
+            align-items: center;
+            padding: 2px 8px;
+
+            &:hover {
+                background-color: var(
+                    --react-international-phone-selected-dropdown-item-background-color,
+                    var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
+                );
+                cursor: pointer;
+            }
+
+            &--selected,
+            &--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)
+                );
+
+                .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)
+                    );
+                }
+            }
+
+            &--focused {
+                background-color: var(
+                    --react-international-phone-selected-dropdown-item-background-color,
+                    var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
+                );
+            }
+
+            &-flag-emoji {
+                margin-right: 8px;
+            }
+
+            &-country-name {
+                overflow: hidden;
+                margin-right: 8px;
+                font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            &-dial-code {
+                color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
+                font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+            }
+        }
+    }
+
+    .react-international-phone-dial-code-preview {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 8px;
+        border: 1px solid
+            var(
+                --react-international-phone-dial-code-preview-border-color,
+                var(--react-international-phone-border-color, gainsboro)
+            );
+        margin-right: -1px;
+        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)
+        );
+
+        &--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)
+            );
+        }
+    }
+
+    .react-international-phone-input-container {
+        display: flex;
+
+        .react-international-phone-country-selector-button {
+            border-radius: var(--react-international-phone-border-radius, 4px);
+            margin-right: -1px;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        .react-international-phone-input {
+            overflow: visible;
+            height: var(--react-international-phone-height, 36px);
+            box-sizing: border-box;
+            padding: 0 8px;
+            border: 1px solid var(--react-international-phone-border-color, gainsboro);
+            border-radius: var(--react-international-phone-border-radius, 4px);
+            margin: 0;
+            background-color: var(--react-international-phone-background-color, white);
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            color: var(--react-international-phone-text-color, #222);
+            font-family: inherit;
+            font-size: var(--react-international-phone-font-size, 13px);
+
+            &:focus {
+                outline: none;
+            }
+
+            &--disabled {
+                background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
+                color: var(--react-international-phone-disabled-text-color, #666);
+            }
+        }
+    }
+}

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

@@ -1,34 +0,0 @@
-"use client";
-import { isEmpty as e } from "../../utilities/validations.esm.js";
-import t from "./Input.module.esm.js";
-import { InputWrapper as n } from "./InputWrapper.esm.js";
-import r from "clsx";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useId as o } from "react";
-//#region src/components/Input/Input.tsx
-var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, type: d = "text", error: f, endAdornment: p, style: m, className: h, ...g }) => {
-	let _ = o(), v = c || _;
-	return /* @__PURE__ */ i(n, {
-		className: h,
-		label: s,
-		labelPosition: l,
-		error: f,
-		required: u,
-		style: m,
-		children: /* @__PURE__ */ a("span", {
-			className: t.inputField,
-			"data-has-end-adornment": !e(p),
-			children: [/* @__PURE__ */ i("input", {
-				id: v,
-				type: d,
-				className: r(t.input, d),
-				...g
-			}), !e(p) && /* @__PURE__ */ i("span", {
-				className: t.inputAdornment,
-				children: p
-			})]
-		})
-	});
-};
-//#endregion
-export { s as Input };

package/src/components/Input/Input.module.css

@@ -1 +0,0 @@
-@layer craftsman-base{._wrapper_1xyh8_2[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}}._wrapper_1xyh8_2 label ._inputLabel_1xyh8_9{margin-bottom:calc(var(--w-gutter) * .25)}._wrapper_1xyh8_2[data-required=true] label ._inputLabel_1xyh8_9:after{content:"*";color:var(--red700)}._wrapper_1xyh8_2[data-label-position=left] label{align-items:center;display:inline-flex}._wrapper_1xyh8_2[data-label-position=left] label ._inputLabel_1xyh8_9{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}._wrapper_1xyh8_2[data-label-position=left]._textarea_1xyh8_24 label{align-items:flex-start}._wrapper_1xyh8_2[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}._wrapper_1xyh8_2[data-label-position=bottom] label ._inputLabel_1xyh8_9{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}._wrapper_1xyh8_2[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}._wrapper_1xyh8_2[data-label-position=right] label ._inputLabel_1xyh8_9{margin-left:calc(var(--w-gutter) * .25);margin-bottom:0}._wrapper_1xyh8_2[data-label-position=inside] ._inputLabel_1xyh8_9{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .25);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}._wrapper_1xyh8_2[data-label-position=inside]>label>._inputField_1xyh8_56>._input_1xyh8_9,._wrapper_1xyh8_2[data-label-position=inside]>._input_1xyh8_9{transition:border-color .2s}._wrapper_1xyh8_2[data-label-position=inside]:focus-within ._inputLabel_1xyh8_9{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}._wrapper_1xyh8_2[data-label-position=inside]:focus-within ._input_1xyh8_9{border-color:var(--blue500)}._wrapper_1xyh8_2[data-label-position=inside]:focus-within ._input_1xyh8_9::placeholder{opacity:1}._wrapper_1xyh8_2[data-label-position=inside][data-has-input=true] ._inputLabel_1xyh8_9{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}._wrapper_1xyh8_2[data-label-position=inside]:has(._input_1xyh8_9:not(:placeholder-shown)) ._inputLabel_1xyh8_9{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}._wrapper_1xyh8_2[data-label-position=inside]:has(._input_1xyh8_9:-webkit-autofill) ._inputLabel_1xyh8_9{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}._wrapper_1xyh8_2[data-label-position=inside] ._input_1xyh8_9[type=tel]{width:100%}._wrapper_1xyh8_2[data-label-position=inside] ._input_1xyh8_9::placeholder{opacity:0;transition:opacity .2s}._inputField_1xyh8_56{align-items:center;display:inline-flex;position:relative}._inputField_1xyh8_56[data-has-end-adornment=true]>._input_1xyh8_9{width:100%;padding-right:calc(var(--w-gutter) * 1.5)}._inputAdornment_1xyh8_95{right:calc(var(--w-gutter) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}._error_1xyh8_106{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}._inputViewToggle_1xyh8_112{align-items:"center";padding:0;line-height:1;display:inline-flex}

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

@@ -1,13 +0,0 @@
-import './Input.module.css';//#region src/components/Input/Input.module.scss
-var e = "_wrapper_1xyh8_2", t = "_inputLabel_1xyh8_9", n = "_textarea_1xyh8_24", r = "_inputField_1xyh8_56", i = "_input_1xyh8_9", a = "_inputAdornment_1xyh8_95", o = "_error_1xyh8_106", s = "_inputViewToggle_1xyh8_112", c = {
-	wrapper: e,
-	inputLabel: t,
-	textarea: n,
-	inputField: r,
-	input: i,
-	inputAdornment: a,
-	error: o,
-	inputViewToggle: s
-};
-//#endregion
-export { c as default, o as error, i as input, a as inputAdornment, r as inputField, t as inputLabel, s as inputViewToggle, n as textarea, e as wrapper };