@koine/react 1.0.5 → 1.0.8

package/Gauge/Gauge.js

@@ -0,0 +1,102 @@
+// import styled, { keyframes } from "styled-components";
+// import { m } from "framer-motion";
+export const Gauge = (_props) => null;
+// export type GaugeProps = {
+//   /** In percentage */
+//   value: number;
+// };
+// export const Gauge = ({
+//   value,
+//   counter = true,
+//   stroke,
+//   // emptyStroke = "#e2e2e2",
+//   emptyStroke = stroke,
+//   emptyStrokeOpacity = 0.25,
+//   // emptyStrokeOpacity = 1,
+//   duration = 3,
+//   delay = 0.5,
+//   size = 100,
+//   strokeWidth = 6,
+// }) => {
+//   const radius = 45;
+//   const circumference = Math.ceil(2 * Math.PI * radius);
+//   const fillPercents = Math.abs(
+//     Math.ceil((circumference / 100) * (value - 100))
+//   );
+//   const transition = {
+//     duration: duration,
+//     delay: delay,
+//     ease: "easeIn",
+//   };
+//   const variants = {
+//     hidden: {
+//       strokeDashoffset: circumference,
+//       transition,
+//     },
+//     show: {
+//       strokeDashoffset: fillPercents,
+//       transition,
+//     },
+//   };
+//   return (
+//     <>
+//       <Flex justifyContent="center" alignItems="center">
+//         {counter && (
+//           <Box
+//             position="absolute"
+//             fontSize={size >= 100 ? 6 : 3}
+//             fontWeight={2}
+//             color="text500"
+//           >
+//             <Counter valueTo={value} totalDuration={duration + delay} />%
+//           </Box>
+//         )}
+//         <Box height={size}>
+//           <svg
+//             viewBox="0 0 100 100"
+//             version="1.1"
+//             xmlns="http://www.w3.org/2000/svg"
+//             width={size}
+//             height={size}
+//           >
+//             <circle
+//               cx="50"
+//               cy="50"
+//               r={radius}
+//               className="circle"
+//               strokeWidth={strokeWidth}
+//               stroke={emptyStroke}
+//               strokeOpacity={emptyStrokeOpacity}
+//               fill="transparent"
+//             />
+//           </svg>
+//           <svg
+//             viewBox="0 0 100 100"
+//             width={size}
+//             height={size}
+//             style={{
+//               position: "absolute",
+//               transform: "rotate(-90deg)",
+//               overflow: "visible",
+//               marginLeft: -size,
+//             }}
+//           >
+//             <m.circle
+//               cx="50"
+//               cy="50"
+//               r={radius}
+//               strokeWidth={strokeWidth}
+//               stroke={stroke}
+//               fill="transparent"
+//               strokeDashoffset={fillPercents}
+//               strokeDasharray={circumference}
+//               variants={variants}
+//               initial="hidden"
+//               animate={"show"}
+//             />
+//           </svg>
+//         </Box>
+//       </Flex>
+//     </>
+//   );
+// };

package/Grid/Grid.js

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+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) {
+    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 `
+  @media (min-width: ${breakpointValue}){
+    ${cssValue}
+  }`;
+}
+function getColCss(props) {
+    const { $auto, $offset, $width } = props;
+    const { breakpoints } = props.theme;
+    let css = "";
+    if ($offset) {
+        const offsets = $offset.split(",");
+        for (let i = 0; i <= offsets.length; i++) {
+            if (offsets[i]) {
+                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 (const breakpoint in breakpoints) {
+            const value = props[breakpoint];
+            if (typeof value !== "undefined") {
+                css += getColWidth(breakpoints, breakpoint, value);
+            }
+            else if (breakpoint === "xs") {
+                css += getColWidth(breakpoints, breakpoint, 12);
+            }
+        }
+    }
+    return css;
+}

package/Grid/index.js

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

package/Hamburger/Hamburger.js

@@ -0,0 +1,55 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file
+ *
+ * Simplified from https://github.com/luukdv/hamburger-react
+ */
+import styled from "styled-components";
+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: `${area}px`,
+    height: `${area}px`,
+    userSelect: "none",
+    outline: "0px",
+    cursor: "pointer",
+    transition,
+};
+const barStyles = {
+    position: "absolute",
+    width: `${width}px`,
+    height: `${barHeight}px`,
+    left: `${room}px`,
+    background: "currentColor",
+    transition,
+};
+export const Hamburger = (_a) => {
+    var { toggled } = _a, props = __rest(_a, ["toggled"]);
+    return (_jsxs("div", Object.assign({ style: Object.assign(Object.assign({}, burgerStyles), { transform: `${toggled ? `rotate(90deg)` : "none"}` }), tabIndex: 0 }, props, { children: [_jsx("div", { style: Object.assign(Object.assign({}, barStyles), { top: `${topOffset}px`, transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}` }) }), _jsx("div", { style: Object.assign(Object.assign({}, barStyles), { top: `${topOffset + barHeight + margin}px`, transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}` }) }), _jsx(HamburgerLabel, Object.assign({ "$toggled": toggled }, { children: "Menu" }))] })));
+};

