@stamcat/craftsman 0.0.23-alpha.25 → 0.0.23-alpha.26

package/Styles.esm.js

@@ -1,8 +1,8 @@
-import { BaseWidthSchema as e, BreakpointSchema as t, LayoutWidthsSchema as n, MaxScreenWidthSchema as r, ScreenWidthSchema as i } from "./src/styles/utilities/types.esm.js";
-import { defaultColors as a, defaultWidths as o } from "./src/styles/utilities/constants.esm.js";
-import { breakpoint as s, media as c, width as l, widths as u } from "./src/styles/utilities/layout.esm.js";
-import { color as d, colors as f, hexToRgba as p } from "./src/styles/utilities/color.esm.js";
-import { CraftsmanThemeProvider as m, themeBuilder as h } from "./src/styles/theme/theme.esm.js";
-import { globalStyles as g } from "./src/styles/global/globalStyles.esm.js";
-import { ClientProvider as _ } from "./src/styles/components/ClientProvider.esm.js";
-export { e as BaseWidthSchema, t as BreakpointSchema, _ as ClientProvider, m as CraftsmanThemeProvider, n as LayoutWidthsSchema, r as MaxScreenWidthSchema, i as ScreenWidthSchema, s as breakpoint, d as color, f as colors, a as defaultColors, o as defaultWidths, g as globalStyles, p as hexToRgba, c as media, h as themeBuilder, l as width, u as widths };
+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, LayoutWidthsSchema as s, MaxScreenWidthSchema as c, ScreenWidthSchema as l, zTextInputExclusions as u } from "./src/styles/utilities/types.esm.js";
+import { breakpoint as d, media as f, width as p, widths as m } from "./src/styles/utilities/layout.esm.js";
+import { CraftsmanThemeProvider as h, themeBuilder as g } from "./src/styles/theme/theme.esm.js";
+import { globalStyles as _ } from "./src/styles/global/globalStyles.esm.js";
+import { ClientProvider as v } from "./src/styles/components/ClientProvider.esm.js";
+export { a as BaseWidthSchema, o as BreakpointSchema, v as ClientProvider, h as CraftsmanThemeProvider, s as LayoutWidthsSchema, c as MaxScreenWidthSchema, l as ScreenWidthSchema, d as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, _ as globalStyles, i as hexToRgba, f as media, g as themeBuilder, p as width, m as widths, u as zTextInputExclusions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.23-alpha.25",
+  "version": "0.0.23-alpha.26",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {

package/src/components/Button.esm.js

@@ -1,18 +1,20 @@
 import { isEmpty as e } from "../utilities/validations.esm.js";
-import { css as t } from "@emotion/react";
-import n from "@emotion/styled";
-import { Fragment as r, jsx as i } from "react/jsx-runtime";
+import { width as t } from "../styles/utilities/layout.esm.js";
+import "../../Styles.esm.js";
+import { css as n } from "@emotion/react";
+import r from "@emotion/styled";
+import { Fragment as i, jsx as a } from "react/jsx-runtime";
 //#region src/components/Button.tsx
-var a = n.button`
+var o = r.button`
     ${(e) => e.styles}
-    ${((e) => e.size && t`
+    ${((e) => e.size && n`
         border-radius: calc(var(--btn-border-radius) * ${e.size});
         padding: calc(var(--btn-pad-y) * ${e.size}) calc(var(--btn-pad-x) * ${e.size});
-        font-size: max(10px, calc(var(--w-text) * ${e.size}));
+        font-size: max(10px, calc(${t("text")} * ${e.size}));
     `)}
-`, o = (t) => {
-	let { type: n = "button", variant: o = "default", className: s, size: c, ...l } = t, u = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, d = [o === "default" ? void 0 : o, s].filter(Boolean).join(" ") || void 0;
-	return e(t.children) ? /* @__PURE__ */ i(r, {}) : /* @__PURE__ */ i(a, {
+`, s = (t) => {
+	let { type: n = "button", variant: r = "default", className: s, size: c, ...l } = t, u = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, d = [r === "default" ? void 0 : r, s].filter(Boolean).join(" ") || void 0;
+	return e(t.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a(o, {
 		type: n,
 		size: u,
 		className: d,
@@ -20,4 +22,4 @@ var a = n.button`
 	});
 };
 //#endregion
-export { o as Button };
+export { s as Button };

package/src/components/Input.d.ts

@@ -1,2 +1,12 @@
-export type InputProps = React.ComponentProps<"input">;
+import { SerializedStyles } from '@emotion/react';
+import { TextInputExclusions } from '../styles';
+export type LabelPosition = "top" | "left" | "bottom" | "right" | "inside" | "hidden";
+export type InputProps = React.ComponentProps<"input"> & {
+    label?: string | React.ReactNode;
+    labelPosition?: LabelPosition;
+    error?: string | boolean | React.ReactNode;
+    required?: boolean;
+    styles?: SerializedStyles;
+    type?: Exclude<React.HTMLInputTypeAttribute, TextInputExclusions>;
+};
 export declare const Input: React.FC<InputProps>;

package/src/components/Input.esm.js

@@ -1,5 +1,136 @@
-import { jsx as e } from "react/jsx-runtime";
+import { isEmpty as e } from "../utilities/validations.esm.js";
+import { color as t } from "../styles/utilities/color.esm.js";
+import { width as n } from "../styles/utilities/layout.esm.js";
+import "../../Styles.esm.js";
+import { css as r } from "@emotion/react";
+import i from "@emotion/styled";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Input.tsx
-var t = (t) => /* @__PURE__ */ e("input", { ...t });
+var s = r`
+    .input-label {
+        top: -0.5rem;
+        left: ${n("gutter", .25)};
+        font-size: ${n("text", .75)};
+    }
+`, c = (e) => r`
+    --react-international-phone-height: 50px;
+    --react-international-phone-border-radius: 8px;
+    --react-international-phone-border-color: #c0c0c0ff;
+    position: relative;
+
+    .input-label {
+        position: absolute;
+        background-color: white;
+        z-index: 1;
+        width: fit-content;
+        padding: 0 5px;
+        top: ${n("gutter", .25)};
+        left: ${n("gutter", .25)};
+        pointer-events: none;
+        transition: top 150ms ease, left 150ms ease, font-size 150ms ease, color 150ms ease;
+    }
+
+    > label > input,
+    > input {
+        transition: border-color 200ms ease;
+    }
+    &:focus-within {
+        ${s}
+        .input-label {
+            color: ${t("blue500")};
+        }
+        input {
+            border-color: ${t("blue500")};
+        }
+    }
+
+    &:has(input:not(:placeholder-shown)) {
+        ${s}
+    }
+
+    &:has(input:-webkit-autofill) {
+        ${s}
+    }
+
+    ${e ? s : ""}
+    input[type="tel"] {
+        width: 100%;
+    }
+
+    input::placeholder {
+        opacity: 0;
+        transition: opacity 200ms ease;
+    }
+
+    &:focus-within input::placeholder {
+        opacity: 1;
+    }
+`, l = i.div`
+    label {
+        .input-label {
+            margin-bottom: ${n("gutter", .25)};
+            ${(e) => e.required && r`
+                ::after {
+                    content: "*";
+                    color: ${t("red700")};
+                }
+            `}
+            
+        }
+    }
+    &.left label {
+        .input-label {
+            width: fit-content;
+            margin-right: ${n("gutter", .75)};
+        }
+        display: inline-flex;
+        align-items: center;
+    }
+    &.bottom label {
+        display: inline-flex;
+        flex-direction: column-reverse;
+        align-items: flex-start;
+        .input-label {
+            display: block;
+            margin-bottom: 0;
+            margin-top: ${n("gutter", .25)};
+        }
+    }
+    &.right label {
+        display: inline-flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        .input-label {
+            display: block;
+            margin-left: ${n("gutter", .75)};
+        }
+    }
+    &.inside {
+        ${(e) => c(e.hasInput)}
+    }
+    ${(e) => e.styles}
+`, u = i.div`
+    margin-top: ${n("gutter", .25)};
+    font-size: ${n("text", .75)};
+    color: ${t("red700")};
+`, d = ({ label: t, id: n, labelPosition: r = "top", required: i = !1, error: s, styles: c, ...d }) => {
+	let f = n || crypto.randomUUID(), p = !e(d.value) || !e(d.defaultValue), m = !e(s);
+	return /* @__PURE__ */ o(l, {
+		className: r,
+		required: i,
+		hasInput: p,
+		styles: c,
+		children: [e(t) ? /* @__PURE__ */ a("input", {
+			id: f,
+			...d
+		}) : /* @__PURE__ */ o("label", { children: [r !== "hidden" && /* @__PURE__ */ a("div", {
+			className: "input-label",
+			children: t
+		}), /* @__PURE__ */ a("input", {
+			id: f,
+			...d
+		})] }), m && /* @__PURE__ */ a(u, { children: s })]
+	});
+};
 //#endregion
-export { t as Input };
+export { d as Input };

package/src/components/Modal.esm.js

@@ -1,41 +1,41 @@
-import { Button as e } from "./Button.esm.js";
-import { breakpoint as t } from "../styles/utilities/layout.esm.js";
-import { color as n } from "../styles/utilities/color.esm.js";
-import { css as r, keyframes as i } from "@emotion/react";
-import a from "@emotion/styled";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "react";
-import { LuX as u } from "react-icons/lu";
+import { color as e } from "../styles/utilities/color.esm.js";
+import { breakpoint as t, width as n } from "../styles/utilities/layout.esm.js";
+import { Button as r } from "./Button.esm.js";
+import { css as i, keyframes as a } from "@emotion/react";
+import o from "@emotion/styled";
+import s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { LuX as d } from "react-icons/lu";
 //#region src/components/Modal.tsx
-var d = i`
+var f = a`
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
-`, f = i`
+`, p = a`
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
-`, p = i`
+`, m = a`
   from {
     transform: translateY(100%);
   }
   to {
     transform: translateY(0);
   }
-`, m = i`
+`, h = a`
   from {
     transform: translateY(0);
   }
   to {
     transform: translateY(100%);
   }
-`, h = a.div`
+`, g = o.div`
     position: fixed;
     width: 100%;
     height: 100%;
@@ -48,9 +48,9 @@ var d = i`
     justify-content: center;
     align-items: center;
     ${(e) => e.styles}
-`, g = a.div`
+`, _ = o.div`
     background-color: rgba(0, 0, 0, 0.5);
-    animation: ${(e) => e.isClosing ? f : d} 0.3s ease-in-out;
+    animation: ${(e) => e.isClosing ? p : f} 0.3s ease-in-out;
     animation-fill-mode: forwards;
      position: fixed;
     width: 100%;
@@ -60,60 +60,63 @@ var d = i`
     right: 0;
     bottom: 0;
     z-index: 1001;
-`, _ = r`
+`, v = i`
     width: 100%;
     height: 100%;
-`, v = r`
-    width: calc(var(--w-column) * 4);
-`, y = r`
-    width: calc(var(--w-column) * 4);
-    ${t("tablet", r`
-        width: calc(var(--w-column) * 6);
+`, y = i`
+    width: ${n("column", 4)};
+`, b = i`
+    width: ${n("column", 4)};
+    ${t("tablet", i`
+        width: ${n("column", 6)};
     `)}
-    ${t("desktop", r`
-        width: calc(var(--w-column) * 8);
+    ${t("desktop", i`
+        width: ${n("column", 8)};
     `)}
-`, b = r`
+`, x = i`
     position: fixed;
     top: 0;
     right: 0;
     height: 100%;
-    ${t("mobileOnly", _)}
-    ${t("tablet", v)}
-`, x = r`
-    border-radius: 8px;
-    ${t("mobileOnly", _)}
+    ${t("mobileOnly", v)}
     ${t("tablet", y)}
-`, S = a.div`
-    padding: calc(var(--w-gutter));
+`, S = i`
+    border-radius: 8px;
+    ${t("mobileOnly", v)}
+    ${t("tablet", b)}
+`, C = o.div`
+    padding: ${n("gutter")};
     z-index: 1002;
-    background-color: var(--white);
+    background-color: ${e("white")};
     max-height: 80vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     touch-action: pan-y;
-    animation: ${(e) => e.isClosing ? m : p} 0.3s ease-in-out;
+    animation: ${(e) => e.isClosing ? h : m} 0.3s ease-in-out;
     animation-fill-mode: forwards;
-    ${(e) => e.type === "panel" && b}
-    ${(e) => e.type === "dialog" && x}
+    ${(e) => e.type === "panel" && x}
+    ${(e) => e.type === "dialog" && S}
     header {
         display: inline-flex;
         width: 100%;
         justify-content: space-between;
-        margin-bottom: calc(var(--w-gutter) * 0.5);
+        margin-bottom: ${n("gutter", .5)};
     }
-`, C = r`
+`, w = i`
     text-decoration: none;
-    height: 36px;
-    width: 36px;
+    height: 30px;
+    width: 30px;
     border-radius: 50%;
-`, w = a.footer`
-    margin-top: calc(var(--w-gutter) * 2);
-    background-color:var(--white);
+    padding: 0;
+    display: inline-flex;
+    justify-content: center;
+`, T = o.footer`
+    margin-top: ${n("gutter", 2)};
+    background-color: ${e("white")};
     height: fit-content;
     display: flex;
-    gap: var(--w-gutter);
-`, T = class extends l.PureComponent {
+    gap: ${n("gutter")};
+`, E = class extends s.PureComponent {
 	state = { isClosing: !1 };
 	onDismiss = () => {
 		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
@@ -124,31 +127,30 @@ var d = i`
 		(this.props.backgroundDismiss || !0) === !0 && this.onDismiss();
 	};
 	render() {
-		return this.props.visible ? /* @__PURE__ */ c(h, {
+		return this.props.visible ? /* @__PURE__ */ u(g, {
 			styles: this.props.styles,
-			children: [/* @__PURE__ */ c(S, {
+			children: [/* @__PURE__ */ u(C, {
 				type: this.props.type || "dialog",
 				isClosing: this.state.isClosing,
 				children: [
-					/* @__PURE__ */ c("header", { children: [this.props.header && /* @__PURE__ */ s(o, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ s(e, {
+					/* @__PURE__ */ u("header", { children: [this.props.header && /* @__PURE__ */ l(c, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ l(r, {
 						variant: "primary",
-						styles: C,
+						styles: w,
 						onClick: this.onDismiss,
-						children: /* @__PURE__ */ s(u, {
-							fill: n("white"),
-							viewBox: "6 8 14 14",
-							size: 24
+						children: /* @__PURE__ */ l(d, {
+							fill: e("white"),
+							size: 18
 						})
 					})] }),
-					/* @__PURE__ */ s("section", { children: this.props.children }),
-					this.props.footer && /* @__PURE__ */ s(w, { children: this.props.footer })
+					/* @__PURE__ */ l("section", { children: this.props.children }),
+					this.props.footer && /* @__PURE__ */ l(T, { children: this.props.footer })
 				]
-			}), /* @__PURE__ */ s(g, {
+			}), /* @__PURE__ */ l(_, {
 				isClosing: this.state.isClosing,
 				onClick: this.onClickBackground
 			})]
-		}) : /* @__PURE__ */ s(o, {});
+		}) : /* @__PURE__ */ l(c, {});
 	}
 };
 //#endregion
-export { T as Modal };
+export { E as Modal };

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

@@ -2,13 +2,13 @@
 import { CraftsmanThemeProvider as e, themeBuilder as t } from "../theme/theme.esm.js";
 import { globalStyles as n } from "../global/globalStyles.esm.js";
 import { CacheProvider as r, Global as i } from "@emotion/react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useState as s } from "react";
+import { useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import c from "@emotion/cache";
 import { useServerInsertedHTML as l } from "next/navigation";
 //#region src/styles/components/NextJSProvider.tsx
 function u({ children: u, key: d = "app", theme: f }) {
-	let [{ cache: p, flush: m }] = s(() => {
+	let [{ cache: p, flush: m }] = a(() => {
 		let e = c({ key: d });
 		e.compat = !0;
 		let t = e.insert, n = [];
@@ -28,15 +28,15 @@ function u({ children: u, key: d = "app", theme: f }) {
 		if (e.length === 0) return null;
 		let t = "";
 		for (let n of e) t += p.inserted[n];
-		return /* @__PURE__ */ a("style", {
+		return /* @__PURE__ */ o("style", {
 			"data-emotion": `${p.key} ${e.join(" ")}`,
 			dangerouslySetInnerHTML: { __html: t }
 		});
-	}), /* @__PURE__ */ a(r, {
+	}), /* @__PURE__ */ o(r, {
 		value: p,
-		children: /* @__PURE__ */ o(e, {
+		children: /* @__PURE__ */ s(e, {
 			theme: f || {},
-			children: [/* @__PURE__ */ a(i, { styles: (e) => [n, t(e)] }), u]
+			children: [/* @__PURE__ */ o(i, { styles: (e) => [n, t(e)] }), u]
 		})
 	});
 }

package/src/styles/global/components/button.d.ts

@@ -5,4 +5,5 @@ export declare const ButtonType: z.ZodEnum<{
     default: "default";
 }>;
 export type ButtonType = z.infer<typeof ButtonType>;
+export declare const textLinkStyles: import('@emotion/utils').SerializedStyles;
 export declare const button: import('@emotion/utils').SerializedStyles;

package/src/styles/global/components/button.esm.js

@@ -1,16 +1,29 @@
-import { typography as e } from "./typography.esm.js";
-import { css as t } from "@emotion/react";
-import n from "zod";
-n.enum([
+import { color as e } from "../../utilities/color.esm.js";
+import { width as t } from "../../utilities/layout.esm.js";
+import { typography as n } from "./typography.esm.js";
+import { css as r } from "@emotion/react";
+import i from "zod";
+i.enum([
 	"primary",
 	"default",
 	"text"
 ]);
-var r = t`
-    --btn-pad-y: calc(var(--w-gutter) * 0.5);
-    --btn-pad-x: calc(var(--w-gutter) * 0.75);
-    --btn-border-radius: calc(var(--w-gutter) * 0.75);
-    ${e.body}
+var a = r`
+    padding: 0;
+    border: none;
+    background: none;
+    color: ${e("blue500")};
+    &:not(:disabled):not(.disabled):hover {
+        color: ${e("teal700")};
+        background-color: transparent;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+`, o = r`
+    --btn-pad-y: ${t("gutter", .5)};
+    --btn-pad-x: ${t("gutter", .75)};
+    --btn-border-radius: ${t("gutter", .75)};
+    ${n.body}
     border: none;
     cursor: pointer;
     display: inline-flex;
@@ -20,39 +33,32 @@ var r = t`
     transition: 0.125s;
     padding: var(--btn-pad-y) var(--btn-pad-x);
     border-radius: var(--btn-border-radius);
-    border: 1px solid var(--blue600);
-    background-color: var(--white);
+    border: 1px solid ${e("blue500")};
+    background-color: ${e("white")};
     &:not(:disabled):not(.disabled):hover {
-        background-color: var(--blue200);
+        background-color: ${e("teal200")};
     }
     &.text {
-        padding: 0;
-        border: none;
-        background: none;
-        &:not(:disabled):not(.disabled):hover {
-            color: var(--blue800);
-            background-color: transparent;
-            text-decoration: underline;
-        }
+        ${a}
     }
     &:disabled,
     &.disabled {
         cursor: not-allowed;
-        border-color: var(--gray200);
-        color: var(--gray400);
+        border-color: ${e("gray200")};
+        color: ${e("gray400")};
         &.primary {
-            border-color: var(--gray200);
-            background-color: var(--gray400);
-            color: var(--gray200);
+            border-color: ${e("gray200")};
+            background-color: ${e("gray400")};
+            color: ${e("gray200")};
         }
     }
     &.primary {
-        color: var(--white);
-        background-color: var(--blue500);
+        color: ${e("white")};
+        background-color: ${e("blue500")};
         &:not(:disabled):not(.disabled):hover {
-            background-color: var(--blue700);
+            background-color: ${e("blue700")};
         }
     }
 `;
 //#endregion
-export { r as button };
+export { o as button, a as textLinkStyles };

package/src/styles/global/components/code.esm.js

@@ -1,17 +1,19 @@
-import { css as e } from "@emotion/react";
+import { color as e } from "../../utilities/color.esm.js";
+import { width as t } from "../../utilities/layout.esm.js";
+import { css as n } from "@emotion/react";
 //#region src/styles/global/components/code.ts
-var t = e`
-    background-color: var(--gray200);
-    color: var(--gray800);
-    padding: calc(var(--w-gutter) * 0.125) calc(var(--w-gutter) * 0.25);
-    margin: calc(var(--w-gutter) * 0.125);
+var r = n`
+    background-color: ${e("gray200")};
+    color: ${e("gray800")};
+    padding: ${t("gutter", .125)} ${t("gutter", .25)};
+    margin: ${t("gutter", .125)};
     display: inline-block;
-    font-size: var(--w-text);
+    font-size: ${t("text")};
     &:has(pre) {
-        padding: var(--w-gutter);
-        border-radius: calc(var(--w-gutter) * 0.5);
-        background-color: var(--gray800);
-        color: var(--gray200);
+        padding: ${t("gutter")};
+        border-radius: ${t("gutter", .5)};
+        background-color: ${e("gray800")};
+        color: ${e("gray200")};
     }
 
     &:has(pre) pre {
@@ -19,4 +21,4 @@ var t = e`
     }
 `;
 //#endregion
-export { t as code };
+export { r as code };

package/src/styles/global/components/input.d.ts

@@ -0,0 +1 @@
+export declare const input: import('@emotion/utils').SerializedStyles;

package/src/styles/global/components/input.esm.js

@@ -0,0 +1,32 @@
+import { color as e } from "../../utilities/color.esm.js";
+import { width as t } from "../../utilities/layout.esm.js";
+import { css as n } from "@emotion/react";
+//#region src/styles/global/components/input.ts
+var r = n`
+        color: ${e("text")};
+        border-radius: 3px;
+        border: 1px solid ${e("gray400")};
+        padding: ${t("gutter", .5)};
+        background-color: ${e("white")};
+
+        &[type="number"]::-webkit-outer-spin-button,
+        &[type="number"]::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        &[type="number"] {
+            -moz-appearance: textfield;
+            appearance: textfield;
+        }
+        &:disabled, &.disabled {
+            border-color: ${e("gray200")};
+            background-color: ${e("gray100")};
+        }
+        &:focus {
+            outline: 0;
+            box-shadow: none;
+        }
+
+`;
+//#endregion
+export { r as input };

package/src/styles/global/components/loaders.d.ts

@@ -1,11 +1,11 @@
 import { SerializedStyles } from '@emotion/react';
 import { default as z } from 'zod';
 export declare const LoaderStyleSchema: z.ZodEnum<{
+    spinner: "spinner";
     dots: "dots";
     "dots-trace": "dots-trace";
     "dots-orbit": "dots-orbit";
     dashes: "dashes";
-    spinner: "spinner";
     swirl: "swirl";
     ball: "ball";
     boxy: "boxy";

package/src/styles/global/components/typography.esm.js

@@ -1,54 +1,58 @@
-import { breakpoint as e } from "../../utilities/layout.esm.js";
-import { css as t } from "@emotion/react";
+import { color as e } from "../../utilities/color.esm.js";
+import { breakpoint as t, width as n } from "../../utilities/layout.esm.js";
+import { css as r } from "@emotion/react";
 //#region src/styles/global/components/typography.ts
-var n = {
-	body: t`
+var i = {
+	body: r`
         font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-        color: var(--text);
+        color: ${e("text")};
         line-height: 1.5;
         font-weight: 400;
-        font-size: var(--w-text);
+        font-size: ${n("text")};
+        ::selection {
+            background-color: ${e("blue200")};
+        }
     `,
-	h1: t`
-        font-size: calc(var(--w-text) * 3.125);
+	h1: r`
+        font-size: ${n("text", 3.125)};
         line-height: 1.2;
     `,
-	h2: t`
-        font-size: calc(var(--w-text) * 2.625);
+	h2: r`
+        font-size: ${n("text", 2.625)};
         font-weight: 625;
         line-height: 1.1;
     `,
-	h3: t`
-        font-size: calc(var(--w-text) * 1.625);
+	h3: r`
+        font-size: ${n("text", 1.625)};
         line-height: 1.1;
     `,
-	h4: t`
-        font-size: calc(var(--w-text) * 1.25);
+	h4: r`
+        font-size: ${n("text", 1.25)};
         line-height: 1.1;
-        margin: calc(var(--w-gutter) * 0.5) 0px;
-        ${e("mobileOnly", t`
-                font-size: var(--w-text);
+        margin: ${n("gutter", .5)} 0px;
+        ${t("mobileOnly", r`
+                font-size: ${n("text")};
             `)}
     `,
-	h5: t`
-        font-size: var(--w-text);
+	h5: r`
+        font-size: ${n("text")};
         line-height: 1.2;
     `,
-	h6: t`
-        font-size: calc(var(--w-text) * 0.875);
+	h6: r`
+        font-size: ${n("text", .875)};
         line-height: 1.2;
         font-weight: 600;
     `,
-	p: t`
+	p: r`
         font-style: normal;
-        font-size: var(--w-text);
+        font-size: ${n("text")};
         line-height: 1.5;
         margin: 0;
-        ${e("mobileOnly", t`
+        ${t("mobileOnly", r`
                 line-height: 1.5;
-                font-size: calc(var(--w-text) * 0.875);
+                font-size: ${n("text", .875)};
             `)}
     `
-}, r = Object.entries(n).map(([e, n]) => t({ [e]: n }));
+}, a = Object.entries(i).map(([e, t]) => r({ [e]: t }));
 //#endregion
-export { n as typography, r as typographyStyles };
+export { i as typography, a as typographyStyles };

package/src/styles/global/globalStyles.esm.js

@@ -1,10 +1,11 @@
 import { colors as e, widths as t } from "./variables.esm.js";
 import { typographyStyles as n } from "./components/typography.esm.js";
-import { button as r } from "./components/button.esm.js";
-import { code as i } from "./components/code.esm.js";
-import { css as a } from "@emotion/react";
+import { button as r, textLinkStyles as i } from "./components/button.esm.js";
+import { code as a } from "./components/code.esm.js";
+import { input as o } from "./components/input.esm.js";
+import { css as s } from "@emotion/react";
 //#region src/styles/global/globalStyles.ts
-var o = a`
+var c = s`
     :root {
         ${t}
         ${e}
@@ -49,11 +50,17 @@ var o = a`
         border: 0px;
     }
     code {
-        ${i}
+        ${a}
     }
     button {
         ${r}
     }
+    input {
+        ${o}
+    }
+    a {
+        ${i}
+    }
     ul {
         margin: 0;
         padding: 0;
@@ -61,4 +68,4 @@ var o = a`
     ${n}
 `;
 //#endregion
-export { o as globalStyles };
+export { c as globalStyles };

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

@@ -1,12 +1,12 @@
-import { components_exports as e } from "../../../Components.esm.js";
-import { htmlTagNames as t } from "./constants.esm.js";
+import { htmlTagNames as e } from "./constants.esm.js";
+import { components_exports as t } from "../../../Components.esm.js";
 //#region src/styles/theme/components.ts
 function n(e) {
 	return e.charAt(0).toLowerCase() + e.slice(1);
 }
-function r(e) {
-	return t.has(e) ? e : `.${e}`;
+function r(t) {
+	return e.has(t) ? t : `.${t}`;
 }
-var i = Object.keys(e).map(n), a = Object.fromEntries(i.map((e) => [e, r(e)]));
+var i = Object.keys(t).map(n), a = Object.fromEntries(i.map((e) => [e, r(e)]));
 //#endregion
 export { a as componentSelectors };

package/src/styles/utilities/color.d.ts

@@ -66,50 +66,50 @@ export declare const colors: {
     green80: string;
     green50: string;
     green10: string;
-    teal990: string;
-    teal975: string;
-    teal950: string;
+    blueGreen990: string;
+    blueGreen975: string;
+    blueGreen950: string;
+    blueGreen900: string;
+    blueGreen850: string;
+    blueGreen800: string;
+    blueGreen750: string;
+    blueGreen700: string;
+    blueGreen650: string;
+    blueGreen600: string;
+    blueGreen550: string;
+    blueGreen500: string;
+    blueGreen450: string;
+    blueGreen400: string;
+    blueGreen300: string;
+    blueGreen250: string;
+    blueGreen150: string;
+    blueGreen50: string;
+    blueGreen10: string;
     teal900: string;
-    teal850: string;
     teal800: string;
-    teal750: string;
     teal700: string;
-    teal650: string;
     teal600: string;
-    teal550: string;
     teal500: string;
     teal450: string;
     teal400: string;
+    teal350: string;
     teal300: string;
     teal250: string;
+    teal200: string;
     teal150: string;
+    teal100: string;
     teal50: string;
-    teal10: string;
+    blue950: string;
     blue900: string;
     blue800: string;
     blue700: string;
     blue600: string;
     blue500: string;
-    blue450: string;
     blue400: string;
-    blue350: string;
     blue300: string;
-    blue250: string;
     blue200: string;
-    blue150: string;
     blue100: string;
     blue50: string;
-    navy950: string;
-    navy900: string;
-    navy800: string;
-    navy700: string;
-    navy600: string;
-    navy500: string;
-    navy400: string;
-    navy300: string;
-    navy200: string;
-    navy100: string;
-    navy50: string;
     violet950: string;
     violet900: string;
     violet800: string;

package/src/styles/utilities/color.esm.js

@@ -10,6 +10,6 @@ function n(e, t = 1) {
 	else throw Error("Invalid hex color format");
 	return t = Math.max(0, Math.min(1, t)), `rgba(${n}, ${r}, ${i}, ${t})`;
 }
-var r = (e, r = "hex", i = 1) => r === "rgba" ? n(t[e], i) : t[e];
+var r = (e, t = "hex", n = 1) => t === "rgba" ? `rgb(from var(--${e}) r g b / ${n})` : `var(--${e})`;
 //#endregion
 export { r as color, t as colors, n as hexToRgba };

package/src/styles/utilities/constants.d.ts

@@ -66,50 +66,50 @@ export declare const defaultColors: {
     green80: string;
     green50: string;
     green10: string;
-    teal990: string;
-    teal975: string;
-    teal950: string;
+    blueGreen990: string;
+    blueGreen975: string;
+    blueGreen950: string;
+    blueGreen900: string;
+    blueGreen850: string;
+    blueGreen800: string;
+    blueGreen750: string;
+    blueGreen700: string;
+    blueGreen650: string;
+    blueGreen600: string;
+    blueGreen550: string;
+    blueGreen500: string;
+    blueGreen450: string;
+    blueGreen400: string;
+    blueGreen300: string;
+    blueGreen250: string;
+    blueGreen150: string;
+    blueGreen50: string;
+    blueGreen10: string;
     teal900: string;
-    teal850: string;
     teal800: string;
-    teal750: string;
     teal700: string;
-    teal650: string;
     teal600: string;
-    teal550: string;
     teal500: string;
     teal450: string;
     teal400: string;
+    teal350: string;
     teal300: string;
     teal250: string;
+    teal200: string;
     teal150: string;
+    teal100: string;
     teal50: string;
-    teal10: string;
+    blue950: string;
     blue900: string;
     blue800: string;
     blue700: string;
     blue600: string;
     blue500: string;
-    blue450: string;
     blue400: string;
-    blue350: string;
     blue300: string;
-    blue250: string;
     blue200: string;
-    blue150: string;
     blue100: string;
     blue50: string;
-    navy950: string;
-    navy900: string;
-    navy800: string;
-    navy700: string;
-    navy600: string;
-    navy500: string;
-    navy400: string;
-    navy300: string;
-    navy200: string;
-    navy100: string;
-    navy50: string;
     violet950: string;
     violet900: string;
     violet800: string;

package/src/styles/utilities/constants.esm.js

@@ -66,50 +66,50 @@ var e = {
 	green80: "#D1EB94",
 	green50: "#DAF1DE",
 	green10: "#F6FBEA",
-	teal990: "#001C19",
-	teal975: "#022427",
-	teal950: "#13332E",
-	teal900: "#0A3B43",
-	teal850: "#0F4A45",
-	teal800: "#0D4E59",
-	teal750: "#045258",
-	teal700: "#08ADBA",
-	teal650: "#1D766E",
-	teal600: "#137686",
-	teal550: "#039084",
-	teal500: "#2FBCB0",
-	teal450: "#5CD6CC",
-	teal400: "#85E0D9",
-	teal300: "#ADEBE5",
-	teal250: "#A6E7F2",
-	teal150: "#D6F5F2",
-	teal50: "#EBFAF9",
-	teal10: "#EBFDFE",
-	blue900: "#06272D",
-	blue800: "#068089",
-	blue700: "#1A9DB2",
-	blue600: "#20C4DF",
-	blue500: "#0ADBEA",
-	blue450: "#6DE3EE",
-	blue400: "#32E8F6",
-	blue350: "#63EEF8",
-	blue300: "#94F3FA",
-	blue250: "#A7F5FB",
-	blue200: "#BCEDF5",
-	blue150: "#D2FAFD",
-	blue100: "#D2F3F9",
-	blue50: "#E9F9FC",
-	navy950: "#060B14",
-	navy900: "#0C1728",
-	navy800: "#172D4F",
-	navy700: "#234476",
-	navy600: "#2F5B9D",
-	navy500: "#3A70C2",
-	navy400: "#628ED0",
-	navy300: "#89AADC",
-	navy200: "#B0C6E8",
-	navy100: "#D7E2F3",
-	navy50: "#EFF4FA",
+	blueGreen990: "#001C19",
+	blueGreen975: "#022427",
+	blueGreen950: "#13332E",
+	blueGreen900: "#0A3B43",
+	blueGreen850: "#0F4A45",
+	blueGreen800: "#0D4E59",
+	blueGreen750: "#045258",
+	blueGreen700: "#08ADBA",
+	blueGreen650: "#1D766E",
+	blueGreen600: "#137686",
+	blueGreen550: "#039084",
+	blueGreen500: "#2FBCB0",
+	blueGreen450: "#5CD6CC",
+	blueGreen400: "#85E0D9",
+	blueGreen300: "#ADEBE5",
+	blueGreen250: "#A6E7F2",
+	blueGreen150: "#D6F5F2",
+	blueGreen50: "#EBFAF9",
+	blueGreen10: "#EBFDFE",
+	teal900: "#06272D",
+	teal800: "#068089",
+	teal700: "#1A9DB2",
+	teal600: "#20C4DF",
+	teal500: "#0ADBEA",
+	teal450: "#6DE3EE",
+	teal400: "#32E8F6",
+	teal350: "#63EEF8",
+	teal300: "#94F3FA",
+	teal250: "#A7F5FB",
+	teal200: "#BCEDF5",
+	teal150: "#D2FAFD",
+	teal100: "#D2F3F9",
+	teal50: "#E9F9FC",
+	blue950: "#060B14",
+	blue900: "#0C1728",
+	blue800: "#172D4F",
+	blue700: "#234476",
+	blue600: "#2F5B9D",
+	blue500: "#3A70C2",
+	blue400: "#628ED0",
+	blue300: "#89AADC",
+	blue200: "#B0C6E8",
+	blue100: "#D7E2F3",
+	blue50: "#EFF4FA",
 	violet950: "#0D042F",
 	violet900: "#19095D",
 	violet800: "#260D8C",

package/src/styles/utilities/layout.esm.js

@@ -1,8 +1,8 @@
-import { LayoutWidthsSchema as e } from "./types.esm.js";
-import { defaultWidths as t } from "./constants.esm.js";
+import { defaultWidths as e } from "./constants.esm.js";
+import { LayoutWidthsSchema as t } from "./types.esm.js";
 import { css as n } from "@emotion/react";
 //#region src/styles/utilities/layout.ts
-var r = Object.fromEntries(e.options.map((e) => [e, `var(--w-${e}, ${t[e]}px)`])), i = {
+var r = Object.fromEntries(t.options.map((t) => [t, `var(--w-${t}, ${e[t]}px)`])), i = {
 	get mobile() {
 		return "(min-width: 0px)";
 	},

package/src/styles/utilities/types.d.ts

@@ -44,3 +44,8 @@ export type LayoutWidthsType = z.infer<typeof LayoutWidthsSchema>;
 export type Width = Record<LayoutWidthsType, number>;
 export type Colors = Record<string, string>;
 export type ColorType = "rgba" | "hex";
+export declare const zTextInputExclusions: z.ZodEnum<{
+    checkbox: "checkbox";
+    radio: "radio";
+}>;
+export type TextInputExclusions = z.infer<typeof zTextInputExclusions>;

package/src/styles/utilities/types.esm.js

@@ -20,6 +20,6 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	...n.options,
 	...r.options,
 	"text"
-]);
+]), o = e.enum(["checkbox", "radio"]);
 //#endregion
-export { t as BaseWidthSchema, i as BreakpointSchema, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema };
+export { t as BaseWidthSchema, i as BreakpointSchema, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema, o as zTextInputExclusions };