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

package/Components.esm.js

@@ -1,22 +1,26 @@
 import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
-import { Button as t } from "./src/components/Button.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 { InputPassword as r } from "./src/components/Input/InputPassword.esm.js";
-import { Loader as i } from "./src/components/Loader.esm.js";
+import { Loader as i } from "./src/components/Loader/Loader.esm.js";
 import { RadioButton as a } from "./src/components/Input/RadioButton.esm.js";
 import { Checkbox as o } from "./src/components/Input/Checkbox.esm.js";
 import { Textarea as s } from "./src/components/Input/Textarea.esm.js";
-import { Modal as c } from "./src/components/Modal.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";
 //#region src/components/index.ts
-var l = /* @__PURE__ */ e({
+var d = /* @__PURE__ */ e({
 	Button: () => t,
 	Checkbox: () => o,
 	Input: () => n,
 	InputPassword: () => r,
 	Loader: () => i,
-	Modal: () => c,
+	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, c as Modal, a as RadioButton, s as Textarea, l as components_exports };
+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 };

package/Styles.esm.js

@@ -1,7 +1,7 @@
 import { defaultColors as e, defaultWidths as t } from "./src/styles/utilities/constants.esm.js";
 import { color as n, colors as r, hexToRgba as i } from "./src/styles/utilities/color.esm.js";
-import { BaseWidthSchema as a, BreakpointSchema as o, ButtonType as s, LayoutWidthsSchema as c, MaxScreenWidthSchema as l, ScreenWidthSchema as u, zLabelPosition as d, zTextInputExclusions as f, zTextInputType as p, zTextInputTypes as m } from "./src/utilities/types.esm.js";
-import { breakpoint as h, media as g, width as _, widths as v } from "./src/styles/utilities/layout.esm.js";
-import { themeBuilder as y } from "./src/styles/theme/theme.esm.js";
-import { ThemeProvider as b } from "./src/styles/components/ThemeProvider.esm.js";
-export { a as BaseWidthSchema, o as BreakpointSchema, s as ButtonType, c as LayoutWidthsSchema, l as MaxScreenWidthSchema, u as ScreenWidthSchema, b as ThemeProvider, h as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, i as hexToRgba, g as media, y as themeBuilder, _ as width, v as widths, d as zLabelPosition, f as zTextInputExclusions, p as zTextInputType, m as zTextInputTypes };
+import { BaseWidthSchema as a, BreakpointSchema as o, ButtonType as s, LayoutWidthsSchema as c, MaxScreenWidthSchema as l, ScreenWidthSchema as u, TextSize as d, TextTags as f, TextType as p, zLabelPosition as m, zTextInputExclusions as h, zTextInputType as g, zTextInputTypes as _ } from "./src/utilities/types.esm.js";
+import { breakpoint as v, media as y, width as b, widths as x } from "./src/styles/utilities/layout.esm.js";
+import { themeBuilder as S } from "./src/styles/theme/theme.esm.js";
+import { ThemeProvider as C } from "./src/styles/components/ThemeProvider.esm.js";
+export { a as BaseWidthSchema, o as BreakpointSchema, s as ButtonType, c as LayoutWidthsSchema, l as MaxScreenWidthSchema, u as ScreenWidthSchema, d as TextSize, f as TextTags, p as TextType, C as ThemeProvider, v as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, i as hexToRgba, y as media, S as themeBuilder, b as width, x as widths, m as zLabelPosition, h as zTextInputExclusions, g as zTextInputType, _ as zTextInputTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.5",
+  "version": "0.0.27-alpha.8",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -88,9 +88,17 @@
       "types": "./src/components/Textarea.d.ts",
       "default": "./src/components/Textarea.esm.js"
     },
+    "./Text": {
+      "types": "./src/components/Text.d.ts",
+      "default": "./src/components/Text.esm.js"
+    },
     "./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"
     }
   }
 }

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/Input.esm.js

