@koine/react 1.0.4 → 1.0.9

package/node/Select/SelectDownshift.js

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

package/node/Select/components.js

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

package/node/Select/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var SelectDownshift_1 = require("./SelectDownshift");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return SelectDownshift_1.Select; } });
+// export type { SelectProps } from "./SelectReach";
+// export { Select } from "./SelectReach";

package/node/Sidebar/Sidebar.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const gr_1 = require("react-icons/gr");
+const cg_1 = require("react-icons/cg");
+const media_1 = require("../styles/media");
+const Buttons_1 = require("../Buttons");
+const Header_1 = require("../Header");
+const SidebarWrapper = styled_components_1.default.div `
+  ${(p) => `${media_1.max.md} {
+      z-index: 20;
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      right: 0;
+      left: var(--gutter-half);
+      top: ${p.$top || 0}px;
+      bottom: 0;
+      padding: var(--gutter-half);
+      transform: ${p.$open ? `translateX(0)` : `translateX(100%)`};
+      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
+      background: white;
+      box-shadow: ${p.$open ? `0 0 0 100vh rgba(0, 0, 0, .3)` : `0 0 100vh rgba(0, 0, 0, 0)`};
+      will-change: transform, box-shadow;
+      pointer-events: ${p.$open ? "all" : "none"}
+    }`}
+`;
+const SidebarToggle = styled_components_1.default.span `
+  z-index: 21;
+  position: fixed;
+  right: var(--gutter-half);
+  bottom: var(--gutter-half);
+  ${media_1.min.md} {
+    display: none;
+  }
+
+  path {
+    stroke: currentColor;
+  }
+`;
+const Sidebar = ({ children }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [, , headerHeight] = (0, Header_1.useHeader)();
+    const handleClickToggle = (0, react_1.useCallback)(() => {
+        setOpen((prevOpen) => !prevOpen);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarToggle, { onClick: handleClickToggle, children: (0, jsx_runtime_1.jsx)(Buttons_1.IconButtonFab, { "$variant": "contained", children: open ? (0, jsx_runtime_1.jsx)(cg_1.CgCloseR, {}) : (0, jsx_runtime_1.jsx)(gr_1.GrFolderOpen, {}) }) }), (0, jsx_runtime_1.jsx)(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
+};
+exports.Sidebar = Sidebar;

package/node/Sidebar/index.js

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

package/node/Spacing/Spacing.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const utils_1 = require("@koine/utils");
+const spacing_1 = require("../styles/spacing");
+const Root = styled_components_1.default.div `
+  ${(p) => p.$top && spacing_1.spacingTop.call(p.theme, ...p.$top)}
+  ${(p) => p.$bottom && spacing_1.spacingBottom.call(p.theme, ...p.$bottom)}
+`;
+const extractDirectionArgs = (raw) => {
+    const [size, factor, property, devices] = raw.split(":");
+    const factorArg = (0, utils_1.isUndefined)(factor) ? undefined : parseFloat(factor);
+    const devicesArg = devices?.split(",");
+    return [size, factorArg, property, devicesArg];
+};
+/**
+ * Usage:
+ *
+ * ```jsx
+ * <Spacing top="sm" />
+ * <Spacing top="sm:1.5" />
+ * <Spacing top="sm:1.5" bottom="lg" />
+ * <Spacing vertical="sm:1.5:margin:mobile" />
+ * <Spacing top="sm:1.5:padding:mobile" />
+ * <Spacing top="sm:2:padding:tablet,desktop" />
+ * ```
+ */
+const Spacing = ({ top, bottom, vertical, ...props }) => {
+    let $top;
+    let $bottom;
+    if (top) {
+        $top = extractDirectionArgs(top);
+    }
+    if (bottom) {
+        $bottom = extractDirectionArgs(bottom);
+    }
+    if (vertical) {
+        $top = extractDirectionArgs(vertical);
+        $bottom = $top;
+    }
+    if (!$top && !$bottom && !vertical) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
+    }
+    return (0, jsx_runtime_1.jsx)(Root, { "$top": $top, "$bottom": $bottom, ...props });
+};
+exports.Spacing = Spacing;

package/node/Spacing/index.js

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

package/node/Sticky/Sticky.js

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyCss = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StickyCss = ({ top, ...props }) => {
+    return (0, jsx_runtime_1.jsx)("div", { style: { position: "sticky", top: 100 }, ...props });
+};
+exports.StickyCss = StickyCss;

package/node/Sticky/index.js

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

package/node/Tabs/Tabs.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabUnderline = exports.TabText = exports.TabWrap = exports.TabList = exports.Tabs = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/// <reference types="@reach/utils/dist/declarations/src/polymorphic" />
+/**
+ * @file
+ *
+ * Here we manage only "vertical" oriented tabs for now
+ */
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const tabs_1 = require("@reach/tabs");
+const media_1 = require("../styles/media");
+const Underline_1 = require("../Animations/Underline");
+const Buttons_1 = require("../Buttons");
+exports.Tabs = (0, styled_components_1.default)(tabs_1.Tabs) `
+  ${media_1.min.sm} {
+    display: flex;
+    ${(p) => p.$vertical && "flex-direction: column;"}
+  }
+`;
+exports.TabList = (0, styled_components_1.default)(tabs_1.TabList) `
+  display: flex;
+  flex-direction: column;
+  ${media_1.min.sm} {
+    border-right: 1px solid var(--grey800);
+  }
+`;
+exports.TabWrap = (0, styled_components_1.default)(tabs_1.Tab) `
+  ${Buttons_1.btnStyleReset}
+  position: relative;
+  justify-content: flex-end;
+  padding: 0.7em;
+  margin-bottom: 1em;
+  font-weight: bold;
+  color: ${(p) => (p.$active ? "var(--accent200)" : "var(--grey300)")};
+  ${media_1.min.sm} {
+    padding-right: var(--gutter-half);
+  }
+
+  &:hover {
+    color: ${(p) => (p.$active ? "var(--accent200)" : "var(--accent300)")};
+  }
+`;
+exports.TabText = styled_components_1.default.span `
+  position: relative;
+  z-index: 1;
+`;
+exports.TabUnderline = (0, styled_components_1.default)(Underline_1.UnderlineSkewed) ``;
+const Tab = ({ children, ...props }) => {
+    const { selectedIndex, focusedIndex } = (0, tabs_1.useTabsContext)();
+    const styledProps = {
+        $active: props.idx === selectedIndex,
+        $focused: props.idx === focusedIndex,
+    };
+    return ((0, jsx_runtime_1.jsxs)(exports.TabWrap, { ...props, ...styledProps, children: [styledProps.$active && ((0, jsx_runtime_1.jsx)(exports.TabUnderline, { ...styledProps, layoutId: "Tab-underline" })), (0, jsx_runtime_1.jsx)(exports.TabText, { ...styledProps, children: children })] }));
+};
+exports.Tab = Tab;
+exports.TabPanels = (0, styled_components_1.default)(tabs_1.TabPanels) `
+  flex: 1;
+`;
+exports.TabPanel = (0, styled_components_1.default)(tabs_1.TabPanel) `
+  ${media_1.min.sm} {
+    padding-left: var(--gutter-half);
+  }
+`;

package/node/Tabs/index.js

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

package/node/Typography/CopyPasteVisible.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyPasteVisible = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.CopyPasteVisible = styled_components_1.default.span `
+  color: transparent;
+  opacity: 0;
+  font-size: 0;
+`;

package/node/Typography/Native.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.P = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.p = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const media_1 = require("../styles/media");
+exports.p = `
+  margin: 0 0 1em 0;
+`;
+exports.h1 = `
+  margin: 0 0 10px 0;
+  font-size: 30px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+  ${media_1.min.md} {
+    font-size: 50px;
+  }
+`;
+exports.h2 = `
+  margin: 0 0 1em 0;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+`;
+exports.h3 = `
+  margin: 0 0 1em 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+exports.h4 = `
+  margin: 0 0 1em 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+exports.P = styled_components_1.default.div `
+  ${exports.p}
+`;
+exports.H1 = styled_components_1.default.div `
+  ${exports.h1}
+`;
+exports.H2 = styled_components_1.default.div `
+  ${exports.h2}
+`;
+exports.H3 = styled_components_1.default.div `
+  ${exports.h3}
+`;
+exports.H4 = styled_components_1.default.div `
+  ${exports.h4}
+`;

package/node/Typography/ReadMore.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadMore = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const react_use_1 = require("react-use");
+const framer_motion_1 = require("framer-motion");
+// import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
+const Root = styled_components_1.default.div ``;
+const Content = styled_components_1.default.div `
+  & p:first-child {
+    margin-top: 0;
+  }
+`;
+const BtnWrap = styled_components_1.default.span `
+  display: flex;
+  justify-content: flex-end;
+  transition: transform 0.18s ease-in-out;
+  text-align: right;
+  transform: translateY(${(p) => (p.$expanded ? "0" : "-100%")});
+  opacity: ${(p) => (p.$expanded ? 0 : 1)};
+`;
+const BtnFader = styled_components_1.default.div `
+  width: 30%;
+  transition: transform 0.18s ease-in-out;
+  background: linear-gradient(45deg, transparent 50%, ${(p) => p.$bg} 70%);
+`;
+const Btn = styled_components_1.default.span `
+  padding: 0 10px 0 10px;
+  line-height: ${(p) => (p.$lineHeight ? p.$lineHeight : "inherit")};
+  background: var(--bodyBg);
+  color: var(--grey600);
+  white-space: nowrap;
+  font-size: ${(p) => p.$fontSize}px;
+  cursor: pointer;
+`;
+const BtnIcon = styled_components_1.default.span `
+  display: inline-block;
+  margin: 0 0 0 4px;
+  transition: transform 0.18s ease-in-out;
+  ${(p) => (p.$expanded ? "transform: rotate(180deg);" : "")};
+  font-size: ${(p) => p.$fontSize}px;
+`;
+const ReadMore = ({ lines = 3, lineHeight = 1.6, fontSize = 14, bg = "var(--bodyBg)", expand = "Expand", collapse = "Collapse", ...props }) => {
+    const defaultMaxHeight = lines * (lineHeight * fontSize);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const [maxHeight, setMaxHeight] = (0, react_1.useState)(defaultMaxHeight);
+    const [fullHeight, setFullHeight] = (0, react_1.useState)(0);
+    const [exceeds, setExceeds] = (0, react_1.useState)(false);
+    const content = (0, react_1.useRef)(null);
+    const height = (0, framer_motion_1.useSpring)(defaultMaxHeight);
+    const styles = (0, react_1.useMemo)(() => (exceeds ? { height, overflow: "hidden" } : {}), [exceeds, height]);
+    const handleExpandClick = () => {
+        setExpanded((prevExpanded) => !prevExpanded);
+    };
+    (0, react_use_1.useIsomorphicLayoutEffect)(() => {
+        if (content.current) {
+            const elementHeight = content.current.offsetHeight;
+            const newExceeds = elementHeight > maxHeight;
+            if (!newExceeds) {
+                setMaxHeight(elementHeight);
+            }
+            setExceeds(newExceeds);
+            setFullHeight(elementHeight);
+        }
+    }, [content, maxHeight]);
+    (0, react_use_1.useIsomorphicLayoutEffect)(() => {
+        height.set(expanded ? fullHeight : maxHeight);
+    }, [expanded, height, fullHeight, maxHeight]);
+    return ((0, jsx_runtime_1.jsxs)(Root, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { style: styles, children: (0, jsx_runtime_1.jsx)(Content, { ref: content, ...props }) }), exceeds && ((0, jsx_runtime_1.jsxs)(BtnWrap, { "$expanded": expanded, children: [(0, jsx_runtime_1.jsx)(BtnFader, { "$bg": bg }), (0, jsx_runtime_1.jsxs)(Btn, { "$fontSize": fontSize, "$lineHeight": lineHeight, onClick: handleExpandClick, "aria-expanded": expanded, "aria-label": expanded ? collapse : expand, children: [expanded ? collapse : expand, (0, jsx_runtime_1.jsx)(BtnIcon, { "$expanded": expanded })] })] }))] }));
+};
+exports.ReadMore = ReadMore;