@onepercentio/one-ui 0.1.2

package/dist/components/AdaptiveDialog/AdaptiveDialog.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+/**
+ * This component implements a generic drawer that displays it as a drawer on mobile and as a modal on desktop
+ **/
+export default function AdaptiveDialog({ onClose, open, className, children, }: PropsWithChildren<{
+    className?: string;
+    open: boolean;
+    onClose?: () => void;
+}>): JSX.Element | null;

package/dist/components/AdaptiveDialog/AdaptiveDialog.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const AdaptiveDialog_module_scss_1 = __importDefault(require("./AdaptiveDialog.module.scss"));
+const HeaderCloseBtn_1 = __importDefault(require("../HeaderCloseBtn"));
+/**
+ * This component implements a generic drawer that displays it as a drawer on mobile and as a modal on desktop
+ **/
+function AdaptiveDialog({ onClose, open = false, className = "", children, }) {
+    const rootDivRef = (0, react_1.useRef)(null);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(open);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            startOfModal.current.focus();
+            document.body.style.overflow = "hidden";
+            setIsVisible(true);
+            const toggleVisbility = (e) => {
+                if (e.animationName === AdaptiveDialog_module_scss_1.default.backdropDismiss) {
+                    setIsVisible(false);
+                    e.target.removeEventListener("animationend", toggleVisbility);
+                }
+            };
+            rootDivRef.current.addEventListener("animationend", toggleVisbility);
+            return () => {
+                document.body.style.overflow = "";
+            };
+        }
+    }, [open]);
+    const firstAnchor = (0, react_1.useRef)(null);
+    const lastAnchor = (0, react_1.useRef)(null);
+    const startOfModal = (0, react_1.useRef)(null);
+    function onFocusAnchors(e) {
+        const focusOnStartOfModal = () => {
+            const nextSibling = firstAnchor.current.nextElementSibling;
+            if (nextSibling instanceof HTMLDivElement)
+                nextSibling.focus();
+        };
+        if (e.target === firstAnchor.current) {
+            if (e.relatedTarget === startOfModal.current)
+                lastAnchor.current.focus();
+            else
+                focusOnStartOfModal();
+        }
+        else if (e.target === lastAnchor.current &&
+            e.relatedTarget !== firstAnchor.current) {
+            focusOnStartOfModal();
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        if (open)
+            startOfModal.current.focus();
+    }, []);
+    return isVisible || open ? (react_1.default.createElement("div", { ref: rootDivRef, className: `${AdaptiveDialog_module_scss_1.default.backdrop} ${open ? AdaptiveDialog_module_scss_1.default.open : AdaptiveDialog_module_scss_1.default.close} ${expanded ? AdaptiveDialog_module_scss_1.default.expanded : ""}` },
+        react_1.default.createElement("div", { className: `${AdaptiveDialog_module_scss_1.default.container} ${className}` },
+            react_1.default.createElement("div", { ref: firstAnchor, tabIndex: 0, onFocus: onFocusAnchors }),
+            react_1.default.createElement("div", { ref: startOfModal, tabIndex: 0 }),
+            onClose && (react_1.default.createElement(HeaderCloseBtn_1.default, { mode: "close", hidden: false, onClick: onClose })),
+            react_1.default.createElement("div", { className: AdaptiveDialog_module_scss_1.default.indicator, onClick: () => setExpanded((p) => !p) }),
+            children,
+            react_1.default.createElement("div", { ref: lastAnchor, tabIndex: 0, onFocus: onFocusAnchors })))) : null;
+}
+exports.default = AdaptiveDialog;
+//# sourceMappingURL=AdaptiveDialog.js.map

package/dist/components/AdaptiveDialog/AdaptiveDialog.js.map

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

package/dist/components/AdaptiveDialog/AdaptiveDialog.module.scss

