@koine/react 1.1.10 → 1.1.12

package/Rating/index.js

@@ -1,4 +1,8 @@
-export * from "./Rating";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deriveRating = exports.convertRange = exports.getRatingValue = exports.getRatingWord = void 0;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Rating"), exports);
 var RATING_WORDS = {
     0: "Worst",
     1: "Bad",
@@ -8,7 +12,7 @@ var RATING_WORDS = {
     4.5: "Excellent",
     5: "Best",
 };
-export var getRatingWord = function (value, precision) {
+var getRatingWord = function (value, precision) {
     if (precision === void 0) { precision = 0.5; }
     var buffer = 0;
     var word;
@@ -19,20 +23,23 @@ export var getRatingWord = function (value, precision) {
     }
     return word;
 };
-export var getRatingValue = function (value) {
+exports.getRatingWord = getRatingWord;
+var getRatingValue = function (value) {
     var converted = convertRange(value, [0, 5], [0, 10]);
     if (converted % 1 === 0) {
         return converted;
     }
     return converted.toFixed(1);
 };
+exports.getRatingValue = getRatingValue;
 /**
  * @see https://stackoverflow.com/a/14224813
  */
-export function convertRange(value, r1, r2) {
+function convertRange(value, r1, r2) {
     return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
 }
-export var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
+exports.convertRange = convertRange;
+var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
     if (minValue === void 0) { minValue = 3.8; }
     if (maxValue === void 0) { maxValue = 5; }
     if (minQuantity === void 0) { minQuantity = 9; }
@@ -47,3 +54,4 @@ export var deriveRating = function (title, date, minValue, maxValue, minQuantity
         count: count,
     };
 };
+exports.deriveRating = deriveRating;

package/{node/Rating/index.js → Rating/index.mjs}

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deriveRating = exports.convertRange = exports.getRatingValue = exports.getRatingWord = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Rating"), exports);
+export * from "./Rating";
 var RATING_WORDS = {
     0: "Worst",
     1: "Bad",
@@ -12,7 +8,7 @@ var RATING_WORDS = {
     4.5: "Excellent",
     5: "Best",
 };
-var getRatingWord = function (value, precision) {
+export var getRatingWord = function (value, precision) {
     if (precision === void 0) { precision = 0.5; }
     var buffer = 0;
     var word;
@@ -23,23 +19,20 @@ var getRatingWord = function (value, precision) {
     }
     return word;
 };
-exports.getRatingWord = getRatingWord;
-var getRatingValue = function (value) {
+export var getRatingValue = function (value) {
     var converted = convertRange(value, [0, 5], [0, 10]);
     if (converted % 1 === 0) {
         return converted;
     }
     return converted.toFixed(1);
 };
-exports.getRatingValue = getRatingValue;
 /**
  * @see https://stackoverflow.com/a/14224813
  */
-function convertRange(value, r1, r2) {
+export function convertRange(value, r1, r2) {
     return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
 }
-exports.convertRange = convertRange;
-var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
+export var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
     if (minValue === void 0) { minValue = 3.8; }
     if (maxValue === void 0) { maxValue = 5; }
     if (minQuantity === void 0) { minQuantity = 9; }
@@ -54,4 +47,3 @@ var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
         count: count,
     };
 };
-exports.deriveRating = deriveRating;

package/Rating/package.json

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

package/Select/SelectDownshift.js

@@ -1,4 +1,7 @@
-export var Select = null;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+exports.Select = null;
 // import { useSelect } from "downshift";
 // export type SelectProps = {
 //   options?: Option[];

package/{node/Select/SelectDownshift.js → Select/SelectDownshift.mjs}

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-exports.Select = null;
+export var Select = null;
 // import { useSelect } from "downshift";
 // export type SelectProps = {
 //   options?: Option[];

package/Select/components.js

@@ -1,12 +1,15 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { m } from "framer-motion";
-import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
-export var SelectArrowStyled = styled(m.span)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"])));
-export var SelectArrow = forwardRef(function SelectArrow(_a, ref) {
-    var isOpen = _a.isOpen, props = __rest(_a, ["isOpen"]);
-    return (_jsx(SelectArrowStyled, __assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: _jsx(IconCollapse, {}) })));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectArrow = exports.SelectArrowStyled = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var framer_motion_1 = require("framer-motion");
+var bs_1 = require("react-icons/bs");
+exports.SelectArrowStyled = (0, styled_components_1.default)(framer_motion_1.m.span)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"])));
+exports.SelectArrow = (0, react_1.forwardRef)(function SelectArrow(_a, ref) {
+    var isOpen = _a.isOpen, props = tslib_1.__rest(_a, ["isOpen"]);
+    return ((0, jsx_runtime_1.jsx)(exports.SelectArrowStyled, tslib_1.__assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(bs_1.BsBoxArrowInDown, {}) })));
 });
 var templateObject_1;

package/Select/components.mjs

@@ -0,0 +1,12 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { m } from "framer-motion";
+import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
+export var SelectArrowStyled = styled(m.span)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"])));
+export var SelectArrow = forwardRef(function SelectArrow(_a, ref) {
+    var isOpen = _a.isOpen, props = __rest(_a, ["isOpen"]);
+    return (_jsx(SelectArrowStyled, __assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: _jsx(IconCollapse, {}) })));
+});
+var templateObject_1;

package/Select/index.js

@@ -1,3 +1,7 @@
-export { Select } from "./SelectDownshift";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var SelectDownshift_1 = require("./SelectDownshift");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return SelectDownshift_1.Select; } });
 // export type { SelectProps } from "./SelectReach";
 // export { Select } from "./SelectReach";

