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

package/Grid/Grid.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { Theme, Breakpoint } from "../styles/theme";
+import { CSSProperties } from "styled-components";
+import type { Breakpoint, Theme } from "../styles/theme";
 export declare const GRID_COLUMNS = 12;
 export declare const GRID_GUTTER_DEFAULT: keyof Theme["gutter"];
 export type GridProps = {
@@ -12,23 +13,14 @@ export type ContainerProps = React.PropsWithChildren<GridProps & {
     size: Breakpoint;
     clamp?: boolean;
 }>;
-export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    size: Breakpoint;
-    clamp?: boolean | undefined;
-} & {
-    children?: import("react").ReactNode;
-}, never>;
+export declare const Container: any;
 export type ContainerFluidProps = React.PropsWithChildren<GridProps & {
     size: Breakpoint;
 }>;
-export declare const ContainerFluid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    size: Breakpoint;
-} & {
-    children?: import("react").ReactNode;
-}, never>;
+export declare const ContainerFluid: any;
 type Direction = "min" | "max";
 export type RowProps = GridProps & {
-    $valign?: React.CSSProperties["alignItems"];
+    $valign?: CSSProperties["alignItems"];
     $reverse?: `${Direction}:${Breakpoint}`;
     /**
      * It forces child columns to be on one line overflowing the content when it does not fit,
@@ -37,16 +29,7 @@ export type RowProps = GridProps & {
      */
     $noWrap?: boolean;
 };
