@stamcat/craftsman 0.0.27-alpha.7 → 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.esm.js";
-import { Input as n } from "./src/components/Input/Input.esm.js";
+import { Button as t } from "./src/components/Button/Button.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";
@@ -8,17 +8,23 @@ import { Checkbox as o } from "./src/components/Input/Checkbox.esm.js";
 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 u = /* @__PURE__ */ e({
+var p = /* @__PURE__ */ e({
 	Button: () => t,
 	Checkbox: () => o,
+	DatePicker: () => d,
 	Input: () => n,
 	InputPassword: () => r,
+	InputPhone: () => f,
 	Loader: () => i,
 	Modal: () => l,
 	RadioButton: () => a,
+	Select: () => u,
 	Text: () => c,
 	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, c as Text, s as Textarea, u 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.7",
+  "version": "0.0.27-alpha.9",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -95,6 +95,18 @@
     "./Modal": {
       "types": "./src/components/Modal.d.ts",
       "default": "./src/components/Modal.esm.js"
+    },
+    "./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/{Button.d.ts → Button/Button.d.ts}

@@ -1,4 +1,4 @@
-import { ButtonType } from '../styles';
+import { ButtonType } from '../../styles';
 export type ButtonProps = React.ComponentProps<"button"> & {
     variant?: ButtonType;
     size?: number;

package/src/components/{Button.esm.js → Button/Button.esm.js}

@@ -1,10 +1,10 @@
 "use client";
-import { isEmpty as e } from "../utilities/validations.esm.js";
-import { width as t } from "../styles/utilities/layout.esm.js";
-import "../../Styles.esm.js";
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import { width as t } from "../../styles/utilities/layout.esm.js";
+import "../../../Styles.esm.js";
 import n from "clsx";
 import { Fragment as r, jsx as i } from "react/jsx-runtime";
-//#region src/components/Button.tsx
+//#region src/components/Button/Button.tsx
 var a = (a) => {
 	let { type: o = "button", variant: s = "default", size: c, styles: l, className: u, style: d, ...f } = a, p = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, m = e(l) ? void 0 : l, h = p ? {
 		borderRadius: `calc(var(--btn-border-radius) * ${p})`,

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.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 { Button as e } from "../Button/Button.esm.js";
+import { Input as t } from "./Input2.esm.js";
+import { jsx as n } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { ImEye as i, ImEyeBlocked as a } from "react-icons/im";
 //#region src/components/Input/InputPassword.tsx
-var 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.d.ts

@@ -4,8 +4,7 @@ export type LabeledInput = {
     labelPosition?: LabelPosition;
     error?: string | boolean | React.ReactNode;
     required?: boolean;
-    styles?: React.CSSProperties;
     endAdornment?: React.ReactNode;
 };
-export type InputWrapperProps = React.ComponentProps<"input" | "textarea"> & LabeledInput;
+export type InputWrapperProps = React.ComponentProps<"input" | "textarea" | "select"> & LabeledInput;
 export declare const InputWrapper: React.FC<InputWrapperProps>;

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

@@ -1,28 +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, styles: l, className: u, style: d, children: f, value: p, defaultValue: m }) => {
-	let h = !e(p) || !e(m), g = e(l) ? void 0 : l;
-	return /* @__PURE__ */ i("div", {
-		"data-label-position": o,
-		"data-required": s,
-		"data-has-input": h,
-		className: n(t.wrapper, u),
-		style: {
-			...g,
-			...d
-		},
-		children: [e(a) ? f : /* @__PURE__ */ i("label", { children: [o !== "hidden" && /* @__PURE__ */ r("div", {
-			className: t.inputLabel,
-			children: a
-		}), f] }), !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, styles: 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,
-		styles: 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/Loader/Loader.d.ts

@@ -3,6 +3,5 @@ export type LoaderProps = React.ComponentProps<"div"> & {
     type: LoaderStyle;
     color?: string;
     width?: number;
-    styles?: React.CSSProperties;
 };
 export declare const Loader: React.FC<LoaderProps>;

package/src/components/Loader/Loader.esm.js

@@ -1,21 +1,19 @@
 "use client";
-import { isEmpty as e } from "../../utilities/validations.esm.js";
-import { loaders as t } from "./types.esm.js";
-import n from "./loaders.module.esm.js";
-import r from "clsx";
-import { jsx as i } from "react/jsx-runtime";
+import { loaders as e } from "./types.esm.js";
+import t from "./loaders.module.esm.js";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/Loader/Loader.tsx
-var a = (a) => {
-	let { type: o, color: s = "black", width: c, styles: l, className: u, style: d, ...f } = a, p = e(l) ? void 0 : l, m = t[o](s, c);
-	return /* @__PURE__ */ i("div", {
-		className: r(n[o], u),
+var i = (i) => {
+	let { type: a, color: o = "black", width: s, className: c, style: l, ...u } = i, d = e[a](o, s);
+	return /* @__PURE__ */ r("div", {
+		className: n(t[a], c),
 		style: {
-			...m,
-			...p,
-			...d
+			...d,
+			...l
 		},
-		...f
+		...u
 	});
 };
 //#endregion
-export { a as Loader };
+export { i as Loader };

package/src/components/Modal/Modal.d.ts

@@ -8,7 +8,6 @@ export interface ModalProps extends React.ComponentPropsWithoutRef<"div"> {
     backgroundDismiss?: boolean;
     hideDismissIcon?: boolean;
     footer?: React.ReactNode;
-    styles?: React.CSSProperties;
 }
 type ModalState = {
     isClosing: boolean;