@koine/react 1.0.4 → 1.0.9

package/Spacing/Spacing.d.ts

@@ -1,30 +1,30 @@
-/// <reference types="react" />
-import { SpacingSize, SpacingFactor, SpacingProperty, SpacingDirectionAxis, SpacingDevices } from "../styles/spacing";
-export declare type SpacingPropsStyled = {
-    $top?: SpacingFnArgs;
-    $bottom?: SpacingFnArgs;
-};
-declare type SpacingFnArgs = [
-    SpacingSize,
-    SpacingFactor,
-    SpacingProperty,
-    SpacingDevices[]
-];
-declare type SpacingSyntaxFactor = string;
-declare type SpacingSyntaxDevices = `${SpacingDevices}` | `${SpacingDevices},${SpacingDevices}` | `${SpacingDevices},${SpacingDevices},${SpacingDevices}`;
-declare type SpacingSyntax = `${SpacingSize}` | `${SpacingSize}:${SpacingSyntaxFactor}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}:${SpacingSyntaxDevices}`;
-export declare type SpacingProps = React.ComponentPropsWithoutRef<"div"> & Partial<Record<SpacingDirectionAxis, SpacingSyntax>>;
-/**
- * Usage:
- *
- * ```jsx
- * <Spacing top="sm" />
- * <Spacing top="sm:1.5" />
- * <Spacing top="sm:1.5" bottom="lg" />
- * <Spacing vertical="sm:1.5:margin:mobile" />
- * <Spacing top="sm:1.5:padding:mobile" />
- * <Spacing top="sm:2:padding:tablet,desktop" />
- * ```
- */
-export declare const Spacing: React.FC<SpacingProps>;
-export {};
+/// <reference types="react" />
+import { SpacingSize, SpacingFactor, SpacingProperty, SpacingDirectionAxis, SpacingDevices } from "../styles/spacing";
+export declare type SpacingPropsStyled = {
+    $top?: SpacingFnArgs;
+    $bottom?: SpacingFnArgs;
+};
+declare type SpacingFnArgs = [
+    SpacingSize,
+    SpacingFactor,
+    SpacingProperty,
+    SpacingDevices[]
+];
+declare type SpacingSyntaxFactor = string;
+declare type SpacingSyntaxDevices = `${SpacingDevices}` | `${SpacingDevices},${SpacingDevices}` | `${SpacingDevices},${SpacingDevices},${SpacingDevices}`;
+declare type SpacingSyntax = `${SpacingSize}` | `${SpacingSize}:${SpacingSyntaxFactor}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}:${SpacingSyntaxDevices}`;
+export declare type SpacingProps = React.ComponentPropsWithoutRef<"div"> & Partial<Record<SpacingDirectionAxis, SpacingSyntax>>;
+/**
+ * Usage:
+ *
+ * ```jsx
+ * <Spacing top="sm" />
+ * <Spacing top="sm:1.5" />
+ * <Spacing top="sm:1.5" bottom="lg" />
+ * <Spacing vertical="sm:1.5:margin:mobile" />
+ * <Spacing top="sm:1.5:padding:mobile" />
+ * <Spacing top="sm:2:padding:tablet,desktop" />
+ * ```
+ */
+export declare const Spacing: ({ top, bottom, vertical, ...props }: SpacingProps) => JSX.Element;
+export {};

package/Spacing/Spacing.js

@@ -0,0 +1,45 @@
+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(",");
+    return [size, factorArg, property, devicesArg];
+};
+/**
+ * Usage:
+ *
+ * ```jsx
+ * <Spacing top="sm" />
+ * <Spacing top="sm:1.5" />
+ * <Spacing top="sm:1.5" bottom="lg" />
+ * <Spacing vertical="sm:1.5:margin:mobile" />
+ * <Spacing top="sm:1.5:padding:mobile" />
+ * <Spacing top="sm:2:padding:tablet,desktop" />
+ * ```
+ */
+export const Spacing = ({ top, bottom, vertical, ...props }) => {
+    let $top;
+    let $bottom;
+    if (top) {
+        $top = extractDirectionArgs(top);
+    }
+    if (bottom) {
+        $bottom = extractDirectionArgs(bottom);
+    }
+    if (vertical) {
+        $top = extractDirectionArgs(vertical);
+        $bottom = $top;
+    }
+    if (!$top && !$bottom && !vertical) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return _jsx(_Fragment, { children: props.children });
+    }
+    return _jsx(Root, { "$top": $top, "$bottom": $bottom, ...props });
+};

