@onepercentio/one-ui 1.3.3 → 1.3.5

package/dist/components/Switch/Switch.module.scss

@@ -0,0 +1,46 @@
+@use "sass:math";
+@use "../../assets/styles/variables.scss" as *;
+
+.root {
+  box-sizing: border-box;
+  $height: 1.4em;
+  height: $height;
+  width: 2em + 0.4em;
+  padding: 0.1em;
+  border-radius: math.div($height, 1);
+  border: 0.1em solid $digitalBlue;
+  background-color: white;
+  transition: background-color $fast linear;
+  cursor: pointer;
+  & * {
+    pointer-events: none !important;
+  }
+
+  input {
+    max-width: 0px;
+    max-height: 0px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
+  .toggler {
+    height: 1em;
+    width: 1em;
+    background-color: $digitalBlue;
+    border-radius: math.div(1em, 2);
+    transition: transform $fast linear;
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: initial;
+  }
+  &.on {
+    background-color: $digitalBlue;
+    .toggler {
+      transform: translateX(1em);
+      background-color: white;
+    }
+  }
+}

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Switch";
+export * from "./Switch";

package/dist/components/Switch/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Switch_1 = require("./Switch");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Switch_1).default; } });
+__exportStar(require("./Switch"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,mCAAmC;AAA1B,kHAAA,OAAO,OAAA;AAChB,2CAAyB"}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,23 @@
+export type TableProps<I extends any> = {
+    /** The list of items to render on the table */
+    items: (I & {
+        className?: string;
+    })[] | undefined;
+    className?: string;
+    /** A map of header ID */
+    heading: {
+        [K in keyof I]?: string;
+    };
+    order: (keyof I)[];
+    paginable?: {
+        totalItems: number;
+        togglePage: (page: number) => void;
+        pageSize: number;
+    };
+};
+/**
+ * A component that displays data in a table format with optional pagination.
+ * It shows rows of information with customizable column headers and can handle
+ * large datasets by splitting them across multiple pages.
+ */
+export default function Table<I extends any>({ paginable, heading, order, items, className, }: TableProps<I>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/Table.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const Spacing_1 = __importDefault(require("../Spacing"));
+const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
+const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
+/**
+ * A component that displays data in a table format with optional pagination.
+ * It shows rows of information with customizable column headers and can handle
+ * large datasets by splitting them across multiple pages.
+ */
+function Table({ paginable, heading, order, items, className = "", }) {
+    const transitionRef = (0, react_1.useRef)(null);
+    const [currPage, setCurrPage] = (0, react_1.useState)(0);
+    const { NextPage, PrevPage } = (0, OneUIProvider_1.useOneUIConfig)("component.table.controls");
+    const itemsToShow = (0, react_1.useMemo)(() => {
+        if (paginable) {
+            const from = currPage * paginable.pageSize;
+            return (items === null || items === void 0 ? void 0 : items.slice(from, from + paginable.pageSize)) || [];
+        }
+        else {
+            return items;
+        }
+    }, [items, currPage]);
+    const { pages } = (0, react_1.useMemo)(() => {
+        if (paginable) {
+            const numPages = Math.ceil(paginable.totalItems / paginable.pageSize);
+            return {
+                pages: numPages,
+            };
+        }
+        return {
+            items: items,
+        };
+    }, [items, currPage, paginable === null || paginable === void 0 ? void 0 : paginable.totalItems]);
+    const Wrapper = paginable ? UncontrolledTransition_1.default : "div";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext.Provider, { value: {
+                    itemsToShow,
+                    keys: order,
+                    heading,
+                }, children: (0, jsx_runtime_1.jsx)(Wrapper, { className: Table_module_scss_1.default.transitionContainer, ref: transitionRef, children: (0, jsx_runtime_1.jsx)(TableComp, { className: className }, currPage) }) }), paginable && paginable.totalItems > paginable.pageSize ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "small" }), (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.footer, "data-testid": "controls", children: [(0, jsx_runtime_1.jsx)("span", { className: Table_module_scss_1.default.iterable, onClick: () => {
+                                    if (!(transitionRef.current instanceof HTMLDivElement))
+                                        transitionRef.current.setOrientation("backward");
+                                    paginable.togglePage(currPage - 1);
+                                    setCurrPage(currPage - 1);
+                                }, children: (0, jsx_runtime_1.jsx)(PrevPage, { disabled: currPage === 0 }) }), (0, jsx_runtime_1.jsx)("span", { className: Table_module_scss_1.default.paging, children: `${currPage + 1}/${pages}` }), (0, jsx_runtime_1.jsx)("span", { className: Table_module_scss_1.default.iterable, onClick: () => {
+                                    if (!(transitionRef.current instanceof HTMLDivElement))
+                                        transitionRef.current.setOrientation("forward");
+                                    paginable.togglePage(currPage + 1);
+                                    setCurrPage(currPage + 1);
+                                }, children: (0, jsx_runtime_1.jsx)(NextPage, { disabled: currPage === pages - 1 }) })] })] })) : null] }));
+}
+exports.default = Table;
+const TableContext = (0, react_1.createContext)(null);
+function TableComp({ className }) {
+    const { itemsToShow, keys, heading } = (0, react_1.useContext)(TableContext);
+    return ((0, jsx_runtime_1.jsxs)("table", { className: `${Table_module_scss_1.default.container} ${className}`, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: keys.map((key) => ((0, jsx_runtime_1.jsx)("th", { children: heading[key] }, String(key)))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: itemsToShow === null || itemsToShow === void 0 ? void 0 : itemsToShow.map((i, index) => ((0, jsx_runtime_1.jsx)("tr", { className: i.className, children: keys.map((key) => ((0, jsx_runtime_1.jsx)("td", { children: i[key] }, String(key)))) }, String(index)))) })] }));
+}
+//# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}

