@koine/react 1.1.10 → 1.1.12

package/Tabs/tw/material.js

@@ -1,18 +1,21 @@
-import { __makeTemplateObject } from "tslib";
-import { classed, extendComponent } from "../../helpers";
-import { KoineTabs as _ } from "./bare";
-export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\""], ["< class=\""])));
-export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"border-b-gray-200 border-b border-solid"], ["< class=\"border-b-gray-200 border-b border-solid"])));
-export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"flex-col relative py-3 px-4 uppercase"], ["< class=\"flex-col relative py-3 px-4 uppercase"]))); // ${p => p.selected ? "text-cyan-600" : ""}
-export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"absolute bottom-0 w-full h-[2px] ", ""], ["< class=\"absolute bottom-0 w-full h-[2px] ", ""])), function (p) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Panel = exports.Indicator = exports.Tab = exports.List = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var helpers_1 = require("../../helpers");
+var bare_1 = require("./bare");
+exports.Root = (0, helpers_1.classed)(bare_1.KoineTabs.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["< class=\""], ["< class=\""])));
+exports.List = (0, helpers_1.classed)(bare_1.KoineTabs.List)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["< class=\"border-b-gray-200 border-b border-solid"], ["< class=\"border-b-gray-200 border-b border-solid"])));
+exports.Tab = (0, helpers_1.classed)(bare_1.KoineTabs.Tab)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["< class=\"flex-col relative py-3 px-4 uppercase"], ["< class=\"flex-col relative py-3 px-4 uppercase"]))); // ${p => p.selected ? "text-cyan-600" : ""}
+exports.Indicator = (0, helpers_1.classed)(bare_1.KoineTabs.Indicator)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["< class=\"absolute bottom-0 w-full h-[2px] ", ""], ["< class=\"absolute bottom-0 w-full h-[2px] ", ""])), function (p) {
     return p.selected ? "bg-current" : "";
 });
