@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

package/Rating/Rating.mjs

@@ -1,44 +1,108 @@
-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 styled from "styled-components";
-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", { 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 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 /*#__PURE__*/ _jsxs(RatingStarRoot, {
+        viewBox: "0 0 16 16",
+        "data-value": value,
+        width: size + "px",
+        height: size + "px",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("defs", {
+                children: /*#__PURE__*/ _jsxs("linearGradient", {
+                    id: id,
+                    x1: "0",
+                    y1: "0",
+                    x2: "1",
+                    y2: "0",
+                    children: [
+                        /*#__PURE__*/ _jsx("stop", {
+                            offset: "0",
+                            stopColor: colorBg
+                        }),
+                        /*#__PURE__*/ _jsx("stop", {
+                            offset: value,
+                            stopColor: colorBg
+                        }),
+                        /*#__PURE__*/ _jsx("stop", {
+                            offset: value,
+                            stopColor: "rgba(255, 255, 255, 0)"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _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"
+            })
+        ]
+    });
 };
-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);
+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);
             // we have a rating of 3.4, when we get to the 4th star:
             if (roundedActiveCount === currentStar - 1) {
                 starValue = 1 - (currentStar - activeCount);
-            }
-            else if (roundedActiveCount >= currentStar) {
+            } else if (roundedActiveCount >= currentStar) {
                 starValue = 1;
-            }
-            else {
+            } else {
                 starValue = 0;
             }
-            stars.push({ value: starValue });
+            stars.push({
+                value: starValue
+            });
         }
         return stars;
-    }, [min, max]);
-    useEffect(function () {
+    }, [
+        min,
+        max
+    ]);
+    useEffect(()=>{
         setStars(getStars(currentValue));
-    }, [currentValue, getStars]);
+    }, [
+        currentValue,
+        getStars
+    ]);
     // function updateStars(index) {
     //   var currentActive = stars.filter((x) => x.active);
     //   if (index !== currentActive.length) {