package/Spacing/index.d.ts

@@ -1 +1 @@
-export * from "./Spacing";
+export * from "./Spacing";

package/Spacing/index.js

@@ -0,0 +1 @@
+export * from "./Spacing";

package/Spacing/package.json

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

package/Sticky/Sticky.d.ts

@@ -1,2 +1,2 @@
-export declare type StickyProps = {};
-export declare const Sticky: null;
+export declare type StickyProps = {};
+export declare const Sticky: null;

package/Sticky/Sticky.js

@@ -0,0 +1,219 @@
+export const Sticky = null;
+// import {
+//   Ref,
+//   CSSProperties,
+//   useState,
+//   useCallback,
+//   useEffect,
+//   useRef,
+// } from "react";
+// /**
+//  * Get current coordinates `left` and `top` of specific element.
+//  */
+// const offsetRelative = (element: HTMLElement) => {
+//   var result = { l: 0, t: 0 };
+//   do {
+//     let offsetTop = element.offsetTop;
+//     let offsetLeft = element.offsetLeft;
+//     if (!isNaN(offsetTop)) result.t += offsetTop;
+//     if (!isNaN(offsetLeft)) result.l += offsetLeft;
+//     // @ts-expect-error just rething everyhting in this file
+//     element =
+//       "BODY" === element.tagName ? element.parentElement : element.offsetParent;
+//   } while (element);
+//   return result;
+// };
+// export type StickyElementProps = {
+//   ref: Ref<HTMLDivElement>;
+//   sticky?: boolean;
+//   style: CSSProperties;
+// };
+// /**
+//  * - `0`: "STATIC": Static position as nothing happened
+//  * - `1`: "VIEWPORT-TOP": Sticked to the top screen edge
+//  * - `2`: "VIEWPORT-BOTTOM": Sticked to the bottom screen edge
+//  * - `4`: "VIEWPORT-UNBOTTOM": ? Scrolling in the middle of the element, neither sticked nor static
+//  * - `3`: "CONTAINER-BOTTOM": ?
+//  */
+// export type StickyStatus = 0 | 1 | 2 | 3;
+// type DimensionsBasic = [
+//   /** containerTop */
+//   number,
+//   /** containerHeight */
+//   number,
+//   /** containerBottom */
+//   number,
+//   /** elementHeight */
+//   number,
+//   /** elementWidth */
+//   number,
+//   /** viewportHeight */
+//   number,
+//   /** maxTranslateY */
+//   number
+// ];
+// type DimensionsOnScroll = [
+//   /** elementLeft */
+//   number,
+//   /** viewportTop */
+//   number,
+//   /** viewportBottom */
+//   number,
+//   /** viewportLeft */
+//   number,
+//   /** topSpacing */
+//   number,
+//   /** bottomSpacing */
+//   number
+//   /** translateY */
+//   // number,
+//   /** lastTopSpacing */
+//   // number,
+//   /** lastBottomSpacing */
+//   // number,
+//   /** lastViewportTop */
+//   // number,
+// ];
+// type Dimensions = DimensionsBasic & DimensionsOnScroll;
+// const getDimensionsBasic = (container: HTMLElement, inner: HTMLElement) => {
+//   const containerTop = offsetRelative(container).t;
+//   const containerHeight = container.clientHeight;
+//   const containerBottom = containerTop + containerHeight;
+//   const elementHeight = inner.offsetHeight;
+//   const elementWidth = inner.offsetWidth;
+//   const viewportHeight = window.innerHeight;
+//   const maxTranslateY = containerHeight - elementHeight;
+//   return [
+//     containerTop,
+//     containerHeight,
+//     containerBottom,
+//     elementHeight,
+//     elementWidth,
+//     viewportHeight,
+//     maxTranslateY,
+//   ] as DimensionsBasic;
+// };
+// const getDimensionsOnScroll = (
+//   wrapper: HTMLElement,
+//   container: HTMLElement,
+//   inner: HTMLElement
+// ) => {
+//   const elementLeft = offsetRelative(wrapper).l;
+//   const viewportTop =
+//     document.documentElement.scrollTop || document.body.scrollTop;
+//   const viewportBottom = viewportTop + window.innerHeight;
+//   const viewportLeft =
+//     document.documentElement.scrollLeft || document.body.scrollLeft;
+//   const topSpacing = 0; // TODO: make it a prop?
+//   const bottomSpacing = 0; // TODO: make it a prop?
+//   // const lastTopSpacing = topSpacing;
+//   // const lastBottomSpacing = bottomSpacing;
+//   return [
+//     elementLeft,
+//     viewportTop,
+//     viewportBottom,
+//     viewportLeft,
+//     topSpacing,
+//     bottomSpacing,
+//   ] as DimensionsOnScroll;
+// };
+// // const getTranslateYonScroll = (dimensions: DimensionsOnScroll, status: StickyStatus) => {
+// //   if (status === 1) {
+// //     // Adjust translate Y in the case decrease top spacing value.
+// //     if (dimensions[5] < dims.lastTopSpacing) {
+// //       dims.translateY += dims.lastTopSpacing - dims.topSpacing;
+// //       this._reStyle = true;
+// //     }
+// //   } else if (status === 2) {
+// //     // Adjust translate Y in the case decrease bottom spacing value.
+// //     if (dims.bottomSpacing < dims.lastBottomSpacing) {
+// //       dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
+// //       this._reStyle = true;
+// //     }
+// //   }
+// // }
+// export type StickyProps = {
+//   /** @default "div" */
+//   Wrapper?: FC<StickyElementProps>;
+//   /** @default "div" */
+//   Inner?: FC<StickyElementProps>;
+//   top: number;
+// };
+// export const Sticky: FC<StickyProps> = ({
+//   Wrapper = "div",
+//   Inner = "div",
+//   children,
+//   top,
+//   ...props
+// }) => {
+//   const [sticky, setSticky] = useState(false);
+//   const [shouldRestyle, setShouldRestyle] = useState<boolean>();
+//   const stickyStatus = useRef<StickyStatus>(0);
+//   const [dimensionsBasic, setDimensionsBasic] = useState<DimensionsBasic>();
+//   const [dimensionsOnScroll, setDimensionsOnScroll] =
+//     useState<DimensionsOnScroll>();
+//   const [translateY, setTranslateY] = useState<number>(0);
+//   const [styleWrapper, setStyleWrapper] = useState({});
+//   const [styleInner, setStyleInner] = useState({});
+//   const [innerWidth, setInnerWidth] = useState<string>();
+//   const wrapperRef = useRef<HTMLDivElement>(null);
+//   const innerRef = useRef<HTMLDivElement>(null);
+//   const handleScroll = useCallback(() => {
+//     const wrapper = wrapperRef?.current;
+//     const container = wrapper?.parentElement || null;
+//     const inner = innerRef?.current;
+//     if (wrapper && inner && container) {
+//       const dimensions = getDimensionsOnScroll(wrapper, container, inner);
+//       setDimensionsOnScroll(dimensions);
+//     }
+//   }, []);
+//   const handleResize = useCallback(() => {
+//     const container = wrapperRef?.current?.parentElement || null;
+//     const inner = innerRef?.current;
+//     if (inner && container) {
+//       setDimensionsBasic(getDimensionsBasic(container, inner));
+//       // if (innerRef?.current) {
+//       //   setInnerWidth(window.getComputedStyle(innerRef.current).width);
+//       // }
+//       // setSticky(wrapperRef.current.getBoundingClientRect().top <= top);
+//     }
+//   }, []);
+//   useEffect(() => {
+//     const container = wrapperRef?.current?.parentElement || null;
+//     const inner = innerRef?.current;
+//     if (inner && container) {
+//       setDimensionsBasic(getDimensionsBasic(container, inner));
+//     }
+//     window.addEventListener("scroll", handleScroll, { passive: true });
+//     window.addEventListener("resize", handleResize, { passive: true });
+//     return () => {
+//       window.removeEventListener("scroll", () => handleScroll);
+//       window.removeEventListener("resize", () => handleResize);
+//     };
+//   }, [wrapperRef, innerRef, handleScroll, handleResize]);
+//   // useEffect(() => {
+//   //   if (sticky) {
+//   //     setStyleInner({
+//   //       position: "fixed",
+//   //       zIndex: 1,
+//   //       top,
+//   //       width: innerWidth,
+//   //     });
+//   //   } else {
+//   //     setStyleInner({});
+//   //   }
+//   // }, [sticky, top, innerWidth]);
+//   return (
+//     <Wrapper
+//       ref={wrapperRef}
+//       sticky={Wrapper === "div" ? undefined : sticky}
+//       style={{
+//         position: "relative",
+//       }}
+//     >
+//       <Inner ref={innerRef} style={styleInner}>
+//         {children}
+//       </Inner>
+//     </Wrapper>
+//   );
+// };