-export declare const Row: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    $valign?: React.CSSProperties["alignItems"];
-    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
-    /**
-     * It forces child columns to be on one line overflowing the content when it does not fit,
-     * it is suggested to use with children having a minimum width not in percentage,
-     * for things like sliders and carousels
-     */
-    $noWrap?: boolean | undefined;
-}, never>;
+export declare const Row: any;
 export type ColProps = GridProps & Partial<Record<Breakpoint, number>> & {
     $width?: number;
     $flex?: boolean;
@@ -54,11 +37,5 @@ export type ColProps = GridProps & Partial<Record<Breakpoint, number>> & {
     $auto?: boolean;
     $offset?: string;
 };
-export declare const Col: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & Partial<Record<Breakpoint, number>> & {
-    $width?: number | undefined;
-    $flex?: boolean | undefined;
-    $valign?: React.CSSProperties["alignItems"];
-    $auto?: boolean | undefined;
-    $offset?: string | undefined;
-}, never>;
+export declare const Col: any;
 export {};

package/Grid/Grid.mjs

@@ -1,53 +1,75 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var GRID_COLUMNS = 12;
-export var GRID_GUTTER_DEFAULT = "half";
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"], ["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"])), function (p) { return p.theme.breakpoints[p.size]; }, function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.clamp ? "overflow: hidden;" : ""); });
-export var ContainerFluid = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; });
-export var Row = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"], ["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;"); }, function (p) { return (p.$valign ? "align-items: ".concat(p.$valign) : ""); }, function (p) {
-    return p.$reverse &&
-        "@media (".concat(p.$reverse.split(":")[0], "-width: ").concat(p.$reverse.split(":")[1], "px) {\n      flex-direction: row-reverse;\n    }");
-});
-export var Col = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"], ["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$flex ? "flex" : "block"); }, function (p) { return (p.$valign ? "align-items: " + p.$valign : ""); }, function (p) { return getColCss(p); });
+export const GRID_COLUMNS = 12;
+export const GRID_GUTTER_DEFAULT = "half";
+export const Container = styled.div`
+  max-width: ${(p)=>p.theme.breakpoints[p.size]}px;
+  margin: 0 auto;
+  padding: 0 ${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+  ${(p)=>p.clamp ? "overflow: hidden;" : ""}
+`;
+export const ContainerFluid = styled.div`
+  padding: 0 ${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+`;
+export const Row = styled.div`
+  margin: 0 -${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+  display: flex;
+  ${(p)=>p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;"}
+  ${(p)=>p.$valign ? `align-items: ${p.$valign}` : ""};
+  ${(p)=>p.$reverse && `@media (${p.$reverse.split(":")[0]}-width: ${p.$reverse.split(":")[1]}px) {
+      flex-direction: row-reverse;
+    }`}
+`;
+export const Col = styled.div`
+  padding: 0 ${(p)=>p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
+  display: ${(p)=>p.$flex ? "flex" : "block"};
+  ${(p)=>p.$valign ? "align-items: " + p.$valign : ""};
+  ${(p)=>getColCss(p)};
+`;
 function getColWidth(breakpoints, breakpoint, value) {
-    var breakpointValue = breakpoints[breakpoint] + "px";
-    var width = (value * 100) / GRID_COLUMNS;
-    var cssValue = "\n    min-width: ".concat(width, "%;\n    flex: 0 0 ").concat(width, "%;\n");
+    const breakpointValue = breakpoints[breakpoint] + "px";
+    const width = value * 100 / GRID_COLUMNS;
+    const cssValue = `
+    min-width: ${width}%;
+    flex: 0 0 ${width}%;
+`;
     if (breakpoint === Object.keys(breakpoints)[0]) {
         return cssValue;
     }
-    return "\n  @media (min-width: ".concat(breakpointValue, "){\n    ").concat(cssValue, "\n  }");
+    return `
+  @media (min-width: ${breakpointValue}){
+    ${cssValue}
+  }`;
 }
 function getColCss(props) {
-    var $auto = props.$auto, $offset = props.$offset, $width = props.$width;
-    var breakpoints = props.theme.breakpoints;
-    var css = "";
+    const { $auto, $offset, $width } = props;
+    const { breakpoints } = props.theme;
+    let css = "";
     if ($offset) {
-        var offsets = $offset.split(",");
-        for (var i = 0; i <= offsets.length; i++) {
+        const offsets = $offset.split(",");
+        for(let i = 0; i <= offsets.length; i++){
             if (offsets[i]) {
-                var _a = offsets[i].split(":"), offsetBreakpoint = _a[0], offsetSize = _a[1];
-                css += " \n          @media(min-width: ".concat(breakpoints[offsetBreakpoint], "px){\n            margin-left: ").concat((100 * offsetSize) / GRID_COLUMNS, "%;\n          }\n        ");
+                const [offsetBreakpoint, offsetSize] = offsets[i].split(":");
+                css += ` 
+          @media(min-width: ${breakpoints[offsetBreakpoint]}px){
+            margin-left: ${100 * offsetSize / GRID_COLUMNS}%;
+          }
+        `;
             }
         }
     }
     if ($width) {
-        // do nothing, width is set explicitly
-    }
-    else if ($auto) {
-        css += "flex: 0 0 auto; width: auto; max-width: none;";
-    }
-    else {
-        for (var breakpoint in breakpoints) {
-            var value = props[breakpoint];
+    // do nothing, width is set explicitly
+    } else if ($auto) {
+        css += `flex: 0 0 auto; width: auto; max-width: none;`;
+    } else {
+        for(const breakpoint in breakpoints){
+            const value = props[breakpoint];
             if (typeof value !== "undefined") {
                 css += getColWidth(breakpoints, breakpoint, value);
-            }
-            else if (breakpoint === "xs") {
+            } else if (breakpoint === "xs") {
                 css += getColWidth(breakpoints, breakpoint, 12);
             }
         }
     }
     return css;
 }
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Hamburger/Hamburger.mjs

@@ -1,52 +1,79 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @file
  *
  * Simplified from https://github.com/luukdv/hamburger-react
- */
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-var HamburgerLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"], ["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"])), function (_a) {
-    var $toggled = _a.$toggled;
-    return ($toggled ? "0" : "9px");
-});
-var area = 48;
-var lines = 3;
-var width = 32;
-var room = Math.round((area - width) / 2);
-var barHeightRaw = width / 12;
-var barHeight = Math.round(barHeightRaw);
-var space = 0.5;
-var marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
-var margin = Math.round(marginRaw);
-var height = barHeight * lines + margin * (lines - 1);
-var topOffset = Math.round((area - height) / 2);
-var translate = 4.6325;
-var deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
-var move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
-var time = 0.4;
-var easing = "cubic-bezier(0, 0, 0, 1)";
-var transition = "".concat(time, "s ").concat(easing);
-var burgerStyles = {
+const HamburgerLabel = styled.div`
+  position: absolute;
+  top: 30px;
+  font-size: ${({ $toggled })=>$toggled ? "0" : "9px"};
+  text-transform: uppercase;
+  left: 7px;
+  letter-spacing: 3px;
+`;
+const area = 48;
+const lines = 3;
+const width = 32;
+const room = Math.round((area - width) / 2);
+const barHeightRaw = width / 12;
+const barHeight = Math.round(barHeightRaw);
+const space = 0.5;
+const marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
+const margin = Math.round(marginRaw);
+const height = barHeight * lines + margin * (lines - 1);
+const topOffset = Math.round((area - height) / 2);
+const translate = 4.6325;
+const deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
+const move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
+const time = 0.4;
+const easing = "cubic-bezier(0, 0, 0, 1)";
+const transition = `${time}s ${easing}`;
+const burgerStyles = {
     marginRight: "-8px",
     position: "relative",
-    width: "".concat(area, "px"),
-    height: "".concat(area, "px"),
+    width: `${area}px`,
+    height: `${area}px`,
     userSelect: "none",
     outline: "0px",
     cursor: "pointer",
-    transition: transition,
+    transition
 };
-var barStyles = {
+const barStyles = {
     position: "absolute",
-    width: "".concat(width, "px"),
-    height: "".concat(barHeight, "px"),
-    left: "".concat(room, "px"),
+    width: `${width}px`,
+    height: `${barHeight}px`,
+    left: `${room}px`,
     background: "currentColor",
-    transition: transition,
+    transition
 };
-export var Hamburger = function (_a) {
-    var toggled = _a.toggled, props = __rest(_a, ["toggled"]);
-    return (_jsxs("div", __assign({ style: __assign(__assign({}, burgerStyles), { transform: "".concat(toggled ? "rotate(90deg)" : "none") }), tabIndex: 0 }, props, { children: [_jsx("div", { style: __assign(__assign({}, barStyles), { top: "".concat(topOffset, "px"), transform: "".concat(toggled ? "rotate(-45deg) translate(0px, ".concat(move, "px)") : "none") }) }), _jsx("div", { style: __assign(__assign({}, barStyles), { top: "".concat(topOffset + barHeight + margin, "px"), transform: "".concat(toggled ? "rotate(45deg) translate(0, -".concat(move, "px)") : "none") }) }), _jsx(HamburgerLabel, { "$toggled": toggled, children: "Menu" })] })));
+export const Hamburger = ({ toggled, ...props })=>{
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            ...burgerStyles,
+            transform: `${toggled ? `rotate(90deg)` : "none"}`
+        },
+        tabIndex: 0,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    ...barStyles,
+                    top: `${topOffset}px`,
+                    transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`
+                }
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    ...barStyles,
+                    top: `${topOffset + barHeight + margin}px`,
+                    transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`
+                }
+            }),
+            /*#__PURE__*/ _jsx(HamburgerLabel, {
+                $toggled: toggled,
+                children: "Menu"
+            })
+        ]
+    });
 };