@@ -61,10 +125,30 @@ export var Rating = function (_a) {
     //     onChange(value);
     //   }
     // }, [onChange];
-    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: " - ".concat(value) })] }))] }));
+    return /*#__PURE__*/ _jsxs(RatingRoot, {
+        children: [
+            stars.map((star, idx)=>/*#__PURE__*/ _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 && /*#__PURE__*/ _jsxs(RatingDetails, {
+                children: [
+                    /*#__PURE__*/ _jsx(RatingCount, {
+                        children: count
+                    }),
+                    /*#__PURE__*/ _jsx(RatingValue, {
+                        children: ` - ${value}`
+                    })
+                ]
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Rating/index.mjs

@@ -1,26 +1,31 @@
 export * from "./Rating";
-var RATING_WORDS = {
+const RATING_WORDS = {
     0: "Worst",
     1: "Bad",
     2: "Mediocre",
     3: "Good",
     4: "Great",
     4.5: "Excellent",
-    5: "Best",
+    5: "Best"
 };
-export var getRatingWord = function (value, precision) {
-    if (precision === void 0) { precision = 0.5; }
-    var buffer = 0;
-    var word;
-    while (buffer < value) {
+export const getRatingWord = (value, precision = 0.5)=>{
+    let buffer = 0;
+    let word;
+    while(buffer < value){
         // @ts-expect-error can't remember
         word = RATING_WORDS[buffer];
         buffer += precision;
     }
     return word;
 };
-export var getRatingValue = function (value) {
-    var converted = convertRange(value, [0, 5], [0, 10]);
+export const getRatingValue = (value)=>{
+    const converted = convertRange(value, [
+        0,
+        5
+    ], [
+        0,
+        10
+    ]);
     if (converted % 1 === 0) {
         return converted;
     }
@@ -28,22 +33,30 @@ export var getRatingValue = function (value) {
 };
 /**
  * @see https://stackoverflow.com/a/14224813
- */
-export function convertRange(value, r1, r2) {
-    return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
+ */ export 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) {
-    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);
+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);
     return {
-        value: value,
-        count: count,
+        value,
+        count
     };
 };

package/Select/SelectDownshift.mjs

@@ -1,38 +1,37 @@
-export var Select = null;
-// import { useSelect } from "downshift";
-// export type SelectProps = {
-//   options?: Option[];
-// };
-// export const Select = ({ options = [] }: SelectProps) => {
-//   const {
-//     isOpen,
-//     selectedItem,
-//     getToggleButtonProps,
-//     getLabelProps,
-//     getMenuProps,
-//     highlightedIndex,
-//     getItemProps,
-//   } = useSelect({ items: options });
-//   return (
-//     <div>
-//       <label {...getLabelProps()}>Choose an element:</label>
-//       <button type="button" {...getToggleButtonProps()}>
-//         {selectedItem || "Elements"}
-//       </button>
-//       <ul {...getMenuProps()}>
-//         {isOpen &&
-//           options.map((item, index) => (
-//             <li
-//               style={
-//                 highlightedIndex === index ? { backgroundColor: "#bde4ff" } : {}
-//               }
-//               key={`${item.value}${index}`}
-//               {...getItemProps({ item, index })}
-//             >
-//               {item.label}
-//             </li>
-//           ))}
-//       </ul>
-//     </div>
-//   );
-// };
+export const Select = null; // import { useSelect } from "downshift";
+ // export type SelectProps = {
+ //   options?: Option[];
+ // };
+ // export const Select = ({ options = [] }: SelectProps) => {
+ //   const {
+ //     isOpen,
+ //     selectedItem,
+ //     getToggleButtonProps,
+ //     getLabelProps,
+ //     getMenuProps,
+ //     highlightedIndex,
+ //     getItemProps,
+ //   } = useSelect({ items: options });
+ //   return (
+ //     <div>
+ //       <label {...getLabelProps()}>Choose an element:</label>
+ //       <button type="button" {...getToggleButtonProps()}>
+ //         {selectedItem || "Elements"}
+ //       </button>
+ //       <ul {...getMenuProps()}>
+ //         {isOpen &&
+ //           options.map((item, index) => (
+ //             <li
+ //               style={
+ //                 highlightedIndex === index ? { backgroundColor: "#bde4ff" } : {}
+ //               }
+ //               key={`${item.value}${index}`}
+ //               {...getItemProps({ item, index })}
+ //             >
+ //               {item.label}
+ //             </li>
+ //           ))}
+ //       </ul>
+ //     </div>
+ //   );
+ // };

package/Select/components.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const SelectArrowStyled: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLSpanElement, import("framer-motion").HTMLMotionProps<"span">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectArrowStyled: any;
 export type SelectArrowProps = {
     isOpen?: boolean;
 };

package/Select/components.mjs

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

package/Select/index.mjs

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

package/Sidebar/Sidebar.mjs

@@ -1,23 +1,63 @@
-import { __makeTemplateObject } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { GrFolderOpen as IconOpen } from "react-icons/gr";
+import styled from "styled-components";
 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; });
+import { max, min } from "../styles/media";
+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);
     }, []);
-    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 /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(SidebarToggle, {
+                onClick: handleClickToggle,
+                children: /*#__PURE__*/ _jsx(IconButtonFab, {
+                    $variant: "contained",
+                    children: open ? /*#__PURE__*/ _jsx(IconClose, {}) : /*#__PURE__*/ _jsx(IconOpen, {})
+                })
+            }),
+            /*#__PURE__*/ _jsx(SidebarWrapper, {
+                $open: open,
+                $top: headerHeight,
+                children: children
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2;

package/Spacing/Spacing.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SpacingSize, SpacingFactor, SpacingProperty, SpacingDirectionAxis, SpacingDevices } from "../styles/spacing";
+import { SpacingDevices, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize } from "../styles/spacing";
 export type SpacingPropsStyled = {
     $top?: SpacingFnArgs;
     $bottom?: SpacingFnArgs;

package/Spacing/Spacing.mjs

@@ -1,14 +1,21 @@
-import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } 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];
+import { spacingBottom, spacingTop } 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(",");
+    return [
+        size,
+        factorArg,
+        property,
+        devicesArg
+    ];
 };
 /**
  * Usage:
@@ -21,11 +28,9 @@ var extractDirectionArgs = function (raw) {
  * <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;
+ */ export const Spacing = ({ top, bottom, vertical, ...props })=>{
+    let $top;
+    let $bottom;
     if (top) {
         $top = extractDirectionArgs(top);
     }
@@ -38,8 +43,13 @@ 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 /*#__PURE__*/ _jsx(_Fragment, {
+            children: props.children
+        });
     }
-    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
+    return /*#__PURE__*/ _jsx(Root, {
+        $top: $top,
+        $bottom: $bottom,
+        ...props
+    });
 };
-var templateObject_1;