@@ -6,25 +6,26 @@ 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, styles: p, endAdornment: m, ...h }) => {
-	let g = o(), _ = c || g;
+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,
-		styles: p,
+		style: m,
 		children: /* @__PURE__ */ a("span", {
 			className: t.inputField,
-			"data-has-end-adornment": !e(m),
+			"data-has-end-adornment": !e(p),
 			children: [/* @__PURE__ */ i("input", {
-				id: _,
+				id: v,
 				type: d,
 				className: r(t.input, d),
-				...h
-			}), !e(m) && /* @__PURE__ */ i("span", {
+				...g
+			}), !e(p) && /* @__PURE__ */ i("span", {
 				className: t.inputAdornment,
-				children: m
+				children: p
 			})]
 		})
 	});

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

@@ -1 +1 @@
-@layer craftsman-base{._wrapper_txz19_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_txz19_2 label ._inputLabel_txz19_9{margin-bottom:calc(var(--w-gutter,16px) * .25)}._wrapper_txz19_2[data-required=true] label ._inputLabel_txz19_9:after{content:"*";color:var(--red700)}._wrapper_txz19_2[data-label-position=left] label{align-items:center;display:inline-flex}._wrapper_txz19_2[data-label-position=left] label ._inputLabel_txz19_9{width:fit-content;margin-right:calc(var(--w-gutter,16px) * .75)}._wrapper_txz19_2[data-label-position=left]._textarea_txz19_24 label{align-items:flex-start}._wrapper_txz19_2[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}._wrapper_txz19_2[data-label-position=bottom] label ._inputLabel_txz19_9{margin-bottom:0;margin-top:calc(var(--w-gutter,16px) * .25)}._wrapper_txz19_2[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}._wrapper_txz19_2[data-label-position=right] label ._inputLabel_txz19_9{margin-left:calc(var(--w-gutter,16px) * .25);margin-bottom:0}._wrapper_txz19_2[data-label-position=inside] ._inputLabel_txz19_9{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter,16px) * .25);left:calc(var(--w-gutter,16px) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}._wrapper_txz19_2[data-label-position=inside]>label>._inputField_txz19_56>._input_txz19_9,._wrapper_txz19_2[data-label-position=inside]>._input_txz19_9{transition:border-color .2s}._wrapper_txz19_2[data-label-position=inside]:focus-within ._inputLabel_txz19_9{top:-.5rem;left:calc(var(--w-gutter,16px) * .125);font-size:calc(var(--w-text,14px) * .75);color:var(--blue500)}._wrapper_txz19_2[data-label-position=inside]:focus-within ._input_txz19_9{border-color:var(--blue500)}._wrapper_txz19_2[data-label-position=inside]:focus-within ._input_txz19_9::placeholder{opacity:1}._wrapper_txz19_2[data-label-position=inside][data-has-input=true] ._inputLabel_txz19_9{top:-.5rem;left:calc(var(--w-gutter,16px) * .125);font-size:calc(var(--w-text,14px) * .75)}._wrapper_txz19_2[data-label-position=inside]:has(._input_txz19_9:not(:placeholder-shown)) ._inputLabel_txz19_9{top:-.5rem;left:calc(var(--w-gutter,16px) * .125);font-size:calc(var(--w-text,14px) * .75)}._wrapper_txz19_2[data-label-position=inside]:has(._input_txz19_9:-webkit-autofill) ._inputLabel_txz19_9{top:-.5rem;left:calc(var(--w-gutter,16px) * .125);font-size:calc(var(--w-text,14px) * .75)}._wrapper_txz19_2[data-label-position=inside] ._input_txz19_9[type=tel]{width:100%}._wrapper_txz19_2[data-label-position=inside] ._input_txz19_9::placeholder{opacity:0;transition:opacity .2s}._inputField_txz19_56{align-items:center;display:inline-flex;position:relative}._inputField_txz19_56[data-has-end-adornment=true]>._input_txz19_9{width:100%;padding-right:calc(var(--w-gutter,16px) * 1.5)}._inputAdornment_txz19_95{right:calc(var(--w-gutter,16px) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}._error_txz19_106{margin-top:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75);color:var(--red600)}._inputViewToggle_txz19_112{align-items:"center";padding:0;line-height:1;display:inline-flex}
+@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,5 +1,5 @@
 import './Input.module.css';//#region src/components/Input/Input.module.scss
