@koine/react 1.0.8 → 1.0.9

package/Rating/Rating.js

@@ -1,17 +1,14 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useId, useState } from "react";
 import styled from "styled-components";
-import { uid } from "@koine/utils";
 export const RatingStarRoot = styled.svg `
   display: inline-block;
   vertical-align: middle;
   margin-right: 1px;
 `;
-export const RatingStar = (_a) => {
-    var { value, colorBg = "#FFD84C", colorStroke = "#947813", size } = _a, props = __rest(_a, ["value", "colorBg", "colorStroke", "size"]);
-    const id = uid("Star");
-    return (_jsxs(RatingStarRoot, Object.assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [_jsx("defs", { children: _jsxs("linearGradient", Object.assign({ id: id, x1: "0", y1: "0", x2: "1", y2: "0" }, { children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] })) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: `url(#${id})`, d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
+export const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props }) => {
+    const id = useId();
+    return (_jsxs(RatingStarRoot, { viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px", ...props, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: `url(#${id})`, d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] }));
 };
 export const RatingDetails = styled.span `
   padding-left: 0.5em;
@@ -38,7 +35,7 @@ export const RatingRoot = styled.div `
   }
 `;
 export const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16, }) => {
-    const id = uid("Rating");
+    const id = useId();
     const [currentValue /* , _setCurrentValue */] = useState(value);
     const [stars, setStars] = useState([]);
     const getStars = useCallback((activeCount) => {

package/Rating/index.d.ts

@@ -1,11 +1,11 @@
-export * from "./Rating";
-export declare const getRatingWord: (value: number, precision?: number) => any;
-export declare const getRatingValue: (value: number) => string | number;
-/**
- * @see https://stackoverflow.com/a/14224813
- */
-export declare function convertRange(value: number, r1: number[], r2: number[]): number;
-export declare const deriveRating: (title: string, date: Date, minValue?: number, maxValue?: number, minQuantity?: number) => {
-    value: number;
-    count: number;
-};
+export * from "./Rating";
+export declare const getRatingWord: (value: number, precision?: number) => any;
+export declare const getRatingValue: (value: number) => string | number;
+/**
+ * @see https://stackoverflow.com/a/14224813
+ */
+export declare function convertRange(value: number, r1: number[], r2: number[]): number;
+export declare const deriveRating: (title: string, date: Date, minValue?: number, maxValue?: number, minQuantity?: number) => {
+    value: number;
+    count: number;
+};

package/Rating/package.json

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

package/Select/SelectDownshift.d.ts

@@ -1,5 +1,5 @@
-import type { Option } from "../types";
-export declare type SelectProps = {
-    options?: Option[];
-};
-export declare const Select: null;
+import type { Option } from "../types";
+export declare type SelectProps = {
+    options?: Option[];
+};
+export declare const Select: null;

package/Select/components.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-export declare const SelectArrowStyled: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLSpanElement, import("framer-motion").HTMLMotionProps<"span">>, import("styled-components").DefaultTheme, {}, never>;
-export declare type SelectArrowProps = {
-    isOpen?: boolean;
-};
-export declare const SelectArrow: import("react").ForwardRefExoticComponent<SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>;
+/// <reference types="react" />
+export declare const SelectArrowStyled: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLSpanElement, import("framer-motion").HTMLMotionProps<"span">>, import("styled-components").DefaultTheme, {}, never>;
+export declare type SelectArrowProps = {
+    isOpen?: boolean;
+};
+export declare const SelectArrow: import("react").ForwardRefExoticComponent<SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>;

package/Select/components.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
@@ -14,7 +13,6 @@ export const SelectArrowStyled = styled(m.span) `
     cursor: pointer;
   }
 `;
-export const SelectArrow = forwardRef(function SelectArrow(_a, ref) {
-    var { isOpen } = _a, props = __rest(_a, ["isOpen"]);
-    return (_jsx(SelectArrowStyled, Object.assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: _jsx(IconCollapse, {}) })));
+export const SelectArrow = forwardRef(function SelectArrow({ isOpen, ...props }, ref) {
+    return (_jsx(SelectArrowStyled, { animate: { rotate: isOpen ? 180 : 0 }, ref: ref, ...props, children: _jsx(IconCollapse, {}) }));
 });

package/Select/index.d.ts

@@ -1,2 +1,2 @@
-export type { SelectProps } from "./SelectDownshift";
-export { Select } from "./SelectDownshift";
+export type { SelectProps } from "./SelectDownshift";
+export { Select } from "./SelectDownshift";

package/Select/package.json

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

package/Sidebar/Sidebar.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare type SidebarProps = unknown;
-export declare const Sidebar: React.FC<SidebarProps>;
+/// <reference types="react" />
+export declare type SidebarProps = React.PropsWithChildren<unknown>;
+export declare const Sidebar: ({ children }: SidebarProps) => JSX.Element;

package/Sidebar/Sidebar.js

@@ -44,5 +44,5 @@ export const Sidebar = ({ children }) => {
     const handleClickToggle = useCallback(() => {
         setOpen((prevOpen) => !prevOpen);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, Object.assign({ onClick: handleClickToggle }, { children: _jsx(IconButtonFab, Object.assign({ "$variant": "contained" }, { children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) })) })), _jsx(SidebarWrapper, Object.assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, { onClick: handleClickToggle, children: _jsx(IconButtonFab, { "$variant": "contained", children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) }) }), _jsx(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
 };

package/Sidebar/index.d.ts

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

package/Sidebar/package.json

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

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

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { isUndefined } from "@koine/utils";
@@ -10,7 +9,7 @@ const Root = styled.div `
 const extractDirectionArgs = (raw) => {
     const [size, factor, property, devices] = raw.split(":");
     const factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
-    const devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
+    const devicesArg = devices?.split(",");
     return [size, factorArg, property, devicesArg];
 };
 /**
@@ -25,8 +24,7 @@ const extractDirectionArgs = (raw) => {
  * <Spacing top="sm:2:padding:tablet,desktop" />
  * ```
  */
-export const Spacing = (_a) => {
-    var { top, bottom, vertical } = _a, props = __rest(_a, ["top", "bottom", "vertical"]);
+export const Spacing = ({ top, bottom, vertical, ...props }) => {
     let $top;
     let $bottom;
     if (top) {
@@ -43,5 +41,5 @@ export const Spacing = (_a) => {
         // eslint-disable-next-line react/jsx-no-useless-fragment
         return _jsx(_Fragment, { children: props.children });
     }
-    return _jsx(Root, Object.assign({ "$top": $top, "$bottom": $bottom }, props));
+    return _jsx(Root, { "$top": $top, "$bottom": $bottom, ...props });
 };

package/Spacing/index.d.ts

@@ -1 +1 @@
-export * from "./Spacing";
+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

@@ -1,6 +1,5 @@
 export const Sticky = null;
 // import {
-//   FC,
 //   Ref,
 //   CSSProperties,
 //   useState,

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

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

@@ -1,25 +1,21 @@
-import { __rest } from "tslib";
 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 { AnimateSharedLayout } from "framer-motion";
 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 TabsStyled = styled(_Tabs) `
+export const Tabs = styled(_Tabs) `
   ${min.sm} {
     display: flex;
     ${(p) => p.$vertical && "flex-direction: column;"}
   }
 `;
-export const Tabs = (props) => {
-    return (_jsx(AnimateSharedLayout, { children: _jsx(TabsStyled, Object.assign({}, props)) }));
-};
 export const TabList = styled(_TabList) `
   display: flex;
   flex-direction: column;
@@ -48,14 +44,13 @@ export const TabText = styled.span `
   z-index: 1;
 `;
 export const TabUnderline = styled(UnderlineSkewed) ``;
-export const Tab = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+export const Tab = ({ children, ...props }) => {
     const { selectedIndex, focusedIndex } = useTabsContext();
     const styledProps = {
         $active: props.idx === selectedIndex,
         $focused: props.idx === focusedIndex,
     };
-    return (_jsxs(TabWrap, Object.assign({}, props, styledProps, { children: [styledProps.$active && (_jsx(TabUnderline, Object.assign({}, styledProps, { layoutId: "Tab-underline" }))), _jsx(TabText, Object.assign({}, styledProps, { children: children }))] })));
+    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;

package/Tabs/index.d.ts

@@ -1 +1 @@
-export * from "./Tabs";
+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/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/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;

package/Typography/ReadMore.js

@@ -1,4 +1,3 @@
-import { __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";
@@ -40,8 +39,7 @@ const BtnIcon = styled.span `
   ${(p) => (p.$expanded ? "transform: rotate(180deg);" : "")};
   font-size: ${(p) => p.$fontSize}px;
 `;
-export const ReadMore = (_a) => {
-    var { lines = 3, lineHeight = 1.6, fontSize = 14, bg = "var(--bodyBg)", expand = "Expand", collapse = "Collapse" } = _a, props = __rest(_a, ["lines", "lineHeight", "fontSize", "bg", "expand", "collapse"]);
+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);
@@ -67,5 +65,5 @@ export const ReadMore = (_a) => {
     useIsomorphicLayoutEffect(() => {
         height.set(expanded ? fullHeight : maxHeight);
     }, [expanded, height, fullHeight, maxHeight]);
-    return (_jsxs(Root, { children: [_jsx(m.div, Object.assign({ style: styles }, { children: _jsx(Content, Object.assign({ ref: content }, props)) })), exceeds && (_jsxs(BtnWrap, Object.assign({ "$expanded": expanded }, { children: [_jsx(BtnFader, { "$bg": bg }), _jsxs(Btn, Object.assign({ "$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, { 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 })] })] }))] }));
 };

package/Typography/TextLoop.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-export declare type TextLoopPieceProps = {
-    text: string | number;
-    direction?: "up" | "down";
-    inline?: boolean;
-    noOverflow?: boolean;
-    delay?: number;
-    className?: string;
-    style?: React.CSSProperties;
-};
-export declare const TextLoopPiece: React.FC<TextLoopPieceProps>;
-export declare type TextLoopPrpps = Omit<TextLoopPieceProps, "text"> & {
-    texts: string[];
-    interval?: number;
-};
-export declare const TextLoop: ({ texts, interval, ...props }: TextLoopPrpps) => JSX.Element;
+/// <reference types="react" />
+export declare type TextLoopPieceProps = React.PropsWithChildren<{
+    text: string | number;
+    direction?: "up" | "down";
+    inline?: boolean;
+    noOverflow?: boolean;
+    delay?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+export declare const TextLoopPiece: ({ text, style, className, direction, inline, noOverflow, delay, }: TextLoopPieceProps) => JSX.Element;
+export declare type TextLoopPrpps = Omit<TextLoopPieceProps, "text"> & {
+    texts: string[];
+    interval?: number;
+};
+export declare const TextLoop: ({ texts, interval, ...props }: TextLoopPrpps) => JSX.Element;

package/Typography/TextLoop.js

@@ -1,4 +1,3 @@
-import { __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";
@@ -17,7 +16,13 @@ export const TextLoopPiece = ({ text = "", style = {}, className = "", direction
         }, delay);
         return () => clearTimeout(timeoutId);
     }, [text, delay, inline]);
-    return (_jsxs("div", Object.assign({ className: className, style: Object.assign(Object.assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width, whiteSpace: inline ? "nowrap" : "normal" }) }, { children: [_jsx("span", { ref: placeholderRef, style: { visibility: "hidden" } }), _jsx("div", Object.assign({ style: {
+    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: {
                     overflow: noOverflow ? "hidden" : "visible",
                     display: "block",
                     position: "absolute",
@@ -25,21 +30,20 @@ export const TextLoopPiece = ({ text = "", style = {}, className = "", direction
                     left: 0,
                     height: "100%",
                     width: "100%",
-                } }, { children: _jsx(AnimatePresence, { children: _jsx(m.div, Object.assign({ style: { position: "absolute" }, initial: {
+                }, children: _jsx(AnimatePresence, { children: _jsx(m.div, { 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 = (_a) => {
-    var { texts, interval = 3000 } = _a, props = __rest(_a, ["texts", "interval"]);
+export const TextLoop = ({ texts, interval = 3000, ...props }) => {
     const [index, setIndex] = useState(0);
     useEffect(() => {
         const intervalId = setInterval(() => setIndex((index) => index + 1), interval // every 3 seconds
         );
         return () => clearTimeout(intervalId);
     }, [interval]);
-    return _jsx(TextLoopPiece, Object.assign({}, props, { text: texts[index % texts.length] }));
+    return _jsx(TextLoopPiece, { ...props, text: texts[index % texts.length] });
 };