package/dist/components/Table/Table.module.scss

@@ -0,0 +1,74 @@
+@use "../../assets/styles/index.scss" as *;
+
+.transitionContainer {
+  min-height: auto;
+  max-width: 100vw;
+  overflow: auto;
+}
+
+.container {
+  font-family: $mainFontFamily;
+  padding: 0px 4px;
+  width: 100%;
+  position: relative;
+  border-spacing: 0px;
+  th {
+    font-family: 14px;
+    line-height: 28px;
+    text-align: start;
+    font-weight: normal;
+  }
+  td,
+  th {
+    padding: 20px;
+  }
+  tbody tr {
+    background-color: $tableRowBgColor;
+    &:first-child td {
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+      border-top: 1px solid $tableRowBorderColor;
+    }
+    &:last-child td {
+      &:first-child {
+        border-bottom-left-radius: 8px;
+      }
+      &:last-child {
+        border-bottom-right-radius: 8px;
+      }
+    }
+    td {
+      border-bottom: 1px solid $tableRowBorderColor;
+      &:first-child {
+        border-left: 1px solid $tableRowBorderColor;
+      }
+      &:last-child {
+        border-right: 1px solid $tableRowBorderColor;
+      }
+    }
+  }
+}
+.footer {
+  padding: 0px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  --button-min-width: auto;
+  --button-min-height: auto;
+
+  .paging {
+    margin: 0px 12px;
+    font-size: 18px;
+  }
+}
+
+.iterable {
+  @include iteractibleElement;
+  &:first-child {
+    margin-left: auto;
+  }
+}

package/dist/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Table";
+export * from "./Table";