-var e = "_wrapper_txz19_2", t = "_inputLabel_txz19_9", n = "_textarea_txz19_24", r = "_inputField_txz19_56", i = "_input_txz19_9", a = "_inputAdornment_txz19_95", o = "_error_txz19_106", s = "_inputViewToggle_txz19_112", c = {
+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,

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

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

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

@@ -4,25 +4,19 @@ import t from "./Input.module.esm.js";
 import n from "clsx";
 import { jsx as r, jsxs as i } 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 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
+	})]
+});
 //#endregion
 export { a as InputWrapper };

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

@@ -5,7 +5,7 @@ import n from "clsx";
 import { jsx as r } from "react/jsx-runtime";
 import { useId as i } 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 }) => {
+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,
@@ -13,7 +13,7 @@ var a = ({ labelPosition: a = "top", id: o, label: s, error: c, required: l, cla
 		labelPosition: a,
 		error: c,
 		required: l,
-		styles: d,
+		style: d,
 		children: /* @__PURE__ */ r("textarea", {
 			id: m,
 			className: n(e.input),

package/src/components/{Loader.d.ts → Loader/Loader.d.ts}

@@ -1,8 +1,7 @@
-import { LoaderStyle } from '../styles/global/components/loaders';
+import { LoaderStyle } from './types';
 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

@@ -0,0 +1,19 @@
+"use client";
+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 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: {
+			...d,
+			...l
+		},
+		...u
+	});
+};
+//#endregion
+export { i as Loader };

package/src/{styles/global/components → components/Loader}/loaders.module.esm.js

@@ -1,4 +1,4 @@
-import './loaders.module.css';//#region src/styles/global/components/loaders.module.scss
+import './loaders.module.css';//#region src/components/Loader/loaders.module.scss
 var e = "_dots_mugu5_2", t = "_l5_mugu5_1", n = "_dots-trace_mugu5_41", r = "_l1_mugu5_1", i = "_dots-orbit_mugu5_53", a = "_l22-0_mugu5_1", o = "_l22_mugu5_1", s = "_dashes_mugu5_83", c = "_spinner_mugu5_108", l = "_l2_mugu5_1", u = "_swirl_mugu5_121", d = "_l3_mugu5_1", f = "_ball_mugu5_141", p = "_l9_mugu5_1", m = "_boxy_mugu5_153", h = "_l7_mugu5_1", g = {
 	dots: e,
 	l5: t,

package/src/components/{Modal.d.ts → 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;

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
-@use "../styles/global/components/modal";
-@use "../styles/utilities/functions" as u;
+@use "../../styles/global/components/modal";
+@use "../../styles/utilities/functions" as u;
 
 @keyframes fadeIn {
   from {

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/Text/Text.css

@@ -0,0 +1 @@
+@layer craftsman-base{h1{font-size:calc(var(--w-text) * 3.125);line-height:1.2}h2{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}h3{font-size:calc(var(--w-text) * 1.625);line-height:1.1}h4{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}h5{font-size:var(--w-text);line-height:1.2}h6{font-size:calc(var(--w-text) * .875);font-weight:600;line-height:1.2}p{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}small{font-size:calc(var(--w-text) * .75)}@media (width<=660px){h4{font-size:var(--w-text,14px)}p{font-size:calc(var(--w-text,14px) * .875)}}.text.display{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.display.xlarge{font-size:calc(var(--w-text) * 3.125);line-height:1.2}.text.display.large{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}.text.display.small{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.heading.xlarge{font-size:calc(var(--w-text) * 3.125);line-height:1.2}.text.heading.large,.text.xlarge{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}.text.heading.medium{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.heading.small{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading.xsmall{font-size:var(--w-text);line-height:1.2}.text.paragraph{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.xlarge,.text.large{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.paragraph.large{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.paragraph.medium,.text.medium{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.small,.text.small{font-size:calc(var(--w-text) * .75)}.text.paragraph.xsmall,.text.xsmall{font-size:calc(var(--w-text) * .5)}.text.caption{font-size:calc(var(--w-text) * .75)}.text.center{text-align:center}.text.left{text-align:left}.text.right{text-align:right}}

package/src/components/Text/Text.d.ts

@@ -0,0 +1,10 @@
+import { TextSize } from 'storybook/theming';
+import { TextTags, TextType } from '../../utilities/types';
+export type TextProps = React.HTMLAttributes<HTMLElement> & {
+    as?: TextTags;
+    richText?: boolean;
+    type?: TextType;
+    size?: TextSize;
+    alignment?: "center" | "left" | "right";
+};
+export declare const Text: React.FC<TextProps>;

package/src/components/Text/Text.scss

@@ -0,0 +1,80 @@
+@use "../../styles/utilities/functions" as u;
+@use "../../styles/global/components/typography" as t;
+@layer craftsman-base {
+    .text {
+        // --- display ---
+        &.display {
+            @include t.h3;
+        }
+        &.display.xlarge {
+            @include t.h1;
+        }
+        &.display.large {
+            @include t.h2;
+        }
+        &.display.small {
+            @include t.h4;
+        }
+
+        // --- heading ---
+        &.heading {
+            @include t.h3;
+        }
+        &.heading.xlarge {
+            @include t.h1;
+        }
+        &.heading.large,
+        &.xlarge {
+            @include t.h2;
+        }
+        &.heading.medium {
+            @include t.h3;
+        }
+        &.heading.small {
+            @include t.h4;
+        }
+        &.heading.xsmall {
+            @include t.h5;
+        }
+
+        // --- paragraph ---
+        &.paragraph {
+            @include t.p;
+        }
+        &.paragraph.xlarge,
+        &.large {
+            @include t.h3;
+        }
+        &.paragraph.large {
+            @include t.h4;
+        }
+        &.paragraph.medium,
+        &.medium {
+            @include t.p;
+        }
+        &.paragraph.small,
+        &.small {
+            @include t.small;
+        }
+        &.paragraph.xsmall,
+        &.xsmall {
+            @include t.xsmall;
+        }
+
+        // --- caption ---
+        &.caption {
+            @include t.small;
+        }
+
+        // --- alignment ---
+        &.center {
+            text-align: center;
+        }
+        &.left {
+            text-align: left;
+        }
+        &.right {
+            text-align: right;
+        }
+    }
+}

package/src/components/Text/Text2.esm.js

@@ -0,0 +1,23 @@
+import './Text.css';/* empty css         */
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+import n from "dompurify";
+//#region src/components/Text/Text.tsx
+var r = ({ as: r = "div", children: i, type: a, size: o, className: s, alignment: c, richText: l, ...u }) => {
+	let d = e(a && a, o && o, c && c, "text", s);
+	if (l) {
+		let e = typeof i == "string" ? n.sanitize(i, { ADD_ATTR: ["target"] }) : i;
+		return /* @__PURE__ */ t("div", {
+			...u,
+			className: d,
+			dangerouslySetInnerHTML: { __html: e || "" }
+		});
+	}
+	return /* @__PURE__ */ t(r, {
+		...u,
+		className: d,
+		children: i
+	});
+};
+//#endregion
+export { r as Text };

package/src/components/index.d.ts

@@ -1,8 +1,10 @@
-export { Button } from './Button';
+export { Button } from './Button/Button';
 export { Input } from './Input/Input';
 export { InputPassword } from './Input/InputPassword';
-export { Loader } from './Loader';
+export { Loader } from './Loader/Loader';
 export { RadioButton } from './Input/RadioButton';
 export { Checkbox } from './Input/Checkbox';
 export { Textarea } from './Input/Textarea';
-export { Modal } from './Modal';
+export { Text } from './Text/Text';
+export { Modal } from './Modal/Modal';
+export { Select } from './Select/Select';

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

@@ -0,0 +1,56 @@
+@use "../../utilities/functions" as u;
+@layer craftsman-base {
+    select,
+    ::picker(select) {
+        appearance: base-select;
+        background: #{u.color("white")};
+        color: #{u.color("text")};
+        border: 1px solid #{u.color("gray200")};
+        border-radius: 6px;
+    }
+    select {
+        padding: 10px 40px 10px 14px;
+        position: relative;
+        &:hover,
+        &:focus {
+            outline: none;
+            border-color: #{u.color("gray200")};
+        }
+        &:focus-visible {
+            outline: none;
+        }
+        &:-moz-focusring {
+            color: transparent;
+            text-shadow: 0 0 0 #{u.color("text")};
+        }
+        &::picker-icon {
+            color: #999999;
+            transition: 0.2s rotate;
+            content: "";
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-style: solid;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
+            margin: 0px 2px 0 12px;
+            position: absolute;
+            right: 16px;
+            top: 12px;
+        }
+        &:open::picker-icon {
+            margin-top: 6px;
+            rotate: 180deg;
+        }
+        option {
+            padding: #{u.width("gutter", 0.5)};
+            &:hover,
+            &:focus {
+                background: #{u.color("gray100")};
+            }
+            &::checkmark {
+                content: "";
+            }
+        }
+    }
+}

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

@@ -1,62 +1,93 @@
 @use "../../utilities/functions" as u;
 
-@layer craftsman-base {
-  %body-typography {
+@mixin body-typography {
     font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
     color: var(--text);
     line-height: 1.5;
     font-weight: 400;
     font-size: var(--w-text, 14px);
-  }
-
-  // TODO: These h* declarations need to be moved somewhere not-terrible
-  :where(h1) {
-      font-size: calc(var(--w-text, 14px) * 3.125);
-      line-height: 1.2;
-  }
-
-  :where(h2) {
-      font-size: calc(var(--w-text, 14px) * 2.625);
-      font-weight: 625;
-      line-height: 1.1;
-  }
-
-  :where(h3) {
-      font-size: calc(var(--w-text, 14px) * 1.625);
-      line-height: 1.1;
-  }
-
-  :where(h4) {
-      font-size: calc(var(--w-text, 14px) * 1.25);
-      line-height: 1.1;
-      margin: calc(var(--w-gutter, 16px) * 0.5) 0;
-  }
-
-  :where(h5) {
-      font-size: var(--w-text, 14px);
-      line-height: 1.2;
-  }
-
-  :where(h6) {
-      font-size: calc(var(--w-text, 14px) * 0.875);
-      line-height: 1.2;
-      font-weight: 600;
-  }
-
-  :where(p) {
-      font-style: normal;
-      font-size: var(--w-text, 14px);
-      line-height: 1.5;
-      margin: 0;
-  }
-
-  @include u.breakpoint(mobileMax) {
-      :where(h4) {
-      font-size: var(--w-text, 14px);
-      }
-
-      :where(p) {
-      font-size: calc(var(--w-text, 14px) * 0.875);
-      }
-  }
+}
+
+@mixin h1 {
+    font-size: #{u.width(text, 3.125)};
+    line-height: 1.2;
+}
+@mixin h2 {
+    font-size: #{u.width(text, 2.625)};
+    font-weight: 625;
+    line-height: 1.1;
+}
+@mixin h3 {
+    font-size: #{u.width(text, 1.625)};
+    line-height: 1.1;
+}
+@mixin h4 {
+    font-size: #{u.width(text, 1.25)};
+    line-height: 1.1;
+    margin: #{u.width(gutter, 0.5)} 0;
+}
+@mixin h5 {
+    font-size: var(--w-text);
+    line-height: 1.2;
+}
+@mixin h6 {
+    font-size: #{u.width(text, 0.875)};
+    line-height: 1.2;
+    font-weight: 600;
+}
+@mixin p {
+    font-style: normal;
+    font-size: var(--w-text);
+    line-height: 1.5;
+    margin: 0;
+}
+@mixin small {
+    font-size: #{u.width(text, 0.75)};
+}
+@mixin xsmall {
+    font-size: #{u.width(text, 0.5)};
+}
+
+@layer craftsman-base {
+    // TODO: These h* declarations need to be moved somewhere not-terrible
+    h1 {
+        @include h1;
+    }
+
+    h2 {
+        @include h2;
+    }
+
+    h3 {
+        @include h3;
+    }
+
+    h4 {
+        @include h4;
+    }
+
+    h5 {
+        @include h5;
+    }
+
+    h6 {
+        @include h6;
+    }
+
+    p {
+        @include p;
+    }
+    small {
+        @include small;
+    }
+
+    @include u.breakpoint(mobileMax) {
+        h4 {
+            font-size: var(--w-text, 14px);
+        }
+
+        p {
+            font-size: calc(var(--w-text, 14px) * 0.875);
+        }
+    }
 }

package/src/styles/global/globalStyles.scss

@@ -1,82 +1,83 @@
 @use "../config";
-@use "./components/typography";
+@use "./components/typography" as t;
 @use "./components/code";
 @use "./components/checkbox";
 @use "./components/radioButton";
 @use "./components/button";
 @use "./components/input";
-
+@use "./components/select";
 @layer craftsman-base, craftsman-theme;
 
 @layer craftsman-base {
-:root {
-    color-scheme: light dark;
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
+    :root {
+        color-scheme: light dark;
+        font-synthesis: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
 
-::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-}
+    ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+    }
 
-::-webkit-scrollbar-track {
-    background: #ddd;
-}
+    ::-webkit-scrollbar-track {
+        background: #ddd;
+    }
 
-::-webkit-scrollbar-thumb {
-    background: #000;
-    border-radius: 6px;
-}
+    ::-webkit-scrollbar-thumb {
+        background: #000;
+        border-radius: 6px;
+    }
 
-::-webkit-scrollbar-thumb:hover {
-    background: #555;
-}
-body, ul {
-    margin: 0;
-    padding: 0;
-}
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+    body,
+    ul {
+        margin: 0;
+        padding: 0;
+    }
 
-body {
-    @extend %body-typography;
-    background-color: #fff;
-    -webkit-overflow-scrolling: touch;
-    overscroll-behavior: contain;
-}
+    body {
+        @include t.body-typography;
+        background-color: #fff;
+        -webkit-overflow-scrolling: touch;
+        overscroll-behavior: contain;
+    }
 
-fieldset {
-    padding: 0;
-    border: 0;
-}
+    fieldset {
+        padding: 0;
+        border: 0;
+    }
 
-code {
-    @extend %code;
-}
+    code {
+        @extend %code;
+    }
 
-button {
-    @extend %button-styles;
-}
+    button {
+        @extend %button-styles;
+    }
 
-input {
-    &:not([type="radio"]):not([type="checkbox"]) {
-        @extend %input-base;
+    input {
+        &:not([type="radio"]):not([type="checkbox"]) {
+            @extend %input-base;
+        }
+        &[type="checkbox"] {
+            @extend %checkbox;
+        }
+
+        &[type="radio"] {
+            @extend %radio;
+        }
     }
-    &[type="checkbox"] {
-        @extend %checkbox;
+    textarea {
+        @extend %input-base;
     }
 
-    &[type="radio"] {
-        @extend %radio;
+    a {
+        @extend %text-link;
     }
-}
-textarea {
-    @extend %input-base;
-}
-
-a {
-    @extend %text-link;
-}
-
+    
 }

package/src/styles/theme/components.esm.js

@@ -2,7 +2,6 @@ import { htmlTagNames as e } from "./constants.esm.js";
 import { components_exports as t } from "../../../Components.esm.js";
 //#region src/styles/theme/components.ts
 var n = {
-	button: "button",
 	input: "input:not([type='radio']):not([type='checkbox'])",
 	checkbox: "input[type='checkbox']",
 	radioButton: "input[type='radio']"

package/src/styles/utilities/_functions.scss

@@ -26,9 +26,9 @@ $width-defaults: (
 	@if not map.has-key($width-defaults, $name) {
 		@error "Unknown width key `#{$name}`.";
 	}
-
-	$fallback: map.get($width-defaults, $name);
-	@return string.unquote("var(--w-#{$name}, #{$fallback}px)");
+	@return string.unquote("var(--w-#{$name})");
+    // $fallback: map.get($width-defaults, $name);
+	// @return string.unquote("var(--w-#{$name}, #{$fallback}px)");
 }
 
 @function width($name, $multiplier: 1, $px: true) {

package/src/utilities/types.d.ts

@@ -89,3 +89,30 @@ export declare const ButtonType: z.ZodEnum<{
     default: "default";
 }>;
 export type ButtonType = z.infer<typeof ButtonType>;
+export declare const TextTags: z.ZodEnum<{
+    h1: "h1";
+    h2: "h2";
+    h3: "h3";
+    h4: "h4";
+    h5: "h5";
+    p: "p";
+    span: "span";
+    div: "div";
+}>;
+export type TextTags = z.infer<typeof TextTags>;
+export declare const TextType: z.ZodEnum<{
+    display: "display";
+    heading: "heading";
+    paragraph: "paragraph";
+    caption: "caption";
+    "small-title": "small-title";
+}>;
+export type TextType = z.infer<typeof TextType>;
+export declare const TextSize: z.ZodEnum<{
+    xlarge: "xlarge";
+    large: "large";
+    medium: "medium";
+    small: "small";
+    xsmall: "xsmall";
+}>;
+export type TextSize = z.infer<typeof TextSize>;

package/src/utilities/types.esm.js

@@ -53,6 +53,27 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	"primary",
 	"default",
 	"text"
+]), d = e.enum([
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"p",
+	"span",
+	"div"
+]), f = e.enum([
+	"display",
+	"heading",
+	"paragraph",
+	"caption",
+	"small-title"
+]), p = e.enum([
+	"xlarge",
+	"large",
+	"medium",
+	"small",
+	"xsmall"
 ]);
 //#endregion
-export { t as BaseWidthSchema, i as BreakpointSchema, u as ButtonType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema, l as zLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };
+export { t as BaseWidthSchema, i as BreakpointSchema, u as ButtonType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema, p as TextSize, d as TextTags, f as TextType, l as zLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };

package/src/components/Loader.esm.js

@@ -1,21 +0,0 @@
-"use client";
-import { isEmpty as e } from "../utilities/validations.esm.js";
-import { loaders as t } from "../styles/global/components/loaders.esm.js";
-import n from "../styles/global/components/loaders.module.esm.js";
-import r from "clsx";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/components/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),
-		style: {
-			...m,
-			...p,
-			...d
-		},
-		...f
-	});
-};
-//#endregion
-export { a as Loader };

package/src/components/Modal.esm.js

@@ -1,54 +0,0 @@
-"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";
-//#region src/components/Modal.tsx
-var u = class extends c.PureComponent {
-	state = { isClosing: !1 };
-	onDismiss = () => {
-		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
-			this.props.onDismiss && this.props.onDismiss(), this.setState({ isClosing: !1 });
-		}, 280));
-	};
-	onClickBackground = () => {
-		(this.props.backgroundDismiss ?? !0) === !0 && this.onDismiss();
-	};
-	render() {
-		let 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]),
-				"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, {
-						variant: "primary",
-						className: r.closeModal,
-						onClick: this.onDismiss,
-						children: /* @__PURE__ */ o(l, {
-							fill: t("white"),
-							size: 18
-						})
-					})] }),
-					/* @__PURE__ */ o("section", { children: this.props.children }),
-					this.props.footer && /* @__PURE__ */ o("footer", {
-						className: r.actionContainer,
-						children: this.props.footer
-					})
-				]
-			}), /* @__PURE__ */ o("div", {
-				className: r.background,
-				"data-is-closing": this.state.isClosing,
-				onClick: this.onClickBackground
-			})]
-		}) : /* @__PURE__ */ o(a, {});
-	}
-};
-//#endregion
-export { u as Modal };

package/src/components/Modal.module.css

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

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

@@ -1,16 +0,0 @@
-import './Modal.module.css';//#region src/components/Modal.module.scss
-var e = "_wrapper_1fsgx_1", t = "_background_1fsgx_1", n = "_fadeOut_1fsgx_1", r = "_fadeIn_1fsgx_1", i = "_content_1fsgx_62", a = "_slideOut_1fsgx_1", o = "_slideIn_1fsgx_1", s = "_panel_1fsgx_78", c = "_dialog_1fsgx_84", l = "_actionContainer_1fsgx_97", u = "_closeModal_1fsgx_105", d = {
-	wrapper: e,
-	background: t,
-	fadeOut: n,
-	fadeIn: r,
-	content: i,
-	slideOut: a,
-	slideIn: o,
-	panel: s,
-	dialog: c,
-	actionContainer: l,
-	closeModal: u
-};
-//#endregion
-export { l as actionContainer, t as background, u as closeModal, i as content, d as default, c as dialog, r as fadeIn, n as fadeOut, s as panel, o as slideIn, a as slideOut, e as wrapper };