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

package/Components.esm.js

@@ -2,21 +2,23 @@ import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
 import { Button as t } from "./src/components/Button.esm.js";
 import { Input as n } from "./src/components/Input/Input.esm.js";
 import { 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";
 //#region src/components/index.ts
-var l = /* @__PURE__ */ e({
+var u = /* @__PURE__ */ e({
 	Button: () => t,
 	Checkbox: () => o,
 	Input: () => n,
 	InputPassword: () => r,
 	Loader: () => i,
-	Modal: () => c,
+	Modal: () => l,
 	RadioButton: () => a,
+	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, c as Text, s as Textarea, u 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.7",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -88,6 +88,10 @@
       "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"

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/{Loader.d.ts → Loader/Loader.d.ts}

@@ -1,4 +1,4 @@
-import { LoaderStyle } from '../styles/global/components/loaders';
+import { LoaderStyle } from './types';
 export type LoaderProps = React.ComponentProps<"div"> & {
     type: LoaderStyle;
     color?: string;

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

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

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.esm.js → Modal/Modal.esm.js}

@@ -1,13 +1,13 @@
 "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 { 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
+//#region src/components/Modal/Modal.tsx
 var u = class extends c.PureComponent {
 	state = { isClosing: !1 };
 	onDismiss = () => {

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/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,9 @@
 export { Button } from './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';

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,5 +1,5 @@
 @use "../config";
-@use "./components/typography";
+@use "./components/typography" as t;
 @use "./components/code";
 @use "./components/checkbox";
 @use "./components/radioButton";
@@ -9,74 +9,74 @@
 @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/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/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 };