@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

package/Sticky/Sticky.js

@@ -1,222 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sticky = void 0;
-exports.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.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StickyCss = void 0;
-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/Sticky/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StickyCss = void 0;
-var StickyCss_1 = require("./StickyCss");
-Object.defineProperty(exports, "StickyCss", { enumerable: true, get: function () { return StickyCss_1.StickyCss; } });

package/Sticky/package.json

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

package/Tabs/TabsMui.js

@@ -1,52 +0,0 @@
-"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 Tabs_1 = tslib_1.__importDefault(require("@mui/base/Tabs"));
-var TabsList_1 = tslib_1.__importDefault(require("@mui/base/TabsList"));
-var Tab_1 = tslib_1.__importDefault(require("@mui/base/Tab"));
-var useTab_1 = tslib_1.__importDefault(require("@mui/base/useTab"));
-var TabPanel_1 = tslib_1.__importDefault(require("@mui/base/TabPanel"));
-var helpers_1 = require("../helpers");
-exports.Root = Tabs_1.default;
-exports.List = TabsList_1.default;
-// export const Tab = TabUnstyled as unknown as Props["Tab"];
-exports.Indicator = "span";
-exports.Panel = TabPanel_1.default;
-exports.Tab = (0, react_1.forwardRef)(function Tab(_a, ref) {
-    var children = _a.children, 
-    // component,
-    slot = _a.slot, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = tslib_1.__rest(_a, ["children", "slot", "slotProps", "slots", "Indicator"]);
-    var _b = (0, useTab_1.default)(tslib_1.__assign(tslib_1.__assign({}, props), { rootRef: ref })), active = _b.active, /* disabled, */ selected = _b.selected;
-    var indicatorProps = { active: active, /* disabled, */ selected: selected };
-    return ((0, jsx_runtime_1.jsxs)(Tab_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/Tabs/index.js

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

package/Tabs/package.json

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

package/Tabs/sc/bare.js

@@ -1,87 +0,0 @@
-"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/Tabs/tw/bare.js

@@ -1,20 +0,0 @@
-"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/Tabs/tw/material.js

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

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

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CopyPasteVisible = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.CopyPasteVisible = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"], ["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"])));
-var templateObject_1;

package/Typography/Native.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.P = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.p = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var media_1 = require("../styles/media");
-exports.p = "\n  margin: 0 0 1em 0;\n";
-exports.h1 = "\n  margin: 0 0 10px 0;\n  font-size: 30px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n  ".concat(media_1.min.md, " {\n    font-size: 50px;\n  }\n");
-exports.h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
-exports.h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-exports.h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-exports.P = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.p);
-exports.H1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h1);
-exports.H2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h2);
-exports.H3 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h3);
-exports.H4 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.h4);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Typography/ReadMore.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReadMore = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var framer_motion_1 = require("framer-motion");
-// import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
-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, hooks_1.useIsomorphicLayoutEffect)(function () {
-        if (content.current) {
-            var elementHeight = content.current.offsetHeight;
-            var newExceeds = elementHeight > maxHeight;
-            if (!newExceeds) {
-                setMaxHeight(elementHeight);
-            }
-            setExceeds(newExceeds);
-            setFullHeight(elementHeight);
-        }
-    }, [content, maxHeight]);
-    (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, tslib_1.__assign({ 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 })] })] }))] }));
-};
-exports.ReadMore = ReadMore;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Typography/TextLoop.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLoop = exports.TextLoopPiece = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var framer_motion_1 = require("framer-motion");
-var TextLoopPiece = function (_a) {
-    var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.direction, direction = _e === void 0 ? "up" : _e, _f = _a.inline, inline = _f === void 0 ? true : _f, _g = _a.noOverflow, noOverflow = _g === void 0 ? true : _g, _h = _a.delay, delay = _h === void 0 ? 400 : _h;
-    var placeholderRef = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)({ data: "", key: "" }), content = _j[0], setContent = _j[1];
-    var _k = (0, react_1.useState)(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
-    (0, react_1.useEffect)(function () {
-        var timeoutId = setTimeout(function () {
-            if (!placeholderRef.current)
-                return;
-            placeholderRef.current.innerHTML = text + "";
-            if (inline)
-                setWidth(placeholderRef.current.offsetWidth);
-            setContent({ data: text + "", key: new Date() + "" });
-        }, delay);
-        return function () { return clearTimeout(timeoutId); };
-    }, [text, delay, inline]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: tslib_1.__assign(tslib_1.__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }), children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    overflow: noOverflow ? "hidden" : "visible",
-                    display: "block",
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    height: "100%",
-                    width: "100%",
-                }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { 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) }) })] }));
-};
-exports.TextLoopPiece = TextLoopPiece;
-var TextLoop = function (_a) {
-    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = tslib_1.__rest(_a, ["texts", "interval"]);
-    var _c = (0, react_1.useState)(0), index = _c[0], setIndex = _c[1];
-    (0, react_1.useEffect)(function () {
-        var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval // every 3 seconds
-        );
-        return function () { return clearTimeout(intervalId); };
-    }, [interval]);
-    return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, tslib_1.__assign({}, props, { text: texts[index % texts.length] }));
-};
-exports.TextLoop = TextLoop;