-export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
-export var KoineTabs = extendComponent(_, {
-    Root: Root,
-    List: List,
-    Tab: Tab,
-    Indicator: Indicator,
-    Panel: Panel,
+exports.Panel = (0, helpers_1.classed)(bare_1.KoineTabs.Panel)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+exports.KoineTabs = (0, helpers_1.extendComponent)(bare_1.KoineTabs, {
+    Root: exports.Root,
+    List: exports.List,
+    Tab: exports.Tab,
+    Indicator: exports.Indicator,
+    Panel: exports.Panel,
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Tabs/tw/material.mjs

@@ -0,0 +1,18 @@
+import { __makeTemplateObject } from "tslib";
+import { classed, extendComponent } from "../../helpers";
+import { KoineTabs as _ } from "./bare";
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\""], ["< class=\""])));
+export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"border-b-gray-200 border-b border-solid"], ["< class=\"border-b-gray-200 border-b border-solid"])));
+export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"flex-col relative py-3 px-4 uppercase"], ["< class=\"flex-col relative py-3 px-4 uppercase"]))); // ${p => p.selected ? "text-cyan-600" : ""}
+export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"absolute bottom-0 w-full h-[2px] ", ""], ["< class=\"absolute bottom-0 w-full h-[2px] ", ""])), function (p) {
+    return p.selected ? "bg-current" : "";
+});
+export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+export var KoineTabs = extendComponent(_, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Tabs/useTabs.js

@@ -1,15 +1,18 @@
-import { useCallback, useId, useMemo } from "react";
-import { unstable_useControlled as useControlled } from "@mui/utils";
-export var useTabs = function (props) {
+"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 = useControlled({
+    var _a = (0, utils_1.unstable_useControlled)({
         controlled: valueProp,
         default: defaultValue,
         name: "Tabs",
         state: "value",
     }), value = _a[0], setValue = _a[1];
-    var idPrefix = useId();
-    var onSelected = useCallback(function (e, newValue) {
+    var idPrefix = (0, react_1.useId)();
+    var onSelected = (0, react_1.useCallback)(function (e, newValue) {
         setValue(newValue);
         if (onChange) {
             onChange(e, newValue);
@@ -18,7 +21,7 @@ export var useTabs = function (props) {
     var getRootProps = function () {
         return {};
     };
-    var tabsContextValue = useMemo(function () {
+    var tabsContextValue = (0, react_1.useMemo)(function () {
         return {
             idPrefix: idPrefix,
             value: value,
@@ -40,4 +43,5 @@ export var useTabs = function (props) {
         tabsContextValue: tabsContextValue,
     };
 };
-export default useTabs;
+exports.useTabs = useTabs;
+exports.default = exports.useTabs;

package/{node/Tabs/useTabs.js → Tabs/useTabs.mjs}

@@ -1,18 +1,15 @@
-"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) {
+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 = (0, utils_1.unstable_useControlled)({
+    var _a = useControlled({
         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) {
+    var idPrefix = useId();
+    var onSelected = useCallback(function (e, newValue) {
         setValue(newValue);
         if (onChange) {
             onChange(e, newValue);
@@ -21,7 +18,7 @@ var useTabs = function (props) {
     var getRootProps = function () {
         return {};
     };
-    var tabsContextValue = (0, react_1.useMemo)(function () {
+    var tabsContextValue = useMemo(function () {
         return {
             idPrefix: idPrefix,
             value: value,
@@ -43,5 +40,4 @@ var useTabs = function (props) {
         tabsContextValue: tabsContextValue,
     };
 };
-exports.useTabs = useTabs;
-exports.default = exports.useTabs;
+export default useTabs;

package/Typography/CopyPasteVisible.js

@@ -1,4 +1,7 @@
-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"])));
+"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;

package/Typography/CopyPasteVisible.mjs

@@ -0,0 +1,4 @@
+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;

package/Typography/Native.js

@@ -1,14 +1,17 @@
-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);
+"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;

package/Typography/Native.mjs

@@ -0,0 +1,14 @@
+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;

package/Typography/ReadMore.js

@@ -1,30 +1,33 @@
-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";
+"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";
-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 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 = 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 _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; });
     };
-    useIsomorphicLayoutEffect(function () {
+    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
         if (content.current) {
             var elementHeight = content.current.offsetHeight;
             var newExceeds = elementHeight > maxHeight;
@@ -35,9 +38,10 @@ export var ReadMore = function (_a) {
             setFullHeight(elementHeight);
         }
     }, [content, maxHeight]);
-    useIsomorphicLayoutEffect(function () {
+    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
         height.set(expanded ? fullHeight : maxHeight);
     }, [expanded, height, fullHeight, maxHeight]);
-    return (_jsxs(Root, { children: [_jsx(m.div, __assign({ style: styles }, { children: _jsx(Content, __assign({ ref: content }, props)) })), exceeds && (_jsxs(BtnWrap, __assign({ "$expanded": expanded }, { children: [_jsx(BtnFader, { "$bg": bg }), _jsxs(Btn, __assign({ "$fontSize": fontSize, "$lineHeight": lineHeight, onClick: handleExpandClick, "aria-expanded": expanded, "aria-label": expanded ? collapse : expand }, { children: [expanded ? collapse : expand, _jsx(BtnIcon, { "$expanded": expanded })] }))] })))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.m.div, tslib_1.__assign({ style: styles }, { children: (0, jsx_runtime_1.jsx)(Content, tslib_1.__assign({ ref: content }, props)) })), exceeds && ((0, jsx_runtime_1.jsxs)(BtnWrap, tslib_1.__assign({ "$expanded": expanded }, { children: [(0, jsx_runtime_1.jsx)(BtnFader, { "$bg": bg }), (0, jsx_runtime_1.jsxs)(Btn, tslib_1.__assign({ "$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;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Typography/ReadMore.mjs

@@ -0,0 +1,43 @@
+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 { 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; });
+    };
+    useIsomorphicLayoutEffect(function () {
+        if (content.current) {
+            var elementHeight = content.current.offsetHeight;
+            var newExceeds = elementHeight > maxHeight;
+            if (!newExceeds) {
+                setMaxHeight(elementHeight);
+            }
+            setExceeds(newExceeds);
+            setFullHeight(elementHeight);
+        }
+    }, [content, maxHeight]);
+    useIsomorphicLayoutEffect(function () {
+        height.set(expanded ? fullHeight : maxHeight);
+    }, [expanded, height, fullHeight, maxHeight]);
+    return (_jsxs(Root, { children: [_jsx(m.div, __assign({ style: styles }, { children: _jsx(Content, __assign({ ref: content }, props)) })), exceeds && (_jsxs(BtnWrap, __assign({ "$expanded": expanded }, { children: [_jsx(BtnFader, { "$bg": bg }), _jsxs(Btn, __assign({ "$fontSize": fontSize, "$lineHeight": lineHeight, onClick: handleExpandClick, "aria-expanded": expanded, "aria-label": expanded ? collapse : expand }, { children: [expanded ? collapse : expand, _jsx(BtnIcon, { "$expanded": expanded })] }))] })))] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Typography/TextLoop.js

@@ -1,13 +1,16 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { m, AnimatePresence } from "framer-motion";
-export var TextLoopPiece = function (_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLoop = exports.TextLoopPiece = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var framer_motion_1 = require("framer-motion");
+var TextLoopPiece = function (_a) {
     var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.direction, direction = _e === void 0 ? "up" : _e, _f = _a.inline, inline = _f === void 0 ? true : _f, _g = _a.noOverflow, noOverflow = _g === void 0 ? true : _g, _h = _a.delay, delay = _h === void 0 ? 400 : _h;
-    var placeholderRef = useRef(null);
-    var _j = useState({ data: "", key: "" }), content = _j[0], setContent = _j[1];
-    var _k = useState(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
-    useEffect(function () {
+    var placeholderRef = (0, react_1.useRef)(null);
+    var _j = (0, react_1.useState)({ data: "", key: "" }), content = _j[0], setContent = _j[1];
+    var _k = (0, react_1.useState)(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
+    (0, react_1.useEffect)(function () {
         var timeoutId = setTimeout(function () {
             if (!placeholderRef.current)
                 return;
@@ -18,7 +21,7 @@ export var TextLoopPiece = function (_a) {
         }, delay);
         return function () { return clearTimeout(timeoutId); };
     }, [text, delay, inline]);
-    return (_jsxs("div", __assign({ className: className, style: __assign(__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }) }, { children: [_jsx("span", { ref: placeholderRef, style: { visibility: "hidden" } }), _jsx("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: className, style: tslib_1.__assign(tslib_1.__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }) }, { children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: {
                     overflow: noOverflow ? "hidden" : "visible",
                     display: "block",
                     position: "absolute",
@@ -26,7 +29,7 @@ export var TextLoopPiece = function (_a) {
                     left: 0,
                     height: "100%",
                     width: "100%",
-                } }, { children: _jsx(AnimatePresence, { children: _jsx(m.div, __assign({ style: { position: "absolute" }, initial: {
+                } }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, tslib_1.__assign({ style: { position: "absolute" }, initial: {
                             opacity: 0,
                             y: direction === "down" ? "-100%" : "100%",
                         }, animate: { opacity: 1, y: 0 }, exit: {
@@ -34,13 +37,15 @@ export var TextLoopPiece = function (_a) {
                             y: direction === "down" ? "100%" : "-100%",
                         } }, { children: content.data }), content.key) }) }))] })));
 };
-export var TextLoop = function (_a) {
-    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = __rest(_a, ["texts", "interval"]);
-    var _c = useState(0), index = _c[0], setIndex = _c[1];
-    useEffect(function () {
+exports.TextLoopPiece = TextLoopPiece;
+var TextLoop = function (_a) {
+    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = tslib_1.__rest(_a, ["texts", "interval"]);
+    var _c = (0, react_1.useState)(0), index = _c[0], setIndex = _c[1];
+    (0, react_1.useEffect)(function () {
         var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval // every 3 seconds
         );
         return function () { return clearTimeout(intervalId); };
     }, [interval]);
-    return _jsx(TextLoopPiece, __assign({}, props, { text: texts[index % texts.length] }));
+    return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, tslib_1.__assign({}, props, { text: texts[index % texts.length] }));
 };
+exports.TextLoop = TextLoop;

package/{node/Typography/TextLoop.js → Typography/TextLoop.mjs}

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLoop = exports.TextLoopPiece = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var framer_motion_1 = require("framer-motion");
-var TextLoopPiece = function (_a) {
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { m, AnimatePresence } from "framer-motion";
+export var TextLoopPiece = function (_a) {
     var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.direction, direction = _e === void 0 ? "up" : _e, _f = _a.inline, inline = _f === void 0 ? true : _f, _g = _a.noOverflow, noOverflow = _g === void 0 ? true : _g, _h = _a.delay, delay = _h === void 0 ? 400 : _h;
-    var placeholderRef = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)({ data: "", key: "" }), content = _j[0], setContent = _j[1];
-    var _k = (0, react_1.useState)(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
-    (0, react_1.useEffect)(function () {
+    var placeholderRef = useRef(null);
+    var _j = useState({ data: "", key: "" }), content = _j[0], setContent = _j[1];
+    var _k = useState(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
+    useEffect(function () {
         var timeoutId = setTimeout(function () {
             if (!placeholderRef.current)
                 return;
@@ -21,7 +18,7 @@ var TextLoopPiece = function (_a) {
         }, delay);
         return function () { return clearTimeout(timeoutId); };
     }, [text, delay, inline]);
-    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: className, style: tslib_1.__assign(tslib_1.__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }) }, { children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: {
+    return (_jsxs("div", __assign({ className: className, style: __assign(__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }) }, { children: [_jsx("span", { ref: placeholderRef, style: { visibility: "hidden" } }), _jsx("div", __assign({ style: {
                     overflow: noOverflow ? "hidden" : "visible",
                     display: "block",
                     position: "absolute",
@@ -29,7 +26,7 @@ var TextLoopPiece = function (_a) {
                     left: 0,
                     height: "100%",
                     width: "100%",
-                } }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, tslib_1.__assign({ style: { position: "absolute" }, initial: {
+                } }, { children: _jsx(AnimatePresence, { children: _jsx(m.div, __assign({ style: { position: "absolute" }, initial: {
                             opacity: 0,
                             y: direction === "down" ? "-100%" : "100%",
                         }, animate: { opacity: 1, y: 0 }, exit: {
@@ -37,15 +34,13 @@ var TextLoopPiece = function (_a) {
                             y: direction === "down" ? "100%" : "-100%",
                         } }, { children: content.data }), content.key) }) }))] })));
 };
-exports.TextLoopPiece = TextLoopPiece;
-var TextLoop = function (_a) {
-    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = tslib_1.__rest(_a, ["texts", "interval"]);
-    var _c = (0, react_1.useState)(0), index = _c[0], setIndex = _c[1];
-    (0, react_1.useEffect)(function () {
+export var TextLoop = function (_a) {
+    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = __rest(_a, ["texts", "interval"]);
+    var _c = useState(0), index = _c[0], setIndex = _c[1];
+    useEffect(function () {
         var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval // every 3 seconds
         );
         return function () { return clearTimeout(intervalId); };
     }, [interval]);
-    return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, tslib_1.__assign({}, props, { text: texts[index % texts.length] }));
+    return _jsx(TextLoopPiece, __assign({}, props, { text: texts[index % texts.length] }));
 };
-exports.TextLoop = TextLoop;

package/Typography/TypeStairs.js

@@ -1,12 +1,15 @@
-import { __assign } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-export var TypeStairs = forwardRef(function (_a, ref) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypeStairs = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+exports.TypeStairs = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, limit = _a.limit;
     // split in rows or just use one row if there is no limit
     var rows = limit ? splitTextIntoRows(children, limit) : [children];
-    return rows.length > 1 ? (_jsx(_Fragment, { children: rows.map(function (row, rowIndex) {
-            return (_jsxs("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && _jsx("br", {})] }, "row-".concat(rowIndex)));
+    return rows.length > 1 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: rows.map(function (row, rowIndex) {
+            return ((0, jsx_runtime_1.jsxs)("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, "row-".concat(rowIndex)));
         }) })) : (renderRow(rows[0], 0, ref));
 });
 /**
@@ -39,12 +42,12 @@ function renderRow(row, rowIndex, ref) {
     var letters = row.split("");
     var fontWeightIdx = 1;
     // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return (_jsx(_Fragment, { children: letters.map(function (letter, letterIndex) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: letters.map(function (letter, letterIndex) {
             var fontWeight = Math.min(fontWeightIdx * 100, 800);
             // don't waste a fontWeight for a white space
             if (letter !== " ") {
                 fontWeightIdx++;
             }
-            return (_jsx("span", __assign({ style: { fontWeight: fontWeight }, ref: ref }, { children: letter }), "letter-".concat(rowIndex, "-").concat(letterIndex)));
+            return ((0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ style: { fontWeight: fontWeight }, ref: ref }, { children: letter }), "letter-".concat(rowIndex, "-").concat(letterIndex)));
         }) }));
 }

package/{node/Typography/TypeStairs.js → Typography/TypeStairs.mjs}

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypeStairs = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-exports.TypeStairs = (0, react_1.forwardRef)(function (_a, ref) {
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+export var TypeStairs = forwardRef(function (_a, ref) {
     var children = _a.children, limit = _a.limit;
     // split in rows or just use one row if there is no limit
     var rows = limit ? splitTextIntoRows(children, limit) : [children];
-    return rows.length > 1 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: rows.map(function (row, rowIndex) {
-            return ((0, jsx_runtime_1.jsxs)("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, "row-".concat(rowIndex)));
+    return rows.length > 1 ? (_jsx(_Fragment, { children: rows.map(function (row, rowIndex) {
+            return (_jsxs("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && _jsx("br", {})] }, "row-".concat(rowIndex)));
         }) })) : (renderRow(rows[0], 0, ref));
 });
 /**
@@ -42,12 +39,12 @@ function renderRow(row, rowIndex, ref) {
     var letters = row.split("");
     var fontWeightIdx = 1;
     // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: letters.map(function (letter, letterIndex) {
+    return (_jsx(_Fragment, { children: letters.map(function (letter, letterIndex) {
             var fontWeight = Math.min(fontWeightIdx * 100, 800);
             // don't waste a fontWeight for a white space
             if (letter !== " ") {
                 fontWeightIdx++;
             }
-            return ((0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ style: { fontWeight: fontWeight }, ref: ref }, { children: letter }), "letter-".concat(rowIndex, "-").concat(letterIndex)));
+            return (_jsx("span", __assign({ style: { fontWeight: fontWeight }, ref: ref }, { children: letter }), "letter-".concat(rowIndex, "-").concat(letterIndex)));
         }) }));
 }

package/Typography/index.js

@@ -1,5 +1,8 @@
-export * from "./CopyPasteVisible";
-export * from "./Native";
-export * from "./ReadMore";
-export * from "./TextLoop";
-export * from "./TypeStairs";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CopyPasteVisible"), exports);
+tslib_1.__exportStar(require("./Native"), exports);
+tslib_1.__exportStar(require("./ReadMore"), exports);
+tslib_1.__exportStar(require("./TextLoop"), exports);
+tslib_1.__exportStar(require("./TypeStairs"), exports);

package/Typography/index.mjs

@@ -0,0 +1,5 @@
+export * from "./CopyPasteVisible";
+export * from "./Native";
+export * from "./ReadMore";
+export * from "./TextLoop";
+export * from "./TypeStairs";

package/Typography/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Typography/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }