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

package/Rating/Rating.mjs

@@ -1,70 +0,0 @@
-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 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);
-            }
-            else if (roundedActiveCount >= currentStar) {
-                starValue = 1;
-            }
-            else {
-                starValue = 0;
-            }
-            stars.push({ value: starValue });
-        }
-        return stars;
-    }, [min, max]);
-    useEffect(function () {
-        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 (_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) })] }))] }));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Rating/index.mjs

@@ -1,49 +0,0 @@
-export * from "./Rating";
-var RATING_WORDS = {
-    0: "Worst",
-    1: "Bad",
-    2: "Mediocre",
-    3: "Good",
-    4: "Great",
-    4.5: "Excellent",
-    5: "Best",
-};
-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];
-        buffer += precision;
-    }
-    return word;
-};
-export var getRatingValue = function (value) {
-    var converted = convertRange(value, [0, 5], [0, 10]);
-    if (converted % 1 === 0) {
-        return converted;
-    }
-    return converted.toFixed(1);
-};
-/**
- * @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 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: value,
-        count: count,
-    };
-};

package/Rating/package.json

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

package/Select/SelectDownshift.mjs

@@ -1,38 +0,0 @@
-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>
-//   );
-// };

package/Select/components.mjs

@@ -1,12 +0,0 @@
-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.mjs

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

package/Select/package.json

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

package/Sidebar/Sidebar.mjs

@@ -1,23 +0,0 @@
-import { __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, { onClick: handleClickToggle, children: _jsx(IconButtonFab, { "$variant": "contained", children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) }) }), _jsx(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
-};
-var templateObject_1, templateObject_2;

package/Sidebar/index.mjs

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

package/Sidebar/package.json

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

package/Spacing/Spacing.mjs

@@ -1,45 +0,0 @@
-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.mjs

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

package/Spacing/package.json

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

package/Sticky/Sticky.mjs

@@ -1,219 +0,0 @@
-export var Sticky = null;
-// import {
-//   Ref,
-//   CSSProperties,
-//   useState,
-//   useCallback,
-//   useEffect,
-//   useRef,
-// } from "react";
-// /**
-//  * Get current coordinates `left` and `top` of specific element.
-//  */
-// const offsetRelative = (element: HTMLElement) => {
-//   var result = { l: 0, t: 0 };
-//   do {
-//     let offsetTop = element.offsetTop;
-//     let offsetLeft = element.offsetLeft;
-//     if (!isNaN(offsetTop)) result.t += offsetTop;
-//     if (!isNaN(offsetLeft)) result.l += offsetLeft;
-//     // @ts-expect-error just rething everyhting in this file
-//     element =
-//       "BODY" === element.tagName ? element.parentElement : element.offsetParent;
-//   } while (element);
-//   return result;
-// };
-// export type StickyElementProps = {
-//   ref: Ref<HTMLDivElement>;
-//   sticky?: boolean;
-//   style: CSSProperties;
-// };
-// /**
-//  * - `0`: "STATIC": Static position as nothing happened
-//  * - `1`: "VIEWPORT-TOP": Sticked to the top screen edge
-//  * - `2`: "VIEWPORT-BOTTOM": Sticked to the bottom screen edge
-//  * - `4`: "VIEWPORT-UNBOTTOM": ? Scrolling in the middle of the element, neither sticked nor static
-//  * - `3`: "CONTAINER-BOTTOM": ?
-//  */
-// export type StickyStatus = 0 | 1 | 2 | 3;
-// type DimensionsBasic = [
-//   /** containerTop */
-//   number,
-//   /** containerHeight */
-//   number,
-//   /** containerBottom */
-//   number,
-//   /** elementHeight */
-//   number,
-//   /** elementWidth */
-//   number,
-//   /** viewportHeight */
-//   number,
-//   /** maxTranslateY */
-//   number
-// ];
-// type DimensionsOnScroll = [
-//   /** elementLeft */
-//   number,
-//   /** viewportTop */
-//   number,
-//   /** viewportBottom */
-//   number,
-//   /** viewportLeft */
-//   number,
-//   /** topSpacing */
-//   number,
-//   /** bottomSpacing */
-//   number
-//   /** translateY */
-//   // number,
-//   /** lastTopSpacing */
-//   // number,
-//   /** lastBottomSpacing */
-//   // number,
-//   /** lastViewportTop */
-//   // number,
-// ];
-// type Dimensions = DimensionsBasic & DimensionsOnScroll;
-// const getDimensionsBasic = (container: HTMLElement, inner: HTMLElement) => {
-//   const containerTop = offsetRelative(container).t;
-//   const containerHeight = container.clientHeight;
-//   const containerBottom = containerTop + containerHeight;
-//   const elementHeight = inner.offsetHeight;
-//   const elementWidth = inner.offsetWidth;
-//   const viewportHeight = window.innerHeight;
-//   const maxTranslateY = containerHeight - elementHeight;
-//   return [
-//     containerTop,
-//     containerHeight,
-//     containerBottom,
-//     elementHeight,
-//     elementWidth,
-//     viewportHeight,
-//     maxTranslateY,
-//   ] as DimensionsBasic;
-// };
-// const getDimensionsOnScroll = (
-//   wrapper: HTMLElement,
-//   container: HTMLElement,
-//   inner: HTMLElement
-// ) => {
-//   const elementLeft = offsetRelative(wrapper).l;
-//   const viewportTop =
-//     document.documentElement.scrollTop || document.body.scrollTop;
-//   const viewportBottom = viewportTop + window.innerHeight;
-//   const viewportLeft =
-//     document.documentElement.scrollLeft || document.body.scrollLeft;
-//   const topSpacing = 0; // TODO: make it a prop?
-//   const bottomSpacing = 0; // TODO: make it a prop?
-//   // const lastTopSpacing = topSpacing;
-//   // const lastBottomSpacing = bottomSpacing;
-//   return [
-//     elementLeft,
-//     viewportTop,
-//     viewportBottom,
-//     viewportLeft,
-//     topSpacing,
-//     bottomSpacing,
-//   ] as DimensionsOnScroll;
-// };
-// // const getTranslateYonScroll = (dimensions: DimensionsOnScroll, status: StickyStatus) => {
-// //   if (status === 1) {
-// //     // Adjust translate Y in the case decrease top spacing value.
-// //     if (dimensions[5] < dims.lastTopSpacing) {
-// //       dims.translateY += dims.lastTopSpacing - dims.topSpacing;
-// //       this._reStyle = true;
-// //     }
-// //   } else if (status === 2) {
-// //     // Adjust translate Y in the case decrease bottom spacing value.
-// //     if (dims.bottomSpacing < dims.lastBottomSpacing) {
-// //       dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
-// //       this._reStyle = true;
-// //     }
-// //   }
-// // }
-// export type StickyProps = {
-//   /** @default "div" */
-//   Wrapper?: FC<StickyElementProps>;
-//   /** @default "div" */
-//   Inner?: FC<StickyElementProps>;
-//   top: number;
-// };
-// export const Sticky: FC<StickyProps> = ({
-//   Wrapper = "div",
-//   Inner = "div",
-//   children,
-//   top,
-//   ...props
-// }) => {
-//   const [sticky, setSticky] = useState(false);
-//   const [shouldRestyle, setShouldRestyle] = useState<boolean>();
-//   const stickyStatus = useRef<StickyStatus>(0);
-//   const [dimensionsBasic, setDimensionsBasic] = useState<DimensionsBasic>();
-//   const [dimensionsOnScroll, setDimensionsOnScroll] =
-//     useState<DimensionsOnScroll>();
-//   const [translateY, setTranslateY] = useState<number>(0);
-//   const [styleWrapper, setStyleWrapper] = useState({});
-//   const [styleInner, setStyleInner] = useState({});
-//   const [innerWidth, setInnerWidth] = useState<string>();
-//   const wrapperRef = useRef<HTMLDivElement>(null);
-//   const innerRef = useRef<HTMLDivElement>(null);
-//   const handleScroll = useCallback(() => {
-//     const wrapper = wrapperRef?.current;
-//     const container = wrapper?.parentElement || null;
-//     const inner = innerRef?.current;
-//     if (wrapper && inner && container) {
-//       const dimensions = getDimensionsOnScroll(wrapper, container, inner);
-//       setDimensionsOnScroll(dimensions);
-//     }
-//   }, []);
-//   const handleResize = useCallback(() => {
-//     const container = wrapperRef?.current?.parentElement || null;
-//     const inner = innerRef?.current;
-//     if (inner && container) {
-//       setDimensionsBasic(getDimensionsBasic(container, inner));
-//       // if (innerRef?.current) {
-//       //   setInnerWidth(window.getComputedStyle(innerRef.current).width);
-//       // }
-//       // setSticky(wrapperRef.current.getBoundingClientRect().top <= top);
-//     }
-//   }, []);
-//   useEffect(() => {
-//     const container = wrapperRef?.current?.parentElement || null;
-//     const inner = innerRef?.current;
-//     if (inner && container) {
-//       setDimensionsBasic(getDimensionsBasic(container, inner));
-//     }
-//     window.addEventListener("scroll", handleScroll, { passive: true });
-//     window.addEventListener("resize", handleResize, { passive: true });
-//     return () => {
-//       window.removeEventListener("scroll", () => handleScroll);
-//       window.removeEventListener("resize", () => handleResize);
-//     };
-//   }, [wrapperRef, innerRef, handleScroll, handleResize]);
-//   // useEffect(() => {
-//   //   if (sticky) {
-//   //     setStyleInner({
-//   //       position: "fixed",
-//   //       zIndex: 1,
-//   //       top,
-//   //       width: innerWidth,
-//   //     });
-//   //   } else {
-//   //     setStyleInner({});
-//   //   }
-//   // }, [sticky, top, innerWidth]);
-//   return (
-//     <Wrapper
-//       ref={wrapperRef}
-//       sticky={Wrapper === "div" ? undefined : sticky}
-//       style={{
-//         position: "relative",
-//       }}
-//     >
-//       <Inner ref={innerRef} style={styleInner}>
-//         {children}
-//       </Inner>
-//     </Wrapper>
-//   );
-// };

