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

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

@@ -1,7 +1,62 @@
-%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);
+@use "../../utilities/functions" as u;
+
+@layer craftsman-base {
+  %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);
+      }
+  }
 }

package/src/styles/global/components/loaders.module.css

@@ -1 +1 @@
-._dots_1w7tl_1{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_1w7tl_1}@keyframes _l5_1w7tl_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}@keyframes _l3_1w7tl_1{to{transform:rotate(1turn)}}._dots-trace_1w7tl_41{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_1w7tl_1}@keyframes _l1_1w7tl_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_1w7tl_54{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_1w7tl_1;display:grid}._dots-orbit_1w7tl_54:before,._dots-orbit_1w7tl_54:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_1w7tl_1;transform:rotate(0)translate(150%)}._dots-orbit_1w7tl_54:after{animation-delay:-.5s}@keyframes _l22-0_1w7tl_1{to{transform:rotate(1turn)}}@keyframes _l22_1w7tl_1{to{transform:rotate(1turn)translate(150%)}}._dashes_1w7tl_85{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_1w7tl_85}@keyframes _dashes_1w7tl_85{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_1w7tl_111{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_1w7tl_1}@keyframes _l2_1w7tl_1{to{transform:rotate(1turn)}}._swirl_1w7tl_125{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_1w7tl_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_1w7tl_146{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_1w7tl_1}@keyframes _l9_1w7tl_1{to{transform:rotate(1turn)}}._boxy_1w7tl_159{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_1w7tl_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_1w7tl_1{to{background-position:right -25% top 0}}
+@layer craftsman-base{._dots_mugu5_2{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_mugu5_1}@keyframes _l5_mugu5_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}@keyframes _l3_mugu5_1{to{transform:rotate(1turn)}}._dots-trace_mugu5_41{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_mugu5_1}@keyframes _l1_mugu5_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_mugu5_53{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_mugu5_1;display:grid}._dots-orbit_mugu5_53:before,._dots-orbit_mugu5_53:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_mugu5_1;transform:rotate(0)translate(150%)}._dots-orbit_mugu5_53:after{animation-delay:-.5s}@keyframes _l22-0_mugu5_1{to{transform:rotate(1turn)}}@keyframes _l22_mugu5_1{to{transform:rotate(1turn)translate(150%)}}._dashes_mugu5_83{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_mugu5_83}@keyframes _dashes_mugu5_83{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_mugu5_108{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_mugu5_1}@keyframes _l2_mugu5_1{to{transform:rotate(1turn)}}._swirl_mugu5_121{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_mugu5_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_mugu5_141{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_mugu5_1}@keyframes _l9_mugu5_1{to{transform:rotate(1turn)}}._boxy_mugu5_153{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_mugu5_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_mugu5_1{to{background-position:right -25% top 0}}}

package/src/styles/global/components/loaders.module.esm.js

@@ -1,5 +1,5 @@
 import './loaders.module.css';//#region src/styles/global/components/loaders.module.scss
-var e = "_dots_1w7tl_1", t = "_l5_1w7tl_1", n = "_dots-trace_1w7tl_41", r = "_l1_1w7tl_1", i = "_dots-orbit_1w7tl_54", a = "_l22-0_1w7tl_1", o = "_l22_1w7tl_1", s = "_dashes_1w7tl_85", c = "_spinner_1w7tl_111", l = "_l2_1w7tl_1", u = "_swirl_1w7tl_125", d = "_l3_1w7tl_1", f = "_ball_1w7tl_146", p = "_l9_1w7tl_1", m = "_boxy_1w7tl_159", h = "_l7_1w7tl_1", g = {
+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,
 	dotsTrace: n,

package/src/styles/global/components/loaders.module.scss

@@ -1,3 +1,4 @@
+@layer craftsman-base {
 .dots {
     aspect-ratio: 1;
     border-radius: 50%;
@@ -243,4 +244,4 @@
 //   0%,70% {transform:translate(0)}
 //   100%  {transform:translate(200%)}
 // }
-
+}

package/src/styles/global/globalStyles.d.ts

@@ -0,0 +1,3 @@
+import { default as styles } from './globalStyles.module.scss';
+export declare const globalStyles: CSSModuleClasses;
+export default styles;

package/src/styles/global/globalStyles.module.scss

@@ -0,0 +1 @@
+@use "./globalStyles.scss";

package/src/styles/global/globalStyles.scss

@@ -1,11 +1,14 @@
+@use "../config";
 @use "./components/typography";
 @use "./components/code";
-@use "./components/mixins" as mixins;
 @use "./components/checkbox";
 @use "./components/radioButton";
 @use "./components/button";
 @use "./components/input";
 
+@layer craftsman-base, craftsman-theme;
+
+@layer craftsman-base {
 :root {
     color-scheme: light dark;
     font-synthesis: none;
@@ -31,17 +34,13 @@
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
-
-body {
-    @extend %body-typography;
-}
-body,
-ul {
+body, ul {
     margin: 0;
     padding: 0;
 }
 
 body {
+    @extend %body-typography;
     background-color: #fff;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
@@ -61,67 +60,23 @@ button {
 }
 
 input {
-    @extend %input-base;
-
-    &[type="radio"] {
-    @extend %radio;
+    &:not([type="radio"]):not([type="checkbox"]) {
+        @extend %input-base;
     }
-
     &[type="checkbox"] {
-    @extend %checkbox;
+        @extend %checkbox;
     }
-}
-
-a {
-    @extend %text-link;
-}
-
-h1 {
-    font-size: calc(var(--w-text, 14px) * 3.125);
-    line-height: 1.2;
-}
 
-h2 {
-    font-size: calc(var(--w-text, 14px) * 2.625);
-    font-weight: 625;
-    line-height: 1.1;
-}
-
-h3 {
-    font-size: calc(var(--w-text, 14px) * 1.625);
-    line-height: 1.1;
-}
-
-h4 {
-    font-size: calc(var(--w-text, 14px) * 1.25);
-    line-height: 1.1;
-    margin: calc(var(--w-gutter, 16px) * 0.5) 0;
-}
-
-h5 {
-    font-size: var(--w-text, 14px);
-    line-height: 1.2;
+    &[type="radio"] {
+        @extend %radio;
+    }
 }
-
-h6 {
-    font-size: calc(var(--w-text, 14px) * 0.875);
-    line-height: 1.2;
-    font-weight: 600;
+textarea {
+    @extend %input-base;
 }
 
-p {
-    font-style: normal;
-    font-size: var(--w-text, 14px);
-    line-height: 1.5;
-    margin: 0;
+a {
+    @extend %text-link;
 }
 
-@media (max-width: 659.99999px) {
-    h4 {
-    font-size: var(--w-text, 14px);
-    }
-
-    p {
-    font-size: calc(var(--w-text, 14px) * 0.875);
-    }
 }

package/src/styles/index.d.ts

@@ -1,6 +1,6 @@
 export * from './utilities/color';
 export * from './utilities/constants';
 export * from './utilities/layout';
-export * from './utilities/types';
+export * from '../utilities/types';
 export * from './theme/theme';
 export { ThemeProvider } from './components/ThemeProvider';

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

@@ -1,12 +1,18 @@
 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) {
+var n = {
+	button: "button",
+	input: "input:not([type='radio']):not([type='checkbox'])",
+	checkbox: "input[type='checkbox']",
+	radioButton: "input[type='radio']"
+};
+function r(e) {
 	return e.charAt(0).toLowerCase() + e.slice(1);
 }
-function r(t) {
-	return e.has(t) ? `${t}, .${t}` : `.${t}`;
+function i(t) {
+	return n[t] || (e.has(t) ? `${t}, .${t}` : `.${t}`);
 }
-var i = Object.keys(t).map(n), a = Object.fromEntries(i.map((e) => [e, r(e)]));
+var a = Object.keys(t).map(r), o = Object.fromEntries(a.map((e) => [e, i(e)]));
 //#endregion
-export { a as componentSelectors };
+export { o as componentSelectors };

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

@@ -2,54 +2,44 @@ import { componentSelectors as e } from "./components.esm.js";
 import { cssObjectToCssText as t, toCSSObject as n } from "./utilities.esm.js";
 import { colors as r, widths as i } from "../global/variables.esm.js";
 //#region src/styles/theme/theme.ts
-var a = /* @__PURE__ */ new Map();
-function o(e) {
-	if (typeof document > "u") return;
-	let t = `.${e}`, n = {}, r = !1, i = (e) => {
-		for (let a of Array.from(e)) {
-			if (a instanceof CSSStyleRule) {
-				if (!a.selectorText.split(",").map((e) => e.trim()).includes(t)) continue;
-				r = !0;
-				for (let e of Array.from(a.style)) n[e] = a.style.getPropertyValue(e);
-				continue;
-			}
-			a instanceof CSSGroupingRule && i(a.cssRules);
+function a(e) {
+	if (e) {
+		if (typeof e == "string") {
+			let t = e.trim();
+			return t.includes("{") ? t : `:root { ${t} }`;
 		}
-	};
-	for (let e of Array.from(document.styleSheets)) try {
-		e.cssRules && i(e.cssRules);
-	} catch {}
-	return r ? n : void 0;
+		return t(":root", n(e));
+	}
 }
-function s(e) {
-	if (a.has(e)) return a.get(e) ?? void 0;
-	let t = o(e);
-	return a.set(e, t ?? null), t;
+function o(e, r) {
+	if (typeof r == "string") {
+		let t = r.trim();
+		return t.includes("{") ? t : `${e} { ${t} }`;
+	}
+	return t(e, n(r));
 }
-function c(r) {
-	let i = [];
-	return Object.keys(e).forEach((a) => {
-		let o = r?.[a];
-		if (o) {
-			if (typeof o == "string") {
-				let n = s(o);
-				if (!n) return;
-				i.push(t(e[a], n));
-				return;
-			}
-			i.push(t(e[a], n(o)));
-		}
-	}), i;
+function s(t) {
+	return Object.keys(e).map((n) => {
+		let r = t?.[n];
+		return r ? o(e[n], r) : void 0;
+	}).filter((e) => !!e);
+}
+function c(e) {
+	if (!(!e || Object.keys(e).length === 0)) return `:root { ${Object.entries(e).map(([e, t]) => `--w-${e}: ${t}px;`).join(" ")} }`;
 }
 function l(e) {
-	let a = t(":root", {
-		...e.colors || {},
-		...e.root ? n(e.root) : {}
-	});
+	let n = [
+		t(":root", { ...e.colors || {} }),
+		c(e.widths),
+		a(e.root),
+		...s(e.components)
+	].filter(Boolean).join("\n");
 	return [
 		`:root { ${i} ${r} }`,
-		a,
-		...c(e.components)
+		"@layer craftsman-base, craftsman-theme;",
+		"@layer craftsman-theme {",
+		n,
+		"}"
 	].filter(Boolean).join("\n");
 }
 //#endregion

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

@@ -1,5 +1,6 @@
 import { ColorKey } from '../utilities/color';
 import { componentSelectors } from './components';
+import { LayoutWidthsType } from '../../utilities/types';
 export type ColorVariableName = `--${ColorKey}`;
 export type CSSObject = {
     [key: string]: string | number | CSSObject | undefined;
@@ -14,9 +15,11 @@ export type ComponentThemeOverrides = {
     [K in RegisteredComponent]?: CSSObject | LegacySerializedStyles | string;
 };
 export type Colors = Partial<Record<ColorVariableName, string>>;
+export type WidthOverrides = Partial<Record<LayoutWidthsType, number>>;
 export type Theme = {
     colors?: Colors;
-    root?: CSSObject | LegacySerializedStyles;
+    widths?: WidthOverrides;
+    root?: CSSObject | LegacySerializedStyles | string;
     components?: ComponentThemeOverrides;
 };
 export type ThemeProviderProps = {

package/src/styles/utilities/_functions.scss

@@ -0,0 +1,117 @@
+@use "sass:map";
+@use "sass:string";
+@use "../config" as cfg;
+
+$width-defaults: (
+	text: cfg.$w-text,
+	gutter: cfg.$w-gutter,
+	column: cfg.$w-column,
+	mobileMax: cfg.$bp-mobileMax,
+	tablet: cfg.$bp-tablet,
+	tabletMax: cfg.$bp-tabletMax,
+	desktop: cfg.$bp-desktop,
+	desktopMax: cfg.$bp-desktopMax,
+	extDesktop: cfg.$bp-extDesktop,
+);
+
+@function color($name, $type: hex, $alpha: 1) {
+	@if $type == rgba {
+		@return string.unquote("rgb(from var(--#{$name}) r g b / #{$alpha})");
+	}
+
+	@return string.unquote("var(--#{$name})");
+}
+
+@function width-var($name) {
+	@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)");
+}
+
+@function width($name, $multiplier: 1, $px: true) {
+	$value: width-var($name);
+
+	@if $name == column {
+		$gutter-steps: $multiplier - 1;
+		$gutter: width-var(gutter);
+
+		@if $px {
+			@return string.unquote("calc((#{$value} * #{$multiplier}) + (#{$gutter} * #{$gutter-steps}))");
+		}
+
+		@return string.unquote("calc((#{$value} * #{$multiplier}) + (#{$gutter} * #{$gutter-steps}))");
+	}
+
+	@if $px {
+		@if $multiplier == 1 {
+			@return $value;
+		}
+
+		@return string.unquote("calc(#{$value} * #{$multiplier})");
+	}
+
+	@if $multiplier == 1 {
+		@return string.unquote("#{$value}");
+	}
+
+	@return string.unquote("calc(#{$value} * #{$multiplier})");
+}
+
+@function media($bp) {
+	@if $bp == mobile {
+		@return string.unquote("(min-width: 0px)");
+	}
+
+	@if $bp == mobileMax {
+		@return string.unquote("(max-width: #{cfg.$bp-mobileMax}px)");
+	}
+
+	@if $bp == tablet {
+		@return string.unquote("(min-width: #{cfg.$bp-tablet}px)");
+	}
+
+	@if $bp == tabletMax {
+		@return string.unquote("(max-width: #{cfg.$bp-tabletMax}px)");
+	}
+
+	@if $bp == desktop {
+		@return string.unquote("(min-width: #{cfg.$bp-desktop}px)");
+	}
+
+	@if $bp == desktopMax {
+		@return string.unquote("(max-width: #{cfg.$bp-desktopMax}px)");
+	}
+
+	@if $bp == extDesktop {
+		@return string.unquote("(min-width: #{cfg.$bp-extDesktop}px)");
+	}
+
+	@if $bp == mobileOnly {
+		@return string.unquote("(min-width: 0px) and (max-width: #{cfg.$bp-mobileMax}px)");
+	}
+
+	@if $bp == tabletOnly {
+		@return string.unquote("(min-width: #{cfg.$bp-tablet}px) and (max-width: #{cfg.$bp-tabletMax}px)");
+	}
+
+	@if $bp == mobileTablet {
+		@return string.unquote("(min-width: 0px) and (max-width: #{cfg.$bp-tabletMax}px)");
+	}
+
+	@if $bp == desktopOnly {
+		@return string.unquote("(min-width: #{cfg.$bp-desktop}px) and (max-width: #{cfg.$bp-desktopMax}px)");
+	}
+
+	@error "Unknown breakpoint `#{$bp}`.";
+}
+
+@mixin breakpoint($bp) {
+	@media #{media($bp)} {
+		@content;
+	}
+}
+
+

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

@@ -1,4 +1,4 @@
-import { ColorType } from './types';
+import { ColorType } from '../../utilities/types';
 export declare const colors: {
     red990: string;
     red950: string;

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

@@ -1,4 +1,4 @@
-import { LayoutWidthsType } from './types';
+import { LayoutWidthsType } from '../../utilities/types';
 export declare const defaultColors: {
     red990: string;
     red950: string;

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

@@ -1,4 +1,4 @@
-import { Breakpoint, LayoutWidthsType } from './types';
+import { Breakpoint, LayoutWidthsType } from '../../utilities/types';
 export declare const widths: Record<LayoutWidthsType, string>;
 export declare const media: {
     readonly mobile: string;

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

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

package/src/{styles/utilities → utilities}/types.d.ts

@@ -26,7 +26,6 @@ export declare const BreakpointSchema: z.ZodEnum<{
     desktopOnly: "desktopOnly";
 }>;
 export declare const LayoutWidthsSchema: z.ZodEnum<{
-    text: "text";
     gutter: "gutter";
     column: "column";
     tablet: "tablet";
@@ -35,6 +34,7 @@ export declare const LayoutWidthsSchema: z.ZodEnum<{
     mobileMax: "mobileMax";
     tabletMax: "tabletMax";
     desktopMax: "desktopMax";
+    text: "text";
 }>;
 export type BaseWidth = z.infer<typeof BaseWidthSchema>;
 export type ScreenWidth = z.infer<typeof ScreenWidthSchema>;
@@ -83,3 +83,9 @@ export declare const zLabelPosition: z.ZodEnum<{
     inside: "inside";
 }>;
 export type LabelPosition = z.infer<typeof zLabelPosition>;
+export declare const ButtonType: z.ZodEnum<{
+    text: "text";
+    primary: "primary";
+    default: "default";
+}>;
+export type ButtonType = z.infer<typeof ButtonType>;

package/src/{styles/utilities → utilities}/types.esm.js

@@ -1,5 +1,5 @@
 import e from "zod";
-//#region src/styles/utilities/types.ts
+//#region src/utilities/types.ts
 var t = e.enum(["gutter", "column"]), n = e.enum([
 	"tablet",
 	"desktop",
@@ -49,6 +49,10 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	"right",
 	"inside",
 	"hidden"
+]), u = e.enum([
+	"primary",
+	"default",
+	"text"
 ]);
 //#endregion
-export { t as BaseWidthSchema, i as BreakpointSchema, 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, l as zLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };

package/src/components/Button.module.css

@@ -1 +0,0 @@
-._text_1l9fp_1._button_1l9fp_1,[data-variant=text]._button_1l9fp_1{color:var(--blue500);background:0 0;border:none;padding:0}._text_1l9fp_1._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover,[data-variant=text]._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover{color:var(--teal700);cursor:pointer;background-color:#0000;text-decoration:underline}._button_1l9fp_1{--btn-pad-y:calc(var(--w-gutter,16px) * .5);--btn-pad-x:calc(var(--w-gutter,16px) * .75);--btn-border-radius:calc(var(--w-gutter,16px) * .75);color:var(--blue600);cursor:pointer;padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--btn-border-radius);border:none;border:1px solid var(--blue500);background-color:var(--white);flex-flow:wrap;align-items:center;font-weight:500;transition:all .125s;display:inline-flex}._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover{background-color:var(--teal200)}._button_1l9fp_1:disabled,._disabled_1l9fp_7._button_1l9fp_1{cursor:not-allowed;border-color:var(--gray200);color:var(--gray400)}._button_1l9fp_1:disabled._primary_1l9fp_39,._button_1l9fp_1:disabled[data-variant=primary],._disabled_1l9fp_7._primary_1l9fp_39._button_1l9fp_1,._disabled_1l9fp_7[data-variant=primary]._button_1l9fp_1{border-color:var(--gray200);background-color:var(--gray400);color:var(--gray200)}._primary_1l9fp_39._button_1l9fp_1,[data-variant=primary]._button_1l9fp_1{color:var(--white);background-color:var(--blue500)}._primary_1l9fp_39._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover,[data-variant=primary]._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover{background-color:var(--blue700)}

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

@@ -1,9 +0,0 @@
-import './Button.module.css';//#region src/components/Button.module.scss
-var e = "_text_1l9fp_1", t = "_button_1l9fp_1", n = "_disabled_1l9fp_7", r = "_primary_1l9fp_39", i = {
-	text: e,
-	button: t,
-	disabled: n,
-	primary: r
-};
-//#endregion
-export { t as button, i as default, n as disabled, r as primary, e as text };

package/src/components/Button.module.scss

@@ -1,5 +0,0 @@
-@use "../styles/global/components/button";
-
-.button {
-  @extend %button-styles;
-}

package/src/components/Input.d.ts

@@ -1,11 +0,0 @@
-import { LabelPosition, TextInputType } from '../styles/utilities/types';
-export type InputProps = React.ComponentProps<"input"> & {
-    label?: string | React.ReactNode;
-    labelPosition?: LabelPosition;
-    error?: string | boolean | React.ReactNode;
-    required?: boolean;
-    styles?: React.CSSProperties;
-    endAdornment?: React.ReactNode;
-    type?: TextInputType;
-};
-export declare const Input: React.FC<InputProps>;

package/src/components/Input.esm.js

@@ -1,41 +0,0 @@
-"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 { useId as a } from "react";
-//#region src/components/Input.tsx
-var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, type: u = "text", error: d, styles: f, className: p, style: m, endAdornment: h, ...g }) => {
-	let _ = a(), v = s || _, y = !e(g.value) || !e(g.defaultValue), b = e(f) ? void 0 : f, x = /* @__PURE__ */ i("span", {
-		className: t.inputField,
-		"data-has-end-adornment": !e(h),
-		children: [/* @__PURE__ */ r("input", {
-			id: v,
-			type: u,
-			className: t.input,
-			...g
-		}), !e(h) && /* @__PURE__ */ r("span", {
-			className: t.inputAdornment,
-			children: h
-		})]
-	});
-	return /* @__PURE__ */ i("div", {
-		"data-label-position": c,
-		"data-required": l,
-		"data-has-input": y,
-		className: n(t.wrapper, p),
-		style: {
-			...b,
-			...m
-		},
-		children: [e(o) ? x : /* @__PURE__ */ i("label", { children: [c !== "hidden" && /* @__PURE__ */ r("div", {
-			className: t.inputLabel,
-			children: o
-		}), x] }), !e(d) && /* @__PURE__ */ r("div", {
-			className: t.error,
-			children: d
-		})]
-	});
-};
-//#endregion
-export { o as Input };

package/src/components/Input.module.css

@@ -1 +0,0 @@
-._wrapper_h3ihm_1[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._inputLabel_h3ihm_8,._wrapper_h3ihm_1[data-label-position=inside][data-has-input=true] ._inputLabel_h3ihm_8{top:-.5rem;left:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75)}._wrapper_h3ihm_1[data-label-position=inside]:has(._input_h3ihm_8:not(:placeholder-shown)) ._inputLabel_h3ihm_8{top:-.5rem;left:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75)}._wrapper_h3ihm_1[data-label-position=inside]:has(._input_h3ihm_8:-webkit-autofill) ._inputLabel_h3ihm_8{top:-.5rem;left:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75)}._wrapper_h3ihm_1 label ._inputLabel_h3ihm_8{margin-bottom:calc(var(--w-gutter,16px) * .25)}._wrapper_h3ihm_1[data-required=true] label ._inputLabel_h3ihm_8:after{content:"*";color:var(--red700)}._wrapper_h3ihm_1[data-label-position=left] label{align-items:center;display:inline-flex}._wrapper_h3ihm_1[data-label-position=left] label ._inputLabel_h3ihm_8{width:fit-content;margin-right:calc(var(--w-gutter,16px) * .75)}._wrapper_h3ihm_1[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}._wrapper_h3ihm_1[data-label-position=bottom] label ._inputLabel_h3ihm_8{margin-bottom:0;margin-top:calc(var(--w-gutter,16px) * .25)}._wrapper_h3ihm_1[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}._wrapper_h3ihm_1[data-label-position=right] label ._inputLabel_h3ihm_8{margin-left:calc(var(--w-gutter,16px) * .25);margin-bottom:0}._wrapper_h3ihm_1[data-label-position=inside] ._inputLabel_h3ihm_8{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_h3ihm_1[data-label-position=inside]>label>._inputField_h3ihm_58>._input_h3ihm_8,._wrapper_h3ihm_1[data-label-position=inside]>._input_h3ihm_8{transition:border-color .2s}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._inputLabel_h3ihm_8{color:var(--blue500)}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._input_h3ihm_8{border-color:var(--blue500)}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._input_h3ihm_8::placeholder{opacity:1}._wrapper_h3ihm_1[data-label-position=inside] ._input_h3ihm_8[type=tel]{width:100%}._wrapper_h3ihm_1[data-label-position=inside] ._input_h3ihm_8::placeholder{opacity:0;transition:opacity .2s}._inputField_h3ihm_58{align-items:center;display:inline-flex;position:relative}._inputField_h3ihm_58[data-has-end-adornment=true]>._input_h3ihm_8{width:100%;padding-right:calc(var(--w-gutter,16px) * .5 + 24px + var(--w-gutter,16px) * .5)}._inputAdornment_h3ihm_89{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_h3ihm_100{margin-top:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75);color:var(--red600)}