@@ -0,0 +1,137 @@
+@import "../../assets/styles/index.scss";
+
+.backdrop {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+
+  @media screen and (orientation: "portrait") {
+    align-items: flex-end;
+  }
+}
+.backdrop,
+.container {
+  animation-duration: $fast;
+  animation-fill-mode: forwards;
+}
+
+.open {
+  &.backdrop {
+    animation-name: backdropAppear;
+  }
+  .container {
+    animation-name: reveal;
+  }
+  @media screen and (orientation: "portrait") {
+    .container {
+      animation-timing-function: ease-in-out;
+      animation-name: slideUp;
+    }
+  }
+}
+
+.close {
+  &.backdrop {
+    animation-name: backdropDismiss;
+  }
+
+  .container {
+    animation-name: dismiss;
+  }
+
+  @media screen and (orientation: "portrait") {
+    .container {
+      animation-name: slideDown;
+    }
+  }
+}
+
+.container {
+  > div:first-child {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+  }
+  padding: 16px 32px;
+  position: relative;
+  width: 100%;
+  max-width: 640px;
+  background: $mainBackgroundColor;
+  backdrop-filter: var(--adaptive-dialog-backdrop, initial);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  max-height: 90% !important;
+  overscroll-behavior: contain;
+  @media screen and (orientation: "portrait") {
+    min-height: initial;
+    align-items: flex-start;
+  }
+}
+
+@keyframes backdropAppear {
+  0% {
+    background-color: #0000;
+  }
+
+  100% {
+    background-color: #0005;
+  }
+}
+
+@keyframes backdropDismiss {
+  0% {
+    background-color: #0005;
+  }
+
+  100% {
+    background-color: #0000;
+  }
+}
+
+@keyframes reveal {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes dismiss {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    min-height: 0px;
+    max-height: 0%;
+  }
+
+  100% {
+    max-height: 100%;
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    max-height: 100%;
+  }
+
+  100% {
+    min-height: 0px;
+    max-height: 0%;
+  }
+}

package/dist/components/AdaptiveDialog/AdaptiveDialog.stories.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import AdaptiveDialog from "./AdaptiveDialog";
+declare const _default: {
+    component: typeof AdaptiveDialog;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        className?: string | undefined;
+        open: boolean;
+        onClose?: (() => void) | undefined;
+    } & {
+        children?: React.ReactNode;
+    }>;
+};
+export declare const Improvement_LockScrollWhenOpen: () => JSX.Element;
+export declare const Improvement_LockFocusInsideModal: () => JSX.Element;

