@koine/react 1.0.8 → 1.0.11

package/node/Pagination/PaginationNav.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoinePaginationNav = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const cg_1 = require("react-icons/cg");
+const utils_1 = require("@koine/utils");
+const Root = styled_components_1.default.nav `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0 40px;
+  font-weight: 600;
+
+  & a {
+    text-decoration: none;
+  }
+`;
+const item = `
+  display: block;
+  padding: 5px 10px;
+`;
+const ItemCurrent = styled_components_1.default.span `
+  ${item}
+  background: var(--accent400);
+  border-radius: 2px;
+`;
+const ItemLink = styled_components_1.default.a `
+  ${item}
+
+  ${(props) => (props.prev ? "color: var(--grey100);" : "")}
+`;
+const DotsSeparator = styled_components_1.default.span `
+  color: var(--grey100);
+`;
+const arrow = `display: flex; font-size: 20px;`;
+const ItemPrev = styled_components_1.default.a `
+  ${arrow}
+`;
+const ItemNext = styled_components_1.default.a `
+  ${arrow}
+`;
+/*
+ * Possible outcomes:
+ * [1] 2 3 ... 78 >
+ * < 1 2 [3] 4 5 ... 78 >
+ * < 1 ... 6 7 [8] 9 10 ... 78 >
+ * < 1 ... 75 76 [77] 78 >
+ * < 1 ... 76 77 [78]
+ */
+const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showOffset = 2, currentUrl = "/", Link = "a", }) => {
+    total = (0, utils_1.ensureInt)(total);
+    currentPage = (0, utils_1.ensureInt)(currentPage);
+    perPage = (0, utils_1.ensureInt)(perPage);
+    // page 0 means 1
+    currentPage = currentPage || 1;
+    baseUrl = baseUrl || currentUrl;
+    // don't output anything if pagination is not needed
+    if (total < perPage) {
+        return null;
+    }
+    const firstPage = 1;
+    const lastPage = Math.ceil(total / perPage);
+    const prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
+    const nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
+    const prevArrow = currentPage > firstPage;
+    const nextArrow = currentPage < lastPage;
+    const pages = [];
+    // fill the pages before the current
+    for (let i = currentPage - showOffset; i < currentPage; i++) {
+        if (i > 1) {
+            pages.push(i);
+        }
+    }
+    // add the current
+    pages.push(currentPage);
+    // fill the pages after the current
+    for (let i = currentPage + 1; i < currentPage + 1 + showOffset; i++) {
+        if (i < lastPage) {
+            pages.push(i);
+        }
+    }
+    const prevDots = pages[0] > firstPage + 1;
+    const nextDots = pages[pages.length - 1] < lastPage - 1;
+    return ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, { as: Link, href: `${baseUrl}/${prevPage}`, children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowLeftR, {}) })), firstPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: `${baseUrl}`, prev: true, children: firstPage })), prevDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), pages.map((page) => page === currentPage ? ((0, jsx_runtime_1.jsx)(ItemCurrent, { children: page }, page)) : ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: `${baseUrl}/${page}`, prev: page < currentPage, next: page > currentPage, children: page }, `pagination-${page}`))), nextDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), lastPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: `${baseUrl}/${lastPage}`, next: true, children: lastPage })), nextArrow && ((0, jsx_runtime_1.jsx)(ItemNext, { as: Link, href: `${baseUrl}/${nextPage}`, children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowRightR, {}) }))] }));
+};
+exports.KoinePaginationNav = KoinePaginationNav;

package/node/Pagination/PaginationResults.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationResults = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const framer_motion_1 = require("framer-motion");
+const Root = styled_components_1.default.div `
+  // overflow: hidden;
+`;
+const Inner = (0, styled_components_1.default)(framer_motion_1.m.div) ``;
+const PaginationResults = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, initial: true, children: (0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)(Inner, { initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 }, children: children }) }) }));
+};
+exports.PaginationResults = PaginationResults;

package/node/Pagination/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./PaginationNav"), exports);
+tslib_1.__exportStar(require("./PaginationResults"), exports);

package/node/Pill/Pill.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PillAccentLightOutlined = exports.PillAccentLight = exports.PillGreyLight = exports.Pill = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.Pill = styled_components_1.default.div `
+  display: inline-block;
+  padding: 5px 10px;
+  margin: 0 0.5em 0.5em 0;
+  border-radius: 2px;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 600;
+`;
+exports.PillGreyLight = (0, styled_components_1.default)(exports.Pill) `
+  background: var(--grey800);
+  color: var(--grey100);
+
+  &:hover {
+    color: white;
+    background: var(--grey300);
+  }
+`;
+exports.PillAccentLight = (0, styled_components_1.default)(exports.Pill) `
+  background: var(--accent400);
+  color: var(--grey100);
+
+  &:hover {
+    color: #fff;
+    background: var(--accent300);
+  }
+`;
+exports.PillAccentLightOutlined = (0, styled_components_1.default)(exports.Pill) `
+  border: 1px solid var(--accent300);
+  color: var(--accent200);
+
+  &:hover {
+    color: #fff;
+    background: var(--accent300);
+  }
+`;

