@jackcrane/ui 0.1.4 → 0.1.7

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 {
@@ -423,7 +432,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 +442,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,6 +1002,47 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
+._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;
   border: var(--border-thickness) solid var(--border-color);
@@ -1843,27 +1906,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 styles$a = {
+const button = "_button_105y0_7";
+const pageBackground$1 = "_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$1,
   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";
@@ -1873,9 +1938,9 @@ const chamferStyles = {
   disabled: disabled$5,
   chamferOnHover
 };
-const hatch = "_hatch_owfoz_1";
+const hatch$1 = "_hatch_owfoz_1";
 const hatchStyles = {
-  hatch
+  hatch: hatch$1
 };
 const DEFAULT_THEME = "light";
 const ThemeContext = createContext$1({
@@ -1885,10 +1950,10 @@ const ThemeContext = createContext$1({
 });
 const useJCUITheme = () => useContext(ThemeContext);
 const loader = "_loader_1y0fe_1";
-const styles$9 = {
+const styles$a = {
   loader
 };
-const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$9.loader, ...props });
+const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$a.loader, ...props });
 function Button({
   children: children2,
   variant,
@@ -1902,14 +1967,15 @@ function Button({
     "button",
     {
       className: clsx(
-        styles$a.button,
-        styles$a[variant],
+        styles$b.button,
+        !variant && styles$b.pageBackground,
+        styles$b[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$a.large,
-        size2 === "small" && styles$a.small,
+        size2 === "large" && styles$b.large,
+        size2 === "small" && styles$b.small,
         disabled2 && chamferStyles.disabled,
         disabled2 && hatchStyles.hatch,
-        disabled2 && styles$a.disabled
+        disabled2 && styles$b.disabled
       ),
       disabled: disabled2,
       ...props,
@@ -2023,25 +2089,25 @@ 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 styles$8 = {
+const primary$7 = "_primary_1u4j4_44";
+const success$7 = "_success_1u4j4_51";
+const warning$7 = "_warning_1u4j4_58";
+const danger$7 = "_danger_1u4j4_65";
+const info$7 = "_info_1u4j4_72";
+const secondary$7 = "_secondary_1u4j4_79";
+const styles$9 = {
   card,
   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,
@@ -2058,20 +2124,20 @@ function Card({
     "div",
     {
       className: classNames(
-        styles$8.card,
-        styles$8[variant],
+        styles$9.card,
+        styles$9[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$8.large,
-        size2 === "small" && styles$8.small
+        size2 === "large" && styles$9.large,
+        size2 === "small" && styles$9.small
       ),
       ...props,
       children: [
-        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$8.title, hatchStyles.hatch), children: title2 }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$8.body, children: children2 }),
+        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$9.title, hatchStyles.hatch), children: title2 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$9.body, children: children2 }),
         footerHeight > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: classNames(hatchStyles.hatch, styles$8.footer),
+            className: classNames(hatchStyles.hatch, styles$9.footer),
             style: { flexBasis: footerHeight },
             children: footer2
           }
@@ -2809,13 +2875,13 @@ 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 styles$7 = {
+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,
   root: root$2,
@@ -2824,12 +2890,12 @@ const styles$7 = {
   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",
@@ -2852,32 +2918,32 @@ function Checkbox({
   ...props
 }) {
   const labelContent = label2 ?? children2;
-  const variantClass = variant && styles$7[variant];
-  const sizeClass = size2 === "large" ? styles$7.large : size2 === "small" ? styles$7.small : null;
+  const variantClass = variant && styles$8[variant];
+  const sizeClass = size2 === "large" ? styles$8.large : size2 === "small" ? styles$8.small : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
-      className: clsx(styles$7.wrapper, variantClass, disabled2 && styles$7.disabled),
+      className: clsx(styles$8.wrapper, variantClass, disabled2 && styles$8.disabled),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Checkbox$1,
           {
             className: clsx(
-              styles$7.root,
+              styles$8.root,
               variantClass,
               sizeClass,
               chamfer2 && chamferStyles.chamfer,
               disabled2 && chamferStyles.disabled,
               disabled2 && hatchStyles.hatch,
-              disabled2 && styles$7.disabledBox,
+              disabled2 && styles$8.disabledBox,
               className
             ),
             disabled: disabled2,
             ...props,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$7.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$8.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
           }
         ),
-        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$7.label, children: labelContent })
+        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$8.label, children: labelContent })
       ]
     }
   );
@@ -13727,7 +13793,7 @@ let nextClipId = 0;
 function getClipId() {
   return `plot-clip-${++nextClipId}`;
 }
-function styles$6(mark, {
+function styles$7(mark, {
   title: title2,
   href,
   ariaLabel: variaLabel,
@@ -14093,7 +14159,7 @@ class Mark {
     this.facetAnchor = maybeFacetAnchor(facetAnchor);
     channels = maybeNamed(channels);
     if (extraChannels !== void 0) channels = { ...maybeChannels(extraChannels), ...channels };
-    if (defaults2 !== void 0) channels = { ...styles$6(this, options, defaults2), ...channels };
+    if (defaults2 !== void 0) channels = { ...styles$7(this, options, defaults2), ...channels };
     this.channels = Object.fromEntries(
       Object.entries(channels).map(([name, channel]) => {
         if (isOptions(channel.value)) {
@@ -19119,29 +19185,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 styles$5 = {
+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
 };
@@ -19154,26 +19222,28 @@ function Input({
   ...props
 }) {
   const inputId = useId$1();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.field, children: [
-    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$5.label, htmlFor: inputId, children: label2 }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.field, children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$6.label, htmlFor: inputId, children: label2 }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         className: classNames(
           chamfer2 && chamferStyles.chamfer,
-          styles$5[variant]
+          !variant && styles$6.pageBackground,
+          styles$6[variant]
         ),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
             id: inputId,
             className: classNames(
-              styles$5.input,
-              styles$5[variant],
-              size2 === "large" && styles$5.large,
-              size2 === "small" && styles$5.small,
+              styles$6.input,
+              !variant && styles$6.pageBackground,
+              styles$6[variant],
+              size2 === "large" && styles$6.large,
+              size2 === "small" && styles$6.small,
               disabled2 && chamferStyles.disabled,
-              disabled2 && styles$5.disabled,
+              disabled2 && styles$6.disabled,
               disabled2 && hatchStyles.hatch
             ),
             disabled: disabled2,
@@ -19758,13 +19828,13 @@ 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 styles$4 = {
+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,
   disabled: disabled$2,
@@ -19776,17 +19846,17 @@ const styles$4 = {
   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,
   {
-    className: clsx(styles$4.group, className),
+    className: clsx(styles$5.group, className),
     ...props,
     children: children2
   }
@@ -19801,33 +19871,33 @@ function Radio({
   className,
   ...props
 }) {
-  const variantClass = variant && styles$4[variant];
-  const sizeClass = size2 === "large" ? styles$4.large : size2 === "small" ? styles$4.small : null;
+  const variantClass = variant && styles$5[variant];
+  const sizeClass = size2 === "large" ? styles$5.large : size2 === "small" ? styles$5.small : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
-      className: clsx(styles$4.wrapper, variantClass, disabled2 && styles$4.disabled),
+      className: clsx(styles$5.wrapper, variantClass, disabled2 && styles$5.disabled),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Item2$2,
           {
             className: clsx(
-              styles$4.root,
+              styles$5.root,
               variantClass,
               sizeClass,
               chamfer2 && chamferStyles.chamfer,
               disabled2 && chamferStyles.disabled,
               disabled2 && hatchStyles.hatch,
-              disabled2 && styles$4.disabledDot,
+              disabled2 && styles$5.disabledDot,
               className
             ),
             value,
             disabled: disabled2,
             ...props,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Indicator, { className: styles$4.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.dot }) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Indicator, { className: styles$5.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.dot }) })
           }
         ),
-        label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.label, children: label2 })
+        label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.label, children: label2 })
       ]
     }
   );
@@ -24381,13 +24451,13 @@ 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 styles$3 = {
+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,
   small: small$1,
@@ -24395,12 +24465,12 @@ const styles$3 = {
   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,
@@ -24423,18 +24493,18 @@ function SelectInput({
           Trigger$2,
           {
             className: clsx(
-              styles$3.trigger,
-              styles$3[variant],
+              styles$4.trigger,
+              styles$4[variant],
               chamfer2 && chamferStyles.chamfer,
-              size2 === "large" && styles$3.large,
-              size2 === "small" && styles$3.small,
-              disabled2 && styles$3.disabled,
+              size2 === "large" && styles$4.large,
+              size2 === "small" && styles$4.small,
+              disabled2 && styles$4.disabled,
               disabled2 && hatchStyles.hatch
               // loading && styles.disabled
             ),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Value, {}),
-              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$3.icon, children: "▾" })
+              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$4.icon, children: "▾" })
             ]
           }
         ),
@@ -24442,7 +24512,7 @@ function SelectInput({
           Content2$2,
           {
             className: classNames(
-              styles$3.content,
+              styles$4.content,
               chamfer2 && chamferStyles.chamfer
             ),
             sideOffset: 6,
@@ -24451,7 +24521,7 @@ function SelectInput({
               {
                 value: opt.value,
                 disabled: opt.disabled,
-                className: styles$3.item,
+                className: styles$4.item,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children: opt.label })
               },
               opt.value
@@ -25489,13 +25559,13 @@ 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 styles$2 = {
+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,
   small,
@@ -25512,12 +25582,12 @@ const styles$2 = {
   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 = [],
@@ -25538,18 +25608,18 @@ function Dropdown({
   ...props
 }) {
   const triggerClassName = clsx(
-    styles$2.trigger,
-    variant && styles$2[variant],
+    styles$3.trigger,
+    variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer,
-    size2 === "large" && styles$2.large,
-    size2 === "small" && styles$2.small,
-    disabled2 && styles$2.disabled,
+    size2 === "large" && styles$3.large,
+    size2 === "small" && styles$3.small,
+    disabled2 && styles$3.disabled,
     disabled2 && hatchStyles.hatch,
     _triggerClassName
   );
   const contentClassName = clsx(
-    styles$2.content,
-    variant && styles$2[variant],
+    styles$3.content,
+    variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer
   );
   const handleItemSelect = (item2) => {
@@ -25578,13 +25648,13 @@ function Dropdown({
         side,
         sideOffset: 0,
         ...contentProps,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.viewport, children: items.map((item2, index2) => {
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.viewport, children: items.map((item2, index2) => {
           if (item2.type === "separator") {
             const separatorKey = item2.key ?? `separator-${index2}`;
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               Separator2,
               {
-                className: styles$2.separator
+                className: styles$3.separator
               },
               separatorKey
             );
@@ -25595,10 +25665,10 @@ function Dropdown({
             {
               onSelect: () => handleItemSelect(item2),
               disabled: item2.disabled,
-              className: styles$2.item,
+              className: styles$3.item,
               children: [
-                item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.itemIcon, "aria-hidden": true, children: item2.icon }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.itemLabel, children: item2.label })
+                item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemIcon, "aria-hidden": true, children: item2.icon }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemLabel, children: item2.label })
               ]
             },
             itemKey
@@ -25608,6 +25678,38 @@ function Dropdown({
     ) })
   ] });
 }
+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,
+  primary: primary$1,
+  success: success$1,
+  warning: warning$1,
+  danger: danger$1,
+  info: info$1,
+  secondary: secondary$1
+};
+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
+      ),
+      ...props,
+      children: children2
+    }
+  );
+}
 let e = { data: "" }, t = (t4) => {
   if ("object" == typeof window) {
     let e3 = (t4 ? t4.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), { innerHTML: " ", id: "_goober" });
@@ -26772,6 +26874,7 @@ export {
   Checkbox,
   ColorSwitcher,
   Dropdown,
+  Hatch,
   Input,
   JCUIProvider,
   Layout,