@onepercentio/one-ui 0.28.9 → 0.29.1

package/dist-ts/components/LinkToId/LinkToId.module.scss

@@ -0,0 +1,4 @@
+.root:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}

package/dist-ts/components/LinkToId/index.d.ts

@@ -0,0 +1 @@
+export { default, scrollToId } from './LinkToId';

package/dist-ts/components/LinkToId/index.js

@@ -0,0 +1,2 @@
+export { default, scrollToId } from './LinkToId';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/LinkToId/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LinkToId/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist-ts/components/Loader/Loader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * A simple loader
+ **/
+export default function Loader({ className, ...props }: {
+    className?: string;
+} & React.HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/Loader/Loader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Styles from "./Loader.module.scss";
+/**
+ * A simple loader
+ **/
+export default function Loader({ className = "", ...props }) {
+    return (_jsxs("span", { className: `${Styles.indicator} ${className}`, ...props, children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }));
+}
+//# sourceMappingURL=Loader.js.map

package/dist-ts/components/Loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACiD;IACzD,OAAO,CACL,gBAAM,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,SAAS,EAAE,KAAM,KAAK,aAC5D,gBAAQ,EACR,gBAAQ,EACR,gBAAQ,IACH,CACR,CAAC;AACJ,CAAC"}

package/dist-ts/components/Loader/Loader.module.scss

@@ -0,0 +1,40 @@
+@import "../../assets/styles/variables.scss";
+
+.indicator {
+  white-space: nowrap;
+  font-size: 14px;
+  & span {
+    display: inline-block;
+    width: 0.75em;
+    height: 0.75em;
+    border-radius: 0.375em;
+    margin-left: 4px;
+    background-color: var(--loader--indicator-bg, $digitalBlue);
+    animation-name: transparentToOpaque;
+    animation-duration: $normal;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-out;
+    &:nth-child(1) {
+      margin-left: initial;
+      animation-delay: 0;
+    }
+    &:nth-child(2) {
+      animation-delay: $veryFast;
+    }
+    &:nth-child(3) {
+      animation-delay: $fast;
+    }
+  }
+}
+
+@keyframes transparentToOpaque {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/dist-ts/components/Loader/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Loader';

package/dist-ts/components/Loader/index.js

@@ -0,0 +1,2 @@
+export { default } from './Loader';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Loader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist-ts/components/LoaderDotsIndicator/LoaderDotsIndicator.d.ts

@@ -0,0 +1,8 @@
+/**
+ * . .. ... . .. ...
+ **/
+export default function LoaderDotsIndicator({ dotsCount, lockSize, }: {
+    dotsCount?: number;
+    /** Makes the dots so that they do not affect layout size */
+    lockSize?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/LoaderDotsIndicator/LoaderDotsIndicator.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+/**
+ * . .. ... . .. ...
+ **/
+export default function LoaderDotsIndicator({ dotsCount = 3, lockSize = false, }) {
+    const [text, setText] = useState(".");
+    useEffect(() => {
+        const fullText = new Array(dotsCount).fill(".").join("");
+        const intervalId = setInterval(() => {
+            setText((a) => (a === fullText ? "." : a + "."));
+        }, 250);
+        return () => clearInterval(intervalId);
+    }, [dotsCount]);
+    return (_jsxs(_Fragment, { children: [text, lockSize && (_jsx("span", { style: { color: "#0000" }, children: new Array(dotsCount - text.length).fill(".") }))] }));
+}
+//# sourceMappingURL=LoaderDotsIndicator.js.map

package/dist-ts/components/LoaderDotsIndicator/LoaderDotsIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderDotsIndicator.js","sourceRoot":"","sources":["../../../src/components/LoaderDotsIndicator/LoaderDotsIndicator.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,SAAS,GAAG,CAAC,EACb,QAAQ,GAAG,KAAK,GAKjB;IACC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACzD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAClC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QACnD,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,8BACG,IAAI,EACJ,QAAQ,IAAI,CACX,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAC5B,IAAI,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GACxC,CACR,IACA,CACJ,CAAC;AACJ,CAAC"}

package/dist-ts/components/LoaderDotsIndicator/index.d.ts

@@ -0,0 +1 @@
+export { default } from './LoaderDotsIndicator';

package/dist-ts/components/LoaderDotsIndicator/index.js

@@ -0,0 +1,2 @@
+export { default } from './LoaderDotsIndicator';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/LoaderDotsIndicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LoaderDotsIndicator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC"}

package/dist-ts/components/LoopableVideo/LoopableVideo.d.ts

@@ -0,0 +1,9 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+/**
+ * Plays a video and loops between the end and the timestamp you set
+ **/
+export default function LoopableVideo({ videoSrc, percentToBackTo, ...props }: {
+    videoSrc: string;
+    /** A value between 0-1 indicating the timestamp to go back to */
+    percentToBackTo: number;
+} & DetailedHTMLProps<HTMLAttributes<HTMLVideoElement>, HTMLVideoElement>): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/LoopableVideo/LoopableVideo.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Plays a video and loops between the end and the timestamp you set
+ **/
+export default function LoopableVideo({ videoSrc, percentToBackTo, ...props }) {
+    if (process.env.NODE_ENV === "development")
+        if (percentToBackTo < 0 || percentToBackTo > 1)
+            throw new Error(`percentToBackTo should be a value between 0-1`);
+    return (_jsx("video", { autoPlay: true, muted: true, onEnded: ({ currentTarget }) => {
+            const el = currentTarget;
+            el.currentTime = el.duration * percentToBackTo;
+            el.play();
+        }, ...props, children: _jsx("source", { src: videoSrc }) }));
+}
+//# sourceMappingURL=LoopableVideo.js.map

package/dist-ts/components/LoopableVideo/LoopableVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoopableVideo.js","sourceRoot":"","sources":["../../../src/components/LoopableVideo/LoopableVideo.tsx"],"names":[],"mappings":";AAOA;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EAK+D;IACvE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;QACxC,IAAI,eAAe,GAAG,CAAC,IAAI,eAAe,GAAG,CAAC;YAC5C,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;IACrE,OAAO,CACL,gBACE,QAAQ,QACR,KAAK,QACL,OAAO,EAAE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE;YAC7B,MAAM,EAAE,GAAG,aAA0D,CAAC;YACtE,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,QAAQ,GAAG,eAAe,CAAC;YAC/C,EAAE,CAAC,IAAI,EAAE,CAAC;QACZ,CAAC,KACG,KAAK,YAET,iBAAQ,GAAG,EAAE,QAAQ,GAAI,GACnB,CACT,CAAC;AACJ,CAAC"}

package/dist-ts/components/LoopableVideo/index.d.ts

@@ -0,0 +1 @@
+export { default } from './LoopableVideo';

package/dist-ts/components/LoopableVideo/index.js

@@ -0,0 +1,2 @@
+export { default } from './LoopableVideo';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/LoopableVideo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LoopableVideo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist-ts/components/MainGrid/MainGrid.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+/**
+ * This layout divides the screen in 3 fragments and provides a responsive adaptation when on mobile
+ **/
+declare const MainGrid: React.ForwardRefExoticComponent<{
+    leftContent?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+    rightContent?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+    children: React.ReactElement;
+} & React.RefAttributes<Pick<{
+    setOrientation: (orientation: "forward" | "backward") => void;
+    sectionRef: React.RefObject<HTMLDivElement | null>;
+}, "setOrientation">>>;
+export default MainGrid;

package/dist-ts/components/MainGrid/MainGrid.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, } from "react";
+import UncontrolledTransition from "../UncontrolledTransition";
+import Styles from "./MainGrid.module.scss";
+function _MainGrid({ children, leftContent, rightContent, }, ref) {
+    const refs = [
+        useRef(null),
+        useRef(null),
+        useRef(null),
+    ];
+    useImperativeHandle(ref, () => ({
+        setOrientation: (orientation) => {
+            refs.forEach((r) => r.current?.setOrientation(orientation));
+        },
+    }), []);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: Styles.container, children: [_jsx("div", { className: leftContent ? Styles.content : "", children: _jsx(UncontrolledTransition, { className: Styles.section, ref: refs[0], children: leftContent }) }), _jsx("div", { children: _jsx(UncontrolledTransition, { className: Styles.section, ref: refs[1], children: children }) }), _jsx("div", { className: rightContent ? Styles.content : "", children: _jsx(UncontrolledTransition, { className: Styles.section, ref: refs[2], children: rightContent }) })] }) }));
+}
+/**
+ * This layout divides the screen in 3 fragments and provides a responsive adaptation when on mobile
+ **/
+const MainGrid = forwardRef(_MainGrid);
+export default MainGrid;
+//# sourceMappingURL=MainGrid.js.map