package/Sticky/StickyCss.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare type StickyCssProps = {
-    top: number;
-};
-export declare const StickyCss: React.FC<StickyCssProps>;
+/// <reference types="react" />
+export declare type StickyCssProps = React.ComponentProps<"div"> & {
+    top: number;
+};
+export declare const StickyCss: ({ top, ...props }: StickyCssProps) => JSX.Element;

package/Sticky/StickyCss.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const StickyCss = ({ top, ...props }) => {
+    return _jsx("div", { style: { position: "sticky", top: 100 }, ...props });
+};

package/Sticky/index.d.ts

@@ -1 +1 @@
-export * from "./StickyCss";
+export * from "./StickyCss";

package/Sticky/index.js

@@ -0,0 +1 @@
+export * from "./StickyCss";

package/Sticky/package.json

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

package/Tabs/Tabs.d.ts

@@ -1,25 +1,27 @@
-/// <reference types="react" />
-import { TabProps as _TabProps, TabsProps as _TabsProps } from "@reach/tabs";
-export declare const TabsStyled: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", _TabsProps>, import("styled-components").DefaultTheme, _TabsProps & {
-    $vertical?: boolean | undefined;
-}, never>;
-export declare type TabsProps = _TabsProps & {
-    $vertical?: boolean;
-};
-export declare const Tabs: (props: TabsProps) => JSX.Element;
-export declare const TabList: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").MemoComponent<"div", import("@reach/tabs/dist/declarations/src").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const TabWrap: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"button", _TabProps>, import("styled-components").DefaultTheme, _TabProps & {
-    idx: number;
-} & TabStyledProps, never>;
-export declare const TabText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TabStyledProps, never>;
-export declare const TabUnderline: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"i">>, import("styled-components").DefaultTheme, TabStyledProps, never>;
-export declare type TabStyledProps = {
-    $active: boolean;
-    $focused: boolean;
-};
-export declare type TabProps = _TabProps & {
-    idx: number;
-};
-export declare const Tab: ({ children, ...props }: TabProps) => JSX.Element;
-export declare const TabPanels: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").MemoComponent<"div", import("@reach/tabs/dist/declarations/src").TabPanelsProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const TabPanel: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/tabs/dist/declarations/src").TabPanelProps>, import("styled-components").DefaultTheme, {}, never>;
+/// <reference types="@reach/utils/dist/declarations/src/polymorphic" />
+/// <reference types="react" />
+import { TabProps as _TabProps, TabsProps as _TabsProps } from "@reach/tabs";
+export declare const Tabs: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", _TabsProps>, import("styled-components").DefaultTheme, _TabsProps & {
+    children?: import("react").ReactNode;
+} & {
+    $vertical?: boolean | undefined;
+}, never>;
+export declare type TabsProps = React.PropsWithChildren<_TabsProps> & {
+    $vertical?: boolean;
+};
+export declare const TabList: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").MemoComponent<"div", import("@reach/tabs/dist/declarations/src").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const TabWrap: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"button", _TabProps>, import("styled-components").DefaultTheme, _TabProps & {
+    idx: number;
+} & TabStyledProps, never>;
+export declare const TabText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TabStyledProps, never>;
+export declare const TabUnderline: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"i">>, import("styled-components").DefaultTheme, TabStyledProps, never>;
+export declare type TabStyledProps = {
+    $active: boolean;
+    $focused: boolean;
+};
+export declare type TabProps = _TabProps & {
+    idx: number;
+};
+export declare const Tab: ({ children, ...props }: TabProps) => JSX.Element;
+export declare const TabPanels: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").MemoComponent<"div", import("@reach/tabs/dist/declarations/src").TabPanelsProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const TabPanel: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/tabs/dist/declarations/src").TabPanelProps>, import("styled-components").DefaultTheme, {}, never>;