package/dist/components/Table/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Table_1 = require("./Table");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+__exportStar(require("./Table"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,iCAAkC;AAAzB,iHAAA,OAAO,OAAA;AAChB,0CAAwB"}

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement } from "react";
+export declare enum TabType {
+    /** A div that encovers the tab */
+    FULL = 0,
+    /** An underline */
+    UNDERLINE = 1,
+    /** A class is assigned to the selected tab */
+    CLASS = 2
+}
+/**
+ * A component that displays a set of tabs for switching between different options or views.
+ * Users can click on a tab to select it, and the component highlights the active choice.
+ */
+export default function Tabs<O extends string | number>(props: {
+    options: Readonly<{
+        id: O;
+        label: string | ReactElement;
+    }[]>;
+    selected?: O;
+    onSelect: (option: O) => void;
+    itemClassName?: string;
+    className?: string;
+} & ({
+    type?: Exclude<TabType, TabType.CLASS>;
+} | {
+    type?: Extract<TabType, TabType.CLASS>;
+    selectedClass: string;
+})): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabType = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+var TabType;
+(function (TabType) {
+    /** A div that encovers the tab */
+    TabType[TabType["FULL"] = 0] = "FULL";
+    /** An underline */
+    TabType[TabType["UNDERLINE"] = 1] = "UNDERLINE";
+    /** A class is assigned to the selected tab */
+    TabType[TabType["CLASS"] = 2] = "CLASS";
+})(TabType || (exports.TabType = TabType = {}));
+/**
+ * A component that displays a set of tabs for switching between different options or views.
+ * Users can click on a tab to select it, and the component highlights the active choice.
+ */
+function Tabs(props) {
+    const { options, selected, onSelect, itemClassName = "", className = "", type = TabType.UNDERLINE, } = props;
+    const classes = (0, OneUIProvider_1.useOneUIConfig)("component.tabs", {});
+    const selectedRef = (0, react_1.useRef)(null);
+    const guideRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (props.type === TabType.CLASS)
+            return;
+        const guideStyle = guideRef.current.style;
+        const currEl = selectedRef.current;
+        guideStyle["opacity"] = currEl ? "1" : guideStyle["opacity"];
+        guideStyle["width"] = currEl ? currEl.clientWidth + "px" : "0px";
+        guideStyle["left"] = currEl
+            ? currEl.offsetLeft + "px"
+            : guideStyle["left"] || "initial";
+        if (type === TabType.FULL) {
+            guideStyle["height"] = currEl ? currEl.clientHeight + "px" : "";
+            guideStyle["top"] = currEl
+                ? currEl.offsetTop + "px"
+                : guideStyle["top"] || "initial";
+        }
+        else {
+            guideStyle["top"] = currEl
+                ? currEl.offsetTop + currEl.clientHeight + "px"
+                : guideStyle["top"] || "initial";
+        }
+    }, [selected]);
+    (0, react_1.useEffect)(() => {
+        if (props.type === TabType.CLASS)
+            return;
+        guideRef.current.classList.add(Tabs_module_scss_1.default.enableTransition);
+    }, []);
+    const tabNativeCls = TabType[type] in Tabs_module_scss_1.default ? Tabs_module_scss_1.default[TabType[type]] : "";
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: `${Tabs_module_scss_1.default.container} ${className} ${tabNativeCls} ${classes.container}`, children: [options.map((o) => ((0, jsx_runtime_1.jsx)("div", { ref: selected === o.id ? selectedRef : undefined, onClick: () => onSelect(o.id), className: `${selected === o.id ? Tabs_module_scss_1.default.selected : ""} ${itemClassName} ${props.type === TabType.CLASS && selected === o.id
+                        ? props.selectedClass
+                        : ""} ${classes.item}`, "data-testid": "tab-option", children: o.label }, o.id))), TabType.CLASS !== props.type && ((0, jsx_runtime_1.jsx)("div", { ref: guideRef, className: Tabs_module_scss_1.default.guide, "data-testid": "tab-guide" }))] }) }));
+}
+exports.default = Tabs;
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/dist/components/Tabs/Tabs.module.scss