package/node/Pill/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Pill"), exports);

package/node/Progress/ProgressCircular.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCircular = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const animationRotation = (0, styled_components_1.keyframes) `
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const animationCircle = (0, styled_components_1.keyframes) `
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+`;
+const ProgressCircularSvg = styled_components_1.default.svg `
+  animation: ${animationRotation} 1.5s linear infinite;
+`;
+const ProgressCircularCircle = styled_components_1.default.circle `
+  animation: ${animationCircle} 1.5s linear infinite;
+`;
+/**
+ * @see https://mui.com/components/progress/
+ */
+const ProgressCircular = ({ size = "1em", thickness = 1, color = "currentColor", ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(ProgressCircularSvg, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 44 44", style: { width: size, height: size }, ...props, children: (0, jsx_runtime_1.jsx)(ProgressCircularCircle, { cx: "22", cy: "22", r: "20", fill: "none", strokeWidth: thickness, style: { stroke: color } }) }));
+};
+exports.ProgressCircular = ProgressCircular;

package/node/Progress/ProgressLinear.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressLinear = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const framer_motion_1 = require("framer-motion");
+const ProgressLinearBg = styled_components_1.default.span `
+  position: relative;
+  overflow: hidden;
+  display: block;
+  height: 4px;
+`;
+const ProgressLinearFg = (0, styled_components_1.default)(framer_motion_1.m.span) `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+`;
+/**
+ * @see https://mui.com/components/progress/#linear
+ */
+const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(ProgressLinearBg, { style: { height, background: bg }, ...props, children: (0, jsx_runtime_1.jsx)(ProgressLinearFg, { style: { height, background: fg }, initial: {
+                x: "-100%",
+            }, animate: {
+                x: done ? "-100%" : "0%",
+            }, transition: done
+                ? {}
+                : {
+                    repeat: Infinity,
+                    repeatType: "reverse",
+                    duration: 2,
+                } }) }));
+};
+exports.ProgressLinear = ProgressLinear;

package/node/Progress/ProgressOverlay.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressOverlay = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const framer_motion_1 = require("framer-motion");
+const ProgressCircular_1 = require("./ProgressCircular");
+const ProgressLinear_1 = require("./ProgressLinear");
+const Header_1 = require("../Header");
+const ProgressOverlayWrap = (0, styled_components_1.default)(framer_motion_1.m.div) `
+  z-index: 10000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  cursor: wait;
+`;
+const ProgressOverlayCenterer = styled_components_1.default.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--progress-overlay-bg);
+`;
+const ProgressOverlay = ({ running }) => {
+    const [, , headerHeight] = (0, Header_1.useHeader)();
+    // const [progress, setProgress] = useState(0);
+    (0, react_1.useEffect)(() => {
+        document.body.style.cursor = running ? "wait" : "";
+    }, [running]);
+    return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, { animate: {
+            opacity: running ? 1 : 0,
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [(0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), (0, jsx_runtime_1.jsx)(ProgressOverlayCenterer, { style: {
+                    top: headerHeight + "px",
+                }, children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
+};
+exports.ProgressOverlay = ProgressOverlay;

package/node/Progress/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ProgressCircular"), exports);
+tslib_1.__exportStar(require("./ProgressLinear"), exports);
+tslib_1.__exportStar(require("./ProgressOverlay"), exports);

package/node/Rating/Rating.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rating = exports.RatingRoot = exports.RatingValue = exports.RatingCount = exports.RatingDetails = exports.RatingStar = exports.RatingStarRoot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const useId_1 = require("../hooks/useId");
+exports.RatingStarRoot = styled_components_1.default.svg `
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 1px;
+`;
+const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props }) => {
+    const id = (0, useId_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)(exports.RatingStarRoot, { viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px", ...props, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), (0, jsx_runtime_1.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" })] }));
+};
+exports.RatingStar = RatingStar;
+exports.RatingDetails = styled_components_1.default.span `
+  padding-left: 0.5em;
+  font-size: 12px;
+  color: var(--grey100);
+
+  &:before {
+    content: "(";
+  }
+  &:after {
+    content: ")";
+  }
+`;
+exports.RatingCount = styled_components_1.default.span ``;
+exports.RatingValue = styled_components_1.default.span `
+  display: none;
+`;
+exports.RatingRoot = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+
+  &:hover ${exports.RatingValue} {
+    display: inline-block;
+  }
+`;
+const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16, }) => {
+    const id = (0, useId_1.useId)();
+    const [currentValue /* , _setCurrentValue */] = (0, react_1.useState)(value);
+    const [stars, setStars] = (0, react_1.useState)([]);
+    const getStars = (0, react_1.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) {
+                starValue = 1;
+            }
+            else {
+                starValue = 0;
+            }
+            stars.push({ value: starValue });
+        }
+        return stars;
+    }, [min, max]);
+    (0, react_1.useEffect)(() => {
+        setStars(getStars(currentValue));
+    }, [currentValue, getStars]);
+    // function updateStars(index) {
+    //   var currentActive = stars.filter((x) => x.active);
+    //   if (index !== currentActive.length) {
+    //     setStars(getStars(index));
+    //   }
+    // }
+    // function handleMouseOver(event) {
+    //   let index = Number(event.currentTarget.getAttribute("data-idx")) + 1;
+    //   updateStars(index);
+    // }
+    // function handleMouseLeave() {
+    //   setStars(getStars());
+    // }
+    // const handleClick = useCallback((event) => {
+    //   let index = Number(event.currentTarget.getAttribute("data-idx"));
+    //   let value  = index = index + 1;
+    //   if (value !== currentValue) {
+    //     setStars(getStars(value));
+    //     setCurrentValue(value);
+    //     onChange(value);
+    //   }
+    // }, [onChange];
+    return ((0, jsx_runtime_1.jsxs)(exports.RatingRoot, { children: [stars.map((star, idx) => ((0, jsx_runtime_1.jsx)(exports.RatingStar, { idx: idx, dataIdx: idx, size: starSize, 
+                // onMouseOver={handleMouseOver}
+                // onMouseLeave={handleMouseLeave}
+                // onClick={handleClick}
+                value: star.value, colorBg: colorBg, colorStroke: colorStroke }, id + idx))), " ", showDetails && count && ((0, jsx_runtime_1.jsxs)(exports.RatingDetails, { children: [(0, jsx_runtime_1.jsx)(exports.RatingCount, { children: count }), (0, jsx_runtime_1.jsx)(exports.RatingValue, { children: ` - ${value}` })] }))] }));
+};
+exports.Rating = Rating;

package/node/Rating/index.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deriveRating = exports.convertRange = exports.getRatingValue = exports.getRatingWord = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Rating"), exports);
+const RATING_WORDS = {
+    0: "Worst",
+    1: "Bad",
+    2: "Mediocre",
+    3: "Good",
+    4: "Great",
+    4.5: "Excellent",
+    5: "Best",
+};
+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;
+};
+exports.getRatingWord = getRatingWord;
+const getRatingValue = (value) => {
+    const 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) {
+    return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
+}
+exports.convertRange = convertRange;
+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,
+        count,
+    };
+};
+exports.deriveRating = deriveRating;

package/node/Select/SelectDownshift.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+exports.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/node/Select/components.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectArrow = exports.SelectArrowStyled = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const framer_motion_1 = require("framer-motion");
+const bs_1 = require("react-icons/bs");
+exports.SelectArrowStyled = (0, styled_components_1.default)(framer_motion_1.m.span) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2em;
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+`;
+exports.SelectArrow = (0, react_1.forwardRef)(function SelectArrow({ isOpen, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(exports.SelectArrowStyled, { animate: { rotate: isOpen ? 180 : 0 }, ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(bs_1.BsBoxArrowInDown, {}) }));
+});