package/Tabs/Tabs.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <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, useTabsContext, } from "@reach/tabs";
+import { min } from "../styles/media";
+import { UnderlineSkewed } from "../Animations/Underline";
+import { btnStyleReset } from "../Buttons";
+export const Tabs = styled(_Tabs) `
+  ${min.sm} {
+    display: flex;
+    ${(p) => p.$vertical && "flex-direction: column;"}
+  }
+`;
+export const TabList = styled(_TabList) `
+  display: flex;
+  flex-direction: column;
+  ${min.sm} {
+    border-right: 1px solid var(--grey800);
+  }
+`;
+export const TabWrap = styled(_Tab) `
+  ${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 `
+  position: relative;
+  z-index: 1;
+`;
+export const TabUnderline = styled(UnderlineSkewed) ``;
+export const Tab = ({ children, ...props }) => {
+    const { selectedIndex, focusedIndex } = useTabsContext();
+    const styledProps = {
+        $active: props.idx === selectedIndex,
+        $focused: props.idx === focusedIndex,
+    };
+    return (_jsxs(TabWrap, { ...props, ...styledProps, children: [styledProps.$active && (_jsx(TabUnderline, { ...styledProps, layoutId: "Tab-underline" })), _jsx(TabText, { ...styledProps, children: children })] }));
+};
+export const TabPanels = styled(_TabPanels) `
+  flex: 1;
+`;
+export const TabPanel = styled(_TabPanel) `
+  ${min.sm} {
+    padding-left: var(--gutter-half);
+  }
+`;

package/Tabs/index.d.ts

@@ -1 +1 @@
-export * from "./Tabs";
+export * from "./Tabs";

package/Tabs/index.js

@@ -0,0 +1 @@
+export * from "./Tabs";

package/Tabs/package.json

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

package/Typography/CopyPasteVisible.d.ts

@@ -1 +1 @@
-export declare const CopyPasteVisible: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const CopyPasteVisible: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/Typography/CopyPasteVisible.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+export const CopyPasteVisible = styled.span `
+  color: transparent;
+  opacity: 0;
+  font-size: 0;
+`;

package/Typography/Native.d.ts

@@ -1,10 +1,10 @@
-export declare const p = "\n  margin: 0 0 1em 0;\n";
-export declare const h1: string;
-export declare const h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
-export declare const h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-export declare const h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-export declare const P: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const H1: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const H2: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const H3: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const H4: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const p = "\n  margin: 0 0 1em 0;\n";
+export declare const h1: string;
+export declare const h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
+export declare const h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+export declare const h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+export declare const P: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H1: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H2: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H3: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H4: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/Typography/Native.js

@@ -0,0 +1,47 @@
+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}
+`;

package/Typography/ReadMore.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-export declare type ReadMoreProps = {
-    lines?: number;
-    lineHeight?: number;
-    fontSize?: number;
-    bg?: React.CSSProperties["background"];
-    /** @default "Expand" */
-    expand?: string;
-    /** @default "Collapse" */
-    collapse?: string;
-};
-export declare const ReadMore: React.FC<ReadMoreProps>;
+import React from "react";
+export declare type ReadMoreProps = React.ComponentPropsWithoutRef<"div"> & {
+    lines?: number;
+    lineHeight?: number;
+    fontSize?: number;
+    bg?: React.CSSProperties["background"];
+    /** @default "Expand" */
+    expand?: string;
+    /** @default "Collapse" */
+    collapse?: string;
+};
+export declare const ReadMore: ({ lines, lineHeight, fontSize, bg, expand, collapse, ...props }: ReadMoreProps) => JSX.Element;