@stamcat/craftsman 0.0.23-alpha.8 → 0.0.23

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

@@ -0,0 +1,46 @@
+%inside-input-label-base {
+  --react-international-phone-height: 50px;
+  --react-international-phone-border-radius: 8px;
+  --react-international-phone-border-color: #c0c0c0ff;
+  position: relative;
+}
+
+%inside-input-label-floating {
+  top: -0.5rem;
+  left: calc(var(--w-gutter, 16px) * 0.25);
+  font-size: calc(var(--w-text, 14px) * 0.75);
+}
+
+%interactive-focus-reset {
+  &:focus {
+    outline: 0;
+    box-shadow: none;
+  }
+}
+
+%input-base {
+  color: var(--text);
+  border-radius: 3px;
+  border: 1px solid var(--gray400);
+  padding: calc(var(--w-gutter, 16px) * 0.5);
+  background-color: var(--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: var(--gray200);
+    background-color: var(--gray100);
+  }
+
+  @extend %interactive-focus-reset;
+}

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

@@ -0,0 +1,2 @@
+
+

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

@@ -0,0 +1,9 @@
+%modal-overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}

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

@@ -0,0 +1,33 @@
+%radio {
+    --radio-btn-size: 16px;
+    transition: border-color 0.2s ease;
+    appearance: none;
+    cursor: pointer;
+    position: relative;
+    display: inline-grid;
+    place-content: center;
+    padding: 0;
+    width: var(--radio-btn-size);
+    height: var(--radio-btn-size);
+    border: 1px solid var(--blue600);
+    border-radius: 50%;
+    box-sizing: border-box;
+
+    &::before {
+        content: "";
+        width: calc(var(--radio-btn-size) * 0.5);
+        height: calc(var(--radio-btn-size) * 0.5);
+        border-radius: 50%;
+        transform: scale(0);
+        transition: transform 0.2s ease;
+        background-color: var(--blue600);
+    }
+
+    &:checked {
+        border-color: var(--gray500);
+
+        &::before {
+        transform: scale(1);
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+%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);
+}

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

@@ -0,0 +1,7 @@
+import { default as z } from 'zod';
+export declare const ButtonType: z.ZodEnum<{
+    primary: "primary";
+    default: "default";
+    text: "text";
+}>;
+export type ButtonType = z.infer<typeof ButtonType>;

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

@@ -0,0 +1,15 @@
+import { default as z } from 'zod';
+import { default as React } from 'react';
+export declare const LoaderStyleSchema: z.ZodEnum<{
+    spinner: "spinner";
+    dots: "dots";
+    "dots-trace": "dots-trace";
+    "dots-orbit": "dots-orbit";
+    dashes: "dashes";
+    swirl: "swirl";
+    ball: "ball";
+    boxy: "boxy";
+}>;
+export type LoaderStyle = z.infer<typeof LoaderStyleSchema>;
+export type LoaderStyleDefinition = (color: string, width?: number) => React.CSSProperties;
+export declare const loaders: Record<LoaderStyle, LoaderStyleDefinition>;

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

@@ -0,0 +1,54 @@
+import e from "zod";
+e.enum([
+	"dots",
+	"dots-trace",
+	"dots-orbit",
+	"dashes",
+	"spinner",
+	"swirl",
+	"ball",
+	"boxy"
+]);
+var t = {
+	dots: (e, t = 100) => ({
+		"--_l5c": e,
+		"--_l5w": `${Math.round(t * .125)}px`,
+		"--_l5w2": `${Math.round(t * .16666)}px`,
+		"--_l5w3": `${Math.round(t * -.16666)}px`
+	}),
+	"dots-trace": (e, t = 60) => ({
+		"--_dtc": e,
+		"--_dtw": `${t}px`
+	}),
+	"dots-orbit": (e, t = 17) => ({
+		"--_doc": e,
+		"--_dow": `${t}px`
+	}),
+	dashes: (e, t = 40) => ({
+		"--_dshc": e,
+		"--_dshw": `${t}px`,
+		"--_dshw2": `${Math.round(t / 4)}px`
+	}),
+	spinner: (e, t = 50) => ({
+		"--_spnc": e,
+		"--_spnw": `${t}px`,
+		"--_spnw2": `${Math.round(t * .16)}px`
+	}),
+	swirl: (e, t = 50) => ({
+		"--_swrlc": e,
+		"--_swrlw": `${t}px`,
+		"--_swrlw2": `${Math.round(t * .16)}px`
+	}),
+	ball: (e, t = 50) => ({
+		"--_ballc": e,
+		"--_ballw": `${t}px`,
+		"--_ballw2": `${Math.round(t * .24)}px`
+	}),
+	boxy: (e, t = 120) => ({
+		"--_boxc": e,
+		"--_boxw": `${t}px`,
+		"--_boxw2": `${Math.round(t * .16666)}px`
+	})
+};
+//#endregion
+export { t as loaders };

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

@@ -0,0 +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}}

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