package/dist-ts/components/MainGrid/MainGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainGrid.js","sourceRoot":"","sources":["../../../src/components/MainGrid/MainGrid.tsx"],"names":[],"mappings":";AAAA,OAAc,EAGZ,UAAU,EACV,mBAAmB,EACnB,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAC/D,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,SAAS,SAAS,CAChB,EACE,QAAQ,EACR,WAAW,EACX,YAAY,GAKb,EACD,GAEC;IAED,MAAM,IAAI,GAAG;QACX,MAAM,CAA4C,IAAI,CAAC;QACvD,MAAM,CAA4C,IAAI,CAAC;QACvD,MAAM,CAA4C,IAAI,CAAC;KACxD,CAAC;IAEF,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,CAAC,WAAW,EAAE,EAAE;YAC9B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;QAC9D,CAAC;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,4BACE,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC9B,cAAK,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,YAC/C,KAAC,sBAAsB,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,YAC5D,WAAW,GACW,GACrB,EACN,wBACE,KAAC,sBAAsB,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,YAC5D,QAAQ,GACc,GACrB,EACN,cAAK,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,YAChD,KAAC,sBAAsB,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,YAC5D,YAAY,GACU,GACrB,IACF,GACL,CACJ,CAAC;AACJ,CAAC;AAED;;IAEI;AACJ,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;AACvC,eAAe,QAAQ,CAAC"}