package/dist/components/AdaptiveDialog/AdaptiveDialog.stories.js

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Improvement_LockFocusInsideModal = exports.Improvement_LockScrollWhenOpen = exports.InitialImplementation = void 0;
+const react_1 = __importStar(require("react"));
+const AdaptiveDialog_1 = __importDefault(require("./AdaptiveDialog"));
+exports.default = {
+    component: AdaptiveDialog_1.default,
+    title: "Adaptive Dialog",
+};
+const InitialImplementation = (args) => (react_1.default.createElement(AdaptiveDialog_1.default, Object.assign({}, args),
+    react_1.default.createElement("p", null, "Some content"),
+    react_1.default.createElement("h1", null, "ANs some more"),
+    react_1.default.createElement("h1", null, "ANs some more"),
+    react_1.default.createElement("h1", null, "ANs some more"),
+    react_1.default.createElement("h1", null, "ANs some more"),
+    react_1.default.createElement("h1", null, "ANs some more"),
+    react_1.default.createElement("h1", null, "ANs some more"),
+    react_1.default.createElement("h1", null, "ANs some more")));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    open: true,
+};
+const Improvement_LockScrollWhenOpen = () => {
+    const [o, so] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(AdaptiveDialog_1.default, { open: o, onClose: () => so(false) },
+            react_1.default.createElement("div", { style: {
+                    overflow: "auto",
+                } }, new Array(100).fill(undefined).map((_, i) => (react_1.default.createElement("h1", null,
+                "Scrolling modal div item ",
+                i,
+                " ",
+                react_1.default.createElement("button", { onClick: () => so(false) }, "click to close modal")))))),
+        react_1.default.createElement("div", null, new Array(100).fill(undefined).map((_, i) => (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("h1", null,
+                "Scrolling div item ",
+                i,
+                " ",
+                react_1.default.createElement("button", { onClick: () => so(true) }, "click to open modal")),
+            i == 24 ? (react_1.default.createElement("div", { style: { overflow: "auto", height: 40 } },
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"),
+                react_1.default.createElement("h1", null, "Nested scroll"))) : null))))));
+};
+exports.Improvement_LockScrollWhenOpen = Improvement_LockScrollWhenOpen;
+const Improvement_LockFocusInsideModal = () => {
+    const [o, oo] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h1", null, "Here we have an input"),
+        react_1.default.createElement("input", { placeholder: "This should not be focusable when I open the modal" }),
+        react_1.default.createElement("button", { onClick: () => oo(true) }, "Open modal"),
+        react_1.default.createElement(AdaptiveDialog_1.default, { open: o, onClose: () => {
+                oo(false);
+            } },
+            react_1.default.createElement("h1", null, "Try pressing tab to switch focus"),
+            react_1.default.createElement("input", { placeholder: "This should be focusable" }))));
+};
+exports.Improvement_LockFocusInsideModal = Improvement_LockFocusInsideModal;
+//# sourceMappingURL=AdaptiveDialog.stories.js.map

package/dist/components/AdaptiveDialog/AdaptiveDialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveDialog.stories.js","sourceRoot":"","sources":["../../../src/components/AdaptiveDialog/AdaptiveDialog.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,sEAA8C;AAE9C,kBAAe;IACb,SAAS,EAAE,wBAAc;IACzB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,8BAAC,wBAAc,oBAAK,IAAI;IACtB,wDAAmB;IACnB,0DAAsB;IACtB,0DAAsB;IACtB,0DAAsB;IACtB,0DAAsB;IACtB,0DAAsB;IACtB,0DAAsB;IACtB,0DAAsB,CACP,CAClB,CAAC;AAXW,QAAA,qBAAqB,yBAWhC;AACF,6BAAqB,CAAC,IAAI,GAAG;IAC3B,IAAI,EAAE,IAAI;CAC6C,CAAC;AAEnD,MAAM,8BAA8B,GAAG,GAAG,EAAE;IACjD,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEhC,OAAO,CACL;QACE,8BAAC,wBAAc,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;YAC/C,uCACE,KAAK,EAAE;oBACL,QAAQ,EAAE,MAAM;iBACjB,IAEA,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5C;;gBAC4B,CAAC;gBAAE,GAAG;gBAChC,0CAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,2BAA+B,CAC5D,CACN,CAAC,CACE,CACS;QACjB,2CACG,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5C;YACE;;gBACsB,CAAC;gBAAE,GAAG;gBAC1B,0CAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,0BAA8B,CAC1D;YACJ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CACT,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC1C,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB;gBACtB,0DAAsB,CAClB,CACP,CAAC,CAAC,CAAC,IAAI,CACP,CACJ,CAAC,CACE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AA/CW,QAAA,8BAA8B,kCA+CzC;AAEK,MAAM,gCAAgC,GAAG,GAAG,EAAE;IACnD,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChC,OAAO,CACL;QACE,kEAA8B;QAC9B,yCAAO,WAAW,EAAC,oDAAoD,GAAG;QAC1E,0CAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAqB;QAEpD,8BAAC,wBAAc,IACb,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,GAAG,EAAE;gBACZ,EAAE,CAAC,KAAK,CAAC,CAAC;YACZ,CAAC;YAED,6EAAyC;YACzC,yCAAO,WAAW,EAAC,0BAA0B,GAAG,CACjC,CAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,gCAAgC,oCAmB3C"}