@@ -0,0 +1,40 @@
+@use "../../assets/styles/index.scss" as *;
+
+.container {
+  overflow-x: auto;
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  > div {
+    cursor: pointer;
+    &.selected {
+      font-weight: bold;
+    }
+  }
+  &.FULL {
+    overflow: visible;
+    > div {
+      transition: color 250ms linear;
+      padding: 0.4em 1em;
+      z-index: 1;
+      margin: 0px;
+
+      &.selected {
+        color: var(--tab-selected-color);
+      }
+    }
+    .guide {
+      box-shadow: $elevation;
+      border-radius: 1em / 50%;
+    }
+  }
+}
+
+.guide {
+  height: 0.1em;
+  background-color: var(--tab-guide-color, $digitalBlue);
+  position: absolute;
+  &.enableTransition {
+    transition: left $fast, width $fast, top $fast, height $fast;
+  }
+}

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Tabs";
+export * from "./Tabs";

package/dist/components/Tabs/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });
+__exportStar(require("./Tabs"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,+BAAiC;AAAxB,gHAAA,OAAO,OAAA;AAChB,yCAAuB"}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,22 @@
+import React, { ForwardedRef } from "react";
+import { FromOnePercentUtility } from "../../type-utils";
+export declare function _Text({ type, children, className, ...otherProps }: React.PropsWithChildren<{
+    className?: string;
+    type: FromOnePercentUtility<'UIElements.TextVariants'>;
+    color?: FromOnePercentUtility<'UIElements.TextColors'>;
+} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">>, _ref?: ForwardedRef<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * A component to hold all text variantions
+ **/
+declare const Text: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    type: FromOnePercentUtility<'UIElements.TextVariants'>;
+    color?: FromOnePercentUtility<'UIElements.TextColors'>;
+} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "color"> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * A reusable component that displays styled text with different sizes and colors.
+ * It automatically applies the correct HTML tag and styling based on the text type.
+ */
+export default Text;

package/dist/components/Text/Text.js

@@ -0,0 +1,39 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._Text = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
+function _Text(_a, _ref) {
+    var { type, children, className = "" } = _a, otherProps = __rest(_a, ["type", "children", "className"]);
+    const classNameType = (0, OneUIProvider_1.useOneUIConfig)("component.text.className", {});
+    const tagByType = (0, OneUIProvider_1.useOneUIConfig)("component.text.htmlTag", {});
+    const TagType = tagByType[type] || "p";
+    return ((0, jsx_runtime_1.jsx)(TagType, Object.assign({ ref: _ref, className: `${Text_module_scss_1.default.text} ${classNameType[type]} ${className} ${otherProps.onClick ? Text_module_scss_1.default.iteractible : ""}` }, otherProps, { children: children })));
+}
+exports._Text = _Text;
+/**
+ * A component to hold all text variantions
+ **/
+const Text = (0, react_1.forwardRef)(_Text);
+/**
+ * A reusable component that displays styled text with different sizes and colors.
+ * It automatically applies the correct HTML tag and styling based on the text type.
+ */
+exports.default = Text;
+//# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAAwE;AACxE,+DAA6D;AAC7D,0EAAwC;AAGxC,SAAgB,KAAK,CACnB,EAWC,EACD,IAAyC;QAZzC,EACE,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,OAQf,EAPI,UAAU,cAJf,iCAKC,CADc;IAUf,MAAM,aAAa,GAAG,IAAA,8BAAc,EAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC;IACrE,MAAM,SAAS,GAAG,IAAA,8BAAc,EAAC,wBAAwB,EAAE,EAAE,CAAC,CAAC;IAE/D,MAAM,OAAO,GAAQ,SAAS,CAAC,IAA8B,CAAC,IAAI,GAAG,CAAC;IAEtE,OAAO,CACL,uBAAC,OAAO,kBACN,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,GAAG,0BAAM,CAAC,IAAI,IAAI,aAAa,CAAC,IAAkC,CAC3E,IAAI,SAAS,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,0BAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,IAC7D,UAAU,cAEb,QAAQ,IACD,CACX,CAAC;AACJ,CAAC;AA9BD,sBA8BC;AAED;;IAEI;AACJ,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,KAAK,CAAC,CAAC;AAE/B;;;GAGG;AACH,kBAAe,IAAI,CAAC"}

package/dist/components/Text/Text.module.scss

@@ -0,0 +1,13 @@
+@use "../../assets/styles/index.scss" as *;
+
+.iteractible {
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.text {
+  margin: 0px;
+  white-space: pre-wrap;
+}

package/dist/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Text";
+export * from "./Text";

package/dist/components/Text/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });
+__exportStar(require("./Text"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/Text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,+BAAiC;AAAxB,gHAAA,OAAO,OAAA;AAChB,yCAAuB"}

package/dist/components/Transition/MasksFactory/DiagonalReveal.d.ts

@@ -0,0 +1 @@
+export default function DiagonalReveal(el: HTMLDivElement): string;

package/dist/components/Transition/MasksFactory/DiagonalReveal.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const utils_1 = require("./utils");
+function DiagonalReveal(el) {
+    const height = el.clientHeight;
+    const width = el.clientWidth;
+    const time = (0, utils_1.getTime)(el);
+    const filterId = `f-${Date.now().toString()}`;
+    const resultSvg = (0, server_1.renderToString)((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", id: Date.now().toString(), children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("filter", { id: filterId, x: "0", y: "0", children: (0, jsx_runtime_1.jsx)("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "15" }) }) }), (0, jsx_runtime_1.jsxs)("rect", { x: "-25", y: "-25", width: `${width * 1.5}px`, fill: "white", height: `${height * 1.1}px`, filter: `url(#${filterId})`, children: [(0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", values: "0 0 0; 25 0 0; 32 0 0;", dur: `${time}ms` }), (0, jsx_runtime_1.jsx)("animateTransform", { additive: "sum", attributeName: "transform", attributeType: "XML", type: "translate", values: `0 0; 0 ${height * 0.2}; 0 ${height};`, dur: `${time}ms` })] })] }));
+    return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(resultSvg)}')`;
+}
+exports.default = DiagonalReveal;
+//# sourceMappingURL=DiagonalReveal.js.map

package/dist/components/Transition/MasksFactory/DiagonalReveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagonalReveal.js","sourceRoot":"","sources":["../../../../src/components/Transition/MasksFactory/DiagonalReveal.tsx"],"names":[],"mappings":";;;AAAA,6CAAkD;AAElD,mCAAkC;AAElC,SAAwB,cAAc,CAAC,EAAkB;IACvD,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,CAAC;IAC/B,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC;IAC7B,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,EAAE,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;IAC9C,MAAM,SAAS,GAAG,IAAA,uBAAc,EAC9B,iCAAK,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,aAC/D,2CACE,mCAAQ,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,YAC/B,2CAAgB,EAAE,EAAC,eAAe,EAAC,YAAY,EAAC,IAAI,GAAG,GAChD,GACJ,EACP,kCACE,CAAC,EAAC,KAAK,EACP,CAAC,EAAC,KAAK,EACP,KAAK,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,EACzB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,GAAG,MAAM,GAAG,GAAG,IAAI,EAC3B,MAAM,EAAE,QAAQ,QAAQ,GAAG,aAE3B,6CACE,aAAa,EAAC,WAAW,EACzB,aAAa,EAAC,KAAK,EACnB,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,wBAAwB,EAC/B,GAAG,EAAE,GAAG,IAAI,IAAI,GAChB,EACF,6CACE,QAAQ,EAAC,KAAK,EACd,aAAa,EAAC,WAAW,EACzB,aAAa,EAAC,KAAK,EACnB,IAAI,EAAC,WAAW,EAChB,MAAM,EAAE,UAAU,MAAM,GAAG,GAAG,OAAO,MAAM,GAAG,EAC9C,GAAG,EAAE,GAAG,IAAI,IAAI,GAChB,IACG,IACH,CACP,CAAC;IAEF,OAAO,wCAAwC,kBAAkB,CAC/D,SAAS,CACV,IAAI,CAAC;AACR,CAAC;AA1CD,iCA0CC"}

package/dist/components/Transition/MasksFactory/DiagonalSquareToBalls.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
+ * @param amountOfVerticalSquares The amount of squares vertically to be shown
+ */
+export default function DiagonalSquareToBalls(amountOfVerticalSquares?: number): (el: HTMLDivElement) => string;