package/node/Select/index.js

@@ -0,0 +1,7 @@
+"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/node/Sidebar/Sidebar.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const gr_1 = require("react-icons/gr");
+const cg_1 = require("react-icons/cg");
+const media_1 = require("../styles/media");
+const Buttons_1 = require("../Buttons");
+const Header_1 = require("../Header");
+const SidebarWrapper = styled_components_1.default.div `
+  ${(p) => `${media_1.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_components_1.default.span `
+  z-index: 21;
+  position: fixed;
+  right: var(--gutter-half);
+  bottom: var(--gutter-half);
+  ${media_1.min.md} {
+    display: none;
+  }
+
+  path {
+    stroke: currentColor;
+  }
+`;
+const Sidebar = ({ children }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [, , headerHeight] = (0, Header_1.useHeader)();
+    const handleClickToggle = (0, react_1.useCallback)(() => {
+        setOpen((prevOpen) => !prevOpen);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarToggle, { onClick: handleClickToggle, children: (0, jsx_runtime_1.jsx)(Buttons_1.IconButtonFab, { "$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, { "$open": open, "$top": headerHeight, children: children })] }));
+};
+exports.Sidebar = Sidebar;

package/node/Sidebar/index.js

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

package/node/Spacing/Spacing.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const utils_1 = require("@koine/utils");
+const spacing_1 = require("../styles/spacing");
+const Root = styled_components_1.default.div `
+  ${(p) => p.$top && spacing_1.spacingTop.call(p.theme, ...p.$top)}
+  ${(p) => p.$bottom && spacing_1.spacingBottom.call(p.theme, ...p.$bottom)}
+`;
+const extractDirectionArgs = (raw) => {
+    const [size, factor, property, devices] = raw.split(":");
+    const factorArg = (0, utils_1.isUndefined)(factor) ? undefined : parseFloat(factor);
+    const devicesArg = 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" />
+ * ```
+ */
+const Spacing = ({ top, bottom, vertical, ...props }) => {
+    let $top;
+    let $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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
+    }
+    return (0, jsx_runtime_1.jsx)(Root, { "$top": $top, "$bottom": $bottom, ...props });
+};
+exports.Spacing = Spacing;

package/node/Spacing/index.js

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