package/dist/components/AdaptiveDialog/AdaptiveDialog.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AdaptiveDialog/AdaptiveDialog.test.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const AdaptiveDialog_stories_1 = require("./AdaptiveDialog.stories");
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(AdaptiveDialog_stories_1.InitialImplementation, Object.assign({}, props)));
+}
+it('Should at least render :)', () => {
+    renderScreen({});
+});
+//# sourceMappingURL=AdaptiveDialog.test.js.map

package/dist/components/AdaptiveDialog/AdaptiveDialog.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveDialog.test.js","sourceRoot":"","sources":["../../../src/components/AdaptiveDialog/AdaptiveDialog.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAEhD,qEAA8E;AAE9E,SAAS,YAAY,CAAC,KAA6C;IACjE,OAAO,IAAA,cAAM,EAAC,8BAAC,8CAAS,oBAAK,KAAK,EAAG,CAAC,CAAC;AACzC,CAAC;AAED,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACjC,YAAY,CAAC,EAAE,CAAC,CAAC;AACrB,CAAC,CAAC,CAAA"}

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

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

package/dist/components/AdaptiveDialog/index.js

@@ -0,0 +1,9 @@
+"use strict";
+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 AdaptiveDialog_1 = require("./AdaptiveDialog");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AdaptiveDialog_1).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AdaptiveDialog/index.tsx"],"names":[],"mappings":";;;;;;AAAA,mDAA2C;AAAlC,0HAAA,OAAO,OAAA"}

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.d.ts

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from "react";
+/**
+ * A component that you can put anywhere but hides when small enough and shows the control via a fixed floating button
+ **/
+export default function AdaptiveSidebar({ children, className, ...props }: PropsWithChildren<{
+    className?: string;
+} & React.HTMLProps<HTMLDivElement>>): JSX.Element;

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 });
+const react_1 = __importStar(require("react"));
+const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
+const AdaptiveSidebar_module_scss_1 = __importDefault(require("./AdaptiveSidebar.module.scss"));
+/**
+ * A component that you can put anywhere but hides when small enough and shows the control via a fixed floating button
+ **/
+function AdaptiveSidebar(_a) {
+    var { children, className = "" } = _a, props = __rest(_a, ["children", "className"]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        containerRef.current.scrollTo({
+            left: 0,
+            behavior: "smooth",
+            top: 0,
+        });
+    }, [open]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", Object.assign({ ref: containerRef, className: `${AdaptiveSidebar_module_scss_1.default.container} ${open ? AdaptiveSidebar_module_scss_1.default.open : AdaptiveSidebar_module_scss_1.default.closed} ${className}` }, props), children),
+        react_1.default.createElement("div", { className: AdaptiveSidebar_module_scss_1.default.hamburger, onClick: () => setOpen((a) => !a) },
+            react_1.default.createElement(MutableHamburgerButton_1.default, { size: 48, state: open ? "closed" : "default" }))));
+}
+exports.default = AdaptiveSidebar;
+//# sourceMappingURL=AdaptiveSidebar.js.map

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveSidebar.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/AdaptiveSidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8E;AAC9E,uFAA+D;AAC/D,gGAAmD;AAEnD;;IAEI;AACJ,SAAwB,eAAe,CAAC,EAMvC;QANuC,EACtC,QAAQ,EACR,SAAS,GAAG,EAAE,OAIf,EAHI,KAAK,cAH8B,yBAIvC,CADS;IAIR,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,YAAY,CAAC,OAAQ,CAAC,QAAQ,CAAC;YAC7B,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,CAAC;SACP,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL;QACE,qDACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,GAAG,qCAAM,CAAC,SAAS,IAC5B,IAAI,CAAC,CAAC,CAAC,qCAAM,CAAC,IAAI,CAAC,CAAC,CAAC,qCAAM,CAAC,MAC9B,IAAI,SAAS,EAAE,IACX,KAAK,GAER,QAAQ,CACL;QACN,uCAAK,SAAS,EAAE,qCAAM,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;YACjE,8BAAC,gCAAsB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAI,CACpE,CACL,CACJ,CAAC;AACJ,CAAC;AAlCD,kCAkCC"}

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.module.scss

