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

package/Tabs/useTabs.js

@@ -1,34 +1,54 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTabs = void 0;
-var react_1 = require("react");
-var utils_1 = require("@mui/utils");
-var useTabs = function (props) {
-    var valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, orientation = props.orientation, direction = props.direction, selectionFollowsFocus = props.selectionFollowsFocus;
-    var _a = (0, utils_1.unstable_useControlled)({
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTabs: function() {
+        return useTabs;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _useControlled = /*#__PURE__*/ _interop_require_default._(require("@mui/utils/useControlled"));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const useTabs = (props)=>{
+    const { value: valueProp, defaultValue, onChange, orientation, direction, selectionFollowsFocus } = props;
+    const [value, setValue] = (0, _useControlled.default)({
         controlled: valueProp,
         default: defaultValue,
         name: "Tabs",
-        state: "value",
-    }), value = _a[0], setValue = _a[1];
-    var idPrefix = (0, react_1.useId)();
-    var onSelected = (0, react_1.useCallback)(function (e, newValue) {
+        state: "value"
+    });
+    const idPrefix = (0, _react.useId)();
+    const onSelected = (0, _react.useCallback)((e, newValue)=>{
         setValue(newValue);
         if (onChange) {
             onChange(e, newValue);
         }
-    }, [onChange, setValue]);
-    var getRootProps = function () {
+    }, [
+        onChange,
+        setValue
+    ]);
+    const getRootProps = ()=>{
         return {};
     };
-    var tabsContextValue = (0, react_1.useMemo)(function () {
+    const tabsContextValue = (0, _react.useMemo)(()=>{
         return {
-            idPrefix: idPrefix,
-            value: value,
-            onSelected: onSelected,
-            orientation: orientation,
-            direction: direction,
-            selectionFollowsFocus: selectionFollowsFocus,
+            idPrefix,
+            value,
+            onSelected,
+            orientation,
+            direction,
+            selectionFollowsFocus
         };
     }, [
         idPrefix,
@@ -36,12 +56,11 @@ var useTabs = function (props) {
         onSelected,
         orientation,
         direction,
-        selectionFollowsFocus,
+        selectionFollowsFocus
     ]);
     return {
-        getRootProps: getRootProps,
-        tabsContextValue: tabsContextValue,
+        getRootProps,
+        tabsContextValue
     };
 };
-exports.useTabs = useTabs;
-exports.default = exports.useTabs;
+const _default = useTabs;

package/Tabs/useTabs.mjs

@@ -1,31 +1,34 @@
-import { useCallback, useId, useMemo } from "react";
-import { unstable_useControlled as useControlled } from "@mui/utils";
-export var useTabs = function (props) {
-    var valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, orientation = props.orientation, direction = props.direction, selectionFollowsFocus = props.selectionFollowsFocus;
-    var _a = useControlled({
+import useControlled from "@mui/utils/useControlled";
+import React, { useCallback, useId, useMemo } from "react";
+export const useTabs = (props)=>{
+    const { value: valueProp, defaultValue, onChange, orientation, direction, selectionFollowsFocus } = props;
+    const [value, setValue] = useControlled({
         controlled: valueProp,
         default: defaultValue,
         name: "Tabs",
-        state: "value",
-    }), value = _a[0], setValue = _a[1];
-    var idPrefix = useId();
-    var onSelected = useCallback(function (e, newValue) {
+        state: "value"
+    });
+    const idPrefix = useId();
+    const onSelected = useCallback((e, newValue)=>{
         setValue(newValue);
         if (onChange) {
             onChange(e, newValue);
         }
-    }, [onChange, setValue]);
-    var getRootProps = function () {
+    }, [
+        onChange,
+        setValue
+    ]);
+    const getRootProps = ()=>{
         return {};
     };
-    var tabsContextValue = useMemo(function () {
+    const tabsContextValue = useMemo(()=>{
         return {
-            idPrefix: idPrefix,
-            value: value,
-            onSelected: onSelected,
-            orientation: orientation,
-            direction: direction,
-            selectionFollowsFocus: selectionFollowsFocus,
+            idPrefix,
+            value,
+            onSelected,
+            orientation,
+            direction,
+            selectionFollowsFocus
         };
     }, [
         idPrefix,
@@ -33,11 +36,11 @@ export var useTabs = function (props) {
         onSelected,
         orientation,
         direction,
-        selectionFollowsFocus,
+        selectionFollowsFocus
     ]);
     return {
-        getRootProps: getRootProps,
-        tabsContextValue: tabsContextValue,
+        getRootProps,
+        tabsContextValue
     };
 };
 export default useTabs;

package/Typography/CopyPasteVisible.js

@@ -1,7 +1,17 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CopyPasteVisible = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.CopyPasteVisible = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"], ["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"])));
-var templateObject_1;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CopyPasteVisible", {
+    enumerable: true,
+    get: function() {
+        return CopyPasteVisible;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const CopyPasteVisible = _styledcomponents.default.span`
+  color: transparent;
+  opacity: 0;
+  font-size: 0;
+`;

package/Typography/CopyPasteVisible.mjs

@@ -1,4 +1,6 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var CopyPasteVisible = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"], ["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"])));
-var templateObject_1;
+export const CopyPasteVisible = styled.span`
+  color: transparent;
+  opacity: 0;
+  font-size: 0;
+`;

package/Typography/Native.js

@@ -1,17 +1,90 @@
 "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;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var media_1 = require("../styles/media");
-exports.p = "\n  margin: 0 0 1em 0;\n";
-exports.h1 = "\n  margin: 0 0 10px 0;\n  font-size: 30px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n  ".concat(media_1.min.md, " {\n    font-size: 50px;\n  }\n");
-exports.h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
-exports.h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-exports.h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-exports.P = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.p);
-exports.H1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h1);
-exports.H2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h2);
-exports.H3 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h3);
-exports.H4 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h4);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    p: function() {
+        return p;
+    },
+    h1: function() {
+        return h1;
+    },
+    h2: function() {
+        return h2;
+    },
+    h3: function() {
+        return h3;
+    },
+    h4: function() {
+        return h4;
+    },
+    P: function() {
+        return P;
+    },
+    H1: function() {
+        return H1;
+    },
+    H2: function() {
+        return H2;
+    },
+    H3: function() {
+        return H3;
+    },
+    H4: function() {
+        return H4;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _media = require("../styles/media");
+const p = `
+  margin: 0 0 1em 0;
+`;
+const h1 = `
+  margin: 0 0 10px 0;
+  font-size: 30px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+  ${_media.min.md} {
+    font-size: 50px;
+  }
+`;
+const h2 = `
+  margin: 0 0 1em 0;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+`;
+const h3 = `
+  margin: 0 0 1em 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+const h4 = `
+  margin: 0 0 1em 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+const P = _styledcomponents.default.div`
+  ${p}
+`;
+const H1 = _styledcomponents.default.div`
+  ${h1}
+`;
+const H2 = _styledcomponents.default.div`
+  ${h2}
+`;
+const H3 = _styledcomponents.default.div`
+  ${h3}
+`;
+const H4 = _styledcomponents.default.div`
+  ${h4}
+`;

package/Typography/Native.mjs

@@ -1,14 +1,47 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 import { min } from "../styles/media";
-export var p = "\n  margin: 0 0 1em 0;\n";
-export var h1 = "\n  margin: 0 0 10px 0;\n  font-size: 30px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n  ".concat(min.md, " {\n    font-size: 50px;\n  }\n");
-export var h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
-export var h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-export var h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-export var P = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), p);
-export var H1 = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), h1);
-export var H2 = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), h2);
-export var H3 = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), h3);
-export var H4 = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), h4);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+export const p = `
+  margin: 0 0 1em 0;
+`;
+export const h1 = `
+  margin: 0 0 10px 0;
+  font-size: 30px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+  ${min.md} {
+    font-size: 50px;
+  }
+`;
+export const h2 = `
+  margin: 0 0 1em 0;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+`;
+export const h3 = `
+  margin: 0 0 1em 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+export const h4 = `
+  margin: 0 0 1em 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+export const P = styled.div`
+  ${p}
+`;
+export const H1 = styled.div`
+  ${h1}
+`;
+export const H2 = styled.div`
+  ${h2}
+`;
+export const H3 = styled.div`
+  ${h3}
+`;
+export const H4 = styled.div`
+  ${h4}
+`;

