@koine/react 1.1.10 → 1.1.12

package/Forms/helpers.js

@@ -1,9 +1,13 @@
-import isString from "@koine/utils/isString";
-import matchSorter from "@koine/utils/matchSorter";
-export var normaliseOptions = function (options) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.triggerChange = exports.triggerOnChange = exports.defaultOptionsFilterFn = exports.normaliseOptions = void 0;
+var tslib_1 = require("tslib");
+var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
+var matchSorter_1 = tslib_1.__importDefault(require("@koine/utils/matchSorter"));
+var normaliseOptions = function (options) {
     if (options === void 0) { options = []; }
     return options.map(function (option) {
-        return isString(option)
+        return (0, isString_1.default)(option)
             ? {
                 label: option,
                 value: option,
@@ -11,25 +15,28 @@ export var normaliseOptions = function (options) {
             : option;
     });
 };
-export function defaultOptionsFilterFn(options, inputValue) {
+exports.normaliseOptions = normaliseOptions;
+function defaultOptionsFilterFn(options, inputValue) {
     if (!inputValue) {
         return options;
     }
-    return matchSorter(options, inputValue, { keys: ["value", "label"] });
+    return (0, matchSorter_1.default)(options, inputValue, { keys: ["value", "label"] });
 }
+exports.defaultOptionsFilterFn = defaultOptionsFilterFn;
 /**
  * We are faking the native input `onChange` event
  */
-export function triggerOnChange(onChange, name, value) {
+function triggerOnChange(onChange, name, value) {
     // @ts-expect-error nevermind
     if (onChange)
         onChange({ target: { name: name, value: value } });
 }
+exports.triggerOnChange = triggerOnChange;
 /**
  * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
  * @deprecated
  */
-export function triggerChange(input, value) {
+function triggerChange(input, value) {
     var obj = window.Object;
     if (!obj) {
         if (process.env["NODE_ENV"] !== "production") {
@@ -44,3 +51,4 @@ export function triggerChange(input, value) {
     var inputEvent = new Event("input", { bubbles: true });
     input.dispatchEvent(inputEvent);
 }
+exports.triggerChange = triggerChange;

package/{node/Forms/helpers.js → Forms/helpers.mjs}

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.triggerChange = exports.triggerOnChange = exports.defaultOptionsFilterFn = exports.normaliseOptions = void 0;
-var tslib_1 = require("tslib");
-var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
-var matchSorter_1 = tslib_1.__importDefault(require("@koine/utils/matchSorter"));
-var normaliseOptions = function (options) {
+import isString from "@koine/utils/isString";
+import matchSorter from "@koine/utils/matchSorter";
+export var normaliseOptions = function (options) {
     if (options === void 0) { options = []; }
     return options.map(function (option) {
-        return (0, isString_1.default)(option)
+        return isString(option)
             ? {
                 label: option,
                 value: option,
@@ -15,28 +11,25 @@ var normaliseOptions = function (options) {
             : option;
     });
 };
-exports.normaliseOptions = normaliseOptions;
-function defaultOptionsFilterFn(options, inputValue) {
+export function defaultOptionsFilterFn(options, inputValue) {
     if (!inputValue) {
         return options;
     }
-    return (0, matchSorter_1.default)(options, inputValue, { keys: ["value", "label"] });
+    return matchSorter(options, inputValue, { keys: ["value", "label"] });
 }
-exports.defaultOptionsFilterFn = defaultOptionsFilterFn;
 /**
  * We are faking the native input `onChange` event
  */
-function triggerOnChange(onChange, name, value) {
+export function triggerOnChange(onChange, name, value) {
     // @ts-expect-error nevermind
     if (onChange)
         onChange({ target: { name: name, value: value } });
 }
-exports.triggerOnChange = triggerOnChange;
 /**
  * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
  * @deprecated
  */
-function triggerChange(input, value) {
+export function triggerChange(input, value) {
     var obj = window.Object;
     if (!obj) {
         if (process.env["NODE_ENV"] !== "production") {
@@ -51,4 +44,3 @@ function triggerChange(input, value) {
     var inputEvent = new Event("input", { bubbles: true });
     input.dispatchEvent(inputEvent);
 }
-exports.triggerChange = triggerChange;

package/Forms/index.js

@@ -1,16 +1,19 @@
-export * from "./antispam";
-export * from "./Checkbox";
-export * from "./Input";
-export * from "./InputGroup";
-export * from "./Feedback";
-export * from "./Field";
-export * from "./InputGroup";
-export * from "./Label";
-export * from "./Password";
-export * from "./Radio";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./antispam"), exports);
+tslib_1.__exportStar(require("./Checkbox"), exports);
+tslib_1.__exportStar(require("./Input"), exports);
+tslib_1.__exportStar(require("./InputGroup"), exports);
+tslib_1.__exportStar(require("./Feedback"), exports);
+tslib_1.__exportStar(require("./Field"), exports);
+tslib_1.__exportStar(require("./InputGroup"), exports);
+tslib_1.__exportStar(require("./Label"), exports);
+tslib_1.__exportStar(require("./Password"), exports);
+tslib_1.__exportStar(require("./Radio"), exports);
 // export * from "./Select";
-export * from "./Switch";
-export * from "./Textarea";
-export * from "./Toggle";
-export * from "./helpers";
-export * from "./styles";
+tslib_1.__exportStar(require("./Switch"), exports);
+tslib_1.__exportStar(require("./Textarea"), exports);
+tslib_1.__exportStar(require("./Toggle"), exports);
+tslib_1.__exportStar(require("./helpers"), exports);
+tslib_1.__exportStar(require("./styles"), exports);

package/Forms/index.mjs

@@ -0,0 +1,16 @@
+export * from "./antispam";
+export * from "./Checkbox";
+export * from "./Input";
+export * from "./InputGroup";
+export * from "./Feedback";
+export * from "./Field";
+export * from "./InputGroup";
+export * from "./Label";
+export * from "./Password";
+export * from "./Radio";
+// export * from "./Select";
+export * from "./Switch";
+export * from "./Textarea";
+export * from "./Toggle";
+export * from "./helpers";
+export * from "./styles";

package/Forms/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Forms/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/styles.js

@@ -1,29 +1,32 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-import { stateFocus } from "../styles/styled";
-import { ProgressLinear } from "../Progress/ProgressLinear";
-import { invisible } from "../styles/styled";
-export var InputInvisible = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), invisible);
-export var InputHoneypot = styled(InputInvisible).attrs({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputFocus = exports.inputBase = exports.inputReset = exports.inputPadding = exports.inputBorder = exports.inputResetAutofill = exports.InputProgress = exports.InputHoneypot = exports.InputInvisible = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var styled_1 = require("../styles/styled");
+var ProgressLinear_1 = require("../Progress/ProgressLinear");
+var styled_2 = require("../styles/styled");
+exports.InputInvisible = styled_components_1.default.input(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styled_2.invisible);
+exports.InputHoneypot = (0, styled_components_1.default)(exports.InputInvisible).attrs({
     type: "text",
     autoComplete: "new-password",
     tabIndex: -1,
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-export var InputProgress = styled(function (p) { return (_jsx(ProgressLinear, __assign({ fg: "var(--accent300)", bg: "var(--accent400)" }, p))); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
+})(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
+exports.InputProgress = (0, styled_components_1.default)(function (p) { return ((0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, tslib_1.__assign({ fg: "var(--accent300)", bg: "var(--accent400)" }, p))); })(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
 /**
  * Remove the default light blue background on autofilled inputs. To be used as
  * a function that outputs a CSS string.
  *
  * @see https://stackoverflow.com/a/62624824/1938970
  */
-export var inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
+exports.inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
 /* FIXME: find a nice way to override this styling from implementation */
 // border-bottom: 1px solid var(--forms-border-color);
 // border: 0;
-export var inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
-export var inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
-export var inputReset = "\n  width: 100%;\n  min-height: 44px;\n  ".concat(inputBorder, "\n  ").concat(inputPadding, "\n");
-export var inputBase = "\n  ".concat(inputReset, "\n  ").concat(inputResetAutofill, "\n  background: transparent;\n");
-export var inputFocus = "\n  &:focus {\n    outline: 0px;\n    appearance: none;\n    ".concat(stateFocus, "\n  }\n");
+exports.inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
+exports.inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
+exports.inputReset = "\n  width: 100%;\n  min-height: 44px;\n  ".concat(exports.inputBorder, "\n  ").concat(exports.inputPadding, "\n");
+exports.inputBase = "\n  ".concat(exports.inputReset, "\n  ").concat(exports.inputResetAutofill, "\n  background: transparent;\n");
+exports.inputFocus = "\n  &:focus {\n    outline: 0px;\n    appearance: none;\n    ".concat(styled_1.stateFocus, "\n  }\n");
 var templateObject_1, templateObject_2, templateObject_3;

package/Forms/styles.mjs

@@ -0,0 +1,29 @@
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { stateFocus } from "../styles/styled";
+import { ProgressLinear } from "../Progress/ProgressLinear";
+import { invisible } from "../styles/styled";
+export var InputInvisible = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), invisible);
+export var InputHoneypot = styled(InputInvisible).attrs({
+    type: "text",
+    autoComplete: "new-password",
+    tabIndex: -1,
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+export var InputProgress = styled(function (p) { return (_jsx(ProgressLinear, __assign({ fg: "var(--accent300)", bg: "var(--accent400)" }, p))); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
+/**
+ * Remove the default light blue background on autofilled inputs. To be used as
+ * a function that outputs a CSS string.
+ *
+ * @see https://stackoverflow.com/a/62624824/1938970
+ */
+export var inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
+/* FIXME: find a nice way to override this styling from implementation */
+// border-bottom: 1px solid var(--forms-border-color);
+// border: 0;
+export var inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
+export var inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
+export var inputReset = "\n  width: 100%;\n  min-height: 44px;\n  ".concat(inputBorder, "\n  ").concat(inputPadding, "\n");
+export var inputBase = "\n  ".concat(inputReset, "\n  ").concat(inputResetAutofill, "\n  background: transparent;\n");
+export var inputFocus = "\n  &:focus {\n    outline: 0px;\n    appearance: none;\n    ".concat(stateFocus, "\n  }\n");
+var templateObject_1, templateObject_2, templateObject_3;

package/Gauge/Gauge.js

@@ -1,6 +1,10 @@
+"use strict";
 // import styled, { keyframes } from "styled-components";
 // import { m } from "framer-motion";
-export var Gauge = function (_props) { return null; };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gauge = void 0;
+var Gauge = function (_props) { return null; };
+exports.Gauge = Gauge;
 // export type GaugeProps = {
 //   /** In percentage */
 //   value: number;

package/{node/Gauge/Gauge.js → Gauge/Gauge.mjs}

@@ -1,10 +1,6 @@
-"use strict";
 // import styled, { keyframes } from "styled-components";
 // import { m } from "framer-motion";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Gauge = void 0;
-var Gauge = function (_props) { return null; };
-exports.Gauge = Gauge;
+export var Gauge = function (_props) { return null; };
 // export type GaugeProps = {
 //   /** In percentage */
 //   value: number;

package/Grid/Grid.js

@@ -1,17 +1,20 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-export var GRID_COLUMNS = 12;
-export var GRID_GUTTER_DEFAULT = "half";
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"], ["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"])), function (p) { return p.theme.breakpoints[p.size]; }, function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.clamp ? "overflow: hidden;" : ""); });
-export var ContainerFluid = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; });
-export var Row = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"], ["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;"); }, function (p) { return (p.$valign ? "align-items: ".concat(p.$valign) : ""); }, function (p) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Col = exports.Row = exports.ContainerFluid = exports.Container = exports.GRID_GUTTER_DEFAULT = exports.GRID_COLUMNS = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.GRID_COLUMNS = 12;
+exports.GRID_GUTTER_DEFAULT = "half";
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"], ["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"])), function (p) { return p.theme.breakpoints[p.size]; }, function (p) { return p.theme.gutter[p.$gutter || exports.GRID_GUTTER_DEFAULT]; }, function (p) { return (p.clamp ? "overflow: hidden;" : ""); });
+exports.ContainerFluid = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (p) { return p.theme.gutter[p.$gutter || exports.GRID_GUTTER_DEFAULT]; });
+exports.Row = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"], ["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"])), function (p) { return p.theme.gutter[p.$gutter || exports.GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;"); }, function (p) { return (p.$valign ? "align-items: ".concat(p.$valign) : ""); }, function (p) {
     return p.$reverse &&
         "@media (".concat(p.$reverse.split(":")[0], "-width: ").concat(p.$reverse.split(":")[1], "px) {\n      flex-direction: row-reverse;\n    }");
 });
-export var Col = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"], ["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$flex ? "flex" : "block"); }, function (p) { return (p.$valign ? "align-items: " + p.$valign : ""); }, function (p) { return getColCss(p); });
+exports.Col = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"], ["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"])), function (p) { return p.theme.gutter[p.$gutter || exports.GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$flex ? "flex" : "block"); }, function (p) { return (p.$valign ? "align-items: " + p.$valign : ""); }, function (p) { return getColCss(p); });
 function getColWidth(breakpoints, breakpoint, value) {
     var breakpointValue = breakpoints[breakpoint] + "px";
-    var width = (value * 100) / GRID_COLUMNS;
+    var width = (value * 100) / exports.GRID_COLUMNS;
     var cssValue = "\n    min-width: ".concat(width, "%;\n    flex: 0 0 ").concat(width, "%;\n");
     if (breakpoint === Object.keys(breakpoints)[0]) {
         return cssValue;
@@ -27,7 +30,7 @@ function getColCss(props) {
         for (var i = 0; i <= offsets.length; i++) {
             if (offsets[i]) {
                 var _a = offsets[i].split(":"), offsetBreakpoint = _a[0], offsetSize = _a[1];
-                css += " \n          @media(min-width: ".concat(breakpoints[offsetBreakpoint], "px){\n            margin-left: ").concat((100 * offsetSize) / GRID_COLUMNS, "%;\n          }\n        ");
+                css += " \n          @media(min-width: ".concat(breakpoints[offsetBreakpoint], "px){\n            margin-left: ").concat((100 * offsetSize) / exports.GRID_COLUMNS, "%;\n          }\n        ");
             }
         }
     }

package/Grid/Grid.mjs

@@ -0,0 +1,53 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var GRID_COLUMNS = 12;
+export var GRID_GUTTER_DEFAULT = "half";
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"], ["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"])), function (p) { return p.theme.breakpoints[p.size]; }, function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.clamp ? "overflow: hidden;" : ""); });
+export var ContainerFluid = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; });
+export var Row = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"], ["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;"); }, function (p) { return (p.$valign ? "align-items: ".concat(p.$valign) : ""); }, function (p) {
+    return p.$reverse &&
+        "@media (".concat(p.$reverse.split(":")[0], "-width: ").concat(p.$reverse.split(":")[1], "px) {\n      flex-direction: row-reverse;\n    }");
+});
+export var Col = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"], ["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$flex ? "flex" : "block"); }, function (p) { return (p.$valign ? "align-items: " + p.$valign : ""); }, function (p) { return getColCss(p); });
+function getColWidth(breakpoints, breakpoint, value) {
+    var breakpointValue = breakpoints[breakpoint] + "px";
+    var width = (value * 100) / GRID_COLUMNS;
+    var cssValue = "\n    min-width: ".concat(width, "%;\n    flex: 0 0 ").concat(width, "%;\n");
+    if (breakpoint === Object.keys(breakpoints)[0]) {
+        return cssValue;
+    }
+    return "\n  @media (min-width: ".concat(breakpointValue, "){\n    ").concat(cssValue, "\n  }");
+}
+function getColCss(props) {
+    var $auto = props.$auto, $offset = props.$offset, $width = props.$width;
+    var breakpoints = props.theme.breakpoints;
+    var css = "";
+    if ($offset) {
+        var offsets = $offset.split(",");
+        for (var i = 0; i <= offsets.length; i++) {
+            if (offsets[i]) {
+                var _a = offsets[i].split(":"), offsetBreakpoint = _a[0], offsetSize = _a[1];
+                css += " \n          @media(min-width: ".concat(breakpoints[offsetBreakpoint], "px){\n            margin-left: ").concat((100 * offsetSize) / GRID_COLUMNS, "%;\n          }\n        ");
+            }
+        }
+    }
+    if ($width) {
+        // do nothing, width is set explicitly
+    }
+    else if ($auto) {
+        css += "flex: 0 0 auto; width: auto; max-width: none;";
+    }
+    else {
+        for (var breakpoint in breakpoints) {
+            var value = props[breakpoint];
+            if (typeof value !== "undefined") {
+                css += getColWidth(breakpoints, breakpoint, value);
+            }
+            else if (breakpoint === "xs") {
+                css += getColWidth(breakpoints, breakpoint, 12);
+            }
+        }
+    }
+    return css;
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Grid/index.js

@@ -1 +1,4 @@
-export * from "./Grid";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Grid"), exports);

package/Grid/index.mjs

@@ -0,0 +1 @@
+export * from "./Grid";

package/Grid/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Grid/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Hamburger/Hamburger.js

@@ -1,12 +1,15 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hamburger = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * @file
  *
  * Simplified from https://github.com/luukdv/hamburger-react
  */
-import styled from "styled-components";
-var HamburgerLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"], ["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"])), function (_a) {
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var HamburgerLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"], ["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"])), function (_a) {
     var $toggled = _a.$toggled;
     return ($toggled ? "0" : "9px");
 });
@@ -45,8 +48,9 @@ var barStyles = {
     background: "currentColor",
     transition: transition,
 };
-export var Hamburger = function (_a) {
-    var toggled = _a.toggled, props = __rest(_a, ["toggled"]);
-    return (_jsxs("div", __assign({ style: __assign(__assign({}, burgerStyles), { transform: "".concat(toggled ? "rotate(90deg)" : "none") }), tabIndex: 0 }, props, { children: [_jsx("div", { style: __assign(__assign({}, barStyles), { top: "".concat(topOffset, "px"), transform: "".concat(toggled ? "rotate(-45deg) translate(0px, ".concat(move, "px)") : "none") }) }), _jsx("div", { style: __assign(__assign({}, barStyles), { top: "".concat(topOffset + barHeight + margin, "px"), transform: "".concat(toggled ? "rotate(45deg) translate(0, -".concat(move, "px)") : "none") }) }), _jsx(HamburgerLabel, __assign({ "$toggled": toggled }, { children: "Menu" }))] })));
+var Hamburger = function (_a) {
+    var toggled = _a.toggled, props = tslib_1.__rest(_a, ["toggled"]);
+    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, burgerStyles), { transform: "".concat(toggled ? "rotate(90deg)" : "none") }), tabIndex: 0 }, props, { children: [(0, jsx_runtime_1.jsx)("div", { style: tslib_1.__assign(tslib_1.__assign({}, barStyles), { top: "".concat(topOffset, "px"), transform: "".concat(toggled ? "rotate(-45deg) translate(0px, ".concat(move, "px)") : "none") }) }), (0, jsx_runtime_1.jsx)("div", { style: tslib_1.__assign(tslib_1.__assign({}, barStyles), { top: "".concat(topOffset + barHeight + margin, "px"), transform: "".concat(toggled ? "rotate(45deg) translate(0, -".concat(move, "px)") : "none") }) }), (0, jsx_runtime_1.jsx)(HamburgerLabel, tslib_1.__assign({ "$toggled": toggled }, { children: "Menu" }))] })));
 };
+exports.Hamburger = Hamburger;
 var templateObject_1;

package/Hamburger/Hamburger.mjs

@@ -0,0 +1,52 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file
+ *
+ * Simplified from https://github.com/luukdv/hamburger-react
+ */
+import styled from "styled-components";
+var HamburgerLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"], ["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"])), function (_a) {
+    var $toggled = _a.$toggled;
+    return ($toggled ? "0" : "9px");
+});
+var area = 48;
+var lines = 3;
+var width = 32;
+var room = Math.round((area - width) / 2);
+var barHeightRaw = width / 12;
+var barHeight = Math.round(barHeightRaw);
+var space = 0.5;
+var marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
+var margin = Math.round(marginRaw);
+var height = barHeight * lines + margin * (lines - 1);
+var topOffset = Math.round((area - height) / 2);
+var translate = 4.6325;
+var deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
+var move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
+var time = 0.4;
+var easing = "cubic-bezier(0, 0, 0, 1)";
+var transition = "".concat(time, "s ").concat(easing);
+var burgerStyles = {
+    marginRight: "-8px",
+    position: "relative",
+    width: "".concat(area, "px"),
+    height: "".concat(area, "px"),
+    userSelect: "none",
+    outline: "0px",
+    cursor: "pointer",
+    transition: transition,
+};
+var barStyles = {
+    position: "absolute",
+    width: "".concat(width, "px"),
+    height: "".concat(barHeight, "px"),
+    left: "".concat(room, "px"),
+    background: "currentColor",
+    transition: transition,
+};
+export var Hamburger = function (_a) {
+    var toggled = _a.toggled, props = __rest(_a, ["toggled"]);
+    return (_jsxs("div", __assign({ style: __assign(__assign({}, burgerStyles), { transform: "".concat(toggled ? "rotate(90deg)" : "none") }), tabIndex: 0 }, props, { children: [_jsx("div", { style: __assign(__assign({}, barStyles), { top: "".concat(topOffset, "px"), transform: "".concat(toggled ? "rotate(-45deg) translate(0px, ".concat(move, "px)") : "none") }) }), _jsx("div", { style: __assign(__assign({}, barStyles), { top: "".concat(topOffset + barHeight + margin, "px"), transform: "".concat(toggled ? "rotate(45deg) translate(0, -".concat(move, "px)") : "none") }) }), _jsx(HamburgerLabel, __assign({ "$toggled": toggled }, { children: "Menu" }))] })));
+};
+var templateObject_1;

package/Hamburger/index.js

@@ -1 +1,4 @@
-export * from "./Hamburger";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Hamburger"), exports);

package/Hamburger/index.mjs

@@ -0,0 +1 @@
+export * from "./Hamburger";

package/Hamburger/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Hamburger/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Header/index.js

@@ -1 +1,4 @@
-export * from "./useHeader";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useHeader"), exports);

package/Header/index.mjs

@@ -0,0 +1 @@
+export * from "./useHeader";

package/Header/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Header/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Header/useHeader.js

@@ -1,21 +1,24 @@
-import { useEffect, useState } from "react";
-import { useScrollPosition } from "../hooks/useScrollPosition";
-import { useTheme } from "../styles/theme";
-import { useMedia } from "../styles/media";
-export var useHeader = function () {
-    var _a = useState(false), isSticky = _a[0], setIsSticky = _a[1];
-    var themed = useTheme().header;
-    var isDesktopLayout = useMedia("min:".concat(themed.breakpoint));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHeader = void 0;
+var react_1 = require("react");
+var useScrollPosition_1 = require("../hooks/useScrollPosition");
+var theme_1 = require("../styles/theme");
+var media_1 = require("../styles/media");
+var useHeader = function () {
+    var _a = (0, react_1.useState)(false), isSticky = _a[0], setIsSticky = _a[1];
+    var themed = (0, theme_1.useTheme)().header;
+    var isDesktopLayout = (0, media_1.useMedia)("min:".concat(themed.breakpoint));
     var valueIdx = isDesktopLayout ? 1 : 0;
-    var _b = useState(themed.height[valueIdx]), headerHeight = _b[0], setHeaderHeight = _b[1];
-    var _c = useState(themed.height[valueIdx]), placeholderHeight = _c[0], setPlaceholderHeight = _c[1];
-    var _d = useState(themed.logoWidth[valueIdx]), logoWidth = _d[0], setLogoWidth = _d[1];
-    useScrollPosition(function (currentPosition) {
+    var _b = (0, react_1.useState)(themed.height[valueIdx]), headerHeight = _b[0], setHeaderHeight = _b[1];
+    var _c = (0, react_1.useState)(themed.height[valueIdx]), placeholderHeight = _c[0], setPlaceholderHeight = _c[1];
+    var _d = (0, react_1.useState)(themed.logoWidth[valueIdx]), logoWidth = _d[0], setLogoWidth = _d[1];
+    (0, useScrollPosition_1.useScrollPosition)(function (currentPosition) {
         var isPastThreshold = currentPosition.y * -1 > 40;
         if (isSticky !== isPastThreshold)
             setIsSticky(isPastThreshold);
     }, [isSticky]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var valueIdx = isDesktopLayout ? 1 : 0;
         setPlaceholderHeight(themed.height[valueIdx]);
         setHeaderHeight(isSticky ? themed.heightSticky[valueIdx] : themed.height[valueIdx]);
@@ -28,4 +31,5 @@ export var useHeader = function () {
         logoWidth,
     ];
 };
-export default useHeader;
+exports.useHeader = useHeader;
+exports.default = exports.useHeader;

package/Header/useHeader.mjs

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { useScrollPosition } from "../hooks/useScrollPosition";
+import { useTheme } from "../styles/theme";
+import { useMedia } from "../styles/media";
+export var useHeader = function () {
+    var _a = useState(false), isSticky = _a[0], setIsSticky = _a[1];
+    var themed = useTheme().header;
+    var isDesktopLayout = useMedia("min:".concat(themed.breakpoint));
+    var valueIdx = isDesktopLayout ? 1 : 0;
+    var _b = useState(themed.height[valueIdx]), headerHeight = _b[0], setHeaderHeight = _b[1];
+    var _c = useState(themed.height[valueIdx]), placeholderHeight = _c[0], setPlaceholderHeight = _c[1];
+    var _d = useState(themed.logoWidth[valueIdx]), logoWidth = _d[0], setLogoWidth = _d[1];
+    useScrollPosition(function (currentPosition) {
+        var isPastThreshold = currentPosition.y * -1 > 40;
+        if (isSticky !== isPastThreshold)
+            setIsSticky(isPastThreshold);
+    }, [isSticky]);
+    useEffect(function () {
+        var valueIdx = isDesktopLayout ? 1 : 0;
+        setPlaceholderHeight(themed.height[valueIdx]);
+        setHeaderHeight(isSticky ? themed.heightSticky[valueIdx] : themed.height[valueIdx]);
+        setLogoWidth(isSticky ? themed.logoWidthSticky[valueIdx] : themed.logoWidth[valueIdx]);
+    }, [themed, isSticky, isDesktopLayout]);
+    return [
+        isSticky,
+        placeholderHeight,
+        headerHeight,
+        logoWidth,
+    ];
+};
+export default useHeader;