@@ -0,0 +1,48 @@
+@import "../../assets/styles/index.scss";
+
+$hamburgerSize: 48;
+$hamburgerOffset: 24;
+
+@value hamburgerSize #{$hamburgerSize};
+
+.hamburger {
+  position: fixed;
+  top: #{$hamburgerOffset}px;
+  left: #{$hamburgerOffset}px;
+}
+
+.hamburger {
+  display: initial;
+}
+
+.hamburger,
+.container {
+  z-index: 1000;
+}
+
+@media screen and (min-width: 640px) {
+  .hamburger {
+    display: none;
+  }
+}
+
+.container {
+    box-sizing: border-box;
+  height: 100%;
+
+  @media screen and (max-width: 640px) {
+    padding-top: #{$hamburgerSize + $hamburgerOffset * 2}px;
+    position: fixed;
+    width: 100%;
+    overflow: auto;
+
+    &.open {
+      transition: transform $veryFast ease-out;
+      transform: translateX(-0%);
+    }
+    &.closed {
+      transition: transform $veryFast ease-in;
+      transform: translateX(-100%);
+    }
+  }
+}

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.stories.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import AdaptiveSidebar from "./AdaptiveSidebar";
+declare const _default: {
+    component: typeof AdaptiveSidebar;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        className?: string | undefined;
+    } & React.HTMLProps<HTMLDivElement> & {
+        children?: React.ReactNode;
+    }>;
+};

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const AdaptiveSidebar_1 = __importDefault(require("./AdaptiveSidebar"));
+exports.default = {
+    component: AdaptiveSidebar_1.default,
+    title: "Adaptive Sidebar",
+};
+const InitialImplementation = (args) => (react_1.default.createElement(AdaptiveSidebar_1.default, Object.assign({}, args),
+    react_1.default.createElement("div", { style: { backgroundColor: "yellow" } },
+        react_1.default.createElement("h1", { style: { margin: 0 } }, "Um sidebar heading"),
+        new Array(100).fill(undefined).map((_, i) => (react_1.default.createElement("p", null,
+            "Op\u00E7\u00E3o ",
+            i))))));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {};
+//# sourceMappingURL=AdaptiveSidebar.stories.js.map

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveSidebar.stories.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/AdaptiveSidebar.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,wEAAgD;AAEhD,kBAAe;IACb,SAAS,EAAE,yBAAe;IAC1B,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,8BAAC,yBAAe,oBAAK,IAAI;IACvB,uCAAK,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE;QACvC,sCAAI,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,yBAAyB;QAChD,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5C;;YAAU,CAAC,CAAK,CACjB,CAAC,CACE,CACU,CACnB,CAAC;AATW,QAAA,qBAAqB,yBAShC;AACF,6BAAqB,CAAC,IAAI,GAAG,EAE5B,CAAC"}

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

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

package/dist/components/AdaptiveSidebar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+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 AdaptiveSidebar_1 = require("./AdaptiveSidebar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AdaptiveSidebar_1).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/index.tsx"],"names":[],"mappings":";;;;;;AAAA,qDAA4C;AAAnC,2HAAA,OAAO,OAAA"}

package/dist/components/AnchoredTooltip/AnchoredTooltip.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+declare type Props = {
+    children: JSX.Element;
+    anchorRef: RefObject<HTMLElement>;
+    open: boolean;
+    className?: string;
+};
+/**
+ * This tooltip anchors itself to an element and handles positioning relative to the anchored element
+ **/
+export default function AnchoredTooltip(props: Props): JSX.Element;
+export {};