@koine/react 1.0.5 → 1.0.8

package/Progress/ProgressOverlay.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import styled from "styled-components";
+import { m } from "framer-motion";
+import { ProgressCircular } from "./ProgressCircular";
+import { ProgressLinear } from "./ProgressLinear";
+import { useHeader } from "../Header";
+const ProgressOverlayWrap = styled(m.div) `
+  z-index: 10000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  cursor: wait;
+`;
+const ProgressOverlayCenterer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--progress-overlay-bg);
+`;
+export const ProgressOverlay = ({ running }) => {
+    const [, , headerHeight] = useHeader();
+    // const [progress, setProgress] = useState(0);
+    useEffect(() => {
+        document.body.style.cursor = running ? "wait" : "";
+    }, [running]);
+    return (_jsxs(ProgressOverlayWrap, Object.assign({ animate: {
+            opacity: running ? 1 : 0,
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, Object.assign({ style: {
+                    top: headerHeight + "px",
+                } }, { children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
+};

package/Progress/index.js

@@ -0,0 +1,3 @@
+export * from "./ProgressCircular";
+export * from "./ProgressLinear";
+export * from "./ProgressOverlay";

package/Rating/Rating.js

@@ -0,0 +1,93 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import styled from "styled-components";
+import { uid } from "@koine/utils";
+export const RatingStarRoot = styled.svg `
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 1px;
+`;
+export const RatingStar = (_a) => {
+    var { value, colorBg = "#FFD84C", colorStroke = "#947813", size } = _a, props = __rest(_a, ["value", "colorBg", "colorStroke", "size"]);
+    const id = uid("Star");
+    return (_jsxs(RatingStarRoot, Object.assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [_jsx("defs", { children: _jsxs("linearGradient", Object.assign({ 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(#${id})`, d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
+};
+export const RatingDetails = styled.span `
+  padding-left: 0.5em;
+  font-size: 12px;
+  color: var(--grey100);
+
+  &:before {
+    content: "(";
+  }
+  &:after {
+    content: ")";
+  }
+`;
+export const RatingCount = styled.span ``;
+export const RatingValue = styled.span `
+  display: none;
+`;
+export const RatingRoot = styled.div `
+  display: flex;
+  align-items: center;
+
+  &:hover ${RatingValue} {
+    display: inline-block;
+  }
+`;
+export const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16, }) => {
+    const id = uid("Rating");
+    const [currentValue /* , _setCurrentValue */] = useState(value);
+    const [stars, setStars] = useState([]);
+    const getStars = useCallback((activeCount) => {
+        const stars = [];
+        for (let currentStar = min + 1; currentStar < max + 1; currentStar++) {
+            let starValue;
+            const roundedActiveCount = Math.floor(activeCount);
+            // we have a rating of 3.4, when we get to the 4th star:
+            if (roundedActiveCount === currentStar - 1) {
+                starValue = 1 - (currentStar - activeCount);
+            }
+            else if (roundedActiveCount >= currentStar) {
+                starValue = 1;
+            }
+            else {
+                starValue = 0;
+            }
+            stars.push({ value: starValue });
+        }
+        return stars;
+    }, [min, max]);
+    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 (_jsxs(RatingRoot, { children: [stars.map((star, idx) => (_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: ` - ${value}` })] }))] }));
+};

package/Rating/index.js

@@ -0,0 +1,45 @@
+export * from "./Rating";
+const RATING_WORDS = {
+    0: "Worst",
+    1: "Bad",
+    2: "Mediocre",
+    3: "Good",
+    4: "Great",
+    4.5: "Excellent",
+    5: "Best",
+};
+export const getRatingWord = (value, precision = 0.5) => {
+    let buffer = 0;
+    let word;
+    while (buffer < value) {
+        // @ts-expect-error can't remember
+        word = RATING_WORDS[buffer];
+        buffer += precision;
+    }
+    return word;
+};
+export const getRatingValue = (value) => {
+    const 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 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,
+    };
+};

package/Select/SelectDownshift.js

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

package/Select/components.js