@@ -0,0 +1,21 @@
+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 = {
+	dots: e,
+	l5: t,
+	dotsTrace: n,
+	l1: r,
+	dotsOrbit: i,
+	l220: a,
+	l22: o,
+	dashes: s,
+	spinner: c,
+	l2: l,
+	swirl: u,
+	l3: d,
+	ball: f,
+	l9: p,
+	boxy: m,
+	l7: h
+};
+//#endregion
+export { f as ball, m as boxy, s as dashes, g as default, e as dots, i as dotsOrbit, n as dotsTrace, r as l1, l as l2, o as l22, a as l220, d as l3, t as l5, h as l7, p as l9, c as spinner, u as swirl };

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

@@ -0,0 +1,246 @@
+.dots {
+    aspect-ratio: 1;
+    border-radius: 50%;
+    animation: l5 1s infinite linear alternate;
+    width: var(--_l5w);
+    margin: 0 var(--_l5w2);
+}
+@keyframes l5 {
+    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%);
+    }
+    100% {
+        box-shadow:
+            var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%),
+            var(--_l5w3) 0 var(--_l5c);
+        background: var(--_l5c);
+    }
+}
+
+@keyframes l3 {
+    20%{background-position:0%   0%, 50%  50%,100%  50%}
+    40%{background-position:0% 100%, 50%   0%,100%  50%}
+    60%{background-position:0%  50%, 50% 100%,100%   0%}
+    80%{background-position:0%  50%, 50%  50%,100% 100%}
+}
+// .dots-bounce {
+//     width: var(--_gw);
+//     aspect-ratio: 2;
+//     background:
+//         var(--_g) 0% 50%,
+//         var(--_g) 50% 50%,
+//         var(--_g) 100% 50%;
+//     background-size: calc(100% / 3) 50%;
+//     animation: l3 1s infinite linear;
+// }
+// @keyframes l3 {
+//     20% {
+//         background-position:
+//             0% 0%,
+//             50% 50%,
+//             100% 50%;
+//     }
+//     40% {
+//         background-position:
+//             0% 100%,
+//             50% 0%,
+//             100% 50%;
+//     }
+//     60% {
+//         background-position:
+//             0% 50%,
+//             50% 100%,
+//             100% 0%;
+//     }
+//     80% {
+//         background-position:
+//             0% 50%,
+//             50% 50%,
+//             100% 100%;
+//     }
+// }
+
+.dots-trace {
+    width: var(--_dtw);
+    aspect-ratio: 4;
+    background: radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0 / calc(100% / 3) 100% space;
+    clip-path: inset(0 100% 0 0);
+    animation: l1 1s steps(4) infinite;
+       
+}
+@keyframes l1 {
+    to {
+        clip-path: inset(0 -34% 0 0);
+    }
+}
+
+.dots-orbit {
+  width: var(--_dow);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--_doc);
+  display: grid;
+  animation: l22-0 2s infinite linear;
+    &:before,
+    &:after {
+        content: "";
+        grid-area: 1/1;
+        margin: 15%;
+        border-radius: 50%;
+        background: inherit;
+        transform: rotate(0deg) translate(150%);
+        animation: l22 1s infinite;
+    }
+    &:after {
+        animation-delay: -.5s
+    }
+}
+
+@keyframes l22-0 {
+  100% {transform: rotate(1turn)}
+}
+@keyframes l22 {
+  100% {transform: rotate(1turn) translate(150%)}
+}
+
+.dashes {
+    width: var(--_dshw);
+    height: calc(var(--_dshw) * 0.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: dashes 1s infinite linear;
+        
+}
+@keyframes dashes {
+    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: 0.7;
+    }
+    66% {
+        background-size:
+            var(--_dshw2) 4px,
+            var(--_dshw2) var(--_dshw2),
+            var(--_dshw2) 4px;
+        opacity: 0.7;
+    }
+    100% {
+        background-size:
+            var(--_dshw2) 4px,
+            var(--_dshw2) 4px,
+            var(--_dshw2) var(--_dshw2);
+        opacity: 1;
+    }
+}
+
+.spinner {
+  width: var(--_spnw);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);
+  border-right-color: var(--_spnc);
+  animation: l2 1s infinite linear;
+}
+@keyframes l2 {to{transform: rotate(1turn)}}
+
+.swirl {
+  width: var(--_swrlw);
+  padding: var(--_swrlw2);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--_swrlc);
+  --_m: 
+    conic-gradient(#0000 10%,#000),
+    linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+          mask: var(--_m);
+  -webkit-mask-composite: source-out;
+          mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {to{transform: rotate(1turn)}}
+
+.ball {
+  width: var(--_ballw);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  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);
+  animation: l9 2s infinite linear;
+}
+@keyframes l9 {to{transform: rotate(1turn)}}
+
+.boxy {
+  width: var(--_boxw);
+  height: var(--_boxw2);
+  -webkit-mask: linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
+  background:
+   linear-gradient(var(--_boxc) 0 0) left -25% top 0 /20% 100% no-repeat
+   #ddd;
+  animation: l7 1s infinite steps(6);
+}
+@keyframes l7 {
+    100% {background-position: right -25% top 0}
+}
+
+// .factory {
+//   width: var(--_ftyw);
+//   height: var(--_ftyw2);
+//   box-shadow: 0 3px 0 var(--_ftyc);
+//   position: relative;
+//   clip-path: inset(-40px 0 -5px);
+//   &:before {
+//     content: "";
+//     position: absolute;
+//     inset: auto calc(50% - 17px) 0;
+//     height: var(--_ftyw3);
+//     --g:no-repeat linear-gradient(color-mix(in srgb, var(--_ftyc) 30%, white) 0 0);
+//     background: var(--g),var(--g),var(--g),var(--g);
+//     background-size: var(--_ftyw4) 14px;
+//     animation:
+//         l7-1 2s infinite linear,
+//         l7-2 2s infinite linear;
+//     }
+// }
+// @keyframes l7-1 {
+//   0%,
+//   100%  {background-position: 0 -var(--_ftyw3),100% -var(--_ftyw3)}
+//   17.5% {background-position: 0 100%,100% -var(--_ftyw3),0 -var(--_ftyw3),100% -var(--_ftyw3)}
+//   35%   {background-position: 0 100%,100% 100% ,0 -var(--_ftyw3),100% -var(--_ftyw3)}
+//   52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% -var(--_ftyw3)}
+//   70%,
+//   98%  {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% calc(100% - var(--_ftyw4))}
+// }
+// @keyframes l7-2 {
+//   0%,70% {transform:translate(0)}
+//   100%  {transform:translate(200%)}
+// }
+

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