package/Select/index.mjs

@@ -0,0 +1,3 @@
+export { Select } from "./SelectDownshift";
+// export type { SelectProps } from "./SelectReach";
+// export { Select } from "./SelectReach";

package/Select/package.json

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

package/Sidebar/Sidebar.js

@@ -1,23 +1,27 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import styled from "styled-components";
-import { GrFolderOpen as IconOpen } from "react-icons/gr";
-import { CgCloseR as IconClose } from "react-icons/cg";
-import { max, min } from "../styles/media";
-import { IconButtonFab } from "../Buttons";
-import { useHeader } from "../Header";
-var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
-    return "".concat(max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var gr_1 = require("react-icons/gr");
+var cg_1 = require("react-icons/cg");
+var media_1 = require("../styles/media");
+var Buttons_1 = require("../Buttons");
+var Header_1 = require("../Header");
+var SidebarWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return "".concat(media_1.max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
 });
-var SidebarToggle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), min.md);
-export var Sidebar = function (_a) {
+var SidebarToggle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), media_1.min.md);
+var Sidebar = function (_a) {
     var children = _a.children;
-    var _b = useState(false), open = _b[0], setOpen = _b[1];
-    var _c = useHeader(), headerHeight = _c[2];
-    var handleClickToggle = useCallback(function () {
+    var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
+    var _c = (0, Header_1.useHeader)(), headerHeight = _c[2];
+    var handleClickToggle = (0, react_1.useCallback)(function () {
         setOpen(function (prevOpen) { return !prevOpen; });
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, __assign({ onClick: handleClickToggle }, { children: _jsx(IconButtonFab, __assign({ "$variant": "contained" }, { children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) })) })), _jsx(SidebarWrapper, __assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarToggle, tslib_1.__assign({ onClick: handleClickToggle }, { children: (0, jsx_runtime_1.jsx)(Buttons_1.IconButtonFab, tslib_1.__assign({ "$variant": "contained" }, { children: open ? (0, jsx_runtime_1.jsx)(cg_1.CgCloseR, {}) : (0, jsx_runtime_1.jsx)(gr_1.GrFolderOpen, {}) })) })), (0, jsx_runtime_1.jsx)(SidebarWrapper, tslib_1.__assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
 };
+exports.Sidebar = Sidebar;
 var templateObject_1, templateObject_2;

package/Sidebar/Sidebar.mjs

@@ -0,0 +1,23 @@
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import styled from "styled-components";
+import { GrFolderOpen as IconOpen } from "react-icons/gr";
+import { CgCloseR as IconClose } from "react-icons/cg";
+import { max, min } from "../styles/media";
+import { IconButtonFab } from "../Buttons";
+import { useHeader } from "../Header";
+var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return "".concat(max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
+});
+var SidebarToggle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), min.md);
+export var Sidebar = function (_a) {
+    var children = _a.children;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useHeader(), headerHeight = _c[2];
+    var handleClickToggle = useCallback(function () {
+        setOpen(function (prevOpen) { return !prevOpen; });
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, __assign({ onClick: handleClickToggle }, { children: _jsx(IconButtonFab, __assign({ "$variant": "contained" }, { children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) })) })), _jsx(SidebarWrapper, __assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
+};
+var templateObject_1, templateObject_2;

package/Sidebar/index.js

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

package/Sidebar/index.mjs

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

package/Sidebar/package.json

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

package/Spacing/Spacing.js

@@ -1,12 +1,15 @@
-import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-import isUndefined from "@koine/utils/isUndefined";
-import { spacingTop, spacingBottom, } from "../styles/spacing";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], p.$bottom, false)); });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = 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 isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
+var spacing_1 = require("../styles/spacing");
+var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacing_1.spacingTop.call.apply(spacing_1.spacingTop, tslib_1.__spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacing_1.spacingBottom.call.apply(spacing_1.spacingBottom, tslib_1.__spreadArray([p.theme], p.$bottom, false)); });
 var extractDirectionArgs = function (raw) {
     var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
-    var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
+    var factorArg = (0, isUndefined_1.default)(factor) ? undefined : parseFloat(factor);
     var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
     return [size, factorArg, property, devicesArg];
 };