package/dist-ts/components/MainGrid/MainGrid.module.scss

@@ -0,0 +1,28 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  // TODO: Priorize reducing width of empty elements insteas of the main container
+  > :nth-child(1),
+  > :nth-child(3) {
+    flex: 1;
+    max-width: 250px;
+    min-width: 150px;
+  }
+
+  .content {
+    min-width: 250px;
+  }
+
+  > :nth-child(2) {
+    flex: 1;
+    max-width: 1200px;
+  }
+}
+
+.section {
+  align-items: flex-start;
+  min-height: initial;
+}

package/dist-ts/components/MainGrid/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MainGrid';

package/dist-ts/components/MainGrid/index.js

@@ -0,0 +1,2 @@
+export { default } from './MainGrid';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/MainGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MainGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist-ts/components/MutableHamburgerButton/MutableHamburgerButton.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * A hamburger button that mutates according to it's state
+ **/
+export default function MutableHamburgerButton({ state, size, className, ...props }: {
+    state?: "default" | "closed" | "arrow-up" | "arrow-down" | "search" | "loading" | "checkmark" | "pencil" | "hamburger";
+    size: number;
+} & React.HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/MutableHamburgerButton/MutableHamburgerButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Styles from "./MutableHamburgerButton.module.scss";
+/**
+ * A hamburger button that mutates according to it's state
+ **/
+export default function MutableHamburgerButton({ state = "default", size, className = "", ...props }) {
+    const stateClass = state in Styles ? Styles[state] : "";
+    return (_jsxs("div", { ...props, className: `${Styles.container} ${stateClass} ${className}`, style: { fontSize: `${size}px` }, children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {})] }));
+}
+//# sourceMappingURL=MutableHamburgerButton.js.map

package/dist-ts/components/MutableHamburgerButton/MutableHamburgerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MutableHamburgerButton.js","sourceRoot":"","sources":["../../../src/components/MutableHamburgerButton/MutableHamburgerButton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,sCAAsC,CAAC;AAE1D;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,KAAK,GAAG,SAAS,EACjB,IAAI,EACJ,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EAayB;IACjC,MAAM,UAAU,GAAG,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAExD,OAAO,CACL,kBACM,KAAK,EACT,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,UAAU,IAAI,SAAS,EAAE,EAC3D,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,EAAE,aAEhC,eAAO,EACP,eAAO,EACP,eAAO,IACH,CACP,CAAC;AACJ,CAAC"}

package/dist-ts/components/MutableHamburgerButton/MutableHamburgerButton.module.scss

