@jackcrane/ui 0.1.5 → 0.1.8

package/dist/jcui.es.js

@@ -3,7 +3,7 @@
   inherits: true;
   initial-value: transparent;
 }
-._button_d2nsp_7 {
+._button_105y0_7 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -13,95 +13,104 @@
   border-color: var(--border-color);
   cursor: pointer;
 }
-._button_d2nsp_7:hover {
+._button_105y0_7:hover {
   --button-bg: var(--secondary-color-100);
 }
-._button_d2nsp_7:active {
+._button_105y0_7:active {
   --button-bg: var(--secondary-color-200);
 }
-._large_d2nsp_24 {
+._pageBackground_105y0_24 {
+  --button-bg: var(--body-bg);
+}
+._pageBackground_105y0_24:hover {
+  --button-bg: var(--body-bg);
+}
+._pageBackground_105y0_24:active {
+  --button-bg: var(--body-bg);
+}
+._large_105y0_34 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_d2nsp_29 {
+._small_105y0_39 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_d2nsp_34 {
+._disabled_105y0_44 {
   opacity: 0.5 !important;
   cursor: not-allowed;
 }
 /* Variants */
-._primary_d2nsp_41 {
+._primary_105y0_51 {
   --button-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --button-color: var(--primary-color-800);
 }
-._primary_d2nsp_41:hover {
+._primary_105y0_51:hover {
   --button-bg: var(--primary-color-200);
 }
-._primary_d2nsp_41:active {
+._primary_105y0_51:active {
   --button-bg: var(--primary-color-300);
 }
-._success_d2nsp_54 {
+._success_105y0_64 {
   --button-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --button-color: var(--success-color-800);
 }
-._success_d2nsp_54:hover {
+._success_105y0_64:hover {
   --button-bg: var(--success-color-200);
 }
-._success_d2nsp_54:active {
+._success_105y0_64:active {
   --button-bg: var(--success-color-300);
 }
-._warning_d2nsp_67 {
+._warning_105y0_77 {
   --button-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --button-color: var(--warning-color-800);
 }
-._warning_d2nsp_67:hover {
+._warning_105y0_77:hover {
   --button-bg: var(--warning-color-200);
 }
-._warning_d2nsp_67:active {
+._warning_105y0_77:active {
   --button-bg: var(--warning-color-300);
 }
-._danger_d2nsp_80 {
+._danger_105y0_90 {
   --button-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --button-color: var(--danger-color-800);
 }
-._danger_d2nsp_80:hover {
+._danger_105y0_90:hover {
   --button-bg: var(--danger-color-200);
 }
-._danger_d2nsp_80:active {
+._danger_105y0_90:active {
   --button-bg: var(--danger-color-300);
 }
-._info_d2nsp_93 {
+._info_105y0_103 {
   --button-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --button-color: var(--info-color-800);
 }
-._info_d2nsp_93:hover {
+._info_105y0_103:hover {
   --button-bg: var(--info-color-200);
 }
-._info_d2nsp_93:active {
+._info_105y0_103:active {
   --button-bg: var(--info-color-300);
 }
-._secondary_d2nsp_106 {
+._secondary_105y0_116 {
   --button-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
   --button-color: var(--secondary-color-800);
 }
-._secondary_d2nsp_106:hover {
+._secondary_105y0_116:hover {
   --button-bg: var(--secondary-color-200);
 }
-._secondary_d2nsp_106:active {
+._secondary_105y0_116:active {
   --button-bg: var(--secondary-color-300);
 }
 ._chamfer_1o5rm_1 {
@@ -200,7 +209,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1u4j4_1 {
+._card_et6fi_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -209,64 +218,70 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   display: flex;
   flex-direction: column;
 }
-._card_1u4j4_1 ._title_1u4j4_11 {
+._pageBackground_et6fi_11 {
+  --card-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+  --card-color: var(--body-color);
+  background-color: var(--body-bg);
+}
+._card_et6fi_1 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1u4j4_1 ._body_1u4j4_18 {
+._card_et6fi_1 ._body_et6fi_25 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1u4j4_1 ._footer_1u4j4_23 {
+._card_et6fi_1 ._footer_et6fi_30 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_1u4j4_30 ._body_1u4j4_18,
-._large_1u4j4_30 ._title_1u4j4_11 {
+._large_et6fi_37 ._body_et6fi_25,
+._large_et6fi_37 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1u4j4_36 ._body_1u4j4_18,
-._small_1u4j4_36 ._title_1u4j4_11 {
+._small_et6fi_43 ._body_et6fi_25,
+._small_et6fi_43 ._title_et6fi_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1u4j4_44 {
+._primary_et6fi_51 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_1u4j4_51 {
+._success_et6fi_58 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_1u4j4_58 {
+._warning_et6fi_65 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_1u4j4_65 {
+._danger_et6fi_72 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_1u4j4_72 {
+._info_et6fi_79 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_1u4j4_79 {
+._secondary_et6fi_86 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -423,7 +438,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._input_rojre_7 {
+._input_1ymvl_7 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -433,79 +448,92 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   border-color: var(--border-color);
   width: calc(100% + var(--border-thickness));
 }
-._input_rojre_7:hover {
+._input_1ymvl_7:hover {
   --input-bg: var(--secondary-color-100);
 }
-._input_rojre_7:focus {
+._input_1ymvl_7:focus {
   outline: none;
 }
-._large_rojre_24 {
+._pageBackground_1ymvl_24 {
+  --input-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+}
+._pageBackground_1ymvl_24:hover {
+  --input-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+}
+._pageBackground_1ymvl_24:focus,
+._pageBackground_1ymvl_24:focus-within {
+  --input-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+}
+._large_1ymvl_38 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_rojre_29 {
+._small_1ymvl_43 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_rojre_34 {
+._disabled_1ymvl_48 {
   opacity: 0.5;
   cursor: not-allowed;
 }
 /* Variants */
-._primary_rojre_41 {
+._primary_1ymvl_55 {
   --input-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
 }
-._primary_rojre_41:hover {
+._primary_1ymvl_55:hover {
   --input-bg: var(--primary-color-200);
 }
-._success_rojre_50 {
+._success_1ymvl_64 {
   --input-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
 }
-._success_rojre_50:hover {
+._success_1ymvl_64:hover {
   --input-bg: var(--success-color-200);
 }
-._warning_rojre_58 {
+._warning_1ymvl_72 {
   --input-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
 }
-._warning_rojre_58:hover {
+._warning_1ymvl_72:hover {
   --input-bg: var(--warning-color-200);
 }
-._danger_rojre_66 {
+._danger_1ymvl_80 {
   --input-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
 }
-._danger_rojre_66:hover {
+._danger_1ymvl_80:hover {
   --input-bg: var(--danger-color-200);
 }
-._info_rojre_74 {
+._info_1ymvl_88 {
   --input-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
 }
-._info_rojre_74:hover {
+._info_1ymvl_88:hover {
   --input-bg: var(--info-color-200);
 }
-._secondary_rojre_83 {
+._secondary_1ymvl_97 {
   --input-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
 }
-._secondary_rojre_83:hover {
+._secondary_1ymvl_97:hover {
   --input-bg: var(--secondary-color-200);
 }
-._field_rojre_92 {
+._field_1ymvl_106 {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-._label_rojre_98 {
+._label_1ymvl_112 {
 }
 @property --radio-hover-bg {
   syntax: "<color>";
@@ -980,8 +1008,46 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
-._hatch_zh2j3_1 {
+._hatch_lff0l_1 {
   padding: 0.5rem 1rem;
+  color: var(--hatch-color, inherit);
+  --button-bg: var(--bg, transparent);
+}
+._primary_lff0l_7 {
+  --bg: var(--primary-color-100);
+  --border-color: var(--primary-color-300);
+  --border-accent-color: var(--primary-color-600);
+  --hatch-color: var(--primary-color-800);
+}
+._success_lff0l_14 {
+  --bg: var(--success-color-100);
+  --border-color: var(--success-color-300);
+  --border-accent-color: var(--success-color-600);
+  --hatch-color: var(--success-color-800);
+}
+._warning_lff0l_21 {
+  --bg: var(--warning-color-100);
+  --border-color: var(--warning-color-300);
+  --border-accent-color: var(--warning-color-600);
+  --hatch-color: var(--warning-color-800);
+}
+._danger_lff0l_28 {
+  --bg: var(--danger-color-100);
+  --border-color: var(--danger-color-300);
+  --border-accent-color: var(--danger-color-600);
+  --hatch-color: var(--danger-color-800);
+}
+._info_lff0l_35 {
+  --bg: var(--info-color-100);
+  --border-color: var(--info-color-300);
+  --border-accent-color: var(--info-color-600);
+  --hatch-color: var(--info-color-800);
+}
+._secondary_lff0l_42 {
+  --bg: var(--secondary-color-100);
+  --border-color: var(--secondary-color-300);
+  --border-accent-color: var(--secondary-color-600);
+  --hatch-color: var(--secondary-color-800);
 }
 ._toastRoot_1iau9_1 {
   background-color: var(--button-bg) !important;
@@ -1846,27 +1912,29 @@ function clsx() {
   for (var e3, t4, f2 = 0, n2 = "", o2 = arguments.length; f2 < o2; f2++) (e3 = arguments[f2]) && (t4 = r(e3)) && (n2 && (n2 += " "), n2 += t4);
   return n2;
 }
-const button = "_button_d2nsp_7";
-const large$6 = "_large_d2nsp_24";
-const small$6 = "_small_d2nsp_29";
-const disabled$6 = "_disabled_d2nsp_34";
-const primary$7 = "_primary_d2nsp_41";
-const success$7 = "_success_d2nsp_54";
-const warning$7 = "_warning_d2nsp_67";
-const danger$7 = "_danger_d2nsp_80";
-const info$7 = "_info_d2nsp_93";
-const secondary$7 = "_secondary_d2nsp_106";
+const button = "_button_105y0_7";
+const pageBackground$2 = "_pageBackground_105y0_24";
+const large$6 = "_large_105y0_34";
+const small$6 = "_small_105y0_39";
+const disabled$6 = "_disabled_105y0_44";
+const primary$8 = "_primary_105y0_51";
+const success$8 = "_success_105y0_64";
+const warning$8 = "_warning_105y0_77";
+const danger$8 = "_danger_105y0_90";
+const info$8 = "_info_105y0_103";
+const secondary$8 = "_secondary_105y0_116";
 const styles$b = {
   button,
+  pageBackground: pageBackground$2,
   large: large$6,
   small: small$6,
   disabled: disabled$6,
-  primary: primary$7,
-  success: success$7,
-  warning: warning$7,
-  danger: danger$7,
-  info: info$7,
-  secondary: secondary$7
+  primary: primary$8,
+  success: success$8,
+  warning: warning$8,
+  danger: danger$8,
+  info: info$8,
+  secondary: secondary$8
 };
 const chamfer$1 = "_chamfer_1o5rm_1";
 const disabled$5 = "_disabled_1o5rm_15";
@@ -1906,6 +1974,7 @@ function Button({
     {
       className: clsx(
         styles$b.button,
+        !variant && styles$b.pageBackground,
         styles$b[variant],
         chamfer2 && chamferStyles.chamfer,
         size2 === "large" && styles$b.large,
@@ -2020,31 +2089,33 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_1u4j4_1";
-const title$1 = "_title_1u4j4_11";
-const body$1 = "_body_1u4j4_18";
-const footer$1 = "_footer_1u4j4_23";
-const large$5 = "_large_1u4j4_30";
-const small$5 = "_small_1u4j4_36";
-const primary$6 = "_primary_1u4j4_44";
-const success$6 = "_success_1u4j4_51";
-const warning$6 = "_warning_1u4j4_58";
-const danger$6 = "_danger_1u4j4_65";
-const info$6 = "_info_1u4j4_72";
-const secondary$6 = "_secondary_1u4j4_79";
+const card = "_card_et6fi_1";
+const pageBackground$1 = "_pageBackground_et6fi_11";
+const title$1 = "_title_et6fi_18";
+const body$1 = "_body_et6fi_25";
+const footer$1 = "_footer_et6fi_30";
+const large$5 = "_large_et6fi_37";
+const small$5 = "_small_et6fi_43";
+const primary$7 = "_primary_et6fi_51";
+const success$7 = "_success_et6fi_58";
+const warning$7 = "_warning_et6fi_65";
+const danger$7 = "_danger_et6fi_72";
+const info$7 = "_info_et6fi_79";
+const secondary$7 = "_secondary_et6fi_86";
 const styles$9 = {
   card,
+  pageBackground: pageBackground$1,
   title: title$1,
   body: body$1,
   footer: footer$1,
   large: large$5,
   small: small$5,
-  primary: primary$6,
-  success: success$6,
-  warning: warning$6,
-  danger: danger$6,
-  info: info$6,
-  secondary: secondary$6
+  primary: primary$7,
+  success: success$7,
+  warning: warning$7,
+  danger: danger$7,
+  info: info$7,
+  secondary: secondary$7
 };
 function Card({
   children: children2,
@@ -2062,6 +2133,7 @@ function Card({
     {
       className: classNames(
         styles$9.card,
+        !variant && styles$9.pageBackground,
         styles$9[variant],
         chamfer2 && chamferStyles.chamfer,
         size2 === "large" && styles$9.large,
@@ -2812,12 +2884,12 @@ const large$4 = "_large_178xv_94";
 const small$4 = "_small_178xv_99";
 const disabledBox = "_disabledBox_178xv_104";
 const label$2 = "_label_178xv_109";
-const primary$5 = "_primary_178xv_117";
-const secondary$5 = "_secondary_178xv_126";
-const success$5 = "_success_178xv_135";
-const warning$5 = "_warning_178xv_144";
-const danger$5 = "_danger_178xv_153";
-const info$5 = "_info_178xv_162";
+const primary$6 = "_primary_178xv_117";
+const secondary$6 = "_secondary_178xv_126";
+const success$6 = "_success_178xv_135";
+const warning$6 = "_warning_178xv_144";
+const danger$6 = "_danger_178xv_153";
+const info$6 = "_info_178xv_162";
 const styles$8 = {
   wrapper: wrapper$1,
   disabled: disabled$4,
@@ -2827,12 +2899,12 @@ const styles$8 = {
   small: small$4,
   disabledBox,
   label: label$2,
-  primary: primary$5,
-  secondary: secondary$5,
-  success: success$5,
-  warning: warning$5,
-  danger: danger$5,
-  info: info$5
+  primary: primary$6,
+  secondary: secondary$6,
+  success: success$6,
+  warning: warning$6,
+  danger: danger$6,
+  info: info$6
 };
 const CheckIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", role: "presentation", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
   "polyline",
@@ -19122,29 +19194,31 @@ const RadarChart = ({
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ObservablePlot, { options, className, style });
 };
-const input = "_input_rojre_7";
-const large$3 = "_large_rojre_24";
-const small$3 = "_small_rojre_29";
-const disabled$3 = "_disabled_rojre_34";
-const primary$4 = "_primary_rojre_41";
-const success$4 = "_success_rojre_50";
-const warning$4 = "_warning_rojre_58";
-const danger$4 = "_danger_rojre_66";
-const info$4 = "_info_rojre_74";
-const secondary$4 = "_secondary_rojre_83";
-const field = "_field_rojre_92";
-const label$1 = "_label_rojre_98";
+const input = "_input_1ymvl_7";
+const pageBackground = "_pageBackground_1ymvl_24";
+const large$3 = "_large_1ymvl_38";
+const small$3 = "_small_1ymvl_43";
+const disabled$3 = "_disabled_1ymvl_48";
+const primary$5 = "_primary_1ymvl_55";
+const success$5 = "_success_1ymvl_64";
+const warning$5 = "_warning_1ymvl_72";
+const danger$5 = "_danger_1ymvl_80";
+const info$5 = "_info_1ymvl_88";
+const secondary$5 = "_secondary_1ymvl_97";
+const field = "_field_1ymvl_106";
+const label$1 = "_label_1ymvl_112";
 const styles$6 = {
   input,
+  pageBackground,
   large: large$3,
   small: small$3,
   disabled: disabled$3,
-  primary: primary$4,
-  success: success$4,
-  warning: warning$4,
-  danger: danger$4,
-  info: info$4,
-  secondary: secondary$4,
+  primary: primary$5,
+  success: success$5,
+  warning: warning$5,
+  danger: danger$5,
+  info: info$5,
+  secondary: secondary$5,
   field,
   label: label$1
 };
@@ -19164,6 +19238,7 @@ function Input({
       {
         className: classNames(
           chamfer2 && chamferStyles.chamfer,
+          !variant && styles$6.pageBackground,
           styles$6[variant]
         ),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19172,6 +19247,7 @@ function Input({
             id: inputId,
             className: classNames(
               styles$6.input,
+              !variant && styles$6.pageBackground,
               styles$6[variant],
               size2 === "large" && styles$6.large,
               size2 === "small" && styles$6.small,
@@ -19761,12 +19837,12 @@ const small$2 = "_small_hpxu6_93";
 const disabledDot = "_disabledDot_hpxu6_98";
 const label = "_label_hpxu6_102";
 const chamfer = "_chamfer_hpxu6_107";
-const primary$3 = "_primary_hpxu6_112";
-const secondary$3 = "_secondary_hpxu6_121";
-const success$3 = "_success_hpxu6_130";
-const warning$3 = "_warning_hpxu6_139";
-const danger$3 = "_danger_hpxu6_148";
-const info$3 = "_info_hpxu6_157";
+const primary$4 = "_primary_hpxu6_112";
+const secondary$4 = "_secondary_hpxu6_121";
+const success$4 = "_success_hpxu6_130";
+const warning$4 = "_warning_hpxu6_139";
+const danger$4 = "_danger_hpxu6_148";
+const info$4 = "_info_hpxu6_157";
 const styles$5 = {
   group,
   wrapper,
@@ -19779,12 +19855,12 @@ const styles$5 = {
   disabledDot,
   label,
   chamfer,
-  primary: primary$3,
-  secondary: secondary$3,
-  success: success$3,
-  warning: warning$3,
-  danger: danger$3,
-  info: info$3
+  primary: primary$4,
+  secondary: secondary$4,
+  success: success$4,
+  warning: warning$4,
+  danger: danger$4,
+  info: info$4
 };
 const RadioGroup$1 = ({ className, children: children2, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   Root2$3,
@@ -24384,12 +24460,12 @@ const disabled$1 = "_disabled_1u214_41";
 const icon$1 = "_icon_1u214_46";
 const content$3 = "_content_1u214_52";
 const item$1 = "_item_1u214_57";
-const primary$2 = "_primary_1u214_79";
-const success$2 = "_success_1u214_89";
-const warning$2 = "_warning_1u214_99";
-const danger$2 = "_danger_1u214_109";
-const info$2 = "_info_1u214_119";
-const secondary$2 = "_secondary_1u214_129";
+const primary$3 = "_primary_1u214_79";
+const success$3 = "_success_1u214_89";
+const warning$3 = "_warning_1u214_99";
+const danger$3 = "_danger_1u214_109";
+const info$3 = "_info_1u214_119";
+const secondary$3 = "_secondary_1u214_129";
 const styles$4 = {
   trigger: trigger$1,
   large: large$1,
@@ -24398,12 +24474,12 @@ const styles$4 = {
   icon: icon$1,
   content: content$3,
   item: item$1,
-  primary: primary$2,
-  success: success$2,
-  warning: warning$2,
-  danger: danger$2,
-  info: info$2,
-  secondary: secondary$2
+  primary: primary$3,
+  success: success$3,
+  warning: warning$3,
+  danger: danger$3,
+  info: info$3,
+  secondary: secondary$3
 };
 function SelectInput({
   options,
@@ -25492,12 +25568,12 @@ const itemLabel = "_itemLabel_12pwu_120";
 const itemIcon = "_itemIcon_12pwu_124";
 const separator = "_separator_12pwu_136";
 const arrow = "_arrow_12pwu_141";
-const primary$1 = "_primary_12pwu_148";
-const success$1 = "_success_12pwu_159";
-const warning$1 = "_warning_12pwu_170";
-const danger$1 = "_danger_12pwu_181";
-const info$1 = "_info_12pwu_192";
-const secondary$1 = "_secondary_12pwu_203";
+const primary$2 = "_primary_12pwu_148";
+const success$2 = "_success_12pwu_159";
+const warning$2 = "_warning_12pwu_170";
+const danger$2 = "_danger_12pwu_181";
+const info$2 = "_info_12pwu_192";
+const secondary$2 = "_secondary_12pwu_203";
 const styles$3 = {
   trigger,
   large,
@@ -25515,12 +25591,12 @@ const styles$3 = {
   itemIcon,
   separator,
   arrow,
-  primary: primary$1,
-  success: success$1,
-  warning: warning$1,
-  danger: danger$1,
-  info: info$1,
-  secondary: secondary$1
+  primary: primary$2,
+  success: success$2,
+  warning: warning$2,
+  danger: danger$2,
+  info: info$2,
+  secondary: secondary$2
 };
 function Dropdown({
   items = [],
@@ -25611,16 +25687,29 @@ function Dropdown({
     ) })
   ] });
 }
-const hatch = "_hatch_zh2j3_1";
+const hatch = "_hatch_lff0l_1";
+const primary$1 = "_primary_lff0l_7";
+const success$1 = "_success_lff0l_14";
+const warning$1 = "_warning_lff0l_21";
+const danger$1 = "_danger_lff0l_28";
+const info$1 = "_info_lff0l_35";
+const secondary$1 = "_secondary_lff0l_42";
 const styles$2 = {
-  hatch
+  hatch,
+  primary: primary$1,
+  success: success$1,
+  warning: warning$1,
+  danger: danger$1,
+  info: info$1,
+  secondary: secondary$1
 };
-function Hatch({ children: children2, className, ...props }) {
+function Hatch({ children: children2, className, variant, ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       className: classNames(
         styles$2.hatch,
+        styles$2[variant],
         hatchStyles.hatch,
         chamferStyles.chamfer,
         className