@koine/react 1.0.11 → 1.0.14

package/Spacing/Spacing.js

@@ -1,15 +1,13 @@
+import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { isUndefined } from "@koine/utils";
 import { spacingTop, spacingBottom, } from "../styles/spacing";
-const Root = styled.div `
-  ${(p) => p.$top && spacingTop.call(p.theme, ...p.$top)}
-  ${(p) => p.$bottom && spacingBottom.call(p.theme, ...p.$bottom)}
-`;
-const extractDirectionArgs = (raw) => {
-    const [size, factor, property, devices] = raw.split(":");
-    const factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
-    const devicesArg = devices?.split(",");
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], p.$bottom, false)); });
+var extractDirectionArgs = function (raw) {
+    var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
+    var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
+    var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
     return [size, factorArg, property, devicesArg];
 };
 /**
@@ -24,9 +22,10 @@ const extractDirectionArgs = (raw) => {
  * <Spacing top="sm:2:padding:tablet,desktop" />
  * ```
  */
-export const Spacing = ({ top, bottom, vertical, ...props }) => {
-    let $top;
-    let $bottom;
+export var Spacing = function (_a) {
+    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = __rest(_a, ["top", "bottom", "vertical"]);
+    var $top;
+    var $bottom;
     if (top) {
         $top = extractDirectionArgs(top);
     }
@@ -41,5 +40,6 @@ export const Spacing = ({ top, bottom, vertical, ...props }) => {
         // eslint-disable-next-line react/jsx-no-useless-fragment
         return _jsx(_Fragment, { children: props.children });
     }
-    return _jsx(Root, { "$top": $top, "$bottom": $bottom, ...props });
+    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
 };
+var templateObject_1;

package/Sticky/Sticky.js

@@ -1,4 +1,4 @@
-export const Sticky = null;
+export var Sticky = null;
 // import {
 //   Ref,
 //   CSSProperties,

package/Sticky/StickyCss.js

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

package/Tabs/TabsMui.js

@@ -1,3 +1,4 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import TabsUnstyled from "@mui/base/TabsUnstyled";
@@ -5,15 +6,16 @@ import TabsListUnstyled from "@mui/base/TabsListUnstyled";
 import TabUnstyled, { useTab } from "@mui/base/TabUnstyled";
 import TabPanelUnstyled from "@mui/base/TabPanelUnstyled";
 import { extendComponent, } from "../helpers";
-export const Root = TabsUnstyled;
-export const List = TabsListUnstyled;
+export var Root = TabsUnstyled;
+export var List = TabsListUnstyled;
 // export const Tab = TabUnstyled as unknown as Props["Tab"];
-export const Indicator = "span";
-export const Panel = TabPanelUnstyled;
-export const Tab = forwardRef(function Tab({ children, component, componentsProps, components, Indicator, ...props }, ref) {
-    const { active, disabled, selected } = useTab({ ...props, ref });
-    const indicatorProps = { active, disabled, selected };
-    return (_jsxs(TabUnstyled /* ref={ref}  */, { ...props, children: [children, Indicator && _jsx(Indicator, { ...indicatorProps })] }));
+export var Indicator = "span";
+export var Panel = TabPanelUnstyled;
+export var Tab = forwardRef(function Tab(_a, ref) {
+    var children = _a.children, component = _a.component, componentsProps = _a.componentsProps, components = _a.components, Indicator = _a.Indicator, props = __rest(_a, ["children", "component", "componentsProps", "components", "Indicator"]);
+    var _b = useTab(__assign(__assign({}, props), { ref: ref })), active = _b.active, disabled = _b.disabled, selected = _b.selected;
+    var indicatorProps = { active: active, disabled: disabled, selected: selected };
+    return (_jsxs(TabUnstyled /* ref={ref}  */, __assign({}, props, { children: [children, Indicator && _jsx(Indicator, __assign({}, indicatorProps))] })));
 });
 /**
  *
@@ -31,13 +33,14 @@ export const Tab = forwardRef(function Tab({ children, component, componentsProp
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
  */
-const TabsWithRef = forwardRef(function Tabs({ Root: _Root, List: _List, Tab: _Tab, Indicator: _Indicator, Panel: _Panel, ...props }, ref) {
-    return _jsx(Root, { ...props, ref: ref });
+var TabsWithRef = forwardRef(function Tabs(_a, ref) {
+    var _Root = _a.Root, _List = _a.List, _Tab = _a.Tab, _Indicator = _a.Indicator, _Panel = _a.Panel, props = __rest(_a, ["Root", "List", "Tab", "Indicator", "Panel"]);
+    return _jsx(Root, __assign({}, props, { ref: ref }));
 });
-export const KoineTabs = extendComponent(TabsWithRef, {
-    Root,
-    List,
-    Tab,
-    Indicator,
-    Panel,
+export var KoineTabs = extendComponent(TabsWithRef, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
 });

package/Tabs/tw/bare.js

@@ -1,15 +1,17 @@
+import { __makeTemplateObject } from "tslib";
 import { classed, extendComponent } from "../../helpers";
 // import type { ComponentsProps } from "../TabsMui";
 import * as _ from "../TabsMui";
-export const Root = classed(_.Root) `< class="tabs`;
-export const List = classed(_.List) `< class="tabsList flex`;
-export const Tab = classed(_.Tab) `< class="tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none`;
-export const Indicator = classed(_.Indicator) `< class="tabsIndicator`;
-export const Panel = classed(_.Panel) `< class="tabsPanel`;
-export const KoineTabs = extendComponent(_.KoineTabs, {
-    Root,
-    List,
-    Tab,
-    Indicator,
-    Panel,
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\"tabs"], ["< class=\"tabs"])));
+export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"tabsList flex"], ["< class=\"tabsList flex"])));
+export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"], ["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"])));
+export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"tabsIndicator"], ["< class=\"tabsIndicator"])));
+export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+export var KoineTabs = extendComponent(_.KoineTabs, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Tabs/tw/material.js

@@ -1,14 +1,18 @@
+import { __makeTemplateObject } from "tslib";
 import { classed, extendComponent } from "../../helpers";
 import { KoineTabs as _ } from "./bare";
-export const Root = classed(_.Root) `< class="`;
-export const List = classed(_.List) `< class="border-b-gray-200 border-b border-solid`;
-export const Tab = classed(_.Tab) `< class="flex-col relative py-3 px-4 uppercase`; // ${p => p.selected ? "text-cyan-600" : ""}
-export const Indicator = classed(_.Indicator) `< class="absolute bottom-0 w-full h-[2px] ${p => p.selected ? "bg-current" : ""}`;
-export const Panel = classed(_.Panel) `< class="tabsPanel`;
-export const KoineTabs = extendComponent(_, {
-    Root,
-    List,
-    Tab,
-    Indicator,
-    Panel,
+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,32 +1,32 @@
 import { useCallback, /* useId, */ useMemo } from "react";
 import { unstable_useControlled as useControlled } from "@mui/utils";
 import { useId } from "../hooks/useId";
-export const useTabs = (props) => {
-    const { value: valueProp, defaultValue, onChange, orientation, direction, selectionFollowsFocus, } = props;
-    const [value, setValue] = useControlled({
+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({
         controlled: valueProp,
         default: defaultValue,
         name: "Tabs",
         state: "value",
-    });
-    const idPrefix = useId();
-    const onSelected = useCallback((e, newValue) => {
+    }), value = _a[0], setValue = _a[1];
+    var idPrefix = useId();
+    var onSelected = useCallback(function (e, newValue) {
         setValue(newValue);
         if (onChange) {
             onChange(e, newValue);
         }
     }, [onChange, setValue]);
-    const getRootProps = () => {
+    var getRootProps = function () {
         return {};
     };
-    const tabsContextValue = useMemo(() => {
+    var tabsContextValue = useMemo(function () {
         return {
-            idPrefix,
-            value,
-            onSelected,
-            orientation,
-            direction,
-            selectionFollowsFocus,
+            idPrefix: idPrefix,
+            value: value,
+            onSelected: onSelected,
+            orientation: orientation,
+            direction: direction,
+            selectionFollowsFocus: selectionFollowsFocus,
         };
     }, [
         idPrefix,
@@ -37,8 +37,8 @@ export const useTabs = (props) => {
         selectionFollowsFocus,
     ]);
     return {
-        getRootProps,
-        tabsContextValue,
+        getRootProps: getRootProps,
+        tabsContextValue: tabsContextValue,
     };
 };
 export default useTabs;

package/Typography/CopyPasteVisible.js

@@ -1,6 +1,4 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const CopyPasteVisible = styled.span `
-  color: transparent;
-  opacity: 0;
-  font-size: 0;
-`;
+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,47 +1,14 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 import { min } from "../styles/media";
-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}
-`;
+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,60 +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";
 // import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
 import { useIsomorphicLayoutEffect } from "../hooks";
-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);
+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(() => {
+    useIsomorphicLayoutEffect(function () {
         if (content.current) {
-            const elementHeight = content.current.offsetHeight;
-            const newExceeds = elementHeight > maxHeight;
+            var elementHeight = content.current.offsetHeight;
+            var newExceeds = elementHeight > maxHeight;
             if (!newExceeds) {
                 setMaxHeight(elementHeight);
             }
@@ -62,8 +35,9 @@ export const ReadMore = ({ lines = 3, lineHeight = 1.6, fontSize = 14, bg = "var
             setFullHeight(elementHeight);
         }
     }, [content, maxHeight]);
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect(function () {
         height.set(expanded ? fullHeight : maxHeight);
     }, [expanded, height, fullHeight, maxHeight]);
-    return (_jsxs(Root, { children: [_jsx(m.div, { style: styles, children: _jsx(Content, { 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 })] })] }))] }));
+    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,12 +1,14 @@
+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 const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400, }) => {
-    const placeholderRef = useRef(null);
-    const [content, setContent] = useState({ data: "", key: "" });
-    const [width, setWidth] = useState(inline ? 0 : "auto");
-    useEffect(() => {
-        const timeoutId = setTimeout(() => {
+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 = 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;
             placeholderRef.current.innerHTML = text + "";
@@ -14,15 +16,9 @@ export const TextLoopPiece = ({ text = "", style = {}, className = "", direction
                 setWidth(placeholderRef.current.offsetWidth);
             setContent({ data: text + "", key: new Date() + "" });
         }, delay);
-        return () => clearTimeout(timeoutId);
+        return function () { return clearTimeout(timeoutId); };
     }, [text, delay, inline]);
-    return (_jsxs("div", { className: className, style: {
-            ...style,
-            position: "relative",
-            display: inline ? "inline-block" : "block",
-            width,
-            whiteSpace: inline ? "nowrap" : "normal",
-        }, children: [_jsx("span", { ref: placeholderRef, style: { visibility: "hidden" } }), _jsx("div", { 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",
@@ -30,20 +26,21 @@ export const TextLoopPiece = ({ text = "", style = {}, className = "", direction
                     left: 0,
                     height: "100%",
                     width: "100%",
-                }, children: _jsx(AnimatePresence, { children: _jsx(m.div, { 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: {
                             opacity: 0,
                             y: direction === "down" ? "100%" : "-100%",
-                        }, children: content.data }, content.key) }) })] }));
+                        } }, { children: content.data }), content.key) }) }))] })));
 };
-export const TextLoop = ({ texts, interval = 3000, ...props }) => {
-    const [index, setIndex] = useState(0);
-    useEffect(() => {
-        const intervalId = setInterval(() => setIndex((index) => index + 1), interval // every 3 seconds
+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 () => clearTimeout(intervalId);
+        return function () { return clearTimeout(intervalId); };
     }, [interval]);
-    return _jsx(TextLoopPiece, { ...props, text: texts[index % texts.length] });
+    return _jsx(TextLoopPiece, __assign({}, props, { text: texts[index % texts.length] }));
 };

package/Typography/TypeStairs.js

@@ -1,23 +1,27 @@
+import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-export const TypeStairs = forwardRef(({ children, limit }, ref) => {
+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
-    const rows = limit ? splitTextIntoRows(children, limit) : [children];
-    return rows.length > 1 ? (_jsx(_Fragment, { children: rows.map((row, rowIndex) => {
-            return (_jsxs("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && _jsx("br", {})] }, `row-${rowIndex}`));
+    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)));
         }) })) : (renderRow(rows[0], 0, ref));
 });
 /**
  * every number chars find a space and break, then restart the gradient weight
  * @see https://stackoverflow.com/a/25770787
  */
-function splitTextIntoRows(input = "", limit = 18) {
-    const rows = [];
-    const arr = input.split(" ");
-    let currow = arr[0];
-    let rowlen = currow.length;
-    for (let i = 1; i < arr.length; i++) {
-        const word = arr[i];
+function splitTextIntoRows(input, limit) {
+    if (input === void 0) { input = ""; }
+    if (limit === void 0) { limit = 18; }
+    var rows = [];
+    var arr = input.split(" ");
+    var currow = arr[0];
+    var rowlen = currow.length;
+    for (var i = 1; i < arr.length; i++) {
+        var word = arr[i];
         rowlen += word.length + 1;
         if (rowlen <= limit) {
             currow += " " + word;
@@ -32,15 +36,15 @@ function splitTextIntoRows(input = "", limit = 18) {
     return rows;
 }
 function renderRow(row, rowIndex, ref) {
-    const letters = row.split("");
-    let fontWeightIdx = 1;
+    var letters = row.split("");
+    var fontWeightIdx = 1;
     // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return (_jsx(_Fragment, { children: letters.map((letter, letterIndex) => {
-            const fontWeight = Math.min(fontWeightIdx * 100, 800);
+    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 (_jsx("span", { style: { fontWeight }, ref: ref, children: letter }, `letter-${rowIndex}-${letterIndex}`));
+            return (_jsx("span", __assign({ style: { fontWeight: fontWeight }, ref: ref }, { children: letter }), "letter-".concat(rowIndex, "-").concat(letterIndex)));
         }) }));
 }

package/helpers/classed.js

@@ -1,3 +1,4 @@
+import { __assign } from "tslib";
 import { createElement, forwardRef } from "react";
 /**
  * This utility allows to extend a component a là `styled-components` but for
@@ -15,12 +16,17 @@ import { createElement, forwardRef } from "react";
  */
 export function classed(component) {
     // @ts-expect-error nevermind for now...
-    const type = component.type || component;
-    return function (strings, ...args) {
-        const WrappedComponent = forwardRef(function (props, ref) {
-            const argResolved = args
-                .map((arg, index) => {
-                let result = "";
+    var type = component.type || component;
+    return function (strings) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        var WrappedComponent = forwardRef(function (props, ref) {
+            var _a;
+            var argResolved = args
+                .map(function (arg, index) {
+                var result = "";
                 if (typeof arg === "function") {
                     result = arg(props);
                 }
@@ -30,12 +36,12 @@ export function classed(component) {
                 return strings[index] + result;
             })
                 .join("");
-            const isNativeHtmlElement = typeof type === "string";
-            const propsToForward = isNativeHtmlElement
+            var isNativeHtmlElement = typeof type === "string";
+            var propsToForward = isNativeHtmlElement
                 ? {}
                 : props;
             if (isNativeHtmlElement) {
-                for (const key in props) {
+                for (var key in props) {
                     // like styled-components `transient` props
                     if (!key.startsWith("$")) {
                         // FIXME: for react 18 we need: @ts-expect-error
@@ -44,19 +50,16 @@ export function classed(component) {
                 }
             }
             // get the tagged function string outcome
-            let className = argResolved || strings[0];
+            var className = argResolved || strings[0];
             // check if we need to clean it or not from the optional structure `< class="..."`
-            className = className.match(/class="([^"]*)/)?.[1] || className;
+            className = ((_a = className.match(/class="([^"]*)/)) === null || _a === void 0 ? void 0 : _a[1]) || className;
             // add the custom classes from props
-            className += props?.className ? " " + props?.className : "";
-            return createElement(type, {
-                // ...props,
-                ...propsToForward,
+            className += (props === null || props === void 0 ? void 0 : props.className) ? " " + (props === null || props === void 0 ? void 0 : props.className) : "";
+            return createElement(type, __assign(__assign({}, propsToForward), { 
                 // only add ot props if it is not an empty string
-                className: className || undefined,
+                className: className || undefined, 
                 // add ref to props
-                ref,
-            });
+                ref: ref }));
         });
         // FIXME: not sure if this is needed
         // WrappedComponent.displayName = type.toString();