jbx 2.3.0 → 2.5.0

package/{style.css → dist/main.css}

@@ -1,33 +1,32 @@
 html {
   box-sizing: border-box;
 }
-*,
-*:before,
-*:after {
+
+*, :before, :after {
   box-sizing: inherit;
 }
 
 :root {
   --size: 16px;
-  --base-font-size: 24px;
+  --base-font-size: 20px;
   --base-radius: #95a5a6;
 }
 
 @media screen and (max-width: 1200px) {
   :root {
-    --base-font-size: 21px;
+    --base-font-size: 18px;
   }
 }
 
 @media screen and (max-width: 600px) {
   :root {
-    --base-font-size: 18px;
+    --base-font-size: 16px;
   }
 }
 
 * {
-  padding: 0;
   margin: 0;
+  padding: 0;
   position: relative;
 }
 
@@ -35,232 +34,223 @@ body {
   touch-action: pan-y;
 }
 
-body,
-input,
-textarea {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+body, input, textarea {
+  font-family: colfax-web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
 }
 
 body {
-  background: #fcfcfd;
   color: #000;
+  background: #fcfcfd;
 }
 
-/* base text */
-html,
-body,
-.jbx-button,
-.jbx-input {
+html, body, .jbx-button, .jbx-input {
   font-size: var(--base-font-size);
   line-height: 1;
 }
 
 .jbx-code-snippet {
   border-radius: var(--size);
-  font-family: monaco, monospace;
-  border: none;
   width: 100%;
-  font-size: calc(var(--size) - 3px);
-  line-height: 1.33;
+  font-family: monaco, monospace;
+  font-size: calc(var(--size)  - 3px);
   padding: var(--size) calc(var(--size) * 1.2);
-  background: #ecf0f1;
   color: #34495e;
   resize: none;
+  background: #ecf0f1;
+  border: none;
+  line-height: 1.33;
 }
+
 .jbx-code-snippet:focus {
   outline: none;
 }
 
 .jbx-code-area {
   border-radius: var(--size);
-  font-family: monaco, monospace;
-  border: none;
   width: 100%;
-  font-size: calc(var(--size) - 3px);
-  line-height: 1.33;
+  font-family: monaco, monospace;
+  font-size: calc(var(--size)  - 3px);
   padding: var(--size) calc(var(--size) * 1.2);
-  background: #ecf0f1;
   color: #34495e;
   resize: none;
   min-height: 120px;
+  background: #ecf0f1;
+  border: none;
+  line-height: 1.33;
 }
+
 .jbx-code-area:focus {
   outline: none;
 }
 
 .jbx-button {
   appearance: none;
+  -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
-  display: inline-block;
-  background-color: #eee;
-  box-shadow: 3px 3px 0 #ccc;
   padding: 0 calc(var(--size) / 2);
-  border: none;
   height: calc(var(--size) * 2.5);
+  background-color: #eee;
+  border: none;
+  display: inline-block;
+  box-shadow: 3px 3px #ccc;
 }
+
 .jbx-button:active {
-  top: 1;
-  left: 1;
-  box-shadow: 2px 2px 0 #ccc;
+  top: 1px;
+  left: 1px;
+  box-shadow: 2px 2px #ccc;
 }
 
 .jbx-a {
   color: #000;
-  box-shadow: var(--accent-color) 0 2px 0, inset var(--accent-color) 0 -2px 0;
-  font-weight: 700;
+  box-shadow: var(--accent-color) 0 1px 0, inset var(--accent-color) 0 -2px 0;
+  font-weight: 500;
   text-decoration: none;
 }
+
 .jbx-a:hover {
-  color: '#34495e';
+  color: "#34495e";
 }
 
-.jbx-h1,
-.jbx-h2,
-.jbx-h3,
-.jbx-h4 {
-  line-height: 1;
-  padding: 0;
+.jbx-h1, .jbx-h2, .jbx-h3, .jbx-h4 {
   margin: 0;
-  font-weight: 600;
+  padding: 0;
+  font-weight: 500;
+  line-height: 1;
 }
 
 .jbx-h4 {
   font-size: calc(var(--base-font-size));
-  letter-spacing: -0.11px;
+  letter-spacing: -.11px;
 }
+
 .jbx-h3 {
   font-size: calc(var(--base-font-size) * 1.25);
-  letter-spacing: -0.22px;
+  letter-spacing: -.22px;
 }
+
 .jbx-h2 {
   font-size: calc(var(--base-font-size) * 1.5);
-  letter-spacing: -0.33px;
+  letter-spacing: -.33px;
 }
+
 .jbx-h1 {
   font-size: calc(var(--base-font-size) * 2.5);
   letter-spacing: -1px;
 }
 
 .jbx-small-text {
-  font-size: calc(var(--base-font-size) * 0.8);
-  line-height: calc(var(--base-font-size) * 0.6);
+  font-size: calc(var(--base-font-size) * .8);
+  line-height: calc(var(--base-font-size) * .6);
 }
 
 .jbx-container {
   max-width: 1080px;
-  margin: 0 auto;
   padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);
+  margin: 0 auto;
+}
+
+.jbx-box {
+  flex: 1;
 }
 
 .jbx-inline {
+  flex-flow: wrap;
   flex: 1;
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
 }
 
 .jbx-stack {
+  flex-flow: column wrap;
   flex: 1;
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
 }
 
 .jbx-input {
   color: #777;
   -webkit-text-fill-color: #777;
   opacity: 1;
-  flex: 1;
-  display: block;
   appearance: none;
-  border: none;
-  border-radius: 0;
   height: calc(var(--size) * 2.5);
+  padding: 0 calc(var(--size) * .5);
   background-color: #eee;
-  padding: 0 calc(var(--size) * 0.5);
-  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
+  border: none;
+  border-radius: 0;
+  flex: 1;
+  display: block;
+  box-shadow: inset 3px 3px #0000000a, inset .5px .5px #00000008;
 }
 
 .jbx-dropzone {
   height: 120px;
-  flex: 1;
   max-width: 320px;
-  display: flex;
   text-align: center;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-  flex-direction: column;
-  border: 2px dashed #000;
   color: #000;
-  padding: 0;
   cursor: pointer;
+  border: 2px dashed #000;
+  flex-direction: column;
+  flex: 1;
+  place-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
 }
+
 .jbx-dropzone:hover {
   border-color: #999;
 }
+
 .jbx-dropzone span {
   width: 100%;
   cursor: pointer;
 }
+
 .jbx-dropzone input {
-  position: absolute;
-  top: 0;
-  left: 0;
   height: 100%;
   width: 100%;
   opacity: 0;
   cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-/*export const Dropzone = Styled.div({
-
-
-
-  },
-  '& input': {
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    height: '100%',
-    width: '100%',
-    opacity: '0',
-    cursor: 'pointer'
-  }
-});*/
-
 .jbx-range {
-  flex: 1;
   width: 100%;
   appearance: none;
   background-color: var(--accent-color);
   height: var(--size);
   border-radius: 0;
+  flex: 1;
 }
 
 .jbx-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
   appearance: none;
   box-shadow: none;
-  border-radius: 0;
   height: calc(var(--size) * 2);
   width: var(--size);
   background-color: #000;
   border: none;
+  border-radius: 0;
 }
+
 .jbx-range::-moz-range-thumb {
   appearance: none;
   box-shadow: none;
-  border-radius: 0;
   height: calc(var(--size) * 2);
   width: var(--size);
   background-color: #000;
   border: none;
+  border-radius: 0;
 }
+
 .jbx-range::-webkit-slider-runnable-track {
   appearance: none;
 }
+
 .jbx-range:focus {
   outline: none;
 }
+
+/*# sourceMappingURL=main.css.map */

package/dist/main.css.map

@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;AAGA;;;;AAMA;;;;;;AAMA;EACE;;;;;AAKF;EACE;;;;;AAKF;;;;;;AAMA;;;;AAIA;;;;AAMA;;;;;AAMA;;;;;AAQA;;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;;;;;;;;;AAaA;;;;AAIA;;;;;;;;;;;;;AAWA;;;;;;AAMA;;;;;;;AAMA;;;;AAIA;;;;;;;AAUA;;;;;AAIA;;;;;AAIA;;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;AAIA;;;;;;AAOA;;;;;;AAOA;;;;;;;;;;;;;;;AAeA;;;;;;;;;;;;;;;AAeA;;;;AAGA;;;;;AAIA;;;;;;;;;;AA0BA;;;;;;;;;AASA;;;;;;;;;;AAUA;;;;;;;;;;AASA;;;;AAGA","sources":["src/style.css"],"sourcesContent":["html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\n:root {\n  --size: 16px;\n  --base-font-size: 20px;\n  --base-radius: #95a5a6;\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --base-font-size: 18px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --base-font-size: 16px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody {\n  touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea {\n  font-family: colfax-web, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fcfcfd;\n  color: #000;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--base-font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: calc(var(--size) * 2.5);\n}\n.jbx-button:active {\n  top: 1;\n  left: 1;\n  box-shadow: 2px 2px 0 #ccc;\n}\n\n.jbx-a {\n  color: #000;\n  box-shadow: var(--accent-color) 0 1px 0, inset var(--accent-color) 0 -2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a:hover {\n  color: '#34495e';\n}\n\n.jbx-h1,\n.jbx-h2,\n.jbx-h3,\n.jbx-h4 {\n  line-height: 1;\n  padding: 0;\n  margin: 0;\n  font-weight: 500;\n}\n\n.jbx-h4 {\n  font-size: calc(var(--base-font-size));\n  letter-spacing: -0.11px;\n}\n.jbx-h3 {\n  font-size: calc(var(--base-font-size) * 1.25);\n  letter-spacing: -0.22px;\n}\n.jbx-h2 {\n  font-size: calc(var(--base-font-size) * 1.5);\n  letter-spacing: -0.33px;\n}\n.jbx-h1 {\n  font-size: calc(var(--base-font-size) * 2.5);\n  letter-spacing: -1px;\n}\n\n.jbx-small-text {\n  font-size: calc(var(--base-font-size) * 0.8);\n  line-height: calc(var(--base-font-size) * 0.6);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2.5);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  max-width: 320px;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/*export const Dropzone = Styled.div({\n\n\n\n  },\n  '& input': {\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    height: '100%',\n    width: '100%',\n    opacity: '0',\n    cursor: 'pointer'\n  }\n});*/\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: var(--accent-color);\n  height: var(--size);\n  border-radius: 0;\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n}\n.jbx-range:focus {\n  outline: none;\n}\n"],"names":[],"version":3,"file":"main.css.map"}

package/dist/main.js

@@ -0,0 +1,238 @@
+require("./main.css");
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "Component", () => $4fa36e821943b400$export$16fa2f45be04daa8);
+$parcel$export(module.exports, "Container", () => $4fa36e821943b400$export$42a852a2b6b56249);
+$parcel$export(module.exports, "Text", () => $4fa36e821943b400$export$5f1af8db9871e1d6);
+$parcel$export(module.exports, "SmallText", () => $4fa36e821943b400$export$9ce5373cfda0847e);
+$parcel$export(module.exports, "Button", () => $4fa36e821943b400$export$353f5b6fc5456de1);
+$parcel$export(module.exports, "Input", () => $4fa36e821943b400$export$f5b8910cec6cf069);
+$parcel$export(module.exports, "Range", () => $4fa36e821943b400$export$9a58ef0d7ad3278c);
+$parcel$export(module.exports, "HeaderH1", () => $4fa36e821943b400$export$e9eb1f4e2b79092);
+$parcel$export(module.exports, "HeaderH2", () => $4fa36e821943b400$export$3e3dae747fbae41f);
+$parcel$export(module.exports, "HeaderH3", () => $4fa36e821943b400$export$e52c1faf70c6ff56);
+$parcel$export(module.exports, "HeaderH4", () => $4fa36e821943b400$export$c50e3d1cd45af697);
+$parcel$export(module.exports, "MainHeader", () => $4fa36e821943b400$export$5f0b2c5569a35f91);
+$parcel$export(module.exports, "A", () => $4fa36e821943b400$export$ebd11618f299a286);
+$parcel$export(module.exports, "Space", () => $4fa36e821943b400$export$eef1e68107c58ef2);
+$parcel$export(module.exports, "Box", () => $4fa36e821943b400$export$e71c4d32a2263218);
+$parcel$export(module.exports, "Inline", () => $4fa36e821943b400$export$fbae5b5ffd8af05e);
+$parcel$export(module.exports, "Stack", () => $4fa36e821943b400$export$694e0d28c7ffc90c);
+$parcel$export(module.exports, "Dropzone", () => $4fa36e821943b400$export$47d4850b9fdf5af1);
+$parcel$export(module.exports, "Ul", () => $4fa36e821943b400$export$d4f99c77eeffeaea);
+$parcel$export(module.exports, "Li", () => $4fa36e821943b400$export$4de39c9f3329bb96);
+$parcel$export(module.exports, "Tabs", () => $4fa36e821943b400$export$b2539bed5023c21c);
+$parcel$export(module.exports, "Tab", () => $4fa36e821943b400$export$3e41faf802a29e71);
+$parcel$export(module.exports, "CodeSnippet", () => $4fa36e821943b400$export$9066f76bf3f31022);
+$parcel$export(module.exports, "CodeTextarea", () => $4fa36e821943b400$export$aff08200ba616f1d);
+$parcel$export(module.exports, "CheckboxHidden", () => $4fa36e821943b400$export$c5006b4f540f347f);
+$parcel$export(module.exports, "Checkbox", () => $4fa36e821943b400$export$48513f6b9f8ce62d);
+$parcel$export(module.exports, "MoreExperiments", () => $c98d1f0237f3fe00$export$2e2bcd8739ae039);
+
+var $03dcc08a47452624$exports = {};
+$03dcc08a47452624$exports = react;
+
+
+
+
+function $c98d1f0237f3fe00$var$MoreExperiments() {
+    return /*#__PURE__*/ React.createElement((0, $03dcc08a47452624$exports.Fragment), null, /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$5f1af8db9871e1d6), null, "More experiments"), /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$eef1e68107c58ef2), {
+        h: 0.5
+    }), /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$5f1af8db9871e1d6), null, /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$d4f99c77eeffeaea), null, /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$4de39c9f3329bb96), null, /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$ebd11618f299a286), {
+        href: "https://javier.xyz/pintr/"
+    }, "PINTR"), ", tool that turns your images into plotter-like line drawings."), /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$4de39c9f3329bb96), null, /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$ebd11618f299a286), {
+        href: "https://javier.xyz/img2css/"
+    }, "img2css"), ", tool that can convert any image into a pure css image."), /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$4de39c9f3329bb96), null, /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$ebd11618f299a286), {
+        href: "https://javier.xyz/visual-center/"
+    }, "Visual Center"), ", find the visual center of your images / logos."), /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$4de39c9f3329bb96), null, /*#__PURE__*/ React.createElement((0, $4fa36e821943b400$export$ebd11618f299a286), {
+        href: "https://clashjs.com/"
+    }, "ClashJS"), ", JS AI Battle Game."))));
+}
+var $c98d1f0237f3fe00$export$2e2bcd8739ae039 = $c98d1f0237f3fe00$var$MoreExperiments;
+
+
+const $4fa36e821943b400$var$SIZE = window.innerWidth > 1280 ? 16 : window.innerWidth > 640 ? 14 : 12;
+const $4fa36e821943b400$var$BASE_RADIUS = $4fa36e821943b400$var$SIZE / 3;
+const $4fa36e821943b400$var$BASE_FONT_SIZE = $4fa36e821943b400$var$SIZE;
+function $4fa36e821943b400$export$16fa2f45be04daa8(className, styleSrc = {}, config = {}) {
+    const { element: element = `div` , styleProps: styleProps  } = config;
+    return function MakeComponent({ children: children , style: style = {} , ...props }) {
+        const passProps = styleProps ? Object.keys(props).filter((e)=>!styleProps.includes(e)).reduce((acc, p)=>{
+            acc[p] = props[p];
+            return acc;
+        }, {}) : props;
+        const calculatedStyle = typeof styleSrc === "function" ? styleSrc(props) : styleSrc;
+        return /*#__PURE__*/ (0, (/*@__PURE__*/$parcel$interopDefault($03dcc08a47452624$exports))).createElement(element, {
+            className: className,
+            style: {
+                ...style,
+                ...calculatedStyle
+            },
+            ...passProps
+        }, children);
+    };
+}
+const $4fa36e821943b400$export$42a852a2b6b56249 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-container`);
+const $4fa36e821943b400$export$5f1af8db9871e1d6 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-text`);
+const $4fa36e821943b400$export$9ce5373cfda0847e = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-small-text`);
+const $4fa36e821943b400$export$353f5b6fc5456de1 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-button`, {}, {
+    element: "button"
+});
+const $4fa36e821943b400$export$f5b8910cec6cf069 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-input`, null, {
+    element: "input"
+});
+const $4fa36e821943b400$export$9a58ef0d7ad3278c = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-range`, null, {
+    element: "input"
+});
+const $4fa36e821943b400$export$e9eb1f4e2b79092 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-h${1}`, null, {
+    element: "h1"
+});
+const $4fa36e821943b400$export$3e3dae747fbae41f = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-h${2}`, null, {
+    element: "h2"
+});
+const $4fa36e821943b400$export$e52c1faf70c6ff56 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-h${3}`, null, {
+    element: "h3"
+});
+const $4fa36e821943b400$export$c50e3d1cd45af697 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-h${4}`, null, {
+    element: "h4"
+});
+const $4fa36e821943b400$export$5f0b2c5569a35f91 = function MainHeader({ children: children , style: style  }) {
+    const content = String(children).split(" ");
+    return /*#__PURE__*/ (0, (/*@__PURE__*/$parcel$interopDefault($03dcc08a47452624$exports))).createElement((0, $03dcc08a47452624$exports.Fragment), {}, content.map((word)=>/*#__PURE__*/ (0, (/*@__PURE__*/$parcel$interopDefault($03dcc08a47452624$exports))).createElement($4fa36e821943b400$export$e9eb1f4e2b79092, {
+            key: word,
+            style: {
+                fontWeight: 900,
+                display: "inline-block",
+                width: "auto",
+                padding: "6px",
+                margin: 0,
+                backgroundColor: "var(--accent-color)",
+                ...style
+            }
+        }, word)));
+};
+const $4fa36e821943b400$export$ebd11618f299a286 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-a`, null, {
+    element: "a"
+});
+const $4fa36e821943b400$export$eef1e68107c58ef2 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-space`, (props)=>({
+        display: props.inline ? "inline-block" : "block",
+        height: `${$4fa36e821943b400$var$SIZE * props.h}px`,
+        width: `${$4fa36e821943b400$var$SIZE * props.w}px`
+    }));
+const $4fa36e821943b400$export$e71c4d32a2263218 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-box`, ({ padding: padding , hideOnSmall: hideOnSmall , flex: flex , minWidth: minWidth  })=>{
+    return {
+        flex: flex,
+        minWidth: minWidth,
+        padding: padding ? [
+            padding
+        ].flat().map((paddingValue)=>`${paddingValue * $4fa36e821943b400$var$SIZE}px`).join(` `) : null
+    };
+});
+const $4fa36e821943b400$export$fbae5b5ffd8af05e = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-inline`, ({ v: v , h: h , gap: gap  })=>({
+        marginLeft: `${h * $4fa36e821943b400$var$SIZE}px`,
+        marginRight: `${h * $4fa36e821943b400$var$SIZE}px`,
+        marginTop: `${v * $4fa36e821943b400$var$SIZE}px`,
+        marginBottom: `${v * $4fa36e821943b400$var$SIZE}px`,
+        gap: `${gap * $4fa36e821943b400$var$SIZE}px`
+    }));
+const $4fa36e821943b400$export$694e0d28c7ffc90c = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-stack`, ({ v: v , h: h , gap: gap  })=>({
+        marginLeft: `${h * $4fa36e821943b400$var$SIZE}px`,
+        marginRight: `${h * $4fa36e821943b400$var$SIZE}px`,
+        marginTop: `${v * $4fa36e821943b400$var$SIZE}px`,
+        marginBottom: `${v * $4fa36e821943b400$var$SIZE}px`,
+        gap: `${gap * $4fa36e821943b400$var$SIZE}px`
+    }));
+const $4fa36e821943b400$export$47d4850b9fdf5af1 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-dropzone`);
+const $4fa36e821943b400$export$d4f99c77eeffeaea = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-ul`, {
+    margin: 0,
+    padding: `0 0 0 ${$4fa36e821943b400$var$BASE_FONT_SIZE / 4}px`
+}, {
+    element: "ul"
+});
+const $4fa36e821943b400$export$4de39c9f3329bb96 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-li`, {
+    margin: `0 0 0 ${$4fa36e821943b400$var$SIZE}px`,
+    padding: `${$4fa36e821943b400$var$SIZE / 4}px 0`
+}, {
+    element: "li"
+});
+const $4fa36e821943b400$export$b2539bed5023c21c = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-tabs`);
+const $4fa36e821943b400$export$3e41faf802a29e71 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-tabs--tab`, ({ info: info , active: active  })=>({
+        userSelect: "none",
+        cursor: "pointer",
+        backgroundColor: active ? "#000" : info ? "#fff" : "#ecf0f1",
+        color: active ? "#fff" : "#000",
+        padding: $4fa36e821943b400$var$SIZE / 2,
+        paddingLeft: info ? 0 : $4fa36e821943b400$var$SIZE / 2
+    }), {
+    styleProps: [
+        "info",
+        "active"
+    ]
+});
+const $4fa36e821943b400$export$9066f76bf3f31022 = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-code-snippet`, null, {
+    element: "pre"
+});
+const $4fa36e821943b400$export$aff08200ba616f1d = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-code-area`, null, {
+    element: "textarea"
+});
+const $4fa36e821943b400$export$c5006b4f540f347f = $4fa36e821943b400$export$16fa2f45be04daa8(`jbx-checkbox-hidden`, ({ checked: checked  })=>{
+    return {
+        height: $4fa36e821943b400$var$SIZE * 2 - 4,
+        width: $4fa36e821943b400$var$SIZE * 2 - 4,
+        paddingTop: 2,
+        paddingLeft: 2,
+        backgroundColor: checked ? "var(--accent-color)" : "white",
+        borderRadius: $4fa36e821943b400$var$BASE_RADIUS,
+        boxShadow: checked ? "inset rgba(0, 0, 0, 0.07) 0 0 0 1px" : "inset rgba(0, 0, 0, 0.33) 0 0 0 1.5px",
+        cursor: "pointer"
+    };
+});
+const $4fa36e821943b400$export$48513f6b9f8ce62d = function Checkbox({ label: label , checked: checked , onChange: onChange  }) {
+    return /*#__PURE__*/ (0, (/*@__PURE__*/$parcel$interopDefault($03dcc08a47452624$exports))).createElement($4fa36e821943b400$export$fbae5b5ffd8af05e, {
+        onClick: ()=>{
+            if (onChange) onChange(!checked);
+        },
+        style: {
+            alignItems: "center",
+            cursor: "pointer"
+        }
+    }, [
+        /*#__PURE__*/ (0, (/*@__PURE__*/$parcel$interopDefault($03dcc08a47452624$exports))).createElement($4fa36e821943b400$export$c5006b4f540f347f, {
+            key: 0,
+            checked: checked
+        }, /*#__PURE__*/ (0, (/*@__PURE__*/$parcel$interopDefault($03dcc08a47452624$exports))).createElement("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: $4fa36e821943b400$var$SIZE * 2 - 8,
+            height: $4fa36e821943b400$var$SIZE * 2 - 8,
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2",
+            className: "feather feather-check",
+            viewBox: "0 0 24 24",
+            color: checked ? "white" : "#ddd"
+        }, /*#__PURE__*/ (0, (/*@__PURE__*/$parcel$interopDefault($03dcc08a47452624$exports))).createElement("path", {
+            d: "M20 6L9 17 4 12"
+        }))),
+        /*#__PURE__*/ (0, (/*@__PURE__*/$parcel$interopDefault($03dcc08a47452624$exports))).createElement($4fa36e821943b400$export$eef1e68107c58ef2, {
+            key: 1,
+            w: 0.5
+        }),
+        /*#__PURE__*/ (0, (/*@__PURE__*/$parcel$interopDefault($03dcc08a47452624$exports))).createElement($4fa36e821943b400$export$5f1af8db9871e1d6, {
+            key: 2,
+            style: {
+                userSelect: "none"
+            }
+        }, label)
+    ]);
+};
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;ACAA,yBAAc,GAAC,KAAK,CAAC;;;ACArB;;AAIA,SAAS,qCAAe,GAAG;IACzB,qBACE,oBAAC,CAAA,GAAA,kCAAQ,CAAA,sBACP,oBAAC,CAAA,GAAA,yCAAI,CAAA,QAAC,kBAAgB,CAAO,gBAC7B,oBAAC,CAAA,GAAA,yCAAK,CAAA;QAAC,CAAC,EAAE,GAAG;MAAI,gBACjB,oBAAC,CAAA,GAAA,yCAAI,CAAA,sBACH,oBAAC,CAAA,GAAA,yCAAE,CAAA,sBACD,oBAAC,CAAA,GAAA,yCAAE,CAAA,sBACD,oBAAC,CAAA,GAAA,yCAAC,CAAA;QAAC,IAAI,EAAC,2BAA2B;OAAC,OAAK,CAAI,EAAA,gEAE/C,CAAK,gBACL,oBAAC,CAAA,GAAA,yCAAE,CAAA,sBACD,oBAAC,CAAA,GAAA,yCAAC,CAAA;QAAC,IAAI,EAAC,6BAA6B;OAAC,SAAO,CAAI,EAAA,0DAEnD,CAAK,gBACL,oBAAC,CAAA,GAAA,yCAAE,CAAA,sBACD,oBAAC,CAAA,GAAA,yCAAC,CAAA;QAAC,IAAI,EAAC,mCAAmC;OAAC,eAAa,CAAI,EAAA,kDAE/D,CAAK,gBACL,oBAAC,CAAA,GAAA,yCAAE,CAAA,sBACD,oBAAC,CAAA,GAAA,yCAAC,CAAA;QAAC,IAAI,EAAC,sBAAsB;OAAC,SAAO,CAAI,EAAA,sBAC5C,CAAK,CACF,CACA,CACE,CACX;CACH;IAED,wCAA+B,GAAhB,qCAAe;;;AF1B9B,MAAM,0BAAI,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,GAAG,EAAE,GAAG,MAAM,CAAC,UAAU,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,AAAC;AAC/E,MAAM,iCAAW,GAAG,0BAAI,GAAG,CAAC,AAAC;AAC7B,MAAM,oCAAc,GAAG,0BAAI,AAAC;AAErB,SAAS,yCAAS,CAAC,SAAS,EAAE,QAAQ,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE;IAC/D,MAAM,WAAE,OAAO,GAAG,CAAC,GAAG,CAAC,eAAE,UAAU,CAAA,EAAE,GAAG,MAAM,AAAC;IAE/C,OAAO,SAAS,aAAa,CAAC,YAAE,QAAQ,CAAA,SAAE,KAAK,GAAG,EAAE,GAAE,GAAG,KAAK,EAAE,EAAE;QAChE,MAAM,SAAS,GAAG,UAAU,GACxB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CACjB,MAAM,CAAC,CAAC,CAAC,GAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACtC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAK;YAClB,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAClB,OAAO,GAAG,CAAC;SACZ,EAAE,EAAE,CAAC,GACN,KAAK,AAAC;QAEV,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,QAAQ,AAAC;QAEpF,qBAAO,CAAA,GAAA,gEAAK,CAAA,CAAC,aAAa,CACxB,OAAO,EACP;uBACE,SAAS;YACT,KAAK,EAAE;gBAAE,GAAG,KAAK;gBAAE,GAAG,eAAe;aAAE;YACvC,GAAG,SAAS;SACb,EACD,QAAQ,CACT,CAAC;KACH,CAAC;CACH;AAEM,MAAM,yCAAS,GAAG,yCAAS,CAAC,CAAC,aAAa,CAAC,CAAC,AAAC;AAE7C,MAAM,yCAAI,GAAG,yCAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,AAAC;AAEnC,MAAM,yCAAS,GAAG,yCAAS,CAAC,CAAC,cAAc,CAAC,CAAC,AAAC;AAE9C,MAAM,yCAAM,GAAG,yCAAS,CAAC,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE;IAAE,OAAO,EAAE,QAAQ;CAAE,CAAC,AAAC;AAElE,MAAM,yCAAK,GAAG,yCAAS,CAAC,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,OAAO;CAAE,CAAC,AAAC;AACjE,MAAM,yCAAK,GAAG,yCAAS,CAAC,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,OAAO;CAAE,CAAC,AAAC;AAEjE,MAAM,wCAAQ,GAAG,yCAAS,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,IAAI;CAAE,CAAC,AAAC;AACjE,MAAM,yCAAQ,GAAG,yCAAS,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,IAAI;CAAE,CAAC,AAAC;AACjE,MAAM,yCAAQ,GAAG,yCAAS,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,IAAI;CAAE,CAAC,AAAC;AACjE,MAAM,yCAAQ,GAAG,yCAAS,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,IAAI;CAAE,CAAC,AAAC;AAEjE,MAAM,yCAAU,GAAG,SAAS,UAAU,CAAC,YAAE,QAAQ,CAAA,SAAE,KAAK,CAAA,EAAE,EAAE;IACjE,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,AAAC;IAE5C,qBAAO,CAAA,GAAA,gEAAK,CAAA,CAAC,aAAa,CACxB,CAAA,GAAA,kCAAQ,CAAA,EACR,EAAE,EACF,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,iBACf,CAAA,GAAA,gEAAK,CAAA,CAAC,aAAa,CACjB,wCAAQ,EACR;YACE,GAAG,EAAE,IAAI;YACT,KAAK,EAAE;gBACL,UAAU,EAAE,GAAG;gBACf,OAAO,EAAE,cAAc;gBACvB,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,KAAK;gBACd,MAAM,EAAE,CAAC;gBACT,eAAe,EAAE,qBAAqB;gBACtC,GAAG,KAAK;aACT;SACF,EACD,IAAI,CACL,CACF,CACF,CAAC;CACH,AAAC;AAEK,MAAM,yCAAC,GAAG,yCAAS,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,GAAG;CAAE,CAAC,AAAC;AAErD,MAAM,yCAAK,GAAG,yCAAS,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,GAAM,CAAA;QACtD,OAAO,EAAE,KAAK,CAAC,MAAM,GAAG,cAAc,GAAG,OAAO;QAChD,MAAM,EAAE,CAAC,EAAE,0BAAI,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7B,KAAK,EAAE,CAAC,EAAE,0BAAI,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;KAC7B,CAAA,AAAC,CAAC,AAAC;AAEG,MAAM,yCAAG,GAAG,yCAAS,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,WAAE,OAAO,CAAA,eAAE,WAAW,CAAA,QAAE,IAAI,CAAA,YAAE,QAAQ,CAAA,EAAE,GAAK;IACpF,OAAO;cACL,IAAI;kBACJ,QAAQ;QACR,OAAO,EAAE,OAAO,GACZ;YAAC,OAAO;SAAC,CACR,IAAI,EAAE,CACN,GAAG,CAAC,CAAC,YAAY,GAAK,CAAC,EAAE,YAAY,GAAG,0BAAI,CAAC,EAAE,CAAC,CAAC,CACjD,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GACV,IAAI;KACT,CAAC;CACH,CAAC,AAAC;AAEI,MAAM,yCAAM,GAAG,yCAAS,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,KAAE,CAAC,CAAA,KAAE,CAAC,CAAA,OAAE,GAAG,CAAA,EAAE,GAAM,CAAA;QAChE,UAAU,EAAE,CAAC,EAAE,CAAC,GAAG,0BAAI,CAAC,EAAE,CAAC;QAC3B,WAAW,EAAE,CAAC,EAAE,CAAC,GAAG,0BAAI,CAAC,EAAE,CAAC;QAC5B,SAAS,EAAE,CAAC,EAAE,CAAC,GAAG,0BAAI,CAAC,EAAE,CAAC;QAC1B,YAAY,EAAE,CAAC,EAAE,CAAC,GAAG,0BAAI,CAAC,EAAE,CAAC;QAC7B,GAAG,EAAE,CAAC,EAAE,GAAG,GAAG,0BAAI,CAAC,EAAE,CAAC;KACvB,CAAA,AAAC,CAAC,AAAC;AAEG,MAAM,yCAAK,GAAG,yCAAS,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,KAAE,CAAC,CAAA,KAAE,CAAC,CAAA,OAAE,GAAG,CAAA,EAAE,GAAM,CAAA;QAC9D,UAAU,EAAE,CAAC,EAAE,CAAC,GAAG,0BAAI,CAAC,EAAE,CAAC;QAC3B,WAAW,EAAE,CAAC,EAAE,CAAC,GAAG,0BAAI,CAAC,EAAE,CAAC;QAC5B,SAAS,EAAE,CAAC,EAAE,CAAC,GAAG,0BAAI,CAAC,EAAE,CAAC;QAC1B,YAAY,EAAE,CAAC,EAAE,CAAC,GAAG,0BAAI,CAAC,EAAE,CAAC;QAC7B,GAAG,EAAE,CAAC,EAAE,GAAG,GAAG,0BAAI,CAAC,EAAE,CAAC;KACvB,CAAA,AAAC,CAAC,AAAC;AAqBG,MAAM,yCAAQ,GAAG,yCAAS,CAAC,CAAC,YAAY,CAAC,CAAC,AAAC;AAE3C,MAAM,yCAAE,GAAG,yCAAS,CACzB,CAAC,MAAM,CAAC,EACR;IACE,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC,MAAM,EAAE,oCAAc,GAAG,CAAC,CAAC,EAAE,CAAC;CACzC,EACD;IAAE,OAAO,EAAE,IAAI;CAAE,CAClB,AAAC;AAEK,MAAM,yCAAE,GAAG,yCAAS,CACzB,CAAC,MAAM,CAAC,EACR;IACE,MAAM,EAAE,CAAC,MAAM,EAAE,0BAAI,CAAC,EAAE,CAAC;IACzB,OAAO,EAAE,CAAC,EAAE,0BAAI,GAAG,CAAC,CAAC,IAAI,CAAC;CAC3B,EACD;IAAE,OAAO,EAAE,IAAI;CAAE,CAClB,AAAC;AAEK,MAAM,yCAAI,GAAG,yCAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,AAAC;AAEnC,MAAM,yCAAG,GAAG,yCAAS,CAC1B,CAAC,aAAa,CAAC,EACf,CAAC,QAAE,IAAI,CAAA,UAAE,MAAM,CAAA,EAAE,GAAM,CAAA;QACrB,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,SAAS;QACjB,eAAe,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS;QAC5D,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM;QAC/B,OAAO,EAAE,0BAAI,GAAG,CAAC;QACjB,WAAW,EAAE,IAAI,GAAG,CAAC,GAAG,0BAAI,GAAG,CAAC;KACjC,CAAA,AAAC,EACF;IAAE,UAAU,EAAE;QAAC,MAAM;QAAE,QAAQ;KAAC;CAAE,CACnC,AAAC;AAEK,MAAM,yCAAW,GAAG,yCAAS,CAAC,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,KAAK;CAAE,CAAC,AAAC;AAC5E,MAAM,yCAAY,GAAG,yCAAS,CAAC,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,UAAU;CAAE,CAAC,AAAC;AAE/E,MAAM,yCAAc,GAAG,yCAAS,CAAC,CAAC,mBAAmB,CAAC,EAAE,CAAC,WAAE,OAAO,CAAA,EAAE,GAAK;IAC9E,OAAO;QACL,MAAM,EAAE,0BAAI,GAAG,CAAC,GAAG,CAAC;QACpB,KAAK,EAAE,0BAAI,GAAG,CAAC,GAAG,CAAC;QACnB,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,OAAO,GAAG,qBAAqB,GAAG,OAAO;QAC1D,YAAY,EAAE,iCAAW;QACzB,SAAS,EAAE,OAAO,GACd,qCAAqC,GACrC,uCAAuC;QAC3C,MAAM,EAAE,SAAS;KAClB,CAAC;CACH,CAAC,AAAC;AAEI,MAAM,yCAAQ,GAAG,SAAS,QAAQ,CAAC,SAAE,KAAK,CAAA,WAAE,OAAO,CAAA,YAAE,QAAQ,CAAA,EAAE,EAAE;IACtE,qBAAO,CAAA,GAAA,gEAAK,CAAA,CAAC,aAAa,CACxB,yCAAM,EACN;QACE,OAAO,EAAE,IAAM;YACb,IAAI,QAAQ,EACV,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;SAEtB;QACD,KAAK,EAAE;YACL,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,SAAS;SAClB;KACF,EACD;sBACE,CAAA,GAAA,gEAAK,CAAA,CAAC,aAAa,CACjB,yCAAc,EACd;YACE,GAAG,EAAE,CAAC;qBACN,OAAO;SACR,gBACD,CAAA,GAAA,gEAAK,CAAA,CAAC,aAAa,CACjB,KAAK,EACL;YACE,KAAK,EAAE,4BAA4B;YACnC,KAAK,EAAE,0BAAI,GAAG,CAAC,GAAG,CAAC;YACnB,MAAM,EAAE,0BAAI,GAAG,CAAC,GAAG,CAAC;YACpB,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,cAAc;YACtB,aAAa,EAAE,OAAO;YACtB,cAAc,EAAE,OAAO;YACvB,WAAW,EAAE,GAAG;YAChB,SAAS,EAAE,uBAAuB;YAClC,OAAO,EAAE,WAAW;YACpB,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM;SAClC,gBACD,CAAA,GAAA,gEAAK,CAAA,CAAC,aAAa,CAAC,MAAM,EAAE;YAC1B,CAAC,EAAE,iBAAiB;SACrB,CAAC,CACH,CACF;sBACD,CAAA,GAAA,gEAAK,CAAA,CAAC,aAAa,CAAC,yCAAK,EAAE;YAAE,GAAG,EAAE,CAAC;YAAE,CAAC,EAAE,GAAG;SAAE,CAAC;sBAC9C,CAAA,GAAA,gEAAK,CAAA,CAAC,aAAa,CAAC,yCAAI,EAAE;YAAE,GAAG,EAAE,CAAC;YAAE,KAAK,EAAE;gBAAE,UAAU,EAAE,MAAM;aAAE;SAAE,EAAE,KAAK,CAAC;KAC5E,CACF,CAAC;CACH,AAAC","sources":["src/index.js","react.js","src/components/MoreExperiments.js"],"sourcesContent":["import './style.css';\n\nimport React, { Fragment } from 'react';\n\nexport { default as MoreExperiments } from \"./components/MoreExperiments\"\n\nconst SIZE = window.innerWidth > 1280 ? 16 : window.innerWidth > 640 ? 14 : 12;\nconst BASE_RADIUS = SIZE / 3;\nconst BASE_FONT_SIZE = SIZE;\n\nexport function Component(className, styleSrc = {}, config = {}) {\n  const { element = `div`, styleProps } = config;\n\n  return function MakeComponent({ children, style = {}, ...props }) {\n    const passProps = styleProps\n      ? Object.keys(props)\n        .filter((e) => !styleProps.includes(e))\n        .reduce((acc, p) => {\n          acc[p] = props[p];\n          return acc;\n        }, {})\n      : props;\n\n    const calculatedStyle = typeof styleSrc === 'function' ? styleSrc(props) : styleSrc;\n\n    return React.createElement(\n      element,\n      {\n        className,\n        style: { ...style, ...calculatedStyle },\n        ...passProps\n      },\n      children\n    );\n  };\n}\n\nexport const Container = Component(`jbx-container`);\n\nexport const Text = Component(`jbx-text`);\n\nexport const SmallText = Component(`jbx-small-text`);\n\nexport const Button = Component(`jbx-button`, {}, { element: 'button' });\n\nexport const Input = Component(`jbx-input`, null, { element: 'input' });\nexport const Range = Component(`jbx-range`, null, { element: 'input' });\n\nexport const HeaderH1 = Component(`jbx-h${1}`, null, { element: 'h1' });\nexport const HeaderH2 = Component(`jbx-h${2}`, null, { element: 'h2' });\nexport const HeaderH3 = Component(`jbx-h${3}`, null, { element: 'h3' });\nexport const HeaderH4 = Component(`jbx-h${4}`, null, { element: 'h4' });\n\nexport const MainHeader = function MainHeader({ children, style }) {\n  const content = String(children).split(' ');\n\n  return React.createElement(\n    Fragment,\n    {},\n    content.map((word) =>\n      React.createElement(\n        HeaderH1,\n        {\n          key: word,\n          style: {\n            fontWeight: 900,\n            display: 'inline-block',\n            width: 'auto',\n            padding: '6px',\n            margin: 0,\n            backgroundColor: 'var(--accent-color)',\n            ...style\n          }\n        },\n        word\n      )\n    )\n  );\n};\n\nexport const A = Component(`jbx-a`, null, { element: 'a' });\n\nexport const Space = Component(`jbx-space`, (props) => ({\n  display: props.inline ? 'inline-block' : 'block',\n  height: `${SIZE * props.h}px`,\n  width: `${SIZE * props.w}px`\n}));\n\nexport const Box = Component(`jbx-box`, ({ padding, hideOnSmall, flex, minWidth }) => {\n  return {\n    flex,\n    minWidth,\n    padding: padding\n      ? [padding]\n        .flat()\n        .map((paddingValue) => `${paddingValue * SIZE}px`)\n        .join(` `)\n      : null\n  };\n});\n\nexport const Inline = Component(`jbx-inline`, ({ v, h, gap }) => ({\n  marginLeft: `${h * SIZE}px`,\n  marginRight: `${h * SIZE}px`,\n  marginTop: `${v * SIZE}px`,\n  marginBottom: `${v * SIZE}px`,\n  gap: `${gap * SIZE}px`\n}));\n\nexport const Stack = Component(`jbx-stack`, ({ v, h, gap }) => ({\n  marginLeft: `${h * SIZE}px`,\n  marginRight: `${h * SIZE}px`,\n  marginTop: `${v * SIZE}px`,\n  marginBottom: `${v * SIZE}px`,\n  gap: `${gap * SIZE}px`\n}));\n\n// export const LinkButton = Styled.a({\n//   capHeight: BASE_FONT_SIZE,\n//   color: '#3498db',\n//   cursor: 'pointer',\n//   borderRadius: 5,\n//   borderTop: '1px solid #3498db10',\n//   borderBottom: '1px solid #0000',\n//   backgroundColor: '#3498db20',\n//   height: BASE_FONT_SIZE * 2,\n//   display: 'flex',\n//   alignItems: 'center',\n//   alignContent: 'center',\n//   justifyContent: 'center',\n//   padding: 0,\n//   '&:hover': {\n//     boxShadow: `rgba(0, 0, 0, 0.1) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 3px 12px`\n//   }\n// });\n\nexport const Dropzone = Component(`jbx-dropzone`);\n\nexport const Ul = Component(\n  `jbx-ul`,\n  {\n    margin: 0,\n    padding: `0 0 0 ${BASE_FONT_SIZE / 4}px`\n  },\n  { element: 'ul' }\n);\n\nexport const Li = Component(\n  `jbx-li`,\n  {\n    margin: `0 0 0 ${SIZE}px`,\n    padding: `${SIZE / 4}px 0`\n  },\n  { element: 'li' }\n);\n\nexport const Tabs = Component(`jbx-tabs`);\n\nexport const Tab = Component(\n  `jbx-tabs--tab`,\n  ({ info, active }) => ({\n    userSelect: 'none',\n    cursor: 'pointer',\n    backgroundColor: active ? '#000' : info ? '#fff' : '#ecf0f1',\n    color: active ? '#fff' : '#000',\n    padding: SIZE / 2,\n    paddingLeft: info ? 0 : SIZE / 2\n  }),\n  { styleProps: ['info', 'active'] }\n);\n\nexport const CodeSnippet = Component(`jbx-code-snippet`, null, { element: 'pre' });\nexport const CodeTextarea = Component(`jbx-code-area`, null, { element: 'textarea' });\n\nexport const CheckboxHidden = Component(`jbx-checkbox-hidden`, ({ checked }) => {\n  return {\n    height: SIZE * 2 - 4,\n    width: SIZE * 2 - 4,\n    paddingTop: 2,\n    paddingLeft: 2,\n    backgroundColor: checked ? 'var(--accent-color)' : 'white',\n    borderRadius: BASE_RADIUS,\n    boxShadow: checked\n      ? 'inset rgba(0, 0, 0, 0.07) 0 0 0 1px'\n      : 'inset rgba(0, 0, 0, 0.33) 0 0 0 1.5px',\n    cursor: 'pointer'\n  };\n});\n\nexport const Checkbox = function Checkbox({ label, checked, onChange }) {\n  return React.createElement(\n    Inline,\n    {\n      onClick: () => {\n        if (onChange) {\n          onChange(!checked);\n        }\n      },\n      style: {\n        alignItems: 'center',\n        cursor: 'pointer'\n      }\n    },\n    [\n      React.createElement(\n        CheckboxHidden,\n        {\n          key: 0,\n          checked\n        },\n        React.createElement(\n          'svg',\n          {\n            xmlns: 'http://www.w3.org/2000/svg',\n            width: SIZE * 2 - 8,\n            height: SIZE * 2 - 8,\n            fill: 'none',\n            stroke: 'currentColor',\n            strokeLinecap: 'round',\n            strokeLinejoin: 'round',\n            strokeWidth: '2',\n            className: 'feather feather-check',\n            viewBox: '0 0 24 24',\n            color: checked ? 'white' : '#ddd'\n          },\n          React.createElement('path', {\n            d: 'M20 6L9 17 4 12'\n          })\n        )\n      ),\n      React.createElement(Space, { key: 1, w: 0.5 }),\n      React.createElement(Text, { key: 2, style: { userSelect: 'none' } }, label)\n    ]\n  );\n};\n","module.exports=react;","import { Fragment } from 'react';\n\nimport { Text, Space, A, Ul, Li } from '../';\n\nfunction MoreExperiments() {\n  return (\n    <Fragment>\n      <Text>More experiments</Text>\n      <Space h={0.5} />\n      <Text>\n        <Ul>\n          <Li>\n            <A href=\"https://javier.xyz/pintr/\">PINTR</A>, tool that turns your\n            images into plotter-like line drawings.\n          </Li>\n          <Li>\n            <A href=\"https://javier.xyz/img2css/\">img2css</A>, tool that can\n            convert any image into a pure css image.\n          </Li>\n          <Li>\n            <A href=\"https://javier.xyz/visual-center/\">Visual Center</A>, find\n            the visual center of your images / logos.\n          </Li>\n          <Li>\n            <A href=\"https://clashjs.com/\">ClashJS</A>, JS AI Battle Game.\n          </Li>\n        </Ul>\n      </Text>\n    </Fragment>\n  );\n}\n\nexport default MoreExperiments;\n"],"names":[],"version":3,"file":"main.js.map"}