@stamcat/craftsman 0.0.23-alpha.9 → 0.0.23

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

@@ -0,0 +1,64 @@
+%text-link {
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--blue500);
+
+    &:not(:disabled):not(.disabled):hover {
+        color: var(--teal700);
+        background-color: transparent;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+}
+
+%button-styles {
+  --btn-pad-y: calc(var(--w-gutter, 16px) * 0.5);
+  --btn-pad-x: calc(var(--w-gutter, 16px) * 0.75);
+  --btn-border-radius: calc(var(--w-gutter, 16px) * 0.75);
+  color: var(--blue600);
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  flex-flow: row wrap;
+  align-items: center;
+  font-weight: 500;
+  transition: 0.125s;
+  padding: var(--btn-pad-y) var(--btn-pad-x);
+  border-radius: var(--btn-border-radius);
+  border: 1px solid var(--blue500);
+  background-color: var(--white);
+
+  &:not(:disabled):not(.disabled):hover {
+    background-color: var(--teal200);
+  }
+
+  &.text,
+  &[data-variant="text"] {
+    @extend %text-link;
+  }
+
+  &:disabled,
+  &.disabled {
+    cursor: not-allowed;
+    border-color: var(--gray200);
+    color: var(--gray400);
+
+    &.primary,
+    &[data-variant="primary"] {
+      border-color: var(--gray200);
+      background-color: var(--gray400);
+      color: var(--gray200);
+    }
+  }
+
+  &.primary,
+  &[data-variant="primary"] {
+    color: var(--white);
+    background-color: var(--blue500);
+
+    &:not(:disabled):not(.disabled):hover {
+      background-color: var(--blue700);
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+%checkbox {
+    appearance: none;
+    box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    vertical-align: baseline;
+    top: 0.08em;
+    margin: 0;
+    padding: 0;
+    height: 16px;
+    width: 16px;
+    border-radius: 4px;
+    border: 1px solid var(--blue500);
+    background: #fff;
+
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: 4px;
+        background: transparent;
+        transition: background-color 0.15s ease;
+    }
+
+    &::after {
+        position: absolute;
+        left: 50%;
+        top: 45%;
+        width: 5px;
+        height: 8px;
+        content: "";
+        display: block;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: translate(-50%, -58%) rotate(45deg) scale(0);
+        transform-origin: center;
+        transition: transform 0.15s ease;
+    }
+
+    &:checked {
+        border-color: var(--blue500);
+
+        &::before {
+        background-color: var(--blue500);
+        border-radius: unset;
+        }
+
+        &::after {
+        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+        }
+    }
+
+    &:disabled {
+        border-color: var(--gray500);
+
+        &::before {
+        background-color: var(--gray200);
+        }
+
+        &::after {
+        border-color: var(--gray200);
+        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+        }
+    }
+
+    &:checked:disabled {
+        border-color: var(--gray400);
+
+        &::before {
+        background: var(--gray400);
+        }
+
+        &::after {
+        border-color: var(--white);
+        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+%code {
+    background-color: var(--gray200);
+    color: var(--gray800);
+    padding: calc(var(--w-gutter, 16px) * 0.125) calc(var(--w-gutter, 16px) * 0.25);
+    margin: calc(var(--w-gutter, 16px) * 0.125);
+    display: inline-block;
+    font-size: var(--w-text, 14px);
+
+    &:has(pre) {
+    padding: var(--w-gutter, 16px);
+    border-radius: calc(var(--w-gutter, 16px) * 0.5);
+    background-color: var(--gray800);
+    color: var(--gray200);
+    }
+
+    &:has(pre) pre {
+    margin: 0;
+    }
+}

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/{styles → src/styles}/global/components/button.d.ts

@@ -1,8 +1,7 @@
 import { default as z } from 'zod';
 export declare const ButtonType: z.ZodEnum<{
-    text: "text";
     primary: "primary";
     default: "default";
+    text: "text";
 }>;
 export type ButtonType = z.infer<typeof ButtonType>;
-export declare const button: import('@emotion/utils').SerializedStyles;

package/{styles → src/styles}/global/components/loaders.d.ts

@@ -1,17 +1,15 @@
-import { SerializedStyles } from '@emotion/react';
 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-bounce": "dots-bounce";
     "dots-orbit": "dots-orbit";
     dashes: "dashes";
-    spinner: "spinner";
     swirl: "swirl";
     ball: "ball";
     boxy: "boxy";
-    factory: "factory";
 }>;
 export type LoaderStyle = z.infer<typeof LoaderStyleSchema>;
-export type LoaderStyleDefinition = (color: string, width?: number) => SerializedStyles;
+export type LoaderStyleDefinition = (color: string, width?: number) => React.CSSProperties;
 export declare const loaders: Record<LoaderStyle, LoaderStyleDefinition>;

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

@@ -1,65 +1,54 @@
-import { css as e } from "@emotion/react";
-import t from "zod";
-t.enum([
+import e from "zod";
+e.enum([
 	"dots",
 	"dots-trace",
-	"dots-bounce",
 	"dots-orbit",
 	"dashes",
 	"spinner",
 	"swirl",
 	"ball",
-	"boxy",
-	"factory"
+	"boxy"
 ]);
-var n = {
-	dots: (t, n = 100) => e`
-        --_l5c: ${t};
-        --_l5w: ${Math.round(n * .125)}px;
-        --_l5w2: ${Math.round(n * .16666)}px;
-        --_l5w3: ${Math.round(n * -.16666)}px;
-    `,
-	"dots-bounce": (t, n = 60) => e`
-        --_g: no-repeat radial-gradient(circle closest-side, ${t} 90%, #0000);
-        --_gw: ${n}px;
-    `,
-	"dots-trace": (t, n = 60) => e`
-        --_dtc: ${t};
-        --_dtw: ${n}px;
-    `,
-	"dots-orbit": (t, n = 17) => e`
-        --_doc: ${t};
-        --_dow: ${n}px;
-    `,
-	dashes: (t, n = 40) => e`
-        --_dshc: ${t};
-        --_dshw: ${n}px;
-        --_dshw2: ${Math.round(n / 4)}px;
-    `,
-	spinner: (t, n = 50) => e`
-        --_spnc: ${t};
-        --_spnw: ${n}px;
-        --_spnw2: ${Math.round(n * .16)}px;
-    `,
-	swirl: (t, n = 50) => e`
-        --_swrlc: ${t};
-        --_swrlw: ${n}px;
-        --_swrlw2: ${Math.round(n * .16)}px;
-    `,
-	ball: (t, n = 50) => e`
-        --_ballc: ${t};
-        --_ballw: ${n}px;
-        --_ballw2: ${Math.round(n * .24)}px;
-    `,
-	boxy: (t, n = 120) => e`
-        --_boxc: ${t};
-        --_boxw: ${n}px;
-        --_boxw2: ${Math.round(n * .16666)}px;
-    `,
-	factory: (t, n = 0) => e`
-        --_ftyc: ${t};
-        --_ftyw: ${n};
-    `
+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 { n as loaders };
+export { t as loaders };

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

@@ -1 +1 @@
-._dots_1132g_1{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_1132g_1}@keyframes _l5_1132g_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)}}._dots-bounce_1132g_27{width:var(--_gw);aspect-ratio:2;background:var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;background-size:33.3333% 50%;animation:1s linear infinite _l3_1132g_1}@keyframes _l3_1132g_1{to{transform:rotate(1turn)}}._dots-trace_1132g_49{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_1132g_1}@keyframes _l1_1132g_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_1132g_62{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_1132g_1;display:grid}._dots-orbit_1132g_62:before,._dots-orbit_1132g_62:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_1132g_1;transform:rotate(0)translate(150%)}._dots-orbit_1132g_62:after{animation-delay:-.5s}@keyframes _l22-0_1132g_1{to{transform:rotate(1turn)}}@keyframes _l22_1132g_1{to{transform:rotate(1turn)translate(150%)}}._dashes_1132g_93{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_1132g_93}@keyframes _dashes_1132g_93{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_1132g_119{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_1132g_1}@keyframes _l2_1132g_1{to{transform:rotate(1turn)}}._swirl_1132g_133{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_1132g_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_1132g_154{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_1132g_1}@keyframes _l9_1132g_1{to{transform:rotate(1turn)}}._boxy_1132g_167{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_1132g_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_1132g_1{to{background-position:right -25% top 0}}._factory_1132g_180{width:var(--_ftyw);height:var(--_ftyw2);box-shadow:0 3px 0 var(--_ftyc);clip-path:inset(-40px 0 -5px);position:relative}._factory_1132g_180:before{content:"";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:2s linear infinite _l7-1_1132g_1,2s linear infinite _l7-2_1132g_1;position:absolute;inset:auto calc(50% - 17px) 0}@keyframes _l7-1_1132g_1{0%,to{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_1132g_1{0%,70%{transform:translate(0)}to{transform:translate(200%)}}
+._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

@@ -1,25 +1,21 @@
 import './loaders.module.css';//#region src/styles/global/components/loaders.module.scss
-var e = "_dots_1132g_1", t = "_l5_1132g_1", n = "_l3_1132g_1", r = "_l1_1132g_1", i = "_l22_1132g_1", a = "_dashes_1132g_93", o = "_spinner_1132g_119", s = "_l2_1132g_1", c = "_swirl_1132g_133", l = "_ball_1132g_154", u = "_l9_1132g_1", d = "_boxy_1132g_167", f = "_l7_1132g_1", p = "_factory_1132g_180", m = {
+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,
-	"dots-bounce": "_dots-bounce_1132g_27",
-	l3: n,
-	"dots-trace": "_dots-trace_1132g_49",
+	dotsTrace: n,
 	l1: r,
-	"dots-orbit": "_dots-orbit_1132g_62",
-	"l22-0": "_l22-0_1132g_1",
-	l22: i,
-	dashes: a,
-	spinner: o,
-	l2: s,
-	swirl: c,
-	ball: l,
-	l9: u,
-	boxy: d,
-	l7: f,
-	factory: p,
-	"l7-1": "_l7-1_1132g_1",
-	"l7-2": "_l7-2_1132g_1"
+	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 { l as ball, d as boxy, a as dashes, m as default, e as dots, p as factory, r as l1, s as l2, i as l22, n as l3, t as l5, f as l7, u as l9, o as spinner, c as swirl };
+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

@@ -32,42 +32,48 @@
     }
 }
 
-.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%;
-    }
-}
+    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);
@@ -205,36 +211,36 @@
     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%)}
-}
+// .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 };