package/Typography/ReadMore.js

@@ -1,47 +1,110 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReadMore = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var framer_motion_1 = require("framer-motion");
-// import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
-var hooks_1 = require("../hooks");
-var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
-var Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  & p:first-child {\n    margin-top: 0;\n  }\n"], ["\n  & p:first-child {\n    margin-top: 0;\n  }\n"])));
-var BtnWrap = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  transition: transform 0.18s ease-in-out;\n  text-align: right;\n  transform: translateY(", ");\n  opacity: ", ";\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  transition: transform 0.18s ease-in-out;\n  text-align: right;\n  transform: translateY(", ");\n  opacity: ", ";\n"])), function (p) { return (p.$expanded ? "0" : "-100%"); }, function (p) { return (p.$expanded ? 0 : 1); });
-var BtnFader = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  width: 30%;\n  transition: transform 0.18s ease-in-out;\n  background: linear-gradient(45deg, transparent 50%, ", " 70%);\n"], ["\n  width: 30%;\n  transition: transform 0.18s ease-in-out;\n  background: linear-gradient(45deg, transparent 50%, ", " 70%);\n"])), function (p) { return p.$bg; });
-var Btn = styled_components_1.default.span(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  padding: 0 10px 0 10px;\n  line-height: ", ";\n  background: var(--bodyBg);\n  color: var(--grey600);\n  white-space: nowrap;\n  font-size: ", "px;\n  cursor: pointer;\n"], ["\n  padding: 0 10px 0 10px;\n  line-height: ", ";\n  background: var(--bodyBg);\n  color: var(--grey600);\n  white-space: nowrap;\n  font-size: ", "px;\n  cursor: pointer;\n"])), function (p) { return (p.$lineHeight ? p.$lineHeight : "inherit"); }, function (p) { return p.$fontSize; });
-var BtnIcon = styled_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  display: inline-block;\n  margin: 0 0 0 4px;\n  transition: transform 0.18s ease-in-out;\n  ", ";\n  font-size: ", "px;\n"], ["\n  display: inline-block;\n  margin: 0 0 0 4px;\n  transition: transform 0.18s ease-in-out;\n  ", ";\n  font-size: ", "px;\n"])), function (p) { return (p.$expanded ? "transform: rotate(180deg);" : ""); }, function (p) { return p.$fontSize; });
-var ReadMore = function (_a) {
-    var _b = _a.lines, lines = _b === void 0 ? 3 : _b, _c = _a.lineHeight, lineHeight = _c === void 0 ? 1.6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 14 : _d, _e = _a.bg, bg = _e === void 0 ? "var(--bodyBg)" : _e, _f = _a.expand, expand = _f === void 0 ? "Expand" : _f, _g = _a.collapse, collapse = _g === void 0 ? "Collapse" : _g, props = tslib_1.__rest(_a, ["lines", "lineHeight", "fontSize", "bg", "expand", "collapse"]);
-    var defaultMaxHeight = lines * (lineHeight * fontSize);
-    var _h = (0, react_1.useState)(false), expanded = _h[0], setExpanded = _h[1];
-    var _j = (0, react_1.useState)(defaultMaxHeight), maxHeight = _j[0], setMaxHeight = _j[1];
-    var _k = (0, react_1.useState)(0), fullHeight = _k[0], setFullHeight = _k[1];
-    var _l = (0, react_1.useState)(false), exceeds = _l[0], setExceeds = _l[1];
-    var content = (0, react_1.useRef)(null);
-    var height = (0, framer_motion_1.useSpring)(defaultMaxHeight);
-    var styles = (0, react_1.useMemo)(function () { return (exceeds ? { height: height, overflow: "hidden" } : {}); }, [exceeds, height]);
-    var handleExpandClick = function () {
-        setExpanded(function (prevExpanded) { return !prevExpanded; });
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReadMore", {
+    enumerable: true,
+    get: function() {
+        return ReadMore;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _framermotion = require("framer-motion");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _hooks = require("../hooks");
+const Root = _styledcomponents.default.div``;
+const Content = _styledcomponents.default.div`
+  & p:first-child {
+    margin-top: 0;
+  }
+`;
+const BtnWrap = _styledcomponents.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 = _styledcomponents.default.div`
+  width: 30%;
+  transition: transform 0.18s ease-in-out;
+  background: linear-gradient(45deg, transparent 50%, ${(p)=>p.$bg} 70%);
+`;
+const Btn = _styledcomponents.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 = _styledcomponents.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.useState)(false);
+    const [maxHeight, setMaxHeight] = (0, _react.useState)(defaultMaxHeight);
+    const [fullHeight, setFullHeight] = (0, _react.useState)(0);
+    const [exceeds, setExceeds] = (0, _react.useState)(false);
+    const content = (0, _react.useRef)(null);
+    const height = (0, _framermotion.useSpring)(defaultMaxHeight);
+    const styles = (0, _react.useMemo)(()=>exceeds ? {
+            height,
+            overflow: "hidden"
+        } : {}, [
+        exceeds,
+        height
+    ]);
+    const handleExpandClick = ()=>{
+        setExpanded((prevExpanded)=>!prevExpanded);
     };
-    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+    (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         if (content.current) {
-            var elementHeight = content.current.offsetHeight;
-            var newExceeds = elementHeight > maxHeight;
+            const elementHeight = content.current.offsetHeight;
+            const newExceeds = elementHeight > maxHeight;
             if (!newExceeds) {
                 setMaxHeight(elementHeight);
             }
             setExceeds(newExceeds);
             setFullHeight(elementHeight);
         }
-    }, [content, maxHeight]);
-    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+    }, [
+        content,
+        maxHeight
+    ]);
+    (0, _hooks.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, tslib_1.__assign({ 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 })] })] }))] }));
+    }, [
+        expanded,
+        height,
+        fullHeight,
+        maxHeight
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(Root, null, /*#__PURE__*/ _react.default.createElement(_framermotion.m.div, {
+        style: styles
+    }, /*#__PURE__*/ _react.default.createElement(Content, {
+        ref: content,
+        ...props
+    })), exceeds && /*#__PURE__*/ _react.default.createElement(BtnWrap, {
+        $expanded: expanded
+    }, /*#__PURE__*/ _react.default.createElement(BtnFader, {
+        $bg: bg
+    }), /*#__PURE__*/ _react.default.createElement(Btn, {
+        $fontSize: fontSize,
+        $lineHeight: lineHeight,
+        onClick: handleExpandClick,
+        "aria-expanded": expanded,
+        "aria-label": expanded ? collapse : expand
+    }, expanded ? collapse : expand, /*#__PURE__*/ _react.default.createElement(BtnIcon, {
+        $expanded: expanded
+    }))));
 };