@@ -0,0 +1,220 @@
+@use 'sass:math';
+@import "../../assets/styles/index.scss";
+
+$slice: math.div(1, 7);
+
+.container {
+  box-sizing: content-box;
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  background-size: 0 0;
+  background-repeat: no-repeat;
+  transition: transform 250ms;
+  transition-timing-function: ease-in-out;
+  &:active {
+    transform: scale(0.9);
+  }
+  > * {
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: 0.8em;
+    height: #{$slice}em;
+    border-radius: #{math.div($slice, 2)}em;
+    transition: transform $veryFast, width $veryFast, height $veryFast,
+      border-width $veryFast, background-color $veryFast,
+      border-radius $veryFast, top $veryFast;
+    background: var(--mutable-hamburger-background, $digitalBlue);
+    background-size: 1em 1em;
+    background-repeat: no-repeat;
+    border: 0em solid #0000;
+    top: 0px;
+    &:nth-child(1) {
+      border-top-color: var(--mutable-hamburger-background, $digitalBlue);
+    }
+    &:nth-child(2) {
+      border-right-color: var(--mutable-hamburger-background, $digitalBlue);
+    }
+    &:nth-child(3) {
+      border-bottom-color: var(--mutable-hamburger-background, $digitalBlue);
+      border-left-color: var(--mutable-hamburger-background, $digitalBlue);
+    }
+  }
+  & > * {
+    background-position-x: -0.1em;
+  }
+  & > :nth-child(1) {
+    background-position-y: #{$slice * -1}em;
+  }
+  & > :nth-child(2) {
+    background-position-y: #{$slice * -3}em;
+  }
+  & > :nth-child(3) {
+    background-position-y: #{$slice * -5}em;
+  }
+
+  &.closed {
+    > :nth-child(1) {
+      transform: translateY(#{$slice * 2}em) rotateZ(-45deg);
+    }
+    > :nth-child(2) {
+      transform: rotateZ(45deg);
+    }
+    > :nth-child(3) {
+      transform: translateY(-#{$slice * 2}em) rotateZ(-45deg);
+    }
+  }
+
+  &.arrow-up {
+    > * {
+      width: 0.4em;
+    }
+    > :nth-child(1) {
+      transform: translateX(0.1em) translateY(#{$slice * 2}em) rotateZ(45deg);
+    }
+    > :nth-child(2) {
+      transform: translateX(0.1em) rotateZ(45deg);
+    }
+    > :nth-child(3) {
+      transform: translateX(-0.1em) translateY(-#{$slice * 2}em) rotateZ(-45deg);
+    }
+  }
+
+  &.arrow-down {
+    > * {
+      width: 0.4em;
+    }
+    > :nth-child(1) {
+      transform: translateX(0.1em) translateY(#{$slice * 2}em) rotateZ(-45deg);
+    }
+    > :nth-child(2) {
+      transform: translateX(0.1em) rotateZ(-45deg);
+    }
+    > :nth-child(3) {
+      transform: translateX(-0.1em) translateY(-#{$slice * 2}em) rotateZ(45deg);
+    }
+  }
+
+  &.search {
+    > :nth-child(1) {
+      $rate: 1.8;
+      width: #{$slice * $rate + math.div($slice, 1.35)}em;
+      height: #{$slice * $rate + math.div($slice, 1.35)}em;
+      border-radius: #{$slice * $rate * 2}em;
+      background-color: transparent;
+      border: #{math.div($slice, 1.35)}em solid
+        var(--mutable-hamburger-background, $digitalBlue);
+      transform: translateX(-0.15em);
+    }
+    > :nth-child(2) {
+      transform: translateX(0.12em) translateY(-0.05em) rotateZ(45deg);
+      height: #{math.div($slice, 1.35)}em;
+      width: 0.55em;
+    }
+    > :nth-child(3) {
+      transform: translateX(0.12em) translateY(-#{($slice * 1.3) + 0.085}em)
+        rotateZ(45deg);
+      height: #{math.div($slice, 1.35)}em;
+      width: 0.55em;
+    }
+  }
+
+  &.checkmark {
+    > :nth-child(1) {
+      transform: translateY(#{$slice * 2}em) translateX(-0.178em)
+        translateY(0.13em) rotate(45deg);
+      height: #{$slice}em;
+      width: 0.45em;
+    }
+    > :nth-child(2) {
+      height: #{$slice}em;
+      width: 0.7em;
+      transform: translateX(0.1em) rotate(-55deg);
+    }
+    > :nth-child(3) {
+      transform: translateY(-#{$slice * 2}em) translateX(0.1em) rotate(-55deg);
+      height: #{$slice}em;
+      width: 0.7em;
+    }
+  }
+
+  &.loading {
+    $slice: math.div(1, 6);
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    animation-name: rotate;
+    animation-duration: 1s;
+    animation-delay: $veryFast;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    > * {
+      background-color: #0000;
+      width: #{$slice * 4.5}em;
+      height: #{$slice * 4.5}em;
+      border-radius: #{$slice * 4.5}em;
+      border-width: #{$slice}em;
+    }
+    > :nth-child(1) {
+      top: (#{$slice * 4.5}em);
+    }
+    > :nth-child(2) {
+      transform: rotateZ(-5deg);
+    }
+    > :nth-child(3) {
+      transform: rotateZ(-95deg);
+      top: (-#{$slice * 4.5}em);
+    }
+  }
+  &.pencil {
+    perspective: 600px;
+
+    > :nth-child(1) {
+      height: #{$slice}em;
+      width: 0.15em;
+      transform: translateX(0.3em) rotate(-45deg);
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    > :nth-child(2) {
+      width: 0.6em;
+      transform: rotate(-45deg);
+      border-radius: 0;
+    }
+
+    > :nth-child(3) {
+      $slice: $slice * 0.6;
+
+      height: 0em;
+      width: 0em;
+      border-radius: 0;
+      transform: translateX(-0.27em) translateY(0.027em) rotate(-80deg)
+        rotateY(45deg) skew(12deg, 12deg);
+
+      border-left: #{$slice}em solid transparent;
+      border-right: #{$slice}em solid transparent;
+      border-bottom: 0em solid transparent;
+      border-top: #{$slice}em solid;
+      background-color: transparent;
+    }
+  }
+  &.hamburger {
+    > :nth-child(1) {
+      width: 0.7em;
+    }
+    > :nth-child(3) {
+      width: 0.7em;
+    }
+  }
+}

package/dist-ts/components/MutableHamburgerButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MutableHamburgerButton';

package/dist-ts/components/MutableHamburgerButton/index.js

@@ -0,0 +1,2 @@
+export { default } from './MutableHamburgerButton';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/MutableHamburgerButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MutableHamburgerButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC"}

package/dist-ts/components/Notification/Notification.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+/**
+ * A layout for the notification card
+ **/
+export default function Notification({ type, children }: PropsWithChildren<{
+    type: "success";
+}>): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/Notification/Notification.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Card from "../Card";
+import Styles from "./Notification.module.scss";
+/**
+ * A layout for the notification card
+ **/
+export default function Notification({ type, children }) {
+    return _jsx(Card, { className: `${Styles.container} ${Styles[type]}`, children: children });
+}
+//# sourceMappingURL=Notification.js.map

package/dist-ts/components/Notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,QAAQ,EAC+B;IACvC,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE,YAAG,QAAQ,GAAQ,CAAC;AACnF,CAAC"}

package/dist-ts/components/Notification/Notification.module.scss

@@ -0,0 +1,25 @@
+@import "../../assets/styles/variables.scss";
+
+.container {
+  animation-fill-mode: forwards;
+  animation-duration: $fast;
+  animation-name: expand;
+  width: auto;
+  min-width: 250px;
+}
+
+.success {
+  background-color: $success;
+}
+
+@keyframes expand {
+  0% {
+    padding: 0px 12px;
+    max-height: 0%;
+  }
+
+  100% {
+    padding: 12px 12px;
+    max-height: 100%;
+  }
+}

package/dist-ts/components/Notification/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Notification';

package/dist-ts/components/Notification/index.js

@@ -0,0 +1,2 @@
+export { default } from './Notification';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist-ts/components/OrderableList/OrderableList.d.ts

@@ -0,0 +1,38 @@
+import React, { DetailedHTMLProps, HTMLAttributes, ReactElement } from "react";
+type Events = "order-stop" | "order-start";
+export declare enum OrderableListReorderMode {
+    VERTICAL = "v",
+    TWO_DIMENSIONS = "hv"
+}
+/**
+ * This component receives a list of keyed elements and orders it based of the order provided via the prop "keyOrder"
+ **/
+export default function OrderableList({ children, className, mode, shrinkToOnOrder, reorderingClassName, cloneClassName, ...props }: {
+    children: ReactElement[];
+    className?: string;
+    mode?: OrderableListReorderMode;
+    /**
+     * If provided, makes the elements shrink to this value in px when ordering elements
+     */
+    shrinkToOnOrder?: number;
+    /**
+     * A class to apply when reordering
+     */
+    reorderingClassName?: string;
+    /**
+     * A class to apply to the clone el
+     */
+    cloneClassName?: string;
+} & ({
+    keyOrder?: string[];
+    onChangeKeyOrder: (newOrder: string[]) => void;
+} | {
+    currentOrder?: string[];
+}) & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function useOrderableListAnchor(): {
+    anchorRef: React.RefObject<HTMLDivElement> | undefined;
+};
+export declare function useOrderableEvents(events: {
+    [k in Events]: () => void;
+}): void;
+export {};