@@ -0,0 +1,20 @@
+import { __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 const SelectArrowStyled = styled(m.span) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2em;
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+`;
+export const SelectArrow = forwardRef(function SelectArrow(_a, ref) {
+    var { isOpen } = _a, props = __rest(_a, ["isOpen"]);
+    return (_jsx(SelectArrowStyled, Object.assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: _jsx(IconCollapse, {}) })));
+});

package/Select/index.js

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

package/Sidebar/Sidebar.js

@@ -0,0 +1,48 @@
+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";
+const SidebarWrapper = styled.div `
+  ${(p) => `${max.md} {
+      z-index: 20;
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      right: 0;
+      left: var(--gutter-half);
+      top: ${p.$top || 0}px;
+      bottom: 0;
+      padding: var(--gutter-half);
+      transform: ${p.$open ? `translateX(0)` : `translateX(100%)`};
+      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
+      background: white;
+      box-shadow: ${p.$open ? `0 0 0 100vh rgba(0, 0, 0, .3)` : `0 0 100vh rgba(0, 0, 0, 0)`};
+      will-change: transform, box-shadow;
+      pointer-events: ${p.$open ? "all" : "none"}
+    }`}
+`;
+const SidebarToggle = styled.span `
+  z-index: 21;
+  position: fixed;
+  right: var(--gutter-half);
+  bottom: var(--gutter-half);
+  ${min.md} {
+    display: none;
+  }
+
+  path {
+    stroke: currentColor;
+  }
+`;
+export const Sidebar = ({ children }) => {
+    const [open, setOpen] = useState(false);
+    const [, , headerHeight] = useHeader();
+    const handleClickToggle = useCallback(() => {
+        setOpen((prevOpen) => !prevOpen);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, Object.assign({ onClick: handleClickToggle }, { children: _jsx(IconButtonFab, Object.assign({ "$variant": "contained" }, { children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) })) })), _jsx(SidebarWrapper, Object.assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
+};

package/Sidebar/index.js

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

package/Spacing/Spacing.js

@@ -0,0 +1,47 @@
+import { __rest } from "tslib";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { isUndefined } from "@koine/utils";
+import { spacingTop, spacingBottom, } from "../styles/spacing";
+const Root = styled.div `
+  ${(p) => p.$top && spacingTop.call(p.theme, ...p.$top)}
+  ${(p) => p.$bottom && spacingBottom.call(p.theme, ...p.$bottom)}
+`;
+const extractDirectionArgs = (raw) => {
+    const [size, factor, property, devices] = raw.split(":");
+    const factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
+    const devicesArg = devices === 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 const Spacing = (_a) => {
+    var { top, bottom, vertical } = _a, props = __rest(_a, ["top", "bottom", "vertical"]);
+    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 _jsx(_Fragment, { children: props.children });
+    }
+    return _jsx(Root, Object.assign({ "$top": $top, "$bottom": $bottom }, props));
+};

package/Spacing/index.js

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

package/Sticky/Sticky.js

@@ -0,0 +1,220 @@
+export const Sticky = null;
+// import {
+//   FC,
+//   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.js

@@ -0,0 +1,6 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const StickyCss = (_a) => {
+    var { top } = _a, props = __rest(_a, ["top"]);
+    return _jsx("div", Object.assign({ style: { position: "sticky", top: 100 } }, props));
+};

package/Sticky/index.js

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

package/Tabs/Tabs.js

@@ -0,0 +1,67 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file
+ *
+ * Here we manage only "vertical" oriented tabs for now
+ */
+import { AnimateSharedLayout } from "framer-motion";
+import styled from "styled-components";
+import { Tabs as _Tabs, TabList as _TabList, Tab as _Tab, TabPanels as _TabPanels, TabPanel as _TabPanel, useTabsContext, } from "@reach/tabs";
+import { min } from "../styles/media";
+import { UnderlineSkewed } from "../Animations/Underline";
+import { btnStyleReset } from "../Buttons";
+export const TabsStyled = styled(_Tabs) `
+  ${min.sm} {
+    display: flex;
+    ${(p) => p.$vertical && "flex-direction: column;"}
+  }
+`;
+export const Tabs = (props) => {
+    return (_jsx(AnimateSharedLayout, { children: _jsx(TabsStyled, Object.assign({}, props)) }));
+};
+export const TabList = styled(_TabList) `
+  display: flex;
+  flex-direction: column;
+  ${min.sm} {
+    border-right: 1px solid var(--grey800);
+  }
+`;
+export const TabWrap = styled(_Tab) `
+  ${btnStyleReset}
+  position: relative;
+  justify-content: flex-end;
+  padding: 0.7em;
+  margin-bottom: 1em;
+  font-weight: bold;
+  color: ${(p) => (p.$active ? "var(--accent200)" : "var(--grey300)")};
+  ${min.sm} {
+    padding-right: var(--gutter-half);
+  }
+
+  &:hover {
+    color: ${(p) => (p.$active ? "var(--accent200)" : "var(--accent300)")};
+  }
+`;
+export const TabText = styled.span `
+  position: relative;
+  z-index: 1;
+`;
+export const TabUnderline = styled(UnderlineSkewed) ``;
+export const Tab = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { selectedIndex, focusedIndex } = useTabsContext();
+    const styledProps = {
+        $active: props.idx === selectedIndex,
+        $focused: props.idx === focusedIndex,
+    };
+    return (_jsxs(TabWrap, Object.assign({}, props, styledProps, { children: [styledProps.$active && (_jsx(TabUnderline, Object.assign({}, styledProps, { layoutId: "Tab-underline" }))), _jsx(TabText, Object.assign({}, styledProps, { children: children }))] })));
+};
+export const TabPanels = styled(_TabPanels) `
+  flex: 1;
+`;
+export const TabPanel = styled(_TabPanel) `
+  ${min.sm} {
+    padding-left: var(--gutter-half);
+  }
+`;

package/Tabs/index.js

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

package/Typography/CopyPasteVisible.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+export const CopyPasteVisible = styled.span `
+  color: transparent;
+  opacity: 0;
+  font-size: 0;
+`;