-exports.ReadMore = ReadMore;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Typography/ReadMore.mjs

@@ -1,43 +1,99 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useMemo } from "react";
-import styled from "styled-components";
 import { m, useSpring } from "framer-motion";
+import React, { useMemo, useRef, useState } from "react";
+import styled from "styled-components";
 // import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
 import { useIsomorphicLayoutEffect } from "../hooks";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & p:first-child {\n    margin-top: 0;\n  }\n"], ["\n  & p:first-child {\n    margin-top: 0;\n  }\n"])));
-var BtnWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  transition: transform 0.18s ease-in-out;\n  text-align: right;\n  transform: translateY(", ");\n  opacity: ", ";\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  transition: transform 0.18s ease-in-out;\n  text-align: right;\n  transform: translateY(", ");\n  opacity: ", ";\n"])), function (p) { return (p.$expanded ? "0" : "-100%"); }, function (p) { return (p.$expanded ? 0 : 1); });
-var BtnFader = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 30%;\n  transition: transform 0.18s ease-in-out;\n  background: linear-gradient(45deg, transparent 50%, ", " 70%);\n"], ["\n  width: 30%;\n  transition: transform 0.18s ease-in-out;\n  background: linear-gradient(45deg, transparent 50%, ", " 70%);\n"])), function (p) { return p.$bg; });
-var Btn = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0 10px 0 10px;\n  line-height: ", ";\n  background: var(--bodyBg);\n  color: var(--grey600);\n  white-space: nowrap;\n  font-size: ", "px;\n  cursor: pointer;\n"], ["\n  padding: 0 10px 0 10px;\n  line-height: ", ";\n  background: var(--bodyBg);\n  color: var(--grey600);\n  white-space: nowrap;\n  font-size: ", "px;\n  cursor: pointer;\n"])), function (p) { return (p.$lineHeight ? p.$lineHeight : "inherit"); }, function (p) { return p.$fontSize; });
-var BtnIcon = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n  margin: 0 0 0 4px;\n  transition: transform 0.18s ease-in-out;\n  ", ";\n  font-size: ", "px;\n"], ["\n  display: inline-block;\n  margin: 0 0 0 4px;\n  transition: transform 0.18s ease-in-out;\n  ", ";\n  font-size: ", "px;\n"])), function (p) { return (p.$expanded ? "transform: rotate(180deg);" : ""); }, function (p) { return p.$fontSize; });
-export var ReadMore = function (_a) {
-    var _b = _a.lines, lines = _b === void 0 ? 3 : _b, _c = _a.lineHeight, lineHeight = _c === void 0 ? 1.6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 14 : _d, _e = _a.bg, bg = _e === void 0 ? "var(--bodyBg)" : _e, _f = _a.expand, expand = _f === void 0 ? "Expand" : _f, _g = _a.collapse, collapse = _g === void 0 ? "Collapse" : _g, props = __rest(_a, ["lines", "lineHeight", "fontSize", "bg", "expand", "collapse"]);
-    var defaultMaxHeight = lines * (lineHeight * fontSize);
-    var _h = useState(false), expanded = _h[0], setExpanded = _h[1];
-    var _j = useState(defaultMaxHeight), maxHeight = _j[0], setMaxHeight = _j[1];
-    var _k = useState(0), fullHeight = _k[0], setFullHeight = _k[1];
-    var _l = useState(false), exceeds = _l[0], setExceeds = _l[1];
-    var content = useRef(null);
-    var height = useSpring(defaultMaxHeight);
-    var styles = useMemo(function () { return (exceeds ? { height: height, overflow: "hidden" } : {}); }, [exceeds, height]);
-    var handleExpandClick = function () {
-        setExpanded(function (prevExpanded) { return !prevExpanded; });
+const Root = styled.div``;
+const Content = styled.div`
+  & p:first-child {
+    margin-top: 0;
+  }
+`;
+const BtnWrap = styled.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.div`
+  width: 30%;
+  transition: transform 0.18s ease-in-out;
+  background: linear-gradient(45deg, transparent 50%, ${(p)=>p.$bg} 70%);
+`;
+const Btn = styled.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.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;
+`;
+export 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] = useState(false);
+    const [maxHeight, setMaxHeight] = useState(defaultMaxHeight);
+    const [fullHeight, setFullHeight] = useState(0);
+    const [exceeds, setExceeds] = useState(false);
+    const content = useRef(null);
+    const height = useSpring(defaultMaxHeight);
+    const styles = useMemo(()=>exceeds ? {
+            height,
+            overflow: "hidden"
+        } : {}, [
+        exceeds,
+        height
+    ]);
+    const handleExpandClick = ()=>{
+        setExpanded((prevExpanded)=>!prevExpanded);
     };
-    useIsomorphicLayoutEffect(function () {
+    useIsomorphicLayoutEffect(()=>{
         if (content.current) {
-            var elementHeight = content.current.offsetHeight;
-            var newExceeds = elementHeight > maxHeight;
+            const elementHeight = content.current.offsetHeight;
+            const newExceeds = elementHeight > maxHeight;
             if (!newExceeds) {
                 setMaxHeight(elementHeight);
             }
             setExceeds(newExceeds);
             setFullHeight(elementHeight);
         }
-    }, [content, maxHeight]);
-    useIsomorphicLayoutEffect(function () {
+    }, [
+        content,
+        maxHeight
+    ]);
+    useIsomorphicLayoutEffect(()=>{
         height.set(expanded ? fullHeight : maxHeight);
-    }, [expanded, height, fullHeight, maxHeight]);
-    return (_jsxs(Root, { children: [_jsx(m.div, { style: styles, children: _jsx(Content, __assign({ ref: content }, props)) }), exceeds && (_jsxs(BtnWrap, { "$expanded": expanded, children: [_jsx(BtnFader, { "$bg": bg }), _jsxs(Btn, { "$fontSize": fontSize, "$lineHeight": lineHeight, onClick: handleExpandClick, "aria-expanded": expanded, "aria-label": expanded ? collapse : expand, children: [expanded ? collapse : expand, _jsx(BtnIcon, { "$expanded": expanded })] })] }))] }));
+    }, [
+        expanded,
+        height,
+        fullHeight,
+        maxHeight
+    ]);
+    return /*#__PURE__*/ React.createElement(Root, null, /*#__PURE__*/ React.createElement(m.div, {
+        style: styles
+    }, /*#__PURE__*/ React.createElement(Content, {
+        ref: content,
+        ...props
+    })), exceeds && /*#__PURE__*/ React.createElement(BtnWrap, {
+        $expanded: expanded
+    }, /*#__PURE__*/ React.createElement(BtnFader, {
+        $bg: bg
+    }), /*#__PURE__*/ React.createElement(Btn, {
+        $fontSize: fontSize,
+        $lineHeight: lineHeight,
+        onClick: handleExpandClick,
+        "aria-expanded": expanded,
+        "aria-label": expanded ? collapse : expand
+    }, expanded ? collapse : expand, /*#__PURE__*/ React.createElement(BtnIcon, {
+        $expanded: expanded
+    }))));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;