@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Grid/Grid.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { Theme, Breakpoint } from "../styles/theme";
+import { CSSProperties } from "styled-components";
+import type { Breakpoint, Theme } from "../styles/theme";
 export declare const GRID_COLUMNS = 12;
 export declare const GRID_GUTTER_DEFAULT: keyof Theme["gutter"];
 export type GridProps = {
@@ -28,7 +29,7 @@ export declare const ContainerFluid: import("styled-components").StyledComponent
 }, never>;
 type Direction = "min" | "max";
 export type RowProps = GridProps & {
-    $valign?: React.CSSProperties["alignItems"];
+    $valign?: CSSProperties["alignItems"];
     $reverse?: `${Direction}:${Breakpoint}`;
     /**
      * It forces child columns to be on one line overflowing the content when it does not fit,
@@ -38,7 +39,7 @@ export type RowProps = GridProps & {
     $noWrap?: boolean;
 };
 export declare const Row: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    $valign?: React.CSSProperties["alignItems"];
+    $valign?: CSSProperties["alignItems"];
     $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
     /**
      * It forces child columns to be on one line overflowing the content when it does not fit,

package/Grid/Grid.js

@@ -1,56 +1,106 @@
 "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    }");
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-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 _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    GRID_COLUMNS: function() {
+        return GRID_COLUMNS;
+    },
+    GRID_GUTTER_DEFAULT: function() {
+        return GRID_GUTTER_DEFAULT;
+    },
+    Container: function() {
+        return Container;
+    },
+    ContainerFluid: function() {
+        return ContainerFluid;
+    },
+    Row: function() {
+        return Row;
+    },
+    Col: function() {
+        return Col;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const GRID_COLUMNS = 12;
+const GRID_GUTTER_DEFAULT = "half";
+const Container = _styledcomponents.default.div`
+  max-width: ${(p)=>p.theme.breakpoints[p.size]}px;
+  margin: 0 auto;
+  padding: 0 ${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+  ${(p)=>p.clamp ? "overflow: hidden;" : ""}
+`;
+const ContainerFluid = _styledcomponents.default.div`
+  padding: 0 ${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+`;
+const Row = _styledcomponents.default.div`
+  margin: 0 -${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+  display: flex;
+  ${(p)=>p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;"}
+  ${(p)=>p.$valign ? `align-items: ${p.$valign}` : ""};
+  ${(p)=>p.$reverse && `@media (${p.$reverse.split(":")[0]}-width: ${p.$reverse.split(":")[1]}px) {
+      flex-direction: row-reverse;
+    }`}
+`;
+const Col = _styledcomponents.default.div`
+  padding: 0 ${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+  display: ${(p)=>p.$flex ? "flex" : "block"};
+  ${(p)=>p.$valign ? "align-items: " + p.$valign : ""};
+  ${(p)=>getColCss(p)};
+`;
 function getColWidth(breakpoints, breakpoint, value) {
-    var breakpointValue = breakpoints[breakpoint] + "px";
-    var width = (value * 100) / exports.GRID_COLUMNS;
-    var cssValue = "\n    min-width: ".concat(width, "%;\n    flex: 0 0 ").concat(width, "%;\n");
+    const breakpointValue = breakpoints[breakpoint] + "px";
+    const width = value * 100 / GRID_COLUMNS;
+    const cssValue = `
+    min-width: ${width}%;
+    flex: 0 0 ${width}%;
+`;
     if (breakpoint === Object.keys(breakpoints)[0]) {
         return cssValue;
     }
-    return "\n  @media (min-width: ".concat(breakpointValue, "){\n    ").concat(cssValue, "\n  }");
+    return `
+  @media (min-width: ${breakpointValue}){
+    ${cssValue}
+  }`;
 }
 function getColCss(props) {
-    var $auto = props.$auto, $offset = props.$offset, $width = props.$width;
-    var breakpoints = props.theme.breakpoints;
-    var css = "";
+    const { $auto, $offset, $width } = props;
+    const { breakpoints } = props.theme;
+    let css = "";
     if ($offset) {
-        var offsets = $offset.split(",");
-        for (var i = 0; i <= offsets.length; i++) {
+        const offsets = $offset.split(",");
+        for(let 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) / exports.GRID_COLUMNS, "%;\n          }\n        ");
+                const [offsetBreakpoint, offsetSize] = offsets[i].split(":");
+                css += ` 
+          @media(min-width: ${breakpoints[offsetBreakpoint]}px){
+            margin-left: ${100 * offsetSize / GRID_COLUMNS}%;
+          }
+        `;
             }
         }
     }
     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];
+    // do nothing, width is set explicitly
+    } else if ($auto) {
+        css += `flex: 0 0 auto; width: auto; max-width: none;`;
+    } else {
+        for(const breakpoint in breakpoints){
+            const value = props[breakpoint];
             if (typeof value !== "undefined") {
                 css += getColWidth(breakpoints, breakpoint, value);
-            }
-            else if (breakpoint === "xs") {
+            } else if (breakpoint === "xs") {
                 css += getColWidth(breakpoints, breakpoint, 12);
             }
         }
     }
     return css;
 }
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Grid/Grid.mjs

@@ -1,53 +1,75 @@
-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); });
+export const GRID_COLUMNS = 12;
+export const GRID_GUTTER_DEFAULT = "half";
+export const Container = styled.div`
+  max-width: ${(p)=>p.theme.breakpoints[p.size]}px;
+  margin: 0 auto;
+  padding: 0 ${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+  ${(p)=>p.clamp ? "overflow: hidden;" : ""}
+`;
+export const ContainerFluid = styled.div`
+  padding: 0 ${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+`;
+export const Row = styled.div`
+  margin: 0 -${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+  display: flex;
+  ${(p)=>p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;"}
+  ${(p)=>p.$valign ? `align-items: ${p.$valign}` : ""};
+  ${(p)=>p.$reverse && `@media (${p.$reverse.split(":")[0]}-width: ${p.$reverse.split(":")[1]}px) {
+      flex-direction: row-reverse;
+    }`}
+`;
+export const Col = styled.div`
+  padding: 0 ${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+  display: ${(p)=>p.$flex ? "flex" : "block"};
+  ${(p)=>p.$valign ? "align-items: " + p.$valign : ""};
+  ${(p)=>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");
+    const breakpointValue = breakpoints[breakpoint] + "px";
+    const width = value * 100 / GRID_COLUMNS;
+    const cssValue = `
+    min-width: ${width}%;
+    flex: 0 0 ${width}%;
+`;
     if (breakpoint === Object.keys(breakpoints)[0]) {
         return cssValue;
     }
-    return "\n  @media (min-width: ".concat(breakpointValue, "){\n    ").concat(cssValue, "\n  }");
+    return `
+  @media (min-width: ${breakpointValue}){
+    ${cssValue}
+  }`;
 }
 function getColCss(props) {
-    var $auto = props.$auto, $offset = props.$offset, $width = props.$width;
-    var breakpoints = props.theme.breakpoints;
-    var css = "";
+    const { $auto, $offset, $width } = props;
+    const { breakpoints } = props.theme;
+    let css = "";
     if ($offset) {
-        var offsets = $offset.split(",");
-        for (var i = 0; i <= offsets.length; i++) {
+        const offsets = $offset.split(",");
+        for(let 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        ");
+                const [offsetBreakpoint, offsetSize] = offsets[i].split(":");
+                css += ` 
+          @media(min-width: ${breakpoints[offsetBreakpoint]}px){
+            margin-left: ${100 * offsetSize / GRID_COLUMNS}%;
+          }
+        `;
             }
         }
     }
     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];
+    // do nothing, width is set explicitly
+    } else if ($auto) {
+        css += `flex: 0 0 auto; width: auto; max-width: none;`;
+    } else {
+        for(const breakpoint in breakpoints){
+            const value = props[breakpoint];
             if (typeof value !== "undefined") {
                 css += getColWidth(breakpoints, breakpoint, value);
-            }
-            else if (breakpoint === "xs") {
+            } 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,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Grid"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Grid"), exports);

package/Hamburger/Hamburger.js

@@ -1,56 +1,83 @@
-"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
- */
-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");
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-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 = {
+Object.defineProperty(exports, "Hamburger", {
+    enumerable: true,
+    get: function() {
+        return Hamburger;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const HamburgerLabel = _styledcomponents.default.div`
+  position: absolute;
+  top: 30px;
+  font-size: ${({ $toggled })=>$toggled ? "0" : "9px"};
+  text-transform: uppercase;
+  left: 7px;
+  letter-spacing: 3px;
+`;
+const area = 48;
+const lines = 3;
+const width = 32;
+const room = Math.round((area - width) / 2);
+const barHeightRaw = width / 12;
+const barHeight = Math.round(barHeightRaw);
+const space = 0.5;
+const marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
+const margin = Math.round(marginRaw);
+const height = barHeight * lines + margin * (lines - 1);
+const topOffset = Math.round((area - height) / 2);
+const translate = 4.6325;
+const deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
+const move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
+const time = 0.4;
+const easing = "cubic-bezier(0, 0, 0, 1)";
+const transition = `${time}s ${easing}`;
+const burgerStyles = {
     marginRight: "-8px",
     position: "relative",
-    width: "".concat(area, "px"),
-    height: "".concat(area, "px"),
+    width: `${area}px`,
+    height: `${area}px`,
     userSelect: "none",
     outline: "0px",
     cursor: "pointer",
-    transition: transition,
+    transition
 };
-var barStyles = {
+const barStyles = {
     position: "absolute",
-    width: "".concat(width, "px"),
-    height: "".concat(barHeight, "px"),
-    left: "".concat(room, "px"),
+    width: `${width}px`,
+    height: `${barHeight}px`,
+    left: `${room}px`,
     background: "currentColor",
-    transition: transition,
+    transition
 };
-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, { "$toggled": toggled, children: "Menu" })] })));
+const Hamburger = ({ toggled, ...props })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            ...burgerStyles,
+            transform: `${toggled ? `rotate(90deg)` : "none"}`
+        },
+        tabIndex: 0,
+        ...props
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            ...barStyles,
+            top: `${topOffset}px`,
+            transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`
+        }
+    }), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            ...barStyles,
+            top: `${topOffset + barHeight + margin}px`,
+            transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`
+        }
+    }), /*#__PURE__*/ React.createElement(HamburgerLabel, {
+        $toggled: toggled
+    }, "Menu"));
 };
-exports.Hamburger = Hamburger;
-var templateObject_1;

package/Hamburger/Hamburger.mjs

@@ -1,52 +1,72 @@
-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 = {
+ */ import styled from "styled-components";
+const HamburgerLabel = styled.div`
+  position: absolute;
+  top: 30px;
+  font-size: ${({ $toggled })=>$toggled ? "0" : "9px"};
+  text-transform: uppercase;
+  left: 7px;
+  letter-spacing: 3px;
+`;
+const area = 48;
+const lines = 3;
+const width = 32;
+const room = Math.round((area - width) / 2);
+const barHeightRaw = width / 12;
+const barHeight = Math.round(barHeightRaw);
+const space = 0.5;
+const marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
+const margin = Math.round(marginRaw);
+const height = barHeight * lines + margin * (lines - 1);
+const topOffset = Math.round((area - height) / 2);
+const translate = 4.6325;
+const deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
+const move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
+const time = 0.4;
+const easing = "cubic-bezier(0, 0, 0, 1)";
+const transition = `${time}s ${easing}`;
+const burgerStyles = {
     marginRight: "-8px",
     position: "relative",
-    width: "".concat(area, "px"),
-    height: "".concat(area, "px"),
+    width: `${area}px`,
+    height: `${area}px`,
     userSelect: "none",
     outline: "0px",
     cursor: "pointer",
-    transition: transition,
+    transition
 };
-var barStyles = {
+const barStyles = {
     position: "absolute",
-    width: "".concat(width, "px"),
-    height: "".concat(barHeight, "px"),
-    left: "".concat(room, "px"),
+    width: `${width}px`,
+    height: `${barHeight}px`,
+    left: `${room}px`,
     background: "currentColor",
-    transition: 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, { "$toggled": toggled, children: "Menu" })] })));
+export const Hamburger = ({ toggled, ...props })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            ...burgerStyles,
+            transform: `${toggled ? `rotate(90deg)` : "none"}`
+        },
+        tabIndex: 0,
+        ...props
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            ...barStyles,
+            top: `${topOffset}px`,
+            transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`
+        }
+    }), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            ...barStyles,
+            top: `${topOffset + barHeight + margin}px`,
+            transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`
+        }
+    }), /*#__PURE__*/ React.createElement(HamburgerLabel, {
+        $toggled: toggled
+    }, "Menu"));
 };
-var templateObject_1;

package/Hamburger/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Hamburger"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Hamburger"), exports);

package/Header/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./useHeader"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./useHeader"), exports);

package/Header/useHeader.js

@@ -1,35 +1,54 @@
 "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 = (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]);
-    (0, react_1.useEffect)(function () {
-        var valueIdx = isDesktopLayout ? 1 : 0;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useHeader: function() {
+        return useHeader;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _react = require("react");
+const _useScrollPosition = require("../hooks/useScrollPosition");
+const _media = require("../styles/media");
+const _theme = require("../styles/theme");
+const useHeader = ()=>{
+    const [isSticky, setIsSticky] = (0, _react.useState)(false);
+    const { header: themed } = (0, _theme.useTheme)();
+    const isDesktopLayout = (0, _media.useMedia)(`min:${themed.breakpoint}`);
+    const valueIdx = isDesktopLayout ? 1 : 0;
+    const [headerHeight, setHeaderHeight] = (0, _react.useState)(themed.height[valueIdx]);
+    const [placeholderHeight, setPlaceholderHeight] = (0, _react.useState)(themed.height[valueIdx]);
+    const [logoWidth, setLogoWidth] = (0, _react.useState)(themed.logoWidth[valueIdx]);
+    (0, _useScrollPosition.useScrollPosition)((currentPosition)=>{
+        const isPastThreshold = currentPosition.y * -1 > 40;
+        if (isSticky !== isPastThreshold) setIsSticky(isPastThreshold);
+    }, [
+        isSticky
+    ]);
+    (0, _react.useEffect)(()=>{
+        const 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]);
+    }, [
+        themed,
+        isSticky,
+        isDesktopLayout
+    ]);
     return [
         isSticky,
         placeholderHeight,
         headerHeight,
-        logoWidth,
+        logoWidth
     ];
 };
-exports.useHeader = useHeader;
-exports.default = exports.useHeader;
+const _default = useHeader;