package/Hamburger/index.js

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

package/Header/index.js

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

package/Header/useHeader.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useScrollPosition } from "@n8tb1t/use-scroll-position";
+import { useTheme } from "../styles/theme";
+import { useMedia } from "../styles/media";
+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(({ currPos }) => {
+        const isPastThreshold = currPos.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]);
+    return [
+        isSticky,
+        placeholderHeight,
+        headerHeight,
+        logoWidth,
+    ];
+};

package/Hidden/Hidden.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+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/Hidden/index.js

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

package/Img/Img.js

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+// export type KoineImgProps = {
+//   /** @default "cover" */
+//   $fit?: "cover" | "contain";
+// };
+export const KoineImg = styled.img ``;
+// /**
+//  * 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/index.js

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

package/Link/Link.js

@@ -0,0 +1,2 @@
+import styled from "styled-components";
+export const KoineLink = styled.a ``;

package/Link/LinkBlank.d.ts

@@ -4,5 +4,5 @@ export declare const LinkBlankA: import("styled-components").StyledComponent<"a"
     target: "_blank";
     rel: "noopener";
 }, "rel" | "target">;
-export declare const LinkBlankIcon: import("styled-components").StyledComponent<import("@react-icons/all-files/lib").IconType, import("styled-components").DefaultTheme, {}, never>;
+export declare const LinkBlankIcon: import("styled-components").StyledComponent<import("react-icons/lib").IconType, import("styled-components").DefaultTheme, {}, never>;
 export declare const LinkBlank: React.FC<LinkBlankProps>;

package/Link/LinkBlank.js