@@ -0,0 +1 @@
+export declare const globalStyles = "globalStyles";

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

@@ -0,0 +1,4 @@
+//#region src/styles/global/globalStyles.ts
+var e = "globalStyles";
+//#endregion
+export { e as globalStyles };

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

@@ -0,0 +1,129 @@
+@use "./components/typography";
+@use "./components/code";
+@use "./components/mixins" as mixins;
+@use "./components/checkbox"; 
+@use "./components/radioButton";
+@use "./components/button";
+@use "./components/input";
+
+:global {
+    :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-track {
+      background: #ddd;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #000;
+      border-radius: 6px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555;
+    }
+
+    body {
+        @extend %body-typography;
+    }
+    body,
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      background-color: #fff;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
+    }
+
+    fieldset {
+      padding: 0;
+      border: 0;
+    }
+
+    code {
+      @extend %code;
+    }
+
+    button {
+      @extend %button-styles;
+    }
+
+    input {
+      @extend %input-base;
+
+      &[type="radio"] {
+        @extend %radio;
+      }
+
+      &[type="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;
+    }
+
+    h6 {
+      font-size: calc(var(--w-text, 14px) * 0.875);
+      line-height: 1.2;
+      font-weight: 600;
+    }
+
+    p {
+      font-style: normal;
+      font-size: var(--w-text, 14px);
+      line-height: 1.5;
+      margin: 0;
+    }
+
+    @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/global/variables.d.ts

@@ -0,0 +1,2 @@
+export declare const colors: string;
+export declare const widths: string;

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

@@ -0,0 +1,11 @@
+import { defaultWidths as e } from "../utilities/constants.esm.js";
+import { colors as t } from "../utilities/color.esm.js";
+//#region src/styles/global/variables.ts
+var n = {
+	...e,
+	mobileMax: e.tablet - 1e-5,
+	tabletMax: e.desktop - 1e-5,
+	desktopMax: e.extDesktop - 1e-5
+}, r = Object.entries(t).map(([e, t]) => `--${e}: ${t};`).join("\n"), i = Object.entries(n).map(([e, t]) => `--w-${e}: ${t}px;`).join("\n");
+//#endregion
+export { r as colors, i as widths };

package/src/styles/index.d.ts

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

package/{styles → src/styles}/theme/components.d.ts

@@ -1,4 +1,4 @@
-import * as exportedComponents from "../../components";
+import * as exportedComponents from "../../components/index";
 type ExportedComponentName = keyof typeof exportedComponents & string;
 export type RegisteredComponentName = Uncapitalize<ExportedComponentName>;
 export declare const componentSelectors: Record<RegisteredComponentName, string>;

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

@@ -0,0 +1,12 @@
+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(t) {
+	return e.has(t) ? `${t}, .${t}` : `.${t}`;
+}
+var i = Object.keys(t).map(n), a = Object.fromEntries(i.map((e) => [e, r(e)]));
+//#endregion
+export { a as componentSelectors };

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

@@ -0,0 +1 @@
+export declare const htmlTagNames: Set<string>;

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

@@ -0,0 +1,4 @@
+//#region src/styles/theme/constants.ts
+var e = /* @__PURE__ */ new Set(/* @__PURE__ */ "a.abbr.address.area.article.aside.audio.b.base.bdi.bdo.blockquote.body.br.button.canvas.caption.cite.code.col.colgroup.data.datalist.dd.del.details.dfn.dialog.div.dl.dt.em.embed.fieldset.figcaption.figure.footer.form.h1.h2.h3.h4.h5.h6.head.header.hgroup.hr.html.i.iframe.img.input.ins.kbd.label.legend.li.link.main.map.mark.menu.meta.meter.nav.noscript.object.ol.optgroup.option.output.p.picture.pre.progress.q.rp.rt.ruby.s.samp.script.section.select.slot.small.source.span.strong.style.sub.summary.sup.table.tbody.td.template.textarea.tfoot.th.thead.time.title.tr.track.u.ul.var.video.wbr".split("."));
+//#endregion
+export { e as htmlTagNames };

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

@@ -0,0 +1,2 @@
+import { Theme } from './types';
+export declare function themeBuilder(theme: Theme): string;