package/Sticky/StickyCss.mjs

@@ -1,6 +0,0 @@
-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.mjs

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

package/Sticky/package.json

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

package/Tabs/TabsMui.mjs

@@ -1,49 +0,0 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import TabsUnstyled from "@mui/base/Tabs";
-import TabsListUnstyled from "@mui/base/TabsList";
-import TabUnstyled from "@mui/base/Tab";
-import useTab from "@mui/base/useTab";
-import TabPanelUnstyled from "@mui/base/TabPanel";
-import { extendComponent, } from "../helpers";
-export var Root = TabsUnstyled;
-export var List = TabsListUnstyled;
-// export const Tab = TabUnstyled as unknown as Props["Tab"];
-export var Indicator = "span";
-export var Panel = TabPanelUnstyled;
-export var Tab = forwardRef(function Tab(_a, ref) {
-    var children = _a.children, 
-    // component,
-    slot = _a.slot, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = __rest(_a, ["children", "slot", "slotProps", "slots", "Indicator"]);
-    var _b = useTab(__assign(__assign({}, props), { rootRef: ref })), active = _b.active, /* disabled, */ selected = _b.selected;
-    var indicatorProps = { active: active, /* disabled, */ selected: selected };
-    return (_jsxs(TabUnstyled /* ref={ref}  */, __assign({}, props, { children: [children, Indicator && _jsx(Indicator, __assign({}, indicatorProps))] })));
-});
-/**
- *
- * Main differences from [Mui Tabs](https://mui.com/material-ui/react-dialog):
- *
- * @resources
- * - [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tabpanel)
- * - [WAI-ARIA example](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html)
- * - [[Proposal] New tags tabsection, tablist, tab, tabpanel](https://github.com/whatwg/html/issues/1809)
- * - [Native <tab> elements](https://github.com/w3c/html/issues/1704)
- * - [Let's talk about Native HTML Tabs](https://daverupert.com/2021/10/native-html-tabs/)
- *
- * @similar
- * - [Zertz/react-headless-tabs](https://github.com/Zertz/react-headless-tabs)
- *
- * FIXME: it actually works even without forwardRef, check if we do need it
- */
-var TabsWithRef = forwardRef(function Tabs(_a, ref) {
-    var _Root = _a.Root, _List = _a.List, _Tab = _a.Tab, _Indicator = _a.Indicator, _Panel = _a.Panel, props = __rest(_a, ["Root", "List", "Tab", "Indicator", "Panel"]);
-    return _jsx(Root, __assign({}, props, { ref: ref }));
-});
-export var KoineTabs = extendComponent(TabsWithRef, {
-    Root: Root,
-    List: List,
-    Tab: Tab,
-    Indicator: Indicator,
-    Panel: Panel,
-});

package/Tabs/index.mjs

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

package/Tabs/package.json

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