@koine/react 1.0.9 → 1.0.12

package/node/Sidebar/Sidebar.js

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

package/node/Sidebar/index.js

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

package/node/Spacing/Spacing.js

@@ -1,19 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spacing = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const utils_1 = require("@koine/utils");
-const spacing_1 = require("../styles/spacing");
-const Root = styled_components_1.default.div `
-  ${(p) => p.$top && spacing_1.spacingTop.call(p.theme, ...p.$top)}
-  ${(p) => p.$bottom && spacing_1.spacingBottom.call(p.theme, ...p.$bottom)}
-`;
-const extractDirectionArgs = (raw) => {
-    const [size, factor, property, devices] = raw.split(":");
-    const factorArg = (0, utils_1.isUndefined)(factor) ? undefined : parseFloat(factor);
-    const devicesArg = devices?.split(",");
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var utils_1 = require("@koine/utils");
+var spacing_1 = require("../styles/spacing");
+var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacing_1.spacingTop.call.apply(spacing_1.spacingTop, tslib_1.__spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacing_1.spacingBottom.call.apply(spacing_1.spacingBottom, tslib_1.__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 = (0, utils_1.isUndefined)(factor) ? undefined : parseFloat(factor);
+    var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
     return [size, factorArg, property, devicesArg];
 };
 /**
@@ -28,9 +25,10 @@ const extractDirectionArgs = (raw) => {
  * <Spacing top="sm:2:padding:tablet,desktop" />
  * ```
  */
-const Spacing = ({ top, bottom, vertical, ...props }) => {
-    let $top;
-    let $bottom;
+var Spacing = function (_a) {
+    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = tslib_1.__rest(_a, ["top", "bottom", "vertical"]);
+    var $top;
+    var $bottom;
     if (top) {
         $top = extractDirectionArgs(top);
     }
@@ -45,6 +43,7 @@ const Spacing = ({ top, bottom, vertical, ...props }) => {
         // eslint-disable-next-line react/jsx-no-useless-fragment
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
     }
-    return (0, jsx_runtime_1.jsx)(Root, { "$top": $top, "$bottom": $bottom, ...props });
+    return (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "$top": $top, "$bottom": $bottom }, props));
 };
 exports.Spacing = Spacing;
+var templateObject_1;

package/node/Spacing/index.js

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

package/node/Sticky/StickyCss.js

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

package/node/Sticky/index.js

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

package/node/Tabs/TabsMui.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Tab = exports.Panel = exports.Indicator = exports.List = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var TabsUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsUnstyled"));
+var TabsListUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsListUnstyled"));
+var TabUnstyled_1 = tslib_1.__importStar(require("@mui/base/TabUnstyled"));
+var TabPanelUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabPanelUnstyled"));
+var helpers_1 = require("../helpers");
+exports.Root = TabsUnstyled_1.default;
+exports.List = TabsListUnstyled_1.default;
+// export const Tab = TabUnstyled as unknown as Props["Tab"];
+exports.Indicator = "span";
+exports.Panel = TabPanelUnstyled_1.default;
+exports.Tab = (0, react_1.forwardRef)(function Tab(_a, ref) {
+    var children = _a.children, component = _a.component, componentsProps = _a.componentsProps, components = _a.components, Indicator = _a.Indicator, props = tslib_1.__rest(_a, ["children", "component", "componentsProps", "components", "Indicator"]);
+    var _b = (0, TabUnstyled_1.useTab)(tslib_1.__assign(tslib_1.__assign({}, props), { ref: ref })), active = _b.active, disabled = _b.disabled, selected = _b.selected;
+    var indicatorProps = { active: active, disabled: disabled, selected: selected };
+    return ((0, jsx_runtime_1.jsxs)(TabUnstyled_1.default /* ref={ref}  */, tslib_1.__assign({}, props, { children: [children, Indicator && (0, jsx_runtime_1.jsx)(Indicator, tslib_1.__assign({}, indicatorProps))] })));
+});
+/**
+ *
+ * Main differences from [Mui Tabs](https://mui.com/material-ui/react-dialog):
+ *
+ * @resources
+ * - [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tabpanel)
+ * - [WAI-ARIA example](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html)
+ * - [[Proposal] New tags tabsection, tablist, tab, tabpanel](https://github.com/whatwg/html/issues/1809)
+ * - [Native <tab> elements](https://github.com/w3c/html/issues/1704)
+ * - [Let's talk about Native HTML Tabs](https://daverupert.com/2021/10/native-html-tabs/)
+ *
+ * @similar
+ * - [Zertz/react-headless-tabs](https://github.com/Zertz/react-headless-tabs)
+ *
+ * FIXME: it actually works even without forwardRef, check if we do need it
+ */
+var TabsWithRef = (0, react_1.forwardRef)(function Tabs(_a, ref) {
+    var _Root = _a.Root, _List = _a.List, _Tab = _a.Tab, _Indicator = _a.Indicator, _Panel = _a.Panel, props = tslib_1.__rest(_a, ["Root", "List", "Tab", "Indicator", "Panel"]);
+    return (0, jsx_runtime_1.jsx)(exports.Root, tslib_1.__assign({}, props, { ref: ref }));
+});
+exports.KoineTabs = (0, helpers_1.extendComponent)(TabsWithRef, {
+    Root: exports.Root,
+    List: exports.List,
+    Tab: exports.Tab,
+    Indicator: exports.Indicator,
+    Panel: exports.Panel,
+});

package/node/Tabs/index.js

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

package/node/Tabs/sc/bare.js

@@ -0,0 +1,87 @@
+"use strict";
+// <reference types="@reach/utils/dist/declarations/src/polymorphic" />
+/**
+ * @file
+ *
+ * Here we manage only "vertical" oriented tabs for now
+ */
+// import styled from "styled-components";
+// import {
+//   Tabs as _Tabs,
+//   TabList as _TabList,
+//   Tab as _Tab,
+//   TabPanels as _TabPanels,
+//   TabPanel as _TabPanel,
+//   TabProps as _TabProps,
+//   TabsProps as _TabsProps,
+//   useTabsContext,
+// } from "@reach/tabs";
+// import { min } from "../../styles/media";
+// import { UnderlineSkewed } from "../../Animations/Underline";
+// import { btnStyleReset } from "../../Buttons/Button";
+// export const Tabs = styled(_Tabs)<TabsProps>`
+//   ${min.sm} {
+//     display: flex;
+//     ${(p) => p.$vertical && "flex-direction: column;"}
+//   }
+// `;
+// export type TabsProps = React.PropsWithChildren<_TabsProps> & {
+//   $vertical?: boolean;
+// };
+// export const TabList = styled(_TabList)`
+//   display: flex;
+//   flex-direction: column;
+//   ${min.sm} {
+//     border-right: 1px solid var(--grey800);
+//   }
+// `;
+// export const TabWrap = styled(_Tab)<TabProps & TabStyledProps>`
+//   ${btnStyleReset}
+//   position: relative;
+//   justify-content: flex-end;
+//   padding: 0.7em;
+//   margin-bottom: 1em;
+//   font-weight: bold;
+//   color: ${(p) => (p.$active ? "var(--accent200)" : "var(--grey300)")};
+//   ${min.sm} {
+//     padding-right: var(--gutter-half);
+//   }
+//   &:hover {
+//     color: ${(p) => (p.$active ? "var(--accent200)" : "var(--accent300)")};
+//   }
+// `;
+// export const TabText = styled.span<TabStyledProps>`
+//   position: relative;
+//   z-index: 1;
+// `;
+// export const TabUnderline = styled(UnderlineSkewed)<TabStyledProps>``;
+// export type TabStyledProps = {
+//   $active: boolean;
+//   $focused: boolean;
+// };
+// export type TabProps = _TabProps & {
+//   idx: number;
+// };
+// export const Tab = ({ children, ...props }: TabProps) => {
+//   const { selectedIndex, focusedIndex } = useTabsContext();
+//   const styledProps = {
+//     $active: props.idx === selectedIndex,
+//     $focused: props.idx === focusedIndex,
+//   };
+//   return (
+//     <TabWrap {...props} {...styledProps}>
+//       {styledProps.$active && (
+//         <TabUnderline {...styledProps} layoutId="Tab-underline" />
+//       )}
+//       <TabText {...styledProps}>{children}</TabText>
+//     </TabWrap>
+//   );
+// };
+// export const TabPanels = styled(_TabPanels)`
+//   flex: 1;
+// `;
+// export const TabPanel = styled(_TabPanel)`
+//   ${min.sm} {
+//     padding-left: var(--gutter-half);
+//   }
+// `;

package/node/Tabs/tw/bare.js

@@ -0,0 +1,20 @@
+"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");
+// import type { ComponentsProps } from "../TabsMui";
+var _ = tslib_1.__importStar(require("../TabsMui"));
+exports.Root = (0, helpers_1.classed)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["< class=\"tabs"], ["< class=\"tabs"])));
+exports.List = (0, helpers_1.classed)(_.List)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["< class=\"tabsList flex"], ["< class=\"tabsList flex"])));
+exports.Tab = (0, helpers_1.classed)(_.Tab)(templateObject_3 || (templateObject_3 = tslib_1.__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"])));
+exports.Indicator = (0, helpers_1.classed)(_.Indicator)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["< class=\"tabsIndicator"], ["< class=\"tabsIndicator"])));
+exports.Panel = (0, helpers_1.classed)(_.Panel)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+exports.KoineTabs = (0, helpers_1.extendComponent)(_.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/node/Tabs/tw/material.js

@@ -0,0 +1,21 @@
+"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" : "";
+});
+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/node/Tabs/useTabs.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabs = void 0;
+var react_1 = require("react");
+var utils_1 = require("@mui/utils");
+var useId_1 = require("../hooks/useId");
+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)({
+        controlled: valueProp,
+        default: defaultValue,
+        name: "Tabs",
+        state: "value",
+    }), value = _a[0], setValue = _a[1];
+    var idPrefix = (0, useId_1.useId)();
+    var onSelected = (0, react_1.useCallback)(function (e, newValue) {
+        setValue(newValue);
+        if (onChange) {
+            onChange(e, newValue);
+        }
+    }, [onChange, setValue]);
+    var getRootProps = function () {
+        return {};
+    };
+    var tabsContextValue = (0, react_1.useMemo)(function () {
+        return {
+            idPrefix: idPrefix,
+            value: value,
+            onSelected: onSelected,
+            orientation: orientation,
+            direction: direction,
+            selectionFollowsFocus: selectionFollowsFocus,
+        };
+    }, [
+        idPrefix,
+        value,
+        onSelected,
+        orientation,
+        direction,
+        selectionFollowsFocus,
+    ]);
+    return {
+        getRootProps: getRootProps,
+        tabsContextValue: tabsContextValue,
+    };
+};
+exports.useTabs = useTabs;
+exports.default = exports.useTabs;

package/node/Typography/CopyPasteVisible.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyPasteVisible = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.CopyPasteVisible = styled_components_1.default.span `
-  color: transparent;
-  opacity: 0;
-  font-size: 0;
-`;
+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/node/Typography/Native.js

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

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