@@ -22,8 +25,8 @@ var extractDirectionArgs = function (raw) {
  * <Spacing top="sm:2:padding:tablet,desktop" />
  * ```
  */
-export var Spacing = function (_a) {
-    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = __rest(_a, ["top", "bottom", "vertical"]);
+var Spacing = function (_a) {
+    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = tslib_1.__rest(_a, ["top", "bottom", "vertical"]);
     var $top;
     var $bottom;
     if (top) {
@@ -38,8 +41,9 @@ export var Spacing = function (_a) {
     }
     if (!$top && !$bottom && !vertical) {
         // eslint-disable-next-line react/jsx-no-useless-fragment
-        return _jsx(_Fragment, { children: props.children });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
     }
-    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
+    return (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "$top": $top, "$bottom": $bottom }, props));
 };
+exports.Spacing = Spacing;
 var templateObject_1;

package/Spacing/Spacing.mjs

@@ -0,0 +1,45 @@
+import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import isUndefined from "@koine/utils/isUndefined";
+import { spacingTop, spacingBottom, } from "../styles/spacing";
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], p.$bottom, false)); });
+var extractDirectionArgs = function (raw) {
+    var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
+    var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
+    var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
+    return [size, factorArg, property, devicesArg];
+};
+/**
+ * Usage:
+ *
+ * ```jsx
+ * <Spacing top="sm" />
+ * <Spacing top="sm:1.5" />
+ * <Spacing top="sm:1.5" bottom="lg" />
+ * <Spacing vertical="sm:1.5:margin:mobile" />
+ * <Spacing top="sm:1.5:padding:mobile" />
+ * <Spacing top="sm:2:padding:tablet,desktop" />
+ * ```
+ */
+export var Spacing = function (_a) {
+    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = __rest(_a, ["top", "bottom", "vertical"]);
+    var $top;
+    var $bottom;
+    if (top) {
+        $top = extractDirectionArgs(top);
+    }
+    if (bottom) {
+        $bottom = extractDirectionArgs(bottom);
+    }
+    if (vertical) {
+        $top = extractDirectionArgs(vertical);
+        $bottom = $top;
+    }
+    if (!$top && !$bottom && !vertical) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return _jsx(_Fragment, { children: props.children });
+    }
+    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
+};
+var templateObject_1;

package/Spacing/index.js

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

package/Spacing/index.mjs

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

package/Spacing/package.json

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

package/Sticky/Sticky.js

@@ -1,4 +1,7 @@
-export var Sticky = null;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sticky = void 0;
+exports.Sticky = null;
 // import {
 //   Ref,
 //   CSSProperties,

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sticky = void 0;
-exports.Sticky = null;
+export var Sticky = null;
 // import {
 //   Ref,
 //   CSSProperties,

package/Sticky/StickyCss.js

@@ -1,6 +1,10 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-export var StickyCss = function (_a) {
-    var top = _a.top, props = __rest(_a, ["top"]);
-    return _jsx("div", __assign({ style: { position: "sticky", top: 100 } }, props));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyCss = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var StickyCss = function (_a) {
+    var top = _a.top, props = tslib_1.__rest(_a, ["top"]);
+    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { position: "sticky", top: 100 } }, props));
 };
+exports.StickyCss = StickyCss;

package/Sticky/StickyCss.mjs

@@ -0,0 +1,6 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var StickyCss = function (_a) {
+    var top = _a.top, props = __rest(_a, ["top"]);
+    return _jsx("div", __assign({ style: { position: "sticky", top: 100 } }, props));
+};

package/Sticky/index.js

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

package/Sticky/index.mjs

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

package/Sticky/package.json

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