-var templateObject_1;

package/Header/useHeader.mjs

@@ -1,31 +1,36 @@
 import { useEffect, useState } from "react";
 import { useScrollPosition } from "../hooks/useScrollPosition";
-import { useTheme } from "../styles/theme";
 import { useMedia } from "../styles/media";
-export var useHeader = function () {
-    var _a = useState(false), isSticky = _a[0], setIsSticky = _a[1];
-    var themed = useTheme().header;
-    var isDesktopLayout = useMedia("min:".concat(themed.breakpoint));
-    var valueIdx = isDesktopLayout ? 1 : 0;
-    var _b = useState(themed.height[valueIdx]), headerHeight = _b[0], setHeaderHeight = _b[1];
-    var _c = useState(themed.height[valueIdx]), placeholderHeight = _c[0], setPlaceholderHeight = _c[1];
-    var _d = useState(themed.logoWidth[valueIdx]), logoWidth = _d[0], setLogoWidth = _d[1];
-    useScrollPosition(function (currentPosition) {
-        var isPastThreshold = currentPosition.y * -1 > 40;
-        if (isSticky !== isPastThreshold)
-            setIsSticky(isPastThreshold);
-    }, [isSticky]);
-    useEffect(function () {
-        var valueIdx = isDesktopLayout ? 1 : 0;
+import { useTheme } from "../styles/theme";
+export const useHeader = ()=>{
+    const [isSticky, setIsSticky] = useState(false);
+    const { header: themed } = useTheme();
+    const isDesktopLayout = useMedia(`min:${themed.breakpoint}`);
+    const valueIdx = isDesktopLayout ? 1 : 0;
+    const [headerHeight, setHeaderHeight] = useState(themed.height[valueIdx]);
+    const [placeholderHeight, setPlaceholderHeight] = useState(themed.height[valueIdx]);
+    const [logoWidth, setLogoWidth] = useState(themed.logoWidth[valueIdx]);
+    useScrollPosition((currentPosition)=>{
+        const isPastThreshold = currentPosition.y * -1 > 40;
+        if (isSticky !== isPastThreshold) setIsSticky(isPastThreshold);
+    }, [
+        isSticky
+    ]);
+    useEffect(()=>{
+        const valueIdx = isDesktopLayout ? 1 : 0;
         setPlaceholderHeight(themed.height[valueIdx]);
         setHeaderHeight(isSticky ? themed.heightSticky[valueIdx] : themed.height[valueIdx]);
         setLogoWidth(isSticky ? themed.logoWidthSticky[valueIdx] : themed.logoWidth[valueIdx]);
-    }, [themed, isSticky, isDesktopLayout]);
+    }, [
+        themed,
+        isSticky,
+        isDesktopLayout
+    ]);
     return [
         isSticky,
         placeholderHeight,
         headerHeight,
-        logoWidth,
+        logoWidth
     ];
 };
 export default useHeader;

package/Hidden/Hidden.d.ts

@@ -3,4 +3,4 @@ export type HiddenProps = {
     $min?: Breakpoint;
     $max?: Breakpoint;
 };
-export declare const Hidden: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HiddenProps, never>;
+export declare const Hidden: any;

package/Hidden/Hidden.mjs

@@ -1,10 +1,10 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var Hidden = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
-    return "".concat(p.$min
-        ? "\n  @media (min-width: ".concat(p.theme.breakpoints[p.$min], "px) {\n    display: none;\n  }")
-        : "", " ").concat(p.$max
-        ? "\n  @media (max-width: ".concat(p.theme.breakpoints[p.$max], "px) {\n    display: none;\n  }")
-        : "");
-});
-var templateObject_1;
+export const Hidden = styled.div`
+  ${(p)=>`${p.$min ? `
+  @media (min-width: ${p.theme.breakpoints[p.$min]}px) {
+    display: none;
+  }` : ""} ${p.$max ? `
+  @media (max-width: ${p.theme.breakpoints[p.$max]}px) {
+    display: none;
+  }` : ""}`}
+`;

