@koine/react 1.0.9 → 1.0.12

package/Progress/ProgressLinear.js

@@ -1,24 +1,15 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { m } from "framer-motion";
-const ProgressLinearBg = styled.span `
-  position: relative;
-  overflow: hidden;
-  display: block;
-  height: 4px;
-`;
-const ProgressLinearFg = styled(m.span) `
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-`;
+var ProgressLinearBg = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  display: block;\n  height: 4px;\n"], ["\n  position: relative;\n  overflow: hidden;\n  display: block;\n  height: 4px;\n"])));
+var ProgressLinearFg = styled(m.span)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
 /**
  * @see https://mui.com/components/progress/#linear
  */
-export const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props }) => {
-    return (_jsx(ProgressLinearBg, { style: { height, background: bg }, ...props, children: _jsx(ProgressLinearFg, { style: { height, background: fg }, initial: {
+export var ProgressLinear = function (_a) {
+    var _b = _a.done, done = _b === void 0 ? false : _b, _c = _a.height, height = _c === void 0 ? "2px" : _c, _d = _a.bg, bg = _d === void 0 ? "transparent" : _d, _e = _a.fg, fg = _e === void 0 ? "currentColor" : _e, props = __rest(_a, ["done", "height", "bg", "fg"]);
+    return (_jsx(ProgressLinearBg, __assign({ style: { height: height, background: bg } }, props, { children: _jsx(ProgressLinearFg, { style: { height: height, background: fg }, initial: {
                 x: "-100%",
             }, animate: {
                 x: done ? "-100%" : "0%",
@@ -28,5 +19,6 @@ export const ProgressLinear = ({ done = false, height = "2px", bg = "transparent
                     repeat: Infinity,
                     repeatType: "reverse",
                     duration: 2,
-                } }) }));
+                } }) })));
 };
+var templateObject_1, templateObject_2;

package/Progress/ProgressOverlay.js

@@ -1,3 +1,4 @@
+import { __assign, __makeTemplateObject } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import styled from "styled-components";
@@ -5,36 +6,19 @@ import { m } from "framer-motion";
 import { ProgressCircular } from "./ProgressCircular";
 import { ProgressLinear } from "./ProgressLinear";
 import { useHeader } from "../Header";
-const ProgressOverlayWrap = styled(m.div) `
-  z-index: 10000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  cursor: wait;
-`;
-const ProgressOverlayCenterer = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--progress-overlay-bg);
-`;
-export const ProgressOverlay = ({ running }) => {
-    const [, , headerHeight] = useHeader();
+var ProgressOverlayWrap = styled(m.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  cursor: wait;\n"], ["\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  cursor: wait;\n"])));
+var ProgressOverlayCenterer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"])));
+export var ProgressOverlay = function (_a) {
+    var running = _a.running;
+    var _b = useHeader(), headerHeight = _b[2];
     // const [progress, setProgress] = useState(0);
-    useEffect(() => {
+    useEffect(function () {
         document.body.style.cursor = running ? "wait" : "";
     }, [running]);
-    return (_jsxs(ProgressOverlayWrap, { animate: {
+    return (_jsxs(ProgressOverlayWrap, __assign({ animate: {
             opacity: running ? 1 : 0,
-        }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, { style: {
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, __assign({ style: {
                     top: headerHeight + "px",
-                }, children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
+                } }, { children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
 };
+var templateObject_1, templateObject_2;

package/Rating/Rating.js

@@ -1,48 +1,28 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useState } from "react";
+import { useCallback, useEffect, /* useId, */ useState } from "react";
 import styled from "styled-components";
-export const RatingStarRoot = styled.svg `
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 1px;
-`;
-export const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props }) => {
-    const id = useId();
-    return (_jsxs(RatingStarRoot, { viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px", ...props, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: `url(#${id})`, d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] }));
+import { useId } from "../hooks/useId";
+export var RatingStarRoot = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 1px;\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 1px;\n"])));
+export var RatingStar = function (_a) {
+    var value = _a.value, _b = _a.colorBg, colorBg = _b === void 0 ? "#FFD84C" : _b, _c = _a.colorStroke, colorStroke = _c === void 0 ? "#947813" : _c, size = _a.size, props = __rest(_a, ["value", "colorBg", "colorStroke", "size"]);
+    var id = useId();
+    return (_jsxs(RatingStarRoot, __assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [_jsx("defs", { children: _jsxs("linearGradient", __assign({ id: id, x1: "0", y1: "0", x2: "1", y2: "0" }, { children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] })) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
 };
-export const RatingDetails = styled.span `
-  padding-left: 0.5em;
-  font-size: 12px;
-  color: var(--grey100);
-
-  &:before {
-    content: "(";
-  }
-  &:after {
-    content: ")";
-  }
-`;
-export const RatingCount = styled.span ``;
-export const RatingValue = styled.span `
-  display: none;
-`;
-export const RatingRoot = styled.div `
-  display: flex;
-  align-items: center;
-
-  &:hover ${RatingValue} {
-    display: inline-block;
-  }
-`;
-export const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16, }) => {
-    const id = useId();
-    const [currentValue /* , _setCurrentValue */] = useState(value);
-    const [stars, setStars] = useState([]);
-    const getStars = useCallback((activeCount) => {
-        const stars = [];
-        for (let currentStar = min + 1; currentStar < max + 1; currentStar++) {
-            let starValue;
-            const roundedActiveCount = Math.floor(activeCount);
+export var RatingDetails = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"], ["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"])));
+export var RatingCount = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var RatingValue = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+export var RatingRoot = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &:hover ", " {\n    display: inline-block;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &:hover ", " {\n    display: inline-block;\n  }\n"])), RatingValue);
+export var Rating = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? 0 : _b, count = _a.count, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.max, max = _d === void 0 ? 5 : _d, _e = _a.showDetails, showDetails = _e === void 0 ? true : _e, colorBg = _a.colorBg, colorStroke = _a.colorStroke, _f = _a.starSize, starSize = _f === void 0 ? 16 : _f;
+    var id = useId();
+    var currentValue = useState(value)[0] /* , _setCurrentValue */;
+    var _g = useState([]), stars = _g[0], setStars = _g[1];
+    var getStars = useCallback(function (activeCount) {
+        var stars = [];
+        for (var currentStar = min + 1; currentStar < max + 1; currentStar++) {
+            var starValue = void 0;
+            var roundedActiveCount = Math.floor(activeCount);
             // we have a rating of 3.4, when we get to the 4th star:
             if (roundedActiveCount === currentStar - 1) {
                 starValue = 1 - (currentStar - activeCount);
@@ -57,7 +37,7 @@ export const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true,
         }
         return stars;
     }, [min, max]);
-    useEffect(() => {
+    useEffect(function () {
         setStars(getStars(currentValue));
     }, [currentValue, getStars]);
     // function updateStars(index) {
@@ -82,9 +62,10 @@ export const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true,
     //     onChange(value);
     //   }
     // }, [onChange];
-    return (_jsxs(RatingRoot, { children: [stars.map((star, idx) => (_jsx(RatingStar, { idx: idx, dataIdx: idx, size: starSize, 
+    return (_jsxs(RatingRoot, { children: [stars.map(function (star, idx) { return (_jsx(RatingStar, { idx: idx, dataIdx: idx, size: starSize, 
                 // onMouseOver={handleMouseOver}
                 // onMouseLeave={handleMouseLeave}
                 // onClick={handleClick}
-                value: star.value, colorBg: colorBg, colorStroke: colorStroke }, id + idx))), " ", showDetails && count && (_jsxs(RatingDetails, { children: [_jsx(RatingCount, { children: count }), _jsx(RatingValue, { children: ` - ${value}` })] }))] }));
+                value: star.value, colorBg: colorBg, colorStroke: colorStroke }, id + idx)); }), " ", showDetails && count && (_jsxs(RatingDetails, { children: [_jsx(RatingCount, { children: count }), _jsx(RatingValue, { children: " - ".concat(value) })] }))] }));
 };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Rating/index.js

@@ -1,5 +1,5 @@
 export * from "./Rating";
-const RATING_WORDS = {
+var RATING_WORDS = {
     0: "Worst",
     1: "Bad",
     2: "Mediocre",
@@ -8,9 +8,10 @@ const RATING_WORDS = {
     4.5: "Excellent",
     5: "Best",
 };
-export const getRatingWord = (value, precision = 0.5) => {
-    let buffer = 0;
-    let word;
+export var getRatingWord = function (value, precision) {
+    if (precision === void 0) { precision = 0.5; }
+    var buffer = 0;
+    var word;
     while (buffer < value) {
         // @ts-expect-error can't remember
         word = RATING_WORDS[buffer];
@@ -18,8 +19,8 @@ export const getRatingWord = (value, precision = 0.5) => {
     }
     return word;
 };
-export const getRatingValue = (value) => {
-    const converted = convertRange(value, [0, 5], [0, 10]);
+export var getRatingValue = function (value) {
+    var converted = convertRange(value, [0, 5], [0, 10]);
     if (converted % 1 === 0) {
         return converted;
     }
@@ -31,15 +32,18 @@ export const getRatingValue = (value) => {
 export function convertRange(value, r1, r2) {
     return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
 }
-export const deriveRating = (title, date, minValue = 3.8, maxValue = 5, minQuantity = 9) => {
-    const entityTime = date.getTime();
-    const nowTime = new Date().getTime();
-    const length = title.length;
-    const value = Number(convertRange(length, [0, 90], [minValue, maxValue]).toFixed(2));
-    const timeDifference = convertRange(nowTime - entityTime, [0, 10000000000000], [minQuantity, 999999]);
-    const count = Math.round(timeDifference / length);
+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; }
+    var entityTime = date.getTime();
+    var nowTime = new Date().getTime();
+    var length = title.length;
+    var value = Number(convertRange(length, [0, 90], [minValue, maxValue]).toFixed(2));
+    var timeDifference = convertRange(nowTime - entityTime, [0, 10000000000000], [minQuantity, 999999]);
+    var count = Math.round(timeDifference / length);
     return {
-        value,
-        count,
+        value: value,
+        count: count,
     };
 };

package/Select/SelectDownshift.js

@@ -1,4 +1,4 @@
-export const Select = null;
+export var Select = null;
 // import { useSelect } from "downshift";
 // export type SelectProps = {
 //   options?: Option[];

package/Select/components.js

@@ -1,18 +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 const SelectArrowStyled = styled(m.span) `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2em;
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-`;
-export const SelectArrow = forwardRef(function SelectArrow({ isOpen, ...props }, ref) {
-    return (_jsx(SelectArrowStyled, { animate: { rotate: isOpen ? 180 : 0 }, ref: ref, ...props, children: _jsx(IconCollapse, {}) }));
+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/Sidebar/Sidebar.js

@@ -1,3 +1,4 @@
+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";
@@ -6,43 +7,17 @@ import { CgCloseR as IconClose } from "react-icons/cg";
 import { max, min } from "../styles/media";
 import { IconButtonFab } from "../Buttons";
 import { useHeader } from "../Header";
-const SidebarWrapper = styled.div `
-  ${(p) => `${max.md} {
-      z-index: 20;
-      display: flex;
-      flex-direction: column;
-      position: fixed;
-      right: 0;
-      left: var(--gutter-half);
-      top: ${p.$top || 0}px;
-      bottom: 0;
-      padding: var(--gutter-half);
-      transform: ${p.$open ? `translateX(0)` : `translateX(100%)`};
-      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
-      background: white;
-      box-shadow: ${p.$open ? `0 0 0 100vh rgba(0, 0, 0, .3)` : `0 0 100vh rgba(0, 0, 0, 0)`};
-      will-change: transform, box-shadow;
-      pointer-events: ${p.$open ? "all" : "none"}
-    }`}
-`;
-const SidebarToggle = styled.span `
-  z-index: 21;
-  position: fixed;
-  right: var(--gutter-half);
-  bottom: var(--gutter-half);
-  ${min.md} {
-    display: none;
-  }
-
-  path {
-    stroke: currentColor;
-  }
-`;
-export const Sidebar = ({ children }) => {
-    const [open, setOpen] = useState(false);
-    const [, , headerHeight] = useHeader();
-    const handleClickToggle = useCallback(() => {
-        setOpen((prevOpen) => !prevOpen);
+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, { onClick: handleClickToggle, children: _jsx(IconButtonFab, { "$variant": "contained", children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) }) }), _jsx(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
+    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/Spacing/Spacing.js

@@ -1,15 +1,13 @@
+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";
 import { spacingTop, spacingBottom, } from "../styles/spacing";
-const Root = styled.div `
-  ${(p) => p.$top && spacingTop.call(p.theme, ...p.$top)}
-  ${(p) => p.$bottom && spacingBottom.call(p.theme, ...p.$bottom)}
-`;
-const extractDirectionArgs = (raw) => {
-    const [size, factor, property, devices] = raw.split(":");
-    const factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
-    const devicesArg = devices?.split(",");
+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];
 };
 /**
@@ -24,9 +22,10 @@ const extractDirectionArgs = (raw) => {
  * <Spacing top="sm:2:padding:tablet,desktop" />
  * ```
  */
-export const Spacing = ({ top, bottom, vertical, ...props }) => {
-    let $top;
-    let $bottom;
+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);
     }
@@ -41,5 +40,6 @@ export const Spacing = ({ top, bottom, vertical, ...props }) => {
         // eslint-disable-next-line react/jsx-no-useless-fragment
         return _jsx(_Fragment, { children: props.children });
     }
-    return _jsx(Root, { "$top": $top, "$bottom": $bottom, ...props });
+    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
 };
+var templateObject_1;

package/Sticky/Sticky.js

@@ -1,4 +1,4 @@
-export const Sticky = null;
+export var Sticky = null;
 // import {
 //   Ref,
 //   CSSProperties,

package/Sticky/StickyCss.js

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