@@ -0,0 +1,28 @@
+import { __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 { max } from "../styles/media";
+export const LinkBlankA = styled.a.attrs({
+    target: "_blank",
+    rel: "noopener",
+}) ``;
+// TODO: use `touch` class on <html> instead of relying on screenwidth,
+// probably implement a lean Modernizr like thing with react-helmet
+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 = (_a) => {
+    var { children, target, rel } = _a, props = __rest(_a, ["children", "target", "rel"]);
+    return (_jsxs(LinkBlankA, Object.assign({}, props, { children: [children, _jsx(LinkBlankIcon, {})] })));
+};

package/Link/index.js

@@ -0,0 +1,2 @@
+export * from "./Link";
+export * from "./LinkBlank";

package/Menu/Menu.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+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/index.js

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

package/MenuItem/MenuItem.js

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+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/index.js

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

package/Meta/Meta.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Meta = ({ zoom }) => {
+    return (_jsx("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}` }));
+};

package/Meta/index.js

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

package/NoJs/NoJs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NoJs = (_props) => {
+    return (_jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
+            __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`,
+        } }));
+};

package/NoJs/index.js

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

package/Pagination/PaginationNav.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { CgArrowRightR as IconArrowRight, CgArrowLeftR as IconArrowLeft, } from "react-icons/cg";
+import { ensureInt } from "@koine/utils";
+const Root = styled.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.span `
+  ${item}
+  background: var(--accent400);
+  border-radius: 2px;
+`;
+const ItemLink = styled.a `
+  ${item}
+
+  ${(props) => (props.prev ? "color: var(--grey100);" : "")}
+`;
+const DotsSeparator = styled.span `
+  color: var(--grey100);
+`;
+const arrow = `display: flex; font-size: 20px;`;
+const ItemPrev = styled.a `
+  ${arrow}
+`;
+const ItemNext = styled.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]
+ */
+export const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showOffset = 2, Koine = {
+    Link: "a",
+    currentUrl: "/",
+}, }) => {
+    const { Link, currentUrl } = Koine;
+    total = ensureInt(total);
+    currentPage = ensureInt(currentPage);
+    perPage = 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 (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, Object.assign({ as: Link, href: `${baseUrl}/${prevPage}` }, { children: _jsx(IconArrowLeft, {}) }))), firstPage !== currentPage && (_jsx(ItemLink, Object.assign({ as: Link, href: `${baseUrl}`, prev: true }, { children: firstPage }))), prevDots && _jsx(DotsSeparator, { children: "..." }), pages.map((page) => page === currentPage ? (_jsx(ItemCurrent, { children: page }, page)) : (_jsx(ItemLink, Object.assign({ as: Link, href: `${baseUrl}/${page}`, prev: page < currentPage, next: page > currentPage }, { children: page }), `pagination-${page}`))), nextDots && _jsx(DotsSeparator, { children: "..." }), lastPage !== currentPage && (_jsx(ItemLink, Object.assign({ as: Link, href: `${baseUrl}/${lastPage}`, next: true }, { children: lastPage }))), nextArrow && (_jsx(ItemNext, Object.assign({ as: Link, href: `${baseUrl}/${nextPage}` }, { children: _jsx(IconArrowRight, {}) })))] }));
+};

package/Pagination/PaginationResults.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { AnimatePresence, m } from "framer-motion";
+const Root = styled.div `
+  // overflow: hidden;
+`;
+const Inner = styled(m.div) ``;
+export const PaginationResults = ({ children, }) => {
+    return (_jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, initial: true }, { children: _jsx(Root, { children: _jsx(Inner, Object.assign({ initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 } }, { children: children })) }) })));
+};

package/Pagination/index.js

@@ -0,0 +1,2 @@
+export * from "./PaginationNav";
+export * from "./PaginationResults";

package/Pill/Pill.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+export const Pill = styled.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;
+`;
+export const PillGreyLight = styled(Pill) `
+  background: var(--grey800);
+  color: var(--grey100);
+
+  &:hover {
+    color: white;
+    background: var(--grey300);
+  }
+`;
+export const PillAccentLight = styled(Pill) `
+  background: var(--accent400);
+  color: var(--grey100);
+
+  &:hover {
+    color: #fff;
+    background: var(--accent300);
+  }
+`;
+export const PillAccentLightOutlined = styled(Pill) `
+  border: 1px solid var(--accent300);
+  color: var(--accent200);
+
+  &:hover {
+    color: #fff;
+    background: var(--accent300);
+  }
+`;

package/Pill/index.js

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

package/Progress/ProgressCircular.js

@@ -0,0 +1,38 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { keyframes } from "styled-components";
+const animationRotation = keyframes `
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const animationCircle = 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.svg `
+  animation: ${animationRotation} 1.5s linear infinite;
+`;
+const ProgressCircularCircle = styled.circle `
+  animation: ${animationCircle} 1.5s linear infinite;
+`;
+/**
+ * @see https://mui.com/components/progress/
+ */
+export const ProgressCircular = (_a) => {
+    var { size = "1em", thickness = 1, color = "currentColor" } = _a, props = __rest(_a, ["size", "thickness", "color"]);
+    return (_jsx(ProgressCircularSvg, Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 44 44", style: { width: size, height: size } }, props, { children: _jsx(ProgressCircularCircle, { cx: "22", cy: "22", r: "20", fill: "none", strokeWidth: thickness, style: { stroke: color } }) })));
+};

package/Progress/ProgressLinear.js

@@ -0,0 +1,34 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { m } from "framer-motion";
+const ProgressLinearBg = styled.span `
+  position: relative;
+  overflow: hidden;
+  display: block;
+  height: 4px;
+`;
+const ProgressLinearFg = styled(m.span) `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+`;
+/**
+ * @see https://mui.com/components/progress/#linear
+ */
+export const ProgressLinear = (_a) => {
+    var { done = false, height = "2px", bg = "transparent", fg = "currentColor" } = _a, props = __rest(_a, ["done", "height", "bg", "fg"]);
+    return (_jsx(ProgressLinearBg, Object.assign({ style: { height, background: bg } }, props, { children: _jsx(ProgressLinearFg, { style: { height, background: fg }, initial: {
+                x: "-100%",
+            }, animate: {
+                x: done ? "-100%" : "0%",
+            }, transition: done
+                ? {}
+                : {
+                    repeat: Infinity,
+                    repeatType: "reverse",
+                    duration: 2,
+                } }) })));
+};