package/Img/sc/bare.d.ts

@@ -1,2 +1,2 @@
 export type KoineImgProps = {};
-export declare const KoineImg: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare const KoineImg: any;

package/Img/sc/bare.mjs

@@ -1,39 +1,36 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 // export type KoineImgProps = {
 //   /** @default "cover" */
 //   $fit?: "cover" | "contain";
 // };
-export var KoineImg = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var templateObject_1;
-// export const KoineImg = styled.img<KoineImgProps>`
-//   object-fit: ${(p) => p.$fit || "cover"};
-// `;
-// /**
-//  * Replacement core component for native `<img />`
-//  *
-//  * Features:
-//  *  - lazy load
-//  *  - proportion cage
-//  */
-// export const Img = ({
-//   className,
-//   style = {},
-//   lazyProps,
-//   ...props
-// }: ImgProps) => {
-//   let { width, height, src } = props;
-//   width = width ? `${width}px` : "100%";
-//   height = height ? `${height}px` : "100%";
-//   const imgProps = { width, height, src };
-//   return (
-//     <ImgRoot style={{ width, height, ...style }} className={className}>
-//       <LazyLoad {...lazyProps}>
-//         <ImgNative {...imgProps} />
-//       </LazyLoad>
-//       <noscript>
-//         <img {...imgProps} />
-//       </noscript>
-//     </ImgRoot>
-//   );
-// };
+export const KoineImg = styled.img``; // export const KoineImg = styled.img<KoineImgProps>`
+ //   object-fit: ${(p) => p.$fit || "cover"};
+ // `;
+ // /**
+ //  * Replacement core component for native `<img />`
+ //  *
+ //  * Features:
+ //  *  - lazy load
+ //  *  - proportion cage
+ //  */
+ // export const Img = ({
+ //   className,
+ //   style = {},
+ //   lazyProps,
+ //   ...props
+ // }: ImgProps) => {
+ //   let { width, height, src } = props;
+ //   width = width ? `${width}px` : "100%";
+ //   height = height ? `${height}px` : "100%";
+ //   const imgProps = { width, height, src };
+ //   return (
+ //     <ImgRoot style={{ width, height, ...style }} className={className}>
+ //       <LazyLoad {...lazyProps}>
+ //         <ImgNative {...imgProps} />
+ //       </LazyLoad>
+ //       <noscript>
+ //         <img {...imgProps} />
+ //       </noscript>
+ //     </ImgRoot>
+ //   );
+ // };

package/Img/types.mjs

@@ -1 +1 @@
-export {};
+import React from "react";

package/Link/Link.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
 export type KoineLinkProps = React.ComponentPropsWithRef<"a">;
-export declare const KoineLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, never>;
+export declare const KoineLink: any;

package/Link/Link.mjs

@@ -1,4 +1,2 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var KoineLink = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var templateObject_1;
+export const KoineLink = styled.a``;

package/Link/LinkBlank.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="react" />
 export type LinkBlankProps = React.ComponentPropsWithRef<"a">;
-export declare const LinkBlankA: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
-    target: "_blank";
-    rel: "noopener";
-}, "rel" | "target">;
-export declare const LinkBlankIcon: import("styled-components").StyledComponent<import("react-icons/lib").IconType, import("styled-components").DefaultTheme, {}, never>;
+export declare const LinkBlankA: any;
+export declare const LinkBlankIcon: any;
 export declare const LinkBlank: ({ children, target, rel, ...props }: LinkBlankProps) => import("react/jsx-runtime").JSX.Element;

package/Link/LinkBlank.mjs

@@ -1,17 +1,32 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
 import { MdLaunch as IconOutboundLink } from "react-icons/md";
+import styled from "styled-components";
 import { max } from "../styles/media";
-export var LinkBlankA = styled.a.attrs({
+export const LinkBlankA = styled.a.attrs({
     target: "_blank",
-    rel: "noopener",
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+    rel: "noopener"
+})``;
 // TODO: use `touch` class on <html> instead of relying on screenwidth,
 // probably implement a lean Modernizr like thing with react-helmet
-export var LinkBlankIcon = styled(IconOutboundLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"], ["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"])), max.sm);
-export var LinkBlank = function (_a) {
-    var children = _a.children, target = _a.target, rel = _a.rel, props = __rest(_a, ["children", "target", "rel"]);
-    return (_jsxs(LinkBlankA, __assign({}, props, { children: [children, _jsx(LinkBlankIcon, {})] })));
+export const LinkBlankIcon = styled(IconOutboundLink)`
+  color: var(---grey100);
+  font-size: inherit;
+  margin-left: 3px;
+  line-height: inherit;
+  vertical-align: middle;
+  width: 0px;
+  transition: width 0.1s ease-in-out;
+  ${max.sm} {
+    width: 20px;
+    opacity: 0.8;
+  }
+`;
+export const LinkBlank = ({ children, target, rel, ...props })=>{
+    return /*#__PURE__*/ _jsxs(LinkBlankA, {
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ _jsx(LinkBlankIcon, {})
+        ]
+    });
 };
-var templateObject_1, templateObject_2;

package/Menu/Menu.d.ts

@@ -1 +1 @@
-export declare const Menu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const Menu: any;

package/Menu/Menu.mjs

@@ -1,4 +1,11 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var Menu = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"], ["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"])));
-var templateObject_1;
+export const Menu = styled.ul`
+  z-index: 3;
+  position: absolute;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  width: 100%;
+  box-shadow: var(--shadow);
+`;

package/Menu/MenuMui.mjs

@@ -1,6 +1,5 @@
-"use strict";
 // import React, { forwardRef, useId, useMemo, useRef, useState } from "react";
-// import { unstable_useEventCallback as useEventCallback } from "@mui/utils";
+// import useEventCallback from "@mui/utils/useEventCallback";
 // import {
 //   motion as m,
 //   AnimatePresence,

package/MenuItem/MenuItem.d.ts

@@ -1,4 +1 @@
-export declare const MenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    $active?: boolean | undefined;
-    disabled?: boolean | undefined;
-}, never>;
+export declare const MenuItem: any;

package/MenuItem/MenuItem.mjs

@@ -1,4 +1,20 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var MenuItem = styled.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px 16px;\n\n  &[aria-selected=\"true\"] {\n    background: var(--accent400);\n  }\n\n  /** DEP: this is just for MultiselectMui? */\n  &.Mui-focused,\n  &[data-focus=\"true\"] {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:not([disabled]):hover {\n    cursor: pointer;\n    background: var(--accent300);\n  }\n"], ["\n  padding: 8px 16px;\n\n  &[aria-selected=\"true\"] {\n    background: var(--accent400);\n  }\n\n  /** DEP: this is just for MultiselectMui? */\n  &.Mui-focused,\n  &[data-focus=\"true\"] {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:not([disabled]):hover {\n    cursor: pointer;\n    background: var(--accent300);\n  }\n"])));
-var templateObject_1;
+export const MenuItem = styled.li`
+  padding: 8px 16px;
+
+  &[aria-selected="true"] {
+    background: var(--accent400);
+  }
+
+  /** DEP: this is just for MultiselectMui? */
+  &.Mui-focused,
+  &[data-focus="true"] {
+    background: var(--accent300);
+    color: white;
+  }
+
+  &:not([disabled]):hover {
+    cursor: pointer;
+    background: var(--accent300);
+  }
+`;

package/MenuItem/MenuItemMui.mjs

@@ -1,4 +1,3 @@
-"use strict";
 // import React, { forwardRef } from "react";
 // import { useMenuItem } from "@mui/base/MenuItemUnstyled";
 // // import { useMenuItem } from "./useMenuItem";